Fix hero section structure across all product pages

Changes:
- Section class: relative now first, 3-stop gradient (from-primary-800 via-primary-700 to-primary-900)
- Added py-16 lg:py-24 padding
- Added relative z-10 to content wrapper
- All 22 product pages standardized

Reference: armflex.astro hero section structure

src/pages/realflex.astro

@@ -26,7 +26,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
 
   <main class="bg-white min-h-screen pb-24 md:pb-0">
     <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative 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">
@@ -217,7 +217,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
     </section>
 
     <!-- Contact CTA -->
-    <section class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative 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">
       <div class="max-w-4xl mx-auto">
         <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
         <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>