Fix: static/wc2026_v2.js (CSS rewrite/AI-wall, WC2026 BXH, highlight selection)

static/wc2026_v2.js

@@ -3,7 +3,32 @@ let _wc2026Data=null;let _wcRefreshInterval=null;
 const WC_TEAMS={'Mexico':'🇲🇽 Mexico','Colombia':'🇨🇴 Colombia','USA':'🇺🇸 Mỹ','United States':'🇺🇸 Mỹ','Brazil':'🇧🇷 Brazil','Argentina':'🇦🇷 Argentina','Germany':'🇩🇪 Đức','France':'🇫🇷 Pháp','Spain':'🇪🇸 Tây Ban Nha','England':'🏴󠁧󠁢󠁥󠁮󠁧󠁿 Anh','Portugal':'🇵🇹 Bồ Đào Nha','Netherlands':'🇳🇱 Hà Lan','Italy':'🇮🇹 Ý','Belgium':'🇧🇪 Bỉ','Croatia':'🇭🇷 Croatia','Uruguay':'🇺🇾 Uruguay','Japan':'🇯🇵 Nhật Bản','South Korea':'🇰🇷 Hàn Quốc','Korea Republic':'🇰🇷 Hàn Quốc','Australia':'🇦🇺 Úc','Saudi Arabia':'🇸🇦 Ả Rập Xê Út','Iran':'🇮🇷 Iran','Qatar':'🇶🇦 Qatar','Canada':'🇨🇦 Canada','Morocco':'🇲🇦 Morocco','Senegal':'🇸🇳 Senegal','Ecuador':'🇪🇨 Ecuador','Serbia':'🇷🇸 Serbia','Switzerland':'🇨🇭 Thụy Sĩ','Denmark':'🇩🇰 Đan Mạch','Poland':'🇵🇱 Ba Lan','Turkey':'🇹🇷 Thổ Nhĩ Kỳ','Türkiye':'🇹🇷 Thổ Nhĩ Kỳ','Ukraine':'🇺🇦 Ukraine','Egypt':'🇪🇬 Ai Cập','Nigeria':'🇳🇬 Nigeria','Cameroon':'🇨🇲 Cameroon','Ghana':'🇬🇭 Ghana','Tunisia':'🇹🇳 Tunisia','Algeria':'🇩🇿 Algeria','South Africa':'🇿🇦 Nam Phi','Indonesia':'🇮🇩 Indonesia','Vietnam':'🇻🇳 Việt Nam','China PR':'🇨🇳 Trung Quốc','New Zealand':'🇳🇿 New Zealand','Panama':'🇵🇦 Panama','Costa Rica':'🇨🇷 Costa Rica','Jamaica':'🇯🇲 Jamaica','Honduras':'🇭🇳 Honduras','Paraguay':'🇵🇾 Paraguay','Bolivia':'🇧🇴 Bolivia','Chile':'🇨🇱 Chile','Peru':'🇵🇪 Peru','Venezuela':'🇻🇪 Venezuela','Norway':'🇳🇴 Na Uy','Sweden':'🇸🇪 Thụy Điển','Austria':'🇦🇹 Áo','Scotland':'🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scotland','Wales':'🏴󠁧󠁢󠁷󠁬󠁳󠁿 Xứ Wales','Ireland':'🇮🇪 Ireland','Romania':'🇷🇴 Romania','Hungary':'🇭🇺 Hungary','Greece':'🇬🇷 Hy Lạp','Uzbekistan':'🇺🇿 Uzbekistan','Iraq':'🇮🇶 Iraq','TBD':'🏳️ TBD'};
 function _t(n){return WC_TEAMS[n]||WC_TEAMS[(n||'').trim()]||'🏴 '+n;}
 
-const WC_CSS=`<style>.wc-bxh{max-height:450px;overflow-y:auto;display:block!important;padding:2px}.wc-bxh,.wc-bxh *{color:#ddd!important;background:transparent!important;border-color:#1a3a5a!important;box-sizing:border-box!important;float:none!important;position:static!important;max-width:100%!important}.wc-bxh table{width:100%!important;border-collapse:collapse!important;font-size:11px!important;display:table!important;table-layout:auto!important;margin:4px 0!important}.wc-bxh thead{display:table-header-group!important}.wc-bxh tbody{display:table-row-group!important}.wc-bxh tr{display:table-row!important}.wc-bxh th,.wc-bxh td{display:table-cell!important}.wc-bxh th{background:#0b1a2a!important;color:#6a9fca!important;padding:5px 3px!important;font-size:9px!important;text-align:center!important}.wc-bxh td{padding:4px 3px!important;border-bottom:1px solid #0d1a2a!important;vertical-align:middle!important;font-size:10px!important}.wc-bxh img{width:16px!important;height:16px!important;vertical-align:middle!important;margin-right:3px!important;display:inline-block!important}.wc-bxh strong{color:#f0c040!important}.wc-bxh .title-content{background:#0b1a2a!important;border-radius:4px!important;margin:6px 0 2px!important;padding:5px 8px!important;display:block!important}.wc-bxh .info,.wc-bxh .btns,.wc-bxh script,.wc-bxh style,.wc-bxh ins,.wc-bxh iframe{display:none!important}.wc-bxh a{color:#8ab4d8!important;text-decoration:none!important}</style>`;
+const WC_CSS=`<style>
+.wc-bxh{max-height:460px;overflow-y:auto;padding:2px;display:block}
+.wc-bxh,.wc-bxh *{box-sizing:border-box!important;float:none!important;max-width:100%!important}
+.wc-bxh script,.wc-bxh style,.wc-bxh ins,.wc-bxh iframe,.wc-bxh .info,.wc-bxh .btns,.wc-bxh .form{display:none!important}
+.wc-bxh .title-table,.wc-bxh h6{display:block!important;background:#0b1a2a!important;color:#f0c040!important;font-size:11px!important;font-weight:800!important;padding:6px 8px!important;margin:8px 0 0!important;border-radius:5px 5px 0 0!important;border-bottom:1px solid #1a3a5a!important}
+.wc-bxh .bxh-head{display:flex!important;align-items:center!important;padding:4px 6px!important;background:#0a1320!important;color:#6a9fca!important;font-size:9px!important;font-weight:700!important;border-bottom:1px solid #1a3a5a!important}
+.wc-bxh .bxh-head .h-team{flex:1!important;text-align:left!important}
+.wc-bxh .bxh-head .h-stat{flex:0 0 26px!important;text-align:center!important}
+.wc-bxh .bxh-head .h-pts{flex:0 0 30px!important;text-align:center!important;color:#f0c040!important}
+.wc-bxh .item{display:flex!important;align-items:center!important;padding:5px 6px!important;border-bottom:1px solid #10202f!important;background:transparent!important}
+.wc-bxh .item:nth-child(even){background:#0a1320!important}
+.wc-bxh .item .team{flex:1!important;display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;text-align:left!important}
+.wc-bxh .item .team>span{flex:0 0 16px!important;color:#6a9fca!important;font-size:10px!important;text-align:center!important}
+.wc-bxh .item .team a{flex:1!important;display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:#eee!important;text-decoration:none!important}
+.wc-bxh .item .team a p{font-size:11px!important;color:#eee!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important}
+.wc-bxh .item .copy{display:flex!important;align-items:center!important;flex:0 0 auto!important}
+.wc-bxh .item .copy>p{flex:0 0 26px!important;text-align:center!important;font-size:10px!important;color:#ccc!important;margin:0!important}
+.wc-bxh .item .copy>p:last-of-type,.wc-bxh .item .copy>p:nth-last-child(2){flex:0 0 30px!important}
+.wc-bxh .item .copy>p strong{color:#f0c040!important;font-weight:800!important}
+.wc-bxh img{width:18px!important;height:18px!important;object-fit:contain!important;vertical-align:middle!important;display:inline-block!important;flex:0 0 18px!important}
+.wc-bxh strong{color:#f0c040!important}
+.wc-bxh a{color:#8ab4d8!important;text-decoration:none!important}
+.wc-bxh table{width:100%!important;border-collapse:collapse!important;font-size:11px!important;display:table!important}
+.wc-bxh th{background:#0b1a2a!important;color:#6a9fca!important;padding:5px 3px!important;font-size:9px!important;text-align:center!important}
+.wc-bxh td{padding:4px 3px!important;border-bottom:1px solid #0d1a2a!important;font-size:10px!important;color:#ddd!important}
+</style>`;
 
 function switchWCTab(tab){
   document.querySelectorAll('.wc-tab').forEach(t=>t.classList.remove('active'));
@@ -51,7 +76,22 @@ function renderWCFixtures(el){
 // === BXH ===
 function renderWCStandings(el){
   const d=_wc2026Data.standings||{};
-  if(d.html&&d.html.length>100){el.innerHTML=WC_CSS+'<div class="wc-bxh">'+d.html+'</div>';el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));return;}
+  if(d.html&&d.html.length>100){
+    el.innerHTML=WC_CSS+'<div class="wc-bxh">'+d.html+'</div>';
+    const box=el.querySelector('.wc-bxh');
+    if(box){
+      // Insert a column-header row right after each group title so stats are labeled
+      box.querySelectorAll('.title-table, h6').forEach(t=>{
+        if(t.nextElementSibling && t.nextElementSibling.classList.contains('bxh-head'))return;
+        const head=document.createElement('div');
+        head.className='bxh-head';
+        head.innerHTML='<span class="h-team">Đội</span><span class="h-stat">Tr</span><span class="h-stat">T</span><span class="h-stat">H</span><span class="h-stat">B</span><span class="h-stat">BT</span><span class="h-stat">BB</span><span class="h-pts">HS</span><span class="h-pts">Đ</span>';
+        t.insertAdjacentElement('afterend',head);
+      });
+    }
+    el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
+    return;
+  }
   // Self-calculate from fixtures
   const fx=_wc2026Data.fixtures||{};const matches=fx.matches||[];
   const gm=matches.filter(m=>m.group&&m.group.toLowerCase().includes('group'));
@@ -78,13 +118,14 @@ async function renderWCHighlights(el){
       fetch('/api/highlights/world-cup').then(r=>r.json()).catch(()=>[]),
       fetch('/api/highlights/friendly').then(r=>r.json()).catch(()=>[])
     ]);
-    const all=[...(wc||[]).map(v=>({...v,_league:'WC'})),...(fr||[]).map(v=>({...v,_league:'Friendly'}))];
+    // Keep per-league index so the clicked card maps to the correct video in its own league array
+    const all=[...(wc||[]).map((v,j)=>({...v,_league:'WC',_li:j})),...(fr||[]).map((v,j)=>({...v,_league:'Friendly',_li:j}))];
     if(!all.length){el.innerHTML='<div class="loading">Chưa có highlight World Cup & Giao hữu</div>';return;}
     let h='<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:450px;overflow-y:auto;padding:4px">';
     all.slice(0,24).forEach((v,i)=>{
       const league=v._league==='WC'?'world-cup':'friendly';
       const badge=v._league==='WC'?'🌍 WC':'🤝 Friendly';
-      h+=`<div style="cursor:pointer;border-radius:6px;overflow:hidden;background:#0a1520" onclick="openHighlightFeed('${league}',${i})">`;
+      h+=`<div style="cursor:pointer;border-radius:6px;overflow:hidden;background:#0a1520" onclick="openHighlightFeed('${league}',${v._li},'${esc(v.link)}')">`;
       h+=`<div style="position:relative;aspect-ratio:16/9;background:#1a2a3a">${v.img?`<img src="${esc(v.img)}" style="width:100%;height:100%;object-fit:cover">`:''}<div class="card-play">▶</div></div>`;
       h+=`<div style="padding:4px 6px"><span style="font-size:8px;color:#f0c040">${badge}</span><div style="font-size:10px;color:#ccc;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">${esc(v.title)}</div></div>`;
       h+='</div>';