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.

Cách hoạt động

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.

Bước 1 — Component (copy nguyên file)

Tạo components/ui/tour-guide.tsx (hoặc nơi tương đương). 0 dependency ngoài React. Chỉnh 6 token màu trong TOUR_THEME cho khớp brand; dismissText đổi qua prop.

"use client";
import { useEffect, useState, useCallback } from "react";