feat: full frontend with category tabs, shorts on homepage, video playlist below feed

static/index.html

@@ -10,325 +10,228 @@
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 body{background:#111;color:#eee;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow-x:hidden}
-.header{background:linear-gradient(135deg,#0d1117,#1a3a2a 50%,#8b7500);padding:14px 12px;text-align:center}
-.header h1{color:#fff;font-size:20px;font-weight:800}
-.header p{color:rgba(255,255,255,.6);font-size:11px;margin-top:2px}
-/* Tabs */
-.tabs{display:flex;overflow-x:auto;background:#1a1a1a;border-bottom:1px solid #333;padding:0 4px}
-.tab{padding:10px 14px;color:#888;font-size:12px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
-.tab.active{color:#5cb87a;border-bottom-color:#5cb87a;font-weight:600}
-/* Views */
+.header{background:linear-gradient(135deg,#0d1117,#1a3a2a 50%,#8b7500);padding:12px;text-align:center}
+.header h1{color:#fff;font-size:18px;font-weight:800}
+.header p{color:rgba(255,255,255,.6);font-size:10px;margin-top:2px}
+.cats{display:flex;overflow-x:auto;background:#1a1a1a;border-bottom:1px solid #333;padding:0 4px;scrollbar-width:none}
+.cats::-webkit-scrollbar{display:none}
+.cat{padding:9px 12px;color:#888;font-size:11px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0}
+.cat.active{color:#5cb87a;border-bottom-color:#5cb87a;font-weight:600}
 .view{display:none}.view.active{display:block}
-/* Cards */
-.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px 4px}
-@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
-.card{background:#1a1a1a;border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid #222}
+.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px 4px}
+@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
+@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
+.card{background:#1a1a1a;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid #222;transition:transform .1s}
 .card:active{transform:scale(.97)}
 .card-img{position:relative;width:100%;aspect-ratio:16/9;background:#222;overflow:hidden}
 .card-img img{width:100%;height:100%;object-fit:cover}
-.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
-.card-body{padding:8px}
-.card-title{font-size:12px;font-weight:600;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.badge{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:3px}
+.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
+.card-body{padding:6px 8px}
+.card-title{font-size:11px;font-weight:600;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.card-summ{font-size:10px;color:#777;margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
+.badge{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:2px}
 .badge-vne{background:#c0392b;color:#fff}.badge-bdp{background:#1a5c35;color:#fff}.badge-24h{background:#e67e22;color:#fff}
-/* Slider */
-.slider-wrap{margin:8px 4px;background:#1a1a1a;border-radius:10px;overflow:hidden;border:1px solid #2a2a2a}
-.slider-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
-.slider-label{color:#f0c040;font-size:14px;font-weight:700}
-.slider-track{display:flex;overflow-x:auto;gap:8px;padding:4px 12px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}
+.slider-wrap{margin:6px 4px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}
+.slider-header{display:flex;justify-content:space-between;align-items:center;padding:7px 10px}
+.slider-label{color:#f0c040;font-size:13px;font-weight:700}
+.slider-track{display:flex;overflow-x:auto;gap:8px;padding:4px 10px 10px;scrollbar-width:none;scroll-snap-type:x mandatory}
 .slider-track::-webkit-scrollbar{display:none}
-.slider-item{flex:0 0 180px;scroll-snap-align:start;cursor:pointer}
-.slider-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222}
+.slider-item{flex:0 0 160px;scroll-snap-align:start;cursor:pointer}
+.slider-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#222}
 .slider-thumb img{width:100%;height:100%;object-fit:cover}
-.slider-title{color:#ccc;font-size:11px;margin-top:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-/* Shorts slider */
-.shorts-item{flex:0 0 120px}
-.shorts-thumb{aspect-ratio:3/4;border-radius:10px}
-/* TikTok Feed */
-.tiktok-container{width:100%;height:80vh;max-height:680px;min-height:400px;background:#000;position:relative}
+.slider-title{color:#ccc;font-size:10px;margin-top:3px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.shorts-item{flex:0 0 110px}
+.shorts-thumb{aspect-ratio:3/4!important;border-radius:8px!important}
+.tiktok-container{width:100%;height:80vh;max-height:680px;min-height:400px;background:#000}
 .tiktok-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}
 .tiktok-feed::-webkit-scrollbar{display:none}
 .tiktok-slide{height:80vh;max-height:680px;min-height:400px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
 .tiktok-slide video{width:100%;height:100%;object-fit:cover;display:block}
 .tiktok-slide.contain-mode video{object-fit:contain}
-.tiktok-bottom{position:absolute;bottom:0;left:0;right:0;padding:14px 12px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
-.tiktok-title{color:#fff;font-size:13px;font-weight:600;margin:4px 0 6px;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.8)}
-.tiktok-actions{display:flex;gap:8px}
-.tiktok-btn{background:rgba(255,255,255,.15);color:#fff;border:none;padding:5px 12px;border-radius:14px;font-size:11px;cursor:pointer}
-.tiktok-counter{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;z-index:4}
-.tiktok-unmute{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:5px 10px;border-radius:14px;cursor:pointer;z-index:4}
-.tiktok-contain-btn{position:absolute;bottom:70px;right:10px;background:rgba(255,255,255,.15);color:#fff;border:none;padding:5px 10px;border-radius:12px;font-size:10px;cursor:pointer;z-index:4}
-/* Loading */
-.loading{text-align:center;padding:40px;color:#666}
-.topbar{display:flex;justify-content:space-between;padding:6px 8px;color:#555;font-size:11px}
-.section-title{font-size:15px;font-weight:700;color:#5cb87a;margin:8px 0 6px;padding-left:8px;border-left:3px solid #5cb87a}
-.back-btn{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;padding:6px 16px;border-radius:16px;font-size:12px;cursor:pointer;z-index:100;backdrop-filter:blur(4px)}
+.tiktok-bottom{position:absolute;bottom:0;left:0;right:0;padding:12px 10px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
+.tiktok-title{color:#fff;font-size:12px;font-weight:600;margin:3px 0 5px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.8)}
+.tiktok-actions{display:flex;gap:6px;flex-wrap:wrap}
+.tiktok-btn{background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 10px;border-radius:12px;font-size:10px;cursor:pointer}
+.tiktok-counter{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;padding:2px 7px;border-radius:8px;z-index:4}
+.tiktok-unmute{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:4px 9px;border-radius:12px;cursor:pointer;z-index:4}
+.tiktok-cbtn{position:absolute;bottom:60px;right:8px;background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 9px;border-radius:10px;font-size:9px;cursor:pointer;z-index:4}
+.loading{text-align:center;padding:40px;color:#666;font-size:13px}
+.topbar{display:flex;justify-content:space-between;padding:6px 8px;color:#555;font-size:10px}
+.section-title{font-size:14px;font-weight:700;color:#5cb87a;margin:8px 0 4px;padding-left:8px;border-left:3px solid #5cb87a}
+.back-btn{position:sticky;top:0;background:rgba(17,17,17,.9);color:#fff;border:none;padding:8px 16px;font-size:12px;cursor:pointer;z-index:100;width:100%;text-align:center;backdrop-filter:blur(4px)}
+a.card-link{text-decoration:none;color:inherit;display:block}
 </style>
 </head>
 <body>
-<div class="header"><h1>📰 VNEWS</h1><p>VnExpress · BongDaPlus · 24h</p></div>
-
-<div class="tabs">
-<div class="tab active" data-tab="home">🏠 Trang Chủ</div>
-<div class="tab" data-tab="video">🎬 Video</div>
-</div>
-
-<div id="view-home" class="view active">
-<div class="loading">Đang tải...</div>
-</div>
-
-<div id="view-video" class="view">
-<div class="loading">Đang tải video...</div>
-</div>
-
-<div id="view-tiktok" class="view">
-</div>
+<div class="header"><h1>📰 VNEWS</h1><p>VnExpress · BongDaPlus · 24h · Cập nhật tự động</p></div>
+<div class="cats" id="cat-bar"></div>
+<div id="view-home" class="view active"><div class="loading">Đang tải...</div></div>
+<div id="view-cat" class="view"></div>
+<div id="view-video" class="view"></div>
+<div id="view-tiktok" class="view"></div>
 
 <script>
-const SPACE='https://bep40-vnews.hf.space';
+const SPACE=location.origin;
+let _cats=[];
+
+// ═══ Init ═══
+async function init(){
+  _cats=await fetch('/api/categories').then(r=>r.json());
+  let bar='<div class="cat active" data-cat="home">🏠 Trang Chủ</div><div class="cat" data-cat="video">🎬 Video</div>';
+  _cats.forEach(c=>{bar+=`<div class="cat" data-cat="${c.id}">${c.name}</div>`;});
+  document.getElementById('cat-bar').innerHTML=bar;
+  document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});
+  loadHome();
+}
 
-// ═══ Tab switching ═══
-document.querySelectorAll('.tab').forEach(t=>{
-  t.onclick=()=>{
-    document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
-    document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));
-    t.classList.add('active');
-    document.getElementById('view-'+t.dataset.tab).classList.add('active');
-    if(t.dataset.tab==='video')loadVideos();
-  };
-});
+function switchCat(id){
+  document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
+  document.querySelector(`[data-cat="${id}"]`).classList.add('active');
+  document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));
+  document.querySelectorAll('#view-tiktok video').forEach(v=>v.pause());
+  if(id==='home'){document.getElementById('view-home').classList.add('active');}
+  else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}
+  else{document.getElementById('view-cat').classList.add('active');loadCategory(id);}
+}
 
-// ═══ Load homepage ═══
+// ═══ Homepage ═══
 async function loadHome(){
-  const [newsR,hlR,shR]=await Promise.all([
+  const [news,hl,sh]=await Promise.all([
     fetch('/api/homepage').then(r=>r.json()),
     fetch('/api/highlights').then(r=>r.json()),
     fetch('/api/shorts').then(r=>r.json())
   ]);
-  let html='';
-  // Shorts slider
-  if(shR.length){
-    html+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';
-    shR.forEach((a,i)=>{if(a.img)html+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts',${i})"><div class="slider-thumb shorts-thumb"><img src="${a.img}" alt=""><div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});
-    html+='</div></div>';
+  let h='';
+  // Shorts
+  if(sh.length){
+    h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';
+    sh.forEach((a,i)=>{if(a.img)h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts',${i})"><div class="slider-thumb shorts-thumb"><img src="${a.img}"><div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});
+    h+='</div></div>';
   }
-  // Highlights slider
-  if(hlR.length){
-    html+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Video Highlight</span></div><div class="slider-track">';
-    hlR.forEach((a,i)=>{if(a.img)html+=`<div class="slider-item" onclick="openTikTok('highlights',${i})"><div class="slider-thumb"><img src="${a.img}" alt=""><div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});
-    html+='</div></div>';
+  // Highlights
+  if(hl.length){
+    h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';
+    hl.forEach((a,i)=>{if(a.img)h+=`<div class="slider-item" onclick="openTikTok('highlights',${i})"><div class="slider-thumb"><img src="${a.img}"><div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});
+    h+='</div></div>';
   }
-  // News by group
-  const groups={};
-  newsR.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a);});
+  // News groups
+  const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a);});
   for(const[g,arts] of Object.entries(groups)){
-    html+=`<div class="section-title">${g}</div><div class="grid">`;
+    h+=`<div class="section-title">${g}</div><div class="grid">`;
     arts.slice(0,6).forEach(a=>{
-      html+=`<div class="card" onclick="openArticle('${a.link.replace(/'/g,"\\'")}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge badge-vne">VnExpress</span><div class="card-title">${a.title}</div></div></div>`;
+      const bg=a.source==='bdp'?'badge-bdp':'badge-vne';
+      const lb=a.source==='bdp'?'BDP':'VnExpress';
+      h+=`<div class="card" onclick="openArticle('${a.link.replace(/'/g,"\\'")}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div>${a.summary?`<div class="card-summ">${a.summary}</div>`:''}</div></div>`;
     });
-    html+='</div>';
+    h+='</div>';
   }
-  document.getElementById('view-home').innerHTML=html;
+  document.getElementById('view-home').innerHTML=h;
 }
 
-// ═══ Load video tab ═══
+// ═══ Category ═══
+async function loadCategory(id){
+  const el=document.getElementById('view-cat');
+  el.innerHTML='<div class="loading">Đang tải...</div>';
+  const arts=await fetch('/api/category/'+id).then(r=>r.json());
+  if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}
+  const cat=_cats.find(c=>c.id===id);
+  let h=`<div class="topbar"><span>${cat?cat.name:id}</span><span>${arts.length} tin</span></div><div class="grid">`;
+  arts.forEach(a=>{
+    const bg=a.source==='bdp'?'badge-bdp':'badge-vne';
+    const lb=a.source==='bdp'?'BDP':'VnExpress';
+    h+=`<div class="card" onclick="openArticle('${a.link.replace(/'/g,"\\'")}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div></div></div>`;
+  });
+  h+='</div>';el.innerHTML=h;
+}
+
+// ═══ Video tab ═══
 async function loadVideos(){
   const el=document.getElementById('view-video');
   if(el.dataset.loaded)return;
-  const[hlR,bdpR]=await Promise.all([
-    fetch('/api/highlights').then(r=>r.json()),
-    fetch('/api/bdp_videos').then(r=>r.json())
-  ]);
-  let html='<div class="topbar"><span>🎬 Video Highlight</span></div><div class="grid">';
-  hlR.forEach((a,i)=>{
-    html+=`<div class="card" onclick="openTikTok('highlights',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;
-  });
-  html+='</div>';
-  el.innerHTML=html;el.dataset.loaded='1';
+  el.innerHTML='<div class="loading">Đang tải...</div>';
+  const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);
+  let h='<div class="section-title">🎬 Highlight 24h</div><div class="grid">';
+  hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});
+  h+='</div>';
+  if(bdp.length){
+    h+='<div class="section-title">⚽ BDP Video</div><div class="grid">';
+    bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-bdp">BDP</span><div class="card-title">${a.title}</div></div></div>`;});
+    h+='</div>';
+  }
+  el.innerHTML=h;el.dataset.loaded='1';
 }
 
 // ═══ TikTok Feed ═══
-let _tikTokData=[];let _tikTokCurrent=0;
-
-async function openTikTok(type, startIdx){
-  // Show tiktok view
+let _tikData=[];
+async function openTikTok(type,startIdx){
   document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));
   document.getElementById('view-tiktok').classList.add('active');
-  document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
-
+  document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
   const el=document.getElementById('view-tiktok');
   el.innerHTML='<div class="loading">Đang tải video...</div>';
 
-  // Fetch video list
   let articles;
-  if(type==='shorts') articles=await fetch('/api/shorts').then(r=>r.json());
-  else if(type==='highlights') articles=await fetch('/api/highlights').then(r=>r.json());
+  if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());
+  else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());
   else articles=await fetch('/api/bdp_videos').then(r=>r.json());
 
-  // Fetch video URLs in parallel
   const vids=[];
-  const promises=articles.map(async(a,i)=>{
-    try{
-      const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link));
-      const v=await r.json();
-      if(v&&v.src)vids.push({...a,...v,_idx:i});
-    }catch(e){}
-  });
-  await Promise.all(promises);
+  await Promise.all(articles.map(async(a,i)=>{
+    try{const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link));const v=await r.json();if(v&&v.src)vids.push({...a,...v,_idx:i});}catch(e){}
+  }));
   vids.sort((a,b)=>a._idx-b._idx);
-
   if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
 
-  // Reorder: startIdx first
   const target=vids.find(v=>v._idx===startIdx);
   const ordered=target?[target,...vids.filter(v=>v!==target)]:vids;
-  _tikTokData=ordered;
+  _tikData=ordered;
 
-  // Render feed
-  let html='<button class="back-btn" onclick="goHome()">← Quay lại</button>';
-  html+='<div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">';
+  let h='<button class="back-btn" onclick="goHome()">← Quay lại</button>';
+  h+='<div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">';
   ordered.forEach((v,i)=>{
     const isHLS=v.src.includes('.m3u8');
     const poster=v.poster?` poster="${v.poster}"`:'';
-    const videoTag=isHLS?
-      `<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:
-      `<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;
-    const badge=v.source==='24h-shorts'||v.source==='24h'?'badge-24h':'badge-bdp';
-    const label=v.source==='24h-shorts'?'24h':v.source==='24h'?'24h':'BDP';
-    html+=`<div class="tiktok-slide" id="tslide-${i}" data-idx="${i}">
-${videoTag}
-<div class="tiktok-bottom"><span class="badge ${badge}">${label}</span>
-<p class="tiktok-title">${v.title}</p>
-<div class="tiktok-actions">
-<button class="tiktok-btn" onclick="shareVideo(${i})">📤 Chia sẻ</button>
-<button class="tiktok-btn" onclick="seekV(${i},-10)">⏪10s</button>
-<button class="tiktok-btn" onclick="seekV(${i},10)">10s⏩</button>
-</div></div>
-<button class="tiktok-contain-btn" onclick="toggleContain(this)">⬇ Contain</button>
-<div class="tiktok-unmute" onclick="toggleMute()">🔇 Bật tiếng</div>
-<span class="tiktok-counter">${i+1}/${ordered.length}</span>
-</div>`;
+    const vtag=isHLS?`<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:`<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;
+    const bg=v.source==='bdp'?'badge-bdp':'badge-24h';
+    const lb=v.source==='bdp'?'BDP':'24h';
+    h+=`<div class="tiktok-slide" id="tslide-${i}" data-idx="${i}">${vtag}<div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p><div class="tiktok-actions"><button class="tiktok-btn" onclick="shareV(${i})">📤 Chia sẻ</button><button class="tiktok-btn" onclick="seekV(${i},-10)">⏪10s</button><button class="tiktok-btn" onclick="seekV(${i},10)">10s⏩</button></div></div><button class="tiktok-cbtn" onclick="toggleContain(this)">⬇ Contain</button><div class="tiktok-unmute" onclick="toggleMute()">🔇 Bật tiếng</div><span class="tiktok-counter">${i+1}/${ordered.length}</span></div>`;
   });
-  html+='</div></div>';
+  h+='</div></div>';
 
-  // Video list below
-  html+='<div class="topbar"><span>📋 Danh sách</span></div><div class="grid">';
+  // Playlist below
+  h+='<div class="topbar"><span>📋 Danh sách phát ('+ordered.length+' video)</span></div><div class="grid">';
   ordered.forEach((v,i)=>{
-    const badge=v.source==='24h-shorts'||v.source==='24h'?'badge-24h':'badge-bdp';
-    const label=v.source==='24h-shorts'?'24h Shorts':v.source==='24h'?'24h':'BDP';
-    html+=`<a href="#tslide-${i}" style="text-decoration:none;color:inherit"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${badge}">${label}</span><div class="card-title">${v.title}</div></div></div></a>`;
+    const bg=v.source==='bdp'?'badge-bdp':'badge-24h';
+    const lb=v.source==='bdp'?'BDP':'24h';
+    h+=`<a href="#tslide-${i}" class="card-link"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${v.title}</div></div></div></a>`;
   });
-  html+='</div>';
-  el.innerHTML=html;
-
-  // Init HLS + autoplay
-  initTikTokFeed();
+  h+='</div>';
+  el.innerHTML=h;
+  initFeed();
 }
 
-function initTikTokFeed(){
-  const feed=document.getElementById('tiktok-feed');
-  if(!feed)return;
+function initFeed(){
+  const feed=document.getElementById('tiktok-feed');if(!feed)return;
   const slides=feed.querySelectorAll('.tiktok-slide');
-
-  // Init HLS
   slides.forEach(sl=>{
     const v=sl.querySelector('video[data-hls]');
-    if(v&&!v._hlsInit){
-      v._hlsInit=true;
-      const src=v.dataset.hls;
-      if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=src;
-      else if(Hls.isSupported()){const h=new Hls();h.loadSource(src);h.attachMedia(v);}
-      else v.src=src;
-    }
+    if(v&&!v._hlsI){v._hlsI=true;const s=v.dataset.hls;if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}else v.src=s;}
   });
-
-  // Scroll-based activation
   let cur=-1;
-  function activate(idx){
-    if(idx===cur)return;
-    slides.forEach((sl,i)=>{
-      const v=sl.querySelector('video');
-      if(i===idx){v.currentTime=0;v.play().catch(()=>{setTimeout(()=>v.play().catch(()=>{}),500);});}
-      else v.pause();
-    });
-    cur=idx;_tikTokCurrent=idx;
-  }
-  let sT;
-  feed.addEventListener('scroll',()=>{
-    clearTimeout(sT);
-    sT=setTimeout(()=>{
-      const rect=feed.getBoundingClientRect();
-      const center=rect.top+rect.height/2;
-      let best=-1,bestD=99999;
-      slides.forEach((sl,i)=>{
-        const r=sl.getBoundingClientRect();
-        const d=Math.abs(r.top+r.height/2-center);
-        if(d<bestD){bestD=d;best=i;}
-      });
-      if(best>=0)activate(best);
-    },150);
-  });
-  setTimeout(()=>activate(0),500);
-
-  // Tap to pause/play
-  slides.forEach(sl=>{
-    const v=sl.querySelector('video');
-    v.addEventListener('click',e=>{
-      e.preventDefault();
-      if(v.paused)v.play().catch(()=>{});
-      else v.pause();
-    });
-  });
-}
-
-function goHome(){
-  document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));
-  document.getElementById('view-home').classList.add('active');
-  document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
-  document.querySelector('[data-tab="home"]').classList.add('active');
-  // Pause all videos
-  document.querySelectorAll('#view-tiktok video').forEach(v=>v.pause());
-}
-
-function toggleMute(){
-  const feed=document.getElementById('tiktok-feed');
-  if(!feed)return;
-  const vids=feed.querySelectorAll('video');
-  const first=vids[0];if(!first)return;
-  const mute=!first.muted;
-  vids.forEach(v=>v.muted=mute);
-  feed.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=mute?'🔇 Bật tiếng':'🔊 Đang phát');
+  function act(idx){if(idx===cur)return;slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));}else v.pause();});cur=idx;}
+  let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect();const ctr=rect.top+rect.height/2;let best=-1,bestD=1e9;slides.forEach((sl,i)=>{const d=Math.abs(sl.getBoundingClientRect().top+sl.getBoundingClientRect().height/2-ctr);if(d<bestD){bestD=d;best=i;}});if(best>=0)act(best);},150);});
+  setTimeout(()=>act(0),500);
+  slides.forEach(sl=>{const v=sl.querySelector('video');v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause();});});
 }
 
-function toggleContain(btn){
-  const sl=btn.closest('.tiktok-slide');
-  sl.classList.toggle('contain-mode');
-  btn.textContent=sl.classList.contains('contain-mode')?'⤢ 1:1':'⬇ Contain';
-}
-
-function seekV(idx,sec){
-  const sl=document.getElementById('tslide-'+idx);
-  if(!sl)return;
-  const v=sl.querySelector('video');
-  if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+sec));
-}
+function goHome(){switchCat('home');}
+function toggleMute(){const f=document.getElementById('tiktok-feed');if(!f)return;const vs=f.querySelectorAll('video');const m=!vs[0]?.muted;vs.forEach(v=>v.muted=m);f.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=m?'🔇 Bật tiếng':'🔊 Đang phát');}
+function toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢ 1:1':'⬇ Contain';}
+function seekV(i,s){const sl=document.getElementById('tslide-'+i);if(sl){const v=sl.querySelector('video');if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+s));}}
+function shareV(i){const v=_tikData[i];if(!v)return;const u=v.link||'';if(navigator.share)navigator.share({title:v.title,url:u}).catch(()=>{});else{navigator.clipboard.writeText(u).then(()=>alert('Đã sao chép!')).catch(()=>{});}}
+function openArticle(url){window.open(url,'_blank');}
 
-function shareVideo(idx){
-  const v=_tikTokData[idx];
-  if(!v)return;
-  const img=encodeURIComponent(v.img||v.poster||'');
-  const title=encodeURIComponent(v.title);
-  const shareUrl=SPACE+'/share/'+encodeURIComponent(v.title.substring(0,50))+'?img='+img+'&title='+title;
-  if(navigator.share){navigator.share({title:v.title,url:v.link||shareUrl}).catch(()=>{});}
-  else{navigator.clipboard.writeText(v.link||shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});}
-}
-
-function openArticle(url){
-  window.open(url,'_blank');
-}
-
-// ═══ Init ═══
-loadHome();
+init();
 </script>
 </body>
 </html>