﻿body.ovf--hidden { overflow: hidden !important; }
#header-mobile { display: none;text-align: center; position: relative }
.menu-toggle{ width: 39px;height: 35px;background: url(/frontend/img/menu_toggle.png);display: none;position: absolute;top: 10px; left: 10px}
.mobile-menu { position: fixed; width: 100%; height: 100%; max-width: 300px; top: 0; left: 0; background-color: #fbfdfe; z-index: 100; overflow-y: auto; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; }
.mobile-menu .navbar-brand { width: auto;padding-top: 0;font-size: 18px; font-weight: 600; color: #424242; }
.mobile-menu.open { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); }
.mobile-menu .btn { width: 100%; height: 50px; padding: 12px 15px; border-radius: 30px; align-items: baseline; justify-content: center; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.mobile-menu-head { min-height: 40px; padding: 8px 20px; background-color: #fff; border-bottom: solid 1px #eceff0; align-items: center; justify-content: space-between; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.mobile-menu-close { width: 18px; height: 18px; border-left: solid 2px #637076; border-bottom: solid 2px #637076; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.mobile-menu-content { padding: 0px 20px; }
.mobile-menu-list { padding-bottom: 40px; border-bottom: solid 1px #eceff0; }
.mobile-menu-list > ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu-list > ul > li { margin-top: 10px; margin-bottom: 10px;text-transform: uppercase;}
.mobile-menu-list > ul > li > a { text-decoration: none; align-items: center; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.mobile-menu-categories > li li a{text-align: left}
.mobile-menu-list > ul > li > a i:first-child { margin-right: 10px; font-size: 22px; }
.mobile-menu-list > ul > li > a > p { margin: 0; margin-top: 4px; color: #7e7e7e; }
.mobile-menu-list > ul > li > a > .caret { margin-top: 4px; margin-left: auto; }
.mobile-menu-categories { display: none; width: 100%; height: 100%; padding: 0; border-top: solid 1px #eceff0; border-bottom: solid 1px #eceff0; }
.mobile-menu-categories li { display: block; }
.mobile-menu-categories li a { display: block; padding: 10px 0 10px 15px; text-decoration: none; align-items: center; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.mobile-menu-categories li a .caret { margin-left: auto; }
.mobile-menu-categories > li:not(:last-child) a { border-bottom: solid 1px #eceff0; }
.mobile-menu-categories > li li a { border-bottom: solid 1px #eceff0; }
.mobile-menu-categories ul { display: none; list-style: none; padding: 0; z-index: 1; }
.mobile-menu-categories ul li a { display: block; padding: 10px 30px; }

@media only screen and (min-width:769px) {
    .mobile-menu { display: none !important; }
}
@media (max-width: 768px) {
    body{background: #fff}
    #header{display: none}
    .menu-toggle{display: block}
    #header-mobile{display: block}
    #container{box-shadow: none}
    #container, #header .header-top .header-top-content{width: 100%}
    .content-silde{display: none}
    .ads-homepage{display: none}
    .box-big .box-big-bg .product-item{ margin: 10px 0 0!important;width: 100%;height: auto;float: none;}
    .box-big .box-big-bg .product-item .img-product{ width: auto;height: auto; max-height: 220px}
    .box-big .sub-cate-right, .cate-image .cate-left{display: none}
    .cate-image .product-bg{ float: none; width: auto}
    /*.cate-image .product-bg .product-item{ display: none}*/
    .slide-logo{display: none}
    .share-bottom, .statistic{display: none}
    #col-right{display: none}
    #primary{ float: none; width: auto}
    .box-big .box-big-bg .img-detail-pro{ width: auto;float: none;margin: 0 0 10px;}
    .box-big .box-big-bg .img-detail-pro img{ width: auto; max-height: 220px}
    .box-big .box-big-bg .intro-detail-pro{ width: auto;float: none;}
    .box-big .box-big-bg .intro-detail-pro h1, .box-big .box-big-bg .intro-detail-pro p{text-align: center}
    .box-big .box-big-bg .news-item .img-news img{width: 130px}
}
