/* ==========================================================================
   WC GOLDEN PORTAL — design system
   Bảng màu: đen than + vàng kim + ánh sáng chuyển động
   ========================================================================== */

:root {
	--ink: #06070a;
	--ink-2: #0a0c11;
	--panel: #0e1118;
	--panel-2: #131824;
	--panel-3: #171d2b;
	--gold-1: #f9e9a0;
	--gold-2: #e8c65a;
	--gold-3: #d4af37;
	--gold-4: #a8801f;
	--gold-soft: rgba(212, 175, 55, .14);
	--line: rgba(212, 175, 55, .16);
	--line-soft: rgba(255, 255, 255, .07);
	--text: #eceff6;
	--muted: #97a0b2;
	--muted-2: #6f7787;
	--red: #e0342f;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow: 0 24px 60px rgba(0, 0, 0, .55);
	--ease: cubic-bezier(.22, .61, .36, 1);
	--font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-head: 'Barlow Condensed', 'Be Vietnam Pro', Impact, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; line-height: 1.08; }
p { margin: 0 0 1em; }

.container {
	width: min(1280px, calc(100% - 48px));
	margin-inline: auto;
}

.site-wrap { position: relative; overflow: clip; }

/* ---------- hiệu ứng vàng kim ---------- */
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes sweep {
	0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
	35% { opacity: .55; }
	100% { transform: translateX(220%) skewX(-16deg); opacity: 0; }
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.82); }
}
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes floatGlow {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
	50% { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: .8; }
}
@keyframes revealUp {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}

.gold-text {
	background: linear-gradient(100deg, var(--gold-4), var(--gold-2) 35%, #fff6cf 50%, var(--gold-2) 65%, var(--gold-4));
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer 7s linear infinite;
}

/* ---------- topbar ---------- */
.topbar {
	background: #030407;
	border-bottom: 1px solid var(--line-soft);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--muted-2);
}
.topbar-in { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 12px; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; }
.live-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 0 3px rgba(224, 52, 47, .18);
	animation: pulse 1.8s infinite;
}
.topbar-live { color: var(--red); font-weight: 700; letter-spacing: .12em; }
.topbar-sep { opacity: .3; }
.topbar-item { color: var(--muted); }
.topbar-link { color: var(--gold-3); font-weight: 600; }

/* ---------- header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(6, 7, 10, .86);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--line-soft);
	transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { background: rgba(4, 5, 8, .96); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.header-in { display: flex; align-items: center; gap: 28px; height: 70px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
	position: relative;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: linear-gradient(145deg, var(--gold-1), var(--gold-3) 45%, var(--gold-4));
	color: #11130a;
	box-shadow: 0 6px 20px rgba(212, 175, 55, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
	overflow: hidden;
}
.brand-mark::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%);
	transform: translateX(-120%) skewX(-16deg);
	animation: sweep 5.5s ease-in-out infinite;
}
.brand-wc { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: .02em; line-height: 1; margin-top: -6px; }
.brand-year { position: absolute; bottom: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: var(--font-head); font-size: 21px; letter-spacing: .08em; }
.brand-text em { font-style: normal; font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--gold-3); }

.main-nav { flex: 1; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list li a {
	position: relative;
	display: block;
	padding: 9px 12px;
	font-size: 12.6px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #c9cfdb;
	transition: color .2s var(--ease);
	white-space: nowrap;
}
.nav-list li a::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
	height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--gold-4), var(--gold-1));
	transform: scaleX(0); transform-origin: left;
	transition: transform .28s var(--ease);
}
.nav-list li a:hover { color: #fff; }
.nav-list li a:hover::after,
.nav-list .current-menu-item a::after { transform: scaleX(1); }
.nav-list .current-menu-item a { color: var(--gold-2); }

.header-actions { display: flex; gap: 6px; flex: none; }
.icon-btn {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 10px;
	background: rgba(255, 255, 255, .02);
	color: var(--gold-2);
	cursor: pointer;
	transition: all .2s var(--ease);
}
.icon-btn:hover { background: var(--gold-soft); border-color: var(--gold-3); color: var(--gold-1); }
.menu-toggle { display: none; }

.header-search {
	max-height: 0; overflow: hidden;
	background: #080a0f;
	border-bottom: 1px solid transparent;
	transition: max-height .32s var(--ease), border-color .32s;
}
.header-search.is-open { max-height: 96px; border-color: var(--line); }
.header-search .container { padding: 14px 0; }
.search-form { display: flex; gap: 10px; }
.search-input {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color .2s;
}
.search-input:focus { border-color: var(--gold-3); }
.search-input::placeholder { color: var(--muted-2); }

/* ---------- buttons ---------- */
.btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 22px;
	border: 0; border-radius: var(--radius-sm);
	font-family: inherit; font-size: 13px; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase;
	cursor: pointer; overflow: hidden;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-gold {
	background: linear-gradient(135deg, var(--gold-1), var(--gold-3) 55%, var(--gold-4));
	color: #12140a;
	box-shadow: 0 10px 26px rgba(212, 175, 55, .26);
}
.btn-gold::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .7) 50%, transparent 75%);
	transform: translateX(-130%) skewX(-18deg);
	transition: transform .6s var(--ease);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212, 175, 55, .34); }
.btn-gold:hover::after { transform: translateX(130%) skewX(-18deg); }
.btn-ghost {
	background: rgba(255, 255, 255, .04);
	color: #e7ebf3;
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--gold-3); color: var(--gold-1); transform: translateY(-2px); }

/* ---------- ticker ---------- */
.ticker { background: linear-gradient(90deg, #0b0d12, #12151d 45%, #0b0d12); border-bottom: 1px solid var(--line); }
.ticker-in { display: flex; align-items: center; gap: 14px; height: 42px; }
.ticker-label {
	flex: none;
	padding: 4px 10px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--gold-2), var(--gold-4));
	color: #14150b;
	font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
}
.ticker-track { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-move { display: flex; align-items: center; gap: 14px; width: max-content; animation: marquee 46s linear infinite; }
.ticker:hover .ticker-move { animation-play-state: paused; }
.ticker-item { font-size: 12.6px; color: #cfd5e0; white-space: nowrap; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; }
.ticker-item:hover { color: var(--gold-1); }
.ticker-sep { color: var(--gold-4); font-size: 8px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 34px 0 10px; overflow: hidden; }
.hero-glow {
	position: absolute; top: -30%; right: -10%;
	width: 780px; height: 780px;
	background: radial-gradient(circle, rgba(212, 175, 55, .16), rgba(212, 175, 55, .05) 42%, transparent 68%);
	filter: blur(12px);
	animation: floatGlow 12s ease-in-out infinite;
	pointer-events: none;
}
.hero-grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 72%);
	pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 22px; }

.hero-card {
	position: relative;
	min-height: 470px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, #12151d, #080a0e);
	box-shadow: var(--shadow);
	display: flex;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 8s var(--ease); }
.hero-card:hover .hero-media img { transform: scale(1.08); }
.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(75deg, rgba(4, 5, 8, .94) 8%, rgba(4, 5, 8, .78) 42%, rgba(4, 5, 8, .18) 78%),
		linear-gradient(0deg, rgba(4, 5, 8, .96), transparent 55%);
}
.hero-card::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0;
	width: 46%;
	background: linear-gradient(100deg, transparent, rgba(255, 240, 190, .12) 50%, transparent);
	transform: translateX(-140%) skewX(-14deg);
	animation: sweep 7s ease-in-out infinite;
	pointer-events: none;
}
.hero-content {
	position: relative; z-index: 2;
	align-self: flex-end;
	padding: 34px 36px 30px;
	max-width: 660px;
}
.hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hero-ago { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.hero-title { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.005em; }
.hero-title a { transition: color .2s; }
.hero-title a:hover { color: var(--gold-2); }
.hero-desc { margin: 14px 0 22px; color: #c2c9d6; font-size: 14.2px; max-width: 56ch; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.tag {
	display: inline-flex; align-items: center;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 10px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
}
.tag-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold-4)); color: #16170c; }
.tag-line { color: var(--gold-3); border: 1px solid var(--line); background: rgba(212, 175, 55, .06); }

.hero-side { display: flex; flex-direction: column; gap: 12px; }
.side-card {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line-soft);
	background: var(--panel);
	flex: 1;
	min-height: 150px;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.side-card:hover { border-color: var(--gold-3); transform: translateY(-3px); }
.side-media { position: absolute; inset: 0; }
.side-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.side-card:hover .side-media img { transform: scale(1.06); }
.side-shade {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(4, 5, 8, .95) 12%, rgba(4, 5, 8, .45) 55%, rgba(4, 5, 8, .12));
}
.side-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 16px; height: 100%; justify-content: flex-end; }
.side-title { font-family: var(--font-head); font-size: 19px; line-height: 1.16; }
.side-ago { font-size: 11px; color: var(--muted); }

.hero-stats {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.stat { background: #0b0e14; padding: 12px 6px 11px; text-align: center; }
.stat-num { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--gold-2); line-height: 1; }
.stat-label { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .04em; color: var(--muted-2); line-height: 1.2; }

/* ---------- section ---------- */
.section { position: relative; padding: 54px 0; }
.section--dark { background: linear-gradient(180deg, transparent, #080a0f 12%, #080a0f 88%, transparent); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-head--tight { margin-bottom: 18px; }
.kicker { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .24em; color: var(--gold-3); margin-bottom: 7px; }
.section-title {
	position: relative;
	font-size: clamp(26px, 2.4vw, 36px);
	text-transform: uppercase;
	letter-spacing: .02em;
	padding-bottom: 12px;
}
.section-title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 54px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--gold-1), var(--gold-4));
	box-shadow: 0 0 16px rgba(212, 175, 55, .5);
}
.section-more {
	font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); white-space: nowrap; padding-bottom: 6px;
	transition: color .2s;
}
.section-more span { color: var(--gold-3); }
.section-more:hover { color: var(--gold-1); }

/* ---------- match center ---------- */
.match-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.match-card {
	background: linear-gradient(165deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	padding: 14px;
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
}
.match-card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.match-card.is-live { border-color: rgba(212, 175, 55, .38); background: linear-gradient(165deg, #1b1a12, #101116); }
.match-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.match-league { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 8px; border-radius: 4px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
	background: rgba(255, 255, 255, .06); color: var(--muted);
}
.pill-live { background: rgba(224, 52, 47, .12); color: #ff6b66; }
.pill-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: pulse 1.5s infinite; }
.match-body { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.team { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.team-name { font-size: 11.5px; font-weight: 600; color: #dbe0ea; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.team--away { order: 3; }
.crest {
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--font-head); font-size: 14px; font-weight: 800; letter-spacing: .02em;
	color: #10120a;
	background: radial-gradient(circle at 32% 28%, hsl(var(--h) 78% 76%), hsl(var(--h) 68% 46%) 68%, hsl(var(--h) 62% 32%));
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 4px 12px rgba(0, 0, 0, .4);
}
.crest--sm { width: 22px; height: 22px; font-size: 9px; }
.score { display: flex; align-items: baseline; gap: 4px; flex: none; padding: 0 4px; }
.score-num { font-family: var(--font-head); font-size: 27px; font-weight: 800; color: #fff; line-height: 1; }
.score-sep { color: var(--muted-2); font-size: 16px; }
.match-foot {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line-soft);
	font-size: 10.5px; color: var(--muted-2);
}
.match-foot a { color: var(--gold-3); font-weight: 600; }

/* ---------- news grid ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.news-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; }
.news-card:hover { border-color: rgba(212, 175, 55, .42); transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); }
.news-link { display: flex; flex-direction: column; height: 100%; }
.news-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #1a1e28, #0c0e13); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.news-card:hover .news-media img { transform: scale(1.07); }
.news-shine {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 190, .18) 50%, transparent 70%);
	transform: translateX(-130%) skewX(-14deg);
}
.news-card:hover .news-shine { transform: translateX(130%) skewX(-14deg); transition: transform .9s var(--ease); }
.news-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 17px 18px; flex: 1; }
.news-title { font-size: 19px; line-height: 1.2; }
.news-desc { font-size: 12.8px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta { margin-top: auto; font-size: 10.5px; color: var(--muted-2); letter-spacing: .04em; }
.news-card--lead { grid-column: span 2; grid-row: span 2; }
.news-card--lead .news-title { font-size: clamp(24px, 2.2vw, 32px); }
.news-card--lead .news-media { aspect-ratio: 16 / 8.4; }
.news-card--lead .news-body { padding: 20px 22px 22px; }
.news-card--lead .news-desc { -webkit-line-clamp: 3; font-size: 13.4px; }

/* ---------- split layout ---------- */
.split-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }
.wc-list { display: flex; flex-direction: column; gap: 10px; }
.wc-item {
	display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px;
	padding: 10px;
	border-radius: var(--radius);
	border: 1px solid var(--line-soft);
	background: var(--panel);
	transition: border-color .25s, background .25s, transform .25s;
}
.wc-item:hover { border-color: var(--gold-4); background: var(--panel-2); transform: translateX(3px); }
.wc-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0b0d12; }
.wc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.wc-item:hover .wc-thumb img { transform: scale(1.06); }
.wc-text { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding-right: 8px; }
.wc-text strong { font-family: var(--font-head); font-size: 19px; line-height: 1.18; }
.wc-desc { font-size: 12.4px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-meta { font-size: 10.5px; color: var(--muted-2); }

.panel {
	background: linear-gradient(170deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 16px;
}
.panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(90deg, rgba(212, 175, 55, .08), transparent);
}
.panel-head h3 { font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.panel-sub { font-size: 10px; letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; }

/* ---------- table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 12.2px; }
.table thead th {
	padding: 9px 8px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted-2); text-align: center;
	background: rgba(255, 255, 255, .02);
	border-bottom: 1px solid var(--line-soft);
}
.table thead th:nth-child(2) { text-align: left; }
.table tbody td { padding: 9px 8px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .04); color: #cfd5e0; }
.table tbody tr { transition: background .18s; }
.table tbody tr:hover { background: rgba(212, 175, 55, .07); }
.table tbody tr:last-child td { border-bottom: 0; }
.td-team { text-align: left !important; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.td-pts { font-weight: 800; color: var(--gold-2); }
.pos { display: inline-block; min-width: 20px; font-weight: 700; color: var(--muted); }
.pos--gold { color: var(--gold-2); }

/* ---------- scorers ---------- */
.scorers { padding: 6px 0; }
.scorers li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; transition: background .18s; }
.scorers li:hover { background: rgba(212, 175, 55, .06); }
.rank { width: 20px; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--gold-4); text-align: center; flex: none; }
.scorers li:first-child .rank { color: var(--gold-1); }
.scorer-info { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.scorer-info strong { font-size: 12.6px; font-weight: 600; }
.scorer-info em { font-style: normal; font-size: 10px; color: var(--muted-2); }
.goals { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--gold-2); }

/* ---------- poll ---------- */
.panel--poll { padding-bottom: 14px; }
.poll-q { padding: 12px 16px 10px; font-size: 12.6px; color: #cfd5e0; margin: 0; }
.poll-row { display: grid; grid-template-columns: 88px 1fr 38px; align-items: center; gap: 8px; padding: 5px 16px; }
.poll-name { font-size: 11.5px; color: var(--muted); }
.poll-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.poll-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-4), var(--gold-1)); }
.poll-pct { font-size: 10.5px; color: var(--gold-3); text-align: right; font-weight: 700; }

/* ---------- transfer ---------- */
.transfer-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.transfer-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, transform .25s; }
.transfer-card:hover { border-color: var(--gold-4); transform: translateY(-3px); }
.transfer-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0d12; }
.transfer-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.transfer-card:hover .transfer-thumb img { transform: scale(1.06); }
.transfer-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.transfer-body strong { font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.transfer-meta { font-size: 10px; color: var(--muted-2); }

/* ---------- video ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.video-card { display: flex; flex-direction: column; gap: 10px; }
.video-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b0d12; border: 1px solid var(--line-soft); }
.video-media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .7s var(--ease), opacity .3s; }
.video-card:hover .video-media img { transform: scale(1.05); opacity: 1; }
.play {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(6, 7, 10, .55);
	border: 1.5px solid var(--gold-2);
	color: var(--gold-1);
	backdrop-filter: blur(4px);
	transition: transform .25s var(--ease), background .25s;
}
.video-card:hover .play { transform: scale(1.1); background: rgba(212, 175, 55, .9); color: #14150b; }
.video-title { font-family: var(--font-head); font-size: 16.5px; line-height: 1.25; padding: 0 2px; }

/* ---------- mini grid ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-card { display: flex; gap: 12px; padding: 9px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background .2s, border-color .2s; }
.mini-card:hover { background: var(--panel); border-color: var(--line-soft); }
.mini-thumb { width: 92px; flex: none; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: #0b0d12; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mini-body strong { font-size: 12.8px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-meta { font-size: 10px; color: var(--muted-2); }

/* ---------- cta ---------- */
.cta-band {
	position: relative;
	margin: 20px 0 0;
	padding: 46px 0;
	background: linear-gradient(100deg, #0f1013, #1a1710 46%, #0f1013);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.cta-glow {
	position: absolute; inset: -40% -10%;
	background: radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, .2), transparent 55%),
		radial-gradient(ellipse at 78% 30%, rgba(249, 233, 160, .12), transparent 50%);
	animation: floatGlow 10s ease-in-out infinite;
}
.cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-text h2 { font-size: clamp(26px, 2.6vw, 38px); text-transform: uppercase; margin-bottom: 6px; }
.cta-text p { margin: 0; color: var(--muted); font-size: 13.4px; }
.cta-form, .footer-form { display: flex; gap: 9px; }
.cta-form input, .footer-form input {
	height: 46px; min-width: 260px;
	padding: 0 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, .35);
	color: var(--text);
	font-family: inherit; font-size: 13.5px;
	outline: none;
}
.cta-form input:focus, .footer-form input:focus { border-color: var(--gold-3); }

/* ---------- footer ---------- */
.site-footer { position: relative; background: #040508; padding-top: 46px; overflow: hidden; }
.footer-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); box-shadow: 0 0 26px rgba(212, 175, 55, .5); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 30px; padding-bottom: 34px; }
.brand--footer { margin-bottom: 14px; }
.footer-desc { font-size: 12.6px; color: var(--muted-2); line-height: 1.7; max-width: 34ch; }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a {
	width: 32px; height: 32px; border-radius: 8px;
	display: grid; place-items: center;
	border: 1px solid var(--line-soft);
	font-size: 10.5px; font-weight: 700; color: var(--muted);
	transition: all .2s;
}
.footer-social a:hover { border-color: var(--gold-3); color: var(--gold-2); background: var(--gold-soft); }
.footer-col h4 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 14px; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 12.6px; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--gold-1); }
.footer-note { font-size: 12px; color: var(--muted-2); }
.footer-form input { min-width: 0; flex: 1; height: 42px; }
.footer-form .btn { height: 42px; padding: 0 16px; font-size: 11.5px; }
.footer-bottom {
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 16px 0 22px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	font-size: 11px; color: var(--muted-2);
}
.footer-links a:hover { color: var(--gold-2); }

/* ---------- article ---------- */
.article { padding-bottom: 50px; }
.article-hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; background: linear-gradient(160deg, #14181f, #07080b); overflow: hidden; }
.article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 9, .97) 6%, rgba(5, 6, 9, .75) 45%, rgba(5, 6, 9, .28)); }
.article-head { position: relative; z-index: 2; padding: 40px 0 30px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-2); margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs-current { color: var(--muted); }
.article-title { font-size: clamp(28px, 3vw, 44px); max-width: 22ch; }
.article-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; padding-top: 34px; align-items: start; }
.article-body { font-size: 15.5px; line-height: 1.85; color: #d6dbe5; min-width: 0; }
.article-body h2, .article-body h3 { margin: 1.4em 0 .5em; color: #fff; }
.article-body h2 { font-size: 27px; }
.article-body h3 { font-size: 22px; }
.article-body a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: var(--radius); margin: 1.4em 0; }
.article-body blockquote {
	margin: 1.6em 0; padding: 16px 20px;
	border-left: 3px solid var(--gold-3);
	background: rgba(212, 175, 55, .06);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: #e6e9f0; font-style: italic;
}
.article-body ul, .article-body ol { margin: 1em 0 1em 1.3em; list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .45em; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 13.5px; }
.article-body th, .article-body td { border: 1px solid var(--line-soft); padding: 8px 10px; }
.article-body th { background: rgba(212, 175, 55, .08); color: var(--gold-2); }
.article-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags a { font-size: 11px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.article-tags a:hover { color: var(--gold-2); border-color: var(--gold-4); }
.page-head { margin-bottom: 22px; }
.rel-list { padding: 8px 0; }
.rel-item { display: flex; gap: 10px; padding: 9px 14px; transition: background .18s; }
.rel-item:hover { background: rgba(212, 175, 55, .06); }
.rel-thumb { width: 68px; flex: none; aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden; background: #0b0d12; }
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rel-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rel-text strong { font-size: 12.2px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-text em { font-style: normal; font-size: 10px; color: var(--muted-2); }

/* ---------- archive / search ---------- */
.section--archive { padding-top: 46px; }
.empty, .empty-state { color: var(--muted); }
.empty-state { text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty-state--404 .article-title { max-width: none; }
.empty-state .search-form { max-width: 420px; width: 100%; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.pager a, .pager span {
	min-width: 38px; height: 38px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line-soft); border-radius: 8px;
	font-size: 12px; color: var(--muted);
}
.pager a:hover { border-color: var(--gold-3); color: var(--gold-1); }
.pager .current { background: linear-gradient(135deg, var(--gold-2), var(--gold-4)); color: #12140a; border-color: transparent; font-weight: 700; }

/* ---------- to top ---------- */
.to-top {
	position: fixed; right: 22px; bottom: 22px; z-index: 80;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid var(--gold-4);
	background: rgba(10, 12, 17, .9);
	color: var(--gold-2);
	cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .25s var(--ease);
	backdrop-filter: blur(8px);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold-2); color: #12140a; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { animation: revealUp .6s var(--ease) forwards; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.hero-inner { grid-template-columns: minmax(0, 1fr) 300px; }
	.match-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.transfer-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
	.footer-col--wide { grid-column: span 3; }
}

@media (max-width: 960px) {
	.container { width: calc(100% - 32px); }
	.main-nav { display: none; }
	.menu-toggle { display: grid; }
	.header-in { height: 62px; gap: 14px; }
	.hero-inner { grid-template-columns: 1fr; }
	.hero-card { min-height: 400px; }
	.hero-side { flex-direction: row; flex-wrap: wrap; }
	.side-card { flex: 1 1 46%; min-height: 170px; }
	.hero-stats { width: 100%; }
	.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.news-card--lead { grid-column: span 2; grid-row: auto; }
	.split-in { grid-template-columns: 1fr; }
	.article-layout { grid-template-columns: 1fr; }
	.video-grid, .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cta-in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
	.topbar-right { display: none; }
	.hero-card { min-height: 430px; }
	.hero-content { padding: 22px 18px 22px; }
	.hero-title { font-size: 30px; }
	.hero-desc { font-size: 13px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
	.side-card { flex: 1 1 100%; }
	.match-row { grid-template-columns: 1fr; }
	.news-grid { grid-template-columns: 1fr; }
	.news-card--lead { grid-column: auto; }
	.transfer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.video-grid, .mini-grid { grid-template-columns: 1fr; }
	.wc-item { grid-template-columns: 118px minmax(0, 1fr); gap: 11px; }
	.wc-text strong { font-size: 16px; }
	.section { padding: 38px 0; }
	.footer-top { grid-template-columns: 1fr 1fr; }
	.footer-col--wide { grid-column: span 2; }
	.cta-form, .footer-form { width: 100%; }
	.cta-form input, .footer-form input { min-width: 0; flex: 1; }
	.article-title { font-size: 26px; }
	.article-body { font-size: 14.6px; }
	.site-footer { padding-top: 34px; }
}

/* ---------- 无特色图兜底：金色流光 + 足球 ---------- */
.news-media:not(.has-img), .side-media:not(.has-img), .wc-thumb:not(.has-img),
.transfer-thumb:not(.has-img), .video-media:not(.has-img), .mini-thumb:not(.has-img),
.rel-thumb:not(.has-img) {
	position: relative;
	background:
		radial-gradient(circle at 78% 18%, rgba(249, 233, 160, .28), transparent 46%),
		radial-gradient(circle at 12% 88%, rgba(168, 128, 31, .34), transparent 52%),
		linear-gradient(135deg, #191d29, #0d1017 60%, #14120a);
}
.news-media:not(.has-img)::before, .side-media:not(.has-img)::before, .wc-thumb:not(.has-img)::before,
.transfer-thumb:not(.has-img)::before, .video-media:not(.has-img)::before, .mini-thumb:not(.has-img)::before,
.rel-thumb:not(.has-img)::before {
	content: "⚽";
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-size: clamp(26px, 3.4vw, 46px);
	filter: drop-shadow(0 6px 18px rgba(212, 175, 55, .45));
	opacity: .85;
}
.news-media:not(.has-img)::after, .side-media:not(.has-img)::after, .wc-thumb:not(.has-img)::after,
.transfer-thumb:not(.has-img)::after, .video-media:not(.has-img)::after, .mini-thumb:not(.has-img)::after,
.rel-thumb:not(.has-img)::after {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 240, 190, .14) 50%, transparent);
	transform: translateX(-140%) skewX(-14deg);
	animation: sweep 6.5s ease-in-out infinite;
	pointer-events: none;
}