.ft { --ft-ink:#243d35; --ft-green:#28765d; --ft-border:#dde6df; color:var(--ft-ink); margin:1rem 0 3rem; font-family:inherit; }
.ft *, .ft *::before, .ft *::after { box-sizing:border-box; }
.ft [hidden] { display:none !important; }
.ft-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ft-eyebrow { color:#527766; font-size:11px; font-weight:700; letter-spacing:.16em; margin:0 0 7px; }
.ft h2 { font-size:clamp(24px,3vw,32px); font-weight:750; line-height:1.25; margin:0; letter-spacing:-.03em; }
.ft-subtitle { color:#687b71; font-size:14px; margin:7px 0 0; }
.ft-total { flex-shrink:0; background:#e7efe8; border-radius:24px; padding:9px 15px; font-size:13px; font-weight:600; }
.ft-app { border:1px solid var(--ft-border); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 8px 32px #243d3508; }
.ft-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:20px 24px 12px; }
.ft-search { position:relative; flex:1; max-width:460px; min-width:0; }
.ft-search-label { display:block; font-size:12px; font-weight:650; color:#64736a; }
.ft-search-input { display:block; width:100%; height:46px; margin-top:6px; border:1px solid #cddbd2; border-radius:10px; padding:0 14px; background:#fafcf9; color:var(--ft-ink); font-size:16px; font-weight:400; }
.ft-results { position:absolute; z-index:10; top:100%; margin-top:6px; width:100%; max-height:300px; overflow:auto; background:white; border:1px solid var(--ft-border); border-radius:10px; box-shadow:0 10px 24px #172b2426; }
.ft-result { display:block; width:100%; min-height:44px; padding:12px; text-align:left; font-size:14px; overflow-wrap:anywhere; }
.ft-result:hover { background:#eaf3ed; }
.ft-modes { display:flex; padding:4px; border:1px solid var(--ft-border); border-radius:12px; background:#f3f6f2; flex-shrink:0; }
.ft-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:8px 13px; border:1px solid var(--ft-border); border-radius:9px; background:#fff; color:var(--ft-ink); font-size:13px; font-weight:600; cursor:pointer; line-height:1.35; }
.ft-button:hover { background:#edf5ee; border-color:#a6bfb0; }
.ft-modes .ft-button { border:0; background:transparent; }
.ft-modes .ft-button[aria-pressed=true] { background:var(--ft-green); color:#fff; box-shadow:0 2px 4px #12402e26; }
.ft-controls { display:flex; align-items:center; gap:8px; padding:0 24px 12px; flex-wrap:wrap; }
.ft-diagram-controls { display:flex; gap:6px; }
.ft-status { font-size:12px; color:#6c7d72; padding:0 24px 14px; margin:0; }
.ft-hint { margin:0; padding:13px 20px; border-top:1px solid var(--ft-border); color:#6b7c71; font-size:12px; text-align:center; }
.ft-outline { padding:22px 24px; background:#f7f9f5; }
.ft-row { margin:0 0 20px calc(var(--depth) * 26px); padding-left:14px; border-left:2px solid #c5d6cb; max-width:700px; }
.ft-family { display:flex; gap:12px; align-items:flex-start; }
.ft-card { display:flex; align-items:center; gap:12px; width:100%; min-width:0; max-width:340px; height:100px; padding:14px; border:1px solid #cdded2; border-left:4px solid #549b7c; border-radius:12px; background:#fff; text-align:left; box-shadow:0 3px 8px #233b3406; color:var(--ft-ink); cursor:pointer; }
.ft-card[data-gender="Nữ"] { border-left-color:#b9847b; }
.ft-card:hover { border-color:#6da38a; box-shadow:0 4px 12px #233b3412; }
.ft-card.ft-selected { outline:3px solid #bc9255; outline-offset:2px; }
.ft-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; background:#e5eee5; flex-shrink:0; border:2px solid #f0f4ec; }
.ft-card-content { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ft-card-kind { font-size:9px; font-weight:700; color:#7a8b7e; letter-spacing:.1em; }
.ft-card-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.3; overflow-wrap:anywhere; }
.ft-card-dates { font-size:11px; color:#718174; }
.ft-spouse { position:relative; flex:1; min-width:0; }
.ft-spouse::before { content:'♡'; position:absolute; left:-12px; top:40px; background:#f7f9f5; color:#b28b7d; font-size:12px; }
.ft-branch { min-height:44px; min-width:70px; border:1px solid #c5d9cc; border-radius:8px; background:#eaf3eb; color:#347354; padding:8px 12px; margin-top:8px; font-size:12px; font-weight:650; cursor:pointer; }
.ft-branch:hover { background:#d9ebdf; }
.ft-diagram { height:clamp(480px,65vh,740px); position:relative; background-color:#f8faf6; background-image:radial-gradient(#c5d4c7 .8px,transparent .8px); background-size:20px 20px; touch-action:none; overflow:hidden; }
.ft-diagram svg { display:block; width:100%; height:100%; cursor:grab; }
.ft-diagram svg:active { cursor:grabbing; }
.ft-diagram .ft-card { width:274px; max-width:none; }
.ft-diagram .ft-branch { margin:0; }
.ft-link { fill:none; stroke:#a1b9a7; stroke-width:1.8; }
.ft-spouse-link { fill:none; stroke:#bb9785; stroke-width:2; }
.ft-empty { padding:20px; font-size:14px; }
.ft-backdrop { position:fixed; inset:0; background:#14281f66; z-index:80; }
.ft-panel { position:fixed; top:20px; right:20px; bottom:20px; width:min(420px,calc(100vw - 40px)); z-index:81; background:#fff; border:1px solid var(--ft-border); border-radius:20px; box-shadow:0 16px 80px #183c3333; display:flex; flex-direction:column; overflow:hidden; }
.ft-panel-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:12px 20px; border-bottom:1px solid var(--ft-border); }
.ft-panel-header .ft-eyebrow { margin:0; }
.ft-panel-body { overflow-y:auto; overscroll-behavior:contain; padding:22px; }
.ft-identity { text-align:center; padding:0 0 20px; border-bottom:1px solid var(--ft-border); }
.ft-identity .ft-avatar { width:88px; height:88px; margin:0 auto 12px; }
.ft-identity h3 { font-size:24px; line-height:1.3; font-weight:700; overflow-wrap:anywhere; }
.ft-profile-meta { display:inline-block; margin-top:12px; padding:5px 12px; border-radius:20px; background:#edf4ed; font-size:12px; }
.ft-facts { margin:20px 0; }
.ft-facts dt { color:#7a887f; font-size:12px; margin-top:14px; }
.ft-facts dd { color:#2b4538; font-size:14px; margin:4px 0 0; overflow-wrap:anywhere; }
.ft-panel h4 { font-size:15px; font-weight:700; margin:22px 0 12px; }
.ft-relation { display:flex; gap:10px; align-items:center; justify-content:space-between; border-bottom:1px solid #eef2eb; min-height:44px; font-size:13px; }
.ft-relation > span:first-child { color:#718174; flex-shrink:0; }
.ft-relative { color:#277456; min-height:44px; padding:6px; text-align:right; font-weight:600; overflow-wrap:anywhere; }
.ft-bio { color:#52695a; font-size:14px; line-height:1.7; overflow-wrap:anywhere; overflow-x:auto; }
.ft-bio p { margin:0 0 12px; }.ft-bio a { text-decoration:underline; }.ft-bio ul,.ft-bio ol { padding-left:22px; list-style:revert; }
.ft-gallery { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.ft-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.ft :focus-visible { outline:3px solid #b88032; outline-offset:3px; }
@media(max-width:767px) {
 .ft-heading { align-items:flex-start; }.ft-total { padding:7px 9px; font-size:11px; }.ft-subtitle { font-size:12px; }
 .ft-toolbar { flex-direction:column; align-items:stretch; padding:16px 14px 10px; gap:12px; }.ft-search { max-width:none; }.ft-modes { justify-content:stretch; }.ft-modes .ft-button { flex:1; }
 .ft-controls { padding:0 14px 10px; }.ft-status { padding:0 14px 12px; }.ft-outline { padding:16px 10px; }.ft-row { margin-left:calc(var(--depth) * 10px); padding-left:8px; margin-bottom:18px; }
 .ft-family { flex-direction:column; gap:8px; }.ft-family > .ft-card { max-width:none; }.ft-spouse { width:calc(100% - 16px); margin-left:16px; }.ft-spouse .ft-card { max-width:none; height:88px; background:#fffdf9; }
 .ft-spouse::before { top:32px; left:-16px; }.ft-card { padding:10px; gap:10px; }.ft-avatar { width:40px; height:40px; }
 .ft-diagram { height:65dvh; min-height:380px; }.ft-hint { padding:12px; line-height:1.6; }
 .ft-panel { top:auto; bottom:0; right:0; width:100%; max-height:88dvh; border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom); }.ft-panel-body { padding:18px; }.ft-identity h3 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .ft *, .ft *::before { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }