/* ===== Chatbot nổi bóng (robot AI) ===== */
/* Màu chủ đạo widget — chỉnh ở /Admin/CaiDatAI (inject window.__CHAT_COLOR__ → ghi đè 2 biến này). Trống = tím-hồng mặc định. */
:root{ --cbot-accent:#6c5cff; --cbot-grad:linear-gradient(135deg,#6c5cff,#ff5da2); }
.cbot-bubble{position:fixed;left:16px;bottom:18px;z-index:310;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cbot-grad);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(108,92,255,.5);transition:transform .2s,box-shadow .2s;
  animation:cbotFloat 3.2s ease-in-out infinite}
/* vòng sóng lan tỏa nhẹ phía sau */
.cbot-bubble::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;z-index:-1;
  animation:cbotPulse 2.4s ease-out infinite}
.cbot-bubble:hover{transform:scale(1.09)}
.cbot-bubble:hover .cbot-bot{animation:cbotWiggle .6s ease-in-out}
.cbot-bot{width:36px;height:36px;color:#fff;display:block}
.cbot-bot .eye{transform-box:fill-box;transform-origin:center;animation:cbotBlink 4.2s infinite}
.cbot-bubble .dot{position:absolute;top:7px;right:7px;width:13px;height:13px;border-radius:50%;background:#10b981;border:2px solid #fff;
  animation:cbotOnline 1.8s ease-in-out infinite}
.cbot-bubble.hide{display:none}
@keyframes cbotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cbotPulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.6);opacity:0}}
@keyframes cbotBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes cbotWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes cbotOnline{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
/* avatar tiêu đề cũng là robot */
.cbot-head .av .cbot-bot{width:24px;height:24px;color:#fff}
.cbot-head .av .cbot-bot .eye{animation-duration:5s}
@media(prefers-reduced-motion:reduce){.cbot-bubble,.cbot-bubble::before,.cbot-bot .eye,.cbot-bubble .dot{animation:none}}

.cbot-panel{position:fixed;left:16px;bottom:18px;z-index:320;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 90px);
  display:none;flex-direction:column;background:#fff;border:1px solid #e6e8f2;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,30,80,.3);font-family:'Be Vietnam Pro',system-ui,sans-serif}
.cbot-panel.open{display:flex;animation:cbotpop .22s ease}
@keyframes cbotpop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* NHÚNG (iframe /chat-frame): panel lấp đầy khung, bỏ nổi/bo góc/đổ bóng; nút đóng do bóng ở trang nhúng điều khiển */
.cbot-panel.cbot-embed{position:static;left:auto;bottom:auto;width:100%;max-width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none}
.cbot-panel.cbot-embed.open{animation:none}
.cbot-embed .x{display:inline-block}   /* nhúng: HIỆN nút đóng trong panel (gửi postMessage → trang cha đóng khung) */
.cbot-head{background:var(--cbot-grad);color:#fff;padding:13px 16px;display:flex;align-items:center;gap:10px}
.cbot-head .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:18px}
.cbot-head .ti{flex:1;line-height:1.2}
.cbot-head .ti b{font-size:14.5px;font-weight:800;display:block}
.cbot-head .ti small{font-size:11px;opacity:.9}
.cbot-head .clr{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;line-height:1;opacity:.85;padding:2px}
.cbot-head .clr:hover{opacity:1}
.cbot-head .x{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;opacity:.9}
.cbot-head .mx{background:none;border:0;color:#fff;font-size:15px;cursor:pointer;line-height:1;opacity:.85;padding:2px}
.cbot-head .mx:hover{opacity:1}
/* PHÓNG TO cửa sổ chat trên PC (toggle .cbot-max) */
.cbot-panel.cbot-max{width:min(780px,calc(100vw - 32px));height:min(86vh,840px);max-height:calc(100vh - 48px)}
@media(max-width:560px){.cbot-head .mx{display:none}}   /* mobile đã full màn hình → ẩn nút phóng to */
.cbot-embed .mx{display:inline-block}                    /* nhúng: HIỆN nút phóng to (PC) → postMessage cho trang cha đổi kích thước khung; mobile vẫn ẩn (full màn hình) */
.cbot-body{flex:1;overflow-y:auto;padding:14px;background:#f7f8fc;display:flex;flex-direction:column;gap:10px}
.cbot-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;color:#1f2433}
.cbot-msg.bot{background:#fff;border:1px solid #e9ebf5;align-self:flex-start;border-bottom-left-radius:5px;color:#1f2433;max-width:94%}
.cbot-msg.me{background:var(--cbot-grad);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.cbot-msg.bot a{color:#5a4cff;font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.cbot-msg.bot a:hover{color:#ff5da2}
/* bảng trong câu trả lời: khung cuộn ngang, kéo qua lại xem được */
.cbot-msg.bot:has(.cbot-table){max-width:96%}
.cbot-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0;border:1px solid #e3e6f2;border-radius:9px}
.cbot-table table{border-collapse:collapse;width:max-content;min-width:100%;font-size:12.5px;line-height:1.4}
.cbot-table th,.cbot-table td{border:1px solid #e7e9f4;padding:6px 10px;text-align:left;white-space:nowrap;color:#1f2433}
.cbot-table th{background:linear-gradient(135deg,#efeaff,#f6effd);font-weight:700;color:#4a3fd0;position:sticky;top:0}
.cbot-table tbody tr:nth-child(even) td{background:#fafbff}
.cbot-table td a{text-decoration:none}
.cbot-typing{align-self:flex-start;color:#8a90a8;font-size:13px;font-style:italic;padding:4px 6px}
/* câu hỏi nhanh: 1 hàng ngang, cuộn ngang nếu tràn */
.cbot-quick{display:flex;flex-wrap:nowrap;gap:7px;padding:9px 12px;background:#f7f8fc;border-top:1px solid #eceef6;overflow-x:auto;scrollbar-width:thin}
.cbot-quick::-webkit-scrollbar{height:5px}
.cbot-quick::-webkit-scrollbar-thumb{background:#cfd4ea;border-radius:3px}
.cbot-q{flex:0 0 auto;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--cbot-accent);background:color-mix(in srgb,var(--cbot-accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--cbot-accent) 32%,#fff);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.15s}
.cbot-q:hover{background:var(--cbot-accent);color:#fff}
.cbot-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #eceef6;background:#fff}
.cbot-foot input{flex:1;border:1.5px solid #e1e4f0;border-radius:12px;padding:11px 14px;font:inherit;font-size:14px;color:#1f2433;background:#fff}
.cbot-foot input::placeholder{color:#9aa1bd}
.cbot-foot input:focus{outline:none;border-color:var(--cbot-accent)}
.cbot-foot button{border:0;border-radius:12px;background:var(--cbot-grad);color:#fff;font-size:18px;width:46px;cursor:pointer}
.cbot-foot button:disabled{opacity:.5}
/* Mobile: GIỮ bóng chat bên TRÁI (hotline ở phải) để không đè nhau */
@media(max-width:560px){.cbot-panel{left:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .cbot-bubble{left:14px;right:auto;bottom:14px;width:46px;height:46px;font-size:21px}}
/* Mobile: nâng bóng chat lên TRÊN thanh sticky (đăng ký/xem ngành) để không bị đè */
@media(max-width:680px){.cbot-bubble.raised{bottom:76px}}