.box-pageitem {
    display: block;
    width: 100%;
}

.product-list-filterfeatured .product-list {
    background-color: #fff;
    height: 360px;
}


    .product-list-filterfeatured .product-list .product-promotionshort-box,
    .product-list-filterfeatured .product-list .product-promotionshort {
        display: none;
    }

    .product-list-filterfeatured .product-list .product-addToCart {
        background-color: #C5232B !important;
        color: #fff !important;
        border-radius: 5px;
        display: block;
        width: fit-content;
        margin: 0 auto;
        text-align: center;
        padding: 5px 15px;
        text-decoration: none;
        font-weight: bold;
    }

.box-pageitem {
    display: inline;
}

    .box-pageitem .cuspage-box.cuspage-box-filter {
        background-repeat: no-repeat;
        background-size: cover;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

.box-i-2 .cuspage-box.cuspage-box-filter {
    background-image: url(lp/bg-lp-2.png);
}

.box-i-3 .cuspage-box.cuspage-box-filter {
    background-image: url(lp/bg-lp-3.png);
}

.box-i-4 .cuspage-box.cuspage-box-filter {
    background-image: url(lp/bg-lp-4.png);
}

.box-i-5 .cuspage-box.cuspage-box-filter {
    background-image: url(lp/bg-lp-5.png);
}

.cuspage-box-50-1 {
    background-image: url(lp/bg-lp-6.png);
}

.cuspage-box-50-2 {
    background-image: url(lp/bg-lp-7.png);
}

.box-i-8 .cuspage-box.cuspage-box-filter {
    background-image: url(lp/bg-lp-8.png);
}

.cuspage-box.cuspage-box-filter .cuspage-h h2 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 20px;
    margin: 4px 0 6px 0;
}


.cuspage-box.cuspage-box-filter .product-list .card {
    height: 360px !important;
}

.product-list .card p:empty {
    display: none;
}

.cuspage-box-50-1 .product-list .card,
.cuspage-box-50-2 .product-list .card {
    height: 360px !important;
}


.cuspage-box.cuspage-box-filter .product-list .product-price-regular span.product-price-saving {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    background-color: #C5232B;
    color: #fff;
    padding: 2px 4px;
    font-size: 12px;
}

.cuspage-box.cuspage-box-filter .product-list .product-attributes {
    display: none !important;
}

.cuspage-box.cuspage-box-filter .com-product-list-seemore {
    margin: 0;
    padding: 0;
    height: 40px;
    display: flex;
}
/*.cuspage-box-cate*/
.cuspage-box-cate {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #ff0000;
}

    .cuspage-box-cate .cuspage-h h2 {
        color: #fff;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 24px;
        margin: 4px 0 10px 0;
    }

    .cuspage-box-cate .product-list {
        height: 320px;
    }
/*.cuspage-box-cd26 - box-countdown*/
.cuspage-box-cd26 {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #ff0000;
}

    .cuspage-box-cd26 .cuspage-h h2 {
        color: #fff;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 24px;
        margin: 4px 0 10px 0;
    }
/*.cuspage-box-dh26 - box-dieuhoa*/
.cuspage-box-dh26 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    position: relative;
}

    .cuspage-box-dh26 h2 {
        margin: 0;
    }

    .cuspage-box-dh26 .cuspage-product {
        width: calc(75% - 7.5px);
        order: 1;
    }

    .cuspage-box-dh26 .cuspage-fullcontent {
        width: calc(25% - 2.5px);
        order: 2;
        height: 460px;
        overflow: hidden;
        border-radius: 6px;
    }

        .cuspage-box-dh26 .cuspage-fullcontent h2,
        .cuspage-box-dh26 .cuspage-fullcontent p,
        .cuspage-box-dh26 .cuspage-fullcontent a {
            margin: 0;
            padding: 0;
            display: block;
            height: 100%;
        }

        .cuspage-box-dh26 .cuspage-fullcontent img {
            width: 100% !important;
            height: 100% !important;
            object-fit: fill;
            display: block;
        }


@media (max-width: 767px) {
    .cuspage-box.cuspage-box-filter .cuspage-h h2 {
        font-size: 16px;
        line-height: 18px;
        margin: 4px 0 5px 0;
    }

    .cuspage-box-dh26 .product-list .card {
        height: 320px !important;
    }

    .cuspage-box-dh26 .cuspage-fullcontent {
        height: auto !important;
    }

    .cuspage-box-dh26 .cuspage-product {
        width: calc(100%);
        background-color: #fff;
        border-radius: 5px;
    }

    .cuspage-box-dh26 .cuspage-fullcontent {
        width: calc(100%);
    }
}
/*.cuspage-box-dh26 - box-dieuhoa*/
/*.cuspage-box-tv26 - box-av*/

.cuspage-box-tv26 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

    .cuspage-box-tv26 h2 {
        margin: 0;
    }

    .cuspage-box-tv26 .cuspage-product {
        width: calc(75% - 7.5px);
        order: 1;
    }

    .cuspage-box-tv26 .cuspage-fullcontent {
        width: calc(25% - 2.5px);
        order: 2;
        height: 460px;
        overflow: hidden;
        border-radius: 6px;
    }

        .cuspage-box-tv26 .cuspage-fullcontent h2,
        .cuspage-box-tv26 .cuspage-fullcontent p,
        .cuspage-box-tv26 .cuspage-fullcontent a {
            margin: 0;
            padding: 0;
            display: block;
            height: 100%;
        }

        .cuspage-box-tv26 .cuspage-fullcontent img {
            width: 100% !important;
            height: 100% !important;
            object-fit: fill;
            display: block;
        }


@media (max-width: 767px) {
    .cuspage-box-tv26 .cuspage-h h2 {
        font-size: 16px;
        line-height: 16px;
        margin: 4px 0 5px 0;
    }

    .cuspage-box-tv26 .product-list .card {
        height: 320px !important;
    }

    .cuspage-box-tv26 .cuspage-fullcontent {
        height: auto !important;
    }

    .cuspage-box-tv26 .cuspage-product {
        width: calc(100%);
        background-color: #fff;
        border-radius: 5px;
    }

    .cuspage-box-tv26 .cuspage-fullcontent {
        width: calc(100%);
    }
}
/*.cuspage-box-tv26 - box-av*/
/*#box-50%-50%*/
.cuspage-box-50-1, .cuspage-box-50-2 {
    box-sizing: border-box !important;
    width: calc(50% - 5px);
    display: inline-block;
    vertical-align: top;
}

.cuspage-box-50-1 {
    margin-right: 3px;
}

.cuspage-box-50-2 {
    margin-left: 3px;
}

.cuspage-box-xemthem {
    position: relative;
}

    .cuspage-box-xemthem a.xemthem {
        position: absolute;
        right: 15px;
        top: 10px;
    }

@media (max-width: 767px) {
    .cuspage-box-50-1, .cuspage-box-50-2 {
        width: 100%;
        float: none;
    }

    .cuspage-box-50-1 {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .cuspage-box-50-2 {
        margin-left: 0;
    }
}
/*#box-50%*/
/*filter*/
/* --- Reset danh sách cơ bản --- */
ul.list-unstyle {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* --- Khung chứa tổng ngoài cùng --- border: 1px solid #e5e7eb;*/
.cuspage-ff-container {
    padding: 6px;
    background-color: #ffffff;
    border-radius: 8px 8px 0 0;
    max-width: 100%; /* Tự động co giãn theo khung chứa lớn */
}
/* Khoảng cách giữa khối 1 và khối 2 */
.cuspage-ff-group-attrs {
    margin-bottom: 8px;
}
/* Tiêu đề từng bộ lọc */
.cuspage-ff-title {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cuspage-ff-categories {
    display: flex;
    flex-wrap: wrap; /* Tự động xuống dòng nếu hết chỗ */
    gap: 6px; /* Khoảng cách giữa các nút */
}

    .cuspage-ff-categories li a {
        display: inline-block;
        padding: 3px 10px;
        font-size: 13px;
        color: #4b5563;
        background-color: #f3f4f6;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        text-decoration: none;
        user-select: none;
    }

        .cuspage-ff-categories li a.active {
            border-color: #C5232B;
            background-color: #C5232B;
            color: #fff;
        }
        /* Hover & Trạng thái được chọn (Active) */
        .cuspage-ff-categories li a:hover {
            border-color: #C5232B;
            background-color: #C5232B;
            color: #fff;
        }

            .cuspage-ff-categories li a.active span, .cuspage-ff-categories li a:hover span {
                color: #fff;
            }

    .cuspage-ff-categories li.cuspage-ff-active a {
        background-color: #fef2f2; /* Màu nền highlight đỏ nhạt */
        color: #dc2626; /* Chữ đỏ */
        border-color: #f87171; /* Viền đỏ */
        font-weight: 500;
    }
/* ==========================================
   CSS CHO BỘ LỌC THUỘC TÍNH (CUSPAGE-FF-ATTRS)
   ========================================== */
.cuspage-ff-attrs {
    display: flex;
    flex-wrap: wrap; /* Tự động xuống dòng nếu hết chỗ */
    gap: 6px; /* Khoảng cách giữa các nút */
}

    .cuspage-ff-attrs li a {
        display: inline-block;
        padding: 3px 10px;
        font-size: 13px;
        color: #4b5563;
        background-color: #f3f4f6;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        text-decoration: none;
        user-select: none;
    }

        .cuspage-ff-attrs li a.active {
            border-color: #C5232B;
            background-color: #C5232B;
            color: #fff;
        }
        /* Hover & Trạng thái được chọn (Active) */
        .cuspage-ff-attrs li a:hover {
            border-color: #C5232B;
            background-color: #C5232B;
            color: #fff;
        }

            .cuspage-ff-attrs li a.active span, .cuspage-ff-attrs li a:hover span {
                color: #fff;
            }

    .cuspage-ff-attrs li.cuspage-ff-active a {
        background-color: #fef2f2; /* Màu nền highlight đỏ nhạt */
        color: #dc2626; /* Chữ đỏ */
        border-color: #f87171; /* Viền đỏ */
        font-weight: 500;
    }
/* ==========================================
   CSS CHO BỘ LỌC THƯƠNG HIỆU (CUSPAGE-FF-BRANDS)
   ========================================== */
.cuspage-ff-brands {
    display: grid;
    /* Tự động chia cột đều nhau, tối thiểu 100px/ô, tự giãn đều theo màn hình */
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 5px;
}

    .cuspage-ff-brands li:nth-child(n+10) {
        display: none;
    }

    .cuspage-ff-brands li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        padding: 0 2px;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

        .cuspage-ff-brands li a.active {
            border-color: #C5232B;
        }
        /* Hover & Trạng thái được chọn (Active) của Logo */
        .cuspage-ff-brands li a:hover {
            border-color: #C5232B;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        /* Hover & Trạng thái được chọn (Active) của Logo */
        .cuspage-ff-brands li a:hover {
            border-color: #9ca3af;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        /* Định dạng ảnh logo bên trong */
        .cuspage-ff-brands li a img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* Giúp ảnh không bị méo, giữ nguyên tỷ lệ gốc */
            filter: grayscale(10%); /* Hơi giảm màu một chút cho tiệp màu nền (tùy chọn) */
        }


    .cuspage-ff-brands li.cuspage-ff-active a {
        border-color: #dc2626; /* Viền đỏ khi chọn */
        box-shadow: 0 0 0 1px #dc2626;
    }

        .cuspage-ff-brands li.cuspage-ff-active a img {
            filter: grayscale(0%); /* Lên đủ màu gốc khi được chọn */
        }
/*filter*/