[CLAUDE] Docs: S68 session-end closeout — Hồ sơ NS header fix tên đen→trắng (gotcha #66 Tailwind v4 unlayered rule) + STATUS/HANDOFF/session log + harvest cicd MEMORY (Run #303-304)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs/gotchas.md

@@ -1162,6 +1162,20 @@ for h in resp.points:    # ← .points không phải iterable trực tiếp
 
 ---
 
+### 66. Tailwind v4 — rule element thô `h1-h4{color}` viết NGOÀI `@layer` thắng MỌI utility `text-white` → heading không đổi màu; fix ĐIỂM bằng important `text-white!`, KHÔNG move `@layer` (load-bearing) (Session 68)
+
+**Triệu chứng:** Header chi tiết NV (`app-gradient-brand` nền gradient xanh) — `<h2 className="text-white">` render **ĐEN `#0b1220`**, trong khi `<div className="text-white">` (dòng meta cùng banner) render trắng đúng. Anh UAT báo "màu đen nhìn không nổi bật" — chính xác, dù code ghi `text-white`.
+
+**Cơ chế:** `fe-user/src/index.css:79` có `h1,h2,h3,h4 { color:#0b1220 }` viết **thô, NGOÀI mọi `@layer`** (thêm S65 #290 "darker ink"). Tailwind v4: CSS unlayered có priority **CAO HƠN tất cả `@layer`** (kể cả `utilities`) → `text-white` (trong layer utilities) THUA. `<div>` không bị rule element này nhắm nên `text-white` thắng → nghịch lý meta-trắng / heading-đen cùng 1 banner.
+
+**Guard:** (1) **User báo màu render ≠ class trong code ⟹ NGHI ngay rule CSS priority cao hơn** (unlayered element / `!important` / global) — grep `index.css` rule element TRƯỚC khi tin utility. (2) Ép utility thắng = **important modifier Tailwind v4 trailing-bang** `text-white!` → compile `.text-white\!{color:…!important}` (**verify bằng grep dist CSS** — đừng tin suông). (3) **KHÔNG move rule unlayered vào `@layer base` nếu load-bearing** — đo blast-radius `grep '<h[1-4][^>]*text-'`: rule này đang ép ~30+ heading toàn app về `#0b1220` (chúng gắn `text-slate-700/900/brand-800` nhưng bị override) → move = đổi màu loạt giữa UAT. (4) Authed page không screenshot dev-rig (gotcha #3) → visual gate = anh mắt thường qua deploy prod.
+
+**Credit:** em main solo S68 — anh UAT realtime ("chữ đen nền xanh ko nổi bật") → diagnose unlayered heading rule → `text-white!` + thu nhỏ `text-lg` → grep dist confirm `!important` → Run #304 PASS, x2 app SHA256.
+
+**References:** `fe-user/src/index.css:79-83` (h1-h4 unlayered) · `fe-{user,admin}/src/pages/hrm/EmployeesListPage.tsx:653` (h2 name `text-white!`) · Tailwind v4 layer precedence · gotcha #3 (authed screenshot).
+
+---
+
 ## Checklist debug bug mới
 
 1. Build pass không? → fail → check using + package version compat