/* =========================================================
 * sportify-v21.css — Khối nội dung SEO cuối trang + Infinite scroll.
 * Dùng :root variables của theme. Không sửa file CSS cũ.
 * ========================================================= */

/* ---------- Khối "Nội dung SEO" cuối archive ---------- */
.sf-seo-block {
	margin-top: 44px;
	padding: 34px 0 8px;
	border-top: 1px solid #eef1f5;
	background: #fff;
}
.sf-seo-inner { max-width: 900px; }
.sf-seo-title {
	margin: 0 0 14px;
	font-family: var(--sf-head, 'Space Grotesk', sans-serif);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sf-navy, #0B1C2C);
}
.sf-seo-content {
	font-family: var(--sf-body, 'Manrope', sans-serif);
	font-size: 14.5px;
	line-height: 1.75;
	color: #475569;
}
.sf-seo-content p { margin: 0 0 12px; }
.sf-seo-content p:last-child { margin-bottom: 0; }
.sf-seo-content strong { color: var(--sf-navy, #0B1C2C); font-weight: 700; }
.sf-seo-content a { color: #1c8a4e; text-decoration: underline; }
.sf-seo-content a:hover { color: #166d3e; }
.sf-seo-content h2,
.sf-seo-content h3 {
	font-family: var(--sf-head, 'Space Grotesk', sans-serif);
	color: var(--sf-navy, #0B1C2C);
	margin: 20px 0 10px;
	line-height: 1.35;
}
.sf-seo-content h2 { font-size: 18px; }
.sf-seo-content h3 { font-size: 16px; }
.sf-seo-content ul,
.sf-seo-content ol { margin: 0 0 12px; padding-left: 20px; }
.sf-seo-content li { margin-bottom: 6px; }

/* ---------- Infinite scroll ---------- */
.sf-inf {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-height: 52px;
}
.sf-inf-loader {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sf-inf-loader[hidden] { display: none; }
.sf-inf-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #1c8a4e;
	opacity: .35;
	animation: sfInfPulse 900ms ease-in-out infinite;
}
.sf-inf-dot:nth-child(2) { animation-delay: 150ms; }
.sf-inf-dot:nth-child(3) { animation-delay: 300ms; }
@keyframes sfInfPulse {
	0%, 100% { opacity: .3; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-4px); }
}

.sf-inf-btn {
	padding: 11px 26px;
	border: 1.5px solid var(--sf-navy, #0B1C2C);
	border-radius: 10px;
	background: #fff;
	color: var(--sf-navy, #0B1C2C);
	font-family: var(--sf-body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sf-inf-btn:hover {
	background: var(--sf-navy, #0B1C2C);
	color: #fff;
	border-color: var(--sf-navy, #0B1C2C);
}
.sf-inf-btn[hidden] { display: none; }

.sf-inf-end {
	margin: 0;
	color: #94a3b8;
	font-family: var(--sf-body, 'Manrope', sans-serif);
	font-size: 13.5px;
}
.sf-inf-end[hidden] { display: none; }

/* Card chèn thêm bằng AJAX — giữ nguyên hiệu ứng hover của card gốc */
.sf-v21-card { animation: sfInfFadeIn 260ms ease-out; }
@keyframes sfInfFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.sf-seo-block { margin-top: 32px; padding-top: 26px; }
	.sf-seo-title { font-size: 19px; }
}
@media (max-width: 480px) {
	.sf-seo-block { margin-top: 26px; padding-top: 22px; }
	.sf-seo-title { font-size: 17px; }
	.sf-seo-content { font-size: 14px; line-height: 1.7; }
	.sf-inf-btn { width: 100%; }
}