# TIENGHANTOPIK — Phase 2: Visual Foundation (vòng 1)

> **TRẠNG THÁI CUỐI PHASE 2 (Final Consolidation):** giai đoạn **Visual Exploration đã kết thúc**. Tài liệu này là tài liệu thiết kế tích lũy theo từng vòng (R1–R8); **hãy đọc mục 0 trước**, rồi `PHASE2-FINAL-SUMMARY.md`, `PRODUCT-DECISIONS.md`, `OPEN-DECISIONS.md`, `IMPLEMENTATION-READINESS.md`, `PHASE3-HANDOFF.md`. Mọi prototype dùng **dữ liệu minh họa**, không phải dữ liệu production, không có backend/xác thực/Gemini thật.
> **Phân biệt:** quyết định nghiệp vụ *đã khóa* · visual baseline *đã chấp nhận* · thiết kế chấp nhận *có điều kiện* · nghiệp vụ *chưa chốt* · yêu cầu production *chưa triển khai*. Các ghi chú “ĐỀ XUẤT, chưa duyệt” còn lại trong các mục 4b–4m là **trạng thái tại thời điểm vòng đó**; trạng thái hiện hành nằm ở mục 0.
> **Chính sách mới đã khóa — Publication Language V1:** xem mục 0.A. Chính sách này **thay thế** mọi giả định trước đây về việc phải có đủ 5 ngôn ngữ mới được xuất bản.

Phạm vi: chỉ thiết kế. Toàn bộ file nằm trong `design-phase2/`, tách khỏi mọi mã production. Không có backend, Laravel, API hay commit.

| File | Vai trò |
|---|---|
| `tokens.css` | Design tokens 3 lớp (primitive → semantic → state) |
| `exam-taking.html` | Prototype tĩnh màn Exam Taking (xem qua máy chủ cục bộ, ví dụ `python -m http.server` trong thư mục này) |
| `DESIGN-PHASE2.md` | Tài liệu này |
| `homepage.html`, `thu-vien-de/**/index.html` | Prototype Homepage và 11 trang danh mục Thư viện đề, mỗi danh mục một URL riêng (mục 4d, 4e). `exam-library.html` chỉ còn là trang chuyển hướng |
| `catalog.js`, `library.js`, `library.css` | Cây danh mục, helper URL/SEO, dữ liệu mẫu; logic hiển thị trang danh mục |
| `SEO-SITEMAP-PROPOSAL.md` | Sitemap danh mục và bảng URL/H1/title/meta description đề xuất cho 5 ngôn ngữ |
| `site.css`, `site.js` | Giao diện và logic dùng chung của hai trang website (header, footer, bộ chuyển ngôn ngữ, bảng dịch tĩnh) |
| `exam-results.html`, `answer-review.html`, `results.js`, `results.css` | R4: màn Kết quả thi và Xem lại đáp án (mục 4f); `results.js` chứa dữ liệu mẫu, bảng dịch 5 ngôn ngữ và hiển thị |
| `TEST-REPORT-RESULTS.md`, `screenshots-results/` | Báo cáo kiểm thử đa ngôn ngữ/responsive và 21 ảnh chụp R4 |
| `skill-library.html`, `skill-practice.html`, `skills.js`, `skills.css` | R5: Luyện kỹ năng — thư viện bộ bài tập và phiên luyện (mục 4g) |
| `SEO-SKILLS-SITEMAP-PROPOSAL.md`, `TEST-REPORT-SKILLS.md`, `screenshots-skills/` | Sitemap/slug đề xuất, báo cáo kiểm thử R5, 16 ảnh chụp |
| `student-dashboard.html`, `dashboard.js`, `dashboard.css` | R6: Dashboard người học (mục 4i) |
| `TEST-REPORT-DASHBOARD.md`, `screenshots-dashboard/` | Báo cáo kiểm thử R6 (Consolidation + Dashboard), 12 ảnh |
| `login.html`, `register.html`, `forgot-password.html`, `reset-password.html`, `guest-ux.html`, `auth.js`, `auth.css` | R7: Account & Authentication UX và khám phá UX cho khách (mục 4j–4l) |
| `TEST-REPORT-AUTH.md`, `screenshots-auth/` | Báo cáo kiểm thử R7, 13 ảnh |
| `admin-dashboard.html`, `admin-exams.html`, `admin-question-editor.html`, `admin-ai-review.html`, `admin.js`, `admin.css` | R8: Admin UX Foundation (mục 4m) |
| `ADMIN-IA-PROPOSAL.md`, `admin-navigation-map.svg` | Cấu trúc thông tin, khái niệm, trạng thái; sơ đồ điều hướng |
| `TEST-REPORT-ADMIN.md`, `screenshots-admin/` | Báo cáo kiểm thử R8, 14 ảnh |
| `HANDOFF-PHASE2.md` | Bàn giao: đã kiểm chứng / chưa kiểm thử / chưa làm / giả định |

---

## 0. Phân loại trạng thái hiện hành (cuối Phase 2) — đọc mục này trước

> Danh sách đầy đủ kèm nguồn xác nhận: `PRODUCT-DECISIONS.md`. Danh sách còn mở: `OPEN-DECISIONS.md`. Nguồn xác nhận là các brief/quyết định review do người dùng chuyển lại từ ChatGPT qua từng vòng; **không có tài liệu Phase 1 nằm trong dự án** (`E:\TIENGHANTOPIK` chỉ có `tools/` kỹ thuật), nên mọi quy tắc “Phase 1” chỉ lấy từ các brief; nếu mâu thuẫn thì tài liệu Phase 1 gốc thắng.

### A. Quyết định nghiệp vụ đã khóa
**A1. Publication Language V1 (khóa ở vòng tổng hợp cuối):**
1. Mọi câu hỏi cần có **lời giải tiếng Việt** đã được admin duyệt.
2. Mọi câu hỏi cần có **bản dịch tiếng Việt** đã được admin duyệt.
3. Chỉ khi **toàn bộ câu hỏi** đáp ứng hai điều kiện trên, đề mới đủ điều kiện kiểm duyệt nội dung để xuất bản.
4. **Gemini chỉ đề xuất**; admin là người quyết định phê duyệt.
5. Tiếng Anh, Hàn, Trung, Thái **không bắt buộc** để xuất bản V1.
6. Chỉ hiển thị nội dung bổ sung (lời giải/bản dịch ngôn ngữ khác) khi **phiên bản ngôn ngữ đó đã được admin duyệt**.
7. **Không tự dịch nội dung khi người học đang xem.**
8. **Nội dung đề TOPIK gốc phải được bảo toàn** (không dịch/sửa trong vùng đề).
Nội dung AI chưa duyệt không hiển thị cho người học và không tự xuất bản.

**A2. Sản phẩm và Exam Engine:** hai nguồn đề (đề TOPIK theo kỳ, đề mô phỏng TIENGHANTOPIK) dùng chung Exam Engine và luôn phân biệt rõ; câu hỏi có thể thuộc nhóm dùng chung đoạn văn/audio/hình; Luyện đề TOPIK và Luyện kỹ năng là hai chức năng riêng; thi thử chỉ công bố điểm/đáp án/lời giải sau khi hoàn thành toàn bài, không công bố từng phần trong lúc thi; luyện tập xem đáp án + lời giải đã duyệt sau từng câu và đánh dấu “đã xem đáp án”.
**A3. Exam Taking:** mock phải giống đề thật (không thêm hướng dẫn tiếng Việt); ngôn ngữ khóa theo phiên, không bộ chuyển ngôn ngữ trong phiên thi; Nghe → Viết liên tục (không nghỉ, Nghe bị khóa khi sang Viết, thời gian dư bị hủy) → nghỉ 15 phút → Đọc; âm thanh Nghe phát một lần, người học bấm phát, không dừng/tua ở mock, lỗi thì tiếp tục đúng điểm, được chuyển câu và đổi đáp án khi âm thanh chạy, hết âm thanh thì kết thúc phần; Viết theo giấy 원고지 30 ô/hàng, mỗi câu một trang cùng màn hình với đề; đoạn dùng chung ghim khi cuộn; nhãn “Câu trước/Câu sau”.
**A4. Ngôn ngữ giao diện:** 5 ngôn ngữ (vi, en, ko, zh-Hans, th); bộ chuyển ngôn ngữ ở cấp website, được ghi nhớ và kế thừa; nội dung đề giữ tiếng Hàn.
**A5. Exam Library:** 11 danh mục SEO theo ba nhóm (trước kỳ 35: Sơ/Trung/Cao cấp; từ kỳ 35: TOPIK I/II; mô phỏng: TOPIK I/II), mỗi danh mục một URL thật, hai hệ thống trước/từ kỳ 35 không gộp, bỏ lọc năm, giữ tìm kiếm, chọn chế độ thi thử/luyện tập trước khi bắt đầu, không URL cho tổ hợp bộ lọc, không trang danh mục rỗng.
**A6. Kết quả:** Viết chưa chấm → không công bố điểm Nghe/Đọc riêng hay tổng điểm; người học xem lại câu trả lời của mình nhưng chưa thấy đáp án chuẩn/đúng-sai/điểm; không tự tạo thuật toán chấm hay chính sách thời gian trả kết quả.
**A7. Luyện kỹ năng:** hai lớp phân loại độc lập (cấp độ mục tiêu TOPIK I: 1–2, TOPIK II: 3–6; độ khó bộ: Làm quen/Củng cố/Thử thách); cấp mục tiêu do đội biên soạn gán, admin kiểm duyệt, không do AI; xem đáp án chỉ sau khi trả lời; sau khi xem đáp án khóa câu trả lời; chuyển câu trước khi xem không mất bài làm; không điểm tổng kết bộ luyện; không làm lại bộ luyện; production cần hỗ trợ lưu và khôi phục tiến độ; được chủ động xem lời giải/bản dịch ngôn ngữ khác nếu đã duyệt.
**A8. Học tập của tôi:** nhãn “Học tập của tôi”; nằm trong menu tài khoản khi đăng nhập (không phải điều hướng công khai); ưu tiên CTA “Xem kết quả”; không gộp luyện kỹ năng với kết quả thi thử thành một điểm; không điểm năng lực, dự đoán đỗ, streak, leaderboard, gamification; dữ liệu cá nhân bảo vệ bằng xác thực và phân quyền phía máy chủ.
**A9. Chưa khóa nghiệp vụ (giữ nguyên là mở):** Tiếp tục/Làm lại đề thi.

### B. Visual baseline đã chấp nhận (ChatGPT)
Coral Design Foundation · Exam Taking · Homepage · Exam Library R3 (11 danh mục) · hệ thống 5 ngôn ngữ giao diện · Student Dashboard (“Học tập của tôi”) · **Account & Authentication R7 (chấp nhận về visual)** · **Admin Foundation R8 (chấp nhận về visual)**.

### C. Thiết kế chấp nhận có điều kiện
Results và Answer Review (về visual, có điều kiện) · Skill Library và Skill Practice (có điều kiện). Điều kiện cụ thể nằm trong các review R4/R5 (người dùng chuyển lại) và trong `OPEN-DECISIONS.md` (chấm điểm/công bố, định nghĩa “hoàn thành”, lưu tiến độ, cấp độ mục tiêu…).

### D. Nghiệp vụ chưa chốt (tóm tắt — chi tiết `OPEN-DECISIONS.md`)
Quy tắc chấm điểm, thang điểm, cấp độ đạt, chấm phần Viết; công bố/quyền xem lại/thời hạn lưu kết quả; **chính sách khách** (thi thử, luyện kỹ năng, lưu tạm, gắn dữ liệu sau đăng nhập); **phân quyền quản trị**; **cấu trúc đề TOPIK I và đề trước kỳ 35**; Tiếp tục/Làm lại đề thi; quy trình chuyển trạng thái nội dung Admin; định nghĩa “hoàn thành” bộ luyện; xác minh email, độ mạnh mật khẩu, điều khoản/quyền riêng tư; media (định dạng, bản quyền, alt, lưu trữ).

### E. Yêu cầu production chưa triển khai
Toàn bộ backend, cơ sở dữ liệu, API, xác thực/phân quyền thật, gửi email, Gemini (tích hợp, hàng đợi, lỗi), upload/lưu trữ media, lưu và khôi phục tiến độ, chấm điểm, SEO production (routing, sitemap XML, canonical/hreflang thật), phát âm thanh thật, kiểm thử thiết bị thật/trình đọc màn hình/trình duyệt khác Chromium, duyệt bản dịch bởi người bản ngữ. Chi tiết: `IMPLEMENTATION-READINESS.md`.

## 1. Baseline đã đọc và ràng buộc áp dụng

**Kết quả kiểm kê (quan trọng):** trong `E:\TIENGHANTOPIK` chỉ có `tools/ju` (+ `tools.zip`, bản sao của công cụ chẩn đoán hosting). Không tìm thấy tài liệu Phase 1, handoff hay project instructions. Tôi không có nguồn nào để đối chiếu ngoài chính brief Phase 2.
→ Baseline dưới đây **chỉ lấy từ brief**. Reviewer vui lòng đối chiếu với tài liệu Phase 1 gốc (câu hỏi Q1).

Từ `tools/ju/README.md` chỉ lấy được bối cảnh kỹ thuật: stack dự kiến Laravel + MySQL, Firebase Auth, Gemini, chạy trên shared hosting. Hệ quả cho thiết kế: giữ giao diện nhẹ (CSS thuần, ít JS nặng, font hạn chế).

**Ràng buộc đang áp dụng (từ brief, không thay đổi):**
1. Hai nguồn đề — *Đề TOPIK theo kỳ* và *Đề mô phỏng TIENGHANTOPIK* — dùng chung Exam Engine, phân biệt rõ nguồn → badge nguồn đề cố định ở header.
2. Câu hỏi có thể thuộc nhóm dùng chung đoạn văn / bài nghe / ngữ cảnh → khối ngữ cảnh đặt trên cụm câu hỏi và cố định khi cuộn; không thêm nhãn tiếng Việt vào vùng đề.
3. Lời giải/bản dịch Gemini phải được admin duyệt trước khi xuất bản → chỉ nội dung đã duyệt mới có chỗ hiển thị trong màn luyện tập (chưa thiết kế vòng này).
4. Luyện tập: xem đáp án + lời giải đã duyệt sau từng câu, hệ thống đánh dấu “đã xem đáp án” (chưa thiết kế vòng này; token trạng thái đã chừa chỗ).
5. Thi thử: điểm, đáp án, lời giải chỉ sau khi nộp toàn bộ đề; không hiện kết quả từng phần. **Prototype không chứa đáp án đúng ở bất kỳ đâu** trong dữ liệu/DOM; hộp thoại nộp bài chỉ có số lượng (đã trả lời / chưa trả lời / đánh dấu).

**Constraint thực tế của nền tảng học–thi TOPIK:** văn bản Hàn dài, ký hiệu khoanh số ①–④, ô trống ㉠㉡, ký hiệu “※”, câu hỏi theo nhóm, đồng hồ đếm ngược, 50 câu cần điều hướng nhanh, người dùng thi trên cả máy tính và điện thoại, ngôn ngữ giao diện tiếng Việt xen nội dung tiếng Hàn.

**Skills đã dùng:** `design-system` (cấu trúc token 3 lớp). `redesign-existing-projects` không áp dụng (không có giao diện cũ). `ui-ux-pro-max`, `ui-styling`, `design` không kích hoạt thêm: nội dung đủ nhỏ để làm trực tiếp, và `ui-styling` thiên về shadcn/Tailwind — chưa quyết định stack front-end. Không dùng Agent Workflow Skills.

---

## 2. Phân tích tham khảo DOL (2 nguồn: dolenglish.vn và tuhoc.dolenglish.vn)

Quan sát thực tế: chủ đạo trắng, nền kem/đào nhạt ở hero; một màu nhấn đỏ-coral đậm (đo được khoảng `#D14242`) cho nút và link; chữ gần như xanh-đen (`#242938`); font Inter; nút bo ~8px, phẳng; số liệu lớn làm bằng chứng uy tín; trang tự học chia khối theo kỹ năng với tiêu đề ~32px và thẻ đề có “bìa” màu riêng; điều hướng dưới (bottom nav) trên mobile.

**Học nguyên tắc:**
- Một màu nhấn duy nhất, dùng tiết kiệm trên nền trắng → CTA luôn nổi.
- Tiêu đề lớn, đậm, ngôn ngữ trực tiếp; phần nhấn bằng màu.
- Nhóm nội dung theo kỹ năng, mỗi đề là một thẻ nhận diện được.
- Nút phẳng, bo vừa, chạm to; không đổ bóng nặng.

**Không sao chép:** logo, hình “bìa” đề, dải cam kết/số liệu học viên, ảnh người, màu chính xác `#D14242`, phông Inter + nền navy, cấu trúc hero, copy, tên phương pháp.

**Cách TIENGHANTOPIK khác biệt:** coral ngả cam (`#CF3F28` hành động / `#F26B52` thương hiệu) thay vì đỏ-hồng; ink ấm (`#1F1D1A`) và nền xám ấm thay vì navy; font Be Vietnam Pro + Noto Sans KR (thiết kế cho tiếng Việt và Hàn); ký hiệu riêng là “한” trong chip coral và ①②③④ dạng nút tròn; ngôn ngữ thị giác lấy từ phiếu thi/giấy bài TOPIK (khung, số khoanh, đường gạch chân ô trống) thay vì ảnh học viên.

---

## 3. Design Foundation đề xuất

### 3.1 Màu — theo vai trò

| Vai trò | Token | Giá trị | Ghi chú tương phản |
|---|---|---|---|
| Nền trang | `--bg-page` | `#FAF9F7` | off-white ấm, giảm chói khi đọc lâu |
| Bề mặt thẻ | `--bg-surface` | `#FFFFFF` | |
| Chữ chính / ink | `--text-primary` | `#1F1D1A` | 17:1 |
| Chữ phụ | `--text-secondary` | `#3F3B36` | 11:1 |
| Chữ mờ | `--text-muted` | `#77726A` | 4.9:1 trên trắng |
| Viền thường / mạnh | `--border` / `--border-strong` | `#D9D5CE` / `#928D85` | viền điều khiển ≥3:1 |
| **Thương hiệu** | `--brand` | coral `#F26B52` | logo, mảng lớn, minh họa; **không** dùng làm chữ nhỏ (3.2:1) |
| **Hành động chính** | `--action` | coral `#CF3F28` | chữ trắng 4.8:1; hover `#AE311D` |
| Nền chọn | `--action-tint` | `#FFF4F1` | nền đáp án đang chọn |
| Focus | `--focus` | xanh `#1F5FA8` | khác coral để focus không lẫn với “đã chọn” |
| Lỗi | `--state-error` | mận `#A31D45` | 7.4:1; luôn kèm biểu tượng + chữ |
| Thành công/đúng | `--state-success` | xanh lá `#1D7A4B` | chỉ dùng ở kết quả/ôn tập, không dùng trong lúc thi |
| Cảnh báo / đánh dấu | `--state-flag` | hổ phách `#7A4F00` | |
| Thông tin | `--state-info` | xanh `#1F5FA8` | |

**Quy ước trạng thái (không chỉ dựa vào màu):**
Coral = thương hiệu + hành động + “đang chọn”; **không** là màu lỗi/cảnh báo. Lỗi dùng mận + biểu tượng cảnh báo + câu chữ. Trạng thái câu hỏi mã hóa bằng hình dạng:
đã trả lời = ô đặc đen · chưa trả lời = ô viền rỗng · đang xem = vòng coral hai lớp · đánh dấu xem lại = góc tam giác + nút cờ “đã nhấn” · cùng nhóm = gạch coral dưới ô. Mỗi ô còn có `aria-label` đầy đủ.

Lưu ý: “đã trả lời” cố ý dùng ink đặc, không dùng coral hay xanh lá, để trong lúc thi không có tín hiệu “đúng/sai” nào về mặt màu.

### 3.2 Typography

- UI & tiếng Việt: **Be Vietnam Pro** (400/500/600/700). Nội dung Hàn: **Noto Sans KR** (400/500/700). Fallback hệ thống: Malgun Gothic, Apple SD Gothic Neo.
- Số liệu (đồng hồ, tiến độ, số câu): cùng font + `tabular-nums`.
- Thang: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 44 px. Tiêu đề 1.25 line-height; UI 1.5; đọc tiếng Việt 1.7; **đọc tiếng Hàn 1.9**.
- Đoạn đọc/câu hỏi Hàn: 18px, `word-break: keep-all`, độ rộng tối đa ~44rem (≈ 40–45 ký tự Hàn/dòng).
- Cỡ chữ nội dung thi tối thiểu 18px; không có chữ nhỏ hơn 12px; không dùng chữ hoa toàn bộ cho văn bản dài.

### 3.3 Spacing, lưới, hình khối

- Spacing nền 4px: 4/8/12/16/20/24/32/40/48/64.
- Container 1200px. Màn thi: cột nội dung linh hoạt + sidebar điều hướng 304px, khoảng cách 32px; dưới 960px chuyển thành một cột, điều hướng thành bottom sheet.
- Bo góc: 6 (nhỏ) / 10 (nút, ô đáp án) / 14 (thẻ) / pill (chip, tiến độ). Viền 1px; viền chọn 2px.
- Bóng: **không dùng** ở thẻ/nút. Chỉ `--shadow-pop` cho hộp thoại và bottom sheet. Không gradient. Trang trí duy nhất có chức năng: gạch nhóm, tam giác đánh dấu.
- Mục tiêu chạm tối thiểu 44px.

### 3.4 Thành phần (đã có trong prototype)

- **Nút:** primary (coral đặc), secondary (viền), ghost; disabled = nền xám + chữ xám + `cursor:not-allowed`.
- **Thẻ:** trắng, viền 1px, bo 14. Có hai loại: khối ngữ cảnh (đoạn văn/bài nghe) và khối câu hỏi.
- **Đáp án:** hàng toàn chiều rộng, nút tròn ①–④; hover = đổi viền/nền nhạt; **chọn** = viền 2px coral + nền coral nhạt + số tròn đặc coral + dấu ✓; focus = viền ngoài 3px xanh; vùng bấm là cả hàng (radio thật).
- **Form/lỗi:** nhãn luôn hiện, thông báo lỗi dưới trường (mận + biểu tượng + câu chữ), không chỉ viền đỏ. Chưa có form phức tạp trong màn này.
- **Điều hướng:** header (logo, nguồn đề, tên đề, đồng hồ, Nộp bài); thanh tiến độ; lưới 50 câu; thanh thao tác “Câu trước / Câu sau” (đi từng câu một, kể cả trong nhóm dùng chung), dính đáy màn hình.

### 3.5 Nguyên tắc thể hiện câu hỏi TOPIK

0. **Vùng đề thi = bản sao đúng đề thật (cả đề theo kỳ lẫn đề mô phỏng):** chỉ hiển thị nội dung có trong đề (hướng dẫn tiếng Hàn “※ [22~24] …”, đoạn văn/bài nghe, câu hỏi, đáp án). Không thêm nhãn, chú thích hay hướng dẫn tiếng Việt vào vùng này. Tiếng Việt chỉ nằm ở giao diện hệ thống bao quanh (header, điều hướng, hộp thoại nộp bài) và ở nhãn ẩn cho trình đọc màn hình.
1. Hướng dẫn nhóm (“※ [22~24] …”) đứng riêng phía trên, trước ngữ cảnh.
2. Ngữ cảnh chung nằm một thẻ riêng và **cố định (sticky) ngay dưới header khi cuộn qua các câu của nhóm**; không nhân bản trong từng câu. Trên mobile thẻ này cao tối đa 34% màn hình và tự cuộn bên trong.
3. Số câu là khối đen vuông; thân câu hỏi ở 18px/500.
4. Đáp án dùng ký hiệu ①–④ đúng như đề giấy; tên đọc cho trình đọc màn hình là “Đáp án 1…”.
5. Ô trống ㉠ có gạch dưới để khớp đề in.
6. Trạng thái trả lời thể hiện bằng ô đáp án được chọn và lưới điều hướng; không có dòng chữ chú thích trong vùng đề. “Đánh dấu” và “Bỏ chọn” là nút biểu tượng (có tên cho trình đọc màn hình).
7. Không có bất kỳ gợi ý đúng/sai, “xem đáp án”, hay điểm tạm thời trong chế độ thi.

---

## 4. Prototype Exam Taking (`exam-taking.html`)

Thể hiện: header + badge nguồn đề + đồng hồ; thanh tiến độ; điều hướng 50 câu với đủ trạng thái; nhóm câu 22–24 dùng chung đoạn văn (có biến thể **bài nghe** — chỉ giao diện); các phương án; đã chọn/chưa trả lời; chọn, bỏ chọn, đánh dấu xem lại; chuyển nhóm; nộp bài với hộp xác nhận chỉ có số liệu.
Thanh công cụ đen trên cùng chỉ là công cụ xem prototype (đổi nguồn đề, đổi Đọc/Nghe), không thuộc giao diện thi.
Đã kiểm thử trực quan trên desktop và 375px: không cuộn ngang, sheet điều hướng hoạt động. Chưa kiểm thử với trình đọc màn hình thật, chưa đo tương phản bằng công cụ ngoài (số liệu tương phản ở trên là tính tay).

Giới hạn: dữ liệu mẫu; câu hỏi tiếng Hàn do tôi soạn để minh họa (nên được người biết tiếng Hàn kiểm tra nếu dùng lại); Prev/Next và nhảy câu ngoài nhóm 22–24 chỉ hiện thông báo; không có bước kết quả.

---

## 4b. Cấu trúc phiên thi và phần Viết (bổ sung theo ghi chú reviewer)

**Quy tắc do reviewer cung cấp (đã áp dụng vào prototype):**
1. Nghe và Viết thi liền một phiên, tổng khoảng 110 phút, trong đó Viết 50 phút. Hết bài nghe là chuyển ngay sang Viết, không nghỉ.
2. Khi chuyển sang Viết: đáp án Nghe bị khóa, không sửa được; thời gian Nghe còn dư bị hủy, **không cộng** vào Viết (Viết luôn bắt đầu đúng 50:00).
3. Sau Nghe–Viết được nghỉ tối đa 15 phút, rồi mới sang Đọc.
4. Viết gồm câu 51–52 (điền câu, mỗi câu hai chỗ trống ㉠㉡, 10 điểm mỗi chỗ), 53 (mô tả biểu đồ, 200–300 ký tự, 30 điểm), 54 (viết luận, 600–700 ký tự, 50 điểm).
5. Giao diện Viết giống giấy thi thật và đếm được ký tự ở câu 53, 54.

**Luồng trong prototype** (chuyển bằng thanh công cụ đen; nút “Mô phỏng: hết bài nghe” thể hiện bước tự chuyển):
Nghe → *(tự động, không dừng)* Viết → Giờ nghỉ → Đọc.
- Thanh các phần thi (Nghe · Viết · Nghỉ · Đọc) nằm trong dải tiến độ; phần đã qua có dấu ✓.
- Phần Nghe: không có nút nộp, đồng hồ hiện “Theo bài nghe” vì nhịp do bài nghe quyết định.
- **Âm thanh phần Nghe (theo ghi chú reviewer):** một file audio duy nhất cho cả phần, chạy từ đầu đến cuối đúng một lần; ở chế độ thi thử **không có nút tạm dừng/tua**. Thí sinh **bấm nút phát một lần** để bắt đầu (trạng thái “Chưa phát”); sau đó nút biến mất. Thanh trạng thái cố định phía trên có biểu tượng loa, “Đang phát · không thể tạm dừng”, thanh tiến độ, thời gian đã phát / tổng. **Nếu audio lỗi giữa chừng:** hiện trạng thái lỗi (biểu tượng cảnh báo + chữ, màu mận) rồi tự tiếp tục đúng vị trí đang nghe, không phát lại từ đầu. **Trong lúc audio chạy, thí sinh được chuyển câu tự do và đổi đáp án.** Hết audio là kết thúc phần Nghe ngay: đáp án khóa và tự chuyển sang Viết, không có đường quay lại. Nút “Mô phỏng: lỗi âm thanh” và “hết bài nghe” trên thanh công cụ đen dùng để xem hai trạng thái này.
- **Nhóm câu hỏi phần Nghe:** nhiều đoạn nghe có hai câu hỏi một lần (đề thật: các cặp như 21–22, 23–24 … 49–50). Mỗi nhóm hiển thị trên một trang với dòng hướng dẫn “※ [21~22] 다음을 듣고 물음에 답하십시오.” và hai câu; ô số của hai câu trong lưới điều hướng được gạch chung. Ngữ cảnh của nhóm là chính bài nghe nên không có khối văn bản; thanh trạng thái âm thanh giữ vị trí cố định như đoạn văn ở phần Đọc. Chưa thiết kế các dạng câu nghe khác (chọn tranh, chọn câu đáp…).
- Lúc chuyển: một thông báo không chặn ở đầu trang (“Phần Nghe đã kết thúc, đáp án đã khóa, phần Viết bắt đầu ngay”), tự ẩn sau 12 giây. Không có màn hình/nút trung gian.
- Phần Viết: điều hướng chỉ gồm 51–54; **không có đường quay lại câu Nghe**.
- Giờ nghỉ: màn hình riêng, đếm ngược 15:00, nút “Bắt đầu phần Đọc”; hết giờ tự vào phần Đọc (giả định).

**Màn hình phần Viết (`exam-taking.html`, chọn Phần thi: Viết):**
- **Mỗi câu một trang riêng (51, 52, 53, 54 là bốn trang).** Trên mỗi trang, phần đề (hướng dẫn, văn bản hoặc biểu đồ) và giấy trả lời hiển thị chung: phần đề được ghim cố định phía trên, giấy 원고지 cuộn bên dưới nên vừa viết vừa nhìn được đề. “Câu trước / Câu sau” và danh sách 51–54 chuyển trang. (Reviewer đã xác nhận cách hiểu này.)
- 51, 52: khối văn bản đề (khung viền như đề giấy), ㉠ và ㉡ mỗi chỗ có một ô viết kiểu 원고지 (2 hàng), một câu mỗi ô, không xuống dòng.
- 53: đề + biểu đồ cột vẽ bằng SVG (2 chuỗi dữ liệu phân biệt bằng **nét gạch chéo và màu đặc**, không chỉ màu; số liệu hiện trên cột), rồi giấy 원고지.
- 54: đề (khung gạch đầu dòng ba ý) + giấy 원고지.
- Giấy 원고지: lưới ô vuông, mỗi ký tự một ô, 30 ô/hàng trên desktop, 15 ô/hàng trên màn hình hẹp; số hàng tối thiểu theo yêu cầu của câu (53: 300 ô; 54: 700 ô) và giấy tự dài thêm nếu viết vượt. Gõ trực tiếp vào lưới: lớp hiển thị vẽ **mỗi ký tự đúng một ô** (chữ không tràn ô, kể cả chữ số, chữ Latin và dấu câu), còn một textarea trong suốt phía trên nhận phím và bộ gõ tiếng Hàn. Xuống dòng kết thúc đoạn và chuyển sang hàng mới. Con trỏ nhấp nháy theo ô; phím mũi tên lên/xuống đi theo hàng ô.
- Bộ đếm ký tự dưới giấy câu 53, 54: số ký tự, khoảng yêu cầu, trạng thái bằng chữ + biểu tượng (Chưa viết / Chưa đủ / Trong khoảng yêu cầu / Vượt quá). Không chặn nhập khi vượt.
- Điều hướng Viết có thêm trạng thái “mới trả lời một phần” (ô nửa đặc) cho 51–52 khi mới điền một trong hai chỗ trống.

**Quy ước đếm hiện tại:** mỗi ký tự là một, **tính cả dấu cách và dấu câu**, không tính xuống dòng. Đây là giả định (xem câu hỏi 13).

**Giới hạn đã biết:**
- Tôi không xác minh được qua tìm kiếm số ô mỗi hàng và cách đếm của giấy thi chính thức (chỉ xác nhận yêu cầu 200–300 và 600–700 ký tự). **30 ô/hàng đã được reviewer xác nhận đúng.** Còn là giả định: 60 ô cho mỗi chỗ trống ở 51–52 và số hàng tối thiểu của 53 (10 hàng = 300 ô) và 54 (24 hàng = 720 ô).
- Chữ số và chữ cái Latin hiện chiếm một ô mỗi ký tự, chưa theo quy tắc “hai ký tự một ô” của 원고지 (xem câu hỏi 13). Chưa kiểm thử bộ gõ tiếng Hàn trên điện thoại thật, kéo chọn văn bản và dán văn bản dài vào giấy.
- Nội dung đề 51–54 và biểu đồ do tôi soạn để minh họa bố cục, không phải đề thật. Chưa đối chiếu với đề công khai (từ kỳ 35 trở đi) vì không có tài liệu trong dự án.

---

## 4c. Đa ngôn ngữ (bổ sung vòng này)

### Ba lớp nội dung (không trộn lẫn)
| Lớp | Là gì | Trong prototype |
|---|---|---|
| **UI Language** | Menu, nút, hướng dẫn hệ thống, trạng thái, thông báo, điều hướng, nhãn trợ năng | Đổi được 5 ngôn ngữ bằng bảng dịch tĩnh trong `exam-taking.html` |
| **Exam Content** | Đề TOPIK gốc tiếng Hàn: hướng dẫn “※”, đoạn văn, câu hỏi, đáp án, đề viết, biểu đồ, ô 원고지, bài viết của thí sinh | Luôn tiếng Hàn, đánh dấu `lang="ko"`, **không đổi khi đổi UI Language** |
| **Explanation / Translation** | Lời giải, bản dịch do AI đề xuất và admin duyệt | **Chưa thiết kế, chưa quyết định hỗ trợ 5 ngôn ngữ.** Không có pipeline dịch, không có dịch bằng AI |

Ngôn ngữ hỗ trợ: `vi` (mặc định tạm thời), `en`, `ko`, `zh-Hans` (quy ước tạm thời), `th`.

### Nguyên tắc UX đa ngôn ngữ
1. Ngôn ngữ chỉ ảnh hưởng chữ trên giao diện hệ thống. Không bao giờ thay đổi, dịch hay dựng lại nội dung đề, và không đụng đến đáp án, bài viết, cờ đánh dấu, đồng hồ, audio, phần thi hiện tại.
2. **Ngôn ngữ cố định trong suốt một phiên thi** (Nghe, Viết, Nghỉ, Đọc): được kế thừa lúc bắt đầu phiên và không đổi được trong lúc thi (xem “Vị trí chọn ngôn ngữ”).
3. Không dùng quốc kỳ. Mỗi ngôn ngữ được nhận diện bằng **tên bản ngữ** (Tiếng Việt, English, 한국어, 简体中文, ไทย) kèm mã ngắn VI/EN/KO/ZH/TH, và mỗi mục có thuộc tính `lang` riêng để đọc đúng giọng.
4. Mọi chuỗi UI phải chịu được độ dài khác nhau: cho phép xuống dòng, không cắt chữ quan trọng, không dựa vào độ rộng cố định. Nút có chiều cao tối thiểu 44px nhưng cao hơn được.
5. Trạng thái vẫn không chỉ dựa vào màu (xem 3.1); điều này không phụ thuộc ngôn ngữ.
6. Bảng dịch tạm do Claude soạn, **cần người bản ngữ và chuyên môn thi TOPIK duyệt** trước khi dùng thật.

### Vị trí chọn ngôn ngữ (QUYẾT ĐỊNH UX MỚI của ChatGPT, thay thế bản trước)
Bản trước của prototype đặt bộ chuyển ngôn ngữ trong header Exam Taking. **Đã gỡ bỏ.** Quyết định mới:
- **Language switcher thuộc giao diện website chung, không thuộc Exam Engine.** Người dùng chọn ngôn ngữ ở trang chủ hoặc các trang thông thường (hỗ trợ `vi`, `en`, `ko`, `zh-Hans`, `th`; mặc định tạm thời `vi`).
- **Ghi nhớ** ngôn ngữ đã chọn (cách ghi nhớ ở production là việc của website, chưa quyết định).
- **Exam Engine kế thừa** ngôn ngữ đó khi bắt đầu phiên thi.
- **Không hiển thị language switcher trong lúc thi** và ngôn ngữ **không tự đổi** trong một phiên đang diễn ra (kể cả khi chuyển Nghe → Viết → Nghỉ → Đọc, khi có banner/hộp thoại, hoặc khi giá trị đã ghi nhớ bị đổi từ nơi khác).
- **Khi hoàn thành bài thi**, giao diện kết quả tiếp tục dùng ngôn ngữ đã chọn (màn kết quả chưa thiết kế).
- **Nội dung đề TOPIK gốc vẫn tiếng Hàn.**
- Hệ thống dịch giao diện đã làm được **giữ nguyên** (bảng dịch tĩnh, 5 ngôn ngữ, 92 khóa). Nhóm khóa `lang.*` (tên menu, chú thích) được giữ lại dành cho switcher của trang chủ; Exam Taking không dùng.
- **Trong prototype:** `?lang=vi|en|ko|zh-Hans|th` giả lập lựa chọn đã làm ở website (thứ tự ưu tiên: tham số URL → giá trị đã ghi nhớ `tht-lang` trong `localStorage`, **chỉ đọc**, Exam Engine không ghi → `vi`). Giá trị không hợp lệ bị bỏ qua. Ngôn ngữ được xác định một lần lúc tải trang rồi khóa. Thanh công cụ đen (chỉ dùng để xem thử, không thuộc giao diện thi) có liên kết VI/EN/KO/ZH/TH; bấm là **tải lại trang = bắt đầu phiên thi mới**.
- **Chưa thiết kế (đúng giới hạn):** trang chủ, language switcher của website (desktop/mobile), màn kết quả.

### Typography cho 5 hệ chữ
| Ngôn ngữ UI | Phông giao diện | Line-height UI | Ghi chú |
|---|---|---|---|
| vi, en | Be Vietnam Pro → Noto Sans KR | 1.5 | Dấu tiếng Việt cần phông có đủ dấu chồng |
| ko | Noto Sans KR → Be Vietnam Pro | 1.6 | |
| zh-Hans | Noto Sans SC → Be Vietnam Pro | 1.6 | Không letter-spacing |
| th | Noto Sans Thai → Be Vietnam Pro | **1.75** | Dấu thanh/nguyên âm chồng nên cần dòng cao; cỡ chữ UI nhỏ tăng ~1px (12→13, 14→15, 16→17) vì chữ Thái nhìn nhỏ hơn |
| Nội dung đề (`lang="ko"`) | Noto Sans KR | 1.9 (đọc), 18px | Không đổi theo UI Language |

- `letter-spacing` của nhãn nhỏ dùng token `--track` (0.04em cho vi/en, **0** cho ko/zh/th).
- Số liệu luôn `tabular-nums`; đồng hồ và số câu không đổi định dạng theo ngôn ngữ (chưa xử lý định dạng ngày/số theo locale).
- Thai không có dấu cách giữa từ: dựa vào ngắt từ của trình duyệt (`lang="th"`) và `overflow-wrap:anywhere` cho nút/nhãn.

### Quy tắc chống tràn chữ và responsive
- Nút, huy hiệu, ghi chú, dòng chú giải, hàng tóm tắt: `overflow-wrap:anywhere`, chữ được xuống dòng, chiều cao nút tăng theo nội dung.
- Header mobile bố trí theo lưới: hàng 1 = logo, đồng hồ; hàng 2 = huy hiệu nguồn đề + tên đề (được xuống dòng) và nút kết thúc/nộp. Dòng meta (có tên thí sinh) chỉ hiện từ desktop, cắt bằng dấu … khi chật.
- **Header desktop 961–1100px (vấn đề chật đã xử lý):** sau khi gỡ language switcher, ở 961–1100px chỉ hiển thị biểu tượng logo (ẩn chữ TIENGHANTOPIK), thu khoảng cách; trên 1100px chữ logo trở lại. Đã kiểm tra tự động 961, 1100 và 1101px × 5 ngôn ngữ × 4 phần thi: header một hàng (cao 65px), huy hiệu cùng hàng với tên đề, không cắt tên đề, không cắt dòng meta.
- Thanh thao tác dưới đáy mobile: “Câu trước / Câu sau” + nút giữa chỉ hiển thị **tiến độ dạng số** (ví dụ `19/50`, tên đầy đủ nằm trong `aria-label`) để không vỡ chữ ở vi/th.
- **Đề ghim ở phần Viết trên mobile (tối ưu mới):** chiều cao tối đa giảm từ 46% còn 34% màn hình (tự cuộn bên trong), và có **nút thu gọn/mở rộng đề** (biểu tượng mũi tên, `aria-expanded`, nhãn đọc được dịch 5 ngôn ngữ). Thu gọn: chỉ còn số câu + một dòng hướng dẫn (cắt …) cao ~57px, chừa chỗ cho giấy 원고지; bấm lại để mở. Trạng thái thu gọn được giữ khi chuyển qua lại giữa các câu. Chỉ là giao diện, không đổi logic thi; desktop không có nút này.
- Câu hỏi mobile: số câu và đề chiếm một hàng, hai nút Đánh dấu/Bỏ chọn xuống hàng dưới để đề tiếng Hàn dài không bị ép hẹp.
- Thanh các phần thi (Nghe · Viết · Nghỉ · Đọc) dàn đều trên mobile.

### Trạng thái focus / selected / disabled (không đổi theo ngôn ngữ)
- **Focus:** viền 3px xanh dương `--focus`, cách 2px, ở mọi điều khiển (nút, ô đáp án, mục ngôn ngữ, giấy 원고지).
- **Selected:** đáp án = viền 2px coral + nền coral nhạt + số tròn đặc + dấu ✓; ngôn ngữ = như trên; ô điều hướng hiện tại = vòng coral hai lớp.
- **Disabled:** nền xám + chữ xám + `cursor:not-allowed` (ví dụ “Câu trước” ở câu đầu).
- **Lỗi/cảnh báo:** màu mận + biểu tượng tam giác + chữ (không dùng coral).

---

## 4d. Homepage và Exam Library (vòng này)

> **Cập nhật R3:** các mô tả trong mục này về bộ chuyển nguồn đề (Tất cả / theo kỳ / mô phỏng), bộ lọc cấp độ, bộ lọc năm thi và tham số `?source=` **đã được thay thế** bằng điều hướng theo danh mục có URL riêng ở mục 4e. Giữ nguyên: tìm kiếm, lọc trạng thái (chưa khóa), thẻ đề, hộp thoại chi tiết, chọn Thi thử/Luyện tập, các tình huống dữ liệu, phân biệt hai nguồn đề.

File: `homepage.html`, `exam-library.html`, dùng chung `site.css` (giao diện website) và `site.js` (header, footer, bộ chuyển ngôn ngữ, bảng dịch tĩnh, kế thừa ngôn ngữ), cùng `tokens.css` (chỉ bổ sung 4 token: `--section-y`, `--bg-tint`, `--bg-sunken`, `--lh-title` theo ngôn ngữ). Không động đến `exam-taking.html` (kiểm tra bằng checksum: giống hệt bản vòng trước). Mọi dữ liệu là **minh họa**, mọi thứ cần duyệt được đánh dấu ở mục “Đề xuất cần duyệt” bên dưới và có thể bật bằng hộp “Đánh dấu phần cần duyệt” (hoặc `?proposals=1`).

### Hướng thị giác
Kế thừa Coral-first: nền trắng/off-white ấm, một màu nhấn coral cho hành động, huy hiệu nguồn đề (icon + chữ, không chỉ màu), nút phẳng, không gradient, không bóng ở thẻ. Cảm hứng từ tuhoc.dolenglish.vn ở mức nguyên tắc (một màu nhấn, chữ lớn đậm, nhóm nội dung rõ, nút phẳng); không dùng logo, ảnh, bố cục, màu hay lời lẽ của DOL. Để tránh cảm giác landing page SaaS chung chung: không ảnh stock, không dải số liệu, không logo khách hàng; minh họa duy nhất là **bản xem trước giao diện làm bài thật** (đoạn đọc, đáp án ①–④ có đáp án đang chọn, dải ô 원고지), làm bằng HTML từ chính các thành phần của màn Exam Taking.

### Homepage
Header (logo, điều hướng, bộ chuyển ngôn ngữ) → Hero → Chọn loại đề (hai thẻ) → Luyện tập → Quy trình → Footer.
- **Hero:** tiêu đề + mô tả + hai CTA (Chọn đề để làm → Exam Library; Vào luyện tập → Exam Library chế độ luyện tập) + bản xem trước giao diện làm bài (có chú thích “nội dung minh họa”).
- **Hai thẻ nguồn đề:** *Đề TOPIK theo kỳ* (thẻ trắng, huy hiệu viền) và *Đề mô phỏng TIENGHANTOPIK* (thẻ nền coral nhạt, huy hiệu coral), kèm câu “không phải đề TOPIK chính thức” cho đề mô phỏng và ghi chú hai loại dùng chung giao diện làm bài. Mỗi thẻ dẫn tới Exam Library đã lọc sẵn nguồn.
- **Luyện tập:** mô tả chế độ luyện tập đúng quy tắc đã khóa (xem đáp án và lời giải đã duyệt, **khi có**, sau từng câu; câu đã xem được đánh dấu) và nhắc quy tắc thi thử (chỉ công bố điểm/đáp án/lời giải sau khi nộp toàn bộ). Minh họa là một thẻ câu hỏi với huy hiệu “Đã xem đáp án” và khung nội dung **trống** (không có đáp án hay lời giải thật).
- **Quy trình (4 bước):** chọn đề → Nghe và Viết liền mạch → nghỉ tối đa 15 phút rồi Đọc → nộp bài và xem lại. Các bước là quy tắc người dùng đã xác nhận; ghi chú “áp dụng cho TOPIK II” là đề xuất cần duyệt.
- **Không có** tuyên bố thành tích, số người dùng, tỷ lệ đỗ, đánh giá, giá, khuyến mãi, tên giáo viên.
- **Mobile:** điều hướng thành nút menu (bảng xổ xuống), nút ngôn ngữ luôn hiện ở header, hai CTA hiển thị toàn chiều rộng, các khối xếp một cột.

### Bộ chuyển ngôn ngữ của website
- Ở header của Homepage và Exam Library: nút quả cầu + mã (VI/EN/KO/ZH/TH). Desktop: menu nổi; mobile: bottom sheet. Mục đang chọn: nền coral nhạt + viền + chữ đậm + dấu ✓. Mỗi mục có tên bản ngữ và thuộc tính `lang` riêng; **không dùng quốc kỳ**. Bàn phím: mũi tên có vòng, Esc trả focus về nút, Tab đóng.
- Đổi ngôn ngữ áp dụng ngay (không tải lại), cập nhật tiêu đề trang, vùng thông báo `aria-live` và các liên kết. **Ghi nhớ** bằng `localStorage` (`tht-lang`, có try/catch) trong prototype; mặc định `vi`.
- **Kế thừa:** mọi liên kết nội bộ mang `?lang=` hiện tại; Exam Library và Exam Taking đọc `?lang=` rồi mới đọc giá trị đã ghi nhớ. Exam Taking vẫn **không có switcher** và khóa ngôn ngữ trong phiên thi.

### Exam Library
- **Đầu trang:** tiêu đề, mô tả, (nếu đến từ “Luyện tập”) nhãn “Bạn đang chọn đề cho chế độ luyện tập”, và **ô thông báo cố định: dữ liệu minh họa, không xác nhận đề đã xuất bản/có lời giải/có kết quả chấm**.
- **Nguồn đề (bắt buộc):** bộ chuyển ba nút Tất cả / Đề TOPIK theo kỳ / Đề mô phỏng TIENGHANTOPIK, kèm số lượng và mô tả nguồn. Kết quả luôn **nhóm theo nguồn** dưới tiêu đề riêng, mỗi thẻ có huy hiệu nguồn (icon khác nhau), đề mô phỏng nền coral nhạt.
- **Thẻ đề:** huy hiệu nguồn, trạng thái (nếu có), tên đề (“Kỳ thi TOPIK lần thứ N” / “Đề mô phỏng số N”), siêu dữ liệu (cấp độ, năm thi [chỉ đề theo kỳ], các phần, số câu), hai nút: **Xem chi tiết** và **Bắt đầu làm bài**. Trường thiếu dữ liệu hiển thị “Chưa có thông tin” (chữ nghiêng), không đoán. Đề chưa sẵn sàng: viền nét đứt, nhãn “Chưa sẵn sàng”, nút bắt đầu bị khóa nhưng vẫn xem được chi tiết.
- **Chi tiết (hộp thoại):** huy hiệu, tên, siêu dữ liệu, dòng nguồn (đề mô phỏng ghi rõ không phải đề chính thức), chọn chế độ làm bài, ghi chú ngôn ngữ (“giao diện làm bài dùng ngôn ngữ bạn đã chọn; không thể đổi khi đang thi; nội dung đề giữ tiếng Hàn”), nút Bắt đầu. Bắt đầu ở chế độ thi thử → `exam-taking.html?lang=…` (prototype Exam Taking mẫu duy nhất; chưa gắn đề cụ thể).
- **Tình huống dữ liệu** (bật bằng thanh công cụ prototype): bình thường, đang tải (khung xương), trống, lỗi (nút thử lại), không có kết quả (nút xóa bộ lọc); người dùng chưa có lịch sử / có lịch sử.
- **Mobile:** tìm kiếm luôn hiện, bộ lọc thu gọn sau nút “Bộ lọc”, thẻ một cột.

### 4d.1 Quyết định review đã ghi nhận (Homepage & Exam Library)
**Giữ nguyên Homepage và Exam Library Visual Foundation. Exam Library được chấp nhận có điều kiện.**

| Nội dung | Trạng thái |
|---|---|
| Tìm kiếm đề | **Đã duyệt** |
| Bộ lọc phù hợp dữ liệu (nguồn, cấp độ, năm thi khi có dữ liệu) | **Đã duyệt** theo nguyên tắc “chỉ hiện khi dữ liệu hỗ trợ”; dữ liệu thật vẫn chưa có |
| Chọn **Thi thử / Luyện tập** trước khi bắt đầu | **Đã duyệt** (màn luyện tập vẫn chưa thiết kế) |
| Hộp thoại xem chi tiết | **Giữ**, **chưa cần** trang chi tiết riêng |
| Phân biệt Đề TOPIK theo kỳ và Đề mô phỏng TIENGHANTOPIK | **Giữ** |
| Trạng thái lịch sử làm bài; nút **Tiếp tục / Làm lại** | **Chưa khóa nghiệp vụ** (giữ như đề xuất minh họa) |
| Phân biệt TOPIK I / II | **Thiết kế sẵn khả năng phân biệt**; **phạm vi sản phẩm cần xác nhận** |
| Quy trình thi TOPIK II áp dụng cho TOPIK I | **Không áp dụng** |
| Bản dịch “Official TOPIK exams” | **Đã rà soát và sửa** (xem bên dưới) |

**Điều kiện của Exam Library (cần đóng trước khi coi là hoàn tất):** (1) xác nhận phạm vi TOPIK I/II; (2) khóa hoặc bỏ phần trạng thái lịch sử và Tiếp tục/Làm lại; (3) bản dịch UI được người bản ngữ duyệt và thuật ngữ nguồn đề được chuẩn hóa; (4) dữ liệu thật thay dữ liệu minh họa.

**TOPIK I trong prototype:** vẫn là một cấp độ riêng (huy hiệu, bộ lọc), nhưng **không giả định cấu trúc hay quy trình**: trường “Các phần” và “Số câu” hiện “Chưa có thông tin”; thẻ có chú thích “Phạm vi TOPIK I và quy trình thi TOPIK I chưa được xác nhận” và nhãn “Chờ xác nhận”; nút bắt đầu bị khóa (cả ở hộp thoại, cả hai chế độ) nên một đề TOPIK I **không bao giờ mở phiên thi TOPIK II**. Trang chủ ghi rõ: “Trình tự trên áp dụng cho đề TOPIK II. Quy trình thi TOPIK I chưa được xác nhận.”, và câu mô tả hero không còn nêu trình tự Nghe–Viết–Đọc.

**Rà soát bản dịch “Official TOPIK exams”:** “Official” khẳng định tính chính thức của nguồn mà dữ liệu chưa xác nhận (và “真题” ở tiếng Trung hàm ý đề thật/chính thức). Đã đổi nhãn nguồn đề theo kỳ sang cách nói trung tính (đề **tổ chức theo kỳ thi**):

| Ngôn ngữ | Trước | Sau |
|---|---|---|
| vi | Đề TOPIK theo kỳ | giữ nguyên |
| en | Official TOPIK exams | **TOPIK exams by session** |
| ko | TOPIK 정기 시험 문제 | **TOPIK 회차별 시험 문제** |
| zh-Hans | TOPIK 历届真题 | **TOPIK 历届试卷** |
| th | ข้อสอบ TOPIK ตามรอบ | giữ nguyên |

Mô tả nguồn cũng đổi từ “sourced from/來源於…” sang “organized by TOPIK session/按…期数分类”. Đã áp dụng cả trong `exam-taking.html` (chỉ chuỗi dịch của huy hiệu, không đổi logic thi). Các câu nói đề mô phỏng “không phải đề TOPIK chính thức” giữ nguyên (đó là phủ định đúng yêu cầu).

**Kiểm tra kế thừa ngôn ngữ (Thái → Hàn):** xem `HANDOFF-PHASE2.md`. Kết luận: bấm “Bắt đầu” sau khi đổi Thái → Hàn mở Exam Taking bằng Hàn; nhưng có một lỗi thật ở đường **Quay lại / Tải lại** (URL cũ còn `?lang=th` và việc mở trang đã ghi đè lựa chọn đã nhớ), đã sửa tối thiểu: chỉ lựa chọn của người dùng mới được ghi nhớ, và URL được cập nhật theo lựa chọn.

### Các mục còn là đề xuất / chưa khóa (đánh dấu trong prototype)
Bật hộp “Đánh dấu phần cần duyệt” (hoặc `?proposals=1`) để thấy các chú thích này.
1. **Phạm vi TOPIK I/II** (bộ lọc cấp độ, thẻ TOPIK I “Chờ xác nhận”, câu “áp dụng cho TOPIK II” ở trang chủ): chờ xác nhận.
2. ~~Lọc năm thi~~ — **đã bỏ hoàn toàn** (R3).
3. **Trạng thái theo người dùng** (Chưa làm / Đang làm dở / Đã hoàn thành), bộ lọc trạng thái, nút **Tiếp tục / Làm lại:** chưa khóa nghiệp vụ; cần dữ liệu lịch sử và quy tắc tiếp tục/làm lại. Không có nút “Xem kết quả” vì màn Kết quả chưa thiết kế.
4. **Dòng footer** “đề mô phỏng không phải đề TOPIK chính thức” và copy hero/quy trình: cần pháp lý/nghiệp vụ duyệt.
5. **Số câu và các phần theo cấp độ** của TOPIK II (Nghe 50 + Viết 4 + Đọc 50 = 104): chưa được xác nhận trong baseline; số kỳ, năm, số đề mô phỏng trong dữ liệu mẫu **không phải dữ liệu thật**.

## 4e. Điều hướng Thư viện đề theo SEO Silo (R3)

### Quyết định và phạm vi
Thiết kế lại điều hướng Thư viện đề để hỗ trợ SEO: **mỗi danh mục là một trang có URL riêng với liên kết thật**, không chỉ là bộ lọc JavaScript. Chỉ cập nhật Homepage, Exam Library và tài liệu; không động đến Exam Engine / Exam Taking, không thiết kế Kết quả, Luyện tập, Dashboard; không có router, backend hay SEO production.

**Cấu trúc danh mục** (Đề TOPIK trước kỳ 35 và từ kỳ 35 là **hai hệ thống phân loại riêng, không gộp**; Đề mô phỏng là nguồn riêng):
| Nhóm | Danh mục con |
|---|---|
| Đề TOPIK trước kỳ 35 | Sơ cấp, Trung cấp, Cao cấp |
| Đề TOPIK từ kỳ 35 | TOPIK I, TOPIK II |
| Đề mô phỏng TIENGHANTOPIK | TOPIK I, TOPIK II |

Sơ đồ, quy tắc URL và bảng URL/H1/title/meta description cho 5 ngôn ngữ nằm trong **`SEO-SITEMAP-PROPOSAL.md`**.

### Đã bỏ / giữ trong Exam Library
- **Bỏ hoàn toàn bộ lọc theo năm.** (Trường “Năm thi” trên thẻ đề theo kỳ vẫn hiển thị như một thông tin của đề, không còn là bộ lọc, và không nằm trong tìm kiếm.)
- Bỏ bộ chuyển nguồn đề và bộ lọc cấp độ: việc chọn nhóm/cấp độ nay là việc của điều hướng danh mục.
- **Giữ tìm kiếm** trong thư viện (tìm trong phạm vi của trang hiện tại: hub = toàn thư viện, nhóm, danh mục con) và lọc trạng thái (khi có lịch sử, chưa khóa nghiệp vụ). Tìm kiếm/lọc là trạng thái trong trang, **không tạo URL riêng, không indexable**.

### Điều hướng desktop: mega menu, không có menu lồng nhiều tầng
- Mục **Thư viện đề** trên header gồm **một liên kết** (tới hub) và **một nút mũi tên** mở bảng mega menu (disclosure, `aria-expanded`, `aria-controls`).
- Bảng là **một tầng duy nhất**, hai khối rõ nguồn: khối **“Đề TOPIK theo kỳ”** (hai cột: trước kỳ 35 | từ kỳ 35) và khối **“Đề mô phỏng TIENGHANTOPIK”** (nền coral nhạt), cuối bảng có liên kết “Xem toàn bộ Thư viện đề”. Tiêu đề nhóm là liên kết tới trang nhóm; các mục con là liên kết tới trang danh mục.
- Mở bằng bấm nút, bàn phím (Enter/Space, mũi tên xuống chuyển vào liên kết đầu tiên) hoặc rê chuột (có độ trễ, chỉ khi có chuột và màn rộng); đóng bằng Esc (trả focus về nút), bấm ra ngoài, hoặc Tab ra khỏi bảng. Thứ tự Tab theo thứ tự đọc.
- **Trạng thái active (không chỉ dùng màu):** trang hiện tại có `aria-current="page"`, nền coral nhạt, chữ đậm, vạch trái và dấu ✓; nhóm cha và mục “Thư viện đề” có `aria-current="true"` (gạch chân/nền nhạt). Cùng trạng thái trong menu mobile và breadcrumb.
- Đã kiểm ở 961, 1000, 1100px × 5 ngôn ngữ: header một hàng, bảng không tràn.

### Điều hướng mobile: accordion
Trong ngăn menu, mục Thư viện đề là một hàng gồm liên kết + nút mở/đóng; nội dung xổ xuống theo danh sách phân nhóm (nhãn nguồn → nhóm → danh mục con), mục tiêu bấm ≥ 44px. Trên trang thuộc thư viện, accordion **tự mở** và đánh dấu danh mục hiện tại. Ngăn menu cuộn được khi dài.

### Ba loại trang danh mục (mỗi loại có URL riêng)
1. **Hub “Thư viện đề”:** mô tả, ô tìm kiếm, ba khối nhóm (nhãn nguồn, tiêu đề là liên kết, mô tả, các thẻ liên kết tới danh mục con kèm số đề hoặc “Sắp có”).
2. **Trang nhóm:** mô tả riêng của hệ thống phân loại, mỗi danh mục con một mục (tiêu đề là liên kết, số đề, tối đa 3 đề + liên kết “Xem tất cả N đề”), cuối trang liên kết sang nhóm khác và hub.
3. **Trang danh mục con:** H1, mô tả, tìm kiếm, **danh sách đầy đủ** thẻ đề, cuối trang liên kết tới nhóm cha, danh mục cùng cấp, hub.
- **Breadcrumb** ở mọi trang (Trang chủ › Thư viện đề › Nhóm › Danh mục; mục cuối là `aria-current="page"`, không phải liên kết), xuống dòng được trên mobile; kèm dữ liệu `BreadcrumbList`.
- **Homepage** liên kết tới cả ba nhóm và từng danh mục con (ba thẻ nguồn đề), footer liên kết tới hub và ba nhóm.

### Tình huống theo từng danh mục
- **Danh mục có đề:** danh sách như trên. **Không có kết quả tìm kiếm:** trạng thái “không tìm thấy” + nút xóa bộ lọc. Đang tải, lỗi, thư viện trống: như R2, hiển thị trong từng trang.
- **Danh mục rỗng (ví dụ “Cao cấp” trước kỳ 35 trong dữ liệu mẫu):** **không** được liên kết từ menu/hub/nhóm (hiện “Sắp có” dạng chữ, khung nét đứt); nếu truy cập URL trực tiếp thì hiện trạng thái rỗng kèm liên kết sang danh mục khác, `robots: noindex,follow`, không nằm trong sitemap. Đề xuất production: chỉ tạo URL khi có ít nhất một đề đã xuất bản (không tạo trang rỗng để tăng số URL).
- **Đề trước kỳ 35 và mọi đề TOPIK I:** cấu trúc và quy trình chưa xác nhận nên “Các phần/Số câu” là “Chưa có thông tin”, có ghi chú, nút bắt đầu bị khóa (không áp dụng quy trình TOPIK II). Chỉ đề TOPIK II (từ kỳ 35 và mô phỏng) mở được prototype Exam Taking.

### SEO: những gì prototype thể hiện và không thể hiện
- Thể hiện: URL riêng cho 11 danh mục; liên kết `<a href>` thật cho menu, breadcrumb, thẻ danh mục, footer; internal linking cha → con → anh em → hub; `title`, `meta description`, `robots`, `canonical`, `hreflang` (5 ngôn ngữ + `x-default`) và JSON-LD breadcrumb được ghi lại theo ngôn ngữ để kiểm tra trong DOM và trong bảng “SEO (prototype)” phía trên mỗi trang; canonical không kèm tham số; tham số (`mode`, tìm kiếm) → `noindex,follow`.
- **Không** thể hiện: router/URL sạch thật (prototype dùng thư mục tĩnh và `?lang=`), sitemap XML, chuyển hướng 301/302, hiển thị phía máy chủ, schema ngoài breadcrumb, nội dung SEO bổ sung. Không có nội dung giả, không nhồi từ khóa.

## 4f. Kết quả thi và Xem lại đáp án (R4)

> **Trạng thái: ĐỀ XUẤT thiết kế, chưa duyệt.** Dữ liệu minh họa (đề rút gọn 6 câu Nghe, 4 câu Viết, 8 câu Đọc; nội dung tiếng Hàn do Claude soạn). Prototype không tính điểm, không chấm, không có AI, không có backend. Điểm, số câu đúng/sai/chưa trả lời, kết quả từng câu là **trường dữ liệu cố định**, không được suy ra bằng mã. Nút “Dữ liệu” trên thanh công cụ prototype chỉ để xem các trạng thái; không thuộc giao diện website.

### Phạm vi và nguyên tắc
- Chỉ thêm hai màn; **không sửa** Homepage, Exam Library R3, Exam Taking. Dùng lại token, phông, badge nguồn đề, chip, thẻ, nút, thông báo, ô điều hướng, breadcrumb và header/footer website (có bộ chuyển ngôn ngữ của website; hai màn không có bộ chọn ngôn ngữ riêng). Ngôn ngữ giao diện kế thừa từ website (`?lang=` > giá trị đã ghi nhớ > `vi`).
- **Coral dùng tiết chế:** chỉ nút hành động chính (“Xem lại đáp án”) và gạch chân nhóm câu trong lưới. Không có hiệu ứng ăn mừng, huy hiệu, bảng xếp hạng, màu đỏ báo động. Điểm là số lớn màu mực, thanh điểm trung tính.
- **Trạng thái không chỉ bằng màu:** mỗi trạng thái = biểu tượng + chữ + kiểu viền. Đúng = viền liền xanh lá + ✓; Sai = viền liền mận + ✕; Chưa trả lời = **viền nét đứt** + dấu trừ; Chờ chấm (Viết) = nền hổ phách + đồng hồ; Đã chấm (Viết/phần) = viền mực + dấu ✓ trung tính (không dùng xanh “đúng” cho việc đã chấm để tránh nhầm với đáp án đúng). Màu xanh lá/mận chỉ xuất hiện ở màn kết quả/xem lại (đã quy định ở mục 3.1).

### Màn A — `exam-results.html`
Thứ tự: breadcrumb → huy hiệu nguồn đề + tiêu đề trang + tên đề → chip “Đã nộp bài” + ngày → ô ghi chú “dữ liệu minh họa” → hộp trạng thái theo tình huống → (trái, dính khi cuộn) **Tổng điểm + hai nút** (Xem lại đáp án / Về Thư viện đề); (phải) thẻ từng phần thi theo đúng thứ tự thi **Nghe → Viết → Đọc**, mỗi thẻ: tên, số câu, chip trạng thái, điểm/100 + thanh, ba thẻ đếm Đúng/Sai/Chưa trả lời (có biểu tượng), nút “Xem phần …” mở xem lại đúng câu đầu phần. Mobile: một cột; hai nút đặt ngay dưới tổng điểm để không phải cuộn xuống cuối.

| Tình huống | Hiển thị |
|---|---|
| 1. Đủ điểm | Tổng điểm số; ba phần có điểm; Viết “Đã chấm”; số câu đúng/sai/chưa trả lời cho Nghe và Đọc; không có số câu cho Viết (không áp dụng) |
| 2. Viết chưa chấm | Hộp hổ phách “Phần Viết chưa được chấm”; **tổng điểm không hiện số** (“Chưa chấm” + lý do); Nghe và Đọc hiển thị điểm; thẻ Viết: chip “Chưa chấm” + “đã nộp, đang chờ chấm”, không điểm, không nhận xét. Đây là trạng thái **sau khi nộp bài**; không liên quan đến lúc đang thi |
| 3. Không có điểm hợp lệ | Không số điểm, **không số câu đúng/sai** (ghi chú “chỉ hiện khi có dữ liệu chấm đã xác nhận”); nút chính đổi thành “Xem lại bài đã làm” kèm ghi chú đáp án chưa công bố |
| 4. Thiếu lời giải đã duyệt | Như tình huống 1 kèm hộp thông báo; thiếu lời giải nằm ở màn xem lại |

### Màn B — `answer-review.html`
- **Điều hướng:** thanh bên (desktop, dính) / nút “Danh sách câu” mở bảng (mobile): lưới câu nhóm theo phần Nghe / Viết / Đọc, mỗi ô có số + biểu tượng trạng thái + kiểu viền, vòng coral hai lớp cho câu hiện tại, **gạch chân nhóm** cho câu cùng đề chung, bộ lọc Tất cả / Sai / Chưa trả lời, chú giải ký hiệu. Nút **Câu trước / Câu sau** (cùng nhãn với Exam Taking) và vị trí “n / tổng”. Chuyển câu: focus về tiêu đề câu, thông báo `aria-live`. Địa chỉ `#q=` ghi nhớ câu hiện tại.
- **Đề dùng chung (nhóm câu):** khung ghim khi cuộn (desktop: dưới header; mobile: dưới header, cao tối đa 24% màn hình, có nút Thu gọn/Mở rộng), chứa hướng dẫn “※ [22~24]” và đoạn văn tiếng Hàn đúng nguyên bản, ghi chú “nội dung đề giữ nguyên tiếng Hàn”. Nhóm Nghe: khung ghim chứa hướng dẫn và nhãn âm thanh.
- **Bốn lớp thông tin, tách riêng và có nhãn:**
  1. **Bài làm của bạn:** nhãn “Bạn chọn” (biểu tượng bút, viền mực) trên đáp án đã chọn; thẻ tóm tắt “Bạn chọn”; bài viết của thí sinh trên giấy 원고지 chỉ-đọc.
  2. **Đáp án đã công bố:** nhãn “Đáp án đúng” (✓, nền xanh lá nhạt) trên lựa chọn đúng; thẻ tóm tắt “Đáp án đã công bố”; thẻ “Kết quả” (Đúng/Sai/Chưa trả lời). Khi chưa công bố: thẻ nét đứt “Chưa công bố” (biểu tượng khóa), không có nhãn đáp án đúng ở bất kỳ lựa chọn nào.
  3. **Lời giải đã được duyệt:** khung riêng, viền trái xanh dương, nhãn “Đã duyệt” (khiên ✓). Chỉ hiển thị nội dung có trạng thái đã duyệt; nháp/chờ duyệt **không bao giờ** vào DOM.
  4. **Bản dịch đã được duyệt:** khung riêng, viền trái xám, biểu tượng quả cầu, nhãn “Đã duyệt”; bản dịch đề dùng chung nằm sau thẻ câu hỏi, không lẫn với đề gốc tiếng Hàn.
- **Thiếu dữ liệu → ô giữ chỗ**, không để trống và không bịa: “Câu này chưa có lời giải đã được duyệt”, “Chưa có bản dịch đã duyệt cho phần này”, “Lời thoại chưa được công bố”, “Chưa có đáp án tham khảo đã công bố” (câu Viết). **Không có** rubric, điểm từng tiêu chí, nhận xét AI hay gợi ý điểm cho phần Viết.
- **Ngôn ngữ của lời giải/bản dịch** (cập nhật theo Publication Language V1: tiếng Việt bắt buộc để xuất bản, các ngôn ngữ khác bổ sung): không giả định có đủ 5 ngôn ngữ. Nếu chưa có bản theo ngôn ngữ giao diện, khung giữ chỗ nêu “Chưa có … bằng {ngôn ngữ}. Đã có bản: …” và có **nút (người dùng chủ động)** “Xem bản {ngôn ngữ có sẵn}”; nội dung hiện ra được đánh dấu đúng `lang` và nhãn “Đã duyệt · ngôn ngữ”. Cơ chế dự phòng này là đề xuất, chưa phải quyết định.
- **Âm thanh/lời thoại (câu Nghe):** prototype không có âm thanh; khung giữ chỗ nét đứt ghi rõ “việc nghe lại sau khi nộp bài chưa quyết định”. Lời thoại tiếng Hàn trong `<details>` khi “được công bố”, ô báo thiếu khi không.
- **Viết:** đề (hướng dẫn + khung chữ/biểu đồ giữ chỗ), bài của thí sinh trên giấy 원고지 chỉ-đọc (30 ô/hàng, chỉ hiện các hàng đã viết + 1 hàng), đếm ký tự theo cùng quy tắc Exam Taking (mọi ký tự gồm dấu cách, không tính xuống dòng), chip “Chưa chấm/Đã chấm”. Khi đã chấm chỉ hiện **điểm phần Viết** đã công bố (không điểm từng câu). Mobile: giấy cuộn ngang trong vùng có nhãn.
- **Mobile 375px:** lưới câu nằm trong nút “Danh sách câu”; đoạn đề dùng chung ghim; nút Câu trước/Câu sau dưới thẻ câu; phần “Cách đọc màn này” đưa xuống cuối trang để câu hỏi lên cao hơn.

### Điều hướng
`Thư viện đề → Kết quả → Xem lại đáp án`: breadcrumb ở hai màn (ở prototype, Kết quả được mở từ link trực tiếp hoặc từ nút Quay lại; chưa nối từ Exam Taking vì không được sửa Exam Taking). `?lang`, `?state`, `?src`, `?bare` được giữ khi chuyển giữa hai màn. Hai màn đặt `noindex,nofollow`.

### Không có trong R4 (đúng giới hạn)
Công thức/thang điểm thật, cấp độ/đậu-rớt, chấm Viết (người hay hệ thống), AI giải thích hay chấm, âm thanh thật, lịch sử các lần thi, so sánh, tải/chia sẻ kết quả, màn Luyện tập (xem đáp án sau từng câu), Dashboard, Admin, backend, API.

## 4g. Luyện kỹ năng — thư viện bộ bài tập và phiên luyện (R5)

> **Trạng thái: ĐỀ XUẤT, chưa duyệt.** Dữ liệu minh họa (17 bộ mẫu, đề rút gọn, tiếng Hàn do Claude soạn). Không có quy tắc hoàn thành, chấm điểm bộ luyện, làm lại, lưu tiến độ; không chấm Viết, không rubric, không AI; không backend.

### 4g.1 Quyết định sản phẩm và điều hướng
- Hai chức năng học tập: **Luyện đề TOPIK** (Thư viện đề R3: đề theo kỳ, đề mô phỏng, thi thử toàn đề, luyện tập dựa trên đề — giữ nguyên, kể cả chọn chế độ trong hộp thoại) và **Luyện kỹ năng** (chức năng riêng, không phải bộ lọc của thư viện, không áp logic thi thử toàn đề).
- Menu “Luyện tập” → **“Luyện kỹ năng”** (vi/en/ko/zh-Hans/th: Luyện kỹ năng / Skill practice / 영역별 연습 / 技能练习 / ฝึกทักษะ — bản dịch chưa người bản ngữ duyệt). Mục có **mega menu giống Thư viện đề** (cùng thành phần): cột TOPIK I (Luyện nghe, Luyện đọc), cột TOPIK II (Luyện nghe, Luyện đọc, Luyện viết), liên kết “Xem toàn bộ Luyện kỹ năng”. Mobile: accordion; tự mở trên trang thuộc mục; chỉ một bảng mở tại một thời điểm. Mega menu Thư viện đề và 11 danh mục SEO giữ nguyên. Chưa có luyện nói, từ vựng, ngữ pháp.
- **Homepage (tối thiểu):** nút phụ ở hero và thẻ “Luyện kỹ năng TOPIK” (tiêu đề, mô tả, nút “Chọn kỹ năng để luyện” và hai liên kết TOPIK I / TOPIK II) thay cho thẻ “Luyện tập từng câu”; ô ghi chú thi thử giữ lại; footer đổi liên kết. Không redesign.
- Bộ chuyển ngôn ngữ vẫn ở header website; phiên luyện **dùng header website** (có bộ chuyển) vì luyện tập không khóa ngôn ngữ như Exam Taking (mục 4g.7 là câu hỏi mở).

### 4g.2 Cấp độ không nhầm với cấp 1–6
- **TOPIK I / TOPIK II** là hai bài thi (cấp độ ở tầng chọn đầu tiên). Bên trong mỗi kỹ năng, độ khó gọi là **“Mức bài tập”**: **Làm quen / Củng cố / Thử thách** — cố ý dùng chữ, không dùng số, không dùng “Sơ/Trung/Cao cấp” (đã dùng cho đề trước kỳ 35).
- Ghi chú cố định (hộp thông tin) ở trang cấp và trang kỹ năng: “Mức bài tập không phải cấp 1–6 … chưa được đối chiếu với cấp nào.” Việc có đối chiếu với cấp 1–6 hay không là câu hỏi mở.
- Mức nào chưa có bộ (ví dụ TOPIK II – Viết chưa có “Làm quen”) thì nút lọc hiện số 0 và bấm ra trạng thái “Không có bộ ở mức này”; không bịa dữ liệu.

### 4g.3 `skill-library.html` (hub → cấp → kỹ năng → bộ)
- **Hub:** tiêu đề, mô tả, ô “dữ liệu minh họa”, hộp “Luyện kỹ năng khác với Thi thử toàn đề” (có liên kết tới Thư viện đề), hai thẻ TOPIK I/II, mỗi thẻ có ô kỹ năng kèm “n bộ” (khi có dữ liệu) hoặc “Sắp có” (không liên kết). Dùng lại `.silo`, `.leaf`.
- **Trang cấp:** thẻ các kỹ năng của cấp + ghi chú mức bài tập + liên kết sang cấp còn lại. **Trang kỹ năng:** bộ lọc **Mức bài tập** (Tất cả/Làm quen/Củng cố/Thử thách, kèm số bộ), thẻ bộ bài tập (huy hiệu kỹ năng, huy hiệu mức nét đứt, tên chủ đề, **số câu**, **trạng thái Chưa làm/Đang làm dở/Đã hoàn thành chỉ khi “có lịch sử”**, nút chính “Bắt đầu luyện”), liên kết kỹ năng cùng cấp.
- **Trạng thái dữ liệu** (thanh công cụ): bình thường, đang tải (khung xương), chưa có bài tập, lỗi (nút Thử lại), không có bộ ở mức đã lọc. Luyện viết có dòng “không chấm điểm, không rubric”.
- Thẻ **không** hiển thị thời lượng; “Đã hoàn thành/Đang làm dở” chỉ là nhãn minh họa, định nghĩa chưa có.
- Breadcrumb Trang chủ › Luyện kỹ năng › TOPIK II › Luyện đọc; head (title/description/robots/canonical/hreflang) cập nhật theo ngôn ngữ và hiển thị trong bảng SEO prototype; sitemap đề xuất: `SEO-SKILLS-SITEMAP-PROPOSAL.md`.

### 4g.4 `skill-practice.html` — phiên luyện, **không phải Exam Taking**
- Đầu trang: huy hiệu **“Luyện kỹ năng”**, tên bộ, cấp/kỹ năng/mức/số câu; hộp thông tin “Đây là luyện tập, không phải thi thử: không có đồng hồ, không nộp cả bộ để chấm, không có điểm tổng”; dòng tiến độ “Đã trả lời a/n · Đã xem đáp án s/n”. **Không** có đồng hồ, nút “Nộp bài”, hộp thoại nộp, khóa ngôn ngữ.
- **Điều hướng câu** (dùng lại ô `.cell` của Kết quả/Exam Taking): ba trạng thái = biểu tượng + chữ + kiểu viền: **Chưa trả lời** (viền nét đứt, dấu trừ), **Đã trả lời** (nền mực đặc, chấm trắng), **Đã xem đáp án** (viền đôi, biểu tượng mắt); gạch chân nhóm câu chung; vòng coral cho câu hiện tại; chú giải; Câu trước/Câu sau; “n / tổng”; desktop thanh bên, mobile nút “Danh sách câu”.
- **Ngữ cảnh chung** (đoạn đọc hoặc khung âm thanh) ghim khi cuộn, có Thu gọn/Mở rộng; hình ảnh và âm thanh là khung giữ chỗ nét đứt ghi rõ “không có ảnh/âm thanh thật”.
- **Trả lời:** lựa chọn là nhóm radio thật (bàn phím: mũi tên, Space; focus xanh), chọn → viền coral + ✓ (như Exam Taking); câu Viết là ô nhập văn bản tiếng Hàn kèm đếm ký tự, nhắc “không chấm điểm, rubric hay nhận xét tự động”.
- **Xem đáp án:** nút “Xem đáp án” bị vô hiệu cho tới khi đã trả lời (kèm dòng giải thích); sau khi bấm: câu được đánh dấu **Đã xem đáp án** (chip coral nhạt + mắt, ô điều hướng, dòng tiến độ), hiện **Bạn chọn / Đáp án đúng / Kết quả câu này (Đúng/Sai)**, (Nghe) lời thoại nếu được công bố, **Lời giải đã được duyệt** và **Bản dịch đã được duyệt** trong khung riêng có nhãn “Đã duyệt”. Chưa bấm thì **không có** các thành phần này trong DOM.
- **Câu Viết:** sau “Xem đáp án” chỉ hiện khung “Đáp án tham khảo đã được duyệt” (hoặc ô giữ chỗ khi chưa có); không điểm, không rubric, không nhận xét.
- **Dữ liệu nháp AI** không bao giờ được vẽ (có một lời giải nháp trong dữ liệu mẫu để kiểm tra). Thiếu lời giải/bản dịch đã duyệt → ô giữ chỗ. Chưa có bản theo ngôn ngữ giao diện → ô giữ chỗ nêu các ngôn ngữ đã có + nút (người dùng chủ động) “Xem bản …” (khớp quyết định review: được xem lời giải ngôn ngữ khác nếu đã duyệt).
- **Đề xuất cần duyệt:** sau khi xem đáp án, lựa chọn câu đó bị **khóa** (đã ghi “đề xuất, chưa quyết định” trên màn). Bài làm và trạng thái đã xem được giữ khi chuyển câu và đổi ngôn ngữ; không lưu khi rời trang.
- Trang `noindex,nofollow`.

### 4g.5 Tái dùng
`tokens.css`, `site.css`, `library.css` (`.xc`, `.xgrid`, `.state`, `.sk`), `results.css` (ô điều hướng, `.opt`, khung lời giải/bản dịch, đề dùng chung, thanh Câu trước/Câu sau), huy hiệu/chip/thông báo. `skills.css` chỉ thêm trạng thái luyện tập, nhóm lọc, vùng nhập Viết. Không tạo design system mới.

### 4g.6 Việc phải sửa từ quyết định review (chưa làm)
**Trạng thái 2 của `exam-results.html` (R4)** hiện hiển thị điểm Nghe/Đọc khi Viết chưa chấm; quyết định mới là **không mặc định công bố điểm riêng**. Ngoài phạm vi R5 nên chưa sửa; cần chỉnh ở vòng sau (ẩn điểm từng phần cho tới khi toàn bài có thể công bố, hoặc chờ quyết định của sản phẩm).

## 4h. Consolidation (R6)

### 4h.1 Sửa trạng thái 2 của `exam-results.html` (sửa hẹp)
- **Trước:** Viết chưa chấm vẫn hiển thị điểm Nghe, Đọc. **Nay:** bài đã nộp, phần Viết đang chờ chấm, **kết quả chưa hoàn tất; không có điểm Nghe, điểm Đọc, tổng điểm, thanh điểm, số câu đúng/sai**.
- Hộp thông báo: “Kết quả chưa hoàn tất: phần Viết đang chờ chấm” + “Điểm Nghe, điểm Đọc và tổng điểm chưa được công bố cho tới khi kết quả hoàn tất.” Ô tổng điểm: “Kết quả chưa hoàn tất”. Thẻ Nghe/Đọc: chip nét đứt “Chờ kết quả” + “Điểm phần này chưa được công bố.” Thẻ Viết: chip “Chưa chấm”. Nút chính “Xem lại bài đã làm” kèm ghi chú đáp án chưa công bố (như tình huống 3).
- Màn Xem lại ở trạng thái này không có đáp án đúng/lời giải/kết quả từng câu (cùng cơ chế “đáp án chưa công bố”); phần Viết vẫn hiển thị bài của thí sinh với chip “Chưa chấm”. Đây là hệ quả bảo thủ của quyết định (tránh lộ kết quả qua đáp án); cần xác nhận (câu 83).
- Ba tình huống còn lại (đủ điểm, không có điểm hợp lệ, thiếu lời giải đã duyệt) không đổi. Không có thuật toán chấm, không có thời hạn trả kết quả.

### 4h.2 Luyện kỹ năng: hai lớp phân loại (cập nhật `skill-library.html`, `skill-practice.html`)
- **Thư viện:** hai nhóm lọc riêng, đặt cạnh nhau: **Cấp độ mục tiêu** (TOPIK I: Cấp 1, 2; TOPIK II: Cấp 3–6, kèm số bộ) và **Độ khó bộ bài tập** (Làm quen/Củng cố/Thử thách). Thẻ bộ hiển thị hai thông tin ở hai dòng riêng (“Cấp độ mục tiêu: [Cấp 3]”, “Độ khó bộ: Làm quen”) bằng hai kiểu huy hiệu khác nhau (cấp mục tiêu viền liền; chưa gán: nét đứt “Chưa gán”). Hộp “Hai lớp phân loại khác nhau” giải thích: cấp mục tiêu do đội biên soạn gán sau khi kiểm duyệt nội dung, không do AI; độ khó chỉ nói bộ khó đến đâu; hai lớp độc lập. Bộ chưa được gán cấp (dữ liệu mẫu có một bộ) hiện “Chưa gán”, không đoán.
- Lọc không đổi URL (nếu có tham số thì `noindex,follow`, canonical sạch). Không tạo trang riêng theo cấp mục tiêu hay độ khó (không trang rỗng cho SEO).
- **Phiên luyện:** hai huy hiệu riêng cho cấp mục tiêu và độ khó ở đầu trang.
- **Khóa sau khi xem đáp án:** nay là quyết định đã khóa; câu thông báo trên màn không còn ghi “đề xuất”. Chuyển câu trước khi xem đáp án không mất bài làm (đã kiểm). Không điểm tổng kết bộ luyện; không nút làm lại.
- Phương án xem lời giải ngôn ngữ khác (ô giữ chỗ nêu ngôn ngữ đã có + nút “Xem bản …”) được ghi nhận là phương án đã chấp nhận (chỉ khi bản đó đã duyệt).

### 4h.3 Hướng lưu tiến độ cho production (ĐỀ XUẤT, chưa xây backend, chưa duyệt)
1. **Đơn vị lưu:** theo tài khoản + bộ + câu: `{lựa chọn / văn bản Viết, thời điểm trả lời, đã xem đáp án (có/không + thời điểm)}`, kèm con trỏ “câu đang xem”.
2. **Thời điểm lưu:** sau mỗi lần chọn đáp án (hoặc khi dừng gõ ở câu Viết) và ngay khi xem đáp án; không chờ rời trang.
3. **Máy chủ là nguồn sự thật:** trạng thái “đã xem đáp án” và khóa câu trả lời do máy chủ xác nhận và **không đảo ngược**; máy khách không tự mở khóa. Đáp án/lời giải chỉ được trả về sau khi máy chủ ghi nhận lượt xem.
4. **Khôi phục:** mở lại bộ → về đúng câu, đúng trạng thái từng câu (chưa trả lời/đã trả lời/đã xem). Trạng thái lỗi mạng (lưu thất bại) cần thiết kế riêng (câu hỏi mở).
5. **Không lưu** bản nháp lời giải AI, không lưu điểm tổng kết bộ (không có), không dùng lưu trữ trình duyệt làm nguồn sự thật.
6. **Truy cập:** chỉ chủ tài khoản đọc/ghi; kiểm soát ở máy chủ; xóa/xuất dữ liệu theo chính sách riêng tư (chưa quyết định).
7. “Hoàn thành”, “làm lại”, thời hạn lưu, đồng bộ nhiều thiết bị: chưa quyết định.
Prototype chỉ ghi chú trên màn (“Hướng production (đề xuất, chưa duyệt) …”) và không lưu gì.

## 4i. Student Dashboard (R6) — ĐỀ XUẤT, chưa duyệt

> `student-dashboard.html`, dữ liệu **minh họa**, không có dữ liệu cá nhân thật, không tài khoản/xác thực/backend. Trang `noindex,nofollow`; production phải kiểm soát truy cập ở máy chủ. Không có điểm năng lực, tỷ lệ dự đoán, streak, leaderboard, gamification. Hoạt động Luyện kỹ năng và kết quả thi thử **không bao giờ được gộp thành một điểm**.

### Bố cục (desktop 1024 / mobile 375)
1. **Header website dùng chung** (thêm mục “Học tập của tôi” cuối thanh điều hướng; header vẫn một hàng ở 961/1000/1100px × 5 ngôn ngữ). Bộ chuyển ngôn ngữ ở header, kế thừa lựa chọn.
2. **Tiêu đề + mô tả** (“Luyện đề và Luyện kỹ năng được tách riêng; không có điểm chung”), ô “dữ liệu minh họa”, dòng “khu vực cá nhân, không index, cần kiểm soát truy cập ở máy chủ”.
3. **Tiếp tục học** (chỉ khi có tiến độ hợp lệ): hai thẻ riêng — *Đề đang làm dở* (nút “Tiếp tục làm đề” nét đứt + nhãn “Đề xuất”) và *Bộ bài tập đang học* (nút chính “Tiếp tục bộ này”, nêu số câu đã xem đáp án). Ghi chú: prototype không khôi phục tiến độ; “Tiếp tục” đối với đề thi là đề xuất.
4. **Tổng quan hoạt động:** hai nhóm tách riêng. *Luyện đề TOPIK*: Đề đã tham gia, Đề đang làm dở, Kết quả đã công bố. *Luyện kỹ năng*: Bộ bài tập đã luyện, Câu đã xem đáp án. **Mỗi chỉ số ghi nguồn dữ liệu** ngay dưới (ví dụ “Nguồn: lượt làm đề đã ghi nhận”, “Nguồn: bộ có ít nhất một câu đã trả lời”); giá trị là minh họa.
5. **Hai khu vực** cạnh nhau (desktop) / xếp dọc (mobile):
   - **Luyện đề TOPIK:** danh sách đề đã tham gia, mỗi dòng có huy hiệu nguồn đề (như Exam Library), tên đề, chip trạng thái, ngày hoạt động gần nhất, hành động; nút “Đến Thư viện đề”.
   - **Luyện kỹ năng:** *Tiến độ theo kỹ năng* Nghe/Đọc/Viết (“đã bắt đầu a/n bộ”, thanh: đặc = đã hoàn thành, sọc = đang học, kèm chữ “p đang học · c đã hoàn thành”, **không phần trăm điểm**); *Bộ đã luyện theo cấp độ mục tiêu* (chip Cấp 1–6 + “Chưa gán” kèm số bộ, ghi chú: là cấp bộ bài hướng tới, **không phải trình độ hiện tại**); danh sách bộ đã luyện (huy hiệu kỹ năng, chip trạng thái, **hai huy hiệu tách riêng cấp mục tiêu và độ khó**, “đã xem đáp án v/n câu”); dòng “Không có điểm tổng kết cho bộ luyện”; nút “Đến Luyện kỹ năng”.
6. **Hoạt động gần đây:** một danh sách thời gian gộp cả hai loại nhưng **mỗi dòng có nhãn loại** (Luyện đề / Luyện kỹ năng), nội dung và ngày; không điểm.
7. **Trạng thái dữ liệu:** có hoạt động; chỉ Luyện kỹ năng (khu vực Luyện đề hiện “Bạn chưa tham gia đề nào”); **chưa có hoạt động** (thẻ trống + hai CTA); đang tải (khung xương); lỗi (nút Thử lại).

### Phân biệt trạng thái (icon + chữ + kiểu viền, không chỉ màu)
| Trạng thái | Dashboard | Ghi chú |
|---|---|---|
| Chưa bắt đầu | Không có dòng; bộ trong Thư viện hiển thị “Chưa làm” | Dashboard chỉ liệt kê hoạt động đã có |
| Đang học / làm dở | Chip viền mực + biểu tượng nửa tròn “Đang làm dở” / “Đang học” | Đề thi: “Tiếp tục” là đề xuất |
| Đã hoàn thành | Chip viền mực + ✓ “Đã hoàn thành” (bộ luyện) | Định nghĩa “hoàn thành” chưa quyết định |
| Đã nộp, đang chờ kết quả | Chip hổ phách + đồng hồ “Đã nộp, đang chờ kết quả” + “Điểm chưa được công bố.” | **Không hiển thị điểm** |
| Có kết quả hợp lệ đã công bố | Chip viền mực + ✓ “Có kết quả đã công bố”, điểm minh họa, nút “Xem kết quả” | Chỉ trạng thái này hiển thị điểm; nút “Làm lại” là đề xuất nét đứt |

### Liên kết và tái sử dụng
Liên kết tới Thư viện đề, Luyện kỹ năng, Exam Results (`state=partial/full`), Skill Practice, Exam Taking (đề xuất tiếp tục); giữ `lang`. Dùng lại `tokens.css`, `site.css`, `library.css`, `results.css`, `skills.css`; `dashboard.css` chỉ thêm bố cục. Không tạo design system mới.

### Không có trong R6
Tài khoản/đăng nhập/quyền truy cập, backend/API/DB, tính toán thật, điểm năng lực, dự đoán đỗ, streak, leaderboard, Admin, thông báo, xuất dữ liệu.

## 4j. Đồng bộ quyết định review R6 (R7)

- **Viết chưa chấm:** màn Xem lại đã cho xem **lựa chọn/bài viết của chính mình** nhưng không đáp án chuẩn, không đúng/sai, không điểm (R6) → xác nhận là quyết định đã khóa (câu 83 đã giải quyết). Không đổi mã.
- **Cấp độ mục tiêu** (mục 4h.2): ghi chú trên màn Skill Library và Học tập của tôi nay nêu “do đội biên soạn gán và admin kiểm duyệt, không do AI”.
- **Lưu/khôi phục tiến độ:** dòng ghi chú trên Skill Practice nay nói “Production cần hỗ trợ lưu và khôi phục tiến độ; cơ chế chi tiết là đề xuất”.
- **Học tập của tôi** (đổi tên, mục 4i): bỏ điểm hiển thị trực tiếp; dòng đề đã công bố chỉ có chip “Có kết quả đã công bố”, câu “Kết quả đã được công bố.” và nút **Xem kết quả**; nút “Làm lại” vẫn là đề xuất nét đứt. **Khi chưa đăng nhập** trang chỉ hiện thẻ “Đăng nhập để xem Học tập của tôi” (Đăng nhập / Đăng ký), **không có dữ liệu cá nhân nào trong DOM**; mô phỏng đăng nhập bằng thanh công cụ prototype. Dòng ghi chú: production phải kiểm tra xác thực và phân quyền ở máy chủ.
- **Điều hướng:** mục “Bảng học tập” **bị bỏ khỏi thanh điều hướng công khai**; “Học tập của tôi” chỉ có trong menu tài khoản khi đã đăng nhập. Header vẫn một hàng ở 961/1000/1100px.
- **Không đổi:** Exam Taking, Results/Answer Review (ngoài đã nêu), 11 danh mục Exam Library, Skill Library/Practice ngoài hai dòng ghi chú trên.

## 4k. Account & Authentication UX (R7) — ĐỀ XUẤT, chưa duyệt

> Prototype giao diện: **không có xác thực thật, không gửi email, không token, không lưu mật khẩu**. Việc gửi biểu mẫu chỉ mô phỏng một kết quả do thanh công cụ prototype chọn (`?sim=`). Cờ “đã đăng nhập” là cờ `sessionStorage` chỉ của prototype (hoặc `?auth=in|out`), không phải cơ chế xác thực. Không có Google/Facebook/Apple. Mọi trang `noindex`.

### Nguyên tắc chung (dùng lại Coral Foundation)
- Trang một cột ở giữa (rộng tối đa 520px) với thẻ biểu mẫu; nhãn luôn hiển thị (không dùng placeholder thay nhãn); ô nhập cao ≥48px; nút chính coral toàn chiều rộng; liên kết phụ ở dưới.
- **Liên kết “Quay lại nội dung trước đó”** (khi có tham số `next`) hoặc “Về trang chủ”. `next` chỉ nhận đường dẫn cục bộ (chỉ chữ/số/`-_/.`, không `..`, không URL tuyệt đối, không `//`) — khi sai thì bỏ qua (chống open redirect; production phải kiểm lại ở máy chủ).
- **Lỗi biểu mẫu:** khi gửi sai, hiện **hộp tóm tắt lỗi** (viền mận + biểu tượng + chữ, `role="alert"`, danh sách liên kết nhảy tới ô lỗi), mỗi ô lỗi có viền dày + nền nhạt + biểu tượng + dòng lỗi riêng, `aria-invalid`, `aria-describedby` (gợi ý + lỗi), focus chuyển tới ô lỗi đầu tiên. Không chỉ bằng màu.
- **Đang xử lý:** nút bị vô hiệu, `aria-busy`, nhãn “Đang xử lý…”, ô nhập chỉ đọc, thông báo `aria-live`. Không đổi trang.
- **Hiện/ẩn mật khẩu:** nút 44px trong ô, `aria-pressed`, nhãn đổi “Hiện mật khẩu”/“Ẩn mật khẩu”.
- `autocomplete` đúng (`email`, `current-password`, `new-password`), `inputmode`, tắt tự viết hoa/kiểm chính tả ở email.

### Đăng nhập (`login.html`)
Email, Mật khẩu (hiện/ẩn), nút Đăng nhập, “Quên mật khẩu?”, “Chưa có tài khoản? Đăng ký”, quay lại nội dung trước. **Lỗi xác thực chung** “Email hoặc mật khẩu không đúng” (không nói sai trường nào, không xác nhận email tồn tại), lỗi kết nối riêng, trạng thái đang xử lý. Thành công (mô phỏng): đặt cờ đăng nhập và chuyển về `next` hoặc Học tập của tôi (câu 102).

### Đăng ký (`register.html`)
**Chỉ ba trường: Email, Mật khẩu, Nhập lại mật khẩu** (không số điện thoại/ngày sinh/giới tính/họ tên). Kiểm tra chung: bắt buộc, định dạng email, hai mật khẩu khớp. **Không** tự quy định độ mạnh mật khẩu (chỉ gợi ý trung tính “chọn mật khẩu bạn không dùng ở nơi khác”, đánh dấu “chờ duyệt”). Điều khoản/Chính sách quyền riêng tư: **liên kết giữ chỗ** kèm ghi chú “nội dung chưa được soạn”, **không có ô đồng ý và không có cam kết pháp lý** (câu 94). Sau khi gửi (mô phỏng) hiện “Đã nhận yêu cầu đăng ký — hãy kiểm tra email để biết bước tiếp theo” (trung tính; **không** quyết định xác minh email, đánh dấu “chờ duyệt”; không lộ email đã tồn tại).

### Quên mật khẩu → đặt lại (`forgot-password.html`, `reset-password.html`)
Luồng: Quên mật khẩu → nhập email → **thông báo trung tính** (“Nếu có tài khoản liên kết với địa chỉ này, hướng dẫn … sẽ được gửi”; **giống hệt** cho mọi địa chỉ, đã kiểm) → (từ email) Đặt lại mật khẩu (mật khẩu mới + nhập lại) → “Mật khẩu đã được đặt lại” + liên kết đăng nhập. Trạng thái “liên kết không hợp lệ hoặc đã hết hạn” có nút yêu cầu liên kết mới. Không token, không logic bảo mật, không gửi email.

### Không có trong R7
Social/OAuth login, xác minh email thật, MFA, “ghi nhớ đăng nhập”, khóa tài khoản/giới hạn thử/CAPTCHA, hồ sơ, đổi mật khẩu, xóa tài khoản, Admin, backend.

## 4l. Menu tài khoản và khám phá UX cho khách (R7)

### Menu tài khoản (header website, mọi trang)
- **Desktop (≥961px):** nút biểu tượng người (44px, tên truy cập “Tài khoản”/“Tài khoản (đã đăng nhập)”) cạnh nút ngôn ngữ; mở hộp nhỏ dưới nút. **Chưa đăng nhập:** Đăng nhập, Đăng ký (cả hai mang `next` = trang hiện tại). **Đã đăng nhập:** **Học tập của tôi** (đánh dấu trang hiện tại), **Đăng xuất**. Nút chuyển sang nền mực khi đã đăng nhập. Bàn phím: Enter mở, mũi tên di chuyển, Esc đóng và trả focus, Tab ra ngoài đóng.
- **Mobile (≤960px):** nút tài khoản ẩn (tránh chật header); cùng các mục nằm trong **mục “Tài khoản” cuối menu hamburger**. Không hiển thị thông tin cá nhân (không tên, ảnh, email) — dữ liệu prototype không có người thật. Mục hồ sơ chưa thiết kế (không bắt buộc).
- Đăng xuất (mô phỏng): xóa cờ và về trang chủ.
- **320px:** header dùng chung được thu gọn ở ≤360px (khoảng đệm, cỡ logo, nút ngôn ngữ) để logo + nút ngôn ngữ + nút menu cùng một hàng; sửa lỗi tràn 18–25px đã báo ở R4–R6. Đã kiểm lại các màn khác ở 320px.

### Khám phá UX cho khách (`guest-ux.html`) — PHƯƠNG ÁN, chưa phải quyết định
Hai tình huống, không khóa nội dung, không xóa dữ liệu đang làm, không tự chuyển trang:
1. **Khách xem Luyện đề / Luyện kỹ năng:** **A** — thanh thông báo mỏng, đóng được, dưới header (“Bạn đang xem với tư cách khách. Đăng nhập để lưu tiến độ …”, Đăng nhập / Đăng ký / Đóng; đóng xong focus về tiêu đề; các nút Bắt đầu vẫn bấm được); **B** — dòng nhắc cạnh nút Bắt đầu (“Khi chưa đăng nhập, tiến độ có thể không được lưu”), không chặn.
2. **Khách cần lưu tiến độ:** trên một câu mẫu đã chọn đáp án, nút “Lưu tiến độ” mở **khung nội tuyến** (không phải hộp thoại chặn) “Đăng nhập để lưu tiến độ — bài làm hiện tại vẫn giữ nguyên trên màn hình; bạn có thể đăng nhập (sẽ quay lại đúng câu này) hoặc tiếp tục không lưu”, ba nút Đăng nhập / Đăng ký / **Tiếp tục không lưu** (đóng khung, lựa chọn còn nguyên, focus về nút Lưu). Liên kết đăng nhập mang `next`; khi quay lại ở trạng thái đã đăng nhập, lựa chọn mẫu còn (minh họa; **không** khẳng định chính sách gắn dữ liệu khách vào tài khoản).
- Cuối trang liệt kê **câu hỏi cần reviewer quyết định**: thi thử khi chưa đăng nhập; luyện kỹ năng khi chưa đăng nhập; lưu tạm dữ liệu khách; gắn dữ liệu khách vào tài khoản sau đăng nhập; tần suất/lặp lại nhắc đăng nhập.

## 4m. Admin UX Foundation (R8) — ĐỀ XUẤT, chưa duyệt

> Bốn prototype đại diện, dữ liệu **minh họa**, **tiếng Việt** (đa ngôn ngữ cho Admin chưa quyết định), không backend/Gemini/upload, không phân quyền. Coral Foundation giữ nguyên nhưng **mật độ thông tin và thao tác biên tập** được ưu tiên: nền sáng ấm, chữ 14px, bảng và thẻ gọn, màu coral chỉ cho nút chính/điều hướng hiện tại, thao tác nguy hiểm dùng **viền mận** (không coral). Cấu trúc thông tin, khái niệm và trạng thái: `ADMIN-IA-PROPOSAL.md`; sơ đồ: `admin-navigation-map.svg`.

### Khung chung
Thanh điều hướng trái 5 mục (Tổng quan, Đề thi, Ngân hàng câu hỏi, Kiểm duyệt AI — có số mục chờ, Media); thanh trên có tên trang, nhãn “Prototype · dữ liệu minh họa” và nhãn “Quản trị viên (minh họa)” (không dữ liệu cá nhân). **≤960px** thanh trái thành ngăn trượt (nút menu, Esc đóng, focus trả về nút). Liên kết “Bỏ qua điều hướng”, một `h1` mỗi trang, `aria-current`. Thông báo trạng thái qua vùng `aria-live` (toast) và chip trạng thái luôn có biểu tượng + chữ + kiểu viền.

### `admin-dashboard.html` — Tổng quan
Bốn thẻ số đề theo trạng thái (Bản nháp / Cần kiểm duyệt / Sẵn sàng xuất bản / Đã xuất bản); “Cần xử lý” (AI chờ kiểm duyệt, yêu cầu chỉnh sửa, lỗi; đề cần kiểm duyệt) với liên kết; “Sẵn sàng xuất bản” kèm kết quả điều kiện tiếng Việt (Publication Language V1); bảng đề theo **nguồn × trạng thái** (hai nguồn tách riêng); hoạt động gần đây (minh họa). Ghi chú: không tài chính/CRM; phân quyền đã ghi nhận chưa thiết kế.

### `admin-exams.html` — Đề thi
Bộ lọc **nhóm đề** (3 nhóm), trạng thái, tìm kiếm; bảng: tên/mã, **huy hiệu nguồn** (đề TOPIK theo kỳ / đề mô phỏng) + danh mục, số câu, **trạng thái nội dung**, số câu có lời giải/bản dịch đã duyệt (tiếng Việt) hoặc “Chưa xác định”, ngày cập nhật, thao tác (Mở biên soạn, Chi tiết). ≤760px bảng chuyển thành thẻ có nhãn trường (không cuộn ngang, không mất nội dung). **Chi tiết (ngăn bên):** cấu trúc (chỉ TOPIK II; nhóm khác “Chưa có thông tin cấu trúc”), **ma trận điều kiện xuất bản** theo ngôn ngữ (cột “Vai trò”: tiếng Việt “Bắt buộc V1”, các ngôn ngữ khác “Bổ sung (không chặn xuất bản)”), ghi chú **Publication Language V1** (tiếng Việt bắt buộc; ngôn ngữ khác là bổ sung, không chặn xuất bản), danh sách thiếu sót, thao tác Xuất bản… (chỉ bật khi “Sẵn sàng xuất bản” và đủ lời giải + bản dịch tiếng Việt đã duyệt cho mọi câu), Gỡ xuất bản… (đề đã xuất bản), Xóa bản nháp… (đề nháp) — **đều qua hộp thoại, gỡ/xóa phải gõ mã đề**. “Tạo đề mới” là hộp thoại chọn nhóm + danh mục kèm ghi chú cấu trúc (không áp TOPIK II cho nhóm khác).

### `admin-question-editor.html` — Ngân hàng câu hỏi (biên soạn)
Trái: **cấu trúc đề** theo phần Nghe/Viết/Đọc, nhóm câu (viền nhóm + nhãn loại dùng chung), mỗi câu có hai chấm trạng thái (lời giải/bản dịch tiếng Việt). Giữa: tiêu đề câu, **chuỗi quan hệ** Question Group › Shared Context › Question, bốn tab (Nội dung, Đáp án, Lời giải, Bản dịch). **Bối cảnh dùng chung** là khung riêng (đoạn văn, hoặc tham chiếu media) nêu “Dùng bởi n câu: …” và cảnh báo “sửa sẽ thay đổi tất cả các câu này”. Loại câu: trắc nghiệm / tự luận ngắn / tự luận dài (chỉ ràng buộc theo TOPIK II). Đáp án: sửa lựa chọn và chọn đáp án đúng; tự luận: ghi chú chưa quy định đáp án tham khảo/rubric. **Lời giải và Bản dịch:** chọn ngôn ngữ (mỗi ngôn ngữ có chip trạng thái AI), hai khung cạnh nhau — **“Đang áp dụng cho người học (đã duyệt)”** (viền liền, khiên, nền xanh nhạt) và **“Nháp AI — chưa duyệt — người học KHÔNG thấy”** (viền nét đứt, nền sọc, nhãn cảnh báo); liên kết “Mở trong Kiểm duyệt AI”; nút “Yêu cầu Gemini đề xuất” vô hiệu (chưa triển khai). Chỉ báo **“Đã lưu / Chưa lưu thay đổi”**; chuyển câu khi chưa lưu có hộp thoại, nội dung đang gõ được giữ. **Thư viện media** (hộp thoại): lọc Âm thanh/Hình ảnh/Biểu đồ/Tài nguyên đính kèm, mỗi mục nêu “đang được dùng bởi”, chọn để tham chiếu; “Tải lên” vô hiệu (không upload).

### `admin-ai-review.html` — Kiểm duyệt AI
Thanh các bước (Nội dung câu hỏi › Gemini đề xuất › Admin kiểm duyệt › Đã duyệt › Đủ điều kiện xuất bản). Trái: hàng chờ lọc theo **5 trạng thái** (Chưa tạo nội dung AI, Đang chờ kiểm duyệt, Đã duyệt, Yêu cầu chỉnh sửa, Không thể sử dụng/lỗi — mỗi trạng thái một kiểu chip), ngôn ngữ, loại. Phải: câu hỏi gốc (tiếng Hàn, chỉ đọc), hai khung đã duyệt/nháp như trên, nháp có thể chỉnh trước khi duyệt; thao tác theo trạng thái: **Duyệt…** (hộp thoại nêu “không tự xuất bản”, hiển thị nội dung sẽ được duyệt), **Yêu cầu chỉnh sửa…** (ghi chú bắt buộc), **Đánh dấu không thể sử dụng…** (lý do bắt buộc, nút viền mận). Ghi chú cố định: chưa triển khai Gemini; chuyển trạng thái chỉ mô phỏng; quy trình thật chưa quy định.

### Không có trong R8
Toàn bộ CMS/trang cài đặt, danh sách ngân hàng câu hỏi chéo đề, trang quản lý media riêng, nhật ký thay đổi, phân quyền, tài chính/doanh thu/CRM, Gemini/hàng đợi/automation, upload media, Cloudflare R2/Workers/hosting, đa ngôn ngữ cho Admin.

## 5. Giải thích quyết định chính

| Quyết định | Lý do |
|---|---|
| Hai màu coral (500 thương hiệu, 600 hành động) | Coral sáng không đạt 4.5:1 cho chữ trắng; tách vai trò để vừa giữ bản sắc vừa đạt WCAG AA. |
| “Đã trả lời” = đen đặc, không coral/xanh | Tránh mã hóa đúng/sai; coral dành cho “đang chọn” và hành động. |
| Lỗi = mận, không coral | Coral là màu thương hiệu; trộn với lỗi sẽ gây hiểu lầm. Success xanh lá chỉ xuất hiện sau thi; emerald vẫn không thuộc brand. |
| Focus xanh | Phân biệt được với “đã chọn” (coral); không ai nhầm bàn phím-focus với đáp án. |
| Không bóng/gradient | Theo brief; cũng nhẹ hơn cho hosting chia sẻ và thiết bị yếu. |
| Dòng Hàn 1.9, `keep-all`, 18px | Hangul và ký hiệu ㉠ cần nhiều không gian dọc; `keep-all` tránh ngắt giữa từ. |
| Điều hướng thành bottom sheet trên mobile | Giữ nội dung đọc chiếm toàn chiều rộng; điều hướng vẫn một chạm. |
| Hộp thoại nộp bài chỉ có số lượng + nhắc quy tắc công bố | Thực thi quy tắc thi thử ngay ở UI; nút an toàn (“Quay lại làm bài”) là primary. |
| Header mobile ẩn dòng thông tin phụ | Giữ đồng hồ và Nộp bài luôn thấy; badge nguồn đề không bị ẩn. |

---

## 6. Câu hỏi cần reviewer quyết định

1. **Baseline Phase 1:** tài liệu gốc nằm ở đâu? Tôi chưa đối chiếu được; nếu có quy tắc nào mâu thuẫn với prototype thì Phase 1 thắng.
2. **“Bỏ chọn” và “Đánh dấu xem lại”**: tôi thêm hai thao tác này như giả định (thông lệ thi trực tuyến). Có thuộc nghiệp vụ Exam Engine không? Nếu không, loại khỏi UI.
5. **Thời gian:** đồng hồ toàn đề hay theo từng phần? Hết giờ thì tự nộp? Có cảnh báo còn X phút không? (Chưa thiết kế.)
6. **Tạm dừng / thoát giữa chừng** có thuộc nghiệp vụ không?
7. **Nhận diện:** phê duyệt coral `#F26B52`/`#CF3F28`; wordmark “TIENGHANTOPIK” + chip “한” hiện là tạm. Cần logo thật?
8. **Phông chữ:** dùng Google Fonts (cần kiểm tra chính sách/độ trễ tại VN) hay tự host?
9. **Màu thành công:** chấp nhận xanh lá `#1D7A4B` ở màn kết quả/ôn tập, hay muốn một màu khác tránh gần emerald?
10. Giao diện hệ thống quanh vùng đề (tên nút “Nộp bài”, “Danh sách câu”, “Câu trước/Câu sau”, hộp thoại nộp bài) nay đổi được 5 ngôn ngữ (mục 4c). Đề thật có bắt buộc giữ nguyên giao diện/ngôn ngữ phần này không, hay chỉ vùng đề?
11. Trên mobile, đoạn đọc cố định phải thu nhỏ còn 17px (thấp hơn mức 18px của desktop) để không chiếm quá 34% màn hình. Chấp nhận, hay muốn cho người dùng thu/mở đoạn văn?
13. **Đếm ký tự câu 53–54:** tính dấu cách và dấu câu thế nào? Chữ số/Latin “hai ký tự một ô” có tính theo ô không? Vượt giới hạn thì chỉ cảnh báo (như hiện tại) hay chặn nhập?
14. **Thông số giấy 원고지** (30 ô/hàng đã xác nhận): số hàng cho 53/54, độ dài ô trả lời 51–52; có vạch mốc 200/300/600/700 trên giấy không?
16. **Kết thúc Viết sớm:** có nút kết thúc sớm không? Nếu có thì thời gian Viết còn dư và giờ nghỉ tính thế nào? Hết 15 phút nghỉ có tự vào Đọc không, và có được bắt đầu Đọc sớm không?
17. **Thời lượng phần Đọc** (chưa có thông tin; đồng hồ mẫu chỉ đếm xuống từ 54:12) và các cảnh báo hết giờ.
18. Câu 51–54 có dùng “đánh dấu xem lại” không (hiện chỉ có ở Nghe/Đọc)?
23. Phần Nghe có các dạng câu khác ngoài nhóm hai câu (một câu một đoạn, chọn tranh, chọn câu đáp)? Cần danh sách dạng để thiết kế đủ.
24. **Bản dịch UI (5 ngôn ngữ):** do Claude soạn, chưa có người bản ngữ duyệt. Cần chuẩn hóa thuật ngữ thi (Nghe/Viết/Đọc, “Câu”, “Đề mô phỏng”…) và ngữ điệu trang trọng.
25. **Mã `zh-Hans`:** quy ước tạm thời. Có cần tiếng Trung phồn thể (`zh-Hant`) sau này không? Chưa thiết kế.
26. **Cách ghi nhớ và định tuyến ngôn ngữ ở production** (URL theo ngôn ngữ, cookie, hồ sơ người dùng, SEO) là việc của website; prototype chỉ có `?lang=` và đọc `localStorage` (không ghi). Chưa quyết định.
27. ~~Đổi ngôn ngữ trong lúc thi thử~~ — **đã giải quyết bằng quyết định UX mới:** không có switcher trong lúc thi, ngôn ngữ cố định trong phiên.
28. ~~Lời giải/bản dịch có phải đủ 5 ngôn ngữ~~ — **đã giải quyết (Publication Language V1):** tiếng Việt bắt buộc; en/ko/zh/th bổ sung, chỉ hiển thị khi đã duyệt.
29. **Định dạng số/giờ/ngày theo locale** và quy ước tên người dùng (Thái/Trung/Hàn) trong header: chưa xử lý.
30. **Phông chữ:** nay tải 4 họ phông từ Google Fonts (Be Vietnam Pro, Noto Sans KR/SC/Thai). Có tự host và cắt tập ký tự (subset) để nhẹ hơn không?
31. ~~Header chật ở 961–1100px~~ — đã xử lý (xem mục 4c); còn cần reviewer xem lại bằng mắt.
32. **Giao diện chọn ngôn ngữ của website** (trang chủ và trang thường, desktop/mobile): chưa thiết kế vì đúng giới hạn vòng này. Có thể tái dùng mẫu menu/bottom sheet của vòng trước (đã gỡ khỏi Exam Taking).
33. **Bắt đầu phiên thi mà chưa chọn ngôn ngữ** (người dùng vào thẳng link đề): dùng giá trị đã ghi nhớ nếu có, nếu không thì `vi`. Có cần xác nhận ngôn ngữ trước khi bắt đầu thi không?
34. **Khi người dùng đổi ngôn ngữ ở tab khác trong lúc đang thi:** prototype bỏ qua (ngôn ngữ phiên thi đã khóa). Cần xác nhận hành vi này.
35. **Nút thu gọn đề (mobile):** có mặc định thu gọn khi bắt đầu gõ vào giấy (bàn phím ảo làm màn hình rất thấp) không? Hiện chỉ thu gọn thủ công.
36. **Dữ liệu thật của thư viện:** những trường nào có sẵn cho mỗi đề (số kỳ, năm/ngày thi, cấp độ, các phần, số câu, thời lượng, trạng thái xuất bản)? Prototype không khẳng định đề nào đã xuất bản, có lời giải hay có kết quả chấm; cần quy tắc hiển thị khi có dữ liệu xác thực.
37. **TOPIK I** có thuộc phạm vi sản phẩm không, và quy trình thi/cấu trúc của nó là gì? Prototype chỉ giữ chỗ phân biệt cấp độ và khóa việc bắt đầu thi TOPIK I; **không dùng quy trình TOPIK II cho TOPIK I.** Nếu ngoài phạm vi, bỏ bộ lọc cấp độ và dữ liệu TOPIK I.
38. **Trạng thái và lịch sử làm bài** (“Đang làm dở”, “Tiếp tục”, “Làm lại”): chưa khóa nghiệp vụ. Có cần đăng nhập để thấy trạng thái không (Firebase Auth đã dự kiến, chưa thiết kế)?
39. ~~Chọn chế độ thi thử/luyện tập~~ — **đã duyệt** chọn trước khi bắt đầu (hộp thoại chi tiết). Còn mở: màn luyện tập chưa thiết kế.
40. ~~Trang chi tiết riêng~~ — **đã quyết định:** giữ hộp thoại, chưa cần trang riêng.
41. **Điều hướng chính:** các mục Trang chủ / Thư viện đề / Luyện tập / Cách học có đủ không? Có cần Đăng nhập, Liên hệ, Điều khoản, Quyền riêng tư (chưa thiết kế, chưa có thông tin)?
42. **Lối vào “Luyện tập”** hiện dẫn tới Exam Library với chế độ luyện tập; có cần màn riêng không?
43. **Sắp xếp mặc định:** hiện theo số kỳ/số đề giảm dần trong mỗi nhóm; có cần sắp xếp khác (theo ngày thi, theo mức độ khó) không?
44. **Phân trang / tải thêm** khi thư viện lớn: chưa thiết kế vì chưa biết quy mô dữ liệu.
45. **Tên và cách phân loại trước kỳ 35:** ba cấp “Sơ cấp / Trung cấp / Cao cấp” (en Beginner/Intermediate/Advanced, ko 초급/중급/고급…) có đúng tên và ranh giới dùng cho các kỳ trước 35 không? Có kỳ nào thuộc nhiều cấp không?
46. **Đề trước kỳ 35 có thể làm trên Exam Engine không?** Cấu trúc/quy trình thi cũ chưa xác nhận nên prototype khóa nút bắt đầu. Cần quyết định phạm vi.
47. **Slug và ngôn ngữ trong URL:** tiền tố ngôn ngữ (`/vi/`, `/en/`…) và slug dùng chung tiếng Anh cho ko/zh/th có chấp nhận không, hay dùng slug bản ngữ? `vi` dùng slug tiếng Việt không dấu. Domain và quy tắc chuyển hướng.
48. **Trang nhóm** (3 đề mới nhất + liên kết) và **trang hub** (chỉ tổng quan): có đủ nội dung để indexable, hay cần nội dung biên tập thật (mô tả dài)? Tránh trùng lặp với trang con.
49. **Danh mục rỗng:** quy tắc “không liên kết, noindex, không sitemap, (đề xuất) 302 về nhóm cha” có chấp nhận không? Ai quyết định khi nào một danh mục “có nội dung” (đã xuất bản, có dữ liệu xác thực)?
50. **Tìm kiếm trong thư viện:** giữ trong trang, không URL riêng; sau này có cần trang kết quả tìm kiếm (noindex) không?
51. **Số lượng đề hiển thị trong menu/hub** (hiện chỉ ở hub/nhóm) và “Sắp có” cho danh mục rỗng: có muốn hiển thị số đề không?
52. **Mega menu:** có mở bằng rê chuột (đang bật, có độ trễ) hay chỉ bấm? Có cần liên kết “Luyện tập” nằm trong cây danh mục không?
53. **Bản dịch tên danh mục, title, meta description** (5 ngôn ngữ) do Claude soạn, cần người bản ngữ và chuyên viên SEO duyệt; thuật ngữ “trước kỳ 35 / từ kỳ 35” và các tên cấp.
54. **Canonical/hreflang/sitemap production:** chỉ mô phỏng; cần quyết định domain, cách phát hiện ngôn ngữ, `x-default`, và xử lý người dùng chưa chọn ngôn ngữ.
19. ~~Màn tiếp theo~~ — Kết quả sau thi và Xem lại đáp án đã được thiết kế ở R4 (mục 4f, câu 55–69). Còn lại: Luyện tập (xem đáp án từng câu).

**Kết quả thi và Xem lại đáp án (R4) — quyết định nghiệp vụ còn mở (không thiết kế thay):**
55. **Cách tính điểm và thang điểm:** điểm từng phần/tổng (prototype ghi số cố định 100 và 300), cấp độ/đậu-rớt. Prototype không hiển thị cấp độ và không suy điểm từ số câu đúng.
56. **Viết chưa chấm sau khi nộp:** có công bố điểm Nghe/Đọc trước không (prototype giả định có, đánh dấu đề xuất), tổng điểm khi nào xuất hiện, ai/cách nào chấm Viết (không thiết kế AI chấm), thông báo khi có điểm.
57. **“Không có điểm hợp lệ”:** nguyên nhân (lỗi xử lý, bài nộp rỗng, hủy, chưa chấm xong…), có xem lại bài đã làm không (prototype cho xem lựa chọn của mình, không có đáp án), nội dung thông báo và người liên hệ.
58. **Số câu đúng/sai/chưa trả lời:** nguồn “đã xác nhận” là gì; có hiển thị cho Viết không; “chưa trả lời” có gồm câu thí sinh bỏ trống khi hết giờ không.
59. **Khi nào công bố đáp án:** ngay sau nộp, hay sau khi mọi phần đã chấm; khác nhau giữa đề theo kỳ và đề mô phỏng không (quy tắc đã khóa: không công bố gì trong lúc thi).
60. **Âm thanh và lời thoại khi xem lại:** có cho nghe lại, có công bố lời thoại không (bản quyền); điều khiển nghe lại.
61. **Lời giải và bản dịch:** ~~ngôn ngữ bắt buộc~~ (đã khóa: tiếng Việt), phạm vi dịch (đề, đoạn, lựa chọn, lời thoại?), quy trình duyệt/hiệu lực, **cách xử lý khi thiếu bản theo ngôn ngữ giao diện** (prototype: ô giữ chỗ + nút xem bản có sẵn), ai ký duyệt.
62. **Phần Viết khi xem lại:** có công bố đáp án tham khảo/bài mẫu cho câu 51–54 không; có điểm từng câu không; có nhận xét không (chưa có rubric, AI feedback hay gợi ý điểm); quy tắc đếm ký tự (đang dùng quy tắc Exam Taking).
63. **Lịch sử và thao tác sau kết quả:** các lần thi, làm lại, so sánh, tải/chia sẻ/in kết quả; “Về Thư viện đề” có đủ không.
64. **Bộ chuyển ngôn ngữ ở màn kết quả:** hiện dùng header website (có bộ chuyển). Đổi ngôn ngữ sau thi có ảnh hưởng ngôn ngữ lời giải không; có cần khóa theo ngôn ngữ phiên thi không.
65. **Quy mô thực:** đề thật có 50 câu Nghe + 4 Viết + 50 Đọc; lưới điều hướng, hiệu năng và bộ lọc cần thử với quy mô này (prototype rút gọn 6/4/8).
66. **Quyền xem lại:** có cần đăng nhập, thời hạn lưu kết quả, ai được xem.
67. **Từ ngữ nguồn đề:** nhãn “Đề TOPIK theo kỳ” trên màn kết quả vẫn chờ duyệt cách ghi (mục 4d.1); điểm của đề mô phỏng có được ghi là “ước lượng” không (chưa quyết định, prototype không tuyên bố gì).
68. **Màn Luyện tập** (xem đáp án và lời giải sau từng câu, đánh dấu “đã xem đáp án”) chưa thiết kế; các thành phần xem lại (nhãn lớp thông tin, khung lời giải đã duyệt) có thể tái dùng.
69. **Bản dịch UI mới** (khoảng 100 chuỗi cho Kết quả/Xem lại, 5 ngôn ngữ) do Claude soạn, chưa người bản ngữ duyệt; nội dung tiếng Hàn minh họa cần người biết tiếng Hàn kiểm tra.

**Luyện kỹ năng (R5) — quyết định nghiệp vụ còn mở:**
70. **Cấu trúc bộ bài tập:** có bao nhiêu bộ, bao nhiêu câu, thời lượng (nếu có); bộ chứa loại câu nào; ai biên soạn/duyệt; liên hệ với đề thi gốc.
71. **Mức bài tập** (Làm quen/Củng cố/Thử thách): có đúng là ba mức không, tên gọi, có đối chiếu với cấp 1–6 không, điều kiện mở khóa; TOPIK I có đủ ba mức không; TOPIK II Luyện viết có mức nào.
72. **Hoàn thành một bộ:** thế nào là “Đã hoàn thành” (trả lời hết? xem đáp án hết?), có điểm/tổng kết cho bộ không (prototype không có), nhãn “Đang làm dở/Đã hoàn thành” chỉ minh họa.
73. **Làm lại, lưu và tiếp tục tiến độ,** cho phép đổi đáp án sau khi xem (prototype đề xuất khóa), lịch sử, yêu cầu đăng nhập.
74. **Câu Viết trong luyện tập:** dùng ô nhập thường hay giấy 원고지; có đáp án tham khảo/bài mẫu không; không chấm, không AI, không rubric — có muốn tự đánh giá không; đếm ký tự.
75. **Âm thanh trong luyện tập:** có điều khiển phát/tạm dừng/tua/nghe lại, giới hạn số lần nghe; lời thoại công bố khi nào (bản quyền).
76. **Hình ảnh trong câu hỏi** (chọn tranh, biểu đồ): nguồn, bản quyền, văn bản thay thế (alt) do ai viết.
77. **Ngôn ngữ giao diện trong phiên luyện:** giữ bộ chuyển ngôn ngữ ở header (hiện tại) hay khóa theo phiên như Exam Taking; lời giải/bản dịch bắt buộc ngôn ngữ nào; cách xử lý khi thiếu (nút xem bản khác — đề xuất).
78. **Lời giải sau khi xem đáp án:** chỉ khi đã trả lời (hiện tại) hay cho xem cả khi chưa trả lời; câu bỏ qua có được xem đáp án không.
79. **Quan hệ với Luyện tập dựa trên đề** (chế độ trong hộp thoại Thư viện đề, vẫn chưa thiết kế màn riêng): dùng chung thành phần phiên luyện này hay khác; cách phân biệt trong menu.
80. **SEO:** slug (có dùng bản ngữ cho ko/zh/th không), nội dung biên tập cho hub/cấp/kỹ năng, quy tắc “có nội dung thực sự” (≥ 1 bộ đã xuất bản?), có cần trang riêng cho từng bộ không (hiện không), tên “Luyện kỹ năng” có nên có từ khóa tiếng Hàn.
81. **Bản dịch UI mới** (~150 chuỗi, 5 ngôn ngữ) và nội dung tiếng Hàn minh họa chưa được người bản ngữ duyệt; nhãn nav “영역별 연습 / 技能练习 / ฝึกทักษะ” cần xác nhận.
82. **Sửa trạng thái 2 của Kết quả (R4)** theo quyết định không mặc định công bố điểm riêng Nghe/Đọc (mục 4g.6).

**Consolidation và Dashboard (R6) — còn mở:**
83. ~~Màn Xem lại khi kết quả chưa hoàn tất~~ — **đã giải quyết (R7):** xem lại câu trả lời của chính mình, không đáp án chuẩn/đúng-sai/điểm.
84. **Cấp độ mục tiêu:** quy trình biên soạn/kiểm duyệt và ai gán; một bộ có thể hướng tới nhiều cấp (ví dụ 3–4) không; bộ chưa gán có được xuất bản không; cấp mục tiêu có dùng để gợi ý bộ cho người học không (không thiết kế gợi ý).
85. **Lưu tiến độ:** xác nhận hướng đề xuất ở mục 4h.3; xử lý lỗi lưu; khôi phục nhiều thiết bị; thời hạn lưu; “hoàn thành” một bộ.
86. **Dashboard — nguồn dữ liệu và định nghĩa:** “đề đã tham gia”, “đề đang làm dở hợp lệ” (điều kiện, hết hạn?), “bộ đã luyện” (ít nhất một câu đã trả lời), “câu đã xem đáp án”; Dashboard có thêm chỉ số nào không (hiện chỉ năm chỉ số có nguồn).
87. **Dashboard — Tiếp tục/Làm lại đề thi:** vẫn chưa khóa (đề xuất nét đứt); phiên thi dở có hết hạn không; làm lại tạo lượt mới hay ghi đè; có hiển thị lịch sử các lượt thi không.
88. **Dashboard — hiển thị điểm đã công bố:** chỉ tổng điểm hay cả điểm phần; có hiển thị điểm trên Dashboard hay chỉ liên kết “Xem kết quả”.
89. **Dashboard — truy cập và riêng tư:** xác thực, kiểm soát truy cập máy chủ, ẩn thông tin trên màn hình chung, xóa/xuất dữ liệu; tên hiển thị người dùng (prototype không có).
90. **Điều hướng:** tên và vị trí mục “Học tập của tôi” trên header (hiện là mục cuối thanh điều hướng); có menu người dùng/đăng nhập không (chưa thiết kế).
91. **Bản dịch UI mới** của Dashboard và nhãn “Học tập của tôi / Dashboard / 내 학습 / 学习面板 / แดชบอร์ด” chưa người bản ngữ duyệt.

**Account & Authentication, Guest UX (R7) — còn mở (không thiết kế thay):**
92. **Xác minh email khi đăng ký:** có/không, có bắt buộc trước khi dùng không, thời hạn liên kết, gửi lại; nội dung thông báo sau đăng ký (prototype dùng thông báo trung tính, đánh dấu chờ duyệt).
93. **Chính sách độ mạnh mật khẩu:** độ dài, ký tự, danh sách chặn, có hiển thị chỉ báo không (prototype chỉ có gợi ý trung tính và kiểm tra bắt buộc/khớp).
94. **Điều khoản và quyền riêng tư:** nội dung, nơi đặt, có cần ô đồng ý (pháp lý quyết định); hiện chỉ là liên kết giữ chỗ.
95. **Social login (Google/Facebook/Apple):** chưa được duyệt, không thiết kế; có bổ sung ở vòng sau không.
96. **Đăng nhập — bảo mật và phiên:** “ghi nhớ đăng nhập”, thời hạn phiên, giới hạn số lần thử/khóa/CAPTCHA, thông báo khi bị khóa (chưa thiết kế), MFA.
97. **Khôi phục mật khẩu:** thời hạn liên kết, gửi lại và giới hạn tần suất, email có gửi cho địa chỉ không có tài khoản không (prototype giữ phản hồi giống hệt), sau đặt lại có tự đăng nhập/thu hồi phiên khác không.
98. **Đăng ký với email đã tồn tại:** thông điệp trung tính để không lộ tồn tại tài khoản và hành vi thực tế (prototype chỉ có một kết quả thành công).
99. **Đăng xuất:** có xác nhận khi đang có bài làm dở/chưa lưu không; xử lý dữ liệu cục bộ.
100. **Hồ sơ, đổi mật khẩu, xóa tài khoản, quyền riêng tư dữ liệu:** chưa thiết kế (không bắt buộc ở vòng này).
101. **Chính sách khách:** (1) thi thử khi chưa đăng nhập; (2) luyện kỹ năng khi chưa đăng nhập; (3) lưu tạm dữ liệu khách; (4) gắn dữ liệu khách vào tài khoản sau đăng nhập và xử lý xung đột; (5) tần suất/lặp lại nhắc đăng nhập. `guest-ux.html` chỉ là phương án.
102. **Điều hướng sau đăng nhập:** quay về nội dung trước (`next`, prototype) hay về Học tập của tôi; danh sách đích hợp lệ; kiểm tra `next` ở máy chủ.
103. **Bản dịch UI mới** (~115 chuỗi cho xác thực/khách/menu) và nhãn “Học tập của tôi / My learning / 내 학습 / 我的学习 / การเรียนของฉัน” chưa người bản ngữ duyệt.
104. **Menu tài khoản:** biểu tượng không nhãn ở desktop (tên truy cập qua `aria-label`) có đủ rõ không; trên mobile nằm trong menu hamburger; có hiển thị tên/email khi đăng nhập không (prototype không có dữ liệu cá nhân).

**Admin UX Foundation (R8) — còn mở (không tự chốt):**
105. **Quy trình chuyển trạng thái nội dung** (Bản nháp → Cần kiểm duyệt → Sẵn sàng xuất bản → Đã xuất bản): ai chuyển, điều kiện, được quay lại không, tên trạng thái; prototype chỉ hiển thị.
106. ~~Ngôn ngữ bắt buộc cho lời giải/bản dịch trước khi xuất bản~~ — **đã khóa (Publication Language V1):** chỉ tiếng Việt bắt buộc; ngôn ngữ khác bổ sung, không chặn xuất bản. Prototype Admin đã sửa tối thiểu theo chính sách này.
107. **Cấu trúc và loại câu** cho TOPIK I và đề trước kỳ 35 (hiện “Chưa có thông tin”), nên trang biên soạn dạng tự do.
108. **Phân quyền quản trị:** vai trò (biên soạn/duyệt/xuất bản/quản trị), có tách người tạo và người duyệt, xác thực quản trị, nhật ký (nhu cầu đã ghi nhận, chưa thiết kế).
109. **Gemini:** mô hình/prompt, ai kích hoạt và khi nào, ngôn ngữ nào được tạo, xử lý lỗi/thử lại, lưu lịch sử bản nháp, chi phí; hàng đợi tác vụ (chưa thiết kế, chưa triển khai).
110. **Duyệt:** có cho chỉnh sửa nháp trước khi duyệt (prototype cho phép), thu hồi duyệt, cần một hay hai người duyệt, nội dung đã duyệt bị sửa có mất trạng thái duyệt không (câu đổi → lời giải cũ còn hợp lệ?).
111. **Gỡ xuất bản và xóa:** ảnh hưởng tới phiên đang làm và kết quả đã có; xóa mềm/lưu trữ/khôi phục; ai được phép.
112. **Media:** định dạng và giới hạn, bản quyền/quyền sử dụng, văn bản thay thế (alt) bắt buộc, phiên bản, thay thế media đang dùng, lưu trữ và phân phối (R2/Workers/hosting ngoài phạm vi).
113. **Bối cảnh dùng chung:** sửa khi đề đã xuất bản (khóa, nhân bản để sửa, cảnh báo); một bối cảnh dùng giữa nhiều đề.
114. **Đáp án tham khảo/bài mẫu cho tự luận** và rubric (không thiết kế); số lượng ký tự, giấy 원고지 trong biên soạn.
115. **Ngân hàng câu hỏi chéo đề:** tìm kiếm/lọc/tái sử dụng câu giữa các đề, nhập hàng loạt (CSV), nhân bản đề — chưa thiết kế.
116. **Ngôn ngữ giao diện Admin** (hiện tiếng Việt) và nhật ký hoạt động (audit).
117. **Số liệu Tổng quan:** những chỉ số nào có nguồn thật và người dùng Admin cần gì (hiện chỉ đếm theo trạng thái và việc chờ xử lý).