:root {
  --red: #8b1a1a; --red-d: #6d1212; --gold: #b8860b; --gold-l: #e9d9a6;
  --cream: #fbf6e9; --paper: #fffdf7; --ink: #2b1a10; --muted: #7a6a58; --line: #e4d9bf;
  --ok: #2e7d32; --warn: #b26a00; --danger: #b3261e;
  --radius: 10px; --shadow: 0 1px 3px rgba(60, 30, 10, .12), 0 6px 18px rgba(60, 30, 10, .08);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1.45; }
h1, h2, h3 { margin: 0 0 .5em; font-family: "Times New Roman", "Noto Serif", serif; color: var(--red); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--red); }
[hidden] { display: none !important; }

/* ---------- nút ---------- */
.btn { border: 1px solid var(--line); background: #fff; padding: 7px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: #f6efdc; border-color: var(--gold); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-d); border-color: var(--red-d); }
.btn-danger { color: var(--danger); border-color: #e7bcb8; }
.btn-danger:hover { background: #fdeceb; border-color: var(--danger); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-icon { padding: 5px 9px; }

/* ---------- form ---------- */
label.field { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
label.field > span { display: block; margin-bottom: 4px; }
input[type=text], input[type=password], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-l); border-color: var(--gold); }
textarea { min-height: 70px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 400; }
.check input { width: auto; }
.error-msg { color: var(--danger); background: #fdeceb; border: 1px solid #f3c6c2; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); }
.hint.warn { color: var(--warn); }

/* ---------- đăng nhập ---------- */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 20% 10%, #f3e3b3 0, transparent 40%), radial-gradient(circle at 85% 90%, #ecc9b8 0, transparent 38%), var(--cream); }
.login-card { width: min(420px, 100%); background: var(--paper); border: 2px solid var(--red); outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 6px; padding: 32px 28px; box-shadow: var(--shadow); }
.login-card .crest { text-align: center; margin-bottom: 18px; }
.login-card .crest .big { font: 700 30px/1.1 "Times New Roman", serif; color: var(--red); letter-spacing: 2px; }
.login-card .crest .sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.orn { color: var(--gold); letter-spacing: 6px; font-size: 14px; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 10px; font-size: 16px; }

/* ---------- khung chính ---------- */
.shell { display: flex; flex-direction: column; height: 100%; height: 100dvh; overflow: hidden; }
.shell > .topbar, .shell > .tabs, .shell > .banner { flex: 0 0 auto; }
.topbar { background: var(--red); color: #fff; border-bottom: 3px solid var(--gold); padding: 8px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { font: 700 20px "Times New Roman", serif; letter-spacing: 1px; }
.brand small { display: block; font: 400 12px "Segoe UI", sans-serif; opacity: .8; letter-spacing: 0; }
.spacer { flex: 1; }
.userbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.badge { background: var(--gold); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.badge.member { background: #5b7b5b; }
.topbar .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.topbar .btn:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }
.tabs { background: var(--paper); border-bottom: 1px solid var(--line); display: flex; gap: 4px; padding: 0 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: relative; z-index: 30; box-shadow: 0 2px 4px rgba(60, 30, 10, .06); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 11px 16px; border: 0; background: none; cursor: pointer; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--red); }
.tab.active { color: var(--red); border-bottom-color: var(--red); }
.content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.page { padding: 18px; max-width: 1200px; margin: 0 auto; }

/* ---------- cây gia phả ---------- */
.tree-page { display: flex; flex-direction: column; height: 100%; }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; background: var(--paper); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .search { position: relative; width: 260px; }
.results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 20; max-height: 300px; overflow: auto; }
.results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; }
.results button:hover { background: #f6efdc; }
.results small { color: var(--muted); }
.tree-body { flex: 1; min-height: 0; display: flex; position: relative; }
.viewport { flex: 1; overflow: auto; background-color: #fdf9ee; background-image: radial-gradient(#e9dcb8 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
.viewport.drag { cursor: grabbing; user-select: none; }
.viewport svg { display: block; }
.node { cursor: pointer; }
.node { transition: transform .15s ease; }
.node:hover { transform: translateY(-3px); }
.node:hover rect:not(.cx) { stroke-width: 2.6; }   /* trước đây dùng filter drop-shadow: rất nặng với SVG lớn */
.node.sel rect:not(.cx) { stroke: #d4202a; stroke-width: 3.4; }
.node.hit rect:not(.cx) { stroke: #e08a00; stroke-width: 3.4; }
.tog { cursor: pointer; }
.detail { width: 340px; background: var(--paper); border-left: 1px solid var(--line); overflow: auto; padding: 16px; box-shadow: -4px 0 12px rgba(60, 30, 10, .06); }
.detail h2 { font-size: 22px; margin-bottom: 2px; }
.detail dl { margin: 12px 0; display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; font-size: 14px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
.detail .actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 2px 10px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--gold); background: #f6efdc; }
.close-x { float: right; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .big { font-size: 48px; }

/* ---------- bảng ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filters > * { flex: 0 1 auto; }
.filters input[type=search] { width: 260px; }
.filters select { width: auto; }
.tbl-wrap { overflow-x: auto; flex-grow: 1; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f6efdc; color: var(--red); font-weight: 700; white-space: nowrap; }
tr:hover td { background: #fbf6e6; }
td.act { white-space: nowrap; text-align: right; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eee; }
.tag.ok { background: #e3f1e4; color: var(--ok); }
.tag.off { background: #fdeceb; color: var(--danger); }
.link { background: none; border: 0; padding: 0; color: var(--red); cursor: pointer; text-align: left; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ---------- thống kê ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat b { display: block; font: 700 30px "Times New Roman", serif; color: var(--red); }
.stat span { color: var(--muted); font-size: 13px; }
.bars .bar { display: grid; grid-template-columns: 70px 1fr 40px; gap: 10px; align-items: center; margin: 6px 0; font-size: 14px; }
.bars .track { background: #f1e8cf; border-radius: 6px; height: 18px; overflow: hidden; }
.bars .fill { background: linear-gradient(90deg, var(--red), #b04545); height: 100%; border-radius: 6px; }

/* ---------- quản trị ---------- */
.subtabs { display: flex; gap: 6px; margin: -18px -18px 14px; padding: 12px 18px 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 25; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 3px 6px -4px rgba(60, 30, 10, .25); }
.subtabs > .btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 8px; margin: -18px -18px 12px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs .spacer { display: none; }
}
.subtabs .btn.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- hộp thoại ---------- */
.overlay { position: fixed; inset: 0; background: rgba(40, 20, 10, .55); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: var(--paper); border-radius: 12px; border-top: 4px solid var(--red); width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.modal.wide { width: min(980px, 100%); }
.modal header { padding: 14px 18px 6px; display: flex; align-items: center; }
.modal header h2 { margin: 0; font-size: 21px; flex: 1; }
.modal .body { padding: 8px 18px; overflow: auto; }
.modal footer { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sp-row { display: grid; grid-template-columns: 1.6fr .8fr .8fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.export-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.preview { background: #ddd; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; padding: 10px; min-height: 300px; max-height: 62vh; overflow: auto; }
.preview svg { max-width: 100%; max-height: 56vh; width: auto; height: auto; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }

/* ---------- thông báo ---------- */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; }
.toast { background: #2b1a10; color: #fff; padding: 10px 18px; border-radius: 8px; box-shadow: var(--shadow); animation: pop .2s; }
.toast.err { background: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
  .export-grid { grid-template-columns: 1fr; }
  .detail { position: absolute; right: 0; bottom: 0; left: 0; width: auto; max-height: 55%; border-left: 0; border-top: 2px solid var(--gold); box-shadow: 0 -6px 18px rgba(0, 0, 0, .15); }
  .toolbar .search { width: 100%; }
  .sp-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- tính năng bổ sung: lịch giỗ, ảnh, chữ dọc ---------- */
.btn.on { background: var(--red); border-color: var(--red); color: #fff; }
.banner { background: #fff3cf; border-bottom: 2px solid var(--gold); padding: 8px 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.banner span { flex: 1 1 320px; }
.portrait { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); margin: 4px auto 10px; box-shadow: var(--shadow); }
.photo-edit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.photo-prev { width: 96px; height: 96px; border-radius: 50%; border: 2px dashed var(--gold); display: grid; place-items: center; overflow: hidden; background: #fbf6e6; text-align: center; font-size: 12px; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.tag { white-space: nowrap; }
@media (max-width: 900px) { .sp-row { grid-template-columns: 1fr 1fr; } }

/* ---------- nhắc giỗ Zalo ---------- */
.zl-row { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.zl-found { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.zl-found code, .error-msg code, .hint code { background: #f1e8cf; padding: 1px 6px; border-radius: 4px; font-size: 12px; word-break: break-all; }
.zl-pre { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; white-space: pre-wrap; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; max-width: 620px; }
details.guide { background: #fff8e1; border: 1px solid var(--gold-l); border-radius: 8px; padding: 10px 14px; }
details.guide ol { margin: 8px 0; padding-left: 20px; } details.guide li { margin-bottom: 6px; }
@media (max-width: 900px) { .zl-row { grid-template-columns: 1fr 1fr auto; } }

.kin-box{background:#fbf3dc;border:1px solid #d9c27a;border-radius:8px;padding:8px 10px;margin:8px 0}.kin-term{font-size:22px;font-weight:700;color:#8b1a1a;margin:2px 0}

.pk-compose textarea{width:100%;box-sizing:border-box}
.pk-pend{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pk-pi{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.pk-pi img,.pk-pi .vid{width:48px;height:48px;object-fit:cover;border-radius:6px;background:#eee;display:grid;place-items:center;font-size:22px}
.pk-pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-pn progress{width:100%}
.pk-post header{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px;flex-wrap:wrap}
.pk-post.pinned{border-color:#d9b44a}
.pk-text{white-space:pre-wrap;word-break:break-word}
.pk-media{display:grid;gap:6px;margin:8px 0;grid-template-columns:1fr}
.pk-media.n2,.pk-media.n3,.pk-media.n4{grid-template-columns:1fr 1fr}
.pk-media video,.pk-thumb img{width:100%;max-height:380px;object-fit:cover;border-radius:8px;background:#000;display:block}
.pk-thumb{border:0;padding:0;background:none;cursor:zoom-in}
.pk-comments{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.pk-cm{padding:4px 0}
.pk-cmform{display:flex;gap:6px;margin-top:6px}.pk-cmform input{flex:1}

/* ---------- tab Sự kiện: lịch phong thủy ---------- */
input[type=date], input[type=time], input[type=number] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 400; max-width: 100%; }
.field input[type=date], .field input[type=time] { width: 100%; }
.subtabs .spacer { flex: 1; }
.pt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.pt-wrap .card { margin-bottom: 0; }
.pt-detail { position: sticky; top: 68px; max-height: calc(100dvh - 150px); overflow: auto; }
.pt-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.pt-lbl select, .pt-lbl input { font-weight: 400; width: auto; }
.pt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pt-wd { text-align: center; font-weight: 700; color: var(--red); padding: 6px 0; font-size: 13px; }
.pt-wd.cn { color: var(--danger); }
.pt-cell { position: relative; border: 1px solid var(--line); background: #fff; border-radius: 8px; min-height: 64px; padding: 4px 6px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.pt-cell:hover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-l); }
.pt-cell.pt-empty { background: none; border: 0; cursor: default; box-shadow: none; }
.pt-cell b { font-size: 17px; line-height: 1.1; }
.pt-cell .lu { font-size: 11.5px; color: var(--muted); }
.pt-cell .mk { margin-top: auto; font-size: 12px; display: flex; gap: 3px; align-items: center; min-height: 14px; }
.pt-cell.today { outline: 2px solid var(--red); outline-offset: -2px; }
.pt-cell.sel { box-shadow: 0 0 0 3px var(--gold); border-color: var(--gold); }
.pt-hd, .pt-good { background: #fff3cf; border-color: #e6cf87; }
.pt-hden { background: #fff; }
.pt-great { background: #bfe3c0; border-color: #7fbf84; }
.pt-fair { background: #fffaf0; }
.pt-bad { background: #fbe0cf; border-color: #e8b99a; }
.pt-worst { background: #f4c4be; border-color: #dc8e86; }
i.hd { color: var(--gold); font-style: normal; } i.bd { color: var(--danger); font-style: normal; font-weight: 800; } i.evd { color: var(--red); font-style: normal; font-size: 10px; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-top: 10px; align-items: center; }
.pt-legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px; margin-right: 4px; }
.pt-g { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pt-g small { opacity: .7; font-weight: 400; }
.pt-g.pt-great { background: #2e7d32; color: #fff; border: 0; } .pt-g.pt-good { background: #e3f1e4; color: var(--ok); border: 0; } .pt-g.pt-fair { background: #efe9d8; color: #6b5a48; border: 0; }
.pt-g.pt-bad { background: #fbe0cf; color: #a24b12; border: 0; } .pt-g.pt-worst { background: var(--danger); color: #fff; border: 0; }
.pt-cell.pt-good { background: #e3f1e4; border-color: #a9d3ac; }
.pt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pt-dl { display: grid; grid-template-columns: 82px 1fr; gap: 3px 10px; margin: 8px 0; font-size: 14px; }
.pt-dl dt { color: var(--muted); } .pt-dl dd { margin: 0; }
.pt-sub { font: 700 13px "Segoe UI", sans-serif; color: var(--red); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.pt-hr { cursor: default; } .pt-hr:hover { border-color: var(--line); background: #fff; } .pt-hr small { color: var(--muted); }
.pt-tbl { width: 100%; font-size: 14px; } .pt-tbl td { padding: 5px 4px; vertical-align: middle; }
.pt-bad-list { margin: 8px 0; padding-left: 18px; font-size: 13px; color: #8a3b12; }
.pt-note { margin: 6px 0; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.pt-note.neg { background: #fdeceb; color: var(--danger); } .pt-note.pos { background: #e3f1e4; color: var(--ok); }
.pt-hint { background: #fbf3dc; border: 1px solid #e6d9a8; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; font-size: 13.5px; }
.pt-hint.neg { background: #fdeceb; border-color: #f3c6c2; } .pt-hint.pos { background: #e8f4e8; border-color: #b7d9ba; }
.pt-disc { margin-top: 18px; }
.pt-ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pt-ev:last-child { border-bottom: 0; }
.pt-ev.warn { background: linear-gradient(90deg, #fff5f2, transparent); }
.pt-ev-d { flex: 0 0 62px; text-align: center; background: var(--red); color: #fff; border-radius: 8px; padding: 6px 4px; align-self: flex-start; line-height: 1.15; }
.pt-ev-d b { display: block; font: 700 24px "Times New Roman", serif; } .pt-ev-d span { display: block; font-size: 12px; } .pt-ev-d small { display: block; font-size: 10.5px; opacity: .8; }
.pt-ev-b { flex: 1; min-width: 0; } .pt-ev-a { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.pt-note-txt { white-space: pre-wrap; word-break: break-word; margin: 4px 0; }
.pt-gio { background: #fff8e1; border: 1px solid var(--gold-l); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.pt-detail .pt-ev { padding: 6px 0; } .pt-detail .pt-ev-d { flex-basis: 48px; } .pt-detail .pt-ev-d b { font-size: 18px; }
@media (max-width: 1000px) {
  .pt-wrap { grid-template-columns: 1fr; }
  .pt-detail { position: static; max-height: none; }
}
@media (max-width: 560px) {
  .pt-cell { min-height: 54px; padding: 3px 4px; } .pt-cell b { font-size: 15px; } .pt-cell .lu { font-size: 10.5px; }
  .pt-ev { flex-wrap: wrap; }
}

/* ---------- thanh lọc/điều khiển ghim đầu trang khi cuộn ---------- */
.sticky-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: var(--paper); margin: 0 -16px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); box-shadow: 0 3px 6px -4px rgba(60, 30, 10, .25); }
.card > .sticky-bar:first-child { margin-top: -16px; border-radius: var(--radius) var(--radius) 0 0; }
.sticky-bar.filters { margin-bottom: 12px; }
@media (max-width: 700px) {
  .sticky-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sticky-bar::-webkit-scrollbar { display: none; }
  .sticky-bar > * { flex: 0 0 auto; }
  .sticky-bar.no-m { position: static; flex-wrap: wrap; box-shadow: none; border-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .sticky-bar .spacer { display: none; }
  .tab-head { position: static; }
}

/* ---------- gọn đầu trang trên điện thoại ---------- */
.tb-btns { display: contents; }
@media (max-width: 700px) {
  .topbar { padding: 6px 12px; gap: 6px 10px; }
  .brand { font-size: 17px; } .brand small { display: none; }
  .topbar .spacer { display: none; }
  .topbar > .btn { padding: 4px 10px; font-size: 13px; }
  .userbox { gap: 6px; flex: 1 1 100%; flex-wrap: wrap; font-size: 13px; }
  .userbox > span:first-child { display: none; }
  .userbox .btn-sm { padding: 3px 8px; font-size: 12.5px; }
  .banner { padding: 6px 12px; font-size: 13px; }
  .toolbar { padding: 6px 10px; gap: 6px; }
  .toolbar .search { width: 100%; }
  .toolbar .tb-btns { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .toolbar .tb-btns::-webkit-scrollbar { display: none; }
  .toolbar .tb-btns > * { flex: 0 0 auto; }
  .toolbar .tb-btns .spacer { display: none; }
}

/* ---------- ghim cột Họ và tên khi vuốt ngang ---------- */
.tbl-name td:first-child, .tbl-name th:first-child { position: sticky; left: 0; background: var(--paper); box-shadow: 1px 0 0 var(--line), 4px 0 6px -4px rgba(60, 30, 10, .25); }
.tbl-name th:first-child { z-index: 20; background: #f6efdc; box-shadow: 1px 0 0 var(--line), 4px 0 6px -4px rgba(60, 30, 10, .25), inset 0 -2px 0 var(--gold-l); }
.tbl-name td:first-child { z-index: 10; }
.tbl-name tr:hover td:first-child { background: #fbf6e6; }
@media (max-width: 700px) {
  .tbl-name td:first-child, .tbl-name th:first-child { max-width: 38vw; min-width: 104px; white-space: normal; }
  .tbl-name th:first-child { white-space: nowrap; }
}

/* ---------- điện thoại: thanh tab chính nằm dưới cùng, dễ chạm bằng ngón cái ---------- */
.tab .ti { margin-right: 6px; }
@media (max-width: 700px) {
  .shell > .tabs { order: 99; border-bottom: 0; border-top: 1px solid var(--line); box-shadow: 0 -2px 6px rgba(60, 30, 10, .1); padding: 0 4px env(safe-area-inset-bottom); gap: 0; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 10px 6px; min-width: 74px; border-bottom: 0; border-top: 3px solid transparent; font-size: 11.5px; line-height: 1.2; }
  .tab .ti { margin: 0; font-size: 20px; line-height: 1.15; }
  .tab.active { border-top-color: var(--red); background: rgba(139, 26, 26, .06); }
  #toasts { bottom: 78px; }
}

/* ---------- điện thoại: sơ đồ cây tự vừa khung, chụm hai ngón để phóng to ---------- */
.viewport { touch-action: pan-x pan-y; overscroll-behavior: contain; will-change: scroll-position; }
.viewport.fit svg { margin: 0 auto; }
.viewport.fit { display: flex; align-items: center; justify-content: center; }
.viewport.fit svg { margin: 0; flex: none; }
.fit-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(43, 26, 16, .78); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
@media (min-width: 701px) { .fit-hint { display: none; } }

/* ---------- thanh tiêu đề: chữ lớn hơn cho dễ nhìn ---------- */
.brand { font-size: 28px; letter-spacing: 1.2px; line-height: 1.15; }
.brand small { font-size: 15px; opacity: .92; margin-top: 2px; }
.userbox { font-size: 16px; }
.badge { font-size: 14px; padding: 2px 10px; }
.topbar .btn, .topbar .btn-sm { font-size: 15px; padding: 6px 14px; }
@media (max-width: 700px) {
  .brand { font-size: 23px; letter-spacing: .6px; }
  .userbox { font-size: 15px; }
  .badge { font-size: 13px; }
  .topbar > .btn { font-size: 14.5px; padding: 5px 11px; }
  .userbox .btn-sm { font-size: 14px; padding: 4px 10px; }
}

/* ---------- điện thoại: gom nút vào menu, hiện dòng phụ ---------- */
.topmenu { position: relative; display: none; }
.dropmenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(40, 20, 10, .35); padding: 6px; z-index: 60; }
.dropmenu[hidden] { display: none; }
.dm-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 15px; }
.dropmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 10px; font-size: 16px; color: var(--ink); border-radius: 8px; cursor: pointer; }
.dropmenu button:hover, .dropmenu button:active { background: #f6efdc; }
@media (max-width: 700px) {
  .topbar { flex-wrap: nowrap; align-items: center; }
  .topbar .brand { flex: 1; min-width: 0; }
  .brand small { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > .btn, .topbar .userbox { display: none; }
  .topmenu { display: block; flex: none; }
  .topbar .menu-btn { font-size: 15px; padding: 7px 13px; display: inline-flex; }
}

/* ---------- thanh Đóng luôn hiện trên khung chi tiết thành viên ---------- */
.close-x { float: none; }
.detail-bar { position: sticky; top: -16px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -16px -16px 12px; padding: 8px 12px 8px 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-weight: 700; color: var(--muted); font-size: 14px; }
.detail-bar .close-x { background: var(--red); color: #fff; border-color: var(--red); font-size: 15px; font-weight: 700; padding: 6px 14px; }
.detail-bar .close-x:hover { background: var(--red-d); }
.tree-body:has(.detail) .fit-hint { display: none; }

/* ---------- sơ đồ cây: căn giữa khung, chữ sắc nét ---------- */
.viewport { display: flex; }
.viewport > svg { margin: auto; flex: none; }
#tree-svg { text-rendering: optimizeLegibility; }

/* ---------- ảnh vợ/chồng ---------- */
.sp-row { grid-template-columns: 54px 1.6fr .8fr .8fr 1fr auto; }
.sp-ph { position: relative; width: 48px; height: 48px; }
.sp-pick { width: 48px; height: 48px; border-radius: 50%; border: 2px dashed var(--gold); background: #fbf6e6; padding: 0; overflow: hidden; cursor: pointer; display: grid; place-items: center; font-size: 18px; }
.sp-pick img { width: 100%; height: 100%; object-fit: cover; }
.sp-pick-x { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 11px; line-height: 1; padding: 0; cursor: pointer; }
.sp-pick-x[hidden] { display: none; }
@media (max-width: 900px) { .sp-row { grid-template-columns: 54px 1fr 1fr; } .sp-row .sp-ph { grid-row: span 2; } }
.sp-thumb { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; border: 1.5px solid var(--gold); }

/* ---------- khách xem (chưa đăng nhập): ẩn chức năng cần tài khoản ---------- */
.guest [data-act=ev-new], .guest [data-act=pk-edit] { display: none; }

/* Ảnh vợ/chồng trong khung thông tin thành viên */
.sp-gallery { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 10px 0 6px; padding: 10px; background: #fbf3dc; border: 1px solid var(--line); border-radius: 10px; }
.sp-gallery figure { margin: 0; width: 88px; text-align: center; }
.sp-gallery img, .sp-gallery .ph { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 4px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #f1e8cf; font-size: 30px; }
.sp-gallery figcaption { font-size: 13px; line-height: 1.25; font-weight: 600; word-break: break-word; }
.sp-gallery figcaption small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
/* Ảnh vợ/chồng: căn giữa, chia đều thành các hàng cân đối */
.sp-gallery { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 8px; }
.sp-gallery figure { flex: 0 1 96px; width: 96px; }

/* Thanh "Đang xem nhánh" nằm ngay dưới thanh công cụ */
.branch-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; background: #fff3d6; border-bottom: 2px solid var(--gold); flex: 0 0 auto; }
.branch-name { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-close-red { background: #c62828; border-color: #c62828; color: #fff; font-weight: 700; flex: 0 0 auto; }
.btn-close-red:hover, .btn-close-red:active { background: #a31515; border-color: #a31515; color: #fff; }
@media (max-width: 700px) { .branch-bar { padding: 6px 10px; } .branch-name { font-size: 14px; } }

/* =====================================================================
   BẢNG (Danh sách, Lịch giỗ) – bố cục mới, thay cho các quy tắc cũ chồng chéo
   - Cột tự co giãn theo nội dung (không còn chia đều làm chữ chồng lên nhau)
   - Máy tính: tiêu đề bảng ghim ngay dưới thanh lọc (--bar-h do app.js đo)
   - Màn hình hẹp: bảng cuộn ngang/dọc trong khung riêng, ghim cả tiêu đề lẫn cột tên
   - Điện thoại: Lịch giỗ chuyển thành từng thẻ, không cần vuốt ngang
   ===================================================================== */
.card .tbl-wrap { overflow: visible; contain: none; }
.card .tbl-wrap table { table-layout: auto; width: 100%; }
td, th { overflow-wrap: anywhere; }

.tbl-sticky th { position: sticky; top: calc(var(--bar-h, 0px) - 1px); z-index: 15; background: #f6efdc; box-shadow: inset 0 -2px 0 var(--gold-l); }

/* Danh sách: cột ngắn không xuống dòng, cột tên/cha mẹ có độ rộng tối thiểu */
.tbl-list th:nth-child(1), .tbl-list td:nth-child(1) { min-width: 170px; }
.tbl-list th:nth-child(2), .tbl-list td:nth-child(2),
.tbl-list th:nth-child(3), .tbl-list td:nth-child(3),
.tbl-list th:nth-child(4), .tbl-list td:nth-child(4),
.tbl-list th:nth-child(5), .tbl-list td:nth-child(5) { white-space: nowrap; overflow-wrap: normal; }
.tbl-list th:nth-child(6), .tbl-list td:nth-child(6),
.tbl-list th:nth-child(7), .tbl-list td:nth-child(7) { min-width: 150px; }
.tbl-list th:nth-child(8), .tbl-list td:nth-child(8) { min-width: 110px; }

/* Lịch giỗ: ngày/âm lịch/đời/còn không ngắt dòng giữa chừng */
.tbl-gio th, .tbl-gio td { overflow-wrap: normal; }
.tbl-gio th:nth-child(1), .tbl-gio td:nth-child(1),
.tbl-gio th:nth-child(2), .tbl-gio td:nth-child(2),
.tbl-gio th:nth-child(4), .tbl-gio td:nth-child(4) { white-space: nowrap; }
.tbl-gio th:nth-child(3), .tbl-gio td:nth-child(3) { min-width: 180px; overflow-wrap: anywhere; }
.tbl-gio th:nth-child(5), .tbl-gio td:nth-child(5) { min-width: 110px; }

/* Máy tính bảng / màn hình hẹp: bảng tự cuộn trong khung của nó */
@media (max-width: 1000px) {
  .card .tbl-wrap.tbl-sticky { overflow: auto; max-height: var(--tbl-h, 65dvh); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .tbl-sticky th { top: 0; }
  .tbl-list table { min-width: 880px; }
  .tbl-gio table { min-width: 720px; }
  .card .tbl-wrap:not(.tbl-sticky) { overflow-x: auto; }
}

/* Điện thoại: Danh sách và Lịch giỗ hiển thị dạng thẻ (mỗi người/ngày giỗ một thẻ, có nhãn rõ ràng) */
@media (max-width: 700px) {
  .card .tbl-wrap.tbl-cards, .card .tbl-wrap.tbl-cards.tbl-sticky { overflow: visible; max-height: none; }
  .tbl-cards table, .tbl-cards tbody { display: block; min-width: 0; width: 100%; }
  .tbl-cards thead { display: none; }
  .tbl-cards tr { display: block; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; box-shadow: 0 1px 2px rgba(60, 30, 10, .06); }
  .tbl-cards tr:hover td { background: none; }
  .tbl-wrap.tbl-cards td { display: block; position: relative; padding: 4px 0 4px 100px; border: 0; white-space: normal; min-width: 0; max-width: none; overflow-wrap: anywhere; font-size: 15px; }
  .tbl-cards td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 92px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
  .tbl-wrap.tbl-cards td:empty { display: none; }
  .tbl-wrap.tbl-cards td[colspan] { padding-left: 0; text-align: center; }
  .tbl-wrap.tbl-cards td[colspan]::before { content: none; }
  /* Danh sách: tên là tiêu đề thẻ; nút Sửa/Xoá nằm cuối thẻ */
  .tbl-wrap.tbl-cards.tbl-name td:first-child { position: static; box-shadow: none; background: none; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); font-size: 17px; z-index: auto; }
  .tbl-wrap.tbl-cards.tbl-name td:first-child .link { text-align: left; font-size: 17px; }
  .tbl-wrap.tbl-cards td.act { padding: 8px 0 2px; margin-top: 4px; border-top: 1px dashed var(--line); display: flex; gap: 8px; }
  .tbl-wrap.tbl-cards td.act::before { content: none; }
  .tbl-wrap.tbl-cards td.act:empty { display: none; }
}

/* ---------- cỡ chữ trên cây gia phả ---------- */
.fs-ctl { display: inline-flex; gap: 0; flex: 0 0 auto; }
.fs-ctl .btn { border-radius: 0; font-size: 15px; min-width: 40px; justify-content: center; }
.fs-ctl .btn:first-child { border-radius: 8px 0 0 8px; border-right-width: 0; }
.fs-ctl .btn:last-child { border-radius: 0 8px 8px 0; }

/* ---------- chọn nhánh được phân quyền (form tài khoản) ---------- */
#branch-box { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
#branch-box > span { display: block; margin-bottom: 4px; }
#branch-box select { width: 100%; }
#branch-box .hint { font-weight: 400; margin-bottom: 0; }
#branch-chips { margin-bottom: 8px; }
#branch-chips:empty::before { content: "Chưa giao nhánh nào – tài khoản này chỉ được xem"; color: var(--muted); font-size: 13.5px; }
.chip-x { border: 0; background: none; color: var(--red, #8b1a1a); cursor: pointer; font-size: 13px; padding: 0 0 0 4px; line-height: 1; }
.badge.member { white-space: nowrap; }

/* ---------- Phả ký: nút đăng nhập gọn, vừa chữ (không kéo giãn hết chiều ngang) ---------- */
.card .btn.pk-login { display: inline-flex; align-self: center; width: fit-content; min-width: 0; padding: 5px 14px; font-size: 13.5px; }

/* ---------- avatar mặc định theo giới tính (chưa có ảnh) ---------- */
svg.avatar { display: block; border-radius: 50%; overflow: hidden; }
svg.portrait.avatar { width: 120px; height: 120px; }
.photo-prev svg.avatar, .sp-pick svg.avatar { width: 100%; height: 100%; }
.sp-gallery svg.ph.avatar { display: block; width: 72px; height: 72px; }

/* ---------- TỪ ĐƯỜNG: bàn thờ ảo, văn khấn, sổ lưu bút, quỹ họ ---------- */
.td-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.td-grid .card { margin-bottom: 0; }
@media (max-width: 860px) { .td-grid { grid-template-columns: 1fr; } }
.td-scene { background: #1c0606; border-color: #6e1a1a; padding: 10px; }
.td-svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.td-status { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 244, 214, .08); color: #f1dfa6; font-size: 14px; text-align: center; }
.td-status.done { background: rgba(255, 244, 214, .14); }
.td-barwrap { height: 4px; background: rgba(255, 255, 255, .15); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.td-barwrap i { display: block; height: 100%; background: #e9b04a; transition: width 1s linear; }
.td-sm { fill: none; stroke: rgba(235, 235, 235, .7); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: tdSmoke 5.5s ease-in-out infinite; opacity: 0; }
.td-sm1 { animation-delay: 1.4s; } .td-sm2 { animation-delay: 2.8s; }
@keyframes tdSmoke { 0% { opacity: 0; transform: translateY(6px) scaleY(.55) skewX(0); } 25% { opacity: .65; } 100% { opacity: 0; transform: translateY(-30px) scaleY(1.15) skewX(10deg); } }
.td-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: tdFlame 1.3s ease-in-out infinite alternate; }
@keyframes tdFlame { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(.88, 1.12) rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .td-sm, .td-flame { animation: none; } .td-sm { opacity: .35; } }
.td-ctl .field { margin-bottom: 10px; }
.td-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.td-lbl { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 96px; }
.td-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.td-seg button { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--line); }
.td-seg button:last-child { border-right: 0; }
.td-seg button.on { background: var(--red); color: #fff; }
.td-seg.wide { flex-wrap: wrap; max-width: 100%; }
.td-seg.wide button { border-bottom: 1px solid var(--line); }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 14px; }
.td-chip.on { background: #fbeed0; border-color: var(--gold); font-weight: 600; }
.td-light { margin: 14px 0 4px; }
.td-light .btn-lg { width: 100%; justify-content: center; padding: 12px; font-size: 17px; }
.td-hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.td-vol { display: flex; align-items: center; gap: 8px; }
.td-vol input[type=range] { flex: 1; min-width: 80px; accent-color: var(--red); }
.td-ico { font-size: 14px; }
.td-tracks { margin: 8px 0 12px; }
.td-track { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.td-vk { white-space: pre-wrap; font-family: "Times New Roman", "Noto Serif", serif; font-size: 16.5px; line-height: 1.7; background: #fffaf0; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin: 12px 0; }
.td-vk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.td-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.td-stats > div { flex: 1 1 110px; background: #fbf3dc; border: 1px solid #e6d9a8; border-radius: 8px; padding: 8px 12px; text-align: center; }
.td-stats b { display: block; font-size: 18px; } .td-stats span { font-size: 12px; color: var(--muted); }
.td-stats b.in, .td-table .in { color: var(--ok); } .td-stats b.out, .td-table .out { color: var(--danger); }
.td-top { font-size: 13.5px; margin-bottom: 10px; }
.td-entry { border-bottom: 1px dashed var(--line); padding: 10px 0; }
.td-eh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.td-etext { margin: 4px 0 6px; white-space: pre-wrap; word-break: break-word; }
.td-table-wrap { overflow-x: auto; }
.td-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.td-table th, .td-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.td-table .num { text-align: right; white-space: nowrap; font-weight: 600; }
.td-table .act { white-space: nowrap; }

/* Bàn thờ ghim cố định khi cuộn trang (phần điều khiển, sổ lưu bút, quản lý nhạc cuộn bên cạnh/bên dưới) */
.td-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.td-side .card { margin-bottom: 0; }
.td-grid > .td-scene { position: sticky; top: calc(var(--bar-h, 48px) + 6px); z-index: 6; }
@media (max-width: 860px) {
  .td-grid { gap: 12px; }
  .td-grid > .td-scene { padding: 6px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
  .td-scene .td-svg { max-height: 31vh; }
  .td-scene .td-status { margin-top: 6px; padding: 5px 8px; font-size: 12.5px; }
}

/* Máy tính: bàn thờ luôn vừa trong chiều cao màn hình để ghim được; cột điều khiển cuộn bên cạnh */
@media (min-width: 861px) {
  .td-scene .td-svg { max-height: max(250px, calc(100vh - 310px)); }
}

/* Văn khấn: thanh chọn bài + nút chức năng ghim ngay dưới thanh tab con khi cuộn */
.td-vkbar { position: sticky; top: var(--bar-h, 48px); z-index: 8; background: var(--paper); margin: 0 -16px 4px; padding: 10px 16px; border-bottom: 1px solid var(--line); box-shadow: 0 4px 8px -6px rgba(60, 30, 10, .35); display: flex; flex-direction: column; gap: 8px; }
.td-vkbar .td-seg.wide { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; align-self: flex-start; }
.td-vkbar .td-seg.wide::-webkit-scrollbar { display: none; }
.td-vkbar .td-seg.wide button { white-space: nowrap; border-bottom: 0; }

/* cảm ứng: chữ vẽ nhanh hơn, không hiệu ứng chạm làm giật khi vuốt cây */
@media (pointer: coarse) { #tree-svg { text-rendering: optimizeSpeed; } .node, .node * { transition: none !important; } }