Nâng lên 5 chủ đề HOT (AI Thế Giới + AI Việt Nam + top 3) + lazy load more button

• hot_multi.js v3: lấy 5 chủ đề (prepend AI Thế Giới, AI Việt Nam + top 3 hot) thay vì 3
• Thêm nút 'Tải thêm' lazy loading dưới danh sách tin HOT
• Thêm auto_update.js vào index_v2.html
• Gộp logic AI_TOPICS từ hot_ai_prepend.js vào hot_multi.js

static/hot_multi.js

@@ -1,17 +1,34 @@
 // === OVERRIDE: loadHotTopics loads from MULTIPLE hashtags ===
+// v3: 5 topics (AI Thế Giới + AI Việt Nam + top 3 hot) + lazy load more
 // This file loaded AFTER app_v2.js, overrides the function
 
+const HT_AI_TOPICS = ['AI Thế Giới', 'AI Việt Nam'];
+let _htAllSources = [];
+let _htTopics = [];
+let _htPages = 0;
+
 async function loadHotTopics(){
   const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));
   const el=document.getElementById('hot-topics');if(!el)return;
   const topics=j.topics||[];
-  el.innerHTML=topics.slice(0,18).map(t=>{
+
+  // Prepend AI topics that aren't already in the list
+  const prepend = HT_AI_TOPICS.filter(ai => 
+    !topics.some(t => (t.topic || '').toLowerCase().includes(ai.toLowerCase()))
+  ).map(ai => ({label: '#' + ai.replace(/\s+/g, ''), topic: ai, count: 0}));
+
+  const finalTopics = [...prepend, ...topics].slice(0, 18);
+
+  el.innerHTML=finalTopics.map(t=>{
     const topicText=t.topic||t.label.replace(/^#/,'');
     return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;
   }).join('');
-  // Load tin HOT = tổng hợp từ TOP 3 hashtag nóng nhất
-  if(topics.length>=2){
-    loadMultiHashtag(topics.slice(0,3).map(t=>t.topic||t.label.replace(/^#/,'')));
+
+  // Load tin HOT = tổng hợp từ TOP 5 hashtag (AI Thế Giới + AI Việt Nam + top 3 hot)
+  const top5 = [...prepend, ...topics].slice(0, 5);
+  if(top5.length>=2){
+    _htTopics = top5.map(t=>t.topic||t.label.replace(/^#/,''));
+    loadMultiHashtag(_htTopics);
   }else if(topics.length){
     searchTopic(topics[0].topic||topics[0].label.replace(/^#/,''));
   }
@@ -19,6 +36,9 @@ async function loadHotTopics(){
 
 async function loadMultiHashtag(topicList){
   const box=document.getElementById('hashtag-box');if(!box)return;
+  _htAllSources = [];
+  _htPages = 0;
+
   box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Tổng hợp từ ${topicList.length} chủ đề nóng nhất...</div></div>`;
   try{
     const results=await Promise.all(topicList.map(topic=>
@@ -33,17 +53,69 @@ async function loadMultiHashtag(topicList){
         if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=topicList[j];all.push(src);}
       }
     }
-    if(!all.length){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;return;}
-    let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${all.length} bài · ${topicList.length} chủ đề)</span></h3><div id="ht-list">`;
-    all.slice(0,12).forEach((s,i)=>{
-      h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
-    });
-    h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
-    topicList.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
-    h+=`</div></div>`;
-    box.innerHTML=h;
-    // Lazy load images
-    all.slice(0,12).forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
-    _htTopic=topicList[0];
+    _htAllSources = all;
+    _renderHT();
   }catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin</div></div>`;}
+}
+
+function _renderHT(){
+  const box=document.getElementById('hashtag-box');if(!box)return;
+  const all = _htAllSources;
+  if(!all.length){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;return;}
+
+  const perPage = 12;
+  const total = all.length;
+  const shown = Math.min((_htPages + 1) * perPage, total);
+  const visible = all.slice(0, shown);
+
+  let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${total} bài · ${_htTopics.length} chủ đề)</span></h3><div id="ht-list">`;
+  visible.forEach((s,i)=>{
+    h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
+  });
+  h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
+  _htTopics.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
+  h+=`</div>`;
+  if(shown < total){
+    h+=`<button class="hashtag-load-more" id="ht-load-more" onclick="htLoadMore()">Tải thêm (${total - shown} tin) ▼</button>`;
+  }
+  h+=`</div>`;
+  box.innerHTML=h;
+
+  // Lazy load images
+  visible.forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
+  _htTopic = _htTopics[0];
+}
+
+async function htLoadMore(){
+  const btn=document.getElementById('ht-load-more');if(!btn)return;
+  btn.disabled=true;btn.textContent='Đang tải thêm...';
+  const nextPage = _htPages + 1;
+
+  try{
+    // Fetch next page from each topic
+    const results=await Promise.all(_htTopics.map(topic=>
+      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=${nextPage}`).then(r=>r.json()).catch(()=>({sources:[]}))
+    ));
+    _htPages = nextPage;
+
+    // Interleave new sources
+    const seen=new Set(_htAllSources.map(s=>s.url));
+    const mx=Math.max(...results.map(r=>(r.sources||[]).length));
+    const newItems=[];
+    for(let i=0;i<mx;i++){
+      for(let j=0;j<results.length;j++){
+        const src=(results[j].sources||[])[i];
+        if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=_htTopics[j];newItems.push(src);}
+      }
+    }
+
+    if(newItems.length){
+      _htAllSources = [..._htAllSources, ...newItems];
+    }
+
+    _renderHT();
+  }catch(e){
+    btn.disabled=false;btn.textContent='Tải thêm ▼';
+    toast('❌ Lỗi tải thêm');
+  }
 }

static/index_v2.html

@@ -71,7 +71,8 @@ var SPACE=location.origin;
 <script src="/static/app_v2.js?v=20260711"></script>
 <script src="/static/yt_live.js"></script>
 <script src="/static/vtv_init.js"></script>
-<script src="/static/hot_multi.js?v=1"></script>
+<script src="/static/hot_multi.js?v=3"></script>
+<script src="/static/auto_update.js"></script>
 <script src="/static/wc2026_v2.js"></script>
 <script src="/static/live_mode.js"></script>
 <script src="/static/match_detail_v6.js"></script>