/* ==================================================================
 * BẢNG XẾP HẠNG THẨM MỸ (HỖ TRỢ CHẾ ĐỘ SÁNG / TỐI TỰ ĐỘNG)
 * ================================================================== */

/* 1. MẶC ĐỊNH: CHẾ ĐỘ SÁNG (LIGHT MODE) */
:root {
	--bxh-bg-main: #f8fafc;
	--bxh-bg-card: #ffffff;
	--bxh-border: #f1f5f9;
	--bxh-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.06);

	--bxh-hero-text: #0f172a;
	--bxh-hero-sub: #64748b;
	--bxh-btn-bg: #e0f2fe;
	--bxh-btn-color: #0284c7;

	--podium-1-bg: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	--podium-1-border: #fde68a;
	--podium-1-pill-bg: #fef08a;
	--podium-1-pill-text: #854d0e;

	--podium-2-bg: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
	--podium-2-border: #bae6fd;
	--podium-2-pill-bg: #e0f2fe;
	--podium-2-pill-text: #0369a1;

	--podium-3-bg: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
	--podium-3-border: #fecdd3;
	--podium-3-pill-bg: #ffe4e6;
	--podium-3-pill-text: #be123c;

	--row-col-head: #94a3b8;
	--row-name-text: #1e293b;
	--row-sub-text: #64748b;

	--row-1-bg: #f0f9ff; --row-1-color: #0284c7;
	--row-2-bg: #f0fdf4; --row-2-color: #16a34a;
	--row-3-bg: #fff1f2; --row-3-color: #e11d48;
	--row-4-bg: #fffbeb; --row-4-color: #d97706;
	--row-5-bg: #faf5ff; --row-5-color: #9333ea;
}

/* 2. CHẾ ĐỘ TỐI: KHI BẬT THEO CÀI ĐẶT THÀNH VIÊN HOẶC HỆ THỐNG */
html[data-mode="dark"],
html[data-skin="kinh"][data-mode="dark"] {
	--bxh-bg-main: #0b0f19;
	--bxh-bg-card: #111827;
	--bxh-border: #1f293d;
	--bxh-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);

	--bxh-hero-text: #f8fafc;
	--bxh-hero-sub: #94a3b8;
	--bxh-btn-bg: #1e293b;
	--bxh-btn-color: #38bdf8;

	--podium-1-bg: linear-gradient(180deg, #1e1b13 0%, #292211 100%);
	--podium-1-border: #78350f;
	--podium-1-pill-bg: #451a03;
	--podium-1-pill-text: #fde047;

	--podium-2-bg: linear-gradient(180deg, #0c1c2e 0%, #10263f 100%);
	--podium-2-border: #0369a1;
	--podium-2-pill-bg: #082f49;
	--podium-2-pill-text: #38bdf8;

	--podium-3-bg: linear-gradient(180deg, #241118 0%, #351622 100%);
	--podium-3-border: #9f1239;
	--podium-3-pill-bg: #4c0519;
	--podium-3-pill-text: #fb7185;

	--row-col-head: #64748b;
	--row-name-text: #f1f5f9;
	--row-sub-text: #94a3b8;

	--row-1-bg: #0c1f38; --row-1-color: #38bdf8;
	--row-2-bg: #0d281e; --row-2-color: #4ade80;
	--row-3-bg: #2b111a; --row-3-color: #fb7185;
	--row-4-bg: #291c0e; --row-4-color: #fbbf24;
	--row-5-bg: #221533; --row-5-color: #c084fc;
}

@media (prefers-color-scheme: dark) {
	html[data-mode="auto"] {
		--bxh-bg-main: #0b0f19;
		--bxh-bg-card: #111827;
		--bxh-border: #1f293d;
		--bxh-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);

		--bxh-hero-text: #f8fafc;
		--bxh-hero-sub: #94a3b8;
		--bxh-btn-bg: #1e293b;
		--bxh-btn-color: #38bdf8;

		--podium-1-bg: linear-gradient(180deg, #1e1b13 0%, #292211 100%);
		--podium-1-border: #78350f;
		--podium-1-pill-bg: #451a03;
		--podium-1-pill-text: #fde047;

		--podium-2-bg: linear-gradient(180deg, #0c1c2e 0%, #10263f 100%);
		--podium-2-border: #0369a1;
		--podium-2-pill-bg: #082f49;
		--podium-2-pill-text: #38bdf8;

		--podium-3-bg: linear-gradient(180deg, #241118 0%, #351622 100%);
		--podium-3-border: #9f1239;
		--podium-3-pill-bg: #4c0519;
		--podium-3-pill-text: #fb7185;

		--row-col-head: #64748b;
		--row-name-text: #f1f5f9;
		--row-sub-text: #94a3b8;

		--row-1-bg: #0c1f38; --row-1-color: #38bdf8;
		--row-2-bg: #0d281e; --row-2-color: #4ade80;
		--row-3-bg: #2b111a; --row-3-color: #fb7185;
		--row-4-bg: #291c0e; --row-4-color: #fbbf24;
		--row-5-bg: #221533; --row-5-color: #c084fc;
	}
}

/* ==================================================================
   KHUNG CHÍNH (WRAPPER)
   ================================================================== */
.bxh-theme-wrap {
	max-width: 860px;
	margin: 16px auto 80px;
	padding: 24px 22px 34px;
	background: var(--bxh-bg-card);
	border-radius: 28px;
	border: 1px solid var(--bxh-border);
	box-shadow: var(--bxh-shadow);
	transition: background 0.25s ease, border-color 0.25s ease;
	box-sizing: border-box;
}

/* HEADER HERO */
.bxh-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px dashed var(--bxh-border);
}

.bxh-hero-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bxh-cup-ico {
	font-size: 28px;
	line-height: 1;
}

.bxh-hero h1 {
	margin: 0 0 4px;
	font-size: 21px;
	font-weight: 800;
	color: var(--bxh-hero-text);
}

.bxh-hero p {
	margin: 0;
	font-size: 13px;
	color: var(--bxh-hero-sub);
}

.bxh-tag-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bxh-btn-bg);
	color: var(--bxh-btn-color);
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 99px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.bxh-tag-btn:hover {
	opacity: 0.85;
}

/* ==================================================================
   BỤC 3 HỘP TOP 1 - TOP 2 - TOP 3 (PODIUM CÂN ĐỐI 100%)
   ================================================================== */
.bxh-podium-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	margin: 20px 0 34px;
	padding: 0 4px;
}

.podium-card {
	flex: 1;
	border-radius: 22px;
	padding: 24px 8px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between; /* Đẩy avatar lên đỉnh, điểm số xuống đáy */
	text-align: center;
	position: relative;
	box-sizing: border-box;
	border: 1.5px solid transparent;
	min-height: 225px; /* Giữ chiều cao Top 2 và Top 3 luôn bằng chằn chặn */
}

/* Top 2 và Top 3 cân đối tuyệt đối */
.card-rank--2 {
	order: 1;
	background: var(--podium-2-bg);
	border-color: var(--podium-2-border);
}

.card-rank--3 {
	order: 3;
	background: var(--podium-3-bg);
	border-color: var(--podium-3-border);
}

/* Top 1 ở giữa cao hơn */
.card-rank--1 {
	order: 2;
	background: var(--podium-1-bg);
	border-color: var(--podium-1-border);
	min-height: 245px;
	transform: translateY(-10px);
}

/* Vương miện trên đỉnh card */
.podium-crown {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

.podium-crown svg {
	width: 24px;
	height: 24px;
}

.crown--1 svg { fill: #f59e0b; filter: drop-shadow(0 2px 5px rgba(245, 158, 11, 0.4)); }
.crown--2 svg { fill: #38bdf8; filter: drop-shadow(0 2px 5px rgba(56, 189, 248, 0.4)); }
.crown--3 svg { fill: #f43f5e; filter: drop-shadow(0 2px 5px rgba(244, 63, 94, 0.4)); }

/* Avatar bục & số thứ hạng dưới chân */
.podium-avatar-wrap {
	position: relative;
	margin-bottom: 8px;
	flex-shrink: 0;
}

.podium-avatar img,
.podium-avatar .avatar,
.podium-avatar .bxh-chu {
	display: block !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-rank--1 .podium-avatar img,
.card-rank--1 .podium-avatar .avatar,
.card-rank--1 .podium-avatar .bxh-chu {
	width: 70px !important;
	height: 70px !important;
	border-color: #fef08a !important;
	box-shadow: 0 8px 20px rgba(234, 179, 8, 0.25);
}

/* Chữ đại diện căn giữa tuyệt đối */
.bxh-chu {
	display: grid !important;
	place-items: center !important;
	place-content: center !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	overflow: hidden !important;
}

.bxh-chu i {
	font-style: normal !important;
	display: block !important;
	line-height: 1 !important;
}

.podium-rank-tag {
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 900;
	color: #fff;
	border: 2px solid #ffffff;
}

.tag--1 { background: #f59e0b; }
.tag--2 { background: #38bdf8; }
.tag--3 { background: #f43f5e; }

/* Khu vực thông tin giữa bục: Tên + Huy hiệu (cố định khoảng trống cho cân xứng) */
.podium-info-mid {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 4px 0 8px;
}

.podium-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--row-name-text);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	text-align: center;
}

.podium-badge-box {
	min-height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
}

/* Viên thuốc điểm số bục */
.podium-score-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 12px;
	white-space: nowrap;
	flex-shrink: 0;
}

.pill--1 { background: var(--podium-1-pill-bg); color: var(--podium-1-pill-text); }
.pill--2 { background: var(--podium-2-pill-bg); color: var(--podium-2-pill-text); }
.pill--3 { background: var(--podium-3-pill-bg); color: var(--podium-3-pill-text); }

.podium-score-pill b { font-weight: 800; }
.podium-score-pill small { font-size: 10px; font-weight: 600; }

/* ==================================================================
   DANH SÁCH TỪ TOP 4 TRỞ ĐI
   ================================================================== */
.bxh-col-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--row-col-head);
}

.col-head-rank { flex: 0 0 34px; }
.col-head-user { flex: 1; }
.col-head-score { flex: 0 0 auto; min-width: 65px; text-align: right; }

.bxh-rows-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bxh-list-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.02);
	box-sizing: border-box;
	transition: transform 0.15s ease;
}

.bxh-list-row:hover {
	transform: translateY(-1px);
}

/* Số thứ hạng */
.row-rank {
	flex: 0 0 34px !important;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.rank-crown-mini {
	font-size: 12px;
	line-height: 1;
}

/* Cụm thông tin người dùng */
.row-user-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px;
}

.row-avatar {
	flex: 0 0 40px !important;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.row-avatar img,
.row-avatar .avatar,
.row-avatar .bxh-chu {
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

/* Tên và Huy hiệu: Khi tên dài, huy hiệu sẽ tự rớt xuống dòng thứ 2 */
.row-name {
	display: flex !important;
	flex-wrap: wrap !important; /* Cho phép rớt xuống dòng thứ 2 */
	align-items: center !important;
	gap: 4px 6px !important;
	min-width: 0 !important;
	line-height: 1.35 !important;
}

.user-txt {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--row-name-text);
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

.user-badge-wrap {
	display: inline-flex !important;
	flex-shrink: 0 !important;
}

/* Huy hiệu gói luôn giữ nguyên khối, không bao giờ bị cắt chữ */
.jun-badge {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	font-size: 10px !important;
	padding: 1px 7px !important;
	border-radius: 99px !important;
	line-height: 1.35 !important;
}

.tag-me-badge {
	font-size: 10px;
	font-weight: 800;
	background: rgba(0, 0, 0, 0.1);
	padding: 1px 6px;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Điểm số và icon mũi tên */
.row-score-meta {
	flex: 0 0 auto !important;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.score-num {
	font-size: 13.5px;
	font-weight: 800;
	white-space: nowrap;
}

.score-num small {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.8;
}

.score-arrow {
	opacity: 0.35;
	flex-shrink: 0;
}

/* Phối tông màu từng card dòng */
.row-tone--1 { background: var(--row-1-bg); color: var(--row-1-color); }
.row-tone--2 { background: var(--row-2-bg); color: var(--row-2-color); }
.row-tone--3 { background: var(--row-3-bg); color: var(--row-3-color); }
.row-tone--4 { background: var(--row-4-bg); color: var(--row-4-color); }
.row-tone--5 { background: var(--row-5-bg); color: var(--row-5-color); }

/* Dòng người dùng nổi bật */
.bxh-list-row.is-me {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}

.bxh-list-row.is-me .user-txt { color: #ffffff !important; }
.bxh-list-row.is-me .score-arrow { stroke: #ffffff; opacity: 0.8; }

.bxh-sticky-me {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--bxh-border);
}

.bxh-empty-card {
	text-align: center;
	padding: 30px;
	color: var(--row-sub-text);
}

/* ==================================================================
   RESPONSIVE MOBILE (< 480px)
   ================================================================== */
@media (max-width: 480px) {
	.bxh-theme-wrap {
		padding: 16px 10px 80px;
		border-radius: 20px;
		margin: 10px auto 40px;
	}

	.bxh-podium-wrap {
		gap: 6px;
	}

	.podium-card {
		padding: 20px 4px 14px;
		border-radius: 18px;
		min-height: 185px; /* Giữ cân bằng chiều cao 3 bục trên mobile */
	}

	.card-rank--1 {
		min-height: 205px;
		transform: translateY(-8px);
	}

	.podium-crown {
		top: -12px;
		width: 22px;
		height: 22px;
	}

	.podium-crown svg {
		width: 18px;
		height: 18px;
	}

	.podium-avatar img,
	.podium-avatar .avatar,
	.podium-avatar .bxh-chu {
		width: 50px !important;
		height: 50px !important;
	}

	.card-rank--1 .podium-avatar img,
	.card-rank--1 .podium-avatar .avatar,
	.card-rank--1 .podium-avatar .bxh-chu {
		width: 60px !important;
		height: 60px !important;
	}

	.podium-name {
		font-size: 11.5px;
	}

	.podium-score-pill {
		font-size: 11px;
		padding: 2px 7px;
	}

	.bxh-list-row {
		padding: 8px 10px;
		gap: 8px;
	}

	.row-rank {
		flex: 0 0 28px !important;
		font-size: 12px;
	}

	.row-user-info {
		gap: 8px;
	}

	.row-avatar,
	.row-avatar img,
	.row-avatar .avatar,
	.row-avatar .bxh-chu {
		width: 36px !important;
		height: 36px !important;
		flex-basis: 36px !important;
	}

	.user-txt {
		font-size: 13px !important;
	}

	.score-num {
		font-size: 12.5px;
	}

	.score-arrow {
		display: none;
	}
}
/* ---- Phần thưởng Top 3 ---- */
.bxh-qua{margin:0 0 18px;padding:16px 18px 18px;border:var(--bd,2px) solid var(--ink);border-radius:var(--r-sm,16px);background:linear-gradient(135deg,#fff8e1,#fff 55%,#f3f7ff);color:#1f2937}
.bxh-qua-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bxh-qua-dau h2{margin:0;font-size:19px;font-weight:900}
.bxh-qua-chot{font-size:13px;font-weight:700;color:#b45309;background:#fef3c7;padding:4px 10px;border-radius:999px}
.bxh-qua-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bxh-qua-o{padding:12px;border-radius:14px;background:#fff;border:2px solid #e5e7eb}
.bxh-qua-o--1{border-color:#f5b400;box-shadow:0 6px 16px rgba(245,180,0,.25)}
.bxh-qua-o--2{border-color:#a8b3c2}
.bxh-qua-o--3{border-color:#d08a4c}
.bxh-qua-hang{margin:0 0 8px;font-weight:900;font-size:16px}
.bxh-qua-o ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bxh-qua-o li{font-size:14px;line-height:1.35;font-weight:600}
.bxh-qua-trong{margin:0;color:#9ca3af}
@media (max-width:640px){.bxh-qua-luoi{grid-template-columns:1fr}.bxh-qua-o--1{order:-1}}

/* ---- Tab chính (Điểm tích luỹ | Chiến thần TOPIK) và tab con (TOPIK I | TOPIK II): rộng bằng nhau ---- */
.bxh-tab-chinh,.bxh-tab-con{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bxh-tab-chinh a,.bxh-tab-con a{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;margin:0}
.bxh-tab-con{margin-top:-4px;max-width:520px;margin-left:auto;margin-right:auto}
.bxh-tab-con a{min-height:40px;font-size:15px;border-radius:999px}
.bxh-tab-chinh a{white-space:nowrap;font-size:clamp(13px,3.9vw,16px);padding-left:8px;padding-right:8px}
.bxh-tab-chinh a{min-height:50px;padding-top:0;padding-bottom:0}
.bxh-tab-con a{min-height:38px;padding-top:0;padding-bottom:0;font-size:14px}

/* ---- Quà Top 3 xếp như bục nhận giải: 2 | 1 | 3, luôn nằm ngang ---- */
.bxh-qua-luoi{grid-template-columns:1fr 1.12fr 1fr;align-items:end}
.bxh-qua-o{text-align:center}
.bxh-qua-o ul{justify-items:center}
.bxh-qua-o--1{order:0;padding-top:18px;padding-bottom:18px;transform:translateY(-4px);background:linear-gradient(180deg,#fffbeb,#fff)}
.bxh-qua-o--1 .bxh-qua-hang{font-size:18px}
@media (max-width:640px){
  .bxh-qua{padding:12px 10px 14px}
  .bxh-qua-luoi{grid-template-columns:1fr 1.12fr 1fr;gap:6px}
  .bxh-qua-o{padding:9px 6px;border-radius:12px}
  .bxh-qua-o--1{order:0;padding-top:14px;padding-bottom:14px}
  .bxh-qua-hang{font-size:13px;margin-bottom:6px}
  .bxh-qua-o--1 .bxh-qua-hang{font-size:15px}
  .bxh-qua-o ul{gap:4px}
  .bxh-qua-o li{font-size:11.5px;line-height:1.3;font-weight:700}
  .bxh-qua-dau h2{font-size:16px}
  .bxh-qua-chot{font-size:11px}
}
/* bục nhận giải: Top 1 cao nhất, hai bên hạ thấp */
.bxh-qua-luoi{align-items:start}
.bxh-qua-o--1{transform:none;margin-top:0;min-height:100%}
.bxh-qua-o--2,.bxh-qua-o--3{margin-top:22px}
@media (max-width:640px){.bxh-qua-o--2,.bxh-qua-o--3{margin-top:18px}}
.bxh-qua-luoi{align-items:stretch}
.bxh-qua-o--1{min-height:0}

/* ---- Đồng hồ đếm ngược làm mới bảng xếp hạng ---- */
.bxh-dem{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 14px;padding:12px;border-radius:14px;background:#0f172a;color:#fff;text-align:center}
.bxh-dem-chu{font-size:14px;font-weight:700;opacity:.9}
.bxh-dem-so{display:flex;gap:8px}
.bxh-dem-so>span{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:6px 4px;border-radius:10px;background:rgba(255,255,255,.1)}
.bxh-dem-so b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.bxh-dem-so small{font-size:11px;opacity:.75}
.bxh-dem-luc{font-size:12px;opacity:.7}
@media (max-width:640px){.bxh-dem-so>span{min-width:52px}.bxh-dem-so b{font-size:20px}}

/* ---- Khung phần thưởng + đồng hồ: chế độ tối ---- */
html[data-mode="dark"] .bxh-qua{background:linear-gradient(135deg,#2a2110,#161a24 55%,#121826);border-color:#3b3f4d;color:#f1f5f9}
html[data-mode="dark"] .bxh-qua-dau h2,html[data-mode="dark"] .bxh-qua-hang,html[data-mode="dark"] .bxh-qua-o li{color:#f8fafc}
html[data-mode="dark"] .bxh-qua-chot{background:#3a2c0b;color:#fcd34d}
html[data-mode="dark"] .bxh-qua-o{background:#1b2130;border-color:#475569}
html[data-mode="dark"] .bxh-qua-o--1{background:linear-gradient(180deg,#2e2710,#1b2130);border-color:#f5b400;box-shadow:0 6px 18px rgba(245,180,0,.18)}
html[data-mode="dark"] .bxh-qua-o--2{border-color:#a8b3c2}
html[data-mode="dark"] .bxh-qua-o--3{border-color:#d08a4c}
html[data-mode="dark"] .bxh-qua-trong{color:#94a3b8}
html[data-mode="dark"] .bxh-dem{background:#0b1120;border:1px solid #1e293b}
@media (prefers-color-scheme:dark){
html[data-mode="auto"] .bxh-qua{background:linear-gradient(135deg,#2a2110,#161a24 55%,#121826);border-color:#3b3f4d;color:#f1f5f9}
html[data-mode="auto"] .bxh-qua-dau h2,html[data-mode="auto"] .bxh-qua-hang,html[data-mode="auto"] .bxh-qua-o li{color:#f8fafc}
html[data-mode="auto"] .bxh-qua-chot{background:#3a2c0b;color:#fcd34d}
html[data-mode="auto"] .bxh-qua-o{background:#1b2130;border-color:#475569}
html[data-mode="auto"] .bxh-qua-o--1{background:linear-gradient(180deg,#2e2710,#1b2130);border-color:#f5b400;box-shadow:0 6px 18px rgba(245,180,0,.18)}
html[data-mode="auto"] .bxh-qua-o--2{border-color:#a8b3c2}
html[data-mode="auto"] .bxh-qua-o--3{border-color:#d08a4c}
html[data-mode="auto"] .bxh-qua-trong{color:#94a3b8}
html[data-mode="auto"] .bxh-dem{background:#0b1120;border:1px solid #1e293b}
}

/* ---- Tông sáng cho đồng hồ đếm ngược + tab đang chọn (cùng tông khung quà) ---- */
.bxh-dem{background:linear-gradient(135deg,#fff4d6,#fffaf0);border:2px solid #f5c542;color:#1f2a44}
.bxh-dem-chu{color:#92400e;opacity:1}
.bxh-dem-so>span{background:#fff;border:1.5px solid #f5d27a;box-shadow:0 2px 6px rgba(245,180,0,.15)}
.bxh-dem-so b{color:#b45309}
.bxh-dem-so small{color:#78716c;opacity:1}
.bxh-dem-luc{color:#78716c;opacity:1}
.bxh-tab-chinh a.is-active,.bxh-tab-con a.is-active{background:linear-gradient(135deg,#ffd76a,#f5b400);border-color:#e0a100;color:#3b2a00}
/* chế độ tối: giữ nền tối cho dễ đọc */
html[data-mode="dark"] .bxh-dem{background:#0b1120;border:1px solid #1e293b;color:#fff}
html[data-mode="dark"] .bxh-dem-chu{color:#fde68a}
html[data-mode="dark"] .bxh-dem-so>span{background:rgba(255,255,255,.08);border-color:transparent;box-shadow:none}
html[data-mode="dark"] .bxh-dem-so b{color:#fff}
html[data-mode="dark"] .bxh-dem-so small,html[data-mode="dark"] .bxh-dem-luc{color:#cbd5e1}
html[data-mode="dark"] .bxh-tab-chinh a.is-active,html[data-mode="dark"] .bxh-tab-con a.is-active{background:linear-gradient(135deg,#f5b400,#d99a00);border-color:#f5b400;color:#1a1300}
@media (prefers-color-scheme:dark){
html[data-mode="auto"] .bxh-dem{background:#0b1120;border:1px solid #1e293b;color:#fff}
html[data-mode="auto"] .bxh-dem-chu{color:#fde68a}
html[data-mode="auto"] .bxh-dem-so>span{background:rgba(255,255,255,.08);border-color:transparent;box-shadow:none}
html[data-mode="auto"] .bxh-dem-so b{color:#fff}
html[data-mode="auto"] .bxh-dem-so small,html[data-mode="auto"] .bxh-dem-luc{color:#cbd5e1}
html[data-mode="auto"] .bxh-tab-chinh a.is-active,html[data-mode="auto"] .bxh-tab-con a.is-active{background:linear-gradient(135deg,#f5b400,#d99a00);border-color:#f5b400;color:#1a1300}
}