.home-page{padding-bottom:50px; width:100%; float:left;}
@media (max-width:767px){
    body{background:#fff}
    .home-page{padding-bottom:0;}
}

/* Main Slider */
.wrap-slider{width:100%; float:left; position:relative; margin-top:0px;z-index:2;}
.wrap-slider .owl-item a{width:100%; float:left;  display:block; border-radius:30px; overflow:hidden;}
.wrap-slider .owl-item a img{width:100%;}
.wrap-slider .owl-controls .owl-buttons div{position:absolute; top:50%; margin-top:-20px;}
.wrap-slider .owl-controls .owl-buttons .owl-prev{left:-20px;}
.wrap-slider .owl-controls .owl-buttons .owl-next{right:-20px;}
.wrap-slider .owl-controls .owl-pagination{width:100%; position:absolute; bottom:10px; z-index:5;}

@media (max-width:767px) {
    .wrap-slider .container{min-width:100%;}
    .wrap-slider .container .col-12{padding-left:0; padding-right:0;}
    .wrap-slider .owl-item a{border-radius:0; height:500px; display:block; background-size:cover; background-position: center}
    .wrap-slider .owl-item a img{display:none;}
}
@media (min-width:768px) {
    .wrap-slider .owl-item a{background-image: initial!important;}
}


@media (min-width:768px) and (max-width:1199px){
    .wrap-slider .container{min-width:100%;}
    .wrap-slider .container .col-12{padding-left:0; padding-right:0;}
    .wrap-slider .owl-item a{border-radius:0;}
}

@media (min-width:1440px) and (max-width:1599px){
    .wrap-slider .container{min-width:1400px;}
}

@media (min-width:1600px) {

    .wrap-slider .container{min-width: 1600px;}
    .wrap-slider .owl-item a{width:100%; float:left;  display:block; border-radius:20px; overflow:hidden;}
    .wrap-slider .owl-item a img{width:100%;}
    .wrap-slider .owl-controls .owl-buttons div{position:absolute; top:50%; margin-top:-20px;}
    .wrap-slider .owl-controls .owl-buttons .owl-prev{left:-20px;}
    .wrap-slider .owl-controls .owl-buttons .owl-next{right:-20px;}
    .wrap-slider .owl-controls .owl-pagination{width:100%; position:absolute; bottom:10px; z-index:5;}
}

/* About */
.wrap-about{width:100%; float:left; position:relative; display:table; margin-top:70px; padding-bottom:90px;}
.wrap-about .col-img{position:relative; width:50%;  display:table-cell; vertical-align:top}
.wrap-about .col-img:before{content:''; padding-top:500px; display:block;}
.wrap-about .col-img .wrap-img{width:100%; float:left; height:100%; border-radius:25px; overflow:hidden; position:absolute; top:0; left:0;}
.wrap-about .col-img .wrap-img img{object-fit:cover; width:inherit; height:inherit}
.wrap-about .col-img .wrap-certification{position:absolute; right:0; bottom:0; z-index:5;}
.wrap-about .col-img .wrap-certification .inner{width:180px; height:180px;  border-radius:0px; background:#fff; box-shadow: 0 0 0 25px #fff; border-radius: 25px 0 0 0; position:relative;}
.wrap-about .col-img .wrap-certification .inner:before{content:''; padding-top:100%; display:block;}
.wrap-about .col-img .wrap-certification .inner:after{content:''; width:100%; height:100%; background:var(--color-bg); position:absolute; top:0; left:0; border-radius:25px;}
.wrap-about .col-img .wrap-certification .clip-right{position:absolute; right:0; width:25px; bottom:100%; margin-bottom:25px; fill:#fff;}
.wrap-about .col-img .wrap-certification .clip-bottom{position:absolute; right:100%; width:25px; bottom:0; margin-right:25px; fill:#fff;}
.wrap-about .col-info{position:relative; width:50%; padding-left:100px; display:table-cell; vertical-align:top;}
.wrap-about .col-info .sub-title{line-height:32px; margin-bottom:15px; background:var(--color2); border-radius:16px; font-size:16px; height:32px; padding: 0 20px 0 15px; float:left; font-family: "Signika", sans-serif; font-weight:500; position:relative; }
.wrap-about .col-info .sub-title:before{content: "\f6f7"; font-family: "Font Awesome 5"; font-weight:300; color:var(--color1); font-size:16px; margin-right:5px;}
.wrap-about .col-info .main-title{ line-height:45px; font-family: "Signika", sans-serif; font-size:38px; font-weight:600; color:var(--color1); display:block; clear:both;}
.wrap-about .col-info .info{font-size:17px; width:100%; float:left; line-height:30px; text-align:justify; margin-top:25px; opacity:.85}
.wrap-about .col-info ul{margin:20px 0 0 0; padding:0; list-style:none; width:100%; float:left;}
.wrap-about .col-info ul li{width:100%; float:left; position:relative; font-family: "Signika", sans-serif; font-size:20px; font-weight:500; margin-top:15px; padding-left:40px;}
.wrap-about .col-info ul li:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f00c"; font-size:16px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--color-bg); display:block; position:absolute; top:0; left:0; color:var(--color1)} 
.wrap-about .col-info .nav-more{}

#slider-certification{width:calc(100% - 50px); height:calc(100% - 50px); float:left; position:absolute; top:25px; left:25px; z-index:5;}
#slider-certification:before{content:'Đạt chứng nhận'; line-height:24px; position:absolute; width:100%; text-align:center; left:0; bottom:100%; z-index:6; text-transform:uppercase; font-size:12px; font-weight:bold; letter-spacing:1px; padding-left:0px;}
#slider-certification .item{padding:20px; border-radius:15px; background:#fff;}
#slider-certification svg{height:100%; height:100%; fill:var(--color3);}

@media (max-width:767px){
    .wrap-about{display:block; padding-bottom:500px; margin-top:50px;}
    .wrap-about .col-info{padding-left:0px; display:block; float:left; width:100%;}
    .wrap-about .col-info .main-title{font-size:32px; line-height:initial}
    .wrap-about .col-img{padding-left:50px; display:block; position:absolute; bottom:60px; height:400px; width:100%;}
    .wrap-about .col-img:before{display:none;}
}

@media (min-width:768px) and (max-width:991px){
    .wrap-about{display:block; padding-bottom:500px;}
    .wrap-about .col-info{padding-left:0px; display:block; float:left; width:100%;}
    .wrap-about .col-info .main-title{font-size:32px; line-height:initial}
    .wrap-about .col-img{padding-left:50px; display:block; position:absolute; bottom:60px; height:400px; width:100%;}
    .wrap-about .col-img:before{display:none;}
}

@media (min-width:992px) and (max-width:1439px){
    .wrap-about .col-info{padding-left:50px;}
}


/* Phân phối */
.wrap-distribution{width:100%; float:left; position:relative; padding-top:70px; background:#f5f7f6; padding-bottom:70px;}
.wrap-distribution .col-title{float:left; position:relative; width:400px}
.wrap-distribution .col-title .sub-title{line-height:32px; margin-bottom:15px; background:var(--color2); border-radius:16px; font-size:16px; height:32px; padding: 0 20px 0 15px; float:left; font-family: "Signika", sans-serif; font-weight:500; position:relative; }
.wrap-distribution .col-title .sub-title:before{content: "\f6f7"; font-family: "Font Awesome 5"; font-weight:300; color:var(--color1); font-size:16px; margin-right:5px;}
.wrap-distribution .col-title .main-title{ line-height:45px; font-family: "Signika", sans-serif; font-size:38px; font-weight:600; color:var(--color1); display:block; clear:both;}
.wrap-distribution .col-title span{display:block; font-size:16px; line-height:26px; width:100%; float:left; margin-top:20px}
.wrap-distribution .col-slider{width:calc(100% - 450px); float:right; position:relative;}
.wrap-distribution .col-slider a.nav-all{position:absolute; left:0; bottom:-7px; line-height:36px; height:36px; display:block; border-radius:18px; padding: 0 20px; background:var(--color1); color:#fff; font-weight:500; font-size:14px; }
#slider-distribution{width:calc(100% + 20px); position:relative; margin-left:-10px; margin-top:25px;}
#slider-distribution .owl-item{padding: 0 10px;}
#slider-distribution .owl-item .item{position:relative; width:100%; border-radius:10px;}
#slider-distribution .owl-item .item:before{content:''; padding-top:60%; display:block}
#slider-distribution .owl-item .item:after{content:''; font-family: "Font Awesome 5"; font-weight:900; font-size:16px; text-align:center; content: "\f061"; width:34px; line-height:34px; height:34px; background:var(--color2); display:block; border-radius:50%; position:absolute; right:0; bottom:0; transition:.3s; color:#000 }
#slider-distribution .owl-item .item:hover:after{background:var(--color1); color:#fff;}
#slider-distribution .owl-item .item a{width:100%; height:100%; display:block; position:absolute; top:0; left:0; background:#fff; clip-path: polygon( 9.095% 0.245%,90.829% 0.245%,90.829% 0.245%,92.305% 0.445%,93.707% 1.025%,95.017% 1.951%,96.214% 3.192%,97.279% 4.717%,98.194% 6.492%,98.939% 8.487%,99.494% 10.669%,99.842% 13.007%,99.962% 15.467%,99.962% 44.624%,99.962% 44.624%,99.905% 46.439%,99.737% 48.2%,99.464% 49.896%,99.092% 51.518%,98.627% 53.056%,98.075% 54.5%,97.441% 55.84%,96.731% 57.068%,95.951% 58.173%,95.107% 59.145%,95.108% 59.146%,95.074% 59.18%,95.074% 59.18%,93.843% 60.288%,92.537% 61.223%,91.176% 62.045%,89.785% 62.811%,88.383% 63.582%,86.995% 64.415%,85.643% 65.371%,84.347% 66.507%,83.132% 67.883%,82.018% 69.557%,82.018% 69.557%,80.976% 71.649%,80.109% 73.909%,79.382% 76.295%,78.757% 78.762%,78.198% 81.267%,77.67% 83.767%,77.135% 86.219%,76.558% 88.578%,75.902% 90.803%,75.131% 92.849%,75.123% 92.87%,75.122% 92.869%,75.122% 92.869%,74.53% 94.109%,73.872% 95.251%,73.153% 96.287%,72.379% 97.211%,71.554% 98.014%,70.681% 98.688%,69.767% 99.226%,68.815% 99.62%,67.831% 99.861%,66.818% 99.944%,66.77% 99.943%,66.77% 99.944%,9.095% 99.944%,9.095% 99.944%,7.619% 99.744%,6.216% 99.164%,4.907% 98.238%,3.71% 96.997%,2.645% 95.472%,1.73% 93.697%,0.985% 91.702%,0.43% 89.52%,0.082% 87.182%,-0.038% 84.722%,-0.038% 15.467%,-0.038% 15.467%,0.082% 13.007%,0.43% 10.669%,0.985% 8.487%,1.73% 6.492%,2.645% 4.717%,3.71% 3.192%,4.907% 1.951%,6.216% 1.025%,7.619% 0.445%,9.095% 0.245% ); padding: 15px; display:flex; align-items:center; justify-content:center;}
#slider-distribution .owl-item .item a img{object-fit:cover; max-width:100%; max-height:100%;}
#slider-distribution .owl-controls{float:right; margin:30px 10px 0 0;}

@media (max-width:767px){
    .wrap-distribution{padding: 50px 0}
    .wrap-distribution .col-title{width:100%; float:left; position:relative;}
    .wrap-distribution .col-title .main-title{font-size:32px; line-height:initial}
    .wrap-distribution .col-slider{width:100%; float:left; }
}

@media (min-width:768px) and (max-width:991px){
    .wrap-distribution .col-title{width:100%; float:left; position:relative;}
    .wrap-distribution .col-title .main-title{font-size:32px; line-height:initial}
    .wrap-distribution .col-slider{width:100%; float:left; }
}

/* Hoat động */
.wrap-working{width:100%; float:left; background:var(--colorBg); position:relative}
.wrap-working .bgTop{width: calc(175% + 1.3px); height: 200px; left: 50%;transform: translateX(-50%); position:absolute; top:0; overflow:hidden; background:#fff;}
.wrap-working .bgTop svg{width:100%; height: 330px; position:absolute; left:0; bottom:0; fill:var(--colorBg)}
.wrap-working .inner{width:100%; clear:both; min-height:500px; padding: 80px 0; position:relative; background:var(--color1) url(../Default/LP-bg-working.png) no-repeat center bottom; background-size: contain; z-index:3;}
.wrap-working .col-row{display:table-cell; width:50%}
.wrap-working .head-row{width:100%; float:left; position:relative;display:table;}
.wrap-working .head-row .col-left{position:relative; padding-right:100px; vertical-align:top;}
.wrap-working .head-row .col-left .sub-title{line-height:32px; margin-bottom:15px; background:var(--color2); border-radius:16px; font-size:16px; height:32px; padding: 0 20px 0 15px; float:left; font-family: "Signika", sans-serif; font-weight:500; position:relative; }
.wrap-working .head-row .col-left .sub-title:before{content: "\f6f7"; font-family: "Font Awesome 5"; font-weight:300; color:var(--color1); font-size:16px; margin-right:5px;}
.wrap-working .head-row .col-left .main-title{ line-height:40px; font-family: "Signika", sans-serif; font-size:32px; font-weight:600; color:#fff; display:block; clear:both;}
.wrap-working .head-row .col-right{position:relative; color:#fff; font-size:16px; vertical-align:bottom; line-height:28px; opacity:.8}
.wrap-working .body-row{width:100%; float:left; position:relative; display:block; margin-top:40px;}
#workingMainSlider{width:100%; float:left; position:relative; margin-top:10px; overflow:hidden; border-radius:20px; }
#workingMainSlider .item{width:100%; height:500px; }
#workingMainSlider .item img{object-fit:cover; display:block; width:inherit; height:inherit }

#workingMainSlider{width:calc(50% - 100px); float:left; position:relative;}
#workingThumbSlider{width:50%; float:right; position:relative;}
#workingThumbSlider .owl-wrapper,
#workingThumbSlider .owl-wrapper .owl-item{width:100%!important; float:left;}
#workingThumbSlider .owl-wrapper .owl-item .item{width:100%; float:left; position:relative; display:table; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); padding: 15px 20px; z-index:1;}
#workingThumbSlider .owl-wrapper .owl-item:last-child .item{border:none;}
#workingThumbSlider .owl-wrapper .owl-item .item .col-number{display:table-cell; width:110px; position:relative; font-weight:900; color:var(--color1); font-size:65px; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; z-index:2; transition:.3s; }
#workingThumbSlider .owl-wrapper .owl-item .item .col-title{display:table-cell; position:relative; width:180px; padding: 0 40px 0 0; vertical-align:middle; font-family: "Signika", sans-serif; font-size:25px; line-height:30px;z-index:2; }
#workingThumbSlider .owl-wrapper .owl-item .item .col-description{display:table-cell; position:relative; vertical-align:middle; font-size:16px; line-height:30px; z-index:2 }
#workingThumbSlider .owl-wrapper .owl-item .item a{width:100%; height:100%; position:absolute; top:0; left:0; display:block; z-index:3}
#workingThumbSlider .owl-wrapper .owl-item .item:before{content:''; width:100%; height:calc(100% - 20px); background:#fff; position:absolute; top:10px; left:0; border-radius:20px; opacity:0 ; transition:.3s;}
#workingThumbSlider .owl-wrapper .owl-item.synced .item{z-index:2; color:#000;}
#workingThumbSlider .owl-wrapper .owl-item.synced .item .col-number{}
#workingThumbSlider .owl-wrapper .owl-item.synced .item .col-title{font-weight:500;}
#workingThumbSlider .owl-wrapper .owl-item.synced .item .col-description{font-weight:500;}
#workingThumbSlider .owl-wrapper .owl-item.synced .item:before{opacity:1;}

@media(max-width:767px){
    .wrap-working .inner{width:100%; padding: 50px 0}
    .wrap-working .head-row .col-left{padding-right:0px; width:100%; display:block;}
    .wrap-working .head-row .col-left .main-title{font-size:32px; line-height:initial}
    .wrap-working .head-row .col-right{width:100%; display:block; padding-top:10px;}
    .wrap-working .body-row{margin-top:30px;}
    #workingMainSlider{width:100%}
    #workingMainSlider .item{height:400px}
    #workingThumbSlider{width:100%; margin-top:30px;}
    #workingThumbSlider .owl-wrapper{transform:initial!important}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-number{width:90px;}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-title{font-size:20px; width:150px;}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-description span{vertical-align:middle; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;}
}

@media (min-width:768px) and (max-width:991px){
    .wrap-working .inner{width:100%;}
    .wrap-working .head-row .col-left{padding-right:20px;}
    .wrap-working .head-row .col-left .main-title{font-size:32px; line-height:initial}
    #workingMainSlider{width:100%}
    #workingMainSlider .item{height:400px}
    #workingThumbSlider{width:100%; margin-top:30px;}
    #workingThumbSlider .owl-wrapper{transform:initial!important}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-number{}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-title{font-size:23px;}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-description span{vertical-align:middle; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;}
}

@media (min-width:992px) and (max-width:1199px){
    .wrap-working .inner{width:100%;}
    .wrap-working .head-row .col-left{padding-right:50px;}
    #workingMainSlider{width:calc(50% - 50px)}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-number{width:90px;}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-title{font-size:22px; width:150px;}
    #workingThumbSlider .owl-wrapper .owl-item .item .col-description span{vertical-align:middle; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;}
}

@media (min-width:1200px) and (max-width:1439px){
    .wrap-working .inner{width:100%;}
    .wrap-working .head-row .col-left{padding-right:50px;}
    #workingMainSlider{width:calc(50% - 50px)}
}
@media (min-width:1440px) and (max-width:1599px){
    .wrap-working .inner{width:100%;}
}
@media (min-width:1600px) {
    .wrap-working .inner{ width: 1570px; border-radius:30px; display:block; margin:0 auto;}

}
/* Products */
.wrap-productsHome{width:100%; float:left; position:relative; padding:90px 0; background:var(--colorBg) }
.wrap-productsHome:after{content:''; opacity:.85; width:100%; height:250px; position:absolute; left:0; bottom:0; background:url(../Default/bgBottom-page.png) repeat-x 0 bottom; background-size: auto 100%; display:block;} 
.wrap-productsHome .title-groubProducts{width:100%; float:left; position:relative; margin-bottom:10px;}
.wrap-productsHome .title-groubProducts .sub-title{line-height:32px; margin-bottom:5px; background:var(--color2); border-radius:16px; font-size:16px; height:32px; padding: 0 20px 0 15px; float:left; font-family: "Signika", sans-serif; font-weight:500; position:relative; }
.wrap-productsHome .title-groubProducts .sub-title:before{content: "\f6f7"; font-family: "Font Awesome 5"; font-weight:300; color:var(--color1); font-size:16px; margin-right:5px;}
.wrap-productsHome .title-groubProducts .main-title{font-family: "Signika", sans-serif; font-size:32px; font-weight:600; color:#000; display:block; clear:both; padding-top:5px;}
.wrap-productsHome .title-groubProducts a{display:none;}

@media (max-width:767px){
    .wrap-productsHome{padding: 50px 0}
    .wrap-productsHome .title-groubProducts .main-title{font-size:32px; line-height:initial; padding-right:140px; padding-top:10px;}
}

@media (min-width:768px) and (max-width:991px){
    .wrap-productsHome .title-groubProducts .main-title{font-size:32px; line-height:initial; padding-top:10px;}
}
@media (min-width:992px) and (max-width:1199px) {
}
@media (min-width:1200px) and (max-width:1439px) {
}

.product-item:before{background:#fff;}

/* Hot news */
.wrap-infoHome{ width:100%; float:left; display:block; width:100%; padding-top:50px; z-index:1; position:relative }
.wrap-infoHome .head-col{width:100%; float:left; position:relative; font-weight:600; font-size:38px; color:var(--color3); z-index:2; letter-spacing:-1px; opacity:.8}
.wrap-infoHome .body-col{width:100%; float:left; position:relative; padding:0; z-index:2;}
.wrap-infoHome ul.list-info{width:calc(100% + 30px); float:left; margin:20px 0 0 -15px ; padding:0; list-style:none; position:relative; z-index:2;} 
.wrap-infoHome ul.list-info li{float:left; position:relative; padding: 0 0px; margin:0; overflow:hidden;}
.wrap-infoHome ul.list-info li .col-img{position:relative; float:left; position:relative;  }
.wrap-infoHome ul.list-info li .col-img:before{content:''; padding-top: 73%; display:block; }
    .wrap-infoHome ul.list-info li .col-img a.nav-img {
        position: absolute;
        border-radius: 15px;
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        overflow: hidden;
        display: block;
        z-index: 1;
        --border-radius: 16px;
        --size-corner: 40px;
        --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat;
        border-radius: 16px;
        transition: all .5s ease;
        mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);
    }
.wrap-infoHome ul.list-info li .col-img a.nav-img img{width: 100%; height: 100%; object-fit: cover; transition:.3s; position:relative; border-radius: 0 0 30px 0}
.wrap-infoHome ul.list-info li .col-img a.nav-img:before{ position: absolute; width: 95px; height: 95px; z-index: 1;  top: auto; left: auto; bottom: -1px; right: -1px; background-color: #ffffff;   -webkit-mask: url(../Default/shape-bottom.png) no-repeat;   mask: url(../Default/shape-bottom.png) no-repeat;   mask-size: 100% auto; }
.wrap-infoHome ul.list-info li:hover .col-img a.nav-img img{transform:scale(1.1)}
.wrap-infoHome ul.list-info li .col-img a.nav-link{font-size:0; width:46px; height:46px; background:var(--color2); border-radius:50%; position:absolute; right:15px; bottom:15px; transition:.3s; padding:0; z-index:2;}
.wrap-infoHome ul.list-info li .col-img a.nav-link:before{font-family: "Font Awesome 5"; font-weight:400; content: "\f178"; font-size:24px; display:block; color:var(--color3); transition:.3s; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; width:46px; height:46px; line-height:46px; text-align:center;  }
.wrap-infoHome ul.list-info li:hover .col-img a.nav-link{background:var(--color1)}
.wrap-infoHome ul.list-info li:hover .col-img a.nav-link:before{transform: scale(0) translate(60px, 0); opacity:0;}
.wrap-infoHome ul.list-info li .col-img a.nav-link span:before{font-family: "Font Awesome 5"; transform: scale(0) translate(-70px, 0); font-weight:400; content: "\f178"; font-size:24px; display:block; color:var(--color3); transition:.3s; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; position:absolute; top:0; left:0; width:46px; height:46px; line-height:46px; text-align:center; color:#fff;}
.wrap-infoHome ul.list-info li:hover .col-img a.nav-link span:before{transform: scale(1) translate(0px, 0); opacity:1;}
.wrap-infoHome ul.list-info li .col-info{width:100%; float:left; padding:80px 15px 15px 15px ; position:relative;}
.wrap-infoHome ul.list-info li .col-info .date-post{position:absolute; top:-5px; left:15px; display:flex; color:var(--color1)}
.wrap-infoHome ul.list-info li .col-info .date-post .e-date{font-size:55px; font-weight:900;}
.wrap-infoHome ul.list-info li .col-info .date-post .e-month{padding: 20px 0 0 5px;}
.wrap-infoHome ul.list-info li .col-info .date-post .e-month span{font-size:14px; font-weight:500; clear:both; display:block; line-height:20px; text-transform:uppercase}
.wrap-infoHome ul.list-info li .col-info .date-post .e-month span:last-child{font-size:22px; font-weight:900; letter-spacing:1px;}
.wrap-infoHome ul.list-info li .col-info h3{display:block;}
.wrap-infoHome ul.list-info li .col-info h3 a{text-decoration:none; font-family: "Signika", sans-serif; font-size:22px; line-height:26px; font-weight:500; color:#000; -webkit-line-clamp: 3; -webkit-box-orient: vertical;white-space: normal;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; transition:.3s;}
.wrap-infoHome ul.list-info li .col-info h3 a:hover{color:var(--color1)}
.wrap-infoHome ul.list-info li .col-info .briefly{width:100%; color:#000; margin-top:5px; opacity:.7; float:left; font-size:16px; font-weight:400; -webkit-line-clamp: 3; -webkit-box-orient: vertical;white-space: normal;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; }
.wrap-infoHome ul.list-info li .col-info .wrap-attr{float:left; position:absolute; margin: 0px 0 0px 0; top:35px; right:15px; color:#000}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:14px; font-weight:400;}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele b{padding: 0 3px; font-size:15px; font-weight:600; opacity:.75}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele span{opacity:.75}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele:first-child:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color2); position:absolute; right:-18px; top:8px;}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele:last-of-type{margin-right:0;}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele:first-child{display:none;}

@media(max-width:767px) {

    .wrap-infoHome{padding: 50px 0 0 0}
    .wrap-infoHome .head-col{font-size:32px; line-height:initial}
    .wrap-infoHome ul.list-info{width:100%; float:left; margin:0; }
    .wrap-infoHome ul.list-info li{width:100%; margin-top:20px;}
    .wrap-infoHome ul.list-info li .col-img{width:180px; margin: 0 15px 10px 0}
    .wrap-infoHome ul.list-info li .col-img a.nav-link{display:none;}
    .wrap-infoHome ul.list-info li .col-img a.nav-img{clip-path:initial; border-radius:12px; width:100%; height:100%; top:0; left:0; }
    .wrap-infoHome ul.list-info li .col-img a.nav-img img{border-radius:0;}
    .wrap-infoHome ul.list-info li .col-info{width:initial; float:initial; padding:0;}
    .wrap-infoHome ul.list-info li .col-info .wrap-attr{position:relative; float:initial; top:initial; right:initial; display:none;}
    .wrap-infoHome ul.list-info li .col-info .wrap-attr .ele:first-child{display:block;}
    .wrap-infoHome ul.list-info li .col-info .briefly{width:initial; float:initial; display:initial; padding-top:10px;}
}

@media (min-width:768px) and (max-width:991px) {
    .wrap-infoHome .head-col{font-size:32px; line-height:initial}
    .wrap-infoHome ul.list-info li{width:100%;}
    .wrap-infoHome ul.list-info li .col-img{width:300px;}
    .wrap-infoHome ul.list-info li .col-info{width:calc(100% - 300px)}
}

@media (min-width:992px) and (max-width:1199px) {
    .wrap-infoHome ul.list-info li{width:33.33333333%;}
    .wrap-infoHome ul.list-info li:nth-child(n+4){display:none;}
    .wrap-infoHome ul.list-info li .col-img,
    .wrap-infoHome ul.list-info li .col-info{width:100%; }
    
}

@media (min-width:1200px)  {
    .wrap-infoHome ul.list-info li{width:50%;}
    .wrap-infoHome ul.list-info li:nth-child(n+5){display:none;}
    .wrap-infoHome ul.list-info li .col-img,
    .wrap-infoHome ul.list-info li .col-info{width:50%; }
    .wrap-infoHome ul.list-info li:nth-child(1) .col-img,
    .wrap-infoHome ul.list-info li:nth-child(2) .col-img{float:right;}
    
}

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

/* Thông tin cty hiện ở thiết bị mobile */

@media (min-width:768px){
    .wrap-aboutShop{display:none;}
}

@media (max-width:767px){
    body{padding-bottom:60px!important}
    .wrap-aboutShop{width:100%; float:left; background:var(--color1); position:relative; margin-top:20px; padding:10px; }
    .wrap-aboutShop .inner{padding:20px 20px 10px 20px; width:100%; float:left; background:#fff; border-radius:10px;}
    .wrap-aboutShop .logo-foot{width:130px; display:block; margin: 0 auto}
    .wrap-aboutShop ul{width:100%; float:left; list-style:none; margin:0; padding:0;}
    .wrap-aboutShop ul li{width:100%; float:left; position:relative; border-top:1px dashed rgba(0,0,0,.15); padding-top:10px; padding-bottom:10px;}
    .wrap-aboutShop ul li:first-child{border-top:none; padding-top:20px;}
    .wrap-aboutShop ul li strong:after{content:':'; padding-right:10px;}
}





/* Banner Ads */
ul.list-ads{margin: 0 -10px; padding: 20px 0 0 0; list-style:none;}
ul.list-ads li{padding:0 10px; position:relative; margin-top:20px;}
ul.list-ads li a{width:100%; float:left; position:relative;}
ul.list-ads li img{width:100%; border-radius:10px;}

@media (max-width:767px) {
    ul.list-ads{display:none;}
}

/* Title */
.title-groubSub{width:100%; float:left; position:relative; margin-top:40px; margin-bottom:10px;}
.title-groubSub label{display:block; font-weight:bold; margin:0; color:#000; font-size:22px; float:left; margin-right:0px; line-height:36px;}
.title-groubSub span{font-size:15px; color:#000; line-height:40px; font-size:14px; font-weight:500; padding-left:10px; opacity:.75}
.title-groubSub .navMore{padding: 0 0 0 15px;  width:90px; text-align:left; font-size:14px; font-weight:500;float:right; background:#edf4fc; line-height:31px; height:30px; border-radius:15px;  color:#000}
.title-groubSub .navMore:hover{color:var(--color2)}
.title-groubSub .navMore:after{width:20px; height:20px; border-radius:50%; content:"\f0da";background:var(--color2); font-size:11px; padding-left:2px; color:#fff; text-align:center; line-height:20px; position:absolute; top:5px; right:5px; font-weight:bold; font-family: "Font Awesome 5"; font-weight: 900;}
.title-groubSub ul{margin:5px 0 0 0; padding:1px; list-style:none; text-align:right;  }
.title-groubSub ul li{position:relative; margin-right:8px; margin-bottom:10px; display:inline-block}
.title-groubSub ul li a{transition:.3s; padding: 0 15px; transition:.3s; font-size:15px; font-weight:normal; background:#edf4fc; line-height:30px; height:30px; border-radius:15px; display:block;color:#000; }
.title-groubSub ul li:not(.nav-more) a:hover{background:var(--color2); color:#fff;}
.title-groubSub ul.is-contract{height:32px; overflow:hidden; padding-right:82px; margin-bottom:10px;}
.title-groubSub ul.is-contract li.nav-more{margin:0; position:absolute; right:1px; top:6px;}
.title-groubSub ul.is-contract li.nav-more a{ padding: 0 0 0 12px;  width:82px; text-align:left; font-size:14px; font-weight:500; line-height:31px;}
.title-groubSub ul.is-contract li.nav-more a:after{width:20px; height:20px; border-radius:50%; content:'+';background:var(--color2); color:#fff; text-align:center; line-height:21px; position:absolute; top:5px; right:5px; font-weight:bold;}

@media (max-width:767px) {
    .title-groubSub{margin:0; height:55px; overflow:hidden; box-shadow:0 1px var(--color-border)}
    .title-groubSub label{line-height:55px; color:#000; padding-left:10px; font-size:17px; text-transform:initial; font-weight:bold; text-transform:uppercase}
    .title-groubSub span{display:none;}
    .title-groubSub .navMore{position:absolute; top:13px; right:10px;}
    .title-groubSub ul{padding:0!important; margin:0; padding:0; position:absolute; top:13px; right:10px;}
    .title-groubSub ul li:not(:first-child){display:none!important;}
    .title-groubSub ul li:first-child{margin:0;}
    .title-groubSub ul li:first-child a{width:90px; font-weight:500!important; background:#edf4fc!important; text-align:left; font-size:14px;line-height:31px; height:30px; }
    .title-groubSub ul li:first-child a:after{width:20px; height:20px; border-radius:50%; content:"\f0da";background:var(--color2); font-size:11px; padding-left:2px; color:#fff; text-align:center; line-height:20px; position:absolute; top:5px; right:5px; font-weight:bold; font-family: "Font Awesome 5"; font-weight: 900;}
    .title-groubSub ul li:first-child a:hover{color:var(--color2)}
}



.row-group{width:100%; float:left; position:relative; }
.row-group:hover{z-index:2;}
.row-group ul.list-product{margin:0; padding:0; list-style:none; clear:both;  border-radius:10px; width:100%; float:left; overflow:hidden; box-shadow:0 0 0 1px var(--color-border)}
.row-group ul.list-product:hover{overflow:initial;}
.row-group ul.list-product li{padding:0; margin:0; z-index:1; box-shadow: 1px 1px var(--color-border); border-radius:0; float:left; }
.row-group ul.list-product li:hover{z-index:2; position:relative;}
.row-group ul.list-product li:nth-child(n+13){display:none;}

@media (max-width:767px) {

   .row-group{width:calc(100% + 30px); margin-left:-15px; border-top:10px solid var(--color-border) } 
   .row-group ul.list-product{border:none; width:100%; box-shadow:none; border-radius:0;}
   .row-group ul.list-product li{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 0 0 50%;}
   .row-group ul.list-product li:nth-child(n+13){display:none;}
}

@media (min-width:768px) and (max-width:991px) {
    .row-group ul.list-product li{-ms-flex: 0 0 33.33333333333%; flex: 0 0 33.33333333333%; max-width: 0 0 33.33333333333%;}
    .row-group ul.list-product li:nth-child(3){ box-shadow: 0 1px var(--color-border);}
    .row-group ul.list-product li:nth-child(10){ box-shadow: 1px 0 var(--color-border);}
    .row-group ul.list-product li:nth-child(12){ box-shadow: none}
    .row-group ul.list-product li:nth-child(n+13){display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
    .row-group ul.list-product li{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
    .row-group ul.list-product li:nth-child(4){ box-shadow: 0 1px var(--color-border);}
    .row-group ul.list-product li:nth-child(9){ box-shadow: 1px 0 var(--color-border);}
    .row-group ul.list-product li:nth-child(12){ box-shadow: none}
    .row-group ul.list-product li:nth-child(n+13){display:none;}
}

@media (min-width:1200px) and (max-width:1439px){
    .row-group ul.list-product li{-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}
    .row-group ul.list-product li:nth-child(5){ box-shadow: 0 1px var(--color-border);}
    .row-group ul.list-product li:nth-child(6){ box-shadow: 1px 0 var(--color-border);}
    .row-group ul.list-product li:nth-child(10){ box-shadow: none}
    .row-group ul.list-product li:nth-child(n+11){display:none;}
}

@media (min-width:1440px){
    .row-group ul.list-product li{-ms-flex: 0 0 16.666666666666%; flex: 0 0 16.666666666666%; max-width: 16.666666666666%;}
    .row-group ul.list-product li:nth-child(6){ box-shadow: 0 1px var(--color-border);}
    .row-group ul.list-product li:nth-child(7){ box-shadow: 1px 0 var(--color-border);}
    .row-group ul.list-product li:nth-child(12){ box-shadow: none}
    .row-group ul.list-product li:nth-child(n+13){display:none;}
}

/* Sale Home */
.wrap-saleHome{width:100%; float:left; position:relative;box-shadow:0 0 0 1px var(--color-border); border-radius:10px; margin-top:40px;}
.wrap-saleHome ul.list-product{box-shadow:none!important}
.wrap-saleHome .product:before{box-shadow: 0 0 0 2px var(--color3), 0 3px 15px rgba(0, 0, 0, .2);}

ul.nav-tabSaleHome{margin:0; padding:0 0 0 5px; list-style:none; width:100%; display:flex; justify-content:space-between; flex-wrap:inherit}
ul.nav-tabSaleHome li{display:flex; width:100%;}
ul.nav-tabSaleHome li a{width:calc(100% - 5px); float:left; position:relative; margin:5px 5px 0 0; padding:0; height:60px; background:var(--color-bg); border-radius: 7px; padding: 12px 15px 0 57px; color:#000; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05)}
ul.nav-tabSaleHome li a h3{text-transform:uppercase; color:#000; font-size:16px; font-weight:900; margin:0; color:var(--color3)}
ul.nav-tabSaleHome li a span,
ul.nav-tabSaleHome li a .time-limit{font-size:14px; padding-top:0px; display:block;}
ul.nav-tabSaleHome li a .time-limit:before{content:'Thời gian:'; padding-right:5px;}
ul.nav-tabSaleHome li a i{position:absolute; left:15px; top:15px; font-size:32px; width:32px; text-align:center; opacity:.5; transition:.3s;}
ul.nav-tabSaleHome li a.active{background:var(--color3); color:#fff;} 
ul.nav-tabSaleHome li a.active h3{color:#fff;}
ul.nav-tabSaleHome li a.active i{opacity:1;}
ul.nav-tabSaleHome li a.is-waiting:after{content:'Sắp diễn ra'; position:absolute; top:0; right:0; background:#ffc107; line-height:25px; height:24px; border-radius: 0 0 0 7px; padding: 0 15px; font-size:13px; font-weight:500; color:#000} 

.contentTab-saleHome{width:100%; float:left; position:relative}
.contentTab-saleHome .tab-pane{width:100%; float:left; position:relative;}
.contentTab-saleHome .tab-pane .tab-head{width:calc(100% - 10px); margin-left:5px; float:left; position:relative; padding: 15px 15px; box-shadow: 0 1px var(--color-border);}
.contentTab-saleHome .tab-pane .tab-head .col-more{float:right; position:relative; padding-top:2px;}
.contentTab-saleHome .tab-pane .tab-head .col-more .total{float:left; font-weight:900; font-size:15px; line-height:32px; padding-right:15px;}
.contentTab-saleHome .tab-pane .tab-head .col-more .total:after{content:'sản phẩm'; padding-left:5px; font-weight:normal}
.contentTab-saleHome .tab-pane .tab-head .col-more a{line-height:32px; height:32px; background:var(--color2); display:inline-block; border-radius:16px; padding: 0 20px; color:#fff;}
.contentTab-saleHome .tab-pane .tab-foot{width:100%; box-shadow: 0 -1px var(--color-border); text-align:center; float:left;}
.contentTab-saleHome .tab-pane .tab-foot a{text-decoration:none; line-height:45px; color:#000; display:block;}

.wrap-countdown{position:relative; float:left;}
.wrap-countdown label{text-transform:uppercase; color:#000; font-size:14px; font-weight:900; float:left; line-height:36px; padding-right:10px; margin:0;}
.wrap-countdown ul.countdown {list-style: none;margin:  0;padding: 0;display: block;text-align: center; float:left; }
.wrap-countdown ul.countdown li {display:block; float:left; position:relative; background:var(--color-bg); padding: 0px 0 0 0; height:35px; line-height:23px; margin-right:15px; box-shadow: 0 0 0 1px var(--color-border); border-radius:5px; width:36px; font-weight:900; color:var(--color3); font-size:16px;}
.wrap-countdown ul.countdown li:after{content:':'; line-height:35px; position:absolute; top:0; right:-10px; display:block; color:#000; font-size:15px;}
.wrap-countdown ul.countdown li:before{content:''; width:100%; text-transform:uppercase; color:#000; font-size:10px; text-align:center; position:absolute; left:0; bottom:2px; font-weight:500; line-height:initial;}
.wrap-countdown ul.countdown li.days:before{content:'Ngày'}
.wrap-countdown ul.countdown li.hours:before{content:'Giờ'}
.wrap-countdown ul.countdown li.minutes:before{content:'Phút'}
.wrap-countdown ul.countdown li.seconds{margin-right:0;}
.wrap-countdown ul.countdown li.seconds:before{content:'Giây'}
.wrap-countdown ul.countdown li.seconds:after{display:none;}

/* Sale Hot */
.sale-Hotproduct{width:100%; float:left; position:relative; box-shadow:inset 0 0 0 2px var(--color3); border-radius:10px;  margin-top:40px; display:table; padding:25px;}
.sale-Hotproduct:after{content:''; width:100%; height:40px;background-image: linear-gradient(#ffffff, var(--color3)); position:absolute; left:0; bottom:0;opacity:.07; border-radius: 0 0 10px 10px;}
.sale-Hotproduct .col-product{display:table-cell; position:relative; padding-right:25px; z-index:2; }
.sale-Hotproduct .col-product .title{width:100%; float:left; position:relative; background:url(../Default/hottime.png) no-repeat 0 0; background-size: auto 50px; padding-left:85px; margin-bottom:30px;}
.sale-Hotproduct .col-product .title h3{font-weight:bold; color:var(--color3); font-size:24px; margin:0;}
.sale-Hotproduct .col-product .title p{margin:0; font-weight:500; font-size:15px;}
.sale-Hotproduct .col-product .wrap-countdown{position:absolute; top:0; right:0;}
.sale-Hotproduct .col-product .wrap-countdown ul.countdown li{background:var(--color3); color:#fff; box-shadow:none;}
.sale-Hotproduct .col-product .wrap-countdown ul.countdown li:before{color:#fff; opacity:.85}
.sale-Hotproduct .col-product .wrap-img{width:200px; float:left; position:relative; margin: 0 15px 0 0; }
.sale-Hotproduct .col-product .wrap-img:before{content:'';padding-top:100%; display:block;}
.sale-Hotproduct .col-product .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;}
.sale-Hotproduct .col-product .wrap-img a img{max-width:100%; max-height:100%; object-fit:cover; transition:.3s; border-radius:7px;}
.sale-Hotproduct .col-product .wrap-img:hover a img{transform:scale(1.1)}
.sale-Hotproduct .col-product .wrap-img .save{line-height:24px; height:24px; background:var(--color3); border-radius: 12px 3px 3px 12px;padding: 0 15px 0 10px; color:#fff; position:absolute; top:0; right:0; z-index:3; font-size:13px; font-weight:bold;}
.sale-Hotproduct .col-product .wrap-img .save:before{content:'Giảm:'; padding-right:3px; font-weight:normal}
.sale-Hotproduct .col-product .wrap-img .save:after{content: '₫'; position: absolute; top: 0px; right: 7px; font-size: 11px;}
.sale-Hotproduct .col-product .wrap-info{width:calc(100% - 220px); float:right; position:relative;}
.sale-Hotproduct .col-product .wrap-info .wrap-price{width:100%; float:left; position:relative;}
.sale-Hotproduct .col-product .wrap-info .wrap-price b{color:var(--color3); font-weight:900; font-size:24px; position:relative; padding-right:13px;}
.sale-Hotproduct .col-product .wrap-info .wrap-price b:after{content: '₫'; position: absolute; top: 0px; right: 0px; font-size: 18px; font-weight:bold;}
.sale-Hotproduct .col-product .wrap-info .wrap-price span{margin-left:20px; color:#7d7d7d; font-size:18px; font-weight:bold; position:relative; padding-right:10px;}
.sale-Hotproduct .col-product .wrap-info .wrap-price span:before{content:''; width:100%; height:1px; background:#7d7d7d; position:absolute; top:50%; left:0; display:block; margin-top:-1px; }
.sale-Hotproduct .col-product .wrap-info .wrap-price span:after{content: '₫'; position: absolute; top: 0px; right: 0px; font-size: 14px; font-weight:bold;}
.sale-Hotproduct .col-product .wrap-info p{margin:0 0 10px 0; font-size:16px; width:100%; float:left; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;  text-overflow: ellipsis;   display: -webkit-box;}
.sale-Hotproduct .col-product .wrap-info h3.name{font-size:20px; font-weight:bold;}
.sale-Hotproduct .col-product .wrap-info h3.name a{color:#000; transition:.3s;}
.sale-Hotproduct .col-product .wrap-info h3.name:hover a{color:var(--color2)}
.sale-Hotproduct .col-product .wrap-info .wrap-progress{width:100%; float:left; position:relative; margin-top:14px;}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .progress{height:10px; margin-top:2px;}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .progress .progress-bar{background-image: linear-gradient(to right, var(--color3) , #ffc107); border-radius:5px;}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .total{width:100%; float:left; position:relative; color:rgba(0,0,0,.85); margin-top:5px;}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .total b{color:#000; font-weight:900; font-size:20px; padding-left:5px;}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .total b:after{content:'/'; font-weight:normal; color:rgba(0,0,0,.7); font-size:15px;padding: 0 2px}
.sale-Hotproduct .col-product .wrap-info .wrap-progress .total i{font-style:normal; font-weight:500; color:rgba(0,0,0,.7)}
.sale-Hotproduct .col-buyer{display:table-cell; position:relative; width:33.33333333%; vertical-align:top; padding-left:25px; border-left:1px solid var(--color-border); z-index:2}
.sale-Hotproduct .col-buyer .inner{position:absolute; top:0; left:25px; width:calc(100% - 2px); height:100%; padding-top:40px;}
.sale-Hotproduct .col-buyer .inner .title{position:absolute; top:0; left:0; font-size:16px;font-weight:500;}
.sale-Hotproduct .col-buyer .inner .title b{background:var(--color2); color:#fff; line-height:23px; height:22px; padding: 0 5px; border-radius:3px; display:inline-block; margin-right:5px;}
.sale-Hotproduct .col-buyer .inner ol{margin:0 0 0 -20px; width:calc(100% + 20px); height:100%; overflow-y:auto; font-size:15px; padding-right:25px;}
.sale-Hotproduct .col-buyer .inner ol li{width:100%; position:relative; padding-right:40px; padding-top:8px; padding-bottom:8px; border-top:1px dashed var(--color-border) }
.sale-Hotproduct .col-buyer .inner ol li span{}
.sale-Hotproduct .col-buyer .inner ol li b{position:absolute; top:9px; right:0; font-size:14px;}



/* New Products */
@media (min-width:1200px){
    ul.new-product{display:block; border:none!important;}
    ul.new-product li{border-bottom:none; box-shadow:none!important; border-top:1px solid var(--color-border)}
    ul.new-product li .product:before{display:none!important;}
    ul.new-product li:nth-child(n+8){display:none;}
    ul.new-product li:nth-child(2n){float:left; flex:initial; max-width: 34%!important; }
    ul.new-product li:nth-child(2n + 1){float:right;  max-width:34%!important; flex:initial; margin-left:20%;}
    ul.new-product li:not(:first-child) .product{padding-bottom:0;}
    ul.new-product li:not(:first-child) .product .wrap-img{width:160px; float:left;}
    ul.new-product li:not(:first-child) .product .name{width:calc(100% - 200px); float:left; padding: 0 20px 0 0; margin-top:15px;}
    ul.new-product li:not(:first-child) .product .name h3{-webkit-line-clamp:3;}
    ul.new-product li:not(:first-child) .product .price{width:calc(100% - 200px); float:left; padding: 0 20px 0 0; margin-top:10px;}
    ul.new-product li:not(:first-child) .product .wrap-btn{opacity:1; visibility:initial; pointer-events:initial; position:relative; top:initial!important; margin:15px 0 0 0!important; left:initial; width:calc(100% - 200px); float:left; padding-right:20px;}
    ul.new-product li:not(:first-child) .product .wrap-btn a{margin:0; width:100%; background:#edf4fc; color:var(--color2);}
    ul.new-product li:not(:first-child) .product .wrap-btn a:hover{background:var(--color2); color:#fff;}
    ul.new-product li:first-child{display:block; position:absolute!important; width:32%; height:100%; left: 34%; top:0; box-shadow: inset 0 0 0 0px var(--color1)!important; border:none; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border);margin:0;}
    ul.new-product li:first-child .product{padding-bottom:70px; border:none;}
    ul.new-product li:first-child .product .wrap-img{max-width:calc(340px - 40px)!important; margin: 20px auto!important; display:block; float:initial!important}
    ul.new-product li:first-child .product .name h3{font-size:17px;}
    ul.new-product li:first-child .product .abbreviation{display:block; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; padding: 8px 20px 0 20px;}
    ul.new-product li:first-child .product .wrap-btn{opacity:1; visibility:initial; pointer-events:initial; top:initial; margin:0; bottom:20px;}
    ul.new-product li:first-child .product .wrap-btn .nav-addtocart{height:45px; line-height:46px; font-size:16px; padding: 0 20px;}
    ul.new-product li:first-child .product .wrap-btn .nav-addtocart:after{font-size:16px;}
    ul.new-product li:first-child .product .wrap-btn .nav-addtocart:hover{box-shadow: inset 0 45px rgba(0,0,0,.1)}

    ul.new-product li:nth-child(2),
    ul.new-product li:nth-child(3){border-top:none;}
}

@media (min-width:992px) and (max-width: 1199px){
    ul.new-product{border:none!important;}
    ul.new-product li{box-shadow:none!important; border-right:none; border-right:1px solid var(--color-border)}
    ul.new-product li:nth-child(n+11){display:none;}
    ul.new-product li:nth-child(5),
    ul.new-product li:nth-child(6){max-width: 50%; flex: 50%; margin:0; border:1px solid var(--color-border); border-left:none;}
    ul.new-product li:nth-child(5) .product,
    ul.new-product li:nth-child(6) .product{}
    ul.new-product li:nth-child(5) .product .wrap-img,
    ul.new-product li:nth-child(6) .product .wrap-img{width:160px; float:left;}
    ul.new-product li:nth-child(5) .product .name,
    ul.new-product li:nth-child(6) .product .name{width:calc(100% - 200px); float:left; padding: 0 20px 0 0; margin-top:15px;}
    ul.new-product li:nth-child(5) .product .name h3,
    ul.new-product li:nth-child(6) .product .name h3{-webkit-line-clamp:3;}
    ul.new-product li:nth-child(5) .product .price,
    ul.new-product li:nth-child(6) .product .price{width:calc(100% - 200px); float:left; padding: 0 20px 0 0; margin-top:10px;}
    ul.new-product li:nth-child(5) .product .wrap-btn,
    ul.new-product li:nth-child(6) .product .wrap-btn{opacity:1; visibility:initial; pointer-events:initial; position:relative; top:initial!important; margin:15px 0 0 0!important; left:initial; width:calc(100% - 200px); float:right; padding-right:20px;}
    ul.new-product li:nth-child(5) .product .wrap-btn a,
    ul.new-product li:nth-child(6) .product .wrap-btn a{margin:0; width:100%;}
    ul.new-product li:nth-child(5) .product:before,
    ul.new-product li:nth-child(6) .product:before{display:none;}
    ul.new-product li:nth-child(5) .product .abbreviation,
    ul.new-product li:nth-child(6) .product .abbreviation{width:calc(100% - 200px); display:block; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; padding: 8px 20px 0 0px;}
    ul.new-product li:nth-child(4),
    ul.new-product li:nth-child(6),
    ul.new-product li:nth-child(10){border-right:none;}
}

/* Thương hiệu */
ul.list-brandHome{margin:0; padding:0; list-style:none; width:100%; float:left; position:relative; border-radius:10px; box-shadow:inset 0 0 0 1px var(--color-border); overflow:hidden;}
ul.list-brandHome li{float:left; position:relative; box-shadow: 1px 1px var(--color-border) ; padding-bottom:52px;}
ul.list-brandHome li .wrap-logo{width:calc(100% - 40px); margin: 20px; float:left; position:relative;}
ul.list-brandHome li .wrap-logo:before{content:''; padding-top:50%; display:block;}
ul.list-brandHome li .wrap-logo a{position:absolute; top:0px; left:0px; width:100%; height:100%; display:flex; align-items:center; justify-content:center }
ul.list-brandHome li .wrap-logo a img{object-fit:cover; max-width:100%; max-height:100%;}
ul.list-brandHome li .wrap-nav{width:calc(100% - 40px); position:absolute; left:20px; bottom:0px;}
ul.list-brandHome li .wrap-nav a{ color:#000; width:100%; text-decoration:none; float:left; font-size:14px; white-space:nowrap; line-height:50px; padding: 0 0px; position:relative; transition:.3s;}
ul.list-brandHome li .wrap-nav a:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f0da"; font-size:11px; width:16px; height:16px; margin-top:-8px; line-height:16px; text-align:center; border-radius:50%; box-shadow: 0 0 0 1px var(--color-border); display:block; position:absolute; top:50%; right:0; padding-left:1px;}
ul.list-brandHome li .wrap-nav a b{padding-right:5px; color:var(--color3)}
ul.list-brandHome li .wrap-nav a:hover{color:var(--color2)} 
ul.list-brandHome li .wrap-nav a:last-child{border-top:1px solid var(--color-border)}

@media (max-width:767px){
    ul.list-brandHome{border:none; border-radius:0;}
    ul.list-brandHome li{width:50%;}
    ul.list-brandHome li:nth-child(13+n){display:none!important}
    ul.list-brandHome li .wrap-logo:before{padding-top:50%}
}

@media (min-width:768px) and (max-width:991px){
    ul.list-brandHome li{width:25%;}
    ul.list-brandHome li:nth-child(13+n){display:none!important}
    ul.list-brandHome li .wrap-logo:before{padding-top:66.666666666%}
}

@media (min-width:992px) and (max-width:1199px){
    ul.list-brandHome li{width:16.66666666%;}
    ul.list-brandHome li:nth-child(13+n){display:none!important}
    ul.list-brandHome li .wrap-logo:before{padding-top:80%}
}

@media (min-width:1200px) and (max-width:1439px){
    ul.list-brandHome li{width:16.66666666%;}
    ul.list-brandHome li:nth-child(13+n){display:none!important}
    ul.list-brandHome li .wrap-logo:before{padding-top:66.666666666%}
}

@media (min-width:1440px){
    ul.list-brandHome li{width:16.66666666%;}
    ul.list-brandHome li:nth-child(13+n){display:none!important}
}


/* Khuyến cáo */
.recommendation-home{ width:100%; padding:20px;float:left; position:relative; border-top:10px solid var(--color-border)}
.recommendation-home .inner{background:#ffd24c; border-radius:7px; padding: 15px; width:100%; float:left;}

@media (max-width:767px){
    .recommendation-home{display:block;}
}

@media (min-width:768px){
    .recommendation-home{display:none;}
}

/* Thực đơn */ 

.wrap-foodHome{width:100%; float:left; position:relative; margin-top:45px;}
.wrap-foodHome .headFood{width:100%; float:left; position:relative; margin-bottom:10px;}
.wrap-foodHome .headFood label{margin:0; font-size:22px; font-weight:bold; display:block; color:#000; float:left;}
.wrap-foodHome .headFood .group-nav{float:right; margin-top:-5px; margin-bottom:-10px; display:block;}
.wrap-foodHome .headFood .group-nav a{line-height:34px; height:34px; background:#fff; display:block; float:left; border-radius:16px; padding: 0 15px 0 35px; margin: 0 5px; color:#000; font-weight:normal; position:relative;}
.wrap-foodHome .headFood .group-nav a.nav-male:before{background:#0ea6fa; font-family: "Font Awesome 5"; font-weight: 900; content: "\f222"; font-size: 16px; position: absolute; left: 4px; top:4px; width:26px; height:26px; line-height:26px; border-radius:50%;  text-align:center; color:#fff;}
.wrap-foodHome .headFood .group-nav a.nav-female:before{background:#eb2c6b; font-family: "Font Awesome 5"; font-weight: 900; content: "\f221"; font-size: 16px; position: absolute; left: 4px; top:4px; width:26px; height:26px; line-height:26px; border-radius:50%;  text-align:center; color:#fff;}
.wrap-foodHome .bodyFood{width:100%; float:left; position:relative; border-radius:10px; border:1px solid var(--color-border); overflow:hidden;}

ul.list-food{margin:0 0 ; padding:0; list-style:none; width:100%; float:left;}
ul.list-food li{margin: 0; padding:20px 20px 65px 20px; position:relative; background:#fff; float:left; border-top:1px solid var(--color-border)}
ul.list-food li .wrap-img{width:190px; margin: 0 0; position:relative; float:left; }
ul.list-food li .wrap-img:before{content:''; padding-top:66.66666666666%; display:block; }
ul.list-food li .wrap-img a{display:block; width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; border-radius:5px;}
ul.list-food li .wrap-img a:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f04b"; color:#f10a0a; width: 40px; height:40px; line-height:42px; padding-left:2px; margin:-20px 0 0 -20px; border-radius:50%; position:absolute; background:#fff; top:50%; left:50%; display:block; text-align:center;z-index:5; box-shadow: 0 0 0 3px rgba(0,0,0,.07),0 0 30px rgba(0,0,0,.7); transition:.3s; }
ul.list-food li:hover .wrap-img a:after{transform:scale(1.2); opacity:.7}
ul.list-food li .wrap-img a img{width:100%; height:100%; object-fit:cover}
ul.list-food li .wrap-info{width:calc(100% - 190px); float:right; padding-left:15px;}
ul.list-food li .wrap-info a.name{ margin-top: 0px; padding: 0 0px;  z-index: 3; position: relative;color: #000; width:100%; float:left;}
ul.list-food li .wrap-info a.name h3{font-size: 16px;font-weight: 500; transition: .3s;line-height: 24px; margin: 0;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;}
ul.list-food li .wrap-info a.name:hover{color:var(--color2)}
ul.list-food li .abbreviation{font-size: 15px; width:100%; float:left; color: #000; margin-top: 5px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;  overflow: hidden;  text-overflow: ellipsis; display: -webkit-box;}
ul.list-food li .attr-row{width:calc(100% - 30px); display:table; margin-top:0; float:left; position:absolute; left:15px; bottom:15px;}
ul.list-food li .attr-row .attr-col{display:table-cell; vertical-align:middle; padding-left:7px; width:25%}
ul.list-food li .attr-row .attr-col:first-of-type{padding:0; width:190px }
ul.list-food li .attr-row .attr-col .inner{width:100%; background:rgba(0,0,0,.06); border-radius:4px; text-align:right; position:relative; font-weight:bold; color:#000; padding:0 10px; line-height:33px; height:32px; font-size:14px; white-space:nowrap}
ul.list-food li .attr-row .attr-col .balance{background:#3cbd42; color:#fff;}
ul.list-food li .attr-row .attr-col .balance:before{content: "\f554"; font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; float:left;}
ul.list-food li .attr-row .attr-col .loss-balance{background:#f44336; color:#fff;}
ul.list-food li .attr-row .attr-col .loss-balance:before{content: "\f29d"; font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; float:left;}
ul.list-food li .attr-row .attr-col .meal{}
ul.list-food li .attr-row .attr-col .meal:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:17px; float:left; content: "\f183"; color:#673ab7; }
ul.list-food li .attr-row .attr-col .meal:after{content:'người'; font-size:12px; font-weight:500; padding-left:3px;}
ul.list-food li .attr-row .attr-col .level{}
ul.list-food li .attr-row .attr-col .level:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:13px; float:left; content: "\f005"; color:#ff9800;}
ul.list-food li:nth-child(1),
ul.list-food li:nth-child(2){border:none;}

ul.list-food.daily{width: 33.33333333333%; height:100%; position:absolute; top:0px; left:33.3333333333%; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border) }
ul.list-food.daily li{width:100%!important; height:100%; float:left; margin:0 0; padding: 20px;}
ul.list-food.daily li .wrap-img{width:100%;}
ul.list-food.daily li .wrap-img a:after{width:60px; height:60px; margin: -30px 0 0 -30px; line-height:62px; font-size:22px}
ul.list-food.daily li .wrap-info{width:100%; padding-left:0; float:left; position:relative}
ul.list-food.daily li .attr-row{bottom:100%; margin-bottom:15px;}
ul.list-food.daily li .attr-row .attr-col:first-child{width:50%;}
ul.list-food.daily li .attr-row .attr-col:not(:first-of-type) .inner{background:#fff;} 
ul.list-food.daily li .wrap-info a.name h3{font-size:18px; padding-top:11px; -webkit-line-clamp: 1; font-weight:bold}
ul.list-food.daily li .abbreviation{-webkit-line-clamp: 2;}
ul.list-food.daily li .type-food{width:calc(100% - 40px); float:left; position:absolute; left:20px; bottom:15px; background:var(--color-bg); height:36px; line-height:37px; border-radius:4px; color:#000; padding: 0 15px; }
ul.list-food.daily li .type-food label{margin:0; font-weight:500; position:relative; padding-left:22px;}
ul.list-food.daily li .type-food label:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f222"; font-size: 20px; padding-right:10px; position:absolute; top:0; left:0;}
ul.list-food.daily li .type-food.male label:before{content: "\f222";}
ul.list-food.daily li .type-food.female label:before{content: "\f221";}
ul.list-food.daily li .type-food a{float:right; color:var(--color2); font-weight:500;}

@media (max-width:767px){
    .wrap-foodHome{border-top:10px solid var(--color-border); margin:0 0 0 -15px; width:calc(100% + 30px);  }
    .wrap-foodHome .headFood{box-shadow: 0 1px var(--color-border); margin:0;}
    .wrap-foodHome .headFood label{text-transform:uppercase; font-size:17px; line-height:55px; padding-left:10px; font-weight:bold;}
    .wrap-foodHome .headFood .group-nav{margin:0 0 10px 0; float:left; width:100%; padding: 0 5px;}
    .wrap-foodHome .headFood .group-nav a{width:calc(50% - 10px); margin: 0 5px; background:var(--color-bg); font-weight:500; border-radius:5px;}
    .wrap-foodHome .headFood .group-nav a:before{border-radius:3px!important; left:initial; right:4px!important;}

    .wrap-foodHome .bodyFood{border:none;}
    ul.list-food li{box-shadow: 0 1px var(--color-border); border-radius:0; background:none; padding-bottom:60px;}
    ul.list-food li .wrap-img{width:160px; margin-right:15px}
    ul.list-food li .wrap-info{width:initial; float:initial; padding-left:0; margin-top:-5px;}
    ul.list-food li .wrap-info a.name{width:initial; float:initial; padding-bottom:5px; display:block; }
    ul.list-food li .wrap-info a.name h3{font-weight:bold;}
    ul.list-food li .abbreviation{overflow:initial; width:initial; float:initial; display:initial;  }
    ul.list-food li .attr-row{width:calc(100% - 40px); left:20px;}
    ul.list-food li .attr-row .attr-col{width:initial}
    ul.list-food li .attr-row .attr-col:first-of-type{width:160px!important;}

    ul.list-food.daily{position:relative; width:100%; left:0; border:none; border-bottom:1px solid var(--color-border);}
    ul.list-food.daily li{width:100%!important; display:block; float:left; padding-bottom:65px; height:initial; border:none!important; box-shadow: 0 1px var(--color-border)}
    ul.list-food.daily li:first-child{border-right:1px solid var(--color-border)}
    ul.list-food.daily li:nth-child(n+3){display:none;}
    ul.list-food.daily li .wrap-info{margin-top:0;}
}

@media (min-width:768px) and (max-width:1439px){
    ul.list-food.daily{position:relative; width:100%; left:0; border:none; border-bottom:1px solid var(--color-border); display:table;}
    ul.list-food.daily li{width:50%!important; display:table-cell; float:initial; padding-bottom:70px;}
    ul.list-food.daily li:first-child{border-right:1px solid var(--color-border)}
    ul.list-food.daily li:nth-child(n+3){display:none;}
    ul.list-food li{width:50%;}
    ul.list-food li:nth-child(2n+1){border-right:1px solid var(--color-border)}
    ul.list-food li:nth-child(n+7){display:none!important}
}

@media (min-width:768px) and (max-width:991px){
    ul.list-food li .wrap-img{width:140px; margin-right:15px}
    ul.list-food li .wrap-info{width:initial; float:initial; padding-left:0; margin-top:-7px;}
    ul.list-food li .wrap-info a.name{width:initial; float:initial; }
    ul.list-food li .abbreviation{overflow:initial; width:initial; float:initial; display:initial;  }
    ul.list-food li:nth-child(2n){box-shadow: -1px 0 var(--color-border)}

    ul.list-food.daily li{}
    ul.list-food.daily li .wrap-info{margin-top:0;}
    ul.list-food.daily li .abbreviation{padding-top:0px; width:100%; float:left;}
    ul.list-food.daily li .attr-row{margin-bottom:5px; width:calc(100% - 10px); left:5px;}
    ul.list-food.daily li .attr-row .attr-col{width:initial}
    ul.list-food.daily li .attr-row .attr-col:nth-of-type(2){width:90px}
}

@media (min-width:1200px) and (max-width:1439px){
    ul.list-food li{padding-bottom:20px;}
    ul.list-food li .wrap-info{position:relative; padding-bottom:45px;}
    ul.list-food li .attr-row{bottom:0; width:calc(100% - 15px)}

    ul.list-food.daily li .attr-row{ width:calc(100% - 30px)}
}

@media (min-width:1440px){
    ul.list-food li{width:33.33333333333%;}
    ul.list-food li:nth-child(2n+2){float:right; margin-left:20px;}
    ul.list-food li:nth-child(n+5){display:none!important}

    ul.list-food.daily li:nth-child(n+2){display:none;}
}