feat: Fix product tables and responsive fonts

- Add product detail page ([slug].astro) with table rendering
- Display productTables from site-config.ts on product pages
- Add responsive font scaling for large screens (1280px+)
- Base font scales from 16px to 24px on 4K displays
- All text elements use responsive sizing (md/lg/xl breakpoints)
- Tables styled with green headers and alternating rows
- Add comprehensive documentation (FIXES_SUMMARY.md)

Fixes:
- Product specification tables now visible on product pages
- Font too small on large screens - now responsive

dealplustech-astro/src/components/BlogCard.astro

@@ -0,0 +1,51 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { title, excerpt, date, author, category, categories, image, featuredImage } = post.data;
+
+// Support both 'category' and 'categories' field names
+const postCategory = category || (Array.isArray(categories) ? categories[0] : 'ทั่วไป');
+// Support both 'image' and 'featuredImage' field names
+const postImage = image || featuredImage || '/images/2021/03/ppr-pipe_000C.jpg';
+---
+
+<a href={`/blog/${post.slug}`} class="card group">
+  <div class="relative aspect-video bg-secondary-100 overflow-hidden">
+    <img
+      src={postImage}
+      alt={title}
+      class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
+      loading="lazy"
+    />
+    <div class="absolute top-4 left-4">
+      <span class="industrial-badge">{postCategory}</span>
+    </div>
+  </div>
+  <div class="p-6">
+    <time class="text-sm text-secondary-500">
+      {new Date(date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
+    </time>
+    
+    <h3 class="mt-2 text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+      {title}
+    </h3>
+    
+    {excerpt && (
+      <p class="mt-3 text-secondary-600 text-sm line-clamp-3">
+        {excerpt}
+      </p>
+    )}
+    
+    <div class="mt-4 flex items-center text-primary-600 font-medium">
+      <span>อ่านต่อ</span>
+      <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
+      </svg>
+    </div>
+  </div>
+</a>