/* Giao diện website gia phả họ Đỗ – mẫu 2: xanh ngọc, vàng đồng. */
:root {
  --bg: #EEF2EE;
  --surface: #FBFCF9;
  --surface-2: #F4F7F3;
  --ink: #17251F;
  --muted: #55635C;
  --line: #D3DCD5;
  --line-2: #E2E8E3;
  --jade: #1E4D40;
  --jade-dark: #143429;
  --jade-soft: #DCE8E1;
  --gold: #B68A3E;
  --gold-ink: #8A6424;
  --gold-soft: #F1E6CC;
  --gold-soft-ink: #7A5718;
  --on-jade: #F4F1E6;
  --gold-on-jade: #D9B46A;
  --danger: #9A2B22;
  --danger-soft: #F6E1DD;
  --radius: 16px;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-head: 'Playfair Display', Georgia, serif;
  --font-script: 'Dancing Script', cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
a { color: var(--jade); }
a:hover { color: var(--jade-dark); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .container { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spacer { flex: 1; }

/* Đầu trang */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { flex: none; }
.brand-name { display: block; font-family: var(--font-script); font-size: 30px; font-weight: 700; line-height: 1; color: var(--jade); }
.brand-sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-top: 4px; }
.main-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.main-nav a { padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.main-nav a[aria-current="page"] { background: var(--jade-soft); color: var(--jade); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.search-mini { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.search-mini input { width: 170px; height: 40px; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.account-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; min-height: 44px; }

@media (max-width: 899px) {
  .is-member .main-nav { display: none; }
  .main-nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .main-nav a { white-space: nowrap; }
  .search-mini { display: none; }
  .account-name { display: none; }
  .brand-name { font-size: 26px; }
}

/* Thanh menu dưới cùng (điện thoại, đã đăng nhập) */
.bottom-nav { display: none; }
@media (max-width: 899px) {
  .is-member .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); }
  .is-member main { padding-bottom: 88px; }
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; font-size: 12px; color: var(--muted); text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--jade); font-weight: 700; }

main { display: block; padding: 24px 0 48px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { color: var(--jade); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--gold-ink); font-weight: 600; text-decoration: none; }

/* Thẻ, nút, nhãn */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card-tight { padding: 14px 16px; }
.card h2 { font-size: 22px; margin-bottom: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #A9B8AE; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--jade); color: var(--jade); }
.btn-primary { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.btn-primary:hover { background: var(--jade-dark); color: var(--on-jade); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #A9B8AE; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.tag { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-soft-ink); font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: middle; }
.tag-jade { background: var(--jade-soft); color: var(--jade); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.pill { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--jade-soft); font-size: 14px; font-weight: 600; }

/* Thông báo */
.flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--jade-soft); color: var(--jade-dark); font-weight: 500; }
.flash-err { background: var(--danger-soft); color: var(--danger); }
.notice { padding: 12px 16px; border-radius: 12px; background: var(--gold-soft); color: #4E3A12; }

/* Ảnh đại diện */
.av { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: var(--surface); vertical-align: middle; }
.av-empty { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--jade-soft); border: 2px dashed var(--gold); color: var(--muted); vertical-align: middle; }
.av-xl { border-width: 4px; padding: 4px; }

/* Dải tiêu đề */
.hero { background: var(--jade); color: var(--on-jade); }
.hero-inner { padding: 32px 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hero h1 { font-size: 36px; color: var(--on-jade); }
.hero .eyebrow { color: var(--gold-on-jade); }
.hero-quote { margin: 8px 0 0; font-family: var(--font-script); font-size: 26px; color: #E8D9B5; }
.stats { display: flex; border: 1px solid #6E8F7F; border-radius: 14px; overflow: hidden; margin: 0; }
.stats > div { padding: 12px 22px; text-align: center; }
.stats > div + div { border-left: 1px solid #6E8F7F; }
.stats dd { margin: 0; font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--gold-on-jade); }
.stats dt { font-size: 13px; color: #E8D9B5; }
@media (max-width: 600px) { .hero h1 { font-size: 26px; } .stats > div { padding: 10px 14px; } .stats dd { font-size: 24px; } }

/* Bố cục 2 cột */
.layout-2 { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.layout-2 > .main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.layout-2 > .side-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Dòng người trong danh sách */
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--ink); }
.person-row + .person-row { border-top: 1px solid var(--line-2); }
.person-row .pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person-row .pr-name { font-weight: 600; }
.person-row .pr-meta { font-size: 13px; color: var(--muted); }
.person-row.is-self { background: var(--jade-soft); border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.list-plain { list-style: none; margin: 0; padding: 0; }

/* Cây dòng họ – trang tổng quan */
.root-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.couple { display: flex; align-items: center; gap: 12px; }
.unit-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); }
.unit-card:hover { border-color: var(--gold); color: var(--ink); }
.unit-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--jade); }
.trunk { position: relative; margin-left: 28px; padding-left: 22px; border-left: 2px solid var(--gold); }
.trunk > * { position: relative; margin-top: 12px; }
.trunk > *::before { content: ""; position: absolute; left: -22px; top: 28px; width: 22px; height: 2px; background: var(--gold); }
.trunk > *:last-child::after { content: ""; position: absolute; left: -24px; top: 30px; bottom: -2px; width: 4px; background: var(--surface); }
.card .trunk > *:last-child::after { background: var(--surface); }
.av-stack { display: flex; }
.av-stack > * + * { margin-left: -10px; }

/* Sơ đồ cây (máy tính) */
.tree-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.view-switch { display: inline-flex; border: 1px solid #A9B8AE; border-radius: 10px; overflow: hidden; }
.view-switch button { min-height: 44px; padding: 0 14px; border: none; background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.view-switch button[aria-pressed="true"] { background: var(--jade); color: var(--on-jade); }
.tree-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.tree-box { flex: 999 1 560px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.tree-box-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.tree-scroll { overflow-x: auto; }
.tree-canvas { position: relative; }
.tree-seg { position: absolute; background: var(--gold); }
.tree-gen { position: absolute; left: 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.tree-node { position: absolute; width: 132px; height: 160px; }
.tree-card { width: 132px; height: 136px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: inherit; color: var(--ink); text-align: center; }
.tree-card.is-selected { border: 2px solid var(--jade); background: var(--jade-soft); }
.tree-card .tc-name { font-size: 14px; font-weight: 600; line-height: 1.25; max-height: 36px; overflow: hidden; }
.tree-card .tc-years { font-size: 12px; color: var(--muted); }
.tree-card .tc-sp { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--gold-ink); }
.tree-toggle { position: absolute; left: 44px; top: 122px; width: 44px; height: 28px; padding: 0; border-radius: 14px; border: 1px solid var(--gold); background: var(--surface); color: var(--gold-soft-ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tree-panel { flex: 1 1 320px; min-width: 0; }
.tree-panel dl { margin: 0; }
.kv { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.kv dt { width: 112px; flex: none; font-size: 14px; color: var(--muted); }
.kv dd { margin: 0; flex: 1; min-width: 0; font-size: 15px; white-space: pre-line; }
.hide-spouse .sp-line { display: none; }
.hide-ngoai .is-ngoai { display: none !important; }
[data-view="list"] .tree-layout { display: none; }
[data-view="diagram"] .tree-list-wrap { display: none; }

/* Danh sách cây (điện thoại) */
.tree-list, .tree-list ul { list-style: none; margin: 0; padding: 0; }
.tree-list ul { margin-left: 14px; padding-left: 10px; border-left: 1px solid #CBB98F; }
.tree-list li { margin: 0; }
.tree-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.tree-list summary::-webkit-details-marker { display: none; }
.tree-list .tl-caret { width: 30px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-ink); transition: transform .15s; }
.tree-list details[open] > summary .tl-caret { transform: rotate(90deg); }
.tree-list .tl-space { width: 30px; flex: none; }
.tree-list .tl-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.tree-list .tl-text { display: flex; flex-direction: column; min-width: 0; }
.tree-list .tl-name { font-weight: 600; }
.tree-list .tl-meta { font-size: 13px; color: var(--muted); }
.tree-list .sp-line { font-size: 13px; color: var(--gold-ink); }

/* Trang cá nhân */
.profile-hero { text-align: center; padding: 28px 16px 22px; }
.profile-hero h1 { font-size: 30px; color: var(--jade); margin-top: 6px; }
.gio-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--gold-soft); color: #4E3A12; }
.gio-card strong { font-family: var(--font-head); font-size: 20px; display: block; }
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.chain .chain-gen { width: 48px; flex: none; font-size: 12px; color: var(--muted); }
.chain-line { width: 2px; height: 8px; margin-left: 19px; background: var(--gold); }
.video-wrap { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #22312B; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.family-group h3 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin: 16px 0 4px; }

/* Biểu mẫu */
.form { display: flex; flex-direction: column; gap: 14px; }
.form fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.form legend { padding: 0 6px; font-weight: 700; color: var(--jade); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 14px; font-weight: 600; }
.field small { color: var(--muted); font-size: 13px; }
.field input[type=text], .field input[type=tel], .field input[type=password], .field input[type=number], .field input[type=url], .field input[type=search], .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #A9B8AE; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.fields-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 20px; height: 20px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bảng quản trị */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.admin-nav a { padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.admin-nav a[aria-current="page"] { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; text-align: center; }

/* Tin tức */
.news-card { display: flex; flex-direction: column; gap: 8px; }
.news-card h3 a { color: var(--ink); text-decoration: none; }
.article-body p { font-size: 17px; line-height: 1.75; }

/* Chân trang */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 18px; padding-bottom: 18px; }

.login-box { max-width: 420px; margin: 24px auto; }
.staging-bar { background: #8A6424; color: #fff; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .04em; padding: 6px 12px; }
/* Gói 11: dải báo tạm dừng quyền, hạn mức */
.suspend-bar { background: var(--danger-soft); color: var(--danger); padding: 10px 16px; font-size: 15px; line-height: 1.45; border-bottom: 1px solid var(--danger); }
.suspend-bar a { color: var(--danger); font-weight: 700; text-decoration: underline; }
.quota-line { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: #4E3A12; }
.quota-line.is-last { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.quota-box { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--danger); background: var(--danger-soft); display: grid; gap: 10px; }
.quota-box textarea { width: 100%; }
.quota-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quota-list li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-2); padding: 6px 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.empty { padding: 24px; text-align: center; color: var(--muted); }

/* ---------- Gói 2: danh mục, gợi ý, thống kê ---------- */
[hidden] { display: none !important; }
.cat-list { display: flex; flex-direction: column; }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line-2); align-items: center; }
.cat-row .field { margin: 0; }
.cat-row.is-hidden .cat-name input { color: var(--muted); text-decoration: line-through; }
.cat-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cat-meta .btn { margin-left: auto; }
@media (min-width: 720px) {
  .cat-row { grid-template-columns: minmax(0, 1fr) 90px auto; }
  .cat-meta { grid-column: auto; flex-wrap: nowrap; }
}
.suggest-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.suggest-row input { margin-top: 4px; flex: none; }
.cat-free { justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.stat-row:first-child { border-top: 0; }
.stat-name { min-width: 0; font-weight: 600; }
.stat-num { font-family: var(--font-head); font-size: 22px; color: var(--jade); flex: none; }

/* ---------- Gói 4: biểu mẫu nhập người mới ---------- */
.back-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.form-v2 { gap: 18px; }
.form-v2 .v2-group { display: flex; flex-direction: column; gap: 18px; }
.inline-choice { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; padding: 10px 12px 12px !important; }
.inline-choice legend { width: 100%; }
.chip-check { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; background: var(--surface); }
.chip-check:has(input:checked) { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); font-weight: 600; }
.name-preview { margin: -6px 0 0; }
.name-split summary, .admin-only summary, .form-v2 details summary { cursor: pointer; color: var(--jade); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.form-v2 details[open] { display: flex; flex-direction: column; gap: 10px; }
.admin-only { border-left: 3px solid var(--gold); padding-left: 10px; }
.form-sticky { position: sticky; bottom: 0; z-index: 25; display: flex; gap: 10px; margin: 4px -20px -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -6px 16px rgba(0, 0, 0, .06); }
.form-sticky .btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 899px) {
  .is-member:has(.form-sticky) .bottom-nav { display: none; }
}
.form-v2 .date-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.form-v2 .date-row > :last-child { grid-column: 1 / -1; }
.form-v2 .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) {
  .form-v2 .date-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-v2 .date-row > :last-child { grid-column: auto; }
}

/* ---------- Gói 6: cỡ chữ lớn (Cài đặt › Dòng họ và giao diện) ---------- */
body.co-chu-17 { font-size: 17px; }
.co-chu-17 .small, .co-chu-17 .crumbs, .co-chu-17 .btn-small, .co-chu-17 .chip, .co-chu-17 .pill, .co-chu-17 .kv dt, .co-chu-17 .field > span, .co-chu-17 table.data, .co-chu-17 .admin-nav a, .co-chu-17 .account-link { font-size: 15px; }
.co-chu-17 .tiny, .co-chu-17 .person-row .pr-meta, .co-chu-17 .tree-list .tl-meta, .co-chu-17 .tree-list .sp-line, .co-chu-17 .field small, .co-chu-17 .site-footer, .co-chu-17 .stats dt { font-size: 14px; }
.co-chu-17 .btn, .co-chu-17 .main-nav a, .co-chu-17 .kv dd, .co-chu-17 .check { font-size: 16px; }
.co-chu-17 .field input, .co-chu-17 .field select, .co-chu-17 .field textarea { font-size: 17px; }
.co-chu-17 .article-body p { font-size: 18px; }
body.co-chu-18 { font-size: 18px; }
.co-chu-18 .small, .co-chu-18 .crumbs, .co-chu-18 .btn-small, .co-chu-18 .chip, .co-chu-18 .pill, .co-chu-18 .kv dt, .co-chu-18 .field > span, .co-chu-18 table.data, .co-chu-18 .admin-nav a, .co-chu-18 .account-link { font-size: 16px; }
.co-chu-18 .tiny, .co-chu-18 .person-row .pr-meta, .co-chu-18 .tree-list .tl-meta, .co-chu-18 .tree-list .sp-line, .co-chu-18 .field small, .co-chu-18 .site-footer, .co-chu-18 .stats dt { font-size: 15px; }
.co-chu-18 .btn, .co-chu-18 .main-nav a, .co-chu-18 .kv dd, .co-chu-18 .check { font-size: 17px; }
.co-chu-18 .field input, .co-chu-18 .field select, .co-chu-18 .field textarea { font-size: 18px; }
.co-chu-18 .article-body p { font-size: 19px; }

/* ---------- Gói 6: trang Cài đặt ---------- */
.cfg-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cfg-group { margin-bottom: 20px; scroll-margin-top: 12px; }
.cfg-group h2 { margin-bottom: 4px; }
.cfg-item { padding: 12px 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.cfg-item:first-of-type { border-top: 0; }
.cfg-item .cfg-def { font-size: 13px; color: var(--muted); }
.cfg-item.is-changed .cfg-def::after { content: ' · đã đổi'; color: var(--gold-ink); font-weight: 600; }
.cfg-item .check { min-height: 36px; }
.cfg-preview { margin: 8px 0 0; padding-left: 20px; }
.cfg-undo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line-2); }
.cfg-undo:first-of-type { border-top: 0; }
.cfg-undo > div { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Gói 5: hoàn thiện biểu mẫu nhập người ---------- */
.pop { position: static; display: inline-block; }
.profile-hero .row { position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary::after { content: '▾'; margin-left: 6px; font-size: 12px; }
.pop[open] > summary { background: var(--jade-soft); border-color: var(--jade); }
.pop-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); padding: 6px; text-align: left; }
.choice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); cursor: pointer; min-height: 48px; justify-content: center; }
.choice strong { font-size: 16px; color: var(--jade); }
.choice span { font-size: 13px; color: var(--muted); line-height: 1.35; }
a.choice:hover, summary.choice:hover { background: var(--surface-2); }
.choice.is-disabled { cursor: default; opacity: .6; }
.choice.is-disabled strong { color: var(--muted); }
.choice-sub > summary { list-style: none; }
.choice-sub > summary::-webkit-details-marker { display: none; }
.choice-sub > summary strong::after { content: ' ▸'; }
.choice-sub[open] > summary strong::after { content: ' ▾'; }
.choice-sub ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--line-2); margin-left: 12px; }
.choice-sub ul a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; font-weight: 600; }
.form-info { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--jade-soft); color: var(--jade); font-size: 15px; font-weight: 600; }
.field-err { color: var(--danger); font-size: 13px; margin-top: -6px; }
.photo-pick { display: flex; align-items: center; gap: 14px; }
.photo-preview { flex: none; display: inline-flex; }
.photo-preview .av, .photo-preview .av-empty { width: 88px !important; height: 88px !important; }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.photo-choose { position: relative; overflow: hidden; }
.photo-choose input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.photo-remove { min-height: 32px; font-size: 14px; }
.photo-actions small { font-size: 13px; }
.leap-ask .chip-check { background: #fff; }
.adopt-card { border-color: var(--gold); }

/* Gói 5 (bản 1.6): mục "Thông tin thêm" thu gọn */
.more-info { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.form-v2 .more-info > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 44px 12px 16px; position: relative; min-height: 48px; justify-content: center; }
.more-info > summary::-webkit-details-marker { display: none; }
.more-info > summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--jade); font-weight: 700; }
.more-info[open] > summary::after { content: '−'; }
.more-info .more-title { font-weight: 700; color: var(--jade); }
.more-info .more-sub { font-size: 13px; color: var(--muted); }
.form-v2 .more-info[open] { gap: 0; }
.more-info .more-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }

/* ---------- Gói 7: album ảnh, kho ảnh ---------- */
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.album-item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); min-width: 0; }
.album-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.album-cap { font-size: 13px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.album-add { margin-top: 14px; }
.album-add > summary { list-style: none; display: inline-flex; }
.album-add > summary::-webkit-details-marker { display: none; }
.album-add[open] > summary { display: none; }
.album-upload { margin-top: 4px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-2); }
.album-pick { display: flex; align-items: center; gap: 14px; }
.album-preview { width: 88px; height: 88px; flex: none; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.album-preview img { width: 100%; height: 100%; object-fit: cover; }
.album-pick-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.album-view { margin: 0 0 8px; background: #111; border-radius: 16px; overflow: hidden; }
.album-view img { display: block; width: 100%; max-height: 78vh; object-fit: contain; margin: 0 auto; }
.album-view figcaption { background: var(--surface); padding: 12px 16px; font-size: 17px; line-height: 1.5; }
.album-nav { margin-top: 8px; }
.meter { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-top: 12px; }
.meter > span { display: block; height: 100%; background: var(--jade); }
.storage-card.is-warn .meter > span { background: var(--gold); }
.storage-card.is-stop { border-color: var(--danger); }
.storage-card.is-stop .meter > span { background: var(--danger); }
.more-info[open] .more-hint { display: none; }

/* ---------- Gói 8: nhật ký, hoạt động, lịch sử thay đổi, hoàn tác ---------- */
.log-list { display: flex; flex-direction: column; gap: 10px; }
.log-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.log-item.is-unseen { border-left: 4px solid var(--gold); }
.log-item.is-undone .log-lines { color: var(--muted); }
.log-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.log-what { margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.log-block { margin-top: 6px; min-width: 0; }
.log-block-title { font-size: 14px; font-weight: 600; color: var(--jade); overflow-wrap: anywhere; }
.log-lines { margin: 2px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.log-lines li + li { margin-top: 2px; }
.log-plain { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.log-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.log-actions form { margin: 0; }
.log-filter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.field input[type=date] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #A9B8AE; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.pager { justify-content: center; margin-top: 16px; }
.history-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.history-card > summary::-webkit-details-marker { display: none; }
.history-card > summary::after { content: '+'; font-size: 26px; line-height: 1; color: var(--jade); font-weight: 700; flex: none; }
.history-card[open] > summary { margin-bottom: 8px; }
.history-card[open] > summary::after { content: '−'; }
.h2-like { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.history-card .log-list { gap: 0; }
.history-card .log-item { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 10px 0; background: transparent; }
.history-card .log-item.is-unseen { border-left: 0; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.act-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 8px; text-align: center; }
.act-nums > div { background: var(--surface-2); border-radius: 10px; padding: 6px 2px; }
.act-nums b { display: block; font-family: var(--font-head); font-size: 22px; line-height: 1.2; color: var(--jade); }
.act-nums span { display: block; font-size: 12px; line-height: 1.25; color: var(--muted); }

/* ---------- Gói 8B: Bảng tổng quan ---------- */
.dash-period { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.dash-chips { gap: 8px; }
.dash-custom > summary { cursor: pointer; color: var(--jade); font-weight: 600; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; }
.dash-custom[open] { display: flex; flex-direction: column; gap: 10px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-wide { grid-column: span 2; } }
.dash-card { min-width: 0; }
.dash-card h2 { margin-bottom: 10px; }
.dash-sub { font-size: 16px; margin: 16px 0 8px; color: var(--ink); }
.dash-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dash-hero b { font-family: var(--font-head); font-size: 40px; line-height: 1; color: var(--jade); }
.dash-hero span { color: var(--muted); }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.dash-stats > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.dash-stats dt { font-size: 12px; color: var(--muted); }
.dash-stats dd { margin: 0; font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.dash-links { list-style: none; margin: 0; padding: 0; }
.dash-links li + li { border-top: 1px solid var(--line-2); }
.dash-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; text-decoration: none; color: var(--ink); }
.dash-links a:hover span { color: var(--jade); text-decoration: underline; }
.dash-links b { font-family: var(--font-head); font-size: 22px; color: var(--jade); }
.dash-tabs { gap: 8px; margin-bottom: 10px; }
.bar-list { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 14px; }
.bar-label { color: var(--muted); }
.bar-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { display: block; height: 12px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--jade); border-radius: 0 4px 4px 0; }
.top-list { list-style: none; margin: 0; padding: 0; }
.top-list li + li { border-top: 1px solid var(--line-2); }
.top-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--ink); }
.top-row:hover .top-name { color: var(--jade); text-decoration: underline; }
.top-rank { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--gold-ink); text-align: center; }
.top-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.top-name { font-weight: 600; overflow-wrap: anywhere; }
.top-num { text-align: right; line-height: 1.1; }
.top-num b { display: block; font-family: var(--font-head); font-size: 22px; color: var(--jade); font-variant-numeric: tabular-nums; }
.top-num span { font-size: 12px; color: var(--muted); }
.watch-list { list-style: none; margin: 0; padding: 0; }
.watch-item { padding: 10px 0; min-width: 0; }
.watch-item + .watch-item { border-top: 1px solid var(--line-2); }
.watch-item.is-unseen { box-shadow: inset 4px 0 0 var(--gold); padding-left: 12px; }
.watch-who { margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }

/* Gói 9B: cài như app, lịch giỗ riêng */
.app-back { display: none; }
.is-app .app-back:not([hidden]) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--jade); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.app-invite { border-color: var(--gold); background: var(--gold-soft); }
.app-invite h2 { margin-bottom: 6px; }
.gio-rel { font-weight: 600; color: var(--jade); }
.link-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-box input { flex: 1 1 240px; min-width: 0; font-size: 14px; }
.steps { margin: 8px 0 0; padding-left: 22px; }
.steps li { margin: 6px 0; }
details.guide { border-top: 1px solid var(--line-2); padding: 10px 0; }
details.guide > summary { cursor: pointer; font-weight: 600; min-height: 32px; }

/* ---------- Gói 9C: Trang của tôi, xem ảnh lớn, thẻ sơ đồ có nơi ở ---------- */
.av-zoom { display: inline-flex; padding: 0; margin: 0; border: none; background: none; border-radius: 50%; cursor: zoom-in; font: inherit; }
.av-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.zoom-box { position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 11, .94); display: flex; align-items: center; justify-content: center; padding: 56px 8px calc(16px + env(safe-area-inset-bottom)); }
.zoom-box[hidden] { display: none; }
.zoom-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.zoom-close { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .45); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
html.zoom-open, html.zoom-open body { overflow: hidden; }
.tree-noi .tree-node { height: 200px; }
.tree-noi .tree-card { height: 176px; }
.tree-noi .tree-toggle { top: 162px; }
.tree-card .tc-noi { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--jade); }
.tree-card .tc-noi::before { content: "⌂ "; }
@media (max-width: 899px) {
  .is-member .bottom-nav.nav-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bottom-nav.nav-6 a { font-size: 11px; }
}
.my-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-bottom: 16px; }
.my-head h1 { font-size: 26px; color: var(--jade); }
.my-head .my-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.my-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.my-actions .btn { min-height: 56px; font-size: 16px; text-align: center; line-height: 1.25; padding: 6px 10px; }
@media (min-width: 720px) { .my-actions { width: auto; grid-template-columns: repeat(2, auto); } .my-actions .btn { padding: 6px 22px; } }
.my-section { margin-bottom: 16px; }
.my-section > h2 { margin-bottom: 4px; }
.my-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.my-tree .tree-tools { display: none; }
.bd-age { color: var(--gold-ink); font-weight: 600; }
.guide-steps { margin: 0; padding-left: 22px; line-height: 1.6; }
.guide-steps li + li { margin-top: 8px; }

/* Gói 12B (bản 1.14.1): biểu mẫu thêm người – quê quán, nơi ở "Theo cha / Khác"; album trong "Thông tin thêm" */
.form fieldset.place-choice { border-style: dashed; padding: 10px 12px 12px; gap: 10px; }
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check:has(input:disabled) { opacity: .5; cursor: default; }
.place-theo { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.place-khac { display: flex; flex-direction: column; gap: 12px; }
.album-multi { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-2); }
.album-multi-title { font-size: 14px; font-weight: 600; }
.album-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.album-tiles:empty { display: none; }
@media (min-width: 720px) { .album-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.album-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.album-tile input[type=text] { width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid #A9B8AE; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.album-multi-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Gói 13 (bản 1.15): lọc hồ sơ thiếu thông tin, điểm đầy đủ, bộ lọc đã lưu */
.loc-them { flex: 1 1 100%; }
.loc-them > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 44px 10px 14px; position: relative; min-height: 48px; justify-content: center; }
.loc-them .more-body { padding-top: 4px; }
.loc-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: -6px 0 12px; }
.save-filter { flex: 0 1 auto; }
.save-filter[open] { flex-basis: 100%; }
.save-filter > summary { list-style: none; }
.save-filter > summary::-webkit-details-marker { display: none; }
.save-filter[open] > summary { background: var(--jade-soft); border-color: var(--jade); }
.save-filter-form { margin-top: 8px; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); }
.saved-filters .saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 0; }
.saved-filters .saved-row + .saved-row { border-top: 1px solid var(--line); }
.saved-filters .chip { justify-self: start; min-height: 40px; max-width: 100%; padding: 6px 14px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.saved-filters .chip[aria-current="true"] { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.score { display: inline-block; min-width: 44px; padding: 0 6px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; white-space: nowrap; }
.score.score-low { background: var(--danger-soft); color: var(--danger); }
.score.score-mid { background: var(--gold-soft); color: var(--gold-soft-ink); }
.score.score-ok { background: var(--jade-soft); color: var(--jade); }
.score-card .score-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.score-card h2 { margin: 0; }
.score-bar { height: 10px; margin-top: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.score-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--jade); }
.score-bar > span.score-low { background: var(--danger); }
.score-bar > span.score-mid { background: var(--gold); }

/* ---------- Gói Giao diện (bản 1.17) ---------- */
/* Luôn có (kể cả khi tắt công tắc): nút đang gửi khóa lại có vòng quay, khung chờ khi bấm link/nút (1.21). */
.busy-spin { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gd-spin .8s linear infinite; vertical-align: -3px; }
@keyframes gd-spin { to { transform: rotate(360deg); } }
.btn.is-busy, button.is-busy, input.is-busy { opacity: .85 !important; cursor: progress; }
/* Bản 1.21: khung chờ giữa màn hình (hiện ngay khi bấm link/nút; nền mờ chặn bấm lần hai). */
.cho-phu { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 37, 31, .28); }
.cho-hop { display: flex; align-items: center; gap: 14px; min-width: 250px; max-width: 340px; padding: 18px 22px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .22); font-family: var(--font-body); }
.cho-hop .busy-spin { width: 28px; height: 28px; border-width: 3px; color: var(--jade); }
.cho-tieu-de { font-size: 17px; font-weight: 700; line-height: 1.3; }
.cho-phu-de { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.is-tapped { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 3s; } }

/* Thành phần dùng chung (chỉ trang giao diện mới dùng các lớp này). */
.btn-text { border-color: transparent !important; background: none !important; color: var(--jade); padding: 0 8px; }
.btn-text:hover { color: var(--jade-dark); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px !important; font-size: 17px !important; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #7E2018; border-color: #7E2018; color: #fff; }
.row-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line-2); }
.row-link:first-child { border-top: 0; }
.row-link:hover { color: var(--ink); }
.row-link:hover .rl-title { color: var(--jade); }
.row-link .rl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-link .rl-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.row-link .rl-sub { font-size: 13px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.row-link .rl-num { flex: none; font-weight: 700; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.row-link > .rl-chev { flex: none; color: var(--muted); }
.count-red { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 2px 0 10px; }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--jade-soft); color: var(--jade-dark); font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.tip > svg { flex: none; margin-top: 2px; }
.tip-x { margin-left: auto; flex: none; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--jade); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.help-q { display: inline-block; vertical-align: middle; }
.help-q > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #A9B8AE; color: var(--jade); font-size: 14px; font-weight: 700; cursor: pointer; position: relative; }
.help-q > summary::after { content: ""; position: absolute; inset: -9px; }
.help-q > summary::-webkit-details-marker { display: none; }
.help-q[open] > summary { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.help-q > .help-body { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 400; color: var(--ink); line-height: 1.45; }
.bar-mini { display: block; height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar-mini > span { display: block; height: 100%; border-radius: 999px; background: var(--jade); }
.bar-mini > span.is-mid { background: var(--gold); }
.bar-mini > span.is-low { background: var(--danger); }

/* Công tắc "giao_dien_moi" bật: thân trang có lớp .gd */
.gd { --font-head: var(--font-body); }
.gd h1, .gd h2, .gd h3 { font-weight: 700; letter-spacing: -.01em; }
.gd h1 { font-size: 26px; }
.gd h2 { font-size: 20px; }
.gd h3 { font-size: 17px; }
.gd .card h2 { font-size: 19px; }
.gd .hero h1 { font-size: 30px; }
.gd .h2-like { font-size: 19px; }
.gd a { text-decoration: none; }
.gd .suspend-bar a { text-decoration: none; }
/* Link trong chữ: đậm, không gạch chân. :where() để không đè màu/khoảng cách của menu, thẻ, dòng bấm được. */
:where(.gd main a:not([class])) { font-weight: 600; }
/* Link đứng riêng một dòng: vùng bấm 44px như nút chữ. */
.gd main p > a:not([class]):only-child { display: inline-flex; align-items: center; min-height: 44px; }
.gd p.muted, .gd .page-head p { font-size: 14px; line-height: 1.45; }
.gd .btn { min-height: 44px; border-radius: 12px; padding: 0 18px; }
.gd .btn-small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.gd .btn-danger { background: var(--surface); }
.gd .btn-text { padding: 0 8px; }
.gd .chip { min-height: 44px; }
.gd :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gd main :is(input[type=text], input[type=tel], input[type=search], input[type=number], input[type=password], input[type=date], input[type=url], input[type=email], input:not([type])), .gd main select, .gd main textarea { min-height: 44px; padding: 8px 12px; border: 1px solid #A9B8AE; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); max-width: 100%; }
.gd main textarea { min-height: 96px; }
.gd .site-header { padding-top: env(safe-area-inset-top); }
@media (max-width: 899px) {
  .gd .header-row { padding-top: 6px; padding-bottom: 6px; }
  .gd .brand svg { width: 38px; height: 38px; }
  .gd .brand-name { font-size: 24px; }
  .gd .brand-sub { font-size: 10px; margin-top: 2px; }
  .gd main { padding-top: 14px; }
}
.gd .flash.toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--jade); color: var(--on-jade); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); animation: gd-up .2s ease-out; }
.gd .flash.toast.flash-err { background: var(--danger); color: #fff; }
.gd .flash.toast .toast-x { margin-left: auto; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
@keyframes gd-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 899px) { .gd.is-member .flash.toast { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* Gói Giao diện – trang đầu sau khi đăng nhập ("/", công tắc bật) */
.gd .card { padding: 16px; }
.gd .card h2 { margin-bottom: 8px; }
.k-home { display: flex; flex-direction: column; gap: 14px; }
.k-hello { display: flex; align-items: center; gap: 12px; }
.k-hello h1 { font-size: 20px; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.k-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.k-search { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid #A9B8AE; border-radius: 12px; background: #fff; color: var(--muted); }
.gd main .k-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; padding: 0; background: none; outline: none; }
.k-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.gd .k-head h2 { margin: 0; }
.k-head .btn-text, .card > .btn-text { min-height: 44px; padding: 0 4px; }
.card > .btn-text { margin-top: 2px; }
.f3 { --g: 6px; --w: calc((100% - 3 * var(--g)) / 4); margin-top: 6px; }
.f3-tier { display: grid; grid-auto-flow: column; grid-auto-columns: var(--w); gap: var(--g); justify-content: center; }
.f3-tier.f3-parents { grid-auto-columns: minmax(0, 40%); }
.f3-tier.is-scroll { justify-content: start; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.f3-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 96px; padding: 8px 3px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-align: center; text-decoration: none; }
.f3-node:hover { border-color: var(--gold); color: var(--ink); }
.f3-node b { font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.f3-node small { font-size: 12px; color: var(--muted); line-height: 1.2; }
.f3-node.is-me { border: 2px solid var(--jade); background: var(--jade-soft); }
.f3-node.is-me small { color: var(--jade); font-weight: 700; }
.f3-bus { position: relative; height: 22px; }
.f3-bus i { position: absolute; top: 0; width: 0; height: 11px; border-left: 2px solid var(--gold); transform: translateX(-1px); }
.f3-bus s { position: absolute; top: 10px; height: 0; border-top: 2px solid var(--gold); }
.f3-has-top > .f3-node::before { content: ""; position: absolute; left: 50%; top: -13px; height: 12px; border-left: 2px solid var(--gold); transform: translateX(-1px); }
.f3-tier.is-scroll.f3-has-top { padding-top: 0; }
.f3-cap { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.f3-empty { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 auto; max-width: 300px; padding: 8px 12px; border: 1px dashed #A9B8AE; border-radius: 12px; color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; }
.f3-empty b { color: var(--jade); }
.f3-back { display: inline-flex; }
.k-all { margin: -2px 0 0; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 2px; }
.bottom-nav .nav-badge { position: absolute; top: 3px; left: calc(50% + 5px); margin: 0; }
@media (max-width: 899px) {
  .gd.is-member .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gd .bottom-nav a { position: relative; min-height: 54px; font-size: 12px; white-space: nowrap; }
  .gd.is-member main { padding-bottom: 92px; }
}
.k-app { display: flex; align-items: center; gap: 4px; }
.k-app .row-link { flex: 1; min-width: 0; }
.f3-empty { position: relative; }
.f3-empty::before { content: ""; position: absolute; left: 50%; top: -13px; height: 12px; border-left: 2px dashed var(--gold); }
.gd .page-head { margin-bottom: 14px; }
.k-search .btn { flex: none; }
/* Vùng bấm ≥ 44px cho các nút nhỏ cũ (không đổi chỗ, chỉ nới vùng chạm) */
.gd .tree-toggle::after { content: ""; position: absolute; inset: -8px -4px; }
.gd details.guide > summary, .gd .dash-custom > summary, .gd .name-split summary, .gd .admin-only summary, .gd .form-v2 details summary, .gd .album-add > summary { min-height: 44px; }
.gd .admin-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.gd .back-link { min-height: 44px; }
.gd .crumbs a { padding: 10px 0; }
.gd .field small, .gd .cfg-item .cfg-def, .gd .more-info .more-sub { font-size: 13px; color: var(--muted); }
.gd .field > span { font-size: 14px; }
.gd .choice-list { gap: 8px; }
.gd .card > .choice-list .choice, .gd .pop-panel .choice { position: relative; min-height: 56px; padding: 10px 40px 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.gd .pop-panel .choice-list { gap: 6px; }
.gd a.choice::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.gd .choice strong { font-size: 16px; }
.gd .choice span { font-size: 13px; }
.gd .profile-hero { padding: 20px 16px 18px; }
.gd .profile-hero :is(.av, .av-empty) { width: 96px !important; height: 96px !important; }
.gd .profile-hero h1 { font-size: 24px; }

/* Gói Giao diện – Đợt 3: khối "Thêm người" của Biên tập */
.k-add { border-color: var(--jade); }
.k-search-sm { min-height: 44px; margin: 0 0 4px; }
.pick { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.pick:first-child { border-top: 0; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.pick-text b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pick-text small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.gd .pick-add { flex: none; min-height: 44px; padding: 0 14px; }
.pick-all { border-top: 1px solid var(--line-2); }
.k-quota { text-align: center; margin: -4px 0 0; }
.k-quota .help-q { margin-left: 4px; text-align: left; }
.k-pct { font-weight: 700; font-size: 17px; color: var(--jade); font-variant-numeric: tabular-nums; }
#tien-do .bar-mini { margin: 6px 0 4px; }
.rl-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--jade-soft); color: var(--jade); }

/* Gói Giao diện – Đợt 4: Dashboard Quản trị */
.k-urgent { border: 2px solid var(--danger); }
.k-urgent h2 { color: var(--danger); }
.k-urgent .row-link .count-red { margin-right: 2px; }
.k-urgent.is-ok { border: 1px solid var(--line); }
.ok-line { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--jade); font-weight: 600; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 6px 0 4px; }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.seg a[aria-current="true"] { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.ed-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.ed-list .ed-row:first-child { border-top: 0; }
.ed-text { display: flex; flex-direction: column; min-width: 0; }
.ed-text b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ed-text small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ed-warn { color: var(--danger); font-weight: 600; }
.ed-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ed-nums b { color: var(--ink); font-size: 14px; }
.ed-nums .is-del b { color: var(--danger); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.spark i { display: block; width: 6px; background: var(--jade); border-radius: 2px; }
.spark i.z { background: var(--line); }
.spark.is-30 { gap: 1px; }
.spark.is-30 i { width: 2px; border-radius: 1px; }
.k-bar { flex: none; width: 84px; }
.grp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grp a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.grp .dot { position: absolute; top: 8px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.gd-abar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gd h1 + .btn-text, .k-head > h1 { margin: 0; }
.gd .k-head h1 { color: var(--jade); }
/* Gói Giao diện – trang Quản trị gọn: nhóm thu gọn, danh sách dạng thẻ */
.cfg-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; }
.cfg-fold > summary::-webkit-details-marker { display: none; }
.cfg-fold > summary::after { content: "+"; margin-left: auto; flex: none; font-size: 24px; line-height: 1; font-weight: 700; color: var(--jade); }
.cfg-fold[open] > summary::after { content: "−"; }
.cfg-fold[open] > summary { margin-bottom: 8px; }
.cfg-fold > summary .rl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cfg-fold > summary .rl-title { font-weight: 700; font-size: 17px; }
.cfg-fold > summary .rl-sub { font-size: 13px; color: var(--muted); }
.gd .cfg-group { margin-bottom: 10px; }
.sw-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; color: var(--jade); font-size: 14px; font-weight: 600; }
.p-list .pick .score { flex: none; }
.gd-filter { display: flex; flex-direction: column; gap: 8px; }
.gd-filter .more-info { border-style: dashed; }
.gd-filter .more-body .row { align-items: flex-end; }
.k-quota { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.k-quota .help-q[open] { flex-basis: 100%; }
.gd .hint .help-q { margin-left: 2px; }
.gd-filter .more-info > summary { list-style: none; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 48px; padding: 10px 44px 10px 14px; }
.gd-filter .more-info > summary::-webkit-details-marker { display: none; }
.gd-filter .more-info .more-title { font-weight: 700; color: var(--jade); }
.gd-filter .more-info .more-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
@media (min-width: 900px) { .k-home { max-width: 760px; margin: 0 auto; } }
.sw-more > summary, .tip-x { min-height: 44px; }
.pick-text { min-height: 44px; justify-content: center; }
.gd .chain li a { display: inline-block; padding: 6px 0; }

/* Gói Giao diện 1.18: khung Lịch trên trang chủ (thành viên) */
.lich .lich-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lich .lich-nav strong { font-size: 17px; }
.lich .lich-nav .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.lich .lich-chon { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.lich .lich-chon .field { flex: 1 1 120px; margin: 0; }
.lich .lich-thu, .lich .lich-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lich .lich-thu span { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.lich .lich-d { position: relative; min-height: 50px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; }
.lich .lich-d b { font-size: 15px; line-height: 1.1; }
.lich .lich-d small { font-size: 10.5px; color: var(--muted); line-height: 1.1; }
.lich .lich-d.is-out { border-color: transparent; background: transparent; }
.lich .lich-d.is-today { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
.lich .lich-d.has-ev { background: var(--gold-soft); }
.lich .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 1px; }
.lich .lich-d .dot { position: absolute; }
.lich .lich-d .dot-gio { bottom: 4px; left: calc(50% - 7px); background: var(--danger); }
.lich .lich-d .dot-sn { bottom: 4px; left: calc(50% + 1px); background: var(--jade); }
.lich .lich-chu { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.lich .lich-chu .dot { margin: 0 4px 0 6px; }
.lich .lich-ngay { margin-top: 14px; }
.lich .lich-ng { scroll-margin-top: 80px; padding-top: 6px; }
.lich .lich-ng h3 { font-size: 15px; margin: 10px 0 4px; }
.lich .lich-ng .muted { font-weight: 400; font-size: 13px; }
/* Bản 1.20 (Gói Trang chủ): khung Lịch kiểu mới (.lich-moi) – Tháng · Năm · Xem một dòng, chú thích có chấm màu,
   bấm ngày có chấm mới hiện người của ngày đó (app.js thêm .is-open; không có JS thì :target), Giỗ sắp tới cuối khung. */
.k-lich-khach { margin-bottom: 24px; }
.lich-moi .lich-chon { flex-wrap: nowrap; }
.lich-moi .lich-chon .f-thang { flex: 1.35 1 0; min-width: 0; }
.lich-moi .lich-chon .f-nam { flex: 1 1 0; min-width: 0; }
.lich-moi .lich-chon .field select { width: 100%; min-width: 0; height: 46px; min-height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.lich-moi .lich-chon .btn { flex: 0 0 auto; height: 46px; min-height: 46px; box-sizing: border-box; }
.lich-moi .dot-gio { background: var(--danger); }
.lich-moi .dot-sn { background: var(--jade); }
.lich-moi .lich-chu .dot { margin: 0 3px 0 4px; }
.lich-moi .lich-chu .nw { white-space: nowrap; }
.lich-moi a.lich-d.is-sel { border-color: var(--jade); background: var(--jade-soft); }
.lich-moi .lich-ngay { margin-top: 10px; }
.lich-moi .lich-ng { display: none; border: 1px solid var(--jade); border-radius: 12px; padding: 4px 12px 6px; background: var(--jade-soft); scroll-margin-top: 80px; }
.lich-moi .lich-ng:target, .lich-moi .lich-ng.is-open { display: block; }
.lich-moi.js-lich .lich-ng:target:not(.is-open) { display: none; }
.lich-moi .lich-ngay:has(.lich-ng:target) .lich-sap, .lich-moi .lich-ngay:has(.lich-ng.is-open) .lich-sap { display: none; }
.lich-moi.js-lich .lich-ngay:not(:has(.lich-ng.is-open)) .lich-sap { display: block; }
.lich-moi .lich-ng-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lich-moi .lich-ng-h h3 { margin: 8px 0 4px; }
.lich-moi .lich-ng-h .btn { min-height: 44px; min-width: 44px; padding: 0 8px; }
.lich-moi .lich-ng .row-link { border-top-color: rgba(0, 0, 0, .08); }
.lich-moi .lich-sub { font-size: 17px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.lich-moi .lich-sap .btn-block { margin-top: 8px; }
.k-news > .btn-block { margin-top: 8px; }
.k-news .rl-sub .tag { margin-right: 2px; font-size: 11px; line-height: 18px; }
.k-req { padding-top: 4px; padding-bottom: 4px; }
.gd .k-hello-moi { align-items: flex-start; }
.gd .k-hello-moi .ct-tag { vertical-align: 2px; }
.gd .k-hello-moi .k-chain { margin: 4px 0 0; padding-top: 0; border-top: 0; font-size: 14px; line-height: 1.55; }

/* Gói Giao diện 1.18: nút Lên đầu trang (góc phải dưới, trên menu dưới) */
.to-top { position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 40; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--jade); color: var(--on-jade); font: inherit; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }
.to-top[hidden] { display: none; }
@media (min-width: 760px) { .to-top { bottom: 22px; } }

/* Bản 1.19: trang Của tôi gộp (Của tôi + Tài khoản). Nút một cỡ: cao 44px, chữ 15px, một dòng; chia 2/3 rộng bằng nhau. */
.gd .ct-btns { display: grid; gap: 8px; margin: 0 0 12px; }
.gd .ct-c1 { grid-template-columns: minmax(0, 1fr); }
.gd .ct-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd .ct-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd .ct-span2 { grid-column: 1 / -1; }
.gd .ct-btns form { margin: 0; min-width: 0; }
.gd .ct-btns .btn, .gd .ct-fam .btn { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 8px; font-size: 15px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd .ct-btns .btn .badge { margin-left: 6px; line-height: 20px; }
.gd .ct-after { margin: 10px 0 0; }
@media (max-width: 380px) { .gd .ct-btns .btn, .gd .ct-fam .btn { font-size: 14px; padding: 0 4px; } }
.gd .ct-head { margin-bottom: 12px; padding: 14px 16px; }
.gd .ct-id { display: flex; gap: 12px; align-items: center; }
.gd .ct-id h1 { margin: 0; font-size: 23px; line-height: 1.25; color: var(--jade); }
.gd .ct-tag { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font: 600 13px/1.4 var(--font-body); vertical-align: 3px; white-space: nowrap; }
.gd .ct-tag.doi { background: var(--jade-soft); color: var(--jade); }
.gd .ct-tag.dr { background: var(--gold-soft); color: var(--gold-soft-ink); }
.gd .ct-chain { display: flex; flex-wrap: wrap; row-gap: 2px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; line-height: 1.6; }
.gd .ct-chain .u { white-space: nowrap; }
.gd .ct-chain .u + .u::before { content: "‹"; padding: 0 7px; color: var(--gold); }
.gd .ct-chain .g { opacity: .85; }
.gd .ct-pchain { justify-content: center; margin-top: 6px; padding-top: 0; border-top: 0; }
.gd .ct-sheet { margin: 0 0 12px; padding: 12px; border: 2px solid var(--jade); border-radius: 16px; background: var(--surface); }
.gd .ct-sheet[hidden] { display: none; }
.gd .ct-sheet h3 { margin: 0 0 10px; font-size: 17px; color: var(--jade); }
.gd .ct-sheet .ct-btns { margin: 0; }
.gd .ct-sheet .btn { justify-content: flex-start; padding: 0 14px; }
.gd .ct-sheet small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.gd .ct-tree h2 { margin-bottom: 10px; }
.gd .ct-qhead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.gd .ct-qhead h2 { font-size: 21px; color: var(--jade); }
.gd .ct-qname { margin: 8px 0 0; font-size: 22px; color: var(--jade); }
.gd .ct-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 10px; margin: 12px 0 14px; font-size: 15px; align-items: baseline; }
.gd .ct-kv dt { color: var(--muted); }
.gd .ct-kv dd { margin: 0; min-width: 0; }
.gd .ct-fam { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.gd .ct-other h2 { margin-bottom: 10px; font-size: 20px; }
.gd .ct-other .ct-btns { margin: 0; }
.gd .ct-qname + .pill, .gd .ct-pchain + .pill { margin-top: 8px; }
.gd .profile-hero .ct-pchain { margin-top: 8px; }

/* ===================================================================================================================
   KIỂU THẺ SƠ ĐỒ (bản 1.22) – MỘT NƠI DUY NHẤT cho mọi sơ đồ trên website (Gia phả, Của tôi, Sơ đồ từ người này).
   Muốn đổi kiểu sơ đồ: chỉ sửa các biến --sd-* ngay dưới đây (app.js đọc kích thước thẻ, khoảng cách từ chính các biến này).
   Công tắc "xem_nhanh_so_do" tắt: sơ đồ không có class .sd2 nên giữ kiểu cũ.
   =================================================================================================================== */
.sd2 {
  --sd-w: 144px;          /* bề rộng thẻ (cố định, mọi thẻ bằng nhau) */
  --sd-h: 180px;          /* chiều cao thẻ (cố định) */
  --sd-gx: 16px;          /* khoảng cách ngang giữa hai thẻ */
  --sd-gy: 44px;          /* khoảng cách dọc giữa hai đời */
  --sd-photo: 52px;       /* đường kính ảnh */
  --sd-ring: var(--gold); /* viền ảnh, nút +N/− */
  --sd-ring-ink: var(--gold-ink);
  --sd-name-lines: 2;     /* tên: tối đa bấy nhiêu dòng (4 chữ vừa 2 dòng; 5 chữ trở lên có thể bị cắt) */
  --sd-sp-lines: 2;       /* vợ/chồng: tối đa bấy nhiêu dòng (2 vợ sẽ bị cắt) */
  --sd-name-size: 14.5px;
  --sd-small-size: 12.5px;
}
.sd2 .tree-node { width: var(--sd-w); height: calc(var(--sd-h) + 14px); }
.sd2 .tree-card { width: var(--sd-w); height: var(--sd-h); padding: 10px 8px 0; border-radius: 16px; gap: 0; justify-content: flex-start; overflow: hidden; }
.sd2 .tree-card.is-selected { border: 2px solid var(--sd-ring); background: #FDF8EA; }
.sd2 .tree-card .av, .sd2 .tree-card .av-empty { flex: none; border: 2.5px solid var(--sd-ring); box-shadow: inset 0 0 0 2px #fff; box-sizing: border-box; }
.sd2 .tree-card .tc-name { margin-top: 6px; width: 100%; font-size: var(--sd-name-size); line-height: 18px; height: calc(18px * var(--sd-name-lines)); max-height: none; display: -webkit-box; -webkit-line-clamp: var(--sd-name-lines); -webkit-box-orient: vertical; overflow: hidden; }
.sd2 .tree-card .tc-years { margin-top: 2px; font-size: var(--sd-small-size); line-height: 16px; white-space: nowrap; }
.sd2 .tree-card .tc-sp { margin-top: 6px; width: 100%; max-width: none; font-size: var(--sd-small-size); line-height: 16px; height: calc(16px * var(--sd-sp-lines)); white-space: normal; display: -webkit-box; -webkit-line-clamp: var(--sd-sp-lines); -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; color: var(--sd-ring-ink); }
.sd2 .tree-card .tc-noi { display: none; }
.sd2 .tree-toggle { left: calc(50% - 24px); top: calc(var(--sd-h) - 14px); width: 48px; height: 28px; border: 1.5px solid var(--sd-ring); color: var(--sd-ring-ink); font-weight: 800; font-size: 14px; }

/* Bảng xem nhanh (cùng khối): 4 ô thông tin, các thành viên là nút giống nhau có ảnh, 3 nút. */
.sd2 .tree-panel.is-loading { opacity: .6; }
.sd2 .xn-head { text-align: center; }
.sd2 .xn-head .ct-qname { margin: 8px 0 0; font-size: 22px; color: var(--jade); }
.sd2 .xn-head .pill { margin-top: 10px; }
.sd2 .xn-q { margin: 14px 0 0; }
.sd2 .xn-h { margin: 18px 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sd2 .xn-mem { display: grid; gap: 8px; }
.sd2 .xn-m { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sd2 .xn-m::after { content: "›"; margin-left: auto; color: var(--gold); font-size: 24px; }
.sd2 .xn-a { flex: none; width: 46px; height: 46px; }
.sd2 .xn-a .av, .sd2 .xn-a .av-empty { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-sizing: border-box; border: 2px solid var(--sd-ring); display: inline-flex; align-items: center; justify-content: center; }
.sd2 .xn-t { display: flex; flex-direction: column; min-width: 0; }
.sd2 .xn-t b { font-size: 15.5px; line-height: 1.25; }
.sd2 .xn-t span { font-size: 13px; color: var(--muted); }
.sd2 .xn-btns { display: grid; gap: 8px; margin-top: 16px; }

/* Số điện thoại che 3 số cuối + nút Xin số (trang chi tiết). */
.kv-sdt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kv-sdt b { font-weight: 600; letter-spacing: .02em; }
.kv-sdt form { margin: 0; }

/* ===== Bản 1.23 (Gói Trang chủ 2 & Logo, công tắc trang_chu_logo) ===== */
/* Logo ảnh ở đầu trang */
.brand-logo { height: 56px; width: auto; max-width: 70vw; display: block; object-fit: contain; }
.brand.brand-img { gap: 12px; }
@media (max-width: 480px) { .brand-logo { max-width: 56vw; } }

/* Đầu trang nền xanh ngọc, logo màu vàng */
.hd-xanh .site-header { background: linear-gradient(180deg, #1E4D40, #143429); border-bottom: 2px solid #D9B46A; }
.hd-xanh .brand-name { color: #F1E6CC; }
.hd-xanh .brand-sub { color: #D9B46A; }
.hd-xanh .main-nav a { color: #DCE8E1; }
.hd-xanh .main-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.hd-xanh .main-nav a[aria-current="page"] { background: rgba(217,180,106,.22); color: #F6E7C1; }
.hd-xanh .header-actions .btn-primary { background: #D9B46A; border-color: #D9B46A; color: #143429; }
.hd-xanh .account-link { color: #F1E6CC; }
.hd-xanh .account-link .av, .hd-xanh .account-link .av-empty { border: 2px solid #D9B46A; box-sizing: border-box; }
.hd-xanh .search-mini { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #DCE8E1; }

/* Thông báo ở trang đăng nhập (đi từ Gia phả) */
.lg-gp { margin: 0 0 14px; padding: 12px 14px; background: #F1E6CC; border: 1px solid #E2CC97; border-radius: 14px; color: #5B3D0C; line-height: 1.5; }

/* Khối chào */
.k-chao { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; color: var(--ink); min-height: 76px; }
.k-chao .av, .k-chao .av-empty { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-sizing: border-box; border: 2px solid var(--gold-on-jade); }
.k-chao-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.k-chao-1 { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.k-chao-1 em { font-style: normal; font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 20px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-soft-ink); }
.k-chao-m > b { font-size: 20px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jade); }
.k-chao-2 { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-chao-go { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--jade-soft); color: var(--jade); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Hàng 3 ô */
.k-so { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.k-so-o { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--jade); text-align: center; text-decoration: none; }
.k-so-ic { display: inline-flex; color: var(--gold-ink); }
.k-so-n { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.k-so-n b { font-size: 22px; color: var(--jade); }
.k-so-n small { font-size: 12.5px; color: var(--muted); }
.k-so-go { background: var(--jade); border-color: var(--jade); color: var(--on-jade, #fff); }
.k-so-go .k-so-ic { color: var(--gold-on-jade); }
.k-so-gt { font-size: 14px; font-weight: 600; }

/* Lịch kiểu mới: hàng Hôm nay, mùng 1 và rằm, ô hôm nay */
.hn { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hn-d { flex: none; width: 48px; height: 52px; border-radius: 12px; background: #1E4D40; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hn-d b { font-size: 20px; }
.hn-d small { font-size: 11px; color: #DCE8E1; }
.hn-t { display: flex; flex-direction: column; min-width: 0; }
.hn-t strong { font-size: 16px; color: var(--ink); }
.hn-t span { font-size: 13px; color: var(--muted); }
.lich-tcl .lich-d small.rd { color: var(--danger); font-weight: 700; }
.lich-tcl .lich-d.is-today { background: #1E4D40; border-color: #1E4D40; box-shadow: none; }
.lich-tcl .lich-d.is-today b { color: #fff; }
.lich-tcl .lich-d.is-today small { color: #DCE8E1; }
.lich-tcl .lich-d.is-today small.rd { color: #FFB4A8; }

/* Thẻ Giỗ, Sinh nhật sắp tới */
.k-sk h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; margin: 0 0 8px; }
.sk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.sk-dot-gio { background: var(--danger); }
.sk-dot-sn { background: var(--jade); }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--ink); min-height: 64px; }
.sk-row + .sk-row { border-top: 1px solid var(--line-2); }
.sk-date { flex: none; width: 48px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; text-align: center; display: flex; flex-direction: column; }
.sk-date small { display: block; font-size: 10.5px; line-height: 16px; color: #fff; font-weight: 600; }
.sk-date b { display: block; font-size: 21px; line-height: 30px; color: var(--ink); }
.sk-gio small { background: var(--danger); }
.sk-sn small { background: var(--jade); }
.sk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-t b { font-size: 16.5px; line-height: 1.3; }
.sk-t > span { font-size: 13px; color: var(--muted); }
.sk-ban { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 0 7px; line-height: 18px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-soft-ink); vertical-align: 2px; }
.sk-con { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--jade-soft); color: var(--jade); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sk-con.is-near { background: #1E4D40; color: #fff; }
.sk-con.is-near.is-gio { background: var(--danger); }
.sk-btn { margin-top: 10px; }
.sn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sn-btns .btn { width: 100%; }

/* Thẻ Logo và biểu tượng (Quản trị › Cài đặt) */
.lg-h { font-size: 16px; margin: 18px 0 8px; color: var(--jade); }
.lg-prev { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lg-prev.is-xanh { background: linear-gradient(180deg, #1E4D40, #143429); border-color: #D9B46A; }
.lg-prev.is-xanh .brand-name { color: #F1E6CC; }
.lg-prev.is-xanh .brand-sub { color: #D9B46A; }
.lg-txt { display: flex; flex-direction: column; min-width: 0; }
.lg-info { margin: 8px 0; }
.lg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-btns .btn { width: 100%; text-align: center; justify-content: center; }
.lg-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-kieu { display: grid; gap: 4px; margin-bottom: 10px; }
.lg-sqs { display: flex; align-items: flex-end; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lg-sqs img { border-radius: 12px; object-fit: cover; }
.lg-card .btn-block { margin-top: 20px; }

/* Bảng xem nhanh gọn (trang chủ) */
.xn-pop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,52,41,.45); }
.xn-pop[hidden] { display: none; }
.xn-pop-in { width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; background: var(--surface); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.xn-pop-in h2 { margin: 0 0 6px; font-size: 22px; color: var(--jade); text-align: center; }
.xn-pop-in .pill { display: table; margin: 6px auto 0; }
.xn-pop-in dl { margin: 12px 0 0; }
.xn-pop-in .xn-btns { display: grid; gap: 8px; margin-top: 16px; }

/* 1.23.1: Tháng · Năm · Xem cao và rộng bằng nhau */
.lich-tcl .lich-chon { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }
.lich-tcl .lich-chon .field { flex: none; }
.lich-tcl .lich-chon .field select, .lich-tcl .lich-chon .btn { width: 100%; height: 48px; min-height: 48px; box-sizing: border-box; }
.lich-tcl .lich-chon .btn { padding-left: 0; padding-right: 0; }
.lich-tcl .lich-chon .field select { font-size: 16px; padding-left: 10px; padding-right: 26px; text-overflow: clip; }
.lich-moi.lich-tcl .lich-chon .field select { font-size: 15.5px; padding: 0 22px 0 10px; background-position: right 8px center; }
.lich-moi.lich-tcl .lich-chon { gap: 8px; }
.lich-moi.lich-tcl .lich-chon .field select { font-size: 14.5px; padding: 0 20px 0 8px; background-position: right 6px center; }
.lich-moi.lich-tcl .lich-chon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lich-moi.lich-tcl .lich-chon .field select { font-size: 16px; padding: 0 28px 0 14px; background-position: right 10px center; }
.lich-moi.lich-tcl .lich-chon .field select { padding: 0 22px 0 12px; background-position: right 8px center; text-overflow: clip; }

/* Bản 1.24 – Gói Quản trị gọn: ô tìm chức năng ghim đầu trang, Cài đặt 5 nhóm, tìm tài khoản */
.qtg { padding: 14px; }
.qtg .qtg-form { margin: 0 0 12px; }
.qtg .qtg-form input[type=search], .tk-tim input[type=search] { font-size: 16px; }
.qtg-res { margin: 0 0 4px; }
.qtg-res[hidden], .qtg-tiles[hidden] { display: none; }
.qtg-n { margin: 0 0 2px; }
.qtg-res .row-link:first-of-type { border-top: 0; }
.tk-tim { margin: 0 0 10px; }
.tk-tim .btn { flex: none; min-height: 44px; }
.tk-n { margin: 0 0 8px; }
.tk-trang .btn { flex: 1; min-height: 44px; }
.cfg-meta > summary .rl-title { font-size: 18px; }
.cfg-meta .cfg-body { display: block; }
.cfg-sub { margin: 0; padding: 4px 0; border-top: 1px solid var(--line-2); }
.cfg-sub > summary { min-height: 44px; }
.cfg-sub > summary .rl-title { font-size: 16px; font-weight: 600; }
.cfg-sub[open] > summary { margin-bottom: 4px; }
.cfg-sub .cfg-body { padding: 0 0 8px; }
.cfg-meta .lg-card { border: 0; box-shadow: none; background: none; padding: 0 0 8px; margin: 0; }

/* ===================================================================================================================
   Bản 1.26.6 – Gói Thiết kế sơ đồ và chi tiết (công tắc so_do_thu_gon). Chỉ chạy khi công tắc bật; điện thoại < 600px là chính.
   =================================================================================================================== */

/* --- Khối thống kê tổng quan, 3 nút cùng cỡ, dải chú thích (Sơ đồ toàn họ) --- */
.thu-gon-pg .tg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 14px 10px 10px; border-radius: 18px; background: linear-gradient(180deg, var(--jade), var(--jade-dark)); border-bottom: 3px solid var(--gold-on-jade); color: var(--on-jade); }
.thu-gon-pg .tg-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.thu-gon-pg .tg-stats b { font-family: var(--font-head); font-size: 26px; line-height: 1.1; color: var(--gold-on-jade); }
.thu-gon-pg .tg-stats span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; text-align: center; }
.thu-gon-pg .tg-live { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; font-size: 14px; font-weight: 600; }
.tg-bar { display: grid; gap: 8px; margin-bottom: 10px; }
.tg-bar .view-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.tg-bar .view-switch button { height: 44px; min-height: 44px; }
.tg-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tg-chips .chip { justify-content: center; height: 44px; min-height: 44px; padding: 0 6px; font-size: 14px; }
.tg-chips .chip[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
.tg-chips .chip[data-expand] { border-color: #A9B8AE; }

/* --- Thẻ sơ đồ: nhãn Trưởng / Có bạn / Bạn, viền vàng nhánh có bạn, tên căn giữa trong vùng 2 dòng --- */
.sd2[data-tg] .tree-card .tc-name { display: flex; align-items: center; justify-content: center; -webkit-line-clamp: unset; }
.sd2[data-tg] .tree-card .tc-name > span { display: -webkit-box; -webkit-line-clamp: var(--sd-name-lines); -webkit-box-orient: vertical; overflow: hidden; width: 100%; }
.sd2[data-tg] .tree-card { position: relative; }
.sd2[data-tg] .tree-card.is-cb { border: 2px solid var(--gold); }
.tc-lb { position: absolute; top: 5px; z-index: 1; padding: 0 4px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 14px; white-space: nowrap; }
.tc-lb.tt { left: 4px; background: var(--gold); color: #fff; }
.tc-lb.cb { right: 4px; background: #fff; color: var(--gold-ink); border: 1px solid var(--gold); line-height: 12px; }
[data-tg] .tree-gen { width: 74px; line-height: 1.2; font-size: 11px; white-space: normal; }
.tg-ph[data-view="diagram"] .tree-layout { display: block; }
.tg-ph .tree-panel { display: none; }
.thu-gon-pg .tree-box { border-radius: 16px; }

/* --- Danh sách (điện thoại): dòng là nút mở Xem nhanh, nút "+N" / "−" --- */
[data-tg].tg-ph .tree-list summary { display: flex; align-items: center; gap: 6px; }
[data-tg].tg-ph .tree-list .tl-row { flex: 1; min-width: 0; width: auto; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-height: 56px; }
[data-tg].tg-ph .tree-list .tl-row.is-cb { background: #FDF8EA; }
[data-tg].tg-ph .tree-list .tl-flat { display: flex; }
.tl-pm { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; padding: 0 8px; border: 1.5px solid var(--gold); border-radius: 999px; background: #fff; color: var(--gold-ink); font-size: 14px; font-weight: 800; }
.tl-pm .pm-o { display: none; }
details[open] > summary .tl-pm .pm-c { display: none; }
details[open] > summary .tl-pm .pm-o { display: inline; }
.tl-lbs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tl-lb { padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 17px; }
.tl-lb.tt { background: var(--gold); color: #fff; }
.tl-lb.cb { background: #fff; color: var(--gold-ink); border: 1px solid var(--gold); line-height: 15px; }

/* --- Bảng Xem nhanh trượt từ dưới lên (dùng chung mọi nơi) --- */
.xn-sh { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.xn-sh[hidden] { display: none; }
.xn-sh-bg { position: absolute; inset: 0; background: rgba(20, 52, 41, .10); opacity: 0; transition: opacity .26s ease; pointer-events: none; }
.xn-sh-box { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 72vh; overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; border-top: 3px solid var(--gold); box-shadow: 0 -10px 30px rgba(20, 52, 41, .22); transform: translateY(100%); opacity: 0; transition: transform .26s ease-out, opacity .26s ease; pointer-events: auto; }
.xn-sh.is-on .xn-sh-bg { opacity: 1; }
.xn-sh.is-on .xn-sh-box { transform: none; opacity: 1; }
.xn-sh.is-off .xn-sh-bg { opacity: 0; transition: opacity .22s ease; }
.xn-sh.is-off .xn-sh-box { transform: translateY(40px); opacity: 0; transition: transform .22s ease-in, opacity .22s ease; }
@media (prefers-reduced-motion: reduce) { .xn-sh-bg, .xn-sh-box, .xn-sh.is-off .xn-sh-box, .xn-sh.is-off .xn-sh-bg { transition: none; } }
.xn-sh-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; }
.xs-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 36px; }
.xs-av .av, .xs-av .av-empty { width: 76px; height: 76px; border-width: 3px; box-sizing: border-box; object-fit: cover; }
.xs-who { min-width: 0; flex: 1; }
.xs-lbs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.xs-lb { padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 20px; }
.xs-lb.tt { background: var(--gold); color: #fff; }
.xs-lb.cb { background: #fff; color: var(--gold-ink); border: 1px solid var(--gold); line-height: 18px; }
.xs-lb.dr { background: var(--gold-soft); color: var(--gold-soft-ink); }
.xs-name { margin: 0; font-size: 21px; line-height: 1.2; color: var(--jade); }
.xs-sp { margin-top: 3px; font-size: 14px; line-height: 1.3; }
.xs-gen { margin-top: 4px; font-size: 13px; color: var(--gold-ink); font-weight: 600; line-height: 1.35; }
.xs-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xs-c { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 8px 10px 8px 4px; min-width: 0; }
.xs-c:nth-child(odd) { border-right: 1px solid var(--line); }
.xs-c:nth-child(n+3) { border-top: 1px solid var(--line); }
.xs-c:nth-child(even) { padding-left: 14px; }
.xs-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold-ink); }
.xs-tx { display: flex; flex-direction: column; min-width: 0; }
.xs-k { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.xs-v { font-size: 15.5px; line-height: 1.25; font-weight: 700; color: var(--ink); word-break: break-word; }
.xs-av .av-zoom { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 50%; display: block; }
.xs-btns { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.xs-btns.two { grid-template-columns: 1fr 1fr; }
.xs-btns .btn { height: 48px; }

/* --- Trang người (/nguoi/:id) và Sơ đồ người đó --- */
.cd { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cd-head { text-align: center; padding: 22px 14px 18px; border-radius: 20px; background: linear-gradient(180deg, var(--jade), var(--jade-dark)); border-bottom: 3px solid var(--gold-on-jade); color: var(--on-jade); }
.cd-head h1 { margin: 12px 0 0; font-size: 26px; color: #fff; }
.cd-head .av, .cd-head .av-empty { border: 3px solid var(--gold-on-jade); box-sizing: border-box; object-fit: cover; }
.cd-head .av-empty { background: rgba(255, 255, 255, .12); color: var(--on-jade); }
.cd-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 14px; opacity: .95; }
.cd-tt { padding: 0 10px; border-radius: 999px; background: var(--gold); color: #fff; font-weight: 800; line-height: 22px; }
.cd-gen { margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--gold-on-jade); line-height: 1.4; }
.cd-pill { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; }
.cd-btns { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.cd-btns.two { grid-template-columns: 1fr 1fr; }
.cd-btns .btn, .cd-more-btns .btn { height: 44px; }
.cd-gold { background: var(--gold-on-jade); border-color: var(--gold-on-jade); color: var(--jade-dark); }
.cd-gold:hover { background: #E6C98A; border-color: #E6C98A; color: var(--jade-dark); }
.cd-line { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.cd-line:hover { border-color: #fff; color: #fff; }
.cd-more-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.cd-lineage { padding: 14px 14px 12px; }
.cd-lh { display: flex; justify-content: flex-end; margin: -2px 0 4px; }
.cd-hint { font-size: 12px; color: var(--gold-ink); font-weight: 600; }
.cd-anc { position: relative; }
.cd-anc.is-more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; background: linear-gradient(90deg, rgba(251, 252, 249, 0), var(--surface)); pointer-events: none; }
.cd-anc-row { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.cd-anc-row::-webkit-scrollbar { display: none; }
.cd-an { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.cd-an .av, .cd-an .av-empty { width: 40px; height: 40px; box-sizing: border-box; }
.cd-ag { font-size: 10.5px; font-weight: 700; color: var(--gold-ink); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.cd-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.2; text-align: center; font-weight: 600; }
.cd-ln { flex: none; width: 14px; height: 2px; margin-top: 24px; background: var(--gold); }
.cd-an.is-sel, .cd-fr.is-sel { background: var(--gold-soft); }
.cd-dc { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.cd-dc > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px; border-left: 1px solid var(--line-2); min-width: 0; text-align: center; }
.cd-dc > div:first-child { border-left: 0; }
.cd-dc b { font-family: var(--font-head); font-size: 20px; color: var(--jade); line-height: 1.1; }
.cd-dc .big b { font-size: 28px; color: var(--gold-ink); }
.cd-dc span { font-size: 11.5px; color: var(--muted); }
.cd-info h2, .cd-family h2 { margin-bottom: 8px; font-size: 19px; }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 0; }
.cd-kv { min-width: 0; }
.cd-kv.wide { grid-column: 1 / -1; }
.cd-kv dt { font-size: 12px; color: var(--muted); }
.cd-kv dd { margin: 2px 0 0; font-size: 15.5px; font-weight: 600; white-space: pre-line; word-break: break-word; }
.cd-note { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cd-fr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 6px; border: 0; border-top: 1px solid var(--line-2); border-radius: 12px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.cd-fr:first-of-type { border-top: 0; }
.cd-fr .av, .cd-fr .av-empty { width: 44px; height: 44px; box-sizing: border-box; }
.cd-ft { display: flex; flex-direction: column; min-width: 0; }
.cd-ft b { font-size: 15.5px; line-height: 1.25; }
.cd-ft span { font-size: 13px; color: var(--muted); }
.cd-fr::after { content: "›"; margin-left: auto; color: var(--gold); font-size: 24px; }
.cd-more { margin-top: 6px; }
.cd-more > summary { list-style: none; width: 100%; box-sizing: border-box; cursor: pointer; }
.cd-more > summary::-webkit-details-marker { display: none; }
.cd-more[open] > summary { display: none; }
.cd-end { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.cd-end .btn { height: 48px; }
.thu-gon-pg > .cd-end { margin-top: 14px; max-width: 640px; margin-left: auto; margin-right: auto; }


/* --- Bản 1.26.6 (chỉnh lần 2): khối tìm kiếm, thống kê gọn, một khối điều khiển, Xem nhanh gọn --- */
.thu-gon-pg .tg-search { margin: 0 0 8px; min-height: 44px; border-radius: 14px; }
.thu-gon-pg .tg-search input { flex: 1; min-width: 0; min-height: 42px; border: 0; padding: 0; background: none; outline: none; font: inherit; color: var(--ink); }
.thu-gon-pg .tg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; padding: 8px 8px 6px; border-radius: 14px; border-bottom-width: 2px; }
.thu-gon-pg .tg-stats b { font-size: 20px; line-height: 1.15; }
.thu-gon-pg .tg-stats span { font-size: 11px; letter-spacing: .05em; }
.thu-gon-pg .tg-live { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 5px 4px 0; padding-top: 5px; font-size: 13px; font-weight: 600; text-align: left; }
.thu-gon-pg .tg-live span { font-size: 13px; letter-spacing: 0; text-transform: none; opacity: 1; }
.thu-gon-pg .tg-live a { color: var(--gold-on-jade); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tg-bar { gap: 8px; margin: 0 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.tg-bar .view-switch { border-radius: 12px; }
.tg-bar .view-switch button { height: 40px; min-height: 40px; font-size: 15px; }
.tg-chips { gap: 6px; }
.tg-chips .chip { height: 38px; min-height: 38px; font-size: 13.5px; }
/* Xem nhanh: gọn, đường kẻ mềm (không đóng khung) */
.xn-sh-box { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.xs-av .av, .xs-av .av-empty { width: 64px; height: 64px; }
.xs-name { font-size: 19px; }
.xs-sp { font-size: 13.5px; margin-top: 1px; }
.xs-gen { margin-top: 2px; font-size: 12.5px; }
.xs-lbs { margin-bottom: 2px; }
.xs-grid { position: relative; margin: 8px 0 0; border: 0; }
.xs-grid::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(to bottom, transparent, #D9E0D8 22%, #D9E0D8 78%, transparent); }
.xs-grid::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: linear-gradient(to right, transparent, #D9E0D8 14%, #D9E0D8 86%, transparent); }
.xs-c { min-height: 54px; padding: 6px 6px 6px 2px; gap: 9px; border: 0 !important; }
.xs-c:nth-child(even) { padding-left: 16px; }
.xs-ic { width: 32px; height: 32px; }
.xs-ic svg { width: 18px; height: 18px; }
.xs-k { font-size: 12px; }
.xs-v { font-size: 15px; }
.xs-btns { margin-top: 8px; }
.xs-btns .btn { height: 44px; }
.thu-gon-pg .tg-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #A9B8AE; background: #fff; color: var(--muted); }
.thu-gon-pg .tg-search svg { flex: none; }
.thu-gon-pg .tg-search input { border: 0 !important; box-shadow: none !important; height: 42px; font-size: 16px; }
.cd-in-ct { margin: 12px 0; }

/* ───── Bản 1.29 – Gói Ngày của tôi + Hoàng đạo (theo demo đã duyệt 26/10/2026; lớp g- và dm-) ───── */
.dm-card{position:relative}
.dm-cal{width:48px;flex:none;border-radius:9px;overflow:hidden;border:1px solid var(--line);text-align:center;background:#fff}
.dm-cal b{display:block;font-size:11px;color:#fff;padding:2px 0;line-height:1.25;letter-spacing:.02em}
.dm-cal span{display:block;font-size:21px;font-weight:800;line-height:1.35;color:var(--ink)}
.dm-gio b{background:var(--danger)} .dm-sn b{background:var(--jade)} .dm-kn b{background:#B68A3E}
.dm-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.dm-row:first-of-type{border-top:0}
.dm-mid{flex:1;min-width:0}
.dm-name{font-size:16.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.dm-sub{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.dm-pill{flex:none;font-size:13px;font-weight:600;background:#F1F3EF;color:var(--muted);padding:5px 11px;border-radius:999px;white-space:nowrap}
.dm-pill.hot{background:var(--danger);color:#fff}
.dm-t{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.dm-t.auto{background:#E8ECE8;color:#55635C}
.dm-t.chon{background:var(--jade-soft);color:var(--jade)}
.dm-t.own{background:var(--gold-soft);color:var(--gold-soft-ink)}
.dm-t-lg{margin:0;font-size:13px;padding:5px 11px}
.dm-chips2{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;margin-top:12px}
.dm-h2{font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.dm-btns{display:flex;gap:10px;margin:14px 0 4px}
.dm-btns .btn{flex:1;min-height:48px;font-size:15px;padding:0 10px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.dm-seg{display:flex;border:1px solid #A9B8AE;border-radius:10px;overflow:hidden}
.dm-seg a,.dm-seg .dm-segl{flex:1;text-align:center;padding:11px 6px;font-weight:600;font-size:15px;background:var(--surface);color:var(--ink);text-decoration:none;position:relative;cursor:pointer}
.dm-seg a.on,.dm-seg .dm-segl input:checked+span{background:var(--jade);color:var(--on-jade)}
.dm-segl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.dm-segl span{display:block;margin:-11px -6px;padding:11px 6px}
.dm-segl input:focus-visible+span{outline:3px solid var(--gold);outline-offset:-3px}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px}
.dm-chip{display:inline-block;border:1px solid #A9B8AE;border-radius:999px;padding:9px 14px;font-size:14.5px;font-weight:600;background:transparent;color:var(--ink);text-decoration:none}
.dm-chip.on,.dm-chipl input:checked+.dm-chip{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}
.dm-chipl{position:relative;display:inline-block}
.dm-chipl input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.dm-chipl input:focus-visible+.dm-chip{outline:3px solid var(--gold);outline-offset:2px}
.dm-note{font-size:13.5px;color:var(--muted);line-height:1.4}
.dm-small{font-weight:400;color:var(--muted);font-size:13px}
.dm-in{display:flex;align-items:center;width:100%;box-sizing:border-box;border:1px solid #A9B8AE;border-radius:10px;min-height:46px;padding:0 14px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
.dm-sel{display:block;width:100%;box-sizing:border-box;border:1px solid #A9B8AE;border-radius:10px;min-height:46px;padding:0 12px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
.dm-lbl{font-weight:700;font-size:15px;margin:16px 0 6px;display:block}
.dm-gh{display:flex;justify-content:space-between;color:var(--jade);text-decoration:none}
.dm-add{flex:none;min-height:38px;min-width:92px;padding:0 12px;border-radius:10px;border:1px solid var(--jade);color:var(--jade);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-family:inherit;cursor:pointer}
.dm-add.done{background:var(--jade-soft);border-color:transparent;color:var(--jade)}
.dm-add.off{background:#F1F3EF;border-color:transparent;color:#8A978F;font-weight:600;font-size:13px;cursor:default}
.dm-av{width:42px;height:42px;border-radius:50%;flex:none;background:var(--jade-soft);border:2px dashed #B68A3E;display:flex;align-items:center;justify-content:center;color:#55635C}
.dm-hd{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px;padding:6px 12px;border-radius:999px;text-decoration:none}
.dm-hd.y{background:#D9B46A;color:#2b1d00}
.dm-hd.n{background:#E8ECE8;color:#55635C}
.dm-gc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dm-gc span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#F4F1E6;border-radius:8px;padding:5px 9px;font-size:13px;font-weight:600}
.dm-dis{font-size:12.5px;color:#7A5718;background:var(--gold-soft);border-radius:8px;padding:8px 10px;line-height:1.4}
.dm-ck{width:24px;height:24px;border:2px solid #7B8B82;border-radius:6px;background:#fff;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;line-height:1}
.dm-ck.on{background:var(--jade);border-color:var(--jade)}
.dm-ckrow{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;position:relative;cursor:pointer}
.dm-cki{position:absolute;opacity:0;width:24px;height:24px;margin:0;left:0}
.dm-cki:checked+.dm-ck{background:var(--jade);border-color:var(--jade)}
.dm-cki:checked+.dm-ck::after{content:'✓'}
.dm-cki:focus-visible+.dm-ck{outline:3px solid var(--gold);outline-offset:2px}
.nt-hn{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}
.nt-hn-d{width:62px;flex:none;border-radius:12px;background:#143429;text-align:center;padding:7px 0;border:1px solid rgba(255,255,255,.2)}
.nt-hn-n{font-size:30px;font-weight:800;line-height:1}.nt-hn-m{font-size:12px;color:#D9B46A;font-weight:700;margin-top:2px}
.g-wrap{padding:10px 0 0}
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.g-h{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.g-h b{font-size:17.5px;font-weight:800}
.g-h .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.g-h a{font-size:14.5px;font-weight:700;color:var(--jade);text-decoration:none}
.g-h a.g-plus{height:34px;padding:0 14px;border-radius:999px;background:var(--jade);color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.g-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid rgba(23,37,31,.07);color:inherit;text-decoration:none}
.g-row:first-of-type{border-top:0}
.g-cal{width:40px;flex:none;border-radius:8px;overflow:hidden;border:1px solid var(--line);text-align:center;background:#fff}
.g-cal b{display:block;font-size:10px;color:#fff;line-height:1.5}
.g-cal span{display:block;font-size:18px;font-weight:800;line-height:1.3}
.g-gio b{background:var(--danger)} .g-sn b{background:var(--jade)} .g-kn b{background:#B68A3E}
.g-mid{flex:1;min-width:0}
.g-n{font-size:15.5px;font-weight:700;line-height:1.2;color:var(--ink)}
.g-s{font-size:13px;color:var(--muted);margin-top:1px}
.g-p{flex:none;font-size:12.5px;font-weight:600;background:#F1F3EF;color:var(--muted);padding:4px 10px;border-radius:999px;white-space:nowrap}
.g-p.hot{background:var(--danger);color:#fff}
.g-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.g-wd{text-align:center;font-size:12px;color:var(--muted);padding:2px 0}
.g-c{height:42px;border:1px solid var(--line);border-radius:9px;text-align:center;background:#fff;position:relative;padding-top:4px}
.g-c b{display:block;font-size:15px;line-height:1.1}
.g-c i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.2;margin-top:1px}
.g-c i.red{color:var(--danger);font-weight:700}
.g-c.has{background:#FAF5E8;border-color:#E6D9B8}
.g-c.today{background:#1E4D40;border-color:#1E4D40;color:#fff}
.g-c.today i{color:#DCE8E1}
.g-c u{position:absolute;bottom:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--danger);text-decoration:none}
.g-c u.sn{background:var(--jade)} .g-c u.kn{background:#B68A3E}
.g-c.today u{box-shadow:0 0 0 1.5px #fff}
.g-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.g-nav b{font-size:17px;font-weight:800}
.g-nav a,.g-nav span{width:40px;height:34px;border:1px solid #A9B8AE;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);background:#fff;text-decoration:none}
.g-nav span{opacity:.4}
.g-leg{font-size:12.5px;color:var(--muted);margin-top:8px;display:flex;gap:14px}
.g-leg u{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);margin-right:5px;text-decoration:none}
.g-leg u.sn{background:var(--jade)} .g-leg u.kn{background:#B68A3E}
.g-tin{display:block;padding:8px 0;border-top:1px solid rgba(23,37,31,.07);text-decoration:none;color:inherit}
.g-tin:first-of-type{border-top:0}
.g-hn-row{display:flex;align-items:center;gap:12px}
.g-hn-d{width:48px;flex:none;border-radius:10px;background:#1E4D40;color:#F4F1E6;text-align:center;padding:5px 0}
.g-hn-n{font-size:22px;font-weight:800;line-height:1}.g-hn-t{font-size:10.5px;color:#D9B46A;font-weight:700;margin-top:2px}
.g-hn-mid{flex:1;min-width:0}.g-hn-a{font-size:16.5px;font-weight:800}.g-hn-b{font-size:13.5px;color:var(--muted)}
.g-hn-btn{background:none;border:0;padding:4px;margin:-4px;cursor:pointer;font-family:inherit;color:inherit;border-radius:8px}
.g-hn-ck{display:flex;align-items:center;gap:6px;flex:none}
.g-hn-l{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.1;text-align:left}
.g-hn-hd{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.g-hn-hd .dm-hd{font-size:13px;padding:3px 10px}
.g-hn-gio{font-size:13px;color:var(--muted);margin-top:6px}
.g-dn{display:flex;align-items:center;gap:12px}.g-dn-t{flex:1;font-size:14.5px;line-height:1.35}.g-dn-t b{font-size:16px}.g-dn-t span{color:var(--muted)}
.g-dn .btn{min-height:42px;padding:0 16px}
.g-gt{font-size:14px}
/* Đầu trang khách một hàng: Trang chủ · Gia phả · Giới thiệu · [Đăng nhập] */
.g-gnav{display:flex;align-items:center;flex-wrap:nowrap;overflow:visible;gap:0;flex-basis:100%;order:3;margin-top:-4px}
.g-gnav a:not(.g-login){padding:9px 8px}
.g-gnav .g-login{margin-left:auto;min-height:40px;padding:0 14px;font-size:15px;color:#F4F1E6;font-weight:600;display:inline-flex;align-items:center}
@media (min-width:821px){.g-gnav{flex-basis:auto;order:0;margin-top:0;flex:1 1 auto}}
.dm-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
/* Bản 1.29 (sửa theo góp ý): ngày chấm bấm được, âm lịch to hơn, bộ lọc 4 nút đều, nút thống kê lọc, dòng ghi rõ dương/âm */
.g-c{display:block;color:inherit;text-decoration:none}
.g-c.sel{outline:2px solid var(--jade);outline-offset:1px}
.g-ct{margin-top:12px;border:1px solid #E6D9B8;background:#FAF5E8;border-radius:12px;padding:10px 12px}
.g-ct-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.g-ct-h b{display:block;font-size:16.5px}
.g-ct-h span{display:block;font-size:14.5px;color:#4A5A52;font-weight:600;margin-top:2px}
.g-ct-h a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:18px;margin:-8px -8px 0 0}
.dm-chips4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dm-chips4 .dm-chip{display:block;text-align:center;padding:10px 2px;font-size:14px;white-space:nowrap}
.dm-srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.dm-src{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;border:1px solid #A9B8AE;border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;padding:6px 4px;text-align:center}
.dm-src b{font-size:22px;line-height:1.1}
.dm-src span{font-size:13px;font-weight:700}
.dm-src.on{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}
.dm-seg3{display:flex;border:1px solid #A9B8AE;border-radius:10px;overflow:hidden}
.dm-seg3 .dm-segl{flex:1;text-align:center;padding:11px 6px;font-weight:600;font-size:15px;background:var(--surface);position:relative;cursor:pointer}
.dm-seg3 .dm-segl+.dm-segl{border-left:1px solid #A9B8AE}
.dm-seg3 .dm-segl input:checked+span{background:var(--jade);color:var(--on-jade)}
.dm-r2{border-left:4px solid transparent;padding-left:10px}
.dm-r2.dm-k-gio{border-left-color:var(--danger)}
.dm-r2.dm-k-sn{border-left-color:var(--jade)}
.dm-r2.dm-k-kn{border-left-color:#B68A3E}
.dm-dd{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.dm-dl{background:#F2F5F3;border-radius:9px;padding:5px 10px;line-height:1.25}
.dm-dl span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.dm-dl b{display:block;font-size:15.5px}
.dm-dl.am{background:#FAF5E8}
.dm-dd{flex-wrap:nowrap}
.dm-dd .dm-dl{flex:1;min-width:0}
.dm-dd .dm-dl b{font-size:15px;white-space:nowrap}
.dm-con{margin-top:8px}
.g-amc{color:#9A6A12;font-weight:800}

/* Bản 1.30 (Quản trị 2) */
/* E: nút lên đầu trang chỉ mũi tên (vùng bấm 48×48) */
.to-top-ic { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.to-top-ic[hidden] { display: none; }
/* A: nút Mở của từng việc gấp (cùng cỡ) */
.k-urgent .row-btn { gap: 10px; }
.btn-mo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--jade); color: var(--on-jade); font-size: 15px; font-weight: 600; }
/* C: thanh kho dữ liệu (vàng từ 80%, đỏ từ 95%) */
.k-kho h2 { margin: 0 0 4px; }
.kho-row { margin: 14px 0; }
.kho-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.kho-bar { height: 12px; border-radius: 6px; background: var(--line-2, #e3e8e4); overflow: hidden; }
.kho-bar span { display: block; height: 100%; background: var(--jade); }
.kho-sub { margin: 4px 0 0; }
.kho-row.is-amber .kho-top b { color: var(--gold-ink, #9a6a12); }
.kho-row.is-amber .kho-bar span { background: #c58a1d; }
.kho-row.is-red .kho-top b { color: var(--danger); }
.kho-row.is-red .kho-bar span { background: var(--danger); }
.kho-act { display: flex; gap: 8px; margin-top: 10px; }
.kho-act .btn { flex: 1; }
/* B: thẻ Biên tập viên mới */
.bt-p { display: block; padding: 10px 0; border-top: 1px solid var(--line-2, #e3e8e4); color: var(--ink); text-decoration: none; }
.bt-p b { font-size: 16px; display: block; }
.bt-p small { display: block; color: var(--muted); font-size: 14px; }
.bt-trong { margin: 14px 0 4px; font-size: 16px; }
.bt-h { margin: 14px 0 4px; font-size: 16px; }
.bt-logs .bt-log, .bt-log { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-2, #e3e8e4); font-size: 14px; }
.bt-log a { font-weight: 600; }
.bt-log small { display: block; color: var(--muted); }
.bt-log > span { color: var(--muted); white-space: nowrap; }
.bt-all { margin-top: 12px; }
/* 1.30.1: thống kê lượt xem, báo tấn công */
.tk-foot { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line-2, #e3e8e4); color: var(--muted); font-size: 15px; }
.tk-foot b { color: var(--ink); }
.tk-foot a { font-weight: 600; }
.tk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-cards > div { border: 1px solid var(--line-2, #e3e8e4); border-radius: 14px; padding: 12px 14px; }
.tk-cards b { display: block; font-size: 26px; color: var(--jade); }
.tk-cards span { color: var(--muted); font-size: 15px; }
.tk-bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin-top: 10px; }
.tk-b { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.tk-b span { display: block; width: 100%; background: var(--jade); border-radius: 4px 4px 0 0; }
.tk-b small { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tk-sts { list-style: none; margin: 8px 0 12px; padding: 0; }
.tk-st { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2, #e3e8e4); font-size: 16px; }
.tk-st b { flex: 0 0 20px; text-align: center; color: var(--jade); }
.tk-st > span { flex: 1; min-width: 0; }
.tk-st.chua b { color: var(--muted); }
.tk-st small { display: block; color: var(--muted); font-size: 14px; }

/* Bản 1.31 (Gói Gia phả nhanh): trang /gia-pha mới – nút "Lên 1 đời" cùng hàng nhãn trong khung sơ đồ, nút Quay lại cuối trang. */
.gpn-pg .page-head { margin-bottom: 12px; }
.gpn-pg .page-head .k-sub { font-size: 15px; }
.gpn-all { margin-bottom: 12px; }
.gpn-head { align-items: center; flex-wrap: nowrap; padding: 8px 12px 8px 18px; }
.gpn-head > span { min-width: 0; }
.gpn-head .gpn-up { flex: 0 0 auto; min-height: 44px; white-space: nowrap; font-size: 16px; }
.gpn-back { margin: 14px 0 8px; min-height: 48px; }
.tl-wait { padding: 12px 16px; color: var(--muted); font-size: 15px; }
.tree-toggle[aria-busy="true"] { opacity: .7; }

/* Bản 1.32 (Gói Thông báo 2): dải đỏ Thông báo nhanh, dòng gợi ý bật thông báo, lời nhắc sau khi cài app. */
.tbn-bar { display: block; background: var(--danger, #a6322b); color: #fff; padding: 12px 16px; text-decoration: none; font-weight: 600; line-height: 1.35; }
.tbn-bar:hover, .tbn-bar:focus-visible { color: #fff; filter: brightness(1.08); }
.tbn-bar-t { display: block; }
.tbn-bar-n { display: block; font-weight: 400; font-size: 13px; opacity: .92; margin-top: 2px; }
.tb-goiy { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px 16px; }
.tb-goiy[hidden] { display: none; }
.tb-goiy-t { flex: 1; min-width: 0; }
.tb[hidden] { display: none; }
/* Bản 1.44 (don_cua_toi): thanh Bật thông báo nổi bật, một hàng; số con cháu màu vàng cam; hàng nhỏ trong khung sơ đồ. */
.tb-goiy.tb-goiy-lon { gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--jade); color: #fff; box-shadow: none; }
.tb-goiy-lon .tb-goiy-i { flex: none; color: var(--gold-on-jade); }
.tb-goiy-lon .tb-goiy-t strong { display: block; font-size: 16px; line-height: 1.3; color: #fff; }
.tb-goiy-lon .tb-goiy-t span { display: block; font-size: 13px; line-height: 1.35; opacity: .88; }
.tb-goiy-lon .tb-goiy-nut { flex: none; min-width: 64px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--jade); font-weight: 700; font-size: 15px; line-height: 1; text-align: center; text-decoration: none; }
.tb-goiy-lon .tb-goiy-nut:hover, .tb-goiy-lon .tb-goiy-nut:focus-visible { background: var(--gold-soft); color: var(--jade-dark); }
.gd .ct-tag.cc { background: #FCE6C8; color: #B45309; }
.tree-box-act { align-items: center; padding: 8px 14px 8px 18px; }
.tree-box-act .tb-act { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ct-tree-gon > .ct-btns { margin-bottom: 12px; }
.ct-tree-gon > h2 { margin-top: 0; }
.tb-sheet-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 30, 25, .55); display: flex; align-items: flex-end; }
.tb-sheet { width: 100%; background: var(--surface, #fff); border-radius: 20px 20px 0 0; padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
.tb-sheet h2 { font-size: 21px; margin: 0 0 8px; }
.tb-sheet p { margin: 0 0 12px; }

/* Bản 1.34 (form_them_nguoi): form Thêm/Sửa người gọn */
.fn-form > fieldset.place-choice { border-style: solid; }
.fn-form .fields-stack { grid-template-columns: 1fr; }
.fn-form fieldset.status-row { flex-wrap: nowrap; gap: 8px !important; }
.fn-form fieldset.status-row .chip-check { position: relative; flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 4px; min-height: 44px; white-space: nowrap; font-size: 16px; }
.fn-form fieldset.status-row .chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fn-form fieldset.status-row .chip-check:has(input:focus-visible) { outline: 2px solid var(--jade); outline-offset: 2px; }
.fn-form fieldset fieldset.gender-row { border: 0; padding: 0 !important; }
.fn-form fieldset fieldset.gender-row legend { padding: 0; margin-bottom: 6px; font-weight: 700; float: none; }
.fn-form fieldset.gender-row .chip-check { flex: 1 1 0; justify-content: center; min-height: 44px; }
.fn-form .photo-actions small:empty { display: none; }

/* Bản 1.35 (Gói Hướng dẫn bằng hình ảnh) */
.hd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hd-tabs .btn { min-height: 44px; }
.hd-tabs .is-cur { pointer-events: none; }
.hd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.hd-steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: start; }
.hd-n { width: 32px; height: 32px; border-radius: 50%; background: var(--jade); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hd-steps p { margin: 3px 0 10px; line-height: 1.5; font-size: 16px; }
.hd-steps .hd-img { grid-column: 1 / -1; display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hd-lam .btn { width: 100%; justify-content: center; min-height: 48px; }
.hd-list { display: grid; gap: 10px; }
.hd-card { display: grid; gap: 4px; text-decoration: none; color: var(--ink); min-height: 44px; }

/* Bản 1.36 (Gói Dọn cài đặt): hai tab Quản trị | Cài đặt, lưới 6 mục lớn, ba khối trong nhóm cài đặt, nút quay lại */
.seg-qt { margin: 0; flex: 1; min-width: 0; }
.seg-qt a { font-weight: 700; }
.k-head-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.k-home > .seg-qt { margin: 0 0 12px; }
.grp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-khoi-h { margin: 14px 0 2px; font-size: 15px; color: var(--jade); display: flex; align-items: center; gap: 8px; }
.cfg-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--gold-ink); }
.cfg-bang { border: 1px solid var(--line-2); border-radius: 12px; margin: 10px 0 0; padding: 0 12px; min-width: 0; }
.cfg-bang > legend { padding: 0 6px; font-weight: 700; font-size: 14px; color: var(--jade); }
.cfg-lan { margin-top: 14px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px; background: var(--paper-2, transparent); }
.cfg-lan > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; font-weight: 700; }
.cfg-lan > summary::-webkit-details-marker { display: none; }
.cfg-lan > summary::after { content: "+"; font-size: 22px; color: var(--jade); }
.cfg-lan[open] > summary::after { content: "−"; }
.cfg-lan > summary .cfg-lan-n { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.btn-back-qt { margin: 14px 0 24px; }
.bt-more { margin-top: 8px; }
#da-doi .row-link .rl-num { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
#da-doi .row-link .rl-text { min-width: 0; flex: 1; }
/* Bản 1.43 (Gói Quản trị 3 tab): 3 tab dính mép trên, chỉ tài khoản Quản trị; thay 2 tab cũ, nút Menu cạnh tiêu đề và hàng "Tổng quan / Menu". */
.q3-bar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.q3-bar a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--jade-dark, var(--jade)); font-size: 15px; font-weight: 700; text-decoration: none; }
.q3-bar a[aria-current="page"] { background: var(--jade); border-color: var(--jade); color: #fff; }
.q3 .seg-qt, .q3 .gd-abar, .q3 .k-head-tabs, .q3 .k-head a[href="/quan-tri/menu"] { display: none; }