/* 


.section--products {
    padding: 44.5px 0px 44.5px 0px;
    background-color: #bfbfbf;
} */

/* category */
.section--products {
    background-color: #bfbfbf !important;
}

.bg-F4F5F6 {
    background-color: #f4f5f6;
}

.bg-BFBFBF {
    background-color: #bfbfbf !important;
}
.section-product__container {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

.cursor-pointer {
    cursor: pointer;
}
/* Category */
.gap-24px {
    gap: 24px;
}

.border-none {
    border: none !important;
}

.width-134px {
    width: 134px;
}

.height-134px {
    height: 134px;
}

.decoration-none {
    text-decoration: none;
}

.rounded-15px {
    border-radius: 15px !important;
}

.text-14px {
    font-size: 14px;
}

.text-22px {
    font-size: 22px !important;
}

.text-24px {
    font-size: 24px !important;
}

.text-141416 {
    color: #141416 !important;
}

.line-height-20px {
    line-height: 20px;
}

.line-height-36px {
    line-height: 36px;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.category-item.active {
    border: 1px solid #66d2ea !important;
    color: #66d2ea !important;
    font-weight: 400 !important;
}

/* btn filter */
.outline-none {
    outline: none !important;
}

.bg-none {
    background-color: transparent !important;
}

.gap-4px {
    gap: 4px !important;
}

.pt-22px {
    padding-top: 22px;
}
.pb-56px {
    padding-bottom: 56px;
}

.w-52px {
    width: 52px;
}

.height-52px {
    height: 52px;
}

.object-cover {
    object-fit: cover;
}

.dropdown-item.active {
    background-color: #f4f5f6 !important;
    font-weight: bold;
}

.mt-44px {
    margin-top: 44px !important;
}

.mb-8px {
    margin-bottom: 8px !important;
}
.mt-32px {
    margin-top: 32px !important;
}

.mb-28px {
    margin-bottom: 28px !important;
}

.categories-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(134px, 134px)) !important;
    margin-bottom: 44px !important;
    gap: 24px !important;
}

@media (max-width: 768px) {
    .px-md-16px {
        padding: 0 1rem !important;
    }

    .justify-md-evenly {
        justify-content: space-evenly !important;
    }

    .categories-tabs {
        margin-bottom: 38px !important;
        gap: 16px 26px !important;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .w-sm-92px {
        width: 92px !important;
    }

    .h-sm-96px {
        height: 96px !important;
    }

    .gap-sm-8px {
        gap: 8px !important;
    }

    .gap-sm-26px {
        gap: 26px !important;
    }

    .px-sm-8px {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .sm\:text-center {
        text-align: center !important;
    }

    .w-sm-40px {
        width: 40px !important;
    }

    .h-sm-40px {
        height: 40px !important;
    }

    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pb-sm-48px {
        padding-bottom: 48px !important;
    }

    .sm\:rounded-9px {
        border-radius: 8.95545px !important;
    }

    .categories-tabs {
        grid-template-columns: repeat(4, minmax(80px, 80px)) !important;
        margin-bottom: 38px !important;
        gap: 16px 26px !important;
        justify-content: center;
    }

    .categories-tabs > .nav-item a {
        max-height: 80px !important;
        /* padding: 0 !important; */
    }
}

@media (max-width: 430px) {
    .categories-tabs {
        grid-template-columns: repeat(auto-fit, minmax(80px, 80px)) !important;
        gap: 16px 26px !important;
        justify-content: center !important;
    }
}

@media (max-width: 429px) {
    .categories-tabs {
        grid-template-columns: repeat(auto-fit, 75px) !important;
        gap: 12px 12px !important;
        justify-content: center !important;
    }

    .categories-tabs > .nav-item a {
        max-height: 75px !important;
    }

    .categories-tabs > .nav-item a {
        font-size: 10px !important;
    }
}

#dots #dot1 {
    animation: load 1s infinite;
}

#dots #dot2 {
    animation: load 1s infinite;
    animation-delay: 0.2s;
}

#dots #dot3 {
    animation: load 1s infinite;
    animation-delay: 0.4s;
}

@keyframes load {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}