/* ===== Nút nổi ===== */
#hnc-wrap{position:fixed;z-index:99990;display:flex;flex-direction:column;align-items:flex-start;gap:26px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#hnc-wrap .hnc-item{position:relative;display:block;width:56px;height:56px;flex:none;margin:0;padding:0}
#hnc-wrap .hnc-btn{box-sizing:border-box;margin:0;padding:0;line-height:1;outline:0;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--c,#00b140) 60%,#fff);border:0;box-shadow:none;cursor:pointer;text-decoration:none;position:relative;animation:hncp 2s infinite}
#hnc-wrap .hnc-btn .hnc-in{width:42px;height:42px;border-radius:50%;background:var(--c,#00b140);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff}
#hnc-wrap .hnc-btn .hnc-in img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0}
#hnc-wrap .hnc-btn svg{display:block;width:22px;height:22px;fill:currentColor}
#hnc-wrap .hnc-zalo-txt{font-weight:800;font-size:13px;letter-spacing:-.3px;color:#fff}
@keyframes hncp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#00b140) 45%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
#hnc-wrap .hnc-bubble{position:absolute;top:50%;left:calc(100% + 14px);transform:translateY(-50%);cursor:pointer;background:linear-gradient(90deg,#00a83c,#1fcf6b);color:#fff;font-weight:700;font-size:15px;line-height:1.2;padding:9px 18px;border-radius:12px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
#hnc-wrap.hnc-right .hnc-bubble{left:auto;right:calc(100% + 14px)}

/* ===== Cửa sổ chat ===== */
#hnc-panel{position:fixed;z-index:99999;box-sizing:border-box;margin:0;padding:0;width:380px;max-width:calc(100vw - 24px);height:min(600px,calc(100vh - 40px));background:#f6f7f9;border-radius:18px;box-shadow:0 12px 44px rgba(0,0,0,.26);display:flex;flex-direction:column;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;color:#1f2937;text-align:left}
#hnc-panel[hidden]{display:none}
#hnc-panel *{box-sizing:border-box}
#hnc-panel .hnc-head{display:flex;align-items:center;gap:10px;padding:13px 14px;color:#fff;background:var(--hh,#00b140)}
#hnc-panel .hnc-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;color:#fff}
#hnc-panel .hnc-av img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
#hnc-panel .hnc-av svg{display:block;width:20px;height:20px}
#hnc-panel .hnc-ht{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
#hnc-panel .hnc-ht strong{font-size:16px;color:#fff}
#hnc-panel .hnc-ht small{font-size:12.5px;color:#fff;opacity:.92}
#hnc-panel .hnc-ht small.hnc-on:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#7dff9b;margin-right:6px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
#hnc-panel .hnc-x{background:none;border:0;box-shadow:none;margin:0;padding:0 4px;color:#fff;font-size:28px;line-height:1;cursor:pointer}

/* Tin nhắn */
#hnc-panel .hnc-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:#f6f7f9}
#hnc-panel .hnc-row{display:flex;width:100%;margin:0;padding:0;justify-content:flex-start}
#hnc-panel .hnc-row.hnc-user{justify-content:flex-end}
#hnc-panel .hnc-m{display:block;width:auto;max-width:82%;margin:0;padding:10px 14px;border-radius:18px 18px 18px 5px;font-size:15px;line-height:1.5;font-weight:400;background:#fff;color:#1f2937;border:1px solid #e3e6ea;box-shadow:0 1px 3px rgba(16,24,40,.06);overflow-wrap:anywhere;word-wrap:break-word}
#hnc-panel .hnc-user .hnc-m{background:var(--hs,#00a83c);color:#fff;border-color:transparent;border-radius:18px 18px 5px 18px}
#hnc-panel .hnc-adm .hnc-m{background:#eefbf3;border-color:#b9ecd0}
#hnc-panel .hnc-m a{color:#0a7d2c;text-decoration:underline}
#hnc-panel .hnc-user .hnc-m a{color:#fff}
#hnc-panel .hnc-m b{font-weight:700}
#hnc-panel .hnc-who{display:block;margin:0 0 3px;font-size:12.5px;font-weight:700;line-height:1.3;color:#0a7d2c}
#hnc-panel .hnc-m img{display:block;max-width:100%;height:auto;border-radius:12px;margin:0 0 6px}
#hnc-panel .hnc-dots span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#9ca3af;animation:hncd 1.2s infinite}
#hnc-panel .hnc-dots span:nth-child(2){animation-delay:.2s}
#hnc-panel .hnc-dots span:nth-child(3){animation-delay:.4s}
@keyframes hncd{0%,80%,100%{opacity:.25}40%{opacity:1}}
#hnc-panel .hnc-wait{font-size:13px;color:#6b7280;font-style:italic;padding:0 4px}
#hnc-panel .hnc-phone{display:flex;gap:8px;margin-top:10px}
#hnc-panel .hnc-phone input{flex:1;min-width:0;height:40px;margin:0;padding:0 12px;border:1.5px solid #d1d5db;border-radius:10px;font-size:15px;background:#fff;color:#1f2937;box-shadow:none}
#hnc-panel .hnc-phone button{height:40px;margin:0;padding:0 16px;border:0;border-radius:10px;background:var(--hs,#00a83c);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:none}
#hnc-panel .hnc-err{color:#dc2626;font-size:12.5px;margin-top:5px}

/* Gợi ý câu hỏi */
#hnc-panel .hnc-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:12px 14px;background:#fff;border-top:1px solid #ececef;border-bottom:1px solid #ececef}
#hnc-panel .hnc-chips:empty{display:none}
#hnc-panel .hnc-chip{display:inline-flex;align-items:center;height:auto;min-height:0;margin:0;padding:11px 20px;border:1.5px solid #e1e4e8;border-radius:999px;background:#f5f5f6;box-shadow:none;color:#374151;font-size:15px;font-weight:400;line-height:1.25;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;cursor:pointer;transition:background .15s,border-color .15s}
#hnc-panel .hnc-chip:hover,#hnc-panel .hnc-chip:focus{background:#ebecee;border-color:#d3d7dd;color:#1f2937;outline:0}

/* Ảnh chờ gửi */
#hnc-panel .hnc-prev{margin:0;padding:10px 14px 0;background:#fff;border-top:1px solid #ececef}
#hnc-panel .hnc-prev[hidden]{display:none}
#hnc-panel .hnc-prev div{position:relative;display:inline-block}
#hnc-panel .hnc-prev img{display:block;height:60px;width:auto;border-radius:10px;margin:0}
#hnc-panel .hnc-prev button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:#111827;color:#fff;font-size:15px;line-height:1;cursor:pointer;box-shadow:none}

/* Thanh nhập */
#hnc-panel .hnc-foot{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;background:#fff}
#hnc-panel .hnc-imgbtn{display:flex;align-items:center;justify-content:center;flex:none;align-self:center;width:38px;height:48px;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:#6b7280;line-height:0;cursor:pointer}
#hnc-panel .hnc-imgbtn:hover{color:#374151}
#hnc-panel .hnc-imgbtn svg{display:block;width:30px;height:30px;fill:currentColor}
#hnc-panel #hnc-input{flex:1;min-width:0;height:48px;margin:0;padding:0 14px;border:1.5px solid #d9dde3;border-radius:10px;background:#fff;color:#1f2937;font-size:15px;line-height:normal;outline:0;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#hnc-panel #hnc-input:focus{border-color:var(--hs,#00a83c);box-shadow:0 0 0 3px color-mix(in srgb,var(--hs,#00a83c) 18%,transparent)}
#hnc-panel .hnc-send{display:flex;align-items:center;justify-content:center;flex:none;align-self:center;width:50px;height:50px;min-width:50px;margin:0;padding:0;border:0;border-radius:50%;background:var(--hs,#00a83c);color:#fff;line-height:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#hnc-panel .hnc-send svg{display:block;width:28px;height:28px;fill:currentColor;color:#fff}
#hnc-panel .hnc-send img{display:block;width:30px;height:30px;object-fit:contain;margin:0}
#hnc-panel .hnc-send[disabled]{opacity:.6;cursor:default}

@media(max-width:480px){#hnc-panel{left:0!important;right:0!important;bottom:0!important;width:100%;max-width:100%;height:calc(100vh - 20px);border-radius:18px 18px 0 0}#hnc-wrap .hnc-bubble{display:none}}