/* ============================================================
   MAIN.CSS — Khâu 5 (mazakogroup.com), M1–M10
   Khung thiết kế chuẩn: 1440px, nội dung max-width 1280px canh giữa.
   Màu chuẩn duy nhất: #C00000. Font: Roboto (đã enqueue Google Fonts).
   ============================================================ */

:root {
    --b2b-red: #C00000;
    --b2b-red-dark: #1a0000;
    --b2b-text: #1a1a1a;
    --b2b-text-muted: #666;
    --b2b-border: #eee;
    --b2b-bg-alt: #fafafa;
    --b2b-max-width: 1280px;
    --b2b-design-width: 1440px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--b2b-text);
    margin: 0;
    line-height: 1.5;
    background: #fff;
}

.b2b-site-wrapper {
    max-width: var(--b2b-design-width);
    margin: 0 auto;
    background: #fff;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.b2b-container {
    max-width: var(--b2b-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.b2b-section { padding: 48px 0; }
.b2b-section:nth-of-type(even) { background: var(--b2b-bg-alt); }

.b2b-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.b2b-section-title-wrap { display: flex; align-items: center; gap: 10px; }
.b2b-title-bar { width: 4px; height: 22px; background: var(--b2b-red); border-radius: 2px; }
.b2b-section-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--b2b-text); }
.b2b-view-all { font-size: 13px; font-weight: 600; color: var(--b2b-red); display: flex; align-items: center; gap: 4px; }

/* ============================================================
   M1 — HEADER
   ============================================================ */
.b2b-site-header {
    border-bottom: 2px solid var(--b2b-red);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}
.b2b-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    max-width: var(--b2b-max-width);
    margin: 0 auto;
}
.b2b-site-logo { display: flex; align-items: center; }
.b2b-logo-img, .b2b-site-logo img { height: 62px; width: auto; }
.b2b-nav-toggle {
    display: none;
    background: none; border: none; font-size: 24px; color: var(--b2b-text); cursor: pointer;
}
.b2b-site-nav-list {
    display: flex; gap: 24px; list-style: none; margin: 0; padding: 0;
}
.b2b-site-nav-list li a {
    font-size: 18px; font-weight: 600; color: var(--b2b-text); transition: color .15s;
}
.b2b-site-nav-list li a:hover { color: var(--b2b-red); }
.b2b-header-qc-link {
    position: relative; font-size: 22px; color: var(--b2b-red);
}
.b2b-header-qc-badge {
    position: absolute; top: -8px; right: -10px; background: var(--b2b-red); color: #fff;
    font-size: 10px; font-weight: 700; border-radius: 50%; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   M2 — HERO SLIDER (thuần ảnh, trượt ngang trái/phải)
   ============================================================ */
.b2b-hero-slider { width: 100%; }
.b2b-slider-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 405;
    overflow: hidden;
    background: var(--b2b-red-dark);
    border-radius: 8px;
}
.b2b-hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .6s ease;
}
.b2b-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: block;
}
.b2b-slide img { width: 100%; height: 100%; object-fit: cover; }
.b2b-slide-empty-msg { color: #fff; text-align: center; padding-top: 40%; font-size: 14px; opacity: .6; }
.b2b-arr-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.4); color: #fff; font-size: 18px; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.b2b-arr-prev { left: 16px; }
.b2b-arr-next { right: 16px; }
.b2b-slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.b2b-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }
.b2b-dot.active { background: #fff; width: 22px; border-radius: 4px; transition: width .2s; }

/* ============================================================
   M3 — BRAND CAROUSEL (auto-scroll)
   ============================================================ */
.b2b-brand-carousel-section { padding: 36px 0; border-radius: 8px; }
.b2b-brand-carousel-title {
    text-align: center; font-size: 16px; font-weight: 700; color: #999;
    letter-spacing: 1px; margin-bottom: 20px;
}
.b2b-carousel-viewport { overflow: hidden; width: 100%; }
.b2b-carousel-track { display: flex; transition: transform .6s ease; }
.b2b-carousel-item { flex: 0 0 auto; }
.b2b-brand-item { width: 160px; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.b2b-brand-logo-link, .b2b-brand-item > span {
    background: var(--b2b-bg-alt); border: 1px solid transparent; border-radius: 6px;
    width: 100%; height: 60px; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s;
}
.b2b-brand-logo-link:hover { border-color: var(--b2b-red); background: #fff; }
.b2b-brand-logo-link img { max-height: 40px; max-width: 90%; object-fit: contain; }
.b2b-brand-logo-text { font-size: 12px; font-weight: 700; color: #555; text-align: center; padding: 0 8px; }

/* ============================================================
   M4 — CATEGORY GRID (4/hàng, tự xuống hàng)
   ============================================================ */
.b2b-category-grid-section { padding: 24px 0 40px; }
.b2b-category-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.b2b-category-card {
    border: 1px solid var(--b2b-border); border-radius: 8px; padding: 20px 10px;
    text-align: center; transition: border-color .15s, box-shadow .15s;
}
.b2b-category-card:hover { border-color: var(--b2b-red); box-shadow: 0 4px 12px rgba(192,0,0,0.08); }
.b2b-category-icon { width: 200px; height: 200px; object-fit: contain; margin: 0 auto 10px; }
.b2b-category-icon-fallback { font-size: 64px; color: var(--b2b-red); display: block; margin-bottom: 10px; }
.b2b-category-name { font-size: 18px; font-weight: 700; color: var(--b2b-text); }

/* ============================================================
   M5 — SẢN PHẨM NỔI BẬT (carousel) / M8 — TIN TỨC (carousel dùng chung khung)
   ============================================================ */
.b2b-featured-products-section { border-radius: 8px; }
.b2b-product-mini-card, .b2b-news-mini-card { width: 220px; padding: 0 8px; display: block; }
.b2b-product-mini-img, .b2b-news-mini-img {
    aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--b2b-bg-alt);
    border: 1px solid transparent; transition: border-color .15s;
}
.b2b-product-mini-card:hover .b2b-product-mini-img,
.b2b-news-mini-card:hover .b2b-news-mini-img { border-color: var(--b2b-red); }
.b2b-product-mini-img img, .b2b-news-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.b2b-product-mini-name, .b2b-news-mini-title {
    font-size: 13px; font-weight: 600; margin-top: 8px; color: var(--b2b-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-card-img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 28px; background: var(--b2b-bg-alt);
}

/* ============================================================
   M6 — VIDEO
   ============================================================ */
/* 27/08/2026 — DONG BO TU HOSTING: gia tri 1280px la ban anh Tan sua
   TRUC TIEP tren server (khong qua Git), phat hien khi git pull bao
   "local changes would be overwritten". Da dua vao Git de khong mat
   nua. Gia tri cu trong repo la 900px — KHONG dung. */
.b2b-video-container { max-width: 1280px; }
.b2b-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; }
.b2b-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   M7 — SẢN PHẨM MỚI (grid tĩnh 2x4) — dùng chung style product-card với M7 cũ
   ============================================================ */
.b2b-new-products-section { border-radius: 8px; }
.b2b-product-grid { display: grid; gap: 20px; }
.b2b-grid-4 { grid-template-columns: repeat(4, 1fr); }
.b2b-product-card { border: 1px solid var(--b2b-border); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .15s; }
.b2b-product-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.b2b-card-img { position: relative; aspect-ratio: 4/3; background: var(--b2b-bg-alt); }
.b2b-card-img img { width: 100%; height: 100%; object-fit: cover; }
.b2b-card-badge {
    position: absolute; top: 10px; left: 10px; background: var(--b2b-red); color: #fff;
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px;
}
.b2b-card-body { padding: 14px; }
.b2b-card-brand { font-size: 10px; font-weight: 700; color: var(--b2b-red); margin-bottom: 4px; }
.b2b-card-name { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.b2b-card-sku { font-size: 11px; color: var(--b2b-text-muted); }
.b2b-card-divider { border-top: 1px solid var(--b2b-border); margin: 10px 0; }
.b2b-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.b2b-card-price { font-size: 13px; font-weight: 700; color: var(--b2b-text); }
.b2b-btn-rfq {
    background: var(--b2b-red); color: #fff; font-size: 11px; font-weight: 700;
    padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}

/* ============================================================
   M9 — CTA THANH NGANG
   ============================================================ */
.b2b-cta-bar {
    background: var(--b2b-red); color: #fff; text-align: center;
    padding: 16px 20px; font-size: 14px; font-weight: 700;
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.b2b-cta-bar a { text-decoration: underline; color: #fff; }

/* ============================================================
   M10 — FOOTER
   ============================================================ */
.b2b-site-footer { background: #1a1a1a; color: #ccc; padding: 40px 0 20px; margin-top: 0; }
.b2b-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.b2b-footer-heading { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 1px; margin-bottom: 14px; }
.b2b-footer-link-list { list-style: none; margin: 0; padding: 0; }
.b2b-footer-link-list li { margin-bottom: 8px; }
.b2b-footer-link-list a { font-size: 16px; color: #bbb; transition: color .15s; }
.b2b-footer-link-list a:hover { color: #fff; }
.b2b-footer-contact-line { font-size: 16px; color: #bbb; margin: 0 0 8px; }
.b2b-footer-contact-line strong { color: #fff; }
.b2b-footer-social { display: flex; gap: 12px; margin-top: 12px; }
.b2b-footer-social a { font-size: 40px; color: #bbb; transition: color .15s; }
.b2b-footer-social a:hover { color: var(--b2b-red); }
/* KHÂU 5 (08/2026) — Thông tin công ty dưới nút Facebook/YouTube, theo
   yêu cầu Tan: tên công ty 22px, phần còn lại (địa chỉ/email/website)
   tái dùng đúng .b2b-footer-contact-line đã có sẵn (16px). */
.b2b-footer-company-info { margin-top: 16px; }
.b2b-footer-company-name { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.b2b-footer-company-info .b2b-footer-contact-line a { color: #bbb; }
.b2b-footer-company-info .b2b-footer-contact-line a:hover { color: #fff; }
.b2b-footer-divider { border-top: 1px solid #fff; margin: 24px 0 16px; opacity: .15; }
.b2b-footer-copyright { text-align: center; font-size: 12px; color: #888; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .b2b-category-grid { grid-template-columns: repeat(3, 1fr); }
    .b2b-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .b2b-nav-toggle { display: block; }
    .b2b-site-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 2px solid var(--b2b-red); padding: 12px 20px;
    }
    .b2b-site-nav.b2b-nav-open { display: block; }
    .b2b-site-nav-list { flex-direction: column; gap: 14px; }
    .b2b-slider-wrap { aspect-ratio: 360 / 360; } /* mobile: gần vuông hơn, tránh ảnh quá dẹt */
    .b2b-category-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-grid-4 { grid-template-columns: 1fr 1fr; }
    .b2b-footer-cols { grid-template-columns: 1fr; }
    .b2b-section-title { font-size: 18px; }
}

@media (max-width: 480px) {
    .b2b-category-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-grid-4 { grid-template-columns: 1fr; }
    .b2b-brand-item, .b2b-product-mini-card, .b2b-news-mini-card { width: 160px; }
}

/* ============================================================
   KHÂU 5 — BREADCRUMB (dùng chung mọi trang)
   ============================================================ */
.b2b-breadcrumb { padding: 14px 0; font-size: 13px; color: var(--b2b-text-muted); }
.b2b-breadcrumb-inner { max-width: var(--b2b-max-width); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.b2b-breadcrumb-inner a { color: var(--b2b-text-muted); }
.b2b-breadcrumb-inner a:hover { color: var(--b2b-red); }
.b2b-breadcrumb-inner i { font-size: 12px; opacity: .6; }
.b2b-breadcrumb-inner span[aria-current] { color: var(--b2b-text); }
body.single .b2b-breadcrumb-inner { max-width: 1440px; } /* trang News dùng container 1440px, khác chuẩn 1280px chung */
.b2b-breadcrumb-1440 { max-width: 1440px; }

/* ============================================================
   KHÂU 5 — TRANG NEWS (single.php)
   Layout/cấu trúc port đúng theo bản LIVE maytienmini.vn (đã đối chiếu
   trực tiếp file theme live 28/07/2026 do Tan gửi — KHÔNG có sidebar danh
   mục, giống đúng cấu trúc single.php hiện có). Khác biệt duy nhất theo
   yêu cầu của Tan: bề rộng container 1440px (thay vì 1400px bên
   maytienmini.vn, và khác với chuẩn 1280px content của các trang khác
   trên mazakogroup.com) — dùng class riêng .b2b-container-wide, KHÔNG
   đổi .b2b-container chung toàn site.
   ============================================================ */
.b2b-container-wide { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

.b2b-news-single { padding: 24px 0 8px; }
.b2b-news-single-wrap {
    padding: 32px;
    /* KHÂU 5 — theo yêu cầu Tan (khác bản live maytienmini.vn dùng cột đọc hẹp
       860px): nội dung tràn đủ chiều rộng container 1440px, KHÔNG bó hẹp
       lại thành cột đọc riêng. */
    width: 100%;
}
.b2b-news-single-head { margin-bottom: 20px; }
.b2b-news-cat-badge-static { position: static; display: inline-block; margin-bottom: 12px; }
.b2b-news-single-title { font-size: 30px; font-weight: 900; color: var(--b2b-text); line-height: 1.3; margin-bottom: 14px; }
.b2b-news-single-meta { margin-bottom: 0; }
.b2b-news-single-thumb {
    /* KHÂU 5 — sửa theo Tan: ảnh hiển thị đúng kích thước thật, canh giữa —
       KHÔNG kéo giãn theo container 1440px nữa. */
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}
.b2b-news-single-thumb img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%; /* vẫn giới hạn không tràn ra ngoài container nếu ảnh gốc quá to */
    margin: 0 auto;
}

.b2b-news-single-content { font-size: 16px; line-height: 1.8; color: var(--b2b-text); }
.b2b-news-single-content p { margin: 0 0 16px; }
.b2b-news-single-content img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 20px auto; }
.b2b-news-single-content h2 { font-size: 22px; font-weight: 800; color: var(--b2b-text); margin: 28px 0 12px; }
.b2b-news-single-content h3 { font-size: 18px; font-weight: 700; color: var(--b2b-text); margin: 22px 0 10px; }
.b2b-news-single-content ul, .b2b-news-single-content ol { margin: 0 0 16px; padding-left: 22px; }
.b2b-news-single-content li { margin-bottom: 6px; }
.b2b-news-single-content a { color: var(--b2b-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.b2b-news-single-content a:hover { opacity: .8; }

.b2b-news-single-cta {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--b2b-border);
}
.b2b-btn-contact {
    background: var(--b2b-red); color: #fff; font-size: 16px; font-weight: 700;
    padding: 13px 26px; border-radius: 4px; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background .2s;
}
.b2b-btn-contact:hover { background: #a00000; }
.b2b-btn-contact i { font-size: 18px; }

.b2b-news-related { padding: 8px 0 40px; }

/* ---------- Grid tin liên quan (tái sử dụng cho bất kỳ grid news khác sau này) ---------- */
.b2b-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.b2b-news-card { background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px; overflow: hidden; transition: border-color .2s, transform .2s; display: flex; flex-direction: column; }
.b2b-news-card:hover { border-color: var(--b2b-red); transform: translateY(-3px); }
.b2b-news-card-img-link { display: block; }
.b2b-news-card-img { width: 100%; aspect-ratio: 4/3; background: var(--b2b-bg-alt); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.b2b-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.b2b-news-card:hover .b2b-news-card-img img { transform: scale(1.04); }
.b2b-news-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.b2b-news-img-placeholder i { font-size: 42px; color: #ddd; }
.b2b-news-cat-badge {
    position: absolute; top: 10px; left: 10px; background: var(--b2b-red); color: #fff;
    font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 2px;
    letter-spacing: .3px; z-index: 1; text-decoration: none; transition: background .2s;
}
.b2b-news-cat-badge:hover { background: #a00000; color: #fff; }
.b2b-news-card-body { padding: 13px; display: flex; flex-direction: column; flex: 1; }
.b2b-news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--b2b-text-muted); margin-bottom: 8px; }
.b2b-news-meta span { display: flex; align-items: center; gap: 4px; }
.b2b-news-meta i { font-size: 12px; }
.b2b-news-card-title { font-size: 14px; font-weight: 700; color: var(--b2b-text); line-height: 1.45; margin-bottom: 8px; flex: 1; }
.b2b-news-card-title a {
    color: var(--b2b-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-news-card-title a:hover { color: var(--b2b-red); }

/* ---------- Trang News tổng hợp (archive.php) — port đúng theo bản live
   maytienmini.vn, chỉ đổi container sang 1440px (.b2b-container-wide) ---------- */
.b2b-news-wrap { padding: 28px 0 48px; }
.b2b-news-head {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; margin-bottom: 24px; background: #fff; border: 1px solid var(--b2b-border);
    border-radius: 6px; padding: 16px 20px;
}
.b2b-news-h1 { font-size: 22px; font-weight: 900; color: var(--b2b-text); margin: 0 0 4px; }
.b2b-news-count { font-size: 13px; color: var(--b2b-text-muted); margin: 0; }
.b2b-news-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b2b-filter-btn {
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 4px;
    padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--b2b-text-muted);
    cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap;
}
.b2b-filter-btn:hover { background: #fff0f0; border-color: var(--b2b-red); color: var(--b2b-red); }
.b2b-filter-btn.active { background: var(--b2b-red); border-color: var(--b2b-red); color: #fff; }

.b2b-news-card-excerpt {
    font-size: 12px; color: var(--b2b-text-muted); line-height: 1.65; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b2b-news-card-foot {
    display: flex; align-items: center; justify-content: space-between; padding-top: 10px;
    border-top: 1px solid var(--b2b-bg-alt); margin-top: auto;
}
.b2b-news-read-more {
    font-size: 12px; font-weight: 700; color: var(--b2b-red); text-decoration: none;
    display: flex; align-items: center; gap: 4px; transition: gap .2s;
}
.b2b-news-read-more:hover { gap: 8px; }
.b2b-news-read-more i { font-size: 13px; }
.b2b-news-author { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--b2b-text-muted); }
.b2b-news-avatar {
    width: 22px; height: 22px; border-radius: 50%; background: var(--b2b-red); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0;
}

.b2b-news-pagination {
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px; padding: 13px 18px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.b2b-page-info { font-size: 13px; color: var(--b2b-text-muted); }
.b2b-page-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.b2b-page-btn {
    min-width: 34px; height: 34px; border: 1px solid var(--b2b-border); border-radius: 4px;
    background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--b2b-text-muted);
    display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 8px; transition: all .2s;
}
.b2b-page-btn:hover { border-color: var(--b2b-red); color: var(--b2b-red); }
.b2b-page-btn.active { background: var(--b2b-red); border-color: var(--b2b-red); color: #fff; }
.b2b-page-btn i { font-size: 15px; }

.b2b-empty-state { background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px; padding: 56px 24px; text-align: center; }
.b2b-empty-state > i { font-size: 56px; color: #ddd; display: block; margin-bottom: 16px; }
.b2b-empty-title { font-size: 18px; font-weight: 700; color: var(--b2b-text-muted); margin-bottom: 10px; }
.b2b-empty-sub { font-size: 14px; color: #aaa; margin-bottom: 24px; line-height: 1.6; }
.b2b-empty-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.b2b-back-top {
    position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px;
    background: var(--b2b-red); color: #fff; border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 999;
    box-shadow: 0 4px 12px rgba(192,0,0,0.3);
}
.b2b-back-top:hover { background: #a00000; }

@media (max-width: 900px) { .b2b-news-head { flex-direction: column; } }
@media (max-width: 768px) { .b2b-news-filters { gap: 6px; } .b2b-filter-btn { font-size: 12px; padding: 6px 12px; } }

/* ============================================================
   KHÂU 5 — TRANG LIÊN HỆ (page-contact.php)
   Port đúng theo bản LIVE maytienmini.vn (đối chiếu trực tiếp file
   theme live 28/07/2026 do Tan gửi). Khác biệt duy nhất: container
   1440px (.b2b-container-wide) thay vì 1400px bên live — theo yêu cầu
   Tan, đồng bộ nhóm trang News/danh mục sản phẩm đã làm trước đó.
   Backend (AJAX b2b_contact_submit) đã có sẵn 100% trong functions.php,
   không cần sửa gì ở đây — chỉ port giao diện.
   ============================================================ */
.b2b-contact-page { padding: 28px 0 48px; }

.b2b-contact-hero {
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 8px;
    padding: 32px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px; align-items: center;
}
.b2b-contact-hero-tag {
    display: inline-flex; align-items: center; gap: 7px; background: #fff0f0; color: var(--b2b-red);
    font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 3px; margin-bottom: 14px;
}
.b2b-contact-hero-tag i { font-size: 15px; }
.b2b-contact-hero-title { font-size: 32px; font-weight: 900; color: var(--b2b-text); margin-bottom: 10px; }
.b2b-contact-hero-sub { font-size: 15px; color: var(--b2b-text-muted); line-height: 1.7; margin: 0; }

.b2b-contact-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b2b-contact-info-card {
    display: flex; align-items: center; gap: 12px; background: var(--b2b-bg-alt);
    border: 1px solid var(--b2b-border); border-radius: 6px; padding: 14px;
    text-decoration: none; transition: all .2s;
}
.b2b-contact-info-card:hover { border-color: var(--b2b-red); background: #fff8f8; }
.b2b-cic-icon {
    width: 40px; height: 40px; border-radius: 8px; background: #fff0f0;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.b2b-cic-icon i { font-size: 20px; color: var(--b2b-red); }
.b2b-cic-body { display: flex; flex-direction: column; gap: 2px; }
.b2b-cic-label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .5px; }
.b2b-cic-body strong { font-size: 13px; color: var(--b2b-text); font-weight: 700; }

.b2b-contact-main-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }

.b2b-contact-form-wrap { background: #fff; border: 1px solid var(--b2b-border); border-radius: 8px; padding: 28px; }
.b2b-contact-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.b2b-contact-form-head h2 { font-size: 20px; font-weight: 900; color: var(--b2b-text); margin: 0; }

.b2b-contact-success {
    background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 6px; padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px;
}
.b2b-contact-success i { font-size: 26px; color: #2e7d32; flex-shrink: 0; }
.b2b-contact-success strong { display: block; color: #1b5e20; margin-bottom: 3px; }
.b2b-contact-success p { color: #2e7d32; font-size: 14px; margin: 0; }
.b2b-contact-error {
    background: #ffebee; border: 1px solid #ef9a9a; border-radius: 6px; padding: 14px 18px;
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #b71c1c; font-size: 14px;
}
.b2b-contact-error i { font-size: 20px; flex-shrink: 0; }

.b2b-req-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.b2b-req-type-btn { cursor: pointer; }
.b2b-req-type-btn input { display: none; }
.b2b-req-type-btn span {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px;
    background: var(--b2b-bg-alt); border: 1px solid var(--b2b-border); border-radius: 6px;
    font-size: 12px; font-weight: 600; color: #555; text-align: center; transition: all .2s; line-height: 1.4;
}
.b2b-req-type-btn span i { font-size: 22px; color: #bbb; transition: color .2s; }
.b2b-req-type-btn:hover span { border-color: var(--b2b-red); background: #fff8f8; color: var(--b2b-red); }
.b2b-req-type-btn:hover span i { color: var(--b2b-red); }
.b2b-req-type-btn span.selected { border-color: var(--b2b-red); background: var(--b2b-red); color: #fff; }
.b2b-req-type-btn span.selected i { color: #fff; }

.b2b-cf-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.b2b-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b2b-cf-label { font-size: 14px; font-weight: 700; color: var(--b2b-text); }
.b2b-cf-req { color: var(--b2b-red); }
.b2b-cf-group input, .b2b-cf-group textarea {
    border: 1px solid var(--b2b-border); border-radius: 4px; padding: 11px 14px; font-size: 15px;
    font-family: 'Roboto', sans-serif; font-weight: 600; outline: none; transition: border-color .2s;
    width: 100%; background: #fff; color: var(--b2b-text);
}
.b2b-cf-group input:focus, .b2b-cf-group textarea:focus { border-color: var(--b2b-red); }
.b2b-cf-group textarea { min-height: 120px; resize: vertical; }
.b2b-cf-error { font-size: 12px; color: #f44336; min-height: 16px; }

.b2b-contact-submit {
    width: 100%; background: var(--b2b-red); color: #fff; border: none; border-radius: 4px; padding: 15px;
    font-size: 17px; font-weight: 700; font-family: 'Roboto', sans-serif; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px; transition: background .2s; margin-bottom: 12px;
}
.b2b-contact-submit:hover { background: #a00000; }
.b2b-contact-submit:disabled { background: #888; cursor: not-allowed; }
.b2b-contact-submit i { font-size: 19px; }
.b2b-cs-loading { display: inline-flex; align-items: center; gap: 8px; }
.b2b-contact-note { font-size: 13px; color: #888; display: flex; align-items: center; gap: 6px; }
.b2b-contact-note i { font-size: 16px; color: #4caf50; }

.b2b-contact-right { background: #fff; border: 1px solid var(--b2b-border); border-radius: 8px; padding: 28px; }
.b2b-contact-map-embed { border-radius: 6px; overflow: hidden; border: 1px solid var(--b2b-border); margin-bottom: 20px; }
.b2b-contact-detail-info { display: flex; flex-direction: column; gap: 12px; }
.b2b-cdi-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--b2b-bg-alt);
    border-radius: 6px; border: 1px solid #f0f0f0;
}
.b2b-cdi-item > i { font-size: 20px; color: var(--b2b-red); flex-shrink: 0; margin-top: 2px; }
.b2b-cdi-item strong { display: block; font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.b2b-cdi-item span, .b2b-cdi-item a { font-size: 14px; color: var(--b2b-text); font-weight: 600; text-decoration: none; line-height: 1.5; }
.b2b-cdi-item a:hover { color: var(--b2b-red); }

@media (max-width: 1024px) {
    .b2b-contact-hero { grid-template-columns: 1fr; }
    .b2b-contact-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .b2b-contact-hero { padding: 20px; }
    .b2b-contact-hero-cards { grid-template-columns: 1fr; }
    .b2b-req-type-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-cf-row { grid-template-columns: 1fr; }
    .b2b-contact-hero-title { font-size: 24px; }
}
@media (max-width: 480px) { .b2b-req-type-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   KHÂU 5 — TRANG GIỚI THIỆU (page-about.php)
   Port đúng theo bản LIVE maytienmini.vn, đã loại bỏ toàn bộ CSS
   .b2b-cert-* (Section "Chứng chỉ & Công nhận" đã bỏ theo yêu cầu Tan).
   Container 1440px (.b2b-container-wide) thay vì 1400px bên live.
   ============================================================ */
.b2b-about-container { padding: 0 20px 48px; display: flex; flex-direction: column; gap: 0; }

.b2b-about-hero { background: #1c1c1c; border-left: 5px solid var(--b2b-red); width: 100%; padding: 56px 0; }
.b2b-about-hero-rounded { border-radius: 8px; margin-top: 20px; overflow: hidden; }
.b2b-about-hero-inner { padding: 0 20px; }
.b2b-about-hero-content { max-width: 760px; }
.b2b-about-hero-tag {
    display: inline-flex; align-items: center; gap: 7px; background: var(--b2b-red); color: #fff;
    font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 3px; margin-bottom: 18px; letter-spacing: .5px;
}
.b2b-about-hero-tag i { font-size: 16px; }
.b2b-about-hero-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 14px; }
.b2b-about-hero-sub { font-size: 18px; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 24px; max-width: 640px; }
.b2b-about-hero-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.b2b-about-hero-tags span {
    display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); color: #ccc;
    font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.15);
}
.b2b-about-hero-tags span i { font-size: 15px; }

.b2b-about-section { background: #fff; border-radius: 8px; padding: 36px; margin-top: 20px; }
.b2b-about-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.b2b-about-sec-head h2 { font-size: 22px; font-weight: 900; color: var(--b2b-text); margin: 0; }
.b2b-about-sec-desc { font-size: 16px; color: var(--b2b-text-muted); line-height: 1.7; margin-bottom: 24px; }
.b2b-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.b2b-about-stats-section { background: #fff; padding: 28px 36px; }
.b2b-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.b2b-stat-card { background: #fff8f8; border: 1px solid #ffe0e0; border-radius: 8px; padding: 24px 16px; text-align: center; position: relative; overflow: hidden; }
.b2b-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--b2b-red); }
.b2b-stat-icon { font-size: 28px; color: var(--b2b-red); margin-bottom: 10px; }
.b2b-stat-icon i { font-size: 28px; }
.b2b-stat-num { font-size: 40px; font-weight: 900; color: var(--b2b-red); line-height: 1; display: inline; }
.b2b-stat-unit { font-size: 28px; font-weight: 900; color: var(--b2b-red); display: inline; }
.b2b-stat-label { font-size: 14px; color: #888; margin-top: 8px; font-weight: 600; }

.b2b-about-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.b2b-about-intro p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 16px; }

.b2b-about-values { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.b2b-value-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fff8f8; border-left: 3px solid var(--b2b-red); border-radius: 0 6px 6px 0; }
.b2b-value-item > i { font-size: 20px; color: var(--b2b-red); flex-shrink: 0; margin-top: 2px; }
.b2b-value-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--b2b-text); margin-bottom: 3px; }
.b2b-value-item span { font-size: 13px; color: #666; line-height: 1.5; }

.b2b-timeline { position: relative; padding-left: 16px; }
.b2b-timeline::before { content: ''; position: absolute; left: 52px; top: 0; bottom: 0; width: 2px; background: #eee; }
.b2b-tl-item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; position: relative; }
.b2b-tl-year { font-size: 13px; font-weight: 900; color: var(--b2b-red); min-width: 40px; padding-top: 3px; flex-shrink: 0; }
.b2b-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--b2b-red); flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1; }
.b2b-tl-current .b2b-tl-dot { background: var(--b2b-red); width: 16px; height: 16px; }
.b2b-tl-content strong { display: block; font-size: 14px; font-weight: 700; color: var(--b2b-text); margin-bottom: 4px; }
.b2b-tl-content p { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }

.b2b-about-mission { background: #111; }
.b2b-about-mission-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
.b2b-mission-card { padding: 24px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.b2b-mission-card > i { font-size: 32px; color: var(--b2b-red); margin-bottom: 14px; display: block; }
.b2b-mission-card h2, .b2b-mission-card h3 { color: #fff; font-weight: 900; margin-bottom: 12px; }
.b2b-mission-card h2 { font-size: 20px; }
.b2b-mission-card h3 { font-size: 16px; }
.b2b-mission-card blockquote { font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.8; font-style: italic; border-left: 3px solid var(--b2b-red); padding-left: 16px; margin: 0; }
.b2b-mission-card p { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }

.b2b-partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.b2b-partner-card { background: #fff; border: 1px solid var(--b2b-border); border-radius: 8px; padding: 20px 16px; text-align: center; transition: all .2s; position: relative; }
.b2b-partner-card:hover { border-color: var(--b2b-red); transform: translateY(-3px); }
.b2b-partner-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff0f0; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.b2b-partner-icon i { font-size: 26px; color: var(--b2b-red); }
.b2b-partner-name { font-size: 16px; font-weight: 900; color: var(--b2b-text); margin-bottom: 5px; }
.b2b-partner-country { font-size: 12px; color: #888; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.b2b-partner-country i { font-size: 12px; color: var(--b2b-red); }
.b2b-partner-desc { font-size: 12px; color: #666; line-height: 1.5; margin-bottom: 10px; }
.b2b-partner-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; background: #fff0f0; color: var(--b2b-red); padding: 3px 10px; border-radius: 3px; }
.b2b-partner-badge i { font-size: 12px; }

.b2b-about-services { background: #f7f7f7; }
.b2b-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b2b-service-card { background: #fff; border: 1px solid var(--b2b-border); border-radius: 8px; padding: 24px; transition: all .2s; }
.b2b-service-card:hover { border-color: var(--b2b-red); transform: translateY(-2px); }
.b2b-service-icon { width: 48px; height: 48px; border-radius: 8px; background: #fff0f0; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.b2b-service-icon i { font-size: 24px; color: var(--b2b-red); }
.b2b-service-card h3 { font-size: 15px; font-weight: 700; color: var(--b2b-text); margin-bottom: 8px; }
.b2b-service-card p { font-size: 13px; color: #666; line-height: 1.7; margin: 0; }

.b2b-about-contact-section { background: #fff; }
.b2b-about-contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: stretch; }
.b2b-contact-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.b2b-contact-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fafafa; border-radius: 6px; border: 1px solid #f0f0f0; }
.b2b-contact-icon { width: 36px; height: 36px; border-radius: 6px; background: #fff0f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b2b-contact-icon i { font-size: 18px; color: var(--b2b-red); }
.b2b-contact-item strong { display: block; font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.b2b-contact-item span, .b2b-contact-item a { font-size: 14px; color: var(--b2b-text); text-decoration: none; line-height: 1.5; }
.b2b-contact-item a:hover { color: var(--b2b-red); }
.b2b-about-social { display: flex; gap: 10px; flex-wrap: wrap; }
.b2b-social-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 4px; font-size: 14px; font-weight: 700; text-decoration: none; transition: opacity .2s; }
.b2b-social-link:hover { opacity: .85; }
.b2b-social-link i { font-size: 18px; }
.b2b-social-fb { background: #1877F2; color: #fff; }
.b2b-social-yt { background: var(--b2b-red); color: #fff; }
.b2b-map-embed { border-radius: 6px; overflow: hidden; border: 1px solid var(--b2b-border); flex: 1; min-height: 280px; }
.b2b-about-map { display: flex; flex-direction: column; height: 100%; }

@media (max-width: 1024px) {
    .b2b-about-stats { grid-template-columns: repeat(2, 1fr); }
    .b2b-about-2col { grid-template-columns: 1fr; }
    .b2b-about-mission-grid { grid-template-columns: 1fr 1fr; }
    .b2b-partner-grid { grid-template-columns: repeat(3, 1fr); }
    .b2b-services-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-about-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .b2b-about-hero { padding: 36px 0; }
    .b2b-about-hero-title { font-size: 28px; }
    .b2b-about-section { padding: 24px; }
    .b2b-about-stats { grid-template-columns: repeat(2, 1fr); }
    .b2b-about-mission-grid { grid-template-columns: 1fr; }
    .b2b-partner-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-services-grid { grid-template-columns: 1fr; }
    .b2b-about-cta { padding: 32px 20px; }
    .b2b-about-cta h2 { font-size: 22px; }
}
@media (max-width: 480px) {
    .b2b-about-stats { grid-template-columns: 1fr 1fr; }
    .b2b-partner-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   KHÂU 5 — TRANG DANH MỤC SẢN PHẨM (taxonomy-product_cat.php)
   Port đúng theo bản LIVE maytienmini.vn (đối chiếu trực tiếp file
   theme live 28/07/2026 do Tan gửi) — sidebar 350px + menu danh mục 2
   cấp + grid sản phẩm 4/hàng (tái dùng .b2b-product-grid/.b2b-card-* đã
   có sẵn từ M7 trang chủ). Container giữ chuẩn 1280px (.b2b-container)
   — KHÔNG đổi 1440px như nhóm trang News vì Tan chưa yêu cầu cho trang
   này (có thể đổi sau nếu cần).
   ============================================================ */
.b2b-cat-wrap { padding: 28px 0 48px; }
.b2b-cat-layout { display: grid; grid-template-columns: 350px 1fr; gap: 24px; align-items: start; }

/* Sidebar */
.b2b-cat-sidebar { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 0; }
.b2b-cat-search-wrap { background: #fff; border: 1px solid var(--b2b-border); border-bottom: none; border-radius: 6px 6px 0 0; padding: 12px; }
.b2b-cat-search-form { display: flex; align-items: center; background: var(--b2b-bg-alt); border: 1px solid var(--b2b-border); border-radius: 4px; overflow: hidden; }
.b2b-cat-search-form input[type="search"] { background: transparent; border: none; outline: none; font-size: 13px; padding: 8px 10px; flex: 1; color: var(--b2b-text); min-width: 0; }
.b2b-cat-search-form button { background: var(--b2b-red); border: none; padding: 8px 11px; color: #fff; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; transition: background .2s; }
.b2b-cat-search-form button:hover { background: #a00000; }
.b2b-cat-search-form button i { font-size: 14px; }

.b2b-cat-menu { background: #fff; border: 1px solid var(--b2b-border); border-radius: 0 0 6px 6px; overflow: hidden; }
.b2b-cat-menu-header { background: var(--b2b-red); padding: 11px 14px; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.b2b-cat-menu-header i { font-size: 16px; }

.b2b-cat-l1-item { border-bottom: 1px solid var(--b2b-border); }
.b2b-cat-l1-item:last-child { border-bottom: none; }
.b2b-cat-l1-link {
    display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
    font-size: 13px; font-weight: 700; color: var(--b2b-text); transition: all .2s; border-left: 3px solid transparent;
}
.b2b-cat-l1-link:hover { background: #fff5f5; color: var(--b2b-red); border-left-color: var(--b2b-red); }
.b2b-cat-l1-link.active { background: var(--b2b-red); color: #fff; border-left-color: var(--b2b-red); }
.b2b-cat-l1-left { display: flex; align-items: center; gap: 8px; }
.b2b-cat-l1-left i { font-size: 15px; color: var(--b2b-red); }
.b2b-cat-l1-link.active .b2b-cat-l1-left i { color: #fff; }
.b2b-cat-l1-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.b2b-cat-count { font-size: 11px; background: var(--b2b-bg-alt); color: var(--b2b-text-muted); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.b2b-cat-l1-link.active .b2b-cat-count { background: rgba(255,255,255,0.25); color: #fff; }
.b2b-cat-chevron { font-size: 13px; color: #aaa; transition: transform .25s; }
.b2b-cat-l1-item.is-open .b2b-cat-chevron { transform: rotate(90deg); }
.b2b-cat-l1-link.active .b2b-cat-chevron { color: rgba(255,255,255,0.7); }

.b2b-cat-l2-list { background: var(--b2b-bg-alt); border-top: 1px solid var(--b2b-bg-alt); max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.b2b-cat-l2-list.is-open { max-height: 600px; }
.b2b-cat-l2-link {
    display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 8px 32px;
    font-size: 12px; font-weight: 600; color: var(--b2b-text-muted); border-bottom: 1px solid var(--b2b-bg-alt);
    border-left: 3px solid transparent; transition: all .2s;
}
.b2b-cat-l2-link:last-child { border-bottom: none; }
.b2b-cat-l2-link:hover { background: #fff0f0; color: var(--b2b-red); padding-left: 38px; border-left-color: var(--b2b-red); }
.b2b-cat-l2-link.active { background: #fff0f0; color: var(--b2b-red); font-weight: 700; border-left-color: var(--b2b-red); padding-left: 29px; }
.b2b-cat-l2-left { display: flex; align-items: center; gap: 6px; }
.b2b-cat-l2-left i { font-size: 12px; color: #bbb; }
.b2b-cat-l2-link.active .b2b-cat-l2-left i { color: var(--b2b-red); }
.b2b-cat-count-sm { font-size: 10px; background: var(--b2b-bg-alt); color: #aaa; padding: 1px 6px; border-radius: 8px; flex-shrink: 0; }
.b2b-cat-l2-link.active .b2b-cat-count-sm { background: #ffe8e8; color: var(--b2b-red); }

/* Content header + grid */
.b2b-cat-main { display: flex; flex-direction: column; gap: 18px; }
.b2b-cat-content-head {
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.b2b-cat-content-title-wrap { display: flex; align-items: center; gap: 12px; }
.b2b-cat-h1 { font-size: 20px; font-weight: 900; color: var(--b2b-text); margin: 0 0 3px; }
.b2b-cat-count-text { font-size: 13px; color: var(--b2b-text-muted); margin: 0; }
.b2b-cat-sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--b2b-text-muted); flex-shrink: 0; }
.b2b-sort-select {
    border: 1px solid var(--b2b-border); border-radius: 4px; padding: 6px 10px; font-size: 13px;
    color: var(--b2b-text); background: #fff; cursor: pointer; outline: none; transition: border-color .2s;
}
.b2b-sort-select:focus { border-color: var(--b2b-red); }

/* Card riêng trang danh mục (tái dùng .b2b-product-card/.b2b-card-* của M7, chỉ thêm hint tab mới) */
.b2b-cat-card { position: relative; }
.b2b-newtab-hint {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff;
    font-size: 10px; padding: 3px 7px; border-radius: 3px; display: none; align-items: center; gap: 3px; pointer-events: none;
}
.b2b-cat-card:hover .b2b-newtab-hint { display: flex; }

.b2b-cat-pagination, .b2b-news-pagination {
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px; padding: 13px 18px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

@media (max-width: 1100px) { .b2b-cat-layout { grid-template-columns: 280px 1fr; } }
@media (max-width: 900px) { .b2b-cat-layout { grid-template-columns: 240px 1fr; } }
@media (max-width: 768px) {
    .b2b-cat-layout { grid-template-columns: 1fr; }
    .b2b-cat-sidebar { position: static; }
    .b2b-cat-l2-list { max-height: none; }
    .b2b-cat-l2-list.is-open { max-height: 600px; }
    .b2b-cat-sort-wrap > span { display: none; }
}

@media (max-width: 1100px) { .b2b-news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .b2b-news-single-wrap { padding: 20px; }
    .b2b-news-single-title { font-size: 22px; }
    .b2b-news-single-content { font-size: 15px; }
    .b2b-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .b2b-news-grid { grid-template-columns: 1fr; } }

/* ============================================================
   KHÂU 5 — CHIA SẼ MẠNG XÃ HỘI (Facebook / X / Zalo)
   Dùng chung cho trang sản phẩm (single-product.php) và trang News
   (single.php) — đặt trong main.css (không đặt ở quote-cart.css) vì
   quote-cart.css chỉ load ở trang sản phẩm/giỏ báo giá, trong khi trang
   News cần cùng style này mà không load file đó.
   ============================================================ */
.b2b-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.b2b-share-label { font-size: 13px; color: var(--b2b-text-muted); margin-right: 2px; }
.b2b-share-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--b2b-border);
    background: #fff;
    color: var(--b2b-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.b2b-share-pill i { font-size: 15px; }
.b2b-share-fb { border-color: #1877F2; color: #1877F2; }
.b2b-share-fb:hover { background: #1877F2; color: #fff; }
.b2b-share-x { border-color: #000; color: #000; }
.b2b-share-x:hover { background: #000; color: #fff; }
.b2b-share-zalo { border-color: #0068FF; color: #0068FF; }
.b2b-share-zalo:hover { background: #0068FF; color: #fff; }
.b2b-share-viewall:hover { border-color: var(--b2b-red); color: var(--b2b-red); background: #fff; }

.b2b-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(10px);
    background: var(--b2b-text);
    color: #fff;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
    max-width: 90vw;
    text-align: center;
}
.b2b-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   KHÂU 5 — LIGHTBOX ẢNH SẢN PHẨM
   Bấm ảnh chính ở hero trang sản phẩm để phóng to xem toàn màn hình.
   Overlay + phóng to dùng thuần CSS/JS, không thư viện ngoài.
   ============================================================ */
.b2b-product-main-img { cursor: zoom-in; }
.b2b-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.b2b-lightbox-overlay.b2b-lightbox-open { display: flex; }
.b2b-lightbox-img-wrap { max-width: 1100px; max-height: 90vh; width: 100%; text-align: center; }
.b2b-lightbox-img-wrap img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    margin: 0 auto;
    display: block;
}
.b2b-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.b2b-lightbox-close:hover { background: rgba(255,255,255,0.3); }
.b2b-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.b2b-lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.b2b-lightbox-prev { left: 20px; }
.b2b-lightbox-next { right: 20px; }
.b2b-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    background: rgba(0,0,0,0.4);
    padding: 4px 12px;
    border-radius: 999px;
}
@media (max-width: 600px) {
    .b2b-lightbox-nav { width: 36px; height: 36px; font-size: 16px; }
    .b2b-lightbox-close { width: 36px; height: 36px; font-size: 18px; top: 12px; right: 12px; }
}

/* ============================================================
   KHÂU 5 — FAQ (accordion) — chuyển từ quote-cart.css sang đây để
   dùng chung cho trang sản phẩm VÀ Forum (single-forum.php không load
   quote-cart.css). JS tiến hóa ở main.js, hàm initFaqAccordion() đã
   chọn selector chung '.b2b-faq-content .faq-question' nên tự động
   hoạt động trên mọi trang có khu vực này, không cần sửa thêm.
   ============================================================ */
.b2b-faq-content .faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 14.5px; font-weight: 600; color: var(--b2b-text);
    padding: 14px 4px; margin: 0; border-bottom: 1px solid var(--b2b-border);
    cursor: pointer; list-style: none;
}
.b2b-faq-toggle-icon { font-size: 16px; color: var(--b2b-text-muted); transition: transform .15s ease; flex-shrink: 0; }
.b2b-faq-content .faq-question.b2b-faq-open .b2b-faq-toggle-icon { transform: rotate(180deg); }
.b2b-faq-content .faq-answer {
    font-size: 14px; color: var(--b2b-text-muted); line-height: 1.7;
    padding: 0 4px 14px; display: none;
}
.b2b-faq-content .faq-answer.b2b-faq-open { display: block; }

/* ============================================================
   KHÂU 5 — TRANG THƯƠNG HIỆU (archive-brand.php / single-brand.php)
   Tái dụng 100% .b2b-news-* đã có (giống Forum) — chỉ thêm class này
   để đổi grid từ 4 cột (News/Forum) sang 6 cột (theo yêu cầu Tan
   08/2026: "6 bài/dòng, 30 bài/trang khi liệt kê Thương hiệu").
   ============================================================ */
.b2b-brand-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .b2b-brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .b2b-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .b2b-brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   TRANG 404 (404.php) — 27/08/2026
   Ly do: theme truoc day KHONG co 404.php, moi URL chet roi ve
   index.php chi hien 1 dong "Khong co noi dung" -> khach thoat ngay.
   Tai dung bien mau + quy uoc the (border 1px #eee, radius 6px,
   hover doi vien sang do + nhac len 3px) giong .b2b-news-card de
   dong bo voi phan con lai cua site. KHONG sua dong CSS nao co san.
   ============================================================ */
.b2b-404-wrap { padding: 32px 0 56px; }

/* ---------- Khoi xin loi ---------- */
.b2b-404-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.b2b-404-icon { font-size: 56px; color: var(--b2b-red); display: block; margin-bottom: 14px; }
.b2b-404-title { font-size: 26px; font-weight: 700; color: var(--b2b-text); margin-bottom: 12px; line-height: 1.35; }
.b2b-404-sub { font-size: 15px; color: var(--b2b-text-muted); line-height: 1.7; }

/* ---------- Goi y san pham theo ma model doc tu URL ---------- */
.b2b-404-suggest { max-width: 720px; margin: 0 auto 32px; }
.b2b-404-suggest-label {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 15px; color: var(--b2b-text); margin-bottom: 14px;
}
.b2b-404-suggest-label i { font-size: 20px; color: var(--b2b-red); }
.b2b-404-suggest-label strong { color: var(--b2b-red); }
.b2b-404-suggest-card {
    display: flex; gap: 18px; align-items: center;
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px;
    padding: 16px; text-decoration: none;
    transition: border-color .2s, transform .2s;
}
.b2b-404-suggest-card:hover { border-color: var(--b2b-red); transform: translateY(-3px); }
.b2b-404-suggest-img {
    width: 150px; flex-shrink: 0; aspect-ratio: 4/3; background: var(--b2b-bg-alt);
    border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.b2b-404-suggest-img img { width: 100%; height: 100%; object-fit: cover; }
.b2b-404-suggest-body { flex: 1; min-width: 0; }
.b2b-404-suggest-name { font-size: 15px; font-weight: 700; color: var(--b2b-text); line-height: 1.45; margin-bottom: 6px; }
.b2b-404-suggest-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 13px; font-weight: 700; color: var(--b2b-red);
}
.b2b-404-suggest-cta i { font-size: 15px; transition: transform .2s; }
.b2b-404-suggest-card:hover .b2b-404-suggest-cta i { transform: translateX(3px); }

/* ---------- O tim kiem ---------- */
.b2b-404-search { max-width: 560px; margin: 0 auto 36px; }
.b2b-404-search-label {
    display: block; text-align: center; font-size: 14px;
    color: var(--b2b-text-muted); margin-bottom: 10px;
}
.b2b-404-search-form {
    display: flex; align-items: center; background: var(--b2b-bg-alt);
    border: 1px solid var(--b2b-border); border-radius: 4px; overflow: hidden;
}
.b2b-404-search-form input[type="search"] {
    background: transparent; border: none; outline: none; flex: 1; min-width: 0;
    font-size: 15px; padding: 13px 14px; color: var(--b2b-text);
}
.b2b-404-search-form button {
    background: var(--b2b-red); border: none; cursor: pointer; color: #fff;
    display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-size: 15px; font-weight: 700; padding: 13px 20px; transition: background .2s;
}
.b2b-404-search-form button:hover { background: #a00000; }
.b2b-404-search-form button i { font-size: 17px; }

/* ---------- Loi tat theo y dinh (4 the) ---------- */
.b2b-404-links {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 1000px; margin: 0 auto 32px;
}
.b2b-404-link-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--b2b-border); border-radius: 6px;
    padding: 24px 16px; text-decoration: none;
    transition: border-color .2s, transform .2s;
}
.b2b-404-link-card:hover { border-color: var(--b2b-red); transform: translateY(-3px); }
.b2b-404-link-card > i { font-size: 32px; color: var(--b2b-red); margin-bottom: 12px; }
.b2b-404-link-title { font-size: 15px; font-weight: 700; color: var(--b2b-text); margin-bottom: 5px; }
.b2b-404-link-sub { font-size: 12px; color: var(--b2b-text-muted); line-height: 1.55; }

/* ---------- Hotline ---------- */
.b2b-404-hotline {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; padding-top: 8px;
}
.b2b-404-hotline-label { font-size: 14px; color: var(--b2b-text-muted); }
.b2b-404-hotline-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--b2b-red); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; padding: 11px 22px; border-radius: 4px;
    transition: background .2s;
}
.b2b-404-hotline-btn:hover { background: #a00000; }
.b2b-404-hotline-btn i { font-size: 17px; }

/* ---------- Responsive (bam theo breakpoint da dung o tren) ---------- */
@media (max-width: 900px) {
    .b2b-404-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .b2b-404-wrap { padding: 24px 0 40px; }
    .b2b-404-title { font-size: 21px; }
    .b2b-404-sub { font-size: 14px; }
    .b2b-404-suggest-card { flex-direction: column; align-items: stretch; }
    .b2b-404-suggest-img { width: 100%; }
    .b2b-404-search-form button span { display: none; }
    .b2b-404-search-form button { padding: 13px 16px; }
    .b2b-404-hotline { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
    .b2b-404-links { grid-template-columns: 1fr; }
}

/* ============================================================
   M2b — KHOI GIOI THIEU + H1 TRANG CHU (front-page.php) — 27/08/2026
   Ly do: trang chu truoc day KHONG co the <h1> nao (hero la 7 anh
   thuan khong chu, moi tieu de muc deu la <h2>). Khoi nay dat giua
   hero va dai logo thuong hieu — vi tri dau tien co noi dung doc duoc.
   Thiet ke co y GON: nen trang, can giua, khong anh/nut/vien de khong
   pha bo cuc hien co. Noi dung nhap trong wp-admin, de trong thi khoi
   nay khong render (xem dieu kien PHP trong front-page.php).
   ============================================================ */
.b2b-home-intro { padding: 36px 0 8px; text-align: center; }
.b2b-home-intro-title {
    font-size: 27px; font-weight: 700; color: var(--b2b-text);
    line-height: 1.35; max-width: 900px; margin: 0 auto 14px;
}
.b2b-home-intro-text {
    font-size: 15px; color: var(--b2b-text-muted); line-height: 1.75;
    max-width: 860px; margin: 0 auto;
}

@media (max-width: 900px) {
    .b2b-home-intro { padding: 28px 0 4px; }
    .b2b-home-intro-title { font-size: 23px; }
}
@media (max-width: 600px) {
    .b2b-home-intro { padding: 22px 0 2px; }
    .b2b-home-intro-title { font-size: 20px; margin-bottom: 10px; }
    .b2b-home-intro-text { font-size: 14px; line-height: 1.7; }
}

/* ============================================================
   D6 — NOI DUNG SEO TRANG DANH MUC — 27/08/2026
   Phuong an 3 (Tan chot): doan ngan TREN luoi + noi dung dai DUOI luoi.
   Dung chung cho ca danh muc san pham (taxonomy-product_cat.php) va
   danh muc bai viet (archive.php).
   Noi dung dai cho phep HTML nen phai style san h2/h3/p/ul/table —
   khong the biet truoc AI/Tan se dung the nao.
   ============================================================ */
.b2b-cat-intro {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--b2b-bg-alt);
    border-left: 3px solid var(--b2b-red);
    border-radius: 0 4px 4px 0;
}
.b2b-cat-intro p {
    margin: 0; font-size: 15px; line-height: 1.75; color: var(--b2b-text);
}

.b2b-cat-content {
    margin: 36px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--b2b-border);
    font-size: 15px; line-height: 1.8; color: var(--b2b-text);
}
.b2b-cat-content h2 {
    font-size: 21px; font-weight: 700; color: var(--b2b-text);
    margin: 26px 0 12px; line-height: 1.4;
}
.b2b-cat-content h2:first-child { margin-top: 0; }
.b2b-cat-content h3 {
    font-size: 17px; font-weight: 700; color: var(--b2b-text);
    margin: 20px 0 10px; line-height: 1.45;
}
.b2b-cat-content p { margin: 0 0 14px; }
.b2b-cat-content ul,
.b2b-cat-content ol { margin: 0 0 14px; padding-left: 22px; }
.b2b-cat-content li { margin-bottom: 7px; }
.b2b-cat-content a { color: var(--b2b-red); text-decoration: underline; }
.b2b-cat-content strong { font-weight: 700; }
.b2b-cat-content table {
    width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px;
}
.b2b-cat-content th,
.b2b-cat-content td {
    border: 1px solid var(--b2b-border); padding: 9px 12px; text-align: left;
}
.b2b-cat-content th { background: var(--b2b-bg-alt); font-weight: 700; }

@media (max-width: 600px) {
    .b2b-cat-intro { padding: 12px 14px; margin-bottom: 16px; }
    .b2b-cat-intro p { font-size: 14px; }
    .b2b-cat-content { margin-top: 28px; padding-top: 20px; font-size: 14px; }
    .b2b-cat-content h2 { font-size: 18px; }
    .b2b-cat-content h3 { font-size: 16px; }
    .b2b-cat-content table { display: block; overflow-x: auto; }
}

/* ============================================================
   v2.3 (21/10/2026, TAN MAZAKO duyệt 11:24) — TRANG CHỦ + LIÊN HỆ
   Toàn bộ CSS của v2.3 nằm trong khối này (dễ xem lại / gỡ):
   A. Thanh liên hệ trên cùng (header.php)
   B. Thanh 3 nút dính đáy điện thoại < 768px (footer.php) + đẩy bong bóng chat
   C. Chân trang: số / email / Zalo bấm được
   D. M2 banner: điện thoại hiện ĐỦ ảnh, đúng tỷ lệ
   E. M4 danh mục: hàng cuối thiếu ô tự canh giữa
   F. Khối "Vì sao xưởng cơ khí chọn MAZAKO" (nền tối)
   G. Khối "Gửi yêu cầu báo giá" #bao-gia
   ============================================================ */
:root {
    --b2b-dark: #161616;
    --b2b-mbar-h: 60px; /* chiều cao thanh đáy điện thoại (không tính vùng an toàn iPhone) */
}

/* ---------- A. Thanh liên hệ trên cùng ---------- */
.b2b-topbar { background: var(--b2b-dark); color: #d9d9d9; font-size: 13px; line-height: 1.4; }
.b2b-topbar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 40px; padding-top: 5px; padding-bottom: 5px;
}
.b2b-topbar-text { margin: 0; }
.b2b-topbar-text strong { color: #fff; font-weight: 700; letter-spacing: .3px; }
.b2b-topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.b2b-topbar-phone { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.b2b-topbar-phone a { color: #fff; font-weight: 700; }
.b2b-topbar-phone a:hover { text-decoration: underline; }
.b2b-topbar-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    border-radius: 4px; font-weight: 700; color: #fff; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.b2b-topbar-zalo { border: 1px solid rgba(255,255,255,.5); }
.b2b-topbar-zalo:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.b2b-topbar-quote { background: var(--b2b-red); border: 1px solid var(--b2b-red); }
.b2b-topbar-quote:hover { background: #a00000; border-color: #a00000; }

/* ---------- B. Thanh 3 nút dính đáy (chỉ điện thoại) ---------- */
.b2b-mbar { display: none; }

/* ---------- C. Chân trang: link tel / mailto / Zalo ---------- */
.b2b-footer-contact-line a { color: #bbb; transition: color .15s; }
.b2b-footer-contact-line a:hover { color: #fff; text-decoration: underline; }

/* ---------- E. M4 danh mục: flex-wrap canh giữa (không đổi markup) ----------
   CSS cũ ở trên là grid 4/hàng → hàng cuối thiếu ô bị dồn trái. Flex +
   justify-content:center: hàng đủ ô y như cũ, hàng cuối thiếu ô nằm giữa.
   8 ô: 1440px = 4+4; 769–1024px = 3+3+2; ≤600px (điện thoại) = 2 cột. */
.b2b-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.b2b-category-card { flex: 0 0 calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); }
.b2b-category-icon { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1 / 1; }

/* ---------- F. Vì sao xưởng cơ khí chọn MAZAKO ---------- */
.b2b-why { background: var(--b2b-dark); color: #fff; padding: 52px 0; border-radius: 8px; }
.b2b-why-title { font-size: 26px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 32px; line-height: 1.3; }
.b2b-why-title::after {
    content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0;
    background: var(--b2b-red); border-radius: 2px;
}
.b2b-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.b2b-why-item {
    display: flex; flex-direction: column; background: #1f1f1f; border: 1px solid #2c2c2c;
    border-top: 3px solid var(--b2b-red); border-radius: 8px; padding: 24px 20px 20px;
    transition: border-color .15s, transform .15s;
}
.b2b-why-item:hover { border-color: #3a3a3a; border-top-color: var(--b2b-red); transform: translateY(-2px); }
.b2b-why-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--b2b-red); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.b2b-why-item-title { font-size: 18px; font-weight: 700; color: #fff; margin: 16px 0 8px; }
.b2b-why-item-text { font-size: 14px; line-height: 1.7; color: #cfcfcf; margin: 0 0 16px; flex: 1; }
.b2b-why-link {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 700; color: #fff; padding-bottom: 2px;
    border-bottom: 2px solid var(--b2b-red);
}
.b2b-why-link:hover { color: #ff8080; }

/* ---------- G. Gửi yêu cầu báo giá (#bao-gia) ---------- */
.b2b-quote-home { padding: 52px 0; scroll-margin-top: 110px; } /* chừa chỗ header dính khi bấm "Nhận báo giá" */
.b2b-quote-home [hidden] { display: none !important; }
.b2b-quote-home-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.b2b-quote-home-lead { font-size: 15px; line-height: 1.75; color: var(--b2b-text-muted); margin: 14px 0 20px; }
.b2b-quote-home-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.b2b-quote-home-contacts li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.b2b-quote-home-contacts li > i {
    width: 40px; height: 40px; border-radius: 50%; background: #fff0f0; color: var(--b2b-red);
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.b2b-quote-home-contacts a { font-weight: 700; color: var(--b2b-text); }
.b2b-quote-home-contacts a:hover { color: var(--b2b-red); }
.b2b-quote-home-card {
    background: #fff; border: 1px solid var(--b2b-border); border-top: 3px solid var(--b2b-red);
    border-radius: 8px; padding: 26px; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.b2b-hq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.b2b-hq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.b2b-hq-field label { font-size: 14px; font-weight: 700; color: var(--b2b-text); }
.b2b-hq-req { color: var(--b2b-red); }
.b2b-hq-field input,
.b2b-hq-field textarea {
    width: 100%; min-height: 46px; padding: 10px 14px; font-family: inherit;
    font-size: 16px; /* >=16px: iPhone không tự phóng to khi chạm vào ô */
    color: var(--b2b-text); background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
}
.b2b-hq-field textarea { resize: vertical; min-height: 110px; }
.b2b-hq-field input:focus,
.b2b-hq-field textarea:focus { outline: none; border-color: var(--b2b-red); box-shadow: 0 0 0 3px rgba(192,0,0,.12); }
.b2b-hq-error { font-size: 13px; color: var(--b2b-red); }
.b2b-hq-error:empty { display: none; }
.b2b-hq-submit {
    width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--b2b-red); color: #fff; border: none; border-radius: 6px;
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.b2b-hq-submit:hover { background: #a00000; }
.b2b-hq-submit:disabled { background: #999; cursor: wait; }
.b2b-hq-msg { display: flex; align-items: flex-start; gap: 10px; border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; font-size: 15px; }
.b2b-hq-msg > i { font-size: 22px; flex-shrink: 0; }
.b2b-hq-msg p { margin: 4px 0 0; }
.b2b-hq-msg-ok { background: #eefaf0; color: #1b5e20; border: 1px solid #b7e1bd; }
.b2b-hq-msg-err { background: #fff0f0; color: #8a0000; border: 1px solid #f3c2c2; }

/* ---------- RESPONSIVE v2.3 ---------- */
@media (max-width: 1024px) {
    .b2b-category-card { flex-basis: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); }
    .b2b-why-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-topbar-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* D. Banner: CSS cũ (≤768px) đặt khung 360/360 + object-fit:cover → ảnh
   1440×405 bị cắt 2 bên. Nay khung giữ đúng tỷ lệ ảnh 1440/405 và
   object-fit:contain → hiện đủ ảnh, không méo, không cắt. */
@media (max-width: 768px) {
    .b2b-slider-wrap { aspect-ratio: 1440 / 405; }
    .b2b-slide img { object-fit: contain; }
    .b2b-arr-btn { width: 28px; height: 28px; font-size: 14px; background: rgba(0,0,0,0.3); }
    .b2b-arr-prev { left: 6px; }
    .b2b-arr-next { right: 6px; }
    .b2b-slider-dots { bottom: 6px; }
    .b2b-quote-home-inner { grid-template-columns: 1fr; gap: 24px; }
}
.b2b-slide picture { display: block; width: 100%; height: 100%; }

@media (max-width: 767px) {
    /* D. Có "Ảnh cho điện thoại" ở MỌI slide → khung vuông 1:1, vẫn contain. */
    .b2b-slider-wrap--m { aspect-ratio: 1 / 1; }
    /* D. Banner chỉ cao ~105px ở 375px: ẩn 2 nút mũi tên để KHÔNG đè chữ sát
       mép ảnh (vd "CH-2690V"). Vẫn tự chuyển 5 giây (main.js) + bấm chấm tròn;
       viền trong suốt 6px nới vùng bấm mỗi chấm lên 20px, chấm vẫn hiện 8px. */
    .b2b-arr-btn { display: none; }
    .b2b-slider-dots { bottom: 2px; gap: 0; }
    .b2b-dot { box-sizing: content-box; border: 6px solid transparent; background-clip: padding-box; }
    .b2b-dot.active { border-radius: 10px; background-clip: padding-box; } /* CSS cũ .b2b-dot.active dùng "background:" viết tắt → phải đặt lại clip */

    /* A. Điện thoại: thanh trên cùng chỉ còn dòng chữ (nút nằm ở thanh đáy). */
    .b2b-topbar { font-size: 12px; }
    .b2b-topbar-inner { min-height: 30px; padding-top: 6px; padding-bottom: 6px; }
    .b2b-topbar-actions { display: none; }

    /* B. Thanh 3 nút dính đáy: Gọi / Zalo / Báo giá, mỗi nút cao 48px (≥44px). */
    .b2b-mbar {
        display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: var(--b2b-dark); box-shadow: 0 -4px 16px rgba(0,0,0,.2);
    }
    .b2b-mbar-btn {
        flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center;
        gap: 6px; border-radius: 6px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1;
    }
    .b2b-mbar-btn i { font-size: 20px; }
    .b2b-mbar-call { background: #2e2e2e; border: 1px solid #4a4a4a; }
    .b2b-mbar-zalo { background: #0068ff; }
    .b2b-mbar-quote { background: var(--b2b-red); }
    /* Không che nội dung cuối trang: chừa đúng chiều cao thanh. Trang sản
       phẩm KHÔNG có thanh này (đã có .b2b-mobile-cta-bar riêng) → loại trừ. */
    body:not(.b2b-product-detail) { padding-bottom: calc(var(--b2b-mbar-h) + env(safe-area-inset-bottom)); }
    /* Không chồng bong bóng chat AI (inc/chat-widget.php): đẩy lên trên thanh. */
    body:not(.b2b-product-detail) .b2b-chat-widget { bottom: calc(var(--b2b-mbar-h) + 12px + env(safe-area-inset-bottom)); }
    body:not(.b2b-product-detail) .b2b-chat-panel { max-height: calc(100vh - 180px); }
}
@media (max-width: 480px) {
    /* chat-widget.css đặt khung chat cao 100vh - 100px ở ≤480px; bong bóng đã đẩy
       lên 60px nên trừ thêm 60px để khung chat không tràn mép trên màn hình. */
    body:not(.b2b-product-detail) .b2b-chat-panel { height: calc(100vh - 160px); }
}

@media (max-width: 600px) {
    .b2b-category-grid { gap: 12px; }
    .b2b-category-card { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); padding: 14px 8px; }
    .b2b-category-name { font-size: 15px; }
    .b2b-why { padding: 36px 0; }
    .b2b-why-title { font-size: 21px; margin-bottom: 22px; }
    .b2b-why-grid { grid-template-columns: 1fr; gap: 12px; }
    .b2b-why-item { padding: 18px 16px; }
    .b2b-quote-home { padding: 36px 0; }
    .b2b-quote-home-card { padding: 18px 16px; }
    .b2b-hq-row { grid-template-columns: 1fr; }
}