/* View-specific styles. */

/* ---------- Today ---------- */
.today-header {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.today-header .h-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.today-header .h-title small { color: var(--tx-3); font-weight: 400; font-size: 14px; margin-left: 6px; }
.today-header .h-sub { color: var(--tx-3); font-size: 13px; margin-top: 3px; }
.today-header .h-progress { margin-left: auto; text-align: right; }
.today-header .h-progress .lbl { font-size: 12.5px; color: var(--tx-3); margin-bottom: 6px; }
/* Nút ẩn/hiện việc đã làm — tick xong ra luôn, bấm để soi lại/undo */
.t-toggle-done {
  margin-left: 8px; background: var(--bg-3); border: 1px solid var(--line-1);
  color: var(--tx-2); font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-family: inherit;
}
.t-toggle-done:hover { background: var(--bg-2); color: var(--tx-1); border-color: var(--ac); }
.t-toggle-done:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.today-header .h-progress .lbl b { color: var(--ok); }
.today-header .h-progress .hbar { width: 220px; }

.today-section { margin-bottom: var(--sp-5); }
.today-section .ts-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; padding: 6px 4px;
  margin-bottom: 6px;
}
.today-section .ts-head .dot { width: 8px; height: 8px; border-radius: 3px; }
.today-section .ts-head .cnt {
  margin-left: auto; color: var(--tx-4); font-weight: 400; font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.today-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--bg-1); margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.today-row:hover { background: var(--bg-2); border-color: var(--line-2); }
.today-row.focus { border-color: var(--ac); background: var(--bg-2); box-shadow: 0 0 0 1px var(--ac-dim); }
.today-row.done { opacity: .45; }
.today-row.done .t-act { text-decoration: line-through; }
.today-row .t-check {
  width: 22px; height: 22px; border-radius: var(--r-1);
  border: 1.5px solid var(--line-3); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--dur-1);
}
.today-row .t-check:hover { border-color: var(--ac); }
.today-row .t-check.on { background: var(--ok); border-color: var(--ok); color: #062015; }
.today-row .t-check.on svg { animation: pop var(--dur-3) var(--ease); }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.today-row .t-act { font-weight: 500; font-size: 13.5px; color: var(--tx-1); }
.today-row .t-meta { color: var(--tx-3); font-size: 12.5px; margin-top: 2px; }
.today-row .t-meta b { color: var(--tx-2); font-weight: 500; }
.today-row .t-right {
  display: flex; align-items: center; gap: 8px; color: var(--tx-3); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* CHỈ lo KÍCH THƯỚC. Không đặt background/color ở đây — `.avatar.av-1..8` trong
   components.css có độ đặc hiệu THẤP HƠN (0,2,0) so với rule container này (0,2,1+),
   nên đặt nền ở đây là GIẾT CHẾT hệ 8 màu: cùng một khách ra màu khác nhau tuỳ màn. */
.today-row .t-right .avatar { width: 22px; height: 22px; font-size: 11px; }
/* Nút ghi chú: icon SVG ăn màu currentColor (emoji cũ không đổi màu theo theme được).
   background/border/padding/cursor đã có ở base.css — không lặp lại. */
.today-row .t-note-btn {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: var(--r-1);
  color: var(--tx-4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1), color var(--dur-1);
}
.today-row .t-note-btn:hover { background: var(--bg-3); color: var(--tx-2); }
.today-row .t-note-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.today-row .t-note .t-note-ico { vertical-align: -1px; }

.today-playbook { margin-bottom: var(--sp-4); overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-3); background: var(--bg-2); }
.today-playbook-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-1); }
.today-playbook-head b { color: var(--tx-2); font-size: 12.5px; }
.today-playbook-head span { min-width: 23px; padding: 1px 6px; border-radius: 20px; background: var(--bg-3); color: var(--tx-4); font-size: 11px; text-align: center; }
.today-playbook-row { display: grid; grid-template-columns: minmax(76px, auto) minmax(0, 1fr); align-items: start; gap: 9px; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--line-1); color: var(--tx-1); text-align: left; overflow-wrap: anywhere; }
.today-playbook-row:last-child { border-bottom: 0; }
.today-playbook-row:hover { background: var(--bg-3); }
.today-playbook-row:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
.today-playbook-row > span:last-child { min-width: 0; }
.today-playbook-row b, .today-playbook-row small { display: block; }
.today-playbook-row b { font-size: 12.5px; }
.today-playbook-row small { margin-top: 3px; color: var(--tx-4); font-size: 11px; }
.today-playbook-empty { padding: 14px 12px; color: var(--tx-4); font-size: 12px; text-align: center; }
.today-playbook-empty button { color: var(--ac); }

@media (max-width: 700px) {
  .today-playbook-row { grid-template-columns: 1fr; }
}

/* ---------- Overview ---------- */
.ov-strip {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  margin: -4px 0 var(--sp-4); padding: 10px 14px;
  background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--r-3);
  font-size: 13px; color: var(--tx-3);
}
.ov-strip b { font-variant-numeric: tabular-nums; }
.chart-svg { width: 100%; display: block; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--tx-3); margin-bottom: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Khối Hoạt động hệ thống 7/30 ngày (24/08) — chú giải dùng GẠCH thay ô vuông vì đây là
   biểu đồ đường: ô vuông đặc không phân biệt được nét liền với nét đứt (kỳ trước / ngày dở). */
.hdk-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.hdk-hd h3 { margin: 0; }
.hdk-sp { flex: 1; }
.hdk-pill {
  display: inline-flex; align-items: center; gap: 5px; background: var(--warn-dim); color: var(--warn);
  border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.seg { display: inline-flex; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--tx-3); font: inherit; font-size: 12px;
  font-weight: 500; padding: 4px 11px; border-radius: 6px; cursor: pointer;
}
.seg button[aria-selected="true"] { background: var(--bg-3); color: var(--tx-1); }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }
.seg button:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.chk {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-3);
  cursor: pointer; user-select: none; padding: 4px 9px; border: 1px solid var(--line-1);
  border-radius: 8px; background: var(--bg-1);
}
.chk input { accent-color: var(--ac); margin: 0; }
.hdk-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1); border-radius: 8px;
  overflow: hidden; margin: 12px 0 8px;
}
.hdk-kp { background: var(--bg-2); padding: 8px 11px; }
.hdk-kp .lb { font-size: 10.5px; color: var(--tx-4); text-transform: uppercase; letter-spacing: .04em; }
.hdk-kp .vl {
  font-size: 18px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.hdk-kp .sub { font-size: 11px; color: var(--tx-4); margin-top: 1px; font-variant-numeric: tabular-nums; }
.hdk-kp .dl { font-size: 11.5px; font-weight: 600; }
.hdk-kp .up { color: var(--ok); } .hdk-kp .dn { color: var(--danger); } .hdk-kp .fl { color: var(--tx-4); }
.hdk-lg i { width: 15px; height: 0; border-top: 2px solid; border-radius: 2px; background: none; vertical-align: 3px; }
.hdk-lg i.dash { border-top-style: dashed; }
.hdk-chart { position: relative; }
.hdk-tip {
  position: absolute; pointer-events: none; background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 7px 10px; font-size: 11.5px; box-shadow: var(--sh-2); white-space: nowrap;
  opacity: 0; transition: opacity .1s; font-variant-numeric: tabular-nums; z-index: 5; color: var(--tx-2);
}
.hdk-tip .t { font-weight: 600; margin-bottom: 3px; color: var(--tx-1); }
.hdk-tip .r { display: flex; justify-content: space-between; gap: 14px; }
.hdk-tip .r b { color: var(--tx-1); }
.hdk-tip .hdk-cb { color: var(--warn); display: block; margin-top: 3px; }
.hdk-foot {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--tx-4);
  border-top: 1px solid var(--line-1); padding-top: 8px; margin-top: 6px;
}
.hdk-foot b { color: var(--tx-3); font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; flex-direction: column; align-items: center; }
.donut-legend { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.donut-legend .lg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-3); }
.donut-legend .lg-item i { width: 8px; height: 8px; border-radius: 2px; }

.ev-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.ev-card {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); padding: 14px;
}
.ev-card .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ev-card .t { color: var(--tx-3); font-size: 12.5px; margin-top: 2px; }
.ev-card.pass { border-color: var(--ok-dim); }
.ev-card.fail { border-color: var(--danger-dim); }
.ev-card.skip { border-color: var(--warn-dim); }

/* ---------- Customers ---------- */
.cust-toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.mode-switch {
  display: inline-flex; background: var(--bg-2);
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  padding: 2px;
}
.mode-switch button {
  padding: 5px 12px; font-size: 13px; color: var(--tx-3);
  border-radius: var(--r-1); font-weight: 500;
}
.mode-switch button.on { background: var(--bg-3); color: var(--tx-1); }
.mode-switch button:hover { color: var(--tx-1); }

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-chips .lbl { font-size: 12px; color: var(--tx-4); margin-right: 4px; }
.filter-chip {
  padding: 3px 10px; border-radius: 20px; font-size: 12.5px;
  border: 1px solid var(--line-1); color: var(--tx-3);
  background: var(--bg-2); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.filter-chip.on { background: var(--ac-dim); color: var(--ac-h); border-color: var(--ac); }
.filter-chip:hover { color: var(--tx-1); }
.cust-staff-filter { max-width: 360px; overflow-x: auto; flex-wrap: nowrap; }
.cust-brief-filter { flex-basis: 100%; }
.cust-summary {
  display: flex; align-items: center; gap: 8px;
  color: var(--tx-3); font-size: 12.5px; margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.cust-progress { color: var(--ac-h); }
.cust-loading, .cust-error {
  min-height: 180px; display: flex; align-items: center; justify-content: center;
  gap: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-3);
  color: var(--tx-3); background: var(--bg-1);
}
.cust-error { flex-direction: column; color: var(--danger); text-align: center; padding: var(--sp-5); }
.cust-error span { color: var(--tx-3); }
.cust-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: 8px 0; color: var(--tx-3); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.cust-page-info { margin-right: auto; }
.cust-page-size, .cust-page-actions { display: flex; align-items: center; gap: 6px; }
.cust-page-size select {
  min-height: 32px; border: 1px solid var(--line-1); border-radius: var(--r-1);
  color: var(--tx-2); background: var(--bg-1); padding: 0 8px;
}
.cust-page-actions .btn { min-width: 34px; justify-content: center; }
.cust-page-actions .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Table */
.ctbl-wrap {
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  overflow-x: auto; background: var(--bg-1);
}
.ctbl-head {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 90px 100px 110px 80px 80px 80px 80px;
  gap: 10px; padding: 8px var(--sp-4);
  border-bottom: 1px solid var(--line-1); background: var(--bg-2);
  font-size: 12px; color: var(--tx-3); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; position: sticky; top: 0; z-index: 2;
}
.ctbl-head .col { user-select: none; display: inline-flex; align-items: center; }
.ctbl-head .col button {
  display: inline-flex; align-items: center; gap: 4px; width: 100%;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ctbl-head .col.sorted { color: var(--tx-1); }
.ctbl-scroll { height: calc(100vh - 220px); overflow-y: auto; }
.ctbl-row {
  display: grid; grid-template-columns: minmax(220px, 2fr) 90px 100px 110px 80px 80px 80px 80px;
  gap: 10px; padding: 8px var(--sp-4); align-items: center;
  border-bottom: 1px solid var(--line-1); cursor: pointer;
  font-size: 13px;
}
.ctbl-row:hover { background: var(--bg-2); }
.ctbl-row .nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctbl-row .nm .avatar { width: 26px; height: 26px; font-size: 11.5px; flex: 0 0 26px; }
.ctbl-row .nm .t { min-width: 0; }
.ctbl-row .nm .t .nm-1 { color: var(--tx-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ctbl-row .nm .t .nm-2 { color: var(--tx-4); font-size: 12px; }
.ctbl-row .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--tx-2); }

/* Board */
.board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.board-card {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); padding: var(--sp-3);
  cursor: pointer; transition: border-color var(--dur-1);
  display: flex; flex-direction: column; gap: 6px;
}
.board-card:hover { border-color: var(--line-2); }
.board-card .bc-head { display: flex; align-items: center; gap: 8px; }
.board-card .bc-name { font-weight: 500; font-size: 13.5px; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.board-card .bc-row { display: flex; gap: 8px; font-size: 12px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.board-card .bc-row .k { color: var(--tx-4); }
.board-card .bc-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* SLA mode */
.sla-list .sla-row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  gap: 12px; align-items: center; padding: 10px var(--sp-4);
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); margin-bottom: 6px; cursor: pointer;
}
.sla-list .sla-row .bar { width: 4px; height: 32px; border-radius: 4px; }
.sla-list .sla-row.wait .bar { background: var(--danger); }
.sla-list .sla-row.slow .bar { background: var(--warn); }
.sla-list .sla-row:hover { border-color: var(--line-2); background: var(--bg-2); }

@media (max-width: 720px) {
  .mode-switch button, .filter-chip { min-height: 44px; touch-action: manipulation; }
  .filter-chips { gap: 8px; }
  .cust-pager { align-items: stretch; flex-wrap: wrap; }
  .cust-page-info { flex-basis: 100%; }
  .cust-page-actions { margin-left: auto; }
  .cust-page-actions .btn { min-width: 44px; min-height: 44px; touch-action: manipulation; }
  .cust-page-size select { min-height: 44px; }
  .ctbl-head, .ctbl-row { min-width: 860px; }
}

/* ---------- Staff view ---------- */
.staff-list { display: flex; flex-direction: column; gap: 6px; }
.staff-row {
  display: grid; grid-template-columns: 32px 1fr repeat(4, 90px);
  gap: 14px; align-items: center;
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); padding: 10px var(--sp-4);
}
.staff-row .avatar { width: 32px; height: 32px; font-size: 12.5px; }
.staff-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--tx-2); font-size: 13.5px; }
.staff-row .num .k { color: var(--tx-4); font-size: 11.5px; display: block; text-transform: uppercase; letter-spacing: .04em; }
.staff-row .st { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--tx-3); }
.staff-row .st .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.staff-row .st .st-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- B2B ---------- */
.b2b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.pareto-list .p-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-1); font-size: 13px; align-items: center;
}
.pareto-list .p-row:last-child { border-bottom: 0; }
.pareto-list .p-row .rk { color: var(--tx-4); font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; }
.pareto-list .p-row .amt { font-variant-numeric: tabular-nums; color: var(--tx-2); font-weight: 500; }

/* ---------- Growth ---------- */
.gr-lane {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.gr-lane .lh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gr-lane .lh .n { margin-left: auto; color: var(--tx-4); font-size: 12px; font-variant-numeric: tabular-nums; }
.gr-lane .lh .desc { color: var(--tx-3); font-size: 12px; font-weight: 400; }
.gr-lane .items { display: flex; flex-direction: column; gap: 6px; }
.gr-lane .g-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; padding: 8px 10px;
  border-radius: var(--r-2); cursor: pointer;
  background: var(--bg-2); align-items: center;
}
.gr-lane .g-item:hover { background: var(--bg-3); }
.gr-lane .g-item .nm { font-size: 13px; color: var(--tx-1); font-weight: 500; }
.gr-lane .g-item .mt { color: var(--tx-3); font-size: 12px; margin-top: 2px; }

/* ---------- Inbox ---------- */
.inbox-list { display: flex; flex-direction: column; gap: 6px; }
.inbox-item {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: var(--sp-3); align-items: center;
  padding: 10px var(--sp-3);
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-3); cursor: pointer;
}
.inbox-item:hover { background: var(--bg-2); border-color: var(--line-2); }
.inbox-item .avatar { width: 34px; height: 34px; font-size: 12px; }
.inbox-item .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; color: var(--tx-1); font-size: 14px; }
.inbox-item .nm .truncate { min-width: 0; }
.inbox-item .nm .chip { flex: 0 0 auto; }
.inbox-item .msg { color: var(--tx-3); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }
.inbox-item .r { text-align: right; font-size: 12px; color: var(--tx-4); font-variant-numeric: tabular-nums; }

/* Filter chips: one-line labels, ellipsis for long NV names (full name in tooltip) */
.filter-chip {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 0 0 auto;
}

/* Task-mix card (Overview): bar ngang theo nhóm tác vụ */
.tm-grid { display: flex; flex-direction: column; gap: 6px; }
.tm-row { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.tm-lbl { color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; border-radius: 4px; }
.tm-n { text-align: right; font-family: var(--f-mono); color: var(--tx-2); }

/* Cột chip của today-row: P-chip + task-chip nằm ngang, không phá grid 4 cột */
.today-row .t-chips { display: inline-flex; gap: 4px; align-items: center; min-width: 44px; }
.today-row { grid-template-columns: 28px minmax(44px, auto) 1fr auto; }

/* ============ Hàng đợi "Nhắc tôi" ============ */
.mention-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; margin-bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-3);
}
.mention-item .mi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-top: 5px; flex: 0 0 8px; }
.mention-item .mi-body { flex: 1; min-width: 0; }
.mention-item .mi-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mention-item .mi-cust { font-weight: 600; font-size: 14px; color: var(--ac); background: transparent; padding: 0; cursor: pointer; }
.mention-item .mi-cust:hover { text-decoration: underline; }
.mention-item .mi-meta { font-size: 12px; color: var(--tx-4); }
.mention-item .mi-note { font-size: 13.5px; color: var(--tx-2); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.mention-item .mi-done { flex: 0 0 auto; font-size: 12.5px; }

/* Form goal dùng chung: giữ nguyên token/màu của giao diện cũ, chỉ mở khi NV cần. */
.goal-reminder { margin-top: 7px; border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--bg-2); }
.goal-toggle { width: 100%; min-height: 38px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: var(--tx-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.goal-toggle small { color: var(--tx-4); font-size: 11.5px; font-weight: 400; }
.goal-toggle:hover { background: var(--bg-3); }
.goal-toggle:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.goal-panel { padding: 0 10px 10px; border-top: 1px solid var(--line-1); }
.goal-enable { min-height: 42px; display: flex; align-items: center; gap: 8px; color: var(--tx-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.goal-enable input, .goal-source input { accent-color: var(--ac); }
.goal-source { margin: 2px 0 8px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.goal-source legend { width: 100%; margin-bottom: 4px; color: var(--tx-4); font-size: 11.5px; }
.goal-source label { min-height: 36px; padding: 7px 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--bg-1); color: var(--tx-2); font-size: 12px; cursor: pointer; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.goal-grid label { display: grid; gap: 4px; min-width: 0; color: var(--tx-3); font-size: 11.5px; }
.goal-grid [hidden] { display: none; }
.goal-grid label span { color: var(--tx-4); font-size: 10.5px; }
.goal-grid input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-1); color: var(--tx-1); font: inherit; font-size: 12px; }
.goal-grid input:focus { outline: 2px solid var(--ac-dim); border-color: var(--ac); }
.goal-help { margin: 7px 0 0; color: var(--tx-4); font-size: 11.5px; line-height: 1.4; }

.mention-item.mi-goal { background: var(--bg-1); border-left: 3px solid var(--ac); }
.mention-item.mi-goal .mi-dot { background: var(--ac); }
.mi-goal-head { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--tx-3); font-size: 12px; }
.mi-goal-head strong { color: var(--tx-1); font-variant-numeric: tabular-nums; }
.mi-goal-head .danger { color: var(--danger); }
.mi-progress { height: 7px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--bg-3); }
.mi-progress i { display: block; height: 100%; border-radius: inherit; background: var(--ac); transition: width var(--dur-2); }
.mi-unavailable { margin: 7px 0 0; color: var(--warn); font-size: 11.5px; }
.mi-actions { margin-top: 10px; display: flex; align-items: flex-end; gap: 7px; flex-wrap: wrap; }
.mi-score-label { display: grid; gap: 3px; color: var(--tx-4); font-size: 11px; }
.mi-score { width: 86px; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-1); color: var(--tx-1); font: inherit; }
.mi-actions .btn { min-height: 36px; }
.mi-manual-done { margin-left: auto; }

/* Cột chat dock hẹp: nhãn NỘI BỘ đã có ở tab phía trên; nhường chỗ cho nút Lưu luôn bấm được. */
.chat-dock .reply-internal .rc-left { display: none; }
.chat-dock .reply-internal .rc-bottom { justify-content: flex-end; }

@media (max-width: 700px) {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-source label { flex: 1; min-width: 135px; }
  .mention-item { flex-wrap: wrap; }
  .mi-actions { align-items: stretch; }
  .mi-score-label, .mi-score { width: 100%; }
  .mi-actions .btn { min-height: 44px; flex: 1; }
  .mi-manual-done { margin-left: 0; }
}

/* ============ Màn Thống kê (học Thống kê Pancake) ============ */
.stat-hours { display: flex; align-items: flex-end; gap: 3px; padding: 8px 2px 0; }
.stat-hours .sh-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-hours .sh-bar { width: 100%; max-width: 18px; background: var(--ac); border-radius: 3px 3px 0 0; opacity: .85; }
.stat-hours .sh-lb { font-size: 11px; color: var(--tx-4); height: 12px; }
.stat-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-4); padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.stat-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line-1); color: var(--tx-2); font-variant-numeric: tabular-nums; }
.stat-tbl tr:hover td { background: var(--bg-2); }
.tt-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.tt-row .tt-rank { width: 18px; height: 18px; border-radius: 50%; background: var(--ac-dim); color: var(--ac); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tt-row .tt-nv { flex: 1; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Màn Sao lưu */
.bk-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-1); font-size: 13.5px; }
.bk-row:last-of-type { border-bottom: 0; }
.bk-row .bk-l { color: var(--tx-2); }
.bk-row .bk-v { color: var(--tx-1); white-space: nowrap; }

/* Bảng "Tiền đang gặp rủi ro" — thứ tự COO nên mở, xếp theo tiền chứ không theo nhãn AI */
.rk-list { border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; background: var(--bg-1); margin-bottom: var(--sp-5); }
.rk-row {
  display: grid; grid-template-columns: 26px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 8px 14px;
  border-bottom: 1px solid var(--line-1); cursor: pointer;
}
.rk-row:last-child { border-bottom: 0; }
.rk-row:hover { background: var(--bg-2); }
.rk-row:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
.rk-n { font-size: 12px; color: var(--tx-4); font-variant-numeric: tabular-nums; }
.rk-nm { font-size: 13.5px; color: var(--tx-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-why { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-v { font-size: 13px; color: var(--tx-2); font-variant-numeric: tabular-nums; text-align: right; }
.rk-deep { color: var(--vip); margin-left: 4px; vertical-align: -1px; }

/* ---------- Đăng nhập ---------- */
/* Trang này trước 04/08 có <style> riêng trong `login.blade.php`. Style đó CÓ dùng token nhưng tự
   định nghĩa lại .card/.input/button, nên nó trôi khác app mỗi lần components.css đổi — và hai
   màu bị viết cứng `#fff` thay vì `--on-ac`, tức nằm NGOÀI mọi phép đo tương phản.
   Giờ nút/ô nhập/khung dùng CHUNG lớp với app; ở đây chỉ còn thứ riêng của trang: canh giữa. */
.man-dang-nhap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  /* KHÔNG đặt background ở đây: `base.css` đã cho body nền --bg-0, còn `.card` là --bg-1, nên thẻ
     tự nổi lên đúng một bậc. Bản đầu của tôi đè thành --bg-1 -> thẻ TRÙNG màu nền, chìm nghỉm ở
     cả 7 theme. Đo bằng máy mới thấy (`the.backgroundColor === body.backgroundColor`), nhìn mắt
     tưởng vẫn ổn vì viền `.card` che được. */
}
.the-dang-nhap { width: 340px; box-shadow: var(--sh-3); }

.dn-hieu { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.dn-hieu b { font-size: 15px; }
.dn-hieu small { display: block; color: var(--tx-3); font-size: 11px; }
.dn-logo {
  width: 34px; height: 34px; border-radius: var(--r-3);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ac), var(--info));
  /* --on-ac chứ KHÔNG phải #fff: theme tối dùng chữ SẪM trên nền nhấn sáng. Viết cứng #fff là
     trắng-trên-sáng ở 2/7 theme, và không phép đo nào bắt được vì màu cứng không phải token. */
  color: var(--on-ac);
}

.dn-nhan { display: block; font-size: 12px; color: var(--tx-3); margin: var(--sp-3) 0 5px; }
.dn-o { width: 100%; padding: 9px 11px; font-size: 13px; }

.dn-ghinho { display: flex; align-items: center; gap: 6px; margin: var(--sp-3) 0; font-size: 12px; color: var(--tx-3); }
.dn-ghinho label { margin: 0; }

.dn-nut { width: 100%; margin-top: 8px; justify-content: center; padding: 10px; font-weight: 600; }

.dn-loi {
  background: var(--danger-dim); color: var(--danger);
  font-size: 12px; padding: 8px 10px; border-radius: var(--r-2); margin-bottom: 4px;
}

/* ---------- Xuất CSV (màn Khách hàng) ---------- */
.xuat-nhom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.xuat-nhom .lbl { font-size: 12px; color: var(--tx-3); }
.xuat-nhom .xuat-ngay { padding: 4px 8px; font-size: 12px; width: 132px; }
/* `display:flex` đè `hidden`. Đã dính lỗi này hai lần với #soan và #mau — ghi rõ để lần ba
   không lặp lại. */
.xuat-nhom[hidden] { display: none; }