revert: restore static/index.html to previous working version

static/index.html

@@ -21,6 +21,7 @@
 .card-img{position:relative;width:100%;aspect-ratio:16/9;background:#333;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover}
 .card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
 .card-body{padding:6px 8px}.card-title{font-size:11px;font-weight:600;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.card-meta{display:flex;gap:8px;margin-top:3px;font-size:9px;color:#666}
 .badge{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:2px}.badge-vne{background:#c0392b;color:#fff}.badge-bdp{background:#1a5c35;color:#fff}.badge-24h{background:#e67e22;color:#fff}.badge-bbc{background:#b80000;color:#fff}
 .slider-wrap{margin:6px 4px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}.slider-header{padding:7px 10px}.slider-label{color:#f0c040;font-size:13px;font-weight:700}
 .slider-track{display:flex;overflow-x:auto;gap:8px;padding:4px 10px 10px;scrollbar-width:none}.slider-track::-webkit-scrollbar{display:none}
@@ -31,16 +32,15 @@
 .tiktok-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}.tiktok-feed::-webkit-scrollbar{display:none}
 .tiktok-slide{height:80vh;max-height:680px;min-height:400px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:#000;display:flex;align-items:center;justify-content:center}
 .tiktok-slide video{width:100%;height:100%;object-fit:cover}.tiktok-slide.contain-mode video{object-fit:contain}
-.tiktok-bottom{position:absolute;bottom:0;left:0;right:60px;padding:12px 10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3;opacity:0;transition:opacity .3s}
+.tiktok-bottom{position:absolute;bottom:0;left:0;right:60px;padding:12px 10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
 .tiktok-title{color:#fff;font-size:12px;font-weight:600;margin:3px 0 5px;line-height:1.3}
 .tiktok-seek{display:flex;gap:8px;margin-top:4px}.tiktok-seek button{background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 10px;border-radius:10px;font-size:10px;cursor:pointer}
 .tiktok-counter{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;padding:2px 7px;border-radius:8px;z-index:4}
 .tiktok-unmute{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:4px 8px;border-radius:10px;cursor:pointer;z-index:4}
-.tiktok-right{position:absolute;right:8px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5;opacity:0;transition:opacity .3s}
+.tiktok-right{position:absolute;right:8px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}
 .tiktok-right-btn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:none;border:none;color:#fff}
 .tiktok-right-btn .icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:20px}
 .tiktok-right-btn .count{font-size:10px;color:#ddd}
-.tiktok-slide.show-ui .tiktok-bottom,.tiktok-slide.show-ui .tiktok-right{opacity:1}
 .cmt-panel{position:absolute;bottom:0;left:0;right:0;height:60%;background:#1a1a1a;z-index:30;transform:translateY(100%);transition:transform .3s;border-radius:14px 14px 0 0;padding:12px;overflow-y:auto}
 .cmt-panel.open{transform:translateY(0)}
 .cmt-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.cmt-panel-header h4{color:#fff;font-size:14px}.cmt-panel-close{background:none;border:none;color:#aaa;font-size:20px;cursor:pointer}
@@ -68,58 +68,20 @@ a.card-link{text-decoration:none;color:inherit}
 <div id="view-tiktok" class="view"></div>
 <div id="view-article" class="view"></div>
 <script>
-const SPACE=location.origin;
-let _cats=[],_tikData=[],_viewed=new Set();
-
+const SPACE=location.origin;let _cats=[],_tikData=[],_viewed=new Set();
+const LS={get(k){try{return JSON.parse(localStorage.getItem(k))}catch{return null}},set(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch{}}};
 function hid(s){let h=0;for(let i=0;i<s.length;i++){h=((h<<5)-h)+s.charCodeAt(i);h|=0;}return Math.abs(h).toString(36).slice(0,10);}
-
-// ═══ Server-side stats ═══
-async function srvView(aid){if(_viewed.has(aid))return;_viewed.add(aid);fetch('/api/view',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({aid})}).catch(()=>{});}
-async function srvStats(aid){return fetch('/api/stats/'+aid).then(r=>r.json()).catch(()=>({views:0,shares:0,comments:[]}));}
-async function srvComment(aid,name,text){return fetch('/api/comment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({aid,name,text})}).then(r=>r.json()).catch(()=>({comments:[]}));}
-
-// ═══ Share with hash URL ═══
-// Registers share on server → gets social_url (for og:image) → shares that URL
-// The hash URL format: /#/slug/hash
-async function doShare(title, articleUrl, img){
-  try {
-    const res = await fetch('/api/register_share', {
-      method:'POST', headers:{'Content-Type':'application/json'},
-      body: JSON.stringify({url: articleUrl, title: title, img: img||''})
-    }).then(r=>r.json());
-    // social_url = /s/slug/hash (server renders og:image then redirects to /#/slug/hash)
-    const shareUrl = res.social_url || (SPACE+'/#/'+res.slug+'/'+res.hash);
-    if(navigator.share) navigator.share({title, url: shareUrl}).catch(()=>{});
-    else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});
-  } catch(e) {
-    // Fallback: just share the hash URL without server registration
-    const slug = title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9\s-]/g,'').replace(/[\s]+/g,'-').slice(0,60);
-    const hash = hid(articleUrl);
-    const shareUrl = SPACE+'/#/'+slug+'/'+hash;
-    if(navigator.share) navigator.share({title, url: shareUrl}).catch(()=>{});
-    else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});
-  }
-}
-
-// ═══ Hash URL routing ═══
-// On load, check if hash matches /#/slug/hash → open that article
-function handleHashRoute(){
-  const hash = location.hash;
-  if(!hash || hash.length < 5) return false;
-  // Match /#/some-slug/12charhash
-  const m = hash.match(/^#\/(.+)\/([a-f0-9]{12})$/);
-  if(m){
-    const hashId = m[2];
-    // We don't know the URL from hash alone, but we stored it via pending_article
-    // Or we can ask server for the share info
-    fetch('/api/stats/'+hashId).then(()=>{
-      // The share page /s/slug/hash already sets pending_article in localStorage
-      // If user arrives via /#/slug/hash directly (not via /s redirect), we need to handle it
-      // For now, the /s route handles it. Direct hash URLs work if the user already visited.
-    });
-    return true;
-  }
-  return false;
+function incV(id){if(_viewed.has(id))return getV(id);_viewed.add(id);let v=(LS.get('v_'+id)||0)+1;LS.set('v_'+id,v);return v;}
+function getV(id){return LS.get('v_'+id)||0}
+function getCmts(id){return LS.get('c_'+id)||[]}
+function addCmt(id,n,t){let c=getCmts(id);c.push({n,t,d:new Date().toLocaleString('vi-VN')});LS.set('c_'+id,c);return c;}
+function incS(id){let v=(LS.get('s_'+id)||0)+1;LS.set('s_'+id,v);return v;}
+function getS(id){return LS.get('s_'+id)||0}
+function doShare(title,articleUrl,img){
+  const shareUrl=SPACE+'/s?url='+encodeURIComponent(articleUrl)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'');
+  const aid=hid(articleUrl||title);incS(aid);
+  if(navigator.share)navigator.share({title,url:shareUrl}).catch(()=>{});
+  else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép!')).catch(()=>{});
 }
 
 async function init(){
@@ -129,206 +91,89 @@ async function init(){
   document.getElementById('cat-bar').innerHTML=bar;
   document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});
   await loadHome();
-  // Handle pending article from share redirect
   const pending=localStorage.getItem('pending_article');
   if(pending){localStorage.removeItem('pending_article');let src='vne';if(pending.includes('bbc.com'))src='bbc';readArticle(pending,src);}
 }
-
-function switchCat(id){
-  document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
-  document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');
-  document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));
-  document.querySelectorAll('video').forEach(v=>v.pause());
-  if(id==='home') document.getElementById('view-home').classList.add('active');
-  else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}
-  else{document.getElementById('view-cat').classList.add('active');loadCat(id);}
-}
+function switchCat(id){document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.querySelectorAll('video').forEach(v=>v.pause());if(id==='home')document.getElementById('view-home').classList.add('active');else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}else{document.getElementById('view-cat').classList.add('active');loadCat(id);}}
 function showView(id){document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.getElementById(id).classList.add('active');}
 
 async function loadHome(){
   const[news,hl,sh]=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 h='';
-  if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';sh.forEach((a,i)=>{h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts','${a.link.replace(/'/g,"\\'")}')"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
-  if(hl&&hl.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';hl.forEach((a,i)=>{h+=`<div class="slider-item" onclick="openTikTok('highlights','${a.link.replace(/'/g,"\\'")}')"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
+  if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';sh.forEach((a,i)=>{h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts','${a.link}')"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
+  if(hl&&hl.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';hl.forEach((a,i)=>{h+=`<div class="slider-item" onclick="openTikTok('highlights','${a.link}')"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
   const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a);});
-  for(const[g,arts] of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';const lb=a.source==='bbc'?'BBC':a.source==='bdp'?'BDP':'VnE';h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';}
+  for(const[g,arts] of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';const lb=a.source==='bbc'?'BBC':a.source==='bdp'?'BDP':'VnE';const aid=hid(a.link);h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div><div class="card-meta"><span>👁${getV(aid)}</span><span>💬${getCmts(aid).length}</span></div></div></div>`;});h+='</div>';}
   document.getElementById('view-home').innerHTML=h;
 }
-
-async function loadCat(id){
-  const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';
-  const arts=await fetch('/api/category/'+id).then(r=>r.json());
-  if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}
-  let h='<div class="grid">';arts.forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${a.source}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';el.innerHTML=h;
-}
+async function loadCat(id){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=await fetch('/api/category/'+id).then(r=>r.json());if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}let h='<div class="grid">';arts.forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${a.source}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';el.innerHTML=h;}
 
 async function readArticle(url,source){
   if(source!=='vne'&&source!=='bbc'){window.open(url,'_blank');return;}
   showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';
-  const aid=hid(url);srvView(aid);
-  const[data,stats]=await Promise.all([fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json()),srvStats(aid)]);
+  const aid=hid(url);incV(aid);
+  const data=await fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json());
   if(!data||data.error){el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><a href="${url}" target="_blank" style="color:#5cb87a">Mở link gốc</a></div>`;return;}
   const ogImg=data.og_image||'';
-  // Update hash URL for this article
-  const slug = data.title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9\s-]/g,'').replace(/[\s]+/g,'-').slice(0,60);
-  history.replaceState(null,'',`#/${slug}/${aid}`);
-  let h=`<button class="back-btn" onclick="goBack()">← Quay lại</button><div class="article-view"><h1 class="article-title">${data.title}</h1>`;
+  let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${data.title}</h1>`;
   if(data.summary)h+=`<div class="article-summary">${data.summary}</div>`;
   data.body.forEach(b=>{if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;else if(b.type==='img')h+=`<img class="article-img" src="${b.src}">`;else if(b.type==='heading')h+=`<h2 class="article-h2">${b.text}</h2>`;});
-  const escTitle=data.title.replace(/'/g,"\\'");const escUrl=url.replace(/'/g,"\\'");const escImg=ogImg.replace(/'/g,"\\'");
-  h+=`<div class="article-actions"><button onclick="doShare('${escTitle}','${escUrl}','${escImg}')">📤 Chia sẻ (${stats.shares})</button><button>👁 ${stats.views}</button><button>💬 ${stats.comments.length}</button></div>`;
-  h+=`<div class="cmt-section"><h3>💬 Bình luận (${stats.comments.length})</h3><div id="cl-${aid}">`;
-  stats.comments.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});
-  if(!stats.comments.length)h+='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';
-  h+=`</div><div class="cmt-form"><input id="cn-${aid}" placeholder="Tên"><input id="ct-${aid}" placeholder="Bình luận..."><button onclick="submitArticleCmt('${aid}')">Gửi</button></div></div></div>`;
-  el.innerHTML=h;window.scrollTo(0,0);
+  h+=`<div class="article-actions"><button onclick="doShare('${data.title.replace(/'/g,"\\'")}','${url.replace(/'/g,"\\'")}','${ogImg.replace(/'/g,"\\'")}')">📤 Chia sẻ (${getS(aid)})</button><button>👁 ${getV(aid)}</button><button>💬 ${getCmts(aid).length}</button></div>`;
+  h+=renderCmtSection(aid);h+='</div>';el.innerHTML=h;window.scrollTo(0,0);
 }
+function renderCmtSection(aid){const cmts=getCmts(aid);let h=`<div class="cmt-section"><h3>💬 Bình luận (${cmts.length})</h3><div id="cl-${aid}">`;cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});if(!cmts.length)h+='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';h+=`</div><div class="cmt-form"><input id="cn-${aid}" placeholder="Tên"><input id="ct-${aid}" placeholder="Bình luận..."><button onclick="submitCmt('${aid}')">Gửi</button></div></div>`;return h;}
+function submitCmt(aid){const n=document.getElementById('cn-'+aid),t=document.getElementById('ct-'+aid);if(!n.value.trim()||!t.value.trim())return;addCmt(aid,n.value.trim(),t.value.trim());t.value='';const cmts=getCmts(aid);let h='';cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});document.getElementById('cl-'+aid).innerHTML=h;}
 
-function goBack(){history.replaceState(null,'','#');switchCat('home');}
-
-async function submitArticleCmt(aid){const n=document.getElementById('cn-'+aid),t=document.getElementById('ct-'+aid);if(!n.value.trim()||!t.value.trim())return;const res=await srvComment(aid,n.value.trim(),t.value.trim());t.value='';let h='';(res.comments||[]).slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});document.getElementById('cl-'+aid).innerHTML=h;}
-
-async function loadVideos(){const el=document.getElementById('view-video');if(el.dataset.loaded)return;el.innerHTML='<div class="loading">Đang tải...</div>';const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);let h='<div class="section-title">🎬 Highlight</div><div class="grid">';hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights','${a.link.replace(/'/g,"\\'")}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';if(bdp.length){h+='<div class="section-title">⚽ BDP</div><div class="grid">';bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp','${a.link.replace(/'/g,"\\'")}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-bdp">BDP</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';}el.innerHTML=h;el.dataset.loaded='1';}
+async function loadVideos(){const el=document.getElementById('view-video');if(el.dataset.loaded)return;el.innerHTML='<div class="loading">Đang tải...</div>';const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);let h='<div class="section-title">🎬 Highlight</div><div class="grid">';hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights','${a.link}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';if(bdp.length){h+='<div class="section-title">⚽ BDP</div><div class="grid">';bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp','${a.link}')"><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 Video Feed ═══
-async function openTikTok(type,targetLink){
+async function openTikTok(type, targetLink){
   showView('view-tiktok');document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
   const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải video...</div>';
-  let articles;
-  if(type==='shorts') articles=await fetch('/api/shorts').then(r=>r.json());
-  else if(type==='highlights') articles=await fetch('/api/highlights').then(r=>r.json());
-  else articles=await fetch('/api/bdp_videos').then(r=>r.json());
-
-  const vids=[];
-  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){
-        if(v.all_parts&&v.all_parts.length>1){
-          v.all_parts.forEach((p,pi)=>{vids.push({...a,src:p,poster:v.poster,_idx:i,_part:pi,title:a.title+` (P${pi+1})`});});
-        }else{vids.push({...a,...v,_idx:i,_part:0});}
-      }
-    }catch(e){}
-  }));
+  let articles;if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());else articles=await fetch('/api/bdp_videos').then(r=>r.json());
+  const vids=[];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){if(v.all_parts&&v.all_parts.length>1){v.all_parts.forEach((p,pi)=>{vids.push({...a,src:p,poster:v.poster,_idx:i,_part:pi,title:a.title+` (P${pi+1})`});});}else{vids.push({...a,...v,_idx:i,_part:0});}}}catch(e){}}));
   vids.sort((a,b)=>a._idx-b._idx||a._part-b._part);
   if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
   const ti=vids.findIndex(v=>v.link===targetLink);
   const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;
   _tikData=ordered;
-
-  let h=`<button class="back-btn" onclick="goBack()">← Quay lại</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
+  let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
   ordered.forEach((v,i)=>{
-    const aid=hid(v.link||v.title);
-    const isHLS=v.src.includes('.m3u8');
-    const poster=v.poster?` poster="${v.poster}"`:'';
+    const aid=hid(v.link||v.title);const isHLS=v.src.includes('.m3u8');const poster=v.poster?` poster="${v.poster}"`:'';
     const vtag=isHLS?`<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:`<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;
     const bg=v.source==='bdp'?'badge-bdp':'badge-24h';const lb=v.source==='bdp'?'BDP':'24h';
-    const escT=v.title.replace(/'/g,"\\'");const escL=(v.link||'').replace(/'/g,"\\'");const escI=(v.poster||v.img||'').replace(/'/g,"\\'");
-    h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-idx="${i}">
+    h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-link="${(v.link||'').replace(/"/g,'')}" data-img="${(v.poster||v.img||'').replace(/"/g,'')}">
 ${vtag}
 <div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p>
-<div class="tiktok-seek"><button onclick="event.stopPropagation();seekV(${i},-10)">⏪ 10s</button><button onclick="event.stopPropagation();seekV(${i},10)">10s ⏩</button><button onclick="event.stopPropagation();toggleContain(this)">⬇</button></div></div>
+<div class="tiktok-seek"><button onclick="seekV(${i},-10)">⏪ 10s</button><button onclick="seekV(${i},10)">10s ⏩</button><button onclick="toggleContain(this)">⬇</button></div></div>
 <div class="tiktok-right">
-<button class="tiktok-right-btn" onclick="event.stopPropagation()"><div class="icon">👁</div><div class="count" id="vc-${i}">0</div></button>
-<button class="tiktok-right-btn" onclick="event.stopPropagation();toggleCmtPanel(${i})"><div class="icon">💬</div><div class="count" id="cc-${i}">0</div></button>
-<button class="tiktok-right-btn" onclick="event.stopPropagation();doShare('${escT}','${escL}','${escI}')"><div class="icon">📤</div><div class="count" id="sc-${i}">0</div></button>
+<button class="tiktok-right-btn"><div class="icon">👁</div><div class="count" id="vc-${i}">${getV(aid)}</div></button>
+<button class="tiktok-right-btn" onclick="event.stopPropagation();toggleCmtPanel(${i})"><div class="icon">💬</div><div class="count" id="cc-${i}">${getCmts(aid).length}</div></button>
+<button class="tiktok-right-btn" onclick="event.stopPropagation();shareVid(${i})"><div class="icon">📤</div><div class="count" id="sc-${i}">${getS(aid)}</div></button>
 </div>
-<div class="tiktok-unmute" onclick="event.stopPropagation();toggleMute()">🔇</div>
+<div class="tiktok-unmute" onclick="toggleMute()">🔇</div>
 <span class="tiktok-counter">${i+1}/${ordered.length}</span>
-<div class="cmt-panel" id="cpanel-${i}"><div class="cmt-panel-header"><h4>💬 Bình luận</h4><button class="cmt-panel-close" onclick="event.stopPropagation();toggleCmtPanel(${i})">✕</button></div><div id="vcl-${i}"></div><div class="cmt-form"><input id="vcn-${i}" placeholder="Tên" onclick="event.stopPropagation()"><input id="vct-${i}" placeholder="Bình luận..." onclick="event.stopPropagation()"><button onclick="event.stopPropagation();submitVCmt(${i},'${aid}')">Gửi</button></div></div>
+<div class="cmt-panel" id="cpanel-${i}"><div class="cmt-panel-header"><h4>💬 Bình luận</h4><button class="cmt-panel-close" onclick="toggleCmtPanel(${i})">✕</button></div><div id="vcl-${i}"></div><div class="cmt-form"><input id="vcn-${i}" placeholder="Tên"><input id="vct-${i}" placeholder="Bình luận..."><button onclick="submitVCmt(${i},'${aid}')">Gửi</button></div></div>
 </div>`;
   });
   h+='</div></div>';
   h+=`<div class="topbar"><span>📋 Danh sách (${ordered.length})</span></div><div class="grid">`;
   ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<a href="#tslide-${i}" class="card-link"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${bg}">${v.source==='bdp'?'BDP':'24h'}</span><div class="card-title">${v.title}</div></div></div></a>`;});
-  h+='</div>';
-  el.innerHTML=h;
-  initFeed();
-  // Load stats async
-  ordered.forEach((v,i)=>{
-    const aid=hid(v.link||v.title);
-    srvStats(aid).then(st=>{
-      const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=st.views;
-      const cc=document.getElementById('cc-'+i);if(cc)cc.textContent=st.comments.length;
-      const sc=document.getElementById('sc-'+i);if(sc)sc.textContent=st.shares;
-      renderVCmts(i, st.comments);
-    });
-  });
+  h+='</div>';el.innerHTML=h;initFeed();
+  ordered.forEach((v,i)=>{renderVCmts(i,hid(v.link||v.title));});
 }
-
-function toggleCmtPanel(i){const p=document.getElementById('cpanel-'+i);if(p)p.classList.toggle('open');}
+function shareVid(i){const v=_tikData[i];if(!v)return;doShare(v.title,v.link||'',v.poster||v.img||'');const aid=hid(v.link||v.title);document.getElementById('sc-'+i).textContent=getS(aid);}
+function toggleCmtPanel(i){const p=document.getElementById('cpanel-'+i);p.classList.toggle('open');}
 function closeAllCmtPanels(){document.querySelectorAll('.cmt-panel.open').forEach(p=>p.classList.remove('open'));}
-function renderVCmts(i,cmts){const el=document.getElementById('vcl-'+i);if(!el)return;let h='';(cmts||[]).slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});if(!cmts||!cmts.length)h='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';el.innerHTML=h;}
-async function submitVCmt(i,aid){const n=document.getElementById('vcn-'+i),t=document.getElementById('vct-'+i);if(!n.value.trim()||!t.value.trim())return;const res=await srvComment(aid,n.value.trim(),t.value.trim());t.value='';renderVCmts(i,res.comments||[]);const el=document.getElementById('cc-'+i);if(el)el.textContent=(res.comments||[]).length;}
-
-// ═══ TikTok Feed: scroll-snap auto-play + tap UI ═══
-function initFeed(){
-  const feed=document.getElementById('tiktok-feed');if(!feed)return;
-  const slides=feed.querySelectorAll('.tiktok-slide');
-  // Init HLS for all slides
-  slides.forEach(sl=>{
-    const v=sl.querySelector('video[data-hls]');
-    if(v&&!v._h){
-      v._h=1;const s=v.dataset.hls;
-      if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;
-      else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}
-      else v.src=s;
-    }
-  });
-  let cur=-1;
-  function activate(idx){
-    if(idx===cur)return;
-    // ★ Close all comment panels when switching video
-    closeAllCmtPanels();
-    slides.forEach((sl,i)=>{
-      const v=sl.querySelector('video');
-      if(i===idx){
-        v.currentTime=0;
-        v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));
-        srvView(sl.dataset.aid||'');
-      }else{
-        v.pause();
-        sl.classList.remove('show-ui');
-      }
-    });
-    cur=idx;
-  }
-  // Scroll detection
-  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) activate(best);
-    },150);
-  });
-  // Auto-play first video
-  setTimeout(()=>activate(0),500);
-  // Tap to show/hide UI
-  slides.forEach(sl=>{
-    const v=sl.querySelector('video');
-    let hideT;
-    v.addEventListener('click',e=>{
-      e.preventDefault();
-      if(sl.classList.contains('show-ui')){
-        // Second tap: toggle pause/play + hide UI
-        v.paused?v.play().catch(()=>{}):v.pause();
-        sl.classList.remove('show-ui');
-        clearTimeout(hideT);
-      }else{
-        // First tap: show UI, auto-hide after 3s
-        sl.classList.add('show-ui');
-        clearTimeout(hideT);
-        hideT=setTimeout(()=>sl.classList.remove('show-ui'),3000);
-      }
-    });
-  });
-}
-
+function renderVCmts(i,aid){const el=document.getElementById('vcl-'+i);if(!el)return;const cmts=getCmts(aid);let h='';cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});if(!cmts.length)h='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';el.innerHTML=h;}
+function submitVCmt(i,aid){const n=document.getElementById('vcn-'+i),t=document.getElementById('vct-'+i);if(!n.value.trim()||!t.value.trim())return;addCmt(aid,n.value.trim(),t.value.trim());t.value='';renderVCmts(i,aid);document.getElementById('cc-'+i).textContent=getCmts(aid).length;}
+
+function initFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');slides.forEach(sl=>{const v=sl.querySelector('video[data-hls]');if(v&&!v._h){v._h=1;const s=v.dataset.hls;if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}else v.src=s;}});
+let cur=-1;function act(idx){if(idx===cur)return;
+  closeAllCmtPanels();
+  slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));const aid=sl.dataset.aid;if(aid){incV(aid);const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=getV(aid);}}else v.pause();});cur=idx;}
+let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect();const ctr=rect.top+rect.height/2;let best=-1,bestD=1e9;slides.forEach((sl,i)=>{const d=Math.abs(sl.getBoundingClientRect().top+sl.getBoundingClientRect().height/2-ctr);if(d<bestD){bestD=d;best=i;}});if(best>=0)act(best);},150);});
+setTimeout(()=>act(0),500);
+slides.forEach(sl=>{const v=sl.querySelector('video');v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause();});});}
 function toggleMute(){const f=document.getElementById('tiktok-feed');if(!f)return;const vs=f.querySelectorAll('video');const m=!vs[0]?.muted;vs.forEach(v=>v.muted=m);f.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=m?'🔇':'🔊');}
 function toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢':'⬇';}
 function seekV(i,s){const sl=document.getElementById('tslide-'+i);if(sl){const v=sl.querySelector('video');if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+s));}}