@charset "UTF-8";
/* ============================================================================
   KINGLED SALES · style.css (template 7C948C3C · ban 1 · 29/10/2026)
   ----------------------------------------------------------------------------
   Trang dat hang / van don (site Kingled Seller, menu Menu/BANHANG). Cung ho voi
   Kingled Admin 2026 (A7D9FCB4): cung token, thanh ben, thanh tren, man dang nhap.
   Rieng trang nay: nut "Tao don" tren thanh tren, trang dau = o cong viec (o Tao don
   hang noi bat), vung View boc trong .kg-stage (vai View xoa class cua <main>).
   ----------------------------------------------------------------------------
   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-text {
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.kg-brand-name {
		min-width: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Nhan trang: chu xanh la cua dai LED, de nhan ra dang o trang ban hang (khac trang quan tri) */
	.kg-brand-tag {
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: .02em;
		color: #8BDC84;
		white-space: nowrap;
	}

	.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-text,
	.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; }

	/* ---- Nut Tao don (script.js chi hien khi menu co Site/Cart/Add) ---- */
	.kg-cta {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 16px 0 14px;
		border-radius: var(--kg-radius);
		background: var(--kg-leaf-deep);
		color: #fff;
		font: 600 14px/1 var(--kg-font);
		text-decoration: none;
		white-space: nowrap;
		box-shadow: 0 8px 18px -12px rgba(42, 130, 54, .95);
	}

	.kg-cta[hidden] { display: none; }
	.kg-cta i { font-size: 14px; }
	.kg-cta:hover { background: #237030; color: #fff; }
	.kg-cta:active { background: #1D6129; }
	.kg-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--az-bg-body), 0 0 0 5px var(--kg-leaf-deep); }

	.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; }

	.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.
	   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; }

	/* View SiteCartAdd (Tao don hang) ghim thanh tong tien / nut dat hang o day man (position: fixed; left: 0; width: 100%)
	   theo khung cu khong co thanh ben -> bat dau sau thanh ben. SiteCartAdd.css nap NGOAI layer nen phai !important —
	   ngoai le thu hai cua tep, chi doi diem dau / cuoi cua hai thanh nay, khong dung vao bo cuc khac cua View. */
	.kg-shell { --kg-rail-now: var(--kg-rail-w); }
	.kg-shell.kg-collapsed { --kg-rail-now: var(--kg-rail-w-min); }

	.kg-shell .kg-stage .SiteCartAdd .cartfooter,
	.kg-shell .kg-stage .SiteCartAddSelect .cartbutton {
		left: var(--kg-rail-now) !important;
		right: 0 !important;
		width: auto !important;
	}

	/* 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: 1200px; 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);
	}

	/* ---- O cong viec: moi chuc nang trong menu mot o ---- */
	.kg-acts { margin-bottom: 32px; }

	.kg-act-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 16px;
	}

	.kg-act {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 14px;
		min-height: 112px;
		padding: 18px 44px 18px 18px;
		border: 1px solid var(--az-border-color);
		border-radius: 14px;
		background: var(--az-bg-surface);
		color: var(--kg-ink);
		text-decoration: none;
		overflow: hidden;
		transition: border-color var(--kg-dur) var(--kg-ease), box-shadow var(--kg-dur) var(--kg-ease);
	}

	.kg-act:hover { border-color: var(--kg-leaf-deep); box-shadow: 0 12px 28px -20px rgba(20, 35, 75, .6); color: var(--kg-ink); }
	.kg-act:focus-visible { outline: none; border-color: var(--kg-leaf-deep); box-shadow: var(--kg-focus); }

	.kg-act .kg-act-ico {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: var(--kg-leaf-tint);
		color: var(--kg-leaf-deep);
		font-size: 19px;
	}

	.kg-act .kg-act-ico img { width: 24px; height: 24px; }
	html.az-dark .kg-act .kg-act-ico { color: #8BDC84; }

	.kg-act-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
	.kg-act-path { font-size: 12px; font-weight: 500; color: var(--kg-ink-soft); }
	.kg-act-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
	.kg-act-desc { font-size: 13.5px; line-height: 1.45; color: var(--kg-ink-soft); }

	/* Mui ten "di toi": ve bang CSS (khong dung .fal — nguyen tac 1) */
	.kg-act-go {
		position: absolute;
		top: 50%;
		right: 20px;
		width: 9px;
		height: 9px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: translateY(-50%) rotate(45deg);
		opacity: .3;
		transition: opacity var(--kg-dur) var(--kg-ease), right var(--kg-dur) var(--kg-ease);
	}

	.kg-act:hover .kg-act-go { opacity: .75; right: 16px; }

	/* O Tao don hang: viec chinh cua trang — nen xanh la dam, dai LED sang o canh tren */
	.kg-act-primary {
		grid-column: span 2;
		min-height: 128px;
		border-color: transparent;
		background: linear-gradient(135deg, #2A8236 0%, #1F6B2B 100%);
		color: #fff;
	}

	.kg-act-primary::before {
		content: "";
		position: absolute;
		top: 0;
		left: 18px;
		right: 18px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: #9BE394;
		box-shadow: 0 0 12px 1px rgba(139, 220, 132, .85);
	}

	.kg-act-primary:hover { border-color: transparent; color: #fff; box-shadow: 0 16px 32px -18px rgba(31, 107, 43, .95); }
	.kg-act-primary:focus-visible { box-shadow: 0 0 0 3px var(--az-bg-body), 0 0 0 5px var(--kg-leaf-deep); }
	.kg-act-primary .kg-act-ico { background: rgba(255, 255, 255, .16); color: #fff; }
	html.az-dark .kg-act-primary .kg-act-ico { color: #fff; }
	.kg-act-primary .kg-act-path,
	.kg-act-primary .kg-act-desc { color: rgba(255, 255, 255, .84); }
	.kg-act-primary .kg-act-name { font-size: 19px; }
	.kg-act-primary .kg-act-go { opacity: .6; }

	/* ---- Mo gan day ---- */
	.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); }

	.kg-skel {
		display: block;
		height: 112px;
		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 {
		grid-column: 1 / -1;
		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 0; font-size: 14px; color: #5B6680; }
	.kg-login-tag { margin: 2px 0 24px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--kg-leaf-deep); }

	.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-text { display: flex; }
		.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) {
		/* Nut Tao don thu thanh bieu tuong (chu van cho may doc man hinh) */
		.kg-cta { width: 40px; padding: 0; justify-content: center; }
		.kg-cta-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}
		.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-act-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
		.kg-act,
		.kg-act-primary { min-height: 0; padding: 16px 40px 16px 16px; }
		.kg-act-primary { grid-column: auto; }
		.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; }
		.kg-act { transition: none; }
	}
}