Fix: World Cup section + EPG timezone + CSS

static/app_v2.js

@@ -29,11 +29,12 @@ async function loadHome(){
   loadHotTopics();
 
   // Fetch all data with timeout - không để 1 API chậm treo cả trang
-  const [featuredData, wallData, hlLeagues, aiData] = await Promise.allSettled([
+  const [featuredData, wallData, hlLeagues, aiData, wcData] = await Promise.allSettled([
     _fetchWithTimeout('/api/livescore/featured', 5000),
     _fetchWithTimeout('/api/wall', 5000),
-    _fetchWithTimeout('/api/highlights/leagues', 15000), // Tăng timeout cho highlights
+    _fetchWithTimeout('/api/highlights/leagues', 15000),
     _fetchWithTimeout('/api/genk_ai', 8000),
+    _fetchWithTimeout('/api/wc2026', 12000), // World Cup data
   ]).then(results => results.map(r => r.status === 'fulfilled' ? r.value : null));
 
   if(featuredData && featuredData.home){
@@ -44,29 +45,148 @@ async function loadHome(){
   }
 
   _wallPosts = (wallData && wallData.posts) || [];
-  // Đảm bảo _hlLeagueData luôn là object, không bao giờ null
   _hlLeagueData = (hlLeagues && typeof hlLeagues === 'object') ? hlLeagues : {};
+  _wcData = wcData || {}; // Store World Cup data globally
 
   _renderWallIn(afterEl);
   _renderHLIn(afterEl);
+  
+  // Render World Cup section nếu có dữ liệu
+  if(_wcData && Object.keys(_wcData).length > 0){
+    _renderWorldCupSection(afterEl);
+  }
+  
   if(aiData && aiData.length) _renderSlidesIn('ai-articles','Ứng dụng AI','🤖',aiData,afterEl);
+}
+
+// ===== WORLD CUP 2026 SECTION =====
+function _renderWorldCupSection(afterEl){
+  const wc = _wcData;
+  const wrap = document.createElement('div');
+  wrap.className = 'wc-section';
+  wrap.id = 'wc-section';
   
-  // Load World Cup highlights riêng nếu chưa có trong hlLeagues
-  if(!_hlLeagueData['world-cup'] || !_hlLeagueData['world-cup'].length){
-    _loadWorldCupHighlights(afterEl);
+  let h = '<div class="wc-header"><span class="wc-title">🌍 World Cup 2026</span></div>';
+  h += '<div class="wc-tabs"><span class="wc-tab active" onclick="switchWCTab(\'news\',this)">📰 Tin tức</span><span class="wc-tab" onclick="switchWCTab(\'fixtures\',this)">📅 Lịch thi đấu</span><span class="wc-tab" onclick="switchWCTab(\'standings\',this)">🏆 Bảng xếp hạng</span><span class="wc-tab" onclick="switchWCTab(\'stats\',this)">📊 Thống kê</span><span class="wc-tab" onclick="switchWCTab(\'highlights\',this)">🎬 Highlight</span></div>';
+  h += '<div id="wc-tab-content" class="wc-tab-content"></div>';
+  
+  wrap.innerHTML = h;
+  afterEl.parentNode.insertBefore(wrap, afterEl);
+  
+  // Mặc định hiển thị tin tức
+  _renderWCTabContent('news');
+}
+
+function switchWCTab(tab, el){
+  document.querySelectorAll('.wc-tab').forEach(t => t.classList.remove('active'));
+  if(el) el.classList.add('active');
+  _renderWCTabContent(tab);
+}
+
+function _renderWCTabContent(tab){
+  const contentEl = document.getElementById('wc-tab-content');
+  if(!contentEl) return;
+  
+  if(tab === 'news'){
+    _renderWCNews(contentEl);
+  } else if(tab === 'fixtures'){
+    _renderWCFixtures(contentEl);
+  } else if(tab === 'standings'){
+    _renderWCStandings(contentEl);
+  } else if(tab === 'stats'){
+    _renderWCStats(contentEl);
+  } else if(tab === 'highlights'){
+    _renderWCHighlights(contentEl);
   }
 }
 
-// Load World Cup highlights riêng biệt - không block trang chủ
-async function _loadWorldCupHighlights(afterEl){
+function _renderWCNews(el){
+  const news = _wcData.news || [];
+  if(!news.length){
+    el.innerHTML = '<div class="loading">Đang tải tin tức...</div>';
+    // Fetch news nếu chưa có
+    _fetchWCTabData('news');
+    return;
+  }
+  let h = '<div class="wc-news-list">';
+  news.slice(0, 15).forEach(item => {
+    h += `<div class="wc-news-item" onclick="readArticle('${esc(item.link)}')">`;
+    if(item.img) h += `<div class="wc-news-img"><img src="${esc(item.img)}" loading="lazy" onerror="this.style.display='none'"></div>`;
+    h += `<div class="wc-news-text"><div class="wc-news-title">${esc(item.title)}</div><div class="wc-news-source">${esc(item.source||'')}</div></div></div>`;
+  });
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+function _renderWCFixtures(el){
+  const fixtures = _wcData.fixtures || {};
+  const matches = fixtures.matches || [];
+  if(!matches.length){
+    el.innerHTML = '<div class="loading">Đang tải lịch thi đấu...</div>';
+    _fetchWCTabData('fixtures');
+    return;
+  }
+  let h = '<div class="wc-fixtures-list">';
+  matches.slice(0, 20).forEach(m => {
+    const statusClass = m.status === 'live' ? 'wc-live' : (m.status === 'finished' ? 'wc-finished' : 'wc-upcoming');
+    const score = m.score || 'vs';
+    h += `<div class="wc-match-item">`;
+    h += `<div class="wc-match-date">${esc(m.date_vn||m.date_utc||'')}</div>`;
+    h += `<div class="wc-match-teams"><span class="wc-team">${esc(m.home||'')}</span><span class="wc-score ${statusClass}">${esc(score)}</span><span class="wc-team">${esc(m.away||'')}</span></div>`;
+    if(m.location) h += `<div class="wc-match-location">📍 ${esc(m.location)}</div>`;
+    h += `</div>`;
+  });
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+function _renderWCStandings(el){
+  const standings = _wcData.standings || {};
+  const html = standings.html || '';
+  if(!html){
+    el.innerHTML = '<div class="loading">Đang tải bảng xếp hạng...</div>';
+    _fetchWCTabData('standings');
+    return;
+  }
+  el.innerHTML = '<div class="wc-standings-table">' + html + '</div>';
+}
+
+function _renderWCStats(el){
+  const stats = _wcData.stats || {};
+  const html = stats.html || '';
+  if(!html){
+    el.innerHTML = '<div class="loading">Đang tải thống kê...</div>';
+    _fetchWCTabData('stats');
+    return;
+  }
+  el.innerHTML = '<div class="wc-stats-table">' + html + '</div>';
+}
+
+function _renderWCHighlights(el){
+  const highlights = _hlLeagueData['world-cup'] || [];
+  if(!highlights.length){
+    el.innerHTML = '<div class="loading">Đang tải highlights...</div>';
+    _fetchWCTabData('highlights');
+    return;
+  }
+  let h = '<div class="wc-highlights-grid">';
+  highlights.slice(0, 12).forEach((item, i) => {
+    h += `<div class="wc-hl-item" onclick="openHighlightFeed('world-cup',${i})">`;
+    h += `<div class="wc-hl-thumb">${item.img ? `<img src="${esc(item.img)}" loading="lazy">` : ''}<div class="card-play">▶</div></div>`;
+    h += `<div class="wc-hl-title">${esc(item.title)}</div></div>`;
+  });
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+async function _fetchWCTabData(tab){
   try{
-    const wcData = await _fetchWithTimeout('/api/highlights/world-cup', 12000);
-    if(wcData && wcData.length > 0){
-      _hlLeagueData['world-cup'] = wcData;
-      _renderSlidesIn('world-cup', 'World Cup 2026', '🌍', wcData, afterEl);
-    }
+    const data = await _fetchWithTimeout(`/api/wc2026/${tab}`, 10000);
+    if(!_wcData) _wcData = {};
+    _wcData[tab] = data;
+    _renderWCTabContent(tab);
   }catch(e){
-    console.log('WC highlights load failed:', e.message);
+    console.log(`WC ${tab} fetch failed:`, e.message);
   }
 }