Phase UI đồng bộ toàn site — giai đoạn 2 (Teal + Liquid Glass cho mọi trang)

Ngày: 2026-10-17 · Trạng thái: PLAN — chờ user chốt mục 7 Tiền đề: giai đoạn 1 (PHASE-UI-REFRESH-2026-10.md) đã deploy: màu Teal, font Be Vietnam Pro, header viên thuốc, trang chủ, phần trên trang sản phẩm / danh mục / danh sách, .o-card, SanPhamCard, thanh đáy mobile. Mục tiêu: mọi trang còn lại nhìn cùng một "ngôn ngữ" với trang chủ — nền gần trắng có cực quang rất nhạt, thẻ kính, nút viên thuốc teal, tiêu đề đậm, khoảng cách rộng — không đổi logic nghiệp vụ (giá, thanh toán, đơn hàng, quyền).

1. Kết quả rà soát (2026-10-17)

1.1 Quy mô

Khu Số trang Ghi chú
Public + mua hàng 18 trang chủ ✅, sản phẩm/danh mục/danh sách ✅ một phần
Tài khoản /tai-khoan/* 12 dùng chung tai-khoan/layout.tsx (sidebar)
Đăng nhập / đăng ký 4 layout riêng (auth)/layout.tsx — header riêng, nền bg-wash
Editor /editor 1 (+47 component) có hệ token riêng (topbar #333, --editor-*)
Admin /admin/* 52 (+49 component, ~10.500 dòng) layout riêng
Email khách ~10 mẫu dich_vu_email.py MAU_THUONG_HIEU = "#E53935" + mẫu trong DB

1.2 Hiện trạng thật trên prod (chụp sau deploy giai đoạn 1)

Không còn Lora, đã có nút teal — nhưng bố cục / thẻ / form vẫn kiểu cũ:

1.3 Dấu hiệu giao diện cũ theo trang (đếm trong code: bg-wash, bo 10–16px/rounded-md|lg, border border-border, zinc/gray/slate-*, shadow-sm, cỡ chữ ghi cứng, nút outline/pill-*)

Trang Dòng Dấu hiệu cũ Trang Dòng Dấu hiệu cũ
/san-pham/[slug] (phần dưới) 1.483 25 /tai-khoan 275 13
/thanh-toan/[ma_don_hang] 704 22 /tai-khoan/cau-hinh-thong-bao 434 12
/thanh-toan 726 17 /tai-khoan/gioi-thieu 116 12
/dat-lai-mat-khau 152 16 /tai-khoan/dia-chi 349 11
/gio-hang 213 15 /tai-khoan/don-hang 185 10
/lien-he 183 15 /tai-khoan/thong-tin 256 9
/gioi-thieu 177 13 /tai-khoan/don-hang/[ma] 264 8
/dat-hang 308 11 /dang-nhap, /dang-ky 307 / 224 10 / 10
/san-pham (lọc) 410 10 /yeu-cau-thiet-ke 382 8
/tu-thiet-ke 155 7 còn lại — ≤ 6

Component dùng chung: san-pham/ 178 · shared/ 80 · ui/ 47 · checkout/ 18 · auth/ 13 · chat/ 11 · mau/ 11 · admin/ 422 · editor/ 190.

Đòn bẩy lớn nhất: components/ui/button dùng ở 115 file (48 public), input 62, label 55; PageHeader 7 trang, EmptyState 9 trang, .o-card 33 chỗ. → Sửa nền trước, trang sau.

Ảnh hiện trạng các trang trên prod (17/10/2026)

2. Hệ thiết kế chung (rút từ trang chủ — áp cho mọi trang)

Thành phần Quy tắc
Nền trang #FDFEFE + NenCucQuang (mức B). Không dùng dải xám bg-wash làm nền section
Thẻ .kinh (thẻ nội dung), .kinh-dac (nhãn/menu xổ/hộp thoại), .o-card (thẻ dữ liệu). Bo: 28px thẻ lớn · 20–24px thẻ thường · 16px ô nhỏ. Không backdrop-filter trừ .kinh-mo (menu nổi, thanh đáy, hộp thoại)
Nút Chính: nut-sang viên thuốc teal cao 44–48px · Phụ: .kinh viên thuốc · Nhẹ: nền primary-soft chữ teal · Nguy hiểm: đỏ destructive (giữ đỏ cho lỗi/xoá)
Ô nhập Cao 48px, bo 16px, nền trắng, viền #E3EEEC, focus viền teal + vòng mint 4px; nhãn 14px đậm 600 ở trên; lỗi đỏ dưới ô 13px
Chữ H1 trang trong 32/40 (mobile 28/36) đậm 600, letter-spacing −0,03em, không in hoa; H2 28–44 như trang chủ; eyebrow 12px teal in hoa giãn chữ; thân 16/24 (mobile 15/22); tối thiểu 12px
Tiêu đề trang PageHeader v2: không nền xám; eyebrow + H1 + mô tả + breadcrumb, căn trái mặc định trên desktop, có bản ảnh nền (lớp phủ teal đậm thay vì đen)
Trạng thái Trống: thẻ kính + icon trong vòng tròn primary-soft + 1 nút chính · Đang tải: skeleton shimmer tông teal nhạt · Lỗi: thẻ viền đỏ nhạt + nút thử lại
Huy hiệu trạng thái đơn Viên thuốc nền nhạt: chờ thanh toán (vàng nhạt) · đang in (teal nhạt) · đang giao (xanh trời nhạt) · hoàn thành (xanh lá nhạt) · huỷ (đỏ nhạt) — 1 component dùng chung
Bảng Đầu bảng nền tint, chữ 13px đậm 600; dòng cao ≥ 48px, viền dòng #EEF3F2; mobile chuyển thành danh sách thẻ
Tab Thanh viên thuốc (segmented) nền kính, tab chọn nền trắng + bóng nhẹ
Hộp thoại / ngăn kéo .kinh-dac bo 28px, lớp phủ #083B3D/30 + mờ nhẹ
Khoảng cách Section 64px mobile / 112px desktop; container container-public
Màu nhấn Teal #0E6F73 chỉ cho nút chính, số tiền, chữ nhấn, trạng thái chọn; logo giữ đỏ

3. Chiến lược

  1. Sóng 0 — sửa nền (component ui/ + shared/) → ước tính tự kéo 60–70% giao diện mọi trang mà không mở từng trang.
  2. Các sóng sau mở từng nhóm trang, chỉ sửa phần bố cục/riêng; không đụng logic (tính giá, SePay, GHN/GHTK, quyền).
  3. Mỗi sóng = 1 nhánh/commit riêng → kiểm tra → deploy riêng (rủi ro nhỏ, dễ rollback).
  4. Thêm component khung trang TrangKhung (NenCucQuang + Header + main + Footer) thay cho ~30 chỗ lặp <Header/> … <Footer/>.

4. Kế hoạch theo sóng

Sóng 0 — Nền tảng dùng chung (~2 ngày) ★ làm trước

components/ui/

components/shared/

Kiểm tra sóng 0: chụp lại 33 trang public + 12 tài khoản (cần tài khoản test) trước/sau; trang admin mở thử 10 trang chính để chắc không vỡ bố cục (admin cũng dùng button/input).

Sóng 1 — Trang nội dung (~1 ngày)

Trang Việc
/gioi-thieu Hero ảnh: lớp phủ teal đậm thay đen; số liệu thành thẻ kính; khối giá trị cốt lõi + promo dùng component trang chủ
/lien-he PageHeader v2; 4 ô liên hệ thành thẻ kính có icon tròn teal nhạt; khối văn phòng + bản đồ trong thẻ kính bo 28; dải "Cần tư vấn" = dải mint nhạt như ưu đãi trang chủ
[chinh_sach] (6 trang) Bỏ IN HOA tiêu đề; nội dung trong thẻ kính rộng 760px, mục lục dính bên trái (desktop)
/yeu-cau-thiet-ke Form 2 cột trong thẻ kính; ô nhập v2; vùng tải ảnh viền đứt teal nhạt; nút gửi nut-sang
/tu-thiet-ke PageHeader v2; dải lọc danh mục = chip viên thuốc như trang chủ; lưới mẫu dùng thẻ kính

Sóng 2 — Mua hàng (~2 ngày, rủi ro cao nhất)

Trang / component Việc
/gio-hang, CartDrawer Dòng sản phẩm = thẻ kính (ảnh bo 16, tên, tuỳ chọn, bộ tăng giảm số lượng viên thuốc); tóm tắt đơn dính bên phải (kính); trống = EmptyState v2
/dat-hang 3 lựa chọn "chọn mẫu / tải file / chọn sản phẩm" = 3 thẻ kính lớn có icon tròn; lưới "phổ biến" dùng SanPhamCard
/thanh-toan Các bước (địa chỉ → vận chuyển → thanh toán) có thanh tiến trình viên thuốc; AddressPicker, CarrierPicker (lựa chọn = thẻ chọn viền teal), PriceSummary dính phải (mobile: thanh đáy nổi)
/thanh-toan/[ma_don_hang] (QR SePay) Mã QR trong thẻ kính trắng đặc (QR phải nền trắng tuyệt đối để quét), số tiền teal to, đếm ngược viên thuốc; cảnh báo đỏ nhạt giữ nguyên ý nghĩa
/don-hang (tra cứu) PageHeader v2 + ô tra cứu lớn kiểu tìm kiếm trang chủ; dòng thời gian đơn hàng (timeline) teal
ConfirmOrderDialog, QtyBacGrid, BaoGiaPanel, OptionSelect/OptionSwatch, QuantityStepper Theo hộp thoại/chip/ô nhập v2
Bắt buộc: test E2E luồng chọn SP → giỏ → thanh toán → trang QR trên bản build (không thanh toán thật), so tổng tiền trước/sau từng bước.

Sóng 3 — Tài khoản (~1,5 ngày)

Sóng 4 — Đăng nhập / đăng ký (~0,5 ngày)

Sóng 5 — Phần còn lại của sản phẩm (~1 ngày)

Sóng 6 — Editor (~1 ngày, chỉ đồng bộ, không đổi bố cục) — chờ chốt Q2

Sóng 7 — Admin (~3–4 ngày, 52 trang) — chờ chốt Q1

Khuyến nghị "Admin Lite": cùng màu/font/nút/ô nhập (tự có từ sóng 0) + sidebar sáng có mục chọn teal nhạt, topbar trắng, thẻ trắng đặc (không cực quang, không kính mờ — trang dữ liệu cần tương phản cao), KpiCard, DataTable, FilterBar, biểu đồ màu teal/mint. Làm theo cụm: tổng quan & đơn hàng → sản phẩm/mẫu/danh mục → khách hàng/thanh toán → cấu hình/email/CMS → còn lại.

Sóng 8 — Email & thương hiệu (~0,5 ngày)

Sóng 9 — Kiểm tra & deploy (mỗi sóng)

5. Thứ tự & ước lượng

Sóng Nội dung Ước lượng Deploy
0 Nền tảng ui/ + shared/ 2 ngày riêng
1 Nội dung 1 ngày gộp với 4
4 Đăng nhập 0,5 ngày gộp với 1
2 Mua hàng 2 ngày riêng (sau test E2E)
3 Tài khoản 1,5 ngày riêng
5 Sản phẩm phần còn lại 1 ngày riêng
8 Email 0,5 ngày riêng (có backend)
6 Editor 1 ngày riêng — nếu chốt
7 Admin Lite 3–4 ngày 2–3 lần theo cụm — nếu chốt
Tổng ~9 ngày (không admin/editor) · ~13–14 ngày (đủ)

Không đổi DB schema, không thêm thư viện (có sẵn Radix/shadcn/Tailwind/lucide).

6. Rủi ro & cách giảm

Rủi ro Giảm
Sửa button/input làm vỡ admin/editor (115 / 62 file) Giữ tên biến thể cũ làm alias; chụp so sánh 10 trang admin chính ở sóng 0
Luồng thanh toán lỗi Chỉ sửa class; test E2E giỏ → QR; so tổng tiền; deploy riêng giờ thấp điểm
QR SePay khó quét trên nền kính QR luôn trên nền trắng đặc 100%
Chữ trên kính kém tương phản Kính nằm trên nền gần trắng; kiểm axe; nhãn trên ảnh dùng .kinh-dac
Hiệu năng mobile Chỉ .kinh-mo dùng blur; đo Lighthouse mỗi sóng
Không chụp được trang cần đăng nhập trên prod Cần tài khoản khách test (user cấp) hoặc chạy bản dev với dữ liệu thử
Deploy VPS Chưa có SSH key: đang chạy qua terminal web gateway — nên cài key cho máy claude-agent (hỏi user)

7. Cần user chốt