body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #f8f9fa; }

/* Cây Gia Phả */
.tree { width: 100%; overflow-x: auto; padding: 20px; text-align: center; white-space: nowrap; }
.tree ul { padding-top: 20px; position: relative; transition: all 0.5s; display: flex; justify-content: center; }
.tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #999; width: 50%; height: 20px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid #999; }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #999; 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 #999; width: 0; height: 20px; }

/* Thẻ Thành Viên */
.member-card { 
    border: 1px solid #ccc; padding: 8px; border-radius: 8px; 
    min-width: 140px; display: inline-block; position: relative; z-index: 10;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); background: #fff;
}
.member-card h6 { margin: 5px 0; font-weight: bold; font-size: 14px; }
.member-card .meta { font-size: 11px; color: #555; }
.member-card.alive { border-top: 4px solid #28a745; }
.member-card.dead { border-top: 4px solid #444; background: #eee; }
.member-card.nam { background-color: #f0f8ff; border-left: 3px solid #007bff; }
.member-card.nu { background-color: #fff0f5; border-left: 3px solid #e83e8c; }

/* Ảnh đại diện */
.avatar-img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd; margin-bottom: 5px; background: #fff; }

/* Badge Chi và Nút */
.branch-badge { background: #dc3545; color: white; font-size: 10px; padding: 2px 5px; border-radius: 3px; display: block; margin-bottom: 3px; font-weight: bold;}
.action-btn { font-size: 10px; padding: 2px 6px; border-radius: 3px; text-decoration: none; color: white; margin: 0 1px; display: inline-block;}
.btn-add { background: #28a745; } .btn-edit { background: #ffc107; color: black; } .btn-del { background: #dc3545; }

/* In ấn */
@media print {
    .navbar, .btn, .card-header, .alert, form, .action-btn { display: none !important; }
    body, .card, .container { background: white; width: 100%; margin: 0; padding: 0; border: none; }
    .tree { overflow: visible; }
    .member-card { border: 1px solid #000 !important; color: #000 !important; box-shadow: none; }
    body::before { content: "GIA PHẢ DÒNG HỌ NGUYỄN VIẾT - NGUYỄN NHƯ"; font-size: 24px; font-weight: bold; text-align: center; display: block; margin-bottom: 20px; }
}
/* Hiệu ứng khi di chuột vào thẻ có link */
.hover-effect {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
}
.hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    border-color: #0d6efd !important;
    cursor: pointer;
}
/* --- BỔ SUNG VÀO CUỐI FILE css/style.css --- */

/* Định dạng cho NỮ (Class .nu) */
.member-card.nu {
    border-top: 3px solid #0d6efd !important; /* Viền trên màu Xanh Dương */
}

/* Đổi màu TÊN của Nữ thành Xanh Dương */
.member-card.nu h6 a {
    color: #0d6efd !important; 
    font-weight: bold;
}

/* (Tùy chọn) Định dạng cho NAM (Class .nam) để phân biệt */
/* Nếu bạn muốn Nam màu đỏ hoặc màu khác thì sửa ở đây, không thì giữ nguyên */
.member-card.nam {
    border-top: 3px solid #198754; /* Ví dụ: Nam chuyển sang viền Xanh Lá */
}
.member-card.nam h6 a {
    color: #198754 !important; /* Tên Nam màu Xanh Lá */
}
/* --- SỬA LỖI CUỘN TRÊN MOBILE --- */

/* 1. Tạo khung bao bên ngoài cho phép cuộn */
.tree-wrapper {
    width: 100%;
    height: 100%;
    overflow-x: auto; /* Cho phép cuộn ngang */
    overflow-y: hidden;
    white-space: nowrap; /* Không cho xuống dòng */
    -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iPhone */
    
    /* Căn giữa cây nếu cây nhỏ hơn màn hình */
    display: flex; 
    justify-content: flex-start; /* Quan trọng: Bắt đầu từ trái để không bị mất góc trái */
    padding: 20px;
    background-image: url('../images/bg-tree.png'); /* Nếu có nền thì đặt ở đây */
}

/* 2. Chỉnh lại class .tree bên trong */
.tree {
    /* Đảm bảo cây chiếm đủ không gian cần thiết */
    min-width: 100%; 
    width: max-content; /* Cây dài bao nhiêu thì khung dài bấy nhiêu */
    margin: 0 auto; /* Căn giữa cây trong vùng cuộn */
}