﻿@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: var(--main_color, #22a3a0)
            }

        .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 (min-width: 1200px) {
    .container {
        width: 1200px
    }
}

@media (max-width: 543px) {
    section.sidebar.left-content.col-lg-12 {
        padding: 0
    }
}

@media (max-width: 1199px) {
    header nav .mega-content {
        width: 940px
    }

        header nav .mega-content .level1.item {
            text-align: left
        }
}

@media (max-width: 991px) and (min-width: 768px) {
    .search.f-right {
        margin-right: 50px
    }
}

@media (max-width: 991px) {
    header > .container {
        position: relative
    }

    .menu-bar.hidden-md.hidden-lg {
        position: absolute;
        left: 15px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        z-index: 1000;
        top: 44px
    }

        .menu-bar.hidden-md.hidden-lg .fa {
            font-size: 26px;
            color: var(--main_color, #22a3a0);
            content: "";
            width: 25px;
            height: 25px;
            background-image: url("buttonmenu.png");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain
        }

    header .logo a {
        display: inline-block;
        text-align: left
    }

    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;
        padding-right: 7px
    }

    header nav .nav-item:hover > .dropdown-menu li.open > .dropdown-menu {
        display: block !important
    }

    .header-main {
        padding: 10px 0
    }

    .main-nav {
        width: 0;
        float: left;
        height: 55px;
        border-top: 0px;
        line-height: 55px;
        position: absolute;
        top: 60px;
        right: 35px
    }

        .main-nav .container {
            width: auto
        }
}

@media (max-width: 991px) and (max-width: 767px) {
    .main-nav {
        right: 0px
    }
}

@media (max-width: 991px) {
    #nav {
        padding-right: 0;
        display: none;
        padding-right: 0;
        padding: 10px 0;
        border: 1px solid #ebebeb;
        margin-bottom: 15px
    }

        #nav.open {
            display: block
        }

        #nav .nav-link > .fa {
            float: right;
            line-height: 22px;
            margin-right: -15px;
            width: 40px;
            text-align: center;
            transform: translateY(-5px);
            -webkit-transform: translateY(-5px);
            -moz-transform: translateY(-5px)
        }

    .menu_mobile .ul_collections {
        width: 100%;
        float: left
    }

        .menu_mobile .ul_collections li {
            position: relative;
            background: #fff;
            display: block;
            border-top: solid 1px #e4ebf0
        }

            .menu_mobile .ul_collections li:last-child {
                border-bottom: solid 1px #e4ebf0
            }

            .menu_mobile .ul_collections li.special {
                background: #f5f5f5
            }

                .menu_mobile .ul_collections li.special a {
                    color: var(--main_color, #22a3a0);
                    font-weight: 700;
                    font-family: "Roboto","HelveticaNeue","Helvetica Neue",sans-serif;
                    font-size: 14px;
                    text-decoration: none;
                    padding: 10px 15px
                }

            .menu_mobile .ul_collections li.current {
                background: #ebebeb
            }

            .menu_mobile .ul_collections li .level0 .level1 {
                background: #f5f4f4
            }

                .menu_mobile .ul_collections li .level0 .level1.current > a {
                    color: var(--main_color, #22a3a0)
                }

                    .menu_mobile .ul_collections li .level0 .level1.current > a:before {
                        border-color: var(--main_color, #22a3a0)
                    }

                .menu_mobile .ul_collections li .level0 .level1.current > .fa {
                    color: #e63939
                }

                .menu_mobile .ul_collections li .level0 .level1 a {
                    padding: 10px 15px 10px 45px;
                    position: relative;
                    line-height: 22px
                }

                    .menu_mobile .ul_collections li .level0 .level1 a:before {
                        content: "";
                        top: 16px;
                        left: 25px;
                        position: absolute;
                        width: 9px;
                        height: 9px;
                        border: solid 2px #d7d7d7;
                        border-radius: 50%
                    }

                .menu_mobile .ul_collections li .level0 .level1:last-child {
                    border-bottom: 0px
                }

                .menu_mobile .ul_collections li .level0 .level1 .level1.current {
                    border-top: 0px
                }

                    .menu_mobile .ul_collections li .level0 .level1 .level1.current > a {
                        color: var(--main_color, #22a3a0)
                    }

                        .menu_mobile .ul_collections li .level0 .level1 .level1.current > a:before {
                            border-color: var(--main_color, #22a3a0)
                        }

                    .menu_mobile .ul_collections li .level0 .level1 .level1.current > .fa {
                        color: #e63939
                    }

                .menu_mobile .ul_collections li .level0 .level1 .level1:last-child {
                    border-bottom: 0px
                }

                .menu_mobile .ul_collections li .level0 .level1 .level1 .level2, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3 {
                    background: #f5f4f4
                }

                    .menu_mobile .ul_collections li .level0 .level1 .level1 .level2 a, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3 a {
                        padding: 10px 30px 10px 65px;
                        position: relative;
                        line-height: 22px
                    }

                        .menu_mobile .ul_collections li .level0 .level1 .level1 .level2 a:before, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3 a:before {
                            content: "";
                            top: 16px;
                            left: 45px;
                            position: absolute;
                            width: 9px;
                            height: 9px;
                            border: solid 2px #d7d7d7;
                            border-radius: 50%
                        }

                    .menu_mobile .ul_collections li .level0 .level1 .level1 .level2.current > a, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3.current > a {
                        color: var(--main_color, #22a3a0)
                    }

                        .menu_mobile .ul_collections li .level0 .level1 .level1 .level2.current > a:before, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3.current > a:before {
                            border-color: var(--main_color, #22a3a0)
                        }

                    .menu_mobile .ul_collections li .level0 .level1 .level1 .level2.current > .fa, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3.current > .fa {
                        color: #e63939
                    }

                    .menu_mobile .ul_collections li .level0 .level1 .level1 .level2:last-child, .menu_mobile .ul_collections li .level0 .level1 .level1 .level3:last-child {
                        border-bottom: 0px
                    }

                    .menu_mobile .ul_collections li .level0 .level1 .level1 .level3 a:before {
                        border-radius: 0
                    }

            .menu_mobile .ul_collections li .fa {
                position: absolute;
                right: 10px;
                width: 30px;
                top: 13px;
                text-align: center
            }

            .menu_mobile .ul_collections li a {
                padding: 10px 15px;
                font-size: 14px;
                display: block;
                color: var(--text_color, #737e95);
                text-decoration: none
            }

    .menu_mobile .ul_ {
        width: 100%;
        float: left
    }

        .menu_mobile .ul_ li span {
            padding-left: 15px
        }

        .menu_mobile .ul_ li .phone_ {
            color: red;
            padding-left: 5px
        }

        .menu_mobile .ul_ li a {
            color: #111111;
            font-weight: 400;
            font-family: "Roboto","HelveticaNeue","Helvetica Neue",sans-serif;
            font-size: 15px;
            text-decoration: none;
            padding: 10px 15px
        }

    .opacity_filter.opacity_filter_true {
        content: " ";
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 99999
    }

    .opacity_menu.open_opacity {
        content: " ";
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 999999
    }

    .sidenav {
        width: 280px;
        height: 100%;
        position: fixed;
        z-index: 999999;
        top: 0px !important;
        background-color: var(--main_color, #22a3a0);
        overflow-x: hidden;
        -webkit-box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        -moz-box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        visibility: hidden;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease;
        -webkit-transform: translateX(-280px);
        -ms-transform: translateX(-280px);
        -o-transform: translateX(-280px);
        transform: translateX(-280px)
    }

        .sidenav.open_sidebar_menu {
            visibility: visible;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }

        .sidenav .close_menu {
            display: block;
            height: 66px;
            background-image: url("/image/assets/logoee47.png?1638841067539");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            width: 200px;
            margin-top: -5px;
            margin-left: 15px;
            margin: 0 auto
        }

        .sidenav .head_title_menu {
            display: block;
            text-align: left;
            line-height: 24px;
            font-family: 'Opens Sans', sans-serif;
            font-size: 18px;
            color: #fff;
            padding: 7px 15px
        }

        .sidenav .fot_menu_mobile {
            overflow: hidden;
            float: left;
            width: 100%
        }

            .sidenav .fot_menu_mobile .link_list_action .login_mobile li {
                border-top: solid 1px rgba(0,0,0,0.075)
            }

                .sidenav .fot_menu_mobile .link_list_action .login_mobile li:nth-child(1) {
                    border-top: 0px
                }

                .sidenav .fot_menu_mobile .link_list_action .login_mobile li a {
                    font-family: 'Opens Sans', sans-serif;
                    display: block;
                    font-size: 14px;
                    line-height: 36px;
                    padding: 0px 15px;
                    color: #fff
                }

                    .sidenav .fot_menu_mobile .link_list_action .login_mobile li a .fa {
                        padding-right: 10px
                    }

    .closed_filter {
        display: block;
        background: var(--main_color, #22a3a0);
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        right: 30px;
        top: 10px;
        z-index: 99999;
        cursor: pointer
    }

        .closed_filter .fa {
            font-size: 16px;
            color: #fff;
            line-height: 30px
        }

    .sidenav {
        width: 280px;
        height: 100%;
        position: fixed;
        z-index: 999999;
        top: 0px !important;
        background-color: var(--main_color, #22a3a0);
        overflow-x: hidden;
        -webkit-box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        -moz-box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        box-shadow: 0px 2px 11px 1px rgba(168,168,168,0.54);
        visibility: hidden;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease;
        -webkit-transform: translateX(-280px);
        -ms-transform: translateX(-280px);
        -o-transform: translateX(-280px);
        transform: translateX(-280px)
    }

        .sidenav.open_sidebar_menu {
            visibility: visible;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }

        .sidenav .content_memu_mb {
            display: block;
            float: left;
            width: 100%
        }

            .sidenav .content_memu_mb .customer span {
                padding: 10px 0px;
                display: block;
                cursor: pointer
            }

                .sidenav .content_memu_mb .customer span a {
                    font-size: 14px;
                    line-height: 15px;
                    color: #fff;
                    display: block;
                    margin: 0px 15px
                }

            .sidenav .content_memu_mb .customer .acc a:before {
                font-family: 'themify';
                content: "\e603";
                font-size: 16px;
                color: #fff;
                padding-right: 15px
            }

            .sidenav .content_memu_mb .customer .out a:before {
                font-family: 'themify';
                content: "\e62b";
                font-size: 16px;
                color: #fff;
                padding-right: 15px
            }

            .sidenav .content_memu_mb .link_list_mobile {
                margin: 0px 0px 0px
            }

                .sidenav .content_memu_mb .link_list_mobile .ct-mobile {
                    border-bottom: solid 1px rgba(0,0,0,0.075)
                }

                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile li {
                        position: relative
                    }

                        .sidenav .content_memu_mb .link_list_mobile .ct-mobile li i {
                            position: absolute;
                            right: 5px;
                            top: 0px;
                            cursor: pointer;
                            display: block;
                            text-align: center;
                            width: 30px
                        }

                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 {
                        border-top: solid 1px rgba(0,0,0,0.075)
                    }

                        .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 a {
                            font-family: 'Opens Sans', sans-serif;
                            display: block;
                            font-size: 14px;
                            line-height: 36px;
                            padding: 0px 15px;
                            color: #fff
                        }

                        .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0:last-child {
                            border-bottom: 0px
                        }

                        .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 {
                            border-top: solid 1px rgba(0,0,0,0.075)
                        }

                            .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 a {
                                font-family: 'Opens Sans', sans-serif;
                                display: block;
                                font-size: 14px;
                                line-height: 36px;
                                padding: 0px 15px 0px 55px;
                                color: #fff
                            }

                            .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1:last-child {
                                border-bottom: 0px
                            }

                            .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1:first-child {
                                border-top: 0px
                            }

                            .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 {
                                border-top: solid 1px rgba(0,0,0,0.075)
                            }

                                .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 a {
                                    font-family: 'Opens Sans', sans-serif;
                                    display: block;
                                    font-size: 14px;
                                    line-height: 24px;
                                    padding: 5px 35px 5px 65px;
                                    color: #fff
                                }

                                .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2:last-child {
                                    border-bottom: 0px
                                }

                                .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2:first-child {
                                    border-top: 0px
                                }

                                .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 .level3 {
                                    border-top: solid 1px rgba(0,0,0,0.075)
                                }

                                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 .level3 a {
                                        font-family: 'Opens Sans', sans-serif;
                                        display: block;
                                        font-size: 14px;
                                        line-height: 24px;
                                        padding: 5px 35px 5px 75px;
                                        color: #fff
                                    }

                                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 .level3:last-child {
                                        border-bottom: 0px
                                    }

                                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level0 .level1 .level2 .level3:first-child {
                                        border-top: 0px
                                    }

                    .sidenav .content_memu_mb .link_list_mobile .ct-mobile .level_ico a {
                        padding: 0px 15px 0px 40px
                    }

        .sidenav .top_menu_mobile {
            overflow: hidden;
            background: #fff;
            padding: 10px 0px
        }

        .sidenav .close_menu {
            display: block;
            height: 66px;
            background-image: url("/image/assets/logoee47.png?1638841067539");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            width: 200px;
            margin-top: -5px;
            margin-left: 15px;
            margin: 0 auto
        }

        .sidenav .head_title_menu {
            display: block;
            text-align: left;
            line-height: 24px;
            font-family: 'Opens Sans', sans-serif;
            font-size: 18px;
            color: #fff;
            padding: 7px 15px
        }

        .sidenav .fot_menu_mobile {
            overflow: hidden;
            float: left;
            width: 100%
        }

            .sidenav .fot_menu_mobile .link_list_action .login_mobile li {
                border-top: solid 1px rgba(0,0,0,0.075)
            }

                .sidenav .fot_menu_mobile .link_list_action .login_mobile li:nth-child(1) {
                    border-top: 0px
                }

                .sidenav .fot_menu_mobile .link_list_action .login_mobile li a {
                    font-family: 'Opens Sans', sans-serif;
                    display: block;
                    font-size: 14px;
                    line-height: 36px;
                    padding: 0px 15px;
                    color: #fff
                }

                    .sidenav .fot_menu_mobile .link_list_action .login_mobile li a .fa {
                        padding-right: 10px
                    }

    #open-filters {
        color: #fff;
        background: var(--main_color, #22a3a0);
        position: fixed;
        right: 0;
        top: 35% !important;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        border-radius: 20px 0px 0px 20px;
        z-index: 99999;
        font-size: 18px;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease
    }

        #open-filters:before, #open-filters:after {
            content: "";
            position: absolute
        }

        #open-filters .fter {
            display: block
        }

            #open-filters .fter:before, #open-filters .fter:after {
                content: "";
                position: absolute
            }

            #open-filters .fter:before {
                top: -16px;
                right: 0px;
                width: 20px;
                height: 30px
            }

            #open-filters .fter:after {
                bottom: -15px;
                right: 0px;
                width: 20px;
                height: 30px
            }

        #open-filters.openf {
            right: 256px
        }

            #open-filters.openf 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;
        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.openf {
            visibility: visible;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0)
        }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .header_top .topbar_wrap .head_content .logo_top {
        width: 25% !important
    }

        .header_top .topbar_wrap .head_content .logo_top a img {
            margin-left: 0px !important
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header_top .topbar_wrap .head_content .logo_top {
        width: 40% !important
    }

        .header_top .topbar_wrap .head_content .logo_top a {
            width: 220px;
            line-height: 75px
        }

    .search_full {
        margin-top: 15px
    }

    .header_search_ .search_full .form_search .input-group-btn button {
        margin-top: 15px
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .logo {
        font-size: 30px;
        line-height: 65px
    }

        .logo .logo-wrapper {
            display: inline-block;
            margin: 0 auto;
            max-width: 200px
        }
}

@media (max-width: 767px) {
    .logo {
        font-size: 30px;
        line-height: 65px;
        width: auto;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -os-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 15px
    }

        .logo .logo-wrapper {
            display: inline-block;
            margin: 0 auto;
            max-width: 170px
        }

    .menu-bar.hidden-md.hidden-lg .fa {
        font-size: 24px;
        color: var(--main_color, #22a3a0)
    }
}

@media (max-width: 420px) {
    .col-xs-6.footer-header {
        width: 100%
    }
}

@media (max-width: 430px) {
    .collection p.title-head-info {
        position: static
    }

    .collection h1.title-head {
        margin-bottom: 5px
    }
}

@media (max-width: 480px) {
    .product-tab .tab-link {
        margin-right: 10px
    }
}

@media (max-width: 375px) {
    .sodiachi .btn.btn-50 {
        width: 100%;
        margin-bottom: 10px
    }
}

@media (max-width: 768px) {
    .quick-view {
        display: none !important
    }
}
