/* ==========================================================================
   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%);
	}
}

/* ==========================================================================
   TRANG MỚI — Từ vựng, Hội thoại, Đề thi, Quiz, Pinyin
   ========================================================================== */

/* --- HERO CHUNG --- */
.cnl-hero { position:relative; overflow:hidden; background:linear-gradient(135deg, var(--cnl-primary-700) 0%, var(--cnl-primary) 60%, #ff6b5b 100%); }
.cnl-hero__media { position:absolute; inset:0; }
.cnl-hero__bg-img { width:100%; height:100%; object-fit:cover; opacity:.35; }
.cnl-hero__bg-gradient { position:absolute; inset:0; background:linear-gradient(135deg, var(--cnl-primary-700), var(--cnl-primary)); }
.cnl-hero--pinyin   { background:linear-gradient(135deg, #7C3AED, #4F46E5); }
.cnl-hero--quiz     { background:linear-gradient(135deg, var(--cnl-primary-700), #ff4444 50%, #ff8c69); }
.cnl-hero--exam     { background:linear-gradient(135deg, #1e2532, #2d3a5a); }
.cnl-hero--dialogue { background:linear-gradient(135deg, var(--cnl-primary-700), var(--cnl-primary)); }

/* --- VOCAB HERO --- */
.cnl-vocab-hero { position:relative; overflow:hidden; min-height:280px; display:flex; align-items:center; }
.cnl-vocab-hero__img { position:absolute; inset:0; background-size:cover; background-position:center; }
.cnl-vocab-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(226,59,46,.85) 0%, rgba(169,36,25,.92) 100%); }
.cnl-vocab-hero__hanzi { font-size:clamp(4rem,8vw,7rem); font-family:var(--cnl-font-hanzi); font-weight:900; color:#fff; line-height:1; text-shadow:0 4px 20px rgba(0,0,0,.3); }
.cnl-vocab-hero__pinyin { font-size:clamp(1.2rem,2.5vw,1.8rem); color:#ffffffdd; font-style:italic; font-weight:600; margin-bottom:4px; }
.cnl-vocab-hero__meaning { font-size:1rem; color:#ffffffbb; font-weight:500; }

/* --- VOCAB LAYOUT --- */
.cnl-split--vocab { align-items:flex-start; }
.cnl-vocab-main { min-width:0; }
.cnl-vocab-info-grid { display:grid; grid-template-columns:160px 1fr; gap:20px; }
@media(max-width:640px){ .cnl-vocab-info-grid { grid-template-columns:1fr; } }
.cnl-vocab-info-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--cnl-surface-2); border-radius:var(--cnl-r); padding:20px; }
.cnl-vocab-big-char { font-size:5rem; font-family:var(--cnl-font-hanzi); font-weight:900; color:var(--cnl-primary); line-height:1; }
.cnl-vocab-info-rows { display:flex; flex-direction:column; gap:0; }
.cnl-vocab-info-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--cnl-line); font-size:var(--cnl-fs-sm); }
.cnl-vocab-info-row__label { display:flex; align-items:center; gap:6px; color:var(--cnl-muted); white-space:nowrap; }
.cnl-vocab-info-row__val { font-weight:600; }
.cnl-vocab-stars { display:flex; gap:2px; }
.cnl-vocab-star { font-size:.9rem; color:var(--cnl-line-2); }
.cnl-vocab-star--on { color:var(--cnl-accent); }

/* Ví dụ */
.cnl-example { padding:14px 0; border-bottom:1px solid var(--cnl-line); }
.cnl-example:last-of-type { border-bottom:none; }
.cnl-example__hanzi { font-size:1.1rem; font-family:var(--cnl-font-hanzi); margin-bottom:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cnl-example__hanzi mark { background:var(--cnl-primary-100); color:var(--cnl-primary); border-radius:3px; padding:0 2px; }
.cnl-example__fav { background:none; border:none; cursor:pointer; font-size:1rem; color:var(--cnl-muted); margin-left:auto; }
.cnl-example__pinyin { font-size:var(--cnl-fs-sm); color:var(--cnl-teal); font-style:italic; margin-bottom:2px; }
.cnl-example__vi { font-size:var(--cnl-fs-sm); color:var(--cnl-muted); }

/* Từ ghép */
.cnl-compound-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.cnl-compound-item { display:flex; flex-direction:column; padding:10px; background:var(--cnl-surface-2); border-radius:var(--cnl-r-sm); }
.cnl-compound-item__hanzi { font-family:var(--cnl-font-hanzi); font-size:1.1rem; font-weight:700; color:var(--cnl-primary); }
.cnl-compound-item__py { font-size:var(--cnl-fs-xs); color:var(--cnl-teal); font-style:italic; }
.cnl-compound-item__vi { font-size:var(--cnl-fs-xs); color:var(--cnl-muted); }

/* Vocab tools (sidebar) */
.cnl-vocab-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cnl-vocab-tools--sm { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.cnl-vocab-tool { display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 10px; background:var(--cnl-surface-2); border:1px solid var(--cnl-line); border-radius:var(--cnl-r-sm); cursor:pointer; text-decoration:none; color:var(--cnl-ink); transition:all .15s; font-size:var(--cnl-fs-sm); font-weight:600; text-align:center; }
.cnl-vocab-tool:hover { background:var(--cnl-primary-50); border-color:var(--cnl-primary); color:var(--cnl-primary); }
.cnl-vocab-tool small { color:var(--cnl-muted); font-weight:400; font-size:var(--cnl-fs-xs); }
.cnl-vocab-tool--sm { padding:10px 8px; }

/* --- DIALOGUE --- */
.cnl-hero__hanzi-title { font-size:clamp(2rem,4vw,3.2rem); font-family:var(--cnl-font-hanzi); font-weight:900; color:#fff; }
.cnl-hero__pinyin-sub  { font-size:1.1rem; color:#ffffffcc; font-style:italic; margin-bottom:4px; }
.cnl-hero__desc        { color:#ffffffcc; max-width:52ch; }

.cnl-dialog--rich { display:flex; flex-direction:column; gap:16px; }
.cnl-dialog__line { display:flex; align-items:flex-start; gap:12px; }
.cnl-dialog__line--b { flex-direction:row-reverse; }
.cnl-dialog__avatar { width:42px; height:42px; border-radius:50%; background:var(--cnl-surface-2); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.cnl-dialog__content { flex:1; min-width:0; }
.cnl-dialog__who-label { font-size:var(--cnl-fs-xs); color:var(--cnl-muted); margin-bottom:4px; }
.cnl-dialog__bubble--rich { background:var(--cnl-surface-2); border-radius:0 var(--cnl-r) var(--cnl-r) var(--cnl-r); padding:12px 14px; }
.cnl-dialog__line--b .cnl-dialog__bubble--rich { background:var(--cnl-primary-50); border-radius:var(--cnl-r) 0 var(--cnl-r) var(--cnl-r); }
.cnl-dialog__hanzi { font-size:1.1rem; margin-bottom:3px; }
.cnl-dialog__pinyin { font-size:var(--cnl-fs-sm); color:var(--cnl-teal); font-style:italic; margin-bottom:2px; }
.cnl-dialog__vi { font-size:var(--cnl-fs-sm); color:var(--cnl-muted); }

.cnl-related-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--cnl-line); text-decoration:none; color:var(--cnl-ink); }
.cnl-related-row:hover { color:var(--cnl-primary); }
.cnl-related-row__thumb { width:52px; height:42px; border-radius:8px; overflow:hidden; background:var(--cnl-surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cnl-related-row__img { width:100%; height:100%; object-fit:cover; }
.cnl-related-row__icon { font-size:1.2rem; }

/* --- EXAM / QUIZ --- */
.cnl-exam-section { margin-bottom:var(--cnl-gap); padding:20px; border:1px solid var(--cnl-line); border-radius:var(--cnl-r); }
.cnl-exam-section__head { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; padding-left:12px; }
.cnl-exam-section__title { font-weight:700; font-size:var(--cnl-fs-md); }
.cnl-exam-qnav { display:flex; flex-wrap:wrap; gap:4px; }
.cnl-exam-qnav__btn { width:32px; height:32px; border-radius:6px; border:1px solid var(--cnl-line); background:var(--cnl-card); font-size:var(--cnl-fs-xs); font-weight:600; cursor:pointer; transition:all .12s; }
.cnl-exam-qnav__btn:hover { background:var(--cnl-primary-50); border-color:var(--cnl-primary); }
.cnl-exam-qnav__btn--active { background:var(--cnl-primary); color:#fff; border-color:var(--cnl-primary); }
.cnl-exam-qnav__btn--done { background:var(--cnl-green-100); border-color:var(--cnl-green); }
.cnl-exam-qnav__btn--flagged { background:var(--cnl-accent-100); border-color:var(--cnl-accent); }
.cnl-quiz__options--rich { list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:8px; }
.cnl-quiz__options--rich li { padding:12px 16px; border:1.5px solid var(--cnl-line); border-radius:var(--cnl-r-sm); cursor:pointer; transition:all .12s; }
.cnl-quiz__options--rich li:hover { border-color:var(--cnl-primary); background:var(--cnl-primary-50); }
.cnl-quiz__options--rich li.cnl-option--selected { border-color:var(--cnl-primary); background:var(--cnl-primary-50); }
.cnl-quiz__options--rich li.cnl-option--correct  { border-color:var(--cnl-green); background:var(--cnl-green-100); }
.cnl-quiz__options--rich li.cnl-option--wrong    { border-color:var(--cnl-primary); background:var(--cnl-primary-100); }

/* Quiz card */
.cnl-quiz-card { position:relative; display:flex; flex-direction:column; }
.cnl-split--quiz-detail { gap:var(--cnl-gap-lg); }

/* --- QUIZ ARCHIVE --- */
.cnl-quiz-detail { min-width:0; }
.cnl-split--70-30 { display:grid; grid-template-columns:1fr minmax(0,320px); gap:var(--cnl-gap-lg); align-items:start; }
@media(max-width:900px){ .cnl-split--70-30 { grid-template-columns:1fr; } }

/* --- PINYIN --- */
/* Initial grid */
.cnl-py-initial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; }
.cnl-py-initial-grid--compact .cnl-py-initial-card { padding:8px; }
.cnl-py-initial-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; background:var(--cnl-surface-2); border:1px solid var(--cnl-line); border-radius:var(--cnl-r-sm); cursor:pointer; transition:all .15s; }
.cnl-py-initial-card:hover { border-color:var(--cnl-primary); background:var(--cnl-primary-50); }
.cnl-py-initial-char { font-size:1.5rem; font-weight:800; color:var(--cnl-primary); font-style:italic; }
.cnl-py-initial-thumb { width:56px; height:42px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cnl-py-initial-thumb img { width:100%; height:100%; object-fit:contain; }
.cnl-py-initial-actions { display:flex; gap:6px; align-items:center; }

/* Final grid */
.cnl-py-final-grid { display:flex; flex-wrap:wrap; gap:8px; }
.cnl-py-final-card { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--cnl-surface-2); border:1px solid var(--cnl-line); border-radius:var(--cnl-r-sm); cursor:pointer; transition:all .15s; }
.cnl-py-final-card:hover { border-color:var(--cnl-primary); }
.cnl-py-final-char { font-size:1rem; font-weight:700; font-style:italic; }
.cnl-py-final-char--red    { color:var(--cnl-primary); }
.cnl-py-final-char--orange { color:var(--cnl-orange); }
.cnl-py-final-char--teal   { color:var(--cnl-teal); }
.cnl-py-final-char--blue   { color:var(--cnl-blue); }
.cnl-py-final-char--purple { color:var(--cnl-purple); }
.cnl-py-final-char--indigo { color:var(--cnl-indigo); }
.cnl-py-final-char--green  { color:var(--cnl-green); }
.cnl-py-final-char--ghost  { color:var(--cnl-ink); }

/* Pinyin table */
.cnl-py-table { border-collapse:collapse; font-size:.72rem; min-width:800px; width:100%; }
.cnl-py-table th, .cnl-py-table td { border:1px solid var(--cnl-line); padding:3px; }
.cnl-py-table thead th { background:var(--cnl-surface-2); color:var(--cnl-purple); font-style:italic; font-weight:700; text-align:center; padding:5px 4px; white-space:nowrap; }
.cnl-py-table__corner { background:var(--cnl-surface-2); color:var(--cnl-muted); text-align:center; }
.cnl-py-table__fin { color:var(--cnl-teal); font-style:italic; font-weight:700; background:var(--cnl-surface-2); white-space:nowrap; padding:5px 8px; }
.cnl-py-table__cell { text-align:center; padding:2px; }
.cnl-py-table__btn { background:none; border:none; cursor:pointer; padding:4px 5px; border-radius:4px; font-size:.7rem; font-style:italic; color:var(--cnl-ink); width:100%; transition:all .12s; }
.cnl-py-table__btn:hover { background:var(--cnl-primary-50); color:var(--cnl-primary); }
.cnl-py-table__empty { color:var(--cnl-line-2); }
.cnl-py-table--compact th, .cnl-py-table--compact td { padding:2px; }
.cnl-py-table--compact .cnl-py-table__btn { font-size:.65rem; padding:3px 4px; }

/* Comparison buttons */
.cnl-py-cmp-btn { background:var(--cnl-surface-2); border:1px solid var(--cnl-line); border-radius:6px; padding:3px 10px; font-weight:700; cursor:pointer; }
.cnl-py-cmp-btn:hover { background:var(--cnl-primary-50); border-color:var(--cnl-primary); }

/* --- MISC --- */
.cnl-tabs--page { overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
.cnl-cnl-bar--sm { height:4px; }
.cnl-audio-btn--xs { width:22px; height:22px; font-size:.6rem; flex-shrink:0; }
.cnl-audio-btn--primary-lg { background:var(--cnl-primary); color:#fff; border:none; border-radius:50%; width:52px; height:52px; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cnl-audio-btn--white { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.4); }
.cnl-audio-btn--block { width:100%; border-radius:var(--cnl-r-pill); }
.cnl-pill--ghost-white { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); }
.cnl-toggle { position:relative; display:inline-flex; }
.cnl-toggle input { opacity:0; width:0; height:0; position:absolute; }
.cnl-toggle span { display:block; width:40px; height:22px; background:var(--cnl-line-2); border-radius:999px; cursor:pointer; transition:.2s; }
.cnl-toggle span::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; }
.cnl-toggle input:checked + span { background:var(--cnl-primary); }
.cnl-toggle input:checked + span::after { transform:translateX(18px); }
.cnl-select--xs { font-size:var(--cnl-fs-xs); padding:3px 8px; border-radius:6px; border:1px solid var(--cnl-line); background:var(--cnl-card); }

/* ==========================================================================
   TRANG TỪ VỰNG ARCHIVE — /tu-vung/
   ========================================================================== */

/* Hero */
.cnl-vocab-archive-hero {
    position: relative;
    background: linear-gradient(135deg, #f8f4f0 0%, #fdf0ee 100%);
    overflow: hidden;
    padding: 48px 0 40px;
}
.cnl-vocab-archive-hero__bg {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='400' viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='420' y='320' font-size='260' font-family='serif' fill='%23e23b2e' opacity='0.05' font-weight='bold'%3E词%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
.cnl-vocab-archive-hero__inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}
@media (max-width: 768px) { .cnl-vocab-archive-hero__inner { grid-template-columns: 1fr; } }
.cnl-vocab-archive-hero__title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--cnl-ink);
    margin: 0 0 8px;
}
.cnl-vocab-archive-hero__desc {
    color: var(--cnl-ink-2);
    margin: 0 0 20px;
    max-width: 52ch;
    font-size: var(--cnl-fs-md);
}
.cnl-vocab-archive-hero__search form {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1.5px solid var(--cnl-line);
    border-radius: var(--cnl-r-pill);
    padding: 4px 4px 4px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    max-width: 560px;
}
.cnl-vocab-archive-hero__search svg { color: var(--cnl-muted); flex-shrink: 0; }
.cnl-vocab-search-input {
    flex: 1; border: none; background: transparent;
    padding: 8px 12px; font-size: var(--cnl-fs-md);
    outline: none; min-width: 0;
}
.cnl-vocab-stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    background: #fff;
    border-radius: var(--cnl-r);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    min-width: 280px;
}
.cnl-vocab-stat {
    display: flex; align-items: center; gap: 10px;
}
.cnl-vocab-stat svg { color: var(--cnl-primary); flex-shrink: 0; }
.cnl-vocab-stat__val { font-size: 1.3rem; font-weight: 800; color: var(--cnl-ink); line-height: 1; }
.cnl-vocab-stat__label { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); margin-top: 2px; }

/* Layout */
.cnl-section--vocab-archive { padding-top: 32px; }
.cnl-vocab-archive-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) { .cnl-vocab-archive-layout { grid-template-columns: 1fr; } }

/* Sidebar filters */
.cnl-vocab-filters {
    background: #fff;
    border: 1px solid var(--cnl-line);
    border-radius: var(--cnl-r);
    padding: 20px;
    position: sticky;
    top: calc(var(--cnl-header-h) + 16px);
}
.cnl-filter-group { margin-bottom: 20px; }
.cnl-filter-group__head {
    font-size: var(--cnl-fs-sm);
    font-weight: 700;
    color: var(--cnl-ink);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.cnl-filter-hsk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.cnl-filter-hsk {
    padding: 6px 10px;
    border-radius: var(--cnl-r-pill);
    border: 1.5px solid var(--cnl-line);
    font-size: var(--cnl-fs-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--cnl-ink);
    text-align: center;
    transition: all .15s;
}
.cnl-filter-hsk:hover { border-color: var(--cnl-primary); color: var(--cnl-primary); }
.cnl-filter-hsk.active {
    background: var(--cnl-primary);
    border-color: var(--cnl-primary);
    color: #fff;
}
.cnl-filter-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.cnl-chip--filter {
    padding: 4px 10px;
    border-radius: var(--cnl-r-pill);
    font-size: var(--cnl-fs-xs);
    border: 1.5px solid var(--cnl-line);
    color: var(--cnl-ink-2);
    text-decoration: none;
    transition: all .12s;
    white-space: nowrap;
}
.cnl-chip--filter:hover { border-color: var(--cnl-primary); color: var(--cnl-primary); }
.cnl-chip--filter.cnl-chip--active {
    background: var(--cnl-primary);
    border-color: var(--cnl-primary);
    color: #fff;
}

/* Topbar */
.cnl-vocab-list-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--cnl-line);
    padding-bottom: 0;
}
.cnl-vocab-status-tabs { display: flex; gap: 0; overflow-x: auto; }
.cnl-vocab-status-tab {
    padding: 10px 16px;
    font-size: var(--cnl-fs-sm);
    font-weight: 600;
    color: var(--cnl-muted);
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    transition: all .15s;
    margin-bottom: -2px;
}
.cnl-vocab-status-tab:hover { color: var(--cnl-primary); }
.cnl-vocab-status-tab.active {
    color: var(--cnl-primary);
    border-bottom-color: var(--cnl-primary);
}
.cnl-vocab-sort { display: flex; align-items: center; gap: 8px; }

/* Vocab rows */
.cnl-vocab-list { display: flex; flex-direction: column; gap: 0; }
.cnl-vocab-row {
    display: grid;
    grid-template-columns: 88px 1fr 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid var(--cnl-line);
    transition: background .12s;
}
.cnl-vocab-row:hover { background: var(--cnl-surface-2); }
@media (max-width: 640px) {
    .cnl-vocab-row { grid-template-columns: 64px 1fr auto; }
    .cnl-vocab-row__example { display: none; }
}

/* Image */
.cnl-vocab-row__img {
    width: 88px; height: 72px;
    border-radius: var(--cnl-r-sm);
    overflow: hidden;
    background: var(--cnl-surface-2);
    flex-shrink: 0;
}
.cnl-vocab-row__img img {
    width: 100%; height: 100%; object-fit: cover;
}
.cnl-vocab-row__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

/* Main info */
.cnl-vocab-row__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.cnl-vocab-row__hanzi {
    font-size: 1.5rem;
    font-family: var(--cnl-font-hanzi);
    font-weight: 700;
    color: var(--cnl-ink);
    text-decoration: none;
    line-height: 1;
}
.cnl-vocab-row__hanzi:hover { color: var(--cnl-primary); }
.cnl-vocab-row__pinyin {
    font-size: var(--cnl-fs-sm);
    color: var(--cnl-primary);
    font-style: italic;
    font-weight: 600;
}
.cnl-vocab-row__tags {
    display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap;
}
.cnl-vocab-row__meaning {
    font-size: var(--cnl-fs-sm);
    color: var(--cnl-ink-2);
}

/* Example */
.cnl-vocab-row__example-label {
    font-size: var(--cnl-fs-xs);
    color: var(--cnl-muted);
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cnl-vocab-row__example mark {
    background: var(--cnl-primary-100);
    color: var(--cnl-primary);
    border-radius: 2px;
    padding: 0 1px;
}

/* Actions */
.cnl-vocab-row__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cnl-vocab-row__action {
    width: 30px; height: 30px;
    border: none; background: none;
    cursor: pointer; color: var(--cnl-muted);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.cnl-vocab-row__action:hover { background: var(--cnl-surface-2); color: var(--cnl-ink); }
.cnl-vocab-row__fav:hover { color: var(--cnl-accent); }
.cnl-vocab-row__fav.is-favorite { color: var(--cnl-accent); }
.cnl-vocab-row__check:hover { color: var(--cnl-green); }
.cnl-vocab-row__check.is-learned { color: var(--cnl-green); }
.cnl-vocab-row__status {
    font-size: var(--cnl-fs-xs);
    color: var(--cnl-green);
    font-weight: 600;
    display: none;
}
.cnl-vocab-row__status.show { display: block; }

/* Pagination */
.cnl-vocab-pagination {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--cnl-line);
}
.cnl-vocab-pagination__pages { display: flex; gap: 4px; flex-wrap: wrap; }
.cnl-page-btn {
    min-width: 36px; height: 36px;
    border: 1.5px solid var(--cnl-line);
    border-radius: var(--cnl-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--cnl-fs-sm); font-weight: 600;
    text-decoration: none; color: var(--cnl-ink);
    padding: 0 10px; transition: all .12s;
    background: #fff;
}
.cnl-page-btn:hover { border-color: var(--cnl-primary); color: var(--cnl-primary); }
.cnl-page-btn--active {
    background: var(--cnl-primary);
    border-color: var(--cnl-primary);
    color: #fff;
}
.cnl-page-btn--dots {
    border-color: transparent; background: transparent;
    cursor: default; color: var(--cnl-muted);
}

/* ==========================================================================
   SINGLE TỪ VỰNG — /tu-vung/{slug}/
   ========================================================================== */

/* Hero */
.cnl-vocab-single-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, #c8102e 0%, #e23b2e 60%, #ff6b5b 100%);
}
.cnl-vocab-single-hero__bg {
    position: absolute; inset: 0;
}
.cnl-vocab-single-hero__bg-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: right center;
    opacity: .55;
}
.cnl-vocab-single-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(180,16,38,.88) 0%, rgba(226,59,46,.75) 60%, rgba(255,107,91,.4) 100%);
}
.cnl-vocab-single-hero__inner {
    position: relative; z-index: 2;
    padding-block: 44px 48px;
    width: 100%;
}
.cnl-vocab-single-hero__content {
    max-width: 680px;
}
.cnl-vocab-single-hero__hanzi {
    font-size: clamp(5rem, 10vw, 8rem);
    font-family: var(--cnl-font-hanzi);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 4px 24px rgba(0,0,0,.25);
    display: inline-block;
}
.cnl-vocab-single-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 16px;
    vertical-align: middle;
}
.cnl-vocab-hero-fav {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.cnl-vocab-hero-fav:hover,
.cnl-vocab-hero-fav.is-favorite { background: var(--cnl-accent); border-color: var(--cnl-accent); }
.cnl-audio-btn--hero {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 50%;
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cnl-vocab-single-hero__pinyin {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.5rem;
    color: #ffffffee;
    font-style: italic;
    font-weight: 600;
    margin-top: 12px;
}
.cnl-vocab-single-hero__meaning {
    font-size: 1.1rem;
    color: #ffffffcc;
    margin-top: 4px;
}
.cnl-badge--hsk {
    background: var(--cnl-primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--cnl-r-pill);
    font-size: var(--cnl-fs-sm);
    font-weight: 700;
}

/* Layout */
.cnl-split--vocab-single {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--cnl-gap-lg);
    align-items: start;
}
@media (max-width: 900px) { .cnl-split--vocab-single { grid-template-columns: 1fr; } }
.cnl-vocab-single-main { min-width: 0; }
.cnl-vocab-single-aside { position: sticky; top: calc(var(--cnl-header-h) + 16px); }

/* Tabs */
.cnl-vocab-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cnl-line);
    margin-bottom: var(--cnl-gap);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cnl-vocab-tabs::-webkit-scrollbar { display: none; }
.cnl-vocab-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    font-size: var(--cnl-fs-sm);
    font-weight: 600;
    color: var(--cnl-muted);
    background: none; border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    margin-bottom: -2px;
}
.cnl-vocab-tab:hover { color: var(--cnl-primary); }
.cnl-vocab-tab--active {
    color: var(--cnl-primary);
    border-bottom-color: var(--cnl-primary);
}

/* Info table */
.cnl-vocab-info-wrap {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
}
@media (max-width: 600px) { .cnl-vocab-info-wrap { grid-template-columns: 1fr; } }
.cnl-vocab-char-preview {
    display: flex; flex-direction: column; align-items: center;
    background: var(--cnl-surface-2);
    border-radius: var(--cnl-r);
    padding: 20px 16px;
    gap: 8px;
}
.cnl-vocab-char-box {
    position: relative;
    width: 100px; height: 100px;
    background: #fff;
    border: 1.5px solid var(--cnl-line);
    border-radius: var(--cnl-r-sm);
    display: flex; align-items: center; justify-content: center;
}
.cnl-vocab-char-big {
    font-size: 4rem;
    font-weight: 900;
    color: var(--cnl-ink);
    line-height: 1;
}
.cnl-vocab-char-play {
    position: absolute; bottom: -14px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 32px;
    background: var(--cnl-primary);
    color: #fff; border: 3px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(226,59,46,.35);
}
.cnl-vocab-info-table { display: flex; flex-direction: column; }
.cnl-vinfo-row {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cnl-line);
    font-size: var(--cnl-fs-sm);
}
.cnl-vinfo-row:last-child { border-bottom: none; }
.cnl-vinfo-label {
    display: flex; align-items: center; gap: 6px;
    color: var(--cnl-muted); white-space: nowrap; min-width: 100px;
}
.cnl-vinfo-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.cnl-vinfo-stars { display: flex; gap: 1px; }
.cnl-vinfo-star { color: var(--cnl-line-2); font-size: 1rem; }
.cnl-vinfo-star.on { color: var(--cnl-accent); }
.cnl-badge--type {
    background: #e8f5e9; color: #16a34a;
    padding: 2px 8px; border-radius: var(--cnl-r-pill);
    font-size: var(--cnl-fs-xs); font-weight: 700;
}
.cnl-badge--hsk-sm {
    background: #fff0f3; color: var(--cnl-primary);
    padding: 2px 8px; border-radius: var(--cnl-r-pill);
    font-size: var(--cnl-fs-xs); font-weight: 700;
    border: 1px solid var(--cnl-primary-100);
}

/* Examples */
.cnl-example-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--cnl-line);
}
.cnl-example-item:last-of-type { border-bottom: none; }
.cnl-example-item__zh {
    font-family: var(--cnl-font-hanzi);
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 3px;
}
.cnl-ex-highlight {
    color: var(--cnl-primary); font-weight: 700;
    background: var(--cnl-primary-50);
    border-radius: 2px; padding: 0 1px;
}
.cnl-example-item__fav {
    background: none; border: none;
    cursor: pointer; color: var(--cnl-muted);
    font-size: 1rem; margin-left: auto;
}
.cnl-example-item__py { font-size: var(--cnl-fs-sm); color: var(--cnl-teal); font-style: italic; margin-bottom: 2px; }
.cnl-example-item__vi { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); }

/* Compounds */
.cnl-compound-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.cnl-compound2 {
    display: flex; flex-direction: column;
    padding: 10px 12px;
    background: var(--cnl-surface-2);
    border-radius: var(--cnl-r-sm);
    border: 1px solid var(--cnl-line);
    gap: 2px;
}
.cnl-compound2__hanzi { font-family: var(--cnl-font-hanzi); font-size: 1rem; font-weight: 700; color: var(--cnl-primary); }
.cnl-compound2__py   { font-size: var(--cnl-fs-xs); color: var(--cnl-teal); font-style: italic; }
.cnl-compound2__vi   { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); }

/* Progress banner */
.cnl-vocab-progress-banner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #fff8f3, #fff0f0);
    border: 1px solid var(--cnl-primary-100);
    border-radius: var(--cnl-r);
    padding: 16px 20px;
    margin-top: var(--cnl-gap);
    flex-wrap: wrap;
}
.cnl-vocab-progress-banner__icon { font-size: 2rem; flex-shrink: 0; }
.cnl-vocab-progress-banner__info { flex: 1; min-width: 180px; }
.cnl-vocab-progress-banner__label { font-weight: 700; margin-bottom: 2px; }
.cnl-vocab-progress-banner__sub { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); }
.cnl-vocab-progress-banner__stats {
    text-align: right; flex-shrink: 0;
    font-size: var(--cnl-fs-sm); display: flex; flex-direction: column; gap: 2px;
}

/* Sidebar tools */
.cnl-vocab-tools-card { }
.cnl-vocab-tools2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cnl-vocab-tool2 {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px;
    background: var(--cnl-surface-2);
    border: 1px solid var(--cnl-line);
    border-radius: var(--cnl-r-sm);
    text-decoration: none; color: var(--cnl-ink);
    transition: all .15s;
}
.cnl-vocab-tool2:hover { border-color: var(--cnl-primary); background: var(--cnl-primary-50); }
.cnl-vocab-tool2__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cnl-vocab-tool2__label { font-size: var(--cnl-fs-sm); font-weight: 700; }
.cnl-vocab-tool2__sub   { font-size: var(--cnl-fs-xs); color: var(--cnl-muted); }

/* Sidebar vocab rows */
.cnl-vocab-sidebar-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--cnl-line);
}
.cnl-vocab-sidebar-row:last-child { border-bottom: none; }
.cnl-vocab-sidebar-row__hanzi {
    font-size: 1.3rem; min-width: 2ch; flex-shrink: 0;
}
.cnl-vocab-sidebar-row__hanzi a { color: var(--cnl-ink); text-decoration: none; }
.cnl-vocab-sidebar-row__hanzi a:hover { color: var(--cnl-primary); }
.cnl-vocab-sidebar-row__info { flex: 1; min-width: 0; overflow: hidden; }

/* Related grid (bottom) */
.cnl-vocab-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.cnl-vocab-related-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 4px;
    padding: 20px 12px;
    background: #fff;
    border: 1.5px solid var(--cnl-line);
    border-radius: var(--cnl-r);
    text-decoration: none; color: var(--cnl-ink);
    transition: all .15s;
}
.cnl-vocab-related-card:hover { border-color: var(--cnl-primary); background: var(--cnl-primary-50); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(226,59,46,.1); }
.cnl-vocab-related-card__hanzi { font-family: var(--cnl-font-hanzi); font-size: 1.8rem; font-weight: 700; color: var(--cnl-ink); }
.cnl-vocab-related-card__pinyin { font-size: var(--cnl-fs-sm); color: var(--cnl-primary); font-style: italic; }
.cnl-vocab-related-card__meaning { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); }

/* Flashcard preview */
.cnl-flashcard-preview {
    width: 220px; height: 140px; margin: 0 auto;
    background: linear-gradient(135deg, var(--cnl-primary-50), #fff0f0);
    border: 2px solid var(--cnl-primary-100);
    border-radius: var(--cnl-r);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}