*{
box-sizing:border-box;
}

footer{
margin-top:auto;
}

@media(max-width:768px){

  .hero-btns{
    justify-content: center; 
    text-align: center;
  }

  .hero-btns .btn{
    width: auto;
  }

}

/* ================= GLOBAL ================= */

body{
display:flex;
flex-direction:column;
background:#0f1f18;
color:#e8f5ef;
font-family:system-ui;
margin:0;
scroll-behavior:smooth;
overflow-x:hidden;
}

/* ================= NAVBAR ================= */

/* ================= NAVBAR GLASS ================= */

.navbar{
  background:rgba(10,25,18,0.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:0.3s;
}

/* Khi scroll xuống */
.navbar.scrolled{
  background:rgba(10,25,18,0.75);
  backdrop-filter:blur(14px);
}

/* ================= BRAND ================= */

.nav-brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.navbar-brand{
  color:#cde6db;
  font-weight:600;
  letter-spacing:1px;
}

/* ================= TEMP ================= */

.nav-temp{
  background:rgba(255,255,255,0.08);
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
  backdrop-filter:blur(6px);
}

/* ================= MENU ================= */

.nav-menu{
  margin-left:auto;
}

.nav-menu a{
  color:#cde6db;
  text-decoration:none;
  margin-left:18px;
  font-size:14px;
  opacity:0.75;
  position:relative;
  transition:0.3s;
}

/* Hover effect mượt */
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:1px;
  background:#6bbf9b;
  transition:0.3s;
}

.nav-menu a:hover{
  opacity:1;
}

.nav-menu a:hover::after{
  width:100%;
}


@media(max-width:992px){
  .nav-menu{
    display:none;
  }
}

/* BUTTON */
.nav-toggle{
  margin-left:auto;
  font-size:22px;
  color:#cde6db;
  cursor:pointer;
}

.mobile-menu{
  position:fixed;
  top:70px;
  left:0;
  width:100%;

  background:rgba(10,25,18,0.9);
  backdrop-filter:blur(12px);

  padding:20px;
  display:flex;
  flex-direction:column;
  gap:15px;

  transform:translateY(-120%);
  opacity:0;
  transition:0.4s;

  z-index:9999;
}

.mobile-menu.active{
  transform:translateY(0);
  opacity:1;
}

.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;

  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(2px);

  opacity:0;
  pointer-events:none;
  transition:0.3s;

  z-index:9998;
}

.menu-overlay.active{
  opacity:1;
  pointer-events:auto;
}
/* LINK */
.mobile-menu a{
  color:#cde6db;
  text-decoration:none;
  font-size:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
/* ================= HERO ================= */

.hero{
height:100vh;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
}

/* HERO BACKGROUND */

.hero-bg{
position:absolute;
width:100%;
height:110%;
background:url("/img/cloud/san-may-dinh-mau-son-03.jpg") center/cover;
transition:1s;
z-index: 1;
}

/* OVERLAY */

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:linear-gradient(
        to right,
        rgba(0,0,0,0.45) 0%,   /* vùng text bên trái */
        rgba(0,0,0,0.25) 30%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 100%     /* bên phải giữ nguyên ảnh */
    );
}


.hero-title{
  position: relative;
  font-size: 42px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 10px;

  height: 60px; /* fix mất chữ */

  background: linear-gradient(180deg,#ffffff 20%,#b8e6d5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


}

/* span overlay */
.hero-title span{
  position: absolute;
  left: 0;
  width: auto;
  text-align: left;

  background: linear-gradient(180deg,#ffffff 20%,#b8e6d5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* TOP */
.hero-title .top{
  clip-path: inset(0 0 48% 0);
  transform: translateY(-50px);
  opacity: 0;
  animation: splitTop 1.2s ease forwards;
}

/* BOTTOM */
.hero-title .bottom{
  clip-path: inset(52% 0 0 0);
  transform: translateY(50px);
  opacity: 0;
  animation: splitBottom 1.2s ease forwards;
  animation-delay: 0.2s;
}

/* KEYFRAMES */
@keyframes splitTop{
  to{
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes splitBottom{
  to{
    transform: translateY(0);
    opacity: 1;
  }
}




/* CLOUD */

.cloud{
position:absolute;
background:rgba(255,255,255,0.25);
border-radius:60px;
filter:blur(10px);
}

.cloud1{width:160px;height:50px;top:150px;left:-200px;animation:cloudmove 160s linear infinite;}
.cloud2{width:120px;height:40px;top:240px;left:-150px;animation:cloudmove 200s linear infinite;}
.cloud3{width:200px;height:60px;top:320px;left:-250px;animation:cloudmove 260s linear infinite;opacity:0.5;}
.cloud4{width:140px;height:45px;top:420px;left:-180px;animation:cloudmove 300s linear infinite;opacity:0.4;}

@keyframes cloudmove{
from{transform:translateX(-220px)}
to{transform:translateX(120vw)}
}

/* FOG */

.fog{
position:absolute;
bottom:0;
width:200%;
height:200px;
background:radial-gradient(circle,rgba(255,255,255,0.25),transparent 70%);
animation:fogmove 80s linear infinite;
}

@keyframes fogmove{
from{transform:translateX(0)}
to{transform:translateX(-800px)}
}

/* CONTENT */

.hero-content{position:relative;z-index:2;}
.hero h1{
  font-size:70px;
  font-weight:700;
  line-height:1.2;

  background:linear-gradient(180deg,#ffffff 20%,#b8e6d5 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 4px 30px rgba(0,0,0,0.5);
  margin-bottom:10px;
}


.hero-sub{
font-size:16px;
opacity:0.8;
color:#e6f5ef;
text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

.hero-btns{
  display:flex;
  align-items:center;
  margin-top:20px;
}

.hero-btns .btn{
  background:linear-gradient(135deg,#34d399,#059669);
  border:none;
  border-radius:14px;

  padding:14px 26px;
  font-size:15px;
  font-weight:500;

  box-shadow:0 10px 30px rgba(52,211,153,0.25);
  transition:0.3s;
}

.hero-btns .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 40px rgba(52,211,153,0.35);
}
/* STATS */

.stats{display:flex;gap:40px;margin-top:20px;}
.stat{font-size:18px;}

/* PREVIEW */

.preview{
position:absolute;
bottom:60px;
right:60px;
display:flex;
gap:20px;
}

.preview img{
width:160px;
height:100px;
object-fit:cover;
border-radius:12px;
transition:0.4s;
filter:brightness(0.85);
}

.preview img:hover{
transform:scale(1.12) translateY(-5px);
filter:brightness(1.1);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* SECTION */

.section{padding:20px 0;}

/* CARD */

.card{
background:#142b21;
border:none;
color:#dcefe7;
transition:0.4s;
}

.card img{height:200px;object-fit:cover;}
.card:hover{transform:translateY(-10px) scale(1.03);}

/* TREKS */

.treks{
background:url("/img/cloud/san-may-dinh-mau-son-04.jpg") center/cover;
position:relative;
}

.treks-overlay{
background:rgba(0,0,0,0.6);
position:absolute;
width:100%;
height:100%;
}

.treks-content{position:relative;z-index:2;}

/* SERVICE */

.service-box{
background:#142b21;
padding:30px;
border-radius:12px;
text-align:center;
transition:0.3s;
}
.service-box:hover{transform:translateY(-8px);}

/* NEWSLETTER */

.newsletter{
background:#1b3a2c;
padding:80px 0;
}

/* FOOTER */

footer{
background:#09140f;
padding:40px;
text-align:center;
}

/* REVEAL */

.reveal{
opacity:0;
transform:translateY(40px);
transition:1s;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}


/* ================= WATERFALL ================= */

.waterfall-section{
position:relative;
background:#08130f;
overflow:hidden;
}

.waterfall-bg{
position:absolute;
width:100%;
height:100%;
background:url("/img/waterfall/thac-nuoc-03.jpg") center/cover;
opacity:0.35;
}

.waterfall-overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(0,0,0,0.6), #08130f);
}

/* WATER STREAM */

/* ================= WATERFALL FULL WIDTH ================= */

.water-stream{
position:absolute;
top:-200px;
width:12px;
height:160%;

/* gradient mềm hơn */
background:linear-gradient(
to bottom,
rgba(255,255,255,0.45),
rgba(255,255,255,0.25),
rgba(255,255,255,0.08),
transparent
);

filter:blur(5px);
opacity:0.35;
border-radius:20px;

animation:waterfallFlow linear infinite;
}

/* animation chậm + mượt */
@keyframes waterfallFlow{
0%{transform:translateY(-200px);}
100%{transform:translateY(120%);}
}



.water-stream.soft{
opacity:0.2;
filter:blur(8px);
}

.water-mist{
position:absolute;
bottom:0;
width:100%;
height:120px;
background:radial-gradient(
ellipse at center,
rgba(255,255,255,0.25),
transparent 70%
);
filter:blur(10px);
animation:mistMove 6s ease-in-out infinite;
}

@keyframes mistMove{
0%,100%{opacity:0.4}
50%{opacity:0.7}
}

/* CONTENT */

.waterfall-content{
position:relative;
z-index:2;
text-align:center;
max-width:700px;
margin:auto;
}

.waterfall-title{
font-size:42px;
font-weight:700;
margin-bottom:20px;
}

.waterfall-text{
opacity:0.8;
line-height:1.6;
}

/* GALLERY */

.waterfall-gallery{
margin-top:60px;
}

.waterfall-gallery img{
width:100%;
height:460px;
object-fit:cover;
border-radius:12px;
transition:0.4s;
filter:brightness(0.85);
}

.waterfall-gallery img:hover{
transform:scale(1.05);
filter:brightness(1.1);
box-shadow:0 10px 30px rgba(0,0,0,0.6);
}



/* ================= SPRING ================= */

.spring-section{
position:relative;
background:linear-gradient(to bottom, #1a0f14, #0f1f18);
overflow:hidden;
}

/* BACKGROUND BLOSSOM */

.spring-bg{
position:absolute;
width:100%;
height:100%;
background:url("/img/peachflower/Hoa-dao-02.jpg") center/cover;
opacity:0.25;
}

/* OVERLAY PINK */

.spring-overlay{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at center, rgba(255,120,160,0.2), transparent 70%);
}

/* CONTENT */

.spring-content{
position:relative;
z-index:2;
text-align:center;
max-width:700px;
margin:auto;
}

.spring-title{
font-size:42px;
font-weight:700;
margin-bottom:20px;
color:#ffccd5;
}

.spring-text{
opacity:0.85;
line-height:1.6;
color:#f8d7da;
}

/* PETAL */

.petal{
position:absolute;
width:10px;
height:10px;
background:#ff9bb3;
border-radius:50%;
opacity:0.8;
animation:petalFall linear forwards;
}

@keyframes petalFall{
0%{
transform:translateY(-20px) translateX(0);
opacity:1;
}
100%{
transform:translateY(110vh) translateX(80px);
opacity:0;
}
}

/* GALLERY */

/* ================= SPRING ALBUM ================= */

.spring-gallery{
margin-top:60px;
overflow-x:auto;
padding-bottom:10px;
}

.spring-gallery::-webkit-scrollbar{
height:6px;
}

.spring-gallery::-webkit-scrollbar-thumb{
background:#ff8fab;
border-radius:10px;
}

/* ROW NGANG */

.spring-row{
display:flex;
gap:20px;
}

/* ITEM */

.spring-item{
flex:0 0 auto;
border-radius:14px;
overflow:hidden;
position:relative;
}

/* ẢNH FULL */

.spring-item img{
height:260px;
width:auto; /* quan trọng: giữ full ảnh */
border-radius:14px;
transition:0.5s ease;
}

/* HOVER ZOOM */

.spring-item:hover img{
transform:scale(1.08);
}

/* OVERLAY NHẸ */

.spring-item::after{
content:"";
position:absolute;
inset:0;
background:rgba(255,120,160,0.15);
opacity:0;
transition:0.4s;
}

.spring-item:hover::after{
opacity:1;
}




/* ================= WINTER ================= */

.winter-section{
position:relative;
background:linear-gradient(to bottom,#0b1220,#0f1f18);
overflow:hidden;
}

/* BACKGROUND */

.winter-bg{
position:absolute;
width:100%;
height:100%;
background:url("/img/winter/ban-tuyet-dinh-mau-son-03.jpg") center/cover;
opacity:0.25;
}

/* OVERLAY */

.winter-overlay{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at center, rgba(180,220,255,0.15), transparent 70%);
}

/* CONTENT */

.winter-content{
position:relative;
z-index:2;
text-align:center;
max-width:700px;
margin:auto;
}

.winter-title{
font-size:42px;
font-weight:700;
margin-bottom:20px;
color:#d6ecff;
}

.winter-text{
color:#cfe9ff;
opacity:0.85;
line-height:1.6;
}

/* SNOW */

.snowflake{
position:absolute;
width:6px;
height:6px;
background:white;
border-radius:50%;
opacity:0.8;
animation:snowFall linear forwards;
}

@keyframes snowFall{
0%{
transform:translateY(-20px) translateX(0);
opacity:1;
}
100%{
transform:translateY(110vh) translateX(40px);
opacity:0;
}
}

/* ================= WINTER COLLAGE ================= */

/* ================= WINTER HORIZONTAL ================= */

.winter-gallery{
margin-top:80px;
overflow:hidden;
}

/* ROW NGANG */

.winter-row{
display:flex;
flex-wrap:nowrap; /* 🔥 QUAN TRỌNG: không xuống dòng */
gap:20px;
align-items:center;

overflow-x:auto;
scrollbar-width:none;
padding:20px 0;
}

.winter-row::-webkit-scrollbar{
display:none;
}

/* ITEM */

.winter-item{
flex:0 0 auto; /* 🔥 giữ item nằm ngang */
border-radius:18px;
overflow:hidden;
position:relative;
cursor:pointer;

box-shadow:0 15px 40px rgba(0,0,0,0.5);

transition:0.4s ease;
}

/* ẢNH */

.winter-item img{
height:280px;
width:auto; /* 🔥 giữ full ảnh */
display:block;
border-radius:18px;

transition:0.5s;
}

/* HOVER */

.winter-item:hover{
transform:scale(1.08);
z-index:10;
}

.winter-item:hover img{
filter:brightness(1.1);
}

/* ACTIVE (ảnh focus to hơn) */

.winter-item.active img{
height:360px;
}

/* FADE OUT others */

.winter-row:hover .winter-item{
opacity:0.4;
}

.winter-item.active{
opacity:1 !important;
}



/* ================= SUMMER ================= */

.summer-section{
  position:relative;
  background:linear-gradient(to bottom,#0f1f18,#142b21);
  padding:100px 0 160px; 
  overflow:hidden;
}

/* BG LIGHT */

.summer-overlay{
position:absolute;
width:100%;
height:100%;
z-index:0;
background:radial-gradient(circle at top, rgba(255,200,100,0.15), transparent 70%);
}


/* CONTENT */

.summer-content{
position:relative;
z-index:2;
text-align:center;
max-width:700px;
margin:auto;
}

.summer-title{
font-size:42px;
font-weight:700;
color:#ffe8a3;
margin-bottom:20px;
}

.summer-text{
color:#e6f5d0;
opacity:0.85;
line-height:1.6;
}

.summer-section .container{
  position:relative;
  z-index:2;
}
/* PANORAMA ROW */

/* ================= SUMMER FIX ================= */

.summer-gallery{
margin-top:60px;
overflow-x:auto;
scrollbar-width:none;
position:relative;
z-index:2;
}

.summer-gallery::-webkit-scrollbar{
display:none;
}

/* ROW */

.summer-row{
display:flex;
flex-wrap:nowrap; 
gap:20px;
}

/* ITEM */

.summer-item{
flex:0 0 auto;
border-radius:16px;
overflow:hidden;
position:relative; 
}

/* ẢNH FULL KHÔNG BỊ CẮT */

.summer-item img{
height:300px;
width:auto; /* giữ full ảnh */
display:block;
border-radius:16px;
transition:0.5s;
}

/* HOVER */

.summer-item:hover img{
transform:scale(1.05);
filter:brightness(1.1);
}

/* LIGHT SUN */

.summer-item::after{
content:"";
position:absolute;
inset:0;
background:rgba(255,220,120,0.15);
opacity:0;
transition:0.4s;

}

.summer-item:hover::after{
opacity:1;
}



.preparation-section{
  padding:80px 20px;
  background:linear-gradient(180deg,#0f1f18,#0b1812);
}

.prep-title{
  text-align:center;
  margin-bottom:40px;
}

.prep-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.prep-card{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  padding:20px;
  border-radius:16px;
  transition:0.3s;
}

.prep-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.08);
}

.prep-card h4{
  margin-bottom:10px;
}

.prep-card ul{
  padding-left:18px;
  font-size:14px;
  opacity:0.85;
}

/* ================= JOURNEY ================= */

.journey-section{
background:#08130f;
padding:120px 0;
position:relative;
}

/* TITLE */

.journey-title{
text-align:center;
font-size:42px;
margin-bottom:80px;
}

/* LINE */

.journey-line{
position:absolute;
left:50%;
top:200px;
width:2px;
height:80%;
background:rgba(255,255,255,0.1);
transform:translateX(-50%);
}

/* ITEM */

.journey-item{
position:relative;
width:50%;
padding:20px 40px;
}

.journey-item.left{
left:0;
text-align:right;
}

.journey-item.right{
left:50%;
}

/* DOT */

.journey-item::before{
content:"";
position:absolute;
top:30px;
width:14px;
height:14px;
background:#2ecc71;
border-radius:50%;
z-index:2;
}

.journey-item.left::before{
right:-7px;
}

.journey-item.right::before{
left:-7px;
}

/* CONTENT */

.journey-content{
opacity:0.3;
transform:scale(0.95);
transition:0.4s;
}

.journey-item:hover .journey-content{
opacity:1;
transform:scale(1.05);
border-color:#5eead4;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.journey-content:hover{
transform:scale(1.05);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.journey-item:nth-child(3) .journey-content{
border-color:#5eead4; /* moment wow */
}


@media(max-width:768px){
  .journey-section{
    display:none;
  }
}




.route-box{
background:#142b21;
padding:30px;
border-radius:16px;
}

.route-line{
position:relative;
height:6px;
background:rgba(255,255,255,0.1);
border-radius:10px;
margin:50px 0;
overflow:visible; /* 👈 QUAN TRỌNG */
}




.route-progress{
position:absolute;
height:6px;
width:0%;
background:linear-gradient(90deg,#2ecc71,#5eead4);
border-radius:10px;
transition:2s ease;
box-shadow:0 0 15px rgba(46,204,113,0.6);
}

/* CAR MOVING */


.route-node{
position:absolute;
top:14px; /* 👈 xuống dưới thanh */
transform:translateX(-50%);
font-size:11px;
color:#cde6db;
text-align:center;
white-space:nowrap;
transition:0.4s;
opacity:0.4;
font-size:12px;
}

/* chấm sát thanh */
.route-dot{
width:6px;
height:6px;
background:#5eead4;
border-radius:50%;
margin:auto;
margin-bottom:6px;
}

.route-node div:nth-child(2){
margin-top:2px;
font-weight:500;
}

.route-km{
font-size:10px;
opacity:0.6;
}
.route-car{
position:absolute;
top:-18px;
left:0%;
font-size:18px;
transform:translateX(-50%);
transition:0.4s linear;
pointer-events:none;
}


.route-result-box{
background:rgba(20,43,33,0.7);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:20px;
backdrop-filter:blur(6px);
}

.route-title{
font-size:18px;
font-weight:600;
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}

.route-path{
font-size:14px;
opacity:0.85;
margin-bottom:15px;
}

.route-stats{
display:flex;
gap:30px;
flex-wrap:wrap;
margin-bottom:15px;
}

.route-stat{
font-size:13px;
opacity:0.85;
}

.route-stat b{
display:block;
font-size:16px;
color:#5eead4;
margin-top:2px;
}

.route-note{
font-size:13px;
padding:10px 12px;
border-radius:8px;
background:rgba(255,255,255,0.05);
margin-top:10px;
border-left:3px solid transparent;
}

.route-note.warning{
color:#ffd166;
border-left-color:#ffd166;
}

.route-note.info{
color:#5eead4;
border-left-color:#5eead4;
}



.route-car svg{
width:26px;
height:26px;
display:block;
filter:drop-shadow(0 0 6px rgba(94,234,212,0.6));
}

.icon-vehicle{
width:20px;
height:20px;
vertical-align:middle;
margin-right:6px;
}

.icon-vehicle{
width:18px;
height:18px;
margin-right:6px;
vertical-align:-3px;
opacity:0.9;
transition:0.2s;
}

.btn:hover .icon-vehicle{
transform:scale(1.1);
opacity:1;
}

.stats{
display:flex;
gap:16px;
margin-top:30px;
flex-wrap:wrap;
}

.stat-card{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
padding:14px 18px;
border-radius:12px;
min-width:110px;
}

.stat-card span{
font-size:12px;
opacity:0.6;
}

.stat-card strong{
display:block;
font-size:20px;
margin-top:4px;
color:#5eead4;
}


@media(max-width:768px){

.hero{
height:auto;
padding:120px 0 80px;
}

.hero h1{
font-size:34px;
color:#ffffff;
text-shadow:0 4px 20px rgba(0,0,0,0.9);
}

.preview{
display:none;
}

.stats{
justify-content:center;
}

}


.floating-route{
position:fixed;
bottom:20px;
right:20px;
background:#2ecc71;
color:#fff;
padding:12px 18px;
border-radius:30px;
font-size:14px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
z-index:999;
transition:0.3s;
}

.floating-route:hover{
transform:scale(1.05);
}


.nav-brand-wrap{
display:flex;
align-items:center;
gap:12px;
}

.nav-temp{
font-size:13px;
padding:4px 10px;
border-radius:20px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
color:#5eead4;
white-space:nowrap;
}



.btn-calc{
background:linear-gradient(135deg,#2ecc71,#27ae60);
border:none;
width:100%;
padding:14px;
font-size:15px;
font-weight:600;
letter-spacing:0.5px;

box-shadow:0 6px 20px rgba(46,204,113,0.35);
transition:0.3s ease;
}

.btn-calc:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(46,204,113,0.5);
}

.btn-calc:active{
transform:scale(0.98);
}

.legal-section{
padding:60px 0;
background:#08130f;
}

.legal-box{
background:rgba(20,43,33,0.6);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
padding:30px;
backdrop-filter:blur(6px);
max-width:900px;
margin:auto;
}

.legal-box h5{
margin-bottom:15px;
color:#5eead4;
}

.legal-box p{
font-size:14px;
opacity:0.85;
line-height:1.6;
}

.legal-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin:20px 0;
font-size:14px;
}

.legal-grid strong{
color:#cde6db;
}

.legal-note{
margin-top:10px;
color:#ffd166;
}

@media(max-width:768px){
.legal-grid{
grid-template-columns:1fr;
}
}

.ms-overview{
  padding:30px 20px;
  background:rgba(255,255,255,0.03);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:15px;
}

.ov-item{
  background:rgba(255,255,255,0.05);
  padding:15px;
  border-radius:12px;
  text-align:center;
  backdrop-filter:blur(6px);
  transition:0.3s;
}

.ov-item span{
  display:block;
  font-size:12px;
  opacity:0.6;
  margin-bottom:5px;
}

.ov-item strong{
  font-size:16px;
  color:#cde6db;
}

.ov-item:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.08);
}


.ms-history{
  padding:60px 20px;
}

.section-title{
  text-align:center;
  margin-bottom:30px;
  font-size:22px;
  color:#e8f5ef;
}

.history-scroll{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding-bottom:10px;
}

.history-card{
  min-width:260px;
  background:rgba(255,255,255,0.05);
  border-radius:14px;
  padding:20px;
  position:relative;
  backdrop-filter:blur(6px);
  transition:0.3s;
}

.history-card .year{
  font-size:12px;
  color:#4cd28a;
  margin-bottom:10px;
  font-weight:600;
}

.history-card h4{
  margin-bottom:10px;
  font-size:16px;
}

.history-card p{
  font-size:13px;
  opacity:0.7;
  line-height:1.5;
}

.history-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.08);
}

.history-scroll::before{
  content:'';
  position:absolute;
  height:2px;
  width:100%;
  background:rgba(255,255,255,0.1);
  top:50%;
}

.waterfall-info{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin-top:30px;
}

.wf-box{
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:14px;
  backdrop-filter:blur(6px);
  transition:0.3s;
}

.wf-box h4{
  margin-bottom:10px;
  color:#4cd28a;
  font-size:16px;
}

.wf-box ul{
  padding-left:18px;
  font-size:13px;
  opacity:0.8;
  line-height:1.6;
}

.wf-box:hover{
  background:rgba(255,255,255,0.08);
  transform:translateY(-4px);
}

.wf-highlight{
  text-align:center;
  margin-top:10px;
  font-size:13px;
  opacity:0.7;
}

.summer-quick{
  display:flex;
  justify-content:center;
  gap:25px;
  margin:20px 0 30px;
  flex-wrap:wrap;
}

.sq-item{
  text-align:center;
  font-size:13px;
  opacity:0.8;
}

.sq-item strong{
  display:block;
  font-size:15px;
  color:#cde6db;
}

.summer-experience{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
  position:relative;
  z-index:2;
}


.exp-card{
  background:rgba(255,255,255,0.05);
  padding:18px;
  border-radius:12px;
  backdrop-filter:blur(6px);
  transition:0.3s;
}

.exp-card h4{
  margin-bottom:8px;
  font-size:15px;
  color:#4cd28a;
}

.exp-card p{
  font-size:13px;
  opacity:0.7;
}

.exp-card:hover{
  transform:translateY(-4px);
}

.summer-quick{
  display:flex;
  justify-content:center;
  gap:25px;
  margin:20px 0 30px;
  flex-wrap:wrap;
}

.sq-item{
  text-align:center;
  font-size:13px;
  opacity:0.8;
}

.sq-item strong{
  display:block;
  font-size:15px;
  color:#cde6db;
}

.summer-experience{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
}

.exp-card{
  background:rgba(255,255,255,0.05);
  padding:18px;
  border-radius:12px;
  backdrop-filter:blur(6px);
  transition:0.3s;
}

.exp-card h4{
  margin-bottom:8px;
  font-size:15px;
  color:#4cd28a;
}

.exp-card p{
  font-size:13px;
  opacity:0.7;
}

.exp-card:hover{
  transform:translateY(-4px);
}

.sunrise{
  position:absolute;
  bottom:500px; 
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}

/* SUN MỀM HƠN */
.sun{
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    #ffd76a 0%,
    #ffb347 40%,
    rgba(255,180,80,0.4) 65%,
    rgba(255,180,80,0) 80%
  );
  opacity:0;
  transform:translateY(80px);
  filter:blur(1px);
  transition:all 1.8s ease;
}

/* GLOW */
.sun-glow{
  position:absolute;
  top:-80px;
  left:50%;
  transform:translateX(-50%);
  width:500px;
  height:300px;
  background:radial-gradient(circle,
    rgba(255,200,120,0.25),
    rgba(255,200,120,0.1),
    transparent 70%
  );
  filter:blur(40px);
  opacity:0;
}
/* ACTIVE */
.sunrise.active .sun{
  opacity:1;
  transform:translateY(0);
}

.sunrise.active .sun-glow{
  opacity:1;
}


.winter-info{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:24px;
  margin-top:40px;
  align-items:stretch; 
}

/* LEFT */
.winter-stats{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.ws-item{
  background:rgba(255,255,255,0.05);
  padding:18px;
  border-radius:12px;
  backdrop-filter:blur(6px);
}

.ws-item strong{
  display:block;
  font-size:18px;
  color:#bde0fe;
  margin-top:5px;
}

/* RIGHT */
.winter-experience{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.we-box{
  background:rgba(255,255,255,0.05);
  padding:18px;
  border-radius:12px;
}

.we-box.warning{
  border-left:3px solid #ffd166;
}


/* ========================================= */
/* FINAL MOBILE FIX */
/* NOT BROKE LAYOUT DESKTOP */
/* ========================================= */

html,
body{
  overflow-x:hidden;
}

/* fix history overflow */
.history-scroll{
  position:relative;
}

/* MOBILE ONLY */
@media(max-width:768px){

  body{
    overflow-x:hidden;
  }

  /* NAVBAR */
  .navbar{
    overflow:hidden;
  }

  .navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-left:16px;
    padding-right:16px;
  }

  .nav-brand-wrap{
    flex:1;
    min-width:0;
    overflow:hidden;
  }

  .navbar-brand{
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .nav-temp{
    flex-shrink:0;
  }

  /* TOGGLE FIX */
  .nav-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    font-size:32px;
    position:relative;
    z-index:99999;
  }

  /* CHẶN TRÀN NGANG */
  .hero,
  .hero-content,
  .stats,
  .preview,
  .route-box,
  .journey-section,
  .waterfall-section,
  .spring-section,
  .winter-section,
  .summer-section{
    max-width:100%;
    overflow-x:hidden;
  }

  /* tránh image/card kéo layout */
  img{
    max-width:100%;
  }

  /* horizontal gallery */
  .spring-gallery,
  .winter-row,
  .summer-gallery,
  .history-scroll{
    overflow-x:auto;
    overflow-y:hidden;
  }

}


@media(max-width:768px){

/* 🔥 CENTER HERO CONTENT */
.hero{
    display:flex;
    justify-content:center;
    text-align:center;
}

/* CONTENT */
.hero-content{
    margin:auto;
    text-align:center;
    max-width:500px;
    padding:0 20px;
}

/* TITLE */
.hero h1{
    text-align:center;
}

/* SUB TEXT */
.hero-sub{
    text-align:center;
}

/* BUTTON */
.hero-btns{
    justify-content:center;
}

}


@media(max-width:768px){

.hero{
    flex-direction: column; /* 🔥 thêm dòng này */
    justify-content: center;
    align-items: center;
}

}

@media(max-width:768px){

.hero .container{
    padding-left:0 !important;
    padding-right:0 !important;
}

}




@media(max-width:768px){

.hero-title{
    position:relative;
    text-align:center;
}

/* GIỮ absolute nhưng center đúng */
.hero-title span{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    text-align:center;
}

/* 🔥 CHẬP 2 layer lại */
.hero-title .top,
.hero-title .bottom{
    transform:translateX(-50%) translateY(0) !important;
}

}