/* Ý tưởng: trang đọc như hông lốp. Hero xanh cobalt với chiếc lốp khổng lồ xoay theo cuộn trang,
   phần giữa là bộ "đọc hông lốp" tính kích thước thật, còn lại là bố cục lớn, chữ ép, dữ liệu viết bằng font mono. */
:root{
  --bg:#ebe8e1; --paper:#f7f5f0; --fg:#121316; --muted:#5d5f66; --line:#cfcbc2;
  --blue:#0c0c0e; --blue-deep:#000000; --blue-fg:#ffffff;
  --rubber:#0d0d0f; --rubber-2:#17171a; --rubber-fg:#ecebe6; --rubber-mut:#9a9aa0;
  --hi:#ffe500; --hi-fg:#171400; --ok:#12804a; --tint:#dfe3ff;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:var(--body);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101114; --paper:#17181c; --fg:#ecebe6; --muted:#9b9ca3; --line:#2a2b31;
  --blue:#050506; --blue-deep:#000000; --rubber:#161618; --rubber-2:#1d1d20; --tint:#26261f; --ok:#4fd08c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101114; --paper:#17181c; --fg:#ecebe6; --muted:#9b9ca3; --line:#2a2b31;
  --blue:#050506; --blue-deep:#000000; --rubber:#161618; --rubber-2:#1d1d20; --tint:#26261f; --ok:#4fd08c; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance}
h2{font-size:clamp(40px,6vw,84px)}
.mono{font-family:var(--mono)}
.kicker{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s}
.btn:hover{transform:translateY(-2px)}
.btn-hi{background:var(--hi);color:var(--hi-fg)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-dark{background:var(--fg);color:var(--bg)}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- HERO ---------- */
.sample{background:var(--rubber);color:var(--hi);font:500 12px var(--mono);text-align:center;padding:6px 16px;letter-spacing:.04em}
.hero{background:var(--blue);color:var(--blue-fg);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 22px)}
.bar{display:flex;align-items:center;gap:20px;padding-block:20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo svg{width:38px;height:38px}
.logo b{font:800 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.bar nav{display:flex;gap:6px;flex-wrap:wrap}
.bar nav a{font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:99px}
.bar nav a:hover{background:rgba(255,255,255,.14)}
.bar .cart{font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.5);border-radius:99px;padding:8px 14px}
.bar .cart i{font-style:normal;background:var(--hi);color:var(--hi-fg);border-radius:99px;padding:1px 8px;margin-left:6px}
.hero-body{padding-block:clamp(40px,7vw,96px) clamp(48px,8vw,120px);position:relative}
.hero h1{font-size:clamp(60px,11.5vw,176px);letter-spacing:-.01em;max-width:8.5em}
.hero h1 span{display:block}
.hero h1 .o{color:transparent;-webkit-text-stroke:2px #fff}
.hero .lead{max-width:44ch;font-size:clamp(16px,1.6vw,19px);margin:28px 0 32px;color:#d8d8d2}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;gap:10px 36px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35);font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.facts b{color:var(--hi);font-weight:700}
.tire-hero{position:absolute;right:-3vw;top:50%;width:min(36vw,480px);aspect-ratio:1;transform:translateY(-50%);z-index:-1;filter:drop-shadow(0 30px 50px rgba(0,0,20,.45))}
.tire-hero svg{width:100%;height:100%;display:block}
#spin{transform-origin:0 0}
.tire-hero::before{content:"";position:absolute;inset:-7%;border-radius:50%;background:var(--hi);z-index:-1}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--hi)}
.reader{border-top:0}

/* ---------- ĐỌC HÔNG LỐP ---------- */
.reader{background:var(--rubber);color:var(--rubber-fg);padding-block:clamp(56px,8vw,112px)}
.reader h2{max-width:11em}
.reader .intro{max-width:52ch;color:var(--rubber-mut);margin:20px 0 0}
.rd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:48px;align-items:start}
.sidewall{border:1px solid #2b2b30;border-radius:18px;padding:clamp(18px,3vw,36px);background:radial-gradient(120% 120% at 0% 0%,#1b1b1f,#0f0f11)}
.reading{display:flex;flex-wrap:wrap;gap:6px 2px;font:700 clamp(30px,6.4vw,84px)/1.05 var(--mono);letter-spacing:-.02em;margin:0 0 6px}
.seg{all:unset;cursor:pointer;padding:2px 6px;border-radius:8px;color:#d9d8d2;border-bottom:3px solid transparent;transition:background .15s,color .15s}
.seg:hover{background:#25252a}
.seg[aria-pressed="true"]{background:var(--hi);color:var(--hi-fg)}
.seg:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sep{color:#6c6c73;padding:2px 0}
.explain{margin-top:22px;padding:18px 20px;border-left:4px solid var(--hi);background:#16161a;border-radius:0 12px 12px 0;min-height:112px}
.explain h3{font-size:28px;margin-bottom:8px;color:var(--hi)}
.explain p{margin:0;color:#cfcec8;max-width:60ch}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.metric{border:1px solid #2b2b30;border-radius:12px;padding:12px 14px;min-width:0}
.metric span{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rubber-mut)}
.metric b{display:block;font:700 clamp(22px,2.6vw,32px)/1.1 var(--display);margin-top:4px;font-variant-numeric:tabular-nums}
.metric small{font:400 12px var(--mono);color:var(--rubber-mut)}
.side{display:flex;flex-direction:column;gap:18px;min-width:0}
.ctrl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ctrl label{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rubber-mut);margin-bottom:5px}
.ctrl select{width:100%;min-height:48px;border-radius:10px;border:1px solid #34343a;background:#16161a;color:var(--rubber-fg);font:500 16px var(--mono);padding:0 12px}
.diagram{border:1px solid #2b2b30;border-radius:18px;padding:16px;display:grid;place-items:center;background:#101012}
.diagram svg{width:100%;max-width:300px;height:auto}
.diagram circle{transition:r .35s cubic-bezier(.3,.8,.3,1)}
.diagram figcaption{font:400 12px var(--mono);color:var(--rubber-mut);text-align:center;margin-top:6px}
.find{width:100%}

/* ---------- CỬA HÀNG THEO THƯƠNG HIỆU ---------- */
.logo img{height:68px;width:auto;display:block;border-radius:0 0 12px 12px}
.flogo{height:80px;width:auto;display:block;border-radius:0 0 12px 12px;margin-bottom:16px}
.hot{display:inline-flex;flex-direction:column;gap:4px;margin:0 0 26px;color:#fff}
.hot small{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hi)}
.hot b{font:700 clamp(40px,7.4vw,104px)/1 var(--mono);letter-spacing:-.04em;color:var(--hi)}
.hot:hover b{text-decoration:underline;text-underline-offset:8px}
.shop{padding-block:clamp(56px,8vw,112px)}
.shop-head p{max-width:50ch;color:var(--muted);margin:14px 0 0}
.brandnav{display:flex;gap:10px;flex-wrap:wrap;position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:var(--bg);padding-block:12px;margin-top:24px;border-bottom:1px solid var(--line)}
.bn{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 18px 6px 8px;border:1.5px solid var(--fg);border-radius:99px;background:transparent;color:var(--fg);cursor:pointer;font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.bn img{height:40px;width:72px;object-fit:contain;background:#fff;border-radius:99px;padding:4px 8px}
.bn.all,.bn.txt{padding-left:20px}
.bn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.bn small{opacity:.6;font-size:12px}
.matchnote{font:500 13px var(--mono);margin:16px 0 0;color:var(--ok);min-height:20px}
.bblock{margin-top:44px;scroll-margin-top:96px}
.bhead{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border-top:3px solid var(--fg);padding-top:20px;margin-bottom:20px}
.bhead img,.bhead .lg{width:168px;height:96px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px}
.bhead .lg{display:grid;place-items:center;font:800 28px var(--display);color:#111;text-transform:uppercase}
.bhead h3{font-size:clamp(40px,6vw,76px)}
.bhead p{margin:8px 0 0;color:var(--muted);max-width:56ch}
.bhead .cnt{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.card.match{outline:3px solid var(--hi);outline-offset:-3px}
.pic{background:#fff;aspect-ratio:1;position:relative;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic img{transform:scale(1.05)}
.tag{position:absolute;top:12px;left:12px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--rubber);color:var(--rubber-fg);padding:5px 10px;border-radius:99px;z-index:1}
.tag.m{background:var(--hi);color:var(--hi-fg)}
.cb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.mname{font:800 34px/1 var(--display);text-transform:uppercase}
.muse{font-size:13.5px;color:var(--muted);line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 12px var(--mono);padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--fg)}
.chip.hit{border-color:var(--hi);background:var(--hi);color:var(--hi-fg);font-weight:700}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line)}
.foot b{font:800 22px var(--display);text-transform:uppercase;letter-spacing:.02em}
.foot .btn{min-height:40px;padding:0 16px;font-size:13px}
.note{font:400 12px/1.5 var(--mono);color:var(--muted);margin-top:18px;max-width:90ch}

/* ---------- DỊCH VỤ ---------- */
.services{padding-block:clamp(56px,8vw,112px)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.svc .ic{width:56px;height:56px;border-radius:16px;background:var(--hi);color:var(--hi-fg);display:grid;place-items:center}
.svc .ic svg{width:32px;height:32px}
.svc h3{font-size:32px}
.svc p{margin:0;color:var(--muted);font-size:15px}
.svc .when{font:500 12px/1.5 var(--mono);color:var(--fg);border-top:1px dashed var(--line);padding-top:10px;margin-top:auto}

/* ---------- XE SANG ---------- */
.luxe{background:var(--rubber);color:var(--rubber-fg);padding-block:clamp(56px,8vw,112px);position:relative;overflow:hidden}
.luxe-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.luxe h2{max-width:9em}
.luxe .lead{color:#c9c8c2;max-width:52ch;margin:20px 0 24px}
.luxe ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.luxe li{padding-left:28px;position:relative;color:#e4e3dd}
.luxe li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border-radius:50%;background:var(--hi)}
.luxe-card{background:#fff;color:#111;border-radius:24px;padding:20px 20px 8px;display:grid;gap:12px}
.luxe-card img{width:min(100%,360px);margin-inline:auto;display:block}
.luxe-card figcaption{font:600 14px var(--mono);text-align:center}
.oe{width:100%;border-collapse:collapse;font-size:14px}
.oe th,.oe td{text-align:left;padding:9px 6px;border-top:1px solid #e3e1da}
.oe th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b6b72}
.oe td:last-child{font:700 14px var(--mono)}
.luxe-card .src{font:400 11px var(--mono);color:#6b6b72;padding:6px 6px 10px;margin:0}

/* ---------- KIẾN THỨC (BLOG) ---------- */
.blog{padding-block:clamp(56px,8vw,112px)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.post{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;text-align:left;cursor:pointer;color:var(--fg);font-family:var(--body);min-width:0;transition:transform .2s,border-color .2s}
.post:hover{transform:translateY(-4px);border-color:var(--fg)}
.post .cat{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--hi);color:var(--hi-fg);padding:4px 10px;border-radius:99px;align-self:flex-start}
.post h3{font-size:30px;line-height:1}
.post p{margin:0;color:var(--muted);font-size:14.5px}
.post .more{margin-top:auto;font:600 13px var(--mono)}
.soon{margin-top:28px;border-top:3px solid var(--fg);padding-top:20px}
.soon h3{font-size:28px;margin-bottom:12px}
.soon ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 32px}
.soon li{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.soon li small{font:500 11px var(--mono);color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.art{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;padding:max(16px,env(safe-area-inset-top,0px)) 0 48px}
.art[hidden]{display:none}
.art-bar{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);padding-block:12px;z-index:2}
.art-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.art-bar .btn{min-height:44px;padding:0 20px}
.art-body{max-width:720px;margin:36px auto 0;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.art-body .cat{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--hi);color:var(--hi-fg);padding:4px 10px;border-radius:99px}
.art-body h1{font-size:clamp(40px,7vw,72px);margin:16px 0 8px}
.art-body .meta{font:400 12px var(--mono);color:var(--muted);margin-bottom:28px}
.art-body h3{font-size:34px;margin:30px 0 8px}
.art-body p,.art-body li{font-size:17px;line-height:1.7;max-width:65ch}
.art-body table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
.art-body th,.art-body td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.art-body th{background:var(--paper);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.art-cta{margin-top:36px;background:var(--rubber);color:var(--rubber-fg);border-radius:20px;padding:24px;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.art-cta b{font:700 clamp(28px,5vw,40px) var(--mono);color:var(--hi);letter-spacing:-.04em}

/* ---------- CƠ SỞ ---------- */
.locs{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.loc{border:1.5px solid var(--fg);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.loc.new{background:var(--hi);color:var(--hi-fg);border-color:var(--hi)}
.loc b{font:800 28px/1 var(--display);text-transform:uppercase}
.loc span{font-size:14.5px}
.loc .btn{margin-top:12px;align-self:flex-start;min-height:44px}
@media (max-width:1020px){.bhead{grid-template-columns:auto 1fr}.bhead .cnt{grid-column:1/-1}.bhead img,.bhead .lg{width:120px;height:72px}
  .svc-grid,.posts,.loc-grid{grid-template-columns:repeat(2,1fr)}.luxe-grid{grid-template-columns:1fr}.soon ul{grid-template-columns:1fr}}
@media (max-width:640px){.brandnav{flex-wrap:nowrap;overflow-x:auto}.bn{flex:none}.svc-grid,.posts,.loc-grid{grid-template-columns:1fr}}

/* ---------- HÀNH TRÌNH ---------- */
.roads{background:var(--paper);border-block:1px solid var(--line);padding-block:clamp(56px,8vw,112px)}
.road-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-top:40px}
.road{border-radius:22px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px;min-height:340px;min-width:0;position:relative;overflow:hidden}
.road h3{font-size:clamp(34px,4.2vw,56px)}
.road p{margin:0;max-width:34ch}
.road .btn{margin-top:auto;align-self:flex-start;min-height:44px}
.r1{background:var(--hi);color:var(--hi-fg)}
.r2{background:var(--rubber);color:var(--rubber-fg)}
.r3{background:var(--paper);color:var(--fg);border:2px solid var(--fg)}
.road svg.deco{position:absolute;right:-30px;bottom:-30px;width:180px;opacity:.18}

/* ---------- QUY TRÌNH ---------- */
.proc{padding-block:clamp(56px,8vw,112px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:2px solid var(--fg)}
.step{padding:22px 20px 8px 0;border-right:1px solid var(--line);padding-left:20px;min-width:0}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step .min{font:700 12px var(--mono);letter-spacing:.1em;color:var(--fg);text-transform:uppercase;background:var(--hi);color:var(--hi-fg);display:inline-block;padding:3px 10px;border-radius:99px}
.step h3{font-size:34px;margin:8px 0}
.step p{margin:0;color:var(--muted);font-size:15px}

/* ---------- BÁO GIÁ ---------- */
.quote{background:var(--hi);color:var(--hi-fg);padding-block:clamp(56px,8vw,112px);position:relative;overflow:hidden}
.quote .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.quote h2{font-size:clamp(48px,8vw,120px)}
.quote p{color:var(--hi-fg);max-width:42ch;margin:20px 0 0}
.phone{display:block;margin-top:28px;font:700 clamp(44px,8.6vw,128px)/1 var(--mono);letter-spacing:-.05em;color:var(--hi-fg)}
.form{background:var(--paper);color:var(--fg);padding:clamp(18px,3vw,30px);border-radius:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.form input,.form textarea{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);font:16px var(--body);padding:10px 14px}
.form input:focus,.form textarea:focus{border-color:var(--fg);outline:none}
.form .ok{margin:0;color:var(--ok);font-weight:600;font-size:14px;max-width:none}

footer{background:var(--rubber);color:var(--rubber-fg);padding-block:56px 40px;overflow:hidden}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:14px;color:var(--rubber-mut)}
footer h3{font-size:22px;color:var(--rubber-fg);margin-bottom:10px}
footer p{margin:0 0 4px}
.mark{font:800 clamp(56px,15.5vw,230px)/.85 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-top:48px;color:#1c1c20;white-space:nowrap}
.floating{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:20}
.floating a{min-height:48px;padding:0 20px;border-radius:99px;display:flex;align-items:center;font-weight:600;font-size:14px;background:var(--fg);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.floating a.c{background:var(--hi);color:var(--hi-fg)}

@media (max-width:1020px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .rd,.quote .wrap{grid-template-columns:1fr}
  .road-grid{grid-template-columns:1fr}
  .road{min-height:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(3){padding-left:0;border-top:1px solid var(--line)}
  .step:nth-child(4){border-top:1px solid var(--line)}
  footer .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tire-hero{width:64vw;right:-10vw;top:auto;bottom:-16vw;transform:none;opacity:.95}
  .hero-body{padding-bottom:clamp(90px,30vw,200px)}
  .grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{padding-left:0;border-right:0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  .bar nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .bar nav a{white-space:nowrap}
  .facts{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
.hot b{font-family:var(--display);font-weight:800;font-size:clamp(52px,10vw,148px);letter-spacing:0}
.phone{font-family:var(--display);font-weight:800;font-size:clamp(52px,8vw,116px);letter-spacing:0}
.art-cta b{font-family:var(--display);font-weight:800;font-size:clamp(36px,6vw,56px);letter-spacing:0}
.reading{font-family:var(--display);font-weight:800;font-size:clamp(44px,8vw,112px);letter-spacing:.01em}
.locs{background:var(--paper);border-block:1px solid var(--line);padding-block:clamp(40px,6vw,80px)}
.locs h2{max-width:13em;margin-top:14px}
.locs .sub{max-width:60ch;color:var(--muted);margin:14px 0 0}
.loc .tg{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--fg);color:var(--bg);align-self:flex-start;margin-bottom:6px}
.loc.new .tg{background:var(--hi-fg);color:var(--hi)}
.loc b{font-size:34px}
.loc .big{font-weight:600;font-size:16px;line-height:1.4}

/* ===== SITE NHIỀU TRANG ===== */
.bar nav a.on{background:var(--hi);color:var(--hi-fg)}
.bar nav a{font-size:12.5px;padding:8px 10px}
.hero.sub .hero-body{padding-block:clamp(28px,5vw,64px) clamp(44px,6vw,88px)}
.crumbs{font:500 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:#bdbdb6;margin-bottom:16px}
.crumbs a:hover{color:var(--hi)}
.hero.sub h1{font-size:clamp(48px,8.4vw,128px);max-width:11em}
.hero.sub .lead{margin:20px 0 0;max-width:56ch}
.hero.sub .cta{margin-top:28px}
.sec{padding-block:clamp(48px,7vw,96px)}
.sec.alt{background:var(--paper);border-block:1px solid var(--line)}
.sec h2{max-width:12em}
.sec .sub{max-width:60ch;color:var(--muted);margin:14px 0 0}
.kk{color:var(--fg);border-bottom:3px solid var(--hi);padding-bottom:2px;display:inline-block}
.brand-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:32px}
.bs{background:#fff;color:#111;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;min-width:0;transition:transform .2s,border-color .2s}
.bs:hover{transform:translateY(-4px);border-color:var(--fg)}
.bs img{width:100%;max-width:140px;height:70px;object-fit:contain}
.bs .lg{height:70px;display:grid;place-items:center;font:800 26px var(--display);text-transform:uppercase}
.bs small{font:600 12px var(--body);color:#555}
.more-link{display:inline-block;margin-top:24px;font-weight:700;border-bottom:3px solid var(--hi);padding-bottom:2px}
.faq{display:grid;gap:10px;margin-top:32px;max-width:860px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.faq summary{cursor:pointer;font:800 24px/1.15 var(--display);text-transform:uppercase;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{margin-bottom:10px}
.faq p{margin:0;color:var(--muted);max-width:70ch}
.finder-mini{display:grid;grid-template-columns:repeat(3,1fr) auto auto;gap:10px;align-items:end;margin-top:28px;max-width:820px}
.finder-mini label{display:block;font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.finder-mini select{width:100%;min-height:48px;border-radius:10px;border:1.5px solid var(--fg);background:var(--paper);color:var(--fg);font:500 16px var(--body);padding:0 12px}
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.about-grid p{max-width:62ch}
.facts-box{background:var(--rubber);color:var(--rubber-fg);border-radius:22px;padding:24px;display:grid;gap:14px}
.facts-box div{border-top:1px solid #2b2b30;padding-top:12px}
.facts-box div:first-child{border-top:0;padding-top:0}
.facts-box b{display:block;font:800 40px/1 var(--display);color:var(--hi);text-transform:uppercase}
.facts-box span{font-size:14px;color:#c9c8c2}
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.why div{border-left:4px solid var(--hi);background:var(--paper);padding:18px 20px;border-radius:0 14px 14px 0}
.why h3{font-size:30px;margin-bottom:6px}
.why p{margin:0;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.tbl th,.tbl td{border-top:1px solid var(--line);padding:12px 8px;text-align:left;vertical-align:top}
.tbl th{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post{text-decoration:none}
.art-wrap{padding-bottom:48px}
.art-wrap .art-body{margin-top:40px}
.hot-sm{display:inline-block;font:800 clamp(44px,7vw,92px)/1 var(--display);color:var(--hi-fg)}
.contact-note{margin-top:16px;font-size:14px;color:var(--hi-fg)}
@media (max-width:1020px){.brand-strip{grid-template-columns:repeat(3,1fr)}.about-grid,.why{grid-template-columns:1fr}}
@media (max-width:640px){.brand-strip{grid-template-columns:repeat(2,1fr)}.finder-mini{grid-template-columns:1fr 1fr}.finder-mini button{grid-column:1/-1}}

/* ===== BỔ SUNG THEO COMMENT ===== */
.qa{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.qa h3{font-size:28px;line-height:1.05;margin-bottom:8px}
.qa p{margin:0;color:var(--muted);max-width:70ch}
.faq{gap:12px}
.loc img.ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:10px;display:block}
.loc img.ph.top{object-position:50% 18%}
.loc .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.loc .acts .btn{margin-top:0;min-height:44px}
.maps{display:grid;gap:10px;margin-top:4px}
.map-link{display:grid;grid-template-columns:1fr auto;gap:2px 12px;border:1.5px solid var(--fg);border-radius:14px;padding:14px 18px;transition:background .15s}
.map-link:hover{background:var(--hi);border-color:var(--hi);color:var(--hi-fg)}
.map-link b{font:800 24px/1 var(--display);text-transform:uppercase;grid-column:1}
.map-link span{grid-column:1;font-size:14px;color:var(--muted)}
.map-link:hover span{color:var(--hi-fg)}
.map-link i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-weight:700;font-size:13px}
.hero.sub .tire-hero{width:min(30vw,380px);right:0}
.bs{padding:14px 16px}
.bs img{max-width:150px;height:76px}
.alt-sec{background:var(--paper);border-block:1px solid var(--line)}
.sec .bblock:first-child{margin-top:28px}
.svc .svc-link{margin-top:4px;align-self:flex-start;font-weight:700;font-size:14px;background:linear-gradient(var(--hi),var(--hi)) left bottom/100% 3px no-repeat;padding-bottom:2px;transition:background-size .3s,color .3s}
.svc .svc-link:hover{background-size:100% 100%;color:var(--hi-fg)}
.bar nav a{padding:8px 9px}
.svc-groups{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ===== ANIMATION ===== */
@keyframes tp-up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes tp-swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tp-fade{from{opacity:0}to{opacity:1}}
@keyframes tp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tp-tire-in{from{opacity:0;scale:.55;rotate:-120deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes tp-marquee{to{transform:translateX(-50%)}}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 rgba(255,229,0,.65),0 8px 24px rgba(0,0,0,.3)}70%{box-shadow:0 0 0 18px rgba(255,229,0,0),0 8px 24px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 rgba(255,229,0,0),0 8px 24px rgba(0,0,0,.3)}}
@keyframes tp-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* vào trang */
body{animation:tp-fade .5s both}
.hero .bar{animation:tp-fade .8s .05s both}
.hero h1 span{animation:tp-up .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(1){animation-delay:.10s}
.hero h1 span:nth-child(2){animation-delay:.24s}
.hero h1 span:nth-child(3){animation-delay:.38s}
.hero .crumbs{animation:tp-fade .7s .1s both}
.hero .lead{animation:tp-up .9s .5s cubic-bezier(.2,.7,.2,1) both}
.hero .hot{animation:tp-up .9s .62s cubic-bezier(.2,.7,.2,1) both}
.hero .cta{animation:tp-up .9s .74s cubic-bezier(.2,.7,.2,1) both}
.hero .facts{animation:tp-fade 1.2s 1s both}
.tire-hero{animation:tp-tire-in 1.3s .15s cubic-bezier(.2,.8,.2,1) both}
.hero::after{transform-origin:left;animation:tp-bar 1.2s .3s cubic-bezier(.2,.7,.2,1) both}

/* hiện dần khi cuộn tới */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.kk.rv{border-bottom-color:transparent;background:linear-gradient(var(--hi),var(--hi)) left bottom/0% 3px no-repeat;transition:opacity .8s,transform .8s,background-size .9s .3s cubic-bezier(.2,.7,.2,1)}
.kk.rv.in{background-size:100% 3px}

/* dải chữ chạy */
.marquee{background:var(--hi);color:var(--hi-fg);overflow:hidden;border-block:3px solid var(--rubber);white-space:nowrap}
.mq-track{display:flex;width:max-content;animation:tp-marquee 42s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font:800 clamp(26px,3.4vw,44px)/1 var(--display);text-transform:uppercase;padding:14px 0;display:flex;align-items:center}
.mq-track span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--rubber);margin:0 clamp(18px,2.6vw,36px)}

/* thanh trên cố định và thanh tiến trình cuộn */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--hi);transform-origin:left;transform:scaleX(0);z-index:60;pointer-events:none}
.stickbar{position:fixed;left:0;right:0;top:0;z-index:40;background:rgba(12,12,14,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.7,.2,1);padding-top:env(safe-area-inset-top,0px)}
.stickbar.show{transform:none}
.stickbar .wrap{display:flex;align-items:center;gap:14px;padding-block:8px}
.stickbar .logo{margin-right:auto}
.stickbar .logo img{height:46px;width:auto;display:block;border-radius:8px}
.stickbar nav{display:flex;gap:4px}
.stickbar nav a{font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:99px;color:#fff}
.stickbar nav a:hover{background:rgba(255,255,255,.14)}
.stickbar nav a.on{background:var(--hi);color:var(--hi-fg)}
.stickbar .cart{font:600 13px var(--mono);letter-spacing:.06em;border:1.5px solid rgba(255,255,255,.5);border-radius:99px;padding:8px 14px;color:#fff;white-space:nowrap}
@media (max-width:900px){.stickbar nav{display:none}}

/* nút gọi nổi nhấp nháy, logo nhún */
.floating a.c{animation:tp-pulse 2.6s infinite}
.hero .logo img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.hero .logo:hover img{transform:translateY(4px) rotate(-3deg)}

/* tương tác khi rê chuột */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.28);transform:translateX(-101%) skewX(-18deg);transition:transform .55s}
.btn:hover::before{transform:translateX(101%) skewX(-18deg)}
.btn-ghost::before,.btn-dark::before{background:rgba(255,229,0,.22)}
.bar nav a,.stickbar nav a{transition:background .25s,color .25s}
.svc{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.svc:hover{transform:translateY(-8px);border-color:var(--fg);box-shadow:0 20px 40px rgba(0,0,0,.14)}
.svc .ic{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.svc:hover .ic{transform:rotate(-10deg) scale(1.12)}
.loc{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.loc:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(0,0,0,.18)}
.loc img.ph{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.loc:hover img.ph{transform:scale(1.04)}
.bs img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bs:hover img{transform:scale(1.1)}
.bn{transition:background .2s,color .2s,transform .2s}
.bn:hover{transform:translateY(-3px)}
.chip{transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{transform:translateY(-2px)}
.post{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.post:hover{box-shadow:0 20px 40px rgba(0,0,0,.14)}
.post .more::after{content:" →";display:inline-block;transition:transform .25s}
.post:hover .more::after{transform:translateX(6px)}
.more-link{background:linear-gradient(var(--hi),var(--hi)) left bottom/100% 3px no-repeat;border-bottom:0;transition:background-size .35s,color .35s;padding-bottom:3px}
.more-link:hover{background-size:100% 100%;color:var(--hi-fg)}
.map-link{transition:background .25s,border-color .25s,transform .25s}
.map-link:hover{transform:translateX(6px)}
.step{transition:background .3s}
.step:hover{background:var(--paper)}
.facts-box div{transition:transform .3s}
.facts-box div:hover{transform:translateX(8px)}
.seg{transition:background .2s,color .2s,transform .15s}
.seg:active{transform:scale(.94)}
.explain.flip{animation:tp-swap .45s cubic-bezier(.2,.7,.2,1) both}
.metric{transition:border-color .3s,transform .3s}
.metric:hover{border-color:var(--hi);transform:translateY(-3px)}
.hero .hot b{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.hero .hot:hover b{transform:scale(1.04);text-decoration:none}
.luxe-card img:first-child{animation:tp-float 6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .progress{display:none}
}

/* ===== BÁO GIÁ: GỌI HOẶC ZALO ===== */
.qcard{background:var(--paper);color:var(--fg);padding:clamp(20px,3vw,32px);border-radius:22px;display:grid;gap:12px}
.qcard h3{font-size:clamp(34px,4vw,48px)}
.quote .qcard p{margin:0;max-width:none;color:var(--muted)}
.qcard .qbtn{width:100%;min-height:60px;font-size:17px}
.qcard .qpick{border:1.5px dashed var(--fg);border-radius:14px;padding:14px 16px;display:grid;gap:8px}
.qcard .qpick[hidden]{display:none}
.qcard .qpick b{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase}
.quote .qcard .qpick p{color:var(--fg);font-weight:600}
.qcard .qpick .btn{color:var(--fg);min-height:44px}
.quote .qcard .qnote{font-size:14px}
.qcard .qnote a{font-weight:700;border-bottom:2px solid var(--hi)}

/* ===== CHIẾT LỐP (animation cuộn) ===== */
.anat{height:700vh;position:relative;background:var(--rubber);color:var(--rubber-fg)}
.anat-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;padding-top:48px;background:radial-gradient(90% 80% at 30% 50%,#1b1b1f 0%,var(--rubber) 70%)}
.anat-visual{height:100%;min-width:0;display:grid;place-items:center}
.anat-visual svg{width:100%;height:100%;max-height:100vh;display:block;overflow:visible}
.anat-visual .lbl{opacity:0}
.anat-visual .lbl circle{fill:var(--hi)}
.anat-visual .lbl path{stroke:var(--hi);stroke-width:1.6;fill:none}
.anat-visual .lbl text{font:700 14px var(--body);letter-spacing:.14em;fill:#ecebe6}
.anat-visual .emb{font:700 12px var(--body);letter-spacing:.18em;fill:#d9d8d2}
.anat-text{padding:0 clamp(16px,4vw,64px) 0 0;min-width:0}
.anat-kicker{color:var(--hi)!important}
.anat-cards{position:relative;min-height:clamp(300px,46vh,440px);margin-top:18px}
.anat-card{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.anat-card.on{opacity:1;transform:none;pointer-events:auto}
.anat-card .no{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hi)}
.anat-card h2{font-size:clamp(40px,4.8vw,72px);margin:12px 0 16px;max-width:8em}
.anat-card p{font-size:clamp(15px,1.4vw,19px);line-height:1.65;color:#cfcec8;max-width:46ch;margin:0}
.anat-card .cta{margin-top:24px}
.anat-dots{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:3}
.anat-dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid #6c6c73;background:transparent;padding:0;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}
.anat-dots button.on{background:var(--hi);border-color:var(--hi);transform:scale(1.35)}
.anat-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:600 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:#9a9aa0;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.anat-hint::after{content:"";width:2px;height:26px;background:linear-gradient(var(--hi),transparent);animation:tp-hint 1.6s ease-in-out infinite}
@keyframes tp-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.anat-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.anat-progress i{display:block;height:100%;background:var(--hi);transform-origin:left;transform:scaleX(0)}
/* không có JavaScript hoặc giảm chuyển động: hiện tĩnh, xếp dọc */
.anat:not(.js),.anat.static{height:auto}
.anat:not(.js) .anat-stage,.anat.static .anat-stage{position:static;height:auto;padding-block:72px;grid-template-columns:1fr;gap:24px}
.anat:not(.js) .anat-visual,.anat.static .anat-visual{height:auto}
.anat:not(.js) .anat-visual svg,.anat.static .anat-visual svg{height:auto;max-height:70vh}
.anat:not(.js) .anat-cards,.anat.static .anat-cards{min-height:0;display:grid;gap:22px}
.anat:not(.js) .anat-card,.anat.static .anat-card{position:static;opacity:1;transform:none;pointer-events:auto}
.anat:not(.js) .anat-dots,.anat:not(.js) .anat-hint,.anat:not(.js) .anat-progress,.anat.static .anat-dots,.anat.static .anat-hint,.anat.static .anat-progress{display:none}
.anat:not(.js) .anat-visual .lbl,.anat.static .anat-visual .lbl{opacity:1}
@media (max-width:860px){
  .anat{height:760vh}
  .anat-stage{grid-template-columns:1fr;grid-template-rows:50vh auto;align-content:start;padding-top:54px}
  .anat-visual{height:50vh}
  .anat-text{padding:0 16px 24px}
  .anat-cards{min-height:300px;margin-top:8px}
  .anat-card h2{font-size:clamp(34px,9vw,48px);margin:8px 0 10px}
  .anat-visual .lbl text{font-size:16px}
  .anat-dots{right:8px}
  .anat-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.anat-hint::after{animation:none}}

footer a{border-bottom:1px solid transparent}footer a:hover{color:var(--hi);border-color:var(--hi)}