/* ============================================================
   HUFLIT — TRANG CON của Phòng Tổ chức – Hành chính (module tchc-subpages).
   Dùng KÈM tchc-page.css: trang con tái dùng nguyên thẻ tin, dòng tài liệu,
   thẻ tuyển dụng, dải kêu gọi… của trang chính. File này chỉ thêm phần MỚI:
   hero rút gọn, thanh tab kiểu điều hướng-giữa-trang, bộ lọc, phân trang,
   trạng thái rỗng.
   Namespace: .hf-tchc-sub-* (hero, docs…). Wrapper trang là .hf-tchc-subpage — KHÔNG
   dùng .hf-tchc-sub trần: tên đó tchc-page đã lấy cho khối tiêu đề con trong panel
   (tchc-page.css dòng 137-140) và sẽ đổ margin + cỡ chữ h3/p lên cả trang.
   Mọi selector vẫn nằm trong .hf-tchc nên kế thừa hết token & component.
   ============================================================ */

/* ============ Hero rút gọn ============ */
/* Trang con không cần hero cao như trang chính — nó là trang danh sách, nội dung
   mới là thứ người dùng tới xem. */
.hf-tchc .hf-tchc-sub-hero { padding: 34px 0 38px; }
.hf-tchc .hf-tchc-sub-hero h1 { font-size: clamp(26px, 3.4vw, 38px); margin: 12px 0 12px; }
.hf-tchc .hf-tchc-sub-hero p { font-size: 16px; max-width: 700px; }

/* ============ Thanh tab trên trang con ============ */
/* Tab của phần ĐANG XEM sáng lên và KHÔNG phải link (đang ở chính phần đó rồi).
   5 tab còn lại quay về TRANG CHÍNH và cuộn tới đúng khối — chúng KHÔNG dẫn sang
   trang con khác (user chốt 2026-09-04).
   Trạng thái `on` do server đánh dấu theo trang đang xem, không phải scroll-spy.
   Bỏ sticky: trang con là danh sách có phân trang, không dài như trang chính. */
.hf-tchc .hf-tchc-tabbar.is-nav { position: static; }

/* ============ Neo tới khối sau khi lọc ============ */
/* Form lọc là GET nên submit = nạp lại cả trang; khối tra cứu nằm cuối trang Quy trình
   – Biểu mẫu nên không neo lại thì người dùng bấm tìm xong bị đẩy về đầu trang.
   `action` mang theo `#tra-cuu`, và chừa chỗ ở đây để tiêu đề khối không chui dưới
   header (`.hf-header` sticky top:0, cao 38 + 96 = 134px — mega-menu.css:94,108).
   Trang con KHÔNG có thanh tab dính nên chỉ phải trừ chiều cao header. */
.hf-tchc #tra-cuu { scroll-margin-top: 150px; }

/* ============ Bộ lọc ============ */
/* Chỉ 3 trường mà mô hình dữ liệu hiện tại đáp ứng được: từ khoá, chuyên mục, tháng.
   (Bản gốc tchcdev có 5 trường nhưng lọc chung cả tài liệu — tài liệu bên mình là
   repeater ACF nên không truy vấn chung với bài viết được. User chốt 2026-09-04.) */
.hf-tchc-filter {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr auto;
  gap: 12px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 32px;
}
.hf-tchc-filter-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hf-tchc-filter-f label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.hf-tchc-filter-f input,
.hf-tchc-filter-f select {
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; width: 100%;
  transition: border-color .15s, background .15s;
}
.hf-tchc-filter-f input:focus,
.hf-tchc-filter-f select:focus {
  outline: none; background: #fff; border-color: var(--blue);
}
.hf-tchc-filter-f input::placeholder { color: var(--muted); font-weight: 600; }
/* Trang Biểu mẫu: từ khoá (2 cột) · nhóm con biểu mẫu · nút (tchc-content-upload iter 3).
   Màn hẹp: mỗi ô một hàng đủ rộng — xem @media 1100px bên dưới. */
.hf-tchc-filter--groups > .hf-tchc-filter-f:first-child { grid-column: span 2; }

/* ============ Đếm kết quả ============ */
.hf-tchc-count {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px;
}
.hf-tchc-count strong { font-size: 16px; color: var(--ink); font-weight: 800; }

/* ============ Danh sách tài liệu — bản trang con ============ */
/* Trang chính bọc danh sách trong .hf-tchc-panel; trang con thì danh sách LÀ nội
   dung chính nên bỏ khung, cho thoáng. */
.hf-tchc .hf-tchc-sub-docs { display: grid; gap: 12px; }
.hf-tchc .hf-tchc-sub-docs .hf-tchc-doc { background: #fff; padding: 16px 18px; }
.hf-tchc a.hf-tchc-doc:hover { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }

/* ============ Thẻ tuyển dụng — thêm ảnh ============ */
/* Badge "Hạn nộp" đã GỠ 2026-09-04: CPT `new` không có trường hạn nộp, thông tin đó
   nằm trong mô tả bài. Vẽ badge = hứa một dữ liệu không tồn tại. */
/* Lưới tuyển dụng chỉ 2 cột nên thẻ rộng ~600px; để nguyên 16:9 thì ảnh cao ~340px,
   lấn hết phần chữ. Chặn trần chiều cao — ảnh vẫn cắt theo object-fit: cover. */
.hf-tchc .hf-tchc-job-media {
  margin: -20px -22px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; aspect-ratio: 16 / 9; max-height: 180px;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
}
.hf-tchc .hf-tchc-job-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Phân trang ============ */
.hf-tchc-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 40px; flex-wrap: wrap;
}
.hf-tchc-pager a,
.hf-tchc-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
  font-weight: 800; font-size: 14.5px; color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.hf-tchc-pager a:hover { border-color: var(--blue-100); color: var(--blue); }
.hf-tchc-pager .is-current { background: var(--blue); border-color: var(--blue); color: #fff; }
.hf-tchc-pager .is-disabled { opacity: .45; }

/* ============ Trạng thái rỗng ============ */
/* Danh sách có bộ lọc thì PHẢI có trạng thái này — lọc không ra kết quả mà trang
   trắng trơn thì người dùng tưởng hỏng. */
.hf-tchc-empty {
  text-align: center; padding: 56px 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); color: var(--ink-soft);
}
.hf-tchc-empty strong { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.hf-tchc-empty p { font-size: 14.5px; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .hf-tchc-filter { grid-template-columns: 1fr 1fr; }
  .hf-tchc-filter .hf-tchc-filter-sub { grid-column: 1 / -1; }
  .hf-tchc-filter--groups > .hf-tchc-filter-f,
  .hf-tchc-filter--groups > .hf-tchc-filter-f:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* .hf-nav-in co còn 84px → header 38 + 84 = 122. */
  .hf-tchc #tra-cuu { scroll-margin-top: 138px; }
}
@media (max-width: 640px) {
  .hf-tchc-filter { grid-template-columns: 1fr; padding: 18px; }
  .hf-tchc .hf-tchc-sub-hero { padding: 26px 0 30px; }
}
@media (max-width: 599px) {
  /* .hf-nav-in co còn 72px → header 38 + 72 = 110. */
  .hf-tchc #tra-cuu { scroll-margin-top: 126px; }
}