﻿@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: #fff;
        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: #333;
        padding: 20px 15px 15px;
        font-size: 15px;
        border-bottom: 1px solid #ebebeb
    }

    .head-menu .list-inline {
        margin-left: 0
    }

    .head-menu a {
        color: #333;
        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: 0;
        margin-top: 16px;
        margin-bottom: 10px
    }

    .header-content {
        padding-top: 20px;
        padding-bottom: 10px
    }

    header.header {
        webkit-box-shadow: 0px 5px 10px 0px rgba(84, 84, 84, 0.15);
        -moz-box-shadow: 0px 5px 10px 0px rgba(84, 84, 84, 0.15);
        box-shadow: 0px 5px 10px 0px rgba(84, 84, 84, 0.15)
    }

    .topbar-mobile.hidden-lg.hidden-md {
        color: #fff;
        line-height: 40px;
        background: #80bb35;
        font-size: 15px
    }

    .topbar-mobile.hidden-lg.hidden-md a {
        color: #fff
    }

    #nav-mobile {
        text-align: left
    }

    #nav-mobile .h3 {
        margin-top: 10px;
        color: #252525;
        font-size: 18px
    }

    header nav .menu-item:hover>a:before {
        display: none
    }

    header nav.sticky {
        position: fixed;
        top: 0 !important;
        width: 100%;
        z-index: 99;
        left: 0;
        background: rgba(255, 255, 255, .9);
    }

    header nav {
        padding-top: 0
    }

    header nav #nav-mobile .nav-item>.dropdown-menu {
        padding: 0 0 0 0px;
        position: static;
        width: 100%;
        float: none;
        border: none;
        padding-right: 0px;
        background: transparent;
        box-shadow: none
    }

    header nav .nav>.nav-item>a {
        padding-left: 0 !important
    }

    header nav .menu-item li.dropdown-submenu>.dropdown-menu {
        box-shadow: none;
        width: 100%
    }

    header>.container {
        position: relative
    }


    .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: #fff
    }

    header .logo a {
        display: inline-block;
        text-align: left;
        padding-bottom: 5px
    }

    .heading-cart {
        position: absolute;
        right: 15px;
        top: 30px
    }

    header nav .menu-item {
        display: block;
        width: 100%;
        text-align: left;
        margin: 0
    }

    header nav .menu-item .dropdown-menu {
        display: none !important;
        position: static;
        border: none
    }

    header nav .menu-item.open a {
        background: none !important
    }

    header nav .menu-item.open>.dropdown-menu {
        display: block !important;
        margin: 0;
        padding: 0
    }

    header nav li.menu-line {
        display: none;
        border: none
    }

    header nav .menu-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;
        padding-right: 0px
    }

    header nav .menu-item:hover>.dropdown-menu li.open>.dropdown-menu {
        display: block !important
    }

    header nav .menu-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;
        color: #000;
    }
    header nav .nav-item.active>a {
        color: #000;
        opacity: .7;
    }

    header nav .nav li>a:hover {
        color: #80bb35
    }

    header nav .nav li:last-child>a {
        border: none
    }

    header nav .menu-item>.dropdown-menu li {
        padding-left: 0
    }

    header nav .menu-item .nav-item-lv2 {
        padding-left: 0;
        padding-right: 0;
        padding: 6px 0
    }

    header nav .menu-item .nav-item-lv2 .fa {
        top: 9px !important
    }

    header nav .menu-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;
        padding-right: 0
    }

    .header-main {
        padding: 10px 0
    }

    #nav {
        padding-right: 0;
        display: none;
        padding-right: 0;
        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 .menu-item.active>a:before {
        display: none
    }

    header nav .menu-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: #fff;
        -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: none;
        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: 0px;
        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: 0px;
        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: #fff;
        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: #fff;
        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
    }
}