/*
 * Trang Tổ chức (/to-chuc/) — module org-structure.
 * PORT design to-chuc.html: tokens-and-header.css + page-hero-shared.css (hero) + home.css (section
 * primitives) + pages-about-org-faculty.css (orgchart/khoa/unit/doan).
 * MỌI rule scope dưới .hf-org — cô lập, KHÔNG đụng global/header/mega/footer theme.
 * Full-bleed: dựa global body{max-width:none} (main.css); .hf-shell căn giữa nội dung.
 * Font Mulish nạp toàn site qua mega-menu.css (@font-face).
 */

.hf-org {
	--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; --radius-lg: 6px;
	--shadow-sm: 0 1px 3px rgba(20,33,61,.05); --shadow-md: 0 4px 14px rgba(20,33,61,.07);
	--maxw: 1360px; --gut: 32px; --ease: cubic-bezier(.22,.61,.36,1);
	color: var(--ink); font-family: 'Mulish', system-ui, sans-serif; line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.hf-org * { box-sizing: border-box; }
.hf-org h1, .hf-org h2, .hf-org h3, .hf-org h4 { margin: 0; line-height: 1.16; letter-spacing: -.01em; font-weight: 700; }
.hf-org p { margin: 0; }
.hf-org a { color: inherit; text-decoration: none; }
.hf-org img { display: block; max-width: 100%; }
.hf-org button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ===== primitives ===== */
.hf-org .hf-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%; }
.hf-org .hf-section { padding: 84px 0; }
.hf-org .hf-section.soft { background: var(--bg-soft); }
.hf-org .hf-head { max-width: 640px; margin-bottom: 40px; }
.hf-org .hf-head h2 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 14px; }
.hf-org .hf-head p { font-size: 17px; color: var(--ink-soft); }
.hf-org .hf-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.hf-org .hf-head-row .hf-head { margin-bottom: 0; }
.hf-org .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-org .hf-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); }
.hf-org .hf-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--blue); transition: gap .18s var(--ease); white-space: nowrap; }
.hf-org .hf-link-arrow:hover { gap: 12px; }

/* ===== hero (page-hero-shared) ===== */
.hf-org .hf-phero { background: var(--blue-700); color: #fff; padding: 46px 0 56px; }
.hf-org .hf-phero h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin: 14px 0 14px; }
.hf-org .hf-phero p { font-size: 17px; color: #dbe5f5; max-width: 620px; }
.hf-org .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; }
.hf-org .hf-crumb a:hover { color: #fff; }
.hf-org .hf-crumb svg { opacity: .5; }

/* ===== org chart (pages-about-org-faculty) ===== */
.hf-org .hf-orgchart { display: flex; flex-direction: column; align-items: center; }
.hf-org .hf-org-node { padding: 14px 28px; border-radius: 4px; font-weight: 800; font-size: 16px; background: #fff; border: 2px solid var(--blue-100); color: var(--ink); box-shadow: var(--shadow-sm); }
.hf-org .hf-org-node.blue { background: var(--blue-700); color: #fff; border-color: transparent; }
.hf-org .hf-org-conn { width: 2px; height: 26px; background: var(--blue-100); }
.hf-org .hf-org-tier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 8px; position: relative; }
.hf-org .hf-org-tier::before { content: ""; position: absolute; top: -8px; left: 16.66%; right: 16.66%; height: 2px; background: var(--blue-100); }
.hf-org .hf-org-branch { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 22px 24px; text-align: center; position: relative; }
.hf-org .hf-org-branch::before { content: ""; position: absolute; top: -8px; left: 50%; width: 2px; height: 8px; background: var(--blue-100); }
.hf-org .hf-org-branch span { display: block; font-weight: 700; font-size: 17px; color: var(--blue); }
.hf-org .hf-org-branch small { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ===== Khoa grid ===== */
.hf-org .hf-khoa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hf-org .hf-khoa-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; display: flex; flex-direction: column; align-items: flex-start; }
.hf-org .hf-khoa-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.hf-org .hf-khoa-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--bg-soft); color: var(--blue); margin-bottom: 14px; transition: transform .18s var(--ease); }
.hf-org .hf-khoa-card:hover .hf-khoa-ic { transform: rotate(-6deg) scale(1.05); }
.hf-org .hf-khoa-card h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 6px; }
.hf-org .hf-khoa-card p { font-size: 13.5px; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
.hf-org .hf-khoa-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; color: var(--orange); transition: gap .16s; }
.hf-org .hf-khoa-card:hover .hf-khoa-link { gap: 11px; }

/* ===== Units ===== */
.hf-org .hf-unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hf-org .hf-unit-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s, transform .15s; text-align: left; width: 100%; }
.hf-org .hf-unit-item:hover { border-color: var(--blue); background: var(--blue-50); transform: translateX(3px); }
.hf-org .hf-unit-kind { flex-shrink: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 4px 10px; border-radius: 4px; width: 78px; text-align: center; }
.hf-org .hf-unit-item:hover .hf-unit-kind { background: #fff; }
.hf-org .hf-unit-name { flex: 1; font-weight: 700; font-size: 14.8px; color: var(--ink); }
.hf-org .hf-unit-item > svg { color: var(--orange); opacity: 0; transition: opacity .15s, transform .15s; flex-shrink: 0; }
.hf-org .hf-unit-item:hover > svg { opacity: 1; transform: translateX(2px); }

/* ===== Đoàn thể ===== */
.hf-org .hf-doan-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hf-org .hf-doan-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 800; font-size: 15px; color: var(--ink); transition: background .15s, color .15s, transform .15s; }
.hf-org .hf-doan-chip svg { color: var(--orange); }
.hf-org .hf-doan-chip:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.hf-org .hf-doan-chip:hover svg { color: #fff; }

/* ===== Responsive (port pages-about-org-faculty + tokens mobile gut) ===== */
@media (max-width: 960px) {
	.hf-org .hf-khoa-grid { grid-template-columns: repeat(2, 1fr); }
	.hf-org .hf-org-tier { grid-template-columns: 1fr; }
	.hf-org .hf-org-tier::before { display: none; }
	.hf-org .hf-org-branch::before { display: none; }
}
@media (max-width: 720px) {
	.hf-org .hf-khoa-grid, .hf-org .hf-unit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.hf-org { --gut: 18px; }
	.hf-org .hf-section { padding: 56px 0; }
}

/* ===== Anchor scroll (module mapping-page) — mega-menu "Tổ chức" trỏ /to-chuc/#<id> ===== */
/* 140px = chiều cao cố định .hf-header (mega-menu.css: .hf-utility 38px + .hf-nav-in 96px,
   KHÔNG đổi khi cuộn — [data-scrolled] chỉ thêm box-shadow) + 6px đệm, tránh section bị header sticky che. */
.hf-org section[id] { scroll-margin-top: 140px; }

/* Selector "html" trông global nhưng hiệu lực thực tế chỉ trên /to-chuc/, vì file này CHỈ được
   hf_org_assets() enqueue khi is_page_template('templates/organization.php'). KHÔNG copy rule
   này sang main.css — sẽ đổi hành vi scroll toàn site ngoài ý muốn. */
html { scroll-behavior: smooth; }