# 02.01. UI Layout (Bố cục giao diện)

## Mục đích
Đảm bảo giao diện người dùng (UI) hiển thị chính xác, nhất quán và thẩm mỹ trên các trình duyệt, thiết bị và độ phân giải màn hình khác nhau. Kỹ thuật này giúp phát hiện các lỗi về thẩm mỹ và trải nghiệm người dùng ngay từ lớp giao diện.

## Kiến thức cần có
- Kiến thức cơ bản về CSS/HTML Layout.
- Hiểu biết về Responsive Design và các điểm ngắt (Breakpoints).
- Sử dụng công cụ Inspect của trình duyệt để kiểm tra thuộc tính phần tử.
- Tài liệu thiết kế (Figma, Adobe XD, Zeplin, v.v.).

## Quy trình thực hiện
1. **Đối chiếu thiết kế:** So sánh giao diện thực tế với bản vẽ thiết kế để kiểm tra độ chính xác về pixel, màu sắc, font chữ.
2. **Kiểm tra đa trình duyệt:** Mở ứng dụng trên Chrome, Firefox, Safari, Edge để phát hiện sự khác biệt về hiển thị.
3. **Kiểm tra Responsive:** Thay đổi kích thước trình duyệt hoặc dùng trình giả lập thiết bị để kiểm tra layout trên Mobile, Tablet và Desktop.
4. **Kiểm tra Spacing:** Sử dụng công cụ để đo khoảng cách (Padding, Margin) giữa các thành phần.
5. **Kiểm tra trạng thái:** Xem xét hiển thị của các phần tử khi Hover, Active, Disabled, hoặc khi dữ liệu quá dài.

## Checklist
- [ ] Căn lề và khoảng cách (Alignment & Spacing) có nhất quán và đúng thiết kế?
- [ ] Font chữ, kích thước, màu sắc có đúng chuẩn Design System?
- [ ] Hình ảnh, Icon có bị méo, vỡ hoặc lệch vị trí không?
- [ ] Văn bản có bị tràn (overflow), cắt xén (truncated) hoặc che khuất phần tử khác?
- [ ] Giao diện có hiển thị ổn định khi phóng to/thu nhỏ (Zoom) trình duyệt?

## Output mong đợi
- Danh sách các lỗi về giao diện (UI Bugs).
- Ảnh chụp màn hình so sánh giữa thiết kế và thực tế (nếu có sai lệch).
- Báo cáo xác nhận tính tương thích trên các thiết bị/trình duyệt mục tiêu.