.page-products{clear:both; padding-top:0px;  width:100%; float:left; position:relative; }

@media (max-width:767px) {
    .page-products{padding-bottom:0;}
}

/* Bar list */
.page-products .head-bar{width:100%; float:left; position:relative; display:block; margin-top:-51px; z-index:5; text-align:center; margin-bottom:40px; }
.page-products .head-bar .toolbar{display:inline-block; position:relative; border-radius:12px 12px 0 0; background:#fff;height:56px; padding: 5px 5px 0 5px;  }
.page-products .head-bar .toolbar:before{position: absolute;  content: ""; bottom:5px ; left: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(0deg);}
.page-products .head-bar .toolbar:after{position: absolute;  content: ""; bottom:5px ; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg)}
.page-products .head-bar .toolbar .col-item{float:left; position:relative; padding: 0 20px; height:46px; display:block; line-height:46px; background:var(--colorBg); z-index:2;}
.page-products .head-bar .toolbar .col-item:before{content:''; width:1px; height:16px; top:15px; background:rgba(0,0,0,.15); position:absolute; left:0; display:block;}
.page-products .head-bar .toolbar .col-item:first-of-type{border-radius:7px 0 0 7px;}
.page-products .head-bar .toolbar .col-item:first-of-type:before{display:none;}
.page-products .head-bar .toolbar .col-total b{color:var(--color1); padding-right:5px;}
.page-products .head-bar .toolbar .col-item:last-of-type{border-radius:0 7px 7px 0}
.page-products .head-bar .toolbar .dropSort,
.page-products .head-bar .toolbar .dropPrice{width:120px;}

@media (max-width:767px) {
    .page-products .head-bar .toolbar{width:100%;}
    .page-products .head-bar .toolbar .col-item{width:33.333333333%}
    .page-products .head-bar .toolbar .dropSort,
    .page-products .head-bar .toolbar .dropPrice{width:100%;}
}

.page-products .body-products{width:100%; float:left; position:relative; padding-top:5px; z-index:2;}




.dropFilter{float:right; position:relative; min-width:15px; line-height:initial}
.dropFilter .nav-drop{border-radius:7px; height:46px; line-height:47px; display:block;  position:relative; transition:.3s; text-align:left; color:#000}
.dropFilter .nav-drop:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f0d7"; font-size:12px; position:absolute; right:0px;}
.dropFilter.show .nav-drop:before{content: "\f0d8";}
.dropFilter .dropdown-menu{display:block; transform:initial!important; top:100%!important; margin-top:-10px; padding: 10px 0; border:none; border-radius:15px;box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); opacity:0; visibility:hidden; pointer-events:none; transition:.3s; z-index:5;}
.dropFilter.show .dropdown-menu{margin-top:5px; opacity:1; visibility:initial; pointer-events:initial}
.dropFilter .dropdown-menu li{width:100%; float:left; position:relative;}
.dropFilter .dropdown-menu li a{color:#000; text-decoration:none; padding: 8px 20px; display:block; transition:.3s; font-size:15px;}
.dropFilter .dropdown-menu li a:hover,
.dropFilter .dropdown-menu li a.active{color:var(--color1)}

.dropPrice .dropdown-menu{width:250px; padding: 10px 0 }
.dropPrice .dropdown-menu li{width:100%; padding: 10px 20px 10px 45px; cursor:pointer;  font-size:15px;}
.dropPrice .dropdown-menu li:before{content:''; width:14px; height:14px; border-radius:3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); position:absolute; top:11px; left:20px; z-index:1;}
.dropPrice .dropdown-menu li.checked{color:var(--color1)}
.dropPrice .dropdown-menu li.checked:before{box-shadow: 0 0 0 1px var(--color1); background:var(--color1)}
.dropPrice .dropdown-menu li.checked:after{content: "\f00c"; font-family: "Font Awesome 5"; font-weight: 900; position:absolute; top:12px; left:22px; font-size:11px; z-index:3; color:#fff;}



/* List Products */