.download-page{width:100%; float:left; position:relative; color:#000}
.download-page .head-page{width:100%; float:left; position:relative;}
.download-page .head-page h4{float:left; font-weight:500; font-size:22px; display:block; margin:0; padding:0; }
.download-page .head-page .total{float:left; position:relative; font-size:16px; clear:left; width:100%; float:left;}
.download-page .head-page .total span{font-size:14px; padding-left:5px;}
.download-page .head-page .drop-filter{position:absolute; top:0; right:0;}
.download-page .head-page .drop-filter .nav-drop{width:100%; float:left; line-height:40px; border:1px solid var(--border-color); font-weight:500; color:#000; padding: 0 20px; border-radius:5px; width:180px;}
.download-page .head-page .drop-filter .nav-drop:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0d7"; font-size:14px; line-height:40px; position:absolute; top:0; right:10px;}
.download-page .head-page .drop-filter .dropdown-menu{border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 0 20px rgba(0,0,0,.07); border:none; min-width:180px}
.download-page .head-page .drop-filter .dropdown-menu a{display:block; color:#000; line-height:32px; padding: 0 20px; font-size:15px; transition:.3s;}
.download-page .head-page .drop-filter .dropdown-menu a:hover{color:var(--color2)}
.download-page .body-page{width:100%; float:left; position:relative;}

@media (max-width:767px){
    .download-page{padding-bottom:85px; padding-top:50px;}
    .download-page .head-page{position: fixed; top: 65px; width: 100%; left: 0; background: #fff; z-index: 2; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07);}
    .download-page .head-page h4{line-height: 50px; float: left; font-size: 16px;  text-transform: uppercase;  font-weight: 900; padding-left:15px;}
    .download-page .head-page .total{display:none;}
    .download-page .head-page .drop-filter{position:absolute; top:8px; right:9px; }
    .download-page .head-page .drop-filter .nav-drop{line-height:32px; padding-left:10px;}
    .download-page .head-page .drop-filter .nav-drop:after{line-height:32px;}
}

ul.list-download{margin: 20px 0 0 0; padding:0; list-style:none; width:100%; float:left; box-shadow: inset 0 0 0 1px var(--color-border); border-radius:7px; overflow:hidden; }
ul.list-download li{padding:20px 20px 145px 20px; position:relative; float:left; margin: 0; box-shadow: 1px 1px var(--color-border);}
ul.list-download li .wrap-img{width:100%; height:200px; float:left; position:relative; border-radius:5px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
ul.list-download li .wrap-img img{max-height:100%; max-width:100%; object-fit:cover;}
ul.list-download li .name{ margin-top:15px; font-size:15px; line-height:23px; font-weight:500;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; width:100%; float:left;}
ul.list-download li .wrap-info{width:calc(100% - 40px);float:left; position:absolute; left:20px; bottom:20px; }
ul.list-download li .wrap-info .item{width:100%; float:left; position:relative; font-size:14px; margin-top:4px;}
ul.list-download li .wrap-info .item span{opacity:.7}
ul.list-download li .wrap-info .item span:after{content:' :'; padding-right:5px;}
ul.list-download li .wrap-info .nav-download{ padding:0 15px; width:100%; background:rgba(0,0,0,.05); line-height:40px; text-align:left; color:var(--color2); font-weight:500; border-radius:5px; transition:.3s; margin-top:13px; display:block; float:left; position:relative;}
ul.list-download li .wrap-info .nav-download:hover{background:var(--color2); color:#fff;}
ul.list-download li .wrap-info .nav-download:before{content:'Tải miễn phí'}
ul.list-download li .wrap-info .nav-download:after{font-family: "Font Awesome 5"; font-size:16px; font-weight: 900; content: "\f34a"; position:absolute; top:0; right:15px;}
ul.list-download li.is-login .wrap-info .nav-download{color:var(--color3)}
ul.list-download li.is-login .wrap-info .nav-download:hover{color:#fff; background:var(--color3)}
ul.list-download li.is-login .wrap-info .nav-download:before{content:'Tải khi đăng nhập'}
ul.list-download li.is-login .wrap-info .nav-download:after{content: "\f30d";}

@media (max-width:767px){
    ul.list-download{border:none; width:calc(100% + 30px); margin-left:-15px; margin-top:0;}
    ul.list-download li{width:50%; padding:15px 15px 130px 15px;}
    ul.list-download li .wrap-img{height:150px;}
    ul.list-download li:nth-child(2n){box-shadow: 0 1px var(--border-color)}
    ul.list-download li .wrap-info{ left:15px; bottom:15px; width:calc(100% - 30px)}
    ul.list-download li .wrap-info .item{margin-top:5px;}
    ul.list-download li .wrap-info .nav-download{position:relative; width:100%; float:left; padding: 0 15px; display:flex; height:40px; line-height:40px; margin-top:10px;}
    ul.list-download li .wrap-info .nav-download i{font-size:16px; line-height:40px; float:right; position:absolute; top:0; right:15px; }
    ul.list-download li .wrap-info .nav-download span{padding:0; line-height:42px; font-size:14px; text-transform:initial } 
}

@media (min-width:768px) and (max-width:991px){
    ul.list-download li{width:33.333333333%;}
    ul.list-download li .wrap-img{height:150px;}
    ul.list-download li:nth-child(3n){box-shadow: 0 1px var(--border-color)}
}

@media (min-width:992px) and (max-width:1199px){
    ul.list-download li{width:33.333333333%;}
    ul.list-download li:nth-child(3n){box-shadow: 0 1px var(--border-color)}
}

@media (min-width:1200px) and (max-width:1439px){
    ul.list-download li{width:25%;}
    ul.list-download li:nth-child(4n){box-shadow: 0 1px var(--border-color)}
}

@media (min-width:1439px){
    ul.list-download li{width:20%;}
    ul.list-download li:nth-child(5n){box-shadow: 0 1px var(--border-color)}
}