Fix catalogue tabs: tách CSS riêng .ctab, không dùng chung .pgb với pagination

index.html

@@ -108,9 +108,15 @@ 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}}
+#catTabs{display:flex;gap:6px;padding:4px 0 12px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
+#catTabs::-webkit-scrollbar{display:none}
+#catTabs .ctab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:2px solid var(--gl);border-radius:50px;cursor:pointer;background:#fff;font-size:.78rem;font-weight:600;transition:var(--t);white-space:nowrap;flex-shrink:0;color:var(--d);line-height:1}
+#catTabs .ctab:hover{border-color:var(--p);color:var(--p);background:rgba(0,63,98,.03)}
+#catTabs .ctab.active{background:var(--p);color:#fff;border-color:var(--p)}
+#catTabs .ctab i{font-size:.7rem}
+#catTabs .ctab .cnt{font-size:.6rem;opacity:.65;margin-left:2px}
+#catTabs .ctab.active .cnt{opacity:.8}
+@media(max-width:768px){#catTabs .ctab{padding:7px 12px;font-size:.7rem}}
 .pg-dots{display:flex;align-items:center;font-size:.8rem;color:var(--g);padding:0 4px}
 
 /* ========== DETAIL VIEW ========== */
@@ -882,7 +888,7 @@ 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>`;
+return `<div class="ctab${i===0?' active':''}" onclick="loadCatalogue(${i})"><i class="fas ${icon}"></i>${c.name||'Catalogue '+(i+1)}<span class="cnt">${pCount}</span></div>`;
 }).join('');
 }
 
@@ -891,7 +897,7 @@ activeCat=idx;
 let c=CAT_LIST[idx];
 if(!c)return;
 // Update active tab
-let tabBtns=document.querySelectorAll('#catTabs .pgb');
+let tabBtns=document.querySelectorAll('#catTabs .ctab');
 tabBtns.forEach((b,i)=>b.classList.toggle('active',i===idx));
 let content=document.getElementById('catContent');
 if(!content)return;