:root{ --ink:#121212; --muted:#f4f4f5; --line:#e9e9ee; --brand:#16a085; --accent:#a855f7; --soft:#fafafa; } html,body{height:100%;} body{ margin:0; font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background: radial-gradient(1200px 600px at 10% -10%, #f8f5ff 0, transparent 50%), radial-gradient(1000px 400px at 120% 20%, #e8fff6 0, transparent 45%), #fff; } .wrap{max-width:1024px; margin:28px auto 40px; padding:0 16px;} /* Header */ .hero{text-align:center;margin-bottom:18px;} .brand-logo{ width:64px; height:64px; object-fit:contain; display:inline-block; margin-bottom:10px; } .hero h1{ font-family:'Merriweather', Georgia, 'Times New Roman', serif; font-weight:900; font-size:36px; letter-spacing:.2px; margin:.2rem 0 0; } .hero .mantra{ font-size:20px; font-weight:700; opacity:.95; } .hero .sub{ font-size:16px; color:#475569; } @media (max-width:640px){ .brand-logo{ width:48px;height:48px; } .hero h1{ font-size:26px; } .hero .mantra{ font-size:16px; } .hero .sub{ font-size:14px; } } /* Chips chủ đề */ .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 20px;} .chip{padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;font-size:14px;} .chip.active{background:#f0fff7;border-color:#ccefe3;box-shadow:0 0 0 2px #e6faf4 inset;} /* Chat card */ .card{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.04);} #messages{max-height:64vh;min-height:320px;overflow:auto;padding:18px;contain:content;} .bubble{padding:12px 14px;margin:10px 0;border-radius:16px;} .bubble.user{background:var(--muted);color:var(--ink);margin-left:auto;width:fit-content;max-width:82%;} .bubble.assistant{background:#fff;border:1px solid var(--line);max-width:82%;} .bubble.note{font-size:12px;opacity:.75;text-align:center;background:transparent;border:none;} /* Toolbar trong card */ .toolbar{display:flex;gap:8px;justify-content:flex-end;margin:8px 12px 0;} .tb-btn{font:13px/1 system-ui;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;} .tb-btn.primary{background:var(--brand);color:#fff;border-color:transparent;} .tb-btn:disabled{opacity:.6;cursor:not-allowed;} /* Composer */ .composer{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 18px 18px;} #chat-input{flex:1;padding:12px 14px;border:2px solid #ddd;border-radius:12px;outline:none;} #chat-input:focus{border-color:#c7ece4;box-shadow:0 0 0 3px #eaf8f4;} #send-btn{padding:12px 18px;border-radius:12px;border:0;background:var(--brand);color:#fff;cursor:pointer;font-weight:700;} #send-btn:disabled{opacity:.6;cursor:not-allowed;} .hint{font-size:12px;color:#666;margin:10px 2px;} /* Markdown đẹp */ .assistant h1,.assistant h2,.assistant h3{margin:6px 0 8px;} .assistant p,.assistant ul,.assistant ol{margin:8px 0;} .assistant ul,.assistant ol{padding-left:22px;} .assistant code{background:#f6f6f6;padding:2px 6px;border-radius:6px;} .assistant a{color:#0ea5e9;text-decoration:none;} .assistant a:hover{text-decoration:underline;} /* Gợi ý hỏi thêm (chip bên dưới câu trả lời) */ .suggest{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; } .suggest .chip{ padding:6px 10px; font-size:13px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; } .suggest .chip:hover{ background:#f8fafc; } /* FOOT MENU */ .footbar{ margin-top:14px;background:var(--soft);border:1px solid var(--line);border-radius:12px; display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px; } .fb-left{display:flex;align-items:center;gap:10px;} .fb-right{display:flex;align-items:center;gap:8px;} .mini-btn,.mini-icon{ padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font:13px/1 system-ui; } .mini-icon{width:38px;height:38px;display:inline-grid;place-items:center;} .mini-icon.primary{background:var(--brand);color:#fff;border-color:transparent;} .tip{font-size:12px;color:#666;} .kbd{display:inline-block;border:1px solid #ddd;border-bottom-width:2px;border-radius:6px;padding:2px 6px;background:#fff;margin:0 2px;font-size:12px;} @media (max-width:720px){ .tip{display:none;} }

PHÁP BẢO PHÚC LẠC – CHATBOT

“Từ hòa – Chánh kiến – Lợi lạc”
Nam mô Bổn Sư Thích Ca Mâu Ni Phật · “Hiểu sâu Chánh Pháp – Hướng đạo tu tập”
Xin chào bạn! Bạn đang muốn tìm hiểu điều gì trong Phật pháp?
Bấm Ctrl/Cmd + Shift + K để bắt đầu cuộc hội thoại mới.
Mẹo: Enter để gửi, Shift+Enter để xuống dòng. Nếu trang chậm sau vài ngày dùng, hệ thống sẽ tự rút gọn lịch sử hiển thị để nhẹ máy.
'; const w=window.open('','_blank'); if(!w) return; w.document.open(); w.document.write(html); w.document.close(); w.focus(); w.print(); } newChatBtn.addEventListener('click', newChat); stepBackBtn.addEventListener('click', stepBack); copyBtn.addEventListener('click', copyTranscript); saveBtn.addEventListener('click', saveMarkdown); printBtn.addEventListener('click', printPDF); stopBtn.addEventListener('click', ()=> stopStream()); regenBtn.addEventListener('click', ()=>{ if(!lastUserMsg) return; input.value=lastUserMsg; form.requestSubmit(); }); clearBtn.addEventListener('click', newChat); function greet(){ if (ENABLE_GREETING_BUBBLE) appendBubble('Nam mô Bổn Sư Thích Ca Mâu Ni Phật! Bạn đang muốn tìm hiểu điều gì trong Phật pháp?'); } if (ENABLE_GREETING_BUBBLE) greet(); console.log('[Chat] Ready ✅');