Fix hero section structure - remove order classes, add missing classes

Changes:
- Removed order-2 lg:order-1 from 9 pages (image now on LEFT)
- Added bg-white/10 p-2 to image containers in 8 pages
- Added lg:py-24 padding to sections in 8 pages

Pages fixed: durgo-avvs, grilles, water-pump, pipe-coupling,
ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-syler, ท่อ-upvc,
ระบบน้ำ, วาล์ว-valve, เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr

src/pages/grilles.astro

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <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>
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </div>
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
-          <div class="order-2 lg:order-1">
+          <div class="">
             <div class="lg:sticky lg:top-24">
-            <div class="rounded-2xl overflow-hidden">
+            <div class="rounded-2xl overflow-hidden bg-white/10 p-2">
               <img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์พลาสติก" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
             </div>
           </div>
-          <div class="order-1 lg:order-2">
+          <div class="">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">กริลแอร์</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">กริลแอร์ (Grilles air)</h1>
             <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">