VNEWS

Running

App Files Files Community

bep40 commited on 24 days ago

Commit

fad3e19

verified ·

1 Parent(s): f34d700

Upload static/yt_live.js

Browse files

Files changed (1) hide show

static/yt_live.js +776 -252

static/yt_live.js CHANGED Viewed

@@ -1,6 +1,6 @@
-// === VNEWS — VTV LIVE + Inline Recorder v15 ===
-// Features: DVR 5-min rewind (liveDurationInfinity), PiP, mini-player, INLINE RECORDER
-// v15: Use liveDurationInfinity:true → HLS.js treats live as VOD, no auto-snap. User seeks freely in buffer.
 (function(){
   if(window._ytLiveLoaded) return;
@@ -14,303 +14,835 @@
     {id:'vtv9',name:'VTV9',badge:'Miền Bắc'},{id:'vtv10',name:'VTV10',badge:'Cần Thơ'},
     {id:'vtvprime',name:'VTVPrime',badge:'Prime'},
   ];
-  const DEFAULT_CHANNEL = 'vtv6';
-  const DVR_BUFFER_SECONDS = 300;
   const NEEDS_PROXY = /fptplay\.net/;
   const STREAMS = {};
   let _currentCh = null, _hls = null, _loading = false, _blockInserted = false;
   let _streamsLoaded = false, _pipActive = false, _miniActive = false, _vtvPinned = false;
-  let _dvrSeekBarTimer = null;
-  let _dvrUserSeeking = false;
-  let _dvrAtLiveEdge = true;
   const _rec = {
     active: false, startTime: null, endTime: null,
     isRecording: false, recorder: null, chunks: [], blob: null,
-    stream: null, tracks: [], ratio: '16:9', aiTitle: null, aiTags: [],
-    _ratioCrop: null, _aiAborted: false
   };
-  function fmtSec(s){const m=Math.floor(s/60),sec=Math.floor(s%60);return m+':'+(sec<10?'0':'')+sec;}
-  function $(id){return document.getElementById(id);}
-  async function loadAllStreams(){
-    if(_streamsLoaded) return;
-    _streamsLoaded = true;
-    try{
-      const r=await fetch('/api/vtv/streams');
-      if(!r.ok) return;
-      const data=await r.json();
-      for(const ch of CHANNELS){
-        if(data[ch.id]&&data[ch.id].stream_url){
-          let u=data[ch.id].stream_url;
-          if(NEEDS_PROXY.test(u)) u='/api/proxy/m3u8/vtv?url='+encodeURIComponent(u);
-          STREAMS[ch.id]=[u];
-        } else STREAMS[ch.id]=[];
-      }
-    }catch(e){}
-    CHANNELS.forEach(ch=>{
-      const t=document.getElementById('vtvt-'+ch.id);
-      if(t){
-        if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){t.classList.remove('off');t.textContent=ch.name;}
-        else{t.style.opacity='0.35';t.textContent=ch.name+' ✕';}
-      }
-    });
   }
-  function createDVRBar(){
-    const player=$('vtv-player-wrap');
-    if(!player) return;
-    const old=$('vtv-dvr-bar');
-    if(old) old.remove();
-    const bar=document.createElement('div');
-    bar.id='vtv-dvr-bar';
-    bar.innerHTML='<div class="vtv-dvr-track"><div class="vtv-dvr-buffer" id="vtv-dvr-buffer"></div><div class="vtv-dvr-live-dot" id="vtv-dvr-live-dot"></div><div class="vtv-dvr-handle" id="vtv-dvr-handle"></div></div><div class="vtv-dvr-controls"><span class="vtv-dvr-time" id="vtv-dvr-time">LIVE</span><button class="vtv-dvr-live-btn" id="vtv-dvr-live-btn">● LIVE</button></div>';
-    player.appendChild(bar);
-    return bar;
   }
-  function updateDVRUI(){
-    const video=$('vtv-player');
-    if(!video||!_hls) return;
-    const track=$('vtv-dvr-track');
-    const buffer=$('vtv-dvr-buffer');
-    const handle=$('vtv-dvr-handle');
-    const liveDot=$('vtv-dvr-live-dot');
-    const timeLabel=$('vtv-dvr-time');
-    if(!track||!buffer||!handle) return;
-    const curTime=video.currentTime;
-    const duration=video.duration;
-    if(!duration||!isFinite(duration)||duration<=0) return;
-    const bufferStart=Math.max(0,duration-DVR_BUFFER_SECONDS);
-    const bufferWidth=((duration-bufferStart)/DVR_BUFFER_SECONDS)*100;
-    const handlePos=((curTime-bufferStart)/(duration-bufferStart))*100;
-    buffer.style.width=Math.min(100,bufferWidth)+'%';
-    buffer.style.left=(100-Math.min(100,bufferWidth))+'%';
-    liveDot.style.left='100%';
-    handle.style.left=Math.max(0,Math.min(100,handlePos))+'%';
-    const behind=duration-curTime;
-    if(behind<3){timeLabel.textContent='LIVE';timeLabel.style.color='#e74c3c';}
-    else{timeLabel.textContent='-'+fmtSec(behind);timeLabel.style.color='#8ab4d8';}
   }
-  function seekFromTrack(clientX,isRelease){
-    const video=$('vtv-player');
-    if(!video||!_hls) return;
-    const track=$('vtv-dvr-track');
-    if(!track) return;
-    const rect=track.getBoundingClientRect();
-    const pct=Math.max(0,Math.min(1,(clientX-rect.left)/rect.width));
-    const duration=video.duration;
-    if(!duration||!isFinite(duration)||duration<=0) return;
-    const bufferStart=Math.max(0,duration-DVR_BUFFER_SECONDS);
-    const seekTime=bufferStart+pct*(duration-bufferStart);
-    _dvrUserSeeking=!isRelease;
-    _dvrAtLiveEdge=(duration-seekTime<2);
-    video.currentTime=seekTime;
-    if(isRelease){video.play().catch(()=>{});}
-    else{video.pause();}
-    updateDVRUI();
   }
-  function setupDVRBar(){
-    const video=$('vtv-player');
-    if(!video) return;
-    createDVRBar();
-    const track=$('vtv-dvr-track');
-    const handle=$('vtv-dvr-handle');
-    const liveBtn=$('vtv-dvr-live-btn');
-    if(!track||!handle) return;
-    let isDragging=false;
-    track.addEventListener('click',function(e){seekFromTrack(e.clientX,true);});
-    track.addEventListener('touchstart',function(e){e.preventDefault();seekFromTrack(e.touches[0].clientX,false);},{passive:false});
-    track.addEventListener('touchend',function(e){e.preventDefault();seekFromTrack(e.changedTouches[0].clientX,true);},{passive:false});
-    handle.addEventListener('mousedown',function(e){e.preventDefault();e.stopPropagation();isDragging=true;_dvrUserSeeking=true;});
-    handle.addEventListener('touchstart',function(e){e.preventDefault();e.stopPropagation();isDragging=true;_dvrUserSeeking=true;},{passive:false});
-    document.addEventListener('mousemove',function(e){if(isDragging){e.preventDefault();seekFromTrack(e.clientX,false);}});
-    document.addEventListener('touchmove',function(e){if(isDragging){e.preventDefault();seekFromTrack(e.touches[0].clientX,false);}},{passive:false});
-    document.addEventListener('mouseup',function(e){if(isDragging){isDragging=false;_dvrUserSeeking=false;seekFromTrack(e.clientX,true);}});
-    document.addEventListener('touchend',function(e){if(isDragging){isDragging=false;_dvrUserSeeking=false;if(e.changedTouches[0])seekFromTrack(e.changedTouches[0].clientX,true);}});
-    liveBtn.addEventListener('click',function(){
-      const v=$('vtv-player');
-      if(v&&_hls){
-        _dvrUserSeeking=false;_dvrAtLiveEdge=true;
-        const dur=v.duration;
-        if(dur&&isFinite(dur)&&dur>0){v.currentTime=dur;}
-        v.play().catch(()=>{});
-        updateDVRUI();
-      }
     });
-    if(_dvrSeekBarTimer) clearInterval(_dvrSeekBarTimer);
-    _dvrSeekBarTimer=setInterval(updateDVRUI,1000);
-    video.addEventListener('timeupdate',function(){
-      if(!_hls) return;
-      const dur=video.duration;
-      if(!dur||!isFinite(dur)) return;
-      _dvrAtLiveEdge=((dur-video.currentTime)<2);
     });
   }
-  function showDVRBar(){const bar=$('vtv-dvr-bar');if(bar) bar.classList.add('visible');}
-  function setupPinButton(){
-    const block=document.getElementById('vtv-block');
-    if(!block) return;
-    let pinBtn=block.querySelector('.vtv-pin-btn');
-    if(!pinBtn){
-      pinBtn=document.createElement('button');
-      pinBtn.className='vtv-pin-btn';pinBtn.textContent='📌';pinBtn.title='Ghim khung xem';
-      block.style.position='relative';block.appendChild(pinBtn);
     }
-    pinBtn.onclick=function(){
-      _vtvPinned=!_vtvPinned;
-      pinBtn.style.color=_vtvPinned?'#e74c3c':'#8ab4d8';
-      if(_vtvPinned){block.style.position='fixed';block.style.bottom='12px';block.style.right='12px';block.style.width='360px';block.style.zIndex='9999';block.style.borderRadius='12px';block.style.boxShadow='0 4px 24px rgba(0,0,0,0.5)';}
-      else{block.style.position='';block.style.bottom='';block.style.right='';block.style.width='';block.style.zIndex='';block.style.borderRadius='';block.style.boxShadow='';}
-    };
   }
-  async function togglePiP(){
-    const video=$('vtv-player');
-    if(!video) return;
-    try{
-      if(document.pictureInPictureElement===video){await document.exitPictureInPicture();_pipActive=false;}
-      else{await video.requestPictureInPicture();_pipActive=true;}
-    }catch(e){}
   }
-  function activateMiniPlayer(){
-    const video=$('vtv-player');
-    if(!video||!video.src) return;
-    _miniActive=true;
-    const mini=document.createElement('div');
-    mini.id='vtv-mini-player';
-    mini.innerHTML='<div class="vtv-mini-header"><span id="vtv-mini-ch">VTV</span><span id="vtv-mini-epg"></span><button id="vtv-mini-close" style="background:none;border:none;color:#e74c3c;font-size:18px;cursor:pointer;">✕</button></div><div class="vtv-mini-body"><div class="vtv-mini-loading">Đang tải...</div></div>';
-    document.body.appendChild(mini);
-    const mv=mini.querySelector('.vtv-mini-body');
-    video.style.display='none';mv.appendChild(video);
-    video.style.display='block';video.style.width='100%';video.style.height='100%';
-    mini.querySelector('.vtv-mini-loading').remove();
-    $('vtv-mini-close').onclick=closeMiniPlayer;
-    if(_currentCh){fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{const p=d.programs||[];const n=p.find(x=>x.now);$('vtv-mini-epg').textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});}
   }
-  function closeMiniPlayer(){
-    if(!_miniActive) return;
-    _miniActive=false;
-    const mini=$('vtv-mini-player');
-    if(!mini) return;
-    const video=$('vtv-player');
-    if(video){mini.querySelector('.vtv-mini-body').appendChild(video);video.style.display='block';}
-    mini.remove();
-    const wrap=$('vtv-player-wrap');
-    if(wrap&&video){wrap.appendChild(video);video.style.display='block';}
-  }
-  function initRecorder(){
-    const block=document.getElementById('vtv-block');
-    if(!block) return;
-    let recBtn=block.querySelector('.vtv-rec-btn');
-    if(!recBtn){
-      recBtn=document.createElement('button');
-      recBtn.className='vtv-rec-btn';recBtn.textContent='⏺ REC';recBtn.title='Quay màn hình';
-      block.style.position='relative';block.appendChild(recBtn);
     }
-    recBtn.onclick=function(){
-      if(!_rec.active){
-        _rec.active=true;recBtn.style.color='#e74c3c';recBtn.textContent='⏹ STOP';
-        _rec.chunks=[];_rec.blob=null;
-        const video=$('vtv-player');
-        if(video&&video.captureStream){
-          _rec.stream=video.captureStream();_rec.tracks=_rec.stream.getTracks();
-          try{
-            _rec.recorder=new MediaRecorder(_rec.stream,{mimeType:'video/webm;codecs=vp9'});
-            _rec.recorder.ondataavailable=function(e){if(e.data.size>0)_rec.chunks.push(e.data);};
-            _rec.recorder.onstop=function(){_rec.blob=new Blob(_rec.chunks,{type:'video/webm'});_rec.chunks=[];_rec.tracks.forEach(t=>t.stop());_rec.stream=null;showRecordPreview(_rec.blob);};
-            _rec.recorder.start(1000);_rec.isRecording=true;_rec.startTime=Date.now();
-          }catch(e){_rec.tracks.forEach(t=>t.stop());_rec.stream=null;_rec.active=false;recBtn.style.color='';recBtn.textContent='⏺ REC';}
         }
-      }else{
-        if(_rec.isRecording&&_rec.recorder&&_rec.recorder.state==='recording'){_rec.recorder.stop();_rec.isRecording=false;_rec.endTime=Date.now();}
-        _rec.active=false;recBtn.style.color='';recBtn.textContent='⏺ REC';
       }
     };
   }
-  function showRecordPreview(blob){
-    const url=URL.createObjectURL(blob);
-    const div=document.createElement('div');
-    div.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;';
-    div.innerHTML='<video src="'+url+'" controls style="max-width:80%;max-height:60%;border-radius:8px;"></video><div style="display:flex;gap:8px;"><button id="rec-upload" style="padding:8px 16px;background:#2ecc71;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;">📤 Upload</button><button id="rec-close" style="padding:8px 16px;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;">✕ Đóng</button></div>';
-    document.body.appendChild(div);
-    $('rec-close').onclick=function(){URL.revokeObjectURL(url);div.remove();};
-    $('rec-upload').onclick=function(){const v=div.querySelector('video');v.pause();uploadRecording(blob,div,url);};
   }
-  async function uploadRecording(blob,div,url){
-    const btn=$('rec-upload');btn.textContent='⏳ Đang upload...';btn.disabled=true;
-    try{const fd=new FormData();fd.append('file',blob,'recording.webm');const r=await fetch('/api/upload',{method:'POST',body:fd});const d=await r.json();if(d.ok){btn.textContent='✅ Upload thành công!';setTimeout(()=>{URL.revokeObjectURL(url);div.remove();},1500);}else{btn.textContent='❌ Lỗi: '+(d.error||'unknown');btn.disabled=false;}}catch(e){btn.textContent='❌ Lỗi kết nối';btn.disabled=false;}
   }
-  function switchChannel(chId){
-    if(_loading) return;
-    _loading=true;
-    const ch=CHANNELS.find(c=>c.id===chId);
-    if(!ch){_loading=false;return;}
-    _currentCh=chId;
-    const video=$('vtv-player');
-    const loadEl=$('vtv-loading');
-    const errEl=$('vtv-error');
-    const errMsg=$('vtv-error-msg');
-    if(!video){_loading=false;return;}
-    video.style.display='none';
-    if(loadEl) loadEl.style.display='flex';
-    if(errEl) errEl.style.display='none';
     if(_hls){_hls.destroy();_hls=null;}
-    _dvrAtLiveEdge=true;
-    const oldBar=$('vtv-dvr-bar');
-    if(oldBar) oldBar.remove();
-    if(_dvrSeekBarTimer){clearInterval(_dvrSeekBarTimer);_dvrSeekBarTimer=null;}
     const urls=STREAMS[chId]||[];
-    if(!urls.length){if(loadEl)loadEl.style.display='none';if(errEl){errEl.style.display='flex';errMsg.textContent=chId==='vtvprime'?'VTVPrime: Kênh trả phí.':ch.name+': Không có luồng.';}_loading=false;return;}
     _tryPlay(video,urls,0,ch.name,loadEl,errEl,errMsg);
     loadEpg(chId);
-    if(_miniActive){$('vtv-mini-ch').textContent=ch.name;fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{const p=d.programs||[];const n=p.find(x=>x.now);$('vtv-mini-epg').textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});}
-    setTimeout(()=>{setupDVRBar();showDVRBar();},2000);
-    _loading=false;
-  }
-  function loadEpg(chId){
-    fetch('/api/vtv/epg/'+chId).then(r=>r.json()).then(d=>{const p=d.programs||[];const n=p.find(x=>x.now);const el=$('vtv-epg-now');if(el) el.textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});
-  }
   function _tryPlay(video,urls,idx,name,loadEl,errEl,errMsg){
-    if(idx>=urls.length){if(loadEl)loadEl.style.display='none';if(errEl){errEl.style.display='flex';errMsg.textContent=name+': Tất cả nguồn lỗi.';}return;}
-    const src=urls[idx];
-    if(loadEl) loadEl.innerHTML='<div class="vtv-spinner"></div>Kết nối '+name+' ('+(idx+1)+'/'+urls.length+')...';
     if(typeof Hls!=='undefined'&&Hls.isSupported()){
-      const hls=new Hls({
-        enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,
-        maxBufferLength:120,maxMaxBufferLength:180,
-        liveDurationInfinity:true,
-        liveBackBufferLength:DVR_BUFFER_SECONDS,
-        fragLoadingTimeOut:10000,manifestLoadingTimeOut:10000
-      });
-      _hls=hls; hls.loadSource(src); hls.attachMedia(video);
-      hls.on(Hls.Events.MANIFEST_PARSED,(ev,data)=>{
-        loadEl.style.display='none';video.style.display='block';
-        const dur=video.duration;
-        if(dur&&isFinite(dur)&&dur>0){video.currentTime=dur;}
-        video.play().catch(()=>{});
-      });
       let rec=0; hls.on(Hls.Events.ERROR,(ev,data)=>{if(data.fatal){if(data.type===Hls.ErrorTypes.NETWORK_ERROR){rec++;if(rec<=3)setTimeout(()=>hls.startLoad(),2000);else{hls.destroy();_hls=null;_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);}}else if(data.type===Hls.ErrorTypes.MEDIA_ERROR){try{hls.recoverMediaError();}catch(e){}}else{hls.destroy();_hls=null;_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);}}});
     }else if(video.canPlayType('application/vnd.apple.mpegurl')){
       video.src=src;
       video.addEventListener('loadedmetadata',()=>{video.play().catch(()=>{});loadEl.style.display='none';video.style.display='block';},{once:true});
       video.addEventListener('error',()=>{_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);},{once:true});
-    }else{if(loadEl)loadEl.style.display='none';if(errEl){errEl.style.display='flex';errMsg.textContent='Không hỗ trợ HLS';}}
   }
   const _origShowView=window.showView;
   window.showView=function(id){if(id==='view-home'&&_miniActive)closeMiniPlayer();else if(id!=='view-home'&&_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origShowView.apply(this,arguments);};
   const _origReadArticle=window.readArticle; if(_origReadArticle){window.readArticle=function(url){if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origReadArticle.apply(this,arguments);};}
@@ -321,12 +853,4 @@
     window.loadHome=async function(){const old=document.getElementById('vtv-block');if(old)old.remove();_blockInserted=false;const r=await _origLoadHome.apply(this,arguments);try{pinBlock();}catch(e){}return r;};
     window.loadHome.__vtvWrapped=true;
   }
-  window._vtvPlay=switchChannel;
-  window._vtvPiP=togglePiP;
-  loadAllStreams().then(()=>{setTimeout(()=>{window._vtvPlay(DEFAULT_CHANNEL);},300);});
-  setTimeout(()=>{const pipBtn=document.getElementById('vtv-pip-btn');if(pipBtn) pipBtn.onclick=togglePiP;setupPinButton();initRecorder();},1000);
 })();

+// === VNEWS — VTV LIVE + Inline Recorder v7 ===
+// Features: PiP, mini-player, INLINE RECORDER with ratio crop + AI title + Short AI upload
+// FIX v7: uploadToWall robust JSON parse, processRatio timeout fallback, no premature revoke
 (function(){
   if(window._ytLiveLoaded) return;
     {id:'vtv9',name:'VTV9',badge:'Miền Bắc'},{id:'vtv10',name:'VTV10',badge:'Cần Thơ'},
     {id:'vtvprime',name:'VTVPrime',badge:'Prime'},
   ];
+  const DEFAULT_CHANNEL = 'vtv3';
   const NEEDS_PROXY = /fptplay\.net/;
   const STREAMS = {};
   let _currentCh = null, _hls = null, _loading = false, _blockInserted = false;
   let _streamsLoaded = false, _pipActive = false, _miniActive = false, _vtvPinned = false;
+  // ===== RECORDER STATE =====
   const _rec = {
     active: false, startTime: null, endTime: null,
     isRecording: false, recorder: null, chunks: [], blob: null,
+    ratio: 'original', _dragMarker: null, _recTimer: null,
   };
+  // ===== STYLES =====
+  const style = document.createElement('style');
+  style.textContent = `
+  .vtv-wrap{position:relative;margin:6px 4px;background:#111;border:1px solid #0066cc;border-radius:10px;overflow:hidden}
+  .vtv-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#003366,#1a1a1a)}
+  .vtv-title{font-size:13px;font-weight:800;color:#00ccff}
+  .vtv-badge{font-size:10px;font-weight:800;color:#00ccff;animation:vtvp 1.3s infinite}
+  @keyframes vtvp{0%,100%{opacity:1}50%{opacity:.3}}
+  .vtv-tabs{display:flex;gap:3px;padding:6px 8px;overflow-x:auto;scrollbar-width:none;background:#0d1a2a}
+  .vtv-tabs::-webkit-scrollbar{display:none}
+  .vtv-tab{padding:4px 8px;background:#1a2a3a;border:1px solid #2a3a4a;border-radius:10px;color:#8ab4d8;font-size:9px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
+  .vtv-tab:hover{background:#0b4a7a;color:#fff}
+  .vtv-tab.on{background:#0066cc;border-color:#00ccff;color:#fff;font-weight:700}
+  .vtv-tab.off{opacity:.35;pointer-events:none}
+  .vtv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:180px}
+  .vtv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+  .vtv-err{display:flex;align-items:center;justify-content:center;height:180px;color:#888;font-size:12px;text-align:center;padding:20px;flex-direction:column;gap:8px}
+  .vtv-err button{background:#0066cc;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer}
+  .vtv-load{display:flex;align-items:center;justify-content:center;height:180px;color:#00ccff;font-size:12px;flex-direction:column;gap:8px}
+  .vtv-spinner{width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
+  @keyframes vtvspin{to{transform:rotate(360deg)}}
+  .vtv-controls{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#0d1a2a;border-top:1px solid #1a2a3a}
+  .vtv-pip-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}
+  .vtv-pip-btn:hover{background:#0b4a7a;color:#fff}
+  .vtv-pip-btn.on{background:#0066cc;border-color:#00ccff;color:#fff}
+  .vtv-pip-btn svg{width:12px;height:12px;fill:currentColor}
+  .vtv-epg{margin:0;padding:6px 10px;background:#0a1628;border-top:1px solid #1a2a3a}
+  .vtv-epg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
+  .vtv-epg-title{font-size:10px;font-weight:700;color:#00ccff}
+  .vtv-epg-toggle{background:none;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 8px;border-radius:6px;cursor:pointer}
+  .vtv-epg-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
+  .vtv-epg-list::-webkit-scrollbar{display:none}
+  .vtv-epg-item{flex:0 0 auto;padding:3px 6px;background:#1a2a3a;border-radius:4px;font-size:8px;color:#8ab4d8;white-space:nowrap;cursor:pointer}
+  .vtv-epg-item:hover{background:#2a4a6a}
+  .vtv-epg-item.now{background:#0066cc;color:#fff;font-weight:700}
+  .vtv-epg-item .t{font-size:7px;color:#6a8aaa}
+  .vtv-epg-item.now .t{color:#aaccee}
+  .vtv-epg-item .n{color:#ccc;font-size:8px}
+  .vtv-epg-item.now .n{color:#fff}
+  .vtv-epg-empty{color:#666;font-size:9px;padding:4px}
+  .vtv-epg-loading{color:#00ccff;font-size:9px;padding:4px;display:flex;align-items:center;gap:6px}
+  .vtv-epg-sp{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
+  .vtv-pin-btn{position:absolute;top:6px;right:8px;z-index:5;background:rgba(0,0,0,.5);border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 6px;border-radius:4px;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:3px}
+  .vtv-pin-btn:hover{background:#0b4a7a;color:#fff}
+  .vtv-pin-btn.pinned{background:#0066cc;border-color:#00ccff;color:#fff}
+  .vtv-wrap.vtv-sticky{position:sticky;top:0;z-index:48;transition:all .25s ease;box-shadow:0 4px 24px rgba(0,102,204,.35)}
+  .vtv-wrap.vtv-sticky .vtv-epg{display:none}
+  .vtv-wrap.vtv-sticky .vtv-controls{display:none}
+  .vtv-wrap.vtv-sticky .vtv-tabs{padding:3px 8px}
+  .vtv-wrap.vtv-sticky .vtv-tab{padding:3px 7px;font-size:8px}
+  .vtv-wrap.vtv-sticky .vtv-frame{max-height:140px;min-height:100px}
+  .vtv-wrap.vtv-sticky .vtv-frame video{max-height:140px}
+  .vtv-wrap.vtv-sticky .vtv-load{height:100px}
+  .vtv-wrap.vtv-sticky .vtv-err{height:100px}
+  .vtv-wrap.vtv-sticky .vtv-head{padding:5px 10px}
+  .vtv-wrap.vtv-sticky .vtv-title{font-size:11px}
+  .vtv-wrap.vtv-sticky .vtv-badge{font-size:8px}
+  .vtv-wrap.vtv-sticky .vtv-pin-btn{top:4px;right:6px}
+  .vtv-rec-btn{background:#660000;border:1px solid #990000;color:#ff6666;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-weight:700}
+  .vtv-rec-btn:hover{background:#990000;color:#fff}
+  .vtv-rec-btn.recording{background:#cc0000;border-color:#ff0000;color:#fff;animation:vtv-rec-pulse 1s infinite}
+  @keyframes vtv-rec-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+  .vtv-rec-btn svg{width:12px;height:12px;fill:currentColor}
+  .vtv-inline-rec{display:none;padding:8px 10px;background:#0a0a1a;border-top:1px solid #1a1a3a}
+  .vtv-inline-rec.show{display:block}
+  .vtv-inline-rec .rec-bar{position:relative;height:32px;background:#000;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid #2a2a4a;margin-bottom:6px;user-select:none}
+  .vtv-inline-rec .rec-bar .rec-progress{position:absolute;top:0;bottom:0;background:rgba(155,89,182,.3);left:0;width:0%;pointer-events:none}
+  .vtv-inline-rec .rec-bar .rec-marker{position:absolute;top:0;bottom:0;width:4px;z-index:2;border-radius:2px}
+  .vtv-inline-rec .rec-bar .rec-marker.s{background:#2ecc71}
+  .vtv-inline-rec .rec-bar .rec-marker.e{background:#e74c3c}
+  .vtv-inline-rec .rec-time{display:flex;justify-content:space-between;font-size:9px;color:#888;margin-bottom:6px}
+  .vtv-inline-rec .rec-controls{display:flex;gap:4px}
+  .vtv-inline-rec .rec-controls button{flex:1;padding:6px;border:none;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer}
+  .vtv-inline-rec .rec-controls .rec-set-start{background:#1a3a1a;border:1px solid #2d6a2d;color:#5cb87a}
+  .vtv-inline-rec .rec-controls .rec-set-end{background:#3a1a1a;border:1px solid #6a2d2d;color:#e74c3c}
+  .vtv-inline-rec .rec-controls .rec-go{background:#1a0a3a;border:1px solid #3a2a6a;color:#9b59b6}
+  .vtv-inline-rec .rec-controls .rec-reset{background:#222;border:1px solid #333;color:#888}
+  .vtv-inline-rec .rec-hint{font-size:9px;color:#666;text-align:center;margin-top:4px}
+  .vtv-inline-rec .rec-status{font-size:10px;color:#888;text-align:center;padding:4px;margin-top:4px;background:#111;border-radius:4px}
+  .vtv-inline-rec .rec-status.ok{color:#2ecc71}
+  .vtv-inline-rec .rec-status.err{color:#e74c3c}
+  .vtv-inline-rec .rec-status.recording{color:#e74c3c;animation:vtv-rec-pulse 1s infinite}
+  .vtv-rec-panel{display:none;padding:10px;background:#0d0d20;border-top:1px solid #2a1a4a}
+  .vtv-rec-panel.show{display:block}
+  .vtv-rec-panel .rec-panel-title{font-size:11px;font-weight:700;color:#9b59b6;margin-bottom:8px}
+  .vtv-rec-panel .rec-preview-wrap{margin-bottom:8px;text-align:center}
+  .vtv-rec-panel .rec-preview-wrap video{max-width:100%;max-height:180px;border-radius:6px;background:#000}
+  .vtv-rec-panel .rec-ratio-row{display:flex;gap:4px;margin-bottom:8px}
+  .vtv-rec-panel .rec-ratio-row button{flex:1;padding:6px;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:6px;color:#888;font-size:10px;cursor:pointer}
+  .vtv-rec-panel .rec-ratio-row button.active{border-color:#9b59b6;color:#9b59b6;background:#2a1a4a}
+  .vtv-rec-panel .rec-actions{display:flex;gap:4px}
+  .vtv-rec-panel .rec-actions button{flex:1;padding:8px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer}
+  .vtv-rec-panel .rec-actions .rec-download{background:#2d8659;color:#fff}
+  .vtv-rec-panel .rec-actions .rec-share{background:#9b59b6;color:#fff}
+  .vtv-rec-panel .rec-proc{text-align:center;padding:12px;color:#9b59b6;font-size:12px;display:none}
+  .vtv-rec-panel .rec-title-input{width:100%;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:6px;padding:8px;color:#ccc;font-size:11px;margin-bottom:8px;box-sizing:border-box}
+  .vtv-rec-panel .rec-title-input:focus{border-color:#9b59b6;outline:none}
+  .vtv-rec-panel .rec-ai-title-row{display:flex;gap:4px;margin-bottom:8px}
+  .vtv-rec-panel .rec-ai-title-row button{flex:1;padding:6px;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:6px;color:#888;font-size:10px;cursor:pointer}
+  .vtv-rec-panel .rec-ai-title-row button:hover{border-color:#9b59b6;color:#9b59b6}
+  .vtv-rec-panel .rec-ai-title-row button:disabled{opacity:.4;cursor:not-allowed}
+  .vtv-mini{position:fixed;top:0;left:0;right:0;z-index:99990;background:#000;border-bottom:2px solid #0066cc;box-shadow:0 4px 20px rgba(0,102,204,.4);display:none;transition:transform .3s ease}
+  .vtv-mini.show{display:block}
+  .vtv-mini.hidden{transform:translateY(-88%)}
+  .vtv-mini-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;max-height:180px}
+  .vtv-mini-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+  .vtv-mini-bar{display:flex;align-items:center;justify-content:space-between;padding:3px 8px;background:linear-gradient(90deg,#003366,#1a1a1a)}
+  .vtv-mini-ch{font-size:10px;font-weight:700;color:#00ccff}
+  .vtv-mini-epg{font-size:9px;color:#8ab4d8;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:8px}
+  .vtv-mini-btns{display:flex;gap:3px}
+  .vtv-mini-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 6px;border-radius:4px;cursor:pointer}
+  .vtv-mini-btn:hover{background:#0b4a7a;color:#fff}
+  .vtv-mini-btn.x{background:#600;border-color:#900;color:#f66}
+  .vtv-mini-btn.x:hover{background:#900;color:#fff}
+  .vtv-mini-peek{position:absolute;bottom:-18px;right:10px;background:#0066cc;color:#fff;font-size:9px;padding:2px 8px;border-radius:0 0 6px 6px;cursor:pointer;display:none}
+  .vtv-mini.hidden .vtv-mini-peek{display:block}
+  `;
+  document.head.appendChild(style);
+  // ===== HELPERS =====
+  function fmtSec(s){ return String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0'); }
+  function escH(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+  function recStatus(msg, type) {
+    const el = document.getElementById('vtv-rec-status');
+    if (el) { el.textContent = msg; el.className = 'rec-status' + (type ? ' ' + type : ''); }
   }
+  function downloadBlob(blob, filename) {
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob); a.download = filename; a.click();
+    URL.revokeObjectURL(a.href);
+    recStatus('✅ Đã tải: ' + filename, 'ok');
   }
+  function showProc(text) {
+    const el = document.getElementById('vtv-rec-proc');
+    if (el) { el.style.display = 'block'; document.getElementById('vtv-rec-proc-text').textContent = text; }
+  }
+  function hideProc() {
+    const el = document.getElementById('vtv-rec-proc');
+    if (el) el.style.display = 'none';
   }
+  // ===== UPLOAD TO WALL (Short AI) — v7: robust JSON parse =====
+  function uploadToWall(blob, title, source) {
+    const formData = new FormData();
+    formData.append('video', blob, `vtv-${_currentCh}-${Date.now()}.webm`);
+    formData.append('title', title || `Record LIVE ${_currentCh?.toUpperCase()} - ${new Date().toLocaleString('vi-VN')}`);
+    formData.append('source', source || 'vtv_inline_recorder');
+    showProc('⏳ Đang upload lên Short AI...');
+    return fetch('/api/wall', { method: 'POST', body: formData })
+      .then(r => {
+        console.log('[VTV Upload] HTTP status:', r.status, r.statusText);
+        return r.text().then(text => {
+          console.log('[VTV Upload] Response text:', text.substring(0, 200));
+          let data;
+          try { data = JSON.parse(text); } catch(e) {
+            console.error('[VTV Upload] JSON parse failed:', e, 'Raw:', text.substring(0, 500));
+            throw new Error('Server trả về lỗi (không phải JSON). Status: ' + r.status);
+          }
+          return data;
+        });
+      })
+      .then(data => {
+        hideProc();
+        console.log('[VTV Upload] Parsed data:', data);
+        if (data && data.ok === true) {
+          recStatus('✅ Đã tạo Short AI! Xem trong mục Tường AI.', 'ok');
+          return data;
+        } else {
+          throw new Error(data && data.error ? data.error : 'Upload thất bại (ok=false)');
+        }
+      })
+      .catch(e => {
+        hideProc();
+        console.error('[VTV Upload] Error:', e);
+        recStatus('⚠️ ' + e.message + '. Đang tải về...', 'err');
+        setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
+        throw e;
+      });
   }
+  // ===== AI TITLE GENERATION =====
+  async function generateAITitle(blob, channelName) {
+    return new Promise((resolve) => {
+      const video = document.createElement('video');
+      video.src = URL.createObjectURL(blob);
+      video.muted = true;
+      video.onloadedmetadata = function() {
+        URL.revokeObjectURL(video.src);
+        const dur = Math.round(video.duration || 0);
+        const now = new Date();
+        const timeStr = now.toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'});
+        const dateStr = now.toLocaleDateString('vi-VN',{day:'2-digit',month:'2-digit'});
+        const titles = [
+          `🔴 LIVE ${channelName} - ${timeStr} ${dateStr}`,
+          `📺 ${channelName} - Video ngắn ${dur}s`,
+          `🎬 ${channelName} Record - ${timeStr}`,
+          `⚡ ${channelName} Highlights - ${dateStr}`,
+          `📱 ${channelName} Short - ${timeStr} ${dateStr}`,
+        ];
+        const idx = dur < 15 ? 4 : dur < 30 ? 1 : dur < 45 ? 2 : 0;
+        resolve(titles[idx % titles.length]);
+      };
+      video.onerror = function() {
+        URL.revokeObjectURL(video.src);
+        resolve(`📺 Record ${channelName} - ${new Date().toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'})}`);
+      };
     });
+  }
+  // ===== BUILD INLINE RECORDER =====
+  function buildInlineRecorder() {
+    const controls = document.querySelector('.vtv-controls');
+    if (!controls || document.getElementById('vtv-rec-btn')) return;
+    const recBtn = document.createElement('button');
+    recBtn.id = 'vtv-rec-btn';
+    recBtn.className = 'vtv-rec-btn';
+    recBtn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
+    recBtn.title = 'Record video ngắn từ LIVE (max 60s)';
+    recBtn.onclick = toggleRecPanel;
+    controls.appendChild(recBtn);
+    const inlineRec = document.createElement('div');
+    inlineRec.id = 'vtv-inline-rec';
+    inlineRec.className = 'vtv-inline-rec';
+    inlineRec.innerHTML = `
+      <div class="rec-time">
+        <span id="vtv-rec-time-start">00:00</span>
+        <span id="vtv-rec-time-dur">Duration: 0s</span>
+        <span id="vtv-rec-time-end">01:00</span>
+      </div>
+      <div class="rec-bar" id="vtv-rec-bar">
+        <div class="rec-progress" id="vtv-rec-progress"></div>
+        <div class="rec-marker s" id="vtv-rec-mk-start" style="display:none"></div>
+        <div class="rec-marker e" id="vtv-rec-mk-end" style="display:none"></div>
+      </div>
+      <div class="rec-controls">
+        <button class="rec-set-start" id="vtv-rec-set-start" onclick="window._vtvRecSetStart()">🔵 Điểm đầu</button>
+        <button class="rec-set-end" id="vtv-rec-set-end" onclick="window._vtvRecSetEnd()" disabled>🔴 Điểm cuối</button>
+        <button class="rec-go" id="vtv-rec-go" onclick="window._vtvRecGo()" disabled>⏺ Record!</button>
+        <button class="rec-reset" onclick="window._vtvRecReset()">↺ Reset</button>
+      </div>
+      <div class="rec-hint" id="vtv-rec-hint">Chọn điểm bắt đầu → kết thúc (tối đa 60s)</div>
+      <div class="rec-status" id="vtv-rec-status">Sẵn sàng</div>
+    `;
+    controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
+    const recPanel = document.createElement('div');
+    recPanel.id = 'vtv-rec-panel';
+    recPanel.className = 'vtv-rec-panel';
+    recPanel.innerHTML = `
+      <div class="rec-panel-title">🎬 Đã record xong!</div>
+      <div class="rec-preview-wrap" id="vtv-rec-preview-wrap" style="display:none">
+        <video id="vtv-rec-preview-vid" controls style="max-width:100%;max-height:180px;border-radius:6px;background:#000"></video>
+      </div>
+      <input type="text" class="rec-title-input" id="vtv-rec-title-input" placeholder="Tiêu đề video (để trống = AI tự tạo)">
+      <div class="rec-ai-title-row">
+        <button onclick="window._vtvRecGenAITitle()" id="vtv-rec-ai-btn">🤖 AI tạo tiêu đề</button>
+      </div>
+      <div class="rec-ratio-row">
+        <button class="active" data-ratio="original" onclick="window._vtvRecSetRatio('original')">📺 Gốc</button>
+        <button data-ratio="1:1" onclick="window._vtvRecSetRatio('1:1')">⬜ 1:1</button>
+        <button data-ratio="9:16" onclick="window._vtvRecSetRatio('9:16')">📱 9:16</button>
+      </div>
+      <div class="rec-actions">
+        <button class="rec-download" onclick="window._vtvRecDownload()">💾 Lưu về máy</button>
+        <button class="rec-share" onclick="window._vtvRecShare()">🎬 Tạo Short AI</button>
+      </div>
+      <div class="rec-proc" id="vtv-rec-proc">
+        <div class="vtv-spinner" style="width:20px;height:20px;margin:0 auto 6px"></div>
+        <span id="vtv-rec-proc-text">Đang xử lý...</span>
+      </div>
+    `;
+    inlineRec.parentNode.insertBefore(recPanel, inlineRec.nextSibling);
+    document.getElementById('vtv-rec-bar').addEventListener('click', function(e) {
+      if (!_rec.isRecording) handleRecBarClick(e);
     });
+    document.getElementById('vtv-rec-mk-start').addEventListener('mousedown', function(e){ e.preventDefault(); e.stopPropagation(); _rec._dragMarker = 'start'; });
+    document.getElementById('vtv-rec-mk-start').addEventListener('touchstart', function(e){ e.preventDefault(); e.stopPropagation(); _rec._dragMarker = 'start'; }, {passive:false});
+    document.getElementById('vtv-rec-mk-end').addEventListener('mousedown', function(e){ e.preventDefault(); e.stopPropagation(); _rec._dragMarker = 'end'; });
+    document.getElementById('vtv-rec-mk-end').addEventListener('touchstart', function(e){ e.preventDefault(); e.stopPropagation(); _rec._dragMarker = 'end'; }, {passive:false});
   }
+  // Global drag
+  document.addEventListener('mousemove', function(e) { if (_rec._dragMarker) dragMarker(e.clientX); });
+  document.addEventListener('touchmove', function(e) { if (_rec._dragMarker) dragMarker(e.touches[0].clientX); }, {passive:false});
+  document.addEventListener('mouseup', function(){ _rec._dragMarker = null; });
+  document.addEventListener('touchend', function(){ _rec._dragMarker = null; });
+  function dragMarker(clientX) {
+    const bar = document.getElementById('vtv-rec-bar');
+    if (!bar) return;
+    const rect = bar.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const time = pct * 60;
+    if (_rec._dragMarker === 'start') {
+      if (_rec.endTime !== null && time >= _rec.endTime - 1) return;
+      _rec.startTime = time;
+      const mk = document.getElementById('vtv-rec-mk-start');
+      mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-start').textContent = fmtSec(time);
+    } else {
+      if (_rec.startTime !== null && time <= _rec.startTime + 1) return;
+      _rec.endTime = time;
+      const mk = document.getElementById('vtv-rec-mk-end');
+      mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-end').textContent = fmtSec(time);
     }
+    updateRecBar();
   }
+  function handleRecBarClick(e) {
+    const video = document.getElementById('vtv-player');
+    if (!video || !video.src) { recStatus('⚠️ Chưa có stream!'); return; }
+    const bar = document.getElementById('vtv-rec-bar');
+    const rect = bar.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const time = pct * 60;
+    if (_rec.startTime === null) {
+      _rec.startTime = time;
+      const mk = document.getElementById('vtv-rec-mk-start');
+      mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-start').textContent = fmtSec(time);
+      document.getElementById('vtv-rec-set-end').disabled = false;
+      recStatus('Điểm đầu: ' + fmtSec(time) + '. Chọn điểm cuối.', '');
+    } else if (_rec.endTime === null) {
+      if (time <= _rec.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
+      const dur = time - _rec.startTime;
+      if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
+      _rec.endTime = time;
+      const mk = document.getElementById('vtv-rec-mk-end');
+      mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-end').textContent = fmtSec(time);
+      updateRecBar();
+      recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
+      document.getElementById('vtv-rec-go').disabled = false;
+    }
   }
+  function updateRecBar() {
+    const s = _rec.startTime || 0, e = _rec.endTime || 60;
+    const dur = e - s;
+    document.getElementById('vtv-rec-progress').style.left = (s/60*100) + '%';
+    document.getElementById('vtv-rec-progress').style.width = (dur/60*100) + '%';
+    document.getElementById('vtv-rec-time-dur').textContent = 'Duration: ' + Math.round(dur) + 's';
   }
+  // ===== RECORDER CONTROLS =====
+  window._vtvRecSetStart = function() {
+    const video = document.getElementById('vtv-player');
+    if (!video || !video.src) { recStatus('⚠️ Chưa có stream!', 'err'); return; }
+    _rec.startTime = video.currentTime || 0;
+    const pct = _rec.startTime / 60 * 100;
+    const mk = document.getElementById('vtv-rec-mk-start');
+    mk.style.display = 'block'; mk.style.left = pct + '%';
+    document.getElementById('vtv-rec-time-start').textContent = fmtSec(_rec.startTime);
+    document.getElementById('vtv-rec-set-end').disabled = false;
+    recStatus('Điểm đầu: ' + fmtSec(_rec.startTime), '');
+  };
+  window._vtvRecSetEnd = function() {
+    if (_rec.startTime === null) { recStatus('⚠️ Chọn điểm đầu trước!', 'err'); return; }
+    const video = document.getElementById('vtv-player');
+    if (!video) return;
+    const cur = video.currentTime || 0;
+    if (cur <= _rec.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
+    const dur = cur - _rec.startTime;
+    if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
+    _rec.endTime = cur;
+    const pct = cur / 60 * 100;
+    const mk = document.getElementById('vtv-rec-mk-end');
+    mk.style.display = 'block'; mk.style.left = pct + '%';
+    document.getElementById('vtv-rec-time-end').textContent = fmtSec(cur);
+    updateRecBar();
+    recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
+    document.getElementById('vtv-rec-go').disabled = false;
+  };
+  window._vtvRecReset = function() {
+    _rec.startTime = null; _rec.endTime = null; _rec.isRecording = false; _rec.blob = null;
+    if (_rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
+    clearTimeout(_rec._recTimer);
+    document.getElementById('vtv-rec-mk-start').style.display = 'none';
+    document.getElementById('vtv-rec-mk-end').style.display = 'none';
+    document.getElementById('vtv-rec-progress').style.width = '0%';
+    document.getElementById('vtv-rec-time-start').textContent = '00:00';
+    document.getElementById('vtv-rec-time-end').textContent = '01:00';
+    document.getElementById('vtv-rec-time-dur').textContent = 'Duration: 0s';
+    document.getElementById('vtv-rec-set-start').disabled = false;
+    document.getElementById('vtv-rec-set-end').disabled = true;
+    document.getElementById('vtv-rec-go').disabled = true;
+    document.getElementById('vtv-rec-panel').classList.remove('show');
+    document.getElementById('vtv-rec-title-input').value = '';
+    recStatus('Đã reset.', '');
+    const btn = document.getElementById('vtv-rec-btn');
+    if (btn) { btn.classList.remove('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; }
+  };
+  window._vtvRecSetRatio = function(ratio) {
+    _rec.ratio = ratio;
+    document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => b.classList.toggle('active', b.dataset.ratio === ratio));
+  };
+  // ===== RECORD — captureStream with audio (unmute during record) =====
+  window._vtvRecGo = function() {
+    if (_rec.startTime === null || _rec.endTime === null) return;
+    if (_rec.isRecording) {
+      if (_rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
+      _rec.isRecording = false;
+      clearTimeout(_rec._recTimer);
+      const btn = document.getElementById('vtv-rec-btn');
+      if (btn) { btn.classList.remove('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; }
+      return;
+    }
+    const video = document.getElementById('vtv-player');
+    if (!video) { recStatus('⚠️ Không tìm thấy video!', 'err'); return; }
+    _rec.chunks = [];
+    _rec.isRecording = true;
+    const wasMuted = video.muted;
+    video.muted = false;
+    const wasVolume = video.volume;
+    video.volume = 0.3;
+    let stream;
+    try {
+      stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
+      if (!stream) throw new Error('captureStream not supported');
+    } catch(e) {
+      video.muted = wasMuted; video.volume = wasVolume;
+      recStatus('❌ ' + e.message, 'err');
+      _rec.isRecording = false;
+      return;
     }
+    const audioTracks = stream.getAudioTracks();
+    console.log('[VTV Rec] Audio tracks:', audioTracks.length, 'Video tracks:', stream.getVideoTracks().length);
+    let mimeType = 'video/webm;codecs=vp9,opus';
+    if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm;codecs=vp8,opus';
+    if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm';
+    try { _rec.recorder = new MediaRecorder(stream, {mimeType}); }
+    catch(e) {
+      video.muted = wasMuted; video.volume = wasVolume;
+      recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err');
+      _rec.isRecording = false;
+      return;
+    }
+    _rec.recorder.ondataavailable = e => { if(e.data && e.data.size > 0) _rec.chunks.push(e.data); };
+    _rec.recorder.onstop = function() {
+      _rec.isRecording = false;
+      video.muted = wasMuted;
+      video.volume = wasVolume;
+      _rec.blob = new Blob(_rec.chunks, {type: 'video/webm'});
+      const btn = document.getElementById('vtv-rec-btn');
+      if (btn) { btn.classList.remove('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; }
+      document.getElementById('vtv-rec-panel').classList.add('show');
+      const pv = document.getElementById('vtv-rec-preview-vid');
+      pv.src = URL.createObjectURL(_rec.blob);
+      document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
+      const sizeMB = (_rec.blob.size/1024/1024).toFixed(1);
+      recStatus('✅ Record xong! ' + sizeMB + 'MB' + (audioTracks.length > 0 ? ' (có audio)' : ' (video only)'), 'ok');
+    };
+    _rec.recorder.onerror = e => {
+      _rec.isRecording = false;
+      video.muted = wasMuted; video.volume = wasVolume;
+      recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
+    };
+    _rec.recorder.start(500);
+    video.currentTime = _rec.startTime;
+    const btn = document.getElementById('vtv-rec-btn');
+    if (btn) { btn.classList.add('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Dừng'; }
+    recStatus('🔴 ĐANG RECORD...' + (audioTracks.length > 0 ? ' (có audio)' : ''), 'recording');
+    const dur = (_rec.endTime - _rec.startTime) * 1000;
+    _rec._recTimer = setTimeout(() => {
+      if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
+    }, dur + 500);
+  };
+  // ===== AI TITLE =====
+  window._vtvRecGenAITitle = async function() {
+    if (!_rec.blob) { recStatus('⚠️ Chưa record!', 'err'); return; }
+    const btn = document.getElementById('vtv-rec-ai-btn');
+    const input = document.getElementById('vtv-rec-title-input');
+    if (!btn || !input) return;
+    btn.disabled = true;
+    btn.textContent = '⏳ Đang tạo...';
+    try {
+      const ch = CHANNELS.find(c => c.id === _currentCh);
+      const channelName = ch ? ch.name : (_currentCh || 'VTV');
+      const title = await generateAITitle(_rec.blob, channelName);
+      input.value = title;
+      recStatus('✅ Đã tạo tiêu đề AI: ' + title, 'ok');
+    } catch(e) {
+      recStatus('⚠️ Lỗi AI: ' + e.message, 'err');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '🤖 AI tạo tiêu đề';
+    }
+  };
+  // ===== DOWNLOAD =====
+  window._vtvRecDownload = function() {
+    if (!_rec.blob) return;
+    const title = document.getElementById('vtv-rec-title-input')?.value || '';
+    if (_rec.ratio === 'original') {
+      downloadBlob(_rec.blob, `vtv-${_currentCh}-${Date.now()}.webm`);
+    } else {
+      processRatio(_rec.blob, _rec.ratio, 'download', title);
+    }
+  };
+  // ===== SHARE TO SHORT AI =====
+  window._vtvRecShare = function() {
+    if (!_rec.blob) return;
+    const title = document.getElementById('vtv-rec-title-input')?.value || '';
+    if (_rec.ratio !== 'original') {
+      processRatio(_rec.blob, _rec.ratio, 'upload', title);
+    } else {
+      uploadToWall(_rec.blob, title);
+    }
+  };
+  // ===== RATIO CROP — v7: reliable render with timeout fallback =====
+  function processRatio(blob, ratio, action, title) {
+    showProc(`🔄 Đang xử lý ${ratio}...`);
+    const blobUrl = URL.createObjectURL(blob);
+    const video = document.createElement('video');
+    video.src = blobUrl;
+    video.volume = 0;
+    video.preload = 'auto';
+    video.playsInline = true;
+    function onReady() {
+      video.removeEventListener('loadedmetadata', onReady);
+      video.removeEventListener('canplay', onReady);
+      const vw = video.videoWidth, vh = video.videoHeight;
+      if (!vw || !vh) {
+        hideProc(); recStatus('❌ Video không có kích thước hợp lệ.', 'err');
+        URL.revokeObjectURL(blobUrl); return;
+      }
+      let cw, ch, sx, sy;
+      if (ratio === '1:1') {
+        const size = Math.min(vw, vh); cw = ch = size;
+        sx = Math.floor((vw - size) / 2); sy = Math.floor((vh - size) / 2);
+      } else if (ratio === '9:16') {
+        ch = vh; cw = Math.min(vw, Math.round(vh * 9 / 16));
+        sx = Math.floor((vw - cw) / 2); sy = 0;
+      } else { cw = vw; ch = vh; sx = sy = 0; }
+      showProc(`🔄 Render ${cw}x${ch}...`);
+      const canvas = document.createElement('canvas');
+      canvas.width = cw; canvas.height = ch;
+      const ctx = canvas.getContext('2d');
+      const canvasStream = canvas.captureStream(30);
+      let recordStream = canvasStream;
+      const audioVideo = document.createElement('video');
+      audioVideo.src = blobUrl;
+      audioVideo.muted = true;
+      audioVideo.volume = 0;
+      audioVideo.preload = 'auto';
+      audioVideo.playsInline = true;
+      audioVideo.onloadedmetadata = function() {
+        try {
+          const aStr = audioVideo.captureStream ? audioVideo.captureStream() : null;
+          if (aStr) {
+            const tracks = aStr.getAudioTracks();
+            if (tracks.length > 0) {
+              recordStream = new MediaStream([...canvasStream.getVideoTracks(), ...tracks]);
+              console.log('[VTV Crop] Audio merged:', tracks.length, 'tracks');
+            }
+          }
+        } catch(e) { console.warn('[VTV Crop] Audio merge failed:', e); }
+      };
+      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')
+        ? 'video/webm;codecs=vp9,opus'
+        : MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')
+          ? 'video/webm;codecs=vp8,opus' : 'video/webm';
+      let rec;
+      try { rec = new MediaRecorder(recordStream, {mimeType: mime}); }
+      catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); return; }
+      const chunks = [];
+      rec.ondataavailable = e => { if(e.data && e.data.size > 0) chunks.push(e.data); };
+      rec.onstop = () => {
+        hideProc();
+        URL.revokeObjectURL(blobUrl);
+        if (chunks.length === 0) {
+          recStatus('❌ Render thất bại (không có data). Thử lại hoặc chọn "Gốc".', 'err');
+          return;
+        }
+        const out = new Blob(chunks, {type: 'video/webm'});
+        if (action === 'download') {
+          downloadBlob(out, `vtv-${_currentCh}-${ratio.replace(':','x')}-${Date.now()}.webm`);
+        } else {
+          uploadToWall(out, title);
         }
+      };
+      rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error?.message || '?'), 'err'); URL.revokeObjectURL(blobUrl); };
+      rec.start(200);
+      audioVideo.play().catch(() => {});
+      video.play().then(() => {
+        let finished = false;
+        function finish() {
+          if (finished) return;
+          finished = true;
+          console.log('[VTV Crop] finish() called');
+          try { rec.requestData(); } catch(e) {}
+          setTimeout(() => {
+            if (rec.state !== 'inactive') rec.stop();
+            try { audioVideo.pause(); } catch(e) {}
+          }, 300);
+        }
+        video.onended = finish;
+        audioVideo.onended = finish;
+        const expectedDur = (video.duration || 0) * 1000;
+        if (expectedDur > 0 && isFinite(expectedDur)) {
+          setTimeout(() => {
+            if (!finished) {
+              console.warn('[VTV Crop] Timeout fallback after', expectedDur + 3000, 'ms');
+              finish();
+            }
+          }, expectedDur + 3000);
+        } else {
+          console.warn('[VTV Crop] Duration unknown, using 60s timeout');
+          setTimeout(() => {
+            if (!finished) {
+              console.warn('[VTV Crop] 60s timeout fallback');
+              finish();
+            }
+          }, 60000);
+        }
+        function draw() {
+          if (video.paused || video.ended) return;
+          ctx.drawImage(video, sx, sy, cw, ch, 0, 0, cw, ch);
+          requestAnimationFrame(draw);
+        }
+        draw();
+      }).catch(e => {
+        hideProc(); recStatus('❌ Lỗi phát video: ' + e.message, 'err');
+        URL.revokeObjectURL(blobUrl);
+      });
+    }
+    video.onerror = function() {
+      hideProc(); recStatus('❌ Không đọc được video.', 'err');
+      URL.revokeObjectURL(blobUrl);
+    };
+    video.addEventListener('loadedmetadata', onReady);
+    video.addEventListener('canplay', onReady);
+  }
+  // ===== TOGGLE REC PANEL =====
+  function toggleRecPanel() {
+    const panel = document.getElementById('vtv-inline-rec');
+    if (!panel) { buildInlineRecorder(); setTimeout(toggleRecPanel, 200); return; }
+    _rec.active = !_rec.active;
+    panel.classList.toggle('show', _rec.active);
+    const btn = document.getElementById('vtv-rec-btn');
+    if (btn) {
+      if (_rec.active) {
+        btn.style.background = '#3a1a1a';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Đóng';
+      } else {
+        btn.style.background = '';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
+        document.getElementById('vtv-rec-panel').classList.remove('show');
       }
+    }
+  }
+  // ===== PIN BUTTON =====
+  function setupPinButton(){
+    const block = document.getElementById('vtv-block');
+    if(!block) return;
+    const header = block.querySelector('.vtv-head');
+    if(!header || document.getElementById('vtv-pin-btn')) return;
+    const btn = document.createElement('button');
+    btn.id = 'vtv-pin-btn'; btn.className = 'vtv-pin-btn';
+    btn.innerHTML = '📌 Ghim';
+    btn.title = 'Ghim VTV cố định trên đầu trang';
+    btn.onclick = function(e){
+      e.stopPropagation(); _vtvPinned = !_vtvPinned;
+      if(_vtvPinned){ block.classList.add('vtv-sticky'); btn.classList.add('pinned'); btn.innerHTML = '📌 Đã ghim'; }
+      else { block.classList.remove('vtv-sticky'); btn.classList.remove('pinned'); btn.innerHTML = '📌 Ghim'; }
+    };
+    header.style.position = 'relative';
+    header.appendChild(btn);
+  }
+  // ===== MINI PLAYER =====
+  function createMiniPlayer(){
+    if(document.getElementById('vtv-mini')) return;
+    const mini = document.createElement('div');
+    mini.className = 'vtv-mini'; mini.id = 'vtv-mini';
+    mini.innerHTML = `<div class="vtv-mini-frame"><video id="vtv-mini-vid" playsinline muted preload="auto"></video></div>
+      <div class="vtv-mini-bar"><div style="display:flex;align-items:center;flex:1;min-width:0"><span class="vtv-mini-ch" id="vtv-mini-ch">VTV</span><span class="vtv-mini-epg" id="vtv-mini-epg"></span></div>
+      <div class="vtv-mini-btns"><button class="vtv-mini-btn" id="vtv-mini-pip">📺</button><button class="vtv-mini-btn" id="vtv-mini-expand">⬆️</button><button class="vtv-mini-btn" id="vtv-mini-hide">⬇️</button><button class="vtv-mini-btn x" id="vtv-mini-close">✕</button></div></div>
+      <div class="vtv-mini-peek" id="vtv-mini-peek">📺 Xem</div>`;
+    document.body.appendChild(mini);
+    document.getElementById('vtv-mini-pip').onclick = async function(){
+      const v = document.getElementById('vtv-mini-vid');
+      try{ if(document.pictureInPictureElement === v) await document.exitPictureInPicture(); else await v.requestPictureInPicture(); }catch(e){}
     };
+    document.getElementById('vtv-mini-expand').onclick = function(){ closeMiniPlayer(); if(typeof switchCat==='function') switchCat('home'); };
+    document.getElementById('vtv-mini-hide').onclick = ()=>{ mini.classList.add('hidden'); };
+    document.getElementById('vtv-mini-close').onclick = closeMiniPlayer;
+    document.getElementById('vtv-mini-peek').onclick = ()=>{ mini.classList.remove('hidden'); };
+  }
+  function closeMiniPlayer(){ const m=document.getElementById('vtv-mini'); if(m){const v=document.getElementById('vtv-mini-vid'); if(v){v.pause();v.src='';} m.remove();} _miniActive=false; }
+  function activateMiniPlayer(){
+    if(!_currentCh) return; createMiniPlayer(); _miniActive=true;
+    const mini=document.getElementById('vtv-mini'); const mv=document.getElementById('vtv-mini-vid'); const v=document.getElementById('vtv-player');
+    if(_hls){const h=new Hls({enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,maxBufferLength:4,fragLoadingTimeOut:8000,manifestLoadingTimeOut:8000}); h.loadSource(STREAMS[_currentCh][0]); h.attachMedia(mv); mv.play().catch(()=>{});}
+    else if(v&&v.src){mv.src=v.src; mv.play().catch(()=>{});}
+    const ch=CHANNELS.find(c=>c.id===_currentCh); if(ch) document.getElementById('vtv-mini-ch').textContent=ch.name;
+    fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{const p=d.programs||[]; const n=p.find(x=>x.now); document.getElementById('vtv-mini-epg').textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});
+    mini.classList.add('show'); mini.classList.remove('hidden');
+  }
+  // ===== MAIN PLAYER =====
+  async function loadAllStreams(){
+    if(_loading) return; _loading=true;
+    const el=document.getElementById('vtv-load'); if(el) el.innerHTML='<div class="vtv-spinner"></div>Đang tải kênh...';
+    try{const r=await fetch('/api/vtv/streams'); if(r.ok){const d=await r.json(); CHANNELS.forEach(ch=>{const i=d[ch.id]; if(i&&i.stream_url){let u=i.stream_url; if(NEEDS_PROXY.test(u)) u='/api/proxy/m3u8/vtv?url='+encodeURIComponent(u); STREAMS[ch.id]=[u];} else STREAMS[ch.id]=[];});}}catch(e){}
+    CHANNELS.forEach(ch=>{const t=document.getElementById('vtvt-'+ch.id); if(t){if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){t.classList.remove('off'); t.textContent=ch.name;}else{t.style.opacity='0.35'; t.textContent=ch.name+' ✕';}}});
+    _loading=false; _streamsLoaded=true;
   }
+  function buildBlock(){
+    const w=document.createElement('div'); w.className='vtv-wrap'; w.id='vtv-block';
+    let tabs=''; CHANNELS.forEach(ch=>{tabs+='<button class="vtv-tab off" id="vtvt-'+ch.id+'" onclick="window._vtvPlay(\''+ch.id+'\')">'+ch.name+'</button>';});
+    w.innerHTML='<div class="vtv-head"><span class="vtv-title">📺 VTV Trực Tuyến</span><span class="vtv-badge">● LIVE</span></div>'+
+      '<div class="vtv-tabs">'+tabs+'</div>'+
+      '<div class="vtv-frame"><div class="vtv-load" id="vtv-load"><div class="vtv-spinner"></div>Đang tải kênh...</div><video id="vtv-player" playsinline muted controls preload="auto" style="display:none"></video><div class="vtv-err" id="vtv-err" style="display:none"><span id="vtv-err-msg">Không thể tải kênh</span><button onclick="window._vtvRetry()">Thử lại</button></div></div>'+
+      '<div class="vtv-controls"><button class="vtv-pip-btn" id="vtv-pip-btn" onclick="window._vtvTogglePiP()"><svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="12" y="10" width="8" height="6" rx="1" fill="currentColor"/></svg>PiP</button><span style="flex:1"></span><span style="font-size:9px;color:#666" id="vtv-status"></span></div>'+
+      '<div class="vtv-epg" id="vtv-epg"><div class="vtv-epg-header"><span class="vtv-epg-title">📋 Lịch phát sóng</span><button class="vtv-epg-toggle" id="vtv-epg-toggle" onclick="window._vtvToggleEpg()">Ẩn</button></div><div class="vtv-epg-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải...</div></div></div>';
+    return w;
   }
+  async function loadEpg(chId){
+    const el=document.getElementById('vtv-epg-list'); if(!el) return;
+    el.innerHTML='<div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải lịch...</div>';
+    try{const r=await fetch('/api/vtv/epg/'+chId); if(!r.ok) throw new Error(); const d=await r.json(); const p=d.programs||[]; if(!p.length){el.innerHTML='<div class="vtv-epg-empty">Chưa có lịch</div>';return;} let h=''; p.forEach(x=>{const n=x.now?' now':''; h+='<div class="vtv-epg-item'+n+'"><span class="t">'+(x.time||'')+(x.end_time?'-'+x.end_time:'')+'</span> <span class="n">'+(x.title||'')+'</span></div>';}); el.innerHTML=h; const ni=el.querySelector('.vtv-epg-item.now'); if(ni) ni.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});}catch(e){el.innerHTML='<div class="vtv-epg-empty">Không tải được lịch</div>';}
   }
+  window._vtvToggleEpg=function(){const l=document.getElementById('vtv-epg-list'),b=document.getElementById('vtv-epg-toggle'); if(!l||!b)return; if(l.style.display==='none'){l.style.display='flex';b.textContent='Ẩn';}else{l.style.display='none';b.textContent='Hiện';}};
+  window._vtvTogglePiP=async function(){const v=document.getElementById('vtv-player'); const b=document.getElementById('vtv-pip-btn'); if(!v)return; try{if(document.pictureInPictureElement===v){await document.exitPictureInPicture();_pipActive=false;if(b)b.classList.remove('on');}else{await v.requestPictureInPicture();_pipActive=true;if(b)b.classList.add('on');}}catch(e){}};
+  function pinBlock(){
+    const h=document.getElementById('view-home'); if(!h||document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(),h.firstChild); _blockInserted=true;
+    setTimeout(()=>{setupPinButton();buildInlineRecorder();},500);
+    if(!_streamsLoaded){loadAllStreams().then(()=>{setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL),300);});}
+  }
+  window._vtvRetry=function(){if(_currentCh)window._vtvPlay(_currentCh);};
+  window._vtvPlay=function(chId){
+    const ch=CHANNELS.find(c=>c.id===chId); if(!ch) return; _currentCh=chId;
+    document.querySelectorAll('.vtv-tab').forEach(t=>t.classList.remove('on'));
+    const tab=document.getElementById('vtvt-'+chId); if(tab) tab.classList.add('on');
+    const video=document.getElementById('vtv-player'); const errEl=document.getElementById('vtv-err'); const loadEl=document.getElementById('vtv-load'); const errMsg=document.getElementById('vtv-err-msg');
+    video.style.display='none'; errEl.style.display='none'; loadEl.style.display='flex';
+    loadEl.innerHTML='<div class="vtv-spinner"></div>Đang kết nối '+ch.name+'...';
     if(_hls){_hls.destroy();_hls=null;}
     const urls=STREAMS[chId]||[];
+    if(!urls.length){loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent=chId==='vtvprime'?'VTVPrime: Kênh trả phí.':ch.name+': Không có luồng.';return;}
     _tryPlay(video,urls,0,ch.name,loadEl,errEl,errMsg);
     loadEpg(chId);
+    if(_miniActive){document.getElementById('vtv-mini-ch').textContent=ch.name;fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{const p=d.programs||[];const n=p.find(x=>x.now);document.getElementById('vtv-mini-epg').textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});}
+  };
   function _tryPlay(video,urls,idx,name,loadEl,errEl,errMsg){
+    if(idx>=urls.length){loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent=name+': Tất cả nguồn lỗi.';return;}
+    const src=urls[idx]; loadEl.innerHTML='<div class="vtv-spinner"></div>Kết nối '+name+' ('+(idx+1)+'/'+urls.length+')...';
     if(typeof Hls!=='undefined'&&Hls.isSupported()){
+      const hls=new Hls({enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,maxBufferLength:6,maxMaxBufferLength:10,liveSyncDurationCount:2,liveMaxLatencyDurationCount:3,fragLoadingTimeOut:10000,manifestLoadingTimeOut:10000}); _hls=hls; hls.loadSource(src); hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play().catch(()=>{});loadEl.style.display='none';video.style.display='block';});
       let rec=0; hls.on(Hls.Events.ERROR,(ev,data)=>{if(data.fatal){if(data.type===Hls.ErrorTypes.NETWORK_ERROR){rec++;if(rec<=3)setTimeout(()=>hls.startLoad(),2000);else{hls.destroy();_hls=null;_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);}}else if(data.type===Hls.ErrorTypes.MEDIA_ERROR){try{hls.recoverMediaError();}catch(e){}}else{hls.destroy();_hls=null;_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);}}});
     }else if(video.canPlayType('application/vnd.apple.mpegurl')){
       video.src=src;
       video.addEventListener('loadedmetadata',()=>{video.play().catch(()=>{});loadEl.style.display='none';video.style.display='block';},{once:true});
       video.addEventListener('error',()=>{_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);},{once:true});
+    }else{loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent='Không hỗ trợ HLS';}
   }
+  // ===== NAV HOOKS =====
   const _origShowView=window.showView;
   window.showView=function(id){if(id==='view-home'&&_miniActive)closeMiniPlayer();else if(id!=='view-home'&&_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origShowView.apply(this,arguments);};
   const _origReadArticle=window.readArticle; if(_origReadArticle){window.readArticle=function(url){if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origReadArticle.apply(this,arguments);};}
     window.loadHome=async function(){const old=document.getElementById('vtv-block');if(old)old.remove();_blockInserted=false;const r=await _origLoadHome.apply(this,arguments);try{pinBlock();}catch(e){}return r;};
     window.loadHome.__vtvWrapped=true;
   }
 })();