Restore app_v2.js WC 2026 section from 7a0c951: wc2026-live-section in loadHome, shorts fetch, switchWCTab call, render order

static/app_v2.js

@@ -1,5 +1,6 @@
 // === VNEWS Frontend v2 - Optimized for speed ===
 
+// === LOAD HOME - Fast: immediate shell + parallel fetch ===
 function _fetchWithTimeout(url, ms){
   return new Promise((resolve,reject)=>{
     const ctrl=new AbortController();
@@ -16,29 +17,32 @@ async function loadHome(){
   const homeEl = document.getElementById('view-home');
   if(!homeEl) return;
 
-  // World Cup section sẽ được chèn vào đây (trước Livescore)
+  // Build shell IMMEDIATELY — no skeleton, no delay
   homeEl.innerHTML =
     '<div id="home-featured-area"></div>'
-    +'<div id="wc-home-section"></div>'  // World Cup section - hiển thị đầu tiên
     +'<div class="ai-compose"><div class="ai-compose-title">🤖 AI viết bài</div><div class="ai-compose-row"><input id="topic-input" placeholder="Nhập chủ đề..."><button onclick="searchTopic()">Tìm nguồn</button></div><div class="ai-compose-row"><input id="url-input" placeholder="Dán URL bài viết..."><button class="secondary" onclick="rewriteUrl()">Rewrite</button></div><div id="hot-topics" class="hot-topic-row"></div></div>'
     +'<div id="hashtag-box"></div>'
     +'<div class="ls-section"><div class="ls-header"><h3>⚽ Livescore</h3></div><div class="ls-tabs"><span class="ls-tab active" data-tab="today" onclick="loadLivescore(\'today\')">📅 Hôm nay</span><span class="ls-tab" data-tab="live" onclick="loadLivescore(\'live\')">🔴 Live</span><span class="ls-tab" data-tab="incoming" onclick="loadLivescore(\'incoming\')">⏰ Sắp tới</span><span class="ls-tab" data-tab="results" onclick="loadLivescore(\'results\')">✅ Kết quả</span><span class="ls-tab" data-tab="bxh_nha" onclick="loadLivescore(\'bxh_nha\')">🏆 NHA</span><span class="ls-tab" data-tab="bxh_laliga" onclick="loadLivescore(\'bxh_laliga\')">🏆 La Liga</span></div><div class="ls-content" id="ls-content"><div class="loading">Đang tải...</div></div></div>'
-    +'<div id="home-content"></div>';
+    +'<div id="wc2026-live-section" class="wc2026-section"><div class="wc-header"><h2>🏆 World Cup 2026</h2><span class="wc-live-badge">● LIVE</span></div><div class="wc-tabs"><span class="wc-tab active" onclick="switchWCTab(\'news\')">📰 Tin tức</span><span class="wc-tab" onclick="switchWCTab(\'fixtures\')">📅 Lịch thi đấu</span><span class="wc-tab" onclick="switchWCTab(\'standings\')">🏆 BXH</span><span class="wc-tab" onclick="switchWCTab(\'highlights\')">🎬 Highlight</span><span class="wc-tab" onclick="switchWCTab(\'stats\')">📊 Thống kê</span></div><div class="wc-content" id="wc-content"><div class="loading">Đang tải World Cup 2026...</div></div></div>'
+    +'<div id="home-after-wc"></div>';
 
-  const afterEl = homeEl.querySelector('#home-content');
+  const afterEl = homeEl.querySelector('#home-after-wc');
 
+  // Start critical loads immediately
   loadLivescore('today');
   loadHotTopics();
 
-  // Fetch all data with timeout - không để 1 API chậm treo cả trang
-  const [featuredData, wallData, hlLeagues, aiData, wcData] = await Promise.allSettled([
+  // Fetch all data in parallel with shorter timeouts
+  const [featuredData, shortsData, wallData, hlLeagues, aiData, wcData] = await Promise.allSettled([
     _fetchWithTimeout('/api/livescore/featured', 5000),
+    _fetchWithTimeout('/api/shorts', 8000),
     _fetchWithTimeout('/api/wall', 5000),
-    _fetchWithTimeout('/api/highlights/leagues', 15000),
+    _fetchWithTimeout('/api/highlights/leagues', 10000),
     _fetchWithTimeout('/api/genk_ai', 8000),
-    _fetchWithTimeout('/api/wc2026', 12000), // World Cup data
+    _fetchWithTimeout('/api/wc2026', 8000),
   ]).then(results => results.map(r => r.status === 'fulfilled' ? r.value : null));
 
+  // Render featured match
   if(featuredData && featuredData.home){
     const sc=featuredData.status==='live'?'':'upcoming';
     const st=featuredData.status==='live'?`🔴 ${featuredData.minute||'LIVE'}`:`⏰ ${featuredData.time}`;
@@ -46,217 +50,22 @@ async function loadHome(){
     if(area) area.innerHTML=`<div class="featured-match" onclick="openMatch('${featuredData.event_id}')"><div class="fm-league">${featuredData.league}</div><div class="fm-teams"><div class="fm-team"><img src="${featuredData.home_logo}" onerror="this.style.display='none'"><span>${featuredData.home}</span></div><div class="fm-score">${featuredData.score||'VS'}</div><div class="fm-team"><img src="${featuredData.away_logo}" onerror="this.style.display='none'"><span>${featuredData.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;
   }
 
+  // Store globally
+  _shortsData = shortsData || [];
   _wallPosts = (wallData && wallData.posts) || [];
-  _hlLeagueData = (hlLeagues && typeof hlLeagues === 'object') ? hlLeagues : {};
-  _wcData = wcData || {}; // Store World Cup data globally
+  _hlLeagueData = hlLeagues || {};
+  _wc2026Data = wcData;
 
-  // Render World Cup section NGAY SAU featured match (trước AI compose, hashtag, livescore)
-  if(_wcData && Object.keys(_wcData).length > 0){
-    _renderWorldCupSectionInHome();
-  }
+  // Render WC if data arrived
+  if(wcData) switchWCTab('news');
 
+  // Render sections into the after-wc area
+  _renderShortsIn(afterEl);
   _renderWallIn(afterEl);
   _renderHLIn(afterEl);
-  
   if(aiData && aiData.length) _renderSlidesIn('ai-articles','Ứng dụng AI','🤖',aiData,afterEl);
 }
 
-// ===== WORLD CUP 2026 SECTION =====
-// Render World Cup trong trang chủ (sau featured match, trước AI compose)
-function _renderWorldCupSectionInHome(){
-  const wcContainer = document.getElementById('wc-home-section');
-  if(!wcContainer) return;
-  
-  const wc = _wcData;
-  let h = '<div class="wc-section">';
-  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>';
-  h += '</div>';
-  
-  wcContainer.innerHTML = h;
-  _renderWCTabContent('news');
-}
-
-// Render World Cup trong view riêng (nếu cần)
-function _renderWorldCupSection(afterEl){
-  const wc = _wcData;
-  const wrap = document.createElement('div');
-  wrap.className = 'wc-section';
-  wrap.id = 'wc-section';
-  
-  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);
-  _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);
-  }
-}
-
-// Biến lưu trạng thái loading cho từng tab
-	let _wcTabLoading = {};
-	let _wcTabLoaded = {}; // Đánh dấu tab đã load xong (dù có data hay không)
-	
-	function _renderWCNews(el){
-	  // Nếu đang loading, hiển thị loading
-	  if(_wcTabLoading['news']){
-	    el.innerHTML = '<div class="loading">Đang tải tin tức...</div>';
-	    return;
-	  }
-	  // Nếu đã load xong nhưng không có data
-	  if(_wcTabLoaded['news'] && (!_wcData.news || !_wcData.news.length)){
-	    el.innerHTML = '<div class="loading">Chưa có dữ liệu tin tức World Cup.</div>';
-	    return;
-	  }
-	  // Nếu chưa load, trigger fetch
-	  if(!_wcTabLoaded['news']){
-	    el.innerHTML = '<div class="loading">Đang tải tin tức...</div>';
-	    _fetchWCTabData('news');
-	    return;
-	  }
-	  // Render data
-	  const news = _wcData.news || [];
-	  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){
-	  if(_wcTabLoading['fixtures']){
-	    el.innerHTML = '<div class="loading">Đang tải lịch thi đấu...</div>';
-	    return;
-	  }
-	  if(_wcTabLoaded['fixtures'] && (!_wcData.fixtures || !_wcData.fixtures.matches || !_wcData.fixtures.matches.length)){
-	    el.innerHTML = '<div class="loading">Chưa có dữ liệu lịch thi đấu World Cup.</div>';
-	    return;
-	  }
-	  if(!_wcTabLoaded['fixtures']){
-	    el.innerHTML = '<div class="loading">Đang tải lịch thi đấu...</div>';
-	    _fetchWCTabData('fixtures');
-	    return;
-	  }
-	  const fixtures = _wcData.fixtures || {};
-	  const matches = fixtures.matches || [];
-	  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){
-	  if(_wcTabLoading['standings']){
-	    el.innerHTML = '<div class="loading">Đang tải bảng xếp hạng...</div>';
-	    return;
-	  }
-	  if(_wcTabLoaded['standings'] && (!_wcData.standings || !_wcData.standings.html)){
-	    el.innerHTML = '<div class="loading">Chưa có dữ liệu bảng xếp hạng World Cup.</div>';
-	    return;
-	  }
-	  if(!_wcTabLoaded['standings']){
-	    el.innerHTML = '<div class="loading">Đang tải bảng xếp hạng...</div>';
-	    _fetchWCTabData('standings');
-	    return;
-	  }
-	  const standings = _wcData.standings || {};
-	  el.innerHTML = '<div class="wc-standings-table">' + standings.html + '</div>';
-	}
-	
-	function _renderWCStats(el){
-	  if(_wcTabLoading['stats']){
-	    el.innerHTML = '<div class="loading">Đang tải thống kê...</div>';
-	    return;
-	  }
-	  if(_wcTabLoaded['stats'] && (!_wcData.stats || !_wcData.stats.html)){
-	    el.innerHTML = '<div class="loading">Chưa có dữ liệu thống kê World Cup.</div>';
-	    return;
-	  }
-	  if(!_wcTabLoaded['stats']){
-	    el.innerHTML = '<div class="loading">Đang tải thống kê...</div>';
-	    _fetchWCTabData('stats');
-	    return;
-	  }
-	  const stats = _wcData.stats || {};
-	  el.innerHTML = '<div class="wc-stats-table">' + stats.html + '</div>';
-	}
-	
-	function _renderWCHighlights(el){
-	  // Highlights lấy từ _hlLeagueData (đã fetch từ API highlights/leagues)
-	  if(!_hlLeagueData) _hlLeagueData = {};
-	  const highlights = _hlLeagueData['world-cup'] || [];
-	  if(!highlights.length){
-	    el.innerHTML = '<div class="loading">Chưa có highlight World Cup.</div>';
-	    return;
-	  }
-	  let h = '<div class="wc-highlights-grid">';
-	  highlights.slice(0, 12).forEach((item, i) => {
-	    // FIX: Đảm bảo luôn có title và placeholder cho img
-	    const title = item.title || 'World Cup Highlight';
-	    const imgHtml = item.img ? 
-	      `<img src="${esc(item.img)}" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%23333%22 width=%22100%22 height=%22100%22/><text fill=%22%23999%22 x=%2250%22 y=%2255%22 text-anchor=%22middle%22 font-size=%2214%22>🌍</text></svg>'">` : 
-	      `<div style="width:100%;height:100%;background:#222;display:flex;align-items:center;justify-content:center;font-size:24px;">🌍</div>`;
-	    h += `<div class="wc-hl-item" onclick="openHighlightFeed('world-cup',${i})">`;
-	    h += `<div class="wc-hl-thumb">${imgHtml}<div class="card-play">▶</div></div>`;
-	    h += `<div class="wc-hl-title">${esc(title)}</div></div>`;
-	  });
-	  h += '</div>';
-	  el.innerHTML = h;
-	}
-	
-	async function _fetchWCTabData(tab){
-	  if(_wcTabLoading[tab]) return; // Đang loading rồi, không fetch lại
-	  _wcTabLoading[tab] = true;
-	  try{
-	    const data = await _fetchWithTimeout(`/api/wc2026/${tab}`, 8000);
-	    if(!_wcData) _wcData = {};
-	    _wcData[tab] = data;
-	    _wcTabLoading[tab] = false;
-	    _wcTabLoaded[tab] = true;
-	    _renderWCTabContent(tab); // Render lại tab hiện tại
-	  }catch(e){
-	    console.log(`WC ${tab} fetch failed:`, e.message);
-	    _wcTabLoading[tab] = false;
-	    _wcTabLoaded[tab] = true;
-	    _renderWCTabContent(tab); // Render lại để hiển thị thông báo lỗi
-	  }
-	}
-
 function _renderSlidesIn(key, label, emoji, vids, afterEl){
   if(!vids||!vids.length||!afterEl) return;
   const wrap=document.createElement('div');
@@ -275,6 +84,21 @@ function _renderSlidesIn(key, label, emoji, vids, afterEl){
   afterEl.parentNode.insertBefore(wrap, afterEl);
 }
 
+function _renderShortsIn(afterEl){
+  if(!_shortsData||!_shortsData.length||!afterEl) return;
+  const mixed=interleaveShorts(_shortsData);
+  if(!mixed.length) return;
+  const wrap=document.createElement('div');
+  wrap.className='slider-wrap';
+  let h=`<div class="slider-header"><span class="slider-label">📱 Shorts Dân trí & SKĐS</span><span class="slider-note">Mới nhất · xen kẽ</span></div><div class="slider-track">`;
+  mixed.slice(0,30).forEach((a,i)=>{
+    const badge=a.channel==='baosuckhoedoisongboyte'?'SKĐS':'Dân trí';
+    h+=`<div class="slider-item shorts-item" onclick="openYTShortsFeed(${i})"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}" loading="lazy">`:''}<div class="card-play">▶</div></div><div class="slider-title"><span style="color:#f0c040;font-size:8px">${badge}</span> ${esc(a.title)}</div></div>`;
+  });
+  h+='</div>';wrap.innerHTML=h;
+  afterEl.parentNode.insertBefore(wrap,afterEl);
+}
+
 function _renderWallIn(afterEl){
   if(!_wallPosts||!_wallPosts.length||!afterEl) return;
   const posts=_wallPosts;
@@ -296,30 +120,25 @@ function _renderWallIn(afterEl){
 }
 
 function _renderHLIn(afterEl){
-  if(!_hlLeagueData || !afterEl) return;
-  // Ưu tiên World Cup hiển thị đầu tiên
+  if(!_hlLeagueData||Object.keys(_hlLeagueData).length===0||!afterEl) return;
   const HL_CONFIG={"world-cup":{name:"World Cup 2026",emoji:"🌍"},"premier-league":{name:"Premier League",emoji:"🏴"},"champions-league":{name:"Champions League",emoji:"⭐"},"la-liga":{name:"La Liga",emoji:"🇪🇸"},"serie-a":{name:"Serie A",emoji:"🇮🇹"},"bundesliga":{name:"Bundesliga",emoji:"🇩🇪"},"friendly":{name:"Giao hữu",emoji:"🤝"}};
-  
-  // Render World Cup trước nếu có
-  const wcVids = _hlLeagueData['world-cup'];
-  if(wcVids && wcVids.length > 0){
-    _renderSlidesIn('world-cup', 'World Cup 2026', '🌍', wcVids, afterEl);
-  }
-  
-  // Render các league khác
   for(const[key,cfg] of Object.entries(HL_CONFIG)){
-    if(key === 'world-cup') continue; // Đã render ở trên
     const vids=_hlLeagueData[key];
     if(!vids||!vids.length) continue;
     _renderSlidesIn(key,cfg.name,cfg.emoji,vids,afterEl);
   }
 }
 
+// === WALL POST HELPERS ===
 function makeWallItem(p,i){
   const hasVideo = p.video && p.video.length > 0;
-  const thumbContent = p.img ? `<img src="${esc(p.img)}" loading="lazy" onerror="this.style.display='none'">` : (hasVideo ? `<video src="${esc(p.video)}" muted></video>` : '');
+  const thumbContent = p.img
+    ? `<img src="${esc(p.img)}" loading="lazy" onerror="this.style.display='none'">`
+    : (hasVideo ? `<video src="${esc(p.video)}" muted></video>` : '');
   const videoBadge = hasVideo ? `<div class="wall-video-badge">🎬</div>` : '';
-  const videoBtn = hasVideo ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(${i})">▶ Xem Short</button>` : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(p.id||i)}',this)">🎬 Tạo Video</button>`;
+  const videoBtn = hasVideo
+    ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(${i})">▶ Xem Short</button>`
+    : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(p.id||i)}',this)">🎬 Tạo Video</button>`;
   return `<div class="wall-item" id="wall-item-${esc(p.id||i)}"><div class="wall-thumb">${thumbContent}${videoBadge}</div><div class="wall-title">${esc(p.title)}</div><div class="wall-text">${esc((p.text||'').slice(0,180))}</div><div class="wall-actions"><button class="primary" onclick="readWallPost(${i})">Xem</button>${videoBtn}</div></div>`;
 }
 
@@ -360,12 +179,17 @@ async function makeShortVideo(postId, btn, voice, speed){
 function refreshShortAISlider(){
   const aiShorts = _wallPosts.filter(p=>p.video);
   let shortAISection = document.getElementById('short-ai-section');
-  if(aiShorts.length === 0){ if(shortAISection) shortAISection.remove(); return; }
+  if(aiShorts.length === 0){
+    if(shortAISection) shortAISection.remove();
+    return;
+  }
   if(shortAISection){
     const track = shortAISection.querySelector('.slider-track');
     if(track){
       let h = '';
-      aiShorts.slice(0,20).forEach((p,i)=>{h+=`<div class="slider-item shorts-item" onclick="openShortAIFeed(${i})"><div class="slider-thumb shorts-thumb"><video src="${esc(p.video)}" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">${esc(p.title)}</div></div>`;});
+      aiShorts.slice(0,20).forEach((p,i)=>{
+        h+=`<div class="slider-item shorts-item" onclick="openShortAIFeed(${i})"><div class="slider-thumb shorts-thumb"><video src="${esc(p.video)}" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">${esc(p.title)}</div></div>`;
+      });
       track.innerHTML = h;
     }
   }
@@ -394,19 +218,26 @@ function prependWallPost(post){
   div.className='wall-item wall-item-new';
   div.id='wall-item-'+(post.id||'new-'+Date.now());
   const hasVideo = post.video && post.video.length > 0;
-  const thumbContent = post.img ? `<img src="${esc(post.img)}" loading="lazy" onerror="this.style.display='none'">` : (hasVideo ? `<video src="${esc(p.video)}" muted></video>` : '');
+  const thumbContent = post.img
+    ? `<img src="${esc(post.img)}" loading="lazy" onerror="this.style.display='none'">`
+    : (hasVideo ? `<video src="${esc(post.video)}" muted></video>` : '');
   const videoBadge = hasVideo ? `<div class="wall-video-badge">🎬</div>` : '';
-  const videoBtn = hasVideo ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(0)">▶ Xem Short</button>` : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(post.id)}',this)">🎬 Tạo Video</button>`;
+  const videoBtn = hasVideo
+    ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(0)">▶ Xem Short</button>`
+    : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(post.id)}',this)">🎬 Tạo Video</button>`;
   div.innerHTML=`<div class="wall-thumb">${thumbContent}${videoBadge}</div><div class="wall-title">${esc(post.title)}</div><div class="wall-text">${esc((post.text||'').slice(0,180))}</div><div class="wall-actions"><button class="primary" onclick="readWallPost(0)">Xem</button>${videoBtn}</div>`;
   track.prepend(div);
   track.scrollTo({left:0,behavior:'smooth'});
   if(hasVideo) refreshShortAISlider();
 }
 
+// === REST OF FUNCTIONS ===
+let _shortsData=[];
 let _wallPosts=[];
 let _currentView='home';
 let _currentEventId=null;
 let _currentMatchUrl=null;
+function interleaveShorts(shorts){const dt=shorts.filter(s=>s.channel==='baodantri7941');const sk=shorts.filter(s=>s.channel==='baosuckhoedoisongboyte');const result=[];let i=0,j=0;while(i<dt.length||j<sk.length){if(i<dt.length)result.push(dt[i++]);if(j<sk.length)result.push(sk[j++]);}return result;}
 let _htPage=0,_htTopic='';
 async function loadHotTopics(){const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));const el=document.getElementById('hot-topics');if(!el)return;el.innerHTML=(j.topics||[]).slice(0,18).map(t=>{const topicText=t.topic||t.label.replace(/^#/,'');return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;}).join('');if(j.topics&&j.topics[0]){const firstTopic=j.topics[0].topic||j.topics[0].label.replace(/^#/,'');setTimeout(()=>searchTopic(firstTopic),800);}}
 function searchTopic(topic){if(!topic){topic=document.getElementById('topic-input')?.value.trim();if(!topic){alert('Nhập chủ đề');return;}}document.getElementById('topic-input').value='';_htTopic=topic;_htPage=0;showHashtagSources(topic,0);}
@@ -422,7 +253,8 @@ function bindMatchClicks(el){
       const teamA=this.querySelector('.teams a[href*="/tran-dau/"]');
       const a = statusA || teamA;
       if(a){
-        e.preventDefault();e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
         const href=a.getAttribute('href')||'';
         const m=href.match(/\/tran-dau\/(\d+)\//);
         if(m){
@@ -432,7 +264,9 @@ function bindMatchClicks(el){
       }
     });
   });
-  el.querySelectorAll('a').forEach(a=>{a.addEventListener('click',e=>{e.preventDefault();e.stopPropagation()});});
+  el.querySelectorAll('a').forEach(a=>{
+    a.addEventListener('click',e=>{e.preventDefault();e.stopPropagation()});
+  });
 }
 function openMatch(id,url){if(!id)return;_currentEventId=id;if(url)_currentMatchUrl=url;document.getElementById('match-overlay').classList.add('active');document.body.style.overflow='hidden';loadMatchTab('detail')}
 function closeMatch(){document.getElementById('match-overlay').classList.remove('active');document.body.style.overflow=''}
@@ -449,74 +283,11 @@ async function loadCounters(videoIds){for(let i=0;i<videoIds.length;i++){const i
 async function toggleComments(videoId,idx){const panel=document.getElementById('cmt-inline-'+idx);if(!panel)return;if(panel.style.display!=='none'){panel.style.display='none';return;}panel.style.display='block';panel.innerHTML='<div style="padding:8px;color:#888;font-size:11px">Đang tải...</div>';const cmts=await getComments(videoId);renderInlineComments(panel,videoId,idx,cmts);}
 function renderInlineComments(panel,videoId,idx,cmts){let h='<div class="inline-cmt-header"><span>💬 Bình luận</span><button onclick="document.getElementById(\'cmt-inline-'+idx+'\').style.display=\'none\'">✕</button></div><div class="inline-cmt-list">';if(cmts.length){cmts.slice(-30).forEach(c=>{h+=`<div class="inline-cmt-item"><span class="inline-cmt-time">${c.time||''}</span>${esc(c.text)}</div>`;});}else{h+='<div style="color:#777;font-size:11px;padding:4px">Chưa có bình luận</div>';}h+=`</div><div class="inline-cmt-input"><input id="cmt-input-${idx}" placeholder="Viết bình luận..." onkeydown="if(event.key==='Enter')submitInlineCmt('${esc(videoId)}',${idx})"><button onclick="submitInlineCmt('${esc(videoId)}',${idx})">Gửi</button></div>`;panel.innerHTML=h;const list=panel.querySelector('.inline-cmt-list');if(list)list.scrollTop=list.scrollHeight;}
 async function submitInlineCmt(videoId,idx){const inp=document.getElementById('cmt-input-'+idx);if(!inp)return;const text=inp.value.trim();if(!text)return;inp.value='';inp.disabled=true;const cmts=await postComment(videoId,text);inp.disabled=false;const panel=document.getElementById('cmt-inline-'+idx);if(panel)renderInlineComments(panel,videoId,idx,cmts);const cc=document.getElementById('cc-'+idx);if(cc)cc.textContent=fmtNum(cmts.length);}
-function initTikTokFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');let cur=-1;function act(i){if(i===cur)return;slides.forEach((sl,idx)=>{const v=sl.querySelector('video');const fr=sl.querySelector('iframe');if(idx===i){if(v&&v.dataset.hls&&!v._hls&&typeof Hls!=='undefined'&&Hls.isSupported()){const hls=new Hls();hls.loadSource(v.dataset.hls);hls.attachMedia(v);hls.on(Hls.Events.MANIFEST_PARSED,()=>v.play().catch(()=>{}));v._hls=hls}else if(v)v.play().catch(()=>{});if(fr&&!fr.src&&fr.dataset.ytSrc)fr.src=fr.dataset.ytSrc;const vid=sl.dataset.vid;if(vid&&!sl._viewed){sl._viewed=true;doInteract(vid,'view').then(j=>{if(j){const vc=document.getElementById('vc-'+idx);if(vc)vc.textContent=fmtNum(j.views);}});}}else{if(v){v.pause();if(v._hls){v._hls.destroy();v._hls=null}}if(fr&&fr.src){try{fr.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');}catch(e){}}}});cur=i}let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect(),ctr=rect.top+rect.height/2;let best=-1,bestD=1e9;slides.forEach((sl,i)=>{const d=Math.abs(sl.getBoundingClientRect().top+sl.getBoundingClientRect().height/2-ctr);if(d<bestD){bestD=d;best=i}});if(best>=0)act(best)},150)});setTimeout(()=>act(0),400);slides.forEach(sl=>{const v=sl.querySelector('video');if(v)v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause()})});const ids=[...slides].map(sl=>sl.dataset.vid||'');loadCounters(ids)}
+function initTikTokFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');let cur=-1;function act(i){if(i===cur)return;slides.forEach((sl,idx)=>{const v=sl.querySelector('video');const fr=sl.querySelector('iframe');if(idx===i){if(v&&v.dataset.hls&&!v._hls&&typeof Hls!=='undefined'&&Hls.isSupported()){const hls=new Hls();hls.loadSource(v.dataset.hls);hls.attachMedia(v);hls.on(Hls.Events.MANIFEST_PARSED,()=>v.play().catch(()=>{}));v._hls=hls}else if(v)v.play().catch(()=>{});if(fr&&!fr.src&&fr.dataset.ytSrc)fr.src=fr.dataset.ytSrc;const vid=sl.dataset.vid;if(vid&&!sl._viewed){sl._viewed=true;doInteract(vid,'view').then(j=>{if(j){const vc=document.getElementById('vc-'+idx);if(vc)vc.textContent=fmtNum(j.views);}});}}else{if(v){v.pause();if(v._hls){v._hls.destroy();v._hls=null}}if(fr&&fr.src)fr.src=''}});cur=i}let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect(),ctr=rect.top+rect.height/2;let best=-1,bestD=1e9;slides.forEach((sl,i)=>{const d=Math.abs(sl.getBoundingClientRect().top+sl.getBoundingClientRect().height/2-ctr);if(d<bestD){bestD=d;best=i}});if(best>=0)act(best)},150)});setTimeout(()=>act(0),400);slides.forEach(sl=>{const v=sl.querySelector('video');if(v)v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause()})});const ids=[...slides].map(sl=>sl.dataset.vid||'');loadCounters(ids)}
 async function openHighlightFeed(league,idx,forceUrl){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';let articles=(_hlLeagueData||{})[league]||[];if(!articles.length){try{articles=await fetch('/api/highlights/'+league).then(r=>r.json())}catch(e){articles=[]}}if(!articles.length){el.innerHTML='<div class="loading">Không có video</div>';return}const vids=[];const results=await Promise.all(articles.map(async(a,i)=>{try{const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link));const v=await r.json();if(v&&v.src)return{...a,...v,_idx:i}}catch(e){}return null}));results.forEach(r=>{if(r)vids.push(r)});vids.sort((a,b)=>a._idx-b._idx);if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return}let ti=vids.findIndex(v=>v._idx===idx);if(ti<0)ti=0;const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;let h=`<button class="back-btn" onclick="switchCat('home')">← Highlight</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((v,i)=>{const isYT=v.type==='youtube',isHLS=!isYT&&v.src?.includes('.m3u8'),poster=v.poster?` poster="${v.poster}"`:'';const vtag=isYT?`<iframe data-yt-src="${v.src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`:isHLS?`<video playsinline preload="none"${poster} data-hls="${v.src}" loop controls></video>`:`<video playsinline preload="none"${poster} loop controls><source src="${v.src}" type="video/mp4"></video>`;const videoId='hl-'+league+'-'+(v.id||v._idx);h+=buildTikTokSlide({vtag,title:v.title,badge:'HL',badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl:v.link||'',extraBtn:`<button class="tiktok-right-btn" onclick="event.stopPropagation();this.closest('.tiktok-slide').classList.toggle('ratio-wide')"><div class="icon">⬜</div><div class="count">16:9</div></button>`});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
-async function openYTShortsFeed(startIdx){
-  showView('view-tiktok');
-  const el=document.getElementById('view-tiktok');
-  el.innerHTML='<div class="loading">Đang tải shorts...</div>';
-  let arts = _shortsData.length ? _shortsData : [];
-  if(!arts.length){try{arts=await fetch('/api/shorts').then(r=>r.json()).catch(()=>[]);}catch(e){arts=[];}}
-  if(!arts.length){el.innerHTML='<div class="loading">Không có shorts</div>';return;}
-  const ordered=startIdx>0?[...arts.slice(startIdx),...arts.slice(0,startIdx)]:arts;
-  let h=`<button class="back-btn" onclick="switchCat('home')">← Shorts</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
-  ordered.forEach((v,i)=>{
-    const id=v.id||'';
-    const src=`https://www.youtube.com/embed/${id}?autoplay=0&rel=0&playsinline=1&mute=1&loop=1&playlist=${id}&enablejsapi=1`;
-    const vtag=`<iframe data-yt-src="${src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`;
-    let badge,badgeClass;
-    if(v.channel==='baosuckhoedoisongboyte'){badge='SKĐS';badgeClass='badge-fpt';}
-    else if(v.channel==='vtvnambo'){badge='VTV Nam Bộ';badgeClass='badge-dantri';}
-    else{badge='Dân trí';badgeClass='badge-vne';}
-    const videoId='yt-'+id;
-    h+=buildTikTokSlide({vtag,title:v.title,badge,badgeClass,videoId,idx:i,total:ordered.length,shareUrl:'https://youtube.com/shorts/'+id});
-  });
-  h+='</div></div>';
-  el.innerHTML=h;
-  initTikTokFeed();
-}
+async function openYTShortsFeed(startIdx){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=_shortsData.length?_shortsData:await fetch('/api/shorts').then(r=>r.json()).catch(()=>[]);if(!arts.length){el.innerHTML='<div class="loading">Không có shorts</div>';return}const ordered=startIdx>0?[...arts.slice(startIdx),...arts.slice(0,startIdx)]:arts;let h=`<button class="back-btn" onclick="switchCat('home')">← Shorts</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((v,i)=>{const id=v.id||'';const src=`https://www.youtube.com/embed/${id}?autoplay=1&rel=0&playsinline=1`;const vtag=`<iframe data-yt-src="${src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`;const badge=v.channel==='baosuckhoedoisongboyte'?'SKĐS':'Dân trí';const videoId='yt-'+id;h+=buildTikTokSlide({vtag,title:v.title,badge,badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl:'https://youtube.com/watch?v='+id});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
 async function openShortAIFeed(startIdx){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';const wall=(await fetch('/api/wall').then(r=>r.json()).catch(()=>({posts:[]}))).posts||[];const vids=wall.filter(p=>p.video);if(!vids.length){el.innerHTML='<div class="loading">Chưa có Short AI</div>';return}const ordered=startIdx>0?[...vids.slice(startIdx),...vids.slice(0,startIdx)]:vids;let h=`<button class="back-btn" onclick="switchCat('home')">← Short AI</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((p,i)=>{const vtag=`<video src="${p.video}" playsinline loop controls></video>`;const videoId='ai-'+(p.id||i);h+=buildTikTokSlide({vtag,title:p.title,badge:'AI',badgeClass:'badge-ai',videoId,idx:i,total:ordered.length,shareUrl:SPACE});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
-async function readArticle(url){
-  showView('view-article');
-  const el=document.getElementById('view-article');
-  el.innerHTML='<div class="loading">Đang tải...</div>';
-  try{const cached=localStorage.getItem('article_'+url);if(cached){const parsed=JSON.parse(cached);if(parsed&&parsed.body&&parsed.body.length){_currentArticle={url,data:parsed};_renderArticle(el,parsed,url);return}}}catch(e){}
-  try{
-    const ctrl=new AbortController();
-    const tid=setTimeout(()=>ctrl.abort(),15000);
-    const r=await fetch('/api/article?url='+encodeURIComponent(url),{signal:ctrl.signal});
-    clearTimeout(tid);
-    const data=await r.json();
-    if(data&&!data.error&&data.body&&data.body.length){
-      _currentArticle={url,data};
-      try{localStorage.setItem('article_'+url,JSON.stringify(data))}catch(e){}
-      _renderArticle(el,data,url);
-      return;
-    }
-  }catch(e){}
-  el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><p>Không đọc được.</p><button class="primary" onclick="window.open('${esc(url)}','_blank')" style="margin-top:8px">📖 Mở bài gốc</button></div>`;
-}
-function _renderArticle(el,data,url){
-  let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${esc(data.title)}</h1>`;
-  if(data.summary)h+=`<div class="article-summary">${esc(data.summary)}</div>`;
-  const seen={};
-  data.body.forEach(b=>{
-    if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;
-    else if(b.type==='img'&&b.src&&!seen[b.src]){seen[b.src]=1;h+=`<img class="article-img" src="${esc(b.src)}" onerror="this.style.display='none'">`}
-    else if(b.type==='heading')h+=`<h2 class="article-h2">${esc(b.text)}</h2>`;
-  });
-  if(data.fallback){
-    h+=`<div style="background:#fff3cd;border:1px solid #ffc107;border-radius:8px;padding:12px;margin:12px 0;font-size:13px;color:#856404">📰 <strong>Nội dung tóm tắt</strong> — Trang nguồn giới hạn truy cập. <a href="${esc(url)}" target="_blank" style="color:#856404;text-decoration:underline">Đọc bài đầy đủ →</a></div>`;
-  }
-  h+=`<div class="article-actions">`;
-  h+=`<button class="primary" onclick="window.open('${esc(url)}','_blank')">📖 Đọc bài gốc</button>`;
-  h+=`<button onclick="rewriteArticle()">🤖 Rewrite AI</button>`;
-  h+=`<button onclick="doShare('${esc(data.title)}','${esc(url)}','${esc(data.og_image||'')}')">📤</button>`;
-  h+=`</div>`;
-  h+=`<div class="article-ai-ask"><h3 style="font-size:14px;color:#5cb87a">🤖 Hỏi AI</h3><textarea id="ask-q" placeholder="Hỏi về bài viết..."></textarea><button onclick="askAI()">Hỏi</button><div id="ask-a" class="article-ai-answer"></div></div></div>`;
-  el.innerHTML=h;
-  window.scrollTo(0,0);
-}
+async function readArticle(url){showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';try{const r=await fetch('/api/article?url='+encodeURIComponent(url));const data=await r.json();if(data&&!data.error&&data.body&&data.body.length){_currentArticle={url,data};let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${esc(data.title)}</h1>`;if(data.summary)h+=`<div class="article-summary">${esc(data.summary)}</div>`;const seen={};data.body.forEach(b=>{if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;else if(b.type==='img'&&b.src&&!seen[b.src]){seen[b.src]=1;h+=`<img class="article-img" src="${esc(b.src)}" onerror="this.style.display='none'">`}else if(b.type==='heading')h+=`<h2 class="article-h2">${esc(b.text)}</h2>`});h+=`<div class="article-actions"><button class="primary" onclick="rewriteArticle()">🤖 Rewrite AI đăng tường</button><button onclick="doShare('${esc(data.title)}','${esc(url)}','${esc(data.og_image||'')}')">📤</button><button onclick="window.open('${esc(url)}','_blank')">🔗 Gốc</button></div><div class="article-ai-ask"><h3 style="font-size:14px;color:#5cb87a">🤖 Hỏi AI</h3><textarea id="ask-q" placeholder="Hỏi về bài viết..."></textarea><button onclick="askAI()">Hỏi</button><div id="ask-a" class="article-ai-answer"></div></div></div>`;el.innerHTML=h;window.scrollTo(0,0);return;}}catch(e){}el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><p>Không đọc được.</p><a href="${esc(url)}" target="_blank" style="color:#5cb87a">Mở gốc →</a></div>`;}
 async function rewriteArticle(){const url=_currentArticle?.url;if(!url)return;toast('⏳ Đang rewrite...');try{const r=await fetch('/api/rewrite_share',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url,context:document.querySelector('.article-view')?.innerText?.slice(0,14000)||''})});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error);toast('✅ Đã đăng Tường AI!');if(j.post)prependWallPost(j.post);}catch(e){toast('❌ '+e.message)}}
 async function rewriteUrl(){const url=document.getElementById('url-input')?.value.trim();if(!url)return alert('Dán URL');toast('⏳ Đang rewrite...');try{const r=await fetch('/api/url_wall',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url})});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error);toast('✅ Đã đăng!');document.getElementById('url-input').value='';if(j.post)prependWallPost(j.post);}catch(e){toast('❌ '+e.message)}}
 async function askAI(){const q=document.getElementById('ask-q')?.value.trim();if(!q)return alert('Nhập câu hỏi');const a=document.getElementById('ask-a');a.textContent='Đang hỏi...';try{const r=await fetch('/api/article/ask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:_currentArticle?.url||'',question:q,context:document.querySelector('.article-view')?.innerText?.slice(0,12000)||''})});const j=await r.json();a.textContent=j.answer||'Không trả lời được';}catch(e){a.textContent='Lỗi: '+e.message}}
@@ -526,20 +297,29 @@ async function readWallPost(i){const p=_wallPosts[i];if(!p)return;showView('view
   if(images.length > 0){
     imgGallery = '<div class="article-image-gallery">';
     images.forEach((imgUrl, imgIdx) => {
-      if(imgIdx === 0){imgGallery += `<img class="article-img article-hero-img" src="${esc(imgUrl)}" onerror="this.style.display='none" loading="eager">`;}
-      else{if(imgIdx === 1) imgGallery += '<div class="gallery-thumbs">';imgGallery += `<div class="gallery-thumb"><img src="${esc(imgUrl)}" onerror="this.parentElement.style.display='none'" loading="lazy"></div>`;}
+      if(imgIdx === 0){
+        imgGallery += `<img class="article-img article-hero-img" src="${esc(imgUrl)}" onerror="this.style.display='none" loading="eager">`;
+      } else {
+        if(imgIdx === 1) imgGallery += '<div class="gallery-thumbs">';
+        imgGallery += `<div class="gallery-thumb"><img src="${esc(imgUrl)}" onerror="this.parentElement.style.display='none'" loading="lazy"></div>`;
+      }
     });
     if(images.length > 1) imgGallery += '</div>';
     imgGallery += '</div>';
   }
   const hasVideo = p.video && p.video.length > 0;
-  const voiceOptions = [{id:'hoaimy',label:'🎙️ Nữ — Hoài My'},{id:'namminh',label:'🎙️ Nam — Nam Minh'}];
+  const voiceOptions = [
+    {id:'hoaimy', label:'🎙️ Nữ — Hoài My'},
+    {id:'namminh', label:'🎙️ Nam — Nam Minh'},
+  ];
   let voiceSelector = '';
   if(!hasVideo){
     voiceSelector = `<div class="tts-selector"><div class="tts-selector-label">🎙️ Chọn giọng đọc:</div><div class="tts-voice-btns">`;
-    voiceOptions.forEach(v=>{voiceSelector+=`<button class="tts-voice-btn" onclick="document.querySelectorAll('.tts-voice-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');document.getElementById('selected-voice').value='${v.id}'">${v.label}</button>`;});
-    voiceSelector+=`</div><div class="tts-speed-row"><span>Tốc độ:</span><select id="selected-speed"><option value="1.0">1.0x</option><option value="1.2" selected>1.2x</option><option value="1.5">1.5x</option><option value="0.8">0.8x</option></select></div>`;
-    voiceSelector+=`<input type="hidden" id="selected-voice" value="hoaimy"></div>`;
+    voiceOptions.forEach(v=>{
+      voiceSelector += `<button class="tts-voice-btn" onclick="document.querySelectorAll('.tts-voice-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');document.getElementById('selected-voice').value='${v.id}'">${v.label}</button>`;
+    });
+    voiceSelector += `</div><div class="tts-speed-row"><span>Tốc độ:</span><select id="selected-speed"><option value="1.0">1.0x — Bình thường</option><option value="1.2" selected>1.2x — Nhanh</option><option value="1.5">1.5x — Rất nhanh</option><option value="0.8">0.8x — Chậm</option></select></div>`;
+    voiceSelector += `<input type="hidden" id="selected-voice" value="hoaimy"></div>`;
   }
   document.getElementById('view-article').innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><span class="badge badge-ai">AI</span><h1 class="article-title">${esc(p.title)}</h1>${imgGallery}<p class="article-p" style="white-space:pre-wrap">${esc(p.text)}</p>${hasVideo?`<video class="article-img" src="${esc(p.video)}" controls playsinline style="max-height:400px"></video>`:''}<div class="article-actions">${hasVideo?`<button onclick="openShortAIFeed(${i})">🎬 Xem Short</button>${voiceSelector}<button class="primary" onclick="makeShortVideo('${esc(p.id)}',this,document.getElementById('selected-voice')?.value,parseFloat(document.getElementById('selected-speed')?.value)||1.2)">🔄 Tạo lại Short</button>`:`${voiceSelector}<button class="primary" onclick="makeShortVideo('${esc(p.id)}',this,document.getElementById('selected-voice')?.value,parseFloat(document.getElementById('selected-speed')?.value)||1.2)">🎬 Tạo Video Shorts</button>`}<button onclick="doShare('${esc(p.title)}','${SPACE}','${esc(p.img||'')}')">📤</button></div></div>`;
   const firstVoiceBtn = document.querySelector('.tts-voice-btn');
@@ -548,6 +328,46 @@ async function readWallPost(i){const p=_wallPosts[i];if(!p)return;showView('view
 async function loadNewsTab(){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';try{const r=await fetch('/api/homepage');const news=await r.json();if(!news.length){el.innerHTML='<div class="loading">Không có tin</div>';return}const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a)});let h='';for(const[g,arts]of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{h+=`<div class="card" onclick="readArticle('${esc(a.link)}')"><div class="card-img">${a.img?`<img src="${a.img}" loading="lazy">`:''}</div><div class="card-body"><span class="badge badge-vne">${esc(a.source||'VnE')}</span><div class="card-title">${esc(a.title)}</div></div></div>`});h+='</div>'}el.innerHTML=h}catch(e){el.innerHTML='<div class="loading">Lỗi</div>'}}
 async function loadCat(id){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=await fetch('/api/category/'+id).then(r=>r.json()).catch(()=>[]);if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return}let h='<div class="grid">';arts.forEach(a=>{h+=`<div class="card" onclick="readArticle('${esc(a.link)}')"><div class="card-img">${a.img?`<img src="${a.img}" loading="lazy">`:''}</div><div class="card-body"><span class="badge badge-vne">${esc(a.source||'')}</span><div class="card-title">${esc(a.title)}</div></div></div>`});h+='</div>';el.innerHTML=h}
 fetch('/api/storage_status').then(r=>r.json()).then(j=>{if(!j.persistent){const home=document.getElementById('view-home');if(home){const w=document.createElement('div');w.className='storage-warn';w.innerHTML='⚠️ Persistent Storage chưa bật.';home.prepend(w)}}}).catch(()=>{});
-(function(){try{var hash=window.location.hash;if(hash&&hash.length>1){var articleUrl=decodeURIComponent(hash.substring(1));if(articleUrl.startsWith('http')){history.replaceState(null,'',window.location.pathname);if(typeof readArticle==='function')readArticle(articleUrl);}}}catch(e){}})();
-(function(){try{const pa=localStorage.getItem('pending_article');const pv=localStorage.getItem('pending_video');if(pa){localStorage.removeItem('pending_article');if(typeof readArticle==='function')readArticle(pa);}if(pv){localStorage.removeItem('pending_video');try{const v=JSON.parse(pv);if(v&&v.url)window.open(v.url,'_blank');}catch(e){}}}catch(e){}})();
-if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',function(){if(typeof loadHome==='function')loadHome();});}else{if(typeof loadHome==='function')loadHome();}
+
+(function(){
+  try{
+    var hash = window.location.hash;
+    if(hash && hash.length > 1){
+      var articleUrl = decodeURIComponent(hash.substring(1));
+      if(articleUrl.startsWith('http')){
+        history.replaceState(null, '', window.location.pathname);
+        setTimeout(function(){
+          if(typeof readArticle==='function') readArticle(articleUrl);
+        }, 1500);
+      }
+    }
+  }catch(e){}
+})();
+
+(function(){
+  try{
+    const pa=localStorage.getItem('pending_article');
+    const pv=localStorage.getItem('pending_video');
+    if(pa){
+      localStorage.removeItem('pending_article');
+      setTimeout(()=>{
+        if(typeof readArticle==='function') readArticle(pa);
+      },1500);
+    }
+    if(pv){
+      localStorage.removeItem('pending_video');
+      try{
+        const v=JSON.parse(pv);
+        if(v&&v.url) setTimeout(()=>{window.open(v.url,'_blank')},1500);
+      }catch(e){}
+    }
+  }catch(e){}
+})();
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', function() {
+    if (typeof loadHome === 'function') loadHome();
+  });
+} else {
+  if (typeof loadHome === 'function') loadHome();
+}