Upload static/yt_live.js

static/yt_live.js

@@ -1,37 +1,33 @@
-// === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
-// Default channel: VTV6
-// Features: PiP button, floating mini-player, INLINE RECORDER
-// Fixed: VTV stays at top ONLY when user clicks pin button
+// === VNEWS — VTV LIVE + Inline Recorder v4 ===
+// Features: PiP, mini-player, INLINE RECORDER with ratio crop + upload
+// No separate recorder page — everything inline on the VTV player
 
 (function(){
   if(window._ytLiveLoaded) return;
   window._ytLiveLoaded = true;
 
   const CHANNELS = [
-    {id:'vtv1',     name:'VTV1', badge:'Tin tức'},
-    {id:'vtv2',     name:'VTV2', badge:'Khoa học'},
-    {id:'vtv3',     name:'VTV3', badge:'Giải trí'},
-    {id:'vtv4',     name:'VTV4', badge:'Quốc tế'},
-    {id:'vtv5',     name:'VTV5', badge:'Miền Nam'},
-    {id:'vtv6',     name:'VTV6', badge:'Thanh niên'},
-    {id:'vtv7',     name:'VTV7', badge:'Giáo dục'},
-    {id:'vtv8',     name:'VTV8', badge:'Miền Trung'},
-    {id:'vtv9',     name:'VTV9', badge:'Miền Bắc'},
-    {id:'vtv10',    name:'VTV10', badge:'VTV Cần Thơ'},
-    {id:'vtvprime', name:'VTVPrime', badge:'Prime'},
+    {id:'vtv1',name:'VTV1',badge:'Tin tức'},{id:'vtv2',name:'VTV2',badge:'Khoa học'},
+    {id:'vtv3',name:'VTV3',badge:'Giải trí'},{id:'vtv4',name:'VTV4',badge:'Quốc tế'},
+    {id:'vtv5',name:'VTV5',badge:'Miền Nam'},{id:'vtv6',name:'VTV6',badge:'Thanh niên'},
+    {id:'vtv7',name:'VTV7',badge:'Giáo dục'},{id:'vtv8',name:'VTV8',badge:'Miền Trung'},
+    {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 NEEDS_PROXY = /fptplay\.net/;
-
   const STREAMS = {};
-  let _currentCh = null;
-  let _hls = null;
-  let _loading = false;
-  let _blockInserted = false;
-  let _streamsLoaded = false;
-  let _pipActive = false;
-  let _miniActive = false;
-  let _vtvPinned = false;
+  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,
+    // Store the raw stream for recording (with audio)
+    rawStream: null,
+  };
 
   // ===== STYLES =====
   const style = document.createElement('style');
@@ -75,12 +71,9 @@
   .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}
-
-  /* ===== PIN / STICKY MODE ===== */
   .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}
@@ -104,9 +97,9 @@
 
   .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}
-  .vtv-inline-rec .rec-bar .rec-progress{position:absolute;top:0;bottom:0;background:rgba(155,89,182,.3);left:0;width:0%}
-  .vtv-inline-rec .rec-bar .rec-marker{position:absolute;top:0;bottom:0;width:3px;z-index:2}
+  .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}
@@ -124,7 +117,9 @@
 
   .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;display:flex;align-items:center;gap:6px}
+  .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}
@@ -132,9 +127,7 @@
   .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-preview-wrap{margin-top:8px;text-align:center}
-  .vtv-rec-panel .rec-preview-wrap video{max-width:100%;max-height:200px;border-radius:6px;background:#000}
-  .vtv-rec-panel .rec-processing{text-align:center;padding:12px;color:#9b59b6;font-size:12px}
+  .vtv-rec-panel .rec-proc{text-align:center;padding:12px;color:#9b59b6;font-size:12px;display:none}
 
   /* ===== MINI PLAYER ===== */
   .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}
@@ -155,36 +148,29 @@
   `;
   document.head.appendChild(style);
 
-  // ===== INLINE RECORDER STATE =====
-  let _recState = {
-    active: false,
-    startTime: null,
-    endTime: null,
-    isRecording: false,
-    recorder: null,
-    chunks: [],
-    blob: null,
-    ratio: 'original',
-    _dragMarker: null,
-    _timer: null,
-    _recTimer: null,
-  };
+  // ===== HELPERS =====
+  function fmtSec(s){ return String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0'); }
 
-  // ===== INLINE RECORDER UI =====
+  function recStatus(msg, type) {
+    const el = document.getElementById('vtv-rec-status');
+    if (el) { el.textContent = msg; el.className = 'rec-status' + (type ? ' ' + type : ''); }
+  }
+
+  // ===== BUILD INLINE RECORDER =====
   function buildInlineRecorder() {
     const controls = document.querySelector('.vtv-controls');
     if (!controls || document.getElementById('vtv-rec-btn')) return;
 
-    // Record button in controls bar
+    // Record button
     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 = toggleInlineRecorder;
+    recBtn.onclick = toggleRecPanel;
     controls.appendChild(recBtn);
 
-    // Inline recorder panel
+    // Recorder panel
     const inlineRec = document.createElement('div');
     inlineRec.id = 'vtv-inline-rec';
     inlineRec.className = 'vtv-inline-rec';
@@ -210,7 +196,7 @@
     `;
     controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
 
-    // Post-record panel (ratio + download/share)
+    // Post-record panel
     const recPanel = document.createElement('div');
     recPanel.id = 'vtv-rec-panel';
     recPanel.className = 'vtv-rec-panel';
@@ -228,7 +214,7 @@
         <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-processing" id="vtv-rec-proc" style="display:none">
+      <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>
@@ -237,146 +223,121 @@
 
     // Timeline click
     document.getElementById('vtv-rec-bar').addEventListener('click', function(e) {
-      const video = document.getElementById('vtv-player');
-      if (!video || !video.src) { recStatus('⚠️ Chưa có stream!'); return; }
-      const rect = this.getBoundingClientRect();
-      const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const time = pct * 60; // max 60s
-
-      if (_recState.startTime === null) {
-        _recState.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 (_recState.endTime === null) {
-        if (time <= _recState.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
-        const dur = time - _recState.startTime;
-        if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
-        _recState.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);
-        updateRecProgress();
-        recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
-        document.getElementById('vtv-rec-go').disabled = false;
-      }
+      if (!_rec.isRecording) handleRecBarClick(e);
     });
 
     // Drag markers
-    setupRecDrag('vtv-rec-mk-start', 'start');
-    setupRecDrag('vtv-rec-mk-end', 'end');
-  }
-
-  function setupRecDrag(mkId, which) {
-    const mk = document.getElementById(mkId);
-    if (!mk) return;
-    mk.addEventListener('mousedown', function(e) { e.preventDefault(); e.stopPropagation(); _recState._dragMarker = which; });
-    mk.addEventListener('touchstart', function(e) { e.preventDefault(); e.stopPropagation(); _recState._dragMarker = which; }, {passive:false});
+    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 handlers
+  // Global drag
   document.addEventListener('mousemove', function(e) {
-    if (!_recState._dragMarker) return;
+    if (!_rec._dragMarker) return;
+    dragMarker(e.clientX);
+  });
+  document.addEventListener('touchmove', function(e) {
+    if (!_rec._dragMarker) return;
+    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, (e.clientX - rect.left) / rect.width));
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     const time = pct * 60;
-    const mkId = _recState._dragMarker === 'start' ? 'vtv-rec-mk-start' : 'vtv-rec-mk-end';
-    const mk = document.getElementById(mkId);
-    if (!mk) return;
-    if (_recState._dragMarker === 'start') {
-      if (_recState.endTime !== null && time >= _recState.endTime - 1) return;
-      _recState.startTime = time;
-      mk.style.left = (pct * 100) + '%';
+    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 (_recState.startTime !== null && time <= _recState.startTime + 1) return;
-      _recState.endTime = time;
-      mk.style.left = (pct * 100) + '%';
+      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);
     }
-    updateRecProgress();
-  });
-  document.addEventListener('touchmove', function(e) {
-    if (!_recState._dragMarker) return;
+    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');
-    if (!bar) return;
     const rect = bar.getBoundingClientRect();
-    const pct = Math.max(0, Math.min(1, (e.touches[0].clientX - rect.left) / rect.width));
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     const time = pct * 60;
-    const mkId = _recState._dragMarker === 'start' ? 'vtv-rec-mk-start' : 'vtv-rec-mk-end';
-    const mk = document.getElementById(mkId);
-    if (!mk) return;
-    if (_recState._dragMarker === 'start') {
-      if (_recState.endTime !== null && time >= _recState.endTime - 1) return;
-      _recState.startTime = time; mk.style.left = (pct * 100) + '%';
+    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);
-    } else {
-      if (_recState.startTime !== null && time <= _recState.startTime + 1) return;
-      _recState.endTime = time; mk.style.left = (pct * 100) + '%';
+      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;
     }
-    updateRecProgress();
-  }, {passive:false});
-  document.addEventListener('mouseup', function() { _recState._dragMarker = null; });
-  document.addEventListener('touchend', function() { _recState._dragMarker = null; });
+  }
 
-  function updateRecProgress() {
-    const s = _recState.startTime || 0;
-    const e = _recState.endTime || 60;
+  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';
   }
 
-  function recStatus(msg, type) {
-    const el = document.getElementById('vtv-rec-status');
-    if (!el) return;
-    el.textContent = msg;
-    el.className = 'rec-status' + (type ? ' ' + type : '');
-  }
-
-  // ===== INLINE RECORDER CONTROLS =====
+  // ===== RECORDER CONTROLS =====
   window._vtvRecSetStart = function() {
     const video = document.getElementById('vtv-player');
     if (!video || !video.src) { recStatus('⚠️ Chưa có stream!', 'err'); return; }
-    const cur = video.currentTime || 0;
-    _recState.startTime = cur;
-    const pct = cur / 60 * 100;
+    _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(cur);
+    document.getElementById('vtv-rec-time-start').textContent = fmtSec(_rec.startTime);
     document.getElementById('vtv-rec-set-end').disabled = false;
-    recStatus('Điểm đầu: ' + fmtSec(cur), '');
+    recStatus('Điểm đầu: ' + fmtSec(_rec.startTime), '');
   };
 
   window._vtvRecSetEnd = function() {
-    if (_recState.startTime === null) { recStatus('⚠️ Chọn điểm đầu trước!', 'err'); return; }
+    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 <= _recState.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
-    const dur = cur - _recState.startTime;
+    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; }
-    _recState.endTime = cur;
+    _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);
-    updateRecProgress();
+    updateRecBar();
     recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
     document.getElementById('vtv-rec-go').disabled = false;
   };
 
   window._vtvRecReset = function() {
-    _recState.startTime = null; _recState.endTime = null;
-    _recState.isRecording = false; _recState.blob = null;
-    if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
-    clearTimeout(_recState._recTimer);
+    _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%';
@@ -388,18 +349,22 @@
     document.getElementById('vtv-rec-go').disabled = true;
     document.getElementById('vtv-rec-panel').classList.remove('show');
     recStatus('Đã reset.', '');
-    // Reset rec button
     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 =====
   window._vtvRecGo = function() {
-    if (_recState.startTime === null || _recState.endTime === null) return;
-    if (_recState.isRecording) {
-      // Stop
-      if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
-      _recState.isRecording = false;
-      clearTimeout(_recState._recTimer);
+    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;
@@ -408,73 +373,92 @@
     const video = document.getElementById('vtv-player');
     if (!video) { recStatus('⚠️ Không tìm thấy video!', 'err'); return; }
 
-    _recState.chunks = [];
-    _recState.isRecording = true;
+    _rec.chunks = [];
+    _rec.isRecording = true;
+
+    // IMPORTANT: Unmute video briefly so captureStream includes audio
+    const wasMuted = video.muted;
+    video.muted = false;
+
+    let stream;
+    try {
+      stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
+      if (!stream) throw new Error('captureStream not supported');
+    } catch(e) {
+      video.muted = wasMuted;
+      recStatus('❌ ' + e.message, 'err');
+      _rec.isRecording = false;
+      return;
+    }
+
+    // Check if we got audio tracks
+    const audioTracks = stream.getAudioTracks();
+    if (audioTracks.length === 0) {
+      console.warn('No audio in captureStream — recording video only');
+    }
 
     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 {
-      const stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
-      if (!stream) { recStatus('❌ Không hỗ trợ captureStream!', 'err'); _recState.isRecording = false; return; }
-      _recState.recorder = new MediaRecorder(stream, {mimeType});
-    } catch(e) { recStatus('❌ Lỗi: ' + e.message, 'err'); _recState.isRecording = false; return; }
-
-    _recState.recorder.ondataavailable = e => { if(e.data && e.data.size > 0) _recState.chunks.push(e.data); };
-    _recState.recorder.onstop = function() {
-      _recState.isRecording = false;
-      _recState.blob = new Blob(_recState.chunks, {type: 'video/webm'});
+    try { _rec.recorder = new MediaRecorder(stream, {mimeType}); }
+    catch(e) {
+      video.muted = wasMuted;
+      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; // Restore muted state
+      _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'; }
-      // Show panel
       document.getElementById('vtv-rec-panel').classList.add('show');
       const pv = document.getElementById('vtv-rec-preview-vid');
-      pv.src = URL.createObjectURL(_recState.blob);
+      pv.src = URL.createObjectURL(_rec.blob);
       document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
-      recStatus('✅ Record xong! ' + (_recState.blob.size/1024/1024).toFixed(1) + 'MB', 'ok');
+      const sizeMB = (_rec.blob.size/1024/1024).toFixed(1);
+      recStatus('✅ Record xong! ' + sizeMB + 'MB', 'ok');
+    };
+    _rec.recorder.onerror = e => {
+      _rec.isRecording = false;
+      video.muted = wasMuted;
+      recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
-    _recState.recorder.onerror = e => { recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err'); _recState.isRecording = false; };
 
-    _recState.recorder.start(1000);
-    video.currentTime = _recState.startTime;
+    _rec.recorder.start(1000);
+    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...', 'recording');
 
-    const dur = (_recState.endTime - _recState.startTime) * 1000;
-    _recState._recTimer = setTimeout(() => {
-      if (_recState.isRecording) {
-        if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
-        _recState.isRecording = false;
-      }
+    const dur = (_rec.endTime - _rec.startTime) * 1000;
+    _rec._recTimer = setTimeout(() => {
+      if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
     }, dur + 500);
   };
 
-  window._vtvRecSetRatio = function(ratio) {
-    _recState.ratio = ratio;
-    document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => {
-      b.classList.toggle('active', b.dataset.ratio === ratio);
-    });
-  };
-
+  // ===== DOWNLOAD =====
   window._vtvRecDownload = function() {
-    if (!_recState.blob) return;
-    if (_recState.ratio === 'original') {
-      downloadBlob(_recState.blob, `vtv-${_currentCh}-${Date.now()}.webm`);
+    if (!_rec.blob) return;
+    if (_rec.ratio === 'original') {
+      downloadBlob(_rec.blob, `vtv-${_currentCh}-${Date.now()}.webm`);
     } else {
-      applyRatioProcess(_recState.blob, _recState.ratio, 'download');
+      processRatio(_rec.blob, _rec.ratio, 'download');
     }
   };
 
+  // ===== SHARE TO SHORT AI =====
   window._vtvRecShare = function() {
-    if (!_recState.blob) return;
-    if (_recState.ratio !== 'original') {
-      applyRatioProcess(_recState.blob, _recState.ratio, 'upload');
+    if (!_rec.blob) return;
+    if (_rec.ratio !== 'original') {
+      processRatio(_rec.blob, _rec.ratio, 'upload');
     } else {
-      uploadToServer(_recState.blob);
+      uploadBlob(_rec.blob);
     }
   };
 
@@ -485,16 +469,25 @@
     recStatus('✅ Đã tải: ' + filename, 'ok');
   }
 
-  function uploadToServer(blob) {
+  function showProc(text) {
+    document.getElementById('vtv-rec-proc').style.display = 'block';
+    document.getElementById('vtv-rec-proc-text').textContent = text;
+  }
+  function hideProc() {
+    document.getElementById('vtv-rec-proc').style.display = 'none';
+  }
+
+  // ===== UPLOAD =====
+  function uploadBlob(blob) {
     const formData = new FormData();
     formData.append('video', blob, `vtv-${_currentCh}-${Date.now()}.webm`);
     formData.append('title', `Record LIVE ${_currentCh?.toUpperCase()} - ${new Date().toLocaleString('vi-VN')}`);
     formData.append('source', 'vtv_inline_recorder');
-    showRecProc('⏳ Đang upload...');
+    showProc('⏳ Đang upload...');
     fetch('/api/wall', { method: 'POST', body: formData })
       .then(r => r.json())
       .then(data => {
-        hideRecProc();
+        hideProc();
         if (data.ok) {
           recStatus('✅ Đã tạo Short AI! Xem trong Tường AI.', 'ok');
         } else {
@@ -503,22 +496,40 @@
         }
       })
       .catch(e => {
-        hideRecProc();
+        hideProc();
         recStatus('⚠️ Mất kết nối. Đang tải về...', 'err');
         setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
       });
   }
 
-  function showRecProc(text) {
-    document.getElementById('vtv-rec-proc').style.display = 'block';
-    document.getElementById('vtv-rec-proc-text').textContent = text;
-  }
-  function hideRecProc() {
-    document.getElementById('vtv-rec-proc').style.display = 'none';
+  // ===== RATIO CROP — Fixed: proper audio extraction =====
+  function processRatio(blob, ratio, action) {
+    showProc(`🔄 Đang xử lý ${ratio}...`);
+
+    // Step 1: Extract audio from original blob using AudioContext
+    const reader = new FileReader();
+    reader.onload = function() {
+      const arrayBuffer = reader.result;
+      // Try to decode audio from the blob
+      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      let audioBuffer = null;
+
+      audioCtx.decodeAudioData(arrayBuffer)
+        .then(ab => { audioBuffer = ab; })
+        .catch(e => { console.warn('Audio decode failed:', e); })
+        .finally(() => {
+          // Step 2: Render video with canvas + merge audio
+          renderWithRatio(blob, ratio, action, audioBuffer, audioCtx);
+        });
+    };
+    reader.onerror = function() {
+      // No audio, just render video
+      renderWithRatio(blob, ratio, action, null, null);
+    };
+    reader.readAsArrayBuffer(blob);
   }
 
-  function applyRatioProcess(blob, ratio, action) {
-    showRecProc(`🔄 Đang xử lý ${ratio}...`);
+  function renderWithRatio(blob, ratio, action, audioBuffer, audioCtx) {
     const video = document.createElement('video');
     video.src = URL.createObjectURL(blob);
     video.muted = true;
@@ -529,74 +540,109 @@
       let cw, ch, sx, sy;
       if (ratio === '1:1') {
         const size = Math.min(vw, vh); cw = ch = size;
-        sx = (vw - size) / 2; sy = (vh - size) / 2;
+        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');
+
+      // Canvas stream (video only)
       const canvasStream = canvas.captureStream(30);
 
-      let combinedStream = canvasStream;
-      try {
-        const vs = video.captureStream ? video.captureStream() : null;
-        if (vs) {
-          const at = vs.getAudioTracks();
-          if (at.length > 0) combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...at]);
+      // If we have audio, create a merged stream
+      let recordStream = canvasStream;
+      let audioSource = null;
+
+      if (audioBuffer && audioCtx) {
+        try {
+          // Create audio destination from canvas stream
+          const dest = audioCtx.createMediaStreamDestination();
+          audioSource = audioCtx.createBufferSource();
+          audioSource.buffer = audioBuffer;
+          audioSource.connect(dest);
+          // Merge: canvas video + decoded audio
+          recordStream = new MediaStream([
+            ...canvasStream.getVideoTracks(),
+            ...dest.stream.getAudioTracks()
+          ]);
+        } catch(e) {
+          console.warn('Audio merge failed:', e);
         }
-      } catch(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';
 
-      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus') ? 'video/webm;codecs=vp9,opus' : 'video/webm';
       let rec;
-      try { rec = new MediaRecorder(combinedStream, {mimeType: mime}); }
-      catch(e) { hideRecProc(); recStatus('❌ Lỗi: ' + e.message, 'err'); return; }
+      try { rec = new MediaRecorder(recordStream, {mimeType: mime}); }
+      catch(e) { hideProc(); recStatus('❌ Lỗi: ' + e.message, 'err'); return; }
 
       const chunks = [];
-      rec.ondataavailable = e => { if(e.data.size > 0) chunks.push(e.data); };
+      rec.ondataavailable = e => { if(e.data && e.data.size > 0) chunks.push(e.data); };
       rec.onstop = () => {
-        hideRecProc();
-        const out = new Blob(chunks, {type: 'video/webm'});
+        hideProc();
         URL.revokeObjectURL(video.src);
+        if (chunks.length === 0) {
+          recStatus('❌ Render thất bại. 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 {
-          uploadToServer(out);
+          uploadBlob(out);
         }
       };
+      rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error||'?'), 'err'); };
+
       rec.start(1000);
       video.currentTime = 0;
+
+      // Start audio playback if we have it
+      if (audioSource) {
+        audioSource.start(0);
+      }
+
       video.play().then(() => {
         function draw() {
-          if (video.paused || video.ended) { rec.stop(); return; }
+          if (video.paused || video.ended) {
+            if (rec.state !== 'inactive') rec.stop();
+            return;
+          }
           ctx.drawImage(video, sx, sy, cw, ch, 0, 0, cw, ch);
           requestAnimationFrame(draw);
         }
         draw();
         setTimeout(() => { if(rec.state !== 'inactive') rec.stop(); }, video.duration * 1000 + 500);
-      }).catch(e => { hideRecProc(); recStatus('❌ ' + e.message, 'err'); });
+      }).catch(e => { hideProc(); recStatus('❌ ' + e.message, 'err'); });
     };
-    video.onerror = function() { hideRecProc(); recStatus('❌ Không đọc được video.', 'err'); };
-  }
 
-  window._vtvRecToggle = toggleInlineRecorder;
+    video.onerror = function() { hideProc(); recStatus('❌ Không đọc được video.', 'err'); };
+  }
 
-  function toggleInlineRecorder() {
+  // ===== TOGGLE REC PANEL =====
+  function toggleRecPanel() {
     const panel = document.getElementById('vtv-inline-rec');
-    if (!panel) { buildInlineRecorder(); setTimeout(toggleInlineRecorder, 200); return; }
-    _recState.active = !_recState.active;
-    panel.classList.toggle('show', _recState.active);
+    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 (_recState.active) {
+      if (_rec.active) {
         btn.style.background = '#3a1a1a';
-        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Đóng';
+        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';
-        // Also hide post-record panel
         document.getElementById('vtv-rec-panel').classList.remove('show');
       }
     }
@@ -607,16 +653,13 @@
     const block = document.getElementById('vtv-block');
     if(!block) return;
     const header = block.querySelector('.vtv-head');
-    if(!header) return;
-    if(document.getElementById('vtv-pin-btn')) return;
+    if(!header || document.getElementById('vtv-pin-btn')) return;
     const btn = document.createElement('button');
-    btn.id = 'vtv-pin-btn';
-    btn.className = 'vtv-pin-btn';
+    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;
+      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'; }
     };
@@ -628,208 +671,108 @@
   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" title="PiP">📺</button>
-          <button class="vtv-mini-btn" id="vtv-mini-expand" title="Mở rộng">⬆️</button>
-          <button class="vtv-mini-btn" id="vtv-mini-hide" title="Thu nhỏ">⬇️</button>
-          <button class="vtv-mini-btn x" id="vtv-mini-close" title="Đóng">✕</button>
-        </div>
-      </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 = toggleMiniPiP;
-    document.getElementById('vtv-mini-expand').onclick = expandFromMini;
+    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 mini = document.getElementById('vtv-mini');
-    if(mini){ const v = document.getElementById('vtv-mini-vid'); if(v){ v.pause(); v.src = ''; } mini.remove(); }
-    _miniActive = false;
-  }
-
-  function expandFromMini(){ closeMiniPlayer(); if(typeof switchCat === 'function') switchCat('home'); }
-
+  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 miniVid = document.getElementById('vtv-mini-vid');
-    const mainVid = document.getElementById('vtv-player');
-    if(_hls){
-      const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:10});
-      hls.loadSource(STREAMS[_currentCh][0]); hls.attachMedia(miniVid); miniVid.play().catch(()=>{});
-    } else if(mainVid && mainVid.src){ miniVid.src = mainVid.src; miniVid.play().catch(()=>{}); }
-    const ch = CHANNELS.find(c=>c.id===_currentCh); if(ch) document.getElementById('vtv-mini-ch').textContent = ch.name;
-    updateMiniEpg(); mini.classList.add('show'); mini.classList.remove('hidden');
-  }
-
-  function updateMiniEpg(){
-    if(!_currentCh) return;
-    fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{
-      const progs = d.programs||[]; const now = progs.find(p=>p.now);
-      document.getElementById('vtv-mini-epg').textContent = now ? now.time+' '+now.title : (progs[0] ? progs[0].time+' '+progs[0].title : '');
-    }).catch(()=>{});
-  }
-
-  async function toggleMiniPiP(){
-    const v = document.getElementById('vtv-mini-vid'); if(!v) return;
-    try{ if(document.pictureInPictureElement === v){ await document.exitPictureInPicture(); } else { await v.requestPictureInPicture(); } } catch(e){ alert('Không hỗ trợ PiP'); }
+    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:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:10}); 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', {signal: AbortSignal.timeout(10000)});
-      if(r.ok){ const data = await r.json(); CHANNELS.forEach(ch=>{ const info = data[ch.id]; if(info && info.stream_url){ let url = info.stream_url; if(NEEDS_PROXY.test(url)) url = '/api/proxy/m3u8/vtv?url='+encodeURIComponent(url); STREAMS[ch.id] = [url]; } else { STREAMS[ch.id] = []; } }); }
-    } catch(e){ console.warn('VTV API error:', e); }
-    CHANNELS.forEach(ch=>{ const tab = document.getElementById('vtvt-'+ch.id); if(tab){ if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){ tab.classList.remove('off'); tab.textContent=ch.name; } else { tab.style.opacity='0.35'; tab.textContent=ch.name+' ✕'; } } });
-    _loading = false; _streamsLoaded = true;
+    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',{signal:AbortSignal.timeout(10000)}); 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>';
+    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, {signal: AbortSignal.timeout(10000)});
-      if(!r.ok) throw new Error('fail');
-      const data = await r.json(); const progs = data.programs||[];
-      if(!progs.length){ el.innerHTML='<div class="vtv-epg-empty">Chưa có lịch phát sóng</div>'; return; }
-      let h = '';
-      progs.forEach(p=>{ const nw = p.now ? ' now' : ''; h += '<div class="vtv-epg-item'+nw+'"><span class="t">'+(p.time||'')+(p.end_time?'-'+p.end_time:'')+'</span> <span class="n">'+(p.title||'')+'</span></div>'; });
-      el.innerHTML = h;
-      const nowItem = el.querySelector('.vtv-epg-item.now');
-      if(nowItem) nowItem.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
-    } catch(e){ el.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch</div>'; }
+    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,{signal:AbortSignal.timeout(10000)}); 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 btn = document.getElementById('vtv-pip-btn'); if(!v) return;
-    try{
-      if(document.pictureInPictureElement === v){ await document.exitPictureInPicture(); _pipActive = false; if(btn) btn.classList.remove('on'); }
-      else { await v.requestPictureInPicture(); _pipActive = true; if(btn) btn.classList.add('on'); }
-    } catch(e){ alert('Không hỗ trợ PiP'); }
-  };
+  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); }); }
+    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._vtvRetry=function(){if(_currentCh)window._vtvPlay(_currentCh);};
 
-  window._vtvPlay = function(chId){
-    const ch = CHANNELS.find(c=>c.id===chId); if(!ch) return;
-    _currentCh = chId;
+  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');
+    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);
+    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; updateMiniEpg(); }
+    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+')...';
+  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:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:20});
-      _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});
+      const hls=new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:20}); _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'; }
+    }else{loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent='Không hỗ trợ HLS';}
   }
 
-  // ===== NAVIGATION 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); }; }
-  const _origSwitchCat = window.switchCat;
-  if(_origSwitchCat){ window.switchCat = function(id){ if(id==='home'){ if(_miniActive) closeMiniPlayer(); } else if(_currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive){ activateMiniPlayer(); } return _origSwitchCat.apply(this, arguments); }; }
-
-  // Override loadHome to inject VTV block
-  const _origLoadHome = window.loadHome;
-  if(_origLoadHome && !_origLoadHome.__vtvWrapped){
-    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;
-  }
+  // ===== 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);};}
+  const _origSwitchCat=window.switchCat; if(_origSwitchCat){window.switchCat=function(id){if(id==='home'){if(_miniActive)closeMiniPlayer();}else if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origSwitchCat.apply(this,arguments);};}
 
-  function fmtSec(s){ return String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0'); }
+  const _origLoadHome=window.loadHome;
+  if(_origLoadHome&&!_origLoadHome.__vtvWrapped){
+    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;
+  }
 })();