<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>หุ้นปันผล — The Journey</title>
    <meta name="description" content="เส้นทางของแพลตฟอร์มวิเคราะห์หุ้นปันผลอัจฉริยะ — AIO Platform, AiOMaX, AiOMax : Line OA, AIOApp, Classroom และกิจกรรมนักลงทุน">
    <link rel="icon" type="image/png" href="assets/img/favicon.png">

    <!-- โหลดได้เมื่อเปิดจากเว็บ ถ้าโหลดไม่ได้จะ fallback เป็นฟอนต์ระบบ (Thonburi / Leelawadee UI) -->
    <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=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Font Awesome Pro (local) -->
    <link rel="stylesheet" href="assets/font/fafont/css/all.min.css">

    <style>
        /* ============================================================
           TOKENS — พื้นขาว/เทา ธีมม่วง #6D00C5 (โทนเดียวกับโลโก้ AIO)
           ============================================================ */
        :root {
            --bg: #ffffff;
            --paper: #f7f6fa;
            --paper-2: #f1eff6;
            --ink: #1c1526;
            --ink-soft: rgba(28, 21, 38, .62);
            --violet: #6D00C5;
            --violet-bright: #9333ea;
            --violet-deep: #56009c;
            --pink: #d946ef;
            --gold: #e8a219;
            --screen: #1c0733;
            --screen-2: #2a0d4d;
            --white-soft: rgba(248, 245, 252, .68);
            --line: rgba(28, 21, 38, .09);
            --line-d: rgba(248, 245, 252, .12);
            --radius: 28px;
            --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', 'Helvetica Neue', sans-serif;
            --ease: cubic-bezier(.16, 1, .3, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            line-height: 1.5;
        }

        ::selection { background: rgba(109, 0, 197, .22); }

        img { max-width: 100%; }

        a { color: inherit; text-decoration: none; }

        .wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

        /* ============================================================
           TYPE SCALE
           ============================================================ */
        .eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            font-size: 13px; font-weight: 700;
            text-transform: uppercase; color: var(--violet);
        }

        .eyebrow::before {
            content: ""; width: 26px; height: 2px; border-radius: 2px;
            background: linear-gradient(90deg, var(--violet), transparent);
        }

        .dark-sec .eyebrow { color: #c084fc; }
        .dark-sec .eyebrow::before { background: linear-gradient(90deg, #c084fc, transparent); }

        h1, h2 { text-wrap: balance; }

        .display {
            font-size: clamp(2.6rem, 7.6vw, 6.2rem);
            font-weight: 800; line-height: 1.04;
        }

        .headline {
            font-size: clamp(2rem, 4.6vw, 3.6rem);
            font-weight: 800; line-height: 1.1; margin: 18px 0 20px;
        }

        .lede {
            font-size: clamp(1.05rem, 1.6vw, 1.3rem);
            font-weight: 500; line-height: 1.75; max-width: 42em;
            color: var(--ink-soft);
        }

        .gray-sec { background: var(--paper); }

        .dark-sec { background: var(--screen); color: #f8f5fc; }
        .dark-sec .lede { color: var(--white-soft); }

        .grad-text {
            background: linear-gradient(92deg, var(--violet-bright) 10%, var(--violet) 45%, var(--pink) 95%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }

        /* โลโก้ประจำ product ของแต่ละ chapter */
        .prod-logo { display: block; height: 64px; width: auto; margin: 22px 0 4px; }

        /* ============================================================
           REVEAL — โผล่พร้อมเบลอแบบ apple.com
           ============================================================ */
        .reveal {
            opacity: 0; transform: translateY(46px); filter: blur(6px);
            transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
            transition-delay: var(--d, 0s);
        }

        .reveal.in { opacity: 1; transform: none; filter: none; }

        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; filter: none; transition: none; }
            html { scroll-behavior: auto; }
            * { animation: none !important; }
        }

        /* ============================================================
           NAV
           ============================================================ */
        .nav {
            position: fixed; inset: 0 0 auto 0; z-index: 60;
            transition: background .4s, backdrop-filter .4s, border-color .4s;
            border-bottom: 1px solid transparent;
        }

        .nav.scrolled {
            background: rgba(255, 255, 255, .78);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
            border-color: var(--line);
        }

        .nav-inner {
            display: flex; align-items: center; justify-content: space-between;
            height: 60px;
        }

        .brand { display: inline-flex; align-items: center; }
        .brand img { height: 32px; width: auto; display: block; }

        .nav-links { display: flex; gap: 26px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
        .nav-links a { transition: color .25s; }
        .nav-links a:hover, .nav-links a:focus-visible { color: var(--violet); }

        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            border-radius: 999px; font-weight: 700; cursor: pointer;
            border: 1px solid transparent; transition: transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
            font-size: .95rem; padding: 13px 28px;
        }

        .btn:focus-visible, a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

        .btn-em { background: var(--violet); color: #fff; box-shadow: 0 10px 30px rgba(109, 0, 197, .3); }
        .btn-em:hover { background: var(--violet-bright); transform: translateY(-2px); }

        .btn-ghost { border-color: rgba(28, 21, 38, .22); color: var(--ink); }
        .btn-ghost:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); }

        .dark-sec .btn-ghost { border-color: rgba(248, 245, 252, .3); color: #f8f5fc; }
        .dark-sec .btn-ghost:hover { border-color: rgba(248, 245, 252, .7); color: #fff; }

        .btn-sm { padding: 8px 18px; font-size: .82rem; }

        @media (max-width: 780px) { .nav-links { display: none; } }

        /* ============================================================
           HERO
           ============================================================ */
        .hero {
            position: relative; min-height: 100svh;
            display: flex; flex-direction: column; justify-content: center;
            padding: 130px 0 60px; text-align: center; overflow: clip;
            background: linear-gradient(180deg, #faf8fd, var(--bg) 60%);
        }

        .orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
        .orb-1 { width: 560px; height: 560px; top: -160px; right: -120px; background: rgba(109, 0, 197, .12); }
        .orb-2 { width: 420px; height: 420px; bottom: 0; left: -140px; background: rgba(147, 51, 234, .1); }
        .orb-3 { width: 300px; height: 300px; top: 30%; left: 12%; background: rgba(217, 70, 239, .08); }

        .hero-badge {
            display: inline-flex; align-items: center; gap: 9px;
            border: 1px solid rgba(109, 0, 197, .2); border-radius: 999px;
            background: rgba(109, 0, 197, .06); padding: 8px 18px;
            font-size: .82rem; font-weight: 700; color: var(--violet);
        }

        .hero-badge b { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: pulse 2.2s infinite; }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(109, 0, 197, .45); }
            60% { box-shadow: 0 0 0 9px rgba(109, 0, 197, 0); }
        }

        .hero .display { margin: 26px 0 22px; }
        .hero .lede { margin-inline: auto; }
        .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

        /* device — ย่อ/เงย/จางตามสกรอลล์ */
        .device-stage { perspective: 1400px; margin-top: 70px; }

        .device {
            width: min(920px, 100%); margin-inline: auto;
            border-radius: var(--radius); padding: 10px;
            background: linear-gradient(180deg, #fff, #f0ecf6);
            border: 1px solid var(--line);
            box-shadow: 0 40px 120px rgba(41, 12, 72, .18), 0 0 80px rgba(109, 0, 197, .08);
            transform-origin: 50% 0; will-change: transform, opacity;
        }

        .device-screen {
            border-radius: 20px; overflow: hidden;
            background: linear-gradient(135deg, var(--screen-2), var(--screen) 55%, #24093f);
            color: #f8f5fc;
        }

        .device-bar {
            display: flex; align-items: center; gap: 7px;
            padding: 13px 18px; border-bottom: 1px solid var(--line-d);
        }

        .device-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(248, 245, 252, .18); }
        .device-url {
            margin-left: 10px; font-size: .72rem; font-weight: 600; color: rgba(248, 245, 252, .55);
            background: rgba(248, 245, 252, .07); border-radius: 7px; padding: 4px 12px;
        }

        .device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; }
        @media (max-width: 680px) { .device-grid { grid-template-columns: 1fr; } }

        .tile {
            border-radius: 18px; padding: 20px;
            background: rgba(248, 245, 252, .06); border: 1px solid var(--line-d);
            text-align: left;
        }

        .tile-label { font-size: .75rem; font-weight: 700; color: rgba(248, 245, 252, .55); }
        .tile-value { font-size: 2rem; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
        .tile-value.up { color: #c084fc; }

        .bars { display: flex; align-items: flex-end; gap: 7px; height: 74px; margin-top: 16px; }
        .bars i {
            flex: 1; border-radius: 5px 5px 2px 2px;
            background: linear-gradient(180deg, #c084fc, var(--violet));
            height: calc(var(--h) * 1%); opacity: .9;
            transform: scaleY(0); transform-origin: bottom;
            transition: transform 1s var(--ease) calc(var(--i) * 90ms);
        }

        .in .bars i { transform: scaleY(1); }

        .meter { height: 7px; border-radius: 99px; background: rgba(248, 245, 252, .12); margin-top: 18px; overflow: hidden; }
        .meter i {
            display: block; height: 100%; border-radius: 99px;
            background: linear-gradient(90deg, var(--violet-bright), var(--pink));
            width: 0; transition: width 1.4s var(--ease) .3s;
        }
        .in .meter i { width: var(--w); }

        .tile-note { font-size: .74rem; color: rgba(248, 245, 252, .5); margin-top: 14px; line-height: 1.6; }

        .scroll-hint {
            margin-top: 60px; font-size: .78rem; font-weight: 600; color: rgba(28, 21, 38, .4);
            display: flex; flex-direction: column; align-items: center; gap: 10px;
        }
        .scroll-hint::after {
            content: ""; width: 1px; height: 42px;
            background: linear-gradient(180deg, var(--violet), transparent);
            animation: drip 2s var(--ease) infinite;
        }
        @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

        /* ============================================================
           MANIFESTO — ตัวอักษรสว่างทีละคำตามสกรอลล์
           ============================================================ */
        .manifesto { padding: 22vh 0; }

        .manifesto p {
            font-size: clamp(1.7rem, 4vw, 3.1rem);
            font-weight: 800; line-height: 1.45;
            max-width: 22em;
        }

        .manifesto .w { color: rgba(248, 245, 252, .16); transition: color .35s; }
        .manifesto .w.lit { color: #f8f5fc; }
        .manifesto .w.key.lit { color: #c084fc; }
        .manifesto .w.gold.lit { color: var(--pink); }

        /* ============================================================
           CHAPTERS ทั่วไป
           ============================================================ */
        .chapter { padding: 15vh 0; position: relative; }

        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 64px; }
        @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

        .stat {
            border-radius: 24px; padding: 30px 26px;
            background: #fff; border: 1px solid var(--line);
            box-shadow: 0 14px 44px rgba(41, 12, 72, .06);
        }

        .stat b {
            display: block; font-size: clamp(2.1rem, 3.6vw, 3rem);
            font-weight: 800; color: var(--violet);
            font-variant-numeric: tabular-nums;
        }

        .stat.gold b { color: var(--pink); }
        .stat span { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }

        /* ============================================================
           CHAPTER 02 — AIO PINNED THEATER
           ============================================================ */
        .theater { height: 530vh; position: relative; }
        .theater-stage .wrap { padding-inline: 10px; }

        .theater-stage {
            position: sticky; top: 0; height: 100svh; overflow: clip;
            display: flex; align-items: center;
        }

        .theater-grid {
            display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; width: 100%;
        }

        .feat-list { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }

        .feat-item {
            border-radius: 18px; padding: 18px 22px; cursor: default;
            transition: background .5s, opacity .5s; opacity: .38;
        }

        .feat-item.active { background: #fff; opacity: 1; box-shadow: 0 16px 48px rgba(41, 12, 72, .08); }

        .feat-item h3 { font-size: 1.15rem; font-weight: 800; }
        .feat-item p { font-size: .88rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.65; display: none; }
        .feat-item.active p { display: block; }

        .feat-item h3 em { font-style: normal; color: var(--violet); }

        .feat-progress { height: 3px; border-radius: 3px; background: var(--line); margin-top: 12px; overflow: hidden; display: none; }
        .feat-item.active .feat-progress { display: block; }
        .feat-progress i { display: block; height: 100%; background: var(--violet); width: calc(var(--p) * 100%); }

        /* จอด้านขวา */
        .shot-stack { position: relative; aspect-ratio: 10 / 10.5; }

        .shot {
            position: absolute; inset: 0; border-radius: var(--radius);
            background: linear-gradient(150deg, var(--screen-2), var(--screen) 60%, #240a41);
            border: 1px solid rgba(248, 245, 252, .1);
            box-shadow: 0 34px 90px rgba(41, 12, 72, .3);
            padding: 26px; color: #f8f5fc;
            opacity: 0; transform: translateY(36px) scale(.96);
            transition: opacity .7s var(--ease), transform .7s var(--ease);
            display: flex; flex-direction: column; gap: 14px; overflow: hidden;
        }

        .shot.active { opacity: 1; transform: none; }

        .shot-head { display: flex; justify-content: space-between; align-items: center; }
        .shot-head b { font-size: .95rem; font-weight: 800; }
        .chip {
            font-size: .68rem; font-weight: 700;
            border-radius: 99px; padding: 5px 12px;
            background: rgba(147, 51, 234, .18); color: #c084fc;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .chip.gold { background: rgba(217, 70, 239, .15); color: #e879f9; }

        .rowline {
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 14px; padding: 13px 16px; font-size: .84rem; font-weight: 600;
        }

        .rowline .tick { font-weight: 800; }
        .rowline .pos { color: #c084fc; font-variant-numeric: tabular-nums; }
        .rowline .muted { color: rgba(248, 245, 252, .5); font-size: .74rem; font-weight: 500; }

        .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
        .cal i {
            aspect-ratio: 1; border-radius: 9px; background: rgba(248, 245, 252, .05);
            display: grid; place-items: center; font-style: normal; font-size: .66rem;
            color: rgba(248, 245, 252, .45); font-variant-numeric: tabular-nums;
        }
        .cal i.xd { background: var(--violet-bright); color: #fff; font-weight: 800; }
        .cal i.pay { background: rgba(232, 162, 25, .9); color: #241a02; font-weight: 800; }

        .legend { display: flex; gap: 18px; font-size: .72rem; color: rgba(248, 245, 252, .55); }
        .legend b { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

        .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
        .duo-col { border-radius: 16px; border: 1px solid var(--line-d); background: rgba(248, 245, 252, .04); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
        .duo-col h4 { font-size: .92rem; font-weight: 800; }
        .duo-metric { font-size: .72rem; color: rgba(248, 245, 252, .55); }
        .duo-bar { height: 8px; border-radius: 99px; background: rgba(248, 245, 252, .1); overflow: hidden; }
        .duo-bar i { display: block; height: 100%; border-radius: 99px; background: var(--violet-bright); width: var(--w); }
        .duo-col.b .duo-bar i { background: rgba(248, 245, 252, .4); }

        /* ข้อมูลหุ้น — สรุปสถิติ + กราฟราคา + metric tiles */
        .stk-strip {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
            font-size: .72rem; font-weight: 500; color: rgba(248, 245, 252, .55);
        }
        .stk-strip b { color: #f8f5fc; font-variant-numeric: tabular-nums; }
        .stk-strip b.hi { color: #c084fc; }

        .stk-chart {
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 14px; padding: 14px 16px 10px;
            display: flex; flex-direction: column; gap: 8px;
        }
        .stk-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 800; }
        .stk-chart-head a { font-size: .68rem; font-weight: 700; color: #c084fc; }
        .stk-legend { display: flex; gap: 16px; font-size: .66rem; color: rgba(248, 245, 252, .6); align-items: center; }
        .stk-legend i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.5px solid var(--violet-bright); border-radius: 2px; }
        .stk-legend i.tg { border-top-style: dashed; border-top-color: var(--gold); }
        .stk-chart svg { width: 100%; height: auto; display: block; }

        .stk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .stk-tile {
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 12px; padding: 10px 6px; text-align: center;
        }
        .stk-tile span { font-size: .62rem; font-weight: 600; color: rgba(248, 245, 252, .5); }
        .stk-tile b { display: block; font-size: .98rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
        .stk-tile.hi b { color: #c084fc; }

        .stk-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .stk-mini .m {
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 12px; padding: 10px 12px;
        }
        .stk-mini .m span { font-size: .66rem; font-weight: 700; color: rgba(248, 245, 252, .6); }
        .stk-mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; }
        .stk-mini-bars i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #c084fc, var(--violet)); height: calc(var(--h) * 1%); opacity: .9; }
        .stk-mini .m.b .stk-mini-bars i { background: linear-gradient(180deg, var(--pink), var(--violet-deep)); }

        /* วิเคราะห์พอร์ต (Port Intelligent) — การ์ดคาดการณ์ + แท็บ + ตารางสมดุลพอร์ต */
        .pi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .pi-stat {
            display: flex; align-items: center; gap: 10px;
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 14px; padding: 10px 12px;
        }
        .pi-stat .ic {
            width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
            display: grid; place-items: center; font-size: .82rem;
            background: rgba(147, 51, 234, .22); color: #c084fc;
        }
        .pi-stat.b .ic { background: rgba(217, 70, 239, .18); color: #e879f9; }
        .pi-stat b { display: block; font-size: 1.02rem; font-weight: 800; color: #c084fc; font-variant-numeric: tabular-nums; }
        .pi-stat.b b { color: #e879f9; }
        .pi-stat span { font-size: .62rem; font-weight: 600; color: rgba(248, 245, 252, .55); line-height: 1.4; }

        .pi-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
        .pi-tab {
            font-size: .66rem; font-weight: 700; border-radius: 99px; padding: 6px 12px;
            color: rgba(248, 245, 252, .6); background: rgba(248, 245, 252, .05);
            border: 1px solid var(--line-d); display: inline-flex; align-items: center; gap: 6px;
        }
        .pi-tab.on { background: var(--violet); color: #fff; border-color: transparent; }
        .pi-tab .n {
            width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
            background: var(--pink); color: #fff; font-size: .58rem; font-style: normal;
        }

        .pi-table { width: 100%; border-collapse: collapse; font-size: .74rem; font-variant-numeric: tabular-nums; }
        .pi-table th {
            text-align: right; font-size: .64rem; font-weight: 700; color: rgba(248, 245, 252, .5);
            padding: 7px 6px; background: rgba(248, 245, 252, .05);
        }
        .pi-table th:first-child, .pi-table td:first-child { text-align: left; }
        .pi-table td { text-align: right; padding: 9px 6px; border-top: 1px solid var(--line-d); font-weight: 600; }
        .pi-table td:first-child { font-weight: 800; }
        .pi-table .back td:first-child { color: #c084fc; }
        .pi-table .mid td:first-child { color: #a78bfa; }
        .pi-table .front td:first-child { color: #e879f9; }
        .pi-table .pos { color: #c084fc; }

        /* พอร์ตจำลอง vPort — การ์ดหุ้นรายตัว + แท็บ Total/Chart + รายการมูลค่า */
        .vp-card {
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 14px; padding: 12px 14px;
            display: flex; flex-direction: column; gap: 10px;
        }
        .vp-head { display: flex; justify-content: space-between; align-items: center; }
        .vp-pill {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: .8rem; font-weight: 800; color: #c084fc;
            background: rgba(147, 51, 234, .18); border: 1px solid rgba(147, 51, 234, .45);
            border-radius: 10px; padding: 6px 12px;
        }
        .vp-head small { font-size: .68rem; font-weight: 600; color: rgba(248, 245, 252, .55); }
        .vp-head small b { color: #f8f5fc; font-variant-numeric: tabular-nums; }
        .vp-metrics { display: flex; justify-content: space-between; gap: 8px; font-size: .68rem; font-weight: 500; color: rgba(248, 245, 252, .55); flex-wrap: wrap; }
        .vp-metrics b { color: #f8f5fc; font-variant-numeric: tabular-nums; }
        .vp-metrics b.hi { color: #c084fc; }

        .vp-hist {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: rgba(248, 245, 252, .05); border: 1px solid var(--line-d);
            border-radius: 12px; padding: 9px; font-size: .72rem; font-weight: 700;
            color: rgba(248, 245, 252, .7);
        }

        .vp-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-d); }
        .vp-tab {
            display: flex; align-items: center; justify-content: center; gap: 7px;
            padding: 8px 4px; font-size: .74rem; font-weight: 700;
            color: rgba(248, 245, 252, .45); border-bottom: 2px solid transparent;
        }
        .vp-tab.on { color: #c084fc; border-bottom-color: var(--violet-bright); }

        .vp-row {
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 8px 2px; font-size: .76rem; font-weight: 600; color: rgba(248, 245, 252, .7);
        }
        .vp-row.sep { border-top: 1px dashed var(--line-d); }
        .vp-row b { font-weight: 800; color: #f8f5fc; font-variant-numeric: tabular-nums; text-align: right; }
        .vp-row b.pos { color: #c084fc; }
        .vp-row b small { display: block; font-size: .68rem; font-weight: 700; }

        .vp-div {
            background: rgba(232, 162, 25, .1); border: 1px solid rgba(232, 162, 25, .4);
            border-radius: 12px; padding: 10px 12px;
            display: flex; flex-direction: column; gap: 6px;
        }
        .vp-div small { font-size: .64rem; font-weight: 800; color: var(--gold); }
        .vp-div .vp-row { padding: 0; color: rgba(248, 245, 252, .75); }
        .vp-div .vp-row b { color: var(--gold); }

        /* มือถือ: เลิก pin แล้ววางเรียง */
        @media (max-width: 900px) {
            .theater { height: auto; }
            .theater-stage { position: static; height: auto; display: block; padding: 0; }
            .theater-grid { grid-template-columns: 1fr; gap: 30px; }
            .feat-item { opacity: 1; background: #fff; box-shadow: 0 14px 40px rgba(41, 12, 72, .07); }
            .feat-item p { display: block; }
            .shot-stack { aspect-ratio: auto; display: flex; flex-direction: column; gap: 20px; }
            .shot { position: static; opacity: 1; transform: none; }
        }

        /* ============================================================
           CHAPTER 03 — AIOMAX
           ============================================================ */
        .aiomax { background: radial-gradient(900px 500px at 70% 0%, rgba(147, 51, 234, .2), transparent 65%), var(--screen); }

        .max-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 20px; }
        @media (max-width: 900px) { .max-grid { grid-template-columns: 1fr; gap: 40px; } }

        .max-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
        .max-chips .chip { font-size: .78rem; padding: 9px 16px; }

        .chat {
            border-radius: var(--radius); border: 1px solid var(--line-d);
            background: linear-gradient(160deg, rgba(248, 245, 252, .07), rgba(248, 245, 252, .02));
            padding: 24px; display: flex; flex-direction: column; gap: 16px;
            box-shadow: 0 30px 90px rgba(0, 0, 0, .4), 0 0 70px rgba(147, 51, 234, .15);
        }

        .chat-title { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; color: rgba(248, 245, 252, .6); padding-bottom: 14px; border-bottom: 1px solid var(--line-d); }
        .chat-title img { height: 26px; width: auto; }

        .bubble { border-radius: 18px; padding: 14px 18px; font-size: .9rem; line-height: 1.7; max-width: 88%; }
        .bubble.user { align-self: flex-end; background: var(--violet); color: #fff; font-weight: 600; border-bottom-right-radius: 6px; }
        .bubble.ai { align-self: flex-start; background: rgba(248, 245, 252, .07); border: 1px solid var(--line-d); border-bottom-left-radius: 6px; min-height: 132px; }

        .bubble.ai .caret { display: inline-block; width: 2px; height: 1em; background: #c084fc; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
        @keyframes blink { 50% { opacity: 0; } }

        .ai-tags { display: flex; gap: 8px; flex-wrap: wrap; }

        /* ============================================================
           CHAPTER 04 — ECOSYSTEM
           ============================================================ */
        .eco-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
        @media (max-width: 900px) { .eco-cards { grid-template-columns: 1fr; } }

        .eco {
            border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
            padding: 30px; box-shadow: 0 16px 50px rgba(41, 12, 72, .06);
            transition: transform .5s var(--ease), box-shadow .5s var(--ease);
            display: flex; flex-direction: column; gap: 16px;
        }

        .eco:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(41, 12, 72, .12); }

        .eco-brand { display: flex; align-items: center; gap: 12px; }
        .eco-brand img { height: 40px; width: auto; }
        .eco h3 { font-size: 1.3rem; font-weight: 800; }
        .eco > p { font-size: .9rem; color: var(--ink-soft); line-height: 1.75; flex: 1; }

        .eco .chip { background: rgba(109, 0, 197, .08); color: var(--violet); }

        .eco-visual { border-radius: 18px; padding: 18px; min-height: 158px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }

        .eco-visual.line-bg { background: linear-gradient(150deg, #1c0733, #35125c); }
        .line-msg { background: rgba(248, 245, 252, .1); border-radius: 13px 13px 13px 4px; color: #f3e8ff; font-size: .76rem; padding: 9px 13px; max-width: 85%; }
        .line-msg b { color: #c084fc; }
        .line-msg.me { align-self: flex-end; border-radius: 13px 13px 4px 13px; background: #06c755; color: #fff; font-weight: 700; }

        .eco-visual.notif-bg { background: linear-gradient(150deg, #22093c, #2d0e50); }
        .notif { display: flex; gap: 10px; align-items: center; background: rgba(248, 245, 252, .1); border-radius: 12px; padding: 9px 12px; font-size: .74rem; color: #f3e8ff;
            opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .25s); }
        .in .notif { opacity: 1; transform: none; }
        .notif b { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--violet-bright); color: #fff; font-size: .7rem; font-weight: 800; }
        .notif.gold b { background: var(--pink); color: #fff; }

        .eco-visual.live-bg { background: linear-gradient(150deg, #1a0f0f, #2b1414); position: relative; }
        .live-pill { position: absolute; top: 14px; right: 14px; background: #e5484d; color: #fff; font-size: .66rem; font-weight: 800; border-radius: 99px; padding: 4px 11px; animation: pulse 2.2s infinite; display: inline-flex; align-items: center; gap: 5px; }
        .live-row { font-size: .78rem; color: rgba(248, 245, 252, .85); font-weight: 600; display: flex; align-items: center; gap: 9px; }
        .live-row .fa-circle { font-size: 7px; color: #e5484d; flex-shrink: 0; }

        /* ============================================================
           CHAPTER 05 — CLASSROOM JOURNEY (ไทม์ไลน์ 5 ขั้นของระบบเรียน)
           ============================================================ */
        .classroom { background: var(--paper-2); }

        .path { position: relative; margin-top: 74px; display: flex; flex-direction: column; gap: 58px; }

        .path::before {
            content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
            transform: translateX(-50%); opacity: .35;
            background: linear-gradient(180deg, transparent, var(--violet) 7%, var(--violet) 93%, transparent);
        }

        .step { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }

        .step-node {
            grid-column: 2; grid-row: 1; width: 46px; height: 46px; margin-inline: auto;
            border-radius: 50%; background: var(--violet); color: #fff;
            display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
            font-variant-numeric: tabular-nums;
            box-shadow: 0 0 0 8px var(--paper-2), 0 10px 26px rgba(109, 0, 197, .35);
        }

        .step-copy { grid-column: 1; grid-row: 1; text-align: right; padding-right: 30px; }
        .step-visual-wrap { grid-column: 3; grid-row: 1; padding-left: 30px; }
        .step.alt .step-copy { grid-column: 3; text-align: left; padding: 0 0 0 30px; }
        .step.alt .step-visual-wrap { grid-column: 1; grid-row: 1; padding: 0 30px 0 0; }

        .step-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--violet); }
        .step-copy h3 { font-size: 1.35rem; font-weight: 800; margin-top: 6px; }
        .step-copy p { font-size: .9rem; color: var(--ink-soft); line-height: 1.75; margin-top: 9px; }

        .step-visual {
            border-radius: 20px; padding: 20px; max-width: 360px;
            background: linear-gradient(150deg, var(--screen-2), var(--screen) 60%, #240a41);
            border: 1px solid rgba(248, 245, 252, .1); color: #f8f5fc;
            box-shadow: 0 22px 60px rgba(41, 12, 72, .18);
            display: flex; flex-direction: column; gap: 10px;
            transition: transform .5s var(--ease);
        }

        .step:hover .step-visual { transform: translateY(-6px); }
        .step.alt .step-visual { margin-left: auto; }

        .sv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; font-weight: 800; }
        .sv-row { background: rgba(248, 245, 252, .07); border: 1px solid var(--line-d); border-radius: 10px; padding: 9px 13px; font-size: .76rem; color: rgba(248, 245, 252, .75); }
        .sv-row.ok { border-color: var(--violet-bright); color: #c084fc; font-weight: 700; }
        .sv-btn { background: var(--violet); color: #fff; border-radius: 99px; text-align: center; font-weight: 800; font-size: .78rem; padding: 9px; }
        .sv-note { font-size: .7rem; color: rgba(248, 245, 252, .5); }

        .player { display: grid; place-items: center; background: rgba(248, 245, 252, .06); border: 1px solid var(--line-d); border-radius: 14px; aspect-ratio: 16 / 7; }
        .play { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: .85rem; }
        .play .fa-play { margin-left: 3px; }
        .sv-progress { height: 6px; border-radius: 99px; background: rgba(248, 245, 252, .12); overflow: hidden; }
        .sv-progress i { display: block; height: 100%; width: 62%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }

        .chip.live { background: rgba(229, 72, 77, .16); color: #ff9296; }
        .chip.live .fa-circle { font-size: 6px; }
        .wave { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
        .wave i { flex: 1; border-radius: 3px; background: #c084fc; height: 28%; opacity: .85;
            animation: wavey 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .12s); }
        @keyframes wavey { to { height: 100%; } }

        .cert { border: 1px dashed rgba(217, 70, 239, .55); border-radius: 14px; padding: 18px; text-align: center; }
        .cert b { display: block; font-size: .92rem; }
        .cert small { color: rgba(248, 245, 252, .55); font-size: .68rem; }
        .seal { width: 38px; height: 38px; border-radius: 50%; margin: 12px auto 0;
            background: radial-gradient(circle at 30% 30%, #f0abfc, var(--pink));
            box-shadow: 0 6px 18px rgba(217, 70, 239, .4); }

        @media (max-width: 820px) {
            .path::before { left: 23px; transform: none; }
            .step, .step.alt { grid-template-columns: 46px 1fr; }
            .step-node { grid-column: 1; margin: 0; box-shadow: 0 0 0 6px var(--paper-2); }
            .step-copy, .step.alt .step-copy { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0 18px; }
            .step-visual-wrap, .step.alt .step-visual-wrap { grid-column: 2; grid-row: 2; padding: 16px 0 0 18px; }
            .step.alt .step-visual { margin-left: 0; }
        }

        /* ============================================================
           CHAPTER 06 — ACTIVITIES (snap gallery)
           ============================================================ */
        .acts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

        .act-nav { display: flex; gap: 10px; }
        .act-nav button {
            width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
            border: 1px solid var(--line); background: #fff; color: var(--ink);
            font-size: 1rem; transition: background .3s, color .3s, transform .3s;
        }
        .act-nav button:hover { background: var(--violet); color: #fff; transform: translateY(-2px); }

        .acts {
            display: flex; gap: 22px; overflow-x: auto; padding: 54px 0 26px;
            scroll-snap-type: x mandatory; scrollbar-width: none;
        }
        .acts::-webkit-scrollbar { display: none; }

        .act {
            scroll-snap-align: start; flex: 0 0 min(360px, 82vw);
            border-radius: var(--radius); overflow: hidden; position: relative;
            aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end;
            padding: 28px; isolation: isolate; color: #f8f5fc;
            transition: transform .5s var(--ease);
        }

        .act:hover { transform: translateY(-10px); }

        .act::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--cover); }
        .act::after { content: ""; position: absolute; inset: 0; z-index: -1;
            background: linear-gradient(180deg, transparent 30%, rgba(16, 4, 30, .88)); }

        .act .scene {
            position: absolute; top: 26px; left: 26px; font-size: .74rem; font-weight: 800;
            color: rgba(248, 245, 252, .85);
            background: rgba(16, 4, 30, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border: 1px solid rgba(248, 245, 252, .2); border-radius: 99px; padding: 6px 14px;
        }

        .act h3 {
            font-size: 1.35rem; font-weight: 800;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .act p {
            font-size: .84rem; color: rgba(248, 245, 252, .72); margin-top: 8px; line-height: 1.7;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
        }
        .act .go { margin-top: 16px; font-size: .82rem; font-weight: 700; color: #c084fc; display: inline-flex; gap: 7px; align-items: center; transition: gap .3s; }
        .act:hover .go { gap: 12px; }

        .acts-track { height: 3px; background: var(--line); border-radius: 3px; margin-top: 8px; overflow: hidden; }
        .acts-track i { display: block; height: 100%; width: 20%; border-radius: 3px; background: var(--violet); transition: transform .2s linear; }

        /* ============================================================
           CTA + FOOTER
           ============================================================ */
        .cta { text-align: center; padding: 22vh 0;
            background: radial-gradient(700px 420px at 50% 100%, rgba(109, 0, 197, .1), transparent 70%), var(--paper); }

        .cta .display { font-size: clamp(2.2rem, 5.6vw, 4.4rem); }
        .cta .lede { margin: 22px auto 40px; }

        .footer { border-top: 1px solid var(--line); padding: 54px 0 60px; background: #fff; }
        .foot-brands { display: flex; flex-wrap: wrap; gap: 24px 38px; justify-content: center; align-items: flex-start; }
        .fb { display: flex; flex-direction: column; align-items: center; gap: 9px; }
        .fb img { height: 30px; width: auto; opacity: .8; transition: opacity .3s, transform .3s; }
        .fb:hover img { opacity: 1; transform: translateY(-2px); }
        .fb small { font-size: .7rem; font-weight: 700; color: var(--ink-soft); }
        .foot-note { text-align: center; font-size: .78rem; color: var(--ink-soft); margin-top: 34px; }

        .foot-social { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
        .foot-social a, .foot-social button {
            width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
            display: grid; place-items: center; font-size: 1.05rem;
            background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
            transition: background .3s, color .3s, border-color .3s, transform .3s;
        }
        .foot-social a:hover, .foot-social button:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-2px); }

        /* ── LINE OA modal ── */
        .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
        .modal[hidden] { display: none; }
        .modal-back { position: absolute; inset: 0; background: rgba(28, 21, 38, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
        .modal-card {
            position: relative; width: min(560px, 100%);
            background: #fff; border-radius: 24px; padding: 26px;
            box-shadow: 0 40px 120px rgba(41, 12, 72, .35);
            animation: modal-in .35s var(--ease);
        }
        @keyframes modal-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
        .modal-x {
            position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
            border-radius: 50%; border: none; cursor: pointer;
            background: var(--paper); color: var(--ink-soft); display: grid; place-items: center;
            transition: background .25s, color .25s;
        }
        .modal-x:hover { background: var(--violet); color: #fff; }

        .lm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
        .lm-head img { height: 30px; width: auto; }
        .lm-head h3 { font-size: 1rem; font-weight: 800; }
        .lm-desc { font-size: .8rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 18px; }

        .lm-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
        @media (max-width: 520px) { .lm-grid { grid-template-columns: 1fr; } }
        .lm-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 18px; text-align: center; }
        .lm-col.qr { background: var(--paper); border-left: 1px solid var(--line); }
        @media (max-width: 520px) { .lm-col.qr { border-left: none; border-top: 1px solid var(--line); } }
        .lm-line-ic { width: 60px; height: 60px; border-radius: 16px; background: #06c755; color: #fff; display: grid; place-items: center; font-size: 2rem; }
        .lm-col small { font-size: .72rem; color: var(--ink-soft); }
        .lm-col .lm-id { font-size: 1.15rem; font-weight: 800; margin-top: -6px; }
        .btn-line { background: #06c755; color: #fff; box-shadow: 0 10px 26px rgba(6, 199, 85, .3); }
        .btn-line:hover { background: #05b34d; transform: translateY(-2px); }
        .lm-col img.lm-qr { width: 144px; height: 144px; border-radius: 14px; background: #fff; padding: 4px; border: 1px solid var(--line); object-fit: contain; }
    </style>
</head>

<body>

    <!-- ============================================================ NAV ============================================================ -->
    <header class="nav" id="nav">
        <div class="wrap nav-inner">
            <a class="brand" href="#hero"><img src="assets/img/logo_panphol.png" alt="หุ้นปันผล"></a>
            <nav class="nav-links" aria-label="เมนูหลัก">
                <a href="#origin">จุดเริ่มต้น</a>
                <a href="#aio">AIO Platform</a>
                <a href="#aiomax">AiOMaX</a>
                <a href="#classroom">Classroom</a>
                <a href="#activities">กิจกรรม</a>
            </nav>
            <a class="btn btn-em btn-sm" href="#cta">เริ่มต้นใช้งาน</a>
        </div>
    </header>

    <!-- ============================================================ HERO ============================================================ -->
    <section class="hero" id="hero">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>

        <div class="wrap">
            <span class="hero-badge reveal"><b></b> แพลตฟอร์มวิเคราะห์หุ้นปันผลอัจฉริยะ</span>

            <h1 class="display reveal" style="--d:.1s">
                ลงทุนอย่างชาญฉลาด<br>
                <span class="grad-text">ปันผลอย่างยั่งยืน</span>
            </h1>

            <p class="lede reveal" style="--d:.2s">
                เส้นทาง 7 ปีของ หุ้นปันผล — จากคอมมูนิตี้นักลงทุน VI
                สู่แพลตฟอร์มวิเคราะห์หุ้นด้วย AI ที่นักลงทุนกว่า 10,000 คนไว้วางใจ
            </p>

            <div class="hero-cta reveal" style="--d:.3s">
                <a class="btn btn-em" href="#origin">เริ่ม Journey</a>
                <a class="btn btn-ghost" href="#aio">สำรวจบริการ</a>
            </div>

            <div class="device-stage">
                <div class="device reveal" id="device" style="--d:.45s">
                    <div class="device-screen">
                        <div class="device-bar">
                            <span></span><span></span><span></span>
                            <div class="device-url">aio.panphol.com</div>
                        </div>
                        <div class="device-grid">
                            <div class="tile">
                                <div class="tile-label">หุ้นปันผลเด่นวันนี้</div>
                                <div class="tile-value up">+4.8%</div>
                                <div class="bars" aria-hidden="true">
                                    <i style="--h:38;--i:0"></i><i style="--h:60;--i:1"></i><i style="--h:30;--i:2"></i>
                                    <i style="--h:78;--i:3"></i><i style="--h:52;--i:4"></i><i style="--h:96;--i:5"></i>
                                </div>
                            </div>
                            <div class="tile">
                                <div class="tile-label">อัตราปันผลเฉลี่ย</div>
                                <div class="tile-value">6.2%</div>
                                <div class="meter"><i style="--w:76%"></i></div>
                                <div class="meter"><i style="--w:52%"></i></div>
                                <div class="tile-note">Yield พอร์ตเทียบดัชนี SET ย้อนหลัง 12 เดือน</div>
                            </div>
                            <div class="tile">
                                <div class="tile-label">AI Score</div>
                                <div class="tile-value up">A+</div>
                                <div class="tile-note">วิเคราะห์งบการเงินและแนวโน้มอัตโนมัติด้วย Machine Learning จาก 5,000+ บทวิเคราะห์</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="scroll-hint">เลื่อนเพื่อออกเดินทาง</div>
        </div>
    </section>

    <!-- ============================================================ MANIFESTO ============================================================ -->
    <section class="manifesto dark-sec">
        <div class="wrap">
            <p id="manifesto-text"
               data-key="ซับซ้อน,เรียบง่าย,AI"
               data-gold="10,000">เราเชื่อว่า การลงทุนที่ดีไม่จำเป็นต้อง ซับซ้อน — ตลอด 7 ปี เราเปลี่ยนข้อมูลหุ้นมหาศาล ให้กลายเป็นการตัดสินใจที่ เรียบง่าย ด้วย AI ข้อมูลเชิงลึก และนักลงทุนกว่า 10,000 คน ที่เดินทางไปด้วยกัน</p>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 01 — จุดเริ่มต้น ============================================================ -->
    <section class="chapter gray-sec" id="origin">
        <div class="wrap">
            <span class="eyebrow reveal">Chapter 01 · จุดเริ่มต้น</span>
            <h2 class="headline reveal" style="--d:.08s">จากคอมมูนิตี้เล็ก ๆ<br>สู่แพลตฟอร์มที่นักลงทุนไว้วางใจ</h2>
            <p class="lede reveal" style="--d:.16s">
                หุ้นปันผล เริ่มจากกลุ่มนักลงทุนเน้นคุณค่า (VI) ที่อยากให้การอ่านงบการเงิน
                และการคัดหุ้นปันผล เป็นเรื่องที่ใครก็ทำได้ วันนี้ตัวเลขเหล่านี้คือหลักฐานของการเดินทาง
            </p>

            <div class="stats">
                <div class="stat reveal" style="--d:0s"><b class="count" data-target="10000" data-suffix="+">0</b><span>นักลงทุนไว้วางใจ</span></div>
                <div class="stat reveal" style="--d:.1s"><b class="count" data-target="5000" data-suffix="+">0</b><span>บทวิเคราะห์</span></div>
                <div class="stat reveal" style="--d:.2s"><b class="count" data-target="800" data-suffix="+">0</b><span>หุ้นที่วิเคราะห์ทั้งตลาด</span></div>
                <div class="stat gold reveal" style="--d:.3s"><b class="count" data-target="10" data-suffix=" ล้าน+">0</b><span>จุดข้อมูล Big Data ที่ประมวลผล</span></div>
            </div>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 02 — AIO PLATFORM (pinned theater) ============================================================ -->
    <section id="aio" style="background: var(--paper-2);">
        <div class="theater" id="theater">
            <div class="theater-stage">
                <div class="wrap theater-grid">
                    <div>
                        <span class="eyebrow reveal">Chapter 02 · AIO Platform</span>
                        <img class="prod-logo reveal" src="assets/img/logo_aio.png" alt="AIO" style="--d:.04s">
                        <h2 class="headline reveal" style="--d:.08s">ครบทุกเครื่องมือ<br>ในที่เดียว</h2>

                        <div class="feat-list" id="feat-list">
                            <div class="feat-item active">
                                <h3><em>ข้อมูลหุ้น</em> — เจาะลึกหุ้นรายตัวทุกมิติ</h3>
                                <p>ราคาและจุดเด่น งบการเงินย้อนหลังทั้งสามงบ ประวัติปันผล IAA Consensus ทดสอบ DCA ย้อนหลัง จนถึงผู้ถือหุ้นใหญ่และการซื้อขายของผู้บริหาร — ครบในหน้าเดียว</p>
                                <div class="feat-progress"><i></i></div>
                            </div>
                            <div class="feat-item">
                                <h3><em>วิเคราะห์พอร์ต</em> — จัดทัพแบบกองหน้า กลาง หลัง</h3>
                                <p>Port Intelligent วิเคราะห์สมดุลพอร์ตตามแผนกองหน้า กองกลาง กองหลัง แนะแนวทางหุ้นรายตัว เห็นปันผลที่กำลังจะได้รับ และปรับพอร์ตตามกลยุทธ์ด้วย AI</p>
                                <div class="feat-progress"><i></i></div>
                            </div>
                            <div class="feat-item">
                                <h3><em>ปฏิทินปันผล</em> — ไม่พลาดทุกวัน XD</h3>
                                <p>เห็นวันขึ้นเครื่องหมาย วันจ่ายปันผล และประวัติจ่ายย้อนหลังของทุกตัวในพอร์ต ในหน้าเดียว</p>
                                <div class="feat-progress"><i></i></div>
                            </div>
                            <div class="feat-item">
                                <h3><em>พอร์ตจำลอง vPort</em> — ซ้อมก่อนลงสนามจริง</h3>
                                <p>จำลองการซื้อขายด้วยราคาจริง วัด yield ที่พอร์ตทำได้จริง ก่อนตัดสินใจด้วยเงินจริง</p>
                                <div class="feat-progress"><i></i></div>
                            </div>
                            <div class="feat-item">
                                <h3><em>เทียบหุ้น &amp; Oppday</em> — เห็นงบตัวต่อตัว</h3>
                                <p>วางสองบริษัทเทียบกันทุกมิติของงบการเงิน พร้อมสรุปประเด็นสำคัญจาก Oppday ให้ฟังตามทัน</p>
                                <div class="feat-progress"><i></i></div>
                            </div>
                        </div>
                    </div>

                    <div class="shot-stack" id="shot-stack">
                        <!-- shot 1: stock info -->
                        <div class="shot active">
                            <div class="shot-head"><b>ข้อมูลหุ้น</b><span class="chip">STOCK</span></div>

                            <div class="stk-strip">
                                <span>เปิด <b>7.50</b></span>
                                <span>52W <b>5.70 – 10.10</b></span>
                                <span>P/E <b>20.41x</b></span>
                                <span>YIELD <b class="hi">4.58%</b></span>
                                <span class="chip">DCA</span><span class="chip">DIV</span><span class="chip">IAA</span>
                            </div>

                            <div class="stk-chart">
                                <div class="stk-chart-head">กราฟราคาย้อนหลัง 1 ปี <a>กราฟเต็ม <i class="fa-solid fa-arrow-right fa-sm"></i></a></div>
                                <div class="stk-legend">
                                    <span><i></i>ราคาหุ้น</span>
                                    <span><i class="tg"></i>IAA Target 8.41</span>
                                </div>
                                <svg viewBox="0 0 300 92" role="img" aria-label="กราฟราคาหุ้นย้อนหลัง 1 ปี เทียบเป้าหมาย IAA">
                                    <defs>
                                        <linearGradient id="stkFill" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" stop-color="#c084fc" stop-opacity=".35"/>
                                            <stop offset="100%" stop-color="#c084fc" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>
                                    <path fill="url(#stkFill)" stroke="none"
                                        d="M0,80 C22,74 38,62 56,54 C72,46 82,24 96,18 C106,14 114,26 124,42 C138,60 158,64 176,64 C194,64 202,50 212,30 C220,16 230,14 242,26 C254,38 268,52 282,56 L300,58 L300,92 L0,92 Z"/>
                                    <line x1="0" y1="34" x2="300" y2="34" stroke="var(--gold)" stroke-width="1.6" stroke-dasharray="5 4" opacity=".85"/>
                                    <path fill="none" stroke="var(--violet-bright)" stroke-width="2.6" stroke-linecap="round"
                                        d="M0,80 C22,74 38,62 56,54 C72,46 82,24 96,18 C106,14 114,26 124,42 C138,60 158,64 176,64 C194,64 202,50 212,30 C220,16 230,14 242,26 C254,38 268,52 282,56 L300,58"/>
                                </svg>
                            </div>

                            <div class="stk-tiles">
                                <div class="stk-tile"><span>P/E</span><b>20.41</b></div>
                                <div class="stk-tile"><span>P/BV</span><b>1.30</b></div>
                                <div class="stk-tile"><span>BV</span><b>5.89</b></div>
                                <div class="stk-tile hi"><span>YIELD %</span><b>4.58</b></div>
                            </div>

                            <div class="stk-mini">
                                <div class="m"><span>รายได้</span>
                                    <div class="stk-mini-bars" aria-hidden="true">
                                        <i style="--h:34"></i><i style="--h:30"></i><i style="--h:38"></i><i style="--h:36"></i>
                                        <i style="--h:44"></i><i style="--h:42"></i><i style="--h:52"></i><i style="--h:58"></i>
                                        <i style="--h:66"></i><i style="--h:74"></i><i style="--h:86"></i><i style="--h:96"></i>
                                    </div>
                                </div>
                                <div class="m b"><span>กำไร</span>
                                    <div class="stk-mini-bars" aria-hidden="true">
                                        <i style="--h:40"></i><i style="--h:26"></i><i style="--h:48"></i><i style="--h:38"></i>
                                        <i style="--h:56"></i><i style="--h:34"></i><i style="--h:62"></i><i style="--h:44"></i>
                                        <i style="--h:70"></i><i style="--h:52"></i><i style="--h:88"></i><i style="--h:64"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- shot 2: port intelligent -->
                        <div class="shot">
                            <div class="shot-head"><b>วิเคราะห์พอร์ต</b><span class="chip">PORT INTELLIGENT</span></div>

                            <div class="pi-stats">
                                <div class="pi-stat"><span class="ic"><i class="fa-solid fa-circle-dollar"></i></span><span><b>5.2%</b>คาดการณ์เงินปันผลต่อปี</span></div>
                                <div class="pi-stat b"><span class="ic"><i class="fa-solid fa-database"></i></span><span><b>24.6K</b>คาดการณ์เงินปันผล ('000 บาท)</span></div>
                                <div class="pi-stat"><span class="ic"><i class="fa-solid fa-arrow-trend-up"></i></span><span><b>+12.4%</b>คาดการณ์อัพไซต์พอร์ต</span></div>
                                <div class="pi-stat b"><span class="ic"><i class="fa-solid fa-chart-simple"></i></span><span><b>+8.4K</b>คาดการณ์ส่วนต่างกำไร ('000 บาท)</span></div>
                            </div>

                            <div class="pi-tabs">
                                <span class="pi-tab on">สมดุลพอร์ต</span>
                                <span class="pi-tab">หุ้นรายตัว</span>
                                <span class="pi-tab">ปันผลปีนี้</span>
                                <span class="pi-tab">แนวทาง</span>
                                <span class="pi-tab">ขอคำแนะนำ <i class="n">7</i></span>
                            </div>

                            <table class="pi-table">
                                <thead>
                                    <tr><th>แบบ</th><th>จำนวนหุ้น</th><th>%น้ำหนัก</th><th>%ส่วนต่างตามตลาด</th></tr>
                                </thead>
                                <tbody>
                                    <tr class="back"><td>หลัง</td><td>4</td><td>46.00</td><td class="pos">+6.20</td></tr>
                                    <tr class="mid"><td>กลาง</td><td>3</td><td>32.00</td><td class="pos">+11.80</td></tr>
                                    <tr class="front"><td>หน้า</td><td>2</td><td>22.00</td><td class="pos">+18.40</td></tr>
                                </tbody>
                            </table>

                            <div class="rowline"><span class="tick">AI วิเคราะห์</span><span class="muted">พอร์ตสมดุลดี เน้นปันผลต่อเนื่อง</span></div>
                        </div>

                        <!-- shot 3: dividend calendar -->
                        <div class="shot">
                            <div class="shot-head"><b>ปฏิทินปันผล · เดือนนี้</b><span class="chip gold">DIVIDEND</span></div>
                            <div class="cal" aria-hidden="true">
                                <i>จ</i><i>อ</i><i>พ</i><i>พฤ</i><i>ศ</i><i>ส</i><i>อา</i>
                                <i>1</i><i>2</i><i class="xd">3</i><i>4</i><i>5</i><i>6</i><i>7</i>
                                <i>8</i><i class="xd">9</i><i>10</i><i>11</i><i class="pay">12</i><i>13</i><i>14</i>
                                <i>15</i><i>16</i><i>17</i><i class="xd">18</i><i>19</i><i>20</i><i>21</i>
                                <i>22</i><i class="pay">23</i><i>24</i><i>25</i><i class="xd">26</i><i>27</i><i>28</i>
                            </div>
                            <div class="legend">
                                <span><b style="background:var(--violet-bright)"></b>วันขึ้น XD</span>
                                <span><b style="background:var(--gold)"></b>วันจ่ายปันผล</span>
                            </div>
                            <div class="rowline"><span class="tick">หุ้น A <span class="muted">XD 9 ก.ค.</span></span><span class="pos">4.00 บ./หุ้น</span></div>
                        </div>

                        <!-- shot 4: vPort -->
                        <div class="shot">
                            <div class="shot-head"><b>พอร์ตจำลองของฉัน</b><span class="chip">vPORT</span></div>

                            <div class="vp-card">
                                <div class="vp-head">
                                    <span class="vp-pill">หุ้นที่ 1 <i class="fa-solid fa-chevron-down fa-xs"></i></span>
                                    <small>จำนวน: <b>4,000</b></small>
                                </div>
                                <div class="vp-metrics">
                                    <span>Avg: <b>7.10</b></span>
                                    <span>Last: <b>8.25</b></span>
                                    <span>%P/L: <b class="hi">+16.20%</b></span>
                                    <span>Yield: <b class="hi">6.72%</b></span>
                                </div>
                            </div>

                            <div class="vp-hist"><i class="fa-solid fa-clock-rotate-left"></i> ประวัติการซื้อขายทั้งหมด</div>

                            <div class="vp-tabs">
                                <span class="vp-tab on"><i class="fa-solid fa-list-ul"></i> Total</span>
                                <span class="vp-tab"><i class="fa-solid fa-chart-pie"></i> Chart</span>
                            </div>

                            <div class="vp-row"><span>Amount</span><b>65,430.00</b></div>
                            <div class="vp-row"><span>Market Val</span><b>75,960.00</b></div>
                            <div class="vp-row sep"><span>Unrealized P/L</span><b class="pos">+10,530.00<small>(+16.09%)</small></b></div>

                            <div class="vp-div">
                                <small><i class="fa-solid fa-coins"></i> ปันผล CLAIMED</small>
                                <div class="vp-row"><span>เงินปันผล</span><b>12,280.00</b></div>
                            </div>

                            <div class="vp-row sep"><span>Unrealized + ปันผล</span><b class="pos">+22,810.00<small>(+34.86%)</small></b></div>
                        </div>

                        <!-- shot 5: compare -->
                        <div class="shot">
                            <div class="shot-head"><b>เปรียบเทียบหุ้น</b><span class="chip">COMPARE</span></div>
                            <div class="duo">
                                <div class="duo-col">
                                    <h4>หุ้น A</h4>
                                    <span class="duo-metric">Yield 6.1%</span><div class="duo-bar"><i style="--w:78%"></i></div>
                                    <span class="duo-metric">P/E 8.2</span><div class="duo-bar"><i style="--w:64%"></i></div>
                                    <span class="duo-metric">D/E 0.9</span><div class="duo-bar"><i style="--w:40%"></i></div>
                                </div>
                                <div class="duo-col b">
                                    <h4>หุ้น B</h4>
                                    <span class="duo-metric">Yield 7.2%</span><div class="duo-bar"><i style="--w:88%"></i></div>
                                    <span class="duo-metric">P/E 7.6</span><div class="duo-bar"><i style="--w:58%"></i></div>
                                    <span class="duo-metric">D/E 1.2</span><div class="duo-bar"><i style="--w:55%"></i></div>
                                </div>
                            </div>
                            <div class="rowline"><span class="tick">สรุปจาก Oppday Q1</span><span class="pos">ฟังย้อนหลัง <i class="fa-solid fa-arrow-right fa-sm"></i></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 03 — AIOMAX ============================================================ -->
    <section class="chapter aiomax dark-sec" id="aiomax">
        <div class="wrap">
            <span class="eyebrow reveal">Chapter 03 · AiOMaX</span>
            <div class="max-grid">
                <div>
                    <img class="prod-logo reveal" src="assets/img/logo_aiomax.png" alt="AiOMaX" style="--d:.04s">
                    <h2 class="headline reveal" style="--d:.08s">AI ที่พูด<br><span class="grad-text">ภาษาหุ้นไทย</span></h2>
                    <p class="lede reveal" style="--d:.16s">
                        ถามงบการเงิน มูลค่าหุ้น หรือแนวโน้มตลาดได้เหมือนคุยกับนักวิเคราะห์
                        AiOMaX อ่านงบ ประเมินมูลค่า และสรุปภาพตลาดทั่วโลกให้ทุกเช้า
                    </p>
                    <div class="max-chips reveal" style="--d:.24s">
                        <span class="chip">วิเคราะห์งบอัตโนมัติ</span>
                        <span class="chip">ประเมินมูลค่าด้วย ML</span>
                        <span class="chip gold">Market Briefing ไทย · US · จีน</span>
                        <span class="chip">Mag 7 &amp; Dragon 7</span>
                        <span class="chip">Yield พอร์ตรายปี</span>
                    </div>
                </div>

                <div class="chat reveal" style="--d:.2s" id="chat">
                    <div class="chat-title"><img src="assets/img/logo_aiomax.png" alt="AiOMaX"> AiOMaX · aiomax.panphol.com</div>
                    <div class="bubble user">ช่วยวิเคราะห์งบ หุ้น A ไตรมาสล่าสุดให้หน่อย</div>
                    <div class="bubble ai"><span id="ai-text"></span><span class="caret" id="ai-caret"></span></div>
                    <div class="ai-tags">
                        <span class="chip">AI Score A</span>
                        <span class="chip gold">Yield 6.8%</span>
                        <span class="chip">งบ Q1/2569</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 04 — ECOSYSTEM ============================================================ -->
    <section class="chapter" id="everywhere">
        <div class="wrap">
            <span class="eyebrow reveal">Chapter 04 · ทุกที่ ทุกจังหวะตลาด</span>
            <h2 class="headline reveal" style="--d:.08s">ตลาดขยับเมื่อไหร่<br>คุณรู้ก่อนเสมอ</h2>

            <div class="eco-cards">
                <div class="eco reveal" style="--d:0s">
                    <div class="eco-visual line-bg">
                        <div class="line-msg me">หุ้น A</div>
                        <div class="line-msg"><b>หุ้น A</b> · 34.50 บ. (+1.2%)<br>ปันผลงวดล่าสุด 2.10 บ./หุ้น</div>
                        <div class="line-msg">AI สรุปงบ: กำไรโต 8% YoY <i class="fa-solid fa-check"></i></div>
                    </div>
                    <div class="eco-brand"><img src="assets/img/logo_aiomax_bot.png" alt="AiOMax : Line OA"><h3>AiOMax : Line OA</h3></div>
                    <p>พิมพ์ชื่อหุ้นใน LINE แล้วรับราคา ปันผล และบทสรุปงบแบบเรียลไทม์ — นักวิเคราะห์ประจำตัวในแชท</p>
                    <span class="chip" style="align-self:flex-start"><i class="fa-brands fa-line fa-lg"></i> เพิ่มเพื่อนใน LINE</span>
                </div>

                <div class="eco reveal" style="--d:.12s">
                    <div class="eco-visual notif-bg">
                        <div class="notif" style="--i:0"><b>งบ</b> หุ้น A ประกาศงบ Q2 — กำไรสุทธิ +11%</div>
                        <div class="notif gold" style="--i:1"><b>XD</b> หุ้น B ขึ้น XD พรุ่งนี้ · 4.30 บ./หุ้น</div>
                        <div class="notif" style="--i:2"><b>ซื้อ</b> หุ้น C ประกาศโครงการซื้อหุ้นคืน</div>
                    </div>
                    <div class="eco-brand"><img src="assets/img/logo_aioapp.png" alt="AIOApp"><h3>AIOApp</h3></div>
                    <p>แอป iOS / Android แจ้งเตือนประกาศงบ เงินปันผล เพิ่มทุน และซื้อหุ้นคืน ทันทีที่ตลาดมีข้อมูลใหม่</p>
                    <span class="chip" style="align-self:flex-start"><i class="fa-brands fa-apple"></i> App Store · <i class="fa-brands fa-google-play"></i> Google Play</span>
                </div>

                <div class="eco reveal" style="--d:.24s">
                    <div class="eco-visual live-bg">
                        <span class="live-pill"><i class="fa-solid fa-circle fa-2xs"></i> LIVE</span>
                        <div class="live-row"><i class="fa-solid fa-circle"></i>ไลฟ์คัดหุ้น ทุกสัปดาห์</div>
                        <div class="live-row"><i class="fa-solid fa-circle"></i>SEE.ME เจาะลึกธุรกิจ</div>
                        <div class="live-row"><i class="fa-solid fa-circle"></i>Weekly Talk คุยกับกูรู</div>
                    </div>
                    <div class="eco-brand"><img src="assets/img/logo_live.png" alt="AIO Live"><h3>รายการออนไลน์</h3></div>
                    <p>ติดตามมุมมองตลาดสด ๆ ทุกสัปดาห์ พร้อมรายการเจาะธุรกิจรายตัวแบบละเอียดบน YouTube</p>
                    <span class="chip" style="align-self:flex-start"><i class="fa-brands fa-youtube"></i> ดูบน YouTube</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 05 — CLASSROOM ============================================================ -->
    <section class="chapter classroom" id="classroom">
        <div class="wrap">
            <span class="eyebrow reveal">Chapter 05 · Classroom</span>
            <img class="prod-logo reveal" src="assets/img/logo_aio.png" alt="AIO Classroom" style="--d:.04s">
            <h2 class="headline reveal" style="--d:.08s">หนึ่งระบบเรียน<br>ครบทั้งเส้นทาง</h2>
            <p class="lede reveal" style="--d:.16s">
                ระบบห้องเรียนออนไลน์ที่วางเส้นทางไว้ให้ตั้งแต่วันสมัคร จนถึงวันรับใบรับรอง —
                ทุกขั้นเชื่อมต่อกันอัตโนมัติในที่เดียว
            </p>

            <div class="path">
                <!-- 1 · Enrollment -->
                <div class="step reveal">
                    <div class="step-copy">
                        <span class="step-tag">Enrollment</span>
                        <h3>สมัครและลงทะเบียน</h3>
                        <p>เลือกรุ่นที่เปิดรับแล้วลงทะเบียนออนไลน์ ระบบยืนยันสิทธิ์
                            จองที่นั่ง และเปิดสถานะผู้เรียนให้ทันที</p>
                    </div>
                    <div class="step-node">1</div>
                    <div class="step-visual-wrap">
                        <div class="step-visual">
                            <div class="sv-head">ลงทะเบียนเรียน <span class="chip">เปิดรับสมัคร</span></div>
                            <div class="sv-row">ชื่อ-นามสกุล</div>
                            <div class="sv-row">อีเมล</div>
                            <div class="sv-btn">ยืนยันการลงทะเบียน <i class="fa-solid fa-check"></i></div>
                        </div>
                    </div>
                </div>

                <!-- 2 · e-Learning -->
                <div class="step alt reveal">
                    <div class="step-copy">
                        <span class="step-tag">e-Learning</span>
                        <h3>เรียนด้วยวิดีโอบทเรียน</h3>
                        <p>ดูซ้ำได้ไม่จำกัด ระบบบันทึกความคืบหน้าอัตโนมัติ
                            หยุดตรงไหน กลับมาเรียนต่อจากจุดเดิมได้ทุกอุปกรณ์</p>
                    </div>
                    <div class="step-node">2</div>
                    <div class="step-visual-wrap">
                        <div class="step-visual">
                            <div class="player"><span class="play"><i class="fa-solid fa-play"></i></span></div>
                            <div class="sv-progress"><i></i></div>
                            <div class="sv-note">บทที่ 4 จาก 12 · เรียนแล้ว 62%</div>
                        </div>
                    </div>
                </div>

                <!-- 3 · Live -->
                <div class="step reveal">
                    <div class="step-copy">
                        <span class="step-tag">Live Class</span>
                        <h3>เข้าคลาสสดกับผู้สอน</h3>
                        <p>ถาม-ตอบแบบเรียลไทม์ตามรอบคลาสสด
                            พลาดรอบไหนก็เปิดดูย้อนหลังได้ในระบบเดียวกัน</p>
                    </div>
                    <div class="step-node">3</div>
                    <div class="step-visual-wrap">
                        <div class="step-visual">
                            <div class="sv-head">คลาสสดรอบสัปดาห์นี้ <span class="chip live"><i class="fa-solid fa-circle"></i> LIVE</span></div>
                            <div class="wave" aria-hidden="true">
                                <i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i>
                                <i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i>
                            </div>
                            <div class="sv-note">ผู้เรียนออนไลน์ 328 คน · เปิดห้องถาม-ตอบอยู่</div>
                        </div>
                    </div>
                </div>

                <!-- 4 · Post-test -->
                <div class="step alt reveal">
                    <div class="step-copy">
                        <span class="step-tag">Post-test</span>
                        <h3>วัดผลท้ายบท</h3>
                        <p>ทำแบบทดสอบหลังจบแต่ละบท รู้คะแนนทันที
                            ผ่านเกณฑ์เมื่อไหร่ ระบบปลดล็อกบทถัดไปให้อัตโนมัติ</p>
                    </div>
                    <div class="step-node">4</div>
                    <div class="step-visual-wrap">
                        <div class="step-visual">
                            <div class="sv-head">แบบทดสอบท้ายบทที่ 4 <span class="chip gold">คะแนน 85%</span></div>
                            <div class="sv-row">ก. ดูจากราคาหุ้นเท่านั้น</div>
                            <div class="sv-row ok">ข. ดูความสม่ำเสมอของกระแสเงินสด <i class="fa-solid fa-check"></i></div>
                            <div class="sv-row">ค. ดูจากข่าวรายวัน</div>
                        </div>
                    </div>
                </div>

                <!-- 5 · Certificate -->
                <div class="step reveal">
                    <div class="step-copy">
                        <span class="step-tag">Certificate</span>
                        <h3>รับใบรับรอง</h3>
                        <p>เรียนครบทุกบทและสอบผ่านตามเกณฑ์
                            รับใบรับรองดิจิทัลไว้ยืนยันการจบหลักสูตรได้ทันที</p>
                    </div>
                    <div class="step-node">5</div>
                    <div class="step-visual-wrap">
                        <div class="step-visual">
                            <div class="cert">
                                <b>CERTIFICATE OF COMPLETION</b>
                                <small>ออกโดย หุ้นปันผล Classroom · ตรวจสอบออนไลน์ได้</small>
                                <div class="seal" aria-hidden="true"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================ CHAPTER 06 — ACTIVITIES ============================================================ -->
    <section class="chapter gray-sec" id="activities">
        <div class="wrap">
            <div class="acts-head">
                <div>
                    <span class="eyebrow reveal">Chapter 06 · กิจกรรม</span>
                    <h2 class="headline reveal" style="--d:.08s">ออกไปเห็น<br>ธุรกิจจริง</h2>
                    <p class="lede reveal" style="--d:.16s">การลงทุนไม่ได้จบที่หน้าจอ — เราพานักลงทุนไปดูโรงงาน คุยกับผู้บริหาร และเจอกันตัวจริงเสมอ</p>
                </div>
                <div class="act-nav reveal">
                    <button id="act-prev" aria-label="เลื่อนซ้าย"><i class="fa-solid fa-arrow-left"></i></button>
                    <button id="act-next" aria-label="เลื่อนขวา"><i class="fa-solid fa-arrow-right"></i></button>
                </div>
            </div>
        </div>

        <div class="wrap">
            <div class="acts" id="acts">
                                                            <a class="act" href="https://aio.panphol.com/blog/730" target="_blank" rel="noopener" style="--cover: linear-gradient(180deg, rgba(16,4,30,.1), rgba(16,4,30,.3)), url('https://aio.panphol.com/assets/images/community/730_92TBDX.png') center/cover no-repeat">
                            <span class="scene">Company Visit</span>
                            <h3>CV-Special - OSP พฤหัส 6 ก.พ. 10.00-12.00 น. อาคารสินธรทาวเวอร์</h3>
                            <p>Company Visit Special - OSP  Talk โอสถสภาเร่งเกมรุก 2025 สร้าง
ปรากฏการณ์ใหม่เพื่อการเติบโตที่ แข็งแกร่งกว่าเดิม กับ บริษัท โอสถสภา จำกัด
(มหาชน) </p>
                            <span class="go">อ่านเพิ่มเติม <i class="fa-solid fa-arrow-right"></i></span>
                        </a>
                                            <a class="act" href="https://aio.panphol.com/blog/245" target="_blank" rel="noopener" style="--cover: linear-gradient(180deg, rgba(16,4,30,.1), rgba(16,4,30,.3)), url('https://aio.panphol.com/assets/images/community/245_T0TV63.png') center/cover no-repeat">
                            <span class="scene">Company Visit</span>
                            <h3>PTG ก้าวสู่ยุคใหม่ New S- Curve หมดกังวลราคาน้ำมัน ถอดรหัสงานเยี่ยมชมกิจการ</h3>
                            <p></p>
                            <span class="go">อ่านเพิ่มเติม <i class="fa-solid fa-arrow-right"></i></span>
                        </a>
                                            <a class="act" href="https://aio.panphol.com/blog/242" target="_blank" rel="noopener" style="--cover: linear-gradient(180deg, rgba(16,4,30,.1), rgba(16,4,30,.3)), url('https://aio.panphol.com/assets/images/community/242_3P3E3Z.png') center/cover no-repeat">
                            <span class="scene">Company Visit</span>
                            <h3>โลกใบใหม่ของ ILINK  ถอดรหัสกุญแจสำคัญ จากงานเยี่ยมชมกิจการ </h3>
                            <p></p>
                            <span class="go">อ่านเพิ่มเติม <i class="fa-solid fa-arrow-right"></i></span>
                        </a>
                                            <a class="act" href="https://aio.panphol.com/blog/125" target="_blank" rel="noopener" style="--cover: linear-gradient(180deg, rgba(16,4,30,.1), rgba(16,4,30,.3)), url('https://aio.panphol.com/assets/images/community/125_S60QGA.png') center/cover no-repeat">
                            <span class="scene">Company Visit</span>
                            <h3>17 ข้อดี KJL | ประมวลภาพ เยี่ยมชมกิจการ KJL </h3>
                            <p></p>
                            <span class="go">อ่านเพิ่มเติม <i class="fa-solid fa-arrow-right"></i></span>
                        </a>
                                                </div>
            <div class="acts-track"><i id="acts-bar"></i></div>
        </div>
    </section>

    <!-- ============================================================ CTA ============================================================ -->
    <section class="cta" id="cta">
        <div class="wrap">
            <h2 class="display reveal">พร้อมออกเดินทาง<br><span class="grad-text">กับปันผลก้อนแรก</span><br>ของคุณหรือยัง</h2>
            <p class="lede reveal" style="--d:.1s">เข้าร่วมกับนักลงทุนกว่า 10,000 คน ที่ใช้ AIO Platform วิเคราะห์และตัดสินใจอย่างมั่นใจ</p>
            <div class="hero-cta reveal" style="--d:.2s">
                <a class="btn btn-em" href="https://aio.panphol.com">ไปยัง AIO Platform</a>
                <a class="btn btn-ghost" href="https://aiomax.panphol.com">ลอง AiOMaX</a>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="wrap">
            <div class="foot-brands">
                <span class="fb"><img src="assets/img/logo_aio.png" alt="AIO"><small>AIO</small></span>
                <span class="fb"><img src="assets/img/logo_aiomax.png" alt="AiOMaX"><small>AiOMaX</small></span>
                <span class="fb"><img src="assets/img/logo_aiomax_bot.png" alt="AiOMax : Line OA"><small>AiOMax : Line OA</small></span>
                <span class="fb"><img src="assets/img/logo_aioapp.png" alt="AIOApp"><small>AIOApp</small></span>
                <span class="fb"><img src="assets/img/logo_live.png" alt="AIO Live"><small>AIO Live</small></span>
                <span class="fb"><img src="assets/img/logo_panphol.png" alt="หุ้นปันผล"><small>หุ้นปันผล</small></span>
            </div>

            <div class="foot-social">
                <a href="https://www.facebook.com/panphol" target="_blank" rel="noopener" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="https://www.youtube.com/@pphol" target="_blank" rel="noopener" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
                <button type="button" id="line-open" aria-label="LINE Official Account"><i class="fa-brands fa-line"></i></button>
            </div>

            <p class="foot-note">© 2569 บริษัท หุ้นปันผล จำกัด · สงวนลิขสิทธิ์ · mockup — Journey concept</p>
        </div>
    </footer>

    <!-- ============================================================ LINE OA MODAL ============================================================ -->
    <div class="modal" id="line-modal" hidden role="dialog" aria-modal="true" aria-labelledby="line-modal-title">
        <div class="modal-back" data-close></div>
        <div class="modal-card">
            <button type="button" class="modal-x" data-close aria-label="ปิด"><i class="fa-solid fa-xmark"></i></button>
            <div class="lm-head">
                <img src="assets/img/logo_aiomax_bot.png" alt="AiOMax">
                <h3 id="line-modal-title">AiOMax · LINE OA</h3>
            </div>
            <p class="lm-desc">ผู้ช่วยวิเคราะห์แบบตอบทันทีบน LINE — ขอข้อมูลหุ้นไทย หุ้นสหรัฐ หรือเหรียญคริปโต พิมพ์ชื่อก็ได้คำตอบ พร้อมกราฟ เทคนิค พื้นฐาน และคำอธิบาย สมัครใช้งานได้ฟรี</p>
            <div class="lm-grid">
                <div class="lm-col">
                    <span class="lm-line-ic"><i class="fa-brands fa-line"></i></span>
                    <small>เพิ่มเพื่อน</small>
                    <div class="lm-id">@aiomax</div>
                    <a class="btn btn-line btn-sm" href="https://line.me/R/ti/p/@aiomax" target="_blank" rel="noopener"><i class="fa-brands fa-line"></i> เพิ่มเพื่อน</a>
                </div>
                <div class="lm-col qr">
                    <small><b>แสกน QRCode</b></small>
                    <img class="lm-qr" src="https://qr-official.line.me/gs/M_558ypkjv_GW.png?oat_content=qr" alt="LINE QR Code @aiomax">
                    <small>สแกนด้วยกล้อง หรือแอป LINE</small>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            'use strict';
            const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

            /* ---------- NAV blur ---------- */
            const nav = document.getElementById('nav');
            const onNav = () => nav.classList.toggle('scrolled', window.scrollY > 40);
            addEventListener('scroll', onNav, { passive: true });
            onNav();

            /* ---------- anchor scroll แบบไม่ติด # ใน URL ---------- */
            document.addEventListener('click', (e) => {
                const a = e.target.closest('a[href^="#"]');
                if (!a) return;
                const target = document.querySelector(a.getAttribute('href'));
                if (!target) return;
                e.preventDefault();
                target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth' });
            });

            /* ---------- REVEAL ---------- */
            const io = new IntersectionObserver((es) => {
                es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
            }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });
            document.querySelectorAll('.reveal, .eco-visual.notif-bg').forEach(el => io.observe(el));

            /* ---------- COUNTERS ---------- */
            const fmt = new Intl.NumberFormat('th-TH');
            const cio = new IntersectionObserver((es) => {
                es.forEach(e => {
                    if (!e.isIntersecting) return;
                    cio.unobserve(e.target);
                    const el = e.target, target = +el.dataset.target, suf = el.dataset.suffix || '';
                    if (reduced) { el.textContent = fmt.format(target) + suf; return; }
                    const t0 = performance.now(), dur = 1600;
                    (function tick(t) {
                        const p = Math.min((t - t0) / dur, 1), ease = 1 - Math.pow(1 - p, 4);
                        el.textContent = fmt.format(Math.round(target * ease)) + suf;
                        if (p < 1) requestAnimationFrame(tick);
                    })(t0);
                });
            }, { threshold: 0.6 });
            document.querySelectorAll('.count').forEach(el => cio.observe(el));

            /* ---------- MANIFESTO word fill ---------- */
            const man = document.getElementById('manifesto-text');
            const keys = (man.dataset.key || '').split(',');
            const golds = (man.dataset.gold || '').split(',');
            const words = man.textContent.trim().split(/\s+/);
            man.innerHTML = words.map(w => {
                const cls = golds.some(g => g && w.includes(g)) ? 'w gold'
                    : keys.some(k => k && w.includes(k)) ? 'w key' : 'w';
                return `<span class="${cls}">${w}</span>`;
            }).join(' ');
            const spans = man.querySelectorAll('.w');

            /* ---------- AIO pinned theater ---------- */
            const theater = document.getElementById('theater');
            const items = document.querySelectorAll('#feat-list .feat-item');
            const shots = document.querySelectorAll('#shot-stack .shot');
            const canPin = matchMedia('(min-width: 901px)');

            /* ---------- HERO device ---------- */
            const device = document.getElementById('device');

            /* ---------- master scroll loop ---------- */
            let raf = null;
            function onScroll() {
                if (raf) return;
                raf = requestAnimationFrame(() => {
                    raf = null;
                    const vh = innerHeight;

                    // device: ย่อ + จางเมื่อเลื่อนผ่าน hero
                    if (!reduced) {
                        const dr = device.getBoundingClientRect();
                        const p = Math.min(Math.max((vh * 0.55 - dr.top) / (vh * 0.9), 0), 1);
                        device.style.transform = `scale(${1 - p * 0.08}) rotateX(${p * 7}deg)`;
                        device.style.opacity = String(1 - p * 0.5);
                    }

                    // manifesto: จุดคำต่อคำ
                    const mr = man.getBoundingClientRect();
                    const mp = Math.min(Math.max((vh * 0.82 - mr.top) / (mr.height + vh * 0.4), 0), 1);
                    const lit = Math.floor(mp * spans.length * 1.15);
                    spans.forEach((s, i) => s.classList.toggle('lit', i < lit));

                    // theater: สลับฟีเจอร์ตาม progress
                    if (canPin.matches) {
                        const tr = theater.getBoundingClientRect();
                        const total = tr.height - vh;
                        const tp = Math.min(Math.max(-tr.top / total, 0), 0.9999);
                        const idx = Math.floor(tp * items.length);
                        const local = (tp * items.length) % 1;
                        items.forEach((el, i) => {
                            el.classList.toggle('active', i === idx);
                            if (i === idx) el.querySelector('.feat-progress i').style.setProperty('--p', local.toFixed(3));
                        });
                        shots.forEach((el, i) => el.classList.toggle('active', i === idx));
                    }
                });
            }
            addEventListener('scroll', onScroll, { passive: true });
            addEventListener('resize', onScroll);
            onScroll();

            /* ---------- AiOMaX typing ---------- */
            const aiText = document.getElementById('ai-text');
            const aiCaret = document.getElementById('ai-caret');
            const answer = 'สรุปงบ หุ้น A Q1/2569 — รายได้โต 5% YoY กำไรสุทธิโต 8% จากธุรกิจหลักฟื้นตัว อัตราปันผลคาดการณ์ 6.8% สูงกว่าค่าเฉลี่ยของกลุ่มอุตสาหกรรม ✦ มูลค่าเหมาะสมจากโมเดล ML อยู่เหนือราคาปัจจุบัน ~12%';
            let typed = false;
            const tio = new IntersectionObserver((es) => {
                es.forEach(e => {
                    if (!e.isIntersecting || typed) return;
                    typed = true; tio.disconnect();
                    if (reduced) { aiText.textContent = answer; aiCaret.remove(); return; }
                    let i = 0;
                    (function type() {
                        aiText.textContent = answer.slice(0, ++i);
                        if (i < answer.length) setTimeout(type, 18 + Math.random() * 26);
                        else aiCaret.remove();
                    })();
                });
            }, { threshold: 0.5 });
            tio.observe(document.getElementById('chat'));

            /* ---------- Activities gallery ---------- */
            const acts = document.getElementById('acts');
            const bar = document.getElementById('acts-bar');
            const step = () => (acts.querySelector('.act').offsetWidth + 22);
            document.getElementById('act-prev').onclick = () => acts.scrollBy({ left: -step(), behavior: 'smooth' });
            document.getElementById('act-next').onclick = () => acts.scrollBy({ left: step(), behavior: 'smooth' });
            const onActs = () => {
                const max = acts.scrollWidth - acts.clientWidth;
                const p = max > 0 ? acts.scrollLeft / max : 0;
                bar.style.transform = `translateX(${p * (acts.clientWidth / bar.offsetWidth - 1) * bar.offsetWidth}px)`;
            };
            acts.addEventListener('scroll', onActs, { passive: true });
            onActs();

            /* ---------- LINE OA modal ---------- */
            const lineModal = document.getElementById('line-modal');
            document.getElementById('line-open').addEventListener('click', () => {
                lineModal.hidden = false;
                document.body.style.overflow = 'hidden';
            });
            const closeLine = () => {
                lineModal.hidden = true;
                document.body.style.overflow = '';
            };
            lineModal.querySelectorAll('[data-close]').forEach(el => el.addEventListener('click', closeLine));
            addEventListener('keydown', e => { if (e.key === 'Escape' && !lineModal.hidden) closeLine(); });
        })();
    </script>
</body>

</html>
