/*
 * Giao diện kính mờ (glassmorphism) — lớp phủ lên tra-menh.css.
 * Gỡ bỏ: xóa dòng enqueue 'tra-menh-glass' trong functions.php là về giao diện phẳng.
 *
 * Bộ màu: bảng màu gốc của site (bản mẫu pt/cong-cu-tra-menh.html) — nền kem, nhấn đỏ son #9E2A1C,
 * vệt vàng đất / xanh ngọc / hồng. Token --tm-* giữ nguyên như tra-menh.css (chữ tối trên nền sáng).
 * ĐỔI BỘ MÀU: chỉ sửa khối :root và các vệt trong body::before; phần dưới không chứa mã màu riêng.
 *   Muốn trầm hơn một chút: --glass-base: #E2D3BF.
 *
 * Kiểu kính (giữ nguyên với mọi bộ màu):
 * - Tấm kính = nền trong mờ + vệt phản chiếu chéo (--glass-sheen) + viền sáng mảnh + mép trên sáng + bóng mềm.
 *   Chỉ lớp ngoài dùng backdrop-filter; thẻ bên trong có sheen, không blur lồng nhau.
 * - Nút = kính màu: màu nhấn ĐỀU (không chuyển sang màu nền — tránh mép phải "biến mất"), nửa trên phản chiếu,
 *   viền sáng, quầng sáng màu nhấn.
 */

:root {
	/* Đường kẻ trong mờ để hợp với kính (các token --tm-* khác giữ như tra-menh.css). */
	--tm-line: rgba(120, 80, 50, .16);
	--tm-line-strong: rgba(120, 80, 50, .28);
	--tm-good: #27594A;            /* sẫm hơn #2E6650 một chút để đạt AA trên vùng kính tối nhất */

	/* Kính. */
	--glass-base: #F6EFE6;
	--glass-bg: rgba(255, 255, 255, .5);
	--glass-bg-strong: rgba(255, 255, 255, .74);
	--glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, 0) 72%);
	--glass-card: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .32));
	--glass-card-hover: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
	--glass-border: rgba(255, 255, 255, .72);
	--glass-highlight: rgba(255, 255, 255, .9);
	--glass-shadow-color: rgba(90, 40, 20, .12);
	--glass-shadow: 0 12px 40px var(--glass-shadow-color), inset 0 1px 0 var(--glass-highlight);
	--glass-blur: blur(20px) saturate(170%);
	--glass-radius: 20px;
	--glass-gap: 16px;               /* khoảng cách tấm kính header/footer/nội dung tới mép màn hình */

	/* Màu nhấn dùng cho nút, logo, viền khi rê chuột. */
	--glass-tint: rgba(158, 42, 28, .95);         /* #9E2A1C trong mờ nhẹ */
	--glass-tint-hover: rgba(158, 42, 28, 1);
	--glass-glow: rgba(158, 42, 28, .3);
	--glass-btn-ink: #FFFFFF;
	--glass-focus: #9E2A1C;
	--glass-hover: #7A1F14;
	--glass-hover-border: rgba(158, 42, 28, .35);
	--glass-nav-hover: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45));
	--glass-nav-active: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 70%), rgba(158, 42, 28, .22);
	--glass-nav-active-border: rgba(158, 42, 28, .45);
	--glass-nav-active-glow: rgba(158, 42, 28, .3);
	--accent: #9E2A1C;               /* biến màu nhấn của GeneratePress (mặc định xanh #1e73be) → đỏ son */
	--glass-eyebrow: #9E2A1C;
	--glass-note-border: rgba(216, 169, 54, .4);
	--glass-input-bg: rgba(255, 255, 255, .72);
	--glass-option-bg: #FFFFFF;
	--glass-seg-checked: rgba(158, 42, 28, .1);
	--glass-err-bg: #F3ECE2;
	--glass-err-ink: #7A3A14;
	--glass-fallback: rgba(255, 255, 255, .94);
	--glass-fallback-strong: #FFFFFF;
}

/* Nền: vệt màu loang cố định phía sau — thứ "nhìn xuyên" qua lớp kính. */
body {
	background: var(--glass-base);
	color: var(--tm-ink);
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42vmax 42vmax at 8% 6%, rgba(158, 42, 28, .42), transparent 62%),
		radial-gradient(38vmax 38vmax at 96% 18%, rgba(216, 169, 54, .48), transparent 64%),
		radial-gradient(46vmax 46vmax at 78% 96%, rgba(46, 102, 80, .38), transparent 62%),
		radial-gradient(30vmax 30vmax at 20% 80%, rgba(217, 132, 155, .32), transparent 62%),
		var(--glass-base);
}

/* ---------- Lớp kính ngoài (có blur) ---------- */
.site-header,
.separate-containers .inside-article,
.site-footer,
.tm-hero-home .tm-box,
.tm-score,
.tm-hero {
	background: var(--glass-sheen), var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	color: var(--tm-ink);
}

/*
 * Header, khung nội dung, footer: tấm kính nổi cùng bề rộng (tối đa 1200px như container GeneratePress),
 * cách mép màn hình --glass-gap, bo góc đủ 4 phía — không tràn sát viền.
 */
.site-header,
.site-footer,
.site.grid-container {
	width: calc(100% - 2 * var(--glass-gap));
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Header dính, lơ lửng cách mép trên; kính đậm hơn để menu luôn dễ đọc. */
.site-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--glass-gap));
	z-index: 100;
	margin-top: var(--glass-gap);
	border-radius: var(--glass-radius);
	background: var(--glass-sheen), var(--glass-bg-strong);
	box-shadow: 0 10px 34px var(--glass-shadow-color), inset 0 1px 0 var(--glass-highlight);
}
.site-header .inside-header { max-width: none; padding-top: 10px; padding-bottom: 10px; }

/* Nút mở menu trên điện thoại: kính nhỏ. Menu thả xuống nằm gọn trong tấm kính header. */
.main-navigation .menu-toggle {
	background: var(--glass-card);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 8px rgba(90, 40, 20, .08);
	/* Cao bằng logo (44px) thay vì 60px mặc định của GeneratePress, để header gọn. */
	line-height: 42px;
	padding: 0 14px;
}
.main-navigation .menu-toggle:hover,
.main-navigation.toggled .menu-toggle,
.mobile-menu-control-wrapper.toggled .menu-toggle { background: var(--glass-card-hover); color: var(--tm-accent); }

/*
 * Menu điện thoại: tấm kính nổi thả xuống dưới header, phủ lên nội dung (không đẩy trang xuống),
 * kèm lớp nền mờ. Đóng khi bấm ra ngoài / Esc: assets/js/mobile-menu.js.
 * Breakpoint 1119px, khớp bộ lọc generate_mobile_menu_media_query trong functions.php (7 mục menu không vừa một hàng dưới mức này).
 */
@media (max-width: 1119px) {
	.has-inline-mobile-toggle #site-navigation,
	.has-inline-mobile-toggle #site-navigation.toggled {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 10px);
		margin: 0;
		background: transparent;
		pointer-events: none;
	}
	/* Cùng độ ưu tiên với rule trên (.has-inline-mobile-toggle + id) để thắng nó; nếu chỉ "#site-navigation.toggled"
	   thì menu mở ra vẫn không nhận chạm và cú chạm rơi xuống lớp nền mờ. */
	.has-inline-mobile-toggle #site-navigation.toggled { pointer-events: auto; }
	#site-navigation .inside-navigation { padding: 0; }
	#site-navigation.toggled .main-nav > ul {
		margin: 0;
		padding: 8px;
		/* Kính nằm trong header (đã có backdrop-filter) nên không blur được nội dung trang → nền đặc hơn. */
		background: var(--glass-sheen), rgba(255, 255, 255, .9);
		border: 1px solid var(--glass-border);
		border-radius: var(--glass-radius);
		box-shadow: 0 18px 44px rgba(90, 40, 20, .2), inset 0 1px 0 var(--glass-highlight);
		max-height: calc(100dvh - 140px - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		animation: tm-menu-in .18s ease-out;
	}
	#site-navigation.toggled .main-nav ul li a {
		padding: 12px 16px;
		line-height: 1.4;
		border-radius: 12px;
	}
	/* Hover / mục đang xem dùng chung kiểu viên kính bên dưới; ở đây chỉ bo góc vuông hơn cho mục rộng. */
	#site-navigation.toggled .main-nav ul li + li { margin-top: 2px; }

	/* Lớp nền mờ phía sau khi menu mở (header z-index 100 nằm trên lớp này). */
	body:has(#site-navigation.toggled)::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 99;
		background: rgba(60, 30, 15, .2);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		animation: tm-fade-in .18s ease-out;
	}
}
@keyframes tm-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	#site-navigation.toggled .main-nav > ul,
	body:has(#site-navigation.toggled)::after { animation: none; }
}
.main-navigation,
.main-navigation ul ul { background: transparent; }
.main-navigation ul ul,
.main-navigation.toggled .main-nav > ul {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: var(--tm-ink); }

/*
 * Mục menu: viên kính (pill). Hover = kính trong; mục đang xem = kính ánh màu nhấn, nổi hơn.
 * Selector cố ý cùng độ ưu tiên với rule inline của GeneratePress (li:not([class*="current-menu-"]):hover,
 * li[class*="current-menu-"]) để file này (nạp sau) thắng; --accent của GeneratePress cũng trỏ về màu nhấn ở :root.
 */
.main-navigation .main-nav ul li a {
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--tm-accent);
	background: var(--glass-nav-hover);
	border-color: var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px rgba(90, 40, 20, .08);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--tm-accent);
	background: var(--glass-nav-active);
	border-color: var(--glass-nav-active-border);
	box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(158, 42, 28, .12), 0 8px 22px var(--glass-nav-active-glow), 0 0 0 3px rgba(158, 42, 28, .06);
}
.main-navigation .main-nav ul li a:focus-visible { outline: 2px solid var(--glass-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav ul li a { transition: none; }
}

/* Máy tính: viên kính gọn, căn giữa theo chiều cao header (thay cho dải cao 60px của GeneratePress). */
/* Menu ngang (từ 1120px, dưới mức đó là nút ☰ — xem generate_mobile_menu_media_query). */
@media (min-width: 1120px) {
	.main-navigation .main-nav > ul { gap: 4px; align-items: center; }
	.main-navigation .main-nav > ul > li > a {
		line-height: 40px;
		padding: 0 16px;
	}
}
/* 8 mục menu: ở 1120–1279px thu hẹp lề ngang để vẫn nằm trên một hàng. */
@media (min-width: 1120px) and (max-width: 1279px) {
	.main-navigation .main-nav > ul { gap: 2px; }
	.main-navigation .main-nav > ul > li > a { padding: 0 11px; }
}
.main-title a,
.main-title a.tm-brand,
.main-title a:hover { color: var(--tm-ink); }

/* Khung nội dung: bo góc lớn, cách header. */
.separate-containers .inside-article { border-radius: var(--glass-radius); }
.separate-containers .site-main { margin-top: 28px; }

/* Link mục lục (#neo) không bị header dính che (header cao ~84px + khoảng cách trên). */
html { scroll-padding-top: calc(116px + var(--wp-admin--admin-bar--height, 0px)); }

/* Cột phụ dính chừa chỗ cho header; màn hình thấp thì không dính (tránh nút cuối cột nằm ngoài màn hình). */
.tm-aside,
.tm-tool-form { top: calc(116px + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-height: 860px) {
	.tm-aside,
	.tm-tool-form { position: static; }
}

/* Link. */
a:hover { color: var(--glass-hover); }

/* ---------- Thẻ bên trong (sheen, không blur) ---------- */
.tm-box,
.tm-related a,
.tm-related .is-pending,
.tm-table-wrap,
.tm-chips a,
.tm-facts,
.tm-empty {
	background: var(--glass-card);
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 16px rgba(90, 40, 20, .06);
	color: var(--tm-ink);
}
.tm-box { border-radius: 16px; }
.tm-related a,
.tm-related .is-pending { border-radius: 14px; }
.tm-related a { transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tm-related a:hover {
	background: var(--glass-card-hover);
	border-color: var(--glass-hover-border);
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 28px rgba(90, 40, 20, .12);
}
.tm-related .is-pending { background: rgba(255, 255, 255, .25); box-shadow: none; }
.tm-chips a { border-radius: 999px; }
.tm-chips a:hover { color: var(--tm-accent); border-color: var(--glass-hover-border); }

.tm-facts { border-radius: 16px; padding: 4px 18px; gap: 0 24px; }
.tm-note { background: rgba(255, 248, 235, .72); border: 1px solid var(--glass-note-border); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.tm-table { background: transparent; }
.tm-table thead th { background: rgba(255, 255, 255, .55); }
.tm-pts { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }

/* Trang chủ. */
.tm-hero-home .tm-box { border-radius: var(--glass-radius); background: var(--glass-sheen), var(--glass-bg-strong); }
.tm-hanh h3 a { color: var(--tm-ink); }
.tm-eyebrow { color: var(--glass-eyebrow); }

/* ---------- Ô nhập: kính ---------- */
.tm-lookup select,
.tm-tool select {
	background-color: var(--glass-input-bg);
	border: 1px solid var(--tm-line-strong);
	box-shadow: inset 0 1px 2px rgba(90, 40, 20, .06);
	color: var(--tm-ink);
	border-radius: 12px;
}
.tm-lookup select:focus,
.tm-tool select:focus {
	outline: none;
	border-color: var(--glass-hover-border);
	box-shadow: 0 0 0 3px rgba(158, 42, 28, .18);
}
.tm-lookup select option,
.tm-tool select option { background: var(--glass-option-bg); color: var(--tm-ink); }

.tm-seg label {
	background: var(--glass-input-bg);
	border: 1px solid var(--tm-line-strong);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.tm-seg label:has(input:checked) {
	background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), var(--glass-seg-checked);
	border: 1px solid var(--tm-accent);
	color: var(--tm-accent);
	box-shadow: 0 0 16px rgba(158, 42, 28, .15), inset 0 1px 0 var(--glass-highlight);
}

/* ---------- Nút: kính màu ---------- */
.tm-lookup button,
.tm-tool-form button {
	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, 0) 52%),
		var(--glass-tint);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 12px;
	color: var(--glass-btn-ink);
	font-weight: 700;
	letter-spacing: .01em;
	text-shadow: 0 1px 2px rgba(60, 10, 5, .35);
	box-shadow:
		0 8px 22px var(--glass-glow),
		inset 0 1px 0 rgba(255, 255, 255, .45),
		inset 0 -2px 6px rgba(60, 10, 5, .2);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tm-lookup button:hover,
.tm-tool-form button:hover {
	filter: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, 0) 52%),
		var(--glass-tint-hover);
	transform: translateY(-1px);
	box-shadow:
		0 12px 28px var(--glass-glow),
		inset 0 1px 0 rgba(255, 255, 255, .5),
		inset 0 -2px 6px rgba(60, 10, 5, .2);
}
.tm-lookup button:active,
.tm-tool-form button:active { transform: translateY(0); }
.tm-lookup button:focus-visible,
.tm-tool-form button:focus-visible { outline: 2px solid var(--glass-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.tm-related a,
	.tm-lookup button,
	.tm-tool-form button { transition: none; }
	.tm-related a:hover,
	.tm-lookup button:hover,
	.tm-tool-form button:hover { transform: none; }
}
.tm-err { background: var(--glass-err-bg); color: var(--glass-err-ink); }

/* Logo đồng xu: bóng đổ ấm như các nút kính. */
.tm-brand-mark { filter: drop-shadow(0 4px 10px var(--glass-glow)); }

/* Footer: tấm kính nổi, bo góc đủ 4 phía, cách nội dung phía trên và mép dưới màn hình. */
.site-footer {
	margin-top: 40px;
	margin-bottom: var(--glass-gap);
	border-radius: var(--glass-radius);
	overflow: hidden;
}
.site-footer .tm-footer-inner,
.site-footer .inside-site-info { max-width: none; }
.site-info { background: transparent; }

/* Trên điện thoại: khoảng cách mép nhỏ hơn, blur nhẹ hơn cho đỡ nặng máy. */
@media (max-width: 768px) {
	:root { --glass-blur: blur(12px) saturate(150%); --glass-radius: 16px; --glass-gap: 10px; }
	.separate-containers .site-main { margin-top: 16px; }
	.site-footer { margin-top: 24px; }
	html { scroll-padding-top: calc(90px + var(--wp-admin--admin-bar--height, 0px)); }
}

/* Không hỗ trợ backdrop-filter, hoặc người dùng muốn giảm trong suốt: nền gần như đặc. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root { --glass-bg: var(--glass-fallback); --glass-bg-strong: var(--glass-fallback-strong); --glass-tint: #9E2A1C; }
}
@media (prefers-reduced-transparency: reduce) {
	:root { --glass-bg: var(--glass-fallback); --glass-bg-strong: var(--glass-fallback-strong); --glass-tint: #9E2A1C; }
	body::before { opacity: .35; }
}