/*!
 * components.css — CRM Xuân Hương
 * Component theo "CRM UI Foundation" §05 buttons · §06 inputs & controls · §07 feedback
 * · §08 cards, navigation & states.
 *
 * Quy tắc: mọi radius lấy từ 4 token §04. Foundation dùng vài giá trị trung gian
 * (5 · 6 · 9 · 10 · 14px) trong mẫu minh hoạ — đã quy về token gần nhất, xem báo cáo Bước 2.
 */

/* ================================================================== *
 * §05 · Buttons
 * ================================================================== */

.xh-app .xh-btn,
.xh-auth .xh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--xh-space-2);
	height: 40px;
	padding: 0 var(--xh-space-4);
	border: 1px solid transparent;
	border-radius: var(--xh-r-sm);
	font-size: 14px;
	line-height: 22px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

.xh-app .xh-btn:hover,
.xh-auth .xh-btn:hover { text-decoration: none; }

.xh-app .xh-btn:focus-visible,
.xh-auth .xh-btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--xh-focus-ring);
}

.xh-app .xh-btn[disabled],
.xh-app .xh-btn[aria-disabled="true"],
.xh-auth .xh-btn[disabled],
.xh-auth .xh-btn[aria-disabled="true"] { cursor: default; pointer-events: none; }

/* --- Primary --- */
.xh-app .xh-btn--primary,
.xh-auth .xh-btn--primary          { background: var(--xh-primary); color: var(--xh-on-dark); }
.xh-app .xh-btn--primary:hover,
.xh-auth .xh-btn--primary:hover    { background: var(--xh-primary-hover); }
.xh-app .xh-btn--primary:active,
.xh-auth .xh-btn--primary:active   { background: var(--xh-primary-active); }
.xh-app .xh-btn--primary[disabled],
.xh-app .xh-btn--primary[aria-disabled="true"],
.xh-auth .xh-btn--primary[disabled],
.xh-auth .xh-btn--primary[aria-disabled="true"] { background: var(--xh-primary-disabled); color: var(--xh-on-dark); }

/* --- Secondary --- */
.xh-app .xh-btn--secondary,
.xh-auth .xh-btn--secondary        { background: var(--xh-surface); color: var(--xh-ink); border-color: var(--xh-line); }
.xh-app .xh-btn--secondary:hover,
.xh-auth .xh-btn--secondary:hover  { background: var(--xh-app-bg); border-color: var(--xh-line-strong); }
.xh-app .xh-btn--secondary:active,
.xh-auth .xh-btn--secondary:active { background: var(--xh-neutral-bg); border-color: var(--xh-line-strong); }
.xh-app .xh-btn--secondary:focus-visible,
.xh-auth .xh-btn--secondary:focus-visible { border-color: var(--xh-primary); }
.xh-app .xh-btn--secondary[disabled],
.xh-app .xh-btn--secondary[aria-disabled="true"],
.xh-auth .xh-btn--secondary[disabled],
.xh-auth .xh-btn--secondary[aria-disabled="true"] { background: var(--xh-surface-2); color: var(--xh-ink-disabled); border-color: var(--xh-line); }

/* --- Ghost --- */
.xh-app .xh-btn--ghost,
.xh-auth .xh-btn--ghost            { background: transparent; color: var(--xh-ink-2); }
.xh-app .xh-btn--ghost:hover,
.xh-auth .xh-btn--ghost:hover      { background: var(--xh-hover-soft); color: var(--xh-primary); }
.xh-app .xh-btn--ghost:active,
.xh-auth .xh-btn--ghost:active     { background: var(--xh-hover-strong); color: var(--xh-primary-hover); }
.xh-app .xh-btn--ghost:focus-visible,
.xh-auth .xh-btn--ghost:focus-visible { color: var(--xh-primary); }
.xh-app .xh-btn--ghost[disabled],
.xh-app .xh-btn--ghost[aria-disabled="true"],
.xh-auth .xh-btn--ghost[disabled],
.xh-auth .xh-btn--ghost[aria-disabled="true"] { background: transparent; color: var(--xh-ink-disabled); }

/* --- Danger --- */
.xh-app .xh-btn--danger,
.xh-auth .xh-btn--danger           { background: var(--xh-danger); color: var(--xh-on-dark); }
.xh-app .xh-btn--danger:hover,
.xh-auth .xh-btn--danger:hover     { background: var(--xh-danger-hover); }
.xh-app .xh-btn--danger:active,
.xh-auth .xh-btn--danger:active    { background: var(--xh-danger-active); }
.xh-app .xh-btn--danger:focus-visible,
.xh-auth .xh-btn--danger:focus-visible { box-shadow: var(--xh-danger-ring); }
.xh-app .xh-btn--danger[disabled],
.xh-app .xh-btn--danger[aria-disabled="true"],
.xh-auth .xh-btn--danger[disabled],
.xh-auth .xh-btn--danger[aria-disabled="true"] { background: var(--xh-danger-disabled); color: var(--xh-on-dark); }

/* --- Kích thước --- */
.xh-app .xh-btn--compact,
.xh-auth .xh-btn--compact { height: 36px; padding: 0 var(--xh-space-3); }

.xh-app .xh-btn--form,
.xh-auth .xh-btn--form    { height: 48px; font-size: 15px; width: 100%; }

.xh-app .xh-btn--icon,
.xh-auth .xh-btn--icon {
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--xh-surface);
	color: var(--xh-ink-2);
	border-color: var(--xh-line);
}
.xh-app .xh-btn--icon:hover,
.xh-auth .xh-btn--icon:hover { background: var(--xh-hover-soft); color: var(--xh-primary); }
.xh-app .xh-btn--icon:focus-visible,
.xh-auth .xh-btn--icon:focus-visible { border-color: var(--xh-primary); color: var(--xh-primary); }
.xh-app .xh-btn--icon[disabled],
.xh-app .xh-btn--icon[aria-disabled="true"],
.xh-auth .xh-btn--icon[disabled],
.xh-auth .xh-btn--icon[aria-disabled="true"] { background: var(--xh-surface); color: var(--xh-ink-disabled); }

/* --- Loading --- */
@keyframes xh-spin { to { transform: rotate(360deg); } }

.xh-app .xh-btn.is-loading,
.xh-auth .xh-btn.is-loading { opacity: .75; pointer-events: none; }

.xh-app .xh-spinner,
.xh-auth .xh-spinner {
	width: 15px;
	height: 15px;
	flex: none;
	border-radius: var(--xh-r-pill);
	border: 2px solid var(--xh-spinner-track);
	border-top-color: var(--xh-on-dark);
	animation: xh-spin .7s linear infinite;
}

.xh-app .xh-btn--secondary .xh-spinner,
.xh-app .xh-btn--ghost .xh-spinner,
.xh-auth .xh-btn--secondary .xh-spinner,
.xh-auth .xh-btn--ghost .xh-spinner {
	border-color: var(--xh-line-strong);
	border-top-color: var(--xh-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
	.xh-app .xh-spinner,
	.xh-auth .xh-spinner { animation: none; border-top-color: currentColor; }
}

/* --- Mục tiêu chạm 44px trên mobile (Foundation §05) --- */
@media (max-width: 767px) {
	.xh-app .xh-btn,
	.xh-auth .xh-btn { min-height: 44px; }

	.xh-app .xh-btn--icon,
	.xh-auth .xh-btn--icon { width: 44px; height: 44px; }
}

/* ================================================================== *
 * §06 · Inputs & controls
 * ================================================================== */

.xh-app .xh-field,
.xh-auth .xh-field { display: flex; flex-direction: column; gap: var(--xh-space-2); }

.xh-app .xh-label,
.xh-auth .xh-label { font-size: 13px; line-height: 18px; color: var(--xh-ink-2); }

.xh-app .xh-input-wrap,
.xh-auth .xh-input-wrap { position: relative; display: block; }

.xh-app .xh-input,
.xh-auth .xh-input {
	display: flex;
	align-items: center;
	width: 100%;
	height: 46px;
	padding: 0 var(--xh-space-4);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface);
	font-size: 14px;
	color: var(--xh-ink);
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Placeholder dùng --xh-ink-muted, KHÔNG dùng --xh-ink-disabled.
 * WCAG miễn trừ tương phản cho phần tử đang bị vô hiệu hoá, nhưng placeholder
 * nằm trong ô nhập ĐANG hoạt động — nó là chữ thật, phải đọc được. Màu
 * --xh-ink-disabled (#B4C0D4) chỉ đạt 1,84:1, quá thấp. */
.xh-app .xh-input::placeholder,
.xh-auth .xh-input::placeholder { color: var(--xh-ink-muted); }

.xh-app .xh-input:focus,
.xh-app .xh-input:focus-visible,
.xh-auth .xh-input:focus,
.xh-auth .xh-input:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 0;
	border-color: var(--xh-primary);
	box-shadow: var(--xh-focus-ring);
}

.xh-app .xh-input[disabled],
.xh-app .xh-input[readonly],
.xh-auth .xh-input[disabled],
.xh-auth .xh-input[readonly] { background: var(--xh-surface-2); color: var(--xh-ink-disabled); cursor: default; }

/* Ô có icon dẫn / icon đuôi */
.xh-app .xh-input--lead,
.xh-auth .xh-input--lead  { padding-left: var(--xh-space-10); }

.xh-app .xh-input--trail,
.xh-auth .xh-input--trail { padding-right: 44px; }

.xh-app .xh-input__lead,
.xh-auth .xh-input__lead {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--xh-ink-muted);
	pointer-events: none;
}

.xh-app .xh-input__trail,
.xh-auth .xh-input__trail {
	position: absolute;
	right: var(--xh-space-3);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--xh-r-sm);
	color: var(--xh-ink-3);
	background: none;
	border: 0;
	cursor: pointer;
}

.xh-app .xh-input__trail:hover,
.xh-auth .xh-input__trail:hover { color: var(--xh-primary); background: var(--xh-hover-soft); }

/* Trạng thái lỗi */
.xh-app .xh-input.is-error,
.xh-app .xh-input[aria-invalid="true"],
.xh-auth .xh-input.is-error,
.xh-auth .xh-input[aria-invalid="true"] { border-color: var(--xh-danger-line-2); }

.xh-app .xh-input.is-error:focus,
.xh-app .xh-input[aria-invalid="true"]:focus,
.xh-auth .xh-input.is-error:focus,
.xh-auth .xh-input[aria-invalid="true"]:focus {
	border-color: var(--xh-danger);
	box-shadow: var(--xh-danger-ring);
}

.xh-app .xh-help,
.xh-auth .xh-help { font-size: 12px; line-height: 18px; color: var(--xh-ink-muted); }

.xh-app .xh-help--error,
.xh-auth .xh-help--error { color: var(--xh-danger-ink); }

/* Ô tìm kiếm — thấp hơn, nền phụ */
.xh-app .xh-input--search,
.xh-auth .xh-input--search {
	height: 38px;
	padding-left: 38px;
	background: var(--xh-surface-2);
	font-size: 13px;
}

/* Select native — không dùng thư viện ngoài */
.xh-app .xh-select,
.xh-auth .xh-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: none;
	cursor: pointer;
}

/* --- Checkbox --- */
.xh-app .xh-check,
.xh-auth .xh-check {
	display: inline-flex;
	align-items: center;
	gap: var(--xh-space-2);
	font-size: 13.5px;
	color: var(--xh-ink-2);
	cursor: pointer;
}

.xh-app .xh-check__box,
.xh-auth .xh-check__box {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--xh-line-strong);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface);
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.xh-app .xh-check__box:checked,
.xh-auth .xh-check__box:checked { background: var(--xh-primary); border-color: var(--xh-primary); }

/* Dấu tick vẽ bằng border — không phụ thuộc font hay thư viện icon. */
.xh-app .xh-check__box:checked::after,
.xh-auth .xh-check__box:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--xh-on-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.xh-app .xh-check__box:focus-visible,
.xh-auth .xh-check__box:focus-visible { border-color: var(--xh-primary); box-shadow: var(--xh-focus-ring); }

.xh-app .xh-check__box[disabled],
.xh-auth .xh-check__box[disabled] { background: var(--xh-app-bg); border-color: var(--xh-line-strong); cursor: default; }

.xh-app .xh-check:has(.xh-check__box[disabled]),
.xh-auth .xh-check:has(.xh-check__box[disabled]) { opacity: .45; cursor: default; }

/* --- Badge / status --- */
.xh-app .xh-badge,
.xh-auth .xh-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--xh-space-1);
	padding: 3px 10px;
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-pill);
	background: var(--xh-app-bg);
	color: var(--xh-ink-3);
	font-size: 11.5px;
	line-height: 16px;
	white-space: nowrap;
}

.xh-app .xh-badge--new,
.xh-auth .xh-badge--new       { background: var(--xh-success-bg); color: var(--xh-success-ink); border-color: var(--xh-success-line); }
.xh-app .xh-badge--limited,
.xh-auth .xh-badge--limited   { background: var(--xh-accent-soft); color: var(--xh-accent);      border-color: var(--xh-accent-line); }
.xh-app .xh-badge--soon,
.xh-auth .xh-badge--soon      { background: var(--xh-app-bg);      color: var(--xh-ink-3);       border-color: var(--xh-line); }
.xh-app .xh-badge--running,
.xh-auth .xh-badge--running   { background: var(--xh-primary-soft); color: var(--xh-primary-hover); border-color: var(--xh-primary-line); }
.xh-app .xh-badge--warning,
.xh-auth .xh-badge--warning   { background: var(--xh-warning-bg);  color: var(--xh-warning);      border-color: var(--xh-warning-line); }
.xh-app .xh-badge--error,
.xh-auth .xh-badge--error     { background: var(--xh-danger-bg);   color: var(--xh-danger-ink);   border-color: var(--xh-danger-line); }

/* --- Filter chip --- */
.xh-app .xh-chip,
.xh-auth .xh-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--xh-space-1);
	padding: 6px var(--xh-space-3);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-pill);
	background: var(--xh-surface);
	color: var(--xh-ink-3);
	font-size: 12.5px;
	line-height: 18px;
	cursor: pointer;
}

.xh-app .xh-chip[aria-pressed="true"],
.xh-app .xh-chip.is-active,
.xh-auth .xh-chip[aria-pressed="true"],
.xh-auth .xh-chip.is-active {
	background: var(--xh-primary-soft);
	color: var(--xh-primary-hover);
	border-color: var(--xh-primary-line);
}

/* --- Avatar --- */
.xh-app .xh-avatar,
.xh-auth .xh-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--xh-r-pill);
	background: var(--xh-accent);
	color: var(--xh-accent-ink);
	font-size: 13px;
	line-height: 1;
	overflow: visible;
	text-transform: uppercase;
}

.xh-app .xh-avatar--sm,
.xh-auth .xh-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

.xh-app .xh-avatar--lg,
.xh-auth .xh-avatar--lg { width: 44px; height: 44px; font-size: 15px; }

.xh-app .xh-avatar--icon,
.xh-auth .xh-avatar--icon { background: var(--xh-tile-bg); color: var(--xh-tile-ink); }

.xh-app .xh-avatar__status,
.xh-auth .xh-avatar__status {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	border-radius: var(--xh-r-pill);
	background: var(--xh-success);
	border: 2px solid var(--xh-surface);
}

/* --- Tooltip (tĩnh, CSS thuần — không thư viện popper) --- */
.xh-app .xh-tooltip,
.xh-auth .xh-tooltip {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: var(--xh-r-sm);
	background: var(--xh-sidebar);
	color: var(--xh-tooltip-ink);
	font-size: 12px;
	line-height: 18px;
}

/* ================================================================== *
 * §07 · Feedback — alert tĩnh trong nội dung (KHÔNG phải toast)
 * ================================================================== */

.xh-app .xh-alert,
.xh-auth .xh-alert {
	display: flex;
	gap: var(--xh-space-3);
	padding: 14px var(--xh-space-4);
	border: 1px solid var(--xh-info-line);
	border-radius: var(--xh-r-md);
	background: var(--xh-info-bg);
	color: var(--xh-info-ink);
}

.xh-app .xh-alert .xh-icon,
.xh-auth .xh-alert .xh-icon { width: 19px; height: 19px; margin-top: 1px; }

.xh-app .xh-alert__title,
.xh-auth .xh-alert__title { display: block; font-size: 13.5px; line-height: 20px; margin-bottom: 2px; }

.xh-app .xh-alert__body,
.xh-auth .xh-alert__body  { display: block; font-size: 12.5px; line-height: 19px; opacity: .85; }

.xh-app .xh-alert--info,
.xh-auth .xh-alert--info     { background: var(--xh-info-bg);    border-color: var(--xh-info-line);    color: var(--xh-info-ink); }
.xh-app .xh-alert--success,
.xh-auth .xh-alert--success  { background: var(--xh-success-bg); border-color: var(--xh-success-line); color: var(--xh-success-ink); }
.xh-app .xh-alert--warning,
.xh-auth .xh-alert--warning  { background: var(--xh-warning-bg); border-color: var(--xh-warning-line); color: var(--xh-warning); }
.xh-app .xh-alert--error,
.xh-auth .xh-alert--error    { background: var(--xh-danger-bg);  border-color: var(--xh-danger-line);  color: var(--xh-danger-ink); }

/* ================================================================== *
 * §08 · Cards, navigation & states
 * ================================================================== */

.xh-app .xh-card,
.xh-auth .xh-card {
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	padding: var(--xh-space-4);
}

/* --- Application card — thẻ công cụ, luôn là <a href> (X1) --- */
.xh-app .xh-app-card,
.xh-auth .xh-app-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	padding: var(--xh-space-4);
	color: inherit;
	text-decoration: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.xh-app .xh-app-card:hover,
.xh-auth .xh-app-card:hover {
	border-color: var(--xh-card-line-hover);
	box-shadow: var(--xh-sh-md);
	text-decoration: none;
}

.xh-app .xh-app-card:hover .xh-tile,
.xh-auth .xh-app-card:hover .xh-tile {
	background: var(--xh-primary-soft);
	border-color: var(--xh-tile-line-soft);
	color: var(--xh-primary);
}

.xh-app .xh-app-card:hover .xh-app-card__chevron,
.xh-auth .xh-app-card:hover .xh-app-card__chevron { color: var(--xh-primary); }

.xh-app .xh-app-card:focus-visible,
.xh-auth .xh-app-card:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 0;
	border-color: var(--xh-primary);
	box-shadow: var(--xh-focus-ring);
	border-radius: var(--xh-r-md);
}

.xh-app .xh-app-card__body,
.xh-auth .xh-app-card__body { flex: 1; min-width: 0; }

.xh-app .xh-app-card__title,
.xh-auth .xh-app-card__title {
	display: flex;
	align-items: center;
	gap: var(--xh-space-2);
	margin-bottom: 3px;
	font-size: 14.5px;
	line-height: 20px;
	color: var(--xh-ink);
}

.xh-app .xh-app-card__desc,
.xh-auth .xh-app-card__desc { display: block; font-size: 12.5px; line-height: 19px; color: var(--xh-ink-muted); }

.xh-app .xh-app-card__chevron,
.xh-auth .xh-app-card__chevron { width: 18px; height: 18px; flex: none; color: var(--xh-ink-disabled); }

/* --- Icon tile --- */
.xh-app .xh-tile,
.xh-auth .xh-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--xh-tile-line);
	border-radius: var(--xh-r-sm);
	background: var(--xh-tile-bg);
	color: var(--xh-tile-ink);
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.xh-app .xh-tile .xh-icon,
.xh-auth .xh-tile .xh-icon { width: 24px; height: 24px; }

/* Ô icon nhỏ — hàng "Truy cập gần đây" trong thẻ bên. */
.xh-app .xh-tile--sm,
.xh-auth .xh-tile--sm { width: 34px; height: 34px; }

.xh-app .xh-tile--sm .xh-icon,
.xh-auth .xh-tile--sm .xh-icon { width: 19px; height: 19px; }

.xh-app .xh-tile--lg,
.xh-auth .xh-tile--lg {
	width: 52px;
	height: 52px;
	border-radius: var(--xh-r-lg);
	background: var(--xh-app-bg);
	border-color: var(--xh-line);
	color: var(--xh-ink-disabled);
}

.xh-app .xh-tile--lg .xh-icon,
.xh-auth .xh-tile--lg .xh-icon { width: 26px; height: 26px; }

/* --- Nav item (sidebar) --- */
.xh-app .xh-nav-item,
.xh-auth .xh-nav-item {
	display: flex;
	align-items: center;
	gap: var(--xh-space-3);
	padding: 9px var(--xh-space-3);
	border-radius: var(--xh-r-sm);
	color: var(--xh-sidebar-ink);
	font-size: 14px;
	line-height: 22px;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}

.xh-app .xh-nav-item .xh-icon,
.xh-auth .xh-nav-item .xh-icon { width: 21px; height: 21px; }

.xh-app .xh-nav-item:hover,
.xh-auth .xh-nav-item:hover { background: var(--xh-sidebar-hover); color: var(--xh-on-dark); text-decoration: none; }

.xh-app .xh-nav-item:focus-visible,
.xh-auth .xh-nav-item:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 2px var(--xh-sidebar-accent);
	color: var(--xh-on-dark);
}

/* Chỉ item đang mở mới mang aria-current="page" — style bám đúng thuộc tính đó,
   không dùng class riêng, để CSS không thể lệch khỏi ngữ nghĩa. */
.xh-app .xh-nav-item[aria-current="page"],
.xh-auth .xh-nav-item[aria-current="page"] {
	background: var(--xh-sidebar-active);
	color: var(--xh-on-dark);
	box-shadow: inset 2px 0 0 var(--xh-sidebar-accent);
}

.xh-app .xh-nav-item[aria-current="page"]:focus-visible,
.xh-auth .xh-nav-item[aria-current="page"]:focus-visible {
	box-shadow: inset 2px 0 0 var(--xh-sidebar-accent), 0 0 0 2px var(--xh-sidebar-accent);
}

.xh-app .xh-nav-item__meta,
.xh-auth .xh-nav-item__meta { margin-left: auto; font-size: 11px; line-height: 16px; color: var(--xh-sidebar-ink-2); }

/* --- Empty state --- */
.xh-app .xh-empty,
.xh-auth .xh-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--xh-space-3);
	padding: 28px var(--xh-space-5);
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	text-align: center;
}

.xh-app .xh-empty__title,
.xh-auth .xh-empty__title { font-size: 13.5px; line-height: 20px; color: var(--xh-ink-2); }

.xh-app .xh-empty__body,
.xh-auth .xh-empty__body  { font-size: 12.5px; line-height: 19px; color: var(--xh-ink-muted); }

/* --- Skeleton card --- */
.xh-app .xh-skeleton--tile,
.xh-auth .xh-skeleton--tile { width: 42px; height: 42px; flex: none; }

.xh-app .xh-skeleton--line,
.xh-auth .xh-skeleton--line { height: 11px; }

.xh-app .xh-skeleton--line-sm,
.xh-auth .xh-skeleton--line-sm { height: 9px; }

/* --- Menu nổi (dropdown tài khoản) --- *
 * Ngữ nghĩa là <nav><ul><li><a> (Q4/X8) — CSS không áp đặt role nào. */
.xh-app .xh-menu,
.xh-auth .xh-menu {
	padding: 6px;
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	box-shadow: var(--xh-sh-lg);
	max-width: 240px;
}

.xh-app .xh-menu__item,
.xh-auth .xh-menu__item {
	display: flex;
	align-items: center;
	gap: var(--xh-space-2);
	padding: 9px 10px;
	border-radius: var(--xh-r-sm);
	color: var(--xh-ink-2);
	font-size: 13.5px;
	line-height: 20px;
	text-decoration: none;
}

.xh-app .xh-menu__item .xh-icon,
.xh-auth .xh-menu__item .xh-icon { width: 18px; height: 18px; }

.xh-app .xh-menu__item:hover,
.xh-auth .xh-menu__item:hover { background: var(--xh-app-bg); text-decoration: none; }

.xh-app .xh-menu__item--danger,
.xh-auth .xh-menu__item--danger { color: var(--xh-danger); }

.xh-app .xh-menu__item--danger:hover,
.xh-auth .xh-menu__item--danger:hover { background: var(--xh-danger-bg); }

.xh-app .xh-menu__sep,
.xh-auth .xh-menu__sep {
	height: 1px;
	margin: 5px 6px;
	background: var(--xh-line-soft);
	border: 0;
}

/* --- Statistic card — CHỈ dùng khi có dữ liệu thật (X7) --- */
.xh-app .xh-stat,
.xh-auth .xh-stat {
	display: flex;
	flex-direction: column;
	gap: var(--xh-space-2);
	padding: var(--xh-space-4);
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
}

.xh-app .xh-stat__label,
.xh-auth .xh-stat__label {
	display: flex;
	align-items: center;
	gap: var(--xh-space-2);
	font-size: 12.5px;
	line-height: 19px;
	color: var(--xh-ink-3);
}

.xh-app .xh-stat__label .xh-icon,
.xh-auth .xh-stat__label .xh-icon { width: 18px; height: 18px; color: var(--xh-ink-muted); }

.xh-app .xh-stat__value,
.xh-auth .xh-stat__value { font-size: 26px; line-height: 34px; letter-spacing: -0.2px; color: var(--xh-ink); }

.xh-app .xh-stat__note,
.xh-auth .xh-stat__note { font-size: 11.5px; line-height: 16px; color: var(--xh-ink-muted); }

/* ================================================================== *
 * §09 · Toast — top-center, tối đa 3 trên toàn host
 *
 * HỢP ĐỒNG ACCESSIBILITY (C4):
 * Chỉ HAI phần tử mang role/aria-live — hai .xh-toast-host__region.
 * .xh-toast KHÔNG BAO GIỜ mang role, aria-live, aria-atomic, aria-relevant.
 * Live region lồng nhau khiến NVDA/JAWS/VoiceOver đọc lặp.
 * ================================================================== */

.xh-app .xh-toast-host,
.xh-auth .xh-toast-host {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 400px;
	max-width: calc(100% - 32px);
	pointer-events: none;   /* click xuyên qua vùng trống — A22 */
}

/* Trong app shell, toast bắt đầu dưới topbar 60px + 16px = 76px (A21). */
.xh-app .xh-toast-host { top: calc(60px + 16px); }

.xh-app .xh-toast-host__region,
.xh-auth .xh-toast-host__region {
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

/* assertive luôn nằm TRÊN polite — trật tự DOM đã đúng, khai báo thêm để không thể đảo. */
.xh-app .xh-toast-host__region[data-xh-toast-region="assertive"],
.xh-auth .xh-toast-host__region[data-xh-toast-region="assertive"] { order: 0; }
.xh-app .xh-toast-host__region[data-xh-toast-region="polite"],
.xh-auth .xh-toast-host__region[data-xh-toast-region="polite"]    { order: 1; }

/* Region rỗng không được chiếm chỗ, nếu không stack có khoảng trống thừa. */
.xh-app .xh-toast-host__region:empty,
.xh-auth .xh-toast-host__region:empty { display: none; }

.xh-app .xh-toast,
.xh-auth .xh-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--xh-space-3);
	padding: var(--xh-space-3) 14px;
	overflow: hidden;
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	background: var(--xh-surface);
	box-shadow: var(--xh-sh-toast);
	pointer-events: auto;   /* chỉ từng toast nhận chuột */
	opacity: 1;
	transform: translateY(0);
	transition: opacity .18s cubic-bezier(.2, .8, .2, 1), transform .18s cubic-bezier(.2, .8, .2, 1);
}

.xh-app .xh-toast.is-entering,
.xh-auth .xh-toast.is-entering { opacity: 0; transform: translateY(-8px); }

.xh-app .xh-toast.is-leaving,
.xh-auth .xh-toast.is-leaving {
	opacity: 0;
	transform: translateY(-6px);
	transition-duration: .14s;
	transition-timing-function: ease-in;
}

.xh-app .xh-toast > .xh-icon,
.xh-auth .xh-toast > .xh-icon { margin-top: 1px; }

.xh-app .xh-toast__body,
.xh-auth .xh-toast__body { flex: 1; min-width: 0; }

.xh-app .xh-toast__title,
.xh-auth .xh-toast__title { display: block; margin-bottom: 2px; font-size: 13.5px; line-height: 20px; color: var(--xh-ink); }

.xh-app .xh-toast__text,
.xh-auth .xh-toast__text  { display: block; font-size: 13px; line-height: 20px; color: var(--xh-ink-2); }

.xh-app .xh-toast__action,
.xh-auth .xh-toast__action {
	flex: none;
	padding: 6px 10px;
	border: 1px solid var(--xh-primary-line-2);
	border-radius: var(--xh-r-sm);
	background: none;
	color: var(--xh-primary);
	font-size: 12.5px;
	line-height: 18px;
	cursor: pointer;
}

.xh-app .xh-toast__action:hover,
.xh-auth .xh-toast__action:hover { background: var(--xh-primary-soft); }

.xh-app .xh-toast__close,
.xh-auth .xh-toast__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: var(--xh-r-sm);
	background: none;
	color: var(--xh-ink-muted);
	cursor: pointer;
}

.xh-app .xh-toast__close:hover,
.xh-auth .xh-toast__close:hover { background: var(--xh-hover-soft); color: var(--xh-ink-2); }

.xh-app .xh-toast__close .xh-icon,
.xh-auth .xh-toast__close .xh-icon { width: 17px; height: 17px; }

/* Thanh thời gian — cùng nhịp với bộ đếm trong JS, dừng chung khi hover/focus. */
@keyframes xh-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.xh-app .xh-toast__progress,
.xh-auth .xh-toast__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	transform-origin: left center;
	background: currentColor;
	opacity: .55;
	animation-name: xh-toast-progress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.xh-app .xh-toast.is-paused .xh-toast__progress,
.xh-auth .xh-toast.is-paused .xh-toast__progress { animation-play-state: paused; }

/* Sắc thái — viền, màu icon, màu thanh thời gian. */
.xh-app .xh-toast--success,
.xh-auth .xh-toast--success { border-color: var(--xh-success-line); }
.xh-app .xh-toast--success > .xh-icon,
.xh-app .xh-toast--success .xh-toast__progress,
.xh-auth .xh-toast--success > .xh-icon,
.xh-auth .xh-toast--success .xh-toast__progress { color: var(--xh-success); }

.xh-app .xh-toast--info,
.xh-auth .xh-toast--info { border-color: var(--xh-info-line); }
.xh-app .xh-toast--info > .xh-icon,
.xh-app .xh-toast--info .xh-toast__progress,
.xh-auth .xh-toast--info > .xh-icon,
.xh-auth .xh-toast--info .xh-toast__progress { color: var(--xh-info); }

.xh-app .xh-toast--warning,
.xh-auth .xh-toast--warning { border-color: var(--xh-warning-line); }
.xh-app .xh-toast--warning > .xh-icon,
.xh-app .xh-toast--warning .xh-toast__progress,
.xh-auth .xh-toast--warning > .xh-icon,
.xh-auth .xh-toast--warning .xh-toast__progress { color: var(--xh-warning); }

.xh-app .xh-toast--error,
.xh-auth .xh-toast--error { border-color: var(--xh-danger-line); }
.xh-app .xh-toast--error > .xh-icon,
.xh-app .xh-toast--error .xh-toast__progress,
.xh-auth .xh-toast--error > .xh-icon,
.xh-auth .xh-toast--error .xh-toast__progress { color: var(--xh-danger); }

@media (max-width: 767px) {
	.xh-app .xh-toast-host,
	.xh-auth .xh-toast-host { width: auto; left: 16px; right: 16px; transform: none; max-width: none; }
	.xh-app .xh-toast-host { top: calc(56px + 16px); }
}

/* ================================================================== *
 * §10 · Confirmation modal
 * ================================================================== */

.xh-app .xh-modal,
.xh-auth .xh-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--xh-space-4);
	background: var(--xh-overlay);
	opacity: 1;
	transition: opacity .16s ease;
}

.xh-app .xh-modal.is-entering,
.xh-app .xh-modal.is-leaving,
.xh-auth .xh-modal.is-entering,
.xh-auth .xh-modal.is-leaving { opacity: 0; }

.xh-app .xh-modal__dialog,
.xh-auth .xh-modal__dialog {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px;
	border-radius: var(--xh-r-lg);
	background: var(--xh-surface);
	box-shadow: var(--xh-sh-lg);
	transform: scale(1);
	transition: transform .16s ease;
}

.xh-app .xh-modal__dialog--wide,
.xh-auth .xh-modal__dialog--wide { max-width: 560px; }

.xh-app .xh-modal.is-entering .xh-modal__dialog,
.xh-app .xh-modal.is-leaving .xh-modal__dialog,
.xh-auth .xh-modal.is-entering .xh-modal__dialog,
.xh-auth .xh-modal.is-leaving .xh-modal__dialog { transform: scale(.98); }

.xh-app .xh-modal__head,
.xh-auth .xh-modal__head { display: flex; align-items: flex-start; gap: 14px; }

.xh-app .xh-modal__icon,
.xh-auth .xh-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--xh-info-line);
	border-radius: var(--xh-r-md);
	background: var(--xh-info-bg);
	color: var(--xh-info);
}

.xh-app .xh-modal__icon .xh-icon,
.xh-auth .xh-modal__icon .xh-icon { width: 24px; height: 24px; }

.xh-app .xh-modal--warning .xh-modal__icon,
.xh-auth .xh-modal--warning .xh-modal__icon { background: var(--xh-warning-bg); border-color: var(--xh-warning-line); color: var(--xh-warning); }

.xh-app .xh-modal--destructive .xh-modal__icon,
.xh-app .xh-modal--blocking .xh-modal__icon,
.xh-auth .xh-modal--destructive .xh-modal__icon,
.xh-auth .xh-modal--blocking .xh-modal__icon { background: var(--xh-danger-bg); border-color: var(--xh-danger-line); color: var(--xh-danger); }

.xh-app .xh-modal__body,
.xh-auth .xh-modal__body { flex: 1; min-width: 0; }

.xh-app .xh-modal__title,
.xh-auth .xh-modal__title { display: block; margin-bottom: 5px; font-size: 16.5px; line-height: 24px; color: var(--xh-ink); }

.xh-app .xh-modal__text,
.xh-auth .xh-modal__text { display: block; font-size: 13.5px; line-height: 22px; color: var(--xh-ink-3); }

.xh-app .xh-modal__meta,
.xh-auth .xh-modal__meta {
	display: block;
	padding: 10px var(--xh-space-3);
	border: 1px solid var(--xh-line-soft);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface-2);
	font-size: 12.5px;
	line-height: 19px;
	color: var(--xh-ink-2);
}

.xh-app .xh-modal__close,
.xh-auth .xh-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--xh-r-sm);
	background: none;
	color: var(--xh-ink-muted);
	cursor: pointer;
}

.xh-app .xh-modal__close:hover,
.xh-auth .xh-modal__close:hover { background: var(--xh-hover-soft); color: var(--xh-ink-2); }

.xh-app .xh-modal__foot,
.xh-auth .xh-modal__foot { display: flex; gap: 10px; justify-content: flex-end; }

/* Foundation §10 mức 2 dùng nút chính màu cảnh báo, nhưng §05 không định nghĩa
   biến thể button cảnh báo. Không tự chế hex mới: lấy đúng token --xh-warning và
   dẫn xuất hover/active bằng brightness, nên vẫn chỉ có một nguồn màu. */
.xh-app .xh-modal--warning .xh-modal__foot .xh-btn--primary,
.xh-auth .xh-modal--warning .xh-modal__foot .xh-btn--primary { background: var(--xh-warning); }

.xh-app .xh-modal--warning .xh-modal__foot .xh-btn--primary:hover,
.xh-auth .xh-modal--warning .xh-modal__foot .xh-btn--primary:hover { background: var(--xh-warning); filter: brightness(.92); }

.xh-app .xh-modal--warning .xh-modal__foot .xh-btn--primary:active,
.xh-auth .xh-modal--warning .xh-modal__foot .xh-btn--primary:active { background: var(--xh-warning); filter: brightness(.85); }

.xh-app .xh-modal--warning .xh-modal__foot .xh-btn--primary[disabled],
.xh-auth .xh-modal--warning .xh-modal__foot .xh-btn--primary[disabled] { background: var(--xh-warning); opacity: .45; filter: none; }

.xh-app .xh-modal__note,
.xh-auth .xh-modal__note { font-size: 11.5px; line-height: 16px; color: var(--xh-ink-muted); }

@media (max-width: 767px) {
	.xh-app .xh-modal__foot,
	.xh-auth .xh-modal__foot { flex-direction: column-reverse; }

	.xh-app .xh-modal__foot .xh-btn,
	.xh-auth .xh-modal__foot .xh-btn { width: 100%; height: 48px; }
}

/* ================================================================== *
 * Reduced motion — hợp đồng nói "CHỈ fade", nên phải GHI ĐÈ quy tắc chặn
 * chuyển động toàn cục ở base.css (nó tắt cả fade). Độ đặc hiệu cao hơn
 * .xh-app * nên thắng bất kể thứ tự file.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

	.xh-app .xh-toast,
	.xh-auth .xh-toast {
		transform: none !important;
		transition: opacity .12s linear !important;
	}

	.xh-app .xh-toast.is-entering,
	.xh-app .xh-toast.is-leaving,
	.xh-auth .xh-toast.is-entering,
	.xh-auth .xh-toast.is-leaving { transform: none !important; }

	/* Thanh thời gian là animation liên tục — quy tắc toàn cục ép nó chạy hết
	   trong .001ms nên hiển thị sai. Ẩn hẳn thay vì hiển thị sai. */
	.xh-app .xh-toast__progress,
	.xh-auth .xh-toast__progress { display: none !important; }

	.xh-app .xh-modal,
	.xh-auth .xh-modal { transition: opacity .12s linear !important; }

	.xh-app .xh-modal__dialog,
	.xh-auth .xh-modal__dialog { transform: none !important; transition: none !important; }

	.xh-app .xh-modal.is-entering .xh-modal__dialog,
	.xh-app .xh-modal.is-leaving .xh-modal__dialog,
	.xh-auth .xh-modal.is-entering .xh-modal__dialog,
	.xh-auth .xh-modal.is-leaving .xh-modal__dialog { transform: none !important; }
}

/* ================================================================== *
 * Bảng dữ liệu · Bộ lọc · Phân trang
 *
 * Ba component này KHÔNG có trong shell vì shell không cần. Chúng có mặt
 * để chuyển các trang nghiệp vụ cũ (đang dựng bằng Tailwind + FontAwesome)
 * sang bộ khung này mà không phải thiết kế lại từng trang.
 *
 * Hợp đồng lấy từ Foundation §"omicallContract" và §"breakpointRules":
 *
 *   · Phân trang SERVER-SIDE — số trang, tổng kết quả, số dòng mỗi trang.
 *     KHÔNG cuộn vô tận. Cuộn vô tận làm mất khả năng chia sẻ đường dẫn tới
 *     đúng trang đang xem, và không nói được tổng số kết quả.
 *   · Bảng có <caption>; cột sắp xếp dùng aria-sort trên <th>.
 *   · Mọi bộ lọc có <label> THẬT gắn với control. Placeholder KHÔNG thay được
 *     label: nó biến mất ngay khi người dùng gõ, và trình đọc màn hình ở nhiều
 *     trình duyệt không đọc nó.
 *   · Nút chỉ có icon phải có aria-label mô tả cụ thể.
 *   · Dưới 768px: mỗi dòng thành một thẻ, KHÔNG co bảng lại.
 *   · Vùng chạm tối thiểu 44×44px trên tablet và mobile.
 * ================================================================== */

/* --- Vùng bọc: bảng rộng thì CHÍNH NÓ cuộn ngang, không phải cả trang --- */
.xh-app .xh-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
	background: var(--xh-surface);
	-webkit-overflow-scrolling: touch;
}

.xh-app .xh-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	line-height: 20px;
}

/* <caption> bắt buộc theo hợp đồng. Ẩn khỏi mắt được, KHÔNG ẩn khỏi trình đọc. */
.xh-app .xh-table > caption {
	padding: var(--xh-space-3) var(--xh-space-4);
	text-align: left;
	font-size: 13px;
	line-height: 19px;
	color: var(--xh-ink-3);
	caption-side: top;
}

.xh-app .xh-table th,
.xh-app .xh-table td {
	padding: 11px var(--xh-space-3);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--xh-line);
}

.xh-app .xh-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--xh-surface-2);
	font-size: 12.5px;
	line-height: 18px;
	color: var(--xh-ink-2);
	white-space: nowrap;
	border-bottom-color: var(--xh-line-strong);
}

.xh-app .xh-table tbody tr:last-child td { border-bottom: 0; }
.xh-app .xh-table tbody tr:hover { background: var(--xh-surface-2); }

/* Cột số căn phải — mắt so sánh số theo hàng đơn vị, không theo chữ đầu. */
.xh-app .xh-table .xh-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Cột sắp xếp được: bám aria-sort, không dùng class riêng --- */
.xh-app .xh-table th[aria-sort] { padding: 0; }

.xh-app .xh-table th[aria-sort] > button {
	display: flex;
	align-items: center;
	gap: var(--xh-space-1);
	width: 100%;
	min-height: 40px;
	padding: 11px var(--xh-space-3);
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.xh-app .xh-table th[aria-sort] > button:hover { color: var(--xh-primary); }
.xh-app .xh-table th[aria-sort] > button:focus-visible { outline: none; box-shadow: var(--xh-focus-ring); }

/* Mũi tên bám thẳng aria-sort ⇒ trạng thái nhìn thấy không thể lệch trạng thái ngữ nghĩa. */
.xh-app .xh-table th[aria-sort="none"] .xh-sort-icon { opacity: .35; }
.xh-app .xh-table th[aria-sort="ascending"] .xh-sort-icon { transform: rotate(180deg); color: var(--xh-primary); }
.xh-app .xh-table th[aria-sort="descending"] .xh-sort-icon { color: var(--xh-primary); }

.xh-app .xh-sort-icon { flex: none; width: 14px; height: 14px; transition: transform .12s ease; }

/* --- Bộ lọc --- */
.xh-app .xh-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--xh-space-3);
	align-items: end;
	padding: var(--xh-space-4);
	background: var(--xh-surface);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-md);
}

/* Ô hành động (Lọc / Xoá lọc) không giãn theo cột dữ liệu. */
.xh-app .xh-filters__actions {
	display: flex;
	gap: var(--xh-space-2);
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.xh-app .xh-filters__actions { grid-column: auto; }
}

.xh-app .xh-select {
	width: 100%;
	height: 40px;
	padding: 0 var(--xh-space-3);
	border: 1px solid var(--xh-line-strong);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface);
	color: var(--xh-ink);
	font: inherit;
	font-size: 14px;
}

.xh-app .xh-select:focus-visible {
	outline: none;
	border-color: var(--xh-primary);
	box-shadow: var(--xh-focus-ring);
}

/* --- Phân trang --- */
.xh-app .xh-pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--xh-space-3);
	margin-top: var(--xh-space-4);
}

.xh-app .xh-pager__info { font-size: 13px; line-height: 19px; color: var(--xh-ink-3); }
.xh-app .xh-pager__nav  { display: flex; align-items: center; gap: var(--xh-space-1); margin-left: auto; }

.xh-app .xh-pager__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--xh-space-2);
	border: 1px solid var(--xh-line);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface);
	color: var(--xh-ink-2);
	font-size: 13.5px;
	text-decoration: none;
}

.xh-app .xh-pager__item:hover { background: var(--xh-app-bg); text-decoration: none; }
.xh-app .xh-pager__item:focus-visible { outline: none; box-shadow: var(--xh-focus-ring); }

/* Trang hiện tại bám aria-current, cùng nguyên tắc với chip và nav item. */
.xh-app .xh-pager__item[aria-current="page"] {
	background: var(--xh-primary-soft);
	border-color: var(--xh-primary-line);
	color: var(--xh-primary-hover);
}

/* Đầu/cuối danh sách: <span> chứ không phải <a> — không có đích thì không phải link. */
.xh-app .xh-pager__item--off { color: var(--xh-ink-disabled); background: var(--xh-surface-2); }
.xh-app .xh-pager__gap { padding: 0 var(--xh-space-1); color: var(--xh-ink-muted); }

/* ------------------------------------------------------------------ *
 * Dưới 768px — mỗi dòng thành MỘT THẺ, không co bảng
 *
 * Foundation nói thẳng: "Mỗi cuộc gọi là một card, không co bảng". Co bảng
 * 9 cột xuống 390px thì chữ vỡ vụn và người dùng phải cuộn ngang từng ô.
 *
 * Cách làm: mỗi <td> mang data-nhan="Tên cột", CSS in nhãn đó ra bằng
 * ::before. Nhãn nằm trong THUỘC TÍNH chứ không nhân đôi trong DOM, nên
 * trình đọc màn hình không nghe tên cột hai lần.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.xh-app .xh-table-wrap { border: 0; background: none; overflow-x: visible; }
	.xh-app .xh-table thead { display: none; }

	.xh-app .xh-table,
	.xh-app .xh-table tbody,
	.xh-app .xh-table tr,
	.xh-app .xh-table td { display: block; width: auto; }

	.xh-app .xh-table tr {
		margin-bottom: var(--xh-space-3);
		padding: var(--xh-space-3);
		background: var(--xh-surface);
		border: 1px solid var(--xh-line);
		border-radius: var(--xh-r-md);
	}

	.xh-app .xh-table td {
		display: flex;
		gap: var(--xh-space-3);
		padding: 6px 0;
		border-bottom: 0;
		text-align: left;
	}

	.xh-app .xh-table td::before {
		content: attr(data-nhan);
		flex: none;
		width: 42%;
		color: var(--xh-ink-3);
		font-size: 12.5px;
	}

	.xh-app .xh-table .xh-num { text-align: left; }

	/* Vùng chạm 44px theo hợp đồng Foundation. */
	.xh-app .xh-pager__item { min-width: 44px; height: 44px; }
	.xh-app .xh-filters { grid-template-columns: 1fr; }
}