﻿/* Normal desktop :1366px. */
@media (min-width: 1170px) and (max-width: 1400px) {
}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {
}


/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
}

@media (min-width: 992px) and (max-width: 1199px) {
    
}

@media (max-width: 1199px) {
    
}

@media (min-width: 992px) {
    
}

@media (max-width: 991px) {
    
}

/* small mobile :320px. */
@media (max-width: 767px) {
    
}

@media (max-width: 600px) {
    
}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}

@media (max-width: 480px) {
    
}

@media (max-width: 375px) {
    
}

@media (max-width: 374px) {
    
}
/* small mobile :320px. */
@media (max-width: 767px) {
    
}
/* Normal desktop :1366px. */
@media (min-width: 1170px) and (max-width: 1400px) {
}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {
}


/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
}


/* small mobile :320px. */
@media (max-width: 767px) {
    
}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Large Mobile :370px. */
@media only screen and (min-width: 370px) and (max-width: 380px) {
    
}

@media only screen and (min-width: 414px) {
}

@media only screen and (width: 480px) {
    
}

@media only screen and (width: 320px) {
    
}

@media only screen and (width: 360px) {
    
}

@media only screen and (width: 411px) {
    
}

@media only screen and (width: 375px) {
    
}

@media only screen and (width: 414px) {
    
}

@media only screen and (width: 768px) {
    
}

@media only screen and (min-height: 896px) {
}

@media only screen and (min-width: 414px) and (orientation: landscape) {
}

@media only screen and (min-width: 896px) and (orientation: portrait) {
}

@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3) {
}

@media only screen and (min-width: 769px) and (max-width: 1025px) {
    
}


/* small mobile :320px. */
@media (max-width: 767px) {
    .product-detail__why-us {
        margin-top: 42px;
        display: block;
    }

    .product-detail__why-us-box {
        display: flex;
        align-items: center;
        padding: 20px 20px 20px 40px;
        width: 100%;
        height: 98px;
        border-radius: 8px;
    }

        .product-detail__why-us-box:not(:first-child) {
            margin-left: 0;
            margin-top: 15px;
        }

    .product-gallery-area .product-thumb-slider-wrap .product-img img {
        width: 100%;
        height: auto;
    }

    .product-detail__cart-icon {
        position: absolute;
        left: 24px;
        top: 12px;
        fill: #fff;
        display: none;
    }

    .product-detail__buy-now {
        margin-left: 10px;
    }

    .site-branding a.brand-logo img {
        height: auto;
        margin-top: 10px;
    }

    .cart_summary th {
        width: 200px;
    }

    /* Force table to not be like tables anymore */
    table.cart_summary, .cart_summary thead, .cart_summary tbody, .cart_summary th, .cart_summary td, .cart_summary tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .cart_summary thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .cart_summary tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .cart_summary tbody td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

        .cart_summary tbody td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        .cart_summary tbody td:first-child {
            height: 70px;
            width: 100%;
        }

    .cart_product img {
        height: auto;
        position: absolute;
        max-height: 53px;
        box-shadow: none;
        border: none;
        right: 32%;
    }
    /*
	Label the data
	*/
    .cart_summary tbody td:nth-of-type(1):before {
        content: "Hình";
    }

    .cart_summary tbody td:nth-of-type(2):before {
        content: "Tên sản phẩm";
    }

    .cart_summary tbody td:nth-of-type(3):before {
        content: "Giá";
    }

    .cart_summary tbody td:nth-of-type(4):before {
        content: "Số lượng";
    }

    .cart_summary tbody td:nth-of-type(5):before {
        content: "Thành tiền";
    }

    .cart_summary tbody td:nth-of-type(6):before {
        content: " ";
    }

    .cart_summary {
        position: relative;
    }

        .cart_summary tfoot td {
            position: absolute;
            right: 0;
        }

    table.table.cart_summary {
        margin-bottom: 50px;
    }

    .header-navigation .site-branding {
        max-width: 210px;
    }

    .header-one:after {
        width: 56%;
    }

    .navigation-one .primary-menu .site-branding {
        padding: 0px 30px 10px 30px !important;
        padding-left: 0;
        margin-top: -10px;
    }
    .header-navigation.sticky.navigation-one .site-branding {
        padding: 20px 30px;
        margin-top: 25px;
    }

    .header-navigation.sticky.navigation-one:after {
        width: 56%;
    }

    .navigation-one .primary-menu .nav-inner-menu {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-end;
        padding-left: 0;
    }

    .visible-lg {
        display: none;
    }

    .hotline-bar {
        display: none;
    }

    /*.navigation-one .primary-menu {
        padding: 0;
    }*/

    .header-navigation.sticky .nav-inner-menu {
        margin-top: 25px;
    }
    .header-navigation.sticky .site-branding a.brand-logo img {
        margin-top: 0px;
    }
    .about-two_img-box .about-img-two {
        right: 0;
        height: auto;
    }
    .about-two_img-box .about-img-one {
        height: auto;
    }
    .about-section-shape .section-title h2 {
        font-size: 30px;
        line-height: 38px;
        color: #031424;
    }
    .features-wrapper .features-icon-box {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .counter-wrapper-two-custom {
        padding: 15px;
    }
    .counter-wrapper-two-custom h2, .fun-content-box h2 {
        font-size: 32px;
        line-height: 36px;
        margin-top: 10px;
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px 10px 20px 20px;
        border: none;
        width: 88%;
        position: relative;
        border-radius: 6px;
    }
    #myModal .frm-search .frm-body #txtkeysearch {
        display: inline-block;
        padding: 0px 10px;
        width: 64%;
    }
    #myModal .frm-search .frm-body #btnsearch {
        max-width: inherit;
    }
}
.navigation-one .primary-menu .nav-inner-menu {
    /*justify-content: flex-end;*/
}
/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .navigation-one .primary-menu .nav-inner-menu {
        justify-content: flex-end;
        padding-left: 0;
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px 10px 20px 20px;
        border: none;
        width: 88%;
        position: relative;
        border-radius: 6px;
    }
    #myModal .frm-search .frm-body #txtkeysearch {
        display: inline-block;
        padding: 0px 10px;
        width: 64%;
    }
    #myModal .frm-search .frm-body #btnsearch {
        max-width: inherit;
    }
}
@media only screen and (min-width: 350px) and (max-width: 412px) {
    .navigation-one .primary-menu .nav-inner-menu {
        justify-content: flex-end;
        padding-left: 0;
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px 10px 20px 20px;
        border: none;
        width: 88%;
        position: relative;
        border-radius: 6px;
    }
    #myModal .frm-search .frm-body #txtkeysearch {
        display: inline-block;
        padding: 0px 10px;
        width: 64%;
    }
    #myModal .frm-search .frm-body #btnsearch {
        max-width: inherit;
    }
}
@media only screen and (min-width: 412px) and (max-width: 555px) {

    .navigation-one .primary-menu .nav-inner-menu {
        justify-content: flex-end;
        padding-left: 0;
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px 10px 20px 20px;
        border: none;
        width: 88%;
        position: relative;
        border-radius: 6px;
    }
    #myModal .frm-search .frm-body #txtkeysearch {
        display: inline-block;
        padding: 0px 10px;
        width: 64%;
    }
    #myModal .frm-search .frm-body #btnsearch {
        max-width: inherit;
    }
}