﻿.page-groupInfo{clear:both; padding-top:0px!important; width:100%; float:left;}
.head-group{}
.head-group .col-right{width:290px; float:right; position:relative;}

@media (max-width:767px){
    body{padding-bottom:60px;}
} 

.sliderInfo{width:100%; float:left; position:relative;padding:0px 0 50px 0 ; margin-top:20px;}
.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:#fff; display:block; position:absolute; top:0; left:0; z-index:2; }
.newsIntro-list:after{content:''; width:15px; height:100%; background:#fff; 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 #fff}
.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; border-radius:15px;}
.itemThumb .wrap-img{width:100%; float:left; position:relative; margin-bottom:60px;}
.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; top:100%; margin-top:25px; z-index:2; background:#fff; display:flex; font-size:14px;  padding-right:20px; border-radius: 0 10px 0 0; }
.itemThumb .wrap-img .wrap-attr .ele{font-size:14px; color:rgba(0,0,0,.7); position:relative;}
.itemThumb .wrap-img .wrap-attr .ele b{font-weight:normal}
.itemThumb .wrap-img .wrap-attr .ele:first-of-type{padding-right:15px; margin-right:15px;}
.itemThumb .wrap-img .wrap-attr .ele:first-of-type span{display:none;}
.itemThumb .wrap-img .wrap-attr .ele:first-of-type:after{content:''; width:1px; height:15px; background:#000; position:absolute; top:3px; right:0; opacity:.5 }
.itemThumb .wrap-img .wrap-attr .ele:last-of-type b{font-weight:600; color:#000; padding-right:5px;}
.itemThumb .wrap-info{width:100%; float:left; position:relative;}
.itemThumb .wrap-info a.name{width:100%; float:left; position:relative; color:#000; transition:.3s; text-decoration:none!important}
.itemThumb .wrap-info a.name:hover{color:var(--color2)}
.itemThumb .wrap-info a.name h3{margin:0; padding:0; font-size:18px; 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; margin-top: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; border-top:1px solid var(--color-border)}
.title-group h4{display:block; font-weight:600; margin:0; color:#000; font-size:22px;  float:left; padding-top:30px; 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:70px; padding-top:35px; color:#fff; background:var(--color2); width:46px; text-align:center; border-radius: 0 0 25px 25px; display:block;}
.title-group .nav-all{padding: 0 20px;  font-size:14px; text-align:left;float:right; background:#fff; line-height:32px; height:32px; border-radius:20px; color:#000; position:absolute; top:25px; right:0; transition:.3s; font-weight:500; text-decoration:none!important; background:rgba(0,0,0,.04)}
.title-group .nav-all:hover{background:var(--color2); 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(--color2)}
ul.list-infoLeft li a.name h3{font-size:18px; font-weight:600; margin:0; 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; text-align:center;}
ul.list-infoLeft li .wrap-img a img{width: initial; height: initial; object-fit: cover; width:100%; height:100%; transition:.3s; border-radius:10px; }
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: 15px 0 15px 0;}
ul.list-infoLeft li .wrap-attr .ele{display:block; float:left; position:relative; margin-right:15px; font-size:13px; padding-right:15px}
ul.list-infoLeft li .wrap-attr .ele b{padding: 0 3px; font-weight:normal}
ul.list-infoLeft li .wrap-attr .ele span{}
ul.list-infoLeft li .wrap-attr .ele:first-of-type:after{content:''; width:1px; height:16px; margin-top:-8px; background:#000; position:absolute; top:50%; right:0; display:block; opacity:.5}
ul.list-infoLeft li .wrap-attr .ele:first-of-type span{display:none;}
ul.list-infoLeft li .wrap-attr .ele:last-of-type{margin-right:0; padding-right:0;}
ul.list-infoLeft li .wrap-attr .ele:last-of-type b{font-weight:600; color:#000}
ul.list-infoLeft li:first-child{border:none;}

@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; display:none;}
.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(--color2)}
.wrap-groupInfo ul .name h4{font-size: 15px;  font-size:17px; margin-top:-5px; padding-top:0px; line-height:24px; font-weight:600; -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{position:relative; left:0;  margin-top:0px; margin-bottom:20px; z-index:2; background:#fff; display:flex; font-size:14px;  padding-right:20px; border-radius: 0 10px 0 0; }
.wrap-groupInfo ul .wrap-attr .ele{font-size:13px; color:rgba(0,0,0,.7); position:relative; white-space:nowrap}
.wrap-groupInfo ul .wrap-attr .ele b{font-weight:normal}
.wrap-groupInfo ul .wrap-attr .ele:first-of-type{padding-right:15px; margin-right:15px;}
.wrap-groupInfo ul .wrap-attr .ele:first-of-type span{display:none;}
.wrap-groupInfo ul .wrap-attr .ele:first-of-type:after{content:''; width:1px; height:15px; background:#000; position:absolute; top:3px; right:0; opacity:.5 }
.wrap-groupInfo ul .wrap-attr .ele:last-of-type b{font-weight:600; color:#000; padding-right:5px;}
.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;}
    .wrap-groupInfo:last-of-type{margin-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{width:100%;}
}

@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);}