tour-guide — In-app spotlight tour (no library)

Pattern đã chạy thật trong bonbon DMS. Một component duy nhất + quy ước data-tour + mảng spots mỗi route.

WHAT

Purpose và context

• Purpose: thêm một in-app product tour (spotlight onboarding overlay) tự viết, 0 thư viện: lớp tối + khoét spotlight quanh từng phần tử theo CSS selector, tooltip nhãn, pill "tap để đóng" ở khoảng trống lớn nhất, responsive mobile/desktop.
• Trigger (when to use): user muốn "thêm tour guide", "onboarding tour", "hướng dẫn trong app", "spotlight tour", "product tour", "walkthrough", "tour kiểu bonbon", hoặc invoke /tour-guide. Hợp với React/Next.js + Tailwind.
• Non-goals: không dùng thư viện tour (joyride/intro.js/driver.js); không phải tour nhiều bước next/prev — một overlay hiện mọi điểm dừng của route, click đâu cũng đóng.

Mental model

1. Đánh dấu phần tử cần highlight bằng data-tour="..." (ổn định hơn class).
2. Một state tourActive + nút trigger (vd tap logo) bật/tắt.
3. Mỗi route khai báo spots: TourSpot[] (selector + label) truyền vào <TourGuide>.
4. Component đo DOM, vẽ SVG dim + spotlight cutout + tooltip, click đâu cũng đóng.