codymaster 7.0.2 → 7.0.3

package/skills/cm-execution/references/mode-d-rarv.md

@@ -0,0 +1,62 @@
+# Mode D — Autonomous RARV
+
+> Use when: `/cm-start` creates a goal plus a `cm-tasks.json` backlog and you want continuous autonomous execution.
+
+## RARV Cycle
+
+```
+LOOP until backlog empty or user interrupts:
+
+  1. REASON   Read cm-tasks.json → pick highest-priority backlog task
+              Update status → "in_progress"
+              Log: { phase: "REASON", message: "Selected: <title>" }
+
+  2. ACT      Execute using the task's assigned CM skill
+              (cm-tdd, cm-debugging, cm-safe-deploy, etc.)
+              Log: { phase: "ACT", message: "<what was done>" }
+
+  3. REFLECT  Update cm-tasks.json with results
+              Log: { phase: "REFLECT", message: "<outcome>" }
+
+  4. VERIFY   Run cm-quality-gate
+              PASS → status = "done", completed_at = now()
+              FAIL → rarv_cycles++ → retry from REASON
+              rarv_cycles >= 2 → Skill Discovery Fallback:
+                npx skills find "{task keywords}"
+                Found + user approves → install, reset cycles = 0, retry
+                Not found OR cycles >= 3 → status = "blocked"
+              Log: { phase: "VERIFY", message: "✓ passed" | "✗ <error>" }
+
+  5. NEXT     Recalculate stats → pick next task
+```
+
+## `cm-tasks.json` Update Protocol
+After EVERY phase:
+1. Read current `cm-tasks.json`.
+2. Sync state from `openspec/changes/[initiative-name]/tasks.md`.
+3. Find the active task by `id`.
+4. Update `status`, append to `logs[]`, and set timestamps.
+5. Recalculate `stats`:
+   ```js
+   stats.total = tasks.length
+   stats.done = tasks.filter(t => t.status === 'done').length
+   stats.in_progress = tasks.filter(t => t.status === 'in_progress').length
+   stats.blocked = tasks.filter(t => t.status === 'blocked').length
+   stats.backlog = tasks.filter(t => t.status === 'backlog').length
+   stats.rarv_cycles_total = tasks.reduce((sum, t) => sum + (t.rarv_cycles || 0), 0)
+   ```
+6. Set `updated` to the current ISO timestamp.
+7. Write back to `cm-tasks.json`.
+
+## Rules
+- Max 3 retries per task before marking `blocked`.
+- Always log — the dashboard reads logs in real time.
+- Do not batch-skip — execute one task at a time through full RARV.
+- Respect interrupts — if the user sends a message, pause and respond.
+
+## Common Mistakes
+| Mistake | Fix |
+|---|---|
+| Skipping VERIFY when it obviously works | VERIFY is non-negotiable |
+| Marking blocked after 1 fail | Try skill discovery first |
+| Not updating stats after each phase | Dashboard will lie |

package/skills/cm-execution/references/mode-e-triz-parallel.md

@@ -0,0 +1,53 @@
+# Mode E — TRIZ-Parallel ★
+
+> Use when: 3+ tasks can run in parallel, speed matters, and quality cannot be sacrificed.
+
+## TRIZ Principles Applied
+
+| # | Principle | How |
+|---|---|---|
+| 1 | Segmentation | Split by file dependency graph — only truly independent tasks run together |
+| 3 | Local Quality | Each agent runs its own mini quality gate before reporting |
+| 10 | Prior Action | Pre-flight checks file overlaps before dispatch |
+| 15 | Dynamicity | Batch size adapts based on clean runs vs conflicts |
+| 18 | Feedback | Conflict detection uses a shared ledger of modified files |
+| 40 | Composite | Each agent acts as implementer + tester + reviewer |
+
+## Process
+```
+1. ANALYZE     Extract file dependencies from task descriptions
+2. GRAPH       Build dependency graph → group into independent batches
+3. ADAPT       Read parallel history → compute optimal batch size
+4. PRE-FLIGHT  Check conflict ledger for overlaps with running agents
+5. DISPATCH    Send batch with quality contracts
+6. MONITOR     Each agent reports modified files → detect conflicts
+7. VERIFY      Each agent runs mini quality gate before reporting done
+8. RECORD      Update parallel history for future batch sizing
+```
+
+## Quality Contract (per agent)
+```markdown
+You will:
+- Modify ONLY these files: [list]
+- Run tests for your scope before reporting done
+- Report: { files_modified: [...], tests_passed: bool, summary: "..." }
+- HALT and report if you need to touch a file outside your scope
+```
+
+## Persona
+Read `references/persona-dispatch.md`. Typical default is engineer plus self-review responsibility.
+
+## Rules
+- Never dispatch conflicting tasks — pre-flight must pass.
+- Each agent must self-validate.
+- Adaptive sizing is mandatory.
+- File scope is enforced.
+- Conflict means halt until resolved.
+
+## Common Mistakes
+| Mistake | Fix |
+|---|---|
+| Assuming all tasks are independent | Always run dependency analysis |
+| Skipping pre-flight to save time | Pre-flight prevents wasted work |
+| Hardcoding batch size 5 | Start at 2 and let the system adapt |
+| Continuing after first failure | Fix before the next batch |

package/skills/cm-execution/references/mode-f-party.md

@@ -0,0 +1,61 @@
+# Mode F — Party (Persona Rotation, single agent)
+
+> One agent, three voices. Cheaper than Mode B, deeper than Mode A.
+
+## When
+- Task is non-trivial but small enough for one session.
+- You want multi-perspective scrutiny without paying for multiple subagents.
+- Quality matters more than raw speed.
+
+## Process
+```
+1. ARCHITECT   Load agents/architect.md as voice → propose design / approach
+                 Append round to .cm/handoff/party.json
+2. ENGINEER    Load agents/engineer.md as voice → implement against the design
+                 Append round
+3. REVIEWER    Load agents/reviewer.md as voice → critique implementation
+                 verdict: "pass" | "revise" | "block"
+                 Append round
+4. (optional)  SECURITY → load when task touches auth/files/subprocess
+                 Also load references/security-rules.md
+                 Append round
+5. SYNTHESIZE  Write final summary and set handoff.emitted_at
+```
+
+## Stop Conditions
+- Reviewer verdict `pass` → done.
+- Reviewer verdict `revise` → loop back to ENGINEER, max 2 revisions.
+- Reviewer verdict `block` or 3rd revision → escalate to user, do not ship.
+
+## Output Contract — `.cm/handoff/party.json`
+Must match `PartyHandoff` from `src/handoff/contracts.ts`.
+
+```json
+{
+  "schema": "party@1",
+  "emitted_at": "<ISO>",
+  "emitted_by": "cm-execution",
+  "data": {
+    "topic": "<task title>",
+    "rounds": [
+      { "persona": "architect", "output": "...", "ts": "<ISO>" },
+      { "persona": "engineer", "output": "...", "ts": "<ISO>" },
+      { "persona": "reviewer", "output": "...", "verdict": "pass", "ts": "<ISO>" }
+    ],
+    "final": "<one-paragraph synthesis>"
+  }
+}
+```
+
+## Rules
+- Never skip the reviewer round.
+- Never edit a previous round — append only.
+- One agent the whole way — do not dispatch subagents inside party mode.
+- Persona files are the source of truth — load them, do not paraphrase them.
+
+## Common Mistakes
+| Mistake | Fix |
+|---|---|
+| Architect and engineer in the same voice | Reload persona between rounds |
+| Skipping security on auth/file-touching tasks | Security round is mandatory |
+| Reviewer revising more than 2 times | Escalate — that is a planning problem |

package/skills/cm-execution/references/persona-dispatch.md

@@ -0,0 +1,22 @@
+# Persona Dispatch
+
+> Used by Mode B, Mode E, and Mode F.
+
+Pick persona by task signal:
+
+| Task signal | Persona | File |
+|---|---|---|
+| design, architecture, trade-off | architect | `agents/architect.md` |
+| implement, fix, refactor | engineer | `agents/engineer.md` |
+| review, audit, verify | reviewer | `agents/reviewer.md` |
+| secret, auth, input validation, deploy | security | `agents/security.md` |
+| scope, intent, user story | pm | `agents/pm.md` |
+
+## How to pass persona
+- For subagents: use the platform's persona/subagent type when available.
+- Otherwise: load the persona file as the system prompt for the inner call.
+
+## Multi-persona tasks
+Some tasks need two voices:
+- In Mode F: run them as sequential rounds.
+- In Mode B/E: chain them, usually architect first and security reviewer second.

package/skills/cm-execution/references/security-rules.md

@@ -0,0 +1,47 @@
+# Security Rules (Learned: March 2026)
+
+> Code that touches files, subprocesses, or the DOM MUST follow these rules. No exceptions.
+
+Load this reference when the task involves auth, files, subprocesses, user input, DOM rendering, config paths, or deploy.
+
+## Frontend — DOM Safety
+
+| Pattern | Risk | Fix |
+|---|---|---|
+| `innerHTML = \`...${data}...\`` | DOM XSS | `innerHTML = \`...${esc(data)}...\`` |
+| `innerHTML = variable` | DOM XSS | `textContent = variable` |
+| `eval(input)` / `new Function(input)` | Code injection | Avoid entirely |
+| `document.write(data)` | DOM XSS | Use DOM API |
+| `el.setAttribute('on*', data)` | Event injection | `el.addEventListener()` |
+
+Always escape before `innerHTML`, prefer `textContent`, and validate URLs via allowlist.
+
+## Backend — Python
+
+| Pattern | Risk | Fix |
+|---|---|---|
+| `Path(user_input) / "file"` | Path Traversal | `safe_resolve(base, user_input)` |
+| `subprocess.run(f"cmd {arg}", shell=True)` | Command Injection | `subprocess.run(["cmd", arg])` |
+| `open(config["path"])` | Path Traversal | `safe_open(base, config["path"])` |
+| `json.load()` paths unvalidated | Path Traversal | Validate all paths from config via `safe_resolve()` |
+
+Always validate every path from CLI, config, or API against a base directory.
+
+## Backend — Express / Node
+
+| Pattern | Risk | Fix |
+|---|---|---|
+| Missing `app.disable('x-powered-by')` | Info leak | Add after `express()` |
+| No body size limit | DoS | `express.json({ limit: '1mb' })` |
+| `path.resolve(userInput)` without validation | Path Traversal | Check null bytes + ensure path stays under base dir |
+| `Object.assign(config, userInput)` | Prototype Pollution | Filter `__proto__` and `constructor` keys |
+
+## Mandatory Checklist
+- [ ] All user input flowing into FS / subprocess / DOM has been listed
+- [ ] Each entry has explicit validation or escaping
+- [ ] No `shell=True`, `eval`, or unsafe `innerHTML` interpolation remains
+- [ ] Path inputs are validated against a base directory
+- [ ] Test added that proves validation works on a malicious payload
+
+## Escalation
+If you cannot make the code safe within task scope, do not ship. Mark the task `blocked` with reason `security-gap` and dispatch the repo's security review flow.

package/skills/cm-google-form/SKILL.md

@@ -0,0 +1,266 @@
+---
+name: cm-google-form
+description: Google App Script form-to-sheet integration with auto-retry, toast notifications, and Zalo/contact fallback. Reusable across any static website.
+allowed-tools: Read, Write, Edit, Glob, Grep, Browser
+version: 1.0
+priority: HIGH
+---
+
+# Google Forms → Sheet Integration Skill
+
+> **Connect HTML forms → Google Sheets via Google Apps Script.**
+> Auto-retry, toast UI, contact fallback on errors. Zero dependencies, works on any static site.
+
+---
+
+## 🎯 When to Use
+
+| Trigger | Action |
+|---------|--------|
+| User says "create form", "connect Google Sheet" | Activate this skill |
+| User says "form broken", "submit not working" | Debug using Phase 4-5 |
+| User says "add new form to page" | Start from Phase 2 |
+| User says "form for another website" | Start from Phase 1 |
+
+---
+
+## 📋 5-Phase Workflow
+
+```
+Phase 1: DISCOVER → Scan forms, identify fields, determine sheet structure
+Phase 2: PLAN → Design sheet columns, map form fields, create deployment plan
+Phase 3: BUILD → Generate Apps Script + Frontend JS + Toast CSS
+Phase 4: INTEGRATE → Wire forms to JS, add CSS, deploy Apps Script
+Phase 5: VERIFY → Test submit, test retry, test error fallback
+```
+
+> 🔴 **Rule:** NEVER skip Phase 1. Always read existing forms first.
+
+---
+
+## Phase 1: DISCOVER (Scan & Analyze)
+
+**Goal:** Understand what forms exist and what fields they have.
+
+### Actions:
+
+1. **Search for forms** in the project:
+   ```
+   grep -r "data-form-type\|onsubmit\|<form" --include="*.html" .
+   ```
+
+2. **For each form found, extract:**
+
+| Info | How to Find |
+|------|-------------|
+| Form type | `data-form-type` attribute |
+| Fields | `<input name="...">`, `<select name="...">` |
+| Submit handler | `onsubmit` attribute |
+| Page URL | File path |
+
+3. **Ask user** (Socratic Gate):
+   - How many separate Google Sheets? (1 shared sheet or separate?)
+   - What columns does each sheet need?
+   - Is there a fallback contact channel? (WhatsApp, Messenger, Hotline?)
+   - Fallback contact URL (e.g., `https://wa.me/15551234567`)
+
+### Output: Form Inventory Table
+
+```markdown
+| # | Form Type | Pages | Fields | Target Sheet |
+|---|-----------|-------|--------|-------------|
+| 1 | massage   | 7     | name, phone, branch, problem, time, package | Sheet Massage |
+| 2 | course    | 1     | name, phone, goal | Course Sheet |
+```
+
+---
+
+## Phase 2: PLAN (Design & Map)
+
+**Goal:** Map form fields → Sheet columns → Apps Script params.
+
+### Sheet Column Design
+
+For each sheet, define columns in order:
+
+| Column | Source | Always Include |
+|--------|--------|---------------|
+| Timestamp | `new Date()` — auto | ✅ Yes |
+| (form fields) | `e.parameter.xxx` | From inventory |
+| Page Source | `e.parameter.url` | ✅ Yes |
+
+### Naming Convention
+
+| Element | Convention |
+|---------|-----------|
+| Sheet tab name | `Data` |
+| Form attribute | `data-form-type="<type>"` |
+| Hidden URL field | `<input type="hidden" name="url" value="">` |
+| JS global function | `window.submitToGoogleSheet` |
+
+### Deliverables Checklist
+
+- [ ] Apps Script code per sheet
+- [ ] Frontend JS with retry + toast
+- [ ] Toast CSS component
+- [ ] HTML form markup template
+- [ ] Deploy instructions
+- [ ] Verification test plan
+
+---
+
+## Phase 3: BUILD (Generate Code)
+
+### 3A. Google Apps Script Template
+
+> See `templates/apps-script.js` for the full template.
+
+**Key rules:**
+- Always use `doPost(e)` — NOT `doGet`
+- Always wrap in `try/catch`
+- Always return JSON with `{status: "success"}` or `{status: "error", message: "..."}`
+- Column order MUST match `sheet.appendRow([...])` order
+- Tab name MUST match `SHEET_NAME` constant
+
+### 3B. Frontend JavaScript
+
+> See `templates/form-submit.js` for the full template.
+
+**Key features:**
+
+| Feature | Detail |
+|---------|--------|
+| Auto-retry | 3 attempts, exponential backoff (1s → 2s → 4s) |
+| Toast UI | Success (green), Error (red), Retrying (amber) |
+| Phone validation | Vietnamese format: `/^0\d{8,10}$/` |
+| Button states | "Submitting..." → "Retrying (X/3)..." → reset |
+| CORS handling | Handles opaque responses from Apps Script |
+| Fallback | Zalo button in error toast |
+| Auto-dismiss | Success: 6s, Error: 15s, Retrying: 10s |
+
+### 3C. Toast CSS
+
+> See `templates/toast.css` for the full template.
+
+**3 variants:** `--success`, `--error`, `--retrying`
+
+### 3D. HTML Form Markup
+
+> See `templates/form-markup.html` for examples.
+
+**Required attributes:**
+```html
+<form data-form-type="TYPE" onsubmit="window.submitToGoogleSheet(event)">
+  <input type="hidden" name="url" value="">
+  <!-- form fields with name="..." -->
+  <button type="submit">Submit Text</button>
+</form>
+```
+
+---
+
+## Phase 4: INTEGRATE (Wire Everything)
+
+### Step-by-step:
+
+1. **Add Toast CSS** → Append to main CSS file (e.g., `design-system.css`)
+2. **Add Form JS** → Add to shared JS file or create `js/form-handler.js`
+3. **Update HTML forms:**
+   - Add `data-form-type="..."` attribute
+   - Add `onsubmit="window.submitToGoogleSheet(event)"`
+   - Add `<input type="hidden" name="url" value="">`
+   - Ensure all inputs have `name="..."` matching Apps Script params
+4. **Configure URLs:**
+   - Replace placeholder URLs in JS with deployed Apps Script URLs
+5. **Configure fallback contact:**
+   - Replace Zalo URL in JS toast with project's contact URL
+
+### Customization Points
+
+| Setting | Location | Default |
+|---------|----------|---------|
+| Apps Script URLs | JS `URLS` object | placeholder |
+| Fallback contact | Toast Zalo link | `https://zalo.me/...` |
+| Max retries | `fetchWithRetry` arg | 3 |
+| Phone regex | Validation block | `/^0\d{8,10}$/` |
+| Toast auto-dismiss | `showFormToast` timeouts | 6s/15s/10s |
+| Success message | `.then()` block | Customizable |
+| Error message | `.catch()` block | Customizable |
+
+---
+
+## Phase 5: VERIFY (Test & Report)
+
+### Test Checklist
+
+| # | Test Case | Expected | Status |
+|---|-----------|----------|--------|
+| 1 | Submit valid form | Toast success (green) + Zalo opens | |
+| 2 | Submit invalid phone | Toast error "Invalid phone number" | |
+| 3 | Network offline | 3 retries → Toast error with Zalo button | |
+| 4 | Check Google Sheet | New row appears with correct data | |
+| 5 | Button states | Disabled during submit, resets after | |
+| 6 | Toast close button | Toast disappears on click | |
+| 7 | Mobile responsive | Toast visible above sticky CTA | |
+| 8 | Multiple forms same page | Each form submits independently | |
+
+### How to Test Retry
+
+1. Open DevTools → Network tab
+2. Block domain `script.google.com`
+3. Submit form → Should see 3 retry attempts
+4. Unblock → Submit again → Should succeed
+
+### Report Template
+
+```markdown
+## Form Integration Test Report
+
+**Date:** YYYY-MM-DD
+**Pages tested:** X/Y
+
+| Page | Form Type | Submit | Retry | Fallback | Sheet |
+|------|-----------|--------|-------|----------|-------|
+| index.html | massage | ✅ | ✅ | ✅ | ✅ |
+| khoa-hoc.html | course | ✅ | ✅ | ✅ | ✅ |
+
+**Issues found:** None / [list issues]
+**Resolution:** [fixes applied]
+```
+
+---
+
+## ❌ Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|------|
+| Use `alert()` for feedback | Use toast notifications |
+| No retry on failure | Auto-retry 3x with backoff |
+| Silently fail | Show error + contact fallback |
+| Hardcode form URLs | Use config object (`URLS`) |
+| Skip phone validation | Validate before submit |
+| Forget `name` attribute | Every input MUST have `name` |
+| Use `doGet` for form submit | Use `doPost` only |
+| Multiple submit handlers | One shared `submitToGoogleSheet` |
+
+---
+
+## 📑 Templates
+
+| File | Purpose |
+|------|---------|
+| `templates/apps-script.js` | Google Apps Script doPost handler |
+| `templates/form-submit.js` | Frontend JS with retry + toast |
+| `templates/toast.css` | Toast notification CSS component |
+| `templates/form-markup.html` | HTML form examples |
+
+---
+
+## 🔗 Related Skills
+
+| Need | Skill |
+|------|-------|
+| Form UI/UX design | `@[skills/cm-ux-master]` |
+| SEO for forms | `@[skills/cm-dockit]` |
+| Form security | `@[skills/vulnerability-scanner]` |
+| Deployment | `@[skills/deployment-procedures]` |

package/skills/cm-google-form/templates/apps-script.js

@@ -0,0 +1,55 @@
+/**
+ * Google Apps Script — Form to Sheet Handler
+ * 
+ * SETUP:
+ * 1. Create Google Sheet with headers matching appendRow columns
+ * 2. Extensions > Apps Script > paste this code
+ * 3. Deploy > New deployment > Web app
+ *    - Execute as: Me
+ *    - Who has access: Anyone
+ * 4. Copy the deployment URL → use in frontend URLS config
+ * 
+ * CUSTOMIZATION:
+ * - Change SHEET_NAME if tab is not "Data"
+ * - Modify appendRow columns to match your form fields
+ * - Add more e.parameter.xxx for additional fields
+ */
+
+const SHEET_NAME = 'Data';
+
+function doPost(e) {
+    try {
+        const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
+        if (!e || !e.parameter) {
+            return ContentService.createTextOutput(JSON.stringify({ status: 'error', message: 'No data received' }))
+                .setMimeType(ContentService.MimeType.JSON);
+        }
+
+        const p = e.parameter;
+
+        // ═══════════════════════════════════════
+        // CUSTOMIZE: Change columns below to match your form
+        // Column order MUST match Sheet header row
+        // ═══════════════════════════════════════
+        sheet.appendRow([
+            new Date(),           // A: Thời gian (auto)
+            p.name || '',         // B: Họ tên
+            p.phone || '',        // C: SĐT
+            // --- Add your custom fields below ---
+            // p.email || '',      // D: Email
+            // p.branch || '',     // E: Chi nhánh
+            // p.problem || '',    // F: Vấn đề
+            // p.time || '',       // G: Khung giờ
+            // p.package || '',    // H: Gói dịch vụ
+            // p.goal || '',       // I: Mục tiêu
+            // --- End custom fields ---
+            p.url || ''           // Last: Nguồn trang (auto)
+        ]);
+
+        return ContentService.createTextOutput(JSON.stringify({ status: 'success' }))
+            .setMimeType(ContentService.MimeType.JSON);
+    } catch (err) {
+        return ContentService.createTextOutput(JSON.stringify({ status: 'error', message: err.toString() }))
+            .setMimeType(ContentService.MimeType.JSON);
+    }
+}

package/skills/cm-google-form/templates/form-markup.html

@@ -0,0 +1,110 @@
+<!--
+  Form Markup Templates — Google Apps Script Integration
+  
+  RULES:
+  1. Every form MUST have data-form-type="TYPE"
+  2. Every form MUST have onsubmit="window.submitToGoogleSheet(event)"
+  3. Every form MUST include <input type="hidden" name="url" value="">
+  4. Every input/select MUST have name="..." matching Apps Script params
+  5. One submit button with type="submit"
+-->
+
+<!-- ═══════════════════════════════════════ -->
+<!-- EXAMPLE 1: Service Booking (Massage)   -->
+<!-- ═══════════════════════════════════════ -->
+<form data-form-type="massage" onsubmit="window.submitToGoogleSheet(event)">
+    <input type="hidden" name="url" value="">
+    
+    <div class="form-group">
+        <label class="form-label">Họ và tên</label>
+        <input type="text" class="form-input" name="name" placeholder="Nhập họ tên" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Số điện thoại</label>
+        <input type="tel" class="form-input" name="phone" placeholder="0xxx xxx xxx" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Chi nhánh</label>
+        <select class="form-input" name="branch">
+            <option>Chi nhánh 1</option>
+            <option>Chi nhánh 2</option>
+        </select>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Vấn đề quan tâm</label>
+        <select class="form-input" name="problem">
+            <option>Đau cổ vai gáy</option>
+            <option>Mất ngủ</option>
+            <option>Đau lưng</option>
+            <option>Khác</option>
+        </select>
+    </div>
+    
+    <button type="submit" class="btn btn-primary btn-lg" style="width:100%;">Đặt Lịch Ngay</button>
+    
+    <p style="text-align:center;margin-top:12px;font-size:14px;color:#666;">
+        Hoặc gọi: <a href="tel:0559669663" style="color:#C9A84C;font-weight:600;">0559.669.663</a>
+    </p>
+</form>
+
+
+<!-- ═══════════════════════════════════════ -->
+<!-- EXAMPLE 2: Course Registration          -->
+<!-- ═══════════════════════════════════════ -->
+<form data-form-type="course" onsubmit="window.submitToGoogleSheet(event)">
+    <input type="hidden" name="url" value="">
+    
+    <div class="form-group">
+        <label class="form-label">Họ và tên</label>
+        <input type="text" class="form-input" name="name" placeholder="Nhập họ tên" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Số điện thoại</label>
+        <input type="tel" class="form-input" name="phone" placeholder="0xxx xxx xxx" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Mục tiêu học</label>
+        <select class="form-input" name="goal">
+            <option>Chuyển nghề</option>
+            <option>Nâng cấp kỹ năng</option>
+            <option>Chăm sóc gia đình</option>
+        </select>
+    </div>
+    
+    <button type="submit" class="btn btn-primary btn-lg" style="width:100%;">Đăng Ký Tư Vấn</button>
+</form>
+
+
+<!-- ═══════════════════════════════════════ -->
+<!-- EXAMPLE 3: Simple Contact/Lead Form     -->
+<!-- ═══════════════════════════════════════ -->
+<form data-form-type="contact" onsubmit="window.submitToGoogleSheet(event)">
+    <input type="hidden" name="url" value="">
+    
+    <div class="form-group">
+        <label class="form-label">Họ và tên</label>
+        <input type="text" class="form-input" name="name" placeholder="Nhập họ tên" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Số điện thoại</label>
+        <input type="tel" class="form-input" name="phone" placeholder="0xxx xxx xxx" required>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Email (tùy chọn)</label>
+        <input type="email" class="form-input" name="email" placeholder="email@example.com">
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Nội dung</label>
+        <textarea class="form-input" name="message" rows="3" placeholder="Bạn cần hỗ trợ gì?"></textarea>
+    </div>
+    
+    <button type="submit" class="btn btn-primary btn-lg" style="width:100%;">Gửi Yêu Cầu</button>
+</form>