/*==================================================
        DIEN MAY NK - SYSTEM VARIABLES & RESET
==================================================*/
:root {
    --primary: #FFC107;
    --primary-hover: #FFB300;
    --secondary: #0D6EFD;
    --dark: #222222;
    --white: #ffffff;
    --text: #333333;
    --gray: #f8f9fa;
    --border: #e8e8e8;
    --danger: #dc3545;
    --transition: all .25s ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--gray);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 38px;
}

.fs-14 { font-size: 14px; }
.fs-12 { font-size: 12px; }
.fs-11 { font-size: 11px; }
.fs-15 { font-size: 15px; }

@media (min-width: 1200px) {
    .col-xl-2-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/*==================================================
        HEADER COMPONENT & NAVIGATION
==================================================*/
#site-header {
    position: relative;
    width: 100%;
    z-index: 999;
    background: var(--white);
}

#site-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    animation: headerDown .35s ease-in-out;
}

/* Cuộn xuống thì chỉ giữ lại phần main-header (logo, danh mục, tìm kiếm, giỏ
   hàng, tài khoản) - ẩn hẳn top-bar (hotline, menu phụ) để thanh dính gọn
   hơn, không chiếm nhiều chiều cao màn hình. */
#site-header.sticky .top-bar {
    display: none;
}

@keyframes headerDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.top-bar { background: var(--dark); color: var(--white); padding: 8px 0; font-size: 14px; }
.top-left { display: flex; align-items: center; gap: 8px; }
.top-left i { color: var(--primary); }
.top-menu { display: flex; justify-content: flex-end; gap: 24px; }
.top-menu a:hover { color: var(--primary); }

.main-header { background: var(--primary); padding: 15px 0; }
.logo img { max-width: min(190px, 100%); height: auto; transition: var(--transition); }
.logo:hover img { transform: scale(1.03); }

.search-box { display: flex; align-items: center; background: var(--white); height: 46px; border-radius: 50px; padding: 0 5px 0 15px; position: relative; }
.search-box input { flex: 1; border: none; outline: none; padding: 0 10px; font-size: 14px; }
.search-box button { height: 36px; border: none; border-radius: 50px; background: var(--secondary); color: var(--white); padding: 0 25px; font-weight: 600; transition: var(--transition); white-space: nowrap; flex-shrink: 0; }
.search-box button:hover { background: #004fc4; }

.header-right { display: flex; justify-content: space-between; align-items: center; gap: 12px; container-type: inline-size; }
.header-item { display: flex; align-items: center; gap: 8px; background: var(--white); padding: 6px 12px; border-radius: 10px; }
.header-item i { font-size: 20px; color: var(--secondary); }
.header-item small { display: block; font-size: 11px; color: #777; white-space: nowrap; }
.header-item strong { display: block; font-size: 13px; white-space: nowrap; }

/* Ở tier lg (~992-1199px, ví dụ iPad Pro) cột header-right quá hẹp để chứa
   đủ icon so sánh + khối "Tài khoản/Đăng nhập" 2 dòng + nút giỏ hàng, chữ
   bị bóp xuống dòng xấu - ẩn khối chữ, chỉ giữ icon khi cột chưa đủ rộng. */
.header-item > div { display: none; }
@container (min-width: 300px) {
    .header-item > div { display: block; }
}

.header-icon { width: 38px; height: 38px; background: var(--white); border: none; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 18px; transition: var(--transition); cursor: pointer; }
.header-icon:hover { background: var(--secondary); color: var(--white); }

.scale-icon { width: 1em; height: 1em; vertical-align: -0.15em; overflow: visible; }

/* Tooltip CSS tự làm - hiện ngay lập tức khi hover, không bị delay mặc định
   của title attribute trình duyệt (OS-controlled, không chỉnh được). */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    margin-top: 6px;
    background: var(--dark);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 30;
}
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }

.cart-btn { height: 44px; background: var(--dark); border-radius: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 16px; position: relative; color: var(--white); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.cart-btn:hover { background: #000; color: var(--white); }
.cart-btn i { font-size: 18px; }
.cart-btn-label { font-size: 14px; font-weight: 600; }

/* Header rút gọn còn ĐÚNG 1 hàng trên điện thoại (icon logo vuông + ô tìm
   kiếm + giỏ hàng), giống kiểu các sàn TMĐT lớn (CellphoneS...) - mặc định
   Bootstrap grid tách thành 2 hàng (logo+giỏ hàng trước, ô tìm kiếm col-12
   xuống hàng riêng sau) vì ô tìm kiếm chiếm trọn 12 cột ở tier mobile. Ép
   .row thành flex không-wrap rồi tự set lại width theo vai trò từng cột
   (logo/giỏ hàng co theo nội dung, ô tìm kiếm giãn chiếm hết phần còn lại).
   order dùng !important vì phải thắng .order-2/.order-3 của Bootstrap (JSX
   vẫn giữ nguyên để không ảnh hưởng bố cục tablet/desktop). */
@media (max-width: 767.98px) {
    .main-header { padding: 10px 0; }
    .main-header .row { flex-wrap: nowrap; }
    .header-logo-col {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    /* width CỐ ĐỊNH (không phải "auto" tự co theo nội dung) - .header-right
       bên trong có container-type: inline-size (dùng cho container query
       khác ở @container), containment đó khiến trình duyệt KHÔNG tính được
       kích thước tự nhiên của nút giỏ hàng khi cột cha cũng đang tự co theo
       nội dung ("auto" + "auto" lồng nhau) - cột co sập gần bằng 0, nút giỏ
       hàng tràn ra ngoài đè lên ô tìm kiếm. Đặt hẳn 1 con số đủ chỗ cho icon
       giỏ hàng (18px) + số lượng + padding thì không còn phụ thuộc phép tính
       "tự co" bị hỏng đó nữa. */
    .header-actions-col {
        flex: 0 0 auto !important;
        width: 44px !important;
        max-width: none !important;
    }
    .header-search-col {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    /* Bootstrap .order-3/.order-2 (JSX) đã có !important, cùng độ đặc hiệu 1
       class thì thắng theo thứ tự nạp CSS sau (bundle Bootstrap nạp sau
       style.css) - phải ghép 2 class (đã cùng có mặt trên phần tử qua JSX)
       để tăng độ đặc hiệu hơn hẳn Bootstrap, không phụ thuộc thứ tự nạp nữa. */
    .header-search-col.order-3 { order: 2 !important; }
    .header-actions-col.order-2 { order: 3 !important; }
    .logo-mobile img { width: 34px; height: 34px; border-radius: 8px; display: block; }
    .search-box { height: 38px; padding: 0 4px 0 12px; }
    .header-right { justify-content: flex-end; gap: 8px; }
    .cart-btn { height: 38px; padding: 0 10px; }
}
.cart-count { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: var(--white); display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: bold; }

.compare-hint-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 14px;
    z-index: 1100;
    text-align: center;
}
.compare-hint-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--white);
}
.compare-hint-popover p { color: #333; line-height: 1.4; }

.account-item { position: relative; }
.account-hover-preview {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 12px 14px;
    z-index: 1100;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.account-item:hover .account-hover-preview { opacity: 1; visibility: visible; transform: translateY(0); }
.account-hover-preview div { font-size: 13px; color: #333; margin-bottom: 4px; word-break: break-word; }
.account-hover-preview div:last-child { margin-bottom: 0; }
.account-hover-preview i { color: var(--secondary); margin-right: 6px; font-size: 13px; }

.main-nav { background: var(--white); border-bottom: 1px solid var(--border); padding: 0; }
.main-nav .nav-link { font-weight: 600; color: var(--dark); padding: 14px 10px !important; display: flex; align-items: center; gap: 6px; }
.main-nav .nav-link i { color: var(--secondary); }
.main-nav .nav-link:hover { color: var(--secondary); background: #fdfdfd; }

/*--- DANH MỤC FLYOUT (nút giữa logo và ô tìm kiếm) ---*/
.category-nav { position: relative; height: 100%; }
.category-nav-btn {
    width: 100%;
    height: 46px;
    background: var(--dark);
    color: var(--white);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.category-nav-btn:hover { background: #000; }
.category-nav-btn i:first-child { color: var(--primary); font-size: 16px; }
.category-nav-btn .bi-chevron-down { margin-left: auto; font-size: 11px; opacity: .8; }

@media (min-width: 992px) {
    .category-flyout {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 680px;
        max-width: 82vw;
        background: var(--white);
        border-radius: 14px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.15);
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: var(--transition);
        z-index: 1050;
        overflow: hidden;
    }
    .category-nav:hover .category-flyout,
    .category-flyout.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .category-flyout { display: none; }
}

.category-flyout-sidebar {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    width: 230px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border);
    max-height: 420px;
    overflow-y: auto;
}
.category-flyout-sidebar li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.category-flyout-sidebar li a i { color: var(--secondary); font-size: 16px; width: 18px; text-align: center; }
.category-flyout-sidebar li:hover a,
.category-flyout-sidebar li.active a {
    background: var(--white);
    color: var(--secondary);
    border-left-color: var(--primary);
}

.category-flyout-panel { flex: 1; padding: 22px; max-height: 420px; overflow-y: auto; }
.flyout-panel-content { display: none; }
.flyout-panel-content.active { display: block; }
.flyout-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 14px; }
.flyout-icon-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #444;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.3;
    transition: var(--transition);
}
.flyout-icon-grid a:hover { color: var(--secondary); transform: translateY(-3px); }
.flyout-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff8e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-hover);
}

/*==================================================
        FOOTER & BACK TO TOP UTILITIES
==================================================*/
.site-footer { background: #1a1a1a; color: #ccc; padding: 50px 0 0 0; font-size: 14px; }
.site-footer h5 { color: var(--white); font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.footer-menu a { display: block; margin-bottom: 8px; transition: var(--transition); }
.footer-menu a:hover { color: var(--primary); padding-left: 3px; }
.footer-social { display: flex; gap: 12px; }
/* Icon vuông bo góc + màu thương hiệu thật của từng app (giống icon app thật
   trên điện thoại) thay vì dùng chung 1 khối tròn màu tối cho cả 4 mạng -
   nhìn xấu, không phân biệt được app nào là app nào. */
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 18px;
    transition: var(--transition);
}
.footer-social a:hover { transform: translateY(-3px); filter: brightness(1.08); }
.footer-social-facebook { background: #1877F2; }
.footer-social-youtube { background: #FF0000; }
.footer-social-tiktok { background: #010101; }
.footer-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
/* Gian hàng trên sàn TMĐT khác (Shopee/Lazada/TikTok Shop) - badge dạng viên
   thuốc (pill) kèm tên sàn, khác icon vuông thuần .footer-social ở trên vì
   đây cần đọc được TÊN sàn (không có icon logo Shopee/Lazada sẵn trong bộ
   Bootstrap Icons đang dùng, dùng icon túi/cửa hàng chung + tên + màu
   thương hiệu để vẫn nhận diện được ngay). */
.marketplace-links { display: flex; flex-wrap: wrap; gap: 10px; }
.marketplace-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, filter 0.2s;
}
.marketplace-badge:hover { transform: translateY(-3px); filter: brightness(1.08); color: var(--white); }
.marketplace-shopee { background: #EE4D2D; }
.marketplace-lazada { background: #0F146D; }
.marketplace-tiktok-shop { background: #010101; }
.footer-bottom { background: #111; text-align: center; padding: 20px 0; margin-top: 40px; font-size: 13px; border-top: 1px solid #222; }
/* Nằm dưới danh sách "Hỗ trợ" (cột trái căn lề, không phải thanh footer-bottom
   toàn chiều rộng như trước) - căn trái, không center, để đồng nhất với các
   link phía trên nó. */
.footer-stats { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: #999; }
.footer-stats i { margin-right: 4px; }
/* Logo footer dạng chữ, không dùng ảnh logo.png (nền vàng đặc trong ảnh đó
   khớp thanh header vàng, nhưng lên nền tối #1a1a1a của footer thì hiện
   thành 1 miếng hình chữ nhật vàng lạc quẻ) - màu vàng thương hiệu trên nền
   tối vừa khớp nền, vừa nổi bật, không cần ảnh riêng cho footer. */
.footer-logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}
.footer-logo-text:hover { opacity: .88; }
.footer-logo-small {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
}
.footer-logo-big {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 46px;
    font-weight: 800;
    color: var(--primary);
    text-shadow: 2px 2px 0 #8A6400, -1px -1px 0 #FFE699;
}
.compliance-badge { margin-top: 14px; }
.compliance-badge img { max-height: 50px; }
.compliance-badge-placeholder {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px dashed #555; border-radius: 6px; padding: 6px 10px;
    font-size: 11.5px; color: #999;
}

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--primary);
    color: var(--dark);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#backToTop.show { opacity: 1; visibility: visible; }
#backToTop:hover { background: var(--primary-hover); transform: translateY(-3px); }

/*==================================================
        COMPARE BAR
==================================================*/
.compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}

/*==================================================
        BRAND BADGES (Thương Hiệu Nổi Bật)
==================================================*/
.brand-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.brand-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: var(--white);
    transition: var(--transition);
    text-decoration: none;
}
.brand-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.brand-badge-logo img {
    max-width: 80%;
    max-height: 34px;
    object-fit: contain;
}
.brand-badge-word {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 10px;
    border-width: 1.5px;
}

/*==================================================
        FLOATING CONTACT BUTTON (ZALO / HOTLINE)
==================================================*/
.contact-fab {
    position: fixed;
    /* Luôn cách đúng 1cm phía TRÊN nút chatbot (ChatWidget.jsx: bottom 170px,
       cao 56px, cùng right 30px) - đổi vị trí/kích cỡ chatbot thì phải sửa
       lại công thức này theo cho khớp. */
    bottom: calc(170px + 56px + 1cm);
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
}

.contact-fab-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FF7A45 0%, #FF3D71 100%);
    color: var(--white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,61,113,0.35);
    transition: var(--transition);
    animation: contactFabPulse 2.2s infinite;
}
.contact-fab-toggle:hover { background: linear-gradient(135deg, #FF3D71 0%, #FF7A45 100%); }
.contact-fab.open .contact-fab-toggle { animation: none; }

.contact-fab-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}
.contact-fab.open .contact-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.contact-fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: 50px;
    padding: 6px 18px 6px 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}
.contact-fab-item:hover { transform: translateX(-4px); color: var(--dark); }

.contact-fab-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
    flex-shrink: 0;
}
.contact-fab-item.zalo .contact-fab-icon { background: #0068FF; font-size: 13px; font-weight: 800; }
.contact-fab-item.phone .contact-fab-icon { background: #28a745; }

@keyframes contactFabPulse {
    0% { box-shadow: 0 4px 14px rgba(255,61,113,0.35), 0 0 0 0 rgba(255,61,113,0.5); }
    70% { box-shadow: 0 4px 14px rgba(255,61,113,0.35), 0 0 0 14px rgba(255,61,113,0); }
    100% { box-shadow: 0 4px 14px rgba(255,61,113,0.35), 0 0 0 0 rgba(255,61,113,0); }
}

@media (max-width: 576px) {
    .contact-fab { right: 14px; }
    .contact-fab-toggle { width: 50px; height: 50px; font-size: 20px; }
    #backToTop { right: 14px; bottom: 22px; }
}

/*==================================================
        SEARCH AUTOCOMPLETE SUGGESTIONS
==================================================*/
#search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-height: 360px;
    overflow-y: auto;
    z-index: 1050;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--gray); }
.suggestion-img { width: 42px; height: 42px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; flex-shrink: 0; }
.suggestion-title { font-size: 13px; font-weight: 600; margin: 0; }
.suggestion-price { font-size: 13px; color: var(--danger); font-weight: bold; }

/*==================================================
        TOAST THÔNG BÁO (thay thế alert())
==================================================*/
#toast-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-toast {
    background: var(--white);
    border-left: 4px solid var(--secondary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 14px 18px;
    min-width: 280px;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    transform: translateX(120%);
    transition: transform .35s ease;
}

.app-toast.show { transform: translateX(0); }
.app-toast.success { border-left-color: #198754; }
.app-toast i { font-size: 20px; color: #198754; }

/*==================================================
        BANNER DỌC CẠNH DANH MỤC (trang chủ)
==================================================*/
.cat-banner-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.cat-banner-row.banner-right { flex-direction: row-reverse; }
.cat-banner-row .cat-banner-main { flex: 1; min-width: 0; }

.cat-vbanner {
    width: 220px;
    flex-shrink: 0;
    border-radius: 16px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    color: var(--white);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.cat-vbanner.theme-amber { background: linear-gradient(165deg, #4E3400 0%, #97650A 48%, var(--primary) 100%); }
.cat-vbanner.theme-dark { background: linear-gradient(165deg, #14161F 0%, #2A2E40 55%, #5B4420 100%); }

.cat-vbanner .vbanner-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.78);
}
.cat-vbanner .vbanner-title {
    font-weight: 800;
    font-size: 21px;
    line-height: 1.18;
    color: var(--white);
    margin: 8px 0 0;
}
.cat-vbanner .vbanner-img {
    margin: 14px auto;
    max-width: 88%;
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0,0,0,.35));
}
.cat-vbanner .vbanner-price { margin-top: auto; }
.cat-vbanner .vbanner-price .lbl { font-size: 11px; color: rgba(255,255,255,.75); display: block; }
.cat-vbanner .vbanner-price .num { font-weight: 800; font-size: 25px; color: var(--white); }
.cat-vbanner .vbanner-perk {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    margin-top: 10px;
    line-height: 1.55;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.22);
}
.cat-vbanner .vbanner-cta {
    margin-top: 14px;
    background: var(--white);
    color: var(--dark);
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    text-align: center;
    display: block;
}
.cat-vbanner:hover .vbanner-cta { background: var(--gray); }

@media (max-width: 767.98px) {
    .cat-banner-row, .cat-banner-row.banner-right { flex-direction: column; }
    .cat-vbanner {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
    }
    .cat-vbanner .vbanner-eyebrow { display: none; }
    .cat-vbanner .vbanner-title { font-size: 16px; flex: 1; margin: 0; }
    .cat-vbanner .vbanner-img { margin: 0; max-height: 60px; max-width: 68px; order: 3; }
    .cat-vbanner .vbanner-price { margin-top: 0; order: 4; text-align: right; }
    .cat-vbanner .vbanner-price .num { font-size: 18px; }
    .cat-vbanner .vbanner-perk { display: none; }
    .cat-vbanner .vbanner-cta { margin-top: 0; order: 5; width: auto; padding: 9px 14px; white-space: nowrap; }
}

/*==================================================
        NỀN TRANG TRÍ TOÀN TRANG (áp dụng mọi trang công khai)
==================================================*/
.site-bg-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FFF3D2 0%, #FFFAEE 28%, var(--gray) 60%);
    /* Đảm bảo nền luôn phủ đủ chiều cao màn hình và footer luôn nằm sát đáy,
       kể cả ở trang có ít nội dung (vd danh mục lọc ra 0 kết quả) - tránh lộ
       khoảng trắng trơn của trình duyệt bên dưới footer. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-bg-wrap main {
    flex: 1;
}

/* Admin đã upload ảnh nền riêng (Admin > Cài đặt > Ảnh nền toàn trang) - ảnh
   thay thế gradient mặc định, phủ kín và cố định khi cuộn cho cảm giác chiều
   sâu (giống hiệu ứng parallax nhẹ). */
.site-bg-wrap.has-bg-image {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.site-bg-wrap::before,
.site-bg-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.site-bg-wrap::before {
    width: 620px;
    height: 620px;
    top: -260px;
    right: -180px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: .40;
}

.site-bg-wrap::after {
    width: 520px;
    height: 520px;
    bottom: -220px;
    left: -160px;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: .16;
}

/* Có ảnh nền riêng thì ẩn 2 khối mờ trang trí mặc định - tránh chồng màu lên
   ảnh admin đã chọn. */
.site-bg-wrap.has-bg-image::before,
.site-bg-wrap.has-bg-image::after {
    display: none;
}

/* Chỉ định vị lại Header/main/Footer (nội dung chính) để nổi trên 2 khối mờ
   trang trí - CỐ Ý không dùng ">*" chọn mọi phần tử con, vì nút liên hệ
   nhanh/lên đầu trang (position: fixed) cũng là con trực tiếp của
   .site-bg-wrap; ghi đè position của chúng sẽ khiến chúng rơi vào luồng
   bố cục bình thường thay vì nổi cố định, tạo khoảng trắng thừa dưới footer. */
.site-bg-wrap > header,
.site-bg-wrap > main,
.site-bg-wrap > footer {
    position: relative;
    z-index: 1;
}

/* Đồng nhất 1 màu duy nhất cho mọi khối nội dung trên toàn trang (không
   phân biệt bg-white/bg-light xen kẽ như mặc định Bootstrap) - tránh cảm
   giác loang lổ nhiều tông giữa các section/danh mục. .core-features (section
   "Vì sao chọn...") dùng background riêng ở main.css (#f8f9fa), không phải
   bg-white/bg-light - phải liệt kê thêm ở đây thì mới đồng bộ được, nếu không
   sẽ lệch tông ngay dưới banner trang chủ.
   Đặt trong @layer: theo chuẩn CSS Cascade Layers, 1 khai báo !important nằm
   trong @layer LUÔN thắng 1 khai báo !important KHÔNG nằm trong layer nào -
   bất kể độ đặc trưng (specificity) - trong khi tiện ích .bg-white/.bg-light
   của Bootstrap không nằm trong layer nào. Cách này chắc chắn hơn việc đua
   độ đặc trưng (từng thử .site-bg-wrap.has-bg-image .bg-white 3 lớp class
   nhưng không thắng nổi .bg-white gốc của Bootstrap trong lúc kiểm thử). */
@layer site-bg-override {
    .site-bg-wrap .bg-white,
    .site-bg-wrap .bg-light,
    .site-bg-wrap .core-features {
        background-color: #FFFBF0 !important;
    }

    /* Có ảnh nền riêng: phần diện tích section KHÔNG bị .category-section-box/
       .feature-card/.product-card (các khối thẻ riêng, vẫn giữ nền đặc ở
       trên) che - tức khoảng đệm quanh/giữa các thẻ - phải hiện ảnh SẮC NÉT
       100%, giống hệt banner chính, không phải mờ (rgba thấp - lần thử trước)
       và cũng không phải đặc (che mất ảnh hoàn toàn - lần thử trước nữa).
       Trong suốt hoàn toàn (transparent), không phải rgba mờ. */
    .site-bg-wrap.has-bg-image :is(section, main).bg-white,
    .site-bg-wrap.has-bg-image :is(section, main).bg-light,
    .site-bg-wrap.has-bg-image .core-features {
        background-color: transparent !important;
    }
}

@media (max-width: 767.98px) {
    .site-bg-wrap::before { width: 380px; height: 380px; top: -160px; right: -140px; }
    .site-bg-wrap::after { width: 320px; height: 320px; bottom: -140px; left: -120px; }
}

/* background-attachment: fixed render lỗi (vỡ/méo hình) trên Safari iOS -
   cả iPhone lẫn iPad, không riêng màn hình nhỏ - đặc biệt khi kết hợp với
   overflow:hidden như .site-bg-wrap đang có. Dùng (hover:none)+(pointer:coarse)
   để nhận diện đúng nhóm thiết bị cảm ứng (điện thoại + tablet) thay vì đoán
   theo độ rộng màn hình, vì iPad có thể rộng hơn cả một số laptop. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    .site-bg-wrap.has-bg-image { background-attachment: scroll; }
}

/*==================================================
        GIÁ SỐC GIỜ VÀNG (flash sale) - khu vực ưu đãi cần nổi bật hơn
        phần còn lại của trang. Trình bày như 1 khối thẻ bo góc nằm gọn
        trong .container (bằng chiều ngang nội dung trang, KHÔNG tràn viền
        ra hết trình duyệt) - khác với cách làm full-bleed trước đó.
==================================================*/
.flash-sale-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(193, 18, 31, .14);
}

/* Banner tiêu đề - nền vàng cam rực + tia nắng toả + chữ nổi khối viền đỏ +
   ruy băng phụ đề, nằm trong khối .flash-sale-box nên tự bo theo góc trên
   của khối, không tràn ra ngoài chiều rộng trang. */
.flash-sale-banner {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 22px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.4) 0%, transparent 60%),
        repeating-conic-gradient(from 0deg at 50% 35%, rgba(255,255,255,.16) 0deg 3deg, transparent 3deg 9deg),
        linear-gradient(135deg, #FFD54A 0%, #FFA726 55%, #FB8C00 100%);
    box-shadow: inset 0 -6px 18px rgba(0,0,0,.08);
}

/* Phần lưới sản phẩm bên dưới banner, cùng nằm trong khối thẻ - nền ấm nhạt
   hơn banner để sản phẩm/chữ vẫn rõ, dễ đọc. */
.flash-sale-body {
    padding: 24px 20px 28px;
    background: linear-gradient(180deg, #FFF3E2 0%, #FFF8ED 100%);
}

/* Khối nền bọc quanh lưới sản phẩm của từng section danh mục ở trang chủ -
   dùng chung tông màu/gradient với .flash-sale-body để sản phẩm luôn có 1
   khối nền ấm bên dưới thay vì nằm trần trực tiếp trên nền section. */
.category-section-box {
    padding: 24px 20px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, #FFF3E2 0%, #FFF8ED 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
}

/* Banner chính trang chủ (carousel + banner phụ) - ảnh cần tràn sát viền
   khung, không có khoảng đệm như khối lưới sản phẩm. overflow:hidden để ảnh
   tự bo theo góc bo tròn của khung thay vì lộ góc vuông ra ngoài. Bỏ hẳn nền
   gradient kế thừa từ .category-section-box - 3 banner (chính + 2 phụ) đã
   tự bo góc/overflow hidden riêng từng cái, phần nền ở đây chỉ lộ ra ở khe hở
   rất mỏng (gutter row) giữa chúng, tạo mảng màu thừa không cần thiết. */
.category-section-box-flush {
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

.flash-sale-banner-inner { position: relative; z-index: 1; }

/* Thanh tab nhiều khu flash-sale (vd FLASHSALE / MÁY XỊN TỰU TRƯỜNG) - nằm
   trên cùng .flash-sale-box, nền đỏ để phân biệt rõ với banner vàng cam bên
   dưới, tự bo góc trên theo overflow:hidden của khối cha. Cố ý làm to/đậm -
   đây là tên khu vực DUY NHẤT hiển thị (banner bên dưới không lặp lại tên
   tab nữa), nên bản thân tab phải đủ nổi bật để đóng luôn vai trò tiêu đề. */
.promo-zone-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 22px 20px 20px;
    background: #C1121F;
}

.promo-zone-tab {
    border: 2px solid rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .15);
    color: rgba(255, 255, 255, .85);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(14px, 2vw, 19px);
    letter-spacing: .4px;
    padding: 12px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}

.promo-zone-tab:hover { color: var(--white); border-color: rgba(255, 255, 255, .6); }

.promo-zone-tab.active {
    background: #FFF3E2;
    color: #C1121F;
    border-color: #FFF3E2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}

/* Đếm ngược chung của tab đang chọn - hiện trong banner (đã bỏ tiêu đề chữ
   lớn lặp lại tên tab), dạng ô số tối màu như đồng hồ đếm ngược thật thay vì
   1 dòng chữ liền như ảnh mẫu. */
.promo-zone-countdown {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, .28);
    border-radius: 999px;
    animation: promo-zone-countdown-pulse 2s ease-in-out infinite;
}

.promo-zone-countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.promo-zone-countdown-digits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.promo-zone-countdown-box {
    background: #1a1a1a;
    color: var(--white);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    min-width: 32px;
    padding: 8px 6px;
    border-radius: 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08);
}

.promo-zone-countdown-sep {
    color: var(--white);
    font-weight: 800;
    font-size: 18px;
}

/* Nhấp nháy nhẹ NGUYÊN khối đếm ngược (không nhấp nháy từng số) - gây chú ý
   vừa phải mà không làm số khó đọc/trông như đang lỗi. */
@keyframes promo-zone-countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
    50% { box-shadow: 0 0 0 6px rgba(255, 209, 102, .18); }
}

/* Ảnh nền tuỳ chỉnh (đặt ở trang admin Flash Sale) phủ
   TOÀN BỘ khối .flash-sale-box - tab, banner, lẫn lưới sản phẩm - chứ không
   phải riêng phần banner tiêu đề. 3 lớp con (.promo-zone-tabs/.flash-sale-
   banner/.flash-sale-body) chuyển trong suốt để lộ ảnh nền chung phía sau;
   ::before phủ 1 lớp tối nhẹ giữ chữ/nút luôn đọc được trên mọi ảnh.
   z-index khai báo rõ ràng cho cả ::before lẫn 3 lớp con - trộn phần tử
   positioned (.flash-sale-banner có sẵn position:relative) với phần tử
   static (.promo-zone-tabs/.flash-sale-body) mà không định rõ z-index sẽ
   khiến overlay vô tình đè lên chữ/nút thay vì nằm phía sau chúng. */
.flash-sale-box.has-custom-bg {
    background-size: cover;
    background-position: center;
}

.flash-sale-box.has-custom-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .35));
}

.flash-sale-box.has-custom-bg .promo-zone-tabs,
.flash-sale-box.has-custom-bg .flash-sale-banner,
.flash-sale-box.has-custom-bg .flash-sale-body {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Ảnh nền admin đang dùng có sẵn chữ "FLASH SALE" to chiếm khoảng nửa trái -
   căn giữa tab theo TOÀN BỘ chiều ngang (mặc định) sẽ đè tab lên chữ đó.
   Dồn vùng căn giữa của tab sang phần còn lại bên phải bằng padding-left
   lớn, chỉ áp dụng khi có ảnh nền tuỳ chỉnh (ảnh mặc định/gradient không có
   chữ nên không cần né). Lưu ý: tỉ lệ % này khớp với bố cục ảnh admin đang
   dùng - đổi sang ảnh nền khác có bố cục chữ khác thì cần chỉnh lại số này.
   Bỏ qua ở mobile (reset về mặc định) vì background-size:cover cắt ảnh theo
   tỉ lệ khác hẳn ở màn hẹp, % này không còn đúng nữa. */
.flash-sale-box.has-custom-bg .promo-zone-tabs {
    padding-left: 38%;
}

@media (max-width: 767.98px) {
    .flash-sale-box.has-custom-bg .promo-zone-tabs { padding-left: 14px; }
}

/* Lưới sản phẩm khu flash-sale - LUÔN đúng 1 hàng cố định số cột (không
   xuống hàng như .row/row-cols- thường dùng ở các khu khác), sản phẩm dư ra
   cuộn ngang qua 2 nút mũi tên (HorizontalProductCarousel.jsx). grid-auto-
   columns tính theo đúng số cột mong muốn ở từng breakpoint, cùng gap 1rem
   như .g-3 Bootstrap để đồng bộ khoảng cách với các lưới sản phẩm khác. */
.promo-zone-carousel {
    position: relative;
}

.promo-zone-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1rem) / 2);
    gap: 1rem;
    overflow-x: auto;
    /* Không có overflow dọc nên khi trỏ chuột nằm trên hàng này, trình
       duyệt tự đổi hướng cuộn chuột (dọc) thành cuộn NGANG luôn - không có
       snap thì mỗi nấc lăn chuột dừng ở 1 vị trí bất kỳ, cắt cụt thẻ giữa
       chừng. mandatory buộc luôn "hít" về đúng mép 1 thẻ dù cuộn tay hay
       lăn chuột. Từng bỏ dòng này vì nghi ngờ nó xung đột với lệnh
       scrollIntoView() của nút mũi tên - nhưng nguyên nhân thật của lỗi đó
       là 1 lỗi công thức tính số thẻ khác (đã sửa), không liên quan tới
       snap - nên thêm lại an toàn, không tái diễn lỗi cũ. */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.promo-zone-carousel-track::-webkit-scrollbar { display: none; }
.promo-zone-carousel-track > * { scroll-snap-align: start; }

@media (min-width: 768px) {
    .promo-zone-carousel-track { grid-auto-columns: calc((100% - 3rem) / 4); }
}

@media (min-width: 992px) {
    .promo-zone-carousel-track { grid-auto-columns: calc((100% - 4rem) / 5); }
}

.promo-zone-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #C1121F;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.promo-zone-carousel-arrow:hover { background: var(--white); }

/* left/right = -(padding ngang của .flash-sale-body, 20px) - đặt cạnh NGOÀI
   của nút đúng khít mép .flash-sale-box. Từng thử offset = -(bề rộng nút) để
   nút không đè tí nào lên thẻ, nhưng .flash-sale-box có overflow:hidden nên
   phần nút lồi ra ngoài mép bị cắt mất - cắt luôn cả icon mũi tên bên trong
   (icon nằm giữa nút), làm icon trông vỡ/lệch. Offset = -20px giữ nguyên vẹn
   cả nút (không phần nào bị cắt), chỉ đè nhẹ ~20px lên mép thẻ đầu/cuối -
   giống cách hầu hết carousel thật vẫn làm (nút nổi 1 phần trên ảnh thẻ). */
.promo-zone-carousel-arrow-left { left: -20px; }
.promo-zone-carousel-arrow-right { right: -20px; }

@media (max-width: 575.98px) {
    .promo-zone-carousel-arrow { width: 32px; height: 32px; font-size: 14px; }
    /* -14px = padding ngang .flash-sale-body ở breakpoint 767.98px (14px),
       cùng nguyên tắc với bản desktop - giữ nguyên vẹn nút, không bị cắt. */
    .promo-zone-carousel-arrow-left { left: -14px; }
    .promo-zone-carousel-arrow-right { right: -14px; }
}

/* Tia sét trang trí 2 góc banner - hô ứng icon tia sét ở tiêu đề gốc, đóng
   vai trò tương đương 2 hộp quà ở banner đối thủ nhưng đúng bộ nhận diện
   riêng của Điện Máy NK thay vì sao chép hình minh hoạ của họ. */
.flash-sale-banner-bolt {
    position: absolute;
    top: 50%;
    font-size: clamp(48px, 9vw, 96px);
    color: rgba(255,255,255,.28);
    pointer-events: none;
    z-index: 0;
}
.flash-sale-banner-bolt-left {
    left: 4%;
    transform: translateY(-50%) rotate(-12deg);
    animation: flashBoltPulseLeft 2.2s ease-in-out infinite;
}
.flash-sale-banner-bolt-right {
    right: 4%;
    transform: translateY(-50%) rotate(12deg) scaleX(-1);
    animation: flashBoltPulseRight 2.2s ease-in-out infinite .6s;
}

@keyframes flashBoltPulseLeft {
    0%, 100% { transform: translateY(-50%) rotate(-12deg) scale(1); opacity: .28; }
    50% { transform: translateY(-50%) rotate(-12deg) scale(1.1); opacity: .45; }
}
@keyframes flashBoltPulseRight {
    0%, 100% { transform: translateY(-50%) rotate(12deg) scaleX(-1) scale(1); opacity: .28; }
    50% { transform: translateY(-50%) rotate(12deg) scaleX(-1) scale(1.1); opacity: .45; }
}

/* Card sản phẩm trong khu giờ vàng có viền/đổ bóng ánh đỏ riêng, khác hẳn
   card trắng-viền-xám thường ở các khu vực khác của trang. */
.flash-sale-card {
    border: 1px solid rgba(220, 53, 69, .18);
    background: var(--white);
    box-shadow: 0 6px 18px rgba(220, 53, 69, .12);
    transition: var(--transition);
}
.flash-sale-card:hover {
    border-color: rgba(220, 53, 69, .4);
    box-shadow: 0 10px 24px rgba(220, 53, 69, .22);
    transform: translateY(-3px);
}

/* Container query (không phải media query) vì lưới sản phẩm đổi số cột ở
   nhiều breakpoint (row-cols-md-3, row-cols-lg-4...), nên độ rộng thẻ
   không tỉ lệ thuận với độ rộng màn hình - phải dựa vào độ rộng thẻ thật. */
.product-info-cq {
    container-type: inline-size;
}
.product-info-cq .btn-label {
    display: none;
}
@container (min-width: 215px) {
    .product-info-cq .btn-label {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash-sale-banner-bolt-left,
    .flash-sale-banner-bolt-right {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .flash-sale-box { border-radius: 14px; }
    .flash-sale-banner { padding: 20px 14px 24px; }
    .flash-sale-body { padding: 18px 14px 22px; }
    .flash-sale-banner-bolt { font-size: 42px; opacity: .2; }
    .promo-zone-tabs { gap: 8px; padding: 16px 14px 14px; }
    .promo-zone-tab { padding: 9px 18px; }
    .promo-zone-countdown { gap: 8px; padding: 8px 16px; }
    .promo-zone-countdown-box { font-size: 16px; min-width: 26px; padding: 6px 4px; }
}

/*==================================================
        TRANG CHỦ - SLIDER CHÍNH + 2 BANNER PHỤ
        Nằm gọn trong .container (bằng chiều ngang trang), KHÔNG tràn viền -
        slider chính bên trái, 2 banner phụ (admin tự cấu hình) xếp dọc bên
        phải, cùng cao bằng nhau nhờ Bootstrap row tự giãn đều chiều cao cột.
==================================================*/
.hero-slider .hero-main-carousel {
    border-radius: 16px;
    overflow: hidden;
}
/* Ép chiều cao cố định ở cả .carousel-inner lẫn .carousel-item (không chỉ
   ảnh) - "height: auto" mặc định của .carousel-item bị tính lệch cao hơn ảnh
   thật (dù .carousel-caption/.carousel-overlay đều position:absolute, không
   thuộc luồng bình thường), nên phải chốt cứng để khớp đúng 480px với cột
   banner phụ bên cạnh, tránh 2 bên lệch chiều cao. */
.hero-slider .hero-main-carousel .carousel-inner,
.hero-slider .hero-main-carousel .carousel-item {
    height: 480px;
}
.hero-slider .hero-main-carousel .carousel-item img {
    height: 480px;
    object-fit: cover;
}

.hero-side-banner-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Đặt cố định bằng đúng chiều cao carousel chính (480px) thay vì height:
       100% - ảnh banner phụ chưa có chiều cao riêng nên "hypothetical height"
       lúc flexbox tính stretch bị lệch theo tỉ lệ ảnh gốc, không khớp carousel. */
    height: 480px;
}

.hero-side-banner {
    position: relative;
    display: block;
    flex: 1;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
}
.hero-side-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}
.hero-side-banner:hover img { transform: scale(1.05); }

.hero-side-banner-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 16px;
    background: linear-gradient(0deg, rgba(0,0,0,.68) 0%, transparent 100%);
}
.hero-side-banner-caption span {
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .hero-slider .hero-main-carousel .carousel-inner,
    .hero-slider .hero-main-carousel .carousel-item,
    .hero-slider .hero-main-carousel .carousel-item img { height: 300px; }
    .hero-side-banner-col { flex-direction: row; height: 150px; margin-top: 12px; }
}

@media (max-width: 575.98px) {
    .hero-slider .hero-main-carousel .carousel-inner,
    .hero-slider .hero-main-carousel .carousel-item,
    .hero-slider .hero-main-carousel .carousel-item img { height: 220px; }
    .hero-side-banner-col { height: 110px; }
    .hero-side-banner-caption { padding: 10px 12px; }
    .hero-side-banner-caption span { font-size: 12px; }
}

/*==================================================
        TRANG CHỦ - BANNER CHÍNH KIỂU "FULL MÀN HÌNH"
        Chọn ở Admin > Giao diện & Nội dung (heroLayout = "full") - section
        này KHÔNG nằm trong .container (xem Home.jsx) nên carousel tự tràn
        hết chiều ngang màn hình; các rule dưới đây chỉ override phần khác
        biệt so với kiểu "boxed" mặc định (bỏ bo góc). Chiều cao lấy đúng theo
        trang tĩnh cũ (D:\dienmaynkmeta\assets\css\main.css - 480px desktop,
        250px mobile) mà người dùng dẫn làm mẫu "nhìn đẹp hơn". Selector 3 lớp
        ở đây có specificity cao hơn .hero-slider .hero-main-carousel (2 lớp)
        nên luôn thắng dù section vẫn giữ chung class .hero-slider để thừa
        hưởng các rule dùng chung khác (overlay, vị trí caption...).
==================================================*/
.hero-slider-full .hero-main-carousel {
    border-radius: 0;
}
.hero-slider-full .hero-main-carousel .carousel-inner,
.hero-slider-full .hero-main-carousel .carousel-item {
    height: 480px;
}
.hero-slider-full .hero-main-carousel .carousel-item img {
    height: 480px;
    object-fit: cover;
}
.hero-slider-full .carousel-caption {
    max-width: 680px;
}

@media (max-width: 991.98px) {
    .hero-slider-full .hero-main-carousel .carousel-inner,
    .hero-slider-full .hero-main-carousel .carousel-item,
    .hero-slider-full .hero-main-carousel .carousel-item img { height: 300px; }
}

@media (max-width: 575.98px) {
    .hero-slider-full .hero-main-carousel .carousel-inner,
    .hero-slider-full .hero-main-carousel .carousel-item,
    .hero-slider-full .hero-main-carousel .carousel-item img { height: 250px; }
}

/* Sidebar admin - ở màn hình >= lg đứng yên (sticky) khi cuộn trang, không
   trôi mất khỏi màn hình như trước (trước đây chỉ nằm trong luồng flex bình
   thường nên cuộn theo nội dung). Dưới breakpoint lg, chuyển sang dạng trượt
   ra (off-canvas): ẩn ngoài màn hình bằng translateX, AdminLayout.jsx thêm
   class .open + lớp phủ nền tối khi bấm nút hamburger để mở, đóng lại khi
   bấm ra ngoài hoặc chọn 1 mục menu. */
@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1060;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-content { padding-top: 56px; }
}

/* Thanh "Lưu cài đặt" nổi cố định gần đáy màn hình khi cuộn trang cài đặt dài
   (Cài đặt chung / Giao diện & Nội dung) - trước đây nút này nằm cuối form,
   phải cuộn hết xuống mới bấm được. */
.admin-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 20;
}

/* Nút chọn icon danh mục (Admin > Danh mục sản phẩm) - xem IconPicker trong
   AdminCategories.jsx. Popover định vị tuyệt đối so với chính nút bấm
   (position: relative trên .icon-picker), không phải so với cả trang. */
.icon-picker { position: relative; display: inline-block; }
.icon-picker-toggle {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    color: #333;
}
.icon-picker-toggle:hover { border-color: #ffc107; background: #fff8e6; }
.icon-picker-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: 260px;
    padding: 10px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.icon-picker-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 16px;
    color: #333;
}
.icon-picker-item:hover { background: #fff3cd; }
.icon-picker-item.active { border-color: #ffc107; background: #fff3cd; color: #b8860b; }