/* ============================================================================
   style.css — CSS DUY NHẤT của site public sondat.vn (viết lại 23/07/2026)
   Nền tảng: Bootstrap 5.3 (markup Razor đã viết lại theo BS5 thuần).
   Cấu trúc file:
     1. TOKEN (:root — chỉnh font/màu/đậm nhạt TẠI ĐÂY, toàn site ăn theo)
     0. HEADER DESKTOP MỚI (.pc-* — topbar/logo+search/menu 3 hàng)
     2. STYLE SITE (port từ style.css cũ — đã dọn rule BS3/mmenu/tooltip/header cũ)
     4. LIGHTBOX (.vlb)
     5. LAZY IMAGE (.lz)
     6. UI MỚI: header mobile + drawer + search sidebar + tinh chỉnh BS5
   (Mục 3 "MEGA MENU DỌC #menu-v" + CSS header cũ đã gỡ 24/07/2026.)
   ========================================================================== */

/* ── 1. TOKEN ─────────────────────────────────────────────────────────────── */
:root {
    /* Màu thương hiệu */
    --sd-primary:       #007cc2;
    --sd-primary-dark:  #02659e;
    --sd-primary-o80:   rgba(2, 101, 158, .8);
    --sd-accent:        #ffd800;   /* vàng nhấn (hover menu) */
    --sd-price:         #d9534f;   /* giá bán */
    --sd-danger:        #e53935;   /* badge giỏ hàng, cảnh báo */
    --sd-save:          #e53935;   /* badge "Tiết kiệm" trên thẻ SP (gradient đỏ) */
    --sd-save-2:        #c62828;

    /* Nền & chữ */
    --sd-bg:            #fff;
    --sd-bg-page:       #f8f8f8;  /* nền trang chủ (xám nhạt sau header) — các khối là thẻ trắng nổi trên nền này */
    --sd-bg-gray:       #e8e8e8;
    --sd-bg-soft:       #f7fafc;
    --sd-text:          #333;
    --sd-text-muted:    #777;
    --sd-border:        #ccc;

    /* Chữ — CHỈNH FONT & KÍCH THƯỚC TẠI ĐÂY, toàn site ăn theo (KHÔNG hardcode px) */
    /* Font chính: Inter (Google Fonts, nạp ở _Layout.cshtml) — fallback font hệ thống */
    --sd-font:          "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sd-fs-body:       15px;      /* chữ nội dung / menu / text thường (normal text) */
    --sd-fs-sm:         13px;      /* chữ phụ: label, meta, ghi chú, dropdown con */
    --sd-fs-lg:         16px;      /* nhấn nhẹ */
    --sd-fs-title:      18px;      /* tiêu đề khối/section + H1 trang chi tiết (mọi kích thước màn hình) */
    --sd-fs-base:       var(--sd-fs-body); /* alias tương thích: code/BS cũ dùng --sd-fs-base */
    --sd-lh:            1.5;
    --sd-fw-normal:     400;
    --sd-fw-mid:        500;       /* đậm vừa — tên bài trong sidebar */
    --sd-fw-medium:     600;
    --sd-fw-bold:       700;

    /* Header PC: chiều rộng cột trái (logo hàng 2 & nút danh mục hàng 3) — để ô
       tìm kiếm bắt đầu thẳng cột dọc với icon home ở menu hàng 3 */
    --pc-aside-w:       260px;

    /* Ghi đè biến Bootstrap 5 tương ứng */
    --bs-body-font-family: var(--sd-font);
    --bs-body-font-size:   var(--sd-fs-base);
    --bs-body-line-height: var(--sd-lh);
    --bs-body-color:       var(--sd-text);
    --bs-link-color:       var(--sd-primary);
    --bs-link-hover-color: var(--sd-primary-dark);
    /* Nút/khung Bootstrap phải mang màu site, không dùng xanh mặc định #0d6efd */
    --bs-primary:          var(--sd-primary);
    --bs-primary-rgb:      0, 124, 194;
    --bs-border-color:     var(--sd-border);
    --bs-border-radius:    8px;
}

/* ── Nút Bootstrap đồng bộ với nút mua hàng (.pd-add) của trang chi tiết SP ──── */
.btn {
    font-size: var(--sd-fs-body);
    font-weight: var(--sd-fw-medium);
    border-radius: 8px;
    padding: .6rem 1.25rem;
}
.btn-primary {
    --bs-btn-bg: var(--sd-primary);        --bs-btn-border-color: var(--sd-primary);
    --bs-btn-hover-bg: var(--sd-primary-dark); --bs-btn-hover-border-color: var(--sd-primary-dark);
    --bs-btn-active-bg: var(--sd-primary-dark); --bs-btn-active-border-color: var(--sd-primary-dark);
    --bs-btn-disabled-bg: var(--sd-primary);   --bs-btn-disabled-border-color: var(--sd-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--sd-text);            --bs-btn-border-color: var(--sd-border);
    --bs-btn-hover-color: var(--sd-primary);   --bs-btn-hover-bg: var(--sd-bg-soft);
    --bs-btn-hover-border-color: var(--sd-primary);
    --bs-btn-active-color: var(--sd-primary);  --bs-btn-active-bg: var(--sd-bg-soft);
    --bs-btn-active-border-color: var(--sd-primary);
}
.form-control, .form-select { font-size: var(--sd-fs-body); border-radius: 8px; }
.form-control:focus, .form-select:focus {
    border-color: var(--sd-primary);
    box-shadow: 0 0 0 .15rem rgba(0, 124, 194, .15);
}


/* ── Lớp phủ Bootstrap modal (sửa 30/07/2026) ──────────────────────────────
   Mặc định BS: .modal 1055 / .modal-backdrop 1050 — THẤP HƠN chrome của site
   (header .pc-mid 1060, mega menu 1200, dropdown tìm kiếm 1210, mini-cart 1300,
   drawer/overlay 1090–1100) nên popup bị header chèn lên. Nâng lên trên tất cả.
   Áp cho MỌI modal: sửa thông tin/sản phẩm ở giỏ hàng, Bản đồ, Quick view. */
.modal          { z-index: 1360; }
.modal-backdrop { z-index: 1350; }

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--sd-font);
    font-size: var(--sd-fs-base);
    line-height: var(--sd-lh);
    color: var(--sd-text);
    background: var(--sd-bg-page);
    /* Sticky footer: đẩy footer chạm đáy khi trang ngắn (bỏ khoảng trắng dưới footer) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-main { flex: 1 0 auto; }
a { color: var(--sd-primary); text-decoration: none; }
a:hover, a:focus { color: var(--sd-primary-dark); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* Container tối đa 1440px (quyết định 22/07/2026) */
@media (min-width: 1200px) {
    .container { max-width: 1440px; }
}

/* ── 5. LAZY IMAGE (.lz) ──────────────────────────────────────────────────── */
.lz { position: relative; display: block; overflow: hidden; }
.lz::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #f0f1f3 25%, #e6e8eb 37%, #f0f1f3 63%);
    background-size: 400% 100%;
    animation: lz-shimmer 1.2s ease infinite;
    pointer-events: none;
}
.lz.lz-done::after { display: none; }
.lz img { opacity: 0; transition: opacity .25s ease; display: block; }
.lz.lz-done img { opacity: 1; }
@keyframes lz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Khung tỷ lệ theo bảng resize — chống giật layout */
.lz-pro     { aspect-ratio: 130 / 105; max-width: 130px; margin-inline: auto; }
.lz-news    { aspect-ratio: 400 / 210; }
.lz-pro img, .lz-news img { width: 100%; height: 100%; object-fit: contain; }

/* Header gọn (mobile + iPad, <992px). Desktop dùng .pc-header (d-lg-block). */
/* ── Topbar: <768 chỉ giỏ hàng (phải); ≥768 (iPad) trái = tên DN, phải = giỏ + bản đồ ── */
.m-topbar {
    display: none;
    align-items: center; justify-content: flex-end; gap: 16px;
    height: 46px; padding: 0 12px 0 16px;
    background: var(--sd-primary-dark); color: #fff;
    font-size: var(--sd-fs-sm);
}
@media (max-width: 991.98px) { .m-topbar { display: flex; } }
.m-topbar .mt-biz {
    display: none;                 /* chỉ hiện ≥768 (iPad) */
    margin-right: auto;            /* đẩy nhóm phải (giỏ + bản đồ) sang mép phải */
    font-weight: var(--sd-fw-medium);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.m-topbar .mt-map {
    display: inline-flex;          /* luôn hiện (thay vị trí giỏ hàng cũ) */
    align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
    font-size: var(--sd-fs-sm); text-decoration: none;
}
.m-topbar .mt-map .fa { font-size: 14px; }
@media (min-width: 768px) {
    /* iPad: mt-biz margin-right:auto tự đẩy bản đồ sang phải */
    .m-topbar .mt-biz { display: block; }
}

/* ── Thanh chính: nền TRẮNG, logo trái → tìm kiếm → menu (sát mép phải) ── */
.m-header {
    display: none;
    position: sticky; top: 0; z-index: 1000;
    align-items: center; gap: 6px;
    height: 56px; padding: 0 6px 0 12px;
    background: #fff;
    border-bottom: 1px solid #e6eaee;   /* viền mảnh thay box-shadow (bỏ bóng tràn mép) */
}
@media (max-width: 991.98px) { .m-header { display: flex; } }
.m-header .mh-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.m-header .mh-logo img { max-height: 42px; width: auto; }
.m-header .mh-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.m-header .mh-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--sd-text); cursor: pointer;
}
.m-header .mh-btn:active { background: rgba(0, 0, 0, .06); }
.m-header .mh-btn svg { width: 24px; height: 24px; }

/* Overlay chung */
.ui-overlay {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(0, 0, 0, .75);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
body.drawer-open .ui-overlay, body.search-open .ui-overlay { opacity: 1; visibility: visible; }
/* Khóa cuộn nền (overflow:hidden) do site.js quản lý cùng padding-right bù scrollbar —
   giữ đồng thời suốt lúc panel trượt ra để layout không giật (xem overlayInit). */

/* Drawer menu mobile (bố cục tham khảo demo vilaco) */
.nav-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100;
    width: 100%; max-width: 480px;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable;
}
/* box-shadow CHỈ khi mở — lúc đóng panel nằm ngoài màn hình, bóng sẽ tràn vào mép trái (bug) */
body.drawer-open .nav-drawer { transform: translateX(0); box-shadow: 2px 0 12px rgba(0, 0, 0, .25); }
/* Head KHÔNG cố định — cuộn cùng nội dung; cao 100px, logo căn giữa, nút X góc trên phải */
.nav-drawer .nd-head {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 100px; padding: 0 16px;
    background: var(--sd-primary);
}
.nav-drawer .nd-head img { max-height: 56px; }
.nav-drawer .nd-close {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 6px;
    background: transparent; color: #fff; cursor: pointer;
}
.nav-drawer .nd-close svg { width: 22px; height: 22px; }
.nav-drawer .nd-menu { margin: 0; padding: 0; list-style: none; }
/* Đơn giản hóa như sidebar quản trị: KHÔNG kẻ viền giữa các mục */
/* Mọi hàng CÙNG min-height + flex căn giữa → chiều cao đều nhau ở mọi cấp (tránh giãn bị gãy).
   Toàn bộ font menu sidebar = 14px (mọi cấp). */
.nav-drawer .nd-menu a {
    display: flex; align-items: center;
    min-height: 44px; padding: 4px 20px;
    color: var(--sd-text); font-size: 14px; text-decoration: none;
}
.nav-drawer .nd-menu a:active { color: var(--sd-primary); }
.nav-drawer .nd-row { display: flex; align-items: stretch; position: relative; }
.nav-drawer .nd-row > a { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
/* Nút mũi tên xổ submenu — KHÔNG border trái */
.nav-drawer .nd-toggle {
    flex: 0 0 46px;
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent; color: #90a4ae; cursor: pointer;
}
.nav-drawer .nd-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }
.nav-drawer li.nd-open > .nd-row .nd-toggle svg { transform: rotate(90deg); }
/* Nhánh đang mở/active: highlight bằng LỚP NỀN TUYỆT ĐỐI bo góc, thụt vào (như item active
   sidebar admin). Dùng ::before nên KHÔNG chiếm layout → không phá vỡ hàng, không giật khi expand.
   KHÔNG đổi màu chữ thẻ a. */
.nav-drawer li.nd-open > .nd-row::before {
    content: ""; position: absolute; inset: 2px 8px;
    background: #e4eff8; border-radius: 8px;
}

.nav-drawer .nd-sub { display: none; margin: 0; padding: 0; list-style: none; }
/* Submenu: chấm tròn đầu mỗi mục (như ảnh); phân cấp bằng thụt lề tăng dần.
   display/align/font/min-height kế thừa từ .nd-menu a (cùng 14px, cùng chiều cao). */
.nav-drawer .nd-sub > li > a,
.nav-drawer .nd-sub > li > .nd-row > a {
    gap: 12px; padding-left: 24px; color: #445;
}
.nav-drawer .nd-sub > li > a::before,
.nav-drawer .nd-sub > li > .nd-row > a::before {
    content: ""; flex: 0 0 auto;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .55;
}
.nav-drawer .nd-sub .nd-sub > li > a,
.nav-drawer .nd-sub .nd-sub > li > .nd-row > a { padding-left: 40px; color: #667; }
.nav-drawer .nd-sub .nd-sub .nd-sub > li > a,
.nav-drawer .nd-sub .nd-sub .nd-sub > li > .nd-row > a { padding-left: 56px; }
/* Khối liên hệ cuối drawer — box viền, nền trắng; mỗi mục: icon viền vuông (radius nhẹ) +
   2 hàng (tiêu đề trên, value dưới). KHÔNG tô nền màu đặc cho icon. */
.nav-drawer .nd-contact {
    margin: 16px; padding: 14px 16px;
    border: 1px solid #e2e7ee; border-radius: 8px;
    background: #fff;
    font-size: var(--sd-fs-sm); color: #445; line-height: 1.4;
}
.nav-drawer .nd-contact__biz {
    font-size: var(--sd-fs-body); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); margin-bottom: 12px;
}
.nav-drawer .nd-contact__item { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.nav-drawer .nd-contact__ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid #d0d7de; border-radius: 6px;   /* vuông, radius nhẹ, viền xám */
    background: #fff; color: var(--sd-primary);
}
.nav-drawer .nd-contact__ic .fa { width: 16px; height: 16px; color: var(--sd-primary); }
.nav-drawer .nd-contact__txt { display: flex; flex-direction: column; min-width: 0; }
.nav-drawer .nd-contact__label { font-size: 12px; color: #8a97a3; line-height: 1.3; }
.nav-drawer .nd-contact__value {
    font-size: 14px; font-weight: var(--sd-fw-medium); color: var(--sd-text);
    line-height: 1.35; word-break: break-word;
}
.nav-drawer .nd-contact__value a { color: inherit; }

/* Search sidebar (PC + mobile) — bố cục theo demo vilaco: 450px, head + form
   (dropdown danh mục gốc + ô nhập) + vùng gợi ý cuộn. */
.search-panel {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 1100;
    width: 450px; max-width: 100vw;
    display: flex; flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    transition: transform .5s ease;
}
/* box-shadow CHỈ khi mở — lúc đóng panel nằm ngoài màn hình, bóng sẽ tràn vào mép phải (bug) */
body.search-open .search-panel { transform: translateX(0); box-shadow: -2px 0 12px rgba(0, 0, 0, .25); }
.search-panel .sp-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; padding: 0 12px 0 22px;
    background: var(--sd-primary); color: #fff;
}
.search-panel .sp-title {
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    text-transform: uppercase; letter-spacing: .02em;
}
.search-panel .sp-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 6px;
    background: transparent; color: #fff; cursor: pointer;
}
.search-panel .sp-close svg { width: 22px; height: 22px; }

.search-panel .sp-form {
    flex-shrink: 0;
    display: flex; gap: 10px; padding: 18px 22px;
    border-bottom: 1px solid #eef0f2;
}
.search-panel .sp-box { position: relative; flex: 1 1 auto; min-width: 0; }
/* Ô NHẬP DÙNG CHUNG — nguồn duy nhất cho ô tìm kiếm (sidebar/header) và form đặt hàng
   (.sd-input). Sửa dáng ô nhập của site thì sửa ở ĐÂY, không nhân bản chỗ khác. */
.search-panel .sp-box input,
.sd-input {
    width: 100%; height: 48px; padding: 0 14px;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    font-size: 14px; color: var(--sd-text); outline: none;
    transition: border-color .2s;
}
.search-panel .sp-box input { padding-right: 54px; }   /* chừa chỗ nút kính lúp */
.search-panel .sp-box input::placeholder,
.sd-input::placeholder { color: #9ca3af; }
.search-panel .sp-box input:focus,
.sd-input:focus { border-color: var(--sd-primary); }
/* Biến thể textarea: cao theo nội dung */
textarea.sd-input { height: auto; min-height: 96px; padding: 11px 14px; line-height: var(--sd-lh); }
.search-panel .sp-box button {
    position: absolute; top: 0; right: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 0; border-radius: 0 6px 6px 0;
    background: var(--sd-primary); color: #fff; cursor: pointer;
    transition: background .2s;
}
.search-panel .sp-box button:hover { background: var(--sd-primary-dark); }
.search-panel .sp-box button svg { width: 18px; height: 18px; }

/* Dropdown danh mục gốc (Tất cả sản phẩm + danh mục gốc) */
.ss-dd { position: relative; flex: 0 0 auto; }
.ss-dd__toggle {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    height: 48px; padding: 0 14px; width: 200px;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    color: var(--sd-text); font-size: 14px; cursor: pointer;
    transition: border-color .2s;
}
.ss-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Biến thể chiếm hết bề ngang cột (form đặt hàng) — vẫn là CÙNG component với
   dropdown danh mục của ô tìm kiếm, chỉ khác bề rộng. */
.ss-dd--block { display: block; width: 100%; }
.ss-dd--block .ss-dd__toggle { width: 100%; }
.ss-dd--block .ss-dd__menu { width: 100%; }
/* Mục gợi nhắc (placeholder "— Chọn … —") nhạt hơn mục dữ liệu thật */
.ss-dd__menu li.is-hint { color: #9ca3af; }
.ss-dd__toggle svg { margin-left: auto; width: 14px; height: 14px; color: #6b7280; transition: transform .25s; }
.ss-dd.is-open .ss-dd__toggle { border-color: #e5e7eb; }   /* giữ viền xám khi mở (không đổi xanh) */
.ss-dd.is-open .ss-dd__toggle svg { transform: rotate(180deg); }
.ss-dd__menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 100%; max-height: 320px; overflow-y: auto;
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1210;
}
.ss-dd.is-open .ss-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ss-dd__menu li {
    padding: 9px 12px; border-radius: 5px;
    color: #374151; font-size: 14px; white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s;
}
.ss-dd__menu li:hover { background: var(--sd-bg-soft); color: var(--sd-text); }
.ss-dd__menu li.is-active { background: var(--sd-primary); color: #fff; }

/* Vùng kết quả gợi ý */
.search-panel .sp-results { flex: 1 1 auto; overflow-y: auto; padding: 10px 16px 22px; }
.search-panel .sp-results::-webkit-scrollbar { width: 4px; background: #f1f2f4; }
.search-panel .sp-results::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 2px; }
.ss-status {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 28px 8px; text-align: center; color: #6b7280; font-size: 14px;
}
.ss-spinner {
    flex-shrink: 0; width: 16px; height: 16px;
    border: 2px solid #e5e7eb; border-top-color: var(--sd-primary);
    border-radius: 50%; animation: ssSpin .7s linear infinite;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list li + li { border-top: 1px solid #f1f2f4; }
.ss-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 8px; text-decoration: none; border-radius: 6px;
    transition: background .15s;
}
.ss-item:hover { background: var(--sd-bg-soft); }
.ss-item__thumb {
    flex: 0 0 auto; width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid #eef0f2; border-radius: 6px; background: #fff;
}
.ss-item__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-item__kind {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--sd-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-item__name {
    font-size: 14px; font-weight: 500; color: var(--sd-text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-item:hover .ss-item__name { color: var(--sd-primary); }
.ss-item__price { font-size: 13px; font-weight: var(--sd-fw-bold); color: var(--sd-price); }
.ss-viewall {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 14px 8px 0; padding: 12px; border-radius: 6px;
    background: var(--sd-primary); color: #fff;
    font-size: 14px; font-weight: 500; text-decoration: none;
    transition: background .2s;
}
.ss-viewall:hover, .ss-viewall:focus { background: var(--sd-primary-dark); color: #fff; }
@media (max-width: 767.98px) {
    .search-panel .sp-head { min-height: 52px; padding: 0 10px 0 18px; }
    .search-panel .sp-title { font-size: var(--sd-fs-lg); }
    .search-panel .sp-form { padding: 14px 16px 16px; gap: 8px; }
    .search-panel .sp-results { padding: 8px 12px 18px; }
    .ss-dd__toggle { width: 120px; padding: 0 10px; height: 42px; font-size: var(--sd-fs-sm); }
    .search-panel .sp-box input { height: 42px; font-size: var(--sd-fs-sm); }
    .search-panel .sp-box button { width: 42px; height: 42px; }
    .ss-dd__menu li { font-size: var(--sd-fs-sm); padding: 8px 10px; }
    .ss-item__name { font-size: var(--sd-fs-sm); }
    .ss-status, .ss-viewall { font-size: var(--sd-fs-sm); }
}

/* ============================================================================
   HEADER DESKTOP MỚI (24/07/2026 — 3 hàng, tham khảo Sellzy). Chỉ áp desktop
   (.pc-header d-none d-md-block); mobile dùng .m-header như cũ.
   ========================================================================== */
/* ── Hàng 1: Topbar ──────────────────────────────────────────────────────── */
.pc-topbar { background: var(--sd-primary-dark); color: #fff; font-size: var(--sd-fs-body); }
.pc-topbar__in { display: flex; align-items: center; justify-content: space-between; height: 46px; }
.pc-topbar__biz { font-weight: 500; }
.pc-topbar__links { display: flex; align-items: center; gap: 22px; }
.pc-topbar__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: #fff; font-size: var(--sd-fs-body); text-decoration: none;
}
.pc-topbar__link:hover { color: #fff; opacity: .82; }
.pc-topbar__link svg { width: 14px; height: 14px; }
.pc-topbar__link .fa { font-size: 15px; }
.pc-topbar__addr {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 620px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: #fff; font-size: var(--sd-fs-body);
}
.pc-topbar__addr .fa { flex: 0 0 auto; font-size: 15px; }

/* ── Hàng 2: Logo + Tìm kiếm + Giỏ hàng ──────────────────────────────────── */
/* z-index 1060 > .pc-nav (1050) để dropdown "Tất cả" / kết quả tìm kiếm của
   hàng 2 nổi TRÊN hàng 3 (khi chưa cuộn, hai hàng chồng vùng đổ xuống) */
.pc-mid { position: relative; z-index: 1060; background: #fff; border-bottom: 1px solid #eef0f2; }
.pc-mid__in { display: flex; align-items: center; gap: 22px; height: 92px; }
/* Cột logo rộng = cột nút danh mục → ô tìm kiếm thẳng cột với icon home */
.pc-logo { flex: 0 0 var(--pc-aside-w); display: inline-flex; align-items: center; }
.pc-logo img { max-height: 64px; width: auto; }
/* Ô tìm kiếm inline (radius 6px + border mảnh như sidebar) + kết quả xổ dưới */
.pc-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 8px; }
.pc-search .ss-dd__toggle { height: 46px; }
.pc-search__box { position: relative; flex: 1 1 auto; min-width: 0; }
.pc-search__box input {
    width: 100%; height: 46px; padding: 0 54px 0 16px;
    border: 1px solid #d7dde3; border-radius: 6px; background: #fff;
    font-size: var(--sd-fs-body); color: var(--sd-text); outline: none; transition: border-color .2s;
}
.pc-search__box input::placeholder { color: #9aa4ad; }
.pc-search__box input:focus { border-color: #d7dde3; }   /* giữ viền xám khi focus (không đổi xanh) */
.pc-search__box button {
    position: absolute; top: 0; right: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 46px; border: 0; border-radius: 0 6px 6px 0;
    background: var(--sd-primary); color: #fff; cursor: pointer; transition: background .2s;
}
.pc-search__box button:hover { background: var(--sd-primary-dark); }
.pc-search__box button svg { width: 18px; height: 18px; }
.pc-search__results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200;
    max-height: 72vh; overflow-y: auto; padding: 6px 10px 12px;
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16); display: none;
}
.pc-search__results.is-open { display: block; }
.pc-search__results::-webkit-scrollbar { width: 4px; background: #f1f2f4; }
.pc-search__results::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 2px; }

/* Hotline 24/7 */
.pc-hotline { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.pc-hotline__txt { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); white-space: nowrap; }
.pc-hotline__txt b { font-weight: var(--sd-fw-bold); font-size: var(--sd-fs-body); color: var(--sd-primary); }
.pc-hotline { text-decoration: none; }
.pc-hotline:hover .pc-hotline__ic, .pc-hotline:hover .pc-hotline__txt b { color: var(--sd-primary-dark); }
.pc-cart {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    color: var(--sd-text); text-decoration: none;
}
/* Icon giỏ hàng: nền tròn ĐỒNG NHẤT với hotline */
.pc-hotline__ic, .pc-cart__ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; background: var(--sd-bg-soft); color: var(--sd-primary);
}
.pc-hotline__ic svg, .pc-cart__ic svg { width: 22px; height: 22px; }
.pc-cart__txt { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); white-space: nowrap; }
.pc-cart__txt b { font-weight: var(--sd-fw-bold); font-size: var(--sd-fs-lg); color: var(--sd-primary); }
.pc-cart:hover .pc-cart__ic, .pc-cart:hover .pc-cart__txt b { color: var(--sd-primary-dark); }

/* ── Mini-cart (hover PC / click mobile) ──────────────────────────────────── */
.pc-cart-wrap { flex: 0 0 auto; position: relative; }
/* static: panel mobile neo theo .m-header (full width). ≥576 chuyển relative → dropdown */
.mh-cart-wrap { position: static; flex: 0 0 auto; }
.mini-cart {
    position: absolute; z-index: 1300;
    width: 340px; max-width: calc(100vw - 16px);
    background: #fff; border: 1px solid #e6eaee; border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.mini-cart--pc { top: calc(100% + 12px); right: 0; }
/* cầu nối vô hình để di chuột từ nút xuống panel không bị rớt hover */
.mini-cart--pc::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
/* CHỈ mở khi giỏ có SP (.has-items do site.js gắn theo badge) */
.pc-cart-wrap.has-items:hover .mini-cart--pc { opacity: 1; visibility: visible; transform: translateY(0); }
/* Mobile DỌC (<576): full width lề trái → phải (neo theo .m-header vì .mh-cart-wrap static). */
.mini-cart--m { top: calc(100% + 8px); left: 8px; right: 8px; width: auto; }
/* Mobile NGANG / tablet nhỏ (≥576): dropdown 360px thả từ nút giỏ */
@media (min-width: 576px) {
    .mh-cart-wrap { position: relative; }
    .mini-cart--m { left: auto; right: 0; width: 360px; max-width: calc(100vw - 16px); }
}
.mh-cart-wrap.is-open .mini-cart--m { opacity: 1; visibility: visible; transform: translateY(0); }

.mini-cart__list { max-height: 320px; overflow-y: auto; padding: 6px; }
.mc-item { display: flex; gap: 10px; align-items: center; padding: 8px 6px; }
.mc-item + .mc-item { border-top: 1px solid #f0f2f4; }
.mc-item__thumb {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 6px; overflow: hidden;
    border: 1px solid #eef0f2; display: flex; align-items: center; justify-content: center;
}
.mc-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mc-item__body { flex: 1 1 auto; min-width: 0; }
.mc-item__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--sd-fs-sm); color: var(--sd-text); line-height: 1.35;
}
.mc-item__name:hover { color: var(--sd-primary); }
.mc-item__meta { margin-top: 3px; font-size: var(--sd-fs-sm); display: flex; gap: 5px; }
.mc-item__qty { color: var(--sd-text-muted); }
.mc-item__price { color: var(--sd-price); font-weight: var(--sd-fw-bold); }
.mc-item__del {
    flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 6px;
    background: transparent; color: var(--sd-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mc-item__del:hover { background: #fdecea; color: var(--sd-price); }
.mc-item__del svg { width: 16px; height: 16px; }
.mini-cart__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px; border-top: 1px solid #eef0f2;
}
.mini-cart__total { font-size: var(--sd-fs-sm); }
.mini-cart__total b { color: var(--sd-price); font-size: var(--sd-fs-body); }
.mini-cart__view {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sd-primary); color: #fff; border-radius: 999px;
    padding: 8px 16px; font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
}
.mini-cart__view:hover { background: var(--sd-primary-dark); color: #fff; }
.mini-cart__empty { padding: 26px 16px; text-align: center; color: var(--sd-text-muted); font-size: var(--sd-fs-sm); }
.mini-cart__loading { padding: 26px; text-align: center; }
.mc-spin {
    display: inline-block; width: 26px; height: 26px;
    border: 3px solid #e5e7eb; border-top-color: var(--sd-primary); border-radius: 50%;
    animation: sd-spin .7s linear infinite;
}

/* Badge số lượng trên nút giỏ hàng mobile */
.mh-cart { position: relative; }
.mh-cart__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--sd-danger); color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: var(--sd-fw-bold); line-height: 16px; text-align: center;
}

/* ── Hàng 3: Mega danh mục + Menu (nền TRẮNG kiểu demo, sticky khi cuộn) ──── */
.pc-nav { position: sticky; top: 0; z-index: 1050; background: #fff; border-bottom: 1px solid #eef0f2; }
.pc-nav.is-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
/* gap 7 + padding-left icon home (15) khớp gap 22 hàng 2 → search thẳng cột home */
.pc-nav__in { display: flex; align-items: center; height: 56px; gap: 7px; }

/* Nút danh mục (filled primary như 'Explore All Categories') — rộng = cột logo */
.pc-cats { position: relative; flex: 0 0 var(--pc-aside-w); align-self: center; }
.pc-cats__btn {
    width: 100%;
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px;
    border: 0; border-radius: 6px; background: var(--sd-primary); color: #fff;
    font-size: var(--sd-fs-body); font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.pc-cats:hover .pc-cats__btn { background: var(--sd-primary-dark); }
.pc-cats__btn .fa { font-size: 15px; }
.pc-cats__caret { width: 13px; height: 13px; margin-left: auto; transition: transform .2s; }
.pc-cats:hover .pc-cats__caret { transform: rotate(180deg); }
.pc-cats__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200;
    min-width: 326px; background: #fff; border-radius: 8px; border: 1px solid #e2e6ea;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.pc-cats:hover .pc-cats__panel { opacity: 1; visibility: visible; transform: none; }
.pc-cats__list, .pc-cats__sub { list-style: none; margin: 0; padding: 6px 0; }
.pc-cats__list > li, .pc-cats__sub li { position: relative; }
/* Border nhẹ phân tách giữa các mục */
.pc-cats__list > li + li, .pc-cats__sub > li + li { border-top: 1px solid #f0f2f4; }
.pc-cats__list a, .pc-cats__sub a {
    display: flex; align-items: center; gap: 9px; padding: 9px 18px;
    color: var(--sd-text); font-size: var(--sd-fs-body); text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
/* Chỉ span TÊN được giãn — KHÔNG bắt span icon (tránh icon bị kéo dài thành ellipse) */
.pc-cats__list a > span:not(.pc-cats__ic), .pc-cats__sub a > span { flex: 1 1 auto; min-width: 0; }
.pc-cats__list a svg, .pc-cats__sub a svg { flex: 0 0 auto; width: 13px; height: 13px; color: #9aa4ad; transition: color .2s ease; }
/* Icon tròn 1:1 nền xanh #007cc2 (nhỏ lại theo chiều cao dòng mới — KHÔNG đổi khi hover) */
.pc-cats__ic {
    flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; aspect-ratio: 1 / 1; border-radius: 50%;
    background: #007cc2;
}
.pc-cats__ic img { width: 14px; height: 14px; object-fit: contain; }
/* Hover: CHỈ đổi nhẹ nền (không dịch item, không đổi nền icon) */
.pc-cats__list li:hover > a, .pc-cats__sub li:hover > a { background: var(--sd-bg-soft); color: var(--sd-primary); }
.pc-cats__list li:hover > a svg, .pc-cats__sub li:hover > a svg { color: var(--sd-primary); }
.pc-cats__sub {
    position: absolute; top: -1px; left: 100%; min-width: 250px;
    background: #fff; border-radius: 8px; border: 1px solid #e2e6ea;
    opacity: 0; visibility: hidden; transform: translateX(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.pc-cats__list li.has-sub:hover > .pc-cats__sub,
.pc-cats__sub li.has-sub:hover > .pc-cats__sub { opacity: 1; visibility: visible; transform: none; }
/* Menu dài → flyout SÂU NHẤT (không có flyout con) cuộn dọc vừa màn hình.
   Chỉ áp cho leaf để KHÔNG cắt flyout con; JS (site.js) chỉnh max-height chính xác theo vị trí. */
.pc-cats__sub:not(:has(.pc-cats__sub)) {
    max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #cfd6dd transparent;   /* Firefox: thanh mảnh */
}
.pc-cats__sub::-webkit-scrollbar { width: 4px; }
.pc-cats__sub::-webkit-scrollbar-track { background: transparent; }
.pc-cats__sub::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 4px; }

/* Menu chính (chữ đậm tối, hover primary — như demo) */
.pc-menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.pc-menu > li { position: relative; }
.pc-menu > li > a {
    display: flex; align-items: center; gap: 5px; height: 56px; padding: 0 15px;
    color: var(--sd-text); font-size: var(--sd-fs-body); font-weight: 600; text-decoration: none;
    transition: color .15s;
}
.pc-menu > li:hover > a, .pc-menu > li > a:hover { color: var(--sd-primary); }
.pc-menu__home i { font-size: 18px; }
.pc-menu__caret { width: 12px; height: 12px; transition: transform .2s; }
.pc-menu > li.has-drop:hover .pc-menu__caret { transform: rotate(180deg); }
.pc-menu__drop {
    position: absolute; top: 100%; left: 0; z-index: 1200;
    min-width: 210px; margin: 0; padding: 6px 0; list-style: none;
    /* Viền mảnh giống panel "Danh mục sản phẩm" (.pc-cats__panel) — KHÔNG shadow */
    background: #fff; border-radius: 0 0 8px 8px; border: 1px solid #e2e6ea;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
/* Đường phân tách giữa các mục — như .pc-cats__list */
.pc-menu__drop > li + li { border-top: 1px solid #f0f2f4; }
.pc-menu li.has-drop:hover .pc-menu__drop { opacity: 1; visibility: visible; transform: none; }
.pc-menu__drop li a {
    display: block; padding: 9px 18px;   /* khớp nhịp với .pc-cats__list a */
    color: var(--sd-text); font-size: var(--sd-fs-body); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pc-menu__drop li a:hover { background: var(--sd-bg-soft); color: var(--sd-primary); }

/* Nút "Tìm kiếm sản phẩm" — chỉ hiện khi sticky (filled primary) */
.pc-nav__search {
    margin-left: auto; display: none; align-items: center; gap: 8px;
    height: 42px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--sd-primary);
    color: #fff; font-size: var(--sd-fs-body); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pc-nav__search svg { width: 16px; height: 16px; }
.pc-nav__search:hover { background: var(--sd-primary-dark); }
.pc-nav.is-stuck .pc-nav__search { display: inline-flex; }

/* ── Modal Bản đồ chỉ đường (2 cột — hiện đại) ───────────────────────────── */
.map-modal-wrap .modal-content { overflow: hidden; border: 0; border-radius: 12px; }
.map-modal__head {
    padding: 14px 20px; border: 0; border-radius: 0;
    background: var(--sd-primary); color: #fff;
}
.map-modal__head .modal-title { font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-bold); display: flex; align-items: center; gap: 8px; }
.map-modal__head .modal-title .fa { font-size: 16px; }
.map-modal { display: flex; }
.map-modal__map { flex: 1 1 62%; min-width: 0; }
.map-modal__map iframe { display: block; width: 100%; height: 100%; min-height: 470px; }
.map-modal__info {
    flex: 0 0 38%; padding: 26px 26px 28px; background: #fff;
    display: flex; flex-direction: column;
}
.map-modal__biz {
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold); color: var(--sd-primary);
    margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--sd-bg-soft);
}
.map-modal__list { list-style: none; margin: 0 0 22px; padding: 0; }
.map-modal__list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #e5e7eb; }
.map-modal__list li:last-child { border-bottom: 0; }
.map-modal__ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; background: var(--sd-bg-soft); color: var(--sd-primary);
}
.map-modal__ic .fa { font-size: 16px; }
.map-modal__list li > span:last-child {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 14px; color: var(--sd-text); line-height: 1.5; word-break: break-word;
}
.map-modal__lb { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--sd-text-muted); }
.map-modal__list a { color: var(--sd-text); font-weight: var(--sd-fw-bold); text-decoration: none; }
.map-modal__list a:hover { color: var(--sd-primary); }
.map-modal__dir {
    margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 8px; background: var(--sd-primary); color: #fff;
    font-size: 14px; font-weight: var(--sd-fw-bold); text-decoration: none; transition: background .2s;
}
.map-modal__dir:hover { background: var(--sd-primary-dark); color: #fff; }
@media (max-width: 767.98px) {
    .map-modal { flex-direction: column; }
    .map-modal__info { flex-basis: auto; }
    .map-modal__map iframe { min-height: 320px; }
}

/* ── Trang chủ: hero slider (slick) full-width + hàng 3 banner (24/07/2026) ── */
.hero-slide { position: relative; margin-top: 20px; border-radius: 8px; overflow: hidden; }
/* Bo góc: KHÔNG dựa vào mỗi overflow:hidden của .hero-slide. Slick đặt transform: translate3d
   lên .slick-track, mà phần tử có transform thì thoát khỏi vùng cắt bo góc của tổ tiên
   (Chrome/Safari) → góc dưới ảnh slide bị vuông (user phản ánh 03/08/2026).
   Cách chắc ăn: bo luôn trên các lớp THỰC SỰ vẽ ảnh — .slick-list, thẻ <a>.lz và chính <img>. */
.hero-slide .slick-list,
.hero-slide-item,
.hero-slide-item > .lz,
.hero-slide-item img { border-radius: 8px; }
.hero-slide .slick-list { overflow: hidden; }
/* Trước khi slick init: chỉ hiện slide đầu (chống nhảy layout / FOUC) */
.hero-slider:not(.slick-initialized) .hero-slide-item + .hero-slide-item { display: none; }
.hero-slide-item img { display: block; width: 100%; height: auto; }
/* Mũi tên (hiện khi hover) */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .85); color: var(--sd-primary); cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15); opacity: 0;
    transition: opacity .25s ease, background .2s ease;
}
.hero-slide:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: #fff; }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }
/* Dots */
.hero-slide .slick-dots {
    position: absolute; bottom: 12px; left: 0; right: 0; z-index: 5;
    display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.hero-slide .slick-dots li { width: auto; height: auto; margin: 0; }
.hero-slide .slick-dots li button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .6); text-indent: -9999px; overflow: hidden;
    cursor: pointer; transition: background .2s ease, width .2s ease;
}
.hero-slide .slick-dots li button:before { display: none; }
.hero-slide .slick-dots li.slick-active button { background: #fff; width: 24px; border-radius: 5px; }

/* Slick (logo đối tác/khách hàng + thumb chi tiết SP) */
.slick-prev, .slick-next { z-index: 5; }
a:focus, a:hover {
    outline:none;
    text-decoration:none;
}
/* ĐÃ BỎ 30/07/2026 (user chốt): class .bg-gray = --sd-bg-gray #e8e8e8 là nền xám ĐẬM port
   từ site cũ. Nền trang do body lo (--sd-bg-page #f8f8f8) — trang mới chỉ dùng
   .cat-crumb + .cat-body, KHÔNG bọc nền riêng. */
.bg-white {
    background-color:#fff;
}
/* Port site cũ — CHỈ chặn ảnh tràn khung. KHÔNG dùng !important: rule này từng
   đè height của ảnh trong khung .lz (aspect-ratio) làm ảnh không lấp đầy ô.
   Ảnh trong nội dung soạn thảo do .rte img lo (xem mục .rte).                  */
.bg-white img {
    max-width:100%;
    height:auto;
}
/* ĐÃ GỠ 28/07/2026: ".bg-white h3, .bg-white h2 { font-size:14px }" — rule cũ
   dùng specificity phần tử để ép cỡ chữ, đè lên mọi class component (h2/h3 nào
   cũng bị 14px). Mọi h2/h3 hiện tại đều đã có class khai cỡ chữ riêng qua token. */
/* ĐÃ GỠ 28/07/2026 (BS3 chết): ".home i" (không còn khối .home), ".search"
   (ô tìm kiếm cũ float:right — nay là .pc-search + .search-panel),
   ".dropdown-menu > li > a" (BS5 dùng .dropdown-item, không lồng <li><a>). */
/* Heading "Thông số kỹ thuật" / "Chi tiết sản phẩm" — đồng bộ header khối SP cùng loại
   (chữ đen in hoa đậm + gạch chân xanh, giống .home-block__head) */
.tks-heading {
    position: relative;
    font-size: var(--sd-fs-title);
    font-weight: var(--sd-fw-bold);
    color: var(--sd-text);
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sd-bg-gray);
}
.tks-heading::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 3px; background: var(--sd-primary); border-radius: 2px;
}
/* ── Bảng thông số kỹ thuật (chi tiết SP + so sánh) ───────────────────────────────
   KẺ BẢNG THẬT (<table> + table-layout: fixed): mọi dòng có cột nhãn/giá trị bắt đầu
   đúng một vị trí. Bản trước dựng bằng div flex nên mỗi nhóm tự co theo nội dung,
   chữ so le nhau (user phản ánh 03/08/2026).
   Viền/padding kế thừa rule chung ".item-content table" (lưới #e8eaed, padding 7px 15px). */
.pd-specs { table-layout: fixed; width: 100%; font-size: var(--sd-fs-body); }
.pd-specs__group th {
    background: #f3f4f6;               /* nền xám nhẹ phân tách nhóm */
    font-size: var(--sd-fs-sm);
    font-weight: var(--sd-fw-bold);
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #374151;
    text-align: left;
}
.pd-specs__key { width: 45%; color: #6b7280; }
.pd-specs__val { color: var(--sd-text); word-break: break-word; }

/* Khối thông số ở CỘT PHẢI trang chi tiết SP: dính khi cuộn (≥992px).
   --sv-sticky-top do site.js đặt = chiều cao header sticky nên không bị header che. */
@media (min-width: 992px) {
    .pd-specs-box--sticky { position: sticky; top: var(--sv-sticky-top, 90px); }
    /* Khi bấm "Xem thêm thông số": bảng có thể cao hơn màn hình → cho cuộn TRONG khối,
       nếu không phần cuối bị khuất vĩnh viễn vì khối đang dính. */
    .pd-specs-box.is-open {
        max-height: calc(100vh - var(--sv-sticky-top, 90px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Viền mảnh tách 2 cột */
    .pd-detail-row > [class*="col-lg-8"] { border-right: 1px solid #f0f1f3; }
}
/* Bảng thông số dùng chung cơ chế thu gọn .pd-spec với cột nội dung nên 2 bên cao bằng nhau;
   bảng có margin-bottom 20px từ rule chung → bỏ đi để dải mờ + nút bám sát đáy bảng. */
.pd-spec--specs .pd-specs { margin-bottom: 0; }

/* Mobile: nội dung trước, thông số sau — cần khoảng cách để không dính nhau */
@media (max-width: 991.98px) {
    .pd-specs-box { margin-top: 18px; }
}

@media (max-width: 575.98px) {
    /* Màn hẹp: nhãn nằm trên, giá trị xuống dưới cho đỡ vỡ chữ */
    .pd-specs__row { flex-direction: column; gap: 2px; padding: 9px 0; }
    .pd-specs__key { flex: none; max-width: none; font-size: var(--sd-fs-sm); }
}
/* ĐÃ BỎ 03/08/2026: .bor-top / .bor-gray — viền quanh từng dòng của bảng thông số cũ.
   Bảng nay dùng .pd-specs (1 đường kẻ mảnh mỗi dòng), không view nào còn tham chiếu. */
.compare {
    text-align:center;
    padding-top:10px;
}
.compare label{
    font-weight:500 !important;
    color:#515151;
    
    font-size:14px;
    font-style:italic;
}
/* ĐÃ BỎ 30/07/2026: rule global "input[type=radio] { margin-top:10px !important }" port từ
   site cũ (dành cho radio trang So sánh — nay chức năng đó dùng checkbox .ck-compare).
   Vì là global + !important nên nó đẩy MỌI radio xuống 10px, làm lệch ô chọn ở form đặt
   hàng. Cần canh lề riêng cho radio thì đặt trong khối của trang đó, KHÔNG dùng selector
   global cho thẻ input. */
/* ĐÃ BỎ 03/08/2026: .comparess .col-sm-left — ô nhãn của bảng so sánh cũ.
   Trang so sánh nay dùng .pd-specs.pd-specs--compare. */
/* ĐÃ BỎ 30/07/2026: rule #menu (port site cũ) — không view nào còn dùng id="menu",
   và z-index:9999999999 của nó sẽ đè lên mọi popup/modal nếu markup cũ quay lại. */
.mar-top-15 {
    margin-top:15px;
}
.mar-top-30 {
    margin-top:30px;
}
.mar-top-20 {
    margin-bottom:20px;
}
.mar-bot-40 {
    margin-bottom:40px;
}
.pad-bot-40 {
    padding-bottom:40px;
}
.pad-bot-20 {
    padding-bottom:20px;
}
.pad-top-15 {
    padding-top:15px;
}
.slider {
    width:100%;
    position:relative;
}
/* Breadcrumb — CHUẨN HÓA 28/07/2026 (BS5 flex, một cỡ chữ duy nhất cho cả dải).
   ĐÃ GỠ các rule BS3 cũ: height:35px + overflow:hidden (cắt chữ), li{float:left}
   + li+li:before{float:left} (BS5 breadcrumb đã là flex, divider dùng ::before),
   và "> li h1 {float/height/line-height/font-size:13px}" (ép cỡ chữ H1 lệch với
   các mục còn lại). Mọi mục — kể cả H1 — nay bằng nhau: var(--sd-fs-sm).       */
.breadcrumb {
    padding-left: 0;
    margin-bottom: 10px;
    font-size: var(--sd-fs-sm);
    color: var(--sd-primary-dark);
}
.breadcrumb a {
    color:#515151;
}
.col-lh-30 {
    padding-top:10px;
    height:30px;
    line-height:30px;
    color:#515151;
}
.col-lh-30 b{
    font-weight:500;
    color:var(--sd-primary-dark);
}
.bor-bottom {
    height:1px;
    width:100%;
    border-bottom:dashed 1px #cccccc;
}
.product-name {
    margin-bottom:15px;
    height:36px;
    line-height:18px;
    overflow:hidden;
    font-size:12px;
    text-align:center;
}
.product-name a {
    color:#515151;
    font-weight:bold;
}
.item {
    border:solid 1px #cccccc;
    margin-right:5px;
    padding:10px;
    margin-left:5px;
    overflow:hidden;
}
.product-img {
    width:100%;
    min-height:110px;
}
.product-img img{
    max-width:85%;
    margin-left:auto;
    margin-right:auto;
}
.product-price {
    height:30px;
    line-height:30px;
    text-align:center;
    margin-top:10px;
}
.product-price b{
    color:#ff0000;
    font-size:12px;
}
.index-date {
    font-size:12px;
    color:#717171;
    line-height:20px;
}

/* ============================================================================
   TRANG CHỦ — Khối tin tức (thiết kế lại) + Banner phân tách + Logo đối tác/KH
   ========================================================================== */
/* Banner phân tách trước khối tin tức */
.news-sep-banner { display:block; border-radius:10px; overflow:hidden; }
.news-sep-banner img { display:block; width:100%; height:auto; }

/* Đầu khối tin tức DÙNG CHUNG .home-block__head/.home-block__tabs với khối SP
   (tiêu đề trái, dải danh mục căn phải + nút ☰) — thống nhất 1 định dạng.
   Chỉ tiêu đề tin có class riêng vì không phải link; style khớp .home-block__title. */
.home-news__title {
    margin:0; display:inline-flex; align-items:center; gap:8px;
    font-size:var(--sd-fs-title); font-weight:var(--sd-fw-bold);
    text-transform:uppercase; color:var(--sd-text);
}
/* Tiêu đề tin là LINK tới danh mục gốc — kế thừa màu tối, hover xanh (như tiêu đề khối SP) */
.home-news__title a { display:inline-flex; align-items:center; gap:8px; color:inherit; }
.home-news__title a:hover { color:var(--sd-primary); }

/* Tin nổi bật (mới nhất) */
.news-feature { display:flex; flex-direction:column; height:100%; }
/* Ảnh khối tin trang chủ: PHỦ TRỌN BỀ NGANG (user chốt 03/08/2026).
   Bỏ khung cố định 4:3 + nền xám + padding: ảnh chiếm 100% chiều ngang, chiều cao tự nhiên theo
   tỉ lệ gốc → không còn dải xám hai bên với ảnh dọc/vuông.
   VẪN KHÔNG dùng object-fit:cover: ảnh tin phần lớn là banner CÓ CHỮ, cover sẽ cắt mất chữ
   (đã thử và bỏ ngày 30/07/2026 — đừng quay lại).
   Trang danh mục tin (.nw-hero__img / .nw-item__img) hiện vẫn giữ khung 4:3 cũ; muốn đồng bộ
   thì sửa cả 2 chỗ. */
.news-feature__media {
    display:block; position:relative;
    border-radius:10px; overflow:hidden;
    /* Ghi đè .lz-news (aspect-ratio 400/210) — markup dùng chung class .lz .lz-news cho hiệu ứng
       shimmer; giữ nguyên tỉ lệ ép sẽ cắt mất phần dưới ảnh khi height:auto. */
    aspect-ratio:auto;
}
.news-feature__media img {
    display:block; width:100%; height:auto;
    transition:opacity .3s ease;
}
.news-feature__media:hover img { opacity:.92; }
.news-feature__body { padding-top:12px; }
.news-feature__title {
    margin:0 0 8px; font-size:var(--sd-fs-lg); font-weight:var(--sd-fw-medium); line-height:1.4;
    text-transform:uppercase;
}
.news-feature__title a { color:#222; }
.news-feature__title a:hover { color:var(--sd-primary); }
.news-feature__desc {
    margin:8px 0 0; font-size:var(--sd-fs-body); color:#666; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Tin phụ (danh sách) — cột phải 5 tin, cao BẰNG cột trái (user chốt 31/07/2026).
   Cột Bootstrap đã stretch sẵn, chỉ cần cho .news-list cao 100% rồi chia đều cho các item:
   flex:1 1 0 + căn giữa nội dung theo trục dọc → không còn khoảng trống lệch giữa 2 cột. */
.news-list { display: flex; flex-direction: column; height: 100%; }
.news-list .news-item { flex: 1 1 0; align-items: center; }
.news-list .news-item:last-child { margin-bottom: 0; padding-bottom: 0; }

.news-item {
    display:flex; gap:12px; padding-bottom:14px; margin-bottom:14px;
    border-bottom:1px dashed var(--sd-bg-gray);
}
.news-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
/* Ảnh tin nhỏ ở cột phải: cũng phủ trọn bề ngang ô 130px, cao tự nhiên (xem ghi chú ở
   .news-feature__media). Bỏ nền xám + padding vì không còn letterbox để lấp. */
.news-item__media {
    flex:0 0 130px; width:130px; border-radius:8px; overflow:hidden;
    display:block; align-self:center;
    aspect-ratio:auto;   /* ghi đè .lz-news — xem ghi chú ở .news-feature__media */
}
.news-item__media img {
    display:block; width:100%; height:auto;
    transition:opacity .3s ease;
}
.news-item__media:hover img { opacity:.92; }
.news-item__body { flex:1 1 auto; min-width:0; }
.news-item__title {
    margin:0 0 6px; font-size:var(--sd-fs-lg); font-weight:var(--sd-fw-medium); line-height:1.45;
    text-transform:uppercase;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-item__title a { color:#333; }
.news-item__title a:hover { color:var(--sd-primary); }
.news-item__desc {
    margin:4px 0 0; font-size:var(--sd-fs-sm); color:#777; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Meta ngày đăng + lượt xem */
.news-meta {
    display:flex; flex-wrap:wrap; gap:6px 14px;
    font-size:var(--sd-fs-sm); color:#8a8a8a;
}
.news-meta span { display:inline-flex; align-items:center; gap:5px; }
.news-meta .fa { width:14px; height:14px; }
.news-meta svg { width:14px; height:14px; }

/* Logo đối tác & khách hàng (gộp 1 dải) — tiêu đề dùng .home-block__head + .home-news__title
   như các khối khác (thống nhất UI theme). */
/* Lưới tĩnh khi ≤2 logo (slick không init) — 2 mobile, tối đa 8 PC */
.logo-slider { display:flex; flex-wrap:wrap; justify-content:center; margin:0 -8px; }
.logo-slider.slick-initialized { display:block; }
.logo-slide { flex:0 0 50%; max-width:50%; padding:0 8px; }
@media (min-width:576px){ .logo-slide{ flex-basis:25%; max-width:25%; } }
@media (min-width:992px){ .logo-slide{ flex-basis:12.5%; max-width:12.5%; } }
.slick-initialized .logo-slide { flex:none; max-width:none; }
.logo-box {
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:2/1; padding:10px; margin:8px 0;
    border:1px solid var(--sd-bg-gray); border-radius:8px; background:#fff;
    transition:box-shadow .2s ease, border-color .2s ease; /* KHÔNG transform (không dịch lên) */
}
/* Hover: KHÔNG viền (viền base ẩn đi), chỉ nâng bóng nhẹ; tooltip tên qua thuộc tính title */
.logo-box:hover { box-shadow:0 4px 14px rgba(0,0,0,.10); border-color:transparent; }
.logo-box img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.logo-slider .slick-slide { height:auto; }

/* Responsive khối tin tức */
@media (max-width:575.98px){
    .news-item__media { flex-basis:104px; width:104px; }
    .home-news__title { font-size:var(--sd-fs-lg); }
}
.item-news {
    width:100%;
    display:table;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:dashed 1px #cacaca;
}
.item-news .col-sm-4 {
    padding:0;
}
.item-news .col-sm-8 {
    padding-right:0;
}
.top-img {
    max-height:275px;
    overflow:hidden;
}
.top-img img {
    width:100%;
    max-height:275px;
    object-fit:cover;
}
.top-name {
    margin-top:10px;
    font-size:14px;
    font-weight:bold;
    line-height:1.4em;    
    text-transform:uppercase;
    margin-bottom:10px;
}
.top-name a {
    color:var(--sd-primary);
}
.top-info {
    text-align:justify;
}
.col-sm-4 .top-name {
    text-transform:initial;
    font-weight:500;
}
.s-name {
    border-top:solid 1px var(--sd-bg-gray);
    padding-top:10px;
    margin-top:10px;
    font-size:14px;
}
.s-name a, .i-name a {
    color:#515151;
}
.item-news-info {
    text-align:justify;
}
.item-news {
    display:table;
    width:100%;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:dashed 1px var(--sd-bg-gray);
}
.item-nimg {
    width:250px;
    float:left;
    max-height:140px;
    overflow:hidden;
    margin-right:15px;
}
.item-nimg img{
    object-fit:cover;
    min-width:100%;
    height:140px;
}
.item-news-name {
    font-weight:bold;
    font-size:15px;
    margin-bottom:10px;
    margin-top:0;
}
.item-news-name a {
    color:#515151;
}
.m-title {
    font-size:14px;
    color:var(--sd-primary-dark);
    font-weight:bold;
    text-transform:uppercase;
    height:40px;
    line-height:40px;
}
.m-title a {
    color:#fff;
}
.item-right {
    border: solid 1px #e0e0e0;
    padding-left: 0;
    padding-right: 0;
}
.item-right .m-title {
    background-color:var(--sd-primary);
    padding-left:20px;
    color:#fff;
}
.item-right .item {
    margin-left:0;
    margin-right:0;
    display: table;
    clear: both;
    padding-bottom: 10px;
    padding-right: 7px;
    border:none;
    border-bottom: dashed 1px #dcdcdc;
    width: 100%;
}
.item-right ul{
    margin:10px 0 10px 0;
    padding:0;
}
.item-right ul li {
    list-style:none;
    margin-left:20px;
    margin-right:15px;
    padding-bottom:5px;
    border-bottom:dashed 1px #cccccc;
    margin-bottom:5px;
}
.item-right ul li:last-child {
    border-bottom:none;
}
.i-name {
    font-size:13px;
}
.i-img {
    float:left;
    padding-right:10px;
    padding-left:10px;
    width:30%;
    min-height:70px;
}
.i-img img {
    min-height:50px;
    object-fit:cover;
}
.pager li > a, .pager li > span {
    border-radius:0;
}
.pager .active a {
    background-color:var(--sd-primary-dark);
    color:#fff;
}
.same {
    border-bottom:dashed 1px #cccccc;
    margin-top:30px;
    color:var(--sd-primary-dark);
    line-height:30px;
}
.price {
    display: inline-block;
    overflow: hidden;
    font-size: 26px;
    color: #d0021b;
    vertical-align: middle;
    margin-right: 5px;
    font-weight:bold;
    height:45px;
    line-height:45px;
}
.price span{
    margin-left:10px;
    font-size:13px;
    color:#9c9c9c;
    font-weight:500;
    font-style:italic;
}
.price span i {    
    color:#9c6c00;
}
.img-item {
    padding-top:20px;
    padding-bottom:20px;
}
.img-cart {
    max-width:80px;
    max-height:35px;
}
.item-price {
    font-weight:bold;
    color:#ff0000;
    font-size:13px;
}
.item-payment {
    margin-top:30px;
    color:#fff;
    padding:10px 30px;
    background-color:#036ec1;
}
.item-payment:hover {
    color:var(--sd-accent);
}
.form-payment {
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}
.font-11 {
    font-size:11px;
}
table {
    border:solid 1px #dadada;
}
table td, table th {
    border-right:solid 1px #dadada;    
}
.thead-inverse {
    background-color:var(--sd-primary);
    color:#fff;
    text-align:center;
}
.item-content h2, .item-content h3, .item-content h4 {
    font-size:15px;
    font-weight:bold;
}
.item-content table
{
    width:100% !important;
    border-collapse: collapse;
    margin-bottom: 20px;              /* trước đây không có margin-bottom → dính khối dưới */
    border: 1px solid #e8eaed;        /* border nhạt hơn (#ccc → #e8eaed) */
}
/* Mọi ô (td/th) trong bảng nội dung SP đều có border (dạng lưới, như ảnh) */
.item-content table td, .item-content table th{
    padding:7px 15px;
    border: 1px solid #e8eaed;
    vertical-align: top;
}
    .item-content table td p:last-child,
    .item-content table td ul:last-child {
        margin-bottom: 0 !important;
    }
    .item-content table td ul {
        padding-left: 17px;
    }
.readmore {
    float:right;
    font-size:13px;
}
/* ── FOOTER (redesign xanh #006096 — 26/07/2026) ──────────────────────────────
   Nền xanh thương hiệu, góc trên bo cong, đường phân cách copyright cong mềm.
   Token màu footer khai báo cục bộ. */
.site-footer {
    --ft-bg:      #1b8bcb;   /* xanh nền chính */
    --ft-title:   #ffffff;   /* tiêu đề cột (trắng) */
    --ft-accent:  #ffd800;   /* gạch nhấn dưới tiêu đề (màu thứ 2) */
    --ft-text:    #ffffff;   /* chữ chính (trắng) */
    --ft-text-mut:rgba(255,255,255,.62);  /* nhãn phụ (label) */
    position: relative;
    clear: both;
    overflow: hidden;               /* để ảnh nền bo theo góc cong */
    /* margin-top: 0 — trước đây 40px lộ nền body #f8f8f8 (gần trắng) trên các trang nền xám
       (SP/danh mục) tạo dải trắng. Bỏ để footer sát ngay khối nội dung. */
    padding-top: 64px;
    color: var(--ft-text);
    font-size: var(--sd-fs-body);
    background-color: var(--ft-bg);
    /* Nền: chỉ 1 dải gradient bottom→top (đậm ở đáy cho dễ đọc, nhạt dần lên).
       Ảnh nền đặt ở ::before (opacity .6) để chồng mờ lên gradient này. */
    background-image: linear-gradient(to top, rgba(0,48,78,.72) 0%, rgba(0,74,116,.20) 100%);
    /* Góc trên bo cong (kiểu ảnh Sellzy) */
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}
/* Ảnh nền footer — phủ toàn footer, căn từ ĐÁY lên, opacity .6 (chồng mờ lên gradient) */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/upload/Icon/footer-bg.avif") no-repeat center bottom / cover;
    opacity: .3;
    z-index: 0;
    pointer-events: none;
}
/* Viền trắng mảnh lượn theo mép cong phía trên footer (border bám radius) */
.site-footer::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 44px;
    border-top: 2px solid rgba(255,255,255,.9);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    pointer-events: none; z-index: 2;
}
/* Nội dung nổi trên ảnh nền */
.site-footer > * { position: relative; z-index: 1; }
.site-footer a { color: var(--ft-text); text-decoration: none; transition: color .18s; }
.site-footer a:hover { color: var(--ft-accent); }
.ft-cols { row-gap: 30px; }
.ft-col { min-width: 0; }

/* Tiêu đề cột — trắng + 2 gạch chân chồng nhau 2 màu (kiểu Sellzy) */
.ft-title {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 14px;
    color: var(--ft-title);
    font-size: var(--sd-fs-lg);
    font-weight: var(--sd-fw-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid rgba(255,255,255,.18);  /* line dài (màu 1) */
}
.ft-title::after {   /* line ngắn đè lên (màu 2) */
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px; height: 2px;
    background: var(--ft-accent);
}

/* ── HÀNG 1: khối thương hiệu, CĂN GIỮA (bố cục mới 03/08/2026) ──────────────
   Logo + tên + mô tả + dải [Bản đồ | Mạng xã hội | Bộ Công Thương] đều căn giữa;
   3 khối trong dải có CÙNG CHIỀU CAO (--ft-bar-h) nên nhìn thẳng hàng. */
.ft-brand {
    text-align: center;
    padding-bottom: 28px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.ft-logo { display: inline-block; margin-bottom: 14px; }
.ft-logo img { max-height: 52px; width: auto; }
.ft-logo__txt { font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold); color: #fff; }
.ft-brandname { color: #fff; font-weight: var(--sd-fw-medium); font-size: var(--sd-fs-lg); margin-bottom: 10px; }
/* Mô tả giới hạn bề ngang cho dễ đọc khi căn giữa (dòng quá dài rất khó bắt mắt) */
.ft-desc { color: var(--ft-text); line-height: 1.7; margin: 0 auto 18px; max-width: 760px; }

/* Dải ngang 3 khối cùng chiều cao */
.ft-bar {
    --ft-bar-h: 44px;
    display: flex; flex-wrap: wrap;
    align-items: stretch;          /* 3 khối kéo bằng nhau, không căn theo baseline */
    justify-content: center;
    gap: 12px;
}
.ft-bar__item {
    height: var(--ft-bar-h);
    display: inline-flex; align-items: center;
    border-radius: 40px;
    padding: 0 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.35);
}
.ft-map {
    gap: 8px;
    color: #fff;
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
    cursor: pointer; transition: background .18s, border-color .18s, color .18s;
}
.ft-map:hover { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.ft-map .fa { font-size: 15px; }

.ft-social { gap: 10px; margin: 0; }
.ft-social__lb { color: var(--ft-text-mut); font-size: var(--sd-fs-sm); }
.ft-soc {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    transition: background .18s, color .18s, transform .18s;
}
.ft-soc:hover { background: var(--sd-primary); color: #fff; transform: translateY(-2px); }
.ft-soc svg { width: 15px; height: 15px; }
.ft-soc .fa { font-size: 16px; }

/* Ảnh "Đã thông báo Bộ Công Thương": co theo chiều cao dải, giữ đúng tỷ lệ.
   Nền trắng mờ + padding hẹp để ảnh gốc (nền trong suốt) không bị chìm. */
.ft-bct { padding: 0 14px; }
.ft-bct img { height: calc(var(--ft-bar-h) - 14px); width: auto; }

/* Cột 2: thông tin liên hệ (kiểu vilaco) */
.ft-contact { list-style: none; margin: 0; padding: 0; }
.ft-contact li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ft-contact__ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
}
.ft-contact__ic .fa { font-size: 16px; }
.ft-contact__tx { min-width: 0; line-height: 1.5; }
.ft-contact__lb {
    display: block; color: var(--ft-text-mut);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em;
}
.ft-contact__tx a { color: #fff; font-weight: var(--sd-fw-medium); word-break: break-word; }
.ft-contact__tx a:hover { color: var(--ft-accent); }

/* Cột 3 & 4: danh sách link — bullet chấm tròn xám nhạt (như submenu mobile) */
.ft-links { list-style: none; margin: 0; padding: 0; }
.ft-links li { line-height: 1.35; }
.ft-links li + li { margin-top: 2px; }
.ft-links a {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 0; color: var(--ft-text);
}
.ft-links a::before {
    content: ""; flex: 0 0 auto;
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55);
}
.ft-links a:hover { color: var(--ft-accent); }
.ft-links a:hover::before { background: var(--ft-accent); }

/* Thanh dưới cùng: copyright — căn giữa, KHÔNG đường viền/phân cách */
.ft-bottom {
    margin-top: 34px;
    padding: 18px 0 22px;
}
.ft-bottom__in {
    text-align: center;
    color: var(--ft-text-mut); font-size: var(--sd-fs-sm);
}
.ft-bottom__in a { color: #fff; }
.ft-bottom__in a:hover { color: var(--ft-accent); }

/* ── Trang tĩnh: Điều khoản / Liên hệ ────────────────────────────────────────── */
.page-title {
    margin: 0 0 18px;
    font-size: var(--sd-fs-title);
    font-weight: var(--sd-fw-bold);
    color: var(--sd-text);
}
.policy-content { line-height: 1.75; }
.policy-content img { max-width: 100%; height: auto; }
.policy-list { list-style: none; margin: 0; padding: 0; }
.policy-list li + li { margin-top: 8px; }
.policy-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border: 1px solid var(--sd-border); border-radius: 6px;
    color: var(--sd-text); background: var(--sd-bg-soft); transition: all .18s;
}
.policy-list a:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.policy-list .fa { color: var(--sd-primary); }
.policy-side { list-style: none; margin: 0; padding: 0; }
.policy-side li { border-bottom: 1px dashed var(--sd-border); }
.policy-side a { display: block; padding: 9px 4px; color: var(--sd-text); }
.policy-side a:hover, .policy-side li.active > a { color: var(--sd-primary); font-weight: var(--sd-fw-medium); }
.policy-side .fa { color: var(--sd-primary); font-size: 12px; }

/* ── Giới thiệu (/gioi-thieu + /gioi-thieu/{slug}) ────────────────────────────
   Khung trang dùng chung .cat-crumb + .cat-card với trang danh mục SP.
   Card: ảnh 16/9 tràn viền (cover) → tiêu đề → mô tả → "Xem chi tiết".        */
.lz-about { aspect-ratio: 16 / 9; display: block; }
.lz-about img { width: 100%; height: 100%; object-fit: cover; }
/* Ảnh trong thẻ giới thiệu luôn lấp đầy khung 16/9 — thắng rule port cũ .bg-white img */
.about-card .lz-about img { height: 100%; }

/* Thẻ trắng độc lập trên nền xám body — KHÔNG viền, KHÔNG shadow.
   Hover: chỉ zoom nhẹ ảnh (xem .about-card__img img).                           */
.about-card {
    display: flex; flex-direction: column; height: 100%;
    border-radius: 10px; overflow: hidden;
}
.about-card__img { background: var(--sd-bg-soft); overflow: hidden; }
.about-card__img img { transition: transform .35s ease; }
.about-card:hover .about-card__img img { transform: scale(1.04); }
.about-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 16px; }
.about-card__name {
    margin: 0 0 8px;
    font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-bold); line-height: 1.4;
}
.about-card__name a { color: var(--sd-text); }
.about-card__name a:hover { color: var(--sd-primary); }
/* Mô tả: KHÔNG cắt chuỗi phía server — giới hạn 4 dòng bằng CSS, dư thì "…" */
.about-card__info {
    flex: 1 1 auto; margin: 0 0 12px;
    color: var(--sd-text-muted); font-size: var(--sd-fs-body); line-height: var(--sd-lh);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
}
.about-card__more {
    align-self: flex-start;
    color: var(--sd-primary); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
}
.about-card__more:hover { color: var(--sd-primary-dark); text-decoration: none; }
.about-card__more .fa { font-size: var(--sd-fs-sm); }

/* Trang chi tiết giới thiệu — đoạn mô tả dẫn nhập */
.about-intro {
    margin-bottom: 16px; padding-left: 14px;
    border-left: 3px solid var(--sd-primary);
    color: var(--sd-text); font-weight: var(--sd-fw-medium);
}

/* ── .rte — CHUẨN HÓA NỘI DUNG SOẠN THẢO (dùng CHUNG toàn site) ───────────────
   Áp cho MỌI khối HTML lấy từ DB/editor: giới thiệu, điều khoản, tin tức,
   chi tiết sản phẩm, dịch vụ, nav. Mục tiêu: cùng một font/nhịp chữ, bảng –
   ảnh – iframe không tràn/méo trên mọi thiết bị.
   Nội dung cũ dán từ Word thường có style inline (font-family/size) → ép về
   token của site bằng !important, ảnh/khung nhúng bỏ width/height cứng.        */
.rte {
    font-family: var(--sd-font);
    font-size: var(--sd-fs-body);
    line-height: 1.75;
    color: var(--sd-text);
    overflow-wrap: break-word;
}
.rte, .rte * { font-family: var(--sd-font) !important; }
.rte [style*="font-size"] { font-size: inherit !important; }
.rte [style*="background-color"] { background-color: transparent !important; }

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte p { margin: 0 0 12px; }
.rte a { color: var(--sd-primary); text-decoration: none; }
/* Hover CHỈ đổi màu, KHÔNG gạch chân — thống nhất với link toàn site (user chốt 29/07/2026) */
.rte a:hover { color: var(--sd-primary-dark); text-decoration: none; }
.rte strong, .rte b { font-weight: var(--sd-fw-medium); }   /* 600 — user chốt 29/07/2026, KHÔNG dùng 700 */

/* Tiêu đề trong nội dung — thang cỡ chữ theo token, không hardcode px */
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    margin: 20px 0 10px;
    font-weight: var(--sd-fw-bold); line-height: 1.35; color: var(--sd-text);
}
/* h1/h2/h3 trong nội dung ĐỒNG NHẤT = --sd-fs-title (18px, mọi kích thước màn hình)
   — bỏ hẳn +4px/+2px của desktop (user chốt 30/07/2026). */
.rte h1, .rte h2, .rte h3 { font-size: var(--sd-fs-title); }
.rte h4 { font-size: var(--sd-fs-lg); }
.rte h5, .rte h6 { font-size: var(--sd-fs-body); }

/* Danh sách — trả lại marker (BS5 reset làm mất thụt lề của nội dung dán vào) */
.rte ul, .rte ol { margin: 0 0 12px; padding-left: 24px; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte ul ul { list-style: circle; }
.rte li { margin-bottom: 6px; }
.rte li > ul, .rte li > ol { margin-top: 6px; margin-bottom: 0; }

/* Bảng — luôn vừa khung, cuộn ngang khi hẹp, bỏ width cứng của HTML cũ */
.rte table {
    width: 100% !important; max-width: 100%; height: auto !important;
    margin: 0 0 14px;
    border-collapse: collapse;
    font-size: var(--sd-fs-body);
}
.rte table th, .rte table td {
    padding: 8px 10px; border: 1px solid var(--sd-border);
    vertical-align: top; height: auto !important;
}
.rte table th { background: var(--sd-bg-soft); font-weight: var(--sd-fw-medium); text-align: left; }
.rte table tr:nth-child(even) td { background: #fbfbfb; }
@media (max-width: 767px) {
    .rte table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Ảnh — không méo, không tràn, bỏ width/height cứng trong HTML cũ */
.rte img {
    max-width: 100% !important; height: auto !important;
    display: inline-block; object-fit: contain;
}
.rte figure { max-width: 100%; margin: 0 0 14px; }
.rte figcaption { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); text-align: center; }

/* Video / bản đồ nhúng — khung 16:9 co giãn */
.rte iframe, .rte video, .rte embed, .rte object {
    display: block; width: 100% !important; max-width: 100%;
    aspect-ratio: 16 / 9; height: auto !important; border: 0;
}
/* Bản đồ nhúng thường thấp hơn — giữ tỷ lệ thoáng hơn */
.rte iframe[src*="google.com/maps"] { aspect-ratio: 16 / 7; }

.rte blockquote {
    margin: 0 0 14px; padding: 10px 14px;
    border-left: 3px solid var(--sd-primary); background: var(--sd-bg-soft);
    color: var(--sd-text);
}
.rte pre {
    margin: 0 0 14px; padding: 12px; overflow-x: auto;
    background: var(--sd-bg-soft); border-radius: 6px; font-size: var(--sd-fs-sm);
}
.rte hr { margin: 18px 0; border-top: 1px solid var(--sd-border); opacity: 1; }

/* Liên hệ */
.contact-info { list-style: none; margin: 0 0 20px; padding: 0; }
.contact-info li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--sd-border); }
.contact-info li:last-child { border-bottom: 0; }
.contact-info__ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--sd-bg-soft); color: var(--sd-primary);
}
.contact-info__lb { display: block; color: var(--sd-text-muted); font-size: var(--sd-fs-sm); }
.contact-info__tx a { color: var(--sd-text); font-weight: var(--sd-fw-medium); }
.contact-info__tx a:hover { color: var(--sd-primary); }
.contact-map iframe { width: 100%; height: 340px; border: 0; border-radius: 8px; }
.contact-form .form-label { font-weight: var(--sd-fw-medium); }
.contact-form .form-control { font-size: var(--sd-fs-body); }
#page {
    -webkit-box-shadow: 2px 2px 5px 2px rgba(209,209,209,1);
    -moz-box-shadow: 2px 2px 5px 2px rgba(209,209,209,1);
    box-shadow: 2px 2px 5px 2px rgba(209,209,209,1);
}
/* ── Hỗ trợ trực tuyến (FAB) + nút Về đầu trang — clone vilacojsc, màu XANH ─────
   Nút tròn nổi góc phải-dưới → bấm mở panel danh sách liên hệ (label + số, icon
   màu, mũi tên); click ra ngoài / Escape để đóng. Dùng --sd-primary (#007cc2). */
.osc-fab {
    position: fixed;
    right: 22px;
    bottom: 96px;           /* FAB nằm TRÊN nút Về đầu trang */
    z-index: 1080;          /* dưới overlay(1090)/drawer(1100) để không đè menu mobile */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;   /* vùng trống không chặn click; chỉ nút + panel mở mới nhận */
}
.osc-panel {
    width: 320px;
    max-width: calc(100vw - 44px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    overflow: hidden;
    transform-origin: bottom right;
    transform: translateY(16px) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
}
.osc-fab.osc-open .osc-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.osc-panel__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark));
}
.osc-panel__head span  { font-size: 15px; font-weight: 700; }
.osc-panel__head small { font-size: 12px; opacity: .85; }
.osc-panel__list { padding: 6px; }
.osc-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .16s ease;
}
.osc-item:hover { background: #f3f4f6; }
.osc-item:not(:last-child)::after {   /* đường phân tách, thụt sau icon */
    content: "";
    position: absolute;
    left: 61px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: #eef0f2;
}
.osc-item__ico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.osc-item__ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.osc-item__ico svg { display: block; }
.osc-item__text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.osc-item__text b     { font-size: 14.5px; font-weight: 700; color: #1f2430; }
.osc-item__text small { font-size: 13px; font-weight: 600; color: #6b7280; letter-spacing: .2px; }
.osc-item__arrow { flex: none; color: #c2c7cf; transition: transform .16s ease, color .16s ease; }
.osc-item:hover .osc-item__arrow { color: var(--sd-primary); transform: translateX(3px); }
.osc-item.hidden { display: none; }
@media (max-width: 767.98px) { .osc-item--desktop-only { display: none; } }
@media (min-width: 768px)    { .osc-item--mobile-only  { display: none; } }

.osc-toggle {
    position: relative;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    background: var(--sd-primary);
    box-shadow: 0 6px 20px rgba(0, 124, 194, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.osc-toggle:hover { transform: scale(1.06); }
.osc-toggle::before {   /* vòng pulse khi đóng */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 124, 194, .5);
    animation: oscPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes oscPulse { to { box-shadow: 0 0 0 18px rgba(0, 124, 194, 0); } }
.osc-toggle__open, .osc-toggle__close { position: absolute; transition: opacity .2s ease, transform .25s ease; }
.osc-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.osc-fab.osc-open .osc-toggle { background: #6b7280; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.osc-fab.osc-open .osc-toggle::before { animation: none; opacity: 0; }
.osc-fab.osc-open .osc-toggle__open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.osc-fab.osc-open .osc-toggle__close { opacity: 1; transform: rotate(0) scale(1); }
@media (max-width: 575px) {
    .osc-fab { right: 16px; bottom: 84px; }
    .osc-toggle { width: 52px; height: 52px; }
}

/* Nút "Về đầu trang" — vòng progress theo % cuộn (clone vilacojsc). */
.scroll-top {
    position: fixed;
    right: 28px;
    bottom: 26px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    z-index: 1082;          /* dưới overlay(1090)/drawer(1100) để không đè menu mobile */
    opacity: 1;
    visibility: hidden;
    transform: translateY(45px);
    transition: all 300ms linear;
}
.scroll-top.show { visibility: visible; transform: translateY(0); }
.scroll-top .progress-circle { color: var(--sd-primary); border-radius: 50%; background: #fff; }
.scroll-top .progress-circle path {
    fill: none;
    stroke: var(--sd-primary);
    stroke-width: 8px;
    box-sizing: border-box;
    transition: all 400ms linear;
}
.scroll-top::after {   /* vòng viền mảnh bao ngoài */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--sd-primary);
    pointer-events: none;
}
.scroll-top__arrow {   /* mũi tên lên căn giữa (giống glyph arrow-up của vilaco) */
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    color: var(--sd-primary);
    z-index: 1;
}
.scroll-top__arrow path { fill: currentColor; }
@media (max-width: 575px) {
    .scroll-top { right: 18px; bottom: 18px; }
}

@media (min-width: 768px) {
    .item-content {
        min-height: 600px;
    }
}


@media (min-width: 769px) and (max-width: 1024px) {
    .support b {
        font-size: 14px !important;
    }

    .support {
        margin-top: 15px;
    }

    footer iframe {
        width: 100%;
    }
}


@media (max-width: 768px) {

    footer iframe {
        width: 100%;
    }
}


@media (max-width: 767px) {
    .product-price b {
        font-size: 11px;
    }

    #osdhtmltooltip {
        display: none !important;
    }

    .product-img {
        min-height: 100px;
    }

    footer iframe {
        width: 100%;
    }
}


/* ĐÃ GỠ 28/07/2026: @media 482–768px chỉ còn 2 rule BS3 chết —
   "header, nav { display:none }" (markup mới không có thẻ <header>/<nav>) và
   ".item-news .col-xs-12" (col-xs-12 là lớp lưới BS3, markup nay dùng col-12). */


@media (max-width: 481px) {

    .item-news-name {
        clear: both;
        padding-top: 10px;
    }


    .item-nimg {
        width: 100%;
    }

    .item-news .col-sm-8 {
        padding-left: 0;
    }
}

@media (min-width: 1200px)
{
    .container {
        width: 100%;
        max-width:1440px
    }
}


/* ============================================================================
   4. LIGHTBOX .vlb (từ vilacojsc — assets/js/lightbox.js)
   ========================================================================== */
   15. LIGHTBOX ẢNH (module .vlb — assets/js/lightbox.js)
   ==========================================================================
   Thay Fancybox v5 (143 KB JS + 24 KB CSS) bằng bản tự viết ~8 KB. Dùng chung
   cho gallery sản phẩm và album nhà máy ở footer → UI xem ảnh đồng nhất.
   ========================================================================== */

@keyframes vlb-spin { to { transform: rotate(360deg); } }

html.vlb-open { overflow: hidden; }

/* Khi mở lightbox thì giấu các nút nổi (hỗ trợ trực tuyến z-index 9000, về đầu trang
   z-index 10000) — chúng vốn cao hơn mọi popup của theme nên sẽ đè lên lớp phủ. */
html.vlb-open .osc-fab,
html.vlb-open .scroll-top { display: none !important; }
/* Ẩn 2 nút nổi khi mở: modal Bootstrap (Quick View/Bản đồ), drawer menu mobile,
   sidebar tìm kiếm — để không đè lên các lớp đó. */
body.modal-open .osc-fab,
body.modal-open .scroll-top,
body.drawer-open .osc-fab,
body.drawer-open .scroll-top,
body.search-open .osc-fab,
body.search-open .scroll-top { display: none !important; }

.vlb {
    position: fixed;
    inset: 0;
    /* Cao hơn mọi lớp nổi của theme (sidebar tìm kiếm 99999, drawer 9999, scroll-top 10000). */
    z-index: 1000000;
    display: flex;
    flex-direction: column;
}
.vlb[hidden] { display: none; }

.vlb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 14, .93);
}

/* ── Thanh trên: đếm ảnh + đóng ──────────────────────────────────────────── */
.vlb__bar {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* flex-end + margin-right:auto ở bộ đếm, KHÔNG dùng space-between: gallery 1 ảnh giấu
       bộ đếm đi, space-between sẽ kéo nút đóng chạy sang trái. */
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 600;
}
.vlb__counter { margin-right: auto; }
.vlb__close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.vlb__close:hover { background: rgba(255, 255, 255, .24); }

/* ── Khung trượt ─────────────────────────────────────────────────────────── */
.vlb__viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
    touch-action: pan-y;      /* vuốt ngang do JS xử lý, vuốt dọc trả về trình duyệt */
    cursor: grab;
}
.vlb__viewport:active { cursor: grabbing; }
/* Chỉ có 1 ảnh: không kéo được nên đừng mời gọi bằng con trỏ "nắm". */
.vlb.is-single .vlb__viewport,
.vlb.is-single .vlb__viewport:active { cursor: default; }

.vlb__track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.vlb__slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}
/* Ảnh chỉ hiện khi ĐÃ tải xong (JS gắn .is-loaded) → không vẽ dở từng dải. */
.vlb__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease;
    -webkit-user-select: none;
    user-select: none;
}
.vlb__slide.is-loaded img { opacity: 1; }
.vlb__slide.is-broken img { opacity: .25; }

.vlb__spin {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vlb-spin .7s linear infinite;
}
.vlb__slide.is-loaded .vlb__spin { display: none; }

/* ── Nút trước / sau ─────────────────────────────────────────────────────── */
.vlb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, opacity .2s ease;
}
.vlb__nav[hidden] { display: none; }   /* [hidden] phải thắng display:flex ở trên */
.vlb__nav:hover { background: rgba(255, 255, 255, .3); }
.vlb__nav[disabled] { opacity: .25; cursor: default; }
.vlb__nav[disabled]:hover { background: rgba(255, 255, 255, .14); }
.vlb__nav--prev { left: 16px; }
.vlb__nav--next { right: 16px; }

/* ── Chú thích + dải thumb ───────────────────────────────────────────────── */
.vlb__caption {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 8px 16px;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}
.vlb__caption[hidden] { display: none; }

.vlb__thumbs {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 10px 16px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.vlb__thumbs[hidden] { display: none; }
/* margin:auto trên track con → căn giữa khi ít ảnh, tự dạt trái khi tràn (không
   mất ảnh đầu như justify-content:center). */
.vlb__thumbs-in {
    display: flex;
    gap: 8px;
    width: max-content;
    margin: 0 auto;
}
.vlb__thumbs::-webkit-scrollbar { height: 4px; }
.vlb__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 2px; }

.vlb__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease;
}
.vlb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlb__thumb:hover { opacity: .85; }
.vlb__thumb.is-active { opacity: 1; border-color: var(--theme-color); }

@media (max-width: 767.98px) {
    .vlb__nav { width: 40px; height: 40px; }
    .vlb__nav--prev { left: 6px; }
    .vlb__nav--next { right: 6px; }
    .vlb__thumb { width: 52px; height: 52px; }
    .vlb__thumbs { padding: 8px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .vlb__track { transition: none; }
}


/* ── Khối "Thông tin sản phẩm": typography + thu gọn/xem thêm ─────────────── */

/* Full width theo khung container; giãn dòng 1.9 cho dễ đọc.
   Ảnh trong nội dung căn giữa, bo góc nhẹ cho đồng bộ với gallery. */
.pd-info__body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--body-color);
}
/* ── Nhịp dọc: mọi khối dùng CHUNG một khoảng cách đáy (18px) nên không có chỗ nào
   dính vào nhau; tiêu đề lấy thêm khoảng thở phía trên để tách khỏi khối trước.
   Phần tử cuối cùng luôn bỏ margin đáy để không đội khung. ─────────────────── */
.pd-info__body > *:last-child { margin-bottom: 0; }

.pd-info__body p { margin: 0 0 18px; }
.pd-info__body ul,
.pd-info__body ol { margin: 0 0 18px; padding-left: 22px; }
.pd-info__body li { margin-bottom: 7px; }
/* Theme đặt .blog-content li/ul/ol margin-bottom !important → phải cùng vũ khí mới thắng. */
.pd-info__body li:last-child { margin-bottom: 0 !important; }
/* Danh sách lồng nhau: sát vào mục cha, không cộng dồn 18px. */
.pd-info__body li > ul,
.pd-info__body li > ol { margin: 7px 0 0 !important; }

.pd-info__body h2,
.pd-info__body h3,
.pd-info__body h4 {
    font-weight: 700;
    line-height: 1.5;
    color: var(--title-color);
    margin: 30px 0 12px;
}
.pd-info__body h2,
.pd-info__body h3 { font-size: 18px; }
.pd-info__body h4 { font-size: 16px; }
/* Tiêu đề mở đầu khối / hai tiêu đề liền nhau → không nhân đôi khoảng trống. */
.pd-info__body > :first-child { margin-top: 0; }
.pd-info__body h2 + h3,
.pd-info__body h3 + h4,
.pd-info__body h2 + h4 { margin-top: 16px; }

.pd-info__body strong, .pd-info__body b { color: var(--title-color); font-weight: var(--sd-fw-medium); }

.pd-info__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 22px auto;
    border-radius: 10px;
}
/* Ảnh nằm trong ô bảng / mục danh sách: giữ theo dòng chữ, không tách khối. */
.pd-info__body td img,
.pd-info__body li img { display: inline-block; margin: 0; }

/* iframe (video YouTube nhúng): theme ép min-height 450px + height:auto !important
   → trên mobile khung rộng ~360px mà vẫn cao 450px, hở hai dải đen rất xấu.
   Ép về khung 16:9 co giãn theo bề ngang (cần !important để thắng rule của theme). */
.pd-info__body iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    margin: 22px auto;
    border: 0;
    border-radius: 10px;
}

/* ── Bảng: rộng hết khung, ô thoáng; tràn thì CUỘN NGANG trong khung riêng
   (JS bọc mỗi <table> bằng .pd-tbl) chứ không phá layout trang. ────────────── */
.pd-tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
}
.pd-info__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;                       /* khoảng cách do .pd-tbl đảm nhiệm */
}
/* Chưa kịp bọc (JS lỗi) thì bản thân bảng vẫn cuộn được. */
.pd-info__body > table { display: block; overflow-x: auto; margin-bottom: 18px; }
.pd-info__body th,
.pd-info__body td {
    padding: 7px 15px;
    border: 1px solid var(--border-color);
    vertical-align: top;
    text-align: left;
}
.pd-info__body th { background: var(--smoke-color); font-weight: 700; color: var(--title-color); }
/* TinyMCE bọc mọi thứ trong <p>: thẻ p cuối trong ô phải bỏ margin, nếu không
   ô bảng bị đội thêm 18px và khung vỡ nhịp. */
.pd-info__body td > p:last-child,
.pd-info__body th > p:last-child { margin-bottom: 0; }
/* Ảnh trong nội dung: khung shimmer trong lúc tải, chỉ fade-in khi tải XONG → không
   vẽ dở từng dải. Script imgfx ở <head> gắn .is-loaded thẳng lên <img> (SEL có
   '.pd-info__body img'). Kèm loading=lazy/decoding=async + width/height thật do
   HtmlTextHelper.OptimizeContentImages() chèn server-side → khung ảnh được giữ chỗ
   sẵn nên shimmer hiện đúng kích thước và không nhảy layout khi ảnh về. */
.imgfx-on .pd-info__body img:not(.is-loaded) {
    background-image: linear-gradient(100deg, #eceff1 30%, #f4f6f7 50%, #eceff1 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.imgfx-on .pd-info__body img {
    opacity: 0;
    transition: opacity .35s ease;
}
.imgfx-on .pd-info__body img.is-loaded {
    opacity: 1;
    background: none;
    animation: none;
}
.pd-info__body blockquote {
    margin: 0 0 18px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--theme-color);
    font-style: italic;
    color: var(--title-color);
}

/* Thu gọn: chiều cao phải KHỚP hằng số CLAMP trong product-gallery.js.
   margin-top thay cho khoảng cách mà thanh tab .product-tab-style1 (đã bỏ) từng tạo ra. */
.pd-info {
    position: relative;
    margin-top: 40px;
}
/* Thời lượng transition do JS đặt inline (tỉ lệ với quãng giãn) — giá trị ở đây chỉ là
   mặc định phòng khi JS chưa kịp gán. */
.pd-info.is-clamped .pd-info__body {
    max-height: 420px;
    overflow: hidden;
    transition: max-height .8s cubic-bezier(.4, 0, .2, 1);
}
/* Dải mờ báo "còn nữa" — mờ dần cùng nhịp với lúc khối bắt đầu giãn. */
.pd-info__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 46px;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92%);
    transition: opacity .45s ease;
}
.pd-info:not(.is-clamped) .pd-info__fade,
.pd-info.is-open .pd-info__fade { opacity: 0; }

.pd-info__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px auto 0;
    padding: 0 26px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pd-info__more:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}
.pd-info__more i { font-size: 14px; transition: transform .2s ease; }
.pd-info__more:hover i { transform: translateY(2px); }
/* Nút mờ dần + trôi xuống trước khi bị gỡ khỏi DOM (JS đợi 260ms). */
.pd-info__more.is-hiding {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* ── "Sản phẩm cùng danh mục": tiêu đề · mũi tên · nút Xem thêm ───────────── */
.pd-related { position: relative; }

/* min-height = chiều cao mũi tên → hàng tiêu đề và cụm mũi tên (đặt tuyệt đối
   chồng lên hàng này ở desktop) luôn khớp nhau, không lệch dòng. */
.pd-related__head {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 20px;
}

/* Mốc định vị cho mũi tên — bọc riêng carousel để mobile lấy được đúng
   50% CHIỀU CAO CARD (nếu neo theo cả khối thì tiêu đề + nút "Xem thêm"
   kéo tâm lệch xuống dưới). */
.pd-related__slider { position: relative; }

.pd-related__nav {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* KHÔNG viền, KHÔNG nền — chỉ còn mũi tên. Bóng trắng mảnh để nét mũi tên vẫn
   đọc được khi đè lên vùng ảnh sẫm màu của card. */
.pd-related__arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--title-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 4px rgba(255, 255, 255, .95);
    transition: color .2s ease;
}
.pd-related__arrow:hover { color: var(--theme-color); }

/* Desktop: bật lên hàng tiêu đề, góc phải.
   bottom:100% = mép trên slider; cộng margin-bottom đúng bằng khoảng cách
   .pd-related__head (20px) → mũi tên nằm gọn trong hàng tiêu đề. */
@media (min-width: 768px) {
    .pd-related__nav {
        right: 0;
        bottom: 100%;
        margin-bottom: 20px;
        height: 44px;
    }
}

/* Mobile: đè hai mép slider, canh giữa theo chiều cao card. Vùng trống giữa hai
   nút không được chặn cú vuốt → nav bỏ nhận chuột, chỉ 2 nút nhận lại. */
@media (max-width: 767.98px) {
    .pd-related__nav {
        top: 50%;
        left: -6px;
        right: -6px;
        transform: translateY(-50%);
        justify-content: space-between;
        pointer-events: none;
        z-index: 2;
    }
    .pd-related__arrow {
        pointer-events: auto;
        font-size: 20px;
    }
}

.pd-related__more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

@media (max-width: 767.98px) {
    .pd-info__body { font-size: 15px; line-height: 1.8; }
    /* Cỡ tiêu đề giữ nguyên 18/16px ở mọi khổ màn hình — chỉ ô bảng bóp lại cho đỡ tràn. */
    .pd-info__body th,
    .pd-info__body td { padding: 7px 10px; }
}
/* Kéo bằng chuột không được bôi đen chữ trong card (slick chỉ chặn được ở phần
   ảnh vì <a> có draggable mặc định). */
.slick-list.dragging,
.slick-list.dragging * {
    -webkit-user-select: none;
    user-select: none;
}


/* ============================================================================
   7. GLUE BOOTSTRAP 5 (markup đã viết lại BS5 — vá khác biệt hành vi cần thiết)
   ========================================================================== */
/* Breadcrumb: H1 đặt trong breadcrumb (tên SP / trang tĩnh) là chữ thường như
   mọi mục khác — cỡ chữ THỪA KẾ từ .breadcrumb, không khai lại px/token riêng. */
.breadcrumb { margin-bottom: 0; background: transparent; }
.breadcrumb h1 {
    display: inline; margin: 0;
    font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit;
}

/* ============================================================================
   7b. TRANG DANH MỤC SẢN PHẨM (/{slug}) — 27/07/2026
       Breadcrumb nền xám sát header · danh mục con dạng thẻ ảnh · header sắp xếp
       + phân trang AJAX (SPA, không reload — xem shop.js mục 5).
   ========================================================================== */
/* Dải breadcrumb nền xám, sát ngay dưới header */
.cat-crumb { padding: 10px 0; }
.cat-crumb__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cat-crumb__nav { padding: 0; }
/* Breadcrumb LUÔN 1 dòng: mục dài bị cắt bằng "…" thay vì xuống dòng / cuộn ngang.
   `min-width: 0` để flex item con được phép co lại (nếu không, ellipsis vô tác dụng). */
.cat-crumb__nav { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; }
.cat-crumb__nav .breadcrumb-item {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-crumb__nav .breadcrumb-item > a { display: inline; }
/* Mục cuối (trang hiện tại) được co trước — các cấp cha giữ nguyên cho dễ điều hướng */
.cat-crumb__nav .breadcrumb-item.active { flex: 1 1 auto; }
.cat-crumb__nav .breadcrumb-item::before { flex: 0 0 auto; }
.cat-crumb__nav .breadcrumb-item.active { color: var(--sd-text); font-weight: var(--sd-fw-medium); }
.cat-crumb__meta { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); white-space: nowrap; }
.cat-crumb__meta #btnCompare { color: var(--sd-primary); cursor: pointer; }
.cat-crumb__meta #btnCompare:hover { color: var(--sd-primary-dark); text-decoration: none; }
.cat-crumb__sep { margin: 0 6px; color: #bbb; }

/* Nội dung trang: mỗi khối là 1 thẻ trắng riêng trên nền xám */
.cat-body { padding-top: 15px; }
.cat-card { border-radius: 10px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.cat-menu { margin-bottom: 16px; }          /* tách khối menu khỏi khối sản phẩm */
#cat-content { transition: opacity .15s ease; }
#cat-content.is-loading { opacity: .5; pointer-events: none; }

/* KHỐI MENU — slider ngang: PC 10 ô/khung · mobile 5 ô/khung, dư thì trượt (nút ‹ ›) */
.cat-menu__slider { position: relative; }
.cat-menu__viewport {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.cat-menu__viewport::-webkit-scrollbar { display: none; }
.cat-menu__track { display: flex; gap: 6px 10px; align-items: flex-start; padding: 2px; }
.cat-menu__track .cat-icon { flex: 0 0 calc((100% - 90px) / 10); }   /* 10/khung (9 khe × 10px) */
@media (max-width: 991.98px) {
    .cat-menu__track .cat-icon { flex: 0 0 calc((100% - 40px) / 5); } /* 5/khung (4 khe × 10px) */
}
/* Mũi tên trượt — KHÔNG border/shadow (chỉ hiện khi tràn khung, JS thêm .has-overflow) */
.cat-menu__arrow {
    position: absolute; top: 38%; transform: translateY(-50%); z-index: 3;
    width: 30px; height: 34px; border: 0; background: transparent;
    color: var(--sd-text); cursor: pointer; padding: 0;
    display: none; align-items: center; justify-content: center;
}
.cat-menu__arrow svg { width: 20px; height: 20px; }
.cat-menu__arrow:hover { color: var(--sd-primary); }
.cat-menu__slider.has-overflow .cat-menu__arrow { display: inline-flex; }
.cat-menu__arrow:disabled { opacity: .28; cursor: default; }
.cat-menu__arrow--prev { left: -6px; }
.cat-menu__arrow--next { right: -6px; }
/* Ô "quay về danh mục cha" (icon thay vì ảnh) */
.cat-icon--back .cat-icon__box { color: var(--sd-primary); }
.cat-icon--back .cat-icon__box svg { width: 40%; height: 40%; }
/* Số SP mỗi danh mục (thống kê trên menu) */
.cat-icon__count { font-size: 11px; color: var(--sd-text-muted); line-height: 1.2; }
/* Danh mục đang xem (active) — GIỮ border/đậm như thường, CHỈ đổi màu chữ */
.cat-icon.is-active .cat-icon__name { color: var(--sd-primary); }
.cat-icon.is-active .cat-icon__count { color: var(--sd-primary); }

/* KHỐI SẢN PHẨM: header H1 (trái) + sắp xếp (phải), gạch ngăn cách với lưới SP */
.cat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--sd-bg-gray);
}
.cat-head__title { margin: 0; font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold); color: var(--sd-text); }
.cat-sort { display: flex; align-items: center; gap: 10px; }
.cat-sort__label { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.cat-sort__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-sort__btn {
    border: 1px solid var(--sd-bg-gray); background: #fff; color: var(--sd-text);
    font-size: var(--sd-fs-sm); padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all .15s ease;
}
.cat-sort__btn:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.cat-sort__btn.is-active { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.cat-sort__select { max-width: 200px; font-size: var(--sd-fs-sm); }
.p-grid--cat { margin-top: 18px; }          /* khoảng cách header ↔ lưới sản phẩm */

/* ── TRANG DANH MỤC DỊCH VỤ (/{slug}) ──────────────────────────────────────
   Bố cục 2 cột (chốt 29/07/2026): trái = giới thiệu + danh sách, phải = sidebar
   DÍNH khi cuộn. Mỗi item 1 HÀNG: ảnh (col-12 col-md-4) + nội dung (col-md-8).
   Cỡ chữ tối thiểu là --sd-fs-body (15px); KHÔNG dùng --sd-fs-sm cho nội dung
   đọc được — user yêu cầu 29/07/2026 (chỉ meta phụ mới được nhỏ hơn).         */

/* H1 nằm ở breadcrumb (không lặp tiêu đề trong khối nội dung) */
.cat-crumb__h1 {
    display: inline; margin: 0; padding: 0;
    font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit;
}

/* Header khối — đồng bộ .home-block__head của toàn site: IN HOA + gạch xanh */
.sv-head {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--sd-bg-gray);
}
.sv-head::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 3px; background: var(--sd-primary); border-radius: 2px;
}
.sv-head__title {
    margin: 0; font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); text-transform: uppercase;
}
.sv-count { font-size: var(--sd-fs-body); color: var(--sd-text-muted); }

/* Giới thiệu danh mục — chỉ nội dung, không tiêu đề */
.sv-about { margin-bottom: 16px; }
.sv-desc { max-height: 300px; }
.sv-desc.is-short { max-height: none; }
.sv-desc.is-short .pd-spec__fade { display: none; }

/* ── Danh sách dịch vụ ──────────────────────────────────────────────────── */
.sv-list { margin-top: 4px; }
.sv-item { padding: 20px 0; border-bottom: 1px solid var(--sd-bg-gray); }
.sv-item:last-child { border-bottom: 0; padding-bottom: 4px; }   /* ảnh không dính viền dưới */

/* Ảnh item: khung CỐ ĐỊNH 4:3 nền xám, ảnh `contain` căn giữa + padding 10px.
   Khung đồng nhất giữa mọi item (ảnh gốc đủ mọi tỷ lệ) nên danh sách không lộn
   xộn; contain giữ trọn CHỮ trên banner (khác `cover` vốn cắt hai bên).        */
.sv-item__thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 10px;
    border-radius: 8px; overflow: hidden;
    background: var(--sd-bg-page);            /* nền xám nhạt, KHÔNG viền */
}
.sv-item__thumb img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.sv-item__thumb:hover img { opacity: .92; }   /* hover chỉ mờ nhẹ, KHÔNG viền */
/* MOBILE: ảnh nằm TRÊN, nội dung xuống dưới (1 cột) nên ảnh cứ tràn hết bề ngang —
   bỏ nền xám + padding + khung tỉ lệ, không lo vỡ bố cục (user chốt 29/07/2026). */
@media (max-width: 767.98px) {
    .sv-item__thumb { aspect-ratio: auto; padding: 0; background: none; }
    .sv-item__thumb img { width: 100%; height: auto; max-height: none; }
}

.sv-item__name { margin: 0 0 6px; font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-medium); line-height: 1.45; }
.sv-item__name a {
    color: var(--sd-text); text-transform: uppercase;   /* tên dịch vụ VIẾT HOA toàn bộ */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-item__name a:hover { color: var(--sd-primary); }

/* Meta dưới tiêu đề, trên mô tả */
.sv-item__meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px;
    font-size: var(--sd-fs-sm); color: var(--sd-text-muted);
}
.sv-item__meta i { margin-right: 4px; }
.sv-item__meta a { color: var(--sd-text-muted); }
.sv-item__meta a:hover { color: var(--sd-primary); text-decoration: none; }

.sv-item__info {
    margin: 0; font-size: var(--sd-fs-body); color: var(--sd-text); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-item__foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.sv-item__more { font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-primary); }
.sv-item__more:hover { color: var(--sd-primary-dark); text-decoration: none; }
.sv-item__more i { margin-left: 4px; }

/* ── Sidebar: mỗi nhóm 1 thẻ trắng tách biệt ──────────────────────────────── */
/* Trang chi tiết dịch vụ: H1 + dòng meta trong khối nội dung */
.sv-detail__title {
    margin: 0 0 10px; font-size: var(--sd-fs-title); text-transform: uppercase;
    font-weight: var(--sd-fw-bold); color: var(--sd-text); line-height: 1.35;
}
.sv-detail__meta { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sd-bg-gray); }
.sv-related { margin-top: 16px; }     /* tách khỏi khối nội dung phía trên */

.sv-side { margin-bottom: 16px; }
.sv-side:last-child { margin-bottom: 0; }
.sv-head__title a { color: inherit; }
.sv-head__title a:hover { color: var(--sd-primary); }

/* CHỈ khối "Sản phẩm mới" dính khi cuộn. --sv-sticky-top do shop.js đặt bằng
   chiều cao header sticky nên khối không bị header che.                       */
@media (min-width: 992px) {
    .sv-sticky { position: sticky; top: var(--sv-sticky-top, 90px); }
}

/* Danh sách danh mục con: "›" trái · tên · badge số lượng phải */
.sv-side__tree { list-style: none; margin: 0; padding: 0; }
.sv-side__tree li + li { border-top: 1px solid var(--sd-bg-gray); }
.sv-side__tree a {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 0; color: var(--sd-text); font-size: var(--sd-fs-body); line-height: 1.45;
}
.sv-side__tree a > .fa { flex: 0 0 auto; font-size: 12px; color: var(--sd-text-muted); transition: transform .15s; }
.sv-side__label { flex: 1 1 auto; min-width: 0; }
.sv-side__badge {
    flex: 0 0 auto; min-width: 26px; padding: 2px 8px; border-radius: 11px;
    background: var(--sd-bg-page); color: var(--sd-text-muted);
    font-size: var(--sd-fs-sm); text-align: center;
}
.sv-side__tree a:hover { color: var(--sd-primary); }
.sv-side__tree a:hover > .fa { color: var(--sd-primary); transform: translateX(2px); }
.sv-side__tree li.is-active > a { color: var(--sd-primary); font-weight: var(--sd-fw-medium); }
.sv-side__tree li.is-active > a > .fa { color: var(--sd-primary); }
.sv-side__tree li.is-active .sv-side__badge { background: var(--sd-primary); color: #fff; }

/* Sản phẩm mới (ảnh + tên + giá) */
.sv-side__list { display: flex; flex-direction: column; }
.sv-side__item {
    display: flex; gap: 12px; align-items: center; padding: 12px 0;
    border-top: 1px solid var(--sd-bg-gray);
}
.sv-side__item:first-child { padding-top: 2px; border-top: 0; }
.sv-side__thumb {
    /* box-sizing: border-box để padding nằm TRONG 76px — không thì ô rộng thành 86px và
       vỡ hàng của .sv-side__item (flex: 0 0 76px chỉ khóa flex-basis, không khóa padding). */
    flex: 0 0 76px; width: 76px; box-sizing: border-box; padding: 5px;
    aspect-ratio: 1 / 1; border-radius: 6px; background: var(--sd-bg-soft);
}
.sv-side__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.sv-side__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sv-side__name {
    font-size: var(--sd-fs-body); color: var(--sd-text); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-side__price { font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-price); }
.sv-side__item:hover .sv-side__name { color: var(--sd-primary); }

/* Mờ nội dung trong lúc nạp AJAX (giống #cat-content) */
#sv-content.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* KHỐI SẢN PHẨM: thẻ trắng bọc header+lưới; pager NẰM NGOÀI trên nền xám */
.cat-products__card { margin-bottom: 0; }

/* Phân trang — tách khỏi thẻ trắng, nút bo góc, căn giữa (trên nền xám) */
.pager { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 18px 0 4px; }
.pager li > a, .pager li > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--sd-bg-gray); background: #fff; color: var(--sd-text);
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: all .15s ease;
}
.pager li > a:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.pager .active a, .pager .active a:hover {
    background: var(--sd-primary); border-color: var(--sd-primary); color: #fff;
    box-shadow: 0 2px 6px rgba(0,124,194,.35);
}


/* ============================================================================
   8. THẺ SẢN PHẨM MỚI (UI kiểu sellzy) + TAB DANH MỤC + QUICK VIEW + TOAST + GALLERY
      Viết lại product card 26/07/2026. Dùng token --sd-* (không hardcode màu/px chữ).
   ========================================================================== */

/* ── Nền trang chủ + thẻ trắng bao khối ───────────────────────────────────── */
/* Nền xám nhạt chỉ áp cho trang chủ (bọc trong <main class="home-main">) —
   không đụng các trang public khác. Mỗi khối (SP/tin/đối tác) là 1 thẻ trắng
   nổi trên nền xám; dải banner để trần trên nền xám (không thẻ). */
.home-main { padding: 15px 0 0; }
.home-card {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 20px;
}
/* Danh mục nổi bật (dưới slide) — ô ảnh đại diện nền xám. PC 10/hàng · ≤991 5/hàng */
.cat-icons { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px 10px; }
@media (max-width: 991.98px) { .cat-icons { grid-template-columns: repeat(5, 1fr); } }
.cat-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; }
.cat-icon__box {
    width: 100%; max-width: 84px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 14px; background: var(--sd-bg-page); border-radius: 14px;
    transition: background .18s ease;
}
.cat-icon__box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cat-icon__name {
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); color: var(--sd-text); line-height: 1.3;
}
.cat-icon:hover .cat-icon__box { background: #e9eef4; }
.cat-icon:hover .cat-icon__name { color: var(--sd-primary); }

/* Banner đơn (1 ảnh full-width, vd banner tin): 1 thẻ trắng */
.home-banner-card {
    background: #fff; border-radius: 10px; padding: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 20px;
}
.home-banner-card img { border-radius: 6px; display: block; width: 100%; }
/* Dải nhiều banner: MỖI banner 1 thẻ trắng riêng + slider responsive.
   TRƯỚC khi slick init: bố cục flex (PC 3 · ≤992 2 · ≤576 1) — dùng :not(.slick-initialized)
   để KHÔNG chèn flex/max-width vào lúc slick đã dựng track (tránh cắt ảnh). */
.banner-strip { margin-bottom: 20px; }
.banner-slider:not(.slick-initialized) { display: flex; flex-wrap: wrap; margin: 0 -8px; }
/* Số cột do admin cấu hình theo danh mục — biến --bn-* do view đặt inline
   (mặc định 1 nếu danh mục chưa cấu hình). Tablet 768–991px dùng nấc trung gian. */
.banner-slider { --bn-pc: 1; --bn-md: 1; --bn-mb: 1; }
.banner-slider:not(.slick-initialized) .banner-cell {
    flex: 0 0 calc(100% / var(--bn-pc)); max-width: calc(100% / var(--bn-pc)); padding: 0 8px;
}
@media (max-width: 991.98px) {
    .banner-slider:not(.slick-initialized) .banner-cell {
        flex-basis: calc(100% / var(--bn-md)); max-width: calc(100% / var(--bn-md));
    }
}
@media (max-width: 767.98px) {
    .banner-slider:not(.slick-initialized) .banner-cell {
        flex-basis: calc(100% / var(--bn-mb)); max-width: calc(100% / var(--bn-mb));
    }
}
/* Sau khi slick init: slick tự set width (float) từng slide; ta chỉ thêm khe ngang. */
.banner-slider { position: relative; }
.banner-slider.slick-initialized .slick-list { margin: 0 -8px; }
.banner-slider.slick-initialized .banner-cell { padding: 0 8px; }
/* Mobile/tablet: 2 mũi tên (chỉ icon, KHÔNG nền tròn) — tự ẩn khi hết chỗ trượt */
.banner-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 30px; height: 46px; padding: 0; border: 0; background: transparent; box-shadow: none;
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .18s ease;
}
.banner-arrow:hover { color: var(--sd-accent); }
.banner-arrow svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.banner-prev { left: 2px; }
.banner-next { right: 2px; }
.banner-arrow.slick-disabled { display: none; }   /* hết chỗ trượt → ẩn mũi tên */
.banner-item-card {
    background: #fff; border-radius: 10px; padding: 8px; height: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.banner-item-card img { border-radius: 6px; display: block; width: 100%; }

/* ── Khối danh mục trang chủ ─────────────────────────────────────────────── */
/* Khoảng cách dưới khối do .home-card quản lý (20px) — khối SP, banner, tin đồng nhất */
.home-block__head {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--sd-bg-gray);
}
/* Gạch nhấn xanh ngắn dưới tiêu đề khối (như site tham chiếu) */
.home-block__head::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 3px; background: var(--sd-primary); border-radius: 2px;
}
.home-block__title { margin: 0; }
.home-block__title a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); text-transform: uppercase;
}
.home-block__title a:hover { color: var(--sd-primary); }

/* Tabs lọc danh mục con */
.home-block__tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; position: relative; }
.hb-tab {
    border: 1px solid var(--sd-border); background: #fff; color: var(--sd-text);
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
    padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
}
.hb-tab:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.hb-tab.is-active { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
/* Nút lọc ☰ (danh mục dư) — desktop chỉ hiện khi có danh mục dư (.has-overflow);
   mobile luôn hiện và là lối vào DUY NHẤT (các tab rời bị ẩn). */
.hb-more { position: relative; display: inline-flex; }
@media (min-width: 992px) { .hb-more:not(.has-overflow) { display: none; } }
@media (max-width: 991.98px) {
    .home-block__tabs > .hb-tab { display: none; }   /* ẩn tab rời, chỉ còn ☰ */
    .hb-more { display: inline-flex; }
}
.hb-more__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 32px; border: 1px solid var(--sd-border); background: #fff;
    border-radius: 999px; cursor: pointer; color: var(--sd-text); transition: background .18s, color .18s, border-color .18s;
}
.hb-more__btn svg { width: 16px; height: 16px; }
.hb-more__btn:hover { border-color: var(--sd-primary); color: var(--sd-primary); }
.hb-more__menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 200px;
    background: #fff; border: 1px solid var(--sd-border); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px;
    display: none; flex-direction: column; gap: 4px;
}
.hb-more.is-open .hb-more__menu { display: flex; }
.hb-more.is-open .hb-more__btn { border-color: var(--sd-primary); color: var(--sd-primary); }
.hb-more__menu .hb-tab { border: 0; border-radius: 8px; text-align: left; justify-content: flex-start; }
.hb-more__menu .hb-tab:not(.is-active):hover { background: var(--sd-bg-soft); }
/* Item đang active trong dropdown: nền xanh, chữ trắng; hover đậm hơn (không bị mất chữ) */
.hb-more__menu .hb-tab.is-active { background: var(--sd-primary); color: #fff; }
.hb-more__menu .hb-tab.is-active:hover { background: var(--sd-primary-dark); color: #fff; }


/* ── Lưới + thẻ sản phẩm ─────────────────────────────────────────────────── */
.home-block__grid { position: relative; min-height: 120px; }
.home-block__grid.is-loading { opacity: .5; pointer-events: none; }
.home-block__grid.is-loading::after {
    content: ""; position: absolute; top: 24px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
    border: 3px solid #e5e7eb; border-top-color: var(--sd-primary); border-radius: 50%;
    animation: sd-spin .7s linear infinite;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

.p-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .p-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .p-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .p-grid { grid-template-columns: repeat(5, 1fr); } }

.p-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #eef0f2; border-radius: 12px; overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.p-card:hover { border-color: #e3e6ea; box-shadow: 0 10px 26px rgba(16,24,40,.12); }

.p-card__media { position: relative; }
.p-card__imgwrap {
    display: flex; align-items: center; justify-content: center;   /* căn giữa ảnh trong khung */
    aspect-ratio: 1 / 1; background: #f7f8fa;
    padding: 12px; border-radius: 12px 12px 0 0;
}
.p-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: auto; }
/* Badge "Tiết kiệm X đ" góc trái ảnh (kiểu phongvu) — KHÔNG uppercase để "đ" viết thường */
.p-card__save {
    position: absolute; top: 10px; left: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; line-height: 1;
    background: linear-gradient(135deg, var(--sd-save), var(--sd-save-2)); color: #fff;
    padding: 5px 10px 5px 9px; border-radius: 0 999px 999px 0;
    box-shadow: 0 3px 8px rgba(197,40,40,.28);
}
.p-card__save-label { font-size: 10px; font-weight: var(--sd-fw-medium); opacity: .9; }
.p-card__save-amt { font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-bold); }

.p-card__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.p-card__name {
    margin: 0; font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); line-height: 1.4;
    min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-card__name a { color: var(--sd-text); }
.p-card__name a:hover { color: var(--sd-primary); }
.p-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.p-card__price-new { color: var(--sd-price); font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-bold); }
.p-card__price-new sup { font-size: .65em; }
.p-card__price-old { color: var(--sd-text-muted); font-size: var(--sd-fs-sm); }
.p-card__price-old sup { font-size: .7em; }
.p-card__percent {
    color: var(--sd-price); background: #fdecea; font-size: 11px; font-weight: var(--sd-fw-bold);
    padding: 1px 6px; border-radius: 4px;
}
/* Hàng 2 nút: Xem nhanh + Đặt mua (bỏ icon giỏ) */
.p-card__buttons { display: flex; gap: 8px; margin-top: 2px; }
.p-card__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    height: 38px; border-radius: 8px; cursor: pointer;
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
    border: 1px solid var(--sd-primary); transition: background .18s, color .18s, opacity .18s;
}
.p-card__btn--qv { background: #fff; color: var(--sd-primary); gap: 6px; }
.p-card__btn--qv:hover { background: var(--sd-bg-soft); color: var(--sd-primary-dark); }
.p-qv__ic { width: 16px; height: 16px; flex: 0 0 auto; display: none; }
/* Mobile: bỏ hẳn nút "Xem nhanh", "Đặt mua" chiếm 100% chiều rộng */
@media (max-width: 575.98px) {
    .p-card__btn--qv { display: none; }
    .p-card__btn--add { flex: 1 1 100%; }
}
.p-card__btn--add { background: var(--sd-primary); color: #fff; }
.p-card__btn--add:hover { background: var(--sd-primary-dark); color: #fff; }
.p-card__btn--add.is-adding { opacity: .6; cursor: default; }
.p-card__cmp { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); cursor: pointer; }

/* Nút "Xem thêm sản phẩm" + trạng thái rỗng */
.p-more { display: flex; justify-content: center; margin-top: 24px; padding-bottom: 8px; }
.p-more__btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; color: var(--sd-primary); background: transparent;
    padding: 9px 22px; font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium);
    transition: color .18s;
}
.p-more__btn svg { width: 18px; height: 18px; transition: transform .18s; }
/* Hover: KHÔNG nền, KHÔNG nhấc nút lên (bỏ translateY 31/07/2026 — user chốt),
   chỉ đổi màu đậm hơn; hiệu ứng động duy nhất là mũi tên trượt sang phải. */
.p-more__btn:hover { background: transparent; color: var(--sd-primary-dark); }
.p-more__btn:hover svg { transform: translateX(3px); }
.p-empty { padding: 30px 10px; text-align: center; color: var(--sd-text-muted); font-size: var(--sd-fs-body); }

/* ── Quick view (modal) ──────────────────────────────────────────────────── */
/* To hơn (max 1040px). Hiệu ứng mở/đóng: FADE + trượt nhẹ 16px (KHÔNG zoom/scale) cho mượt. */
.qv-modal .modal-dialog { max-width: 1040px; width: 94%; }
.qv-modal.fade .modal-dialog { transform: translateY(-16px); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.qv-modal.show .modal-dialog { transform: none; opacity: 1; }
.qv-modal .modal-content { position: relative; border: 0; border-radius: 14px; overflow: hidden; }
.qv-modal .modal-body { padding: 26px 28px; }
/* Nút close: KHÔNG nền, hover chỉ đổi màu dấu X để biết có thể đóng. */
.qv-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border: 0; background: transparent;
    color: var(--sd-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: color .18s, transform .18s;
}
.qv-close svg { width: 22px; height: 22px; }
.qv-close:hover { color: var(--sd-price); transform: rotate(90deg); }
.qv-loading { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.qv-spinner {
    width: 40px; height: 40px; border: 4px solid #e5e7eb; border-top-color: var(--sd-primary);
    border-radius: 50%; animation: sd-spin .7s linear infinite;
}
.qv-error { padding: 40px 10px; text-align: center; color: var(--sd-price); }

.qv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767.98px) { .qv { grid-template-columns: 1fr; gap: 16px; } }
/* Chừa lề phải để tên không bị nút close (góc phải modal) đè lên */
.qv__name { margin: 0 0 10px; padding-right: 34px; font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-medium); line-height: 1.4; }
.qv__name a { color: var(--sd-text); }
.qv__name a:hover { color: var(--sd-primary); }
.qv__cat { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); margin-bottom: 10px; }
.qv__price { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; }
.qv__price-new { color: var(--sd-price); font-size: 22px; font-weight: var(--sd-fw-bold); }
.qv__price-new sup { font-size: .6em; }
.qv__price-old { color: var(--sd-text-muted); font-size: var(--sd-fs-body); }
.qv__price-old sup { font-size: .7em; }
.qv__km { margin: 12px 0; color: var(--sd-price); font-weight: var(--sd-fw-medium); font-size: var(--sd-fs-body); }
/* qv__status & qv__desc CÙNG cỡ chữ = --sd-fs-body (15px) */
.qv__status { margin: 10px 0; font-size: var(--sd-fs-body); color: var(--sd-text-muted); }
.qv__status b { color: var(--sd-text); }
.qv__desc { margin: 12px 0; font-size: var(--sd-fs-body); color: #555; max-height: 200px; overflow: auto; line-height: 1.6; }
/* Danh sách trong mô tả: bullet thẳng hàng, không lùi sâu */
.qv__desc ul, .qv__desc ol, .pd-info__desc ul, .pd-info__desc ol { margin: 8px 0; padding-left: 20px; }
.qv__desc li, .pd-info__desc li { margin: 3px 0; }
.qv__desc p, .pd-info__desc p { margin: 6px 0; }
.qv__buy { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.qv__qty { display: inline-flex; align-items: center; border: 1px solid var(--sd-border); border-radius: 8px; overflow: hidden; }
.qv__qty-btn { width: 38px; height: 42px; border: 0; background: var(--sd-bg-soft); color: var(--sd-text); font-size: 18px; cursor: pointer; }
.qv__qty-btn:hover { background: #eef0f2; }
.qv__qty-input { width: 46px; height: 42px; border: 0; text-align: center; font-size: var(--sd-fs-body); outline: none; }
.qv__add {
    display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; justify-content: center;
    border: 0; border-radius: 8px; padding: 11px 20px; background: var(--sd-primary); color: #fff;
    font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); cursor: pointer; transition: background .18s;
}
.qv__add svg { width: 18px; height: 18px; }
.qv__add:hover { background: var(--sd-primary-dark); color: #fff; }
.qv__add.is-adding { opacity: .6; }
.qv__detail { display: inline-block; font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.sd-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.sd-toast {
    display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 340px;
    background: #fff; border-left: 4px solid var(--sd-primary); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16,24,40,.16); padding: 12px 14px;
    font-size: var(--sd-fs-sm); color: var(--sd-text);
    opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s;
}
.sd-toast.is-in { opacity: 1; transform: none; }
.sd-toast--error { border-left-color: var(--sd-price); }
.sd-toast__ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sd-primary); color: #fff; flex: 0 0 auto; }
.sd-toast--error .sd-toast__ic { background: var(--sd-price); }
.sd-toast__ic svg { width: 15px; height: 15px; }
.sd-toast__msg { line-height: 1.4; }
@media (max-width: 575.98px) { .sd-toasts { right: 12px; left: 12px; bottom: 12px; } .sd-toast { max-width: none; } }

/* ── Gallery ảnh (chi tiết SP + quick view) ──────────────────────────────── */
.pdgal-main { position: relative; }
.pdgal-stage {
    position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f7f8fa;
    border: 1px solid #eef0f2; border-radius: 12px; cursor: grab; outline: none; touch-action: pan-y;
}
.pdgal-stage.is-dragging { cursor: grabbing; }
.pdgal-track { display: flex; height: 100%; will-change: transform; }
.pdgal-slide { position: relative; flex: 0 0 100%; height: 100%; }
.pdgal-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #f0f1f3 25%, #e6e8eb 37%, #f0f1f3 63%);
    background-size: 400% 100%; animation: lz-shimmer 1.2s ease infinite; pointer-events: none;
}
.pdgal-slide.is-loaded::after { display: none; }
.pdgal-slide img { width: 100%; height: 100%; object-fit: contain; padding: 14px; opacity: 0; transition: opacity .25s; }
.pdgal-slide.is-loaded img { opacity: 1; }
.pdgal-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 38px; height: 38px; border: 0; border-radius: 0;
    background: none; color: var(--sd-text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .18s;
}
.pdgal-arrow svg { width: 22px; height: 22px; }
.pdgal-arrow:hover { background: none; color: var(--sd-primary); }
.pdgal-arrow--prev { left: 10px; }
.pdgal-arrow--next { right: 10px; }
.pdgal-arrow:disabled { opacity: .35; cursor: default; }
.pdgal-thumbs { margin-top: 12px; display: flex; gap: 14px; justify-content: center; }
.pdgal-thumbs:not(.slick-initialized) { overflow-x: auto; padding-bottom: 4px; }
/* Thumb kiểu popup (VLightbox): vuông 70px, căn giữa, border 1px; chưa active phủ lớp ĐEN;
   active nền trắng + viền XANH NHẸ. */
.pdgal-thumb {
    position: relative; flex: 0 0 auto; width: 70px; height: 70px; aspect-ratio: 1 / 1; padding: 10px;
    border: 1px solid #d5d8dc; border-radius: 8px; background: #fff; overflow: hidden;
    cursor: pointer; transition: border-color .18s;
}
.pdgal-thumb::after {
    content: ""; position: absolute; inset: 0; background: #04040414;
    transition: opacity .18s; pointer-events: none;
}
.pdgal-thumb:hover::after { opacity: .5; }
.pdgal-thumb.is-active::after { opacity: 0; }
.pdgal-thumb.is-active { border-color: #86c5ec; }
.pdgal-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Cột thông tin trang chi tiết (kiểu demo) ────────────────────────────── */
.pd-info { display: flex; flex-direction: column; gap: 12px; }
.pd-info__name {
    margin: 0; font-size: var(--sd-fs-title); text-transform: uppercase;
    font-weight: var(--sd-fw-bold); line-height: 1.3; color: var(--sd-text);
}
.pd-info__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.pd-info__meta a { color: var(--sd-primary); }
.pd-info__price { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; }
.pd-info__price-new { color: var(--sd-price); font-size: 26px; font-weight: var(--sd-fw-bold); }
.pd-info__price-new sup { font-size: .55em; }
.pd-info__price-old { color: var(--sd-text-muted); font-size: var(--sd-fs-body); }
.pd-info__km { color: var(--sd-price); font-weight: var(--sd-fw-medium); font-size: var(--sd-fs-sm); }
.pd-info__row { font-size: var(--sd-fs-body); color: var(--sd-text-muted); }
.pd-info__row b { color: var(--sd-text); font-weight: var(--sd-fw-medium); }
.pd-info__desc { font-size: var(--sd-fs-sm); color: #555; line-height: 1.7; }
.pd-info__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-qty__label { font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-text); }
.pd-qty { display: inline-flex; align-items: center; border: 1px solid var(--sd-border); border-radius: 8px; overflow: hidden; }
.pd-qty-btn { width: 40px; height: 46px; border: 0; background: var(--sd-bg-soft); color: var(--sd-text); font-size: 18px; cursor: pointer; }
.pd-qty-btn:hover { background: #eef0f2; }
.pd-qty-input { width: 50px; height: 46px; border: 0; text-align: center; font-size: var(--sd-fs-body); outline: none; }
.pd-buy-now, .pd-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer;
    font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); transition: background .18s, opacity .18s;
}
.pd-buy-now { background: var(--sd-price); color: #fff; }
.pd-buy-now:hover { background: #b00218; color: #fff; }
.pd-add { background: var(--sd-primary); color: #fff; }
.pd-add:hover { background: var(--sd-primary-dark); color: #fff; }
.pd-add svg { width: 18px; height: 18px; }
.pd-add.is-adding { opacity: .6; }
.pd-info__deleted { color: var(--sd-price); font-weight: var(--sd-fw-bold); font-size: var(--sd-fs-lg); }
/* Giá: badge % giảm (cạnh giá gạch) + dòng tiết kiệm */
.pd-info__percent { align-self: center; background: #fdecea; color: var(--sd-price); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-bold); padding: 2px 8px; border-radius: 6px; }
/* Chip "Tiết kiệm" — gọn, nền đỏ nhạt, icon nhãn giá; hugging nội dung (không kéo dài) */
.pd-info__save {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
    padding: 5px 12px; border-radius: 8px; background: rgba(208,2,27,.07);
    color: var(--sd-price); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
}
.pd-info__save svg { width: 15px; height: 15px; flex-shrink: 0; }
.pd-info__save b { font-weight: var(--sd-fw-bold); }

/* ── Cột thông tin: chuẩn hóa khoảng cách + group ──────────────────────────── */
.pd-info { gap: 14px; }
/* Group riêng (VD "Thông tin sản phẩm" = mô tả ngắn CPU/RAM) — có đường phân cách trên */
.pd-group { border-top: 1px solid #eef0f2; padding-top: 14px; }
.pd-group__title { font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-bold); color: var(--sd-text); margin-bottom: 8px; }
.pd-group--info .pd-group__body { font-size: var(--sd-fs-body); color: #444; line-height: 1.75; }
.pd-group--info .pd-group__body ul { margin: 0; padding-left: 18px; }
.pd-group--info .pd-group__body li { margin-bottom: 4px; }
.pd-group--info .pd-group__body p { margin: 0 0 6px; }
/* Box "Thông tin sản phẩm" có viền (kiểu ảnh) — ghi đè border-top-only của .pd-group */
.pd-group--boxed { border: 1px solid var(--sd-bg-gray); border-radius: 10px; padding: 14px 16px; }
.pd-group--boxed .pd-group__title { margin-bottom: 6px; }

/* ── Khối GIÁ BÁN (gradient xanh brand) ─────────────────────────────────── */
.pd-price {
    border-radius: 12px; padding: 16px 18px; color: #fff;
    background: linear-gradient(120deg, var(--sd-primary-dark) 0%, var(--sd-primary) 100%);
}
.pd-price__label { font-size: var(--sd-fs-sm); color: rgba(255,255,255,.92); margin-bottom: 4px; }
.pd-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.pd-price__now { font-size: 30px; font-weight: var(--sd-fw-bold); line-height: 1.1; color: #fff; }
.pd-price__now sup { font-size: .5em; }
.pd-price__old { color: rgba(255,255,255,.72); font-size: var(--sd-fs-body); }
.pd-price__old sup { font-size: .7em; }
.pd-price__save { font-size: var(--sd-fs-lg); color: rgba(255,255,255,.92); font-weight: var(--sd-fw-medium); }
.pd-price__save b { font-weight: var(--sd-fw-bold); color: #fff; font-size: 20px; }
.pd-price__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-pill {
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 6px;
    background: #fff; color: var(--sd-primary-dark); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
}
/* Màu tồn kho theo trạng thái: Còn hàng (xanh lá) · Hết hàng (đỏ) · Liên hệ (xanh brand) */
.pd-stock--in { color: #1a9d4a; }
.pd-stock--out { color: var(--sd-price); }
.pd-stock--contact { color: var(--sd-primary); }

/* ── Showroom có hàng sẵn (thay dải "Hỗ trợ bán hàng") ──────────────────── */
.pd-store { border: 1px solid var(--sd-bg-gray); border-radius: 10px; overflow: hidden; }
.pd-store__head { background: var(--sd-bg-soft); font-weight: var(--sd-fw-bold); color: var(--sd-text); padding: 10px 16px; border-bottom: 1px solid var(--sd-bg-gray); }
.pd-store__body { padding: 14px 16px; }
.pd-store__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    padding: 10px 12px; border: 1px solid var(--sd-bg-gray); border-radius: 8px; background: #fff;
}
.pd-store__phone, .pd-store__addr { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--sd-text); }
.pd-store__phone { color: var(--sd-price); font-weight: var(--sd-fw-bold); }
.pd-store__phone:hover { color: var(--sd-price); text-decoration: none; }
.pd-store__phone svg, .pd-store__addr svg, .pd-store__hours svg { width: 16px; height: 16px; flex-shrink: 0; }
.pd-store__phone svg { color: var(--sd-price); }
.pd-store__addr svg { color: var(--sd-primary); }
.pd-store__hours { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.pd-store__hours svg { color: var(--sd-primary); }
.pd-store__hours b { color: var(--sd-text); font-weight: var(--sd-fw-medium); }

/* ── Hỗ trợ bán hàng: dải thẻ (KHÔNG icon) — dưới cụm mua, trong cột thông tin ── */
.pd-support { margin-top: 4px; }
.pd-support__intro { margin-bottom: 10px; font-size: var(--sd-fs-body); color: var(--sd-text); }
.pd-support__intro b { color: var(--sd-primary-dark); font-weight: var(--sd-fw-medium); }
.pd-support__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd-support__card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
    padding: 12px 8px; border: 1px solid #eef0f2; border-radius: 10px; background: var(--sd-bg-soft);
}
.pd-support__label { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.pd-support__val { font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-text); }
@media (max-width: 767.98px) { .pd-support__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Thông số kỹ thuật: giới hạn chiều cao + "Xem thêm" (transition) ────────── */
/* Cách nhau giữa các thẻ trắng (mar-top-20 legacy = margin-BOTTOM, pd-top-card thiếu → dính) */
.pd-top-card { margin-bottom: 20px; }

.pd-spec { position: relative; max-height: 560px; overflow: hidden; transition: max-height .6s cubic-bezier(.4, 0, .2, 1); }
.pd-spec.is-open { overflow: visible; }
.pd-spec__fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%); transition: opacity .3s;
}
.pd-spec.is-open .pd-spec__fade { opacity: 0; }
/* Nội dung ngắn hơn giới hạn: không cắt gì cả → bỏ dải mờ + bỏ luôn max-height
   (site.js gắn class này khi ẩn nút "Xem thêm"). */
.pd-spec.is-short { max-height: none; overflow: visible; }
.pd-spec.is-short .pd-spec__fade { display: none; }
.pd-spec__more {
    display: flex; width: fit-content; align-items: center; gap: 6px; margin: 16px auto 4px;
    padding: 8px 14px; border: 0; border-radius: 20px; cursor: pointer;
    background: none; color: var(--sd-primary); font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium);
    transition: color .18s;
}
.pd-spec__more:hover { color: var(--sd-primary-dark); }
.pd-spec__more svg { width: 16px; height: 16px; transition: transform .3s; }
.pd-spec__more.is-open svg { transform: rotate(180deg); }
/* Chi tiết sản phẩm (ContentHtml) — tách khỏi bảng thông số phía trên */
.pd-spec .infomation + .tks-heading, .pd-spec .pd-specs + .tks-heading { margin-top: 22px; }
.pd-detail-body { margin-top: 6px; line-height: 1.75; }

/* ── Sản phẩm cùng loại (full-width, product card như danh mục) ─────────────── */
.pd-related { position: relative; }
/* Header giống group SP trang chủ (.home-block__head): tiêu đề ĐEN + gạch chân xanh, KHÔNG icon */
.pd-related__head { padding-right: 80px; }   /* chừa chỗ 2 mũi tên góc phải */
.pd-related__title span {
    display: inline-flex; align-items: center;
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); text-transform: uppercase;
}
/* KHÔNG position:relative ở body — để nav định vị theo .pd-related (ngang tiêu đề), không lệch xuống */
.pd-related__body { transition: opacity .15s ease; }
.pd-related__body.is-loading { opacity: .5; pointer-events: none; }
/* Hiệu ứng loading khi đổi trang (chưa load xong) — spinner canh theo card .pd-related */
.pd-related__body.is-loading::after {
    content: ""; position: absolute; top: 55%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border: 3px solid var(--sd-border); border-top-color: var(--sd-primary); border-radius: 50%;
    animation: sd-spin .7s linear infinite; z-index: 3;
}
/* Lưới: 5 SP/hàng (PC) · 2 SP/hàng (mobile) — chỉ 1 hàng */
.pd-related__grid { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 767.98px) { .pd-related__grid { grid-template-columns: repeat(2, 1fr) !important; } }
/* 2 mũi tên có THÂN + MŨI (bỏ border tròn) — ép sát trên bên phải, ngang tiêu đề */
.pd-related__nav { position: absolute; top: 12px; right: 18px; display: flex; gap: 12px; margin: 0; z-index: 2; }
.pd-related__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px; border: 0; border-radius: 0; background: none;
    color: var(--sd-text); cursor: pointer; transition: color .18s;
}
.pd-related__arrow svg { width: 24px; height: 24px; }
.pd-related__arrow:hover:not(:disabled) { color: var(--sd-primary); }
.pd-related__arrow:disabled { opacity: .3; cursor: default; }
.pd-related__more { margin-top: 14px; text-align: center; }
.pd-related__more a { color: var(--sd-primary); font-weight: var(--sd-fw-medium); font-size: var(--sd-fs-body); }
.pd-related__more a:hover { text-decoration: none; color: var(--sd-primary-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   KHU TIN TỨC (.nw-*) — trang danh mục tin + chi tiết bài viết (29/07/2026)
   Dùng lại khung chung của khu Dịch vụ: .cat-crumb, .cat-card, .sv-head,
   .sv-side*, .sv-sticky, .pager. Phần dưới CHỈ là những gì riêng của tin.
   ═══════════════════════════════════════════════════════════════════════ */

/* Mờ nội dung trong lúc nạp AJAX (giống #cat-content / #sv-content) */
#nw-content.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ── Dải chip danh mục dưới breadcrumb (giống khối menu trang danh mục SP) ── */
.nw-chips { background: var(--sd-bg-page); padding: 0 0 10px; }
.nw-chips__row {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
}
.nw-chips__row::-webkit-scrollbar { display: none; }
.nw-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--sd-bg-gray); border-radius: 999px;
    background: var(--sd-bg); color: var(--sd-text);
    font-size: var(--sd-fs-body); line-height: 1.2; white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.nw-chip:hover { color: var(--sd-primary); border-color: var(--sd-primary); text-decoration: none; }
.nw-chip__n { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.nw-chip.is-active {
    background: var(--sd-primary); border-color: var(--sd-primary);
    color: #fff; font-weight: var(--sd-fw-medium);
}
.nw-chip.is-active .nw-chip__n { color: rgba(255, 255, 255, .85); }
.nw-chip--back svg { width: 15px; height: 15px; }
.nw-chip--back { color: var(--sd-text-muted); }

/* ── Khối nổi bật: 1 ảnh TO bên trái + lưới 2×2 bên phải, chung 1 thẻ trắng ── */
.nw-hero { margin-bottom: 16px; }
/* Ảnh: DÙNG ĐÚNG công thức khu Dịch vụ (.sv-item__thumb) — khung CỐ ĐỊNH 4:3, nền xám,
   padding 10px, ảnh `contain` căn giữa, KHÔNG viền. Ảnh gốc đủ mọi tỷ lệ (banner có chữ)
   nên `contain` giữ trọn nội dung ảnh, khung đồng nhất nên lưới không lộn xộn.        */
.nw-hero__img {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 10px;
    border-radius: 8px; overflow: hidden;
    background: var(--sd-bg-page);
}
.nw-hero__img img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.nw-hero__img:hover img { opacity: .92; }   /* hover chỉ mờ nhẹ, không zoom/viền */
/* Tên bài lớn dùng ĐÚNG cỡ chữ như ô nhỏ và danh sách bài (--sd-fs-lg) — trước
   đây là --sd-fs-title nên to hơn hẳn các khối khác (user chốt 30/07/2026). */
.nw-hero__title { margin: 12px 0 6px; font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-bold); line-height: 1.4; }
.nw-hero__title a {
    color: var(--sd-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-hero__title a:hover { color: var(--sd-primary); }
.nw-hero__info {
    margin-top: 6px; font-size: var(--sd-fs-body); color: var(--sd-text); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-hero__stitle { margin: 8px 0 4px; font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-medium); line-height: 1.4; }
.nw-hero__stitle a {
    color: var(--sd-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-hero__stitle a:hover { color: var(--sd-primary); }

/* ── Dòng meta: lượt xem · danh mục · ngày đăng ───────────────────────────── */
/* LUÔN 1 DÒNG: không wrap, tràn thì tên danh mục co lại và cắt "…" (mục lượt xem
   và ngày đăng ngắn, giữ nguyên; chỉ tên danh mục là phần co được). */
.nw-meta {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 14px;
    min-width: 0; overflow: hidden;
    font-size: var(--sd-fs-sm); color: var(--sd-text-muted);
}
.nw-meta > span { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; }
/* PHẢI viết `> span.nw-meta__cat`: chỉ `.nw-meta__cat` có specificity THẤP hơn
   `.nw-meta > span` ở trên nên flex: 0 0 auto thắng → mục này không co, chữ bị
   container cắt cụt mà không sinh "…". */
.nw-meta > span.nw-meta__cat { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* text-overflow CHỈ ăn trên khối có kích thước giới hạn → thẻ <a> phải là block
   và co được trong flex (min-width:0), nếu không chữ bị CẮT CỤT mà không có "…". */
.nw-meta__cat a {
    display: block; flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nw-meta i { flex: 0 0 auto; margin-right: 3px; }
.nw-meta a { color: var(--sd-text-muted); }
.nw-meta a:hover { color: var(--sd-primary); text-decoration: none; }

/* ── Danh sách bài (mỗi bài 1 hàng: ảnh trái + nội dung phải) ─────────────── */
.nw-item { padding: 18px 0; border-bottom: 1px solid var(--sd-bg-gray); }
.nw-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.nw-item__img {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 10px;
    border-radius: 8px; overflow: hidden;
    background: var(--sd-bg-page);
}
.nw-item__img img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.nw-item__img:hover img { opacity: .92; }
.nw-item__body { padding-left: 16px; }
.nw-item__name { margin: 0 0 6px; font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-medium); line-height: 1.45; }
.nw-item__name a {
    color: var(--sd-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-item__name a:hover { color: var(--sd-primary); }
.nw-item__info {
    margin-top: 8px; font-size: var(--sd-fs-body); color: var(--sd-text); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-item__more { margin-top: 8px; text-align: right; }
.nw-item__more a { font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-primary); }
.nw-item__more a:hover { color: var(--sd-primary-dark); text-decoration: none; }

/* ── Sidebar tin: thumb 4:3, ảnh `contain` như khu Dịch vụ (không cắt ảnh) ─── */
.nw-side__item .sv-side__thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 4px; background: var(--sd-bg-page); border-radius: 6px;
}
.nw-side__item .sv-side__thumb img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.nw-side__date { font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.nw-side__date i { margin-right: 4px; }

/* ── Chi tiết bài viết ────────────────────────────────────────────────────── */
.nw-detail__title {
    margin: 0 0 10px; font-size: var(--sd-fs-title); text-transform: uppercase;
    font-weight: var(--sd-fw-bold); line-height: 1.35; color: var(--sd-text);
}
.nw-detail__title + .nw-meta { padding-bottom: 12px; border-bottom: 1px solid var(--sd-bg-gray); margin-bottom: 14px; }
.nw-related { margin-top: 16px; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .nw-item__body { padding-left: 0; padding-top: 10px; }
    /* MOBILE: ảnh nằm TRÊN, nội dung xuống dưới nên ảnh cứ tràn hết bề ngang —
       bỏ khung tỉ lệ + nền xám + padding (đúng cách khu Dịch vụ làm).           */
    .nw-item__img, .nw-hero__img { aspect-ratio: auto; padding: 0; background: none; }
    .nw-item__img img, .nw-hero__img img { width: 100%; height: auto; max-height: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TÊN BÀI VIẾT / TÊN DỊCH VỤ — VIẾT HOA TOÀN BỘ, đậm 700 (user chốt 30/07/2026).
   Gom về 1 chỗ cho mọi vị trí hiển thị tên: hero trang tin, danh sách bài, bài
   liên quan, sidebar tin, danh sách dịch vụ. (H1 trang chi tiết đã có sẵn
   .nw-detail__title / .sv-detail__title.) KHÔNG áp cho tên SẢN PHẨM ở sidebar
   "Sản phẩm mới" — nên chỉ nhắm .nw-side__item, không nhắm .sv-side__name chung.
   ═══════════════════════════════════════════════════════════════════════ */
.nw-hero__title, .nw-hero__stitle, .nw-item__name { font-weight: var(--sd-fw-bold); }
.nw-hero__title a,
.nw-hero__stitle a,
.nw-item__name a,
.sv-item__name a { text-transform: uppercase; font-weight: var(--sd-fw-bold); }
/* SIDEBAR nhẹ hơn nội dung chính: KHÔNG ép viết hoa (tên nào gõ hoa toàn bộ trong
   DB đã được TextCase.SentenceIfAllCaps hạ về "Viết hoa chữ đầu tiên" ở partial
   _NewsSideItem) và độ đậm 500. */
.nw-side__item .sv-side__name { text-transform: none; font-weight: var(--sd-fw-mid); }
.sv-item__name { font-weight: var(--sd-fw-bold); }

/* ════════════════════════════════════════════════════════════════════════════
   GIỎ HÀNG + ĐẶT HÀNG (30/07/2026) — prefix .ck-
   Trang /gio-hang (2 cột: form trái, giỏ + tổng tiền phải), /xac-nhan-don-hang,
   /xac-nhan-thanh-toan.
   ĐỒNG BỘ với component sẵn có của site (sửa lại 30/07/2026 sau phản hồi user
   "phong cách không đồng nhất với UI"):
     • Thẻ trắng     = .cat-card (radius 10px, shadow nhẹ, KHÔNG viền, padding 18px)
     • Đầu khối      = quy ước .sv-head/.home-block__head: chữ IN HOA đậm + gạch
                       nhấn xanh 64px (bỏ thanh nền xám kiểu admin)
     • Ô số lượng    = mượn hình dáng .pd-qty của trang chi tiết SP
     • Nút           = .btn Bootstrap (đã ghi đè về --sd-primary ở đầu file)
     • Giá/tổng tiền = --sd-price (đỏ) như thẻ SP / mini-cart / sidebar
   Chỉ dùng token --sd-* (không hardcode cỡ chữ).
   ════════════════════════════════════════════════════════════════════════════ */
.ck-card {
    background: var(--sd-bg); border-radius: 10px; padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.ck-card + .ck-card { margin-top: 16px; }

/* Đầu khối: đúng quy ước .sv-head toàn site */
.ck-card__head {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--sd-bg-gray);
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); text-transform: uppercase;
}
.ck-card__head::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 3px; background: var(--sd-primary); border-radius: 2px;
}
/* Nút "Sửa" ở đầu khối trang xác nhận (thẻ <a> hoặc <button> — cùng dáng) */
.ck-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0; border: 0; background: none;
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium);
    color: var(--sd-primary); text-transform: none; cursor: pointer;
}
.ck-edit:hover { color: var(--sd-primary-dark); text-decoration: none; }

/* Modal "Sửa thông tin nhận hàng" / "Sửa sản phẩm" ngay tại trang xác nhận (Bootstrap modal) */
.ck-modal { border: 0; border-radius: 10px; }
.ck-modal .modal-header { align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sd-bg-gray); }
.ck-modal .modal-title {
    margin: 0; font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    color: var(--sd-text); text-transform: uppercase;
}
.ck-modal .modal-body { padding: 18px; }
.ck-modal .modal-footer { padding: 12px 18px; border-top: 1px solid var(--sd-bg-gray); }
.ck-empty { padding: 32px 0; text-align: center; color: var(--sd-text-muted); font-size: var(--sd-fs-body); }

/* ── Form đặt hàng ── */
.ck-form__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sd-bg-gray);
}
.ck-label {
    display: block; margin-bottom: 6px;
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); color: var(--sd-text);
}
.ck-req { color: var(--sd-price); }
.ck-opt { font-weight: var(--sd-fw-normal); color: var(--sd-text-muted); text-transform: none; }
.ck-hr { margin: 18px 0; border-color: var(--sd-bg-gray); }
.ck-group__title {
    margin-bottom: 10px;
    font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); color: var(--sd-text);
}
.ck-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; }
/* Ô tích/radio: canh giữa CHÍNH XÁC với nhãn — line-height:1 ở label + span mang
   line-height riêng, input không margin và không co giãn (trước đây bị lệch trục dọc). */
.ck-check {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: var(--sd-fs-body); line-height: 1; cursor: pointer;
}
.ck-check input {
    flex: 0 0 auto; width: 16px; height: 16px; margin: 0;
    accent-color: var(--sd-primary); cursor: pointer;
}
.ck-check span { line-height: 1.2; }
.ck-check--pay {
    padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 6px;
    background: var(--sd-bg-soft);
}
/* Thông báo lỗi cạnh ô nhập (JS gắn khi thiếu tỉnh/thành) */
.ck-field-err { margin-top: 5px; font-size: var(--sd-fs-sm); color: var(--sd-price); }
.sd-input.is-invalid, .ss-dd.is-invalid .ss-dd__toggle { border-color: var(--sd-price); }
/* Honeypot: ẩn với người thật nhưng vẫn có trong DOM cho bot điền. */
.ck-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ck-submit.is-busy { opacity: .6; pointer-events: none; }

/* ── Giỏ hàng (cột phải) ── */
#cart-side, #cart-edit { transition: opacity .15s ease; }
#cart-side.is-loading, #cart-edit.is-loading { opacity: .5; pointer-events: none; }
/* Dòng SP CHỈ ĐỌC — sidebar trang giỏ hàng (.ck-line). Cột hẹp nên tên xuống dòng
   riêng, dưới là "đơn giá × SL" và thành tiền; muốn sửa thì bấm "Sửa" mở modal. */
.ck-line {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 0; border-bottom: 1px solid var(--sd-bg-gray);
}
.ck-line:first-child { padding-top: 0; }
.ck-line:last-child { padding-bottom: 0; border-bottom: 0; }
.ck-line__body { flex: 1 1 auto; min-width: 0; }
.ck-line__body .ck-item__name { display: -webkit-box; margin-bottom: 6px; }
.ck-line__meta {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: var(--sd-fs-sm); color: var(--sd-text-muted);
}
.ck-line__total { font-size: var(--sd-fs-body); color: var(--sd-price); white-space: nowrap; }
.ck-line .ck-item__stock { margin-top: 6px; }

/* Danh sách SP CÓ SỬA (chỉ trong modal) — MỘT HÀNG: ảnh · tên · số lượng · thành tiền · nút xóa.
   flex-wrap để cột hẹp (sidebar trang giỏ) đẩy "thành tiền" xuống dòng dưới thay vì
   bóp nát tên SP — trong modal "Sửa sản phẩm" (rộng) thì đủ chỗ nên nằm trọn 1 hàng. */
.ck-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    padding: 12px 0; border-bottom: 1px solid var(--sd-bg-gray);
}
.ck-item:first-child { padding-top: 0; }
.ck-item:last-child { padding-bottom: 0; border-bottom: 0; }
.ck-item__thumb {
    flex: 0 0 56px; width: 56px; aspect-ratio: 1/1; display: block;
    background: var(--sd-bg-page); border-radius: 6px; padding: 4px;
}
.ck-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ck-item__name {
    flex: 1 1 130px; min-width: 0; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--sd-fs-body); font-weight: var(--sd-fw-mid); color: var(--sd-text);
}
.ck-item__name:hover { color: var(--sd-primary); text-decoration: none; }
.ck-qty, .ck-item__del { flex: 0 0 auto; }
.ck-item__price {
    flex: 0 0 auto; margin-left: auto;
    text-align: right; white-space: nowrap; font-size: var(--sd-fs-body);
}
.ck-item__price b { color: var(--sd-price); font-weight: var(--sd-fw-bold); }
.ck-item__old { display: block; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); }
.ck-item__stock {
    flex: 1 1 100%; margin: 0;
    font-size: var(--sd-fs-sm); color: var(--sd-price); line-height: 1.45;
}
.ck-item__del {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 6px;
    background: transparent; color: var(--sd-text-muted); cursor: pointer;
}
.ck-item__del:hover { background: #fdecea; color: var(--sd-price); }
.ck-item__del svg { width: 100%; height: 100%; }

/* Ô số lượng — cùng ngôn ngữ thiết kế .pd-qty (thu nhỏ cho sidebar) */
.ck-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--sd-border); border-radius: 8px; overflow: hidden;
}
.ck-qty__btn {
    width: 30px; height: 32px; border: 0;
    background: var(--sd-bg-soft); color: var(--sd-text);
    font-size: var(--sd-fs-lg); line-height: 1; cursor: pointer;
}
.ck-qty__btn:hover { background: #eef0f2; color: var(--sd-primary); }
.ck-qty__input {
    width: 42px; height: 32px; border: 0; outline: none;
    border-left: 1px solid var(--sd-border); border-right: 1px solid var(--sd-border);
    text-align: center; font-size: var(--sd-fs-body); color: var(--sd-text);
}

/* ── Tổng tiền đơn hàng ── */
.ck-sum__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-size: var(--sd-fs-body);
}
.ck-sum__row span:first-child { color: var(--sd-text-muted); }
.ck-sum__row--total {
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--sd-bg-gray);
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
}
.ck-sum__row--total span:first-child { color: var(--sd-text); }
.ck-sum__row--total span:last-child { color: var(--sd-price); }
.ck-sum__note { margin: 10px 0 0; font-size: var(--sd-fs-sm); color: var(--sd-text-muted); line-height: 1.5; }
.ck-confirm { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sd-bg-gray); }
/* "Quay lại sửa" + "Xác nhận đặt hàng": cùng hàng, bề ngang bằng nhau (1:1). */
.ck-confirm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-confirm__btns .btn { width: 100%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }

/* ── Trang xác nhận ── */
.ck-table { font-size: var(--sd-fs-body); margin: 0; }
.ck-table thead th {
    background: var(--sd-bg-soft);
    font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); color: var(--sd-text-muted);
}
.ck-table td { vertical-align: middle; }
.ck-table td a { color: var(--sd-text); }
.ck-table td a:hover { color: var(--sd-primary); text-decoration: none; }
.ck-table td b { color: var(--sd-price); }
.ck-info__row {
    display: flex; gap: 12px; padding: 9px 0;
    border-bottom: 1px dashed var(--sd-bg-gray); font-size: var(--sd-fs-body);
}
.ck-info__row:last-child { border-bottom: 0; }
.ck-info__row span { flex: 0 0 170px; color: var(--sd-text-muted); }
.ck-info__row b { flex: 1 1 auto; font-weight: var(--sd-fw-mid); color: var(--sd-text); }

/* ── Trang cảm ơn ── */
.ck-done { padding: 32px 0; text-align: center; font-size: var(--sd-fs-body); }
.ck-done__icon {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e8f7ee; color: #1e9e58; font-size: 24px;
}
.ck-done__title {
    font-size: var(--sd-fs-title); font-weight: var(--sd-fw-bold);
    text-transform: uppercase; margin-bottom: 10px;
}
.ck-done__code { font-size: var(--sd-fs-body); }
.ck-done__code b { color: var(--sd-price); }
.ck-done__mail { color: #1e9e58; font-size: var(--sd-fs-sm); }

@media (min-width: 992px) {
    /* Khối giỏ + tổng tiền dính theo khi cuộn. --sv-sticky-top = chiều cao header sticky,
       do site.js đặt cho toàn site (stickyTopInit) — nếu thiếu, header sẽ che mất khối này. */
    #cart-side { position: sticky; top: var(--sv-sticky-top, 90px); }
}
/* Trong modal "Sửa sản phẩm" thì KHÔNG dính (modal tự cuộn nội bộ). */
.modal-body #cart-side { position: static; }
@media (max-width: 767.98px) {
    .ck-info__row { flex-direction: column; gap: 2px; }
    .ck-info__row span { flex: none; }
    .ck-form__foot { flex-direction: column-reverse; align-items: stretch; }
    .ck-form__foot .btn { width: 100%; }
}