/* self-hosted fonts: Inter (SIL Open Font License), GEELY Bold and LynkCo TypeVN (brand fonts, served from our own origin): no request to a font host */
@font-face{font-family:'GEELY';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geely-bold-v5.woff2) format('woff2')}
@font-face{font-family:'LynkCo TypeVN';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/lynkco-light.woff2) format('woff2')}
@font-face{font-family:'LynkCo TypeVN';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lynkco-regular.woff2) format('woff2')}
@font-face{font-family:'LynkCo TypeVN';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lynkco-medium.woff2) format('woff2')}
@font-face{font-family:'LynkCo TypeVN';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lynkco-bold.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 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:#434A55; --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;
  --font-display:'GEELY',Inter,system-ui,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:2px solid #0A0A0A;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,255,255,.85)}
html{-webkit-tap-highlight-color:transparent}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:#0A0A0A}
.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(100vh - var(--bar) - var(--dock));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,.96)}
.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}
.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:calc(clamp(40px,8vh,80px) + 28px);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}
.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:2px solid #0A0A0A;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}

.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 .65s ease,transform .8s 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(0,1fr) minmax(0,1fr);gap:48px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .enq .split{gap:24px}
}
@media (min-width:1100px){
  .topnav{display:flex} .brand{margin-right:auto}
}

.wrap{max-width:none}
.social .li{background:#fff;width:22px;height:22px}

[hidden]{display:none!important}
.li--headset{-webkit-mask-image:url(icons/headset.svg);mask-image:url(icons/headset.svg)}
/* anchored from the bottom with a small-viewport unit: on phones the address bar slides away while scrolling and a percentage from the top made the button wander */
.fab{position:fixed;right:0;bottom:calc(37vh - 48px);bottom:calc(37svh - 48px);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:0;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(100vh - var(--bar));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:#F1F5FD;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:space-between;align-items:baseline}
    .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:hidden;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}

/* 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)}


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


/* 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:-28px;width:56px;height:56px;font-size:30px;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(100vh - var(--bar) - var(--dock));height:calc(100svh - var(--bar) - var(--dock));min-height:480px;overflow:hidden}
  .ds__track{height:100%}
  .ds__pane{display:grid;grid-template-columns:1fr 1fr;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}
}
/* the curtain (next block sliding over a pinned one) is for larger screens only; on phones every block just scrolls up with the page */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  main>#hero,main>#thiet-ke,main>#noi-that,main>#an-toan{position:sticky;top:var(--bar)}   /* direct children of main only: blocks inside a pinned-steps wrapper (.stp) are not pinned again */
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  main>#van-hanh,main>#cong-nghe,main>#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:1fr 1fr}
  .pane--rev{grid-template-columns:1fr 1fr}
  .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(100vh - var(--bar) - var(--dock));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(100vh - var(--bar) - var(--dock));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(0,1fr) minmax(0,1fr)}}
.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:88vh;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:92vh;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(100vh - var(--bar) - var(--dock));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}
@media (max-width:1279px){
  .enq{flex-direction:column;gap:20px}
}

/* 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__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__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:0;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 */
@media (min-width:1024px){
  #tu-van{padding:0;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:calc(100vh - var(--bar) - var(--dock));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__logo{width:clamp(120px,11vw,190px);margin: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:1539px){.topnav a[data-nav="tu-van"],.topnav a[data-nav="pin"]{display:none}}
@media (max-width:1279px){.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:calc(min(clamp(26px,8vw,46px), calc((100vw - 2 * var(--edge)) / 11.4)) * var(--k,1))}   /* phones: the title (GEELY wordmark + model name) is about 11 base heights wide whatever the name (--k shrinks long names), so the base height never exceeds the text column over 11.4 */
.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{white-space:nowrap;font-size:calc(var(--h) / .727);font-weight:600;line-height:.727;letter-spacing:-.01em}
@media (min-width:768px){
  .po__tren{--h:calc(clamp(30px,4.2vw,64px) * var(--k,1))}
  .po__ten{font-size:var(--h)}
}
@media (min-width:768px) and (max-height:780px){.po__tren{--h:calc(clamp(28px,3.6vw,48px) * var(--k,1))}}
@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}

  /* 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}
  .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)}
  .pick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}

  /* 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{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{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 */
@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}
}

/* 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}
}

@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:normal;overflow-wrap:break-word}   /* wraps when the visitor's text size is larger (in-app browsers follow the system font size): never wider than the screen */
}

/* brand display font: headings, big numbers, model and dealer names (GEELY Bold; Lynk & Co pages switch to LynkCo TypeVN below) */
:root{--font-model:var(--font-display);--font-dealer:var(--font-display)}
.po__ten span{font-family:var(--font-model);font-weight:700;letter-spacing:.01em}

/* 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 */
.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}


/* Lynk & Co pages: the brand mark is a wide wordmark, so the top-right corner mark gets more width than the Geely emblem */
.po__bt--wide{width:clamp(84px,24vw,112px)}
@media (min-width:768px){.po__bt--wide{width:clamp(110px,9vw,150px)}}
/* Lynk & Co pages: the model name uses a wide geometric face (the brand's own type is proprietary), not the Geely look */
.brand-lynkco{--font-display:'LynkCo TypeVN',Inter,system-ui,sans-serif;--font-body:'LynkCo TypeVN',Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font:var(--font-body);--font-model:var(--font-display);--font-dealer:var(--font-display)}
.brand-lynkco .po__ten span{font-weight:700;letter-spacing:0;font-size:calc(var(--h) / .72);line-height:.72}

/* interior colour choice, right under the exterior dots in the colour block */
.int{margin:2px 0 10px}
.int__h{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.colors__name--in{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.colors__name--in #interior-tag{font-weight:400;color:var(--muted);font-size:14.5px}

/* Lynk & Co pages: black top bar, white logo and type, white underline; the test-drive button is just the last tab */
.brand-lynkco .topbar{background:#000;box-shadow:none}
.brand-lynkco .topnav > a,.brand-lynkco .topnav__btn,.brand-lynkco .topnav__ext{color:#C9C9C9}
.brand-lynkco .topnav > a:hover,.brand-lynkco .topnav > a.on,.brand-lynkco .topnav__btn:hover,.brand-lynkco .topnav__more.open .topnav__btn{color:#fff}
.brand-lynkco .topnav > a::after{background:#fff}
.brand-lynkco .topbar .btn{background:none;border:0;border-radius:0;box-shadow:none;min-height:0;padding:8px 0;font:inherit;font-weight:500;font-size:clamp(13.5px,1vw,15.5px);color:#C9C9C9;position:relative;white-space:nowrap}
.brand-lynkco .topbar .btn::after{content:"";position:absolute;left:0;right:0;bottom:1px;inset:auto 0 1px 0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.brand-lynkco .topbar .btn:hover{color:#fff}
.brand-lynkco .topbar .btn:hover::after{transform:scaleX(1)}
.brand-lynkco .topnav{margin-right:clamp(12px,1.5vw,26px)}
.brand-lynkco .burger i{background:#fff}
.brand-lynkco .chips{background:#000}
.brand-lynkco .chips a{color:#C9C9C9}
.brand-lynkco .chips a.on{color:#fff}
.brand-lynkco .chips__bar{background:#fff}

/* floating contact menu: a green "Tư vấn nhanh" call button on top; it dials the adviser straight away */
.btn--call{background:#168A45;border-color:#168A45;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn--call:hover{background:#0F7237;border-color:#0F7237;color:#fff}
.fab.open .fab__menu .btn:nth-child(3){transition-delay:.14s}
.fab.open .fab__menu .btn:nth-child(1){transition-delay:0s}
.fab.open .fab__menu .btn:nth-child(2){transition-delay:.07s}

/* adviser block on large screens: the call, Zalo and directions buttons are one size and line up in a column */
@media (min-width:1024px){
  #tu-van .person .row .btn,#tu-van .dealer .btn{min-width:200px;justify-content:center}
}

/* quick quote window */
.quick{width:min(420px,92vw);max-width:none;padding:0;border:0;border-radius:2px;background:#fff;color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.quick::backdrop{background:rgba(10,12,16,.6)}
.quick__form{position:relative;padding:clamp(22px,3vw,32px)}
.quick__form h2{margin:0 0 6px;font-size:clamp(20px,2.2vw,24px);text-transform:uppercase;letter-spacing:.01em;padding-right:36px}
.quick__sub{margin:0 0 14px;color:var(--muted);font-size:15px}
.quick__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#0A0A0A}
.quick .fld{color:#0A0A0A}
.quick input:not([type]),.quick input[type=text],.quick 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}

/* quick window, round 2: title centred, no sub-line, sample text faint, lighter veil, slow fade-in; the page never jumps when it opens */
html{scrollbar-gutter:stable}
.quick__form h2{text-align:center;padding-right:0;margin-bottom:16px}
.quick__note{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.quick__note a{color:inherit}
.quick input::placeholder{opacity:.4}
.quick::backdrop{background:rgba(10,12,16,.35)}
.quick[open]{animation:quickIn 1s cubic-bezier(.2,.7,.2,1) both}
.quick[open]::backdrop{animation:quickVeil 1.2s ease both}
@keyframes quickIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes quickVeil{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.quick[open],.quick[open]::backdrop{animation:none}}
/* contact menu: the green call button sits above the row of the red one, which stays level with the headset button */
.fab__menu{top:-58px}

/* quick window, round 3: frosted white like the main form, room above the button; contact-menu rows level */
.fab__menu{top:-56px}
.quick{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.quick__form h2,.quick__note,.quick__note a{color:#0A0A0A}
.quick .btn--block{margin-top:18px}
.quick .err{min-height:0;margin:4px 0 0}

/* main enquiry form: title centred like the quick window, and air above the send button */
.form h2{text-align:center}
.form .btn--block{margin-top:16px}

/* phones: no next-photo arrow on the poster, and the brand mark sits at the bottom right corner of the photo */
@keyframes poDownHalf{from{opacity:0;transform:translateY(-16px)}to{opacity:.5;transform:none}}
@media (max-width:767px){
  .po__sau{display:none}
  .po__bt{--bh:calc(clamp(54px,15vw,64px) / 3.4);top:calc(100vw * 9 / 16 - 24px - var(--bh));right:24px}
  .po__bt--wide{--bh:calc(clamp(84px,24vw,112px) / 6.66)}
  .po--on .po__bt{animation-name:poDownHalf}
}

/* phones, sliding photo blocks: the title always starts at the same height, the line is as wide as the screen allows,
   and the round arrows lose their ring and fill (just a white chevron with a soft shadow) */
@media (max-width:767px){
  .slide figcaption{max-width:none;bottom:auto;top:calc(100% - 224px)}   /* one text line (24px) higher than before, so the caption and the dashes both keep clear of the picture's lower edge */
  .slide figcaption p{text-wrap:pretty}
  .slider__ctl .ico{width:56px;height:56px;margin-top:-28px;font-size:32px}   /* bigger arrows, easier to hit with a thumb */

  .ico,.slider__ctl .ico{border:0;background:none;box-shadow:none;color:#fff;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
  .ico:hover{background:none;color:#fff}
}

/* slider position: short dashes instead of dots; the current one fills from left to right while the block moves on by itself */
.dots{gap:6px}
.dots i{width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.dots i.on{background:rgba(255,255,255,.4)}
.dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
.dots i.on::after{transform:scaleX(1)}
.dots.run i.on::after{animation:dashFill var(--dur,5s) linear both}
@keyframes dashFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.dots.run i.on::after{animation:none}}

/* phones: Công nghệ and Pin are as tall as their content (nothing cut off), the photo keeps a fixed shape above the text */
@media (max-width:767px){
  .pane.vh{height:auto;min-height:0;overflow:visible;grid-template-rows:auto auto}
  .pane .pane__img{aspect-ratio:4/3}
  .pane .pane__txt{overflow:visible}
}

/* photos of the blocks unveil top-down as the block comes in (no block ever covers another) */
[data-wipe]{clip-path:inset(0 0 100% 0)}
[data-wipe].in{clip-path:inset(0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}
@media (max-width:767px){
  [data-reveal="l"]{transform:translateX(-30px)}
  [data-reveal="r"]{transform:translateX(30px)}
}
@media (prefers-reduced-motion:reduce){[data-wipe]{clip-path:none}}

/* phones: the title of a text block stays pinned under the top bar while its text is read, then leaves with the block (nothing slides over anything else) */
@media (max-width:767px){
  .pane__txt h2{position:sticky;top:var(--bar);z-index:3;background:#fff;margin:-22px calc(var(--edge) * -1) 10px;padding:14px var(--edge) 10px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
}

/* phones: the dealer line over the background, right above the form: brand mark + BÌNH ĐỊNH */
@media (max-width:767px){
  .enq{flex-direction:column}
  .enq__brand{display:block;position:relative;margin:0 0 16px;text-shadow:0 1px 12px rgba(255,255,255,.6)}
  .enq__row{--h:19px;display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--h) * .45)}
  .enq__ten{font-family:var(--font-dealer);font-size:calc(var(--h) / var(--cap,.69));line-height:var(--cap,.69);position:relative;top:calc(var(--shift,-.055) * 1em);font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:#0A0A0A}
  .enq__dc{display:none}
  .brand-lynkco .enq__row{--h:15px;--cap:.70;--shift:-.025}
}

/* buttons: a soft press on touch (small dip, no rebound); a 2 px lift on hover for pointer devices; the contact menu buttons stay still on hover */
.btn,.fab__btn{transition:background .2s,color .2s,border-color .2s,transform .22s ease-out,box-shadow .25s}
.btn:active,.fab__btn:active{transform:scale(.97);transition-duration:.1s}
@media (hover:hover){
  .btn:hover,.fab__btn:hover{transform:translateY(-2px)}
  .btn:active,.fab__btn:active{transform:scale(.98)}
  .fab__menu .btn:hover,.fab__btn:hover{transform:none}
}
.fab.open .fab__menu .btn{transition:opacity .3s ease,transform .42s cubic-bezier(.2,.8,.2,1),background .2s}
@media (prefers-reduced-motion:reduce){.btn,.fab__btn{transition:background .2s,color .2s}.btn:hover,.fab__btn:hover,.btn:active,.fab__btn:active{transform:none}}

/* phones: nothing may widen the page. Each block clips what slides in from the sides, even where the browser ignores overflow-x:clip (Messenger / Facebook in-app browser) */
@media (max-width:767px){
  main > section,footer{contain:paint}
}

/* header test-drive button (Geely): plain tab text, same size as the other tabs, no frame or fill */
@media (min-width:768px){
  body:not(.brand-lynkco) .topbar .btn{background:none;border:0;border-radius:0;box-shadow:none;min-height:0;height:auto;padding:8px 0;font:inherit;font-weight:500;font-size:clamp(13.5px,1vw,15.5px);line-height:normal;color:#3A3F47;position:relative;white-space:nowrap;transform:none;transition:color .2s}
  body:not(.brand-lynkco) .topbar .btn:hover,body:not(.brand-lynkco) .topbar .btn:active{color:#000;transform:none}
  body:not(.brand-lynkco) .topbar .btn::after{content:"";position:absolute;inset:auto 0 1px 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:none}
  body:not(.brand-lynkco) .topbar .btn:hover::after{transform:scaleX(1)}
  /* tab spacing = spacing between the last tab and the button */
  .topbar__in{column-gap:clamp(12px,1.5vw,26px)}
  .topnav,.brand-lynkco .topnav{margin-right:0}
}

/* contact menu on a pointer device: each of the three buttons rises 2 px on hover (the round button itself stays still) */
@media (hover:hover){
  .fab.open .fab__menu .btn:hover{transform:translateY(-2px)}
  .fab.open .fab__menu .btn:active{transform:scale(.98)}
}

/* phones: texts that must stay on one line even when the in-app browser enlarges the system font (Messenger) */
@media (max-width:767px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .seg span{white-space:nowrap;padding:0 4px;font-size:clamp(12.5px,3.7vw,16px)}
  .seg label{min-width:0}
  #tu-van .person h2{white-space:nowrap;font-size:clamp(17px,5.2vw,24px)}
  #tu-van .person .row .btn{white-space:nowrap;padding:0 6px;font-size:clamp(12.5px,3.7vw,14px);gap:5px}
}

/* Geely model names and the dealer line are outlines (see tools/name-outlines.py): capital height = the logo height, colour = text colour */
.po__nm{display:block;height:var(--h);width:auto;flex:none;overflow:visible}

/* phones: figures with a unit and a caption read as a horizontal list (figure left, caption right), not as narrow columns */
@media (max-width:767px){
  ul.stats{grid-template-columns:1fr !important;gap:0 !important;max-width:none}
  ul.stats li{flex-direction:row;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid rgba(128,134,144,.32)}
  ul.stats li:first-child{border-top:0}
  ul.stats .stats__n{flex:0 0 44%;white-space:nowrap;font-size:clamp(26px,8vw,34px) !important;letter-spacing:-.5px}
  ul.stats .stats__n small{font-size:.5em;margin-left:4px}
  ul.stats .stats__l{flex:1;margin:0;font-size:14px;line-height:1.35}
  ul.po__so{width:100%}
  ul.po__so li{padding:6px 0;border-top-color:rgba(255,255,255,.25)}
  ul.po__so .stats__n{flex-basis:42%;font-size:clamp(22px,6.6vw,28px) !important}
  ul.po__so .stats__l{font-size:12.5px;color:#F4F7FD}
}

/* colour block: "Xem thông số chi tiết" and "Xem ảnh" side by side */
.colors__btns{display:flex;gap:10px;max-width:440px}
.colors__btns .specs-btn{flex:1 1 0;width:auto;min-width:0;padding:0 12px;font-size:14px;white-space:nowrap}
@media (max-width:767px){.colors__btns .specs-btn{font-size:13px;padding:0 10px}.colors__btns .specs-btn .li{width:14px;height:14px;flex:none}}

/* photo viewer: full screen, photo at its own size, caption and thumbnails along the bottom edge */
.galv{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0A0C10;color:#fff;overflow:hidden}
.galv[open]{display:grid;grid-template-rows:minmax(0,1fr) auto auto}
.galv::backdrop{background:#000}
.galv__stage{position:relative;overflow:hidden;touch-action:none;cursor:grab;min-height:0}
.galv__stage:active{cursor:grabbing}
.galv__stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .25s}
.galv__x{position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.galv__x:hover{background:rgba(255,255,255,.28)}
.galv__n{position:absolute;top:22px;left:16px;z-index:3;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
.galv__nav{position:absolute;top:calc((100% - 150px) / 2);z-index:3;width:44px;height:56px;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center}
.galv__nav:hover{background:rgba(255,255,255,.26)}
.galv__nav--p{left:0;border-radius:0 2px 2px 0} .galv__nav--n{right:0;border-radius:2px 0 0 2px}
.galv__nav .li{width:22px;height:22px;background:#fff}
.galv__cap{margin:0;padding:10px 16px 6px;text-align:center;font-size:14px;line-height:1.4;color:#E6E9EE;min-height:1.4em}
.galv__strip{display:flex;gap:8px;overflow-x:auto;padding:6px 12px calc(12px + env(safe-area-inset-bottom));scrollbar-width:thin}
.galv__strip button{flex:none;width:88px;height:58px;padding:0;border:2px solid transparent;border-radius:2px;background:#1B1F27;opacity:.55;cursor:pointer;overflow:hidden}
.galv__strip button[aria-current=true]{border-color:#fff;opacity:1}
.galv__strip img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.galv__nav{display:none}.galv__strip button{width:72px;height:48px}}
.x-m{display:none}
@media (max-width:767px){.x-d{display:none}.x-m{display:inline}}
.colors__btns .specs-btn{white-space:normal;line-height:1.25;padding-block:6px;text-align:left}


/* phones: figures at about half the size they had in the list (more room for the captions, less scrolling) */
@media (max-width:767px){
  ul.stats li{padding:7px 0;gap:12px}
  ul.stats .stats__n{flex:0 0 38%;font-size:clamp(17px,5vw,20px) !important;letter-spacing:0}
  ul.stats .stats__l{font-size:13.5px;line-height:1.3}
  ul.po__so li{padding:5px 0}
  ul.po__so .stats__n{flex-basis:38%;font-size:clamp(16px,4.8vw,19px) !important}
  ul.po__so .stats__l{font-size:12.5px}
}
@media (max-width:767px){ul.stats li{width:100%;max-width:none;justify-self:stretch;box-sizing:border-box}}
@media (max-width:767px){
  .facts div{gap:12px;padding:9px 0;font-size:14px;line-height:1.35}
  .facts dt{flex:0 0 40%}
  .facts dd{flex:1;min-width:0}
}

/* phones: unit as large as the caption, caption pushed to the right edge */
@media (max-width:767px){
  ul.stats .stats__n small{font-size:13.5px !important;margin-left:4px}
  ul.po__so .stats__n small{font-size:12.5px !important}
  ul.stats .stats__l{text-align:right}
}


/* large screens: pane photos slide in from their outer edge, decelerating, together with the text parts */
@media (min-width:768px){
  #cong-nghe,#pin{overflow:clip}
  .pane__img[data-reveal="il"],.pane__img[data-reveal="ir"]{opacity:1}
  .pane__img[data-reveal="il"]{transform:translateX(-102%)}
  .pane__img[data-reveal="ir"]{transform:translateX(102%)}
  .pane__img[data-reveal="il"].in,.pane__img[data-reveal="ir"].in{transform:none;transition:transform 1.5s cubic-bezier(.16,.84,.3,1);transition-delay:0s}
}


/* colour block buttons: label and arrow centred together */
.colors__btns .specs-btn{justify-content:center;text-align:center}


/* shared footer: soft gradient, four columns on large screens, one column on phones */
.foot{background:linear-gradient(100deg,#DDEFF2 0%,#CDD4F4 50%,#F3D5DA 100%);padding:48px var(--edge) 24px;color:#111}
.foot__in{display:grid;gap:28px;align-items:start}
.foot__col{display:flex;flex-direction:column}
.foot h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:0 0 12px;display:flex;align-items:center}
.foot h3.foot__name{font-family:var(--font-display,inherit);font-size:clamp(18px,1.6vw,22px);letter-spacing:.01em;margin:0 0 4px}
.foot__tier{margin:0 0 12px;font-size:13px;font-weight:600;color:#444}
.foot__col p{margin:0 0 8px;font-size:14.5px;line-height:1.5}
.foot__col a{display:block;margin:0 0 8px;font-size:14.5px;line-height:1.5;text-decoration:none;text-transform:none;min-height:24px}
.foot__col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot__col .social a{display:grid;margin:0;width:38px;height:38px;min-height:0}
.foot__care .social{flex-wrap:nowrap;gap:10px}
.foot__care .social .si,.foot__care .social .li{width:19px;height:19px}
.foot__care p{margin:0 0 4px}
.foot__care p a{margin:0}
.foot__care .social{margin-top:10px}
.foot__note{margin:28px 0 0;font-size:12.5px;line-height:1.5;color:#444}
@media (min-width:768px){
  .foot__in{grid-template-columns:1fr 1fr;gap:28px 32px}
}
@media (min-width:1000px){
  .foot__in{grid-template-columns:1.3fr .9fr 1.6fr 1fr;gap:32px}
}
@media (max-width:767px){
  .foot{padding-top:36px}
}

/* headings and big figures use the brand display font */
h1,h2,.stats__n,.po__gia b,.pl__big,.items__n{font-family:var(--font-display)}

/* header of the site pages. Same height, logo, type and spacing as the car pages' top bar, so moving between pages does not make the bar jump. */
.hd{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.hd__in{display:flex;align-items:center;gap:6px;padding:0 var(--side);height:var(--bar)}
.hd__brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit;margin-right:auto;flex:none}
/* The brand logo alone (emblem and lettering as the brand publishes it); its height is --logo-h. */
/* logo widths as on the brand's own sites (geely.vn: 131px phone / 175px wide; lynkco.com: 120px wide), so the tab bar is as wide as theirs; --logo-h = width / logo aspect */
.hd__brand{--logo-h:12.2px}
.brand-lynkco .hd__brand{--logo-h:16px}
.hd__brand img{height:var(--logo-h);width:auto}
/* the dealer mark: the whole name in the brand display font; size from --h (capital height) */
.dn{display:inline-block;--h:20px;font-family:var(--font-dealer);font-weight:700;font-size:calc(var(--h) / .70);line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:top}
.hm-banner h1 .dn{--h:clamp(19px,3.2vw,36px)}
.hm-dealer h2 .dn{--h:clamp(15px,1.7vw,21px)}
.foot__name .dn{--h:clamp(12px,1.1vw,15px)}
.dealer h3 .dn{--h:clamp(18px,2.2vw,28px)}
.hd__nav{display:none;align-items:center;gap:clamp(12px,1.5vw,26px)}
.hd__nav > a,.hd__more > a,.hd__call{text-transform:uppercase;letter-spacing:.03em;position:relative;display:inline-flex;align-items:center;gap:4px;min-height:0;padding:8px 0;border:0;background:none;font:500 clamp(13.5px,1vw,15.5px)/normal var(--font);color:#3A3F47;text-decoration:none;cursor:pointer;white-space:nowrap}
.hd__nav > a::after,.hd__more > a::after,.hd__call::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)}
.hd__nav > a:hover,.hd__more > a:hover,.hd__call:hover,.hd__nav > a[aria-current=page],.hd__more > a[aria-current=page]{color:#000}
.hd__nav > a:hover::after,.hd__more > a:hover::after,.hd__call:hover::after,.hd__nav > a[aria-current=page]::after,.hd__more > a[aria-current=page]::after{transform:scaleX(1)}
.hd__call{display:none}
@media (min-width:768px){
  .hd__brand{--logo-h:16.3px}
  .brand-lynkco .hd__brand{--logo-h:18px}
  .hd__in{padding:0 var(--edge);gap:clamp(12px,1.5vw,26px)}
  .hd__call{display:inline-flex}
}
@media (min-width:1100px){
  .hd__nav{display:flex}
  .burger{display:none}
}
.brand-lynkco .hd{background:#000;box-shadow:none}
.brand-lynkco .hd__nav > a,.brand-lynkco .hd__more > a{color:#C9C9C9}
.brand-lynkco .hd__nav > a:hover,.brand-lynkco .hd__more > a:hover,.brand-lynkco .hd__nav > a[aria-current=page],.brand-lynkco .hd__more > a[aria-current=page]{color:#fff}
.brand-lynkco .hd__nav > a::after,.brand-lynkco .hd__more > a::after,.brand-lynkco .hd__call::after{background:#fff}
.brand-lynkco .hd .burger i{background:#fff}

/* the menu button and the sliding menu also serve tablets and small laptops (768-1099 px), where the tabs are still hidden; phones get them from the block above */
@media (min-width:768px) and (max-width:1099px){
  .topbar__in{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);padding:0 var(--edge)}
  .topbar .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}
  .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 .35s ease}
  .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__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}
  .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}
}
.brand-lynkco .drawer__panel{background:#000}
.brand-lynkco .drawer__panel a{color:#E5E5E5;border-bottom-color:#222}
.brand-lynkco .drawer__panel a.on{color:#fff}
.brand-lynkco .drawer__x{color:#fff}
.brand-lynkco .drawer__sub{color:#8A9099}
html{scrollbar-gutter:stable}

.pg{display:block}
.hm-banner{position:relative;min-height:clamp(380px,62vh,620px);display:flex;align-items:flex-end;padding:0 var(--edge);background:#0b1020;color:#fff;overflow:hidden}
.hm-banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 100%)}
.hm-banner__txt{position:relative;z-index:1;padding:0 0 clamp(28px,6vh,64px);max-width:min(760px,100%)}
.hm-banner h1{margin:0 0 8px;font-size:clamp(28px,4.6vw,52px);line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.hm-banner p{margin:0 0 20px;font-size:clamp(15px,1.5vw,19px);max-width:560px}
.hm-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){.hm-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hm-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
.hm-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E3E6EA;border-radius:2px;overflow:hidden}
.hm-card__img{display:block;aspect-ratio:16/9;background:#EEF0F2}
.hm-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.hm-card h3{margin:16px 18px 2px;font:700 20px/1.2 var(--font-display);text-transform:uppercase}
.hm-card h3 a{color:inherit;text-decoration:none}
.hm-card__price{margin:0 18px 14px;font-size:15px;color:var(--muted)}
.hm-card__btn{display:flex;gap:10px;flex-wrap:wrap;margin:auto 18px 18px}
.hm-card__btn .btn{flex:1 1 130px}
.hm-note{margin:18px 0 0;font-size:12.5px;color:var(--muted)}
.hm-person .person{max-width:760px}
.hm-dealer{max-width:760px}
.hm-dealer h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);text-transform:uppercase}
.hm-dealer p{margin:0 0 10px}

/* the three-field enquiry dialog */
.qd{width:min(420px,92vw);max-width:none;padding:0;border:0;border-radius:2px;background:#fff;color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.qd::backdrop{background:rgba(10,12,16,.6)}
.qd__form{position:relative;padding:clamp(22px,3vw,32px)}
.qd__form h2{margin:0 0 16px;font-size:clamp(20px,2.2vw,24px);text-transform:uppercase;text-align:center;padding:0 28px}
.qd__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#0A0A0A}
.qd .fld{color:#0A0A0A}
.qd input:not([type]),.qd input[type=text],.qd input[type=tel],.qd select{width:100%;min-height:50px;border:1px solid #8A9099;border-radius:2px;padding:0 14px;font:400 16px var(--font);background:#fff;color:#0A0A0A}
.qd .btn--block{margin-top:18px}
.qd .chk{color:#0A0A0A}
.hd__nav > a.hd__call--nav{display:none}
.hd__nav.open > a.hd__call--nav{display:flex}
@media (min-width:900px){
  .hm-banner{align-items:center}
  .hm-banner::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,0) 62%)}
  .hm-banner__txt{max-width:560px;padding-bottom:0}
}

/* price list, promotions, contact */
.pr h1,.pm h1,.ct h1{margin:0 0 clamp(20px,3vw,36px);font-size:clamp(28px,3.6vw,44px);text-transform:uppercase}
.pr__wrap{overflow-x:clip}   /* clip, not auto: a scroll box would stop the header row from sticking to the page */
.pm__txt{max-width:640px;margin:0 0 24px;font-size:clamp(18px,2vw,24px);line-height:1.4}
.pm{min-height:40vh}

/* official video: edge to edge. Large screens: the full width, as tall as the screen allows below the top bar (the picture stays 16:9 inside, black bars if the screen is shorter). Phones: the full width of the phone. */
.video{padding:0;background:#000}
.video__frame{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--bar));max-height:calc(100svh - var(--bar));margin:0;background:#000;overflow:hidden}
.video__frame img,.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}

/* Geely: the brand font is kept for page titles, section titles, big figures and the model names, as on geely.vn (measured 04/11/2026: section titles
   and spec figures use it; sub-headings, form titles, names, prices, buttons, labels and fields use Inter). Lynk & Co uses its font for everything, as lynkco.com.vn does. */
body:not(.brand-lynkco) :is(figcaption h2,.offerbox h2,.calc h2,.form h2,.quick h2,.qd h2,.person h2,.pl__big,.pr__tbl td){font-family:var(--font)}
body:not(.brand-lynkco) .person h2{font-weight:700}
body:not(.brand-lynkco) :is(.pl__big,.pr__tbl td){font-variant-numeric:tabular-nums}
body:not(.brand-lynkco) :is(.hm-card h3,.pr__car,#specs-ttl){font-family:var(--font-display)}   /* car names (cards, price list, spec title) and the poster price stay in the brand font */

/* Geely home: photo banner (no text), cut-out car list, entrance effects */
.hm-slides{position:relative;width:100%;aspect-ratio:2/1;background:#0b1020;overflow:hidden;animation:hmFade 1s ease both}   /* the frame has the same ratio as the pictures (2:1 on phones, 1920:810 wider), so nothing is cut or shifted; a quarter lower than the old band */
@media (min-width:768px){.hm-slides{aspect-ratio:1920/810}}
.hm-slides__pic{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1.2s ease-in-out;will-change:opacity}
.hm-slides__pic.on{opacity:1;transition-delay:.25s}
.hm-slides__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hm-slides__dots{position:absolute;left:0;right:0;bottom:6px;z-index:2;display:flex;justify-content:center;gap:2px}
.hm-slides__dots button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.hm-slides__dots button::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:3px;margin:-1.5px 0 0 -13px;border-radius:2px;background:rgba(255,255,255,.5);transition:background .3s,width .3s,margin .3s}
.hm-slides__dots button[aria-current=true]::before{background:#fff;width:34px;margin-left:-17px}
@keyframes hmFade{from{opacity:0}to{opacity:1}}
.hm-intro{max-width:760px;margin:0 0 clamp(22px,3vw,34px)}
@media (min-width:768px){.hm-intro{max-width:none;margin-left:auto;margin-right:auto;text-align:center}.hm-dealer{margin-left:auto;margin-right:auto;text-align:center}}
.hm-intro h2{margin:0 0 10px;font-size:clamp(22px,2.5vw,32px);line-height:1.15;text-transform:uppercase;text-wrap:balance}   /* one line on wide screens */
.hm-intro p{margin:0 auto;max-width:56em;color:var(--muted);font-size:clamp(15px,1.3vw,17px);line-height:1.6;text-wrap:balance}   /* two even lines, no lone last word */
/* Geely cards: no frame; the car stands on the page and its name, price and buttons are centred under it */
.hm-card--cut{border:0;background:none;overflow:visible;text-align:center}
.hm-card--cut h3{margin:6px 0 2px}
.hm-card--cut .hm-card__price{margin:0 0 14px}
.hm-card--cut .hm-card__btn{justify-content:center;margin:auto 0 8px}
.hm-card--cut .hm-card__btn .btn{flex:0 1 auto;min-width:150px}
@media (max-width:560px){.hm-card--cut .hm-card__btn{flex-wrap:nowrap;gap:8px}.hm-card--cut .hm-card__btn .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px;font-size:14px;white-space:nowrap}}   /* the two buttons stay on one row on phones */
.hm-card__img--cut{display:grid;place-items:center;aspect-ratio:40/19;padding:0;background:none}   /* the 1200x750 picture carries its own margins, so every car sits at the same size and height */
.hm-card__img--cut img{object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hm-card:hover .hm-card__img--cut img{transform:scale(1.045)}
.hm-card__price b{margin-left:4px;font:700 19px/1.2 var(--font);color:var(--accent);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;-webkit-text-stroke:0}
/* Geely home: tight vertical rhythm (every gap about half of the first version), so the title and two rows of cars fit one large screen; phones get the same tightening */
body:not(.brand-lynkco) .hm-cars{padding-top:calc(var(--pad) / 2);padding-bottom:calc(var(--pad) / 2)}
body:not(.brand-lynkco) .hm-intro{margin-bottom:clamp(11px,1.5vw,17px)}
body:not(.brand-lynkco) .hm-intro h2{margin-bottom:5px}
body:not(.brand-lynkco) .hm-grid{gap:14px}
@media (max-width:639px){body:not(.brand-lynkco) .hm-grid{gap:6px}}
.hm-card--cut h3{margin:3px 0 1px}
.hm-card--cut .hm-card__price{margin:0 0 7px;font:700 13px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;-webkit-text-stroke:.15px var(--bg,#fff)}   /* "GIÁ TỪ": capitals in the brand font; the white outline thins the only (bold) weight of that font */
.hm-card--cut .hm-card__btn{margin-bottom:4px}
/* blocks, titles and text rise into place as they come into view (the script adds .rv, so nothing stays hidden without it) */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.hm-slides{animation:none}.hm-slides__pic{transition:none}.rv{opacity:1;transform:none}}

/* News (Geely): laid out and written like the brand's own news pages (measured on geely.vn, 04/11/2026): titles in capitals,
   body 16/24 justified, headings in sentence case at 32/28 px, picture captions centred, tables with a thin grey grid */
.nw h1{margin:0 0 clamp(18px,2.5vw,30px);font-size:clamp(24px,2.4vw,32px);line-height:1.3;text-transform:uppercase}
.nw__grid{display:grid;gap:clamp(22px,2.6vw,32px) 24px;grid-template-columns:1fr}
@media (min-width:640px){.nw__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.nw__grid{grid-template-columns:repeat(3,1fr)}}
.nw__card{display:flex;flex-direction:column}
.nw__img{display:block;aspect-ratio:3/2;background:#EEF0F2;overflow:hidden}
.nw__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nw__card:hover .nw__img img{transform:scale(1.04)}
.nw__txt{display:flex;flex-direction:column;flex:1;padding:16px 0 0}
.nw__meta{margin:0 0 8px;font-size:13px;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.nw__card h2{margin:0 0 14px;font:600 clamp(15px,1.45vw,19px)/1.4 var(--font);letter-spacing:0;text-transform:uppercase;color:#333}
@media (min-width:640px){.nw__card h2{--l:5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--l);overflow:hidden;min-height:calc(var(--l) * 1.4em)}}   /* side by side: every title block is the same height, so pictures, titles and "Đọc ngay" line up across a row */
@media (min-width:1000px){.nw__card h2{--l:4}}
.nw__card h2 a{color:inherit;text-decoration:none}
.nw__card h2 a:hover{text-decoration:none}
.nw__exc{margin:0 0 14px;font-size:15px;line-height:1.6;color:#333;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:auto 0 0}
.nw__more{font-weight:500;font-size:14.5px;text-transform:uppercase;color:#666;text-decoration:none;white-space:nowrap}
.nw__more:hover{color:var(--accent)}
.nw__src{margin:0;font-size:12.5px;color:var(--muted);white-space:nowrap}
.na{max-width:calc(943px + 2 * var(--edge));margin-left:auto;margin-right:auto}
.na__back{margin:0 0 16px;font-size:14px}
.na__back a{color:var(--muted);text-decoration:none}
.na__back a:hover{color:var(--fg)}
.na__hero{margin:0 0 20px}
.na__hero img{display:block;width:100%;height:auto}
.na__cat{margin:0 0 6px;font-size:16px;line-height:1.5;color:#333;text-transform:uppercase}
.na h1{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px);line-height:1.4;font-weight:700;text-transform:uppercase;color:#333}
.na__date{margin:0 0 clamp(16px,2vw,24px);font-size:16px;line-height:1.5;color:#333}
.na__body{font-size:16px;line-height:1.5;color:#333;text-align:justify}
.na__body p{margin:0 0 14.4px}
.na__body h2,.na__body h3{margin:8px 0 16px;font-family:var(--font);font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;color:#333}
.na__body h2{font-size:clamp(24px,2.4vw,32px)}
.na__body h3{font-size:clamp(21px,2vw,28px)}
.na__body b,.na__body strong{font-weight:700}
.na__body ul,.na__body ol{margin:0 0 14.4px;padding-left:clamp(26px,3vw,40px)}
.na__body li > ul,.na__body li > ol{margin:0}
.na__body li.nl{list-style:none}
.al-c{text-align:center}
.al-r{text-align:right}
.na__fig{margin:0 0 14.4px;text-align:center}
.na__fig img{display:inline-block;max-width:100%;height:auto}
.na__tbl{margin:0 0 14.4px;overflow-x:auto}
.na__tbl table{width:100%;border-collapse:collapse;font-size:14.4px;line-height:1.5}
.na__tbl td,.na__tbl th{padding:15px;border:.8px solid rgba(128,128,128,.5);text-align:justify;vertical-align:top}
.na__body blockquote{margin:0 0 14.4px;padding:2px 0 2px 16px;border-left:3px solid var(--accent)}
.na .nw__src{margin-top:clamp(24px,3vw,40px);padding-top:16px;border-top:1px solid #E3E6EA;font-size:14px;white-space:normal}

/* Geely home, under the car list: four rows, picture and text on opposite sides, flipping from row to row (phone: picture above text) */
.hm-story{display:grid;gap:clamp(36px,5.5vw,84px);padding-top:calc(var(--pad) / 1.4);padding-bottom:calc(var(--pad) / 1.4)}
.hm-st__row{display:grid;gap:18px clamp(32px,6vw,88px);align-items:center}
@media (min-width:768px){
  .hm-st__row{grid-template-columns:1fr 1fr}
  .hm-st__row:nth-child(even) .hm-st__media{order:2}
}
.hm-st__media{position:relative;overflow:hidden;background:#EEF0F2;aspect-ratio:3/2}   /* showroom, salesperson and news share one frame; only the delivery poster stays square so its lettering is not cut */
.hm-st__media--sq{aspect-ratio:1/1}
.hm-st__media img{display:block;width:100%;height:100%;object-fit:cover}
.hm-st__row--dealer .hm-st__media img{object-position:55% 50%}
.hm-st__row--sale .hm-st__media img{object-position:50% 22%}
.hm-st__ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:14px}
.hm-st__txt h2{margin:0 0 12px;font-size:clamp(22px,2.4vw,32px);line-height:1.15;text-transform:uppercase}
.hm-st__txt h2.hm-st__ttl{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2vw,27px);line-height:1.3;letter-spacing:.01em;text-wrap:balance}   /* whole capitals line in the brand font, real text */
:is(.hm-st__pts,.person__pts){margin:0 0 16px;padding:0;list-style:none}
:is(.hm-st__pts,.person__pts) li{position:relative;margin:0 0 8px;padding-left:20px;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:#3A3F47}
:is(.hm-st__pts,.person__pts) li::before{content:"";position:absolute;left:5px;top:.28em;width:6px;height:11px;border:solid #16A34A;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}   /* green tick */
@media (max-width:767px){#tu-van .person .person__pts{grid-column:1 / -1;grid-row:3;margin:0}}
/* the two buttons of the salesperson and dealer rows: same width, same height, always side by side (also on a phone) */
.hm-st__txt .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;margin:0}
.hm-st__txt .row .btn{width:100%;min-width:0;padding:0 8px;white-space:nowrap;gap:0}
@media (max-width:767px){.hm-st__txt .row .btn{font-size:clamp(11.5px,3.4vw,14px)}}
@media (max-width:420px){.hm-st__txt .row .li{display:none}}
/* sign-up form under the thanks row */
/* phone, Geely home: pictures run edge to edge (no side margin); text keeps a small even inset, headings on the left, paragraphs and titles justified */
@media (max-width:767px){
  body:not(.brand-lynkco) .hm-story{padding-left:0;padding-right:0}
  body:not(.brand-lynkco) .hm-st__txt{padding:0 18px;text-align:left}
  body:not(.brand-lynkco) .hm-st__txt p{text-wrap:pretty}
  body:not(.brand-lynkco) .hm-st__txt .row{margin:0}
  body:not(.brand-lynkco) .hm-st__pts{margin:0 0 18px}
  body:not(.brand-lynkco) .hm-st__pts li{font-size:clamp(13px,3.65vw,16px);text-wrap:pretty}
  body:not(.brand-lynkco) .hm-nw__dots{justify-content:flex-start;margin-left:-4px}
  body:not(.brand-lynkco) .hm-st__txt .hm-nw__item h3{text-align:justify;text-align-last:left;text-wrap:pretty}
}
@media (max-width:639px){
  body:not(.brand-lynkco) .hm-cars{padding-left:0;padding-right:0}
  body:not(.brand-lynkco) .hm-intro{padding:0 18px;text-align:center}
  body:not(.brand-lynkco) .hm-intro h2{text-wrap:balance}
  body:not(.brand-lynkco) .hm-card--cut .hm-card__btn{margin-left:18px;margin-right:18px}
}
/* descriptive paragraphs are justified (both edges); titles keep their own alignment */
.hm-st__txt p:not(.hm-st__tier):not(.row),:is(.hm-st__pts,.person__pts) li{text-align:justify}
@media (max-width:767px){body:not(.brand-lynkco) .hm-st__txt p:not(.hm-st__tier):not(.row),body:not(.brand-lynkco) .hm-intro p{text-align:justify;text-wrap:pretty}}
.hm-st__txt p{margin:0 0 14px;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:#3A3F47}
.hm-st__txt .hm-st__tier{color:#2D3FE0;font-weight:700;text-transform:uppercase}
.hm-st__txt .hm-st__addr{color:var(--fg)}
body:not(.brand-lynkco) .hm-st__row--sale .hm-st__txt h2{font-family:var(--font-display);font-weight:700;letter-spacing:.01em}   /* name and role line: brand font */
body:not(.brand-lynkco) .hm-st__row--sale .hm-st__tier{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;font-size:clamp(12.5px,3.5vw,16px);line-height:1.4;text-wrap:balance}
/* news row: all pictures and all texts sit on top of each other; the current pair fades in together */
.hm-nw__pics{position:relative}
.hm-nw__pic{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.hm-nw__pic.on{opacity:1;visibility:visible;transition:opacity .8s ease}
.hm-nw__list{display:grid}
.hm-nw__item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.hm-nw__item.on{opacity:1;visibility:visible;transition:opacity .6s ease .2s}
.hm-st__txt .hm-nw__item h3{margin:0 0 12px;font:600 clamp(16px,1.5vw,20px)/1.4 var(--font);text-transform:uppercase;color:#333;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.hm-nw__item h3 a{color:inherit;text-decoration:none}
.hm-st__txt .hm-nw__exc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.hm-nw__more{font-weight:500;font-size:14.5px;text-transform:uppercase;color:#666;text-decoration:none}
.hm-nw__more:hover{color:var(--accent)}
.hm-nw__dots{display:flex;gap:2px;margin:6px 0 0 -4px}
.hm-nw__dots button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.hm-nw__dots button::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:3px;margin:-1.5px 0 0 -10px;border-radius:2px;background:#C5C9D0;transition:background .3s,width .3s,margin .3s}
.hm-nw__dots button[aria-current=true]::before{background:var(--accent);width:28px;margin-left:-14px}
@media (prefers-reduced-motion:reduce){.hm-nw__pic,.hm-nw__item{transition:none}}


/* sign-up band (both brands): plain dark band, centred capitals title, name | phone | car | send in one row, square fields; stacked on a phone */
.hm-signup{background:#2E2E2E;color:#fff;padding-top:clamp(30px,3.6vw,52px);padding-bottom:clamp(30px,3.6vw,52px)}
.hm-form{max-width:880px;margin:0 auto;text-align:center}
.hm-form h2{margin:0 0 clamp(14px,1.6vw,22px);font-size:clamp(22px,2.6vw,34px);line-height:1.2;text-transform:uppercase;color:#fff;text-wrap:balance}
.hm-form__row{display:grid;gap:10px;grid-template-columns:1fr;text-align:left}
.hm-form .lf{min-width:0}
.hm-form input:not([type]),.hm-form input[type=tel],.hm-form select{display:block;width:100%;min-height:44px;border:0;border-radius:0;padding:0 12px;font:400 15px var(--font);background:#fff;color:#222}
.hm-form input::placeholder{color:#7A7A7A;opacity:1}
.hm-form select:required:invalid{color:#7A7A7A}
.hm-form select option{color:#222}
.hm-form input:focus-visible,.hm-form select:focus-visible{outline:2px solid #6EA8FF;outline-offset:0}
.hm-form .err{margin:4px 0 0;color:#FFB4B4}
.hm-form .btn{width:100%;min-height:44px;border-radius:0;background:#fff;color:#111;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.hm-form .btn:hover{background:#E9E9E9;color:#000}
.hm-form .chk{justify-content:center;margin:14px 0 0;color:#D8D8D8;font-size:13px}
.hm-form .chk input{accent-color:#fff}
.hm-form .chk a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hm-form .form__msg{margin-top:12px;background:rgba(255,255,255,.12);color:#fff}
.hm-form .form__msg a{color:#fff}
@media (min-width:900px){
  .hm-form__row{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
}

/* footer (learnt from the sample dealer sites): the car list becomes a three-column list with a chevron and a thin rule under each line,
   the site links join the list, and a row of small capitals links closes the page */
.foot__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.foot__col .foot__list a{position:relative;display:flex;align-items:center;margin:0;padding:7px 0 7px 18px;font-size:13px;line-height:1.35;min-height:0}
.foot__list a::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;background:currentColor;opacity:.7;-webkit-mask:url(icons/chevron-right.svg) center/contain no-repeat;mask:url(icons/chevron-right.svg) center/contain no-repeat}
/* the whole small print (picture and price notice, policy link, copyright) is ONE centred line at the very bottom; it wraps only when the screen is too narrow */
.foot__fine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;margin-top:26px;padding-top:14px;border-top:1px solid rgba(0,0,0,.2);text-align:center}
.foot__fine .foot__note,.foot__fine .foot__copy,.foot__fine .foot__links{margin:0}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.foot__copy{font-size:12px;line-height:1.5;color:#444}
.foot__links a{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#444;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.foot__links a:hover{color:#000;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1000px){
  /* wide screen: three columns, left to right = dealer, customer care, cars and page links (two small columns) */
  /* columns hug their content; the free space is shared out as two EQUAL gaps (first column on the left edge, last on the right edge) */
  .foot__in{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:32px 40px}
  .foot__brand{max-width:310px}
  .foot__cars,.foot__list{display:contents}
  .foot__care{order:2}
  .foot__sub:nth-child(1){order:3}
  .foot__sub:nth-child(2){order:4}
  /* one shared row height: every line of all three columns (name / heading / list item) sits on the same horizontal grid line */
  .foot{--fr:30px}
  .foot .foot__col h3,.foot .foot__col p{margin:0;line-height:var(--fr)}
  .foot .foot__col p,.foot .foot__care p a{font-size:14px;line-height:var(--fr)}
  .foot .foot__care p a{display:block;min-height:0}
  .foot .foot__care .social{margin-top:0;height:var(--fr)}
  .foot .foot__col .social a{width:var(--fr);height:var(--fr)}
  .foot .foot__care .social .si,.foot .foot__care .social .li{width:16px;height:16px}
  .foot__list{row-gap:0}
  .foot__col .foot__list a{height:var(--fr);padding:0 0 0 18px;font-size:14px}
}
/* the small print sits inside the footer grid (last row, all columns) */
.foot__in > .foot__fine{grid-column:1/-1;margin-top:0;order:9}   /* order: the columns above use order 2..4 on wide screens, the small print must stay last */
/* >=768 px: bottom line in three parts - copyright on the left, notice in the middle, policy link on the right (owner 08/11: the first two swapped) */
@media (min-width:768px){
  .foot__fine{display:grid;grid-template-columns:1fr auto 1fr;gap:0 20px;text-align:left}
  .foot__fine .foot__links{justify-content:flex-end}
  .foot__fine .foot__note{text-align:center}
}
/* >=1000 px: the three parts share the columns of the footer above (subgrid): the copyright starts under the dealer name, the notice under "Chăm sóc khách hàng", the policy link under the first letter of the page links */
@media (min-width:1000px){
  .foot__in > .foot__fine{grid-template-columns:subgrid;row-gap:0;column-gap:normal}   /* the gutters are the parent's: a gap of its own would shift the items off the columns above */
  .foot__fine .foot__copy{grid-column:1;text-align:left}
  .foot__fine .foot__note{grid-column:2 / 4;text-align:left}
  .foot__fine .foot__links{grid-column:4;justify-content:flex-start;padding-left:18px}   /* 18 px = the chevron the link lines above have */
}
/* phone: the same small print flows as one centred paragraph instead of three stacked lines */
@media (max-width:767px){
  .foot__fine{display:block;line-height:1.6}
  .foot__fine .foot__note,.foot__fine .foot__links,.foot__fine .foot__copy,.foot__fine .foot__links a{display:inline;min-height:0}
  .foot__fine .foot__note::after{content:" "}
  .foot__fine .foot__copy::after{content:". "}   /* the copyright line comes first now: a full stop keeps it apart from the notice */
}
/* Lynk & Co footer: dark, a car photo behind it */
.brand-lynkco .foot{background:linear-gradient(rgba(34,12,18,.82),rgba(20,20,20,.9)),var(--foot-bg,none) center/cover no-repeat,#1d1d1d;color:#fff}
.brand-lynkco .foot h3,.brand-lynkco .foot__tier,.brand-lynkco .foot__note,.brand-lynkco .foot__copy,.brand-lynkco .foot__col p{color:#fff}
.brand-lynkco .foot a{color:#fff}
.brand-lynkco .foot__fine{border-top-color:rgba(255,255,255,.3)}
.brand-lynkco .foot__links a{color:#E4E4E4}
.brand-lynkco .foot__links a:hover{color:#fff}
.brand-lynkco .foot .social a{background:rgba(255,255,255,.2)}

/* back-to-top: one small arrow against the right edge (20 px, 30 px on a phone), NO background, only after the visitor has scrolled; the white arrow carries a dark halo so it reads on light and dark */
.totop{position:fixed;right:0;bottom:14px;z-index:35;display:grid;place-items:center;width:20px;height:20px;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.totop.totop--on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop .li{width:14px;height:14px;filter:drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.55))}
.totop:hover .li{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0,0,0,.8))}
.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:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none;transform:none}}

/* prices page: ONE table for every car. Columns: picture | version (car name + version) | list price | estimated on-road price. The picture cell spans the
   rows of its car and the picture shrinks to the height of those rows. Phone: no picture column, name above version. */
.pr__lead{max-width:760px;margin:-8px 0 clamp(20px,3vw,32px);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.6;color:#3A3F47}
.pr__lead a{color:inherit;font-weight:700;text-decoration:none;white-space:nowrap}
.pr__tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.pr__tbl th,.pr__tbl td{padding:9px 12px;text-align:left;font-size:15px;line-height:1.35;border:0}
.pr__tbl thead th{padding:2px 12px 9px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:1px solid #D5D9DE}
.pr__tbl .pr__pic-h{width:22%}
.pr__tbl thead th:nth-child(2){width:26%}
.pr__tbl td{font-weight:500;font-size:clamp(15px,1.25vw,17px);white-space:nowrap}
.pr__tbl tbody th{font-weight:400}
.pr__car{font-family:var(--font-display);font-size:clamp(14px,1.15vw,16px);text-transform:uppercase;color:inherit;text-decoration:none}
.pr__ver{margin-left:6px;font-size:14.5px;color:#3A3F47}
.pr__grp + .pr__grp > tr:first-child > *{border-top:1px solid #E3E6EA}
.pr__grp > tr:first-child > th,.pr__grp > tr:first-child > td{padding-top:12px}
.pr__grp > tr:last-child > th,.pr__grp > tr:last-child > td{padding-bottom:12px}
.pr__tbl .pr__pic{position:relative;padding:0}
.pr__pic a{position:absolute;left:12px;right:12px;top:50%;height:76px;margin-top:-38px;display:block}   /* every car picture the same size, centred in its cell */
.pr__pic img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.pr__grp:not(.pr__grp--cut) .pr__pic img{object-fit:cover}
@media (max-width:767px){
  .pr__tbl .pr__pic-h,.pr__tbl .pr__pic{display:none}
  .pr__tbl thead th:nth-child(2){width:30%}
  .pr__tbl th,.pr__tbl td{padding:9px 4px}
  .pr__tbl thead th{padding:2px 4px 8px;font-size:11px;letter-spacing:.02em}
  .pr__tbl td{font-size:clamp(11px,3.1vw,13.5px);text-align:right}
  .pr__tbl thead th:nth-child(3),.pr__tbl thead th:nth-child(4){text-align:right}   /* the last letter of each price heading stands over the ₫ below */
  .pr__car{font-size:12.5px}
  .pr__car,.pr__ver{display:block;margin:0}
  .pr__ver{margin-top:2px;font-size:13.5px}
  .pr__tbl tbody tr:nth-child(even) > th,.pr__tbl tbody tr:nth-child(even) > td{background:#F2F4F6}   /* light stripe on every second row, like the wide screens */
  .pr > h1{font-size:clamp(18px,5.4vw,28px);white-space:nowrap}   /* the title stays on one line */
}
/* the heading row of the price table stays under the site bar while the table scrolls (every screen) */
.pr__tbl thead th{position:sticky;top:var(--bar);z-index:2;background:#fff;border-bottom:0;box-shadow:0 1px 0 #D5D9DE}
/* the table is as wide as its content needs and sits in the middle, so the right side is not left empty; prices are left-aligned and the unit lines up */
.pr > h1,.pr__lead,.pr__wrap{width:100%;max-width:940px;margin-left:auto;margin-right:auto}
.pr__n{display:inline-block;min-width:11.8ch;text-align:right;font-variant-numeric:tabular-nums}
.pr__u{margin-left:3px}
@media (max-width:767px){.pr__u{margin-left:2px}}

/* prices table, wide screens (06/11): wider box, more air between the columns, version column left, the two price columns right-aligned, light stripe on every second row */
@media (min-width:768px){
  .pr > h1,.pr__lead,.pr__wrap{max-width:1120px}
  .pr__tbl th,.pr__tbl td{padding-left:26px;padding-right:26px}
  .pr__tbl tbody th,.pr__tbl tbody td{padding-top:11px;padding-bottom:11px}
  .pr__tbl .pr__pic{padding:0}
  .pr__tbl thead th:nth-child(3),.pr__tbl thead th:nth-child(4),.pr__tbl tbody td{text-align:right}
  .pr__tbl tbody tr:nth-child(even) > th,.pr__tbl tbody tr:nth-child(even) > td:not(.pr__pic){background:#F2F4F6}
  .pr__pic a{left:18px;right:18px}
}
@media (min-width:768px){
  /* the version names (Pro, Max, Executive...) start on one vertical line: the car name gets a fixed-width box */
  .pr__car{display:inline-block;min-width:10.6em;vertical-align:baseline}
  .pr__ver{margin-left:0}
}
/* prices page: title centred; the lead and the note sit UNDER the table, followed by the sign-up band */
.pr > h1{text-align:center}
.pr__wrap + .pr__lead{margin-top:clamp(18px,2.4vw,28px);margin-bottom:0}
@media (min-width:768px){.pr__lead{margin-top:clamp(22px,2.6vw,32px)}}
.pr{padding-bottom:clamp(28px,4vw,48px)}
@media (min-width:768px){
  .pr__tbl .pr__pic-h{width:20%}
  .pr__tbl thead th:nth-child(2){width:31%}
  .pr__tbl tbody th{white-space:nowrap}
  .pr__car{min-width:10em}
}
/* prices table heads sit on the same lines as the cells below: same side padding; the price heads end exactly where the ₫ of the prices ends */
@media (min-width:768px){
  .pr__tbl thead th{padding-left:26px;padding-right:26px}
  }
/* car tab: hover (or keyboard focus inside) opens the list of cars; the tab itself still links to the car list of the home page */
.hd__more{position:relative;display:inline-flex}
.hd__menu{display:none;position:absolute;top:100%;left:-16px;min-width:220px;padding:8px 0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);border-radius:2px;z-index:5}
.hd__more:hover .hd__menu{display:block}
.hd__nav .hd__menu a{display:block;padding:11px 20px;font-size:15px;color:#0A0A0A;text-decoration:none;text-transform:none;letter-spacing:0;white-space:nowrap}
.hd__nav .hd__menu a::after{display:none}
.hd__nav .hd__menu a:hover{background:var(--tint)}
.brand-lynkco .hd__menu{background:#111}
.brand-lynkco .hd__nav .hd__menu a{color:#E5E5E5}
.brand-lynkco .hd__nav .hd__menu a:hover{background:#1c1c1c}
/* sign-up band: the brand emblem, enlarged, as a faint lighter-black relief on the black ground, under the fields and the button */
.hm-signup{position:relative;overflow:hidden;isolation:isolate}
.hm-signup::before{content:"";position:absolute;left:50%;top:50%;width:min(1180px,120%);aspect-ratio:221/65.3;transform:translate(-50%,-50%);background:rgba(255,255,255,.07);-webkit-mask:var(--emblem) center/contain no-repeat;mask:var(--emblem) center/contain no-repeat;pointer-events:none;z-index:-1}
@media (max-width:767px){.hm-signup::before{width:230%}}
/* back-to-top: black at 30% so it shows on white; 50% bigger on wide screens (phone size unchanged) */
.totop{background:rgba(0,0,0,.3)}
@media (min-width:768px){.totop{width:30px;height:30px}.totop .li{width:21px;height:21px}}
.pm__btns{display:flex;flex-wrap:wrap;gap:10px}
.pm__btns .btn{flex:0 1 auto;min-width:min(100%,200px);justify-content:center}
.pm__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.pm__btns .btn{width:100%;min-width:0;justify-content:center}
@media (min-width:768px){.pm__txt{max-width:none;white-space:nowrap}}

/* Contact page (both brands): a 2 x 2 grid like the adviser block of the car pages. Row 1: dealer, Monjaro cut-out. Row 2: salesperson, map. */
.ctg{padding-top:clamp(28px,4vw,56px)}
.ctg__grid{display:grid;gap:clamp(36px,3.4vw,48px) clamp(28px,4vw,64px);max-width:1180px;margin:0 auto;align-items:stretch}
.ctg__grid > *{min-width:0}
.ctg__dealer{order:1;align-self:center}
.ctg__sale{order:2;align-self:center}
.ctg__car{order:3;display:grid;place-items:center;overflow:hidden}
.ctg__map{order:4;min-height:300px;background:#E3E6EA}
.ctg__car img{display:block;width:100%;max-width:none;height:auto}
.ctg__map iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
.ctg__dealer h2{margin:0 0 8px;line-height:1.1}
.ctg__dealer .dn{--h:clamp(18px,2.2vw,28px)}
.ctg__nm{margin:0 0 6px;font:700 clamp(20px,2vw,26px)/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.ctg .dealer__tier{margin:0 0 10px}
.ctg__dealer .dealer__line{margin:0 0 6px;color:#333;overflow-wrap:anywhere}
.ctg__dealer .dealer__line a,.ctg__tel a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ctg__tel{margin:0 0 12px;font-weight:700;font-size:17px}
.ctg .person__pts{margin:0 0 16px}
.ctg__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:16px 0 0}
.ctg__btns .btn{width:100%;min-width:0;justify-content:center;white-space:nowrap}
@media (min-width:900px){
  .ctg__grid{grid-template-columns:1fr 1fr}
  .ctg__dealer{order:1}.ctg__car{order:2}.ctg__sale{order:3}.ctg__map{order:4}
  .ctg__car{overflow:visible}
  .ctg__car img{width:122%}   /* the picture carries empty margins around the car: shown larger than its cell, nothing is cut */
}

/* the dealer name in the quote strip: the brand display font on every screen size */
.enq__ten{font-family:var(--font-dealer)}
/* a car with one version still needs room for its picture */
@media (min-width:768px){.pr__grp--one > tr{height:86px}}

/* official video: "Xem tiếp" button (shown after the video was paused because the visitor scrolled away) over the player */
.li--play{-webkit-mask-image:url(icons/play.svg);mask-image:url(icons/play.svg)}
.video__play{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;color:#fff;background:rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.video__play[hidden]{display:none}
.video__play{left:50%;top:50%;transform:translate(-50%,-50%);min-height:52px;padding:0 24px;border-radius:26px;font:600 16px/1 var(--font)}
.video__play .li{width:20px;height:20px;margin-right:8px}
.video__play:hover{background:rgba(0,0,0,.82)}
.video__frame:fullscreen{max-height:none;aspect-ratio:auto;width:100vw;height:100vh}
.video__frame:-webkit-full-screen{max-height:none;aspect-ratio:auto;width:100vw;height:100vh}
.video__frame:fullscreen iframe{object-fit:contain}

/* Spec board and numbered lists (laid out like the brand's own car pages).
   Wide screens: the picture fills one whole half of the screen, edge to edge and as tall as the block. Phones: picture on top, edge to edge. */
.spec,.nl{padding:0;overflow:hidden}
.spec__in,.nl__in{display:flex;flex-direction:column}
.spec__img{position:relative;margin:0;aspect-ratio:4/3}
.spec__img img,.nl__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec__body,.nl__main{padding:clamp(28px,7vw,48px) var(--side) clamp(36px,8vw,64px)}
.spec__body h2,.nl__h{margin:0 0 6px;font-size:clamp(24px,2.4vw,38px)}
.spec__sub{margin:0 0 18px;color:var(--muted);font-size:clamp(15px,1.2vw,18px)}
.spec__rows{margin:0}
.spec__rows > div{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-end;gap:16px;padding:14px 0 10px;border-bottom:1px solid #8A9099}
.spec__rows dt{margin:0 0 6px;font-size:clamp(13.5px,1.05vw,17px);color:#2E2F35;text-align:right}
.spec__rows dd{margin:0;font:700 clamp(24px,2.8vw,42px)/1.05 var(--font-display);color:#0A0A0A;letter-spacing:.01em}
.spec__rows small{margin-left:.35em;font:600 .38em/1 var(--font);color:#3A3F47;letter-spacing:0}
.spec__note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.nl__pics{position:relative;order:-1;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.nl__list{list-style:none;margin:clamp(14px,2vw,24px) 0 0;padding:0}
.nl__item{border-bottom:1px solid #D5D9DE}
.nl__btn{display:grid;grid-template-columns:clamp(48px,5vw,88px) 1fr;align-items:center;gap:8px;width:100%;padding:clamp(14px,1.6vw,22px) 0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.nl__n{font:700 clamp(22px,2.4vw,34px)/1 var(--font-display);color:#2E2F35}
.nl__item.on .nl__n{color:var(--blue)}
.nl__t{font:500 clamp(18px,1.7vw,27px)/1.25 var(--font)}
.nl__item.on .nl__t{font-weight:700}
.nl__d{display:none;margin:0 0 clamp(16px,2vw,24px);padding-left:calc(clamp(48px,5vw,88px) + 8px);font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#3A3F47}
.nl__item.on .nl__d{display:block}
/* pictures of the spec board and lists come in faded, shifted a fifth of their width from the side facing the page centre (wide screens) or from above (phones), and settle in place */
[data-reveal="imgl"],[data-reveal="imgr"]{opacity:0;transform:translateY(-12%)}
[data-reveal="imgl"].in,[data-reveal="imgr"].in{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (min-width:900px){
  .spec__in,.nl__in{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar))}
  .spec__img,.nl__pics{aspect-ratio:auto;min-height:0;height:100%}
  .spec__img{min-height:420px}
  .nl__pics{order:0;min-height:420px}
  .nl--rev .nl__pics{order:-1}
  [data-reveal="imgl"]{transform:translateX(-20vw)}   /* picture on the left comes in from the left edge, 20% of the screen */
  [data-reveal="imgr"]{transform:translateX(20vw)}    /* picture on the right comes in from the right edge */
  .spec__body{position:relative;z-index:3}
  [data-reveal="imgl"].in,[data-reveal="imgr"].in{transform:none}
  .spec__body,.nl__main{align-self:center;padding:clamp(40px,6vw,96px) clamp(32px,6vw,110px)}
  .spec__body{max-width:none}
  .nl__main{max-width:none}
}
@media (prefers-reduced-motion:reduce){[data-reveal="imgl"],[data-reveal="imgr"]{opacity:1;transform:none}}

/* Numbered lists: the picture of the chosen item comes in over the old one. Wide screens (as on the brand's own page): it fades in while shifted 20% of the SCREEN width
   towards the text column, passing UNDER the text, and settles in place. Phones: it slides down from above. The old picture stays underneath until it is covered. */
.nl__pic{opacity:0;transform:translateY(-101%);transition:transform .95s cubic-bezier(.2,.7,.2,1),opacity .85s ease;z-index:0}
.nl__pic.leave{opacity:1;transform:none;transition:none;z-index:1}
.nl__pic.on{opacity:1;transform:none;z-index:2}
@media (max-width:899px){.nl[data-dir="1"] .nl__pic:not(.on):not(.leave){transform:translateY(101%)}}   /* going on (scroll down / a later item): the picture comes up from below; going back: from above (the rule above) */
@media (min-width:900px){
  .nl:not(.nl--rev) .nl__pic{transform:translateX(20vw)}    /* picture on the right: starts 20% of the screen out at the right edge and comes in */
  .nl--rev .nl__pic{transform:translateX(-20vw)}              /* picture on the left: comes in from the left edge */
  .nl .nl__pic.leave,.nl .nl__pic.on{transform:none}
  .nl{overflow-x:clip}                                       /* the picture starts outside the screen: nothing spills sideways */
  .nl__pics{overflow:visible;z-index:1}
  .nl__main{position:relative;z-index:3}                     /* ... and the text stays above it */
}
@media (prefers-reduced-motion:reduce){.nl__pic{transition:none}}

/* Picture strip (safety): one row, picture over text, turns round; 4 pictures wide, 1 picture and a peek of the next on phones */
.strip{padding:clamp(40px,6vw,88px) 0 clamp(40px,6vw,88px)}
.strip__h{margin:0 0 clamp(18px,2.4vw,32px);padding:0 var(--side);font-size:clamp(24px,2.4vw,38px)}
.strip__wrap{position:relative;padding-left:var(--side)}   /* phones: no padding on the right, so the edge of the next picture shows */
.strip__track{display:flex;gap:clamp(12px,1.6vw,22px);margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.strip__track::-webkit-scrollbar{display:none}
.strip__item{flex:0 0 78%;scroll-snap-align:start;min-width:0}
.strip__item figure{margin:0}
.strip__item img{display:block;width:100%;aspect-ratio:14/15;object-fit:cover;background:var(--tint)}
.strip__item figcaption{padding-top:14px}
.strip__item b{display:block;font-size:clamp(17px,1.3vw,21px);line-height:1.25;margin-bottom:6px}
.strip__item span{display:block;font-size:clamp(14.5px,1.05vw,17px);line-height:1.55;color:#3A3F47}
.strip__nav{position:absolute;top:calc(50% - 60px);z-index:3;display:none;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.strip__nav:hover{background:rgba(0,0,0,.8)}
.strip__nav--p{left:calc(var(--side) + 8px)}.strip__nav--n{right:calc(var(--side) + 8px)}
@media (max-width:599px){   /* phones: the first picture runs to the left edge of the screen; arrows on the pictures, swipe works too */
  .strip__wrap{padding-left:0}
  .strip__item figcaption{padding-left:var(--side);padding-right:8px}
  .strip__nav{display:grid;width:42px;height:42px}
  .strip__nav--p{left:8px}.strip__nav--n{right:8px}
}
@media (min-width:600px){.strip__item{flex-basis:calc((100% - 22px) / 2.4)}.strip__wrap{padding-right:0}}
@media (min-width:900px){
  .strip__wrap{padding-right:var(--side)}
  .strip__item{flex-basis:calc((100% - 3 * clamp(12px,1.6vw,22px)) / 4)}
  .strip__nav{display:grid}
}

/* Pinned steps (EX2 trial): the wrapper is as tall as one screen plus a stretch of scroll for every further step; the block stays pinned under the header while the
   page scrolls through it, and steps.js picks the picture / item from the scroll position */
.stp{--step:26svh;position:relative;height:calc(100vh - var(--bar) - var(--dock) + (var(--n) - 1) * var(--step));height:calc(100svh - var(--bar) - var(--dock) + (var(--n) - 1) * var(--step))}
.stp__pin{position:sticky;top:var(--bar);height:calc(100vh - var(--bar) - var(--dock));height:calc(100svh - var(--bar) - var(--dock));overflow:hidden}
.stp__pin > section{height:100%;min-height:0}
main>.stp{position:relative;background:var(--bg)}   /* solid, so a pinned block never shows the blocks behind it */
.stp__pin{background:var(--bg)}
.stp__pin > .sec--tint{background:var(--tint)}
.stp .slider{scroll-snap-type:none;overflow-x:hidden;touch-action:pan-y}   /* up/down = the page; a swipe sideways is read by steps.js and presses the arrow */
html.stp-hold{overflow:hidden}   /* step gap (steps.js): the page cannot move while a step is changing */
.stp .nl__in{height:100%;min-height:0}
.stp .nl__pics{flex:0 0 34svh;aspect-ratio:auto;height:auto}
.stp .nl__main{padding-top:clamp(14px,3vw,24px);padding-bottom:12px;overflow:hidden}
.stp .nl__item .nl__btn{padding-top:10px;padding-bottom:10px}
.stp .nl__d{margin-bottom:10px}
@media (min-width:900px){
  .stp{--step:30svh}
  .stp .nl__pics{flex:none;height:100%;min-height:0}
  .stp .nl__main{overflow:visible;padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(40px,6vw,96px)}
  .stp .nl__item .nl__btn{padding-top:clamp(14px,1.6vw,22px);padding-bottom:clamp(14px,1.6vw,22px)}
  .stp .nl__d{margin-bottom:clamp(16px,2vw,24px)}
}
@media (prefers-reduced-motion:reduce){
  .stp{height:auto}
  .stp__pin{position:static;height:auto;overflow:visible}
  .stp__pin > section{height:auto}
  .stp .slider{scroll-snap-type:x mandatory;overflow-x:auto;touch-action:auto}
  .stp .slider__ctl{display:flex}
}


/* the design chapter intro right under the video on phones and tablets (title and line come in with the usual reveal) */
@media (max-width:1023px){
  .chap--fill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px var(--side) 44px;text-align:center;background:var(--bg)}   /* just enough room, not the whole rest of the screen */
  .chap--fill h2{margin:0;font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .chap--fill p{margin:0;max-width:34em;font-size:clamp(16px,4.2vw,20px);line-height:1.55;text-wrap:pretty}
}

/* a pinned block the visitor has already passed (or jumped past) is a plain block again: free scrolling, the slider and the list used by hand */
.stp.stp--seen{height:auto}
.stp--seen .stp__pin{position:static}
.stp--seen .slider{scroll-snap-type:x mandatory;overflow-x:auto;touch-action:auto}
html:has([data-steps]){overflow-anchor:none}   /* the page is shifted by hand when a block shrinks above the visitor */

/* battery figures as a list inside the text panel (same rows as the spec board) */
.pane__txt .spec__rows{margin-top:clamp(14px,2.4vw,26px)}
.pane__txt .spec__rows > div:first-child{border-top:1px solid #8A9099}

/* spec board and battery list on ONE screen: sizes follow the screen height as well as the width, so nothing spills over on a low laptop screen */
.spec__body{padding-top:clamp(24px,5vh,80px);padding-bottom:clamp(24px,5vh,80px)}
.spec__rows > div{padding:clamp(7px,1.5vh,14px) 0 clamp(5px,1.1vh,10px)}
.spec__rows dd{font-size:clamp(22px,min(2.8vw,5vh),42px)}
.spec__act{margin:clamp(14px,2.6vh,26px) 0 0}
.spec__act .btn{min-width:clamp(200px,16vw,260px);justify-content:center}
.pane__txt .spec__rows dd{font-size:clamp(20px,min(2.5vw,4.4vh),38px)}
.pane__txt .spec__rows > div{padding:clamp(6px,1.2vh,12px) 0 clamp(4px,.9vh,9px)}
/* the battery's three promises are rows too: the words in the brand font on the left, a green tick at the right edge */
.spec__tick dd{font-size:clamp(17px,min(1.9vw,3.4vh),28px)!important}
.spec__tick dt{width:1em;font-size:clamp(17px,min(1.9vw,3.4vh),28px);position:relative;height:1em;margin:0 0 .2em}
.spec__tick dt::before{content:"";position:absolute;left:50%;top:44%;width:.38em;height:.7em;border:solid #16A34A;border-width:0 .16em .16em 0;transform:translate(-50%,-50%) rotate(45deg)}
/* low laptop screens: the same smaller top and bottom space in every text panel, so the 7-row battery list still fits one screen */
@media (min-width:768px) and (max-height:760px){.drive__txt,.pane__txt,.pane--rev .pane__txt{--gv:clamp(28px,6vh,56px)}}

/* ===== header v3 (car pages): the tab bar shows EVERY tab from 1360 px up; below that (laptops, tablets, phones) the logo and the menu button only,
   the menu lists all the tabs. No chip row, no hidden tabs. ===== */
.chips{display:none!important}
.topnav a[data-nav="tu-van"],.topnav a[data-nav="pin"],.topnav a[data-nav="cong-nghe"],.topnav a[data-nav="mau-xe"]{display:inline-block}
.topnav{display:none;gap:clamp(10px,1.15vw,24px)}
.topbar__in > .btn{display:none}
.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}
.brand-lynkco .topbar .burger i{background:#fff}
.topbar__in{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);padding:0 var(--side);transform:none;opacity:1}
.topbar .brand{margin-right:auto}
.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(340px,86vw);padding:64px 0 24px;overflow:auto;background:#fff;transform:translateX(100%);transition:transform .35s 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__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}
@media (min-width:768px){.topbar__in{padding:0 var(--edge)}}
@media (min-width:1360px){
  .topnav{display:flex;justify-self:auto;margin-right:0}
  .topbar__in > .btn{display:inline-flex}
  .topbar__in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.5vw,26px)}
  .topnav{justify-self:end;margin-right:clamp(8px,1vw,20px)}
  .burger,.drawer{display:none}
}
.topbar{overflow:visible}

/* ===== numbered lists: the number of the open item is red ===== */
.nl__item.on .nl__n,.items__n{color:var(--accent)}

/* ===== specs window: wider, and every version button always in view; the highest version opens first ===== */
@media (min-width:768px){
  .specs-dlg{width:min(1240px,92vw)}
  .spec-top span{width:46%;flex-wrap:wrap;justify-content:flex-start}
  .specs__body.cmp .spec-top span{width:46%}
  .specs__body.cmp .spec-g tbody th{width:46%}
  .spec-top .specs__only,.spec-top .specs__cmp,.specs__body.cmp .spec-top .specs__only,.specs__body.cmp .spec-top .specs__cmp{display:inline-flex;align-items:center}
}
.spec-top .specs__only[aria-pressed=true]{background:#0A0A0A;color:#fff;border-color:#0A0A0A}

/* ===== estimate block: heading + small print, two cards on ONE grid (shared rows, so both sides line up), then the call to action ===== */
.est{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,24px);padding-block:clamp(16px,3.4vh,48px);justify-content:center}
.est > *{min-width:0;max-width:100%}
.est__head h2{margin:0}
.est__head .note{margin:4px 0 0;max-width:none}
.est__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,28px)}
.est__grid > div{background:#fff;border:1px solid var(--line);padding:clamp(12px,2vh,28px) clamp(18px,2.2vw,32px)}
.est__grid h3{margin:0 0 6px;text-align:center;font-size:clamp(17px,1.5vw,21px);text-transform:uppercase;letter-spacing:.02em}
.est__car{margin:0;text-align:center;text-transform:uppercase;font:700 clamp(24px,2.3vw,34px)/1.15 var(--font-display);letter-spacing:.02em}
.est .ver--est{margin:8px 0 6px}
/* versions: one joined strip of rectangular buttons across the card; a black block slides under the chosen one (one, two or three versions) */
.est .ver--est{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:0;padding:3px;background:#E6E8EC;border-radius:3px}
.est .ver--est::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));background:#0A0A0A;border-radius:2px;transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.4,0,.2,1)}
.est .ver--est button{min-height:42px;padding:0 8px;border:0;border-radius:2px;background:transparent;color:#0A0A0A;font-size:15px;line-height:1.2;transition:color .25s}
.est .ver--est button[aria-pressed=true]{background:transparent;color:#fff}
.est .ver--one button{cursor:default}
@media (prefers-reduced-motion:reduce){.est .ver--est::before{transition:none}}
.est__grid .pl{margin:0}
.est__grid .pl div{padding:clamp(5px,1vh,12px) 0}
.est__grid .pl dd{font-size:clamp(17px,min(1.5vw,2.8vh),21px)}
.est__grid .pl__big{font-size:clamp(20px,min(2.4vw,4.2vh),32px)}
.est__grid .fld{margin:clamp(4px,1vh,12px) 0 2px}
@media (min-width:768px){
  .est__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);row-gap:0}   /* no row gap: the cards inherit it through the subgrid */
  .est__grid > div{grid-row:1 / span 6;display:grid;grid-template-rows:subgrid}
  .est__grid > div > *{align-self:center}
  .est__grid .pl{display:contents}
  .est__grid .pl div{align-self:stretch;align-items:center}
  .est__grid .fld{margin:0}
  .est__grid .ver--est{margin:0}
  .est__grid{column-gap:clamp(8px,.9vw,14px)}
}   /* left: list price, fee, price on the road = three rows, level with the three instalment figures on the right */
@media (max-width:767px){.est__grid .pl__big{font-size:22px}.est__grid .pl dd{font-size:18px}}
/* sliders: the track is the whole 0 to 100 % scale; the thumb moves only inside data-lo..data-hi, the ends outside are greyed */
.est .rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:2px 0 0;padding:0;background:transparent;cursor:pointer;
  --v:0;
  --trk:linear-gradient(to right,#0A0A0A 0 calc(var(--v) * (100% - 24px) + 12px),#D3D7DD calc(var(--v) * (100% - 24px) + 12px) 100%)}
.est .rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--trk)}
.est .rng::-moz-range-track{height:6px;border-radius:3px;background:var(--trk)}
.est .rng::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#0A0A0A;border:3px solid #fff;box-shadow:0 0 0 1px #0A0A0A,0 2px 6px rgba(0,0,0,.25)}
.est .rng::-moz-range-thumb{box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:#0A0A0A;border:3px solid #fff;box-shadow:0 0 0 1px #0A0A0A,0 2px 6px rgba(0,0,0,.25)}
.est .rng:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* call to action: title and line centred in two rows, then both red buttons on one row (also on a phone) */
.est__cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.6vh,16px);background:#0A0A0A;color:#fff;padding:clamp(12px,2vh,26px) clamp(18px,3vw,40px)}
.est__say{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.est__say b{font:700 clamp(16px,min(1.6vw,3.2vh),24px)/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.est__say span{color:#C9CDD3;font-size:clamp(14px,1.05vw,16px);text-wrap:pretty}
.est__btns{display:flex;justify-content:center;gap:12px;width:100%}
.est__btns .btn{flex:1 1 0;min-width:0;max-width:280px;gap:8px;white-space:nowrap}
.est__btns .li{flex:none;width:18px;height:18px}
@media (min-width:768px){.est__btns{gap:clamp(16px,2vw,28px)}.est__btns .btn{max-width:230px}}   /* large screens: shorter buttons, a little more room between them */
@media (max-width:767px){
  .est__btns{gap:8px}.est__btns .btn{padding:0 8px;font-size:14px}
  .est__cta{padding-inline:14px}
  .est__say span{font-size:13px;line-height:1.45;text-align:justify;text-align-last:center}   /* three lines on a phone, never one word alone on the last line */
  .est .note{font-size:12px;line-height:1.45;text-wrap:pretty}
}
/* site page: car picker. Large screens: the label and the buttons on one row; phones: a drop-down card under the label */
.est__pick{display:flex;flex-direction:column;gap:6px}
.est__pick-h{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.est .ver--cars{display:none;margin:0;gap:8px}
.est .ver--cars button{min-height:40px;padding:0 16px;font-size:14px;text-transform:uppercase}
.est__sel{width:100%;min-height:48px;padding:0 40px 0 16px;font:700 15px var(--font);text-transform:uppercase;color:#0A0A0A;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;border:1px solid #8A9099;border-radius:2px;-webkit-appearance:none;appearance:none;cursor:pointer}
@media (min-width:768px){
  .est__pick{flex-direction:row;align-items:center;gap:18px}
  .est__pick-h{flex:none}
  .est .ver--cars{display:flex;flex-wrap:wrap}
  .est__sel{display:none}
}
.est--page h1{margin:0}

/* poster price: white label and number with a soft shadow so they read on a light photo (no dark panel behind) */
.po__gia small{color:#fff;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.6)}
.po__gia b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.6)}
/* model name set in the brand font (EX2): capitals as tall as the GEELY wordmark (cap height is .70 em) and standing on the same line */
.po__ten--font span{font-size:calc(var(--h) / .70);line-height:.7;transform:translateY(calc(var(--h) * .143))}
/* top bar call button: phone icon and the salesperson number, in red (every site page, both brands) */
.hd__call,.brand-lynkco .hd__call{color:var(--accent);font-weight:700;letter-spacing:.02em;gap:7px}
.hd__call:hover,.brand-lynkco .hd__call:hover{color:var(--accent-d)}
.hd__call .li{width:17px;height:17px;flex:none}
.hd__call::after,.brand-lynkco .hd__call::after{background:var(--accent)}

/* phone menu (every page): shorter and tidier. First button = quote request (+ a call button beside it), site links as slim rows, the in-page sections and the other cars as
   two-column lists; text starts 32 px from the panel edge */
.drawer__panel{padding:56px 0 18px}
.drawer__panel a.drawer__site{padding:11px 32px;font-size:16px}
.drawer__ctas{display:flex;gap:8px;margin:2px 32px 10px}
.drawer__panel .drawer__ctas a{margin:0;padding:0 12px;min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:0;font-size:15px;font-weight:600;white-space:nowrap}
.drawer__panel .drawer__ctas a.drawer__cta{flex:1 1 auto;color:#fff}
.drawer__panel .drawer__ctas a.drawer__call{flex:0 0 auto;color:#0A0A0A;background:#fff;border:1px solid #0A0A0A}
.drawer__call .li{width:16px;height:16px}
.brand-lynkco .drawer__panel .drawer__ctas a.drawer__call{color:#fff;background:transparent;border-color:#fff}
.drawer__sub{margin:14px 32px 4px;font-size:12px}
.drawer__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding:0 32px}
.drawer__panel .drawer__grid a,.drawer__grid .drawer__car{padding:9px 0;font-size:15px;font-weight:400;line-height:1.25}
.drawer__panel .drawer__grid a.on{color:var(--accent);font-weight:600}
.drawer__grid .drawer__car.is-soon{padding:9px 0;font-size:15px}

/* colour block (EX2 sample): title, one-line count, version buttons only when the versions differ in colour, then the call to ask which colour is in stock */
.paint__ver{margin:0 0 2px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.paint__ask{margin:14px 0 12px;max-width:440px}
.paint__ask p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#3A3F47;text-wrap:pretty}
@media (max-width:767px){
  #mau-xe #colour-tag{display:block}
  #mau-xe .colors__img{transform:translateX(calc((.5 - var(--cx,.5)) * 100%))}   /* car body centred on the screen, shadow ignored */
}
/* phones: the colour block and the estimate run nearly edge to edge (16 px gutter for text, the estimate cards touch both edges) */
@media (max-width:767px){
  #mau-xe.paint{padding-inline:16px}
  #mau-xe .colors__img{width:calc(100% + 32px);margin:0 -16px}
  #mau-xe h2{white-space:normal;text-wrap:balance;font-size:22px}
  .paint__ask p{text-align:justify;text-align-last:left}
  .est{padding-inline:0}
  .est__head,.est__pick{padding-inline:16px}
  .est__grid > div{border-inline:0;padding-inline:16px}
}
/* phones: text stays left-aligned but sits 22 px from the edge (not hugging it); the lines of the call-to-action box are balanced, no word left alone */
@media (max-width:767px){
  #mau-xe.paint{padding-inline:22px}
  #mau-xe .colors__img{width:calc(100% + 44px);margin:0 -22px}
  .paint__ask p{text-align:left;text-align-last:auto;text-wrap:pretty}
  .est__head,.est__pick{padding-inline:22px}
  .est__grid > div{padding-inline:22px}
  .est .note{text-wrap:pretty}
  .est__say b{text-wrap:balance}
  .est__say span{text-align:center;text-align-last:auto;text-wrap:balance}
}
/* price figures of the estimate cards: no line above the first row, none under the last */
.est__grid .pl div:first-child{border-top:0}
.est__grid .pl div:last-child{border-bottom:0}

/* quick window, round 4 (owner, 06/11): laid out like the reference dealer page. Two columns: picture panel (car + list price) and the form; phones: panel above, form below */
.quick{width:min(780px,94vw);max-height:92vh;max-height:92svh;overflow:auto;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:2px}
.quick__form{display:grid;grid-template-columns:1fr 1fr;padding:0}
.quick{overflow-x:hidden;overscroll-behavior:contain}   /* a window that is a little wider inside than outside could be dragged left and right */
.quick__pic,.quick__body,.quick__pic > *{min-width:0;max-width:100%}
.quick__price b{overflow-wrap:anywhere}
.quick__pic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 18px;text-align:center;color:#0A0A0A;background:linear-gradient(160deg,#F2F5F9,#C6D3E4)}
.quick__pic img{display:block;width:100%;max-width:360px;height:auto}
.quick__name{margin:0;font:700 clamp(22px,2.4vw,30px)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.quick__price{margin:0;font-size:14px;color:#3A3F47}
.quick__price b{display:block;margin-top:2px;font:800 clamp(22px,2.4vw,28px)/1.1 var(--font-display);color:#0A0A0A}
.brand-lynkco .quick__pic{background:linear-gradient(160deg,#2B2B2B,#050505);color:#fff}
.brand-lynkco .quick__price{color:#C9C9C9}
.brand-lynkco .quick__price b{color:#fff}
.quick__body{padding:clamp(22px,3vw,32px)}
.quick__body h2{text-wrap:balance;margin:0 0 14px;padding-right:30px;text-align:left;font-size:clamp(18px,1.9vw,22px);line-height:1.2}
.quick__body .btn--block{margin-top:16px}
.quick__body .quick__note{text-align:left;margin-top:10px}
.quick select{width:100%;min-height:50px;padding:0 12px;font:400 16px var(--font);border:1px solid #8A9099;border-radius:2px;background:#fff;color:#0A0A0A}
.quick__x{z-index:2;background:rgba(255,255,255,.85);border-radius:50%;width:36px;height:36px;top:8px;right:8px;font-size:24px}
@media (max-width:719px){
  .quick{width:min(440px,94vw)}
  .quick__form{grid-template-columns:1fr}
  .quick__pic{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 14px;padding:14px 16px}
  .quick__pic img{max-width:200px}
  .quick__name{flex:1 0 100%;font-size:20px}
  .quick__price{flex:1 0 100%;font-size:13px}
  .quick__price b{display:inline;margin-left:6px;font-size:19px}
  .quick__body{padding:18px 20px 22px}
}

/* popup fields like the reference page: underlined fields with an icon on the left; the car drop-down is a light box with a car icon; one-line title */
.li--user{-webkit-mask-image:url(icons/user.svg);mask-image:url(icons/user.svg)}
.quick{width:min(800px,94vw)}
.quick__body h2{white-space:nowrap;text-wrap:nowrap;padding-right:0;font-size:clamp(14px,4vw,17px);letter-spacing:0}
.quick__pick{margin:-6px 0 6px;font-size:13px;line-height:1.4;color:#3A3F47}
.quick__pick:empty{display:none}
.quick .qf{display:flex;align-items:center;gap:12px;margin-top:6px;border-bottom:1px solid #0A0A0A;color:#0A0A0A}
.quick .qf .li{width:20px;height:20px;flex:none}
.quick .qf input,.quick .qf select{flex:1 1 auto;min-width:0;width:auto;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;font:400 16px var(--font);color:#0A0A0A;outline-offset:2px}
.quick .qf input::placeholder{color:#0A0A0A;opacity:.8}
.quick .qf--sel{margin-top:12px;padding:0 12px;border:1px solid #C3C8CF}
.quick .qf--sel select{min-height:46px;-webkit-appearance:none;appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right center}
.quick .err{margin:2px 0 0}
.quick__body .quick__note{margin-top:12px;font-size:13px;text-wrap:balance}
@media (max-width:719px){.quick{width:min(440px,94vw)}.quick__body h2{font-size:clamp(13px,3.9vw,16px)}}
.quick__body h2{text-align:center}   /* the popup title is centred over the form */

/* quote window, round 5 (owner): icons in one column, the drop-down fills its frame, soft shadow instead of a dark outline, bigger car, centred button, one-line note,
   photo panel until a car is picked, Lynk & Co = light picture panel + dark form */
.quick__pic{position:relative;padding:22px 6px}
.quick__pic img{width:calc(100% + 24px);max-width:none;margin-inline:-12px}
.quick__pic .quick__hero{display:none;position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}
.quick__pic--photo{min-height:190px}
.quick__pic.quick__pic--photo .quick__hero{display:block}
.quick__pic--photo > :not(.quick__hero){display:none}
.quick .qf{padding-left:12px}
.quick .qf input,.quick .qf select{outline:none}
.quick .qf:focus-within{box-shadow:0 4px 14px rgba(0,0,0,.18)}
.quick .qf--sel{position:relative;padding:0}
.quick .qf--sel .li{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.quick .qf--sel select{width:100%;padding:0 38px 0 44px;background-position:right 14px center}
.quick select option{color:#0A0A0A;background:#fff}
.quick__body .quick__note{text-align:center;white-space:normal;text-wrap:balance}   /* centred like the title and the button; wraps instead of running past the edge on narrow phones */
@media (min-width:720px){
  .quick__body .quick__note{text-align:center}
}
@media (max-width:719px){
  .quick__pic img{width:270px;max-width:100%;margin-inline:0}
  .quick__body .quick__note{font-size:clamp(10.5px,3.2vw,13px)}
}
.brand-lynkco .quick__pic{background:linear-gradient(160deg,#F4F5F7,#D3D7DC);color:#0A0A0A}
.brand-lynkco .quick__price{color:#3A3F47}
.brand-lynkco .quick__price b{color:#0A0A0A}
.brand-lynkco .quick{background:#0A0A0A}
.brand-lynkco .quick__body{background:#0A0A0A;color:#fff}
.brand-lynkco .quick__body h2,.brand-lynkco .quick .qf,.brand-lynkco .quick .qf input,.brand-lynkco .quick .qf select{color:#fff}
.brand-lynkco .quick .qf{border-bottom-color:#fff}
.brand-lynkco .quick .qf input::placeholder{color:#fff}
.brand-lynkco .quick .qf--sel{border-color:#5A5F66}
.brand-lynkco .quick .qf--sel select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8'/%3E%3C/svg%3E")}
.brand-lynkco .quick .qf:focus-within{box-shadow:0 4px 14px rgba(255,255,255,.16)}
.brand-lynkco .quick .err{color:#FF8D8D}
.brand-lynkco .quick__pick,.brand-lynkco .quick__note,.brand-lynkco .quick__note a{color:#C9C9C9}
/* quote window, round 6: shorter fields (40 px), the underline is drawn above the input (so nothing, autofill included, can cover it), softer focus shadow */
.quick .qf{position:relative;margin-top:4px;border-bottom:0}
.quick .qf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#0A0A0A;pointer-events:none;z-index:2}
.quick .qf--sel{margin-top:10px;border:1px solid #C3C8CF}
.quick .qf--sel::after{display:none}
.quick .qf input,.quick .qf select{min-height:40px}
.quick .qf--sel select{min-height:42px}
.quick .qf:focus-within{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.quick .qf input:-webkit-autofill,.quick .qf input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #fff inset;-webkit-text-fill-color:#0A0A0A}
.brand-lynkco .quick .qf::after{background:#fff}
.brand-lynkco .quick .qf input:-webkit-autofill,.brand-lynkco .quick .qf input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #0A0A0A inset;-webkit-text-fill-color:#fff}
.brand-lynkco .quick .qf:focus-within{box-shadow:0 3px 10px rgba(255,255,255,.14)}
/* poster buttons are now buttons (specs table, photos); the top bar shows the salesperson's number in red like the site pages */
.po__nut :is(a,button){font-family:inherit;cursor:pointer}
.po__nut button{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 14px;border-radius:0;color:#fff;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 button:hover{background:rgba(255,255,255,.2)} .po__nut button:active{transform:scale(.97)}
@media (max-width:767px){.po__nut button{min-height:44px;font-size:15px}}
body .topbar .btn.topbar__call,.brand-lynkco .topbar .btn.topbar__call{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:700;letter-spacing:.02em}
body .topbar .btn.topbar__call:hover,.brand-lynkco .topbar .btn.topbar__call:hover{color:var(--accent-d)}
.topbar__call .li{width:17px;height:17px;flex:none}
body .topbar .btn.topbar__call::after,.brand-lynkco .topbar .btn.topbar__call::after{background:var(--accent)}
/* photo viewer: the counter sits in front of the caption line; the quote and test-drive buttons sit in the frame, above the thumbnails */
.galv[open]{grid-template-rows:minmax(0,1fr) auto auto auto}
.galv .galv__n{position:static;display:inline;margin-right:10px;font-size:14px;font-weight:700;letter-spacing:0;color:#fff}
.galv__cta{display:flex;justify-content:center;gap:10px;padding:2px 16px 8px}
.galv__cta .btn{flex:1 1 0;max-width:230px;min-height:44px;padding:0 12px;white-space:nowrap}
.galv__nav{top:calc((100% - 212px) / 2)}
@media (max-width:767px){.galv .galv__n{display:block;margin:0 0 2px}}   /* phones: the counter is the line above the caption */
@media (max-width:767px){body .topbar .btn.topbar__call,.brand-lynkco .topbar .btn.topbar__call{display:none}}   /* phones: logo and menu button only */

/* quote window: when the visitor chose a colour, the picture is the car in that colour (the car body, not its shadow, centred) */
.quick__pic{overflow:hidden}
.quick__pic img{transform:translateX(calc((.5 - var(--cx,.5)) * 100%)) scaleX(var(--flip,1))}   /* a colour picture that shows the nose to the right is mirrored: every car faces left */

/* pinned slider: the picture changes by sliding up or down with the scroll (steps.js); the old picture is a copy sliding out over the track; nothing may spill */
.stp .slider{overflow:hidden}
.stp--seen .slider{overflow-x:auto;overflow-y:hidden}
.slide--ghost::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}
/* call-to-action box: the sentence IS the heading now (no separate title), brand font, justified, as few lines as possible */
.est__say{width:100%;align-items:stretch}
.est__say b{display:block;font:700 clamp(16px,min(1.55vw,3vh),22px)/1.4 var(--font-display);text-transform:none;letter-spacing:0;text-align:justify;text-align-last:center;text-wrap:pretty;hyphens:manual}
@media (max-width:767px){.est__say b{font-size:clamp(13px,3.9vw,16px);text-wrap:pretty}}
/* large screens: the sentence of the call-to-action box is two fixed lines; the second one is always "dành riêng cho bạn trong tháng này." */
@media (min-width:768px){
  .est__l2{display:block}
  .est__say b{text-align:center;text-align-last:center}
}
.est__say b .est__l2{color:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;text-align:inherit}   /* the second line is part of the sentence, not the old small text */
/* 50/50 blocks, large screens: the information column is laid out like the spec board - centred in its half with the same even padding on both sides and no narrower inner column,
   so the white space left and right of the text is equal */
@media (min-width:768px){
  .pane__txt,.pane--rev .pane__txt{justify-content:center;padding:clamp(28px,5vh,80px) clamp(32px,6vw,110px)}
  .pane__txt > *{width:auto;max-width:none;margin-left:0;margin-right:0}
  .drive__txt{max-width:none;margin:0;width:auto;padding:32px clamp(32px,6vw,110px) 96px}
  .ds__ctl{left:50%}
}

/* Không gian block: the figures and the official rows are one list laid out like the spec board (big value left, name right, a rule under every row) */
.drive__txt .spec__rows{margin-top:clamp(14px,2.4vw,26px)}
.drive__txt .spec__rows > div:first-child{border-top:1px solid #8A9099}
.drive__txt .spec__rows dd{font-size:clamp(20px,min(2.5vw,4.4vh),38px)}
.drive__txt .spec__rows > div{padding:clamp(6px,1.2vh,12px) 0 clamp(4px,.9vh,9px)}
.drive__txt .spec__rows > div.spec__txt dd,.spec__rows > div.spec__txt dd{font:700 clamp(16px,min(1.5vw,2.8vh),24px)/1.15 var(--font);letter-spacing:0}

/* poster, large screens: the bottom band is an even grid - four figures in four equal columns (centred, labels on one line), the price and the two buttons in the last two
   columns, everything centred in its cell. The little down arrow is gone (it sat on top of the information). */
@media (min-width:768px){
  .po__xuong{display:none}
}
@media (min-width:1100px){
  /* one shared grid of two rows: row 1 = the big figures and the price line, row 2 = the figure names and the two buttons, so both sides line up row for row; no vertical rules */
  .po__duoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) repeat(2,minmax(0,1.4fr));grid-template-rows:auto auto;align-items:center;column-gap:clamp(12px,1.6vw,28px);row-gap:clamp(6px,1.2vh,12px);justify-content:stretch}
  .po__so{grid-column:1 / span 4;grid-row:1 / span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;flex:none;max-width:none;gap:0;column-gap:clamp(12px,1.6vw,28px);text-align:center}
  .po__so li{grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;justify-items:center;align-items:center;text-align:center;padding:0;border:0}
  .po__so .stats__l{font-size:13px;line-height:1.35;text-wrap:balance;margin:0}
  .po__phai{grid-column:5 / span 2;grid-row:1 / span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;flex:none;gap:0;column-gap:clamp(12px,1.6vw,28px);align-items:center;justify-items:center;text-align:center}
  .po__gia,.po__nut{display:contents}
  .po__gia small{grid-column:1;grid-row:1}
  .po__gia b{grid-column:2;grid-row:1;font-size:clamp(20px,1.85vw,28px);white-space:nowrap}
  .po__nut > :nth-child(1){grid-column:1;grid-row:2;width:100%}
  .po__nut > :nth-child(2){grid-column:2;grid-row:2;width:100%}
}
/* narrower large screens: the figures take the full width, the price and buttons come under them, both centred */
@media (min-width:768px) and (max-width:1099px){
  .po__duoi{flex-direction:column;align-items:stretch;gap:clamp(14px,2.2vh,24px)}
  .po__so{flex:none;max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
  .po__so li{display:flex;flex-direction:column;align-items:center;text-align:center}
  .po__phai{flex:none;align-items:center;text-align:center}
  .po__gia{justify-content:center}
  .po__nut{width:100%;max-width:520px}
}
/* poster: slimmer buttons, and the figure names sit 30% closer to their figures */
@media (min-width:768px){.po__nut a,.po__nut button{min-height:42px}}
@media (max-width:767px){.po__nut a,.po__nut button{min-height:40px}}
/* phones: the price label and the price sit at the right edge, level with the right-hand captions of the figures above them */
@media (max-width:767px){.po__gia{flex-direction:column;align-items:flex-end;text-align:right}}
@media (min-width:1100px){
  /* row 1: the figures, the price label and the price stand on ONE baseline (descenders and the underline of the dong sign hang below it); row 2: the names and the buttons are
     centred on one line; the buttons are slim (34 px) so they sit level with the names */
  .po__duoi{row-gap:4px}
  .po__so,.po__phai{row-gap:normal}   /* a subgrid takes the row gap of the grid it sits in */
  .po__so .stats__n,.po__gia small,.po__gia b{align-self:baseline}
  .po__so .stats__l,.po__nut > *{align-self:center}
  .po__nut a,.po__nut button{min-height:34px;font-size:15px;padding:0 12px}
}

/* poster title: the wordmark + model name sit lower so their top is level with the top of the emblem on the right; the tagline is in the brand font, a bit larger, and the space
   between the two lines is doubled */
.po__tren{gap:24px}
.po__kh{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,5vw,27px);letter-spacing:.01em}
@media (min-width:768px){
  .po__tren{gap:calc(clamp(10px,1.6vh,20px) * 2)}
  /* same distance the emblem is dropped by (see .po__bt top), so the top of the wordmark is level with the top of the emblem */
  body:not(.brand-lynkco) .po__tren{padding-top:calc(clamp(46px,6vw,92px) * .49 - clamp(72px,6vw,96px) / 6.8)}
}
@media (min-width:768px) and (max-height:780px){body:not(.brand-lynkco) .po__tren{padding-top:calc(clamp(38px,5vw,64px) * .49 - clamp(72px,6vw,96px) / 6.8)}}
@media (min-width:1024px){.po__kh{font-size:calc(var(--h) * 1.1)}}   /* brand font is wide: about as wide as the model name above it, a little larger than the old italic */

/* estimate call to action: two buttons that go side by side while they fit and otherwise each take their own row (narrow phones) */
.est__btns{flex-wrap:wrap}
.est__btns .btn{flex:1 1 max-content;max-width:300px;padding:0 18px}
@media (max-width:479px){.est__btns .btn{max-width:none;flex-basis:100%}}
@media (min-width:480px) and (max-width:767px){.est__btns .btn{flex-basis:max-content;padding:0 10px}}
/* top bar on large screens: fewer names. Vận hành (it sits right under Thông số), Pin and An toàn (merged into one "Công nghệ & an toàn" tab) and Trang chủ (the logo is the home link) are left out of the bar;
   their blocks stay where they are, the spy lights the nearest named tab, and the phone menu still lists every name */
.topnav a[data-nav="van-hanh"],.topnav a[data-nav="pin"],.topnav a[data-nav="an-toan"],.topnav a.topnav__home{display:none}
/* car page top bar: capitals, same as the tab bar of the site pages (.hd__nav) */
.topnav > a{text-transform:uppercase;letter-spacing:.03em}
/* Lynk & Co poster: the model number sits on the same line as the wordmark (its digits hung about .12 of the wordmark height too low) */
.brand-lynkco .po__ten span{transform:translateY(calc(var(--h) * -.12))}
/* Lynk & Co poster: the wordmark + number line and the tagline under it drop by the distance the emblem is dropped by, so the tops of the two Lynk & Co logos are level */
@media (min-width:768px){
  .brand-lynkco .po__tren{padding-top:calc(clamp(46px,6vw,92px) * .49 - clamp(72px,6vw,96px) / 6.8)}
}
@media (min-width:768px) and (max-height:780px){.brand-lynkco .po__tren{padding-top:calc(clamp(38px,5vw,64px) * .49 - clamp(72px,6vw,96px) / 6.8)}}
/* wide screens: the figure lists of "Không gian" and "Pin" use the whole height of their half of the screen (rows share it evenly) with bigger figures, like the spec board */
@media (min-width:1024px) and (min-height:640px){
  .drive__txt .spec__rows,.pane__txt .spec__rows{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
  .drive__txt .spec__rows > div,.pane__txt .spec__rows > div{flex:1 1 0;max-height:clamp(64px,12vh,118px);align-items:center;padding-top:0;padding-bottom:0}
  .drive__txt .spec__rows dd,.pane__txt .spec__rows dd{font-size:clamp(24px,min(2.9vw,5.2vh),46px)}
  .drive__txt .spec__rows > div.spec__txt dd,.spec__rows > div.spec__txt dd{font-size:clamp(18px,min(1.9vw,3.4vh),30px)}
  .pane__txt .spec__tick dd{font-size:clamp(18px,min(2vw,3.8vh),32px)!important}
  .drive__txt .spec__rows dt,.pane__txt .spec__rows dt{font-size:clamp(14px,min(1.15vw,2.2vh),19px);margin-bottom:0}
}
/* studio pictures (a car on a plain grey floor, set on a wider canvas): on a phone the whole picture is shown, the plain colour fills above and below */
@media (max-width:767px){
  .slide--studio{background:var(--sbg,#D9DDE2)}
  .slide--studio img{object-fit:contain}
}
/* phone, flag `phoneFit` in the car content: a picture slider is a full-height black block. The picture sits at the top in a fixed 16:10 box, whole (contain) over a blurred, darkened copy of itself,
   the caption under it, so every slide has the same frame and the text never moves. The picture eases in once the block is mostly on screen (`fit--on`, site.js). No pinning: plain page scroll. */
@media (max-width:767px){
  .stp:has(.slide--fit){height:auto}
  .stp:has(.slide--fit) .stp__pin{position:static;height:auto;overflow:visible}
  .show:has(.slide--fit){--pt:clamp(36px,10svh,96px);height:auto;min-height:calc(100svh - var(--bar));background:#0b0c0e;padding-top:var(--pt);padding-bottom:36px}
  .show:has(.slide--fit) .slider{height:auto;align-items:flex-start;scroll-snap-type:x mandatory;overflow-x:auto}
  .slide--fit{height:auto;display:flex;flex-direction:column;overflow:hidden;background:#0b0c0e}
  .slide__pic{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0b0c0e;transform:scale(.94);opacity:.55;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
  .fit--on .slide__pic{transform:none;opacity:1}
  .slide__pic::before{content:"";position:absolute;inset:-30px;background:var(--bg) center/cover no-repeat;filter:blur(26px) brightness(.7) saturate(1.1)}
  .slide--studio .slide__pic::before{background:var(--sbg,#D9DDE2);filter:none}   /* plain studio floor: its own colour behind the picture */
  .slide__pic img{position:relative;width:100%;height:100%;object-fit:contain}
  .slide--fit figcaption{position:relative;left:auto;right:auto;top:auto;bottom:auto;max-width:none;padding:18px var(--edge) 40px}
  .show:has(.slide--fit) .slider__ctl{inset:auto;left:0;right:0;top:var(--pt);aspect-ratio:16/10}
  .show:has(.slide--fit) .slider__ctl .ico{top:50%}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.slide__pic{transform:none;opacity:1;transition:none}}

/* free scroll (EX2 trial, body[data-free]): no page snap and no curtain; every block is a plain block that scrolls up with the page, from the first touch to the last */
html:has(body[data-free]){scroll-snap-type:none!important}
body[data-free] main>section{position:relative!important;top:auto!important}   /* top:auto: the sticky rules set top, and a relative block would be pushed down by it */

/* slider position dashes sit clear of the picture's lower edge on every screen */
.show .dots{bottom:32px}

/* money values: a little room after the dong sign, so the corner of the glyph is never trimmed at the edge (seen in the Facebook in-app browser) */
.pl dd{padding-right:.16em;overflow:visible}