/* Hallmark · macrostructure: Long Document · tone: editorial-institutional · anchor hue: teal 190°
 * Pre-emit critique: P4 H5 E5 S5 R5 V4
 *
 * Trang /network/ — phần RIÊNG của trang này. Token, .section, .hero, .btn,
 * .rail, .nav, .marquee đều đến từ /styles.css nạp trước; file này không định
 * nghĩa lại cái nào trong số đó.
 *
 * Không có :root ở đây là CÓ CHỦ Ý. Trang này không được phép có bảng màu riêng
 * — nó là trang con của cùng một site. Cần giá trị mới thì thêm vào styles.css
 * để cả hai trang cùng dùng, đừng nhân bản token ở đây.
 *
 * ĐỪNG đặt class="hub" cho bất cứ thứ gì ở đây. styles.css đã dùng .hub cho ô
 * ảnh marquee trang chủ (aspect-ratio + overflow:hidden + nền gradient); trùng
 * tên là nội dung bị cắt mất mà không có lỗi nào báo. Đã dính một lần.
 */

/* ---------------------------------------------------------------- hero */

/* .hero của styles.css đã lo aspect-ratio:16/9, căn giữa dọc, overflow.
   Ở đây chỉ chồng phần khác biệt — KHÔNG khai lại 16:9, một chỗ sửa thôi. */
.nhero { padding-top: 96px; }

.nhero .hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 42%, rgba(255,255,255,0.30) 78%, transparent 100%);
}

/* Chỉ mũi tên, không chữ. Vùng bấm 44px để đạt ngưỡng chạm tối thiểu — mũi tên
   trần chỉ rộng ~12px thì trên điện thoại gần như không bấm trúng. */
.nhero__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 10px; margin-left: -10px;
  border-radius: 999px; font-size: 1.4rem; line-height: 1;
  color: var(--muted); transition: color .2s ease, background .2s ease;
}
.nhero__back:hover { color: var(--accent); background: rgba(11,134,148,0.08); }
.nhero__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nhero__title { max-width: 680px; }
.nhero__title .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 860px) {
  /* Dưới 860px ảnh 16:9 quá thấp để chứa chữ — bỏ khoá tỉ lệ, để nội dung
     quyết định chiều cao. Giữ 16:9 ở đây là chữ tràn ra ngoài khung. */
  .nhero { aspect-ratio: auto; padding: 108px 0 56px; }
  .nhero .hero__veil { background: rgba(255,255,255,0.90); }
}

/* --------------------------------------------------------- dải số liệu */

.nstats-band { padding: 56px 0; border-bottom: 1px solid var(--line); }
.nstats { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px 34px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.nstats li { padding-left: 18px; border-left: 2px solid var(--accent); }
.nstats b {
  display: block; font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1;
  /* Chữ số dùng bảng chiều rộng cố định: nếu không, số nhảy từ 1 sang 8 làm cả
     dòng co giãn giật liên tục suốt lúc đếm. */
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nstats span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.92rem; }

/* ------------------------------------------- section chính (primary) */

.section--primary { position: relative; }
.section--primary::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(34,232,237,0.15));
}
@media (max-width: 860px) { .section--primary::before { width: 2px; } }

/* ------------------------------------------------------------- vision */

.vision {
  margin: 0 auto 56px; max-width: 860px; padding: 34px 36px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-left: 3px solid var(--accent);
}
.vision__label { margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.vision__text { margin: 0; font-family: var(--font-disp); font-weight: 500; font-size: clamp(1.25rem, 2.8vw, 1.85rem); line-height: 1.36; }
/* In nghiêng CHỈ ở đây, và chỉ trên cụm mục tiêu. Đây là chỉ số tổ chức nhắm
   tới, không phải một dòng mô tả — nghiêng để tách nó khỏi phần còn lại. */
.vision__text em { font-style: italic; color: var(--accent); }
.vision__text b { font-weight: 700; }

/* ------------------------------------------------------------ mission */

/* Khối chữ giới hạn bề ngang rồi căn giữa trang. KHÔNG center chữ bên trong:
   đoạn văn căn giữa làm mắt phải dò lại điểm bắt đầu ở mỗi dòng. Căn giữa cái
   KHỐI, giữ chữ căn trái — đó là chỗ trước đây trang bị lệch. */
.mission { max-width: 860px; margin-inline: auto; }
.mission > .eyebrow { text-align: center; display: block; }
.mission__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 2px; }
.mission__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.mission__item:last-child { border-bottom: 1px solid var(--line); }
.mission__no { font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; color: var(--accent); }
.mission__item h3 { margin: 0 0 8px; font-size: 1.18rem; }
.mission__item p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------ H U B values */

.vals { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 0; max-width: 860px; }
.vals__item {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.vals__item:last-child { border-bottom: 1px solid var(--line); }
.vals__letter {
  font-family: var(--font-disp); font-weight: 700; line-height: 0.82;
  font-size: clamp(3.6rem, 11vw, 7.5rem);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; min-width: 1.1em; text-align: center;
}
.vals__body h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.vals__body p { margin: 0; color: var(--muted); }

/* ------------------------------------------------- sơ đồ tổ chức (org) */

/* Đổ từ TRÊN XUỐNG và căn giữa, thay cho danh sách thụt lề bên trái. Đường nối
   vẽ bằng pseudo-element; không ảnh, không SVG. */
.org { margin: 0 auto 8px; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Lưới 3 cột thay vì flex căn giữa. LÝ DO: hai gốc nằm chung một hàng flex thì
   thứ được căn giữa là CẶP, nên HUB Network — cái thực sự có nhánh con — bị đẩy
   lệch trái, còn cuống nối và các cột lại căn theo trang. Đã đo: gốc ở 530px,
   tâm 3 cột ở 635px, lệch 105px.
   Với lưới này HUB Network luôn nằm đúng tâm dù HUB Business rộng bao nhiêu. */
.org__roots {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px; width: 100%;
}
.org__roots > *:first-child { grid-column: 2; }
.org__roots > *:nth-child(2) { grid-column: 3; justify-self: start; }

.org__node {
  padding: 16px 26px; border-radius: var(--radius); text-align: center;
  background: var(--grad); border: 1px solid transparent; color: var(--accent-ink);
  font-family: var(--font-disp); font-size: 1.08rem;
}
.org__node span { display: block; margin-top: 4px; font-size: 0.84rem; font-weight: 500; color: rgba(255,255,255,0.84); }
/* Gốc thứ hai (HUB Business) đảo màu để thấy ngay là một thực thể KHÁC, không
   phải nhánh con của gốc thứ nhất. */
.org__node--alt { background: var(--surface); border-color: var(--accent); color: var(--text); }
.org__node--alt span { color: var(--muted); }

/* Cuống nối từ gốc xuống hàng dưới. Căn giữa — vì HUB Network giờ đã ở đúng tâm
   nhờ lưới 3 cột phía trên. Trước đây phải đẩy lệch bằng margin-right:220px để
   bù cho việc gốc bị lệch; đó là chữa triệu chứng, và con số 220px chỉ đúng ở
   đúng một bề rộng màn hình. */
.org__stem { width: 2px; height: 28px; background: var(--line-2); }

.org__cols {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  /* flex-start: các cột giữ chiều cao tự nhiên. Mặc định là stretch, khiến cột
     "By audience" (1 mục) bị kéo cao bằng cột "International" (7 mục) — thừa
     một khoảng trống 300px không nội dung. */
  align-items: flex-start; padding-top: 8px;
}
/* Cột rộng bằng nhau để ba nhánh cân, không phụ thuộc độ dài tên bên trong. */
.org__col { flex: 0 0 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }

/* International có 7 chapter, hai cột kia chỉ 3 và 1. Xếp dọc hết thì thành một
   cái đuôi dài 381px, kéo lệch toàn bộ bố cục xuống dưới — đúng chỗ trông mất
   cân đối nhất. Cho cột này rộng gấp đôi và chia chip thành 2 hàng ngang: chiều
   cao giảm còn khoảng một nửa, ba nhánh nhìn cân nhau.
   Dùng grid nên không phải bọc thêm thẻ trong HTML; tiêu đề cột trải hết
   chiều ngang. */
.org__col--wide {
  flex: 0 0 424px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; align-content: start; justify-items: center;
}
.org__col--wide .org__coltitle { grid-column: 1 / -1; }
@media (max-width: 560px) { .org__col--wide { flex-basis: 100%; } }
.org__col::before {
  content: ""; position: absolute; top: -18px; left: 50%; width: 2px; height: 18px;
  background: var(--line-2);
}
.org__coltitle {
  margin: 0 0 4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}

.org__leaf {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-family: inherit; font-size: 0.94rem; color: var(--muted); text-align: center;
}
.org__leaf b {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  font-size: 0.78rem; background: rgba(11,134,148,0.12); color: var(--accent);
}

/* Chỉ những chapter CÓ dữ liệu club mới bấm được. Phải nhìn ra ngay là bấm
   được — một nút trông y hệt chữ tĩnh thì không ai bấm. */
.org__leaf.is-clickable {
  cursor: pointer; color: var(--text); border-color: var(--accent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.org__leaf.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(11,134,148,0.7); background: var(--surface-2); }
.org__leaf.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.org__hint { margin: 26px 0 0; text-align: center; color: var(--muted-2); font-size: 0.88rem; }

/* --------------------------------------------- sơ đồ nhân sự (org--people) */

.org--people .org__row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  /* flex-start là mấu chốt. Mặc định stretch kéo mọi thẻ cao bằng thẻ cao nhất —
     mà Vương Bảo Sơn có nhánh con nên cao 147px, ép 3 thẻ cạnh nó cũng 147px
     trong khi 4 thẻ hàng dưới chỉ 67px. Nhìn ra là hai hàng lệch hẳn nhau. */
  align-items: flex-start;
  padding-top: 8px; max-width: 980px; margin-inline: auto;
}
.org__card {
  display: block; text-align: left; padding: 14px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); font-family: inherit;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* Rộng cố định thay vì min-width: thẻ bằng nhau thì hàng xếp thành lưới đều,
     không so le theo độ dài tên.
     min-height 82px = chiều cao của thẻ có chức danh dài NHẤT (loại xuống 2
     dòng, ví dụ "Vice President · Secretary General"). Không đặt thì thẻ chức
     danh ngắn chỉ cao 68px, hàng nhìn răng cưa. */
  flex: 0 0 218px; min-height: 82px;
}
.org__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.org__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.org__card b { display: block; font-family: var(--font-disp); font-size: 0.99rem; }
.org__card i { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 0.8rem; color: var(--accent); }

/* Vương Bảo Sơn có cấp dưới: xếp dọc, nối bằng một đoạn kẻ ngắn.
   Cùng bề rộng với thẻ thường để cột không thò ra khỏi lưới. */
.org__stack { flex: 0 0 218px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.org__stack .org__card { flex: 1 1 auto; }
.org__drop { width: 2px; height: 14px; background: var(--line-2); margin-inline: auto; }
.org__card--sub { background: var(--surface-2); }

.org__node.is-person { cursor: pointer; border: 0; font-family: var(--font-disp); transition: transform .18s ease, box-shadow .18s ease; }
.org__node.is-person:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(11,134,148,0.75); }
.org__node.is-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------- chapter leadership */

.people__group { margin: 52px 0 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-align: center; }
.chaps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.chap { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.chap__name { margin: 0 0 12px; font-size: 1.02rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chap__list button {
  display: block; width: 100%; text-align: left; padding: 7px 9px; margin-left: -9px;
  border: 0; background: none; border-radius: var(--radius-sm); font-family: inherit;
  cursor: pointer; transition: background .18s ease;
}
.chap__list button:hover { background: var(--surface-2); }
.chap__list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chap__list b { display: block; font-size: 0.95rem; }
.chap__list i { display: block; margin-top: 1px; font-style: normal; font-size: 0.82rem; color: var(--muted-2); }

/* ------------------------------------------------------- cửa sổ chi tiết */

.modal {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px);
  padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-lg);
  overflow: hidden;

  /* margin:auto BẮT BUỘC — không phải trang trí.
     showModal() căn giữa nhờ cặp `inset:0` + `margin:auto` trong stylesheet mặc
     định của trình duyệt. Nhưng styles.css có reset `* { margin:0 }`, mà dấu *
     chạm cả <dialog>, và CSS của trang luôn thắng stylesheet mặc định — nên
     căn giữa bị phá, hộp thoại dính góc trên-trái. Đã đo: lệch tâm -280px
     ngang, -72px dọc. Khai lại ở đây là cách sửa đúng chỗ. */
  inset: 0;
  margin: auto;
}
.modal::backdrop { background: rgba(6,18,24,0.52); backdrop-filter: blur(3px); }

.modal__bar {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.modal__kicker { margin: 0 0 4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.modal__title { margin: 0; font-size: clamp(1.15rem, 3vw, 1.5rem); }
.modal__x {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.modal__x:hover { border-color: var(--accent); color: var(--accent); }
.modal__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal__body { padding: 20px 24px 26px; overflow-y: auto; max-height: calc(min(80vh, 720px) - 84px); }
.modal__body .clubs { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
/* Tiểu sử: mỗi mục cách nhau bằng dấu · trong nguồn, tách dòng cho dễ đọc. */
.modal__bio { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.modal__bio li { margin-bottom: 6px; }
.modal__biolist { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }

/* --------------------------------------------------- hồ sơ có ảnh */

.profile { display: flex; gap: 20px; align-items: flex-start; }
.profile__text { min-width: 0; flex: 1; }

.profile__photo {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: var(--radius);
  /* Ảnh gốc lẫn lộn tỉ lệ (1:1, 0.8, 0.67, 1.25) nên cắt bằng CSS thay vì cắt
     sẵn lúc xử lý ảnh — đổi khung sau này không phải chạy lại toàn bộ.
     object-position lệch lên trên vì mặt người nằm ở phần trên khung, cắt giữa
     là mất đỉnh đầu. */
  object-fit: cover; object-position: 50% 22%;
  background: var(--surface-2); border: 1px solid var(--line);
}

/* Chưa có ảnh: ô chữ cái đầu tên. Thiếu ảnh là chuyện bình thường; để khung ảnh
   vỡ mới là trông như hỏng trang. */
.profile__initials {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: var(--accent-ink);
  font-family: var(--font-disp); font-weight: 700; font-size: 2.1rem;
}

@media (max-width: 560px) {
  .profile { flex-direction: column; align-items: center; text-align: center; }
  .profile__photo, .profile__initials { width: 108px; height: 108px; }
  .modal__biolist { text-align: left; }
}

/* -------------------------------------------------------------- clubs */

.clubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.clubs li { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.clubs b { display: block; font-size: 0.96rem; line-height: 1.35; }
.clubs span { display: block; margin-top: 5px; color: var(--muted-2); font-size: 0.85rem; }

/* -------------------------------------------------- partners carousel */

/* overflow:hidden BẮT BUỘC — không phải tuỳ chọn thẩm mỹ.
   .marquee trong styles.css chỉ có mask-image, mà mask che THỊ GIÁC chứ không
   chặn cuộn. Trên trang chủ nó vô hại vì section .scale cha đã overflow:hidden;
   ở đây không có ai clip hộ, nên track rộng max-content (đo được 2897px) đẩy cả
   TRANG cuộn ngang được. Bỏ dòng này là lỗi quay lại ngay. */
.pmarq { margin-top: 8px; overflow: hidden; }
.pchip {
  flex: 0 0 auto; padding: 14px 26px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
  font-family: var(--font-disp); font-size: 1rem; white-space: nowrap;
}

/* Dừng khi người dùng tắt animation: một dải chữ trôi vô hạn là thứ đầu tiên
   gây khó chịu với người nhạy cảm chuyển động. */
@media (prefers-reduced-motion: reduce) {
  .pmarq .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---------------------------------------------------------------- CTA */

.ncta { padding: 84px 0; background: var(--grad); color: var(--accent-ink); text-align: center; }
.ncta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 12px; }
.ncta p { margin: 0 auto 28px; max-width: 52ch; color: rgba(255,255,255,0.9); }
.ncta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ncta .btn--primary { background: #fff; color: var(--accent); }

/* --------------------------------------------------------- responsive */

@media (max-width: 860px) {
  /* Lưới 3 cột không còn nghĩa khi hai gốc phải xuống hàng — về một cột, cả hai
     căn giữa. */
  .org__roots { grid-template-columns: 1fr; justify-items: center; }
  .org__roots > *:first-child,
  .org__roots > *:nth-child(2) { grid-column: 1; justify-self: center; }
  .org__cols { gap: 20px; }
}

@media (max-width: 560px) {
  .vals__item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .vals__letter { text-align: left; }
  .mission__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vision { padding: 24px 22px; }
  .org__node { padding: 14px 18px; font-size: 1rem; }
  .org__card { min-width: 0; width: 100%; }
  .modal__bar { padding: 18px 18px 14px; }
  .modal__body { padding: 16px 18px 22px; }
}

/* Trạng thái ẩn của .reveal do JS đặt (xem network.js) chứ không phải CSS —
   JS hỏng thì nội dung vẫn hiện, thay vì trắng trang. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}