/* ========================================================================== Robot hỏi đáp (KHÔNG dùng AI) — PRJ-045, phương án C, Anh Phát duyệt 24/09/2026. Nút robot góc phải dưới → mở khung → khách chọn câu hỏi có sẵn → robot trả lời ngắn (1–2 câu) lấy nguyên từ nội dung đã đăng, kèm nút dẫn tới trang/bài thật. Không gọi AI, không thu thập gì. Token theo DESIGN_SYSTEM.md v2.0 (phat-dark). Lớp: nút + khung z-index 9000 — dưới con trỏ thương hiệu (99999, contro.css) nhưng trên mọi lớp khác của trang (nav sticky 20, nav deck/chấm deck 30, thanh tiến độ đọc 19). Đặt cố định GÓC PHẢI DƯỚI nên không giao với thanh tiến độ đọc (đỉnh trang), nav (đỉnh trang) hay chấm deck (right:18px NHƯNG top:50% — giữa màn hình, đo Playwright ở 2.7 không giao với nút góc dưới). VÁ 24/09 (QC WP3 vòng 1, 2 lỗi 🔴 — panel tránh mục lục bằng cách tự thu ngắn): 1) Mục lục sống `.pd-bv-ml` là `position: sticky` nên có thể trùng toạ độ màn hình với khung `fixed` z-index 9000 — vá bằng biến `--pd-rb-an-toan-tren` đo động (xem lịch sử ở CHANGELOG dự án / VA_LOI_QC_VONG1.md). ĐÃ GỠ ở đợt vá dưới đây — xem lý do. 2) `.pd-tap` (Phòng tập) không `fixed` nhưng có thể trùng toạ độ nút robot khi cuộn tới đáy màn 390px — vẫn giữ nguyên: nút mờ 38% + `pointer-events:none` (lớp `.pd-rb__nut--ne`) khi giao với bất kỳ khối `.pd-tap` nào, hồi phục khi hết giao. Không đổi ở đợt vá này. VÁ 24/09 vòng 2 (Việc 1, Anh Phát: "khung desktop nhỏ và thiếu chiều cao"): - Khung desktop (≥768px) đổi từ cố định 360px sang `clamp(360px, 38vw, 420px)` rộng, cao tối đa `min(640px, 100dvh - khoảng nav - đáy)` — không co theo mục lục nữa. - Thêm LỚP NỀN PHỦ MỜ thật (`.pd-rb__nen`, backdrop) mỗi khi khung mở — bấm ra ngoài (vào lớp nền) = đóng khung, giống Esc. Vì đã có backdrop, khung ĐƯỢC PHÉP che mục lục (đây là modal thật, có lớp cách ly, không phải panel "chen" giữa nội dung) — nên logic đo `.pd-bv-ml` + biến `--pd-rb-an-toan-tren` (mục 1 ở trên) không còn cần thiết, ĐÃ GỠ khỏi robot-hoi.js cho đơn giản nhất (ít trạng thái hơn = ít khả năng sai hơn). Biến CSS đổi tên thành `--pd-rb-tren`: một hằng số chừa chỗ nav (không đo động nữa), không phải cơ chế né mục lục. - Điện thoại (<768px): khung gần full-width (lề 12px, trong khoảng 12–16px yêu cầu), cao tối đa `80dvh` (trước là 72vh) — nhiều chỗ hơn cho danh sách câu hỏi. `dvh` có `vh` dự phòng ngay trước (trình duyệt không hiểu đơn vị mới thì giữ khai báo `vh` phía trên, bỏ qua khai báo `dvh` không hiểu — không cần `@supports`). VÁ 24/09 vòng 3 (bổ sung của Anh Phát, áp cho cả Việc 1 và Việc 2): đổi từ "danh sách câu hỏi ↔ 1 câu trả lời" (view thay nhau) sang DẠNG CHATBOT thật — lịch sử hội thoại giữ nguyên trong khung (cuộn, tự cuộn xuống tin mới), câu hỏi có sẵn hiện thành CHIP ở đáy khung (đổi theo nhóm, nếu có >1 nhóm). Lớp mới: `.pd-rb__doan` (nhật ký hội thoại, aria-live="polite") thay cho `.pd-rb__than` cũ; `.pd-rb__goi-y` (khối chip đáy khung, đứng yên — không cuộn theo nhật ký) gồm `.pd-rb__tab-nhom` (tab đổi nhóm, chỉ hiện khi >1 nhóm) + `.pd-rb__chip-hang` (hàng chip cuộn ngang, ẩn scrollbar — cùng cơ chế `.pd-nav__cuon` đã dùng trong giao-dien.css). Bong bóng: khách bên phải (`--o-grad`/ `--o-900`, đúng token nút CTA cam dùng khắp theme), robot bên trái kèm avatar nhỏ (`--o-800`/ `--color-bg`, khác `--o-100` cũ — `--color-bg` là token nền sáng #f5ead8, tương phản cao hơn trên nền cam đậm). Lớp cũ `.pd-rb__ds/.pd-rb__cau/.pd-rb__tra/.pd-rb__hoi-lai/.pd-rb__lai` (view thay nhau) đã GỠ — không dùng nữa, thay bằng bong bóng + chip. `.pd-rb__lk` (nút link trong bong bóng trả lời) GIỮ NGUYÊN, chỉ đổi chỗ dùng. ========================================================================================== */ .pd .pd-rb__nut { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 9000; width: 56px; height: 56px; border-radius: 999px; border: none; padding: 0; display: grid; place-items: center; background: var(--o-grad); box-shadow: var(--o-glow); cursor: pointer; overflow: hidden; } .pd .pd-rb__nut img { width: 40px; height: 40px; display: block; pointer-events: none; } .pd .pd-rb__nut:hover { box-shadow: var(--o-glow-lg); } .pd .pd-rb__nut:focus-visible { outline: 2px solid var(--o-900); outline-offset: 2px; } /* Lỗi #2 (QC WP3): đang giao với một khối Phòng tập ở đáy màn → mờ đi + hết bấm được, tay chạm lọt xuống nút thật bên dưới thay vì mở nhầm khung. JS (robot-hoi.js, theo dõi cuộn) bật/tắt lớp này. */ .pd .pd-rb__nut.pd-rb__nut--ne { opacity: .38; pointer-events: none; transition: opacity .15s ease; } @media (prefers-reduced-motion: reduce) { .pd .pd-rb__nut.pd-rb__nut--ne { transition: none; } } /* Nhún nhẹ khi rảnh — tối đa 1 lần/vài giây, JS thêm/gỡ lớp này. Tắt hoàn toàn khi giảm chuyển động (@media dưới cùng). */ @media (prefers-reduced-motion: no-preference) { .pd .pd-rb__nut.pd-rb-nhun { animation: pd-rb-nhun .6s cubic-bezier(.34,1.4,.64,1); } } @keyframes pd-rb-nhun { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-7px); } 60% { transform: translateY(0); } 80% { transform: translateY(-2px); } } /* Ẩn nút khi khung đang mở TRÊN MÀN HẸP (đỡ chồng lên khung gần full-width) — JS thêm/gỡ lớp `pd-rb__nut--an` (xem robot-hoi.js moKhung/dongKhung); màn rộng vẫn giữ nút hiện. Quy tắc nằm trong @media (max-width:767px) ở cuối file. */ /* ---------- Lớp nền phủ mờ (backdrop) — modal thật, bấm ra ngoài = đóng (robot-hoi.js) ---------- */ .pd .pd-rb__nen { position: fixed; inset: 0; z-index: 8999; /* ngay dưới khung (9000), trên mọi lớp khác của trang kể cả mục lục sticky */ background: rgba(10, 8, 4, .55); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .pd .pd-rb__nen.hien { opacity: 1; visibility: visible; } /* prefers-reduced-motion: reduce → xem khối gộp cuối file (cùng .pd-rb__khung/.pd-rb__nut) */ /* ---------- Khung hội thoại ---------- */ .pd .pd-rb__khung { /* Hằng chừa chỗ nav phía trên (không đo động — có backdrop nên khung được phép che mục lục, xem đợt vá 24/09 vòng 2 ở đầu file). */ --pd-rb-tren: 108px; --pd-rb-duoi: calc(20px + max(20px, env(safe-area-inset-bottom, 0px)) + 68px); position: fixed; right: 20px; bottom: var(--pd-rb-duoi); z-index: 9000; width: min(clamp(360px, 38vw, 420px), calc(100vw - 40px)); /* dự phòng vh trước — trình duyệt không hiểu dvh thì giữ dòng này, hiểu thì dòng dvh ngay dưới ghi đè. Không cần @supports. */ max-height: min(640px, calc(100vh - var(--pd-rb-tren) - var(--pd-rb-duoi))); max-height: min(640px, calc(100dvh - var(--pd-rb-tren) - var(--pd-rb-duoi))); display: flex; flex-direction: column; background: var(--color-neutral-900); color: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 22px 54px rgba(0,0,0,.55); border: 1px solid var(--color-neutral-700); overflow: hidden; opacity: 0; transform: translateY(10px) scale(.98); visibility: hidden; transition: opacity .2s ease, transform .2s ease; } .pd .pd-rb__khung.hien { opacity: 1; transform: translateY(0) scale(1); visibility: visible; } @media (prefers-reduced-motion: reduce) { .pd .pd-rb__khung { transition: none; } } .pd .pd-rb__dau { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--color-neutral-800); flex: none; } .pd .pd-rb__dau img { width: 28px; height: 28px; flex: none; } .pd .pd-rb__dau h2 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: 0; flex: 1; color: var(--color-bg); } .pd .pd-rb__dong { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; border: none; background: transparent; color: var(--color-neutral-300); cursor: pointer; border-radius: 999px; } .pd .pd-rb__dong:hover { color: var(--o-300); background: var(--color-neutral-800); } .pd .pd-rb__dong:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .pd .pd-rb__dong svg { width: 18px; height: 18px; } /* ---------- Nhật ký hội thoại (cuộn) ---------- */ .pd .pd-rb__doan { padding: 14px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; } .pd .pd-rb__msg { display: flex; gap: 8px; max-width: 90%; } .pd .pd-rb__msg--khach { align-self: flex-end; flex-direction: row-reverse; } .pd .pd-rb__msg--robot { align-self: flex-start; } .pd .pd-rb__avt { width: 22px; height: 22px; flex: none; margin-top: 3px; border-radius: 999px; } /* Bong bóng khách — cam o-grad/o-900, đúng token nút CTA cam dùng khắp theme */ .pd .pd-rb__bong-khach { background: var(--o-grad); color: var(--o-900); border-radius: var(--radius-md); border-top-right-radius: 4px; padding: 10px 13px; font-size: 14px; font-weight: 600; line-height: 1.5; } /* Bong bóng robot — o-800/color-bg (khác o-100 cũ, tương phản cao hơn trên nền cam đậm) */ .pd .pd-rb__bong-robot { background: var(--o-800); color: var(--color-bg); border-radius: var(--radius-md); border-top-left-radius: 4px; padding: 12px 14px; font-size: 14px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; } .pd .pd-rb__lk { display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: none; /* dùng chung cho (dẫn trang) và