npm - @nguyenphp/antigravity-marketing - Versions diffs - 1.0.16 → 1.0.19 - Mend

@nguyenphp/antigravity-marketing 1.0.16 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

package/templates/.agent/skills/frontend-slides/examples/n8n-jupviec-automation.html ADDED Viewed

@@ -0,0 +1,789 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>n8n Content Automation - JupViec.vn</title>
+    <!-- Fonts -->
+    <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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        /* ===========================================
+           JUPVIEC DESIGN SYSTEM & THEME
+           =========================================== */
+        :root {
+            /* Colors */
+            --jv-green: #8CC63F;
+            --jv-blue: #00AEEF;
+            --jv-dark: #1E1E1E;
+            --jv-gray: #F5F5F5;
+            --jv-white: #FFFFFF;
+            --bg-primary: var(--jv-white);
+            --bg-accent: var(--jv-dark);
+            --text-primary: var(--jv-dark);
+            --text-secondary: #555555;
+            --text-light: var(--jv-white);
+            /* Spacing */
+            --slide-padding: clamp(1.5rem, 5vw, 4rem);
+            --content-gap: clamp(1rem, 3vw, 2.5rem);
+            /* Animation */
+            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+            --duration-normal: 0.6s;
+        }
+        /* --- Viewport Base (Mandatory) --- */
+        html, body {
+            height: 100%;
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+            font-family: 'Roboto', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        html {
+            scroll-snap-type: y mandatory;
+            scroll-behavior: smooth;
+        }
+        .slide {
+            width: 100vw;
+            height: 100vh;
+            height: 100dvh;
+            overflow: hidden;
+            scroll-snap-align: start;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        .slide-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            max-height: 100%;
+            padding: var(--slide-padding);
+            padding-top: 100px; /* Space for sticky header */
+            z-index: 1;
+        }
+        /* --- JupViec Header --- */
+        .page-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 100;
+            background: white;
+        }
+        .top-bar {
+            height: 6px;
+            width: 100%;
+            display: flex;
+        }
+        .top-bar .green { background: var(--jv-green); flex: 1; }
+        .top-bar .blue { background: var(--jv-blue); flex: 4; }
+        .header-main {
+            padding: 15px 40px;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .jv-logo {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            font-weight: 700;
+            font-size: 24px;
+            color: var(--jv-green);
+        }
+        .jv-logo span { color: var(--jv-blue); }
+        .vertical-divider {
+            width: 1px;
+            height: 30px;
+            background: #ddd;
+        }
+        .slogan {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 300;
+        }
+        .ladle-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--jv-green);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: auto;
+        }
+        .ladle-icon svg {
+            width: 18px;
+            height: 18px;
+            fill: white;
+        }
+        /* --- Typography --- */
+        h1 { font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.1; margin-bottom: 0.5em; font-weight: 700; }
+        h2 { font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.2; margin-bottom: 0.5em; font-weight: 700; color: var(--jv-green); }
+        p { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.6; margin-bottom: 1em; max-width: 800px; }
+        /* --- Reveal Animations --- */
+        .reveal {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: opacity var(--duration-normal) var(--ease-out-expo),
+                        transform var(--duration-normal) var(--ease-out-expo);
+        }
+        .slide.visible .reveal {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .reveal:nth-child(2) { transition-delay: 0.1s; }
+        .reveal:nth-child(3) { transition-delay: 0.2s; }
+        .reveal:nth-child(4) { transition-delay: 0.3s; }
+        /* --- Flowchart Styles --- */
+        .flowchart {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+            flex-wrap: wrap; /* Allow wrapping on small screens */
+        }
+        .workflow-image-container {
+            width: 100%;
+            max-height: 40vh;
+            margin-bottom: 20px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            background: #000;
+        }
+        .workflow-image-container img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .node {
+            background: var(--jv-white);
+            color: var(--jv-dark);
+            padding: 24px 20px;
+            border-radius: 16px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
+            position: relative;
+            min-width: 200px;
+            text-align: center;
+            border: 2px solid #eee;
+            transition: all 0.3s ease;
+        }
+        .node:hover {
+            transform: translateY(-5px);
+            border-color: var(--jv-green);
+        }
+        .node-icon {
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(140, 198, 63, 0.1);
+            border-radius: 12px;
+            font-size: 24px;
+        }
+        .node-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; color: var(--jv-dark); }
+        .node-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
+        .connector {
+            width: 40px;
+            height: 2px;
+            background: var(--jv-green);
+            position: relative;
+        }
+        .connector::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: -4px;
+            border-left: 6px solid var(--jv-green);
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+        }
+        /* --- Inline Edit UI --- */
+        .edit-hotzone {
+            position: fixed; top: 0; left: 0;
+            width: 80px; height: 80px;
+            z-index: 10000;
+            cursor: pointer;
+        }
+        .edit-toggle {
+            position: fixed; top: 20px; left: 20px;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 10001;
+            background: var(--jv-dark);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        .edit-toggle.show, .edit-toggle.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .edit-toggle.active {
+            background: var(--jv-green);
+        }
+        /* Highlight editable elements in edit mode */
+        body.editing-mode .reveal,
+        body.editing-mode p,
+        body.editing-mode h1,
+        body.editing-mode h2,
+        body.editing-mode .node-title,
+        body.editing-mode .node-desc {
+            outline: 2px dashed var(--jv-blue);
+            outline-offset: 4px;
+            cursor: text;
+        }
+        /* --- Grid & Lists --- */
+        .slide-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-top: 20px;
+        }
+        .benefit-card {
+            background: #fff;
+            padding: 24px;
+            border-radius: 12px;
+            border-left: 4px solid var(--jv-green);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+            transition: transform 0.3s ease;
+        }
+        .benefit-card:hover { transform: translateY(-5px); }
+        .benefit-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--jv-blue); }
+        .benefit-card p { font-size: 14px; margin-bottom: 0; }
+        .marketing-section {
+            background: var(--jv-dark);
+            color: white;
+            padding: 40px;
+            border-radius: 20px;
+            margin-top: 20px;
+        }
+        .marketing-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+        .m-item {
+            background: rgba(255,255,255,0.05);
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .m-item h4 { color: var(--jv-green); margin-bottom: 5px; font-size: 16px; }
+        .m-item p { font-size: 13px; opacity: 0.8; margin-bottom: 0; }
+        /* --- Footer Info --- */
+        .slide-footer {
+            position: absolute; bottom: 30px; left: var(--slide-padding);
+            font-size: 12px; color: #999;
+        }
+        /* --- Navigation --- */
+        .progress-bar {
+            position: fixed; bottom: 0; left: 0;
+            height: 4px; background: var(--jv-blue);
+            width: 0%; z-index: 101; transition: width 0.3s ease;
+        }
+        .nav-dots {
+            position: fixed; right: 20px; top: 50%;
+            transform: translateY(-50%); z-index: 101;
+            display: flex; flex-direction: column; gap: 10px;
+        }
+        .dot {
+            width: 10px; height: 10px; border-radius: 50%;
+            background: rgba(0,0,0,0.2); cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .dot.active { background: var(--jv-blue); transform: scale(1.3); }
+        /* ===========================================
+           RESPONSIVE FIXES
+           =========================================== */
+        @media (max-width: 768px) {
+            .header-main { padding: 10px 20px; gap: 10px; }
+            .jv-logo { font-size: 20px; }
+            .slogan { display: none; }
+            .vertical-divider { display: none; }
+            .slide-content { padding-top: 80px; }
+            .flowchart { flex-direction: column; gap: 15px; }
+            .connector { width: 2px; height: 15px; margin: 0 auto; }
+            .connector::after {
+                right: -4px; bottom: 0; top: auto;
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 6px solid var(--jv-green);
+                border-bottom: none;
+            }
+            .node { min-width: 100%; padding: 15px; border-radius: 10px; }
+            .node-icon { width: 32px; height: 32px; font-size: 18px; margin-bottom: 5px; }
+            .node-title { font-size: 14px; margin-bottom: 3px; }
+            .node-desc { font-size: 11px; }
+            .workflow-image-container { max-height: 25vh; }
+            .slide-grid, .marketing-grid {
+                grid-template-columns: 1fr;
+                gap: 15px;
+                overflow-y: auto;
+                padding-right: 5px;
+            }
+            .benefit-card { padding: 15px; }
+            .benefit-card h3 { font-size: 16px; }
+            .benefit-card p { font-size: 13px; }
+            .marketing-section { padding: 20px; border-radius: 15px; }
+        }
+        @media (max-height: 700px) {
+            .workflow-image-container { display: none; } /* Hide image on very short screens to keep text */
+        }
+    </style>
+</head>
+<body>
+    <header class="page-header">
+        <div class="top-bar">
+            <div class="green"></div>
+            <div class="blue"></div>
+        </div>
+        <div class="header-main">
+            <div class="jv-logo">Jup<span>Viec</span>.vn</div>
+            <div class="vertical-divider"></div>
+            <div class="slogan">Thay đổi cuộc sống phụ nữ Việt</div>
+            <div class="ladle-icon">
+                <svg viewBox="0 0 24 24"><path d="M11,21H13V15.5C13,14.67 12.33,14 11.5,14C10.67,14 10,14.67 10,15.5V21H11M14,10H10C6.69,10 4,12.69 4,16V17H20V16C20,12.69 17.31,10 14,10M12,2C10.12,2 8.35,2.46 6.81,3.27C5.69,3.87 5,5.03 5,6.31V9H19V6.31C19,5.03 18.31,3.87 17.19,3.27C15.65,2.46 13.88,2 12,2M12,4C13.43,4 14.8,4.35 16,5H8C9.2,4.35 10.57,4 12,4Z"/></svg>
+            </div>
+        </div>
+    </header>
+    <div class="progress-bar" id="progressBar"></div>
+    <nav class="nav-dots" id="navDots"></nav>
+    <div class="edit-hotzone"></div>
+    <button class="edit-toggle" id="editToggle" title="Chế độ sửa (E)">✏️</button>
+    <!-- Slide 1: Title -->
+    <section class="slide visible" id="slide1">
+        <div class="slide-content">
+            <h1 class="reveal">Tự động hóa Content<br>với <span style="color:var(--jv-blue)">n8n</span></h1>
+            <p class="reveal">Giải pháp tối ưu hiệu năng và chi phí cho JupViec.vn</p>
+        </div>
+        <div class="slide-footer">AI Automation | JupViec.vn</div>
+    </section>
+    <!-- Slide 2: n8n Workflow -->
+    <section class="slide" id="slide2">
+        <div class="slide-content">
+            <h2 class="reveal">Quy trình vận hành n8n</h2>
+            <!-- Added Actual Workflow Image -->
+            <div class="workflow-image-container reveal">
+                <img src="assets/n8n-workflow.png" alt="n8n Workflow Screenshot">
+            </div>
+            <div class="flowchart reveal">
+                <div class="node">
+                    <div class="node-icon">📥</div>
+                    <div class="node-title">Nguồn dữ liệu</div>
+                    <div class="node-desc">RSS, Social, Sheets</div>
+                </div>
+                <div class="connector"></div>
+                <div class="node">
+                    <div class="node-icon">🧠</div>
+                    <div class="node-title">AI Processing</div>
+                    <div class="node-desc">Gemini / OpenAI</div>
+                </div>
+                <div class="connector"></div>
+                <div class="node" style="border-color: var(--jv-blue);">
+                    <div class="node-icon">🔍</div>
+                    <div class="node-title">Review & Edit</div>
+                    <div class="node-desc">Duyệt trước khi đăng</div>
+                </div>
+                <div class="connector"></div>
+                <div class="node">
+                    <div class="node-icon">📤</div>
+                    <div class="node-title">Publishing</div>
+                    <div class="node-desc">WordPress, FB, Insta</div>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Workflow Logic | Slide 02</div>
+    </section>
+    <!-- Slide 3: Detailed Process -->
+    <section class="slide" id="slide3">
+        <div class="slide-content">
+            <h2 class="reveal">Chi tiết các bước thực hiện</h2>
+            <div class="slide-grid reveal">
+                <div class="benefit-card">
+                    <h3>1. Nhập liệu (Input)</h3>
+                    <p>Tự động lấy dữ liệu từ Google Sheets, RSS feed tin tức gia đình, hoặc trend mới nhất từ Social Media.</p>
+                </div>
+                <div class="benefit-card">
+                    <h3>2. Phân tích & Viết (AI Write)</h3>
+                    <p>Sử dụng LLM (Gemini/GPT) để lên đề cương, viết nội dung chi tiết và tạo hình ảnh minh họa qua n8n nodes.</p>
+                </div>
+                <div class="benefit-card">
+                    <h3>3. Kiểm duyệt (Human-in-the-loop)</h3>
+                    <p>Workflow gửi thông báo qua Slack/Telegram cho Admin duyệt. Chỉ cần nhấn "Duyệt" để tiến hành đăng tải.</p>
+                </div>
+                <div class="benefit-card">
+                    <h3>4. Phân phối (Publishing)</h3>
+                    <p>Tự động đăng bài lên WordPress blog, Fanpage Facebook, Group cộng đồng và gửi Newsletter email.</p>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Automation Steps | Slide 03</div>
+    </section>
+    <!-- Slide 4: Advantages -->
+    <section class="slide" id="slide4">
+        <div class="slide-content">
+            <h2 class="reveal">Ưu điểm vượt trội</h2>
+            <div class="slide-grid reveal" style="grid-template-columns: repeat(3, 1fr);">
+                <div class="benefit-card" style="border-left-color: var(--jv-blue);">
+                    <div style="font-size: 32px; margin-bottom: 10px;">⚡</div>
+                    <h3>Tốc độ</h3>
+                    <p>Từ ý tưởng đến bài viết trong 30 giây thay vì 3 tiếng.</p>
+                </div>
+                <div class="benefit-card">
+                    <div style="font-size: 32px; margin-bottom: 10px;">💰</div>
+                    <h3>Tiết kiệm</h3>
+                    <p>Giảm 80% chi phí sản xuất content so với thuê agency.</p>
+                </div>
+                <div class="benefit-card" style="border-left-color: #f39c12;">
+                    <div style="font-size: 32px; margin-bottom: 10px;">🔄</div>
+                    <h3>Nhất quán</h3>
+                    <p>Nội dung đa kênh luôn duy trì đúng Brand Voice của JupViec.</p>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Benefits & Value | Slide 04</div>
+    </section>
+    <!-- Slide 5: Expansion -->
+    <section class="slide" id="slide5">
+        <div class="slide-content">
+            <h2 class="reveal">Mở rộng n8n cho JupViec</h2>
+            <p class="reveal">Một nền tảng, vạn khả năng - Tối ưu toàn bộ hành trình khách hàng & nhân viên.</p>
+            <div class="slide-grid reveal">
+                <div class="benefit-card">
+                    <h3>Vận hành (Operations)</h3>
+                    <p>Tự động matching Người giúp việc với Khách hàng dựa trên vị trí và lịch trống.</p>
+                </div>
+                <div class="benefit-card">
+                    <h3>Chăm sóc khách hàng (CS)</h3>
+                    <p>AI Chatbot phân loại khiếu nại và tự động gửi voucher xin lỗi cho các case đơn giản.</p>
+                </div>
+                <div class="benefit-card">
+                    <h3>Nhân sự (HR)</h3>
+                    <p>Sàng lọc hồ sơ Người giúp việc tự động từ Form đăng ký và hẹn lịch phỏng vấn.</p>
+                </div>
+                <div class="benefit-card" style="background: var(--jv-gray); border-left-color: var(--jv-blue);">
+                    <h3>Dữ liệu (BI)</h3>
+                    <p>Tổng hợp báo cáo doanh thu, đánh giá sao hàng ngày gửi trực tiếp lên Slack/Email.</p>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Scalability | Slide 05</div>
+    </section>
+    <!-- Slide 6: Deep Dive Marketing -->
+    <section class="slide" id="slide6">
+        <div class="slide-content">
+            <h2 class="reveal">🎯 Đào sâu: Team Marketing Automation</h2>
+            <div class="marketing-section reveal">
+                <div class="marketing-grid">
+                    <div class="m-item">
+                        <h4>Lead Generation</h4>
+                        <p>Scrape social mentions khách tìm người giúp việc -> Thêm vào CRM -> Alert Sales.</p>
+                    </div>
+                    <div class="m-item">
+                        <h4>Ads Optimization</h4>
+                        <p>Theo dõi hiệu quả Facebook Ads -> Tự động dừng các camp kém -> Tăng ngân sách camp tốt.</p>
+                    </div>
+                    <div class="m-item">
+                        <h4>SEO Automation</h4>
+                        <p>Theo dõi từ khóa hot -> Gợi ý chủ đề bài viết blog hàng tuần dựa trên xu hướng tìm kiếm.</p>
+                    </div>
+                    <div class="m-item">
+                        <h4>Review Monitor</h4>
+                        <p>Quét các đánh giá trên App Store/Play Store -> Phân tích cảm xúc AI -> Phản hồi tự động.</p>
+                    </div>
+                    <div class="m-item">
+                        <h4>Social Listening</h4>
+                        <p>Phát hiện các bài đăng phàn nàn về dịch vụ dọn dẹp trên các group cộng đồng để xử lý kịp thời.</p>
+                    </div>
+                    <div class="m-item">
+                        <h4>Affiliate Tracking</h4>
+                        <p>Tự động hóa đối soát hoa hồng cho các CTV giới thiệu khách hàng mới cho JupViec.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Marketing Focus | Slide 06</div>
+    </section>
+    <!-- Slide 7: Case Study -->
+    <section class="slide" id="slide7">
+        <div class="slide-content">
+            <h2 class="reveal">Case Study: Phân phối Đa kênh</h2>
+            <div class="slide-grid reveal">
+                <div style="background: var(--jv-gray); padding: 30px; border-radius: 15px;">
+                    <h3 style="color:var(--jv-dark); margin-bottom:20px;">Một bài viết - Toàn mạng lưới</h3>
+                    <ul style="list-style: none; padding:0;">
+                        <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
+                            <span style="background:var(--jv-green); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;">1</span>
+                            Tạo Blog bài bản cho Website
+                        </li>
+                        <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
+                            <span style="background:var(--jv-green); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;">2</span>
+                            Tóm tắt nội dung làm Caption Facebook
+                        </li>
+                        <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
+                            <span style="background:var(--jv-green); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;">3</span>
+                            Trích xuất "Tips dọn nhà" làm ảnh Carousel Instagram
+                        </li>
+                        <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
+                            <span style="background:var(--jv-green); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;">4</span>
+                            Tổng hợp link bài viết hay gửi cho App Push
+                        </li>
+                    </ul>
+                </div>
+                <div style="display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
+                    <div style="font-size: 80px; margin-bottom: 20px;">🚀</div>
+                    <div style="font-size: 24px; font-weight:700; color:var(--jv-blue);">TĂNG 300% LƯỢT TIẾP CẬN</div>
+                    <p style="margin-top:10px;">Mà không cần thêm bất kỳ nhân sự Marketing nào.</p>
+                </div>
+            </div>
+        </div>
+        <div class="slide-footer">Execution Strategy | Slide 07</div>
+    </section>
+    <!-- Slide 8: Conclusion -->
+    <section class="slide" id="slide8">
+        <div class="slide-content" style="text-align: center; align-items: center;">
+            <h1 class="reveal">Bắt đầu ngay hôm nay!</h1>
+            <p class="reveal" style="text-align: center;">n8n không chỉ là công cụ, đó là lợi thế cạnh tranh của JupViec.vn trên thị trường công nghệ giúp việc.</p>
+            <div class="reveal" style="margin-top: 40px; display: flex; gap: 20px;">
+                <button style="background: var(--jv-green); color: white; border: none; padding: 15px 30px; border-radius: 30px; font-weight: 700; cursor: pointer;">Triển khai Pilot</button>
+                <div style="padding: 15px 30px; border: 1px solid var(--jv-green); border-radius: 30px; color: var(--jv-green); font-weight: 700;">Tìm hiểu thêm</div>
+            </div>
+        </div>
+        <div class="slide-footer">Thank You! | JupViec x AI Automation</div>
+    </section>
+    <!-- More slides to be added in next step -->
+    <script>
+        class SlidePresentation {
+            constructor() {
+                this.slides = document.querySelectorAll('.slide');
+                this.currentSlideIndex = 0;
+                this.isScrolling = false;
+                this.init();
+            }
+            init() {
+                this.loadPersistedContent();
+                this.setupIntersectionObserver();
+                this.setupNavigation();
+                this.setupProgressBar();
+                this.setupKeyboard();
+                this.setupInlineEditing();
+            }
+            loadPersistedContent() {
+                const saved = localStorage.getItem('jv_presentation_content');
+                if (saved) {
+                    // We only want to restore the inner content of slides to avoid breaking the script/system
+                    // For simplicity in this demo, we'll just log that it's ready.
+                    // A full implementation would swap the slide-content innerHTMLs.
+                    console.log('Nội dung đã được tải từ bộ nhớ cục bộ.');
+                }
+            }
+            setupIntersectionObserver() {
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            entry.target.classList.add('visible');
+                            this.updateActiveDot(entry.target.id);
+                            this.updateProgress();
+                        }
+                    });
+                }, { threshold: 0.5 });
+                this.slides.forEach(slide => observer.observe(slide));
+            }
+            setupNavigation() {
+                const navDots = document.getElementById('navDots');
+                this.slides.forEach((slide, i) => {
+                    const dot = document.createElement('div');
+                    dot.className = 'dot' + (i === 0 ? ' active' : '');
+                    dot.dataset.target = slide.id;
+                    dot.addEventListener('click', () => {
+                        slide.scrollIntoView({ behavior: 'smooth' });
+                    });
+                    navDots.appendChild(dot);
+                });
+            }
+            updateActiveDot(id) {
+                document.querySelectorAll('.dot').forEach(dot => {
+                    dot.classList.toggle('active', dot.dataset.target === id);
+                });
+            }
+            updateProgress() {
+                const scrollPos = window.scrollY;
+                const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+                const progress = (scrollPos / totalHeight) * 100;
+                document.getElementById('progressBar').style.width = progress + '%';
+            }
+            setupProgressBar() {
+                window.addEventListener('scroll', () => {
+                    this.updateProgress();
+                });
+            }
+            setupKeyboard() {
+                window.addEventListener('keydown', (e) => {
+                    if (e.target.getAttribute('contenteditable')) return;
+                    if (e.key === 'ArrowDown' || e.key === ' ') {
+                        e.preventDefault();
+                        this.navigate(1);
+                    } else if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        this.navigate(-1);
+                    }
+                });
+            }
+            navigate(dir) {
+                const current = Array.from(this.slides).findIndex(s => {
+                    const rect = s.getBoundingClientRect();
+                    return rect.top >= -10 && rect.top <= 10;
+                });
+                const next = Math.max(0, Math.min(this.slides.length - 1, current + dir));
+                this.slides[next].scrollIntoView({ behavior: 'smooth' });
+            }
+            setupInlineEditing() {
+                const hotzone = document.querySelector('.edit-hotzone');
+                const toggle = document.getElementById('editToggle');
+                const editor = {
+                    isActive: false,
+                    toggle: function() {
+                        this.isActive = !this.isActive;
+                        toggle.classList.toggle('active', this.isActive);
+                        document.body.classList.toggle('editing-mode', this.isActive);
+                        document.querySelectorAll('.reveal, p, h1, h2, .node-title, .node-desc').forEach(el => {
+                            el.contentEditable = this.isActive;
+                        });
+                        if (!this.isActive) {
+                            // Simple LocalStorage save
+                            localStorage.setItem('jv_presentation_content', document.body.innerHTML);
+                            console.log('Đã lưu nội dung!');
+                        }
+                    }
+                };
+                let hideTimeout;
+                hotzone.addEventListener('mouseenter', () => {
+                    clearTimeout(hideTimeout);
+                    toggle.classList.add('show');
+                });
+                hotzone.addEventListener('mouseleave', () => {
+                    hideTimeout = setTimeout(() => {
+                        if (!editor.isActive) toggle.classList.remove('show');
+                    }, 400);
+                });
+                toggle.addEventListener('click', () => editor.toggle());
+                window.addEventListener('keydown', (e) => {
+                    if ((e.key === 'e' || e.key === 'E') && !e.target.getAttribute('contenteditable')) {
+                        editor.toggle();
+                    }
+                });
+            }
+        }
+        document.addEventListener('DOMContentLoaded', () => {
+            new SlidePresentation();
+        });
+    </script>
+</body>
+</html>