.menu-icon,
.menu-change{display:none;cursor:pointer;}
.menu-bar{display:inline-block;height:30px;line-height:30px;margin:5px 0 11px 0;}
.header .line-1,
.header .line-2,
.header .line-3{width:35px;height:5px;background-color:var(--main);margin:8px 0;transition:0.4s;}
.header.toggle .line-1,
.header.toggle .line-2,
.header.toggle .line-3{background-color:#fff;}
.menu-change .line-1{-webkit-transform:rotate(-45deg) translate(-11px, 6px);transform:rotate(-45deg) translate(-11px, 6px);}
.menu-change .line-2{opacity:0;}
.menu-change .line-3{-webkit-transform:rotate(45deg) translate(-12px, -8px);transform:rotate(45deg) translate(-12px, -8px);}
/* HEADER */
.header{display:inline-block;width:100%;height:46px;background:#fff;position:fixed;z-index:999;padding:20px 0;box-shadow:rgba(0, 0, 0, 0.35) 0px 0px 10px;}
.header.toggle{background:var(--menu);border-bottom:5px solid var(--menubd);}
.head-container{display:inline-block;position:relative;width:1200px;margin:0 calc(50% - 600px);}
.header .logo{display:inline-block;float:left;width:250px;height:46px;margin:0 50px 0 0;}
.header .logo a{display:block;width:100%;height:100%;overflow:hidden;text-indent:-1000px;}
.header .logo a{background:url('../images/logo.svg') no-repeat center -46px;background-size:cover;}
.header.toggle .logo a{background:url('../images/logo.svg') no-repeat center 0px;background-size:cover;}
.header .headermenu{width:calc((100% - 300px) / 2 );}
.header .left{display:inline-block;float:left;width:calc(100% - 350px);height:46px;}
.header .right{display:inline-block;float:right;width:50px;height:46px;}
.header .right .cart{display:inline-block;float:right;position:relative;padding:0;margin:3px 0;width:50px;height:40px;overflow:hidden;}
.header .right .cart{background:transparent url('../images/cart.svg') no-repeat 0px 0px;background-size:cover;transition:all 0.5s ease-in-out;}
.header.toggle .right .cart{background:transparent url('../images/cart.svg') no-repeat -50px 0px;background-size:cover;}
.header .right .cart .cart-detail{display:inline-block;width:33px;height:28px;margin:0;padding:5px 10px;cursor:pointer;position:relative;}
.header .right .cart .cart-detail{line-height:30px;font-size:10pt;text-align:center;}
.header .right .cart .cart-detail a{display:block;width:100%;height:100%;overflow:hidden;text-indent:100px;}
.header .right .cart .cart-detail .cart-popup{display:block;position:absolute;right:5px;top:5px;z-index:999;}
.header .right .cart .cart-detail .cart-popup{color:#fff;background:var(--orange);border:2px solid #fff;width:16px;height:16px;text-align:center;font-size:8pt;line-height:16px;}
.header .right .cart .cart-detail .cart-popup{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
/* MENU */
ul.nav{margin:0;padding:0;list-style:none;width:100%;height:20px;line-height:20px;margin:10px 0 0 0;}
ul.nav li{float:left;margin:0 30px 0 0;position:relative;}
.header ul.nav li a{text-transform:uppercase;padding:0 0 15px 0;color:var(--main);}
.header.toggle ul.nav li a{color:#fff;}
ul.nav li:hover a{color:var(--dark);}
ul.nav li{position:relative;display:inline-block;}
ul.nav li ul{position:absolute;width:fit-content;margin:-15px 0 0 -25px;padding:20px 25px;height:0;overflow:hidden;transition:all 0.5s ease-in-out;opacity:0;display:none;}
ul.nav li:hover ul{display:block;}
ul.nav li ul{background:var(--dark);border-left:1px solid var(--yellow);border-top:1px solid var(--yellow);border-right:1px solid var(--main);border-bottom:1px solid var(--main);}
ul.nav li:hover ul{opacity:1;margin:15px 0 0 -25px;}
ul.nav li ul li,
ul.nav li ul li:first-child{display:inline-block;width:100%;margin:0 0 15px 0;border:none;float:initial;padding:0;}
ul.nav li ul li:last-child{margin:0;padding:0;}
ul.nav li ul li a,
ul.nav li:hover ul li a{color:#fff;font-weight:normal;font-size:13pt;line-height:25px;display:block;width:fit-content;white-space:nowrap;height:100%;padding:0;}
ul.nav li ul li a:hover{color:var(--yellow);}
/* FOOTER */
.footer-menu{display:inline-block;width:100%;padding:10px 0;background:var(--blur);}
.footer-menu ul{display:inline-block;text-align:center;margin:0;}
.footer-menu ul li{display:inline-block;float:initial;margin:0 10px;padding:0 20px;border-right:1px solid var(--dgrey);}
.footer-menu ul li:first-child{}
.footer-menu ul li:last-child{border:none;}
.footer-menu ul li a{font-size:12pt;text-transform:uppercase;}
/* SIDEBAR */
.sidebar-menu{display:inline-block;width:50px;height:calc((45px * 6) + 10px + 75px);padding:20px 0;transition:0.2s;}
.sidebar-menu.small{height:35px;padding:10px 0;}
.sidebar-menu{position:fixed;z-index:999;left:0;right:initial;bottom:80px;border:2px solid #f2f2f273;border-left:0;}
.sidebar-menu{-webkit-border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;border-radius:0 10px 10px 0;}
.sidebar-menu ul{display:inline-block;width:45px;height:initial;margin:0 5px 0 0;}
.sidebar-menu.small ul{display:none;}
.sidebar-menu ul li{display:inline-block;float:initial;width:45px;height:45px;line-height:45px;margin:0 0 10px 0;padding:0;overflow:hidden;}
.sidebar-menu ul li a{display:block;width:100%;height:100%;text-indent:100%;}
.sidebar-menu ul li a:hover{animation:jump 1.2s infinite;}
.sidebar-menu ul li a.ico-about{background:url('../images/icon/about-us.svg') no-repeat center;background-size:contain;}
.sidebar-menu ul li a.ico-hotline{background:url('../images/icon/hotline.svg') no-repeat center;background-size:contain;}
.sidebar-menu ul li a.ico-facebook{background:url('../images/icon/facebook.svg') no-repeat center;background-size:contain;}
.sidebar-menu ul li a.ico-zalo{background:url('../images/icon/zalo.svg') no-repeat center;background-size:contain;}
.sidebar-menu ul li a.ico-youtube{background:url('../images/icon/youtube.svg') no-repeat center;background-size:contain;}
.sidebar-menu ul li a.ico-language{background:url('../images/icon/vn.svg') no-repeat center;background-size:contain;}
.sidebar-menu .toggle{display:inline-block;width:45px;height:35px;position:relative;margin:0 5px 0 0;cursor:pointer;overflow:hidden;}
.sidebar-menu .toggle{background:url('../images/icon/info.svg') no-repeat -45px center;background-size:cover;animation:none;}
.sidebar-menu.small .toggle{background:url('../images/icon/info.svg') no-repeat 0px center;background-size:cover;animation:jump 1.2s infinite;}
.sidebar-menu{background:linear-gradient(45deg, var(--menubd), var(--main), var(--deep));background-size: 200% 200%;}
.sidebar-menu{-webkit-animation: fadebg 5s ease infinite;-moz-animation: fadebg 5s ease infinite;animation: fadebg 5s ease infinite;}
@keyframes jump{
    0% { transform: translateY(0px) scale(1.02, 0.98); }
    50% { transform: translateY(-1px) scale(1, 1); }
    55% { transform: translateY(-2px) rotate(15deg); }
    60% { transform: translateY(-3px) rotate(-15deg); }
    65% { transform: translateY(-2px) rotate(15deg); }
    70% { transform: translateY(-1px) rotate(-15deg); }
    100% { transform: translateY(0px) scale(1.02, 0.98); }
}