/* national-hub.css page-specific styles after final shared hub extraction. */
/* national-hub.css page-specific styles after shared hub extraction. */
/* National team hub page-specific styles extracted from page-national.php. */
.hcm-team-hub .md-match-date {
	width: 100px;
	color: var(--text-muted);
	flex-shrink: 0;
}

@media (max-width: 960px) {
	.hcm-team-hub .md-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hcm-team-hub .md-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Thống kê đội：占位卡片（勿写死白底，否则暗夜浅字看不见）--- */
.hcm-team-hub .md-team-stats-placeholder {
	padding: 60px 20px;
	text-align: center;
	background: var(--card-bg);
	border-radius: 16px;
	border: 1px solid var(--border);
	box-sizing: border-box;
}

.hcm-team-hub .md-team-stats-placeholder h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.hcm-team-hub .md-team-stats-placeholder p {
	font-size: 14px;
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.5;
	color: var(--text-muted);
}

.hcm-team-hub .md-team-stats-placeholder svg {
	margin: 0 auto 16px auto;
	opacity: 0.45;
	color: var(--text-muted);
}

/* --- Thống kê đội: 辅助样式 --- */
.hcm-team-hub .md-stat-rank {
	width: 16px;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	text-align: left;
}

.hcm-team-hub .md-stat-badge--blue {
	background: #3b82f6; /* FotMob 风格的亮蓝色 */
}

.hcm-team-hub .md-stat-val {
	font-weight: 700;
	font-size: 13px;
	color: var(--text);
}

/* --- 首页总览：左右分栏（主栏 + 赛程侧栏）--- */
.hcm-team-hub .home-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 960px) {
	.hcm-team-hub .home-main-grid {
		grid-template-columns: 1fr;
	}
	.hcm-team-hub .home-top-row {
		grid-template-columns: 1fr;
	}
	.hcm-team-hub .home-top-row > .hcm-card {
		min-height: 0;
	}
}

@media (max-width: 768px) {
	.team-next__body {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center !important;
		gap: 8px !important;
	}

	.team-next__club {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 0 !important;
	}

	.team-next__club--away {
		grid-column: 3 !important;
	}

	.team-next__club .team-next__club-name {
		white-space: normal !important;
		word-break: break-word !important;
		text-align: center !important;
		margin-top: 6px !important;
		font-size: 13px !important;
		line-height: 1.2 !important;
	}

	.team-next__club img {
		width: 40px !important;
		height: 40px !important;
	}

	.team-next__center .team-next__time {
		font-size: 1.25rem !important;
	}

	.team-next__center .team-next__date {
		font-size: 0.75rem !important;
	}
}

html.dark-mode .hcm-team-hub .team-tabs {
	border-top-color: var(--border) !important;
}

/* 移动端头部：对齐赛程详情页 Full Bleed + Tab 字号（仅国家队页 .hcm-national-hub） */
@media (max-width: 992px) {
	body:has(.hcm-national-hub) .site-content,
	body:has(.hcm-national-hub) #content,
	body:has(.hcm-national-hub) #primary,
	body:has(.hcm-national-hub) main.site-main,
	body:has(.hcm-national-hub) .site-main {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.hcm-national-hub {
		padding-top: 0;
	}

	.hcm-national-hub .team-header-card {
		border-radius: 0 !important;
		box-shadow: none !important;
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px);
		margin-bottom: var(--gap);
	}

	.hcm-national-hub .team-header-card__row {
		padding: 20px 15px;
	}

	.hcm-national-hub .team-tabs {
		gap: 0;
		padding: 4px 15px 0;
		border-top: none;
		border-bottom: 1px solid var(--hcm-divider, #f0f0f0);
	}

	.hcm-national-hub .team-tabs__item {
		font-size: 13px;
		font-weight: 500;
		padding: 10px 14px;
	}
}

/* Giới thiệu — 与赛程详情 Về trận đấu 同款折叠 */
#pane-tong-quan .hcm-national-about-seo {
	position: relative;
	padding-bottom: 10px;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text, var(--hcm-text-main));
	max-height: 200px;
	overflow: hidden;
	position: relative;
	transition: max-height 0.4s ease-in-out;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content.expanded {
	max-height: 2000px;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content p {
	margin-bottom: 12px;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content ul {
	margin-left: 20px;
	margin-bottom: 12px;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content li {
	margin-bottom: 8px;
}

#pane-tong-quan .hcm-national-about-seo .fade-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--hcm-bg-card, var(--card-bg, #fff)));
	pointer-events: none;
	transition: opacity 0.3s;
}

#pane-tong-quan .hcm-national-about-seo .md-about-match-content.expanded .fade-overlay {
	opacity: 0;
}

#pane-tong-quan .hcm-national-about-seo .md-read-more-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: transparent !important;
	border: none;
	color: #10b981;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 0;
	margin-top: 4px;
	cursor: pointer;
	transition: opacity 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

#pane-tong-quan .hcm-national-about-seo .md-read-more-btn:hover {
	opacity: 0.7;
}

#pane-tong-quan .hcm-seo-highlight {
	color: #10b981;
	font-weight: 500;
}

#pane-tong-quan a.hcm-seo-link.hcm-seo-highlight {
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

#pane-tong-quan a.hcm-seo-link.hcm-seo-highlight:hover,
#pane-tong-quan a.hcm-seo-link.hcm-seo-highlight:focus-visible {
	border-bottom-color: #10b981;
	outline: none;
}

#pane-tong-quan .hcm-seo-paragraph--last {
	margin-bottom: 0;
}

#pane-tong-quan .hcm-form-result--win {
	color: var(--form-win, #10b981);
}

#pane-tong-quan .hcm-form-result--loss {
	color: var(--form-loss, #ef4444);
}

#pane-tong-quan .hcm-form-result--draw {
	color: var(--form-draw, #9ca3af);
}

#pane-tong-quan .hcm-national-about-table-wrap {
	overflow-x: auto;
	margin: 8px 0 12px;
}

#pane-tong-quan .hcm-national-about-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

#pane-tong-quan .hcm-national-about-table caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	margin-bottom: 8px;
}

#pane-tong-quan .hcm-national-about-table th,
#pane-tong-quan .hcm-national-about-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--hcm-divider, #e5e7eb);
	text-align: center;
}

#pane-tong-quan .hcm-national-about-table th.t-left,
#pane-tong-quan .hcm-national-about-table td.t-left {
	text-align: left;
}

#pane-tong-quan .hcm-national-about-table__highlight {
	background: rgba(16, 185, 129, 0.08);
}