/* =========================================================================
   Ford Showroom
   Bảng màu định nghĩa trên :root (sáng) rồi ghi đè cho [data-theme=dark].
   ========================================================================= */
:root{
  --blue-900:#00095B;  --blue:#066FEF;  --blue-soft:#e8f1ff;
  --brand:#1f6bf0;     /* xanh rực dùng cho tấm khẩu hiệu, như trang Ford */
  --red:#D6122B;

  --bg:#f4f6f9;         --bg-2:#eaeef4;
  --surface:#ffffff;    --surface-2:#f8fafc;
  --ink:#0d1520;        --ink-2:#42506a;  --muted:#6b7789;
  --line:#e2e8f1;       --line-2:#cfd8e6;
  --shadow:0 1px 2px rgba(13,21,32,.05), 0 8px 24px rgba(13,21,32,.06);
  --shadow-lg:0 24px 60px rgba(13,21,32,.18);
  --radius:16px;  --radius-sm:10px;
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1240px;
}
[data-theme=dark]{
  --blue-soft:#12243f;
  --bg:#0a1017;         --bg-2:#0f1721;
  --surface:#141d29;    --surface-2:#1a2534;
  --ink:#e9eff7;        --ink-2:#b6c3d4;  --muted:#8b99ad;
  --line:#233145;       --line-2:#2e3f58;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
/* phải đứng trước mọi khai báo display khác, nếu không .modal{display:grid}
   sẽ thắng thuộc tính [hidden] của trình duyệt */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;font-family:var(--ff);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{line-height:1.18;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--blue);text-decoration:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
/* Ẩn khỏi mắt nhưng trình đọc màn hình và công cụ tìm kiếm vẫn đọc được. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* tiện ích nhỏ – dùng class thay cho style="" để giữ CSP style-src 'self' */
.fine{font-size:.86rem}
.tiny{font-size:.8rem}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
      padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------------------------------------------------------------- nút */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:999px;padding:10px 18px;
  font-weight:600;font-size:.95rem;cursor:pointer;background:none;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#0561d6}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--line-2);color:var(--ink)}
.btn.sm{padding:7px 14px;font-size:.875rem}
.btn.lg{padding:14px 28px;font-size:1.05rem}

.icobtn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-2);
}
.icobtn:hover{color:var(--blue);border-color:var(--blue)}
.i-moon{display:none}
[data-theme=dark] .i-sun{display:none}
[data-theme=dark] .i-moon{display:block}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.oval{width:76px;height:31px;stroke:none}
.brand-txt{letter-spacing:-.01em;font-size:1.05rem}
.nav{display:flex;gap:22px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav a{color:var(--ink-2)}
.nav a:hover{color:var(--blue)}
.hdr-act{display:flex;align-items:center;gap:10px}

/* --------------------------------------------------- băng chuyền mở đầu trang
   Chia đôi màn hình như ford.com.vn: ảnh xe một bên, khẩu hiệu chữ lớn đặt trên
   nền xanh rực bên kia. Mở đầu bằng hình ảnh, không nhắc giá — để khách xem xe
   trước đã.                                                                  */
.stage{position:relative;overflow:hidden;background:var(--blue-900)}
.stage-track{display:flex;transition:transform .72s cubic-bezier(.65,0,.25,1);
             will-change:transform}
@media (prefers-reduced-motion:reduce){.stage-track{transition:none}}
.slide{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;min-height:min(560px,72vh)}
.slide-img{position:relative;overflow:hidden;background:#0b1220}
.slide-img img{width:100%;height:100%;object-fit:cover;object-position:58% center}
.slide-say{
  background:var(--brand);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,4vw,56px);color:#0a1020;
}
.slide-kind{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
            color:rgba(10,16,32,.62)}
.slide-h{margin-top:14px;display:flex;flex-direction:column;font-weight:800;
         text-transform:uppercase;line-height:.94;letter-spacing:-.035em;
         font-size:clamp(2.1rem,4.6vw,4.1rem)}
.slide-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,3vw,34px)}
.btn-dark{background:#0a1020;color:#fff}
.btn-dark:hover{background:#1b2436}
.btn-outline-dark{border-color:rgba(10,16,32,.45);color:#0a1020}
.btn-outline-dark:hover{background:rgba(10,16,32,.08);border-color:#0a1020}

.stage-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);background:rgba(10,16,32,.42);color:#fff;
  cursor:pointer;backdrop-filter:blur(4px);
}
.stage-nav:hover{background:rgba(10,16,32,.72)}
.stage-nav.prev{left:16px}
.stage-nav.next{right:16px;border-color:rgba(10,16,32,.35);background:rgba(255,255,255,.55);
                color:#0a1020}
.stage-nav.next:hover{background:#fff}
.stage-dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;
            display:flex;gap:8px;justify-content:center}
.stage-dots button{
  width:28px;height:4px;border:0;border-radius:99px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .2s;
}
.stage-dots button.on{background:#fff}

/* ---------------------------------------------------------------- hero (cũ) */
.hero{position:relative;overflow:hidden;background:var(--blue-900);color:#fff;isolation:isolate}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.36;z-index:-2;filter:saturate(1.05);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--blue-900) 6%,rgba(0,9,91,.82) 42%,rgba(0,9,91,.30) 100%);
}
.hero-in{padding:76px 20px 64px;max-width:var(--maxw)}
.kicker{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#9ec8ff;border:1px solid rgba(158,200,255,.42);
  padding:5px 14px;border-radius:999px;margin-bottom:18px;
}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.65rem);font-weight:800;max-width:22ch;text-wrap:balance}
.hero h1 span{color:#79b8ff}
.lede{margin-top:16px;max-width:58ch;color:#d3e2f6;font-size:1.06rem}

.hsearch{
  margin-top:30px;display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:999px;padding:7px 7px 7px 18px;max-width:660px;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.hsearch svg{color:#6b7789;flex:none}
.hsearch input{
  flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:1rem;color:#0d1520;
}
.hsearch input::placeholder{color:#8d98a8}
.hsearch input:focus{outline:none}

.quick{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;align-items:center;
       font-size:.9rem;color:#b8cde8}
.quick button{
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.09);
  color:#fff;border-radius:999px;padding:7px 15px;cursor:pointer;font-size:.9rem;
  transition:background .15s,border-color .15s;
}
.quick button:hover{background:rgba(255,255,255,.2);border-color:#fff}
.quick-light{margin-top:16px;color:var(--muted)}
.quick-light button{border-color:var(--line-2);background:var(--surface);color:var(--ink-2)}
.quick-light button:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

/* ------------------------------------------------------- dải giới thiệu dòng xe
   Mượn cách trình bày của ford.com.vn: ảnh lớn tràn khung, tên dòng xe cỡ lớn
   nét mảnh, khẩu hiệu ngắn, tất cả nằm góc dưới trái trên nền tối chuyển sắc.  */
.sec-head{margin:56px 0 22px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;letter-spacing:-.02em}
.sec-head p{margin-top:8px;color:var(--muted);max-width:60ch}

.lineup{display:block}
.band{
  position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  min-height:400px;display:flex;align-items:flex-end;margin-bottom:16px;
  background:var(--blue-900);
}
.band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 45%;z-index:-2;
}
/* Đủ tối để chữ trắng đọc được, nhưng tắt hẳn trước nửa khung để ảnh xe còn
   giữ được màu thật — tô đều cả dải là ảnh chìm nghỉm thành mảng xanh. */
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,9,91,.90) 0%,rgba(0,9,91,.62) 26%,
                                    rgba(0,9,91,.16) 48%,rgba(0,9,91,0) 66%);
}
.band-in{padding:36px;color:#fff;max-width:34rem}
.band-kind{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
           color:#8fc0ff}
.band h3{font-size:clamp(2rem,4vw,3rem);font-weight:300;letter-spacing:-.025em;
         margin-top:10px}
.band-tag{margin-top:8px;font-size:1.15rem;color:#dce8f8}
.band-from{margin-top:16px;font-size:.95rem;color:#b9cfec}
.band-from b{color:#fff;font-size:1.15rem;font-weight:700}
.band .btn{margin-top:20px}

/* ---------------------------------------------------------------- thanh lọc */
.bar{
  position:sticky;top:68px;z-index:30;margin:0 0 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
}
.bar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.field{position:relative;display:flex;align-items:center;gap:8px}
.field.grow{flex:1;min-width:240px}
.field.grow svg{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.field.grow input{
  width:100%;padding:12px 76px 12px 42px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--surface-2);
}
.field.grow input:focus{outline:none;border-color:var(--blue);background:var(--surface);
                        box-shadow:0 0 0 4px var(--blue-soft)}
.field .clear{
  position:absolute;right:44px;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:1.35rem;line-height:1;padding:0 4px;
}
.field kbd{
  position:absolute;right:14px;font:600 .72rem var(--ff);color:var(--muted);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;background:var(--surface);
}
.lbl{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;
     letter-spacing:.05em}
select{
  border:1px solid var(--line-2);border-radius:999px;padding:11px 14px;
  background:var(--surface-2);cursor:pointer;
}
select:focus{outline:none;border-color:var(--blue)}
.pill{background:var(--blue);color:#fff;border-radius:999px;padding:0 7px;
      font-size:.75rem;font-weight:700;margin-left:2px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{
  border:1px solid var(--line-2);background:var(--surface-2);border-radius:999px;
  padding:8px 18px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--ink-2);
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue-900);border-color:var(--blue-900);color:#fff}
[data-theme=dark] .chip.on{background:var(--blue);border-color:var(--blue)}

.adv{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.fgroup.wide{grid-column:1/-1}
#sortSlot:empty{display:none}          /* trên desktop ô Sắp xếp nằm ở thanh trên */
.opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.opts label{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  border-radius:999px;padding:6px 13px;cursor:pointer;font-size:.88rem;
  background:var(--surface-2);
}
.opts label:hover{border-color:var(--blue)}
.opts input{accent-color:var(--blue);margin:0;width:15px;height:15px}
.opts label:has(input:checked){background:var(--blue-soft);border-color:var(--blue);
                               color:var(--blue);font-weight:600}
[data-theme=dark] .opts label:has(input:checked){color:#8cc2ff}

/* thanh trượt 2 đầu */
.range{position:relative;height:38px;margin-top:14px}
.rail{position:absolute;top:17px;left:0;right:0;height:5px;border-radius:99px;
      background:var(--line-2)}
.fill{position:absolute;height:100%;border-radius:99px;background:var(--blue)}
.range input[type=range]{
  position:absolute;top:8px;left:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:3px solid var(--blue);cursor:grab;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.range input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:3px solid var(--blue);cursor:grab;
}
#pOut{color:var(--ink);font-variant-numeric:tabular-nums}

.bar-foot{display:flex;align-items:center;justify-content:space-between;
          margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#count{font-size:.92rem;color:var(--muted);font-weight:500}
#count b{color:var(--ink)}

/* ---------------------------------------------------------------- lưới xe */
.grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(298px,1fr));
}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.card.picked{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* khung ảnh tỉ lệ cố định -> mọi thẻ cao bằng nhau dù ảnh gốc khác tỉ lệ */
.shot{position:relative;background:#fff;aspect-ratio:16/10;display:grid;place-items:center;
      border-bottom:1px solid var(--line)}
[data-theme=dark] .shot{background:#eef2f7}
.shot img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
          object-fit:contain}
.ph{display:grid;place-items:center;gap:8px;color:#98a4b6;font-size:.82rem;text-align:center}
.ph svg{width:46px;height:46px;stroke-width:1.3}

.tag{
  /* z-index cần thiết: ảnh xe cũng là absolute và nằm sau trong DOM nên sẽ đè lên */
  position:absolute;top:10px;left:10px;z-index:1;background:var(--blue-900);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.tag.deal{background:var(--red)}
/* đặt dưới đáy ảnh: nhãn khuyến mại ở góc trên có thể dài, để cùng hàng sẽ đè nhau */
.cmpbtn{
  position:absolute;bottom:10px;right:10px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);border:1px solid #d7dfea;border-radius:999px;
  padding:5px 11px;font-size:.78rem;font-weight:600;color:#42506a;cursor:pointer;
}
.cmpbtn:hover{border-color:var(--blue);color:var(--blue)}
.cmpbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cmpbtn svg{width:14px;height:14px}

.body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.model{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
       color:var(--blue)}
.card h3{font-size:1.06rem;font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.meta span{
  font-size:.78rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px;color:var(--ink-2);
}
.price{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.price .was{font-size:.83rem;color:var(--muted);text-decoration:line-through}
.price .now{font-size:1.42rem;font-weight:800;letter-spacing:-.02em}
.price .now small{font-size:.85rem;font-weight:600;color:var(--muted);margin-left:3px}
.save{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:.82rem;
      font-weight:700;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);
      border-radius:7px;padding:3px 9px}
.save svg{width:14px;height:14px}
.acts{display:flex;gap:8px}
.acts .btn{flex:1}

/* ---------------------------------------------------------------- rỗng / ghi chú */
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty svg{width:46px;height:46px;margin:0 auto 12px;color:var(--line-2)}
.empty h3{color:var(--ink);margin-bottom:6px}
.empty .btn{margin-top:18px}
.note{margin:26px 0 0;font-size:.85rem;color:var(--muted);
      border-left:3px solid var(--line-2);padding-left:14px}
.promo{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 20px;padding:13px 16px;
  border-radius:var(--radius-sm);font-size:.9rem;line-height:1.5;
  background:color-mix(in srgb,#f0a202 12%,var(--surface));
  border:1px solid color-mix(in srgb,#f0a202 38%,transparent);
}
.promo svg{flex:none;margin-top:2px;color:#c47f00;fill:currentColor;stroke:none}
[data-theme=dark] .promo svg{color:#ffc247}

/* ------------------------------------------------------------- bước tiếp theo */
.steps{margin-bottom:8px}
.step-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;cursor:pointer;color:var(--ink);font:inherit;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.step:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.step svg{width:26px;height:26px;color:var(--blue)}
.step h3{font-size:1.1rem}
.step p{color:var(--muted);font-size:.93rem;line-height:1.55}
.step-go{margin-top:auto;padding-top:8px;color:var(--blue);font-weight:600;font-size:.92rem}
.step-go b{transition:margin-left .16s}
.step:hover .step-go b{margin-left:4px}

/* ---------------------------------------------------------------- CTA + footer */
.cta{margin:56px auto}
.cta-in{
  background:linear-gradient(120deg,var(--blue-900),#0a3f9e);color:#fff;
  border-radius:22px;padding:36px;display:flex;gap:26px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
}
.cta h2{font-size:1.6rem}
.cta p{color:#cfe0f7;margin-top:8px;max-width:52ch}
.cta-phone{font-size:1.85rem;font-weight:800;letter-spacing:.01em;color:#fff!important;
           margin-top:12px!important}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-white{background:#fff;color:var(--blue-900)}
.btn-white:hover{background:#e8f1ff}
.btn-zalo{background:#0068ff;color:#fff}
.btn-zalo:hover{background:#0055d4}
.btn-ghost-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ft-in a{color:var(--blue)}
.contact-num{font-size:1.9rem;font-weight:800;letter-spacing:.01em;margin:4px 0 8px;
             color:var(--blue)}
[data-theme=dark] .contact-num{color:#79b8ff}
.ft{border-top:1px solid var(--line);background:var(--surface);margin-top:40px}
.ft-in{padding:26px 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
       font-size:.9rem}

/* ---------------------------------------------------------------- so sánh */
.cmpbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.14);
}
.cmpbar-in{display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap}
.cmp-list{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:200px}
.cmp-item{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;font-size:.85rem;
}
.cmp-item button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1.1rem;
                 line-height:1;padding:0 4px}
.cmp-act{display:flex;gap:8px}

/* ------------------------------------------------- thanh gọi nhanh (mobile)
   Khách vào từ link Zalo gần như đều dùng điện thoại, nên nút gọi phải luôn
   trong tầm ngón cái chứ không bắt cuộn lên đầu trang. Ẩn trên desktop vì ở đó
   số điện thoại đã nằm sẵn trên header.                                      */
.callbar{display:none}
@media (max-width:860px){
  .callbar{
    position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
  .callbar .btn{flex:1;padding:13px 14px;font-size:1rem}
  .callbar .btn:last-child{flex:0 0 34%}
  /* đang so sánh xe thì nhường chỗ cho thanh so sánh */
  body.cmp-on .callbar{display:none}
  body:not(.cmp-on){padding-bottom:76px}
}

/* =================================================== trang riêng từng dòng xe */
.mhero{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-900);
       display:flex;align-items:flex-end;min-height:min(520px,64vh)}
.mhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           object-position:62% 45%;z-index:-2}
.mhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,9,91,.92) 0%,rgba(0,9,91,.66) 30%,
                                   rgba(0,9,91,.18) 56%,rgba(0,9,91,0) 74%)}
.mhero-in{padding:44px 20px}
.crumb{font-size:.85rem;color:#a9c6ea;margin-bottom:14px}
.crumb a{color:#dbe8fa}
.crumb span{margin:0 6px;opacity:.6}
.mhero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300;letter-spacing:-.03em;color:#fff}
.mhero-tag{margin-top:10px;font-size:1.2rem;color:#dce8f8}
.mhero-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.lede-big{max-width:68ch;margin:44px 0 8px;font-size:1.12rem;line-height:1.75;color:var(--ink-2)}

.stat-row{display:grid;gap:14px;margin:32px 0 8px;
          grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:22px}
.stat-v{font-size:2.4rem;font-weight:300;letter-spacing:-.03em;line-height:1;
        font-variant-numeric:tabular-nums}
.stat-v span{font-size:1rem;font-weight:600;color:var(--muted);margin-left:6px}
.stat-l{margin-top:8px;font-size:.9rem;color:var(--muted)}

.mblock{margin-top:40px;max-width:70ch}
.mblock h2{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:300;letter-spacing:-.02em}
.mblock p{margin-top:12px;color:var(--ink-2);line-height:1.8}
.mblock table.sp{margin-top:14px}

/* nút tải catalog chính hãng */
.dl-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.dl{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--radius-sm);
    border:1px solid var(--line);background:var(--surface);color:var(--ink);
    transition:border-color .16s,transform .16s}
.dl:hover{border-color:var(--blue);transform:translateY(-1px)}
.dl svg{width:22px;height:22px;color:var(--blue);flex:none}
.dl span{display:flex;flex-direction:column;font-weight:600;font-size:.95rem;line-height:1.3}
.dl b{font-weight:500;font-size:.78rem;color:var(--muted);margin-top:3px}

/* danh sách phiên bản */
.vlist{display:grid;gap:14px}
.vrow{display:grid;grid-template-columns:260px 1fr 230px;gap:22px;align-items:start;
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:18px}
.vshot{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
       aspect-ratio:16/10;overflow:hidden}
[data-theme=dark] .vshot{background:#eef2f7}
.vshot img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
           object-fit:contain}
.vshot .tag{top:8px;left:8px;font-size:.66rem;padding:4px 9px}
.vmain h3{font-size:1.2rem}
.vmain .meta{margin-top:10px}
.vmain .hl{margin-top:12px}
.vmain .warn{margin-top:12px}
.vprice{text-align:right;border-left:1px dashed var(--line);padding-left:20px}
.vprice .was{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.vprice .now{font-size:1.55rem;font-weight:800;letter-spacing:-.025em}
.vprice .save{margin-top:8px}
.vprice .btn{margin-top:14px;width:100%}

/* form: hai ô cùng hàng + ô đồng ý */
.fx2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx label i{color:var(--red);font-style:normal}
.form select{width:100%;border-radius:var(--radius-sm);padding:11px 13px;
             border:1px solid var(--line-2);background:var(--surface-2)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);
       line-height:1.5;cursor:pointer}
.agree input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px;flex:none}
/* Không có hai dòng này thì phần chữ co lại còn vài chục pixel rồi xuống dòng
   mỗi chữ một hàng — mục flex mặc định co theo nội dung chứ không giãn ra. */
.agree span{flex:1;min-width:0}
.fx2 > *{min-width:0}
.form input,.form select,.form textarea{max-width:100%}

/* ======================================================== chuyển động, hiệu ứng

   Hiệu ứng xuất hiện gắn thẳng vào thanh cuộn bằng animation-timeline của CSS,
   KHÔNG dùng JavaScript. Nếu để JS chịu trách nhiệm gỡ trạng thái ẩn, chỉ cần
   JS không chạy là nội dung kẹt vô hình. Với animation CSS, trạng thái kết
   thúc luôn là HIỆN, và trình duyệt không hỗ trợ thì @supports bỏ qua cả khối.

   NGUYÊN TẮC: một phần tử chỉ được animate MỘT lần — hoặc cả khối, hoặc riêng
   tiêu đề bên trong. Làm cả hai thì hai phép biến hình cộng dồn, chữ giật.    */

/* đường cong chung: bung nhanh lúc đầu rồi hãm lại thật êm ở cuối */
:root{ --ease-out: cubic-bezier(.22,.61,.36,1); }

/* LUẬT DUY NHẤT Ở ĐÂY: không hiệu ứng nào được phép đặt opacity dưới 1 hay
   cắt xén nội dung. Animation chỉ đổi transform, hoặc di chuyển một lớp phủ
   riêng. Lý do: animation cần luồng dựng hình của trình duyệt mới chạy; gặp
   môi trường không chạy (tab nền bị bóp nhịp, webview lạ, máy yếu) mà hiệu ứng
   lại đang giữ chữ ở opacity 0 thì nội dung mất hẳn. Với luật này, kịch bản
   xấu nhất chỉ là vài khối nằm lệch xuống vài chục pixel — không ai nhận ra. */

@keyframes riseY   {from{transform:translateY(26px)} to{transform:none}}
@keyframes riseSoft{from{transform:translateY(18px)} to{transform:none}}

/* Thanh màu quét ngang qua tiêu đề. Trạng thái mặc định là scaleX(0) — tức là
   KHÔNG che gì cả. Animation mới làm nó nở ra rồi thu lại. Không chạy thì chỉ
   đơn giản là không có thanh nào, chữ vẫn nguyên. */
@keyframes wipe{
  0%  {transform:scaleX(0);transform-origin:left center}
  45% {transform:scaleX(1);transform-origin:left center}
  55% {transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band,.stat,.mblock,.vrow,.step,.cta-in,.promo,.dl-row,
    .card,.lede-big,.cmp-table,.sec-head h2,.sec-head p,.sec-head .quick{
      animation:riseY linear both;
      animation-timeline:view();
      animation-timing-function:var(--ease-out);
    }
    /* khoảng chạy lệch nhau -> tiêu đề vào trước, mô tả theo sau, thành nhịp */
    .band,.stat,.mblock,.vrow,.step,.cta-in,.promo,.dl-row,
    .card,.lede-big,.cmp-table{animation-range:entry 2% cover 26%}
    .sec-head h2                {animation-range:entry 0% cover 22%}
    .sec-head p,.sec-head .quick{animation-range:entry 12% cover 40%}
  }
}

/* --- tiêu đề lớn: trồi lên kèm một vệt màu quét qua --- */
@media (prefers-reduced-motion: no-preference){
  .mhero h1,.slide-h span{position:relative}
  .mhero h1::after,.slide-h span::after{
    content:"";position:absolute;left:-.06em;right:-.06em;top:.08em;bottom:.1em;
    pointer-events:none;transform:scaleX(0);
  }
  .mhero h1::after {background:var(--brand)}
  .slide-h span::after{background:#0a1020}

  .mhero .crumb{animation:riseSoft .6s  var(--ease-out) .04s both}
  .mhero h1    {animation:riseY    .85s var(--ease-out) .10s both}
  .mhero h1::after{animation:wipe  .95s var(--ease-out) .10s both}
  .mhero-tag   {animation:riseSoft .7s  var(--ease-out) .34s both}
  .mhero-act   {animation:riseSoft .7s  var(--ease-out) .46s both}
}

/* ---- ảnh xe: phóng nhẹ + vệt sáng quét qua khi rê chuột ---- */
.shot,.vshot{isolation:isolate}
.shot img,.vshot img{transition:transform .55s var(--ease-out)}
.card:hover .shot img,.vrow:hover .vshot img{transform:scale(1.07)}

.shot::after,.vshot::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.62) 48%,
                                    transparent 62%);
  transform:translateX(-130%);
}
.card:hover .shot::after,.vrow:hover .vshot::after{animation:sheen 1s ease-out}
@keyframes sheen{
  0%{transform:translateX(-130%);opacity:0}
  16%{opacity:1}
  100%{transform:translateX(130%);opacity:0}
}

/* ---- dải giới thiệu: ảnh phóng chậm, chữ nhích sang ---- */
.band img{transition:transform 1.2s var(--ease-out)}
.band:hover img{transform:scale(1.06)}
.band-in>*{transition:transform .45s var(--ease-out)}
.band:hover .band-in>*{transform:translateX(6px)}

/* ---- băng chuyền ---- */
.slide-say>*{will-change:transform,opacity}
.slide.on .slide-kind{animation:riseSoft .7s var(--ease-out) .10s both}
.slide.on .slide-act {animation:riseSoft .7s var(--ease-out) .52s both}

/* Khẩu hiệu ngắt sẵn từng dòng nên cho từng dòng trồi lên lệch nhau —
   mượt hơn nhiều so với đẩy cả cụm chữ lên một lượt. */
.slide.on .slide-h span{animation:riseY .8s var(--ease-out) both}
.slide.on .slide-h span::after{animation:wipe .9s var(--ease-out) both}
.slide.on .slide-h span:nth-child(1),
.slide.on .slide-h span:nth-child(1)::after{animation-delay:.18s}
.slide.on .slide-h span:nth-child(2),
.slide.on .slide-h span:nth-child(2)::after{animation-delay:.32s}
.slide.on .slide-h span:nth-child(3),
.slide.on .slide-h span:nth-child(3)::after{animation-delay:.46s}

/* ---- nút và thẻ: phản hồi rõ hơn khi rê chuột ---- */
.btn{transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.chip,.opts label{transition:background .18s,color .18s,border-color .18s,
                             transform .18s var(--ease-out)}
.chip:hover{transform:translateY(-1px)}
.stat{transition:border-color .22s,transform .22s var(--ease-out)}
.stat:hover{border-color:var(--line-2);transform:translateY(-2px)}
.stat-v{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .card:hover .shot img,.vrow:hover .vshot img,.band:hover img{transform:none}
  .card:hover .shot::after,.vrow:hover .vshot::after{animation:none}
  .btn:hover,.chip:hover,.stat:hover,.band:hover .band-in>*{transform:none}
  .slide.on .slide-kind,.slide.on .slide-h span,.slide.on .slide-act,
  .mhero .crumb,.mhero h1,.mhero-tag,.mhero-act{animation:none}
}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.backdrop{position:absolute;inset:0;background:rgba(6,12,22,.62);backdrop-filter:blur(3px)}
.sheet{
  position:relative;background:var(--surface);border-radius:20px;width:min(860px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg);
  animation:pop .2s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.card{transition:none}}
.sheet .x{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);font-size:1.4rem;line-height:1;
  cursor:pointer;color:var(--ink-2);
}
.mhead{background:#fff;padding:10px;border-bottom:1px solid var(--line)}
[data-theme=dark] .mhead{background:#eef2f7}
.mhead img{width:100%;max-height:290px;object-fit:contain;margin:0 auto}
.mbody{padding:24px}
.mbody h2{font-size:1.5rem}
.mtop{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
      margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mprice .now{font-size:2rem;font-weight:800;letter-spacing:-.025em}
.sec{margin-top:22px}
.sec h4{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
        color:var(--muted);margin:0 0 12px}
.hl{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.hl li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.hl svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:4px}
table.sp{width:100%;border-collapse:collapse;font-size:.92rem}
table.sp td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.sp td:first-child{color:var(--muted);width:46%}
table.sp td:last-child{font-weight:600;text-align:right}
.deal-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
          padding:16px}
.deal-box .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.93rem}
.deal-box .row.tot{border-top:1px solid var(--line-2);margin-top:6px;padding-top:10px;
                   font-weight:800;color:var(--red)}
.warn{background:color-mix(in srgb,#f0a202 12%,transparent);border:1px solid
      color-mix(in srgb,#f0a202 40%,transparent);border-radius:var(--radius-sm);
      padding:11px 14px;font-size:.88rem;margin-top:14px}

/* trả góp */
.calc{display:grid;gap:14px}
.calc .line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.calc label{font-size:.88rem;color:var(--muted);min-width:130px}
.calc input[type=range]{flex:1;min-width:150px;accent-color:var(--blue)}
.calc .val{font-weight:700;font-variant-numeric:tabular-nums;min-width:92px;text-align:right}
.calc .out{background:var(--blue-soft);border-radius:var(--radius-sm);padding:16px;
           display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.calc .out b{font-size:1.5rem;color:var(--blue)}
[data-theme=dark] .calc .out b{color:#79b8ff}

/* form tư vấn */
.form{display:grid;gap:14px;margin-top:4px}
.form .fx{display:grid;gap:6px}
/* :not([type=checkbox]) là bắt buộc — quy tắc này nằm sau .agree input nên nếu
   không loại trừ thì ô tick đồng ý bị kéo rộng hết hàng, đẩy phần chữ về 0px. */
.form input:not([type=checkbox]),.form textarea{
  border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 13px;
  background:var(--surface-2);width:100%;
}
.form input:not([type=checkbox]):focus,.form textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft);background:var(--surface)}
.form textarea{min-height:78px;resize:vertical;font-family:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmsg{font-size:.9rem;padding:10px 13px;border-radius:var(--radius-sm)}
.fmsg.err{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.fmsg.ok{background:color-mix(in srgb,#12a150 14%,transparent);color:#0c8a44}

/* bảng so sánh */
.cmp-table{overflow-x:auto}
.cmp-table table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.cmp-table th,.cmp-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;
                            vertical-align:top}
.cmp-table th{position:sticky;top:0;background:var(--surface);z-index:1}
.cmp-table td:first-child,.cmp-table th:first-child{color:var(--muted);width:150px}
.cmp-table .best{color:var(--blue);font-weight:700}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;
  font-size:.92rem;box-shadow:var(--shadow-lg);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:860px){
  .nav{display:none}
  .hero-in{padding:52px 20px 46px}
  .cta-in{padding:26px}

  /* băng chuyền: xếp dọc, ảnh trên chữ dưới */
  .slide{grid-template-columns:1fr;min-height:0}
  .slide-img{height:44vh;min-height:240px}
  .slide-say{padding:24px 20px 34px}
  .slide-h{font-size:clamp(1.9rem,8.4vw,2.9rem)}
  .slide-act .btn{flex:1}
  .stage-nav{top:22vh;width:40px;height:40px}
  .stage-nav.prev{left:10px}
  .stage-nav.next{right:10px}
  .stage-dots{bottom:10px}
  .stage-dots button{background:rgba(10,16,32,.3)}
  .stage-dots button.on{background:#0a1020}

  /* dải dòng xe: trên điện thoại đổ bóng từ dưới lên cho chữ dễ đọc */
  .sec-head{margin:40px 0 16px}
  /* Dải thấp hơn một chút: khung càng cao thì ảnh ngang càng bị cắt hẹp hai
     bên, xe chỉ còn thấy khúc giữa. 290px là mức ảnh còn thấy gần trọn xe. */
  .band{min-height:290px;border-radius:16px}
  .band img{object-position:center 42%}
  .band::after{
    background:linear-gradient(0deg,rgba(0,9,91,.95) 0%,rgba(0,9,91,.78) 42%,
                                    rgba(0,9,91,.22) 74%,rgba(0,9,91,.05) 100%);
  }
  .band-in{padding:22px}
  .band-tag{font-size:1.02rem}

  /* trang dòng xe */
  .mhero{min-height:auto;padding-top:160px}
  .mhero img{object-position:center 42%}
  .mhero::after{background:linear-gradient(0deg,rgba(0,9,91,.95) 0%,rgba(0,9,91,.78) 44%,
                                                rgba(0,9,91,.2) 78%,rgba(0,9,91,.05) 100%)}
  .mhero-in{padding:26px 20px 30px}
  .mhero-act .btn{flex:1}
  .lede-big{margin-top:30px;font-size:1.04rem}
  .stat{padding:16px}
  .stat-v{font-size:2rem}
  .vrow{grid-template-columns:1fr;gap:14px;padding:14px}
  .vshot{max-width:320px}
  .vprice{text-align:left;border-left:0;border-top:1px dashed var(--line);
          padding-left:0;padding-top:14px}
  .vprice .btn{width:auto}
  .fx2{grid-template-columns:1fr}

  /* ---- thanh lọc gọn lại trên điện thoại ----
     Trước đây các ô xếp chồng thành 5 hàng, dính sticky nên chiếm quá nửa màn
     hình. Giờ: 1 hàng ô tìm kiếm + nút lọc, 1 hàng chip trượt ngang. Ô "Sắp
     xếp" được JS chuyển vào trong bảng Bộ lọc.                               */
  /* KHÔNG để transition ở đây: thanh này nằm trong luồng trang, cho nó chạy
     mượt nghĩa là chiều cao trang đổi dần trong lúc người dùng vẫn đang cuộn,
     sinh thêm sự kiện cuộn và gây nháy. Đổi dứt khoát một nhịp là ổn định nhất. */
  .bar{top:68px;padding:10px 12px}
  .bar-row{gap:8px;flex-wrap:nowrap}
  .bar-search .field.grow{min-width:0;flex:1}
  .field.grow input{padding:11px 40px 11px 38px}
  .field.grow svg{left:12px}
  .field kbd{display:none}
  .field .clear{right:10px}
  #toggleFilter{flex:0 0 auto;padding:11px 13px}
  #toggleFilter .btn-txt{display:none}

  /* chip trượt ngang một hàng thay vì xuống dòng thành hai */
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-top:10px;padding-bottom:2px;
         scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:7px 15px}

  .bar-foot{margin-top:10px;padding-top:8px}
  .adv-grid{gap:14px}

  /* ---- kéo xuống thì tự thu gọn, kéo lên hiện lại ---- */
  body.bar-min .bar{padding:8px 12px}
  body.bar-min .bar .chips,
  body.bar-min .bar .bar-foot{display:none}
}
@media (max-width:560px){
  .hdr-act .btn-line span{display:none}
  .hdr-act .btn-line{padding:10px 12px}
  .grid{grid-template-columns:1fr}
  .mbody{padding:18px}
}