/* =========================================================
   THICHLAMBANH
   HOME HERO V4
========================================================= */


/* =========================================================
   FONT
========================================================= */

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


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


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


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


/* =========================================================
   VARIABLES
========================================================= */

:root{
    --tlb-hero-pink:#ed0754;
    --tlb-hero-pink-dark:#cf0048;

    --tlb-hero-text:#2d1d22;
    --tlb-hero-muted:#76676c;

    --tlb-hero-border:#f5dfe6;

    --tlb-hero-soft:#fff4f7;
    --tlb-hero-soft-2:#fffafb;

    --tlb-hero-radius:14px;
}


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

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


.tlb-hero-wrap{
    width:100%;

    padding:
        10px
        20px
        0;

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


.tlb-hero-wrap a{
    text-decoration:none;
}


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

.tlb-hero{
    position:relative;

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

    margin:0 auto;

    display:grid;

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

    gap:0;

    overflow:hidden;

    border:
        1px
        solid
        #f8e8ed;

    border-radius:
        var(--tlb-hero-radius);

    background:#fff;

    box-shadow:
        0 3px 14px
        rgba(94,28,50,.04);

    color:
        var(--tlb-hero-text);
}


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

.tlb-hero__main{
    position:relative;

    min-width:0;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            105deg,
            #fff1f4 0%,
            #fff8fa 42%,
            #fff4f6 100%
        );
}


/* =========================================================
   DECOR
========================================================= */

.tlb-hero__glow{
    position:absolute;

    z-index:0;

    display:block;

    border-radius:50%;

    pointer-events:none;
}


.tlb-hero__glow--one{
    width:430px;
    height:430px;

    right:70px;
    top:-210px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.30) 43%,
            transparent 70%
        );
}


.tlb-hero__glow--two{
    width:350px;
    height:350px;

    left:-130px;
    bottom:-250px;

    background:
        radial-gradient(
            circle,
            rgba(255,199,216,.42) 0%,
            transparent 70%
        );
}


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

.tlb-hero__content{
    position:relative;

    z-index:5;

    width:47%;
    max-width:540px;
    height:100%;

    padding:
        28px
        0
        20px
        48px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}


.tlb-hero__eyebrow{
    display:inline-flex;

    width:max-content;

    margin-bottom:7px;

    color:#d80b4c;

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

    font-weight:700;

    letter-spacing:.5px;
}


.tlb-hero__content h1{
    margin:0;

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

    font-size:31px;
    line-height:1.18;

    font-weight:700;

    letter-spacing:-.8px;
}


.tlb-hero__content p{
    margin:
        8px
        0
        14px;

    color:#3e2a31;

    font-size:13px;
    line-height:1.55;

    font-weight:500;
}


/* =========================================================
   ASK AI
========================================================= */

.tlb-hero__ask{
    position:relative;

    width:100%;
    max-width:470px;
    height:52px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border:
        1.5px
        solid
        #ff76a4;

    border-radius:11px;

    background:#fff;

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


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

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


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

    flex:1 1 auto;

    padding:
        0
        14px
        0
        15px;

    border:0;
    outline:0;

    color:#47343a;

    background:transparent;

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


.tlb-hero__ask input::placeholder{
    color:#918489;

    opacity:1;
}


.tlb-hero__ask button{
    width:36px;
    height:36px;

    flex:0 0 36px;

    margin-right:7px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    color:#fff;

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

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.tlb-hero__ask button:hover{
    background:
        var(--tlb-hero-pink-dark);

    transform:
        translateY(-1px);
}


.tlb-hero__ask button svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* =========================================================
   CHIPS
========================================================= */

.tlb-hero__chips{
    width:100%;

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:6px;

    overflow:hidden;
}


.tlb-hero__chips button,
.tlb-hero__chips a{
    height:29px;

    flex:0 0 auto;

    padding:
        0
        10px;

    display:inline-flex;

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

    border:
        1px
        solid
        #f2c7d4;

    border-radius:6px;

    color:#b91851;

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

    font:
        600
        9px/1
        "Be Vietnam Pro",
        Arial,
        sans-serif;

    cursor:pointer;

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


.tlb-hero__chips button:hover,
.tlb-hero__chips button.is-active,
.tlb-hero__chips a:hover{
    border-color:
        var(--tlb-hero-pink);

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

    background:#fff;

    transform:
        translateY(-1px);
}


.tlb-hero__chips a{
    min-width:48px;

    font-size:14px;

    letter-spacing:2px;
}


/* =========================================================
   HERO ART WRAPPER
========================================================= */

.tlb-hero__art-wrap{
    position:absolute;

    z-index:2;

    top:0;
    right:0;
    bottom:0;

    width:59%;

    display:flex;

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

    overflow:hidden;

    pointer-events:none;
}


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

.tlb-hero__art{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:
        center
        bottom;

    pointer-events:none;

    user-select:none;
}


/* =========================================================
   DEAL CARD
========================================================= */

.tlb-hero__deal{
    position:relative;

    min-width:0;

    margin:
        9px
        9px
        9px
        0;

    padding:
        16px
        16px
        12px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:
        1px
        solid
        #f3e8eb;

    border-radius:11px;

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

    box-shadow:
        0 5px 18px
        rgba(77,30,45,.05);
}


/* =========================================================
   DEAL HEADER
========================================================= */

.tlb-deal__heading{
    position:relative;

    z-index:3;

    min-height:36px;

    display:flex;

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

    gap:8px;
}


.tlb-deal__heading > div > span{
    display:block;

    margin-bottom:3px;

    color:#a78e96;

    font-size:6px;

    font-weight:600;
}


.tlb-deal__heading h2{
    margin:0;

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

    font-size:13px;
    line-height:1.15;

    font-weight:700;
}


.tlb-deal__heading > a{
    margin-top:3px;

    display:inline-flex;

    align-items:center;

    gap:3px;

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

    font-size:6.5px;

    font-weight:600;

    white-space:nowrap;
}


/* =========================================================
   DEAL PRODUCT
========================================================= */

.tlb-deal__product{
    min-width:0;

    flex:1 1 auto;

    display:grid;

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

    gap:9px;

    align-items:center;

    color:
        var(--tlb-hero-text);
}


/* =========================================================
   DEAL MEDIA
========================================================= */

.tlb-deal__media{
    position:relative;

    min-width:0;
}


.tlb-deal__sale{
    position:absolute;

    z-index:4;

    top:0;
    left:0;

    width:39px;
    height:39px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#fff;

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

    font-size:10px;

    font-weight:700;

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


.tlb-deal__image-wrap{
    width:112px;
    height:125px;

    display:flex;

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

    overflow:hidden;
}


.tlb-deal__image{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 7px
            rgba(82,45,54,.10)
        );

    transition:
        transform .22s ease;
}


.tlb-deal__product:hover
.tlb-deal__image{
    transform:
        scale(1.035);
}


.tlb-deal__placeholder{
    width:90px;
    height:90px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#fff4f7;

    font-size:40px;
}


/* =========================================================
   DEAL INFO
========================================================= */

.tlb-deal__info{
    min-width:0;
}


.tlb-deal__info h3{
    margin:
        0
        0
        8px;

    display:-webkit-box;

    overflow:hidden;

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

    color:#322328;

    font-size:10px;
    line-height:1.4;

    font-weight:600;
}


.tlb-deal__prices{
    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:6px;
}


.tlb-deal__prices strong{
    color:
        var(--tlb-hero-pink);

    font-size:15px;
    line-height:1;

    font-weight:700;
}


.tlb-deal__prices del{
    color:#9b8f93;

    font-size:7.5px;
}


.tlb-deal__stock{
    margin-top:8px;

    display:flex;

    align-items:center;

    gap:5px;

    color:#28854e;

    font-size:6.5px;

    font-weight:600;
}


.tlb-deal__stock i{
    width:6px;
    height:6px;

    display:block;

    border-radius:50%;

    background:#31a662;
}


/* =========================================================
   BUY BUTTON
========================================================= */

.tlb-deal__buy{
    width:100%;
    height:34px;

    flex:0 0 34px;

    display:flex;

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

    gap:7px;

    border-radius:6px;

    color:#fff;

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

    font-size:9px;

    font-weight:700;

    transition:
        background .18s ease,
        transform .18s ease;
}


.tlb-deal__buy:hover{
    background:
        var(--tlb-hero-pink-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   COUNTDOWN
========================================================= */

.tlb-deal__countdown{
    min-height:32px;

    margin-top:8px;

    display:flex;

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

    gap:8px;
}


.tlb-deal__countdown > span{
    color:#8a7c81;

    font-size:6px;

    white-space:nowrap;
}


.tlb-deal__countdown > div{
    display:flex;

    align-items:center;

    gap:3px;
}


.tlb-deal__countdown b{
    min-width:25px;
    height:24px;

    padding:
        0
        3px;

    display:grid;

    place-items:center;

    border:
        1px
        solid
        #ffc4d6;

    border-radius:4px;

    color:#422e35;

    background:#fff;

    font-size:9px;

    line-height:1;

    font-weight:600;
}


.tlb-deal__countdown i{
    color:#806f75;

    font-size:9px;

    font-style:normal;
}


/* =========================================================
   SCREEN READER
========================================================= */

.tlb-sr-only{
    position:absolute!important;

    width:1px!important;
    height:1px!important;

    padding:0!important;

    margin:-1px!important;

    overflow:hidden!important;

    clip:rect(0,0,0,0)!important;

    white-space:nowrap!important;

    border:0!important;
}


/* =========================================================
   1200
========================================================= */

@media(max-width:1200px){

    .tlb-hero{
        grid-template-columns:
            minmax(0,1fr)
            300px;
    }


    .tlb-hero__content{
        width:51%;

        padding-left:34px;
    }


    .tlb-hero__art-wrap{
        width:55%;
    }


    .tlb-hero__chips button:nth-child(5){
        display:none;
    }

}


/* =========================================================
   1000
========================================================= */

@media(max-width:1000px){

    .tlb-hero{
        height:300px;

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


    .tlb-hero__content{
        width:57%;

        padding-left:27px;
    }


    .tlb-hero__content h1{
        font-size:27px;
    }


    .tlb-hero__content p{
        font-size:12px;
    }


    .tlb-hero__chips button:nth-child(4){
        display:none;
    }


    .tlb-deal__product{
        grid-template-columns:
            90px
            minmax(0,1fr);
    }


    .tlb-deal__image-wrap{
        width:90px;
        height:115px;
    }

}


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

@media(max-width:800px){

    .tlb-hero-wrap{
        padding:
            10px
            12px
            0;
    }


    .tlb-hero{
        height:auto;

        grid-template-columns:1fr;

        gap:10px;

        overflow:visible;

        border:0;

        background:transparent;

        box-shadow:none;
    }


    .tlb-hero__main{
        height:315px;

        overflow:hidden;

        border:
            1px
            solid
            #f5e4e9;

        border-radius:13px;
    }


    .tlb-hero__content{
        width:58%;

        padding:
            24px
            0
            20px
            24px;
    }


    .tlb-hero__art-wrap{
        width:58%;
    }


    .tlb-hero__deal{
        height:230px;

        margin:0;

        padding:15px;

        border-radius:13px;
    }


    .tlb-deal__product{
        grid-template-columns:
            150px
            minmax(0,1fr);
    }


    .tlb-deal__image-wrap{
        width:145px;
        height:125px;
    }


    .tlb-deal__info h3{
        font-size:11px;

        -webkit-line-clamp:2;
    }


    .tlb-deal__prices strong{
        font-size:16px;
    }

}


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

@media(max-width:560px){

    .tlb-hero__main{
        height:345px;
    }


    .tlb-hero__content{
        width:100%;
        max-width:none;

        padding:
            22px
            18px;
    }


    .tlb-hero__eyebrow{
        font-size:7px;
    }


    .tlb-hero__content h1{
        font-size:25px;
    }


    .tlb-hero__content p{
        font-size:11.5px;
    }


    .tlb-hero__ask{
        max-width:none;
    }


    .tlb-hero__chips{
        overflow-x:auto;

        padding-bottom:4px;

        scrollbar-width:none;
    }


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


    /*
     * ART becomes soft background on small screen.
     */

    .tlb-hero__art-wrap{
        z-index:1;

        right:-15%;

        width:90%;

        opacity:.14;
    }


    .tlb-hero__content{
        z-index:5;
    }


    .tlb-hero__deal{
        height:auto;

        min-height:245px;
    }


    .tlb-deal__product{
        grid-template-columns:
            110px
            minmax(0,1fr);

        min-height:125px;
    }


    .tlb-deal__image-wrap{
        width:105px;
        height:115px;
    }


    .tlb-deal__buy{
        margin-top:4px;
    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media(max-width:390px){

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


    .tlb-hero__ask input{
        font-size:9.5px;
    }


    .tlb-hero__chips button{
        padding:
            0
            9px;

        font-size:8px;
    }


    .tlb-deal__product{
        grid-template-columns:
            95px
            minmax(0,1fr);
    }


    .tlb-deal__image-wrap{
        width:90px;
    }

}


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

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

    .tlb-hero-wrap *,
    .tlb-hero-wrap *::before,
    .tlb-hero-wrap *::after{
        scroll-behavior:auto!important;

        transition:none!important;

        animation:none!important;
    }

}