/**
 * NgoiSaoSo team
 * @version 3.x
 * @contact: xinchao@ngoisaoso.vn
 * @see https://www.ngoisaoso.vn
 */

/*ADD OTHER*/
:root {
    --brand-primary-color: #ea6592;
    --brand-secondary-color: #505151;
}
body {
    color: var(--brand-secondary-color);
}
.text-color-brand-primary{
    color: var(--brand-primary-color);
}
.header-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

.nav-up {
    top: 0px;
    transition: transform .5s ease .2s;
    transform: translateY(-100%);
}

.nav-down {
    transition: transform .5s ease .2s;
    top: 0px;
}

.nav-link:hover, .nav-link:focus {
    color: var(--brand-primary-color);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--brand-primary-color);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-hover-light:hover .navbar-nav .nav-link:hover, .navbar-hover-light:hover .navbar-nav .nav-link:focus, .navbar-fixed-light.fixed-top .navbar-nav .nav-link:hover, .navbar-fixed-light.fixed-top .navbar-nav .nav-link:focus {
    color: var(--brand-primary-color);
}
footer.is_ad{
    margin-bottom:50px;
}
@media (max-width: 767.98px) {
    .header-fixed {
        top: -32px;
    }
   
}
.fs-7 {
    font-size: 0.9rem !important
}
.fs-8 {
    font-size: 0.8rem !important
}
.fs-9 {
    font-size: 0.7rem !important
}
.fs-10 {
    font-size: 0.6rem !important
}
.nav-link.active {
    color: var(--brand-primary-color);
}
.navbar-light .navbar-nav .nav-link,
.navbar-hover-light:hover .navbar-nav .nav-link,
.navbar-fixed-light.fixed-top .navbar-nav .nav-link {
    color: var(--brand-secondary-color);
}

/* Các tùy chỉnh CSS của giao diện nên để vào đây */
.logo {
    height: 65px;
}

.navbar-brand {
    padding-top: 0rem;
    padding-bottom: 0rem;
}
.navbar-brand img{
    max-width: 220px
}
.logo-mobile {
    max-width: 120px;
}

.hero-image {
    padding-top: 220px;
    padding-bottom: 180px;
    text-align: center;
}

.toast {
    position: fixed;
    width: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    z-index: 99999;
}

.modal-right {
    z-index: 99999 !important;
}

.wh-svg-icon-20 {
    width: 20px;
    height: 20px
}

.wh-svg-icon {
    width: 32px;
    height: 32px
}

.theme-line-white {
    --layer2: #ffffff;
    --layer1: #ffffff;
}

.theme-line-0 {
    --layer2: #202020;
    --layer1: #202020;
}

.theme-line-5 {
    --layer1: #202020;
    --layer2: #202020;
}

.theme-line-12 {
    --layer2: #202020;
}

.theme-line-60 {
    --layer1: #202020;
}

.theme-line-134 {
    --layer3: #202020;
    --layer2: #202020;
    --layer1: #202020;
}

/*change alert*/
.alert-primary {
    color: #716747;
    background-color: transparent;
    border-color: #d0c59f
}

.alert-primary .alert-link {
    color: #5a5239
}

.alert-secondary {
    color: #514c3c;
    background-color: transparent;
    border-color: #aba593
}

.alert-secondary .alert-link {
    color: #413d30
}

.alert-success {
    color: #186429;
    background-color: transparent;
    border-color: #69c17d
}

.alert-success .alert-link {
    color: #135021
}

.alert-info,
.alert-info .alert-link,
.alert-warning,
.alert-warning .alert-link,
.alert-danger,
.alert-danger .alert-link,
.alert-dark {
    background-color: transparent;
    color: var(--bs-gray-dark);
}

/* steppe edit */
a {
    color: var(--brand-secondary-color);
}

.navbar-icon-badge {
    background: var(--brand-primary-color);
}

.text-primary {
    color: var(--brand-primary-color) !important;
}
.text-secondary {
    color: var(--brand-secondary-color) !important;
}

.swiper-pagination-bullet-active {
    background: var(--brand-primary-color) !important;
}

.btn-link {
    color: var(--brand-primary-color);
}

.btn-link:hover {
    color: var(--brand-primary-color);
}

.btn-primary {
    background-color: var(--brand-primary-color);
    border-color: var(--brand-primary-color);
    color: white;
    padding: 10px 30px;
    border-radius: 30px;
}

.text-primary-hover:hover {
    color: var(--brand-primary-color) !important;
}

a:hover {
    color: var(--brand-primary-color);
}

.text-success {
    color: var(--brand-primary-color) !important;
}

.btn-dark:hover {
    background-color: var(--bs-gray);
    border-color: var(--bs-gray);
}

.btn-outline-dark:hover {
    background-color: var(--brand-primary-color);
    border-color: var(--brand-primary-color);
}

.btn-primary:hover {
    color: white;
    background-color: var(--bs-gray);
    border-color: var(--bs-gray);
}

.product-label-boxed {
    padding: 0.25rem 0.8rem;
    font-size: 0.6rem;
}

.bg-info {
    background-color: rgba(var(--bs-muted-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.btn-outline-primary {
    color: var(--brand-primary-color);
    border-color: var(--brand-primary-color);
}
.fix-img-height{
    position: relative;
    height: 220px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: block;
    background-size: cover;
    background-position: center;
}

.pt-8 {
    padding-top: 10rem !important
}

.pt-9 {
    padding-top: 12rem !important
}
.pt-10 {
    padding-top: 14rem !important
}

.pb-8 {
    padding-bottom: 10rem !important
}

.pb-9 {
    padding-bottom: 12rem !important
}
.pb-10 {
    padding-bottom: 14rem !important
}

.px-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
}

.px-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
}
.px-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
}

.py-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
}

.py-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
}
.py-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
}

.subtitle {
    font-size: 0.7rem;
}

@media (min-width: 992px){
    .pt-lg-8 {
        padding-top: 10rem !important
    }
    
    .pt-lg-9 {
        padding-top: 12rem !important
    }
    .pt-lg-10 {
        padding-top: 14rem !important
    }
    
    .pb-lg-8 {
        padding-bottom: 10rem !important
    }
    
    .pb-lg-9 {
        padding-bottom: 12rem !important
    }
    .pb-lg-10 {
        padding-bottom: 14rem !important
    }
    
    .px-lg-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .px-lg-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .px-lg-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
    
    .py-lg-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .py-lg-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .py-lg-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
}

@media (min-width: 576px){
    .pt-sm-8 {
        padding-top: 10rem !important
    }
    
    .pt-sm-9 {
        padding-top: 12rem !important
    }
    .pt-sm-10 {
        padding-top: 14rem !important
    }
    
    .pb-sm-8 {
        padding-bottom: 10rem !important
    }
    
    .pb-sm-9 {
        padding-bottom: 12rem !important
    }
    .pb-sm-10 {
        padding-bottom: 14rem !important
    }
    
    .px-sm-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .px-sm-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .px-sm-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
    
    .py-sm-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .py-sm-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .py-sm-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
}
@media (min-width: 768px){
    .pt-md-8 {
        padding-top: 10rem !important
    }
    
    .pt-md-9 {
        padding-top: 12rem !important
    }
    .pt-md-10 {
        padding-top: 14rem !important
    }
    
    .pb-md-8 {
        padding-bottom: 10rem !important
    }
    
    .pb-md-9 {
        padding-bottom: 12rem !important
    }
    .pb-md-10 {
        padding-bottom: 14rem !important
    }
    
    .px-md-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .px-md-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .px-md-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
    
    .py-md-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .py-md-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .py-md-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
}
@media (min-width: 1200px){
    .pt-xl-8 {
        padding-top: 10rem !important
    }
    
    .pt-xl-9 {
        padding-top: 12rem !important
    }
    .pt-xl-10 {
        padding-top: 14rem !important
    }
    
    .pb-xl-8 {
        padding-bottom: 10rem !important
    }
    
    .pb-xl-9 {
        padding-bottom: 12rem !important
    }
    .pb-xl-10 {
        padding-bottom: 14rem !important
    }
    
    .px-xl-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .px-xl-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .px-xl-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
    
    .py-xl-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .py-xl-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .py-xl-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
}
@media (min-width: 1400px){
    .pt-xxl-8 {
        padding-top: 10rem !important
    }
    
    .pt-xxl-9 {
        padding-top: 12rem !important
    }
    .pt-xxl-10 {
        padding-top: 14rem !important
    }
    
    .pb-xxl-8 {
        padding-bottom: 10rem !important
    }
    
    .pb-xxl-9 {
        padding-bottom: 12rem !important
    }
    .pb-xxl-10 {
        padding-bottom: 14rem !important
    }
    
    .px-xxl-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .px-xxl-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .px-xxl-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
    
    .py-xxl-8 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }
    
    .py-xxl-9 {
        padding-bottom: 12rem !important;
        padding-right: 12rem !important;
    }
    .py-xxl-10 {
        padding-bottom: 14rem !important;
        padding-right: 14rem !important;
    }
}