/* ==========================================================================
   CNL — Thành phần giao diện dùng chung
   ========================================================================== */

/* ----------------------------------------------------------------- BUTTON */
.cnl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--cnl-r-pill);
	font-weight: 700;
	font-size: var(--cnl-fs-base);
	line-height: 1.2;
	white-space: nowrap;
	transition: transform var(--cnl-t), box-shadow var(--cnl-t), background var(--cnl-t), color var(--cnl-t), border-color var(--cnl-t);
}
.cnl-btn:active { transform: translateY(1px); }

.cnl-btn--primary {
	background: linear-gradient(135deg, var(--cnl-primary), var(--cnl-primary-600));
	color: #fff;
	box-shadow: var(--cnl-shadow-red);
}
.cnl-btn--primary:hover { color: #fff; box-shadow: 0 14px 30px -10px rgba(226, 59, 46, .7); }

.cnl-btn--ghost {
	background: var(--cnl-card);
	color: var(--cnl-ink);
	border-color: var(--cnl-line);
	box-shadow: var(--cnl-shadow-xs);
}
.cnl-btn--ghost:hover { color: var(--cnl-primary); border-color: var(--cnl-primary); }

.cnl-btn--soft { background: var(--cnl-primary-50); color: var(--cnl-primary); }
.cnl-btn--soft:hover { background: var(--cnl-primary-100); color: var(--cnl-primary-700); }

.cnl-btn--dark { background: var(--cnl-ink); color: #fff; }
.cnl-btn--dark:hover { color: #fff; background: #000; }

.cnl-btn--lg { padding: 15px 30px; font-size: var(--cnl-fs-md); }
.cnl-btn--sm { padding: 8px 15px; font-size: var(--cnl-fs-sm); }
.cnl-btn--block { width: 100%; }
.cnl-btn[disabled], .cnl-btn.is-disabled { opacity: .5; pointer-events: none; }

.cnl-btn--google {
	background: var(--cnl-card);
	color: var(--cnl-ink);
	border-color: var(--cnl-line-2);
}
.cnl-btn--google svg { fill: currentColor; stroke: none; }

.cnl-link-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	font-size: var(--cnl-fs-base);
	color: var(--cnl-primary);
	white-space: nowrap;
}
.cnl-link-more svg { transition: transform var(--cnl-t); }
.cnl-link-more:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------- CARD */
.cnl-card {
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	box-shadow: var(--cnl-shadow-sm);
	padding: var(--cnl-gap);
	transition: transform var(--cnl-t), box-shadow var(--cnl-t), border-color var(--cnl-t);
}
.cnl-card--flat { box-shadow: none; }
.cnl-card--pad-lg { padding: var(--cnl-gap-lg); }
.cnl-card--pad-0 { padding: 0; overflow: hidden; }

a.cnl-card:hover,
.cnl-card--hover:hover {
	transform: translateY(-3px);
	box-shadow: var(--cnl-shadow);
	border-color: color-mix(in srgb, var(--cnl-primary) 35%, var(--cnl-line));
}

.cnl-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cnl-gap-sm);
	margin-bottom: var(--cnl-gap-sm);
}
.cnl-card__title {
	font-size: var(--cnl-fs-md);
	font-weight: 800;
	margin: 0;
}
.cnl-card__body { color: var(--cnl-ink-2); }
.cnl-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cnl-gap-sm);
	margin-top: var(--cnl-gap-sm);
	padding-top: var(--cnl-gap-sm);
	border-top: 1px solid var(--cnl-line);
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-muted);
}

/* -------------------------------------------------------- TIÊU ĐỀ KHỐI */
.cnl-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cnl-gap);
	margin-bottom: var(--cnl-gap-lg);
}
.cnl-sechead--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.cnl-sechead--center .cnl-sechead__desc { max-width: 62ch; }
.cnl-sechead__title { margin: 0; }
.cnl-sechead__desc {
	margin: 8px 0 0;
	color: var(--cnl-ink-2);
	font-size: var(--cnl-fs-md);
	max-width: 68ch;
}

.cnl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: var(--cnl-r-pill);
	background: var(--cnl-primary-50);
	color: var(--cnl-primary);
	font-size: var(--cnl-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cnl-eyebrow--onred {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

/* ------------------------------------------------------------------ PILL */
.cnl-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: var(--cnl-r-pill);
	font-size: var(--cnl-fs-xs);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.cnl-pill--red { background: var(--cnl-primary-100); color: var(--cnl-primary-700); }
.cnl-pill--gold { background: var(--cnl-gold-100); color: var(--cnl-gold); }
.cnl-pill--accent { background: var(--cnl-accent-100); color: #92400E; }
.cnl-pill--purple { background: var(--cnl-purple-100); color: var(--cnl-purple); }
.cnl-pill--teal { background: var(--cnl-teal-100); color: var(--cnl-teal); }
.cnl-pill--blue { background: var(--cnl-blue-100); color: var(--cnl-blue); }
.cnl-pill--green { background: var(--cnl-green-100); color: var(--cnl-green); }
.cnl-pill--orange { background: var(--cnl-orange-100); color: var(--cnl-orange); }
.cnl-pill--indigo { background: var(--cnl-indigo-100); color: var(--cnl-indigo); }
.cnl-pill--sky { background: var(--cnl-sky-100); color: var(--cnl-sky); }
.cnl-pill--ghost { background: var(--cnl-surface-2); color: var(--cnl-ink-2); }

/* --------------------------------------------------------------- TIẾN ĐỘ */
.cnl-bar {
	height: 7px;
	width: 100%;
	background: var(--cnl-surface-2);
	border-radius: var(--cnl-r-pill);
	overflow: hidden;
}
.cnl-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--cnl-primary), var(--cnl-accent));
	transition: width var(--cnl-t-slow);
}
.cnl-bar--teal .cnl-bar__fill { background: linear-gradient(90deg, var(--cnl-teal), var(--cnl-green)); }
.cnl-bar--purple .cnl-bar__fill { background: linear-gradient(90deg, var(--cnl-purple), var(--cnl-indigo)); }
.cnl-bar--blue .cnl-bar__fill { background: linear-gradient(90deg, var(--cnl-blue), var(--cnl-sky)); }

.cnl-ring {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--cnl-ring-size, 96px);
	height: var(--cnl-ring-size, 96px);
	flex-shrink: 0;
}
.cnl-ring svg { transform: rotate(-90deg); }
.cnl-ring__track { stroke: var(--cnl-surface-2); }
.cnl-ring__bar {
	stroke: var(--cnl-primary);
	transition: stroke-dashoffset var(--cnl-t-slow);
}
.cnl-ring__value {
	position: absolute;
	font-weight: 800;
	font-size: calc(var(--cnl-ring-size, 96px) * .23);
	color: var(--cnl-ink);
	line-height: 1;
}
.cnl-ring__value small { font-size: .6em; font-weight: 700; }

/* ------------------------------------------------------------ THỐNG KÊ */
.cnl-stat {
	display: flex;
	align-items: center;
	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-stat__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--cnl-primary-50);
	color: var(--cnl-primary);
	flex-shrink: 0;
}
.cnl-stat--gold .cnl-stat__icon { background: var(--cnl-gold-100); color: var(--cnl-gold); }
.cnl-stat--purple .cnl-stat__icon { background: var(--cnl-purple-100); color: var(--cnl-purple); }
.cnl-stat--teal .cnl-stat__icon { background: var(--cnl-teal-100); color: var(--cnl-teal); }
.cnl-stat--blue .cnl-stat__icon { background: var(--cnl-blue-100); color: var(--cnl-blue); }
.cnl-stat--green .cnl-stat__icon { background: var(--cnl-green-100); color: var(--cnl-green); }
.cnl-stat__value {
	font-size: var(--cnl-fs-xl);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.cnl-stat__label { font-size: var(--cnl-fs-sm); color: var(--cnl-muted); font-weight: 600; }

/* -------------------------------------------------------------- AVATAR */
.cnl-avatar__img,
.cnl-avatar__fallback {
	width: var(--cnl-avatar-size, 44px);
	height: var(--cnl-avatar-size, 44px);
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.cnl-avatar__fallback {
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, var(--cnl-primary), var(--cnl-accent));
	color: #fff;
	font-weight: 800;
	font-size: calc(var(--cnl-avatar-size, 44px) * .42);
}

/* ---------------------------------------------------------- BIỂU MẪU */
.cnl-field { margin-bottom: var(--cnl-gap-sm); }
.cnl-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--cnl-fs-sm);
	font-weight: 700;
	color: var(--cnl-ink-2);
}
.cnl-field__hint { margin-top: 6px; font-size: var(--cnl-fs-xs); color: var(--cnl-muted); }
.cnl-field__error { margin-top: 6px; font-size: var(--cnl-fs-xs); color: var(--cnl-primary); font-weight: 600; }

.cnl-input,
.cnl-select,
.cnl-textarea,
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	padding: 11px 14px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-sm);
	color: var(--cnl-ink);
	font-size: var(--cnl-fs-base);
	transition: border-color var(--cnl-t), box-shadow var(--cnl-t);
	appearance: none;
	-webkit-appearance: none;
}
.cnl-input:focus, .cnl-select:focus, .cnl-textarea:focus,
input:focus, select:focus, textarea:focus {
	outline: 0;
	border-color: var(--cnl-primary);
	box-shadow: 0 0 0 3px var(--cnl-primary-50);
}
textarea { min-height: 130px; resize: vertical; }

select, .cnl-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8598' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.cnl-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var(--cnl-fs-base);
	color: var(--cnl-ink-2);
	cursor: pointer;
}
.cnl-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cnl-primary); flex-shrink: 0; }

/* Ô tìm kiếm lớn */
.cnl-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 16px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-pill);
	box-shadow: var(--cnl-shadow-sm);
}
.cnl-search__icon { color: var(--cnl-muted); flex-shrink: 0; }
.cnl-search__input {
	flex: 1;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 8px 0 !important;
	font-size: var(--cnl-fs-base);
}
.cnl-search__input:focus { box-shadow: none !important; }
.cnl-search .cnl-btn { flex-shrink: 0; }
.cnl-search--sm { padding: 4px 4px 4px 13px; box-shadow: none; }
.cnl-search--sm .cnl-search__input { padding: 6px 0 !important; font-size: var(--cnl-fs-sm); }

/* Bộ lọc dạng chip */
.cnl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cnl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 14px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-pill);
	color: var(--cnl-ink-2);
	font-size: var(--cnl-fs-sm);
	font-weight: 600;
	transition: all var(--cnl-t);
}
.cnl-chip:hover { border-color: var(--cnl-primary); color: var(--cnl-primary); }
.cnl-chip.is-active,
.cnl-chip[aria-pressed="true"] {
	background: var(--cnl-primary);
	border-color: var(--cnl-primary);
	color: #fff;
}
.cnl-chip__count {
	font-size: 11px;
	opacity: .65;
	font-weight: 700;
}

/* ------------------------------------------------------------------ TABS */
.cnl-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: var(--cnl-gap);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--cnl-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.cnl-tabs::-webkit-scrollbar { display: none; }
.cnl-tab {
	position: relative;
	padding: 11px 16px;
	background: none;
	border: 0;
	color: var(--cnl-muted);
	font-weight: 700;
	font-size: var(--cnl-fs-base);
	white-space: nowrap;
	transition: color var(--cnl-t);
}
.cnl-tab:hover { color: var(--cnl-ink); }
.cnl-tab.is-active { color: var(--cnl-primary); }
.cnl-tab.is-active::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: -3px;
	height: 3px;
	border-radius: var(--cnl-r-pill);
	background: var(--cnl-primary);
}
.cnl-tabpanel[hidden] { display: none; }

/* -------------------------------------------------------------- BẢNG */
.cnl-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--cnl-fs-base);
}
.cnl-table th {
	position: sticky;
	top: 0;
	background: var(--cnl-surface-2);
	font-size: var(--cnl-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--cnl-muted);
	padding: 12px 14px;
	border-bottom: 1px solid var(--cnl-line);
	white-space: nowrap;
}
.cnl-table td {
	padding: 14px;
	border-bottom: 1px solid var(--cnl-line);
	vertical-align: middle;
}
.cnl-table tbody tr { transition: background var(--cnl-t); }
.cnl-table tbody tr:hover { background: var(--cnl-primary-50); }
.cnl-table tbody tr:last-child td { border-bottom: 0; }
.cnl-table__rank {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 9px;
	background: var(--cnl-surface-2);
	font-weight: 800;
	font-size: var(--cnl-fs-sm);
	color: var(--cnl-ink-2);
}
.cnl-table__rank--1 { background: var(--cnl-gold-100); color: var(--cnl-gold); }
.cnl-table__rank--2 { background: var(--cnl-line-2); color: var(--cnl-ink-2); }
.cnl-table__rank--3 { background: var(--cnl-orange-100); color: var(--cnl-orange); }

/* -------------------------------------------------------- NÚT PHÁT ÂM */
.cnl-audio-btn {
	display: inline-grid;
	place-items: center;
	width: 32px; height: 32px;
	border: 1px solid var(--cnl-line);
	border-radius: 50%;
	background: var(--cnl-card);
	color: var(--cnl-primary);
	flex-shrink: 0;
	transition: all var(--cnl-t);
}
.cnl-audio-btn:hover { background: var(--cnl-primary); color: #fff; border-color: var(--cnl-primary); }
.cnl-audio-btn.is-playing {
	background: var(--cnl-primary);
	color: #fff;
	border-color: var(--cnl-primary);
	animation: cnl-pulse 1.4s var(--cnl-ease) infinite;
}
.cnl-audio-btn--lg { width: 48px; height: 48px; }

@keyframes cnl-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(226, 59, 46, .45); }
	50% { box-shadow: 0 0 0 9px rgba(226, 59, 46, 0); }
}

/* --------------------------------------------------------- BREADCRUMB */
.cnl-crumbs { margin-bottom: 14px; font-size: var(--cnl-fs-sm); }
.cnl-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cnl-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: var(--cnl-muted);
}
.cnl-crumbs__item a { color: inherit; font-weight: 600; }
.cnl-crumbs__item a:hover { color: var(--cnl-primary); }
.cnl-crumbs__item [aria-current] { color: var(--cnl-ink); font-weight: 700; }
.cnl-crumbs__sep { opacity: .45; }

/* --------------------------------------------------------- PHÂN TRANG */
.cnl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: var(--cnl-gap-lg);
}
.cnl-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: 12px;
	color: var(--cnl-ink-2);
	font-weight: 700;
	font-size: var(--cnl-fs-base);
	transition: all var(--cnl-t);
}
.cnl-pagination .page-numbers:hover { border-color: var(--cnl-primary); color: var(--cnl-primary); }
.cnl-pagination .page-numbers.current {
	background: var(--cnl-primary);
	border-color: var(--cnl-primary);
	color: #fff;
}
.cnl-pagination .dots { border-color: transparent; background: none; }

/* -------------------------------------------------------- TRẠNG THÁI RỖNG */
.cnl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--cnl-gap-xl) var(--cnl-gap);
	text-align: center;
	background: var(--cnl-card);
	border: 1px dashed var(--cnl-line);
	border-radius: var(--cnl-r-lg);
}
.cnl-empty__icon {
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	border-radius: 18px;
	background: var(--cnl-primary-50);
	color: var(--cnl-primary);
}
.cnl-empty__title { margin: 6px 0 0; font-size: var(--cnl-fs-lg); }
.cnl-empty__desc { margin: 0 0 8px; color: var(--cnl-muted); max-width: 46ch; }

/* --------------------------------------------------------------- ALERT */
.cnl-alert {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border-radius: var(--cnl-r);
	font-size: var(--cnl-fs-base);
	border: 1px solid;
}
.cnl-alert--info { background: var(--cnl-blue-100); border-color: color-mix(in srgb, var(--cnl-blue) 30%, transparent); color: #1E40AF; }
.cnl-alert--success { background: var(--cnl-green-100); border-color: color-mix(in srgb, var(--cnl-green) 30%, transparent); color: #14532D; }
.cnl-alert--warn { background: var(--cnl-accent-100); border-color: color-mix(in srgb, var(--cnl-accent) 40%, transparent); color: #92400E; }
.cnl-alert--error { background: var(--cnl-primary-100); border-color: color-mix(in srgb, var(--cnl-primary) 35%, transparent); color: var(--cnl-primary-700); }
.cnl-alert svg { flex-shrink: 0; margin-top: 2px; }

/* -------------------------------------------------------------- TOAST */
.cnl-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var(--cnl-z-modal);
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.cnl-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	background: var(--cnl-ink);
	color: #fff;
	border-radius: var(--cnl-r);
	box-shadow: var(--cnl-shadow-lg);
	font-weight: 600;
	font-size: var(--cnl-fs-base);
	animation: cnl-toast-in .3s var(--cnl-ease);
	pointer-events: auto;
}
.cnl-toast--error { background: var(--cnl-primary-700); }
.cnl-toast--success { background: #15803D; }

@keyframes cnl-toast-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
	.cnl-toasts { right: 12px; left: 12px; bottom: 78px; }
}

/* ------------------------------------------------------- WIDGET SIDEBAR */
.cnl-widget {
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r-lg);
	padding: var(--cnl-gap);
	margin-bottom: var(--cnl-gap);
	box-shadow: var(--cnl-shadow-sm);
}
.cnl-widget__title {
	font-size: var(--cnl-fs-md);
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cnl-line);
}
.cnl-widget ul { list-style: none; padding: 0; margin: 0; }
.cnl-widget li { margin-bottom: 8px; font-size: var(--cnl-fs-base); }

/* --------------------------------------------------------- BADGE / HUY HIỆU */
.cnl-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 16px 10px;
	background: var(--cnl-card);
	border: 1px solid var(--cnl-line);
	border-radius: var(--cnl-r);
	text-align: center;
}
.cnl-badge__icon {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--cnl-surface-2);
	color: var(--cnl-muted);
}
.cnl-badge__label { font-size: var(--cnl-fs-xs); font-weight: 700; color: var(--cnl-ink-2); }
.cnl-badge.is-earned .cnl-badge__icon {
	background: linear-gradient(140deg, var(--cnl-accent), var(--cnl-gold));
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(217, 119, 6, .7);
}
.cnl-badge:not(.is-earned) { opacity: .6; }

/* --------------------------------------------------- KHỐI CHỮ HÁN LỚN */
.cnl-hanzi-xl {
	font-family: var(--cnl-font-hanzi);
	font-size: clamp(3.5rem, 9vw, 6rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cnl-ink);
}
.cnl-hanzi-watermark {
	position: absolute;
	font-family: var(--cnl-font-hanzi);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}