:root{
  --nen:#f5f6f8; --the:#fff; --vien:#e2e5ea; --chu:#1d2430; --mo:#6b7585;
  --chinh:#c0392b; --chinh-nhat:#fdecea; --tot:#1e7e45; --luu-y:#9a6700; --xau:#b42318;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:var(--nen);color:var(--chu)}
h1{font-size:20px;margin:0}
.mo{color:var(--mo);font-size:14px}
.an{display:none}
.giua{display:flex;align-items:center;justify-content:center;min-height:100vh}

/* đầu trang */
.dau{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:var(--the);border-bottom:1px solid var(--vien);flex-wrap:wrap}
.dau-phai{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nhan{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
.nhan-thu{background:#eef2ff;color:#3730a3}
.nhan-that{background:#fdecea;color:#b42318}
.moc{font-size:13px;color:var(--mo)}

/* tab */
.the-tab{display:flex;gap:4px;padding:0 20px;background:var(--the);border-bottom:1px solid var(--vien);overflow-x:auto}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px;
  font-size:15px;cursor:pointer;color:var(--mo);white-space:nowrap}
.tab.dang-chon{color:var(--chinh);border-bottom-color:var(--chinh);font-weight:600}

.man{padding:20px;max-width:1400px;margin:0 auto}

/* nút */
button{background:var(--chinh);color:#fff;border:0;border-radius:8px;padding:9px 16px;
  font-size:15px;cursor:pointer}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
button.phu{background:#fff;color:var(--chu);border:1px solid var(--vien)}

input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--vien);
  border-radius:8px;background:#fff;color:var(--chu);width:100%}
label{display:block;font-size:14px;color:var(--mo);margin-bottom:10px}
label input,label select,label textarea{margin-top:4px}

.the{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:16px}

/* đăng nhập */
.hop-dang-nhap{width:min(380px,92vw)}
.hop-dang-nhap button{width:100%;margin-top:6px}
.loi{color:var(--xau);font-size:14px}

/* lọc */
.loc{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.loc label{margin-bottom:0}
.loc select{min-width:190px}
.dem{font-size:14px;color:var(--mo);margin-left:auto}

/* hộp thư hai cột */
.hai-cot{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:16px;align-items:start}
@media (max-width:900px){.hai-cot{grid-template-columns:1fr}}
.ds{list-style:none;margin:0;padding:0;max-height:70vh;overflow:auto;
  background:var(--the);border:1px solid var(--vien);border-radius:12px}
.muc{padding:12px 14px;border-bottom:1px solid var(--vien);cursor:pointer}
.muc:last-child{border-bottom:0}
.muc:hover{background:#fafbfc}
.muc.dang-xem{background:var(--chinh-nhat)}
.muc.can-nguoi{border-left:3px solid var(--chinh)}
.muc-dau{display:flex;justify-content:space-between;gap:8px}
.muc-than{font-size:14px;color:var(--mo);margin:3px 0 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muc-chan{display:flex;gap:6px;flex-wrap:wrap}
.gio{font-size:12px;color:var(--mo);white-space:nowrap}
.chip{font-size:12px;padding:2px 8px;border-radius:999px;background:#eef1f5;color:#475063}
.chip-can_nguoi{background:var(--chinh-nhat);color:var(--chinh);font-weight:600}
.chip-xong{background:#e7f6ec;color:var(--tot)}
.chip-sdt{background:#e7f6ec;color:var(--tot)}

/* khung hội thoại */
.ht-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--vien);flex-wrap:wrap}
.ht-dau select{width:auto;min-width:180px}
.ht-tin{max-height:46vh;overflow:auto;padding:12px 0;display:flex;flex-direction:column;gap:10px}
.tin{max-width:78%;padding:9px 12px;border-radius:12px;background:#eef1f5}
.tin-khach{align-self:flex-start}
.tin-shop,.tin-agent{align-self:flex-end;background:var(--chinh-nhat)}
.tin-noi{white-space:pre-wrap}
.tin-chan{font-size:12px;color:var(--mo);margin-top:4px}
.ht-go{display:flex;gap:8px;align-items:flex-end}
.ht-go textarea{flex:1}
.canh-bao{background:#fff8e6;border:1px solid #f0d99b;color:var(--luu-y);
  padding:8px 12px;border-radius:8px;font-size:14px}
.ket-qua{font-size:14px;min-height:20px;display:block;margin-top:6px}
.ket-qua.tot{color:var(--tot)} .ket-qua.luu-y{color:var(--luu-y)} .ket-qua.xau{color:var(--xau)}

/* bảng */
.bang{width:100%;border-collapse:collapse;background:var(--the);
  border:1px solid var(--vien);border-radius:12px;overflow:hidden}
.bang th,.bang td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--vien);font-size:15px}
.bang th{background:#fafbfc;font-size:13px;color:var(--mo);font-weight:600}
.bang tr:last-child td{border-bottom:0}
.bang select{width:auto;min-width:220px}
.bang input[type=checkbox]{width:18px;height:18px}

/* agent */
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.agent-the{display:flex;flex-direction:column;gap:10px}
.agent-dau{display:flex;gap:10px;align-items:center}
.agent-dau .a-ten{font-weight:600}
.bat-tat{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap;font-size:13px}
.bat-tat input{width:18px;height:18px}
.hang{display:flex;gap:12px}
.hang label{flex:1;margin-bottom:0}

/* Mốc tươi nguội hoặc nguồn hỏng — phải nhìn là thấy ngay */
.moc-nguoi{color:var(--xau);font-weight:600}