/* =========================================================
   THICHLAMBANH
   HEADER V5
========================================================= */

@font-face{
    font-family:"Be Vietnam Pro";
    src:url("/font/BeVietnamPro-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Be Vietnam Pro";
    src:url("/font/BeVietnamPro-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Be Vietnam Pro";
    src:url("/font/BeVietnamPro-SemiBold.ttf") format("truetype");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Be Vietnam Pro";
    src:url("/font/BeVietnamPro-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}


:root{
    --tlb-pink:#ed0754;
    --tlb-pink-dark:#d80049;

    --tlb-text:#2d1f24;
    --tlb-muted:#817479;

    --tlb-border:#eee4e7;
}


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

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


.tlb-header{
    position:relative;
    z-index:100;

    width:100%;

    color:var(--tlb-text);

    background:#fff;

    border-bottom:1px solid #eee;

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


.tlb-header a{
    color:inherit;
    text-decoration:none;
}


.tlb-header svg{
    display:block;

    width:24px;
    height:24px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   MAIN
========================================================= */

.tlb-header__main{
    width:min(1440px,100%);
    height:94px;

    margin:0 auto;

    padding:0 28px;

    display:grid;

    grid-template-columns:
        285px
        minmax(360px,1fr)
        auto;

    align-items:center;

    gap:34px;
}


/* =========================================================
   LOGO
========================================================= */

.tlb-logo{
    min-width:0;

    display:flex;

    align-items:center;
}


.tlb-logo__image{
    display:block;

    width:auto;
    max-width:100%;

    height:66px;

    object-fit:contain;
}


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

.tlb-search{
    width:100%;
    height:52px;

    display:flex;

    overflow:hidden;

    border:1.5px solid #ff8eb2;

    border-radius:13px;

    background:#fff;

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


.tlb-search:focus-within{
    border-color:var(--tlb-pink);

    box-shadow:
        0 0 0 4px
        rgba(237,7,84,.08);
}


.tlb-search input{
    width:100%;
    min-width:0;

    padding:0 24px;

    border:0;
    outline:0;

    color:#423439;

    background:transparent;

    font:
        400
        13px/1
        "Be Vietnam Pro",
        Arial,
        sans-serif;
}


.tlb-search input::placeholder{
    color:#aaa0a4;
    opacity:1;
}


.tlb-search button{
    width:58px;

    flex:0 0 58px;

    display:grid;

    place-items:center;

    padding:0;

    border:0;

    color:#fff;

    background:var(--tlb-pink);

    cursor:pointer;
}


.tlb-search button:hover{
    background:var(--tlb-pink-dark);
}


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

.tlb-actions{
    display:flex;

    align-items:center;

    gap:24px;

    white-space:nowrap;
}


.tlb-hotline{
    display:flex;

    align-items:center;

    gap:10px;
}


.tlb-hotline .tlb-action__icon svg{
    width:29px;
    height:29px;
}


.tlb-hotline > span:last-child{
    display:flex;

    flex-direction:column;

    gap:5px;
}


.tlb-hotline small{
    color:#5e5055;

    font-size:10px;
}


.tlb-hotline strong{
    color:#25191d;

    font-size:13px;

    font-weight:700;
}


.tlb-action{
    min-width:50px;

    display:flex;

    flex-direction:column;

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

    gap:6px;

    color:#403237;

    font-size:10px;

    white-space:nowrap;
}


.tlb-action__icon{
    position:relative;

    color:var(--tlb-pink);
}


.tlb-action__icon svg{
    width:25px;
    height:25px;
}


.tlb-action:hover,
.tlb-hotline:hover{
    color:var(--tlb-pink);
}


/* =========================================================
   CART
========================================================= */

.tlb-cart__count{
    position:absolute;

    top:-7px;
    right:-10px;

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:grid;

    place-items:center;

    border:2px solid #fff;

    border-radius:999px;

    color:#fff;

    background:var(--tlb-pink);

    font-size:8px;
}


/* =========================================================
   NAV
========================================================= */

.tlb-nav-wrap{
    position:relative;

    width:100%;

    border-top:1px solid #f7f1f3;
}


.tlb-nav{
    position:relative;

    width:min(1440px,100%);
    height:64px;

    margin:0 auto;

    padding:0 28px;

    display:grid;

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

    align-items:center;

    gap:28px;
}


/* =========================================================
   CATALOG BUTTON
========================================================= */

.tlb-catalog{
    position:static;

    min-width:0;
}


.tlb-catalog summary{
    height:46px;

    padding:0 14px;

    display:flex;

    align-items:center;

    gap:11px;

    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ef0756,
            #e40050
        );

    box-shadow:
        0 5px 12px
        rgba(237,7,84,.12);

    cursor:pointer;

    list-style:none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.tlb-catalog summary::-webkit-details-marker{
    display:none;
}


.tlb-catalog summary:hover{
    transform:translateY(-1px);

    background:var(--tlb-pink-dark);

    box-shadow:
        0 8px 18px
        rgba(237,7,84,.18);
}


.tlb-catalog__menu svg{
    width:20px;
    height:20px;
}


.tlb-catalog__copy{
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;
}


.tlb-catalog__copy strong{
    overflow:hidden;

    font-size:10px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-catalog__copy small{
    color:rgba(255,255,255,.7);

    font-size:6px;
}


.tlb-catalog__chevron{
    margin-left:auto;
}


.tlb-catalog__chevron svg{
    width:15px;
    height:15px;

    transition:
        transform .18s ease;
}


.tlb-catalog[open]
.tlb-catalog__chevron svg{
    transform:rotate(180deg);
}


/* =========================================================
   NAV LINKS
========================================================= */

.tlb-nav__links{
    min-width:0;
    height:100%;

    display:flex;

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

    gap:18px;
}


.tlb-nav__links > a{
    position:relative;

    height:100%;

    display:flex;

    align-items:center;

    color:#34272b;

    font-size:11px;

    font-weight:600;

    white-space:nowrap;
}


.tlb-nav__links > a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:8px;

    width:0;
    height:2px;

    border-radius:999px;

    background:var(--tlb-pink);

    transform:translateX(-50%);

    transition:
        width .18s ease;
}


.tlb-nav__links > a:hover{
    color:var(--tlb-pink);
}


.tlb-nav__links > a:hover::after{
    width:22px;
}


.tlb-hot{
    min-width:28px;
    height:17px;

    margin-left:5px;

    padding:0 5px;

    display:inline-grid;

    place-items:center;

    border-radius:4px;

    color:#fff;

    background:var(--tlb-pink);

    font-size:7px;
}


/* =========================================================
   AI BUTTON
========================================================= */

.tlb-ai{
    height:46px;

    padding:
        0
        9px
        0
        13px;

    display:flex;

    align-items:center;

    gap:8px;

    border:1px solid #ffc3d6;

    border-radius:10px;

    color:var(--tlb-pink)!important;

    background:
        linear-gradient(
            135deg,
            #fff8fa,
            #fff2f6
        );

    font-size:9.5px;

    font-weight:700;

    white-space:nowrap;
}


.tlb-ai > svg{
    width:19px;
    height:19px;

    fill:var(--tlb-pink);

    stroke:none;
}


.tlb-ai b{
    width:33px;
    height:31px;

    margin-left:auto;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#eef8f7;

    font-size:20px;
}


/* =========================================================
   MEGA ROOT
========================================================= */

.tlb-mega{
    position:absolute;

    z-index:999;

    top:calc(100% - 1px);

    left:28px;
    right:28px;

    display:none;

    overflow:hidden;

    border:1px solid #eedfe4;

    border-radius:
        0
        0
        16px
        16px;

    background:#fff;

    box-shadow:
        0
        24px
        58px
        rgba(44,20,28,.18);
}


/* =========================================================
   DESKTOP OPEN
========================================================= */

@media(min-width:901px){

    .tlb-catalog[open]
    .tlb-mega{
        display:block;
    }


    .tlb-catalog:hover
    .tlb-mega{
        display:block;
    }

}


/* =========================================================
   MOBILE HEAD
========================================================= */

.tlb-mega__mobile-head{
    display:none;
}


/* =========================================================
   MEGA TOP
========================================================= */

.tlb-mega__top{
    min-height:84px;

    padding:
        17px
        22px;

    display:flex;

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

    gap:20px;

    border-bottom:1px solid #f0e6e9;

    background:
        linear-gradient(
            100deg,
            #fff8fa,
            #fff
        );
}


.tlb-mega__eyebrow{
    display:block;

    margin-bottom:4px;

    color:var(--tlb-pink);

    font-size:7px;

    font-weight:700;

    letter-spacing:.7px;
}


.tlb-mega__top h3{
    margin:0;

    color:#302227;

    font-size:17px;

    line-height:1.2;
}


.tlb-mega__top p{
    margin:
        5px
        0
        0;

    color:#897b80;

    font-size:7px;
}


.tlb-mega__all{
    min-height:35px;

    padding:0 12px;

    display:flex;

    align-items:center;

    gap:7px;

    border:1px solid #ffd2df;

    border-radius:7px;

    color:var(--tlb-pink)!important;

    background:#fff;

    font-size:7px;

    font-weight:600;
}


.tlb-mega__all svg{
    width:14px;
    height:14px;
}


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

.tlb-mega__body{
    display:grid;

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

    min-height:390px;
}


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

.tlb-mega__groups{
    padding:15px;

    border-right:1px solid #f0e7ea;

    background:#fff9fb;
}


.tlb-mega-group{
    width:100%;
    min-height:63px;

    padding:
        8px
        9px;

    display:grid;

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

    align-items:center;

    gap:8px;

    border:1px solid transparent;

    border-radius:9px;

    color:#4d3f44;

    background:transparent;

    text-align:left;

    font-family:inherit;

    cursor:pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.tlb-mega-group:hover,
.tlb-mega-group.active{
    border-color:#f4d6df;

    background:#fff;

    transform:translateX(2px);
}


.tlb-mega-group__icon{
    width:37px;
    height:37px;

    display:grid;

    place-items:center;

    border-radius:9px;

    color:var(--tlb-pink);

    background:#fff0f5;
}


.tlb-mega-group__icon svg{
    width:18px;
    height:18px;
}


.tlb-mega-group__copy{
    min-width:0;
}


.tlb-mega-group__copy strong{
    display:block;

    overflow:hidden;

    color:#43353a;

    font-size:7.5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-mega-group__copy small{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#97898e;

    font-size:5.7px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-mega-group__meta{
    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:2px;
}


.tlb-mega-group__meta b{
    color:var(--tlb-pink);

    font-size:7px;
}


.tlb-mega-group__meta i{
    color:#a4979b;

    font-size:5px;

    font-style:normal;
}


.tlb-mega-group__arrow{
    color:#c6b9bd;

    font-size:10px;
}


/* =========================================================
   GROUP AI
========================================================= */

.tlb-mega__ai{
    min-height:57px;

    margin-top:12px;

    padding:
        8px
        10px;

    display:grid;

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

    align-items:center;

    gap:8px;

    border:1px solid #ffd1df;

    border-radius:9px;

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


.tlb-mega__ai > span{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:8px;

    color:var(--tlb-pink);

    background:#fff;
}


.tlb-mega__ai svg{
    width:17px;
    height:17px;
}


.tlb-mega__ai strong{
    display:block;

    font-size:7px;
}


.tlb-mega__ai small{
    display:block;

    margin-top:2px;

    color:#96898d;

    font-size:5.7px;
}


.tlb-mega__ai b{
    color:var(--tlb-pink);
}


/* =========================================================
   PANELS
========================================================= */

.tlb-mega__panels{
    min-width:0;

    padding:
        20px
        22px;
}


.tlb-mega-panel{
    display:none;
}


.tlb-mega-panel.active{
    display:block;
}


/* =========================================================
   PANEL HEAD
========================================================= */

.tlb-mega-panel__head{
    min-height:65px;

    display:flex;

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

    gap:20px;

    border-bottom:1px solid #f1e8ea;
}


.tlb-mega-panel__head > div > span{
    display:block;

    margin-bottom:4px;

    color:#a08f95;

    font-size:6px;
}


.tlb-mega-panel__head h4{
    margin:0;

    color:#322429;

    font-size:15px;
}


.tlb-mega-panel__head p{
    margin:
        4px
        0
        0;

    color:#918489;

    font-size:6.5px;
}


.tlb-mega-panel__head > a{
    min-height:30px;

    padding:0 10px;

    display:flex;

    align-items:center;

    border:1px solid #f0dce3;

    border-radius:6px;

    color:var(--tlb-pink);

    font-size:6px;

    font-weight:600;
}


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

.tlb-mega-panel__grid{
    margin-top:16px;

    display:grid;

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

    gap:9px;
}


.tlb-mega-category{
    min-height:70px;

    padding:
        10px;

    display:grid;

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

    align-items:center;

    gap:9px;

    border:1px solid #f0e6e9;

    border-radius:9px;

    background:#fff;

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


.tlb-mega-category:hover{
    border-color:#f2c8d4;

    transform:translateY(-2px);

    box-shadow:
        0 7px
        17px
        rgba(73,27,43,.07);
}


.tlb-mega-category__icon{
    width:39px;
    height:39px;

    display:grid;

    place-items:center;

    border-radius:9px;

    color:var(--tlb-pink);

    background:#fff3f7;
}


.tlb-mega-category__icon svg{
    width:18px;
    height:18px;
}


.tlb-mega-category__copy{
    min-width:0;
}


.tlb-mega-category__copy strong{
    display:block;

    overflow:hidden;

    color:#493b40;

    font-size:7.5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-mega-category__copy small{
    display:block;

    margin-top:3px;

    color:#9b8e92;

    font-size:5.5px;
}


.tlb-mega-category__arrow{
    color:#c6b9bd;

    font-size:10px;
}


/* =========================================================
   POPULAR
========================================================= */

.tlb-mega-panel__popular{
    margin-top:18px;

    padding-top:14px;

    border-top:1px solid #f1e8ea;
}


.tlb-mega-panel__popular-head{
    display:flex;

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

    gap:10px;
}


.tlb-mega-panel__popular-head strong{
    color:#44363b;

    font-size:7.5px;
}


.tlb-mega-panel__popular-head span{
    color:#9d9094;

    font-size:5.5px;
}


.tlb-mega-panel__popular-grid{
    margin-top:8px;

    display:grid;

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

    gap:8px;
}


.tlb-mega-panel__popular-grid a{
    min-height:52px;

    padding:
        8px;

    display:grid;

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

    align-items:center;

    gap:7px;

    border-radius:7px;

    background:#fff8fa;
}


.tlb-mega-panel__popular-grid > a > span{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    border-radius:7px;

    color:var(--tlb-pink);

    background:#ffe9f0;

    font-size:6.5px;

    font-weight:700;
}


.tlb-mega-panel__popular-grid strong{
    display:block;

    overflow:hidden;

    color:#4c3e43;

    font-size:6.5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-mega-panel__popular-grid small{
    display:block;

    margin-top:2px;

    color:#9c8f93;

    font-size:5px;
}


.tlb-mega-panel__popular-grid b{
    color:#c7b9be;
}


/* =========================================================
   FOOTER
========================================================= */

.tlb-mega__footer{
    min-height:47px;

    padding:0 20px;

    display:flex;

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

    gap:20px;

    border-top:1px solid #f0e7ea;

    color:#8f8186;

    background:#fffafa;

    font-size:6.5px;
}


.tlb-mega__footer b{
    color:#57494e;
}


.tlb-mega__footer a{
    color:var(--tlb-pink)!important;

    font-weight:600;
}


/* =========================================================
   <= 1240
========================================================= */

@media(max-width:1240px){

    .tlb-header__main{
        grid-template-columns:
            235px
            minmax(300px,1fr)
            auto;

        gap:22px;

        padding-inline:22px;
    }


    .tlb-logo__image{
        height:56px;
    }


    .tlb-actions{
        gap:15px;
    }


    .tlb-hotline{
        display:none;
    }


    .tlb-nav{
        grid-template-columns:
            225px
            minmax(0,1fr)
            190px;

        gap:18px;

        padding-inline:22px;
    }


    .tlb-mega{
        left:22px;
        right:22px;
    }


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

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:900px){

    html.tlb-mega-open{
        overflow:hidden;
    }


    .tlb-header__main{
        height:auto;
        min-height:78px;

        padding:
            11px
            15px;

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

        gap:
            9px
            14px;
    }


    .tlb-logo__image{
        height:48px;
    }


    .tlb-actions{
        gap:10px;
    }


    .tlb-action{
        min-width:35px;

        font-size:0;
    }


    .tlb-search{
        grid-column:1/-1;

        height:44px;
    }


    .tlb-nav{
        height:auto;

        min-height:58px;

        padding:
            7px
            15px;

        grid-template-columns:
            minmax(170px,1fr)
            180px;

        gap:8px;
    }


    .tlb-nav__links{
        grid-column:1/-1;

        width:100%;
        height:40px;

        overflow-x:auto;

        justify-content:flex-start;

        scrollbar-width:none;
    }


    .tlb-nav__links::-webkit-scrollbar{
        display:none;
    }


    .tlb-nav__links > a{
        height:40px;

        flex:0 0 auto;
    }


    .tlb-catalog[open]
    .tlb-mega{
        display:block;
    }


    .tlb-mega{
        position:fixed;

        z-index:99999;

        inset:0;

        width:100vw;
        height:100dvh;

        overflow-y:auto;

        border:0;

        border-radius:0;

        background:#fff;
    }


    .tlb-mega__mobile-head{
        position:sticky;

        z-index:20;

        top:0;

        min-height:64px;

        padding:
            10px
            14px;

        display:flex;

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

        gap:15px;

        border-bottom:1px solid #eee;

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

        backdrop-filter:
            blur(12px);
    }


    .tlb-mega__mobile-head strong{
        display:block;

        font-size:11px;
    }


    .tlb-mega__mobile-head span{
        display:block;

        margin-top:3px;

        color:#998b90;

        font-size:6px;
    }


    .tlb-mega__mobile-head button{
        width:38px;
        height:38px;

        display:grid;

        place-items:center;

        border:1px solid #eee;

        border-radius:9px;

        color:#584a4f;

        background:#fff;

        cursor:pointer;
    }


    .tlb-mega__mobile-head button svg{
        width:18px;
        height:18px;
    }


    .tlb-mega__top{
        min-height:76px;

        padding:
            14px
            15px;
    }


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


    .tlb-mega__groups{
        display:flex;

        gap:7px;

        overflow-x:auto;

        border-right:0;
        border-bottom:1px solid #eee;

        scrollbar-width:none;
    }


    .tlb-mega__groups::-webkit-scrollbar{
        display:none;
    }


    .tlb-mega-group{
        width:180px;

        flex:0 0 180px;
    }


    .tlb-mega__ai{
        min-width:195px;

        margin-top:0;
    }


    .tlb-mega__panels{
        padding:
            15px;
    }


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

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:560px){

    .tlb-header__main{
        padding-inline:12px;
    }


    .tlb-logo__image{
        height:43px;
    }


    .tlb-actions{
        gap:7px;
    }


    .tlb-action:first-of-type{
        display:none;
    }


    .tlb-nav{
        grid-template-columns:
            1fr
            52px;

        padding-inline:12px;
    }


    .tlb-catalog__copy small{
        display:none;
    }


    .tlb-ai{
        width:52px;

        padding:0;

        justify-content:center;
    }


    .tlb-ai > svg,
    .tlb-ai > span{
        display:none;
    }


    .tlb-ai b{
        margin:0;
    }


    .tlb-mega__top h3{
        font-size:14px;
    }


    .tlb-mega__all{
        display:none;
    }


    .tlb-mega-group{
        width:165px;

        flex-basis:165px;
    }


    .tlb-mega-panel__grid{
        grid-template-columns:1fr;
    }


    .tlb-mega-category{
        min-height:62px;
    }


    .tlb-mega-panel__popular-grid{
        grid-template-columns:1fr;
    }


    .tlb-mega__footer{
        padding:
            10px
            14px;

        flex-direction:column;

        align-items:flex-start;
    }

}


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

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

    .tlb-header *,
    .tlb-header *::before,
    .tlb-header *::after{
        transition:none!important;
        animation:none!important;
    }

}