/* xl */
@media (min-width: 1200px){

}/* END xl */

/* lg */
@media (max-width: 1200px){ 

}/* END lg */

/* md */
@media (max-width: 992px){ 
    /* .feature .feature-image { height: 170px;top: 29px; } */
    .feature .feature-frame {height: 245px;}
}/* END md */

/* sm */
@media (max-width: 768px){ 
    .feature .feature-frame {height: 200px; margin-bottom: 6rem;}
    .feature-image-main img {transform: scale(1.6);}
    .feature-image-main{     
        overflow: hidden;
        height: 150%;
        padding-bottom: 10%;
        padding-top: 10%;
        padding-left: 5%;
        padding-right: 5%;}
    .feature .feature-image {
        height: 73%;
        width: 47%;
        top: 43%;
        left: 25%;
    }

    .content_3 p.desc, .input_box.filled .input_box_label {font-size: 16px;}
    .flex-column li { padding: 5px 10px; font-size: 16px;}
    #info-customer i.fa{font-size: 24px;}
    #info-customer { padding: 10px 13px; border-radius: 25px;}

    .search_box {padding-right: 16px;}
    .content_1 {padding: 0px;}
    .content_1 .content_big {padding: 0px 0px 0px 60px;}
    .content_small_sm{display: block;}
    .content_2{margin-top: 20px; padding-left: 0px; padding-right: 0px;}
    .content_2 .flex-content{ padding-left: 0px;}

    .content_1 .content_big .number { 
        background-size: 40px 40px;
        left: 16px;
    }
    .content_1 .content_big .number span{ 
        font-size: 16px;  
        top: 10px;
        left: 7px;
    }
    .mainmenu {
        position: absolute;
        z-index: 1;
        right: 0px;
        top: 40px;
        background: #FFF;
        width: 250px;
        opacity: .9;
    }
    ul.sub-menu { left: unset; right: 0px; top: 25px;}
    .mainmenu ul li { padding: 0px 20px; }
    .navbar-collapse.in{ overflow: unset;}
    .positionTop.desktop, .postionBody.desktop, .content_small, #info-customer span{
        display: none;
    }
    
    .p-hotlineTop{ display: none;}
    .p-loginTop-item:last-child{ margin-right: 5px;}
    .p-loginTop-item a{ color: #000088;}
    .p-loginTop-item:first-child a{ border-color: #000088;}
    .positionTop.mobile{display: flex; height: 60px; padding: 10px 15px; }
    #main-content { padding-top: 60px;  }
    .positionTop{ background: #FFF; }
    .navbar-nav>li { padding: 7px 0px;}
    .introduce .container, .price-list .container  { padding: 0px 32px;}
    /* .feature-main { padding: 0px 10px;} */
    /* video */
    .video .video-main{ height: 200px;}
    .feedback .avatar { height: 90px;}
    
    .modal-footer .btn10{ padding: 7px 14px; }
    
}/* END sm */

/* - */
@media (max-width: 576px){ 
    html, body {font-size: 14px; }
    .img-slider{
        vertical-align: middle;
        object-fit: cover;
        height: 140px;
    }
    .feature-main li.feature-item.active p { 
        animation: none;
    }
    .feature-main { height: 240px; position: relative; overflow: hidden;}
    .feature-main li.feature-item.active h4 { background: unset;}
    .feature .carousel-indicators, .feature .control-carousel{ display: block; }
    .feature-image-main, .feature-item,.feature-item .fa-angle-down{ display: none;}
    .feature-item.active{ display: block;}
    .feature .feature-image {top: 5%; left: 7%; height: 100%;width: 90%; }
    .feature .feature-frame {height: 190px; margin-bottom: 2rem;}
    #slider img { height: 200px;}
    .feature-item{ position: absolute; animation-duration: .4s; animation-iteration-count: initial; width: 92%;}
    .feature-item.left{
        animation-name: leftToRight;
    }

    @keyframes leftToRight{
        0%{
          left: -300px;
        }
        100%{
            left: 0;
        }
      }

      .feature-item.right{
        right: unset;
        animation-name: rightToLeft;
    }

    @keyframes rightToLeft{
        0%{
            left: 300px;
        }
        100%{
            left: 0;
        }
      }
    .btn10 { padding: 10px 14px;}
    .product .product-content {
        margin-top: 0;
        margin-bottom: 0;
        padding: .5rem;
        border: 1px solid #eee;
    }
}/* END - */