/* Dải thống kê cuối trang — mặc định cho nền footer tối của mnhcm-theme; --standalone cho theme khác (nền sáng). */
.mn-vs {
	--vs-surface: #10261b;
	--vs-fg: #b9c8bd;
	--vs-muted: #7f968a;
	--vs-num: #fff;
	--vs-line: rgba(255, 255, 255, .08);
	--vs-chart: #2aa85e;
	--vs-live: #4ade80;
	--vs-live-bg: rgba(74, 222, 128, .1);
	--vs-live-fg: #a7f3c4;
	--vs-tip-bg: #fff;
	--vs-tip-fg: #16211a;
	border-top: 1px solid var(--vs-line);
}
.mn-vs--standalone {
	--vs-surface: #fff;
	--vs-fg: #4b594e;
	--vs-muted: #7c8a7f;
	--vs-num: #16211a;
	--vs-line: #e3e8e1;
	--vs-chart: #1f8a55;
	--vs-live: #1b6b47;
	--vs-live-bg: #eaf3ec;
	--vs-live-fg: #0f4530;
	--vs-tip-bg: #16211a;
	--vs-tip-fg: #fff;
	background: var(--vs-surface);
}
.mn-vs[hidden], .mn-vs [hidden] { display: none !important; }
.mn-vs__in {
	max-width: var(--mn-maxw, 1180px);
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	color: var(--vs-fg);
	font-size: 13px;
	line-height: 1.4;
}

/* Đang xem */
.mn-vs__online {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 11px;
	border-radius: 999px;
	background: var(--vs-live-bg);
	color: var(--vs-live-fg);
	white-space: nowrap;
}
.mn-vs__online b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-vs__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-live); }
.mn-vs__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--vs-live);
	animation: mn-vs-pulse 2s ease-out infinite;
}
@keyframes mn-vs-pulse {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(2.8); opacity: 0; }
}

/* Tổng cộng + line chart */
.mn-vs__total { margin: 0 0 0 auto; display: flex; align-items: center; gap: 24px; min-width: 0; }
.mn-vs__head { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.mn-vs__label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-muted); }
.mn-vs__badge { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(226, 150, 46, .16); color: #f5b860; font-style: normal; font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.mn-vs__num { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--vs-num); font-variant-numeric: tabular-nums; }
.mn-vs__sub { font-size: 12px; color: var(--vs-muted); }
.mn-vs__chart { position: relative; width: 280px; height: 56px; flex: none; }
.mn-vs__chart svg { display: block; overflow: visible; touch-action: pan-y; }
.mn-vs__stop-a { stop-color: var(--vs-chart); stop-opacity: .32; }
.mn-vs__stop-b { stop-color: var(--vs-chart); stop-opacity: 0; }
.mn-vs__base { stroke: var(--vs-line); stroke-width: 1; }
.mn-vs__line { fill: none; stroke: var(--vs-chart); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mn-vs__today { fill: none; stroke: var(--vs-chart); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 4; opacity: .8; }
.mn-vs__line.is-drawing { transition: stroke-dashoffset .9s cubic-bezier(.33, 1, .68, 1); }
.mn-vs__area.is-drawing { transition: opacity .9s ease .2s; }
.mn-vs__end { fill: var(--vs-surface); stroke: var(--vs-chart); stroke-width: 2; }
.mn-vs__hover { fill: var(--vs-chart); stroke: var(--vs-surface); stroke-width: 2; }
.mn-vs__cross { stroke: var(--vs-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.mn-vs__cross, .mn-vs__hover { opacity: 0; transition: opacity .12s; }
.mn-vs svg.is-hover .mn-vs__cross, .mn-vs svg.is-hover .mn-vs__hover { opacity: 1; }
.mn-vs svg.is-hover .mn-vs__end { opacity: .35; }
.mn-vs__hit { fill: transparent; cursor: crosshair; }
.mn-vs__tip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	padding: 5px 9px;
	border-radius: 8px;
	background: var(--vs-tip-bg);
	color: var(--vs-tip-fg);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: reduce) {
	.mn-vs__dot::after { animation: none; }
}
@media (max-width: 640px) {
	.mn-vs__in { flex-direction: column; align-items: stretch; padding: 16px; }
	.mn-vs__online { align-self: flex-start; }
	.mn-vs__total { margin: 0; flex-direction: column; align-items: stretch; gap: 12px; }
	.mn-vs__chart { width: 100%; }
}