/* =========================================================
   THICHLAMBANH
   CATEGORY PAGE V1
========================================================= */

:root{
    --cat-pink:#ed0754;
    --cat-pink-dark:#d90049;

    --cat-text:#2e2025;
    --cat-muted:#817479;

    --cat-border:#eee5e8;

    --cat-soft:#fff7f9;
}


/* =========================================================
   RESET
========================================================= */

.tlb-category-page,
.tlb-category-page *,
.tlb-category-page *::before,
.tlb-category-page *::after{
    box-sizing:border-box;
}


/* =========================================================
   PAGE
========================================================= */

.tlb-category-page{
    width:min(1440px,100%);

    margin:0 auto;

    padding:
        0
        20px
        55px;

    color:
        var(--cat-text);

    font-family:
        "Be Vietnam Pro",
        Arial,
        sans-serif;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.tlb-category-breadcrumb{
    min-height:44px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    color:#94878b;

    font-size:7px;
}


.tlb-category-breadcrumb a{
    color:#73666a;

    text-decoration:none;
}


.tlb-category-breadcrumb a:hover{
    color:
        var(--cat-pink);
}


.tlb-category-breadcrumb strong{
    color:#43353a;

    font-weight:600;
}


/* =========================================================
   HERO
========================================================= */

.tlb-category-hero{
    position:relative;

    min-height:145px;

    padding:
        27px
        32px;

    display:flex;

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

    gap:30px;

    overflow:hidden;

    border:
        1px
        solid
        #f5dfe6;

    border-radius:15px;

    background:
        linear-gradient(
            120deg,
            #fff2f6 0%,
            #fff8fa 56%,
            #fff 100%
        );
}


.tlb-category-hero::before{
    content:"";

    position:absolute;

    right:15%;
    top:-160px;

    width:380px;
    height:380px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,190,211,.28),
            transparent 70%
        );
}


.tlb-category-hero__content{
    position:relative;

    z-index:2;
}


.tlb-category-hero__eyebrow{
    display:block;

    margin-bottom:5px;

    color:
        var(--cat-pink);

    font-size:7px;

    font-weight:700;

    letter-spacing:.8px;
}


.tlb-category-hero h1{
    margin:0;

    color:#2f2126;

    font-size:28px;
    line-height:1.2;

    font-weight:700;
}


.tlb-category-hero p{
    margin:
        8px
        0
        0;

    color:#75686c;

    font-size:9px;
}


.tlb-category-hero p strong{
    color:
        var(--cat-pink);
}


.tlb-category-hero__decor{
    position:relative;

    z-index:2;

    min-width:145px;

    padding:
        14px
        20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    border:
        1px
        solid
        #ffd4e1;

    border-radius:13px;

    background:
        rgba(255,255,255,.76);

    backdrop-filter:
        blur(8px);
}


.tlb-category-hero__decor span{
    color:
        var(--cat-pink);

    font-size:15px;
}


.tlb-category-hero__decor b{
    margin-top:2px;

    color:
        var(--cat-pink);

    font-size:24px;
}


.tlb-category-hero__decor small{
    color:#9a8d91;

    font-size:7px;
}


/* =========================================================
   LAYOUT
========================================================= */

.tlb-category-layout{
    margin-top:14px;

    display:grid;

    grid-template-columns:
        225px
        minmax(0,1fr);

    gap:14px;

    align-items:start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.tlb-category-sidebar{
    min-width:0;
}


.tlb-category-sidebar__box{
    overflow:hidden;

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

    border-radius:11px;

    background:#fff;
}


.tlb-category-sidebar__heading{
    min-height:43px;

    padding:
        0
        13px;

    display:flex;

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

    gap:8px;

    border-bottom:
        1px
        solid
        #f0e8ea;
}


.tlb-category-sidebar__heading strong{
    font-size:9px;
}


.tlb-category-sidebar__heading span{
    min-width:25px;
    height:20px;

    padding:
        0
        6px;

    display:grid;

    place-items:center;

    border-radius:999px;

    color:
        var(--cat-pink);

    background:#fff1f5;

    font-size:6px;

    font-weight:700;
}


.tlb-category-sidebar__list{
    max-height:590px;

    overflow-y:auto;
}


.tlb-category-sidebar__list a{
    min-height:38px;

    padding:
        0
        11px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        13px;

    align-items:center;

    gap:7px;

    border-bottom:
        1px
        solid
        #f5eff1;

    color:#56484d;

    text-decoration:none;

    transition:
        color .16s ease,
        background .16s ease;
}


.tlb-category-sidebar__list a:last-child{
    border-bottom:0;
}


.tlb-category-sidebar__list a:hover,
.tlb-category-sidebar__list a.active{
    color:
        var(--cat-pink);

    background:#fff4f7;
}


.tlb-category-sidebar__name{
    min-width:0;

    overflow:hidden;

    font-size:7px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-category-sidebar__count{
    min-width:25px;

    padding:
        2px
        5px;

    border-radius:999px;

    color:#998b90;

    background:#f7f3f4;

    font-size:5.5px;

    text-align:center;
}


.tlb-category-sidebar__list b{
    color:#c3b5ba;

    font-size:8px;
}


/* =========================================================
   SIDEBAR AI
========================================================= */

.tlb-category-ai{
    position:relative;

    min-height:155px;

    margin-top:11px;

    padding:14px;

    overflow:hidden;

    border:
        1px
        solid
        #ffd6e2;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff1f6
        );
}


.tlb-category-ai > span{
    display:block;

    color:
        var(--cat-pink);

    font-size:6px;

    font-weight:700;
}


.tlb-category-ai strong{
    display:block;

    width:65%;

    margin-top:8px;

    font-size:8px;
    line-height:1.45;
}


.tlb-category-ai p{
    width:58%;

    margin:
        5px
        0
        0;

    color:#897b80;

    font-size:6px;
    line-height:1.45;
}


.tlb-category-ai a{
    position:absolute;

    z-index:3;

    left:14px;
    bottom:14px;

    min-height:28px;

    padding:
        0
        11px;

    display:flex;

    align-items:center;

    border-radius:5px;

    color:#fff;

    background:
        var(--cat-pink);

    font-size:6px;

    font-weight:700;

    text-decoration:none;
}


.tlb-category-ai img{
    position:absolute;

    right:-3px;
    bottom:-4px;

    width:95px;
}


/* =========================================================
   CONTENT
========================================================= */

.tlb-category-content{
    min-width:0;
}


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

.tlb-category-toolbar{
    min-height:55px;

    padding:
        8px
        10px;

    display:grid;

    grid-template-columns:
        minmax(150px,1fr)
        250px
        165px;

    align-items:center;

    gap:10px;

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

    border-radius:11px;

    background:#fff;
}


.tlb-category-toolbar__left{
    min-width:0;
}


.tlb-category-toolbar__left strong{
    color:#43353a;

    font-size:9px;
}


.tlb-category-toolbar__left span{
    display:block;

    margin-top:3px;

    color:#96888d;

    font-size:6px;
}


/* =========================================================
   SEARCH
========================================================= */

.tlb-category-toolbar__search{
    height:34px;

    display:flex;

    overflow:hidden;

    border:
        1px
        solid
        #eadde1;

    border-radius:7px;
}


.tlb-category-toolbar__search input[type="search"]{
    width:100%;
    min-width:0;

    padding:
        0
        10px;

    border:0;

    outline:0;

    font-family:inherit;

    font-size:7px;
}


.tlb-category-toolbar__search button{
    width:47px;

    flex:0 0 47px;

    border:0;

    color:#fff;

    background:
        var(--cat-pink);

    font-family:inherit;

    font-size:6.5px;

    font-weight:700;

    cursor:pointer;
}


/* =========================================================
   SORT
========================================================= */

.tlb-category-sort select{
    width:100%;
    height:34px;

    padding:
        0
        9px;

    border:
        1px
        solid
        #eadde1;

    border-radius:7px;

    outline:0;

    color:#5f5156;

    background:#fff;

    font-family:inherit;

    font-size:7px;

    cursor:pointer;
}


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

.tlb-category-products{
    margin-top:11px;

    display:grid;

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

    gap:10px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.tlb-category-product-card{
    min-width:0;

    overflow:hidden;

    border:
        1px
        solid
        #eee7e9;

    border-radius:10px;

    background:#fff;

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


.tlb-category-product-card:hover{
    border-color:#f1c8d4;

    transform:
        translateY(-3px);

    box-shadow:
        0
        9px
        22px
        rgba(68,26,41,.08);
}


/* =========================================================
   IMAGE
========================================================= */

.tlb-category-product-card__image{
    position:relative;

    width:100%;
    height:190px;

    display:flex;

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

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fffafb
        );
}


.tlb-category-product-card__image img{
    display:block;

    width:100%;
    height:100%;

    padding:11px;

    object-fit:contain;

    transition:
        transform .24s ease;
}


.tlb-category-product-card:hover
.tlb-category-product-card__image img{
    transform:
        scale(1.045);
}


/* =========================================================
   STOCK
========================================================= */

.tlb-category-product-card__stock{
    position:absolute;

    top:9px;
    left:9px;

    min-height:19px;

    padding:
        0
        7px;

    display:flex;

    align-items:center;

    border:
        1px
        solid
        #d7eee1;

    border-radius:999px;

    color:#167f49;

    background:
        rgba(240,251,245,.95);

    font-size:5.5px;

    font-weight:700;
}


.tlb-category-product-card__stock--out{
    border-color:#eedde2;

    color:#a06f7d;

    background:
        rgba(250,244,246,.95);
}


/* =========================================================
   BODY
========================================================= */

.tlb-category-product-card__body{
    padding:
        10px
        11px
        11px;
}


.tlb-category-product-card__category{
    display:block;

    color:#a09196;

    font-size:5.5px;
}


.tlb-category-product-card__name{
    display:-webkit-box;

    min-height:36px;

    margin-top:4px;

    overflow:hidden;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    color:#3f3136;

    font-size:8px;
    line-height:1.45;

    font-weight:600;

    text-decoration:none;
}


.tlb-category-product-card__name:hover{
    color:
        var(--cat-pink);
}


/* =========================================================
   META
========================================================= */

.tlb-category-product-card__meta{
    min-height:30px;

    margin-top:7px;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:8px;
}


.tlb-category-product-card__meta strong{
    color:
        var(--cat-pink);

    font-size:10px;

    white-space:nowrap;
}


.tlb-category-product-card__meta small{
    max-width:85px;

    overflow:hidden;

    color:#a39599;

    font-size:5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* =========================================================
   ACTIONS
========================================================= */

.tlb-category-product-card__actions{
    margin-top:8px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        31px;

    gap:6px;
}


.tlb-category-product-card__actions > a{
    height:31px;

    display:flex;

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

    border:
        1px
        solid
        #f0d5de;

    border-radius:6px;

    color:
        var(--cat-pink);

    background:#fff;

    font-size:6px;

    font-weight:700;

    text-decoration:none;
}


.tlb-category-product-card__actions > a:hover{
    background:#fff4f7;
}


.tlb-category-product-card__actions button{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:6px;

    color:#fff;

    background:
        var(--cat-pink);

    font-size:15px;

    cursor:pointer;
}


.tlb-category-product-card__actions button:disabled{
    opacity:.35;

    cursor:not-allowed;
}


/* =========================================================
   EMPTY
========================================================= */

.tlb-category-empty{
    min-height:360px;

    margin-top:11px;

    display:flex;

    flex-direction:column;

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

    border:
        1px
        dashed
        #eadde1;

    border-radius:12px;

    background:#fffafb;

    text-align:center;
}


.tlb-category-empty > div{
    font-size:35px;
}


.tlb-category-empty strong{
    margin-top:10px;

    color:#493b40;

    font-size:11px;
}


.tlb-category-empty p{
    margin:
        6px
        0
        0;

    color:#978a8e;

    font-size:7px;
}


.tlb-category-empty a{
    min-height:31px;

    margin-top:12px;

    padding:
        0
        13px;

    display:flex;

    align-items:center;

    border-radius:6px;

    color:#fff;

    background:
        var(--cat-pink);

    font-size:6.5px;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   PAGINATION
========================================================= */

.tlb-category-pagination{
    margin-top:18px;

    display:flex;

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

    gap:5px;
}


.tlb-category-pagination a,
.tlb-category-pagination span{
    min-width:31px;
    height:31px;

    padding:
        0
        7px;

    display:grid;

    place-items:center;

    border:
        1px
        solid
        #eee;

    border-radius:6px;

    color:#695b60;

    background:#fff;

    font-size:7px;

    text-decoration:none;
}


.tlb-category-pagination a:hover,
.tlb-category-pagination a.active{
    border-color:
        var(--cat-pink);

    color:#fff;

    background:
        var(--cat-pink);
}


/* =========================================================
   1100
========================================================= */

@media(max-width:1100px){

    .tlb-category-products{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .tlb-category-toolbar{
        grid-template-columns:
            1fr
            220px;
    }


    .tlb-category-sort{
        grid-column:2;
    }

}


/* =========================================================
   850
========================================================= */

@media(max-width:850px){

    .tlb-category-page{
        padding-inline:12px;
    }


    .tlb-category-layout{
        grid-template-columns:1fr;
    }


    .tlb-category-sidebar{
        display:none;
    }


    .tlb-category-products{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   650
========================================================= */

@media(max-width:650px){

    .tlb-category-hero{
        min-height:125px;

        padding:
            20px;
    }


    .tlb-category-hero h1{
        font-size:23px;
    }


    .tlb-category-hero__decor{
        min-width:105px;

        padding:10px;
    }


    .tlb-category-toolbar{
        grid-template-columns:1fr;

        padding:10px;
    }


    .tlb-category-toolbar__search,
    .tlb-category-sort{
        grid-column:auto;
    }


    .tlb-category-products{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .tlb-category-product-card__image{
        height:165px;
    }

}


/* =========================================================
   430
========================================================= */

@media(max-width:430px){

    .tlb-category-hero__decor{
        display:none;
    }


    .tlb-category-products{
        gap:8px;
    }


    .tlb-category-product-card__image{
        height:145px;
    }


    .tlb-category-product-card__body{
        padding:
            8px;
    }


    .tlb-category-product-card__name{
        font-size:7.5px;
    }


    .tlb-category-product-card__meta{
        flex-direction:column;

        align-items:flex-start;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .tlb-category-page *,
    .tlb-category-page *::before,
    .tlb-category-page *::after{
        transition:none!important;

        animation:none!important;
    }

}