/*
Theme Name: Gia Pha Child
Theme URI: https://example.com/giapha
Description: Child theme cho website gia phả dòng họ — phong cách truyền thống ấm (tham khảo hovantoc.com): cam-đỏ, đào, nâu đậm, font Space Grotesk. Làm đẹp cây, danh sách thành viên, tổng quan thống kê, ẩn năm sinh người còn sống với khách.
Template: kadence
Author: HungLe
Version: 2.6.6
Text Domain: giapha-child
*/

/* ============================================================
   Bảng màu (tham khảo hovantoc.com) + font
   ============================================================ */
:root {
	--gp-primary: #ff4500;      /* cam-đỏ — nhấn chính (link, nút, active) */
	--gp-primary-d: #c50;       /* cam đậm hover */
	--gp-brown: #4a1c00;        /* nâu đậm — tiêu đề, chữ đậm */
	--gp-brown-2: #8b4000;      /* nâu vừa */
	--gp-gold: #f99c00;         /* vàng cam */
	--gp-peach: #ffdab9;        /* đào — viền/nền nhạt */
	--gp-cream: #fff9f5;        /* nền kem ấm */
	--gp-cream-2: #fffbeb;      /* kem vàng */
	--gp-teal: #00bb7f;         /* xanh ngọc — nhấn phụ / thành công */
	--gp-maroon: #510424;       /* mận đậm — nữ */
	--gp-text: #3a2415;         /* chữ thường (nâu xám) */
	--gp-muted: #9a7b66;        /* chữ mờ */
	--gp-card: #ffffff;
	--gp-line: #f0dccb;         /* viền nhạt */
	--gp-font: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

body,
.wp-site-blocks,
.entry-content,
button, input, select, textarea {
	font-family: var(--gp-font);
}
body { background: var(--gp-cream); color: var(--gp-text); }
h1, h2, h3, h4, .entry-title, .site-title {
	font-family: var(--gp-font);
	color: var(--gp-brown);
	letter-spacing: -.01em;
}
a { color: var(--gp-primary); }
a:hover { color: var(--gp-primary-d); }

/* ============================================================
   HEADER kiểu hovantoc — nền kem, tiêu đề nâu, menu cam khi active
   ============================================================ */
.site-header,
.site-header-wrap,
#masthead { background: var(--gp-card); border-bottom: 3px solid var(--gp-peach); }
.site-title, .site-title a { color: var(--gp-brown) !important; font-weight: 700; }
.header-navigation .menu > .menu-item > a,
.site-header .menu a {
	color: var(--gp-brown-2);
	font-weight: 500;
}
.header-navigation .menu > .menu-item > a:hover,
.header-navigation .menu > .current-menu-item > a,
.site-header .menu .current-menu-item > a {
	color: var(--gp-primary);
}
/* gạch chân cam cho mục đang xem */
.header-navigation .menu > .current-menu-item > a::after {
	content: ""; display: block; height: 3px; border-radius: 3px;
	background: var(--gp-primary); margin-top: 4px;
}

/* ============================================================
   Tiêu đề trang mặc định của Kadence (dải hero) — tông đào ấm
   ============================================================ */
.entry-hero,
.entry-hero-container-inner,
.entry-hero .hero-section-overlay,
.page-hero-section { background: linear-gradient(180deg, var(--gp-cream-2), var(--gp-cream)) !important; border-bottom: 1px solid var(--gp-line); }
.entry-hero .entry-title, .entry-hero h1 { color: var(--gp-brown); }
.home .entry-hero, .page-id-43 .entry-hero { display: none; } /* trang chủ có banner riêng */

/* Hero + khoảng đệm GỌN lại: Kadence mặc định min-height 200px + content cách 5rem
   khiến phải cuộn mới thấy nội dung. Thu về ~90px, thấy nội dung ngay. */
.entry-hero.page-hero-section .entry-hero-container-inner .entry-header { min-height: 0; padding: 22px 0 20px; }
.entry-hero .entry-title, .entry-hero h1 { font-size: 1.75rem; margin: 0; }
body .content-area { margin-top: 2rem; }
@media (max-width: 767px) {
	body .content-area { margin-top: 1.25rem; }
	.entry-hero.page-hero-section .entry-hero-container-inner .entry-header { padding: 16px 0 14px; }
}

/* ============================================================
   1. CÂY GIA PHẢ (plugin Genealogical Tree)
   ============================================================ */
.gt-tree .info {
	background: var(--gp-card);
	border: 1px solid var(--gp-line);
	border-top: 4px solid var(--gp-peach);
	border-radius: 12px;
	padding: 10px 14px;
	box-shadow: 0 2px 8px rgba(74, 28, 0, .08);
	transition: transform .15s ease, box-shadow .15s ease;
	min-width: 120px; text-align: center;
}
.gt-tree .ind:hover .info { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(74, 28, 0, .18); }
.gt-tree .info .name a { font-weight: 700; color: var(--gp-brown); text-decoration: none; font-size: 15px; }
.gt-tree .info .name a:hover { color: var(--gp-primary); }
.gt-tree .ind.M .info { border-top-color: var(--gp-primary); }   /* nam: cam-đỏ */
.gt-tree .ind.F .info { border-top-color: var(--gp-maroon); }    /* nữ: mận */
.gt-tree .info .gender { font-size: 11px; color: var(--gp-muted); }
.gt-tree .info .birt-deat { font-size: 12px; color: var(--gp-muted); margin-top: 2px; }
.gt-tree .info img, .gt-tree .thumb img {
	border-radius: 50%; width: 56px; height: 56px; object-fit: cover;
	border: 2px solid #fff; box-shadow: 0 1px 4px rgba(74, 28, 0, .25);
}
/* Màu viền trái theo ĐỜI — dải ấm nâu→cam→vàng→đào */
.gt-tree > .gt-style-1 > ul.childs > li > .ind .info { border-left: 4px solid var(--gp-brown); }
.gt-tree ul.childs ul.childs > li > .ind .info { border-left: 4px solid var(--gp-brown-2); }
.gt-tree ul.childs ul.childs ul.childs > li > .ind .info { border-left: 4px solid var(--gp-gold); }
.gt-tree ul.childs ul.childs ul.childs ul.childs > li > .ind .info { border-left: 4px solid var(--gp-peach); }

/* ============================================================
   1b. CÂY TƯƠNG TÁC (family-chart / d3)
   ============================================================ */
.gp-tree-wrap { position: relative; }
.gp-tree-legend {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
	font-size: 13px; color: var(--gp-muted); margin-bottom: 10px;
}
.gp-tree-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.gp-tree-legend .lg-m { background: var(--gp-primary); }
.gp-tree-legend .lg-f { background: var(--gp-maroon); }
.gp-tree-hint { margin-left: auto; font-style: italic; }

/* Thanh công cụ cây: tìm nhanh · về ông tổ · đổi hướng · toàn màn hình */
.gp-tree-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.gp-tree-search { flex: 1 1 220px; min-width: 180px; }
#gp-tree-search-input {
	width: 100%; padding: 8px 12px; border: 1px solid var(--gp-line); border-radius: 10px;
	font-family: var(--gp-font); font-size: 14px; background: var(--gp-card); color: var(--gp-text);
}
#gp-tree-search-input:focus {
	outline: none; border-color: var(--gp-primary); box-shadow: 0 0 0 3px rgba(255, 69, 0, .12);
}
.gp-btn {
	padding: 8px 14px; border: 1px solid var(--gp-line); border-radius: 10px; background: var(--gp-card);
	color: var(--gp-brown); font-family: var(--gp-font); font-weight: 500; font-size: 13px; cursor: pointer;
	white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gp-btn:hover { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }

#giapha-tree.f3 {
	width: 100%; height: min(78vh, 720px);
	background:
		radial-gradient(circle at 1px 1px, rgba(139, 64, 0, .08) 1px, transparent 0) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--gp-cream-2), var(--gp-cream));
	border: 1px solid var(--gp-line); border-radius: 18px; overflow: hidden;
	box-shadow: inset 0 2px 10px rgba(74, 28, 0, .05);
}
/* Đường nối */
#giapha-tree .link { stroke: var(--gp-peach); stroke-width: 1.6px; }

/* Thẻ người: nền trắng, viền theo giới tính */
#giapha-tree .card-inner {
	border-radius: 14px !important; background: var(--gp-card);
	box-shadow: 0 3px 10px rgba(74, 28, 0, .12); border: 1px solid var(--gp-line);
	transition: box-shadow .15s ease, transform .15s ease;
}
#giapha-tree .card:hover .card-inner { box-shadow: 0 10px 26px rgba(255, 69, 0, .2); }
#giapha-tree .card-male .card-inner { border-top: 4px solid var(--gp-primary); }
#giapha-tree .card-female .card-inner { border-top: 4px solid var(--gp-maroon); }
#giapha-tree .card-genderless .card-inner,
#giapha-tree .card-unknown .card-inner { border-top: 4px solid var(--gp-gold); }
#giapha-tree .card-main .card-inner { outline: 3px solid var(--gp-gold); outline-offset: 2px; }

/* Tên + năm sinh */
#giapha-tree .card-label,
#giapha-tree .card-inner text,
#giapha-tree .card-inner div { font-family: var(--gp-font); color: var(--gp-brown); }
#giapha-tree .card [data-text-field="birthday"] { color: var(--gp-muted); font-size: 12px; }

/* Nhãn tên dưới avatar tròn: cho HIỆN ĐỦ TÊN DÀI (xuống dòng thay vì cắt "…").
   Thư viện mặc định để nowrap + ellipsis nên tên tiếng Việt nhiều chữ bị cắt. */
#giapha-tree .card-image-circle .card-label {
	white-space: normal;             /* cho tên xuống dòng */
	overflow: visible;
	text-overflow: clip;
	max-width: 168px;                /* rộng hơn để chứa tên dài, vẫn không đè thẻ bên cạnh */
	width: max-content;
	word-break: break-word;
	line-height: 1.25;
	/* Nền sáng theo tông theme cho dễ đọc khi nhiều dòng */
	background: rgba(255, 255, 255, .96);
	color: var(--gp-brown);
	border: 1px solid var(--gp-line);
	box-shadow: 0 2px 6px rgba(74, 28, 0, .15);
}
#giapha-tree .card-image-circle .card-label > div:first-child {
	font-weight: 600;                /* tên đậm */
}
#giapha-tree .card-image-circle .card-label > div + div {
	color: var(--gp-muted); font-size: 11px;   /* năm sinh mờ, nhỏ hơn */
}

/* Ảnh tròn */
#giapha-tree .card-image-circle image,
#giapha-tree .card-image-circle img { border-radius: 50%; }

/* Màu vòng ảnh theo ĐỜI (card-depth-N do family-chart tự gắn) */
#giapha-tree .card-depth-0 .card-inner { border-left: 4px solid var(--gp-brown); }
#giapha-tree .card-depth-1 .card-inner { border-left: 4px solid var(--gp-brown-2); }
#giapha-tree .card-depth-2 .card-inner { border-left: 4px solid var(--gp-gold); }
#giapha-tree .card-depth-3 .card-inner { border-left: 4px solid var(--gp-teal); }
#giapha-tree .card-depth-4 .card-inner { border-left: 4px solid var(--gp-peach); }

/* Chế độ toàn màn hình: bung cây kín màn hình, giữ toolbar + chú thích.
   Luôn tự phủ kín viewport bằng position:fixed — bắt buộc với các trình duyệt
   KHÔNG có Fullscreen API thật (Safari iOS, webview Zalo/Facebook...); vô hại
   khi trình duyệt đã tự bung fullscreen thật ở tầng OS (giapha-tree.js). */
.gp-tree-wrap.gp-fs-on {
	position: fixed; inset: 0; z-index: 9999;
	width: 100vw; height: 100vh;
	background: var(--gp-cream); padding: 16px; overflow: auto;
}
.gp-tree-wrap.gp-fs-on #giapha-tree.f3 { height: calc(100vh - 140px); }
body.gp-fs-lock { overflow: hidden; } /* chặn cuộn trang nền khi đang giả lập toàn màn hình */

/* Bảng thông tin chi tiết (hiện khi bấm vào một người trong cây) */
.gp-person-panel {
	position: absolute; top: 64px; right: 14px; z-index: 6;
	width: min(320px, calc(100% - 28px)); max-height: calc(78vh - 90px); overflow-y: auto;
	background: var(--gp-card); color: var(--gp-text);
	border: 1px solid var(--gp-line); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(74, 28, 0, .22);
	padding: 18px; animation: gp-pp-in .18s ease;
}
@keyframes gp-pp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gp-pp-close {
	position: absolute; top: 8px; right: 10px; border: 0; background: transparent;
	font-size: 24px; line-height: 1; color: var(--gp-muted); cursor: pointer; padding: 2px 6px;
}
.gp-pp-close:hover { color: var(--gp-primary); }
.gp-pp-head { display: flex; gap: 12px; align-items: center; padding-right: 22px; }
.gp-pp-avatar {
	width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--gp-peach); flex: 0 0 auto;
}
.gp-pp-avatar-ph {
	display: flex; align-items: center; justify-content: center;
	background: var(--gp-cream-2); color: var(--gp-brown-2); font-weight: 700; font-size: 22px;
}
.gp-pp-name { margin: 0 0 2px; font-size: 17px; color: var(--gp-brown); }
.gp-pp-meta { font-size: 12px; color: var(--gp-muted); }
.gp-pp-body { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.gp-pp-rel { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
.gp-pp-rel-label { flex: 0 0 74px; color: var(--gp-muted); font-weight: 600; }
.gp-pp-people { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-pp-chip {
	border: 1px solid var(--gp-line); background: var(--gp-cream); color: var(--gp-brown);
	border-radius: 999px; padding: 2px 10px; font-size: 12px; font-family: var(--gp-font); cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gp-pp-chip:hover { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-pp-empty { color: var(--gp-muted); font-size: 13px; font-style: italic; }
.gp-pp-full {
	display: inline-block; margin-top: 14px; font-weight: 600; font-size: 13px;
	text-decoration: none; color: var(--gp-primary);
}
.gp-pp-full:hover { color: var(--gp-primary-d); text-decoration: underline; }

/* Màn hình hẹp: neo panel vào góc trên-phải MÀN HÌNH THẬT (fixed, không phải
   trong khung cây) — dễ nhìn hơn kiểu tấm dán đáy cũ, không che hết cây bên dưới.
   --gp-panel-top do giapha-tree.js đo mép dưới thực tế của header theme (đã tự
   gồm cả admin bar WP nếu có) mỗi lần mở popup — không đoán số cứng vì không rõ
   trước header có sticky hay không. */
@media ( max-width: 600px ) {
	.gp-person-panel {
		position: fixed;
		top: var(--gp-panel-top, 10px);
		right: 8px; left: auto; bottom: auto;
		width: min(300px, calc(100vw - 16px));
		max-height: calc(100vh - var(--gp-panel-top, 10px) - 10px);
	}
}

/* ============================================================
   TRANG CHI TIẾT THÀNH VIÊN (single gt-member)
   ============================================================ */
.gp-profile { max-width: 640px; }
.gp-profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.gp-profile-photo {
	width: 120px; height: 120px; border-radius: 16px; overflow: hidden; flex: 0 0 auto;
	border: 1px solid var(--gp-line); box-shadow: 0 6px 18px rgba(74, 28, 0, .12);
}
.gp-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-profile-photo-ph { display: flex; align-items: center; justify-content: center; background: var(--gp-cream-2); }
.gp-profile-photo-ph span { font-size: 54px; font-weight: 700; color: var(--gp-brown-2); }
.gp-profile-meta { font-size: 15px; color: var(--gp-muted); font-weight: 500; }
.gp-profile-facts { margin: 0 0 22px; border-top: 1px solid var(--gp-line); }
.gp-profile-fact {
	display: flex; gap: 14px; align-items: baseline; padding: 11px 2px;
	border-bottom: 1px solid var(--gp-line);
}
.gp-profile-fact dt { flex: 0 0 110px; margin: 0; color: var(--gp-muted); font-weight: 600; font-size: 14px; }
.gp-profile-fact dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--gp-text); font-size: 15px; }
.gp-profile-chip {
	display: inline-block; padding: 3px 12px; border-radius: 999px; text-decoration: none; font-size: 14px;
	background: var(--gp-cream); border: 1px solid var(--gp-line); color: var(--gp-brown);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gp-profile-chip:hover { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-profile-note { margin: 0 0 22px; color: var(--gp-text); }
.gp-profile-back { display: inline-block; font-weight: 600; color: var(--gp-primary); text-decoration: none; }
.gp-profile-back:hover { color: var(--gp-primary-d); text-decoration: underline; }

/* ============================================================
   2. TRANG CHỦ / HERO
   ============================================================ */
.gp-hero {
	background: linear-gradient(135deg, var(--gp-primary) 0%, var(--gp-brown) 100%);
	color: #fff; padding: 56px 24px; border-radius: 18px; text-align: center; margin-bottom: 28px;
	box-shadow: 0 12px 30px rgba(255, 69, 0, .18);
}
.gp-hero h1 { font-size: 2.2rem; margin: 0 0 8px; color: #fff; }
.gp-hero p { font-size: 1.1rem; opacity: .95; margin: 0; }

/* Ảnh trang chủ (Swiper) — quản lý qua Tuỳ biến > Ảnh trang chủ */
.gp-home-swiper {
	border-radius: 18px; overflow: hidden; margin-bottom: 28px;
	box-shadow: 0 12px 30px rgba(74, 28, 0, .16);
}
.gp-home-swiper .swiper-slide {
	position: relative; aspect-ratio: 16/7; background: var(--gp-cream-2);
}
.gp-home-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-swiper-caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px;
	background: linear-gradient(0deg, rgba(74, 28, 0, .78), rgba(74, 28, 0, 0));
	color: #fff; font-weight: 600; font-size: .95rem;
}
.gp-home-swiper .swiper-pagination-bullet { background: #fff; opacity: .6; }
.gp-home-swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--gp-gold); }
.gp-home-swiper .swiper-button-prev,
.gp-home-swiper .swiper-button-next { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.gp-home-swiper .swiper-button-prev:after,
.gp-home-swiper .swiper-button-next:after { font-size: 22px; }
@media (max-width: 600px) {
	.gp-home-swiper .swiper-slide { aspect-ratio: 4/3; }
	.gp-home-swiper .swiper-button-prev,
	.gp-home-swiper .swiper-button-next { display: none; } /* nhường chỗ vuốt tay trên di động */
}

.gp-quick {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 16px; margin: 24px 0;
}
.gp-quick a {
	display: block; padding: 22px 18px; background: var(--gp-card);
	border: 1px solid var(--gp-line); border-radius: 16px; text-decoration: none;
	color: var(--gp-brown); font-weight: 600; text-align: center;
	box-shadow: 0 2px 8px rgba(74, 28, 0, .06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.gp-quick a:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(255, 69, 0, .16); border-color: var(--gp-peach); }
.gp-quick .gp-ico { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ============================================================
   3. TỔNG QUAN
   ============================================================ */
.gp-welcome { text-align: center; margin: 8px 0 28px; }
.gp-welcome h2 { font-size: 1.8rem; margin: 0 0 6px; }
.gp-welcome p { color: var(--gp-muted); margin: 0; }

.gp-section-title { font-size: 1.3rem; margin: 28px 0 14px; color: var(--gp-brown); }
.gp-note {
	background: var(--gp-cream-2); border: 1px solid var(--gp-peach); border-left: 4px solid var(--gp-gold);
	border-radius: 12px; padding: 14px 18px; color: var(--gp-brown-2); margin-top: 24px;
}

/* ============================================================
   4. DANH SÁCH THÀNH VIÊN — tìm + lọc + thẻ
   ============================================================ */
.gp-filter {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
	background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 16px;
	padding: 16px; margin-bottom: 24px;
}
.gp-filter > div { flex: 0 1 auto; }
.gp-filter label { display: block; font-size: 12px; color: var(--gp-muted); margin-bottom: 4px; }
.gp-filter input[type="text"], .gp-filter select {
	padding: 9px 11px; border: 1px solid var(--gp-peach); border-radius: 10px;
	width: 100%; box-sizing: border-box; min-width: 150px; background: #fff; color: var(--gp-text);
}
.gp-filter input:focus, .gp-filter select:focus { outline: 2px solid var(--gp-primary); border-color: var(--gp-primary); }
.gp-filter button {
	padding: 10px 20px; background: var(--gp-primary); color: #fff; border: 0; border-radius: 10px;
	cursor: pointer; font-weight: 700; font-family: var(--gp-font);
}
.gp-filter button:hover { background: var(--gp-primary-d); }
.gp-filter .gp-reset { background: var(--gp-peach); color: var(--gp-brown); text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 600; }

.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.gp-card {
	background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 16px;
	padding: 16px; box-shadow: 0 2px 8px rgba(74, 28, 0, .05);
	display: flex; gap: 12px; align-items: center; transition: transform .15s, box-shadow .15s;
}
.gp-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(74, 28, 0, .12); }
.gp-card > div { min-width: 0; overflow-wrap: anywhere; }
.gp-card .gp-avatar {
	width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
	background: #eee center/cover no-repeat; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1.2rem;
}
.gp-card h3 { margin: 0 0 3px; font-size: 1rem; }
.gp-card h3 a { text-decoration: none; color: var(--gp-brown); }
.gp-card h3 a:hover { color: var(--gp-primary); }
.gp-card .gp-meta { font-size: 12px; color: var(--gp-muted); }
.gp-badge {
	display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px;
	background: var(--gp-cream-2); color: var(--gp-brown-2); border: 1px solid var(--gp-peach); margin: 0 4px 3px 0;
}
.gp-empty { padding: 24px; text-align: center; color: var(--gp-muted); }
.gp-count { color: var(--gp-muted); font-size: 13px; margin-bottom: 12px; }
.gp-pagination a { color: var(--gp-primary); }
.gp-pagination strong { color: var(--gp-brown); }

/* ============================================================
   5. THƯ VIỆN — lưới ảnh
   ============================================================ */
.gp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.gp-gallery a { display: block; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; border: 1px solid var(--gp-line); }
.gp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gp-gallery a:hover img { transform: scale(1.06); }

/* Thư viện theo album */
.gp-albums { display: flex; flex-direction: column; gap: 34px; }
.gp-album-title {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--gp-peach);
	color: var(--gp-brown); font-size: 1.35rem;
}
.gp-album-count { font-size: .8rem; font-weight: 600; color: var(--gp-muted); }
.gp-album-desc { margin: 0 0 14px; color: var(--gp-muted); }

/* ============================================================
   5b. ĐĂNG NHẬP — form /dang-nhap + nút trên menu
   ============================================================ */
.gp-login {
	max-width: 440px; margin: 12px auto 32px;
	background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 18px;
	border-top: 5px solid var(--gp-primary);
	padding: 30px 32px 26px; box-shadow: 0 10px 30px rgba(74, 28, 0, .08);
}
.gp-login-head { text-align: center; margin-bottom: 22px; }
.gp-login-head .gp-login-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 50%; font-size: 1.7rem;
	background: var(--gp-cream-2); border: 1px solid var(--gp-peach); margin-bottom: 10px;
}
.gp-login-head p { margin: 0; color: var(--gp-brown-2); font-size: .95rem; }
.gp-login form p { margin: 0 0 16px; }
.gp-login form label { display: block; font-size: 13px; font-weight: 600; color: var(--gp-brown-2); margin-bottom: 6px; }
.gp-login form input[type="text"],
.gp-login form input[type="password"] {
	width: 100%; box-sizing: border-box; padding: 11px 14px;
	border: 1px solid var(--gp-peach); border-radius: 10px;
	background: var(--gp-cream); color: var(--gp-text); font-family: var(--gp-font); font-size: 15px;
}
.gp-login form input[type="text"]:focus,
.gp-login form input[type="password"]:focus {
	outline: none; border-color: var(--gp-primary); background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 69, 0, .15);
}
.gp-login .login-remember { margin-top: -4px; }
.gp-login .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; color: var(--gp-text); margin: 0; }
.gp-login .login-remember input[type="checkbox"] { accent-color: var(--gp-primary); width: 16px; height: 16px; }
.gp-login form input[type="submit"] {
	width: 100%; padding: 13px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--gp-primary); color: #fff; font-weight: 700; font-family: var(--gp-font); font-size: 1.02rem;
	transition: background .15s, transform .1s;
}
.gp-login form input[type="submit"]:hover { background: var(--gp-primary-d); transform: translateY(-1px); }
.gp-login-links { text-align: center; margin: 16px 0 0; font-size: 14px; }
.gp-login-links a { color: var(--gp-brown-2); text-decoration: none; border-bottom: 1px dashed var(--gp-brown-2); }
.gp-login-links a:hover { color: var(--gp-primary); border-bottom-color: var(--gp-primary); }
.gp-login-note {
	margin: 18px -12px -6px; padding: 10px 14px; font-size: 13px; color: var(--gp-muted); text-align: center;
	background: var(--gp-cream-2); border: 1px dashed var(--gp-peach); border-radius: 10px;
}
.gp-login-hello { font-size: 1.05rem; text-align: center; }
.gp-login-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.gp-btn-solid, .gp-btn-line {
	display: inline-block; padding: 10px 20px; border-radius: 10px;
	font-weight: 700; text-decoration: none;
}
.gp-btn-solid { background: var(--gp-primary); color: #fff !important; }
.gp-btn-solid:hover { background: var(--gp-primary-d); }
.gp-btn-line { border: 1px solid var(--gp-peach); color: var(--gp-brown) !important; background: var(--gp-cream-2); }
.gp-btn-line:hover { border-color: var(--gp-primary); color: var(--gp-primary) !important; }

/* Thông báo trạng thái đăng nhập */
.gp-notice { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin: 0 0 16px; }
.gp-notice-err { background: #fdecea; border: 1px solid #f5c6c0; color: #9c2b1f; }
.gp-notice-ok { background: #e8f8f1; border: 1px solid #b9e8d4; color: #086b4b; }

/* Mục Đăng nhập trên menu: dạng nút tròn nổi bật; Đăng xuất: viền nhẹ */
.header-navigation .menu > .gp-menu-login > a {
	background: var(--gp-primary); color: #fff !important;
	border-radius: 999px; padding: 7px 18px !important; line-height: 1.4;
}
.header-navigation .menu > .gp-menu-login > a:hover { background: var(--gp-primary-d); }
.header-navigation .menu > .gp-menu-logout > a {
	border: 1px solid var(--gp-peach); border-radius: 999px; padding: 6px 16px !important; line-height: 1.4;
}
.header-navigation .menu > .gp-menu-login > a::after,
.header-navigation .menu > .gp-menu-logout > a::after { display: none; }

/* ============================================================
   6. RESPONSIVE (điện thoại)
   ============================================================ */
@media (max-width: 600px) {
	.gp-hero { padding: 36px 16px; }
	.gp-hero h1 { font-size: 1.6rem; }
	.gp-filter { flex-direction: column; align-items: stretch; }
	.gp-filter > div { flex: 1 1 100%; width: 100%; }
	.gp-filter input[type="text"], .gp-filter select { min-width: 0; }
	.gp-filter > div:last-child { display: flex; gap: 8px; }
	.gp-filter button, .gp-filter .gp-reset { flex: 1 1 auto; text-align: center; }
	.gt-tree .info { min-width: 96px; padding: 8px 10px; }
}