Delete static/wc_shorts_slide.js, static/wc_shorts_inject.js

static/wc_shorts_inject.js

@@ -1,76 +0,0 @@
-/**
- * WC Shorts Inject — Chạy SAU app_v2.js
- * Tự tạo anchor DIV rồi render WC Shorts slide TRÊN World Cup section
- */
-(function(){
-  'use strict';
-
-  function inject(){
-    // Tìm WC section
-    const wcSection = document.getElementById('wc2026-live-section');
-    const homeEl = document.getElementById('view-home');
-    if(!homeEl) return;
-
-    // Đã inject?
-    if(document.getElementById('wc-shorts-slide-section')) return;
-
-    // Đảm bảo renderWCSSlideSection đã load
-    if(typeof renderWCSSlideSection !== 'function'){
-      // Chờ rồi thử lại
-      setTimeout(inject, 500);
-      return;
-    }
-
-    // Tạo container rồi render vào
-    const div = document.createElement('div');
-    div.id = 'wc-shorts-slide-container-tmp';
-    div.style.display = 'none';
-
-    // Insert TRƯỚC WC section, hoặc vào đầu home
-    if(wcSection && wcSection.parentNode){
-      wcSection.parentNode.insertBefore(div, wcSection);
-    } else {
-      homeEl.insertBefore(div, homeEl.firstChild);
-    }
-
-    // Render slide section vào div
-    renderWCSSlideSection(div);
-
-    // Bỏ wrapper thừa, di chuyển section ra đúng vị trí
-    const section = div.querySelector('.wc-shorts-slide-section');
-    if(section){
-      section.id = 'wc-shorts-slide-section';
-      if(wcSection && wcSection.parentNode){
-        wcSection.parentNode.insertBefore(section, wcSection);
-      }
-      div.remove();
-    }
-  }
-
-  // Chạy khi DOM sẵn sàng
-  if(document.readyState === 'loading'){
-    document.addEventListener('DOMContentLoaded', ()=> setTimeout(inject, 800));
-  } else {
-    setTimeout(inject, 800);
-  }
-
-  // Cũng chạy sau khi loadHome xong
-  const origLoadHome = window.loadHome;
-  if(origLoadHome){
-    window.loadHome = function(){
-      const result = origLoadHome.apply(this, arguments);
-      setTimeout(inject, 200);
-      setTimeout(inject, 800);
-      setTimeout(inject, 2000);
-      return result;
-    };
-  }
-
-  // Fallback: retry nhiều lần
-  let retries = 0;
-  const retryIv = setInterval(()=>{
-    retries++;
-    inject();
-    if(retries > 20) clearInterval(retryIv);
-  }, 1000);
-})();

static/wc_shorts_slide.js

@@ -1,597 +0,0 @@
-/**
- * WC Shorts Slide — A standalone slide section ABOVE the World Cup section
- * TikTok-style vertical feed with autoplay, titles, interaction buttons
- * Each short = 1 fullscreen slide with scroll-snap
- */
-(function(){
-  'use strict';
-
-  // ===== Inject CSS =====
-  if(document.getElementById('wc-shorts-slide-css')) return;
-  const style = document.createElement('style');
-  style.id = 'wc-shorts-slide-css';
-  style.textContent = `
-    /* === WC SHORTS SLIDE SECTION (above WC section) === */
-    .wc-shorts-slide-section {
-      margin: 6px 4px;
-      background: linear-gradient(135deg, #000 0%, #0a0a2e 50%, #0d1117 100%);
-      border: 1px solid #1a3a5a;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .wc-shorts-slide-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 12px 6px;
-    }
-    .wc-shorts-slide-header h3 {
-      font-size: 15px;
-      color: #fff;
-      font-weight: 800;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .wc-shorts-slide-header h3 .emoji { font-size: 18px; }
-    .wc-shorts-slide-header .badge-live {
-      font-size: 9px;
-      color: #e74c3c;
-      font-weight: 700;
-      animation: wc-slide-pulse 1.5s infinite;
-    }
-    @keyframes wc-slide-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
-    .wc-shorts-slide-header .view-all-btn {
-      background: #0b6bcb;
-      border: none;
-      color: #fff;
-      padding: 5px 12px;
-      border-radius: 12px;
-      font-size: 10px;
-      font-weight: 700;
-      cursor: pointer;
-      white-space: nowrap;
-    }
-    .wc-shorts-slide-header .view-all-btn:active { opacity: .8; }
-
-    /* Horizontal thumbnail slider */
-    .wc-shorts-h-slider {
-      display: flex;
-      overflow-x: auto;
-      gap: 8px;
-      padding: 4px 10px 12px;
-      scroll-snap-type: x mandatory;
-      scrollbar-width: none;
-    }
-    .wc-shorts-h-slider::-webkit-scrollbar { display: none; }
-    .wc-shorts-h-item {
-      flex: 0 0 130px;
-      scroll-snap-align: start;
-      cursor: pointer;
-      border-radius: 8px;
-      overflow: hidden;
-      background: #0a1520;
-      border: 1px solid #1a3a5a;
-      transition: border-color .2s, transform .2s;
-      position: relative;
-    }
-    .wc-shorts-h-item:hover { border-color: #0b6bcb; transform: scale(1.03); }
-    .wc-shorts-h-item:active { transform: scale(.97); }
-    .wc-shorts-h-thumb {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 9/16;
-      background: #1a2a3a;
-      overflow: hidden;
-    }
-    .wc-shorts-h-thumb img {
-      width: 100%; height: 100%; object-fit: cover;
-    }
-    .wc-shorts-h-thumb .h-play-icon {
-      position: absolute; left: 50%; top: 50%;
-      transform: translate(-50%, -50%);
-      width: 36px; height: 36px;
-      border-radius: 50%;
-      background: rgba(0,0,0,.6);
-      display: flex; align-items: center; justify-content: center;
-      color: #fff; font-size: 14px;
-    }
-    .wc-shorts-h-thumb .h-duration {
-      position: absolute; bottom: 4px; right: 4px;
-      background: rgba(0,0,0,.7);
-      font-size: 8px; color: #fff;
-      padding: 1px 4px; border-radius: 3px;
-    }
-    .wc-shorts-h-thumb .h-vtv-badge {
-      position: absolute; top: 4px; left: 4px;
-      background: rgba(11,107,203,.85);
-      font-size: 7px; color: #fff;
-      padding: 1px 5px; border-radius: 3px;
-      font-weight: 700;
-    }
-    .wc-shorts-h-info { padding: 5px 6px; }
-    .wc-shorts-h-info .h-title {
-      font-size: 9px; color: #ccc; line-height: 1.25;
-      display: -webkit-box; -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical; overflow: hidden;
-    }
-    .wc-shorts-empty-slider {
-      text-align: center; padding: 20px 10px; color: #666; font-size: 12px;
-      width: 100%;
-    }
-    .wc-shorts-empty-slider .reload-btn {
-      background: #0b6bcb; border: none; color: #fff;
-      padding: 6px 16px; border-radius: 14px; font-size: 11px;
-      font-weight: 700; cursor: pointer; margin-top: 10px;
-    }
-
-    /* === FULL-SCREEN TIKTOK OVERLAY (opened from slide) === */
-    .wc-st-overlay {
-      position: fixed; inset: 0; background: #000;
-      z-index: 99999; display: none; flex-direction: column;
-    }
-    .wc-st-overlay.active { display: flex; }
-    .wc-st-top-bar {
-      position: absolute; top: 0; left: 0; right: 0;
-      z-index: 10; padding: 10px 12px;
-      display: flex; align-items: center; justify-content: space-between;
-      background: linear-gradient(rgba(0,0,0,.7), transparent);
-    }
-    .wc-st-top-bar .back-btn {
-      background: rgba(255,255,255,.15);
-      border: none; color: #fff;
-      width: 36px; height: 36px; border-radius: 50%;
-      font-size: 18px; cursor: pointer;
-      display: flex; align-items: center; justify-content: center;
-    }
-    .wc-st-top-bar .st-counter {
-      color: #fff; font-size: 12px; font-weight: 600;
-      background: rgba(0,0,0,.4); padding: 3px 10px;
-      border-radius: 10px; backdrop-filter: blur(4px);
-    }
-
-    .wc-st-feed {
-      flex: 1; overflow-y: scroll;
-      scroll-snap-type: y mandatory;
-      scrollbar-width: none;
-    }
-    .wc-st-feed::-webkit-scrollbar { display: none; }
-
-    .wc-st-slide {
-      height: 100vh; width: 100%;
-      scroll-snap-align: start;
-      position: relative;
-      background: #000;
-      display: flex; align-items: center; justify-content: center;
-      overflow: hidden;
-    }
-    .wc-st-slide iframe {
-      width: 100%; height: 100%; border: none; background: #000;
-    }
-
-    /* Title & info overlay */
-    .wc-st-info {
-      position: absolute; bottom: 0; left: 0; right: 65px;
-      padding: 12px 14px 18px;
-      background: linear-gradient(transparent 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.9) 100%);
-      z-index: 3; pointer-events: none;
-    }
-    .wc-st-info .st-channel {
-      display: inline-block; font-size: 9px; font-weight: 700;
-      padding: 2px 8px; border-radius: 10px; color: #fff;
-      background: #0b6bcb; margin-bottom: 8px;
-    }
-    .wc-st-info .st-title {
-      font-size: 14px; color: #fff; font-weight: 700;
-      line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.7);
-      display: -webkit-box; -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical; overflow: hidden;
-    }
-    .wc-st-info .st-link {
-      display: inline-block; margin-top: 8px;
-      font-size: 11px; color: #8ab4d8; text-decoration: underline;
-      pointer-events: auto; cursor: pointer;
-    }
-
-    /* Right-side action buttons */
-    .wc-st-actions {
-      position: absolute; right: 8px; bottom: 90px;
-      display: flex; flex-direction: column; align-items: center;
-      gap: 16px; z-index: 5;
-    }
-    .wc-st-action {
-      display: flex; flex-direction: column; align-items: center; gap: 2px;
-      background: none; border: none; color: #fff; cursor: pointer;
-      font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
-    }
-    .wc-st-action .a-icon {
-      width: 46px; height: 46px; 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, transform .15s;
-    }
-    .wc-st-action:active .a-icon { transform: scale(.88); background: rgba(255,255,255,.3); }
-    .wc-st-action .a-count { font-size: 10px; color: #eee; font-weight: 600; }
-
-    /* Loading state */
-    .wc-st-loading {
-      position: absolute; inset: 0; display: flex;
-      flex-direction: column; align-items: center; justify-content: center;
-      gap: 12px; color: #888; font-size: 13px;
-    }
-    .wc-st-loading .spinner {
-      width: 28px; height: 28px;
-      border: 3px solid #333; border-top-color: #0b6bcb;
-      border-radius: 50%; animation: wcst-spin .8s linear infinite;
-    }
-    @keyframes wcst-spin { to { transform: rotate(360deg); } }
-
-    /* No shorts message */
-    .wc-st-nosho {
-      position: absolute; inset: 0; display: flex;
-      flex-direction: column; align-items: center; justify-content: center;
-      gap: 10px; color: #666; font-size: 14px; text-align: center; padding: 20px;
-    }
-    .wc-st-nosho .icon { font-size: 48px; }
-    .wc-st-nosho .retry-btn {
-      background: #0b6bcb; border: none; color: #fff;
-      padding: 10px 28px; border-radius: 20px;
-      font-size: 13px; font-weight: 700; cursor: pointer;
-    }
-  `;
-  document.head.appendChild(style);
-
-  // ===== State =====
-  let _wcSCached = null;        // cached shorts data
-  let _wcSOverlayTimer = null;   // auto-advance timer
-  let _wcSManualScroll = false;
-
-  // ===== Fetch shorts =====
-  async function fetchShorts(){
-    const endpoints = [
-      '/api/shorts/wc?count=50',
-      '/api/shorts/vtvnamo?count=50',
-      '/api/shorts?channel=vtvnambo',
-    ];
-    for(const ep of endpoints){
-      try{
-        const r = await fetch(ep, {signal: AbortSignal.timeout(12000)});
-        const data = await r.json();
-        if(Array.isArray(data) && data.length > 0){
-          // Deduplicate
-          const seen = new Set(), deduped = [];
-          for(const s of data){
-            if(!seen.has(s.id)){ seen.add(s.id); deduped.push(s); }
-          }
-          if(deduped.length > 0) return deduped;
-        }
-      }catch(e){ console.warn('WC Shorts fetch failed for', ep, e); }
-    }
-    return [];
-  }
-
-  // ===== Render the HORIZONTAL SLIDE (placed above WC section) =====
-  window.renderWCSSlideSection = async function(container){
-    const section = document.createElement('div');
-    section.className = 'wc-shorts-slide-section';
-    section.id = 'wc-shorts-slide-section';
-
-    // Header
-    section.innerHTML = `
-      <div class="wc-shorts-slide-header">
-        <h3><span class="emoji">📱</span> Shorts World Cup <span class="badge-live">● LIVE</span></h3>
-        <button class="view-all-btn" id="wc-st-viewall">Xem tất cả →</button>
-      </div>
-      <div class="wc-shorts-h-slider" id="wc-st-hslider">
-        <div style="width:100%;text-align:center;padding:20px;color:#666;font-size:12px">
-          <div class="spinner" style="width:20px;height:20px;border:2px solid #333;border-top-color:#0b6bcb;border-radius:50%;animation:wcst-spin .8s linear infinite;margin:0 auto 8px"></div>
-          Đang tải shorts...
-        </div>
-      </div>
-    `;
-    container.appendChild(section);
-
-    const slider = section.querySelector('#wc-st-hslider');
-    const viewAllBtn = section.querySelector('#wc-st-viewall');
-
-    // Fetch data
-    let shorts = await fetchShorts();
-    _wcSCached = shorts;
-
-    if(!shorts || !shorts.length){
-      slider.innerHTML = `<div class="wc-shorts-empty-slider">
-        <div>📱</div><div style="margin-top:6px;color:#888">Đang cập nhật shorts...</div>
-        <button class="reload-btn" onclick="renderWCSSlideSection(document.getElementById('wc-shorts-slide-section').parentNode)">Thử lại</button>
-      </div>`;
-      viewAllBtn.onclick = () => openWCSF(shorts || [], 0);
-      return;
-    }
-
-    // Render horizontal slider items
-    let h = '';
-    shorts.forEach((s, i)=>{
-      const thumbImg = s.img || `https://i.ytimg.com/vi/${s.id}/hqdefault.jpg`;
-      h += `<div class="wc-shorts-h-item" data-idx="${i}" onclick="openWCSF(_wcSCached, ${i})">`;
-      h += `<div class="wc-shorts-h-thumb">`;
-      h += `<img src="${escHtml(thumbImg)}" loading="lazy" onerror="this.style.display='none'">`;
-      h += `<span class="h-vtv-badge">VTV Nam Bộ</span>`;
-      h += `<div class="h-play-icon">▶</div>`;
-      h += `</div>`;
-      h += `<div class="wc-shorts-h-info"><div class="h-title">${escHtml(s.title)}</div></div>`;
-      h += `</div>`;
-    });
-    slider.innerHTML = h;
-
-    viewAllBtn.onclick = () => openWCSF(shorts, 0);
-  };
-
-  // ===== FULL-SCREEN TIKTOK OVERLAY =====
-  window.openWCSF = function(shorts, startIdx){
-    if(!shorts || !shorts.length){
-      // Try to fetch fresh
-      openWCSFLoading(startIdx);
-      return;
-    }
-    buildWCSF(shorts, startIdx);
-  };
-
-  function openWCSFLoading(startIdx){
-    const overlay = getOrCreateWCSFOverlay();
-    overlay.classList.add('active');
-    overlay.innerHTML = `<div class="wc-st-loading" style="position:absolute;inset:0;background:#000;z-index:100">
-      <div class="spinner"></div>Đang tải shorts...
-    </div>`;
-    fetchShorts().then(shorts => {
-      _wcSCached = shorts;
-      if(shorts && shorts.length){
-        buildWCSF(shorts, startIdx || 0);
-      } else {
-        overlay.innerHTML = `<div class="wc-st-nosho">
-          <div class="icon">📱</div><div>Không tải được shorts</div>
-          <button class="retry-btn" onclick="openWCSF(_wcSCached, ${startIdx||0})">Thử lại</button>
-          <button class="retry-btn" style="background:#333;margin-top:4px" onclick="closeWCSF()">Đóng</button>
-        </div>`;
-      }
-    }).catch(() => {
-      overlay.innerHTML = `<div class="wc-st-nosho">
-        <div class="icon">📱</div><div>Lỗi kết nối</div>
-        <button class="retry-btn" onclick="openWCSF(_wcSCached, ${startIdx||0})">Thử lại</button>
-      </div>`;
-    });
-  }
-
-  function getOrCreateWCSFOverlay(){
-    let overlay = document.getElementById('wc-st-overlay');
-    if(!overlay){
-      overlay = document.createElement('div');
-      overlay.id = 'wc-st-overlay';
-      overlay.className = 'wc-st-overlay';
-      document.body.appendChild(overlay);
-    }
-    return overlay;
-  }
-
-  window.closeWCSF = function(){
-    const overlay = document.getElementById('wc-st-overlay');
-    if(!overlay) return;
-    overlay.classList.remove('active');
-    overlay.innerHTML = '';
-    if(_wcSOverlayTimer){ clearInterval(_wcSOverlayTimer); _wcSOverlayTimer = null; }
-    // Stop any playing iframes
-    overlay.querySelectorAll('iframe').forEach(f => { f.src = ''; });
-  };
-
-  function buildWCSF(shorts, startIdx){
-    const overlay = getOrCreateWCSFOverlay();
-    overlay.classList.add('active');
-
-    // Rotate so startIdx is first
-    const ordered = startIdx > 0
-      ? [...shorts.slice(startIdx), ...shorts.slice(0, startIdx)]
-      : [...shorts];
-    const total = ordered.length;
-
-    // Build HTML
-    let h = '';
-    // Top bar
-    h += `<div class="wc-st-top-bar">
-      <button class="back-btn" onclick="closeWCSF()">←</button>
-      <span class="st-counter" id="wc-st-counter">1/${total}</span>
-    </div>`;
-
-    // Feed
-    h += `<div class="wc-st-feed" id="wc-st-feed">`;
-
-    ordered.forEach((s, i)=>{
-      const id = s.id || '';
-      const embedSrc = `https://www.youtube.com/embed/${id}?autoplay=0&rel=0&playsinline=1&mute=1&loop=1&playlist=${id}&enablejsapi=1&origin=${encodeURIComponent(location.origin)}`;
-
-      h += `<div class="wc-st-slide" data-vid="${escHtml('wcst-'+id)}" data-idx="${i}" data-ytid="${escHtml(id)}">`;
-      // iframe — lazy loaded, autoplay handled by scroll observer
-      h += `<iframe data-yt-src="${embedSrc}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;fullscreen"></iframe>`;
-
-      // Info overlay (title)
-      h += `<div class="wc-st-info">`;
-      h += `<span class="st-channel">VTV Nam Bộ</span>`;
-      h += `<div class="st-title">${escHtml(s.title)}</div>`;
-      h += `<span class="st-link" onclick="window.open('https://youtube.com/shorts/${escHtml(id)}','_blank')">Mở trên YouTube →</span>`;
-      h += `</div>`;
-
-      // Right action buttons
-      h += `<div class="wc-st-actions">`;
-      h += `<button class="wc-st-action" title="Xem" onclick="event.stopPropagation();wcSTTrack('${escHtml(id)}','view',${i})"><div class="a-icon">👁</div><span class="a-count" id="wcst-vc-${i}">0</span></button>`;
-      h += `<button class="wc-st-action" title="Thích" onclick="event.stopPropagation();wcSTTrack('${escHtml(id)}','like',${i})"><div class="a-icon">❤️</div><span class="a-count" id="wcst-lc-${i}">0</span></button>`;
-      h += `<button class="wc-st-action" title="Chia sẻ" onclick="event.stopPropagation();wcSTShare('${escHtml(id)}')"><div class="a-icon">📤</div></button>`;
-      h += `<button class="wc-st-action" title="YouTube" onclick="event.stopPropagation();window.open('https://youtube.com/shorts/${escHtml(id)}','_blank')"><div class="a-icon">🔗</div></button>`;
-      h += `</div>`;
-
-      h += `</div>`;
-    });
-
-    h += `</div>`; // end feed
-    overlay.innerHTML = h;
-
-    // Init autoplay on scroll
-    initWCSFAutoplay(ordered);
-
-    // Load stats
-    loadWCSFStats(ordered);
-  }
-
-  // ===== Autoplay on scroll (intersection observer) =====
-  function initWCSFAutoplay(shorts){
-    const feed = document.getElementById('wc-st-feed');
-    if(!feed) return;
-    const slides = feed.querySelectorAll('.wc-st-slide');
-    let curIdx = -1;
-    _wcSManualScroll = false;
-    let manualTimer = null;
-
-    function activate(idx){
-      if(idx === curIdx || idx < 0 || idx >= slides.length) return;
-      slides.forEach((sl, j)=>{
-        const fr = sl.querySelector('iframe');
-        if(j === idx){
-          // Load iframe if needed
-          if(fr && !fr.src && fr.dataset.ytSrc){ fr.src = fr.dataset.ytSrc; }
-          // Play (with mute to satisfy autoplay policy)
-          if(fr && fr.src){
-            setTimeout(()=>{
-              try{
-                fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'mute',args:''}),'*');
-                fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'playVideo',args:''}),'*');
-              }catch(e){}
-            }, 400);
-          }
-        } else {
-          // Pause others
-          if(fr && fr.src){
-            try{ fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'pauseVideo',args:''}),'*'); }catch(e){}
-          }
-        }
-      });
-      curIdx = idx;
-      // Update counter
-      const counter = document.getElementById('wc-st-counter');
-      if(counter) counter.textContent = `${idx+1}/${shorts.length}`;
-    }
-
-    // Use IntersectionObserver for precise snap detection
-    const io = new IntersectionObserver((entries)=>{
-      if(_wcSManualScroll) return;
-      entries.forEach(entry=>{
-        if(entry.isIntersecting && entry.intersectionRatio > 0.6){
-          const idx = parseInt(entry.target.dataset.idx);
-          if(!isNaN(idx)) activate(idx);
-        }
-      });
-    }, {threshold: [0.6], root: feed});
-
-    slides.forEach(sl => io.observe(sl));
-
-    // Scroll event for manual detection (fallback)
-    let scrollTimer;
-    feed.addEventListener('scroll', ()=>{
-      _wcSManualScroll = true;
-      clearTimeout(manualTimer);
-      manualTimer = setTimeout(()=>{ _wcSManualScroll = false; }, 3000);
-      clearTimeout(scrollTimer);
-      scrollTimer = setTimeout(()=>{
-        const rect = feed.getBoundingClientRect();
-        const ctr = rect.top + rect.height / 2;
-        let best = -1, bestD = 1e9;
-        slides.forEach((sl,i)=>{
-          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);
-    }, {passive: true});
-
-    // Auto-advance every 12 seconds
-    if(_wcSOverlayTimer) clearInterval(_wcSOverlayTimer);
-    _wcSOverlayTimer = setInterval(()=>{
-      if(_wcSManualScroll) return;
-      if(!document.getElementById('wc-st-feed')){ clearInterval(_wcSOverlayTimer); _wcSOverlayTimer = null; return; }
-      const next = curIdx + 1;
-      if(next < slides.length){
-        slides[next].scrollIntoView({behavior:'smooth', block:'start'});
-      } else {
-        slides[0].scrollIntoView({behavior:'smooth', block:'start'});
-      }
-    }, 12000);
-
-    // Activate first after short delay
-    setTimeout(()=>{
-      if(slides.length > 0){ slides[0].scrollIntoView({behavior:'start'}); activate(0); }
-    }, 300);
-  }
-
-  // ===== Interaction tracking =====
-  window.wcSTTrack = async function(videoId, type, idx){
-    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){
-        if(idx !== undefined){
-          const vc = document.getElementById(`wcst-vc-${idx}`);
-          const lc = document.getElementById(`wcst-lc-${idx}`);
-          if(type==='view' && vc) vc.textContent = fmtNum(j.stats.views);
-          if(type==='like' && lc) lc.textContent = fmtNum(j.stats.likes);
-        }
-      }
-    }catch(e){ console.warn('Track error:', e); }
-  };
-
-  window.wcSTShare = function(videoId){
-    const url = 'https://youtube.com/shorts/' + videoId;
-    if(navigator.share){
-      navigator.share({title:'Short World Cup', url}).catch(()=>{});
-    } else {
-      navigator.clipboard.writeText(url).then(()=>alert('Đã sao chép link!')).catch(()=>{});
-    }
-  };
-
-  async function loadWCSFStats(shorts){
-    const ids = shorts.map(s=>s.id).filter(Boolean);
-    if(!ids.length) return;
-    // Batch in groups of 20
-    for(let i=0;i<ids.length;i+=20){
-      const batch = ids.slice(i,i+20).join(',');
-      try{
-        const r = await fetch('/api/short-stats?ids='+batch);
-        const j = await r.json();
-        if(j.stats){
-          shorts.forEach((s,idx)=>{
-            const st = j.stats[s.id];
-            if(st){
-              const vc = document.getElementById(`wcst-vc-${idx}`);
-              const lc = document.getElementById(`wcst-lc-${idx}`);
-              if(vc) vc.textContent = fmtNum(st.views);
-              if(lc) lc.textContent = fmtNum(st.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);
-  }
-
-  // ===== Helpers =====
-  function escHtml(s){
-    return String(s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
-  }
-
-})();