/* =====================================================
   GIA PHẢ — PHONG CÁCH TÍN NGƯỠNG THỜ CÚNG TỔ TIÊN VIỆT NAM
   Bảng màu: đỏ son (đình, đền, bài vị) - vàng đồng (ánh kim, hoành phi)
             - nâu gỗ (câu đối, cột đình) - vàng kem (giấy dó, sắc phong)
   ===================================================== */

:root {
    --mau-do-son: #7a2020;
    --mau-do-son-dam: #5c1616;
    --mau-vang-dong: #c9a24b;
    --mau-vang-dong-sang: #e6c877;
    --mau-nau-go: #5b3a29;
    --mau-nau-go-dam: #3f2a1e;
    --mau-nen-giay-do: #fdf6e9;
    --mau-chu: #33241a;

    /* Ghi đè biến màu Bootstrap để đồng bộ theme trên toàn hệ thống */
    --bs-success: var(--mau-do-son);
    --bs-success-rgb: 122, 32, 32;
    --bs-primary: var(--mau-nau-go);
    --bs-primary-rgb: 91, 58, 41;
    --bs-link-color: var(--mau-do-son);
    --bs-link-hover-color: var(--mau-do-son-dam);

    /* Bảng màu phân biệt từng đời (lặp lại theo chu kỳ) */
    --doi-0: #7a2020; /* đỏ son */
    --doi-1: #c9a24b; /* vàng đồng */
    --doi-2: #2f6b4f; /* xanh rêu ngọc */
    --doi-3: #4a5f8a; /* xanh chàm */
    --doi-4: #8a4f2f; /* nâu đất nung */
    --doi-5: #7a4a8a; /* tím trầm */
}

body {
    background-color: var(--mau-nen-giay-do);
    background-image:
        radial-gradient(circle at 0 0, rgba(201,162,75,.10) 0, transparent 45%),
        radial-gradient(circle at 100% 0, rgba(122,32,32,.06) 0, transparent 45%);
    font-family: 'Noto Serif', 'Segoe UI', Tahoma, sans-serif;
    color: var(--mau-chu);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Cormorant Garamond', 'Noto Serif', Georgia, serif;
    letter-spacing: .02em;
}

/* Dải hoa văn trang trí đầu trang, gợi hình mái đình/cổng làng */
.hoa-van-top {
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--mau-vang-dong) 0px, var(--mau-vang-dong) 18px,
        var(--mau-do-son) 18px, var(--mau-do-son) 36px
    );
}

.bg-gia-toc {
    background: linear-gradient(180deg, var(--mau-do-son) 0%, var(--mau-do-son-dam) 100%) !important;
    border-bottom: 3px solid var(--mau-vang-dong);
}
.bg-gia-toc .navbar-brand,
.bg-gia-toc .nav-link {
    color: var(--mau-vang-dong-sang) !important;
    font-weight: 600;
}
.bg-gia-toc .nav-link:hover { color: #fff !important; }
.bg-gia-toc .navbar-brand i { color: var(--mau-vang-dong-sang); }

.btn-success {
    --bs-btn-bg: var(--mau-do-son);
    --bs-btn-border-color: var(--mau-do-son);
    --bs-btn-hover-bg: var(--mau-do-son-dam);
    --bs-btn-hover-border-color: var(--mau-do-son-dam);
    --bs-btn-active-bg: var(--mau-do-son-dam);
}
.btn-outline-success {
    --bs-btn-color: var(--mau-do-son);
    --bs-btn-border-color: var(--mau-do-son);
    --bs-btn-hover-bg: var(--mau-do-son);
    --bs-btn-hover-border-color: var(--mau-do-son);
}
.text-danger { color: var(--mau-do-son) !important; }

footer.bg-light {
    background: var(--mau-nau-go) !important;
    color: var(--mau-vang-dong-sang) !important;
    border-top: 3px solid var(--mau-vang-dong) !important;
}
footer .text-muted { color: var(--mau-vang-dong-sang) !important; opacity: .85; }

/* ===== Thẻ thành viên ===== */
.card-member {
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid #e3d3ad;
    border-left: 6px solid var(--mau-vang-dong);
    background: #fffdf7;
    position: relative;
    overflow: hidden;
}
.card-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(90,50,20,.15);
}
.member-name-link { color: var(--mau-chu); font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }
.member-name-link:hover { color: var(--mau-do-son); }

.avatar-placeholder {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mau-vang-dong-sang), var(--mau-vang-dong));
    display: flex; align-items: center; justify-content: center;
    color: var(--mau-do-son-dam); font-weight: bold; font-size: 1.3rem;
    border: 2px solid var(--mau-do-son);
}
.avatar-img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--mau-vang-dong);
}
.badge-doi {
    background: var(--mau-do-son);
    border: 1px solid var(--mau-vang-dong);
}

.tag-da-mat {
    color: #6b6b6b;
    font-style: italic;
}

/* Người đã mất: hiển thị xám / bạc để phân biệt trong danh sách */
.card-da-mat {
    background: #eeeeea;
    border-left-color: #9c9c94;
    filter: grayscale(75%);
    opacity: .82;
}
.card-da-mat .member-name-link { color: #555 !important; }
.card-da-mat:hover { filter: grayscale(35%); opacity: 1; }

/* ===== Chú thích màu theo từng đời ===== */
.chu-thich-doi {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    background: #fffaf0; border: 1px dashed var(--mau-vang-dong);
    border-radius: 8px; padding: 8px 14px;
}
.chu-thich-nhan { font-weight: 600; color: var(--mau-nau-go); margin-right: 4px; }
.chu-thich-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; padding: 3px 10px; border-radius: 20px;
    color: #fff; font-weight: 600;
}
.chu-thich-item::before {
    content: '\2726';
    font-size: .85em;
}
.card-da-mat-mau { background: #9c9c94 !important; }

/* Màu theo đời — dùng chung cho thẻ danh sách & nút cây gia phả */
.the-he-0 { --mau-doi: var(--doi-0); }
.the-he-1 { --mau-doi: var(--doi-1); }
.the-he-2 { --mau-doi: var(--doi-2); }
.the-he-3 { --mau-doi: var(--doi-3); }
.the-he-4 { --mau-doi: var(--doi-4); }
.the-he-5 { --mau-doi: var(--doi-5); }

.chu-thich-item.the-he-0,
.chu-thich-item.the-he-1,
.chu-thich-item.the-he-2,
.chu-thich-item.the-he-3,
.chu-thich-item.the-he-4,
.chu-thich-item.the-he-5 { background: var(--mau-doi); }

.card-member.the-he-0,
.card-member.the-he-1,
.card-member.the-he-2,
.card-member.the-he-3,
.card-member.the-he-4,
.card-member.the-he-5 { border-left-color: var(--mau-doi); }
.card-member.the-he-0:not(.card-da-mat) { background: linear-gradient(90deg, rgba(122,32,32,.06), #fffdf7 60px); }
.card-member.the-he-1:not(.card-da-mat) { background: linear-gradient(90deg, rgba(201,162,75,.10), #fffdf7 60px); }
.card-member.the-he-2:not(.card-da-mat) { background: linear-gradient(90deg, rgba(47,107,79,.08), #fffdf7 60px); }
.card-member.the-he-3:not(.card-da-mat) { background: linear-gradient(90deg, rgba(74,95,138,.08), #fffdf7 60px); }
.card-member.the-he-4:not(.card-da-mat) { background: linear-gradient(90deg, rgba(138,79,47,.08), #fffdf7 60px); }
.card-member.the-he-5:not(.card-da-mat) { background: linear-gradient(90deg, rgba(122,74,138,.08), #fffdf7 60px); }

/* ===== Cây gia phả ===== */
.tree-wrapper {
    overflow-x: auto;
    padding: 28px 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(201,162,75,.08), transparent 60%),
        #fffdf7 !important;
    border: 1px solid #e3d3ad;
    position: relative;
}
.tree-wrapper::before {
    content: '';
    position: absolute; inset: 8px;
    border: 2px solid var(--mau-vang-dong);
    border-radius: 10px;
    pointer-events: none;
}
.tree-title-in-print h3 { font-family: 'Cormorant Garamond', serif; color: var(--mau-do-son-dam); }
.tree ul {
    padding-top: 24px; position: relative;
    display: flex; justify-content: center;
}
.tree li {
    list-style-type: none;
    text-align: center;
    position: relative;
    padding: 24px 10px 0 10px;
}
.tree li::before, .tree li::after {
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid var(--mau-vang-dong);
    width: 50%; height: 24px;
}
.tree li::after {
    right: auto; left: 50%;
    border-left: 2px solid var(--mau-vang-dong);
}
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before { border: 0 none; }
.tree li:last-child::after { border: 0 none; }
.tree li:last-child::before {
    border-right: 2px solid var(--mau-vang-dong);
    border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}
.tree ul ul::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid var(--mau-vang-dong);
    width: 0; height: 24px;
}

/* Ô tên trên cây — cách điệu theo bài vị thờ tổ tiên: viền vàng, nền trầm, chữ cân đối từng chữ xuống dòng */
.tree-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid var(--mau-vang-dong);
    border-top: 6px solid var(--mau-vang-dong);
    border-radius: 4px 4px 10px 10px;
    padding: 12px 10px 10px;
    background: linear-gradient(180deg, #fffaf0 0%, #fdf1d6 100%);
    min-width: 78px;
    max-width: 100px;
    font-size: .85rem;
    text-decoration: none;
    color: var(--mau-chu);
    box-shadow: 0 2px 6px rgba(90,50,20,.12);
    position: relative;
}
.tree-node::before {
    content: '\2740';
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    color: var(--mau-vang-dong);
    background: var(--mau-nen-giay-do);
    font-size: .8rem; padding: 0 2px;
}
.tree-node-ten {
    font-family: 'Cormorant Garamond', 'Noto Serif', serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
}
.tree-node:hover {
    background: linear-gradient(180deg, #fff, #fbe7b8);
    color: var(--mau-do-son-dam);
    border-color: var(--mau-do-son);
}
.tree-node .doi-label {
    display: inline-block; font-size: .65rem; color: #fff;
    background: var(--mau-do-son); border-radius: 10px; padding: 1px 8px;
    margin-top: 2px;
}
.tree-node.nu { border-color: #a4577f; }
.tree-node.the-he-0 { border-top-color: var(--doi-0); }
.tree-node.the-he-1 { border-top-color: var(--doi-1); }
.tree-node.the-he-2 { border-top-color: var(--doi-2); }
.tree-node.the-he-3 { border-top-color: var(--doi-3); }
.tree-node.the-he-4 { border-top-color: var(--doi-4); }
.tree-node.the-he-5 { border-top-color: var(--doi-5); }

.tree-node.da-mat {
    filter: grayscale(80%);
    opacity: .8;
    background: linear-gradient(180deg, #f1f1ec, #e3e3dc);
}
.tree-node.da-mat:hover { filter: grayscale(30%); opacity: 1; }

/* ===== Form ===== */
.form-label { color: var(--mau-nau-go); font-weight: 600; }
.card.shadow-sm { border: 1px solid #e3d3ad; }

/* ===== In ấn ===== */
@media print {
    .no-print, .hoa-van-top, .navbar, footer, .alert, form.row.g-2.mb-4 { display: none !important; }
    body { background: #fff !important; }
    .tree-wrapper { border: none; box-shadow: none; overflow: visible; padding: 0; }
    .tree-wrapper::before { display: none; }
    .container { max-width: 100% !important; width: 100% !important; }
}