/* ============================================================================
   AZ ADMIN SHELL — Views/OS/Admin/shell.css ban 3 (DUNG CHUNG — AZ-AdminUI P3-e 31/10/2026 ; ban 3 : AZ-DS 1.1 bo cuc khung 02/11/2026)
   Chep nguyen tu Template/B635BCD3-.../style.css (16BEB29F16E2… — the he 2 = the he 1 + «Tu van truc tuyen», da co ban sua mui ten 31/10) ;
   them cuoi tep 3 lop thay style= cua script.js cu (.az-admin-skel-nav, .az-admin-skel-pop, .az-admin-empty-pop). Mau dung chung :
   Views/OS/Admin/README.md. Sua tep nay -> tang ?v= trong Views/OS/Admin/Layout.cshtml.
   BAN 3 (AZ-DS 1.1 — kinglux-web du-an/AZ-AdminUI/TIEU_CHUAN_THIET_KE.md §5b) : 6 bo cuc khung theo <html data-az-shell> (OS.js §0c dat som ;
   shell.js SetShell doi tai cho) — rail «Cổ điển» (mac dinh, KHONG doi mot dong) · dark «Thanh bên đậm» · float «Nổi» · top «Menu ngang» ·
   dual «Hai cột» · apps «Ô ứng dụng» · wide «Menu ngang toàn màn» (02/11 15:xx — thiet ke SALES #7840 anh duyet). Luat bo cuc nam trong @layer shell (SAU style / brand : phong cach chi doi mau / chu, bo cuc thang
   cau truc) ; thanh phan moi (.az-admin-strip / -mega / -subbar / -launcher / -searchpop / -tbrand) o @layer template de phong cach to mau.
   Token moi --az-admin-head-h = tong chieu cao vung dau dinh (thanh tren + thanh menu) -> thead dinh + --az-header-offset.
   ----------------------------------------------------------------------------
   (ghi chu goc cua style.css giu nguyen duoi day)
   ----------------------------------------------------------------------------
   Khung quan tri: thanh ben trai + thanh tren + vung Views + ngan keo cong cu.

   BA NGUYEN TAC CHONG XUNG DOT VOI OS CORE
   1. Moi rule nam trong @layer template — dung ten layer cua OS.css.
      OS.css khai: reset, tokens, base, layout, components, template,
      utilities, overrides. Nam dung tang => KHONG can mot dong !important.
      CSS ngoai layer thang MOI @layer, nen tuyet doi khong de rule tran ra.
   2. Moi lop deu co tien to az-admin-* — da doi chieu 130 lop .az-* cua
      OS.css, khong trung mot cai nao. KHONG dung lai .az-main / .az-card /
      .az-btn... de Views tu do dung chung theo cach cua no.
   3. Mau/khoang cach lay tu token OS core (--az-bg-surface, --az-space-4...).
      Chi khai them token rieng cho kich thuoc khung (--az-admin-rail-w...).
      Nho vay dark mode TU CHAY: OS.css da co html.az-dark + auto theo he
      dieu hanh, doi token la khung doi theo, khong phai viet bang mau thu hai.
   ========================================================================== */

@layer reset, tokens, base, layout, components, template, utilities, overrides, shell;

/* Ban 3 : --az-header-offset phai la do dai THAT — OS.ui.default.js (_enableHeadFollow) parseInt gia tri da tinh ; bo cuc top / apps / float dat
   bang calc() -> dang ky kieu <length> de trinh duyet tinh ra px (Chrome / Edge 85+, Safari 16.4+, Firefox 128+). Khong phai luat cascade nen
   nam ngoai @layer. Trinh duyet cu : rail / dark / dual van la px nhu truoc ; top / apps / float thead theo dau trang (0). */
@property --az-header-offset {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@layer tokens {
	:root {
		/* Kich thuoc khung — KHONG nuot token OS core */
		--az-admin-rail-w: 248px;
		--az-admin-rail-w-min: 60px;
		--az-admin-topbar-h: 60px;
		--az-admin-dock-w: 380px;
		--az-admin-z-rail: 60;
		--az-admin-z-topbar: 70;
		--az-admin-z-dock: 80;
		--az-admin-dur: .18s;

		/* Ban 3 : tong chieu cao vung dau dinh (bo cuc rail = thanh tren ; top / apps cong thanh menu ; float cong khe ho) */
		--az-admin-head-h: var(--az-admin-topbar-h);

		/* Ban 3 : chieu cao con lai cho vung du lieu (man «lap day man hinh» : max-height cua khung bang = calc(var(--az-admin-view-h) - dau trang)) */
		--az-admin-view-h: calc(100vh - var(--az-admin-head-h));

		/* OS.css doc token nay de tinh chieu cao bang dinh khi cuon.
		   Khong dat = thead dinh sai cho tren moi man danh sach. */
		--az-header-offset: var(--az-admin-head-h);
	}

	@supports (height: 100dvh) {
		:root { --az-admin-view-h: calc(100dvh - var(--az-admin-head-h)); }
	}

	/* Thu gon: chi con dai bieu tuong */
	:root:has(.az-admin-shell.az-admin-collapsed) {
		--az-admin-rail-w: var(--az-admin-rail-w-min);
	}
}

@layer template {

	/* ==================== KHUNG ==================== */
	.az-admin-shell {
		min-height: 100vh;
		display: grid;
		grid-template-columns: var(--az-admin-rail-w) minmax(0, 1fr);
		grid-template-rows: var(--az-admin-topbar-h) minmax(0, 1fr);
		grid-template-areas:
			"rail topbar"
			"rail view";
		background: var(--az-bg-body);
		transition: grid-template-columns var(--az-admin-dur) ease;
	}

	.az-admin-shell.az-admin-dock-open { grid-template-columns: var(--az-admin-rail-w) minmax(0, 1fr) var(--az-admin-dock-w); }
	.az-admin-shell.az-admin-dock-open { grid-template-areas: "rail topbar dock" "rail view dock"; }

	/* ==================== THANH BEN ==================== */
	.az-admin-rail {
		grid-area: rail;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		z-index: var(--az-admin-z-rail);
		display: flex;
		flex-direction: column;
		background: var(--az-bg-surface);
		border-right: 1px solid var(--az-border-color);
		overflow: hidden;
	}

	.az-admin-brand {
		flex: 0 0 var(--az-admin-topbar-h);
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		padding: 0 var(--az-space-3);
		border-bottom: 1px solid var(--az-border-color-subtle);
		overflow: hidden;
	}

	.az-admin-brand img { max-height: 34px; max-width: 34px; flex: 0 0 auto; }

	.az-admin-brand span {
		font-weight: 600;
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.az-admin-nav {
		flex: 1 1 auto;
		padding: var(--az-space-2) var(--az-space-2) var(--az-space-4);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	.az-admin-nav ul { list-style: none; margin: 0; padding: 0; }
	.az-admin-nav > ul > li + li { margin-top: 1px; }

	.az-admin-nav a {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		min-height: 38px;
		padding: 0 var(--az-space-3);
		border-radius: var(--az-radius-md);
		color: var(--az-text-secondary, inherit);
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
	}

	.az-admin-nav a:hover { background: var(--az-bg-surface-hover); }

	.az-admin-nav > ul > li.az-admin-on > a {
		background: var(--az-bg-surface-alt);
		color: var(--az-color-primary);
		font-weight: 600;
	}

	.az-admin-nav a img,
	.az-admin-nav a i {
		flex: 0 0 20px;
		width: 20px;
		font-size: 18px;
		text-align: center;
	}

	/* Anh menu do SP tra ve, kich thuoc khong dong nhat -> ep khung vuong */
	.az-admin-nav a img {
		height: 20px;
		object-fit: contain;
	}

	.az-admin-nav a span {
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Bieu tuong ben phai — CUNG BE RONG cho ca hai loai muc, neu khong
	   chu se so le giua muc co nhom con va muc khong co.
	   ⚠ Phai viet DAY DU '.az-admin-nav a .az-admin-caret': rule ben tren
	   '.az-admin-nav a i' co do uu tien (0,1,2) cao hon '.az-admin-leaf'
	   (0,1,0) nen se thang — dat 20px va de bep moi thu o day. */
	.az-admin-nav a .az-admin-caret,
	.az-admin-nav a .az-admin-leaf {
		flex: 0 0 14px;
		width: 14px;
		font-size: 11px;
		text-align: center;
	}

	/* Mui ten cung ve bang CSS, KHONG dung lop .fal.
	   Ly do: fontawesome581pro.css nap NGOAI @layer, ma CSS ngoai layer THANG
	   moi @layer bat ke do uu tien. '.fal { display:inline-block }' cua no de
	   len 'display:none' cua khung -> thu gon roi mui ten van hien, chen mat
	   anh menu. Cham thi an dung vi khong mang lop .fal nao.
	   Ve bang CSS la thoat han khoi cuoc tranh chap nay. */
	.az-admin-nav a .az-admin-caret {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		opacity: .55;
	}

	.az-admin-nav a .az-admin-caret::before {
		content: '';
		width: 5px;
		height: 5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg) translate(-1px, -1px);
		transition: transform var(--az-admin-dur) ease;
	}

	/* Muc la: cham ve bang CSS, KHONG dung bieu tuong font.
	   fa-circle ban Light la vong tron rong — thu nho lai trong nhu chu 'C'.
	   Ve bang CSS thi kiem soat duoc hinh dang va khong phu thuoc bo font nao. */
	.az-admin-nav a .az-admin-leaf {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.az-admin-nav a .az-admin-leaf::before {
		content: '';
		width: 4px;
		height: 4px;
		border-radius: var(--az-radius-full);
		background: currentColor;
		opacity: .32;
	}

	.az-admin-nav li.az-admin-open > a .az-admin-caret::before { transform: rotate(45deg) translate(-2px, -2px); }
	.az-admin-nav li.az-admin-on > a .az-admin-leaf::before { opacity: .8; }

	/* Nhom con: xo doc, khong bung ra ngoai — thanh ben cuon duoc nen khong can */
	.az-admin-nav ul ul {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--az-admin-dur) ease;
	}

	.az-admin-nav li.az-admin-open > ul { max-height: 1200px; }
	.az-admin-nav ul ul a { padding-left: calc(var(--az-space-3) + 28px); font-size: 13px; min-height: 34px; }
	.az-admin-nav ul ul ul a { padding-left: calc(var(--az-space-3) + 48px); }

	.az-admin-railfoot {
		flex: 0 0 auto;
		padding: var(--az-space-2);
		border-top: 1px solid var(--az-border-color-subtle);
	}

	.az-admin-railtoggle {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		width: 100%;
		min-height: 34px;
		padding: 0 var(--az-space-3);
		border-radius: var(--az-radius-md);
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.az-admin-railtoggle:hover { background: var(--az-bg-surface-hover); }
	.az-admin-railtoggle i { flex: 0 0 20px; width: 20px; text-align: center; }

	/* ---- Trang thai thu gon ---- */
	.az-admin-collapsed .az-admin-brand span,
	.az-admin-collapsed .az-admin-nav a span,
	.az-admin-collapsed .az-admin-railtoggle span { display: none; }

	/* Thu gon: chi con MOT bieu tuong giua dai. An mui ten va cham bang
	   width/opacity thay vi display — de neu co bo font nao ep display thi
	   chung van khong chiem cho. */
	.az-admin-collapsed .az-admin-nav a .az-admin-caret,
	.az-admin-collapsed .az-admin-nav a .az-admin-leaf {
		flex: 0 0 0;
		width: 0;
		overflow: hidden;
		opacity: 0;
	}

	.az-admin-collapsed .az-admin-nav ul ul { display: none; }
	.az-admin-collapsed .az-admin-nav a { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-nav a img,
	.az-admin-collapsed .az-admin-nav a i { flex: 0 0 22px; width: 22px; font-size: 19px; }
	.az-admin-collapsed .az-admin-brand { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-railtoggle { justify-content: center; padding: 0; }
	.az-admin-collapsed .az-admin-railtoggle i { transform: rotate(180deg); }

	/* ==================== THANH TREN ==================== */
	.az-admin-topbar {
		grid-area: topbar;
		position: sticky;
		top: 0;
		z-index: var(--az-admin-z-topbar);
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		padding: 0 var(--az-space-4);
		background: var(--az-bg-surface);
		border-bottom: 1px solid var(--az-border-color);
	}

	.az-admin-crumb {
		flex: 0 1 auto;
		min-width: 0;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.az-admin-spacer { flex: 1 1 auto; }

	/* Tim nhanh */
	.az-admin-search {
		flex: 0 1 320px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.az-admin-search input {
		width: 100%;
		height: 34px;
		padding: 0 var(--az-space-3) 0 34px;
		background: var(--az-bg-surface-alt);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 14px;
		color: inherit;
	}

	.az-admin-search input:focus { outline: none; border-color: var(--az-color-primary); box-shadow: var(--az-shadow-focus); }
	.az-admin-search i { position: absolute; left: 11px; font-size: 15px; opacity: .55; pointer-events: none; }

	/* Nut tron tren thanh */
	.az-admin-iconbtn {
		flex: 0 0 auto;
		position: relative;
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--az-radius-md);
		font-size: 18px;
		cursor: pointer;
	}

	.az-admin-iconbtn:hover { background: var(--az-bg-surface-hover); }
	.az-admin-iconbtn.az-admin-on { color: var(--az-color-primary); background: var(--az-bg-surface-alt); }

	.az-admin-dot {
		position: absolute;
		top: 3px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--az-radius-full);
		background: #dc2626;
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	.az-admin-avatar {
		width: 30px;
		height: 30px;
		border-radius: var(--az-radius-full);
		object-fit: cover;
	}

	/* Anh tam (AZHUB 03/11/2026) : khong co / loi anh dai dien -> chu cai dau cua ten tren nen mau chu dao (Shell.cshtml thay <img> bang <span>) */
	.az-admin-avatar-ph {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--az-color-primary);
		color: var(--az-text-on-primary, #fff);
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		user-select: none;
	}

	/* Menu xo tu thanh tren */
	.az-admin-pop {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		min-width: 210px;
		padding: var(--az-space-1) 0;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		box-shadow: var(--az-shadow-lg);
		display: none;
	}

	.az-admin-menuwrap { position: relative; }
	.az-admin-menuwrap.az-admin-open .az-admin-pop { display: block; }

	.az-admin-pop a,
	.az-admin-pop button {
		display: flex;
		align-items: center;
		gap: var(--az-space-3);
		width: 100%;
		min-height: 36px;
		padding: 0 var(--az-space-4);
		background: none;
		border: 0;
		font: inherit;
		font-size: 14px;
		color: inherit;
		text-align: left;
		cursor: pointer;
	}

	.az-admin-pop a:hover,
	.az-admin-pop button:hover { background: var(--az-bg-surface-hover); }
	.az-admin-pop hr { margin: var(--az-space-1) 0; border: 0; border-top: 1px solid var(--az-border-color-subtle); }
	.az-admin-pop i { flex: 0 0 18px; width: 18px; text-align: center; opacity: .7; }

	/* ==================== VUNG VIEWS ==================== */
	/* Hop dong voi nguoi viet View: moi thu do vao day.
	   Khung KHONG dat rule cho con ben trong — Views tu do dung .az-main,
	   .az-card, .az-table... cua OS core ma khong bi khung can thiep. */
	/* CHI dat vi tri trong luoi.
	   Khoang cach do .az-main cua OS core lo (@layer layout:
	   width calc(100% - space-8), margin space-4). Khung KHONG dung vao —
	   de View nhan dung kich thuoc no van mong doi tu truoc toi nay. */
	.az-admin-view {
		grid-area: view;
		min-width: 0;
		min-height: 0;
	}

	/* Tieu de bang dinh: ep sat day thanh tren.
	   Lui len 1px de khong ho mot vet mong khi trinh duyet lam tron so le
	   luc phong to/thu nho. Tang chieu cao o de dong cuon khong lo ra tren. */
	.az-admin-view .az-table thead th,
	.az-admin-view table thead th {
		top: calc(var(--az-admin-head-h) - 1px);
		padding-top: var(--az-space-3);
		padding-bottom: var(--az-space-3);
	}

	/* ==================== NGAN KEO CONG CU ==================== */
	.az-admin-dock {
		grid-area: dock;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		z-index: var(--az-admin-z-dock);
		display: none;
		flex-direction: column;
		background: var(--az-bg-surface);
		border-left: 1px solid var(--az-border-color);
	}

	.az-admin-dock-open .az-admin-dock { display: flex; }

	.az-admin-dockhead {
		flex: 0 0 var(--az-admin-topbar-h);
		display: flex;
		align-items: center;
		gap: var(--az-space-2);
		padding: 0 var(--az-space-3);
		border-bottom: 1px solid var(--az-border-color-subtle);
		font-weight: 600;
		font-size: 14px;
	}

	.az-admin-dockbody { flex: 1 1 auto; min-height: 0; overflow: hidden; }
	.az-admin-dockbody > iframe { width: 100%; height: 100%; border: 0; display: block; }

	.az-admin-docktabs {
		display: flex;
		gap: var(--az-space-1);
		padding: var(--az-space-2);
		border-top: 1px solid var(--az-border-color-subtle);
	}

	.az-admin-docktabs button {
		flex: 1 1 0;
		min-height: 34px;
		background: none;
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 12px;
		color: inherit;
		cursor: pointer;
	}

	.az-admin-docktabs button.az-admin-on {
		border-color: var(--az-color-primary);
		color: var(--az-color-primary);
	}

	/* ==================== DANG NHAP ==================== */
	.az-admin-login {
		min-height: 100vh;
		display: grid;
		place-items: center;
		padding: var(--az-space-4);
		background: var(--az-bg-body);
	}

	.az-admin-loginbox {
		width: 100%;
		max-width: 380px;
		padding: var(--az-space-8) var(--az-space-6);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-xl);
		box-shadow: var(--az-shadow-lg);
	}

	.az-admin-loginbox img { max-height: 52px; margin: 0 auto var(--az-space-5); display: block; }

	.az-admin-loginbox h1 {
		margin: 0 0 var(--az-space-6);
		font-size: 19px;
		font-weight: 600;
		text-align: center;
	}

	.az-admin-field { margin-bottom: var(--az-space-4); }

	.az-admin-field label {
		display: block;
		margin-bottom: var(--az-space-2);
		font-size: 13px;
		opacity: .8;
	}

	.az-admin-field input {
		width: 100%;
		height: 42px;
		padding: 0 var(--az-space-3);
		background: var(--az-bg-surface-alt);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-md);
		font: inherit;
		font-size: 15px;
		color: inherit;
	}

	.az-admin-field input:focus { outline: none; border-color: var(--az-color-primary); box-shadow: var(--az-shadow-focus); }
	.az-admin-field.az-admin-bad input { border-color: #dc2626; }

	.az-admin-submit {
		width: 100%;
		height: 44px;
		margin-top: var(--az-space-2);
		background: var(--az-color-primary);
		border: 0;
		border-radius: var(--az-radius-md);
		color: #fff;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.az-admin-submit:hover { background: var(--az-color-primary-hover); }
	.az-admin-submit:active { background: var(--az-color-primary-active); }
	.az-admin-submit[disabled] { opacity: .55; cursor: default; }

	.az-admin-loginmsg {
		min-height: 20px;
		margin-top: var(--az-space-3);
		font-size: 13px;
		line-height: 1.5;
		color: #dc2626;
		text-align: center;
	}

	/* ==================== BANG DIEU KHIEN ==================== */
	.az-admin-tiles {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: var(--az-space-4);
	}

	.az-admin-tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--az-space-3);
		padding: var(--az-space-6) var(--az-space-4);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		text-align: center;
		transition: border-color var(--az-admin-dur) ease;
	}

	.az-admin-tile:hover { border-color: var(--az-color-primary); }
	.az-admin-tile i { font-size: 30px; color: var(--az-color-primary); }
	.az-admin-tile img { max-height: 46px; }
	.az-admin-tile span { font-size: 14px; font-weight: 600; }

	/* ==================== TU VAN TRUC TUYEN (V13.7.209) ==================== */
	/* Nut tai nghe tren thanh tren: AN bang thuoc tinh hidden cho toi khi may chu tra
	   Allowed = 1 - rule rieng de khong phu thuoc stylesheet mac dinh cua trinh duyet. */
	.az-admin-chatwait[hidden] { display: none; }
	.az-admin-iconbtn.az-admin-hot { color: #dc2626; }
	.az-admin-iconbtn.az-admin-pulse { animation: az-admin-pulse 1.2s ease-out 3; }

	@keyframes az-admin-pulse {
		0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
		100% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
	}

	.az-admin-chatpop { min-width: 280px; max-width: 360px; }

	.az-admin-chatpop .az-admin-chathead {
		padding: var(--az-space-2) var(--az-space-4) var(--az-space-1);
		font-size: 13px;
		font-weight: 600;
	}

	.az-admin-chatpop .az-admin-chatsub,
	.az-admin-chatpop .az-admin-chatmore {
		padding: 0 var(--az-space-4) var(--az-space-2);
		font-size: 12px;
		opacity: .7;
	}

	/* Muc khach cho: 2 dong (ten / thoi gian cho) - de len '.az-admin-pop a' (mot dong) */
	.az-admin-chatpop a.az-admin-chatitem {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2px;
		min-height: 48px;
		padding: var(--az-space-2) var(--az-space-4);
	}

	.az-admin-chatpop a.az-admin-chatitem span {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.az-admin-chatpop a.az-admin-chatitem small { font-size: 12px; opacity: .65; }

	/* So tren muc menu man tu van. Dung the <b> (khong phai span) -> khong bi rule thu gon an chu dong vao */
	.az-admin-nav a .az-admin-navbadge,
	.az-admin-tile .az-admin-tilebadge {
		flex: 0 0 auto;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: var(--az-radius-full);
		background: #dc2626;
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
	}

	/* Thanh ben thu gon: so thu lai thanh cham do goc tren bieu tuong */
	.az-admin-collapsed .az-admin-nav a { position: relative; }

	.az-admin-collapsed .az-admin-nav a .az-admin-navbadge {
		position: absolute;
		top: 4px;
		right: 8px;
		min-width: 8px;
		width: 8px;
		height: 8px;
		padding: 0;
		font-size: 0;
		line-height: 0;
	}

	.az-admin-tile { position: relative; }
	.az-admin-tile .az-admin-tilebadge { position: absolute; top: 10px; right: 10px; }

	/* ==================== DIEN THOAI / MAY TINH BANG ==================== */
	@media (max-width: 1024px) {
		.az-admin-shell,
		.az-admin-shell.az-admin-dock-open {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "topbar" "view";
		}

		/* Thanh ben truot de len, khong chiem cot */
		.az-admin-rail {
			position: fixed;
			top: 0;
			left: 0;
			width: var(--az-admin-rail-w-min);
			transform: translateX(-100%);
			transition: transform var(--az-admin-dur) ease, width var(--az-admin-dur) ease;
		}

		.az-admin-shell.az-admin-rail-open .az-admin-rail { width: 280px; transform: translateX(0); box-shadow: var(--az-shadow-xl); }
		.az-admin-shell.az-admin-rail-open .az-admin-brand span,
		.az-admin-shell.az-admin-rail-open .az-admin-nav a span,
		.az-admin-shell.az-admin-rail-open .az-admin-railtoggle span { display: inline; }
		/* AZ-AdminUI 31/10/2026 : mui ten nhom con ve bang ::before co kich thuoc -> giu inline-flex (display:inline bi the flex doi thanh khoi,
		   ::before thanh phan tu inline mat width / height / transform -> hien thanh vach doc '|' khi mo thanh ben o dien thoai) */
		.az-admin-shell.az-admin-rail-open .az-admin-nav a .az-admin-caret { display: inline-flex; }
		.az-admin-shell.az-admin-rail-open .az-admin-nav ul ul { display: block; }
		.az-admin-shell.az-admin-rail-open .az-admin-nav a { justify-content: flex-start; padding: 0 var(--az-space-3); }

		/* Thanh ben truot ra (dien thoai): hien lai so day du thay vi cham */
		.az-admin-shell.az-admin-rail-open .az-admin-nav a .az-admin-navbadge {
			position: static;
			width: auto;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			font-size: 11px;
			line-height: 18px;
		}

		.az-admin-scrim {
			position: fixed;
			inset: 0;
			z-index: calc(var(--az-admin-z-rail) - 1);
			background: var(--az-bg-overlay);
			display: none;
		}

		.az-admin-shell.az-admin-rail-open .az-admin-scrim { display: block; }

		/* Ngan keo chiem toan man tren dien thoai */
		.az-admin-dock {
			position: fixed;
			inset: 0;
			height: 100vh;
			border-left: 0;
		}

		.az-admin-search { flex: 0 0 auto; }
		.az-admin-search input { width: 34px; padding-left: 34px; padding-right: 0; }
		.az-admin-search input:focus { width: 220px; padding-right: var(--az-space-3); }
		.az-admin-rail { top: 0; }
	}

	@media (max-width: 640px) {
		/* Danh sach khach cho: bam theo man hinh, khong tran mep trai */
		.az-admin-chatpop {
			position: fixed;
			top: calc(var(--az-admin-topbar-h) + 4px);
			left: 12px;
			right: 12px;
			min-width: 0;
			max-width: none;
		}

		.az-admin-crumb { font-size: 14px; }
		.az-admin-tile { padding: var(--az-space-4) var(--az-space-3); }
		.az-admin-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--az-space-3); }
	}

	/* ==================== TON TRONG GIAM CHUYEN DONG ==================== */
	@media (prefers-reduced-motion: reduce) {
		.az-admin-shell,
		.az-admin-rail,
		.az-admin-nav ul ul,
		.az-admin-caret,
		.az-admin-tile { transition: none; }

		.az-admin-iconbtn.az-admin-pulse { animation: none; }
	}
}

/* P3-a : thay thuoc tinh style= trong script.js cu (hop dong View — khong style noi tuyen) */
@layer template {
	.az-admin-nav .az-admin-skel-nav { height: 180px; }
	.az-admin-pop .az-admin-skel-pop { height: 90px; margin: 8px; }
	.az-admin-pop .az-admin-empty-pop { padding: 14px; }
}

/* ============================================================================
   BAN 3 — AZ-DS 1.1 : THANH PHAN CUA CAC BO CUC KHUNG (@layer template — phong cach to mau duoc)
   shell.js chi tao cac phan tu nay khi bo cuc can (html[data-az-shell]) ; bo cuc rail khong co phan tu nao duoi day.
   ========================================================================== */
@layer template {
	/* ---- Cot bieu tuong nhom (dual) ---- */
	.az-admin-strip { display: none; }

	.az-admin-stripbtn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		min-height: 60px;
		padding: 8px 3px;
		border-radius: var(--az-radius-md);
		color: var(--az-text-secondary, inherit);
		font-size: 11px;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
	}

	.az-admin-stripbtn:hover { background: var(--az-bg-surface-hover); }

	.az-admin-stripbtn img,
	.az-admin-stripbtn i {
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		font-size: 19px;
		line-height: 22px;
		text-align: center;
		object-fit: contain;
	}

	.az-admin-stripbtn span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 100%;
		overflow: hidden;
		overflow-wrap: anywhere;
	}

	.az-admin-stripbtn { position: relative; }
	.az-admin-stripbtn.az-admin-cur { color: var(--az-color-primary); }

	/* so cho tren cot bieu tuong (muc «Tư vấn trực tuyến») */
	.az-admin-stripbadge {
		position: absolute;
		top: 4px;
		right: 8px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--az-radius-full);
		background: #dc2626;
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
	}
	.az-admin-stripbtn.az-admin-sel { background: var(--az-bg-surface-alt); color: var(--az-color-primary); font-weight: 600; }

	/* ---- Mui ten xuong (thanh menu ngang, thanh chuc nang) — ve bang CSS, khong dung .fal (xem ghi chu mui ten o tren) ---- */
	.az-admin-down {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 10px;
		width: 10px;
		height: 10px;
		opacity: .55;
	}

	.az-admin-down::before {
		content: '';
		width: 5px;
		height: 5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	/* ---- Bang chon nhieu cot (top : nhom cap 1 ; apps : nhom cap 2) ---- */
	.az-admin-mega {
		position: fixed;
		z-index: calc(var(--az-admin-z-topbar) + 2);
		display: grid;
		grid-template-columns: repeat(var(--az-admin-megacols, 1), minmax(180px, 232px));
		gap: var(--az-space-2) var(--az-space-5);
		max-width: calc(100vw - 16px);
		max-height: calc(100vh - var(--az-admin-head-h) - 24px);
		overflow: auto;
		padding: var(--az-space-3) var(--az-space-3) var(--az-space-4);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		box-shadow: var(--az-shadow-lg);
	}

	.az-admin-mega.az-admin-c2 { --az-admin-megacols: 2; }
	.az-admin-mega.az-admin-c3 { --az-admin-megacols: 3; }
	.az-admin-mega.az-admin-c4 { --az-admin-megacols: 4; }

	.az-admin-megacol { min-width: 0; display: flex; flex-direction: column; }

	.az-admin-megahead {
		padding: var(--az-space-2) var(--az-space-2) var(--az-space-1);
		color: var(--az-text-muted, inherit);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.az-admin-megasub {
		padding: var(--az-space-2) var(--az-space-2) 2px;
		color: var(--az-text-secondary, inherit);
		font-size: 13px;
		font-weight: 600;
	}

	.az-admin-megalink {
		display: block;
		padding: 7px var(--az-space-2);
		border-radius: var(--az-radius-md);
		color: var(--az-text-main, inherit);
		font-size: 14px;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.az-admin-megalink:hover,
	.az-admin-megalink:focus-visible { background: var(--az-bg-surface-hover); outline: none; }
	.az-admin-megalink.az-admin-on { background: var(--az-bg-surface-alt); color: var(--az-color-primary); font-weight: 600; }
	.az-admin-megalink.az-admin-d1 { padding-left: calc(var(--az-space-2) + 14px); }
	.az-admin-megalink.az-admin-d2 { padding-left: calc(var(--az-space-2) + 28px); }

	/* ---- wide : bang chon rong ca man + man che + «Mở gần đây» ---- */
	.az-admin-mega.az-admin-megawide {
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		gap: var(--az-space-3);
		max-width: none;
		padding: 18px 24px 22px;
		border-width: 0 0 1px;
		border-radius: 0;
	}

	.az-admin-megatop { display: flex; align-items: baseline; gap: var(--az-space-3); }
	.az-admin-megatop strong { font-size: 16px; }
	.az-admin-megatop span { color: var(--az-text-muted, inherit); font-size: 13px; }
	.az-admin-megacols { display: flex; flex-wrap: wrap; gap: var(--az-space-2) 40px; }
	.az-admin-megawide .az-admin-megacol { min-width: 190px; }
	.az-admin-megawide .az-admin-megalink { height: 36px; display: flex; align-items: center; padding: 0 10px; }
	.az-admin-megarecent { margin-left: auto; padding-left: var(--az-space-5); border-left: 1px solid var(--az-border-color-subtle); }

	.az-admin-megascrim {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: calc(var(--az-admin-z-topbar) + 1);
		background: rgba(16, 24, 22, .22);
	}

	html.az-dark .az-admin-megascrim { background: rgba(0, 0, 0, .45); }

	/* ---- wide : che do toan man hinh (vach nhan 3 px + nut noi) — an cho toi khi bat ---- */
	.az-admin-fullline,
	.az-admin-fullpill { display: none; }

	.az-admin-fullline {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: var(--az-admin-z-topbar);
		height: 3px;
		background: var(--az-color-primary);
	}

	.az-admin-fullpill {
		position: fixed;
		top: 8px;
		left: 50%;
		z-index: calc(var(--az-admin-z-topbar) + 1);
		align-items: center;
		gap: var(--az-space-2);
		height: 36px;
		padding: 0 14px;
		transform: translateX(-50%);
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: 18px;
		box-shadow: var(--az-shadow-lg);
		color: var(--az-text-secondary, inherit);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
	}

	.az-admin-fullpill:hover { color: var(--az-text-main, inherit); }

	.az-admin-fullpill kbd,
	.az-admin-megatop kbd {
		padding: 0 5px;
		border: 1px solid var(--az-border-color);
		border-bottom-width: 2px;
		border-radius: 4px;
		background: var(--az-bg-surface);
		color: var(--az-text-muted, inherit);
		font: 11px var(--az-font-mono, monospace);
	}

	/* ---- Thanh chuc nang cua ung dung dang mo (apps) ---- */
	.az-admin-subbar {
		grid-area: sub;
		position: sticky;
		top: var(--az-admin-topbar-h);
		z-index: calc(var(--az-admin-z-topbar) - 3);   /* duoi man o ung dung (topbar - 2) */
		display: flex;
		align-items: stretch;
		gap: 2px;
		height: var(--az-admin-subbar-h, 44px);
		padding: 0 var(--az-space-3);
		background: var(--az-bg-surface);
		border-bottom: 1px solid var(--az-border-color);
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.az-admin-subbar::-webkit-scrollbar { display: none; }

	.az-admin-subapp,
	.az-admin-sublink {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: var(--az-space-2);
		padding: 0 var(--az-space-3);
		color: var(--az-text-secondary, inherit);
		font-size: 14px;
		white-space: nowrap;
		text-decoration: none;
		box-shadow: inset 0 -2px 0 transparent;
	}

	.az-admin-subapp {
		margin-right: var(--az-space-2);
		padding-left: var(--az-space-2);
		border-right: 1px solid var(--az-border-color-subtle);
		color: var(--az-text-main, inherit);
		font-weight: 700;
	}

	.az-admin-subapp img,
	.az-admin-subapp i { width: 20px; height: 20px; font-size: 17px; line-height: 20px; text-align: center; object-fit: contain; }
	.az-admin-subapp:hover,
	.az-admin-sublink:hover { background: var(--az-bg-surface-hover); }

	.az-admin-sublink.az-admin-on,
	.az-admin-sublink[aria-expanded="true"] { color: var(--az-color-primary); box-shadow: inset 0 -2px 0 var(--az-color-primary); }
	.az-admin-sublink.az-admin-on { font-weight: 600; }

	/* ---- Ten site tren thanh tren (apps) ---- */
	.az-admin-tbrand {
		flex: 0 1 auto;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		gap: var(--az-space-2);
		color: var(--az-text-main, inherit);
		font-size: 15px;
		font-weight: 700;
		white-space: nowrap;
		text-decoration: none;
	}

	.az-admin-tbrand img { max-width: 30px; max-height: 30px; }
	.az-admin-tbrand span { overflow: hidden; text-overflow: ellipsis; }

	/* ---- Man o ung dung (apps) ---- */
	.az-admin-launcher {
		position: fixed;
		top: var(--az-admin-topbar-h);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: calc(var(--az-admin-z-topbar) - 2);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--az-space-6) var(--az-space-4) var(--az-space-8);
		background: var(--az-bg-body);
	}

	.az-admin-launchin { max-width: 1040px; margin: 0 auto; }
	.az-admin-launchsearch { position: relative; max-width: 560px; margin: 0 auto; }

	.az-admin-launchsearch i {
		position: absolute;
		top: 50%;
		left: 15px;
		transform: translateY(-50%);
		opacity: .55;
		pointer-events: none;
	}

	.az-admin-launchsearch input {
		width: 100%;
		height: 44px;
		padding: 0 var(--az-space-4) 0 42px;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-full);
		box-shadow: var(--az-shadow-sm);
		font: inherit;
		font-size: 15px;
		color: inherit;
	}

	.az-admin-launchsearch input:focus { outline: none; border-color: var(--az-color-primary); box-shadow: var(--az-shadow-focus); }

	.az-admin-launchgrid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
		gap: var(--az-space-3);
		margin-top: var(--az-space-6);
	}

	.az-admin-app {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: var(--az-space-4) var(--az-space-2) var(--az-space-3);
		border-radius: var(--az-radius-lg);
		color: var(--az-text-main, inherit);
		text-align: center;
		text-decoration: none;
	}

	.az-admin-app:hover,
	.az-admin-app:focus-visible { background: var(--az-bg-surface-hover); outline: none; }

	.az-admin-appicon {
		display: grid;
		place-items: center;
		width: 64px;
		height: 64px;
		margin-bottom: 4px;
		border: 1px solid var(--az-border-color-subtle);
		border-radius: 18px;
		background: var(--az-bg-surface);
		box-shadow: var(--az-shadow-sm);
		color: var(--az-color-primary);
		font-size: 22px;
		font-weight: 700;
	}

	.az-admin-appicon img { max-width: 38px; max-height: 38px; object-fit: contain; }

	/* O chu cai (muc menu khong co anh) : 12 sac do theo ten — lop az-admin-h0 … h11, khong style noi tuyen */
	.az-admin-appicon.az-admin-mono {
		border-color: transparent;
		background: oklch(.94 .045 var(--az-admin-apphue, 170));
		color: oklch(.42 .11 var(--az-admin-apphue, 170));
	}

	html.az-dark .az-admin-appicon.az-admin-mono {
		background: oklch(.34 .06 var(--az-admin-apphue, 170));
		color: oklch(.88 .08 var(--az-admin-apphue, 170));
	}

	.az-admin-h0 { --az-admin-apphue: 15; }
	.az-admin-h1 { --az-admin-apphue: 45; }
	.az-admin-h2 { --az-admin-apphue: 75; }
	.az-admin-h3 { --az-admin-apphue: 105; }
	.az-admin-h4 { --az-admin-apphue: 135; }
	.az-admin-h5 { --az-admin-apphue: 165; }
	.az-admin-h6 { --az-admin-apphue: 195; }
	.az-admin-h7 { --az-admin-apphue: 225; }
	.az-admin-h8 { --az-admin-apphue: 255; }
	.az-admin-h9 { --az-admin-apphue: 285; }
	.az-admin-h10 { --az-admin-apphue: 315; }
	.az-admin-h11 { --az-admin-apphue: 345; }

	.az-admin-app span { font-size: 14px; font-weight: 600; line-height: 1.3; }
	.az-admin-app small { color: var(--az-text-muted, inherit); font-size: 12px; }
	.az-admin-app.az-admin-cur .az-admin-appicon { box-shadow: 0 0 0 2px var(--az-color-primary); }

	/* ---- Ket qua tim chuc nang (man o ung dung + o tim nhanh cua top / dual / apps) ---- */
	.az-admin-launchres {
		max-width: 640px;
		margin: var(--az-space-4) auto 0;
		padding: var(--az-space-1) 0;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		box-shadow: var(--az-shadow-md);
	}

	.az-admin-searchpop {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 2;
		width: max(100%, 320px);
		max-height: min(60vh, 440px);
		overflow-y: auto;
		padding: var(--az-space-1) 0;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: var(--az-radius-lg);
		box-shadow: var(--az-shadow-lg);
	}

	.az-admin-hit {
		display: flex;
		flex-direction: column;
		gap: 1px;
		padding: 8px var(--az-space-4);
		color: var(--az-text-main, inherit);
		font-size: 14px;
		text-decoration: none;
	}

	.az-admin-hit small { color: var(--az-text-muted, inherit); font-size: 12px; }
	.az-admin-hit:hover,
	.az-admin-hit.az-admin-act { background: var(--az-bg-surface-hover); }
	.az-admin-hitnone { padding: 12px var(--az-space-4); color: var(--az-text-muted, inherit); font-size: 13px; }

	/* OS.css khong co luat [hidden] chung : display cua lop thang UA -> tu an */
	.az-admin-launchgrid[hidden],
	.az-admin-launchres[hidden] { display: none; }

	/* Bieu tuong o ung dung 3 x 3 ve bang CSS (khong phu thuoc bo font) */
	.az-admin-gridico {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: radial-gradient(circle, currentColor 1.5px, transparent 1.9px) 0 0 / 6px 6px;
	}

	@media (max-width: 1024px) {
		.az-admin-searchpop {
			position: fixed;
			top: calc(var(--az-admin-topbar-h) + 4px);
			right: 12px;
			left: 12px;
			width: auto;
		}

		.az-admin-launchgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--az-space-2); margin-top: var(--az-space-5); }
		.az-admin-launcher { padding: var(--az-space-4) var(--az-space-3) var(--az-space-6); }
	}

	@media (max-width: 640px) {
		.az-admin-tbrand span { display: none; }
	}
}

/* ============================================================================
   BAN 3 — AZ-DS 1.1 : BO CUC KHUNG (@layer shell — xep SAU style / brand)
   Moi luat bat dau bang :root[data-az-shell="<ma>"] ; vang thuoc tinh hoac "rail" = Cổ điển -> khong luat nao duoi day ap.
   Chi dat cau truc (grid, vi tri, kich thuoc, an / hien) va to lai token cuc bo ; mau lay tu token -> phong cach / Brand van to duoc.
   An bieu tuong font (.fal) : KHONG dung display:none (fontawesome ngoai layer thang khi o che do passthrough) -> dua ra ngoai dong + mo.
   ========================================================================== */
@layer shell {

	/* thead dinh cua man cu (.az-legacy) : theo tong vung dau. OS.legacy.css (top:60px) NGOAI layer khi passthrough (site classic) thang moi
	   layer -> rieng dong nay !important (important trong layer thang important / thuong ngoai layer). Chi trong khung (iframe khong co khung). */
	:root[data-az-shell] .az-admin-shell .az-legacy thead { top: calc(var(--az-admin-head-h) - 1px) !important; }

	/* ==================== dark «Thanh bên đậm» (moi kich thuoc man hinh) ==================== */
	/* 07/11/2026 (phong cach misa) : phong cach dat duoc nen / mau nhan / muc chon cua thanh ben dam qua token --az-rail-dark-* (vang = nhu cu) */
	:root[data-az-shell="dark"] {
		--az-admin-dk-bg: var(--az-rail-dark-bg, #151b23);
		--az-admin-dk-accent: var(--az-rail-dark-accent, #9cc7ff);
	}

	@supports (color: color-mix(in oklab, red 50%, blue)) {
		:root[data-az-shell="dark"] {
			--az-admin-dk-bg: var(--az-rail-dark-bg, color-mix(in oklab, var(--az-color-primary) 16%, #10151c));
			--az-admin-dk-accent: var(--az-rail-dark-accent, color-mix(in oklab, var(--az-color-primary) 40%, #ffffff));
		}

		:root.az-dark[data-az-shell="dark"] { --az-admin-dk-bg: var(--az-rail-dark-bg-dark, color-mix(in oklab, var(--az-color-primary) 9%, #0b0f14)); }
	}

	:root[data-az-shell="dark"] .az-admin-rail {
		--az-bg-surface: var(--az-admin-dk-bg);
		--az-bg-surface-hover: rgba(255, 255, 255, .07);
		--az-bg-surface-alt: rgba(255, 255, 255, .12);
		--az-brand-50: rgba(255, 255, 255, .12);
		--az-text-main: #f2f5f8;
		--az-text-secondary: rgba(238, 243, 247, .80);
		--az-text-muted: rgba(238, 243, 247, .58);
		--az-border-color: rgba(255, 255, 255, .10);
		--az-border-color-subtle: rgba(255, 255, 255, .08);
		color-scheme: dark;
		background: var(--az-admin-dk-bg);
		color: rgba(238, 243, 247, .80);
		border-right-color: transparent;
	}

	:root:not(.az-dark)[data-az-shell="dark"] .az-admin-rail { --az-color-primary: var(--az-admin-dk-accent); }
	:root[data-az-shell="dark"] .az-admin-brand span { color: #ffffff; }
	:root[data-az-shell="dark"] .az-admin-nav li.az-admin-on > a { box-shadow: inset 3px 0 0 var(--az-color-primary); }
	:root[data-az-shell="dark"] .az-admin-nav > ul > li.az-admin-on > a {   /* muc chon cap 1 : nen / chu theo phong cach (vang = nhu luat chung) */
		background: var(--az-rail-dark-on-bg, var(--az-bg-surface-alt));
		color: var(--az-rail-dark-on-text, var(--az-color-primary));
	}

	/* ==================== float «Nổi» (may tinh >= 1025px ; nho hon : nhu rail) ==================== */
	@media (min-width: 1025px) {
		:root[data-az-shell="float"] { --az-admin-gap: 12px; }

		/* token vung dau : chi trang co khung (iframe / popup cung doc lua chon rieng nhung khong co khung) */
		:root[data-az-shell="float"]:has(.az-admin-shell) {
			--az-admin-head-h: calc(var(--az-admin-topbar-h) + var(--az-admin-gap));
			--az-header-offset: var(--az-admin-head-h);
		}

		:root[data-az-shell="float"] .az-admin-shell {
			grid-template-columns: calc(var(--az-admin-rail-w) + var(--az-admin-gap)) minmax(0, 1fr);
			grid-template-rows: calc(var(--az-admin-topbar-h) + var(--az-admin-gap)) minmax(0, 1fr);
		}

		:root[data-az-shell="float"] .az-admin-shell.az-admin-dock-open {
			grid-template-columns: calc(var(--az-admin-rail-w) + var(--az-admin-gap)) minmax(0, 1fr) var(--az-admin-dock-w);
		}

		:root[data-az-shell="float"] .az-admin-rail {
			top: var(--az-admin-gap);
			height: calc(100vh - 2 * var(--az-admin-gap));
			margin: var(--az-admin-gap) 0 0 var(--az-admin-gap);
			border: 1px solid var(--az-border-color-subtle);
			border-radius: var(--az-radius-xl);
			box-shadow: var(--az-shadow-md);
		}

		:root[data-az-shell="float"] .az-admin-topbar {
			top: var(--az-admin-gap);
			margin: var(--az-admin-gap) var(--az-admin-gap) 0;
			border: 1px solid var(--az-border-color-subtle);
			border-radius: var(--az-radius-xl);
			box-shadow: var(--az-shadow-sm);
		}

		@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
			:root[data-az-shell="float"] .az-admin-topbar {
				background: color-mix(in oklab, var(--az-bg-surface) 84%, transparent);
				-webkit-backdrop-filter: saturate(1.6) blur(12px);
				backdrop-filter: saturate(1.6) blur(12px);
			}
		}

		:root[data-az-shell="float"] .az-admin-brand { border-bottom-color: transparent; }
		:root[data-az-shell="float"] .az-admin-railfoot { border-top-color: transparent; }

		:root[data-az-shell="float"] .az-admin-nav li.az-admin-on > a {
			background: var(--az-color-primary);
			color: var(--az-text-on-primary, #ffffff);
		}
	}

	/* ==================== top «Menu ngang» (may tinh >= 1025px ; nho hon : nhu rail) ==================== */
	@media (min-width: 1025px) {
		:root[data-az-shell="top"] { --az-admin-navbar-h: 46px; }

		:root[data-az-shell="top"]:has(.az-admin-shell) {
			--az-admin-head-h: calc(var(--az-admin-topbar-h) + var(--az-admin-navbar-h));
			--az-header-offset: var(--az-admin-head-h);
		}

		:root[data-az-shell="top"] .az-admin-shell {
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-rows: var(--az-admin-topbar-h) var(--az-admin-navbar-h) minmax(0, 1fr);
			grid-template-areas: "brand topbar" "nav nav" "view view";
		}

		:root[data-az-shell="top"] .az-admin-shell.az-admin-dock-open {
			grid-template-columns: auto minmax(0, 1fr) var(--az-admin-dock-w);
			grid-template-areas: "brand topbar dock" "nav nav dock" "view view dock";
		}

		/* thanh ben tan ra : ten site len o trai thanh tren, danh muc thanh hang thu hai */
		:root[data-az-shell="top"] .az-admin-rail { display: contents; }

		:root[data-az-shell="top"] .az-admin-brand {
			grid-area: brand;
			position: sticky;
			top: 0;
			z-index: var(--az-admin-z-topbar);
			max-width: 300px;
			height: var(--az-admin-topbar-h);
			justify-content: flex-start;
			padding: 0 var(--az-space-2) 0 var(--az-space-4);
			background: var(--az-bg-surface);
			border-bottom: 1px solid var(--az-border-color);
		}

		:root[data-az-shell="top"] .az-admin-brand span { display: inline; }

		:root[data-az-shell="top"] .az-admin-railfoot,
		:root[data-az-shell="top"] .az-admin-railbtn { display: none; }

		:root[data-az-shell="top"] .az-admin-topbar { padding-left: var(--az-space-2); }
		:root[data-az-shell="top"] .az-admin-crumb { padding-left: var(--az-space-3); border-left: 1px solid var(--az-border-color-subtle); }

		:root[data-az-shell="top"] .az-admin-nav {
			grid-area: nav;
			position: sticky;
			top: var(--az-admin-topbar-h);
			z-index: calc(var(--az-admin-z-topbar) - 1);
			display: flex;
			align-items: stretch;
			height: var(--az-admin-navbar-h);
			padding: 0 var(--az-space-3);
			overflow-x: auto;
			overflow-y: hidden;
			background: var(--az-bg-surface);
			border-bottom: 1px solid var(--az-border-color);
			scrollbar-width: none;
		}

		:root[data-az-shell="top"] .az-admin-nav::-webkit-scrollbar { display: none; }
		:root[data-az-shell="top"] .az-admin-nav > ul { display: flex; align-items: stretch; gap: 2px; }
		:root[data-az-shell="top"] .az-admin-nav > ul > li { display: flex; flex: 0 0 auto; }
		:root[data-az-shell="top"] .az-admin-nav > ul > li + li { margin-top: 0; }

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a {
			min-height: 0;
			gap: var(--az-space-2);
			justify-content: flex-start;
			padding: 0 var(--az-space-3);
			border-radius: 0;
			background: none;
			box-shadow: inset 0 -2px 0 transparent;
		}

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a:hover { background: var(--az-bg-surface-hover); }

		:root[data-az-shell="top"] .az-admin-nav > ul > li.az-admin-on > a,
		:root[data-az-shell="top"] .az-admin-nav > ul > li.az-admin-cur > a,
		:root[data-az-shell="top"] .az-admin-nav > ul > li.az-admin-megaon > a {
			background: none;
			color: var(--az-color-primary);
			font-weight: 600;
			box-shadow: inset 0 -2px 0 var(--az-color-primary);
		}

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a span { display: inline; flex: 0 1 auto; }

		/* tab chu, khong bieu tuong */
		:root[data-az-shell="top"] .az-admin-nav > ul > li > a > img { display: none; }

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a > i:not(.az-admin-caret):not(.az-admin-leaf) {
			position: absolute;
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			pointer-events: none;
		}

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a .az-admin-leaf { position: absolute; width: 0; opacity: 0; }

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a .az-admin-caret {
			display: inline-flex;
			flex: 0 0 10px;
			width: 10px;
			overflow: visible;
			opacity: .55;
		}

		:root[data-az-shell="top"] .az-admin-nav > ul > li > a .az-admin-caret::before { transform: translateY(-2px) rotate(45deg); }

		/* so cho tren tab (khong thu thanh cham nhu thanh ben thu gon) */
		:root[data-az-shell="top"] .az-admin-nav > ul > li > a .az-admin-navbadge {
			position: static;
			width: auto;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			font-size: 11px;
			line-height: 18px;
		}
		:root[data-az-shell="top"] .az-admin-nav ul ul { display: none; }
	}

	/* ==================== wide «Menu ngang toàn màn» (>= 761px ; nho hon : nhu rail — ngan keo) ==================== */
	@media (min-width: 761px) {
		:root[data-az-shell="wide"] { --az-admin-topbar-h: 48px; }

		/* che do toan man hinh : khong con vung dau (vach 3 px nam de len) */
		:root[data-az-shell="wide"]:has(.az-admin-shell.az-admin-full) { --az-admin-head-h: 0px; --az-header-offset: 0px; }

		:root[data-az-shell="wide"] .az-admin-shell {
			grid-template-columns: auto minmax(0, 1fr) auto;
			grid-template-rows: var(--az-admin-topbar-h) minmax(0, 1fr);
			grid-template-areas: "brand nav topbar" "view view view";
		}

		:root[data-az-shell="wide"] .az-admin-shell.az-admin-dock-open {
			grid-template-columns: auto minmax(0, 1fr) auto var(--az-admin-dock-w);
			grid-template-areas: "brand nav topbar dock" "view view view dock";
		}

		/* mot hang : ten site | danh muc | tim + nut */
		:root[data-az-shell="wide"] .az-admin-rail { display: contents; }

		:root[data-az-shell="wide"] .az-admin-brand {
			grid-area: brand;
			position: sticky;
			top: 0;
			z-index: var(--az-admin-z-topbar);
			height: var(--az-admin-topbar-h);
			gap: var(--az-space-2);
			justify-content: flex-start;
			padding: 0 6px 0 12px;
			background: var(--az-bg-surface);
			border-bottom: 1px solid var(--az-border-color);
		}

		:root[data-az-shell="wide"] .az-admin-brand img { max-width: 28px; max-height: 28px; border-radius: 7px; }
		:root[data-az-shell="wide"] .az-admin-brand span { display: inline; font-size: 15px; font-weight: 700; }

		:root[data-az-shell="wide"] .az-admin-railfoot,
		:root[data-az-shell="wide"] .az-admin-railbtn,
		:root[data-az-shell="wide"] .az-admin-crumb,
		:root[data-az-shell="wide"] .az-admin-spacer { display: none; }

		:root[data-az-shell="wide"] .az-admin-topbar { gap: 4px; padding: 0 8px 0 var(--az-space-2); }

		/* o tim co gian theo man (cot nut «auto» lay du chieu rong noi dung — o tim co dinh thi danh muc het cho) */
		:root[data-az-shell="wide"] .az-admin-search { flex: 0 0 auto; width: clamp(160px, 18vw, 300px); }

		:root[data-az-shell="wide"] .az-admin-nav {
			grid-area: nav;
			position: sticky;
			top: 0;
			z-index: var(--az-admin-z-topbar);
			display: flex;
			align-items: stretch;
			height: var(--az-admin-topbar-h);
			padding: 0 0 0 10px;
			overflow-x: auto;
			overflow-y: hidden;
			background: var(--az-bg-surface);
			border-bottom: 1px solid var(--az-border-color);
			scrollbar-width: none;
		}

		:root[data-az-shell="wide"] .az-admin-nav::-webkit-scrollbar { display: none; }
		:root[data-az-shell="wide"] .az-admin-nav > ul { display: flex; align-items: stretch; gap: 2px; }
		:root[data-az-shell="wide"] .az-admin-nav > ul > li { display: flex; flex: 0 0 auto; }
		:root[data-az-shell="wide"] .az-admin-nav > ul > li + li { margin-top: 0; }

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a {
			min-height: 0;
			gap: 5px;
			justify-content: flex-start;
			padding: 0 11px;
			border-radius: 0;
			background: none;
			color: var(--az-text-secondary, inherit);
			font-weight: 500;
			box-shadow: inset 0 -2px 0 transparent;
		}

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a:hover,
		:root[data-az-shell="wide"] .az-admin-nav > ul > li.az-admin-megaon > a { background: var(--az-bg-surface-hover); color: var(--az-text-main, inherit); }

		:root[data-az-shell="wide"] .az-admin-nav > ul > li.az-admin-on > a,
		:root[data-az-shell="wide"] .az-admin-nav > ul > li.az-admin-cur > a {
			color: var(--az-color-primary);
			font-weight: 600;
			box-shadow: inset 0 -2px 0 var(--az-color-primary);
		}

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a span { display: inline; flex: 0 1 auto; }
		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a > img { display: none; }

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a > i:not(.az-admin-caret):not(.az-admin-leaf) {
			position: absolute;
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			pointer-events: none;
		}

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a .az-admin-leaf { position: absolute; width: 0; opacity: 0; }

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a .az-admin-caret {
			display: inline-flex;
			flex: 0 0 10px;
			width: 10px;
			overflow: visible;
			opacity: .55;
		}

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a .az-admin-caret::before { transform: translateY(-2px) rotate(45deg); }

		:root[data-az-shell="wide"] .az-admin-nav > ul > li > a .az-admin-navbadge {
			position: static;
			width: auto;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			font-size: 11px;
			line-height: 18px;
		}

		:root[data-az-shell="wide"] .az-admin-nav ul ul { display: none; }

		/* toan man hinh : an ca hang menu, chi con vach nhan + nut noi */
		:root[data-az-shell="wide"] .az-admin-shell.az-admin-full { grid-template-rows: minmax(0, 1fr); grid-template-areas: "view view view"; }
		:root[data-az-shell="wide"] .az-admin-shell.az-admin-full.az-admin-dock-open { grid-template-areas: "view view view dock"; }

		:root[data-az-shell="wide"] .az-admin-full .az-admin-brand,
		:root[data-az-shell="wide"] .az-admin-full .az-admin-nav,
		:root[data-az-shell="wide"] .az-admin-full .az-admin-topbar { display: none; }

		:root[data-az-shell="wide"] .az-admin-full .az-admin-fullline { display: block; }
		:root[data-az-shell="wide"] .az-admin-full .az-admin-fullpill { display: inline-flex; }
	}

	@media (max-width: 760px) {
		:root[data-az-shell="wide"] .az-admin-fullbtn { display: none; }
	}

	/* ==================== dual «Hai cột» (may tinh >= 1025px ; nho hon : nhu rail) ==================== */
	@media (min-width: 1025px) {
		:root[data-az-shell="dual"] {
			--az-admin-strip-w: 76px;
			--az-admin-panel-w: 236px;
			--az-admin-rail-w: calc(var(--az-admin-strip-w) + var(--az-admin-panel-w));
		}

		/* thu gon = chi cot bieu tuong (con chu duoi bieu tuong) */
		:root[data-az-shell="dual"]:has(.az-admin-shell.az-admin-collapsed) { --az-admin-rail-w: var(--az-admin-strip-w); }

		:root[data-az-shell="dual"] .az-admin-rail {
			display: grid;
			grid-template-columns: var(--az-admin-strip-w) minmax(0, 1fr);
			grid-template-rows: var(--az-admin-topbar-h) minmax(0, 1fr) auto;
			grid-template-areas: "brand brand" "strip nav" "foot nav";
		}

		:root[data-az-shell="dual"] .az-admin-brand { grid-area: brand; }

		:root[data-az-shell="dual"] .az-admin-strip {
			grid-area: strip;
			display: flex;
			flex-direction: column;
			gap: 2px;
			min-height: 0;
			padding: var(--az-space-2) 6px;
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: none;
		}

		:root[data-az-shell="dual"] .az-admin-strip::-webkit-scrollbar { display: none; }

		:root[data-az-shell="dual"] .az-admin-nav {
			grid-area: nav;
			min-height: 0;
			padding: var(--az-space-3) var(--az-space-2) var(--az-space-4);
			border-left: 1px solid var(--az-border-color-subtle);
			background: var(--az-bg-surface-alt);
		}

		:root[data-az-shell="dual"] .az-admin-railfoot { grid-area: foot; }
		:root[data-az-shell="dual"] .az-admin-railtoggle { justify-content: center; padding: 0; }
		:root[data-az-shell="dual"] .az-admin-railtoggle span { display: none; }
		:root[data-az-shell="dual"] .az-admin-collapsed .az-admin-nav { display: none; }

		/* cot chuc nang : chi nhom dang chon ; ten nhom thanh tieu de */
		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li { display: none; }
		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li.az-admin-sel { display: block; }

		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li.az-admin-sel > a {
			min-height: 30px;
			margin-bottom: var(--az-space-1);
			padding: 0 var(--az-space-3);
			background: none;
			color: var(--az-text-muted, inherit);
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .04em;
			text-transform: uppercase;
			pointer-events: none;
		}

		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li.az-admin-sel > a > img { display: none; }

		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li.az-admin-sel > a > i {
			position: absolute;
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
		}

		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel > ul > li.az-admin-sel > ul { max-height: none; overflow: visible; }
		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel ul ul a { padding-left: var(--az-space-3); font-size: 14px; }
		:root[data-az-shell="dual"] .az-admin-nav.az-admin-hassel ul ul ul a { padding-left: calc(var(--az-space-3) + 28px); font-size: 13px; }
	}

	/* ==================== apps «Ô ứng dụng» (moi kich thuoc man hinh) ==================== */
	:root[data-az-shell="apps"] { --az-admin-subbar-h: 44px; }

	:root[data-az-shell="apps"]:has(.az-admin-subbar) {
		--az-admin-head-h: calc(var(--az-admin-topbar-h) + var(--az-admin-subbar-h));
		--az-header-offset: var(--az-admin-head-h);
	}

	:root[data-az-shell="apps"] .az-admin-shell,
	:root[data-az-shell="apps"] .az-admin-shell.az-admin-dock-open {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--az-admin-topbar-h) auto minmax(0, 1fr);
		grid-template-areas: "topbar" "sub" "view";
	}

	:root[data-az-shell="apps"] .az-admin-rail,
	:root[data-az-shell="apps"] .az-admin-railbtn,
	:root[data-az-shell="apps"] .az-admin-scrim { display: none; }

	:root[data-az-shell="apps"] .az-admin-crumb { padding-left: var(--az-space-3); border-left: 1px solid var(--az-border-color-subtle); }

	@media (min-width: 1025px) {
		:root[data-az-shell="apps"] .az-admin-shell.az-admin-dock-open {
			grid-template-columns: minmax(0, 1fr) var(--az-admin-dock-w);
			grid-template-areas: "topbar dock" "sub dock" "view dock";
		}
	}

	@media (prefers-reduced-motion: reduce) {
		:root[data-az-shell] .az-admin-shell { transition: none; }
	}
}