/* ==========================================================================
   sodo.css — Trang Sơ đồ - Tổ chức
   2 khối riêng: Hội đồng quản trị (.bod) + Hệ thống phân cấp (.orgchart)
   Header / Hero / Footer tái dùng CSS chung; file này chỉ style phần thân.
   ========================================================================== */

/* Token cục bộ cho trang (màu khối sơ đồ — xác nhận Figma node 1263:17878) */
.sodo-page {
  --org-red-dark:   #730011;   /* nền box cấp 1, viền/chữ box cấp 2, đường nối */
  --org-surface:    #f8f9fa;   /* nền section sơ đồ + box phòng ban */
  --org-line-pink:  #e1bebc;   /* viền box phòng ban cấp 3 */
  --org-branch:     #8d706e;   /* nhánh cây phân cấp */
  --org-ink:        #191c1d;   /* tiêu đề + chữ box phòng ban */
}

/* ==========================================================================
   Section 1: Hội đồng quản trị (.bod)
   ========================================================================== */
.bod {
  padding-block: var(--section-py);
  background: var(--dsh-white);
}

/* -- Tiêu đề khối, có viền dọc trái -- */
.bod-head {
  border-left: 3px solid var(--dsh-red);
  padding-left: var(--space-4);
  margin-bottom: var(--space-7);
}

.bod-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--dsh-ink);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.bod-sub {
  font-size: var(--fs-body);
  color: var(--dsh-slate);
  margin: 0;
}

/* -- Card Chủ tịch (bento) -- */
.bod-chair {
  border: 1px solid rgba(13, 37, 69, .1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--dsh-white);
  box-shadow: 0 6px 24px rgba(13, 37, 69, .06);
}

.bod-chair-photo {
  width: 272px;
  max-width: 100%;
  aspect-ratio: 272 / 362;
  overflow: hidden;
  background: var(--org-surface);
  margin-right: var(--space-6);
}

.bod-chair-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bod-chair-body {
  padding-top: var(--space-1);
}

.bod-chair-name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--dsh-red);
  margin: 0 0 var(--space-2);
}

.bod-chair-role {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dsh-ink);
  margin: 0 0 var(--space-4);
}

.bod-chair-desc {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--dsh-slate);
  margin: 0 0 var(--space-3);
}

.bod-chair-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(13, 37, 69, .1);
}

.bod-stat-num {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dsh-red);
  line-height: 1;
}

.bod-stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dsh-slate);
}

/* -- Lưới 4 thành viên -- */
.bod-member {
  height: 100%;
  border: 1px solid rgba(13, 37, 69, .08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dsh-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.bod-member:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(13, 37, 69, .1);
  border-color: rgba(201, 168, 76, .4);
}

.bod-member-photo {
  aspect-ratio: 400 / 335;
  background: var(--org-surface);
}

.bod-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bod-member-body {
  padding: var(--space-4);
}

.bod-member-name {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--dsh-red);
  margin: 0 0 var(--space-1);
}

.bod-member-role {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dsh-ink);
  margin: 0 0 var(--space-3);
}

.bod-member-desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--dsh-slate);
  margin: 0;
}

/* ==========================================================================
   Section 2: Hệ thống phân cấp — Org chart (.orgchart)
   ========================================================================== */
.orgchart {
  padding-block: var(--section-py);
  background: var(--org-surface);
}

.orgchart-title {
  font-family: "Montserrat", var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  text-transform: uppercase;
  text-align: center;
  color: var(--org-ink);
  margin: 0 0 var(--space-8);
}

/* Cây phân cấp — full width, chỉ 2 box trên căn giữa hẹp */
.org-tree {
  max-width: 1530px;
  margin-inline: auto;
}

.org-level {
  display: flex;
  justify-content: center;
}

/* Box cấp 1 + cấp 2 dùng chung khung */
.org-node {
  width: min(100%, 382px);
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
}

/* Cấp 1 — Hội đồng quản trị (nền đỏ đậm) */
.org-node--board {
  background: var(--org-red-dark);
  border: 3px solid var(--dsh-red);
  color: var(--dsh-white);
  box-shadow: 0 6px 9px -1px rgba(0, 0, 0, .1), 0 3px 6px -3px rgba(0, 0, 0, .1);
}

/* Cấp 2 — Ban Tổng giám đốc (nền trắng, viền đỏ) */
.org-node--exec {
  background: var(--dsh-white);
  border: 3px solid var(--org-red-dark);
  color: var(--org-red-dark);
  box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, .05);
}

/* Đường nối dọc giữa cấp 1 và cấp 2 */
.org-connector-v {
  display: block;
  width: 2px;
  height: 48px;
  margin-inline: auto;
  background: var(--org-red-dark);
}

/* Nhánh tỏa xuống cấp 3 */
.org-branches {
  position: relative;
  height: 48px;
}

.org-branch-stem {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--org-branch);
}

.org-branch-bar {
  position: absolute;
  bottom: 0;
  /* Khớp đúng tâm box đầu/cuối: 4 box flex đều nhau, cách nhau gap = space-4.
     boxW = (100% - 3*gap)/4  →  tâm box đầu = (100% - 3*gap)/8 tính từ mép. */
  left: calc((100% - 3 * var(--space-4)) / 8);
  right: calc((100% - 3 * var(--space-4)) / 8);
  height: 2px;
  background: var(--org-branch);
}

/* Cấp 3 — 4 khối chức năng trải đều (flex để tâm cột đúng 12.5%/…/87.5%) */
.org-depts {
  display: flex;
  gap: var(--space-4);
  margin-top: 36px;
}

/* Nhánh dọc nhỏ nối từ thanh ngang xuống mỗi box */
.org-dept {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: var(--space-4) var(--space-4);
  background: var(--org-surface);
  border: 1.5px solid var(--org-line-pink);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: clamp(.9rem, 1.2vw, 1.125rem);
  text-transform: uppercase;
  color: var(--org-ink);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.org-dept::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 36px;
  background: var(--org-branch);
}

.org-dept:hover {
  border-color: var(--dsh-red);
  box-shadow: 0 8px 20px rgba(115, 0, 17, .1);
}

/* ==========================================================================
   Hiệu ứng riêng trang: sơ đồ "vẽ dần" khi khối lọt viewport
   Trạng thái ẩn ban đầu → khi .orgchart.is-visible thì bung theo trình tự.
   ========================================================================== */

/* Box (cấp 1/2/3): bung nhẹ + mờ → rõ */
.orgchart .org-node,
.orgchart .org-dept {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.96);
  transition:
    opacity .7s var(--ease-out-back),
    transform .7s var(--ease-out-back);
}

/* Đường nối dọc/nhánh: kéo dài từ trên xuống */
.orgchart .org-connector-v,
.orgchart .org-branch-stem,
.orgchart .org-dept::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .45s var(--ease-out-soft);
}

/* Thanh ngang: kéo từ giữa ra hai bên */
.orgchart .org-branch-bar {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .6s var(--ease-out-soft);
}

/* --- Kích hoạt theo trình tự khi khối hiện --- */
.orgchart.is-visible .org-node,
.orgchart.is-visible .org-dept {
  opacity: 1;
  transform: none;
}

.orgchart.is-visible .org-connector-v,
.orgchart.is-visible .org-branch-stem,
.orgchart.is-visible .org-branch-bar,
.orgchart.is-visible .org-dept::before {
  transform: none;
}

/* Trình tự trễ: board → nối → exec → nhánh → 4 khối */
.orgchart.is-visible .org-node--board   { transition-delay: .10s; }
.orgchart.is-visible .org-connector-v   { transition-delay: .30s; }
.orgchart.is-visible .org-node--exec    { transition-delay: .42s; }
.orgchart.is-visible .org-branch-stem   { transition-delay: .62s; }
.orgchart.is-visible .org-branch-bar    { transition-delay: .74s; }

.orgchart.is-visible .org-dept:nth-child(1)          { transition-delay: .92s; }
.orgchart.is-visible .org-dept:nth-child(1)::before  { transition-delay: .88s; }
.orgchart.is-visible .org-dept:nth-child(2)          { transition-delay: 1.00s; }
.orgchart.is-visible .org-dept:nth-child(2)::before  { transition-delay: .96s; }
.orgchart.is-visible .org-dept:nth-child(3)          { transition-delay: 1.08s; }
.orgchart.is-visible .org-dept:nth-child(3)::before  { transition-delay: 1.04s; }
.orgchart.is-visible .org-dept:nth-child(4)          { transition-delay: 1.16s; }
.orgchart.is-visible .org-dept:nth-child(4)::before  { transition-delay: 1.12s; }

/* Ảnh Chủ tịch: zoom rất nhẹ khi hover card */
.bod-chair-photo img { transition: transform .8s var(--ease-out-soft); }
.bod-chair:hover .bod-chair-photo img { transform: scale(1.05); }

/* Ảnh thành viên: zoom nhẹ khi hover thẻ */
.bod-member-photo img { transition: transform .8s var(--ease-out-soft); }
.bod-member:hover .bod-member-photo img { transform: scale(1.06); }

/* Số thống kê nhấc nhẹ khi hover card chủ tịch */
.bod-stat { transition: transform .4s var(--ease-out-soft); }
.bod-chair:hover .bod-stat:nth-child(2) { transform: translateY(-2px); }

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .orgchart .org-node,
  .orgchart .org-dept,
  .orgchart .org-connector-v,
  .orgchart .org-branch-stem,
  .orgchart .org-branch-bar,
  .orgchart .org-dept::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------- Responsive -------- */
@media (max-width: 767.98px) {
  /* 2 khối/hàng (2×2), gap flex tạo luôn khoảng cách hàng */
  .org-depts { flex-wrap: wrap; }
  .org-dept { flex: 1 1 calc(50% - var(--space-4) / 2); }

  /* Thanh ngang thu về đúng tâm 2 cột (mỗi cột rộng 50% - gap/2) */
  .org-branch-bar {
    left: calc(25% - var(--space-4) / 4);
    right: calc(25% - var(--space-4) / 4);
  }

  /* Hàng trên (Đầu tư / Tài chính): stub nối lên thanh ngang (36px) — giữ mặc định.
     Hàng dưới (Kỹ thuật / Hành chính): stub nối lên box phía trên, dài bằng gap hàng. */
  .org-dept:nth-child(3)::before,
  .org-dept:nth-child(4)::before {
    height: var(--space-4);
  }

  /* Card chủ tịch: ảnh trên, chữ dưới */
  .bod-chair-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-right: 0;
    margin-bottom: var(--space-4);
  }
  .bod-chair-stats { gap: var(--space-5); }
}