@media (min-width: 992px){
    .col-left {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }
    .col-right {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }
    .navbar-brand{
        padding:0;
        margin-right:auto;
    }
    .navbar-brand>img{
        max-height:70px;
    }
    .navbar-collapse{
        -ms-flex-pack: end!important;
        justify-content: flex-end!important;
    }
    .navbar-nav>.nav-item {
        position: relative;
    }
    .navbar-nav .nav-item .nav-link {
        position: relative;
        color:var(--color-menu);
        text-transform:uppercase;
        font-weight:normal;
        line-height:20px;
        padding:20px 20px;
        -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-menu-hover);
    }
    .navbar-nav .dropdown-menu {
        display: block;
        padding: 8px 0;
        margin: 0px;
        border: none!important;
        background-color: var(--color-bgmenu-second);
        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: var(--color-bgmenu-second);
        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;
        color:var(--color-white);
        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>.nav-item>.nav-link>.caret::before,
    .navbar-nav>.nav-item>.nav-link>.caret::after{
        background-color:var(--color-menu);
    }
    .navbar-nav>.nav-item:hover>.nav-link>.caret::before,
    .navbar-nav>.nav-item:active>.nav-link>.caret::before,
    .navbar-nav>.nav-item:hover>.nav-link>.caret::after,
    .navbar-nav>.nav-item:active>.nav-link>.caret::after{
        background-color:var(--color-menu-hover);
    }
    .navbar-nav .dropdown-item .caret{
        right:5px;
    }
    .navbar-nav .dropdown-item .caret::before{
        top:-2px;
        left:0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        background-color:var(--color-menu);

    }
    .navbar-nav .dropdown-item .caret::after{
        top:2px;
        left:0;
        -webkit-transform: rotate(235deg);
                transform: rotate(235deg);
        background-color:var(--color-menu);
    }
    .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:var(--color-menu);
    }
    .search-box {
        position: relative;
        width: 40px;
        height: 40px;
        margin-left:20px;
    }
    .search-box .input-group{
        position: absolute;
        top: 0;
        right: 0;
        height:40px;
        background-color:transparent;
        border: 3px solid transparent;
        -webkit-border-radius:20px;
                border-radius:20px;
        transition: width 1s cubic-bezier(0.000, 0.5, 0.000, 1.000);
    }
    .search-box .form-control{
        display:none;
        -webkit-border-radius:20px!important;
                border-radius:20px!important;
    }
    .search-box .search-toggle {
        -webkit-border-radius:20px;
                border-radius:20px;
    }
    .search-box .input-group:hover{
        width: 250px;
        border-color:#fff;
        background-color:#fff;
        cursor: pointer;
    }
    .search-box .input-group:hover .form-control{
        display:block;
    }
    .search-box .input-group:hover .search-toggle{
        background-color:var(--color-primary);
    }
    .product-item:hover .product-item-btn {
        opacity: 1;
        visibility: visible;
    }
    .modal-order .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;
    }
    .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;
        height:50px;
        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-white);
    }
    .icon-bars::before,
    .icon-bars::after{
        content: '';
        position: absolute;
        left:0;
        width:20px;
        height:2px;
        background-color:var(--color-white);
    }
    .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 {
        justify-content:center;
    }
    .navbar-brand{
        margin:0;
        padding:5px 0;
    }
    .navbar-brand img{
        max-height:60px;
    }
    .navbar-collapse {
        display: block;
        position: fixed;
        top: 0px;
        bottom:0;
        left: -300px;
        width: 300px;
        height:auto!important;
        z-index: 1000;
        background-color: var(--color-bgmenu);
        -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);
        border-bottom:1px solid var(--color-menu-border);
    }
    .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-hover);
        background-color:transparent;
    }
    .navbar-nav .show>.nav-link,
    .navbar-nav .show>.dropdown-item{
        font-weight:600;
    }
    .navbar-nav .dropdown-menu {
        background-color:transparent;
        padding:0;
        margin: 0px;
        border:none;
        border-radius:0;
    }
    .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 var(--color-menu);
        -webkit-border-radius:50%;
                border-radius:50%;
    }
    .navbar-nav .caret::before,
    .navbar-nav .caret::after{
        top:50%;
        margin-top:-4px;
        background-color:var(--color-menu);
    }
    .navbar-nav .caret::before{
        left:10px;
    }
    .navbar-nav .caret::after{
        left:15px;
    }
    .search-box{
        position:absolute;
        left:0;
        right:0;
        top:0;
        height:50px;
        padding:8px;
        background-color:transparent;
        border-bottom:1px solid var(--color-menu-border);
    }
    .search-box .input-group{
        position:relative;
        height:36px;
    }
    .search-box .form-control {
        padding-left:12px;
        background-color:#fff;
    }
    .search-box .search-toggle::before{
        border-color:#555;
    }
    .search-box .search-toggle::after{
        background-color:#555;
    }
    .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;
    }
    .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: 769px) {
    .modal-order .modal-dialog{
        max-width:calc(100% - 30px);
    }
    .modal-order .modal-body{
        -ms-flex-direction: row!important;
            flex-direction: row!important;
    }
    .modal-order .modal-left{
        -ms-flex: 0 0 40%;
        -webkit-box-flex: 0;
        flex: 0 0 40%;
        max-width: 40%;
        padding: 20px;
    }
    .modal-order .modal-right {
        -ms-flex: 0 0 60%;
        -webkit-box-flex: 0;
        flex: 0 0 60%;
        max-width: 60%;
    }
}

@media (max-width: 768px) {
    .modal-order .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 (max-width: 575px) {
    .owl-theme .owl-dots .owl-dot span {
        width:10px;
        height:10px;
    }
    .review-result{
        margin-left:-10px;
        margin-right:-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;
    }
}