/* Gia Phả Họ Nguyễn Khắc – Triệu Xuyên — plugin styles
   Mọi selector, class và custom property đều dùng tiền tố .giapha-app /
   --giapha-* để không xung đột với CSS của theme đang dùng. */

.giapha-app {
  --giapha-paper: #faf3e0;
  --giapha-paper-deep: #f0e2bd;
  --giapha-bronze: #8a6a2f;
  --giapha-bronze-dark: #5c4620;
  --giapha-ink: #2a2118;
  --giapha-maroon: #5c1420;
  --giapha-maroon-dark: #3d0d15;
  --giapha-red-title: #b5231f;
  --giapha-gold: #b8862f;
  --giapha-gold-light: #e8c568;
  --giapha-jade: #5c7a63;
  --giapha-jade-dark: #3d5443;

  /* màu khung theo Chi, đúng bản mô phỏng: Chi1 xanh dương nhạt, Chi2 kem, Chi3 hồng */
  --giapha-chi1-box: #cfe3f5; --giapha-chi1-border: #4f7aa8; --giapha-chi1-text: #1c3a52;
  --giapha-chi2-box: #fdf8ea; --giapha-chi2-border: #c8a13c; --giapha-chi2-text: #4a3a12;
  --giapha-chi3-box: #f7d6dd; --giapha-chi3-border: #b5556e; --giapha-chi3-text: #5c1f2c;
  --giapha-root-box: #fdf1c9; --giapha-root-border: #8a6a2f; --giapha-root-text: #3d2c0c;

  --giapha-font-display: "Noto Serif", serif;
  --giapha-font-body: "Noto Sans", sans-serif;
}

.giapha-app, .giapha-app * { box-sizing: border-box; }

.giapha-app {
  font-family: var(--giapha-font-body);
  color: var(--giapha-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 60px;
}

/* ---------- Header: khung tiêu đề đỏ kiểu bản mô phỏng ---------- */

.giapha-app .giapha-site-header { width: 100%; max-width: 1180px; margin-bottom: 16px; }

.giapha-app .giapha-header-frame {
  position: relative;
  background: linear-gradient(180deg, #f6e4ac 0%, #f0d888 100%);
  border: 3px solid var(--giapha-gold);
  border-radius: 14px;
  padding: 18px 30px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(92,70,32,0.18);
}

.giapha-app .giapha-header-frame h1 {
  font-family: var(--giapha-font-display);
  font-weight: 900;
  font-size: clamp(20px, 3.4vw, 32px);
  margin: 0;
  color: var(--giapha-red-title);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.giapha-app .giapha-corner {
  position: absolute;
  width: 54px;
  height: 54px;
  opacity: 0.55;
  pointer-events: none;
}

.giapha-app .giapha-corner::before, .giapha-app .giapha-corner::after {
  content: "";
  position: absolute;
  border: 2.5px solid var(--giapha-gold-dark, #8a6a2f);
}

.giapha-app .giapha-corner-tl { top: 6px; left: 6px; border-top: 3px solid var(--giapha-bronze); border-left: 3px solid var(--giapha-bronze); border-radius: 10px 0 0 0; }
.giapha-app .giapha-corner-tr { top: 6px; right: 6px; border-top: 3px solid var(--giapha-bronze); border-right: 3px solid var(--giapha-bronze); border-radius: 0 10px 0 0; }
.giapha-app .giapha-corner-tl::before, .giapha-app .giapha-corner-tr::before { display: none; }

/* ---------- Tabs ---------- */

.giapha-app .giapha-tree-tabs { width: 100%; max-width: 1180px; display: flex; gap: 8px; margin: 10px 0 10px; flex-wrap: wrap; justify-content: center; }

.giapha-app .giapha-tab-btn {
  font-family: var(--giapha-font-display); font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--giapha-bronze); background: rgba(250, 243, 224, 0.6);
  color: var(--giapha-bronze-dark); padding: 9px 22px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.giapha-app .giapha-tab-btn:hover { background: rgba(184, 134, 47, 0.15); }
.giapha-app .giapha-tab-btn.giapha-active { background: var(--giapha-gold); border-color: var(--giapha-bronze-dark); color: #2a1f0d; box-shadow: 0 2px 8px rgba(92, 70, 32, 0.35); }

/* ---------- Toolbar ---------- */

.giapha-app .giapha-toolbar {
  width: 100%; max-width: 1180px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: rgba(240, 226, 189, 0.55); border: 1px solid rgba(138, 106, 47, 0.25);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; position: relative;
}

.giapha-app .giapha-search-box {
  display: flex; align-items: center; flex: 1 1 220px; background: var(--giapha-paper);
  border: 1.5px solid var(--giapha-bronze); border-radius: 999px; padding: 5px 5px 5px 14px;
}
.giapha-app .giapha-search-box input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--giapha-ink); flex: 1; min-width: 0; }
.giapha-app .giapha-search-box input::placeholder { color: #a5915d; }
.giapha-app #giapha-search-clear { border: none; background: var(--giapha-bronze); color: var(--giapha-paper); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0; }

.giapha-app .giapha-search-results {
  position: absolute; top: 54px; left: 14px; width: 300px; max-height: 260px; overflow-y: auto;
  background: var(--giapha-paper); border: 1.5px solid var(--giapha-bronze); border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2); z-index: 20; display: none;
}
.giapha-app .giapha-search-results.giapha-show { display: block; }
.giapha-app .giapha-search-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(138,106,47,0.15); font-size: 13px; }
.giapha-app .giapha-search-result-item:last-child { border-bottom: none; }
.giapha-app .giapha-search-result-item:hover { background: rgba(184,134,47,0.18); }
.giapha-app .giapha-search-result-item .giapha-sr-name { font-family: var(--giapha-font-display); font-weight: 600; color: var(--giapha-bronze-dark); }
.giapha-app .giapha-search-result-item .giapha-sr-meta { color: #8a743f; font-size: 11px; margin-left: 6px; }
.giapha-app .giapha-search-result-empty { padding: 10px 12px; font-size: 13px; color: #a5915d; font-style: italic; }

.giapha-app .giapha-expand-controls, .giapha-app .giapha-zoom-controls { display: flex; gap: 6px; }
.giapha-app .giapha-expand-controls button, .giapha-app .giapha-zoom-controls button { font-size: 12px; border: 1px solid var(--giapha-jade); background: transparent; color: var(--giapha-jade-dark); padding: 0px 10px; border-radius: 8px; cursor: pointer; }
.giapha-app .giapha-expand-controls button:hover, .giapha-app .giapha-zoom-controls button:hover { background: rgba(92,122,99,0.12); }
.giapha-app .giapha-zoom-controls button { width: 30px; font-size: 15px; font-weight: 700; }

/* ---------- Canvas / SVG tree ---------- */

.giapha-app .giapha-canvas-wrap {
  width: 100%; max-width: 1180px; height: 68vh; min-height: 440px;
  background: var(--giapha-paper); border: 3px solid var(--giapha-gold); border-radius: 16px;
  overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 6px rgba(184,134,47,0.10), 0 10px 26px rgba(92,70,32,0.18);
}

.giapha-app .giapha-subtitle-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10; background: var(--giapha-maroon); color: var(--giapha-gold-light);
  font-family: var(--giapha-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
  padding: 8px 22px; border-radius: 999px; border: 1.5px solid var(--giapha-gold);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); pointer-events: none;
}

.giapha-app .giapha-frame-corner { position: absolute; width: 46px; height: 46px; z-index: 5; pointer-events: none; opacity: 0.7; }
.giapha-app .giapha-frame-corner::before, .giapha-app .giapha-frame-corner::after { content: ""; position: absolute; background: var(--giapha-bronze); }
.giapha-app .giapha-frame-corner::before { width: 100%; height: 3px; }
.giapha-app .giapha-frame-corner::after { width: 3px; height: 100%; }
.giapha-app .giapha-fc-tl { top: 6px; left: 6px; } .giapha-app .giapha-fc-tl::before, .giapha-app .giapha-fc-tl::after { top: 0; left: 0; }
.giapha-app .giapha-fc-tr { top: 6px; right: 6px; } .giapha-app .giapha-fc-tr::before { top: 0; right: 0; } .giapha-app .giapha-fc-tr::after { top: 0; right: 0; }
.giapha-app .giapha-fc-bl { bottom: 6px; left: 6px; } .giapha-app .giapha-fc-bl::before { bottom: 0; left: 0; } .giapha-app .giapha-fc-bl::after { bottom: 0; left: 0; }
.giapha-app .giapha-fc-br { bottom: 6px; right: 6px; } .giapha-app .giapha-fc-br::before { bottom: 0; right: 0; } .giapha-app .giapha-fc-br::after { bottom: 0; right: 0; }

.giapha-app .giapha-tree-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.giapha-app .giapha-tree-svg.giapha-grabbing { cursor: grabbing; }

.giapha-app .giapha-row-line { stroke: var(--giapha-bronze); stroke-width: 1.3; stroke-dasharray: 6 6; opacity: 0.55; }
.giapha-app .giapha-row-label {
  font-family: var(--giapha-font-display); font-weight: 700; font-size: 15px;
  fill: var(--giapha-maroon); opacity: 0.9;
}

.giapha-app .giapha-node-box { cursor: pointer; }
.giapha-app .giapha-node-box rect.giapha-box { stroke-width: 2; transition: filter 0.15s; }
.giapha-app .giapha-node-box:hover rect.giapha-box { filter: brightness(0.95); }

.giapha-app .giapha-node-box text { font-family: var(--giapha-font-body); pointer-events: none; user-select: none; }
.giapha-app .giapha-node-box text.giapha-name { font-family: var(--giapha-font-display); font-weight: 700; font-size: 12px; }
.giapha-app .giapha-node-box text.giapha-idlabel { font-size: 9.5px; opacity: 0.75; }

.giapha-app .giapha-node-box.giapha-root rect.giapha-box { fill: var(--giapha-root-box); stroke: var(--giapha-root-border); }
.giapha-app .giapha-node-box.giapha-root text { fill: var(--giapha-root-text); }

.giapha-app .giapha-node-box.giapha-chi-1 rect.giapha-box { fill: var(--giapha-chi1-box); stroke: var(--giapha-chi1-border); }
.giapha-app .giapha-node-box.giapha-chi-1 text { fill: var(--giapha-chi1-text); }
.giapha-app .giapha-node-box.giapha-chi-2 rect.giapha-box { fill: var(--giapha-chi2-box); stroke: var(--giapha-chi2-border); }
.giapha-app .giapha-node-box.giapha-chi-2 text { fill: var(--giapha-chi2-text); }
.giapha-app .giapha-node-box.giapha-chi-3 rect.giapha-box { fill: var(--giapha-chi3-box); stroke: var(--giapha-chi3-border); }
.giapha-app .giapha-node-box.giapha-chi-3 text { fill: var(--giapha-chi3-text); }

.giapha-app .giapha-node-box.giapha-highlight rect.giapha-box { stroke: var(--giapha-red-title); stroke-width: 3.5; }

.giapha-app .giapha-tree-link { fill: none; stroke: rgba(60, 45, 20, 0.55); stroke-width: 1.6; }

.giapha-app .giapha-toggle-btn circle { fill: var(--giapha-gold); stroke: var(--giapha-bronze-dark); stroke-width: 1; }
.giapha-app .giapha-toggle-btn text { font-size: 11px; font-weight: 700; fill: var(--giapha-bronze-dark); text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }

/* ---------- Dấu hiệu: thành viên mới bổ sung / danh hiệu ---------- */
.giapha-app .giapha-new-badge circle { fill: var(--giapha-jade); stroke: var(--giapha-paper); stroke-width: 1.5; }
.giapha-app .giapha-new-badge text { font-size: 8px; font-weight: 700; fill: var(--giapha-paper); text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }

.giapha-app .giapha-modal-title-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--giapha-gold); padding: 2px 10px; border-radius: 999px; margin: 4px 0 0;
}
.giapha-app .giapha-modal-new-tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: #fff;
  background: var(--giapha-jade); padding: 2px 10px; border-radius: 999px; margin: 4px 6px 0 0;
}
.giapha-app .giapha-m-tag.giapha-gold { background: var(--giapha-gold); color: #3d2c0c; }

/* ---------- Stats bar (thanh tổng kết) ---------- */

.giapha-app .giapha-stats-bar {
  width: 100%; max-width: 1180px; margin-top: 14px;
  background: var(--giapha-maroon); color: var(--giapha-gold-light);
  border: 1.5px solid var(--giapha-gold); border-radius: 12px;
  padding: 12px 20px; text-align: center;
  font-family: var(--giapha-font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.giapha-app .giapha-stats-bar .giapha-sep { color: var(--giapha-gold); margin: 0 10px; font-weight: 400; }
.giapha-app .giapha-stats-bar .giapha-stats-sub { font-family: var(--giapha-font-body); font-weight: 400; font-size: 12.5px; opacity: 0.85; }

.giapha-app .giapha-site-footer { margin-top: 20px; font-size: 12px; color: #8a743f; text-align: center; }

/* ---------- Modal ---------- */

.giapha-app .giapha-modal-overlay { position: fixed; inset: 0; background: rgba(42, 33, 24, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.giapha-app .giapha-modal-overlay.giapha-hidden { display: none; }

.giapha-app .giapha-modal-card {
  background: var(--giapha-paper); border: 2px solid var(--giapha-gold); border-radius: 16px;
  max-width: 480px; width: 100%; max-height: 84vh; overflow-y: auto;
  padding: 26px 26px 22px; box-shadow: 0 24px 48px rgba(0,0,0,0.35); position: relative;
}

.giapha-app .giapha-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--giapha-bronze); background: var(--giapha-paper); color: var(--giapha-bronze-dark);
  font-size: 16px; cursor: pointer; line-height: 1;
}

.giapha-app .giapha-modal-role { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--giapha-red-title); font-weight: 600; margin: 0 0 6px; }
.giapha-app .giapha-modal-name { font-family: var(--giapha-font-display); font-weight: 700; font-size: 22px; color: var(--giapha-bronze-dark); margin: 0 0 4px; }
.giapha-app .giapha-modal-id { font-size: 12px; color: #8a743f; margin: 0 0 16px; }

.giapha-app .giapha-modal-section { border-top: 1px solid rgba(138,106,47,0.25); padding-top: 12px; margin-top: 12px; }
.giapha-app .giapha-modal-section h4 { font-family: var(--giapha-font-display); font-size: 13px; color: var(--giapha-jade-dark); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }

.giapha-app .giapha-modal-row { display: flex; gap: 8px; font-size: 13.5px; margin-bottom: 6px; line-height: 1.5; }
.giapha-app .giapha-modal-row .giapha-label { color: #8a743f; min-width: 92px; flex-shrink: 0; }
.giapha-app .giapha-modal-row .giapha-value a { color: var(--giapha-bronze-dark); font-weight: 600; cursor: pointer; text-decoration: underline dotted; }

.giapha-app .giapha-modal-list { list-style: none; margin: 0; padding: 0; }
.giapha-app .giapha-modal-list li { font-size: 13.5px; padding: 5px 0; border-bottom: 1px dashed rgba(138,106,47,0.2); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.giapha-app .giapha-modal-list li:last-child { border-bottom: none; }
.giapha-app .giapha-modal-list .giapha-m-name { font-weight: 600; color: var(--giapha-bronze-dark); cursor: pointer; text-decoration: underline dotted; }
.giapha-app .giapha-modal-list .giapha-m-meta { color: #8a743f; font-size: 11.5px; }
.giapha-app .giapha-modal-list .giapha-m-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--giapha-jade); color: var(--giapha-paper); }
.giapha-app .giapha-modal-list .giapha-m-tag.giapha-female { background: var(--giapha-red-title); }

.giapha-app .giapha-modal-note { font-style: italic; color: var(--giapha-jade-dark); font-size: 13px; }
.giapha-app .giapha-modal-empty { font-size: 13px; color: #a5915d; font-style: italic; }