/* ==========================================================================
   section-9-tintuc.css — Tin tức nổi bật (Figma node 1134:2767)
   Nền trắng, tiêu đề trái + tab lọc danh mục, lưới card tin nền ảnh với
   gradient tối ở chân card (chip danh mục · ngày · tiêu đề · "Đọc tiếp").
   ========================================================================== */

.tintuc {
  /* Dùng lại để neo bố cục theo chiều cao dòng tiêu đề */
  --tintuc-title-fs: clamp(2.25rem, 4vw, 3.125rem);
  --tintuc-title-lh: 1.1;
  background-color: var(--dsh-white);
  padding-block: clamp(64px, 7vw, 120px);
}

/* -------- Đầu section: tiêu đề + tab lọc -------- */
.tintuc-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.tintuc-title {
  color: var(--dsh-ink);
  font-size: var(--tintuc-title-fs);
  font-weight: 700;
  line-height: var(--tintuc-title-lh);
  margin: 0 0 var(--space-4);
}

/* Pill lọc — Figma: chữ 20px/medium, padding 6px 16px, bo 8px,
   viền rgba(13,37,69,.15), chữ slate; tab active nền đỏ brand. */
.tintuc .filter-pills { gap: 10px; }

/* Mobile (Figma op1-3-mobile): tab lọc nằm gọn một hàng, cuộn ngang khi tràn */
@media (max-width: 991.98px) {
  .tintuc .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tintuc .filter-pills::-webkit-scrollbar { display: none; }
  .tintuc .filter-pills .nav-item { flex: 0 0 auto; }
}

/* Figma: hàng pill rộng ~631px = đúng bề rộng card tin đầu tiên (626px)
   ⇒ tab nằm trọn trong lane cột 1, tràn thì xuống dòng chứ không co chữ. */
@media (min-width: 992px) {
  .tintuc .filter-pills {
    max-width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 10px;
  }
}

.tintuc .filter-pills .nav-link {
  border-radius: var(--radius);
  border-color: rgba(13, 37, 69, .15);
  color: var(--dsh-slate);
  /* Cỡ chữ đủ nhỏ để 5 tab luôn nằm trọn một hàng trong lane cột 1 */
  font-size: clamp(0.8125rem, .78vw, 1rem);
  font-weight: 500;
  line-height: 1.65;
  padding: 6px clamp(9px, .7vw, 14px);
  white-space: nowrap;
}

.tintuc .filter-pills .nav-link.active { color: var(--dsh-white); }

/* Ngăn cách giữa nhóm pill danh mục và nhóm pill thẻ */
.tintuc .filter-pills .filter-sep {
  align-self: stretch;
  width: 1px;
  padding: 0;
  margin-inline: 6px;
  background-color: rgba(13, 37, 69, .15);
}

/* Pill lọc theo thẻ — sắc vàng kim để phân biệt với pill danh mục */
.tintuc .filter-pills .nav-link--tag {
  color: #8a6d1f;
  border-color: rgba(201, 168, 76, .45);
}

.tintuc .filter-pills .nav-link--tag:hover {
  color: #8a6d1f;
  border-color: var(--dsh-gold);
}

.tintuc .filter-pills .nav-link--tag.active {
  color: var(--dsh-white);
  background-color: var(--dsh-gold);
  border-color: var(--dsh-gold);
}

/* Cột chứa card đã bị lọc bỏ thì thu lại, tránh để lỗ trống trong lưới */
.tintuc .col:has(> .news-item.is-hidden),
.tintuc [class*="col-"]:has(> .news-item.is-hidden) { display: none; }

/* Cột card nhỏ bọc nhiều bài: ẩn cả cột khi không còn bài nào hiển thị,
   để lưới auto-fit lúc lọc không chừa một track rỗng. */
.tintuc .tintuc-col--narrow:not(:has(.news-item:not(.is-hidden))) { display: none; }

/* -------- Card tin -------- */
.news-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--dsh-white);
  background-color: var(--dsh-ink);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.25rem rgba(13, 37, 69, .22);
}

.news-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Hover: phóng to ảnh trong khung card (card đã overflow:hidden nên ảnh bị cắt gọn) */
.news-card:hover .news-card-img,
.news-card:focus-visible .news-card-img { transform: scale(1.07); }

/* Phủ tối nhẹ toàn ảnh để chip/chữ luôn đọc được */
.news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(13, 37, 69, .45) 0%, rgba(13, 37, 69, 0) 45%);
  pointer-events: none;
}

/* Chip danh mục góc trên trái */
.news-chip {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dsh-white);
  background-color: var(--dsh-red);
  border: .653px solid rgba(154, 18, 32, .31);
  border-radius: var(--radius);
  padding: .3rem .75rem;
}

/* Khối nội dung dưới đáy card, nền gradient trong suốt → đen */
.news-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(20px, 2vw, 32px);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 60%);
}

.news-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .875rem;
  color: var(--dsh-white);
  margin: 0;
}

.news-date img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.news-heading {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dsh-white);
  margin: 0;
}

.news-excerpt {
  font-size: .8125rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, .88);
  margin: 0;
}

.news-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--dsh-white);
}

.news-more img {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-base);
}

.news-card:hover .news-more img { transform: translateX(4px); }

/* -------- Thẻ (tag) dùng chung — chip nhỏ dưới tiêu đề tin -------- */
.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--dsh-gold);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: var(--radius);
  background-color: rgba(201, 168, 76, .08);
}

/* -------- Chiều cao theo bố cục Figma (mosaic 3 cột) --------
   Cột giữa cao nhất (746px), cột trái 597px, cột phải 2 card 368px. */
@media (min-width: 992px) {
  /* Lưới 3 cột theo Figma (626 / 574 / 447 px) — cột 3 hẹp nhất.
     Tiêu đề + tab và card lớn dùng chung ô cột 1: tiêu đề neo mép trên,
     card lớn neo mép dưới ⇒ ba cột kết thúc cùng một mép dưới. */
  .tintuc-layout {
    display: grid;
    /* fr chia phần còn lại sau gutter ⇒ đúng tỉ lệ 626/574/447 của Figma */
    grid-template-columns: 626fr 574fr 447fr;
    column-gap: 24px;
    /* Bỏ gutter âm + padding của .row: khoảng cách do grid/flex đảm nhiệm */
    margin: 0;
  }

  /* .row > * của Bootstrap dùng margin-top: gutter-y — phải khử cả margin */
  .tintuc-layout > * { padding: 0; margin-top: 0; }

  /* Hai card nhỏ cột 3: dùng flex + gap thay gutter âm của Bootstrap row */
  .tintuc-col--narrow > .row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
  }

  .tintuc-col--narrow > .row > * { width: 100%; padding: 0; margin-top: 0; }

  .tintuc-head,
  .tintuc-col--wide {
    grid-column: 1;
    grid-row: 1;
  }

  /* Tâm dòng tiêu đề nằm ngang mép trên của cột cao nhất (Figma: 124 ≈ 126) */
  .tintuc-head {
    align-self: start;
    margin-top: calc(var(--tintuc-title-fs) * var(--tintuc-title-lh) / -2);
    margin-bottom: 0;
  }

  .tintuc-col--wide   { align-self: end; }
  .tintuc-col--mid    { grid-column: 2; grid-row: 1; }
  .tintuc-col--narrow { grid-column: 3; grid-row: 1; }

  /* Chiều cao theo Figma, co giãn theo viewport (canvas gốc 1920px) */
  .news-card--lg   { min-height: min(31.1vw, 597px); }
  .news-card--tall { min-height: min(38.9vw, 746px); }
  .news-card--sm   { min-height: min(18.8vw, 361px); }

  /* -------- Khi đang lọc theo danh mục/thẻ --------
     Bỏ hẳn kiểu mosaic chồng tiêu đề: tiêu đề về hàng riêng, các card khớp
     tự dàn bằng auto-fit. Nhờ vậy lọc còn 1 card cũng không tràn lên tiêu đề,
     và card lẻ giãn đầy bề rộng thay vì lọt thỏm 1 cột. */
  .tintuc.is-filtered .tintuc-layout {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }

  .tintuc.is-filtered .tintuc-head {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }

  .tintuc.is-filtered .tintuc-col--wide,
  .tintuc.is-filtered .tintuc-col--mid,
  .tintuc.is-filtered .tintuc-col--narrow {
    grid-column: auto;
    grid-row: 2;
    align-self: start;
  }

  /* Cào bằng chiều cao card khi lọc để lưới gọn gàng */
  .tintuc.is-filtered .news-card--lg,
  .tintuc.is-filtered .news-card--tall,
  .tintuc.is-filtered .news-card--sm { min-height: min(28vw, 440px); }

  /* -------- Ít bài: bỏ mosaic chồng tiêu đề để không bị tràn --------
     Tiêu đề về hàng riêng ở trên, card xếp bên dưới theo thứ tự. */
  .tintuc-layout--one,
  .tintuc-layout--two {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .tintuc-layout--one .tintuc-head,
  .tintuc-layout--two .tintuc-head {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* 1 bài → card lớn chiếm trọn bề rộng; 2 bài → hai card cạnh nhau */
  .tintuc-layout--one .tintuc-col--wide { grid-column: 1 / -1; }
  .tintuc-layout--two .tintuc-col--wide { grid-column: 1; }
  .tintuc-layout--two .tintuc-col--mid  { grid-column: 2; }

  .tintuc-layout--one .tintuc-col--wide,
  .tintuc-layout--two .tintuc-col--wide,
  .tintuc-layout--two .tintuc-col--mid {
    grid-row: 2;
    align-self: stretch;
  }

  .tintuc-layout--one .news-card--lg,
  .tintuc-layout--two .news-card--lg,
  .tintuc-layout--two .news-card--tall { min-height: min(30vw, 520px); }
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .news-card-img,
  .news-more img { transition: none; }

  .news-card:hover .news-card-img { transform: none; }
}