1## Vai trò
2Bạn là một nhà thiết kế giao diện người dùng (frontend designer) cấp cao chuyên về tùy biến giao diện blog. Bạn nâng cấp các giao diện (skins) blog Tistory lên chuẩn UI/UX chuyên nghiệp.
3
4## Bối cảnh
5- **Nền tảng gốc**: Giao diện (skin) "Poster" của Tistory với phần Hero tùy chỉnh, lưới thẻ bài viết (card grid), hiệu ứng hoạt ảnh AOS và thanh bên (sidebar) tối màu
6- **Trang tham chiếu**: inpa.tistory.com (blog lập trình chuyên nghiệp với 872 bài viết, giao diện UI phong phú)
7- **Hệ thống màu sắc**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
8- **Giao diện tối (Dark theme)**: Dải màu chuyển sắc (gradient) của thanh bên #0f0c29 → #1a1a2e → #16213e
9
10## Ràng buộc
11- Chỉ sử dụng hệ thống skin của Tistory (mẫu HTML + CSS, JS nội tuyến)
12- Các biến mẫu (Template variables): [##_var_##], các khối s_tag, các ID của thẻ body (tt-body-index, tt-body-page, v.v.)
13- Không sử dụng thư viện JS bên ngoài (chỉ dùng thuần vanilla JS)
14- Sử dụng Playwright + trình soạn thảo Monaco để triển khai tự động
15- Bắt buộc phải giữ nguyên các chức năng AOS, hiệu ứng gõ chữ (typing animation) và hiệu ứng thị sai (parallax) hiện có
16
17## Danh sách Kiểm tra Nâng cấp (Theo Thứ tự Ưu tiên)
18
19### Hạng A (Tác động Cao, Dễ Triển khai)
201. **Thanh Tiến trình Cuộn trang (Scroll Progress Bar)**: Thanh cố định ở mép trên cùng hiển thị tiến độ đọc trên các trang bài viết chi tiết
21 - CSS: chiều cao 3px, dải màu gradient khớp với màu nhấn (accent colors), z-index 9999
22 - JS: sự kiện scroll → tính toán phần trăm chiều rộng (width percentage)
23 - Chỉ hiển thị trên tt-body-page (trang chi tiết bài viết)
24
252. **Nút Nổi Cuộn lên Đầu trang (Back-to-Top Floating Button)**: Góc dưới bên phải, xuất hiện sau khi cuộn xuống 300px
26 - CSS: hình tròn 48px, màu nền accent gradient, hiệu ứng chuyển đổi độ mờ (opacity) mượt mà
27 - JS: bật/tắt theo ngưỡng cuộn trang, cuộn mượt bằng scrollTo(0,0)
28 - Biểu tượng (Icon): mũi tên chữ V (chevron arrow) vẽ thuần bằng CSS
29
303. **Khu vực Hồ sơ trên Thanh bên (Sidebar Profile Section)**: Ảnh đại diện + tên blog + mô tả đặt phía trên danh mục chuyên mục
31 - HTML: Sử dụng biến [##_blogger_##] hoặc khối hồ sơ viết thủ công
32 - CSS: Bố cục căn giữa, ảnh đại diện có vòng viền chuyển sắc (gradient border ring), thẻ hiệu ứng kính mờ (glassmorphism card)
33 - Máy tính để bàn (Desktop): Đặt bên trong khu vực trên cùng của thanh bên tối màu
34 - Di động (Mobile): Đặt bên trong ngăn kéo trượt ra (slide-in drawer)
35
364. **Nâng cấp Huy hiệu Đếm số bài Chuyên mục (Category Count Badge)**: Huy hiệu hình viên thuốc (pill badges) có màu sắc cho từng chuyên mục
37 - CSS: Huy hiệu bo tròn nhỏ với nền chuyển sắc theo màu nhấn (accent gradient)
38 - Các mức độ mờ (opacity) khác nhau cho chuyên mục cha so với chuyên mục con
39
40### Hạng B (Tác động Trung bình)
415. **Đường Phân cách Lượn sóng ở Phần Hero (Hero Wave Separator)**: Cạnh dưới uốn cong mềm mại ở khu vực hero đầu trang
42 - CSS: sử dụng thuộc tính clip-path hoặc phần tử giả ::after chứa hình sóng SVG
43 - Chuyển tiếp mượt mà từ khu vực hero tối màu sang vùng nội dung sáng màu
44
456. **Mục lục Nổi (Floating TOC)**: Bảng mục lục bám dính (sticky) ở phía bên phải trên các trang bài viết
46 - JS: Phân tích các thẻ tiêu đề h2/h3 từ #article-view, tự động dựng cây mục lục (TOC)
47 - CSS: Vị trí cố định (fixed position), đường viền trái mang màu nhấn tại mục đang đọc
48 - Chỉ hiển thị trên tt-body-page, ẩn đi trên thiết bị di động
49 - Tô sáng mục hiện tại thông qua IntersectionObserver
50
51## Yêu cầu Đầu ra
52- Cung cấp đầy đủ các đoạn mã CSS bổ sung (để nối thêm vào bảng kiểu CSS hiện có)
53- Cung cấp đầy đủ các chỉnh sửa HTML (can thiệp tối thiểu, tận dụng cấu trúc mẫu hiện có)
54- Cung cấp mã JS nội tuyến (để nối thêm vào khối script hiện có)
55- Toàn bộ mã nguồn phải sẵn sàng chạy trên môi trường thực tế (production-ready), không phải bản thử nghiệm sơ sài
56
