/* Dokimi Chat v9.5 */
*{box-sizing:border-box}
#dkc{position:fixed;bottom:90px;right:20px;z-index:2147483647;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;display:flex;flex-direction:column;align-items:flex-end;gap:12px;user-select:none}

/* Toast */
#dkc-t{position:fixed;bottom:168px;right:20px;background:#18181b;color:#f4f4f5;font-size:13px;padding:10px 14px;border-radius:12px;max-width:280px;display:flex;gap:8px;opacity:0;pointer-events:none;transform:translateY(6px) scale(.97);transition:all .2s cubic-bezier(.34,1.2,.64,1);z-index:2147483647;border-left:3px solid #71717a}
#dkc-t.on{opacity:1;pointer-events:auto;transform:none}
#dkc-t.err{border-color:#ef4444}#dkc-t.wrn{border-color:#f59e0b}
#dkc-t span{flex:1;user-select:text}
#dkc-t button{background:none;border:none;color:#71717a;cursor:pointer;font-size:18px;line-height:1;padding:0}

/* Bubble */
#dkc-b{width:60px;height:60px;border-radius:50%;background:#1A73E8;border:3px solid #fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.22),0 4px 16px rgba(26,115,232,.4);position:relative;color:#fff;transition:transform .18s;flex-shrink:0}
#dkc-b:hover{transform:scale(1.07)}
#dkc-b:active{transform:scale(.93)}
#dkc-b svg{width:26px;height:26px}
#dkc-b:not(.on)::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(26,115,232,.25);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.32);opacity:0}}
#bb{position:absolute;top:-3px;right:-3px;background:#FF6B00;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;padding:0 3px;display:none;align-items:center;justify-content:center;border:2px solid #fff}

/* Window */
#dkc-w{width:370px;height:600px;min-width:290px;min-height:420px;max-width:min(560px,94vw);max-height:min(700px,84vh);background:#F8F9FA;border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 4px 8px rgba(0,0,0,.06),0 20px 60px rgba(0,0,0,.16);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:pop .22s cubic-bezier(.34,1.3,.64,1);position:relative}
@keyframes pop{from{opacity:0;transform:scale(.88) translateY(8px)}to{opacity:1;transform:none}}
#dkc-w.mini{height:54px!important;min-height:54px!important;border-radius:27px!important;cursor:pointer;overflow:hidden}
#dkc-w.mini>*:not(#dkc-h){display:none!important}
#dkc-w.mini #dkc-h{border-radius:27px;min-height:54px;padding:0 12px}
#dkc-w.big{width:min(620px,96vw)!important;height:min(760px,88vh)!important}

/* Resize handle */
#dkc-r{position:absolute;top:0;left:0;width:18px;height:18px;cursor:nw-resize;z-index:10}
#dkc-r::before{content:'';position:absolute;top:5px;left:5px;width:8px;height:8px;border-top:2px solid rgba(255,255,255,.4);border-left:2px solid rgba(255,255,255,.4)}

/* ── HEADER ── */
#dkc-h{background:linear-gradient(135deg,#1A73E8,#0D47A1);color:#fff;padding:10px 10px 22px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;position:relative}
/* Wave */
#dkc-h::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:16px;background:#F8F9FA;clip-path:ellipse(54% 100% at 50% 100%);pointer-events:none}
#dkc-hl{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
#dkc-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.25);overflow:hidden}
#dkc-av svg{width:100%;height:100%;display:block}
#dkc-hn{font-weight:800;font-size:15px;line-height:1.2;white-space:nowrap}
#dkc-hs{font-size:10.5px;opacity:.85;display:flex;align-items:center;gap:4px;margin-top:3px;white-space:nowrap}
#dkc-dot{width:7px;height:7px;background:#4ade80;border-radius:50%;flex-shrink:0;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Header buttons — small, no bg */
#dkc-hb{display:flex;align-items:center;gap:1px;flex-shrink:0}
#dkc-hb{display:flex;align-items:center;gap:3px;flex-shrink:0}
#dkc-hb button{
    background:rgba(255,255,255,.95);
    border:none;cursor:pointer;border-radius:8px;
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    padding:0;
}
#dkc-hb button:hover{background:#fff;transform:translateY(-1px)}
#dkc-hb button svg{width:18px;height:18px;display:block}
#dkc-hb button svg path{fill:#1A73E8}
/* Nút gọi - xanh lá */
#dkc-hb button:first-child svg path{fill:#16A34A}
/* Nút đóng - đỏ */
#dkc-cx svg path{fill:#DC2626}
#dkc-cx:hover{background:#FEE2E2!important}

/* Disclaimer */
#dkc-disc{background:#FFFBEB;border-bottom:1px solid #FDE68A;padding:5px 12px;display:flex;align-items:center;gap:6px;font-size:10.5px;color:#92400E;flex-shrink:0;line-height:1.35}
#dkc-disc svg{width:12px;height:12px;flex-shrink:0;fill:#B45309}
#dkc-disc span{flex:1}
#dkc-disc a{color:#1A73E8;font-weight:600;text-decoration:none}
#dkc-dx{background:none;border:none;color:#B45309;cursor:pointer;font-size:16px;line-height:1;padding:0;opacity:.6}

/* ── HOME SCREEN ── */
#dkc-home{flex-shrink:0;padding:12px 12px 0;overflow:hidden}
#dkc-home:empty{display:none}
.hl{font-size:13px;font-weight:700;color:#374151;display:flex;align-items:center;gap:5px;margin-bottom:8px}
.hl::before{content:'✦';color:#1A73E8;font-size:10px}

/* Category grid */
.hg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.hc{background:#fff;border:1.5px solid #E8EAED;border-radius:12px;padding:10px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:border-color .15s,transform .12s;text-align:left;font-family:inherit}
.hc:hover{border-color:#1A73E8;transform:translateY(-1px);box-shadow:0 2px 10px rgba(26,115,232,.12)}
.hc:active{transform:none}
.hci{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.hci img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.hct{flex:1;min-width:0}
.hcn{font-weight:700;font-size:12.5px;color:#1A73E8;line-height:1.2}
.hcs{font-size:10.5px;color:#6B7280;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hca{color:#CBD5E1;font-size:14px;flex-shrink:0;line-height:1}

/* FAQ */
.fh{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.ft{font-size:12.5px;font-weight:700;color:#374151;display:flex;align-items:center;gap:5px}
.ft svg{width:13px;height:13px;fill:#1A73E8}
.fa{font-size:11px;color:#1A73E8;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;white-space:nowrap}
.fl{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding-bottom:8px}
.fb{background:#fff;border:1.5px solid #E8EAED;border-radius:10px;padding:6px 10px;font-size:11px;color:#374151;cursor:pointer;font-family:inherit;transition:all .15s;line-height:1.35;text-align:left}
.fb:hover{border-color:#1A73E8;color:#1A73E8;background:#EFF6FF}

/* ── MESSAGES ── */
#dkc-m{flex:1;overflow-y:auto;padding:10px 12px 6px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
#dkc-m::-webkit-scrollbar{width:4px}
#dkc-m::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:4px}

/* Typing */
#dkc-dots{padding:3px 14px 5px;display:flex;gap:4px;align-items:center;flex-shrink:0}
#dkc-dots span{width:7px;height:7px;background:#1A73E8;border-radius:50%;opacity:.2;animation:bounce 1.2s ease-in-out infinite}
#dkc-dots span:nth-child(2){animation-delay:.2s}
#dkc-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.2}40%{transform:translateY(-5px);opacity:1}}

/* Message rows */
.dm{display:flex;flex-direction:column;max-width:88%;animation:slide .17s ease}
@keyframes slide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm.u{align-self:flex-end;align-items:flex-end}
.dm.b,.dm.e{align-self:flex-start;align-items:flex-start;flex-direction:row;gap:7px;max-width:96%}
.dm.b .dbc,.dm.e .dbc{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.dav{width:30px;height:30px;border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.dav svg{width:100%;height:100%;display:block}
.db{padding:9px 13px;font-size:13.5px;line-height:1.6;word-break:break-word;white-space:pre-wrap;border-radius:16px}
.dm.u .db{background:#1A73E8;color:#fff;border-radius:16px 4px 16px 16px}
.dm.b .db{background:#fff;color:#1e293b;border:1px solid #E8EAED;border-radius:4px 16px 16px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.dm.e .db{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;border-radius:4px 16px 16px 16px}
.dts{font-size:10px;color:#9CA3AF;margin-top:2px;padding:0 4px}
.dm.b .dts,.dm.e .dts{padding-left:0}

/* Funnel buttons */
.dfb{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dfn{background:#EFF6FF;border:1.5px solid #93C5FD;border-radius:18px;padding:6px 13px;font-size:12.5px;color:#1D4ED8;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.dfn:hover{background:#DBEAFE;transform:translateY(-1px)}
.dfn:active{transform:none}

/* Product card */
.dcard{background:#fff;border:1.5px solid #E8EAED;border-radius:12px;overflow:hidden;margin-top:5px;width:100%;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.dcard-b{padding:11px 13px}
.dcard-n{font-weight:700;font-size:13px;color:#1e293b;line-height:1.4;margin-bottom:3px}
.dcard-p{font-size:15px;font-weight:800;color:#1A73E8;margin-bottom:5px}
.dcard-d{font-size:12px;color:#64748B;line-height:1.45;margin-bottom:8px}
.dcard-btns{display:flex;gap:6px}
.dcb{flex:1;padding:7px 5px;border-radius:9px;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}
.dcb:hover{opacity:.87}
.dcb-buy{background:#1A73E8;color:#fff}
.dcb-zalo{background:#0068FF;color:#fff}
.dcb-call{background:#16A34A;color:#fff}

/* ── INPUT ── */
#dkc-f{padding:8px 11px;background:#fff;border-top:1px solid #E8EAED;display:flex;gap:7px;align-items:flex-end;flex-shrink:0}
#dkc-i{flex:1;border:1.5px solid #E8EAED;border-radius:13px;padding:9px 12px;font-family:inherit;font-size:13.5px;resize:none;outline:none;max-height:90px;line-height:1.5;background:#F7F8FA;transition:border-color .15s,background .15s;user-select:text}
#dkc-i:focus{border-color:#1A73E8;background:#fff}
#dkc-i::placeholder{color:#9CA3AF}
#dkc-i:disabled{opacity:.5;cursor:not-allowed}
#dkc-s{width:40px;height:40px;border-radius:12px;background:#1A73E8;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:background .15s,transform .12s}
#dkc-s:hover{background:#1557B0}
#dkc-s:active{transform:scale(.91)}
#dkc-s:disabled{background:#CBD5E1;cursor:not-allowed}
#dkc-s svg{width:19px;height:19px}

/* ── ACTION BAR ── */
#dkc-a{display:flex;border-top:1px solid #E8EAED;flex-shrink:0;background:#fff;border-radius:0 0 18px 18px;overflow:hidden}
.da{flex:1;padding:8px 6px;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;border-right:1px solid #E8EAED;text-decoration:none;color:#374151;transition:background .15s}
.da:last-child{border-right:none}
.da:hover{background:#F3F4F6}
.dai{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dai svg{width:14px;height:14px}
.da div:not(.dai){display:flex;flex-direction:column;line-height:1.25}
.da b{font-size:12px;white-space:nowrap}
.da small{font-size:10px;color:#9CA3AF;white-space:nowrap}
.da.call .dai{background:#DCFCE7}.da.call .dai svg{fill:#16A34A}.da.call b{color:#16A34A}
.da.zalo .dai{background:#DBEAFE}.da.zalo .dai svg{fill:#0068FF}.da.zalo b{color:#0068FF}
.da.shop .dai{background:#FEE2E2}.da.shop .dai svg{fill:#DC2626}.da.shop b{color:#DC2626}

/* Footer */
#dkc-p{text-align:center;font-size:10px;color:#9CA3AF;padding:4px 10px 7px;flex-shrink:0;background:#fff}

/* Mobile */
@media(max-width:520px){
    #dkc{bottom:104px;right:10px}
    #dkc-w{position:fixed!important;bottom:0!important;right:0!important;width:100vw!important;height:86vh!important;max-width:100vw!important;border-radius:18px 18px 0 0!important}
    #dkc-r{display:none}
    #dkc-hb button{width:30px!important;height:30px!important;border-radius:8px!important}
    #dkc-hb button svg{width:17px!important;height:17px!important}
    #dkc-hb{gap:3px!important}
}

#dkc-cx{background:#fff!important}
#dkc-cx svg{fill:#DC2626!important}
#dkc-cx:hover{background:#FEE2E2!important}

/* AI Avatar glow */
#dkc-av{animation:av-glow 3s ease-in-out infinite}
@keyframes av-glow{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0 rgba(26,115,232,.0)}50%{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 12px 3px rgba(0,229,255,.3)}}
.dav svg{width:26px;height:26px}

/* ── Avatar status ── */
#dkc-av-wrap{position:relative;flex-shrink:0}
#dkc-online-dot{
    position:absolute;bottom:1px;right:1px;z-index:2;
    width:12px;height:12px;border-radius:50%;
    background:#22C55E;border:2.5px solid #1A73E8;
    transition:background .3s;
}
#dkc-online-dot.offline{background:#94A3B8;animation:none}
#dkc-online-dot.online{background:#22C55E;animation:dot-pulse 2s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}}
#dkc-status-text{font-weight:600}
#dkc-status-text.offline{color:#CBD5E1}