:root {
    --main-color: #0a2752;
    --secondary-color: #337ab7;
    --gray-light: #f1f1f1;
}

.header-content {
    .logo img { height:70px; width:auto; }

    @media (min-width: 992px) {
        .logo img { height:100px; }
    }
}

.mobilenav__inner { background: -webkit-linear-gradient(to top, #3c83a5, var(--main-color)); background: linear-gradient(to top, #3c83a5, var(--main-color)); }

/* TOP NAVIGATION STICKY */
.fixed-top-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Đảm bảo menu nằm trên các thành phần khác */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Tùy chọn: tạo bóng đổ nhẹ cho đẹp */
    animation: slideDown 0.3s ease-out; /* Tùy chọn: hiệu ứng xuất hiện mượt */
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
/* / TOP NAVIGATION STICKY */

.home-banner .home-banner__footer { margin-top:2em; }

.home-description { font-size:1.2em; margin-top:-15px; }

.home-why-list { margin:2em auto; width:96%; gap:1em; }
.home-why-list .home-why-item { position:relative;  background-color:var(--main-color); }
.home-why-list .home-why-item .text { position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--gray-light); color:var(--main-color); display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s ease-in-out; padding:1em; text-align:center; font-size:1.7em; }

.home-why-list .home-why-item:hover .text { opacity:1; }
.home-why-list .home-why-item .home-why-title { margin-bottom:1em; font-size:1.3em; text-align:center; color:#FFF; text-transform:uppercase; font-weight:bold; }

.home-why-list .home-why-item  figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:1; }
.home-why-list .home-why-item  figcaption:before, .home-why-list .home-why-item  figcaption:after { position: absolute; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
}
.home-why-list .home-why-item  figcaption:before {
	top: 15px;
    right: 5px;
    bottom: 15px;
    left: 5px;
	border-top: 1px solid #ffcc33;
	border-bottom: 1px solid #ffcc33;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.home-why-list .home-why-item figcaption:after {
	top: 5px;
	right: 10px;
	bottom: 5px;
	left: 10px;
	border-right: 1px solid #ffcc33;
	border-left: 1px solid #ffcc33;
	-webkit-transform: scale(1, 0);
	transform: scale(1, 0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}
.home-why-list .home-why-item:hover figcaption:before, .home-why-list .home-why-item:hover figcaption:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.slick-dotted.slick-slider .slick-slide { padding:0 5px;  }
.slick-dotted.slick-slider .slick-slide .row { align-items:stretch; margin-left:unset; margin-right:unset; }
.slick-dotted.slick-slider .slick-slide .row [class^="col-"] { padding:0; }
.slick-dotted.slick-slider .slick-slide .facilities-item .facilities-item-desc { position:realtive; }
.slick-dotted.slick-slider .slick-dots { position:relative; bottom:unset; }

@media (min-width:768px){
    
    .home-why-list { width:100%; justify-content:space-between; }
    .home-why-list .col-md-3 { flex:0 0 calc(25% - 1em); padding:0 10px; }
    .home-why-list .home-why-item .home-why-title { color:#FFF; font-size:1.1em; line-height:1.5em; }
    .home-why-list .home-why-item .text { font-size:.9em; }

}

@media (min-width:996px){
    .home-description { font-size:1.5em; margin-top:-15px; margin-bottom:40px;  }
    .home-why-list .home-why-item .text { font-size:1.2em; }
    
	.slick-dotted.slick-slider .slick-slide .row .col-12 { display:flex; padding-right:10px; }
	/* .slick-dotted.slick-slider .facilities-item { min-height:unset; aspect-ratio:6/4; width:100%; } */
	.row.facilities-list-image { align-items:stretch; }
}