.search-page{padding-bottom:50px;}
.search-page .head-search{ width:100%; float:left; position:relative; display:table; background:var(--color-bg); padding:10px 10px 10px 30px; margin-bottom:10px; border-radius:7px;}
.search-page .head-search .col-left{display:table-cell; position:relative; font-size:16px; font-weight:500; width:50%; vertical-align:middle}
.search-page .head-search .col-left b{background:#ffbd27; line-height:30px; border-radius:15px; height:30px; padding: 0 10px; margin: 0 5px; font-size:16px; display:inline-block; text-align:center; min-width:35px;}
.search-page .head-search .col-right{display:table-cell; position:relative; padding-left:20px;}
.search-page .head-search .col-right:before{content:''; width:1px; height:20px; margin-top:-10px; background:rgba(0,0,0,.1); position:absolute; top:50%; left:0;}
.search-page .head-search .col-right .re-search{width: 100%; position:relative;}
.search-page .head-search .col-right .re-search:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f002"; font-size:16px; line-height:42px; text-align:center; position:absolute; top:0; left:0; z-index:2; opacity:.3}
.search-page .head-search .col-right .re-search input[type='text']{width:100%; float:left; padding: 0 110px 0 30px; position:relative; height:42px; border:none; outline:none; background:rgba(0,0,0,.0); border-radius:3px; font-weight:bold; color:#000; font-size:16px;}
.search-page .head-search .col-right .re-search a{position:absolute; top:0; right:0;line-height:42px; background:var(--color2); color:#fff; padding: 0 10px; text-decoration:none; border-radius:5px; width: 100px; font-weight:500; text-align:center;}
.search-page .body-search{width:100%; float:left; position:relative; }


 ul.list-product {z-index:10;}

@media (max-width:767px) {
    .search-page{padding-bottom:100px;}
    ul.list-product{margin: -20px 0 0 -15px; width:calc(100% + 30px); border:none; border-bottom:1px solid var(--color-border)}
}

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

@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(4n){box-shadow: 0px 1px var(--color-border)}
}

@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(5n){box-shadow: 0px 1px var(--color-border)}
}

@media (min-width:1440px) {
    ul.list-product li{-ms-flex: 0 0 16.6666666666%; flex: 0 0 16.6666666666%;  max-width: 16.6666666666%;}
    ul.list-product li:nth-child(6n){box-shadow: 0px 1px var(--color-border)}
}

/* Video */

ul.list-video{margin:0 -10px 0 -10px; padding:0; list-style:none; clear:both; }
ul.list-video li{padding:0 10px; position:relative; margin-top:20px; }
ul.list-video li .inner{width:100%; float:left; position:relative; box-shadow: 0 0 0 1px var(--color-border); border-radius:7px; padding:15px; transition:.3s; }
ul.list-video li:hover .inner{box-shadow: 0 0 0 1px var(--color1), 0 0 20px rgba(0,0,0,.2); z-index:5; border-radius:7px;}
ul.list-video li .wrap-img{width:100%; float:left; position:relative; margin-bottom:15px;}
ul.list-video li .wrap-img:before{content:''; width:100%; display:block; padding-top:56.25%}
ul.list-video li .wrap-img:after{border-radius:50%; width:40px; height:40px; line-height:40px; margin:-20px 0 0 -20px; display:block; text-align:center; font-family:"Font Awesome 5"; content:"\f04b"; position:absolute; top:50%; left:50%; font-size:14px; padding-left:1px; z-index:3; background:#d91c2a; font-weight:900; color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 30px rgba(0,0,0,.7); transition:.3s; }
ul.list-video li:hover .wrap-img:before{opacity:0}
ul.list-video li:hover .wrap-img:after{transform:scale(1.2)}
ul.list-video li .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; border-radius:7px; overflow:hidden;}
ul.list-video li .wrap-img a img{width:inherit; height:inherit; object-fit:cover;}
ul.list-video li .lesson{background:var(--color2); position:absolute; top:-5px; right:25px; color:#fff; text-transform:uppercase; z-index:5; padding: 5px 0 0 0; width:48px; text-align:center; box-shadow: 0 10px 20px rgba(0,0,0,.5)}
ul.list-video li .lesson:before{content:''; border-bottom: 5px solid #074a29; border-left:5px solid transparent; position:absolute; top:0; right:100%;}
ul.list-video li .lesson:after{content:''; border-bottom: 5px solid #074a29; border-right:5px solid transparent; position:absolute; top:0; left:100%;}
ul.list-video li .lesson span{display:block; clear:both; font-size:9px; font-weight:bold;}
ul.list-video li .lesson b{margin:0; width:100%; float:left; position:relative;}
ul.list-video li .lesson b:before{content:''; border-top:7px solid var(--color2); border-left: 24px solid transparent; border-right: 24px solid transparent; position:absolute; top:100%; left:0;}
ul.list-video li .info{width:100%; float:left;}
ul.list-video li .info .date{float:left; position:relative; padding-left:18px; color:#9b9bb4; font-size:13px }
ul.list-video li .info .date:before{font-family:"Font Awesome 5"; content: "\f133"; font-weight:300; font-size:14px; position:absolute; left:0; top:-2px; color:var(--color1)}
ul.list-video li .info .time{float:left; position:relative; margin-left:30px; padding-left:18px; color:#9b9bb4; font-size:13px;}
ul.list-video li .info .time:before{font-family:"Font Awesome 5"; content: "\f017"; font-weight:300; font-size:14px; position:absolute; left:0; top:-2px; color:var(--color1)}
ul.list-video li .info .name{text-decoration:none; color:#000; display:block; clear:both;}
ul.list-video li .info .name h4{font-size:16px; font-weight:500; transition:.3s; line-height:23px; margin:7px 0 0 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; float:left; color:#000;}
ul.list-video li .info .name:hover h4{color:var(--color1)}
ul.list-video li .listSocial{ display:none;}

@media (max-width:767px) {
    ul.list-video{clear:both; margin:0; padding:0;}
    ul.list-video li{padding: 0px; box-shadow:none!important;  min-height:initial; margin-top:20px; }
    ul.list-video li .inner{box-shadow:none!important; padding:0;}
    ul.list-video li .wrap-img{width: 140px; margin:0;}
    ul.list-video li .wrap-img:after{width:32px; height:32px; margin: -16px 0 0 -16px; line-height:32px; font-size:12px;}
    ul.list-video li .wrap-img .avatar{overflow:hidden; border-radius:7px;}
    ul.list-video li .info{width:calc(100% - 155px); float:right;}
    ul.list-video li .info .date,
    ul.list-video li .info .time{display:none;}
    ul.list-video li .info h4{-webkit-line-clamp: 6; margin-top:-5px; line-height:22px; font-size:15px;}
    ul.list-video li .lesson{display:none;}
}

@media (min-width:768px) and (max-width:991px) {
    ul.list-video li{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}

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

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

/* Products */

ul.list-products{margin: 0 -10px; padding:0; list-style:none; clear:both;}
ul.list-products li{padding: 0 10px; position:relative; z-index:1; width:20%; float:left; margin-top:20px;}
ul.list-products li:hover{z-index:2;}
ul.list-products li .item-product:before{border-radius:7px;}

@media (max-width:767px) {
    ul.list-products{margin: 0 -7px;}
    ul.list-products li{width:50%; padding: 0 7px; margin-top:15px;}
    ul.list-products li .item-product{padding:10px 10px 50px 10px;  box-shadow:0 0 0 1px #e4e5ee; border-radius:7px;}
    ul.list-products li .item-product:before{display:none;}
    ul.list-products li .item-product .nav-AddCart{opacity:1; visibility:visible; width:calc(100% - 20px); left:10px; bottom:10px; line-height:32px; height:32px; }
}

@media (min-width:768px) and (max-width:991px) {
    ul.list-products{margin: 0 -7px;}
    ul.list-products li{width:33.333333333%; padding: 0 7px; margin-top:15px;}
    ul.list-products li .item-product{padding:10px 10px 50px 10px;  box-shadow:0 0 0 1px #e4e5ee; border-radius:7px;}
    ul.list-products li .item-product:before{display:none;}
    ul.list-products li .item-product .nav-AddCart{opacity:1; visibility:visible; width:calc(100% - 20px); left:10px; bottom:10px; line-height:32px; height:32px; }
}

@media (min-width:992px) and (max-width:1199px) {
    ul.list-products li{width:25%}
}

@media (min-width:1200px) and (max-width:1439px) {
    ul.list-products li{width:25%}
}






@media (max-width:767px) {
    .search-page .head-search{width:calc(100% + 30px); margin: 0px 0 15px -15px; border-radius:0; padding: 15px; display:block; text-align:center; }
    .search-page .head-search .col-left{display:block; width:100%; font-size:15px; padding-bottom:10px;}
    .search-page .head-search .col-right{width:100%; display:block; padding:0;}
    .search-page .head-search .col-right:before{display:none; padding:0;}
    .search-page .head-search .col-right .re-search{float:left; background:rgba(0,0,0,.05); border-radius:5px; width:100%;}
    .search-page .head-search .col-right .re-search:before{left:10px;}
    .search-page .head-search .col-right .re-search input[type='text']{padding: 0 100px 0 40px;}
    .search-page .head-search .col-right .re-search a{height:32px; line-height:32px; top:5px; right:5px; width:90px;}
    
}
@media (min-width:768px) and (max-width:991px) {
    .search-page{padding-bottom:0;}
}






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

.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:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.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){
    .barInfo{position:fixed; top:65px; width:100%; left:0; background:#fff; z-index:20; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07)}
    .barInfo .info{padding: 0 15px; float:left;}
    .barInfo .info h3{line-height:50px; float:left; font-size:16px; text-transform:uppercase; font-weight:900;}
    .barInfo .info .total{float:left; clear:initial; display:none;}
    .barInfo .info .total span{display:none;}
    .barInfo .toolbar{display:none;}
    .barInfo .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;}
}

/* Search info */
.search-tagInfo-page ul.list-info{margin:20px 0 0 0; padding:0; list-style:none; border:1px solid var(--border-color); border-radius:7px; width:100%; float:left; }
.search-tagInfo-page ul.list-info li{padding:20px ; position:relative; margin:0; box-shadow: 1px 1px var(--border-color);}
.search-tagInfo-page ul.list-info li .inner{width:100%; float:left; position:relative;  border-radius:7px; padding:0; transition:.3s; }
.search-tagInfo-page ul.list-info li:hover .inner{ z-index:5; border-radius:7px;}
.search-tagInfo-page ul.list-info li .wrap-img{width:100%; float:left; position:relative;} 
.search-tagInfo-page ul.list-info li .wrap-img:before{content:''; display:block; padding-top:67%;}
.search-tagInfo-page ul.list-info li .wrap-img a{width:100%; height:100%; display:block; position:absolute; overflow:hidden; border-radius:7px; top:0; left:0; text-align:center;}
.search-tagInfo-page ul.list-info li .wrap-img a img{object-fit:cover; max-width:100%; max-height:100%;}
.search-tagInfo-page ul.list-info li h3{margin:15px 0 0 0; font-size:16px; font-weight:500; line-height:22px; padding:0; float:left; clear:both ;display:block; width:100%; }
.search-tagInfo-page ul.list-info li h3 a{text-decoration:none; color:#000; transition:.3s; }
.search-tagInfo-page ul.list-info li h3 a:hover{color:var(--color2)}
.search-tagInfo-page ul.list-info li ul.listSocial{display:none;}
.search-tagInfo-page ul.list-info li p{width:100%; margin:0; padding:0; line-height:22px; float:left; padding-top:15px;}

@media (max-width:767px) {
    .search-tagInfo-page{padding-bottom:85px; padding-top:50px;}
    .search-tagInfo-page ul.list-info{width:calc(100% + 30px); margin:0 0 0 -15px; border:none; border-radius:0;}
    .search-tagInfo-page ul.list-info li{padding:15px;}
    .search-tagInfo-page ul.list-info li:first-child{margin-top:0;}
    .search-tagInfo-page ul.list-info li .inner{box-shadow:none!important; padding:0;}
    .search-tagInfo-page ul.list-info li .wrap-img{width:150px; margin: 0 15px 10px 0;}
    .search-tagInfo-page ul.list-info li h3{float:initial; margin:0; clear:initial; width:initial}
    .search-tagInfo-page ul.list-info li p{width:inherit; display:inherit; float:initial; margin-top:0; padding-top:5px;}
    .search-tagInfo-page ul.list-info li:last-child{ border:none;}
}

@media (min-width:768px) {
    .search-tagInfo-page ul.viewlist{clear:both; float:left; width:100%;}
    .search-tagInfo-page ul.viewlist>li{-ms-flex: 0 0 100%; flex: 0 0 100%;  max-width: 100%; margin:0; border-top:1px solid var(--color-border);}
    .search-tagInfo-page ul.viewlist>li:first-child{border:none;}
    .search-tagInfo-page ul.viewlist li .inner{height:initial!important; box-shadow:none!important; padding:0;}
    .search-tagInfo-page ul.viewlist li .wrap-img{width:290px; float:left; margin-right:20px;}
    .search-tagInfo-page ul.viewlist li h3{float:initial; margin-top:0; clear:initial}
    .search-tagInfo-page ul.viewlist li ul.listSocial{display:inline-block; width:initial; float:initial; margin:15px 0 0 0;}
    .search-tagInfo-page ul.viewlist li ul.listSocial li{width:initial; height:initial; float:left;  margin:0 10px 0 0; padding:0;}
    .search-tagInfo-page ul.viewlist li ul.listSocial li .link-main{text-align:left; display:flex; width:initial; height:30px; padding: 0 10px;}
    .search-tagInfo-page ul.viewlist li ul.listSocial li .link-main i{line-height:30px;}
    .search-tagInfo-page ul.viewlist li ul.listSocial li .link-main span{line-height:30px; padding-left:10px;}
    .search-tagInfo-page ul.viewlist li p{float:initial}
}


ul.list-info{margin:20px -10px 0 -10px; padding:0; list-style:none; position:relative; z-index:2;  }
ul.list-info li{ position:relative; margin: 0 0; padding:0px 0px; width:calc(25% - 20px); margin:0px 10px 20px 10px; }
ul.list-info li .inner{ float:left; position:relative;  padding:0; transition:.3s;   border-radius:0; }
ul.list-info li .wrap-img{width:100%; float:left; position:relative; margin-bottom:15px;} 
ul.list-info li .wrap-img:before{content:''; display:block; padding-top:66.66666666666%;}
ul.list-info li .wrap-img a{width:100%; height:100%; display:block; position:absolute; overflow:hidden; border-radius:7px; top:0; left:0; text-align:center;}
ul.list-info li .wrap-img a img{object-fit:cover; width:100%; height:100%;}
ul.list-info li .wrap-info{width:100%; float:right; position:relative;}
ul.list-info li .wrap-info h3{margin:0 0 0; font-size:17px; font-weight:500; line-height:22px; padding:0; float:left; clear:both ;display:block; width:100%; }
ul.list-info li .wrap-info h3 a{text-decoration:none; color:#000; transition:.3s; }
ul.list-info li .wrap-info h3 a:hover{color:var(--color2)}
ul.list-info li .wrap-info .wrap-attr{width:100%; float:left; position:relative; margin: 10px 0 0px 0; top:0; left:0; color:#000}
ul.list-info li .wrap-info .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
ul.list-info li .wrap-info .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
ul.list-info li .wrap-info .wrap-attr .ele span{opacity:.75}
ul.list-info li .wrap-info .wrap-attr .ele:first-child:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color2); position:absolute; right:-18px; top:8px;}
ul.list-info li .wrap-info .wrap-attr .ele:last-of-type{margin-right:0;}
ul.list-info li p{width:100%; margin:0; padding:0; line-height:24px; float:left; padding-top:10px; color:#000; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;}

@media (max-width: 767px){
    ul.list-info{margin-top:0;}
    ul.list-info li{width:calc(100% - 20px); margin: 0 10px;}
    ul.list-info li:not(:first-child) .inner{border-top: 1px solid var(--color-border); padding: 20px 0 60px 0;}
    ul.list-info li:not(:first-child) .wrap-img{width: 130px; float: left; margin-right: 15px;}
    ul.list-info li:not(:first-child) .wrap-info{width: initial !important;  float: initial !important; position: initial !important;}
    ul.list-info li:not(:first-child) .wrap-info h3{float:initial; clear:initial; }
    ul.list-info li:not(:first-child) .wrap-info .wrap-attr{position: absolute; top:initial; left: 0px; bottom: 15px; background: rgba(0, 0, 0, .05); border-radius: 5px;padding: 5px 10px;}
    ul.list-info li:not(:first-child) p{width:initial; float:initial; overflow:initial; display:initial}
    ul.list-info li:first-child .inner{border:none; padding-top:5px; padding-bottom:15px;}
}


@media (min-width: 678px) and (max-width: 991px){
    ul.list-info li{width:calc(50% - 20px);}
}

@media (min-width: 992px) and (max-width: 1199px){
    ul.list-info li{width:calc(33.3333333333333% - 20px);}
}