feat(pages): Bento Grid redesign across all pages

Apply Bento Grid + decorative parallax orb system from about.astro
to all remaining pages (home, services, portfolio, faq, contact,
terms, privacy, blog list, blog detail, services detail).

Layout changes (consistent across all pages):
- Main content sections use <BentoGrid> + <BentoTile>
- 2-3 <DecoOrb> per page for decorative parallax (no parallax blobs
  behind text — orbs are pure decoration, z-index: 0, pointer-events: none)
- Surface variants: white, soft, yellow, purple-soft, teal, mint, dark
  (rotated across pages for visual variety)
- Asymmetric span strategy (8+4, 7+5, 6+6) instead of flat grids
- Process sections use clean 4x1 grid
- Pull quote + yellow CTA kept as-is (standalone sections)

Content rules preserved:
- All Thai content kept verbatim
- No fabricated statistics
- No emoji icons (use text numerals 01 02 03 04)
- All design tokens from global.css (no hardcoded hex)
- Existing global classes (.container, .section, .btn, .section-badge,
  .section-title, .cta-section, etc.) reused — no design system break

Build verified: 22 pages built in 1.80s, no errors.

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/privacy.astro

@@ -3,6 +3,9 @@ import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 ---
 
 <Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
@@ -14,42 +17,63 @@ import PageHero from '../components/PageHero.astro';
     subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
   />
 
-  <section class="section legal-section">
-    <div class="container">
-      <div class="legal-content">
-        <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
+  <section class="section section-bento legal-section">
+    <DecoOrb color="purple" size="450px" speed={0.3} position={{ top: '-100px', left: '-150px' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', right: '-100px' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="นโยบายความเป็นส่วนตัว">
+          <div class="legal-body">
+            <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
 
-        <div class="legal-block">
-          <h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
-          <p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
-          <ul>
-            <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
-            <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
-            <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
-          </ul>
-        </div>
+            <div class="legal-block">
+              <h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
+              <p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
+              <ul>
+                <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
+                <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
+                <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
+              </ul>
+            </div>
 
-        <div class="legal-block">
-          <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
-          <p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
-          <ul>
-            <li>เพื่อให้บริการและดูแลลูกค้า</li>
-            <li>เพื่อติดต่อสื่อสารกับท่าน</li>
-            <li>เพื่อปรับปรุงการให้บริการ</li>
-            <li>เพื่อปฏิบัติตามกฎหมาย</li>
-          </ul>
-        </div>
+            <div class="legal-block">
+              <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
+              <p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
+              <ul>
+                <li>เพื่อให้บริการและดูแลลูกค้า</li>
+                <li>เพื่อติดต่อสื่อสารกับท่าน</li>
+                <li>เพื่อปรับปรุงการให้บริการ</li>
+                <li>เพื่อปฏิบัติตามกฎหมาย</li>
+              </ul>
+            </div>
 
-        <div class="legal-block">
-          <h2>3. การคุ้มครองข้อมูล</h2>
-          <p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
-        </div>
+            <div class="legal-block">
+              <h2>3. การคุ้มครองข้อมูล</h2>
+              <p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
+            </div>
 
-        <div class="legal-block">
-          <h2>4. สิทธิของท่าน</h2>
-          <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
-        </div>
-      </div>
+            <div class="legal-block">
+              <h2>4. สิทธิของท่าน</h2>
+              <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
+            </div>
+          </div>
+        </BentoTile>
+
+        <BentoTile span={4} surface="purple-soft" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
+          <div class="aside-body">
+            <p><strong>ชื่อเอกสาร:</strong> นโยบายความเป็นส่วนตัว</p>
+            <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
+            <p><strong>จัดการโดย:</strong> MoreminiMore Co.,Ltd.</p>
+            <p style="margin-top: 20px;"><strong>หัวข้อทั้งหมด 4 ข้อ:</strong></p>
+            <ol class="toc-list">
+              <li>ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</li>
+              <li>วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</li>
+              <li>การคุ้มครองข้อมูล</li>
+              <li>สิทธิของท่าน</li>
+            </ol>
+          </div>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
@@ -58,28 +82,36 @@ import PageHero from '../components/PageHero.astro';
 
 <style>
   .legal-section { background: var(--color-white); }
-  .legal-content { max-width: 800px; margin: 0 auto; }
+  .section-bento { position: relative; overflow: hidden; }
+
+  /* Body typography inside the prose tile */
+  .legal-body { font-size: 16px; line-height: 1.8; color: var(--color-gray-700); }
   .legal-intro {
-    font-size: 18px;
+    font-size: 17px;
     color: var(--color-gray-700);
-    margin-bottom: 48px;
+    margin-bottom: 36px;
     line-height: 1.7;
+    padding-bottom: 28px;
+    border-bottom: 1px solid var(--color-gray-200);
   }
-  .legal-block { margin-bottom: 48px; }
+  .legal-block { margin-bottom: 36px; }
+  .legal-block:last-child { margin-bottom: 0; }
   .legal-block h2 {
     font-family: var(--font-display);
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 800;
-    margin-bottom: 20px;
+    margin-bottom: 14px;
     color: var(--color-black);
   }
   .legal-block p {
     font-size: 16px;
     color: var(--color-gray-700);
     line-height: 1.8;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
+  }
+  .legal-block ul {
+    margin: 12px 0 12px 24px;
   }
-  .legal-block ul { margin-left: 24px; margin-bottom: 16px; }
   .legal-block li {
     font-size: 16px;
     color: var(--color-gray-700);
@@ -87,4 +119,56 @@ import PageHero from '../components/PageHero.astro';
     margin-bottom: 8px;
   }
   .legal-block strong { color: var(--color-black); }
+
+  /* Aside (purple-soft tile) */
+  .aside-body {
+    font-size: 15px;
+    line-height: 1.7;
+    color: var(--color-black);
+  }
+  .aside-body p { margin-bottom: 10px; }
+  .aside-body strong { font-weight: 800; }
+  .toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    counter-reset: toc;
+  }
+  .toc-list li {
+    counter-increment: toc;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    font-weight: 600;
+    position: relative;
+    padding-left: 36px;
+  }
+  .toc-list li::before {
+    content: counter(toc, decimal-leading-zero);
+    position: absolute;
+    left: 0;
+    top: 10px;
+    font-family: var(--font-display);
+    font-weight: 900;
+    opacity: 0.6;
+  }
+  .toc-list li:last-child { border-bottom: none; }
+
+  @media (max-width: 640px) {
+    .legal-intro { font-size: 16px; }
+    .legal-block h2 { font-size: 20px; }
+  }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>