/* Jalalive bespoke styles + keyframes (trích từ <style> inline của jalalive). */

/* === Arbitrary Tailwind classes THIẾU trong tailwind-prebuilt.css (prebuilt drift) — bù tay.
   z-[60]: overlay search/auth bị header sticky che → không thấy ô nhập (BUG user báo).
   placeholder-[#525252]: màu placeholder ô search. min-w-[12px]: chip thẻ đỏ/vàng hasil.
   divide-[#262626]/40: vạch ngăn dòng. min-h: empty-state/player. === */
.z-\[60\] { z-index: 60; }
.border-\[\#262626\]\/60 { border-color: rgba( 38, 38, 38, 0.6 ); }
.divide-\[\#262626\]\/40 > :not( [hidden] ) ~ :not( [hidden] ) { border-color: rgba( 38, 38, 38, 0.4 ); }
.max-w-\[40\%\] { max-width: 40%; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[460px\] { min-height: 460px; }
.min-h-\[520px\] { min-height: 520px; }
.min-w-\[12px\] { min-width: 12px; }
.min-w-\[58px\] { min-width: 58px; }
.min-w-\[620px\] { min-width: 620px; }
.placeholder-\[\#525252\]::placeholder { color: #525252; }
@media ( min-width: 640px ) { .sm\:w-\[280px\] { width: 280px; } }

@keyframes searchPopupIn {
	0%   { opacity: 0; transform: scale(0.92) translateY(-8px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
.search-popup-enter {
	animation: searchPopupIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: top center;
}
@keyframes searchItemIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.search-item-enter {
	animation: searchItemIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Bù 2 class arbitrary trang trí mà CSS compiled (từ home) không có:
   scale-[2.2] (blur bg panel giải) + xl:aspect-[3/1] (hero bài viết ở xl). */
.scale-\[2\.2\] { transform: scale(2.2); }
@media (min-width: 1280px) { .xl\:aspect-\[3\/1\] { aspect-ratio: 3 / 1; } }

/* Chat iframe full khung. */
.soco-chat-iframe { display: block; width: 100%; min-height: 520px; border: 0; }

/* Nút chọn streamer (luồng stream jalalive) — trạng thái active. */
.jala-streamer-btn.active { background: var(--jala-accent); color: var(--jala-bg-0); border-color: var(--jala-accent); }
.jala-streamer-btn.active .w-1\.5 { background: var(--jala-bg-0); }
#streamPlayer { width: 100%; height: 100%; }
#streamPlayer .art-video-player { width: 100% !important; height: 100% !important; border-radius: 0.75rem; }

/* Live badge pulse dot (đề phòng tailwind animate-pulse chưa đủ). */
@keyframes jalaPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.jala-pulse { animation: jalaPulse 1.2s ease-in-out infinite; }

/* Card chờ "Muat lebih banyak" — ẩn cho tới khi bấm lộ (class riêng, không đụng filter trạng thái). */
.jala-mc-hidden { display: none !important; }

/* Sân cỏ Susunan Pemain (đội hình trên sân, như site gốc). */
.jala-pitch { position: relative; width: 100%; aspect-ratio: 68 / 92; max-height: 720px; border-radius: 14px; overflow: hidden;
	background:
		repeating-linear-gradient( 180deg, rgba(255,255,255,.035) 0 8.3%, transparent 8.3% 16.6% ),
		linear-gradient( 180deg, #0e451f 0%, #136a2d 50%, #0e451f 100% );
	border: 1px solid #1c5a2c; }
.jala-pitch-line { position: absolute; left: 5%; right: 5%; top: 50%; border-top: 2px solid rgba(255,255,255,.22); }
.jala-pitch-circle { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.22); border-radius: 50%; }
.jala-pitch-box { position: absolute; left: 28%; width: 44%; height: 14%; border: 2px solid rgba(255,255,255,.18); border-top: 0; border-bottom: 0; }
.jala-pitch-box.top { top: 0; border-top: 0; border-bottom: 2px solid rgba(255,255,255,.18); }
.jala-pitch-box.bot { bottom: 0; border-bottom: 0; border-top: 2px solid rgba(255,255,255,.18); }
.jala-pp { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; width: 56px; pointer-events: none; }
.jala-pp-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.jala-pp-badge img { width: 100%; height: 100%; object-fit: cover; }
.jala-pp-home .jala-pp-badge { background: var(--jala-accent, #FACC15); color: #0A0A0A; border: 2px solid #fff; }
.jala-pp-away .jala-pp-badge { background: #E5E5E5; color: #0A0A0A; border: 2px solid #0A0A0A; }
.jala-pp-num { position: absolute; bottom: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px; background: #0A0A0A; color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.jala-pp-name { margin-top: 3px; font-size: 10px; color: #fff; text-shadow: 0 1px 3px #000; max-width: 60px; text-align: center; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ẩn thanh cuộn ngang cho nav (no-scrollbar đã có trong prebuilt; backup). */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Body padding cho header fixed nếu pt-16 thiếu trong context nào đó. */
main { scroll-margin-top: var(--jala-header-h); }

/* Phân trang WP (the_posts_pagination) — style tối. */
.jala-pagination .nav-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.jala-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
	border-radius: 0.5rem; background: var(--jala-bg-1); border: 1px solid var(--jala-border);
	color: var(--jala-text-dim); font-size: 0.85rem; font-weight: 700; text-decoration: none;
	transition: color .15s, border-color .15s;
}
.jala-pagination a.page-numbers:hover { color: var(--jala-text); border-color: var(--jala-border-hover); }
.jala-pagination .page-numbers.current { background: var(--jala-accent); color: var(--jala-bg-0); border-color: var(--jala-accent); }
.jala-pagination .page-numbers.dots { background: transparent; border-color: transparent; }

/* Typography cho nội dung the_content() (berita/analisis/SEO body).
   Prebuilt CSS không kèm Tailwind .prose nên style .jala-content trực tiếp. */
.jala-content { color: var(--jala-text); font-size: 0.975rem; line-height: 1.8; }
.jala-content h1, .jala-content h2, .jala-content h3, .jala-content h4 {
	color: #fff; font-weight: 900; line-height: 1.25; margin: 1.6em 0 0.6em;
}
.jala-content h2 { font-size: 1.5rem; }
.jala-content h3 { font-size: 1.25rem; }
.jala-content h4 { font-size: 1.1rem; }
.jala-content p { margin: 0 0 1.1em; }
.jala-content a { color: var(--jala-accent); text-decoration: none; }
.jala-content a:hover { color: var(--jala-accent-hover); text-decoration: underline; }
.jala-content ul, .jala-content ol { margin: 0 0 1.1em 1.4em; }
.jala-content ul { list-style: disc; }
.jala-content ol { list-style: decimal; }
.jala-content li { margin: 0.35em 0; }
.jala-content img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1em 0; }
.jala-content figure { margin: 1.2em 0; }
.jala-content figcaption { color: var(--jala-text-dim); font-size: 0.85rem; text-align: center; margin-top: 0.5em; }
.jala-content blockquote {
	border-left: 3px solid var(--jala-accent); padding: 0.2em 1em; margin: 1.2em 0;
	color: var(--jala-text-dim); background: var(--jala-bg-1); border-radius: 0 0.5rem 0.5rem 0;
}
.jala-content strong { color: #fff; }
.jala-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.jala-content th, .jala-content td { border: 1px solid var(--jala-border); padding: 0.5em 0.75em; }