Switch TV player to YouTube iframe embed - works 100% reliable

static/index.html

@@ -12,10 +12,10 @@
 <link rel="canonical" href="https://bep40-vnews.hf.space">
 <script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
 <style>
-*{box-sizing:border-box;margin:0;padding:0}body{background:#111;color:#eee;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow-x:hidden}.header{background:linear-gradient(135deg,#0d1117,#1a3a2a 50%,#8b7500);padding:12px;text-align:center}.header h1{color:#fff;font-size:18px;font-weight:800}.header p{color:rgba(255,255,255,.6);font-size:10px;margin-top:2px}.cats{display:flex;overflow-x:auto;background:#1a1a1a;border-bottom:1px solid #333;padding:0 4px;scrollbar-width:none;position:sticky;top:0;z-index:50}.cats::-webkit-scrollbar{display:none}.cat{padding:9px 11px;color:#888;font-size:11px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0}.cat.active{color:#5cb87a;border-bottom-color:#5cb87a;font-weight:600}.view{display:none}.view.active{display:block}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px 4px}@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}.card{background:#1a1a1a;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid #222}.card:active{transform:scale(.97)}.card-img{position:relative;width:100%;aspect-ratio:16/9;background:#333;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover}.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}.card-body{padding:6px 8px}.card-title{font-size:11px;font-weight:600;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{display:flex;gap:8px;margin-top:3px;font-size:9px;color:#666}.badge{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:2px}.badge-vne{background:#c0392b;color:#fff}.badge-bdp{background:#1a5c35;color:#fff}.badge-24h{background:#e67e22;color:#fff}.badge-bbc{background:#b80000;color:#fff}.badge-live{background:#e74c3c;color:#fff;animation:pulse 1.5s infinite}.slider-wrap{margin:6px 4px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}.slider-header{padding:7px 10px}.slider-label{color:#f0c040;font-size:13px;font-weight:700}.slider-track{display:flex;overflow-x:auto;gap:8px;padding:4px 10px 10px;scrollbar-width:none}.slider-track::-webkit-scrollbar{display:none}.slider-item{flex:0 0 160px;scroll-snap-align:start;cursor:pointer;flex-shrink:0}.slider-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#333}.slider-thumb img{width:100%;height:100%;object-fit:cover}.slider-title{color:#ccc;font-size:10px;margin-top:3px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.shorts-item{flex:0 0 110px!important}.shorts-thumb{aspect-ratio:3/4!important;border-radius:8px!important}
-.tv-item{flex:0 0 130px}.tv-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;border:2px solid #333}.tv-thumb img{width:60%;height:60%;object-fit:contain}.tv-thumb .live-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:#e74c3c;border-radius:50%;animation:pulse 1.5s infinite}.tv-name{color:#fff;font-size:10px;font-weight:700;margin-top:4px;text-align:center}.tv-desc{color:#666;font-size:9px;text-align:center}
+*{box-sizing:border-box;margin:0;padding:0}body{background:#111;color:#eee;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow-x:hidden}.header{background:linear-gradient(135deg,#0d1117,#1a3a2a 50%,#8b7500);padding:12px;text-align:center}.header h1{color:#fff;font-size:18px;font-weight:800}.header p{color:rgba(255,255,255,.6);font-size:10px;margin-top:2px}.cats{display:flex;overflow-x:auto;background:#1a1a1a;border-bottom:1px solid #333;padding:0 4px;scrollbar-width:none;position:sticky;top:0;z-index:50}.cats::-webkit-scrollbar{display:none}.cat{padding:9px 11px;color:#888;font-size:11px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0}.cat.active{color:#5cb87a;border-bottom-color:#5cb87a;font-weight:600}.view{display:none}.view.active{display:block}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px 4px}@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}.card{background:#1a1a1a;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid #222}.card:active{transform:scale(.97)}.card-img{position:relative;width:100%;aspect-ratio:16/9;background:#333;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover}.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}.card-body{padding:6px 8px}.card-title{font-size:11px;font-weight:600;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{display:flex;gap:8px;margin-top:3px;font-size:9px;color:#666}.badge{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:2px}.badge-vne{background:#c0392b;color:#fff}.badge-bdp{background:#1a5c35;color:#fff}.badge-24h{background:#e67e22;color:#fff}.badge-bbc{background:#b80000;color:#fff}.slider-wrap{margin:6px 4px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}.slider-header{padding:7px 10px}.slider-label{color:#f0c040;font-size:13px;font-weight:700}.slider-track{display:flex;overflow-x:auto;gap:8px;padding:4px 10px 10px;scrollbar-width:none}.slider-track::-webkit-scrollbar{display:none}.slider-item{flex:0 0 160px;scroll-snap-align:start;cursor:pointer;flex-shrink:0}.slider-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#333}.slider-thumb img{width:100%;height:100%;object-fit:cover}.slider-title{color:#ccc;font-size:10px;margin-top:3px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.shorts-item{flex:0 0 110px!important}.shorts-thumb{aspect-ratio:3/4!important;border-radius:8px!important}
+.tv-item{flex:0 0 130px;cursor:pointer}.tv-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;border:2px solid #333}.tv-thumb img{width:60%;height:60%;object-fit:contain}.tv-thumb .live-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:#e74c3c;border-radius:50%;animation:pulse 1.5s infinite}.tv-name{color:#fff;font-size:10px;font-weight:700;margin-top:4px;text-align:center}.tv-desc{color:#666;font-size:9px;text-align:center}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
-.tv-player-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:9999;display:none;flex-direction:column}.tv-player-overlay.active{display:flex}.tv-player-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#111}.tv-player-header h3{color:#fff;font-size:14px;font-weight:700}.tv-player-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px}.tv-player-video{flex:1;background:#000;display:flex;align-items:center;justify-content:center}.tv-player-video video{width:100%;height:100%;object-fit:contain}.tv-player-channels{background:#111;padding:8px;overflow-x:auto;display:flex;gap:8px;border-top:1px solid #333}.tv-ch-btn{flex:0 0 auto;padding:6px 12px;background:#222;border:1px solid #333;border-radius:6px;color:#ccc;font-size:11px;cursor:pointer;white-space:nowrap}.tv-ch-btn.active{background:#2d8659;border-color:#2d8659;color:#fff;font-weight:700}.tv-player-status{color:#666;font-size:11px;text-align:center;padding:8px}
+.tv-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:9999;display:none;flex-direction:column}.tv-overlay.active{display:flex}.tv-overlay-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#111;border-bottom:1px solid #222}.tv-overlay-header h3{color:#fff;font-size:13px;font-weight:700}.tv-overlay-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px}.tv-overlay-body{flex:1;position:relative}.tv-overlay-body iframe{width:100%;height:100%;border:none}.tv-overlay-channels{background:#111;padding:8px;overflow-x:auto;display:flex;gap:6px;border-top:1px solid #222}.tv-ch-btn{flex:0 0 auto;padding:6px 12px;background:#222;border:1px solid #333;border-radius:6px;color:#ccc;font-size:11px;cursor:pointer;white-space:nowrap}.tv-ch-btn.active{background:#2d8659;border-color:#2d8659;color:#fff;font-weight:700}
 .tiktok-container{width:100%;height:80vh;max-height:680px;min-height:400px;background:#000}.tiktok-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}.tiktok-feed::-webkit-scrollbar{display:none}.tiktok-slide{height:80vh;max-height:680px;min-height:400px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:#000;display:flex;align-items:center;justify-content:center}.tiktok-slide video{width:100%;height:100%;object-fit:cover}.tiktok-slide.contain-mode video{object-fit:contain}.tiktok-bottom{position:absolute;bottom:0;left:0;right:60px;padding:12px 10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}.tiktok-title{color:#fff;font-size:12px;font-weight:600;margin:3px 0 5px;line-height:1.3}.tiktok-seek{display:flex;gap:8px;margin-top:4px}.tiktok-seek button{background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 10px;border-radius:10px;font-size:10px;cursor:pointer}.tiktok-counter{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;padding:2px 7px;border-radius:8px;z-index:4}.tiktok-unmute{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:4px 8px;border-radius:10px;cursor:pointer;z-index:4}.tiktok-right{position:absolute;right:8px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}.tiktok-right-btn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:none;border:none;color:#fff}.tiktok-right-btn .icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:20px}.tiktok-right-btn .count{font-size:10px;color:#ddd}.loading{text-align:center;padding:40px;color:#666;font-size:12px}.topbar{display:flex;justify-content:space-between;padding:6px 8px;color:#555;font-size:10px}.section-title{font-size:13px;font-weight:700;color:#5cb87a;margin:8px 0 4px;padding-left:8px;border-left:3px solid #5cb87a}.back-btn{background:rgba(17,17,17,.95);color:#fff;border:none;padding:10px;font-size:12px;cursor:pointer;width:100%;text-align:center;position:sticky;top:0;z-index:50}a.card-link{text-decoration:none;color:inherit}.article-view{padding:12px 8px 40px;max-width:700px;margin:0 auto}.article-title{font-size:18px;font-weight:800;color:#f0f0f0;line-height:1.3;margin-bottom:8px}.article-summary{background:#1a2a1f;border-left:3px solid #2d8659;padding:10px;margin-bottom:14px;font-weight:600;color:#ccc;font-size:13px;border-radius:0 6px 6px 0}.article-p{font-size:14px;line-height:1.7;color:#ccc;margin-bottom:10px}.article-img{width:100%;border-radius:6px;margin:10px 0}.article-h2{font-size:16px;font-weight:700;color:#eee;margin:16px 0 8px}.article-actions{display:flex;gap:10px;padding:10px 0;border-top:1px solid #333;margin-top:16px;flex-wrap:wrap}.article-actions button{background:#1a1a1a;border:1px solid #333;color:#ccc;padding:6px 12px;border-radius:14px;font-size:11px;cursor:pointer}
 </style>
 </head>
@@ -27,140 +27,68 @@
 <div id="view-video" class="view"></div>
 <div id="view-tiktok" class="view"></div>
 <div id="view-article" class="view"></div>
-<!-- TV Player Overlay -->
-<div class="tv-player-overlay" id="tv-player">
-<div class="tv-player-header"><h3 id="tv-player-title">📺 VTV1 HD</h3><button class="tv-player-close" onclick="closeTvPlayer()">✕</button></div>
-<div class="tv-player-video"><video id="tv-video" playsinline autoplay controls></video></div>
-<div class="tv-player-status" id="tv-status"></div>
-<div class="tv-player-channels" id="tv-channel-bar"></div>
+<!-- TV Player Overlay (YouTube iframe) -->
+<div class="tv-overlay" id="tv-overlay">
+<div class="tv-overlay-header"><h3 id="tv-title">📺 Truyền Hình</h3><button class="tv-overlay-close" onclick="closeTv()">✕</button></div>
+<div class="tv-overlay-body" id="tv-body"></div>
+<div class="tv-overlay-channels" id="tv-bar"></div>
 </div>
 <script>
-const SPACE=location.origin;let _cats=[],_tikData=[],_viewed=new Set(),_tvChannels=[],_tvHls=null;
+const SPACE=location.origin;let _cats=[],_tikData=[],_viewed=new Set(),_tvChannels=[];
 const LS={get(k){try{return JSON.parse(localStorage.getItem(k))}catch{return null}},set(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch{}}};
 function hid(s){let h=0;for(let i=0;i<s.length;i++){h=((h<<5)-h)+s.charCodeAt(i);h|=0;}return Math.abs(h).toString(36).slice(0,10);}
 function incV(id){if(_viewed.has(id))return getV(id);_viewed.add(id);let v=(LS.get('v_'+id)||0)+1;LS.set('v_'+id,v);return v;}
 function getV(id){return LS.get('v_'+id)||0}
 function incS(id){let v=(LS.get('s_'+id)||0)+1;LS.set('s_'+id,v);return v;}
 function getS(id){return LS.get('s_'+id)||0}
-function doShareVideo(title,videoUrl,img,type){
-const shareUrl=SPACE+'/v?url='+encodeURIComponent(videoUrl)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'')+'&type='+encodeURIComponent(type||'highlights');
-const aid=hid(videoUrl||title);incS(aid);
-if(navigator.share)navigator.share({title:'🎬 '+title,url:shareUrl}).catch(()=>{});
-else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link video!')).catch(()=>{});}
+function doShareVideo(title,videoUrl,img,type){const shareUrl=SPACE+'/v?url='+encodeURIComponent(videoUrl)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'')+'&type='+encodeURIComponent(type||'highlights');const aid=hid(videoUrl||title);incS(aid);if(navigator.share)navigator.share({title:'🎬 '+title,url:shareUrl}).catch(()=>{});else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link video!')).catch(()=>{});}
 function doShare(title,articleUrl,img){const shareUrl=SPACE+'/s?url='+encodeURIComponent(articleUrl)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'');const aid=hid(articleUrl||title);incS(aid);if(navigator.share)navigator.share({title,url:shareUrl}).catch(()=>{});else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});}
 
-// ===== LIVE TV PLAYER =====
-async function openTvPlayer(channelId){
-const overlay=document.getElementById('tv-player');
+// ===== LIVE TV (YouTube Embed) =====
+function openTv(chId){
+const overlay=document.getElementById('tv-overlay');
 overlay.classList.add('active');
-document.getElementById('tv-status').textContent='⏳ Đang kết nối...';
-// Load channel list if not loaded
-if(!_tvChannels.length){
-try{_tvChannels=await fetch('/api/livetv').then(r=>r.json());}catch(e){_tvChannels=[];}}
+const ch=_tvChannels.find(c=>c.id===chId);
 // Render channel bar
-let bar='';_tvChannels.forEach(ch=>{
-bar+=`<button class="tv-ch-btn${ch.id===channelId?' active':''}" onclick="switchTvChannel(${ch.id})">${ch.name}</button>`;});
-document.getElementById('tv-channel-bar').innerHTML=bar;
-// Play the selected channel
-playTvChannel(channelId);}
-async function switchTvChannel(channelId){
+let bar='';_tvChannels.forEach(c=>{bar+=`<button class="tv-ch-btn${c.id===chId?' active':''}" onclick="switchTv('${c.id}')">${c.name}</button>`;});
+document.getElementById('tv-bar').innerHTML=bar;
+playTv(chId);}
+function switchTv(chId){
 document.querySelectorAll('.tv-ch-btn').forEach(b=>b.classList.remove('active'));
-document.querySelectorAll('.tv-ch-btn').forEach(b=>{if(b.textContent.includes('VTV'+channelId)||b.onclick.toString().includes(channelId))b.classList.add('active');});
-// Re-highlight correct button
-const btns=document.querySelectorAll('.tv-ch-btn');
-btns.forEach(b=>{b.classList.remove('active');if(b.getAttribute('onclick')===`switchTvChannel(${channelId})`)b.classList.add('active');});
-playTvChannel(channelId);}
-async function playTvChannel(channelId){
-const video=document.getElementById('tv-video');
-const status=document.getElementById('tv-status');
-const ch=_tvChannels.find(c=>c.id===channelId);
-document.getElementById('tv-player-title').textContent=ch?`📺 ${ch.name}`:'📺 Live TV';
-status.textContent='⏳ Đang lấy luồng phát sóng...';
-// Destroy old HLS instance
-if(_tvHls){_tvHls.destroy();_tvHls=null;}
-video.src='';
-// Fetch fresh stream for this channel
-try{
-const r=await fetch(`/api/livetv/${channelId}`);
-const data=await r.json();
-if(data.stream){
-const src=data.stream;
-if(src.includes('.m3u8')){
-if(video.canPlayType('application/vnd.apple.mpegURL')){video.src=src;}
-else if(Hls.isSupported()){_tvHls=new Hls({liveDurationInfinity:true});_tvHls.loadSource(src);_tvHls.attachMedia(video);_tvHls.on(Hls.Events.ERROR,(e,d)=>{if(d.fatal)status.textContent='❌ Lỗi phát sóng - thử kênh khác';});}
-else{video.src=src;}}
-else{video.src=src;}
-video.play().catch(()=>{});
-status.textContent='🔴 LIVE - '+ch.name;
-}else{
-status.textContent='⚠️ Không thể kết nối kênh này - VTVgo đang bảo trì hoặc cần token mới';
-}}catch(e){status.textContent='❌ Lỗi kết nối server';}}
-function closeTvPlayer(){
-const overlay=document.getElementById('tv-player');
-overlay.classList.remove('active');
-const video=document.getElementById('tv-video');
-video.pause();video.src='';
-if(_tvHls){_tvHls.destroy();_tvHls=null;}}
+document.querySelectorAll('.tv-ch-btn').forEach(b=>{if(b.getAttribute('onclick')===`switchTv('${chId}')`)b.classList.add('active');});
+playTv(chId);}
+function playTv(chId){
+const ch=_tvChannels.find(c=>c.id===chId);
+if(!ch)return;
+document.getElementById('tv-title').textContent='📺 '+ch.name+' - Live';
+// Use YouTube embed with channel's live stream
+const embedUrl=`https://www.youtube.com/embed/live_stream?channel=${ch.yt_channel}&autoplay=1&mute=0&rel=0&modestbranding=1`;
+document.getElementById('tv-body').innerHTML=`<iframe src="${embedUrl}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;fullscreen" allowfullscreen></iframe>`;}
+function closeTv(){
+document.getElementById('tv-overlay').classList.remove('active');
+document.getElementById('tv-body').innerHTML='';} // remove iframe to stop playback
 // ===== END LIVE TV =====
 
 async function init(){_cats=await fetch('/api/categories').then(r=>r.json());let bar='<div class="cat active" data-cat="home">🏠</div><div class="cat" data-cat="video">🎬 Video</div>';_cats.forEach(c=>{bar+=`<div class="cat" data-cat="${c.id}">${c.name}</div>`;});document.getElementById('cat-bar').innerHTML=bar;document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});await loadHome();
 const pendingVideo=localStorage.getItem('pending_video');
 if(pendingVideo){localStorage.removeItem('pending_video');try{const pv=JSON.parse(pendingVideo);if(pv.url)openTikTokByUrl(pv.url,pv.type||'highlights');}catch(e){}}
 const pending=localStorage.getItem('pending_article');if(pending){localStorage.removeItem('pending_article');let src='vne';if(pending.includes('bbc.com'))src='bbc';readArticle(pending,src);}}
-function switchCat(id){document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.querySelectorAll('video').forEach(v=>{if(v.id!=='tv-video')v.pause();});if(id==='home')document.getElementById('view-home').classList.add('active');else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}else{document.getElementById('view-cat').classList.add('active');loadCat(id);}}
+function switchCat(id){document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.querySelectorAll('video').forEach(v=>v.pause());if(id==='home')document.getElementById('view-home').classList.add('active');else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}else{document.getElementById('view-cat').classList.add('active');loadCat(id);}}
 function showView(id){document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.getElementById(id).classList.add('active');}
 async function loadHome(){const[news,hl,sh,tv]=await Promise.all([fetch('/api/homepage').then(r=>r.json()),fetch('/api/highlights').then(r=>r.json()),fetch('/api/shorts').then(r=>r.json()),fetch('/api/livetv').then(r=>r.json()).catch(()=>[])]);let h='';
-// Live TV Section
-if(tv&&tv.length){_tvChannels=tv;h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📺 Truyền Hình Trực Tiếp</span></div><div class="slider-track">';tv.forEach(ch=>{h+=`<div class="tv-item" onclick="openTvPlayer(${ch.id})"><div class="tv-thumb"><img src="${ch.logo}" onerror="this.style.display='none'"><div class="live-dot"></div></div><div class="tv-name">${ch.name}</div><div class="tv-desc">${ch.desc||''}</div></div>`;});h+='</div></div>';}
-// Shorts
+// Live TV
+if(tv&&tv.length){_tvChannels=tv;h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📺 Truyền Hình Trực Tiếp</span></div><div class="slider-track">';tv.forEach(ch=>{h+=`<div class="tv-item" onclick="openTv('${ch.id}')"><div class="tv-thumb"><img src="${ch.logo}" onerror="this.style.display='none'"><div class="live-dot"></div></div><div class="tv-name">${ch.name}</div><div class="tv-desc">${ch.desc||''}</div></div>`;});h+='</div></div>';}
 if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';sh.forEach((a,i)=>{h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts',${i})"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
-// Highlights
 if(hl&&hl.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';hl.forEach((a,i)=>{h+=`<div class="slider-item" onclick="openTikTok('highlights',${i})"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
-// News
 const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a);});for(const[g,arts] of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';const lb=a.source==='bbc'?'BBC':a.source==='bdp'?'BDP':'VnE';const aid=hid(a.link);h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div><div class="card-meta"><span>👁${getV(aid)}</span></div></div></div>`;});h+='</div>';}document.getElementById('view-home').innerHTML=h;}
 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());if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}let h='<div class="grid">';arts.forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${a.source}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';el.innerHTML=h;}
 async function readArticle(url,source){if(source!=='vne'&&source!=='bbc'){window.open(url,'_blank');return;}showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';const aid=hid(url);incV(aid);const data=await fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json());if(!data||data.error){el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><a href="${url}" target="_blank" style="color:#5cb87a">Mở link gốc</a></div>`;return;}const ogImg=data.og_image||'';let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${data.title}</h1>`;if(data.summary)h+=`<div class="article-summary">${data.summary}</div>`;data.body.forEach(b=>{if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;else if(b.type==='img')h+=`<img class="article-img" src="${b.src}">`;else if(b.type==='heading')h+=`<h2 class="article-h2">${b.text}</h2>`;});h+=`<div class="article-actions"><button onclick="doShare('${data.title.replace(/'/g,"\\'")}','${url.replace(/'/g,"\\'")}','${ogImg.replace(/'/g,"\\'")}')">📤 Chia sẻ (${getS(aid)})</button><button>👁 ${getV(aid)}</button></div>`;h+='</div>';el.innerHTML=h;window.scrollTo(0,0);}
 async function loadVideos(){const el=document.getElementById('view-video');if(el.dataset.loaded)return;el.innerHTML='<div class="loading">Đang tải...</div>';const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);let h='<div class="section-title">🎬 Highlight</div><div class="grid">';hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';if(bdp.length){h+='<div class="section-title">⚽ BDP</div><div class="grid">';bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-bdp">BDP</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';}el.innerHTML=h;el.dataset.loaded='1';}
-async function openTikTokByUrl(targetUrl,type){
-showView('view-tiktok');document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
-const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải video...</div>';
-let articles;
-if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());
-else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());
-else articles=await fetch('/api/bdp_videos').then(r=>r.json());
-let startIdx=0;
-for(let i=0;i<articles.length;i++){if(articles[i].link===targetUrl){startIdx=i;break;}}
-await buildTikTokPlayer(articles,startIdx,type);}
+async function openTikTokByUrl(targetUrl,type){showView('view-tiktok');document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải video...</div>';let articles;if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());else articles=await fetch('/api/bdp_videos').then(r=>r.json());let startIdx=0;for(let i=0;i<articles.length;i++){if(articles[i].link===targetUrl){startIdx=i;break;}}await buildTikTokPlayer(articles,startIdx,type);}
 async function openTikTok(type,startIdx){showView('view-tiktok');document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải video...</div>';let articles;if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());else articles=await fetch('/api/bdp_videos').then(r=>r.json());await buildTikTokPlayer(articles,startIdx,type);}
-async function buildTikTokPlayer(articles,startIdx,type){
-const el=document.getElementById('view-tiktok');
-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{article:a,video:v,idx:i};}catch(e){}
-return null;}));
-results.forEach(r=>{if(!r)return;const{article:a,video:v,idx:i}=r;
-if(v.all_parts&&v.all_parts.length>1){v.all_parts.forEach((p,pi)=>{vids.push({...a,src:p,poster:v.poster,_idx:i,_part:pi,title:a.title+` (P${pi+1})`});});}
-else{vids.push({...a,...v,_idx:i,_part:0});}});
-vids.sort((a,b)=>a._idx-b._idx||a._part-b._part);
-if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
-let ti=vids.findIndex(v=>v._idx===startIdx);
-if(ti<0){ti=vids.findIndex(v=>v._idx>=startIdx);}
-if(ti<0)ti=0;
-const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;
-_tikData=ordered;
-let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
-ordered.forEach((v,i)=>{const aid=hid(v.link||v.title);const isHLS=v.src.includes('.m3u8');const poster=v.poster?` poster="${v.poster}"`:'';const vtag=isHLS?`<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:`<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;const bg=v.source==='bdp'?'badge-bdp':'badge-24h';const lb=v.source==='bdp'?'BDP':'24h';h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-link="${v.link||''}" data-img="${v.poster||v.img||''}" data-type="${type}">
-${vtag}
-<div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p><div class="tiktok-seek"><button onclick="seekV(${i},-10)">⏪ 10s</button><button onclick="seekV(${i},10)">10s ⏩</button><button onclick="toggleContain(this)">⬇</button></div></div>
-<div class="tiktok-right"><button class="tiktok-right-btn"><div class="icon">👁</div><div class="count" id="vc-${i}">${getV(aid)}</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();shareVid(${i})"><div class="icon">📤</div><div class="count" id="sc-${i}">${getS(aid)}</div></button></div>
-<div class="tiktok-unmute" onclick="toggleMute()">🔇</div><span class="tiktok-counter">${i+1}/${ordered.length}</span>
-</div>`;});h+='</div></div>';h+=`<div class="topbar"><span>📋 Danh sách (${ordered.length})</span></div><div class="grid">`;ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<a href="#tslide-${i}" class="card-link"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${bg}">${v.source==='bdp'?'BDP':'24h'}</span><div class="card-title">${v.title}</div></div></div></a>`;});h+='</div>';el.innerHTML=h;initFeed();}
+async function buildTikTokPlayer(articles,startIdx,type){const el=document.getElementById('view-tiktok');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{article:a,video:v,idx:i};}catch(e){}return null;}));results.forEach(r=>{if(!r)return;const{article:a,video:v,idx:i}=r;if(v.all_parts&&v.all_parts.length>1){v.all_parts.forEach((p,pi)=>{vids.push({...a,src:p,poster:v.poster,_idx:i,_part:pi,title:a.title+` (P${pi+1})`});});}else{vids.push({...a,...v,_idx:i,_part:0});}});vids.sort((a,b)=>a._idx-b._idx||a._part-b._part);if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}let ti=vids.findIndex(v=>v._idx===startIdx);if(ti<0)ti=vids.findIndex(v=>v._idx>=startIdx);if(ti<0)ti=0;const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;_tikData=ordered;let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((v,i)=>{const aid=hid(v.link||v.title);const isHLS=v.src.includes('.m3u8');const poster=v.poster?` poster="${v.poster}"`:'';const vtag=isHLS?`<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:`<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;const bg=v.source==='bdp'?'badge-bdp':'badge-24h';const lb=v.source==='bdp'?'BDP':'24h';h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-link="${v.link||''}" data-img="${v.poster||v.img||''}" data-type="${type}">${vtag}<div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p><div class="tiktok-seek"><button onclick="seekV(${i},-10)">⏪ 10s</button><button onclick="seekV(${i},10)">10s ⏩</button><button onclick="toggleContain(this)">⬇</button></div></div><div class="tiktok-right"><button class="tiktok-right-btn"><div class="icon">👁</div><div class="count" id="vc-${i}">${getV(aid)}</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();shareVid(${i})"><div class="icon">📤</div><div class="count" id="sc-${i}">${getS(aid)}</div></button></div><div class="tiktok-unmute" onclick="toggleMute()">🔇</div><span class="tiktok-counter">${i+1}/${ordered.length}</span></div>`;});h+='</div></div>';h+=`<div class="topbar"><span>📋 Danh sách (${ordered.length})</span></div><div class="grid">`;ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<a href="#tslide-${i}" class="card-link"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${bg}">${v.source==='bdp'?'BDP':'24h'}</span><div class="card-title">${v.title}</div></div></div></a>`;});h+='</div>';el.innerHTML=h;initFeed();}
 function shareVid(i){const v=_tikData[i];if(!v)return;const sl=document.getElementById('tslide-'+i);const type=sl?.dataset.type||'highlights';doShareVideo(v.title,v.link||'',v.poster||v.img||'',type);const aid=hid(v.link||v.title);document.getElementById('sc-'+i).textContent=getS(aid);}
-function initFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');slides.forEach(sl=>{const v=sl.querySelector('video[data-hls]');if(v&&!v._h){v._h=1;const s=v.dataset.hls;if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}else v.src=s;}});
-let cur=-1;function act(idx){if(idx===cur)return;slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));const aid=sl.dataset.aid;if(aid){incV(aid);const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=getV(aid);}}else v.pause();});cur=idx;}
-let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect();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);if(d<bestD){bestD=d;best=i;}});if(best>=0)act(best);},150);});
-setTimeout(()=>act(0),500);
-slides.forEach(sl=>{const v=sl.querySelector('video');v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause();});});}
+function initFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');slides.forEach(sl=>{const v=sl.querySelector('video[data-hls]');if(v&&!v._h){v._h=1;const s=v.dataset.hls;if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}else v.src=s;}});let cur=-1;function act(idx){if(idx===cur)return;slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));const aid=sl.dataset.aid;if(aid){incV(aid);const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=getV(aid);}}else v.pause();});cur=idx;}let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect();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);if(d<bestD){bestD=d;best=i;}});if(best>=0)act(best);},150);});setTimeout(()=>act(0),500);slides.forEach(sl=>{const v=sl.querySelector('video');v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause();});});}
 function toggleMute(){const f=document.getElementById('tiktok-feed');if(!f)return;const vs=f.querySelectorAll('video');const m=!vs[0]?.muted;vs.forEach(v=>v.muted=m);f.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=m?'🔇':'🔊');}
 function toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢':'⬇';}
 function seekV(i,s){const sl=document.getElementById('tslide-'+i);if(sl){const v=sl.querySelector('video');if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+s));}}