/* ============================================================
   KEHETO - PRODUCT CATEGORY ARCHIVE
   FINAL - ẨN BỘ LỌC SẮP XẾP

   - Không dùng body selector
   - Breadcrumb xanh #39b54a + đậm
   - Chỉ giữ số lượng sản phẩm
   - Ẩn hoàn toàn bộ sắp xếp
   - Không giá
   - Không yêu thích
   - Tên sản phẩm tối đa 2 dòng + in đậm
   - Nút Xem thêm cách tên hợp lý
   - Desktop 4 / Tablet 3 / Mobile 2
   - Không dùng !important
============================================================ */


/* ============================================================
   01. BIẾN GIAO DIỆN
============================================================ */

.tax-product_cat {
    --kht-green: #39b54a;
    --kht-green-dark: #278f38;
    --kht-green-soft: #edf8ef;

    --kht-text: #263238;
    --kht-text-soft: #69736e;

    --kht-border: #e1e9e2;
    --kht-white: #ffffff;

    --kht-radius: 17px;
    --kht-container: 1240px;
}


/* ============================================================
   02. MAIN
============================================================ */

.tax-product_cat #main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(57, 181, 74, 0.045),
            transparent 31%
        ),
        #ffffff;
}


/* ============================================================
   03. SHOP PAGE TITLE
============================================================ */

.tax-product_cat .shop-page-title {
    width: 100%;

    margin: 0;

    background: #ffffff;

    border: 0;
}


/* ============================================================
   04. TOOLBAR
   Breadcrumb trái
   Số lượng sản phẩm phải
============================================================ */

.tax-product_cat
.shop-page-title
.page-title-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width:
        min(
            var(--kht-container),
            calc(100% - 40px)
        );

    max-width: var(--kht-container);

    min-height: 68px;

    margin: 0 auto;

    padding: 13px 0;

    border-bottom:
        1px solid #edf2ee;

    box-sizing: border-box;
}


/* ============================================================
   05. RESET FLEX COLUMN FLATSOME
============================================================ */

.tax-product_cat
.shop-page-title
.page-title-inner
> .flex-col {
    display: flex;

    align-items: center;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ============================================================
   06. BREADCRUMB
============================================================ */

.tax-product_cat
.shop-page-title
.breadcrumbs {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    margin: 0;

    color: var(--kht-green);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}


/* Link breadcrumb */
.tax-product_cat
.shop-page-title
.breadcrumbs a {
    color: var(--kht-green);

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


/* Hover breadcrumb */
.tax-product_cat
.shop-page-title
.breadcrumbs a:hover {
    color: var(--kht-green-dark);
}


/* Danh mục hiện tại */
.tax-product_cat
.shop-page-title
.breadcrumbs .current {
    color: var(--kht-green);

    font-weight: 700;
}


/* Dấu phân cách */
.tax-product_cat
.shop-page-title
.breadcrumbs .divider {
    margin:
        0
        9px;

    color:
        rgba(57, 181, 74, 0.38);

    font-weight: 400;
}


/* ============================================================
   07. CỤM BÊN PHẢI
============================================================ */

.tax-product_cat
.shop-page-title
.page-title-inner
> .flex-col:last-child {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    margin-left: auto;
}


/* ============================================================
   08. SỐ LƯỢNG SẢN PHẨM
============================================================ */

.tax-product_cat
.woocommerce-result-count {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 39px;

    margin: 0;

    padding:
        0
        13px
        0
        25px;

    color:
        var(--kht-text-soft);

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    background: #f7faf7;

    border:
        1px solid
        #e4ece5;

    border-radius: 10px;

    box-sizing: border-box;
}


/* Chấm xanh trước số lượng */
.tax-product_cat
.woocommerce-result-count::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 12px;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%);

    background:
        var(--kht-green);

    border-radius: 50%;

    box-shadow:
        0 0 0 3px
        rgba(57, 181, 74, 0.09);
}


/* ============================================================
   09. ẨN HOÀN TOÀN BỘ SẮP XẾP
============================================================ */

.tax-product_cat
.woocommerce-ordering {
    display: none;
}


/* ============================================================
   10. CONTAINER SẢN PHẨM
============================================================ */

.tax-product_cat
#main
.category-page-row {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0 auto;

    padding:
        26px
        20px
        65px;

    box-sizing: border-box;
}


/* Reset column Flatsome */
.tax-product_cat
#main
.category-page-row
> .col.large-12 {
    display: block;

    width: 100%;
    max-width: 100%;

    flex-basis: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   11. SHOP CONTAINER
============================================================ */

.tax-product_cat
#main
.shop-container {
    width: 100%;

    max-width:
        var(--kht-container);

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   12. GRID SẢN PHẨM
============================================================ */

.tax-product_cat
#main
.shop-container
> .products.row.row-small {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    column-gap: 18px;
    row-gap: 22px;

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    padding: 0;

    left: auto;
    right: auto;

    box-sizing: border-box;
}


/* ============================================================
   13. RESET PRODUCT COLUMN
============================================================ */

.tax-product_cat
#main
.shop-container
.products.row.row-small
> .product-small.col {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    flex: none;
    flex-basis: auto;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   14. PRODUCT CARD
============================================================ */

.tax-product_cat
.products
.product-small.col
> .col-inner {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    background:
        var(--kht-white);

    border:
        1px solid
        var(--kht-border);

    border-radius:
        var(--kht-radius);

    box-shadow:
        0 6px 20px
        rgba(28, 54, 34, 0.05);

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Hover card */
@media (hover: hover) {

    .tax-product_cat
    .products
    .product-small.col
    > .col-inner:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(57, 181, 74, 0.32);

        box-shadow:
            0 17px 38px
            rgba(28, 54, 34, 0.10);
    }

}


/* ============================================================
   15. PRODUCT BOX
============================================================ */

.tax-product_cat
.products
.product-small.box {
    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0;

    background: transparent;
}


/* ============================================================
   16. KHUNG ẢNH
============================================================ */

.tax-product_cat
.products
.product-small
.box-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #ffffff 0%,
            #f5faf6 62%,
            #eef7ef 100%
        );
}


/* ============================================================
   17. IMAGE WRAPPER
============================================================ */

.tax-product_cat
.products
.product-small
.image-fade_in_back {
    width: 100%;
    height: 100%;
}


.tax-product_cat
.products
.product-small
.image-fade_in_back
> a {
    display: block;

    width: 100%;
    height: 100%;
}


/* ============================================================
   18. ẢNH SẢN PHẨM
============================================================ */

.tax-product_cat
.products
.product-small
.box-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;
    object-position: center;

    transition:
        transform
        0.45s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );
}


/* Zoom ảnh nhẹ */
@media (hover: hover) {

    .tax-product_cat
    .products
    .product-small.col
    > .col-inner:hover
    .box-image img {
        transform:
            scale(1.035);
    }

}


/* ============================================================
   19. ẨN THÀNH PHẦN KHÔNG DÙNG
============================================================ */

.tax-product_cat
.products
.badge-container:empty,

.tax-product_cat
.products
.image-tools.top.right,

.tax-product_cat
.products
.wishlist-icon,

.tax-product_cat
.products
.wishlist-popup,

.tax-product_cat
.products
.yith-wcwl-add-to-wishlist,

.tax-product_cat
.products
.image-tools.grid-tools,

.tax-product_cat
.products
.image-tools.bottom.left,

.tax-product_cat
.products
.price-wrapper,

.tax-product_cat
.products
.price {
    display: none;
}


/* ============================================================
   20. CONTENT CARD
============================================================ */

.tax-product_cat
.products
.box-text.box-text-products {
    display: block;

    width: 100%;

    padding: 14px;

    text-align: left;

    background: #ffffff;

    border-top:
        1px solid
        rgba(226, 234, 227, 0.82);

    box-sizing: border-box;
}


/* ============================================================
   21. TITLE WRAPPER
============================================================ */

.tax-product_cat
.products
.title-wrapper {
    width: 100%;
}


/* ============================================================
   22. PRODUCT TITLE WRAPPER

   Bố cục:
   Tên dòng 1
   Tên dòng 2

   12px

   Xem thêm
============================================================ */

.tax-product_cat
.products
.product-title {
    position: relative;

    width: 100%;

    min-height: 86px;

    margin: 0;

    padding-bottom: 46px;

    box-sizing: border-box;
}


/* ============================================================
   23. TÊN SẢN PHẨM
   Giới hạn chính xác 2 dòng
============================================================ */

.tax-product_cat
.products
.product-title a {
    display: -webkit-box;

    width: 100%;
    max-width: 100%;

    max-height: 40px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color:
        var(--kht-text);

    font-size: 13px;
    font-weight: 700;

    line-height: 20px;

    letter-spacing:
        -0.01em;

    text-decoration: none;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    transition:
        color 0.2s ease;
}


/* ============================================================
   24. MỞ RỘNG VÙNG CLICK
   Giúp cả nút Xem thêm click vào sản phẩm
============================================================ */

.tax-product_cat
.products
.product-title a::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;
}


/* ============================================================
   25. NÚT XEM THÊM
============================================================ */

.tax-product_cat
.products
.product-title::after {
    content: "Xem thêm →";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    height: 34px;

    color:
        var(--kht-green-dark);

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    background:
        var(--kht-green-soft);

    border:
        1px solid
        rgba(57, 181, 74, 0.18);

    border-radius: 9px;

    pointer-events: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


/* ============================================================
   26. HOVER TÊN + CTA
============================================================ */

@media (hover: hover) {

    .tax-product_cat
    .products
    .product-title:hover a {
        color:
            var(--kht-green-dark);
    }


    .tax-product_cat
    .products
    .product-title:hover::after {
        color: #ffffff;

        background:
            var(--kht-green);

        border-color:
            var(--kht-green);
    }

}


/* ============================================================
   27. HẾT HÀNG
============================================================ */

.tax-product_cat
.products
.out-of-stock-label {
    position: absolute;

    right: 10px;
    bottom: 10px;
    left: auto;

    width: auto;

    padding:
        7px
        10px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    background:
        rgba(38, 50, 56, 0.86);

    border-radius: 999px;
}


/* Giảm màu ảnh hết hàng */
.tax-product_cat
.products
.product-small.out-of-stock
.box-image img {
    filter:
        saturate(0.85);
}


/* ============================================================
   28. PAGINATION CONTAINER
============================================================ */

.tax-product_cat
.shop-container
> .container {
    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    padding: 0;
}


/* ============================================================
   29. PAGINATION
============================================================ */

.tax-product_cat
.woocommerce-pagination {
    margin:
        38px
        0
        0;
}


.tax-product_cat
.nav-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0;
}


.tax-product_cat
.nav-pagination
> li {
    margin: 0;
}


.tax-product_cat
.nav-pagination
.page-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 39px;
    min-width: 39px;
    height: 39px;

    padding: 0;

    color: #657069;

    font-size: 13px;
    font-weight: 600;

    background: #ffffff;

    border:
        1px solid
        var(--kht-border);

    border-radius: 10px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


/* Trang hiện tại */
.tax-product_cat
.nav-pagination
.page-number.current {
    color: #ffffff;

    background:
        var(--kht-green);

    border-color:
        var(--kht-green);
}


/* Hover pagination */
@media (hover: hover) {

    .tax-product_cat
    .nav-pagination
    a.page-number:hover {
        color:
            var(--kht-green-dark);

        background:
            var(--kht-green-soft);

        border-color:
            rgba(57, 181, 74, 0.35);
    }

}


/* ============================================================
   30. TABLET
   3 CARD / HÀNG
============================================================ */

@media (max-width: 1100px) {

    /* Toolbar */
    .tax-product_cat
    .shop-page-title
    .page-title-inner {
        width:
            calc(100% - 32px);
    }


    /* Content */
    .tax-product_cat
    #main
    .category-page-row {
        padding:
            22px
            16px
            50px;
    }


    /* Grid */
    .tax-product_cat
    #main
    .shop-container
    > .products.row.row-small {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        column-gap: 15px;
        row-gap: 19px;
    }

}


/* ============================================================
   31. MOBILE
============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       TOOLBAR MOBILE

       Breadcrumb
       ↓
       Result count
    ======================================================== */

    .tax-product_cat
    .shop-page-title
    .page-title-inner {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        width:
            calc(100% - 20px);

        min-height: 0;

        padding:
            10px
            0
            12px;
    }


    /* Breadcrumb */
    .tax-product_cat
    .shop-page-title
    .page-title-inner
    > .flex-col:first-child {
        width: 100%;
    }


    .tax-product_cat
    .shop-page-title
    .breadcrumbs {
        overflow: hidden;

        flex-wrap: nowrap;

        width: 100%;

        font-size: 10.5px;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    /* Result count bên dưới */
    .tax-product_cat
    .shop-page-title
    .page-title-inner
    > .flex-col:last-child {
        display: flex;

        width: 100%;

        margin: 0;
    }


    .tax-product_cat
    .woocommerce-result-count {
        min-height: 34px;

        padding:
            0
            10px
            0
            22px;

        font-size: 10px;

        border-radius: 9px;
    }


    .tax-product_cat
    .woocommerce-result-count::before {
        left: 10px;

        width: 5px;
        height: 5px;
    }


    /* ========================================================
       GRID MOBILE
    ======================================================== */

    .tax-product_cat
    #main
    .category-page-row {
        padding:
            14px
            10px
            32px;
    }


    .tax-product_cat
    #main
    .shop-container
    > .products.row.row-small {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        column-gap: 9px;
        row-gap: 12px;
    }


    /* Card */
    .tax-product_cat
    .products
    .product-small.col
    > .col-inner {
        border-radius: 13px;
    }


    /* Content */
    .tax-product_cat
    .products
    .box-text.box-text-products {
        padding: 9px;
    }


    /* ========================================================
       TÊN SẢN PHẨM MOBILE
       2 dòng cố định
    ======================================================== */

    .tax-product_cat
    .products
    .product-title {
        min-height: 72px;

        padding-bottom: 38px;
    }


    .tax-product_cat
    .products
    .product-title a {
        max-height: 34px;

        font-size: 11.5px;
        font-weight: 700;
        line-height: 17px;

        -webkit-line-clamp: 2;
    }


    /* CTA mobile */
    .tax-product_cat
    .products
    .product-title::after {
        height: 29px;

        font-size: 9.5px;

        border-radius: 7px;
    }


    /* Pagination */
    .tax-product_cat
    .woocommerce-pagination {
        margin-top: 26px;
    }


    .tax-product_cat
    .nav-pagination
    .page-number {
        width: 34px;
        min-width: 34px;
        height: 34px;

        font-size: 12px;

        border-radius: 9px;
    }

}


/* ============================================================
   32. MOBILE RẤT NHỎ
============================================================ */

@media (max-width: 390px) {

    /* Toolbar */
    .tax-product_cat
    .shop-page-title
    .page-title-inner {
        width:
            calc(100% - 16px);

        gap: 7px;
    }


    /* Content */
    .tax-product_cat
    #main
    .category-page-row {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* Grid */
    .tax-product_cat
    #main
    .shop-container
    > .products.row.row-small {
        column-gap: 7px;
        row-gap: 10px;
    }


    /* Card content */
    .tax-product_cat
    .products
    .box-text.box-text-products {
        padding:
            8px
            7px;
    }


    /* Title */
    .tax-product_cat
    .products
    .product-title {
        min-height: 70px;

        padding-bottom: 37px;
    }


    .tax-product_cat
    .products
    .product-title a {
        max-height: 33px;

        font-size: 10.5px;
        line-height: 16.5px;

        -webkit-line-clamp: 2;
    }


    /* CTA */
    .tax-product_cat
    .products
    .product-title::after {
        height: 28px;

        font-size: 9px;
    }

}