

.box-icon{
    background-color: var(--input-disable-color);
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
}
.box-icon img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.box-icon .icon-num-badge{
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--invalid-color);
    color: white;
}
/*.box-icon::after {*/
/*    content: attr(data-notity);*/
/*    position: absolute;*/
/*    top: 4px;*/
/*    right: 4px;*/
/*    background: var(--invalid-color);*/
/*    color: white;*/
/*    border-radius: 100%;*/
/*    font-weight: 500;*/
/*    font-size: 10px;*/
/*    line-height: 16px;*/
/*    padding: 0 5px;*/
/*}*/
.box-icon-text,.account-balance {
    color: var(--text-color-header);
}
.view-menu-cart h6{
    color: var(--text-color);
}
/*header*/
#heading {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: .2s;

}
header nav.heading{
    position: relative;
    box-shadow: 0 2px rgba(0, 0, 0, 0.05);
}
header nav.heading .header-container {
    height: 64px;
    display: flex;
    align-items: center;
    /* max-width: 1200px; */
    margin: 0 auto;
    justify-content: space-between;
}
.menu-list{
    position: absolute;
    /* width: 60px; */
    height: 0;
    left: 0;
    right: 0;
    /*top: 64px;*/
    transition: .5s;
    overflow: hidden;
}
.menu-list .menu-category img{
    width: 24px;
}
.menu-category-item img{
    width: 32px;
}
.box-menu{
    cursor: pointer;
}

.box-menu:hover .menu-list{
    height: 60px;
    transition: .5s;
}
.menu-fix .menu-list{
    height: 60px !important;
    transition: .5s;


}
.box-menu-bar{
    display: flex;
}
.box-search form{
    position: relative;
}
.menu-category-item{
    text-align: center;
    box-shadow: 0 2px rgb(0 0 0 / 5%);
    border: 1px solid #E4E5F0;
}
.menu-list.menu-category-height{
    height: 60px;

}
.account-avatar{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
}
.account-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-account-logined{
    top: 62px;
    right: 0;
    width: 360px;
    background: white;
    padding: 16px 4px 16px 16px;
    box-shadow: 0px 1px 4px 0px #00000033;
}
.box-account-logined .sidebar-section{
    border: 1px solid var(--border-default-color);
}
.account-logined-content{
    height: 400px;
    overflow-y: scroll;

}
.account-logined-content::-webkit-scrollbar {
    width: 8px;
}

.account-logined-content::-webkit-scrollbar-thumb {
    background: rgba(188, 191, 214, 0.5);
    border-radius: 14px;
}

.account-logined-content:hover::-webkit-scrollbar-thumb:active {
    background: rgba(188, 191, 214, 1);
}
.login-popup{
    border: 1px solid var(--border-default-color);
}
.box-account-logined{
    display: none;
}
.box-account-open,.close-login-popup{
    cursor: pointer;
}

.account-logined-content{
    display: none;
}

.loading {
    width: 26px;
    height: 26px;
    background-image: linear-gradient(to right, transparent, var(--primary-color));
    padding: 3px;
    border-radius: 100%;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1.2s linear infinite;
}
.loading-child {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: inherit;
}
.btn-loading{
    padding:6px 46px;
    /*background: #EBEBEB;*/
    border-radius: 8px;
}


.c-header-theme{
    left: 50%;
    transform: translateX(-50%);
}
.c-header-theme ul li{
    width: auto !important;
}
.c-header-theme a>div{
    text-align: center;
    box-shadow: 0 2px rgb(0 0 0 / 5%);
    border: 1px solid #E4E5F0;
    padding: 8px 16px !important;
}
.box-search-mobile{
    display: none;
}

.c-header-theme a img{
    width: 24px;

}
@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@media (max-width: 1400px) {
    .c-header-theme .box-search{
        display: none;
    }
    .c-header-theme .box-menu-theme{
        margin: auto;
    }


    .box-search-mobile_detail{
        top: 40px;
        right: 0;
    }
    .box-search-mobile_detail input{
        width: 200px;
    }
    .box-search-mobile_detail{
        display: none;
    }
    .box-search-mobile{
        display: flex;
    }

}
@media (max-width: 992px) {
    /* Header Inactive mobile */
    #heading.inactive {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        display: none;
    }

    .box-icon {
        background-color: transparent;
    }
    header nav.heading .header-container{
        height: 56px;
    }
    .c-header-theme .box-menu-theme{
        margin: auto;
    }
    .box-search-mobile{
        display: none;
    }

    .box-icon {
        background-color: transparent;
    }
    header nav.heading .header-container{
        height: 56px;
    }
    .layout{
        margin-bottom: 96px;
    }
}

.box-logo img{
    width: 140px;
}

/* Header responsive */
#formSearchHeader {
    width: 400px;
}

@media (max-width: 1200px) {
    #formSearchHeader {
        width: 200px;
    }

    .btn-loading{
        padding:6px 15px;
        /*background: #EBEBEB;*/
        border-radius: 8px;
    }
}
/* End Header responsive */
.box-search_mobile{
    display: none;
}
