.category {}
.category .i-img  a {
    display: block;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border: solid 1px #d9d9d9;
    margin-bottom: 5px;
}

.category .i-img  a  img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 95%;
    max-width: 95%;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.category .i-title {
    margin-top: 5px;
}
.category .i-title a {
    display: block;
    font-weight: normal;
    color: #de0059;
    text-align: center;
    height: 44px;
    overflow: hidden;
}





/*=========================================================*/
.toolSearch {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: dotted 1px #565656;
}
.toolSearch.s-footer {
    padding-top: 10px;
    margin-top: 20px;
    border-top: dotted 1px #565656;
    border-bottom: 0;
}
.toolSearch form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toolSearch .pagination {
    width: initial;
}
.toolSearch .pagination ul {
    padding-bottom: 0;
}
.toolSearch .pagination ul li {
    float: left;
}
.toolSearch select {
    width: 150px;
    height: 35px;
    background: #ffffff;
    border: solid 1px #cccccc;
    font-size: 14px;
    line-height: 22px;
}
/*----------------- VIEW 1 ----------------*/
.ListCat {
    margin: 0 -10px;
}
.ListCat:before {
    content: "";
    display: block;
    clear: both;
}
.ListCat .ViewCat {
    float: left;
    padding: 0 10px;
    width: 25%;
}
.ListCat .ViewCat div > a {
    display: block;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border: solid 1px #d9d9d9;
    margin-bottom: 5px;
}
.ListCat .ViewCat div > a > img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 95%;
    max-width: 95%;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.ListCat .ViewCat div > h3 > a {
    display: block;
    font-weight: normal;
    color: #de0059;
    text-align: center;
    height: 44px;
    overflow: hidden;
}
/*********** DETAIL **********/
.vnt-product-detail {}
.divInfo {
    margin-bottom: 25px;
}
.divInfo h2.title {
    font-size: 22px;
    line-height: 30px;
}
.divInfo .p_name {
    color: #f20d0d;
}
.divInfo .votes{
    margin-bottom: 20px;
}
.divInfo .votes i{
    color:#f3d700;
}
.divInfo .votes a {
    color: #333333
}
.divInfo .compare{
    margin-bottom: 15px;
}
.divInfo .compare a {
    display: inline-block;
    background: #8c8c8c;
    color: #ffffff;
    padding: 5px 10px;
}
.divInfo .compare a span{
    padding-right: 20px;
    position: relative;
}
.divInfo .compare a span:before{
    content: "\f021";
    font-family: fontAwesome;
    position: absolute;
    right:0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.divInfo .compare a:hover{
    background: #de0059;
}
div#divImage{
    padding-top: 66.666666%;
    position: relative;
    overflow: hidden;
    border:solid 1px #cccccc;
    margin-bottom: 10px;
}
div#divImage img{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}
.zoom_pic{
    text-align: center;
}
.zoom_pic .zoom{
    color:#de0059;
}

.vnt-product-detail .the-title {
    margin-bottom: 5px;
    font-size: 16px;
}
.vnt-product-detail .the-code {
    margin-bottom: 5px;
    font-weight: bold;
}
.boxInfo {
    border: 1px solid #ddccac;
    padding: 10px;
    background: #fff7e2;
    margin-bottom: 20px;
}
.boxInfo table tr td{
    padding:5px 0px;
}
.boxInfo table tr td:first-child{
    width:110px;
}
.boxInfo table tr td .price{
    color: #ff0005;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}



.vnt-quantity {
    max-width: 162px;
    margin-bottom: 15px;
}
.vnt-quantity .quantity {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.vnt-quantity button,
.vnt-quantity input {
    height: 40px;
    text-align: center;
}

.vnt-quantity button {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: solid 1px #cccccc;
    text-align: center;
    padding: 5px;
    font-size: 13px;
    line-height: 30px;
    color: #666666;
}

.vnt-quantity input {
    width: calc(100% - 80px);
    border: none;
    text-align: center;
    border-top: solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;

    font-size: 16px;
    line-height: 30px;
}

.gridCart{
    margin: 0 -10px;
}
.gridCart:after{
    content: "";
    display: block;
    clear: both;
}
.div_qua {
    padding:0 10px;
    width: 50%;
    margin-bottom: 10px;
}
.div_qua a {
    display: block;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    float: left;
    border: solid 1px #cccccc;
    text-align: center;
    padding-top: 13px;
    color: #666666;
}
.div_qua a.down{
    border-right: none;
}
.div_qua a.up{
    border-left: none;
}
.div_qua input {
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -ms-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    width: calc(100% - 80px);
    height: 40px;
    float: left;
    border: solid 1px #cccccc;
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    color: #666666;
    text-align: center;
}
.div_btn{
    padding:0 10px;
    float: left;
    width: 50%;
    margin-bottom: 10px;
}
.div_btn button#do_Addcart {
    width: 100%;
    background: #e02727;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    border: none;
    padding: 7px 10px;
    padding-left: 30px;
    text-align: left;
    position: relative;
    border:solid 1px #e02727;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.div_btn button#do_Addcart:hover{
    color:#e02727;
    background: #ffffff;
}
.div_btn button#do_Addcart:before{
    content: "\f291";
    font-family: FontAwesome;
    position: absolute;
    left:5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.div_btn button#addWishList {
    width: 100%;
    background: #8c8c8c;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    border: none;
    padding: 7px 10px;
    padding-left: 30px;
    text-align: left;
    position: relative;
    border:solid 1px #8c8c8c;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.div_btn button#addWishList:hover{
    background: #ffffff;
    color:#8c8c8c;
}
.div_btn button#addWishList:before{
    content: "\f004";
    font-family: FontAwesome;
    position: absolute;
    left:5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.boxInfo .share{
    float:left;
}
.boxInfo .share ul li {
    float: left;
    margin-right: 15px;
}
.boxInfo .print{
    float:right;
}
.boxInfo .print ul li {
    float: left;
    margin-left: 15px;
}
.boxInfo .print ul li a {
    font-size: 14px;
    line-height: 22px;
    padding-left: 25px;
    position: relative;
}
.boxInfo .print ul li a:before{
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.boxSideProduct{
    border:solid 1px #dbb965;
    margin-bottom: 20px;
}
.boxSideProduct .title {
    font-size: 16px;
    line-height: 24px;
    background: #dbb965;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 20px;
}
.boxSideProduct .content{
    padding: 10px 15px;
}
.boxSideProduct .belong{
    padding: 10px 5px;
}
.belong .info{
    padding-left: 5px;
}
.belong .pro_both {
    margin-top: 5px;
}
.reviewTxt{
    margin-bottom: 10px;
}
.reviewTxt span{
    font-weight: bold;
}
.reviewStar>ul>li{
    margin-bottom: 5px;
}
.reviewStar .att{
    width:50%;
    float: left;
    margin-right: 15px;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}
.reviewStar .ats{
    overflow: hidden;
}
.reviewStar .ats ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.reviewStar .ats ul li{
    margin-right: 3px;
}
.reviewStar .ats ul li i{
    font-size: 12px;
    line-height: 20px;
    color:#ff9800;
}


/*vnt-table-size*/

.vnt-table-size {
    border: 1px solid #ddccac;

    background: #fff7e2;
    margin-bottom: 20px;
}
 
.vnt-table-size table{
    width: 100%;
}
.vnt-table-size thead{
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
}
.vnt-table-size tbody tr{
    border-top: 1px solid #ddccac;
}
.vnt-table-size thead th,
.vnt-table-size tbody td {
    padding: 5px;
}


.vnt-table-size tbody td:last-child {
    width: 110px;
}

.vnt-table-size .s-title {}

.vnt-table-size .s-sku {
    white-space: nowrap;
}
.vnt-table-size .s-price {
    font-weight: bold;
}
.vnt-table-size .s-quantity {}

.vnt-table-size .s-quantity .quantity{
    position: relative;
    display: flex;
    border: solid 1px #dddddd;
    border-radius: 5px;
    overflow: hidden;
}
.vnt-table-size .s-quantity button,
.vnt-table-size .s-quantity input{
    font-size: 13px;
    line-height: 20px;
    height: 30px;

    text-align: center;
    background: #ffffff;
    border:none;
}
.vnt-table-size .s-quantity button{
    width: 25px;
    display: block;
    background-color: #f6f6f6;
    padding: 0;

}
.vnt-table-size .s-quantity input{
    width: calc(100% - 50px);
    border:none;
    text-align: center;
    border-left: solid 1px rgba(0,0,0,0.08);
    border-right: solid 1px rgba(0,0,0,0.08);

}



/*==============BEGIN: TAB===================*/
.vnt-tab{
    width: 100%;
    margin-bottom: 35px;
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
    -o-transition:height 0.5s ease;
    transition:height 0.5s ease;
}
.vnt-tab ul{
    width: 100%;
    position: relative;
    display: inline-block;
    background-color: #f5f5f5;
}
.vnt-tab ul li {
    float: left;
}
.vnt-tab ul li .title {
    font-size: 14px;
    line-height: 20px;
    padding: 12px 25px;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    border-right: solid 2px #ffffff;
}
.vnt-tab ul li .vnt-content{
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    padding:20px 0px;
    visibility: hidden;
    display: none;
    opacity: 0;
    -webkit-transition:opacity 0.5s ease;
    -moz-transition:opacity 0.5s ease;
    -o-transition:opacity 0.5s ease;
    transition:opacity 0.5s ease;
}
.vnt-tab ul li .title:hover, .vnt-tab ul li.active .title {
    background-color: #f9bb65;
    z-index: 80 !important;
    color: #ffffff;
}
.vnt-tab ul li.active .vnt-content{
    visibility: visible;
    opacity: 1;
    display: block;
}
.vnt-tab ul li .tabLink {
    font-size: 14px;
    line-height: 20px;
    padding: 12px 20px;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    color:#333333;
    border-right:solid 2px #222222;
    display: block;
    background: #bcd02f;
}
/*==============END: TAB===================*/
.box-product .mid-title {
    border-bottom: 3px solid #f9bb65;
    overflow: hidden;
}
.box-product .mid-title .titleL {
    float: left;
    background: #f9bb65;
    padding: 9px 15px;
    color: #ffffff;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
}
.box-product .mid-title .titleR {
    float: right;
    margin-top: 10px;
}
#other_product .slick-list{
    margin: 0 -15px;
}
#other_product .item{
    padding: 0 15px;
}
#other_product .slick-arrow{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width:20px;
    height:35px;
    background: none;
    border:none;
    font-size: 0;
    z-index: 1;
    color:#666666;
}
#other_product .slick-prev{
    left:-35px;
}
#other_product .slick-next{
    right:-35px;
}
#other_product .slick-arrow:before{
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-size: 20px;
    line-height: 28px;
}
#other_product .slick-prev:before{
    content: "\f053";
}
#other_product .slick-next:before{
    content: "\f054";
}
#other_product .slick-arrow:hover{
    color:#de0059;
}
/*==================================================*/
.alertify-notifier .ajs-message{
    width:400px;
}
.alertify-notifier.ajs-right .ajs-message.ajs-visible{
    right: 400px;
}
.alertify-notifier .ajs-message.ajs-success{
    background: #ffffff;
    border:solid 1px #cccccc;
}
.popupProduct .img {
    width: 70px;
    float: left;
    margin-right: 20px;
}
.popupProduct .caption{
    overflow: hidden;
}
.popupProduct:after{
    content: "";
    display: block;
    clear: both;
}
.popupProduct .t1 {
    font-size: 12px;
    line-height: 20px;
    color:#de0059;
    font-weight: bold;
    margin-bottom: 5px;
}
.popupProduct .title {
    margin-bottom: 5px;
}
.popupProduct .title a{
    font-style: 13px;
    line-height: 21px;
}
.popupProduct .btnPopup a {
    display: inline-block;
    background: #ababab;
    color: #ffffff;
    text-transform: capitalize;
    margin-right: 5px;
    padding: 3px 10px;
}
.popupProduct .btnPopup a:hover{
    background: #de0059;
}
.product .tb{
    height: 55px;
    margin-bottom: 0;
}
.tb thead tr th{
    text-align: center;
}
.tb tbody tr td span{
    color: #f00;
    font-weight: bold;
    font-size: 15px;
}
#thumbnail-for{
    margin-bottom: 30px;
}
#thumbnail-for .img{
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}
#thumbnail-for .img img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}
#thumbnail-for .slick-dots{
    position: absolute;
    left: 10px;
    right:10px;
    bottom: 18px;
    text-align: center;
}
#thumbnail-for .slick-dots li{
    display: inline-block;
    margin: 0 3px;
}
#thumbnail-for .slick-dots li:first-child{
    margin-left: 0;
}
#thumbnail-for .slick-dots li button {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.41);
    border-radius: 100%;
    font-size: 0;
    padding: 0;
    border: solid 2px var(--web-color);
}
#thumbnail-for .slick-dots li.slick-active button{
    background:  var(--web-color);
}
/*================================================================================*/
/*===============================RESPONSIVE=======================================*/
/*================================================================================*/
@media all and (max-width: 991px) {
    .zoom_pic{
        margin-bottom: 30px;
    }
    .vnt-tab ul{
        border:0px;
        background: none;
    }
    .vnt-tab ul li{
        display: block;
        position: relative;
        margin-right: 0px;
        margin-bottom: 10px;
        float:none;
    }
    .vnt-tab ul li .vnt-content{
        position: relative;
        visibility: visible;
        opacity: 1;
        display: none;
    }
    .vnt-tab ul li .title{
        padding: 12px 50px 12px 20px;
        background-color: #f5f5f5;
    }
    .vnt-tab ul li .title:before{
        content:"\f0da";
        font-family: FontAwesome;
        font-size: 20px;
        line-height: 28px;
        position: absolute;
        right:15px;
        top:50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .vnt-tab ul li.active .title:before{
        content:"\f0d7";
    }
    .vnt-tab ul li.active .title{

    }
}
@media all and (max-width: 768px) {
    .ListCat .ViewCat {
        width: 33.333333%;
    }
    .div_qua{
        width:100%;
        margin-bottom: 10px;
    }
    .div_btn{
        width:100%;
        margin-bottom: 10px;
    }
}
@media all and (max-width: 540px) {
    .ListCat .ViewCat {
        width: 50%;
    }
    .toolSearch form {
        display: block;
    }
    .toolSearch select {
        margin-bottom: 10px;
    }
    .toolSearch .pagination {
        width: 100%;
    }
    .alertify-notifier .ajs-message{
        width:300px;
    }
    .alertify-notifier.ajs-right .ajs-message.ajs-visible{
        right: 300px;
        padding: 10px;
    }
}
@media all and (max-width: 360px) {
    .ListCat .ViewCat {
        width: 100%;
    }
}