feat(portfolio): filter by service category (Consult / Web Dev) + multi-category support

Changes:
- Filter bar: old industry filters (🚗, 💊, etc.) replaced with service categories: All, Consult, Website Development
- Card categories updated per user spec:
  - Dataroot → consult only
  - เลือดจระเข้วานิไทย → both consult + webdev (multi-category)
  - All other 7 cards → webdev
- Filter JS updated: reads data-category (comma-sep) instead of industry text
- Multi-category via comma-separated values in data-category attribute
- Portfolio page: home + portfolio page both reflect new categories

src/pages/portfolio.astro

@@ -16,15 +16,11 @@ const realPortfolio = portfolio.filter(p => p.data.url && p.data.url !== '');
 
 // Industry filter metadata: id -> { label, icon }
 // Icons are lucide-style SVGs; emoji-free.
-const industryFilters = [
+// Service category filters (multi-category supported via comma-sep)
+const serviceFilters = [
   { id: 'all', label: 'ทั้งหมด', icon: 'layers' },
-  { id: '🏭 โรงงาน', label: 'โรงงาน', icon: 'factory' },
-  { id: '💊 สินค้าอุปโภค', label: 'สินค้าอุปโภค', icon: 'package' },
-  { id: '⚖️ สำนักงานกฎหมาย', label: 'สำนักงานกฎหมาย', icon: 'scale' },
-  { id: '📚 สถาบัน / การศึกษา', label: 'สถาบัน / การศึกษา', icon: 'graduationCap' },
-  { id: '📈 ที่ปรึกษาธุรกิจ', label: 'ที่ปรึกษาธุรกิจ', icon: 'trendingUp' },
-  { id: '🎨 Digital Agency', label: 'Digital Agency', icon: 'pen' },
-  { id: '🛒 E-commerce', label: 'E-commerce', icon: 'shoppingCart' },
+  { id: 'consult', label: 'Consult', icon: 'briefcase' },
+  { id: 'webdev', label: 'Website Development', icon: 'code' },
 ];
 ---
 
@@ -41,7 +37,7 @@ const industryFilters = [
   <section class="filter-section">
     <div class="container">
       <div class="filter-bar">
-        {industryFilters.map(f => (
+        {serviceFilters.map(f => (
           <button
             class="filter-btn"
             class:list={[{ active: f.id === 'all' }]}
@@ -133,8 +129,8 @@ const industryFilters = [
       btn.classList.add('active');
       const filter = btn.getAttribute('data-filter');
       cards.forEach(card => {
-        const industry = card.querySelector('.portfolio-industry')?.textContent || '';
-        if (filter === 'all' || industry.includes(filter)) {
+        const categories = (card.getAttribute('data-category') || '').toLowerCase().split(/[,\s]+/).filter(Boolean);
+        if (filter === 'all' || categories.includes(filter)) {
           (card as HTMLElement).style.display = '';
         } else {
           (card as HTMLElement).style.display = 'none';