.detail-post-container{
  gap: 40px;
  margin-bottom: 100px;
  justify-content: space-between;
	flex-wrap:wrap
}
.detail-post-content{
  flex: 0 0 100%;
}
.detail-post-sidebar{
  flex: 0 0 100%;
}
.related-post-list{
  gap: 40px
}
.post-popular-list{
  gap: 16px;
  flex-direction: column;
}
.post-popular-list .popular-post-item{
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-grey);
}
h1.single-post-title{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-grey);
}
 .post-date{
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px; 
  margin-bottom: 4px;
  color: var(--secondary-color);
}
.detail-post-content .post-date{
   margin-bottom: 20px;
}
.post-date .dot{
  width: 5px;
  height: 5px;
  background-color: #666666;
  border-radius: 50%;
}
.post-date .author a{
  text-decoration: none;
  color: var(--font-color);
}
 
.detail-post-content .post-thumbnail img, .news-img-container img{
  width: 100%; 
  border-radius: 8px;
  overflow: hidden;
}
.popular-post-item a:hover{
  text-decoration: none;
  color: var(--main-color);
}
.post-thumbnail figcaption{
  font-size: 12px;
  color: var(--secondary-color);
  margin-bottom: 16px;
  text-align: left;
  font-style: italic;
}
.detail-post-sidebar .widget-area{
  border-left: 0;
  padding:0 ;
}
.publication-post-title{
  margin-bottom: 32px;
}
.important-publication-list {
  margin-bottom:60px
}
.other-important-post-item {
  margin-bottom: 16px;
  width:100%;
}
.other-important-post-item > a{
  flex:0 0 95px;
  height: 95px;
  overflow: hidden; 
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.other-important-post-item > a .publication-img-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  line-height: 0;
}
.other-important-post-item > .important-post-content{
  flex:0 0 calc(100% - 95px);
	padding-left:10px;

}
.top-important-post-item{
  position: relative;
}
 
.top-important-post-item .important-post-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 100%); 
  color: #fff;
}
.top-important-post-item .important-post-content a{
  color: #fff;
}
.top-important-post-item .important-post-content .post-date{
  color: #fff !important;
}
.top-important-post-item .important-post-content .post-date .dot{
  background-color: #fff;
}
.category-name a, .category-name a:visited{
  color: var(--font-color);
  text-decoration: none;
}
.category-name a:hover{
  color: var(--main-color);
}
.social-share-div{
 margin-right: 36px;
}
.share-buttons{
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.share-buttons a{
  width:48px;
  height:48px;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.share-buttons a.share-button-profile-whatsapp{
  background:url(../img/icon-share-wa.svg) no-repeat center center;
}
.share-buttons a.share-button-profile-facebook{
  background:url(../img/icon-share-fb.svg) no-repeat center center;
}
.share-buttons a.share-button-profile-twitter{
  background:url(../img/icon-share-x.svg) no-repeat center center;
}
 
.share-buttons a.share-button-profile-linkedin{
  background:url(../img/icon-share-linkedin.svg) no-repeat center center;
}
.detail-post-sidebar{
  position: sticky;
}
.top-important-post-item .img-container{
  height: auto;
}
.important-publication-item.other-important-post-item .publication-img-container{
	height:100%;
}
.important-publication-item.top-important-post-item{
  margin-bottom:20px;
  border-radius: 8px;
  overflow: hidden;
}
 
h1.single-post-title{
  font-size: 24px;
}
@media (min-width:768px) {
	.important-publication-item.top-important-post-item {
		margin-bottom:0;
	}
  .related-post-list > .post-list-item{
    flex: 0 0 calc(33.33% - (40px * 2 / 3));
  }
  .related-post-list .news-img-container {
    width: 100%;
    height: 215px;
    margin-bottom: 16px;
  }
  .related-post-list .news-img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pulication-page-post-list{
    margin-bottom: 40px; 
    display: flex;
    gap:20px
  }
  .pulication-page-post-list   .post-list-item{
    flex: 0 0 calc(33.33% - (20px * 2 / 3));
  }
  .important-publication-item{
    position: relative !important;
  }

  .top-important-post-item{
    display: block;
    float: left; 
    margin-right: 0px;
    height: 315px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    
  }
  .top-important-post-item .img-container{
    height: 400px;
  }
  .top-important-post-item .img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .important-publication-list {
    display: flex; 
    gap: 20px;
    flex-wrap: wrap;
  }
  .other-important-post-item {
    margin-bottom: 16px;
    width:48%;
    flex-direction: column;
    flex: 0 0 calc(33.33% - (20px * 2 / 3) );
  }
  .other-important-post-item > a{
    margin-bottom: 20px;
	flex: 0 0 167px;
    height: 95px;
  }
	.other-important-post-item > .important-post-content{
	  flex:0 0 calc(100% - 200px);
		margin:0 0 0;
	}
	  .detail-post-content{
  flex:0 0 calc(65% - 20px);
	}
 .detail-post-sidebar{
	  flex: 0 0 calc(35% - 20px);
	}
	h1.single-post-title{
  font-size: 32px;
  }
	.detail-post-sidebar .widget-area{
  border-left: 1px solid var(--border-grey);
  padding:0 24px;
  }
}
@media (min-width:992px) {
  .top-important-post-item{
    display: block;
    float: left;
    width: calc(50% - 20px);
    margin-right: 40px;
    height: 315px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
  }
  .important-publication-item{
    position: relative;
  }
  .top-important-post-item{
    display: block;
    float: left;
    width: calc(50% - 20px);
    margin-right: 40px;
    height: 315px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
  }
  .important-publication-list{
    display: block;
  }
  .other-important-post-item {
    margin-bottom: 16px;
    width:48%;
    flex-direction: row;
  }
  .other-important-post-item > a{
    margin-right: 0px;
  }
  .other-important-post-item > .important-post-content{
    flex:0 0 calc(100% - 200px);
    padding-left: 20px;
  }

}