.menu_mobi_add,

.menu_mobi {

    display: none

}



.menu-res {

    height: 55px;

    z-index: 997;

    background: var(--colormain);

    position: sticky;

    display: none;

    position: -webkit-sticky;

    top: 0

}

.logo_mobi{margin-left: auto;display: inline-block;max-width: 50px;}

.menu_mobi_add .logo_mobi{max-width: 90px;}

#hamburger {

    display: block;

    width: 30px;

    height: 23px;

    position: absolute;

    left: 25px;

    top: 50%;

    transform: translateY(-50%);

}



#hamburger.active {

    position: fixed;

    top: 30px;

    left: calc(80% + 15px);

    transform: none;

    z-index: 9999;

}



#hamburger:before,

#hamburger:after,

#hamburger span {

    background: var(--colormain);

    content: "";

    display: block;

    width: 100%;

    height: 2px;

    position: absolute;

    left: 0px;

}



#hamburger:before {

    top: 0px;

}



#hamburger span {

    top: 10px;

}



#hamburger:after {

    top: 20px;

}



#hamburger:before,

#hamburger:after,

#hamburger span {

    -webkit-transition: none 0.5s ease;

    transition: none 0.5s ease;

    -webkit-transition-property: transform, top, bottom, left, opacity;

    transition-property: transform, top, bottom, left, opacity;

}



#hamburger.active:before,

#hamburger.active:after {

    top: 10px;

}



#hamburger.active span {

    left: -50px;

    opacity: 0;

}



#hamburger.active:before {

    transform: rotate(45deg);

}



#hamburger.active:after {

    transform: rotate(-45deg);

}





@media (max-width:1050px) {

    .menu_baophu {

        background: #000;

        opacity: 0.8;

        z-index: 998;

        left: 0px;

        top: 0px;

        position: fixed;

        width: 100%;

        height: 100%;

        display: none;

    }



    .menu-bar-res {

        height: 55px;

        padding: 0px 15px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between

    }





    .menu {

        display: none

    }



    .menu-res {

        display: block

    }



    .menu_mobi {

        text-decoration: none;

        padding: 10px;

        width: 100%;

        cursor: pointer;

        display: block;

        position: -webkit-sticky;

        position: sticky;

        top: 0;

        z-index: 999;
        overflow: hidden;
        background: #ffffff;

        box-shadow: 0px 2px 5px var(--colormain);

    }



    .menu_mobi_add {

        display: block;

        position: fixed;

        left: -100%;

        top: 0;

        background: #ffffff;

        z-index: 9999;

        color: #fff;

        height: 100vh;

        overflow: auto;

        line-height: 1.5;

        padding: 0 10px;

        padding-top: 35px;

        padding-bottom: 20px;

        width: 80%;

        min-width: 140px;

        max-width: 440px;

        transition: 0.5s;

    }



    .menu_mobi_add::-webkit-scrollbar {

        width: 3px;

    }



    .menu_mobi_add::-webkit-scrollbar-thumb {

        background-color: var(--colormain);

        border-radius: 1px;

    }



    .menu_mobi_active {

        left: 0;

        transition: 0.5s;

    }



    .menu_mobi_add ul {

        list-style: none;

        padding: 0;

    }



    .menu_mobi_add ul li {}



    .menu_mobi_add ul li.li-logo {}



    .menu_mobi_add ul li.li-tim {

        display: none

    }



    .menu_mobi_add ul li.li-home {}



    .menu_mobi_add ul li.li-home h2 {}



    .menu_mobi_add ul li h2 {

        font-size: 17px;

        margin-bottom: 0;

    }



    .menu_mobi_add ul li b {

        display: inline-block;

        vertical-align: top;

        margin-right: 8px;

    }



    .menu_mobi_add ul li b img {

        display: inline-block;

        vertical-align: top;

    }



    .menu_mobi_add ul li a {

        text-decoration: none;

        color: var(--colormain);

        display: block;

        border-bottom: 1px solid rgb(132 132 132 / 20%);

        padding: 10px 40px 10px 5px;

        position: relative;

        text-transform: uppercase;

    }



    .menu_mobi_add ul li a.active2 {

        color: var(--colormain-hover);



    }



    .menu_mobi_add ul li a i {

        position: absolute;

        height: 100%;

        right: 0;

        top: 0;

        width: 40px;

        text-align: center;

        padding-top: 13px;

        transform: rotate(90deg);

        transition: .5s linear;

    }



    .menu_mobi_add ul li a.active2 i {

        transform: rotate(0deg);

        transition: .5s linear;

    }



    .menu_mobi_add ul ul {

        display: none;

        padding-left: 0;

    }



    .menu_mobi_add ul li ul li a {

        padding-left: 20px;

    }



    .menu_mobi_add ul li ul li ul li a {

        padding-left: 40px;

    }



}



@media (max-width:500px) {

    #hamburger {

        position: static;

        transform: translateY(0);

    }



    .menu_mobi .d-flex {

        gap: 20px;

    }

}



.search-mb {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background-color: #ffffff;

    margin-bottom: 10px;

    border: 1px solid var(--colormain);

}

.search-mb input{border: 0px;height: 47px;flex-grow: 1;text-indent: 10px;padding: 0;}

.search-mb p{width: 60px;height: 47px;margin: 0;background: var(--colormain) url(../images/earch.png) no-repeat center;}