.page-groupInfo{padding-bottom:50px; clear:both;}
.head-group{}
.head-group .col-right{width:290px; float:right; position:relative;}

/* Saerch */
.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){
    .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;}
} 

.slider-group{width:100%; display:none; float:left; position:relative; height: 60px; margin: 30px 0 0 0; padding: 0 0 0 110px; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border)}
.slider-group .title-slider{ line-height:60px; position:absolute; top:0; left:0; padding-left:35px;}
.slider-group .title-slider span{font-size:14px; font-weight:500;}
.slider-group .title-slider i{position:absolute; top:0; left:0; font-size:24px; line-height:60px; opacity:.4 }
.slider-group .slider{width:100%; float:left; position:relative; padding-right:55px;}
.slider-group .slider a{float:left; white-space:nowrap; line-height:60px; padding: 0; color:var(--color2); font-size:16px; font-weight:500; margin-right:20px;}
.slider-group .slider .owl-nav{position:absolute; top:0; right:0;}
.slider-group .slider .owl-nav span{font-size:0;}
.slider-group .slider .owl-nav span:before{font-size:32px; font-family: "Font Awesome 5"; font-weight:300; line-height:58px;}
.slider-group .slider .owl-nav .disabled{opacity:.4; cursor:default}
.slider-group .slider .owl-nav .owl-prev span:before{content:"\f104";}
.slider-group .slider .owl-nav .owl-next span:before{content:"\f105"; margin-left:15px;}

ul.newsIntro{width:calc(100% + 20px); margin:0 0 0 -10px; padding:0; list-style:none; float:left;}
ul.newsIntro li{float:left; padding: 0 10px; position:relative; }
ul.newsIntro li .wrap-attr{width:100%; float:left; position:relative; margin: 15px 0 10px 0}
ul.newsIntro li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
ul.newsIntro li .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
ul.newsIntro li .wrap-attr .ele span{opacity:.75}
ul.newsIntro li .wrap-attr .ele:first-child:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color2); position:absolute; right:-18px; top:8px;}
ul.newsIntro li:first-child{width:calc(50% - 30px); height:calc(100% - 20px); float:left; margin-left:15px; padding:0; position:relative; display:block; border-radius:7px; position:absolute; left:25%; top:0; }
ul.newsIntro li:first-child .wrap-attr{}
ul.newsIntro li:first-child .wrap-img{width:100%; display:block; position:relative; float:right; z-index:1; }
ul.newsIntro li:first-child .wrap-img:before{content:''; padding-top:67%; display:block;}
ul.newsIntro li:first-child .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; text-align:center; border-radius:7px}
ul.newsIntro li:first-child .wrap-img a img{width: 100%; height: 100%;object-fit: cover;}
ul.newsIntro li:first-child .wrap-info{display:block; float:left; width:calc(100%); padding:0; z-index:2; position:relative;}
ul.newsIntro li:first-child .wrap-info a{text-decoration:none; color:#000; display:block; transition:.3s;}
ul.newsIntro li:first-child .wrap-info a h3{font-size:24px; font-weight:bold;}
ul.newsIntro li:first-child .wrap-info .detail{width:100%; float:left; font-size:17px; 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; }
ul.newsIntro li:first-child .nav-group{position:absolute; left:25px; bottom:20px; font-weight:500; padding-left:25px;  }
ul.newsIntro li:first-child .nav-group i{font-size:16px; position:absolute; top:0; left:0; color:var(--color1)}
ul.newsIntro li:not(:first-child){margin-bottom:20px; width:25%}
ul.newsIntro li:not(:first-child) .wrap-img{display:block; width:100%; position:relative; margin-bottom:0px;}
ul.newsIntro li:not(:first-child) .wrap-img:before{content:''; display:block; padding-bottom:67%;}
ul.newsIntro li:not(:first-child) .wrap-img a{display:block; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:7px; text-align:center;}
ul.newsIntro li:not(:first-child) .wrap-img a img{width:100%; height:100%; object-fit:cover; }
ul.newsIntro li:not(:first-child) .wrap-info{width:100%; float:left; position:relative;} 
ul.newsIntro li:not(:first-child) .wrap-info a{text-decoration:none; color:#000; transition:.3s; width:100%; float:left;}
ul.newsIntro li:not(:first-child) .wrap-info a:hover{color:var(--color1)}
ul.newsIntro li:not(:first-child) .wrap-info a h3{font-size:16px; margin:0; font-weight:500; line-height:24px; -webkit-line-clamp: 2; -webkit-box-orient: vertical;white-space: normal;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;}
ul.newsIntro li:not(:first-child) .wrap-info .detail{font-size:15px; line-height:24px; padding-top:10px; color:rgba(0,0,0,.85); width:100%; float:left; margin-bottom:15px; display:none;}
ul.newsIntro li:not(:first-child) .nav-group{clear:both; font-weight:500;  padding-left:25px; position:relative}
ul.newsIntro li:not(:first-child) .nav-group i{font-size:16px; position:absolute; top:0; left:0; color:var(--color1)}
ul.newsIntro li:nth-child(n+6){display:none;}
ul.newsIntro li:nth-child(2n){float:left; margin-right:350px;}
ul.newsIntro li:nth-child(2n + 1){float:right;}

@media (max-width: 767px) {
    ul.newsIntro li:first-child{position:relative; width:calc(100% - 20px); height:initial; left:initial; top:initial; margin: 15px 10px 20px 10px; }
    ul.newsIntro li:first-child .wrap-img{height:initial}
    ul.newsIntro li:first-child .wrap-img:before{content:''; padding-top:67%; display:block;}
    ul.newsIntro li:first-child .wrap-info{background:none; position:relative; padding:0; }
    ul.newsIntro li:first-child .wrap-info a{color:#000; margin-top:15px; width:100%; float:left;}
    ul.newsIntro li:first-child .wrap-info a h3{font-size:20px;}
    ul.newsIntro li:first-child .wrap-info .detail{color:#000;}
    ul.newsIntro li:first-child .wrap-attr{position:relative; color:#000; width:100%; left:0; bottom:initial; margin:0; }
    ul.newsIntro li:not(:first-child){width:50%; margin:0 0 20px 0!important}
    ul.newsIntro li:not(:first-child) .wrap-info{padding-top:15px;}
    ul.newsIntro li:not(:first-child) .wrap-info a h3{-webkit-line-clamp: 3;}
    ul.newsIntro li:not(:first-child) .wrap-attr{display:none;} 
}

@media (min-width: 768px) and (max-width: 991px) {
    ul.newsIntro li:first-child{position:relative; width:calc(100% - 20px); height:initial; left:initial; top:initial; margin: 0 10px 20px 10px; }
    ul.newsIntro li:first-child .wrap-img{height:initial}
    ul.newsIntro li:first-child .wrap-img:before{content:''; padding-top:67%; display:block;}
    ul.newsIntro li:not(:first-child){width:50%; margin:0 0 20px 0!important}
}



.body-group{ padding-top:20px;}
.body-group .col-left{width:calc(100% - 800px); float:left; position:relative; /*border-right:1px solid var(--color-border);*/ padding-right:0px;}
.body-group .col-right{width:800px; float:left;/* box-shadow: -1px 0 var(--color-border);*/ padding-left:40px;}

.title-group{width:100%; float:left; position:relative; }
.title-group h4{display:block; text-transform:uppercase; line-height:34px; font-weight:bold; margin:0; color:#000; font-size:18px; float:left;}
.title-group .nav-all{padding: 0 35px 0 15px;  text-align:left; font-size:14px; font-weight:500;float:right; background:#edf4fc; line-height:31px; height:30px; border-radius:15px; color:#000; position:absolute; top:0; right:0;}
.title-group .nav-all:hover{color:var(--color2)}
.title-group .nav-all:after{width:20px; height:20px; border-radius:50%; content:"\f0da";background:var(--color2); font-size:11px; padding-left:2px; color:#fff; text-align:center; line-height:20px; position:absolute; top:5px; right:5px; font-weight:bold; font-family: "Font Awesome 5"; font-weight: 900;}
.title-group.red{border-bottom:1px solid var(--color-border); padding-bottom:15px;}


ul.list-infoLeft{width:100%; margin:0; padding:0; list-style:none; clear:both; float:left; position:relative;}
ul.list-infoLeft:before{content:""; width:100%; height:2px; background:#fff; position:absolute; top:0; left:0; z-index:2}
ul.list-infoLeft li{width:100%; float:left; position:relative; padding:20px 0; border-top:1px solid var(--color-border)}
ul.list-infoLeft li a.name{display:block; text-decoration:none; color:#000; margin-bottom:7px; transition:.3s}
ul.list-infoLeft li a.name:hover{color:var(--color2)}
ul.list-infoLeft li a.name h3{font-size:16px; font-weight:500; margin:0; line-height:22px;}
ul.list-infoLeft li .wrap-img{width:200px; float:left; position:relative; margin-right:15px;}
ul.list-infoLeft li .wrap-img:before{content:''; display:block; padding-bottom:67%}
ul.list-infoLeft li .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; border-radius:7px; text-align:center;}
ul.list-infoLeft li .wrap-img a img{width: initial; height: initial; object-fit: cover; width:100%; height:100%;}
ul.list-infoLeft li .detail{font-size:15px; line-height:22px}
ul.list-infoLeft li .wrap-attr{width:100%; float:left; position:relative; margin: 0 0 15px 0; color:#000}
ul.list-infoLeft li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
ul.list-infoLeft li .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
ul.list-infoLeft li .wrap-attr .ele span{opacity:.75}
ul.list-infoLeft li .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-infoLeft li .wrap-attr .ele:last-child{margin-right:0;}

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



@media (max-width: 767px) {
    .page-groupInfo{padding-bottom:80px;}
    .head-group .col-left{width:100%; padding-right:0;}
    .head-group .col-right{display:none;}
    .body-group{padding:0;}
    .body-group .col-left{display:none}
    .body-group .col-right{padding:0; width:100%;}
    .wrap-groupInfo{border-top:10px solid var(--color-border); width:calc(100% + 30px); margin-left:-15px; padding:20px 15px 0 15px; margin-top:20px;}
    .wrap-groupInfo ul{border:none; border-radius:0; padding:0;}
    .wrap-groupInfo ul li{padding:0!important;}
    .wrap-groupInfo ul li:first-child .wrap-img{width:100%; margin:0;}
    .wrap-groupInfo ul li:first-child .info{width:100%; margin:0; padding:15px 0 0 0;}
    .wrap-groupInfo ul li:not(:first-child){width:100%; margin-top:15px;}
    .wrap-groupInfo ul li:not(:first-child) .wrap-img{width:130px; margin: 0 15px 0 0}
    .wrap-groupInfo ul li:not(:first-child) .info{clear:initial}
    .wrap-groupInfo ul li:not(:first-child) .wrap-attr{width:initial; float:initial; display:inline!important}
    .wrap-groupInfo ul li:not(:first-child) .wrap-attr .ele{margin-right:20px;}
    .wrap-groupInfo ul li:not(:first-child) .wrap-attr .ele:after{right:-13px;}
    .wrap-groupInfo ul li:not(:first-child) .wrap-attr .ele:first-of-type span{font-size:0;}
    .wrap-groupInfo ul li:not(:first-child) .wrap-attr .ele:first-of-type span:before{content:'Ngày'; font-size:13px;}
}

@media (min-width:768px) and (max-width:991px) {
    .page-groupInfo{padding-bottom:0;}
    .head-group .col-left{width:100%; padding-right:0;}
    .head-group .col-right{display:none;}

    .body-group .col-left{display:none}
    .body-group .col-right{padding:0; width:100%;}
}
    
@media (min-width:992px) and (max-width:1199px) {
    .body-group .col-left{width:calc(100% - 650px);}
    .body-group .col-right{width:650px; float:right;}
    ul.list-infoLeft li .wrap-img{width:100%; margin:0; margin-bottom:15px;}
    .wrap-groupInfo ul li:not(:first-child){width:33.33333333%}
    .wrap-groupInfo ul li:nth-child(n+5){display:none;}
}

@media (min-width:1200px) and (max-width:1439px) {
    ul.list-infoLeft li .wrap-img{width:100%; margin:0; margin-bottom:15px;}
}

/* bartop on mobile */
.barTop{width:100%; position: fixed; top: 65px; height: 50px;left: 0;background: #fff;z-index: 20; box-shadow: 0 2px 3px rgba(0, 0, 0, .05),0 1px rgba(0,0,0,.04);}
.barTop .titlebar{line-height: 50px; float: left; font-size: 16px; text-transform: uppercase; font-weight: 900; padding-left:10px; color:var(--color2);}