/* HZ Group v2 — Tin tức & Sự kiện (Figma 200-23816 / 200-24403 / 200-24971). Thẻ bài viết: article.css */

/* ---------- hero ---------- */
.news-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 500px; background: radial-gradient(61.8% 61.8% at 87% 45%, #174a6c 0%, rgba(23, 74, 108, 0) 100%), #092e4a; color: var(--white); }
.news-hero__art { position: absolute; left: 49%; top: 0; width: 763px; height: 500px; opacity: .28; pointer-events: none; }
.news-hero__inner { position: relative; padding-block: 32px; }
.news-hero__crumb { gap: 12px; color: #b8d1e2; }
.news-hero__crumb a:hover { color: var(--white); }
.news-hero__crumb span[aria-hidden] { opacity: 1; }
.news-hero__eyebrow { margin-top: 24px; color: #75c9ff; }
.news-hero__title { margin-top: 14px; font: 500 64px/76.8px var(--font-head); letter-spacing: -.03em; color: var(--white); }
.news-hero__lead { max-width: 550px; margin-top: 20px; font: 400 18px/28.8px var(--font); color: #d9e7f0; }

/* ---------- bộ lọc + danh sách ---------- */
.news-dir { padding-top: 46px; padding-bottom: 72px; }
.news-dir__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.news-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.news-chip { padding: 9px 14px; border: 1px solid #dce6ed; border-radius: 5px; background: var(--white); font: 500 14px/23.1px var(--font); color: var(--slate); transition: background-color .2s, border-color .2s, color .2s; }
.news-chip:hover { border-color: var(--blue); color: var(--blue); }
.news-chip.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.news-search { display: flex; flex: 0 0 220px; align-items: center; gap: 10px; height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); transition: border-color .2s, box-shadow .2s; }
.news-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 114, 184, .08); }
.news-search svg { width: 17px; height: 17px; flex: none; color: var(--slate); }
.news-search input { flex: 1; width: 0; min-width: 0; height: 26px; padding: 1px 2px; border: 0; background: transparent; outline: none; font: 400 16px/19.36px var(--font); color: var(--navy); }
.news-search input::placeholder { color: #757575; }
.news-search input::-webkit-search-cancel-button { cursor: pointer; }
.news-dir__status { display: flex; justify-content: space-between; gap: 24px; padding-top: 34px; font: 400 13px/21.45px var(--font); color: var(--slate); }
.news-dir__grid { margin-top: 24px; }
.news-empty { margin-top: 24px; padding: 56px 24px; border: 1px dashed #c9dce9; border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.news-empty h2 { font: 500 24px/33.6px var(--font-head); letter-spacing: -.02em; color: var(--navy); }
.news-empty p { margin-top: 8px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.news-empty .btn { margin-top: 22px; }


@media (max-width: 1179px) {
  .news-hero__art { left: 43%; width: 626px; opacity: .18; }
  .news-hero__title { font-size: 48px; line-height: 57.6px; }
  .news-dir { padding-top: 36px; padding-bottom: 64px; }
  .news-dir__controls { flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 24px; }
  .news-chip { padding: 9px 12px; font-size: 13px; line-height: 20px; }
  .news-search { flex: none; }
  .news-search svg { margin-right: 2px; }
  .news-dir__status { padding-top: 28px; font-size: 12px; line-height: 19.8px; }
  .news-dir .news-card__excerpt { margin-bottom: 22px; }
}
@media (max-width: 639px) {
  .news-hero { min-height: 440px; }
  .news-hero__art { left: 40%; width: 429px; height: 440px; opacity: .13; }
  .news-hero__inner { padding-block: 36px; }
  .news-hero__crumb { font-size: 12px; line-height: 19.8px; }
  .news-hero__eyebrow { font-size: 12px; line-height: 16.8px; }
  .news-hero__title { font-size: 36px; line-height: 43.2px; }
  .news-hero__lead { font-size: 16px; line-height: 25.6px; }
  .news-dir { padding-top: 30px; padding-bottom: 48px; }
  .news-dir__controls { gap: 20px; padding-bottom: 28px; }
  .news-chips { gap: 7px; }
  .news-search svg { margin-right: 1px; }
  .news-chip { padding: 9px 11px; line-height: 21.45px; }
  .news-dir__status { padding-top: 24px; }
  .news-dir .news-card__excerpt { margin-bottom: 24px; }
}