Fix: add OG meta tags for share preview, enlarge quotation images (72px table, 80px PDF), increase Excel image column width

index.html

@@ -4,7 +4,17 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi</title>
-<meta name="description" content="V.AI STUDIO — 2134 sản phẩm thiết bị nhà bếp & khóa thông minh Malloca, Eurogold, Grob, Canzy & Demax chính hãng. Niềm tin khách hàng là tài sản của chúng tôi.">
+<meta name="description" content="V.AI STUDIO — 8000+ sản phẩm thiết bị nhà bếp & điện máy. Malloca, Eurogold, Grob, Canzy, Demax & Điện Máy Xanh chính hãng.">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="V.AI STUDIO">
+<meta property="og:title" id="ogTitle" content="V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi">
+<meta property="og:description" id="ogDesc" content="8000+ sản phẩm thiết bị nhà bếp & điện máy chính hãng. Malloca, Eurogold, Grob, Canzy, Demax & Điện Máy Xanh.">
+<meta property="og:image" id="ogImage" content="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_600.png">
+<meta property="og:url" id="ogUrl" content="https://bep40-v-aistudio.static.hf.space/">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" id="twTitle" content="V.AI STUDIO">
+<meta name="twitter:description" id="twDesc" content="8000+ sản phẩm thiết bị nhà bếp & điện máy chính hãng">
+<meta name="twitter:image" id="twImage" content="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_600.png">
 <link rel="icon" href="https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/favicon.png">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@ -407,7 +417,7 @@ textarea.form-input{height:120px;resize:vertical}
 .quote-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:8px}
 .quote-table th{background:var(--p);color:#fff;padding:8px 6px;font-weight:600;text-align:center;white-space:nowrap}
 .quote-table td{padding:8px 6px;border-bottom:1px solid var(--gl);vertical-align:middle}
-.quote-table .qt-img{width:40px;height:40px;object-fit:contain;border-radius:4px;background:var(--l)}
+.quote-table .qt-img{width:72px;height:72px;object-fit:contain;border-radius:6px;background:var(--l);border:1px solid var(--gl)}
 .quote-table .qt-name{font-weight:600;color:var(--d)}
 .quote-table .qt-price{text-align:right;white-space:nowrap}
 .quote-table .qt-disc{width:80px;padding:5px 6px;border:1.5px solid var(--gl);border-radius:6px;font-size:.78rem;text-align:right;font-family:inherit;outline:none}
@@ -816,7 +826,19 @@ let slugUrl='/san-pham/'+p.slug+'/index.html';
 history.pushState({type:'product',idx:idx},'',slugUrl);
 }
 _skipHistory=false;
-document.title=p.name+' | '+p.brand+' - Malloca';
+document.title=p.name+' | '+p.brand+' - V.AI STUDIO';
+// Update OG meta for sharing
+var ogImg=p.image||p.images[0]||'';
+if(ogImg.startsWith('//'))ogImg='https:'+ogImg;
+var pUrl=location.origin+'/san-pham/'+p.slug+'/index.html';
+var el;
+if(el=document.getElementById('ogTitle'))el.content=p.name+' | '+p.brand;
+if(el=document.getElementById('ogDesc'))el.content=(p.summary||p.desc||p.name).substring(0,200);
+if(el=document.getElementById('ogImage'))el.content=ogImg;
+if(el=document.getElementById('ogUrl'))el.content=pUrl;
+if(el=document.getElementById('twTitle'))el.content=p.name+' | '+p.brand;
+if(el=document.getElementById('twDesc'))el.content=(p.summary||p.desc||p.name).substring(0,200);
+if(el=document.getElementById('twImage'))el.content=ogImg;
 document.getElementById('listView').style.display='none';
 document.querySelector('.hero').style.display='none';
 let dv=document.getElementById('detailView');
@@ -905,6 +927,16 @@ document.getElementById('detailView').innerHTML='';
 document.getElementById('listView').style.display='';
 document.querySelector('.hero').style.display='';
 document.title='V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi';
+// Reset OG meta
+var defImg='https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/logo/logo_600.png';
+var el;
+if(el=document.getElementById('ogTitle'))el.content='V.AI STUDIO | Niềm tin khách hàng là tài sản của chúng tôi';
+if(el=document.getElementById('ogDesc'))el.content='8000+ sản phẩm thiết bị nhà bếp & điện máy chính hãng';
+if(el=document.getElementById('ogImage'))el.content=defImg;
+if(el=document.getElementById('ogUrl'))el.content=location.origin+'/';
+if(el=document.getElementById('twTitle'))el.content='V.AI STUDIO';
+if(el=document.getElementById('twDesc'))el.content='8000+ sản phẩm thiết bị nhà bếp & điện máy chính hãng';
+if(el=document.getElementById('twImage'))el.content=defImg;
 history.pushState({type:'list'},'','/');
 }
 
@@ -1339,8 +1371,8 @@ let _shareData={title:'',text:'',url:''};
 async function shareProduct(slug,name){
 let url=location.origin+'/san-pham/'+slug+'/index.html';
 let title=name||document.title;
-let text=title+' - Malloca Thiết bị nhà bếp';
-// Try native share first
+let text=title+' - V.AI STUDIO';
+// Try native share first (includes image via OG tags already set by showDetail)
 if(navigator.share){
 try{await navigator.share({title,text,url});return}catch(e){if(e.name==='AbortError')return}
 }
@@ -1929,7 +1961,7 @@ let discStyle='width:80px;padding:5px 6px;border:1.5px solid var(--gl);border-ra
 discStyle+=locked?'background:var(--l);cursor:not-allowed':'background:#fff';
 return `<tr>
 <td style="text-align:center">${i+1}</td>
-<td><img class="qt-img" src="${c.image}" alt="" crossorigin="anonymous" onerror="this.style.display='none'"></td>
+<td><img class="qt-img" src="${c.image}" alt="${c.name}" crossorigin="anonymous" onerror="this.style.display='none'" style="width:72px;height:72px;object-fit:contain"></td>
 <td class="qt-name">${c.name}</td>
 <td style="text-align:center">${model}</td>
 <td style="font-size:.72rem;color:var(--g);max-width:160px">${specs}</td>
@@ -1991,7 +2023,7 @@ wb.creator='Malloca Vietnam';
 let ws=wb.addWorksheet('Báo Giá');
 ws.columns=[
 {key:'stt',width:6},{key:'name',width:32},{key:'model',width:16},{key:'specs',width:28},
-{key:'image',width:14},{key:'qty',width:8},{key:'price',width:16},{key:'disc',width:16},
+{key:'image',width:18},{key:'qty',width:8},{key:'price',width:16},{key:'disc',width:16},
 {key:'total',width:18},{key:'note',width:18}
 ];
 // Header
@@ -2046,7 +2078,7 @@ if(allSameRatio&&ratio<1&&ratio>0)discountPct=Math.round(ratio*100);
 
 qd.items.forEach((item,idx)=>{
 let row=ws.getRow(r);
-row.height=36;
+row.height=64;
 // A: STT
 let cA=row.getCell(1);cA.value=item.stt;
 cA.alignment={horizontal:'center',vertical:'middle'};
@@ -2203,7 +2235,7 @@ div.id='pdfRender';
 div.style.cssText='position:fixed;top:-9999px;left:0;width:1100px;background:#fff;padding:40px;font-family:Inter,Arial,sans-serif';
 let itemsHtml=qd.items.map(it=>`<tr style="border-bottom:1px solid #e2e8f0">
 <td style="padding:10px 6px;text-align:center;font-size:13px">${it.stt}</td>
-<td style="padding:10px 6px"><img src="${it.image}" style="width:45px;height:45px;object-fit:contain;border-radius:4px" crossorigin="anonymous" onerror="this.style.display='none'"></td>
+<td style="padding:10px 6px"><img src="${it.image}" style="width:80px;height:80px;object-fit:contain;border-radius:6px;border:1px solid #e2e8f0;background:#f8fafc" crossorigin="anonymous" onerror="this.style.display='none'"></td>
 <td style="padding:10px 6px;font-size:12px;font-weight:600">${it.name}</td>
 <td style="padding:10px 6px;text-align:center;font-size:12px">${it.model}</td>
 <td style="padding:10px 6px;font-size:11px;color:#64748b;max-width:180px">${it.specs}</td>