﻿@media (min-width: 1200px) {
    .blog-item-thumbnail img{
        height: 200px;
    }
    .blog-item-name{
        min-height: 46px;
    }
}

@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: #e32124
    }

    .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: 1199px) {
    header nav .mega-content {
        width: 940px
    }
    header nav .mega-content .level1.item {
        text-align: left
    }
    header nav .logo {
        margin: 11.5px 20px 11.5px 0
    }
    header nav .nav>li>a {
        padding: 0 10px
    }
    header nav .nav>li>a:after {
        display: none
    }
    .logo.f-left {
        width: 100%;
        text-align: center
    }
    .header_search {
        margin-left: 30px;
        width: 190px
    }
    footer .copyright {
        margin-top: 30px
    }
    footer .mailchimp {
        text-align: center;
        margin-bottom: -50px
    }
    .product-image-block {
        padding: 0
    }

    .aside-item.aside-mini-list-product {
        margin-bottom: 0
    }

    #open-filters {
        color: #fff;
        background: #e32124;
        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 (min-width: 992px) {
    header nav.sticky {
        position: fixed;
        top: 0 !important;
        width: 100%;
        z-index: 999
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .search.f-right {
        margin-right: 50px
    }
}

@media (max-width: 991px) {
    header nav .logo {
        margin: 0 !important
    }

    .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
    }
    .head-menu .li-search .header_search .search_form {
        margin-bottom: 0
    }

    .header-content {
        padding: 5px 0;
    }
    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: #fff;
        line-height: 40px;
        background: #e32124;
        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 .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 0 0 0;
        position: static;
        width: 100%;
        float: none;
        border: none;
        padding-right: 0;
        background: transparent
    }

    header nav .nav-item li.dropdown-submenu>.dropdown-menu {
        width: 100%
    }

    header>.container {
        position: relative
    }

    .menu-bar.hidden-md.hidden-lg {
        position: absolute;
        top: 50%;
        left: 0;
        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: 15px;
        top: 40%;
    }
    .icon-cart-mobile.hidden-md.hidden-lg.f-left.absolute .icon i.fa {
        font-size: 20px
    }
    .icon-cart-mobile.hidden-md.hidden-lg.f-left.absolute .cartCount {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 0;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        background: #e32124;
        position: absolute;
        font-size: 11px;
        right: -15px;
        top: -10px;
        color: #fff
    }

    header .logo a {
        display: inline-block;
        text-align: left
    }

    .heading-cart {
        position: absolute;
        right: 15px;
        top: 30px
    }

    header nav .nav-item {
        display: block;
        width: 100%;
        text-align: left;
        margin: 0
    }
    header nav .flex-grow-1 .nav-item .dropdown-menu {
        display: none !important;
        position: static;
        border: none
    }
    #nav-mobile ul li .dropdown-menu{
        display: none;
    }
    header nav .nav-item.open a {
        background: none
    }
    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;
        padding-right: 0
    }
    header nav .nav-item>.dropdown-menu li.open>.dropdown-menu {
        display: block !important
    }
    header nav .nav li>a {
        line-height: 24px;
        padding: 10px 5px;
        border-bottom: 1px solid #a7a7a7
    }
    header nav .nav li>a:hover {
        color: #e32124
    }
    header nav .nav li:last-child>a {
        border: none
    }
    header nav .nav-item:hover>.dropdown-menu li {
        padding-left: 0
    }
    header nav .nav-item .nav-item-lv2 {
        padding-left: 0;
        padding-right: 0;
        padding: 6px 0
    }
    header nav .nav-item .nav-item-lv2 .fa {
        top: 9px !important
    }
    header nav .nav-item:hover>.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: #252525;
        border-color: #e1e1e1
    }
    #nav-mobile .nav-item.open>.nav-link>.fa:before {
        content: "\f107"
    }
    #nav-mobile .nav-item-lv2.open>.nav-link>.fa:before {
        content: "\f107"
    }
    #nav-mobile .nav-link>.fa {
        float: right;
        line-height: 35px;
        width: 35px;
        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: -12px;
        top: calc(50% - 16px) !important
    }
    .logo {
        display: inline-block;
        font-size: 30px;
        line-height: 40px;
    }

    .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 {
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    .menu-offcanvas #nav-mobile {
        overflow: auto;
        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
    }

    .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: initial;
        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
    }

    .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
    }
    .details-pro {
        margin-top: 15px
    }
    .main-container .col-main .cart ul.checkout .inline-block {
        line-height: 45px;
        padding-right: 0;
        font-size: 21px;
        width: 100%
    }
}

@media (max-width: 768px) {
    .quick-view {
        display: none !important
    }
}

@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
    }
    .blog-main .blog-item-name {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .blog-main .blog-item-summary {
        margin-bottom: 0
    }
    .tag-share .social-media {
        text-align: left
    }
    .title-cart a {
        margin-top: -31px
    }
    .google-map .map {
        height: 350px !important;
        margin-bottom: 15px
    }
    .page_customer_account .col-main-acount .col-right-account .block-account {
        margin-bottom: 20px
    }

    div#b {
        margin-top: 0 !important
    }
    .page-404 form {
        width: 100%;
        display: inline-block;
        position: relative;
        margin-bottom: 0 !important
    }
    .signup.search-main button.btn.btn-primary {
        width: 100%;
        margin-top: 10px
    }
    .bread-crumb {
        line-height: 24px
    }

    .bread-crumb .col-xs-12 {
        padding-left: 0 !important
    }

    section.signup.search-main form input {
        width: 100% !important
    }
    .details-product #gallery_01 .item a img{
        width: 100%;
        object-fit: contain;
    }
    .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
    } 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;
        font-size: 1em;
        padding: 8px 0;
    }

    footer .footer-widget h3.hastog:after {
        content: "+";
        font-size: 18px;
        float: right;
        display: inline-block;
        cursor: pointer;
    }

    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
    }
    #btnRate {
        float: unset;
        text-align: center;
    }
    .infoComment {
        margin-bottom: 7px;
    }
    .rightCommentItem .voteView {
        position: unset;
        margin-bottom: 7px;
    }
    .reviewBackground.voteView {
        margin-top: 5px;
        margin-left: 0;
    }
}

@media (max-width: 543px) {
    .panel-group-details-product iframe{
        width: 100% !important;
    }
    section.sidebar.left-content.col-lg-12 {
        padding: 0
    }

    .products .col-xss-6, .category-products .col-xss-6 {
        clear: none;
        width: 50%
    }
    .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: 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: 430px) {
    .collection p.title-head-info {
        position: static
    }

    .collection h1.title-head {
        margin-bottom: 5px
    }
}

@media (max-width: 420px) {
    .col-xs-6.footer-header {
        width: 100%
    }
}

@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
    }
    .sodiachi .btn.btn-50 {
        width: 100%;
        margin-bottom: 10px
    }
    .form-detail-action #BuyNow {
        margin-left: 0;
        margin-top: 10px;
    }
    .form-detail-action #addToCart {
        margin-right: 50px;
    }
}

