@font-face {
    font-family: Shopee Bold;
    src: url(/../../fonts/ShopeeFont/ShopeeDisplay-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-family: Shopee Display;
    src: url(/../../fonts/ShopeeFont/ShopeeDisplay-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-family: Helvetica Neue;
    src: url(../../fonts/HelveticaNeue.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: Helvetica Neue Bold;
    src: url(/../../fonts/HelveticaNeue-Bold.ttf) format("truetype");
    src: url(/../../fonts/HelveticaNeue-Bold.otf) format("opentype");
    font-display: swap
}

@font-face {
    font-family: Helvetica Neue Italic;
    src: url(/../../fonts/HelveticaNeue-Italic.ttf) format("truetype");
    src: url(/../../fonts/HelveticaNeue-Italic.otf) format("opentype");
    font-display: swap
}

@font-face {
    font-family: Helvetica Neue Medium;
    src: url(/../../fonts/HelveticaNeue-Medium.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: Helvetica Neue Regular;
    src: url(/../../fonts/HelveticaNeue/helvetica-neue-regular.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: Con Cung;
    src: url(../../fonts/ConCung-Font.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: Nunito;
    src: url(/../../fonts/Nunito/Nunito-Regular.ttf) format("truetype")
}
body{
    background:#f3f3f3;
    font-family: "Helvetica Neue";
    /* color: #111; */
    --font-family-sans-serif: "Helvetica Neue", sans-serif;
}


.text-shadow{
    text-shadow: 2px 2px 5px #000;
}
.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 100%;
}
.carousel-inner{
    & .carousel-item{
        max-height: 8rem;
        & img{
            object-fit: cover;
        }
    }
}
ul.nav.nav-tabs{
    & li.nav-item{
        border: none;
        & button.nav-link{
            color:#8d7046;
        }
        & button.nav-link.active{
            color:#000;
            background: unset;
        }
    }
}
.bg-login-img{
    background-image: linear-gradient(178178deg, hsla(0, 0%, 100%, 0), #ffd1de, #FED8EB), url(../img/bg.png);
    /*background-image: linear-gradient(178178deg, hsla(0, 0%, 100%, 0), #179fd0, #006db8), url(../img/loginbg.png);*/
    background-position: 80% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
}
.bg-body{
    background-image: linear-gradient(178178deg, hsla(0, 0%, 100%, 0), #ffd1de, #FED8EB), url(../img/bg.png);
    background-position: 80% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
}
.bg-body{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    /*background: url(../img/bg_login.e11831ba.png) no-repeat 50%;*/
    /*background-size: cover;*/
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.bg-login, .bg-body{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    /*background: url(../img/bg_login.e11831ba.png) no-repeat 50%;*/
    /*background-size: cover;*/
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    & .logo{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 0 1rem;
        position: relative;
        & img{
            width: 12rem;
        }
    }
    & form{
        & .input-group{
            & span{
                color:#ceab77;
                border:none;
                background-color: #373430;
                border-top-left-radius: 1.5rem !important;
                border-bottom-left-radius: 1.5rem;
            }
            & input{
                /*color:#fff;*/
                font-size: 1rem;
                /*background-color: #373430;*/
                border-radius: 0.5rem;
                /*border-top-right-radius: 1.5rem !important;*/
                /*border-bottom-right-radius: 1.5rem;*/
                border: none;
                outline: none;
            }
        }
    }
}
@keyframes up-top1 {
    from {
        transform: translateY(50%);
    }
    to {
        transform: translateY(-150%);
    }
    /* from {
        transform: translateY(50%);
    }
    to {
        transform: translateY(-150%);
    } */
}
@keyframes up-top2 {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(-250%);
    }
}

/*.bg-home{*/
/*    background-image: url(../img/new_bg2.7d34e656.jpg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    & ul.trending-map1{*/
/*        !* & li p{*/
/*            color:red !important;*/
/*        } *!*/
/*        animation: up-top1 30s linear infinite;*/
/*    }*/
/*    & ul.trending-map2{*/
/*        !* & li p{*/
/*            color:green !important;*/
/*        } *!*/
/*        animation-delay: 15s !important;*/
/*        animation: up-top2 30s linear infinite;*/
/*    }*/
/*}*/
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
.wheel,
.wheel__spin {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}
.wheel__spin h4 {
    color: #113b49;
    font-size: 16px;
    font-weight: 500;
    margin: 15px 15px 0;
    text-align: center;
    text-transform: uppercase;
}
.wheel__spin img {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    height: 120px;
    width: 120px;
}
.bg-list{
    background-color: #f3f3f3;
}
.btn-follow{
    background-color: #e2cba7;
    border-radius: 0.17rem;
    color: #38373b;
    margin: 0;
    padding: 0;
}
.bg-my{
    background-color: #f3f3f3;
}
.bg-theme{
    background-color: #f3f3f3;
}
.btn-theme-l{
    border-radius: 1rem 0 0 1rem;
    background: linear-gradient(0deg, #ceab77, #eddbc1);
    color: #f3f3f3;
    display: flex;
    align-items: center;
}
.bg-play{
    width: 100%;
    height: 100%;
    background-image: url(../img/bg2.92172e66.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-user{
    background: #000 url(../img/mcbg.50cfd429.png) no-repeat top;
    background-size: contain;
}
.thmilk, .vinamilk {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 10px;
}
.thmilk {
    background-image: url(../img/enfamil.png);
    height: 40px;
    position: relative;
    /*top: -2px;*/
    width: 60px;
}
.vinamilk {
    background-image: url(../img/ensuregold.jpg);
    height: 40px;
    width: 60px;
}

.text-secondary{
    color: #006db8 !important;
}
.level{

}
.level0{

}
.level1{

}
.level2{

}
.level3{

}
.level4{

}
.level5{

}
.level6{

}
.level7{

}
.level8{

}
.bg-level{
    background: #000 url(../img/grade-bg.19f1b669.png) no-repeat top;
    background-size: contain;
}
.i-1r{
    height: 1rem;
}
.txt-t-white{
    color:#fff8e9;
}
.text-theme{
    color:#8e7654;
}
.text-yellow{
    color:#eecb77;
}
.txt-theme{
    color:#f7d6a5;
}
.bg-linear{
    /*background:#113b49;*/
    background: #d3588f;
    /*background-image: linear-gradient(0deg, #ceab77, #eddbc1);*/
}
.text-pink{
    color:#ff379b;
}
.text-linear{
    color:#113b49;
}
.border-theme{
    border-color: #113b49 !important;
}
.text-cc{
    color:#555;
}
.btn-cc{
    background-color: #b7b7b7;
    color:#fff;
}
.font-cc{
    font-family: "Con Cung", "Helvetica Neue", sans-serif;
}

/* Horizontal scroll for categories tabs */
.nav-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 0.5rem 0;
}

.nav-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.nav-scroll .nav-item {
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-scroll .nav-link {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.nav-scroll .nav-link:hover {
    background-color: rgba(0, 161, 180, 0.1);
}

.nav-scroll .nav-link.active {
    /* background-color: #00a1b4; */
    /* color: #f54282 !important; */
    /* border-bottom: 3px solid #ff379b; */
}
/* .nav-scroll .nav-link.text-cc.active:after {
    position: absolute;
    left: 20px;
    bottom: 5px;
    width: 36px;
    background: #ff379b;
    height: 3px;
    border-radius: 4px;
    content: "";
} */