/* ============ VietAuto — shared design system ============ */
:root{
  --brand:#E01E26; --brand-2:#B4161C; --brand-lt:#ff5a63;
  --blue:#E01E26; --blue-2:#ff5a63;
  --service:#E01E26; --amber:#E01E26;
  --ink:#141518; --ink-2:#1E2024; --ink-3:#2A2D31;
  --r:12px;--r-lg:18px;--maxw:1220px;
  --ff-display:"Saira",system-ui,sans-serif;
  --ff-body:"Be Vietnam Pro",system-ui,sans-serif;
}
:root[data-theme="light"]{
  --page:#FFFFFF; --panel:#FFFFFF; --panel-2:#F5F6F8; --panel-3:#EEF0F3;
  --line:#E4E7EC; --line-soft:#EDEFF3;
  --tx:#20242A; --tx-muted:#6A7280; --tx-soft:#98A0AC; --heading:#191A1C;
  --nav-bg:rgba(255,255,255,.92); --nav-tx:#3a4048;
  --shadow-sm:0 2px 10px rgba(16,20,26,.07);--shadow-md:0 12px 30px rgba(16,20,26,.10);--shadow-lg:0 24px 60px rgba(16,20,26,.18);
}
:root[data-theme="dark"]{
  --page:#0C0D0F; --panel:#17191D; --panel-2:#101215; --panel-3:#1C1F23;
  --line:#282C33; --line-soft:#202329;
  --tx:#E6E9ED; --tx-muted:#9AA2AD; --tx-soft:#6E7681; --heading:#F3F5F7;
  --nav-bg:rgba(14,15,18,.9); --nav-tx:#c3c8d0;
  --shadow-sm:0 2px 12px rgba(0,0,0,.45);--shadow-md:0 14px 32px rgba(0,0,0,.5);--shadow-lg:0 26px 60px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);color:var(--tx);background:var(--page);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.theme-anim *{transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease!important}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.08;font-weight:800;color:var(--heading)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:700;font-size:13.5px;letter-spacing:.1em;color:var(--brand);text-transform:uppercase;margin-bottom:12px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--brand);border-radius:2px}
.section{padding:84px 0}
.section-sm{padding:64px 0}
.section-head{max-width:640px;margin-bottom:42px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.01em;text-transform:uppercase}
.section-head p{margin-top:14px;color:var(--tx-muted);font-size:17px}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:700;font-size:14.5px;letter-spacing:.02em;text-transform:uppercase;padding:14px 26px;border-radius:8px;transition:transform .22s ease,background .22s ease,box-shadow .22s ease;white-space:nowrap}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::before{left:150%;transition:left .65s ease}
.btn svg{width:18px;height:18px;position:relative}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(224,30,38,.30)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(224,30,38,.28)}
.btn-blue:hover{filter:brightness(.94);transform:translateY(-2px)}
.btn-green{background:var(--service);color:#fff}
.btn-green:hover{filter:brightness(.94);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--ink-3);transform:translateY(-2px)}
.btn-ghost{background:var(--panel);color:var(--heading);border:1.5px solid var(--line)}.btn-ghost:hover{border-color:var(--tx);transform:translateY(-2px)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.4);color:#fff}.btn-outline-light:hover{background:#fff;color:var(--ink)}
.btn-block{width:100%;justify-content:center}.btn-lg{padding:16px 30px;font-size:15.5px}

.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-lt));z-index:200;transition:width .1s linear}

/* back to top — injected by vietauto.js, see the note there.
   z-index sits under the assistant panel (300) on purpose: while that panel is
   open it covers this corner, and a button peeking out from behind it would
   just be in the way. */
.to-top{position:fixed;right:22px;bottom:22px;z-index:240;width:46px;height:46px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--heading);display:grid;place-items:center;
  box-shadow:var(--shadow-md);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .18s,color .18s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.to-top svg{width:20px;height:20px}
.to-top.above-fab{bottom:94px}
@media(max-width:640px){
  .to-top{right:16px;bottom:16px;width:42px;height:42px}
  .to-top.above-fab{bottom:86px}
}

/* topinfo */
.topinfo{background:var(--ink);color:#fff}
.topinfo .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:20px 24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:900;font-size:26px;font-style:italic;letter-spacing:-.02em;color:#fff}
/* Logo là ảnh trắng/xám trên nền trong suốt. Nó chỉ nằm ở hai chỗ — thanh trên
   cùng và footer — mà cả hai đều dùng var(--ink), màu này không đổi theo giao
   diện sáng/tối, nên một bản trắng là đủ. Đặt chiều cao rồi để chiều rộng tự
   theo; width/height trong thẻ img là để trình duyệt chừa sẵn chỗ, không phải
   kích thước hiển thị. */
.logo img{height:40px;width:auto;display:block}
.footer .logo img{height:46px}
.ti-contacts{display:flex;align-items:center;gap:28px;margin-left:auto}
.ti-item{display:flex;align-items:center;gap:11px;font-size:13px;color:#c3c8d0}
.ti-map{color:#c3c8d0}.ti-map:hover .ic{background:var(--brand);color:#fff}
.ti-item .ic{width:34px;height:34px;border-radius:9px;background:var(--ink-2);display:grid;place-items:center;color:var(--brand);flex-shrink:0}
.ti-item .ic svg{width:17px;height:17px}
.ti-item b{display:block;color:#fff;font-family:var(--ff-display);font-size:16px;font-weight:700}
.ti-item .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:600}
.ti-numbers span{display:block;font-size:12.5px;color:#c3c8d0}
.ti-social{width:38px;height:38px;border-radius:50%;background:var(--ink-2);display:grid;place-items:center;color:#c3c8d0;transition:.2s}
.ti-social:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}.ti-social svg{width:17px;height:17px}

/* navbar */
.navbar{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s,background .4s}
.navbar.scrolled{box-shadow:var(--shadow-sm)}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.nav{display:flex;gap:2px;align-items:center}
.nav a{position:relative;font-family:var(--ff-display);font-weight:600;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--nav-tx);padding:10px 15px;border-radius:7px;transition:color .18s}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .26s ease}
.nav a:hover,.nav a.active{color:var(--brand)}.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{width:40px;height:40px;border-radius:9px;background:var(--panel-2);display:grid;place-items:center;color:var(--heading);transition:.2s}
.theme-toggle:hover{background:var(--panel-3)}.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
.compare{display:flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:600;font-size:13.5px;text-transform:uppercase;color:var(--nav-tx);position:relative}
.compare svg{width:22px;height:22px;color:var(--tx-muted)}
.compare .badge{position:absolute;top:-6px;left:12px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}
.nav-toggle{display:none;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);place-items:center;color:var(--heading)}.nav-toggle svg{width:22px;height:22px}

/* hero slider (home) */
.hero{position:relative;background:var(--ink);height:min(640px,80vh);min-height:520px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease}
.slide.active{opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;overflow:hidden}
.slide-bg img,.slide-bg .ph-fallback{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.slide.active .slide-bg img,.slide.active .slide-bg .ph-fallback{animation:kenburns 7.5s ease-out both}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,15,.72) 0%,rgba(12,13,15,.42) 42%,rgba(12,13,15,.30) 70%,rgba(12,13,15,.55) 100%)}
.slide .wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;z-index:2}
.s-content{max-width:560px;text-align:right;color:#fff}
.slide.active .s-content>*{animation:heroIn .75s cubic-bezier(.2,.7,.2,1) both}
.slide.active .s-content>*:nth-child(2){animation-delay:.12s}.slide.active .s-content>*:nth-child(3){animation-delay:.24s}.slide.active .s-content>*:nth-child(4){animation-delay:.36s}.slide.active .s-content>*:nth-child(5){animation-delay:.48s}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.s-eyebrow{display:inline-block;font-family:var(--ff-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.s-title{position:relative;font-size:clamp(30px,5vw,52px);text-transform:uppercase;color:#fff;margin-top:8px;letter-spacing:-.01em}
.s-title::after{content:"";position:absolute;right:0;bottom:-10px;width:76px;height:4px;background:var(--brand);border-radius:3px}
.s-big{margin:20px 0 2px;font-family:var(--ff-display);font-weight:900;line-height:.95}
.s-big .num{font-size:clamp(56px,10vw,104px);color:var(--brand);text-shadow:0 6px 30px rgba(224,30,38,.4)}
.s-big .unit{font-size:clamp(24px,4vw,40px);color:#fff}.s-big .sub{font-size:15px;color:#fff;vertical-align:super;margin-left:8px;font-weight:700}
.s-desc{color:#d4d8de;font-size:15.5px;margin:12px 0 26px}.s-desc span{display:block}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:56px;height:64px;background:rgba(12,13,15,.4);color:#fff;display:grid;place-items:center;transition:.2s;backdrop-filter:blur(2px)}
.hero-arrow:hover{background:var(--brand)}.hero-arrow svg{width:26px;height:26px}.hero-arrow.prev{left:0}.hero-arrow.next{right:0}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:9px}
.hero-dots button{width:36px;height:4px;background:rgba(255,255,255,.4);border-radius:3px;transition:.25s}.hero-dots button.on{background:var(--brand);width:52px}
.hero-prog{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:5}
.hero-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-lt))}
.hero-prog i.run{animation:progress 6s linear forwards}
@keyframes progress{from{width:0}to{width:100%}}

/* search box */
.searchwrap{position:relative;z-index:20;margin-top:-52px}
.searchbox{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.sb-tabs{display:flex;background:var(--ink)}
.sb-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 12px;font-family:var(--ff-display);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em;color:#aeb4bd;transition:.2s}
.sb-tab svg{width:19px;height:19px}.sb-tab.active{background:var(--panel)}
.sb-tab[data-fn="buy"].active{color:var(--brand)}.sb-tab[data-fn="sell"].active{color:var(--blue)}.sb-tab[data-fn="service"].active{color:var(--service)}
.sb-tab:not(.active):hover{color:#fff}
.sb-panel{padding:22px;display:none}.sb-panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sb-fields{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:end}

/* fields / forms */
.field label,.frm label,.frm fieldset legend{display:block;font-size:12px;font-weight:600;color:var(--tx-muted);margin-bottom:7px;letter-spacing:.02em;text-transform:uppercase;padding:0}
.field select,.field input,.finput{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:15px;color:var(--tx);background:var(--panel-2);transition:.18s;appearance:none}
.field select,select.finput{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 fill='%238a92a0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field select:focus,.field input:focus,.finput:focus{outline:none;border-color:var(--brand);background:var(--panel);box-shadow:0 0 0 4px rgba(224,30,38,.14)}
textarea.finput{min-height:120px;resize:vertical;line-height:1.6}
.frm{display:grid;gap:16px}
.frm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frm-row.three{grid-template-columns:1fr 1fr 1fr}
.frm .full{grid-column:1/-1}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-chip{cursor:pointer;padding:11px 18px;border:1.5px solid var(--line);border-radius:100px;font-size:14px;font-weight:500;color:var(--tx-muted);transition:.18s;background:var(--panel-2)}
.radio-chip input{position:absolute;opacity:0;pointer-events:none}
.radio-chip:has(input:checked){border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--panel))}
.form-note{margin-top:16px;padding:15px 18px;border-radius:10px;background:color-mix(in srgb,var(--service) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--service) 30%,var(--panel));color:var(--service);font-weight:600;font-size:14.5px;display:none}
.form-note.show{display:block;animation:fade .3s}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.sb-est{margin-top:16px;padding:14px 18px;border-radius:10px;background:rgba(224,30,38,.10);color:var(--blue);font-weight:600;font-size:14.5px;display:none}.sb-est.show{display:block;animation:fade .3s}

/* 3 core */
.core{padding:70px 0 0}
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.core-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .28s,box-shadow .28s;position:relative;overflow:hidden}
.core-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.core-card:hover::before{transform:scaleX(1)}.core-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.core-ico{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:color-mix(in srgb,var(--c) 14%,var(--panel));color:var(--c);transition:transform .3s}
.core-card:hover .core-ico{transform:rotate(-6deg) scale(1.06)}.core-ico svg{width:29px;height:29px}
.core-card h3{font-size:21px;margin-bottom:9px;text-transform:uppercase}.core-card p{color:var(--tx-muted);font-size:14.5px;margin-bottom:16px}
.core-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:14px;text-transform:uppercase;color:var(--c)}
.core-link svg{width:17px;height:17px;transition:.2s}.core-card:hover .core-link svg{transform:translateX(4px)}
.core-badge{position:absolute;top:26px;right:26px;font-size:11.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--panel));padding:5px 12px;border-radius:100px}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:24px 14px;text-align:center;transition:.24s;cursor:pointer}
.cat:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-4px)}
.cat:hover .cat-ico,.cat:hover h4,.cat:hover span{color:#fff}.cat:hover .cat-ico{background:rgba(255,255,255,.12)}
.cat-ico{width:56px;height:56px;margin:0 auto 13px;border-radius:13px;background:var(--panel);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--heading);transition:.24s}.cat-ico svg{width:31px;height:31px}
.cat h4{font-size:15.5px;text-transform:uppercase;transition:.24s}.cat span{font-size:13px;color:var(--tx-muted);transition:.24s}

/* listings */
.listings{background:var(--page)}
.listings-top{background:var(--ink);color:#fff}
.lt-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:44px}
.lt-inner .eyebrow{color:var(--brand)}.lt-inner .eyebrow::before{background:var(--brand)}
.lt-inner h2{color:#fff;font-size:clamp(24px,3.4vw,38px);text-transform:uppercase}
.avail{display:flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:#aeb4bd}
.avail svg{width:24px;height:24px;color:#aeb4bd}.avail b{color:var(--blue);font-size:16px}
.ltabs{display:flex;padding:26px 0 0;transform:translateY(1px)}
.ltab{padding:13px 26px;font-family:var(--ff-display);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em;color:#aeb4bd;background:var(--ink-2);border-radius:8px 8px 0 0;transition:.2s}
.ltab+.ltab{margin-left:4px}.ltab:hover{color:#fff}.ltab.active{background:var(--page);color:var(--brand)}
.listings .car-grid{padding-top:44px}
.car-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.car{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .28s,box-shadow .28s,border-color .28s}
.car:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.car-link{position:absolute;inset:0;z-index:1}
.car-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.car-media img,.car-media .ph-fallback{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.car:hover .car-media img,.car:hover .car-media .ph-fallback{transform:scale(1.08)}
.car-media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);transform:translateX(-110%);pointer-events:none;z-index:2}
.car:hover .car-media::after{transform:translateX(110%);transition:transform .85s ease}
/* "Hot" flag on a discounted car. A disc in the corner, not the old diagonal
   corner ribbon: that one needed a long word to fill the diagonal, covered the
   top-left quarter of the photo, and sat at a different visual weight from the
   round-ish buttons opposite it. The white ring keeps it legible on a pale sky
   or on a red car. */
.car-hot{position:absolute;top:12px;left:12px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;pointer-events:none;
  font-family:var(--ff-display);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(20,21,24,.35)}
.car-fav{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#6A7280;transition:.2s}
.car-fav:hover{color:var(--brand);background:#fff;transform:scale(1.08)}.car-fav svg{width:17px;height:17px}
.car-dots{position:absolute;bottom:9px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.car-dots span{height:3px;flex:1;background:rgba(255,255,255,.45);border-radius:2px}.car-dots span.on{background:var(--brand)}
.car-body{padding:16px 18px 18px;position:relative;z-index:2;pointer-events:none}
.car-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:52px}
.car-titlerow h3{font-size:16.5px;text-transform:uppercase;line-height:1.15}.car-titlerow .yr{color:var(--brand)}
.pbadge{flex-shrink:0;transform:skewX(-11deg);background:var(--blue);padding:7px 14px;border-radius:4px;box-shadow:0 6px 14px rgba(224,30,38,.28);text-align:right}
.pbadge>span{display:block;transform:skewX(11deg);color:#fff}
.pbadge .old{font-size:11px;opacity:.85;text-decoration:line-through;font-weight:500}.pbadge .new{font-family:var(--ff-display);font-weight:800;font-size:16px;line-height:1.15}
.car-specs{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.spec{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-muted);white-space:nowrap}.spec svg{width:17px;height:17px;color:var(--tx-soft);flex-shrink:0}
/* the section below is a different colour, so the button needs air under it
   as well as over it — otherwise it sits right on the seam */
.listings-more{text-align:center;padding:44px 0 72px}

/* sell block */
.sell{background:var(--ink);color:#fff;overflow:hidden;position:relative}
.sell::before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(224,30,38,.28),transparent 65%)}
.sell .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sell .eyebrow{color:var(--blue-2)}.sell .eyebrow::before{background:var(--blue-2)}
.sell h2{color:#fff;font-size:clamp(28px,4vw,42px);text-transform:uppercase}.sell p.lead{color:#c1c6cd;font-size:16.5px;margin-top:15px}
.sell-steps{margin-top:26px;display:flex;flex-direction:column;gap:15px}
.sstep{display:flex;gap:16px;align-items:flex-start}
.sstep .n{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:rgba(224,30,38,.18);color:var(--blue-2);display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:18px}
.sstep h4{color:#fff;font-size:16.5px;margin-bottom:3px;text-transform:uppercase}.sstep p{color:#9aa1ab;font-size:14px}
.valuation{background:var(--panel);color:var(--tx);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-lg)}
.valuation h3{font-size:22px;margin-bottom:4px;text-transform:uppercase}.valuation .vsub{color:var(--tx-muted);font-size:14px;margin-bottom:20px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vgrid .full{grid-column:1/-1}
.vresult{margin-top:20px;padding:20px;border-radius:12px;background:color-mix(in srgb,var(--blue) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--blue) 25%,var(--panel));display:none}.vresult.show{display:block;animation:fade .35s}
.vresult .vr-lbl{font-size:12.5px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.vresult .vr-price{font-family:var(--ff-display);font-weight:900;font-size:28px;color:var(--heading);margin:4px 0}.vresult .vr-note{font-size:12px;color:var(--tx-muted)}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .26s,box-shadow .26s,border-color .26s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.svc-ico{width:54px;height:54px;border-radius:13px;background:color-mix(in srgb,var(--service) 14%,var(--panel));color:var(--service);display:grid;place-items:center;margin-bottom:17px;transition:transform .3s}
.svc:hover .svc-ico{transform:rotate(-6deg) scale(1.06)}.svc-ico svg{width:27px;height:27px}
.svc h3{font-size:18px;margin-bottom:8px;text-transform:uppercase}.svc p{color:var(--tx-muted);font-size:14px;margin-bottom:15px}
.svc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line)}
.svc-price{font-family:var(--ff-display);font-weight:800;color:var(--service);font-size:15px}
.svc-book{font-family:var(--ff-display);font-weight:700;font-size:13px;text-transform:uppercase;color:var(--heading);display:inline-flex;gap:6px;align-items:center}
.svc-book svg{width:15px;height:15px;transition:.2s}.svc:hover .svc-book svg{transform:translateX(3px)}
.svc-cta{margin-top:38px;background:linear-gradient(120deg,var(--ink),var(--ink-3));border-radius:var(--r-lg);padding:38px 42px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.svc-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(224,30,38,.28),transparent 65%)}
.svc-cta .txt{position:relative}.svc-cta h3{color:#fff;font-size:25px;text-transform:uppercase}.svc-cta p{color:#c1c6cd;margin-top:6px}
.svc-cta .acts{position:relative;display:flex;gap:12px;flex-wrap:wrap}

/* why */
.why{background:var(--panel-2)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{display:flex;gap:17px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:25px;transition:.24s}
.feat:hover{box-shadow:var(--shadow-sm);border-color:var(--brand);transform:translateY(-3px)}
.feat-ico{flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--panel-2);color:var(--brand);display:grid;place-items:center}.feat-ico svg{width:26px;height:26px}
.feat h4{font-size:16px;margin-bottom:5px;text-transform:uppercase}.feat p{color:var(--tx-muted);font-size:13.5px}

/* stats */
.stats{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 20% 0%,rgba(224,30,38,.18),transparent 60%),radial-gradient(600px 200px at 80% 100%,rgba(224,30,38,.16),transparent 60%)}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .snum{font-family:var(--ff-display);font-weight:900;font-size:clamp(34px,5vw,52px);color:#fff;line-height:1}.stat .snum b{color:var(--brand)}
.stat .slbl{color:#9aa1ab;margin-top:9px;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em}

/* brands marquee */
.brands{padding:46px 0;border-bottom:1px solid var(--line);overflow:hidden}
.brand-mask{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brand-track{display:flex;gap:13px;width:max-content;animation:marquee 32s linear infinite}
.brands:hover .brand-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.brand-chip{display:flex;align-items:center;gap:9px;padding:12px 22px;border:1px solid var(--line);border-radius:100px;font-family:var(--ff-display);font-weight:700;font-size:15.5px;color:var(--tx-muted);white-space:nowrap;transition:.2s}
.brand-chip:hover{border-color:var(--heading);color:var(--heading)}.brand-chip .d{width:9px;height:9px;border-radius:50%;background:var(--brand)}

/* testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tst{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:27px}
.tst .stars{color:var(--amber);font-size:16px;letter-spacing:2px;margin-bottom:13px}.tst p{font-size:15px;color:var(--tx)}
.tst .who{display:flex;align-items:center;gap:13px;margin-top:19px;padding-top:17px;border-top:1px solid var(--line)}
.tst .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#ff6b72);color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:18px}
.tst .who b{display:block;font-family:var(--ff-display);font-size:15.5px;color:var(--heading)}.tst .who span{font-size:13px;color:var(--tx-muted)}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .26s,box-shadow .26s}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.post-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.post-media img,.post-media .ph-fallback{width:100%;height:100%;object-fit:cover;transition:transform .55s}.post:hover .post-media img,.post:hover .post-media .ph-fallback{transform:scale(1.06)}
.post-body{padding:22px}.post-cat{font-size:12px;font-weight:700;color:var(--brand);font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em}
.post-body h3{font-size:18px;margin:9px 0 10px;line-height:1.25}.post-body p{color:var(--tx-muted);font-size:14px}
.post-meta{margin-top:15px;font-size:13px;color:var(--tx-soft);display:flex;gap:14px}

/* final cta */
.cta-final{padding:0 0 84px}
.cta-box{background:linear-gradient(120deg,var(--brand),var(--brand-lt));border-radius:var(--r-lg);padding:54px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-box::before,.cta-box::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.10)}
.cta-box::before{width:320px;height:320px;top:-120px;left:-80px}.cta-box::after{width:240px;height:240px;bottom:-100px;right:-60px}
.cta-box h2{color:#fff;font-size:clamp(28px,4vw,40px);position:relative;text-transform:uppercase}
.cta-box p{position:relative;margin:14px auto 28px;max-width:52ch;color:rgba(255,255,255,.92);font-size:16.5px}
.cta-box .acts{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-box .btn-white{background:#fff;color:var(--brand)}.cta-box .btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}

/* footer
   A flat slab of --ink under a page that is nearly the same colour makes the
   footer read as dead space. These are two very soft radial washes in the
   brand red, plus a lift towards the top edge, so the block has some depth
   without becoming a second hero. Percentages are deliberately low — at 100%
   opacity this looks like a mistake. */
.footer{position:relative;background:var(--ink);color:#9aa1ab;padding:66px 0 0;isolation:isolate}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 380px at 8% 0%, color-mix(in srgb,var(--brand) 13%,transparent), transparent 70%),
    radial-gradient(620px 420px at 92% 108%, color-mix(in srgb,var(--brand) 9%,transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 34%)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:46px;border-bottom:1px solid #2a2d31}
.foot-about p{font-size:14px;line-height:1.7;margin:16px 0 18px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:40px;height:40px;border-radius:10px;background:var(--ink-2);display:grid;place-items:center;color:#c3c8d0;transition:.2s}
.foot-social a:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}.foot-social svg{width:18px;height:18px}
.foot-col h4{color:#fff;font-size:16px;margin-bottom:17px;text-transform:uppercase}
.foot-col a{display:block;font-size:14px;padding:6px 0;transition:.18s}.foot-col a:hover{color:#fff;padding-left:5px}
.foot-contact li{display:flex;gap:11px;font-size:14px;margin-bottom:13px}.foot-contact svg{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:2px}
.newsletter{margin-top:15px}.newsletter form{display:flex;gap:8px}
.newsletter input{flex:1;padding:12px 14px;border-radius:9px;border:1px solid #2a2d31;background:var(--ink-2);color:#fff;font-family:inherit;font-size:14px}.newsletter input:focus{outline:none;border-color:var(--brand)}
.newsletter button{padding:0 16px;border-radius:9px;background:var(--brand);color:#fff}.newsletter button svg{width:20px;height:20px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;flex-wrap:wrap;gap:12px;font-size:13.5px}.foot-bottom a:hover{color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}

/* ===================== INTERIOR PAGES ===================== */
.page-hero{background:var(--ink);color:#fff;padding:44px 0 50px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 260px at 85% -10%,rgba(224,30,38,.22),transparent 60%)}
.page-hero .wrap{position:relative}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:#9aa1ab;margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a:hover{color:#fff}.breadcrumb svg{width:14px;height:14px;opacity:.6}.breadcrumb .cur{color:var(--brand)}
.page-hero h1{color:#fff;font-size:clamp(28px,4.5vw,46px);text-transform:uppercase;letter-spacing:-.01em}
.page-hero .ph-sub{color:#c1c6cd;font-size:17px;margin-top:12px;max-width:62ch}
.page-hero .ph-chips{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}
.ph-chip{display:flex;align-items:center;gap:9px;font-size:14px;color:#d4d8de}.ph-chip svg{width:18px;height:18px;color:var(--brand)}

/* detail */
.dt-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:34px;align-items:start}
.gal-main{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--ink-2);position:relative;border:1px solid var(--line)}
.gal-main img,.gal-main .ph-fallback{width:100%;height:100%;object-fit:cover}
.gal-badge{position:absolute;top:16px;left:16px;z-index:2;background:var(--blue);color:#fff;font-family:var(--ff-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:6px}
/* Mũi tên + số thứ tự ảnh. Trên máy tính chỉ hiện khi rê chuột vào ảnh; trên
   cảm ứng không có "rê chuột" nên hiện luôn — ở đó vuốt cũng đổi được ảnh. */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(12,13,15,.62);color:#fff;backdrop-filter:blur(3px);opacity:0;transition:opacity .2s,background .2s}
.gal-nav svg{width:20px;height:20px}
.gal-prev{left:12px}.gal-next{right:12px}.gal-next svg{transform:rotate(180deg)}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
.gal-nav:hover{background:var(--brand)}
.gal-count{position:absolute;right:14px;bottom:12px;z-index:2;background:rgba(12,13,15,.62);color:#fff;font-family:var(--ff-display);font-weight:600;font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:100px;backdrop-filter:blur(3px)}
@media(hover:none){.gal-nav{opacity:1}}
@media(prefers-reduced-motion:reduce){.gal-nav{transition:none}}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gthumb{aspect-ratio:16/11;border-radius:9px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--ink-2);position:relative}
.gthumb.active{border-color:var(--brand)}.gthumb img,.gthumb .ph-fallback{width:100%;height:100%;object-fit:cover}
.buybox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:78px;box-shadow:var(--shadow-sm)}
.buybox .bb-year{color:var(--brand);font-family:var(--ff-display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.buybox h1,.buybox h2{font-size:25px;text-transform:uppercase;margin:4px 0 14px;color:var(--heading)}
.bb-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bb-price .now{font-family:var(--ff-display);font-weight:900;font-size:34px;color:var(--heading)}
.bb-price .was{text-decoration:line-through;color:var(--tx-soft);font-size:16px}.bb-price .save{font-size:12px;font-weight:700;color:#fff;background:var(--service);padding:3px 9px;border-radius:6px}
.bb-mo{color:var(--tx-muted);font-size:13px;margin-top:5px}
.bb-quick{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bb-quick .q{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--tx)}.bb-quick .q svg{width:18px;height:18px;color:var(--tx-soft);flex-shrink:0}
.bb-cta{display:grid;gap:10px;margin-top:4px}
.trust-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.tchip{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--tx-muted);background:var(--panel-2);border:1px solid var(--line);padding:6px 11px;border-radius:100px}.tchip svg{width:14px;height:14px;color:var(--service)}
.dt-cols{display:grid;grid-template-columns:1.4fr .85fr;gap:34px;align-items:start;margin-top:44px}
.spec-table{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.spec-table .row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-table .row .k{color:var(--tx-muted)}.spec-table .row .v{font-weight:600;color:var(--heading);text-align:right}
.feats-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px}
.fitem{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--tx)}.fitem svg{width:18px;height:18px;color:var(--service);flex-shrink:0}
.block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;margin-bottom:24px}
.block h3{font-size:19px;text-transform:uppercase;margin-bottom:18px}
.block p.body{color:var(--tx-muted);font-size:15px;line-height:1.75}
.aside-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}

/* Sell page sidebar.
   The photo used to declare its own 4:5 shape, so the column ended up taller
   than the form beside it and the section looked lopsided — worse as the form
   shrinks on later steps. Now the column stretches to the form's height and
   the photo takes whatever is left, cropping via object-fit instead of
   dictating the layout. */
.sell-aside{align-self:stretch;display:flex;flex-direction:column;gap:24px}
.sell-aside .sell-photo{flex:1;padding:0;overflow:hidden;min-height:210px}
.sell-photo-media{position:relative;height:100%;min-height:210px}
.sell-photo-media img,.sell-photo-media .ph-fallback{width:100%;height:100%;object-fit:cover;display:block}
.sell-photo-media .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.82),transparent 55%)}
.sell-photo-media .cap{position:absolute;left:22px;right:22px;bottom:22px;color:#fff}
.sell-photo-media .cap b{display:block;font-family:var(--ff-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1.1}
.sell-photo-media .cap span{display:block;font-size:13.5px;color:#d4d8de;margin-top:6px}
@media(max-width:900px){
  /* one column: nothing to match heights with, so give the photo a shape again */
  .sell-aside{display:block}
  .sell-aside .aside-card+.aside-card{margin-top:24px}
  .sell-aside .sell-photo{min-height:0}
  .sell-photo-media{height:auto;aspect-ratio:4/5;min-height:0}
}
.finance-out{text-align:center;padding:20px;border-radius:12px;background:color-mix(in srgb,var(--brand) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 22%,var(--panel));margin-top:6px}
.finance-out .mo{font-family:var(--ff-display);font-weight:900;font-size:40px;color:var(--brand);line-height:1}
.finance-out .lbl{font-size:12px;color:var(--tx-muted);text-transform:uppercase;letter-spacing:.04em}
.rng{width:100%;height:6px;border-radius:5px;background:var(--panel-3);appearance:none;outline:none;margin-top:8px}
.rng::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:0 2px 6px rgba(224,30,38,.4)}
.rng::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--brand);cursor:pointer}
.rng-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:2px;margin-top:14px}.rng-row b{color:var(--heading);font-family:var(--ff-display)}

/* stepper */
.stepper{display:flex;margin-bottom:28px}
.stp{flex:1;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;position:relative;color:var(--tx-soft)}
.stp .dot{width:40px;height:40px;border-radius:50%;background:var(--panel-2);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:15px;color:var(--tx-muted);z-index:2;transition:.25s}
.stp .dot svg{width:19px;height:19px}
.stp.active .dot{background:var(--brand);border-color:var(--brand);color:#fff}
.stp.done .dot{background:var(--service);border-color:var(--service);color:#fff}
.stp .lbl2{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.stp.active .lbl2{color:var(--brand)}
.stp::after{content:"";position:absolute;top:20px;left:50%;width:100%;height:2px;background:var(--line);z-index:1}.stp:last-child::after{display:none}
.step-panel{display:none}.step-panel.active{display:block;animation:fade .3s}
.step-actions{display:flex;justify-content:space-between;margin-top:24px;gap:12px}

/* pricing */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;transition:.26s;position:relative}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pcard.pop{border-color:var(--brand);box-shadow:var(--shadow-md)}
.pcard .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--ff-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 15px;border-radius:100px}
.pcard h3{font-size:20px;text-transform:uppercase}.pcard .amt{font-family:var(--ff-display);font-weight:900;font-size:38px;color:var(--heading);margin:10px 0}.pcard .amt small{font-size:14px;color:var(--tx-muted);font-weight:400}
.pcard ul{list-style:none;margin:18px 0 22px;display:grid;gap:11px}
.pcard li{display:flex;gap:9px;font-size:14px;color:var(--tx)}.pcard li svg{width:18px;height:18px;color:var(--service);flex-shrink:0;margin-top:2px}

/* process */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pstep{text-align:center}
.pstep .pn{width:54px;height:54px;border-radius:14px;margin:0 auto 12px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);position:relative}
.pstep .pn svg{width:24px;height:24px}
.pstep .pn b{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--ff-display);font-size:12px;display:grid;place-items:center}
.pstep h4{font-size:15px;text-transform:uppercase}.pstep p{font-size:13px;color:var(--tx-muted);margin-top:4px}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;font-family:var(--ff-display);font-weight:600;font-size:16px;color:var(--heading)}
.faq-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .3s;color:var(--brand)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 22px 20px;color:var(--tx-muted);font-size:14.5px}

/* two-col generic */
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1080px){
  .car-grid{grid-template-columns:repeat(3,1fr)}.cat-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}.ti-contacts{gap:18px}.ti-numbers{display:none}
  .feats-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav,.compare{display:none}.nav-toggle{display:grid}
  .nav.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--panel);padding:14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);gap:2px}
  .nav.open a{padding:14px 16px;font-size:16px}.nav.open a::after{display:none}
  /* Mobile header.
     Left as-is it stacked four things down the page — logo, address, "view on
     map", sales number — and pushed the nav bar most of a screen down before
     anyone could tap anything. On a phone the address is the one item nobody
     needs (it is in the footer, and the map link is a second tap anyway) while
     the phone number is the whole point: it dials. So the bar becomes one row,
     logo left, tap-to-call right. */
  /* Two tidy lines instead of one crowded row: logo left and the theme switch
     right on line one, hotline on line two. vietauto.js moves the switch up
     here from the nav row at this breakpoint — see the note there. */
  .topinfo .wrap{flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px 12px}
  .logo{font-size:22px}
  .logo img{height:32px}
  .topinfo .theme-toggle{margin-left:auto;order:1;width:38px;height:38px;
    background:var(--ink-2);color:#fff}
  .topinfo .theme-toggle:hover{background:var(--ink-3)}
  .topinfo .theme-toggle svg{width:18px;height:18px}
  /* vietauto.js moves .ti-contacts into the sticky nav row at this breakpoint,
     so the hotline shares a line with the CTA and the menu button */
  .navbar .ti-contacts{width:auto;margin:0;gap:0;flex-wrap:nowrap;min-width:0}
  .navbar .ti-call{gap:8px}
  .navbar .ti-call .ic{width:30px;height:30px;border-radius:8px;background:var(--panel-2)}
  .navbar .ti-call .ic svg{width:15px;height:15px}
  .navbar .ti-call b{font-size:14.5px;color:var(--heading)}
  /* Địa chỉ co lại còn cái ghim, đặt ở dòng 1 cạnh nút đổi giao diện.
     Để nguyên hai dòng chữ thì nó chiếm mất chỗ của số hotline ở dòng 2 — mà
     hotline mới là thứ bấm vào gọi được. Địa chỉ đầy đủ vẫn ở footer. */
  .ti-map .ti-map-text{display:none}
  /* cái ghim đẩy sang phải, nút đổi giao diện bám ngay sau nó thành một cụm */
  .topinfo .ti-map{margin-left:auto;order:0}
  .topinfo .ti-map+.theme-toggle{margin-left:0}
  .topinfo .ti-map .ic{width:38px;height:38px;border-radius:10px;background:var(--ink-2);color:#fff}
  .topinfo .ti-map .ic svg{width:18px;height:18px}
  .topinfo .ti-map:hover .ic{background:var(--ink-3)}
  .ti-item:not(.ti-call):not(.ti-map){display:none}
  /* The social icon is in the footer too, and here it is what tips the row past
     the viewport width. Not scoped to .topinfo: the script moves .ti-contacts
     into the nav row at this breakpoint, so a .topinfo-scoped rule stops
     matching and the icon reappears on top of the phone number. */
  .ti-social{display:none}
  .ti-call{gap:9px;min-width:0}
  .ti-call .lbl{display:none}
  .ti-call b{font-size:15px;white-space:nowrap}
  .navbar .wrap{gap:10px;height:60px}
  .nav-actions{gap:8px;margin-left:auto;min-width:0}
  .nav-actions .btn{padding:0 13px;height:40px;font-size:12.5px;white-space:nowrap}
  .nav-actions .btn svg{width:16px;height:16px}
  .s-content{max-width:100%;text-align:left}.s-title::after{left:0;right:auto}.slide .wrap{justify-content:flex-start}
  .slide-bg::after{background:linear-gradient(90deg,rgba(12,13,15,.82),rgba(12,13,15,.45))}
  .core-grid,.svc-grid,.feat-grid,.tst-grid,.blog-grid,.price-cards{grid-template-columns:1fr}
  .sell .wrap,.dt-grid,.dt-cols,.two-col{grid-template-columns:1fr;gap:34px}
  .buybox{position:static}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .sb-fields{grid-template-columns:1fr 1fr}.sb-fields .btn{grid-column:1/-1}
  .lt-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .process{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .spec-table{grid-template-columns:1fr}
}
@media(max-width:720px){.car-grid{grid-template-columns:repeat(2,1fr)}.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .section{padding:56px 0}.section-sm{padding:44px 0}.wrap{padding:0 18px}
  .sb-tab span{display:none}.sb-tab{padding:15px 8px}.vgrid,.frm-row,.frm-row.three{grid-template-columns:1fr}
  .svc-cta{padding:26px}.cta-box{padding:34px 22px}.foot-grid{grid-template-columns:1fr}
  .ltabs{width:100%;overflow-x:auto;scrollbar-width:none}.ltabs::-webkit-scrollbar{display:none}.ltab{white-space:nowrap}
  .hero{height:auto;min-height:0}.slide{position:relative;display:none;opacity:1;visibility:visible;min-height:78vh}.slide.active{display:block}
  .slide .wrap{min-height:78vh;padding:46px 18px}.searchwrap{margin-top:-40px}.hero-arrow{width:44px;height:52px}
  .feats-list{grid-template-columns:1fr}.gal-thumbs{grid-template-columns:repeat(4,1fr)}
  .stepper .lbl2{display:none}.process{grid-template-columns:1fr}

  /* Footer gập lại. Xếp một cột thì bốn khối liên kết nối nhau thành một dải
     dài gần hai màn hình; gập lại thì cả footer vừa một màn, và phần bản
     quyền với điều khoản không còn bị đẩy xuống chỗ không ai cuộn tới.
     Đường kẻ thay cho khoảng cách: đã có vạch ngăn thì không cần gap nữa. */
  .foot-grid{gap:0;padding-bottom:8px}
  .foot-about{margin-bottom:22px}
  .foot-col{border-top:1px solid #2a2d31}
  .foot-col h4{margin:0}
  .foot-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;
    width:100%;padding:19px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
  /* Dấu + vẽ bằng hai vạch nền; mở ra thì tắt vạch dọc, thành dấu −. Không
     xoay: xoay 45° làm dấu cộng thành chữ X, mà ở đây nghĩa là "đóng lại"
     chứ không phải "xoá". */
  .foot-toggle::after{content:"";width:17px;height:17px;flex-shrink:0;opacity:.75;
    background:linear-gradient(currentColor,currentColor) center/17px 1.6px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.6px 17px no-repeat;
    transition:background-size .2s ease}
  .foot-col.open .foot-toggle::after{background-size:17px 1.6px,1.6px 0}
  .foot-panel{display:none;padding-bottom:16px}
  .foot-col.open .foot-panel{display:block}
  .foot-col a{padding:9px 0}
  .foot-contact li{margin-bottom:15px}
  .foot-bottom{justify-content:center;text-align:center;padding:22px 0}
}
@media(max-width:420px){
  .car-grid,.cat-grid{grid-template-columns:1fr}.s-big .num{font-size:64px}.hero-arrow{display:none}
  /* below this the hotline, the CTA and the menu button start touching — the
     phone glyph is the part that can go, the number is what people tap */
  .navbar .ti-call .ic{display:none}
  .navbar .ti-call b{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}

/* ===================== BACKGROUND PHOTO SECTIONS + SERVICE CARD IMAGES ===================== */
/* always-dark band with a background photo */
.bgsec{position:relative;overflow:hidden;background:var(--ink)}
.bgsec>.bg-media{position:absolute;inset:0;z-index:0}
.bgsec>.bg-media img,.bgsec>.bg-media .ph-fallback{width:100%;height:100%;object-fit:cover}
.bgsec>.bg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,13,15,.85),rgba(12,13,15,.93))}
.bgsec>.wrap{position:relative;z-index:1}
.bgsec .section-head h2,.bgsec h2,.bgsec h3,.bgsec h4{color:#fff}
.bgsec .section-head p{color:#c1c6cd}
.bgsec .pstep h4{color:#fff}.bgsec .pstep p{color:#aeb4bd}
.bgsec .pstep .pn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}

/* page-hero background image */
.page-hero>.ph-bg{position:absolute;inset:0;z-index:0}
.page-hero>.ph-bg img,.page-hero>.ph-bg .ph-fallback{width:100%;height:100%;object-fit:cover;opacity:.55}
.page-hero>.ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,19,22,.88),rgba(18,19,22,.52) 68%,rgba(18,19,22,.72))}
.page-hero>.wrap{position:relative;z-index:1}

/* service cards with a photo */
.svc.card-img{padding:0;overflow:hidden}
.svc-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.svc-media img,.svc-media .ph-fallback{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.svc.card-img:hover .svc-media img,.svc.card-img:hover .svc-media .ph-fallback{transform:scale(1.07)}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.4));pointer-events:none}
.svc-inner{padding:26px;position:relative}
.svc.card-img .svc-ico{margin-top:-56px;margin-bottom:16px;position:relative;z-index:2;border:3px solid var(--panel);box-shadow:var(--shadow-md)}

/* ===================== VIN DECODE / MILEAGE / MEDIA UPLOAD (sell) ===================== */
.vin-row{display:flex;gap:10px;align-items:flex-end}
.vin-row .field{flex:1}
.btn-decode{white-space:nowrap;padding:13px 20px}
.decoded{font-size:12px;color:var(--service);font-weight:600;margin-top:8px;display:none;align-items:center;gap:6px}
.decoded.show{display:flex}.decoded svg{width:15px;height:15px}
.decoded.err{color:var(--amber)}
.mileage-or{font-size:12px;color:var(--tx-soft);text-align:center;margin:8px 0;position:relative}
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:26px 20px;text-align:center;cursor:pointer;transition:.2s;background:var(--panel-2)}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--panel-2))}
.dropzone svg{width:34px;height:34px;color:var(--tx-soft);margin:0 auto 8px}
.dropzone p{font-size:14px;color:var(--tx-muted)}.dropzone p b{color:var(--brand)}
.dropzone .hint{font-size:12px;color:var(--tx-soft);margin-top:4px}
.dz-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:12px}
.dz-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.dz-item img,.dz-item video{width:100%;height:100%;object-fit:cover}
.dz-item .vid{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.35)}.dz-item .vid svg{width:22px;height:22px;margin:0}
.dz-item .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;border:none}

/* ===================== AI ASSISTANT WIDGET ===================== */
.va-fab{position:fixed;right:22px;bottom:22px;z-index:300;width:60px;height:60px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(224,30,38,.45);transition:transform .2s;border:none}
.va-fab:hover{transform:scale(1.06)}
.va-fab svg{width:28px;height:28px}
.va-fab .fab-close{display:none}
.va-fab.open .fab-chat{display:none}.va-fab.open .fab-close{display:block}
.va-fab .pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(224,30,38,.5);animation:vapulse 2.2s infinite;pointer-events:none}
.va-fab.open .pulse{display:none}
@keyframes vapulse{70%{box-shadow:0 0 0 16px rgba(224,30,38,0)}100%{box-shadow:0 0 0 0 rgba(224,30,38,0)}}
.va-panel{position:fixed;right:22px;bottom:94px;z-index:300;width:min(384px,calc(100vw - 44px));height:min(566px,calc(100vh - 130px));background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:.25s}
.va-panel.open{opacity:1;transform:none;pointer-events:auto}
.va-head{background:var(--ink);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.va-head .ava{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-lt));display:grid;place-items:center;color:#fff;flex-shrink:0}
.va-head .ava svg{width:22px;height:22px}
.va-head h4{color:#fff;font-size:15.5px;text-transform:uppercase;line-height:1.1}
.va-head .st{font-size:11.5px;color:#cfd4db;display:flex;align-items:center;gap:6px;margin-top:2px}
.va-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff}
.va-head .x{margin-left:auto;color:#c3c8d0;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:none;border:none;cursor:pointer}
.va-head .x:hover{background:rgba(255,255,255,.12);color:#fff}.va-head .x svg{width:18px;height:18px}
.va-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;background:var(--panel-2)}
.va-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.va-msg.bot{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--tx)}
.va-msg.user{background:var(--brand);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.va-msg b{font-weight:700}
.va-msg ul{margin:6px 0 0;padding-left:18px}.va-msg li{margin:2px 0}
/* the opening menu — icons from the site's own set, so they sit at the same
   weight and colour as everything else instead of shouting like emoji did */
.va-menu{list-style:none;margin:10px 0 0!important;padding:0!important;white-space:normal}
.va-menu li{display:flex;align-items:flex-start;gap:9px;margin:0!important;padding:5px 0;line-height:1.45}
.va-menu li svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--brand)}
.va-sev{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px;text-transform:uppercase;margin:6px 0 2px}
.va-sev.low{background:var(--panel-3);color:var(--tx-muted)}
.va-sev.med{background:rgba(224,30,38,.1);color:var(--brand-2)}
.va-sev.high{background:rgba(224,30,38,.16);color:var(--brand)}
.va-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px;background:var(--panel-2);flex-shrink:0}
.va-chip{font-size:12px;font-weight:600;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.02em;padding:8px 13px;border:1px solid var(--line);border-radius:100px;background:var(--panel);color:var(--tx);cursor:pointer;transition:.15s}
.va-chip:hover{border-color:var(--brand);color:var(--brand)}
.va-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel);flex-shrink:0}
.va-input input{flex:1;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--tx);font-family:inherit;font-size:14px}
.va-input input:focus{outline:none;border-color:var(--brand)}
.va-input button{width:44px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;flex-shrink:0}
.va-input button svg{width:19px;height:19px}
/* Cars the assistant actually looked up. Rendered as links because a model
   naming a car in a sentence still leaves the customer to go and find it. */
/* .va-msg keeps newlines (white-space:pre-wrap) so plain replies break where
   the model broke them — but that also turns the indentation inside these
   cards into blank lines, so switch it off in here. */
.va-cars{display:flex;flex-direction:column;gap:8px;margin-top:12px;white-space:normal}
.va-car{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel-2);transition:.16s}
.va-car:hover{border-color:var(--brand);transform:translateX(2px)}
.va-car b{display:block;font-family:var(--ff-display);font-size:13.5px;color:var(--heading);line-height:1.25}
.va-car .p{display:block;font-family:var(--ff-display);font-weight:800;font-size:15px;color:var(--brand);margin-top:3px}
.va-car .p s{color:var(--tx-soft);font-weight:500;font-size:12px;margin-right:5px}
.va-car .m{display:block;font-size:11.5px;color:var(--tx-soft);margin-top:2px}
.va-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.va-typing span{width:7px;height:7px;border-radius:50%;background:var(--tx-soft);animation:vabounce 1.2s infinite}
.va-typing span:nth-child(2){animation-delay:.15s}.va-typing span:nth-child(3){animation-delay:.3s}
@keyframes vabounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@media(max-width:640px){.va-panel{right:12px;left:12px;bottom:84px;width:auto;height:min(70vh,540px)}.va-fab{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.va-fab .pulse{animation:none}}

/* ===================== A11Y + UTILITIES ===================== */
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Link "Skip to content" đã gỡ theo yêu cầu. Đó là cơ chế bỏ qua khối lặp của
   WCAG 2.4.1 — không còn nó thì người dùng bàn phím phải Tab qua cả menu ở
   từng trang mới tới nội dung. Ghi lại để sau này biết là bỏ có chủ ý. */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* form validation + submit states */
.field-err{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--brand);line-height:1.45}
.finput.invalid,.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.finput.invalid:focus{box-shadow:0 0 0 4px rgba(224,30,38,.18)}
.btn.is-busy{opacity:.72;pointer-events:none}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.note-ref{display:inline-block;margin-left:6px;font-weight:700;opacity:.82}
.form-note.err{background:color-mix(in srgb,var(--brand) 12%,var(--panel));border-color:color-mix(in srgb,var(--brand) 34%,var(--panel));color:var(--brand)}
.nl-note{font-size:12.5px;color:var(--brand);font-weight:600;margin-top:8px}
.dz-note{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--brand)}

/* saved cars */
.car-fav.on{background:var(--brand);color:#fff}
.car-fav.on svg{fill:currentColor}
.compare .badge.has{background:var(--brand)}

/* gallery thumbs and category tiles became real buttons / links */
.gthumb{display:block;width:100%;padding:0}
.cat{display:block}

/* ===================== INVENTORY PAGE ===================== */
.inv-layout{display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:start}
.inv-filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:78px;max-height:calc(100vh - 96px);overflow-y:auto}
.filters-toggle{display:none}
.fgroup{border:0;padding:0;margin:0 0 18px}
.fgroup+.fgroup{padding-top:18px;border-top:1px solid var(--line-soft)}
.fgroup legend,.fgroup.fold>summary{padding:0;font-family:var(--ff-display);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--heading)}
.fgroup legend{margin-bottom:10px}
/* Collapsible group — Make alone is sixteen brands, which buries every other
   filter below the fold. <details> keeps the keyboard and screen-reader
   behaviour for free. */
.fgroup.fold>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:3px 0;user-select:none}
.fgroup.fold>summary::-webkit-details-marker{display:none}
.fgroup.fold>summary:hover{color:var(--brand)}
.fgroup.fold .fold-label{flex:1}
.fgroup.fold .fold-count{min-width:19px;height:19px;padding:0 6px;border-radius:100px;
  background:var(--brand);color:#fff;font-size:11px;font-style:normal;line-height:19px;text-align:center}
.fgroup.fold .fold-chev{width:16px;height:16px;color:var(--tx-soft);transition:transform .2s}
.fgroup.fold[open]>summary .fold-chev{transform:rotate(180deg)}
.fgroup.fold .fold-body{margin-top:8px;max-height:232px;overflow-y:auto;padding-right:6px}
.fchk{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;color:var(--tx);cursor:pointer}
.fchk input{width:17px;height:17px;flex-shrink:0;accent-color:var(--brand);appearance:auto;cursor:pointer}
.fchk span{flex:1}
.fchk:hover span{color:var(--brand)}
/* phép tính chống bot, dựng bằng JS trong các form liên hệ */
.math-check .mq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;color:var(--brand);letter-spacing:.06em}
.math-check input{max-width:180px}
.frange{display:flex;align-items:center;gap:8px}
.frange .finput{padding:11px 12px;font-size:14px}
.frange>span{color:var(--tx-soft)}
.inv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.inv-count{font-size:14.5px;color:var(--tx-muted)}
.inv-count b{color:var(--heading);font-family:var(--ff-display);font-size:17px}
.inv-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inv-tools .finput{width:auto;font-size:14px;padding:11px 36px 11px 14px}
.inv-tools input.finput{padding-right:14px;min-width:210px}
.inv-saved{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--tx);cursor:pointer;white-space:nowrap}
.inv-saved input{width:17px;height:17px;accent-color:var(--brand);appearance:auto;cursor:pointer}
.inv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ichip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;border:1px solid var(--line);background:var(--panel-2);color:var(--tx);font-size:13px;font-weight:500;cursor:pointer;transition:.18s}
.ichip:hover{border-color:var(--brand);color:var(--brand)}
.ichip svg{width:13px;height:13px}
.inv-empty{grid-column:1/-1;text-align:center;padding:56px 22px;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-lg)}
.inv-empty h3{font-size:20px;text-transform:uppercase;margin-bottom:8px}
.inv-empty p{color:var(--tx-muted);font-size:14.5px;margin-bottom:20px}
.grid-empty{grid-column:1/-1;text-align:center;color:var(--tx-muted);padding:40px 0}
.pager{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pg{min-width:42px;height:42px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font-family:var(--ff-display);font-weight:700;font-size:14.5px;display:grid;place-items:center;transition:.18s}
.pg:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg svg{width:18px;height:18px}
.inv-main .car-grid{grid-template-columns:repeat(3,1fr)}
.car-missing{text-align:center;padding:80px 22px}
.car-missing h2{font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;margin-bottom:12px}
.car-missing p{color:var(--tx-muted);margin-bottom:24px}

@media(max-width:1080px){
  .inv-layout{grid-template-columns:238px 1fr;gap:24px}
  .inv-main .car-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .inv-layout{grid-template-columns:1fr}
  .inv-filters{position:static;max-height:none;display:none}
  .inv-filters.open{display:block;margin-bottom:22px}
  .filters-toggle{display:inline-flex}
  .inv-main .car-grid{grid-template-columns:repeat(2,1fr)}
}
/* ===================== NEWS ===================== */
.post{position:relative}
.post-link{position:absolute;inset:0;z-index:1}
.post-body{position:relative;z-index:2;pointer-events:none}
.post-media:empty{display:none}
.cat-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.cat-tab{padding:9px 18px;border-radius:100px;border:1.5px solid var(--line);background:var(--panel);
  color:var(--tx-muted);font-family:var(--ff-display);font-weight:600;font-size:14px;transition:.16s}
.cat-tab:hover{border-color:var(--brand);color:var(--brand)}
.cat-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-tab span{opacity:.7;font-size:12.5px;margin-left:3px}
.article-wrap{max-width:820px}
.article-cover{border-radius:var(--r-lg);overflow:hidden;margin-bottom:34px;background:var(--ink-2);aspect-ratio:16/9}
.article-cover img,.article-cover .ph-fallback{width:100%;height:100%;object-fit:cover}
.article-body{font-size:17px;line-height:1.8;color:var(--tx)}
.article-body p{margin-bottom:22px}
.article-body>p:first-child{font-size:19px;color:var(--heading)}
/* scroll-margin keeps a heading clear of the sticky navbar when the table of
   contents jumps to it — without it the heading lands under the header */
.article-body h2,.article-body h3{font-family:var(--ff-display);color:var(--heading);
  scroll-margin-top:110px;line-height:1.25}
.article-body h2{font-size:25px;margin:40px 0 16px;text-transform:uppercase;letter-spacing:.01em}
.article-body h3{font-size:19px;margin:30px 0 12px}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:26px}
.article-body li{margin-bottom:9px}
.article-body li::marker{color:var(--brand);font-weight:700}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--brand-lt)}
.article-body strong{color:var(--heading);font-weight:700}
.article-body blockquote{margin:0 0 22px;padding:4px 0 4px 22px;border-left:3px solid var(--brand)}
.article-body blockquote p{margin:0;font-size:18.5px;color:var(--heading);font-style:italic}
.article-body hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.article-body img{border-radius:var(--r-md);margin-bottom:22px}

/* ---- table of contents ---- */
.article-toc{margin:0 0 34px;padding:20px 24px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--panel-2)}
.article-toc h2{font-size:12px;font-family:var(--ff-display);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-soft);margin:0 0 12px}
.article-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.article-toc li{counter-increment:toc;margin:0}
.article-toc li.lv3{padding-left:20px}
.article-toc a{display:block;padding:5px 0;font-size:14.5px;color:var(--tx-muted);line-height:1.45}
.article-toc li.lv2>a::before{content:counter(toc) ". ";color:var(--brand);font-weight:700}
.article-toc a:hover{color:var(--brand)}
.article-toc a.on{color:var(--brand);font-weight:600}

/* ---- share row ---- */
.article-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 30px}
.article-share .lbl{font-family:var(--ff-display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-soft);margin-right:3px}
.article-share a,.article-share button{display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--tx-muted);transition:.18s}
.article-share a svg,.article-share button svg{width:16px;height:16px}
.article-share a:hover,.article-share button:hover{color:#fff;background:var(--brand);border-color:var(--brand)}
.share-copy{width:auto!important;padding:0 15px;gap:8px;grid-auto-flow:column}
.share-copy span{font-size:13px;font-weight:600;font-family:var(--ff-display)}
.share-copy.done{color:#fff;background:var(--brand);border-color:var(--brand)}

/* ---- author + prev/next ---- */
.article-foot{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.article-foot .article-share{margin:0}
.article-foot .author{display:flex;align-items:center;gap:13px}
.article-foot .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-family:var(--ff-display);font-weight:800;font-size:17px}
.article-foot .author b{display:block;font-family:var(--ff-display);font-size:15px;color:var(--heading)}
.article-foot .author span{font-size:13px;color:var(--tx-soft)}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.article-nav a{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel-2);transition:.2s;min-width:0}
.article-nav a:hover{border-color:var(--brand);transform:translateY(-2px)}
.article-nav span{display:block;font-family:var(--ff-display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.article-nav b{display:block;font-size:15px;color:var(--heading);line-height:1.35}
.article-nav .an-next{text-align:right}
@media(max-width:700px){
  .article-nav{grid-template-columns:1fr}
  .article-nav .an-next{text-align:left}
  .article-foot{flex-direction:column;align-items:flex-start}
  .article-body{font-size:16px}
  .article-body h2{font-size:21px}
}

/* ===================== BUYING FLOWS (car-detail) ===================== */
.mini{font-size:12px;color:var(--tx-muted);line-height:1.6}
.bb-hold{margin:14px 0 0;padding:9px 13px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:color-mix(in srgb,var(--brand) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 32%,var(--panel));color:var(--brand)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{padding:9px 15px;border-radius:100px;border:1.5px solid var(--line);background:var(--panel-2);
  color:var(--tx);font-family:var(--ff-display);font-weight:600;font-size:14px;transition:.16s}
.slot:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.slot.on{background:var(--brand);border-color:var(--brand);color:#fff}
.slot:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.slots .mini{width:100%;margin:0}
details.apply summary{list-style:none;cursor:pointer}
details.apply summary::-webkit-details-marker{display:none}
details.apply[open] summary{display:none}

/* compare */
.car-cmp{position:absolute;top:12px;right:54px;z-index:4;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:#6A7280;transition:.2s}
.car-cmp:hover{color:var(--brand);background:#fff;transform:scale(1.08)}
.car-cmp svg{width:17px;height:17px}
.car-cmp.on{background:var(--brand);color:#fff}
.car-hold{position:absolute;left:12px;bottom:20px;z-index:3;font-family:var(--ff-display);font-weight:700;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 10px;border-radius:100px}
.cmp-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:250;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;max-width:min(880px,calc(100vw - 28px));
  background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:10px 12px 10px 18px;box-shadow:var(--shadow-lg)}
.cmp-bar.warn{border-color:var(--brand);animation:cmpShake .4s}
@keyframes cmpShake{25%{transform:translateX(calc(-50% - 5px))}75%{transform:translateX(calc(-50% + 5px))}}
.cmp-items{display:flex;gap:8px;flex-wrap:wrap}
.cmp-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  background:var(--panel-2);border:1px solid var(--line);border-radius:100px;padding:5px 6px 5px 13px}
.cmp-chip button{width:20px;height:20px;border-radius:50%;background:var(--panel-3);color:var(--tx-muted);
  display:grid;place-items:center;font-size:13px;line-height:1}
.cmp-chip button:hover{background:var(--brand);color:#fff}
.cmp-acts{display:flex;gap:8px;align-items:center;margin-left:auto}
.cmp-acts .btn{padding:10px 18px}
.cmp-acts .btn-sm{padding:8px 14px;font-size:13px}

.cmp-empty{text-align:center;padding:70px 20px;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-lg)}
.cmp-empty h2{font-size:24px;text-transform:uppercase;margin-bottom:10px}
.cmp-empty p{color:var(--tx-muted);max-width:52ch;margin:0 auto 24px}
.toolbar-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.loading-block{padding:60px;text-align:center;color:var(--tx-muted)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.cmp-table th[scope=row]{text-align:left;width:170px;color:var(--tx-muted);font-family:var(--ff);font-weight:500;
  font-size:13px;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.cmp-table td{padding:13px 18px;border-bottom:1px solid var(--line-soft);border-left:1px solid var(--line-soft);vertical-align:middle}
.cmp-table thead th{padding:18px;border-bottom:1px solid var(--line);border-left:1px solid var(--line-soft);vertical-align:top}
.cmp-table tbody tr:last-child td,.cmp-table tbody tr:last-child th{border-bottom:none}
.cmp-head{display:grid;gap:10px;justify-items:start;min-width:220px}
.cmp-photo{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--ink-2)}
.cmp-photo img,.cmp-photo .ph-fallback{width:100%;height:100%;object-fit:cover}
.cmp-name{font-family:var(--ff-display);font-weight:800;font-size:16px;text-transform:uppercase;color:var(--heading);line-height:1.2}
.cmp-name:hover{color:var(--brand)}
.cmp-remove{font-size:12px;color:var(--tx-muted);text-decoration:underline}
.cmp-remove:hover{color:var(--brand)}
.cmp-table td.best{background:color-mix(in srgb,var(--brand) 7%,var(--panel));font-weight:600;color:var(--heading)}
.best-tag{display:inline-block;margin-left:8px;font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:var(--brand);color:#fff;padding:2px 8px;border-radius:100px}
.cmp-feats{font-size:12.5px;color:var(--tx-muted)}
.cmp-feats span{display:block;padding:1px 0}

@media(max-width:640px){
  .cmp-bar{left:12px;right:12px;transform:none;border-radius:16px;max-width:none;padding:12px}
  .cmp-bar.warn{animation:none;border-color:var(--brand)}
  .cmp-acts{width:100%;margin-left:0}
  .cmp-acts .btn{flex:1;justify-content:center}
  .car-cmp{right:52px}
}

@media(max-width:640px){
  .inv-main .car-grid{grid-template-columns:1fr}
  .inv-bar{align-items:stretch}
  /* flex squeezed the search box and the sort select down to a letter each —
     give them full-width rows of their own instead */
  .inv-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  /* :not(.sr-only) matters — width:100% here outranks .sr-only's width:1px, and
     a visually-hidden label stretched to full width still counts towards the
     page width, which scrolls the whole page sideways */
  .inv-tools>*:not(.sr-only){width:100%;min-width:0}
  .inv-tools input.finput{order:1;grid-column:1/-1;padding-right:14px}
  .inv-tools .filters-toggle{order:2;justify-content:center}
  .inv-tools select.finput{order:3}
  .inv-saved{order:4;grid-column:1/-1;justify-content:center}
}