@media (min-width: 1500px) {
    .banner-right img{
        object-fit: cover;
    }
}
@media (min-width: 1366px) {
    .col-20{
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }



    .f-start .f-hotline{
        -ms-flex: 0 0 18%;
        flex: 0 0 18%;
        max-width: 18%;
    }
    .f-start .f-room{
        -ms-flex: 0 0 29%;
        flex: 0 0 29%;
        max-width: 29%;
    }
    .f-start .f-room-2{
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }
    .f-start .f-lo-social{
        -ms-flex: 0 0 13%;
        flex: 0 0 13%;
        max-width: 13%;
    }
}
@media (min-width: 1200px) {
    /*------- header-content -------*/
    .header-content{
        padding: 0;
    }
        .head-col-left{

        }
            .head-col-left .logo{
                display: inline-flex;
                align-items: center;
                height: 100%
            }
        .head-col-center{
            padding: 28px 0 10px;
        }
        .header-right{
            height: 100%;
            align-items: center !important;
            padding-bottom: 16px;
        }
    /*------- end header-content -------*/

    .navagation li.has-dropdown.open>.fa-angle-down:before{
        content: "\f107";
    }
    .navagation li.has-dropdown:last-child ul li ul.level-3{
        right: 100%;
        left: auto;
    }
    .navagation .level-2 li span.fa{
        display: inline-block;
        text-align: right;
    }

    .navagation ul li ul li span.fa{
        transform: rotate(-90deg);
    }
    .navagation li span.fa{
        display: block;
    }
    .navagation ul.col.flex>li>span.fa {
        display: none;
    }

    .count-cart:hover .mini-shopping-cart{
        z-index: 150;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: all .2s ease-in-out;
    }

    .banner-right{
        display: flex;
        /*height: 50%;*/
        overflow: hidden;
        /*max-height: 172px;*/
    }
    .banner-right .owl-stage-outer, .banner-right .owl-stage, .banner-right .owl-item{
        height: 100%;
    }
    .banner-right img, .banner-full img{
        /*object-fit: cover;*/
    }
    .banner-right img{
        /*height: 172px;*/
    }
    .banner-full img{
        /*height: 355px;*/
    }

    .blk-banner .item{
        margin-bottom:0;
    }
    .blk-collection .owl-carousel .owl-nav button.owl-prev, .blk-product-viewed .owl-carousel .owl-nav button.owl-prev{
        left: -35px;
    }
    .blk-collection .owl-carousel .owl-nav button.owl-next, .blk-product-viewed .owl-carousel .owl-nav button.owl-next{
        right: -35px;
    }

    .product-item.col-lg-3 img, .product-item.col-xl-3 img, .blk-product-viewed .product-item img{
        height: 255px;
    }
    .blk-pro-cat .product-item.col-lg-3 img{
        height: 190px;
    }

    /*---- blk product view -------------*/
    .blk-pview-img{
        /*-ms-flex: 0 0 51%;*/
        /*flex: 0 0 51%;*/
        /*max-width: 51%;*/
    }
    .blk-pview-info{
        /*-ms-flex: 0 0 49%;*/
        /*flex: 0 0 49%;*/
        /*max-width: 49%;*/
    }
    .blk-code{
        display: inline-flex;
        flex-wrap: wrap;
        width: 86%;
        margin-bottom: 20px;
    }
    .blk-action{
        float: right;
        font-size: 32px;
    }
        .blk-action .b-ac {
            position: relative;
            top: -12px;
        }
        .share-icon:before{
            right: 55px;
        }

    .d-pro-head{
        display: -ms-flexbox!important;
        display: flex!important;
        justify-content: space-between;
        align-items: end;
    }
        .d-pro-head h1{
            min-width: 80%;
        }
        .d-pro-head select{
            max-width: 150px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
        }

    .blk-policy .row{
        margin-left: -5px;
        margin-right: -5px;
    }
    .blk-policy .item{
        margin-top: 0;
        padding:0 0 0 35px;
        line-height: 1.3;
    }
        .blk-policy .item[data-label="shipping"]{
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
            padding-right: 15px;
        }
        .blk-policy .item[data-label="cod"]{
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
            max-width: 30%;
            padding-right: 15px;
        }
        .blk-policy .item[data-label="24h"]{
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
            max-width: 30%;
        }

    .modal-quick .modal-dialog {
        max-width: 800px;
    }
    .modal-quick .blk-action {
        font-size: 26px;
    }
    .modal-quick .blk-action .b-ac {
        position: relative;
        top: -4px;
    }

    .blk-user-left{
        margin-bottom:0;
    }

    .navagation .menu_all{
        transform: translateY(15%);
        z-index: -100;
        opacity: 0;
        transition: all 300ms;
        pointer-events: none;
    }
    .navagation .all:hover .menu_all, .navagation .all.active .menu_all{
        transform: translateY(0);
        z-index: 10;
        opacity: 1;
        transition: all 300ms;
        pointer-events: auto;
    }

    .menu_all .menu_all_list{
        width: 20%;
        padding-left: 15px;
        margin-right: 0;
    }
    .menu_all .menu_all_list:nth-child(4n+1){
        border-right: none;
    }
    .menu_all .menu_all_list:nth-child(5n+1){
        clear: both;
    }
    .menu_all .menu_all_list li:nth-child(n+5){
        display: none;
    }
    .menu_all .menu_all_list li.more{
        display: block;
    }
    .menu_all .menu_all_list li.more a{
        color: #ffb0bd;
        font-weight: bold;
    }
    .navagation li.has-dropdown ul li ul.level-3 {
        position: absolute;
        left: 100%;
    }
    .navagation li.has-dropdown ul li:hover ul.level-3{
        top: 0;
        z-index: 1;
        opacity: 1;
        display: block !important;
    }
}
@media (min-width: 768px) {
    .d-md-table-cell{
        display: table-cell!important;
    }
}



/*--- max-width ---------------------------------*/
@media (max-width: 1199px) {
    .header{
        position: relative;
        z-index: 100;
    }
    .header-content{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        width: 100%;
        z-index: 20;
        padding: 5px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
    .header-content.top{
        position: relative;
    }
    .header-content.wait {
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        -moz-transition: -moz-transform 0.6s ease;
        -o-transition: -o-transform 0.6s ease;
        -webkit-transition: -webkit-transform 0.6s ease;
        transition: transform 0.6s ease
    }
    .header-content.down {
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -webkit-transform: translateY(-120000%);
        transform: translateY(-100%);
        transition: .3s;
        transition: transform 0.6s ease;
    }
    .header-content.up {
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        -moz-transition: -moz-transform 0.6s ease;
        -o-transition: -o-transform 0.6s ease;
        -webkit-transition: -webkit-transform 0.6s ease;
        transition: .3s;
        transition: transform 0.3s ease;
    }
    .header-content.up .fr-mobile{
        display: none !important;
    }
    .header-content .logo img{
        max-height: 40px;
    }
    .head-col-left{
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        position: static;
    }
    .head-col-right{
        position: static;
    }
        .header-right{
            position: absolute;
            right: 15px;
            text-align: right;
            top: 10px;
            /* height: 100%; */
            align-items: center !important;
        }
        .js-open-user img{
            width: 30px;
            height: 30px;
        }
        .count-cart-icon {
            width: 24px;
            height: 30px;
        }
        .count-cart-icon .count{
            right: -15px;
        }

    /*-------- display header -------------*/
    .js-menu-svg{
        display: inline-flex!important;
    }
    .head-col-center{
        display: none !important;
    }
    .fr-mobile, .navagation .js-menu-close{
        display: block !important;
    }
    /*-------- end display header -------------*/

    .form-search.xs{
        margin-top: 15px;
    }

    .js-menu-close{
        max-width: 60%;
    }
    .nava-mask{
        width: 40%;
        display: block !important;
    }
    .navagation{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(0, 0, 0, 0.71);
        /*transition: transform 0.45s ease;*/
        -ms-transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        -webkit-transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        transform: translateX(-100%);
    }
    .navagation.open{
        /*transition: transform 0.45s ease;*/
        -ms-transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        -webkit-transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        transition: transform .5s cubic-bezier(.25,.46,.45,.94);
        transform: translateX(0);
    }
        .navagation .js-container{
            margin: 0;
            max-width: 60%;
            padding: 0;
            height: 100%;
            background: #ffb0bd;
            overflow-y: auto;
        }
        .navagation .js-container>.row{
            margin: 0;
        }
        .navagation ul.flex {
            display: block;
            padding: 0
        }
        .navagation li {
            display: block;
            width: 100%;
            border-bottom: 1px solid #f3f4f7;
        }
        .navagation li a,.navagation li.has-dropdown ul li ul.level-3 li a{
            padding: 10px 15px;
        }
        .navagation li.has-dropdown.open>a{
            color: #dd3a52;
        }

        .navagation li span.fa {
            display: inline-flex;
            right: 10px;
        }
        .navagation li.has-dropdown ul li ul.level-3 li a{
            padding-left: 35px !important;
        }
        .navagation .menu_all{
            position: relative;
            padding: 5px;
            width: 100%;
            display: none;
        }
        .navagation .menu_all .container{
            padding: 0 15px;
        }
        .menu_all .menu_all_list {
            width: 100%;
            padding: 0;
            margin: 0 0 15px 0;
            float: none;
            border-right: none;
        }
        .navagation li.has-dropdown ul{
            position: relative;
            transform: translateY(0);
            z-index: 1;
            opacity: 1;
            display: none;
        }
        .navagation li.has-dropdown ul li{
            padding: 0;
            border-top: 1px solid #fff;
            border-bottom: none;
        }
        .navagation li.has-dropdown ul li a {
            padding: 10px 15px 10px 25px;
        }
        .navagation li.has-dropdown ul li ul.level-3{
            background: #fdebee;
        }

}
@media (max-width: 991px) {
    .blk-product-new{
        margin-top: 40px;
    }


    .product-action{
        display: none !important;
    }
    /*----- product filter ------------------*/
    .js-open-filter{
        display: block;
    }
    .js-fil-bar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 51;
        padding: 2% 24% 2% 2%;
        transition: all 450ms;
        transform: translateX(-100%);
    }
    .js-fil-bar.open{
        transition: all 450ms;
        transform: translateX(0);
    }
    .js-fil-bar:before, .js-fil-bar:after{
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 1;
    }
    .js-fil-bar:before{
        left: 0;
        width: 80%;
        background: #fff;
    }
    .js-fil-bar:after{
        right: 0;
        width: 20%;
        background: rgba(0, 0, 0, 0.87);
    }

    /*----- product detail ------------------*/
    .blk-pview-content{
        padding: 15px;
    }
    .blk-price .product-price {
        font-size: 34px;
    }

    .land-head ul::-webkit-scrollbar {
        display: none;
    }
}
@media (max-width: 767px) {
    .header-top .col{
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
    }
    .header-top .col::-webkit-scrollbar{
        display: none;
    }
    .navagation .js-container, .js-menu-close{
        max-width: 80%;
    }
    .nava-mask{
        width: 20%;
    }

    .breadcrumb{
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
    .breadcrumb::-webkit-scrollbar{
        display: none;
    }

    .f-start{
        padding: 20px 0;
    }
    .f-room{
        margin-bottom: 15px;
    }


    /*----- common ------------------*/
    .product-item .flag{
        font-size: 13px;
        padding: 3px 7px;
    }

    .cart-total .btn{
        width: 100%;
    }
    .cart-total .btn.btn-pink{
        margin-bottom: 10px;
    }

    /*----- product detail ------------------*/
    .blk-pview-img{
        margin-bottom: 30px;
    }
    .blk-code .title {
        font-size: 19px;
        line-height: 1.3;
    }
    .blk-att .r-at-r{
        margin-bottom: 15px;
    }

    .blk-pview-content{
        margin:50px 0;
    }
    .blk-product-viewed {
        margin-bottom: 20px;
    }

    /*----- news page ------------------*/
    .news-item .news-info {
        padding-left: 30px;
        padding-right: 30px;
    }
    .news-head ul li a {
        font-size: 15px;
    }

    /*----- format common ------------------*/
    .formError {
        left: auto !important;
        right: 0 !important;
    }

    .blk-collection .owl-carousel .owl-nav button.owl-next,
    .blk-collection .owl-carousel .owl-nav button.owl-prev{
        top: 27% !important;
        font-size: 25px !important;
    }
    .blk-collection .owl-carousel .owl-dots {
        display: none;
    }
}
@media (max-width: 575px) {
    .btn-js-add-cart{
        width: 100%;
    }
    .btn-js-add-cart#addToCart {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .btn-js-add-cart#addPayNow {
        margin-left: 0;
    }
    .product-item .image img{
        min-height: 120px;
        height: 240px;
    }
    .blk-product-viewed .owl-carousel .owl-nav button.owl-next, .blk-product-viewed .owl-carousel .owl-nav button.owl-prev {
        top: 25%;
        font-size: 30px;
    }
}
@media (max-width: 480px) {
    .blk-policy .item, .blk-policy p{
        font-size: 12px;
        min-height: 22px;
    }
    .blk-policy p{
        margin-bottom: .5rem;
    }
    .product-item .image img{
        height: 200px;
    }
}
@media (max-width: 320px) {
    .product-item .product-price .old {
        display: block;
        margin-left: 0;
    }
    .blk-price {
        margin-top: 30px;
    }
    .blk-price .product-price .price{
        display: block;
        line-height: 0;
        margin-bottom: 5px;
    }
    .blk-price .product-price .old{
        margin-left: 0;
    }
}