.home-page{}

@media (min-width:991px) {
    /* Menu Danh mục chỉ ghim mở ở trang chủ; các trang Campaign dùng dropdown khi người dùng mở. */
    body:has(.content-page.home-page) .drop-category .dropdown-menu{opacity:1!important; visibility:initial!important;}
}


/* Main Slider */
.wrap-slider{width:100%; float:left; position:relative; margin-top:20px;z-index:2;}
.wrap-slider .owl-item a{width:100%; float:left;  display:block; border-radius:10px; 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) {
    .col-intro{position:relative; padding-top:0; }
    .wrap-slider{background:#fff; border-radius: 0px; overflow:hidden; margin-top:0; position:relative; z-index:2; width:calc(100% + 30px); margin-left:-15px;}
    .wrap-slider:before{}
    .wrap-slider .owl-carousel{position:relative; z-index:3;}
    .wrap-slider .owl-item a{border-radius:0;}
    .wrap-slider .owl-controls {display:none!important;}
}

@media (min-width:1200px) {
    .wrap-slider{width:calc(100% - 320px); float:right; position:relative; margin-top:25px;z-index:2; }
    .wrap-slider .owl-item a{width:100%; float:left;  display:block; border-radius:10px; 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;}
}

/* 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 .title-saleHome{width:calc(100% - 10px); float:left; position:relative; background:var(--color1); height:60px; border-radius:7px; margin: 5px 5px 5px 5px; padding: 13px 15px 0 57px; color:#fff; }
.wrap-saleHome .title-saleHome i{position: absolute; left: 15px; top: 15px; font-size: 32px;  width: 32px; text-align: center; transition: .3s;}
.wrap-saleHome .title-saleHome h3{text-transform: uppercase; font-size: 16px; font-weight: 900; margin: 0;}
.wrap-saleHome .title-saleHome span{font-size:14px;}
.wrap-saleHome .title-saleHome .navMore{position:absolute; right:20px; top:15px; line-height:30px; background:#fff; border-radius:15px; padding: 0 15px; color:#000; font-size:14px; font-weight:500;}
.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);}

@media (max-width:767px) {
    .wrap-saleHome{box-shadow:none; margin-top:0;}
}


ul.nav-tabSaleHome{display:none; position:absolute; top:-27px; left:50%; align-items:center; transform:translateX(-50%); height:50px; background:#fff; padding: 0 2px; border-radius:27px; box-shadow: 0 0 0 2px var(--color-border), 0 0 0 7px #fff; z-index:6;}
ul.nav-tabSaleHome li{ margin: 0 0px; flex:1; }
ul.nav-tabSaleHome li a{width:100%; float:left; position:relative; margin:0; padding:0; height:46px; border-radius: 25px 0 0 25px; padding:0 10px 0 20px; color:#000; overflow:hidden; z-index:1; transition:.3s; outline:none; display:flex; align-items:center; justify-content:center; }
ul.nav-tabSaleHome li a label{margin:0; padding:2px 5px 0 0; text-transform:uppercase; font-weight:bold; font-size:14px; white-space:nowrap; cursor:pointer}
ul.nav-tabSaleHome li a b{font-weight:800; height:32px; line-height:32px; padding: 0 15px; color:var(--color3); font-size:15px; text-align:center; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius:16px; margin-left:5px; }
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:last-child a{border-radius: 0 25px 25px 0; }

.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: 0 15px; display:none;}
.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-foot{width:100%; box-shadow: 0 -1px var(--color-border); text-align:center; float:left; z-index:2 ;}
.contentTab-saleHome .tab-foot a{text-decoration:none; line-height:45px; color:#000; display:block;}

@media (max-width:1199px) {
    ul.nav-tabSaleHome{position:relative; width:calc(100% - 10px); height:auto; border-radius:0; box-shadow:none; background:rgba(0,0,0,.05); margin: 5px 5px 0 5px; padding:0; top:initial; left:initial; transform:initial; padding:5px; border-radius:7px;}
    ul.nav-tabSaleHome li a{height:50px; border-radius:5px!important; padding: 0;}
}

@media (max-width:500px) {
    ul.nav-tabSaleHome{ width:100%; margin:0; border-radius:0;}
    ul.nav-tabSaleHome li{width:50%;}
    ul.nav-tabSaleHome li a{display:block; text-align:center; height:70px; padding-top:5px;}
    ul.nav-tabSaleHome li a label{padding-right:0; width:100%;}
    ul.nav-tabSaleHome li a ul.countdown{margin: 0 auto;width:100%; justify-content:center; }
    ul.nav-tabSaleHome li a b{ line-height:31px; height:30px; display:inline-block; margin-top:1px; border-radius:5px;}
}

ul.countdown{list-style:none; margin:0; padding:0; list-style:none; display:flex;}
ul.countdown li{flex:1; position:relative; margin: 0 5px 0 6px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); height:32px; width:32px; max-width:32px; text-align:center; color:var(--color3); font-weight:800; font-size:15px; border-radius:5px; padding-top:0px;}
ul.countdown li:after{content:':'; position:absolute; left:100%; top:0;  line-height:32px; color:#000; font-size:16px; padding-left:4px; font-weight:500; }
ul.countdown li:before{content:''; width:100%; position:absolute; left:0; bottom:0px; font-size:9px; font-weight:800; text-transform:uppercase; opacity:.85; color:#000;  } 
ul.countdown li.hours:before{content:'Giờ'}
ul.countdown li.minutes:before{content:'Phút'}
ul.countdown li.seconds:before{content:'Giây'}
ul.countdown li:last-child:after{display:none;}



/* Flash Sale  */
.flashSale{box-shadow:none; padding-top:60px; border:2px solid var(--color3)} 
.flashSale:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background: #7e0401 url(../Default/flashSale-bg.jpg) no-repeat 0 0; background-size: 100% auto; border-radius:10px; display:none;}
.flashSale .prime-time{position:absolute; bottom:100%; left:0; width:100%; display:flex; z-index:5;}
.flashSale .prime-time .col-time{ flex:1; position:relative; margin: 0; padding: 0 0 15px 0;}
.flashSale .prime-time .col-time:last-of-type{text-align:right}
.flashSale .prime-time .col-time label{display:block; margin:0; font-size:21px; font-weight:bold;}
.flashSale .prime-time .col-time b{background:rgba(0,0,0,.07); line-height:26px; font-size:14px; display:inline-block; padding: 0 7px; border-radius:5px; margin-left:5px; color:#000; text-transform:uppercase; position:relative; }
.flashSale .prime-time .col-time b:before{content:''; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; position:absolute; top:-4px; left:50%;}
.flashSale .prime-time .col-time b:after{content:''; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; position:absolute; bottom:-4px; left:50%;}
.flashSale .prime-time .col-time span{font-size:14px; font-weight:400; line-height:26px; opacity:.75; padding-right:5px;}
.flashSale .head{position:absolute; top:-25px; left:50%; display:flex; align-items:center; transform:translateX(-50%); height:50px; background:#fff; padding: 0 20px 0 20px; border-radius:27px; box-shadow: 0 0 0 2px var(--color-border), 0 0 0 7px #fff; z-index:6; }
.flashSale .head label{margin:0; padding:2px 5px 0 0; text-transform:uppercase; font-weight:600; font-size:14px;}
.flashSale .head span{background:var(--color3); color:#fff; padding: 5px 10px 4px 10px; border-radius:20px; font-weight:500; line-height:20px;}
.flashSale .head .timeSale{width:100%; position:absolute; top:100%; left:0; text-align:center; font-weight:500; padding-top:7px; color:#000}
.flashSale .head ul.countdown li{background:var(--color3); color:#fff; box-shadow:none;}
.flashSale .head ul.countdown li:before{color:#fff;}

.flashSale.is-active{padding-top:30px;}
.flashSale.is-active .head b{line-height:32px; background:var(--color3); color:#fff; border-radius:7px; padding: 0 10px; margin-left:5px; position:relative;}
.flashSale.is-active .head b:before{content:''; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; position:absolute; top:-4px; left:50%;}
.flashSale.is-active .head b:after{content:''; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; position:absolute; bottom:-4px; left:50%;}
.flashSale.is-active ul.nav-tabSaleHome{display:flex;}

@media (max-width:767px) {

   .flashSale{padding-top:0!important; border:none;margin-top:55px; }
   .flashSale .prime-time .col-time{padding-bottom:0px;}
   .flashSale .prime-time .col-time label{line-height:48px; font-size:17px; text-transform:uppercase; padding-left:10px; text-align:center}
   .flashSale .prime-time .col-time:last-of-type{display:none;}
   .flashSale .head{position:relative; transform:initial; padding: 0 15px; left:initial; margin:0 5px 35px 5px; top:0; height:60px; border:none; box-shadow:none; display:block; background:var(--color3); border-radius:5px; width:calc(100% - 10px) }
   .flashSale .head label{color:#fff; line-height:60px; font-size:16px; font-weight:900; padding:0;}
   .flashSale .head .timeSale{border-bottom:1px solid var(--color-border); padding: 10px 0; font-size:15px;}
   .flashSale .head ul.countdown{float:right; margin-top:15px;}
   .flashSale .head ul.countdown li{background:#fff; color:var(--color3)}
   .flashSale .head ul.countdown li:before{color:#000}
}

@media (min-width:768px) and (max-width:1199px) {
    .flashSale{padding-top:0!important;}
}

@media (min-width:1200px) and (max-width:1439px) {
   
}

ul.list-product-flashSale{display:flex; list-style:none; margin:0; padding:30px 0; justify-content:center; clear:both;}
ul.list-product-flashSale li{flex:1; max-width:33.33333333333%; padding:0 20px; border-right:1px solid rgba(0,0,0,.1)}
ul.list-product-flashSale>li:nth-child(n+4){display:none}
ul.list-product-flashSale li .product{padding:0;}
ul.list-product-flashSale li .product:before{display:none;}
ul.list-product-flashSale li .product .buttons{display:none;}
ul.list-product-flashSale li .product .sold{width:calc(100% - 20px); background-image: linear-gradient(to left, red , yellow); max-width:120px;}
ul.list-product-flashSale li .product .sold:before{width:30px; height:30px;}
ul.list-product-flashSale li .product .wrap-btn{ opacity:1; pointer-events:initial;  visibility:initial; position:relative; top:initial; margin-top:20px; padding-left:20px; }
ul.list-product-flashSale li .product .wrap-btn a{width:100%; margin:0; background:#edf4fc; color:var(--color2); box-shadow:none!important; border-radius:7px;}
ul.list-product-flashSale li .product .wrap-btn a:hover{background:var(--color2); color:#fff;}
ul.list-product-flashSale li .product .wrap-countdown{position:absolute; left:0; bottom:0; padding-left:20px;}
#tab-flagSaleNext ul.list-product-flashSale li .product .sold{display:none;}
#tab-flagSaleNext ul.list-product-flashSale li .product .info{padding-bottom:50px;}
#tab-flagSaleNext ul.list-product-flashSale li .product .info:before{content:'Sắp mở bán'; width:calc(100% - 20px); height:38px; background:rgba(0,0,0,.07); border-radius:5px; line-height:39px; padding: 0 12px; color:#000; font-size:14px; font-weight:500; display:block;  position:absolute; left:20px; bottom:0; }
#tab-flagSaleNext ul.list-product-flashSale li .product .info:after { font-family: "Font Awesome 5";  font-weight: 400;  content: "\f017";  font-size: 16px; line-height:35px; position:absolute; right:10px; bottom:0; opacity:.5}

@media (max-width:767px) {
    
    ul.list-product-flashSale{display:block;}
    ul.list-product-flashSale li{max-width:50%; float:left; padding-bottom:20px;}
    ul.list-product-flashSale li .product .info{width:calc(100% + 20px); float:left; margin-left:-20px;}
    ul.list-product-flashSale li .product .price{padding-right:0; display:flex;}
    ul.list-product-flashSale li:first-child{max-width:100%; display:flex; border-bottom:1px solid var(--color-border); border-right:none; }
    ul.list-product-flashSale li:first-child .product .wrap-img{width:40%; margin:0;}
    ul.list-product-flashSale li:first-child .product .info{width:60%; margin:0; padding-left:5px;}
    ul.list-product-flashSale li:last-child{border-right:none;}
    #tab-flagSaleNext ul.list-product-flashSale li .product .info{padding-bottom:0;}
    #tab-flagSaleNext ul.list-product-flashSale li .product .info:before,
    #tab-flagSaleNext ul.list-product-flashSale li .product .info:after{display:none;}
}

@media (min-width:768px) and (max-width:1199px) {
    ul.list-product-flashSale li .product .info{width:calc(100% + 20px); float:left; margin-left:-20px;}
    #tab-flagSaleNext ul.list-product-flashSale li .product .info:before{width:100%; left:0;}
}

@media (min-width:1200px) {
    ul.list-product-flashSale li .product{display:table; border-radius:7px;  padding:0px 0 0 0; background:#fff}
    ul.list-product-flashSale li .product .name{padding-right:0;}
    ul.list-product-flashSale li .product .wrap-img{width:180px; display:table-cell; float:inherit; margin:0; padding:15px;}
    ul.list-product-flashSale li .product .wrap-img img{transform: scale(1)!important}
    ul.list-product-flashSale li .product .info{ display:table-cell; vertical-align:top; position:relative;}
}

@media (min-width:1200px) and (max-width:1439px) {
    ul.list-product-flashSale li .product .wrap-img{width:150px;}
}


/* 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;}

/* Hot news */
.wrap-infoHome{ width:100%; float:left; display:block; width:100%; margin-top:35px; z-index:1; position:relative }
.wrap-infoHome .head-col{width:100%; float:left; position:relative; font-weight:900; font-size:22px; color:#000; z-index:2;}
.wrap-infoHome .body-col{width:100%; float:left; position:relative; padding:0; z-index:2;}
.wrap-infoHome ul.list-info{width:calc(100% + 20px); float:left; margin:10px 0 0 -10px ; padding:0; list-style:none; position:relative; z-index:2;} 
.wrap-infoHome ul.list-info li{float:left; position:relative; padding: 0 10px; margin:0; background:#fff; border-radius:7px; overflow:hidden;}
.wrap-infoHome ul.list-info li .col-img{width: 100%; float:left; position:relative;  }
.wrap-infoHome ul.list-info li .col-img:before{content:''; padding-top: 66.6666666666%; display:block; }
.wrap-infoHome ul.list-info li .col-img a{position:absolute; top:0; left:0; width:100%; height:100%;  overflow:hidden; display:block; border-radius:10px;}
.wrap-infoHome ul.list-info li .col-img a img{width: inherit; height: inherit; object-fit: cover; transition:.3s;}
.wrap-infoHome ul.list-info li:hover .col-img a img{ transform: scale(1.1)}
.wrap-infoHome ul.list-info li .col-info{width:100%; float:left; padding:15px 0 0 0 ;}
.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-size:16px; font-weight:bold; color:#000; line-height:22px; -webkit-line-clamp: 2; -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(--color2)}
.wrap-infoHome ul.list-info li .col-info .briefly{width:100%; color:#000; float:left; font-size:15px; -webkit-line-clamp: 3; -webkit-box-orient: vertical;white-space: normal;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; opacity:.85}
.wrap-infoHome ul.list-info li .col-info .wrap-attr{width:100%; float:left; position:relative; margin: 0px 0 10px 0; top:0; left:0; color:#000}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
.wrap-infoHome ul.list-info li .col-info .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
.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;}

@media(max-width:767px) {
    .wrap-infoHome{border-top:10px solid var(--color-border); margin-top:0; width:calc(100% + 30px); margin-left:-15px;}
    .wrap-infoHome .head-col{line-height:55px; padding-left:10px; text-transform:uppercase; font-size:17px; border-bottom: 1px solid var(--color-border)}
    .wrap-infoHome ul.list-info{margin-top:0; background:none; width:100%; float:left; margin:0;}
    .wrap-infoHome ul.list-info li{padding:20px; box-shadow: 0 1px var(--color-border); border-radius:0; background:none;}
    .wrap-infoHome ul.list-info li:last-child{box-shadow:none;}
    .wrap-infoHome ul.list-info li:not(:first-child){padding-bottom:60px;}
    .wrap-infoHome ul.list-info li:not(:first-child) .col-img{width:160px; margin-right:15px; float:left;}
    .wrap-infoHome ul.list-info li:not(:first-child) .col-img a{border-radius:7px;}
    .wrap-infoHome ul.list-info li:not(:first-child) .col-info{width:initial; float:initial; padding-top:0;}
    .wrap-infoHome ul.list-info li:not(:first-child) .col-info h3 a{display:block}
    .wrap-infoHome ul.list-info li:not(:first-child) .col-info .briefly{width:initial; float:initial; overflow:initial; display:initial}
    .wrap-infoHome ul.list-info li:not(:first-child) .wrap-attr{position:absolute; padding: 5px 10px; background:var(--color-bg); border-radius:5px; width:calc(100% - 40px); left:20px; bottom:20px; top:initial!important; margin:0; }
}

@media (min-width:768px) and (max-width:991px) {
    .wrap-infoHome ul.list-info{margin-top:-10px}
    .wrap-infoHome ul.list-info li{width:50%; margin-top:30px;}
    .wrap-infoHome ul.list-info li:nth-child(n+7){display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
    .wrap-infoHome ul.list-info{margin-top:-10px}
    .wrap-infoHome ul.list-info li{width:33.3333333333333333%; margin-top:30px;}
    .wrap-infoHome ul.list-info li:nth-child(n+7){display:none;}
}

@media (min-width:1200px) and (max-width:1439px) {
    .wrap-infoHome ul.list-info li{width:25%}
    .wrap-infoHome ul.list-info li:nth-child(n+5){display:none;}
}

@media(min-width:1440px) {
    .wrap-infoHome ul.list-info li{width:25%}
    .wrap-infoHome ul.list-info li:nth-child(n+5){display:none;}
}

/* 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 .infoShop{width:100%; float:left; position:relative;}
.recommendation-home .infoShop svg{display:block; width:160px; margin: 0}
.recommendation-home .infoShop svg path:first-child{fill: var(--color2);}
.recommendation-home .infoShop svg path:last-child{fill: var(--color1);}
.recommendation-home .infoShop .title-col{text-transform:uppercase; font-weight:bold; width:100%; float:left; margin:15px 0 0 0; font-size:17px;}
.recommendation-home .infoShop ul{width:100%; margin:0; padding:0px 0 15px 0; list-style:none; float:left;}
.recommendation-home .infoShop ul li{width:100%; float:left; position:relative; border-top:1px dashed rgba(0,0,0,.1); padding-top:8px; padding-bottom:8px;}
.recommendation-home .infoShop ul li:first-child{border-top:none;}
.recommendation-home .infoShop ul li strong{}
.recommendation-home .infoShop ul li strong:after{content:':'; padding-right:5px;}
.recommendation-home .infoShop ul li a{color:#000}
.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;}
}