/* Giao diện trang đăng nhập + khu vực quản trị.
 * Tông màu theo Quốc huy: đỏ son #CE1126, vàng #FCD116, nâu vàng #945804 (Emblem_of_Vietnam.svg).
 *   Sáng: nền ngà, nút đỏ son, sidebar đỏ thẫm chữ trắng – nhấn vàng.
 *   Tối: nền nâu đen ấm, nút và liên kết vàng, sidebar đỏ rượu.
 * Mặc định theo hệ thống; chọn cố định bằng nút đổi giao diện (html[data-theme], xem client/theme.ts). */
:root {
	--brand: #a50e1c;
	/* màu tương tác: tab, liên kết, ô đang chọn */
	--brand-2: #b3101f;
	--primary: #ce1126;
	--on-primary: #ffffff;
	/* chữ nhấn (nâu vàng của quốc huy); --gold: điểm nhấn trên nền đỏ */
	--accent: #945804;
	--gold: #fcd116;
	/* màu cờ Tổ quốc – như nhau ở cả hai giao diện, chỉ dùng cho nút về trang chủ */
	--flag-red: #ce1126;
	--bg: #fbf7f0;
	--surface: #ffffff;
	--card-w: 400px;
	--surface-2: #fcf8f2;
	--glass: rgba(255, 255, 255, 0.84);
	--text: #241a1a;
	--muted: #6b5e5a;
	--border: #ebdfd1;
	--focus: #b3101f;
	--danger-bg: #fdecec;
	--danger-text: #9b1420;
	--danger-solid: #7f0f19;
	--info-bg: #fdf4d6;
	--info-text: #744802;
	--ok-bg: #e7f5ec;
	--ok-text: #1d6b37;
	--shadow: 0 12px 32px rgba(70, 20, 20, 0.1);
	--shadow-sm: 0 1px 2px rgba(70, 20, 20, 0.07);
	/* màn đăng nhập (một nền duy nhất) */
	--hero-bg: radial-gradient(ellipse at 22% 35%, rgba(252, 209, 22, 0.1), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(206, 17, 38, 0.05), transparent 50%), #ffffff;
	--hero-text: #241a1a;
	--hero-accent: #b3101f;
	--hero-drum: #ce1126;
	--hero-drum-alpha: 0.1;
	--hero-card-top: #ce1126;
	--hero-card-bg: rgba(255, 255, 255, 0.74);
	--hero-card-border: rgba(206, 17, 38, 0.16);
	--hero-card-shadow: 0 20px 50px rgba(70, 20, 20, 0.12);
	--hero-ctl-bg: #ffffff;
	--hero-ctl-border: #ebdfd1;
	--hero-ctl-text: #241a1a;
	--sidebar-bg: linear-gradient(180deg, #8e0c19 0%, #5e0710 100%);
	--sidebar-line: rgba(252, 209, 22, 0.18);
	--scrim: rgba(40, 8, 12, 0.5);
	/* họa tiết trống đồng chìm sau nội dung */
	--drum: #945804;
	--drum-alpha: 0.075;
	--page-bg: radial-gradient(ellipse at 88% 0%, rgba(252, 209, 22, 0.14), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(206, 17, 38, 0.07), transparent 50%), #fbf7f0;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--brand: #5a0a14;
		--brand-2: #f6cc3a;
		--primary: #f5c518;
		--on-primary: #2a1600;
		--accent: #f2c230;
		--gold: #fcd116;
		--bg: #120b0c;
		--surface: #1c1314;
		--surface-2: #231819;
		--glass: rgba(28, 19, 20, 0.84);
		--text: #f3ebe6;
		--muted: #b1a19b;
		--border: #3a2a2b;
		--focus: #f6cc3a;
		--danger-bg: #3d1417;
		--danger-text: #ffb4b4;
		--danger-solid: #e0404f;
		--info-bg: #2c2210;
		--info-text: #f6dc86;
		--ok-bg: #15301f;
		--ok-text: #a6e3bb;
		--shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
		--hero-bg: linear-gradient(155deg, #5c0a15 0%, #33060e 55%, #170409 100%);
		--hero-text: #ffffff;
		--hero-accent: #fcd116;
		--hero-drum: #fcd116;
		--hero-drum-alpha: 0.12;
		--hero-card-top: #fcd116;
		--hero-card-bg: rgba(28, 19, 20, 0.55);
		--hero-card-border: rgba(255, 255, 255, 0.14);
		--hero-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
		--hero-ctl-bg: rgba(255, 255, 255, 0.1);
		--hero-ctl-border: rgba(255, 255, 255, 0.28);
		--hero-ctl-text: #ffffff;
		--sidebar-bg: linear-gradient(180deg, #3a0a10 0%, #1a0508 100%);
		--sidebar-line: rgba(252, 209, 22, 0.14);
		--scrim: rgba(0, 0, 0, 0.6);
		--drum: #fcd116;
		--drum-alpha: 0.055;
		--page-bg: radial-gradient(ellipse at 88% 0%, rgba(252, 209, 22, 0.07), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(206, 17, 38, 0.12), transparent 50%), #120b0c;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--brand: #5a0a14;
	--brand-2: #f6cc3a;
	--primary: #f5c518;
	--on-primary: #2a1600;
	--accent: #f2c230;
	--gold: #fcd116;
	--bg: #120b0c;
	--surface: #1c1314;
	--surface-2: #231819;
	--glass: rgba(28, 19, 20, 0.84);
	--text: #f3ebe6;
	--muted: #b1a19b;
	--border: #3a2a2b;
	--focus: #f6cc3a;
	--danger-bg: #3d1417;
	--danger-text: #ffb4b4;
	--danger-solid: #e0404f;
	--info-bg: #2c2210;
	--info-text: #f6dc86;
	--ok-bg: #15301f;
	--ok-text: #a6e3bb;
	--shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--hero-bg: linear-gradient(155deg, #5c0a15 0%, #33060e 55%, #170409 100%);
	--hero-text: #ffffff;
	--hero-accent: #fcd116;
	--hero-drum: #fcd116;
	--hero-drum-alpha: 0.12;
	--hero-card-top: #fcd116;
	--hero-card-bg: rgba(28, 19, 20, 0.55);
	--hero-card-border: rgba(255, 255, 255, 0.14);
	--hero-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	--hero-ctl-bg: rgba(255, 255, 255, 0.1);
	--hero-ctl-border: rgba(255, 255, 255, 0.28);
	--hero-ctl-text: #ffffff;
	--sidebar-bg: linear-gradient(180deg, #3a0a10 0%, #1a0508 100%);
	--sidebar-line: rgba(252, 209, 22, 0.14);
	--scrim: rgba(0, 0, 0, 0.6);
	--drum: #fcd116;
	--drum-alpha: 0.055;
	--page-bg: radial-gradient(ellipse at 88% 0%, rgba(252, 209, 22, 0.07), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(206, 17, 38, 0.12), transparent 50%), #120b0c;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--brand-2); }
::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); }

/* ------------------------------------------------------------ Đăng nhập */
/* --auth-x / --auth-y: lề chung của trang – khối nhận diện bên trái và nút đổi giao diện bên phải dùng cùng một lề
   nên hai bên trang cân nhau và mép trên của hai khối thẳng hàng. */
/* --auth-inset: mép trái / phải của nội dung chính (khối tên hệ thống và thẻ đăng nhập). Logo, nút đổi giao diện
   và chân trang dùng chung mép này nên cả trang chỉ có một đường lề mỗi bên. */
.page--auth { --auth-x: 48px; --auth-y: 48px; --auth-inset: max(var(--auth-x), calc((100vw / 2.1 - var(--card-w)) / 2)); }
/* Một lưới 2 cột × 3 hàng cho cả trang: hàng 1 logo, hàng 2 khối nội dung, hàng 3 ghi chú. Hai cột đều là subgrid
   nên chiều cao mỗi hàng tính chung – khối tên hệ thống và thẻ đăng nhập nằm cùng hàng 2 và cùng căn mép trên,
   vì vậy đầu hai khối luôn thẳng nhau dù cao thấp khác nhau. Lề trên / dưới đặt ở .auth để subgrid không lệch hàng. */
.auth {
	/* hàng 1 và 3 là 1fr nên chia đều khoảng trống: logo bám mép trên, ghi chú bám mép dưới, hàng giữa nằm chính giữa */
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto 1fr;
	min-height: 100vh; padding-block: var(--auth-y);
	color: var(--hero-text);
}
.auth__brand, .auth__panel { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; }
.auth__brand { grid-column: 1; padding-inline: var(--auth-inset); }
.auth__brand > .brand-mark { grid-row: 1; align-self: start; }
.auth__intro { grid-row: 2; align-self: start; }
.auth__brand .brand-mark__org { color: var(--hero-accent); opacity: 1; }
.brand-mark { display: flex; align-items: center; gap: 14px; }
.brand-mark__logo {
	flex: none; display: block; width: 58px; height: auto; aspect-ratio: 519 / 529;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
/* Khối 2 dòng cạnh logo (mọi trang): đơn vị quản lý là dòng phụ, tên hệ thống là nhãn chính (viết hoa, đậm);
   cùng cách giãn dòng 1.35 + 3px giữa hai dòng cho dễ đọc. Bản --bar bên dưới chỉ đổi cỡ chữ. */
.brand-mark__org { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.35; margin-bottom: 3px; opacity: 0.85; }
.brand-mark__name { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.35; }
/* Bản dùng trong thanh – viết một lần, dùng cho cả sidebar (trang module) và thanh trên trang chủ: logo 42px,
   chữ nhỏ hơn, tên hệ thống dài thì cắt ở dòng thứ 2. */
.brand-mark--bar { gap: 12px; }
.brand-mark--bar .brand-mark__logo { width: 42px; }
.brand-mark--bar .brand-mark__text { min-width: 0; }
.brand-mark--bar .brand-mark__org { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark--bar .brand-mark__name {
	font-size: 13px;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.auth__headline { font-size: clamp(26px, 3vw, 38px); line-height: 1.22; font-weight: 700; margin: 0 0 16px; max-width: 18ch; text-wrap: balance; }
.auth__headline::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 18px; border-radius: 2px; background: linear-gradient(90deg, var(--primary) 0 55%, var(--gold) 55%); }
.auth__lead { margin: 0; max-width: 46ch; opacity: 0.85; }
/* Chân trang chạy suốt bề ngang nội dung: trái là phạm vi sử dụng, phải là địa chỉ / số liên hệ */
.auth__foot {
	grid-row: 3; grid-column: 1 / -1; align-self: end;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px;
	margin-inline: var(--auth-inset); padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: 13px; opacity: 0.7;
}
.auth__foot p { margin: 0; }
.auth__contact { text-align: right; }

.auth__panel { grid-column: 2; padding-inline: 16px; }
.page--auth .card { grid-row: 2; align-self: start; margin-inline: auto; }
.card {
	width: 100%; max-width: var(--card-w);
	background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
	box-shadow: var(--shadow); padding: 32px 28px;
	border-top: 3px solid var(--primary);
}
/* Trang đăng nhập: nền thẻ trong mờ để thấy mặt trống xoay phía sau, vẫn đủ đục cho chữ dễ đọc */
.page--auth .card {
	border-top-color: var(--hero-card-top); box-shadow: var(--hero-card-shadow);
	background: var(--hero-card-bg); border-color: var(--hero-card-border);
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.card h2 { margin: 0 0 4px; font-size: 22px; }
.card .sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field input {
	width: 100%; padding: 11px 12px; font: inherit; color: var(--text);
	background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.7; }
.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw button {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	border: 0; background: none; color: var(--brand-2); font: inherit; font-size: 13px; cursor: pointer; padding: 6px;
}
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 20px; font-size: 14px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 12px 16px; border: 0; border-radius: 8px;
	background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer;
	box-shadow: var(--shadow-sm); transition: filter 0.15s, background-color 0.15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn--ghost { width: auto; background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn--ghost:hover { filter: none; background: var(--surface-2); border-color: color-mix(in srgb, var(--brand-2) 45%, var(--border)); }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand-2); font: inherit; cursor: pointer; text-decoration: underline; }

.alert { border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }
.alert--error { background: var(--danger-bg); color: var(--danger-text); }
.alert--info { background: var(--info-bg); color: var(--info-text); }
.alert--ok { background: var(--ok-bg); color: var(--ok-text); }
.note { margin-top: 20px; font-size: 13px; color: var(--muted); text-align: center; }

/* Họa tiết trống đồng: SVG làm mask, tô bằng màu của chủ đề */
.drum {
	position: absolute; pointer-events: none; aspect-ratio: 1;
	background: var(--drum);
	-webkit-mask: url("drum.svg") center / contain no-repeat;
	mask: url("drum.svg") center / contain no-repeat;
}
/* Hình nền chung mọi màn hình: nền + mặt trống đồng, cố định sau nội dung */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--page-bg); }
.drum--bg {
	/* --drum-x: tâm trống theo chiều ngang – giữa vùng nội dung (bên phải sidebar) */
	width: min(94vh, 94vw, 900px); left: var(--drum-x, 50%); top: 50%; translate: -50% -50%;
	opacity: var(--drum-alpha);
}
.page--app { --drum-x: calc(50% + 130px); }
.sidebar-collapsed .page--app { --drum-x: calc(50% + 32px); }
@media (max-width: 900px) { .page--app, .sidebar-collapsed .page--app { --drum-x: 50%; } }
.page--auth .bg { background: var(--hero-bg); }
.page--auth .drum--bg {
	/* Mặt trống nằm chính giữa màn hình (--drum-x 50% + top/translate của .drum--bg) */
	--drum-x: 50%; width: min(184vh, 1725px);
	background: var(--hero-drum); opacity: var(--hero-drum-alpha);
	/* quay ngược chiều kim đồng hồ – cùng hướng chim Lạc, người, thú trên mặt trống */
	animation: drum-turn 300s linear infinite;
}
@keyframes drum-turn { to { rotate: -360deg; } }
.theme-btn {
	flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
}
.theme-btn:hover { border-color: var(--brand-2); color: var(--brand-2); }
.theme-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-btn svg { display: none; width: 18px; height: 18px; }
.theme-btn[data-mode="auto"] .i-auto, .theme-btn[data-mode="light"] .i-light, .theme-btn[data-mode="dark"] .i-dark { display: block; }
.theme-btn--float { position: fixed; top: var(--auth-y, 16px); right: var(--auth-inset, 16px); z-index: 2; border-color: var(--hero-ctl-border); background: var(--hero-ctl-bg); color: var(--hero-ctl-text); }
.theme-btn--float:hover { border-color: var(--hero-accent); color: var(--hero-accent); }

@media (max-width: 860px) {
	.page--auth { --auth-x: 16px; --auth-y: 24px; }
	.auth { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; padding-bottom: 0; }
	.auth__brand, .auth__panel { grid-column: 1; }
	.page--auth .drum--bg { --drum-x: 50%; top: 42%; width: 150vw; }
	.auth__headline, .auth__lead, .auth__intro, .auth__foot { display: none; }
	.page--auth .card { grid-row: 2; margin-top: 24px; padding: 24px 20px; }
}

/* ------------------------------------------------------------ Khung sau đăng nhập: sidebar + thanh trên */
/* Vùng logo của sidebar và thanh trên cao bằng nhau (gồm cả viền dưới) để hai đường kẻ thẳng hàng */
/* --page-w/--page-x: khung nội dung của .main – thanh trên trang chủ dùng lại để hai bên thẳng lề với thân trang */
:root { --bar-h: 64px; --page-w: 1100px; --page-x: 24px; }
.app { display: flex; min-height: 100vh; }
.sidebar {
	flex: none; width: 260px; display: flex; flex-direction: column;
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
	background: var(--sidebar-bg); color: #fff; border-right: 1px solid var(--sidebar-line);
	transition: width 0.18s ease;
}
.sidebar__brand { flex: none; display: flex; align-items: center; height: var(--bar-h); padding: 0 16px; border-bottom: 1px solid var(--sidebar-line); overflow: hidden; }
/* Logo ở đầu sidebar là nút thu gọn / mở rộng menu */
.brand-mark__btn { flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.brand-mark__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Cỡ chữ và logo lấy từ .brand-mark--bar (logo không đổi cỡ khi thu gọn để không nhảy hình);
   sidebar nền đỏ nên dòng đơn vị quản lý chỉ làm nhạt bớt. */
.sidebar .brand-mark__org { opacity: 0.72; }
.sidebar__nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 16px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group__label { padding: 0 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); opacity: 0.75; white-space: nowrap; }
.nav-item {
	display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px;
	color: #fff; text-decoration: none; opacity: 0.85; white-space: nowrap;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
/* Mục đang mở: viên thuốc vàng quốc huy, chữ và biểu tượng màu nền sidebar */
.nav-item[aria-current="page"], .nav-item[aria-current="page"]:hover { background: var(--gold); color: #5e0710; opacity: 1; font-weight: 700; }
.nav-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.nav-item__icon { flex: none; width: 20px; height: 20px; }
.nav-item__ext { flex: none; width: 14px; height: 14px; margin-left: auto; opacity: 0.6; }
.nav-text { overflow: hidden; text-overflow: ellipsis; }

/* Thu gọn (máy tính): chỉ còn biểu tượng.
   Bề rộng 74px = logo 42px + lề 16px hai bên: lề của logo không đổi khi đóng/mở nên logo đứng yên, chỉ cột hẹp lại.
   Mục menu là ô vuông 42px cùng lề 16px → thẳng cả hai mép với logo; nới khoảng cách vì không còn nhãn nhóm. */
.sidebar-collapsed .sidebar { width: 74px; }
.sidebar-collapsed .sidebar__nav { padding: 12px 16px; gap: 8px; }
.sidebar-collapsed .nav-group { gap: 6px; }
.sidebar-collapsed .nav-item { justify-content: center; width: 42px; height: 42px; padding: 0; }
.sidebar-collapsed .sidebar .brand-mark__text,
.sidebar-collapsed .sidebar .nav-text,
.sidebar-collapsed .sidebar .nav-item__ext { display: none; }
.sidebar-collapsed .sidebar .nav-group__label { visibility: hidden; height: 0; padding: 0; }

.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app__main > .main { width: 100%; }
.topbar {
	position: sticky; top: 0; z-index: 5;
	display: flex; align-items: center; gap: 16px; height: var(--bar-h); padding: 0 24px;
	background: var(--glass); border-bottom: 1px solid var(--border);
	-webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.topbar__menu { display: none; }
.topbar__menu svg { width: 22px; height: 22px; display: block; }
.topbar__app { flex: 1; min-width: 0; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trang module: cạnh nút nhà là tên module – nhãn chính của thanh trên */
.topbar:not(.topbar--home) .topbar__app { font-size: 16px; color: var(--text); }
/* Trang chủ: đầu thanh trên là khối nhận diện 2 dòng (.brand-mark--bar) – chiếm phần giữa, đẩy đồng hồ sang phải */
.topbar .brand-mark { flex: 1; min-width: 0; }
.topbar .brand-mark__org { color: var(--muted); opacity: 1; }
/* Trang chủ: không sidebar – logo đầu thanh trên, người dùng cạnh tiêu đề */
.page--home { --drum-x: 50%; }
/* Thanh trên của trang chủ: không nền, không vạch dưới, không dính khi cuộn; rộng đúng bằng thân trang */
.topbar--home {
	position: relative; background: none; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 12px;
	width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-x);
}
.topbar--home .clock { margin-right: 0; }
/* Nút biểu tượng ở thanh trên (cài đặt) – cùng khuôn nút đổi giao diện */
.bar-btn {
	flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
	text-decoration: none; cursor: pointer;
}
.bar-btn:hover { border-color: var(--brand-2); color: var(--brand-2); }
.bar-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bar-btn svg { width: 18px; height: 18px; }
/* Riêng nút về trang chủ: rê chuột (hoặc chọn bằng bàn phím) thì nền đỏ, ngôi nhà tô vàng như cờ Tổ quốc.
   Các nút khác trên thanh trên giữ nguyên kiểu rê chuột chung ở trên. */
.bar-btn--home { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.bar-btn--home:hover, .bar-btn--home:focus-visible {
	/* nền đỏ pha trong suốt cho dịu mắt (hòa với nền thanh trên), viền đỏ đặc giữ nét cờ */
	background: color-mix(in srgb, var(--flag-red) 55%, transparent); border-color: var(--flag-red); color: var(--gold);
}
.bar-btn--home:hover svg, .bar-btn--home:focus-visible svg { fill: currentColor; }
/* Menu người dùng */
.user-menu { position: relative; flex: none; }
.user-menu__btn { display: grid; place-items: center; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.user-menu__btn:hover, .user-menu__btn[aria-expanded="true"] { border-color: var(--brand-2); }
.user-menu__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.user-menu__panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; padding: 6px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.user-menu__head { padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.user-menu__head .user__name { white-space: normal; }
.user-menu__email { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu__head .user__role { margin-top: 4px; color: var(--muted); opacity: 1; }
.user-menu__item {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
	background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.user-menu__item:hover, .user-menu__item:focus-visible { background: var(--bg); color: var(--primary); outline: none; }
.user-menu__item svg { width: 16px; height: 16px; }

/* Ngày giờ ở thanh trên */
/* Giờ trên, ngày dưới – canh phải, sát nút cài đặt */
.clock {
	flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin-right: 6px;
	line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.clock__date { font-size: 12px; color: var(--muted); }
.clock__time { order: -1; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }

.avatar {
	flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--gold); color: #5e0710; font-weight: 700; font-size: 15px;
}
.user__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user__role { font-size: 12px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backdrop { position: fixed; inset: 0; z-index: 19; background: var(--scrim); }

@media (max-width: 900px) {
	.sidebar, .sidebar-collapsed .sidebar {
		position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 280px;
		transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow);
	}
	.sidebar.is-open { transform: none; }
	.sidebar-collapsed .sidebar .brand-mark__text, .sidebar-collapsed .sidebar .nav-text { display: initial; }
	.sidebar-collapsed .sidebar .nav-group__label { visibility: visible; height: auto; padding: 0 10px 4px; }
	.sidebar-collapsed .sidebar__nav { padding: 12px 10px; gap: 16px; }
	.sidebar-collapsed .nav-group { gap: 2px; }
	.sidebar-collapsed .nav-item { justify-content: flex-start; width: auto; height: auto; padding: 9px 10px; }
	/* Menu trượt ra từ trái – thu gọn không còn nghĩa, logo trở lại là hình */
	.brand-mark__btn { pointer-events: none; }
	.topbar__menu { display: inline-flex; }
	.topbar:not(.topbar--home) { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } .page--auth .drum--bg { animation: none; } }

.main { max-width: var(--page-w); margin: 0 auto; padding: 32px var(--page-x) 48px; }
.main h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.2px; }
.main h1::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--primary) 0 55%, var(--gold) 55%); }
.main .sub { margin: 0 0 24px; color: var(--muted); }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tool {
	display: flex; gap: 14px; align-items: flex-start; padding: 18px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
	color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tool { box-shadow: var(--shadow-sm); }
.tool:hover, .tool:focus-visible { border-color: var(--brand-2); box-shadow: var(--shadow); outline: none; transform: translateY(-1px); }
.tool__icon {
	flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
	background: var(--info-bg); color: var(--info-text);
}
.tool__icon svg { width: 24px; height: 24px; }
.tool__name { font-weight: 600; margin-bottom: 2px; }
.tool__desc { font-size: 14px; color: var(--muted); }
/* Trang chủ: khối chức năng ở trên, công cụ nền dồn xuống cuối màn hình */
.main--portal { flex: 1; display: flex; flex-direction: column; }
.main--portal > .tools, .main--portal > .empty { margin-bottom: 40px; }
.tools-ext { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border); }
.tools-ext__title { font-size: 13px; margin: 0 0 2px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.tools-ext .hint { margin: 0 0 12px; }
.tools--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
/* Công cụ nền là liên kết phụ sang hệ thống khác: kiểu phẳng, không đổ bóng, không nhấc lên khi rê chuột
   – để không trông như 3 khối module chính ở trên */
.tools--compact .tool {
	padding: 10px 12px; gap: 12px; align-items: center;
	background: none; border-color: transparent; box-shadow: none; transition: background-color 0.15s, color 0.15s;
}
.tools--compact .tool:hover, .tools--compact .tool:focus-visible {
	transform: none; box-shadow: none; border-color: transparent; background: var(--surface); color: var(--brand-2);
}
.tools--compact .tool__icon { width: 32px; height: 32px; border-radius: 8px; background: none; color: var(--muted); }
.tools--compact .tool:hover .tool__icon, .tools--compact .tool:focus-visible .tool__icon { color: inherit; }
.tools--compact .tool__icon svg { width: 20px; height: 20px; }
.tools--compact .tool__name { font-weight: 500; font-size: 14px; }
.tools--compact .tool__desc { font-size: 13px; }
.empty { padding: 32px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }

@media (max-width: 600px) {
	/* Trang chủ: giấu 2 dòng nhận diện; trang module giữ tên module vì đó là nhãn chính */
	.topbar .brand-mark__text { display: none; }
	.clock { margin-left: auto; }
	:root { --page-x: 16px; }
	.main { padding-block: 24px 40px; }
}

/* ------------------------------------------------------------ Điều hướng, tiện ích chung */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.ok-text { color: var(--ok-text); }
.spacer { flex: 1; }
.hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.card .hint { margin: -8px 0 16px; }
.main--wide { max-width: 1280px; }
.main h3 { font-size: 15px; margin: 20px 0 8px; }

.btn--sm { width: auto; padding: 7px 12px; font-size: 14px; }
.btn--danger { background: var(--danger-solid); color: #fff; }
.btn--ghost.btn--danger { background: transparent; color: var(--danger-text); border-color: var(--danger-text); }
.icon-btn { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: var(--bg); color: var(--text); }

.field select, .field textarea, .toolbar input, .toolbar select, .bulk select {
	font: inherit; color: var(--text); background: var(--surface);
	border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
}
.field select, .field textarea { width: 100%; }
.field textarea { resize: vertical; }
.field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus, .bulk select:focus {
	outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent;
}
/* Ô chọn (select): mũi tên riêng căn giữa theo chiều dọc, cách mép phải đều nhau. Trình duyệt hỗ trợ select tùy biến
   (appearance: base-select – Chromium/Edge 135+) thì danh sách thả xuống cùng kiểu với ô: nền, viền, bo góc, rộng bằng ô. */
select:not([multiple]) {
	appearance: none; -webkit-appearance: none;
	padding-right: 34px !important; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
select:disabled { cursor: not-allowed; }
@supports (appearance: base-select) {
	select:not([multiple]) { appearance: base-select; background-image: none; display: inline-flex; align-items: center; }
	.field select:not([multiple]) { display: flex; }
	select:not([multiple])::picker-icon {
		content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
		background: currentColor; opacity: 0.6; transition: rotate 0.15s;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
	}
	select:not([multiple]) { position: relative; }
	select:not([multiple]):open::picker-icon { rotate: 180deg; }
	select:not([multiple])::picker(select) {
		appearance: base-select;
		margin: 4px 0; padding: 4px; max-height: min(320px, 60vh); overflow-y: auto;
		background: var(--surface); color: var(--text); font-size: 14px; font-weight: 400;
		border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
	}
	select:not([multiple]) option {
		display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
		color: var(--text); background: none; cursor: pointer; white-space: nowrap;
	}
	select:not([multiple]) option:hover, select:not([multiple]) option:focus-visible { background: var(--bg); outline: none; }
	select:not([multiple]) option:checked { background: var(--info-bg); color: var(--info-text); font-weight: 600; }
	select:not([multiple]) option::checkmark { order: 1; margin-left: auto; content: "✓"; }
	select:not([multiple]) option:disabled { opacity: 0.5; cursor: default; }
}
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; }

/* ------------------------------------------------------------ Quản trị người dùng */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs [role="tab"] {
	border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer;
	padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--brand-2); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.toolbar, .bulk, .pager, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar { margin-bottom: 12px; }
.toolbar input[type="search"] { flex: 1 1 260px; max-width: 360px; }
.bulk { padding: 8px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--info-bg); color: var(--info-text); }
.pager { margin-top: 12px; font-size: 14px; }
.actions { margin: 12px 0 4px; }

.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:hover { background: color-mix(in srgb, var(--info-bg) 45%, transparent); }
.table .num { text-align: right; }
.table--sm th, .table--sm td { padding: 7px 10px; }
.col-check { width: 36px; }
.col-act { width: 1%; white-space: nowrap; text-align: right; }
.row--inactive .row-name { color: var(--muted); }
.row-name { text-decoration: none; font-weight: 600; text-align: left; color: var(--text); }
.row-name:hover { text-decoration: underline; color: var(--brand-2); }
.empty-row { text-align: center; color: var(--muted); padding: 28px 12px !important; }
.sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.sort::after { content: " ↕"; opacity: 0.4; }
th[aria-sort="ascending"] .sort::after { content: " ↑"; opacity: 1; }
th[aria-sort="descending"] .sort::after { content: " ↓"; opacity: 1; }
[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.badge--active { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge--suspended { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }
.badge--invited { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.tag { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 6px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); }
.row-name .tag { margin-left: 8px; font-weight: 400; }
.tag--admin { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }

/* Hộp thoại */
.dlg {
	/* Neo phía trên: nội dung nạp sau (lịch sử đăng nhập) chỉ làm hộp thoại dài xuống, nút không bị dịch chỗ */
	margin: max(16px, 6vh) auto auto;
	width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px - max(16px, 6vh)); padding: 0;
	border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.dlg--sm { width: min(460px, calc(100vw - 32px)); }
.dlg--wide { width: min(1040px, calc(100vw - 32px)); }
.dlg::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dlg form { padding: 20px 24px; }
.dlg h2 { margin: 0; font-size: 20px; }
.dlg .sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.dlg__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.dlg__text { margin: 4px 0 20px; }
.dlg__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
.dlg__actions .btn { width: auto; }
.dlg__left { margin-right: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pw-row { display: flex; gap: 8px; }
.pw-row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 0; padding: 12px; background: var(--bg); border-radius: 8px; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; }
.checks { display: grid; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.check:has(input:checked) { border-color: var(--brand-2); background: var(--info-bg); }
.check input { margin-top: 3px; }
/* ô chọn / nút radio trong .field không giãn hết dòng như ô nhập chữ */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; flex: none; padding: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.check .tag { margin-left: 8px; }

@media (max-width: 760px) {
	.grid2, .facts { grid-template-columns: 1fr; }
	.toolbar input[type="search"] { max-width: none; }
	.dlg form { padding: 16px; }
}

/* ------------------------------------------------------------ Cấu hình */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px 8px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 17px; margin: 0 0 4px; }
.panel > .sub { margin: 0 0 16px; font-size: 14px; }
.panel > .hint { margin: -4px 0 16px; }
.facts--wide { margin: 0 0 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.savebar {
	position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 12px 16px; margin-top: 8px; border: 1px solid var(--border); border-radius: 12px;
	background: var(--glass); box-shadow: 0 -4px 16px rgba(70, 20, 20, 0.06);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.savebar--dirty { border-color: var(--brand-2); }
.savebar--dirty #dirty-note { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ Thiết kế dữ liệu */
.design { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.design__list { padding: 12px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; margin: 0; }
.design__list-head { display: flex; gap: 8px; margin-bottom: 8px; }
.design__list-head input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.design__group { color: var(--muted); opacity: 1; padding: 12px 8px 4px; }
.design__item {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
	padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer;
}
.design__item:hover { background: var(--bg); }
.design__item[aria-current="true"] { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand-2); }
.design__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.design__none { padding: 8px; }
.design__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.design__head h2, .design__head h3 { margin: 0; }
.design__desc { margin: 0 0 12px; }
.design__detail .panel { padding-bottom: 16px; }
.col-order { width: 64px; white-space: nowrap; }
.icon-btn--sm { font-size: 14px; padding: 2px 6px; }
.icon-btn[disabled] { opacity: 0.3; cursor: default; }
.tag--tpl { background: var(--info-bg); color: var(--info-text); border-color: transparent; margin-left: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.92em; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.preview .field input, .preview .field select, .preview .field textarea { opacity: 0.85; }
.preview__full { grid-column: 1 / -1; }
.preview .field input[type="checkbox"] { width: auto; justify-self: start; }
.checks--row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.checks--row .check { flex: 1 1 200px; }
.prefix-input { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.prefix-input span { display: grid; place-items: center; padding: 0 10px; background: var(--bg); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.field .prefix-input input { border: 0; border-radius: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.dlg .field input:disabled, .dlg .field select:disabled, .dlg .field textarea:disabled { opacity: 0.6; }
@media (max-width: 1000px) {
	.design { grid-template-columns: minmax(0, 1fr); }
	.design__list { position: static; max-height: none; }
}

/* ------------------------------------------------------------ Danh mục chung, nhập liệu, menu trong hộp thoại thiết kế */
.cat-group { font-size: 13px; margin: 24px 0 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.cat-group:first-child { margin-top: 0; }
.menu-box { padding: 12px 14px 4px; border: 1px solid var(--border); border-radius: 10px; }
.menu-box legend { padding: 0 6px; }
.menu-box > .check { margin-bottom: 12px; }
#item-fields input[type="checkbox"] { width: auto; justify-self: start; }
#item-fields :disabled { opacity: 0.85; cursor: default; }

/* ------------------------------------------------------------ Quản trị nghiệp vụ, Quản trị dữ liệu */
.biz-note { margin: -12px 0 20px; }
section + section > .cat-group:first-child { margin-top: 32px; }
.tool .badge { margin-top: 8px; }
.tool--planned { opacity: 0.72; box-shadow: none; border-style: dashed; }
.tool--planned:hover { transform: none; border-color: var(--border); box-shadow: none; }
.flow { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.flow__step {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px;
	background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.flow__step--live { border-style: solid; border-top: 3px solid var(--primary); }
/* mũi tên giữa các bước */
.flow__step:not(:last-child)::after {
	content: "→"; position: absolute; right: -22px; top: 50%; translate: 0 -50%;
	color: var(--accent); font-size: 20px; font-weight: 700;
}
.flow__title { font-weight: 700; }
.flow__what { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; color: var(--accent); }
.flow__detail { font-size: 14px; color: var(--muted); flex: 1; }
.flow__step .badge { align-self: flex-start; }
.flow__orchestrator {
	display: flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 10px 14px;
	background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; font-size: 14px;
}
.flow__orchestrator > svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
.flow__orchestrator > span:first-of-type { flex: 1; }
.yaml { margin-top: 12px; }
.yaml summary { cursor: pointer; color: var(--brand-2); font-size: 14px; }
.yaml pre {
	margin: 8px 0 0; padding: 12px 14px; max-height: 360px; overflow: auto;
	background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
@media (max-width: 860px) {
	.flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.flow__step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; translate: -50% 0; }
}
a.btn { text-decoration: none; }

/* ------------------------------------------------------------ Module: Phân quyền dữ liệu, Rà soát quyền */
.hint-list { margin: 0 0 16px; padding-left: 20px; font-size: 13px; color: var(--muted); }
.hint-list li + li { margin-top: 2px; }
.plain-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.err-text { color: var(--danger-text); font-weight: 600; }
.tag--auto { border-style: dashed; }
.matrix th.matrix__role { min-width: 150px; vertical-align: bottom; }
.matrix__group td { background: var(--surface-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.matrix__cell { white-space: nowrap; }
.lvl { width: 100%; min-width: 130px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.lvl[data-level="0"] { color: var(--muted); }
.lvl:not([data-level="0"]) { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); font-weight: 600; }
.lvl[data-level="4"] { border-color: var(--danger-text); }
.review-status { margin-bottom: 20px; }
.review-status h2 { margin: 0 0 4px; font-size: 16px; }
.matrix th:first-child, .matrix tr:not(.matrix__group) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 180px; }
.history-more { margin-top: 8px; }

/* Nhập / xuất dữ liệu */
.imp-table { margin-top: 18px; }
.imp-table h3 { margin: 0 0 6px; font-size: 15px; }
.imp-table .table-wrap { max-height: 320px; overflow: auto; }
.imp-table .alert { margin: 6px 0; }
#imp-dlg .field, #imp-dlg .hint-list { margin-bottom: 12px; }
#imp-skip-box, #exp-filter-box { margin-top: 12px; }
.checks:disabled, .check:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
fieldset.checks { border: 0; padding: 0; margin: 0 0 4px; }