/* Tree CSS */
.gpth-tree {
	overflow-x: auto;
	/* Kéo ngang trong vùng cây; kéo dọc cuộn trang */
	padding-bottom: 20px;
	-webkit-overflow-scrolling: touch;
	text-align: center;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;

	/* Break out of container */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

.gpth-tree.gpth-grabbing {
	cursor: grabbing;
}


.gpth-tree ul {
	padding-top: 20px;
	padding-left: 0;
	/* Reset default padding */
	position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	display: flex;
	justify-content: center;
}

/* Specific fix for top-level UL to ensure it scrolls but stays centered */
.gpth-tree>ul {
	display: inline-flex;
	/* Top level acts as block for scroll, inline for centering? No, inline-flex is best */
	min-width: 100%;
	/* Ensure it takes full width for centering small trees */
	width: fit-content;
	/* Allow growing beyond 100% */
}

/* Reset nested ULs to be just flex */
.gpth-tree ul ul {
	display: flex;
	justify-content: center;
	width: auto;
	min-width: auto;
}

.gpth-tree li {
	/* float: left; Removed as we use flex */
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.gpth-tree li::before,
.gpth-tree li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
	height: 20px;
}

.gpth-tree li::after {
	right: auto;
	left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.gpth-tree li:only-child::after,
.gpth-tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.gpth-tree li:only-child {
	padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.gpth-tree li:first-child::before,
.gpth-tree li:last-child::after {
	border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.gpth-tree li:last-child::before {
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}

.gpth-tree li:first-child::after {
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.gpth-tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid #ccc;
	width: 0;
	height: 20px;
}

.gpth-member-card {
	border: 1px solid #ccc;
	padding: 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	background: white;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	min-width: 120px;
}

.gpth-member-card img {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	object-fit: cover;
	margin-bottom: 5px;
	border: 2px solid #eee;
}

.gpth-member-name {
	font-weight: bold;
	font-size: 14px;
	color: #333;
	margin-bottom: 3px;
	display: block;
}

.gpth-member-dates {
	font-size: 11px;
	color: #888;
	display: block;
	margin-bottom: 2px;
}

.gpth-member-spouse {
	font-size: 11px;
	color: #666;
	font-style: italic;
	border-top: 1px dashed #eee;
	margin-top: 5px;
	padding-top: 3px;
	display: block;
}

/*Hover-Section*/
.gpth-member-card:hover,
.gpth-member-card:hover+ul li .gpth-member-card {
	background: #c8e4f8;
	color: #000;
	border: 1px solid #94a0b4;
}

.gpth-member-card:hover+ul li::after,
.gpth-member-card:hover+ul li::before,
.gpth-member-card:hover+ul::before,
.gpth-member-card:hover+ul ul::before {
	border-color: #94a0b4;
}

/* Node Wrapper for Couple */
.gpth-node-wrapper {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	background: #ffffd0;
	/* Modified: Light yellow background for couple */
	padding: 10px;
	border-radius: 8px;
	position: relative;
	z-index: 10;
	border: 1px dashed #aaa;
	/* Frame around couple */
}

/* Connectors for Wrapper */
/* We need to adjust connectors to point to the wrapper instead of li?
   Actually the li pseudo-elements connect to the CENTER of the li. 
   The wrapper is centered in the li. So it works automatically IF the wrapper is centered.
*/

.gpth-spouse-card {
	background-color: #fcfcfc;
	border-style: dotted;
	padding: 5px;
	min-width: 90px;
	font-size: 10px;
}

.gpth-spouse-card img {
	width: 45px;
	/* Smaller image */
	height: 45px;
	margin-bottom: 3px;
}

.gpth-spouse-card .gpth-member-name {
	font-size: 12px;
	/* Smaller name */
}

.gpth-spouse-card .gpth-member-spouse {
	font-size: 9px;
	margin-top: 2px;
	padding-top: 2px;
}

/* Eldest Child Style (Con đầu) */
.gpth-member-card.gpth-eldest {
	background-color: #e1f5fe;
	/* Light Blue */
	border-color: #81d4fa;
}

/* Deceased Member Style */
.gpth-member-card.gpth-deceased {
	background-color: #ffebee;
	/* Light Red */
	border-color: #ffcdd2;
	/* Slightly darker red border */
}

/* Ensure spouse card also gets it if deceased */
.gpth-spouse-card.gpth-deceased {
	background-color: #ffebee;
	border-color: #ffcdd2;
	border-style: dotted;
	/* Keep dotted for spouse */
}

/* Ngoại Tộc (External Family) Style */
.gpth-member-card.gpth-ngoai-toc {
	background-color: #f1f8e9;
	/* Light Green */
	border-color: #c5e1a5;
}

/* Ensure spouse of ngoai toc also gets it if we want, but usually just main member is enough. 
   Let's add it just in case we apply it to spouse too later */
.gpth-spouse-card.gpth-ngoai-toc {
	background-color: #f1f8e9;
	border-color: #c5e1a5;
	border-style: dotted;
}

/* Highlight Root Node */
/* Target the wrapper of the first li */
.gpth-tree>ul>li>.gpth-node-wrapper {
	background: #fff8e1;
	border: 2px solid #f0c33c;
	transform: scale(1.1);
	margin-bottom: 30px;
	/* Add space below root */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gpth-tree>ul>li>.gpth-node-wrapper .gpth-member-name {
	font-size: 16px;
	color: #b71c1c;
	/* Dark red for Head */
	text-transform: uppercase;
}

/* Toggle Button */
.gpth-toggle-btn {
	position: absolute;
	bottom: -12px;
	/* Adjust to overlap connector */
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	text-align: center;
	line-height: 18px;
	font-weight: bold;
	cursor: pointer;
	font-size: 14px;
	z-index: 20;
	color: #333;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gpth-toggle-btn:hover {
	background: #f0f0f0;
	color: #000;
}


.gpth-collapsed {
	background: #e0f7fa;
	color: #006064;
}

/* Single Member Page */
.gpth-single-info-box {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #eee;
}

.gpth-single-avatar {
	flex: 0 0 200px;
}

.gpth-single-avatar img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gpth-single-details {
	flex: 1;
}

.gpth-single-details h2 {
	margin-top: 0;
	font-size: 22px;
	border-bottom: 2px solid #ddd;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.gpth-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gpth-info-list>li {
	margin-bottom: 10px;
	font-size: 16px;
	border-bottom: 1px dashed #eee;
	padding-bottom: 5px;
}

.gpth-children-list {
	margin-top: 5px;
	padding-left: 20px;
}

.gpth-children-list li {
	list-style: disc;
	margin-bottom: 5px;
	border: none;
}

@media (max-width: 600px) {
	.gpth-single-info-box {
		flex-direction: column;
	}

	.gpth-single-avatar {
		flex: 0 0 auto;
		text-align: center;
	}

	.gpth-single-avatar img {
		width: 100%;
		max-width: 200px;
		margin: 0 auto;
		display: block;
	}
}