/* Layout language measured from global.geely.com and geely.vn EX2 pages (24/10/2026):
   one-screen photo blocks, white text straight on the photo, ~8.4vw side margin, 40px headings,
   black buttons with 2px radius, thin top tab bar with back-to-top arrow, big stat numbers.
   Colours and measurements are our own values, not copied code. */
:root{
  --bg:#fff; --tint:#F2F3F5; --fg:#0A0A0A; --muted:#5B6470; --line:#DADDE2;
  --accent:#DC2626; --accent-d:#B91C1C; --blue:#1B4E9B;
  --side:clamp(16px,8.4vw,150px); --edge:max(var(--side), calc((100vw - 1240px) / 2)); --pad:clamp(56px,7vw,104px); --bar:56px; --dock:0px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar);scrollbar-width:thin;scrollbar-color:#9AA1AB transparent}
html::-webkit-scrollbar{width:6px} html::-webkit-scrollbar-thumb{background:#9AA1AB;border-radius:3px} html::-webkit-scrollbar-track{background:transparent}
body{margin:0;font:400 16px/1.5 var(--font);color:var(--fg);background:var(--bg);padding-bottom:var(--dock);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0 0 .5em;line-height:1.1}
h1,h2{text-transform:uppercase}
h2{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:.01em}
p{margin:0 0 .7em}
a{color:inherit}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;left:8px;top:8px;background:#fff;padding:8px;z-index:50}
:focus-visible{outline:3px solid #2563EB;outline-offset:2px}
.muted{color:var(--muted)} .note{font-size:12.5px;color:var(--muted)} .lead{font-size:18px}
.kicker{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;opacity:.9}
.kicker--d{color:var(--blue);opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 31px;border-radius:2px;border:1px solid transparent;font:600 15px var(--font);text-decoration:none;cursor:pointer;color:#fff;transition:background .2s,color .2s,border-color .2s}
.btn--dark{background:#000} .btn--dark:hover{background:#262626}
.btn--accent{background:var(--accent)} .btn--accent:hover{background:var(--accent-d)}
.btn--ghost{background:transparent;border-color:#fff} .btn--ghost:hover{background:#fff;color:#000}
.btn--ghost-d{background:transparent;border-color:#000;color:#000} .btn--ghost-d:hover{background:#000;color:#fff}
.btn--sm{min-height:44px;padding:0 20px;font-size:14px} .btn--block{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* top bar: logo image, section tabs, black button, back-to-top arrow */
.topbar{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--edge);height:var(--bar)}
.brand{display:flex;align-items:center;min-height:44px;justify-self:start} .brand img{height:15px;width:auto}
.topnav{display:none;gap:30px;font-size:15px}
.topnav a{text-decoration:none;color:#222;padding:6px 0} .topnav a:hover{text-decoration:underline;text-underline-offset:6px}
.topnav a.on{font-weight:700}

/* one-screen blocks: height = what Chrome shows under the bar (minus the phone dock) */
.vh{position:relative;height:calc(100svh - var(--bar) - var(--dock));min-height:440px;overflow:hidden}
[data-snap]{scroll-snap-align:start}
@supports (scroll-snap-type:y proximity){html{scroll-snap-type:y proximity}}

.chip{display:inline-block;border:1px solid #fff;border-radius:999px;padding:4px 14px;font-weight:600;font-size:13px;margin:0}
.chip--d{border-color:#000}

/* big numbers */
.li--zap{-webkit-mask-image:url(icons/zap.svg);mask-image:url(icons/zap.svg)}
.li--users{-webkit-mask-image:url(icons/users.svg);mask-image:url(icons/users.svg)}
.li--car{-webkit-mask-image:url(icons/car.svg);mask-image:url(icons/car.svg)}
.li--camera{-webkit-mask-image:url(icons/camera.svg);mask-image:url(icons/camera.svg)}
.li--chevron-down{-webkit-mask-image:url(icons/chevron-down.svg);mask-image:url(icons/chevron-down.svg)}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px}
.stats li{display:flex;flex-direction:column}
.stats__n{font-size:clamp(34px,5vw,64px);font-weight:700;line-height:1;letter-spacing:-.02em}
.stats__n small{font-size:.38em;font-weight:600;letter-spacing:0;margin-left:6px}
.stats__l{font-size:14px;color:var(--muted);margin-top:6px}
.stats--light .stats__l{color:rgba(255,255,255,.88)}
.band{padding:36px var(--edge)} .band--tint{background:var(--tint)}
.band .stats{grid-template-columns:repeat(2,1fr)}
.stats--big .stats__n{font-size:clamp(44px,7vw,96px)}

.sec{padding:var(--pad) var(--edge)} .sec--tint{background:var(--tint)}
.split{display:grid;gap:36px}
.offer{padding-left:20px;margin:0 0 14px;font-size:18px} .offer li{margin:6px 0}
.fld{display:block;font-weight:600;font-size:14px;margin:14px 0 6px} .fld output{float:right;font-weight:700}
input[type=range]{width:100%;accent-color:#000;height:32px}
.calc__res{font-size:16px;margin-top:18px} .calc__res strong{font-size:clamp(32px,4vw,52px);display:block;line-height:1.1;font-weight:700}

/* photo slider: full width, loops, caption straight on the photo */
.show{background:#000;color:#fff}
.slider{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;height:100%;margin:0;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after,.show--static::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none}
.slide figcaption{will-change:transform,opacity;position:absolute;z-index:2;left:var(--edge);right:var(--edge);bottom:clamp(40px,8vh,80px);max-width:640px}
.slide h2,.show__txt h2{margin:0 0 .3em;font-size:clamp(26px,3.6vw,48px);text-shadow:0 2px 18px rgba(0,0,0,.4)}
.slide p,.show__txt p{margin:0;font-size:clamp(15px,1.4vw,18px);color:rgba(255,255,255,.95)}
.slider__ctl{position:absolute;right:var(--edge);bottom:clamp(40px,8vh,80px);display:none;gap:8px;z-index:3}
.ico{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);color:#fff;font-size:24px;cursor:pointer}
.ico:hover{background:#fff;color:#000}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:3}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)} .dots i.on{background:#fff}
.show--static .show__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show__txt{position:absolute;z-index:2;left:var(--edge);right:var(--edge);bottom:clamp(24px,6vh,64px);max-width:760px}

/* split panes: photo on one side, text on the other, one screen tall */
.pane{display:grid;grid-template-rows:42% 58%;background:#fff}
.pane__img{position:relative;overflow:hidden;background:var(--tint)}
.pane__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pane__txt{padding:22px var(--edge);overflow:auto}
.pane__txt h2{margin-bottom:.4em}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.items__n{font-weight:700;color:var(--blue);min-width:28px} .items b{display:block} .items p{margin:2px 0 0;color:var(--muted);font-size:14.5px}
.stats--2{grid-template-columns:repeat(2,1fr);margin-top:16px}

.facts{display:grid;gap:0;margin:0}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid #C5C9D0}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600;text-align:right}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{margin:0}
.card img{width:100%;aspect-ratio:14/15;object-fit:cover;background:var(--tint)}
.card figcaption{padding:12px 0} .card b{display:block} .card span{color:var(--muted);font-size:14px}

.paint{background:var(--tint);padding:var(--pad) var(--edge)}
.paint__in{display:grid;gap:28px;align-items:center}
.colors__pick{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.dot{width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;position:relative;padding:0}
.dot::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.dot[aria-pressed=true]::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid #000}
.colors__name{font-weight:600;margin-bottom:18px}
.colors__img{width:100%;max-width:980px;justify-self:center}
.specs{border-top:1px solid #C5C9D0;max-width:440px}
.specs summary{min-height:52px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.specs table{width:100%;border-collapse:collapse;margin-bottom:8px}
.specs th{text-align:left;font-weight:400;color:var(--muted);width:46%}
.specs th,.specs td{padding:8px 0;border-top:1px solid #D5D8DE;font-size:14px}

.enq{padding:var(--pad) var(--edge);background:#8DB7E2 url(team/bg-tvbh.webp) center bottom/cover no-repeat}
.enq .split{gap:20px;align-items:stretch}
.form{margin:0;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(22px,3vw,40px);border-radius:2px}
.form h2,.form .fld,.form .chk{color:#0A0A0A}
.enq .map{min-height:300px;border-radius:2px;box-shadow:0 6px 28px rgba(0,0,0,.18)}
.form input:not([type]),.form input[type=text],.form input[type=tel]{width:100%;min-height:50px;border:1px solid #8A9099;border-radius:2px;padding:0 14px;font:400 16px var(--font);background:#fff}
.seg{border:0;padding:0;margin:0 0 6px;display:flex;gap:8px} .seg label{flex:1}
.seg input{position:absolute;opacity:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #8A9099;border-radius:2px;font-weight:600;cursor:pointer}
.seg input:checked+span{background:#000;color:#fff;border-color:#000} .seg input:focus-visible+span{outline:3px solid #2563EB;outline-offset:2px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:16px 0 4px} .chk input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:#000}
.err{color:#B91C1C;font-size:13px;margin:4px 0 0} .err:empty{display:none}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form__msg{margin-top:14px;padding:12px 14px;border-radius:2px;background:var(--tint)} .form__msg a{font-weight:700}

/* adviser + handover gallery, then dealer + map: two equal columns on the same edges */
.duo{display:grid;gap:36px;align-items:stretch}
.duo__l{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.person{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:start}
.person__img{width:104px;height:104px;border-radius:50%;object-fit:cover}
.person__img--ph{display:flex;align-items:center;justify-content:center;background:#fff;border:2px dashed #9AA1AB;color:var(--muted);font-size:12px;text-align:center;padding:10px}
.gal{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#fff}
.gal .slider{height:100%}
.gal .slide::after{display:none}
.gal .slider__ctl{display:flex;right:12px;bottom:12px}
.gal .dots{bottom:16px}
.dealer{border-top:1px solid #C5C9D0;padding-top:28px}
.dealer__info{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:start}
.dealer__logo{width:88px;height:auto;margin:6px 8px 0}
.dealer h3{font-size:22px;font-weight:700;text-transform:uppercase;margin:0 0 6px}
.dealer__tier{color:#2D3FE0;font-weight:700;margin:0 0 6px;text-transform:uppercase}
.dealer__line{margin:0 0 4px;color:#333} .dealer__line a{text-decoration:none}
.map{position:relative;min-height:300px;background:var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* footer (modelled on geely.vn: soft gradient, logo, columns, round social icons) */
.foot{background:linear-gradient(100deg,#DDEFF2 0%,#CDD4F4 50%,#F3D5DA 100%);padding:48px var(--edge) 24px;color:#111}
.foot__in{display:grid;gap:32px;align-items:start}
.foot__logos{display:flex;align-items:center;gap:clamp(14px,1.5vw,20px);flex-wrap:nowrap;margin:0 0 12px;height:24px}
.foot__logos img{height:clamp(14px,1.25vw,18px);width:auto;flex:none}
.foot__brand p{max-width:420px;font-size:14px;line-height:1.5;margin:0}
.foot__col{display:flex;flex-direction:column}
.foot__body{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.foot h3{font-size:14px;font-weight:700;text-transform:uppercase;margin:0 0 12px;height:24px;display:flex;align-items:center}
.foot__col a{display:block;margin:0 0 10px;padding:0;font-size:14px;font-weight:400;line-height:1.5;text-transform:none;text-decoration:none}
.foot__col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot__col p{margin:0 0 10px;font-size:14px;line-height:1.5}
.foot__tel{margin:0 0 12px} .foot__col .foot__tel a{display:inline;margin:0;font-size:20px;font-weight:700}
.li{display:inline-block;width:22px;height:22px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:none}
.li--l{width:18px;height:18px;margin-right:8px}
.li--arrow-up{-webkit-mask-image:url(icons/arrow-up.svg);mask-image:url(icons/arrow-up.svg)}
.li--chevron-left{-webkit-mask-image:url(icons/chevron-left.svg);mask-image:url(icons/chevron-left.svg)}
.li--chevron-right{-webkit-mask-image:url(icons/chevron-right.svg);mask-image:url(icons/chevron-right.svg)}
.li--arrow-right{-webkit-mask-image:url(icons/arrow-right.svg);mask-image:url(icons/arrow-right.svg)}
.li--copyright{-webkit-mask-image:url(icons/copyright.svg);mask-image:url(icons/copyright.svg)}
.li--phone{-webkit-mask-image:url(icons/phone.svg);mask-image:url(icons/phone.svg)}
.li--navigation{-webkit-mask-image:url(icons/navigation.svg);mask-image:url(icons/navigation.svg)}
.ico{display:grid;place-items:center;padding:0}
.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#000;transition:transform .2s,background .2s}
.social a:hover{background:#262626;transform:translateY(-2px)}
.si{display:block;width:22px;height:22px;background:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.si--facebook{-webkit-mask-image:url(icons/facebook.svg);mask-image:url(icons/facebook.svg)} .si--tiktok{-webkit-mask-image:url(icons/tiktok.svg);mask-image:url(icons/tiktok.svg)} .si--zalo{-webkit-mask-image:url(icons/zalo.svg);mask-image:url(icons/zalo.svg)}
.si--youtube{-webkit-mask-image:url(icons/youtube.svg);mask-image:url(icons/youtube.svg)} .si--instagram{-webkit-mask-image:url(icons/instagram.svg);mask-image:url(icons/instagram.svg)}
.foot__legal{margin:28px 0 0;padding-top:16px;border-top:1px solid rgba(0,0,0,.2);font-size:12.5px;color:#444}


[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1;transform:none}.slider{scroll-behavior:auto}.btn{transition:none}}

@media (min-width:768px){
  .topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--edge);height:var(--bar)}
  .brand img{height:18px}
            .slider__ctl{display:flex}
  .band .stats{grid-template-columns:repeat(4,1fr)}
  .stats--big{grid-template-columns:repeat(4,1fr)}
  .split,.duo{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
  .gal{aspect-ratio:auto;height:100%;min-height:480px}
  .pane{grid-template-rows:none;grid-template-columns:1.1fr 1fr}
  .pane--rev .pane__img{order:2}
  .pane__txt{display:flex;flex-direction:column;justify-content:center;padding:32px var(--edge) 32px clamp(32px,5vw,80px)}
  .pane--rev .pane__txt{padding:32px clamp(32px,5vw,80px) 32px var(--edge)}
  .paint__in{grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:48px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .map{min-height:340px}
  .enq .split{gap:24px}
  .enq .map{min-height:0}
  .foot__in{grid-template-columns:1.9fr .75fr 1.7fr 1fr;gap:28px;align-items:stretch}
  .foot__brand{display:flex;flex-direction:column;justify-content:space-between}
}
@media (min-width:1000px){
  .topnav{display:flex} .brand{margin-right:auto}
}

.wrap{max-width:none}
.social .li{background:#fff;width:22px;height:22px}
.foot__body>*:last-child{margin-bottom:0}
.foot__body>p:last-child{margin-bottom:0}

[hidden]{display:none!important}
.li--headset{-webkit-mask-image:url(icons/headset.svg);mask-image:url(icons/headset.svg)}
.fab{position:fixed;right:0;top:63%;z-index:40}
.fab__btn{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:2px 0 0 2px;background:var(--accent);color:#fff;cursor:pointer;transition:background .2s}
.fab__btn:hover{background:var(--accent-d)}
.fab__menu{position:absolute;right:56px;top:0;display:flex;flex-direction:column;gap:8px;width:max-content;max-width:calc(100vw - 72px);visibility:hidden;pointer-events:none;transition:visibility 0s linear .35s}
.fab.open .fab__menu{visibility:visible;pointer-events:auto;transition-delay:0s}
.fab__menu .btn{opacity:0;transform:translateX(22px) scale(.96);transition:opacity .3s ease,transform .42s cubic-bezier(.2,.8,.2,1)}
.fab.open .fab__menu .btn{opacity:1;transform:none}
.fab.open .fab__menu .btn:nth-child(2){transition-delay:.07s}
@media (prefers-reduced-motion:reduce){.fab__menu .btn{transition:none;transform:none}}
.fab__menu .btn{white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.btn--zalo{background:#0068FF} .btn--zalo:hover{background:#0050CC}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(92vw,460px);padding:12px 16px;border-radius:2px;background:#000;color:#fff;font-size:14px;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.35)}

/* ---------- POSTER (modelled on the dealer app's customer screen) ----------
   One screen, photo full-bleed, text straight on the photo in two blocks (top / bottom),
   photos cross-fade with a slow zoom, text enters block by block. Phone: photo on top, text below. */
.po{position:relative;background:#0b1020;color:#fff;overflow:hidden;touch-action:pan-y}
.po__img{position:relative;aspect-ratio:16/9;background:#0b1020}
.po__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease-in-out;will-change:opacity,transform;backface-visibility:hidden;filter:brightness(1.07) saturate(1.14)}
.po__img img.on{opacity:1;transition-delay:.25s;animation:poZoom 10s ease-out both}
.po__img img.out{opacity:0;animation:poZoom 10s ease-out both}
@keyframes poZoom{from{transform:scale(calc(var(--z,1) * 1.07))}to{transform:scale(var(--z,1))}}
.po__img img{transform-origin:var(--o,50% 50%)}
/* phone: photo sits above the text, so no push to the right */
@media (max-width:767px){.po__img img{--z:1!important;--o:50% 50%!important}}
.po__khung{position:static;display:flex;flex-direction:column;gap:22px;padding:20px var(--edge) 70px;background:#0b1020}
.po__tren,.po__duoi{display:flex;flex-direction:column;gap:12px}
.po__tren>*,.po__duoi>*{margin:0}
.po__tren>:nth-child(1){animation-delay:.08s}.po__tren>:nth-child(2){animation-delay:.14s}.po__tren>:nth-child(3){animation-delay:.2s}.po__tren>:nth-child(4){animation-delay:.26s}.po__tren>:nth-child(5){animation-delay:.32s}.po__tren>:nth-child(6){animation-delay:.38s}
.po__duoi>:nth-child(1){animation-delay:.44s}.po__duoi>:nth-child(2){animation-delay:.5s}.po__duoi>:nth-child(3){animation-delay:.56s}
@keyframes poVao{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes poUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes poRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes poDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.po__ten{display:flex;align-items:center;gap:.22em;font-size:clamp(46px,14vw,78px);font-weight:800;letter-spacing:-2px;line-height:.98;text-transform:none}
.po__wm{height:.5em;width:auto;flex:none}
.po__bt{position:absolute;z-index:3;width:clamp(54px,15vw,64px);height:auto;right:14px;top:14px;opacity:.95;pointer-events:none}
.po__kh{font-size:clamp(17px,4.5vw,24px);font-weight:500;font-style:italic;letter-spacing:.04em;color:#fff}
.po__phu{font-size:clamp(15px,3.6vw,19px);color:#dbe3f5;font-weight:500}
.po__lon b{display:block;font-size:clamp(32px,9vw,56px);line-height:1;letter-spacing:-2px;font-weight:800}
.po__lon small{display:block;font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#c6d1e8;font-weight:700;margin-top:7px}
.po__ban{display:flex;gap:9px;flex-wrap:wrap}
.po__ban button{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;min-height:44px;padding:0 18px;border-radius:22px;color:#e6ecfa;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);transition:background .25s,color .25s,border-color .25s}
.po__ban button[aria-pressed=true]{background:rgba(255,255,255,.9);color:#101828;border-color:transparent}
.po__ts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;max-width:520px}
.po__o{display:flex;gap:12px;align-items:flex-start}
.po__o .li{width:24px;height:24px;margin-top:3px;background:#a8bcf5}
.po__o small{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#cfd9ef;font-weight:700}
.po__o b{display:block;font-size:clamp(16px,4.2vw,21px);font-weight:700;line-height:1.3}
.po__gia{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.po__gia small{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#c6d1e8;font-weight:700;margin:0}
.po__gia b{font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:-1px}
.po__gia i{display:block;font-style:normal;font-size:14px;color:#c6d1e8;margin-top:4px}
.po__nut{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.po__nut a{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);transition:background .2s,transform .15s}
.po__nut a:hover{background:rgba(255,255,255,.2)} .po__nut a:active{transform:scale(.97)}
.po__sau,.po__xuong{position:absolute;z-index:3;display:grid;place-items:center;padding:0;width:48px;height:48px;border-radius:50%;cursor:pointer;color:#fff;background:rgba(10,14,26,.36);border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.po__sau .li,.po__xuong .li{width:26px;height:26px}
.po__sau{right:14px;top:calc((100vw * 9 / 16) / 2 - 24px)}
.po__xuong{display:none}
/* phone: keep the poster to one screen; the four spec tiles repeat the numbers right below */
@media (max-width:767px){.po__ts,.po__phu{display:none}.po__khung{gap:16px;padding-bottom:44px}}
@media (prefers-reduced-motion:reduce){.po__img img.on{animation:none}.po__img img{transition:none}.po__tren>*,.po__duoi>*{animation:none}}
@media (min-width:768px){
  .po__img{position:absolute;inset:0;aspect-ratio:auto}
  .po__img::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,12,24,.3) 0%,rgba(8,12,24,.22) 34%,rgba(8,12,24,.08) 58%,rgba(8,12,24,0) 76%)}
  .po__img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,12,24,.31) 0%,rgba(8,12,24,.09) 22%,rgba(8,12,24,0) 42%)}
  .po__khung{position:absolute;inset:0;z-index:2;background:none;justify-content:space-between;gap:0;padding:clamp(24px,4.5vh,48px) var(--edge) 88px;max-width:min(58%,780px);text-shadow:0 1px 8px rgba(16,24,44,.34),0 0 1px rgba(16,24,44,.3);pointer-events:none}
  .po__khung button,.po__khung a{pointer-events:auto}
  .po__tren,.po__duoi{gap:clamp(10px,1.6vh,20px)}
  .po__wm{height:.58em}
  .po__ten{font-size:clamp(46px,6vw,92px)}
  .po__sau{top:50%;margin-top:-24px;right:clamp(12px,2vw,26px)}
  .po__xuong{display:grid;left:50%;margin-left:-24px;bottom:clamp(12px,2.2vh,26px);animation:poNhay 2.4s ease-in-out infinite}
}
@keyframes poNhay{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (min-width:768px) and (prefers-reduced-motion:reduce){.po__xuong{animation:none}}
@media (min-width:768px) and (max-height:780px){
  .po__khung{padding-top:20px;padding-bottom:72px}
  .po__ten{font-size:clamp(38px,5vw,64px)}
  .po__lon b{font-size:clamp(26px,3.6vw,44px)}
  .po__o b{font-size:18px} .po__gia b{font-size:clamp(22px,2.6vw,32px)}
  .po__nut a{min-height:44px;font-size:15px}
}
.po.vh{height:auto;min-height:0}
@media (min-width:768px){.po.vh{height:calc(100svh - var(--bar));min-height:520px;max-height:1000px}}

/* gentle slide-in for text blocks and stat rows as they scroll into view (transform + opacity only) */
[data-reveal="l"]{transform:translateX(-34px)}
[data-reveal="r"]{transform:translateX(34px)}

/* poster numbers: the row that used to sit under the poster now lives inside it */
.po__so{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;max-width:560px}
.po__so .stats__n{font-size:clamp(22px,6.4vw,28px);letter-spacing:-1px}
.po__so .stats__n small{font-size:.5em;margin-left:3px}
.po__so .stats__l{font-size:11px;line-height:1.3;color:#cfd9ef;margin-top:5px}
@media (min-width:768px){
  .po__so .stats__n{font-size:clamp(28px,3vw,44px)}
  .po__so .stats__l{font-size:12.5px}
}
@media (min-width:768px) and (max-height:780px){.po__so .stats__n{font-size:clamp(24px,2.6vw,34px)}}

.show__note{margin-top:10px!important;font-size:14px!important;font-weight:600;letter-spacing:.02em;opacity:.95}
.po__phai{display:flex;flex-direction:column;gap:12px}
@media (min-width:768px){
  /* bottom of the poster split in two: numbers on the left, price and buttons on the right */
  .po__khung{max-width:none;right:0}
  .po__tren{max-width:min(58%,780px)}
  .po__duoi{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
  .po__so{flex:0 1 560px}
  .po__phai{flex:0 0 min(440px,38%);align-items:stretch;gap:clamp(10px,1.6vh,18px)}
  .po__gia{justify-content:flex-end}
    .po__img::before{background:linear-gradient(0deg,rgba(8,12,24,.36) 0%,rgba(8,12,24,.12) 24%,rgba(8,12,24,0) 42%)}
}

@media (prefers-reduced-motion:reduce){.po__duoi>.po__so,.po__duoi>.po__phai,.po__bt{animation:none}}
@media (min-width:768px){
  /* emblem: top-right corner, level with GEELY EX2; clusters sit closer to the bottom edge */
  .po__bt{position:absolute;right:var(--edge);left:auto;bottom:auto;margin:0;width:clamp(72px,6vw,96px);top:calc(clamp(24px,4.5vh,48px) + clamp(46px,6vw,92px) * .49 - clamp(72px,6vw,96px) / 6.8)}
  .po__khung{padding-bottom:clamp(18px,3.4vh,34px)}
  .po__xuong{bottom:clamp(10px,1.8vh,20px)}
}
@media (min-width:768px) and (max-height:780px){
  .po__bt{top:calc(20px + clamp(38px,5vw,64px) * .49 - clamp(72px,6vw,96px) / 6.8)}
  .po__khung{padding-bottom:18px}
}

/* blocks that slide in from the right start outside the screen; never let that create a sideways scroll */
body{overflow-x:clip}

/* version choice and price lines in the offers block */
.ver{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
.ver button{font:inherit;font-weight:600;font-size:15px;cursor:pointer;min-height:44px;padding:0 22px;border-radius:22px;color:#0A0A0A;background:#fff;border:1px solid #8A9099;transition:background .2s,color .2s,border-color .2s}
.ver button[aria-pressed=true]{background:#000;color:#fff;border-color:#000}
.pl{margin:0 0 18px}
.pl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.pl div:last-child{border-bottom:1px solid var(--line)}
.pl dt{color:var(--muted)} .pl dd{margin:0;font-weight:700}
.pl__big{font-size:clamp(24px,2.8vw,34px)}

/* poster entrance: top-left block from the left, numbers from below, price and buttons from the right, emblem from above;
   each cluster starts at its own moment. Replays whenever the poster comes back into view. */
.js .po__tren>*,.js .po__duoi>*,.js .po__bt{opacity:0}
.po--on .po__tren>*{animation:poVao .85s cubic-bezier(.2,.7,.2,1) both}
.po--on .po__tren>:nth-child(1){animation-delay:.1s}
.po--on .po__tren>:nth-child(2){animation-delay:.32s}
.po--on .po__bt{animation:poDown .85s cubic-bezier(.2,.7,.2,1) .5s both}
.po--on .po__duoi>.po__so{animation:poUp .85s cubic-bezier(.2,.7,.2,1) .7s both}
.po--on .po__duoi>.po__phai{animation:poRight .85s cubic-bezier(.2,.7,.2,1) .95s both}
@media (prefers-reduced-motion:reduce){.js .po__tren>*,.js .po__duoi>*,.js .po__bt{opacity:1}.po--on .po__tren>*,.po--on .po__bt,.po--on .po__duoi>*{animation:none}}

/* on narrower screens the numbers row reaches the middle, so the down arrow would sit on top of it */
@media (min-width:768px) and (max-width:1099px){.po__xuong{display:none}}

.topbar .btn{grid-column:3;justify-self:end}
.totop{position:fixed;right:0;bottom:14px;z-index:35;display:grid;place-items:center;width:40px;height:40px;border-radius:2px 0 0 2px;background:#0A0A0A;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.totop.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop:hover{background:#2B2B2B}
.totop .li{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.totop{transition:none;transform:none}}

/* phone: the black button was far taller than the logo; slim it and keep the touch area with an invisible margin */
@media (max-width:767px){
  .topbar .btn{position:relative;min-height:34px;padding:0 15px;font-size:13px;border-radius:2px}
  .topbar .btn::after{content:"";position:absolute;inset:-8px -6px}
  .brand img{height:17px}
}

/* money never breaks across two lines, the label gives way instead */
.pl dd{white-space:nowrap}
.pl dt{min-width:0}

/* one short note and the quote button close the offers + instalment block, on every device */
.uu-foot{display:flex;flex-direction:column;gap:16px;margin-top:clamp(16px,2.4vw,28px)}
.uu-foot .note{margin:0;max-width:640px}
.uu-foot .btn{align-self:stretch}
@media (min-width:768px){.uu-foot{flex-direction:row;justify-content:space-between;align-items:center;gap:32px}.uu-foot .btn{align-self:auto;flex:none}}

.sub{margin:22px 0 4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* warranty numbers live under the offers (left column), three in a row */
.war{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin-bottom:6px}
.war .stats__n{font-size:clamp(30px,3.4vw,46px)}
.war .stats__l{font-size:13px;line-height:1.35}

.sub span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:4px}

/* back-to-top: small and quiet. Sizes are 50% (desktop) and 75% (phone) of the old 40px; background at 30% */
.totop{width:20px;height:20px;bottom:14px;background:rgba(10,10,10,.3);color:#fff;border-radius:2px 0 0 2px}
.totop:hover{background:rgba(10,10,10,.55)}
.totop .li{width:12px;height:12px;filter:drop-shadow(0 0 1px rgba(0,0,0,.55))}
.totop::after{content:"";position:absolute;inset:-14px -4px -14px -14px}   /* the tap area stays comfortable */
@media (max-width:767px){.totop{width:30px;height:30px}.totop .li{width:16px;height:16px}}

/* slider arrows sit on the left and right edges, vertically centred, on phones too */
.slider__ctl,.gal .slider__ctl{position:absolute;inset:0;z-index:3;display:block!important;pointer-events:none}
.slider__ctl .ico{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;pointer-events:auto}
.slider__ctl .ico:first-child{left:clamp(8px,1.6vw,24px)}
.slider__ctl .ico:last-child{right:clamp(8px,1.6vw,24px)}

/* slide captions: one-line title, readable sizes, short text kept to two lines */
.slide .kicker{font-size:clamp(14px,1.25vw,18px);margin-bottom:8px}
.slide h2{font-size:clamp(18px,2.5vw,36px);white-space:nowrap;margin-bottom:.35em}
.slide figcaption{max-width:min(760px,calc(100% - 2 * var(--edge)))}
.slide figcaption p{text-wrap:balance;font-size:clamp(15px,1.3vw,18px)}

/* drive + space share one block: two panes side by side, arrow moves to the next one (photo 60%, text 40%) */
.ds{background:var(--tint);height:auto;min-height:0;overflow:visible;position:relative}
.ds__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ds__track::-webkit-scrollbar{display:none}
.ds__pane{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;min-width:0}
.drive__img{order:-1;aspect-ratio:16/10;background:#dfe6ec;overflow:hidden;position:relative}
.drive__img img{width:100%;height:100%;object-fit:cover;object-position:38% center;display:block}
.drive__txt{padding:var(--pad) var(--edge) 12px}
.ds .stats{grid-template-columns:repeat(3,1fr);margin:24px 0;gap:16px 10px}
.ds .stats:has(li:nth-child(4)){grid-template-columns:repeat(2,1fr)}
.ds .stats__n{font-size:clamp(30px,8vw,56px)}
.ds .stats__l{font-size:13px}
.ds .lead{max-width:560px}
.ds__ctl{display:flex;align-items:center;gap:14px;padding:4px var(--edge) var(--pad);font-weight:600;font-size:18px}
.ds__next{width:44px;height:44px;border:1px solid #9aa3ad;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit}
.ds__next:hover{background:#fff}
@media (min-width:768px){
  .ds{height:calc(100svh - var(--bar) - var(--dock));min-height:480px;overflow:hidden}
  .ds__track{height:100%}
  .ds__pane{display:grid;grid-template-columns:60fr 40fr;height:100%}
  .drive__img{order:0;aspect-ratio:auto}
  .drive__txt{display:flex;flex-direction:column;justify-content:center;grid-column:2;grid-row:1;padding:32px clamp(32px,4vw,64px) 96px;max-width:620px;margin:0 auto;width:100%}
  .drive__img{grid-column:1;grid-row:1}
  .ds .stats__n{font-size:clamp(36px,3.6vw,56px)}
  .ds__ctl{position:absolute;left:60%;right:0;bottom:36px;padding:0;justify-content:center}
}

/* photos fade in once loaded; the block shows a soft colour meanwhile (slow networks) */
.slide{background:#cdd5db}
.show--static{background:#2a3440}
.slide img,.show__bg,.pane__img img,.drive__img img,.card img,.gal img{transition:opacity .7s ease}
img.ld{opacity:0}

/* curtain: full-screen blocks stay pinned while the next block slides up over them (scrolling down and up).
   Taller-than-screen blocks (phone) are left out. The proximity snap is dropped, it fights the pinning. */
main>section{position:relative;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:none}
  #hero,#thiet-ke,#noi-that,#an-toan{position:sticky;top:var(--bar)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  #van-hanh,#cong-nghe,#pin{position:sticky;top:var(--bar)}
}

/* spec numbers: number and unit on one line, the caption centred under them */
.stats:not(.po__so) li{justify-self:start;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;text-align:left}
.stats:not(.po__so) .stats__l{margin-top:0}

/* one type scale for the text panels (Vận hành, Không gian, Công nghệ, Pin): same title, body, number and spacing */
.ds h2,.pane__txt h2{font-size:clamp(22px,1.9vw,30px);line-height:1.15;margin:0 0 .5em;text-wrap:balance}
.ds .lead,.pane__txt>p,.items p{font-size:clamp(15px,1.1vw,17px);line-height:1.55;text-wrap:pretty;max-width:none}
.items p{font-size:clamp(14px,1vw,15.5px);margin:2px 0 0}
.items b{font-size:clamp(15px,1.1vw,17px)}
.items li{padding:11px 0}
.ds .stats,.pane__txt .stats{margin:22px 0;gap:18px 12px}
.ds .stats__n,.pane__txt .stats__n{font-size:clamp(28px,2.6vw,40px)}
.ds .stats__l,.pane__txt .stats__l{font-size:13px;margin-top:4px}
.facts div{padding:10px 0}
@media (min-width:768px){
  .pane{grid-template-columns:60fr 40fr}
  .pane--rev{grid-template-columns:40fr 60fr}
  .pane__txt,.pane--rev .pane__txt{padding:32px clamp(32px,4vw,64px)}
  .pane__txt>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
}

/* offers block: one screen high with the content centred, so the space above and below is equal */
#uu-dai{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--bar) - var(--dock));padding-block:clamp(32px,4vw,56px)}
#uu-dai>*{width:100%}
/* list price is larger than before but stays below the on-road price */
#uu-ny{font-size:clamp(22px,2.2vw,28px)}

/* colour block: one screen high, content centred; version chips and prices live here too */
.paint{min-height:calc(100svh - var(--bar) - var(--dock));display:flex;align-items:center;padding-block:clamp(32px,4vw,56px)}
.paint__in{width:100%}
.paint h2{font-size:clamp(22px,1.9vw,30px);line-height:1.15;margin:0 0 .5em;text-wrap:balance}
.paint .lead{font-size:clamp(15px,1.1vw,17px);line-height:1.55;text-wrap:pretty;margin:0 0 14px}
.ver--paint{margin:0 0 6px}
.pl--mini{margin:0 0 10px}
.pl--mini div{padding:8px 0}
.pl--mini dd{font-size:clamp(18px,1.6vw,22px)}
.pl--mini .pl__big{font-size:clamp(22px,2.2vw,30px)}
.colors__name{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.colors__name #colour-tag{font-weight:400;color:var(--muted);font-size:14.5px}
.pick{margin:0 0 12px;padding:10px 12px;background:var(--tint);border-radius:2px;font-size:14px;font-weight:600;line-height:1.4}
.pick:empty{display:none}

/* the car photo box keeps one fixed shape for every colour, so switching colour never moves the text */
.colors__img{aspect-ratio:972/437;height:auto;object-fit:contain}

/* colour block: title on one line, text column a little wider, full spec table under the grid */
.paint{flex-direction:column;align-items:stretch;justify-content:center}
.paint h2{white-space:nowrap;font-size:clamp(19px,1.9vw,30px)}
@media (min-width:768px){.paint__in{grid-template-columns:minmax(300px,1fr) 1.6fr}}
.specs__body{padding:8px 0 4px}
.specs__cmp{font:inherit;font-weight:600;font-size:14px;min-height:40px;padding:0 18px;border-radius:20px;border:1px solid #8A9099;background:#fff;cursor:pointer;margin:0 0 12px}
.specs__cmp[aria-pressed=true]{background:#000;color:#fff;border-color:#000}
.spec-g{border-top:1px solid #D5D8DE}
.spec-g summary{display:flex;justify-content:flex-start;min-height:46px;align-items:center;font-weight:600;font-size:14px;letter-spacing:.04em;cursor:pointer}
.spec-g summary small{font-weight:400;color:var(--muted);margin-left:6px;letter-spacing:0}
.spec-g table{width:100%;border-collapse:collapse;margin-bottom:10px}
.spec-g th{width:auto}
.spec-g tbody th,.spec-head th:first-child{width:38%}
.spec-g th,.spec-g td{padding:8px 10px 8px 0;border-top:1px solid #E3E5E9;font-size:14.5px;text-align:left;vertical-align:top;font-weight:400}
.spec-g tbody th{color:var(--muted)}
.spec-g td{font-weight:600}
.spec-head th{font-weight:700;border-top:0;color:var(--fg)}
.specs__body .yes{color:#1B7F4B} .specs__body .no{color:#9AA1AB}
/* one version at a time: hide the other versions' columns unless comparing */
.specs__body:not(.cmp) [data-v]{display:none}
.specs__body[data-cur="0"]:not(.cmp) [data-v="0"],.specs__body[data-cur="1"]:not(.cmp) [data-v="1"],.specs__body[data-cur="2"]:not(.cmp) [data-v="2"],.specs__body[data-cur="3"]:not(.cmp) [data-v="3"]{display:table-cell}
.specs__body:not(.cmp) .spec-head{display:none}
@media (min-width:768px){.specs__body{columns:1}}

/* spec table window */
html.lock{overflow:hidden}
.specs-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:440px;min-height:48px;padding:0 16px;border:1px solid #8A9099;border-radius:2px;background:#fff;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.specs-btn:hover{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.specs-btn .li{width:18px;height:18px}
.specs-dlg{width:min(980px,94vw);max-width:none;max-height:88svh;padding:0;border:0;border-radius:2px;background:#fff;color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.specs-dlg[open]{display:flex;flex-direction:column}
.specs-dlg::backdrop{background:rgba(10,12,16,.6)}
.specs-dlg__bar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.specs-dlg__bar h3{margin:0;font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;letter-spacing:.01em}
.specs-dlg__bar p{margin:2px 0 0;color:var(--muted);font-size:14px}
.specs-dlg__x{flex:none;width:44px;height:44px;margin:-6px -8px 0 0;border:0;background:none;font-size:32px;line-height:1;cursor:pointer;color:inherit}
.specs-dlg__x:hover{background:var(--tint)}
.specs-dlg__scroll{overflow:auto;padding:12px 20px 20px;overscroll-behavior:contain}
@media (max-width:767px){.specs-dlg{width:100vw;max-height:92svh;margin-bottom:0}.specs-dlg__scroll{padding:10px 14px 16px}}

/* spec window: fixed column widths so every section lines up; version names stay pinned at the top while scrolling */
.spec-top{display:flex;position:sticky;top:-12px;z-index:2;background:#fff;margin:0 -2px 4px;padding:10px 0;border-bottom:2px solid #0A0A0A}
.spec-top span{flex:none;width:50%}
.spec-top b{flex:1;text-align:center;font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;letter-spacing:.01em}
.specs__body.cmp .spec-top span{width:34%}
.spec-g table{table-layout:fixed}
.spec-g tbody th{width:50%}
.specs__body.cmp .spec-g tbody th{width:34%}
.spec-g td{text-align:center}
.specs__body:not(.cmp) .spec-top [data-v]{display:none}
.specs__body[data-cur="0"]:not(.cmp) .spec-top [data-v="0"],.specs__body[data-cur="1"]:not(.cmp) .spec-top [data-v="1"],.specs__body[data-cur="2"]:not(.cmp) .spec-top [data-v="2"],.specs__body[data-cur="3"]:not(.cmp) .spec-top [data-v="3"]{display:block}

/* compare button sits in the window's top bar, next to the close x */
.specs-dlg__bar{align-items:center}
.specs-dlg__act{display:flex;align-items:center;gap:10px;flex:none}
.specs-dlg__act .specs__cmp{margin:0;min-height:38px;padding:0 16px;font-size:14px;white-space:nowrap}
.specs-dlg__x{margin:0}
@media (max-width:767px){.specs-dlg__act .specs__cmp{padding:0 12px;font-size:13px}}
.specs-dlg__scroll{padding-top:0}
.spec-top{top:0;margin-top:0}

/* spec window: every section open, alternate rows lightly shaded */
.spec-g tbody tr:nth-child(even){background:#F4F6F8}
.spec-g tbody th,.spec-g td{padding-left:10px;border-top:0}
.spec-g tbody tr:first-child th,.spec-g tbody tr:first-child td{border-top:0}
.spec-g summary{background:#fff}
.spec-g summary{padding-left:10px}
/* version cells: compact, shaded, pinned */
.spec-top{padding:0;margin:0 0 2px;border-bottom:1px solid #0A0A0A}
.spec-top b{font-size:15px;letter-spacing:.04em;padding:8px 0;background:#E9ECF0}
.specs__body{padding:0 0 4px}
/* compare button lives in the empty cell of the pinned version row */
.spec-top span{display:flex;align-items:center;padding:4px 8px 4px 10px}
.spec-top .specs__cmp{min-height:34px;padding:0 14px;font-size:13.5px;white-space:nowrap;margin:0}
.specs-dlg__act .specs__cmp{display:none}
/* version row, left cell: one button in single view, two ("Chỉ Pro" / "Chỉ Max") while comparing; centred in the cell */
.spec-top span{justify-content:center;gap:8px;padding:4px 8px}
.spec-top .specs__only{display:none;font:inherit;font-weight:600;font-size:13.5px;min-height:34px;padding:0 14px;border-radius:20px;border:1px solid #8A9099;background:#fff;cursor:pointer;white-space:nowrap}
.spec-top .specs__only:hover{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.specs__body.cmp .spec-top .specs__only{display:inline-flex;align-items:center}
.specs__body.cmp .spec-top .specs__cmp{display:none}
@media (max-width:767px){.spec-top .specs__only,.spec-top .specs__cmp{padding:0 9px;font-size:12.5px}.spec-top span{gap:5px;padding:4px 4px}}

/* enquiry block: form centred, title on one line, map at 80% of its old size in the bottom-right corner */
.enq{position:relative;min-height:calc(100svh - var(--bar) - var(--dock));display:flex;align-items:center;justify-content:center;padding-block:clamp(32px,4vw,56px)}
.enq .split{display:contents}
.enq .form{width:min(560px,100%);margin:0 auto}
.enq .form h2{white-space:nowrap;font-size:clamp(17px,1.9vw,28px);margin:0 0 .6em}
.enq .map{position:absolute;right:clamp(16px,2vw,32px);bottom:clamp(16px,2.5vw,32px);width:min(400px,calc((100% - 560px) / 2 - 48px));height:340px;min-height:0}
@media (max-width:1279px){
  .enq{flex-direction:column;gap:20px}
  .enq .map{position:relative;right:auto;bottom:auto;width:min(560px,100%);height:260px;margin:0 auto}
}
/* map: 20% of its first size (about 122 x 112 px), bottom-right corner */
.enq .map{width:122px;height:112px}
@media (max-width:1279px){.enq .map{width:122px;height:112px;margin:0;align-self:flex-end}}

/* dealer name over the background, large screens only: wordmark + BÌNH ĐỊNH + address, left of the form */
.enq__brand{display:none}
@media (min-width:1280px){
  .enq__brand{display:block;position:absolute;left:clamp(24px,3.2vw,64px);top:clamp(48px,13vh,130px);width:min(380px,calc((100% - 560px) / 2 - 88px));color:#0A0A0A;text-shadow:0 1px 14px rgba(255,255,255,.55)}
  .enq__wm{display:block;width:min(100%,300px);height:auto;filter:brightness(0);margin:0 0 10px}
  .enq__ten{margin:0;font-size:clamp(30px,3.2vw,50px);font-weight:600;line-height:1;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
  .enq__dc{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding-top:16px;border-top:2px solid #0A0A0A;font-size:clamp(15px,1.1vw,17px);line-height:1.5;font-weight:500;max-width:340px}
  .enq__dc .li{flex:none;width:20px;height:20px;margin-top:2px}
}

/* brand block v2: wordmark and BÌNH ĐỊNH on one line at the same cap height, address on one line under them,
   top-right corner; the form sits low in the block so the two never crowd each other */
@media (min-width:1280px){
  .enq{align-items:flex-end;padding-bottom:clamp(32px,4.5vw,64px)}
  .enq__brand{--h:clamp(28px,3.2vw,46px);left:auto;right:clamp(24px,3.2vw,64px);top:clamp(28px,5vh,56px);width:auto;display:flex;flex-direction:column;align-items:stretch;text-align:right}
  .enq__row{display:flex;align-items:flex-end;justify-content:flex-end;gap:calc(var(--h) * .45)}
  .enq__wm{width:calc(var(--h) * 6.875);height:var(--h);margin:0}
  .enq__ten{font-size:calc(var(--h) / .727);line-height:.727;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
  .enq__dc{justify-content:flex-end;max-width:none;margin:calc(var(--h) * .5) 0 0;padding-top:calc(var(--h) * .3);font-size:calc(var(--h) * .36);white-space:nowrap}
  .enq__dc span{white-space:nowrap}
}
@media (min-width:1280px){.enq__dc{font-size:calc(var(--h) * .42);letter-spacing:.03em}}

/* brand block v3: top-left, in the flow above the form. On a short window the block simply grows, so the form can never cover the address */
@media (min-width:1280px){
  .enq{flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(28px,5vh,56px)}
  .enq__brand{position:relative;left:auto;right:auto;top:auto;align-self:flex-start;margin-left:calc(clamp(24px,3.2vw,64px) - var(--edge));text-align:left;flex:none}
  .enq__row{justify-content:flex-start}
  .enq__dc{justify-content:flex-start}
  .enq .form{margin-top:auto;margin-bottom:0}
  .enq__brand{margin-bottom:clamp(28px,5vh,56px)}
}

/* adviser block on large screens: the customers' photo fills 45% of the block edge to edge, the adviser photo is a 3:4 frame,
   the dealer logo is larger and a square map fills the space under it */
.dealer__map{display:none}
@media (min-width:1024px){
  #tu-van{padding:0;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:calc(100svh - var(--bar) - var(--dock))}
  #tu-van .duo{display:contents}
  #tu-van .duo__l{justify-content:center;gap:clamp(24px,3vw,44px);padding:clamp(32px,4vw,64px) clamp(28px,4vw,72px) clamp(32px,4vw,64px) var(--edge)}
  #tu-van .gal{height:auto;min-height:0;aspect-ratio:auto;align-self:stretch}
  .person,.dealer__info{grid-template-columns:clamp(150px,13vw,220px) 1fr;gap:clamp(20px,2vw,34px)}
  .person__img{width:100%;height:auto;aspect-ratio:3/4;border-radius:2px;object-position:center 20%}
  .dealer__side{display:flex;flex-direction:column;gap:16px}
  .dealer__logo{width:clamp(120px,11vw,190px);margin:0}
  .dealer__map{display:block;position:relative;aspect-ratio:1;width:100%;background:var(--line);border-radius:2px;overflow:hidden}
  .dealer__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
}

/* adviser block v2 (large screens): no emblem above the map, customers' photo shown whole (square, not cropped),
   text column centred in its half so the space left and right of it is equal */
@media (min-width:1024px){
  .dealer__logo{display:none}
  #tu-van .duo__l{padding-inline:clamp(32px,5vw,96px)}
  #tu-van .duo__l > *{width:100%;max-width:760px;margin-inline:auto}
  #tu-van .gal{aspect-ratio:1/1;align-self:center;height:auto;min-height:0}
  #tu-van .gal .slide img{object-fit:cover}
}

/* top tabs: page order, a red underline that grows under the tab in view, no bold (so nothing shifts); fewer tabs on narrower windows */
.topnav{gap:clamp(12px,1.5vw,26px);font-size:clamp(13.5px,1vw,15.5px)}
.topnav a{position:relative;color:#3A3F47;font-weight:500;white-space:nowrap;padding:8px 0;text-decoration:none}
.topnav a:hover{text-decoration:none;color:#000}
.topnav a.on{font-weight:500;color:#000}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.topnav a:hover::after,.topnav a.on::after{transform:scaleX(1)}
@media (max-width:1179px){.topnav a[data-nav="tu-van"],.topnav a[data-nav="pin"]{display:none}}
@media (max-width:1023px){.topnav a[data-nav="cong-nghe"],.topnav a[data-nav="mau-xe"]{display:none}}

/* dealer name as large as the adviser's name */
.dealer h3{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:.01em;line-height:1.1;margin:0 0 .3em}

/* tab underline: appears on the tab in view, no animation and no hover underline (it flickered while the page moved) */
.topnav a::after{transition:none}
.topnav a:hover::after{transform:scaleX(0)}
.topnav a.on::after,.topnav a.on:hover::after{transform:scaleX(1)}

/* dealer brand block on the enquiry background: 30% smaller */
@media (min-width:1280px){.enq__brand{--h:clamp(20px,2.24vw,32px)}}

/* poster title: GEELY wordmark and EX2 share one height (EX2 capitals = wordmark letters), EX2 in a lighter weight;
   on a PC the tagline is nearly as wide as that title block */
.po__tren{--h:clamp(26px,8vw,46px)}
.po__ten{font-size:var(--h);gap:calc(var(--h) * .4);align-items:flex-end;line-height:.727;letter-spacing:0}
.po__ten .po__wm{height:var(--h);width:auto}
.po__ten span{font-size:calc(var(--h) / .727);font-weight:600;line-height:.727;letter-spacing:-.01em}
@media (min-width:768px){
  .po__tren{--h:clamp(30px,4.2vw,64px)}
  .po__ten{font-size:var(--h)}
}
@media (min-width:768px) and (max-height:780px){.po__tren{--h:clamp(28px,3.6vw,48px)}}
@media (min-width:1024px){.po__kh{font-size:calc(var(--h) * 1.05);letter-spacing:.02em;line-height:1.1}}

/* large screens: bigger type and spacing in the text panels so the content fills the block; top space matches the bottom */
@media (min-width:768px){
  .ds h2,.pane__txt h2{font-size:clamp(22px,1.9vw,40px)}
  .ds .lead,.pane__txt>p,.items p{font-size:clamp(15px,1.1vw,20px)}
  .items b{font-size:clamp(15px,1.1vw,20px)}
  .ds .stats__n,.pane__txt .stats__n{font-size:clamp(28px,2.6vw,56px)}
  .ds .stats__l,.pane__txt .stats__l{font-size:clamp(13px,.9vw,16px)}
  .ds .stats,.pane__txt .stats{margin:clamp(22px,3vh,40px) 0;gap:clamp(18px,2.4vh,32px) 14px}
  .facts div{padding:clamp(10px,1.3vh,16px) 0;font-size:clamp(14.5px,1vw,18px)}
  .drive__txt{padding-top:clamp(32px,9vh,96px)}
  .ds .drive__txt,.pane__txt{max-width:none}
}
@media (min-width:768px){.pane__txt>*{max-width:clamp(520px,34vw,680px)}.drive__txt{max-width:clamp(560px,36vw,720px)}}
@media (min-width:1500px) and (min-height:900px){
  .ds h2,.pane__txt h2{font-size:clamp(30px,2.2vw,46px)}
  .ds .lead,.pane__txt>p,.items p,.items b{font-size:clamp(17px,1.15vw,22px)}
  .ds .stats__n,.pane__txt .stats__n{font-size:clamp(40px,3.2vw,66px)}
  .ds .stats__l,.pane__txt .stats__l{font-size:clamp(15px,.95vw,18px)}
  .facts div{font-size:clamp(16px,1.05vw,20px);padding:clamp(12px,1.6vh,20px) 0}
  .items li{padding:clamp(12px,1.7vh,20px) 0}
  .drive__txt,.pane__txt>*{max-width:clamp(560px,36vw,760px)}
}

/* same top and bottom space in every text panel (Vận hành x2, Công nghệ, Pin); whatever content a panel has is spread
   between the title and the bottom, so a panel with less content gets airier rows instead of empty bands */
@media (min-width:768px){
  .drive__txt,.pane__txt,.pane--rev .pane__txt{--gv:max(88px,clamp(56px,10vh,130px));padding-top:var(--gv);padding-bottom:var(--gv);justify-content:flex-start}
  .drive__txt>.stats,.drive__txt>.facts,.pane__txt>.stats,.pane__txt>.facts{margin-top:auto}
  .pane__txt .items{flex:1;display:flex;flex-direction:column;justify-content:space-between}
  .pane__txt .items li{flex:1;align-items:center}
}

/* short safety points as a tick list */
.ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.ticks li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:clamp(15px,1.1vw,20px)}
.ticks li::before{content:"✓";color:#1B7F4B;font-weight:800}

/* last tab: other Geely cars */
.topnav__ext,.topnav__btn{font:inherit;font-weight:500;color:#3A3F47;background:none;border:0;cursor:pointer;padding:8px 0;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.topnav__ext:hover,.topnav__btn:hover{color:#000;text-decoration:none}
.topnav__btn .li{width:14px;height:14px}
.topnav__more{position:relative}
.topnav__menu{position:absolute;top:calc(100% + 10px);right:0;min-width:240px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;z-index:40}
.topnav__menu[hidden]{display:none}
.topnav__menu a{padding:12px 14px;font-weight:600;color:#0A0A0A}
.topnav__menu a::after{display:none}
.topnav__menu a:hover{background:var(--tint)}
.topnav__menu .topnav__all{font-weight:400;color:var(--muted);border-top:1px solid var(--line);margin-top:4px;padding-top:14px}

/* "Xe khác" dropdown: names only, eases open (fade + slide), chevron turns */
.topnav__menu,.topnav__menu[hidden]{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s linear .24s}
.topnav__more.open .topnav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.topnav__btn .li{transition:transform .25s ease}
.topnav__more.open .topnav__btn .li{transform:rotate(180deg)}
.topnav__more.open .topnav__btn{color:#000}
.topnav__menu a,.topnav__menu span{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 14px;font-weight:600;color:#0A0A0A;text-decoration:none}
.topnav__menu small{font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap}
.topnav__menu .is-current{background:var(--tint);cursor:default}
.topnav__menu .is-soon{color:#8A9099;cursor:default}
.topnav__menu .topnav__all{display:none}

/* =====================  PHONE (under 768 px)  =====================
   header with chip row + burger menu, tucking contact button, trimmed content, one type scale */
.burger,.chips,.drawer{display:none}
@media (max-width:767px){
  /* header: logo bar and chip row share the same 56 px; scrolling down shows the chips, scrolling up the logo bar */
  .topbar{overflow:hidden}
  .topbar__in{display:flex;align-items:center;gap:6px;padding:0 var(--side);transition:transform .32s ease,opacity .32s ease}
  .brand{margin-right:auto}
  .burger{display:grid;place-content:center;gap:6px;flex:none;width:44px;height:44px;margin-right:-8px;border:0;background:none;cursor:pointer;padding:0}
  .burger i{display:block;width:24px;height:2px;background:#0A0A0A}
  .chips{display:flex;position:absolute;inset:0;align-items:center;gap:8px;padding:0 var(--side);overflow-x:auto;background:#fff;transform:translateY(-100%);transition:transform .32s ease;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid #D5D8DE;border-radius:18px;font-size:14px;font-weight:500;color:#3A3F47;text-decoration:none;white-space:nowrap}
  .chips a.on{background:#0A0A0A;border-color:#0A0A0A;color:#fff}
  .topbar.compact .topbar__in{transform:translateY(-100%);opacity:0}
  .topbar.compact .chips{transform:none}

  /* menu sliding in from the right */
  .drawer{display:block;position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
  .drawer.open{visibility:visible;pointer-events:auto}
  .drawer__veil{position:absolute;inset:0;background:rgba(10,12,16,.5);opacity:0;transition:opacity .3s}
  .drawer.open .drawer__veil{opacity:1}
  .drawer__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(320px,84vw);padding:64px 0 24px;overflow:auto;background:#fff;transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  .drawer.open .drawer__panel{transform:none}
  .drawer__panel a{padding:15px 24px;border-bottom:1px solid #EEF0F2;font-size:17px;font-weight:500;color:#0A0A0A;text-decoration:none}
  .drawer__panel a.on{color:var(--accent);font-weight:600}
  .drawer__x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer}
  .drawer__sub{margin:20px 24px 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .drawer__panel a.drawer__car{font-size:16px;font-weight:400}
  .drawer__car.is-soon{padding:12px 24px;color:#8A9099;font-size:16px}

  /* contact button: tucks to the edge when the page is still */
  .fab{transition:transform .35s ease,opacity .35s ease}
  .fab.rest{transform:translateX(34px);opacity:.9}

  /* blocks slide in by fading up only */
  [data-reveal="l"],[data-reveal="r"]{transform:translateY(22px)}

  /* trimmed content: what repeats elsewhere is hidden */
  #tu-van .dealer{display:none}
  #tu-van .person > div > p:not(.dealer__tier):not(.row){display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .ds .facts,#pin .facts{display:none}
  #cong-nghe .items li:nth-child(n+4){display:none}
  .cards .card img{aspect-ratio:4/3}
  #mau-xe .pl--mini,#mau-xe #colour-tag{display:none}
  #mau-xe .colors__img{order:-1;width:calc(100% + var(--side) * 2);max-width:none;margin:0 calc(var(--side) * -1)}
  .enq .map{display:none}
  .pick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .po__so .stats__l{display:none}

  /* one type scale: titles 24, photo captions 20, body 16, small 14, nothing under 13 */
  #tu-van h2,#uu-dai h2,.ds h2,.pane__txt h2,.paint h2,.enq .form h2,.dealer h3{font-size:24px;line-height:1.2;white-space:normal;text-wrap:balance}
  .slide h2{font-size:20px;line-height:1.2;white-space:normal;text-wrap:balance}
  .slide figcaption p{font-size:15px}
  .ds .lead,.pane__txt > p,.person p,.offer{font-size:16px}
  .items b{font-size:16px} .items p{font-size:15px}
  .stats__l,.ds .stats__l,.pane__txt .stats__l{font-size:14px}
  .ds .stats__n,.pane__txt .stats__n{font-size:32px}
  .stats__n small{font-size:max(.45em,13px)}
  .note,.war .stats__l{font-size:13px}
  .po__so .stats__n small,.po__gia small{font-size:13px}
}

/* phone, round 2: chips are plain text with one black underline that glides to the block on screen; test-drive button sits in the menu */
.foot__map{display:none}
@media (max-width:767px){
  .topbar__in > .btn{display:none}
  .chips{gap:0;padding:0 var(--side)}
  .chips a{min-height:56px;padding:0 14px;border:0;border-radius:0;background:none;color:#3A3F47;font-size:15px}
  .chips a.on{background:none;border:0;color:#0A0A0A}
  .chips__bar{position:absolute;left:0;bottom:6px;width:0;height:2px;background:#0A0A0A;opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.7,.2,1),width .38s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .drawer__panel a.drawer__cta{margin:6px 24px 14px;padding:0 20px;min-height:48px;display:flex;border-bottom:0;color:#fff;font-size:16px;font-weight:600;justify-content:center;align-items:center}
  .foot__col--links .foot__body{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:stretch}
  .foot__col--links .foot__body > a{grid-column:1}
  .foot__map{display:block;grid-column:2;grid-row:1 / span 3;position:relative;min-height:120px;background:rgba(255,255,255,.4);border-radius:2px;overflow:hidden}
  .foot__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
}

/* phone round 3 */
.t-short,.note__short{display:none}
@media (max-width:767px){
  /* adviser: photo beside name and role, the whole bio underneath, two equal buttons on one row */
  #tu-van .person{display:grid;grid-template-columns:104px 1fr;column-gap:16px;row-gap:12px;align-items:start}
  #tu-van .person > div{display:contents}
  #tu-van .person__img{grid-column:1;grid-row:1 / span 2}
  #tu-van .person h2{grid-column:2;grid-row:1;align-self:end;margin:0}
  #tu-van .person .dealer__tier{grid-column:2;grid-row:2;align-self:start;margin:0}
  #tu-van .person > div > p:not(.dealer__tier):not(.row){grid-column:1 / -1;grid-row:3;display:block;-webkit-line-clamp:unset;overflow:visible;margin:0}
  #tu-van .person .row{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
  #tu-van .person .row .btn{width:100%;padding:0 10px}

  /* titles that must stay on one line */
  .paint h2{font-size:20px;white-space:nowrap}
  .enq .form h2{font-size:20px;white-space:nowrap}
  .enq .form h2 .t-long{display:none}
  .enq .form h2 .t-short{display:inline}

  /* offers footer: button first, then a short 3-line note */
  .uu-foot{flex-direction:column-reverse}
  .note__long{display:none}
  .note__short{display:inline}
  .uu-foot .note{font-size:12.5px;line-height:1.5}

  /* footer map: same top and bottom as the three links beside it */
  .foot__col--links .foot__body > a{display:flex;align-items:center;min-height:44px;margin:0}
  .foot__map{min-height:0;grid-row:1 / span 3;align-self:stretch}
}

/* design credit in the footer: small circled C and DW, on every page */
.foot__credit{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;letter-spacing:.08em;font-weight:600;color:#444}
.foot__credit .li{width:14px;height:14px}
@media (max-width:767px){
  /* panel titles: one line each (the longest, ĐỘNG CƠ ĐIỆN 11 TRONG 1, sets the size) */
  .ds h2,.pane__txt h2{font-size:20px;white-space:nowrap}
}

/* model name in the brand's squared display style (the brand's own font is proprietary; Orbitron is the closest free match).
   Every car page uses the same rule, so EX5, Monjaro... get it automatically. */
:root{--font-model:'Orbitron','Inter',sans-serif}
.po__ten span{font-family:var(--font-model);font-weight:700;letter-spacing:.01em}
/* credit: icon stroke and text weight match */
.foot__credit{font-weight:600}
.foot__credit .li{width:15px;height:15px}

/* chapter intro between blocks, large screens only */
.chap{display:none}
@media (min-width:1024px){
  .chap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vh,20px);min-height:clamp(220px,30vh,320px);padding:clamp(48px,8vh,88px) var(--edge);text-align:center;background:var(--bg)}
  .chap h2{margin:0;font-size:clamp(32px,2.8vw,52px);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .chap p{margin:0;max-width:980px;font-size:clamp(16px,1.15vw,20px);line-height:1.55;text-wrap:pretty}
}

/* top tabs sit next to the Lái thử button on large screens (logo stays left) */
@media (min-width:768px){
  .topbar__in{grid-template-columns:auto 1fr auto}
  .topnav{justify-self:end;margin-right:clamp(12px,1.6vw,28px)}
}

/* chapter band: title 30% smaller, band 20% lower */
@media (min-width:1024px){
  .chap{min-height:clamp(176px,24vh,256px);padding:clamp(38px,6.4vh,70px) var(--edge);gap:clamp(10px,1.6vh,16px)}
  .chap h2{font-size:clamp(22px,1.96vw,36px)}
}

/* privacy page + footer link */
.foot__policy{margin:22px 0 0;text-align:center;font-size:13px}
.foot__policy a{color:#444;text-underline-offset:3px}
.foot__policy + .foot__credit{margin-top:8px;border-top:0;padding-top:0}
.legal{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--side) 72px}
.legal h1{font-size:clamp(26px,3vw,38px);margin:0 0 .5em}
.legal h2{font-size:clamp(18px,1.6vw,22px);margin:1.8em 0 .4em;text-transform:none}
.legal p{margin:0 0 1em;line-height:1.65}
.legal__lead{font-size:1.05em}

/* footer bottom row: privacy link at the left corner, design credit in the middle, same line */
.foot__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid rgba(0,0,0,.2)}
.foot__bar .foot__policy{margin:0;justify-self:start;font-size:13px;color:#444;text-underline-offset:3px;text-align:left}
.foot__bar .foot__credit{margin:0;padding:0;border:0}

/* phone: the consent line above already links to the privacy policy, so the footer row keeps only the credit */
@media (max-width:767px){
  .foot__bar{grid-template-columns:1fr}
  .foot__bar .foot__policy,.foot__bar > span{display:none}
  .foot__bar .foot__credit{justify-self:center}
}