/* Ý 39: cây gia phả. Đường nối vẽ bằng viền CSS của ul/li (không cần thư viện vẽ). */
.gp-scroll { overflow-x: auto; padding: 1.5rem .5rem 2rem; border-radius: 20px; border: 1px solid var(--fa-line);
  background: radial-gradient(circle at 50% 0%, rgba(255, 214, 120, .25), transparent 60%), var(--fa-surface); box-shadow: var(--fa-shadow); }
.gp-tree { min-width: max-content; display: flex; justify-content: center; --gp-line: #D9B48A; }
.gp-tree ul { position: relative; display: flex; justify-content: center; padding: 26px 0 0; margin: 0; }
.gp-tree > ul { padding-top: 0; gap: 2.5rem; }
.gp-tree li { position: relative; list-style: none; display: flex; flex-direction: column; align-items: center; padding: 26px 10px 0; }
.gp-tree > ul > li { padding-top: 0; }
/* nối từ con lên thanh ngang */
.gp-tree li::before, .gp-tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 2px solid var(--gp-line); }
.gp-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--gp-line); }
.gp-tree li:only-child::before { display: none; }
.gp-tree li:only-child::after { border-top: 0; }
.gp-tree li:first-child::before, .gp-tree li:last-child::after { border: 0 none; }
.gp-tree li:last-child::before { border-right: 2px solid var(--gp-line); border-radius: 0 8px 0 0; }
.gp-tree li:first-child::after { border-radius: 8px 0 0 0; }
.gp-tree > ul > li::before, .gp-tree > ul > li::after { display: none; }
/* nối từ cha mẹ xuống */
.gp-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid var(--gp-line); }

.gp-couple { display: flex; align-items: center; gap: .35rem; }
.gp-heart { color: var(--fa-coral); font-size: .9rem; }
.gp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 128px; padding: .7rem .5rem .6rem;
  border-radius: 16px; text-decoration: none; color: var(--fa-ink); background: var(--fa-bg); border: 1px solid var(--fa-line);
  box-shadow: 0 8px 18px -12px rgba(120, 70, 25, .5); transition: transform .3s var(--fa-ease); }
a.gp-card[href]:hover { transform: translateY(-3px); color: var(--fa-ink); }
.gp-card b { font-size: .86rem; line-height: 1.2; text-align: center; }
.gp-card small { font-size: .72rem; color: var(--fa-muted); text-align: center; }
.gp-card .gp-note { font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gp-face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; margin-bottom: .3rem; flex: none;
  font-weight: 700; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); box-shadow: 0 0 0 3px var(--fa-surface), 0 0 0 5px var(--fa-line); }
.gp-face img { width: 100%; height: 100%; object-fit: cover; }
.gp-card.NAM .gp-face { background: linear-gradient(135deg, #8EC5F0, #3C83C4); }
.gp-card.NU .gp-face { background: linear-gradient(135deg, #F7A9BE, #D9658A); }
.gp-card.is-passed { background: var(--fa-bg-2); }
.gp-card.is-passed .gp-face { filter: grayscale(.6); }
.gp-passed { position: absolute; top: 6px; right: 8px; color: #B9A48C; font-size: .8rem; }
.gp-add-child { margin-top: .4rem; font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--fa-amber-dark); padding: .1rem .55rem;
  border-radius: 999px; border: 1px dashed var(--fa-line); background: var(--fa-surface); opacity: .75; transition: opacity .2s; }
.gp-add-child:hover { opacity: 1; color: var(--fa-amber-dark); }
.gp-form { max-width: 820px; }
@media (max-width: 575px) { .gp-card { width: 108px; } .gp-face { width: 44px; height: 44px; } }