/* ================================
   Carousel & Responsive Images (Home-specific)
================================ */

/* Cho hình ảnh carousel: sử dụng 100% chiều rộng và tự động tính chiều cao theo tỉ lệ mong muốn.
   Nếu muốn đảm bảo tỉ lệ cố định, bạn có thể sử dụng aspect-ratio. */
.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.img-fluid {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Nếu bạn muốn đặt tỉ lệ cố định cho carousel, áp dụng vào container của carousel-item:
   Ví dụ: tỉ lệ 16:9 */
.carousel-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}


/* ================================
   Section Titles (Home-specific)
================================ */
.subtype-title {
  background-color: var(--primary-color);
  color: var(--header-text-color);
  padding: 0.5rem 1rem;
  border-radius: 0.125rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  margin: 1.25rem 0;
}

/* ================================
   Dynamic Content (Home-specific)
================================ */
.dynamic-content h3 {
  color: var(--primary-color);
  font-weight: bold;
}

.dynamic-content p {
  color: var(--primary-color);
  font-size: 1rem;
}

/* ================================
   Responsive Design (Home-specific adjustments)
================================ */

/* Với thuộc tính aspect-ratio, hình ảnh card và carousel tự động thích ứng.
   Tuy nhiên, bạn có thể điều chỉnh lại font-size, margin, max-width của tiêu đề nếu cần. */
@media (max-width: 768px) {
  .subtype-title {
    font-size: 1rem;
    margin: 0.625rem 0;
  }

  .col2-banner {
    margin-top: 16px;
  }
}
/* Bọc tiêu đề và nút trong một container flexbox */
.subtype-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.125rem;
}
/* Nút "Xem tất cả" */
.subtype-header a {
    color: var(--header-text-color);
    padding: 0.5rem 1rem;
    border-radius: 0.125rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Đảm bảo kích thước đồng đều trên thiết bị di động */
@media (max-width: 576px) {
    .col2-banner {
      margin-top: 16px;
    }
    
    .subtype-header {
        flex-direction: row;
        align-items: center;
    }
    
    .subtype-title {
        font-size: 1rem;
        flex-grow: 1; /* Giúp tiêu đề co giãn */
        flex: 1;
    }

    .subtype-header a {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }
}