﻿
.productGroup-page{clear:both;}
.row-group{width:100%; float:left; position:relative; margin-top:30px;}
.row-group:first-of-type{margin-top:0px;}
.row-group .body-group{width:100%; float:left; position:relative;}
@media (max-width:767px) {
   .productGroup-page{padding-bottom:60px;}
   .row-group:first-of-type{margin-top:0px; border-top:0;}
}

ul.ads-top{margin: 0 -10px 0 -10px; padding:0; list-style:none; clear:both; display:none;}
ul.ads-top li{padding: 0 10px; position:relative;}
ul.ads-top li a{width:100%; float:left; position:relative;}
ul.ads-top li a img{width:100%; float:left; border-radius:7px;}
@media (max-width:767px) {
    ul.ads-top{display:none!important;}
}

.title-groubSub{width:100%; float:left; position:relative;}
.title-groubSub label{display:block; font-weight:bold; margin:0; color:#000; font-size:22px;}
.title-groubSub .number{clear:left; font-weight:500; color:#000}
.title-groubSub .number b{padding-right:5px; font-size:16px;}
.title-groubSub .navMore{padding: 0 35px 0 15px;  text-align:left; font-size:14px; font-weight:500;float:right; background:#edf4fc; line-height:31px; height:30px; border-radius:15px; color:#000; position:absolute; top:15px; right:0;}
.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;}

@media (max-width:767px) {
   .row-group{width:calc(100% + 30px); margin-left:-15px; margin-top:0; border-top:10px solid var(--color-border) }
   .row-group .title-group{position:relative; bottom:inherit; margin:0;}
   .row-group .title-group .col-left span{font-weight:bold; font-size:13px; opacity:.75; text-transform:uppercase; letter-spacing:1px; }
   .row-group .title-group .col-left label{text-transform:inherit; color:var(--color1); letter-spacing:inherit}
   .row-group .title-group .nav-all{position:absolute; top:0; right:0; padding: 0 15px;}
   .row-group .title-group .nav-all:after{display:none;}

   .title-groubSub{ padding: 14px 10px; box-shadow: 0 1px var(--color-border)}
   .title-groubSub .navMore{right:10px; top:25px;}
   .title-groubSub label{font-size:17px; text-transform:uppercase}
}

@media (min-width:768px) and (max-width:991px) {
   .productGroup-page{padding-bottom:0px;}
   .row-group:first-of-type{margin-top:0;}
    ul.ads-top{display:none!important;}
}

@media (min-width:992px) and (max-width:1199px) {

}

@media (min-width:1200px) and (max-width:1439px) {

}

/* List products */
ul.list-product{width:100%; margin-left:-5px; margin-top:10px;box-shadow: 0 0 0 1px var(--color-border); border-radius:10px;}
ul.list-product li{ margin: 0;border-radius:0px; box-shadow: 1px 1px var(--color-border)}

@media (max-width:767px) {
   ul.list-product{box-shadow:none; margin:0;} 
   ul.list-product li{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
   ul.list-product li:nth-child(n+13){display:none;}
}
@media (min-width:768px) and (max-width:991px) {
   ul.list-product li{-ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%;}
   ul.list-product li:nth-child(3){box-shadow: 0px 1px var(--color-border)}
   ul.list-product li:nth-child(12){box-shadow: none}
   ul.list-product li:nth-child(n+13){display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
   ul.list-product li{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width:25%;}
   ul.list-product li:nth-child(4){box-shadow: 0px 1px var(--color-border)}
   ul.list-product li:nth-child(12){box-shadow: none}
   ul.list-product li:nth-child(n+13){display:none;}
}

@media (min-width:1200px) and (max-width:1439px){
   ul.list-product li{-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}
   ul.list-product li:nth-child(5){box-shadow: 0px 1px var(--color-border)}
   ul.list-product li:nth-child(6){box-shadow: 1px 0px var(--color-border)}
   ul.list-product li:nth-child(10){box-shadow: none}
   ul.list-product li:nth-child(n+11){display:none;}
}

@media (min-width:1440px){
   ul.list-product li{-ms-flex: 0 0 16.66666666666%; flex: 0 0 16.66666666666%; max-width: 16.66666666666%;}
   ul.list-product li:nth-child(6){box-shadow: 0px 1px var(--color-border)}
   ul.list-product li:nth-child(7){box-shadow: 1px 0px var(--color-border)}
   ul.list-product li:nth-child(12){box-shadow: none}
   ul.list-product li:nth-child(n+13){display:none;}
   
}

/* barTop on Mobile */

.barTop{width:100%; position: fixed; top: 65px; height: 50px;left: 0;background: #fff;z-index: 20; box-shadow: 0 2px 3px rgba(0, 0, 0, .05),0 1px rgba(0,0,0,.04);}
.barTop .titlebar{line-height: 50px; float: left; font-size: 16px; text-transform: uppercase; font-weight: 900; padding-left:10px; color:var(--color2);}
.barTop .dropFilter{position:absolute; float:right; top:7px; right:10px; width:190px; }
.barTop .dropFilter .nav-drop{line-height:34px; background:var(--color-bg); display:block; border-radius:6px; padding: 0 25px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000; font-size:15px; width:100%!important; font-size:15px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); position:relative;}
.barTop .dropFilter .nav-drop:after{font-family: "Font Awesome 5"; font-weight: 900; font-size:12px; content: "\f0d7"; position:absolute; top:0; right:10px;}
.barTop .dropFilter ul{margin:0; padding:0 5px 5px 5px; list-style:none; position:fixed!important; top:115px!important; left:initial!important; right:0!important; display:block; transform:initial!important; border:0; width:100%; border-radius:0 0 10px 10px; transition:.3s; opacity:0; visibility:hidden;}
.barTop .dropFilter ul li{width:calc(50% - 10px); float:left; margin: 5px;}
.barTop .dropFilter ul li a{text-decoration:none;color:#000; font-size:15px; line-height:40px; padding: 0 15px; background:var(--color-bg); display:block; width:100%; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barTop .dropFilter.show ul{opacity:1; visibility:initial}