/* Box Chat trang chủ */
.hk-chat [hidden]{display:none!important}
.hk-chat-section{margin-top:1.5rem}
.hk-chat{position:relative;display:flex;flex-direction:column;background:#1f2328;color:#e5e7eb;border:1px solid #33383f;border-radius:.75rem;box-shadow:0 10px 30px #0003;overflow:hidden}
.hk-chat__head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;background:linear-gradient(90deg,#2b2f36,#1f2328);border-bottom:1px solid #33383f}
.hk-chat__title{margin:0;font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:.5rem;color:#fff}
.hk-chat__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33}
.hk-chat__status{font-size:.75rem;color:#9ca3af}
.hk-chat__me{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#cbd5e1}
.hk-chat__me select{background:#15181c;color:#e5e7eb;border:1px solid #3b4149;border-radius:.4rem;padding:.2rem .4rem;font-size:.8rem;max-width:160px}
.hk-chat__pin{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem 1rem;background:#3a2f12;color:#fde68a;font-size:.85rem;border-bottom:1px solid #5b4a1a;overflow-wrap:anywhere}
.hk-chat__pin small{opacity:.7;white-space:nowrap}
.hk-chat__list{height:300px;overflow-y:auto;padding:.5rem .75rem;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:#4b5563 transparent;overscroll-behavior:contain}
.hk-chat__empty{margin:auto;color:#6b7280;font-size:.9rem}
.hk-msg{position:relative;display:flex;gap:.45rem;align-items:baseline;padding:.3rem .45rem;border-radius:.4rem;line-height:1.45;font-size:.9rem;overflow-wrap:anywhere}
.hk-msg:hover{background:#ffffff08}
.hk-msg__time{flex:none;font-size:.7rem;color:#6b7280;font-variant-numeric:tabular-nums}
.hk-msg__body{min-width:0;flex:1}
.hk-msg__name{font-weight:700;color:#93c5fd;cursor:pointer;margin-right:.25rem}
.hk-msg__name:hover{text-decoration:underline}
.hk-msg--mine .hk-msg__name{color:#fcd34d}
.hk-msg__text{color:#e5e7eb;white-space:pre-wrap}
.hk-msg__text mark{background:#f59e0b40;color:#fde68a;border-radius:.2rem;padding:0 .1rem}
.hk-badge{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.03em;padding:.05rem .35rem;border-radius:.3rem;margin-right:.3rem;vertical-align:1px;color:#fff}
.hk-badge--admin{background:#dc2626}.hk-badge--quanly{background:#ea580c}.hk-badge--smod{background:#7c3aed}.hk-badge--mod{background:#059669}
.hk-msg--admin .hk-msg__name{color:#fca5a5}.hk-msg--quanly .hk-msg__name{color:#fdba74}.hk-msg--smod .hk-msg__name{color:#c4b5fd}.hk-msg--mod .hk-msg__name{color:#6ee7b7}
.hk-msg--me .hk-msg__text{font-style:italic;color:#c4b5fd}
.hk-msg--sys{justify-content:center;font-size:.8rem;color:#9ca3af;font-style:italic}
.hk-msg--sys .hk-msg__time{display:none}
.hk-msg--announce{background:linear-gradient(90deg,#7c2d1233,#b4530922);border:1px solid #b4530966;margin:.2rem 0}
.hk-msg--announce .hk-msg__text{color:#fde68a;font-weight:600}
.hk-msg__tools{position:absolute;right:.35rem;top:.15rem;display:none;gap:.2rem}
.hk-msg:hover .hk-msg__tools,.hk-msg:focus-within .hk-msg__tools{display:flex}
.hk-msg__tools button{border:0;border-radius:.3rem;background:#374151;color:#fff;font-size:.75rem;padding:.1rem .35rem;cursor:pointer}
.hk-msg__tools button:hover{background:#4b5563}
.hk-chat__toast{margin:0 .75rem .5rem;padding:.45rem .7rem;border-radius:.4rem;font-size:.82rem;background:#7f1d1d;color:#fecaca;white-space:pre-wrap}
.hk-chat__toast--info{background:#1e3a5f;color:#bfdbfe}
.hk-chat__form{display:flex;gap:.5rem;align-items:center;padding:.6rem .75rem;border-top:1px solid #33383f;background:#1a1d21}
.hk-chat__form input{flex:1;min-width:0;background:#111316;color:#f3f4f6;border:1px solid #3b4149;border-radius:.5rem;padding:.55rem .75rem;font-size:.95rem;outline:none}
.hk-chat__form input:focus{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b33}
.hk-chat__form input:disabled{opacity:.6}
.hk-chat__btn{flex:none;border:0;border-radius:.5rem;padding:.5rem .8rem;font-weight:700;cursor:pointer;background:#374151;color:#fff;font-size:1rem;line-height:1}
.hk-chat__btn:hover{filter:brightness(1.15)}
.hk-chat__btn--send{background:#f59e0b;color:#1b1300;font-size:.9rem}
.hk-chat__btn:disabled{opacity:.5;cursor:not-allowed}
.hk-chat__count{flex:none;font-size:.7rem;color:#6b7280;min-width:2.5rem;text-align:right}
.hk-chat__guest{padding:.75rem;text-align:center;border-top:1px solid #33383f;background:#1a1d21;font-size:.9rem;color:#cbd5e1}
.hk-chat__guest a{color:#fbbf24;font-weight:700}
.hk-chat__emoji{position:absolute;left:.75rem;bottom:3.6rem;width:min(360px,calc(100% - 1.5rem));background:#15181c;border:1px solid #3b4149;border-radius:.6rem;box-shadow:0 12px 30px #0008;z-index:5}
.hk-chat__emoji-tabs{display:flex;gap:.15rem;padding:.35rem;border-bottom:1px solid #2b3038;overflow-x:auto}
.hk-chat__emoji-tabs button{border:0;background:transparent;font-size:1.15rem;padding:.2rem .35rem;border-radius:.35rem;cursor:pointer}
.hk-chat__emoji-tabs button.is-on{background:#374151}
.hk-chat__emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem;padding:.4rem;max-height:210px;overflow-y:auto}
.hk-chat__emoji-grid button{border:0;background:transparent;font-size:1.35rem;line-height:1;padding:.3rem 0;border-radius:.35rem;cursor:pointer}
.hk-chat__emoji-grid button:hover{background:#374151}
@media (max-width:640px){.hk-chat__list{height:280px}.hk-chat__me{margin-left:0;width:100%}.hk-chat__emoji-grid{grid-template-columns:repeat(7,1fr)}}
@media (hover:none){.hk-msg__tools{display:flex;position:static;margin-left:auto}}
.hk-msg--fun{background:#0f766e1a;border-left:3px solid #14b8a6}
.hk-msg--fun .hk-msg__text{color:#99f6e4}
.hk-chat__fun-grid{grid-template-columns:repeat(2,1fr)!important}
.hk-chat__fun-grid .hk-chat__fun{font-size:.85rem;text-align:left;padding:.4rem .5rem;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-chat__fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.hk-chat__fx span{position:absolute;bottom:-40px;animation:hk-fx-up 2.6s ease-out forwards}
@keyframes hk-fx-up{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(-460px) rotate(200deg);opacity:0}}

/* ---- Bố cục: box chung + khung tin nhắn riêng bên cạnh ---- */
.hk-chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:stretch}
@media (max-width:960px){.hk-chat-layout{grid-template-columns:1fr}}
.hk-chat__pmjump{border:0;border-radius:999px;background:#dc2626;color:#fff;font-size:.75rem;font-weight:700;padding:.15rem .55rem;cursor:pointer;animation:hk-pulse 1.6s ease-in-out infinite}
.hk-chat__pmjump[hidden]{display:none}
@keyframes hk-pulse{50%{box-shadow:0 0 0 4px #dc262644}}
.hk-msg--ig .hk-msg__text{color:#6b7280;letter-spacing:.1em}
.hk-msg__name[data-menu]:focus-visible{outline:2px solid #f59e0b;border-radius:.2rem}

/* ---- Menu khi rê chuột vào tên ---- */
.hk-umenu{position:fixed;z-index:60;min-width:210px;max-width:280px;background:#15181c;color:#e5e7eb;border:1px solid #3b4149;border-radius:.6rem;box-shadow:0 14px 34px #000a;padding:.3rem;font-size:.85rem}
.hk-umenu[hidden]{display:none}
.hk-umenu__head{display:flex;align-items:center;gap:.3rem;padding:.35rem .5rem .45rem;border-bottom:1px solid #2b3038;margin-bottom:.2rem;color:#fff;overflow-wrap:anywhere}
.hk-umenu__item{display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:.4rem .55rem;border-radius:.4rem;cursor:pointer;font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-umenu__item:hover,.hk-umenu__item:focus-visible{background:#374151;outline:none}
.hk-umenu__item.is-warn{color:#fcd34d}
.hk-umenu__item.is-danger{color:#fca5a5}
.hk-umenu__sep{margin:.3rem .2rem .1rem;padding-top:.35rem;border-top:1px solid #2b3038;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af}

/* ---- Khung tin nhắn riêng ---- */
.hk-pm{position:relative;display:flex;flex-direction:column;min-height:0;background:#1f2328;color:#e5e7eb;border:1px solid #33383f;border-radius:.75rem;box-shadow:0 10px 30px #0003;overflow:hidden}
.hk-pm [hidden]{display:none!important}
.hk-pm__head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(90deg,#2b2f36,#1f2328);border-bottom:1px solid #33383f}
.hk-pm__title{margin:0;font-size:1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.4rem}
.hk-pm__badge{background:#dc2626;color:#fff;border-radius:999px;font-size:.7rem;padding:0 .45rem;line-height:1.4}
.hk-pm__hbtn{margin-left:auto;border:0;border-radius:.45rem;background:#374151;color:#fff;font-size:.8rem;padding:.3rem .6rem;cursor:pointer}
.hk-pm__hbtn:hover{background:#4b5563}
.hk-pm__guest{padding:1.2rem 1rem;text-align:center;font-size:.9rem;color:#cbd5e1}
.hk-pm__guest a{color:#fbbf24;font-weight:700}
.hk-pm__toast{margin:.5rem .6rem 0;padding:.4rem .6rem;border-radius:.4rem;font-size:.8rem;background:#7f1d1d;color:#fecaca}
.hk-pm__toast.is-info{background:#1e3a5f;color:#bfdbfe}
.hk-pm__rooms{flex:1;overflow-y:auto;max-height:380px;padding:.35rem;scrollbar-width:thin;scrollbar-color:#4b5563 transparent}
.hk-pm__empty{padding:1rem;color:#6b7280;font-size:.85rem;text-align:center;line-height:1.5}
.hk-pm__item{display:flex;width:100%;gap:.55rem;align-items:center;text-align:left;border:0;background:transparent;color:inherit;padding:.5rem;border-radius:.5rem;cursor:pointer;font:inherit}
.hk-pm__item:hover{background:#ffffff0d}
.hk-pm__ava{flex:none;width:2rem;height:2rem;border-radius:50%;background:#2b3038;display:grid;place-items:center;font-size:1rem}
.hk-pm__mid{flex:1;min-width:0;display:flex;flex-direction:column}
.hk-pm__name{font-weight:700;font-size:.88rem;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-pm__pv{font-size:.76rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-pm__item.is-unread .hk-pm__name{color:#fff}.hk-pm__item.is-unread .hk-pm__pv{color:#e5e7eb;font-weight:600}
.hk-pm__side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
.hk-pm__time{font-size:.68rem;color:#6b7280}
.hk-pm__num{background:#dc2626;color:#fff;border-radius:999px;font-size:.66rem;padding:0 .4rem;font-weight:700}
.hk-pm__room{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.hk-pm__bar{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;border-bottom:1px solid #2b3038;background:#1a1d21}
.hk-pm__rtitle{flex:1;min-width:0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-pm__icon{flex:none;border:0;border-radius:.4rem;background:#2b3038;color:#fff;padding:.25rem .5rem;cursor:pointer;font-size:.85rem}
.hk-pm__icon:hover{background:#374151}
.hk-pm__members{border-bottom:1px solid #2b3038;background:#181b1f;padding:.35rem .5rem;max-height:190px;overflow-y:auto;font-size:.82rem}
.hk-pm__mem{display:flex;align-items:center;gap:.25rem;padding:.2rem 0}
.hk-pm__mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-pm__mbtn{border:0;background:#2b3038;border-radius:.35rem;padding:.1rem .35rem;cursor:pointer;font-size:.8rem}
.hk-pm__mbtn:hover{background:#374151}
.hk-pm__macts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
.hk-pm__abtn{border:0;border-radius:.35rem;background:#374151;color:#fff;padding:.25rem .5rem;cursor:pointer;font-size:.78rem}
.hk-pm__abtn.is-danger{background:#7f1d1d}
.hk-pm__hint{margin-top:.35rem;color:#9ca3af;font-size:.74rem}
.hk-pm__list{flex:1;min-height:200px;height:300px;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.3rem;scrollbar-width:thin;scrollbar-color:#4b5563 transparent;overscroll-behavior:contain}
.hk-pm__sys{align-self:center;font-size:.74rem;color:#9ca3af;font-style:italic;text-align:center}
.hk-pm__msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}
.hk-pm__msg.is-mine{align-self:flex-end;align-items:flex-end}
.hk-pm__from{font-size:.7rem;color:#93c5fd;font-weight:700;margin:0 .4rem .05rem}
.hk-pm__bubble{background:#2b3038;color:#e5e7eb;border-radius:.8rem .8rem .8rem .25rem;padding:.35rem .65rem;font-size:.86rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.hk-pm__msg.is-mine .hk-pm__bubble{background:#b45309;color:#fff;border-radius:.8rem .8rem .25rem .8rem}
.hk-pm__msg.is-ig .hk-pm__bubble{color:#6b7280;letter-spacing:.1em}
.hk-pm__t{font-size:.62rem;color:#6b7280;margin:0 .4rem}
.hk-pm__form{display:flex;gap:.35rem;align-items:center;padding:.5rem;border-top:1px solid #33383f;background:#1a1d21}
.hk-pm__form input{flex:1;min-width:0;background:#111316;color:#f3f4f6;border:1px solid #3b4149;border-radius:.5rem;padding:.45rem .6rem;font-size:.9rem;outline:none}
.hk-pm__form input:focus{border-color:#f59e0b}
.hk-pm__form .hk-chat__btn{padding:.45rem .6rem}
.hk-pm .hk-chat__emoji{left:.5rem;bottom:3.2rem;width:calc(100% - 1rem)}
.hk-pm .hk-chat__emoji-grid{grid-template-columns:repeat(7,1fr)}
@media (max-width:960px){.hk-pm__list{height:260px}.hk-pm__rooms{max-height:260px}}