/*
 * Quy tắc riêng của từng theme (TreeStyle::THEMES). Màu, phông, bo góc, kiểu thanh trên cùng của theme đã đi qua biến CSS
 * (máy chủ ghi vào <style id="treeStyle">); ở đây chỉ thêm những chi tiết biến không làm được. <html data-theme="..."> do máy chủ đặt.
 */

/* ---------- Thanh nhã: phẳng, gọn ---------- */
[data-theme='thanh-nha'] .login-card { outline: none; }
[data-theme='thanh-nha'] .topbar { box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02); }
[data-theme='thanh-nha'] .brand-title { font-weight: 700; letter-spacing: 0; }
[data-theme='thanh-nha'] .user .ava { background: var(--paper-2); }
[data-theme='thanh-nha'] .tabs button:hover, [data-theme='thanh-nha'] .tabs .tab-link:hover { background: var(--paper-2); }
[data-theme='thanh-nha'] .tabs button.active:hover { background: var(--tab-active-bg); }

/* ---------- Sơn mài: tối, viền vàng ---------- */
[data-theme='son-mai'] .login-card { outline-color: var(--gold); outline-width: 1px; outline-style: solid; outline-offset: -8px; }
[data-theme='son-mai'] .topbar { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.8); }
[data-theme='son-mai'] .brand-title { letter-spacing: 0.04em; }
[data-theme='son-mai'] .btn { border-color: var(--gold); }
[data-theme='son-mai'] .btn.secondary { background: transparent; }
[data-theme='son-mai'] .user .ava { background: var(--gold-soft); }
[data-theme='son-mai'] .tree-viewport { background: radial-gradient(70% 60% at 50% 0%, var(--paper-2) 0%, var(--paper) 75%); }
[data-theme='son-mai'] .gen-band { border-top-color: rgba(212, 175, 55, 0.18); }
[data-theme='son-mai'] .gen-band.odd { background: rgba(212, 175, 55, 0.05); }
[data-theme='son-mai'] .person-card.deceased { filter: saturate(0.7) brightness(0.9); }
[data-theme='son-mai'] .person-card.male { background: linear-gradient(180deg, #2e3b4e, var(--card) 70%); }
[data-theme='son-mai'] .person-card.female { background: linear-gradient(180deg, #4a2a30, var(--card) 70%); }
[data-theme='son-mai'] .badge, [data-theme='son-mai'] .badge.gold { color: var(--ink); }
[data-theme='son-mai'] dialog { border: 1px solid var(--gold); }

/* ---------- Tươi sáng: bo tròn, mềm ---------- */
[data-theme='tuoi-sang'] .login-card { outline: none; }
[data-theme='tuoi-sang'] .brand-title { font-weight: 800; letter-spacing: -0.01em; }
[data-theme='tuoi-sang'] h1, [data-theme='tuoi-sang'] h2, [data-theme='tuoi-sang'] h3 { font-weight: 800; letter-spacing: -0.01em; }
[data-theme='tuoi-sang'] .btn { font-weight: 700; box-shadow: 0 8px 16px -10px var(--red); }
[data-theme='tuoi-sang'] .btn.secondary { box-shadow: none; }
[data-theme='tuoi-sang'] .tabs button:hover, [data-theme='tuoi-sang'] .tabs .tab-link:hover { background: var(--paper-2); }
[data-theme='tuoi-sang'] .tabs button.active:hover { background: var(--tab-active-bg); }
[data-theme='tuoi-sang'] .user .ava { background: var(--gold-soft); }
[data-theme='tuoi-sang'] .person-card { border-top-width: 1.5px; }
[data-theme='tuoi-sang'] .person-card.male { background: var(--male-bg); border-color: var(--male); }
[data-theme='tuoi-sang'] .person-card.female { background: var(--female-bg); border-color: var(--female); }
[data-theme='tuoi-sang'] dialog { border-radius: 24px; }

/* ---------- Giấy dó: như trang sách phả ---------- */
[data-theme='giay-do'] body { letter-spacing: 0.005em; }
[data-theme='giay-do'] .login-card { outline: 1px solid var(--line); outline-offset: -10px; }
[data-theme='giay-do'] .tabs button, [data-theme='giay-do'] .tabs .tab-link { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; }
[data-theme='giay-do'] .brand-title { text-transform: uppercase; letter-spacing: 0.16em; font-size: 17px; }
[data-theme='giay-do'] h1, [data-theme='giay-do'] h2 { letter-spacing: 0.02em; }
[data-theme='giay-do'] .btn { letter-spacing: 0.06em; font-weight: 600; }
[data-theme='giay-do'] .user .ava { background: var(--gold-soft); }
[data-theme='giay-do'] .about-card { box-shadow: 4px 4px 0 var(--gold-soft); }
[data-theme='giay-do'] .person-card { border-top-width: 3px; box-shadow: 3px 3px 0 var(--gold-soft); }
[data-theme='giay-do'] .person-card.male { background: var(--card); }
[data-theme='giay-do'] .person-card.female { background: var(--paper-2); }
[data-theme='giay-do'] dialog { border: 2px solid var(--ink); border-radius: 0; }
[data-theme='giay-do'] .dlg-head { letter-spacing: 0.04em; }
[data-theme='giay-do'] .site-footer { border-top: 3px double var(--ink); }