/* ============================================================
   Trang chi tiết "Đơn vị" (Phòng/Trung tâm/Viện) — module unit-page.
   Copy NGUYÊN giá trị các block dùng chung từ faculty-detail.css
   (.hf-phero/.hf-tag/.hf-khoa-sec/.hf-fitlist/.hf-fit-ic/.hf-pd-*/
   .hf-link-arrow) — GIỮ ĐÚNG số đo vì các class này dùng chung tên với
   CSS toàn site (mega-menu, các module khác) — lệch giá trị sẽ đè style
   nơi khác do enqueue sau (bài học từ bug leak ở module news-events).
   Enqueue conditional: chỉ trang is_singular('unit').
   ============================================================ */

: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: #ffffff;
  --bg-soft: #f5f8fc;
  --radius: 4px;
  --shadow-md: 0 4px 14px rgba(20,33,61,.07);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

/* ============ Breadcrumb + Hero (từ faculty-detail.css) ============ */
.hf-unit .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-unit .hf-phero .hf-crumb svg { opacity: .5; }
.hf-unit .hf-phero .hf-crumb a:hover { color: #fff; }
.hf-unit .hf-phero .hf-crumb span[aria-current] { color: #fff; }
.hf-unit .hf-phero { background: var(--blue-700); color: #fff; padding: 46px 0 56px; }
.hf-unit .hf-phero h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin: 14px 0 14px; }
.hf-unit .hf-phero p { font-size: 17px; color: #dbe5f5; max-width: 620px; }

.hf-unit .hf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 11px; border-radius: 4px; background: rgba(255,255,255,.18); color: #fff; }

/* ============ Layout 2 cột ============ */
.hf-unit .hf-khoa-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding: 56px 0 80px; align-items: start; }
@media (max-width: 860px) {
  .hf-unit .hf-khoa-wrap { grid-template-columns: 1fr; }
  .hf-unit .hf-pd-side { position: static !important; }
}

.hf-unit .hf-khoa-sec { margin-bottom: 44px; }
.hf-unit .hf-khoa-sec h2 { font-size: 24px; margin-bottom: 16px; }

/* ============ Chức năng – Nhiệm vụ ============ */
.hf-unit .hf-fitlist { display: grid; gap: 10px; margin-top: 6px; }
.hf-unit .hf-fitlist li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.hf-unit .hf-fit-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #d8f0e0; color: #1f8a5b; flex-shrink: 0; margin-top: 1px; }

/* ============ Sidebar ============ */
.hf-unit .hf-pd-side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 18px; }
.hf-unit .hf-pd-cta-card { background: var(--blue-700); color: #fff; border-radius: var(--radius); padding: 26px; }
.hf-unit .hf-pd-cta-card h3 { font-size: 20px; }
.hf-unit .hf-pd-cta-card p { font-size: 14.5px; color: #c9d8f1; margin: 8px 0 18px; }
.hf-unit .hf-pd-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.hf-unit .hf-pd-contact a { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #dbe5f5; text-decoration: none; }
.hf-unit .hf-pd-contact a:hover { color: #fff; }
.hf-unit .hf-pd-related { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.hf-unit .hf-pd-related h4 { font-size: 16px; margin-bottom: 12px; }
/* Design gốc dùng <button> (tĩnh, không link) — module này render <a> THẬT
   (link tới trang đơn vị khác), nên selector nhắm .hf-pd-related > a thay vì button. */
.hf-unit .hf-pd-related > a:not(.hf-link-arrow) { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; transition: color .14s; }
.hf-unit .hf-pd-related > a:not(.hf-link-arrow):hover { color: var(--blue); }
.hf-unit .hf-pd-related > a svg { color: var(--orange); flex-shrink: 0; }

.hf-unit .hf-link-arrow {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--blue);
  font-size: 15px; text-decoration: none; transition: gap .18s var(--ease);
}
.hf-unit .hf-link-arrow:hover { gap: 12px; }

/* ============ Reveal animation ============ */
.hf-unit .hf-reveal {
  opacity: 0; transform: translateY(40px); filter: blur(4px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  will-change: opacity, transform, filter;
}
.hf-unit .hf-reveal.in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .hf-unit .hf-reveal, .hf-unit .hf-reveal * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

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