.page-groupInfo{clear:both; padding-top:0px!important; width:100%; float:left;}
.head-group{}
.head-group .col-right{width:290px; float:right; position:relative;}

/* Saerch */
.searchInfo{width:500px; margin-left:-250px; float:left; position:absolute; left:50%; bottom:-5px; z-index:5; background:var(--colorBg); padding:5px; border-radius:12px 12px 0 0;  }
.searchInfo:before{position: absolute;  content: ""; bottom:5px ; left: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem var(--colorBg); transform: rotate(0deg);}
.searchInfo:after{position: absolute;  content: ""; bottom:5px ; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem var(--colorBg); transform: rotate(90deg)}
.searchInfo label{display:none;}
.searchInfo .wrap-search{float:right; position:relative; width:100%; z-index:2;}
.searchInfo .wrap-search input[type="text"]{width:100%; border:none; height:46px; border-radius:7px; padding: 0 60px 0 20px; outline:none; background:#fff; font-size:16px; }
.searchInfo .wrap-search .navSearch{font-weight: 400;width:50px; line-height:46px; font-size:16px; color:var(--color1); opacity:.75; text-align:center; position:absolute; right:0; top:0;}

@media (max-width:767px){
    body{padding-bottom:60px;}
    .searchInfo{width:calc(100% - 30px); margin-left:0; left:15px}
} 

.sliderInfo{width:100%; float:left; position:relative;background:var(--colorBg); padding:50px 0;}
.sliderInfo .bgBottom{width: calc(175% + 1.3px); height: 200px; left: 50%;transform: translateX(-50%); position:absolute; bottom:0; overflow:hidden; background:#fff; z-index:1; display:none;}
.sliderInfo .bgBottom svg{width:100%; height: 330px; position:absolute; left:0; bottom:0; fill:var(--colorBg)}
.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;}

.newsIntro-list{ width:calc(100% + 30px); float:left; position:relative; margin-left:-15px; z-index:3;}
.newsIntro-list:before{content:''; width:15px; height:100%; background:var(--colorBg); display:block; position:absolute; top:0; left:0; z-index:2; }
.newsIntro-list:after{content:''; width:15px; height:100%; background:var(--colorBg); display:block; position:absolute; top:0; right:0; z-index:2; }
.newsIntro-list .owl-wrapper-outer{width:100%; float:left; margin-left:0px;}
.newsIntro-list .owl-wrapper-outer .owl-item{width:100%; float:left; padding: 0 15px;}
.newsIntro-list .owl-wrapper-outer .owl-item .item{width:100%; float:left; position:relative;}
.newsIntro-list .owl-controls{margin:0;} 
.newsIntro-list .owl-controls .owl-buttons div{position:absolute; top:50%; margin-top:-25px; z-index:10; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), 0 0 0 6px var(--colorBg)}
.newsIntro-list .owl-controls .owl-buttons .owl-prev{left:-10px;}
.newsIntro-list .owl-controls .owl-buttons .owl-next{right:-10px;}

.itemThumb{width:100%; float:left; position:relative; background:#fff; border-radius:15px; padding:25px;}
.itemThumb .wrap-img{width:100%; float:left; position:relative; margin-bottom:25px;}
.itemThumb .wrap-img a.nav-img{width:100%; float:left; position:relative;}
.itemThumb .wrap-img a.nav-img:before{content:''; padding-top:70%; display:block;}
.itemThumb .wrap-img a.nav-img .inner{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; border-radius:12px;}
.itemThumb .wrap-img a.nav-img .inner img{width:inherit; height:inherit; object-fit:cover}
.itemThumb .wrap-img .wrap-attr{position:absolute; left:0; bottom:-3px; z-index:2; background:#fff; display:flex; font-size:14px; padding-top:13px; padding-right:20px; border-radius: 0 10px 0 0; }
.itemThumb .wrap-img .wrap-attr:before{position: absolute; content: "";  top: -20px;  left: 0;  background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
.itemThumb .wrap-img .wrap-attr:after{position: absolute;  content: ""; top: 11px; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 10px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
.itemThumb .wrap-img .wrap-attr .ele{position:relative; padding-left:22px; margin-right:20px; z-index:5;}
.itemThumb .wrap-img .wrap-attr .ele b{font-weight:normal;}
.itemThumb .wrap-img .wrap-attr .ele:before{font-family: "Font Awesome 5"; font-weight:300; content: "\f073"; font-size:16px; position:absolute; left:0; top:-4px; color:var(--color1)}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type{margin-right:0; padding-left:26px;}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type b{padding-right:5px;}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type:before{content:"\f06e"; top:-2px;}
.itemThumb .wrap-info{width:100%; float:left; position:relative;}
.itemThumb .wrap-info a.name{width:100%; float:left; position:relative; color:#000; transition:.3s;}
.itemThumb .wrap-info a.name:hover{color:var(--color1)}
.itemThumb .wrap-info a.name h3{margin:0; padding:0;font-family: "Signika", sans-serif; font-size:20px; font-weight:600; line-height:27px; }
.itemThumb .wrap-info .detail{width:100%; float:left; color:rgba(0,0,0,.75); font-size:16px; line-height:25px; padding-top:15px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;}

@media (max-width: 767px) {
    .sliderInfo{padding: 20px 0}
    .newsIntro-list{width:calc(100% + 20px); margin-left:-10px;}
    .newsIntro-list:before,.newsIntro-list:after{width:10px;}
    .newsIntro-list .owl-wrapper-outer .owl-item{padding: 0 10px;}


}

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


.bodyInfo{ width:100%; float:left; position:relative; z-index:5;}
.bodyInfo .col-left{width:30%; float:left; position:relative; padding-right:0px;}
.bodyInfo .col-right{width:70%; float:left; padding-left:50px;}

.title-group{width:100%; float:left; position:relative; padding-left:65px;}
.title-group h4{display:block; font-weight:600; margin:0; color:#000; font-size:25px; font-family: "Signika", sans-serif; float:left; padding-top:45px; margin-bottom:20px; }
.title-group h4:before{content:'01'; position:absolute; top:-1px; left:0; font-weight:900; font-family:Roboto; font-size:18px; height:85px; padding-top:50px; color:#fff; background:var(--color1); width:46px; text-align:center; border-radius: 0 0 25px 25px; display:block;}
.title-group .nav-all{padding: 0 20px;  text-align:left;float:right; background:#fff; line-height:32px; height:32px; border-radius:20px; color:var(--color1); position:absolute; top:35px; right:0; box-shadow: 0 0 5px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05); transition:.3s; font-weight:500;}
.title-group .nav-all:hover{background:var(--color1); color:#fff;}


.bodyInfo .col-left .title-group{padding-left:0;}
.bodyInfo .col-left .title-group h4:before{display:none;}

ul.list-infoLeft{width:100%; margin:0; padding:0; list-style:none; clear:both; float:left; position:relative;}
ul.list-infoLeft li{width:100%; float:left; position:relative; padding:20px 0; border-top:1px dashed #0D401C26}
ul.list-infoLeft li a.name{display:block; text-decoration:none; color:#000; transition:.3s;}
ul.list-infoLeft li a.name:hover{color:var(--color1)}
ul.list-infoLeft li a.name h3{font-size:18px; font-weight:500; margin:0;  font-family: "Signika", sans-serif; line-height:24px; }
ul.list-infoLeft li .wrap-img{width:180px; float:left; position:relative; margin-right:20px; margin-top:5px;}
ul.list-infoLeft li .wrap-img:before{content:''; display:block; padding-bottom:70%}
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%; transition:.3s;}
ul.list-infoLeft li .detail{font-size:16px; line-height:24px; margin-top:-5px; }
ul.list-infoLeft li .wrap-attr{width:100%; float:left; position:relative; margin: 10px 0 15px 0;}
ul.list-infoLeft li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:20px; font-size:14px; padding-left:20px;}
ul.list-infoLeft li .wrap-attr .ele:before{font-family: "Font Awesome 5"; font-weight: 300; content: "\f073"; font-size: 16px; position: absolute; left: 0; top: -3px;color: var(--color1);}
ul.list-infoLeft li .wrap-attr .ele:last-of-type{padding-left: 22px; margin-right:0;}
ul.list-infoLeft li .wrap-attr .ele:last-of-type:before{content:"\f06e"; top:-1px;}
ul.list-infoLeft li .wrap-attr .ele b{padding: 0 3px; font-weight:normal}
ul.list-infoLeft li .wrap-attr .ele span{}

@media (min-width:1200px) and (max-width:1439px){
    ul.list-infoLeft li .wrap-img a{border-radius:16px;}
}

.pxl-divider-separator{width:100%; float:left; height:1px; --clr-border: #0D401C26; background-image: repeating-linear-gradient(90deg, var(--clr-border), var(--clr-border) 7px, transparent 7px, transparent 11px); background-repeat: no-repeat;}
.wrap-groupInfo{width:100%; float:left; position:relative; margin-bottom:80px;}
.wrap-groupInfo ul{margin:0px 0 0 -15px; padding:0; width:calc(100% + 30px); float:left; list-style:none; }
.wrap-groupInfo ul li{width:50%; float:left; padding: 0 15px; margin-top:30px;}
.wrap-groupInfo ul li .wrap-img{display:block; float:left; position:relative; width:150px; border-radius:7px; overflow:hidden;}
.wrap-groupInfo ul li .wrap-img:before{display:block; content:''; padding-bottom:70%}
.wrap-groupInfo ul li .wrap-img a{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; text-align:center; }
.wrap-groupInfo ul li .wrap-img a img{width:100%; height:100%; object-fit:cover; transition:.3s;}
.wrap-groupInfo ul li .info{ width:calc(100% - 150px); float:right; padding-left:20px;}
.wrap-groupInfo ul .name{display:block; color:#000; text-decoration:none; transition:.3s; }
.wrap-groupInfo ul .name:hover{color:var(--color1)}
.wrap-groupInfo ul .name h4{font-size: 15px;  font-family: "Signika", sans-serif; font-size:18px; margin-top:-5px; padding-top:0px; line-height:24px; font-weight:500; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;}
.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: 5px 0 0 0;}
.wrap-groupInfo ul .wrap-attr .ele{display:block; float:left; position:relative; margin-right:20px; font-size:14px; padding-left:20px;}
.wrap-groupInfo ul .wrap-attr .ele:before{font-family: "Font Awesome 5"; font-weight: 300; content: "\f073"; font-size: 16px; position: absolute; left: 0; top: -3px;color: var(--color1);}
.wrap-groupInfo ul .wrap-attr .ele:last-of-type{padding-left: 22px; margin-right:0;}
.wrap-groupInfo ul .wrap-attr .ele:last-of-type:before{content:"\f06e"; top:-1px;}
.wrap-groupInfo ul .wrap-attr .ele b{padding: 0 3px; font-weight:normal}
.wrap-groupInfo ul .wrap-attr .ele span{}
.wrap-groupInfo ul .wrap-attr .ele-date span{display:none;}
.wrap-groupInfo ul li:first-child .wrap-attr{position:absolute; bottom:100%; left:0; background:#fff; padding-top:13px; float:left; width:auto; padding-right:20px; border-radius:0 10px 0 0}
.wrap-groupInfo ul li:first-child .wrap-attr:before{position: absolute;content: ""; top: -20px; left: 0; background: 0 0;width: 20px; height: 20px; border-bottom-right-radius: 15px;box-shadow: .313rem .313rem 0 .313rem #fff;transform: rotate(90deg);}
.wrap-groupInfo ul li:first-child .wrap-attr:after{position: absolute; content: ""; bottom:0px;right: -20px;background: 0 0;width: 20px; height: 20px;border-bottom-right-radius: 10px;box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
.wrap-groupInfo ul li:first-child .wrap-img{width:100%;}
.wrap-groupInfo ul li:first-child .wrap-img a{border-radius:15px;}
.wrap-groupInfo ul li:first-child .info{width:100%; position:relative; padding-left:0; padding-top:25px;}
.wrap-groupInfo ul li:first-child .name h4{font-size:20px; font-weight:600; line-height:27px; }
.wrap-groupInfo ul li:first-child .detail{font-size:16px; line-height:24px; padding-top:5px; opacity:.85; display:block; float:left;}

.wrap-groupInfo ul li:nth-child(n+7){display:none;}
.wrap-groupInfo:first-of-type{margin-top:0;}
.wrap-groupInfo:first-of-type .pxl-divider-separator{display:none;}
.wrap-groupInfo:nth-of-type(2) .title-group h4:before{content:'02'} .wrap-groupInfo:nth-of-type(3) .title-group h4:before{content:'03'} .wrap-groupInfo:nth-of-type(3) .title-group h4:before{content:'03'} .wrap-groupInfo:nth-of-type(4) .title-group h4:before{content:'04'} .wrap-groupInfo:nth-of-type(5) .title-group h4:before{content:'05'} .wrap-groupInfo:nth-of-type(6) .title-group h4:before{content:'06'} .wrap-groupInfo:nth-of-type(7) .title-group h4:before{content:'07'}


@media (max-width: 767px) {
    .head-group .col-left{width:100%; padding-right:0;}
    .head-group .col-right{display:none;}
    .bodyInfo{padding:0;}
    .bodyInfo .col-left{display:none}
    .bodyInfo .col-right{padding:0; width:100%;}

    .wrap-groupInfo{width:100%; float:left; margin-bottom:40px; }
    .wrap-groupInfo:nth-child(2n+1){padding-bottom:30px!important;}
    .wrap-groupInfo ul{border:none; border-radius:0; padding:0 15px;}
    .wrap-groupInfo ul li{padding:0!important; width:100%}
    .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:first-child .info .date-post{top:0; left:0;}
    .wrap-groupInfo ul li:first-child .name{padding-left:0px;}
    .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 0}
    .wrap-groupInfo ul li:not(:first-child) .info{clear:initial; width:calc(100% - 130px); }
    .wrap-groupInfo ul li:not(:first-child) .name h4{font-size:17px;}
    .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;}

    .bodyInfo .col-left{display:none}
    .bodyInfo .col-right{padding:0; width:100%;}
}
    
@media (min-width:992px) and (max-width:1199px) {
    .bodyInfo .col-left{width:300px; padding-right:20px;}
    .bodyInfo .col-right{width:calc(100% - 300px); float:right; }
    ul.list-infoLeft li .wrap-img{width:100%; margin:0; margin-bottom:15px;}
    .wrap-groupInfo ul li:nth-child(n+6){display:none;}
}

@media (min-width:1200px) and (max-width:1439px) {
     .bodyInfo .col-left{width:330px;padding-right:30px;}
     .bodyInfo .col-right{width:calc(100% - 330px);}
    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); display:none}
.barTop .titlebar{line-height: 50px; float: left; font-size: 16px; text-transform: uppercase; font-weight: 900; padding-left:10px; color:var(--color2);}