Cập nhật giao diện: thêm filter thương hiệu, badge brand, hero stats cho Malloca + Eurogold

index.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>MALLOCA | Smart Kitchen - Smart Life</title>
-<meta name="description" content="363 sản phẩm thiết bị nhà bếp Malloca chính hãng — đầy đủ thông số, hình ảnh, mô tả chi tiết.">
+<meta name="description" content="1173 sản phẩm thiết bị nhà bếp Malloca & Eurogold chính hãng — đầy đủ thông số, hình ảnh, mô tả chi tiết.">
 <link rel="icon" href="https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/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">
@@ -326,7 +326,7 @@ textarea.form-input{height:120px;resize:vertical}
 
 <header class="header"><div class="container">
 <div class="logo" onclick="goHome()"><div class="logo-box">M</div><div><div class="logo-name">MALL<span>OCA</span></div><div class="logo-sub">Smart Kitchen &bull; Smart Life</div></div></div>
-<div class="search-box"><i class="fas fa-search"></i><input type="text" id="q" placeholder="Tìm sản phẩm... (bếp từ, máy hút mùi, chậu rửa...)" oninput="doSearch()"><span class="search-count" id="sc"></span></div>
+<div class="search-box"><i class="fas fa-search"></i><input type="text" id="q" placeholder="Tìm sản phẩm Malloca & Eurogold... (bếp từ, giá bát, khoá cửa...)" oninput="doSearch()"><span class="search-count" id="sc"></span></div>
 <div class="nav-tabs">
 <div class="nav-tab active" data-page="products" onclick="showPage('products')"><i class="fas fa-th-large"></i> Sản Phẩm</div>
 <div class="nav-tab" data-page="catalogue" onclick="showPage('catalogue')"><i class="fas fa-book-open"></i> Catalogue</div>
@@ -339,11 +339,12 @@ textarea.form-input{height:120px;resize:vertical}
 </div></header>
 
 <section class="hero"><div class="container">
-<h1>Thiết Bị Nhà Bếp <span>Malloca</span></h1>
-<p>Dữ liệu trực tiếp từ malloca.com — Đầy đủ hình ảnh, thông số kỹ thuật, mô tả chi tiết cho từng sản phẩm</p>
-<div class="hero-stats">
-<div class="hero-stat"><strong>363</strong><span>Sản phẩm</span></div>
-<div class="hero-stat"><strong>9</strong><span>Danh mục</span></div>
+<h1>Thiết Bị Nhà Bếp <span>Malloca</span> & <span>Eurogold</span></h1>
+<p>Dữ liệu trực tiếp từ malloca.com & eurogold.vn — Đầy đủ hình ảnh, thông số kỹ thuật, mô tả chi tiết</p>
+<div class="hero-stats" id="heroStats">
+<div class="hero-stat"><strong id="statTotal">1173</strong><span>Sản phẩm</span></div>
+<div class="hero-stat"><strong id="statCats">16</strong><span>Danh mục</span></div>
+<div class="hero-stat"><strong>2</strong><span>Thương hiệu</span></div>
 <div class="hero-stat"><strong>100%</strong><span>Dữ liệu thật</span></div>
 </div>
 </div></section>
@@ -353,6 +354,7 @@ textarea.form-input{height:120px;resize:vertical}
 <div id="page-products" class="page-section active"><div id="listView">
 <div class="main">
 <aside class="sidebar" id="sidebar">
+<div class="sb-card"><h3><i class="fas fa-building"></i> Thương Hiệu</h3><div class="pr" id="br"></div></div>
 <div class="sb-card"><h3><i class="fas fa-layer-group"></i> Danh Mục</h3><ul class="cat-list" id="cl"></ul></div>
 <div class="sb-card"><h3><i class="fas fa-tag"></i> Khoảng Giá</h3><div class="pr" id="pr"></div></div>
 </aside>
@@ -438,6 +440,7 @@ textarea.form-input{height:120px;resize:vertical}
 <div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();showPage('contact')"><i class="fas fa-envelope" style="margin-right:8px;color:var(--a)"></i> Liên Hệ</div>
 <div style="padding:12px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem" onclick="closeMsb();openCart()"><i class="fas fa-shopping-cart" style="margin-right:8px;color:var(--a)"></i> Giỏ Hàng</div>
 </div>
+<div class="sb-card"><h3><i class="fas fa-building"></i> Thương Hiệu</h3><div class="pr" id="brm"></div></div>
 <div class="sb-card"><h3><i class="fas fa-layer-group"></i> Danh Mục</h3><ul class="cat-list" id="clm"></ul></div>
 <div class="sb-card"><h3><i class="fas fa-tag"></i> Khoảng Giá</h3><div class="pr" id="prm"></div></div>
 </div>
@@ -464,24 +467,24 @@ textarea.form-input{height:120px;resize:vertical}
 
 <footer class="footer"><div class="container">
 <div class="footer-grid">
-<div class="footer-brand"><div class="logo-name" style="color:#fff;font-size:1.1rem">MALL<span style="color:var(--a)">OCA</span></div><p>363 sản phẩm với dữ liệu chi tiết đầy đủ — hình ảnh, thông số kỹ thuật, mô tả, tính năng — tích hợp trực tiếp từ malloca.com.</p>
+<div class="footer-brand"><div class="logo-name" style="color:#fff;font-size:1.1rem">MALL<span style="color:var(--a)">OCA</span> & EURO<span style="color:var(--a)">GOLD</span></div><p>1173 s���n phẩm với dữ liệu chi tiết đầy đủ — hình ảnh, thông số kỹ thuật, mô tả, tính năng — tích hợp trực tiếp từ malloca.com & eurogold.vn.</p>
 <div class="social-links"><a href="https://www.facebook.com/CongTyMalloca" target="_blank"><i class="fab fa-facebook-f"></i></a><a href="https://www.youtube.com/@mallocakitchenware" target="_blank"><i class="fab fa-youtube"></i></a><a href="https://www.tiktok.com/@mallocavietnam" target="_blank"><i class="fab fa-tiktok"></i></a></div></div>
 <div><h4>Thiết Bị Nhà Bếp</h4><ul class="footer-links"><li><a href="https://malloca.com/may-hut-khoi-khu-mui" target="_blank">Máy hút khói khử mùi</a></li><li><a href="https://malloca.com/bep-dien-tu-bep-gas" target="_blank">Bếp điện từ, bếp gas</a></li><li><a href="https://malloca.com/lo-nuong" target="_blank">Lò nướng, lò hấp</a></li><li><a href="https://malloca.com/chau-rua-chen" target="_blank">Chậu rửa chén</a></li><li><a href="https://malloca.com/voi-rua-chen" target="_blank">Vòi rửa chén</a></li></ul></div>
 <div><h4>Thêm</h4><ul class="footer-links"><li><a href="https://malloca.com/tu-lanh-tu-ruou" target="_blank">Tủ lạnh, tủ rượu</a></li><li><a href="https://malloca.com/may-rua-chen-may-say-chen" target="_blank">Máy rửa chén</a></li><li><a href="https://malloca.com/thiet-bi-gia-dung-nho" target="_blank">Gia dụng nhỏ</a></li><li><a href="https://malloca.com/khuyen-mai" target="_blank">Khuyến mãi</a></li><li><a href="https://malloca.com/catalogue" target="_blank">Catalogue</a></li></ul></div>
 <div><h4>Hỗ Trợ</h4><ul class="footer-links"><li><a href="https://malloca.com/ve-chung-toi" target="_blank">Về Malloca</a></li><li><a href="https://malloca.com/he-thong-showroom" target="_blank">Showroom</a></li><li><a href="https://malloca.com/tra-cuu-ttbh" target="_blank">Tra cứu bảo hành</a></li><li><a href="https://malloca.com/kich-hoat-bao-hanh" target="_blank">Kích hoạt bảo hành</a></li><li><a href="https://malloca.com/yeu-cau-bao-hanh" target="_blank">Yêu cầu bảo hành</a></li></ul></div>
 </div>
-<div class="footer-bottom"><p>&copy; 2025 Malloca Việt Nam &bull; Dữ liệu tích hợp từ malloca.com</p></div>
+<div class="footer-bottom"><p>&copy; 2025 Malloca & Eurogold Việt Nam &bull; Dữ liệu tích hợp từ malloca.com & eurogold.vn</p></div>
 </div></footer>
 
 <script>
-let D=[],S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:'g'};
+let D=[],S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:'g',brand:'all'};
 const PP=24;
 const PRICES=[
 {l:'Tất cả',min:0,max:1e15},{l:'Dưới 5 triệu',min:0,max:5e6},{l:'5-15 triệu',min:5e6,max:15e6},
 {l:'15-30 triệu',min:15e6,max:3e7},{l:'30-50 triệu',min:3e7,max:5e7},{l:'Trên 50 triệu',min:5e7,max:1e15}
 ];
 
-fetch('products.json').then(r=>r.json()).then(d=>{D=d.map(p=>{let o={name:p.n,link:p.l,image:p.i,price:p.p,priceNum:p.pn,cat:p.c,catSlug:p.cs,catIcon:p.ci,images:p.imgs||[],summary:p.sum||'',desc:p.desc||'',specs:p.specs||{},feats:p.feats||[],sku:p.sku||'',video:p.vid||'',model:p.mod||''};o._idx=buildSearchIndex(o);return o});init()});
+fetch('products.json').then(r=>r.json()).then(d=>{D=d.map(p=>{let o={name:p.n,link:p.l,image:p.i,price:p.p,priceNum:p.pn,cat:p.c,catSlug:p.cs,catIcon:p.ci,images:p.imgs||[],summary:p.sum||'',desc:p.desc||'',specs:p.specs||{},feats:p.feats||[],sku:p.sku||'',video:p.vid||'',model:p.mod||'',brand:p.n.includes('| Eurogold |')||p.n.startsWith('Eurogold |')?'Eurogold':'Malloca'};o._idx=buildSearchIndex(o);return o});init()});
 
 function buildSearchIndex(p){
 let parts=[p.name,p.cat,p.sku,p.model,'malloca',p.summary,p.desc,p.price];
@@ -490,7 +493,7 @@ if(p.specs){Object.entries(p.specs).forEach(([k,v])=>{parts.push(k);parts.push(v
 return parts.join(' ').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');
 }
 
-function init(){buildCats();buildPrices();render()}
+function init(){buildCats();buildPrices();buildBrands();render()}
 
 function buildCats(){
 let cats={};D.forEach(p=>{if(!cats[p.catSlug])cats[p.catSlug]={n:p.cat,i:p.catIcon,c:0};cats[p.catSlug].c++});
@@ -503,9 +506,20 @@ function buildPrices(){
 let h='';PRICES.forEach((p,i)=>{h+=`<div class="pr-item${i===0?' active':''}" data-i="${i}" onclick="setPrice(${p.min},${p.max},${i})"><span class="pr-dot"></span>${p.l}</div>`});
 document.getElementById('pr').innerHTML=h;document.getElementById('prm').innerHTML=h;
 }
+function buildBrands(){
+let brands={};D.forEach(p=>{brands[p.brand]=(brands[p.brand]||0)+1});
+let h=`<div class="pr-item active" data-b="all" onclick="setBrand('all')"><span class="pr-dot"></span>Tất cả (${D.length})</div>`;
+Object.entries(brands).sort((a,b)=>b[1]-a[1]).forEach(([b,c])=>{h+=`<div class="pr-item" data-b="${b}" onclick="setBrand('${b}')"><span class="pr-dot"></span>${b} (${c})</div>`});
+document.getElementById('br').innerHTML=h;document.getElementById('brm').innerHTML=h;
+document.getElementById('statTotal').textContent=D.length;
+let cats={};D.forEach(p=>{cats[p.catSlug]=1});document.getElementById('statCats').textContent=Object.keys(cats).length;
+}
+
+
 
 function getF(){
 let r=D;
+if(S.brand!=='all')r=r.filter(p=>p.brand===S.brand);
 if(S.cat!=='all')r=r.filter(p=>p.catSlug===S.cat);
 if(S.q){let q=S.q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');r=r.filter(p=>p._idx.includes(q))}
 if(S.pmin>0||S.pmax<1e15)r=r.filter(p=>p.priceNum>=S.pmin&&p.priceNum<=S.pmax);
@@ -524,7 +538,7 @@ let g=document.getElementById('grid');
 g.className='pg'+(S.view==='l'?' lv':'');
 if(!items.length){g.innerHTML=`<div class="empty" style="grid-column:1/-1"><i class="fas fa-search"></i><h3>Không tìm thấy</h3><p>Thử thay đổi bộ lọc hoặc từ khóa</p><button class="reset-btn" onclick="resetAll()">Xóa bộ lọc</button></div>`;
 }else{
-g.innerHTML=items.map((p,i)=>{let idx=D.indexOf(p);return`<div class="pc fade" onclick="showDetail(${idx})" style="transition-delay:${Math.min(i*25,400)}ms"><div class="pi"><img src="${p.image}" alt="${p.name}" loading="lazy" onerror="this.style.display='none'"><span class="pi-badge"><i class="fas ${p.catIcon}"></i> ${p.cat}</span></div><div class="pb"><div style="font-size:.65rem;font-weight:700;color:var(--a);letter-spacing:.5px;margin-bottom:4px">${p.model}</div><div class="pn">${p.name}</div><div class="pf"><span class="pp">${p.price||'Liên hệ'}</span><i class="fas fa-chevron-right"></i></div></div></div>`}).join('');
+g.innerHTML=items.map((p,i)=>{let idx=D.indexOf(p);let brandColor=p.brand==='Eurogold'?'#c8102e':'var(--p)';return`<div class="pc fade" onclick="showDetail(${idx})" style="transition-delay:${Math.min(i*25,400)}ms"><div class="pi"><img src="${p.image}" alt="${p.name}" loading="lazy" onerror="this.style.display='none'"><span class="pi-badge"><i class="fas ${p.catIcon}"></i> ${p.cat}</span><span style="position:absolute;top:8px;right:8px;background:${brandColor};color:#fff;padding:3px 8px;border-radius:5px;font-size:.58rem;font-weight:700">${p.brand}</span></div><div class="pb"><div style="font-size:.65rem;font-weight:700;color:${brandColor};letter-spacing:.5px;margin-bottom:4px">${p.model||p.brand}</div><div class="pn">${p.name}</div><div class="pf"><span class="pp">${p.price||'Liên hệ'}</span><i class="fas fa-chevron-right"></i></div></div></div>`}).join('');
 }
 requestAnimationFrame(()=>document.querySelectorAll('.fade').forEach(e=>e.classList.add('vis')));
 renderPag(tp);
@@ -602,17 +616,17 @@ ${allImgs.length>1?`<div class="gallery-thumbs">${thumbs}</div>`:''}
 ${p.sku?`<div class="detail-sku">SKU: ${p.sku} &bull; Model: ${p.model}</div>`:''}
 <div class="detail-cat"><i class="fas ${p.catIcon}"></i> ${p.cat}</div>
 <h1 class="detail-name">${p.name}</h1>
-<div style="font-size:.95rem;font-weight:800;color:var(--a);letter-spacing:1px;margin-bottom:12px">${p.model} | Malloca</div>
+<div style="font-size:.95rem;font-weight:800;color:${p.brand==='Eurogold'?'#c8102e':'var(--a)'};letter-spacing:1px;margin-bottom:12px">${p.model?p.model+' | ':''} ${p.brand}</div>
 <div class="detail-price">${p.price||'Liên hệ'}</div>
 ${p.summary?`<div class="detail-summary">${p.summary}</div>`:''}
 <div class="detail-badges">
-<div class="detail-badge"><i class="fas fa-check-circle"></i> Chính hãng Malloca</div>
+<div class="detail-badge"><i class="fas fa-check-circle"></i> Chính hãng ${p.brand}</div>
 <div class="detail-badge"><i class="fas fa-shield-halved"></i> Bảo hành điện tử</div>
 <div class="detail-badge"><i class="fas fa-truck-fast"></i> Miễn phí lắp đặt</div>
 </div>
 <div style="display:flex;gap:10px;flex-wrap:wrap">
 <button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${idx})"><i class="fas fa-cart-plus"></i> Thêm vào giỏ</button>
-<a href="${p.link}" target="_blank" class="detail-btn detail-btn-outline"><i class="fas fa-external-link-alt"></i> malloca.com</a>
+<a href="${p.link}" target="_blank" class="detail-btn detail-btn-outline"><i class="fas fa-external-link-alt"></i> ${p.brand==='Eurogold'?'eurogold.vn':'malloca.com'}</a>
 </div>
 </div>
 </div>
@@ -650,12 +664,12 @@ document.getElementById('tab-'+id).classList.add('active');
 
 // ===== ACTIONS =====
 function setCat(s){S.cat=s;S.pg=1;updActive('.cat-item','data-s',s);render();closeMsb()}
-function setPrice(min,max,i){S.pmin=min;S.pmax=max;S.pg=1;document.querySelectorAll('.pr-item').forEach((e,j)=>e.classList.toggle('active',j===i));render();closeMsb()}
+function setPrice(min,max,i){S.pmin=min;S.pmax=max;S.pg=1;document.querySelectorAll('.pr-item').forEach((e,j)=>e.classList.toggle('active',j===i));render();closeMsb()}function setBrand(b){S.brand=b;S.pg=1;document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')===b));render();closeMsb()}
 function doSearch(){S.q=document.getElementById('q').value.trim();S.pg=1;render();renderMainCatSearch()}
 function doSort(){S.sort=document.getElementById('ss').value;S.pg=1;render()}
 function setV(v){S.view=v;document.getElementById('gb').classList.toggle('active',v==='g');document.getElementById('lb').classList.toggle('active',v==='l');render()}
 function goPg(p){let f=getF(),tp=Math.ceil(f.length/PP);if(p<1||p>tp)return;S.pg=p;render();document.querySelector('.toolbar').scrollIntoView({behavior:'smooth',block:'start'})}
-function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:S.view};document.getElementById('q').value='';document.getElementById('ss').value='default';updActive('.cat-item','data-s','all');document.querySelectorAll('.pr-item').forEach((e,i)=>e.classList.toggle('active',i===0));render();let csr=document.getElementById('catSearchResults');if(csr)csr.innerHTML='';}
+function resetAll(){S={cat:'all',q:'',pmin:0,pmax:1e15,sort:'default',pg:1,view:S.view,brand:'all'};document.getElementById('q').value='';document.getElementById('ss').value='default';updActive('.cat-item','data-s','all');document.querySelectorAll('.pr-item[data-i]').forEach((e,i)=>e.classList.toggle('active',i===0));document.querySelectorAll('[data-b]').forEach(e=>e.classList.toggle('active',e.getAttribute('data-b')==='all'));render();let csr=document.getElementById('catSearchResults');if(csr)csr.innerHTML='';}
 function updActive(sel,attr,val){document.querySelectorAll(sel).forEach(e=>e.classList.toggle('active',e.getAttribute(attr)===val))}
 function closeMsb(){document.getElementById('msb').classList.remove('open')}
 document.addEventListener('keydown',e=>{if(e.key==='Escape')goBack();if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){e.preventDefault();document.getElementById('q').focus()}});