/* Trang khoá khu học với khách (core/khoa-khach.php, theme 28.16.312).
   Bốn kiểu theo site: flat sáng (mặc định) · flat tối (html.ae-dark-mode) · skeuo sáng (html.theme-skeuo, giấy da + nút gel Aqua) ·
   skeuo tối (walnut ấm + đồng thau). Mọi màu đi qua biến, không viền trái màu. */

.akk {
	--kk-nen: #f3f5f9;
	--kk-the: #ffffff;
	--kk-chu: #121620;
	--kk-phu: #586172;
	--kk-vien: #e3e7ee;
	--kk-nhan: #c8102e;
	--kk-nhan-nen: #fdecef;
	--kk-xanh: #2f5bea;
	--kk-xanh-nen: #edf2ff;
	--kk-nut: #121620;
	--kk-nut-chu: #ffffff;
	--kk-nut-hover: #283043;
	--kk-nut2: #ffffff;
	--kk-nut2-vien: #d5dbe5;
	--kk-nut2-chu: #121620;
	--kk-o: #f2f5fa;
	--kk-vong1: #fff6ea;
	--kk-vong2: #ffe2c2;
	--kk-bong: 0 40px 80px -52px rgba(17, 24, 39, .5), 0 1px 3px rgba(17, 24, 39, .06);
	--kk-bong-nho: 0 14px 30px -24px rgba(17, 24, 39, .45);
	--kk-the-anh: radial-gradient(1200px 380px at 100% 0%, rgba(47, 91, 234, .07), transparent 60%);
	background: var(--kk-nen);
	color: var(--kk-chu);
	padding-bottom: 80px;
}

html.ae-dark-mode .akk {
	--kk-nen: #0d0f14;
	--kk-the: #161a22;
	--kk-chu: #eceef3;
	--kk-phu: #a3aab7;
	--kk-vien: #272c37;
	--kk-nhan: #ff7a85;
	--kk-nhan-nen: rgba(255, 122, 133, .12);
	--kk-xanh: #8aa6ff;
	--kk-xanh-nen: rgba(138, 166, 255, .12);
	--kk-nut: #f2f4f8;
	--kk-nut-chu: #0d0f14;
	--kk-nut-hover: #ffffff;
	--kk-nut2: #1d222c;
	--kk-nut2-vien: #323947;
	--kk-nut2-chu: #eceef3;
	--kk-o: #1f2430;
	--kk-vong1: #2b2217;
	--kk-vong2: #3b2b17;
	--kk-bong: 0 40px 80px -48px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .35);
	--kk-bong-nho: 0 14px 30px -22px rgba(0, 0, 0, .8);
	--kk-the-anh: radial-gradient(1200px 380px at 100% 0%, rgba(138, 166, 255, .08), transparent 60%);
}

/* skeuo sáng: bàn giấy da, thẻ giấy kem có gờ, nút gel Aqua */
html.theme-skeuo .akk {
	--kk-nen: #ece2cc;
	--kk-the: linear-gradient(180deg, #fffaf0, #f6ebd5);
	--kk-chu: #34281a;
	--kk-phu: #6c5b40;
	--kk-vien: #dccaa4;
	--kk-nhan: #a8321f;
	--kk-nhan-nen: rgba(168, 50, 31, .1);
	--kk-xanh: #1f63c8;
	--kk-xanh-nen: rgba(31, 99, 200, .1);
	--kk-nut: linear-gradient(180deg, #6fb0ff 0%, #2f80ed 52%, #1c6ad6 53%, #3a8af0 100%);
	--kk-nut-chu: #ffffff;
	--kk-nut-hover: linear-gradient(180deg, #82bcff 0%, #3c8cf5 52%, #2275e2 53%, #4796f6 100%);
	--kk-nut2: linear-gradient(180deg, #fffdf7, #efe3c8);
	--kk-nut2-vien: #cdb88e;
	--kk-nut2-chu: #3b2d1b;
	--kk-o: linear-gradient(180deg, #fff8e8, #f1e3c3);
	--kk-vong1: #fff7e6;
	--kk-vong2: #f0d6a6;
	--kk-bong: 0 30px 60px -40px rgba(70, 48, 16, .55), 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(70, 48, 16, .12);
	--kk-bong-nho: 0 10px 22px -16px rgba(70, 48, 16, .55), 0 1px 0 rgba(255, 255, 255, .85) inset;
	--kk-the-anh: none;
}

/* skeuo tối: walnut ấm, chữ kem, nút đồng thau */
html.theme-skeuo.ae-dark-mode .akk {
	--kk-nen: #241a12;
	--kk-the: linear-gradient(180deg, #2f2820, #241e16);
	--kk-chu: #ecdcb8;
	--kk-phu: #c2ab84;
	--kk-vien: rgba(255, 214, 150, .14);
	--kk-nhan: #e6bc78;
	--kk-nhan-nen: rgba(230, 188, 120, .12);
	--kk-xanh: #e6bc78;
	--kk-xanh-nen: rgba(230, 188, 120, .1);
	--kk-nut: linear-gradient(180deg, #f4d98a, #c89b40);
	--kk-nut-chu: #4a3210;
	--kk-nut-hover: linear-gradient(180deg, #f8e2a0, #d2a64c);
	--kk-nut2: linear-gradient(180deg, #3a3026, #2c2419);
	--kk-nut2-vien: rgba(255, 214, 150, .18);
	--kk-nut2-chu: #ecdcb8;
	--kk-o: linear-gradient(180deg, #3a3026, #2c2419);
	--kk-vong1: #3a2c1c;
	--kk-vong2: #2a2016;
	--kk-bong: 0 30px 60px -36px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 214, 150, .08) inset;
	--kk-bong-nho: 0 12px 26px -18px rgba(0, 0, 0, .8);
	--kk-the-anh: none;
}

.akk *,
.akk *::before,
.akk *::after { box-sizing: border-box; }

.akk-khung {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding-left: max(20px, env(safe-area-inset-left, 0px));
	padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ── thẻ chính ── */
.akk-hero { padding-top: 40px; }
.akk-the {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: center;
	gap: 48px;
	padding: 56px 60px;
	border: 1px solid var(--kk-vien);
	border-radius: 28px;
	background: var(--kk-the-anh), var(--kk-the);
	box-shadow: var(--kk-bong);
	overflow: hidden;
}
.akk-noi { min-width: 0; }
.akk-mat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	background: var(--kk-nhan-nen);
	color: var(--kk-nhan);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.akk svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.akk-mat svg { width: 16px; height: 16px; }
.akk h1 {
	margin: 18px 0 14px;
	color: var(--kk-chu);
	font-size: clamp(28px, 3.3vw, 44px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.akk-loi {
	max-width: 36em;
	margin: 0;
	color: var(--kk-phu);
	font-size: 17px;
	line-height: 1.65;
	text-wrap: pretty;
}
.akk-hang-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.akk-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.akk-nut svg { width: 18px; height: 18px; transition: transform .15s ease; }
.akk-nut-chinh { border: 1px solid transparent; background: var(--kk-nut); color: var(--kk-nut-chu) !important; box-shadow: var(--kk-bong-nho); }
.akk-nut-chinh:hover { background: var(--kk-nut-hover); transform: translateY(-1px); }
.akk-nut-chinh:hover svg { transform: translateX(3px); }
.akk-nut-phu { border: 1px solid var(--kk-nut2-vien); background: var(--kk-nut2); color: var(--kk-nut2-chu) !important; }
.akk-nut-phu:hover { transform: translateY(-1px); box-shadow: var(--kk-bong-nho); }
.akk-nut:focus-visible { outline: 3px solid var(--kk-xanh); outline-offset: 3px; }
html.theme-skeuo .akk-nut-chinh { border-color: rgba(10, 60, 140, .55); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 18px -10px rgba(20, 70, 160, .7); }
html.theme-skeuo.ae-dark-mode .akk-nut-chinh { border-color: #8d6822; text-shadow: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 18px -10px rgba(0, 0, 0, .8); }
.akk-goi { margin: 22px 0 0; color: var(--kk-phu); font-size: 14.5px; line-height: 1.6; }
.akk-goi a { color: var(--kk-chu) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kk-nut2-vien); }
.akk-gio { display: block; margin-top: 2px; font-size: 13px; }
.akk-bao {
	margin-top: 26px;
	padding: 18px 20px;
	border: 1px solid var(--kk-vien);
	border-radius: 18px;
	background: var(--kk-o);
}
.akk-bao p { margin: 0 0 14px; color: var(--kk-chu); font-size: 15px; line-height: 1.6; }

/* Anh Sói + nhãn khoá */
.akk-hinh { position: relative; display: grid; place-items: center; min-width: 0; padding-bottom: 26px; }
.akk-vong {
	display: grid;
	place-items: center;
	width: min(330px, 100%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, var(--kk-vong1), var(--kk-vong2));
	box-shadow: 0 0 0 1px var(--kk-vien) inset, 0 0 0 14px color-mix(in srgb, var(--kk-vong2) 30%, transparent);
}
.akk-vong img { width: 74%; height: auto; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .18)); }
.akk-nhan {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--kk-vien);
	border-radius: 999px;
	background: var(--kk-the);
	box-shadow: var(--kk-bong-nho);
	color: var(--kk-chu);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.akk-nhan svg { width: 17px; height: 17px; color: var(--kk-nhan); }

/* ── học viên có gì ── */
.akk-loi-ich { padding-top: 56px; }
.akk h2 {
	margin: 0 0 20px;
	color: var(--kk-chu);
	font-size: clamp(21px, 2.1vw, 26px);
	font-weight: 800;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.akk-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.akk-luoi li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 22px 22px 24px;
	border: 1px solid var(--kk-vien);
	border-radius: 20px;
	background: var(--kk-the);
	box-shadow: var(--kk-bong-nho);
}
.akk-o { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; background: var(--kk-xanh-nen); color: var(--kk-xanh); }
html.theme-skeuo .akk-o { background: var(--kk-o); border: 1px solid var(--kk-vien); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; }
html.theme-skeuo.ae-dark-mode .akk-o { box-shadow: 0 1px 0 rgba(255, 214, 150, .08) inset; }
.akk-o svg { width: 23px; height: 23px; }
.akk-luoi b { color: var(--kk-chu); font-size: 16.5px; font-weight: 750; }
.akk-luoi span:not(.akk-o) { color: var(--kk-phu); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

/* ── đề demo ── */
.akk-demo { padding-top: 56px; }
.akk-demo-loi { margin: -10px 0 20px; color: var(--kk-phu); font-size: 15px; }
.akk-demo-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.akk-demo-ds a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--kk-vien);
	border-radius: 18px;
	background: var(--kk-the);
	color: var(--kk-chu) !important;
	text-decoration: none !important;
	box-shadow: var(--kk-bong-nho);
	transition: transform .15s ease, border-color .15s ease;
}
.akk-demo-ds a:hover { transform: translateY(-2px); border-color: var(--kk-nut2-vien); }
.akk-demo-ds b { font-size: 15.5px; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.akk-mo { color: var(--kk-phu); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.akk-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--kk-nhan-nen); color: var(--kk-nhan); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; }
.akk-lam { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--kk-xanh); font-size: 14px; font-weight: 700; }
.akk-lam svg { width: 16px; height: 16px; }

/* ── trang hết lượt làm đề trên web (28.16.313): khối tải app + hướng dẫn cài nằm ngay trong trang, không popup ── */
.akk-tai { padding-top: 40px; scroll-margin-top: 96px; }
.akk-het .akk-nut-chinh:hover svg { transform: translateY(2px); }
.akk-het .akk-nut-phu svg { width: 17px; height: 17px; }

/* ── màn hẹp ── */
@media (max-width: 1024px) {
	.akk-the { gap: 32px; padding: 44px 40px; }
	.akk-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.akk-hero { padding-top: 20px; }
	.akk-the { grid-template-columns: 1fr; gap: 8px; padding: 28px 22px 30px; border-radius: 22px; }
	.akk-hinh { order: -1; justify-self: center; width: 200px; padding-bottom: 22px; }
	.akk-nhan { font-size: 12.5px; padding: 8px 14px; }
	.akk h1 { margin-top: 14px; }
	.akk-loi { font-size: 16px; }
	.akk-hang-nut { flex-direction: column; }
	.akk-nut { width: 100%; }
	.akk-loi-ich, .akk-demo { padding-top: 40px; }
}
@media (max-width: 520px) {
	.akk-luoi { grid-template-columns: 1fr; gap: 12px; }
	.akk-luoi li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 18px 20px; }
	.akk-luoi .akk-o { grid-row: 1 / span 2; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.akk-nut, .akk-nut svg, .akk-demo-ds a { transition: none; }
}