/* ==========================================================================
   MỤC LỤC - SAN-PHAM.CSS (CHUẨN MATERIAL DESIGN 3)
   1. Bố cục chung & Thẻ sản phẩm (Shop/Archive/Product Card)
   2. Trang chi tiết sản phẩm & Product Gallery
   3. Khung Giá & Auto Voucher 
   4. Khung Hậu mãi & Khuyến mãi 
   5. Slider M3 Category Grid 
   6. Slider M3 Related Products
   7. Các tiện ích: Tag, Chip, Nút Zalo/Hotline, Nút Readmore, Quà tặng
   8. Các thẻ Note, Cảnh báo, Sidebar, Danh sách, Bộ lọc
   ========================================================================== */

/* Ẩn các thành phần thừa mặc định */
.product-info form.cart .single_variation_wrap .woocommerce-variation-add-to-cart,
.product-info form.cart .reset_variations,
.product-info form.cart .single_variation_wrap,
.product-info form.cart .reset_variations_alert,
.product-info form.cart .ux-quantity,
.product-info form.cart .single_add_to_cart_button,
.yikes-custom-woo-tab-title,
.product-main .product-gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .flickity-button,
form.woocommerce-ordering select.orderby,
.category-filtering.category-filter-row {
    display: none !important;
}

@media (max-width: 849px) {
    .category-filtering.category-filter-row {
        display: none !important;
    }
}

/* ==========================================================================
   1. BỐ CỤC CHUNG & THẺ SẢN PHẨM (PRODUCT CARDS M3)
   ========================================================================== */
.tax-product_cat #wrapper,
.tax-product_cat #main {
    background-color: var(--md-sys-color-surface-container);
}

.widget>ul>li+li {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.widget .current-cat>a {
    color: var(--md-sys-color-primary);
    font: var(--md-sys-typescale-label-large);
}

.page-title-inner {
    padding-top: 10px;
    min-height: 40px;
}

.shop-page-title {
    margin-bottom: 0px;
}

/* Thẻ Card Sản phẩm (Elevated Card M3) */
.product-small .col-inner {
    border-radius: var(--md-sys-shape-corner-md);
    background: var(--md-sys-color-surface);
    border: 0.5px solid var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-level-1);
    transition: transform var(--md-sys-duration-short) var(--md-sys-motion-standard), box-shadow var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

.product-small .col-inner:hover {
    box-shadow: var(--md-sys-elevation-level-2);
    transform: translateY(-2px);
}

.product-small .box-image {
    border-radius: var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 0;
    background-color: transparent !important;
}

.product-small .box-text {
    background-color: transparent;
    border-radius: 0 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md);
    padding: 12px;
}

/* Ép ảnh rõ nét, tắt Flash/Bg ảo của Flatsome */
.has-hover .box-image img,
.has-hover:hover .box-image img,
.product-small .box-image:hover img,
.product-small .box-image:hover a {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.product-small .box-image::before,
.product-small .box-image::after,
.product-small .box-image a::before,
.product-small .box-image a::after,
.product-small .box-image .overlay,
.product-small .box-image .bg,
.product-small .box-image .image-tools:empty {
    display: none !important;
}

/* PHÂN TRANG (M3 PAGINATION) */
.nav-pagination>li>a,
.nav-pagination>li>span {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px !important;
    border-radius: var(--md-sys-shape-corner-sm);
    border: 1px solid var(--md-sys-color-outline-variant);
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

.nav-pagination>li>span.current {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border-color: var(--md-sys-color-primary) !important;
}

.nav-pagination>li>a:hover {
    background-color: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

/* ==========================================================================
   2. TRANG DANH MỤC
   ========================================================================== */

.box-text .product-title a,
.product_list_widget .product-title {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface) !important;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media screen and (max-width: 850px) {

    .box-text .product-title a,
    .product_list_widget .product-title {
        font: var(--md-sys-typescale-label-medium);
    }
}

/* ==========================================================================
   3. TRANG CHI TIẾT SẢN PHẨM & PRODUCT GALLERY
   ========================================================================== */
.product-main {
    padding: 0;
}
.product-info {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.product .product-main .product-info .product-title,
h1.product-title,
.entry-title {
    font: var(--md-sys-typescale-headline-small) !important;
    color: var(--md-sys-color-on-surface) !important;
    margin: 0 0 12px 0 !important;
}

@media screen and (max-width: 850px) {
    .product .product-main .product-info .product-title,
    h1.product-title,
    .entry-title {
        font: var(--md-sys-typescale-headline-small) !important;
        margin: 12px 0 8px 0 !important;
    }
}

.product-summary .woocommerce-product-rating .star-rating {
    margin: 0 4px 0 0 !important;
    color: var(--md-sys-color-warning);
}

.product-footer .product-page-sections .product-section {
    border-top: 0px solid transparent;
}

.product-info .woocommerce-variation-add-to-cart,
.product-info form.cart {
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   PRODUCT GALLERY & THUMBNAILS (M3 MATERIAL)
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    border-radius: var(--md-sys-shape-corner-lg) !important;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a:focus-visible {
    outline: none !important;
}

.product-thumbnails.thumbnails .col {
    padding: 4px 4px 8px 4px !important;
}

.product-thumbnails.thumbnails .col img {
    border-radius: var(--md-sys-shape-corner-md) !important;
    opacity: 0.5 !important;
    transition: all var(--md-sys-duration-short) ease !important;
    border: 2px solid transparent !important;
    padding: 2px !important;
    background-color: var(--md-sys-color-surface);
    box-sizing: border-box !important;
}

.product-thumbnails.thumbnails .col:not(.is-nav-selected) a:hover img {
    opacity: 0.8 !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

.product-thumbnails.thumbnails .is-nav-selected img {
    opacity: 1 !important;
    border-color: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-surface-container-high);
}

.product-thumbnails .flickity-prev-next-button {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    width: 24px !important;
    height: 32px !important;
    border-radius: var(--md-sys-shape-corner-md) !important;
    box-shadow: var(--md-sys-elevation-level-1) !important;
    opacity: 1 !important;
}

.product-thumbnails .flickity-prev-next-button.previous {
    left: -4px !important;
    border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important;
}

.product-thumbnails .flickity-prev-next-button.next {
    right: -4px !important;
    border-radius: var(--md-sys-shape-corner-md) 0 0 var(--md-sys-shape-corner-md) !important;
}

.product-thumbnails .flickity-prev-next-button:hover {
    background: var(--md-sys-color-primary) !important;
}

.product-thumbnails .flickity-prev-next-button:hover svg {
    fill: var(--md-sys-color-on-primary) !important;
}

.product-thumbnails.thumbnails .col a {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block;
    overflow: visible !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-thumbnails.thumbnails .is-nav-selected a,
.product-thumbnails.thumbnails .col a:hover {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================================================
   3. KHUNG GIÁ & AUTO VOUCHER 
   ========================================================================== */
.out-of-stock-label,
.box-image .out-of-stock-label {
    background: hsla(0, 0%, 100%, .6) !important;
    font: var(--md-sys-typescale-body-medium) !important;
    color: var(--md-sys-color-secondary) !important;
    text-transform: capitalize !important;
    padding: 8px 0;
}

.ctp-out-of-stock,
.ctp-free {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-secondary);
}

.product-small .box-text .price-wrapper {
    margin-top: 6px;
}

.product-small .box-text .price del {
    display: block;
}

.product-small .box-text .price-wrapper .price del span.amount {
    color: var(--md-sys-color-secondary);
    font: var(--md-sys-typescale-price-del-small) !important;
    text-decoration: line-through;
    text-decoration-color: var(--md-sys-color-secondary);
}

.product-small .box-text .price-wrapper .price span.amount {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-price-medium) !important;
}

@media (max-width: 768px) {
    .product-small .box-text .price-wrapper .price span.amount {
        font: var(--md-sys-typescale-price-small) !important;
    }
}

.ctp-price-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ctp-active-price {
    text-decoration: none;
    background: transparent;
}

.ctp-loop-discount {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    font: var(--md-sys-typescale-label-small);
    padding: 2px 6px;
    border-radius: var(--md-sys-shape-corner-xs);
    border: 1px solid var(--md-sys-color-error);
}

.caothienphat-price-sold-box {
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.caothienphat-price-sold-box p.price {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.caothienphat-price-sold-box p.price del {
    margin-left: 4px;
    color: var(--md-sys-color-secondary) !important;
    font: var(--md-sys-typescale-price-large);
}

.caothienphat-price-sold-box .price-title {
    margin: 0;
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 8px;
}

.caothienphat-price-sold-box .price-title .ctp-discount-badge {
    color: var(--md-sys-color-on-error) !important;
    background: var(--md-sys-color-error);
    border-radius: var(--md-sys-shape-corner-sm);
    padding: 0px 6px;
}

.ctp-price-sold-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ctp-auto-code-box {
    background: var(--md-sys-color-surface);
    border: 1px dashed var(--md-sys-color-error);
    border-radius: var(--md-sys-shape-corner-sm);
    padding: 12px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ctp-auto-code-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ctp-auto-code-title {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-secondary);
}

.ctp-auto-code-value {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-error);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ctp-auto-code-expiry {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--md-sys-color-surface-container);
    padding: 4px 8px;
    border-radius: var(--md-sys-shape-corner-xs);
    width: fit-content;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.ctp-auto-code-expiry strong {
    color: var(--md-sys-color-error);
    font-variant-numeric: tabular-nums;
}

.ctp-copy-btn {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border: none;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--md-sys-shape-corner-md) !important;
    font: var(--md-sys-typescale-label-medium);
    cursor: pointer;
    text-transform: uppercase;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy);
    box-shadow: var(--md-sys-elevation-level-0);
    margin: 0;
    align-self: center;
}

.ctp-copy-btn:hover {
    box-shadow: var(--md-sys-elevation-level-1);
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.ctp-copy-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.urgency-pulse {
    animation: timerPulse 1.5s infinite;
}

@keyframes timerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
        color: var(--md-sys-color-primary);
    }
}

@media (max-width: 768px) {
    .caothienphat-price-sold-box {
        padding: 16px;
    }

    .ctp-price-sold-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ctp-auto-code-box {
        flex-direction: column;
        align-items: stretch;
    }

    .ctp-copy-btn {
        width: 100%;
    }
}

.ctp-promo-tag {
    display: block;
    margin-top: 6px;
    margin-bottom: 4px;
    clear: both;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-error);
    width: fit-content;
    padding: 2px 0px;
}

/* ==========================================================================
   4. BOX PRODUCT PROMOTIONS (KHUNG HẬU MÃI & KHUYẾN MÃI)
   ========================================================================== */
.box-product-promotion {
    overflow: hidden;
    width: 100%;
    padding: 0 0 16px 0 !important;
    transition: box-shadow var(--md-sys-duration-short) ease;
}

.box-product-promotion:hover {
    box-shadow: var(--md-sys-elevation-level-2);
}

.box-product-promotion-header {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 48px;
}

.box-product-promotion-header .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    fill: var(--md-sys-color-error);
}

.box-product-promotion-header p {
    font: var(--md-sys-typescale-title-small);
    margin: 0;
}

.box-product-promotion-content {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.box-product-promotion-content .ctp-promo-group {
    margin-top: 6px;
}

.box-product-promotion-content .box-product-promotion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.box-product-promotion-content .box-product-promotion-number {
    border-radius: var(--md-sys-shape-corner-full);
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-error);
    background-color: var(--md-sys-color-error);
    flex-shrink: 0;
}

.box-product-promotion-content .box-product-promotion-detail {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface);
    margin: 0;
    flex: 1;
    transition: color var(--md-sys-duration-short) ease;
}

.box-product-promotion-content .box-product-promotion-detail:hover {
    color: var(--md-sys-color-primary);
}

.box-product-promotion a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.box-product-promotion a:hover {
    text-decoration: underline;
}

.woocommerce-product-sold {
    color: var(--md-sys-color-on-primary-container) !important;
    font: var(--md-sys-typescale-label-small);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-sm);
    padding: 4px 6px;
    width: fit-content;
}

.product-small .woocommerce-product-sold {
    color: var(--md-sys-color-on-surface) !important;
    background: var(--md-sys-color-surface-container-high);
}


/* ==========================================================================
   5. SLIDER M3 CATEGORY GRID 
   ========================================================================== */
.ctp-m3-category-grid {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-md);
    box-shadow: var(--md-sys-elevation-level-1);
    padding: 16px 0 0 0;
    overflow: hidden;
    position: relative;
}

.ctp-m3-category-grid .category-header {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    padding: 0 16px;
    margin-bottom: 6px;
    text-transform: capitalize;
}

.ctp-m3-category-grid .carousel-container {
    position: relative;
    width: 100%;
}

.ctp-m3-category-grid .carousel-track {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 10);
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ctp-m3-category-grid .carousel-track::-webkit-scrollbar {
    display: none;
}

.ctp-m3-category-grid .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 8px;
    background-color: transparent;
    transition: background-color var(--md-sys-duration-short) ease;
    scroll-snap-align: start;
    text-decoration: none;
}

.ctp-m3-category-grid .category-item:hover {
    background-color: var(--md-sys-color-surface-container);
}

.ctp-m3-category-grid .img-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform var(--md-sys-duration-short) var(--md-sys-motion-snappy), border-color var(--md-sys-duration-short) ease;
}

.ctp-m3-category-grid .category-item:hover .img-wrapper {
    transform: scale(1.05);
    border-color: var(--md-sys-color-primary);
}

.ctp-m3-category-grid .img-wrapper img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.ctp-m3-category-grid .category-title {
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Điều hướng M3 */
.ctp-m3-category-grid .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--md-sys-color-surface-container-high) !important;
    width: 24px !important;
    height: 32px !important;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: var(--md-sys-elevation-level-1);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--md-sys-duration-short) ease;
}

.ctp-m3-category-grid .carousel-container:hover .nav-btn.show {
    opacity: 1;
    visibility: visible;
}

.ctp-m3-category-grid .prev-btn {
    left: 0;
    border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important;
}

.ctp-m3-category-grid .next-btn {
    right: 0;
    border-radius: var(--md-sys-shape-corner-md) 0 0 var(--md-sys-shape-corner-md) !important;
}

.ctp-m3-category-grid .nav-btn:hover {
    background: var(--md-sys-color-primary) !important;
}

.ctp-m3-category-grid .nav-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--md-sys-color-on-surface) !important;
    transition: fill var(--md-sys-duration-short) ease;
}

.ctp-m3-category-grid .nav-btn:hover svg {
    fill: var(--md-sys-color-on-primary) !important;
}

@media (max-width: 768px) {
    .ctp-m3-category-grid .carousel-track {
        grid-auto-columns: calc(100% / 4.5);
    }

    .ctp-m3-category-grid {
        margin: 16px 0;
        padding: 12px 0 0 0;
    }

    .ctp-m3-category-grid .category-item {
        padding: 12px 4px;
    }

    .ctp-m3-category-grid .img-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
    }

    .ctp-m3-category-grid .category-title {
        font: var(--md-sys-typescale-label-small);
    }

    .ctp-m3-category-grid .nav-btn.show {
        opacity: 0.9;
        visibility: visible;
    }
}


/* ==========================================================================
   7. CÁC TIỆN ÍCH: CHIPS, TAGS, NÚT ZALO/HOTLINE, READMORE, QUÀ TẶNG
   ========================================================================== */

/* Swatches - M3 Chips cho Biến thể */
.ux-swatch--label {
    border-radius: var(--md-sys-shape-corner-sm) !important;
    background: var(--md-sys-color-surface) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    color: var(--md-sys-color-on-surface) !important;
    font: var(--md-sys-typescale-label-large) !important;
    padding: 0 16px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--md-sys-duration-short) ease !important;
}

.ux-swatch--label:hover {
    background: var(--md-sys-color-surface-container-high) !important;
}

.variations_form .ux-swatch.selected {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border-color: transparent !important;
}

/* Chips Orderby Filter */
.woocommerce-ordering {
    max-width: 100%;
}

/* Badges: YITH & Bestseller & New Bubble */
.bestseller-tag {
    position: absolute;
    top: -10px;
    left: 8px;
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    font: var(--md-sys-typescale-label-small);
    padding: 2px 6px;
    border-radius: var(--md-sys-shape-corner-xs);
    z-index: 10;
    box-shadow: var(--md-sys-elevation-level-1);
    white-space: nowrap;
}

.badge-container {
    margin: 4px 0 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.badge-container .badge {
    height: auto;
    width: auto;
    margin: 0 !important;
    min-height: 24px !important;
}

.badge-container .badge-inner,
.yith-wcbm-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error) !important;
    background-color: var(--md-sys-color-error) !important;
    font: var(--md-sys-typescale-label-small) !important;
    font-style: normal !important;
    border-radius: var(--md-sys-shape-corner-xs) !important;
    padding: 2px 8px !important;
    margin: 4px 0 0 0 !important;
    height: auto !important;
    min-height: 24px !important;
    box-shadow: var(--md-sys-elevation-level-1) !important;
    letter-spacing: 0.5px;
}

.yith-wcbm-badge {
    color: var(--md-sys-color-error) !important;
    background-color: var(--md-sys-color-surface) !important;
}

.badge-container .new-bubble {
    background-color: var(--md-sys-color-surface) !important;
    color: var(--md-sys-color-error) !important;
    border: 1px solid var(--md-sys-color-error) !important;
    box-shadow: none !important;
}

@media screen and (max-width: 45rem) {
    .badge-container .new-bubble {
        font-size: 10px !important;
    }
}

.product-small .row-collapse .badge-circle,
.product-small .badge-circle,
.badge-outline,
.product .product-main .row-collapse .badge-circle,
.product .product-main .badge-circle,
.product .product-main .yith-wcbm-badge {
    margin-left: 0 !important;
}

.product .product-main .yith-wcbm-badge {
    margin-bottom: 8px !important;
}

/* Nút Zalo / Hotline Contact Bar (M3 Fix Layout) */
.ctp-m3-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 !important;
    width: 100%;
    flex-wrap: wrap;
}

.ctp-m3-contact .zalo-chat-button {
    flex: 1;
    min-width: 0;
    background-color: var(--zalo-color) !important;
    height: auto;
    overflow: hidden;
    gap: 0;
    padding: 0 10px !important;
}

.ctp-m3-contact .zalo-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ctp-m3-contact .zalo-badge-wrapper svg {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ctp-m3-contact .zalo-chat-text {
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(12px, 1px, 14px);
}

.ctp-m3-contact .separator {
    flex: 0 0 auto;
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-secondary);
    white-space: nowrap;
}

.ctp-m3-contact .call-button-mini {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctp-m3-contact .call-button-mini svg,
.ctp-m3-contact .call-button-mini img {
    width: 24px;
    height: auto;
    /* fill: var(--md-sys-color-on-surface); */
    transition: all var(--md-sys-duration-short) ease;
}

@media (max-width: 768px) {
    .ctp-m3-contact .zalo-chat-text {
        font: var(--md-sys-typescale-label-medium);
    }

    .ctp-m3-contact .separator {
        display: none;
    }
}

/* SCROLL HORIZONTAL CATEGORY (M3 CHIPS & LISTS) */
.scrolling_inner.scroll-quicklink {
    padding-bottom: 4px;
}

.lst-quicklink,
.lst-quickfilter {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.lst-quicklink::-webkit-scrollbar,
.lst-quickfilter::-webkit-scrollbar {
    display: none;
}

p.quick-link-title {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font: var(--md-sys-typescale-title-small);
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.box-quicklink__item {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px !important;
    border-radius: var(--md-sys-shape-corner-sm);
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-secondary) !important;
    font: var(--md-sys-typescale-label-large);
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--md-sys-duration-short) ease;
}

.box-quicklink__item svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: currentColor;
    flex-shrink: 0;
}

.box-quicklink__item:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface) !important;
}

/* Voucher Item */
.box-voucher__item {
    display: flex;
    align-items: center;
    height: 160px;
    margin: 10px 8px 8px 0;
    padding: 2px 10px 2px 2px !important;
    vertical-align: top;
    color: var(--text-base) !important;
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-md);
    box-shadow: var(--md-sys-elevation-level-1);
}

/* READ MORE / READ LESS (M3 TONAL BUTTON) */
.des-less-height {
    height: 1500px !important;
}

.des-full-height {
    height: 100% !important;
}

.des-less-height,
.des-full-height {
    position: relative;
    overflow: hidden;
    transition: height var(--md-sys-duration-long) var(--md-sys-motion-standard);
}

.custom-readmore,
.custom-readless {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 0;
    z-index: 10;
}

.custom-readmore {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 200px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--md-sys-color-surface) 65%, var(--md-sys-color-surface) 100%);
    pointer-events: none;
}

.custom-readmore a {
    pointer-events: auto;
}

.custom-readless {
    min-height: 56px;
    background: var(--md-sys-color-surface);
}

.custom-readmore a,
.custom-readless a {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container);
    padding: 0 28px;
    height: 40px;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--md-sys-elevation-level-0);
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy);
}

.custom-readmore a:hover,
.custom-readless a:hover {
    transform: translateY(-1px);
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level-1);
}

.custom-readmore a:after,
.custom-readless a:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: inline-block;
}

.custom-readmore a:after {
    border-top: 6px solid currentColor;
    margin-top: 4px;
}

.custom-readless a:after {
    border-bottom: 6px solid currentColor;
    margin-bottom: 4px;
}

#des-show-more {
    display: none;
}

/* Loop Gift Icon lơ lửng */
.loop-gift-badge-wrapper {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 99;
}

.loop-gift-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: var(--md-sys-color-warning-gradient);
    border-radius: var(--md-sys-shape-corner-sm, 8px) 0 var(--md-sys-shape-corner-sm, 8px) 0;
    box-shadow: var(--md-sys-elevation-level-2);
    animation: m3PulseGift 2s infinite var(--md-sys-motion-easing-standard);
    transform-origin: center;
}

.loop-gift-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: var(--md-sys-color-on-primary, #ffffff);
}

@keyframes m3PulseGift {
    0% {
        box-shadow: var(--md-sys-elevation-level-2), 0 0 0 0 rgba(235, 0, 41, 0.6);
        transform: scale(1);
    }

    70% {
        box-shadow: var(--md-sys-elevation-level-2), 0 0 0 8px rgba(235, 0, 41, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: var(--md-sys-elevation-level-2), 0 0 0 0 rgba(235, 0, 41, 0);
        transform: scale(1);
    }
}


/* ==========================================================================
   8. CÁC THẺ NOTE, CẢNH BÁO, SIDEBAR, DANH SÁCH & BỘ LỌC
   ========================================================================== */

/* CÁC THẺ NOTE, CẢNH BÁO, DANH SÁCH & COUPONS */
.offer-box {
    border: 1px solid var(--md-sys-color-error);
    border-radius: var(--md-sys-shape-corner-md);
    background-color: var(--md-sys-color-error-container);
}

.offer-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-error-container);
}

.offer-content li {
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-error-container);
}

.offer-content li::before {
    color: var(--md-sys-color-success);
}

.coupon-card {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-corner-md);
    border: 1px dashed var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level-1);
}

.coupon-card .coupon-title {
    font: var(--md-sys-typescale-title-medium);
}

.coupon-card p {
    font: var(--md-sys-typescale-body-medium);
}

.coupon-card .coupon-value {
    color: var(--md-sys-color-primary);
    font: var(--md-sys-typescale-display-small);
}

.coupon-row-1 {
    border: 1px dashed var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
}

.coupon-row-2 {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.circle1,
.circle2 {
    background: var(--md-sys-color-surface);
}

.discount_coupon_wrapper .discount_coupon .option .text {
    background-color: var(--md-sys-color-error);
    font: var(--md-sys-typescale-label-large);
}

ul li.bullet-checkmark:before,
ul li.bullet-arrow:before,
ul li.bullet-star:before {
    color: var(--md-sys-color-primary);
}

ul li.checklist:before {
    color: var(--md-sys-color-primary);
}

ul li.pros:before {
    color: var(--md-sys-color-success);
}

ul li.cons:before {
    color: var(--md-sys-color-error);
}

.note {
    background: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container) !important;
    border-radius: var(--md-sys-shape-corner-md);
}

.note_red {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-radius: var(--md-sys-shape-corner-md);
}

.note-border,
.note-product {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-md);
}

.note-shadow {
    background: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-level-1);
    border-radius: var(--md-sys-shape-corner-md);
}

.note .title {
    font: var(--md-sys-typescale-title-medium);
}


/*****************************************************************
    SIDEBAR DANH MỤC & THƯƠNG HIỆU (M3 NAVIGATION DRAWER & CHIPS)
 *****************************************************************/
.product-main .row > div,
.category-page-row > div {
    padding: 0 10px 10px !important;
}
.product-main .row > div:nth-child(2) {
    border-left: 0px solid #ececec !important;
}
#shop-sidebar .widget,
#product-sidebar .widget {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-md);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--md-sys-elevation-level-1);
}

#shop-sidebar .widget-title,
#product-sidebar .widget-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

#shop-sidebar .is-divider,
#product-sidebar .is-divider {
    display: none !important;
}

#shop-sidebar .widget_product_categories ul,
#product-sidebar .widget_product_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#shop-sidebar .widget_product_categories ul>li.cat-item,
#product-sidebar .widget_product_categories ul>li.cat-item {
    position: relative;
    display: block !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    border: none !important;
}

#shop-sidebar .widget_product_categories ul>li.cat-item>a,
#product-sidebar .widget_product_categories ul>li.cat-item>a {
    display: block;
    padding: 8px 80px 8px 8px !important;
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
    border-radius: var(--md-sys-shape-corner-full);
    transition: all var(--md-sys-duration-short) ease;
    text-decoration: none;
    width: 100%;
}

#shop-sidebar .widget_product_categories ul>li.cat-item>a:hover,
#product-sidebar .widget_product_categories ul>li.cat-item>a:hover {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

#shop-sidebar .widget_product_categories ul>li.current-cat>a,
#shop-sidebar .widget_product_categories ul>li.current-cat-parent>a,
#product-sidebar .widget_product_categories ul>li.current-cat>a,
#product-sidebar .widget_product_categories ul>li.current-cat-parent>a {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 600;
}

#shop-sidebar .widget_product_categories ul>li.cat-item>.count,
#product-sidebar .widget_product_categories ul>li.cat-item>.count {
    position: absolute;
    top: 10px;
    right: 48px;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-secondary);
    background-color: var(--md-sys-color-surface-container-high);
    padding: 2px 8px;
    border-radius: var(--md-sys-shape-corner-full);
    pointer-events: none;
    line-height: normal !important;
    opacity: 1 !important;
}

#shop-sidebar .widget_product_categories ul>li.cat-item:not(.has-child)>.count,
#product-sidebar .widget_product_categories ul>li.cat-item:not(.has-child)>.count {
    right: 16px;
}

#shop-sidebar .widget_product_categories ul>li.cat-item:not(.has-child)>a,
#product-sidebar .widget_product_categories ul>li.cat-item:not(.has-child)>a {
    padding-right: 56px !important;
}

#shop-sidebar .widget_product_categories ul>li.cat-item>.toggle,
#product-sidebar .widget_product_categories ul>li.cat-item>.toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: transparent;
    color: var(--md-sys-color-secondary);
    border: none;
    box-shadow: none;
    transition: background var(--md-sys-duration-short) ease;
    z-index: 10;
}

#shop-sidebar .widget_product_categories ul>li.cat-item>.toggle:hover,
#product-sidebar .widget_product_categories ul>li.cat-item>.toggle:hover {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

#shop-sidebar .widget_product_categories ul>li.cat-item>.toggle i,
#product-sidebar .widget_product_categories ul>li.cat-item>.toggle i {
    font-size: 1.2em;
    transition: transform var(--md-sys-duration-short) ease;
}

#shop-sidebar .widget_product_categories ul>li.current-cat>.count,
#shop-sidebar .widget_product_categories ul>li.current-cat-parent>.count,
#product-sidebar .widget_product_categories ul>li.current-cat>.count,
#product-sidebar .widget_product_categories ul>li.current-cat-parent>.count {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#shop-sidebar .widget_product_categories ul>li.current-cat>.toggle,
#shop-sidebar .widget_product_categories ul>li.current-cat-parent>.toggle,
#product-sidebar .widget_product_categories ul>li.current-cat>.toggle,
#product-sidebar .widget_product_categories ul>li.current-cat-parent>.toggle {
    color: var(--md-sys-color-primary);
}

#shop-sidebar .widget_product_categories ul.children,
#product-sidebar .widget_product_categories ul.children {
    margin: 4px 0 8px 10px !important;
    padding-left: 8px !important;
    border-left: 2px solid var(--md-sys-color-surface-container-high) !important;
    width: calc(100% - 10px) !important;
    display: none;
}

#shop-sidebar .widget_product_categories ul>li.cat-item.active>ul.children,
#product-sidebar .widget_product_categories ul>li.cat-item.active>ul.children {
    display: block !important;
}

#shop-sidebar .widget_product_categories ul.children>li>a,
#product-sidebar .widget_product_categories ul.children>li>a {
    font: var(--md-sys-typescale-body-small);
    padding: 10px 48px 10px 10px !important;
    border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important;
}

#shop-sidebar .widget_product_categories ul.children>li>.count,
#product-sidebar .widget_product_categories ul.children>li>.count {
    top: 8px;
    right: 16px;
}

#shop-sidebar .widget_product_tag_cloud .tagcloud,
#product-sidebar .widget_product_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

#shop-sidebar .widget_product_tag_cloud .tagcloud a,
#product-sidebar .widget_product_tag_cloud .tagcloud a {
    font: var(--md-sys-typescale-body-small) !important;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 4px 6px;
    border-radius: var(--md-sys-shape-corner-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-duration-short) ease;
    text-transform: capitalize;
    text-decoration: none;
}

#shop-sidebar .widget_product_tag_cloud .tagcloud a:hover,
#product-sidebar .widget_product_tag_cloud .tagcloud a:hover {
    background-color: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level-1);
}

/* WIDGET LỌC (M3 CHIP GROUP) */
.widget-filter-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    margin: 8px 0 16px 0;
}

.filter_wrapper {
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter_floor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 10;
}

.filter_wrapper .filter_floor .filter_title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-small);
    margin: 0 12px 0 0 !important;
    min-width: max-content;
}

.filter_wrapper .filter_floor .facetwp-facet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    flex: 1;
}

.filter_wrapper .filter_floor .facetwp-facet .facetwp-checkbox,
.filter_wrapper .filter_floor .facetwp-facet .facetwp-radio {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px !important;
    margin: 0 !important;
    text-transform: capitalize;
    cursor: pointer;
    transition: all var(--md-sys-duration-short) ease;
    user-select: none;
    font: var(--md-sys-typescale-label-medium);
    border-radius: var(--md-sys-shape-corner-sm);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-secondary);
}

.filter_wrapper .filter_floor .facetwp-facet .facetwp-counter {
    margin-left: 4px;
    font: var(--md-sys-typescale-label-medium);
    opacity: 0.8;
}

.filter_wrapper .filter_floor .facetwp-facet .facetwp-checkbox:hover,
.filter_wrapper .filter_floor .facetwp-facet .facetwp-radio:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

.filter_wrapper .filter_floor .facetwp-facet .facetwp-radio.checked,
.filter_wrapper .filter_floor .facetwp-facet .facetwp-checkbox.checked {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container) !important;
    border-color: transparent;
}

@media (max-width: 768px) {
    .filter_wrapper .filter_floor .filter_title {
        width: 100%;
        margin-bottom: 8px !important;
    }

    .filter_wrapper .filter_floor .facetwp-facet {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100% !important;
        padding-bottom: 4px;
    }

    .filter_wrapper .filter_floor .facetwp-facet::-webkit-scrollbar {
        display: none;
    }

    .filter_wrapper .filter_floor .facetwp-facet .facetwp-checkbox,
    .filter_wrapper .filter_floor .facetwp-facet .facetwp-radio {
        flex-shrink: 0;
    }
}

.ctp-m3-related-wrap .flickity-viewport {
    padding-top: 1px !important;
}