/* =========================================================
   Nam Thắng Magic Ticket Landing Page
   Rewritten styles.css
   - Fix header corner bug
   - Cleaner responsive layout
   - Keeps existing class names used by index.php
   ========================================================= */

:root{
  --brand:#8BC34A;
  --brand-dark:#17851f;
  --brand-soft:#eef9df;
  --accent:#ed111b;
  --accent-dark:#c90f17;
  --text:#26391a;
  --muted:#607059;
  --bg:#f1fff0;
  --card:#ffffff;
  --line:rgba(104,159,56,.24);
  --shadow:0 18px 42px rgba(31,45,26,.12);
  --shadow-soft:0 10px 28px rgba(31,45,26,.08);
  --radius:26px;
  --container:1120px;
  --font:'Myriad Pro','Myriad Set Pro',Arial,sans-serif;
  --display:'Myriad Pro','Myriad Set Pro',Arial,sans-serif;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:600;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(100% - 32px,var(--container));
  margin:0 auto;
}

.section{
  padding:58px 0;
}

.section-title{
  margin:0 0 12px;
  text-align:center;
  font-family:var(--display);
  font-size:40px;
  line-height:1.12;
  color:#0f8a32;
  font-weight:900;
  text-shadow:0 2px 0 rgba(255,255,255,.9),0 10px 22px rgba(139,195,74,.22);
}

.section-desc{
  max-width:820px;
  margin:0 auto 32px;
  text-align:center;
  color:#506a48;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  text-shadow:0 1px 0 rgba(255,255,255,.88);
}

/* =========================
   Header
   ========================= */

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-soft);
  border-radius:0; /* Fix: không bo góc full-width để tránh hở 2 góc dưới */
  backdrop-filter:saturate(140%) blur(8px);
}

.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:9px 0;
}

.brand-logo-only{
  flex:0 0 auto;
}

.brand-logo{
  width:150px;
  height:58px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(31,45,26,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  color:#1f321b;
  font-weight:900;
  flex-shrink:0;
  overflow:hidden;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.header-actions{
  margin-left:auto;
  width:min(720px,64vw);
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:12px;
  align-items:center;
}

.btn{
  min-height:48px;
  border:0;
  border-radius:999px;
  padding:12px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  font-family:var(--font);
  font-size:14px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:scale(.98);
}

.btn-secondary{
  background:var(--brand-soft);
  color:#315516;
  border:1px solid rgba(139,195,74,.52);
  box-shadow:0 8px 18px rgba(139,195,74,.12);
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 26px rgba(237,17,27,.22);
}

.btn-primary:hover{
  filter:brightness(.96);
}

.header-actions .btn-line{
  position:relative;
  z-index:1;
}

.header-actions .btn-line + .btn-line::before{
  content:none;
}

.header-actions .btn{
  gap:5px;
}

/* =========================
   Hero
   ========================= */

.hero{
  padding:34px 0 20px;
}

.hero-banner{
  min-height:220px;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-banner img{
  width:100%;
  height:auto;
}

.image-empty{
  padding:70px 20px;
  text-align:center;
  color:#315516;
  font-weight:900;
}

/* =========================
   Vehicles
   ========================= */

.vehicle-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.vehicle-card{
  background:rgba(255,255,255,.92);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.vehicle-visual{
  aspect-ratio:16/9;
  width:100%;
  border-radius:20px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#d8f2bd,#71bd35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.vehicle-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.vehicle-visual iframe,
.vehicle-visual video{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}

.vehicle-visual video{
  object-fit:cover;
}

.vehicle-video-btn{
  position:relative;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  display:block;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}

.vehicle-video-btn img{
  transition:transform .22s ease,filter .22s ease;
}

.vehicle-video-btn:hover img{
  transform:scale(1.035);
  filter:brightness(.92);
}

.vehicle-play{
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  transform:translate(-50%,-50%);
}

.vehicle-play:before{
  content:'';
  position:absolute;
  left:21px;
  top:15px;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:16px solid #fff;
}

.vehicle-icon{
  font-size:40px;
}

.vehicle-card h3{
  margin:0 0 12px;
  font-family:var(--display);
  color:#16781d;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
}

.vehicle-card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.vehicle-card li{
  position:relative;
  padding-left:25px;
  color:#53634c;
  font-size:15px;
  line-height:1.62;
  font-weight:400;
}

.vehicle-card li:before{
  content:'✓';
  position:absolute;
  left:0;
  top:2px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#70be3a;
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

#tai-sao-chon{
  background:var(--bg);
}

.why-custom-card{
  width:100%;
  max-width:650px;
  margin:0 auto;
  padding:28px 42px 30px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(139,195,74,.22);
  border-radius:24px;
  box-shadow:var(--shadow);
  color:#8bc63f;
}

.why-custom-card h2{
  margin:0 auto 20px;
  max-width:520px;
  padding:7px 15px 6px;
  border-radius:8px;
  background:#8bc63f;
  color:#fff;
  font-family:var(--display);
  font-size:21px;
  line-height:1.15;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  -webkit-text-stroke:1.6px #087a39;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #087a39;
}

.why-custom-card h2 span{
  color:#ffe83a;
  -webkit-text-stroke:1.6px #087a39;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #087a39;
}

.why-feature-list{
  display:flex;
  flex-direction:column;
  max-width:560px;
  margin:0 auto;
}

.why-feature{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
  align-items:center;
  width:86%;
  padding:14px 14px 13px 0;
  border-bottom:2px solid #68b842;
}

.why-feature:last-child{
  border-bottom:0;
}

.why-feature-reverse{
  grid-template-columns:1fr 64px;
  align-self:flex-end;
  padding:14px 0 13px 14px;
  text-align:right;
}

.why-feature-reverse .why-feature-icon{
  order:2;
}

.why-feature-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#8bc63f;
  display:flex;
  align-items:center;
  justify-content:center;
}

.why-feature-icon svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:#0f7f41;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.why-feature-icon .why-logo-icon{
  width:46px;
  height:46px;
  fill:initial;
  stroke:initial;
}

.why-feature-icon .why-logo-icon *{
  vector-effect:non-scaling-stroke;
}

.why-feature-copy h3{
  margin:0 0 5px;
  color:#13823a;
  font-family:var(--display);
  font-size:18px;
  line-height:1.1;
  font-weight:700;
  text-transform:uppercase;
}

.why-feature-copy p{
  margin:0;
  color:#687762;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
}

/* =========================
   Checkin / Form
   ========================= */

.checkin-wrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:24px;
  align-items:start;
}

.howto-card,
.form-card,
.review-card,
.faq-list details{
  background:rgba(255,255,255,.93);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.howto-card,
.form-card{
  padding:24px;
}

.howto-card h2,
.form-card h2{
  margin:0 0 14px;
  font-family:var(--display);
  color:#087a18;
  font-size:28px;
  line-height:1.12;
  font-weight:900;
}

.howto-card .checkin-title{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#00a651;
  -webkit-text-stroke:1.25px #006f37;
  paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,91,42,.34),0 0 10px rgba(0,166,81,.2);
  transform-origin:center;
  will-change:transform;
  animation:checkinTitleShake 2.2s ease-in-out infinite;
}

.howto-card .checkin-title span{
  display:block;
}

.howto-card .checkin-title-accent{
  color:#f4df24;
  -webkit-text-stroke:1.45px #006f37;
  text-shadow:0 2px 0 rgba(0,91,42,.42),0 0 10px rgba(244,223,36,.18);
}

@keyframes checkinTitleShake{
  0%,100%{transform:translateX(0) rotate(0deg);}
  20%{transform:translateX(-2px) rotate(-.8deg);}
  40%{transform:translateX(2px) rotate(.8deg);}
  60%{transform:translateX(-1px) rotate(-.45deg);}
  80%{transform:translateX(1px) rotate(.45deg);}
}

.form-card p{
  margin:0 0 16px;
  color:#64715f;
  line-height:1.7;
  font-weight:400;
}

.guide-img{
  width:100%;
  border-radius:18px;
  margin:10px 0 18px;
}

.step{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px dashed var(--line);
  line-height:1.65;
  color:#34452f;
}

.step:last-of-type{
  border-bottom:0;
}

.step b{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--brand);
  color:#1f3210;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.note-box{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
  background:#fff8ef;
  border:1px solid #f4dfc6;
  color:#7a4b22;
  line-height:1.55;
}

.note-box ul{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.note-box li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  align-items:start;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.62);
}

.note-box li span{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#8bc34a;
  color:#1f3210;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.note-box li.note-bullet span{
  width:24px;
  height:24px;
  margin:0;
  border-radius:0;
  background:transparent;
  color:#7a4b22;
  font-size:18px;
  line-height:1;
}

.note-box li p{
  margin:0;
  font-weight:800;
}

.note-box a{
  color:#087a39;
  font-weight:900;
  text-decoration:underline;
}

.form-card form{
  display:grid;
  gap:14px;
}

.form-card label{
  display:grid;
  gap:7px;
  color:#273f1e;
  font-size:14px;
  font-weight:900;
}

.form-card label span{
  color:#d93025;
}

.form-card input,
.form-card textarea{
  width:100%;
  border:1.5px solid #d6e3cc;
  border-radius:16px;
  background:#fbfdf8;
  padding:13px 15px;
  font-family:var(--font);
  font-size:15px;
  font-weight:650;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.form-card textarea{
  min-height:104px;
  resize:vertical;
}

.form-card input:focus,
.form-card textarea:focus{
  border-color:#689f38;
  box-shadow:0 0 0 4px rgba(139,195,74,.15);
  background:#fff;
}

.upload-box{
  border:2px dashed #cfe0c3;
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg,#fbfff8,#f2f8ed);
  display:grid;
  gap:10px;
}

.upload-box small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  line-height:1.5;
}

.pick-btn{
  border:0;
  border-radius:14px;
  background:var(--brand);
  color:#21360f;
  font-weight:900;
  padding:12px 15px;
  cursor:pointer;
  transition:filter .16s ease,transform .16s ease;
}

.pick-btn:hover{
  filter:brightness(.97);
}

.pick-btn:active{
  transform:scale(.98);
}

.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.preview-item{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:#eef5e8;
}

.preview-item img,
.preview-item video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.video-badge{
  position:absolute;
  left:7px;
  bottom:7px;
  border-radius:999px;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  padding:5px 8px;
}

.remove-btn{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.66);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.submit-btn{
  width:100%;
  min-height:52px;
  background:#ff9900!important;
  box-shadow:0 12px 26px rgba(255,153,0,.26);
}

.privacy-note{
  margin:0!important;
  color:var(--muted)!important;
  font-size:13px!important;
}

/* =========================
   Reviews
   ========================= */

.reviews-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}

.review-card{
  flex:0 0 260px;
  padding:16px;
  scroll-snap-align:start;
}

.review-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:14px;
}

.review-card h3{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:20px;
  color:#16781d;
}

.review-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

/* =========================
   FAQ
   ========================= */

.faq-list{
  display:grid;
  gap:14px;
}

.faq-list details{
  padding:18px 20px;
}

.faq-list summary{
  cursor:pointer;
  font-weight:800;
  font-size:17px;
  line-height:1.32;
}

.faq-list p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.72;
  font-weight:700;
}

.faq-list ul{
  margin:10px 0 0;
  padding-left:22px;
  color:var(--muted);
  line-height:1.72;
  font-weight:700;
}

.faq-list li{
  margin:4px 0;
}

/* =========================
   Footer
   ========================= */

.footer{
  padding:42px 0 46px;
  background:linear-gradient(180deg,#9bd64b 0%,#7fbe3c 100%);
  color:#fff;
  text-align:left;
}

.footer-inner{
  display:grid;
  grid-template-columns:1.15fr 1.55fr .95fr .95fr;
  align-items:start;
  gap:34px;
  max-width:1120px;
}

.footer-main,
.footer-company,
.footer-contact,
.footer-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}

.footer-brand-name{
  margin:12px 0 0;
  font-family:var(--display);
  font-size:24px;
  line-height:1.2;
  font-weight:900;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0;
  text-shadow:0 1px 1px rgba(74,122,26,.28);
}

.footer-tagline{
  margin:0;
  color:#fff;
  font-size:17px;
  font-weight:900;
  font-style:italic;
  line-height:1.2;
  text-shadow:0 1px 1px rgba(74,122,26,.24);
}

.footer-logo-wrap{
  width:86px;
  height:54px;
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 5px;
  box-shadow:0 2px 5px rgba(38,103,12,.1);
  overflow:hidden;
}

.footer-logo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.footer-logo-wrap span{
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.footer-company h4,
.footer-contact h4,
.footer-social h4{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:19px;
  line-height:1.2;
  font-weight:900;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 1px rgba(74,122,26,.24);
}

.footer-company p,
.footer-contact p{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:1.45;
  font-weight:900;
  text-shadow:0 1px 1px rgba(74,122,26,.24);
}

.footer-company p{
  max-width:460px;
}

.footer-social-list{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.footer-social-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  transition:transform .18s ease,opacity .18s ease;
}

.footer-social-item:hover{
  transform:translateY(-2px);
  opacity:.9;
}

.footer-social-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.footer-social-icon svg{
  width:42px;
  height:42px;
  display:block;
  fill:#fff;
}

.facebook-icon,
.tiktok-icon,
.website-icon{
  background:transparent;
}

/* =========================
   Floating contact
   ========================= */

.floating-contact{
  position:fixed;
  right:16px;
  bottom:78px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  pointer-events:none;
}

.float-btn{
  position:relative;
  pointer-events:auto;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  animation:floatHeartbeat 2.4s ease-in-out infinite;
  transform-origin:center;
  transition:transform .18s ease,box-shadow .18s ease;
}

.float-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  animation-play-state:paused;
}

.float-btn:active{
  transform:scale(.96);
}

.float-icon{
  width:100%;
  height:100%;
  display:block;
}

.float-btn.zalo,
.float-btn.messenger,
.float-btn.hotline{
  background:#fff!important;
}

.float-icon-img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.float-phone-icon{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  transform:rotate(-12deg);
}

@keyframes floatHeartbeat{
  0%,
  100%{
    transform:scale(1);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
  }

  16%{
    transform:scale(1.07);
    box-shadow:0 12px 28px rgba(0,0,0,.22);
  }

  30%{
    transform:scale(.99);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
  }

  44%{
    transform:scale(1.04);
    box-shadow:0 11px 26px rgba(0,0,0,.21);
  }

  62%{
    transform:scale(1);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
  }
}

/* =========================
   Toast
   ========================= */

.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(18px);
  width:calc(100% - 28px);
  max-width:420px;
  background:#203015;
  color:#fff;
  padding:14px 16px;
  border-radius:16px;
  box-shadow:0 14px 36px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:30000;
  font-size:14px;
  line-height:1.5;
  font-weight:800;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast.error{
  background:#b3261e;
}

/* =========================
   Modals
   ========================= */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.48);
}

.modal-overlay.show{
  display:flex!important;
}

.modal{
  background:#fff;
  border-radius:26px;
  box-shadow:0 28px 70px rgba(0,0,0,.32);
  overflow:hidden;
}

.promo-modal{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:92vh;
  overflow:auto;
  background:#fff!important;
  border-radius:12px;
  box-shadow:0 22px 54px rgba(0,0,0,.22);
}

.promo-close-btn{
  position:absolute;
  top:10px;
  right:12px;
  z-index:5;
  width:35px;
  height:35px;
  border:0;
  border-radius:50%;
  background:#8f877f;
  color:#17120f;
  font-family:var(--font);
  font-size:15px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.12);
}

.promo-head{
  padding:16px 58px 11px;
  color:#02a84f;
  background:#fff;
  text-align:center;
}

.promo-overlay .promo-head{
  background:#fff!important;
  background-image:none!important;
  color:#02a84f!important;
}

.promo-title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  font-family:var(--display);
  font-size:31px;
  line-height:.98;
  font-weight:800;
  color:#00a651;
  text-transform:uppercase;
  letter-spacing:0;
  -webkit-text-stroke:0;
  paint-order:stroke fill;
  text-shadow:none;
  transform:translateZ(0);
}

.promo-overlay .promo-title{
  font-family:var(--display)!important;
  font-weight:800!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}

.promo-title span{
  display:block;
  position:relative;
  color:#00a651;
  -webkit-text-stroke:1.35px #006f37;
  paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,91,42,.34);
}

.promo-title span::before{
  content:none;
}

.promo-title span:first-child{
  color:#00a651;
  -webkit-text-stroke-color:#006f37;
}

.promo-title span:last-child{
  display:inline-block;
  align-self:center;
  color:#f4df24;
  -webkit-text-stroke:1.45px #006f37;
  text-shadow:0 2px 0 rgba(0,91,42,.42);
  transform-origin:center;
  will-change:transform,text-shadow,filter;
  animation:promoTitleWiggle 1.75s ease-in-out infinite!important;
}

.modal-body{
  padding:16px;
}

.promo-overlay .modal-body{
  padding:0 16px 14px;
  background:#fff;
}

.promo-voucher-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:16px 0 12px;
}

.promo-box{
  text-align:center;
  border-radius:8px;
  min-height:108px;
  padding:12px 8px 10px;
  background:#fffdfa;
  border:2px solid #fff0dc;
  box-shadow:none;
}

.voucher-label{
  display:block;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#e91b45;
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  margin-bottom:4px;
  text-transform:uppercase;
}

.promo-box strong{
  display:block;
  color:#e91b45;
  font-family:var(--display);
  font-size:39px;
  line-height:1.05;
  font-weight:900;
}

.promo-box span{
  display:block;
  max-width:180px;
  margin:8px auto 0;
  color:#59695a;
  font-weight:400;
  font-size:12px;
  line-height:1.35;
}

.promo-box b{
  color:#177f49;
  font-weight:600;
}

.promo-image-wrap{
  width:100%;
  aspect-ratio:3/1;
  overflow:hidden;
  border-radius:0;
  background:#d9ef9e;
  margin:0 auto;
}

.promo-image,
.promo-image-placeholder{
  width:100%;
  height:100%;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#315516;
  font-weight:900;
}

.promo-footer-note{
  width:100%;
  margin:0 auto;
  padding-left:32px;
  color:#5d5850;
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  font-weight:900;
}

.promo-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.promo-overlay .promo-actions{
  gap:8px;
  width:100%;
  margin:8px auto 0;
}

.promo-overlay .promo-actions .btn{
  min-height:39px;
  border-radius:8px;
  font-size:16px;
  font-family:var(--font);
  font-weight:900;
}

.promo-join-btn,
.magic-ticket-btn{
  position:relative;
  overflow:hidden;
  background:#ff9900!important;
  color:#fff;
  box-shadow:0 0 0 0 rgba(255,153,0,.36);
  transform-origin:center;
  will-change:transform,box-shadow,filter;
  animation:promoButtonWiggle 1.85s ease-in-out infinite!important;
}

.promo-join-btn::before,
.magic-ticket-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.38) 45%,transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
  animation:promoButtonShine 2.4s ease-in-out infinite;
}

.promo-join-btn{
  border-radius:8px;
}

.promo-rules-btn{
  background:#edffec!important;
  color:#007a3c!important;
  border:2px solid #13895a!important;
  box-shadow:none;
}

@keyframes promoTitleGlow{
  0%,100%{
    text-shadow:0 2px 0 rgba(0,91,42,.42),0 0 0 rgba(244,223,36,0);
    filter:brightness(1);
  }
  50%{
    text-shadow:0 2px 0 rgba(0,91,42,.42),0 0 16px rgba(244,223,36,.82);
    filter:brightness(1.1);
  }
}

@keyframes promoTitleWiggle{
  0%,100%{
    transform:translate3d(0,0,0) rotate(0deg);
    text-shadow:0 2px 0 rgba(0,91,42,.42),0 0 0 rgba(244,223,36,0);
    filter:brightness(1);
  }
  12%{transform:translate3d(-1px,0,0) rotate(-1.1deg);}
  24%{
    transform:translate3d(1px,0,0) rotate(1.1deg);
    text-shadow:0 2px 0 rgba(0,91,42,.42),0 0 16px rgba(244,223,36,.8);
    filter:brightness(1.09);
  }
  36%{transform:translate3d(-1px,0,0) rotate(-.8deg);}
  48%{transform:translate3d(1px,0,0) rotate(.8deg);}
  60%,100%{transform:translate3d(0,0,0) rotate(0deg);}
}

@keyframes promoButtonGlow{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,153,0,.22);
    filter:brightness(1);
  }
  50%{
    box-shadow:0 0 0 4px rgba(255,153,0,.16),0 4px 12px rgba(255,153,0,.22);
    filter:brightness(1.04);
  }
}

@keyframes promoButtonWiggle{
  0%,100%{
    transform:translate3d(0,0,0) rotate(0deg);
    box-shadow:0 0 0 0 rgba(255,153,0,.22);
    filter:brightness(1);
  }
  10%{transform:translate3d(-1px,0,0) rotate(-.7deg);}
  20%{
    transform:translate3d(1px,0,0) rotate(.7deg);
    box-shadow:0 0 0 4px rgba(255,153,0,.16),0 4px 12px rgba(255,153,0,.22);
    filter:brightness(1.04);
  }
  30%{transform:translate3d(-1px,0,0) rotate(-.55deg);}
  40%{transform:translate3d(1px,0,0) rotate(.55deg);}
  50%,100%{transform:translate3d(0,0,0) rotate(0deg);}
}

@keyframes promoButtonShine{
  0%,42%{transform:translateX(-130%);}
  62%,100%{transform:translateX(130%);}
}

.app-modal{
  position:relative;
  width:100%;
  max-width:480px;
}

.app-modal .promo-head{
  padding:22px 54px 18px 22px;
  color:#fff;
  background:linear-gradient(135deg,#ffb347 0%,#8bc34a 52%,#00a887 100%);
  text-align:left;
}

.app-title{
  margin:0;
  font-family:var(--display);
  font-size:28px;
}

/* =========================
   Responsive
   ========================= */

@media(max-width:991px){
  .vehicle-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .checkin-wrap{
    grid-template-columns:1fr;
  }
}

@media(max-width:767px){
  .container{
    width:min(100% - 24px,var(--container));
  }

  .section{
    padding:42px 0;
  }

  .section-title{
    font-size:28px;
    line-height:1.08;
  }

  .faq-list{
    gap:12px;
  }

  .faq-list details{
    padding:16px 18px;
    border-radius:20px;
  }

  .faq-list summary{
    font-size:16px;
    font-weight:800;
    line-height:1.28;
  }

  .faq-list p{
    font-size:15px;
    font-weight:650;
    line-height:1.7;
  }

  .section-desc{
    margin-bottom:22px;
    font-size:14.5px;
  }

  .header{
    border-radius:0;
  }

  .header-inner{
    min-height:60px;
    padding:8px 0;
    gap:8px;
  }

  .brand-logo{
    width:82px;
    height:40px;
    border-radius:12px;
    padding:4px 6px;
  }

  .header-actions{
    flex:1;
    min-width:0;
    width:auto;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:7px;
  }

  .header-actions .btn{
    min-width:0;
    min-height:42px;
    padding:7px 8px;
    flex-direction:column;
    gap:0;
    font-size:11.5px;
    line-height:1.08;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }

  .header-actions .btn-line{
    display:block;
  }

  .header-actions .btn-line + .btn-line::before{
    content:none;
  }

  .hero{
    padding-top:18px;
  }

  .hero-banner{
    min-height:120px;
    border-radius:18px;
  }

  .vehicle-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .vehicle-card{
    border-radius:22px;
    padding:14px;
  }

  .vehicle-visual{
    aspect-ratio:16/9;
  }

  .vehicle-card h3{
    font-size:23px;
  }

  .vehicle-card li{
    font-size:14px;
  }

  .why-custom-card{
    padding:18px 14px 20px;
    border-radius:22px;
  }

  .why-custom-card h2{
    margin-bottom:16px;
    padding:8px 10px 7px;
    font-size:18px;
    border-radius:7px;
    -webkit-text-stroke:1.25px #087a39;
  }

  .why-custom-card h2 span{
    -webkit-text-stroke:1.25px #087a39;
  }

  .why-feature,
  .why-feature-reverse{
    grid-template-columns:62px 1fr;
    gap:13px;
    width:92%;
    padding:14px 0;
    text-align:left;
  }

  .why-feature{
    align-self:flex-start;
  }

  .why-feature-reverse{
    grid-template-columns:1fr 62px;
    align-self:flex-end;
    text-align:right;
  }

  .why-feature-reverse .why-feature-icon{
    order:2;
  }

  .why-feature-icon{
    width:58px;
    height:58px;
  }

  .why-feature-icon svg{
    width:35px;
    height:35px;
  }

  .why-feature-copy h3{
    font-size:17px;
  }

  .why-feature-copy p{
    font-size:14px;
    line-height:1.35;
  }

  .howto-card,
  .form-card{
    padding:18px;
    border-radius:22px;
  }

  .howto-card h2,
  .form-card h2{
    font-size:24px;
  }

  .preview-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .reviews-track{
    gap:14px;
  }

  .review-card{
    flex-basis:85%;
    min-width:260px;
  }

  .footer{
    padding:10px 0 44px;
    text-align:center;
  }

  .footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    max-width:430px;
  }

  .footer-main,
  .footer-company,
  .footer-contact,
  .footer-social{
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .footer-brand-name{
    font-size:20px;
  }

  .footer-tagline{
    font-size:16px;
  }

  .footer-logo-wrap{
    width:74px;
    height:46px;
  }

  .footer-company h4,
  .footer-contact h4,
  .footer-social h4{
    font-size:17px;
  }

  .footer-company p,
  .footer-contact p{
    font-size:15px;
  }

  .footer-social-list{
    gap:28px;
  }

  .footer-social-icon{
    width:46px;
    height:46px;
  }

  .footer-social-icon svg{
    width:46px;
    height:46px;
  }

  .floating-contact{
    right:8px;
    bottom:76px;
    gap:9px;
  }

  .float-btn{
    width:48px;
    height:48px;
  }

  .float-icon-img{
    width:30px;
    height:30px;
  }

  .float-phone-icon{
    font-size:25px;
  }

  .modal-overlay{
    padding:10px;
  }

  .promo-modal{
    max-width:calc(100vw - 20px);
    max-height:calc(100vh - 24px);
    border-radius:0;
  }

  .promo-close-btn{
    right:10px;
  }

  .promo-head{
    padding:14px 44px 8px;
  }

  .promo-title{
    font-size:24px;
  }

  .modal-body{
    padding:10px;
  }

  .promo-overlay .modal-body{
    padding:0 10px 8px;
  }

  .promo-image-wrap{
    width:100%;
    max-width:none;
  }

  .promo-voucher-grid{
    gap:5px;
    margin:18px 0 12px;
  }

  .promo-box{
    padding:10px 6px 12px;
  }

  .voucher-label{
    font-size:13px;
  }

  .promo-box strong{
    font-size:34px;
  }

  .promo-box span{
    font-size:11.5px;
    line-height:1.3;
  }

  .promo-footer-note{
    font-size:13px;
  }

  .promo-overlay .promo-actions .btn{
    min-height:40px;
    padding:8px 6px;
    font-size:13px;
  }

  .app-modal .promo-head{
    padding:14px 48px 12px 14px;
  }
}

@media(max-width:380px){
  .brand-logo{
    width:76px;
    height:38px;
  }

  .header-actions .btn{
    min-height:40px;
    padding:6px 6px;
    font-size:10.8px;
  }

  .float-btn{
    width:44px;
    height:44px;
  }

  .promo-title{
    font-size:20px;
  }
}