﻿.block h3 {
  font-size: 20px;
  text-transform: uppercase;
  position: relative;
  padding-left: 45px;
  border-radius: 10px 10px 0 0;
  background-color: #0070c0;
  margin: 0;
}
.block.sidepart img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

  .block h3::before {
    position: absolute;
    top: 45%;
    left: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-block;
  }
/*.right-content {
  position: sticky;
  top: 20px; 
  height: fit-content; 
}*/
.list-group {
  border-radius: 0 0 10px 10px;
}

.list-group-item {
  border-left: 1px solid #0070c0;
  border-right: 1px solid #0070c0;
  border-bottom: 1px solid #d9d9d9;
}

  .list-group-item:first-child {
    border-top: 1px solid #0070c0;
  }

  .list-group-item:last-child {
    border-bottom: 1px solid #0070c0;
  }

.repeater-links .list-group-item a {
  font-weight: bold;
}


.repeater-user .label {
  font-weight: bold;
  display: inline-block;
}

.repeater-user ul.list-group li.list-group-item {
  border-top-width: 0px;
}

.block.repeater-user h3::before {
  content: url('/Images/user_h3_24x24.png');
}
.block.repeater-app h3::before {
    content: url('/asset/img/ungdung.png');
}

.block.repeater-links h3::before {
  content: url('/Images/link_h3_24x24.png');
}

.block.repeater-links ul.list-group li.list-group-item {
  font-size: 16px;
  color: #0070c0;
  display: flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

  .block.repeater-links ul.list-group li.list-group-item:before {
    content: url('/Images/global.png');
    margin-right: 8px;
    display: inline-block;
    width: 16px;
    height: 16px;
  }

.block.repeater-offices h3::before {
  content: url('/Images/tracuu_vbh3_24x24.png');
}

.block.repeater-offices ul.list-group li.list-group-item {
  font-size: 16px;
  align-items: center;
}

.block.repeater-offices .office_text {
  font-weight: bold;
}

.block.repeater-offices ul.list-group li.list-group-item:before {
  content: url(/Images/bullet.png);
  margin-right: 8px;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
}

.block.repeater-ecommerce h3::before {
  content: url('/Images/link_h3_24x24.png');
}

.block.repeater-ecommerce .list-group-item a span {
  color: black;
  text-decoration: none;
  font-size: 16px;
}

.block.repeater-ecommerce .list-group-item a:hover {
  text-decoration: none;
}


/* Tab Navigation */
.nav-tabs {
  border-bottom: 1px solid #ddd;
  border: none;
}

  .nav-tabs .nav-item {
    margin-right: 10px;
  }

  .nav-tabs .nav-link {
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border: none;
    font-size: 14px;
  }

    .nav-tabs .nav-link.active {
      text-decoration: underline;
      font-weight: bold;
      color: #0456d6;
      text-underline-offset: 0.5em;
      text-decoration-thickness: 2px
    }

/* Tab Content */
.tab-content {
  padding: 10px 0;
}

.tab-pane {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

  .tab-pane p {
    font-size: 16px;
    color: #333;
    margin: 10px 0;
  }

  .tab-pane span {
    display: block;
    font-size: 15px;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600
  }

  .tab-pane .nav-link.active {
    color: #0056b3;
    border: none;
  }

.post-title-list {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}
/* Wrapper chính cho 2 cột */
.posts-wrapper {
  display: flex;
  gap: 10px;
}

/* Cột bài viết mới nhất */
.latest-post {
  flex:2;
}

.latest-post-content {
  width: 100%;
}


.latest-post-title {
  font-size: 24px;
  font-weight: bold;
}

.latest-post-date {
  color: #999;
  font-size: 14px;
}

.truncate-lines {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /*  max-height: 6em;*/
  line-height: 1.5em;
}


/* Cột bài viết còn lại */
.other-posts {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.post-title-content {
  font-size: 14px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow: ellipsis;
  white-space: normal;
  position: relative;
  padding-left: 24px;
}

.post-date-content {
  font-size: 14px;
  color: #999;
}

.post-title-content::before {
  content: url('/Images/bullet.png');
  margin-right: 8px;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.view-all-link {
  color: white;
  font-size: 14px;
  text-decoration: underline;
  text-transform: none;
  float: right;
  margin-right: 20px;
}

.header-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #0070c0;
  border-radius: 10px 10px 0 0;
  color: white;
  padding-left: 10px;
  align-self: center;
}

  .header-container h3 {
    padding-left: 0;
    color: white;
  }

.category-icon {
  padding-right: 5px;
  justify-content: center;
  top: 45%;
}

.header-container .view-all-link {
  text-transform: none;
  color: white; /* Đảm bảo liên kết có màu trắng */
  margin-left: auto; /* Đẩy liên kết sang bên phải */
}

  .header-container .view-all-link::first-letter {
    text-transform: capitalize;
  }


.view-all-link::first-letter {
  text-transform: capitalize;
}

/* Responsive */
@media (max-width: 576px) {
  .posts-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .latest-post, .other-posts {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .nav-tabs .nav-link {
    font-size: 12px;
    padding: 8px 10px;
  }

  .tab-pane p {
    font-size: 14px;
  }
}

.post-thumbnail {
  width: 90%;
  max-height: 230px;
  border-radius: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa */
  }

  .left-content {
    width: 100%;
    float: none;
  }

  .right-content {
    display: none;
  }
}