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

src/app/[...slug]/page.tsx

@@ -325,6 +325,52 @@ function ProductPage({ product }: { product: ProductCategory }) {
             </section>
           )}
 
+
+          {/* Product Tables Section */}
+          {product.productTables && product.productTables.length > 0 && (
+            <section className="mb-12">
+              <h2 className="text-2xl font-bold text-secondary-900 mb-6 flex items-center gap-2">
+                <svg className="w-6 h-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                ตารางข้อมูลผลิตภัณฑ์
+              </h2>
+              <div className="space-y-8">
+                {product.productTables.map((table, tableIndex) => (
+                  <div key={tableIndex} className="bg-white rounded-xl border border-secondary-200 overflow-hidden">
+                    <h3 className="text-lg font-semibold text-secondary-800 p-4 bg-secondary-50 border-b border-secondary-200">
+                      {table.tableName}
+                    </h3>
+                    <div className="overflow-x-auto">
+                      <table className="w-full min-w-[600px]">
+                        <thead>
+                          <tr className="bg-primary-50">
+                            {table.headers.map((header, headerIndex) => (
+                              <th key={headerIndex} className="px-4 py-3 text-left text-sm font-semibold text-primary-700">
+                                {header}
+                              </th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {table.rows.map((row, rowIndex) => (
+                            <tr key={rowIndex} className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+                              {row.map((cell, cellIndex) => (
+                                <td key={cellIndex} className="px-4 py-3 text-sm text-secondary-700">
+                                  {cell}
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
           {/* Features Section */}
           {product.features && product.features.length > 0 && (
             <section className="mb-12">