@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZs.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN62Zw.woff2) format('woff2')}

/* Bảng màu INDUSTRIAL X — công nghiệp, tin cậy, không màu mè.
   Cam #FF6B00 chỉ dùng cho HÀNH ĐỘNG (nút RFQ, nhấn mạnh), không dùng làm nền lớn:
   dùng tràn lan thì mất hết tác dụng thu hút. */
:root{
  --primary:#0057b8; --primary-dark:#00458f;
  --fg:#102a43; --muted:#5b7186; --faint:#8899a8;
  --line:#e5e7eb; --hair:#eef1f5; --soft:#f5f7fa;
  --accent:#ff6b00; --accent-dark:#e05e00;
  --success:#00a86b; --danger:#d62828;
  --bg:#f5f7fa;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Manrope','Inter',ui-sans-serif,system-ui,sans-serif;
  --r:16px; --shadow:0 1px 3px 0 rgb(16 42 67 / .06);
  --shadow-lift:0 12px 28px -8px rgb(16 42 67 / .16);
}
*{box-sizing:border-box}
body{margin:0;font:400 16px/1.65 var(--sans);color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
main{max-width:1180px;margin:0 auto;padding:32px 20px 80px}

/* Nhãn nhỏ in hoa — dùng khắp nơi cho dữ liệu phụ */
.eyebrow,.ids dt,.site-nav a,.crumbs,.specs caption{
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}

/* ── Thanh đầu dính ─────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;
  flex-wrap:wrap;padding:16px 20px}
.site-header>*{min-width:0}
.brand{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand img{height:34px;width:auto}
.site-nav{display:flex;gap:22px;flex-wrap:wrap}
.site-nav a{color:var(--muted);transition:color .15s}
.site-nav a:hover{color:var(--fg)}
/* ── Mega menu ──────────────────────────────────────────────────────────────
   Mở bằng :hover VÀ :focus-within, không dùng JavaScript. focus-within là phần
   quan trọng: nó cho người đi bằng bàn phím mở được menu, và trên thiết bị cảm
   ứng thì lần nhấn đầu tiên đặt tiêu điểm nên menu vẫn bung ra.

   Thẻ cha của menu KHÔNG được đặt overflow:hidden ở bất kỳ tầng nào, nếu không
   panel bị cắt — đó là lý do .site-header không dùng overflow. */
.mega{position:relative}
.mega-top::after{content:"▾";font-size:10px;margin-left:5px;opacity:.6}
.mega-panel{position:absolute;top:calc(100% + 12px);left:-16px;z-index:60;display:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);
  padding:18px 20px;min-width:330px}
.mega-panel.wide{min-width:660px}
.mega:hover .mega-panel,.mega:focus-within .mega-panel{display:block}
/* Vùng đệm vô hình phía trên panel: không có nó thì chuột đi từ nhãn xuống panel
   sẽ rời khỏi vùng hover ở khe 12px và menu đóng ngay trước khi tới được. */
.mega-panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mega-head{font:900 10px var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px}
.mega-list{list-style:none;padding:0;margin:0}
.mega-list.cols{columns:2;column-gap:26px}
.mega-list li{break-inside:avoid;margin-bottom:2px}
.mega-list a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 10px;border-radius:8px;color:var(--fg);font-size:13.5px;line-height:1.4}
.mega-list a:hover{background:var(--soft);color:var(--primary)}
/* Số sản phẩm: người mua cong nghiep can biet nhom nao co hang that truoc khi bam */
.mega-list b{font:700 11.5px var(--sans);color:var(--faint);flex:0 0 auto}
.mega-list a:hover b{color:var(--primary)}
.mega-all{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
  font:800 11.5px var(--sans);color:var(--primary);letter-spacing:.03em}
@media (max-width:820px){
  /* Trên điện thoại, ẨN HẲN panel. Nhãn mega menu là thẻ <a>, nên chạm vào nó là
     ĐIỀU HƯỚNG chứ không mở panel — không có trạng thái hover, và focus-within cũng
     không kịp xảy ra trước khi trang chuyển. Cố mở panel bằng chạm sẽ cần JavaScript
     và một nút riêng, tức là hai lối vào cho cùng một việc.
     Nên: nhãn dẫn thẳng tới trang liệt kê đầy đủ (/danh-muc/, /nganh/) — nơi đã có
     toàn bộ danh sách kèm số sản phẩm. Người dùng điện thoại mất một cú bấm, nhưng
     không bao giờ gặp menu bấm-không-ra. */
  .mega-panel,.mega-panel.wide{display:none!important}
  .mega-top::after{content:none}
}

.hotline{margin-left:auto;background:var(--primary);color:#fff;padding:11px 20px;
  border-radius:10px;font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.hotline:hover{background:var(--primary-dark)}

/* ── Ô tìm kiếm ở thanh đầu ─────────────────────────────────────────────── */
.hdr-search{flex:1 1 260px;display:flex;gap:0;min-width:200px;max-width:560px;position:relative}
.hdr-search input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);
  border-right:0;border-radius:8px 0 0 8px;font:400 14px var(--sans);background:var(--soft)}
.hdr-search input:focus{outline:0;border-color:var(--primary);background:#fff}
.hdr-search button{padding:10px 18px;background:var(--fg);color:#fff;border:0;
  border-radius:0 8px 8px 0;font:800 12px var(--sans);cursor:pointer;white-space:nowrap}
.hdr-search button:hover{background:var(--primary)}
@media (max-width:820px){.hdr-search{order:9;flex-basis:100%;max-width:none}}

/* Gợi ý tức thì — chỉ có khi JavaScript chạy; không có thì biểu mẫu vẫn gửi được */
.sug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;z-index:50;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);
  max-height:70vh;overflow-y:auto;padding:6px}
.sug a{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:8px}
.sug a:hover,.sug a:focus{background:var(--soft)}
.sug img{width:42px;height:42px;object-fit:contain;border:1px solid var(--line);
  border-radius:7px;background:#fff;flex:0 0 42px}
.sug .t{min-width:0}
.sug .n{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug .m{display:block;font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.04em}
.sug .more{display:block;text-align:center;padding:10px;font-size:12px;font-weight:800;
  color:var(--primary);border-top:1px solid var(--line);margin-top:4px}
.sug .empty{padding:14px 12px;font-size:13px;color:var(--muted)}

/* ── Hero trang chủ ─────────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,var(--fg) 0%,#0b1d31 100%);color:#fff;
  border-radius:var(--r);padding:56px 44px;margin-bottom:8px}
@media (max-width:640px){.hero{padding:34px 22px}}
.hero .eyebrow{color:#7fb3e8;margin:0 0 16px;display:block}
.hero h1{color:#fff;margin:0 0 16px;font-size:clamp(28px,4.4vw,50px);line-height:1.08}
.hero-sub{color:#b8c9d9;font-size:16.5px;line-height:1.7;max-width:66ch;margin:0 0 30px}
.hero-search{display:flex;gap:10px;flex-wrap:wrap;max-width:720px}
.hero-search input{flex:1 1 260px;min-width:0;padding:16px 20px;border:0;border-radius:10px;
  font:400 16px var(--sans);background:#fff;color:var(--fg)}
.hero-search input:focus{outline:3px solid rgb(255 107 0 / .5);outline-offset:1px}
.hero-search button{padding:16px 30px;background:var(--accent);color:#fff;border:0;
  border-radius:10px;font:800 13px var(--sans);letter-spacing:.05em;cursor:pointer;
  white-space:nowrap}
.hero-search button:hover{background:var(--accent-dark)}
.hero-note{color:#8ba3ba;font-size:13px;margin:16px 0 0}

/* Trang kết quả: ô tìm kiếm trên nền trắng nên viền lại cho thấy */
.card .hero-search input{border:1px solid var(--line);background:var(--soft)}
.card .hero-search input:focus{outline:2px solid var(--primary);background:#fff}

/* ── Thẻ ────────────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:32px;position:relative}
@media (max-width:640px){.card{padding:20px}}

.crumbs{color:var(--faint);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--faint);transition:color .15s}
.crumbs a:hover{color:var(--fg)}

h1{font-family:var(--display);font-size:clamp(28px,4vw,46px);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
h2{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 18px}
.section{margin-top:24px}

/* ── Bố cục trên trang sản phẩm ─────────────────────────────────────────── */
.product-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px}
@media (max-width:900px){.product-top{grid-template-columns:1fr;gap:28px}}
/* Thư viện ảnh: ảnh chính vuông + dải ảnh nhỏ cuộn ngang */
.gal-main{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
  aspect-ratio:1;display:grid;place-items:center}
.gal-main img{width:100%;height:100%;object-fit:contain;padding:18px}
.gal-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
.gal-thumb{flex:0 0 78px;width:78px;height:78px;padding:5px;background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:16px;transition:border-color .15s}
.gal-thumb img{width:100%;height:100%;object-fit:contain}
.gal-thumb:hover{border-color:var(--faint)}
.gal-thumb.on{border-color:var(--accent);border-width:2px;padding:4px}
.no-image{aspect-ratio:1;display:grid;place-items:center;background:var(--soft);
  border:1px solid var(--line);border-radius:12px;color:var(--faint);
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}

/* Ảnh và bảng CHÈN TRONG mô tả — nội dung cào về, phải chặn tràn ngang.
   Bảng rộng trên điện thoại sẽ đẩy cả trang lệch nếu không cho cuộn riêng. */
.desc img{border-radius:10px;border:1px solid var(--line);margin:18px 0;max-width:100%;height:auto}
.desc h2,.desc h3,.desc h4{font-family:var(--display);letter-spacing:-.02em;
  margin:30px 0 12px;font-weight:700}
.desc h2{font-size:21px}.desc h3{font-size:18px}.desc h4{font-size:16px}
.desc ul,.desc ol{padding-left:22px;margin:0 0 15px}
.desc li{margin-bottom:7px}
.desc a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.desc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;display:block;
  overflow-x:auto;white-space:nowrap}
.desc table th,.desc table td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.desc table th{background:var(--soft);font-weight:700}
.desc blockquote{margin:18px 0;padding:14px 20px;background:var(--soft);
  border-left:3px solid var(--accent);border-radius:0 14px 14px 0}
.desc strong{font-weight:700;color:var(--fg)}

/* ── Khối mua DÍNH theo cuộn ────────────────────────────────────────────────
   Trang chi tiết công nghiệp thường rất dài: thông số, mô tả, tiêu chuẩn, tài
   liệu. Cuộn xuống đọc thông số rồi muốn hỏi giá thì phải cuộn ngược lên đầu —
   đúng lúc người mua đã đủ thông tin để hành động thì lại mất chỗ hành động.
   Các sàn linh kiện (MISUMI, RS) đều giữ khối mua đứng yên vì lý do đó.

   position:sticky chỉ ăn khi cha KHÔNG có overflow ẩn, và cần top đủ lớn để không
   bị thanh đầu dính che. Chỉ bật từ 900px trở lên: dưới ngưỡng đó bố cục đã xếp
   dọc, dính lại sẽ chiếm gần hết màn hình điện thoại. */
@media (min-width:900px){
  .buy{position:sticky;top:96px;align-self:start}
}

/* Mã hàng đặt LÊN ĐẦU, trước cả tên — lối của sàn linh kiện. Người mua công nghiệp
   tra bằng mã, và mã là thứ họ chép vào đơn hàng. */
.sku-line{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.sku-line .lbl{font:900 9.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.sku-line .val{font:700 15px var(--mono,var(--sans));letter-spacing:.02em;color:var(--fg);
  background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:4px 10px}
.sku-copy{background:none;border:0;cursor:pointer;color:var(--faint);font-size:11.5px;
  font-weight:700;padding:4px 6px}
.sku-copy:hover{color:var(--primary)}
.sku-copy.done{color:#047857}

/* Thông số CHÍNH ngay dưới giá — không bắt người đọc mở tab mới thấy điều quyết định
   chọn hàng. Chỉ hiện tối đa 4 dòng; phần còn lại vẫn ở tab thông số đầy đủ. */
.key-specs{list-style:none;padding:14px 0 0;margin:0 0 20px;border-top:1px solid var(--hair);
  display:grid;gap:9px}
.key-specs li{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;
  align-items:baseline}
.key-specs .k{color:var(--muted)}
.key-specs .v{font-weight:700;text-align:right}
.key-specs .more{color:var(--primary);font-weight:700;font-size:12.5px}

/* Đã xem gần đây — dựng bằng JavaScript từ localStorage nên KHÔNG có trong HTML.
   Chấp nhận được vì đây là lịch sử riêng của từng người, không phải nội dung để
   máy tìm kiếm đọc; và mục này chỉ hiện khi có dữ liệu. */
.seen{display:none}
.seen.on{display:block}

/* Viên thuốc cho mã hàng, thương hiệu, model */
.ids{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px;padding:0}
.ids div{display:flex;align-items:center;gap:7px;background:var(--soft);
  border:1px solid var(--line);border-radius:9999px;padding:7px 14px}
.ids dt{color:var(--faint);margin:0}
.ids dd{margin:0;font-size:13px;font-weight:700}

.price{font-family:var(--display);font-size:clamp(34px,5vw,52px);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin:4px 0 8px}
.price .unit{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--faint);
  letter-spacing:0}
.price-ask{font-family:var(--display);font-size:26px;font-weight:700;margin:4px 0 12px}
.price-note,.rfq-hint{font-size:13.5px;color:var(--muted);margin:0 0 20px;line-height:1.55}

.terms{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.terms li{font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.terms strong{color:var(--fg);font-weight:700}

/* ── Biểu mẫu báo giá ───────────────────────────────────────────────────── */
.rfq-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  padding:22px;background:var(--soft);border:1px solid var(--line);border-radius:12px;
  margin-bottom:14px}
.rfq-form label{display:flex;flex-direction:column;gap:8px;
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.rfq-form .qty{display:flex;align-items:center;gap:9px}
.rfq-form input{width:104px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  font:600 16px var(--sans);background:#fff}
.rfq-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.rfq-form .qty span{font-size:13px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.btn-rfq{padding:14px 30px;background:var(--accent);color:#fff;border:0;border-radius:12px;
  font:900 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 8px 18px -6px rgb(255 107 0 / .45);transition:background .15s}
.btn-rfq:hover{background:var(--accent-dark)}
.btn-rfq[disabled]{opacity:.55;cursor:default;box-shadow:none}

/* ── Chia sẻ mạng xã hội ────────────────────────────────────────────────── */
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--hair)}
.share .eyebrow{color:var(--faint);margin-right:4px}
.share-btn{background:var(--c,var(--fg));color:#fff;border:0;border-radius:10px;
  padding:8px 14px;font:800 11px var(--sans);letter-spacing:.05em;cursor:pointer;
  transition:opacity .15s}
.share-btn:hover{opacity:.85;text-decoration:none}
.share-btn.copy{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.share-btn.copy:hover{background:var(--hair)}
.share-btn.copy.done{background:#059666;color:#fff;border-color:transparent}

/* ── Thông số dạng Ô, không dùng bảng ────────────────────────────────────
   Bảng HTML kiểu cũ khó đọc trên điện thoại và không nêu bật được giá trị.
   Ô riêng cho mỗi thông số: nhãn nhỏ ở trên, GIÁ TRỊ to ở giữa, nguồn ở dưới.
   Cột Nguồn giữ lại — đó là điểm khác biệt lớn nhất so với đối thủ. */
.spec-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.spec-cell{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.spec-cell dt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);margin-bottom:6px}
.spec-cell dd{margin:0;font-family:var(--display);font-size:19px;font-weight:700;
  color:var(--fg);line-height:1.25;letter-spacing:-.01em}
.spec-cell .src{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11px;font-weight:500;color:var(--muted);line-height:1.4}
.spec-cell .src b{font-weight:700;color:var(--primary)}
.spec-note{font-size:13px;color:var(--muted);margin:0 0 18px;line-height:1.6}

/* ── Tab nội dung ────────────────────────────────────────────────────────
   Mọi mục vẫn nằm ĐẦY ĐỦ trong HTML; JavaScript chỉ biến chúng thành tab.
   Không có JavaScript thì các mục xếp dọc như thường — crawler và trợ lý AI
   luôn đọc được toàn bộ, đúng mục đích của trang tĩnh. */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-bottom:0;padding-bottom:0}
.tab-btn{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:13px 18px;font:700 13.5px var(--sans);color:var(--muted);white-space:nowrap;
  transition:color .15s,border-color .15s}
.tab-btn:hover{color:var(--fg)}
.tab-btn.on{color:var(--primary);border-bottom-color:var(--primary)}
.tab-panels .card{border-top-left-radius:0;border-top-right-radius:0;border-top:0}

.standards{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.standards li{background:var(--soft);border:1px solid var(--line);border-radius:9999px;
  padding:8px 16px;font-size:12px;font-weight:800;letter-spacing:.04em}

.desc{line-height:1.75;color:#1e2937}
.desc p{margin:0 0 15px}

/* ── Lưới sản phẩm ──────────────────────────────────────────────────────── */
.grid{list-style:none;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.grid li a{display:flex;flex-direction:column;gap:4px;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:16px;transition:border-color .15s,transform .15s}
.grid li a:hover{border-color:var(--accent);transform:translateY(-2px)}
.grid li img{border-radius:10px;margin-bottom:10px;aspect-ratio:1;object-fit:contain;background:var(--soft)}
.grid .name{font-weight:700;font-size:14.5px;line-height:1.4}
.grid .sku{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.grid .price{font-family:var(--display);font-size:19px;letter-spacing:-.02em;margin:8px 0 0}
.grid .price-ask{font-size:12px;font-weight:800;color:var(--muted);margin:8px 0 0;text-transform:uppercase;letter-spacing:.08em}

.intro{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:70ch;margin-bottom:32px}

/* Chip nhóm hàng trên trang ngành — dẫn sang trang danh mục, tạo liên kết nội bộ */
.chips{list-style:none;padding:0;margin:0;display:flex;gap:9px;flex-wrap:wrap}
.chips a{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:9999px;padding:9px 16px;font-size:13.5px;
  font-weight:600;transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--primary);color:var(--primary)}
.chips span{font-size:11px;font-weight:800;color:var(--faint);background:var(--soft);
  border-radius:9999px;padding:2px 8px}

/* Ô ngành hàng: nhấn mạnh hơn ô danh mục vì đây là lối vào chính của khách B2B */
/* Thẻ ngành hàng: ảnh + chữ thành hai cột của một hàng, giống ô nhóm hàng.
   Trước đây chỉ có chữ, nên đầu trang chủ là một mảng hộp chữ — chỗ khách nhìn đầu tiên lại là
   chỗ khó phân biệt nhất. Ảnh lấy từ một sản phẩm thật trong ngành. */
.grid.industries li a{border-left:3px solid var(--primary);padding-left:14px;
  display:flex;flex-direction:row;align-items:center;gap:12px}
.grid.industries img{width:56px;height:56px;flex:0 0 56px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:5px}
.grid.industries .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.grid.industries .name{font-family:var(--display);font-size:16px;letter-spacing:-.01em;
  line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── Cây nhóm hàng ──────────────────────────────────────────────────────────
   Tiêu đề nhóm cha có đường kẻ trên để mắt thấy ranh giới ngay khi lướt: một
   trang 394 ô mà không có mốc nào thì cuộn tới đâu cũng như nhau. */
.cat-group{margin-top:26px}
.cat-group:first-of-type{margin-top:14px}
.cat-group h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 12px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cat-group h3 span{font:600 12px var(--sans);color:var(--faint);letter-spacing:0}

/* Tầng NGÀNH — tiêu đề to hơn nhóm cha và có đường kẻ đậm, để ba tầng phân biệt được
   bằng mắt chứ không phải bằng cách đọc kỹ. Không thụt lề cả khối: thụt lề ăn mất bề
   ngang của lưới ô, mà trên điện thoại bề ngang là thứ đắt nhất. */
.cat-top{margin-top:34px}
.cat-top>h3{font-size:21px;padding-top:18px;border-top:2px solid var(--fg)}
.cat-sub{margin-top:16px}
.cat-sub h4{font-family:var(--display);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  margin:0 0 9px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.cat-sub h4 span{font:600 11.5px var(--sans);color:var(--faint);letter-spacing:0}
/* Phần lẻ trong một ngành không có tiêu đề, nên cần khoảng thở để không dính vào cụm trên. */
.cat-sub:first-child{margin-top:0}

/* ── Dãy chip nhóm cấp 2 ────────────────────────────────────────────────────
   Cho thấy TOÀN BỘ cấu trúc một ngành trong hai dòng, thay vì bắt cuộn qua hết
   mảng lưới này tới mảng lưới kia. Bấm chip nào hiện nhóm ấy, ngay tại chỗ —
   nhóm cấp 2 không có trang riêng nên không thể làm liên kết.

   KHÔNG CÓ JAVASCRIPT thì dãy chip ẨN và mọi nhóm hiện hết, y như bản cũ. Làm
   ngược lại — ẩn sẵn rồi chờ JS mở — là nếu JS hỏng thì trang trắng nội dung,
   mà JS của trang này đã từng chết cả tệp một lần. */
.cat-chips{display:none;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cat-tabs .cat-chips{display:flex}
.cat-chip{font:600 13px var(--sans);color:var(--fg);background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  display:inline-flex;align-items:center;gap:7px;transition:.15s}
.cat-chip:hover{border-color:var(--fg)}
.cat-chip span{font-size:11.5px;font-weight:700;color:var(--faint)}
/* Chip đang chọn phải khác rõ ràng, không chỉ đậm hơn một chút: nó là thứ duy nhất
   cho biết ô bên dưới đang hiện cái gì. */
.cat-chip.on{background:var(--fg);border-color:var(--fg);color:#fff}
.cat-chip.on span{color:rgba(255,255,255,.7)}

/* Trong chế độ chip, tiêu đề nhóm cha thành thừa — chính cái chip đang bật là tiêu đề. */
.cat-tabs .cat-panel{display:none}
.cat-tabs .cat-panel.on{display:block;margin-top:0}
.cat-tabs .cat-panel h4{display:none}

/* ── Đường dẫn theo cây phân loại ───────────────────────────────────────────
   Lĩnh vực và nhóm cấp 2 GIỜ LÀ LIÊN KẾT: chúng dẫn tới đúng mục của chúng
   trên trang danh mục. Trước đây chúng được làm nhạt đi để không ai bấm hụt —
   giờ bấm được thì phải trông như bấm được, nếu không là làm nhạt một đường đi
   có thật. */
.crumbs .crumb-taxo{color:inherit}
.crumbs .crumb-taxo:hover{text-decoration:underline}




/* Dải thông số dạng chữ, hiện ngay dưới tiêu đề nhóm hàng.
   Có cùng dữ liệu với thanh lọc nhưng KHÔNG ẩn: máy đọc trang phần lớn không
   chạy JavaScript, nên nếu chỉ có thanh lọc thì với chúng nhóm hàng này chỉ là
   một danh sách tên rời rạc. */
.spec-range{margin:18px 0 0;padding:14px 16px;background:var(--soft);
  border:1px solid var(--line);border-radius:10px;display:grid;gap:8px}
.spec-range>div{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.spec-range dt{flex:0 0 96px;font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;text-transform:uppercase}
.spec-range dd{margin:0;font-size:14.5px;color:var(--fg)}
.spec-range dd b{font-weight:700}
.spec-range dd span{color:var(--faint);font-size:13px;margin-left:6px}
@media (max-width:640px){.spec-range dt{flex:none}}

/* Liên kết tới trang gốc bên site chính. Đặt cạnh nút báo giá vì đó là chỗ
   người mua đang cân nhắc — ai muốn đọc kỹ hơn thì có đường đi, ai đã quyết
   thì bấm báo giá ngay tại đây. */
.origin-link{margin:14px 0 0;font-size:13.5px}
.origin-link a{color:var(--accent);font-weight:600}
.origin-link a:hover{text-decoration:underline}


/* ── Trang tin tức & chính sách ─────────────────────────────────────────────
   Cột hẹp: đây là văn bản để ĐỌC, không phải lưới sản phẩm để quét. Dòng dài
   quá 75 ký tự thì mắt lạc dòng khi xuống hàng. */
.in.narrow{max-width:860px}

/* Hai cột cho tin tức: nội dung trái, "Tin mới nhất" phải.
   Cột chính vẫn giữ bề rộng đọc được (~700px) chứ không giãn hết chỗ — thêm cột
   phụ mà làm dòng chữ dài ra là đánh đổi sai: điều hướng thì tiện hơn một chút,
   còn phần người ta thực sự tới để đọc thì khó đọc hơn.
   Dưới 900px xếp dọc, cột phụ xuống dưới — trên điện thoại nó là thứ đọc sau. */
.in.with-aside{max-width:1120px;display:grid;gap:22px;
  grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.in.with-aside > .crumbs{grid-column:1/-1}
.doc-aside .card{padding:16px 18px;position:sticky;top:16px}
.aside-h{font-size:15px;margin:0 0 12px;padding-bottom:10px;
  border-bottom:2px solid var(--accent);text-transform:uppercase;letter-spacing:.04em}
.aside-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.aside-list li{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.aside-list li:last-child{padding-bottom:0;border-bottom:0}
.aside-list a{font-size:14px;font-weight:600;line-height:1.45;color:var(--fg)}
.aside-list a:hover{color:var(--accent)}
.aside-list .doc-date{margin:0;font-size:12px}
@media(max-width:900px){
  .in.with-aside{grid-template-columns:minmax(0,1fr)}
  .doc-aside .card{position:static}
}
.card.doc h1{margin-bottom:6px}
.doc-date{color:var(--faint);font-size:13px;margin:0 0 18px}
.card.doc .desc h2{font-size:19px;margin:26px 0 8px}
.card.doc .desc h3{font-size:16px;margin:20px 0 6px}
.card.doc .desc p{line-height:1.75}
.card.doc .desc ul,.card.doc .desc ol{margin:8px 0 14px;padding-left:22px}
.card.doc .desc li{line-height:1.75;margin:3px 0}
.card.doc .desc hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* Dải chuyển nhanh giữa các chính sách.
   Cuộn ngang chứ không xuống dòng: mười thẻ xếp thành ba hàng đẩy phần nội dung
   xuống dưới màn hình đầu tiên, và người vào đây là để ĐỌC một trang cụ thể chứ
   không phải để ngắm mục lục. Trên điện thoại lướt ngang là thao tác quen. */
.doc-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding-bottom:6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.doc-tab{flex:0 0 auto;white-space:nowrap;font-size:13.5px;font-weight:600;
  padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--muted)}
a.doc-tab:hover{border-color:var(--accent);color:var(--accent)}
.doc-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.doc-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.doc-list li{display:flex;align-items:baseline;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.doc-list li a{flex:1;display:flex;flex-direction:column;gap:3px}
.doc-title{font-weight:700;color:var(--fg)}
.doc-list li a:hover .doc-title{color:var(--accent)}
.doc-sum{color:var(--muted);font-size:14px;line-height:1.6}
.doc-cat{align-self:flex-start;font:700 10.5px var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.doc-list li[hidden],.doc-lead[hidden]{display:none}

/* Bài nổi bật: ảnh lớn trên, chữ dưới.
   Tỉ lệ 16:9 cố định + object-fit:cover — ảnh bài viết đến từ nhiều nguồn với đủ
   kích thước, để nguyên thì mỗi lần dựng trang bố cục lại nhảy một kiểu. */
.doc-lead{display:grid;gap:0;overflow:hidden;padding:0;margin-bottom:14px}
.lead-img{display:block;aspect-ratio:16/9;background:var(--bg-soft,#f1f5f9)}
.lead-img img{width:100%;height:100%;object-fit:cover;display:block}
.lead-body{display:grid;gap:5px;padding:16px 18px 18px}
.lead-title{font-size:21px;font-weight:800;line-height:1.3;color:var(--fg)}
.doc-lead:hover .lead-title{color:var(--accent)}
.lead-body .doc-date{margin:0}

/* Hàng danh sách có ảnh nhỏ bên trái. Ảnh là thứ phụ nên nó co lại trước khi chữ
   phải xuống dòng; dưới 560px thì bỏ hẳn — trên điện thoại một ảnh 96px cạnh ba
   dòng chữ chỉ ăn mất bề ngang của phần đáng đọc. */
.doc-list li.has-img{align-items:flex-start}
.doc-thumb{flex:0 0 132px;display:block;aspect-ratio:4/3;border-radius:8px;
  overflow:hidden;background:var(--bg-soft,#f1f5f9)}
.doc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.doc-thumb{display:none}}

.aside-list li.lead{gap:8px}
.aside-img{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:var(--bg-soft,#f1f5f9);margin-bottom:2px}
.aside-img img{width:100%;height:100%;object-fit:cover;display:block}
.aside-list li.lead > a:not(.aside-img){font-size:15px}
.doc-tabs.sub{margin-top:-8px;padding-left:14px;border-left:2px solid var(--line)}
.doc-tabs.sub[hidden]{display:none}
.doc-tabs.sub .doc-tab{font-size:12.5px;padding:6px 11px}
button.doc-tab{cursor:pointer;font-family:inherit}

/* ── Lọc theo thông số ──────────────────────────────────────────────────────
   Người mua công nghiệp tìm đúng con số (5 tấn, 3 mét, 10mm) chứ không duyệt
   danh sách. Thanh này ẩn sẵn và chỉ mở khi JavaScript chạy — không có JS thì
   một hàng nút bấm không ăn còn khó chịu hơn là không có nút nào. */
.facets{background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:0 0 18px}
.facet-row{display:flex;align-items:flex-start;gap:12px;padding:6px 0}
.facet-label{flex:0 0 96px;font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;text-transform:uppercase;padding-top:6px}
.facet-chips{display:flex;flex-wrap:wrap;gap:7px}
.facet-chip{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:13.5px;font-weight:600;color:var(--fg);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.facet-chip span{color:var(--faint);font-weight:600;font-size:12px}
.facet-chip:hover{border-color:var(--faint)}
.facet-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.facet-chip[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.facet-foot{display:flex;align-items:center;gap:14px;margin-top:8px;min-height:22px;
  font-size:13px;color:var(--muted)}
.facet-clear{background:none;border:none;color:var(--accent);font-size:13px;
  font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.facet-empty{color:var(--muted);font-size:14.5px;padding:18px 2px}
@media (max-width:640px){
  .facet-row{flex-direction:column;gap:6px}
  .facet-label{flex:none;padding-top:0}
}

/* ── Mega menu theo cây ─────────────────────────────────────────────────────
   Chia cột theo lĩnh vực. Giới hạn chiều cao và cho cuộn: 12 lĩnh vực × 4 nhóm
   × 5 mục là quá dài cho một khung thả xuống, mà cắt bớt nữa thì menu không còn
   thay được trang danh mục. */
/* ── MENU THÁC ĐỔ BA CẤP ───────────────────────────────────────────────────────
   Rê vào một mục thì cột kế tiếp hiện ra bên phải, hiện ĐỦ nhánh đó thay vì cắt bớt.
   Làm bằng CSS thuần: không JavaScript, nên menu chạy ngay khi HTML tải xong. */
.mega-panel.casc{padding:0;min-width:280px;overflow:visible}
.mega-panel.casc .mega-all{margin:0;padding:12px 16px;border-top:1px solid var(--hair)}
.casc ul{list-style:none;margin:0;padding:8px}
.casc li{position:relative}
.casc .lv-item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--fg);
  text-decoration:none;cursor:pointer}
.casc .lv-item b{font:700 11.5px var(--sans);color:var(--faint);flex:0 0 auto}
.casc li:hover > .lv-item{background:var(--soft);color:var(--primary)}
.casc li:hover > .lv-item b{color:var(--primary)}
/* Mục còn cấp con thì có mũi tên — người dùng biết rê tiếp được, không phải đoán. */
.casc li:has(> ul) > .lv-item::after{content:"›";font-size:15px;color:var(--faint);
  margin-left:2px;flex:0 0 auto}
.casc li:hover:has(> ul) > .lv-item::after{color:var(--primary)}
/* Cột con: nằm cạnh cột cha, TRÙNG MÉP TRÊN để mắt không phải nhảy xuống.
   max-height + cuộn vì một nhóm cấp 2 có thể chứa vài chục nhóm hàng. */
.casc .lv2,.casc .lv3{position:absolute;top:-8px;left:100%;display:none;z-index:1;
  min-width:270px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift)}
/* CHỈ CẤP CUỐI ĐƯỢC CUỘN.
   Cấp 2 còn chứa cấp 3 nằm ở left:100% — tràn ra ngoài khung nó. Đặt overflow lên cấp 2 thì CSS
   đổi luôn overflow-x thành auto và cấp 3 bị cắt, để lại một thanh cuộn ngang ở đáy cột giữa.
   Đúng cái bẫy đã vá ở cấp 1, và tôi để sót ở cấp 2 vì hai cấp dùng chung một dòng CSS. */
.casc .lv2{max-height:none;overflow:visible}
.casc .lv3{max-height:min(70vh,520px);overflow-y:auto}
.casc li:hover > .lv2,.casc li:hover > .lv3{display:block}
.casc li:focus-within > .lv2,.casc li:focus-within > .lv3{display:block}
/* CỘT CHA KHÔNG ĐƯỢC CÓ overflow.
   Đặt overflow-y:auto lên cột cha sẽ CẮT MẤT cột con — cột con nằm ở left:100%, tức tràn ra ngoài
   khung cha. CSS không cho phép overflow-x:visible đi cùng overflow-y:auto: nó tự đổi cả hai thành
   auto, và cột con biến mất sau một thanh cuộn ngang.
   Cột cha chỉ có vài chục ngành nên không cần cuộn; cột con thì cuộn được vì nó không chứa gì
   tràn ra ngoài. */
.casc > .lv1{max-height:none}
.mega-panel.tree{max-height:70vh;overflow-y:auto}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.mega-col{min-width:0}
.mega-col .mega-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:6px;margin:0 0 8px}
.mega-col .mega-head b{font:700 11px var(--sans);color:var(--faint)}
.mega-fam{font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--faint);margin:10px 0 4px}
.mega-col .mega-list{margin:0;padding:0;list-style:none}
.mega-col .mega-list a{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
  font-size:13px;color:var(--fg);text-decoration:none}
.mega-col .mega-list a:hover{color:var(--accent);text-decoration:underline}
.mega-col .mega-list b{font-weight:600;color:var(--faint);font-size:11.5px}

/* ── Bằng chứng trong kết quả tìm ───────────────────────────────────────────
   Tiêu chuẩn và "có tài liệu" là thứ quyết định mua ở B2B công nghiệp, thay cho
   chỗ mà trang tiêu dùng để số sao và mã giảm giá. Chữ nhỏ, viền nhạt: nó là
   nhãn để liếc, không được tranh chỗ với tên sản phẩm. */
.ev{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ev b{font:700 10px var(--sans);letter-spacing:.02em;padding:2px 6px;border-radius:5px;
  border:1px solid var(--line);color:var(--faint);white-space:nowrap}
.ev .ev-std{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}
.ev .ev-doc{border-color:#bbf7d0;background:#f0fdf4;color:#166534}

/* ── Câu hỏi mẫu dưới ô tìm ở trang chủ ─────────────────────────────────────
   Sinh từ dữ liệu THẬT lúc dựng trang. Câu mẫu bấm vào không ra gì thì phản tác
   dụng hơn là không có câu nào. */
.asks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0}
.ask-chip{font:600 13px var(--sans);background:#fff;cursor:pointer;
  /* Ghi màu TƯỜNG MINH: chip nằm trong .hero vốn đặt color:#fff, nên thiếu dòng này là
     chữ trắng trên nền trắng — ô chip trông như rỗng. Đúng lỗi đã xảy ra, vì tôi viết
     var(--ink) trong khi bảng màu dùng --fg; biến không tồn tại thì giá trị bị bỏ qua và
     màu kế thừa từ .hero được dùng. */
  color:#102a43;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;transition:.15s}
.ask-chip:hover{border-color:var(--fg);box-shadow:0 1px 6px rgba(0,0,0,.06)}

/* ── Ô nhóm hàng có ảnh ─────────────────────────────────────────────────────
   HÀNG THẤP, ẢNH NHỎ BÊN TRÁI.
   Bản trước: ảnh 88px bên phải, ô cao 104px, mỗi hàng vừa 4 ô — 55 nhóm trong một
   ngành thành 14 hàng phải cuộn, và tên dài ("Palăng xích điện di chuyển DAESAN")
   xuống bốn dòng trong cột chữ hẹp. Đây là danh sách để CHỌN, không phải để ngắm:
   việc của nó là cho thấy nhiều lựa chọn nhất trong một màn hình.
   Ảnh chuyển sang TRÁI vì ở cỡ 52px nó không còn là hình minh hoạ mà là cái mốc
   căn hàng — một cột mốc thẳng đứng ở đầu mỗi dòng quét nhanh hơn nhiều so với
   ảnh so le bên phải theo độ dài tên. Cùng cách Ubuy và smartmall.vn xếp. */
.grid.tiles{gap:10px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.grid.tiles a{display:flex;flex-direction:row;align-items:center;gap:11px;
  padding:9px 12px 9px 9px;border-radius:10px;min-height:0}
.grid.tiles img{width:52px;height:52px;flex:0 0 52px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px;margin:0;padding:3px}
.grid.tiles .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Cắt ở dòng thứ hai thay vì để tên đẩy ô cao lên: các ô trong một hàng phải bằng
   nhau, nếu không lưới thành răng cưa. Tên đầy đủ vẫn còn trong thuộc tính title. */
.grid.tiles .name{font-size:13.5px;font-weight:650;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* Số sản phẩm là thông tin phụ: chữ thường, nhỏ, xám. Bản trước dùng chữ hoa
   letter-spacing đậm như một cái nhãn — nó hét to hơn cả tên nhóm. */
.grid.tiles .sku{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:0;
  color:var(--faint)}

/* ── Ô thương hiệu ──────────────────────────────────────────────────────────── */

/* Chỉ CHỮ, không logo. Kho dữ liệu không có logo từng hãng, mà lấy logo từ nơi
   khác là dùng nhãn hiệu của người ta khi không có quyền. */
.grid.brands a{display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;min-height:96px;gap:6px}
.grid.brands .name{font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:-.01em}
.grid.brands .sku{font-size:11.5px;color:var(--faint);font-weight:600}
/* DẢI THƯƠNG HIỆU TRƯỢT NGANG.
   Lưới bốn cột thì 12 hãng đã chiếm ba hàng, và 24 hãng thành sáu hàng đẩy mọi mục khác xuống
   dưới màn hình. Dải trượt giữ chiều cao MỘT hàng dù có bao nhiêu hãng.
   Trượt bằng CSS thuần: trang tĩnh không cần JavaScript cho việc này, và tắt JS vẫn dùng được.
   scroll-snap để mỗi lần vuốt dừng gọn ở một ô, không dừng giữa chừng cắt đôi tên hãng.
   overscroll-behavior-x:contain để vuốt hết dải không kéo luôn cả trang sang ngang. */
/* Hàng tiêu đề có liên kết "Xem tất cả" ở bên phải — mục chỉ hiện một phần thì phải có đường đi
   tới danh sách đầy đủ. */
/* DẢI CAM KẾT. Xếp ngang trên máy tính, xuống cột trên điện thoại. Không dùng ảnh nào — biểu
   tượng là SVG nội tuyến nên tải cùng trang và đổi màu theo màu chữ. */
.usp{list-style:none;margin:8px 0 0;padding:16px 0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp li{display:flex;gap:11px;align-items:flex-start}
.usp svg{width:26px;height:26px;flex:0 0 26px;color:var(--primary);margin-top:1px}
.usp .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.usp .t{font-weight:700;font-size:14px;line-height:1.3}
.usp .d{font-size:12.5px;color:var(--faint);line-height:1.45}
/* Nút mũi tên của dải trượt. Đặt đè lên hai mép, nền trắng mờ để không che hẳn ô bên dưới.
   Chỉ hiện trên màn hình đủ rộng: trên điện thoại người dùng vuốt, và hai nút chỉ chiếm chỗ. */
/* TRANG THƯƠNG HIỆU KIỂU SITEMAP: thanh chữ cái + danh sách gọn theo nhóm.
   Một lưới phẳng 87 hãng thì tìm một hãng cụ thể phải rà mắt từ đầu tới cuối. */
.az{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}
.az a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 8px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-weight:700;font-size:13px;text-decoration:none;color:var(--fg)}
.az a:hover{border-color:var(--primary);color:var(--primary)}
.az-group{margin-top:22px}
/* scroll-margin để khi nhảy tới một chữ, tiêu đề không nằm khuất dưới thanh điều hướng dính. */
.az-group .section{scroll-margin-top:90px;display:flex;align-items:baseline;gap:8px}
.az-n{font-size:12px;font-weight:600;color:var(--faint)}
.az-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.az-list a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  text-decoration:none;color:var(--fg);font-weight:650;font-size:13.5px}
.az-list a:hover{border-color:var(--primary);color:var(--primary)}
.az-list .sku{font-size:11.5px;color:var(--faint);font-weight:600;flex:0 0 auto}
.rail-wrap{position:relative}
.rail-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--fg);cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.10);transition:opacity .15s,box-shadow .15s}
.rail-nav svg{width:18px;height:18px}
.rail-nav.prev{left:-6px}
.rail-nav.next{right:-6px}
.rail-nav:hover{box-shadow:0 3px 14px rgba(0,0,0,.16)}
.rail-nav.off{opacity:.32;pointer-events:none}
@media (min-width:900px){.rail-nav{display:flex}}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-row .section{margin-bottom:0}
.sec-more{font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid transparent}
.sec-more:hover{border-bottom-color:currentColor}
/* Bọc dải trong một lớp có mép phải MỜ DẦN: nó nói "còn nữa" mà không chiếm chỗ như một thanh
   cuộn dày. Dùng mask nên không cần thêm phần tử HTML nào. */
.grid.brands.rail{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.grid.brands.rail{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  padding-bottom:10px;scrollbar-width:thin}
.grid.brands.rail li{flex:0 0 176px;scroll-snap-align:start}
.grid.brands.rail a{padding:14px 12px;gap:2px}
.grid.brands.rail .name{font-size:14.5px}
.grid.brands.rail .sku{font-size:11px}
.grid.brands.rail a{height:100%}
/* Thanh cuộn mảnh, chỉ đậm khi rê vào — có mặt để người dùng BIẾT là cuộn được, nhưng không
   chiếm chú ý khi đang đọc. */
.grid.brands.rail::-webkit-scrollbar{height:6px}
.grid.brands.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.grid.brands.rail:hover::-webkit-scrollbar-thumb{background:var(--line)}
.grid.brands.rail:focus-within::-webkit-scrollbar-thumb{background:var(--line)}
/* Bàn phím: dải nhận được tiêu điểm nên cuộn được bằng phím mũi tên. Viền cho thấy đang ở đó. */
.grid.brands.rail:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:12px}
@media (max-width:640px){.grid.brands.rail li{flex:0 0 150px}}

/* ── Thanh phân trang ───────────────────────────────────────────────────────
   Ô bấm tối thiểu 40px: người xem ngoài công trường dùng điện thoại, có khi
   đeo găng — chuỗi số 13px sát nhau là không bấm trúng. */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:32px 0 8px}
.pg-nums{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager a,.pg-now,.pg-gap{min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:10px;font:700 14px var(--sans);padding:0 12px}
.pager a{border:1px solid var(--line);color:var(--fg);background:#fff}
.pager a:hover{border-color:var(--primary);color:var(--primary)}
.pg-now{background:var(--primary);color:#fff}
.pg-gap{color:var(--faint)}
.pg-side{font-size:13px!important;font-weight:800!important}
@media(max-width:560px){
  /* Trên điện thoại chỉ giữ Trước/Sau và số hiện tại: dãy số đầy đủ xuống dòng
     hai ba lần, chiếm nhiều chỗ hơn cả danh sách sản phẩm. */
  .pg-nums a{display:none}
  .pg-gap{display:none}
}

/* ── Bộ giải pháp theo ngành ─────────────────────────────────────────────────
   Ô cao hơn ô danh mục và có chỗ cho một câu giải thích: mục ở đây không tự nói
   hết ý ("Chống cháy lan" cần một dòng nói vì sao cần), khác tên nhóm hàng vốn
   đã đủ nghĩa. */
.solutions{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.solutions li>a,.solutions li>div{display:flex;flex-direction:column;gap:7px;height:100%;
  padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:border-color .15s,box-shadow .15s}
.solutions li>a:hover{border-color:var(--primary);box-shadow:var(--shadow-lift)}
.s-title{font-family:var(--display);font-size:16.5px;font-weight:700;color:var(--fg);
  letter-spacing:-.01em;line-height:1.3}
.s-note{font-size:13.5px;color:var(--muted);line-height:1.55}
.s-go{margin-top:auto;font:800 11.5px var(--sans);color:var(--primary);letter-spacing:.03em}
/* Ô không có liên kết KHÔNG được trông như bấm được — con trỏ và viền phải khác. */
.solutions li>div{cursor:default;background:var(--soft)}

/* ── Chân trang nhiều cột ───────────────────────────────────────────────────
   Nền ĐẬM để tách hẳn khỏi nội dung: chân trang cùng màu trắng với thân trang thì
   người đọc cuộn tới đây không biết trang đã hết, và tiếp tục tìm nội dung.
   Bốn cột trên máy tính, một cột trên điện thoại — không có bước hai cột, vì hai
   cột chữ nhỏ cạnh nhau trên màn hình hẹp khó đọc hơn một cột dài. */
.site-footer{background:var(--fg);color:#cbd5e1;margin-top:56px}
.site-footer .in{max-width:1180px;margin:0 auto;padding:48px 20px 28px;font-size:14px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr;gap:30px}}
.ft-name{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;margin:0 0 12px}
.ft-brand img{margin-bottom:14px;filter:brightness(0) invert(1);opacity:.92}
.ft-about{line-height:1.65;color:#94a3b8;margin:0;max-width:34ch}
.ft-head{font:900 10px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:#64748b;margin:0 0 14px}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-col a{color:#cbd5e1;font-size:14px;line-height:1.4}
.ft-col a:hover{color:#fff}
.ft-contact p{margin:0 0 7px;line-height:1.6;color:#94a3b8}
.ft-company{color:#fff!important;font-weight:700}
/* Số điện thoại to hơn hẳn: ở B2B, phần lớn yêu cầu gấp kết thúc bằng một cuộc gọi. */
.ft-tel{font-family:var(--display);font-size:19px;font-weight:700;color:#fff!important;
  letter-spacing:-.01em}

.ft-tags{margin-top:34px;padding-top:26px;border-top:1px solid rgb(255 255 255 / .08)}
.ft-tags>div{display:flex;flex-wrap:wrap;gap:8px}
.ft-tags a{font-size:13px;color:#cbd5e1;background:rgb(255 255 255 / .06);
  border-radius:9999px;padding:7px 14px;line-height:1}
.ft-tags a:hover{background:rgb(255 255 255 / .13);color:#fff}

.ft-bottom{margin-top:26px;padding-top:20px;border-top:1px solid rgb(255 255 255 / .08)}
.ft-bottom p{margin:0;font-size:12.5px;color:#64748b;line-height:1.6}

/* ── Hộp thoại báo giá ──────────────────────────────────────────────────── */
.rfq-dialog{position:fixed;inset:0;background:rgb(15 23 42 / .55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:18px;z-index:60}
.rfq-dialog form{background:#fff;border-radius:16px;padding:32px;max-width:440px;width:100%;
  display:flex;flex-direction:column;gap:13px;box-shadow:0 25px 50px -12px rgb(0 0 0 / .3)}
.rfq-dialog h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.rfq-dialog input,.rfq-dialog textarea{padding:12px 14px;border:1px solid var(--line);
  border-radius:14px;font:400 15px var(--sans);width:100%;background:#fff}
.rfq-dialog input:focus,.rfq-dialog textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:transparent}
.rfq-dialog textarea{resize:vertical}
.rfq-dialog .row{display:flex;gap:12px}
.rfq-dialog .btn-cancel{padding:13px 22px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;font:900 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;color:var(--muted)}
.rfq-dialog .btn-cancel:hover{background:var(--hair)}
.rfq-msg{font-size:13.5px;margin:0;color:var(--muted)}
.rfq-msg.err{color:#b91c1c;font-weight:600}
.rfq-msg.ok{color:#047857;font-weight:600}

/* ── Tài liệu kỹ thuật ──────────────────────────────────────────────────────
   Mỗi tệp là một hàng bấm được rộng cả dòng, không phải một liên kết chữ nhỏ:
   khách hay xem trên điện thoại ngoài công trường, ngón tay không nhắm được
   chuỗi 14px. Cỡ tệp hiện luôn vì mạng ngoài công trường thường yếu. */
.docs{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.docs a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;
  color:var(--fg);background:#fff;transition:border-color .15s,background .15s}
.docs a:hover{border-color:var(--primary);background:var(--soft)}
.doc-kind{font:900 10px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--primary);background:#eef4fc;border-radius:6px;padding:6px 9px;white-space:nowrap}
.doc-title{font-weight:600;font-size:15px;line-height:1.4}
.doc-meta{font-size:12.5px;color:var(--faint);white-space:nowrap}
@media(max-width:560px){
  .docs a{grid-template-columns:auto 1fr;grid-template-areas:"kind title" ". meta"}
  .doc-kind{grid-area:kind} .doc-title{grid-area:title} .doc-meta{grid-area:meta}
}

/* ── Giỏ yêu cầu báo giá ────────────────────────────────────────────────────
   Mua hàng công nghiệp gần như không bao giờ mua một món: một lần trang bị cho
   tổ thi công là găng + kính + dây đai + mũ. Bắt khách gửi bốn yêu cầu rời là
   bắt cả hai bên làm việc bốn lần. */
.cart-bar{position:fixed;right:18px;bottom:18px;z-index:60;display:none}
.cart-bar.on{display:block}
.cart-bar a{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
  text-decoration:none;padding:14px 20px;border-radius:9999px;font:900 12px var(--sans);
  letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgb(255 107 0 / .35)}
.cart-bar a:hover{background:var(--accent-dark)}
.cart-count{background:#fff;color:var(--accent);border-radius:9999px;min-width:22px;
  height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.btn-add{margin-top:10px;width:100%;padding:13px 18px;background:#fff;color:var(--primary);
  border:2px solid var(--primary);border-radius:12px;font:900 11px var(--sans);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn-add:hover{background:var(--soft)}
.btn-add.done{border-color:#047857;color:#047857}

.cart-table{width:100%;border-collapse:collapse;margin:0 0 24px}
.cart-table th{text-align:left;font:900 10.5px var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);padding:0 12px 10px;border-bottom:1px solid var(--line)}
.cart-table td{padding:14px 12px;border-bottom:1px solid var(--hair);vertical-align:top;font-size:14.5px}
.cart-table .c-name{font-weight:600}
.cart-table .c-sku{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.cart-table input[type=number]{width:92px;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;font:inherit;text-align:right}
.cart-del{background:none;border:0;color:#b91c1c;cursor:pointer;font-size:13px;padding:4px}
.cart-empty{text-align:center;padding:56px 20px;color:var(--muted)}
.cart-form{display:grid;gap:14px;max-width:620px}
.cart-form .row{display:flex;gap:12px;flex-wrap:wrap}
.cart-form .row>*{flex:1 1 200px}
.cart-form label{display:block;font:600 13px var(--sans);color:var(--muted);margin-bottom:6px}
.cart-form input,.cart-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;box-sizing:border-box}
.cart-form input:focus,.cart-form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.cart-form .hint{font-size:12.5px;color:var(--faint);margin:5px 0 0}
.file-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.file-list li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}

/* ── So sánh sản phẩm ───────────────────────────────────────────────────────
   Bảng cuộn NGANG trong khung riêng, không để cả trang cuộn ngang: cột đầu
   (tên thông số) phải dính lại, nếu không thì cuộn tới cột thứ ba là không
   còn biết đang đọc dòng nào. Đây là lỗi hay gặp nhất của bảng so sánh. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:14px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.cmp thead th{background:var(--soft);border-bottom:1px solid var(--line);vertical-align:bottom}
.cmp .rowhead{position:sticky;left:0;background:#fff;font:600 12.5px var(--sans);color:var(--muted);
  min-width:150px;box-shadow:1px 0 0 var(--hair)}
.cmp thead .rowhead{background:var(--soft)}
.cmp-name{font-weight:700;font-size:14.5px;color:var(--fg);text-decoration:none;display:block;line-height:1.4}
.cmp-name:hover{color:var(--primary)}
.cmp-img{width:100%;max-width:130px;height:auto;border:1px solid var(--line);border-radius:9px;
  margin-bottom:9px;background:#fff}
.cmp-sku{font-size:12px;color:var(--faint);display:block;margin-top:4px}
.cmp-price{font-family:var(--display);font-weight:700;color:var(--primary);white-space:nowrap}
/* Ô KHÁC NHAU được tô nhẹ. Cả bảng đen trắng thì mắt phải tự dò từng dòng —
   mà điểm khác nhau mới là lý do người ta mở trang so sánh. */
.cmp .diff{background:#fff8f2}
.cmp-rm{background:none;border:0;color:#b91c1c;cursor:pointer;font-size:12.5px;padding:4px 0;
  font-weight:600}
.cmp-legend{font-size:12.5px;color:var(--faint);margin:0 0 14px}

/* ── Quan hệ sản phẩm ───────────────────────────────────────────────────────
   Mỗi mục là một hàng bấm được rộng cả dòng, kèm chỗ cho ghi chú kỹ thuật
   ("chỉ lắp được với thân van DN50") — ghi chú đó thường là thứ quyết định
   người mua có đặt hay không. */
.rel-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rel-list a{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;
  color:var(--fg);transition:border-color .15s}
.rel-list a:hover{border-color:var(--primary)}
.rel-name{font-weight:600;font-size:15px;line-height:1.4}
.rel-sku{font-size:12.5px;color:var(--faint);white-space:nowrap}
.rel-note{grid-column:1/-1;font-size:13px;color:var(--muted);line-height:1.5}

/* ── Bảng biến thể ──────────────────────────────────────────────────────────
   Dòng đang xem được tô nhẹ và KHÔNG có liên kết: trỏ về chính trang đang mở là
   một cú bấm không dẫn tới đâu, và với máy tìm kiếm là một liên kết tự trỏ vô
   nghĩa. Thay bằng nhãn "Đang xem". */
.variants{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.variants th{text-align:left;font:900 10.5px var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);padding:0 14px 10px;border-bottom:1px solid var(--line)}
.variants td{padding:12px 14px;border-bottom:1px solid var(--hair)}
.variants tr.on{background:#fff8f2}
.variants .v-val{font-weight:700}
.variants .v-now{font:900 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.variants a{color:var(--primary);font-weight:700}
.btn-cmp{margin-top:8px;width:100%;padding:11px 18px;background:#fff;color:var(--muted);
  border:1px solid var(--line);border-radius:12px;font:900 10.5px var(--sans);
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.btn-cmp:hover{border-color:var(--primary);color:var(--primary)}
.btn-cmp.on{border-color:var(--primary);color:var(--primary);background:var(--soft)}