/* =============================================================================
CÂY PHẢ HỆ
-----------------------------------------------------------------------------
Khung hoa văn = người trong nội tộc. Khung xám trơn = dâu / rể.
Đường nối chỉ chạy trong nội tộc: vạch dọc luôn rơi từ tâm thẻ người mang
huyết thống (--gp-x), không rơi từ giữa cặp vợ chồng.
============================================================================ */
.gp-chu-thich {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 12.5px; color: var(--gp-muc-nhat); margin-bottom: 12px;
}
.gp-chu-thich b { color: var(--gp-son); font-size: 14px; }
.gp-cay-boc { display: grid; grid-template-columns: 132px 1fr; gap: 0; align-items: start; }
/* ---------- Thước đời bên trái ---------- */
.gp-thuoc-doi {
background: var(--gp-giay-dam);
border: 1px solid #d5c9a2;
border-radius: 10px 0 0 10px;
padding: 14px 10px;
align-self: stretch;
}
.gp-thuoc-doi h2 {
font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
color: var(--gp-muc-nhat); margin-bottom: 10px;
}
.gp-thuoc-doi .gp-goi-y { padding: 0 2px; }
.gp-moc-doi {
background: var(--gp-trang);
border: 1px solid var(--gp-vien);
border-left: 3px solid var(--gp-son);
border-radius: var(--gp-r);
padding: 7px 9px;
margin-bottom: 7px;
cursor: pointer;
width: 100%;
text-align: left;
display: block;
}
.gp-moc-doi:hover { background: #fff6e2; }
.gp-moc-doi.gp-dang-chon { background: #fdeccb; border-color: var(--gp-son); }
.gp-moc-doi b { display: block; font-size: 15px; color: var(--gp-son); font-family: Georgia, serif; }
.gp-moc-doi span { font-size: 11px; color: var(--gp-muc-nhat); font-variant-numeric: tabular-nums; }
.gp-cay-chinh { padding: 0 0 0 14px; overflow: hidden; }
/* ---------- Khung cây ---------- */
.gp-khung-cay {
background: var(--gp-trang);
border: 1px solid var(--gp-vien);
border-radius: 10px;
overflow: auto;
padding: 8px 0 20px;
max-height: 74vh;
}
.gp-cay ul {
display: flex; justify-content: center; list-style: none; margin: 0;
padding: 0; position: relative;
}
.gp-cay > ul { padding-top: 8px; }
/* --gp-x = tâm thẻ người TRONG HỌ, đo bằng JS sau mỗi lần vẽ. */
.gp-nhanh { position: relative; padding: 38px 10px 0; text-align: center; --gp-x: 50%; }
/* Ba đoạn, đo bằng JS nên luôn chạm đúng thẻ:
1. vạch dọc rơi từ cha (--gp-drop-x)
2. vạch ngang nối các con (--gp-bar-left / --gp-bar-w)
3. vạch dọc dựng lên từ từng người con (--gp-x) */
.gp-nhanh > ul::before {
content: ""; position: absolute; top: 0; left: var(--gp-drop-x, 50%);
height: 19px; border-left: 2px solid var(--gp-son-nhat);
}
.gp-nhanh > ul::after {
content: ""; position: absolute; top: 19px;
left: var(--gp-bar-left, 0); width: var(--gp-bar-w, 0);
border-top: 2px solid var(--gp-son-nhat);
}
.gp-nhanh::before {
content: ""; position: absolute; top: 19px; left: var(--gp-x);
height: 19px; border-left: 2px solid var(--gp-son-nhat);
}
.gp-cay-goc > .gp-nhanh::before { display: none; }
.gp-cap-doi { display: inline-flex; align-items: stretch; position: relative; }
.gp-cong-cu-cap { display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 40px 0 0 6px; }
.gp-them-tren { position: relative; height: 30px; }
.gp-them-tren .gp-nut-nho {
position: absolute; left: calc(var(--gp-x) - 12px); top: 0;
border-style: dashed; background: #fffaf0;
}
/* ---------- Thẻ người ---------- */
/* Vợ chồng đứng cạnh nhau phải cao bằng nhau và tên phải thẳng một hàng —
nên thẻ là một cột co giãn, còn dòng vai vế luôn chừa chỗ dù để trống. */
.gp-the { width: 126px; flex: 0 0 auto; display: flex; flex-direction: column; }
.gp-the-khung {
background: var(--gp-the);
border: 2px solid var(--gp-the-vien);
border-radius: 6px;
padding: 11px 8px 10px;
min-height: 134px;
box-shadow: var(--gp-bong);
position: relative;
cursor: pointer;
transition: transform .12s ease;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.gp-the-khung:hover { transform: translateY(-2px); }
/* Khung hoa văn: dấu hiệu người TRONG NỘI TỘC.
Bốn góc là hoạ tiết hồi văn, nền vàng chuyển sắc như giấy sắc phong. */
.gp-the--noitoc .gp-the-khung {
background-color: var(--gp-the);
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
linear-gradient(170deg, #fce9a8 0%, #f7d774 42%, #f0c552 100%);
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom, center;
background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, auto;
box-shadow: inset 0 0 0 1px #fdf0c4, var(--gp-bong);
}
/* Viền cũng 2px như thẻ nội tộc, nếu 1px thì hai thẻ lệch nhau đúng một pixel. */
.gp-the--daure .gp-the-khung {
background: var(--gp-dau-re);
border: 2px solid var(--gp-dau-vien);
border-radius: 6px;
}
.gp-the.gp-mo-sang .gp-the-khung { box-shadow: 0 0 0 3px var(--gp-son), var(--gp-bong); }
.gp-the-doi {
position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
background: var(--gp-son); color: #fff;
font-size: 10px; font-weight: 600; letter-spacing: .3px;
border-radius: 9px; padding: 1px 8px; white-space: nowrap;
}
.gp-the--daure .gp-the-doi { background: #8c8578; }
.gp-the .gp-anh {
width: 46px; height: 46px; border-radius: 50%; margin: 4px auto 6px;
background: #f0cba4; display: flex; align-items: center; justify-content: center;
font-size: 20px; color: var(--gp-the-vien); overflow: hidden;
border: 2px solid rgba(169, 112, 26, .45);
}
.gp-the .gp-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-the--daure .gp-anh { background: #d8d3c6; color: #7d786c; border-color: rgba(125, 120, 108, .4); }
.gp-vai-ve {
display: inline-block; font-size: 10px; font-weight: 700; color: var(--gp-son);
background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 1px 8px; margin-bottom: 3px;
}
/* Luôn chiếm chỗ, kể cả khi không có vai vế — đó là mấu chốt giữ tên thẳng hàng. */
.gp-chuc {
font-size: 9.5px; color: #7a4b16; text-transform: uppercase; letter-spacing: .3px;
min-height: 13px; line-height: 13px;
}
.gp-ten {
font-family: Georgia, serif; font-weight: 700; font-size: 13px; line-height: 1.25;
color: #5b1a0f; word-break: break-word;
}
.gp-ngay { font-size: 10px; color: #6b4a2a; margin-top: 3px; font-variant-numeric: tabular-nums; }
.gp-the .gp-ten { margin-top: 1px; }
.gp-da-ly-hon { font-size: 10px; color: var(--gp-son); font-style: italic; margin-top: 2px; }
.gp-dau-mat {
position: absolute; top: 7px; right: 7px; width: 9px; height: 9px;
border-radius: 50%; background: #6b6b6b; opacity: .5;
}
.gp-dau-chi {
position: absolute; top: 6px; left: 7px; font-size: 10px; color: var(--gp-son);
background: rgba(255, 255, 255, .8); border-radius: 6px; padding: 0 4px;
}
.gp-cong-cu-the { display: flex; justify-content: center; gap: 4px; margin-top: 5px; }
/* ---------- Nhắc nối nhánh lẻ ---------- */
.gp-dong-noi {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 0; border-top: 1px dashed #e8d9b0;
}
.gp-dong-noi > b { min-width: 150px; }
.gp-dong-noi select {
padding: 5px 8px; border: 1px solid #d9d2b8; border-radius: var(--gp-r);
background: var(--gp-trang); max-width: 300px;
}
/* ---------- In ---------- */
@media print {
.gp-thanh-tren, .gp-thuoc-doi, .gp-chu-thich,
.gp-cong-cu-the, .gp-cong-cu-cap, .gp-them-tren,
.gp-ngan-keo, .gp-lop-phu, #gp-vung-canh-bao { display: none !important; }
.gp-cay-boc { grid-template-columns: 1fr; }
.gp-khung-cay { max-height: none; overflow: visible; border: 0; }
}
@media (max-width: 860px) {
.gp-cay-boc { grid-template-columns: 1fr; }
.gp-thuoc-doi {
display: flex; gap: 8px; overflow-x: auto;
border-radius: 10px 10px 0 0;
}
.gp-thuoc-doi h2 { display: none; }
.gp-moc-doi { min-width: 96px; margin-bottom: 0; }
.gp-cay-chinh { padding: 12px 0 0; }
}