<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>aioMax — ตัวจริงผู้ช่วยการลงทุน | หุ้นปันผล</title>
  <meta name="description" content="aioMax — ตัวจริงผู้ช่วยการลงทุน · MaX Chat · VPort · Port · Dividend โดยทีมงานหุ้นปันผล" />
  <meta name="keywords" content="aioMax, หุ้นปันผล, ผู้ช่วยการลงทุน, MaX Chat, VPort, Port Intelligent, Dividend, นักลงทุน, หุ้นไทย" />
  <meta name="author" content="หุ้นปันผล (Panphol)" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://panphol.com/" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="aioMax by หุ้นปันผล" />
  <meta property="og:title" content="aioMax — ตัวจริงผู้ช่วยการลงทุน" />
  <meta property="og:description" content="aioMax — ตัวจริงผู้ช่วยการลงทุน · MaX Chat · VPort · Port · Dividend โดยทีมงานหุ้นปันผล" />
  <meta property="og:url" content="https://panphol.com/" />
  <meta property="og:image" content="https://panphol.com/assets/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:locale" content="th_TH" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="aioMax — ตัวจริงผู้ช่วยการลงทุน" />
  <meta name="twitter:description" content="aioMax — ตัวจริงผู้ช่วยการลงทุน · MaX Chat · VPort · Port · Dividend โดยทีมงานหุ้นปันผล" />
  <meta name="twitter:image" content="https://panphol.com/assets/og-image.png" />

  <!-- Theme / Mobile -->
  <meta name="theme-color" content="#162984" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="aioMax" />
  <link rel="manifest" href="manifest.webmanifest" />

  <!-- Favicon / App Icons (assets/logo_aiomax.png) -->
  <link rel="icon" href="assets/favicon/favicon.ico" sizes="any" />
  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="assets/favicon/favicon-48x48.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700;800&amp;family=Sarabun:wght@400;500;600;700&amp;display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/landing.css?eeee" />
</head>
<body>
  <header class="nav" id="nav">
    <a class="nav-brand-group" href="#origin" aria-label="aioMax by หุ้นปันผล">
      <span class="logo aio-brand-logo">aioMax</span>
      <span class="nav-brand-divider" aria-hidden="true"></span>
      <img class="nav-panphol-logo" src="assets/logo_panphol.png" alt="หุ้นปันผล" />
    </a>
    <button type="button" class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navRight">
      <span class="nav-toggle-dots" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="nav-toggle-label">เมนู</span>
    </button>
    <div class="nav-right" id="navRight">
      <a class="nav-link" href="#origin">ปฐมบท</a>
      <a class="nav-link" href="#maxchat">MaX Chat</a>
      <a class="nav-link" href="#infograph">Infographic</a>
      <a class="nav-link" href="#vport">MaX VPort</a>
      <a class="nav-link" href="#portint">Port Intelligent</a>
      <a class="nav-link" href="#divint">Dividend</a>
      <a class="nav-link" href="#realmax">ตัวจริง</a>
      <a class="nav-link" href="#compare">ทำไมดี</a>
      <a class="nav-link" href="#classroom">ห้องเรียน</a>
      <a class="nav-link" href="#activities">กิจกรรม</a>
      <a class="nav-link" href="#about">เกี่ยวกับเรา</a>
      <a class="nav-cta" href="https://aiomax.panphol.com" target="_blank" rel="noopener">ทดลองใช้</a>
    </div>
    <div class="nav-scrim" id="navScrim"></div>
  </header>

  <main>

<!--
      Section 00 — ปฐมบท (Origin)
      คลังเอกสาร 1,000,000+ ชุด · ticker ประเภทไฟล์วิ่งต่อเนื่อง
      ตัวเลขล้นจอ → รวมตัว 7+ หลัก / เทียบถึง 100,000,000 records
    -->
    <section class="origin px-section" id="origin" data-px-section aria-labelledby="origin-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--violet px-layer" data-px="-0.28" data-px-fade="soft"></span>
        <span class="px-orb px-orb--navy px-layer" data-px="0.18" data-px-fade="soft"></span>
      </div>
      <div class="origin-inner">
        <div class="px-layer" data-px="0.08" data-px-fade="copy">
          <p class="origin-kicker">ปฐมบท</p>
          <h2 class="origin-title" id="origin-title">
            <span>คลังเอกสาร</span>
            <span class="origin-title-em">อัพเดทตลอดเวลา</span>
          </h2>
          <p class="origin-lead">
            PDF · Excel · One Report · งบ · ปันผล · 10-K · 10-Q · 8-K
          </p>

          <div class="origin-ticker" aria-hidden="true">
            <div class="origin-ticker-track" id="originTicker"></div>
          </div>
        </div>

        <!-- ดาว abstract + ตู้สะสมเรียงต่อเนื่อง (จางๆ เบื้องหลังตัวเลข) -->
        <div class="origin-stage" id="originStage">
          <div class="origin-cabinet-scene px-layer" id="originCabinetScene" aria-hidden="true" data-px="-0.2" data-px-fade="bg">
            <div class="origin-stars" id="originStars"></div>
            <div class="origin-cabinets" id="originCabinets"></div>
            <div class="origin-fly-layer" id="originFlyLayer"></div>
          </div>

          <div class="origin-stats px-layer" id="originStats" aria-live="off" data-px="0.14" data-px-fade="stage">
            <div class="origin-stat">
              <div class="origin-stat-num" id="originDocs">—</div>
              <div class="origin-stat-label">เอกสาร</div>
            </div>
            <div class="origin-stat origin-stat--accent">
              <div class="origin-stat-num" id="originRecs">—</div>
              <div class="origin-stat-label">Records</div>
            </div>
          </div>
        </div>
      </div>
    </section>

<!--
      Section 02 — MaX Chat
      Layout inspired by Apple chapter pattern (iPhone 17 “การออกแบบ”):
      small label · dual headline · big media stage · clickable feature tabs · caption
      Interactive: ACK Knowledge / ProjectX demos inside iMac
    -->
    <section class="maxchat px-section" id="maxchat" data-px-section aria-labelledby="maxchat-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.22" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.16" data-px-fade="soft"></span>
      </div>
      <div class="s2-copy px-layer" data-px="0.12" data-px-fade="copy">
        <p class="s2-label">MaX Chat</p>
        <h2 class="s2-headline" id="maxchat-title">
          <span>คุยได้ เชื่อถือได้</span>
          <span>แหล่งชัดทุกคำตอบ</span>
        </h2>
      </div>

      <div class="s2-gallery">
        <div class="s2-media px-layer" id="s2Media" data-px="-0.08" data-px-fade="stage">
          <nav class="s2-tabs" id="promptChips" role="tablist" aria-label="ไฮไลต์ MaX Chat">
            <button type="button" class="s2-tab is-on" role="tab" aria-selected="true" data-demo="analyze">
              <span class="s2-tab-num" aria-hidden="true">01</span>
              <span class="s2-tab-label">วิเคราะห์หุ้น</span>
            </button>
            <button type="button" class="s2-tab" role="tab" aria-selected="false" data-demo="projectx">
              <span class="s2-tab-num" aria-hidden="true">02</span>
              <span class="s2-tab-label">คำนวณราคา</span>
            </button>
            <button type="button" class="s2-tab" role="tab" aria-selected="false" data-demo="news">
              <span class="s2-tab-num" aria-hidden="true">03</span>
              <span class="s2-tab-label">ข่าววันนี้</span>
            </button>
            <button type="button" class="s2-tab" role="tab" aria-selected="false" data-demo="trust">
              <span class="s2-tab-num" aria-hidden="true">04</span>
              <span class="s2-tab-label">แหล่งข้อมูล</span>
            </button>
          </nav>

          <div class="s2-stage" id="deskScene">
            <div class="imac" aria-label="iMac แสดง MaX Chat">
              <div class="imac-bezel">
                <div class="imac-camera" aria-hidden="true"></div>
                <div class="imac-screen" id="macScreen">
                  <div class="chat-app" id="chatApp">
                    <header class="chat-top">
                      <div class="chat-top-left">
                        <span class="chat-dot"></span>
                        <div>
                          <div class="chat-app-name">MaX Chat</div>
                          <div class="chat-app-meta" id="chatMeta">Deep Analysis · Trust mode</div>
                        </div>
                      </div>
                      <span class="chat-trust-badge" id="chatBadge">Trusted sources</span>
                    </header>
                    <div class="chat-stream" id="chatStream" aria-live="polite"></div>
                    <div class="chat-composer" aria-hidden="true">
                      <span class="chat-composer-ph">ถาม MaX Chat…</span>
                      <span class="chat-composer-send">↑</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="imac-chin" aria-hidden="true">
                <span class="imac-mark">aioMax</span>
              </div>
              <div class="imac-neck" aria-hidden="true"></div>
              <div class="imac-foot" aria-hidden="true"></div>
            </div>

            <div class="trust-rail" id="trustRail">
              <div class="trust-flow" aria-hidden="true">
                <span class="trust-flow-line"></span>
                <span class="trust-flow-dot"></span>
                <span class="trust-flow-dot"></span>
                <span class="trust-flow-dot"></span>
              </div>
              <p class="trust-rail-kicker" id="trustRailKicker">แหล่งข้อมูล Trust · ตรวจย้อนได้</p>
              <div class="trust-grid" id="fileOrbit">
                <div class="tchip" data-kind="pdf" data-tags="analyze,news,trust" style="--i:0">
                  <span class="tchip-ico tchip-ico--pdf">PDF</span>
                  <span class="tchip-name">MD&amp;A</span>
                </div>
                <div class="tchip" data-kind="pdf" data-tags="analyze,trust" style="--i:1">
                  <span class="tchip-ico tchip-ico--pdf">PDF</span>
                  <span class="tchip-name">56-1</span>
                </div>
                <div class="tchip" data-kind="pdf" data-tags="analyze,trust" style="--i:2">
                  <span class="tchip-ico tchip-ico--pdf">PDF</span>
                  <span class="tchip-name">OppDay</span>
                </div>
                <div class="tchip" data-kind="xlsx" data-tags="projectx,trust" style="--i:3">
                  <span class="tchip-ico tchip-ico--xlsx">XLSX</span>
                  <span class="tchip-name">งบ</span>
                </div>
                <div class="tchip" data-kind="word" data-tags="analyze,trust" style="--i:4">
                  <span class="tchip-ico tchip-ico--word">DOC</span>
                  <span class="tchip-name">IAA</span>
                </div>
                <div class="tchip" data-kind="xlsx" data-tags="projectx,news,trust" style="--i:5">
                  <span class="tchip-ico tchip-ico--xlsx">XLSX</span>
                  <span class="tchip-name">SET</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <p class="s2-caption px-layer" id="s2Caption" data-px="0.1" data-px-fade="copy">
          ถามวิเคราะห์หุ้น — ระบบเปิด <strong>ACK Knowledge Skill</strong>
          ดึงจาก MD&amp;A · OppDay · One Report · งบการเงิน
        </p>
      </div>
    </section>

<!--
      Section 03 — Stock Infographic
      Apple iPhone 17 “กล้อง” chapter pattern:
      small label · elevated headline · body · one media gallery card
      (prompt as caption · image frame changes like Center Stage)
    -->
    <section class="infograph px-section" id="infograph" data-px-section aria-labelledby="ig-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.18" data-px-fade="soft"></span>
      </div>
      <div class="ig-copy px-layer" data-px="0.11" data-px-fade="copy">
        <p class="ig-label">Infographic</p>
        <h2 class="ig-headline" id="ig-title">
          <span>Stock Infographic</span>
          <span>ชัดเลยว่าข้อมูลเดิมๆ เปลี่ยนไปเลย</span>
        </h2>
        <p class="ig-body">
          ถามใน MaX Chat ด้วยประโยคสั้นๆ แล้วได้แผ่นสรุปหุ้นเป็นภาพ
          — อ่านง่าย เห็นภาพในจังหวะเดียว
        </p>
      </div>

      <div class="ig-gallery px-layer" data-px="-0.1" data-px-fade="stage">
        <p class="ig-prompt" id="igPrompt">สรุปภาพรวมหุ้น PTT ให้หน่อย</p>

        <div class="ig-carousel" id="igCarousel">
          <button type="button" class="ig-nav ig-nav--prev" id="igPrev" aria-label="ก่อนหน้า">
            <span aria-hidden="true">‹</span>
          </button>

          <div class="ig-viewport" id="igViewport">
            <div class="ig-track" id="igTrack" aria-live="polite">
              <!-- slides filled by JS -->
            </div>
          </div>

          <button type="button" class="ig-nav ig-nav--next" id="igNext" aria-label="ถัดไป">
            <span aria-hidden="true">›</span>
          </button>
        </div>

        <div class="ig-dots" id="igDots" role="tablist" aria-label="ตัวอย่าง infographic"></div>
      </div>
    </section>

<!--
      Section 04 — MaX VPort · Auto Trade live equity
      Full-bleed chart · line grows point-by-point forever (no end)
    -->
    <section class="vport px-section" id="vport" data-px-section aria-labelledby="vport-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.24" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.14" data-px-fade="soft"></span>
      </div>
      <div class="vp-copy px-layer" data-px="0.1" data-px-fade="copy">
        <p class="vp-label">MaX VPort</p>
        <h2 class="vp-headline" id="vport-title">
          <span>พอร์ตที่ทำงานให้</span>
          <span>หลายเส้น เดินพร้อมกัน</span>
        </h2>
      </div>

      <div class="vp-stage is-drawn px-layer" id="vpStage" data-px="-0.12" data-px-fade="stage">
        <div class="vp-stage-top">
          <div class="vp-metric">
            <span class="vp-metric-label" id="vpMetricLabel">มูลค่าพอร์ต</span>
            <span class="vp-metric-val" id="vpMetricVal">1,000,000</span>
            <span class="vp-metric-delta is-up" id="vpMetricDelta">+0.0%</span>
          </div>
          <div class="vp-stats" id="vpStats" aria-live="polite">
            <div class="vp-stat">
              <span class="vp-stat-k">ต้นทุน DCA</span>
              <strong class="vp-stat-v" id="vpCost">฿0</strong>
            </div>
            <div class="vp-stat vp-stat--div" id="vpStatDiv">
              <span class="vp-stat-k">ปันผลสะสม</span>
              <strong class="vp-stat-v" id="vpDivTotal">฿0</strong>
              <span class="vp-stat-delta is-up" id="vpDivDelta" hidden></span>
            </div>
            <div class="vp-stat vp-stat--profit" id="vpStatProfit">
              <span class="vp-stat-k">กำไร</span>
              <strong class="vp-stat-v" id="vpProfit">฿0</strong>
              <span class="vp-stat-delta" id="vpProfitDelta" hidden></span>
            </div>
            <div class="vp-stat">
              <span class="vp-stat-k">Win / Loss</span>
              <strong class="vp-stat-v" id="vpWL">0 / 0</strong>
            </div>
          </div>
        </div>

        <div class="vp-chart-wrap" id="vpChartWrap">
          <svg class="vp-chart" id="vpChart" viewBox="0 0 1440 420" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">
            <defs>
              <linearGradient id="vpFill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7C3AED" stop-opacity="0.22" />
                <stop offset="55%" stop-color="#162984" stop-opacity="0.07" />
                <stop offset="100%" stop-color="#162984" stop-opacity="0" />
              </linearGradient>
              <filter id="vpGlow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="3" result="b" />
                <feMerge>
                  <feMergeNode in="b" />
                  <feMergeNode in="SourceGraphic" />
                </feMerge>
              </filter>
            </defs>
            <g class="vp-grid" id="vpGrid"></g>
            <g class="vp-axes" id="vpAxes"></g>
            <g class="vp-axis-labels" id="vpAxisLabels"></g>
            <!-- MaX FIRM overlays: sell target / trail / zone -->
            <g class="vp-firm-layer" id="vpFirmLayer"></g>
            <path class="vp-area" id="vpArea" fill="url(#vpFill)" d="" />
            <path class="vp-line vp-line--wl" id="vpLineWl" fill="none" stroke-linecap="round" stroke-linejoin="round" d="" />
            <path class="vp-line vp-line--div" id="vpLineDiv" fill="none" stroke-linecap="round" stroke-linejoin="round" d="" />
            <path class="vp-line vp-line--dca" id="vpLineDca" fill="none" stroke-linecap="round" stroke-linejoin="round" d="" />
            <path class="vp-line vp-line--eq" id="vpLine" fill="none" stroke-linecap="round" stroke-linejoin="round" d="" />
            <!-- Auto Trade event marks on the equity line -->
            <g class="vp-event-marks" id="vpEventMarks"></g>
            <circle class="vp-tip" id="vpTip" cx="0" cy="0" r="5.5" filter="url(#vpGlow)" />
            <circle class="vp-tip-ring" id="vpTipRing" cx="0" cy="0" r="11" />
          </svg>
          <!-- Event badges anchored to marks on chart, then fade out -->
          <div class="vp-badges" id="vpBadges" aria-live="polite"></div>

          <!-- MaX FIRM · แถวเดียวบน chart · กดยืนยันแล้ววนไอเดียใหม่ -->
          <div class="vp-firm-bar" id="vpFirmBar">
            <span class="vp-firm-badge">MaX FIRM</span>
            <span class="vp-firm-msg" id="vpFirmMsg" aria-live="polite">ขาขึ้น · ปรับจุดขายเพิ่มไหม?</span>
            <button type="button" class="vp-firm-go" id="vpFirmGo">ยืนยัน</button>
          </div>
        </div>

        <div class="vp-legend" id="vpLegend" aria-hidden="true">
          <span><i class="vp-swatch vp-swatch--eq"></i>Auto Trade</span>
          <span><i class="vp-swatch vp-swatch--dca"></i>DCA</span>
          <span><i class="vp-swatch vp-swatch--div"></i>ปันผล</span>
          <span><i class="vp-swatch vp-swatch--wl"></i>Winloss</span>
          <span class="vp-live"><i class="vp-live-dot"></i>Live</span>
        </div>
      </div>

      <p class="vp-note px-layer" data-px="0.06" data-px-fade="copy">
        ตัวอย่างภาพเคลื่อนไหวเพื่อเล่าผลิตภัณฑ์ · ไม่ใช่ผลตอบแทนจริงหรือการันตี
      </p>
    </section>

<!--
      Section 05 — MaX Port Intelligent
      Apple chapter: label · dual headline · body · product stage
      Visual: portfolio shell + Port AI assistant (from port_mockup)
      Motion: auto cycle วางแผน → ปรับ → ปันผล/passive income → ผู้ช่วย
    -->
    <section class="portint px-section" id="portint" data-px-section aria-labelledby="portint-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.2" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-teal px-layer" data-px="0.15" data-px-fade="soft"></span>
      </div>
      <div class="pi-copy px-layer" data-px="0.11" data-px-fade="copy">
        <p class="pi-label">MaX Port Intelligent</p>
        <h2 class="pi-headline" id="portint-title">
          <span>วางแผน จัดพอร์ต ปรับพอร์ต</span>
          <span>ผู้ช่วยอัจฉริยะตลอดทาง</span>
        </h2>
        <p class="pi-body">
          วิเคราะห์ วางแผน และปรับสัดส่วนด้วยผู้ช่วยส่วนตัว —
          รู้ปันผลทั้งปี วางแผน passive income ได้ง่าย สะดวกสบาย
        </p>
      </div>

      <div class="pi-gallery px-layer" data-px="-0.09" data-px-fade="stage">
        <nav class="pi-tabs" id="piTabs" role="tablist" aria-label="ไฮไลต์ Port Intelligent">
          <button type="button" class="pi-tab is-on" role="tab" aria-selected="true" data-pi="plan">
            <span class="pi-tab-num" aria-hidden="true">01</span>
            <span class="pi-tab-label">วางแผนพอร์ต</span>
          </button>
          <button type="button" class="pi-tab" role="tab" aria-selected="false" data-pi="rebalance">
            <span class="pi-tab-num" aria-hidden="true">02</span>
            <span class="pi-tab-label">ปรับพอร์ต</span>
          </button>
          <button type="button" class="pi-tab" role="tab" aria-selected="false" data-pi="dividend">
            <span class="pi-tab-num" aria-hidden="true">03</span>
            <span class="pi-tab-label">แผนปันผล</span>
          </button>
          <button type="button" class="pi-tab" role="tab" aria-selected="false" data-pi="assist">
            <span class="pi-tab-num" aria-hidden="true">04</span>
            <span class="pi-tab-label">ผู้ช่วยอัจฉริยะ</span>
          </button>
        </nav>

        <div class="pi-stage" id="piStage" data-scene="plan">
          <div class="pi-product" aria-label="ตัวอย่าง Port Intelligent">
            <!-- App chrome -->
            <header class="pi-chrome">
              <div class="pi-chrome-left">
                <span class="pi-brand">aioMax</span>
                <span class="pi-chrome-sep" aria-hidden="true">›</span>
                <span class="pi-chrome-page">Port Intelligent</span>
              </div>
              <div class="pi-chrome-right">
                <span class="pi-live-pill"><i class="pi-live-dot" aria-hidden="true"></i>AI Online</span>
              </div>
            </header>

            <div class="pi-body-layout">
              <!-- Portfolio panel -->
              <div class="pi-port">
                <div class="pi-port-bar">
                  <span class="pi-port-name">📁 พอร์ตของฉัน</span>
                  <span class="pi-port-cnt" id="piPortCnt">4 ตัว</span>
                  <span class="pi-ai-btn" aria-hidden="true">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                      <path d="M12 3v2M12 19v2M5 12H3M21 12h-2M6.3 6.3l1.4 1.4M16.3 16.3l1.4 1.4M6.3 17.7l1.4-1.4M16.3 7.7l1.4-1.4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                      <circle cx="12" cy="12" r="3.5" stroke="currentColor" stroke-width="1.7"/>
                    </svg>
                    AI สรุปพอร์ต
                  </span>
                </div>

                <div class="pi-kpi" id="piKpi">
                  <div class="pi-kpi-card pi-kpi--cost">
                    <span class="pi-kpi-k">ทุน</span>
                    <strong class="pi-kpi-v" id="piKpiCost">฿1.20M</strong>
                  </div>
                  <div class="pi-kpi-card pi-kpi--mkt">
                    <span class="pi-kpi-k">มูลค่าตลาด</span>
                    <strong class="pi-kpi-v" id="piKpiMkt">฿1.34M</strong>
                  </div>
                  <div class="pi-kpi-card pi-kpi--pnl">
                    <span class="pi-kpi-k">PnL</span>
                    <strong class="pi-kpi-v is-up" id="piKpiPnl">+11.7%</strong>
                  </div>
                  <div class="pi-kpi-card pi-kpi--div">
                    <span class="pi-kpi-k">ปันผล/ปี</span>
                    <strong class="pi-kpi-v" id="piKpiDiv">฿38.2K</strong>
                  </div>
                </div>

                <div class="pi-mid">
                  <div class="pi-donut-wrap" aria-hidden="true">
                    <svg class="pi-donut" viewBox="0 0 120 120" id="piDonut">
                      <circle class="pi-donut-bg" cx="60" cy="60" r="42" />
                      <circle class="pi-donut-seg pi-seg--a" cx="60" cy="60" r="42" />
                      <circle class="pi-donut-seg pi-seg--b" cx="60" cy="60" r="42" />
                      <circle class="pi-donut-seg pi-seg--c" cx="60" cy="60" r="42" />
                      <circle class="pi-donut-seg pi-seg--d" cx="60" cy="60" r="42" />
                    </svg>
                    <div class="pi-donut-center">
                      <span class="pi-donut-n" id="piDonutN">4</span>
                      <span class="pi-donut-l">หุ้น</span>
                    </div>
                  </div>

                  <div class="pi-holdings" id="piHoldings">
                    <div class="pi-hold" data-sym="ADVANC" style="--w:32">
                      <span class="pi-hold-dot" style="--c:#7c3aed"></span>
                      <span class="pi-hold-sym">ADVANC</span>
                      <span class="pi-hold-w">32%</span>
                      <span class="pi-hold-pnl is-up">+8.2%</span>
                      <span class="pi-hold-act" data-act="hold">ถือ</span>
                    </div>
                    <div class="pi-hold" data-sym="PTT" style="--w:28">
                      <span class="pi-hold-dot" style="--c:#06b6d4"></span>
                      <span class="pi-hold-sym">PTT</span>
                      <span class="pi-hold-w">28%</span>
                      <span class="pi-hold-pnl is-up">+4.1%</span>
                      <span class="pi-hold-act" data-act="hold">ถือ</span>
                    </div>
                    <div class="pi-hold" data-sym="KTB" style="--w:22">
                      <span class="pi-hold-dot" style="--c:#10b981"></span>
                      <span class="pi-hold-sym">KTB</span>
                      <span class="pi-hold-w">22%</span>
                      <span class="pi-hold-pnl is-dn">−2.4%</span>
                      <span class="pi-hold-act" data-act="watch">เฝ้า</span>
                    </div>
                    <div class="pi-hold" data-sym="CPALL" style="--w:18">
                      <span class="pi-hold-dot" style="--c:#f59e0b"></span>
                      <span class="pi-hold-sym">CPALL</span>
                      <span class="pi-hold-w">18%</span>
                      <span class="pi-hold-pnl is-up">+12.5%</span>
                      <span class="pi-hold-act" data-act="add">สะสม</span>
                    </div>
                  </div>
                </div>

                <div class="pi-plan-card" id="piPlanCard">
                  <!-- Allocation mode (plan / rebalance / assist) -->
                  <div class="pi-alloc-mode" id="piAllocMode">
                    <div class="pi-plan-head">
                      <span class="pi-plan-badge" id="piPlanBadge">แผนพอร์ต</span>
                      <span class="pi-plan-goal" id="piPlanGoal">เติบโต + ปันผล</span>
                    </div>
                    <div class="pi-plan-bars" id="piPlanBars" aria-hidden="true">
                      <div class="pi-plan-row">
                        <span>เติบโต</span>
                        <div class="pi-bar"><i style="--p:40%"></i></div>
                        <em id="piBarGrowth">40%</em>
                      </div>
                      <div class="pi-plan-row">
                        <span>ปันผล</span>
                        <div class="pi-bar"><i style="--p:35%"></i></div>
                        <em id="piBarDiv">35%</em>
                      </div>
                      <div class="pi-plan-row">
                        <span>ป้องกัน</span>
                        <div class="pi-bar"><i style="--p:25%"></i></div>
                        <em id="piBarDef">25%</em>
                      </div>
                    </div>
                  </div>

                  <!-- Passive / recurring income mode -->
                  <div class="pi-income-mode" id="piIncomeMode" hidden>
                    <div class="pi-plan-head">
                      <span class="pi-plan-badge">Passive Income</span>
                      <span class="pi-plan-goal">รายได้หมุนเวียนจากปันผล</span>
                    </div>
                    <div class="pi-income-hero">
                      <div class="pi-income-year-block">
                        <span class="pi-income-k">ปันผลปีนี้คาดการณ์</span>
                        <strong class="pi-income-year" id="piIncomeYear">฿38,200</strong>
                      </div>
                      <div class="pi-income-month-block">
                        <span class="pi-income-k">เฉลี่ย / เดือน</span>
                        <strong class="pi-income-month" id="piIncomeMonth">฿3,183</strong>
                      </div>
                    </div>
                    <div class="pi-months" id="piMonths" aria-hidden="true">
                      <div class="pi-mo" data-m="1" style="--h:35%"><span>ม.ค.</span></div>
                      <div class="pi-mo" data-m="2" style="--h:18%"><span>ก.พ.</span></div>
                      <div class="pi-mo" data-m="3" style="--h:72%"><span>มี.ค.</span></div>
                      <div class="pi-mo" data-m="4" style="--h:28%"><span>เม.ย.</span></div>
                      <div class="pi-mo is-peak" data-m="5" style="--h:95%"><span>พ.ค.</span></div>
                      <div class="pi-mo" data-m="6" style="--h:22%"><span>มิ.ย.</span></div>
                      <div class="pi-mo" data-m="7" style="--h:40%"><span>ก.ค.</span></div>
                      <div class="pi-mo" data-m="8" style="--h:30%"><span>ส.ค.</span></div>
                      <div class="pi-mo is-peak" data-m="9" style="--h:88%"><span>ก.ย.</span></div>
                      <div class="pi-mo" data-m="10" style="--h:25%"><span>ต.ค.</span></div>
                      <div class="pi-mo" data-m="11" style="--h:55%"><span>พ.ย.</span></div>
                      <div class="pi-mo" data-m="12" style="--h:45%"><span>ธ.ค.</span></div>
                    </div>
                    <p class="pi-income-hint" id="piIncomeHint">
                      กระจาย XD ตลอดปี · วางแผน cashflow ได้ล่วงหน้า
                    </p>
                  </div>
                </div>
              </div>

              <!-- Port AI panel -->
              <aside class="pi-ai" aria-label="ผู้ช่วย Port AI">
                <header class="pi-ai-head">
                  <span class="pi-ai-orb" aria-hidden="true"></span>
                  <div>
                    <div class="pi-ai-title">Port AI</div>
                    <div class="pi-ai-meta" id="piAiMeta">ผู้ช่วยส่วนตัว · พร้อมวิเคราะห์</div>
                  </div>
                </header>
                <div class="pi-ai-stream" id="piAiStream" aria-live="polite"></div>
                <div class="pi-ai-chips" id="piAiChips" aria-hidden="true">
                  <span class="pi-chip">สรุปภาพรวม</span>
                  <span class="pi-chip">Rebalance</span>
                  <span class="pi-chip">แผนปันผล</span>
                </div>
                <div class="pi-ai-composer" aria-hidden="true">
                  <span class="pi-ai-ph">ถามเรื่องพอร์ต…</span>
                  <span class="pi-ai-send">↑</span>
                </div>
              </aside>
            </div>
          </div>
        </div>

        <p class="pi-caption" id="piCaption">
          ตั้งเป้าหมาย → ได้แผนสัดส่วน → ปรับพอร์ตตามคำแนะนำของ <strong>Port AI</strong>
        </p>
      </div>

      <p class="pi-note px-layer" data-px="0.06" data-px-fade="copy">
        ตัวอย่างภาพเคลื่อนไหวเพื่อเล่าผลิตภัณฑ์ · ไม่ใช่คำแนะนำการลงทุนหรือผลตอบแทนจริง
      </p>
    </section>

<!--
      Section 06 — MaX Dividend Intelligent
      Dividend Themes (from dividend_journey) · ข้อมูลล้านๆ ย่อยให้คลิกเดียว
    -->
    <section class="divint px-section" id="divint" data-px-section aria-labelledby="divint-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-teal px-layer" data-px="-0.22" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-violet px-layer" data-px="0.14" data-px-fade="soft"></span>
      </div>

      <div class="di-copy px-layer" data-px="0.1" data-px-fade="copy">
        <p class="di-label">MaX Dividend Intelligent</p>
        <h2 class="di-headline" id="divint-title">
          <span>Dividend Theme หลายแบบ</span>
          <span>คลิกเดียว ได้ภาพชัด</span>
        </h2>
        <p class="di-body">
          วิเคราะห์จากข้อมูลเป็นล้านๆ ย่อยให้เข้าใจง่ายสำหรับคุณ —
          เลือกธีมปันผลที่ใช่ แล้วเห็นผลลัพธ์ในคลิกเดียว
        </p>
      </div>

      <div class="di-gallery px-layer" data-px="-0.08" data-px-fade="stage">
        <div class="di-stage" id="diStage">
          <div class="di-product" aria-label="ตัวอย่าง MaX Dividend Intelligent">
            <header class="di-chrome">
              <div class="di-chrome-left">
                <span class="di-brand">aioMax</span>
                <span class="di-chrome-sep" aria-hidden="true">›</span>
                <span class="di-chrome-page">Dividend Intelligent</span>
              </div>
              <div class="di-chrome-right">
                <span class="di-data-pill">
                  <i class="di-data-dot" aria-hidden="true"></i>
                  <span id="diDataCount">1,000,000+</span> records
                </span>
              </div>
            </header>

            <div class="di-body-layout">
              <!-- Theme picker -->
              <div class="di-themes" id="diThemes" role="listbox" aria-label="Dividend Themes">
                <p class="di-themes-kicker">เลือก Dividend Theme · 13 แบบ</p>
                <button type="button" class="di-theme is-on" role="option" aria-selected="true" data-theme="hyh">
                  <span class="di-theme-ico" aria-hidden="true">↑</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">High Yield Hunters</span>
                    <span class="di-theme-desc">Yield สูงสุด · ประวัติจ่ายสม่ำเสมอ</span>
                  </span>
                  <span class="di-theme-yield">8.4%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="ari">
                  <span class="di-theme-ico" aria-hidden="true">★</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Dividend Aristocrats</span>
                    <span class="di-theme-desc">เพิ่มปันผลต่อเนื่อง ≥10 ปี</span>
                  </span>
                  <span class="di-theme-yield">3.2%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="mcf">
                  <span class="di-theme-ico" aria-hidden="true">▦</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Monthly Cashflow</span>
                    <span class="di-theme-desc">XD กระจาย 12 เดือน</span>
                  </span>
                  <span class="di-theme-yield">5.6%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="inf">
                  <span class="di-theme-ico" aria-hidden="true">◇</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Inflation Fighter</span>
                    <span class="di-theme-desc">เติบโตกำไร + ปันผลโต</span>
                  </span>
                  <span class="di-theme-yield">~7%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="ret">
                  <span class="di-theme-ico" aria-hidden="true">◎</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Retirement Portfolio</span>
                    <span class="di-theme-desc">รายได้ยามเกษียณ · ทนทาน</span>
                  </span>
                  <span class="di-theme-yield">~4%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="dv">
                  <span class="di-theme-ico" aria-hidden="true">◉</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Deep Value Dividend</span>
                    <span class="di-theme-desc">ถูกมูลค่า · Yield สูง</span>
                  </span>
                  <span class="di-theme-yield">7.2%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="ai">
                  <span class="di-theme-ico" aria-hidden="true">✦</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">AI Hidden Gems</span>
                    <span class="di-theme-desc">AI ค้นหาโอกาสปันผล</span>
                  </span>
                  <span class="di-theme-yield">AI 91</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="ftr">
                  <span class="di-theme-ico" aria-hidden="true">↗</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Future Trends Dividend</span>
                    <span class="di-theme-desc">ค้าปลีก · ไอที · แพทย์ · พลังงาน</span>
                  </span>
                  <span class="di-theme-yield">5.0%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="esg">
                  <span class="di-theme-ico" aria-hidden="true">❀</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">ESG Clean Energy</span>
                    <span class="di-theme-desc">ESG + พลังงานสะอาด</span>
                  </span>
                  <span class="di-theme-yield">5.3%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="slr">
                  <span class="di-theme-ico" aria-hidden="true">☀</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Solar Roof Trend</span>
                    <span class="di-theme-desc">โซลาร์รูฟ · โซลาร์ฟาร์ม</span>
                  </span>
                  <span class="di-theme-yield">5.1%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="dca">
                  <span class="di-theme-ico" aria-hidden="true">▣</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Data Center &amp; AI</span>
                    <span class="di-theme-desc">Data Center · AI · สายสัญญาณ</span>
                  </span>
                  <span class="di-theme-yield">5.5%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="bfq">
                  <span class="di-theme-ico" aria-hidden="true">⬡</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">Banking &amp; Finance Quality</span>
                    <span class="di-theme-desc">ธนาคาร · NPL ต่ำ · สำรองสูง</span>
                  </span>
                  <span class="di-theme-yield">6.5%</span>
                </button>
                <button type="button" class="di-theme" role="option" aria-selected="false" data-theme="dcap">
                  <span class="di-theme-ico" aria-hidden="true">↻</span>
                  <span class="di-theme-text">
                    <span class="di-theme-name">DCA Dividend Portfolio</span>
                    <span class="di-theme-desc">Large-cap · เหมาะ DCA</span>
                  </span>
                  <span class="di-theme-yield">5.8%</span>
                </button>
              </div>

              <!-- Result panel -->
              <div class="di-result" id="diResult">
                <div class="di-result-head">
                  <span class="di-result-badge">วิเคราะห์แล้ว</span>
                  <span class="di-result-title" id="diResultTitle">High Yield Hunters</span>
                </div>
                <p class="di-result-sub" id="diResultSub">
                  Yield &gt; 6% · Stability &gt; 70 · จ่ายสม่ำเสมอ 3+ ปี
                </p>

                <div class="di-metrics">
                  <div class="di-metric">
                    <span class="di-metric-k">Avg Yield</span>
                    <strong class="di-metric-v" id="diYield">8.4%</strong>
                  </div>
                  <div class="di-metric">
                    <span class="di-metric-k">หุ้นในธีม</span>
                    <strong class="di-metric-v" id="diCount">12</strong>
                  </div>
                  <div class="di-metric di-metric--accent">
                    <span class="di-metric-k">ปันผล/ปี*</span>
                    <strong class="di-metric-v" id="diAnnual">฿102,000</strong>
                  </div>
                  <div class="di-metric di-metric--accent">
                    <span class="di-metric-k">≈ ต่อเดือน</span>
                    <strong class="di-metric-v" id="diMonthly">฿8,500</strong>
                  </div>
                </div>

                <div class="di-calendar" aria-hidden="true">
                  <div class="di-cal-head">
                    <span>กระจาย XD รายเดือน</span>
                    <span class="di-cal-hint" id="diCalHint">คลิกธีม · เห็นกระแสเงิน</span>
                  </div>
                  <div class="di-cal-bars" id="diCalBars">
                    <div class="di-cal" style="--h:40%"><span>ม.ค.</span></div>
                    <div class="di-cal" style="--h:22%"><span>ก.พ.</span></div>
                    <div class="di-cal is-peak" style="--h:88%"><span>มี.ค.</span></div>
                    <div class="di-cal" style="--h:30%"><span>เม.ย.</span></div>
                    <div class="di-cal is-peak" style="--h:95%"><span>พ.ค.</span></div>
                    <div class="di-cal" style="--h:25%"><span>มิ.ย.</span></div>
                    <div class="di-cal" style="--h:45%"><span>ก.ค.</span></div>
                    <div class="di-cal" style="--h:28%"><span>ส.ค.</span></div>
                    <div class="di-cal is-peak" style="--h:90%"><span>ก.ย.</span></div>
                    <div class="di-cal" style="--h:20%"><span>ต.ค.</span></div>
                    <div class="di-cal" style="--h:55%"><span>พ.ย.</span></div>
                    <div class="di-cal" style="--h:35%"><span>ธ.ค.</span></div>
                  </div>
                </div>

                <div class="di-stocks" id="diStocks" aria-hidden="true">
                  <span class="di-stock">TISCO</span>
                  <span class="di-stock">LH</span>
                  <span class="di-stock">KTB</span>
                  <span class="di-stock">PTT</span>
                  <span class="di-stock">ADVANC</span>
                  <span class="di-stock">+7</span>
                </div>

                <p class="di-click-hint" id="diClickHint">
                  <span class="di-click-pulse" aria-hidden="true"></span>
                  คลิกธีมด้านซ้าย — หนึ่งคลิก เห็นภาพปันผลชัดขึ้น
                </p>
              </div>
            </div>
          </div>
        </div>

        <p class="di-caption" id="diCaption">
          เลือก <strong>Dividend Theme</strong> → ระบบย่อยข้อมูลล้านๆ รายการให้เหลือภาพที่อ่านจบในคลิกเดียว
        </p>
      </div>

      <p class="di-note px-layer" data-px="0.05" data-px-fade="copy">
        ตัวอย่างภาพเคลื่อนไหวเพื่อเล่าผลิตภัณฑ์ · ตัวเลขเป็นตัวอย่าง UI ไม่ใช่ผลตอบแทนจริง
      </p>
    </section>

<!--
      Section 07 — ตัวจริง aioMax (Apple iPhone 17 Performance-style)
      Big dual headline · phone mockups with real app UI · feature tabs
      Screens from docs/mobile-mockups/png
    -->
    <section class="realmax px-section" id="realmax" data-px-section aria-labelledby="realmax-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.2" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.16" data-px-fade="soft"></span>
      </div>

      <div class="rm-copy px-layer" data-px="0.1" data-px-fade="copy">
        <p class="rm-label">aioMax</p>
        <h2 class="rm-headline" id="realmax-title">
          <span>ตัวจริงผู้ช่วยการลงทุน</span>
          <span>ครบ จริง เชื่อถือได้</span>
        </h2>
        <p class="rm-body">
          ไม่ใช่แค่แชท — คือระบบลงทุนอัจฉริยะทั้งก้อน
          วิเคราะห์ จัดพอร์ต ปันผล และเส้นทางตลาด อยู่บนมือถือในจังหวะเดียว
        </p>
      </div>

      <div class="rm-gallery px-layer" data-px="-0.08" data-px-fade="stage">
        <nav class="rm-tabs" id="rmTabs" role="tablist" aria-label="ไฮไลต์ aioMax บนมือถือ">
          <button type="button" class="rm-tab is-on" role="tab" aria-selected="true" data-rm="home">
            <span class="rm-tab-num" aria-hidden="true">01</span>
            <span class="rm-tab-label">Journey</span>
          </button>
          <button type="button" class="rm-tab" role="tab" aria-selected="false" data-rm="chat">
            <span class="rm-tab-num" aria-hidden="true">02</span>
            <span class="rm-tab-label">MaX Chat</span>
          </button>
          <button type="button" class="rm-tab" role="tab" aria-selected="false" data-rm="port">
            <span class="rm-tab-num" aria-hidden="true">03</span>
            <span class="rm-tab-label">Port</span>
          </button>
          <button type="button" class="rm-tab" role="tab" aria-selected="false" data-rm="div">
            <span class="rm-tab-num" aria-hidden="true">04</span>
            <span class="rm-tab-label">Dividend</span>
          </button>
          <button type="button" class="rm-tab" role="tab" aria-selected="false" data-rm="vport">
            <span class="rm-tab-num" aria-hidden="true">05</span>
            <span class="rm-tab-label">VPort</span>
          </button>
        </nav>

        <div class="rm-stage" id="rmStage" data-screen="home">
          <!-- Side phone L -->
          <div class="rm-phone rm-phone--side rm-phone--l" aria-hidden="true">
            <div class="rm-phone-shell">
              <div class="rm-phone-island"></div>
              <div class="rm-phone-screen">
                <img id="rmImgL" src="assets/phones/c01-home-journey-market.png" alt="" width="390" height="844" loading="lazy" decoding="async" />
              </div>
            </div>
          </div>

          <!-- Center hero phone -->
          <div class="rm-phone rm-phone--hero" aria-label="aioMax บนมือถือ">
            <div class="rm-phone-shell">
              <div class="rm-phone-island"></div>
              <div class="rm-phone-screen">
                <img id="rmImgC" src="assets/phones/04-home.png" alt="aioMax Home Journey" width="390" height="844" loading="eager" decoding="async" />
              </div>
              <div class="rm-phone-home" aria-hidden="true"></div>
            </div>
            <p class="rm-phone-cap" id="rmPhoneCap">Journey · เห็นภาพตลาดและสิ่งที่ควรรู้ก่อนใคร</p>
          </div>

          <!-- Side phone R -->
          <div class="rm-phone rm-phone--side rm-phone--r" aria-hidden="true">
            <div class="rm-phone-shell">
              <div class="rm-phone-island"></div>
              <div class="rm-phone-screen">
                <img id="rmImgR" src="assets/phones/06-chat.png" alt="" width="390" height="844" loading="lazy" decoding="async" />
              </div>
            </div>
          </div>
        </div>

        <p class="rm-caption" id="rmCaption">
          <strong>aioMax</strong> — ตัวจริงที่รวม MaX Chat · VPort · Port · Dividend ไว้ในมือคุณ
        </p>
      </div>

      <div class="rm-proof px-layer" data-px="0.06" data-px-fade="copy">
        <div class="rm-proof-item">
          <strong>แหล่งชัด</strong>
          <span>อ้างอิงเอกสาร Trust · ตรวจย้อนได้</span>
        </div>
        <div class="rm-proof-item">
          <strong>ครบเส้นทาง</strong>
          <span>วิเคราะห์ · จัดพอร์ต · ปันผล · อัตโนมัติ</span>
        </div>
        <div class="rm-proof-item">
          <strong>อยู่กับคุณ</strong>
          <span>มือถือ · เว็บ · ผู้ช่วยตลอดทาง</span>
        </div>
      </div>

      <p class="rm-note">
        ภาพหน้าจอจาก mockup ผลิตภัณฑ์ · ตัวอย่าง UI เพื่อเล่าประสบการณ์ ไม่ใช่ผลตอบแทนจริง
      </p>
    </section>

<!--
      Section 08 — ทำไมใช้ aioMax ถึงดีที่สุด
      Apple Mac “Why buy at Apple” incentive · staggered cards + clean modal
    -->
    <section class="incentive px-section" id="compare" data-px-section aria-labelledby="inc-title">
      <div class="inc-copy px-layer" data-px="0.08" data-px-fade="copy">
        <h2 class="inc-headline" id="inc-title">
          ทำไมใช้ aioMax ถึงดีที่สุด
        </h2>
        <p class="inc-sub">
          ออกแบบเพื่อนักลงทุน — ครบ ชัด และพร้อมใช้จริงในที่เดียว
        </p>
      </div>

      <div class="inc-carousel-wrap px-layer" data-px="-0.04" data-px-fade="stage">
        <button type="button" class="inc-nav inc-nav--prev" id="incPrev" aria-label="ก่อนหน้า">
          <span aria-hidden="true">‹</span>
        </button>

        <div class="inc-track" id="incTrack" tabindex="0" aria-label="เหตุผลที่เลือก aioMax">
        <button type="button" class="inc-card" data-inc="trust">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><rect x="10" y="8" width="20" height="26" rx="3" stroke="currentColor" stroke-width="2"/><path d="M16 16h8M16 22h8M16 28h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="34" cy="32" r="8" fill="rgba(124,58,237,.12)" stroke="currentColor" stroke-width="2"/><path d="M31 32l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <h3 class="inc-card-title">แหล่งชัด ตรวจย้อนได้</h3>
          <p class="inc-card-text">อ้างอิงเอกสารจริงในระบบ ไม่สรุปแบบลอยๆ</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="data">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><ellipse cx="24" cy="14" rx="14" ry="6" stroke="currentColor" stroke-width="2"/><path d="M10 14v10c0 3.3 6.3 6 14 6s14-2.7 14-6V14" stroke="currentColor" stroke-width="2"/><path d="M10 24v10c0 3.3 6.3 6 14 6s14-2.7 14-6V24" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <h3 class="inc-card-title">คลังข้อมูลมหาศาล</h3>
          <p class="inc-card-text">1M+ เอกสาร · 100M+ records พร้อมวิเคราะห์</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="thai">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="14" stroke="currentColor" stroke-width="2"/><path d="M10 24h28M24 10c4 4.5 6 9 6 14s-2 9.5-6 14c-4-4.5-6-9-6-14s2-9.5 6-14z" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <h3 class="inc-card-title">เกิดมาเพื่อตลาดไทย</h3>
          <p class="inc-card-text">SET · ปันผล · งบไทย ออกแบบรอบนักลงทุนไทย</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="port">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><path d="M8 34V18l8 6 8-12 8 8 8-4v18H8z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="36" cy="14" r="4" fill="rgba(16,185,129,.2)" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <h3 class="inc-card-title">จากคุยสู่ลงมือได้</h3>
          <p class="inc-card-text">Port Intelligent วางแผน จัด ปรับพอร์ตต่อได้เลย</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="div">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><rect x="10" y="12" width="28" height="26" rx="4" stroke="currentColor" stroke-width="2"/><path d="M16 20h16M16 26h10M16 32h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M30 8v8M26 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </span>
          <h3 class="inc-card-title">ธีมปันผล 13 แบบ</h3>
          <p class="inc-card-text">คลิกเดียวเห็น yield · cashflow · ชุดหุ้น</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="auto">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><path d="M24 10v6M24 32v6M10 24h6M32 24h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="24" cy="24" r="8" stroke="currentColor" stroke-width="2"/><path d="M18 24h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </span>
          <h3 class="inc-card-title">พอร์ตที่ทำงานให้</h3>
          <p class="inc-card-text">VPort · DCA · Auto Trade · MaX FIRM</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="stack">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><rect x="8" y="10" width="32" height="8" rx="2" stroke="currentColor" stroke-width="2"/><rect x="8" y="20" width="32" height="8" rx="2" stroke="currentColor" stroke-width="2"/><rect x="8" y="30" width="32" height="8" rx="2" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <h3 class="inc-card-title">ครบเส้นทางในที่เดียว</h3>
          <p class="inc-card-text">Journey ถึง VPort — มือถือและเว็บ</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>

        <button type="button" class="inc-card" data-inc="guest">
          <span class="inc-icon" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="18" r="7" stroke="currentColor" stroke-width="2"/><path d="M10 38c2.5-7 8-10 14-10s11.5 3 14 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M34 14l4 2-2 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <h3 class="inc-card-title">เริ่มได้ง่าย</h3>
          <p class="inc-card-text">ทดลองใช้ · เรียนรู้ · ลึกขึ้นเมื่อพร้อม</p>
          <span class="inc-plus" aria-hidden="true">+</span>
        </button>
        </div>

        <button type="button" class="inc-nav inc-nav--next" id="incNext" aria-label="ถัดไป">
          <span aria-hidden="true">›</span>
        </button>
      </div>

      <div class="inc-dots" id="incDots" role="tablist" aria-label="สไลด์เหตุผล"></div>

      <p class="inc-foot">
        เลื่อนดูการ์ด · กดการ์ดหรือปุ่ม <strong>+</strong> เพื่ออ่านรายละเอียด
      </p>
    </section>

<!--
      Section 09 — Promotion package + closing CTA
    -->
    <section class="promo px-section" id="promo" data-px-section aria-labelledby="promo-title">
      <div class="promo-inner px-layer" data-px="0.06" data-px-fade="copy">
        <p class="promo-label">Promotion Package</p>
        <h2 class="promo-headline" id="promo-title">
          เริ่มต้นกับ aioMax ได้วันนี้
        </h2>
        <p class="promo-body">
          ทดลองใช้ฟีเจอร์หลักได้ทันที — วิเคราะห์ จัดพอร์ต ปันผล และ VPort
          ในประสบการณ์เดียว
        </p>
        <div class="promo-actions">
          <a class="promo-cta promo-cta--primary" href="https://aiomax.panphol.com" target="_blank" rel="noopener">
            ทดลองใช้
          </a>
          <a class="promo-cta promo-cta--ghost" href="https://aio.panphol.com/package" target="_blank" rel="noopener">
            ดูแพ็กเกจ
          </a>
        </div>
        <p class="promo-note">
          รายละเอียดแพ็กเกจและสิทธิประโยชน์ขึ้นกับเงื่อนไข ณ ช่วงเวลาที่ใช้งาน
        </p>
      </div>
    </section>

<!--
      Section — ห้องเรียนหุ้น (Classroom)
      แนะนำระบบเรียนออนไลน์ด้วยคำคม เน้นคุณสมบัติเด่นเชิงการศึกษา
      Feature cards grid - Apple chapter pattern
    -->
    <section class="classroom px-section" id="classroom" data-px-section aria-labelledby="classroom-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.2" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.14" data-px-fade="soft"></span>
      </div>

      <div class="cl-copy px-layer" data-px="0.1" data-px-fade="copy">
        <p class="cl-label">ห้องเรียนหุ้น</p>
        <h2 class="cl-headline" id="classroom-title">
          <span>เรียนรู้อย่างมีทิศทาง</span>
          <span>ลงทุนอย่างมั่นใจ</span>
        </h2>
        <p class="cl-body">
          ห้องเรียนที่ออกแบบมาเพื่อนักลงทุน — เรียนสด เรียนซ้ำ วัดผล
          และมีผู้ช่วย AI อยู่เคียงข้างตลอดเส้นทาง
        </p>
      </div>

      <div class="cl-stage px-layer" data-px="-0.06" data-px-fade="stage">

        <!-- YouTube Live-style mockup -->
        <div class="cl-mockup" aria-label="ตัวอย่างห้องเรียนสด">
          <header class="cl-mock-chrome">
            <div class="cl-mock-chrome-left">
              <span class="cl-mock-dot" style="--c:#ff5f57"></span>
              <span class="cl-mock-dot" style="--c:#ffbd2e"></span>
              <span class="cl-mock-dot" style="--c:#28c840"></span>
            </div>
            <span class="cl-mock-chrome-title">ห้องเรียนหุ้น — ProjectX</span>
            <span class="cl-mock-live"><i class="cl-live-dot" aria-hidden="true"></i>LIVE</span>
          </header>
          <div class="cl-mock-body">
            <div class="cl-mock-video">
              <!-- Studio Stage with Chart Board & Instructor Draft -->
              <div class="cl-vid-stage">
                <!-- Left: Holographic Stock Chart Board -->
                <div class="cl-vid-board">
                  <div class="cl-board-header">
                    <span class="cl-board-symbol">SET INDEX <strong>1,348.50</strong></span>
                    <span class="cl-board-change" id="clTickerChange">+12.40 (+0.93%) ▲</span>
                  </div>
                  <svg class="cl-vid-chart" id="clVidChart" viewBox="0 0 340 160" preserveAspectRatio="none" aria-hidden="true">
                    <defs>
                      <linearGradient id="clChartFill" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#7C3AED" stop-opacity="0.35"/>
                        <stop offset="100%" stop-color="#1E1B4B" stop-opacity="0"/>
                      </linearGradient>
                      <linearGradient id="clCandleGreen" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#34D399"/>
                        <stop offset="100%" stop-color="#10B981"/>
                      </linearGradient>
                      <linearGradient id="clCandleRed" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#F87171"/>
                        <stop offset="100%" stop-color="#EF4444"/>
                      </linearGradient>
                    </defs>
                    <!-- Background Grid -->
                    <g class="cl-chart-grid" opacity="0.12">
                      <line x1="0" y1="40" x2="340" y2="40" stroke="#fff" stroke-dasharray="3 3"/>
                      <line x1="0" y1="80" x2="340" y2="80" stroke="#fff" stroke-dasharray="3 3"/>
                      <line x1="0" y1="120" x2="340" y2="120" stroke="#fff" stroke-dasharray="3 3"/>
                    </g>
                    <!-- Candlesticks background layer -->
                    <g class="cl-chart-candles" id="clCandlesGroup" opacity="0.45">
                      <rect x="25" y="85" width="8" height="30" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="29" y1="75" x2="29" y2="125" stroke="#34D399" stroke-width="1.5"/>
                      <rect x="55" y="70" width="8" height="25" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="59" y1="60" x2="59" y2="105" stroke="#34D399" stroke-width="1.5"/>
                      <rect x="85" y="65" width="8" height="35" rx="1" fill="url(#clCandleRed)"/>
                      <line x1="89" y1="55" x2="89" y2="110" stroke="#F87171" stroke-width="1.5"/>
                      <rect x="115" y="80" width="8" height="20" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="119" y1="70" x2="119" y2="115" stroke="#34D399" stroke-width="1.5"/>
                      <rect x="145" y="55" width="8" height="32" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="149" y1="45" x2="149" y2="95" stroke="#34D399" stroke-width="1.5"/>
                      <rect x="175" y="60" width="8" height="28" rx="1" fill="url(#clCandleRed)"/>
                      <line x1="179" y1="50" x2="179" y2="100" stroke="#F87171" stroke-width="1.5"/>
                      <rect x="205" y="45" width="8" height="38" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="209" y1="35" x2="209" y2="90" stroke="#34D399" stroke-width="1.5"/>
                      <rect x="235" y="38" width="8" height="22" rx="1" fill="url(#clCandleGreen)"/>
                      <line x1="239" y1="28" x2="239" y2="70" stroke="#34D399" stroke-width="1.5"/>
                    </g>
                    <!-- Animated Wave & Area -->
                    <path class="cl-vid-area" id="clVidArea" fill="url(#clChartFill)" d=""/>
                    <path class="cl-vid-line" id="clVidLine" fill="none" d=""/>
                    <!-- Breakout Target Circle -->
                    <circle class="cl-chart-target" id="clChartTarget" cx="265" cy="45" r="6" fill="#A855F7" stroke="#fff" stroke-width="2"/>
                    <circle class="cl-chart-target-pulse" cx="265" cy="45" r="12" fill="none" stroke="#A855F7" stroke-width="1.5" opacity="0.8"/>
                  </svg>
                </div>

                <!-- Right: Animated Instructor Draft Illustration ("ภาพวาด อาจารย์ อจน.") -->
                <div class="cl-ins-draft" aria-label="ภาพวาด อาจารย์ อจน. กำลังบรรยาย">
                  <div class="cl-ins-glow"></div>
                  <!-- Speaking Voice Waves indicator -->
                  <div class="cl-ins-voice">
                    <span class="cl-v-bar b1"></span>
                    <span class="cl-v-bar b2"></span>
                    <span class="cl-v-bar b3"></span>
                    <span class="cl-v-bar b4"></span>
                  </div>
                  
                  <!-- High Quality Transparent 2D Digital Art Illustration of Instructor "อจน." -->
                  <div class="cl-ins-img-wrap">
                    <img src="assets/ojon_instructor_transparent.png" alt="ภาพวาด อาจารย์ อจน." class="cl-ins-img" />
                    
                    <!-- Animated Pointer Beam pointing dynamically at chart breakout target (Teaching Gesture!) -->
                    <div class="cl-ins-laser-pointer">
                      <svg viewBox="0 0 200 120" fill="none" class="cl-laser-svg" aria-hidden="true">
                        <line x1="165" y1="95" x2="15" y2="40" stroke="#34D399" stroke-width="2.5" stroke-dasharray="6 3" class="cl-laser-beam"/>
                        <circle cx="15" cy="40" r="5" fill="#34D399" class="cl-laser-dot"/>
                        <circle cx="15" cy="40" r="11" fill="none" stroke="#34D399" stroke-width="1.5" class="cl-laser-pulse"/>
                      </svg>
                    </div>
                  </div>

                  <!-- Instructor Name Tag ("อจน.") -->
                  <div class="cl-ins-tag">
                    <span class="ins-badge">ผู้สอนหลัก</span>
                    <span class="ins-name">อจน.</span>
                  </div>
                </div>
              </div>

              <!-- Top Studio & Viewer Overlay -->
              <div class="cl-vid-overlay">
                <div class="cl-vid-meta">
                  <span class="cl-vid-topic">บทที่ 2 — จิตวิทยาในการลงทุน</span>
                  <span class="cl-vid-viewers"><i class="cl-viewer-dot"></i>127 คนกำลังดูสด (Studio HD)</span>
                </div>
              </div>

              <!-- Bottom Player Controls -->
              <div class="cl-vid-controls">
                <span class="cl-ctrl-play" aria-hidden="true">▶</span>
                <span class="cl-ctrl-time">01:23:45 / 02:00:00</span>
                <span class="cl-ctrl-bar"><i class="cl-ctrl-progress"></i></span>
                <span class="cl-ctrl-full" aria-hidden="true">⛶</span>
              </div>
            </div>
            <div class="cl-mock-chat">
              <div class="cl-chat-head">
                <span class="cl-chat-mode is-on">แชทสด</span>
                <span class="cl-chat-mode">ความคิดเห็น</span>
              </div>
              <div class="cl-chat-stream" id="clChatStream"></div>
              <div class="cl-chat-composer">
                <span class="cl-chat-ph">พิมพ์ข้อความ…</span>
                <span class="cl-chat-send">↑</span>
              </div>
            </div>
          </div>
        </div>

        <div class="cl-grid">

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <rect x="6" y="10" width="36" height="24" rx="4" stroke="currentColor" stroke-width="2"/>
              <circle cx="24" cy="22" r="5" stroke="currentColor" stroke-width="2"/>
              <path d="M14 38h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <circle cx="36" cy="14" r="4" fill="rgba(239,68,68,.2)" stroke="currentColor" stroke-width="1.5"/>
              <circle cx="36" cy="14" r="1.5" fill="currentColor"/>
            </svg>
          </span>
          <h3 class="cl-card-title">เรียนสด ถามจริง ตอบทันที</h3>
          <p class="cl-card-quote">“อาจารย์อยู่ตรงหน้า — สงสัยตรงไหน ยกมือถามได้เลย”</p>
        </div>

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <circle cx="24" cy="24" r="14" stroke="currentColor" stroke-width="2"/>
              <path d="M20 18v12l10-6z" fill="rgba(124,58,237,.15)" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M10 24c-2-8 2-14 6-16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3"/>
            </svg>
          </span>
          <h3 class="cl-card-title">ย้อนดูกี่รอบก็ได้</h3>
          <p class="cl-card-quote">“ความรู้ไม่มีวันหมดอายุ — กลับมาดูซ้ำ จนเข้าใจทุกจังหวะ”</p>
        </div>

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <rect x="10" y="8" width="28" height="32" rx="4" stroke="currentColor" stroke-width="2"/>
              <path d="M18 18h12M18 24h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <circle cx="18" cy="32" r="3" fill="rgba(16,185,129,.15)" stroke="currentColor" stroke-width="1.5"/>
              <path d="M16.5 32l1 1 2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
          <h3 class="cl-card-title">วัดผลก่อนลงสนาม</h3>
          <p class="cl-card-quote">“รู้ว่าพร้อมแค่ไหน — ทดสอบความเข้าใจ ก่อนตัดสินใจจริง”</p>
        </div>

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <path d="M24 6l5 4h8v8l4 5-4 5v8h-8l-5 4-5-4H11v-8l-4-5 4-5v-8h8z" fill="rgba(245,158,11,.08)" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <circle cx="24" cy="23" r="5" stroke="currentColor" stroke-width="2"/>
              <path d="M24 28v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </span>
          <h3 class="cl-card-title">ใบรับรอง ความภาคภูมิใจ</h3>
          <p class="cl-card-quote">“เรียนจบ สอบผ่าน — ได้ใบประกาศนียบัตรยืนยันความรู้”</p>
        </div>

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <path d="M24 8l2.5 6 6.5.5-5 4.5 1.5 6.5L24 22l-5.5 3.5 1.5-6.5-5-4.5 6.5-.5z" fill="rgba(124,58,237,.1)" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M14 30c-2 2-3 5-3 8h26c0-3-1-6-3-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M20 34h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </span>
          <h3 class="cl-card-title">AI ที่เรียนไปด้วยกัน</h3>
          <p class="cl-card-quote">“MaX Chat อยู่ในห้องเรียน — เหมือนมีติวเตอร์ส่วนตัวตลอดเวลา”</p>
        </div>

        <div class="cl-card">
          <span class="cl-card-ico" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <circle cx="24" cy="24" r="14" stroke="currentColor" stroke-width="2"/>
              <ellipse cx="24" cy="24" rx="6" ry="14" stroke="currentColor" stroke-width="2"/>
              <path d="M10 24h28" stroke="currentColor" stroke-width="2"/>
              <path d="M12 18h24M12 30h24" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/>
            </svg>
          </span>
          <h3 class="cl-card-title">เรียนได้ ไม่จำกัดที่</h3>
          <p class="cl-card-quote">“ไม่ว่าจะอยู่ที่ไหน — เปิดเรียนได้ทุกเวลาที่พร้อม”</p>
        </div>

        </div>
      </div>

      <div class="cl-cta-wrap px-layer" data-px="0.06" data-px-fade="copy">
        <a class="cl-cta" href="https://cr.panphol.com" target="_blank" rel="noopener">
          เข้าห้องเรียน ›
        </a>
        <p class="cl-note">คอร์สเรียนสดและ e-Learning สำหรับนักลงทุนที่ต้องการพัฒนาตัวเอง</p>
      </div>
    </section>

    <!-- =========================================================
         CHAPTER 06 — กิจกรรม (ออกไปเห็นธุรกิจจริง)
         Company Visit & Executive Talk Carousel
         ========================================================= -->
    <section class="activities px-section" id="activities" data-px-section aria-labelledby="act-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.2" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.15" data-px-fade="soft"></span>
      </div>

      <div class="act-header px-layer" data-px="0.08" data-px-fade="copy">
        <div class="act-header-left">
          <p class="act-kicker">กิจกรรมและดูงานธุรกิจ</p>
          <h2 class="act-title" id="act-title">
            ออกไปเห็นธุรกิจจริง
          </h2>
          <p class="act-sub">
            การลงทุนไม่ได้จบที่หน้าจอ — เราพานักลงทุนไปดูโรงงาน คุยกับผู้บริหาร และเจอตัวจริงเสมอ
          </p>
        </div>
        <div class="act-header-right">
          <div class="act-nav-group">
            <button type="button" class="act-nav act-nav--prev" id="actPrev" aria-label="กิจกรรมก่อนหน้า">
              <span aria-hidden="true">‹</span>
            </button>
            <button type="button" class="act-nav act-nav--next" id="actNext" aria-label="กิจกรรมถัดไป">
              <span aria-hidden="true">›</span>
            </button>
          </div>
        </div>
      </div>

      <div class="act-carousel-wrap px-layer" data-px="-0.04" data-px-fade="stage">
        <div class="act-track" id="actTrack">
                                    <article class="act-card">
                <div class="act-card-media">
                  <span class="act-badge">Company Visit</span>
                                      <img src="https://aio.panphol.com/assets/images/community/730_92TBDX.png" alt="CV-Special - OSP พฤหัส 6 ก.พ. 10.00-12.00 น. อาคารสินธรทาวเวอร์" class="act-card-img" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'act-img-placeholder'}))" />
                                    <div class="act-img-overlay"></div>
                </div>
                <div class="act-card-body">
                  <h3 class="act-card-title">
                    CV-Special - OSP พฤหัส 6 ก.พ. 10.00-12.00 น. อาคารสินธรทาวเวอร์                  </h3>
                  <p class="act-card-desc">
                    Company Visit Special - OSP  Talk โอสถสภาเร่งเกมรุก 2025 สร้าง
ปรากฏการณ์ใหม่เพื่อการเติบโตที่ แข็งแกร่งกว่าเดิม กับ บริษัท โอสถสภา จำกัด
(มหาชน)                   </p>
                  <a class="act-card-link" href="https://aio.panphol.com/blog/730" target="_blank" rel="noopener">
                    อ่านเพิ่มเติม <span class="act-arrow" aria-hidden="true">→</span>
                  </a>
                </div>
              </article>
                          <article class="act-card">
                <div class="act-card-media">
                  <span class="act-badge">Company Visit</span>
                                      <img src="https://aio.panphol.com/assets/images/community/245_T0TV63.png" alt="PTG ก้าวสู่ยุคใหม่ New S- Curve หมดกังวลราคาน้ำมัน ถอดรหัสงานเยี่ยมชมกิจการ" class="act-card-img" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'act-img-placeholder'}))" />
                                    <div class="act-img-overlay"></div>
                </div>
                <div class="act-card-body">
                  <h3 class="act-card-title">
                    PTG ก้าวสู่ยุคใหม่ New S- Curve หมดกังวลราคาน้ำมัน ถอดรหัสงานเยี่ยมชมกิจการ                  </h3>
                  <p class="act-card-desc">
                    ร่วมกิจกรรมและเยี่ยมชมกิจการกับทีมงานหุ้นปันผล                  </p>
                  <a class="act-card-link" href="https://aio.panphol.com/blog/245" target="_blank" rel="noopener">
                    อ่านเพิ่มเติม <span class="act-arrow" aria-hidden="true">→</span>
                  </a>
                </div>
              </article>
                          <article class="act-card">
                <div class="act-card-media">
                  <span class="act-badge">Company Visit</span>
                                      <img src="https://aio.panphol.com/assets/images/community/242_3P3E3Z.png" alt="โลกใบใหม่ของ ILINK  ถอดรหัสกุญแจสำคัญ จากงานเยี่ยมชมกิจการ " class="act-card-img" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'act-img-placeholder'}))" />
                                    <div class="act-img-overlay"></div>
                </div>
                <div class="act-card-body">
                  <h3 class="act-card-title">
                    โลกใบใหม่ของ ILINK  ถอดรหัสกุญแจสำคัญ จากงานเยี่ยมชมกิจการ                   </h3>
                  <p class="act-card-desc">
                    ร่วมกิจกรรมและเยี่ยมชมกิจการกับทีมงานหุ้นปันผล                  </p>
                  <a class="act-card-link" href="https://aio.panphol.com/blog/242" target="_blank" rel="noopener">
                    อ่านเพิ่มเติม <span class="act-arrow" aria-hidden="true">→</span>
                  </a>
                </div>
              </article>
                          <article class="act-card">
                <div class="act-card-media">
                  <span class="act-badge">Company Visit</span>
                                      <img src="https://aio.panphol.com/assets/images/community/125_S60QGA.png" alt="17 ข้อดี KJL | ประมวลภาพ เยี่ยมชมกิจการ KJL " class="act-card-img" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'act-img-placeholder'}))" />
                                    <div class="act-img-overlay"></div>
                </div>
                <div class="act-card-body">
                  <h3 class="act-card-title">
                    17 ข้อดี KJL | ประมวลภาพ เยี่ยมชมกิจการ KJL                   </h3>
                  <p class="act-card-desc">
                    ร่วมกิจกรรมและเยี่ยมชมกิจการกับทีมงานหุ้นปันผล                  </p>
                  <a class="act-card-link" href="https://aio.panphol.com/blog/125" target="_blank" rel="noopener">
                    อ่านเพิ่มเติม <span class="act-arrow" aria-hidden="true">→</span>
                  </a>
                </div>
              </article>
                      
        </div>
      </div>

      <!-- Bottom Progress Bar Indicator -->
      <div class="act-progress-wrap px-layer" data-px="0.02">
        <div class="act-progress-bar">
          <div class="act-progress-fill" id="actProgressFill"></div>
        </div>
      </div>
    </section>

    <!-- =========================================================
         Section — เกี่ยวกับเรา (About Us)
         Company story, mission & team
         ========================================================= -->
    <section class="about px-section" id="about" data-px-section aria-labelledby="about-title">
      <div class="px-ambient" aria-hidden="true">
        <span class="px-orb px-orb--soft-violet px-layer" data-px="-0.22" data-px-fade="soft"></span>
        <span class="px-orb px-orb--soft-navy px-layer" data-px="0.16" data-px-fade="soft"></span>
      </div>

      <div class="about-story px-layer" data-px="0.08" data-px-fade="copy">
        <p class="about-kicker">เกี่ยวกับเรา</p>
        <h2 class="about-title" id="about-title">
          <img src="assets/logo_panphol.png" alt="หุ้นปันผล" class="about-title-logo" />
        </h2>
        <div class="about-body">
          <p>
            หุ้นปันผล ก่อตั้งขึ้นจากความตั้งใจที่จะพัฒนาเครื่องมือและข้อมูลคุณภาพสำหรับนักลงทุนไทย โดยเริ่มพัฒนาระบบข้อมูลหุ้นตั้งแต่ปี 2010 และได้ยกระดับสู่แพลตฟอร์ม AIO ในปี 2023 เพื่อรวบรวมข้อมูลด้านการลงทุนและนำเทคโนโลยี AI มาช่วยเพิ่มประสิทธิภาพในการวิเคราะห์ข้อมูล
          </p>
          <p>
            ด้วยประสบการณ์การพัฒนามากกว่า 15 ปี AIO ได้สะสมฐานข้อมูลด้านการเงินและตลาดทุนขนาดใหญ่ เพื่อสนับสนุนการวิเคราะห์และการตัดสินใจลงทุนอย่างมีประสิทธิภาพ พร้อมมุ่งมั่นพัฒนาเทคโนโลยีและนวัตกรรมอย่างต่อเนื่อง เพื่อยกระดับประสบการณ์ของนักลงทุนไทยในทุกยุคสมัย.
          </p>
        </div>

        <div class="about-milestones">
          <div class="about-mile">
            <span class="about-mile-year">2010</span>
            <span class="about-mile-desc">เริ่มพัฒนาระบบข้อมูลหุ้น</span>
          </div>
          <div class="about-mile-line" aria-hidden="true"></div>
          <div class="about-mile">
            <span class="about-mile-year">2023</span>
            <span class="about-mile-desc">ยกระดับสู่แพลตฟอร์ม AIO</span>
          </div>
          <div class="about-mile-line" aria-hidden="true"></div>
          <div class="about-mile">
            <span class="about-mile-year">15+</span>
            <span class="about-mile-desc">ปีแห่งการพัฒนา</span>
          </div>
        </div>
      </div>

      <!-- Our Team -->
      <div class="about-team px-layer" data-px="0.04" data-px-fade="copy">
        <p class="about-team-kicker">ทีมงานของเรา</p>
        <h3 class="about-team-title">
          The Team Behind Our Success
        </h3>
        <p class="about-team-sub">ผู้เชี่ยวชาญด้านการลงทุนและเทคโนโลยีเบื้องหลัง Panphol</p>

        <div class="about-team-grid">
          <div class="about-member">
            <div class="about-member-photo">
              <img src="assets/team_nui.png" alt="Pronprom Pakpiam" loading="lazy" />
            </div>
            <h4 class="about-member-name">Pronprom Pakpiam</h4>
            <span class="about-member-role">Founder</span>
          </div>
          <div class="about-member">
            <div class="about-member-photo">
              <img src="assets/team_pj.jpg" alt="Worapoj (PJ)" loading="lazy" />
            </div>
            <h4 class="about-member-name">Worapoj (PJ)</h4>
            <span class="about-member-role">Founder</span>
          </div>
          <div class="about-member">
            <div class="about-member-photo">
              <img src="assets/team_boyd.jpg" alt="Woraphot (Boyd)" loading="lazy" />
            </div>
            <h4 class="about-member-name">Woraphot (Boyd)</h4>
            <span class="about-member-role">Founder</span>
          </div>
          <div class="about-member">
            <div class="about-member-photo">
              <img src="assets/team_khanti.jpg" alt="Khanti" loading="lazy" />
            </div>
            <h4 class="about-member-name">Khanti</h4>
            <span class="about-member-role">Founder</span>
          </div>
          <div class="about-member">
            <div class="about-member-photo">
              <img src="assets/team_kno1s.png" alt="Knots Sone" loading="lazy" />
            </div>
            <h4 class="about-member-name">Knots Sone</h4>
            <span class="about-member-role">Developer</span>
          </div>
        </div>
      </div>
    </section>



</main>

  <!-- Modal outside section (avoid parallax/overflow containing block) -->
  <div class="inc-modal" id="incModal" hidden aria-hidden="true">
    <div class="inc-modal-backdrop" data-inc-close></div>
    <div class="inc-modal-panel" role="dialog" aria-modal="true" aria-labelledby="incModalTitle">
      <button type="button" class="inc-modal-close" data-inc-close aria-label="ปิด">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" aria-hidden="true">
          <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
      <p class="inc-modal-kicker" id="incModalKicker">รายละเอียด</p>
      <h3 class="inc-modal-title" id="incModalTitle">—</h3>
      <div class="inc-modal-body" id="incModalBody"></div>
    </div>
  </div>

  <!--
    Footer — Apple-style legal strip
  -->
  <footer class="site-footer" id="footer">
    <div class="site-footer-inner">
      <div class="site-footer-promo">
        <p class="site-footer-promo-title">Promotion Package</p>
        <p class="site-footer-promo-text">
          ทดลองใช้ aioMax ได้ที่
          <a href="https://aiomax.panphol.com" target="_blank" rel="noopener">aiomax.panphol.com</a>
          · ดูแพ็กเกจที่
          <a href="https://aio.panphol.com/package" target="_blank" rel="noopener">aio.panphol.com/package</a>
        </p>
      </div>

      <nav class="site-footer-nav" aria-label="ลิงก์ส่วนท้าย">
        <a href="#origin">ปฐมบท</a>
        <a href="#maxchat">MaX Chat</a>
        <a href="#vport">MaX VPort</a>
        <a href="#portint">Port Intelligent</a>
        <a href="#divint">Dividend</a>
        <a href="#realmax">ตัวจริง</a>
        <a href="#compare">ทำไมดี</a>
        <a href="#promo">โปรโมชัน</a>
        <a href="#classroom">ห้องเรียน</a>
        <a href="#activities">กิจกรรม</a>
        <a href="#about">เกี่ยวกับเรา</a>
      </nav>

      <div class="site-footer-legal">
        <p class="site-footer-copy">
          Copyright © 2026 aioMax · panphol. สงวนสิทธิ์ทุกประการ
        </p>
        <ul class="site-footer-links">
          <li><a href="legal/privacy" title="นโยบายความเป็นส่วนตัว">นโยบายความเป็นส่วนตัว</a></li>
          <li><a href="legal/terms" title="ข้อกำหนดการใช้งาน">ข้อกำหนดการใช้งาน</a></li>
          <li><a href="legal/sales-refund" title="การขายและการคืนเงิน">การขายและการคืนเงิน</a></li>
          <li><a href="legal/legal" title="ข้อมูลทางกฎหมาย">ข้อมูลทางกฎหมาย</a></li>
          <li><a href="legal/sitemap" title="แผนผังเว็บไซต์">แผนผังเว็บไซต์</a></li>
        </ul>
      </div>

      <p class="site-footer-disclaimer">
        ข้อมูลและตัวอย่างบนหน้านี้เพื่อการนำเสนอผลิตภัณฑ์เท่านั้น
        ไม่ใช่คำแนะนำการลงทุนหรือการรับประกันผลตอบแทน
      </p>
    </div>
  </footer>

  <script src="js/landing.js"></script>
</body>
</html>
