*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0E2318;color:#F5EFE0;font-family:'Be Vietnam Pro',sans-serif;overflow-x:hidden}

/* ── SCROLL REVEAL ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.visible{animation:fadeUp .72s cubic-bezier(.22,.68,0,1.18) forwards}

/* ── LEAF FALL ── */
@keyframes leafFall{
  0%  {transform:translateY(-12px) rotate(0deg);opacity:0}
  8%  {opacity:.7}
  90% {opacity:.28}
  100%{transform:translateY(110vh) rotate(400deg) translateX(38px);opacity:0}
}
.leaf{
  position:absolute;border-radius:50% 0 50% 0;opacity:0;pointer-events:none;
  animation:leafFall linear infinite;
  background:radial-gradient(ellipse at 30% 50%,#72d47c,#2a6a49);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.2));
}
.leaf:nth-child(1){left:5%;  width:11px;height:18px;animation-duration:10s;animation-delay:0s}
.leaf:nth-child(2){left:20%; width:14px;height:22px;animation-duration:13s;animation-delay:2.5s}
.leaf:nth-child(3){left:48%; width:8px; height:13px;animation-duration:11s;animation-delay:5s}
.leaf:nth-child(4){left:71%; width:13px;height:20px;animation-duration:14s;animation-delay:1.2s}
.leaf:nth-child(5){left:88%; width:9px; height:15px;animation-duration:9s; animation-delay:6.5s}
.leaf:nth-child(6){left:37%; width:11px;height:17px;animation-duration:12s;animation-delay:3.5s}

/* ── STEAM ── */
@keyframes steamRise{
  0%  {transform:translateY(0) scaleX(1);opacity:0}
  12% {opacity:.5}
  88% {opacity:.14}
  100%{transform:translateY(-78px) scaleX(2.1) rotate(6deg);opacity:0}
}
.steam{animation:steamRise 3.4s ease-in-out infinite;transform-origin:bottom center}
.steam:nth-child(2){animation-delay:1.1s}
.steam:nth-child(3){animation-delay:2.25s}

/* ── GOLD GRADIENT TEXT ── */
.gold-text{
  background:linear-gradient(138deg,#f5e080 0%,#C8A96E 38%,#edcc6c 68%,#ae8426 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(200,169,110,.38));
}

/* ── HERO ENTRY ── */
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.h1{animation:heroIn .88s ease .06s both}
.h2{animation:heroIn .88s ease .24s both}
.h3{animation:heroIn .88s ease .44s both}
.h4{animation:heroIn .88s ease .62s both}
.h5{animation:heroIn .88s ease .80s both}
.h6{animation:heroIn .88s ease .98s both}
.h7{animation:heroIn .92s ease 1.16s both}

/* ── HERO BG ── */
.hero-bg{
  background:
    radial-gradient(ellipse 80% 58% at 50% 112%,#060f09 0%,transparent 64%),
    radial-gradient(ellipse 52% 40% at 10% 66%,#0a1e12 0%,transparent 56%),
    radial-gradient(ellipse 52% 40% at 90% 66%,#0a1e12 0%,transparent 56%),
    linear-gradient(162deg,#07160b 0%,#152f1e 28%,#245c36 52%,#152f1e 75%,#07160b 100%);
}

/* ── SPARKLE ── */
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}
.sparkle{position:absolute;border-radius:50%;background:#C8A96E;pointer-events:none;animation:sparkle 2.3s ease-in-out infinite}

/* ── POSTER FRAME ── */
.poster-frame{
  position:relative;border-radius:1.25rem;overflow:hidden;
  box-shadow:0 0 0 1px rgba(200,169,110,.3),0 28px 72px rgba(5,14,8,.78),0 8px 22px rgba(200,169,110,.14);
}
.poster-frame::after{
  content:'';position:absolute;inset:0;border-radius:1.25rem;
  border:1.5px solid rgba(200,169,110,.4);pointer-events:none;z-index:2;
}
.poster-frame::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,transparent 55%,rgba(5,14,8,.42) 100%);pointer-events:none;
}

/* ── NAV ── */
.nav-glass{
  background:rgba(14,35,24,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(200,169,110,.18);
}

/* ── INFO BAR ── */
.info-glass{
  background:rgba(5,14,8,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(200,169,110,.18);
}

/* ── SECTION TEXTURES ── */
.sec-dark { background:#0E2318; }
.sec-mid  { background:#122a1c; }
.sec-light{ background:#162e20; }
.tex{
  background-image:url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C8A96E' fill-opacity='0.028'%3E%3Cpath d='M10 10h4v4h-4zm14 0h4v4h-4zm14 0h4v4h-4zM3 17h4v4H3zm14 0h4v4h-4zm14 0h4v4h-4zm14 0h4v4h-4zM10 24h4v4h-4zm14 0h4v4h-4zm14 0h4v4h-4zM3 31h4v4H3zm14 0h4v4h-4zm14 0h4v4h-4zm14 0h4v4h-4zM10 38h4v4h-4zm14 0h4v4h-4zm14 0h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── DIVIDERS ── */
.div-gold{width:72px;height:3px;background:linear-gradient(90deg,transparent,#C8A96E,transparent);margin:0 auto;border-radius:2px}
.div-red {background:linear-gradient(90deg,transparent,#B52B27,transparent)}
.div-left{margin:0}

/* ── HILLS SVG ── */
.hills{position:absolute;bottom:0;left:0;right:0;pointer-events:none}

/* ── EXP IMAGE ── */
.exp-frame{
  border-radius:1rem;overflow:hidden;
  box-shadow:0 12px 40px rgba(5,14,8,.45),0 2px 8px rgba(200,169,110,.1);
  border:1px solid rgba(200,169,110,.2);
}

/* ── VALUE CARD ── */
.vcard{
  background:rgba(22,46,32,.75);
  border:1px solid rgba(200,169,110,.18);
  border-radius:1rem;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.vcard:hover{transform:translateY(-4px);border-color:rgba(200,169,110,.38);box-shadow:0 14px 36px rgba(5,14,8,.5)}

/* ── SEAT IMAGE ── */
.seat-frame{
  border-radius:1rem;overflow:hidden;
  box-shadow:0 10px 36px rgba(5,14,8,.5),0 2px 8px rgba(200,169,110,.1);
  border:1px solid rgba(200,169,110,.22);
}

/* ── PRICING CARD ── */
.pcard{
  border-radius:1.25rem;
  transition:transform .22s ease,box-shadow .22s ease;
}
.pcard:hover{transform:translateY(-6px)}
.pcard-dark{background:#0e2318;border:1.5px solid rgba(200,169,110,.22);box-shadow:0 8px 30px rgba(5,14,8,.4)}
.pcard-dark:hover{box-shadow:0 20px 50px rgba(5,14,8,.6);border-color:rgba(200,169,110,.42)}
.pcard-gold{background:linear-gradient(145deg,#d4b46e,#C8A96E);border:2px solid #E3CA82;box-shadow:0 12px 40px rgba(200,169,110,.32)}
.pcard-gold:hover{box-shadow:0 22px 56px rgba(200,169,110,.45)}

/* ── TIMELINE ── */
.tl{position:relative;border-left:1.5px solid rgba(200,169,110,.28);padding-left:1.75rem;margin-left:1.25rem}
.tl-dot{
  position:absolute;left:-8.5px;top:4px;
  width:16px;height:16px;border-radius:50%;
  background:#C8A96E;border:3px solid #0E2318;
  box-shadow:0 0 0 3px rgba(200,169,110,.25);
}

/* ── FAQ ── */
.faq-panel{max-height:0;overflow:hidden;transition:max-height .36s ease}
.faq-panel.open{max-height:340px}
.faq-arr{transition:transform .28s ease}
.faq-arr.rot{transform:rotate(180deg)}

/* ── CTA PULSE ── */
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(181,43,39,.45)}50%{box-shadow:0 0 0 12px rgba(181,43,39,0)}}
.pulse-red{animation:pulseRed 2.5s ease infinite}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(200,169,110,.4)}50%{box-shadow:0 0 0 11px rgba(200,169,110,0)}}
.pulse-gold{animation:pulseGold 2.5s ease infinite}

/* ── FORM ── */
input,select{-webkit-appearance:none;appearance:none}
.field{
  width:100%;
  background:rgba(5,14,8,.6);
  border:1.5px solid rgba(200,169,110,.25);
  border-radius:.75rem;
  padding:.78rem 1rem;
  color:#F5EFE0;
  font-family:'Be Vietnam Pro',sans-serif;font-size:.875rem;
  transition:border-color .2s;
}
.field::placeholder{color:rgba(200,169,110,.3)}
.field:focus{outline:none;border-color:#C8A96E}

/* ── POPUP ── */
.popup-wrap{
  position:fixed;inset:0;background:rgba(5,14,8,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:1rem;
  opacity:0;pointer-events:none;transition:opacity .32s ease;
}
.popup-wrap.open{opacity:1;pointer-events:all}
.popup-box{
  background:#122a1c;
  border:1.5px solid rgba(200,169,110,.32);
  border-top:4px solid #B52B27;
  border-radius:1.25rem;padding:2.25rem 1.75rem;
  max-width:400px;width:100%;text-align:center;
  transform:scale(.84) translateY(16px);
  transition:transform .32s cubic-bezier(.22,.68,0,1.2);
}
.popup-wrap.open .popup-box{transform:scale(1) translateY(0)}

/* ── FLOATING CTA ── */
#fcta{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:50;
      opacity:0;pointer-events:none;transition:opacity .28s ease;white-space:nowrap}
#fcta.show{opacity:1;pointer-events:all}

/* Đảm bảo canvas vòng quay hiển thị đúng kích thước và không bị bóp méo */
/* ── LUCKY WHEEL STYLES ── */
.wheel-container-popup {
  position: relative;
  width: 260px;
  height: 260px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wheel {
  max-width: none !important;
  display: block;
}