/* ============================================================================
   style.css — CSS DUY NHẤT của site public thietbigasmk.vn
   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 GASMK: XANH DƯƠNG chủ đạo, CAM nhấn ────────────────
       Lấy từ logo: chữ "GAS" xanh gradient + "MK" cam.

       XANH #1560BD tương phản 6.1:1 trên nền trắng — đạt WCAG AA cho CẢ hai vai:
       làm NỀN (chữ trắng trên nó) lẫn làm CHỮ (trên nền trắng). Nên khác dự án
       nguồn (vàng), ở đây --sd-primary và --sd-primary-ink CÙNG một mã.

       CAM thì KHÔNG: #F7941E trên trắng chỉ 2.3:1 — chữ trắng đặt lên nó KHÔNG
       đọc được. Vì vậy cam tách làm HAI mã, đừng gộp lại:
         --sd-accent      #F7941E  NỀN/viền/badge — chữ đặt lên phải là --sd-ink (9.2:1 ✔)
         --sd-accent-ink  #B35F00  cam đậm: NỀN với chữ TRẮNG (4.6:1 ✔) hoặc CHỮ cam
                                   trên nền trắng (4.6:1 ✔)
       QUY TẮC: nền cam sáng → chữ TỐI. Muốn chữ trắng thì dùng --sd-accent-ink. */
    --sd-primary:       #1560BD;   /* xanh dương — NỀN nút/thanh, chữ TRẮNG trên nó = 6.1:1 ✔ */
    --sd-primary-ink:   #1560BD;   /* chữ/liên kết xanh trên nền trắng = 6.1:1 ✔ */
    --sd-primary-dark:  #0E4A96;   /* hover của nền xanh — chữ trắng = 8.4:1 ✔ */
    --sd-primary-o80:   rgba(21, 96, 189, .8);
    --sd-ink:           #14202E;   /* xanh đen — tiêu đề, chữ nội dung */

    /* Easing dùng chung cho hiệu ứng hover: nhanh lúc đầu, hãm mềm lúc cuối. */
    --sd-ease-out:      cubic-bezier(.2, .7, .3, 1);
    --sd-sky:           #29ABE2;   /* xanh sáng của logo — CHỈ gradient/viền/trang trí,
                                      KHÔNG đặt chữ trắng lên (2.3:1) */
    --sd-accent:        #F7941E;   /* cam — NỀN badge/CTA, chữ đặt lên = --sd-ink */
    --sd-accent-ink:    #B35F00;   /* cam đậm — nền với chữ trắng, hoặc chữ cam trên nền trắng */
    --sd-price:         #D70018;   /* giá bán — đỏ thuần */
    --sd-danger:        #D70018;   /* 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:      21, 96, 189;
    --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-ink);
    --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-ink);
}
.btn-outline-secondary {
    --bs-btn-color: var(--sd-text);            --bs-btn-border-color: var(--sd-border);
    --bs-btn-hover-color: var(--sd-primary-ink);   --bs-btn-hover-bg: var(--sd-bg-soft);
    --bs-btn-hover-border-color: var(--sd-primary-ink);
    --bs-btn-active-color: var(--sd-primary-ink);  --bs-btn-active-bg: var(--sd-bg-soft);
    --bs-btn-active-border-color: var(--sd-primary-ink);
}
.form-control, .form-select { font-size: var(--sd-fs-body); border-radius: 8px; }
.form-control:focus, .form-select:focus {
    border-color: var(--sd-primary-ink);
    box-shadow: 0 0 0 .15rem rgba(21, 96, 189, .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-ink); 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; }
}
/* Lề ngang rộng hơn từ tablet trở lên (user 10/09/2026: "dính sát lề").
   Gutter mặc định của Bootstrap chỉ cho .container padding 12px mỗi bên — màn hình rộng
   ĐÚNG BẰNG max-width (1440) thì nội dung chỉ cách viewport 12px, các thẻ trắng
   (.cat-card, .p-card) nhìn như dán vào mép. Chỉ nới PADDING, giữ nguyên max-width. */
@media (min-width: 768px)  { .container { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 1200px) { .container { padding-left: 28px; padding-right: 28px; } }

/* ── 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;
    padding: 6px 6px 6px 12px;   /* bỏ height cố định — chiều cao theo logo (user chốt 28/08/2026) */
    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: 80px; 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-ink); }
.nav-drawer .nd-row { display: flex; align-items: stretch; position: relative; }
.nav-drawer .nd-row > a,
.nav-drawer .nd-row > .nd-row__lbl { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
/* Nhãn nhóm KHÔNG dẫn đi đâu (mục "Sản phẩm" bọc toàn bộ danh mục): là <span> chứ không
   phải <a> vì chưa có trang "tất cả sản phẩm". Phải tự lặp lại dáng hàng của .nd-menu a,
   nếu không hàng sẽ thấp hơn các mục khác và lệch hẳn. */
.nav-drawer .nd-row > .nd-row__lbl {
    display: flex; align-items: center;
    min-height: 44px; padding: 4px 20px;
    color: var(--sd-text); font-size: 14px;
}
/* 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; }

/* 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-ink); }
/* 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-ink);
    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-ink); }
.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-ink); }
.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-ink);
}
.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-ink); }
.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-ink); }
.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-ink); 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 #eceef0; }
.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; }

/* ── Menu PHẲNG: mọi mục ngang hàng trên dải màu chủ đạo, chữ trắng IN HOA ──
   "Danh mục sản phẩm" là một mục như các mục khác (.pc-menu__cats), không còn nút riêng. */
.pc-menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pc-menu > li { position: relative; }
/* <button> của mục Danh mục sản phẩm phải trông y hệt <a> của các mục khác */
.pc-menu > li > a,
.pc-menu > li > button {
    position: relative;
    display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--sd-ink); font-family: inherit; font-size: var(--sd-fs-body); font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; text-decoration: none;
    transition: color .15s ease;
}
/* Gạch chân CAM chạy từ giữa ra — dấu hiệu mục đang trỏ tới (nền trắng nên
   không tô nền, chỉ đổi màu chữ + gạch chân, giữ vẻ tối giản của logo).
   Cam ở đây chỉ là VẠCH trang trí, không có chữ đặt lên nên #F7941E dùng được. */
.pc-menu > li > a::after,
.pc-menu > li > button::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px;
    background: var(--sd-accent); transition: left .2s ease, right .2s ease;
}
.pc-menu > li:hover > a,
.pc-menu > li:hover > button,
.pc-menu > li > a:hover { color: var(--sd-primary-ink); }
.pc-menu > li:hover > a::after,
.pc-menu > li:hover > button::after { left: 16px; right: 16px; }
/* Mục Trang chủ dạng ICON (15/09/2026): bỏ padding ngang rộng của mục chữ, thu về ô vuông
   cho cân, và icon to hơn cỡ chữ một chút để không bị hụt so với các nhãn IN HOA bên cạnh. */
.pc-menu__home { padding: 0 14px !important; }
.pc-menu__home svg { width: 20px; height: 20px; display: block; }
.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 100% = RỘNG TỐI THIỂU BẰNG MỤC MENU CHA (li là position:relative).
       Dropdown hẹp hơn tên danh mục trông như bị lỗi. 230px là sàn cho tên ngắn. */
    min-width: max(100%, 230px); width: max-content; max-width: 420px;
    margin: 0; padding: 6px 0; list-style: none;
    /* Viền mảnh, 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 */
.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 { position: relative; }
.pc-menu__drop li a {
    display: flex; align-items: center; gap: 9px; padding: 9px 18px;
    color: var(--sd-text); font-size: var(--sd-fs-body); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pc-menu__drop li a > span { flex: 1 1 auto; min-width: 0; }
/* Mũi tên › ĐẦU mỗi dòng — dấu hiệu bấm được, dùng cho cả cấp 2 và cấp 3 */
.pc-menu__bullet { flex: 0 0 auto; width: 13px; height: 13px; color: #9aa4ad; transition: color .2s ease, transform .2s ease; }
.pc-menu__drop li a:hover .pc-menu__bullet,
.pc-menu__sub  li a:hover .pc-menu__bullet { color: var(--sd-primary-ink); transform: translateX(2px); }
.pc-menu__drop li a:hover { background: var(--sd-bg-soft); color: var(--sd-primary-ink); }
.pc-menu__drop li a:hover svg { color: var(--sd-primary-ink); }

/* Flyout CẤP 3 — mở sang phải mục cấp 2 */
.pc-menu__sub {
    position: absolute; top: -7px; left: 100%; z-index: 1210;
    min-width: 230px; margin: 0; padding: 6px 0; list-style: none;
    background: #fff; border-radius: 8px; border: 1px solid #e2e6ea;
    opacity: 0; visibility: hidden; transform: translateX(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    /* Danh mục dài → cuộn vừa màn hình (JS site.js đặt max-height chính xác theo vị trí) */
    max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #cfd6dd transparent;
}
.pc-menu__sub > li + li { border-top: 1px solid #f0f2f4; }
.pc-menu__sub li a {
    display: flex; align-items: center; gap: 9px; padding: 9px 18px;
    color: var(--sd-text); font-size: var(--sd-fs-body); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pc-menu__sub li a > span { flex: 1 1 auto; min-width: 0; }
.pc-menu__sub li a:hover { background: var(--sd-bg-soft); color: var(--sd-primary-ink); }
.pc-menu__drop > li.has-sub:hover > .pc-menu__sub { opacity: 1; visibility: visible; transform: none; }
.pc-menu__sub::-webkit-scrollbar { width: 4px; }
.pc-menu__sub::-webkit-scrollbar-track { background: transparent; }
.pc-menu__sub::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 4px; }

/* 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: 600; 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-ink);
    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-ink);
}
.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-ink); }
.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 FULL WIDTH, dính sát thanh menu (user chốt 27/08/2026):
   không container, margin-top 0, bỏ bo góc — trước đây slide nằm trong .container
   (max-width 1440) + margin-top 20px nên hở hai bên và hở trên. */
.hero-sec { width: 100%; }
/* Khối ngay sau hero cần thở: hero tràn viền + nền tối, thẻ trắng sát mép slide trông chật.
   15px (mar-top-15 của chính nó) → 30px → 50px (user thấy 30 vẫn sát, 27/08/2026).
   Mobile để 30px: màn hẹp, khoảng trắng 50px chiếm quá nhiều màn hình.
   Nhắm đúng phần tử kế hero, KHÔNG sửa .mar-top-15 vì lớp tiện ích đó dùng nhiều nơi. */
.hero-sec + section { margin-top: 50px; }
@media (max-width: 767.98px) { .hero-sec + section { margin-top: 30px; } }
.hero-slide { position: relative; margin-top: 0; border-radius: 0; 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: 0; }
.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-ink); 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ủ: KHUNG CỐ ĐỊNH 4/3 + object-fit:cover (user chốt 27/08/2026).
   ĐẢO NGƯỢC quyết định 03/08/2026 (thả tự do tỉ lệ gốc) và 30/07/2026 (cấm cover):
   ảnh tin mỗi cái một tỉ lệ (0.84 dọc → 1.55 ngang) nên khối trang chủ cao thấp lệch nhau,
   ảnh dọc đẩy cột trái vống lên so với cột phải. Khung cố định 4/3 làm bố cục đều.
   ĐÁNH ĐỔI đã biết và user chấp nhận: cover CẮT mép ảnh — ảnh nào là banner/bảng số liệu
   có chữ sát mép sẽ mất phần đó. Chọn ảnh đại diện dạng ngang, chủ thể nằm giữa.
   Khung ảnh 4/3 dùng chung toàn site: .p-card__imgwrap, .sv-item__thumb, .nw-hero__img,
   .nw-item__img, và 2 khung dưới đây. */
.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 shimmer. */
    aspect-ratio:4 / 3;
}
.news-feature__media img {
    display:block; width:100%; height:100%; object-fit:cover;
    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 khung 4/3 + cover như ảnh to (xem ghi chú ở .news-feature__media). */
.news-item__media {
    flex:0 0 130px; width:130px; border-radius:8px; overflow:hidden;
    display:block; align-self:center;
    aspect-ratio:4 / 3;   /* ghi đè .lz-news */
}
.news-item__media img {
    display:block; width:100%; height:100%; object-fit:cover;
    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){
    /* Mobile: tin xếp DỌC — ảnh full 100%, nội dung nằm dưới (user chốt 28/08/2026).
       Bố cục ngang ảnh 104px + chữ bên phải làm tiêu đề bị cắt cụt trên màn hẹp.
       .news-list .news-item đặt align-items:center để canh 2 cột bằng nhau ở desktop,
       ở đây phải trả về stretch, nếu không ảnh co lại theo chiều rộng nội dung. */
    .news-item { flex-direction:column; gap:10px; }
    .news-list .news-item { align-items:stretch; }
    .news-item__media { flex:0 0 auto; width:100%; align-self:stretch; }
    .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 — port bố cục từ dự án sondat, đổi sang bảng màu GASMK (09/09/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Ộ trong .site-footer — nếu rule này hỏng thì toàn bộ
   --ft-* biến mất, chữ hardcode #fff (tên DN/điện thoại/email/copyright) sẽ trắng trên
   nền trắng. Đã dính đúng lỗi đó 09/09/2026: khối chú thích này bị mất dấu MỞ, phần chữ
   còn lại bị gộp vào selector nên trình duyệt loại luôn cả rule .site-footer. */
.site-footer {
    /* Bảng màu GASMK, KHÔNG copy màu sondat: nền xanh chủ đạo của logo, gạch nhấn CAM.
       Cam #F7941E ở đây chỉ là VẠCH/viền trang trí và chữ trên nền xanh đậm — không có
       chữ trắng đặt lên nền cam nên vẫn đọc tốt (xem ghi chú --sd-accent ở :root). */
    --ft-bg:      #1560BD;   /* xanh chủ đạo — nền chính */
    --ft-title:   #ffffff;   /* tiêu đề cột (trắng) */
    --ft-accent:  #F7941E;   /* cam — gạch nhấn dưới tiêu đề + màu hover */
    --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 */
    /* Khe hở với khối nội dung phía trên (user 09/09/2026: footer đang dính sát).
       Ghi chú cũ bỏ margin-top vì hồi đó footer NỀN TRẮNG — khe #f8f8f8 cạnh nền trắng
       trông như dải lạc. Nay footer nền XANH bo góc trên nên khe hở chính là thứ tách
       khối, giống bố cục sondat. */
    margin-top: 44px;
    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(8,38,74,.78) 0%, rgba(21,96,189,.15) 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("/assets/img/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 */
@media (max-width: 767.98px) { .site-footer { margin-top: 28px; padding-top: 44px; } }
.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;
}
/* Nền footer ĐÃ là --sd-primary nên hover cũng xanh sẽ chìm nghỉm; dùng cam,
   và chữ trên cam phải là --sd-ink (trắng trên #F7941E chỉ 2.3:1). */
.ft-map:hover { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-ink); }
.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;
}
/* PHẢI viết .site-footer .ft-soc:hover (0,3,0) chứ KHÔNG phải .ft-soc:hover (0,2,0):
   rule chung `.site-footer a:hover { color: var(--ft-accent) }` có độ ưu tiên (0,2,1)
   nên nó thắng, ép màu icon về CAM — trùng đúng màu nền hover bên dưới, icon tàng hình
   trong một vòng tròn cam đặc (sửa 10/09/2026).
   Nền cam sáng thì chữ/icon phải TỐI (--sd-ink, 9.2:1) — xem quy tắc màu ở :root. */
.site-footer .ft-soc:hover {
    background: var(--sd-accent); color: var(--sd-ink); 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-ink); color: var(--sd-primary-ink); }
.policy-list .fa { color: var(--sd-primary-ink); }
.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-ink); font-weight: var(--sd-fw-medium); }
.policy-side .fa { color: var(--sd-primary-ink); 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-ink); }
/* 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-ink); 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-ink); 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-ink);
}
.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-ink); }
.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 (vàng kim thương hiệu). */
.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-ink); 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(21, 96, 189, .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(21, 96, 189, .5);
    animation: oscPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes oscPulse { to { box-shadow: 0 0 0 18px rgba(21, 96, 189, 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-ink); 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-ink);
    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;
}

/* Khối "Sản phẩm cùng loại": CSS nằm ở mục trang chi tiết SP (.pd-related__nav /
   __arrow / __grid, tìm "Sản phẩm cùng loại (full-width"). Bộ quy tắc carousel cũ
   ở đây đã gỡ 28/08/2026 — nó neo theo .pd-related__slider (markup không còn) và
   nhánh mobile của nó kéo 2 mũi tên ra hai mép, đè lên tiêu đề. */

@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 TRẮNG, sát ngay dưới header (user chốt 27/08/2026 — trước đây
   để trống nên ăn nền body #f8f8f8, nhìn ra dải xám). Dùng chung cho trang danh mục SP,
   danh mục dịch vụ và tin tức. */
/* padding dọc 18px (trước 10px): dải này NỀN TRẮNG dán ngay dưới thanh nav cũng nền
   trắng, chỉ cách nhau một đường viền tóc — để 10px thì breadcrumb nhìn như dính vào
   menu (user 10/09/2026). Vẫn giữ nền trắng + sát header đúng quyết định 27/08/2026,
   chỉ nới hơi thở bên trong. */
.cat-crumb { padding: 18px 0; background: #fff; }
/* Hơi thở giữa dải breadcrumb và khối nội dung đầu tiên.

   Mọi trang khuôn mới đều là: <div.cat-crumb> rồi <section> ngay sau. Section đó mang
   .pad-top-15 (About, Liên hệ) hoặc .cat-body (Chính sách, Danh mục) — CẢ HAI chỉ
   padding-top 15px, quá sát nên nội dung nhìn như dán vào menu nav (user 10/09/2026).

   Nhắm bằng bộ chọn NGỮ CẢNH `.cat-crumb + section` (0,1,1) để thắng .pad-top-15 và
   .cat-body (0,1,0). KHÔNG sửa thẳng .pad-top-15: đó là lớp tiện ích dùng ở 8 view,
   đổi một chỗ là lệch cả loạt trang khác (cùng lý do đã ghi ở .mar-top-15). */
.cat-crumb + section { padding-top: 28px; }
@media (max-width: 767.98px) { .cat-crumb + section { padding-top: 18px; } }

.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-ink); 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-content { transition: opacity .15s ease; }
#cat-content.is-loading { opacity: .5; pointer-events: none; }


/* 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-ink); color: var(--sd-primary-ink); }
.cat-sort__btn.is-active { background: var(--sd-primary); border-color: var(--sd-primary-ink); 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-ink); }

/* 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-ink); 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-ink); }
.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-ink); }

/* 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-ink); }
.sv-side__tree a:hover > .fa { color: var(--sd-primary-ink); transform: translateX(2px); }
.sv-side__tree li.is-active > a { color: var(--sd-primary-ink); font-weight: var(--sd-fw-medium); }
.sv-side__tree li.is-active > a > .fa { color: var(--sd-primary-ink); }
.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-ink); }

/* 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-ink); color: var(--sd-primary-ink); }
.pager .active a, .pager .active a:hover {
    background: var(--sd-primary); border-color: var(--sd-primary-ink); color: #fff;
    box-shadow: 0 2px 6px rgba(201,162,39,.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ẻ). */
/* padding-top = 0 để hero dính sát menu; các khối sau hero đã tự có
   .mar-top-15 / .mar-top-30 nên không mất khoảng cách. */
.home-main { padding: 0 0 0; }
.home-card {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 20px;
}

/* 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-ink); }

/* 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-ink); }
.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-ink); }
.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-ink); }
.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); } }


/* < 576px: 1 sản phẩm/hàng (user chốt 28/08/2026) — thẻ hẹp quá thì tên bị cắt,
   ảnh bé, nút không bấm nổi. Từ 576px trở lên mới chia nhiều cột. */
.p-grid {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .p-grid { grid-template-columns: repeat(3, 1fr); } }
/* Tối đa 4 sản phẩm/hàng (user chốt) — desktop không tăng lên 5 nữa. */
@media (min-width: 768px) { .p-grid { grid-template-columns: repeat(4, 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 */
    /* Khung 4/3 — khớp tỷ lệ ảnh nguồn (400x300, 800x600...) nên object-fit:contain lấp
       vừa khít, không còn dải trống trên/dưới như khi khung vuông 1/1. */
    aspect-ratio: 4 / 3; 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;   /* trên lớp phủ hover (z1), dưới nút (z3) */
    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); }

/* padding 14/16 (trước là 12 đều): 12px làm tên + giá dính sát viền thẻ. */
.p-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
/* KHÔNG đặt min-height. Trước đây min-height:2.8em chừa sẵn chỗ cho 2 dòng tên để giá
   các thẻ thẳng hàng nhau; nhưng tên 1 dòng thì thừa ra đúng MỘT DÒNG TRỐNG giữa tên và
   giá — chính là khoảng cách user phản ánh (07/09/2026).
   ĐÁNH ĐỔI đã báo user: trong cùng một hàng, thẻ tên 1 dòng sẽ có giá cao hơn thẻ tên 2
   dòng. Chiều cao THẺ vẫn bằng nhau (lưới stretch), chỉ vị trí dòng giá lệch.
   line-clamp:2 giữ nguyên — tên dài vẫn cắt ở 2 dòng. */
.p-card__name {
    margin: 0; font-size: var(--sd-fs-body); font-weight: var(--sd-fw-medium); line-height: 1.4;
    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-ink); }
/* Giá nằm NGAY dưới tên (user chốt 07/09/2026). Hai thứ từng đẩy nó ra xa, đã gỡ CẢ HAI:
   margin-top:auto (đẩy xuống đáy thẻ) và min-height:2.8em của .p-card__name (chừa sẵn dòng
   thứ hai). Đừng thêm lại. */
.p-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.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 — OVERLAY đè lên ảnh (user chốt 27/08/2026) ──
   Mặc định ẨN, hover vào thẻ mới hiện. Vì nút nằm ngoài luồng (position:absolute)
   nên lúc ẩn/hiện thẻ KHÔNG đổi chiều cao — lưới không bị giật.

   HAI NHÁNH, đừng gộp:
   • (hover: hover) — máy có chuột: ẩn rồi hover mới hiện.
   • Còn lại (điện thoại/tablet): KHÔNG có hover thật, nút phải nằm trong luồng và
     hiện thường trực, nếu không người dùng cảm ứng vĩnh viễn không bấm được "Đặt mua".
   Nhánh mặc định dưới đây là nhánh CẢM ỨNG — an toàn khi trình duyệt không hiểu @media hover. */
.p-card__buttons { display: flex; gap: 8px; margin-top: 2px; padding: 0 12px 12px; }

.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-ink); 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; }
.p-add__ic { width: 16px; height: 16px; flex: 0 0 auto; display: none; }
/* Mobile: bỏ hẳn nút "Xem nhanh" (modal quick view chật), "Đặt mua" chiếm 100% chiều rộng.
   Ở đây nút vẫn nằm trong luồng — xem ghi chú hai nhánh ở .p-card__buttons. */
/* < 576px: bỏ HẲN hàng nút (Xem nhanh + Đặt mua) — user chốt 28/08/2026.
   !important vì nhánh @media (hover: hover) phía dưới đặt lại display:flex cho
   .p-card__buttons; cửa sổ desktop thu nhỏ dưới 576px khớp cả hai nhánh. */
@media (max-width: 575.98px) {
    .p-card__buttons { display: none !important; }
}
.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; }

@media (hover: hover) and (pointer: fine) {
    /* CỘT 2 ICON TRÒN ở mép phải ảnh, trượt từ PHẢI sang TRÁI khi hover (user chốt 27/08/2026).
       pointer-events:none ở bọc + auto trên từng nút khi hover: lúc ẩn, chuột xuyên qua
       xuống thẻ <a> của ảnh nên click vẫn sang trang chi tiết như thường. */
    .p-card__buttons {
        position: absolute; z-index: 3;
        right: 12px; top: 50%; transform: translateY(-50%);
        display: flex; flex-direction: column; gap: 8px;
        padding: 0; margin: 0; pointer-events: none;
    }
    /* Màn mờ đều toàn ảnh (không phải dải đáy như bản trước) — nút giờ nằm giữa mép phải,
       gradient từ đáy lên không còn tác dụng làm nổi nút. */
    .p-card__media::after {
        content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: rgba(26, 24, 21, .18);
        opacity: 0; transition: opacity .22s var(--sd-ease-out);
        border-radius: 12px 12px 0 0;
    }

    /* Hai nút CÙNG một kiểu tròn; khác nhau chỉ ở màu và độ trễ. */
    .p-card__btn--qv,
    .p-card__btn--add {
        width: 42px; height: 42px; padding: 0; flex: none;
        border-radius: 50%; box-shadow: 0 6px 18px rgba(16, 24, 40, .20);
        opacity: 0; transform: translateX(16px);
        transition: opacity .24s var(--sd-ease-out), transform .24s var(--sd-ease-out),
                    background .18s, color .18s;
    }
    .p-card__btn--qv  { border-color: rgba(26, 24, 21, .10); }
    .p-card__btn--add { transition-delay: .07s; }   /* hàng dưới trượt sau một nhịp */

    /* Ẩn chữ, hiện icon. Chữ vẫn còn trong DOM + aria-label nên trình đọc màn hình đọc được. */
    .p-card__btn--qv .p-qv__ic,
    .p-card__btn--add .p-add__ic { display: block; width: 18px; height: 18px; }
    .p-card__btn--qv .p-qv__tx,
    .p-card__btn--add .p-add__tx { display: none; }

    /* Ảnh phóng nhẹ — chuyển động nền làm hover mượt hơn hẳn so với chỉ hiện nút.

       PHẢI viết .p-card__imgwrap .p-card__img chứ KHÔNG phải .p-card__img:
       `.lz img` (dòng ~155) có độ ưu tiên (0,1,1) CAO HƠN `.p-card__img` (0,1,0), mà
       `transition` là shorthand nên nó ghi đè TRỌN VẸN — transform mất hẳn easing, ảnh
       nhảy phắt sang scale trong khi lớp phủ vẫn fade .22s. Hai thứ lệch nhịp chính là
       hiện tượng "hover ảnh bị giật" (sửa 07/09/2026). Giữ luôn transition opacity vì
       shorthand này thay thế cả khai báo của .lz img (shimmer lazyload).

       translateZ(0) + backface-visibility: đẩy ảnh lên layer riêng. Không có nó, transform
       chạy bên trong BA lớp overflow:hidden bo góc lồng nhau (.p-card, .lz, .p-card__imgwrap)
       nên trình duyệt phải vẽ lại vùng bo góc mỗi khung hình thay vì chỉ ghép layer. */
    .p-card__imgwrap { overflow: hidden; }
    .p-card__imgwrap .p-card__img {
        transition: opacity .25s ease, transform .4s var(--sd-ease-out);
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
    }

    /* :focus-within để người dùng bàn phím Tab tới cũng thấy nút, không riêng chuột. */
    .p-card:hover .p-card__media::after,
    .p-card:focus-within .p-card__media::after { opacity: 1; }
    .p-card:hover .p-card__imgwrap .p-card__img,
    .p-card:focus-within .p-card__imgwrap .p-card__img { transform: scale(1.06) translateZ(0); }
    .p-card:hover .p-card__btn--qv,
    .p-card:hover .p-card__btn--add,
    .p-card:focus-within .p-card__btn--qv,
    .p-card:focus-within .p-card__btn--add { opacity: 1; transform: none; pointer-events: auto; }

    /* Tôn trọng "giảm chuyển động" của hệ điều hành: vẫn ẩn/hiện, chỉ bỏ trượt & phóng. */
    @media (prefers-reduced-motion: reduce) {
        .p-card__btn--qv, .p-card__btn--add { transform: none; transition-delay: 0s; }
        .p-card__imgwrap .p-card__img,
        .p-card:hover .p-card__imgwrap .p-card__img { transform: none; transition: none; }
    }
}

/* 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-ink); 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-ink);
    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-ink); }
.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-ink); }
.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-ink); }
.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;
}
/* "Mua ngay" = nút chính nền XANH chữ trắng; "Thêm vào giỏ" = nút phụ nền trắng viền xanh.
   Xanh #1560BD đạt AA ở cả hai vai (nền 6.1:1 với chữ trắng, chữ 6.1:1 trên nền trắng)
   nên --sd-primary và --sd-primary-ink cùng mã — không cần tách như cam. */
.pd-buy-now { background: var(--sd-primary); color: #fff; }
.pd-buy-now:hover { background: var(--sd-primary-dark); color: #fff; }
.pd-add { background: #fff; color: var(--sd-primary-ink); border: 1px solid var(--sd-primary); }
.pd-add:hover { background: var(--sd-bg-soft); color: var(--sd-primary-dark); }
.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); }

/* Mobile: cả hàng mua nằm TRÊN MỘT DÒNG (user chốt 28/08/2026) — bỏ wrap, ẩn chữ
   "Số lượng" (ô +/- đã tự nói lên nó) và ẩn HẲN nút "Mua ngay": ba thứ cùng lúc thì
   màn 360px không đủ chỗ, chữ trong nút bị cắt. Còn lại ô số lượng + "Thêm vào giỏ". */
@media (max-width: 575.98px) {
    .pd-info__buy { flex-wrap: nowrap; gap: 8px; }
    .pd-qty__label { display: none; }
    .pd-qty { flex: 0 0 auto; }
    .pd-qty-btn { width: 32px; height: 42px; }
    .pd-qty-input { width: 34px; height: 42px; }
    .pd-buy-now { display: none; }
    .pd-add { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; white-space: nowrap; }
}

/* 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 — không nền, chữ đỏ, nhãn + giá cùng 1 hàng (user chốt 28/08/2026).
   Bỏ nền gradient vàng và dòng pill "Giá đã bao gồm VAT". ────────────────── */
.pd-price { padding: 0; }
.pd-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.pd-price__label { font-size: var(--sd-fs-body); color: var(--sd-text-muted); }
.pd-price__now { font-size: 30px; font-weight: var(--sd-fw-bold); line-height: 1.1; color: var(--sd-price); }
.pd-price__now sup { font-size: .5em; }
.pd-price__old { color: var(--sd-text-muted); font-size: var(--sd-fs-body); }
.pd-price__old sup { font-size: .7em; }
.pd-price__save { font-size: var(--sd-fs-lg); color: var(--sd-text-muted); font-weight: var(--sd-fw-medium); }
.pd-price__save b { font-weight: var(--sd-fw-bold); color: var(--sd-price); font-size: 20px; }
/* 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-ink); }

/* ── 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-ink); }
.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-ink); }
.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-ink); 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-ink); border-radius: 50%;
    animation: sd-spin .7s linear infinite; z-index: 3;
}
/* Lưới: 4 SP/hàng (PC) · 2 (tablet) · 1 (mobile) — chỉ 1 hàng.
   PHẢI khớp RelatedPageSize = 4 trong ProductPageService: để 5 cột thì trang nào cũng
   thừa một ô trống bên phải (lỗi 28/08/2026). Đổi số này thì đổi cả hằng số đó. */
.pd-related__grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 767.98px) { .pd-related__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575.98px) { .pd-related__grid { grid-template-columns: 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 đề */
/* Canh giữa theo DÒNG TIÊU ĐỀ: top = padding 18px của .cat-card, cao đúng 1 dòng chữ
   tiêu đề (font-size kế thừa --sd-fs-title, height 1.2em) rồi align-items:center.
   Để top:12px cứng như trước thì mũi tên cao hơn chữ một nhịp (lỗi 28/08/2026). */
.pd-related__nav {
    position: absolute; top: 18px; right: 18px; z-index: 2; margin: 0;
    display: flex; align-items: center; gap: 10px;
    font-size: var(--sd-fs-title); height: 1.2em;
}
.pd-related__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 0; background: none;
    color: var(--sd-text); cursor: pointer; transition: color .18s;
}
.pd-related__arrow svg { width: 18px; height: 18px; }
.pd-related__arrow:hover:not(:disabled) { color: var(--sd-primary-ink); }
.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-ink); 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-ink); border-color: var(--sd-primary-ink); 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-ink);
    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-ink); }
.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-ink); }

/* ── 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-ink); 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-ink); }
.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-ink); }
.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-ink); 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-ink); 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-ink); 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-ink); }
.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-ink); 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%; }
}


/* ══ FOOTER — bố cục lấy theo dự án sondat (09/09/2026) ═══════════════════════
   HÀNG 1 (full width, CĂN GIỮA): logo → tên DN → mô tả → dải ngang
       [Bản đồ chỉ đường] · [Mạng xã hội] · [badge Bộ Công Thương] — cùng chiều cao.
   HÀNG 2 (lưới Bootstrap): Thông tin liên hệ · Hỗ trợ khách hàng · Sản phẩm.
   Khối CSS chính (.site-footer/.ft-title/.ft-bar/.ft-contact/.ft-links/.ft-bottom)
   nằm ở vùng ~1400 phía trên, port từ sondat rồi đổi sang bảng màu GASMK.

   ĐÃ GỠ so với bản 27/08/2026 (bố cục vilacojsc):
   • .ft-cta — dải CTA còn nguyên chữ "thi công nhôm kính" của dự án nguồn, sai ngành.
   • .ft-grid / .ft-grid--nomap / .ft-col--brand — lưới CSS Grid 4 cột, nay dùng
     lưới Bootstrap của sondat.
   • .ft-mapbox — iframe bản đồ nhúng trong cột; sondat chỉ có NÚT mở #mapModal. */
/* Giờ làm việc: mỗi ca một dòng dưới nhãn "Thời gian làm việc" */
.ft-hours { display: block; }
.ft-hours em { font-style: normal; font-weight: var(--sd-fw-medium); }

/* ==========================================================================
   TRANG 404 (Views/Shared/NotFound.cshtml) — 15/09/2026
   Trước đây trang này không có CSS riêng: nó mượn .row của Bootstrap làm khối
   căn giữa (không có .col-* nên dính margin âm → chữ lệch) và mượn .item-payment
   của trang thanh toán làm nút. Nay có khối riêng, không đụng lớp nào khác.
   KHÔNG dùng .pad-top-15/.pad-bot-40 — khoảng trên do `.cat-crumb + section` lo.
   ========================================================================== */
.nf-sec { padding-bottom: 40px; }

/* Thẻ trắng trải HẾT chiều rộng .container như mọi .cat-card khác của site
   (user chốt 15/09/2026 — trước đó bị bó max-width 640px nên nhìn như hộp thoại
   lọt thỏm giữa trang). Nội dung bên trong vẫn căn giữa. */
.nf-card {
    padding: 56px 24px 52px;
    text-align: center;
}

/* Số 404: chữ số lớn, MÀU ĐẶC --sd-primary.
   Chỉ là TRANG TRÍ nên aria-hidden ở HTML — nội dung thật nằm ở .nf-title.
   ĐÃ THỬ gradient chữ (background-clip:text + text-fill-color:transparent) và BỎ:
   đo pixel ảnh chụp thật thì chữ ra #797776 → #9C7F5D, không phải xanh → cam. Trang
   lỗi không đáng phải gánh một hiệu ứng phụ thuộc trình duyệt như vậy. */
.nf-code {
    font-size: 72px;
    line-height: 1;
    font-weight: var(--sd-fw-bold);
    letter-spacing: -2px;
    margin-bottom: 14px;
    color: var(--sd-primary);
}

.nf-title {
    font-size: var(--sd-fs-title);
    font-weight: var(--sd-fw-medium);
    color: var(--sd-ink);
    margin: 0 0 10px;
}

.nf-desc {
    font-size: var(--sd-fs-body);
    color: var(--sd-text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.nf-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    font-size: var(--sd-fs-body);
    font-weight: var(--sd-fw-medium);
    color: var(--sd-text);
    background: #fff;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nf-btn:hover { border-color: var(--sd-primary); color: var(--sd-primary-ink); text-decoration: none; }

/* Nút chính: nền --sd-primary, chữ trắng — cặp này đạt AA 6.1:1 (xem bảng màu ở :root) */
.nf-btn--primary { background: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }
.nf-btn--primary:hover { background: var(--sd-primary-dark); border-color: var(--sd-primary-dark); color: #fff; }

@media (max-width: 575.98px) {
    .nf-card { padding: 30px 18px 28px; }
    .nf-code { font-size: 56px; }
    .nf-actions { flex-direction: column; }
    .nf-btn { justify-content: center; }
}