.search-page{padding-bottom:50px; background:var(--color-bg); padding-top:50px; width:100%; float:left;}
.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; }

/* Saerch */
.reSearch{width:500px; margin-left:-250px; float:left; position:absolute; left:50%; top:-160px; padding-left:105px; box-shadow: 0 0 0 5px rgba(0,0,0,.3); border-radius:20px; background:#fff; }
.reSearch .result{position:absolute; top:0; left:0; z-index:2; line-height:40px; padding-left:20px; padding-right:18px;}
.reSearch .result:before{content:''; width:1px; height:14px; margin-top:-7px; background:rgba(0,0,0,.5); position:absolute; right:0; top:50%;}
.reSearch .result:after{content:'kết quả'; padding-left:5px; opacity:.75}
.reSearch .result span{display:none;}
.reSearch .result b{color:#f44336; font-size:16px;}
.reSearch .wrap-search{float:right; position:relative; width:100%;}
.reSearch .wrap-search input[type="text"]{width:100%; border:none; height:40px; padding: 0 50px 0 20px; outline:none; background:none; font-weight:500; }
.reSearch .wrap-search .navSearch{width:80px; font-size:15px; color:#fff; line-height:34px; height:34px; border-radius:17px; font-weight:500; text-align:center; position:absolute; right:3px; top:3px; white-space:nowrap; background:var(--color1); box-shadow: inset 0 0 rgba(0,0,0,0); transition:.3s;}
.reSearch .wrap-search .navSearch:hover{box-shadow:inset 0 34px rgba(0,0,0,.2)}

@media (max-width:767px){
    body{padding-bottom:60px;}
    .reSearch{top:-160px; width:calc(100% - 30px); left:15px; margin-left:0;}
    .search-page{padding-bottom:20px;}
} 

@media (min-width:768px) and (max-width:991px) {
    
}


ul.list-product{width:calc(100% + 20px); margin:-20px 0 0 -10px; padding:0; list-style:none; }
ul.list-product li{ padding: 0 10px; position:relative; margin-top:20px; }
ul.list-product li .product-item .nav-catalog{display:none;}
ul.list-product li .product-item .name{margin-top:20px;}
ul.list-product li .product-item .price{padding: 0 25px}

@media (max-width:767px) {
    ul.list-product{width:100%; margin: -15px 0 0 0;}
    ul.list-product li{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-top:15px; padding: 0 0}
}
@media (min-width:768px) and (max-width:991px) {
    ul.list-product li{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
}

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

/* Info */

.resultTag{width:500px; margin-left:-250px; float:left; position:absolute; left:50%; top:-160px; padding-left:105px; box-shadow: 0 0 0 5px rgba(0,0,0,.3); border-radius:20px; background:#fff; }
.resultTag .result{position:absolute; top:0; left:0; z-index:2; line-height:40px; padding-left:20px; padding-right:18px;}
.resultTag .result:before{content:''; width:1px; height:14px; margin-top:-7px; background:rgba(0,0,0,.5); position:absolute; right:0; top:50%;}
.resultTag .result:after{content:'kết quả'; padding-left:5px; opacity:.75}
.resultTag .result span{display:none;}
.resultTag .result b{color:#f44336; font-size:16px;}
.resultTag .tagName{width:100%; float:left; position:relative; line-height:40px; padding-left:10px; font-weight:bold; padding-right:50px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.resultTag .tagName:before{content:'Từ khóa:'; padding-right:5px; opacity:.75; font-weight:normal}
.resultTag .tagName:after{font-family: "Font Awesome 5"; font-weight:400; content: "\f02b"; position:absolute; top:0; right:15px; font-size:16px; color:var(--color1)}

@media (max-width:767px){
    .resultTag{top:-160px; width:calc(100% - 30px); left:15px; margin-left:0;}
} 


ul.listInfo{width:calc(100% + 30px); margin:-30px 0 0 -15px; padding:0; list-style:none; float:left;}
ul.listInfo li{float:left; margin-top:30px; padding: 0 15px; position:relative; width:33.3333333333%; float:left; }
ul.listInfo li .wrap-attr{width:100%; float:left; position:relative; margin: 10px 0 10px 0}
ul.listInfo li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
ul.listInfo li .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
ul.listInfo li .wrap-attr .ele span{opacity:.75}
ul.listInfo li .wrap-attr .ele:first-child:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color1); position:absolute; right:-18px; top:8px;}
ul.listInfo li .inner{width:100%; float:left; position:relative;}
ul.listInfo li .wrap-img{width:100%; position:relative; float:left;}
ul.listInfo li .wrap-img:before{content:''; padding-top:70%; display:block;}
ul.listInfo li .wrap-img a{width:100%; float:left; height:100%; display:block; position:absolute; top:0; left:0; border-radius: 24px 24px 0 24px; overflow:hidden;}
ul.listInfo li .wrap-img a img{width:inherit; height:inherit; object-fit:cover; max-height:100%; max-width:100%; transition:.3s;}
ul.listInfo li .wrap-img a:before{content:''; width:100px; height:100px;  bottom:-4px; right:-4px; background:url(../Default/LP-clip-angle-rb-bg.svg) no-repeat 0 0; background-size: 100% auto; position:absolute; z-index:3;}
ul.listInfo li .wrap-img a:after{content:"\f178"; width:50px; height:50px; font-size:24px; color:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; background:var(--color2); border-radius:50%; position:absolute; z-index:4; right:0; bottom:0; font-family: "Font Awesome 5";  font-weight: 400; transition:.3s} 
ul.listInfo li:hover .wrap-img a img{transform:scale(1.1)}
ul.listInfo li:hover .wrap-img a:after{background:var(--color1); color:#fff;}
ul.listInfo li .wrap-info{display:block; float:left; width:calc(100%); padding:0; z-index:2; position:relative; margin-top:25px;}
ul.listInfo li .wrap-info a{text-decoration:none; color:#000; display:block; transition:.3s;}
ul.listInfo li .wrap-info h3{font-size:22px; font-weight:500; font-family: "Signika", sans-serif; margin:0;}
ul.listInfo li .wrap-info a:hover{color:var(--color1)}
ul.listInfo li .wrap-info p{width:100%; opacity:.75; float:left; font-size:16px; line-height:26px; padding-top:0px; color:#000; -webkit-line-clamp: 3; -webkit-box-orient: vertical;white-space: normal;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; }

@media (max-width: 767px){
    ul.listInfo li{width:100%; margin-top:15px;}
    ul.listInfo li .wrap-img a{border-radius:20px 20px 0 20px}
}

@media (min-width: 768px) and (max-width: 991px){
     ul.listInfo li{width:50%;}
     ul.listInfo li .wrap-img a{border-radius:20px 20px 0 20px}
}

@media (min-width: 992px) and (max-width: 1199px){
    ul.listInfo{width:calc(100% + 20px); margin:-20px 0 0 -10px;} 
    ul.listInfo li{padding: 0 10px}
    ul.listInfo li .wrap-img a{border-radius:20px 20px 0 20px}
}

@media (min-width: 1440px){
    
}