/*
 * CSS chi tiết bài viết
*/

/* bài viết liên quan */
div#related_posts >h3 { font-weight: bold; color: #000; margin-bottom: 20px; width: 100%; text-align: left; }
div#related_posts .post-item { flex-basis: 100% !important; width: 100% !important; padding: 0 10px 20px; }
div#related_posts .post-item .col-inner { padding: 10px 10px 20px !important; border-radius: 10px; background: #fff; backdrop-filter: blur(10px); border: 1px solid #F0F0F0;}
div#related_posts .post-item .box-image { display: block !important; width: 100% !important;max-width: 100% !important;border-radius: 10px;}
div#related_posts .post-item .box-image .image-cover { padding-top: 75% !important;}
div#related_posts .post-item .box-text { padding: 15px 0px 0px !important; border: 0px;width: 100% !important; max-width: 100% !important; display: block;}
div#related_posts .post-item .box-text .from_the_blog_excerpt, div#grid .post-item .box-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
div#related_posts .post-item .box-blog-post .post-title { font-weight: 600; color: #000; font-size: 16px; }
div#related_posts .post-item .box-blog-post .post-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #000; }
div#related_posts .post-item:hover a { color: #a14723 !important;}

@media screen and (min-width: 960px) {
  div#related_posts >h3 { font-size: 30px; }
  div#related_posts .post-item { max-width: 33.333% !important; }
}
@media screen and (max-width: 959px) {
  div#related_posts >h3 { font-size: 25px; }
}
@media screen and (max-width: 959px) and (min-width: 600px) {
  div#related_posts .post-item { max-width: 50% !important; }
}
@media screen and (max-width: 599px) {
  div#related_posts .post-item { max-width: 100% !important; }
}
	

/* Gallery */
.hbw-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hbw-row {
  display: flex;
}
.hbw-gallery .hbw-row .gallery-col {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
}

.hbw-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hbw-gallery .row-col-2 .col-inner {
    position: relative;
    padding-top: 100%;
}
.hbw-gallery img {
  display: block;
  border-radius: 6px;
    bottom: 0;
    font-family: "object-fit: cover;";
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.hbw-gallery .gallery-col .hbw-box-image:nth-child(2) {
    margin-top: 10px;
}