@haposoft/cafekit 0.16.6 → 0.18.0

package/src/claude/skills/ui-ux/references/components/empty-state.md

@@ -0,0 +1,98 @@
+# Empty state
+
+Nguồn: widget nhắc việc của một dự án thật.
+
+```tsx
+{isLoading ? (
+  <p className="py-6 text-center text-sm text-muted">Đang tải…</p>
+) : visibleReminders.length === 0 ? (
+  <p className="py-6 text-center text-sm text-muted">
+    Chưa có nhắc nào ở mục này
+  </p>
+) : (
+  <ul className="flex flex-col">…</ul>
+)}
+```
+
+**Vì sao ổn**
+
+Đây là chỗ AI bịa lộ liễu nhất. Mặc định nó dựng một khối to đùng: hình minh hoạ,
+tiêu đề `text-xl font-bold`, một đoạn động viên, rồi một nút CTA. Kết quả là ô
+trống lại nổi hơn ô có dữ liệu.
+
+Bản đúng là **một dòng chữ mờ**:
+
+- Đúng một câu, `text-sm text-muted`. Không tiêu đề, không hình, không icon, không nút.
+- **Không thêm `opacity-70`.** `--muted` đã sát ngưỡng (4.95:1), mờ thêm 70% là tụt xuống ~2.8:1, trượt 4.5:1 của chữ 14px. Chữ đã mờ bằng màu thì đừng mờ thêm bằng opacity.
+- `py-6` cho khối trống một chiều cao vừa phải, để card không xẹp xuống rồi bung lên khi dữ liệu về.
+- Câu chữ mô tả đúng bối cảnh đang lọc ("ở mục này"), không phải câu chung chung "Không có dữ liệu".
+- **Lọc ra 0 kết quả là trạng thái rỗng, không phải lỗi.** Không viền đỏ ô lọc, không câu đỏ: người dùng chưa nhập sai gì, khoảng lọc vẫn hợp lệ (`M30`: `red` chỉ dành cho cái phải sửa mới đi tiếp được). Vẫn là một dòng chữ mờ, đặt ở **chỗ đáng lẽ có kết quả**, và nói luôn cách nới lọc: "Không có sản phẩm nào từ 47.500.000 đ. Hạ giá Từ xuống để xem thêm."
+- Trạng thái đang tải (khung chờ, tải lần hai, thời điểm hiện): `loading.md`. **Đang tải không bao giờ hiện câu rỗng.**
+
+Chỉ dựng empty state có hình và CTA khi đó là màn hình chính của cả app và người
+dùng lần đầu vào chưa có gì để làm. Trong một widget hay một tab thì không.
+
+**Người dùng là người mở đầu** (khung chat mới) thì không dùng câu báo rỗng: đưa 2–3
+việc bấm được ngay, vẫn không hình không tiêu đề (`N6`, `chat.md`).
+
+## Rỗng do lọc: câu nói đúng điều đang lọc, và có lối ra
+
+Ngoại lệ của "không nút": danh sách rỗng **vì người dùng đang tìm hay lọc** thì người
+đó tự dẫn mình vào ngõ cụt, phải có lối ra ngay tại chỗ (`N6`). Vẫn một dòng mờ, thêm
+**một link chữ** ngay sau câu, không nút đặc, không hình:
+
+```tsx
+<p className="py-6 text-center text-sm text-muted">
+  Không có khách hàng nào khớp {quotedQuery}. Thử từ khoá khác.{" "}
+  <Button variant="ghost" onClick={clearFilters}
+    className="inline h-auto min-h-0 p-0 align-baseline font-medium text-foreground underline-offset-4 hover:bg-transparent hover:underline">
+    Xoá tìm kiếm
+  </Button>
+</p>
+```
+
+- **Câu theo đúng thứ đang lọc**: chỉ từ khoá thì nhắc lại từ khoá và "Thử từ khoá khác." (không "ngắn hơn": gõ "zzzz" 4 ký tự mà bảo gõ ngắn hơn là vô lý); chỉ chip thì "Không có khách hàng nào có nhãn này. Bỏ bớt nhãn để xem thêm."; cả hai thì câu chung. Đừng khuyên "bỏ bớt nhãn" khi không nhãn nào đang chọn.
+- **Từ khoá dài cắt bằng số ký tự trong JS, không bằng CSS**: giữ ~24 ký tự + `…`, cặp ngoặc kép dính liền từ khoá (`"Công ty cổ phần thươ…"`), từ khoá đủ trong `title`. Cắt bằng `truncate` trên span nội tuyến thì dấu mở ngoặc rơi xuống cuối dòng trên và hở một khoảng trước dấu đóng. Từ khoá tô `--foreground`, phần câu còn lại `text-muted`.
+- Link đổi chữ theo thứ nó gỡ: "Xoá tìm kiếm" (chỉ từ khoá), **"Xoá lọc"** (có chip) — **cùng chữ với nút "Xoá lọc" cuối hàng chip**, vì hai nút làm cùng một việc; hai chữ khác nhau ("Xoá lọc" / "Xoá bộ lọc") là bắt người dùng đoán chúng có khác nhau không (`N6`). Bấm là gỡ hết, trả tiêu điểm về ô tìm.
+- Link màu `--foreground`, không màu nhấn: đây là lối ra, không phải hành động chính của trang.
+- Hàng tiêu đề bảng giữ nguyên (để người dùng thấy mình vẫn ở bảng nào) nhưng **ẩn checkbox chọn tất cả**: chọn tất cả của 0 dòng là nút vô nghĩa.
+
+---
+
+## Cột rỗng khác danh sách rỗng
+
+Danh sách rỗng thì một dòng chữ mờ là xong. **Cột rỗng trong một board thì
+không**, vì cột vẫn phải nhìn ra được là một vùng thả.
+
+```html
+<li class="flex min-h-[7rem] items-center justify-center rounded-2xl border border-dashed border-foreground/15 px-3">
+  <p class="text-center text-sm text-muted">Chưa có việc nào</p>
+</li>
+```
+
+- **Giữ chiều cao tối thiểu** `min-h-[7rem]`, đủ để thấy vùng thả và để các cột không cao thấp lệch nhau quá.
+- **Viền đứt, không nền.** Cột kanban nằm thẳng trên nền trang, nên "nền chìm hơn một bậc" thành một mảng xám đặc, là khối nặng nhất cả board, nặng hơn mọi thẻ có việc. Viền đứt nói "chỗ để thả" mà không có khối (`F21` cho phép đúng chỗ này). Viền `foreground/15`, không `--border-strong`: `#eaeaea` trên nền trang `#f4f4f6` chỉ chênh 1.05:1, khung trống biến mất. Bo `rounded-2xl` bằng thẻ, để khung trống cùng khuôn với thẻ sẽ rơi vào.
+- Chữ `text-sm` như chữ phụ của thẻ, không `text-xs`; cùng câu với nhóm rỗng của view danh sách ("Chưa có việc nào", thêm "ở nhóm này" khi nằm giữa các nhóm).
+- Vẫn chỉ một dòng chữ. Không icon, không nút "thêm việc đầu tiên".
+
+Cùng nguyên tắc cho ô rỗng trong lịch, và cho khung kéo thả tệp. Đây cũng là hai
+chỗ hiếm hoi `border-dashed` được dùng, xem luật `F21` trong `../rules-form.md`.
+
+---
+
+## Lỗi tải
+
+```html
+<div role="alert" class="flex flex-col items-center gap-3 py-10 text-center">
+  <div>
+    <p class="text-sm font-medium text-red-600">Không tải được danh sách khách hàng</p>
+    <p class="mt-1 text-sm text-muted">Mất kết nối mạng</p>
+  </div>
+  <!-- Nút viền + icon rotate-cw theo I1: "Thử lại". Gọi gì là handler rỗng (onRetry). -->
+</div>
+```
+
+- **Hai tầng như toast lỗi** (`../layouts/overlay.md`): tầng trên nói chuyện gì hỏng, `font-medium` `red-600` (`--error-text`, không `red-500`); tầng dưới `text-muted` nói vì sao. Không biết vì sao thì bỏ tầng dưới, đừng bịa.
+- **Nút Thử lại là nút viền có icon** (`I1`), nằm ngay dưới chữ, căn giữa.
+- Không icon to, không hình minh hoạ, không nền đỏ cả khối. Lỗi tải là tạm thời, bấm lại là xong, không cần hét lên.
+- **Chữ rỗng và chữ lỗi cùng `py`**, để đổi qua lại giữa hai trạng thái thì khung không co giãn.

package/src/claude/skills/ui-ux/references/components/file-upload.md

@@ -0,0 +1,107 @@
+# Khu tải tệp lên (file upload)
+
+Một khung kéo thả ở trên, danh sách tệp ở dưới, cả hai nằm trong một card. Toast
+chỉ báo khi cả lượt tải kết thúc (xem mục Toast). Nút theo `button.md`, thanh tiến
+độ mượn rãnh và màu của `charts.md`, nhưng **dòng tệp có khuôn riêng** ở đây.
+
+```
+┌ Tải tài liệu lên ─────────────────────────────────────────────┐
+│ ┌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┐ │
+│ ╎             Kéo thả tài liệu vào đây                     ╎ │
+│ ╎       PDF, Word, Excel, ảnh. Tối đa 25 MB mỗi tệp        ╎ │
+│ ╎                    [ ⤒ Chọn tệp ]                        ╎ │
+│ └╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┘ │
+│ ▯ bien-ban-hop-khoi-dong-du-an-website-ban-hang…     71%   ✕ │  <- đang tải: thanh mảnh
+│   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━───────────────                │
+│ ─────────────────────────────────────────────────────────────  │
+│ ▯ bao-cao-khao-sat-hien-trang.pdf                          ✕ │  <- chờ: chữ, không thanh
+│   Đang chờ · 6,8 MB                                            │
+│ ─────────────────────────────────────────────────────────────  │
+│ ▯ bang-du-toan-chi-phi.xlsx                                ✕ │  <- hỏng: chữ đỏ + Thử lại
+│   Mất kết nối mạng · Thử lại                                   │
+│ ─────────────────────────────────────────────────────────────  │
+│ ▯ logo-sao-viet.png                                            │  <- xong: chữ, không thanh
+│   ✓ Đã tải xong · 2,4 MB                                       │
+└───────────────────────────────────────────────────────────────┘
+```
+
+## Khung kéo thả
+
+```html
+<label class="flex cursor-pointer flex-col items-center rounded-xl border border-dashed border-border-strong bg-background/60 px-6 py-8 text-center transition-colors hover:bg-item-hover">
+  <input type="file" multiple class="sr-only" />
+  <!-- Máy cảm ứng không kéo thả được: ẩn câu này, còn dòng gợi ý và nút -->
+  <p class="text-sm font-medium text-foreground [@media(hover:none)]:hidden">Kéo thả tài liệu vào đây</p>
+  <p class="mt-1 text-pretty text-sm text-muted">PDF, Word, Excel, PowerPoint, ảnh JPG hoặc PNG. Tối đa 25 MB mỗi tệp</p>
+  <!-- Trông như nút viền h-9 có icon upload, nhưng là <span>: cả khung đã là chỗ bấm -->
+  <span class="mt-4 inline-flex h-9 items-center gap-2 rounded-lg border border-border-strong bg-surface px-3 text-sm font-medium">…Chọn tệp</span>
+</label>
+```
+
+- **Cả khung là chỗ bấm** (`<label>` bọc `input type="file"` ẩn), không chỉ cái nút. "Chọn tệp" là `<span>` mang hình nút viền: lồng một `<button>` thật vào `<label>` thì bấm nút mở hộp chọn tệp hai lần.
+- **Viền đứt `border-border-strong`** (`F21` cho phép), nền `bg-background/60`, rê chuột thì nền đậm lên `bg-background`. Nền và viền đều nhạt: khung là chỗ chờ, không phải thứ nặng nhất màn.
+- **Đang kéo tệp vào**: viền đậm lên `border-foreground/40`, nền `bg-background`, tiêu đề đổi thành "Thả tệp để tải lên". **Không viền đen đặc** (`border-foreground`): một vòng nét đứt đen chạy quanh cả khung là thứ đậm nhất màn, chỉ để báo "thả được". Nội dung giữ nguyên chỗ, chỉ đổi chữ tiêu đề (`N1`).
+- **Dòng gợi ý nói luật trước khi người dùng chọn**: loại tệp, cỡ tối đa. Đây là thứ họ chưa biết, không phải chữ thừa (`T20`).
+- Khung **giữ nguyên cỡ** khi danh sách có tệp. Thu nhỏ khung lúc tệp đầu tiên vào là cả card nhảy (`N1`).
+- **Máy cảm ứng ẩn câu "Kéo thả tài liệu vào đây"** (`[@media(hover:none)]:hidden`): điện thoại không kéo tệp vào được, câu đó là chỉ dẫn sai. Còn dòng gợi ý và nút "Chọn tệp".
+- **Khoá** (hết dung lượng, không có quyền): khung thôi là chỗ bấm (`<div>` thay `<label>`, `input` `disabled`, bỏ hover, con trỏ thường). **Nền giữ `bg-background/60` như lúc thường**, không chìm xuống `bg-background`: đó là nền của lúc đang kéo tệp vào, khoá mà cùng nền thì hai trạng thái trái nghĩa trông như nhau.
+  - **Tiêu đề đổi thành lý do**, giữ `text-foreground font-medium`: "Dự án đã dùng hết 5 GB". Để nguyên "Kéo thả tài liệu vào đây" là mời người dùng làm đúng việc đang bị cấm. **Không làm mờ cả khối**: lý do là thứ duy nhất người dùng cần đọc ở trạng thái này (`N6`, `N8`).
+  - **Dòng dưới nói lối ra**, `text-muted`: "Xoá bớt tệp cũ hoặc nâng gói để tải thêm".
+  - **Nút "Chọn tệp" mờ bị bỏ, thay bằng nút dẫn tới lối ra** nếu có ("Nâng gói", nút viền `h-9`, bấm được). Nút khoá nằm giữa khung chỉ nói lại điều tiêu đề đã nói (`N2`, `N3`). Khoá tạm mà người dùng không tự gỡ được (dự án đã lưu trữ) thì không nút, dòng dưới nói ai gỡ được.
+- **Không có quyền tải lên thì ẩn cả khu tải**, không dựng khung khoá. Người chỉ được xem mà thấy một khung lớn ghi "Bạn chưa có quyền tải tệp lên" ở mỗi lần mở trang là nhận một lời từ chối cho việc họ không định làm; các kho tệp lớn đều ẩn nút tải khi không có quyền. Khung khoá chỉ dành cho khoá **tạm** (hết dung lượng, dự án đã lưu trữ), thứ người đang được phép tải cần biết. Đừng lặp một ý hai tầng: "Bạn chưa có quyền tải tệp lên" / "Chỉ quản trị dự án tải tệp lên được".
+
+## Dòng tệp
+
+```html
+<ul class="mt-4 divide-y divide-border">
+  <li class="flex items-center gap-3 py-3">
+    <i data-lucide="file-text" class="size-5 shrink-0 text-muted"></i>
+    <div class="min-w-0 flex-1">
+      <div class="flex items-baseline gap-3">
+        <!-- Tên cắt GIỮA (T14): phần đầu truncate, phần giữ lại = ~8 ký tự cuối của tên + đuôi, shrink-0 -->
+        <p class="flex min-w-0 flex-1 text-sm font-medium text-foreground" title="bien-ban-hop-khoi-dong-du-an-website-ban-hang.pdf"><span class="truncate">bien-ban-hop-khoi-dong-du-an-website-</span><span class="shrink-0">ban-hang.pdf</span></p>
+        <p class="shrink-0 text-sm text-muted tabular-nums">71%</p>        <!-- chỉ khi đang tải -->
+      </div>
+      <!-- Tầng dưới: cao cố định, chứa THANH hoặc MỘT DÒNG CHỮ, không bao giờ cả hai -->
+      <div class="mt-1 flex min-h-5 items-center">
+        <div role="progressbar" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100" aria-label="Đang tải bien-ban-hop-khoi-dong….pdf" class="h-1 w-full rounded-full bg-foreground/5">
+          <div class="h-1 rounded-full bg-primary" style="width: 71%"></div>
+        </div>
+      </div>
+    </div>
+    <div class="flex w-8 shrink-0 justify-end">
+      <!-- IconButton ✕ size-8, aria-label="Huỷ tải bien-ban-hop-khoi-dong….pdf" -->
+    </div>
+  </li>
+</ul>
+```
+
+| Trạng thái | Góc phải dòng trên | Tầng dưới | Cột ✕ |
+| --- | --- | --- | --- |
+| Đang chờ | trống | `text-xs text-muted` "Đang chờ · 6,8 MB" | ✕ "Bỏ tệp …" |
+| Đang tải | `71%` `text-muted tabular-nums` | thanh `h-1`, rãnh `bg-foreground/5` (không `bg-background`, `M21`), thanh `bg-primary` | ✕ "Huỷ tải …" |
+| Xong | trống | icon `circle-check` `size-3.5 text-emerald-600` + `text-xs text-muted` "Đã tải xong · 2,4 MB" | trống, giữ `w-8` |
+| Hỏng khi tải | trống | `text-xs text-red-600` "Mất kết nối mạng" · nút chữ **Thử lại** | ✕ "Bỏ tệp …" |
+| Bị từ chối (quá cỡ, sai loại) | trống | `text-xs text-red-600` "Quá 25 MB (tệp nặng 48 MB)" / "Không nhận tệp .zip" | ✕ "Bỏ tệp …" |
+
+- **Chỉ tệp đang tải mới có thanh.** Chờ là chưa bắt đầu, rãnh rỗng không nói gì. Bị từ chối là không bao giờ bắt đầu: rãnh xám rỗng đọc như "sắp chạy". Xong thì **thanh biến mất**: thanh xanh lá đầy + `100%` + "Đã tải xong" là ba tín hiệu cho một ý, và một cột thanh xanh đỏ đen là thứ nặng nhất màn (`N3`). Các kho tệp lớn đều bỏ thanh khi xong.
+- **Hỏng thì bỏ thanh và bỏ số %.** "54%" trên một tệp đã hỏng là con số chết: bấm Thử lại là chạy lại từ đầu. Thanh đỏ dừng giữa chừng thêm một khối đỏ đặc cho điều câu chữ đã nói.
+- **Tầng dưới cao cố định** (`min-h-5`), chứa thanh hoặc chữ. Dòng đổi trạng thái (chờ → tải → xong) thì cao không đổi, các dòng bên dưới không nhảy (`N1`). Chữ lỗi dài hơn một dòng ở màn hẹp thì được xuống dòng (`min-h`, không `h`), không `truncate` lý do (`N8`).
+- **Thanh `h-1`**, không `h-2` như thanh đứng riêng: nhiều tệp tải cùng lúc là nhiều thanh xếp chồng, thanh dày thì cả danh sách thành một dàn sọc đen.
+- **Thử lại là nút chữ nằm ngay sau lý do**, `text-xs font-medium text-foreground hover:underline underline-offset-2`, `whitespace-nowrap`, cách lý do bằng ` · `. **Vùng bấm nới bằng `relative before:absolute before:-inset-x-1.5 before:-inset-y-2`** (chữ cao 16px thành vùng 32px, số âm giữ theo `N11` như nút sao chép ở `description-list.md`): nút chữ trơn 39×16px trên điện thoại là dưới mức 32px. Dòng tệp cao hơn 32px nên vùng nới không chồng lên dòng kế. Không phải nút viền cuối hàng: nút viền đứng cạnh các ✕ làm cột hành động lệch (nút rộng, ✕ hẹp) và nặng hơn cả tên tệp. Hỏng thì **vẫn có ✕ để bỏ tệp**: chỉ có Thử lại là tệp hỏng kẹt lại mãi.
+- **Cột ✕ rộng cố định `w-8`** ở mọi dòng, kể cả dòng xong không có nút. Số % và mép phải thanh đứng thẳng một cột (`N1`).
+- **✕ nói đúng việc trong `aria-label`, kèm tên tệp**: đang tải là "Huỷ tải …", còn lại là "Bỏ tệp …". Tệp đã tải xong không có ✕ ở đây: xoá tài liệu đã lên là việc của danh sách tài liệu, có hộp xác nhận.
+- **Icon theo loại tệp**, `size-5 text-muted`, một màu, **cùng một dáng tờ giấy** (họ `file-*` của lucide): `file-text` (PDF, Word), `file-spreadsheet` (Excel), `file-chart-column` (PowerPoint), `file-image` (ảnh), `file` cho phần còn lại kể cả zip. **Viền tờ giấy phải liền**: không dùng `presentation` (cái bảng, không phải tờ giấy), `file-chart-pie`, `file-archive`, `file-box`, `file-lock`… — nhóm này vẽ một hình tròn, hình hộp đè lên góc dưới trái và cắt mất viền, ở `size-5` trông như icon vỡ (lucide không có `file-presentation`). Chọn icon mới thì mở SVG xem đường viền ngoài có khép kín không. Không tô màu theo loại (`M5`). **Bảng này là nguồn chung** cho mọi chỗ hiện tệp (cây thư mục, danh sách tài liệu): dự án nên có một hàm chọn icon theo đuôi, không mỗi component một bảng.
+- **Tên tệp một dòng, cắt giữa, giữ đuôi** (`T14`, như `tree.md`): "bien-ban-hop-khoi…ban-hang.pdf": không "bien-ban-hop-khoi-dong-du-an-web…" (cắt cuối, mất đúng phần nói loại tệp), cũng không "bien-ban-hop-khoi….docx" (chỉ giữ đuôi, `…` dính `.docx` thành bốn chấm). `title` tên đầy đủ **chỉ gắn khi tên thật sự bị cắt** (`T14`), không gắn sẵn cho mọi dòng. Số % `shrink-0`, không bao giờ bị đẩy xuống dòng.
+- Danh sách chia `divide-y divide-border` (`F3`), không mỗi tệp một card. Thứ tự là thứ tự thêm vào, tệp mới ở dưới; không tự xếp lỗi lên đầu.
+- Số theo một kiểu cả app: `6,8 MB`, `1,1 / 1,5 MB` (gạch chéo có cách, `charts.md`).
+
+## Toast
+
+- **Xong cả lượt**: một toast "Đã tải lên 3 tài liệu", không toast cho từng tệp. Lượt có tệp hỏng thì **không** bắn toast xong.
+- **Có tệp hỏng**: danh sách đang hiện trên màn thì **không bắn toast lỗi**, dòng tệp đã nói và đã có Thử lại (`N3`). Toast lỗi chỉ dành cho lúc khu tải không còn trên màn (modal đã đóng, đã sang trang khác): hai tầng "1 tệp chưa tải lên được" / "Mất kết nối mạng", nút Thử lại + ✕ theo `../layouts/overlay.md`. Lúc nào bắn là logic (`N10`); skill chỉ dựng hai bản tĩnh để duyệt.
+
+## Ví dụ tĩnh cần dựng
+
+Chưa có tệp · đang kéo vào khung · danh sách đủ năm trạng thái (có một tên rất dài) ·
+khung bị khoá vì hết dung lượng · hai toast. Ở 375px: tên dài cắt giữa vẫn còn đuôi, % và ✕ không bị đẩy xuống, câu "Kéo thả…" đã ẩn.

package/src/claude/skills/ui-ux/references/components/inline-edit.md

@@ -0,0 +1,128 @@
+# Tên sửa tại chỗ
+
+Tên bản ghi ở đầu trang (dự án, tài liệu, bảng) đổi được ngay tại chỗ, không mở form.
+Ô sửa tại chỗ trong dòng bảng (hạn chót, vai trò) là chuyện khác, xem `../layouts/app.md`.
+Email và mật khẩu không sửa tại chỗ (`../layouts/app.md`, trang hồ sơ).
+
+## Hành vi
+
+- **Bấm vào tên thì thành ô nhập, chữ chọn sẵn** để gõ đè luôn. Enter hoặc nút ✓ thì lưu,
+  Esc hoặc nút ✕ thì huỷ, bấm ra ngoài thì lưu (như hầu hết app quản lý công việc).
+  **Vùng chữ dài nhiều dòng (mô tả, ghi chú) thì bấm ra ngoài không lưu mà giữ ô mở**, chỉ ✓ / ✕ mới
+  thoát: bấm nhầm ra ngoài giữa chừng thì lưu một đoạn viết dở hoặc mất nó (hệ thiết kế lớn khuyên
+  vậy cho vùng chữ dài). Tên một dòng thì bấm ra ngoài vẫn lưu.
+- **Để trống thì không lưu**: viền đỏ, câu lỗi dưới ô ("Chưa nhập tên dự án", nói việc cần
+  làm, `layouts/form.md`), ô vẫn mở. Gõ lại chữ thì lỗi mất, dòng lỗi giữ chỗ tới lúc thoát.
+  Lưu tên đã bỏ khoảng trắng hai đầu; tên không đổi thì không gọi lưu.
+- **Hai nút ✓ ✕ luôn có**, cho chuột và màn chạm (điện thoại không có Esc, `N9`). Rê vào thấy
+  tooltip kèm phím tắt. Hai nút `onMouseDown={preventDefault}`: không có thì ô blur trước, mà
+  blur là lưu, nên bấm Huỷ thành lưu.
+- **Enter lúc bộ gõ đang gạch chân chữ** (`event.nativeEvent.isComposing`) là chốt chữ tiếng
+  Việt, không phải lưu.
+- **Esc chặn nổi bọt**: tên nằm trong panel trượt hay modal thì Esc chỉ huỷ sửa, không đóng panel.
+- **Tiêu điểm**: thoát bằng phím hay nút thì về lại nút tên; bấm ra ngoài thì để yên chỗ vừa bấm.
+- **Ô là `<textarea rows={1}>` tự giãn** (`field-sizing-content`), không `<input>`: tên dài xuống
+  dòng như lúc đứng yên, không cuộn ngang mất chữ đầu (`N8`). Dán chữ nhiều dòng thì gộp bằng
+  dấu cách; `enterKeyHint="done"`.
+- **Lúc đứng yên là nút `ghost` nằm trong `<h1>`**, không phải `<h1>` bấm được. Bút chì
+  `size-4 text-muted` nằm cuối dòng chữ, đi theo chữ cuối khi xuống dòng. Tên ở đầu trang là
+  việc phụ nên bút chì chỉ hiện lúc rê và lúc Tab tới; màn chạm thì luôn hiện (`I11`). Trình đọc
+  màn hình đọc "Website bán hàng 2026. Sửa tên dự án" (`sr-only`).
+
+## Bố cục: chữ không được nhúc nhích
+
+Bấm vào tên thì chỉ khung hiện ra, chữ đứng yên từng pixel (`N1`). Ba thứ phải khớp:
+
+1. **Cùng khuôn chữ.** Nút tên và ô nhập cùng `px-2`, viền 1px (nút viền trong suốt), dòng
+   `leading-7`, cao 44/40px (`min-h-11 py-1.75 md:min-h-10 md:py-1.25`), cỡ chữ đúng cỡ `<h1>`
+   của đầu trang (`text-xl font-semibold`, `../layouts/app.md`).
+2. **Chữ thẳng cột với phần còn lại của đầu trang, khung tràn ra trái.** Nền rê và viền ô nằm
+   ngoài chữ, lùi ra trái đúng padding + viền (8 + 1 = 9px). Không lùi thì tên thụt 9px so với
+   link cấp cha, câu mô tả, hàng tab ngay trên dưới nó. Các app có tên sửa tại chỗ đều giữ chữ thẳng cột, khung
+   mới là thứ tràn ra. Đây là ngoại lệ của `N11` (vùng bấm nở ra ngoài chữ): không có cách không
+   âm nào giữ được cả chữ thẳng cột lẫn khung bao quanh chữ.
+3. **Cùng bề rộng dòng chữ ở hai trạng thái.** Từ `sm` hai nút đứng cạnh ô, ăn mất 96px
+   (104px ở `sm`, nút 44px). Lúc đứng yên tên cũng chừa đúng chỗ đó (`sm:pr-26 md:pr-24`), không
+   thì bấm vào là tên dài xuống dòng khác đi. Dưới `sm` hai nút xuống hàng dưới, nằm phải, chung hàng
+   với câu lỗi: để bên phải thì ở 375px ô chỉ còn ~200px, tên ngắn cũng vỡ hai dòng.
+
+```tsx
+// Đứng yên
+<h1
+  className={cn(
+    // Số âm: khung nở ra ngoài chữ, chữ thẳng cột với đầu trang (N11 cách 4). 9px = px-2 + viền.
+    "-ml-2.25 min-w-0",
+    // Chừa chỗ hai nút ✓ ✕ của lúc sửa: tên xuống dòng y hệt ở hai trạng thái.
+    "sm:pr-26 md:pr-24",
+  )}
+>
+  <Button
+    ref={triggerRef}
+    variant="ghost"
+    onClick={startEditing}
+    className={cn(
+      "group w-fit max-w-full justify-start border border-transparent px-2 text-left",
+      "min-h-11 py-1.75 md:min-h-10 md:py-1.25",
+      "text-xl leading-7 font-semibold text-foreground hover:text-foreground",
+    )}
+  >
+    <span className="min-w-0">
+      {value}
+      <span className="sr-only">. {editLabel}</span>
+      <Pencil
+        className={cn(
+          "ml-2 inline-block size-4 align-[-1px] text-muted transition-opacity",
+          "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
+          "[@media(hover:none)]:opacity-100",
+        )}
+        aria-hidden
+      />
+    </span>
+  </Button>
+</h1>
+
+// Đang sửa
+<div
+  onKeyDown={handleKeyDown}
+  onBlur={handleBlur}
+  className={cn(
+    // Số âm đặt trên khối lưới, không trên textarea: textarea không tự giãn theo margin âm,
+    // mép phải hụt 9px so với hàng nút ở màn hẹp.
+    "-ml-2.25 grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2",
+  )}
+>
+  <textarea
+    ref={fieldRef}
+    rows={1}
+    enterKeyHint="done"
+    aria-label="Tên dự án"
+    aria-invalid={hasError || undefined}
+    className={cn(
+      fieldControlClasses, // viền, nền, bo, focus, lỗi của ô nhập (input.md)
+      "col-span-2 sm:col-span-1",
+      "field-sizing-content resize-none px-2",
+      "min-h-11 py-1.75 md:min-h-10 md:py-1.25",
+      "text-xl leading-7 font-semibold md:text-xl",
+    )}
+  />
+
+  <div className="col-start-2 row-start-2 flex gap-2 sm:row-start-1">
+    {/* Tooltip "Lưu · Enter", "Huỷ · Esc" bọc từng nút */}
+    <Button icon={Check} aria-label="Lưu" onMouseDown={keepFieldFocused} onClick={save} className="size-11 p-0 md:size-10" />
+    <Button icon={X} aria-label="Huỷ" onMouseDown={keepFieldFocused} onClick={cancel} className="size-11 p-0 md:size-10" />
+  </div>
+
+  {/* Câu lỗi thụt lại 9px: thẳng chữ trong ô và thẳng cột với đầu trang, không thẳng khung. */}
+  {hasMessageRow ? (
+    <div className="col-start-1 row-start-2 min-w-0 pl-2.25">
+      <FieldMessage error={error} isSpaceReserved />
+    </div>
+  ) : null}
+</div>
+```
+
+Đổi `px-2` thì đổi luôn ba chỗ `2.25` (9px). Đổi cỡ nút ✓ ✕ thì đổi `sm:pr-26 md:pr-24` (hai nút + hai
+khoảng `gap-2`).
+
+*Phép thử:* đo `x` của chữ tên bằng `Range` và `x` của link cấp cha / câu mô tả: bằng nhau. Bấm
+vào một tên dài ở 1280px: số dòng và chữ đầu mỗi dòng không đổi.

package/src/claude/skills/ui-ux/references/components/input.md

@@ -0,0 +1,161 @@
+# Input
+
+Nguồn: `speak-now/src/components/input/input.tsx`
+
+```tsx
+const baseClasses = "outline-hidden transition-colors text-foreground placeholder:text-muted";
+
+const variantClasses = {
+  // Viền và MÀU viền viết cùng một chỗ, đúng như nút outline: `border border-border-strong`.
+  default: "w-full h-11 md:h-10 bg-surface dark:bg-white/4 border border-border-strong rounded-xl text-base px-4 md:text-sm",
+  ghost: "bg-transparent border-0 p-0",
+};
+
+const stateClasses = error
+  ? "border-red-500 focus:ring-2 focus:ring-red-500/10"   // lúc thường chỉ viền đỏ, quầng chỉ khi đang gõ
+  : "focus:border-focus focus:ring-2 focus:ring-focus";
+```
+
+**Vì sao ổn**
+
+- Input luôn `bg-surface`, không bao giờ trong suốt. Ô nhập trong suốt trên nền trang thì người dùng không thấy nó là ô nhập. Đây là luật cứng, kể cả khi thư viện gốc mặc định `bg-transparent`.
+- **Focus = viền `--border-focus` + ring mờ `--ring-focus` dày 2px (`ring-2`)** (`I13`, chủ dự án chốt). Ring phải mờ tới mức là vầng sáng, không thành vòng viền thứ hai: đừng tăng độ đậm của `--ring-focus`. Ô lỗi cùng công thức, đổi sang đỏ. **Select, combobox dùng y hệt**, kể cả lúc đang mở (`components/choice-controls.md`).
+- **Viền dùng `--border-strong`, không phải `--border`.** Ô nhập cùng nền trắng với card, nên viền là thứ duy nhất báo "đây là chỗ gõ". Viền card và đường chia thì là trang trí, nhạt được; viền ô nhập thì không (`M14`). Viền này chỉ ~1.27:1, chưa đạt WCAG 1.4.11: đánh đổi có chủ ý, xem `P3` trong `styles.md`.
+- **Nền tối giữ viền**, chỉ đổi nền sang trắng phủ mờ `dark:bg-white/4`. Bỏ viền (`dark:border-transparent`) để nền mờ tự báo vùng gõ là mất ranh giới ô; mọi bộ thiết kế lớn đều giữ viền ở nền tối (`M32`).
+- **Viền ô nhập và viền nút outline phải là CÙNG một class**, `border-border-strong`. Đặt ô nhập cạnh nút mà viền ô mờ hơn là đã lấy nhầm `border-border`. Dựng xong thì grep `border-border\b` trong file ô nhập, textarea, select: phải ra 0.
+- Trạng thái lỗi cũng theo đúng công thức đó, chỉ đổi màu: viền đỏ đặc `red-500`, **quầng `red-500/10` chỉ khi ô đang focus**. Quầng cả lúc nghỉ thì mỗi ô lỗi mang ba tín hiệu đỏ (viền, quầng, câu), form có bốn ô lỗi là đỏ loang cả màn. **Câu lỗi thì `text-xs red-600`**, cùng cỡ với chữ gợi ý (`layouts/form.md`), không `red-500`: viền chỉ cần 3:1 nhưng chữ nhỏ cần 4.5:1, `red-500` trên nền trắng chỉ 3.8:1. Không Tailwind thì `--error`, `--error-ring`, `--error-text` trong `tokens.css`.
+- Bo `rounded-xl`, cùng bậc với nút, nên input và nút đứng cạnh nhau bằng vai.
+- **`text-base` trên mobile rồi thu về `md:text-sm`** — luật `R8`, áp cho cả `textarea` và `select`.
+- **`h-11 md:h-10`**: 40px trên desktop, bằng link sidebar và mục menu; 44px ở màn hẹp cho vừa ngón tay. Nút trong cùng form đổi theo y hệt (`budgets.md`). Form đăng nhập/đăng ký đứng riêng được lên `h-12`. Không dùng `h-12` làm mặc định trong app: thô, và lệch bậc với mọi thứ khác.
+
+---
+
+## Một field đầy đủ
+
+Nhãn, ô, câu lỗi. Ba phần, và nhãn phải gắn vào ô theo `I26`:
+
+```tsx
+<div className="space-y-1.5">
+  {/* w-fit: không có nó thì bấm vào khoảng trắng bên phải chữ cũng focus ô */}
+  <label htmlFor={id} className="w-fit cursor-pointer text-sm font-medium">
+    {label}
+  </label>
+  <input id={id} className={...} />
+  {/* Dòng dưới ô luôn có mặt, min-h-4 bằng một dòng text-xs: lỗi hiện ra hay mất đi thì ô bên dưới không nhảy (form.md) */}
+  <p className="min-h-4 text-xs text-red-600 dark:text-red-400">{error}</p>
+</div>
+```
+
+`id` phải là duy nhất trong trang. Hai field cùng `id` thì bấm nhãn nào cũng
+focus về ô đầu tiên. Dựng nhiều field thì dùng `useId()`.
+
+Placeholder theo `T25`: mặc định không có, chỉ thêm khi nó nói điều nhãn chưa nói. Đúng
+ngôn ngữ đã chốt ở `T24`.
+
+---
+
+## Ô mật khẩu
+
+Luật ở `I27`. Ô bọc `relative`, nút `absolute` bên phải, và ô chừa `pr-11`:
+
+```tsx
+const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+<div className="relative">
+  <input
+    id={id}
+    type={isPasswordVisible ? "text" : "password"}
+    className="... w-full pr-11"
+  />
+  <button
+    type="button"
+    onClick={() => setIsPasswordVisible((isVisible) => !isVisible)}
+    aria-label={isPasswordVisible ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
+    className="absolute inset-y-0 right-1 my-auto flex size-10 cursor-pointer items-center justify-center rounded-lg text-muted outline-hidden hover:text-foreground"
+  >
+    {isPasswordVisible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+  </button>
+</div>
+```
+
+- `type="button"`, không phải mặc định `submit`.
+- Nút `size-10` sát phải `right-1`, vừa khít `pr-11` của ô (`I27`).
+- **Căn giữa dọc bằng `inset-y-0 my-auto` cộng cỡ cố định** (`size-*`), không `top-1/2 -translate-y-1/2` (`N11`). Áp cho mọi icon, nút nằm trong ô dưới đây. Hai cách trùng từng pixel. Quên cỡ thì khối `inset-y-0` giãn cao bằng cả ô (nút mắt 40px thành 48px).
+- Nút nằm **trong** ô, không phải chữ "Hiện" nằm ngoài bên cạnh — chữ ngoài làm hàng bị lệch so với các field khác.
+- Nút không có nền, không viền. Nó là hành động phụ trong ô, hiện lên bằng màu chữ khi rê vào.
+
+---
+
+## Icon trái trong ô — tuỳ chọn, mặc định không có
+
+**Không tự thêm, cũng không hỏi trước.** Dựng ô trơn rồi báo một dòng lúc giao
+(`SKILL.md` câu 3). Người dùng muốn có icon thì:
+
+```tsx
+<div className="relative">
+  <Mail className="absolute inset-y-0 left-3.5 my-auto size-4 text-muted" aria-hidden />
+  <input className="... w-full pl-11" />
+</div>
+```
+
+- Icon **xám** (`text-muted`), không phải màu nhấn. Nó là chỉ dấu, không phải nội dung.
+- Ô phải chừa `pl-11`. Quên là chữ gõ đè lên icon.
+- `aria-hidden` — nhãn đã nói ô này là gì rồi.
+- Thêm thì **thêm cho cả form**, không phải chỉ ô email. Một ô có icon một ô không thì hai ô lệch lề chữ.
+- Nguồn icon theo `F15`: dự án dùng gì thì lấy ở đó — `lucide-react`, Heroicons, hay SVG thuần.
+
+Ô mật khẩu có cả icon trái lẫn nút mắt thì cần **cả** `pl-11` và `pr-11`.
+
+---
+
+## Ô tìm (`type="search"`)
+
+**Tắt nút × có sẵn của trình duyệt, dựng nút xoá riêng.** `type="search"` tự vẽ một
+nút × theo màu của trình duyệt: Chrome tô **xanh dương** theo accent hệ điều hành khi
+ô đang focus, Safari vẽ vòng tròn xám kiểu khác. Một chấm xanh lạc giữa app đen trắng,
+không theo token nào. Lỗi là **màu và hình** của
+nút trình duyệt, không phải việc có nút: đừng bỏ hẳn nút ×, người gõ
+một câu dài ở 375px không có cách xoá nhanh, chữ trôi khuất bên trái (chủ dự án: "tìm kiếm mà không có clear cũng kì"). Ô tìm của các app lớn đều có nút xoá.
+
+```tsx
+<div className="relative">
+  <input
+    ref={inputRef}
+    type="search"
+    className="... w-full pr-10 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
+  />
+  {query ? (
+    <Button variant="ghost" icon={X} aria-label="Xoá từ khoá"
+      onClick={() => { clearQuery(); inputRef.current?.focus(); }}
+      className="absolute inset-y-0 right-1 my-auto size-8 min-h-8 rounded-lg p-0 text-muted hover:text-foreground" />
+  ) : null}
+</div>
+```
+
+- Nút có nền rê nằm trong ô thì nền là ô vuông `size-8 rounded-lg` thụt vào, không phủ kín từ viền tới viền. Nút − + của ô số lượng cùng khuôn này (`quantity-input.md`).
+- Nút xoá **chỉ hiện khi ô có chữ**, icon `X` `size-4` xám, rê vào đậm lên. Bấm xong **trả tiêu điểm về ô** để gõ lại ngay.
+- Giữ `type="search"`: bàn phím điện thoại hiện nút Tìm, Escape vẫn xoá từ khoá.
+- Ô chừa `pr-10` để chữ dài không chui dưới nút.
+- Tìm ra 0 kết quả thì khối rỗng có thêm lối "Xoá tìm kiếm" (`empty-state.md`, "Rỗng do lọc").
+
+---
+
+## Viền lúc focus ở dark mode
+
+Đừng dùng `focus:border-primary` chung cho cả hai theme. Ở nền tối, `--primary`
+là gần trắng nên viền hoá thành sợi trắng đặc, gắt.
+
+Dùng `--border-focus` thay vì `--primary`:
+
+```html
+<input class="... border border-border-strong focus:border-focus focus:ring-2 focus:ring-focus" />
+```
+
+```js
+// tailwind.config
+borderColor: { focus: "var(--border-focus)" },
+ringColor:   { focus: "var(--ring-focus)" },
+```
+
+Nền sáng thì `--border-focus` chính là màu nhấn, giữ nguyên như cũ. Nền tối thì
+nó là màu nhấn ở độ đục 42% (3.6:1, đạt WCAG 3:1). Xem luật `M22` trong `../rules-color.md`.

package/src/claude/skills/ui-ux/references/components/list-row.md

@@ -0,0 +1,56 @@
+# Dòng trong danh sách
+
+Nguồn: dòng nhắc việc của một dự án thật.
+
+```tsx
+<li className="group flex items-center gap-3 rounded-xl px-1 py-2 hover:bg-item-hover">
+  <IconButton ... />                          {/* hành động chính, luôn hiện */}
+
+  <div className="min-w-0 flex-1">
+    <div className="flex min-w-0 items-center gap-2">
+      <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium">
+        {person.label}
+      </span>
+      <p className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+        {reminder.title}
+      </p>
+    </div>
+    <p className="mt-0.5 text-xs text-muted">
+      {cadence} · <span className={DUE_TONE_CLASS[tone]}>{dueLabel}</span>
+    </p>
+  </div>
+
+  <div className="flex items-center gap-0.5">
+    <IconButton                                {/* hành động phụ, ẩn */}
+      className="pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+    />
+  </div>
+</li>
+```
+
+**Vì sao ổn**
+
+- Dòng này có nền rê **vì rê vào hiện nút ẩn** bên phải. Dòng chỉ để đọc, không link, không nút ẩn thì không có nền rê (`I9`, vế ngược).
+- Hover là **nền rê `hover:bg-item-hover`** (nền sáng: chìm xuống đúng màu nền trang). Dòng có ô icon hay badge nền `bg-background` thì ô đó đảo sang `group-hover:bg-surface` lúc rê, không thì nó biến mất (`I32`) — được vì dòng này thụt vào, có bo góc. Dòng tràn hết bề ngang khung (bảng) thì dùng `--surface-hover`, xem `I10`, tức dòng tối nhẹ đi chứ không sáng lên, không viền, không nhấc bóng. Cảm giác như con trỏ ấn xuống mặt giấy.
+- **IconButton trong dòng rê `hover:bg-foreground/8`**, không `hover:bg-item-hover` như dòng: rê vào nút thì nền nút trùng nền dòng, nút mất hẳn. `/5` chồng lên nền dòng đang rê cũng gần trùng, nên trong dòng là `/8` (`I10`, `small-controls.md`).
+- Ba tầng ưu tiên rõ rệt trong một dòng: hành động chính luôn hiện bên trái, nội dung ở giữa, hành động phụ ẩn bên phải. Không phải mọi nút đều đòi được nhìn thấy cùng lúc.
+- Nút phụ ẩn bằng `opacity-0` kèm `pointer-events-none`. Thiếu vế thứ hai thì nút vô hình vẫn ăn cú bấm. **Mở lại bằng ba đường**: rê vào (`group-hover`), Tab tới (`group-focus-within`, không có thì Tab rơi vào một nút vô hình), và máy không có chuột (`[@media(hover:none)]`, kèm cả `pointer-events-auto`, không thì nút hiện ra mà chạm không ăn). Có xoá thì theo `I11`: luôn hiện.
+- **Cỡ nút hiện thẳng trong dòng theo độ dày của danh sách.** Danh sách thưa (dòng có ô icon hoặc avatar `size-10`, dưới ~10 dòng: phiên đăng nhập, tích hợp, khoá API) thì nút cỡ form `h-11 md:h-10 rounded-xl`, bằng ô icon và bằng các nút khác trên trang. Bảng dày (dòng 48–56px, nhiều dòng) mới dùng nút nhỏ `h-8 rounded-lg`. Màn cảm ứng: nút 32px dưới cỡ bấm khuyến nghị 44px.
+- `min-w-0` xuất hiện ở cả hai tầng bọc ngoài `truncate`. Thiếu nó thì flex item không chịu co, tiêu đề dài đẩy vỡ dòng. Đây là lỗi hay gặp nhất trong danh sách.
+- Màu chỉ dùng để báo hạn, ba mức: **quá hạn** chữ hổ phách `text-amber-700` kèm số ngày ("quá hạn 2 ngày"), **hôm nay** chữ `text-foreground font-medium` không màu, **còn xa** `text-muted`. Quá hạn là "cần chú ý" theo `M7`, không phải đỏ: đỏ là lỗi người dùng phải sửa mới đi tiếp (`M30`). Hôm nay không phải cảnh báo nên không màu, và nhờ vậy không trùng hổ phách với quá hạn. Ngoài ba chỗ đó cả dòng là đen trắng xám.
+- Dòng phụ là `text-xs text-muted`, ngăn cách bằng dấu `·` chứ không phải gạch dài hay dấu gạch ngang.
+- **Dòng phụ nhiều mảnh (từ 4 mảnh) thì ở màn hẹp chia hai dòng theo nghĩa**, không để trình duyệt tự ngắt. Ngắt tự do thì dấu `·` rớt lên đầu dòng sau ("· Chưa dùng lần nào"), và chỗ ngắt đổi theo độ dài từng dòng nên năm dòng năm kiểu. Gom mảnh thành hai nhóm (nhận dạng / thời gian), mỗi nhóm `block sm:inline`, dấu `·` giữa hai nhóm chỉ hiện từ `sm`:
+
+  ```tsx
+  <p className="mt-0.5 text-xs text-muted">
+    <span className="block sm:inline">
+      <span className="font-mono">evd_live_…a3f9</span> · Toàn quyền
+    </span>
+    <span aria-hidden className="hidden sm:inline"> · </span>
+    <span className="block sm:inline">Dùng 2 phút trước · Không hết hạn</span>
+  </p>
+  ```
+
+  Từ `sm` vẫn là một dòng như cũ. Nhóm nào vẫn quá dài ở 375px thì mỗi mảnh trong nhóm `whitespace-nowrap`, dấu cách giữa hai mảnh nằm ngoài span (không thì cả nhóm không có chỗ ngắt và tràn khung).
+- Hai cỡ chữ trong một dòng, không hơn: `text-sm` cho tiêu đề, `text-xs` cho phụ và cho nhãn. Không `text-[10px]`: dấu tiếng Việt chồng hai tầng ở 10px dính vào nhau. Nhãn là pill `rounded-full` như badge (`F1`, `M7`), không `rounded` 4px.
+- **Dòng bo góc xếp chồng thì chừa 2px** (`space-y-0.5` trên danh sách). Hai dòng cạnh nhau cùng sáng nền — một đang chọn, một đang rê chuột — mà dính mép thì đọc ra thành **một khối cao gấp đôi**, không phải hai dòng. Dòng tràn hết bề ngang khung (bảng) thì không cần, vì nó không bo góc và đã có đường kẻ chia.