Chuẩn ảnh & GIF

Trang này dành cho người viết / cập nhật tài liệu. Nhân viên đọc hướng dẫn nghiệp vụ không bắt buộc mở trang này.

Thư mục asset

public/
  hrms/
    checkin/     ← 01-tab.png … 05-success.png
    leave/       ← ảnh nghỉ phép, đổi ca, đơn khác
    lich-cong/
    payslip/
    profile/
  gifs/
    hrms-checkin.gif
    hrms-xin-phep.gif
    hrms-lich-cong.gif
  login/         ← ảnh đăng nhập (đã dùng)
  reset-pass/

Trong MDX, đường dẫn bắt đầu từ gốc site: /hrms/checkin/01-tab.png, /gifs/hrms-checkin.gif.

Khi nào dùng PNG, khi nào GIF

Bố cục trang chuẩn

## Các bước

1. Mô tả ngắn thao tác.
   ![Bước 1 — Tab Chấm công](/hrms/checkin/01-tab.png)

2. Bước tiếp theo.
   ![Bước 2 — GPS](/hrms/checkin/02-gps.png)

## Xem nhanh (GIF)

![Check-in từ đầu đến cuối](/gifs/hrms-checkin.gif)

Quy tắc

• Crop theo khung app HRMS (mobile). Hiển thị khoảng 320–400px rộng — không full-bleed desktop.
• Alt tiếng Việt mô tả bước (Bước 3 — Chụp ảnh).
• Luôn xen số bước giữa các ảnh; không xếp nhiều ảnh lớn liên tiếp không chú thích.
• Đặt <Callout> ngay dưới bước dễ lỗi (GPS, camera).
• Mỗi trang chỉ một GIF ở mục “Xem nhanh”; chi tiết vẫn bằng PNG để đọc chữ.

Làm GIF từ video

1. Quay màn hình điện thoại (hoặc Chrome DevTools device mode) trên /hrms/... — ≤ 15 giây, chậm tay ở nút quan trọng.
2. Cắt bỏ phần thừa, chỉ giữ đúng một flow.
3. Xuất GIF bằng ScreenToGif (Windows) hoặc Kap / gifski:
   • 8–12 fps
   • Rộng 360–480px
   • Dither vừa phải
   • Mục tiêu dưới 2–3 MB (nếu lớn hơn: giảm fps/độ phân giải hoặc chỉ dùng PNG từng bước)
4. Đặt tên hrms-{flow}.gif → copy vào public/gifs/.
5. Nhúng MDX và kiểm tra trên localhost (ví dụ cổng 3001).

Không commit file video gốc vào repo docs — chỉ PNG + GIF đã tối ưu.

Checklist trước khi publish trang mới

• Ảnh nằm đúng thư mục public/hrms/... hoặc public/gifs/
• Mỗi bước có số thứ tự + alt
• Callout tại bước GPS / camera (nếu trang chấm công)
• GIF (nếu có) dưới 3 MB và chỉ một file / trang
• Đã xem lại trên mobile / cửa sổ hẹp