/*================BEGIN BOX PRODUCT================*/
.boxProduct{
    margin-bottom: 25px;
}
.boxProduct .title {
    background: #f5f5f5;
}
.boxProduct .title .titleL .logo_icon{
    height: 44px;
    width: 44px;
    position: relative;
}
.boxProduct .title .titleL .logo_icon::before{
    content: '';
    background-image: url(../images/logo_icon.jpg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
}
.boxProduct .title .titleL {
    float: left;
}
.boxProduct .title .titleR{
    float: right;
}
.boxProduct .title .titleL h2,
.boxProduct .title .titleL h1{
    font-size: 20px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 800;
    padding: 10px 0px 10px 0px;
    background-repeat: no-repeat;
    background-position: center left 15px;
    background-size: 30px;
    min-height: 44px;
    position: relative;
    color: #cd0814;
}

.vnt_product .boxProduct .title .titleL h2,
.vnt_product .boxProduct .title .titleL h1{
    padding: 10px 30px 10px 30px;
}
.vnt_product .boxProduct .title .titleL h2::after,
.vnt_product .boxProduct .title .titleL h1::after{
    display: none;
}
.boxProduct.nobg .title .titleL h2,
.boxProduct.nobg .title .titleL h1{
    padding: 10px 20px 10px 20px;
    background-image: none;
}

/*================END BOX PRODUCT==================*/
/*================BEGIN PRODUCT====================*/
.products{
    padding: 5px 15px 15px 15px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 1;
}
/* .products::before{
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 50%;
    right: 50%;
    border-top: solid 1px #0e4e96;
    border-bottom: solid 1px #0e4e96;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    pointer-events: none;
    z-index: 1;
}
.products::after{
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    bottom: 50%;
    border-left: solid 1px #0e4e96;
    border-right: solid 1px #0e4e96;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    pointer-events: none;
    z-index: 1;
} */
.products:hover::before{
    left: 0px;
    right: 0px;
}
.products:hover::after{
    top: 0px;
    bottom: 0px;
}
.products:hover .img{
    transform: scale(1.05);
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
.products .img{
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
.products .img img{
    position: absolute;
    top: 50%;
    left: 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: 100%;
    /* width:100%; */
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.products .tend h3{
    font-size: 15px;
    line-height: 22px;
    color:#333333;
    font-weight: 700;
    height:40px;
    overflow: hidden;
}
.products .star ul li{
    float:left;
    margin-right: 5px;
    color:#ffcc00;
}
.products .price{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}
.products .price .normal{
    font-size: 13px;
    line-height: 22px;
    color:#888888;
    display: block;
    text-decoration: line-through;
    height: 22px;
    overflow: hidden;
}
.products .price .reduce{
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color:#d10000;
    display: block;
    width: 100%;
    height: 24px;
    overflow: hidden;
}
.products .price .sale{
    color: #cd0814;
    margin-left: 5px;
}
.products .price .sale::before{
    content: '(';
}
.products .price .sale::after{
    content: ')';
}
.products .price .reduce span:last-child, .product .price .normal span:last-child{
    text-transform: uppercase;
    margin-left: 5px;
}
.products .ribbon {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 1;
}
.products .ribbon .rib {
    text-transform: uppercase;
    color: #ffffff;
    padding: 0px 5px;
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 35px;
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 100%;
    -webkit-animation: quick-alo-circle-img-anim 2s infinite ease-in-out;
    -moz-animation: quick-alo-circle-img-anim 2s infinite ease-in-out;
    -ms-animation: quick-alo-circle-img-anim 2s infinite ease-in-out;
    -o-animation: quick-alo-circle-img-anim 2s infinite ease-in-out;
    animation: quick-alo-circle-img-anim 2s infinite ease-in-out;
}
@-moz-keyframes quick-alo-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -moz-transform: rotate(0deg) scale(1) skew(1deg)
    }
  }
  @-webkit-keyframes quick-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg)
    }
  }
  @-o-keyframes quick-alo-circle-img-anim {
    0% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -o-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        -o-transform: rotate(0deg) scale(1) skew(1deg)
    }
  }
  @keyframes quick-alo-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
  }
.products .ribbon .rib i{
    font-size: 20px;
    line-height: 35px;
}
.products .link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.products .ifi {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 15px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
.products:hover .ifi{
    opacity: 1;
    visibility: inherit;
    -webkit-transform: initial;
    -ms-transform: initial;
    -o-transform: initial;
    transform: initial;
}
.products .ifi .caption{
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: solid 1px #cacaca;
}
.products .attr {
    color: #666666;
}
.products .attr ul li{
    margin-bottom: 10px;
}
.products .attr .att{
    float:left;
    width: 95px;
    margin-right: 5px;
    text-transform: uppercase;
}
.products .attr .att:after{
    content: ":";
    float:right;
}
.products .attr .ats{
    overflow: hidden;
}
/*================END PRODUCT======================*/

#vnt-main{
    background-color: transparent;
    padding: 0;
}
.filterSidebar{
    margin-bottom: 20px;
}
.filterSidebar .title {
    font-size: 16px;
    line-height: 24px;
    background: #eaeaea;
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    padding: 10px 15px;
}
.filterSidebar ul {
    border: solid 1px #eaeaea;
    border-top: none;
    max-height: 265px;
    overflow: auto;
}
.filterSidebar ul li a {
    display: block;
    text-transform: uppercase;
    border-bottom: solid 1px #eaeaea;
    padding: 11px 15px;
}
.filterSidebar ul li a:hover{
	color:#007b3c;
}
.filterSidebar ul li:last-child a{
	border-bottom: none;
}
/*===========PRODUCT SORT===================*/
.sortProduct{
	position: relative;
}
.sortProduct .icon {
    padding: 11px 15px;
    cursor: pointer;
}
.sortProduct .icon span{
	position: relative;
	padding-right: 25px;
}
.sortProduct .icon span:before{
	content: "\f0d7";
	font-family: FontAwesome;
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.sortProduct .list{
	position: absolute;
	right:0;
	top:100%;
	min-width: 250px;
	background: #ffffff;
	z-index: 11;
	display: none;
	border:solid 1px #CCCCCC;
}
.sortProduct.active .list{
	display: block;
}
.sortProduct .list ul{
	width:100%;
}
.sortProduct .list ul li a {
    display: block;
    color: #333333;
    padding: 5px 12px;
    font-weight: normal;
    text-transform: none;
    border-bottom: solid 1px #ccc;
}
.sortProduct .list ul li:last-child a{
    border-bottom: none;
} 
/*==============SLIDE PRODUCT===============*/
.slideProduct{
	margin-bottom: 25px;
}
/*==========================================*/
.gridPP{
    margin-bottom: 25px;
}
.gridPP:after{
    content: "";
    display: block;
    clear: both;
}
.gridPP .col{
    width:25%;
    float:left;
    border:solid 1px #dddddd;
    margin: -1px 0px 0px -1px;
}
.linkaAll {
    text-align: center;
}
.linkaAll a {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    background: #3f3691;
    color: #ffffff;
    padding: 7px 33px;
    position: relative;
    border:solid 1px #3f3691;
    z-index: 1;
}
.linkaAll a::after{
    content: '';
    position: absolute;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    background: #3f3691;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}
.linkaAll a:hover::after{
    width: 0;
    opacity: 0;
}
.linkaAll a:hover{
    background: #ffffff;
    color: #3f3691;
}
/*=======================THUMBNAIL=======================*/
/*==============PRODUCT DETAIL=============*/

.productExcerpt {
    color: #666666;
    margin-bottom: 15px;
}
/*==============PRODUCT ATTR===============*/
.productAttr ul li{
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: flex;
  	align-items: center;
  	margin-bottom: 10px;
}
.productAttr ul li:last-child{
    padding-bottom: 0;
    margin-top: 20px;
	margin-bottom: 0;
	border-bottom: none;
}

.productAttr{
	margin-bottom: 10px;
}
.productAttr .ats select{
    width:135px;
    height:35px;
    border:solid 1px #eaeaea;
}
/*===========PRODUCT QUANTITY===============*/
.quantity {
	position: relative;
}
.quantity input{
	width:60px;
	height:30px;
	text-align: center;
	border:solid 1px transparent;
}
.quantity .group-button{

}
.quantity button{
	width:30px;
	height:30px;
	border:solid 1px #eaeaea;
    border-radius: 100%;
    background-color: #fff  ;
    font-size: 20px;
}
.quantity .group-button button.btn-up{
	border-bottom: solid 1px #eaeaea;
}
/*=============REVIEW============*/
.productReview {
    background: #f5f5f5;
    padding: 7px 10px;
    border: solid 1px #d6d6d6;
}
.productReview .txt {
    float: left;
    font-weight: bold;
    margin-right: 15px;
    margin-top: 3px;
}
.productReview .stars{
	float:left;
}
.productReview .stars ul li{
	float:left;
	font-size: 18px;
	line-height: 26px;
	color:#fff600;
	margin-right: 5px;
}
/*=============PRICE============*/

/*=================BUTTON===============*/
.productButton{
	margin-bottom: 20px;
}
.productButton .btnSS {
    width: 100%;
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #d51720;
    border: none;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 15px;
    position: relative;
    overflow: hidden;
    border:solid 2px #d51720;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-bottom: 15px;
}
.productButton .btnSS .faplus{
	padding-left: 30px;
    position: relative;
    background-image: url('../images/cart1.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left center;
}

.productButton .btnSS:hover{
    background-color: #d4443a;
}
.productButton button.btnSS {
    border:solid 2px #007b3c;
    color:#f44236;
    background-color: #fff;
}
.productButton button.btnSS:hover{
    color:#fff;
    background-color: #f44236;
}
.productButton button.btnSS:hover{
	color:#fff;
}
/*  */
.productContent{
}
.productContent .videoInfo{
    margin-bottom: 30px;
}

/*================TOOLS============*/
.productTools {
    padding: 9px 0px;
    margin-bottom: 10px;
}
.productTools .share{
    float:left;
}
.productTools .share ul li {
    float: left;
    margin-right: 15px;

}
.productTools .share ul li a{
    display: block;
    width: 35px;
    height: 35px;
    background: #eeeeee;
    border-radius: 100%;
    font-size: 12px;
    line-height: 35px;
    text-align: center;
    position: relative;
    color: #333333;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
.productTools .share ul li a:hover{
    border-radius: 0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
.productTools .print{
    float:right;
}
.productTools .print ul li {
    float: left;
    margin-left: 15px;
}
.productTools .print ul li a {
    font-size: 14px;
    line-height: 22px;
    padding-left: 25px;
    position: relative;
}
.productTools .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%);
}
/*==============BEGIN: TAB===================*/

/*==============END: TAB===================*/
.the-content{
	font-size: 16px;
	line-height: 24px;
}
.the-content strong{
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
}
.the-content img{
    margin: auto;
    display: block;
    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}
.the-content .txt{
    overflow: hidden;
}
/*=============OTHER========================*/
.slideOther {
    border: solid 1px #dddddd;
}
.slideOther .col{
    border-right: 1px solid #ddd;
}
.slideOther .item {
    border: solid 1px #dddddd;
    margin: -1px 0px 0px -1px;
}
.slideOther .slick-arrow {
    width: 30px;
    height: 30px;
    border: none;
    background: #fff;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color:transparent;
    z-index: 1;
    border: solid 1px #007b3c;
    border-radius: 100%;
}
.slideOther .slick-prev{
    left:-40px;
}
.slideOther .slick-next{
    right:-40px;
}
.slideOther .slick-arrow:before{
    font-family: FontAwesome;
    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%);
    font-size: 25px;
    line-height: 28px;
    color: #007b3c;
}
.slideOther .slick-prev:before{
    content: "\f104";
}
.slideOther .slick-next:before{
    content: "\f105";
}
.slideOther .slick-arrow:hover{
    background: #f44236;
}
.slideOther .slick-arrow:hover::before{
    color: #fff;
}
ul.product_option {
	
}
ul.product_option>li {
	width:100%;
	display:table;
	padding:9px 15px;
}
ul.product_option>li>span {
	display:table-cell;
    vertical-align:middle;
    padding-right: 10px;
}
ul.product_option>li>span.col1 {
	width:30%;
}
ul.product_option>li:nth-child(odd) {

}
.zoomContainer {
   overflow: hidden;
}

/*  */
.productFilter ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/*  */
.productAttr .lstChoose{
    display: flex;
    flex-wrap: wrap;
}
.productAttr .lstChoose .col{
    padding: 5px;
}
.productAttr .lstChoose .myCheckbox1{
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.productAttr .lstChoose .myCheckbox1.active{
    border: 1px solid #007b3c;
}
.productAttr .lstSize{
    display: flex;
    flex-wrap: wrap;
}
.productAttr .lstSize .col{
    padding: 0 5px;
}
.productAttr .lstSize .myCheckbox1{
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 8px;
}
.productAttr .lstSize .myCheckbox1.active{
    border: 1px solid #007b3c;
    color: #007b3c;
}
.myCheckbox1{
    cursor: pointer;
}
.myCheckbox1 input{
    display: none;
}

/*  */
.lstKey{
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.lstKey a{
    margin-left: 3px;
}
.lstKey a::after{
    content: ',';
}
.lstKey a:last-child::after{
    content: '...';
}

/*  */
.productcontact{
    display: flex;
    align-items: center;
    align-content: center;
    margin-bottom: 10px;
}
.productcontact .txt{
    font-size: 16px;
    line-height: 24px;
    margin-right: 10px;
}
.productcontact .txt span{
    position: relative;
    display: inline-block;
}
.productcontact .txt span::before{
    font-family: FontAwesome;
    margin-right: 5px;
}
.productcontact .phone{
    
}
.productcontact .phone a{
    font-size: 22px;
    line-height: 32px;
    font-weight: bold;
    color: #cd0814;
}
/*  */
.productShare ul{
    display: block;
    text-align: center;
}
.productShare ul li{
    display: inline-block;
    margin: 0 5px;
}
.formproducttv .form-group{
    position: relative;
}
.formproducttv input{
    width: 100%;
    height: 40px;
    border: 1px solid #007b3c;
    padding: 0 110px 0 10px;
}
.formproducttv button{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #007b3c;
    color: #fff;
    border: none;
    height: 40px;
    width: 100px;
    text-align: center;
    line-height: 40px;
}
.formproducttv button:hover{
    background-color: #169754;
}
.productLink{

}
.productLink ul{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
.productLink li{
    width: 50%;
    padding: 0 5px;
}
.productLink li a{
    display: block;
    width: 100%;
    height: 100%;
    color: #ffff;
    background-color: #cd0814;
    text-align: center;
    padding: 15px 5px;
}
.productLink li a:hover{
    background-color: #c22f39;  
}
.productLink li a.showpopSell{
    background-color: #f99f1b;
}
.productLink li a.showpopSell:hover{
    background-color: #ce8314;
}
.productLink li a .name{
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    height: 24px;
    overflow: hidden;
}
.productLink li a .txt{
    display: block;
    height: 22px;
    overflow: hidden;
}
/*listProduct  */
.listProduct{
    
}

.listProduct .itemProuct{
    margin-bottom: 40px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.listProduct .itemProuct:last-child{
    margin-bottom: 0;
}
.listProduct .titlePro{
    padding: 15px 25px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
}
.listProduct .gripPro{
    display: flex;
    flex-wrap: wrap;
}
.listProduct .gripPro .col1{
    width: 270px;
}
.listProduct .gripPro .bannerPro a{
    display: block;
    padding-bottom: 276px;
    position: relative;
    overflow: hidden;
} 
.listProduct .gripPro .bannerPro a::before{
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    right: 50%;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    pointer-events: none;
    z-index: 1;
}
.listProduct .gripPro .bannerPro a::after{
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    bottom: 50%;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    pointer-events: none;
    z-index: 1;
}
.listProduct .gripPro .bannerPro a:hover::before{
    left: 10px;
    right: 10px;
}
.listProduct .gripPro .bannerPro a:hover::after{
    top: 10px;
    bottom: 10px;
}
.listProduct .gripPro .bannerPro a img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.listProduct .gripPro .col2{
    width: 215px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}
.listProduct .gripPro .col2 .imgPro{
    position: absolute;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.listProduct .gripPro .col2:hover .imgPro{
    transform: translate(-50%, -5px);
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.listProduct .gripPro .col3{
    width: calc(100% - 485px);
    position: relative;
}
.listProduct .gripPro .lstGripPro .item{
    position: relative;
    height: 100%;
} 
.listProduct .gripPro .col3 .imgPro {
    position: absolute;
    max-width: 90px;
    max-height: 80%;
    bottom: 10px;
    right: 10px;
}

.listProduct .gripPro .lstGripPro, .listProduct .gripPro .lstGripPro > div, .listProduct .gripPro .lstGripPro .slick-track{
    height: 100%;
}
.listProduct .gripPro .lstGripPro .slick-slide > div{
    height: 50%;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.listProduct .gripPro .lstGripPro .slick-slide >div:first-child{
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ProduvAll{
    padding: 10px 5px;
}
.listProduct .gripPro .lstGripPro .item:hover .imgPro{
    transform: translateX(-4px);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.ProduvAll .imgPro{
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.ProduvAll:hover{

}
.ProduvAll .decs{
    position: relative;
    z-index: 1;
}
.ProduvAll .linkPro{
    font-size: 13.8px;
    font-weight: bold;
    max-height: 44px;
    overflow: hidden;
}
.ProduvAll .numberPro{
    color: #888888;
    font-size: 10.7px;
    line-height: 18px;
}
.listProduct .itemProuct:nth-child(even) .col3{
    order: 1;
}
.listProduct .itemProuct:nth-child(even) .col2{
    order: 2;
}
.listProduct .itemProuct:nth-child(even) .col1{
    order: 3;
}

.listProduct .itemProuct:nth-child(even) .gripPro .lstGripPro .item:nth-child(1), .listProduct .itemProuct:nth-child(even) .gripPro .lstGripPro .item:nth-child(3){
    border-left: none;
}
/*  */

/*  */
.boxsliderBanner{
    margin-bottom: 30px;
}
.lstItemBanner .slick-prev{
    left: 0;
}
.lstItemBanner .slick-next{
    right: 0;  
}
.lstItemBanner .slick-list{
    margin: 0 -10px;
}
.lstItemBanner .slick-slide{
    padding: 0 10px;
}
.lstItemBanner{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.lstItemBanner > div{
    width: 33.333%;
    padding: 0 10px;
}
.lstItemBanner .item a{
    display: block;
    position: relative;
    height: 185px;
}
.lstItemBanner .item a::before{
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    background-color: #000;
    opacity: 0.2;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}
.lstItemBanner .item a:hover::before{
    opacity: 0.2;
    visibility: initial;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.lstItemBanner .item a img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==========================================================================*/
/*============================RESPONSIVE====================================*/
/*==========================================================================*/
@media all and (max-width: 1200px){
    .slideOther .slick-prev{
        left: 10px;
    }
    .slideOther .slick-next{
        right:-10px;
    }
    .listProduct .gripPro .col1{
        width: 50%;
    }
    .listProduct .gripPro .bannerPro a{
        padding-bottom: 100%;
    }
    .listProduct .gripPro .col2 .imgPro{
        bottom: 10px;
        width: 70%;
    }
    .listProduct .gripPro .col2{
        width: 50%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .listProduct .gripPro .col3{
        width: 100%;
    }
    .listProduct .gripPro .col3 .imgPro{
        width: 60px;
        height: 60px;
    }
    .listProduct .gripPro .col3 .imgPro img{
        max-width: 100%;
        max-height: 100%;
    }
    .ProduvAll{
        padding-bottom: 50px;
    }
    .listProduct .itemProuct:nth-child(even) .col1{
        order: 1;
    }
    .listProduct .itemProuct:nth-child(even) .col3{
        order: 3;
    }
    .listProduct .itemProuct{
        margin-bottom: 20px;
    }
    .boxProduct{
        margin-bottom: 0px;
    }
}
@media all and (max-width: 991px){
    .boxsliderBanner{
        margin-bottom: 10px;
    }
    ul.product_option>li>span.col1 {
        width:40%;
    }
    .filterSidebar{
        position: relative;
    }
    .filterSidebar .title {
        background: #ffffff;
        border: solid 1px #333333;
        position: relative;
        cursor: pointer;
    }
    .filterSidebar .title:before{
        content: "\f0d7";
        font-family: FontAwesome;
        position: absolute;
        right: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 26px;
        color:#000000;
    }
    .filterSidebar .content{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        z-index: 2;
        display: none;
    }
    .the-content img{
        float:none;
        margin-right: 0;
        margin-bottom: 30px;
    }
    .productContent .videoInfo{
        margin-bottom: 20px;
    }
    ul.product_option>li{
        padding: 9px 0;
    }
}
@media all and (max-width: 767px){
    .lstItemBanner > div{
        width: 100%;
        margin-bottom: 10px;
    }
}
@media all and (max-width: 640px){
    .gridPP .col{
        width:33.33%;
    }
}
@media all and (max-width: 520px){
.gridPP .col{
        width:50%;
    }
}
@media all and (max-width: 460px){
    
}