/* ============================================================
   site.css — thành phần dùng chung cho các trang mới.
   Token màu + font lấy từ brand.css. Header/footer có style riêng
   nhúng inline (một nguồn duy nhất trong src/common.js).
   ============================================================ */

/* ---------- khung trang ---------- */
.page{padding-top:76px}
.sec{padding:clamp(48px,6vw,92px) var(--pad)}
.sec.tight{padding-top:clamp(28px,3.4vw,48px)}
.sec.dark{background:var(--panel)}
.sec.darker{background:var(--ink)}
.sec-head{max-width:1240px;margin:0 auto clamp(26px,3.4vw,44px)}
.sec-inner{max-width:1240px;margin:0 auto}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:12px;letter-spacing:.05em;color:rgba(228,214,205,.45);
  max-width:1240px;margin:0 auto clamp(18px,2.4vw,28px)}
.crumbs a{color:rgba(228,214,205,.65);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{color:rgba(228,214,205,.25)}
.crumbs .cur{color:var(--gold)}

/* ---------- hero trang con ---------- */
.phero{position:relative;min-height:min(62vh,560px);display:flex;align-items:flex-end;
  padding:120px var(--pad) clamp(36px,5vw,64px);overflow:hidden}
.phero.short{min-height:min(44vh,400px)}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,7,.55) 0%,rgba(10,8,7,.15) 40%,rgba(10,8,7,.86) 100%)}
.phero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%}
.phero .eyebrow{margin-bottom:14px}
.phero h1{font-family:var(--vn);font-weight:700;color:#fff;margin:0;
  font-size:clamp(26px,2.9vw,42px);line-height:1.42;letter-spacing:-.02em;text-wrap:balance;max-width:24ch}
.phero h1 .en{font-family:var(--display)}
.phero .lede{margin-top:16px}

/* ---------- lưới thẻ ---------- */
.cards{display:grid;gap:clamp(14px,1.8vw,24px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.cards.c4{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--hair);position:relative;
  display:flex;flex-direction:column;transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.3,1)}
.card:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.card.flat:hover{transform:none}
.card-media{aspect-ratio:16/10;overflow:hidden;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:8px;flex:1}
.card-kicker{font-family:var(--display);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.card-title{font-family:var(--vn);font-weight:600;font-size:clamp(14px,1.25vw,17px);
  color:#fff;margin:0;line-height:1.48}
.card-text{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.card-foot{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--gold);
  letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.card-foot::after{content:"";width:16px;height:1px;background:currentColor;transition:width .3s}
.card:hover .card-foot::after{width:26px}
a.card{text-decoration:none;color:inherit}

/* ---------- khối thống kê ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px);
  max-width:1240px;margin:0 auto}
@media(max-width:900px){.stats-band{grid-template-columns:repeat(2,1fr)}}
.stat .num{font-family:var(--display);font-weight:700;color:var(--gold);
  font-size:clamp(26px,3vw,44px);line-height:1;letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px}
.stat .num small{font-size:.42em;font-weight:500;letter-spacing:.04em}
.stat .lbl{margin-top:10px}
.stat .note{font-size:11.5px;color:rgba(228,214,205,.4);margin-top:4px}

/* ---------- split hai cột ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);
  align-items:center;max-width:1240px;margin:0 auto}
.split.rev>.split-media{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev>.split-media{order:0}}
.split-media{overflow:hidden;position:relative}
.split-media img{width:100%;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.split-copy .eyebrow{margin-bottom:12px}
.split-copy h2{margin-bottom:14px}
.split-copy .lede{font-size:clamp(14px,1.5vw,16.5px)}
.split-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.split-list li{display:flex;gap:12px;font-size:14px;color:var(--muted);line-height:1.55}
.split-list li::before{content:"";width:14px;height:1px;background:var(--gold);flex:0 0 auto;margin-top:.62em}
.split-list b{color:var(--cream);font-weight:600}

/* ---------- bảng ---------- */
.tbl-wrap{overflow-x:auto;max-width:1240px;margin:0 auto}
table.tbl{border-collapse:collapse;width:100%;min-width:620px}
.tbl thead th{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);
  font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tbl tbody td{padding:12px 16px;border-bottom:1px solid rgba(228,214,205,.07);
  font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.tbl tbody td:first-child{color:var(--muted)}
.tbl tbody tr:hover td{background:rgba(228,214,205,.022)}
.tbl .grp td{padding:26px 16px 8px;border:0;font-family:var(--display);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(228,214,205,.42)}
.tbl .na{color:#D98C7A;font-style:italic;font-size:13px}

/* ---------- form ---------- */
.form{display:grid;gap:16px;max-width:560px}
.form.wide{max-width:none;grid-template-columns:1fr 1fr}
@media(max-width:700px){.form.wide{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(228,214,205,.55)}
.field input,.field select,.field textarea{background:var(--ink);border:1px solid var(--hair);
  color:var(--cream);font:inherit;font-size:14.5px;padding:13px 14px;width:100%;
  transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.err-msg{display:none;font-size:12px;line-height:1.5;color:#D98C7A}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#D98C7A}
.field.invalid .err-msg,.invalid>.err-msg{display:block}
/* ô đồng ý nằm trong <label> chứ không phải .field — vẫn phải thấy được lỗi */
label.invalid{color:#D98C7A}
label.invalid .err-msg{display:block;margin-top:5px}
.form-note{grid-column:1/-1;font-size:12px;color:rgba(228,214,205,.42);line-height:1.6;
  border:1px dashed var(--hair);padding:11px 13px}
.form-ok{display:none;border:1px solid var(--gold-dim);background:var(--panel);
  padding:clamp(24px,3vw,40px);text-align:center}
.form-ok .big{font-size:clamp(16px,1.5vw,20px);font-weight:600;color:#fff;margin:0 0 10px}
.form-ok p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}
.form-wrap.done .form,.form-wrap.done .steps-nav{display:none}
.form-wrap.done .form-ok{display:block}

/* ---------- form nhiều bước ---------- */
.steps-bar{display:flex;gap:0;max-width:760px;margin:0 auto clamp(28px,3.4vw,44px);counter-reset:st}
.steps-bar span{flex:1;position:relative;padding-top:18px;text-align:center;
  font-size:11.5px;letter-spacing:.06em;color:rgba(228,214,205,.4);counter-increment:st}
.steps-bar span::before{content:counter(st,decimal-leading-zero);position:absolute;top:-8px;left:50%;
  transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:12px;color:rgba(228,214,205,.4)}
.steps-bar span::after{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:var(--hair)}
.steps-bar span.on{color:var(--gold)}
.steps-bar span.on::before{color:var(--gold)}
.steps-bar span.on::after{background:var(--gold)}
.step{display:none}
.step.on{display:block;animation:stepIn .5s cubic-bezier(.2,.7,.3,1)}
@keyframes stepIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.steps-nav{display:flex;justify-content:space-between;gap:14px;max-width:760px;margin:30px auto 0}
.btn-ghost{background:none;border:1px solid var(--hair);color:var(--cream);font:inherit;
  font-size:13.5px;padding:13px 26px;cursor:pointer;transition:border-color .25s,color .25s}
.btn-ghost:hover{border-color:var(--gold);color:#fff}
.btn-ghost:disabled{opacity:.3;cursor:not-allowed}

/* thẻ chọn trong bước */
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto}
@media(max-width:640px){.pick-grid{grid-template-columns:1fr}}
.pick{position:relative;border:1px solid var(--hair);background:var(--panel);cursor:pointer;
  padding:0;text-align:left;font:inherit;color:inherit;transition:border-color .3s,transform .3s}
.pick:hover{transform:translateY(-2px);border-color:var(--gold-dim)}
.pick[aria-pressed="true"]{border-color:var(--gold)}
.pick[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:12px;
  color:var(--gold);font-size:15px;font-weight:700}
.pick img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.pick .pk-body{padding:14px 16px}
.pick .pk-t{font-weight:600;color:#fff;font-size:15.5px}
.pick .pk-s{font-size:12.5px;color:var(--muted);margin-top:3px}
.pick.slim{padding:14px 16px}
.slots{display:flex;flex-wrap:wrap;gap:9px;max-width:760px;margin:0 auto}
.slot{background:none;border:1px solid var(--hair);color:var(--cream);font:inherit;font-size:13px;
  padding:10px 16px;cursor:pointer;transition:border-color .25s,color .25s}
.slot:hover{border-color:var(--gold-dim)}
.slot[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(196,159,112,.1)}
.sum-box{border:1px solid var(--hair);background:var(--panel);padding:18px 20px;max-width:760px;margin:0 auto 22px}
.sum-box .row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:13.5px}
.sum-box .row span:first-child{color:rgba(228,214,205,.5)}
.sum-box .row span:last-child{color:#fff;text-align:right}

/* ---------- bộ lọc chip ---------- */
.chips-row{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 clamp(20px,2.6vw,32px)}
.fchip{background:none;border:1px solid var(--hair);color:var(--cream);font:inherit;font-size:13px;
  padding:9px 18px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.fchip:hover{border-color:var(--gold-dim)}
.fchip[aria-pressed="true"]{border-color:var(--gold);color:#fff;background:rgba(196,159,112,.12)}
.flip-item{transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .35s}
.flip-item.hide{display:none}

/* ---------- accordion FAQ ---------- */
.acc{border-top:1px solid var(--hair);max-width:860px;margin:0 auto}
.acc-item{border-bottom:1px solid var(--hair)}
.acc-q{width:100%;background:none;border:0;color:#fff;font:inherit;text-align:left;cursor:pointer;
  padding:20px 44px 20px 0;font-size:clamp(14.5px,1.15vw,16.5px);font-weight:600;position:relative;line-height:1.45}
.acc-q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:400;font-size:22px;color:var(--gold);transition:transform .35s}
.acc-item.open .acc-q::after{transform:translateY(-50%) rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.3,1)}
.acc-a-in{padding:0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:68ch}
.acc-a-in b{color:var(--cream)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,8,7,.94);display:none;
  align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
.lb.on{display:flex;animation:lbIn .3s}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%;max-height:100%;display:block}
.lb .lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-size:12.5px;letter-spacing:.08em;color:rgba(228,214,205,.6)}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:clamp(44px,5vw,58px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(228,214,205,.35);background:rgba(10,8,7,.55);
  color:var(--cream);font-size:30px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0 0 4px;
  transition:border-color .3s,background .3s,transform .3s}
.lb-btn:hover{border-color:var(--gold);background:rgba(196,159,112,.22);transform:translateY(-50%) scale(1.06)}
.lb-prev{left:clamp(10px,2.4vw,30px)}
.lb-next{right:clamp(10px,2.4vw,30px)}

/* ---------- tab dòng xe (trang thông số) ---------- */
.stabs{display:flex;gap:12px}
.stab{font-weight:600;font-size:clamp(13px,1.4vw,15px);letter-spacing:.08em;
  padding:12px 28px;border:1px solid var(--hair);color:var(--muted);
  background:none;cursor:pointer;font-family:inherit;
  transition:color .3s,border-color .3s,background .3s}
.stab:hover{color:var(--cream);border-color:var(--gold-dim)}
.stab.on{background:var(--gold);border-color:var(--gold);color:#1A1411;font-weight:700}
.spanel{display:none}
.spanel.on{display:block;animation:spIn .55s cubic-bezier(.2,.7,.3,1)}
@keyframes spIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.spanel.on{animation:none}}

/* ---------- gạch nhỏ, huy hiệu ---------- */
.tag-sample{display:inline-flex;align-items:center;gap:6px;border:1px dashed rgba(217,140,122,.5);
  color:#D98C7A;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--display);padding:5px 10px}
.hr{height:1px;background:var(--hair);border:0;max-width:1240px;margin:0 auto}
.mini-note{font-size:12px;color:rgba(228,214,205,.4);line-height:1.6}

/* ---------- iframe 3D ---------- */
.embed-3d{position:relative;max-width:1240px;margin:0 auto;background:var(--ink);
  border:1px solid var(--hair)}
.embed-3d iframe{width:100%;height:min(78vh,720px);border:0;display:block}
.embed-3d .embed-hold{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(228,214,205,.4)}

/* ---------- zoom-out khi cuộn ---------- */
[data-zoom] img{will-change:transform}
.fx [data-zoom] img{transform:scale(1.07)}
.fx [data-zoom].zdone img{transform:scale(1)}

/* ---------- trang bài viết ---------- */
.article{max-width:760px;margin:0 auto}
.article p{color:var(--muted);font-size:16px;line-height:1.85;margin:0 0 22px}
.article h2{font-family:var(--vn);font-weight:600;color:#fff;font-size:clamp(16px,1.5vw,20px);margin:38px 0 16px}
.article figure{margin:34px calc(-1*clamp(0px,4vw,60px))}
.article figure img{width:100%;display:block}
.article figcaption{font-size:12px;color:rgba(228,214,205,.4);padding:10px 4px 0;letter-spacing:.04em}
.article blockquote{margin:32px 0;padding-left:22px;border-left:2px solid var(--gold);
  font-size:clamp(15px,1.35vw,18px);line-height:1.6;color:var(--cream);font-style:italic}
.meta-line{display:flex;gap:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-family:var(--display);color:rgba(228,214,205,.45);margin-bottom:18px}
.meta-line .c{color:var(--gold)}

/* ============================================================
   BỔ SUNG — nhịp sáng/tối, section kiểu mới, hiệu ứng cuộn
   Màu theo brand guideline: nâu #5C3629, vàng #CAA87B,
   chữ đậm #231B15, xám trung tính #555859.
   ============================================================ */
:root{
  --sand:#EDE4DA;      /* nền sáng ấm */
  --sand-2:#E2D6C8;    /* nền sáng đậm hơn */
  --rock:#231B15;      /* chữ trên nền sáng */
  --cloud:#555859;     /* chữ phụ trên nền sáng */
  --brown-d:#43281F;   /* nâu đậm */
}

/* ---------- section nền sáng ---------- */
.sec.light{background:var(--sand);color:var(--rock)}
.sec.light .sec-title,.sec.light h2,.sec.light h3,.sec.light .card-title{color:var(--rock)}
.sec.light .lede,.sec.light .card-text,.sec.light p{color:var(--cloud)}
.sec.light .eyebrow,.sec.light .card-kicker{color:#8A6A3E}
.sec.light .card{background:#fff;border-color:rgba(35,27,21,.12)}
.sec.light .card:hover{border-color:rgba(138,106,62,.55)}
.sec.light .split-list li{color:var(--cloud)}
.sec.light .split-list li::before{background:#8A6A3E}
.sec.light .split-list b{color:var(--rock)}
.sec.light .tbl thead th{color:#8A6A3E;border-bottom-color:rgba(35,27,21,.18)}
.sec.light .tbl tbody td{color:var(--rock);border-bottom-color:rgba(35,27,21,.1)}
.sec.light .tbl tbody td:first-child{color:var(--cloud)}
.sec.light .tbl tbody tr:hover td{background:rgba(35,27,21,.03)}
.sec.light .tbl .grp td{color:rgba(35,27,21,.45)}
.sec.light .mini-note{color:rgba(35,27,21,.5)}
.sec.light .btn-ghost{border-color:rgba(35,27,21,.25);color:var(--rock)}
.sec.light .btn-ghost:hover{border-color:#8A6A3E;color:#000}
.sec.light .hr{background:rgba(35,27,21,.14)}
.sec.light .stat .num{color:#8A6A3E}
.sec.light .stat .lbl{color:var(--cloud)}
.sec.light .stat .note{color:rgba(35,27,21,.42)}

/* ---------- section nền nâu thương hiệu ---------- */
.sec.brown{background:var(--brown);color:var(--cream)}
.sec.brown .eyebrow,.sec.brown .card-kicker{color:#E5C99A}
.sec.brown .sec-title,.sec.brown h2,.sec.brown h3{color:#fff}
.sec.brown .lede,.sec.brown p{color:rgba(228,214,205,.8)}
.sec.brown .split-list li{color:rgba(228,214,205,.82)}
.sec.brown .split-list li::before{background:#E5C99A}
.sec.brown .split-list b{color:#fff}
.sec.brown .btn-ghost{border-color:rgba(228,214,205,.32);color:var(--cream)}
.sec.brown .btn-ghost:hover{border-color:#E5C99A;color:#fff}

/* ---------- dải ảnh tràn viền ---------- */
.band{position:relative;min-height:min(76vh,660px);display:flex;align-items:center;
  padding:clamp(50px,7vw,110px) var(--pad);overflow:hidden}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.fx .band-bg img{transform:scale(1.12)}
.fx .band.zdone .band-bg img{transform:scale(1)}
.band-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,8,7,.90) 0%,rgba(10,8,7,.58) 18%,rgba(10,8,7,.14) 34%,
    rgba(10,8,7,0) 48%)}
.band.rightside .band-bg::after{background:linear-gradient(260deg,rgba(10,8,7,.90) 0%,rgba(10,8,7,.58) 18%,rgba(10,8,7,.14) 34%,
    rgba(10,8,7,0) 48%)}
.band-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%}
.band-copy{max-width:48ch}
/* Thẻ kính sau khối chữ: backdrop-filter giữ được chi tiết ảnh phía sau nên
   vẫn nhìn xuyên thấy, khác hẳn phủ đen thành mảng phẳng. Viền hairline và bo
   góc là thứ khiến mắt đọc ra "tấm kính"; bỏ chúng đi thì chỉ còn vệt bóng. */
.scrim,.band-copy{position:relative;isolation:isolate}
.scrim>*,.band-copy>*{position:relative;z-index:1}
.scrim::before,.band-copy::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-30px -40px -34px -40px;border-radius:22px;
  backdrop-filter:blur(22px) saturate(1.35) brightness(.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(.66);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(228,214,205,.16),0 26px 70px rgba(10,8,7,.45)}
@supports not (backdrop-filter:blur(1px)){
  .scrim::before,.band-copy::before{background:rgba(10,8,7,.62)}
}
/* chữ phụ đè lên ảnh dùng biến sáng hơn */
.band .lede,.bleed .lede{color:var(--muted-img)}
.band.rightside .band-copy{margin-left:auto}
.band h2{color:#fff}

/* ---------- hero sản phẩm ---------- */
.vhero{position:relative;height:min(100svh,940px);display:flex;align-items:flex-end;overflow:hidden;
  margin-top:-76px;padding:96px var(--pad) clamp(26px,4vh,54px)}
.vhero-bg{position:absolute;inset:0;z-index:0}
.vhero-bg img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.vhero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,7,.72) 0%,rgba(10,8,7,.12) 32%,rgba(10,8,7,.2) 58%,rgba(10,8,7,.95) 100%)}
.vhero-in{position:relative;z-index:3;max-width:1240px;margin:0 auto;width:100%}
.vh-kick{font-family:var(--display);font-size:clamp(10px,1.3vw,12px);letter-spacing:.32em;
  text-shadow:0 1px 2px rgba(10,8,7,.95),0 2px 14px rgba(10,8,7,.85);
  text-transform:uppercase;color:var(--gold);margin:0 0 clamp(14px,2vh,22px)}
.vh-name{font-family:var(--display);font-weight:700;color:#fff;margin:0;
  text-shadow:0 2px 4px rgba(10,8,7,.6),0 4px 26px rgba(10,8,7,.5);
  font-size:clamp(30px,3.9vw,56px);line-height:.98;letter-spacing:-.035em}
.vh-tag{font-family:var(--vn);font-weight:600;color:#fff;margin:clamp(10px,1.6vh,18px) 0 0;
  text-shadow:0 1px 2px rgba(10,8,7,.92),0 2px 18px rgba(10,8,7,.8);
  font-size:clamp(15px,1.35vw,18px);line-height:1.48;letter-spacing:-.012em;max-width:30ch}
.vh-sub{margin:clamp(10px,1.3vh,15px) 0 0;max-width:44ch;color:rgba(228,214,205,.94);
  text-shadow:0 1px 2px rgba(10,8,7,.92),0 2px 16px rgba(10,8,7,.78);
  font-size:clamp(14px,1.1vw,15.5px);line-height:1.62}
.vh-bar{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,54px);align-items:flex-end;
  margin-top:clamp(18px,2.6vh,34px);padding-top:clamp(15px,2vh,22px);
  border-top:1px solid rgba(228,214,205,.2)}
.vh-fig{display:flex;flex-direction:column}
.vh-fig .v{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(18px,1.9vw,26px);line-height:1;letter-spacing:-.015em}
.vh-fig .v small{font-size:.44em;font-weight:500;margin-left:3px;color:var(--gold)}
.vh-fig .k{font-size:11px;letter-spacing:.1em;color:rgba(228,214,205,.82);
  text-shadow:0 1px 2px rgba(10,8,7,.9);margin-top:7px;text-transform:uppercase}
.vh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
@media(max-width:820px){.vh-cta{margin-left:0;width:100%}.vh-cta .cta{flex:1;justify-content:center}}
.vh-scroll{position:absolute;right:clamp(20px,4vw,52px);bottom:14px;z-index:4;
  font-family:var(--display);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(228,214,205,.5);display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
.vh-scroll i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(196,159,112,.9),transparent);
  animation:scrollCue 2.1s ease-in-out infinite}
@keyframes scrollCue{0%{transform:scaleY(.25);transform-origin:top;opacity:.3}
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.25);transform-origin:bottom;opacity:.3}}

/* chữ hero lộ từng dòng */
.lineup{display:block;overflow:hidden}
.lineup>span{display:block;transition:transform 1.05s cubic-bezier(.16,.84,.28,1),opacity .9s ease}
.fx .lineup>span{transform:translateY(105%);opacity:0}
.fx .lineup.in>span{transform:none;opacity:1}
.lineup.d1>span{transition-delay:.08s}.lineup.d2>span{transition-delay:.16s}
.lineup.d3>span{transition-delay:.26s}.lineup.d4>span{transition-delay:.36s}

/* ---------- khối 3D nhúng thẳng (không iframe) ---------- */
.car3d{position:relative;min-height:min(88vh,780px);display:grid;
  grid-template-rows:1fr auto;padding:clamp(30px,4vw,54px) var(--pad) clamp(24px,3vw,40px)}
.car3d-stage{position:relative;cursor:grab;min-height:min(56vh,520px)}
.car3d-stage.dragging{cursor:grabbing}
.car3d-stage canvas{display:block;width:100%;height:100%;position:relative;z-index:2}
.car3d-glow{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:0;
  width:min(94%,960px);aspect-ratio:1/.44;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(196,159,112,.22) 0%,rgba(196,159,112,.07) 38%,transparent 72%)}
.car3d-shadow{position:absolute;left:0;top:0;z-index:1;pointer-events:none;will-change:transform;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.66) 0%,rgba(0,0,0,.28) 42%,transparent 72%);filter:blur(6px)}
.car3d-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:4;
  font-family:var(--display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(228,214,205,.34);transition:opacity .5s;pointer-events:none}
.car3d-hint.gone{opacity:0}
.car3d-load{position:absolute;inset:0;display:grid;place-items:center;z-index:5;text-align:center;
  transition:opacity .55s}
.car3d-load.gone{opacity:0;pointer-events:none}
.car3d-load p{margin:0;font-family:var(--display);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(228,214,205,.5)}
.car3d-load .bar{width:170px;height:1px;background:var(--hair);margin:13px auto 0;position:relative}
.car3d-load .bar i{position:absolute;inset:0 auto 0 0;background:var(--gold);width:0;transition:width .25s}
.car3d-ui{max-width:1240px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;
  gap:clamp(16px,2.4vw,34px);align-items:center;padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--hair)}
.c3-grp{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.c3-lbl{font-family:var(--display);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(228,214,205,.42)}
.c3-sw{display:flex;gap:8px}
.c3-sw button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(228,214,205,.2);
  padding:0;cursor:pointer;position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.c3-sw button:hover{transform:scale(1.14)}
.c3-sw button[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;
  border:1px solid var(--gold);border-radius:50%}
.c3-name{font-size:13px;color:#fff;min-width:120px}
.c3-btn{background:none;border:1px solid var(--hair);color:var(--cream);font:inherit;font-size:12.5px;
  padding:9px 15px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.c3-btn:hover{border-color:var(--gold-dim)}
.c3-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(196,159,112,.1)}
.c3-more{margin-left:auto;font-size:12.5px}
@media(max-width:900px){.c3-more{margin-left:0}.c3-name{min-width:0}}

/* ---------- khối dính: xe đứng yên, nội dung đổi ---------- */
.stickwrap{position:relative}
.stickwrap{--sh:min(calc(100svh - 122px),760px)}   /* 76px header + 46px thanh mục lục */
.stickpane{position:sticky;top:122px;height:var(--sh);display:grid;place-items:center;overflow:hidden}
.stickpane .sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s cubic-bezier(.2,.7,.3,1)}
.stickpane .sp-img.on{opacity:1}
.stickpane::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* thẻ kính sau khối chữ đã lo phần đọc chữ, nên dải này chỉ còn làm nền
     dịu bớt chứ không cần dìm hẳn nửa trái ảnh nữa */
  background:linear-gradient(90deg,rgba(10,8,7,.42) 0%,rgba(10,8,7,.26) 26%,rgba(10,8,7,.08) 44%,
    rgba(10,8,7,0) 56%)}
.sticksteps{position:relative;z-index:2;margin-top:calc(-1 * var(--sh))}
.stickstep{min-height:var(--sh);display:flex;align-items:center;padding:0 var(--pad);pointer-events:none}
.stickstep>div{position:relative;isolation:isolate;max-width:42ch;pointer-events:auto;transform:translateY(18px);
  transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.3,1)}
.fx .stickstep>div{opacity:.34}
.stickstep.on>div{opacity:1;transform:none}
.stickstep>div>*{position:relative;z-index:1}
.stickstep>div::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-28px -38px -32px -38px;border-radius:22px;
  backdrop-filter:blur(22px) saturate(1.35) brightness(.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(.66);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(228,214,205,.16),0 26px 70px rgba(10,8,7,.45)}
@supports not (backdrop-filter:blur(1px)){
  .stickstep>div::before{background:rgba(10,8,7,.62)}
}
.stickstep .n{font-family:var(--display);font-size:11px;letter-spacing:.26em;color:var(--gold);
  display:block;margin-bottom:12px}
.stickstep h3{font-family:var(--vn);font-weight:600;color:#fff;margin:0 0 12px;text-shadow:0 1px 2px rgba(10,8,7,.9),0 2px 18px rgba(10,8,7,.75);
  font-size:clamp(16px,1.5vw,20px);line-height:1.48;letter-spacing:-.012em;max-width:min(100%,540px)}
.stickstep p{color:rgba(228,214,205,.82);text-shadow:0 1px 2px rgba(10,8,7,.9),0 2px 18px rgba(10,8,7,.7);font-size:clamp(14px,1.5vw,16.5px);line-height:1.66;margin:0}
@media(max-width:760px){
  .stickwrap{--sh:52svh}
  .stickpane{top:122px}
  .stickstep{min-height:auto;padding-top:52svh;padding-bottom:44px}
  .stickstep>div{opacity:1;transform:none}
}

/* ---------- cuộn ngang cho thư viện chi tiết ---------- */
.hscroll{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:thin}
.hscroll::-webkit-scrollbar{height:3px}
.hscroll::-webkit-scrollbar-thumb{background:var(--gold-dim)}
.hs-item{flex:0 0 min(78vw,420px);scroll-snap-align:start}
.hs-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.hs-item .cap{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.5}
.hs-item .cap b{display:block;color:#fff;font-weight:600;margin-bottom:3px;font-size:14.5px}

/* ---------- thanh tiến độ đọc ---------- */
.readbar{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:101;width:0;
  transition:width .1s linear}

/* ---------- ảnh lộ theo khung ---------- */
.clipfx{transition:clip-path .85s cubic-bezier(.16,.84,.28,1)}
.fx .clipfx{clip-path:inset(0 0 100% 0)}
.fx .clipfx.in{clip-path:inset(0 0 0 0)}

/* ---------- neo mục lục trang sản phẩm ---------- */
.pagenav{position:sticky;top:76px;z-index:40;background:rgba(10,8,7,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair)}
.pagenav-in{max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,52px);
  display:flex;gap:clamp(14px,2.4vw,32px);overflow-x:auto;scrollbar-width:none}
.pagenav-in::-webkit-scrollbar{display:none}
.pagenav a{color:rgba(228,214,205,.6);text-decoration:none;font-size:12.5px;white-space:nowrap;
  padding:14px 0;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.pagenav a:hover{color:#fff}
.pagenav a.on{color:var(--gold);border-bottom-color:var(--gold)}
@media(prefers-reduced-motion:reduce){
  .lineup>span,.fx .lineup>span{transform:none;opacity:1}
  .vh-scroll i{animation:none}
  .clipfx,.fx .clipfx{clip-path:none}
  .band-bg img,.fx .band-bg img{transform:none}
  .fx [data-zoom] img{transform:none}
  .fx .stickstep>div{opacity:1}
}

/* hero: ken burns lúc vào trang + vignette cho chữ nổi */
.vhero-bg img{transform:scale(1.14);animation:kenburns 2.6s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes kenburns{to{transform:scale(1.1)}}
.vhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 78% 32%,transparent 30%,rgba(10,8,7,.55) 100%)}
.vhero-in{z-index:3}
@media(prefers-reduced-motion:reduce){.vhero-bg img{animation:none;transform:scale(1.1)}}

@media(max-height:720px){.vh-scroll{display:none}}

/* form và các thành phần khác khi đặt trên nền sáng */
.sec.light .field label{color:rgba(35,27,21,.55)}
.sec.light .field input,.sec.light .field select,.sec.light .field textarea{
  background-color:#fff;border-color:rgba(35,27,21,.2);color:var(--rock)}
.sec.light .field input:focus,.sec.light .field select:focus,.sec.light .field textarea:focus{border-color:#8A6A3E}
.sec.light .field select{background-image:linear-gradient(45deg,transparent 50%,#8A6A3E 50%),linear-gradient(135deg,#8A6A3E 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sec.light .form-note{color:rgba(35,27,21,.55);border-color:rgba(35,27,21,.22)}
.sec.light .form-ok{background:#fff;border-color:rgba(138,106,62,.45)}
.sec.light .form-ok .big{color:var(--rock)}
.sec.light .form-ok p{color:var(--cloud)}
.sec.light .fchip{border-color:rgba(35,27,21,.22);color:var(--rock)}
.sec.light .fchip:hover{border-color:#8A6A3E}
.sec.light .fchip[aria-pressed="true"]{border-color:#8A6A3E;background:rgba(138,106,62,.12);color:#000}
.sec.light .hs-item .cap{color:var(--cloud)}
.sec.light .hs-item .cap b{color:var(--rock)}
.sec.light .hscroll::-webkit-scrollbar-thumb{background:rgba(138,106,62,.5)}
.sec.light .tag-sample{border-color:rgba(180,90,60,.5);color:#A0522D}
.sec.light .acc,.sec.light .acc-item{border-color:rgba(35,27,21,.14)}
.sec.light .acc-q{color:var(--rock)}
.sec.light .acc-a-in{color:var(--cloud)}

/* thẻ ngang (tin ghim, xe còn lại): media phải có tỉ lệ cố định,
   nếu không ảnh dọc sẽ kéo thẻ cao vô tội vạ */
.card-media.wide{aspect-ratio:16/11}
@media(max-width:760px){.card-media.wide{aspect-ratio:16/10}}
/* bố cục cấu hình xe: giới hạn bề ngang để bảng chọn không bị đẩy
   ra sát mép trên màn hình rộng, tách rời khỏi chiếc xe */
.cfg{max-width:1560px;margin-left:auto;margin-right:auto}

/* ============================================================
   Bảng cấu hình xe — trước đây nằm riêng trong configurator.html,
   nay đưa vào đây để trang sinh từ build dùng được.
   ============================================================ */
.panel{border:1px solid var(--hair);background:var(--panel);
  padding-bottom:clamp(18px,2vw,24px);position:sticky;top:96px}
@media(max-width:1020px){.panel{position:static}}
.panel .tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.panel .tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:16px 6px;font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:color .25s,border-color .25s}
.panel .tab:hover{color:var(--cream)}
.panel .tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.panel .pane{display:none;padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) 0}
.panel .pane.on{display:block}
.panel .grpLbl{font-family:var(--display);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(228,214,205,.42);margin:0 0 14px}
.panel .opts+.grpLbl{margin-top:26px}
.panel .opts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.panel .sw{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);padding:0;
  cursor:pointer;position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.panel .sw:hover{transform:scale(1.1)}
.panel .sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;
  border:1px solid var(--gold);border-radius:50%}
.panel .swname{margin:14px 0 0;font-size:14px;color:#fff}
.panel .swname small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.panel .note{margin:22px 0 0;padding:13px 15px;border:1px solid var(--hair);
  font-size:12.5px;color:var(--muted);line-height:1.6}
.panel .note b{color:var(--cream);font-weight:600}
.panel .summary{margin:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) 0;padding-top:20px;
  border-top:1px solid var(--hair)}
.panel .summary .row{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:6px 0}
.panel .summary .row span:first-child{color:var(--muted)}
.panel .summary .row span:last-child{color:#fff;text-align:right}

/* Tên model và các nhãn luôn viết bằng tiếng Anh dùng Gotham */
.vh-name,.model-name,.card-kicker.en{font-family:var(--brand)}

/* ---------- trang about: hai khối nền ảnh và hàng giá trị ---------- */
.ab-manifesto,.ab-mission{position:relative;overflow:hidden;text-align:center;
  padding:clamp(72px,11vh,140px) var(--pad)}
.ab-mbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ab-manifesto::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 120% at 50% 40%,rgba(10,8,7,.60) 0%,rgba(10,8,7,.88) 100%)}
.ab-mission::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,8,7,.72) 0%,rgba(10,8,7,.5) 50%,rgba(10,8,7,.8) 100%)}
.ab-min{position:relative;z-index:2;max-width:760px;margin:0 auto}
.ab-min .eyebrow{margin-bottom:16px}
.ab-mark{font-family:var(--display);font-weight:700;color:var(--gold);margin:0 0 22px;
  font-size:clamp(18px,1.9vw,26px);letter-spacing:.02em}
.ab-min .lede{margin:0 auto;color:rgba(228,214,205,.94)}
.ab-mission h2{font-family:var(--vn);font-weight:700;color:#fff;margin:0 0 16px;
  font-size:clamp(16px,1.5vw,20px);line-height:1.48;letter-spacing:-.015em}
.ab-values{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(min-width:1100px){.ab-values{grid-template-columns:repeat(5,1fr)}}
.ab-val{border:1px solid var(--hair);background:var(--panel);
  padding:clamp(18px,2vw,26px);transition:border-color .35s,transform .35s,background .35s}
.ab-val:hover{border-color:var(--gold-dim);transform:translateY(-4px);background:var(--panel2)}
.ab-val .n{font-family:var(--display);font-size:12px;letter-spacing:.24em;color:var(--gold)}
.ab-val h3{font-family:var(--display);font-weight:700;color:#fff;margin:12px 0 10px;
  font-size:clamp(13px,1.15vw,15.5px);letter-spacing:.05em}
.ab-val p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted-img)}

/* ---------- ngắt dòng tiếng Việt ----------
   Tiếng Việt viết rời từng âm tiết, nên trình duyệt hay bỏ một âm tiết xuống
   dòng riêng ("tiềm / năng", "toàn / diện") — đọc lên dễ hiểu sai nghĩa.
   balance: chia đều các dòng cho tiêu đề và nhãn ngắn.
   pretty : không để dòng cuối trơ trọi một từ ở đoạn văn dài. */
h1,h2,h3,h4,.vh-name,.vh-tag,.card-title,.mtag em,.ab-mark,.stat .lbl,
.btn,.cta,.btn-ghost,button,.fchip,.stab,label,figcaption,.eyebrow,.crumbs{
  text-wrap:balance}
p,.lede,.card-text,.split-list li,.form-note,.acc-a,.article p{
  text-wrap:pretty}
/* nút ngắn thì giữ nguyên một dòng, chỉ xuống dòng khi thật sự không đủ chỗ */
.cta,.btn.pri,.sh-cta{overflow-wrap:normal}