.home-page{}

/************************* Main Slider *************************/
.wrap-mainSlider{width:100%; float:left; position:relative; overflow:hidden; margin-top:20px;}
.mainSlider-01{width:calc(100% + 300px); float:left; position:relative; margin-left:-150px; padding-bottom:40px;}
.mainSlider-01 a img{border-radius:16px;}
.mainSlider-01 .owl-nav{position:absolute; height:1px; top:50%; z-index:10; width:100%; margin:0;}
.mainSlider-01 .owl-dots{display:block; padding: 0 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 2px 10px rgba(0, 0, 0, .07); margin: 0 auto; float:left; position:absolute; z-index:10; left:50%; bottom:-20px; transform:translateX(-50%); background:#fff; display:flex; align-items:center; justify-content:center; height:40px; border-radius:20px;}




@media (min-width:1200px) {
    .menu-intro{width:270px; background:#fff; float:left; position:relative; z-index:16; margin-top:0px; border-radius:0 0 10px 10px; box-shadow:inset 0 0 0 1px var(--color-border)  }
    .menu-intro>ul{margin:0; padding:10px 0 20px 0; list-style:none; width:100%; float:left; position:relative;  }
    .menu-intro>ul>li{width:100%; float:left; padding: 0 20px;}
    .menu-intro>ul>li>a{display:block; color:#000; padding: 0px 15px 0px 0;line-height:48px; font-weight:normal; font-size:15px; border-bottom:1px solid #f2f2f2; position:relative; transition:.3s; z-index:5;}
    .menu-intro>ul>li:hover>a{color:var(--color2); z-index:2;}
    .menu-intro>ul>li.sub>a:after{content:"\f054"; font-family:"Font Awesome 5"; font-weight:900; font-size:12px; position:absolute; right:10px; top:0; opacity:0; visibility:hidden; transition:.3s; line-height:48px;}
    .menu-intro>ul>li.sub:hover>a{ background-image: linear-gradient(to right, #fff , var(--color-bg)); width:calc(100% + 20px); box-shadow: 0 -1px #f2f2f2}
    .menu-intro>ul>li.sub:hover>a:after{right:0; opacity:1; visibility:initial;}
    .menu-intro>ul>li:last-child>a{border:none;}
    .menu-intro>ul>li>.sub-mainMenu{position:absolute; top:0; left:0; min-height:100%; background:#fff; border-radius:0 0 10px 10px; opacity:0; visibility:hidden; transition:.3s; pointer-events:none; overflow-y:auto}
    .menu-intro>ul>li:hover>.sub-mainMenu{opacity:1; visibility:initial; pointer-events:initial;}
    .menu-intro>ul>li>a{padding-left:35px; white-space:nowrap}
    .menu-intro>ul>li>a>.icon{height:24px; margin-top:-12px; position:absolute; left:0; transition:.3s; top:50%;}
    .menu-intro>ul>li>a>.icon>svg{height:24px; opacity:.4;}
    .menu-intro>ul>li>a>.icon>img{height:24px; display:block;}
    .menu-intro>ul>li:hover>a{font-weight:500;}
    .menu-intro>ul>li:hover>a>.icon>svg{opacity:1}
    .menu-intro:hover{border-color:#fff;}
}

/* Row Catalog On Mobile */
@media (max-width:767px) {
    .row-catalog{width:calc(100% + 30px); margin: 0 0 0px -15px; display:block; float:left;padding:20px 0; position:relative; }
    .row-catalog:after{content:''; width:1px; height:100%; background:var(--colot-bg); position:absolute; top:0; right:16px; z-index:6; }
    .row-catalog .inner{width:100%; float:left; position:relative; z-index:5;  overflow-x: auto; overflow-y: hidden;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
    .row-catalog .inner::-webkit-scrollbar {display:none;}
    .row-catalog .inner ul{margin:0; padding:0; list-style:none; white-space:nowrap; display:flex; position:relative;}
    .row-catalog .inner ul li{display:flex; position:relative; padding: 0}
    .row-catalog .inner ul li:nth-child(1),
    .row-catalog .inner ul li:nth-child(2){display:none;}
    .row-catalog .inner ul li a{display:block; width:110px; position:relative; padding: 30px 12px 0px 12px; text-align:center; white-space:normal; color:#fff; border-right:1px solid var(--color-border)}
    .row-catalog .inner ul li a:before{top:0!important; left:50%; margin: 0 0 0 -12px!important;background-position: 0 0} 
    .row-catalog .inner ul li a span{display:block; text-align:center; font-size:14px; color:#000; font-weight:500; line-height:initial;}
    .row-catalog .inner ul li a .icon{width:24px; height:24px; margin-left:-12px; position:absolute; top:10px; left:50%; }
    .row-catalog .inner ul li:last-child a{border:none;}
}

/* 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:absolute; top:0; right:0; }
.title-groubSub label{display:block; font-weight:700; margin:0; color:#000; font-size:24px; float:left; margin-right:0px; line-height:36px;}
.title-groubSub .drop-title{float:right; position:relative;}
.title-groubSub .drop-title .nav-drop{font-size:14px; background:rgba(0,0,0,.03); font-weight:500; color:rgba(0,0,0,.85); height:30px; line-height:30px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border-radius:15px; padding: 0 30px 0 15px; display:block; position:relative; transition:.3s; }
.title-groubSub .drop-title .nav-drop:after{font-family: "Font Awesome 5";content: "\f105";position: absolute;top: 0;right: 15px;line-height: 30px;font-size: 16px;white-space: nowrap;font-weight: 400;text-transform: uppercase;transition: .3s; opacity:.75}
.title-groubSub .drop-title .nav-drop:hover{color:var(--color1);}
.title-groubSub .drop-title ul{display:block; left:initial!important; transform:initial!important; top:100%!important; right:0!important; padding:10px 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 3px 10px rgba(0, 0, 0, .07); border-radius:8px; border:none; opacity:0; visibility:hidden; transition:.3s; position:absolute}
.title-groubSub .drop-title ul li{width:100%; float:left;}
.title-groubSub .drop-title ul li a{font-weight:400; font-size:14px; color:rgba(0,0,0,.75); padding: 6px 0; width:100%; float:left; transition:.3s;}
.title-groubSub .drop-title ul li a:hover{color:var(--color1)!important;}
.title-groubSub .drop-title ul li:last-child{border-top:1px solid rgba(0,0,0,.07); padding-top:5px; margin-top:5px;}
.title-groubSub .drop-title ul li:last-child a{ font-weight:600}
.title-groubSub .drop-title.show .nav-drop{color:var(--color1); background:#fff;}
.title-groubSub .drop-title.show .nav-drop:after{transform:rotate(90deg)}
.title-groubSub .drop-title.show ul{opacity:1; visibility:initial; margin-top:10px;}

.row-group{width:100%; float:left; position:relative; margin-top:50px; }
.row-group:hover{z-index:2;}
.row-group ul.list-product{margin:0; padding:0; list-style:none; clear:both; width:100%; float:left; position:relative; overflow:initial; display:flex; align-items:end }
.row-group ul.list-product li{padding:0 0; margin:0; z-index:1;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 .title-groubSub{width:calc(100% - 340px); z-index:10}
    .row-group ul.list-product{}
    .row-group ul.list-product li{width: calc(25% - 85px);}
    .row-group ul.list-product li .product{border-radius:14px;}
    .row-group ul.list-product li:first-child{width: 340px; padding-right:30px;}
    .row-group ul.list-product li:nth-child(n+6){display:none;}
    .row-group ul.list-product li:first-child .product{box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); border-radius:18px; padding:28px;} 
    .row-group ul.list-product li:first-child .product .name h3{color:var(--color1); font-size:17px; font-weight:500;}
}

@media (min-width:1440px){
    .row-group .title-groubSub{width:calc(100% - 340px); z-index:10}
    .row-group ul.list-product{}
    .row-group ul.list-product li{width: calc(25% - 85px);}
    .row-group ul.list-product li .product{border-radius:14px;}
    .row-group ul.list-product li:first-child{width: 340px; padding-right:30px;}
    .row-group ul.list-product li:nth-child(n+6){display:none;}
    .row-group ul.list-product li:first-child .product{box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); border-radius:18px; padding:28px;} 
    .row-group ul.list-product li:first-child .product .name h3{color:var(--color1); font-size:17px; font-weight:500;}
}

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

.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;}

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