/* =============================================================================
   NỀN CHUNG — giấy gia phả
   -----------------------------------------------------------------------------
   Màu, nút bấm, ô nhập, thẻ hộp, thanh báo. Dùng chung cho cả trong wp-admin
   và ngoài site, để bốn phần nhìn như một tài liệu duy nhất.
   Mọi lớp đều mang tiền tố .gp- nên không đụng vào CSS của Flatsome.
   ============================================================================ */

.gp-wrap,
.gp-ngoai {
	--gp-giay:      #f3ecd2;
	--gp-giay-dam:  #e7ddb9;
	--gp-the:       #f7d774;
	--gp-the-vien:  #a9701a;
	--gp-dau-re:    #e6e2d8;
	--gp-dau-vien:  #a8a293;
	--gp-son:       #8b0000;
	--gp-son-dam:   #6d0000;
	--gp-son-nhat:  #b03a2e;
	--gp-muc:       #3b2412;
	--gp-muc-nhat:  #7a5c3a;
	--gp-trang:     #fffdf6;
	--gp-vang:      #c9a227;
	--gp-vien:      #ded3ae;
	--gp-canh-bao:  #d69410;
	--gp-nen-canh:  #fff8e5;
	--gp-r: 8px;
	--gp-bong: 0 1px 3px rgba(59, 36, 18, .18);

	color: var(--gp-muc);
	font-size: 14px;
	line-height: 1.5;
}

.gp-wrap *,
.gp-ngoai * { box-sizing: border-box; }

.gp-wrap h1, .gp-wrap h2, .gp-wrap h3, .gp-wrap h4,
.gp-ngoai h1, .gp-ngoai h2, .gp-ngoai h3, .gp-ngoai h4 {
	font-family: Georgia, "Times New Roman", serif;
	margin: 0;
	text-wrap: balance;
}

/* Chỉ ép cỡ chữ; KHÔNG ép màu, vì nút .gp-nut phải giữ được màu son
   ngay cả khi đứng trong thanh trên nền đỏ. */
.gp-wrap button, .gp-wrap select, .gp-wrap input, .gp-wrap textarea,
.gp-ngoai button, .gp-ngoai select, .gp-ngoai input, .gp-ngoai textarea {
	font: inherit;
}
.gp-wrap select, .gp-wrap input, .gp-wrap textarea,
.gp-ngoai select, .gp-ngoai input, .gp-ngoai textarea {
	color: var(--gp-muc);
}

.gp-wrap :focus-visible,
.gp-ngoai :focus-visible { outline: 2px solid var(--gp-son); outline-offset: 2px; }

/* Trong wp-admin, bỏ khoảng trắng thừa của khung mặc định */
.gp-wrap { margin: 12px 20px 40px 0; }

/* ---------- Thanh trên ---------- */

.gp-thanh-tren {
	background: var(--gp-son);
	color: #fff5e0;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-bottom: 3px solid var(--gp-vang);
	border-radius: 10px 10px 0 0;
}
.gp-thanh-tren h1 { font-size: 19px; color: #fff5e0; padding: 0; margin: 0; }
.gp-thanh-tren p { margin: 2px 0 0; font-size: 12px; color: #f0d9a8; }
.gp-thanh-tren .gp-nut { border-color: #f0d9a8; }
.gp-nhom-nut { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Nút ---------- */

.gp-nut {
	background: var(--gp-trang);
	border: 1px solid var(--gp-son);
	color: var(--gp-son);
	border-radius: 18px;
	padding: 6px 15px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.6;
}
.gp-nut:hover { background: #fff0e6; color: var(--gp-son); }
.gp-nut--chinh { background: var(--gp-son); color: #fff; }
.gp-nut--chinh:hover { background: #a30f0f; color: #fff; }
.gp-nut--nguy { border-color: #a03a2c; color: #a03a2c; }
.gp-nut--nguy:not([disabled]) { background: #a03a2c; color: #fff; }
.gp-nut[disabled] { opacity: .4; cursor: not-allowed; }

.gp-nut-nho {
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--gp-son); background: var(--gp-trang); color: var(--gp-son);
	font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.gp-nut-nho:hover { background: var(--gp-son); color: #fff; }

.gp-lien-ket {
	background: none; border: 0; color: var(--gp-son); text-decoration: underline;
	cursor: pointer; padding: 0; font-size: 12.5px;
}
.gp-lien-ket.gp-mo { color: #999; }

/* ---------- Hộp ---------- */

.gp-the-hop {
	background: var(--gp-trang);
	border: 1px solid var(--gp-vien);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.gp-the-hop h3 {
	font-size: 14px; color: var(--gp-son);
	border-bottom: 1px solid #eee5cd; padding-bottom: 7px; margin-bottom: 13px;
}

.gp-hop-canh-bao {
	background: var(--gp-nen-canh);
	border: 1px solid #e8c98a;
	border-left: 4px solid var(--gp-canh-bao);
	border-radius: 8px;
	padding: 13px 17px;
	margin-bottom: 14px;
}
.gp-hop-canh-bao h3 { font-size: 14.5px; color: #8a5a00; margin-bottom: 4px; }
.gp-hop-canh-bao p { margin: 0 0 8px; font-size: 12.5px; color: var(--gp-muc-nhat); }

.gp-tin {
	background: #eaf7ee; border: 1px solid #b7e0c4; border-left: 4px solid #1e7a3c;
	border-radius: 8px; padding: 10px 15px; margin: 12px 0; font-size: 13px; color: #17552b;
}

/* ---------- Ô nhập ---------- */

.gp-o { margin-bottom: 13px; }
.gp-o > label { display: block; font-weight: 600; font-size: 12.5px; color: #1d3557; margin-bottom: 4px; }
.gp-o input[type=text], .gp-o input[type=number], .gp-o input[type=tel],
.gp-o input[type=url], .gp-o input[type=email], .gp-o select, .gp-o textarea,
.gp-hang-ngay input {
	width: 100%;
	border: 1px solid #d9d2b8;
	border-radius: var(--gp-r);
	padding: 8px 10px;
	background: var(--gp-trang);
	max-width: none;
}
.gp-o textarea { resize: vertical; }

.gp-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gp-hang-ngay { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.gp-goi-y { font-size: 12px; color: var(--gp-muc-nhat); margin: 5px 0 0; line-height: 1.45; }

.gp-cong-tac {
	display: flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: 13px; margin-bottom: 12px; cursor: pointer;
}

.gp-hang-anh { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.gp-o-anh {
	width: 104px; height: 104px; border-radius: 8px; overflow: hidden;
	background: #f0cba4; border: 1px solid #d9c9a4;
	display: flex; align-items: center; justify-content: center;
	font-size: 40px; color: var(--gp-the-vien); flex: 0 0 auto;
}
.gp-o-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Bảng ---------- */

.gp-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-bang th, .gp-bang td { border-bottom: 1px solid #eee5cd; padding: 6px; text-align: left; }
.gp-bang th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--gp-muc-nhat); }
.gp-bang select, .gp-bang input {
	width: 100%; border: 1px solid #d9d2b8; border-radius: 4px; padding: 4px 6px; background: var(--gp-trang);
}

.gp-ds-con { list-style: none; padding: 0; margin: 0; }
.gp-ds-con li {
	padding: 5px 0; border-bottom: 1px dashed #eee5cd;
	display: flex; justify-content: space-between; gap: 10px;
}
.gp-ds-con span { color: var(--gp-muc-nhat); font-size: 12px; }

/* ---------- Hộp thoại ---------- */

.gp-lop-phu {
	position: fixed; inset: 0; background: rgba(40, 24, 10, .5);
	display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px;
}
.gp-lop-phu[hidden] { display: none; }

.gp-hop {
	background: var(--gp-trang); border-radius: 10px; padding: 22px;
	width: 420px; max-width: 100%; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
	max-height: 90vh; overflow: auto;
}
.gp-hop--rong { width: 760px; }
.gp-hop h3 { font-size: 17px; color: var(--gp-son); margin-bottom: 4px; }
.gp-hop > p { font-size: 12.5px; color: var(--gp-muc-nhat); margin: 0 0 14px; }
.gp-cuoi-hop { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }

.gp-canh-do { display: flex; align-items: center; gap: 8px; color: #a03a2c; font-weight: 600; font-size: 13px; }
.gp-cau-xoa {
	display: inline-block; margin-top: 3px; padding: 3px 10px;
	background: #fff0ee; border: 1px dashed #d9a89f; border-radius: 6px;
	color: #a03a2c; font-weight: 700; letter-spacing: .6px;
}
.gp-dung-cau { color: #1e7a3c !important; font-weight: 600; }

/* ---------- Ngăn kéo trượt bên phải ---------- */

.gp-ngan-keo {
	position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 100%;
	background: var(--gp-giay); z-index: 99999; display: flex; flex-direction: column;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
}
.gp-ngan-keo[hidden] { display: none; }
.gp-ngan-dau {
	display: flex; align-items: center; gap: 12px;
	background: var(--gp-giay-dam); border-bottom: 1px solid #d5c9a2; padding: 10px 16px;
}
.gp-the-tab { display: flex; flex: 1; justify-content: center; gap: 26px; }
.gp-tab {
	background: none; border: 0; border-bottom: 3px solid transparent;
	padding: 6px 4px; font-weight: 600; font-size: 13.5px; color: var(--gp-muc-nhat); cursor: pointer;
}
.gp-tab.gp-dang-chon { color: var(--gp-son); border-bottom-color: var(--gp-son); }
.gp-ngan-than { overflow: auto; padding: 16px; flex: 1; }
.gp-ngan-cuoi {
	border-top: 1px solid #d5c9a2; padding: 10px 16px;
	display: flex; justify-content: space-between; gap: 8px; align-items: center;
	background: var(--gp-giay-dam);
}

/* ---------- Bảng hồ sơ trượt ra ---------- */

.gp-ho-so {
	position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%;
	background: var(--gp-giay); box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
	display: flex; flex-direction: column; z-index: 99998;
}
.gp-ho-so[hidden] { display: none; }
.gp-ho-so-dau {
	background: var(--gp-son); color: #fff3dc; padding: 14px 18px;
	display: flex; align-items: center; gap: 12px;
}
.gp-ho-so-dau h2 { font-size: 18px; color: #fff3dc; }
.gp-ho-so-dau #gp-hs-phu { font-size: 12.5px; color: #f0d9a8; }
.gp-ho-so-dau .gp-nut { margin-left: auto; border-color: #f0d9a8; }
.gp-ho-so-than { overflow: auto; padding: 16px; flex: 1; }

.gp-bang-ho-so { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gp-bang-ho-so th {
	text-align: left; width: 42%; font-weight: 500; color: var(--gp-muc-nhat);
	padding: 5px 0; vertical-align: top;
}
.gp-bang-ho-so td { padding: 5px 0; vertical-align: top; }

.gp-khoa {
	background: #f6f2e4; border: 1px dashed #cfc4a4; border-radius: var(--gp-r);
	padding: 11px 13px; font-size: 12.5px; color: var(--gp-muc-nhat);
}
.gp-khoa b { color: var(--gp-son); }

.gp-ds { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.gp-ds li {
	padding: 5px 0; border-bottom: 1px dashed #f0e8cf;
	display: flex; justify-content: space-between; gap: 10px;
}
.gp-ds li:last-child { border-bottom: 0; }
.gp-ds a { color: var(--gp-son); text-decoration: none; }
.gp-ds a:hover { text-decoration: underline; }
.gp-ds span { color: var(--gp-muc-nhat); font-size: 12px; }

.gp-duong-pha { font-size: 13px; color: var(--gp-muc-nhat); line-height: 1.9; }
.gp-duong-pha a { color: var(--gp-son); text-decoration: none; }
.gp-duong-pha i { color: #c0b393; font-style: normal; margin: 0 6px; }

.gp-tieu-su-xem { font-size: 13.5px; line-height: 1.7; }

/* ---------- Thanh báo ---------- */

/* Thanh báo được gắn thẳng vào <body>, tức là nằm ngoài .gp-wrap nên không có
   biến màu — phải tô màu tường minh, đừng dùng var() ở đây. */
.gp-bao {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
	background: #3b2412; color: #fff6e0; padding: 11px 22px; border-radius: 22px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.5;
	z-index: 100001; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); max-width: 90vw;
}
.gp-bao[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.gp-wrap *, .gp-ngoai * { transition: none !important; }
}

@media (max-width: 860px) {
	.gp-hang, .gp-hang-ngay { grid-template-columns: 1fr; }
	.gp-wrap { margin-right: 0; }
}