Fix catalogue: CSS chồng chéo, thêm OCR cho Canzy/Demax/GROB, tabs đẹp hơn

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="2191 sản phẩm thiết bị nhà bếp & phụ kiện Malloca, Eurogold, Grob, Canzy & Demax chính hãng — đầy đủ thông số, hình ảnh, mô tả chi tiết.">
+<meta name="description" content="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 — đầ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">
@@ -108,6 +108,9 @@ img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
 .pgb:hover{border-color:var(--p);color:var(--p)}
 .pgb.active{background:var(--p);color:#fff;border-color:var(--p)}
 .pgb:disabled{opacity:.3;cursor:default}
+#catTabs .pgb{width:auto;height:auto;padding:8px 18px;border-radius:20px;font-size:.8rem;gap:6px}
+#catTabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
+@media(max-width:768px){#catTabs .pgb{padding:7px 12px;font-size:.72rem}}
 .pg-dots{display:flex;align-items:center;font-size:.8rem;color:var(--g);padding:0 4px}
 
 /* ========== DETAIL VIEW ========== */
@@ -481,7 +484,7 @@ textarea.form-input{height:120px;resize:vertical}
 <div class="page-section" id="page-catalogue">
 <div class="section-header" style="text-align:center;margin-bottom:10px">
 <h2 style="font-size:1.8rem;font-weight:800;color:var(--d)"><i class="fas fa-book-open" style="color:var(--a);margin-right:10px"></i>Catalogue <span style="color:var(--a)">Sản phẩm</span></h2>
-<p style="color:var(--g);font-size:.9rem;max-width:550px;margin:10px auto 0">Tất cả 607 trang catalogue hiển thị trực tiếp — tìm kiếm theo văn bản trong ảnh</p>
+<p style="color:var(--g);font-size:.9rem;max-width:550px;margin:10px auto 0">10 bộ catalogue — tìm kiếm theo văn bản trong ảnh</p>
 <div style="max-width:480px;margin:16px auto 0;position:relative">
 <i class="fas fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--g);font-size:.85rem"></i>
 <input type="text" id="catSearch" placeholder="Tìm trong catalogue... (tên SP, mã SP, thông số...)" oninput="searchCatalogue()" style="width:100%;padding:10px 14px 10px 40px;border:2px solid var(--gl);border-radius:12px;font-size:.85rem;font-family:inherit;outline:none">
@@ -489,7 +492,7 @@ textarea.form-input{height:120px;resize:vertical}
 </div>
 </div>
 <!-- Tab selector -->
-<div id="catTabs" style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px"></div>
+<div id="catTabs"></div>
 <!-- Catalogue content renders here -->
 <div id="catContent"></div>
 </div>
@@ -628,7 +631,7 @@ 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> & EURO<span style="color:var(--a)">GOLD</span> & GR<span style="color:var(--a)">OB</span> & CAN<span style="color:var(--a)">ZY</span> & DE<span style="color:var(--a)">MAX</span></div><p>2191 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 từ malloca.com, eurogold.vn, catalogue Grob, Canzy & Demax.</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> & GR<span style="color:var(--a)">OB</span> & CAN<span style="color:var(--a)">ZY</span> & DE<span style="color:var(--a)">MAX</span></div><p>2134 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 từ malloca.com, eurogold.vn, catalogue Grob, Canzy & Demax.</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="javascript:void(0)" onclick="setCat('may-hut-khoi-khu-mui')">Máy hút khói khử mùi</a></li><li><a href="javascript:void(0)" onclick="setCat('bep-dien-tu-bep-gas')">Bếp điện từ, bếp gas</a></li><li><a href="javascript:void(0)" onclick="setCat('lo-nuong')">Lò nướng, lò hấp</a></li><li><a href="javascript:void(0)" onclick="setCat('chau-rua-chen')">Chậu rửa chén</a></li><li><a href="javascript:void(0)" onclick="setCat('voi-rua-chen')">Vòi rửa chén</a></li></ul></div>
 <div><h4>Thêm</h4><ul class="footer-links"><li><a href="javascript:void(0)" onclick="setCat('tu-lanh-tu-ruou')">Tủ lạnh, tủ rượu</a></li><li><a href="javascript:void(0)" onclick="setCat('may-rua-chen-may-say-chen')">Máy rửa chén</a></li><li><a href="javascript:void(0)" onclick="setCat('thiet-bi-gia-dung-nho')">Gia dụng nhỏ</a></li><li><a href="javascript:void(0)" onclick="showPage('catalogue')">Catalogue</a></li><li><a href="javascript:void(0)" onclick="toggleChat()">🤖 Tư Vấn AI</a></li></ul></div>
@@ -873,7 +876,14 @@ catLoaded=true;
 function initCatTabs(){
 let tabs=document.getElementById('catTabs');
 if(!tabs||!CAT_LIST.length)return;
-tabs.innerHTML=CAT_LIST.map((c,i)=>`<button class="pgb${i===0?' active':''}" onclick="loadCatalogue(${i})" style="white-space:nowrap">${c.name||'Catalogue '+(i+1)}</button>`).join('');
+const icons={'bep':'fa-fire','may-hut':'fa-wind','lo':'fa-temperature-high','chau':'fa-sink','khac':'fa-box','gia':'fa-tags','master':'fa-layer-group','grob':'fa-cogs','canzy':'fa-kitchen-set','demax':'fa-lock'};
+tabs.innerHTML=CAT_LIST.map((c,i)=>{
+let slug=c.slug||'';
+let icon='fa-book-open';
+for(let k in icons){if(slug.includes(k)){icon=icons[k];break;}}
+let pCount=c.pages?c.pages.length:0;
+return `<button class="pgb${i===0?' active':''}" onclick="loadCatalogue(${i})" style="white-space:nowrap"><i class="fas ${icon}"></i> ${c.name||'Catalogue '+(i+1)} <span style="opacity:.6;font-size:.65rem">(${pCount})</span></button>`;
+}).join('');
 }
 
 function loadCatalogue(idx){