/* =========================================================
   Template4 — Phả đồ (cây D3). Bổ sung cho style.css, không sửa style.css.
   ========================================================= */

/* Chữ trong thẻ thành viên (SVG) */
#tree-chart .pd-name,
.pd-mini .pd-name {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 13px;
  fill: #12324a;
}
#tree-chart .pd-years,
.pd-mini .pd-years {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 11px;
  fill: #46596b;
}
#tree-chart .pd-doi,
.pd-mini .pd-doi {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: #977224;
}
#tree-chart .pd-star,
.pd-mini .pd-star {
  font-size: 15px;
  fill: #1d4265;
}
#tree-chart .pd-shadow,
.pd-mini .pd-shadow {
  fill: rgba(10, 31, 48, 0.2);
}
#tree-chart .pd-sep,
.pd-mini .pd-sep {
  stroke: #b8912f;
  stroke-opacity: 0.45;
  stroke-width: 1;
}
#tree-chart .pd-sp-label,
.pd-mini .pd-sp-label {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill: #977224;
}
#tree-chart .pd-sp-name,
.pd-mini .pd-sp-name {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 11px;
  fill: #1b2733;
}
#tree-chart .pd-sp-name.pd-sp-dead {
  fill: #6b645a;
}
#tree-chart .pd-sp-more,
.pd-mini .pd-sp-more {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10px;
  font-style: italic;
  fill: #1d4265;
}
#tree-chart .pd-spouse,
.pd-mini .pd-spouse {
  cursor: pointer;
}
#tree-chart .pd-spouse-hit,
.pd-mini .pd-spouse-hit {
  fill: transparent;
}
#tree-chart .pd-spouse:hover .pd-spouse-hit {
  fill: rgba(205, 166, 63, 0.22);
}

/* Nút thu gọn / mở rộng nhánh */
#tree-chart .pd-toggle,
.pd-mini .pd-toggle {
  cursor: pointer;
}
#tree-chart .pd-toggle:hover rect {
  fill: #2f6d92;
}
#tree-chart .pd-toggle-label,
.pd-mini .pd-toggle-label {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 11px;
  font-weight: 700;
  fill: #ecdca0;
  pointer-events: none;
}

/* Đường nối */
#tree-chart .pd-link,
.pd-mini .pd-link {
  fill: none;
}

/* Ô tìm kiếm: bỏ nút xoá mặc định của trình duyệt cho gọn */
#tree-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Thông tin ngắn: bảng trượt lên trên mobile */
#tree-info {
  animation: pd-info-in 0.2s ease;
}
@keyframes pd-info-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #tree-info, #tree-filter-panel { animation: none; }
}

/* Mobile: bộ lọc mở ra không che nút điều khiển */
@media (max-width: 767px) {
  #tree-filter-panel {
    left: 0.75rem;
    width: auto;
  }
  #phado-root-bar {
    max-width: calc(100% - 4rem);
  }
}

/* Chưa có dữ liệu cây (đang tải / phả đồ khoá chưa nhập mã / lỗi tải): ẩn bộ lọc, nút điều khiển, chú thích */
#phado-app.phado-nodata .phado-needs-tree {
  display: none !important;
}

/* Hôn phối đứng cạnh người chính: viền đậm khi rê chuột */
#tree-chart .pd-spouse:hover .tree-node-rect {
  stroke: #1d4265;
}

/* Vùng cây: cuộn chuột chỉ dành cho zoom, không lan ra cuộn trang */
#tree-chart {
  overscroll-behavior: contain;
}

/* Ô chọn phả đồ kiểu riêng (js/custom-select.js) — đồng tông xanh lam / vàng kim */
.cs {
  position: relative;
  z-index: 30;
}
.cs .cs-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lam-900);
  background: var(--paper);
  border: 1.5px solid var(--gold-500);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(10, 31, 48, 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-trigger:hover,
.cs.is-open .cs-trigger {
  border-color: var(--lam-800);
  box-shadow: 0 3px 12px rgba(26, 67, 96, 0.15);
}
.cs-trigger:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}
.cs-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-chevron {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--gold-700);
  transition: transform 0.2s ease;
}
.cs.is-open .cs-chevron {
  transform: rotate(180deg);
}
.cs-list {
  position: absolute;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(36rem, 92vw);
  top: calc(100% + 6px);
  max-height: 18rem;
  margin: 0;
  padding: 0.35rem 0;
  overflow-y: auto;
  list-style: none;
  background: var(--paper);
  border: 1.5px solid var(--gold-500);
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(10, 31, 48, 0.28);
}
.cs-list[hidden] {
  display: none;
}
.cs-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: var(--ink, #1b2733);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.cs-option.is-active {
  background: rgba(205, 166, 63, 0.2);
}
.cs-option.is-selected {
  font-weight: 700;
  color: var(--lam-900);
  border-left-color: var(--lam-800);
  background: rgba(205, 166, 63, 0.14);
}
.cs-option.is-selected.is-active {
  background: rgba(205, 166, 63, 0.28);
}
.cs-option .cs-tick {
  visibility: hidden;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--lam-800);
}
.cs-option.is-selected .cs-tick {
  visibility: visible;
}

/* Thẻ thành viên trong lưới là nút bấm (mở modal chi tiết) */
button.member-card {
  cursor: pointer;
  font: inherit;
}
button.member-card:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Phân trang lưới thành viên */
.member-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
}
.member-pager.hidden {
  display: none;
}
.member-page-btn {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lam-800);
  background: var(--paper);
  border: 1px solid rgba(205, 166, 63, 0.6);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.member-page-btn:hover:not(:disabled):not(.is-current) {
  background: rgba(205, 166, 63, 0.2);
}
.member-page-btn.is-current {
  color: var(--ivory-soft);
  background: var(--lam-800);
  border-color: var(--lam-800);
  cursor: default;
}
.member-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.member-page-gap {
  padding: 0 0.25rem;
  color: var(--gold-700);
}
.member-page-summary {
  flex-basis: 100%;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-soft, #46596b);
}

/* Modal chi tiết thành viên */
.member-chip {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lam-900);
  background: rgba(205, 166, 63, 0.16);
  border: 1px solid rgba(205, 166, 63, 0.55);
  border-radius: 9999px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.member-chip:hover {
  background: rgba(205, 166, 63, 0.32);
  border-color: var(--lam-800);
}
.member-chip-years {
  font-weight: 400;
  color: var(--ink-soft, #46596b);
}

/* Cây rút gọn ở trang chủ: thẻ nhỏ hơn trang phả đồ nên chữ nhỏ lại tương ứng */
.pd-mini .pd-name { font-size: 14px; }
.pd-mini .pd-years { font-size: 12px; }
.pd-mini .pd-doi { font-size: 10.5px; }

/* Nổi bật nguồn gốc: đường từ gốc phả đồ tới người được chọn */
#tree-chart .pd-link-origin {
  stroke: #e8541e;
  stroke-width: 3.5;
  stroke-opacity: 1;
}
#tree-chart g.pd-node-origin .tree-node-rect {
  stroke: #e8541e;
  stroke-width: 3;
}
.pd-origin-off {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #e8541e;
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.pd-origin-off:hover {
  background: #cf4510;
}

/* Đang chạy hiệu ứng khi thu nhỏ xa: bỏ chữ cho nhẹ */
#tree-chart.pd-anim-notext text {
  display: none;
}

/* ===== Phả đồ kiểu v1 (0.docs/TinhNang_PhaDoGiongV1.md): ô số đời, mắt xem thông tin, vạch đời đứt nét ===== */
#tree-chart .pd-band-line {
  stroke: #b8912f;
  stroke-opacity: 0.55;
  stroke-width: 1;
  stroke-dasharray: 5 4;
}
#tree-chart .pd-band-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  fill: #977224;
  fill-opacity: 0.6;
}
#tree-chart .pd-bands {
  pointer-events: none;
}

/* Vòng 3: khung thẻ theo ảnh mframe.png của v1 (cạnh cùng màu cam của ảnh); avatar người đã mất xám + mờ */
#tree-chart .pd-avatar-dead {
  opacity: 1;   /* người đã mất: chỉ xám (bộ lọc), không làm mờ để khỏi lộ nền sau thẻ */
}

/* ===== Phả đồ dạng cây thư mục (mở / đóng từng nhánh) =====
   Đầu mỗi dòng là số đời (không dùng icon thư mục). Màu lấy từ token của template qua các biến --fd-*. */
#phado-app {
  --fd-main: var(--lam-800);
  --fd-dark: var(--lam-900);
  --fd-on: var(--ivory-soft);
  --fd-rgb: 205, 166, 63;
  --fd-paper: var(--paper);
  --fd-soft: var(--ink-soft, #46596b);
  --fd-radius: 2px;
}
.phado-view-toggle {
  display: inline-flex;
  overflow: hidden;
  background: var(--fd-paper);
  border: 1.5px solid rgba(var(--fd-rgb), 0.7);
  border-radius: var(--fd-radius);
}
.phado-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fd-main);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.phado-view-btn:hover:not(.is-active) {
  background: rgba(var(--fd-rgb), 0.2);
}
.phado-view-btn.is-active {
  color: var(--fd-on);
  background: var(--fd-main);
  cursor: default;
}
.phado-view-btn:focus-visible {
  outline: 2px solid rgb(var(--fd-rgb));
  outline-offset: -2px;
}
.phado-folder-frame {
  background: var(--fd-paper);
  border: 1.5px solid rgba(var(--fd-rgb), 0.7);
  border-radius: var(--fd-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.phado-folder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--fd-rgb), 0.4);
}
.phado-folder-search {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid rgba(var(--fd-rgb), 0.55);
  border-radius: var(--fd-radius);
}
.phado-folder-search:focus {
  outline: 2px solid rgb(var(--fd-rgb));
}
.phado-folder-count {
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--fd-soft);
}
.phado-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fd-main);
  background: transparent;
  border: 1px solid rgba(var(--fd-rgb), 0.7);
  border-radius: var(--fd-radius);
  cursor: pointer;
  transition: background 0.2s ease;
}
.phado-folder-btn:hover {
  background: rgba(var(--fd-rgb), 0.2);
}
.folder-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0.75rem 1rem;
  max-height: 75vh;
  overflow: auto;
}
.folder-children {
  list-style: none;
  margin: 0 0 0 1.2rem;
  padding: 0 0 0 0.7rem;
  border-left: 1.5px dashed rgba(var(--fd-rgb), 0.65);
}
.folder-children[hidden] {
  display: none;
}
.folder-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--fd-radius);
}
.folder-row:hover {
  background: rgba(var(--fd-rgb), 0.14);
}
.folder-row.is-hit {
  background: rgba(232, 84, 30, 0.16);
  box-shadow: inset 3px 0 0 #e8541e;
}
.folder-toggle,
.folder-toggle-spacer {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
}
.folder-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.7rem;
  color: var(--fd-main);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.folder-toggle:hover {
  background: rgba(var(--fd-rgb), 0.3);
}
.folder-toggle i {
  transition: transform 0.15s ease;
}
.folder-toggle.is-open i {
  transform: rotate(90deg);
}
.folder-gen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fd-on);
  background: var(--fd-main);
  border: 1.5px solid rgb(var(--fd-rgb));
  border-radius: 9999px;
}
.folder-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.7rem;
}
.folder-name {
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  color: var(--fd-dark);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.folder-name:hover {
  text-decoration: underline;
}
.folder-name:focus-visible {
  outline: 2px solid rgb(var(--fd-rgb));
  outline-offset: 2px;
}
.folder-years,
.folder-spouse,
.folder-kids {
  font-size: 0.8rem;
  color: var(--fd-soft);
}
.folder-spouse i {
  margin-right: 0.3rem;
  color: rgb(var(--fd-rgb));
}
.folder-kids {
  flex: 0 0 auto;
  padding-left: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .folder-children {
    margin-left: 0.7rem;
    padding-left: 0.45rem;
  }
  .folder-kids {
    display: none;
  }
}