/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


@-moz-document url-prefix() {
  body {
    font-family: 'Roboto', Arial, sans-serif !important;
  }
	
	.nav > li > a {
  font-family: Montserrat, sans-serif;
}
}

.m-0 {
	margin: 0!important; 
	p {
	margin: 0!important;
		
	}
}
.relative { 
position: relative;
}


.quote-right {
    position: absolute;
	    margin-top: -20px;
    right: 0;
	img {
	width: 35px;
		
	}
}


.quote-left {
    position: absolute;
	img {
	width: 35px;
	}
}



.mfp-figure:after {
	background-color: transparent !important;
	box-shadow: none !important;
}

.mfp-figure {
	min-width: 80vw;
}

.mfp-img {
	    margin: -100px auto 0 auto !important;
}

.nav-line-bottom>li>a:before, .nav-line-grow>li>a:before, .nav-line>li>a:before {
    height: 2px;
}


.header-bottom .flex-left a {
		&:before {
		visibility: hidden;
	}
}

.header-bottom .flex-right .nav-top-link {
	    background-color: #1856a6;
    border-radius: 100px;
    width: 45px;
    height: 45px;
    color: #fff;
	
	
	&:before {
		visibility: hidden;
	}
	
	.icon-menu {
		position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
	}
	
	.icon-angle-down {
		opacity: 0;
	}
}


.group-top, .group-bottom {
	    visibility: hidden;
}



.header-bottom-nav {
		.nav-top-link {
		letter-spacing: -0.25px;
	}
}

.flag-section {
	.box-image {
		background-image: linear-gradient(0deg,  rgba(255, 209, 0, 0.45), rgba(255, 209, 0, 0.45)), 
                      url("/wp-content/uploads/2026/01/bg-flag.jpg");
		border-radius: 10px 10px 0 0;
		
		img {
			transform: scale(0.75);
		}
	}
	
	.box-text {
		    border-radius: 0 0 10px 10px;
	}
}



.commendation-section {
	.box-image {
		background-image: linear-gradient(0deg, rgba(20, 40, 60, 0.35), rgba(20, 40, 60, 0.35)),
  					url("/wp-content/uploads/2026/01/red_fabric.jpg");

		border-radius: 10px 10px 0 0;
		
		img {
			transform: scale(0.75);
		}
	}
	
	.box-text {
		    border-radius: 0 0 10px 10px;
	}
	
}

.school-certification {
	.box-image {
		background-image: linear-gradient(0deg, rgba(20, 40, 60, 0.35), rgba(20, 40, 60, 0.35)),
  					url("/wp-content/uploads/2026/01/red_fabric.jpg");

		border-radius: 10px;
		
		img {
			transform: scale(0.85);
		}
	}
	
}

.major-certification {
	.box-image {
		background-image: linear-gradient(0deg, rgba(20, 40, 60, 0.35), rgba(20, 40, 60, 0.35)),
  					url("/wp-content/uploads/2026/01/red_fabric.jpg");

		border-radius: 10px 10px 0 0;
		
		img {
			transform: scale(0.85);
		}
	}
	
	.box-text {
		    border-radius: 0 0 10px 10px;
			background: linear-gradient(to right, rgb(255,249,251), rgb(240, 239, 255));
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			text-transform: uppercase;
			font-weight: 700;
			color: rgb(24, 86, 166);

	}
	
}

.major-slider {
	  .flickity-viewport {
   			background-image: linear-gradient(to right, rgb(255,249,251,0.5), rgb(240, 239, 255,0.5)),
  					url("/wp-content/uploads/2026/01/Rectangle-11.png");
  }
}

.document-container {
	    background: linear-gradient(to right, rgb(255, 249, 251), rgb(240, 239, 255));
	
	
}

.document-section {
	.box-image {
		background-image: linear-gradient(0deg, rgba(20, 40, 60, 0.35), rgba(20, 40, 60, 0.35)),
  					url("/wp-content/uploads/2026/01/red_fabric.jpg");

		border-radius: 10px 10px 0 0 !important;
		
		img {
			transform: scale(0.75);
		}
	}
	
	.col-inner {
		height: 100%;
		    border-radius: 0 0 10px 10px;
		background-color: rgb(229, 229, 229);
	}
}

.collection-section {
	.gallery-col {
    .box-image {
      height: 300px; 
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px; 
      
      img {
        max-height: 100%;
        width: auto; 
        object-fit: contain; 
      }
    }
	.col-inner {
		background: linear-gradient(to bottom, rgb(255,249,251),rgb(240, 239, 255));
		border: 1px solid #E8EEFE;
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
		
		.gallery-box {
			padding-bottom: 25px;
		}
	}
		.box-text {
			/*border: 1px solid #CCA700;
			background: linear-gradient(to bottom, #CCA700, #FFFFE8);
			width: 90% !important;
			margin: auto;
    		border-radius: 50px;
			padding-bottom: 0.4em !important;
			p {
				font-weight: 700;
    			font-size: 18px;
							color: #665300; */
				position: relative;
				display: inline-flex !important;
				align-items: center !important;
				justify-content: center !important;
				padding: 12px 35px !important;
				font-family: inherit;
				font-weight: 700;
				font-size: 18px;
				color: #000000 !important;
				text-decoration: none !important;
				background: #CCA700 !important; 
				border-radius: 50px !important;
				overflow: hidden !important;
				transition: all 0.4s ease !important;
				cursor: pointer;
				border: none !important;
				outline: none !important;
				box-sizing: border-box !important;
				z-index: 1;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important

			}
		.box-text::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300%; 
			height: 300%;
			background: conic-gradient(
				from 0deg,
				transparent 0%,
				rgba(255, 255, 255, 1) 50%,
				transparent 100%
			);
			transform: translate(-50%, -50%) rotate(0deg);
			opacity: 0;
			z-index: -2;
			transition: opacity 0.3s ease;
}

		.box-text::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(100% - 4px) !important; 
			height: calc(100% - 4px) !important;
			transform: translate(-50%, -50%) !important;
			background: linear-gradient(15deg, #CCA700 0%, #FFFFE8 100%) !important; 
			border-radius: 48px !important;
			z-index: -1;
			transition: all 0.4s ease;
			box-sizing: border-box !important;
		}

		.box-text:hover {
			transform: translateY(-2px) !important;
			box-shadow: 0 8px 25px rgba(204, 167, 0, 0.6) !important;
		}

		.box-text:hover::before {
			opacity: 1;
			animation: rotateBorder 1.5s linear infinite;
		}

		.box-text:hover::after {
			background: linear-gradient(15deg, #e6bc00 0%, #ffffff 100%) !important;
			filter: brightness(1.1) !important; 
		}

/* Tối ưu cho màn hình Mobile và Tablet nhỏ (dưới 768px) */
@media (max-width: 768px) {
    .stage-banner-button {
        padding: 10px 24px !important; /* Giảm khoảng cách padding */
        font-size: 16px !important;    /* Giảm cỡ chữ xuống 16px */
    }

    .stage-banner-button .icon, 
    .stage-banner-button i {
        margin-left: 6px;
        font-size: 16px; /* Thu nhỏ icon cho cân đối với chữ */
    }
}
		}
  }
}

#menu-item-76 {
	
	.sub-menu {
/* 		width: 100%; */
/* 		padding-top: 60px; */
	}
	#menu-item-338 {
		position: absolute;
		        margin-top: -30px;
	},
	
	#menu-item-137, #menu-item-132, #menu-item-133, #menu-item-336 {

			width: 25%;
	}
	
	#menu-item-132, #menu-item-133, #menu-item-134 .menu-item-type-custom {
		.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
			font-size: 0;
		}
	}
	
}



.medal-row img {
	-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 0px 6px yellow);
}

.medal-image {
	padding: 30px;
	
}

.home-pages-banner {
	
	&.banner {
		background-color: transparent !important;
	}
	
	&::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 5px; /* border thickness */
  border-radius: inherit;

  background: linear-gradient(to bottom, #ffd700, #b8860b);

  /* cut the center to make it an inset border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}
	
	
}


.home-pages-featured {
	.page-box:first-of-type {
		border-radius: 10px;
		&::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 5px; /* border thickness */
  border-radius: inherit;

  background: linear-gradient(to bottom, #ffd700, #b8860b);

  /* cut the center to make it an inset border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}
	}
	
	
	img {
		padding: 5px;
		border-radius: 10px;
	}
	
}

.dot-left {
	position: absolute;
}

.teacher-back { 
margin-left: 20% !important;
}

.teacher-front {
  transition: opacity 0.4s ease;

}

.teacher-front:hover {
  opacity: 0;
}

.back-to-top.hide-for-medium {
	    display: inline-block !important;
}

.mfp-content { 
	figure {
		.mfp-img {
			pointer-events: none;
		}
	}

}


.page-id-5924 { 
	header, footer { 
	display: none !important;
	}


}

.co-thi-dua-iframe {
	    width: 100%;
    border: none;
    min-height: 100vh;
    height: fit-content;
}