/* ==========================================================================
   CNL — Style riêng cho từng trang / module học tập
   ========================================================================== */

/* ==========================================================================
   1. HERO TRANG CHỦ
   ========================================================================== */
.cnl-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(44px, 6vw, 84px) clamp(56px, 7vw, 96px);
	background:
		radial-gradient(120% 90% at 85% 0%, #FFE7DF 0%, transparent 58%),
		linear-gradient(168deg, #FFF6F1 0%, var(--cnl-surface) 62%);
}
.cnl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(226, 59, 46, .13) 1px, transparent 0);
	background-size: 26px 26px;
	opacity: .55;
	mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
	pointer-events: none;
}

.cnl-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: var(--cnl-gap-xl);
	align-items: center;
}

.cnl-hero__title {
	font-size: var(--cnl-fs-hero);
	line-height: 1.1;
	letter-spacing: -.035em;
	margin: 0 0 18px;
}
.cnl-hero__title em {
	font-style: normal;
	position: relative;
	color: var(--cnl-primary);
	white-space: nowrap;
}
.cnl-hero__title em::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .06em;
	height: .28em;
	border-radius: var(--cnl-r-pill);
	background: var(--cnl-accent);
	opacity: .3;
	z-index: -1;
}

.cnl-hero__desc {
	font-size: var(--cnl-fs-lg);
	color: var(--cnl-ink-2);
	max-width: 54ch;
	margin-bottom: 26px;
}

.cnl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.cnl-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	font-weight: 600;
}
.cnl-hero__trust b { color: var(--cnl-ink); font-size: var(--cnl-fs-md); }
.cnl-hero__trust > span { display: flex; align-items: center; gap: 7px; }

/* Khối minh họa bên phải: thẻ từ vựng xếp chồng — đây là chi tiết đặc trưng
   của mockup, thay cho ảnh stock. */
.cnl-hero__visual {
	position: relative;
	/* Ảnh phủ toàn bộ cột phải, CTA card float bên dưới */
}
.cnl-hero__glow {
	position: absolute;
	width: 340px; height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 59, 46, .22), transparent 66%);
	filter: blur(18px);
}

.cnl-wordcard {
	position: relative;
	width: min(320px, 100%);
	padding: 30px 28px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-xl);
	box-shadow: var(--cnl-shadow-lg);
	text-align: center;
	z-index: 2;
}
.cnl-wordcard::before,
.cnl-wordcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: inherit;
	z-index: -1;
}
.cnl-wordcard::before { transform: rotate(-6deg) translateY(10px); opacity: .7; }
.cnl-wordcard::after { transform: rotate(5deg) translateY(18px); opacity: .45; }

.cnl-wordcard__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: 4.5rem;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 10px;
}
.cnl-wordcard__pinyin {
	font-size: var(--cnl-fs-lg);
	color: var(--cnl-primary);
	font-style: italic;
	font-weight: 600;
	margin-bottom: 4px;
}
.cnl-wordcard__meaning { color: var(--cnl-ink-2); margin-bottom: 18px; }
.cnl-wordcard__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--cnl-line);
}

/* Thẻ nổi quanh khối minh họa */
.cnl-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 15px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	box-shadow: var(--cnl-shadow);
	font-size: var(--cnl-fs-sm);
	font-weight: 700;
	z-index: 3;
	animation: cnl-float 5s var(--cnl-ease) infinite;
}
.cnl-float--tl { top: 8%; left: -4%; animation-delay: -1.4s; }
.cnl-float--br { bottom: 10%; right: -6%; }
.cnl-float__icon {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 10px;
	background: var(--cnl-green-100);
	color: var(--cnl-green);
}
.cnl-float--br .cnl-float__icon { background: var(--cnl-accent-100); color: var(--cnl-gold); }
.cnl-float small { display: block; font-weight: 600; color: var(--cnl-muted); font-size: 11px; }

@keyframes cnl-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-11px); }
}

/* ==========================================================================
   2. HERO TRANG TRONG (archive / taxonomy)
   ========================================================================== */
.cnl-pagehero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(28px, 4vw, 52px) clamp(32px, 4.5vw, 60px);
	background: linear-gradient(135deg, var(--cnl-primary) 0%, var(--cnl-primary-700) 100%);
	color: #fff;
}
.cnl-pagehero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1px, transparent 0);
	background-size: 24px 24px;
	opacity: .6;
}
.cnl-pagehero__inner { position: relative; }
.cnl-pagehero__title { color: #fff; margin: 0 0 10px; }
.cnl-pagehero__desc {
	color: rgba(255, 255, 255, .84);
	font-size: var(--cnl-fs-lg);
	max-width: 62ch;
	margin: 0;
}
.cnl-pagehero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	font-size: var(--cnl-fs-base);
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}
.cnl-pagehero__meta li { display: flex; align-items: center; gap: 7px; margin: 0; }
.cnl-pagehero .cnl-search { margin-top: 22px; max-width: 560px; }

.cnl-pagehero .cnl-crumbs__item,
.cnl-pagehero .cnl-crumbs__item a { color: rgba(255, 255, 255, .72); }
.cnl-pagehero .cnl-crumbs__item a:hover,
.cnl-pagehero .cnl-crumbs__item [aria-current] { color: #fff; }

.cnl-pagehero__hanzi {
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--cnl-font-hanzi);
	font-size: clamp(120px, 20vw, 240px);
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .1);
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   3. LƯỚI HSK 1–6
   ========================================================================== */
.cnl-hsk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	overflow: hidden;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-sm);
	transition: transform var(--cnl-t), box-shadow var(--cnl-t);
}
.cnl-hsk-card:hover { transform: translateY(-4px); box-shadow: var(--cnl-shadow); }
.cnl-hsk-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--cnl-hsk-color, var(--cnl-primary));
}
.cnl-hsk-card__hanzi {
	position: absolute;
	right: -8px; bottom: -22px;
	font-family: var(--cnl-font-hanzi);
	font-size: 104px;
	font-weight: 700;
	line-height: 1;
	color: var(--cnl-hsk-color, var(--cnl-primary));
	opacity: .07;
	pointer-events: none;
}
.cnl-hsk-card__level {
	font-size: var(--cnl-fs-xl);
	font-weight: 800;
	color: var(--cnl-hsk-color, var(--cnl-primary));
	letter-spacing: -.02em;
}
.cnl-hsk-card__words { font-size: var(--cnl-fs-sm); font-weight: 700; color: var(--cnl-ink-2); }
.cnl-hsk-card__desc {
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	flex: 1;
	margin: 0;
}
.cnl-hsk-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.cnl-hsk-card[data-accent="red"] { --cnl-hsk-color: var(--cnl-primary); }
.cnl-hsk-card[data-accent="orange"] { --cnl-hsk-color: var(--cnl-orange); }
.cnl-hsk-card[data-accent="gold"] { --cnl-hsk-color: var(--cnl-gold); }
.cnl-hsk-card[data-accent="green"] { --cnl-hsk-color: var(--cnl-green); }
.cnl-hsk-card[data-accent="blue"] { --cnl-hsk-color: var(--cnl-blue); }
.cnl-hsk-card[data-accent="purple"] { --cnl-hsk-color: var(--cnl-purple); }
.cnl-hsk-card[data-accent="teal"] { --cnl-hsk-color: var(--cnl-teal); }
.cnl-hsk-card[data-accent="indigo"] { --cnl-hsk-color: var(--cnl-indigo); }
.cnl-hsk-card[data-accent="sky"] { --cnl-hsk-color: var(--cnl-sky); }

/* ==========================================================================
   4. THẺ CHỦ ĐỀ
   ========================================================================== */
.cnl-topic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px;
	overflow: hidden;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	transition: all var(--cnl-t);
}
.cnl-topic-card:hover {
	transform: translateY(-3px);
	border-color: var(--cnl-topic-color, var(--cnl-primary));
	box-shadow: var(--cnl-shadow);
}
.cnl-topic-card__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--cnl-topic-color, var(--cnl-primary)) 12%, transparent);
	color: var(--cnl-topic-color, var(--cnl-primary));
}
.cnl-topic-card__name {
	font-weight: 800;
	font-size: var(--cnl-fs-md);
	color: var(--cnl-ink);
	margin: 0;
}
.cnl-topic-card__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
}
.cnl-topic-card__count { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); font-weight: 600; }
.cnl-topic-card__bg {
	position: absolute;
	right: -6px; bottom: -18px;
	font-family: var(--cnl-font-hanzi);
	font-size: 74px;
	font-weight: 700;
	color: var(--cnl-topic-color, var(--cnl-primary));
	opacity: .06;
	line-height: 1;
	pointer-events: none;
}

.cnl-topic-card[data-accent="red"] { --cnl-topic-color: var(--cnl-primary); }
.cnl-topic-card[data-accent="blue"] { --cnl-topic-color: var(--cnl-blue); }
.cnl-topic-card[data-accent="purple"] { --cnl-topic-color: var(--cnl-purple); }
.cnl-topic-card[data-accent="teal"] { --cnl-topic-color: var(--cnl-teal); }
.cnl-topic-card[data-accent="gold"] { --cnl-topic-color: var(--cnl-gold); }
.cnl-topic-card[data-accent="orange"] { --cnl-topic-color: var(--cnl-orange); }
.cnl-topic-card[data-accent="sky"] { --cnl-topic-color: var(--cnl-sky); }
.cnl-topic-card[data-accent="green"] { --cnl-topic-color: var(--cnl-green); }
.cnl-topic-card[data-accent="indigo"] { --cnl-topic-color: var(--cnl-indigo); }

/* ==========================================================================
   5. THẺ KHÓA HỌC
   ========================================================================== */
.cnl-course-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-sm);
	transition: transform var(--cnl-t), box-shadow var(--cnl-t);
}
.cnl-course-card:hover { transform: translateY(-4px); box-shadow: var(--cnl-shadow); }

.cnl-course-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--cnl-course-color, var(--cnl-primary)) 90%, #000),
		color-mix(in srgb, var(--cnl-course-color, var(--cnl-primary)) 55%, #fff));
	display: grid;
	place-items: center;
}
.cnl-course-card__media img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--cnl-t-slow);
}
.cnl-course-card:hover .cnl-course-card__media img { transform: scale(1.05); }
.cnl-course-card__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: 76px;
	font-weight: 700;
	color: rgba(255, 255, 255, .92);
	line-height: 1;
}
.cnl-course-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
}

.cnl-course-card__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	padding: 18px;
}
.cnl-course-card__title {
	font-size: var(--cnl-fs-md);
	font-weight: 800;
	line-height: 1.35;
	margin: 0;
}
.cnl-course-card__title a { color: var(--cnl-ink); }
.cnl-course-card__title a:hover { color: var(--cnl-primary); }
.cnl-course-card__desc {
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cnl-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: var(--cnl-fs-xs);
	color: var(--cnl-muted);
	font-weight: 600;
}
.cnl-course-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.cnl-course-card__progress { display: flex; flex-direction: column; gap: 5px; }
.cnl-course-card__progress b { font-size: var(--cnl-fs-xs); color: var(--cnl-ink-2); }

.cnl-course-card[data-accent="red"] { --cnl-course-color: var(--cnl-primary); }
.cnl-course-card[data-accent="gold"] { --cnl-course-color: var(--cnl-gold); }
.cnl-course-card[data-accent="purple"] { --cnl-course-color: var(--cnl-purple); }
.cnl-course-card[data-accent="teal"] { --cnl-course-color: var(--cnl-teal); }
.cnl-course-card[data-accent="blue"] { --cnl-course-color: var(--cnl-blue); }
.cnl-course-card[data-accent="indigo"] { --cnl-course-color: var(--cnl-indigo); }

/* ==========================================================================
   6. THẺ / DÒNG TỪ VỰNG
   ========================================================================== */
.cnl-vocab-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	transition: all var(--cnl-t);
}
.cnl-vocab-row:hover { border-color: var(--cnl-primary); box-shadow: var(--cnl-shadow-sm); }
.cnl-vocab-row__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.1;
	min-width: 2.6ch;
}
.cnl-vocab-row__pinyin {
	font-style: italic;
	font-weight: 600;
	color: var(--cnl-primary);
	font-size: var(--cnl-fs-base);
}
.cnl-vocab-row__meaning { font-weight: 600; color: var(--cnl-ink); }
.cnl-vocab-row__example {
	margin-top: 5px;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
}
.cnl-vocab-row__example .cnl-hanzi { color: var(--cnl-ink-2); }
.cnl-vocab-row__actions { display: flex; align-items: center; gap: 6px; }

.cnl-star {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--cnl-muted);
	transition: all var(--cnl-t);
}
.cnl-star:hover { background: var(--cnl-accent-100); color: var(--cnl-accent); }
.cnl-star.is-active { color: var(--cnl-accent); }
.cnl-star.is-active svg { fill: currentColor; }

/* Thẻ từ vựng dạng lưới */
.cnl-vocab-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	text-align: center;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	transition: all var(--cnl-t);
}
.cnl-vocab-card:hover { transform: translateY(-3px); border-color: var(--cnl-primary); box-shadow: var(--cnl-shadow); }
.cnl-vocab-card__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.1;
}
.cnl-vocab-card__pinyin { font-style: italic; color: var(--cnl-primary); font-weight: 600; }
.cnl-vocab-card__meaning { font-size: var(--cnl-fs-sm); color: var(--cnl-ink-2); }
.cnl-vocab-card__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--cnl-line);
}

/* ==========================================================================
   7. FLASHCARD (lật thẻ 3D)
   ========================================================================== */
.cnl-flash {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cnl-gap);
}
.cnl-flash__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 560px;
	font-size: var(--cnl-fs-sm);
	font-weight: 700;
	color: var(--cnl-muted);
}

.cnl-flash__stage {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 4 / 3;
	perspective: 1400px;
}
.cnl-flash__card {
	position: relative;
	width: 100%; height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s var(--cnl-ease);
	cursor: pointer;
	border: 0;
	padding: 0;
	background: none;
}
.cnl-flash__card.is-flipped { transform: rotateY(180deg); }

.cnl-flash__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-xl);
	box-shadow: var(--cnl-shadow-lg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	text-align: center;
}
.cnl-flash__face--back {
	transform: rotateY(180deg);
	background: linear-gradient(160deg, var(--cnl-card), var(--cnl-primary-50));
}
.cnl-flash__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: clamp(4rem, 13vw, 7rem);
	font-weight: 500;
	line-height: 1;
}
.cnl-flash__pinyin {
	font-size: var(--cnl-fs-xl);
	font-style: italic;
	font-weight: 600;
	color: var(--cnl-primary);
}
.cnl-flash__meaning { font-size: var(--cnl-fs-lg); font-weight: 700; }
.cnl-flash__example {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--cnl-line);
	font-size: var(--cnl-fs-base);
	color: var(--cnl-ink-2);
	max-width: 40ch;
}
.cnl-flash__hint {
	position: absolute;
	bottom: 18px;
	font-size: var(--cnl-fs-xs);
	color: var(--cnl-muted);
	font-weight: 600;
}

.cnl-flash__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 560px;
}
.cnl-flash__controls .cnl-btn { flex: 1; min-width: 130px; }
.cnl-srs-btn { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.cnl-srs-btn small { font-weight: 600; opacity: .78; font-size: 11px; }

.cnl-flash__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: var(--cnl-gap-xl) var(--cnl-gap);
	text-align: center;
}

/* ==========================================================================
   8. TẬP VIẾT CHỮ HÁN
   ========================================================================== */
.cnl-write {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--cnl-gap-lg);
	align-items: start;
}
.cnl-write__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cnl-gap);
	padding: var(--cnl-gap-lg);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-sm);
}

/* Ô mễ tự cách — lưới luyện viết truyền thống */
.cnl-write__grid {
	position: relative;
	width: min(420px, 100%);
	aspect-ratio: 1;
	background: var(--cnl-card);
	border: 2px solid var(--cnl-primary);
	border-radius: var(--cnl-r-sm);
	overflow: hidden;
	touch-action: none;
}
.cnl-write__grid::before,
.cnl-write__grid::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cnl-write__grid::before {
	background:
		linear-gradient(to right, transparent calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 32%, transparent) calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 32%, transparent) calc(50% + .5px), transparent calc(50% + .5px)),
		linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 32%, transparent) calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 32%, transparent) calc(50% + .5px), transparent calc(50% + .5px));
}
.cnl-write__grid::after {
	background:
		linear-gradient(45deg, transparent calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 20%, transparent) calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 20%, transparent) calc(50% + .5px), transparent calc(50% + .5px)),
		linear-gradient(-45deg, transparent calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 20%, transparent) calc(50% - .5px), color-mix(in srgb, var(--cnl-primary) 20%, transparent) calc(50% + .5px), transparent calc(50% + .5px));
}
.cnl-write__ghost {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--cnl-font-hanzi);
	font-size: 74%;
	font-weight: 400;
	color: var(--cnl-line);
	line-height: 1;
	user-select: none;
	pointer-events: none;
	z-index: 1;
	container-type: size;
}
.cnl-write__canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: crosshair;
	touch-action: none;
	width: 100%;
	height: 100%;
}
.cnl-write__tools {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.cnl-write__word {
	text-align: center;
}
.cnl-write__word .cnl-hanzi { font-size: 2.2rem; }

.cnl-write__strokes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.cnl-stroke-step {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	background: var(--cnl-surface-2);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-sm);
	font-family: var(--cnl-font-hanzi);
	font-size: 26px;
	color: var(--cnl-ink-2);
	position: relative;
}
.cnl-stroke-step span {
	position: absolute;
	top: 2px; left: 4px;
	font-family: var(--cnl-font);
	font-size: 10px;
	font-weight: 800;
	color: var(--cnl-primary);
}

/* Danh sách chữ để chọn */
.cnl-write__list { display: flex; flex-direction: column; gap: 6px; }
.cnl-write__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--cnl-r-sm);
	text-align: left;
	width: 100%;
	transition: all var(--cnl-t);
}
.cnl-write__item:hover { background: var(--cnl-primary-50); }
.cnl-write__item.is-active {
	background: var(--cnl-primary-50);
	border-color: var(--cnl-primary);
}
.cnl-write__item .cnl-hanzi { font-size: 1.6rem; }
.cnl-write__item small { display: block; color: var(--cnl-muted); font-size: var(--cnl-fs-xs); }

/* ==========================================================================
   9. QUIZ / BÀI THI
   ========================================================================== */
.cnl-quiz { max-width: 760px; margin-inline: auto; }
.cnl-quiz__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cnl-gap-sm);
	margin-bottom: var(--cnl-gap-sm);
}
.cnl-quiz__count { font-weight: 800; font-size: var(--cnl-fs-md); }
.cnl-quiz__timer {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	background: var(--cnl-surface-2);
	border-radius: var(--cnl-r-pill);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cnl-quiz__timer.is-low { background: var(--cnl-primary-100); color: var(--cnl-primary-700); }

.cnl-quiz__prompt {
	font-size: var(--cnl-fs-lg);
	font-weight: 700;
	margin: var(--cnl-gap) 0 6px;
}
.cnl-quiz__hanzi {
	font-family: var(--cnl-font-hanzi);
	font-size: clamp(2.4rem, 7vw, 3.4rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 10px 0;
}
.cnl-quiz__pinyin { color: var(--cnl-primary); font-style: italic; font-weight: 600; }

.cnl-quiz__options {
	display: grid;
	gap: 10px;
	margin: var(--cnl-gap) 0;
	list-style: none;
	padding: 0;
}
.cnl-quiz__option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	margin: 0;
	background: var(--cnl-card);
	border: 2px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	text-align: left;
	font-size: var(--cnl-fs-md);
	font-weight: 600;
	transition: all var(--cnl-t);
}
.cnl-quiz__option:hover:not([disabled]) { border-color: var(--cnl-primary); background: var(--cnl-primary-50); }
.cnl-quiz__option[aria-pressed="true"] { border-color: var(--cnl-primary); background: var(--cnl-primary-50); }
.cnl-quiz__option.is-correct {
	border-color: var(--cnl-green);
	background: var(--cnl-green-100);
	color: #14532D;
}
.cnl-quiz__option.is-wrong {
	border-color: var(--cnl-primary);
	background: var(--cnl-primary-100);
	color: var(--cnl-primary-700);
}
.cnl-quiz__key {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 9px;
	background: var(--cnl-surface-2);
	font-weight: 800;
	font-size: var(--cnl-fs-sm);
	flex-shrink: 0;
}
.cnl-quiz__option.is-correct .cnl-quiz__key { background: var(--cnl-green); color: #fff; }
.cnl-quiz__option.is-wrong .cnl-quiz__key { background: var(--cnl-primary); color: #fff; }

.cnl-quiz__explain {
	padding: 14px 16px;
	border-radius: var(--cnl-r);
	background: var(--cnl-blue-100);
	color: #1E3A8A;
	font-size: var(--cnl-fs-base);
	margin-bottom: var(--cnl-gap);
}

.cnl-quiz__result {
	text-align: center;
	padding: var(--cnl-gap-xl) var(--cnl-gap);
}
.cnl-quiz__score {
	font-size: clamp(2.6rem, 8vw, 4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--cnl-primary);
	letter-spacing: -.04em;
}

/* ==========================================================================
   10. LUYỆN NGHE
   ========================================================================== */
.cnl-player {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--cnl-gap);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-sm);
}
.cnl-player__top {
	display: flex;
	align-items: center;
	gap: 14px;
}
.cnl-player__play {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cnl-primary), var(--cnl-primary-600));
	color: #fff;
	box-shadow: var(--cnl-shadow-red);
	flex-shrink: 0;
}
.cnl-player__title { font-weight: 800; font-size: var(--cnl-fs-md); margin: 0; }
.cnl-player__sub { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); }

.cnl-player__track {
	position: relative;
	height: 6px;
	background: var(--cnl-surface-2);
	border-radius: var(--cnl-r-pill);
	cursor: pointer;
}
.cnl-player__played {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: linear-gradient(90deg, var(--cnl-primary), var(--cnl-accent));
	border-radius: inherit;
}
.cnl-player__times {
	display: flex;
	justify-content: space-between;
	font-size: var(--cnl-fs-xs);
	color: var(--cnl-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.cnl-player__tools { display: flex; flex-wrap: wrap; gap: 8px; }

.cnl-transcript {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 320px;
	overflow-y: auto;
}
.cnl-transcript__line {
	padding: 11px 14px;
	border-radius: var(--cnl-r-sm);
	transition: background var(--cnl-t);
	border: 0;
	background: none;
	text-align: left;
	width: 100%;
}
.cnl-transcript__line:hover { background: var(--cnl-surface-2); }
.cnl-transcript__line.is-active { background: var(--cnl-primary-50); }
.cnl-transcript__line .cnl-hanzi { font-size: var(--cnl-fs-lg); }
.cnl-transcript__line small { display: block; color: var(--cnl-muted); font-size: var(--cnl-fs-sm); }

/* ==========================================================================
   11. HỘI THOẠI
   ========================================================================== */
.cnl-dialog { display: flex; flex-direction: column; gap: 14px; }
.cnl-dialog__line {
	display: flex;
	gap: 12px;
	max-width: 78%;
}
.cnl-dialog__line--b { align-self: flex-end; flex-direction: row-reverse; }
.cnl-dialog__who {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--cnl-primary-100);
	color: var(--cnl-primary-700);
	font-weight: 800;
	flex-shrink: 0;
}
.cnl-dialog__line--b .cnl-dialog__who { background: var(--cnl-blue-100); color: var(--cnl-blue); }
.cnl-dialog__bubble {
	padding: 14px 17px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	border-top-left-radius: 6px;
}
.cnl-dialog__line--b .cnl-dialog__bubble {
	background: var(--cnl-primary-50);
	border-top-left-radius: var(--cnl-r-lg);
	border-top-right-radius: 6px;
}
.cnl-dialog__bubble .cnl-hanzi { font-size: var(--cnl-fs-xl); margin-bottom: 3px; }
.cnl-dialog__pinyin { font-style: italic; color: var(--cnl-primary); font-size: var(--cnl-fs-sm); }
.cnl-dialog__vi { color: var(--cnl-ink-2); font-size: var(--cnl-fs-sm); margin-top: 3px; }
.cnl-dialog__bubble .cnl-audio-btn { margin-top: 8px; }

/* ==========================================================================
   12. BẢNG PHIÊN ÂM PINYIN
   ========================================================================== */
.cnl-pinyin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}
.cnl-pinyin-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 8px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	transition: all var(--cnl-t);
	width: 100%;
}
.cnl-pinyin-cell:hover {
	border-color: var(--cnl-primary);
	background: var(--cnl-primary-50);
	transform: translateY(-2px);
}
.cnl-pinyin-cell__sound {
	font-size: var(--cnl-fs-xl);
	font-weight: 800;
	color: var(--cnl-primary);
	line-height: 1.1;
}
.cnl-pinyin-cell__hint { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); font-weight: 600; }

.cnl-tone-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	text-align: center;
}
.cnl-tone-card__mark {
	font-family: var(--cnl-font-hanzi);
	font-size: 3rem;
	font-weight: 500;
	line-height: 1;
	color: var(--cnl-primary);
}
.cnl-tone-card svg { margin-inline: auto; }
.cnl-tone-card__name { font-weight: 800; font-size: var(--cnl-fs-base); }
.cnl-tone-card__hint { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); margin: 0; }

/* ==========================================================================
   13. DASHBOARD HỌC VIÊN
   ========================================================================== */
.cnl-dash__welcome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cnl-gap);
	padding: var(--cnl-gap-lg);
	background: linear-gradient(135deg, var(--cnl-primary), var(--cnl-primary-700));
	border-radius: var(--cnl-r-xl);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cnl-dash__welcome::after {
	content: "学";
	position: absolute;
	right: 20px; bottom: -34px;
	font-family: var(--cnl-font-hanzi);
	font-size: 150px;
	font-weight: 700;
	color: rgba(255, 255, 255, .1);
	line-height: 1;
	pointer-events: none;
}
.cnl-dash__welcome h1 { color: #fff; margin: 0 0 4px; font-size: var(--cnl-fs-2xl); }
.cnl-dash__welcome p { color: rgba(255, 255, 255, .85); margin: 0; }
.cnl-dash__welcome .cnl-avatar__img,
.cnl-dash__welcome .cnl-avatar__fallback {
	border: 3px solid rgba(255, 255, 255, .35);
}
.cnl-dash__streak {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding: 13px 20px;
	background: rgba(255, 255, 255, .16);
	border-radius: var(--cnl-r);
	backdrop-filter: blur(8px);
	position: relative;
	z-index: 1;
}
.cnl-dash__streak b { font-size: var(--cnl-fs-2xl); line-height: 1; }
.cnl-dash__streak small { display: block; font-size: var(--cnl-fs-xs); opacity: .85; }

.cnl-dash__nav { display: flex; flex-direction: column; gap: 3px; }
.cnl-dash__nav a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: var(--cnl-r-sm);
	color: var(--cnl-ink-2);
	font-weight: 600;
	font-size: var(--cnl-fs-base);
	transition: all var(--cnl-t);
}
.cnl-dash__nav a:hover { background: var(--cnl-primary-50); color: var(--cnl-primary); }
.cnl-dash__nav a.is-active {
	background: var(--cnl-primary);
	color: #fff;
	box-shadow: var(--cnl-shadow-red);
}

.cnl-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	text-align: center;
}
.cnl-week__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: var(--cnl-fs-xs);
	color: var(--cnl-muted);
	font-weight: 700;
}
.cnl-week__dot {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--cnl-surface-2);
	color: var(--cnl-muted);
}
.cnl-week__day.is-done .cnl-week__dot {
	background: linear-gradient(140deg, var(--cnl-primary), var(--cnl-accent));
	color: #fff;
}
.cnl-week__day.is-today .cnl-week__dot {
	box-shadow: 0 0 0 3px var(--cnl-primary-100);
}

/* ==========================================================================
   14. TRANG ĐĂNG NHẬP / ĐĂNG KÝ
   ========================================================================== */
.cnl-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: calc(100vh - var(--cnl-header-h));
}
.cnl-auth__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: var(--cnl-gap-xl);
	background: linear-gradient(150deg, var(--cnl-primary), var(--cnl-primary-700));
	color: #fff;
	overflow: hidden;
}
.cnl-auth__aside::after {
	content: "汉语";
	position: absolute;
	right: -20px; bottom: -50px;
	font-family: var(--cnl-font-hanzi);
	font-size: 190px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .09);
	pointer-events: none;
}
.cnl-auth__aside h2 { color: #fff; font-size: var(--cnl-fs-3xl); }
.cnl-auth__aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.cnl-auth__aside li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, .9); margin: 0; }
.cnl-auth__aside li svg { flex-shrink: 0; margin-top: 3px; }

.cnl-auth__main {
	display: grid;
	place-items: center;
	padding: var(--cnl-gap-xl) var(--cnl-gap);
}
.cnl-auth__form { width: min(420px, 100%); }
.cnl-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--cnl-gap) 0;
	color: var(--cnl-muted);
	font-size: var(--cnl-fs-sm);
	font-weight: 600;
}
.cnl-auth__divider::before,
.cnl-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--cnl-line);
}

/* ==========================================================================
   15. TRANG NỘI DUNG ĐƠN (bài viết, bài học)
   ========================================================================== */
.cnl-entry__content {
	font-size: var(--cnl-fs-md);
	line-height: 1.78;
	color: var(--cnl-ink-2);
}
.cnl-entry__content > * { margin-bottom: 1.15em; }
.cnl-entry__content h2 { margin-top: 1.9em; font-size: var(--cnl-fs-2xl); }
.cnl-entry__content h3 { margin-top: 1.6em; }
.cnl-entry__content img { border-radius: var(--cnl-r); }
.cnl-entry__content a { text-decoration: underline; text-underline-offset: 3px; }

.cnl-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	font-weight: 600;
}
.cnl-entry__meta > span { display: inline-flex; align-items: center; gap: 6px; }

.cnl-entry__thumb {
	border-radius: var(--cnl-r-lg);
	overflow: hidden;
	margin-bottom: var(--cnl-gap-lg);
}

/* Điều hướng bài trước / bài sau */
.cnl-prevnext {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cnl-gap-sm);
	margin-top: var(--cnl-gap-lg);
}
.cnl-prevnext__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	transition: all var(--cnl-t);
}
.cnl-prevnext__item:hover { border-color: var(--cnl-primary); box-shadow: var(--cnl-shadow-sm); }
.cnl-prevnext__item--next { flex-direction: row-reverse; text-align: right; }
.cnl-prevnext__label { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cnl-prevnext__title { font-weight: 700; color: var(--cnl-ink); font-size: var(--cnl-fs-base); }

/* Danh sách bài học trong khóa */
.cnl-curriculum { display: flex; flex-direction: column; gap: 8px; }
.cnl-curriculum__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	transition: all var(--cnl-t);
}
.cnl-curriculum__item:hover { border-color: var(--cnl-primary); }
.cnl-curriculum__item.is-locked { opacity: .58; }
.cnl-curriculum__num {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 11px;
	background: var(--cnl-surface-2);
	font-weight: 800;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-ink-2);
	flex-shrink: 0;
}
.cnl-curriculum__item.is-done .cnl-curriculum__num { background: var(--cnl-green); color: #fff; }
.cnl-curriculum__title { font-weight: 700; color: var(--cnl-ink); font-size: var(--cnl-fs-base); }
.cnl-curriculum__meta { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); font-weight: 600; }

/* ==========================================================================
   16. DẢI CTA CUỐI TRANG
   ========================================================================== */
.cnl-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 5vw, 60px);
	border-radius: var(--cnl-r-xl);
	background: linear-gradient(135deg, var(--cnl-primary), var(--cnl-primary-700));
	color: #fff;
	text-align: center;
}
.cnl-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .17) 1px, transparent 0);
	background-size: 22px 22px;
}
.cnl-cta > * { position: relative; }
.cnl-cta h2 { color: #fff; font-size: var(--cnl-fs-3xl); margin-bottom: 12px; }
.cnl-cta p { color: rgba(255, 255, 255, .88); max-width: 56ch; margin-inline: auto; font-size: var(--cnl-fs-lg); }
.cnl-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}
.cnl-cta .cnl-btn--ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.cnl-cta .cnl-btn--ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.cnl-cta .cnl-btn--primary { background: #fff; color: var(--cnl-primary); box-shadow: none; }
.cnl-cta .cnl-btn--primary:hover { color: var(--cnl-primary-700); }

/* ==========================================================================
   17. DẢI SỐ LIỆU
   ========================================================================== */
.cnl-numbers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cnl-gap);
	padding: var(--cnl-gap-lg);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-xl);
	box-shadow: var(--cnl-shadow-sm);
}
.cnl-numbers__item { text-align: center; }
.cnl-numbers__value {
	font-size: var(--cnl-fs-3xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	background: linear-gradient(135deg, var(--cnl-primary), var(--cnl-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cnl-numbers__label { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); font-weight: 600; margin-top: 6px; }

/* ==========================================================================
   18. LỢI ÍCH / TÍNH NĂNG
   ========================================================================== */
.cnl-feature {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	transition: all var(--cnl-t);
}
.cnl-feature:hover { transform: translateY(-3px); box-shadow: var(--cnl-shadow); }
.cnl-feature__icon {
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	border-radius: 15px;
	background: var(--cnl-primary-50);
	color: var(--cnl-primary);
}
.cnl-feature[data-accent="gold"] .cnl-feature__icon { background: var(--cnl-gold-100); color: var(--cnl-gold); }
.cnl-feature[data-accent="purple"] .cnl-feature__icon { background: var(--cnl-purple-100); color: var(--cnl-purple); }
.cnl-feature[data-accent="teal"] .cnl-feature__icon { background: var(--cnl-teal-100); color: var(--cnl-teal); }
.cnl-feature[data-accent="blue"] .cnl-feature__icon { background: var(--cnl-blue-100); color: var(--cnl-blue); }
.cnl-feature[data-accent="green"] .cnl-feature__icon { background: var(--cnl-green-100); color: var(--cnl-green); }
.cnl-feature__title { font-size: var(--cnl-fs-md); font-weight: 800; margin: 0; }
.cnl-feature__desc { font-size: var(--cnl-fs-base); color: var(--cnl-muted); margin: 0; }

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
	.cnl-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--cnl-gap-lg); }
	.cnl-hero__visual { min-height: 320px; order: -1; }
	.cnl-float--tl { left: 2%; }
	.cnl-float--br { right: 2%; }
	.cnl-write { grid-template-columns: minmax(0, 1fr); }
	.cnl-auth { grid-template-columns: minmax(0, 1fr); }
	.cnl-auth__aside { display: none; }
}

@media (max-width: 900px) {
	.cnl-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cnl-dialog__line { max-width: 92%; }
}

@media (max-width: 640px) {
	.cnl-hero__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	.cnl-hero__desc { font-size: var(--cnl-fs-md); }
	.cnl-hero__actions .cnl-btn { flex: 1; }
	.cnl-pagehero__hanzi { font-size: 120px; opacity: .07; }
	.cnl-vocab-row { grid-template-columns: auto minmax(0, 1fr); }
	.cnl-vocab-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
	.cnl-prevnext { grid-template-columns: minmax(0, 1fr); }
	.cnl-numbers { padding: var(--cnl-gap); }
	.cnl-dash__welcome { padding: var(--cnl-gap); }
	.cnl-dash__streak { margin-left: 0; width: 100%; }
	.cnl-flash__controls .cnl-btn { min-width: 0; }
}

/* ==========================================================================
   HOME — CÁC COMPONENT MỚI KHỚP VỚI THIẾT KẾ
   ========================================================================== */

/* -------------------------------------------------------- HERO: SEARCH BOX */
.cnl-hero__search {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-pill);
	box-shadow: var(--cnl-shadow);
	padding: 6px 6px 6px 18px;
	margin-top: var(--cnl-gap);
	max-width: 560px;
}
.cnl-hero__search-icon {
	color: var(--cnl-muted);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-right: 10px;
}
.cnl-hero__search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: var(--cnl-fs-md);
	color: var(--cnl-ink);
	outline: none;
	min-width: 0;
}
.cnl-hero__search-input::placeholder { color: var(--cnl-muted); }
.cnl-hero__search-btn { flex-shrink: 0; }

/* Quick tags */
.cnl-hero__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.cnl-hero__tags-label {
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	font-weight: 600;
}
.cnl-hero__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: var(--cnl-r-pill);
	border: 1px solid var(--cnl-line);
	font-size: var(--cnl-fs-sm);
	font-weight: 600;
	color: var(--cnl-ink-2);
	background: var(--cnl-card);
	transition: all var(--cnl-t);
}
.cnl-hero__tag:hover {
	border-color: var(--cnl-primary);
	color: var(--cnl-primary);
	background: var(--cnl-primary-50);
}

/* ------------------------------------------------ HERO: CTA CARD bên phải */
.cnl-hero__cta-card {
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-lg);
	padding: var(--cnl-gap-lg);
	/* Float ở góc dưới phải, đè lên ảnh */
	position: absolute;
	bottom: calc(-1 * var(--cnl-gap));
	right: 0;
	width: min(340px, 100%);
	z-index: 2;
}
.cnl-hero__cta-title {
	font-size: var(--cnl-fs-xl);
	font-weight: 800;
	margin: 0 0 16px;
	color: var(--cnl-ink);
}
.cnl-hero__cta-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cnl-hero__cta-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--cnl-fs-base);
	font-weight: 500;
	color: var(--cnl-ink-2);
}
.cnl-hero__cta-list li svg { color: var(--cnl-primary); flex-shrink: 0; }
.cnl-hero__cta-note {
	text-align: center;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
	margin: 10px 0 0;
}

/* --------------------------------------- FEATURES STRIP (6 cột icon nhỏ) */
.cnl-feature-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--cnl-gap);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	gap: 10px;
	transition: transform var(--cnl-t), box-shadow var(--cnl-t);
}
.cnl-feature-strip:hover { transform: translateY(-3px); box-shadow: var(--cnl-shadow); }
.cnl-feature-strip__icon {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 18px;
	background: var(--cnl-primary-50);
	color: var(--cnl-primary);
	flex-shrink: 0;
}
.cnl-feature-strip[data-accent="blue"] .cnl-feature-strip__icon { background: var(--cnl-blue-100); color: var(--cnl-blue); }
.cnl-feature-strip[data-accent="purple"] .cnl-feature-strip__icon { background: var(--cnl-purple-100); color: var(--cnl-purple); }
.cnl-feature-strip[data-accent="teal"] .cnl-feature-strip__icon { background: var(--cnl-teal-100); color: var(--cnl-teal); }
.cnl-feature-strip[data-accent="gold"] .cnl-feature-strip__icon { background: var(--cnl-gold-100); color: var(--cnl-gold); }
.cnl-feature-strip[data-accent="green"] .cnl-feature-strip__icon { background: var(--cnl-green-100); color: var(--cnl-green); }
.cnl-feature-strip__title { font-size: var(--cnl-fs-sm); font-weight: 800; margin: 0; }
.cnl-feature-strip__desc { font-size: 12px; color: var(--cnl-muted); margin: 0; line-height: 1.5; }

/* ----------------------------------- COURSES: grid 5 cột, compact card */
.cnl-course-card--compact .cnl-course-card__media {
	aspect-ratio: 4/3;
}

/* ---------------------------------------- HSK STRIP (6 card ngang nhỏ) */
.cnl-hsk-strip__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--cnl-gap);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	color: var(--cnl-ink);
	transition: transform var(--cnl-t), box-shadow var(--cnl-t), border-color var(--cnl-t);
}
.cnl-hsk-strip__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cnl-shadow);
	border-color: color-mix(in srgb, var(--cnl-hsk-color, var(--cnl-primary)) 40%, var(--cnl-line));
}
.cnl-hsk-strip__card[data-accent="red"]    { --cnl-hsk-color: var(--cnl-primary); }
.cnl-hsk-strip__card[data-accent="orange"] { --cnl-hsk-color: var(--cnl-orange); }
.cnl-hsk-strip__card[data-accent="gold"]   { --cnl-hsk-color: var(--cnl-gold); }
.cnl-hsk-strip__card[data-accent="green"]  { --cnl-hsk-color: var(--cnl-green); }
.cnl-hsk-strip__card[data-accent="blue"]   { --cnl-hsk-color: var(--cnl-blue); }
.cnl-hsk-strip__card[data-accent="purple"] { --cnl-hsk-color: var(--cnl-purple); }

.cnl-hsk-strip__level {
	font-size: var(--cnl-fs-xl);
	font-weight: 900;
	color: var(--cnl-hsk-color, var(--cnl-primary));
}
.cnl-hsk-strip__words {
	font-size: var(--cnl-fs-xs);
	color: var(--cnl-muted);
	font-weight: 600;
}
.cnl-hsk-strip__status {
	font-size: var(--cnl-fs-xs);
	font-weight: 700;
}
.cnl-hsk-strip__status--done   { color: var(--cnl-green); }
.cnl-hsk-strip__status--active { color: var(--cnl-primary); }
.cnl-hsk-strip__status--idle   { color: var(--cnl-muted); }

/* ---------------------------------------------------- TOOL CARDS (4 cột) */
.cnl-tool-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--cnl-gap-lg);
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	transition: transform var(--cnl-t), box-shadow var(--cnl-t);
}
.cnl-tool-card:hover { transform: translateY(-3px); box-shadow: var(--cnl-shadow); }
.cnl-tool-card__bg {
	position: absolute;
	top: -10px; right: -10px;
	font-size: 90px;
	opacity: .06;
	color: var(--cnl-tool-color, var(--cnl-primary));
	pointer-events: none;
	line-height: 1;
}
.cnl-tool-card__icon {
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--cnl-tool-color, var(--cnl-primary)) 12%, transparent);
	color: var(--cnl-tool-color, var(--cnl-primary));
}
.cnl-tool-card[data-accent="red"]  { --cnl-tool-color: var(--cnl-primary); }
.cnl-tool-card[data-accent="blue"] { --cnl-tool-color: var(--cnl-blue); }
.cnl-tool-card[data-accent="teal"] { --cnl-tool-color: var(--cnl-teal); }
.cnl-tool-card[data-accent="gold"] { --cnl-tool-color: var(--cnl-gold); }
.cnl-tool-card__title { font-size: var(--cnl-fs-lg); font-weight: 800; margin: 0; }
.cnl-tool-card__desc { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); margin: 0; flex: 1; }

/* ------------------------------------------ NUMBERS SECTION (dải đỏ) */
.cnl-numbers-section {
	background: linear-gradient(135deg, var(--cnl-primary) 0%, var(--cnl-primary-700, #b91c1c) 100%);
}
.cnl-numbers-section .cnl-numbers {
	grid-template-columns: repeat(4, 1fr);
}
.cnl-numbers-section .cnl-numbers__icon { color: rgba(255,255,255,.7); margin-bottom: 6px; }
.cnl-numbers-section .cnl-numbers__value { color: #fff; font-size: var(--cnl-fs-3xl); }
.cnl-numbers-section .cnl-numbers__label { color: rgba(255,255,255,.8); }
.cnl-numbers-section .cnl-numbers__item { display: flex; flex-direction: column; align-items: center; }

/* ------------------------------------------ LEADERBOARD TABS */
.cnl-lb-tab {
	padding: 8px 18px;
	border-radius: var(--cnl-r-pill) var(--cnl-r-pill) 0 0;
	font-size: var(--cnl-fs-sm);
	font-weight: 700;
	color: var(--cnl-muted);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	transition: color var(--cnl-t), border-color var(--cnl-t);
	cursor: pointer;
}
.cnl-lb-tab:hover { color: var(--cnl-primary); }
.cnl-lb-tab.is-active {
	color: var(--cnl-primary);
	border-bottom-color: var(--cnl-primary);
}

/* ------------------------------------------ RESPONSIVE MỚI */
@media (max-width: 1200px) {
	.cnl-grid.cnl-features-strip { grid-template-columns: repeat(3, 1fr); }
	.cnl-grid.cnl-hsk-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.cnl-hero__cta-card { max-width: 100%; }
	.cnl-grid.cnl-features-strip { grid-template-columns: repeat(2, 1fr); }
	.cnl-grid.cnl-hsk-strip { grid-template-columns: repeat(2, 1fr); }
	.cnl-numbers-section .cnl-numbers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.cnl-hero__search { max-width: 100%; }
	.cnl-grid.cnl-features-strip { grid-template-columns: repeat(2, 1fr); }
	.cnl-grid.cnl-hsk-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hero: ảnh nhân vật phủ toàn bộ cột phải ── */
.cnl-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	z-index: 0;
}

/* ── Topic card: có ảnh nền thật ── */
.cnl-topic-card--has-img { overflow: hidden; }
.cnl-topic-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .25;
	transition: opacity var(--cnl-t);
	z-index: 0;
}
.cnl-topic-card--has-img:hover .cnl-topic-card__img { opacity: .38; }
.cnl-topic-card--has-img .cnl-topic-card__icon,
.cnl-topic-card--has-img .cnl-topic-card__name,
.cnl-topic-card--has-img .cnl-topic-card__hanzi,
.cnl-topic-card--has-img .cnl-topic-card__count { position: relative; z-index: 1; }





/* ==========================================================================
   HERO — Ảnh nhân vật là background của toàn section
   ========================================================================== */

/* Ảnh phủ toàn bộ .cnl-hero như background */
.cnl-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: 0;
	/* Fade trái để text đọc được, giữ nhân vật phía phải rõ */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.7) 55%, #000 80%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.7) 55%, #000 80%);
}

/* Inner grid đè lên ảnh */
.cnl-hero__inner {
	position: relative;
	z-index: 1;
}

/* Visual column chỉ chứa CTA card — không cần min-height */
.cnl-hero__visual {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 0;
}

/* CTA card: static trong flow, đẩy về góc phải */
.cnl-hero__cta-card {
	position: relative;
	width: min(340px, 100%);
	margin-left: auto;
}

/* Topic card có ảnh nền */
.cnl-topic-card--has-img { overflow: hidden; }
.cnl-topic-card__img {
	position: absolute;
	inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .25;
	transition: opacity var(--cnl-t); z-index: 0;
}
.cnl-topic-card--has-img:hover .cnl-topic-card__img { opacity: .38; }
.cnl-topic-card--has-img .cnl-topic-card__icon,
.cnl-topic-card--has-img .cnl-topic-card__name,
.cnl-topic-card--has-img .cnl-topic-card__hanzi,
.cnl-topic-card--has-img .cnl-topic-card__count { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 1080px) {
	.cnl-hero__img {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 40%, #000 70%);
		mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 40%, #000 70%);
	}
}
@media (max-width: 640px) {
	.cnl-hero__img {
		object-position: right top;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, transparent 50%);
		mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, transparent 50%);
	}
}