@media (min-width: 992px){
    .form-search{
        width:20%;
        -ms-flex-order: 1;
                 order: 1;
    }
    .logo{
        width:50%;
        -ms-flex-order: 2;
                 order: 2;
    }
    .hotline{
        width:20%;
        -ms-flex-order: 3;
                 order: 3;
    }
    .form-search {
        padding-right:58px;
    }
    .form-search .form-control{
        border: 0;
        border-bottom: 2px solid #60a703;
        border-radius: 0;
        height:40px;
        padding: 12px 0;
        margin-top:5px;
    }
    .header-nav{
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }
    .navbar-expand-lg .navbar-collapse {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .navbar-toggler,
    .navbar-nav-title{
        display:none;
    }
    .navbar-nav>.nav-item {
        position: relative;
    }
    .navbar-nav .nav-item .nav-link {
        position: relative;
        color:var(--color-greyish);
        text-transform:uppercase;
        font-weight:500;
        line-height:20px;
        padding:20px 25px;
        -webkit-transition: all .25s;
             -o-transition: all .25s;
                transition: all .25s;
    }
    .navbar-nav .nav-item.dropdown .nav-link {
        padding-right:28px;
    }
    .navbar-nav .nav-item:hover .nav-link,
    .navbar-nav .nav-item:focus .nav-link{
        color:var(--color-text-hover);
    }
    .navbar-nav .dropdown-menu {
        display: block;
        padding: 8px 0;
        margin: 0px;
        border: none!important;
        background-color: var(--color-white);
        min-width:250px;
        -webkit-transition: all .25s;
             -o-transition: all .25s;
                transition: all .25s;
        -webkit-transform: rotateX(90deg);
                transform: rotateX(90deg);
        -webkit-transform-origin: top;
            -ms-transform-origin: top;
                transform-origin: top;
        -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
           -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
                box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
        -webkit-border-radius: 0px;
                border-radius: 0px;
        opacity: 0;
        z-index: 5000;
    }
    .navbar-nav>.nav-item>.dropdown-menu:after {
        bottom: 100%;
        left: 20%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
    }
    .navbar-nav .nav-item.full {
        position: static;
    }
    .navbar-nav .full .dropdown-menu{
        display: -ms-flexbox;
        display: flex;
        width:100%;
    }
    .navbar-nav .dropdown-submenu {
        position: relative;
    }
    .navbar-nav .dropdown-submenu .dropdown-menu {
        position: absolute;
        top: 0px;
        left: 100%;
    }
    .navbar-nav .nav-item:hover>.dropdown-menu,
    .navbar-nav .dropdown-submenu:hover .dropdown-menu{
        opacity: 1;
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
    }
    .navbar-nav .dropdown-menu .dropdown-item{
        position:relative;
        padding:10px 15px;
    }
    .navbar-nav .dropdown-submenu .dropdown-item{
        padding-right:23px;
    }
    .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu .dropdown-item:active,
    .navbar-nav .dropdown-submenu:hover>.dropdown-item,
    .navbar-nav .dropdown-submenu:focus>.dropdown-item{
        color:var(--color-white);
        background-color:var(--color-bgmenu);
    }
    .navbar-nav .dropdown-menu .col-dropdown-item {
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
        max-width: 20%;
    }
    .navbar-nav .nav-link .caret{
        right:14px;
    }
    .navbar-nav .dropdown-item .caret{
        right:5px;
    }
    .navbar-nav .dropdown-item .caret::before{
        top:-2px;
        left:0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);

    }
    .navbar-nav .dropdown-item .caret::after{
        top:2px;
        left:0;
        -webkit-transform: rotate(235deg);
                transform: rotate(235deg);
    }
    .navbar-nav .dropdown-menu .dropdown-item:hover .caret::before,
    .navbar-nav .dropdown-menu .dropdown-item:active .caret::before,
    .navbar-nav .dropdown-submenu:hover>.dropdown-item .caret::before,
    .navbar-nav .dropdown-submenu:focus>.dropdown-item .caret::before,
    .navbar-nav .dropdown-menu .dropdown-item:hover .caret::after,
    .navbar-nav .dropdown-menu .dropdown-item:active .caret::after,
    .navbar-nav .dropdown-submenu:hover>.dropdown-item .caret::after,
    .navbar-nav .dropdown-submenu:focus>.dropdown-item .caret::after{
        background-color:#f1f1f1;
    }
    .product-item:hover .product-item-btn {
        opacity: 1;
        visibility: visible;
    }
    .article .article-header,
    .article .article-wrap{
        width: 800px;
        margin:0 auto;
    }
    .article .article-wrap{
        padding-left:80px;
        padding-right:80px;
    }
    .article .article-wrap img{
        max-width:800px;
        margin:0 -80px;
    }
    .news-list .col-news-item{
        -ms-flex: 0 0 33.333333%!important;
            flex: 0 0 33.333333%!important;
        max-width: 33.333333%!important;
    }
    .phone-ring .phone-text-md{
        display:none;
    }
    .modal-book .modal-dialog{
        max-width:800px;
        width:800px;
    }
}

@media (max-width: 991px){
    :root{
        --margin-bottom:10px;
    }
    body {
        -webkit-transition: -webkit-transform .3s ease-in-out;
                transition: -webkit-transform .3s ease-in-out;
         -o-transition: transform .3s ease-in-out;
            transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    }
    .col-left {
        -ms-flex-order: 2;
                 order: 2;
    }
    .col-right {
        -ms-flex-order: 1;
                 order: 1;
    }
    .header-main {
        padding-bottom:0;
    }
    .header-main>.container{
        max-width:100%!important;
        padding:0;
    }
    .header-main>.container>.d-flex{
        position:relative;
        -ms-flex-direction: column!important;
            flex-direction: column!important;
    }
    .logo{
        display:block;
        z-index:99;
    }
    .hotline {
        display:none!important;
    }
    .form-search{
        width:100%;
        background-color:var(--color-bgmenu);
        padding:10px;
        margin-top:12px;
    }
    .form-search .form-control{
        height:36px;
        padding:8px 8px 8px 40px;
        -webkit-border-radius:20px;
                border-radius:20px;
    }
    .form-search .btn-search{
        left:5px;
        top:4px;
        width:40px;
        border:none!important;
        background-color:transparent!important;
    }
    .form-search .btn-search::before {
        border-color:var(--color-border-search);
    }
    .form-search .btn-search::after{
        background-color:var(--color-border-search);
    }
    .cart{
        position:absolute;
        right:30px;
        top:20px;
        z-index:9999;
    }
    .cart .text{
        display:none;
    }
    .navbar-collapse-show {
        position: fixed;
        width: 100vw;
        overflow: hidden;
        -webkit-transform: translateX(300px);
        -ms-transform: translateX(300px);
        transform: translateX(300px);
    }
    .bg-overlay {
        opacity: 0;
        visibility: hidden;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 999;
        padding:0!important;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .navbar-collapse-show .bg-overlay {
        opacity: 1;
        visibility: visible;
    }
    .navbar-toggler{
        position:absolute;
        left:10px;
        top:15px;
        line-height:1px;
        text-align:center;
        padding:10px 0 15px 0;
        border:none;
        -webkit-border-radius:0;
                border-radius:0;
        z-index:9999;
    }
    .icon-bars{
        position:relative;
        display:inline-block;
        width:20px;
        height:2px;
        background-color:var(--color-text);
    }
    .icon-bars::before,
    .icon-bars::after{
        content: '';
        position: absolute;
        left:0;
        width:20px;
        height:2px;
        background-color:var(--color-text);
    }
    .icon-bars::before{
        top:-6px;
    }
    .icon-bars::after{
        top:6px;
    }
    .navbar-collapse-show .navbar-toggler{
        position:fixed;
        left:0px;
        top:0;
        padding:18px 15px 24px 15px;
        background-color:var(--color-bgmenu);
    }
    .navbar-collapse-show .navbar-toggler .icon-bars,
    .navbar-collapse-show .navbar-toggler .icon-bars::before,
    .navbar-collapse-show .navbar-toggler .icon-bars::after{
        background-color:var(--color-white);
    }
    .navbar-nav-title {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        height:50px;
        font-size:120%;
        color:var(--color-white);
        background-color:var(--color-bgmenu);
    }
    .navbar-collapse {
        display: block;
        position: fixed;
        top: 0px;
        bottom:0;
        left: -300px;
        width: 300px;
        height:auto!important;
        z-index: 1000;
        background-color: var(--color-white);
        -webkit-transition: all .5s ease-in-out;
             -o-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
    }
    .navbar-collapse .navbar-nav {
        position:absolute;
        top:50px;
        left:0;
        right:0;
        height:100vh;
        overflow-y: auto;
        padding:5px 0;
    }
    .navbar-nav .nav-link,
    .navbar-nav .dropdown-item{
        position:relative;
        padding:10px;
        line-height:20px;
        color:var(--color-menu-second);
        border-bottom:1px solid #eee;
    }
    .navbar-nav .dropdown-menu > li > .dropdown-item {
        padding-left:20px;
    }
    .navbar-nav .dropdown-menu ul > li > .dropdown-item {
        padding-left:30px;
    }
    .navbar-nav .dropdown-menu ul ul > li > .dropdown-item {
        padding-left:40px;
    }
    .navbar-nav .dropdown-menu ul ul ul > li > .dropdown-item {
        padding-left:50px;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:active,
    .navbar-nav .nav-link.active,
    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus,
    .navbar-nav .dropdown-item:active,
    .navbar-nav .dropdown-item.active{
        color:var(--color-menu-second);
        background-color:var(--color-white);
    }
    .navbar-nav .show>.nav-link,
    .navbar-nav .show>.dropdown-item{
        font-weight:600;
    }
    .navbar-nav .dropdown-menu {
        background-color: var(--color-white);
        padding:0;
        margin: 0px;
        border:none;
    }
    .navbar-nav .show>.dropdown-menu {
        display: block;
        top: 100%;
    }
    .navbar-nav .show.full .dropdown-menu{
        display: -ms-flexbox;
        display: flex;
        padding-left:0!important;
    }
    .navbar-nav .dropdown-menu .col-dropdown-item {
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 50%;
    }
    .navbar-nav .caret{
        width:28px;
        height:28px;
        right:10px;
        margin-top:-14px;
        border:1px solid #ddd;
        -webkit-border-radius:50%;
                border-radius:50%;
    }
    .navbar-nav .caret::before,
    .navbar-nav .caret::after{
        top:50%;
        margin-top:-4px;
    }
    .navbar-nav .caret::before{
        left:10px;
    }
    .navbar-nav .caret::after{
        left:15px;
    }
    .box-product .box-body,
    .box-news .box-body{
        padding:10px 10px 0 10px;
    }
    .row-product{
        margin-left:-5px;
        margin-right:-5px;
    }
    .col-product{
        padding-left:5px;
        padding-right:5px;
    }
    .product-item .product-item-icon {
        font-size:11px;
        height:20px;
        line-height:20px;
    }
    .product-item .product-item-btn {
        display:none!important;
    }
    .product-item .product-item-title {
        font-size:100%;
        line-height:20px;
        height:40px;
        max-height:40px;
    }
    .product-item .product-item-price .price{
        font-size:120%;
        font-weight:700;
    }
    .product-item .product-item-price .old-price{
        font-size:100%;   
    }
    .product-item .product-item-price .discount{
        padding:2px 4px;
        margin-left:5px;
    }
    .product-item .product-item-price .discount:before {
        margin-top:-3px;
    }
    .product-gallery{
        margin-bottom:20px;
    }
    .article .article-banner {
        margin-top:-10px;
    }
    .aside-bottom .row {
        margin-left:-5px;
        margin-right:-5px;
    }
    .aside-bottom .col-3 {
        padding-left:5px;
        padding-right:5px;
    }
    .phone-ring {
        -ms-flex-direction: column!important;
            flex-direction: column!important;
        padding:5px 0;
    }
    .phone-circle {
        width:24px;
        height:24px;
        background-color:transparent;
        margin-right:0;
        margin-bottom:6px;
    }
    .phone-circle .fa {
        top:0!important;
        left:0!important;
    }
    .phone-circle .fa-phone,
    .phone-circle .fa-facebook,
    .phone-circle .fa-email{
        filter:var(--filter-color-white);
    }
    .phone-ring .phone-text{
        display:none;
    }
    .phone-ring .phone-text-md {
        font-size:12px;
    }
}

@media (min-width: 769px){
    .box .box-header ul{
        margin-top:8px;
    }
    .box-list .box-header{
        padding-bottom:6px;
    }
    .box-list .box-title{
        font-size:120%;
        font-weight:500;
        padding:0;
    }
    .box-list .box-header .nav-filter{
        margin:0;
    }
    .box-list .box-header .nav-filter>li{
        margin-left:10px;
    }
    .box-list .box-header .nav-filter>li>a{
        padding:4px 10px;
        border:1px solid var(--color-border);
        border-radius:4px;
    }
    .box-list .box-header .nav-filter>li.filter-title{
        line-height:20px;
        padding:5px 0;
    }
    .box .box-header .nav-filter>li>span .fa{
        margin-right:5px;
    }
    .box-product .box-header,
    .box-news .box-header,
    .box-product .box-title,
    .box-news .box-title{
        
    }
    .box-border .box-body{
        padding:16px;
    }
    .product-item:hover{
        cursor:pointer;
    }
    .news-list .col-news-item{
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 50%;
    }
    .news-item .news-item-img{
        -webkit-border-radius: 3px 3px 0 0;
                border-radius: 3px 3px 0 0;
    }
    .news-item .card-body{
        padding:16px 16px 46px 16px;
        border:1px solid #ddd;
        border-top:none!important;
        -webkit-border-radius: 0 0 3px 3px;
                border-radius: 0 0 3px 3px;
    }
    .news-item .news-item-desc{
        max-height:80px;
        overflow:hidden;
    }
    .news-item-special {
        border:1px solid var(--color-border);
        border-radius: 3px;
    }
    .news-item-special .news-item-img {
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
    }
    .news-item-special .news-item-body{
        position:relative;
        padding: 16px 16px 46px 0;
    }
    .news-item-special .news-item-title{
        font-size:25px;
        font-weight:700;
        margin-bottom:24px;
    }
    .news-item-special .news-item-desc{
        font-size:19px;
        line-height:1.4;
    }
    .news-item-special .btn-continue {
        position:absolute;
        left: 0;
        bottom:20px;
        font-size:17px;
    }
    .box-news-special .news-item-vertical .card-body {
        padding: 16px 0 30px 0;
    }
    .box-news-special .news-item-vertical .news-item-title {
        font-size:17px;
        margin-bottom:0;
    }
    .box-news-special .news-item-vertical .btn-continue {
        left: 0;
        bottom:0;
    }
    .modal-book .modal-dialog{
        max-width:calc(100% - 30px);
    }
    .modal-book .modal-body{
        -ms-flex-direction: row!important;
            flex-direction: row!important;
    }
    .modal-book .modal-left{
        -ms-flex: 0 0 40%;
        -webkit-box-flex: 0;
        flex: 0 0 40%;
        max-width: 40%;
        padding: 20px;
    }
    .modal-book .modal-right {
        -ms-flex: 0 0 60%;
        -webkit-box-flex: 0;
        flex: 0 0 60%;
        max-width: 60%;
    }
    .modal-book .modal-hotline {
        border: 1px dashed #fdfb56;
        -webkit-border-radius: 10px;
                border-radius: 10px;
    }
}

@media (max-width: 768px){
    .wrap-breadcrumb {
        padding:30px 0;
    }
    .breadcrumb-title {
        font-size:120%;
    }
    .box-list .box-title{
        padding-top:16px;
    }
    .box-list .box-header .nav-filter{
        width:100%;
        padding-top:0;
    }
    .box-list .box-header .nav-filter>li{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        overflow:hidden;
    }
    .box-list .box-header .nav-filter>li>a {
        font-size:80%;
        text-align:center;
        padding:6px 4px;
    }
    .box-list .box-header .nav-filter>li.filter-title{
        display:none;
    }
    .product-sort > span {
        display:none;
    }
    .article .article-banner{
        height:400px;
    }
    .news-list {
        padding-top:12px;
    }
    .news-list .col-news-item{
        margin-bottom:12px;
    }
    .box-news-more .box-header {
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .box-news-more .box-title {
        font-size:120%;
        padding:20px 0;
    }
    .news-item{
        width:100%;
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-direction: unset;
            flex-direction: unset;
        padding:10px;
    }
    .news-item .news-item-time{
        margin-bottom:4px;
    }
    .news-item .news-item-img{
        width:120px;
        -webkit-border-radius:3px;
                border-radius:3px;
        margin-right:12px;
    }
    .news-item .card-body {
        -ms-flex: 1;
        flex: 1;
        padding:0;
    }
    .news-item .news-item-title{
        font-size:100%;
        margin-bottom:0;
    }
    .news-item .news-item-desc,
    .news-item .btn-continue,
    .news-item-special .btn-continue{
        display:none;
    }
    .news-item-special {
        margin-top:10px;
    }
    .box-news-special .row {
        margin-left:-5px;
        margin-right:-5px;
    }
    .box-news-special .col-6,
    .box-news-special .col-md-4,
    .box-news-special .col-md-8{
        padding-left:5px;
        padding-right:5px;
    }
    .news-item-special .news-item-img{
        -webkit-border-radius: 3px 3px 0 0;
                border-radius: 3px 3px 0 0;
    }
    .news-item-special .news-item-desc{
        margin-bottom:0;
    }
    .box-news-special .news-item-vertical .card-body {
        padding: 10px 0 30px 0;
    }
    .box-news-special .news-item-vertical .news-item-title {
        font-size:16px;
    }
    .box-news-special .news-item-vertical .btn-continue {
        left: 0;
        bottom: 10px;
    }
    .wrap-service {
        padding:12px 0;
    }
    .service-item {
        -ms-flex-direction: column;
            flex-direction: column;
    }
    .service-item .media-body {
        text-align: center;
        padding-left:0;
        padding-top:10px;
    }
    .author-detail .author-info{
        text-align:center;
    }
    .stores{
        -ms-flex-direction: column;
            flex-direction: column;
    }
    .stores .stores-left{
        width:100%;
        height:400px;
    }
    .stores .stores-maps{
        -ms-flex: auto;
            flex: auto;
        height: 500px;
    }
    .modal-book .modal-logo{
        margin:10px 0;
    }
    .modal-book .modal-logo img{
        max-height:90px;
    }
    .modal-book .modal-hotline{
        padding:10px 0;
        border-top:1px solid #bbb;
    }
    .modal-book .modal-hotline>a{
        font-size:24px;
        line-height:1;
    }
    .modal-book .modal-right {
        padding-left:10px;
        padding-right:10px;
    }
    .product-order-img img {
        max-width:120px;
    }
    .product-order .product-name {
        font-size:120%;
    }
    .product-order .row {
        margin-left:-4px;
        margin-right:-4px;
    }
    .product-order .col-6 {
        padding-left:4px;
        padding-right:4px;
    }
}

@media (min-width: 576px) {
    
}

@media (max-width: 575px) {
    .owl-theme .owl-dots .owl-dot span {
        width:10px;
        height:10px;
    }
    .wrap .container{
        background-color:var(--color-white);
    }
    .box-product .box-body,
    .box-news .box-body,
    .box-content{
        padding-left:0;
        padding-right:0;
    }
    .box-cart{
        padding:10px;
        margin-bottom:10px;
    }
    .box-cart .box-cart-header .box-cart-title{
        font-size:100%;
    }
    .cart-info-user .form-group-button .btn-default{
        padding:10px;
    }
    .product-info .product-availability{
        font-size:120%;
        padding-left:20px;
    }
    .product-info .product-availability .fa{
        width:16px;
        height:16px;
        top:8px;
    }
    .review-result{
        margin-left:-10px;
        margin-right:-10px;
    }
    .product-cart,
    .product-total{
        padding:10px 0;
    }
    .product-item-buy .product-item-img{
        width:60px;
        margin-right:5px;
    }
    .product-cart .product-item-buy{
        padding-right:5px;
    }
    .featured-news{
        height:240px;
        margin-bottom:10px;
    }
    .featured-news .news-item-title{
        font-size:24px;
        padding-left:20px;
        padding-right:20px;
    }
    .news-item{
        padding:0;
    }
    .box-list .featured-news{
        margin-top:10px;
    }
    .detail-content .zippy-container{
        padding-left:0;
        padding-right:0;
    }
    .detail-content .zippy-container .zippy-content ol{
        padding-left:10px;
    }
}

@media (max-width: 375px) {
    .article .article-banner{
        height:300px;
    }
    .article .article-body-title{
        font-size:125%;
    }
    .article .article-review{
        font-size:100%;
    }
    .article .article-review .article-review-result{
        display:none;
    }
}