/* =========================================================
   THICHLAMBANH
   TOP BAR V5
========================================================= */


/* =========================================================
   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-top-height:36px;

    --tlb-top-pink:#ed0754;
    --tlb-top-pink-dark:#d90049;
}


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

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


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

.tlb-top{
    position:relative;

    z-index:120;

    width:100%;
    height:var(--tlb-top-height);

    margin:0;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #ed0754 0%,
            #ee0755 55%,
            #e60750 100%
        );

    border-bottom:
        1px
        solid
        rgba(255,255,255,.18);

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

    font-synthesis:none;

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

    white-space:nowrap;
}


/* subtle shine */

.tlb-top::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.045),
            transparent 35%,
            rgba(255,255,255,.025) 72%,
            transparent
        );
}


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

.tlb-top a{
    color:inherit;

    text-decoration:none;
}


/* =========================================================
   INNER
========================================================= */

.tlb-top__inner{
    position:relative;

    z-index:2;

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

    margin:0 auto;

    padding:
        0
        28px;

    display:flex;

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

    gap:25px;
}


/* =========================================================
   BENEFITS
========================================================= */

.tlb-top__benefits{
    min-width:0;

    flex:1 1 auto;

    display:grid;

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

    align-items:center;
}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.tlb-top__benefit{
    position:relative;

    min-width:0;
    height:100%;

    padding:
        0
        15px;

    display:flex;

    align-items:center;

    gap:7px;

    font-size:8px;

    font-weight:500;

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


.tlb-top__benefit:first-child{
    padding-left:0;
}


.tlb-top__benefit:not(:last-child)::after{
    content:"";

    position:absolute;

    top:10px;
    right:0;

    width:1px;
    height:16px;

    background:
        rgba(255,255,255,.16);
}


.tlb-top__benefit:hover{
    opacity:.86;
}


/* =========================================================
   ICON
========================================================= */

.tlb-top__icon{
    width:14px;
    height:14px;

    flex:0 0 14px;

    display:grid;

    place-items:center;

    color:#fff;
}


.tlb-top__icon svg{
    display:block;

    width:14px;
    height:14px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* =========================================================
   TEXT
========================================================= */

.tlb-top__text{
    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.tlb-top__text-short{
    display:none;
}


/* =========================================================
   UTILITIES
========================================================= */

.tlb-top__utilities{
    height:100%;

    flex:0 0 auto;

    display:flex;

    align-items:center;
}


/* =========================================================
   UTILITY
========================================================= */

.tlb-top__utility{
    height:100%;

    display:flex;

    align-items:center;

    gap:6px;

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


.tlb-top__utility:hover{
    opacity:.86;
}


/* =========================================================
   DOWNLOAD
========================================================= */

.tlb-top__download{
    padding:
        0
        14px;

    border-left:
        1px
        solid
        rgba(255,255,255,.16);

    border-right:
        1px
        solid
        rgba(255,255,255,.2);

    font-size:8px;

    font-weight:500;
}


/* =========================================================
   SUPPORT
========================================================= */

.tlb-top__support{
    min-width:93px;

    padding-left:14px;

    gap:7px;
}


.tlb-top__support-icon{
    display:none;

    width:14px;
    height:14px;

    flex:0 0 14px;
}


.tlb-top__support-icon svg{
    width:14px;
    height:14px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.tlb-top__support-copy{
    display:flex;

    align-items:center;

    gap:5px;

    font-size:8px;
}


.tlb-top__support-copy > span{
    font-weight:600;
}


.tlb-top__support-copy strong{
    display:none;

    font-size:8px;

    font-weight:700;
}


/* =========================================================
   KEYBOARD
========================================================= */

.tlb-top a:focus-visible{
    outline:
        2px
        solid
        rgba(255,255,255,.95);

    outline-offset:-3px;

    border-radius:3px;
}


/* =========================================================
   <= 1250
========================================================= */

@media(max-width:1250px){

    .tlb-top__inner{
        padding-inline:22px;
    }


    .tlb-top__benefit{
        padding-inline:10px;

        font-size:7.5px;
    }


    .tlb-top__download{
        padding-inline:11px;
    }

}


/* =========================================================
   <= 1050
========================================================= */

@media(max-width:1050px){

    .tlb-top__text-full{
        display:none;
    }


    .tlb-top__text-short{
        display:inline;
    }


    .tlb-top__benefit{
        font-size:7.5px;
    }

}


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

@media(max-width:900px){

    :root{
        --tlb-top-height:34px;
    }


    .tlb-top__inner{
        width:100%;

        padding:
            0
            14px;

        overflow-x:auto;

        gap:20px;

        scrollbar-width:none;
    }


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


    .tlb-top__benefits{
        flex:0 0 auto;

        display:flex;
    }


    .tlb-top__benefit{
        flex:0 0 auto;

        padding:
            0
            15px;

        font-size:7.5px;
    }


    .tlb-top__benefit:first-child{
        padding-left:0;
    }


    .tlb-top__utilities{
        flex:0 0 auto;
    }


    .tlb-top__download{
        border-left:0;
    }

}


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

@media(max-width:560px){

    :root{
        --tlb-top-height:32px;
    }


    .tlb-top__inner{
        padding-inline:12px;

        gap:16px;
    }


    /*
     * Mobile ưu tiên 2 trust signal chính.
     */

    .tlb-top__benefit:nth-child(3),
    .tlb-top__benefit:nth-child(4){
        display:none;
    }


    .tlb-top__benefit{
        padding:
            0
            13px;

        font-size:7px;
    }


    .tlb-top__benefit:nth-child(2)::after{
        display:none;
    }


    /*
     * Download app bớt ưu tiên trên mobile header.
     */

    .tlb-top__download{
        display:none;
    }


    /*
     * Support giữ lại.
     */

    .tlb-top__support{
        min-width:auto;

        padding-left:5px;

        border-left:
            1px
            solid
            rgba(255,255,255,.2);
    }


    .tlb-top__support-icon{
        display:grid;

        place-items:center;
    }


    .tlb-top__support-copy > span{
        display:none;
    }


    .tlb-top__support-copy strong{
        display:block;
    }

}


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

@media(max-width:390px){

    /*
     * Chỉ giữ freeship + hotline nếu màn hình rất nhỏ.
     */

    .tlb-top__benefit:nth-child(2){
        display:none;
    }


    .tlb-top__benefit:first-child::after{
        display:none;
    }

}


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

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

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

}