@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-400-normal.e9b69ab5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-400-normal.87427ebb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-400-normal.691df80f.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-500-normal.85a8a274.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-500-normal.ef656bb5.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-500-normal.f881b158.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-600-normal.5ccdf66d.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-600-normal.73948a84.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-600-normal.2ab59d7b.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-700-normal.7ca7cd19.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-700-normal.a757bb05.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-700-normal.628819a5.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-800-normal.f4f6d254.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-800-normal.3eb373e0.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-800-normal.1984a055.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.cb96b5f3.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-vietnamese-400-normal.bd5ccce8.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.e335057f.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-vietnamese-500-normal.04bae18e.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
[hidden]{display:none!important}img{max-width:100%}body{margin:0}

/* Light theme only (per Figma). Layout: catalogue-sheet site — blue brand bands, white drawing-sheet surfaces, codes set in mono, d×D×B as the signature data line */
:root{
  --brand:#0103E4; --brand-ink:#0103E4; --brand-soft:#E8E9FD; --red:#FF3131; --red-ink:#D91F1F;
  --bg:#F5F6FB; --surface:#FFFFFF; --sheet:#F0F2F9; --ink:#121433; --muted:#585D7C; --line:#D9DCEB; --line-strong:#B9BDD6;
  --on-brand:#FFFFFF; --on-brand-dim:rgba(255,255,255,.72); --grid:rgba(255,255,255,.09);
  --ok:#0B7D45; --ok-bg:#E3F5EB; --warn:#9A5B00; --warn-bg:#FFF1D6; --na:#4F5370; --na-bg:#ECEDF3;
  --shadow:0 1px 2px rgba(18,20,51,.06),0 8px 24px rgba(18,20,51,.06);
  --f-display:"Be Vietnam Pro","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-body:"Be Vietnam Pro","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1200px; --r:8px; color-scheme:light;
}
:lang(zh){--f-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei","Be Vietnam Pro",sans-serif;--f-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei","Be Vietnam Pro",system-ui,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font:700 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top utility bar */
.topbar{background:var(--brand);color:var(--on-brand);font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;flex-wrap:wrap}
.topbar .phones{display:flex;gap:16px;flex-wrap:wrap}
.topbar .phones span b{font-family:var(--f-mono);font-weight:600;letter-spacing:.02em}
.langs{display:flex;gap:2px}
.langs button{background:none;border:0;color:var(--on-brand-dim);padding:4px 8px;cursor:pointer;font:700 12px/1 var(--f-display);letter-spacing:.08em;border-radius:3px}
.langs button[aria-pressed="true"]{color:var(--brand);background:var(--on-brand)}
.langs button:hover{color:var(--on-brand)}
.langs button[aria-pressed="true"]:hover{color:var(--brand)}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important}
.logo svg{width:38px;height:38px;flex:none}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font:800 22px/1 var(--f-display);letter-spacing:.02em;color:var(--brand-ink)}
.logo .wm small{font:500 10.5px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{font:700 14px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:10px 12px;border-radius:4px;text-decoration:none}
nav.main a:hover{background:var(--brand-soft)}
nav.main a[aria-current="page"]{color:var(--brand-ink);box-shadow:inset 0 -3px 0 var(--red)}
.cartbtn{display:flex;align-items:center;gap:8px;border:1.5px solid var(--brand-ink);color:var(--brand-ink);background:none;border-radius:4px;padding:8px 12px;font:700 13px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.cartbtn .n{background:var(--red);color:#fff;border-radius:10px;min-width:20px;padding:2px 6px;font:700 12px/16px var(--f-body);text-align:center}
.menubtn{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:4px;padding:8px 10px;cursor:pointer}
@media (max-width:900px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  nav.main.open{display:flex}
  nav.main a{padding:14px 8px}
  .menubtn{display:block}
  .cartbtn .lbl{display:none}
}

/* generic sections */
main{min-height:60vh}
.sec{padding-block:56px}
.sec.tight{padding-block:36px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head .eyebrow+h2{margin-top:8px}
.sec-head h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;text-transform:uppercase;color:var(--ink)}
.sec-head p{color:var(--muted);max-width:62ch;margin-top:8px}
.sec-head .more{font:700 14px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.band{background:var(--brand);color:var(--on-brand)}
.band .sec-head h2,.band h2,.band h3{color:var(--on-brand)}
.band .sec-head p{color:var(--on-brand-dim)}
.alt{background:var(--surface);border-block:1px solid var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;padding:12px 20px;font:700 14px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;text-decoration:none!important;white-space:nowrap}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{filter:brightness(.94)}
.btn.line{border-color:var(--red);color:var(--red-ink);background:transparent}
.btn.white{background:var(--on-brand);color:var(--brand)}
.btn.ghost{border-color:var(--on-brand-dim);color:var(--on-brand)}
.btn.blue{background:var(--brand);color:#fff}
.btn.sm{padding:8px 12px;font-size:12px}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;padding-block:18px 0}
.crumbs a{color:var(--muted)}
.crumbs span:not(:last-child)::after{content:"/";margin-left:6px;color:var(--line-strong)}

/* hero */
.hero{background:var(--brand);color:var(--on-brand);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:48px 56px}
.hero h1{font-size:clamp(32px,5.6vw,68px);overflow-wrap:anywhere;font-weight:800;text-transform:uppercase;line-height:1.02;margin:14px 0 14px}
.hero h1 em{font-style:normal;color:var(--on-brand);box-shadow:inset 0 -.14em 0 var(--red)}
.hero .lead{font-size:clamp(16px,1.6vw,19px);color:var(--on-brand-dim);max-width:46ch}
.hero .eyebrow{color:#FF8A8A}
.hero-art{position:relative;aspect-ratio:4/3;max-width:100%}
.hero-art .a{position:absolute;filter:drop-shadow(0 18px 24px rgba(0,0,20,.35))}
.hero-art .a svg{width:100%;height:auto;display:block}
.hero-art .a1{width:78%;right:-4%;top:2%}
.hero-art .a2{width:56%;left:0;bottom:2%}
.hero-art .a3{width:44%;right:4%;bottom:-2%}
.dimtag{position:absolute;font:600 12px/1 var(--f-mono);color:var(--on-brand);background:rgba(0,0,30,.35);border:1px solid rgba(255,255,255,.35);padding:6px 8px;border-radius:3px;white-space:nowrap}
.search{margin-top:26px;background:var(--surface);border-radius:6px;padding:6px;display:flex;gap:6px;max-width:560px;box-shadow:0 10px 30px rgba(0,0,40,.25)}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:10px 12px;font-size:16px;outline:none}
.search input::placeholder{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips .ex{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:var(--on-brand);font:500 13px/1 var(--f-mono);padding:7px 10px;border-radius:3px;cursor:pointer}
.chips .ex:hover{background:rgba(255,255,255,.2)}
.chips .lab{font-size:13px;color:var(--on-brand-dim);align-self:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero-art{max-width:520px;width:100%;margin:0 auto}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--surface);border-radius:var(--r)}
.stats>div{padding:20px 22px;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:0}
.stats b{display:block;font:800 clamp(28px,3.2vw,40px)/1 var(--f-display);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div:nth-child(3){border-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.pcard .fig{background:var(--sheet);aspect-ratio:3/2;display:grid;place-items:center;padding:10px;border-bottom:1px solid var(--line);position:relative}
.pcard .fig svg{width:88%;height:auto}
.pcard .fig .bd{position:absolute;left:10px;top:10px;font:700 12px/1 var(--f-display);letter-spacing:.08em;background:var(--surface);border:1px solid var(--line);padding:5px 7px;border-radius:3px;color:var(--ink)}
.pcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .code{font:600 20px/1.1 var(--f-mono);color:var(--ink)}
.pcard .type{font-size:13px;color:var(--muted)}
.pcard .dims{font:500 13px/1.3 var(--f-mono);color:var(--ink)}
.pcard .acts{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.pcard .acts .btn{flex:1}

/* status chips */
.st{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--f-body);padding:5px 8px;border-radius:12px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.s0{color:var(--ok);background:var(--ok-bg)}
.st.s1{color:var(--warn);background:var(--warn-bg)}
.st.s2{color:var(--na);background:var(--na-bg)}

/* category grid */
.cgroup+.cgroup{margin-top:34px}
.cgroup h3{font:700 15px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.cgroup h3::after{content:"";flex:1;height:1px;background:var(--line)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cgrid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.cgrid.six{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.cgrid.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gjump{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:18px;font-size:14px;color:var(--muted)}
.gjump b{color:var(--ink);font-weight:500}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none!important;display:flex;flex-direction:column;transition:border-color .15s, transform .15s}
.ccard:hover{border-color:var(--brand-ink);transform:translateY(-2px)}
.ccard .fig{background:var(--sheet);aspect-ratio:3/2;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.ccard .fig svg{width:86%;height:auto}
.ccard .t{padding:12px 14px 14px}
.ccard .t .grp{display:block;font:700 10.5px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);margin-bottom:6px}
.ccard .t b{display:block;font:700 16px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.ccard .t span{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.band .ccard{border-color:transparent}

/* brand strip & cards */
.bstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bstrip a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;text-align:center;color:var(--ink);text-decoration:none!important;display:flex;flex-direction:column;gap:6px}
.bstrip a:hover{border-color:var(--brand-ink)}
.bstrip b{font:800 26px/1 var(--f-display);letter-spacing:.03em;color:var(--brand-ink)}
.bstrip span{font-size:12.5px;color:var(--muted)}
.bstrip i{font-style:normal;font:600 12px/1 var(--f-mono);color:var(--ink)}
@media (max-width:900px){.bstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.bstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* apps */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
.app svg{width:52px;height:52px;color:var(--brand-ink)}
.app h4{font-size:18px;text-transform:uppercase}
.app p{color:var(--muted);font-size:14.5px;margin-top:6px}
@media (max-width:860px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.apps{grid-template-columns:1fr}}

/* why + process */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.why{display:grid;gap:12px}
.why li{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.why{padding:0;margin:0}
.why h4{font-size:18px;text-transform:uppercase;color:var(--ink)}
.why p{color:var(--muted);font-size:14.5px;margin-top:6px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding-bottom:22px;position:relative}
.steps li::before{content:counter(s);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 20px/1 var(--f-display);background:var(--red);color:#fff}
.steps li:not(:last-child)::after{content:"";position:absolute;left:23px;top:50px;bottom:2px;width:2px;background:var(--line-strong)}
.steps h4{font-size:18px;text-transform:uppercase;padding-top:4px}
.steps p{color:var(--muted);font-size:14.5px;margin-top:4px}

/* about teaser / prose */
.prose{max-width:68ch}
.prose p+p{margin-top:14px}
.prose p{font-size:17px}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.facts dt,.facts dd{margin:0;padding:12px 16px;border-top:1px solid var(--line)}
.facts dt:first-of-type,.facts dd:first-of-type{border-top:0}
.facts dt{color:var(--muted);font-size:14px;background:var(--sheet)}
.facts dd{font-weight:500}

/* cta */
.cta{background:var(--red);color:#fff}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:34px}
.cta h3{font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;font-weight:800}
.cta p{opacity:.9;margin-top:6px}
.cta .btn.white{color:var(--red-ink)}

/* page heads */
.phead{padding-block:10px 30px}
.phead h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;text-transform:uppercase;margin-top:10px}
.phead > p{color:var(--muted);max-width:66ch;margin-top:10px;font-size:17px}

/* category page */
.chero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:start}
.chero .fig{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;padding:16px;position:relative}
.chero .fig svg{width:100%;max-width:440px;height:auto}
.chero .fig .note{position:absolute;right:10px;bottom:8px;font:500 11px/1 var(--f-mono);color:var(--muted)}
@media (max-width:860px){.chero{grid-template-columns:1fr}}
.kv{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.kv b{display:block;font:800 24px/1 var(--f-display);color:var(--brand-ink)}
.kv span{font-size:12.5px;color:var(--muted)}
.blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.blocks section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.blocks h3{font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-ink);margin-bottom:8px}
.blocks p{font-size:15px;color:var(--ink)}
@media (max-width:860px){.blocks{grid-template-columns:1fr}}
.series{font:500 14px/1.6 var(--f-mono);color:var(--ink);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r);padding:10px 14px;margin-top:14px;overflow-wrap:anywhere}

/* filters + table */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.filters{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.filters.nobrand{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.filters.dims{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1fr) auto;padding-top:16px}
.f label{display:block;font:700 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f input,.f select{width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:4px;padding:9px 10px;font-size:15px;min-width:0}
.f input:focus,.f select:focus{border-color:var(--brand-ink);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.f.chk{display:flex;align-items:end}
.f.chk label{display:flex;align-items:center;gap:8px;font:500 14px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);margin:0;padding-bottom:10px;cursor:pointer}
@media (max-width:860px){.filters{grid-template-columns:1fr 1fr}.filters .q{grid-column:1/-1}.filters.nobrand{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.filters.dims{grid-template-columns:repeat(3,minmax(0,1fr))}.filters.dims .f.chk,.filters.dims .f.tol{grid-column:span 3}}
.resbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;font-size:14px}
.ppsel{display:inline-flex;align-items:center;gap:4px;margin-left:auto}.ppsel .muted{margin-right:4px}.ppsel button{font:inherit;font-size:14px;min-width:44px;padding:4px 10px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:inherit}.ppsel button[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.resbar .count b{font-family:var(--f-display);font-size:18px;color:var(--brand-ink)}
.bchips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.bchip{border:1px solid var(--line-strong);background:var(--surface);border-radius:14px;padding:5px 10px;font:600 12.5px/1 var(--f-body);cursor:pointer;color:var(--ink)}
.bchip i{font-style:normal;color:var(--muted);margin-left:4px;font-weight:500}
.bchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.bchip[aria-pressed="true"] i{color:rgba(255,255,255,.75)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font:700 11.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--sheet);white-space:nowrap}
.tbl th button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--sheet)}
.tbl td.code a{font:600 15px/1.2 var(--f-mono);color:var(--ink)}
.tbl td.code a:hover{color:var(--brand-ink)}
.tbl td.nm{color:var(--muted)}
.tbl td.dm{font:500 13.5px/1.2 var(--f-mono);white-space:nowrap}
.tbl td.bd{font:700 13px/1 var(--f-display);letter-spacing:.06em}
.tbl td.ac{text-align:right;white-space:nowrap}
.add{border:1.5px solid var(--red);color:var(--red-ink);background:transparent;border-radius:4px;padding:6px 10px;font:700 12px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.add[aria-pressed="true"]{background:var(--red);color:#fff}
@media (max-width:760px){
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .tbl td{padding:0;border:0}
  .tbl td.code{grid-column:1}.tbl td.ac{grid-column:2;grid-row:1/span 2;align-self:center}
  .tbl td.nm{grid-column:1/-1;font-size:13.5px}.tbl td.bd{grid-column:1}.tbl td.dm{grid-column:1/-1}.tbl td.stc{grid-column:1/-1}
  .tbl tr:hover td{background:none}
}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;flex-wrap:wrap}
.pager button{border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;min-width:38px;padding:8px 10px;cursor:pointer;font:500 14px/1 var(--f-body)}
.pager button[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:700 18px/1.3 var(--f-display);text-transform:uppercase;margin-bottom:6px}

/* product page */
.pp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start}
@media (max-width:860px){.pp{grid-template-columns:1fr}}
.pp .fig{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;place-items:center;position:relative}
.pp .fig svg{width:100%;max-width:440px;height:auto}
.pp .fig .note{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--muted)}
.pp h1{font:600 clamp(34px,5vw,54px)/1.05 var(--f-mono);letter-spacing:-.01em}
.pp .sub{font-size:18px;color:var(--muted);margin-top:8px}
.drawing{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.drawing .line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--f-mono)}
.drawing .line .v{font-size:clamp(22px,3vw,30px);font-weight:600;color:var(--brand-ink)}
.drawing .line .x{color:var(--muted)}
.drawing .lab{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:6px}
.spec{display:grid;grid-template-columns:auto minmax(0,1fr);margin-top:18px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.spec dt,.spec dd{margin:0;padding:10px 14px;border-top:1px solid var(--line);font-size:15px}
.spec dt{color:var(--muted);background:var(--sheet);font-size:14px}
.spec dt:first-of-type,.spec dd:first-of-type{border-top:0}
.pp .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.phead p.callout,.callout{margin-top:16px;font-size:13.5px;color:var(--muted);border-left:3px solid var(--line-strong);padding:4px 0 4px 12px}

/* brands page */
.bcards{display:grid;gap:18px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:260px minmax(0,1fr);overflow:hidden}
.bcard .side{background:var(--brand);color:var(--on-brand);padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.bcard .side::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.bcard .side>*{position:relative}
.bcard .wmk{font:800 46px/1 var(--f-display);letter-spacing:.02em}
.bcard .side dl{margin:0;display:grid;gap:8px;font-size:13.5px}
.bcard .side dt{color:var(--on-brand-dim);font:700 10.5px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.bcard .side dd{margin:2px 0 0}
.bcard .side a{color:var(--on-brand);text-decoration:underline}
.bcard .main{padding:24px;display:flex;flex-direction:column;gap:12px}
.bcard .main p{font-size:15.5px}
.bcard .rel{background:var(--brand-soft);border-radius:4px;padding:10px 14px;font-size:14.5px;color:var(--ink)}
.bcard .fams{display:flex;flex-wrap:wrap;gap:6px}
.bcard .fams a{font-size:12.5px;border:1px solid var(--line-strong);border-radius:12px;padding:4px 10px;color:var(--ink)}
.bcard .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
@media (max-width:760px){.bcard{grid-template-columns:1fr}}
.allb{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.allb details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.allb summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer}
.allb summary::-webkit-details-marker{display:none}
.allb summary b{font:800 20px/1 var(--f-display);letter-spacing:.03em;color:var(--brand-ink)}
.allb summary span{font-size:13px;color:var(--muted);text-align:right}
.allb .in{padding:0 16px 16px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.allb .in .meta{font-size:12.5px;color:var(--muted)}

/* about */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--line-strong);margin-left:8px}
.timeline li{padding:0 0 22px 22px;position:relative}
.timeline li::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--red)}
.timeline b{font:800 22px/1 var(--f-display);color:var(--brand-ink)}
.timeline p{margin-top:4px;color:var(--ink)}
.inds{display:flex;flex-wrap:wrap;gap:8px}
.inds span{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 12px;font-weight:500}

/* contact */
.ct{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
@media (max-width:860px){.ct{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{font-size:20px;text-transform:uppercase;margin-bottom:12px}
.copyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.copyrow:first-of-type{border-top:0}
.copyrow .k{font-size:12.5px;color:var(--muted)}
.copyrow .v{font:600 18px/1.2 var(--f-mono);user-select:all}
.copyrow .v a{color:inherit;text-decoration:none}.copyrow .v a.em{font:500 15px/1.4 var(--f-body);color:var(--brand-ink)}.ctacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.phones a,.cta a[href^="tel:"],.sendto a[href^="tel:"],footer.site a[href^="tel:"],footer.site a[href^="mailto:"]{color:inherit}
.copyrow .v.txt{font:500 15px/1.4 var(--f-body)}
.copy{border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;padding:7px 10px;font:600 12px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
.form textarea{width:100%;min-height:110px;border:1px solid var(--line-strong);background:var(--bg);border-radius:4px;padding:10px;resize:vertical}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.qlist{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qlist li{display:grid;grid-template-columns:minmax(0,1fr) 84px auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.qlist li:first-child{border-top:0}
.qlist .c{font:600 15px/1.2 var(--f-mono)}
.qlist .c small{display:block;font:400 12.5px/1.3 var(--f-body);color:var(--muted);margin-top:2px}
.qlist input{width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:4px;padding:6px 8px}
.qlist .rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:4px 6px}
.out{margin-top:14px;background:var(--sheet);border:1px dashed var(--line-strong);border-radius:var(--r);padding:14px}
.out pre{white-space:pre-wrap;font:500 13.5px/1.55 var(--f-mono);margin:0 0 10px}

/* footer */
footer.site{background:#070838;color:#C9CBEF;margin-top:0}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:44px 28px}
footer.site h4{color:#fff;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
footer.site a{color:#C9CBEF}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
footer.site .lg b{font:800 26px/1 var(--f-display);color:#fff;letter-spacing:.02em}
footer.site .lg p{font-size:14px;margin-top:10px;max-width:40ch}
footer.site .lg .slogan{font:700 13px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#FF8A8A;margin-top:12px}
footer.site .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#9EA1D4}
@media (max-width:860px){footer.site .wrap{grid-template-columns:1fr 1fr}footer.site .lg{grid-column:1/-1}}

/* floating */
.fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;gap:10px}
.fab button{width:52px;height:52px;border-radius:50%;border:0;background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;display:grid;place-items:center}
.fab button svg{width:24px;height:24px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:4px;font-size:14px;z-index:40;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.callpop{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:31;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;width:min(300px,calc(100vw - 32px))}
.callpop .copyrow .v{font-size:16px}
@media (max-width:560px){.topbar .phones span[data-t="office"],.topbar .phones span:nth-child(4){display:none}.logo .wm small{display:none}.logo .wm b{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Figma: Inter + IBM Plex Mono, sentence-case headings, light only ===== */
h1,h2,h3,h4{font-family:var(--f-display);text-transform:none!important;letter-spacing:-.015em;font-weight:700}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4{letter-spacing:0}
.eyebrow{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
:lang(zh) .eyebrow{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",var(--f-mono);letter-spacing:.04em}
.mono{font-family:var(--f-mono)}

/* top bar + header */
.topbar{font-size:12px}
.topbar .phones{gap:8px;align-items:center}
.topbar .phones span[data-t]{color:var(--on-brand-dim)}
.topbar .phones span b{font:500 14px/1.4 var(--f-mono);letter-spacing:0}
.topbar .phones span:nth-child(2)::after{content:"";display:inline-block;width:1px;height:14px;background:var(--on-brand-dim);margin-left:8px;vertical-align:-2px}
.langs{gap:4px}
.langs button{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;padding:5px 9px}
header.site .wrap{min-height:76px;justify-content:space-between}
.logo svg{width:44px;height:44px}
.logo .wm{gap:3px}
.logo .wm b{font:600 24px/1.2 var(--f-display);letter-spacing:.02em;color:var(--brand)}
.logo .wm small{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;margin-top:0}
nav.main{margin:0 auto;gap:4px}
nav.main a{font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;border-radius:0}
nav.main a:hover{background:none;color:var(--brand);text-decoration:none}
nav.main a[aria-current="page"]{color:var(--brand)}
.cartbtn{font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;padding:9px 14px;color:var(--brand);border-color:var(--brand)}
@media (max-width:900px){nav.main{margin:0}}

/* buttons, sections */
.btn{font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;padding:14px 22px}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.line{border-color:var(--red-ink)}
.btn.ghost{border-color:var(--on-brand);color:var(--on-brand)}
.sec{padding-block:72px}
.sec-head h2,.h2s{font-size:clamp(28px,3vw,36px);line-height:1.15;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
.sec-head .eyebrow+h2{margin-top:10px}
.sec-head p{margin-top:10px}
.sec-head .more{font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;color:var(--brand)}
.phead h1{font-size:clamp(32px,4vw,44px);line-height:1.12;letter-spacing:-.02em;font-weight:700}
.phead > p{font-size:18px;line-height:1.6;max-width:760px}
.crumbs{font-size:14px}
.crumbs span:last-child{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;font-size:12px;color:var(--muted)}
.st{font:500 14px/1.5 var(--f-body);padding:4px 12px 4px 10px;border-radius:999px;gap:6px}
.st::before{width:8px;height:8px}

/* hero */
.hero::before{display:none}
.hero .wrap{display:block;padding-block:72px 64px}
.hero-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:18px 0 16px}
.hero .eyebrow{color:var(--on-brand-dim);display:flex;align-items:center;gap:10px}
.hero .eyebrow .bar{width:28px;height:2px;background:var(--red);display:inline-block}
.hero .lead{font-size:18px;line-height:1.6;color:var(--on-brand-dim);max-width:52ch}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.slogantag{position:absolute;left:4%;bottom:4%;background:var(--red-ink);color:#fff;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:3px}
.qs{margin-top:48px;background:var(--surface);border-radius:8px;padding:28px 32px;box-shadow:0 10px 30px rgba(0,0,40,.25);color:var(--ink)}
.qs h2{font:600 20px/1.3 var(--f-display);letter-spacing:-.005em;margin-bottom:16px}
.qs .row{display:flex;gap:10px}
.qs input{flex:1;min-width:0;border:1.5px solid var(--line-strong);border-radius:4px;padding:12px 14px;font-size:16px;background:var(--surface);color:var(--ink)}
.qs input:focus{border-color:var(--brand);outline:none}
.qs .chips{margin-top:14px}
.qs .chips .lab{color:var(--muted);font-size:12px}
.qs .chips .ex{background:var(--surface);border:1px solid var(--line);color:var(--ink);font:500 12px/1 var(--f-mono);padding:6px 10px;border-radius:3px}
.qs .chips .ex:hover{border-color:var(--brand);background:var(--brand-soft)}
.hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.hstats div{border-top:2px solid var(--red);padding-top:16px}
.hstats b{display:block;font:700 clamp(28px,3vw,36px)/1.1 var(--f-display);letter-spacing:-.015em;color:var(--on-brand);font-variant-numeric:tabular-nums}
.hstats span{display:block;margin-top:6px;font-size:14px;color:var(--on-brand-dim)}
@media (max-width:860px){.hero-cols{grid-template-columns:minmax(0,1fr)}.hstats{grid-template-columns:repeat(2,minmax(0,1fr))}.qs{padding:20px}.qs .row{flex-direction:column}}

/* category cards */
.ccard{border-radius:8px}
.ccard .fig{background:var(--brand-soft)}
.ccard .t .grp{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--red-ink)}
.ccard .t b{font:600 15px/1.3 var(--f-display);text-transform:none;letter-spacing:-.005em}
.ccard .t span{font-size:12px}
.cgroup h3{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase!important}
.srcnote{margin-top:24px;font-size:14px;color:var(--muted)}
.srcnote a{font-weight:600;color:var(--red-ink)}

/* industries + about */
.indrow{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:48px;font-size:14px;color:var(--ink)}
.about2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.about2 .fig{margin:0;background:var(--brand-soft);border-radius:8px;display:grid;place-items:center;padding:24px;position:relative;aspect-ratio:4/3;max-width:100%}
.about2 .fig svg{width:80%;height:auto}
.about2 figcaption{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--muted)}
.about2 h2{font-size:clamp(26px,2.8vw,32px);line-height:1.2;letter-spacing:-.015em;margin:10px 0 16px}
.about2 .prose p{font-size:15px;color:var(--muted)}
.checks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-size:14px;font-weight:500}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--red-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width:860px){.about2{grid-template-columns:minmax(0,1fr)}}

/* brands + steps */
.bstrip a{text-align:left;border-radius:8px;padding:20px}
.bstrip b{font:700 26px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--brand)}
.bstrip i{font:500 12px/1.4 var(--f-mono);color:var(--red-ink)}
.h2s{margin:72px 0 24px}
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps4 li{border-top:3px solid var(--brand);padding-top:16px}
.steps4 .no{font:500 14px/1.4 var(--f-mono);color:var(--red-ink)}
.steps4 h3{font:600 18px/1.3 var(--f-display);margin:8px 0 6px;letter-spacing:-.01em}
.steps4 p{font-size:14px;color:var(--muted)}
@media (max-width:860px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps4{grid-template-columns:minmax(0,1fr)}}

/* cta */
.cta{background:var(--red-ink)}
.cta .wrap{padding-block:72px;gap:32px}
.cta h3{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.015em;font-weight:700}
.cta p{font-size:18px;line-height:1.6;margin-top:14px;max-width:600px;opacity:1}
.cta-acts{display:flex;flex-direction:column;gap:14px;align-items:flex-start;font-size:14px}
.cta-acts b{font:500 14px/1.4 var(--f-mono);margin-left:10px}
.cta .btn.white{color:var(--brand)}

/* footer */
footer.site{background:var(--ink);color:var(--on-brand-dim)}
footer.site .wrap{padding-block:64px 32px;gap:48px}
footer.site h4{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase!important;color:var(--on-brand-dim)}
footer.site ul{font-size:14px;gap:12px}
footer.site a,footer.site li{color:var(--on-brand)}
.flogo{display:flex;align-items:center;gap:10px}
.flogo svg{width:44px;height:44px;flex:none}
footer.site .lg b{font:600 24px/1.2 var(--f-display);letter-spacing:.02em}
footer.site .lg p{color:var(--on-brand-dim);font-size:14px;margin-top:14px}
footer.site .lg .slogan{font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;color:var(--red)}
footer.site .legal{border-top-color:rgba(255,255,255,.24);color:var(--on-brand-dim);font-size:12px;padding-top:20px}

/* lookup: filter sidebar + results */
.tool.side{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start;background:none;border:0;box-shadow:none}
.sidebar{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.sidebar .fh{font:600 20px/1.3 var(--f-display);letter-spacing:-.005em}
.sidebar hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}
.f label{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.f input,.f select{border:1.5px solid var(--line-strong);background:var(--surface);padding:10px 12px;font-size:14px}
.f input:focus,.f select:focus{border-color:var(--brand);box-shadow:none}
.mono-in,.dims3 input{font-family:var(--f-mono)!important;font-weight:500}
.dims3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sidebar .hint{font-size:12px;color:var(--muted);margin-top:-8px}
.results{min-width:0}
.results .hint{font-size:12px;color:var(--muted);margin-top:16px}
.tg{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;position:relative}
.tg input{position:absolute;opacity:0;width:36px;height:20px;margin:0;cursor:pointer}
.tg .sw{width:36px;height:20px;border-radius:10px;background:var(--line-strong);position:relative;flex:none;transition:background .15s}
.tg .sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.tg input:checked+.sw{background:var(--brand)}
.tg input:checked+.sw::after{transform:translateX(16px)}
.tg input:focus-visible+.sw{outline:3px solid var(--red);outline-offset:2px}
.out-side{display:flex;flex-direction:column}
.out-side>div:first-child{order:1;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.out-side>.resbar{order:0;border:0;padding:0 0 16px}
.out-side>.resbar>span:first-child{color:var(--ink)!important;font-weight:500}
.out-side>.pager{order:2;justify-content:flex-start;padding:16px 0 0}
@media (max-width:960px){.tool.side{grid-template-columns:minmax(0,1fr)}.sidebar{position:static}}
@media (prefers-reduced-motion:reduce){.tg .sw,.tg .sw::after{transition:none}}

/* table */
.tbl th{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;padding:14px 20px}
.tbl td{padding:14px 20px}
.tbl td.code a{font:500 14px/1.4 var(--f-mono);color:var(--brand);white-space:nowrap}
.tbl td.nm{color:var(--ink);font-size:14px}
.tbl td.bd{font:500 14px/1.5 var(--f-body);letter-spacing:0}
.tbl td.dm{font:400 12px/1.4 var(--f-mono)}
.dl{font:600 14px/1.3 var(--f-display);margin-right:12px;color:var(--brand)}
.add{border:1.5px solid var(--red-ink);color:var(--red-ink);font:600 14px/1.3 var(--f-display);letter-spacing:0;text-transform:none;padding:5px 9px}
.add[aria-pressed="true"]{background:var(--red-ink);border-color:var(--red-ink);color:#fff}
.pager button{font:500 14px/1 var(--f-mono);min-width:36px;height:36px;padding:0 10px}
.pager button:first-child,.pager button:last-child{font:600 14px/1 var(--f-display);border:0;background:none;color:var(--brand)}
.pager button:first-child:disabled,.pager button:last-child:disabled{color:var(--muted)}
.bchip{font:500 13px/1 var(--f-body)}
@media (max-width:760px){.tbl td.ac{display:flex;align-items:center;gap:0}}

/* other pages */
.empty b{font:600 18px/1.3 var(--f-display);text-transform:none}
.blocks h3{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase!important;color:var(--red-ink)}
.pcard .code{font:500 20px/1.1 var(--f-mono)}
.pcard .fig .bd{font:500 12px/1 var(--f-body);letter-spacing:0}
.kv b,.timeline b,.stats b{font-family:var(--f-display);font-weight:700}
.bcard .wmk{font:700 44px/1 var(--f-display);letter-spacing:-.01em}
.bcard .side dt{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em}
.allb summary b{font:700 20px/1 var(--f-display);letter-spacing:-.01em;color:var(--brand)}
.card h3{font-size:20px;font-weight:600}
.app h4,.why h4,.steps h4{font-size:18px;font-weight:600}

/* Chinese: headings above 30px at 86% */
:lang(zh) .hero h1{font-size:clamp(31px,4.3vw,48px)}
:lang(zh) .sec-head h2,:lang(zh) .h2s,:lang(zh) .cta h3{font-size:clamp(24px,2.6vw,31px)}
:lang(zh) .phead h1{font-size:clamp(28px,3.4vw,38px)}
:lang(zh) .about2 h2{font-size:clamp(23px,2.4vw,28px)}
.illuscap{position:absolute;right:0;bottom:-6px;font:400 12px/1.4 var(--f-body);color:var(--on-brand-dim)}
.illusnote{margin-top:16px;font-size:12px;color:var(--muted)}
.illusnote+.srcnote{margin-top:8px}
.chero .fig .note,.pp .fig .note,.about2 figcaption{font:400 12px/1.4 var(--f-body);color:var(--muted);background:var(--surface);padding:3px 8px;border-radius:3px}
.tbl td.dm.nod,.pcard .dims.nod{font:400 12px/1.4 var(--f-body);color:var(--muted);white-space:normal}
.st.s2{color:var(--brand);background:var(--brand-soft)}
.sendto{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:14px}
.sendto .eyebrow{margin-bottom:4px}
.qlist .c small+small{margin-top:0}

.series .srl{font:inherit;color:var(--brand);background:none;border:0;padding:0 1px;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent);text-underline-offset:3px}
.series .srl:hover{text-decoration-color:var(--brand)}
.series .srl.on{background:var(--brand);color:#fff;text-decoration:none;border-radius:4px;padding:0 5px}
.srchip{margin-left:auto;font:inherit;font-size:13px;border:1px solid var(--brand);color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:3px 10px;cursor:pointer}
.series a.srl{color:var(--brand);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent);text-underline-offset:3px;white-space:nowrap}
.series .srb{font-family:var(--f-body);font-size:.78em;color:var(--muted);margin-left:5px;text-decoration:none;display:inline-block}
.topsell{margin-top:16px}
.topsell .tsh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tsg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tsc{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.tsc b{font:600 14px/1.3 var(--f-mono);color:var(--brand);overflow-wrap:anywhere}
.tsc span{font-size:11.5px;line-height:1.2;color:var(--muted);letter-spacing:.04em}
.tsc:hover{border-color:var(--brand);box-shadow:0 2px 8px rgb(1 3 228 / .08)}
@media (max-width:560px){.tsg{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Thang cỡ chữ thống nhất: 12 nhãn · 14 phụ · 16 nội dung · 18 dẫn/tiêu đề thẻ · H2 · H1 ===== */
:root{--fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px}
/* nhãn nhỏ viết hoa */
.eyebrow,.blocks h3,.ccard .t .grp,.cgroup h3,.f label,.tbl th,.slogantag,.chero .fig .note,.bcard .side dt,.kv span,.tsc span,.pp .fig .note,.about2 figcaption{font-size:var(--fs-xs)}
/* chữ phụ: bảng, chú thích, thẻ nhỏ, chân trang */
.crumbs,.resbar,.tbl,.tbl td.nm,.tbl td.code a,.tbl td.dm,.tbl td.bd,.legend,.gjump,.ccard .t span,.steps4 p,.app p,.why p,.steps p,.checks li,
.bcard .rel,.bcard .side dl,.bcard .fams a,.allb .in,.allb summary span,.facts dt,.spec dt,.callout,.phead p.callout,.qlist .c small,.copyrow .k,
footer.site ul,footer.site .lg p,footer.site .legal,.indrow,.srcnote,.st,.bchip,.drawing .lab,.pcard .type,.pcard .dims,.tsc b,.series,
.f input,.f select,.f.chk label,.pager button,.add,.dl,.btn.sm,.hstats span,.cta-acts,.qs .chips .lab,.chips .lab,.topbar{font-size:var(--fs-sm)}
/* nội dung đọc */
.phead .blocks p,.blocks p,.prose p,.about2 .prose p,.bcard .main p,.spec dd,.qs input,.search input,.copyrow .v.txt{font-size:var(--fs-md);line-height:1.6}
/* đoạn dẫn ngay dưới tiêu đề trang */
.phead > p,.hero .lead,.cta p,.pp .sub{font-size:var(--fs-lg);line-height:1.6}
/* tiêu đề thẻ */
.steps4 h3,.card h3,.qs h2,.empty b,.app h4,.why h4,.steps h4{font-size:var(--fs-lg);line-height:1.3}
.ccard .t b{font-size:var(--fs-md)}
.bstrip span,.allb .in .meta,.timeline span,.copyrow .k{font-size:var(--fs-xs)}
.vbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vbgrid div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.vbgrid .v{display:block;font:600 clamp(20px,2.4vw,26px)/1.2 var(--f-mono);color:var(--brand-ink);overflow-wrap:anywhere}
.vbgrid .l{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.vbx{margin-top:10px;font-size:var(--fs-sm);color:var(--ink)}
.vbsrc{margin-top:8px;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
@media (max-width:560px){.vbgrid{grid-template-columns:1fr 1fr}}
.f label,.eyebrow,.tbl th,.blocks h3,.cgroup h3,.ccard .t .grp,.bcard .side dt{line-height:1.6}
.f label{margin-bottom:4px}
.tbl th{padding-top:14px;padding-bottom:14px}
.nc{text-transform:none!important}
.ccard .t span.num{display:inline;margin:0;font-size:inherit;color:inherit}
.ccard .t .cnt{font:600 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink);margin-top:8px;white-space:nowrap}
.ccard .t .cbr{margin-top:4px}
.ccard .fig.figi{aspect-ratio:auto;height:116px;background:var(--brand-soft)}
.ccard .fig.figi svg{width:80px;height:80px}
.indgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.indcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.indcard h3{font:600 var(--fs-lg)/1.3 var(--f-display);color:var(--ink)}
.indcard .u{font-size:var(--fs-sm);color:var(--ink);line-height:1.6}
.indcard dl{margin:0;display:grid;gap:6px}
.indcard dt{font:500 var(--fs-xs)/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);margin-top:6px}
.indcard dd{margin:0;font-size:var(--fs-sm);color:var(--ink);line-height:1.6}
.indcard .recs,.indcard .brs{display:flex;flex-wrap:wrap;gap:6px}
.reclink{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;font-size:var(--fs-sm);color:var(--brand);text-decoration:none}
.reclink .num{color:var(--muted);font-size:var(--fs-xs)}
.reclink:hover,.reclink.on{border-color:var(--brand);background:var(--brand-soft)}
.indcard .brs a{font:600 var(--fs-sm)/1.4 var(--f-display);color:var(--ink);background:var(--sheet);border-radius:4px;padding:3px 8px;text-decoration:none}
.indcard .why{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px;gap:10px}
.gallery figure{margin:0;position:relative;border-radius:8px;overflow:hidden;background:var(--sheet);border:1px solid var(--line)}
.gallery figure.big{grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:var(--fs-xs);color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / .55))}
.gallery.empty figure{display:grid;place-items:center;border-style:dashed;border-color:var(--line-strong)}
.gallery.empty span{font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}}
.indrow a{color:var(--ink);text-decoration:none;font-weight:500}.indrow a:hover{color:var(--brand)}
.ccard .t b{font-size:var(--fs-lg);line-height:1.3;font-weight:600}
.about-intro{max-width:760px}.about-intro p{font-size:var(--fs-lg);line-height:1.7}
.about2 .eyebrow{font:600 var(--fs-lg)/1.4 var(--f-display);letter-spacing:.06em}
.gzoom{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.gzoom:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.gallery figure img{transition:transform .25s}.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{pointer-events:none}
.lb{position:fixed;inset:0;z-index:60;background:rgb(10 12 30 / .92);display:grid;grid-template-columns:56px 1fr 56px;align-items:center;padding:24px 12px}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.lb img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;border-radius:6px}
.lb figcaption{color:#fff;font-size:var(--fs-md)}.lb figcaption span{color:#A9ACC9;font-size:var(--fs-sm);margin-left:10px}
.lb button{background:rgb(255 255 255 / .1);border:0;color:#fff;font-size:30px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:rgb(255 255 255 / .22)}
.lb .lb-x{position:absolute;top:16px;right:16px;font-size:20px}
@media (max-width:600px){.lb{grid-template-columns:40px 1fr 40px;padding:12px 4px}.lb button{width:36px;height:36px;font-size:24px}}
.about-intro{max-width:760px;margin:0 auto;text-align:center}
.about-intro h2{font-size:clamp(26px,3vw,34px);line-height:1.2;letter-spacing:-.015em;margin:10px 0 20px;color:var(--ink)}
.about-intro p{font-size:var(--fs-md);line-height:1.7;color:var(--muted);margin-top:14px}
.about-intro p.lead{font-size:var(--fs-lg);color:var(--ink)}
.indhead{display:flex;align-items:center;gap:14px}
.indic{flex:none;width:72px;height:72px;border-radius:8px;background:var(--brand-soft);display:grid;place-items:center}
.indic svg{width:56px;height:56px}
.slides{position:relative;border-radius:8px;overflow:hidden;background:var(--sheet);aspect-ratio:4/3}
.slides .track{position:absolute;inset:0}
.slides .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s;pointer-events:none}
.slides .slide.on{opacity:1;pointer-events:auto}
.slides img{width:100%;height:100%;object-fit:cover;display:block}
.slides figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 40px;color:#fff;font-size:var(--fs-sm);background:linear-gradient(transparent,rgb(0 0 0 / .6));pointer-events:none}
.slides .sl-p,.slides .sl-n{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgb(255 255 255 / .85);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
.slides .sl-p{left:12px}.slides .sl-n{right:12px}
.slides .sl-p:hover,.slides .sl-n:hover{background:#fff}
.slides .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.slides .dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgb(255 255 255 / .5);cursor:pointer}
.slides .dots button[aria-current]{background:#fff;width:22px;border-radius:4px}
@media (prefers-reduced-motion: reduce){.slides .slide{transition:none}}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:none}
.flow li{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:10px;position:relative}
.flow .no{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:700 var(--fs-lg)/1 var(--f-display)}
.flow h3{font:600 var(--fs-lg)/1.3 var(--f-display);color:var(--ink)}
.flow p{font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}

/* ================= HỆ CỠ CHỮ (rà lại 19.10) =================
   Display 56 · H1 44 · H2 36 · H3 20 · H4 18 · Lead 20/18 · Body 16 · Small 14 · Label 13 · Caption 12
   Mọi cỡ lớn dùng clamp() để co lại trên điện thoại. */
:root{--fs-cap:12px;--fs-label:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;
  --fs-h2:clamp(28px,2.6vw,36px);--fs-h1:clamp(32px,3.4vw,44px);--fs-disp:clamp(36px,4.6vw,56px)}
/* Display / H1 / H2 */
.hero h1{font-size:var(--fs-disp)}
.phead h1,.pp h1{font-size:var(--fs-h1)}
.sec-head h2,.about2 h2,.about-intro h2,.h2s{font-size:var(--fs-h2);line-height:1.18}
.cta h3{font-size:clamp(26px,2.4vw,32px);line-height:1.2}
/* H3 (tiêu đề thẻ có đoạn văn) · H4 (tiêu đề ô gọn) */
.flow h3,.indcard h3,.card h3,.qs h2,.sidebar .fh,.empty b{font-size:var(--fs-xl);line-height:1.3}
.ccard .t b,.why h4,.steps h4{font-size:var(--fs-lg);line-height:1.3}
/* Lead: đoạn dẫn dưới H1 = 20, dưới H2 = 18 */
.hero .lead,.phead > p,.pp .sub{font-size:var(--fs-xl);line-height:1.55}
.sec-head p,.cta p{font-size:var(--fs-lg);line-height:1.6}
/* Body 16 */
.about2 .prose p,.blocks p,.bcard .main p,.flow p,.indcard .u,.prose p,.spec dd{font-size:var(--fs-md);line-height:1.65}
/* Small 14: chữ phụ, meta */
.indcard dd,.indcard .why,.reclink,.ccard .t .cbr,.crumbs,.resbar,.legend,.callout,.hstats span,.slides figcaption,footer.site ul,footer.site .lg p,.srcnote{font-size:var(--fs-sm)}
/* UI: menu, nút */
nav.main a,.cartbtn{font-size:var(--fs-md)}
.btn{font-size:var(--fs-md)}
.btn.sm,.add,.copy,.bchip,.pager button{font-size:var(--fs-sm)}
/* Bảng dữ liệu 15 */
.tbl td.nm,.tbl td.code a,.tbl td.bd,.tbl td.dm{font-size:15px}
/* Label 13: nhãn viết hoa, nhãn form, tiêu đề cột */
.eyebrow,.f label,.tbl th,.blocks h3,.ccard .t .grp,.indcard dt,.bcard .side dt,.cgroup h3,.ccard .t .cnt,.bstrip i{font-size:var(--fs-label)}
footer.site h4{font-size:var(--fs-label);letter-spacing:.1em}
/* Caption 12 (nhỏ nhất trên trang) */
.langs button,.logo .wm small,.illusnote,.chero .fig .note,.pp .fig .note,.illuscap,.vbsrc,.kv span,.tsc span,.bstrip span{font-size:var(--fs-cap)}
/* Số liệu & chữ thương hiệu */
.hstats b{font-size:clamp(30px,3vw,40px)}
.kv b{font-size:28px}
.bstrip b{font-size:24px}
.bcard .wmk{font-size:clamp(28px,2.6vw,36px)}
.drawing .line .v,.vbgrid .v{font-size:clamp(22px,2.2vw,28px)}
.about2 .eyebrow{font:600 var(--fs-lg)/1.4 var(--f-display);letter-spacing:.06em}
.hero .lead,.phead > p,.pp .sub{font-size:clamp(17px,1.4vw,20px)}
.sec-head p,.cta p{font-size:clamp(16px,1.25vw,18px)}

/* Tiếng Việt: dấu xếp chồng (ệ, ể, ỗ…) cần line-height đủ để dòng trên và dòng dưới không chạm nhau */
.hero h1{line-height:1.22}
.phead h1,.about2 h1{line-height:1.2}
.sec-head h2,.about2 h2,.about-intro h2,.h2s,.cta h3{line-height:1.25}
.hero{overflow-x:clip}
footer.site .wrap>div{min-width:0}

/* giữ nguyên bảng cột; chỉ thu đệm ngang để bảng vừa khung có cột lọc (không bị cắt nút Báo giá) */
@media (min-width:761px){.tbl th,.tbl td{padding-left:14px;padding-right:14px}}
/* Tra cứu: tên hàng luôn 1 dòng; cột lọc gọn hơn để nhường chỗ; kích thước được xuống dòng khi thiếu chỗ */
@media (min-width:761px){
  .tool.side{grid-template-columns:264px minmax(0,1fr);gap:20px}
  .tbl td.nm{white-space:nowrap}
  .tbl td.dm{white-space:normal}
  .tbl th{white-space:normal}
}

footer.site .legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer.site .legal a:hover{text-decoration-thickness:2px}

/* bộ lọc Tra cứu: trên điện thoại, ô tìm kiếm luôn hiện, phần còn lại gập lại */
.ftoggle{display:none}
.fmore{display:contents}
@media (max-width:960px){
  .ftoggle{display:flex;justify-content:space-between;align-items:center;width:100%}
  .ftoggle::after{content:"+";font-weight:600;margin-left:10px}
  .tool.side.fopen .ftoggle::after{content:"\2013"}
  .fmore{display:none;flex-direction:column;gap:18px}
  .tool.side.fopen .fmore{display:flex}
}

/* Tra cứu (máy tính): bộ lọc thành thanh ngang phía trên bảng kết quả */
@media (min-width:961px){
  .tool.side{grid-template-columns:minmax(0,1fr);gap:20px}
  .sidebar{position:static;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 16px;align-items:end;padding:20px 24px}
  .sidebar .fh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sidebar hr{display:none}
  .sidebar>.f:nth-of-type(1){grid-column:1/6;grid-row:1}
  .sidebar .fmore{display:contents}
  .sidebar .fmore>.f:nth-of-type(1){grid-column:6/9;grid-row:1}
  .sidebar .fmore>.f:nth-of-type(2){grid-column:9/11;grid-row:1}
  .sidebar .fmore>.f:nth-of-type(3){grid-column:11/13;grid-row:1}
  .sidebar .dims3,.sidebar .dimsv{grid-column:1/6;grid-row:2}
  .sidebar .ftol,.sidebar .ftolv{grid-column:6/9;grid-row:2}
  .sidebar .tg{grid-column:9/11;grid-row:2;padding-bottom:10px}
  .sidebar .f label{white-space:nowrap}
  .sidebar .f input,.sidebar .f select{height:42px;box-sizing:border-box}
  .sidebar [data-clear]{grid-column:11/13;grid-row:2;width:100%;padding-top:9px;padding-bottom:9px}
  .sidebar .fmore>.eyebrow{grid-column:1/3;grid-row:3;margin:0}
  .sidebar .hint{grid-column:3/13;grid-row:3;margin:0;align-self:center}
  .sidebar .dims3 .f{min-width:0}
  .out-side>.resbar{padding-bottom:12px}
}
/* máy tính bảng / điện thoại: bộ lọc một cột phía trên, kết quả bên dưới */
@media (max-width:960px){
  .tool.side{grid-template-columns:minmax(0,1fr)!important}
  .sidebar{position:static}
}

/* Tra cứu: thu nhỏ khoảng cách */
.lkh{padding-block:2px 12px}
.lkh .eyebrow{margin-top:2px}
.lkh h1{margin-top:6px}
.sec.lks{padding-bottom:36px}
.lks .sidebar{padding:16px 20px}
@media (min-width:961px){
  .lks .sidebar{gap:8px 14px;padding:14px 20px}
  .lks .sidebar .f{gap:4px}
  .lks .sidebar .tg{padding-bottom:8px}
  .lks .tool.side{gap:12px}
  .lks .out-side>.resbar{padding-bottom:8px}
  .lks .sidebar .fmore>.eyebrow,.lks .sidebar .hint{font-size:12px}
}
@media (min-width:761px){
  .lks .tbl td{padding-top:8px;padding-bottom:8px}
  .lks .tbl th{padding-top:10px;padding-bottom:10px}
  .lks .out-side>.pager{padding-top:10px}
}
@media (max-width:960px){
  .lks .sidebar{gap:12px}
  .lks .tool.side{gap:12px}
  .lks .out-side>.resbar{padding-bottom:8px}
}

/* Tra cứu: thanh lọc nhỏ gọn hơn (máy tính) */
@media (min-width:961px){
  .lks .sidebar{padding:10px 16px;gap:4px 12px}
  .lks .sidebar .f{gap:2px}
  .lks .sidebar .f label{font-size:12px;line-height:1.3}
  .lks .sidebar .f input,.lks .sidebar .f select{height:34px;padding:6px 10px;font-size:13.5px}
  .lks .sidebar [data-clear]{height:34px;padding:0 10px;font-size:13.5px;align-self:end}
  .lks .sidebar .tg{padding-bottom:6px;font-size:13.5px}
  .lks .sidebar .fmore>.eyebrow,.lks .sidebar .hint{font-size:12px;line-height:1.3}
  .lks .tool.side{gap:8px}
}

/* Tra cứu: thu gọn thêm khoảng trống */
.lkh{padding-block:6px 22px}
.lks .tool.side{gap:6px}
body:has(.lkh) .crumbs{padding-block:16px 4px}
.lkh .eyebrow{margin-top:0}
.lkh h1{margin-top:4px;line-height:1.3}
@media (min-width:961px){
  .lks .sidebar{padding:8px 14px;gap:2px 12px}
  .lks .out-side>.resbar{padding-bottom:6px}
}
@media (min-width:761px){
  .lks .tbl td{padding-top:6px;padding-bottom:6px}
  .lks .tbl th{padding-top:8px;padding-bottom:8px}
}

/* Tra cứu (màn hình rộng): toàn bộ bộ lọc trên một hàng */
@media (min-width:1200px){
  .lks .sidebar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;gap:10px;padding:10px 14px}
  .lks .sidebar .fmore{display:contents}
  .lks .sidebar .fmore>.eyebrow,.lks .sidebar .hint,.lks .sidebar hr{display:none}
  .lks .sidebar>.f:nth-of-type(1){order:1;flex:3 1 160px;min-width:0}
  .lks .sidebar .fmore>.f:nth-of-type(1){order:2;flex:1.2 1 100px;min-width:0}
  .lks .sidebar .fmore>.f:nth-of-type(2){order:3;flex:1 1 90px;min-width:0}
  .lks .sidebar .fmore>.f:nth-of-type(3){order:4;flex:.9 1 90px;min-width:0}
  .lks .sidebar .dims3{order:5;display:flex;gap:6px;flex:none}
  .lks .sidebar .fmore>.f:nth-of-type(n){min-width:0}
  .lks .sidebar .dims3 .f{flex:none;width:52px}
  .lks .sidebar .dimsv{order:5;display:flex;gap:6px;flex:none}
  .lks .sidebar .dimsv .f:first-child{flex:none;width:88px}
  .lks .sidebar .dimsv .f:last-child{flex:none;width:84px}
  .lks .sidebar .ftol,.lks .sidebar .ftolv{order:6;flex:none;width:62px}
  .lks .sidebar .f label{overflow:hidden;text-overflow:ellipsis}
  .lks .sidebar .ftol label,.lks .sidebar .ftolv label{overflow:visible;position:relative;z-index:1}
  .lks .sidebar .tg{order:7;flex:none;white-space:nowrap;padding-bottom:6px}
  .lks .sidebar [data-clear]{order:8;flex:none;width:auto;padding:0 14px;white-space:nowrap}
}

/* bộ lọc kích thước đổi theo nhóm: vòng bi (d, D, B) ↔ dây curoa (tiết diện, chiều dài L) */
.dimsv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dimsv .f{min-width:0}
.tool[data-mode="brg"] .dimsv,.tool[data-mode="brg"] .hv,.tool[data-mode="brg"] .ftolv,.tool[data-mode="brg"] .fv{display:none!important}
.tool[data-mode="belt"] .dims3,.tool[data-mode="belt"] .hb,.tool[data-mode="belt"] .ftol,.tool[data-mode="belt"] .fb{display:none!important}

.bcard .main p.btag{font:600 17px/1.4 var(--f-display);color:var(--ink);margin:0 0 2px}

/* ô chọn (dropdown): chừa chỗ cho mũi tên, không dính chữ */
.f select{-webkit-appearance:none;appearance:none;padding-right:38px;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235b6178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}

/* "Vì sao chọn Huy Phát": thẻ gọn hơn, số bước dạng vòng bi, câu mô tả một hàng */

/* ===================================================================
   Bản D · 02.11.2026 — một lớp duy nhất cho bố cục mới.
   Thang khoảng cách: 4 · 8 · 16 · 24 · 32 · 48 · 72
   =================================================================== */

/* 1. Token */
:root{--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--muted:#4A4F6E}

/* 2. Tiêu đề phần, nhịp khoảng cách, chữ dễ đọc */
.sec-head h2,.phead h1{text-wrap:balance}
.dimtag,.slogantag,.btn,.crumbs a,.hstats b,.bchip{white-space:nowrap}
.sec{padding-block:var(--s6)}
.sec.tight{padding-block:var(--s5)}
.sec-head{margin-bottom:var(--s4)}
.sec-head h2{position:relative;padding-bottom:14px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--red)}
.sec-head.center{display:block;text-align:center}
.sec-head.center h2::after{left:50%;transform:translateX(-50%)}
.sec-head.center p{margin-inline:auto}
.sec-head.center .more{display:inline-block;margin-top:var(--s3)}
.phead{padding-block:var(--s3) var(--s4)}
.phead>p{max-width:none}
.crumbs{padding-block:var(--s3) var(--s2)}
.eyebrow{font-size:13px}
.sec .eyebrow,.phead .eyebrow,.chero .eyebrow{color:var(--brand)}
.tbl th{font-size:12px}
.bcard .main p{max-width:68ch}

/* 3. Ô tra cứu nhanh */
.qs h2{font-size:20px;margin-bottom:var(--s3)}
.qs .row input{min-height:56px;font-size:17px}
.qs .row .btn{min-height:56px;padding-inline:32px;font-size:16px}

/* 4. Thẻ nhóm sản phẩm: hình, tên, số mã */
.cgrid{gap:var(--s3)}
.ccard{padding:16px}
.ccard .t{padding:12px 0 0;gap:6px}
.ccard .t b{font-size:var(--fs-md,17px);line-height:1.3}
.ccard .t .cnt,.ccard .t .cnt .num{color:var(--brand)}
@media (max-width:1100px) and (min-width:761px){.cgrid.six{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 5. Thẻ ngành: không để thẻ lẻ ở hàng cuối */
.indgrid{gap:var(--s3)}
.indhead{align-items:center;gap:14px}
.indhead .indic svg{width:44px;height:44px}
.indhead h3{min-width:0}
@media (min-width:1200px){.indhead h3{white-space:nowrap}}
.indgrid>.indcard:last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:900px){.indgrid>.indcard:last-child:nth-child(3n+1){grid-column:auto}.indgrid>.indcard:last-child:nth-child(2n+1){grid-column:1/-1}}

/* 6. Dải chạy: thương hiệu chạy sang phải, 18 nhóm chạy sang trái */
.mq{display:flex;flex-direction:column}
.mq-tg{order:2;align-self:center;margin-top:var(--s3);min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;font:600 13px/1 var(--f-body);cursor:pointer}
.mq-tg:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.bsec{overflow:hidden}
.bsec .wrap{margin-bottom:var(--s4)}
.bmarq,.cmarq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cmarq{margin-inline:calc(50% - 50vw)}
.btrack,.ctrack{display:flex;gap:var(--s3);width:max-content}
.btrack{animation:bmarq 48s linear infinite reverse}
.ctrack{padding-block:4px;animation:cmarq 90s linear infinite}
.mq:hover .btrack,.mq:hover .ctrack,.mq:focus-within .btrack,.mq:focus-within .ctrack,.mq.paused .btrack,.mq.paused .ctrack{animation-play-state:paused}
@keyframes bmarq{to{transform:translateX(calc(-25% - 4px))}}
@keyframes cmarq{to{transform:translateX(calc(-50% - 8px))}}
.bt{flex:none;width:200px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;text-align:center}
.bt:hover{border-color:var(--brand)}
.bt b{font:700 22px/1 var(--f-display);color:var(--brand);white-space:nowrap}
.bt i{font:500 13px/1 var(--f-mono);font-style:normal;color:var(--muted)}
.ctrack .ccard{flex:none;width:200px}
@media (max-width:560px){.ctrack .ccard{width:168px}}
/* Người bật "giảm chuyển động" vẫn thấy dải chạy (theo yêu cầu chủ shop), chậm hơn và có nút Tạm dừng luôn hiện */
@media (prefers-reduced-motion:reduce){
  .btrack{animation-duration:90s}
  .ctrack{animation-duration:160s}
}

/* 7. Bảng mã */
.tbl td.dm.nod{color:var(--brand);font-weight:600;font-size:13px}
.dims.nod{color:var(--brand);font-weight:600}
.missn{color:var(--muted);font-weight:500}
@media (min-width:861px){.sidebar .f:has(input[data-f="q"]){flex:6 1 320px!important;min-width:280px}}
.ftoggle{min-height:44px}

/* 8. Thanh "Gửi báo giá" cố định */
.qbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 8px 8px 12px;background:var(--ink);color:#fff;border-radius:999px;box-shadow:0 12px 32px -8px rgba(10,14,60,.5);text-decoration:none;max-width:calc(100vw - 32px)}
.qbar[hidden]{display:none}
.qbar .qn{min-width:32px;height:32px;display:grid;place-items:center;border-radius:999px;background:var(--red);font:700 15px/1 var(--f-mono,monospace)}
.qbar .qt{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbar .qgo{background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;white-space:nowrap}
.has-qbar .fab{bottom:88px}
@media (max-width:560px){.qbar{left:16px;right:16px;transform:none;justify-content:space-between}.qbar .qt{display:none}}

/* 9. Liên hệ */
.ct{align-items:stretch}

/* 10. Điện thoại (phần chi tiết ở khối Rà soát UI/UX bên dưới) */
@media (max-width:760px){
  .sec{padding-block:var(--s6)}
  .sec.tight{padding-block:var(--s5)}
  .wrap{padding-inline:16px}
  input,select,button.ex{min-height:44px}
  .hero h1{font-size:34px}
}

/* ===== Rà soát UI/UX 02.11.2026: tìm kiếm là việc chính, khoảng cách theo một thang (8·16·24·32·48·72) ===== */
/* hero: ô tra cứu ngay dưới tiêu đề; báo giá thành liên kết nhẹ */
.hero .wrap{padding-block:48px}
.hero h1{margin:12px 0}
.hero h1,.sec-head h2,.cta h3{text-wrap:balance}
.hero .qs{margin-top:24px}
.hero-acts{margin-top:16px}
.qlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--on-brand);font:600 var(--fs-md,16px)/1.3 var(--f-display);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.qlink:hover{text-decoration-thickness:2px}
.qlink:focus-visible,.qs .chips .ex:focus-visible,.btn:focus-visible{outline:2px solid var(--on-brand);outline-offset:3px}
.hstats{margin-top:48px}
/* tiêu đề mục: câu mô tả không bị cắt sớm, "Xem tất cả" không tách xa */
.sec-head p{max-width:72ch}
.sec-head .more{white-space:nowrap}
/* điện thoại */
@media (max-width:760px){
  .sec{padding-block:48px}
  .hero .wrap{padding-block:24px 40px}
  .hero-art{display:none}
  .hero .lead{font-size:var(--fs-md,16px)}
  .hero .qs{padding:20px}
  .qs .row .btn{width:100%}
  .hstats{margin-top:32px;gap:24px 16px}
  .cta .wrap{padding-block:48px}
  footer.site .wrap{padding-block:48px 96px}   /* chừa chỗ cho nút gọi nổi */
}
/* màn hình cảm ứng: vùng bấm tối thiểu 44px */
@media (pointer:coarse){
  .qs .chips .ex{min-height:44px;padding-inline:12px}
  .langs button,.reclink,.bchip,.pager button{min-height:44px}
  .cartbtn,.sl-p,.sl-n{min-height:44px;min-width:44px}
  .sec-head .more,.indcard .brs a,.srcnote a,.topbar .phones a,footer.site ul a,footer.site .wrap a,footer.site .legal a{display:inline-flex;align-items:center;min-height:44px}
  .indcard .brs a{padding-inline:12px}
}

/* ===== Rà soát 02.11.2026 (2): các trang còn lại ===== */
/* Bảng kết quả trên điện thoại: thẻ gọn 3 hàng (mã + nút báo giá / tên / hãng · kích thước · tình trạng).
   Trước đây quy tắc .tbl td{padding:14px 20px} phía sau đè lên padding:0 trong @media nên mỗi ô cách nhau rất xa. */
@media (max-width:760px){
  .tbl tr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"code code ac" "nm nm nm" "bd dm stc";gap:4px 12px;padding:12px 16px}
  .tbl td,.tbl td.code,.tbl td.nm,.tbl td.bd,.tbl td.dm,.tbl td.stc,.tbl td.ac{padding:0;border:0}
  .tbl td.code{grid-area:code;align-self:center}
  .tbl td.ac{grid-area:ac;grid-row:auto;align-self:center}
  .tbl td.nm{grid-area:nm;white-space:normal}
  .tbl td.bd{grid-area:bd;align-self:center}
  .tbl td.dm{grid-area:dm;align-self:center;white-space:normal;min-width:0}
  .tbl td.stc{grid-area:stc;align-self:center}
  .tbl td.stc .st{font-size:13px;padding:2px 10px 2px 8px}
  /* trang sản phẩm: tên mã lên trước, hình minh hoạ xuống sau và nhỏ lại */
  .pp>figure.fig{order:2;max-height:200px;overflow:hidden}
  .pp>figure.fig svg{max-height:160px}
  /* trang nhóm sản phẩm: hình minh hoạ nhỏ lại để danh sách mã hiện sớm hơn */
  .chero .fig{max-height:200px;overflow:hidden}
  .chero .fig svg{max-height:170px}
}
@media (pointer:coarse){
  .tbl td.code a{display:inline-flex;align-items:center;min-height:44px}
  .add,.copy,.pager button{min-height:44px}
  .langs button{min-width:44px}
}
/* trang một thương hiệu: tên đã là tiêu đề trang, không lặp lại trong khối xanh */
.bcards[style*="margin-bottom"] .wmk{display:none}
@media (pointer:coarse){
  .crumbs a{padding-block:13px}   /* vùng bấm cao hơn mà không đẩy dòng chữ */
  .bcard .fams a,.allb .in a,.allb .meta a,.bcard .side dd a,.muted a,.cta-acts a,.btn.sm{display:inline-flex;align-items:center;min-height:44px}
  .ppsel button,.ftoggle,.sidebar [data-clear],.f [data-clear]{min-height:44px}
  input[type="checkbox"]{width:20px;height:20px}
}

/* thanh thông báo cookie (chỉ hiện khi bật đo lường) */
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:760px;margin-inline:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line-strong,#cbd5e1);border-radius:12px;padding:14px 18px;box-shadow:0 8px 30px rgba(15,23,42,.18);font-size:14.5px;line-height:1.5}
.ckb p{margin:0;flex:1 1 320px}
.ckb a{color:var(--brand);text-decoration:underline}
.ckb-a{display:flex;gap:10px;flex:0 0 auto}
@media (max-width:560px){.ckb{left:10px;right:10px;bottom:10px}.ckb-a{width:100%}.ckb-a .btn{flex:1;justify-content:center;min-height:44px}}