/* =============================================================== */
/* CUSTOM RESPONSIVE
/* =============================================================== */

.visible_phone{display: block}
.hidden_phone{display: none}
table.hidden_phone{display: none}
table.visible_phone{display: table}

body{-webkit-overflow-scrolling: touch;}

.wraper::after, .wraper::before{
    content: " ";
    display: table;
}
.wraper::after{
    clear: both;
}
.navbar-toggle a {
    background-color: #d53838;
    background-image: none;
    border: 1px solid transparent;
    float: left;
    margin-left: 3px;
    padding: 4px 2px;
    position: relative;
}
.navbar-toggle {
    border: medium none;
    padding: 0;
    margin: 0;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
    height: 4px;
    width: 25px;
    display: block;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}
.mm-menu{background-color: #fff !important;}
.mm-menu > .mm-panel{background-color: #d53838 !important;}
.mm-listview{visibility: visible!important}
.mm-listview > li > a, .mm-listview > li > span{color: #fff}
.mm-listview > li > a{text-transform: uppercase;font-size: 12px}
.mm-listview a:hover,.mm-listview a.active{color: #fff;background-color: #0071bb}
.mm-listview > li{border: 0 solid #fff !important}
.mm-listview > li:not(.mm-divider)::after{left:0 !important}
.mm-menu .mm-listview > li .mm-next::after, .mm-menu .mm-listview > li .mm-arrow::after{border-color: #fff}

.search_product .icon-search{background: url("../images/ico-search.png") no-repeat;height: 13px;width: 17px;display: block}
.block-support{margin-left: -8px;margin-right: -8px}
.support_ng{margin-right: 0;padding-right: 8px;padding-left: 8px}
.block-support .support{padding-left: 10px;padding-right: 10px}
.support{margin-top: 15px}
.cate_pro .icon-down{width: 16px;height: 16px;fill: #fff;color:#fff;margin: 8px}

.detail table{
    max-width: 100%;
    margin: 0 auto 10px;
    width: auto !important;
}
.detail table img{width: 100%}
.detail table tr td{padding: 0 5px}

@media (max-width: 767px) {
    * {
        box-sizing: border-box;
    }
    *::after, *::before {
        box-sizing: border-box;
    }
    .wraper {
        width: 100% !important;
        max-width: 900px !important;
        padding: 0 15px;
    }

    .wrap_content_header{width: 100%;box-shadow: none}

    .detail img{display: block;
        height: auto;
        max-width: 100%;}
    .detail ul{list-style: inside}
    .intro_post{text-align: left}
    .ads img{max-width: 100%;height: auto}
    .pro_intro > a > img{max-width: 100%;height: auto}
}

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
    .container {
        min-width: 320px;
    }
    .header{height: auto}
    .header_logo::after{clear: both;content: "";display: block}
    .header_logo .hot_line_top{
        background-size: 100% auto;
        display: block;
        float: right;
        height: 45px;
        margin-top: 10px;
        position: initial;
        width: 140px;
        padding-left: 52px;
    }
    .hot_line_top span{font-size: 12px}
    .logo{float: left;width: 50%;margin-right: 5px}
    .logo img{max-width: 100%;height: auto;display: block}
    .header_primary{width: 100%;float: none;margin-bottom: 15px}
    .content_left,.content_right,.product_detail_left,.product_detail_right,.contacts_answers,.map,.contacts_right,#payment-info div{float: none;width: 100%}
    .banner_home,.slider_letf_home{height: 90px;width: 100%;float: none}
    .block-pro,.support,.wrap_menu_footer{width: 100%}
    .support_ng{width: 50%}

    .news_one{float: none;width: 100%}
    .img_new_nb{float: left;padding-right: 10px;width: 50%}
    .img_new_nb img{max-width: 100%;height: auto}
    .news_list{width: 100%;padding-left: 0;margin:0;padding-top: 15px}
    .news_list li{width: 100%;padding: 0}
    .news_list li .title_new_nb{height: auto}

    .img_post_intro{width: 40% !important;height: auto}
    .img_post_intro img{height: auto;width: 100%}
    .title_intro_post{float: none;width: 100%}
    #contact{padding-right: 0}
    #contact .input_text,#contact textarea,#payment-info .input_text,#payment-info div textarea{width: 100%;float: none;margin-left: 0}
    .input_submit{margin-left: 0!important;}
    .contacts_right div label{text-align: left}
    #payment-info div label,#btn_payment{margin-left: 0 !important;}
    .map{height: 335px}
    .menu_bot li a span{margin: 5px 0;padding: 0 14px}
    .footer_primary{padding:25px 0;}
    .footer_about,.ht_kh{width: 100%;padding-left: 0;padding-bottom: 15px}
    .contact_footter{width: 100%;padding-right: 0;padding-top: 15px;}
    .contact_footter *{text-align: left !important;;float: none}
}
@media only screen and (min-width : 480px) and (max-width : 594px) {/*--- Mobile landscape ---*/
    .container {
        min-width: 310px;
    }
    .header{height: auto}
    .header_logo::after{clear: both;content: "";display: block}
    .header_logo .hot_line_top{display: block;
        float: right;
        position: initial;
        width: 169px;
        height: 55px;
        margin-top: 15px;
    }
    .logo{float: left;width: 60%}
    .logo img{max-width: 100%;height: auto;display: block}
    .header_primary{width: 100%;float: none}
    .content_left,.content_right,.product_detail_left,.product_detail_right,.map,.contacts_right,.contacts_answers,#payment-info div{float: none;width: 100%}

    #contact .input_text,#contact textarea,#payment-info .input_text,#payment-info div textarea{width: 100%;float: none}
    .input_submit{margin-left: 0}
    .contacts_right div label{text-align: left}
    #payment-info div label,#btn_payment{margin-left: 0 !important;}
    .banner_home,.slider_letf_home{height: auto;width: 100%;float: none}
    .block-pro,.support_ng{width: 50%;}

    .news_one,.wrap_menu_footer{float: none;width: 100%}
    .img_new_nb{float: left;padding-right: 10px}
    .news_list{width: 100%;padding-left: 0;margin:0 -10px;padding-top: 15px}
    .news_list li{width: 50%}

    .title_intro_post{width: 62%}
    .menu_bot li a span{margin: 5px 0;padding: 0 14px}
    .support{width: 50%;float: left}

    .footer_primary{padding:25px 0;}
    .footer_about{width: 50%;padding-left: 0;padding-bottom: 15px;overflow: hidden}
    .contact_footter{width: 100%;padding-right: 0;padding-top: 15px;}
    .contact_footter *{text-align: left !important;;float: none}
    #contact{padding-right: 0}

}
@media only screen and (min-width : 595px) and (max-width : 767px) {/*--- Small tablet portrait ---*/
    .header{height: auto}
    .header_logo::after{clear: both;content: "";display: block}
    .header_logo .hot_line_top{display: block;
        float: right;
        position: initial;
        width: 169px;
        height: 55px;
        margin-top: 15px;
    }
    .logo{float: left;width: 60%}
    .logo img{max-width: 100%;height: auto;display: block}
    .header_primary{width: 100%;float: none}
    .content_left,.content_right,.product_detail_left,.product_detail_right,.map,.contacts_right{float: none;width: 100%}
    .block-pro{width: 33.3%;}
    .banner_home,.slider_letf_home{height: auto;width: 100%;float: none}


    .home .block-pro,.news_list li{width: 50%}
    .news_one,.wrap_menu_footer{float: none;width: 100%}
    .img_new_nb{float: left;padding-right: 10px}
    .news_list{width: 100%;padding-left: 0;margin:0 -10px;padding-top: 15px}

    .title_intro_post{float: none;width: 100%}
    .menu_bot li a span{margin: 5px 0;padding: 0 14px}

    .support{width: 50%;padding-left: 10px;padding-right: 10px;float: left;border-bottom:none}

    .footer_primary{padding:25px 0;}
    .footer_about{width: 50%;padding-left: 0;padding-bottom: 15px;overflow: hidden}
    .contact_footter{width: 100%;padding-right: 0;padding-top: 15px;}
    .contact_footter *{text-align: left !important;;float: none}

    @media (min-width: 640px) {
        .product_detail_left{width:45%;float: left}
        .product_detail_right{width:52%;float: left}
        .product_detail_left > a > div > img{height: auto;max-width: 100%}
    }

}

@media only screen  and (min-width : 768px) and (max-width : 1023px)
{
    * {
        box-sizing: border-box;
    }
    .wraper {
        width: 100% !important;
        max-width: 900px !important;
        padding: 0 15px;
        margin: 0 auto;
    }
    .hidden_phone{display: block}
    .visible_phone{display: none}
    table.hidden_phone{display: table}
    table.visible_phone{display: none}

    .wrap_content_header{width: 100%;box-shadow: none}
    .menu_top > li > a{font-size: 13px}
    .header_logo{width: 26%;float: left}
    .logo img{max-width: 100%;height: auto;display: block}
    .header_primary{width: 72%}
    .wrap_search{width: 100%;float: right}
    .hot_line_top{
        width: 169px;
        height: 55px;
        right: 370px;
    }
    .banner_home{height: 416px;overflow: hidden}
    .slider_letf_home{width: 65%;height:285px}
    .qc_right{width: 34%;height:285px}
    #bx-pager_n{width: 100%;height: auto}
    #bx-pager_n a {
        display: inline-block;
        margin-right: 6px;
        width: 32%;
    }
    #bx-pager_n a img{max-width: 100%;height: auto;display: block}


    .content_left{width: 30%}
    .content_right{width: 68%}

    .block-pro{width: 50% !important;}
    .pro_intro > a > img{max-width: 100%;height: auto}

    .news_list li{width: 50%}
    .news_one{float: none;width: 100%}
    .img_new_nb{float: left;padding-right: 10px}
    .news_list{width: 100%;padding-left: 0;margin:0 -10px;padding-top: 15px}

    .title_intro_post{float: none;width: 100%}

    .footer_primary{padding:25px 0;}
    .footer_about{width: 25%;padding-left: 0;margin-right: 15px;overflow: hidden}
    .contact_footter{width: 34%;padding-right: 0;}

    #contact{padding-right: 0}
    .product_detail_left,.map{width:43%}
    .product_detail_right,.contacts_right{width:57%}
    .contacts_right div label{width: 98px}
}
@media only screen and (min-width : 1024px) and (max-width : 1170px) {
    * {
        box-sizing: border-box;
    }
    .wraper {
        width: 100% !important;
        max-width: 1024px !important;
        padding: 0 15px;
        margin: 0 auto;
    }
    .wrap_content_header{width: 100%;box-shadow: none}
    .wrap_search{width: 100%;float: right}
    .hot_line_top{
        width: 169px;
        height: 55px;
        right: 370px;
    }
    .slider_letf_home{width: 65%;height:285px}
    .qc_right{width: 34%;height:285px}
    #bx-pager_n{width: 100%;height: auto}
    #bx-pager_n a {
        display: inline-block;
        margin-right: 6px;
        width: 32%;
    }
    #bx-pager_n a img{max-width: 100%;height: auto;display: block}


    .content_left{width: 30%}
    .content_right{width: 68%}

    .block-pro{width: 50% !important;}
    .pro_intro > a > img{max-width: 100%;height: auto}

    .news_list li{width: 50%}
    .news_one{float: none;width: 100%}
    .img_new_nb{float: left;padding-right: 10px}
    .news_list{width: 100%;padding-left: 0;margin:0 -10px;padding-top: 15px}

    .title_intro_post{float: none;width: 100%}

    .footer_primary{padding:25px 0;}
    .footer_about{width: 25%;padding-left: 0;margin-right: 15px;overflow: hidden}
    .contact_footter{width: 34%;padding-right: 0;}

    #contact{padding-right: 0}
    .product_detail_left,.map{width:43%}
    .product_detail_right,.contacts_right{width:57%}
    .contacts_right div label{width: 98px}
}
@media only screen and (min-width : 1024px) {
    .hidden_phone{display: block}
    .visible_phone{display: none}
    table.hidden_phone{display: table}
    table.visible_phone{display: none}
}