--- url: https://docs.nemo12.com/architecture/sdd-029-public-site-ia/ielts-landing.md description: >- Trang /ielts xoay quanh việc cần làm, thanh điều hướng theo khu, và các vòng sửa SRC-723 tới SRC-736. --- # SDD-029 · /ielts thành landing page và thanh điều hướng theo ngữ cảnh Một phần của [SDD-029](./index.md). Trang /ielts xoay quanh việc cần làm, thanh điều hướng theo khu, và các vòng sửa SRC-723 tới SRC-736. ## 7.7 `/ielts` thành landing page, và thanh điều hướng theo ngữ cảnh (SRC-722, chỉ đạo 2026-09-15) ### Trục của trang đổi từ NỘI DUNG sang VIỆC Bản cũ xếp theo nội dung: bốn kỹ năng, từ vựng, ngữ pháp, band điểm. Cách ấy đúng với người **đã** biết mình cần gì, và vô dụng với phần lớn người mở trang — họ không tới để chọn một mục, họ tới vì đang mắc một việc. Nay mỗi khối là một **Job To Be Done**, kèm **3-5 pain** viết đúng như người học nói ra ("làm rất nhiều đề nhưng điểm đứng yên nhiều tháng"), không dịch sang ngôn ngữ sản phẩm. Pain là thứ làm người đọc nhận ra mình trong trang; thiếu nó thì mỗi khối chỉ còn một tiêu đề và một cái nút. | | Job | Pains | | --- | --- | --- | | 01 | Tôi cần band bao nhiêu, và bao giờ phải có? | 5 | | 02 | Tôi đang ở đâu, và hỏng ở chỗ nào? | 5 | | 03 | Vì sao học mãi mà điểm không lên? | 5 | | 04 | Vậy bây giờ tôi nên học gì? | 5 | | 05 | Tôi đã đủ sẵn sàng để đăng ký thi chưa? | 5 | Bốn kỹ năng vẫn có chỗ, nhưng đứng **sau** năm khối việc: người đã biết mình cần luyện phần nào mới đi thẳng vào kỹ năng. ### Cái giá của việc rời khỏi họ trang nội dung `ContentPage` dựng đúng một cột chữ — đúng thứ nó nên làm cho 140 trang còn lại. Landing page cần các khối tách bạch nên nó là React thật, và `/ielts` vì thế **rời khỏi** `CONTENT_PAGES`. Hệ quả phải xử lý: trước kia chính trang gốc là chỗ trỏ tới mọi trang hub, nên bỏ nó đi là mọi hub thành mồ côi (cổng `check-seo-content` §4 bắt đúng điều này). Cách xử lý: **nối chéo các hub với nhau** trong `content/seo/ielts/index.ts`. Kết quả còn tốt hơn bản cũ — trước đây muốn đi từ Reading sang Listening thì phải quay về trang gốc. Phần chữ cho bot đọc và danh sách link của cả họ trang chuyển vào `links` của route `/ielts` trong `routes.ts`, đúng vai mà trang nội dung cũ đang làm. ### Thanh điều hướng theo ngữ cảnh Đang đứng trong khu vực IELTS thì thanh trên cùng nói về IELTS: **Lộ trình · Band điểm · Từ vựng · Đăng ký thi · Hỏi đáp**. Bốn mục chung ("Khoá học · Learning Experiences · Chương trình · Tài nguyên") ở đó là bốn lối đi **ra khỏi** việc người đọc đang làm. Logo cũng đổi đích: trong khu vực kỳ thi, bấm logo về trang gốc của chính khu ấy, kèm nhãn phụ nói rõ đang ở khu nào — lối về không được thành một cú nhảy bất ngờ. Trên mobile, mục "Rời khu IELTS" thay cho danh sách phụ, vì đó mới là thứ người trong ngữ cảnh cần. Khai theo **tiền tố** trong `CONTEXT_MENUS` (`src/site/SiteNav.tsx`): thêm khu mới là thêm một dòng, không sửa phần dựng thanh. ## Lịch sử quyết định #### Ba khu, ba bộ mục khác nhau (SRC-723) SAT và AP nhận nav theo ngữ cảnh ở SRC-723. Mục của ba khu **không giống nhau**, và đó là chủ ý: thanh điều hướng phải nói đúng thứ tự việc của chính khu ấy. (Dòng AP trong bảng giữ lại để ghi thiết kế; khu AP đã gỡ khỏi site ngày 2026-09-15 — xem khung đầu §7.6.) | Khu | Mục trên thanh | Vì sao thứ tự đó | | --- | --- | --- | | IELTS | Lộ trình · Band điểm · Từ vựng · Đăng ký thi · Hỏi đáp | Phần chữ là chính, nên các mục trỏ vào nội dung | | SAT | Bắt đầu · Cần bao nhiêu điểm · SAT thi gì · Tôi đang ở đâu · Đăng ký thi | Cửa vào là khu bấm chọn, nên "Bắt đầu" đứng đầu rồi tới ba câu hỏi lớn nhất | | AP | Bắt đầu · Chọn môn · AP là gì · Tôi đã sẵn sàng chưa · Lộ trình | Câu hỏi đầu tiên của AP là **chọn môn**, nên nó đứng ngay sau "Bắt đầu" thay vì mục tiêu điểm | Cả ba kết thúc bằng một mục về **thủ tục** hoặc **lộ trình**: đó là thứ người ta quay lại tìm sau khi đã đọc xong phần giới thiệu. Nhãn phụ cạnh logo và lối thoát trên mobile ("Rời khu SAT") lấy từ chính cấu hình, không ghim cứng tên khu ở chỗ dựng thanh — ghim cứng là chỗ mà khu thứ tư sẽ mang nhãn của khu thứ nhất. #### Ba lỗi hiển thị bắt được bằng cách mở trang thật (SRC-724) Cả ba đều xanh ở typecheck và build, và cả ba chỉ lộ ra khi mở trang lên nhìn. **1. `hover:bg-card` không nằm trong tầng override của theme.** Tailwind sinh `hover:bg-card` thành một class **khác hẳn** `bg-card`, nên tầng `.theme-www` ở trên không chạm tới nó. Rê chuột vào nút viền là nền trắng đặc hiện ra dưới chữ xanh nhạt `#bcdcff` — chữ biến mất đúng lúc người dùng đang nhắm vào nó. Đây **không** phải lỗi của một trang: 10 file dùng `variant="outline"`. Vá ở tầng theme cho `hover:bg-card`, `hover:bg-muted*`, `hover:bg-ocean-100` và `hover:border-ocean-300`. **2. `bg-background/60` là nền của giao diện SÁNG.** Ô pain trên landing page IELTS dùng lớp này nên thành một khối sữa đục nổi trên biển. Trang mới dùng thẳng `bg-card/60` + `border-border` (những lớp ĐÃ có override); giữ thêm một override cho `bg-background/60` để chỗ nào lỡ dùng thì vẫn đúng. **3. Nhãn nút dài làm tràn ngang cả trang trên điện thoại.** Khuôn nút có `whitespace-nowrap`, nên nhãn "🎮 Tôi biết SAT rồi, cho tôi sang câu tiếp theo" rộng 390px trên máy 375px và đẩy `scrollWidth` lên 405px. Thêm `whitespace-normal` vào `className` **không ăn**: hai utility cùng độ ưu tiên, thứ tự trong tệp CSS quyết định, và đo trên trang thật thì bản `nowrap` thắng. Cách chạy được là đặt `whitespace-normal` trên một `span` bên trong, vì ở đó nó ghi đè giá trị **thừa kế** chứ không phải tranh thứ tự. #### Chữ của năm khối nói cùng một bộ từ vựng (SRC-725) Khối 1 và 2 được chủ dự án viết lại bằng tay; khối 3, 4, 5 viết theo cùng dạng ấy. Dạng đó có ba đặc điểm, và cả ba đều có lý do: 1. **Câu hỏi dùng đơn vị đo được của người học** (điểm, mảng, ngày, giờ mỗi tuần) thay vì cách nói văn vẻ. "Vì sao học mãi mà điểm không lên?" đọc hay nhưng không nói được người ta đang thiếu gì; "Tôi còn thiếu những gì, và vì sao luyện mãi vẫn không lên?" thì có. 2. **Đoạn dẫn nói thẳng hệ quả**, bỏ câu nhấn kiểu "đây là câu hỏi đau nhất". 3. **Gọi đúng tên khái niệm, kèm nghĩa tiếng Việt trong ngoặc**: Learning Plan (kế hoạch học), Competency Gap (khoảng cách năng lực), Milestone (mốc trung gian), Readiness (mức sẵn sàng), Evidence (bằng chứng). Điểm 3 là chỗ đáng giữ nhất: đây đúng bộ từ vựng mà [value-stream-exam-learners §6](../../product/value-stream-exam-learners.md) đã chốt, nên trang công khai, tài liệu và tên trong mã nguồn cùng gọi một thứ bằng một tên. Một khái niệm mang hai tên là chỗ hai phần của hệ sẽ hiện thực nó hai lần rồi lệch nhau. Đã kiểm ở 375×812: `/ielts`, `/sat/learner`, `/ap/learner`, `/ielts/journey`, `/ap/learner/check-up`, `/sat/exam-day`, `/sat/learner/target-score` — không trang nào còn phần tử tràn ra ngoài khung. #### Khối JTBD trong trang nội dung, và lộ trình về đúng năm bước (SRC-726) **Trang Journey nói đúng năm bước của landing page.** Bản cũ có tám bước; landing page `/ielts` có năm. Hai trang cùng mô tả một quy trình mà đếm ra hai con số thì người đi từ trang này sang trang kia tưởng mình đang xem hai thứ khác nhau. Theo dõi và can thiệp gộp vào bước *Sẵn sàng* vì chúng chạy **xuyên suốt** chứ không phải một chặng đứng riêng trên đường đi. **Trang nội dung có thêm khối `jobs`.** Ba trang mà người đọc tới vì đang mắc một việc (Từ vựng, Band điểm, Đăng ký thi) nay mang **5 Job To Be Done, mỗi job 3 pain, và mỗi pain kèm lối gỡ của chính nó**. Hai quyết định trong cách dựng: 1. **Pain và solution đi thành cặp**, không phải hai danh sách song song. Liệt kê năm nỗi đau ở trên rồi năm cách gỡ ở dưới buộc người đọc tự ghép, và ghép sai là chuyện thường. Cặp lại thì cũng không có cách nào thêm một pain mà quên phần gỡ. 2. **Mở rộng `ContentPage` thay vì chuyển ba trang sang React.** Hai trong ba trang là **hub** của họ IELTS; rút chúng khỏi `CONTENT_PAGES` là lặp lại đúng vấn đề đã phải xử lý ở SRC-722, lần này với hậu quả nặng hơn. Khối `jobs` vì thế nằm trong chính mô hình nội dung: bản tĩnh cho bot có đủ chữ (`contentBodyHtml` sinh `dl/dt/dd`), `wordCount` đếm nó, và cổng so trùng thân bài tính nó — bỏ ra ngoài thì hai trang giống hệt nhau ở phần JTBD sẽ lọt qua cổng. #### Trang đội ngũ IELTS (SRC-727) `/ielts/team` trả lời câu "ai đứng sau", và đó là câu quyết định người đọc có tin phần còn lại hay không. Vì thế nó có mục riêng trên thanh điều hướng IELTS (mục thứ sáu, phá lệ năm mục của SAT và AP) và một khối trên landing page đặt ngay trước lời mời cuối. **Trang ĐỌC từ API công khai, không chép danh sách vào mã.** Hồ sơ mentor đã sống trong `mentor_profiles` và đang chạy ở `/mentors`; chép năm người vào một mảng trong file trang là dựng nguồn thứ hai cho cùng một nhóm người. Trang lọc theo môn `ielts`, nên thêm người vào đội IELTS về sau chỉ là gắn thêm môn cho hồ sơ của họ. **Hiển thị mức xác minh, kể cả khi chưa xác minh.** Hồ sơ đã qua xác minh trường lớp mang dấu riêng; hồ sơ chưa thì không mang. Một trang tồn tại để người đọc yên tâm mà im lặng ở chỗ chưa chắc thì đang mượn uy tín nó chưa có. Dữ liệu nạp qua `scripts/seed-ielts-mentors-src727.sql` (đường `/seed-data`), với ba luật ghi ngay đầu file: không suy năm tốt nghiệp từ năm sinh, không đặt `alumni_verified=1` cho hồ sơ chưa ai xác minh, và không ghi đè phần alumni đã qua duyệt của ba hồ sơ cũ. #### Ví dụ về Mục tiêu, và "Đọc tiếp" tối đa sáu mục (SRC-728, SRC-730) **`/ielts/goal-examples` dạy một HÌNH DẠNG, không dạy nội dung.** Người mới nghĩ mục tiêu là một con số; trang này cho họ mở một ví dụ ra và thấy một mục tiêu đầy đủ gồm gì: mục đích cụ thể, hạn chót, bốn band, điểm hiện tại, ràng buộc thật, và các mốc. Bốn ví dụ khác nhau về **tình huống** chứ không chỉ khác con số — còn hơn một năm, chỉ còn bốn tháng, đã thi và thiếu đúng một kỹ năng, chưa thi bao giờ — vì tình huống mới là thứ quyết định mục tiêu được đặt ra sao. Không ví dụ nào ghim yêu cầu đầu vào của một trường có thật (cùng ràng buộc với công cụ target score của SAT). **"Đọc tiếp" hiện tối đa sáu mục.** Trang hub có tới mười sáu trang con, và mười sáu thẻ giống nhau thì không ai đọc thẻ nào. Phần còn lại **không bị bỏ khỏi trang** mà gập sau một nút: cắt hẳn thì những trang con thứ bảy trở đi mất lối vào duy nhất từ hub của chúng, đúng kiểu hỏng im lặng mà cổng `check-seo-content` §4 dựng ra để chặn. Chúng vẫn nằm trong DOM ngay từ đầu (chỉ `hidden`), nên bot đọc đủ và bản tĩnh không nói khác bản người dùng thấy. #### Footer theo khu, và năm cách học của một tuần (SRC-731, SRC-732) **Footer riêng cho IELTS và SAT.** Footer chung liệt kê bốn lối **ra khỏi** khu người đọc đang đứng, đúng vấn đề đã sửa cho thanh điều hướng ở SRC-722/723. Cột đầu nay là lối đi tiếp của chính khu ấy, kèm một câu nói khu này giúp được gì. **AP cố ý chưa có** (chỉ đạo 2026-09-15): khu AP chưa có trang đội ngũ và cấu trúc khác hai khu kia, nên áp khuôn sang là đoán thay chủ dự án. **Khu SAT nói tiếng SAT ở cả ba chỗ (SRC-846).** SRC-731 mới đổi **cột đầu** của chân trang; ba cột giữa (`Chương trình · Công cụ đo lường · Hỗ trợ`) vẫn là bản chung, mà bản chung ấy được viết cho IELTS: "Band điểm IELTS", "Báo cáo chẩn đoán", "Sự kiện IELTS", "Đội ngũ IELTS Mentors". Người đọc `/sat/learner/roadmap` nhìn xuống chân trang thấy bốn cái tên IELTS thì đó không phải bốn link thừa — nó nói sai chỗ họ đang đứng. Khu SAT nay khai `cols` riêng, trỏ vào đúng các trang mà luồng sáu câu hỏi đã dựng; cột đầu vẫn giữ cả hai kỳ thi, vì ai đọc xong SAT mà nhận ra mình cần IELTS phải có đường sang. Cùng lúc, hai thứ vốn chỉ làm cho IELTS được mở cho mọi khu kỳ thi: khối thương hiệu đọc là **NEMO SAT** (đúng tên mà sân SAT trong app học đã tự gọi mình), và nút **Đăng nhập** đi thẳng `learn.nemo12.com/sat` thay vì ghé ngã ba `/login`. Cơ chế đổi từ `inIeltsArea()` trả true/false sang `examArea()` trả **tên khu**: thêm khu thứ ba là thêm một dòng trong `LEARN_EXAM_URL`, không phải viết lại ba câu điều kiện ở ba chỗ. **Năm cách học đặt ở hai nơi, mỗi nơi một vai.** Khối trên landing page trả lời "cụ thể mỗi tuần tôi làm gì", đứng sau năm việc và trước phần đội ngũ. Bốn câu FAQ trên trang lộ trình trả lời những câu hỏi lẻ đi kèm: có được chọn lịch không, Nemo AI có thay giáo viên không, forum khác chat riêng ở chỗ nào. Chữ ở cả hai nơi nói cùng một điều và nói thẳng: năm cách **bổ cho nhau, không thay nhau**, và phần tiến bộ thật nằm ở khoảng **giữa hai buổi học** chứ không nằm trong buổi học. Một learner chỉ đi học mỗi tuần một buổi mà không làm gì giữa hai buổi thì buổi sau bắt đầu lại từ chỗ buổi trước kết thúc. #### Check-point giữa bài đọc (SRC-729) Người đọc lướt một trang dài rồi đóng tab, và thứ họ giữ lại gần như bằng không. Khoảng năm câu ngắn ở **cuối** mỗi trang buộc họ gọi ra lại thứ vừa đọc — thao tác làm nên trí nhớ, khác hẳn thao tác đọc lại. Đặt cuối chứ không rải xen giữa các đoạn: rải xen thì mỗi câu hỏi là một lần cắt mạch đọc, và người đang đọc để hiểu sẽ bỏ dở. Hai dạng, cố ý không có dạng thứ ba (`ContentPage.checkpoints`, kiểu ở `content/seo/types.ts`): * **`quiz`** — một câu ba lựa chọn, chọn xong hiện ngay đúng/sai kèm lý do. Dùng cho một ý gọn. * **`tf`** — cụm ba mệnh đề đúng/sai, **chỉ chấm sau khi trả lời đủ ba**. Thấy đáp án câu một trước khi nghĩ câu hai là mất luôn phép kiểm của hai câu còn lại. Dùng cho ba ý dễ lẫn vào nhau. Mỗi lựa chọn và mỗi mệnh đề **bắt buộc** mang theo `why`: một dấu X đỏ không dạy được gì, nó chỉ nói lại điều người đọc vừa tự biết. Không lưu kết quả ở đâu cả — đây là trang công khai, người đọc chưa đăng nhập, và một điểm số được lưu lặng lẽ là thứ họ không đồng ý cho lưu. Bản tĩnh (`contentBodyHtml`) hiện thẳng cả câu hỏi lẫn đáp án kèm lý do: ở đó không có nút nào để bấm, nên giấu đáp án chỉ còn lại một câu hỏi cụt. Phần tương tác là việc của React sau khi dựng lại. Chữ của check-point được **đếm vào `wordCount` và vào phép bắt trùng thân bài** của cổng SRC-694 — bỏ ra ngoài thì hai trang chỉ khác nhau ở phần câu hỏi sẽ bị coi là trùng nhau. **Phạm vi đã phủ, nói thẳng:** 17 trang, tất cả đều là trang QUYẾT ĐỊNH — nơi người đọc tới để chọn một thứ rồi đi làm, và cũng là nơi đọc lướt để lại một hiểu biết SAI chứ không phải một khoảng trống: * tám trang hỏi đáp `/ielts/questions/*` (Academic hay General, máy hay giấy, tự học hay đi học, ôn bao lâu, ngày thi, thi lại, làm đề, kết quả); * bảy trang band (`/ielts/band` và sáu trang con) — nơi learner chọn đích, và chọn sai đích thì mọi tháng luyện sau đó đi sai hướng mà không có gì báo; * `/ielts/journey` và `/ielts/journey/exam-day` — thứ tự năm bước, và các quyết định thủ tục không lùi lại được. **123 trang IELTS còn lại chưa có check-point** (chủ yếu là các trang dạng câu hỏi và chủ đề luyện tập). Cơ chế đã sẵn cho tất cả; phần còn lại là việc soạn câu hỏi bám đúng nội dung từng trang, và soạn ẩu thì câu hỏi trả lời được mà không cần đọc trang. #### Thẻ đời trước dưới theme biển, và trang Dolphins mở dần (SRC-734) **Chữ trắng trên thẻ trắng.** Tầng override của `.theme-www` chỉ bắt `[data-slot="card"]` — thẻ shadcn. `.n12-card`, lớp thẻ đời trước còn ở trang đội ngũ và trang trường chuyên, không có thuộc tính đó, nên nó giữ nền TRẮNG trong khi `text-ocean-900` và `text-muted-foreground` bên trong đã bị kéo về gần trắng. Trên `/mentors` và `/mentors/`, tên mentor và khối "Trường · Lớp chuyên" gần như tàng hình. `.theme-marlins` liệt kê cả hai lớp từ đầu; thiếu sót nằm ở `.theme-www`. Sửa ở tầng theme, một chỗ — cùng lý do đã ghi cho SRC-724. Đo trên bản build: nền thẻ `rgba(255,255,255,0.08)`, tên `rgb(234,244,255)`. `.n12-skeleton` cũng được hạ xuống, vì dải shimmer xám-trắng của nền sáng là một vệt chói trên biển sâu. **`/mentors` rút còn một cái tên.** Chỉ đạo 2026-09-15: "đưa siêu ít thông tin thôi, click vào thì thông tin mới hiển thị lên dần dần". Thẻ đóng chỉ có cá heo, tên, và dòng "Bấm để xem" — một lưới chín thẻ mà thẻ nào cũng ba dòng chữ thì chín thẻ trông như nhau và người đọc lướt hết mà không dừng ở ai. Bấm thì các dòng hiện LẦN LƯỢT theo thứ tự trường → lớp chuyên → hiện tại → môn, rồi mới tới link sang hồ sơ đầy đủ; nhịp ấy buộc mắt đi đúng thứ tự mà người đang cân nhắc "tin được không" cần đọc. **Mỗi lúc chỉ một thẻ mở** (trạng thái giữ ở trang, không ở thẻ): mở được nhiều thẻ thì lưới lại đầy chữ như cũ và việc rút gọn thành vô nghĩa. Thẻ là `