/* 1. MÀU SẮC CHỦ ĐẠO & HEADER (MÀU C1294F) */
:root {
    --brand: #C1294F !important;
}

html body .adamshop-topbar, 
html body header.adamshop-header, 
html body .adamshop-brand-row,
html body .adamshop-menu-row, 
html body .adamshop-nav, 
html body nav.nv-megamenu-wrap,
html body ul.nv-megamenu, 
html body #nv-mm-nav-71, 
.adamshop-header-position-placeholder,
html body .adamshop-header-inner,
html body .adamshop-header-placeholder,
html body .adamshop-header-position-grid {
    background: #C1294F !important;
    background-color: #C1294F !important;
    border: none !important; 
    box-shadow: none !important;
}

/* ĐỔI MÀU THANH MENU NAVIGATION SANG MÀU #97203E */
html body nav.nv-megamenu-wrap,
html body ul.nv-megamenu,
html body #nv-mm-nav-71,
html body ul#nv-mm-nav-71.nv-megamenu {
    background: #97203E !important;
    background-color: #97203E !important;
}

/* 2. HOTLINE NÚT ĐỎ CHỮ VÀNG */
html body .adamshop-topbar .adamshop-container > div > a, 
html body .adamshop-topbar .adamshop-container > div:nth-child(2) { display: none !important; }

/* 3. MENU MEGAMENU & CHỮ */
ul.nv-megamenu a.nv-mm-link, 
.nv-megamenu .nv-mm-item > a, 
.main-menu > li > a {
    color: #ffffff !important; 
    font-size: 18px !important; 
    font-weight: 700 !important; 
    padding-left: 6px !important; 
    padding-right: 6px !important;
}

/* ====================================================
   4. Ô TÌM KIẾM MÀU VÀNG CẮT XÉO - TRÀN FULL KHUNG BÊN PHẢI
   ==================================================== */
.adamshop-header, .adamshop-header-inner, header { 
    position: relative !important; 
}

/* Xóa margin/padding dư thừa của khối bọc bên phải */
.adamshop-header .top_center_right,
.adamshop-header .top_center_right .column,
.adamshop-header .top_center_right .portlet,
div#bl_110,
div#bl_110 .blockct {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
}

/* Form tìm kiếm cắt xéo áp sát góc phải */
html body form.adamshop-search.headerSearch,
html body .adamshop-search.headerSearch {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    min-height: 48px !important;
    width: 280px !important;
    background-color: #ffff00 !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 28px !important;
    padding-right: 15px !important;
    margin: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    clip-path: polygon(22px 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    z-index: 99 !important;
}

html body .adamshop-search.headerSearch .adamshop-search-input { 
    background: transparent !important; 
    border: none !important; 
    width: 100% !important; 
    height: 100% !important;
    font-size: 14px !important; 
    color: #222222 !important; 
    outline: none !important;
}

html body .adamshop-search.headerSearch .adamshop-search-btn { 
    background: transparent !important; 
    border: none !important; 
    color: #000000 !important; 
    font-size: 16px !important; 
    padding: 0 !important;
    cursor: pointer !important; 
    display: flex !important;
    align-items: center !important;
}

/* 5. GIỎ HÀNG & TÀI KHOẢN */
.adamshop-header-right a.adamshop-icon-btn, 
.adamshop-header-right div { 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
}

.adamshop-header-right {
    background-color: #ffeb3b !important;
    border: 1px solid #fbc02d !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: auto !important;
    width: auto !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

.adamshop-header-right a.adamshop-icon-btn svg,
.adamshop-header-right a.adamshop-icon-btn svg path,
.adamshop-header-right svg,
.adamshop-header-right svg path {
    color: #111111 !important;
    stroke: #111111 !important;
    width: 22px !important;
    height: 22px !important;
}

.adamshop-header-right .adamshop-cart-badge {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    margin-left: 2px !important;
}

.adamshop-personalarea a.pointer.button.user,
.adamshop-personalarea a.button {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* 6. PANEL TIÊU ĐỀ & LOGO */
html body .panel-heading, 
html body .panel-default > .panel-heading, 
html body .ash-tabs-wrap .panel-heading {
    display: inline-block !important; 
    padding: 8px 22px !important; 
    border-radius: 0 !important;
    background-color: #BC284D !important; 
    color: #fff !important; 
    font-weight: bold !important; 
    text-transform: uppercase !important;
}

html body .panel-default { background: transparent !important; border: none !important; box-shadow: none !important; }
html body .panel-default > .panel-body { 
    border: 1px solid #BC284D !important; 
    border-radius: 0 10px 10px 10px !important; 
    background: #fff !important; 
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: space-around !important; 
    gap: 10px !important; 
}

html body figure.image { width: calc(12.5% - 10px) !important; min-width: 90px !important; margin: 0 !important; }
html body figure.image img { max-width: 100% !important; height: auto !important; }

/* 7. NÚT TABS (.TABS-BAR) */
html body .tabs-bar { display: flex !important; width: 100% !important; gap: 8px !important; margin-top: 8px !important; border: none !important; box-shadow: none !important; }
html body .tabs-bar .tab-btn, html body .tabs-bar > button { flex: 1 !important; padding: 12px 4px !important; color: #fff !important; font-weight: bold !important; font-size: 13px !important; text-transform: uppercase !important; border-radius: 8px !important; border: none !important; }
html body .tabs-bar > button:nth-of-type(1) { background: #ff4b4b !important; }
html body .tabs-bar > button:nth-of-type(2) { background: #ff8800 !important; }
html body .tabs-bar > button:nth-of-type(3) { background: #BC284D !important; }
html body .tabs-bar > button:nth-of-type(4) { background: #1890ff !important; }

/* 9. ĐIỀU CHỈNH ẨN VÀ FIX TRỐNG KHOẢNG CÁCH BANNER / BODY */
html body .adamshop-topbar,
html body div.adamshop-topbar,
#lien-he.ash-cta-section,
.ash-cta-section,
.alert.alert-warning {
    display: none !important;
}

.adamshop-brand-row::after, 
.adamshop-header-inner.adamshop-brand-row::after,
header.adamshop-header .adamshop-brand-row::after {
    display: none !important;
    content: none !important;
}

header.adamshop-header,
.adamshop-brand-row,
.adamshop-header-inner.adamshop-brand-row {
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: unset !important;
}

html body .ash-hero, html body section.ash-hero { padding-top: 10px !important; padding-bottom: 10px !important; }
html body .section-body, html body div.section-body { padding-top: 0 !important; margin-top: 0 !important; }
html body section#uy-tin.ash-section, html body #uy-tin,
html body section#danh-muc.ash-section, html body #danh-muc,
html body section.ash-section.ash-home-columns, html body .ash-home-columns,
html body #body, html body div#body.container, html body #body.container {
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}

/* 10. SUBMENU MEGAMENU NỀN TRẮNG CHỮ ĐEN */
html body .nv-mm-panel, html body .nv-mm-panel div, html body .nv-mm-panel ul, html body .nv-mm-panel li { background-color: #ffffff !important; }
html body .nv-mm-col a, html body .nv-mm-col-title, html body .nv-mm-col span, html body .nv-mm-panel a, html body .nv-mm-panel span { color: #111111 !important; font-size: 15px !important; white-space: nowrap !important; }
html body .nv-mm-col a:hover, html body .nv-mm-col a:hover span, html body .nv-mm-panel a:hover { color: #97203E !important; }

/* ÉP LOGO VÀ GIỎ HÀNG NẰM CHUNG 1 HÀNG NGANG */
@media (max-width: 768px) {
    /* 1. ÉP BỐ CỤC CHÍNH CHỈNH LẠI THỨ TỰ CÁC DÒNG */
    #header,
    .adamshop-header-inner,
    .header-content,
    .adamshop-brand-row {
        display: flex !important;
        flex-direction: column !important;
        padding: 5px 10px !important;
    }

    /* DÒNG 1: Thanh tìm kiếm màu vàng nằm trên cùng */
    .adamshop-search,
    .headerSearch {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* DÒNG 2: ÉP KHỐI BỌC LOGO & GIỎ HÀNG XẾP NGANG */
    .adamshop-brand-row,
    .header-main-row {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important; /* Xếp ngang */
        justify-content: space-between !important; /* Logo bên trái - Giỏ hàng bên phải */
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Logo lùi về lề trái */
    .adamshop-logo {
        order: 1 !important;
        max-width: 130px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .adamshop-logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Giỏ hàng + Tài khoản lùi về lề phải */
    .adamshop-header-right {
        order: 2 !important;
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* DÒNG 3: ÉP DẢI HOTLINE & FACEBOOK ĐẨY XUỐNG DƯỚI CÙNG */
    .adamshop-header-head-right {
        order: 3 !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.25) !important;
        padding: 5px 0 !important;
        margin-top: 4px !important;
    }

    .adamshop-header-head-right p {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }

    .adamshop-header-head-right p span,
    .adamshop-header-head-right p a {
        font-size: 12px !important;
    }
}
/* 1. TẠO HIỆU ỨNG NHẤP NHÁY / PHÓNG TO THU HÚT */
@keyframes phonePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08); /* Phóng to nhẹ */
        color: #00ffff !important; /* Đổi sang màu xanh ngọc nhấp nháy */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 2. ÁP DỤNG MÀU VÀNG VÀ HIỆU ỨNG CHO SỐ ĐIỆN THOẠI */
.adamshop-header-head-right p a[href*="0392.250.286"],
.adamshop-header-head-right p a span strong {
    color: #FFEB3B !important;             /* Màu vàng nổi bật */
    text-decoration: underline !important; /* Gạch chân để biết là link */
    display: inline-block !important;
    animation: phonePulse 1.5s infinite ease-in-out !important; /* Nhấp nháy liên tục */
    cursor: pointer !important;
}

/* 3. HIỆU ỨNG RÊ CHUỘT VÀO SỐ ĐIỆN THOẠI */
.adamshop-header-head-right p a:hover span strong {
    color: #ffffff !important;
    text-shadow: 0 0 8px #FFEB3B !important;
}
/* ====================================================
   XẮP XẾP HÀNG NGANG AN TOÀN - KHÔNG PHÁ VỠ JAVASCRIPT
   ==================================================== */
@media (max-width: 768px) {
    /* 1. Đưa khung chứa về dạng Flex đơn giản để xếp hàng ngang */
    .adamshop-header-position-grid.adamshop-header-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding: 5px 10px !important;
    }

    /* 2. Nút 3 gạch giữ nguyên cấu trúc gốc, chỉ ép nằm bên trái */
    .adamshop-header-top_center_left {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 3. Ô tìm kiếm màu vàng nằm bên phải và co dãn chiều rộng */
    .adamshop-header-top_center_right {
        flex: 1 !important;
        margin-left: 10px !important;
        width: auto !important;
    }

    /* Giao diện màu vàng cho thanh tìm kiếm */
    html body .adamshop-search.headerSearch {
        background-color: #ffeb3b !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    html body .adamshop-search.headerSearch .adamshop-search-input {
        color: #000000 !important;
        font-size: 13px !important;
        background: transparent !important;
    }

    html body .adamshop-search.headerSearch .adamshop-search-btn {
        color: #000000 !important;
        background: transparent !important;
    }
}
/* ====================================================
   FIX ÉP ẨN CHỮ GIỎ HÀNG VÀ NÚT DƯ THỪA
   ==================================================== */
@media (max-width: 768px) {
    /* 1. Ẩn tất cả chữ/span nằm bên trong nút giỏ hàng */
    .adamshop-header-right a.adamshop-icon-btn span,
    .adamshop-header-right a.adamshop-icon-btn text {
        display: none !important;
    }

    /* Ép ẩn text trực tiếp bằng cách xóa kích thước dòng chữ */
    .adamshop-header-right a.adamshop-icon-btn {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Hiển thị lại đúng icon giỏ hàng */
    .adamshop-header-right a.adamshop-icon-btn i,
    .adamshop-header-right a.adamshop-icon-btn svg,
    .adamshop-header-right a.adamshop-icon-btn :first-child {
        display: inline-block !important;
        font-size: 18px !important;
        color: #000000 !important;
    }

    /* 2. Ép ẩn hoàn toàn nút button dư thừa phía sau */
    .adamshop-header-right button.adamshop-menu-btn,
    .adamshop-header-right > button {
        display: none !important;
    }

    /* 3. Căn chỉnh lại khung màu vàng gọn đẹp cho 2 icon */
    .adamshop-header-right {
        display: inline-flex !important;
        align-items: center !important;
        padding: 5px 10px !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }
}
/* ====================================================
   FIX FOOTER XUỐNG DÒNG THOÁNG RỘNG TRÊN MOBILE
   ==================================================== */
@media (max-width: 768px) {
    #footer .adamshop-footer .adamshop-footer-grid,
    .adamshop-footer-grid {
        display: flex !important;
        flex-direction: column !important; /* Cho 3 cột xuống dòng xếp dọc */
        width: 100% !important;
        padding: 15px 15px !important;    /* Lề trong thoáng 2 bên */
        gap: 25px !important;              /* Khoảng cách rộng giữa các khối */
    }

    #footer .adamshop-footer .adamshop-footer-grid > div,
    .adamshop-footer-col {
        width: 100% !important;           /* Tràn trọn 100% chiều rộng màn hình */
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }
}
/* 1. ẨN KHỐI THÔNG TIN CÔNG TY (ĐOẠN DẢI XANH DƯỚI FOOTER) */
.adamshop-footer-company,
div.adamshop-footer-company,
#footer.adamshop-footer .adamshop-footer-company {
    display: none !important;
}

/* 2. ẨN CỘT LIÊN HỆ THỪA (BÊN PHẢI FOOTER) */
ul.contactList,
#contactList,
.adamshop-footer-contact {
    display: none !important;
}
/* CĂN ĐỀU 3 CỘT FOOTER TRÊN MÁY TÍNH */
@media (min-width: 769px) {
    #footer .adamshop-footer .adamshop-footer-grid,
    .adamshop-footer-grid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    #footer .adamshop-footer .adamshop-footer-grid > div:nth-child(1),
    #footer .adamshop-footer .adamshop-footer-grid > div:nth-child(2),
    #footer .adamshop-footer .adamshop-footer-grid > div:nth-child(3) {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        box-sizing: border-box !important;
    }
}
/* ĐỔI GIÁ SẢN PHẨM SANG MÀU ĐỎ VÀ TĂNG KÍCH THƯỚC */
.price-row .price, 
span.price, 
.product-viewlist .price-value, 
.money {
    color: #ff0000 !important;      /* Màu đỏ tươi nổi bật */
    font-size: 20px !important;     /* Tăng kích thước chữ (mặc định 16.5px) */
    font-weight: 800 !important;    /* In đậm hơn */
}
/* =========================================================
   TỐI ƯU BỘ LỌC DẠNG THẺ TAG NẰM NGANG - GỌN ĐẸP TỐI ĐA
   ========================================================= */

/* 1. Khung tổng bộ lọc */
.panel-filter-product,
.filter_product,
div[class*="panel-filter-product"] {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* 2. Căn chỉnh tiêu đề "Thương hiệu:", "Tính Chất:" nằm trên hàng riêng */
.panel-filter-product label:not(.checkbox-inline),
.filter_product label:not(.checkbox-inline),
.panel-filter-product strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    text-transform: uppercase !important;
    margin: 8px 0 6px 0 !important;
}

/* 3. Đưa các ô chọn xếp DÀN NGANG dạng Thẻ Tag tròn xinh xắn */
.panel-filter-product label.checkbox-inline,
.filter_product label.checkbox-inline,
.panel-filter-product div.checkbox,
.filter_product div.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f7f7f7 !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 16px !important; /* Bo góc nút tag */
    padding: 4px 10px !important;
    margin: 2px 4px 6px 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #444444 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Căn chỉnh ô vuông tick chọn */
.panel-filter-product input[type="checkbox"],
.filter_product input[type="checkbox"] {
    margin: 0 5px 0 0 !important;
    position: relative !important;
    top: 0 !important;
    accent-color: #ff007f !important;
}

/* Rê chuột vào thẻ Tag */
.panel-filter-product label.checkbox-inline:hover,
.filter_product label.checkbox-inline:hover {
    background-color: #ffe6f2 !important;
    border-color: #ff007f !important;
    color: #ff007f !important;
}

/* Khi TICK CHỌN: Đổi màu nền Hồng nổi bật */
.panel-filter-product label.checkbox-inline:has(input:checked),
.filter_product label.checkbox-inline:has(input:checked) {
    background-color: #ff007f !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
}

/* =========================================================
   TẠO KHOẢNG CÁCH DỄ THỞ GIỮA CÁC KHỐI SẢN PHẨM & THƯƠNG HIỆU
   ========================================================= */

/* 1. Đẩy các khối tiêu đề (Gel bôi trơn, Thương hiệu,...) xuống dưới rộng rãi */
html body .shop-tabs-block,
html body .panel.panel-default,
html body section#san-pham .shop-tabs-block,
html body div[class*="shop-tabs-block"] {
    margin-top: 10px !important; /* Khoảng cách lề trên 35px giúp tách lề cực đẹp */
    margin-bottom: 25px !important;
}

/* Khối sản phẩm đầu tiên không bị đẩy lùi quá sâu */
html body .shop-tabs-block:first-child,
html body .panel.panel-default:first-child {
    margin-top: 5px !important;
}

/* 2. Căn chỉnh lề cho riêng Tiêu đề Hồng (GEL BÔI TRƠN, THƯƠNG HIỆU) */
html body .panel-default > .panel-heading,
html body .panel-heading,
html body h2.shop-tabs-titlen.panel-heading {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* 3. Đảm bảo chữ "Xem tất cả" căn ngang hàng đẹp mắt với Tiêu đề */
html body .shop-tabs-header.group-title,
html body .shop-tabs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
/* =========================================================
   ĐỔI TIÊU ĐỀ SANG XANH LÁ GRADIENT - PHÓNG TO HẾT MỨC NỔI BẬT
   ========================================================= */

/* 1. Tiêu đề khối Sản phẩm & Khối Thương hiệu */
html body .panel-default > .panel-heading,
html body .panel-heading,
html body h2.shop-tabs-titlen.panel-heading,
html body .shop-tabs-titlen.panel-heading {
    /* Nền Gradient Xanh Lá tươi mát, sang trọng & nổi bật */
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    background-color: #10b981 !important;
    /* Chữ màu trắng tinh, phóng to font chữ rõ ràng */
    color: #ffffff !important;
    font-size: 25px !important; /* Tăng cỡ chữ lớn hơn các ô con */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    /* Mở rộng kích thước ô hết mức có thể */
    padding: 10px 25px !important; /* Tăng padding để ô tiêu đề bự ra */
    border-radius: 8px !important; /* Bo góc vuông nhẹ cho tiêu đề cứng cáp, bự hơn dạng pill */
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    border: none !important;
    margin-top: 25px !important; /* Đẩy cách xa lề trên */
    margin-bottom: 15px !important;
    height: auto !important;
    line-height: normal !important;
    /* Đổ bóng 3D Xanh Lá cực ấn tượng */
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
    transition: all 0.3s ease !important;
}

/* 2. Hiệu ứng rê chuột nhích nhẹ */
html body .panel-default > .panel-heading:hover,
html body .panel-heading:hover,
html body h2.shop-tabs-titlen.panel-heading:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.65) !important;
}

/* 3. Đồng bộ bo góc cho khung thương hiệu */
html body .panel-default:has(figure.image) > .panel-heading,
div[class*="panel-heading"] {
    border-radius: 8px !important;
}
/* =========================================================
   CHỈ ÁP DỤNG BỘ LỌC TỐI ƯU TRÊN ĐIỆN THOẠI (MEDIA QUERY MOBILE)
   ========================================================= */
@media (max-width: 767px) {

    /* 1. Xiết chặt khoảng lùi khung tổng */
    html body .panel-filter-product,
    html body .filter_product,
    html body .panel.panel-default.panel-filter-product {
        background-color: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 10px 10px 6px 10px !important;
        margin-bottom: 15px !important;
        position: relative !important;
    }

    /* 2. Căn các cột dàn ngang & cho phép cuộn nhẹ nếu màn quá hẹp */
    html body .panel-filter-product .panel-body,
    html body .filter_product .panel-body {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* 3. Phân chia tỷ lệ cột: Cột Thương hiệu rộng hơn chút để không vỡ chữ */
    html body .panel-filter-product .panel-body > div:nth-child(1),
    html body .filter_product .panel-body > div:nth-child(1) {
        flex: 1.3 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    html body .panel-filter-product .panel-body > div:nth-child(2),
    html body .filter_product .panel-body > div:nth-child(2),
    html body .panel-filter-product .panel-body > div:nth-child(3),
    html body .filter_product .panel-body > div:nth-child(3) {
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    /* 4. CẤM RỚT DÒNG (Cố định chữ nằm trên 1 hàng chuẩn đẹp) */
    html body .panel-filter-product label.checkbox-inline,
    html body .filter_product label.checkbox-inline,
    html body .panel-filter-product div.checkbox,
    html body .filter_product div.checkbox {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important; /* Không cho nhảy xuống hàng */
        word-break: keep-all !important;
        margin: 3px 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #10b981 !important;
        cursor: pointer !important;
    }

    /* 5. Cố định kích thước ô checkbox */
    html body .panel-filter-product input[type="checkbox"],
    html body .filter_product input[type="checkbox"] {
        margin: 0 4px 0 0 !important;
        flex-shrink: 0 !important;
        accent-color: #10b981 !important;
    }

    /* 6. THU GỌN NÚT "XÓA BỘ LỌC" SÁT CHÂN BÊN PHẢI */
    html body .panel-filter-product .text-right,
    html body .filter_product .text-right,
    html body .panel-filter-product div[class*="margin-top"],
    html body .filter_product div[class*="margin-top"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 4px !important;
        padding-top: 4px !important;
        border-top: none !important;
        clear: both !important;
    }

    /* Kiểu dáng nút Xóa bộ lọc nhỏ gọn */
    html body .panel-filter-product a.btn,
    html body .filter_product a.btn,
    html body .panel-filter-product .text-right a,
    html body .filter_product .text-right a {
        padding: 2px 8px !important;
        font-size: 11px !important;
        line-height: normal !important;
    }
}
/* Styling & Nổi bật nút "Xem tất cả" */
a.shop-tabs-viewall {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Kích thước & Font chữ */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 6px 16px !important;
    border-radius: 20px !important; /* Nút bo tròn dạng viên thuốc */
    
    /* Màu sắc gradient nổi bật (Cam - Đỏ) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    
    /* Đổ bóng & Hiệu ứng chuyển động */
    box-shadow: 0 4px 10px rgba(255, 75, 43, 0.35) !important;
    transition: all 0.3s ease !important;
    
    /* Hiệu ứng nhịp đập tỏa sáng liên tục */
    animation: viewall-pulse 2s infinite !important;
}

/* Thêm dấu mũi tên nhỏ phía sau chữ */
a.shop-tabs-viewall::after {
    content: " \279C"; /* Mũi tên ➔ */
    margin-left: 6px;
    font-size: 13px;
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi rê chuột vào (Hover) */
a.shop-tabs-viewall:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 15px rgba(255, 75, 43, 0.5) !important;
    color: #ffffff !important;
}

a.shop-tabs-viewall:hover::after {
    transform: translateX(4px); /* Mũi tên trượt nhẹ sang phải */
}

/* Animation tạo hiệu ứng tỏa vòng sáng xung quanh nút */
@keyframes viewall-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 75, 43, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
    }
}