Complete WC Shorts TikTok-style slideshow with autoplay, title overlay, and smooth scroll

static/wc2026_v2.js

@@ -3,46 +3,10 @@ let _wc2026Data=null;let _wcRefreshInterval=null;
 const WC_TEAMS={'Mexico':'🇲🇽 Mexico','Colombia':'🇨🇴 Colombia','USA':'🇺🇸 Mỹ','United States':'🇺🇸 Mỹ','Brazil':'🇧🇷 Brazil','Argentina':'🇦🇷 Argentina','Germany':'🇩🇪 Đức','France':'🇫🇷 Pháp','Spain':'🇪🇸 Tây Ban Nha','England':'🏴󠁧󠁢󠁥󠁮󠁧󠁿 Anh','Portugal':'🇵🇹 Bồ Đào Nha','Netherlands':'🇳🇱 Hà Lan','Italy':'🇮🇹 Ý','Belgium':'🇧🇪 Bỉ','Croatia':'🇭🇷 Croatia','Uruguay':'🇺🇾 Uruguay','Japan':'🇯🇵 Nhật Bản','South Korea':'🇰🇷 Hàn Quốc','Korea Republic':'🇰🇷 Hàn Quốc','Australia':'🇦🇺 Úc','Saudi Arabia':'🇸🇦 Ả Rập Xê Út','Iran':'🇮🇷 Iran','Qatar':'🇶🇦 Qatar','Canada':'🇨🇦 Canada','Morocco':'🇲🇦 Morocco','Senegal':'🇸🇳 Senegal','Ecuador':'🇪🇨 Ecuador','Serbia':'🇷🇸 Serbia','Switzerland':'🇨🇭 Thụy Sĩ','Denmark':'🇩🇰 Đan Mạch','Poland':'🇵🇱 Ba Lan','Turkey':'🇹🇷 Thổ Nhĩ Kỳ','Türkiye':'🇹🇷 Thổ Nhĩ Kỳ','Ukraine':'🇺🇦 Ukraine','Egypt':'🇪🇬 Ai Cập','Nigeria':'🇳🇬 Nigeria','Cameroon':'🇨🇲 Cameroon','Ghana':'🇬🇭 Ghana','Tunisia':'🇹🇳 Tunisia','Algeria':'🇩🇿 Algeria','South Africa':'🇿🇦 Nam Phi','Indonesia':'🇮🇩 Indonesia','Vietnam':'🇻🇳 Việt Nam','China PR':'🇨🇳 Trung Quốc','New Zealand':'🇳🇿 New Zealand','Panama':'🇵🇦 Panama','Costa Rica':'🇨🇷 Costa Rica','Jamaica':'🇯🇲 Jamaica','Honduras':'🇭🇳 Honduras','Paraguay':'🇵🇾 Paraguay','Bolivia':'🇧🇴 Bolivia','Chile':'🇨🇱 Chile','Peru':'🇵🇪 Peru','Venezuela':'🇻🇪 Venezuela','Norway':'🇳🇴 Na Uy','Sweden':'🇸🇪 Thụy Điển','Austria':'🇦🇹 Áo','Scotland':'🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scotland','Wales':'🏴󠁧󠁢󠁷󠁬󠁳󠁿 Xứ Wales','Ireland':'🇮🇪 Ireland','Romania':'🇷🇴 Romania','Hungary':'🇭🇺 Hungary','Greece':'🇬🇷 Hy Lạp','Uzbekistan':'🇺🇿 Uzbekistan','Iraq':'🇮🇶 Iraq','TBD':'🏳️ TBD'};
 function _t(n){return WC_TEAMS[n]||WC_TEAMS[(n||'').trim()]||'🏴 '+n;}
 
-const WC_CSS=`<style>
-.wc-bxh{max-height:460px;overflow-y:auto;padding:2px;display:block}
-.wc-bxh,.wc-bxh *{box-sizing:border-box!important;float:none!important;max-width:100%!important}
-.wc-bxh script,.wc-bxh style,.wc-bxh ins,.wc-bxh iframe,.wc-bxh .info,.wc-bxh .btns,.wc-bxh .form{display:none!important}
-.wc-bxh .title-table,.wc-bxh h6{display:block!important;background:#0b1a2a!important;color:#f0c040!important;font-size:11px!important;font-weight:800!important;padding:6px 8px!important;margin:8px 0 0!important;border-radius:5px 5px 0 0!important;border-bottom:1px solid #1a3a5a!important}
-.wc-bxh .bxh-head{display:flex!important;align-items:center!important;padding:4px 6px!important;background:#0a1320!important;color:#6a9fca!important;font-size:9px!important;font-weight:700!important;border-bottom:1px solid #1a3a5a!important}
-.wc-bxh .bxh-head .h-team{flex:1!important;text-align:left!important}
-.wc-bxh .bxh-head .h-stat{flex:0 0 26px!important;text-align:center!important}
-.wc-bxh .bxh-head .h-pts{flex:0 0 30px!important;text-align:center!important;color:#f0c040!important}
-.wc-bxh .item{display:flex!important;align-items:center!important;padding:5px 6px!important;border-bottom:1px solid #10202f!important;background:transparent!important}
-.wc-bxh .item:nth-child(even){background:#0a1320!important}
-.wc-bxh .item .team{flex:1!important;display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;text-align:left!important}
-.wc-bxh .item .team>span{flex:0 0 16px!important;color:#6a9fca!important;font-size:10px!important;text-align:center!important}
-.wc-bxh .item .team a{flex:1!important;display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:#eee!important;text-decoration:none!important}
-.wc-bxh .item .team a p{font-size:11px!important;color:#eee!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important}
-.wc-bxh .item .copy{display:flex!important;align-items:center!important;flex:0 0 auto!important}
-.wc-bxh .item .copy>p{flex:0 0 26px!important;text-align:center!important;font-size:10px!important;color:#ccc!important;margin:0!important}
-.wc-bxh .item .copy>p:last-of-type,.wc-bxh .item .copy>p:nth-last-child(2){flex:0 0 30px!important}
-.wc-bxh .item .copy>p strong{color:#f0c040!important;font-weight:800!important}
-.wc-bxh img{width:18px!important;height:18px!important;object-fit:contain!important;vertical-align:middle!important;display:inline-block!important;flex:0 0 18px!important}
-.wc-bxh strong{color:#f0c040!important}
-.wc-bxh a{color:#8ab4d8!important;text-decoration:none!important}
-.wc-bxh table{width:100%!important;border-collapse:collapse!important;font-size:11px!important;display:table!important}
-.wc-bxh th{background:#0b1a2a!important;color:#6a9fca!important;padding:5px 3px!important;font-size:9px!important;text-align:center!important}
-.wc-bxh td{padding:4px 3px!important;border-bottom:1px solid #0d1a2a!important;font-size:10px!important;color:#ddd!important}
-</style>`;
-
 function switchWCTab(tab){
   document.querySelectorAll('.wc-tab').forEach(t=>t.classList.remove('active'));
-  const tabMap = {
-    'news': 'Tin',
-    'fixtures': 'Lịch',
-    'standings': 'BXH',
-    'highlights': 'Highlight',
-    'shorts': 'Shorts',
-    'stats': 'Thống'
-  };
-  document.querySelectorAll('.wc-tab').forEach(t=>{
-    if(tabMap[tab] && t.textContent.includes(tabMap[tab])) t.classList.add('active');
-  });
+  const tabMap = {'news':'Tin','fixtures':'Lịch','standings':'BXH','highlights':'Highlight','shorts':'Shorts','stats':'Thống'};
+  document.querySelectorAll('.wc-tab').forEach(t=>{if(tabMap[tab]&&t.textContent.includes(tabMap[tab]))t.classList.add('active');});
   const el=document.getElementById('wc-content');if(!el)return;
   if(tab==='news')renderWCNews(el);
   else if(tab==='fixtures')renderWCFixtures(el);
@@ -90,34 +54,18 @@ function renderWCStandings(el){
   if(!_wc2026Data){el.innerHTML='<div class="loading">Đang tải...</div>';return;}
   const d=_wc2026Data.standings||{};
   if(d.html&&d.html.length>100){
-    el.innerHTML=WC_CSS+'<div class="wc-bxh">'+d.html+'</div>';
-    const box=el.querySelector('.wc-bxh');
-    if(box){
-      box.querySelectorAll('.title-table, h6').forEach(t=>{
-        if(t.nextElementSibling && t.nextElementSibling.classList.contains('bxh-head'))return;
-        const head=document.createElement('div');
-        head.className='bxh-head';
-        head.innerHTML='<span class="h-team">Đội</span><span class="h-stat">Tr</span><span class="h-stat">T</span><span class="h-stat">H</span><span class="h-stat">B</span><span class="h-stat">BT</span><span class="h-stat">BB</span><span class="h-pts">HS</span><span class="h-pts">Đ</span>';
-        t.insertAdjacentElement('afterend',head);
-      });
-    }
+    el.innerHTML='<div class="wc-bxh">'+d.html+'</div>';
     el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
     return;
   }
-  const fx=_wc2026Data.fixtures||{};const matches=fx.matches||[];
-  const gm=matches.filter(m=>m.group&&m.group.toLowerCase().includes('group'));
-  if(!gm.length){el.innerHTML='<div class="loading">BXH cập nhật khi giải bắt đầu 11/06/2026<br><small style="color:#6a9fca">🔴 Livescore tự động</small></div>';return;}
-  const groups={};gm.forEach(m=>{const g=m.group;if(!groups[g])groups[g]={};[m.home,m.away].forEach(t=>{if(!groups[g][t])groups[g][t]={p:0,w:0,d:0,l:0,gf:0,ga:0,pts:0};});if(m.home_score!=null&&m.away_score!=null){const hs=+m.home_score,as=+m.away_score;if(!isNaN(hs)&&!isNaN(as)){groups[g][m.home].p++;groups[g][m.away].p++;groups[g][m.home].gf+=hs;groups[g][m.home].ga+=as;groups[g][m.away].gf+=as;groups[g][m.away].ga+=hs;if(hs>as){groups[g][m.home].w++;groups[g][m.home].pts+=3;groups[g][m.away].l++;}else if(hs<as){groups[g][m.away].w++;groups[g][m.away].pts+=3;groups[g][m.home].l++;}else{groups[g][m.home].d++;groups[g][m.home].pts++;groups[g][m.away].d++;groups[g][m.away].pts++;}}}});
-  let h='<div style="max-height:450px;overflow-y:auto;padding:2px"><div style="font-size:10px;color:#6a9fca;text-align:center;padding:3px">🏆 BXH World Cup 2026 · 🔴 Livescore</div>';
-  Object.keys(groups).sort().forEach(g=>{const teams=Object.entries(groups[g]).map(([n,s])=>({name:n,...s,gd:s.gf-s.ga})).sort((a,b)=>b.pts-a.pts||b.gd-a.gd);h+=`<div style="font-size:11px;font-weight:800;color:#8ab4d8;padding:6px 4px 3px;margin-top:4px;border-bottom:1px solid #1a3a5a">${esc(g)}</div><table style="width:100%;border-collapse:collapse;font-size:10px;margin:2px 0"><tr style="background:#0b1a2a"><th style="text-align:left;padding:4px;color:#6a9fca">Đội</th><th style="color:#6a9fca;padding:3px">Tr</th><th style="color:#6a9fca;padding:3px">T</th><th style="color:#6a9fca;padding:3px">H</th><th style="color:#6a9fca;padding:3px">B</th><th style="color:#6a9fca;padding:3px">HS</th><th style="color:#f0c040;padding:3px;font-weight:800">Đ</th></tr>`;teams.forEach((t,i)=>{h+=`<tr style="background:${i<2?'#0a1a10':'transparent'}"><td style="padding:3px;color:#eee;white-space:nowrap">${_t(t.name)}</td><td style="text-align:center;padding:3px;color:#999">${t.p}</td><td style="text-align:center;color:#4ade80">${t.w}</td><td style="text-align:center;color:#fbbf24">${t.d}</td><td style="text-align:center;color:#f87171">${t.l}</td><td style="text-align:center;color:${t.gd>=0?'#4ade80':'#f87171'}">${t.gd>0?'+':''}${t.gd}</td><td style="text-align:center;color:#f0c040;font-weight:800">${t.pts}</td></tr>`;});h+='</table>';});
-  h+='</div>';el.innerHTML=h;
+  el.innerHTML='<div class="loading">BXH cập nhật khi giải bắt đầu 11/06/2026<br><small style="color:#6a9fca">🔴 Livescore tự động</small></div>';
 }
 
 // === STATS ===
 function renderWCStats(el){
   if(!_wc2026Data){el.innerHTML='<div class="loading">Đang tải...</div>';return;}
   const d=_wc2026Data.stats||{};
-  if(d.html&&d.html.length>100){el.innerHTML=WC_CSS+'<div class="wc-bxh">'+d.html+'</div>';el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));}
+  if(d.html&&d.html.length>100){el.innerHTML='<div class="wc-bxh">'+d.html+'</div>';el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));}
   else el.innerHTML='<div class="loading">Thống kê cập nhật khi giải bắt đầu<br><small style="color:#6a9fca">Vua phá lưới · Kiến tạo · Thẻ phạt</small></div>';
 }
 
@@ -130,60 +78,87 @@ async function renderWCHighlights(el){
     const seen = new Map();
     wcVids.forEach((v,i)=>{if(!seen.has(v.link)) seen.set(v.link, {...v, _li: seen.size});});
     wcVids = Array.from(seen.values());
-    if(!wcVids.length){
-      el.innerHTML='<div class="loading">Chưa có highlight World Cup<br><small style="color:#6a9fca">Highlight sẽ xuất hiện khi giải diễn ra</small></div>';
-      return;
-    }
+    if(!wcVids.length){el.innerHTML='<div class="loading">Chưa có highlight World Cup</div>';return;}
     let h='<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:450px;overflow-y:auto;padding:4px">';
     wcVids.forEach((v,i)=>{
       h+=`<div style="cursor:pointer;border-radius:6px;overflow:hidden;background:#0a1520" onclick="openHighlightFeed('world-cup',${v._li},'${esc(v.link)}')">`;
       h+=`<div style="position:relative;aspect-ratio:16/9;background:#1a2a3a">${v.img?`<img src="${esc(v.img)}" loading="lazy" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none'">`:''}<div class="card-play">▶</div></div>`;
-      h+=`<div style="padding:4px 6px"><span style="font-size:8px;color:#f0c040">🌍 World Cup</span><div style="font-size:10px;color:#ccc;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">${esc(v.title)}</div></div>`;
-      h+='</div>';
+      h+=`<div style="padding:4px 6px"><span style="font-size:8px;color:#f0c040">🌍 World Cup</span><div style="font-size:10px;color:#ccc;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">${esc(v.title)}</div></div></div>`;
     });
     h+='</div>';el.innerHTML=h;
-  }catch(e){
-    el.innerHTML='<div class="loading">Lỗi tải highlight: '+esc(e.message)+'</div>';
-  }
+  }catch(e){el.innerHTML='<div class="loading">Lỗi tải highlight</div>';}
 }
 
-// === WC SHORTS TAB — VTV Nam Bộ + WC moments shorts ===
+// ============================================================
+// === WC SHORTS — TikTok-style vertical slideshow ===
+// ============================================================
+
+// Inject WC Shorts CSS
+(function(){
+  if(document.getElementById('wc-shorts-css')) return;
+  const style = document.createElement('style');
+  style.id = 'wc-shorts-css';
+  style.textContent = `
+    .wc-shorts-container{width:100%;height:72vh;max-height:620px;min-height:380px;background:#000;border-radius:8px;overflow:hidden;position:relative}
+    .wc-shorts-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}
+    .wc-shorts-feed::-webkit-scrollbar{display:none}
+    .wc-short-slide{height:72vh;max-height:620px;min-height:380px;scroll-snap-align:start;position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
+    .wc-short-slide iframe{width:100%;height:100%;border:none;background:#000}
+    .wc-short-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 14px 16px;background:linear-gradient(transparent 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.92) 100%);z-index:3;pointer-events:none}
+    .wc-short-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;color:#fff;background:#0b6bcb;margin-bottom:6px}
+    .wc-short-title{font-size:13px;color:#fff;font-weight:700;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+    .wc-short-counter{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);font-size:10px;padding:3px 9px;border-radius:10px;color:#fff;z-index:4;font-weight:600;backdrop-filter:blur(4px)}
+    .wc-short-actions{position:absolute;right:10px;bottom:80px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:5}
+    .wc-short-action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:#fff;cursor:pointer;font-size:10px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
+    .wc-short-action-btn .icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;backdrop-filter:blur(4px);transition:background .2s}
+    .wc-short-action-btn:hover .icon{background:rgba(255,255,255,.28)}
+    .wc-short-action-btn .count{font-size:10px;color:#eee;font-weight:600}
+    .wc-shorts-empty{text-align:center;padding:40px 20px;color:#888;font-size:13px}
+    .wc-shorts-empty .icon{font-size:40px;margin-bottom:10px}
+    .wc-shorts-empty button{background:#0b6bcb;border:none;color:#fff;padding:10px 24px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;margin-top:16px}
+    /* Horizontal slider on WC tab */
+    .wc-shorts-slider{display:flex;overflow-x:auto;gap:8px;padding:4px 4px 8px;scrollbar-width:none}
+    .wc-shorts-slider::-webkit-scrollbar{display:none}
+    .wc-shorts-slider-item{flex:0 0 120px;cursor:pointer;border-radius:8px;overflow:hidden;background:#0a1520;border:1px solid #1a3a5a;transition:border-color .2s,transform .2s}
+    .wc-shorts-slider-item:hover{border-color:#0b6bcb;transform:scale(1.03)}
+    .wc-shorts-slider-thumb{position:relative;width:100%;aspect-ratio:9/16;background:#1a2a3a;overflow:hidden}
+    .wc-shorts-slider-thumb img{width:100%;height:100%;object-fit:cover}
+    .wc-shorts-slider-thumb .play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
+    .wc-shorts-slider-info{padding:4px 5px}
+    .wc-shorts-slider-info .badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;color:#fff;background:#0b6bcb;display:inline-block;margin-bottom:2px}
+    .wc-shorts-slider-info .title{font-size:9px;color:#ccc;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+    .wc-shorts-view-all{flex:0 0 100px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b2e4a,#1a3a5a);border-radius:8px;cursor:pointer;border:1px dashed #2a5a8a;color:#8ab4d8;font-size:11px;font-weight:700;text-align:center;padding:8px;flex-shrink:0;transition:border-color .2s}
+    .wc-shorts-view-all:hover{border-color:#0b6bcb;color:#fff}
+  `;
+  document.head.appendChild(style);
+})();
+
+// === WC SHORTS TAB (horizontal slider in WC section) ===
 async function renderWCShorts(el){
-  el.innerHTML='<div class="loading" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px"><div class="vtv-spinner" style="width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite"></div>Đang tải shorts...</div>';
+  el.innerHTML='<div class="loading" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px"><div style="width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite"></div>Đang tải shorts...</div>';
 
-  // Fetch VTV Nam Bộ shorts from dedicated endpoint
   let wcShorts = [];
+
+  // Fetch from dedicated VTV Nam Bộ endpoint
   try {
-    const r = await fetch('/api/shorts/vtvnamo?count=30', {signal: AbortSignal.timeout(15000)});
+    const r = await fetch('/api/shorts/vtvnamo?count=50', {signal: AbortSignal.timeout(15000)});
     wcShorts = await r.json() || [];
-  } catch(e) {
-    console.warn('VTV shorts fetch failed:', e);
-  }
+  } catch(e) { console.warn('VTV shorts fetch failed:', e); }
 
-  // Also check _shortsData for vtvnambo channel
+  // Also from _shortsData
   if(typeof _shortsData !== 'undefined' && _shortsData.length){
     const existingIds = new Set(wcShorts.map(s=>s.id));
-    _shortsData.forEach(s=>{
-      if(s.channel === 'vtvnambo' && !existingIds.has(s.id)){
-        wcShorts.push(s);
-      }
-    });
+    _shortsData.forEach(s=>{if(s.channel==='vtvnambo'&&!existingIds.has(s.id)){wcShorts.push(s);}});
   }
 
-  // Also check _wcShortsData if available
+  // Also from _wcShortsData
   if(typeof _wcShortsData !== 'undefined' && _wcShortsData.length){
     const existingIds = new Set(wcShorts.map(s=>s.id));
     _wcShortsData.forEach(s=>{if(!existingIds.has(s.id)) wcShorts.push(s);});
   }
 
   if(!wcShorts.length){
-    el.innerHTML=`<div style="text-align:center;padding:30px 16px;color:#888;font-size:12px">
-      <div style="font-size:32px;margin-bottom:8px">📱</div>
-      <div style="color:#ccc;font-size:14px;font-weight:700;margin-bottom:6px">Shorts World Cup</div>
-      <div style="margin-bottom:12px">VTV Nam Bộ & khoảnh khắc World Cup</div>
-      <div style="font-size:11px;color:#6a9fca;margin-bottom:16px">Đang cập nhật shorts từ YouTube...</div>
-      <button onclick="openWCShortsFeed(0)" style="background:#0b6bcb;border:none;color:#fff;padding:8px 20px;border-radius:16px;font-size:12px;font-weight:700;cursor:pointer">📱 Xem Shorts</button>
-    </div>`;
+    el.innerHTML=`<div class="wc-shorts-empty"><div class="icon">📱</div><div style="color:#ccc;font-size:14px;font-weight:700;margin-bottom:6px">Shorts World Cup</div><div>VTV Nam Bộ & khoảnh khắc World Cup</div><div style="font-size:11px;color:#6a9fca;margin-top:4px">Đang cập nhật shorts từ YouTube...</div><button onclick="openWCShortsFeed(0)">📱 Xem Shorts</button></div>`;
     return;
   }
 
@@ -191,73 +166,60 @@ async function renderWCShorts(el){
   const seen = new Set();
   wcShorts = wcShorts.filter(s=>{if(seen.has(s.id)) return false; seen.add(s.id); return true;});
 
-  // Render horizontal slider of shorts
+  // Store globally
+  _wcShortsData = wcShorts;
+
+  // Render horizontal slider
   let h = `<div style="padding:4px">
     <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px">
       <span style="font-size:13px;font-weight:800;color:#f0c040">📱 Shorts World Cup</span>
-      <span style="font-size:10px;color:#8ab4d8;cursor:pointer" onclick="openWCShortsFeed(0)">Xem tất cả →</span>
+      <span style="font-size:10px;color:#8ab4d8;cursor:pointer;font-weight:600" onclick="openWCShortsFeed(0)">Xem tất cả →</span>
     </div>
-    <div style="display:flex;overflow-x:auto;gap:8px;padding:0 4px 8px;scrollbar-width:none" id="wc-shorts-track">`;
-
-  wcShorts.slice(0,12).forEach((s,i)=>{
-    const badge = s.channel==='vtvnambo' ? 'VTV Nam Bộ' : '⚽ WC';
-    const badgeBg = s.channel==='vtvnambo' ? '#0b6bcb' : '#f26522';
-    h += `<div style="flex:0 0 120px;cursor:pointer;border-radius:8px;overflow:hidden;background:#0a1520;border:1px solid #1a3a5a;transition:border-color .2s" onclick="openWCShortsFeed(${i})">`;
-    h += `<div style="position:relative;width:100%;aspect-ratio:9/16;background:#1a2a3a;overflow:hidden">`;
-    h += s.img ? `<img src="${esc(s.img)}" loading="lazy" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none'">` : '';
-    h += `<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px">▶</div>`;
-    h += `</div>`;
-    h += `<div style="padding:4px 5px"><span style="font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;color:#fff;background:${badgeBg}">${badge}</span><div style="font-size:9px;color:#ccc;line-height:1.2;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">${esc(s.title)}</div></div>`;
+    <div class="wc-shorts-slider">`;
+
+  wcShorts.slice(0,15).forEach((s,i)=>{
+    h += `<div class="wc-shorts-slider-item" onclick="openWCShortsFeed(${i})">`;
+    h += `<div class="wc-shorts-slider-thumb">`;
+    h += s.img ? `<img src="${esc(s.img)}" loading="lazy" onerror="this.style.display='none'">` : '';
+    h += `<div class="play-overlay">▶</div></div>`;
+    h += `<div class="wc-shorts-slider-info"><span class="badge">VTV Nam Bộ</span><div class="title">${esc(s.title)}</div></div>`;
     h += `</div>`;
   });
 
-  // "View all" card
-  h += `<div style="flex:0 0 100px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b2e4a,#1a3a5a);border-radius:8px;cursor:pointer;border:1px dashed #2a5a8a;color:#8ab4d8;font-size:11px;font-weight:700;text-align:center;padding:8px;flex-shrink:0" onclick="openWCShortsFeed(0)">📱 Xem tất cả<br><small style="font-size:9px;color:#6a9fca">${wcShorts.length} shorts</small></div>`;
-
+  h += `<div class="wc-shorts-view-all" onclick="openWCShortsFeed(0)">📱 Xem tất cả<br><small style="font-size:9px;color:#6a9fca">${wcShorts.length} shorts</small></div>`;
   h += `</div></div>`;
   el.innerHTML = h;
 }
 
-// === WC SHORTS TIKTOK FEED — full-screen vertical scroll, continuous autoplay ===
+// === FULL-SCREEN TIKTOK FEED ===
 async function openWCShortsFeed(startIdx){
   showView('view-tiktok');
   const el = document.getElementById('view-tiktok');
-  el.innerHTML = '<div class="loading">Đang tải shorts...</div>';
+  el.innerHTML = '<div class="loading" style="display:flex;flex-direction:column;align-items:center;gap:8px"><div style="width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite"></div>Đang tải shorts...</div>';
 
-  // Gather shorts from all available sources
-  let wcShorts = [];
+  let wcShorts = _wcShortsData || [];
 
-  // 1. Fetch from dedicated VTV Nam Bộ endpoint (most reliable)
-  try {
-    const r = await fetch('/api/shorts/vtvnamo?count=50', {signal: AbortSignal.timeout(15000)});
-    const vtvShorts = await r.json() || [];
-    wcShorts.push(...vtvShorts);
-  } catch(e) {
-    console.warn('VTV endpoint failed:', e);
+  // If no cached data, fetch fresh
+  if(!wcShorts.length){
+    try {
+      const r = await fetch('/api/shorts/vtvnamo?count=50', {signal: AbortSignal.timeout(15000)});
+      wcShorts = await r.json() || [];
+    } catch(e) { console.warn('VTV fetch failed:', e); }
   }
 
-  // 2. From _shortsData (vtvnambo channel)
-  if(typeof _shortsData !== 'undefined' && _shortsData.length){
-    _shortsData.forEach(s=>{
-      if(s.channel === 'vtvnambo') wcShorts.push(s);
-    });
-  }
-  // 3. From _wcShortsData
-  if(typeof _wcShortsData !== 'undefined' && _wcShortsData.length){
-    const existingIds = new Set(wcShorts.map(s=>s.id));
-    _wcShortsData.forEach(s=>{if(!existingIds.has(s.id)) wcShorts.push(s);});
+  // Fallback to _shortsData
+  if(!wcShorts.length && typeof _shortsData !== 'undefined' && _shortsData.length){
+    wcShorts = _shortsData.filter(s => s.channel === 'vtvnambo');
   }
-  // 4. Fetch fresh from general shorts endpoint as last resort
+
+  // Fallback to general shorts
   if(!wcShorts.length){
     try{
       const r = await fetch('/api/shorts');
-      const allShorts = await r.json() || [];
-      wcShorts = allShorts.filter(s => s.channel === 'vtvnambo');
-      // Last resort: just show all shorts
-      if(!wcShorts.length) wcShorts = allShorts;
-    }catch(e){
-      wcShorts = [];
-    }
+      const all = await r.json() || [];
+      wcShorts = all.filter(s => s.channel === 'vtvnambo');
+      if(!wcShorts.length) wcShorts = all;
+    }catch(e){ wcShorts = []; }
   }
 
   // Deduplicate
@@ -265,42 +227,64 @@ async function openWCShortsFeed(startIdx){
   wcShorts = wcShorts.filter(s=>{if(seen.has(s.id)) return false; seen.add(s.id); return true;});
 
   if(!wcShorts.length){
-    el.innerHTML = '<div class="loading">Chưa có shorts</div>';
+    el.innerHTML = '<div class="wc-shorts-empty"><div class="icon">📱</div><div>Chưa có shorts</div></div>';
     return;
   }
 
-  // Store for reuse
-  if(typeof _wcShortsData !== 'undefined') _wcShortsData = wcShorts;
+  _wcShortsData = wcShorts;
 
   // Rotate so startIdx is first
   const ordered = startIdx > 0 ? [...wcShorts.slice(startIdx), ...wcShorts.slice(0,startIdx)] : [...wcShorts];
 
+  // Build TikTok-style feed
   let h = `<button class="back-btn" onclick="switchCat('home')">← World Cup Shorts</button>`;
-  h += '<div class="tiktok-container"><div class="tiktok-feed" id="wc-shorts-feed">';
+  h += '<div class="wc-shorts-container"><div class="wc-shorts-feed" id="wc-shorts-feed">';
 
   ordered.forEach((s,i)=>{
     const id = s.id || '';
-    // YouTube embed with autoplay on scroll
-    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>`;
-    const isVTV = s.channel === 'vtvnambo';
-    const badge = isVTV ? 'VTV Nam Bộ' : '⚽ WC';
-    const badgeClass = isVTV ? 'badge-wc' : 'badge-fpt';
+    // YouTube embed — autoplay=0 initially, will be set to 1 when active
+    const src = `https://www.youtube.com/embed/${id}?autoplay=0&rel=0&playsinline=1&mute=0&loop=1&playlist=${id}&enablejsapi=1&origin=${encodeURIComponent(location.origin)}`;
+    const shareUrl = 'https://youtube.com/shorts/' + id;
     const videoId = 'wcshort-' + id;
-    h += buildTikTokSlide({vtag,title:s.title,badge,badgeClass,videoId,idx:i,total:ordered.length,shareUrl:'https://youtube.com/shorts/'+id});
+
+    h += `<div class="wc-short-slide" data-vid="${esc(videoId)}" data-idx="${i}">`;
+    h += `<iframe data-yt-src="${src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;fullscreen"></iframe>`;
+
+    // Title overlay
+    h += `<div class="wc-short-overlay">`;
+    h += `<span class="wc-short-badge">VTV Nam Bộ</span>`;
+    h += `<div class="wc-short-title">${esc(s.title)}</div>`;
+    h += `</div>`;
+
+    // Counter
+    h += `<span class="wc-short-counter">${i+1}/${ordered.length}</span>`;
+
+    // Action buttons (right side)
+    h += `<div class="wc-short-actions">`;
+    h += `<button class="wc-short-action-btn" onclick="event.stopPropagation();doWCShortInteract('${esc(id)}','view',this)" title="Xem"><div class="icon">👁</div><span class="count" id="wc-vc-${i}">0</span></button>`;
+    h += `<button class="wc-short-action-btn" onclick="event.stopPropagation();doWCShortInteract('${esc(id)}','like',this)" title="Thích"><div class="icon">❤️</div><span class="count" id="wc-lc-${i}">0</span></button>`;
+    h += `<button class="wc-short-action-btn" onclick="event.stopPropagation();doWCShortInteract('${esc(id)}','share',this)" title="Chia sẻ"><div class="icon">📤</div></button>`;
+    h += `<button class="wc-short-action-btn" onclick="event.stopPropagation();window.open('${shareUrl}','_blank')" title="Mở trên YouTube"><div class="icon">🔗</div></button>`;
+    h += `</div>`;
+
+    h += `</div>`;
   });
 
   h += '</div></div>';
   el.innerHTML = h;
 
-  // Init continuous autoplay
-  initWCShortsFeed();
+  // Init autoplay on scroll
+  initWCShortsAutoplay();
+
+  // Load interaction counts
+  loadWCShortCounters(ordered);
 }
 
-function initWCShortsFeed(){
+// === Autoplay logic ===
+function initWCShortsAutoplay(){
   const feed = document.getElementById('wc-shorts-feed');
   if(!feed) return;
-  const slides = feed.querySelectorAll('.tiktok-slide');
+  const slides = feed.querySelectorAll('.wc-short-slide');
   let cur = -1;
   let isManualScroll = false;
   let manualTimer = null;
@@ -310,21 +294,21 @@ function initWCShortsFeed(){
     slides.forEach((sl,idx)=>{
       const fr = sl.querySelector('iframe');
       if(idx === i){
+        // Load iframe if not loaded
         if(fr && !fr.src && fr.dataset.ytSrc){ fr.src = fr.dataset.ytSrc; }
-        // Try to autoplay via postMessage
+        // Autoplay via postMessage
         if(fr && fr.src){
-          try {
-            fr.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
-          } catch(e){}
+          setTimeout(()=>{
+            try { fr.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*'); } catch(e){}
+          }, 300);
         }
+        // Track view
         const vid = sl.dataset.vid;
-        if(vid && !sl._viewed){ sl._viewed = true; doInteract(vid,'view'); }
+        if(vid && !sl._viewed){ sl._viewed = true; doWCShortInteract(vid.replace('wcshort-',''),'',null); }
       } else {
-        // Pause other videos
+        // Pause
         if(fr && fr.src){
-          try {
-            fr.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
-          } catch(e){}
+          try { fr.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*'); } catch(e){}
         }
       }
     });
@@ -342,14 +326,15 @@ function initWCShortsFeed(){
       const 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);
+        const r = sl.getBoundingClientRect();
+        const d = Math.abs(r.top + r.height/2 - ctr);
         if(d < bestD){ bestD = d; best = i; }
       });
       if(best >= 0) activate(best);
-    }, 100);
+    }, 120);
   });
 
-  // Auto-advance every 8 seconds for continuous playback
+  // Auto-advance every 10 seconds
   const autoTimer = setInterval(()=>{
     if(isManualScroll || !document.getElementById('wc-shorts-feed')) return;
     const next = cur + 1;
@@ -358,15 +343,55 @@ function initWCShortsFeed(){
     } else {
       slides[0].scrollIntoView({behavior:'smooth', block:'start'});
     }
-  }, 8000);
+  }, 10000);
 
   feed._autoTimer = autoTimer;
 
-  setTimeout(() => {
+  // Activate first slide
+  setTimeout(()=>{
     if(slides.length > 0){ slides[0].scrollIntoView({behavior:'start'}); activate(0); }
-  }, 400);
+  }, 500);
 }
 
+// === Interaction helpers ===
+async function doWCShortInteract(videoId, type, btn){
+  if(type){
+    try{
+      const r = await fetch('/api/short-action',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,action:type})});
+      const j = await r.json();
+      if(j && j.stats){
+        // Update counts in the active slide
+        const activeSlide = document.querySelector('.wc-short-slide');
+        if(activeSlide){
+          const idx = activeSlide.dataset.idx;
+          if(type==='view'){ const el=document.getElementById('wc-vc-'+idx); if(el) el.textContent=fmtNum(j.stats.views); }
+          if(type==='like'){ const el=document.getElementById('wc-lc-'+idx); if(el) el.textContent=fmtNum(j.stats.likes); }
+        }
+      }
+    }catch(e){}
+  } else {
+    // Just a view count increment
+    try{ await fetch('/api/short-action',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,action:'view'})}); }catch(e){}
+  }
+}
+
+async function loadWCShortCounters(shorts){
+  for(let i=0;i<shorts.length;i++){
+    const id = shorts[i].id;
+    if(!id) continue;
+    try{
+      const r = await fetch('/api/short-stats?ids='+id);
+      const j = await r.json();
+      if(j.stats && j.stats[id]){
+        const vc=document.getElementById('wc-vc-'+i); if(vc) vc.textContent=fmtNum(j.stats[id].views);
+        const lc=document.getElementById('wc-lc-'+i); if(lc) lc.textContent=fmtNum(j.stats[id].likes);
+      }
+    }catch(e){}
+  }
+}
+
+function fmtNum(n){if(!n)return'0';if(n>=1e6)return(n/1e6).toFixed(1)+'M';if(n>=1e3)return(n/1e3).toFixed(1)+'K';return String(n);}
+
 // === LIVE AUTO-REFRESH (90s) ===
 function startWCLiveRefresh(){
   if(_wcRefreshInterval)clearInterval(_wcRefreshInterval);