diff --git a/.context/reports/index.json b/.context/reports/index.json
index 93715b9..b2fd3f4 100644
--- a/.context/reports/index.json
+++ b/.context/reports/index.json
@@ -1,7 +1,49 @@
 {
   "version": 1,
-  "updatedAt": "2026-05-21T09:49:46.267Z",
+  "updatedAt": "2026-05-24T14:08:35.336Z",
   "entries": [
+    {
+      "id": "2026-05-24T13-16-51-249Z-hero-section-fix-plan",
+      "category": "plan",
+      "title": "Hero Section Fix Plan",
+      "summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di…",
+      "searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
+      "createdAt": "2026-05-24T13:16:51.249Z",
+      "updatedAt": "2026-05-24T14:08:35.335Z",
+      "sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "sourceLabel": "todo.md",
+      "viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "viewerLabel": "Hero Section Fix Plan",
+      "tags": [
+        "plan",
+        "markdown"
+      ],
+      "metadata": {
+        "action": "approved",
+        "modified": false
+      }
+    },
+    {
+      "id": "2026-05-24T14-04-15-688Z-hero-section-fix-plan-v2",
+      "category": "plan",
+      "title": "Hero Section Fix Plan v2",
+      "summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------…",
+      "searchText": "plan Hero Section Fix Plan v2 # Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown declined false",
+      "createdAt": "2026-05-24T14:04:15.688Z",
+      "updatedAt": "2026-05-24T14:04:15.688Z",
+      "sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "sourceLabel": "todo.md",
+      "viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "viewerLabel": "Hero Section Fix Plan v2",
+      "tags": [
+        "plan",
+        "markdown"
+      ],
+      "metadata": {
+        "action": "declined",
+        "modified": false
+      }
+    },
     {
       "id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
       "category": "plan",
diff --git a/.context/todo.md b/.context/todo.md
index 4b4a69f..47bad06 100644
--- a/.context/todo.md
+++ b/.context/todo.md
@@ -1,163 +1,141 @@
-# Plan: Modern Animated Redesign — Deal Plus Tech Website
+# Plan: Fix Hero Section Structure for All Product Pages
 
 ## Context
 
-The current website at `/Users/kunthawatgreethong/gitea/dealplustech-emdash` is an Astro-based Thai-language static site for "ดีล พลัส เทค" (Deal Plus Tech). It has basic animations (float, orb-drift, fade-in) but lacks modern scroll-triggered effects and sophisticated micro-interactions.
+Analyzed all 23 product pages against reference `armflex.astro`.
 
-**Current State:**
-- Color scheme: Green primary (#2d6a4f), Orange accent (#e35c1c)
-- Animations: Basic float, fade-in, stagger, image hover zoom
-- Layout: Standard header with dropdown, hero with floating cards, product grid, footer
-- Working directory: `/Users/kunthawatgreethong/gitea/dealplustech-emdash`
+### Reference Structure (armflex.astro)
 
-**Goal:** Redesign with modern animated effects including:
-- Scroll-triggered reveal animations
-- Text split/reveal effects
-- Magnetic hover buttons
-- Parallax sections
-- Smooth page transitions
-- Bento grid layouts
-- Glassmorphism cards
-- Animated gradient mesh backgrounds
-
----
-
-## Phase 1: Animation Library & CSS Infrastructure
-
-**Why:** Set up the foundation for all modern animations before touching components.
-
-**Test first** → `src/styles/global.css`
-- Add scroll-triggered animation classes (fade-up, fade-left, fade-right, scale-in)
-- Add Intersection Observer script for scroll animations
-- Add text split animation utilities
-- Add magnetic button effect CSS
-- Add glassmorphism utility classes
-- Add gradient mesh animation keyframes
-- Add parallax utility classes
-- Add page transition styles
-
-**Modify** → `src/layouts/BaseLayout.astro`
-- Add animation initialization script in head
-- Add page transition wrapper
-
-**Modify** → `src/components/common/Header.astro`
-- Add scroll-triggered header style changes (shrink on scroll)
-- Add mobile menu animation
-- Add hover effects for nav items
-
----
-
-## Phase 2: Homepage Redesign
-
-**Why:** The homepage is the first impression - needs the most dramatic animation showcase.
-
-**Modify** → `src/pages/index.astro`
-- **Hero Section:**
-  - Replace static gradient with animated gradient mesh
-  - Add text split reveal animation (heading characters animate in sequence)
-  - Add floating 3D product cards with parallax on mouse move
-  - Add magnetic CTA buttons
+```html
+<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">
+  <div class="absolute inset-0 overflow-hidden pointer-events-none">
+    <!-- 3 floating particles -->
+    <!-- 1 wave SVG -->
+  </div>
   
-- **Featured Products:**
-  - Add scroll-triggered reveal with stagger
-  - Add 3D tilt effect on card hover
-  - Add image reveal animation on scroll
-  
-- **Trust Badges:**
-  - Add counter animation (numbers count up)
-  - Add scroll-triggered icon animations
-  
-- **CTA Section:**
-  - Add parallax background effect
-  - Add gradient animation
+  <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="lg:sticky lg:top-24">
+        <div class="rounded-2xl overflow-hidden bg-white/10 p-2">
+          <img ... />
+        </div>
+      </div>
+      <div>
+        <!-- Content: badge, h1, p, buttons -->
+      </div>
+    </div>
+  </div>
+</section>
+```
 
 ---
 
-## Phase 3: Product Pages & Components
+## Issues Found
 
-**Why:** Extend animations consistently across all pages.
+### Issue 1: ORDER CLASSES (9 pages)
+**Problem:** Order classes swap image/content positions differently on mobile vs desktop.
 
-**Modify** → `src/layouts/BaseLayout.astro`
-- Enhance footer with scroll-triggered animations
+| Page | Current Order | Result |
+|------|--------------|--------|
+| durgo-avvs | order-2 lg:order-1 | Image on right (desktop) |
+| grilles | order-2 lg:order-1 | Image on right (desktop) |
+| water-pump | order-2 lg:order-1 | Image on right (desktop) |
+| ท่อ-hdpe | order-2 lg:order-1 | Image on right (desktop) |
+| ท่อ-ppr-scg | order-2 lg:order-1 | Image on right (desktop) |
+| ท่อ-ppr-thai-ppr | order-2 lg:order-1 | Image on right (desktop) |
+| ท่อ-syler | order-2 lg:order-1 | Image on right (desktop) |
+| ท่อ-upvc | order-2 lg:order-1 | Image on right (desktop) |
+| เครื่องเชื่อม-hdpe | order-2 lg:order-1 | Image on right (desktop) |
 
-**Modify** → `src/components/common/Header.astro`
-- Add smooth scroll navigation highlighting
-- Add mega menu with staggered item reveals
-
-**Modify** → Product pages (`src/pages/*.astro`)
-- Add breadcrumb with reveal animation
-- Add product gallery with lightbox and zoom
-- Add related products carousel
+**Fix:** Remove order classes entirely. Image will be on LEFT on ALL screen sizes.
 
 ---
 
-## Phase 4: Modern Design Enhancements
+### Issue 2: MISSING IMAGE CONTAINER CLASSES (7 pages)
 
-**Why:** Add sophisticated design patterns beyond animations.
-
-**Modify** → `src/styles/global.css`
-- Add bento grid layout utilities
-- Add glassmorphism component classes
-- Add custom cursor styles
-- Add loading skeleton animations
-
-**Modify** → `src/pages/all-products.astro`
-- Implement bento grid product layout
-- Add filter animations
-- Add lazy load with skeleton
+| Page | Fix Needed |
+|------|-----------|
+| durgo-avvs | Add `bg-white/10 p-2` to image container |
+| grilles | Add `bg-white/10 p-2` to image container |
+| water-pump | Add `bg-white/10 p-2` to image container |
+| ท่อ-hdpe | Add `bg-white/10 p-2` to image container |
+| ท่อ-ppr-scg | Add `bg-white/10 p-2` to image container |
+| ท่อ-ppr-thai-ppr | Add `bg-white/10 p-2` to image container |
+| ท่อ-upvc | Add `bg-white/10 p-2` to image container |
+| ท่อ-syler | Add `bg-white/10 p-2` to image container |
 
 ---
 
-## Phase 5: Performance & Polish
+### Issue 3: MISSING SECTION PADDING (7 pages)
 
-**Why:** Ensure animations don't impact performance negatively.
-
-**Test** → Run `npm run build` to verify no errors
-**Test** → Run `npm run dev` and verify animations work smoothly
-**Polish** → Add reduced-motion media query for accessibility
-**Polish** → Optimize animation performance (transform/opacity only)
+| Page | Fix Needed |
+|------|-----------|
+| durgo-avvs | Add `lg:py-24` to section class |
+| grilles | Add `lg:py-24` to section class |
+| pipe-coupling | Add `lg:py-24` to section class |
+| ท่อ-syler | Add `lg:py-24` to section class |
+| ระบบน้ำ | Add `lg:py-24` to section class |
+| วาล์ว-valve | Add `lg:py-24` to section class |
+| เครื่องเชื่อม-hdpe | Add `lg:py-24` to section class |
+| เครื่องเชื่อม-ppr | Add `lg:py-24` to section class |
 
 ---
 
-## Critical Files
+## Pages Status Summary
 
-| File | Action | Changes |
-|------|--------|---------|
-| `src/styles/global.css` | Modify | Add animation library, utilities, glassmorphism |
-| `src/layouts/BaseLayout.astro` | Modify | Add animation scripts, page wrapper |
-| `src/layouts/Layout.astro` | Modify | Add meta tags, fonts |
-| `src/components/common/Header.astro` | Modify | Scroll effects, animations, mobile menu |
-| `src/components/common/Footer.astro` | Modify | Scroll animations, hover effects |
-| `src/pages/index.astro` | Modify | Complete hero/product/cta redesign with animations |
+| Page | Order Class | Image Container | Section Padding |
+|------|-------------|-----------------|-----------------|
+| aeroflex | ✅ OK | ✅ OK | ✅ OK |
+| armflex | ✅ OK | ✅ OK | ✅ OK |
+| maxflex | ✅ OK | ✅ OK | ✅ OK |
+| pipe-coupling | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
+| realflex | ✅ OK | ✅ OK | ✅ OK |
+| water-treatment | ✅ OK | ✅ OK | ✅ OK |
+| ตู้ดับเพลิง | ✅ OK | ✅ OK | ✅ OK |
+| ระบบน้ำ | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
+| ระบบรั้วไวน์แมน | ✅ OK | ✅ OK | ✅ OK |
+| รั้วเทวดา | ✅ OK | ✅ OK | ✅ OK |
+| เทอร์โมเบรค-thermobreak | ✅ OK | ✅ OK | ✅ OK |
+| เม็ดกรู๊ฟ-คับปลิ้ง | ✅ OK | ✅ OK | ✅ OK |
+| ท่อ-xy-lent | ✅ OK | ✅ OK | ✅ OK |
+| durgo-avvs | ❌ WRONG | ❌ Missing | ❌ Missing |
+| grilles | ❌ WRONG | ❌ Missing | ❌ Missing |
+| water-pump | ❌ WRONG | ❌ Missing | ❌ Missing |
+| ท่อ-hdpe | ❌ WRONG | ❌ Missing | ✅ OK |
+| ท่อ-ppr-scg | ❌ WRONG | ❌ Missing | ✅ OK |
+| ท่อ-ppr-thai-ppr | ❌ WRONG | ❌ Missing | ✅ OK |
+| ท่อ-syler | ❌ WRONG | ❌ Missing | ❌ Missing |
+| ท่อ-upvc | ❌ WRONG | ❌ Missing | ✅ OK |
+| เครื่องเชื่อม-hdpe | ❌ WRONG | ✅ OK | ❌ Missing |
+| วาล์ว-valve | ✅ OK | ✅ OK | ❌ Missing |
+| เครื่องเชื่อม-ppr | ✅ OK | ✅ OK | ❌ Missing |
 
-## Animation Effects to Implement
+---
 
-### CSS Animations (global.css)
-| Class | Effect |
-|-------|--------|
-| `.animate-fade-up` | Fade in + translate up on scroll |
-| `.animate-fade-left` | Fade in + translate left on scroll |
-| `.animate-fade-right` | Fade in + translate right on scroll |
-| `.animate-scale-in` | Scale from 0.9 to 1 on scroll |
-| `.animate-text-reveal` | Text reveals word by word/char by char |
-| `.animate-gradient-shift` | Animated gradient background |
-| `.glassmorphism` | Frosted glass effect |
-| `.magnetic-btn` | Button follows cursor on hover |
-| `.parallax` | Parallax scroll effect |
-| `.tilt-card` | 3D tilt on hover |
+## Implementation
 
-### Intersection Observer Script
-- Trigger animations when elements enter viewport
-- Add `data-animate` attribute to elements
-- Configure threshold and delay options
+### Fix Order (to avoid conflicts):
+1. **First:** Remove order classes from all affected pages
+2. **Second:** Add missing image container classes
+3. **Third:** Add missing section padding
+
+### Fix Code for each page:
+
+```javascript
+// Remove order classes
+.replace(/order-[12] lg:order-[12]/g, '')
+
+// Add image container classes
+.replace('class="rounded-2xl overflow-hidden"', 'class="rounded-2xl overflow-hidden bg-white/10 p-2"')
+
+// Add section padding
+.replace('py-16 overflow-hidden">', 'py-16 lg:py-24 overflow-hidden">')
+```
 
 ---
 
 ## Verification
 
-1. Run `npm run dev` at http://localhost:3100
-2. Scroll through homepage - verify animations trigger at correct positions
-3. Hover on product cards - verify 3D tilt effect
-4. Hover on CTA buttons - verify magnetic effect
-5. Resize to mobile - verify responsive animations
-6. Check `prefers-reduced-motion` - verify fallback animations
\ No newline at end of file
+1. `npm run build` succeeds
+2. Visual check on dev server (mobile AND desktop)
+3. Image should be on LEFT side in ALL pages
\ No newline at end of file
diff --git a/src/pages/durgo-avvs.astro b/src/pages/durgo-avvs.astro
index c8b1475..0d964a2 100644
--- a/src/pages/durgo-avvs.astro
+++ b/src/pages/durgo-avvs.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVs คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <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/durgo_000C.jpg" alt="DURGO AVVs" 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">ระบบวาล์วเติมอากาศ DURGO AVVs</h1>
             <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
diff --git a/src/pages/grilles.astro b/src/pages/grilles.astro
index 60a819a..3094eca 100644
--- a/src/pages/grilles.astro
+++ b/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">
diff --git a/src/pages/pipe-coupling.astro b/src/pages/pipe-coupling.astro
index c76f315..1cd5d25 100644
--- a/src/pages/pipe-coupling.astro
+++ b/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>
diff --git a/src/pages/water-pump.astro b/src/pages/water-pump.astro
index fe0438a..c9557dd 100644
--- a/src/pages/water-pump.astro
+++ b/src/pages/water-pump.astro
@@ -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/water-pump_000C.jpg" alt="ปั๊มน้ำ (Water Pump)" 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">ปั๊มน้ำ (Water Pump)</h1>
             <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
diff --git a/src/pages/ท่อ-hdpe.astro b/src/pages/ท่อ-hdpe.astro
index 69f8a76..1dc5bc2 100644
--- a/src/pages/ท่อ-hdpe.astro
+++ b/src/pages/ท่อ-hdpe.astro
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
-          <div class="order-2 lg:order-1">
+          <div class="">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ HDPE</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ HDPE (High Density Polyethylene)</h1>
             <p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
               </a>
             </div>
           </div>
-          <div class="order-1 lg:order-2">
+          <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/hdpe001.png" alt="ท่อ HDPE (High Density Polyethylene)" class="w-full" loading="eager" />
             </div>
           </div>
diff --git a/src/pages/ท่อ-ppr-scg.astro b/src/pages/ท่อ-ppr-scg.astro
index 4343d0b..e8a8af0 100644
--- a/src/pages/ท่อ-ppr-scg.astro
+++ b/src/pages/ท่อ-ppr-scg.astro
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
-          <div class="order-2 lg:order-1">
+          <div class="">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ PPR ตราช้าง (SCG)</h1>
             <p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
               </a>
             </div>
           </div>
-          <div class="order-1 lg:order-2">
+          <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/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" class="w-full" loading="eager" />
             </div>
           </div>
diff --git a/src/pages/ท่อ-ppr-thai-ppr.astro b/src/pages/ท่อ-ppr-thai-ppr.astro
index aad56fc..7e69bf1 100644
--- a/src/pages/ท่อ-ppr-thai-ppr.astro
+++ b/src/pages/ท่อ-ppr-thai-ppr.astro
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
-          <div class="order-2 lg:order-1">
+          <div class="">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ไทยพีพีอาร์ (Thai PPR)</h1>
             <p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
               </a>
             </div>
           </div>
-          <div class="order-1 lg:order-2">
+          <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/ppr-pipe_000C.jpg" alt="ไทยพีพีอาร์ (Thai PPR)" class="w-full" loading="eager" />
             </div>
           </div>
diff --git a/src/pages/ท่อ-syler.astro b/src/pages/ท่อ-syler.astro
index 266125d..66686f6 100644
--- a/src/pages/ท่อ-syler.astro
+++ b/src/pages/ท่อ-syler.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <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/syler-pipe-cold-water.jpg" alt="ท่อ Syler" 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">ท่อ Syler</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ Syler | ท่อเหล็กบุพีอี</h1>
             <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
diff --git a/src/pages/ท่อ-upvc.astro b/src/pages/ท่อ-upvc.astro
index 4832d21..3b703ac 100644
--- a/src/pages/ท่อ-upvc.astro
+++ b/src/pages/ท่อ-upvc.astro
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
-          <div class="order-2 lg:order-1">
+          <div class="">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span>
             <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ UPVC (Unplasticized Polyvinyl Chloride)</h1>
             <p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
               </a>
             </div>
           </div>
-          <div class="order-1 lg:order-2">
+          <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/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
             </div>
           </div>
diff --git a/src/pages/ระบบน้ำ.astro b/src/pages/ระบบน้ำ.astro
index c394294..9f9df3c 100644
--- a/src/pages/ระบบน้ำ.astro
+++ b/src/pages/ระบบน้ำ.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
   <main class="bg-white min-h-screen">
     <!-- Category 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>
diff --git a/src/pages/วาล์ว-valve.astro b/src/pages/วาล์ว-valve.astro
index 5015a69..53bbed4 100644
--- a/src/pages/วาล์ว-valve.astro
+++ b/src/pages/วาล์ว-valve.astro
@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <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>
diff --git a/src/pages/เครื่องเชื่อม-hdpe.astro b/src/pages/เครื่องเชื่อม-hdpe.astro
index 40c8d4d..d79e0f1 100644
--- a/src/pages/เครื่องเชื่อม-hdpe.astro
+++ b/src/pages/เครื่องเชื่อม-hdpe.astro
@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
   <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>
@@ -56,13 +56,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 bg-white/10">
               <img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full" 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">เครื่องเชื่อมท่อ HDPE</h1>
             <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
diff --git a/src/pages/เครื่องเชื่อม-ppr.astro b/src/pages/เครื่องเชื่อม-ppr.astro
index 7fdc7a9..7c3a914 100644
--- a/src/pages/เครื่องเชื่อม-ppr.astro
+++ b/src/pages/เครื่องเชื่อม-ppr.astro
@@ -9,7 +9,7 @@ import Footer from '@/components/common/Footer.astro';
 
   <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>