/* ==========================================================
   Trung tâm TDTT SHB Đà Nẵng — Demo trang chủ
   Đặt sân & bảng giá dịch vụ. Bảng màu lấy từ logo: tím indigo + cam.
   ========================================================== */

:root{
  --purple:        #3c3b99;
  --purple-600:    #33328a;
  --purple-800:    #23225e;
  --purple-900:    #16153c;
  --purple-950:    #0e0d28;
  --orange:        #f58220;
  --orange-400:    #ff9d47;
  --orange-600:    #d96a0c;

  --ink:           #16153c;
  --body:          #4a4a63;
  --muted:         #7a7a91;
  --line:          #e6e6ef;
  --bg:            #ffffff;
  --bg-alt:        #f5f5fa;

  --radius:        14px;
  --radius-lg:     20px;
  --shadow-md:     0 8px 28px rgba(22,21,60,.10);
  --shadow-lg:     0 24px 60px rgba(22,21,60,.18);

  --wrap:          1200px;
  --font:          'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; color:var(--ink); line-height:1.2; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 var(--font);
  padding:14px 24px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:9px 16px; font-size:13.5px; }
.btn--block{ display:flex; width:100%; }

.btn--orange{
  background:var(--orange); color:#fff;
  box-shadow:0 6px 18px rgba(245,130,32,.35);
}
.btn--orange:hover{ background:var(--orange-600); box-shadow:0 10px 24px rgba(245,130,32,.45); }

.btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.45); }
.btn--ghost:hover{ background:#fff; color:var(--purple-900); border-color:#fff; }

.link-more{
  font-weight:600; font-size:14.5px; color:var(--purple);
  border-bottom:2px solid rgba(60,59,153,.25); padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.link-more:hover{ color:var(--orange); border-color:var(--orange); }

.pill{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 12px; border-radius:100px;
  background:var(--orange); color:#fff;
}

/* ==========================================================
   TOP BAR
   ========================================================== */
.topbar{ background:var(--purple-950); color:rgba(255,255,255,.7); font-size:13px; }
.topbar__in{ display:flex; align-items:center; gap:16px; height:38px; }
.topbar__sep{ width:1px; height:14px; background:rgba(255,255,255,.2); }
.topbar__social{ margin-left:auto; display:flex; gap:6px; }
.topbar__social a{
  display:grid; place-items:center; width:28px; height:24px;
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  border-radius:6px; transition:background .2s, color .2s;
}
.topbar__social a:hover{ background:var(--orange); color:#fff; }

/* ==========================================================
   HEADER
   ========================================================== */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.header.is-stuck{ box-shadow:var(--shadow-md); }
.header__in{ display:flex; align-items:center; gap:24px; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__logo{ height:50px; width:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt strong{ font-size:17px; font-weight:800; color:var(--purple); letter-spacing:.01em; }
.brand__txt em{ font-style:normal; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.04em; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav > a{
  position:relative; padding:10px 14px; border-radius:8px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:color .2s, background .2s;
}
.nav > a:not(.btn):hover{ color:var(--purple); background:rgba(60,59,153,.06); }
.nav > a:not(.btn).is-active{ color:var(--purple); }
.nav > a:not(.btn).is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; border-radius:2px; background:var(--orange);
}
.nav__cta{ margin-left:10px; }

.burger{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:10px;
}
.burger span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.burger span + span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Dropdown ---------- */
.drop{ position:relative; }
.drop__btn{
  display:flex; align-items:center; gap:5px;
  padding:10px 14px; border:0; border-radius:8px; cursor:pointer;
  background:none; color:var(--ink);
  font:600 14.5px/1 var(--font);
  transition:color .2s, background .2s;
}
.drop__btn:hover, .drop.is-open .drop__btn{ color:var(--purple); background:rgba(60,59,153,.06); }
.drop__caret{ font-size:10px; transition:transform .2s ease; }
.drop.is-open .drop__caret{ transform:rotate(180deg); }

.drop__menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70;
  min-width:212px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.drop.is-open .drop__menu{ opacity:1; visibility:visible; transform:none; }
.drop__menu a{
  display:block; padding:10px 12px; border-radius:8px;
  font-size:14.5px; font-weight:500; color:var(--ink);
  transition:background .18s, color .18s, padding-left .18s;
}
.drop__menu a:hover{ background:rgba(60,59,153,.07); color:var(--purple); padding-left:16px; }

/* ==========================================================
   HERO
   ========================================================== */
.hero{ position:relative; overflow:hidden; color:#fff; background:var(--purple-900); }

.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(60,59,153,.85), transparent 62%),
    radial-gradient(700px 500px at 92% 100%, rgba(245,130,32,.30), transparent 58%),
    linear-gradient(160deg, var(--purple-800) 0%, var(--purple-900) 48%, var(--purple-950) 100%);
}
.hero__bg::after{
  /* Kẻ sọc như mặt sân cỏ */
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.035) 0 2px, transparent 2px 76px);
}
.hero__crest{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:640px; height:640px; opacity:.05; pointer-events:none;
  background:url("../../logo.png") center/contain no-repeat;
  filter:grayscale(1) brightness(3);
}

.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  padding:76px 20px 88px;
}

.hero__eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-400); margin-bottom:12px;
}
.hero__title{
  font-size:clamp(38px, 5.4vw, 60px); font-weight:800; color:#fff;
  letter-spacing:-.03em; margin-bottom:18px;
}
.hero__title span{
  color:var(--orange);
  background:linear-gradient(180deg, transparent 68%, rgba(245,130,32,.28) 68%);
}
.hero__lead{
  max-width:52ch; font-size:17px; color:rgba(255,255,255,.78); margin-bottom:32px;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }

.hero__stats{
  display:flex; gap:44px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats b{ font-size:26px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.hero__stats span{ font-size:12.5px; color:rgba(255,255,255,.6); }

/* ---------- Thẻ bảng giá nhanh ---------- */
.pcard{
  background:#fff; border-radius:var(--radius-lg); padding:26px;
  box-shadow:var(--shadow-lg); color:var(--body);
}
.pcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.pcard__note{ font-size:12px; font-weight:500; color:var(--muted); }

.pcard__list{
  display:grid; gap:15px;
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.pcard__list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pcard__n{ display:flex; flex-direction:column; min-width:0; }
.pcard__n b{ font-size:14px; font-weight:600; color:var(--ink); }
.pcard__n em{ font-style:normal; font-size:11.5px; color:var(--muted); }
.pcard__v{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; flex:none; }
.pcard__v b{ font-size:16px; font-weight:800; color:var(--purple); white-space:nowrap; }
.pcard__v em{ font-style:normal; font-size:11px; color:var(--muted); white-space:nowrap; }

/* ==========================================================
   SECTIONS
   ========================================================== */
.sec{ padding:84px 0; }
.sec--alt{ background:var(--bg-alt); }
.sec--dark{ background:var(--purple-900); color:rgba(255,255,255,.75); }
.sec--dark h2,.sec--dark h3{ color:#fff; }

.sechead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:36px;
}
.sechead--center{ justify-content:center; text-align:center; margin-bottom:48px; }
.sechead__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px;
}
.sechead__title{ font-size:clamp(27px,3.4vw,38px); font-weight:800; }
.sechead__desc{ margin-top:12px; max-width:56ch; font-size:16px; }
.sechead--center .sechead__desc{ margin-inline:auto; }

/* ==========================================================
   ĐẶT SÂN
   ========================================================== */
.bk{ display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
.bk > *{ min-width:0; }

.bk__form{
  padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
}
.bk__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:700; color:var(--ink); }
.field select,
.field input[type="date"]{
  width:100%; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff;
  font:500 14.5px/1.3 var(--font); color:var(--ink); cursor:pointer;
}
.field select:focus, .field input:focus{ outline:none; border-color:var(--purple); }
.field__hint{ font-size:12.5px; color:var(--muted); min-height:1em; }
.field__hint.is-warn{ color:var(--orange-600); font-weight:600; }

/* Khung giờ */
.slots{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.slots__lbl{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13px; font-weight:600; color:var(--ink); margin-bottom:12px;
}
.slots__legend{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:500; color:var(--muted); }
.sdot{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:0; }
.sdot--free{ background:#fff; border:1.5px solid var(--line); }
.sdot--busy{ background:#d8d8e4; }
.sdot--gold{ background:var(--orange); }

.slots__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:7px; }
.slot{
  padding:9px 4px; border:1.5px solid var(--line); border-radius:8px; background:#fff;
  font:600 13px/1 var(--font); color:var(--ink); cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s, background .15s, color .15s;
}
.slot:hover:not(:disabled){ border-color:var(--purple); color:var(--purple); }
.slot--gold{ border-color:rgba(245,130,32,.5); color:var(--orange-600); }
.slot--gold:hover:not(:disabled){ border-color:var(--orange); }
.slot.is-sel{ background:var(--purple); border-color:var(--purple); color:#fff; }
.slot--gold.is-sel{ background:var(--orange); border-color:var(--orange); color:#fff; }
.slot:disabled{
  background:var(--bg-alt); color:#b6b6c8; border-color:transparent;
  cursor:not-allowed; text-decoration:line-through;
}

/* Dịch vụ kèm theo */
.addons{ border:0; padding:0; margin:22px 0 0; }
.addons legend{ font-size:13px; font-weight:700; color:var(--ink); padding:0; margin-bottom:12px; }
.addons__grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

.ad{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:10px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ad:hover{ border-color:var(--purple); }
.ad:has(input:checked){ border-color:var(--purple); background:rgba(60,59,153,.05); }
.ad input{ margin-top:3px; accent-color:var(--purple); width:16px; height:16px; flex:none; cursor:pointer; }
.ad__t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ad__n{ font-size:13.5px; font-weight:600; color:var(--ink); }
.ad__p{ font-size:12.5px; font-weight:700; color:var(--purple); }
.ad__d{ font-size:11.5px; color:var(--muted); }

/* Giữ xe */
.park{ display:grid; gap:9px; }
.park__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.park__row em{ font-style:normal; font-weight:500; color:var(--muted); font-size:12.5px; }
.stepper{ display:flex; align-items:center; gap:2px; }
.stepper button{
  width:30px; height:30px; border:1.5px solid var(--line); border-radius:8px; background:#fff;
  font:700 15px/1 var(--font); color:var(--purple); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.stepper button:hover{ border-color:var(--purple); background:rgba(60,59,153,.06); }
.stepper input{
  width:46px; padding:6px 2px; text-align:center;
  border:0; background:none; font:700 14px/1 var(--font); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.stepper input:focus{ outline:2px solid var(--purple); outline-offset:1px; border-radius:4px; }

/* Cột tạm tính */
.bk__sum{
  position:sticky; top:96px;
  padding:26px; border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--purple), var(--purple-900));
  color:rgba(255,255,255,.75); box-shadow:var(--shadow-lg);
}
.bk__sum h3{ font-size:18px; color:#fff; margin-bottom:18px; }

.bk__alert{
  display:flex; gap:8px; padding:11px 13px; margin-bottom:16px;
  border-radius:10px; background:rgba(245,130,32,.16);
  border:1px solid rgba(245,130,32,.5);
  font-size:12.5px; font-weight:600; color:var(--orange-400);
}

.bill{ display:grid; gap:11px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.18); }
.bill li{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; font-size:13.5px; }
.bill__n{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.bill__n b{ font-weight:600; color:#fff; }
.bill__n em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.5); }
.bill__v{ font-weight:700; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bill__empty{ font-size:13px; color:rgba(255,255,255,.5); font-style:italic; }

.bill__total{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 18px; font-size:14px; font-weight:600;
}
.bill__total b{
  font-size:27px; font-weight:800; color:var(--orange-400);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.bk__note{ font-size:11.5px; color:rgba(255,255,255,.5); margin-bottom:16px; line-height:1.5; }
.bk__ok{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--orange-400); text-align:center; }

/* ==========================================================
   BẢNG GIÁ
   ========================================================== */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tab{
  padding:9px 18px; border:1.5px solid var(--line); border-radius:100px; background:#fff;
  font:600 13.5px/1 var(--font); color:var(--body); cursor:pointer;
  transition:border-color .18s, background .18s, color .18s;
}
.tab:hover{ border-color:var(--purple); color:var(--purple); }
.tab.is-on{ background:var(--purple); border-color:var(--purple); color:#fff; }

.table-wrap{
  overflow-x:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
}
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.tbl th{
  text-align:center; padding:14px 12px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:var(--bg-alt); border-bottom:1px solid var(--line);
}
.tbl td{
  padding:14px 12px; color:var(--body);
  border-bottom:1px solid var(--line);
}
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:rgba(60,59,153,.03); }
.tbl__team{ text-align:left; font-weight:600; color:var(--ink); }

.tbl--price .pr{ text-align:center; white-space:nowrap; }
.pr b{ font-size:15.5px; font-weight:800; color:var(--purple); }
.pr em, .tbl--price em{ font-style:normal; font-size:12px; color:var(--muted); }
.ico{ display:inline-block; width:26px; font-size:16px; }
.chip{
  display:inline-block; padding:3px 10px; border-radius:100px;
  font-size:11.5px; font-weight:700;
}
.chip--gold{ background:rgba(245,130,32,.14); color:var(--orange-600); }
.pricenote{ margin-top:14px; font-size:12.5px; color:var(--muted); font-style:italic; }

/* ==========================================================
   DỊCH VỤ
   ========================================================== */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{
  padding:26px 22px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); transition:transform .2s ease, box-shadow .2s ease;
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc__ico{
  display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px;
  border-radius:12px; background:rgba(60,59,153,.08); font-size:22px;
}
.svc h3{ font-size:17px; margin-bottom:8px; }
.svc p{ font-size:13.5px; margin-bottom:16px; }
.svc ul{ display:grid; gap:9px; padding-top:14px; border-top:1px solid var(--line); }
.svc li{ font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; }
.svc li b{ color:var(--purple); font-size:13px; white-space:nowrap; }

/* ==========================================================
   GIẢI ĐẤU
   ========================================================== */
.tour{ display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }
.tour__steps{ display:grid; gap:14px; }
.step{
  display:flex; gap:16px; padding:20px 22px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  transition:background .2s ease;
}
.step:hover{ background:rgba(255,255,255,.09); }
.step > b{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:50%; background:var(--orange); color:#fff;
  font-size:14px; font-weight:800;
}
.step h3{ font-size:16px; margin-bottom:3px; }
.step p{ font-size:13.5px; }

.tour__box{
  padding:28px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.08); border:1px solid rgba(245,130,32,.45);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.tour__box h3{ font-size:20px; margin:14px 0 10px; }
.tour__price{ font-size:14px; margin-bottom:20px; }
.tour__price b{ font-size:32px; font-weight:800; color:var(--orange-400); letter-spacing:-.02em; }
.tour__price span{ font-size:14px; color:rgba(255,255,255,.55); }
.tour__box ul{ display:grid; gap:11px; margin-bottom:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.tour__box li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.tour__box li b{ color:#fff; white-space:nowrap; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{ background:var(--purple-950); color:rgba(255,255,255,.62); font-size:14px; }
.footer__grid{
  display:grid; grid-template-columns:1.1fr 1.3fr 1.3fr .8fr; gap:44px;
  padding-top:64px; padding-bottom:48px;
}
.footer__logo{ height:92px; width:auto; margin-bottom:18px; }
.footer__co{ font-size:13px; font-weight:700; color:#fff; line-height:1.5; letter-spacing:.01em; }
.footer__sub{ margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.5); }

.footer__col h3{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:16px;
}
.footer__col p{ margin-bottom:14px; line-height:1.6; }
.footer__col strong{ color:rgba(255,255,255,.9); font-weight:600; }
.footer__col a{ color:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.2); }
.footer__col a:hover{ color:var(--orange-400); border-color:var(--orange-400); }

.footer__links{ display:grid; gap:10px; }
.footer__links a{ border:0; transition:color .2s, padding-left .2s; }
.footer__links a:hover{ color:var(--orange-400); padding-left:5px; }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:rgba(255,255,255,.42);
}
.footer__demo{ font-style:italic; }

/* ---------- To top ---------- */
.totop{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--orange); color:#fff; font-size:19px;
  box-shadow:0 8px 24px rgba(245,130,32,.45);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--orange-600); }

/* ---------- Reveal on scroll ----------
   Lưu ý: transition chỉ đặt ở trạng thái .is-in.
   Nếu đặt transition ngay trên .reveal thì lúc JS gắn class, phần tử sẽ
   mờ dần từ 1 -> 0 (nhấp nháy) trước khi hiện lại. */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; padding-top:56px; }
  .pcard{ max-width:460px; }
  .hero__crest{ display:none; }
  .bk{ grid-template-columns:1fr 330px; }
  .svcs{ grid-template-columns:repeat(2,1fr); }
  .tour{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:114px 0 auto; z-index:55;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:16px 20px 24px; margin:0;
    max-height:calc(100vh - 130px); overflow-y:auto;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav > a{ padding:14px 12px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav > a:not(.btn).is-active::after{ display:none; }
  .nav__cta{ margin:14px 0 0; border-bottom:0 !important; }

  /* Dropdown -> accordion trên mobile */
  .drop{ border-bottom:1px solid var(--line); }
  .drop__btn{ width:100%; justify-content:space-between; padding:14px 12px; font-size:16px; border-radius:0; }
  .drop__menu{
    position:static; min-width:0; padding:0 0 8px 12px; margin:0;
    border:0; border-radius:0; box-shadow:none; background:none;
    display:none; opacity:1; visibility:visible; transform:none;
  }
  .drop.is-open .drop__menu{ display:block; }
  .drop__menu a{ font-size:14.5px; color:var(--body); }

  .bk{ grid-template-columns:1fr; }
  .bk__sum{ position:static; }
  .svcs{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:680px){
  .sec{ padding:56px 0; }
  .topbar__item--hide{ display:none; }
  .brand__logo{ height:42px; }
  .header__in{ height:68px; }
  .nav{ inset-block-start:106px; }

  .hero__stats{ gap:28px; }
  .hero__stats b{ font-size:22px; }
  .hero__btns .btn{ flex:1; }

  .sechead{ flex-direction:column; align-items:flex-start; gap:14px; }
  .sechead--center{ align-items:center; }

  .bk__form{ padding:20px 16px; }
  .bk__sum{ padding:22px 18px; }
  .bk__grid{ grid-template-columns:1fr; }
  .addons__grid{ grid-template-columns:1fr; }
  .slots__grid{ grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); }
  .slots__lbl{ flex-direction:column; align-items:flex-start; gap:8px; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .tab{ flex:none; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
  .totop{ right:16px; bottom:16px; }
}