/* ============================================================
   SA-MP.CO — màu cam SA-MP gốc, UI riêng với hiệu ứng 3D
   và chuyển động, light/dark mode
   ============================================================ */

/* VARS */
:root,
html[data-theme="dark"] {
	color-scheme: dark;

	--accent: #ff8000;
	--accent_hover: #ff9933;
	--accent_glow: rgba(255, 128, 0, 0.45);

	--border_radius: 0.75rem;

	--bg_body: #000;
	--bg_page: hsl(240, 5%, 5%);
	--bg_panel: hsl(240, 5%, 10%);
	--bg_panel_glass: hsla(240, 5%, 8%, 0.85);
	--bg_panel_alt: hsl(240, 5%, 13%);
	--bg_item: hsl(240, 5%, 16%);
	--bg_hover: hsl(240, 5%, 21%);
	--border: hsl(240, 5%, 20%);

	--text: hsl(0, 0%, 90%);
	--text_strong: hsl(0, 0%, 98%);
	--text_muted: hsl(0, 0%, 64%);

	--red: #ff3333;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	--shadow_hover: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px var(--accent_glow);
}

html[data-theme="light"] {
	color-scheme: light;

	--accent: #e06d00;
	--accent_hover: #ff8000;
	--accent_glow: rgba(255, 128, 0, 0.3);

	--bg_body: #fdfdfc;
	--bg_page: hsl(36, 20%, 95%);
	--bg_panel: #ffffff;
	--bg_panel_glass: hsla(0, 0%, 100%, 0.85);
	--bg_panel_alt: hsl(36, 25%, 96%);
	--bg_item: hsl(36, 18%, 91%);
	--bg_hover: hsl(36, 18%, 86%);
	--border: hsl(36, 12%, 84%);

	--text: hsl(240, 8%, 16%);
	--text_strong: hsl(240, 10%, 6%);
	--text_muted: hsl(240, 4%, 40%);

	--red: #d92020;
	--shadow: 0 10px 30px rgba(40, 30, 10, 0.08);
	--shadow_hover: 0 16px 40px rgba(40, 30, 10, 0.14), 0 0 24px var(--accent_glow);
}
/* VARS */

/* HTML */
* { box-sizing: border-box; }

body {
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	margin: 0;
	background-color: var(--bg_page);
	color: var(--text);
	overflow-x: hidden;
}

h2, h3 {
	margin: 0;
	color: var(--text_strong);
}

h2 {
	font-size: 1.3rem;
	width: 100%;
	border-left: 4px solid var(--accent);
	padding-left: 0.75rem;
	line-height: 1.4;
}

h3 {
	font-size: 1.05rem;
	width: 100%;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent_hover);
	text-decoration: underline;
}

svg {
	fill: currentColor;
	vertical-align: text-top;
	height: 1.2em;
}

p {
	font-size: 1rem;
	margin: 0;
	line-height: 1.65;
	width: 100%;
}

ul { margin: 0; }

li {
	font-size: 1rem;
	line-height: 1.65;
}
/* HTML */

/* TOPBAR */
#TopBar {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--bg_panel_glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

.TopBarInner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 1rem;
}

.Brand {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--text_strong);
	white-space: nowrap;
	text-shadow: 0 0 18px var(--accent_glow);
}

.Brand span { color: var(--accent); }

.Brand:hover {
	text-decoration: none;
	color: var(--text_strong);
}

#TopNav {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
	margin-left: auto;
}

#TopNav a {
	color: var(--text);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.95rem;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#TopNav a:hover,
#TopNav a[aria-current="page"] {
	background: var(--bg_item);
	color: var(--accent);
	text-decoration: none;
	transform: translateY(-1px);
}

/* THEME SWITCH (công tắc trượt) */
#ThemeToggle {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

#ThemeToggle .tt-track {
	position: relative;
	width: 56px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--border);
	display: block;
	transition: background 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] #ThemeToggle .tt-track {
	background: linear-gradient(180deg, #1c2436, #11161f);
}

html[data-theme="light"] #ThemeToggle .tt-track {
	background: linear-gradient(180deg, #ffe39e, #ffd06b);
}

#ThemeToggle:hover .tt-track {
	border-color: var(--accent);
	box-shadow: 0 0 12px var(--accent_glow);
}

#ThemeToggle:focus-visible { outline: none; }
#ThemeToggle:focus-visible .tt-track {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent_glow);
}

#ThemeToggle .tt-sun,
#ThemeToggle .tt-moon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

#ThemeToggle .tt-sun { left: 7px; color: #ff8c00; }
#ThemeToggle .tt-moon { right: 7px; color: #dfe6f5; }

html[data-theme="dark"] #ThemeToggle .tt-sun { opacity: 0.35; }
html[data-theme="dark"] #ThemeToggle .tt-moon { opacity: 1; }
html[data-theme="light"] #ThemeToggle .tt-sun { opacity: 1; }
html[data-theme="light"] #ThemeToggle .tt-moon { opacity: 0.3; }

#ThemeToggle .tt-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
	z-index: 1;
}

html[data-theme="light"] #ThemeToggle .tt-thumb {
	transform: translateX(28px);
	background: #fff8ec;
}
/* THEME SWITCH */
/* TOPBAR */

/* HEADER ARTWORK 3D */
#HeaderContainer {
	background: #000;
	width: 100%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 9;
	max-height: 10rem;
	min-height: 4.5rem;
	perspective: 60vw;
}

#Header {
	position: relative;
	z-index: 100;
	width: 100%;
	height: 100%;
}

#Header h1 {
	text-align: center;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	border: 0;
	padding: 0;
}

#Header h1 a {
	height: calc(100% - 1rem);
	width: 100%;
	display: inline-block;
	padding: 0.5rem 0;
}

#Header h1 a span {
	display: inline-block;
	background: url(../images/samp_logo.png) center center no-repeat;
	background-size: contain;
	height: 100%;
	width: 100%;
	text-indent: -9999px;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
	animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-4px) scale(1.015); }
}

#ArtworkContainer {
	width: 200%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	display: flex;
	will-change: transform;
	transition: transform 0.25s ease-out;
}

.Artwork {
	width: var(--width);
	height: calc(100% + 1rem);
	margin-top: -0.5rem;
	z-index: var(--index);
	position: relative;
	flex: 0 0 auto;
	border-right: 0.4vw solid #000;
	transform: perspective(12vw) rotateX(var(--skew, 0deg));
}

/* độ nghiêng 3D xen kẽ như dải phim */
.Artwork:nth-child(10n + 1) { --skew: -10deg; }
.Artwork:nth-child(10n + 2) { --skew: 4deg; }
.Artwork:nth-child(10n + 3) { --skew: -7deg; }
.Artwork:nth-child(10n + 4) { --skew: 10deg; }
.Artwork:nth-child(10n + 5) { --skew: -4deg; }
.Artwork:nth-child(10n + 6) { --skew: 7deg; }
.Artwork:nth-child(10n + 7) { --skew: -10deg; }
.Artwork:nth-child(10n + 8) { --skew: -7deg; }
.Artwork:nth-child(10n + 9) { --skew: 10deg; }
.Artwork:nth-child(10n) { --skew: 4deg; }

.Artwork span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--artwork);
	background-size: cover;
	animation: artDrift 9s ease-in-out infinite alternate;
}

.Artwork:nth-child(2n) span { animation-delay: -3s; }
.Artwork:nth-child(3n) span { animation-delay: -6s; }

@keyframes artDrift {
	from { transform: scale(1.04) translateY(-2px); }
	to { transform: scale(1.1) translateY(3px); }
}

.ArtworkCenter { background-position-y: center !important; }

#HeaderContainer::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	z-index: 50;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	pointer-events: none;
}
/* HEADER ARTWORK 3D */

/* RELEASE BAR */
#ReleaseBar {
	background:
		radial-gradient(ellipse at top left, var(--accent_glow), transparent 55%),
		linear-gradient(90deg, var(--bg_panel), var(--bg_panel_alt));
	border-bottom: 1px solid var(--border);
	padding: 0.85rem 1rem;
}

.ReleaseInner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ReleaseInner strong { color: var(--accent); }

.ReleaseInner .Button {
	margin-left: auto;
	animation: pulseGlow 2.4s ease-in-out infinite;
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 0 0 var(--accent_glow); }
	50% { box-shadow: 0 0 18px 4px var(--accent_glow); }
}
/* RELEASE BAR */

/* MAIN */
#Page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 1.5rem 1rem 2rem;
}

#Main {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.NewsGrid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.NewsGrid .Container { width: auto; }
/* MAIN */

/* BUTTON */
.Button {
	background: linear-gradient(180deg, var(--accent_hover), var(--accent));
	color: #fff;
	display: inline-block;
	font-weight: 600;
	padding: 0.5rem 1.15rem;
	border-radius: 999px;
	font-size: 1rem;
	position: relative;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.Button svg { margin-right: 0.35rem; }

.Button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

.Button:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25), 0 8px 20px var(--accent_glow);
}

.Button:hover::after { animation: shine 0.7s ease; }

.Button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

@keyframes shine {
	to { left: 130%; }
}
/* BUTTON */

/* CONTENT CARDS 3D */
.Container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--bg_panel);
	border: 1px solid var(--border);
	border-radius: var(--border_radius);
	padding: 1.25rem;
	color: var(--text);
	width: 100%;
	box-shadow: var(--shadow);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.Container:hover {
	box-shadow: var(--shadow_hover);
	border-color: var(--accent);
}

.Container h2 svg {
	height: 1.1em;
	margin-right: 0.4em;
}

.Red { color: var(--red); }

.Muted { color: var(--text_muted); font-size: 0.9rem; }

.DownloadContainer {
	padding-left: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.DownloadContainer li {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	width: 100%;
	align-items: center;
	color: var(--text_muted);
	font-size: 0.95rem;
}

/* các bước cài đặt */
.Steps {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	counter-reset: step;
}

.Step {
	background: var(--bg_panel_alt);
	border: 1px solid var(--border);
	border-radius: var(--border_radius);
	padding: 1rem;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.Step:hover {
	border-color: var(--accent);
	box-shadow: 0 10px 24px var(--accent_glow);
}

.Step::before {
	counter-increment: step;
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--accent_hover), var(--accent));
	color: #fff;
	font-weight: 700;
	margin-bottom: 0.5rem;
	box-shadow: 0 3px 10px var(--accent_glow);
}

.Step h3 { margin-bottom: 0.25rem; }

.Step p {
	font-size: 0.92rem;
	color: var(--text_muted);
	line-height: 1.5;
}
/* CONTENT CARDS 3D */

/* SCROLL REVEAL (chỉ chạy khi JS sẵn sàng) */
html.reveal-ready .Reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

html.reveal-ready .Reveal.RevealIn {
	opacity: 1;
	transform: translateY(0);
}
/* SCROLL REVEAL */

/* SA-MP.VN HERO */
.VnHero {
	width: 100%;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

.VnInfo { display: flex; flex-direction: column; gap: 0.9rem; }

.VnStatus {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	color: var(--text_muted);
}

.VnBigStats {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.VnBig .num {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
}

.VnBig .num .sub { font-size: 1.1rem; color: var(--text_muted); font-weight: 600; margin-left: 0.2rem; }

.VnBig .cap {
	display: block;
	font-size: 0.82rem;
	color: var(--text_muted);
	margin-top: 0.3rem;
}

.VnAddr {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.92rem;
	color: var(--text_muted);
}

.VnAddr code {
	background: var(--bg_item);
	border: 1px solid var(--border);
	border-radius: 0.35rem;
	padding: 0.15rem 0.5rem;
	color: var(--accent);
}

.VnChartWrap {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.VnChartBox {
	background: var(--bg_panel_alt);
	border: 1px solid var(--border);
	border-radius: var(--border_radius);
	padding: 0.85rem 1rem;
}

.VnChartBox .head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.VnChartBox .head .t { font-size: 0.9rem; font-weight: 700; color: var(--text_strong); }
.VnChartBox .head .v { font-size: 0.85rem; color: var(--text_muted); }
.VnChartBox .head .v b { color: var(--accent); }

#PingChart { width: 100%; height: 120px; display: block; }
#PlayerChart { width: 100%; height: 48px; display: block; }

.LiveDot {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: #2ecc71;
	box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
	animation: livedot 1.8s ease-out infinite;
}

.LiveDot.off { background: var(--red); animation: none; }

@keyframes livedot {
	0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); }
	70% { box-shadow: 0 0 0 0.5rem rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* NÚT QUAY LẠI (referrer sa-mp.network) */
#RefBack {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	animation: rbIn 0.4s ease;
}

#RefBack .rb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(180deg, var(--accent_hover), var(--accent));
	color: #fff;
	font-weight: 700;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	box-shadow: 0 6px 20px var(--accent_glow), 0 3px 0 rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#RefBack .rb-btn:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 26px var(--accent_glow), 0 4px 0 rgba(0, 0, 0, 0.25);
}

#RefBack .rb-btn svg { width: 18px; height: 18px; }
#RefBack .rb-btn b { font-weight: 800; }

#RefBack .rb-close {
	background: var(--bg_item);
	color: var(--text);
	border: 1px solid var(--border);
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1.15rem;
	line-height: 1;
	transition: background 0.15s ease;
}

#RefBack .rb-close:hover { background: var(--bg_hover); }

@keyframes rbIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media screen and (max-width: 560px) {
	#RefBack { left: 0.6rem; bottom: 0.6rem; }
	#RefBack .rb-btn { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
}
/* NÚT QUAY LẠI */

.VnDownloads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.DesktopBtn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 60px;
	box-sizing: border-box;
	padding: 0 1.1rem;
	background: linear-gradient(180deg, var(--accent_hover), var(--accent));
	color: #fff;
	border-radius: 0.6rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.DesktopBtn:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25), 0 8px 20px var(--accent_glow);
}

.DesktopBtn svg { height: 26px; width: 26px; flex: 0 0 auto; }
.DesktopBtn .DtSmall { display: block; font-size: 0.7rem; opacity: 0.9; line-height: 1.1; }
.DesktopBtn .DtBig { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }

.PlayBadge {
	display: inline-block;
	width: fit-content;
	border-radius: 0.6rem;
	line-height: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.PlayBadge img {
	height: 60px;
	width: auto;
	display: block;
	border-radius: 0.6rem;
}

.PlayBadge:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px var(--accent_glow);
}

@media screen and (max-width: 760px) {
	.VnHero { grid-template-columns: 1fr; }
}

/* SERVER STATS (legacy, dùng cho chỗ khác nếu cần) */
.StatGrid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}

.Stat {
	background: var(--bg_panel_alt);
	border: 1px solid var(--border);
	border-radius: var(--border_radius);
	padding: 0.9rem 1rem;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.Stat:hover {
	border-color: var(--accent);
	box-shadow: 0 8px 20px var(--accent_glow);
}

.Stat .StatValue {
	display: block;
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.2;
}

.Stat .StatLabel {
	display: block;
	font-size: 0.82rem;
	color: var(--text_muted);
	margin-top: 0.15rem;
}

.LiveDot {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: #2ecc71;
	margin-right: 0.35rem;
	box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
	animation: livedot 1.8s ease-out infinite;
	vertical-align: middle;
}

.LiveDot.off { background: var(--red); animation: none; }

@keyframes livedot {
	0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); }
	70% { box-shadow: 0 0 0 0.5rem rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.ChartCard {
	width: 100%;
	background: var(--bg_panel_alt);
	border: 1px solid var(--border);
	border-radius: var(--border_radius);
	padding: 1rem;
}

.ChartHead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ChartHead h3 { width: auto; }

.ChartHead .ChartNow {
	font-size: 0.85rem;
	color: var(--text_muted);
}

.ChartHead .ChartNow b { color: var(--accent); }

.Chart {
	width: 100%;
	height: 140px;
	display: block;
}

.PlayLink {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: #0a0a0c;
	color: #fff;
	border: 1px solid #333;
	border-radius: 0.6rem;
	padding: 0.55rem 1rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

html[data-theme="light"] .PlayLink { background: #111; border-color: #111; }

.PlayLink:hover {
	text-decoration: none;
	color: #fff;
	transform: translateY(-2px);
	border-color: var(--accent);
	box-shadow: 0 8px 20px var(--accent_glow);
}

.PlayLink img { height: 2rem; width: 2rem; border-radius: 0.4rem; }

.PlayLink .PlaySmall { display: block; font-size: 0.7rem; color: #b9b9c2; line-height: 1.1; }

.PlayLink .PlayBig { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }

.ServerMeta {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	color: var(--text_muted);
	font-size: 0.92rem;
}

.ServerMeta code {
	background: var(--bg_item);
	border: 1px solid var(--border);
	border-radius: 0.35rem;
	padding: 0.1rem 0.45rem;
	color: var(--accent);
	font-size: 0.9em;
}
/* SERVER STATS */

/* TABLE */
.TableWrap {
	width: 100%;
	overflow-x: auto;
	border-radius: calc(var(--border_radius) - 0.25rem);
	border: 1px solid var(--border);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

thead th {
	background: var(--bg_panel_alt);
	color: var(--accent);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--accent);
}

th, td {
	text-align: left;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--border);
}

tbody tr { transition: background 0.15s ease; }

tbody tr:hover td { background: var(--bg_panel_alt); }

tbody tr:last-child td { border-bottom: 0; }
/* TABLE */

/* FOOTER */
#FooterContainer {
	background: var(--bg_body);
	border-top: 1px solid var(--border);
	width: 100%;
}

#FooterWrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

#Footer p {
	color: var(--text_muted);
	line-height: 1.6;
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
}

#FooterLinks {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

#FooterLinks a { font-size: 0.85rem; }
/* FOOTER */

/* GIẢM CHUYỂN ĐỘNG */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}

	html.reveal-ready .Reveal {
		opacity: 1;
		transform: none;
	}
}
/* GIẢM CHUYỂN ĐỘNG */

/* RESPONSIVE */
@media screen and (max-width: 900px) {
	.NewsGrid { grid-template-columns: 1fr; }
	.Steps { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
	.Steps { grid-template-columns: 1fr; }

	.TopBarInner { flex-wrap: wrap; }

	#TopNav {
		margin-left: 0;
		width: 100%;
		order: 3;
	}

	.ReleaseInner .Button { margin-left: 0; }
}
/* RESPONSIVE */

/* LANGUAGE SWITCH (VI / EN) */
.LangSwitch {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--bg_item);
}

.LangSwitch button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0.32rem 0.62rem;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text);
	cursor: pointer;
	line-height: 1.4;
	transition: background 0.2s ease, color 0.2s ease;
}

.LangSwitch button:hover { color: var(--accent); }

.LangSwitch button[aria-pressed="true"] {
	background: var(--accent);
	color: #fff;
}

.LangSwitch button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--accent);
}

/* chống nháy chữ tiếng Việt cho người dùng English: ẩn nội dung tới khi swap xong */
html.i18n-pending body { visibility: hidden; }