/* ============================================================
   Trang "Tin tức & Sự kiện" (News & Events) — module news-events.
   Hero + chip lọc danh mục (link thật) + grid tin tức phân trang (WP_Query
   thật) + sidebar "Sự kiện sắp tới" (CPT event thật) + box newsletter (UI
   tĩnh). Port từ page-hero-shared.css: .hf-news-layout/.hf-chips/.hf-chip/
   .hf-newscard/.hf-news-aside/.hf-events-card/.hf-event…/.hf-news-sub/
   .hf-foot-form. Conditional enqueue: chỉ trang có block acf_fc_layout
   tiền tố "news_".
   ============================================================ */

:root {
  --blue:      #17479D;
  --orange:    #EE6823;
  --blue-700:  #0f3270;
  --blue-50:   #eef3fb;
  --blue-100:  #dde7f6;
  --orange-50: #fdf0e7;
  --ink:       #14213d;
  --ink-soft:  #4a5a76;
  --muted:     #7a879c;
  --line:      #e4eaf2;
  --bg-soft:   #f5f8fc;
  --radius:    4px;
  --shadow-sm: 0 2px 8px rgba(20,33,61,.06);
  --shadow-md: 0 10px 30px rgba(20,33,61,.10);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

.hf-phero, .hf-news-layout {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Resets có phạm vi ---- */
.hf-phero a:not(.hf-btn), .hf-phero button:not(.hf-btn) { color: inherit; text-decoration: none; }
.hf-phero h1, .hf-news-layout h1, .hf-news-layout h2, .hf-news-layout h3, .hf-news-layout h4 {
  margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700;
}

/* ============ Breadcrumb + Hero ============ */
.hf-phero .hf-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 10px; flex-wrap: wrap; }
.hf-phero .hf-crumb svg { opacity: .5; }
.hf-phero .hf-crumb a:hover { color: #fff; }
.hf-phero .hf-crumb span[aria-current] { color: #fff; }
.hf-phero { background: var(--blue-700); color: #fff; padding: 46px 0 56px; }
.hf-phero h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin: 14px 0 14px; }
.hf-phero p { font-size: 17px; color: #dbe5f5; max-width: 680px; }

.hf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange);
}
.hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }

/* ============ Layout 2 cột ============ */
.hf-news-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding-top: 44px; padding-bottom: 80px; align-items: start; }
@media (max-width: 860px) {
  .hf-news-layout { grid-template-columns: 1fr; }
  .hf-news-aside { position: static !important; }
}

/* ============ Chips lọc danh mục (link thật) ============ */
.hf-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.hf-chip { padding: 8px 16px; border-radius: 4px; font-weight: 700; font-size: 14px; background: var(--bg-soft); color: var(--ink-soft); transition: background .14s, color .14s; text-decoration: none; }
.hf-chip:hover { background: var(--blue-50); color: var(--blue); }
.hf-chip.on { background: var(--blue); color: #fff; }

/* ============ Grid tin tức (.hf-newscard là <a> thật) ============ */
.hf-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hf-newscard { display: block; text-align: left; color: var(--ink); text-decoration: none; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.hf-newscard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.hf-newscard-body { padding: 18px 20px 22px; }
.hf-newscard-body h3 { font-size: 17.5px; margin: 10px 0 12px; line-height: 1.3; }
.hf-news-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
/* Scope dưới .hf-newscard-body — .hf-tag cũng là class badge trong
   mega-menu.css (border-radius pill 999px); không scope sẽ đè thành bo
   góc 4px cho badge mega-menu trên chính trang này (enqueue sau, priority 22 > 21). */
.hf-newscard-body .hf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 4px; }
.hf-newscard-body .hf-tag-blue { background: var(--blue-50); color: var(--blue); }
.hf-newscard-body .hf-tag-orange { background: var(--orange-50); color: var(--orange); }
@media (max-width: 640px) { .hf-news-grid { grid-template-columns: 1fr; } }

.hf-ne-empty { color: var(--ink-soft); font-size: 15px; padding: 30px 0; }

/* ============ Loading state khi chip lọc AJAX đang fetch ============ */
.hf-news-grid-wrap.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* ============ Pagination (tự dựng — design gốc không có mẫu) ============ */
.hf-ne-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hf-ne-pagination a, .hf-ne-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 4px; font-weight: 700; font-size: 14px; text-decoration: none; }
.hf-ne-pagination a { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); transition: background .14s, color .14s, border-color .14s; }
.hf-ne-pagination a:hover { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100); }
.hf-ne-pagination span.current { background: var(--blue); color: #fff; }
.hf-ne-pagination span.dots { background: transparent; border: none; color: var(--muted); }

/* ============ Sidebar ============ */
.hf-news-aside { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 20px; }
.hf-events-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.hf-events-card > h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; margin-bottom: 18px; color: var(--blue); }
/* Revision 4 — hiện 4 sự kiện trong tầm nhìn, phần còn lại xem bằng thanh cuộn.
 *
 * --hf-ev-view = chiều cao vùng nhìn, ĐO TỪ THỰC TẾ chứ không suy từ công thức:
 * thẻ sự kiện cao 88–160px tuỳ tiêu đề 1 hay 2 dòng và có hay không có nút "Đăng ký tham gia",
 * nên không có "chiều cao 1 thẻ" cố định để nhân 4. Số dưới đây lấy từ phép đo đáy thẻ thứ 4
 * so với đỉnh danh sách ở từng breakpoint (588 / 473 / 589), làm tròn lên cho thẻ thứ 4 hiện trọn.
 *
 * Vì phụ thuộc độ dài tiêu đề thật, "4 thẻ" là mục tiêu thị giác chứ không phải hằng số tuyệt đối —
 * tiêu đề dài bất thường có thể làm lộ thêm/bớt một phần thẻ. Muốn chính xác tuyệt đối thì phải
 * đo bằng JS, cố ý KHÔNG làm để khối này không cần JS. */
.hf-events-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  --hf-ev-view: 600px;
  max-height: var(--hf-ev-view);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px; /* chừa chỗ cho thanh cuộn, chữ không dính mép */
}
@media (max-width: 900px) { .hf-events-list { --hf-ev-view: 500px; } }
@media (max-width: 560px) { .hf-events-list { --hf-ev-view: 600px; } }
/* Thanh cuộn mảnh, cùng tông xanh của khối thay vì thanh mặc định của hệ điều hành */
.hf-events-list { scrollbar-width: thin; scrollbar-color: var(--blue-100, #c9d8f2) transparent; }
.hf-events-list::-webkit-scrollbar { width: 6px; }
.hf-events-list::-webkit-scrollbar-track { background: transparent; }
.hf-events-list::-webkit-scrollbar-thumb { background: var(--blue-100, #c9d8f2); border-radius: 3px; }
.hf-events-list::-webkit-scrollbar-thumb:hover { background: var(--blue, #17479d); }

.hf-event { display: flex; gap: 14px; }
.hf-event + .hf-event { border-top: 1px solid var(--line); padding-top: 18px; }
/* Clamp 2 dòng — điều kiện để --hf-ev-item ở trên là con số đáng tin */
.hf-event-body h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Trạng thái rỗng — khi không còn sự kiện nào sắp tới */
.hf-events-empty { font-size: 14px; color: var(--muted); margin: 0; }
.hf-event-date { width: 54px; flex-shrink: 0; text-align: center; background: var(--blue-50); border-radius: 4px; padding: 8px 0; height: fit-content; }
.hf-event-date strong { display: block; font-size: 22px; font-weight: 700; color: var(--blue); line-height: 1; }
.hf-event-date span { font-size: 11px; font-weight: 800; color: var(--blue); letter-spacing: .04em; }
.hf-event-body h4 { font-size: 15.5px; margin-bottom: 8px; line-height: 1.3; }
.hf-event-body > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.hf-event-reg { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 800; font-size: 13px; color: var(--orange); text-decoration: none; }
.hf-event-reg:hover { gap: 10px; }

.hf-news-sub { background: var(--orange); color: #fff; border-radius: var(--radius); padding: 24px; }
.hf-news-sub h3 { font-size: 18px; }
.hf-news-sub p { font-size: 14px; margin: 8px 0 16px; color: #fff3ea; }
/* Scope dưới .hf-news-sub — .hf-foot-form cũng là class của form newsletter
   TOÀN SITE trong footer-new.css; không scope sẽ đè style footer trên
   chính trang này (CSS chỉ enqueue conditional ở trang có block news_*). */
.hf-news-sub .hf-foot-form { display: flex; gap: 8px; }
.hf-news-sub .hf-foot-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-family: inherit; outline: none; }
.hf-news-sub .hf-foot-form input::placeholder { color: #fff0ea; opacity: .8; }
.hf-news-sub .hf-foot-form.light input { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.hf-news-sub .hf-foot-form button { width: 46px; flex-shrink: 0; border-radius: 4px; background: var(--blue); color: #fff; display: grid; place-items: center; transition: transform .15s; border: none; cursor: not-allowed; }

/* ============ Reveal animation ============ */
.hf-reveal {
  opacity: 0; transform: translateY(56px) scale(.97); filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  will-change: opacity, transform, filter;
}
.hf-reveal.in { opacity: 1; transform: none; filter: blur(0); }
.hf-reveal .hf-newscard {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hf-reveal.in .hf-newscard { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hf-reveal, .hf-reveal * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 720px) {
  .hf-phero { padding: 34px 0 40px; }
}