.page-products{}
.page-products .col-filter{width:290px; float:left; position:relative; padding-right:30px;padding-top:10px; }
.page-products .col-filter .group-item{width:100%; float:left; position:relative; margin-bottom:30px;}
.page-products .col-filter .group-item .title-group{width:100%; float:left; position:relative; background:#fff; margin-bottom:20px; background-image: linear-gradient(to right, #f3f3f6 50%, #fff);}
.page-products .col-filter .group-item .title-group h4{ max-width:calc(100% - 15px); border-radius:7px 7px 0 0; white-space:nowrap; margin:0 0 0 -8px; width:auto; line-height:39px; height:38px; padding: 0 20px; float:left; position:relative; background:#ec1f26; color:#fff; text-transform:uppercase; font-size:15px; font-weight:bold; position:relative; letter-spacing:1px;}
.page-products .col-filter .group-item .title-group h4:after{content:''; border-left:15px solid #ec1f26; border-top:33px solid transparent;position:absolute; bottom:0; left:100%;}
.page-products .col-filter .group-item .title-group h4:before{content:''; border-top:8px solid #700008; border-left:8px solid transparent; position:absolute; top:100%; left:0;}
.page-products .col-filter .group-item .title-filter{display:block; padding-bottom:10px; border-bottom:1px solid var(--color-border); margin-bottom:15px; position:relative;}
.page-products .col-filter .group-item .title-filter:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border)}
.page-products .col-filter .group-item .title-filter span{font-weight:900; color:#000; font-size:16px; text-transform:uppercase; letter-spacing:1px;}
.page-products .col-filter .group-item .title-filter .nav-all{float:right; color:#000; position:relative; padding-right:25px; transition:.3s;}
.page-products .col-filter .group-item .title-filter .nav-all:after{font-family: "Font Awesome 5";font-weight: 900; content: "\f0da"; position:absolute; top:2px; right:0; font-size:12px; padding-left:1px; width:18px; height:18px; line-height:18px; border-radius:50%; text-align:center; background:var(--color-border); transition:.3s;}
.page-products .col-filter .group-item .title-filter .nav-all:hover{color:var(--color2)}
.page-products .col-filter .group-item .title-filter .nav-all:hover:after{background:var(--color2); color:#fff}
.page-products .col-filter .group-item:last-of-type{margin-bottom:0;}
.page-products .col-products{width:calc(100% - 290px); float:right;}
.page-products .col-products .head-products{width:100%; float:left; position:relative;}
.page-products .col-products .head-products h3{margin:0; padding:0; font-weight:bold; font-size:22px; float:left;}
.page-products .col-products .body-products{width:100%; float:left; position:relative; padding-top:15px;}
.page-products .col-products .foot-products{width:100%; float:left; margin-top:30px;}


/* Bar list */
.page-products .col-products .head-col{width:100%; float:left; position:relative; display:table;}
.page-products .col-products .head-col .info{display:table-cell; vertical-align:top;}
.page-products .col-products .head-col .info h3{margin:0; display:block; color:#000; font-weight:500; font-size:22px; text-transform:capitalize}
.page-products .col-products .head-col .info .total{display:block; clear:both; padding-top:3px; }
.page-products .col-products .head-col .info .total b{padding-right:5px; color:#000; font-size:16px;}
.page-products .col-products .head-col .info .total span{font-weight:500; color:rgba(0,0,0,.7); font-size:14px;}
.page-products .col-products .head-col .info.search h3{font-weight:normal; font-size:20px;}
.page-products .col-products .head-col .info.search h3 b{color:var(--color3); font-size:22px;}
.page-products .col-products .head-col .toolbar{display:table-cell; vertical-align:bottom; text-align:right;}

@media (max-width:767px){
    .page-products .col-products{width:calc(100% + 30px); margin-right:-15px; padding-bottom:20px;}
    .page-products .col-products .head-col{position:fixed; top:65px; height:50px; width:100%; left:0; background:#fff; z-index:20;box-shadow: 0 2px 3px rgba(0, 0, 0, .05), 0 1px rgba(0, 0, 0, .04);}
    .page-products .col-products .head-col .info{padding: 0 15px; float: left;}
    .page-products .col-products .head-col .info h3{line-height:50px; float:left; font-size:16px; text-transform:uppercase; font-weight:900;}
    .page-products .col-products .head-col .info .total{float:left; clear:initial; display:none;}
    .page-products .col-products .head-col .toolbar{padding:0; vertical-align:middle}
    .page-products .col-products .head-col .nav-openPanelFilter{position:absolute; font-size:16px; color:var(--color3); line-height:32px; width:32px; top:9px; right:9px; box-shadow: 0 0 0 1px var(--color-border); text-align:center; border-radius:4px;}
    ul.list-product{border:none; border-radius:0;}
}

@media (min-width:768px) and (max-width:991px){
    .page-products .col-products{width:100%;padding:10px 0 0 0;}
}


.dropSort{float:right; position:relative; min-width:165px;}
.dropSort .nav-drop{border-radius:7px; height:40px; line-height:41px; display:block; box-shadow: 0 0 0 1px var(--color-border); font-size:14px; padding: 0 30px 0 15px; position:relative; transition:.3s; text-align:left; }
.dropSort .nav-drop:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f0d7"; font-size:12px; position:absolute; right:12px;}
.dropSort.show .nav-drop{box-shadow:inset 0 0 0 1px var(--color2);}
.dropSort.show .nav-drop:before{content: "\f0d8";}
.dropSort .dropdown-menu{display:block; transform:initial!important; top:100%!important; margin-top:-10px; padding: 10px 0; border:none; border-radius:7px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 10px rgba(0,0,0,.1); opacity:0; visibility:hidden; pointer-events:none; transition:.3s; z-index:5;}
.dropSort.show .dropdown-menu{margin-top:5px; opacity:1; visibility:initial; pointer-events:initial}
.dropSort .dropdown-menu li{width:100%; float:left; position:relative;}
.dropSort .dropdown-menu li a{font-size:14px; color:#000; text-decoration:none; padding: 6px 20px; display:block; transition:.3s;}
.dropSort .dropdown-menu li a:hover,
.dropSort .dropdown-menu li a.active{color:var(--color2)}

@media (max-width:767px){
    .dropSort{margin-right:50px; min-width:120px;}
    .dropSort .nav-drop{height:34px; line-height:35px; background:var(--color-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
}


.nav-filterProducts{border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); height:40px; line-height:41px; display:inline-block; background:#fff; font-size:14px; padding: 0 45px 0 15px; position:relative; transition:.3s; margin-right:10px; }
.nav-filterProducts:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f1de"; font-size:16px; position:absolute; right:15px; opacity:.5}
.viewMode{display:block; position:relative; height:40px; float:right}
.viewMode a{display:flex; float:left; margin-left:10px; height:40px; width:40px; align-items:center; justify-content:center; color:rgba(0,0,0,.3); transition:.3s; background:#fff; border-radius:7px; box-shadow:inset 0 0 0 1px var(--color-border)}
.viewMode a:hover{color:var(--color2)}
.viewMode a.active{color:var(--color2); cursor:default; box-shadow:inset 0 0 0 1px var(--color2);}

@media (max-width:767px){
    .viewMode{display:none;}
    .nav-openFilter{width: calc(50% - 7px); background:#e9eef3; padding: 0 0 0 10px; height:36px; line-height:36px; text-align:left; display:block; color:#000; border-radius:5px; float:right; position:relative; }
    .nav-openFilter:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f1de"; font-size:16px; position:absolute; right:15px; opacity:.5}
}
@media (min-width:768px){
    
}

/* About Brand  */
.wrap-brand{width:100%; float:left;position:relative; border:1px solid var(--color-border); border-radius:10px; margin-bottom:25px; padding:20px; }
.wrap-brand .wrap-logo{width:150px; float:left; position:relative; margin: 0 20px 5px 0;}
.wrap-brand .wrap-logo:before{content:''; padding-top:50%; display:block;}
.wrap-brand .wrap-logo .inner{width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;}
.wrap-brand .wrap-logo .inner img{max-width:100%; max-height:100%; object-fit:cover;}
.wrap-brand .wrap-info{width:calc(100% - 170px); position:relative; float:right; height:110px; overflow:hidden;}
.wrap-brand .wrap-info .detail{width:100%; float:left; position:relative;}
.wrap-brand .wrap-info h3{font-weight:bold; font-size:22px; margin:0 0 5px 0;}
.wrap-brand .wrap-info .inner{font-size:15px; line-height:24px;}
.wrap-brand .wrap-more{width:calc(100% - 30px); height:40px; border-radius: 0; position:absolute; left:15px; bottom:30px; text-align:center; background-image: linear-gradient(rgba(0,0,0,0) 10%, #ffffff); box-shadow: 0 15px #fff;}
.wrap-brand .wrap-more a{display:inline-block; padding: 0 15px; line-height:35px; text-align:center; width: 160px; margin-left:-80px; margin-top:15px; top:100%; position:absolute; left:50%; height:34px; border-radius:17px; font-weight:500; box-shadow: 0 0 0 1px var(--color-border); z-index:3; background:#fff;}

@media (max-width:767px){
    .wrap-brand{border:none; margin-bottom:0; border-radius:0; border-bottom:1px solid var(--color-border); padding: 20px 15px;}
    .wrap-brand .wrap-logo{margin: 0 10px 0 0}
}

#myModal-Brand .modal-header{display:table; padding: 30px 30px 20px 30px; position:relative;}
#myModal-Brand .modal-header:after{content:''; width:calc(100% - 60px); height:1px; background:var(--color-border); position:absolute; bottom:0; left:30px; display:block}
#myModal-Brand .modal-header .wrap-logo{width: 120px;position:relative; display:table-cell;}
#myModal-Brand .modal-header .wrap-logo:before{content:''; padding-top:50%; display:block;}
#myModal-Brand .modal-header .wrap-logo .inner{width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;}
#myModal-Brand .modal-header .wrap-logo .inner img{max-width:100%; max-height:100%; object-fit:cover;}
#myModal-Brand .modal-header .wrap-info{position:relative; display:table-cell; vertical-align:middle; padding-left:15px;}
#myModal-Brand .modal-header .wrap-info h3{font-size:22px; font-weight:bold; color:#000; display:block; width:100%; float:left; margin:0 0 5px 0; }
#myModal-Brand .modal-header .wrap-info span{font-weight:500; font-size:15px;}
#myModal-Brand .modal-header .wrap-info span:before{content:'Quốc gia:'; font-weight:normal; padding-right:5px; opacity:.75}
#myModal-Brand .nav-close{width:36px; height:36px; position:absolute; top:20px; right:20px; background:rgba(0,0,0,.05); color:var(--color1); margin:0; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:1; z-index:5;}
#myModal-Brand .modal-body{padding:20px 30px 30px 30px; float:left; position:relative; font-size:15px; line-height:24px; color:#000;}
#myModal-Brand .modal-body img{display:block; max-width:100%!important; height:auto!important; border-radius:7px;}



ul.catalog-filter{margin:0; padding:0; list-style:none; width:100%;}
ul.catalog-filter li{width:100%; float:left; position:relative;}
ul.catalog-filter li a{text-decoration:none; color:#000; font-size:16px; position:relative; padding:6px 20px 6px 25px; display:block; font-weight:500; }
ul.catalog-filter li a:before{content:''; width:12px; height:12px; margin-top:-7px; border:3px solid rgba(0,0,0,.15); border-radius:0px; display:block; position:absolute; top:50%; left:0;}
ul.catalog-filter li a:hover,
ul.catalog-filter li a.current{color:var(--color2)}
ul.catalog-filter li a.current:before{border-color:var(--color2)}

ul.check-filter{margin:0; padding:0; list-style:none; width:100%; float:left; position:relative;}
ul.check-filter li{width:100%; float:left; position:relative; font-size:15px; padding: 6px 0 6px 25px; cursor:pointer }
ul.check-filter li:before{content:''; width:16px; height:16px; line-height:14px; margin-top:-9px; text-align:center; border:1px solid rgba(0,0,0,.15); border-radius:2px; position:absolute; left:0; top:50%;}
ul.check-filter li.checked{color:var(--color2)}
ul.check-filter li.checked:before{border-color:var(--color2);font-family: "Font Awesome 5"; font-size:10px; padding-left:1px;  font-weight:900;content: "\f00c"; background:var(--color2); color:#fff;}


.wrap-sort{float:right;}
.wrap-sort label{margin:0; float:left; margin-right:10px; line-height:32px; font-size:14px; opacity:.75}
.dropdown-filter{float:right; position:relative;}
.dropdown-filter .nav-drop{line-height:30px; height:32px; border:1px solid rgba(0,0,0,.1); border-radius:16px; padding: 0 20px 0 10px; display:block; width:130px; color:#000; text-decoration:none; position:relative; }
.dropdown-filter .nav-drop:after{font-family: "Font Awesome 5"; font-size:12px; content: "\f0d7"; position:absolute; top:0; right:10px; font-weight:900;}
.dropdown-filter .dropdown-menu{width:100%; min-width:initial; padding: 10px 0; margin:0; border-radius:7px; border:none; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 10px rgba(0,0,0,.05) }
.dropdown-filter .dropdown-menu a{text-decoration:none; color:#000; clear:both; display:block; font-size:14px; padding:6px 15px; transition:.3s; }
.dropdown-filter .dropdown-menu a:hover{color:var(--color1); font-weight:500; padding-left:25px;}

.filter-selected{width:100%; float:left; position:relative;}
.filter-selected .item{display:inline-block; float:left; margin-top:15px; border:1px solid rgba(0,0,0,.1); line-height:28px; height:30px; border-radius:15px; background:#f3f3f6; padding: 0 32px 0 10px; position:relative; margin-right:10px;}
.filter-selected .item span{font-size:13px; font-weight:500;}
.filter-selected .item a{position:absolute; top:0; right:0px; color:#ec1f26; text-decoration:none; width:30px; text-align:center; line-height:29px;}




@media (max-width:767px) {
    .page-products{padding-top:50px; padding-bottom:85px!important;}
    .page-products .col-products .body-products{padding-top:0;}
   .wrap-sort{float:left; margin:10px 0 0 0!important;  width:calc(50% - 5px)!important;}
   .wrap-sort .dropdown-filter,
   .wrap-sort .dropdown-filter .nav-drop{width:100%;}
   .nav-panelRight{top:38px!important; width:calc(50% - 5px)!important;}
   .filter-selected{display:none;}

   
  
}

@media (min-width:768px) and (max-width:991px) {
  .page-products .col-filter{display:none;}
}

@media (max-width:991px) {
  .page-products{padding-bottom:0px; clear:both;}
  .nav-panelRight{line-height:30px; height:32px; position:absolute; top:0; right:0; border:1px solid rgba(0,0,0,.1); border-radius:16px; padding: 0 15px 0 15px; display:block; width:100px; color:#000;text-decoration:none!important; color:#000!important}
  .nav-panelRight:after{font-family: "Font Awesome 5"; font-weight: 900; font-size:12px; content: "\f0b0"; float:right; opacity:.7}
  .wrap-sort{margin-right:110px;}
  .wrap-sort label{display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
    .page-products .col-filter{width:250px}
    .page-products .col-products{width:calc(100% - 250px); padding-left:25px;}
   
}

/* List Products */

ul.list-product{width:100%; margin-top:0; box-shadow: 0 0 0 1px var(--color-border); border-radius:10px;  }
ul.list-product li{margin: 0; box-shadow: 1px 1px var(--color-border)}

@media (max-width:767px){
    ul.list-product{width:100%; margin:0; box-shadow:none; box-shadow: 0 1px var(--color-border); border-radius:0; }
    ul.list-product li{-ms-flex: 0 0 50%;flex: 0 0 50%;max-width:50%;}
}

@media (min-width:768px) and (max-width:1199px) {
    ul.list-product li{-ms-flex: 0 0 33.3333333333%;flex: 0 0 33.3333333333%;max-width: 33.3333333333%;}
}

@media (min-width:1200px){
    ul.list-product li{-ms-flex: 0 0 25%;flex: 0 0 25%;max-width:25%;}
}