Fix hero section structure across all product pages

Phase 1: Fixed layout (4 pages) - Image LEFT, Content RIGHT
- ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc

Phase 2: Added bg-white/10 p-2 to image containers
Phase 3: Added lg:py-24 padding to sections

All pages now match armflex.astro reference structure.

src/pages/pipe-coupling.astro

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <main class="bg-white min-h-screen">
     <!-- Product Hero Section -->
-    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
     <!-- Animated Background -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
       <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>