Upload static/match_detail.js

static/match_detail.js

@@ -1,107 +1,54 @@
-// === VNEWS — Match Detail UI (v5) ===
-// Tabs: Thống kê (H2H stats, prediction, recent results) + Diễn biến (goals, cards, subs with player names)
+// === VNEWS — Match Detail UI (v5-fast) ===
+// Uses /api/proxy/bongda for fast server-side scraping
 (function(){
   if(window._mdLoadedV5) return;
   window._mdLoadedV5 = true;
-  if(window._mdLoaded) window._mdLoaded = true; // prevent v4 from loading too
 
   if(!document.getElementById('mdv5-css')){
     const s=document.createElement('style');
     s.id='mdv5-css';
     s.textContent=`
-    /* === BASE === */
     .mdv5-sec{margin-bottom:14px}
-    .mdv5-sec-title{font-size:12px;font-weight:800;color:#5cb87a;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:6px}
-
-    /* === MATCH HEADER === */
+    .mdv5-sec-title{font-size:12px;font-weight:800;color:#5cb87a;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #2a2a2a}
     .mdv5-header{background:linear-gradient(135deg,#1a2a1f,#0d1117);border:1px solid #2d8659;border-radius:10px;padding:12px;text-align:center;margin-bottom:12px}
-    .mdv5-league{font-size:9px;color:#5cb87a;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
     .mdv5-teams{display:flex;align-items:center;justify-content:center;gap:12px}
     .mdv5-team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
     .mdv5-team img{width:44px;height:44px;object-fit:contain;background:#111;border-radius:50%;padding:4px;border:2px solid #333}
-    .mdv5-team span{font-size:13px;color:#fff;text-align:center;font-weight:700}
-    .mdv5-vs{min-width:70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
-    .mdv5-vs .mdv5-score{font-size:26px;font-weight:900;color:#f0c040;line-height:1}
-    .mdv5-vs .mdv5-status{font-size:9px;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:.5px;margin-top:2px}
+    .mdv5-vs .mdv5-score{font-size:26px;font-weight:900;color:#f0c040}
+    .mdv5-vs .mdv5-status{font-size:9px;font-weight:700;padding:2px 10px;border-radius:4px}
     .mdv5-vs .mdv5-status.finished{background:#2d8659;color:#a8ffb8}
-    .mdv5-vs .mdv5-status.live{background:#c0392b;color:#fff;animation:mdv5pulse 1.5s ease-in-out infinite}
-    .mdv5-vs .mdv5-status.halftime{background:#b7950b;color:#fff}
-    .mdv5-info{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}
-    .mdv5-info-item{font-size:10px;color:#aaa;display:flex;align-items:center;gap:3px}
-    .mdv5-info-item b{color:#ddd;font-size:11px}
-
-    /* === TABS === */
+    .mdv5-vs .mdv5-status.live{background:#c0392b;color:#fff;animation:mdv5pulse 1.5s infinite}
     .mdv5-tabs{display:flex;gap:4px;margin-bottom:10px}
-    .mdv5-tab-btn{flex:1;padding:9px 4px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
+    .mdv5-tab-btn{flex:1;padding:9px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer}
     .mdv5-tab-btn.active{background:#2d8659;color:#fff}
     .mdv5-tab-btn:not(.active){background:#1a1a1a;color:#888}
-    .mdv5-tab-btn:not(.active):hover{background:#2a2a2a;color:#bbb}
     .mdv5-tab-content{display:none}
     .mdv5-tab-content.active{display:block}
-
-    /* === DIỄN BIẾN === */
-    .mdv5-timeline{position:relative}
-    .mdv5-period{font-size:11px;font-weight:800;color:#5cb87a;padding:6px 0 4px 0;border-bottom:1px solid #2a2a2a;margin-bottom:2px;display:flex;align-items:center;gap:6px}
-    .mdv5-period::before{content:"";display:inline-block;width:3px;height:12px;background:#5cb87a;border-radius:2px}
-    .mdv5-ev{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #1a1a1a;position:relative}
-    .mdv5-ev-time{font-size:11px;font-weight:800;color:#f0c040;min-width:40px;flex-shrink:0;padding-top:1px;text-align:center}
-    .mdv5-ev-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:-1px}
-    .mdv5-ev-icon svg{width:16px;height:16px}
-    .mdv5-ev-body{flex:1;min-width:0}
-    .mdv5-ev-team{display:inline-block;font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;margin-right:4px;vertical-align:middle}
-    .mdv5-ev-team.home{background:#1a3a2a;color:#5cb87a;border:1px solid #2d5a3a}
-    .mdv5-ev-team.away{background:#3a2a1a;color:#e85d04;border:1px solid #5a3a2a}
-    .mdv5-ev-title{font-size:12px;color:#fff;font-weight:700;vertical-align:middle}
-    .mdv5-ev-detail{font-size:11px;color:#999;margin-top:3px;line-height:1.5}
-    .mdv5-ev-player{color:#ddd;font-weight:600}
-    .mdv5-ev-out{color:#e85d04;font-weight:600}
-    .mdv5-ev-in{color:#5cb87a;font-weight:600}
-    .mdv5-ev-arrow{color:#555;margin:0 5px;font-size:12px}
-    .mdv5-ev-assist{color:#888;font-size:10px;font-style:italic}
-
-    /* === THỐNG KÊ === */
+    .mdv5-timeline{}
+    .mdv5-period{font-size:11px;font-weight:800;color:#5cb87a;padding:6px 0;border-bottom:1px solid #2a2a2a;margin-bottom:2px}
+    .mdv5-ev{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #1a1a1a}
+    .mdv5-ev-time{font-size:11px;font-weight:800;color:#f0c040;min-width:40px;text-align:center}
+    .mdv5-ev-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
+    .mdv5-ev-body{flex:1}
+    .mdv5-ev-team{font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;margin-right:4px}
+    .mdv5-ev-team.home{background:#1a3a2a;color:#5cb87a}
+    .mdv5-ev-team.away{background:#3a2a1a;color:#e85d04}
+    .mdv5-ev-title{font-size:12px;color:#fff;font-weight:700}
+    .mdv5-ev-detail{font-size:11px;color:#999;margin-top:3px}
     .mdv5-stat-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11px;border-bottom:1px solid #1a1a1a}
-    .mdv5-stat-home{width:36px;text-align:right;color:#5cb87a;font-weight:700;flex-shrink:0}
+    .mdv5-stat-home{width:36px;text-align:right;color:#5cb87a;font-weight:700}
     .mdv5-stat-label{flex:1;text-align:center;color:#999;font-size:10px}
-    .mdv5-stat-away{width:36px;text-align:left;color:#e85d04;font-weight:700;flex-shrink:0}
-
-    /* === H2H STANDINGS === */
-    .mdv5-h2h-row{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#111;border-radius:6px;margin-bottom:3px;font-size:11px}
-    .mdv5-h2h-pos{width:20px;text-align:center;color:#888;font-size:10px;flex-shrink:0}
-    .mdv5-h2h-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}
-    .mdv5-h2h-name{flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
-    .mdv5-h2h-stats{display:flex;gap:6px;font-size:10px;color:#999}
-    .mdv5-h2h-stat{min-width:18px;text-align:center}
-
-    /* === PREDICTION === */
+    .mdv5-stat-away{width:36px;text-align:left;color:#e85d04;font-weight:700}
     .mdv5-pred{background:linear-gradient(135deg,#1a2a1f,#0d1117);border:1px solid #2d8659;border-radius:10px;padding:10px;margin-bottom:12px}
-    .mdv5-pred-title{font-size:9px;color:#5cb87a;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;text-align:center}
+    .mdv5-pred-title{font-size:9px;color:#5cb87a;font-weight:700;text-align:center;margin-bottom:8px}
     .mdv5-pred-teams{display:flex;align-items:center;justify-content:center;gap:8px}
-    .mdv5-pred-team{display:flex;flex-direction:column;align-items:center;gap:3px}
-    .mdv5-pred-team img{width:28px;height:28px;object-fit:contain}
-    .mdv5-pred-team span{font-size:10px;color:#ddd;font-weight:600}
     .mdv5-pred-vs{font-size:14px;font-weight:800;color:#f0c040}
-    .mdv5-pred-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:8px;background:#222}
-    .mdv5-pred-bar-h{background:#5cb87a;height:100%}
-    .mdv5-pred-bar-d{background:#666;height:100%}
-    .mdv5-pred-bar-a{background:#e85d04;height:100%}
-    .mdv5-pred-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:9px;color:#999}
-
-    /* === RECENT RESULTS === */
     .mdv5-recent-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#111;border-radius:6px;margin-bottom:3px;font-size:11px}
-    .mdv5-recent-date{font-size:9px;color:#888;min-width:55px;flex-shrink:0}
-    .mdv5-recent-league{font-size:8px;color:#666;flex-shrink:0;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .mdv5-recent-teams{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
-    .mdv5-recent-home{text-align:right;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .mdv5-recent-away{text-align:left;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-    .mdv5-recent-score{font-size:11px;font-weight:800;color:#f0c040;min-width:36px;text-align:center;flex-shrink:0}
-
-    /* === COMMON === */
+    .mdv5-recent-date{font-size:9px;color:#888;min-width:55px}
+    .mdv5-recent-score{font-size:11px;font-weight:800;color:#f0c040;min-width:36px;text-align:center}
     .mdv5-no-data{text-align:center;color:#666;padding:16px 8px;font-size:12px}
-    .mdv5-err{color:#e85d04;font-size:12px;padding:8px;background:#2a1a1a;border-radius:6px;margin-bottom:6px;line-height:1.5}
-    .mdv5-warn{color:#f0c040;font-size:12px;padding:8px;background:#2a2a1a;border-radius:6px;margin-bottom:6px;line-height:1.5}
+    .mdv5-warn{color:#f0c040;font-size:12px;padding:8px;background:#2a2a1a;border-radius:6px}
     .mdv5-source{font-size:9px;color:#5cb87a;text-align:center;padding:3px;background:#1a2a1f;border-radius:4px;margin-bottom:8px}
-    .mdv5-open-ext{display:inline-block;margin-top:10px;padding:8px 16px;background:#2d8659;color:#fff;border-radius:8px;text-decoration:none;font-size:12px;font-weight:600}
     @keyframes mdv5spin{to{transform:rotate(360deg)}}
     @keyframes mdv5pulse{0%,100%{opacity:1}50%{opacity:.5}}
     `;
@@ -109,447 +56,128 @@
   }
 
   function esc(s){const d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
-  function sanitizeHtml(html){
-    if(!html)return'';
-    let h=html.replace(/style="[^"]*"/gi,'');
-    h=h.replace(/<script[^>]*>.*?<\/script>/gi,'');
-    h=h.replace(/<iframe[^>]*>.*?<\/iframe>/gi,'');
-    h=h.replace(/<style[^>]*>.*?<\/style>/gi,'');
-    h=h.replace(/on\w+="[^"]*"/gi,'');
-    return h;
-  }
-
-  // === CLIENT-SIDE PARSER ===
-  function parseBongdaHtml(html,eventId){
-    try{
-      const parser=new DOMParser();
-      const doc=parser.parseFromString(html,'text/html');
-      const result={event_id:eventId,found:false,sections:[]};
-      function cl(s){return(s||'').replace(/\s+/g,' ').trim();}
-
-      // 1. TEAMS + SCORE
-      const teamsEl=doc.querySelector('.teams');
-      if(teamsEl){
-        const info={};
-        const homeEl=teamsEl.querySelector('.team.home')||teamsEl.querySelector('[class*="home"]');
-        if(homeEl){
-          const ne=homeEl.querySelector('p:not(.logo)')||homeEl.querySelector('p');
-          if(ne)info.home_team=cl(ne.textContent);
-          const lo=homeEl.querySelector('img');
-          if(lo)info.home_logo=lo.getAttribute('src')||'';
-        }
-        const awayEl=teamsEl.querySelector('.team.away')||teamsEl.querySelector('[class*="away"]');
-        if(awayEl){
-          const ne=awayEl.querySelector('p:not(.logo)')||awayEl.querySelector('p');
-          if(ne)info.away_team=cl(ne.textContent);
-          const lo=awayEl.querySelector('img');
-          if(lo)info.away_logo=lo.getAttribute('src')||'';
-        }
-        const scoreEl=teamsEl.querySelector('.score');
-        if(scoreEl){
-          const parts=Array.from(scoreEl.querySelectorAll('p')).map(p=>cl(p.textContent));
-          if(parts.length>=2)info.score=parts[0]+' - '+parts[1];
-          const lb=scoreEl.querySelector('.label');
-          if(lb)info.status_label=cl(lb.textContent);
-        }
-        if(info.home_team&&info.away_team){
-          result.info=info;result.found=true;result.sections.push('info');
-        }
-      }
-
-      // 2. MATCH INFO
-      const mi=doc.querySelector('.match-info');
-      if(mi){const te=mi.querySelector('.times')||mi.querySelector('li');if(te){result.info=result.info||{};result.info.datetime=cl(te.textContent);}}
-
-      // 3. EVENTS (.events > .period > .event)
-      const eventsData=[];
-      const eventsDiv=doc.querySelector('.events');
-      if(eventsDiv){
-        let currentPeriod='';
-        for(const child of eventsDiv.children){
-          if(!child.tagName)continue;
-          const cls=child.className||('');
-          if(cls.includes('period')){
-            const h2=child.querySelector('h2');
-            if(h2)currentPeriod=cl(h2.textContent);
-            for(const ev of child.children){
-              if(!ev.tagName)continue;
-              const evCls=ev.className||('');
-              if(!evCls.includes('event'))continue;
-              const team=evCls.includes('home')?'home':'away';
-              const evData={team:team,period:currentPeriod,type:'unknown',time:'',players:'',player_in:'',player_out:'',scorer:'',assist:'',player:''};
-
-              // Event type
-              const typeEl=ev.querySelector('.event-type');
-              if(typeEl){
-                if(typeEl.querySelector('[class*="redcard"]')){evData.type='redcard';evData.card_type='red';}
-                else if(typeEl.querySelector('[class*="yellowcard"]')){evData.type='yellowcard';evData.card_type='yellow';}
-                else if(typeEl.querySelector('[class*="goal"]')){evData.type='goal';}
-                else if(typeEl.querySelector('[class*="substitution"]')){evData.type='substitution';}
-                else{
-                  const svgRects=typeEl.querySelectorAll('svg rect');
-                  for(const rect of svgRects){if(rect.getAttribute('fill')==='#E20007'){evData.type='redcard';evData.card_type='red';break;}}
-                  if(evData.type==='unknown'){
-                    const svgCircles=typeEl.querySelectorAll('svg circle');
-                    for(const c of svgCircles){if(c.getAttribute('fill')==='white'&&c.getAttribute('r')==='8'){evData.type='goal';break;}}
-                  }
-                  if(evData.type==='unknown'&&ev.querySelector('.players.subst'))evData.type='substitution';
-                }
-              }
-              const playersEl=ev.querySelector('.players');
-              if(playersEl&&evData.type==='unknown'){
-                const pcls=playersEl.className||('');
-                if(pcls.includes('goal'))evData.type='goal';
-                else if(pcls.includes('card'))evData.type='redcard';
-                else if(pcls.includes('subst'))evData.type='substitution';
-              }
-
-              // Time
-              if(playersEl){
-                const timeEl=playersEl.querySelector('.event-time');
-                if(timeEl)evData.time=cl(timeEl.textContent);
-                evData.players=cl(playersEl.textContent);
-
-                const texts=[];
-                playersEl.querySelectorAll('div').forEach(d=>{const t=cl(d.textContent);if(t&&t!==evData.time)texts.push(t);});
-                playersEl.querySelectorAll('p').forEach(p=>{const t=cl(p.textContent);if(t&&!texts.includes(t))texts.push(t);});
-
-                if(evData.type==='substitution'){
-                  if(texts.length>=2){evData.player_out=texts[0];evData.player_in=texts[1];}
-                  else if(texts.length===1){evData.player_in=texts[0];}
-                }else if(evData.type==='goal'){
-                  if(texts.length>=1)evData.scorer=texts[0];
-                  if(texts.length>=2)evData.assist=texts[1];
-                }else if(evData.type==='redcard'||evData.type==='yellowcard'){
-                  if(texts.length>=1)evData.player=texts.join(' ');
-                }
-              }
-              eventsData.push(evData);
-            }
-          }
-        }
-      }
-      if(eventsData.length>0){result.events=eventsData;result.sections.push('events');}
-
-      // 4. PREDICTION
-      const predCard=doc.querySelector('.prediction-card');
-      if(predCard){
-        const predData={};
-        const teamInfo=predCard.querySelector('.team-info');
-        if(teamInfo){
-          const teams=teamInfo.querySelectorAll('.team');
-          if(teams.length>=2){
-            predData.home_name=cl(teams[0].querySelector('.team-name')?.textContent||'');
-            predData.away_name=cl(teams[1].querySelector('.team-name')?.textContent||'');
-            const divider=teamInfo.querySelector('.divider');
-            if(divider)predData.result=cl(divider.textContent);
-          }
-        }
-        const voteCount=predCard.querySelector('.vote-count');
-        if(voteCount)predData.vote_count=cl(voteCount.textContent);
-        result.prediction=predData;
-      }
-
-      // 5. RECENT MATCHES
-      const recentMatches=[];
-      const matchesList=doc.querySelector('.matches-list');
-      if(matchesList){
-        matchesList.querySelectorAll('.match-detail,.match-item,li').forEach(function(item){
-          const dateEl=item.querySelector('.date,.time,.match-time');
-          const leagueEl=item.querySelector('.league');
-          const homeEl=item.querySelector('.home,.team-home');
-          const awayEl=item.querySelector('.away,.team-away');
-          const scoreEl=item.querySelector('.score,.result');
-          if(homeEl||awayEl){
-            recentMatches.push({date:cl(dateEl?.textContent||''),league:cl(leagueEl?.textContent||''),home:cl(homeEl?.textContent||''),away:cl(awayEl?.textContent||''),score:cl(scoreEl?.textContent||'vs')});
-          }
-        });
-      }
-      if(recentMatches.length>0){result.recent_matches=recentMatches;result.sections.push('recent');}
-
-      // 6. H2H STANDINGS
-      const h2hData=[];
-      const h2hEl=doc.querySelector('.h2h-standings');
-      if(h2hEl){
-        h2hEl.querySelectorAll('tr').forEach(function(row){
-          const cells=row.querySelectorAll('td');
-          if(cells.length>=4){
-            const logo=row.querySelector('img');
-            const nameEl=row.querySelector('.team-name,p.link,.name');
-            h2hData.push({pos:cl(cells[0]?.textContent||''),logo:logo?.getAttribute('src')||'',name:cl(nameEl?.textContent||''),played:cl(cells[1]?.textContent||''),wins:cl(cells[2]?.textContent||''),draws:cl(cells[3]?.textContent||''),losses:cl(cells[4]?.textContent||''),gf:cl(cells[5]?.textContent||''),ga:cl(cells[6]?.textContent||''),points:cl(cells[8]?.textContent||'')});
-          }
-        });
-      }
-      if(h2hData.length>0){result.h2h_standings=h2hData;result.sections.push('h2h_standings');}
-
-      return result;
-    }catch(e){
-      return{event_id:eventId,found:false,sections:[],error:e.message};
-    }
-  }
 
-  // === FETCH HTML ===
-  async function fetchBongdaHTML(eventId,matchUrl){
-    const urls=[];
-    if(matchUrl){const clean=matchUrl.replace(/\/(preview|centre)\/.*/,'');urls.push(clean+'/centre/',clean+'/preview/');}
-    urls.push('https://bongda.com.vn/tran-dau/'+eventId+'/centre/','https://bongda.com.vn/tran-dau/'+eventId+'/preview/');
-    for(const url of urls){
-      try{
-        const r=await fetch(url,{signal:AbortSignal.timeout(12000),headers:{'Accept':'text/html'}});
-        if(r.ok){const html=await r.text();if(html.length>1000&&html.includes('.teams'))return{html,url,method:'direct'};}
-      }catch(e){}
-    }
-    for(const url of urls){
-      for(const proxy of['https://api.allorigins.win/raw?url=','https://corsproxy.io/?']){
-        try{
-          const r=await fetch(proxy+encodeURIComponent(url),{signal:AbortSignal.timeout(15000)});
-          if(r.ok){const html=await r.text();if(html.length>1000&&html.includes('.teams'))return{html,url,method:'proxy'};}
-        }catch(e){}
-      }
-    }
-    return null;
-  }
-
-  // === MAIN LOAD FUNCTION ===
   window.loadMatchTab=async function(tab){
-    if(tab!=='detail'){if(_origLoadMatchTab)_origLoadMatchTab.call(this,tab);return;}
-    document.querySelectorAll('.mo-tab').forEach(function(t){t.classList.remove('active');});
-    document.querySelectorAll('.mo-tab').forEach(function(t){const txt=t.textContent||'';if(txt.includes('Chi tiết')||txt.includes('📋')||txt.includes('Thống kê')||txt.includes('Diễn biến'))t.classList.add('active');});
+    if(tab!=='detail'){if(window._origLoadMatchTab)window._origLoadMatchTab.call(this,tab);return;}
+    document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));
+    document.querySelectorAll('.mo-tab').forEach(t=>{const txt=t.textContent||'';if(txt.includes('Chi tiết')||txt.includes('📋')||txt.includes('Thống kê')||txt.includes('Diễn biến'))t.classList.add('active');});
     const el=document.getElementById('mo-body');
     if(!el)return;
-    el.innerHTML='<div class="mdv5-no-data"><div style="display:inline-block;width:20px;height:20px;border:2px solid #333;border-top-color:#5cb87a;border-radius:50%;animation:mdv5spin .8s linear infinite;vertical-align:middle;margin-right:8px"></div>Đang tải chi tiết trận đấu...</div>';
+    el.innerHTML='<div class="mdv5-no-data"><div style="display:inline-block;width:20px;height:20px;border:2px solid #333;border-top-color:#5cb87a;border-radius:50%;animation:mdv5spin .8s linear infinite"></div><div style="margin-top:8px">Đang tải...</div></div>';
     const eventId=window._currentEventId;
-    const matchUrl=window._currentMatchUrl;
-    if(!eventId){el.innerHTML='<div class="mdv5-err">⚠️ Không tìm thấy mã trận đấu.</div>';return;}
-
-    let data=null;
+    if(!eventId){el.innerHTML='<div class="mdv5-warn">⚠️ Không tìm thấy mã trận đấu.</div>';return;}
 
-    // Strategy 1: Server /live endpoint
     try{
-      let apiUrl='/api/match/'+eventId+'/live';
-      if(matchUrl)apiUrl+='?page_url='+encodeURIComponent(matchUrl);
-      const r=await fetch(apiUrl,{signal:AbortSignal.timeout(15000)});
-      if(r.ok){data=await r.json();if(!data.found||!data.info||!data.info.home_team)data=null;}
-    }catch(e){}
-
-    // Strategy 2: Server /detail endpoint
-    if(!data){
-      try{
-        let apiUrl='/api/match/'+eventId+'/detail';
-        if(matchUrl)apiUrl+='?url='+encodeURIComponent(matchUrl);
-        const r=await fetch(apiUrl,{signal:AbortSignal.timeout(15000)});
-        if(r.ok){data=await r.json();if(!data.found||!data.info||!data.info.home_team)data=null;}
-      }catch(e){}
-    }
-
-    // Strategy 3: Client-side scraping
-    if(!data||!data.found){
-      const fetched=await fetchBongdaHTML(eventId,matchUrl);
-      if(fetched){
-        data=parseBongdaHtml(fetched.html,eventId);
-        if(data.found){el.innerHTML='<div class="mdv5-source">📡 Dữ liệu tải trực tiếp từ bongda.com.vn'+(fetched.method!=='direct'?' (qua proxy)':'')+'</div>';}
+      const r = await fetch('/api/proxy/bongda?event_id=' + eventId, {signal: AbortSignal.timeout(20000)});
+      const data = await r.json();
+      if(data.found && data.info && data.info.home_team){
+        el.innerHTML = '<div class="mdv5-source">📡 Dữ liệu tải nhanh</div>';
+        renderMatchDetail(el, data);
+      }else{
+        el.innerHTML = '<div class="mdv5-warn">⚠️ Không thể tải dữ liệu.<br>Event ID: ' + esc(String(eventId)) + '<br><a href="https://bongda.com.vn/tran-dau/' + eventId + '/centre/" target="_blank" class="mdv5-open-ext">Xem trên bongda.com.vn</a></div>';
       }
-    }
-
-    if(data&&data.found&&data.info&&data.info.home_team){
-      renderMatchDetail(el,data);
-    }else{
-      const bongdaLink=matchUrl||'https://bongda.com.vn/tran-dau/'+eventId+'/centre/';
-      el.innerHTML='<div class="mdv5-warn">⚠️ Không thể tải dữ liệu chi tiết.<br><small>Event ID: '+esc(String(eventId))+'</small><br><a class="mdv5-open-ext" href="'+esc(bongdaLink)+'" target="_blank" rel="noopener">🔗 Xem trên bongda.com.vn</a></div>';
+    }catch(e){
+      el.innerHTML = '<div class="mdv5-warn">⚠️ Lỗi tải dữ liệu: ' + esc(e.message) + '</div>';
     }
   };
 
-  // === RENDER ===
-  function renderMatchDetail(el,data){
+  function renderMatchDetail(el, data){
     const info=data.info||{};
     let h='';
 
-    // HEADER: Teams + Score
-    h+='<div class="mdv5-header">';
-    if(info.league)h+='<div class="mdv5-league">'+esc(info.league)+'</div>';
-    h+='<div class="mdv5-teams">';
+    // Header
+    h+='<div class="mdv5-header"><div class="mdv5-teams">';
     h+='<div class="mdv5-team">';
-    if(info.home_logo)h+='<img src="'+esc(info.home_logo)+'" alt="'+esc(info.home_team)+'" onerror="this.style.display=\'none\'">';
-    h+='<span>'+esc(info.home_team)+'</span></div>';
+    if(info.home_logo)h+='<img src="' + esc(info.home_logo) + '" alt="' + esc(info.home_team) + '">';
+    h+='<span>' + esc(info.home_team) + '</span></div>';
     h+='<div class="mdv5-vs">';
-    if(info.score)h+='<span class="mdv5-score">'+esc(info.score)+'</span>';
-    else h+='<span style="font-size:14px;color:#888">VS</span>';
+    if(info.score)h+='<span class="mdv5-score">' + esc(info.score) + '</span>';
     if(info.status_label){
       const sl=info.status_label;let cls='finished';
       if(sl==='LIVE'||sl==='H1'||sl==='H2')cls='live';
       if(sl==='HT'||sl==='Nghỉ')cls='halftime';
-      h+='<span class="mdv5-status '+cls+'">'+esc(sl)+'</span>';
+      h+='<span class="mdv5-status ' + cls + '">' + esc(sl) + '</span>';
     }
-    h+='</div>';
-    h+='<div class="mdv5-team">';
-    if(info.away_logo)h+='<img src="'+esc(info.away_logo)+'" alt="'+esc(info.away_team)+'" onerror="this.style.display=\'none\'">';
-    h+='<span>'+esc(info.away_team)+'</span></div>';
-    h+='</div>';
-    const infoItems=[];
-    if(info.datetime)infoItems.push('📅 <b>'+esc(info.datetime)+'</b>');
-    if(info.stadium)infoItems.push('🏟 <b>'+esc(info.stadium)+'</b>');
-    if(info.referee)infoItems.push('👨‍⚖️ <b>'+esc(info.referee)+'</b>');
-    if(infoItems.length>0){h+='<div class="mdv5-info">';infoItems.forEach(i=>{h+='<span class="mdv5-info-item">'+i+'</span>';});h+='</div>';}
-    h+='</div>';
+    h+='</div><div class="mdv5-team">';
+    if(info.away_logo)h+='<img src="' + esc(info.away_logo) + '" alt="' + esc(info.away_team) + '">';
+    h+='<span>' + esc(info.away_team) + '</span></div></div></div>';
 
-    // DETERMINE TAB VISIBILITY
+    // Tabs
     const hasEvents=data.events&&data.events.length>0;
     const hasStats=(data.h2h_stats_parsed&&Object.keys(data.h2h_stats_parsed).length>0)||data.prediction||data.recent_matches;
-    const showBoth=hasEvents&&hasStats;
-
-    // TABS
-    if(showBoth){
+    
+    if(hasStats||hasEvents){
       h+='<div class="mdv5-tabs">';
-      h+='<button class="mdv5-tab-btn active" onclick="window._mdv5ShowTab(\'stats\',this)">📊 Thống kê</button>';
-      h+='<button class="mdv5-tab-btn" onclick="window._mdv5ShowTab(\'events\',this)">📢 Diễn biến</button>';
+      if(hasStats)h+='<button class="mdv5-tab-btn active" onclick="window._mdv5ShowTab(\'stats\',this)">📊 Thống kê</button>';
+      if(hasEvents)h+='<button class="mdv5-tab-btn" onclick="window._mdv5ShowTab(\'events\',this)">📢 Diễn biến</button>';
       h+='</div>';
     }
 
-    // === TAB: THỐNG KÊ ===
+    // Stats tab
     if(hasStats){
-      h+='<div id="mdv5-tab-stats" class="mdv5-tab-content'+(showBoth?'':' active')+'">';
-
-      // H2H Stats from API
-      if(data.h2h_stats_parsed&&Object.keys(data.h2h_stats_parsed).length>0){
-        const parsed=data.h2h_stats_parsed;
-        const nz=Object.values(parsed).some(s=>s.home!=="0"||s.away!=="0");
-        if(nz){
-          h+='<div class="mdv5-sec"><div class="mdv5-sec-title">📊 Tỷ lệ đối đầu</div>';
-          for(const label in parsed){
-            const sv=parsed[label];
-            h+='<div class="mdv5-stat-row"><span class="mdv5-stat-home">'+esc(sv.home)+'</span><span class="mdv5-stat-label">'+esc(label)+'</span><span class="mdv5-stat-away">'+esc(sv.away)+'</span></div>';
-          }
-          h+='</div>';
+      h+='<div id="mdv5-tab-stats" class="mdv5-tab-content" style="display:' + (hasEvents?'none':'block') + '">';
+      
+      if(data.h2h_stats_parsed){
+        h+='<div class="mdv5-sec"><div class="mdv5-sec-title">📊 Tỷ lệ đối đầu</div>';
+        for(const label in data.h2h_stats_parsed){
+          const sv=data.h2h_stats_parsed[label];
+          h+='<div class="mdv5-stat-row"><span class="mdv5-stat-home">' + esc(sv.home) + '</span><span class="mdv5-stat-label">' + esc(label) + '</span><span class="mdv5-stat-away">' + esc(sv.away) + '</span></div>';
         }
-      }
-
-      // H2H Standings
-      if(data.h2h_standings&&data.h2h_standings.length>0){
-        h+='<div class="mdv5-sec"><div class="mdv5-sec-title">🏆 Bảng xếp hạng đối đầu</div>';
-        data.h2h_standings.forEach(function(row){
-          h+='<div class="mdv5-h2h-row">';
-          h+='<span class="mdv5-h2h-pos">'+esc(row.pos)+'</span>';
-          if(row.logo)h+='<img class="mdv5-h2h-logo" src="'+esc(row.logo)+'" alt="">';
-          h+='<span class="mdv5-h2h-name">'+esc(row.name)+'</span>';
-          h+='<div class="mdv5-h2h-stats">';
-          if(row.played)h+='<span class="mdv5-h2h-stat">'+esc(row.played)+'</span>';
-          if(row.wins)h+='<span class="mdv5-h2h-stat">'+esc(row.wins)+'</span>';
-          if(row.draws)h+='<span class="mdv5-h2h-stat">'+esc(row.draws)+'</span>';
-          if(row.losses)h+='<span class="mdv5-h2h-stat">'+esc(row.losses)+'</span>';
-          if(row.points)h+='<span class="mdv5-h2h-stat"><b>'+esc(row.points)+'</b></span>';
-          h+='</div></div>';
-        });
         h+='</div>';
       }
 
-      // Prediction
       if(data.prediction){
-        const p=data.prediction;
-        h+='<div class="mdv5-pred">';
-        h+='<div class="mdv5-pred-title">🎯 Dự đoán</div>';
-        h+='<div class="mdv5-pred-teams">';
-        h+='<div class="mdv5-pred-team"><span>'+esc(p.home_name||'')+'</span></div>';
-        h+='<div class="mdv5-pred-vs">'+esc(p.result||'VS')+'</div>';
-        h+='<div class="mdv5-pred-team"><span>'+esc(p.away_name||'')+'</span></div>';
-        h+='</div>';
-        if(p.vote_count)h+='<div style="text-align:center;font-size:9px;color:#888;margin-top:6px">Tổng bình chọn: '+esc(p.vote_count)+' lượt</div>';
-        h+='</div>';
+        h+='<div class="mdv5-pred"><div class="mdv5-pred-title">🎯 Dự đoán</div><div class="mdv5-pred-teams">';
+        h+='<span>' + esc(data.prediction.home_name || '') + '</span><span class="mdv5-pred-vs">' + esc(data.prediction.result || 'VS') + '</span><span>' + esc(data.prediction.away_name || '') + '</span></div></div>';
       }
 
-      // Recent matches
-      if(data.recent_matches&&data.recent_matches.length>0){
+      if(data.recent_matches){
         h+='<div class="mdv5-sec"><div class="mdv5-sec-title">📋 Kết quả gần nhất</div>';
-        data.recent_matches.slice(0,8).forEach(function(m){
-          h+='<div class="mdv5-recent-row">';
-          h+='<span class="mdv5-recent-date">'+esc(m.date||'')+'</span>';
-          if(m.league)h+='<span class="mdv5-recent-league">'+esc(m.league)+'</span>';
-          h+='<div class="mdv5-recent-teams">';
-          h+='<span class="mdv5-recent-home">'+esc(m.home||'')+'</span>';
-          h+='<span class="mdv5-recent-score">'+esc(m.score||'')+'</span>';
-          h+='<span class="mdv5-recent-away">'+esc(m.away||'')+'</span>';
-          h+='</div></div>';
+        data.recent_matches.slice(0,6).forEach(m=>{
+          h+='<div class="mdv5-recent-row"><span class="mdv5-recent-date">' + esc(m.date) + '</span><span>' + esc(m.home) + '</span><span class="mdv5-recent-score">' + esc(m.score) + '</span><span>' + esc(m.away) + '</span></div>';
         });
         h+='</div>';
       }
-
       h+='</div>';
     }
 
-    // === TAB: DIỄN BIẾN ===
+    // Events tab
     if(hasEvents){
-      h+='<div id="mdv5-tab-events" class="mdv5-tab-content'+(showBoth&&!hasStats?' active':'')+'">';
-      h+='<div class="mdv5-sec"><div class="mdv5-sec-title">📢 Diễn biến chi tiết</div>';
-      h+='<div class="mdv5-timeline">';
+      h+='<div id="mdv5-tab-events" class="mdv5-tab-content" style="display:' + (hasStats?'none':'block') + '">';
+      h+='<div class="mdv5-sec"><div class="mdv5-sec-title">📢 Diễn biến trận đấu</div><div class="mdv5-timeline">';
       let lastPeriod='';
-      data.events.forEach(function(ev){
+      data.events.forEach(ev=>{
         if(ev.period&&ev.period!==lastPeriod){
-          h+='<div class="mdv5-period">'+esc(ev.period)+'</div>';
+          h+='<div class="mdv5-period">' + esc(ev.period) + '</div>';
           lastPeriod=ev.period;
         }
         const isHome=ev.team==='home';
-        const teamBadge=isHome?'<span class="mdv5-ev-team home">HOME</span>':'<span class="mdv5-ev-team away">AWAY</span>';
-        let iconHtml='';
-        let titleHtml='';
-        let detailHtml='';
-
-        if(ev.type==='goal'){
-          iconHtml='<span class="mdv5-ev-icon">⚽</span>';
-          titleHtml='<span class="mdv5-ev-title">BÀN THẮNG</span>';
-          if(ev.scorer)detailHtml='<span class="mdv5-ev-player">'+esc(ev.scorer)+'</span>';
-          if(ev.assist)detailHtml+=' <span class="mdv5-ev-assist">('+esc(ev.assist)+')</span>';
-        }else if(ev.type==='redcard'){
-          iconHtml='<span class="mdv5-ev-icon"><svg viewBox="0 0 14 20" width="16" height="16"><rect fill="#E20007" height="20" rx="2" width="14"></rect></svg></span>';
-          titleHtml='<span class="mdv5-ev-title">THỺ ĐỎ</span>';
-          if(ev.player)detailHtml='<span class="mdv5-ev-player">'+esc(ev.player)+'</span>';
-        }else if(ev.type==='yellowcard'){
-          iconHtml='<span class="mdv5-ev-icon"><svg viewBox="0 0 14 20" width="16" height="16"><rect fill="#F0C040" height="20" rx="2" width="14"></rect></svg></span>';
-          titleHtml='<span class="mdv5-ev-title">THỺ VÀNG</span>';
-          if(ev.player)detailHtml='<span class="mdv5-ev-player">'+esc(ev.player)+'</span>';
-        }else if(ev.type==='substitution'){
-          iconHtml='<span class="mdv5-ev-icon">↔️</span>';
-          titleHtml='<span class="mdv5-ev-title">THAY ĐỔI</span>';
-          if(ev.player_out&&ev.player_in){
-            detailHtml='<span class="mdv5-ev-out">'+esc(ev.player_out)+'</span>';
-            detailHtml+='<span class="mdv5-ev-arrow">↓↑</span>';
-            detailHtml+='<span class="mdv5-ev-in">'+esc(ev.player_in)+'</span>';
-          }else if(ev.players){
-            detailHtml='<span class="mdv5-ev-player">'+esc(ev.players)+'</span>';
-          }
-        }else{
-          iconHtml='<span class="mdv5-ev-icon">•</span>';
-          if(ev.players)titleHtml='<span class="mdv5-ev-title">'+esc(ev.players)+'</span>';
-        }
-
-        h+='<div class="mdv5-ev">';
-        h+='<span class="mdv5-ev-time">'+esc(ev.time||'')+'</span>';
-        h+=iconHtml;
-        h+='<div class="mdv5-ev-body">';
-        h+=teamBadge+' '+titleHtml;
-        if(detailHtml)h+='<div class="mdv5-ev-detail">'+detailHtml+'</div>';
+        const badge=isHome?'<span class="mdv5-ev-team home">HOME</span>':'<span class="mdv5-ev-team away">AWAY</span>';
+        let icon='', title='', detail='';
+        
+        if(ev.type==='goal'){icon='⚽';title='BÀN THẮNG';detail=esc(ev.scorer||ev.players);}
+        else if(ev.type==='redcard'){icon='🟥';title='THỺ ĐỎ';detail=esc(ev.player||ev.players);}
+        else if(ev.type==='yellowcard'){icon='🟨';title='THỺ VÀNG';detail=esc(ev.player||ev.players);}
+        else if(ev.type==='substitution'){icon='↔️';title='THAY ĐỔI';detail=esc(ev.players);}
+        else{icon='•';detail=esc(ev.players);}
+        
+        h+='<div class="mdv5-ev"><span class="mdv5-ev-time">' + esc(ev.time||'') + '</span><span class="mdv5-ev-icon">' + icon + '</span><div class="mdv5-ev-body">' + badge + ' <span class="mdv5-ev-title">' + title + '</span>';
+        if(detail)h+='<div class="mdv5-ev-detail">' + detail + '</div>';
         h+='</div></div>';
       });
       h+='</div></div>';
-      h+='</div>';
-    }
-
-    // Raw HTML fallbacks
-    if(data.stats_html&&data.stats_html.length>10){
-      h+='<div class="mdv5-sec"><div class="mdv5-sec-title">🌟 Thông số bổ sung</div><div class="md-raw-html">'+sanitizeHtml(data.stats_html)+'</div></div>';
     }
 
     el.innerHTML=h;
 
-    // Tab switching
-    window._mdv5ShowTab=function(tab,btn){
+    window._mdv5ShowTab=(tab,btn)=>{
       document.querySelectorAll('.mdv5-tab-btn').forEach(b=>{b.classList.remove('active');b.style.background='#1a1a1a';b.style.color='#888';});
       if(btn){btn.classList.add('active');btn.style.background='#2d8659';btn.style.color='#fff';}
-      const statsEl=document.getElementById('mdv5-tab-stats');
-      const eventsEl=document.getElementById('mdv5-tab-events');
-      if(statsEl)statsEl.style.display=tab==='stats'?'block':'none';
-      if(eventsEl)eventsEl.style.display=tab==='events'?'block':'none';
+      const stats=document.getElementById('mdv5-tab-stats');
+      const events=document.getElementById('mdv5-tab-events');
+      if(stats)stats.style.display=tab==='stats'?'block':'none';
+      if(events)events.style.display=tab==='events'?'block':'none';
     };
-
-    el.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
   }
 
   function injectDetailTab(){
@@ -558,11 +186,11 @@
     const d=document.createElement('span');
     d.className='mo-tab mo-tab-detail';
     d.textContent='📋 Chi tiết';
-    d.onclick=function(){window.loadMatchTab('detail');};
+    d.onclick=()=>window.loadMatchTab('detail');
     tabs.insertBefore(d,tabs.firstChild);
   }
 
-  document.addEventListener('click',function(e){
+  document.addEventListener('click',e=>{
     const md=e.target.closest('.match-detail');
     if(!md)return;
     const link=md.querySelector('.status a, .teams a[href*="tran-dau"], a[href*="tran-dau"]');
@@ -576,6 +204,6 @@
     }
   },true);
 
-  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',function(){setTimeout(injectDetailTab,1000);});
+  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',()=>setTimeout(injectDetailTab,1000));
   else setTimeout(injectDetailTab,1000);
-})();
+})();