/* ==========================================================================
   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.
   ========================================================================== */

/* Nền xám nhạt cho khung ảnh chân dung khi chưa có ảnh thật */
:root {
  --sodo-photo-bg: #f8f9fa;
}

/* ==========================================================================
   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(--sodo-photo-bg);
  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(--sodo-photo-bg);
}

.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)
   Cây đệ quy dựng bằng ul/li lồng nhau; đường nối vẽ 100% bằng CSS thuần
   (pseudo-elements) nên hoạt động với mọi số nhánh / độ sâu.
   ========================================================================== */
.orgchart {
  /* Ô rộng cố định & co theo viewport → cả cây gói gọn trong màn, không tràn ngang.
     Mọi ô cùng bề rộng nên trục giữa (gốc → HĐQT → Ban TGĐ) luôn thẳng hàng. */
  --org-box-w:  min(164px, 9.7vw);
  --org-gap:    clamp(14px, 1.8vw, 26px); /* chiều cao đường nối dọc giữa hai cấp */
  --org-hpad:   clamp(2px, .3vw, 8px);    /* nửa khoảng cách ngang giữa các anh em */
  --org-line-w: 2px;                     /* độ dày đường nối */
  --org-line:   var(--dsh-red);          /* màu đường nối — đỏ thương hiệu */
  padding-block: var(--section-py);
  background: var(--dsh-white);
  overflow-x: hidden;                    /* chốt: không cho tràn / scroll ngang */
}

.orgchart-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  text-align: center;
  color: var(--dsh-ink);
  margin: 0 0 var(--space-7);
}

.org-tree {
  padding-bottom: var(--space-2);
}

/* ---- Các cấp: hàng ngang, căn giữa ---- */
.org-tree ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--org-gap) 0 0;
  margin: 0;
  list-style: none;
}

/* Cấp gốc không có cha → bỏ khoảng đệm trên cùng */
.org-tree > ul {
  padding-top: 0;
}

.org-tree li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--org-gap) var(--org-hpad) 0;
}

/* Nửa thanh ngang trái/phải từ mỗi node lên bus của anh em */
.org-tree li::before,
.org-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--org-gap);
  border-top: var(--org-line-w) solid var(--org-line);
}

.org-tree li::before { right: 50%; }
.org-tree li::after  { left: 50%; border-left: var(--org-line-w) solid var(--org-line); }

/* Node là con duy nhất: bỏ thanh ngang; đường dọc do ul cha (::before) vẽ.
   padding-top phải = 0 để đường nối liền mạch, không hở khoảng. */
.org-tree li:only-child::before,
.org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }

/* Gốc: không có đường nối phía trên (kể cả khi là con duy nhất) */
.org-tree > ul > li,
.org-tree > ul > li:only-child { padding-top: 0; }
.org-tree > ul > li::before,
.org-tree > ul > li::after { display: none; }

/* Bỏ nửa thanh thừa ở hai đầu; bo góc mềm ở node đầu/cuối */
.org-tree li:first-child::before,
.org-tree li:last-child::after { border: 0 none; }

.org-tree li:last-child::before {
  border-right: var(--org-line-w) solid var(--org-line);
  border-radius: 0 6px 0 0;
}

.org-tree li:first-child::after { border-radius: 6px 0 0 0; }

/* Đường dọc từ node cha xuống bus của nhóm con */
.org-tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--org-gap);
  border-left: var(--org-line-w) solid var(--org-line);
}

/* ---- Ô đơn vị: nền đỏ thương hiệu, bo tròn (bám Figma) ----
   Bề rộng cố định (bằng nhau ở mọi ô) → các cấp thẳng trục giữa. */
.org-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--org-box-w);
  min-height: clamp(46px, 5vw, 62px);
  padding: clamp(5px, .55vw, 9px) clamp(6px, .55vw, 10px);
  border-radius: clamp(8px, .8vw, 12px);
  background: var(--dsh-red);
  color: var(--dsh-white);
  font-weight: 700;
  font-size: clamp(.56rem, .42rem + .5vw, .82rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;                 /* chữ xuống dòng trong ô */
  box-shadow: 0 6px 16px rgba(154, 18, 32, .22);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.org-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(154, 18, 32, .34);
}

/* Node có con (không phải lá) đứng trên một nhánh rộng hơn chính nó → cho ô nở
   theo nội dung để chữ gọn trên 1 dòng. Vì ô luôn hẹp hơn bề rộng nhánh con và
   được canh giữa nên KHÔNG làm tăng tổng bề rộng cây, cũng không lệch trục giữa.
   (Ô lá vẫn giữ bề rộng đồng nhất → quyết định bề rộng cột, giữ canh hàng.) */
.org-tree li:has(> ul) > .org-box {
  width: max-content;
  min-width: var(--org-box-w);
  max-width: 100%;
  padding-inline: clamp(12px, 1.2vw, 22px);
  white-space: nowrap;
}

/* Node gốc: ô dạng viên thuốc (pill) nổi bật hơn */
.org-tree > ul > li > .org-box {
  border-radius: 999px;
  padding-inline: clamp(14px, 1.5vw, 26px);
}

/* ==========================================================================
   Hiệu ứng: cây hiện dần khi khối lọt viewport (.orgchart.is-visible)
   ========================================================================== */
.orgchart .org-tree {
  opacity: 0;
  transition: opacity .6s var(--ease-out-soft);
}

.orgchart .org-box {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.96);
  transition:
    opacity .6s var(--ease-out-back),
    transform .6s var(--ease-out-back);
}

.orgchart.is-visible .org-tree { opacity: 1; }
.orgchart.is-visible .org-box  { opacity: 1; transform: none; }

/* Trễ dần theo thứ tự xuất hiện để cây "mọc" từ trên xuống */
.orgchart.is-visible .org-box              { transition-delay: .12s; }
.orgchart.is-visible ul ul .org-box        { transition-delay: .30s; }
.orgchart.is-visible ul ul ul .org-box     { transition-delay: .48s; }
.orgchart.is-visible ul ul ul ul .org-box  { transition-delay: .66s; }

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .orgchart .org-tree,
  .orgchart .org-box {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ả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); }

/* -------- Responsive: card Chủ tịch -------- */
@media (max-width: 767.98px) {
  /* 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); }
}