/* ============================================================================
   maithu_store — Design system frontend công khai
   Plan #FE §2. Palette hút từ site thật: cam #e86130 (chủ đạo) + xanh #388eea
   + vàng #fed700 (highlight) + than xanh #334862 (chữ). Look&feel THOÁNG kiểu
   qdang.vn (whitespace nhiều, card sạch, nền xám nhạt). Vanilla CSS + Alpine.
   ============================================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Thương hiệu */
    --brand:        #e86130;   /* cam — CTA, nhấn, logo "audio" */
    --brand-dark:   #cf4f22;   /* hover */
    --brand-soft:   #fdece3;   /* nền nhạt cam */
    --blue:         #388eea;   /* nút phụ (shop/địa chỉ) */
    --blue-dark:    #2277d6;
    --yellow:       #fed700;   /* highlight thanh menu */
    --hotline:      #e23b3b;   /* đỏ hotline + giá sale */

    /* Trung tính */
    --ink:          #2b3b4e;   /* tiêu đề */
    --ink-2:        #5b6b7d;   /* body */
    --ink-3:        #8a97a6;   /* phụ, meta */
    --line:         #e7ebf0;   /* viền */
    --line-2:       #f0f3f7;
    --bg:           #ffffff;
    --bg-soft:      #f4f6f9;   /* nền trang thoáng */
    --white:        #ffffff;

    /* Cỡ chữ */
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14.5px; --fs-md: 16px;
    --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

    /* Nhịp/khoảng */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(43,59,78,.06), 0 1px 3px rgba(43,59,78,.05);
    --shadow:    0 4px 14px rgba(43,59,78,.08);
    --shadow-lg: 0 12px 34px rgba(43,59,78,.14);

    --container: 1240px;
    --header-h: 66px;
    --font: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Reset nhẹ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--bg-soft);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { margin: 0 0 var(--sp-3); color: var(--ink); line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-4); }
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-12) 0; }
.section--tight { padding: var(--sp-8) 0; }
.grid { display: grid; gap: var(--sp-5); }
.row { display: flex; gap: var(--sp-4); }
.muted { color: var(--ink-3); }
.text-sale { color: var(--hotline); }

/* Grid sản phẩm — desktop 5, tablet 3, mobile 2 (thoáng kiểu qdang) */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-pill);
    font-size: var(--fs-base); font-weight: 600; line-height: 1; color: var(--white);
    background: var(--brand); transition: background .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); color: var(--white); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn--blue { background: var(--blue); }
.btn--blue:hover { background: var(--blue-dark); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn--sm { padding: 7px 14px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; }
.badge--sale { background: var(--hotline); color: #fff; }
.badge--hot  { background: var(--yellow); color: #7a5b00; }
.badge--soft { background: var(--brand-soft); color: var(--brand-dark); }
.badge--out  { background: #eef1f5; color: var(--ink-3); }

/* ============================================================================
   HEADER 2 tầng
   ============================================================================ */
.site-header { background: var(--white); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; }

/* Tầng 1 — thanh phụ (mảnh) */
.topbar { background: var(--ink); color: #c7d2df; font-size: var(--fs-sm); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.topbar a { color: #c7d2df; }
.topbar a:hover { color: var(--yellow); }
.topbar__links { display: flex; gap: var(--sp-5); align-items: center; }
.topbar__hot { display: flex; align-items: center; gap: var(--sp-5); color: #fff; font-weight: 600; }
.topbar__hot strong { color: var(--yellow); }
/* Địa chỉ + giờ làm việc: mỗi cụm 1 icon nhỏ, cụm sau có vạch ngăn — vạch nằm ở :not(:first-child)
   nên khuyết một trong hai thì KHÔNG còn vạch trơ ra. */
.topbar__hot > span { display: inline-flex; align-items: center; }
.topbar__hot > span:not(:first-child) {
    padding-left: var(--sp-5); border-left: 1px solid rgba(255, 255, 255, .18);
}
.topbar__ic { width: 14px; height: 14px; margin-right: 6px; color: var(--yellow); flex-shrink: 0; }
.topbar__hours { color: #c7d2df; font-weight: 500; }
@media (max-width: 860px) { .topbar { display: none; } }

/* Tầng 2 — thanh chính (logo · search · hotline · actions) */
.mainbar .container { display: flex; align-items: center; gap: var(--sp-6); height: var(--header-h); }
.brand-logo img { height: 40px; width: auto; }
/* Cột logo rộng = nút "DANH MỤC SẢN PHẨM" (209) − gap (24) → search thẳng hàng mép phải nút + menu chính */
@media (min-width: 981px) {
    .brand-logo { flex: 0 0 185px; }
}
.mainbar__search { flex: 1; max-width: 640px; }
.searchbox { display: flex; align-items: center; border: 2px solid var(--brand); border-radius: var(--radius-pill); overflow: hidden; background: #fff; }
/* Dropdown loại nội dung — segment trái + panel tuỳ biến (khớp .ac-panel) */
.searchbox__scope-btn {
    align-self: stretch; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    border: 0; outline: 0; background: transparent; cursor: pointer; white-space: nowrap; font-family: inherit;
    color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
    padding: 0 15px 0 18px; border-right: 1px solid var(--line);
    transition: color .15s, background-color .15s;
}
.searchbox__scope-btn:hover { color: var(--ink); background-color: var(--bg-soft); }
.searchbox__scope-caret { width: 10px; height: 6px; stroke: currentColor; stroke-width: 1.7; fill: none;
    stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform .18s; }
.searchbox__scope-caret.is-open { transform: rotate(180deg); }

.searchbox__scope-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; min-width: 200px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 6px;
}
.searchbox__scope-opt {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit;
    padding: 9px 12px; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm);
    color: var(--ink); font-size: var(--fs-sm); font-weight: 500; transition: background-color .12s, color .12s;
}
.searchbox__scope-opt:hover { background: var(--brand-soft); color: var(--brand-dark); }
.searchbox__scope-opt.is-active { color: var(--brand-dark); font-weight: 700; }
.searchbox__scope-opt > span { flex: 1; }
.searchbox__scope-opt .scope-ico { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; opacity: .8; }
.searchbox__scope-opt .scope-check { width: 16px; height: 16px; stroke: var(--brand); stroke-width: 2.2;
    fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.searchbox input { flex: 1; border: 0; outline: 0; padding: 10px 18px; font-size: var(--fs-base); color: var(--ink); background: transparent; }
.searchbox button[type="submit"] { border: 0; background: var(--brand); color: #fff; padding: 0 20px; align-self: stretch; display: flex; align-items: center; }
.searchbox button[type="submit"]:hover { background: var(--brand-dark); }
.mainbar__actions { display: flex; align-items: center; gap: var(--sp-5); }

/* Search mobile: nút mở (thay nút Gọi) + nút đóng overlay + icon scope compact — MẶC ĐỊNH ẩn (desktop) */
.hbtn--search { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--radius-sm); background: var(--brand); color: #fff; border: 0; cursor: pointer; flex: 0 0 auto; }
.hbtn--search:hover { background: var(--brand-dark); color: #fff; }
.searchbox__scope-ico { display: none; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .85; flex: 0 0 auto; }
.search-backdrop { position: fixed; inset: 0; background: rgba(15,23,32,.5); z-index: 1;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.is-search-open .search-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 861px) { .search-backdrop { display: none !important; } }

/* Nút hành động header kiểu audioplus: hotline (cam) + địa chỉ shop (xanh) */
.hbtn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px 16px; border-radius: var(--radius-pill); color: #fff; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; transition: background .15s, box-shadow .15s; }
.hbtn:hover { color: #fff; box-shadow: var(--shadow); }
.hbtn--phone { background: var(--brand); }
.hbtn--phone:hover { background: var(--brand-dark); }
.hbtn--map { background: var(--blue); }
.hbtn--map:hover { background: var(--blue-dark); }

/* Giỏ hàng (dummy) */
.cart-btn { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.cart-btn:hover { color: var(--brand); }
.cart-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: right; }
.cart-txt small { color: var(--ink-3); font-weight: 500; font-size: var(--fs-xs); }
.cart-ic { position: relative; display: inline-flex; }
.cart-count { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; }

.icon-btn { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 600; }
.icon-btn:hover { color: var(--brand); }
.burger { display: none; background: none; border: 0; color: var(--ink); }
@media (max-width: 1180px) { .cart-txt { display: none; } }
@media (max-width: 1040px) { .hbtn--map .hbtn__txt { display: none; } .hbtn--map { padding: 9px 12px; } }
@media (max-width: 860px) {
    .hbtn--map { display: none; }
    .hbtn--phone { display: none; }          /* bỏ nút Gọi trên mobile → thay bằng nút Search (giống web cũ) */
    .hbtn--search { display: inline-flex; }
    .burger { display: inline-flex; }
    /* Search (flex:1 lấp giữa ở desktop) mobile là position:absolute → hết cái đẩy actions sang phải
       → dồn actions về sát mép phải, khỏi thừa khoảng trắng. */
    .mainbar__actions { margin-left: auto; }
    /* Logo to hơn + nhích ra giữa: thu gap, tăng height, margin-left:auto (cùng auto của actions chia đôi
       khoảng trống 2 bên logo → logo cân giữa burger|actions). Header 66px → logo 50px vừa (chừa 8px trên/dưới). */
    .mainbar .container { gap: var(--sp-3); }
    .brand-logo { margin-left: auto; }
    .brand-logo img { height: 50px; }

    /* Bar chính opaque + nổi TRÊN backdrop (z cao hơn) → chỉ nền dưới header bị tối */
    .mainbar { position: relative; z-index: 2; background: #fff; }
    .mainbar .container { position: relative; }

    /* Search = overlay trượt xuống dưới header. LUÔN ở DOM, ẩn/hiện bằng opacity+transform → MƯỢT
       (display:none không transition được → pop giật; đây fade+slide). */
    .mainbar__search { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3;
        max-width: none; display: flex; align-items: center; gap: 6px;
        background: #fff; padding: 10px 12px; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
        opacity: 0; transform: translateY(-8px); pointer-events: none;
        transition: opacity .18s ease, transform .18s ease; }
    /* KHÔNG visibility:hidden khi đóng → input vẫn focus được → nút search focus ĐỒNG BỘ trong gesture
       (iOS mới bật bàn phím); pointer-events:none để overlay ẩn không chặn chạm vùng dưới header. */
    .is-search-open .mainbar__search { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .searchbox__scope-label { display: none; }   /* compact: chỉ hiện icon phễu */
    .searchbox__scope-ico { display: inline-block; }
    .searchbox__scope-btn { padding: 0 10px; gap: 5px; }
}

/* ============================================================================
   NAV chính + MEGA MENU (§3 — bắt buộc)
   ============================================================================ */
.mainnav { background: var(--white); border-top: 1px solid var(--line); }
.mainnav .container { display: flex; align-items: stretch; gap: var(--sp-2); position: relative; }

/* Nút "DANH MỤC SẢN PHẨM" mở panel dọc (bên trái).
   KHÔNG position:relative — để .megamenu neo theo .container → kéo FULL bề rộng container (left:0 → right:0). */
.catnav { }
.catnav__toggle {
    display: flex; align-items: center; gap: var(--sp-2); height: 46px; padding: 0 var(--sp-5);
    background: var(--brand); color: #fff; font-weight: 700; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.mainnav__links { display: flex; align-items: stretch; gap: 2px; list-style: none; }
.mainnav__links li { list-style: none; }
.mainnav__links > li > a {
    display: flex; align-items: center; height: 46px; padding: 0 var(--sp-2); white-space: nowrap;
    font-weight: 600; color: var(--ink); font-size: 13.333px; text-transform: uppercase; letter-spacing: .02em;
}   /* 13.333px = đồng bộ cỡ chữ nút "DANH MỤC SẢN PHẨM" (default <button> Chrome = 10pt = 13.333px) */
.mainnav__links > li > a:hover { color: var(--brand); }
.mainnav__links .nav-caret { width: 14px; height: 14px; margin-left: 4px; color: var(--ink-3); }
.mainnav__links .nav-ic { width: 14px; height: 14px; margin-right: 5px; flex-shrink: 0; }
.mainnav__links .is-accent > a { color: var(--hotline); }

/* Subnav dropdown cho item nav ngang có con (menu quản lý — plan Menu M4b) */
.mainnav__links .has-sub { position: relative; }
.mainnav__links .subnav {
    position: absolute; top: 100%; left: 0; z-index: 60; min-width: 200px; margin: 0; padding: 6px 0;
    display: none; list-style: none; background: #fff; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
}
.mainnav__links .has-sub:hover .subnav { display: block; }
.mainnav__links .subnav li { list-style: none; }
.mainnav__links .subnav a {
    display: block; padding: 8px var(--sp-4); color: var(--ink); font-weight: 500; font-size: 13px;
    text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.mainnav__links .subnav a:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* Ô ảnh giữ chỗ khi bản ghi chưa có ảnh — icon trung tính, không mượn logo thương hiệu. */
.img-holder {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: var(--bg-2, #f7f9fb); color: var(--ink-3);
}
.img-holder svg { width: 38%; max-width: 64px; height: auto; opacity: .45; }

/* Chưa chọn logo trong Cấu hình → hiện tên site bằng chữ thay thẻ img. */
.brand-logo__text { font-size: 20px; font-weight: 800; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; }

/* Lời nhắc khi CHƯA gán menu cho vị trí (nav ngang / drawer mobile). Không rơi về link viết cứng nữa,
   nhưng cũng không để trống trơn — người quản trị phải thấy ngay là còn thiếu cấu hình. */
.menu-hint {
    display: flex; align-items: center; padding: 0 var(--sp-3); font-size: 13px; color: var(--ink-3);
    font-style: italic; white-space: nowrap;
}
/* Trong drawer phải trả về display:block — để nguyên flex thì <strong> thành flex item, chữ bị xé
   thành từng cụm rời và xuống dòng loạn (Triều gửi ảnh 01/08). */
.drawer__body .menu-hint { display: block; padding: var(--sp-4) var(--sp-5); white-space: normal; line-height: 1.5; }

/* Badge item nav (marketer gõ text; style hot/new/sale + mặc định soft) */
.nav-badge {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; vertical-align: middle;
    font-size: 10px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .02em;
    background: var(--brand-soft); color: var(--brand-dark);
}
.nav-badge--hot { background: var(--hotline); color: #fff; }
.nav-badge--new { background: #2e7d32; color: #fff; }
.nav-badge--sale { background: #f9a825; color: #3a2c00; }

/* Panel danh mục DỌC + flyout */
/* left/right = --sp-4 (đúng padding ngang của .container) → panel khớp MÉP CONTENT (nút & card dưới),
   không thò ra ngoài như left:0/right:0 (tính theo mép padding-box). */
.megamenu { position: absolute; left: var(--sp-4); right: var(--sp-4); top: 100%; z-index: 60; display: none; }
.catnav:hover .megamenu,
.catnav.is-open .megamenu { display: block; }
.megamenu.is-wide .megamenu__inner { width: 100%; }   /* full-width chỉ khi có flyout (cat set) */
/* fit-content: cat='' co về đúng cột danh mục (block auto-width sẽ lấp đầy cha full-width → phải fit-content) */
.megamenu__inner { display: flex; width: fit-content; background: #fff; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
    overflow: hidden; }   /* clip con (ul góc vuông) theo góc bo — hết 2 góc nhọn chọc ra.
        KHÔNG min-height cứng: cột danh mục luôn hiện → flex tự lấy chiều cao = cột danh mục (sàn),
        flyout nào dài hơn thì tự cao thêm. */
/* Menu chỉ cấp 1 (chưa có flyout) — dropdown gọn, RỘNG BẰNG nút "DANH MỤC SẢN PHẨM" (khớp mép) */
.megamenu--flat { width: 100%; }
.megamenu--flat .megamenu__inner { min-height: auto; }
.megamenu--flat .megamenu__cats { border-right: 0; width: 100%; }

/* Cột danh mục dọc */
.megamenu__cats { width: 207px; padding: var(--sp-2) 0; border-right: 1px solid var(--line); background: #fff; }
.megamenu__cats li > a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 10px var(--sp-4); color: var(--ink); font-weight: 500;
}
.megamenu__cats li > a .chev { color: var(--ink-3); }
.megamenu__cats li.is-active > a,
.megamenu__cats li > a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.megamenu__cats .cat-thumb { width: 22px; height: 22px; object-fit: contain; margin-right: var(--sp-3); }
.megamenu__cats li > a .cat-name { flex: 1; min-width: 0; display: flex; align-items: center;
    text-transform: uppercase; font-size: 13px; letter-spacing: 0; white-space: nowrap; }

/* Flyout nhiều cột */
.megamenu__flyout { flex: 1; padding: var(--sp-6) var(--sp-8); overflow-y: auto; max-height: var(--flyout-maxh, none); }
    /* hiện/ẩn qua x-show; --flyout-maxh do JS set trên .megamenu__inner = chiều cao cột danh mục → flyout cao hơn thì cuộn.
       KHÔNG bind style trực tiếp lên flyout (đụng x-show). */
.flyout-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
/* cột 1 (Loa nghe nhạc) rộng theo nội dung (max-content) → không item nào xuống dòng;
   3 cột còn lại chia đều phần còn lại. */
.flyout-cols--4 { grid-template-columns: max-content repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.flyout-cols--4 > .flyout-col:first-child li a { white-space: nowrap; }
/* Badge nhỏ cạnh mục (Phổ biến / Nổi bật) */
.flyout-tag { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 1px 5px; border-radius: 3px; background: var(--brand-soft);
    color: var(--brand-dark); margin-left: 5px; vertical-align: middle; }
.flyout-tag--hot { background: #fdecec; color: var(--hotline); }
/* Placeholder cho danh mục chưa dựng mega */
.flyout-empty { height: 100%; min-height: 320px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--sp-3); color: var(--ink-3); text-align: center; }
.flyout-empty .svg-ic { width: 40px; height: 40px; font-size: 34px; }
.flyout-col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.flyout-col li a { display: block; padding: 5px 0; color: var(--ink-2); }
.flyout-col li a:hover { color: var(--brand); padding-left: 3px; }
.flyout-brands { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.flyout-brands a { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; }
.flyout-brands a:hover { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 980px) { .mainnav { display: none; } }

/* ============================================================================
   PRODUCT CARD
   ============================================================================ */
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: #dfe5ec; }
.pcard__media { position: relative; aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); }
.pcard__media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__badges { position: absolute; top: var(--sp-2); left: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.pcard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--line-2); }
.pcard__title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0 0 var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.pcard:hover .pcard__title { color: var(--brand); }
.pcard__price { margin-top: auto; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.pcard__price .now { color: var(--hotline); font-weight: 700; font-size: var(--fs-md); }
.pcard__price .was { color: var(--ink-3); text-decoration: line-through; font-size: var(--fs-sm); }
.pcard__price .contact { color: var(--blue); font-weight: 700; }
.pcard__stock { margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; }
.pcard__stock.in { color: #1f9d55; }
.pcard__stock.out { color: var(--ink-3); }

/* ============================================================================
   SECTION HEADER "Tên | Xem thêm ›"
   ============================================================================ */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); gap: var(--sp-4); }
.section-head h2 { margin: 0; font-size: var(--fs-2xl); position: relative; padding-left: 14px; }
.section-head h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: var(--radius-pill); background: var(--brand); }
.section-head .more { color: var(--ink-2); font-weight: 600; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 4px; }
.section-head .more:hover { color: var(--brand); }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); }
.hero__main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #23303f; color: #fff; min-height: 340px; }
/* Slider hero — ảnh nền + chữ render (scrim trái→phải cho chữ trắng đọc được) */
[x-cloak] { display: none !important; }
.hero__track { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity .9s ease; }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
/* Ken Burns: ảnh slide đang active zoom/pan chậm — cảm giác điện ảnh, sống động */
.hero__slide.is-active img { animation: heroKenBurns 9s ease-out both; }
@keyframes heroKenBurns {
    from { transform: scale(1.05) translate(0, 0); }
    to   { transform: scale(1.16) translate(-1.6%, -1.1%); }
}
/* Chữ bay lên từng dòng lệch nhịp khi slide vào */
.hero__content > * { opacity: 0; transform: translateY(18px); }
.hero__slide.is-active .hero__content > * { animation: heroTextIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero__slide.is-active .hero__content > *:nth-child(1) { animation-delay: .18s; }
.hero__slide.is-active .hero__content > *:nth-child(2) { animation-delay: .32s; }
.hero__slide.is-active .hero__content > *:nth-child(3) { animation-delay: .46s; }
@keyframes heroTextIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active img { animation: none; }
    .hero__content > * { opacity: 1; transform: none; }
    .hero__slide.is-active .hero__content > * { animation: none; }
}
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,27,37,.86) 0%, rgba(19,27,37,.62) 34%, rgba(19,27,37,.14) 62%, rgba(19,27,37,0) 82%); }
/* Slide chỉ có link, không có nút → phủ 1 thẻ a lên cả slide (kiểu [ux_banner link=] của Flatsome). */
.hero__cover { position: absolute; inset: 0; z-index: 2; }
/* .hero__content phủ kín slide nên sẽ NUỐT cú click xuống .hero__cover → cho chữ "trong suốt" với chuột,
   chỉ nút/link bên trong mới nhận click. */
.hero__content { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); max-width: 56%; padding: var(--sp-10) var(--sp-8) var(--sp-10) var(--sp-12); }
.hero__content a, .hero__content button { pointer-events: auto; }
.hero__title { color: #fff; font-size: var(--fs-3xl); line-height: 1.14; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero__content p { color: #e7edf4; margin: 0; max-width: 440px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.hero__content .btn { align-self: flex-start; margin-top: var(--sp-2); }
.hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hero__nav:hover { background: rgba(255,255,255,.36); }
.hero__nav--prev { left: var(--sp-3); }
.hero__nav--next { right: var(--sp-3); }
.hero__nav svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: var(--sp-4); z-index: 3; display: flex; justify-content: center; gap: var(--sp-2); }
.hero__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: background .15s, transform .15s; }
.hero__dots button.is-active { background: #fff; transform: scale(1.25); }
/* Widget "Tin tức" (cột phải hero) — style theo tông của mình (accent cam) */
.newsbox { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5) var(--sp-3); overflow: hidden; }
.newsbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-1); border-bottom: 2px solid var(--brand); }
.newsbox__head h3 { margin: 0; font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .02em; }
.newsbox__head .more { color: var(--brand); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 3px; }
.newsbox__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.newsbox__list li { border-top: 1px solid var(--line); }
.newsbox__list li:first-child { border-top: 0; }
.newsbox__list li a { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; }
.newsbox__thumb { flex-shrink: 0; width: 64px; height: 48px; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--bg-soft); }
.newsbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.newsbox__title { font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newsbox__list li a:hover .newsbox__title { color: var(--brand); }
.newsbox__empty { color: var(--ink-3); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .hero__main { min-height: 220px; }
    .hero__content { max-width: 100%; padding: var(--sp-5); }
    .hero__title { font-size: var(--fs-xl); }
    .hero__content p { display: none; }
    .hero__nav { display: none; }
}

/* ---------- TOP DANH MỤC HOT (grid card ảnh + tên) ---------- */
.hotcats { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-4) var(--sp-3); }
.hotcat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.hotcat__thumb { width: 100%; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s, transform .15s; }
.hotcat__thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3); transition: transform .25s; }
.hotcat:hover .hotcat__thumb { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.hotcat:hover .hotcat__thumb img { transform: scale(1.06); }
.hotcat__name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hotcat:hover .hotcat__name { color: var(--brand); }
@media (max-width: 1100px) { .hotcats { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 820px)  { .hotcats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px)  { .hotcats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-2); } }

/* ---------- Dự án tiêu biểu (grid card ảnh + tiêu đề) ---------- */
.projcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.projcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.projcard:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.projcard__thumb { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.projcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.projcard:hover .projcard__thumb img { transform: scale(1.05); }
.projcard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column;
    gap: var(--sp-2); flex: 1; }
.projcard__title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projcard:hover .projcard__title { color: var(--brand); }
.projcard__excerpt { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projcard__meta { margin-top: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--brand); }
@media (max-width: 900px) { .projcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .projcards { grid-template-columns: 1fr; } }

/* ---------- Brand strip ---------- */
.brandstrip { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.brandstrip a { flex: 1 1 130px; height: 70px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); color: var(--ink-2); font-weight: 700; }
.brandstrip a:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-sm); }
.brandstrip img { max-height: 44px; object-fit: contain; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: #cdd6e1; margin-top: var(--sp-16); }
/* Ảnh nền mờ — gradient tối phủ + blur nhẹ, chữ vẫn đọc rõ.
   Trước đây nhúng CỨNG một file trong /uploads/ của AudioPlus: ảnh là NỘI DUNG, không được nằm trong
   stylesheet dùng chung (Triều 01/08) — site khác dựng lên thì đó là ảnh hỏng. Giờ đọc biến --footer-bg,
   không đặt thì chỉ còn nền gradient (vẫn đẹp). Muốn có ảnh: đặt --footer-bg trong Khối nội dung footer. */
.site-footer::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(rgba(17, 24, 33, .82), rgba(17, 24, 33, .91)),
        var(--footer-bg, none) center / cover no-repeat;
    filter: blur(1.5px); transform: scale(1.03);   /* blur nhẹ = "mờ"; scale bù mép blur */
    pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer a { color: #cdd6e1; }
.site-footer a:hover { color: var(--yellow); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--sp-8); padding: var(--sp-12) 0; }
.footer-col h4 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: .03em; }
.footer-col li { padding: 4px 0; }
/* Chevron cam đầu mỗi link cột footer (trừ khối liên hệ đã có icon tile) */
.footer-col ul:not(.footer-contact) li a { display: inline-flex; align-items: center; gap: 8px; }
.footer-col ul:not(.footer-contact) li a::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px;
    border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg);
    transition: transform .15s; }
.footer-col ul:not(.footer-contact) li a:hover::before { transform: rotate(45deg) translate(1px, -1px); }
.footer-brand img { height: 38px; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: .92; }
/* Lockup logo tròn + tên shop + dòng ngành hàng (bám mẫu Triều) */
.footer-lockup { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-lockup img.footer-logo-round { height: 60px; width: 60px; margin-bottom: 0; filter: none; opacity: 1; border-radius: var(--radius); }
.footer-lockup__text { display: inline-flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 2px solid var(--brand); }
.footer-brand-name { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: .3px; }
.footer-brand-name .ap-audio { color: var(--brand); }
.footer-brand-name .ap-plus { color: #fff; }
.footer-brand-tag { font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: #9fabb9; }
/* Khối liên hệ chi tiết dưới lockup (địa chỉ + số KD + CSKH + email + giờ) */
.footer-contact--full { display: flex; flex-direction: column; gap: 2px; }
.footer-contact--full li { align-items: flex-start; gap: 10px; padding: 4px 0; line-height: 1.5; }
/* Icon đóng khung ô trắng bo góc (Triều: cho đỡ "nhếch nhác") */
.fc-ic { width: 26px; height: 26px; flex: 0 0 26px; padding: 5px; background: #fff; border-radius: var(--radius-sm);
    margin-top: -1px; fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.footer-contact--full a { color: inherit; }
.footer-contact--full a:hover { color: #fff; }
.fc-map { color: var(--brand); font-weight: 600; white-space: nowrap; }
.fc-map:hover { color: var(--brand); text-decoration: underline; }
/* "Kết nối" — hàng icon tile social THUẦN (không embed, 0 JS bên thứ 3 — memory fake-widget) */
.footer-h4-gap { margin-top: var(--sp-5); }
.footer-social-tiles { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.footer-social-tiles .fc-ic { width: 32px; height: 32px; flex: 0 0 32px; padding: 7px; margin-top: 0; transition: transform .15s; }
.footer-social-tiles a:hover .fc-ic { transform: translateY(-2px); }
.footer-bct { display: inline-block; margin-top: var(--sp-4); }
.footer-bct img { height: 46px; width: auto; }
/* Dải "Chấp nhận thanh toán" */
.footer-pay { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-6) 0; text-align: center; }
.footer-pay h5 { color: #fff; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-4); }
.footer-pay__row { display: flex; justify-content: center; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.footer-pay__row img { height: 34px; width: auto; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
/* Khối pháp lý ĐKKD (Nghị định 52/2013 TMĐT) */
.footer-legal { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-5) 0; font-size: var(--fs-sm); color: #9fabb9; }
.footer-legal p { margin: 0 0 4px; }
.footer-legal__name { color: #cdd6e1; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.footer-contact li { display: flex; gap: var(--sp-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-4) 0; font-size: var(--fs-sm); }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.social-row { display: flex; gap: var(--sp-2); }
.social-row a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.social-row a:hover { background: var(--brand); color: #fff; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ============================================================================
   MOBILE DRAWER (menu trượt)
   ============================================================================ */
/* Off-canvas trái: LUÔN ở DOM (không x-if huỷ DOM) → trượt vào/ra mượt bằng transform + class .drawer-open. */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(20,28,38,.5); z-index: 90;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: #fff; z-index: 91; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .25s ease; will-change: transform; }
.drawer-open .drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { transition: none; } }
/* Không còn .drawer__head (logo + nút đóng) — Triều 01/08. Đóng bằng nền mờ / Esc / bấm lại ☰.
   Đệm trên rộng hơn để mục đầu không dính sát mép trên màn hình. */
.drawer__body { overflow-y: auto; padding: var(--sp-4) 0 var(--sp-2); }
.drawer__body a { display: block; padding: 11px var(--sp-5); color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line-2); }
.drawer__body a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.drawer__body .drawer-ic { width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; }
.drawer__body a.drawer-sub { padding-left: calc(var(--sp-5) + 20px); font-weight: 400; font-size: 13px; color: var(--ink-2); }
.drawer__body a .nav-badge { margin-left: 6px; }
.drawer__body .grp { padding: var(--sp-3) var(--sp-5) 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }

/* Mục có danh mục con = accordion, MẶC ĐỊNH ĐÓNG (52 danh mục đổ phẳng thì drawer dài vô tận).
   Nhãn vẫn là LINK bấm vào được; chỉ nút mũi tên mới mở/đóng → không cướp thao tác đi tới danh mục cha. */
.drawer-grp__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-2); }
.drawer-grp__row > a { flex: 1 1 auto; border-bottom: 0; }
.drawer-grp__btn { flex: 0 0 auto; width: 44px; background: none; border: 0; border-left: 1px solid var(--line-2);
    color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drawer-grp__btn:hover { background: var(--brand-soft); color: var(--brand-dark); }
.drawer-grp__btn .svg-ic { width: 16px; height: 16px; transition: transform .2s ease; }
.drawer-grp.is-open .drawer-grp__btn .svg-ic { transform: rotate(180deg); }
/* max-height do JS gán = scrollHeight thật khi mở (không cap cứng kẻo cắt mất mục cuối). */
.drawer-grp__sub { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: var(--bg-2, #f7f9fb); }
@media (prefers-reduced-motion: reduce) { .drawer-grp__sub { transition: none; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); padding: var(--sp-4) 0; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--ink-3); }

/* ============================================================================
   ARCHIVE (danh mục / thương hiệu): tiêu đề gộp trong card filter (.fbar__head) + grid
   ============================================================================ */
.archive-desc { color: var(--ink-2); font-size: var(--fs-sm); }
.archive-desc :is(h2,h3) { font-size: var(--fs-md); }

.empty-state { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--sp-12); text-align: center; color: var(--ink-3); }

/* Ảnh trong mô tả danh mục/brand: căn GIỮA (chuẩn bài WP cũ; .pdp-content img căn giữa ở rule PDP) */
.archive-desc img { display: block; margin-left: auto; margin-right: auto; }

/* ---------- Readmore "Xem thêm" (port audioplus cũ — bật/tắt ở admin Cấu hình ▸ Đọc thêm) ---------- */
.rm { position: relative; overflow: hidden; }
.rm.rm-clip { max-height: var(--rm-max); }   /* no-JS fallback; JS drive maxHeight inline + set transition inline (né Alpine ghi đè class) */
.rm__btn { text-align: center; }
.rm__btn--more { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; padding-top: 70px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--rm-fade, #fff) 72%); }
.rm__btn--less { padding-top: 10px; }
.rm__btn button { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); background: #fff;
    border: 1px solid var(--blue); border-radius: var(--radius-sm); padding: 6px 38px; font-size: var(--fs-sm);
    font-weight: 600; cursor: pointer; margin-bottom: 8px; }
.rm__btn button:hover { background: #f2f8ff; }
.rm__caret { font-size: 9px; }

/* Nút cuộn lên đầu trang (Triều 2026-07-24) — ẩn tới khi cuộn quá ~1 màn hình; z-index dưới mọi overlay */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { filter: brightness(1.07); }
.to-top svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease; transform: none; } }

/* Accordion FAQ — bám STYLE content_studio (tools/preview/render_md.py .faqitem): mỗi câu = 1 card
   viền #e3e3e3 bo 8px, nền trắng, dấu +/- đỏ #e2483d bên phải. Markup Flatsome migrate
   (.accordion/.accordion-item/.accordion-title/.accordion-inner) → dùng max-height animate thay <details>. (Triều 24/07) */
.accordion_title { font-size: var(--fs-lg); color: var(--ink); margin: var(--sp-6) 0 var(--sp-2); }
.accordion { margin: var(--sp-3) 0; }
.accordion-item { border: 1px solid #e3e3e3; border-radius: 8px; margin: 8px 0; background: #fff; overflow: hidden; }
.accordion-title { display: block; position: relative; cursor: pointer; text-decoration: none;
    color: var(--ink); font-weight: 700; padding: 13px 44px 13px 16px; line-height: 1.5; }
.accordion-title span { display: block; }
.accordion-title .toggle { display: none; }   /* ẩn <button><i icon-angle-down> rỗng của Flatsome */
.accordion-title::after {                       /* +/- đỏ như content_studio */
    content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 1.35em; line-height: 1; color: #e2483d; font-weight: 400; }
.accordion-item.is-open .accordion-title { border-bottom: 1px solid #eee; }
.accordion-item.is-open .accordion-title::after { content: "\2013"; }
/* max-height animate tới chiều cao THẬT (accordion.js đo scrollHeight lúc mở) → mượt như Flatsome,
   BỎ cap 1500px cố định (cap lớn làm mở tức thì + đóng đứng-im-rồi-snap = lag).
   .accordion-inner KHÔNG padding — vì border-box + max-height:0 KHÔNG clip được padding (padding luôn
   chiếm chỗ → rỉ nội dung khi đóng). Padding đặt trên ELEMENT CON: content shortcode được renderer bọc
   1 <div>, content nhập WP có <p> — đều là con của .accordion-inner nên nhận padding, text KHÔNG dính mép. */
.accordion-inner { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: #333; }
.accordion-inner > * { margin: 0; padding-left: 16px; padding-right: 16px; }
.accordion-inner > :first-child { padding-top: 12px; }
.accordion-inner > :last-child { padding-bottom: 14px; }
.accordion-item > p { margin: 0; }   /* <p> rỗng do wpautop chèn lạc giữa title/inner (content import WP) → bỏ khoảng dôi */
@media (prefers-reduced-motion: reduce) {
    .accordion-inner { transition: none; }
}

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-8); flex-wrap: wrap; }
.pagination a, .pagination span, .pagination button { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; font-size: var(--fs-base); }
.pagination a:hover, .pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; pointer-events: none; }
.pagination .is-disabled, .pagination button:disabled { color: var(--ink-3); pointer-events: none; opacity: .5; }
.pagination button.is-current:disabled { opacity: 1; color: #fff; }
.pagination .is-dots { border: 0; background: none; pointer-events: none; }
/* Mobile: co ô + gap để worst-case 9 ô (thuật toán 1 đầu/1 cuối) luôn 1 hàng, vừa cả màn 360px */
@media (max-width: 480px) {
    .pagination { gap: 4px; }
    .pagination a, .pagination span, .pagination button { min-width: 32px; height: 32px; padding: 0 6px; font-size: var(--fs-sm); }
}

/* ---------- FILTER BAR CellphoneS (plan 20260722_FilterBar — port UX maithu_search, token cam brand)
   CARD đóng khung kiểu nguyenvu.store: tầng dropdown + kẻ + tầng chips "Đang chọn"; sort tách toolbar. ---------- */
.fbar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--sp-4); }
/* Tầng 0: tiêu đề danh mục gộp vào card (hết 2 card chồng) */
.fbar__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line-2); }
.fbar__head img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 4px; background: #fff; }
.fbar__head h1 { margin: 0; font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: .02em; }
.fbar__bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-4); }
.fbar__barlabel { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; margin-right: var(--sp-2); }
.fbar__barlabel .fbar__ico { color: var(--brand); }
.fbar__allbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--brand); color: var(--brand); background: #fff; border-radius: var(--radius); font-weight: 600; cursor: pointer; font-size: var(--fs-sm); }
.fbar__allbtn:hover { background: var(--brand-soft); }
.fbar__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fbar__count { background: var(--brand); color: #fff; border-radius: var(--radius-pill); font-size: 11px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.fbar__group { position: relative; }
.fbar__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); }
.fbar__toggle:hover, .fbar__toggle.is-open { border-color: var(--brand); color: var(--brand); }
.fbar__caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform .15s; }
.fbar__toggle.is-open .fbar__caret { transform: rotate(180deg); }
.fbar__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .13); padding: var(--sp-4); min-width: 320px; max-width: min(460px, 90vw); }
.fbar__pills { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow: auto; }
.fbar__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.fbar__pill:hover { border-color: var(--brand); }
.fbar__pill.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.fbar__pill.is-zero { opacity: .45; }
.fbar__pillcount { color: var(--ink-3); font-size: 11px; }
.fbar__pill.is-on .fbar__pillcount { color: var(--brand); }
.fbar__panelfoot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.fbar__btn { padding: 8px 16px; border-radius: var(--radius); border: 0; background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; font-size: var(--fs-sm); }
.fbar__btn:hover { background: var(--brand-dark, #d0511f); }
.fbar__btn--ghost { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.fbar__btn--ghost:hover { background: var(--bg-soft); }
/* Toolbar dưới card: tổng SP trái + sort phải */
.fbar__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.fbar__sortbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fbar__sortlabel { color: var(--ink-3); font-size: var(--fs-sm); }
.fbar__sorttabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fbar__sorttab { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.fbar__sorttab.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.fbar__mobilebar { display: none; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.fbar__msort { flex: 1; padding: 9px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.fbar__msort.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.fbar__allbtn--m { flex: 0 0 auto; justify-content: center; }
/* Tầng chips "Đang chọn" — trong card, ngăn bằng kẻ mảnh (kiểu nguyenvu.store) */
.fbar__tagsrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line-2); padding: var(--sp-3) var(--sp-4); }
.fbar__tagslabel { color: var(--ink-3); font-size: var(--fs-sm); }
.fbar__tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; background: var(--brand-soft); border: 1px solid rgba(232, 97, 48, .4); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--brand); cursor: pointer; }
.fbar__tag .x { font-size: 11px; opacity: .75; }
.fbar__tag:hover { border-color: var(--brand); background: #fff; }
.fbar__clearlink { background: none; border: 0; text-decoration: underline; color: var(--ink-3); cursor: pointer; font-size: var(--fs-sm); }
.fbar__clearlink:hover { color: var(--brand); }
.fbar__status { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 14px; color: var(--ink-3); font-size: var(--fs-sm); }
.fbar__status b { color: var(--ink); font-size: var(--fs-base); }
/* Slider giá dual-thumb (2 input range chồng nhau, thumb pointer-events riêng) */
.fbar__slidervals { display: flex; gap: 6px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.fbar__slidervals .sep { color: var(--ink-3); }
.fbar__slidertrack { position: relative; height: 4px; background: var(--line); border-radius: 2px; margin: 16px 9px 10px; }
.fbar__sliderfill { position: absolute; top: 0; height: 100%; background: var(--brand); border-radius: 2px; }
.fbar__range { position: absolute; left: -9px; right: -9px; top: -7px; width: calc(100% + 18px); height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: none; pointer-events: none; }
.fbar__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); pointer-events: auto; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.fbar__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); pointer-events: auto; cursor: grab; }
/* Drawer off-canvas */
.fbar__overlay { position: fixed; inset: 0; background: rgba(15, 23, 32, .5); z-index: 90; }
.fbar__drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: #fff; z-index: 95; transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, .15); }
.fbar__drawer.is-open { transform: translateX(0); }
.fbar__drawerhead { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); font-weight: 700; }
.fbar__drawerclose { border: 0; background: none; font-size: 17px; cursor: pointer; color: var(--ink-3); }
.fbar__drawerbody { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5); }
.fbar__dgroup { margin-bottom: var(--sp-5); }
.fbar__dlabel { font-weight: 700; margin-bottom: var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.fbar__drawerfoot { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.fbar__drawerfoot .fbar__btn { flex: 1; text-align: center; }
@media (max-width: 860px) {
    .fbar__bar, .fbar__toolbar .fbar__sortbar { display: none; }
    .fbar__mobilebar { display: flex; }
}

/* ============================================================================
   PRODUCT DETAIL (PDP)
   ============================================================================ */
/* .pdp + .pdp-tabs GỘP 1 CARD (Triều 23/07): .pdp = tầng trên (bo góc trên, hở đáy), .pdp-tabs nối
   liền bên dưới (bo góc dưới) — thanh tab nền xám nhạt kẹp 2 kẻ mảnh làm dải NGĂN CÁCH summary/content. */
.pdp { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: var(--sp-8); background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp-8); }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5); } }

.gallery__main { border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1/1; position: relative; background: #fff; }
/* CROSSFADE 2 lớp: lớp is-front hiện (opacity 1, scale 1), lớp kia tan (opacity 0, scale 1.04) —
   chuyển đồng thời = dissolve kiểu hero; load xong mới đảo front nên không nháy trắng. */
.gallery__main img.glayer {
    position: absolute; inset: var(--sp-5);
    width: calc(100% - 2 * var(--sp-5)); height: calc(100% - 2 * var(--sp-5));
    object-fit: contain; mix-blend-mode: multiply;
    opacity: 0; transform: scale(1.04);
    transition: opacity .45s ease, transform .45s ease;
}
.gallery__main img.glayer.is-front { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .gallery__main img.glayer { transition: none; } }
.gallery__main { cursor: zoom-in; }
/* Shield chống lưu ảnh: gif trong suốt phủ TRÊN ảnh thật — right-click/long-press "lưu ảnh" dính ảnh trắng */
.gallery__main .img-shield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 1; transform: none; }

/* ---------- CHỐNG TẢI ẢNH (gây khó — không kỳ vọng triệt để; GIỮ <img> thật cho SEO) ----------
   Công tắc: class img-protect trên <body> (Cấu hình ▸ Bảo vệ ảnh: OFF/GUEST/ALL — layout quyết). */
body.img-protect .gallery__main img, body.img-protect .gallery__thumbs img, body.img-protect .mtlb img,
body.img-protect .pdp-content img, body.img-protect .prose img, body.img-protect .archive-desc img {
    -webkit-user-drag: none; user-drag: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;   /* iOS: tắt menu long-press "Lưu ảnh" */
}
/* Shield gif trong suốt chỉ hoạt động khi bật bảo vệ */
body:not(.img-protect) .img-shield, body:not(.img-protect) .mtlb__shield { display: none; }
.pdp-content img, .prose img, .archive-desc img { cursor: zoom-in; }

/* ---------- GALLERY VIEWER (lightbox .mtlb — mở toàn màn hình, thuần Alpine) ---------- */
.mtlb { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 15, 20, .93); display: flex; align-items: center; justify-content: center; }
.mtlb__stage { position: relative; margin: 0; display: flex; align-items: center; justify-content: center; }
.mtlb__stage img:not(.mtlb__shield) { max-width: 94vw; max-height: 90vh; object-fit: contain; display: block; border-radius: var(--radius); }
.mtlb__shield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.mtlb__close { position: fixed; top: 18px; right: 22px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; cursor: pointer; }
.mtlb__close:hover { background: var(--brand); }
.mtlb__nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.mtlb__nav:hover { background: var(--brand); }
.mtlb__prev { left: 20px; }
.mtlb__next { right: 20px; }
.mtlb__count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; color: #fff; font-size: var(--fs-sm); background: rgba(255, 255, 255, .12); padding: 4px 14px; border-radius: var(--radius-pill); }
/* Spinner khi ảnh to đang tải (Triều bắt: lần đầu mở lag không phản hồi) */
.mtlb__spin { position: fixed; top: 50%; left: 50%; margin: -22px 0 0 -22px; z-index: 4; width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--brand); border-radius: 50%; animation: mtlbSpin .8s linear infinite; pointer-events: none; }
@keyframes mtlbSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    .mtlb__nav { width: 40px; height: 40px; font-size: 24px; }
    .mtlb__prev { left: 8px; }
    .mtlb__next { right: 8px; }
}
.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.gallery__thumbs img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; cursor: pointer; background: #fff; }
.gallery__thumbs img.is-active, .gallery__thumbs img:hover { border-color: var(--brand); }

.pdp__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-2); }
.pdp__brand a { color: var(--blue); font-weight: 600; }
.pdp h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
/* Dưới H1 CHỈ còn sao đánh giá (Triều 24/07) — hàng meta cũ 4 cụm khác cấp đã tách đi 3 chỗ kiểu Woo */
.pdp__meta { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.pdp__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.pdp__rating .cnt { color: var(--ink-3); font-weight: 400; }
.pdp__rating:hover { color: var(--brand); }
.pdp__rating--empty { color: var(--ink-3); font-weight: 400; }
/* Link "Viết đánh giá" luôn hiện (cả khi đã có review) — cuộn thẳng tới FORM #viet-danh-gia */
.pdp__write-review { color: var(--blue); font-size: var(--fs-sm); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.pdp__write-review::before { content: "·"; margin-right: var(--sp-3); color: var(--ink-3); }
.pdp__write-review:hover { text-decoration: underline; }
.rv-form { scroll-margin-top: calc(var(--sticky-offset, 150px) + 20px); }   /* né header sticky, dùng chung var đo động */
.pdp__price-box { background: var(--bg-soft); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pdp__price .now { color: var(--hotline); font-weight: 700; font-size: var(--fs-3xl); }
.pdp__price .was { color: var(--ink-3); text-decoration: line-through; font-size: var(--fs-lg); }
.pdp__price .contact { color: var(--blue); font-weight: 700; font-size: var(--fs-2xl); }
.pdp__short { color: var(--ink-2); margin: var(--sp-4) 0; }
.pdp__short ul { list-style: disc; padding-left: 20px; }
.pdp__cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.pdp__cta .btn { padding: 14px 28px; font-size: var(--fs-md); }
/* Product meta kiểu WooCommerce (.product_meta): thông tin tra cứu, mờ, dưới CTA — ngăn bằng dấu chấm giữa */
.pdp__product-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }
.pdp__product-meta > span + span::before { content: "·"; margin-right: var(--sp-3); color: var(--line-strong, #cbd5e1); }
.pdp__product-meta a { color: var(--blue); font-weight: 600; }
.pdp__product-meta:empty { display: none; }
/* CHỐNG TRÀN tên danh mục dài: ô được phép co + tự ngắt trong từ nếu cần (chỉ 1 danh mục chính,
   nhưng tên vẫn có thể dài kiểu "DAC - Đầu giải mã") */
.pdp__product-meta > span { min-width: 0; }
.pm-cats { overflow-wrap: anywhere; }
/* Mobile: MỖI dòng meta (Thương hiệu/SKU/Danh mục) 1 hàng riêng + BỎ dấu "·" — để chung hàng thì
   lúc wrap dấu "·" bị treo lơ lửng đầu dòng làm SKU thụt lề (Triều 26/07). */
@media (max-width: 640px) {
    .pdp__product-meta > span { flex-basis: 100%; }
    .pdp__product-meta > span + span::before { content: none; margin-right: 0; }
}
/* Hàng nút CTA PDP (bám dbacoustic.pro): 2 tầng chữ — label đậm + sublabel nhỏ; 1 nút thì tự full hàng */
.pdp__cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 560px; }
.cta-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 16px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; text-align: center; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cta-btn:hover:not(:disabled) { transform: translateY(-1px); }
.cta-btn__main { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-md); letter-spacing: .02em; }
.cta-btn__main svg { width: 18px; height: 18px; flex: none; }
.cta-btn__sub { font-size: var(--fs-xs); opacity: .85; font-weight: 500; }
/* MUA NGAY = primary: gradient cam + bóng nhẹ */
.cta-btn--buy { color: #fff; background: linear-gradient(180deg, #f0793f, var(--brand)); box-shadow: 0 3px 10px rgba(232, 97, 48, .32); }
.cta-btn--buy:hover:not(:disabled) { background: linear-gradient(180deg, #e86a30, #d4551f); box-shadow: 0 5px 14px rgba(232, 97, 48, .4); }
.cta-btn--buy:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* CHAT ZALO = secondary OUTLINE: trắng + viền/chữ xanh Zalo — hết 2 khối đặc cãi nhau */
.cta-btn--zalo { color: #0068ff; background: #fff; border-color: #0068ff; }
.cta-btn--zalo .cta-btn__sub { opacity: .7; }
.cta-btn--zalo:hover { background: #eaf3ff; color: #0053cc; box-shadow: 0 3px 10px rgba(0, 104, 255, .18); }
@media (max-width: 480px) { .cta-btn__main { font-size: var(--fs-sm); } .cta-btn { padding: 12px 10px; } .cta-btn__sub { display: none; } }

/* Trạng thái kho = PILL tươi (Triều 23/07): nền tint + viền + DOT thở nhịp khi còn hàng */
.stock-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); padding: 4px 12px; border-radius: var(--radius-pill); }
.stock-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stock-pill.in { color: #178a49; background: #e6f7ee; border: 1px solid #b7e6cb; }
.stock-pill.in::before { background: #22c55e; animation: stockPulse 1.8s ease-out infinite; }
/* Hết hàng nói thẳng "Hết hàng" (Triều) — tông đỏ nhạt rõ ràng, không vòng vo */
.stock-pill.out { color: #b91c1c; background: #fdecec; border: 1px solid #f5c6c6; }
.stock-pill.out::before { background: #ef4444; }
@keyframes stockPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
    70%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .stock-pill.in::before { animation: none; } }
/* Pill nằm trong khối giá (Triều 24/07): desktop đứng cạnh giá, mobile tự xuống dòng riêng nhờ flex-wrap
   → bỏ hack .pdp__meta-break cũ (không còn hàng meta 4 cụm để ép xuống dòng nữa) */
@media (max-width: 640px) {
    .pdp__price-box { align-items: flex-start; }
    .pdp__price-box .stock-pill { order: 2; }
}

/* Bảng biến thể */
.variant-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); font-size: var(--fs-sm); }
.variant-table th, .variant-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.variant-table th { background: var(--bg-soft); color: var(--ink); }

/* Tabs mô tả / thông số */
/* Cụm tab PDP = CARD trắng (Triều duyệt phương án A 23/07 — hết "trần trụi" trên nền xám;
   nav là tầng đầu card kẻ mảnh, khuôn .fbar__head; readmore fade tự dò nền → fade TRẮNG khớp card) */
/* Tab = SEGMENTED CONTROL (biến thể 2 sau khi Triều chê band xám "thắt lưng"): cụm tab nhốt trong
   viên thuốc xám nhạt, tab active nổi TRẮNG + bóng nhẹ + chữ cam; ngăn cách = 1 kẻ card duy nhất. */
.pdp-tabs { margin-top: 0; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.pdp-tabs__nav { display: inline-flex; gap: 4px; margin: var(--sp-4) var(--sp-6) 0; padding: 4px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius-pill); flex-wrap: wrap; }
.pdp-tabs__nav button { padding: 7px 16px; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.pdp-tabs__nav button.is-active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pdp-tabs > div:not(.pdp-tabs__nav) { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
@media (max-width: 640px) {
    .pdp-tabs > div:not(.pdp-tabs__nav) { padding: var(--sp-4); }
    .pdp-tabs__nav { margin: var(--sp-4) var(--sp-4) 0; }
}

/* Section Đánh giá / Hỏi đáp — CARD THẬT dưới chân PDP (tab trên chỉ cuộn tới — Triều 23/07,
   kiểu dientulinhanh: không ẩn nội dung). scroll-margin chừa header sticky khi cuộn/anchor. */
/* scroll-margin = cụm sticky đo ĐỘNG (--sticky-offset do layout set runtime) + ~20px thở — không hardcode */
.pdp-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6) var(--sp-6); margin-top: var(--sp-8); scroll-margin-top: calc(var(--sticky-offset, 150px) + 20px); }
.pdp-section__title { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
@media (max-width: 640px) { .pdp-section { padding: var(--sp-4); } }
.pdp-content { color: var(--ink-2); line-height: 1.8; }
.pdp-content img { border-radius: var(--radius); margin: var(--sp-4) auto; }   /* ngang auto = căn giữa (nút readmore mới cân) */
.pdp-content :is(h2,h3,h4) { color: var(--ink); margin-top: var(--sp-6); }
.pdp-content table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.pdp-content td, .pdp-content th { border: 1px solid var(--line); padding: 8px 12px; }

/* Bảng thông số kỹ thuật */
.spec-group { margin-bottom: var(--sp-6); }
.spec-group h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); padding-left: 10px; border-left: 4px solid var(--brand); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table tr:nth-child(even) { background: var(--bg-soft); }
.spec-table th { text-align: left; width: 38%; color: var(--ink); font-weight: 600; padding: 9px 12px; border: 1px solid var(--line); vertical-align: top; }
.spec-table td { padding: 9px 12px; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 1px; color: #f5a623; }
.stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.stars .off { color: #d9dfe6; }
.stars--lg svg { width: 22px; height: 22px; }

/* ============================================================================
   REVIEW / QA widget
   ============================================================================ */
.rv-summary { display: grid; grid-template-columns: 200px 1fr auto; gap: var(--sp-8); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); margin-bottom: var(--sp-5); align-items: center; }
@media (max-width: 680px) { .rv-summary { grid-template-columns: 1fr; gap: var(--sp-4); } }
.rv-score { text-align: center; }
.rv-score .num { font-size: 48px; font-weight: 700; color: var(--ink); line-height: 1; }
.rv-score .cnt { color: var(--ink-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.rv-bars { display: flex; flex-direction: column; gap: 6px; }
.rv-bar { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.rv-bar .track { flex: 1; height: 8px; background: var(--line-2); border-radius: var(--radius-pill); overflow: hidden; }
.rv-bar .fill { height: 100%; background: #f5a623; }
.rv-bar .lbl { width: 34px; }
.rv-bar .n { width: 30px; text-align: right; color: var(--ink-3); }

.rv-item, .qa-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.rv-item__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.rv-item__head .name { font-weight: 700; color: var(--ink); }
.rv-item__head .date { color: var(--ink-3); font-size: var(--fs-xs); margin-left: auto; }
.rv-verified { color: #1f9d55; font-size: var(--fs-xs); font-weight: 600; }
.qa-q { display: flex; gap: var(--sp-2); }
.qa-q .badge-q { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); }
.qa-a { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding-left: var(--sp-4); }
.qa-a .badge-a { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); }

/* Form đánh giá */
.rv-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); margin-top: var(--sp-4); }
.rv-form .field { margin-bottom: var(--sp-4); }
.rv-form label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.rv-form input, .rv-form textarea, .rv-form select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: var(--fs-base); }
.rv-form textarea { min-height: 100px; resize: vertical; }
.rv-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .rv-form .row2 { grid-template-columns: 1fr; } }
.rv-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { display: none; }
.star-input label { cursor: pointer; color: #d9dfe6; margin: 0; }
.star-input label svg { width: 28px; height: 28px; fill: currentColor; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f5a623; }
.rv-alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.rv-alert.ok { background: #e6f6ec; color: #1f7a44; }
.rv-alert.err { background: #fdecec; color: #c0392b; }

/* ===== Đánh giá: nút CTA "ĐÁNH GIÁ NGAY" + filter chips + ảnh review (bám ảnh mẫu audioplus) ===== */
.rv-summary__cta { display: flex; align-items: center; justify-content: center; }
.btn-rate { background: var(--blue); color: #fff; font-weight: 700; font-size: var(--fs-base); border: 0;
    border-radius: var(--radius-sm); padding: 13px 26px; cursor: pointer; white-space: nowrap; letter-spacing: .02em;
    font-family: inherit; transition: background .15s; }
.btn-rate:hover { background: var(--blue-dark); color: #fff; }
@media (max-width: 680px) { .rv-summary__cta { justify-content: stretch; } .btn-rate { width: 100%; } }

.rv-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.rv-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 16px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; transition: all .13s; }
.rv-chip:hover { border-color: var(--blue); color: var(--blue); }
.rv-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

.rv-imgs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rv-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: zoom-in; background: #fff; }

/* ===== MODAL đánh giá (bỏ form inline → mở từ nút "ĐÁNH GIÁ NGAY" — bám ảnh mẫu 2) ===== */
.rv-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.rv-modal__backdrop { position: fixed; inset: 0; background: rgba(20,28,38,.6); }
.rv-modal__box { position: relative; z-index: 1; width: 100%; max-width: 640px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.rv-modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #1f2b38; color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rv-modal__close:hover { background: var(--brand); }
.rv-modal__title { font-size: var(--fs-lg); color: var(--ink); margin: 0 44px var(--sp-4) 0; line-height: 1.35; }
.rv-modal__box .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.rv-modal__box .field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.rv-modal__box .field input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: var(--fs-base); }
@media (max-width: 560px) { .rv-modal__box .row2 { grid-template-columns: 1fr; } }

.rv-modal__editor { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.rv-modal__editor textarea { display: block; width: 100%; border: 0; outline: 0; resize: vertical; min-height: 96px; padding: 12px 14px; font-family: inherit; font-size: var(--fs-base); color: var(--ink); }
.rv-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.rv-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.rv-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rv-charcount { color: var(--ink-3); font-size: var(--fs-sm); }
.rv-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 10px 12px; border-top: 1px solid var(--line); }
.rv-thumb { position: relative; width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-thumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rv-thumb--loading { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-weight: 700; background: var(--bg-soft); }

.rv-stars-pick { margin: var(--sp-5) 0; }
.rv-stars-pick__q { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.rv-stars-pick__q em { color: var(--ink-3); font-weight: 400; font-style: normal; }
.rv-stars-pick__row { display: flex; gap: var(--sp-2); }
.rv-starbtn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: border-color .12s; }
.rv-starbtn svg { width: 30px; height: 30px; fill: #d9dfe6; transition: fill .12s; }
.rv-starbtn span { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; line-height: 1.2; }
.rv-starbtn:hover { border-color: #f5a623; }
.rv-starbtn.on svg { fill: #f5a623; }
.rv-starbtn.on span { color: var(--ink); font-weight: 600; }

.rv-turnstile { margin: var(--sp-4) 0; }
.btn-rate--submit { width: 100%; margin-top: var(--sp-4); }
.btn-rate--submit:disabled { background: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
@media (max-width: 560px) { .rv-modal__box { padding: var(--sp-5) var(--sp-4) var(--sp-6); } .rv-starbtn svg { width: 24px; height: 24px; } .rv-starbtn span { font-size: 10px; } }

/* ===== Phản hồi người bán (1 cấp dưới review/hỏi đáp) + nút Trả lời inline (admin) + dòng đồng ý ===== */
.cmt-answer { margin: var(--sp-3) 0 0 var(--sp-5); padding: 10px 14px; background: var(--bg-soft); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); }
.cmt-answer__badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); padding: 1px 8px; border-radius: var(--radius-pill); margin-bottom: 4px; }
.cmt-answer > div { color: var(--ink-2); white-space: pre-line; }

.cmt-reply { margin-top: var(--sp-2); }
.cmt-reply__btn { background: none; border: 0; color: var(--blue); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; padding: 2px 0; }
.cmt-reply__btn:hover { text-decoration: underline; }
.cmt-reply form { margin-top: var(--sp-2); }
.cmt-reply textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: var(--fs-sm); resize: vertical; }
.cmt-reply__actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); }
.cmt-reply__actions .btn-rate { padding: 8px 18px; font-size: var(--fs-sm); }
.cmt-reply__cancel { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: var(--fs-sm); }

.rv-consent { font-size: var(--fs-xs); color: var(--ink-3); margin: var(--sp-3) 0 var(--sp-2); line-height: 1.5; }

/* Related */
.related { margin-top: var(--sp-10); }

/* ============================================================================
   CONTENT (tin tức / dự án): archive + single
   ============================================================================ */
.page-head { margin: var(--sp-6) 0 var(--sp-8); }
.page-head h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.page-head .sub { color: var(--ink-3); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-card__cat { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--sp-2); }
.post-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.4; margin: 0 0 var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card:hover .post-card__title { color: var(--brand); }
.post-card__excerpt { color: var(--ink-2); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__date { margin-top: auto; padding-top: var(--sp-3); color: var(--ink-3); font-size: var(--fs-xs); }

/* Single */
.article { max-width: 820px; margin: 0 auto; }
.article__hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.article__hero img { width: 100%; object-fit: cover; max-height: 440px; }
.article h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.article__meta { display: flex; gap: var(--sp-4); color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.article__cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-6); }
.article__cats a { padding: 5px 12px; background: var(--bg-soft); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.article__cats a:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* Prose (thân bài render) */
.prose { color: var(--ink-2); line-height: 1.8; font-size: var(--fs-md); }
.prose > *:first-child { margin-top: 0; }
.prose :is(h2,h3,h4) { color: var(--ink); margin: var(--sp-8) 0 var(--sp-3); }
.prose h2 { font-size: var(--fs-xl); } .prose h3 { font-size: var(--fs-lg); }
.prose p { margin: 0 0 var(--sp-4); }
.prose img { border-radius: var(--radius); margin: var(--sp-5) 0; }
.prose a { color: var(--blue); font-weight: 500; }
.prose a:hover { color: var(--brand); }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 var(--sp-4); }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--sp-2); }
.prose blockquote { border-left: 4px solid var(--brand); padding: var(--sp-2) var(--sp-5); margin: var(--sp-5) 0; background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 12px; }
.prose th { background: var(--bg-soft); }

/* Bảng trong nội dung (Triều 24/07): renderer bọc <table> trong .ct-table-scroll → mobile CUỘN NGANG thay vì
   bóp bể chữ; màu brand mặc định (header th cam, zebra dòng, viền đẹp). Áp .pdp-content/.prose/.archive-desc. */
.ct-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-5) 0; max-width: 100%; }
.ct-table-scroll > table { margin: 0; }   /* margin đã ở wrapper */
:is(.pdp-content, .prose, .archive-desc) table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
:is(.pdp-content, .prose, .archive-desc) th,
:is(.pdp-content, .prose, .archive-desc) td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
:is(.pdp-content, .prose, .archive-desc) th { background: var(--brand); color: #fff; font-weight: 600; border-color: var(--brand); }
:is(.pdp-content, .prose, .archive-desc) tbody tr:nth-child(even) td { background: var(--bg-soft); }
:is(.pdp-content, .prose, .archive-desc) tbody tr:hover td { background: var(--brand-soft); }

/* ---------- Shortcode content bám Flatsome (Triều 24/07): grid / caption / responsive-table ---------- */
/* Grid 12 cột: gutter bằng negative-margin; col basis theo --span/12 (mobile theo --span-sm) */
.ct-row { display: flex; flex-wrap: wrap; margin: var(--sp-4) -8px; }
.ct-col { padding: 0 8px; min-width: 0; flex: 0 0 calc(var(--span, 12) / 12 * 100%); max-width: calc(var(--span, 12) / 12 * 100%); }
.ct-section { margin: var(--sp-5) 0; }
@media (max-width: 640px) {
    .ct-col { flex-basis: calc(var(--span-sm, 12) / 12 * 100%); max-width: calc(var(--span-sm, 12) / 12 * 100%); }
}
/* Caption → figure/figcaption (SEO) */
.ct-figure { margin: var(--sp-5) 0; }
.ct-figure.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.ct-figure.alignleft { float: left; margin: 0 var(--sp-4) var(--sp-3) 0; }
.ct-figure.alignright { float: right; margin: 0 0 var(--sp-3) var(--sp-4); }
.ct-figure img { max-width: 100%; height: auto; border-radius: var(--radius); }
.ct-caption { margin-top: var(--sp-2); font-size: var(--fs-sm); font-style: italic; color: var(--ink-3); }
/* Stack-table [stack_table] (bảng thông số 2 cột): desktop bảng thường; mobile = BỎ header, MỖI HÀNG xếp DỌC:
   cột 1 (nhãn, đậm) 1 dòng — cột 2 (giá trị) dòng dưới. CẢ BẢNG đóng khung 1 card (viền + bo góc + nền)
   để không lẫn vào nội dung khác; hàng ngăn nhau bằng gạch, hàng cuối bỏ gạch. Key-value list, chỉ 2 cột;
   bảng nhiều cột dùng <table> thường (cuộn ngang). (Triều 25/07) */
@media (max-width: 640px) {
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 0 12px; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] thead { display: none; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] tbody { display: block; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] tr { display: block; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] tr:last-child { border-bottom: 0; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] td { display: block; border: 0; padding: 0; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] td:first-child { font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] td::before { content: none; }
}
/* Desktop (≥641px): stack_table nên kèm <thead> (header cam hiện desktop, mobile CSS trên ẩn thead).
   Ngoài ra cho CỘT NHÃN (cột 1) 1 dải nền xám nhạt cố định ~34%, đậm — như row-header dọc, để bảng
   key-value/thông số nổi bật (header cam + dải nhãn xám + cột giá trị zebra = spec sheet). (Triều 25/07) */
@media (min-width: 641px) {
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] td:first-child {
        width: 34%; font-weight: 600; color: var(--ink); background: var(--bg-soft);
        border-color: var(--line); vertical-align: top;
    }
    /* Hover: cột 1 có nền xám riêng (specificity cao hơn rule hover chung) → phải override lại
       để CẢ hàng cùng sáng brand-soft, không lệch mỗi cột 2. */
    :is(.pdp-content, .prose, .archive-desc) table[data-rtable] tr:hover td:first-child {
        background: var(--brand-soft);
    }
}

/* Album dự án */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-6) 0; }
@media (max-width: 600px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
.album-grid a { display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.album-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.album-grid a:hover img { transform: scale(1.05); }
.completion { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand-dark); padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); }

/* ---------- Comment widget ---------- */
.comments { max-width: 820px; margin: var(--sp-10) auto 0; }
.comments h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }
.cm-item { border-bottom: 1px solid var(--line-2); padding: var(--sp-4) 0; }
.cm-item__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 4px; }
.cm-item__head .name { font-weight: 700; color: var(--ink); }
.cm-item__head .date { color: var(--ink-3); font-size: var(--fs-xs); margin-left: auto; }
.cm-reply { margin-top: var(--sp-3); margin-left: var(--sp-6); padding-left: var(--sp-4); border-left: 2px solid var(--line); }
.cm-reply .name { font-weight: 700; color: var(--blue-dark); }

/* ============================================================================
   TUYỂN DỤNG
   ============================================================================ */
.job-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 800px) { .job-layout { grid-template-columns: 1fr; } }
.job-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); position: sticky; top: 80px; }
.job-filters h4 { font-size: var(--fs-sm); text-transform: uppercase; color: var(--ink-3); margin: var(--sp-4) 0 var(--sp-2); }
.job-filters h4:first-child { margin-top: 0; }
.job-filters a { display: block; padding: 6px 0; color: var(--ink-2); font-size: var(--fs-sm); }
.job-filters a.is-active { color: var(--brand); font-weight: 700; }
.job-filters a:hover { color: var(--brand); }

.job-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-4); transition: box-shadow .15s, border-color .15s; }
.job-card:hover { box-shadow: var(--shadow); border-color: #dfe5ec; }
.job-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.job-card h3 a:hover { color: var(--brand); }
.job-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.job-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--bg-soft); color: var(--ink-2); }
.job-tag.salary { background: #e6f6ec; color: #1f7a44; }
.job-card__excerpt { color: var(--ink-2); font-size: var(--fs-sm); }

.job-detail { max-width: 820px; margin: 0 auto; }
.job-detail__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); margin-bottom: var(--sp-6); }
.job-detail__facts { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin: var(--sp-4) 0; }
.job-fact { font-size: var(--fs-sm); } .job-fact b { display: block; color: var(--ink); }
.job-fact span { color: var(--ink-3); font-size: var(--fs-xs); }

/* ============================================================================
   AUTOCOMPLETE (quick-search header)
   ============================================================================ */
.ac-wrap { position: relative; flex: 1; }
.ac-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 70; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.ac-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-bottom: 1px solid var(--line-2); }
.ac-item:hover, .ac-item.is-active { background: var(--brand-soft); }
.ac-item:last-child { border-bottom: 0; }
.ac-item img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; flex: 0 0 auto; }
.ac-item__body { min-width: 0; flex: 1; }
.ac-item__title { color: var(--ink); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item__meta { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: var(--sp-2); align-items: center; }
.ac-item__meta .price { color: var(--hotline); font-weight: 700; }
.ac-type { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink-3); font-weight: 700; }
.ac-more { display: block; text-align: center; padding: 10px; font-weight: 600; color: var(--brand); background: var(--bg-soft); }
.ac-more:hover { background: var(--brand-soft); }
.ac-empty { padding: var(--sp-4); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

/* ============================================================================
   TRANG KẾT QUẢ TÌM KIẾM
   ============================================================================ */
.search-list { max-width: 860px; margin: 0 auto; }
.search-hit { display: flex; align-items: center; gap: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.search-hit:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.search-hit img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; background: #fff; flex: 0 0 auto; }
.search-hit__body { flex: 1; min-width: 0; }
.search-hit__title { color: var(--ink); font-weight: 600; }
.search-hit:hover .search-hit__title { color: var(--brand); }
.search-hit__meta { display: flex; gap: var(--sp-3); align-items: center; margin-top: 4px; font-size: var(--fs-sm); }
.search-hit__meta .price { color: var(--hotline); font-weight: 700; }

/* ---------- Brand index ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
.brand-tile { display: flex; align-items: center; justify-content: center; height: 96px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); color: var(--ink); font-weight: 700; text-align: center; }
.brand-tile:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-sm); }
.brand-tile img { max-height: 56px; max-width: 100%; object-fit: contain; }

/* ---------- 404 ---------- */
.err-page { text-align: center; padding: var(--sp-16) var(--sp-4); }
.err-page .code { font-size: 96px; font-weight: 700; color: var(--brand); line-height: 1; }
.err-page h1 { margin: var(--sp-4) 0; }

/* ---------- Utilities ---------- */
.svg-ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-ic--sm { width: 16px; height: 16px; }
.only-mobile { display: none; }
@media (max-width: 860px) { .only-mobile { display: initial; } .hide-mobile { display: none; } }

/* ============================================================================
   GIỎ HÀNG (plan 20260720_GioHang) — Mua ngay + picker biến thể + toast + trang giỏ
   ============================================================================ */
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { background: var(--brand); color: var(--white); }
.btn--buy { font-size: var(--fs-md); font-weight: 700; padding: 13px 30px; text-transform: uppercase; letter-spacing: .3px; }
.btn--buy:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; box-shadow: none; }
.btn--buy:disabled:hover { background: var(--line); }

.variant-picker { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.vp-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.vp-label { min-width: 90px; font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.vp-select { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 190px; font-size: var(--fs-sm); background: #fff; }
.vp-btns, .vp-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vp-btn { padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); transition: border-color .12s, background .12s, color .12s; }
.vp-btn:hover { border-color: var(--brand); color: var(--brand); }
.vp-btn.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.vp-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.vp-swatch:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
.vp-swatch.is-active { box-shadow: 0 0 0 2px var(--brand); }

.mt-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; max-width: 90vw; text-align: center; }
.mt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mt-toast--err { background: #b91c1c; }

/* ---------- Trang /gio-hang/ ---------- */
.cart-page { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-6); align-items: start; margin: var(--sp-6) 0 var(--sp-10); }
@media (max-width: 800px) { .cart-page { grid-template-columns: 1fr; } }
.cart-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--line-2); }
.cart-row:last-child { border-bottom: 0; }
.cart-row__img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; flex: 0 0 auto; padding: 4px; }
.cart-row__body { flex: 1; min-width: 0; }
.cart-row__name { color: var(--ink); font-weight: 600; }
.cart-row__name:hover { color: var(--brand); }
.cart-row__var { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.cart-row__price { color: var(--hotline); font-weight: 700; margin-top: 2px; }
.cart-row__price .was { color: var(--ink-3); text-decoration: line-through; font-weight: 400; font-size: var(--fs-xs); margin-left: 6px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cart-qty button { width: 30px; height: 32px; border: 0; background: var(--bg-soft); cursor: pointer; font-size: 16px; color: var(--ink-2); }
.cart-qty button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.cart-qty input { width: 44px; height: 32px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-weight: 600; }
.cart-row__total { width: 130px; text-align: right; font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.cart-row__rm { flex: 0 0 auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 6px; }
.cart-row__rm:hover { color: #dc3545; }
.cart-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); position: sticky; top: 80px; }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: var(--sp-3); }
.cart-summary__row.total { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.cart-summary__row.total .val { color: var(--hotline); }
.cart-summary__note { color: var(--ink-3); font-size: var(--fs-xs); margin: var(--sp-3) 0; }
.cart-empty { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--sp-12); text-align: center; color: var(--ink-3); }
/* Mobile: reflow dòng giỏ (ảnh trái span 2 hàng; tên+giá trên · qty+thành-tiền dưới; xoá góc phải) */
@media (max-width: 600px) {
    .cart-row {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-areas: "img body rm" "img qty total";
        align-items: center;
        gap: 6px var(--sp-3);
        padding: var(--sp-3);
    }
    .cart-row__img { grid-area: img; align-self: start; width: 60px; height: 60px; }
    .cart-row__body { grid-area: body; }
    .cart-row__rm { grid-area: rm; justify-self: end; align-self: start; }
    .cart-qty { grid-area: qty; justify-self: start; margin-top: 4px; }
    .cart-row__total { grid-area: total; width: auto; justify-self: end; }
    .cart-summary { position: static; }
}

/* ---------- Trang /thanh-toan/ (checkout form) ---------- */
.checkout { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-10); }
@media (max-width: 820px) { .checkout { grid-template-columns: 1fr; } }
.co-main { display: flex; flex-direction: column; gap: var(--sp-4); }
.co-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.co-box h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.co-field { margin-bottom: var(--sp-3); }
.co-field:last-child { margin-bottom: 0; }
.co-field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: var(--fs-sm); }
.co-field input, .co-field select, .co-field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: inherit; font-size: var(--fs-base); background: #fff; }
.co-field textarea { resize: vertical; }
.co-field select:disabled { background: var(--bg-soft); color: var(--ink-3); }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.co-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .co-row2, .co-row3 { grid-template-columns: 1fr; } }
.co-opt { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); cursor: pointer; }
.co-opt:hover { border-color: var(--brand); }
.co-opt input { accent-color: var(--brand); width: 18px; height: 18px; flex: 0 0 auto; }
.co-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.co-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); position: sticky; top: 80px; }
.co-summary h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.co-items { display: flex; flex-direction: column; gap: 8px; }
.co-item { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); }
.co-item__name { flex: 1; min-width: 0; color: var(--ink); }
.co-item__q { color: var(--ink-3); }
.co-item__t { font-weight: 600; white-space: nowrap; }
.co-alert.err { background: #fdecec; color: #c0392b; border: 1px solid #f5c6cb; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
@media (max-width: 820px) { .co-summary { position: static; } }

/* ---------- Trang cảm ơn ---------- */
.co-done { max-width: 680px; margin: 0 auto; text-align: center; padding: var(--sp-6) 0 var(--sp-12); }
.co-done__badge { width: 72px; height: 72px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 40px; line-height: 72px; margin: 0 auto var(--sp-4); }
.co-done h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.co-done__code { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.co-done__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); text-align: left; margin-top: var(--sp-5); }
.co-bank { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.co-bank h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.co-bank__grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 560px) { .co-bank__grid { grid-template-columns: 1fr; } }
.co-bank__qr { width: 200px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.co-bank__info { font-size: var(--fs-sm); line-height: 2; color: var(--ink-2); }

/* ===== Thanh liên hệ nổi (Contact Bar — port MT Contact Bar dbacoustic.pro, plan 20260726) =====
   Desktop ≥768: cột DỌC fixed mép phải giữa. Mobile <768: thanh NGANG fixed đáy (bottom-nav).
   Zalo/Messenger = logo brand giữ màu; Gọi/Showroom = icon line theo màu kênh (currentColor). */
#mt-contact-bar { z-index: 900; box-sizing: border-box; }
#mt-contact-bar, #mt-contact-bar * { box-sizing: border-box; }
.mtcb-icon { text-decoration: none; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.mtcb-ico { display: inline-flex; line-height: 0; }
.mtcb-ico svg, .mtcb-ico img { width: 30px; height: 30px; object-fit: contain; display: block; }
.mtcb-text { font-weight: 600; white-space: nowrap; font-size: 12px; }
/* màu đặc trưng từng kênh (icon line phone/map ăn currentColor; text mọi kênh ăn màu này) */
.mtcb-phone { color: #1f9d4d; }
.mtcb-zalo { color: #0068ff; }
.mtcb-messenger { color: #0084ff; }
.mtcb-map { color: #ea4335; }

/* Desktop ≥768: cột dọc mép phải giữa, card bo góc trái, hover trượt ra */
@media (min-width: 768px) {
    #mt-contact-bar { position: fixed; top: 50%; right: 0; transform: translateY(-50%);
        display: flex; flex-direction: column; align-items: flex-end; }
    .mtcb-icon { width: 82px; padding: 10px 6px; margin-bottom: 8px; border-radius: 10px 0 0 10px;
        background: #fff; box-shadow: -2px 2px 12px rgba(0, 0, 0, .12); }
    .mtcb-icon:hover { transform: translateX(-6px); box-shadow: -4px 4px 16px rgba(0, 0, 0, .18); }
    #mt-contact-bar.mtcb--dark .mtcb-icon { background: #212529; box-shadow: -2px 2px 12px rgba(0, 0, 0, .35); }
    #mt-contact-bar.mtcb--dark .mtcb-phone { color: #4ade80; }
    #mt-contact-bar.mtcb--dark .mtcb-map { color: #f87171; }
}

/* Mobile <768: thanh ngang cố định đáy, 4 icon chia đều; spacer chừa chỗ khỏi che cuối trang */
@media (max-width: 767px) {
    #mt-contact-bar { position: fixed; left: 0; bottom: 0; width: 100%; display: flex;
        justify-content: space-around; align-items: center; padding: 6px 0; background: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .12); }
    .mtcb-icon { flex: 1; padding: 4px 0; }
    .mtcb-icon:active { transform: translateY(-2px); }
    .mtcb-text { font-size: 11px; }
    /* chừa chỗ đáy để bar không che cuối trang + đẩy nút "lên đầu trang" lên trên bar */
    body.has-contactbar { padding-bottom: 66px; }
    body.has-contactbar .to-top { bottom: 76px; }
    #mt-contact-bar.mtcb--dark { background: #212529; box-shadow: 0 -2px 12px rgba(0, 0, 0, .4); }
    #mt-contact-bar.mtcb--dark .mtcb-phone { color: #4ade80; }
    #mt-contact-bar.mtcb--dark .mtcb-map { color: #f87171; }
}
@media (prefers-reduced-motion: reduce) { .mtcb-icon { transition: none; } }