@charset "UTF-8";
/* ============================================================================
   KINGLED WEB ADMIN · style.css (template 71AA0234 · ban 1 · 31/10/2026 — sao tu A7D9FCB4 ; them .kg-navbadge)
   ----------------------------------------------------------------------------
   Y TUONG: anh sang. Thanh ben la bang dieu khien den ban dem (xanh navy Kingled),
   muc dang mo sang len nhu mot dai LED xanh la. Bong den tren thanh tren bat / tat
   = giao dien sang / toi. Man dang nhap: mot ngon den treo roi sang the dang nhap
   (khoanh khac chuyen dong duy nhat). Con lai giu yen lang de View lam viec.

   BA NGUYEN TAC CHONG XUNG DOT VOI OS CORE (giu nhu khung quan tri cu)
   1. Moi luat nam trong @layer tokens / template — dung thu tu layer cua OS.css.
      CSS ngoai layer thang moi layer, nen khong de luat nao tran ra ngoai.
      Luu y: fontawesome / zmdi / OS.notify.css / OS.legacy.css nap NGOAI layer ->
      khong an icon .fal bang display:none (an o the boc ngoai), va thanh tren cao
      dung 60px vi OS.legacy.css ghim thead cua View cu o top:60px.
   2. Lop cua khung co tien to kg-* — khong trung lop .az-* nao cua OS.css.
      Phan View chi doi qua token (mau thuong hieu, chu, bo goc the noi dung).
   3. Mau / khoang cach lay tu token ; sang toi doi theo html.az-dark cua OS core.
   ========================================================================== */

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

/* ============================== TOKENS ============================== */
@layer tokens {
	:root {
		/* Bang mau Kingled (tu template web kingledweb: xanh la #50B848, navy #213C79, do #D60101) */
		--kg-night: #14234B;         /* thanh ben: bang dieu khien ban dem */
		--kg-night-edge: #1E3163;
		--kg-navy: #213C79;          /* chu tieu de, avatar */
		--kg-ink: #16213D;           /* chu chinh cua khung */
		--kg-ink-soft: #55607A;      /* chu phu cua khung */
		--kg-leaf: #50B848;          /* dai LED: chi dung tren nen toi */
		--kg-leaf-deep: #2A8236;     /* nut chinh tren nen sang (AA voi chu trang) */
		--kg-leaf-tint: #E8F4E5;
		--kg-paper: #F3F6F1;         /* nen trang, lay tu #F3F8F1 cua web */
		--kg-line: #DDE4D9;
		--kg-lamp: #FFE3A3;          /* anh den 3000K — chi man dang nhap */
		--kg-signal: #D60101;

		--kg-rail-w: 248px;
		--kg-rail-w-min: 72px;
		--kg-top-h: 60px;            /* = top:60px cua thead OS.legacy.css */
		--kg-radius: 10px;
		--kg-dur: .2s;
		--kg-ease: cubic-bezier(.2, .7, .2, 1);
		--kg-font: "Be Vietnam Pro", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
		--kg-focus: 0 0 0 3px color-mix(in srgb, var(--kg-leaf) 45%, transparent);

		/* ---- Ghi de token OS cho moi View ----
		   Navy = than den (nut chinh, dau bang) ; xanh la = anh sang (vien focus, re chuot "sang len"). */
		--az-brand-50: #EEF2FA;
		--az-brand-100: #DCE4F4;
		--az-brand-200: #B9C8E8;
		--az-brand-300: #8AA2D4;
		--az-brand-400: #4F6DB0;
		--az-brand-500: #213C79;
		--az-brand-600: #1A3166;
		--az-brand-700: #142753;
		--az-brand-800: #0F1E40;
		--az-brand-900: #0A142C;
		--az-shadow-focus: 0 0 0 3px color-mix(in srgb, #50B848 40%, transparent);
		--az-font-sans: var(--kg-font);

		--az-bg-body: var(--kg-paper);
		--az-bg-surface-alt: #EEF2EB;
		--az-bg-surface-hover: #E1E8DD;
		--az-border-color: #D8E0D4;
		--az-border-color-strong: #ADB9A8;
		--az-border-color-subtle: #E7ECE4;
		--az-text-link: var(--kg-navy);
		--az-text-link-hover: #12285A;

		/* OS doc token nay de tinh thead bam khi cuon (OS.ui.default) */
		--az-header-offset: var(--kg-top-h);
	}

	/* Den tat: giao dien toi theo navy Kingled thay cho xam slate cua OS */
	html.az-dark {
		--kg-night: #0A1229;
		--kg-night-edge: #17244A;
		--kg-ink: #E8EDF8;
		--kg-ink-soft: #9AA6C2;
		--kg-leaf-tint: rgba(80, 184, 72, .14);
		--kg-paper: #0C1530;
		--kg-line: #22325A;

		--az-bg-body: #0C1530;
		--az-bg-surface: #131F3E;
		--az-bg-surface-alt: #0F1A36;
		--az-bg-surface-hover: #1E2D55;
		--az-border-color: #25365F;
		--az-border-color-strong: #3B4E7D;
		--az-border-color-subtle: #1A2747;
		--az-text-link: #9DB8F2;
		--az-text-link-hover: #C9D8FA;
		/* nut chinh sang hon de noi tren nen toi (chu trang 5.5:1) */
		--az-brand-500: #4466B5;
		--az-brand-600: #3B5BA8;
		--az-brand-700: #3354A0;
	}

	@media (prefers-color-scheme: dark) {
		html:not(.az-light) {
			--kg-night: #0A1229;
			--kg-night-edge: #17244A;
			--kg-ink: #E8EDF8;
			--kg-ink-soft: #9AA6C2;
			--kg-leaf-tint: rgba(80, 184, 72, .14);
			--kg-paper: #0C1530;
			--kg-line: #22325A;

			--az-bg-body: #0C1530;
			--az-bg-surface: #131F3E;
			--az-bg-surface-alt: #0F1A36;
			--az-bg-surface-hover: #1E2D55;
			--az-border-color: #25365F;
			--az-border-color-strong: #3B4E7D;
			--az-border-color-subtle: #1A2747;
			--az-text-link: #9DB8F2;
			--az-text-link-hover: #C9D8FA;
			--az-brand-500: #4466B5;
			--az-brand-600: #3B5BA8;
			--az-brand-700: #3354A0;
		}
	}
}

@layer template {

	body.kg-body {
		font-family: var(--kg-font);
		background: var(--az-bg-body);
		color: var(--az-text-main);
		-webkit-font-smoothing: antialiased;
	}

	.kg-skip {
		position: fixed;
		top: 8px;
		left: 8px;
		z-index: 9600;
		padding: 10px 14px;
		border-radius: var(--kg-radius);
		background: var(--kg-night);
		color: #fff;
		font-size: 14px;
		transform: translateY(-150%);
	}

	.kg-skip:focus { transform: none; }

	/* ============================== KHUNG ============================== */
	.kg-shell {
		min-height: 100vh;
		min-height: 100dvh;
		display: grid;
		grid-template-columns: var(--kg-rail-w) minmax(0, 1fr);
		grid-template-rows: var(--kg-top-h) minmax(0, 1fr);
		grid-template-areas:
			"rail top"
			"rail view";
	}

	.kg-shell.kg-collapsed { grid-template-columns: var(--kg-rail-w-min) minmax(0, 1fr); }
	.kg-shell.kg-ready { transition: grid-template-columns var(--kg-dur) var(--kg-ease); }

	/* ============================== THANH BEN ============================== */
	.kg-rail {
		grid-area: rail;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		height: 100dvh;
		z-index: 60;
		display: flex;
		flex-direction: column;
		background: var(--kg-night);
		box-shadow: inset -1px 0 0 var(--kg-night-edge);
		color: #C3CCE2;
		overflow: hidden;
	}

	.kg-brand {
		flex: 0 0 var(--kg-top-h);
		display: flex;
		align-items: center;
		padding: 0 16px;
		box-shadow: inset 0 -1px 0 var(--kg-night-edge);
	}

	.kg-brand-link {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
		color: #fff;
		text-decoration: none;
	}

	.kg-brand-link:hover { color: #fff; }

	.kg-brand-plate {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border-radius: var(--kg-radius);
		background: #fff;
		overflow: hidden;
		/* quang xanh rat nhe duoi bien hieu: den da bat */
		box-shadow: 0 6px 18px -8px rgba(80, 184, 72, .7);
	}

	.kg-brand-img { width: 32px; height: 32px; object-fit: contain; }
	.kg-brand-glyph { font-size: 20px; color: var(--kg-leaf-deep); }

	.kg-brand-name {
		min-width: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.kg-nav {
		flex: 1 1 auto;
		min-height: 0;
		padding: 12px 10px 16px;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .16) transparent;
	}

	.kg-tree,
	.kg-sub { list-style: none; margin: 0; padding: 0; }
	.kg-tree > .kg-node + .kg-node { margin-top: 2px; }

	/* Mot dong menu: <a> hoac <button> cung mot hinh */
	.kg-link {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 40px;
		padding: 0 10px;
		border: 0;
		border-radius: var(--kg-radius);
		background: none;
		color: inherit;
		font: inherit;
		font-size: 14px;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
	}

	.kg-rail .kg-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
	.kg-rail .kg-link:focus-visible { outline: 2px solid var(--kg-leaf); outline-offset: -2px; }

	.kg-ico {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		display: inline-grid;
		place-items: center;
		font-size: 17px;
		color: #8F9CC0;
	}

	.kg-ico img { width: 20px; height: 20px; object-fit: contain; }
	.kg-rail .kg-ico img { filter: brightness(0) invert(1); opacity: .72; }
	.kg-rail .kg-link:hover .kg-ico { color: #DCE3F3; }

	.kg-label {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Mui ten nhom: ve bang CSS (khong dung .fal — xem nguyen tac 1) */
	.kg-caret {
		flex: 0 0 14px;
		width: 14px;
		height: 14px;
		display: inline-grid;
		place-items: center;
		opacity: .55;
	}

	.kg-caret::before {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
		transition: transform var(--kg-dur) var(--kg-ease);
	}

	.kg-open > .kg-group-btn .kg-caret::before { transform: rotate(45deg) translate(-2px, -1px); }

	/* Nhom con: xo doc, duong dan doc mo de mat theo duoc tang */
	.kg-sub {
		display: none;
		position: relative;
		margin: 2px 0 6px;
	}

	.kg-open > .kg-sub { display: block; }

	.kg-sub::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: 21px;
		width: 1px;
		background: rgba(255, 255, 255, .09);
	}

	.kg-sub .kg-link { min-height: 34px; padding-left: 46px; font-size: 13.5px; color: #AEB9D4; }
	.kg-sub .kg-sub .kg-link { padding-left: 60px; }
	.kg-sub .kg-sub::before { left: 37px; }

	/* MUC DANG MO: sang len nhu dai LED */
	.kg-node.kg-on > .kg-link {
		color: #fff;
		font-weight: 500;
		background: linear-gradient(90deg, rgba(80, 184, 72, .22), rgba(80, 184, 72, .05) 70%, transparent);
	}

	.kg-node.kg-on > .kg-link::before {
		content: "";
		position: absolute;
		left: -10px;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: var(--kg-leaf);
		box-shadow: 0 0 10px 1px rgba(80, 184, 72, .75), 0 0 2px rgba(150, 230, 140, .9);
	}

	.kg-node.kg-on > .kg-link .kg-ico { color: #8BDC84; }
	.kg-group.kg-open > .kg-group-btn { color: #fff; }
	.kg-group:has(.kg-on) > .kg-group-btn .kg-ico { color: #8BDC84; }

	.kg-rail-foot {
		flex: 0 0 auto;
		padding: 8px 10px 10px;
		box-shadow: inset 0 1px 0 var(--kg-night-edge);
	}

	.kg-rail-toggle { min-height: 38px; color: #8F9CC0; font-size: 13px; }
	.kg-rail-toggle .kg-ico { font-size: 14px; transition: transform var(--kg-dur) var(--kg-ease); }

	.kg-nav-skel { display: grid; gap: 10px; padding: 6px 4px; }

	.kg-nav-skel i {
		display: block;
		height: 30px;
		border-radius: var(--kg-radius);
		background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
		background-size: 200% 100%;
		animation: kg-shimmer 1.4s linear infinite;
	}

	.kg-nav-empty { margin: 8px 6px; font-size: 13px; line-height: 1.5; color: #AEB9D4; white-space: normal; }

	/* ---- Thu gon: chi con dai bieu tuong ---- */
	.kg-collapsed .kg-brand { justify-content: center; padding: 0; }
	.kg-collapsed .kg-brand-name,
	.kg-collapsed .kg-rail .kg-label,
	.kg-collapsed .kg-rail .kg-caret,
	.kg-collapsed .kg-rail .kg-sub { display: none; }
	.kg-collapsed .kg-rail .kg-link { justify-content: center; padding: 0; }
	.kg-collapsed .kg-rail .kg-ico { font-size: 18px; }
	.kg-collapsed .kg-rail-toggle .kg-ico { transform: rotate(180deg); }
	.kg-collapsed .kg-node.kg-on > .kg-link::before { left: -10px; }
	.kg-collapsed .kg-group:has(.kg-on) > .kg-group-btn {
		background: linear-gradient(90deg, rgba(80, 184, 72, .22), rgba(80, 184, 72, .05));
		color: #fff;
	}

	/* Chu thich khi thu gon (script.js dat vao body, tranh bi thanh ben cat) */
	.kg-tip {
		position: fixed;
		z-index: 9520;
		max-width: 260px;
		padding: 7px 11px;
		border-radius: 8px;
		background: #0B132C;
		color: #fff;
		font-size: 13px;
		line-height: 1.35;
		box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5);
		pointer-events: none;
		transform: translateY(-50%);
	}

	.kg-tip[hidden] { display: none; }

	/* ============================== THANH TREN ============================== */
	.kg-top {
		grid-area: top;
		position: sticky;
		top: 0;
		z-index: 70;
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
		padding: 0 20px 0 24px;
		background: color-mix(in srgb, var(--kg-paper) 88%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(10px);
		backdrop-filter: saturate(1.4) blur(10px);
		box-shadow: inset 0 -1px 0 var(--kg-line);
	}

	.kg-top .kg-menu-btn { display: none; }

	.kg-crumb {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: baseline;
		gap: 8px;
		white-space: nowrap;
		overflow: hidden;
	}

	.kg-crumb-up {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		color: var(--kg-ink-soft);
	}

	.kg-crumb-up::after {
		content: "/";
		margin-left: 8px;
		color: color-mix(in srgb, var(--kg-ink-soft) 55%, transparent);
	}

	.kg-crumb-now {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 16px;
		font-weight: 600;
		color: var(--kg-ink);
	}

	/* ---- Tim chuc nang ---- */
	.kg-search {
		position: relative;
		flex: 0 1 340px;
		min-width: 0;
		display: flex;
		align-items: center;
	}

	.kg-search-ico {
		position: absolute;
		left: 13px;
		font-size: 15px;
		color: var(--kg-ink-soft);
		pointer-events: none;
	}

	.kg-search-input {
		width: 100%;
		height: 40px;
		padding: 0 64px 0 38px;
		border: 1px solid var(--kg-line);
		border-radius: var(--kg-radius);
		background: var(--az-bg-surface);
		color: var(--kg-ink);
		font: inherit;
		font-size: 14px;
		-webkit-appearance: none;
		appearance: none;
	}

	.kg-search-input::placeholder { color: var(--kg-ink-soft); opacity: .85; }
	.kg-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
	.kg-search-input:focus { outline: none; border-color: var(--kg-leaf-deep); box-shadow: var(--kg-focus); }

	.kg-kbd {
		position: absolute;
		right: 9px;
		padding: 2px 7px;
		border: 1px solid var(--kg-line);
		border-radius: 6px;
		background: var(--az-bg-surface-alt);
		color: var(--kg-ink-soft);
		font: 500 11px/1.5 var(--kg-font);
		pointer-events: none;
	}

	.kg-search-input:focus ~ .kg-kbd { opacity: 0; }

	.kg-search-list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		min-width: 320px;
		max-height: min(420px, 70vh);
		margin: 0;
		padding: 6px;
		list-style: none;
		overflow-y: auto;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: 12px;
		box-shadow: 0 18px 40px -16px rgba(20, 35, 75, .35);
		z-index: 80;
	}

	.kg-search-list[hidden] { display: none; }

	.kg-search-list [role="option"] {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 9px 12px 9px 14px;
		border-radius: 8px;
		cursor: pointer;
	}

	.kg-search-list [role="option"].kg-active { background: var(--kg-leaf-tint); }

	.kg-search-list [role="option"].kg-active::before {
		content: "";
		position: absolute;
		left: 4px;
		top: 9px;
		bottom: 9px;
		width: 3px;
		border-radius: 3px;
		background: var(--kg-leaf);
	}

	.kg-search-name { font-size: 14px; font-weight: 500; color: var(--kg-ink); }
	.kg-search-path { font-size: 12px; color: var(--kg-ink-soft); }
	.kg-search-empty { padding: 12px 14px; font-size: 13px; color: var(--kg-ink-soft); }

	/* ---- Nut tron + bong den + chuong + tai khoan ---- */
	.kg-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }

	.kg-iconbtn {
		position: relative;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		display: inline-grid;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: var(--kg-radius);
		background: none;
		color: var(--kg-ink-soft);
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
	}

	.kg-iconbtn:hover { background: var(--az-bg-surface-hover); color: var(--kg-ink); }
	.kg-iconbtn:focus-visible,
	.kg-avatar:focus-visible { outline: none; box-shadow: var(--kg-focus); }

	.kg-bulb.kg-lit { color: #9C6700; }
	.kg-bulb.kg-lit:hover { color: #865800; }
	.kg-bulb.kg-lit:hover i { filter: drop-shadow(0 0 6px rgba(255, 196, 64, .85)); }

	.kg-notify { line-height: 1; }

	/* so khach dang cho canh muc «Hỗ trợ trực tuyến» (script.js ChatBadge) */
	.kg-navbadge {
		margin-left: auto;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--kg-signal);
		color: #fff;
		font: 600 11px/18px var(--kg-font);
		text-align: center;
		flex: none;
	}
	.kg-collapsed .kg-rail .kg-navbadge { position: absolute; top: 2px; right: 2px; }

	.kg-badge {
		position: absolute;
		top: 4px;
		right: 3px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--kg-signal);
		box-shadow: 0 0 0 2px var(--kg-paper);
		color: #fff;
		font: 600 11px/18px var(--kg-font);
		text-align: center;
	}

	.kg-menuwrap { position: relative; margin-left: 6px; }

	.kg-avatar {
		width: 38px;
		height: 38px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--kg-navy);
		color: #fff;
		font: 600 15px/1 var(--kg-font);
		cursor: pointer;
		overflow: hidden;
		box-shadow: 0 0 0 2px var(--kg-paper), 0 0 0 3px var(--kg-line);
	}

	.kg-avatar img { width: 100%; height: 100%; object-fit: cover; }

	.kg-pop {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		min-width: 248px;
		padding: 6px;
		background: var(--az-bg-surface);
		border: 1px solid var(--az-border-color);
		border-radius: 12px;
		box-shadow: 0 18px 40px -16px rgba(20, 35, 75, .35);
		display: none;
		z-index: 80;
	}

	.kg-menuwrap.kg-open .kg-pop { display: block; }

	.kg-pop-head {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 10px 12px 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--az-border-color-subtle);
	}

	.kg-pop-head b { font-size: 14px; font-weight: 600; color: var(--kg-ink); }
	.kg-pop-head small { font-size: 12px; color: var(--kg-ink-soft); }

	.kg-pop a,
	.kg-pop button {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 38px;
		padding: 0 12px;
		border: 0;
		border-radius: 8px;
		background: none;
		color: var(--kg-ink);
		font: inherit;
		font-size: 14px;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.kg-pop a:hover,
	.kg-pop button:hover,
	.kg-pop a:focus-visible,
	.kg-pop button:focus-visible { outline: none; background: var(--az-bg-surface-hover); color: var(--kg-ink); }
	.kg-pop i { width: 18px; text-align: center; color: var(--kg-ink-soft); }
	.kg-pop hr { margin: 4px 0; border: 0; border-top: 1px solid var(--az-border-color-subtle); }

	/* ============================== VUNG VIEW ============================== */
	/* Chi dat vi tri trong luoi + le. Ben trong la viec cua View.
	   Ban 2: le dat o .kg-stage (KHONG dat tren <main>) — View SiteCartAdd xoa thuoc tinh class cua Root (= <main>). */
	/* Le 16px = dung le .az-legacy cua View doi cu (OS.legacy.css ngoai layer) -> hai ho View thang hang nhau */
	.kg-stage {
		grid-area: view;
		min-width: 0;
		padding: 16px 16px 32px;
	}

	.kg-stage > #kg-main { width: auto; min-width: 0; }
	#kg-main:focus { outline: none; }

	/* Tieu de man + the noi dung cua View: chi doi chu va bo goc theo nhan dien moi */
	.kg-stage .az-main-title {
		font-family: var(--kg-font);
		font-size: 22px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: -.01em;
		color: var(--kg-ink);
	}

	.kg-stage .az-main-content { border-radius: 12px; }

	/* View doi cu (AZ.UI.Legacy, OS.legacy.css NGOAI layer) to mau nut / dau bang bang --button-bg #1d96b2
	   va re chuot do #c11d0d. Bien khai ngoai layer nen phai !important o day moi thang (quy tac layer) —
	   ngoai le DUY NHAT cua tep, chi doi hai bien mau, khong dung vao bo cuc View. */
	body.kg-body .az-legacy {
		--button-bg: var(--az-color-primary) !important;
		--button-bg-hover: var(--kg-leaf-deep) !important;
	}
	.kg-stage table td { font-variant-numeric: tabular-nums; }

	/* Thanh day cua View SiteCartAdd (.cartfooter / .cartbutton, position: fixed) bat dau sau thanh ben : tu App_Data 2026.10.29-10
	   (thu AZDEV #3783) SiteCartAdd.css doc bien --az-main-left -> template chi dat bien (theo do rong thanh ben dang hien,
	   0 tren dien thoai), het luat !important (ban 30/10). */
	.kg-shell { --kg-rail-now: var(--kg-rail-w); --az-main-left: var(--kg-rail-now); }
	.kg-shell.kg-collapsed { --kg-rail-now: var(--kg-rail-w-min); }

	/* Bao khi man nay chua co giao dien V4 (script.js them sau vai giay neu View khong ve gi) */
	.kg-missing {
		max-width: 560px;
		margin: 48px auto;
		padding: 28px 28px 24px;
		border: 1px dashed var(--az-border-color-strong);
		border-radius: 14px;
		background: var(--az-bg-surface);
		text-align: center;
	}

	.kg-missing h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--kg-ink); }
	.kg-missing p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--kg-ink-soft); }

	.kg-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 40px;
		padding: 0 16px;
		border: 0;
		border-radius: var(--kg-radius);
		background: var(--kg-leaf-deep);
		color: #fff;
		font: 600 14px/1 var(--kg-font);
		text-decoration: none;
		cursor: pointer;
	}

	.kg-btn:hover { background: #237030; color: #fff; }

	/* Trong iframe (popup chi tiet): khong khung, nen la mau the */
	.kg-frame { background: var(--az-bg-body); }

	/* ============================== TRANG DAU ============================== */
	.kg-home { max-width: 1320px; padding: 12px 8px 0; }

	.kg-home-head { margin: 4px 0 28px; }

	.kg-home-hello {
		margin: 0;
		font-size: 26px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -.015em;
		color: var(--kg-ink);
	}

	.kg-home-date { margin: 6px 0 0; font-size: 14px; color: var(--kg-ink-soft); }

	.kg-home-sub {
		margin: 0 0 12px;
		font-size: 15px;
		font-weight: 600;
		color: var(--kg-ink);
	}

	.kg-recent { margin-bottom: 32px; }
	.kg-recent[hidden] { display: none; }

	.kg-recent-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.kg-recent-list a {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 180px;
		max-width: 280px;
		padding: 10px 14px;
		border: 1px solid var(--az-border-color);
		border-radius: 12px;
		background: var(--az-bg-surface);
		color: var(--kg-ink);
		text-decoration: none;
	}

	.kg-recent-list a:hover { border-color: var(--kg-leaf-deep); color: var(--kg-ink); }
	.kg-recent-name { font-size: 14px; font-weight: 500; }
	.kg-recent-list small { font-size: 12px; color: var(--kg-ink-soft); }

	/* Cot kieu bao (masonry): nhom dai ngan khac nhau khong de lai khoang trong */
	.kg-dir-grid {
		column-width: 264px;
		column-gap: 16px;
	}

	.kg-dir-group {
		display: inline-block;
		width: 100%;
		margin: 0 0 16px;
		break-inside: avoid;
		padding: 16px 16px 10px;
		border: 1px solid var(--az-border-color);
		border-radius: 14px;
		background: var(--az-bg-surface);
	}

	.kg-dir-title {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 8px;
		font-size: 15px;
		font-weight: 600;
		color: var(--kg-ink);
	}

	.kg-dir-title .kg-ico {
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		border-radius: 9px;
		background: var(--kg-leaf-tint);
		color: var(--kg-leaf-deep);
		font-size: 15px;
	}

	html.az-dark .kg-dir-title .kg-ico { color: #8BDC84; }
	.kg-dir-name { flex: 1 1 auto; min-width: 0; }

	.kg-dir-count {
		min-width: 24px;
		padding: 1px 8px;
		border-radius: 10px;
		background: var(--az-bg-surface-alt);
		color: var(--kg-ink-soft);
		font-size: 12px;
		font-weight: 500;
		text-align: center;
	}

	.kg-dir-list { margin: 0; padding: 0; list-style: none; }

	.kg-dir-list a {
		display: flex;
		flex-direction: column;
		gap: 1px;
		padding: 7px 8px;
		margin: 0 -8px;
		border-radius: 8px;
		color: var(--kg-ink);
		font-size: 14px;
		line-height: 1.35;
		text-decoration: none;
	}

	.kg-dir-list a:hover { background: var(--kg-leaf-tint); color: var(--kg-ink); }
	.kg-dir-list small { font-size: 11.5px; color: var(--kg-ink-soft); }

	.kg-dir-sub {
		margin: 10px 0 2px;
		padding-top: 10px;
		border-top: 1px solid var(--az-border-color-subtle);
		font-size: 12px;
		font-weight: 600;
		color: var(--kg-ink-soft);
	}

	.kg-dir-list > .kg-dir-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

	.kg-skel {
		display: inline-block;
		width: 100%;
		margin: 0 0 16px;
		height: 220px;
		border-radius: 14px;
		background: linear-gradient(90deg, var(--az-bg-surface-alt), var(--az-bg-surface), var(--az-bg-surface-alt));
		background-size: 200% 100%;
		animation: kg-shimmer 1.4s linear infinite;
	}

	.kg-empty {
		column-span: all;
		margin: 0;
		padding: 24px;
		border: 1px dashed var(--az-border-color-strong);
		border-radius: 14px;
		color: var(--kg-ink-soft);
		font-size: 14px;
	}

	/* ============================== DANG NHAP ============================== */
	.kg-login {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
		display: grid;
		place-items: start center;
		padding: calc(18vh + 40px) 16px 48px;
		background:
			radial-gradient(60% 55% at 50% 30%, rgba(255, 227, 163, .10), transparent 70%),
			linear-gradient(180deg, #0E1838 0%, #14234B 55%, #101C3E 100%);
		overflow: hidden;
		isolation: isolate;
	}

	/* Den treo: day, chao den, quang bong, chum sang */
	.kg-lamp {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}

	.kg-lamp-cord {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1px;
		height: 12vh;
		background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .35));
	}

	.kg-lamp-shade {
		position: absolute;
		top: 12vh;
		left: 50%;
		width: 132px;
		height: 46px;
		margin-left: -66px;
		background: linear-gradient(180deg, #E9EEF7 0%, #C7D0E2 100%);
		clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
	}

	.kg-lamp-glow {
		position: absolute;
		top: calc(12vh + 36px);
		left: 50%;
		width: 120px;
		height: 22px;
		margin-left: -60px;
		border-radius: 50%;
		background: #FFF4D6;
		filter: blur(7px);
		animation: kg-lamp-on 1.5s .25s ease-out both;
	}

	.kg-lamp-beam {
		position: absolute;
		top: calc(12vh + 44px);
		left: 50%;
		width: min(980px, 150vw);
		height: 78vh;
		transform: translateX(-50%);
		background: linear-gradient(180deg, rgba(255, 227, 163, .34) 0%, rgba(255, 227, 163, .12) 45%, rgba(255, 227, 163, 0) 100%);
		clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
		animation: kg-lamp-on 1.5s .25s ease-out both;
	}

	.kg-login-card {
		width: min(400px, 100%);
		padding: 32px 28px 22px;
		border-radius: 16px;
		background: #FFFFFF;
		color: #16213D;
		box-shadow:
			inset 0 1px 0 rgba(255, 236, 190, .95),
			0 0 0 1px rgba(255, 255, 255, .06),
			0 40px 80px -28px rgba(0, 0, 0, .65);
		animation: kg-card-lit 1.5s .25s ease-out both;
	}

	.kg-login-logo {
		display: block;
		width: 56px;
		height: 56px;
		margin: 0 0 18px;
		object-fit: contain;
		border-radius: 12px;
	}

	.kg-login-title {
		margin: 0;
		font-size: 24px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -.015em;
		color: #14234B;
	}

	.kg-login-site { margin: 4px 0 24px; font-size: 14px; color: #5B6680; }

	.kg-field { margin-bottom: 16px; }

	.kg-field label {
		display: block;
		margin-bottom: 6px;
		font-size: 13px;
		font-weight: 500;
		color: #3D4864;
	}

	.kg-field input {
		width: 100%;
		height: 46px;
		padding: 0 14px;
		border: 1px solid #D3DBD0;
		border-radius: var(--kg-radius);
		background: #F7F9F6;
		color: #16213D;
		font: inherit;
		font-size: 15px;
	}

	.kg-field input:focus { outline: none; border-color: var(--kg-leaf-deep); background: #fff; box-shadow: var(--kg-focus); }
	.kg-field.kg-bad input { border-color: var(--kg-signal); }
	.kg-field.kg-bad input:focus { box-shadow: 0 0 0 3px rgba(214, 1, 1, .16); }

	.kg-pass { position: relative; }
	.kg-pass input { padding-right: 48px; }

	.kg-pass-eye {
		position: absolute;
		top: 3px;
		right: 3px;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: none;
		color: #5B6680;
		font-size: 16px;
		cursor: pointer;
	}

	.kg-pass-eye:hover { color: #16213D; background: rgba(20, 35, 75, .06); }
	.kg-pass-eye:focus-visible { outline: none; box-shadow: var(--kg-focus); }

	.kg-caps { margin: 6px 0 0; font-size: 12px; color: #8A5A00; }
	.kg-caps[hidden] { display: none; }

	.kg-submit {
		width: 100%;
		height: 48px;
		margin-top: 8px;
		border: 0;
		border-radius: var(--kg-radius);
		background: var(--kg-leaf-deep);
		color: #fff;
		font: 600 15px/1 var(--kg-font);
		cursor: pointer;
	}

	.kg-submit:hover { background: #237030; }
	.kg-submit:active { background: #1D6129; }
	.kg-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--kg-leaf-deep); }
	.kg-submit[disabled] { opacity: .65; cursor: progress; }

	.kg-login-msg {
		min-height: 20px;
		margin: 12px 0 0;
		font-size: 13px;
		line-height: 1.5;
		color: #B00000;
		text-align: center;
	}

	/* ============================== CHUYEN DONG ============================== */
	@keyframes kg-shimmer {
		from { background-position: 200% 0; }
		to { background-position: -200% 0; }
	}

	/* Den bat: chop hai lan roi sang han */
	@keyframes kg-lamp-on {
		0% { opacity: 0; }
		8% { opacity: .75; }
		12% { opacity: .1; }
		20% { opacity: .9; }
		25% { opacity: .35; }
		38% { opacity: 1; }
		100% { opacity: 1; }
	}

	@keyframes kg-card-lit {
		0% { filter: brightness(.45); }
		38% { filter: brightness(1); }
		100% { filter: brightness(1); }
	}

	/* ============================== MAN NHO ============================== */
	@media (max-width: 1024px) {
		.kg-shell,
		.kg-shell.kg-collapsed {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				"top"
				"view";
		}

		/* Thanh ben truot ra de len noi dung */
		.kg-rail {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 90;
			width: min(300px, 86vw);
			transform: translateX(-104%);
			transition: transform var(--kg-dur) var(--kg-ease);
			box-shadow: none;
		}

		.kg-shell.kg-drawer .kg-rail { transform: none; box-shadow: 24px 0 48px -24px rgba(0, 0, 0, .6); }

		/* Trong ngan keo luon hien day du chu, ke ca khi da chon thu gon tren may tinh */
		.kg-shell.kg-collapsed .kg-brand { justify-content: flex-start; padding: 0 16px; }
		.kg-shell.kg-collapsed .kg-brand-name { display: -webkit-box; }
		.kg-shell.kg-collapsed .kg-rail .kg-label { display: block; }
		.kg-shell.kg-collapsed .kg-rail .kg-caret { display: inline-grid; }
		.kg-shell.kg-collapsed .kg-rail .kg-open > .kg-sub { display: block; }
		.kg-shell.kg-collapsed .kg-rail .kg-link { justify-content: flex-start; padding: 0 10px; }
		.kg-shell.kg-collapsed .kg-rail .kg-sub .kg-link { padding-left: 46px; }
		.kg-shell.kg-collapsed .kg-rail .kg-sub .kg-sub .kg-link { padding-left: 60px; }
		.kg-rail-foot { display: none; }

		.kg-scrim {
			position: fixed;
			inset: 0;
			z-index: 89;
			background: rgba(8, 14, 32, .55);
		}

		.kg-scrim[hidden] { display: none; }

		.kg-top .kg-menu-btn { display: inline-grid; margin-left: -8px; }
		.kg-top { padding: 0 12px 0 16px; gap: 8px; }
		.kg-stage { padding: 12px 12px 28px; }
		.kg-shell,
		.kg-shell.kg-collapsed { --kg-rail-now: 0px; }
	}

	@media (max-width: 720px) {
		.kg-kbd { display: none; }
		.kg-search { flex: 0 1 220px; }
		.kg-search-input { padding-right: 12px; }
		.kg-crumb-up { display: none; }
	}

	/* Dien thoai: o tim thu thanh bieu tuong, bam vao thi trai ngang thanh tren */
	@media (max-width: 560px) {
		.kg-search { flex: 0 0 40px; }
		.kg-search-input { padding: 0; width: 40px; border-color: transparent; background: none; color: transparent; cursor: pointer; }
		.kg-search-input::placeholder { color: transparent; }

		.kg-search:focus-within {
			position: absolute;
			left: 8px;
			right: 8px;
			top: 10px;
			z-index: 5;
			flex: none;
		}

		.kg-search:focus-within .kg-search-input {
			width: 100%;
			padding: 0 12px 0 38px;
			border-color: var(--kg-leaf-deep);
			background: var(--az-bg-surface);
			color: var(--kg-ink);
			cursor: text;
		}

		.kg-search:focus-within .kg-search-input::placeholder { color: var(--kg-ink-soft); }
		.kg-search-list { min-width: 0; }
		.kg-home-hello { font-size: 22px; }
		.kg-dir-grid { column-width: auto; column-count: 1; }
		.kg-recent-list a { min-width: 0; max-width: none; flex: 1 1 100%; }
		.kg-login { padding-top: calc(14vh + 36px); }
		.kg-login-card { padding: 26px 20px 18px; }
	}

	/* ============================== IN ============================== */
	@media print {
		.kg-rail,
		.kg-top,
		.kg-skip,
		.kg-scrim,
		.kg-tip { display: none; }
		.kg-shell { display: block; }
		.kg-stage { padding: 0; }
	}

	/* ============================== GIAM CHUYEN DONG ============================== */
	@media (prefers-reduced-motion: reduce) {
		.kg-shell.kg-ready,
		.kg-rail,
		.kg-caret::before,
		.kg-rail-toggle .kg-ico { transition: none; }
		.kg-lamp-glow,
		.kg-lamp-beam,
		.kg-login-card,
		.kg-skel,
		.kg-nav-skel i { animation: none; }
	}
}