/* css/style.css - PHIÊN BẢN FINAL FIX LINES & LAYOUT */

/* --- 1. RESET & GLOBAL --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f7f6;
    color: #333;
    overflow: hidden; /* Ẩn scroll mặc định để dùng Zoom/Pan */
}
a { text-decoration: none; }

/* --- 2. HEADER & MENU (Giữ nguyên) --- */
#main-header {
    background-color: #1E8F3E; height: 60px; width: 100%;
    position: fixed; top: 0; left: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: height 0.3s ease;
}
#main-header.shrink { height: 50px; }
.header-content { display: flex; align-items: center; justify-content: center; height: 100%; }
.header-logo { height: 40px; margin-right: 15px; transition: 0.3s; }
#main-header.shrink .header-logo { height: 30px; }
.header-title { color: white; font-weight: bold; font-size: 18px; text-transform: uppercase; white-space: nowrap; }

.menu-toggle { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: white; font-size: 24px; cursor: pointer; z-index: 1002; }
#menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
#menu-overlay.active { display: block; }
#sidebar-menu { position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.3); transition: left 0.3s ease-in-out; z-index: 1001; display: flex; flex-direction: column; }
#sidebar-menu.active { left: 0; }
.menu-header { background-color: #1E8F3E; color: white; padding: 20px; position: relative; }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 30px; cursor: pointer; }
.menu-body { padding: 20px; overflow-y: auto; flex-grow: 1; }
.menu-footer { padding: 15px; background: #f4f4f4; font-size: 12px; text-align: center; border-top: 1px solid #ddd; }
.btn-menu-auth { display: block; width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 4px; text-align: center; font-weight: bold; }
.btn-login { background: #1E8F3E; color: white; }
.btn-register { border: 1px solid #1E8F3E; color: #1E8F3E; }
.btn-logout { background: #333; color: white; }

/* --- 3. KHUNG BAO PHẢ ĐỒ --- */
.main-wrapper {
    margin-top: 60px;
    height: calc(100vh - 60px);
    width: 100%;
    /* Background cố định */
    background: url('https://giapha.honguyenvietnam.org/assets/img/nen.png') no-repeat center center fixed;
    background-size: cover;
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: none; 
}
.main-wrapper:active { cursor: grabbing; }

#pan-zoom-container {
    width: 100%; height: 100%;
    /* Transform Origin ở giữa để khi zoom cây không bị lệch */
    transform-origin: 50% 0%; 
    display: flex; 
    justify-content: center; /* Căn giữa cây */
    padding-top: 50px;
    will-change: transform;
}

/* ================================================================= */
/* --- 4. CÂY PHẢ HỆ (CỐT LÕI: FLEXBOX & LIỀN MẠCH LINE) --- */
/* ================================================================= */

/* Tổng thể cây */
.genealogy-tree {
    display: flex;
    justify-content: center;
}

.genealogy-tree ul {
    padding-top: 20px; 
    position: relative;
    display: flex;            /* Flexbox giúp dàn đều con cái */
    justify-content: center;  /* Căn giữa các con so với cha */
}

.genealogy-tree li {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 10px 0 10px; /* Khoảng cách giữa các nhánh */
}

/* --- XỬ LÝ ĐƯỜNG KẺ (LINE) --- */

/* 1. Đường ngang kết nối các anh em */
.genealogy-tree li::before, .genealogy-tree li::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 50%;
    width: 50%; 
    height: 20px;
    border-top: 2px solid #333; /* Đường ngang đậm */
}

/* 2. Đường dọc từ giữa nhánh xuống Card */
.genealogy-tree li::after {
    right: auto; 
    left: 50%;
    border-left: 2px solid #333; /* Đường dọc đậm */
}

/* 3. Xử lý trường hợp: Con một (chỉ có 1 mình) */
.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
    display: none;
}
.genealogy-tree li:only-child { 
    padding-top: 0;
}

/* 4. Xử lý con đầu và con út (Xóa nét thừa) */
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after {
    border: 0 none;
}

/* 5. Bo góc đường nối cho liền mạch (Quan trọng để không bị đứt) */
/* Con út: Có nét từ trái sang, bẻ góc xuống */
.genealogy-tree li:last-child::before {
    border-right: 2px solid #333;
    border-radius: 0 5px 0 0;
}
/* Con đầu: Có nét từ phải sang, bẻ góc xuống */
.genealogy-tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* 6. Đường dọc từ Card Cha xuống Nhóm Con (Vertical Connector UP) */
.genealogy-tree ul ul::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    border-left: 2px solid #333; 
    width: 0; 
    height: 20px;
}

/* Nút thu gọn nhánh */
.btn-toggle-node {
    width: 20px; height: 20px; background: #fff; border: 1px solid #333;
    border-radius: 50%; position: absolute; bottom: -10px; left: 50%;
    transform: translateX(-50%); z-index: 10; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; color: #333;
}
.btn-toggle-node:hover { background: #1E8F3E; color: white; border-color: #1E8F3E; }

/* Ẩn nhánh */
.genealogy-tree li.collapsed ul { display: none; }

/* --- 5. CARD THÀNH VIÊN --- */
.member-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px; background: #fff; border: 1px solid #ccc;
    border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 160px; max-width: 220px;
    position: relative; z-index: 2; cursor: pointer;
}
.member-card:hover { border-color: #1E8F3E; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transform: translateY(-3px); }

.avatar-group { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; }
.avatar-img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2px solid #1E8F3E; background: #eee;
}
.avatar-spouse-main { width: 50px; height: 50px; border-color: #e91e63; }

.member-info { text-align: center; width: 100%; }
.husband-name { font-weight: bold; color: #333; font-size: 14px; text-transform: uppercase; margin-bottom: 2px; }
.spouse-list { margin-top: 4px; border-top: 1px dashed #ddd; padding-top: 2px; }
.wife-name { font-size: 12px; color: #e91e63; font-style: italic; display: block; }

/* --- 6. POPUP INFO --- */
.overlay-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 2000; }
.overlay-bg.active { display: block; }
.info-popup {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; width: 450px; max-width: 95%; max-height: 90vh;
    overflow-y: auto; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2001; border-radius: 10px; border-top: 5px solid #1E8F3E;
}
.info-popup.active { display: block; }

.zoom-controls { position: fixed; bottom: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; gap: 5px; }
.zoom-btn { width: 40px; height: 40px; background: #fff; border: 1px solid #ccc; font-size: 20px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.zoom-btn:hover { background: #1E8F3E; color: white; }

.form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.form-group { flex: 1; margin-bottom: 10px; }
.form-group label { display: block; font-weight: bold; font-size: 13px; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }