.service-page{width:100%; float:left; position:relative;}

/* Search */
.searchInfo{width:100%; float:left; position:relative; margin-bottom:30px;background:var(--color-bg); padding:5px; border-radius:7px; }
.searchInfo label{float:left; line-height:40px; text-transform:uppercase; font-weight:900; font-size:17px; color:#000; margin:0; padding-left:10px;}
.searchInfo .wrap-search{float:right; position:relative; width:350px;}
.searchInfo .wrap-search input[type="text"]{width:100%; border:none; height:40px; border-radius:5px; padding: 0 50px 0 10px; outline:none;}
.searchInfo .wrap-search: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  }

@media (max-width:767px){
    .service-page{padding-top:50px; padding-bottom:85px;}
    .searchInfo{background:none; margin-bottom:0; width:calc(100% + 30px); margin-left:-15px; padding:0 }
    .searchInfo label{display:none;}
    .searchInfo .wrap-search{width:100%; line-height:50px!important;}
    .searchInfo .wrap-search input[type="text"]{height:50px; background:var(--color-bg)}
    .searchInfo .wrap-search:after{height:50px; line-height:50px;}
} 


.col-left-page{width:calc(100% - 360px); display:block; float:right; position:relative; padding:0px 0 0px 0px;}
.col-left-page .title-groupPost{width:calc(100% + 20px); margin-bottom:10px;}
.col-right-page{width:320px; padding:0px 0px 20px 0px; float:left; position:relative;}
.col-right-page .group-catalog{width:100%; float:left; position:relative; margin-bottom:40px;}
.col-right-page .group-catalog .title{display:block; font-weight:900; color:#000; font-size:16px; padding-bottom:10px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border-color); margin-bottom:15px; position:relative;}
.col-right-page .group-catalog .title:before{content:''; width:12px; height:12px; background:#fff; transform:rotate(45deg); display:block; position:absolute; left:20px; bottom:-6px; border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color)}
.col-right-page .group-catalog ul{margin:0; padding:0; list-style:none; width:100%;}
.col-right-page .group-catalog ul li{width:100%; float:left; position:relative;}
.col-right-page .group-catalog ul li a{text-decoration:none; color:#000; font-size:16px; position:relative; padding:6px 20px 6px 25px; display:block; font-weight:500; }
.col-right-page .group-catalog ul 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;}
.col-right-page .group-catalog ul li a:hover,
.col-right-page .group-catalog ul li a.current{color:var(--color2)}
.col-right-page .group-catalog ul li a.current:before{border-color:var(--color2)}


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

@media(max-width: 767px){
    .col-left-page{width:100%;}
    .col-right-page{display:none;}
    .barInfo{display:block; position:fixed; top:65px; height:50px; left:0; width:100%; box-shadow: 0 1px rgba(0,0,0,.07), 0 0 5px rgba(0,0,0,.07); z-index:10; background:#fff;}
    .barInfo h3{font-size:16px; font-weight:900; text-transform:uppercase; line-height:50px; padding-left:15px;}
    .barInfo .total{display:none;}
}

@media (min-width: 768px) and (max-width: 991px){
    .col-left-page{width:100%;}
    .col-right-page{display:none;}
    .barInfo{display:block;}
}


ul.list-info{margin:0px -10px 0 -10px; padding:0; list-style:none; position:relative; z-index:2;  }
ul.list-info li{ position:relative; margin: 0 0; padding:0px 10px; }
ul.list-info li .inner{width:100%; float:left; position:relative;   padding:20px 0; transition:.3s;  border-top:1px solid var(--color-border) ; border-radius:0; }
ul.list-info li .wrap-img{width:220px; float:left; position:relative;} 
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:calc(100% - 240px); 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;}
ul.list-info li .listSocial{display:none;}

@media (max-width: 767px){
    ul.list-info{padding-top:0px;}

    ul.list-info li:first-child .inner{border-top:none;}
    ul.list-info li:first-child .wrap-img{width:100%;}
    ul.list-info li:first-child .wrap-info{width:100%; padding-top:15px;}
    ul.list-info li:first-child .wrap-info h3{font-size:18px; line-height:26px; font-weight:900;}

    ul.list-info li:not(:first-child) .inner{padding-bottom:60px; }
    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; width:initial; display:initial; clear:initial; font-size:16px;}
    ul.list-info li:not(:first-child) .wrap-info p{float:initial; }
    ul.list-info li:not(:first-child) .wrap-attr{width:100%; float:left; position:relative; margin: 10px 0 0px 0; top:initial; color:#000; position:absolute; left:0px; bottom:15px; background:rgba(0,0,0,.05); border-radius:5px; padding:5px 10px;}
}

@media (min-width: 768px) and (max-width: 1439px){
    ul.list-info li:first-child{width:100%; float:left;}
    ul.list-info li:first-child .inner{padding:0 0 30px 0; border:none;}
    ul.list-info li:first-child .wrap-img{width:100%;}
    ul.list-info li:first-child .wrap-info{width:100%; padding-top:25px;}
    ul.list-info li:first-child .wrap-info h3{font-size:22px; font-weight:900; line-height:28px;}
    ul.list-info li:first-child .wrap-info p{font-size:17px;}

    ul.list-info li:nth-child(2),
    ul.list-info li:nth-child(3){width:50%; float:right; }
    ul.list-info li:nth-child(2) .inner{border-top:0; padding-top:0;}
    ul.list-info li:nth-child(2) .wrap-img{width:100%;}
    ul.list-info li:nth-child(2) .wrap-info{width:100%; padding-top:15px;}
    ul.list-info li:nth-child(2) .wrap-info p{display:none;}
    ul.list-info li:nth-child(3) .inner{border:none; padding-top:0;}
    ul.list-info li:nth-child(3) .wrap-img{width:100%;}
    ul.list-info li:nth-child(3) .wrap-info{width:100%; padding-top:15px;}
    ul.list-info li:nth-child(3) .wrap-info p{display:none;}
}


@media (min-width: 1440px){
    ul.list-info li:first-child{width:66.666666666%; float:left;}
    ul.list-info li:first-child .inner{padding:0 0 30px 0; border:none;}
    ul.list-info li:first-child .wrap-img{width:100%;}
    ul.list-info li:first-child .wrap-info{width:100%; padding-top:25px;}
    ul.list-info li:first-child .wrap-info h3{font-size:22px; font-weight:900; line-height:28px;}
    ul.list-info li:first-child .wrap-info p{font-size:17px;}

    ul.list-info li:nth-child(2),
    ul.list-info li:nth-child(3){width:33.3333333333%; float:right; padding-left:20px; }
    ul.list-info li:nth-child(2) .inner{border-top:0; padding-top:0;}
    ul.list-info li:nth-child(2) .wrap-img{width:100%;}
    ul.list-info li:nth-child(2) .wrap-info{width:100%; padding-top:15px;}
    ul.list-info li:nth-child(2) .wrap-info p{display:none;}
    ul.list-info li:nth-child(3) .inner{border:none; padding-top:0;}
    ul.list-info li:nth-child(3) .wrap-img{width:100%;}
    ul.list-info li:nth-child(3) .wrap-info{width:100%; padding-top:15px;}
    ul.list-info li:nth-child(3) .wrap-info p{display:none;}
}