.page-brand{}
.page-brand .head-brand{width:100%; float:left; position:relative; display:block; margin-bottom:15px; padding-right:300px; margin-top:10px;}
.page-brand .head-brand .info{display:block; vertical-align:top; float:left;}
.page-brand .head-brand .info h3{margin:0; display:block; color:#000; font-weight:500; font-size:22px; text-transform:capitalize}
.page-brand .head-brand .info .total{display:block; clear:both; padding-top:3px; }
.page-brand .head-brand .info .total b{padding-right:5px; color:#000; font-size:16px;}
.page-brand .head-brand .info .total span{font-weight:500; color:rgba(0,0,0,.7); font-size:14px;}
.page-brand .body-brand{width:100%; float:left; position:relative;}
.page-brand .body-brand .searchBrand{width: 285px; float:left; position:absolute; right:0; bottom:100%; margin-bottom:24px;}
.page-brand .body-brand .searchBrand:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f002"; width:40px; line-height:40px; font-size:16px; color:#000; text-align:center; position:absolute; right:0; top:0; opacity:.7  }
.page-brand .body-brand .searchBrand input[type="text"]{width:100%; height:40px; border:1px solid var(--color-border); border-radius:7px; outline:none; padding: 0 40px 0 15px; transition:.3s; font-size:15px;}
.page-brand .body-brand .searchBrand input[type="text"]:focus{border-color:var(--color2)}

@media (max-width:767px){
    .page-brand{padding-bottom:85px;}
    .page-brand .head-brand{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); margin:0;}
    .page-brand .head-brand .info .total{display:none;}
    .page-brand .head-brand .info h3{line-height: 50px;float: left;font-size: 16px;text-transform: uppercase;font-weight: 900; padding-left:15px; white-space:nowrap}
    .page-brand .body-brand{margin-top:50px; width:calc(100% + 30px); margin-left:-15px;}
    .page-brand .body-brand .searchBrand{position:relative;  bottom:initial; margin:0; width:100%; border-bottom:1px solid var(--color-border)}
    .page-brand .body-brand .searchBrand:after{line-height:45px;}
    .page-brand .body-brand .searchBrand input[type="text"]{border:none; height:45px;}
}

@media (min-width:768px) and (max-width:991px){
    .page-brand .head-brand{padding-right:220px;}
    .page-brand .body-brand .searchBrand{width:205px}
}

.dropCountry{float:right; min-width:165px; position:relative; margin-top:5px;}
.dropCountry:before{content:'Quốc gia'; position:absolute; right:100%; font-weight:500; line-height:40px; padding-right:10px; white-space:nowrap}
.dropCountry .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; }
.dropCountry .nav-drop:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f0d7"; font-size:12px; position:absolute; right:12px;}
.dropCountry.show .nav-drop{box-shadow:inset 0 0 0 1px var(--color2);}
.dropCountry.show .nav-drop:before{content: "\f0d8";}
.dropCountry .dropdown-menu{display:block; transform:initial!important; top:100%!important; left:initial!important; right:0!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;}
.dropCountry.show .dropdown-menu{margin-top:5px; opacity:1; visibility:initial; pointer-events:initial}
.dropCountry .dropdown-menu li{width:100%; float:left; position:relative;}
.dropCountry .dropdown-menu li a{font-size:14px; color:#000; text-decoration:none; padding: 6px 20px; display:block; transition:.3s;}
.dropCountry .dropdown-menu li a:hover,
.dropCountry .dropdown-menu li a.active{color:var(--color2)}

@media (max-width:767px){
    .dropCountry{ min-width:120px; position:absolute; top:3px; right:8px;}
    .dropCountry:before{line-height:34px;}
    .dropCountry .nav-drop{height:34px; line-height:35px; background:var(--color-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
}



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