﻿
.wrap-countdown{position:relative; float:left; margin-top:3px;}
.wrap-countdown label{text-transform:uppercase; color:#000; font-size:14px; font-weight:900; float:left; line-height:44px; 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: 1px 0 0 0; height:40px; margin-right:15px; box-shadow: 0 0 0 1px var(--color-border); border-radius:5px; width:40px; font-weight:900; color:var(--color3); font-size:17px;}
.wrap-countdown ul.countdown li:after{content:':'; line-height:44px; 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:11px; text-align:center; position:absolute; left:0; bottom:3px; 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;}

.row-group{width:100%; float:left; position:relative; margin-top:40px;}
.row-group:first-of-type{margin-top:0;}
.row-group .row-head{width:100%; float:left; position:relative;}
.row-group .row-head .col-left{float:left; position:relative;}
.row-group .row-head .col-left h3{font-size:22px; font-weight:bold; display:block; margin:0;}
.row-group .row-head .col-left span{font-size:14px; font-weight:500; padding-top:2px; display:inline-block; text-transform:uppercase}
.row-group .row-head .col-left span:before{content:'Thời gian:'; padding-right:5px; font-weight:normal; opacity:.7; text-transform:initial}
.row-group .row-head .col-left .time-limit{font-size:14px; font-weight:500; padding-top:2px; display:inline-block;}
.row-group .row-head .col-left .time-limit b:first-child:before{content:'Từ'; padding-right:5px; font-weight:normal; opacity:.7;}
.row-group .row-head .col-left .time-limit b:last-child:before{content:'đến'; padding-left:5px; padding-right:5px; font-weight:normal; opacity:.7;}
.row-group .row-head .col-right{float:right; position:relative;}
.row-group .row-content{width:100%; float:left; position:relative; margin-top:15px;}

.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-current ul.list-product{box-shadow:0 0 0 2px var(--color3)} 
.row-current .product:before{box-shadow:0 0 0 2px var(--color3),0 3px 15px rgba(0, 0, 0, .2)} 
.row-current .wrap-countdown ul.countdown li{background:var(--color3); color:#fff; box-shadow:none;}
.row-current .wrap-countdown ul.countdown li:before{color:rgba(255,255,255,.85)}

@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%;}
}

@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%;}
}

@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%;}
}

@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%;}
}

@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(6n){box-shadow: 0px 1px var(--color-border);}
}
