@import url(./components_css/coupon__item.css);
@import url(./components_css/aside-filter.css);
@import url(./components_css/filter-price.css);
@import url(./components_css/box_sanpham.css);
@import url(./components_css/cart-coupon.css);




.coupon_icon__img {
    max-width: 100%;
}

.section_coupons {
    padding-top: 40px;
    padding-bottom: 40px;
}


/* bg_collection */

.collection-title {
    font-weight: 400;
    font-size: 1.75rem;
    padding: 10px 0;
}

.sort-by>label {
    font-size: var(--gap15);
    margin-right: var(--gap5);
}

.content_ul {
    -webkit-appearance: none;
    margin-left: 5px;
    height: 30px;
    padding: 0 5px;
    padding-right: 20px;
}

.coll-sortby {
    position: relative;
}

.coll-sortby .sort-by::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 12px;
    right: 4px;
    border-top: 6px solid;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.sort-by {
    position: relative;
}


.section_coupons {
    padding-top: 20px;
    padding-bottom: 20px;
}

.row--discount__code {
    display: flex;
    margin-inline: -10px;
    width: max-content;
    padding: 15px 10px;
}

.col--discount__code {
    flex: 0 0 25%;
    max-width: 25%;
    padding-inline: 10px;
}

.box__discount_code {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: -10px;
}

.box__discount_code::-webkit-scrollbar {
    width: 5px;
    display: none;
}

.coupon__item {
    height: auto;
}

.coupon__item {
    margin-top: 0;
}
.filter__label {
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.5rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    display: inline-flex;
    background: transparent;
    padding: 6px 8px;
    margin-right: 4px;
    margin-top: 4px;
    border: 1px solid #000000;
    position: relative;
    overflow: hidden;
    font-size: var(--gap13);
    align-items: center;
    gap: 5px;
    color: var(--colormain);
    cursor: pointer;
    
}
.filter__ul {
    display: flex;
    flex-wrap: wrap;
}
.filter__label::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background: #000000;
    opacity: 0.1;
}
.filter-content {
    margin-bottom: var(--gap10);
}
.open-filters {
    display: none;
}

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

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

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

@media screen and (max-width: 991px) {
    .bg_collection {
        display: block;
    }

}

@media screen and (max-width: 768px) {
    .__left {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        background: #fff;
        height: 100vh;
        z-index: 9999;
        overflow-y: auto;
        padding-block: 10px;
        overflow-x: hidden;
        transition: 0.5s;
        transform: translateX(100%);
    }
    .__left.active {
        transform: translateX(0);
    }
    .filter-content {
        margin-block: 10px;
    }

    .collection-title {
        padding: 0;
        padding-bottom: 15px;
    }
    .sort-by>label {
        margin: 0;
    }
    .open-filters {
        display: block;
    }
    .content_ul {
        font-size: var(--gap14);
        height: 25px;
    }
    .coll-sortby .sort-by::before {
        top: 10px;
    }

}

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

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