﻿@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .table-responsive-block table, .table-responsive-block thead, .table-responsive-block tbody, .table-responsive-block th, .table-responsive-block td, .table-responsive-block tr{display: block}
    .table-responsive-block thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }
    .table-responsive-block tr {
        background: #FFFFFF;
        line-height: 20px;
        margin-bottom: 10px
    }
    .table-responsive-block td {
        border: none;
        position: relative;
        padding-left: 40%;
        text-align: right;
        font-weight: 700
    }
    .table-responsive-block td.last {
        padding: 0;
        line-height: 50px
    }
    .table-responsive-block td.last a{color: #80BB35}
    .table-responsive-block td:before {
        position: absolute;
        top: 13px;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        text-align: left;
        white-space: nowrap;
        font-weight: 400
    }
    .table-responsive-block .table-order td:nth-of-type(1):before{content: "Đơn hàng"}
    .table-responsive-block .table-order td:nth-of-type(2):before{content: "Ngày"}
    .table-responsive-block .table-order td:nth-of-type(3):before{content: "Chuyển đến"}
    .table-responsive-block .table-order td:nth-of-type(4):before{content: "Địa chỉ"}
    .table-responsive-block .table-order td:nth-of-type(5):before{content: "Giá trị"}
    .table-responsive-block .table-order td:nth-of-type(6):before{content: "Tình trạng"}
    .table-responsive-block #order_details td:nth-of-type(1):before{content: "Sản phẩm"}
    .table-responsive-block #order_details td:nth-of-type(2):before{content: "Mã sản phẩm"}
    .table-responsive-block #order_details td:nth-of-type(3):before{content: "Giá"}
    .table-responsive-block #order_details td:nth-of-type(4):before{content: "Số lượng"}
    .table-responsive-block #order_details td:nth-of-type(5):before{content: "Tổng"}
    .table-responsive-block #order_details td:nth-of-type(6):before{content: "Tình trạng"}
    .table-responsive-block .totalorders td:nth-of-type(1):before{content: "Tạm tính"}
    .table-responsive-block .totalorders td:nth-of-type(2):before{content: "Phí vận chuyển"}
    .table-responsive-block .totalorders td:nth-of-type(3):before{content: "Tổng tiền"}
    .table-responsive-block .totalorders td:nth-of-type(4):before{content: "Số lượng"}
    .table-responsive-block .totalorders td:nth-of-type(5):before{content: "Tổng"}
    .table-responsive-block .totalorders td:nth-of-type(6):before{content: "Tình trạng"}
}
@media (max-width: 543px) {
    section.sidebar.left-content.col-lg-12{padding: 0}
    .products .col-xss-6, .category-products .col-xss-6 {
        clear: none;
        width: 50%
    }
}
@media (max-width: 1199px) {
    header nav .mega-content{width: 940px}
    header nav.sticky{position: static}
    header nav .mega-content .level1.item{text-align: left}
    header nav .logo{margin: 0 10px}
    header nav .nav > li > a {
        line-height: 37px;
        padding: 25px 15px 25px 0
    }
    header nav .nav > li > a:after{display: none}
    .logo.f-left {
        width: 100%;
        text-align: center
    }
    .header_search {
        padding: 17px 0 0 0;
        margin-left: 30px;
        width: 190px
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    .search.f-right{margin-right: 50px}
}
@media (max-width: 991px) {
    .head-menu {
        color: #333333;
        padding: 20px 15px 15px;
        font-size: 15px;
        border-bottom: 1px solid #EBEBEB
    }
    .head-menu .list-inline{margin-left: 0}
    .head-menu a {
        color: #333333;
        font-weight: 400
    }
    .head-menu li.li-search {
        width: 100%;
        margin: 0;
        padding: 0
    }
    .head-menu .li-search .header_search {
        padding: 0;
        width: 100%;
        margin: 16px 0 10px;
    }
    .header-content {
        padding-top: 20px;
        padding-bottom: 10px
    }
    header.header {
        -webkit-box-shadow: 0 5px 10px 0 rgba(84, 84, 84, 0.15);
        -moz-box-shadow: 0 5px 10px 0 rgba(84, 84, 84, 0.15);
        box-shadow: 0 5px 10px 0 rgba(84, 84, 84, 0.15)
    }
    .topbar-mobile.hidden-lg.hidden-md {
        color: #FFFFFF;
        line-height: 40px;
        background: #80BB35;
        font-size: 15px
    }
    .topbar-mobile.hidden-lg.hidden-md a{color: #FFFFFF}
    #nav-mobile{text-align: left}
    #nav-mobile .h3 {
        margin-top: 10px;
        color: #252525;
        font-size: 18px
    }
    header nav .nav-item:hover > a:before{display: none}
    header nav.sticky{position: static}
    header nav{padding-top: 0}
    header nav #nav-mobile .nav-item > .dropdown-menu {
        padding: 0;
        position: static;
        width: 100%;
        float: none;
        border: none;
        background: transparent;
        box-shadow: none
    }
    header nav .nav > .nav-item > a{padding-left: 0 !important}
    header nav .nav-item li.dropdown-submenu > .dropdown-menu {
        box-shadow: none;
        width: 100%
    }
    header > .container{position: relative}
    .menu-bar.hidden-md.hidden-lg {
        position: absolute;
        top: 63px;
        left: 15px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        z-index: 1000
    }
    .icon-cart-mobile.hidden-md.hidden-lg.f-left.absolute {
        right: 20px;
        top: 48px
    }
    .icon-cart-mobile.hidden-md.hidden-lg.f-left.absolute .cartCount {
        display: inline-block;
        width: 24px;
        height: 24px;
        /*border-radius: 0;*/
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        background: #2A2A2A;
        position: absolute;
        font-size: 11px;
        right: -15px;
        top: -10px;
        color: #FFFFFF
    }
    header .logo a {
        display: inline-block;
        text-align: left;
        padding-bottom: 5px
    }
    .heading-cart {
        position: absolute;
        right: 15px;
        top: 30px
    }
    header nav .nav-item {
        display: block;
        width: 100%;
        text-align: left;
        margin: 0
    }
    header nav .nav-item .dropdown-menu {
        display: none !important;
        position: static;
        border: none
    }
    header nav .nav-item.open a{background: none !important}
    header nav .nav-item.open > .dropdown-menu {
        display: block !important;
        margin: 0;
        padding: 0
    }
    header nav li.menu-line {
        display: none;
        border: none
    }
    header nav .nav-item > a {
        line-height: 20px;
        padding: 5px 15px 3px
    }
    header nav #nav-mobile .nav-item > .dropdown-menu {
        padding: 0 0 0 15px;
        position: static;
        width: 100%;
        float: none;
        border: none;
    }
    header nav .nav-item:hover > .dropdown-menu li.open > .dropdown-menu{display: block !important}
    header nav .nav-item > .dropdown-menu li.open > .dropdown-menu{display: block !important}
    header nav .nav li > a {
        line-height: 24px;
        padding: 5px 0;
        border-bottom: 1px solid #A7A7A7
    }
    header nav .nav li > a:hover{color: #80BB35}
    header nav .nav li:last-child > a{border: none}
    header nav .nav-item > .dropdown-menu li{padding-left: 0}
    header nav .nav-item .nav-item-lv2 {padding: 6px 0}
    header nav .nav-item .nav-item-lv2 .fa{top: 9px !important}
    header nav .nav-item > .dropdown-menu li{padding-right: 0}
    header nav .dropdown-menu li{padding: 6px 15px}
    header nav .dropdown-menu > li > a {
        padding: 3px 0;
        line-height: 1.42857 !important;
    }
    .header-main{padding: 10px 0}
    #nav {
        display: none;
        padding: 10px 0;
        margin-bottom: 15px
    }
    #nav.open{display: block}
    #nav .nav-link > .fa {
        float: right;
        line-height: 22px;
        width: 40px;
        text-align: center;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px)
    }
    #nav-mobile {
        padding: 10px 15px;
        margin-bottom: 15px
    }
    #nav-mobile.open{width: 100%}
    #nav-mobile a {
        color: #A7A7A7;
        border-color: #A7A7A7
    }
    #nav-mobile .nav-link > .fa {
        float: right;
        line-height: 22px;
        margin-right: -15px;
        width: 40px;
        text-align: center;
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px)
    }
    header nav .nav-item.active > a:before{display: none}
    header nav .nav-item li.dropdown-submenu .dropdown-menu{padding-left: 15px}
    #nav-mobile .nav-link > .fa {
        position: absolute;
        right: -2px;
        top: 9px !important
    }
}
@media (max-width: 991px) {
    .logo {
        display: inline-block;
        font-size: 30px;
        line-height: 65px
    }
    .menu-offcanvas {
        height: 100%;
        overflow-y: auto;
        width: 300px;
        position: fixed !important;
        background-color: #F6F6F7;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        z-index: 999999 !important;
        top: 0 !important;
        left: 0;
        -webkit-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
        transform: translateX(-300px)
    }
    .menu-offcanvas.open {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    .menu-offcanvas #nav-mobile {
        overflow: scroll;
        max-height: calc(100vh - 136px)
    }
    .menuclose {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #252525;
        border: 1px solid #EBEBEB;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px
    }
}
@media (max-width: 543px) {
    .heading-cart{top: 23px}
    header{position: static !important}
    header .logo a {
        display: inline-block;
        text-align: left;
        max-width: 175px
    }
    .topbar .a-left{display: none}
    .topbar ul.list-inline.f-right{float: left !important}
    .logo {
        display: block;
        font-size: 20px
    }
    .search.f-right {
        float: none;
        width: 100%
    }
}
@media (max-width: 1199px) {
    footer .copyright{margin-top: 30px}
    footer .mailchimp {
        text-align: center;
        margin-bottom: -50px
    }
}
@media (max-width: 991px) {
    .featured-blogs .blog-item-thumbnail > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto
    }
    .copyright .col-sm-12.col-md-6.a-left{text-align: center !important}
    footer.footer-style-2 .copyright ul.menu {
        line-height: unset;
        width: 100%;
        text-align: center
    }
    footer{margin-top: 84px}
    footer .mailchimp {
        text-align: center;
        margin-bottom: -80px
    }
    footer .mailchimp form {
        text-align: center;
        margin-top: 10px
    }
    footer {
        margin-top: 0;
        padding-bottom: 0
    }
}
@media (max-width: 767px) {
    footer .copyright .a-left{text-align: center !important}
    footer .footer-address .contact-box-info .fixline {
        height: 5px;
        display: block
    }
    .section-news .video-box{margin-bottom: 0}
    footer .mailchimp{margin-bottom: 0}
    footer .footer-widget .list-menu{display: none}
    footer .footer-widget h3{margin: 0}
    footer .footer-widget h3.hastog:after {
        content: "+";
        font-size: 18px;
        float: right;
        display: inline-block
    }
    footer .footer-widget.active h3{margin-bottom: 10px}
    footer .footer-widget.active h3.hastog:after{content: "-"}
    footer .footer-widget.active .list-menu{display: block}
    .col-xs-12:last-child .footer-widget{border: none}
    footer .footer-address {
        border: none;
        margin-top: 0 !important;
        padding-top: 20px !important
    }
    footer{margin-top: 0}
    footer .site-footer{border: none}
    .logo-footer{margin-bottom: 20px}
    footer .mailchimp {
        text-align: left;
        transform: translateY(0);
        -moz-transform: translateY(0)
    }
    footer .mailchimp h3 {
        margin-bottom: 10px;
        font-weight: 400
    }
    footer .mailchimp .container{padding: 0}
    footer .mailchimp .container > div{padding: 30px 15px}
    footer .mailchimp form {
        text-align: left;
        margin-top: 15px
    }
    footer .mailchimp form input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px
    }
    footer .mailchimp form .btn{margin: 0}
    footer .copyright {
        line-height: 24px;
        border-top: 1px dashed #545455
    }
    footer .fixline {
        display: block;
        opacity: 0;
        height: 0
    }
}
@media (max-width: 420px) {
    .col-xs-6.footer-header{width: 100%}
}
@media (max-width: 991px) {
    .sortPagiBar{margin-bottom: 20px}
    .sortPagiBar .bg-white.clearfix.f-right{width: 100%}
    .sortPagiBar .box-heading .title-head{margin-bottom: 14px}
    .sortPagiBar .box-heading:after{display: none}
    .sortPagiBar #sort-by{padding-left: 0}
}
@media (max-width: 767px) {
    .products-view-list .product-box .product-thumbnail{width: 100%}
    .products-view-list .product-box .product-info {
        width: 100%;
        margin: 0
    }
    .section-tinmoinhat .tintucslider {
        padding: 0;
        display: block;
        width: 100%;
        clear: left
    }
    .section-tinmoinhat h2.title-head {
        float: none;
        text-align: center;
        margin-bottom: 10px
    }
}
@media (max-width: 430px) {
    .collection p.title-head-info{position: static}
    .collection h1.title-head{margin-bottom: 5px}
}
@media (max-width: 375px) {
    .pagination .page-link {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 1px
    }
    .search-main h2{font-size: 24px}
    .search-main .title-head{font-size: 18px}
}
@media (max-width: 480px) {
    .product-tab .tab-link {
        margin-right: 0;
        width: 100%;
        border: none;
        border-bottom: 1px solid #EBEBEB
    }
    .product-tab .tab-link:last-child{border-bottom: none}
    .product-tab .tab-link.current {
        border-right: none;
        border-left: none
    }
}
@media (max-width: 991px) {
    .details-pro{margin-top: 30px}
}
@media (max-width: 767px) {
    .breadcrumb-title{font-size: 20px}
    .details-product .large-image > a{height: 300px}
    .details-product .details-pro .custom-btn-number {
        width: 100%;
        margin-right: 0
    }
    .details-product .details-pro .form-detail-action button.btn{width: 100%}
    .travel-info .fa{width: 17px}
    .travel-info span.inline-block.margin-right-15{margin-bottom: 15px}
}
@media (max-width: 375px) {
    .sodiachi .btn.btn-50 {
        width: 100%;
        margin-bottom: 10px
    }
}
@media (max-width: 768px) {
    .quick-view{display: none !important}
}
@media (max-width: 1199px) {
    .product-image-block{padding: 0}
    .aside-item.aside-mini-list-product{margin-bottom: 0}
    #open-filters {
        color: #FFFFFF;
        background: #80BB35;
        position: fixed;
        right: 0;
        top: 35% !important;
        padding: 4px 10px;
        cursor: pointer;
        z-index: 999;
        font-size: 18px;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease
    }
    #open-filters.open{right: 256px}
    #open-filters.open i:before{content: '\f00d'}
    #open-filters span{display: none}
    .dqdt-sidebar {
        position: fixed;
        width: 256px;
        background: #FFFFFF;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 15px;
        border: solid 1px #EBEBEB;
        overflow: auto;
        z-index: 100000;
        visibility: hidden;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    .dqdt-sidebar.open {
        visibility: visible;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}
@media (max-width: 767px) {
    .blog-main .blog-item-name {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px
    }
    .blog-main .blog-item-summary{margin-bottom: 0}
}
@media (max-width: 767px) {
    .tag-share .social-media{text-align: left}
}
@media (max-width: 991px) {
    .main-container .col-main .cart ul.checkout .inline-block {
        line-height: 45px;
        padding-right: 0;
        font-size: 21px;
        width: 100%
    }
}
@media (max-width: 767px) {
    .title-cart a{margin-top: -31px}
}
@media (max-width: 767px) {
    .google-map .map {
        height: 350px !important;
        margin-bottom: 15px
    }
}
@media (max-width: 767px) {
    .page_customer_account .col-main-acount .col-right-account .block-account{margin-bottom: 20px}
    div#b{margin-top: 0 !important}
}
@media (max-width: 767px) {
    .page-404 form {
        width: 100%;
        display: inline-block;
        position: relative;
        margin-bottom: 0 !important
    }
}
@media (max-width: 767px) {
    .signup.search-main button.btn.btn-primary {
        width: 100%;
        margin-top: 10px
    }
}
@media (max-width: 767px) {
    .bread-crumb{line-height: 24px}
    .bread-crumb .col-xs-12{padding-left: 0 !important}
    section.signup.search-main form input{width: 100% !important}
}
