/* ============ Components ============ */
/* Work card */
.work-card { border-left: 4px solid var(--line); }
.work-card.prio-critical { border-left-color: var(--danger); }
.work-card.prio-overdue { border-left-color: var(--warn); }
.work-card.prio-need-approval { border-left-color: #7a5cff; }
.work-card.prio-today { border-left-color: var(--info); }
.work-card.prio-upcoming { border-left-color: var(--brand-soft); }
.work-id { color: var(--ink-soft); font-size: 12px; margin-right: 6px; }
.work-fields { display: grid; grid-template-columns: 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.work-fields > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.work-fields dt { color: var(--ink-soft); font-size: 12px; }
.work-fields dd { margin: 0; }
.next-action { font-weight: 600; color: var(--brand); }

/* Alerts */
.alert-card { border-left: 4px solid var(--line); }
.alert-card.level-critical { border-left-color: var(--danger); }
.alert-card.level-warning { border-left-color: var(--warn); }
.alert-card.level-info { border-left-color: var(--info); }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-top: 6px; flex: 0 0 auto; }
.level-critical .alert-dot { background: var(--danger); }
.level-warning .alert-dot { background: var(--warn); }
.level-info .alert-dot { background: var(--info); }

/* Approvals */
.approval-meta { display: flex; gap: 16px; font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; flex-wrap: wrap; }
.approval-actions { display: flex; gap: 8px; }

/* KPI */
.kpi-name { font-weight: 650; font-size: 13px; }
.kpi-value-row { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; }
.kpi-current { font-size: 22px; font-weight: 750; }
.kpi-target { font-size: 12px; color: var(--ink-soft); }
.kpi-meta { font-size: 11px; color: var(--ink-soft); }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 5px; flex: 0 0 auto; }
.feed-text { font-size: 13px; }
.feed-time { font-size: 11px; color: var(--ink-soft); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-send { border-radius: 0 8px 8px 0; }

/* Tabs */
.tab-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
}
.tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.empty { color: var(--ink-soft); font-size: 13px; padding: 8px 0; }

/* Chat */
.chat-view { display: flex; flex-direction: column; }
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 130px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-mock-note { font-size: 11px; color: var(--warn); }
.chat-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-message { display: flex; gap: 10px; }
.chat-message.from-user { flex-direction: row-reverse; }
.chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.from-user .chat-avatar { background: var(--brand); color: #fff; }
.from-system .chat-avatar { background: #e8eaed; color: var(--ink-soft); }
.chat-bubble { max-width: 78%; }
.chat-sender { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.from-user .chat-bubble { text-align: right; }
.chat-text { background: var(--brand); color: #fff; padding: 9px 13px; border-radius: 12px 12px 2px 12px; display: inline-block; margin: 0; }
.from-system .chat-text { background: #f1f3f4; color: var(--ink); border-radius: 2px 12px 12px 12px; }
.response-group { display: flex; flex-direction: column; gap: 10px; }
.response-group p { margin: 0 0 2px; font-size: 13px; }
.type-tag { margin-top: 6px; font-size: 10px; color: var(--ink-soft); letter-spacing: .05em; }
.text-response { background: #f1f3f4; padding: 9px 13px; border-radius: 2px 12px 12px 12px; margin: 0; font-size: 13px; }
.response-sources { font-size: 11px; color: var(--ink-soft); padding: 0 13px; line-height: 1.5; }
.response-sources-nhan { font-weight: 600; }
.chat-trace { padding: 8px 16px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--ink-soft); letter-spacing: .02em; }
.chat-form { display: flex; border-top: 1px solid var(--line); }
.chat-input { flex: 1; border: 0; padding: 14px 16px; font-size: 14px; outline: none; }
.confirm-buttons { display: flex; gap: 8px; }

/* Owner desk */
.owner-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat-label { font-size: 12px; color: var(--ink-soft); }
.stat-value { font-size: 20px; font-weight: 750; margin: 2px 0; }
.stat-trend { font-size: 12px; color: var(--ok); }
.owner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.risk-li { color: var(--danger); }

/* Setup workspace */
.setup-workspace { display: flex; flex-direction: column; gap: 18px; }
.setup-progress { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.setup-progress-head { display: flex; justify-content: space-between; align-items: center; }
.progress-pct { font-weight: 750; font-size: 18px; color: var(--brand); }
.progress-bar { height: 8px; background: #ececec; border-radius: 999px; margin: 10px 0 14px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.setup-step { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; background: #fafafa; }
.setup-step.current { border-color: var(--brand); background: var(--brand-soft); }
.step-no { font-weight: 750; color: var(--brand); }
.step-label { flex: 1; }
.setup-step-page { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.step-hint { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.form-field input, .form-field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.form-note { font-size: 11px; color: var(--warn); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.goal-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.goal-value { font-weight: 650; margin: 4px 0; }
.goal-target { font-size: 12px; color: var(--ink-soft); }
.framework-list { display: flex; flex-direction: column; gap: 8px; }
.framework-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.framework-key { color: var(--ink-soft); font-size: 11px; }
.framework-rename { margin-left: auto; font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; width: 180px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.table th { background: #fafafa; font-size: 12px; color: var(--ink-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; background: #fff; }
.chip-row .chip { background: #fafafa; }
.classify-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); cursor: default; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.data-asset .card-title { margin-bottom: 6px; }
.asset-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.intake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.intake-btn { justify-content: center; padding: 14px; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-icon { font-size: 26px; }
.dropzone-title { font-weight: 650; margin: 6px 0 2px; }
.dropzone-types { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }

/* Wizard */
.wizard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.wizard-phases { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.phase-tab { padding: 8px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fafafa; font-size: 12px; font-weight: 650; cursor: pointer; color: var(--ink-soft); }
.phase-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.wizard-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.gate-card { border-left: 4px solid var(--brand); }
.gate-no { font-weight: 750; color: var(--brand); font-size: 12px; }
.gate-question { font-size: 13px; margin: 4px 0 0; color: var(--ink-soft); }
.placeholder-block { padding: 30px; text-align: center; color: var(--ink-soft); }
.ai-asset-card p { font-size: 13px; color: var(--ink-soft); margin: 4px 0 8px; }

/* ============ One-page: communication zone (mục 07-10) ============ */
.comm-zone { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ctx-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); min-height: 34px; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft);
  color: var(--brand); border: 1px solid #c6cdf5; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.ctx-clear { border: 0; background: transparent; color: var(--brand); font-size: 14px; cursor: pointer; padding: 0 2px; }
.ctx-hint { font-size: 11px; color: var(--ink-soft); }
.chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-message { display: flex; gap: 8px; }
.chat-message.from-user { flex-direction: row-reverse; }
.chat-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.from-user .chat-avatar { background: var(--brand); color: #fff; }
.from-system .chat-avatar { background: #e8eaed; color: var(--ink-soft); }
.chat-bubble { max-width: 84%; min-width: 0; }
.chat-sender { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.from-user .chat-bubble { text-align: right; }
.chat-text { background: var(--brand); color: #fff; padding: 8px 12px; border-radius: 12px 12px 2px 12px; display: inline-block; margin: 0; font-size: 13px; }
.from-system .chat-text { background: #f1f3f4; color: var(--ink); border-radius: 2px 12px 12px 12px; }
.response-group { display: flex; flex-direction: column; gap: 8px; }
.response-group p { margin: 0 0 2px; font-size: 13px; }
.type-tag { margin-top: 4px; font-size: 10px; color: var(--ink-soft); letter-spacing: .05em; }
.text-response { background: #f1f3f4; padding: 8px 12px; border-radius: 2px 12px 12px 12px; margin: 0; font-size: 13px; }
.response-sources { font-size: 11px; color: var(--ink-soft); padding: 0 12px; line-height: 1.5; }
.response-sources-nhan { font-weight: 600; }
.chat-trace { padding: 6px 14px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--ink-soft); letter-spacing: .02em; }
.chat-form { display: flex; border-top: 1px solid var(--line); }
.chat-input { flex: 1; border: 0; padding: 12px 14px; font-size: 14px; outline: none; min-width: 0; }
.btn-send { border-radius: 0; }
.confirm-buttons { display: flex; gap: 8px; }
.chat-mock-note { font-size: 11px; color: var(--warn); }

/* Context action buttons (mục 09) */
.card-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.btn-context {
  font-size: 11px; padding: 5px 10px; border-radius: 999px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #c6cdf5; cursor: pointer;
}
.btn-context:hover { background: var(--brand); color: #fff; }

/* Payment / customer cards */
.payment-card .kpi-value-row { margin-top: 4px; }
.customer-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* Phase 7: Business Builder */
.bb-intake { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.form-input, .form-textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.form-textarea { resize: vertical; }
.bb-result { background: var(--brand-soft); border: 1px solid #c6cdf5; border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.bb-step { padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin: 4px 0; font-size: 13px; }
.bb-list { display: flex; flex-direction: column; gap: 6px; }
.bb-process-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Phase 5: Connector setup */
.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.connector-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.connector-card.status-connected { border-left: 4px solid var(--ok); }
.connector-card.status-configured { border-left: 4px solid var(--info); }
.connector-card.status-not-configured { border-left: 4px solid var(--line); }
.connector-card.status-degraded, .connector-card.status-failed { border-left: 4px solid var(--warn); }
.connector-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.connector-name { font-weight: 650; font-size: 13px; }
.connector-code { font-size: 11px; color: var(--ink-soft); }
.connector-meta { font-size: 11px; color: var(--ink-soft); margin: 6px 0; }
.connector-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.connector-caps .chip { font-size: 10px; padding: 2px 6px; }
.connector-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Phase 6 — AI Automation & Reports */
.btn-ok { background: #1a7f37; color: #fff; border-color: #1a7f37; }
.btn-danger { background: #cf222e; color: #fff; border-color: #cf222e; }
.run-card { display: flex; flex-direction: column; gap: 6px; }
.run-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.run-meta { color: var(--muted, #667); font-size: 12px; margin: 0; }
.run-steps { font-size: 12px; color: #334; margin: 0; }
.status-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef; }
.status-chip.approval_required { background: #fff3cd; }
.status-chip.completed { background: #d4edda; }
.status-chip.failed { background: #f8d7da; }
.status-chip.partial { background: #fff3cd; }
.status-chip.rejected { background: #f8d7da; }
.step-actions { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.step-act { display: inline-flex; align-items: center; gap: 4px; }
.row-actions { display: flex; gap: 8px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay-box { background: #fff; border-radius: 12px; padding: 20px; max-width: 640px; width: 90%; max-height: 80vh; overflow: auto; }
.report-content { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.6; }

/* Phase 9 — CEO Control Tower */
.health-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.health-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f4f4f8; border: 1px solid #ddd; cursor: help; }
.issue-card { gap: 4px; }
.executive-section h4 { margin: 10px 0 6px; }
/* ============================================================
   LOGIN — SBH Tailor branding (cân giữa · tối ưu mobile)
   Đỏ chủ đạo #D12132 · Cam nhấn #FF4136 · Indigo phụ #2E3192
   ============================================================ */
.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f3 48%, #f3f2fb 100%);
  overflow: hidden;
}
.login-bg {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  pointer-events: none;
}
.login-bg--1 { width: 430px; height: 430px; background: #D12132; top: -130px; right: -110px; }
.login-bg--2 { width: 390px; height: 390px; background: #2E3192; bottom: -150px; left: -100px; }

.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(45, 22, 28, 0.16);
  overflow: hidden;
}
.login-card::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #D12132 0%, #FF4136 52%, #2E3192 100%);
}

/* ---- Thương hiệu: logo CÂN GIỮA ---- */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px 24px 16px;
}
.login-brand__badge {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #D12132 0%, #FF4136 55%, #2E3192 145%);
  box-shadow: 0 10px 24px rgba(209, 33, 50, 0.35);
  margin: 0 auto;
}
.login-brand h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #2E3192;
  letter-spacing: 0.3px;
}
.login-sub {
  margin: 2px 0 0;
  font-size: 19px;
  color: #8a8284;
}

/* ---- Panel đăng nhập ---- */
.login-panel {
  padding: 10px 30px 32px;
}
.login-heading {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #D12132;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.login-input {
  height: 54px;
  padding: 0 18px;
  border: 1.5px solid #e5dcde;
  border-radius: 12px;
  font-size: 17px;
  color: #333333;
  background: #fcfafa;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.login-input:focus {
  border-color: #D12132;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(209, 33, 50, 0.12);
}
.login-input::placeholder { color: #b5a8ab; }

.btn-login {
  width: 100%;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #D12132 0%, #FF4136 100%);
  color: #28288C;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 8px 20px rgba(209, 33, 50, 0.30);
}
.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(209, 33, 50, 0.40);
}
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: 0.6; cursor: wait; transform: none; }

.login-error {
  color: #D12132;
  font-size: 13px;
  margin: 0;
  line-height: 1.45;
  text-align: center;
}
.login-hint {
  font-size: 13.5px;
  color: #9a9294;
  line-height: 1.55;
  margin: 10px 0 0;
  text-align: center;
}

.login-logo {
  max-width: 190px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}
/* ============================================================
   MOBILE — tối ưu màn hình nhỏ (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .login-page {
    padding: 10px;
    align-items: center;
  }
  .login-card {
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(45, 22, 28, 0.14);
  }
  .login-brand {
    padding: 26px 20px 12px;
    gap: 8px;
  }
  .login-brand__badge {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(209, 33, 50, 0.3);
  }
  .login-brand h1 { font-size: 23px; }
  .login-sub { font-size: 17px; }
  .login-panel { padding: 8px 20px 26px; }
  .login-logo { max-width: 150px; }
  .login-heading { margin-bottom: 14px; letter-spacing: 2.5px; }
  .login-form { gap: 11px; }
  .login-input { height: 52px; font-size: 16px; }
  .btn-login { height: 54px; font-size: 16px; }
}
/* ============================================================
   SBH THEME — toàn bộ trang sau đăng nhập
   Đỏ #D12132 · Cam #FF4136 · Indigo #2E3192 (khớp cổng đăng nhập)
   ============================================================ */
:root {
  --brand-2: #FF4136;
  --brand-indigo: #2E3192;
  --brand-soft: #fdecee;
  --brand-indigo-soft: #f0f0fb;
  --bg: #faf8f8;
}

/* ---------- Header (context-header) ---------- */
.context-header {
  background: #ffffff;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #D12132 0%, #FF4136 50%, #2E3192 100%) 1;
  box-shadow: 0 2px 10px rgba(45, 22, 28, 0.06);
}
.ch-logo {
  background: linear-gradient(135deg, #D12132 0%, #FF4136 55%, #2E3192 145%) !important;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(209, 33, 50, 0.3);
}
.ch-name { color: #2E3192; }
.btn-setup { background: linear-gradient(135deg, #D12132, #FF4136); border-color: transparent; }
.ch-icon-btn { border-radius: 8px; }
.ch-icon-btn:hover { border-color: #D12132; color: #D12132; }
.user-avatar-sm { background: linear-gradient(135deg, #D12132, #2E3192); }

/* ---------- Zone / section titles ---------- */
.zone-head h2 {
  color: #D12132;
  padding-left: 10px;
  border-left: 4px solid #D12132;
  letter-spacing: .03em;
}

/* [31/08/2026 — phiên 33] Gỡ tiêu đề COWORK xong thì .zone-head của khung chat rỗng.
   Trên MÁY TÍNH nó chỉ còn là khoảng trống thừa → cho co lại hết. Bọc trong min-width
   1024px để KHÔNG đụng tay nắm ngăn kéo mobile (@media max-width 1023px, dòng ~1492).
   Chế độ demo vẫn có nhãn CHƯA KẾT NỐI nên :empty không khớp — nhãn đó vẫn hiện. */
@media (min-width: 1024px) {
  .comm-zone .zone-head:empty { margin: 0; padding: 0; min-height: 0; }
}
.section-title { color: #2E3192; font-weight: 700; }
.zone-sub { color: #8a8284; }

/* ---------- Nút ---------- */
.btn {
  border-radius: 10px;
  border: 1.5px solid #e5dcde;
}
.btn:hover { border-color: #D12132; color: #D12132; }
.btn-primary {
  background: linear-gradient(135deg, #D12132 0%, #FF4136 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(209, 33, 50, 0.25);
}
.btn-primary:hover { color: #fff; box-shadow: 0 6px 16px rgba(209, 33, 50, 0.35); transform: translateY(-1px); }
.btn-context { background: var(--brand-soft); color: #D12132; border-color: #f2c4c9; }
.btn-context:hover { background: linear-gradient(135deg, #D12132, #FF4136); color: #fff; border-color: transparent; }
.btn-send { background: linear-gradient(135deg, #D12132, #FF4136); border-color: transparent; color: #fff; }

/* ---------- Tabs ---------- */
.tab { border-radius: 999px; }
.tab.active {
  background: linear-gradient(135deg, #D12132, #FF4136);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(209, 33, 50, 0.25);
}

/* ---------- Thẻ (card) ---------- */
.card {
  background: #fff;
  border: 1px solid #eee4e6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(45, 22, 28, 0.05);
  transition: transform .15s, box-shadow .2s;
}
.card:hover { box-shadow: 0 6px 18px rgba(45, 22, 28, 0.10); transform: translateY(-1px); }
.work-card.prio-high { border-left: 4px solid #D12132; }
.work-card.prio-medium { border-left: 4px solid #FF4136; }
.work-card.prio-low { border-left: 4px solid #2E3192; }

/* ---------- Badge chủ ---------- */
.badge-owner { background: linear-gradient(135deg, #D12132, #FF4136); border-color: transparent; }

/* ---------- Chat ---------- */
.chat-panel { border-radius: 14px; }
.chat-head { border-bottom: 2px solid #f0e3e5; }
.chat-head h2 { color: #D12132; }
.from-user .chat-avatar { background: linear-gradient(135deg, #D12132, #FF4136); }
.from-system .chat-avatar { background: linear-gradient(135deg, #2E3192, #4b50c9); color: #fff; }
.chat-message.from-user .chat-bubble {
  background: #fdecee;
  border: 1px solid #f5d3d7;
  border-radius: 12px 12px 4px 12px;
  padding: 8px 12px;
}
.chat-message.from-system .chat-bubble {
  background: #f4f4fc;
  border: 1px solid #e0e0f5;
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
}
.chat-input {
  border: 1.5px solid #e5dcde;
  border-radius: 10px 0 0 10px;
}
.chat-input:focus { border-color: #D12132; box-shadow: 0 0 0 3px rgba(209, 33, 50, 0.10); }

/* ---------- Bảng ---------- */
table { border-radius: 10px; overflow: hidden; }
tbody tr:hover { background: #fdf3f4; }

/* ---------- Liên kết / highlight ---------- */
a { color: #D12132; }
mark, .hl { background: #fdecee; color: #D12132; }
.status-chip.completed { background: #e6f4ea; color: #1e7d43; }
.status-chip.partial { background: #fff4e0; color: #9a6b00; }

/* ---------- Thanh cuộn ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #e0c9cc; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #D12132; }

/* ---------- Input ---------- */
input, select, textarea {
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  border-color: #D12132 !important;
  box-shadow: 0 0 0 3px rgba(209, 33, 50, 0.10) !important;
}

/* ---------- KPI / WIG ---------- */
.pilot-wig { color: #2E3192; font-weight: 700; }
.summary-stat .value { color: #D12132; }
/* ============================================================
   SBH INNER DESIGN — các trang nội dung sau đăng nhập
   ============================================================ */

/* (Đợt 1 - 30/08: bố cục tổng + section headers chuyển hết về layout.css — nơi duy nhất giữ bố cục) */
.zone-sub { font-size: 12.5px; }
.section-title { font-size: 14px; margin: 18px 0 10px; letter-spacing: .02em; }

/* ---------- Thống kê (WIG) ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 6px;
}
.stat {
  background: #fff;
  border: 1px solid #eee4e6;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(45, 22, 28, 0.05);
  text-align: center;
}
.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #D12132;
  line-height: 1.15;
}
.stat-label { font-size: 12.5px; color: #8a8284; margin-top: 2px; }
.stat-trend { font-size: 11px; color: #b5a8ab; }

/* ---------- Card grid ---------- */
.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.card {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(45, 22, 28, 0.06);
  border: 1px solid #eee4e6;
}
.card-head { padding: 12px 14px 6px; }
.card-title { font-weight: 700; font-size: 13.5px; color: #2E3192; }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card-foot { padding: 0 14px 12px; }

/* ---------- Work cards ---------- */
.work-card { position: relative; overflow: hidden; }
.work-card.prio-critical,
.work-card.prio-overdue { border-left: 5px solid #D12132; }
.work-card.prio-today { border-left: 5px solid #FF4136; }
.work-card.prio-upcoming { border-left: 5px solid #2E3192; }
.work-card.prio-need_approval { border-left: 5px solid #FFB100; }
.work-card .work-id { color: #b5a8ab; font-size: 11px; font-weight: 700; }
.work-card .next-action {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fdecee;
  color: #D12132;
  font-size: 11.5px;
  font-weight: 600;
}
.work-fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 0; }
.work-fields dt { color: #b5a8ab; font-size: 11px; }
.work-fields dd { margin: 0; font-size: 12.5px; color: #4a4244; }

/* ---------- KPI ---------- */
.kpi-grid { gap: 12px; }
.kpi-card { text-align: left; }
.kpi-name { font-size: 12.5px; color: #8a8284; font-weight: 600; }
.kpi-current { font-size: 26px; font-weight: 800; color: #D12132; }
.kpi-target { font-size: 12px; color: #b5a8ab; }
.kpi-meta { font-size: 11px; color: #b5a8ab; }
.kpi-card::after {
  content: '';
  display: block;
  height: 4px;
  border-radius: 99px;
  margin-top: 8px;
  background: linear-gradient(90deg, #D12132 0%, #FF4136 60%, #f0dfe1 60%);
}

/* ---------- Cảnh báo / quyết định ---------- */
.alert-card.level-critical { border-left: 5px solid #D12132; background: #fffafa; }
.alert-card.level-warning { border-left: 5px solid #FFB100; background: #fffdf7; }
.alert-card.level-info { border-left: 5px solid #2E3192; background: #fafaff; }
.approval-card { border-left: 5px solid #FF4136; }
.issue-card { border-left: 5px solid #2E3192; }
.decision-card { border-left: 5px solid #FFB100; }

/* ---------- Health ---------- */
.health-row { gap: 8px; }
.health-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #eee4e6;
  background: #fff;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(45, 22, 28, 0.05);
}

/* ---------- Báo cáo / automation ---------- */
.run-steps { color: #6a6163; }

/* ---------- Trống ---------- */
.empty {
  border: 1.5px dashed #e5dcde;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: #b5a8ab;
  background: #fff;
  font-size: 13px;
}

/* ---------- Chat zone ---------- */
.comm-zone { background: #ffffff; }
.chat-panel { border-radius: 16px; box-shadow: 0 2px 10px rgba(45,22,28,.06); }
.chat-list { padding: 18px 16px; }

/* ---------- Owner cols ---------- */
.owner-cols { grid-template-columns: 1fr 1fr; gap: 16px; }
.owner-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

/* ============================================================
   MOBILE / TABLET
   ============================================================ */
@media (max-width: 820px) {
  .stats-row { gap: 8px; }
  .summary-stat { padding: 10px 8px; }
  .summary-stat .value { font-size: 22px; }
  .card-grid { grid-template-columns: 1fr; gap: 10px; }
  .owner-cols { grid-template-columns: 1fr; }
  .owner-grid { grid-template-columns: 1fr; }
  .zone-head h2 { font-size: 15px; }
  .health-row { gap: 6px; }
  .health-chip { padding: 4px 9px; font-size: 11.5px; }
  .kpi-current { font-size: 22px; }
}

/* ---------- Tư duy dẫn dắt: slogan ---------- */
/* [DỌN 31/08/2026 — phiên 33] Đời 2 của CSS đầu trang: .ch-focus có hộp nền gradient,
   .ch-motto căn giữa. Đã gỡ — khối chuẩn duy nhất nằm ở CUỐI file, tìm "ĐẦU TRANG — KHỐI
   CHUẨN DUY NHẤT". Giữ .context-header vì đường viền dưới vẫn dùng. */
.context-header { border-bottom: 2px solid #D12132; }
.login-motto {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: #28288C;
  letter-spacing: 1px;
  text-align: center;
}
@media (max-width: 640px) {
  .login-motto { font-size: 15px; }
}

/* ---------- Nhớ mật khẩu ---------- */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #444;
  user-select: none;
  padding: 6px 2px;
}
.login-remember-input {
  width: 22px;
  height: 22px;
  accent-color: #D12132;
  cursor: pointer;
  flex: none;
}
@media (max-width: 640px) {
  .login-remember { font-size: 15px; }
}

/* ---------- Fix mobile: thẻ thống kê không tràn ngang ---------- */
@media (max-width: 820px) {
  .stats-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
  }
  .stat { min-width: 0; }
}

/* ---------- Fix mobile: số liệu không tràn ô ---------- */
@media (max-width: 820px) {
  .stat-value { font-size: 19px; letter-spacing: -0.3px; }
  .stat-value, .stat-label, .stat-trend { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- Quên mật khẩu ---------- */
.login-forgot {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #2E3192;
  text-decoration: underline;
  cursor: pointer;
}
.login-forgot:hover { color: #D12132; }
.login-forgot-wrap {
  text-align: center;
}
.login-forgot-title {
  font-size: 16px;
  font-weight: 800;
  color: #28288C;
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.login-forgot-note {
  font-size: 13.5px;
  color: #666;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* ---------- ADMIN PANEL — quản trị toàn quyền trong ô chat ---------- */
.admin-panel {
  margin: 8px 12px 4px;
  border: 2px solid #2E3192;
  border-radius: 14px;
  background: linear-gradient(180deg, #f2f2fb, #fafafd);
  padding: 10px 12px;
}
.admin-head {
  font-size: 13px;
  font-weight: 800;
  color: #2E3192;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.admin-stats {
  font-size: 12px;
  color: #444;
  margin-bottom: 8px;
  line-height: 1.5;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-btn {
  font-size: 12px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #2E3192;
  color: #2E3192;
  border-radius: 8px;
  cursor: pointer;
}
.admin-btn:hover { background: #2E3192; color: #fff; }

/* (Đợt 1 - 30/08: các đời bố cục "chat cao"/"chạm đáy"/"tablet ép thắng" gom hết về layout.css
   khối .page-desk — components.css KHÔNG còn được định nghĩa bố cục trang.) */
.chat-list { flex: 1 1 auto; min-height: 0; }
.chat-form { flex: 0 0 auto; }

/* [DỌN 31/08/2026 — phiên 33] Đời 3 ("Header gọn lại để ô chat cao thêm") đã gỡ.
   Kích thước chữ + khoảng đệm nay khai một lần ở khối chuẩn cuối file. */

/* ---------- Ô chat kiểu DeepSeek: textarea nhiều dòng ---------- */
.chat-input {
  resize: none;
  overflow-y: auto;
  line-height: 1.45;
  max-height: 140px;
  font-family: inherit;
}
.chat-form { align-items: flex-end; }
.btn-send { align-self: stretch; min-width: 64px; }
.chat-trace { order: 10; }

/* ---------- Ô ngữ cảnh nhỏ gọn lại ---------- */
.ctx-bar {
  padding: 3px 10px !important;
  min-height: 24px !important;
  gap: 6px;
}
.ctx-hint { font-size: 10px !important; }
.ctx-chip {
  font-size: 10.5px !important;
  padding: 1px 8px !important;
  gap: 4px;
}
.ctx-clear { font-size: 12px !important; }

/* ---------- Logo ảnh SBH trong header các trang ---------- */
.ch-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px;
  background: #fff !important;
  object-fit: contain;
  padding: 3px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(45, 22, 28, 0.12);
}
@media (max-width: 640px) {
  .ch-logo { width: 38px !important; height: 38px !important; }
}

/* ---------- Đầu trang: 3 vùng đều (thương hiệu | người dùng | nút) ----------
   [DỌN 31/08/2026] .ch-row của đời này đã gộp vào khối chuẩn cuối file. */
.ch-brand   { flex: 1 1 0; min-width: 0; }
.ch-identity { flex: 1 1 0; justify-content: center; min-width: 0; }
.ch-actions  { flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.ch-brand-text { display: flex; flex-direction: column; min-width: 0; }
.ch-name { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub  { font-size: 12px; color: #8a8284; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-user { min-width: 0; }
.ch-user-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-user-role { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tenant { display: none; }

@media (max-width: 640px) {
  .ch-row { gap: 8px 10px; padding: 6px 12px 2px; }
  .ch-brand { flex: 1 1 auto; }
  .ch-actions { flex: 0 0 auto; }
  .ch-identity { order: 3; flex: 1 1 100%; justify-content: center; padding-top: 2px; }
  .ch-name { font-size: 15px; }
  .ch-sub { font-size: 11px; }
  .ch-user-name { font-size: 12.5px; }
}

/* ===== CỬA VẬN HÀNH — Today (GĐ1 28/08/2026, mission mục 10: number/status/priority/action) ===== */
.today-page { max-width: 760px; margin: 0 auto; padding: 12px 12px 48px; }
.today-head h2 { margin: 8px 0 2px; font-size: 22px; letter-spacing: .01em; }
.today-sub { color: #667; font-size: 13px; margin: 0 0 12px; }
.today-loading, .today-empty { padding: 24px 8px; color: #556; }
.today-wig { margin: 4px 0 14px; }
.wig-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.wig-card { flex: 1 0 240px; border: 1px solid #dcd6d0; border-radius: 10px; padding: 10px 12px; background: #fff; }
.wig-card.light-red { border-color: #e08585; background: #fdf3f3; }
.wig-card.light-yellow { border-color: #dcbf82; background: #fdf9ef; }
.wig-card.light-green { border-color: #96c7ab; background: #f2faf6; }
.wig-name { margin: 0; font-weight: 600; font-size: 13.5px; }
.wig-num { margin: 4px 0 2px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wig-sub { margin: 0; font-size: 12px; color: #667; }
.guard-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.guard-chip { font-size: 11.5px; border: 1px solid #ddd; border-radius: 99px; padding: 2px 9px; background: #fff; }
.guard-chip.guard-no_source { color: #889; border-style: dashed; }
.guard-chip.guard-breach { color: #b3474f; border-color: #e08585; background: #fdf3f3; }
.today-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
@media (min-width: 640px) { .today-counts { grid-template-columns: repeat(6, 1fr); } }
.today-count { border: 1px solid #e2ddd7; border-radius: 10px; padding: 8px 6px; text-align: center; background: #fff; }
.today-count b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.today-count span { font-size: 10.5px; color: #667; letter-spacing: .02em; }
.today-count.c-red b { color: #c22f3d; } .today-count.c-yellow b { color: #a96f14; }
.today-count.c-green b { color: #1b7f4d; } .today-count.c-gray b { color: #556; }
.today-bucket { margin: 0 0 16px; }
.bucket-title { font-size: 13px; letter-spacing: .05em; margin: 0 0 8px; color: #445; }
.bucket-title.bt-overdue, .bucket-title.bt-critical { color: #c22f3d; }
.bucket-title.bt-blocked, .bucket-title.bt-due_today { color: #a96f14; }
.bucket-title.bt-completed_today { color: #1b7f4d; }
.bucket-list { display: flex; flex-direction: column; gap: 8px; }
.bucket-empty { color: #778; font-size: 13px; }
.today-card { border: 1px solid #e2ddd7; border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: #fff; }
.today-card.p-overdue, .today-card.p-customer_risk, .today-card.p-delivery_risk { border-left-color: #c22f3d; }
.today-card.p-blocked, .today-card.p-due_today { border-left-color: #d99a3d; }
.today-card.p-wig_impact { border-left-color: #7a5fbe; }
.today-card.p-normal { border-left-color: #b9c2bd; }
.today-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.today-pill { font-size: 10px; letter-spacing: .06em; border-radius: 99px; padding: 2px 8px; background: #eee; color: #445; white-space: nowrap; }
.today-pill.pill-overdue, .today-pill.pill-customer_risk, .today-pill.pill-delivery_risk { background: #fbe9ea; color: #b3232f; }
.today-pill.pill-blocked, .today-pill.pill-due_today { background: #fbf1dc; color: #96660f; }
.today-pill.pill-wig_impact { background: #efe9fb; color: #5d47a0; }
.today-reason { margin: 6px 0 2px; font-size: 13.5px; }
.today-meta { margin: 2px 0; font-size: 12px; color: #667; }
.today-blocker { margin: 4px 0 0; font-size: 12.5px; color: #b3232f; }
.today-cta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.today-cm { border-top: 2px solid #e2ddd7; padding-top: 12px; margin-top: 20px; }
.today-cm h3 { font-size: 13px; letter-spacing: .04em; color: #445; margin: 0 0 8px; }
.cm-item { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 6px 0; font-size: 13.5px; border-bottom: 1px dashed #e8e3dd; }
.cm-item.cm-missed { color: #99515a; }
.cm-actions { display: flex; gap: 4px; }
.cm-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-select, .cm-input { border: 1px solid #ccc6bf; border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.cm-input { flex: 1 1 220px; }

/* ===== CỬA SỔ TÀI CHÍNH (29/08/2026) — thẻ chỉ hiện con số, bấm vào bung bảng ===== */
.fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.fin-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; text-align: left;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 10px;
  font: inherit; color: inherit; cursor: default;
}
.fin-tile-click { cursor: pointer; }
.fin-tile-click:hover { border-color: #D12132; box-shadow: 0 2px 10px rgba(209,33,50,.10); }
.fin-tile-click:focus-visible { outline: 2px solid #D12132; outline-offset: 2px; }
.fin-tile-empty { background: #f7f8fa; border-style: dashed; }
.fin-tile-label { font-size: 12.5px; color: #667085; }
.fin-tile-value {
  font-size: 20px; font-weight: 700; line-height: 1.2; color: #16233a;
  font-variant-numeric: tabular-nums;
}
.fin-tile-empty .fin-tile-value { color: #98a2b3; }
.fin-tile-sub { font-size: 11.5px; color: #98a2b3; }
/* Số chưa chắc phải nhìn ra ngay, không giấu trong tooltip (điện thoại không rê chuột được) */
.fin-tile-warn { color: #b45309; font-weight: 600; }
.fin-tile-click .fin-tile-sub::after { content: ' ›'; color: #D12132; font-weight: 700; }
/* Màn hình phân loại chủ nợ — nhập phần cho vay, phần còn lại tự tính */
.cn-input { width: 130px; padding: 5px 8px; border: 1px solid #cfd6e0; border-radius: 6px; font-size: 13px; text-align: right; }
.cn-input:focus { outline: 2px solid #1a1c63; outline-offset: 1px; }
.cn-loi { color: #D12132; font-weight: 600; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.overlay-wide { max-width: min(940px, 94vw); width: 100%; }
.fin-table-wrap { max-height: 60vh; overflow: auto; border: 1px solid #e3e7ee; border-radius: 8px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th, .fin-table td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; text-align: left; }
.fin-table th { position: sticky; top: 0; background: #f7f8fa; font-weight: 600; color: #475467; z-index: 1; }
.fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table tbody tr:hover { background: #fbfcfe; }
@media (max-width: 600px) {
  .fin-grid { grid-template-columns: repeat(2, 1fr); }
  .fin-tile-value { font-size: 17px; }
}

/* ===== Avatar Kathy = logo SBH (29/08/2026, anh Tiền) — thay chữ "AI" tròn xanh tím =====
   Đặt cuối file để đè cả khai báo .chat-avatar ở khối desktop lẫn khối responsive phía trên. */
.from-system .chat-avatar { background: #fff; border: 1px solid var(--line); padding: 3px; overflow: hidden; }
.chat-avatar-logo { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===== Kathy ngay trên màn "HÔM NAY TÔI CẦN LÀM GÌ?" (29/08/2026, anh Tiền) =====
   Mission: TODAY COMMAND → MY 4DX → ROLE OPERATIONS → KATHY RECOMMENDATION.
   Desktop rộng: việc bên trái, Kathy cột phải dính theo màn (hỏi mà không mất chỗ đang đọc).
   Hẹp/điện thoại: xếp dọc, Kathy xuống cuối — đúng thứ tự ưu tiên ACTION > … > KATHY. */
.today-kathy { display: block; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); overflow: hidden; }
@media (min-width: 1024px) {
  /* màn Today vốn giới hạn 760px cho dễ đọc — mở rộng khi có 3 cột */
  .today-page { max-width: 1280px; }
}

/* ===== BÀN LÀM VIỆC THEO VAI (29/08/2026, spec Role-Based Operating Desk) =====
   ACTION > STATUS > NUMBER > CHART. Mọi khối có số đều ghi nguồn; khối chưa có nguồn
   hiện xám kèm việc cần làm — không vẽ số 0 cho đẹp. */
.desk-zone { margin-top: 22px; border-top: 2px solid var(--line); padding-top: 14px; }
.desk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.desk-head h3 { margin: 0; font-size: 15px; letter-spacing: .05em; }
.desk-role { font-size: 11px; color: var(--ink-soft); }
.desk-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.desk-block h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; }
.desk-source { margin: 8px 0 0; font-size: 10px; color: var(--ink-soft); }
.desk-meta { margin: 4px 0 0; font-size: 11px; color: var(--ink-soft); }
.desk-warn { margin: 8px 0 0; font-size: 11px; color: #8a5a00; background: #fff8e6; border-radius: 6px; padding: 6px 8px; }
.desk-ok { margin: 0; font-size: 13px; color: var(--ink-soft); }
.desk-empty { background: #fafafa; border-style: dashed; }
.desk-need { margin: 0; font-size: 12px; font-weight: 600; }
.desk-checked { margin: 6px 0 0; font-size: 11px; color: var(--ink-soft); }

/* GHI CHÚ GẤP LẠI (30/08 — anh Tiền: "nhiều chữ quá, đưa hết giải thích vào 1 nút ghi chú").
   Nút phải NHẸ khi không có gì cần biết, và NỔI khi bên trong có cảnh báo — giấu cảnh báo mà
   không để dấu vết thì người đọc tưởng con số đã đầy đủ. */
.ghi-chu { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px; }
.ghi-chu > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-soft); padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fafafa; user-select: none;
}
.ghi-chu > summary::-webkit-details-marker { display: none; }
.ghi-chu > summary::after { content: '▾'; font-size: 9px; opacity: .6; }
.ghi-chu[open] > summary::after { content: '▴'; }
.ghi-chu > summary:hover { background: #f0f0f0; }
.ghi-chu.gc-co-canh-bao > summary { color: #8a5a00; background: #fff8e6; border-color: #f0dca8; font-weight: 600; }
.gc-noi { margin-top: 8px; }
.gc-noi p { margin: 0 0 6px; font-size: 11px; line-height: 1.5; }
.gc-noi p:last-child { margin-bottom: 0; }
.gc-canh-bao { color: #8a5a00; background: #fff8e6; border-radius: 6px; padding: 6px 8px; }
.gc-giai-thich { color: var(--ink-soft); }

.desk-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.health-cell { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.health-cell b { display: block; font-size: 12px; }
.health-cell span { display: block; font-size: 10px; color: var(--ink-soft); margin-top: 2px; }
.hc-red { border-color: #f2b8b5; background: #fff5f5; }
.hc-amber, .hc-yellow { border-color: #f7d794; background: #fffaf0; }
.hc-green { border-color: #b7dfc1; background: #f6fdf8; }
.hc-chua_co_nguon { background: #fafafa; border-style: dashed; }

.desk-fin { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fin-cell { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.fin-cell span { display: block; font-size: 10px; color: var(--ink-soft); }
.fin-cell b { display: block; font-size: 15px; margin-top: 2px; }
.fin-red { border-color: #f2b8b5; background: #fff5f5; }
.fin-yellow { border-color: #f7d794; background: #fffaf0; }
.fin-green { border-color: #b7dfc1; background: #f6fdf8; }

.exc-card { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; }
.exc-card.sev-critical, .exc-card.sev-p0 { border-left-color: #d93025; background: #fff5f5; }
.exc-card.sev-high, .exc-card.sev-p1 { border-left-color: #e8710a; }
.exc-card.sev-warning, .exc-card.sev-p2 { border-left-color: #f9ab00; }
.exc-top { display: flex; gap: 8px; align-items: baseline; }
.exc-sev { font-size: 9px; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; }
.exc-impact { margin: 4px 0 0; font-size: 12px; }

/* ---------- Trình bày câu trả lời của Kathy (29/08/2026) ----------
   Model trả lời có xuống dòng đàng hoàng ("...bao gồm:\n\n1. ...\n2. ...") nhưng thẻ <p>
   của HTML nuốt sạch \n nên cả danh sách dồn thành một khối chữ liền. Giữ nguyên xuống dòng
   của model thay vì cắt chuỗi bằng JS — không phải đoán cấu trúc, không vỡ khi model đổi cách
   trình bày. overflow-wrap để mã đơn/đường dẫn dài không tràn khỏi bong bóng chat. */
.chat-text,
.text-response,
.response-group p,
.chat-bubble p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* ===== Hoạt động nhân sự (29/08/2026, anh Tiền) — ai đang dùng hệ, ai chưa từng vào ===== */
.hd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.hd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; }
.hd-name { font-weight: 600; }
.hd-num { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.hd-chua_tung_vao { background: #fafafa; border-style: dashed; }
.hd-dang_dung_hom_nay { border-color: #b7dfc1; background: #f6fdf8; }
.hd-tai_khoan_he_thong { background: #f7f7fb; color: var(--ink-soft); }
.hd-feed { margin-top: 10px; }
.hd-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 8px; align-items: baseline;
  font-size: 12px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.hd-time { font-size: 10px; color: var(--ink-soft); }
.hd-obj { font-size: 10px; color: var(--ink-soft); }
@media (max-width: 600px) { .hd-item { grid-template-columns: 1fr; gap: 1px; } .hd-obj { display: none; } }

/* ===== Bản nháp nhập liệu trong ô chat (29/08/2026) — thấy rõ sắp ghi gì rồi mới bấm ===== */
.nhap-preview .np-box { border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: #fff; }
.np-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
.np-row span { color: var(--ink-soft); }
.np-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ===== Trao đổi gắn vào việc — cowork nội bộ ===== */
.td-wrap { margin-top: 8px; }
.td-toggle { font-size: 11px; padding: 3px 8px; }
.td-box { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fbfbfd; }
.td-ai { margin: 0 0 6px; font-size: 10px; color: var(--ink-soft); }
.td-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.td-msg { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: baseline; font-size: 12px; }
.td-cua { font-weight: 600; white-space: nowrap; }
.td-kathy .td-cua { color: var(--brand); }
.td-luc { font-size: 9px; color: var(--ink-soft); white-space: nowrap; }
.td-trong { margin: 0; font-size: 12px; color: var(--ink-soft); }
.td-form { display: flex; gap: 5px; margin-top: 8px; }
.td-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
@media (max-width: 600px) { .td-msg { grid-template-columns: 1fr; gap: 1px; } .td-luc { display: none; } }
.fin-chua-do { background: #fafafa; border-style: dashed; }
.fin-chua-do b { font-size: 13px !important; color: var(--ink-soft); }
.fin-chua-do em { display: block; font-size: 9px; color: var(--ink-soft); font-style: normal; margin-top: 3px; line-height: 1.3; }

/* ===== Sổ ghi tạm — lớp 2 (29/08/2026): việc đang dở dang, chưa vào hệ thật ===== */
.st-zone { margin-top: 18px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; background: #fffdf7; }
.st-zone h3 { margin: 0 0 2px; font-size: 14px; letter-spacing: .04em; }
.st-note { margin: 0 0 10px; font-size: 11px; color: var(--ink-soft); }
.st-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; background: #fff; }
.st-du { border-color: #b7dfc1; }
.st-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.st-loai { font-size: 9px; letter-spacing: .06em; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink-soft); }
.st-nguoi { font-size: 10px; color: var(--ink-soft); margin-left: auto; }
.st-thieu { margin: 5px 0 0; font-size: 12px; color: #8a5a00; }
.st-du-text { margin: 5px 0 0; font-size: 12px; color: #1e7b34; }
.st-actions { display: flex; gap: 6px; margin-top: 7px; }

/* ---------- Thẻ việc không được vỡ vì một chuỗi dài (29/08/2026) ----------
   Ô "Vì sao?" in mã tham chiếu thô của email — kiểu <vLV6XKG-TbCgWOmdMryKjg@geopod-ismtpd-33>.
   Chuỗi đó không có dấu cách nên trình duyệt không biết ngắt ở đâu, đẩy toác khung thẻ và
   cắt cụt các cột bên cạnh. Cho phép ngắt giữa chừng thì thẻ giữ nguyên hình. */
.work-fields dd,
.work-fields dt,
.card-grid-item {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ===== Màn điều hành cho Chủ tịch — 5 mục (29/08/2026, anh Tiền chốt) ===== */
.dh-zone { display: flex; flex-direction: column; gap: 14px; }
.dh-muc { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: #fff; }
.dh-muc h4 { margin: 0 0 9px; font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); }
.dh-hang { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dh-o { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.dh-o span { display: block; font-size: 10px; color: var(--ink-soft); }
.dh-o b { display: block; font-size: 17px; margin-top: 2px; }
.dh-o i { display: block; font-size: 10px; font-style: normal; margin-top: 2px; }
.ss-tang { color: #1e7b34; } .ss-giam { color: #b3261e; }
.dh-o-thieu { background: #fafafa; border-style: dashed; grid-column: 1 / -1; margin-top: 8px; }
.dh-chuado b { font-size: 13px !important; color: var(--ink-soft); }
.dh-chuado em { display: block; font-size: 10px; font-style: normal; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.dh-wig { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.dh-wig p { margin: 0; font-size: 12px; }
.dh-wig-so { font-size: 19px !important; margin-top: 3px !important; }
.dh-nhac { margin-top: 6px !important; font-size: 11px !important; color: #8a5a00;
  background: #fff8e6; border-radius: 6px; padding: 5px 7px; }
.dh-mang { border-top: 1px dotted var(--line); padding: 8px 0 2px; }
.dh-mang:first-of-type { border-top: 0; padding-top: 0; }
.dh-ten-mang { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.dh-mang-thieu { opacity: .85; }
/* Thanh tiến độ WIG theo quý: cột màu = đã đạt, vạch đen = quỹ thời gian đã trôi.
   Cột vượt qua vạch nghĩa là đang đi trước lịch. */
.dh-wig.light-green { border-left: 3px solid #1e7b34; padding-left: 9px; }
.dh-wig.light-yellow { border-left: 3px solid #f9ab00; padding-left: 9px; }
.dh-wig.light-red { border-left: 3px solid #b3261e; padding-left: 9px; }
/* XÁM cho THIẾU CĂN CỨ / CHƯA ĐO (30/08, luật a3): không được đỏ oan — đỏ oan vài hôm
   là người đọc quen mắt bỏ qua, mất luôn tác dụng cảnh báo thật. */
.dh-wig.light-gray { border-left: 3px solid #9aa0a6; padding-left: 9px; }
.light-gray .dh-thanh-do { background: #9aa0a6; }
.dh-thanh { position: relative; height: 8px; background: #eef0f2; border-radius: 5px; margin: 7px 0 5px; overflow: visible; }
.dh-thanh-do { height: 100%; border-radius: 5px; background: #1e7b34; }
.light-yellow .dh-thanh-do { background: #f9ab00; }
.light-red .dh-thanh-do { background: #b3261e; }
.dh-thanh-moc { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); }
.dh-wig-phu { margin: 2px 0 0 !important; font-size: 10px; color: var(--ink-soft); }

/* ============================================================
   CỬA SỔ VẬN HÀNH CỦA NHÂN SỰ — 3 cột (29/08/2026 anh Tiền chốt · dọn 30/08)
   Trên cùng chạy hết ngang: MỤC TIÊU + WIG 90 NGÀY + LỊCH GIAO HÀNG.
   Dưới: 1/4 KẾT QUẢ (lớp 3) · giữa VIỆC PHẢI HOÀN THÀNH (đèn) · 1/3 TRAO ĐỔI.
   Tỉ lệ 3fr : 5fr : 4fr = đúng 1/4 : 5/12 : 1/3 bề ngang.

   30/08 — anh Tiền: "mất ô chat". Nguyên nhân: BA đời bố cục cùng sống trong file
   này (2 cột 29/08 sáng · vá "ô chat bé tý" 29/08 chiều · 3 cột anh duyệt) — khối
   cũ ghim height 100vh-90, khối mới ghim max-height 100vh-230, và ô chat KHÔNG
   dính theo màn nên cuộn qua lịch giao hàng là biến mất. Nay CHỈ khối này định
   nghĩa bố cục: ô chat position sticky, cao bằng cửa sổ — cuộn tới đâu thấy tới
   đó, ô nhập tin luôn ghim đáy. Hai cột kia chảy tự nhiên theo trang (bỏ cuộn
   trong cột: hai thanh cuộn lồng nhau làm người dùng tưởng hết nội dung).
   Điện thoại xếp dọc: mục tiêu → việc → kết quả → trao đổi.
   ============================================================ */
/* (Đợt 1 - 30/08: lưới .today-layout + sticky Kathy + mở khoá cuộn trang chuyển về layout.css
   khối .page-today — giữ nguyên hành vi anh Tiền chốt, chỉ đổi chỗ ở.) */
.cot-title { font-size: 13px; font-weight: 800; letter-spacing: .03em; margin: 0 0 2px; }
.cot-sub { font-size: 11px; color: var(--ink-soft); margin: 0 0 10px; }
.ketqua-so { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: #f2fbf5; }
.ketqua-so b { font-size: 24px; font-weight: 800; }
.ketqua-so span { font-size: 12px; color: var(--ink-soft); }

/* ---------- LỊCH GIAO HÀNG THEO TUẦN (29/08/2026) ----------
   Bảy cột bằng nhau, chạy hết bề ngang, đặt trên cùng. Điện thoại thì cuộn ngang chứ
   KHÔNG bóp 7 cột vào màn hẹp — bóp thì chữ nhỏ tới mức không ai đọc, coi như không có lịch. */
.lich-giao { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; }
.lg-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lg-dau h3 { font-size: 13px; font-weight: 800; letter-spacing: .03em; margin: 0; }
.lg-khoang { font-size: 12px; color: var(--ink-soft); }
.lg-tong { font-size: 12px; font-weight: 700; margin-left: auto; }
.lg-luoi { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; }
.lg-ngay { border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-width: 0;
  border-top-width: 3px; border-top-color: var(--line); background: #fcfcfd; }
.lg-ngay.den-red    { border-top-color: #d93025; background: #fff5f5; }
.lg-ngay.den-yellow { border-top-color: #f9ab00; background: #fffaf0; }
.lg-ngay.den-green  { border-top-color: #188038; background: #f4fbf6; }
.lg-ngay.lg-cuoituan { background: #f7f7f8; }
.lg-ngay.lg-homnay { box-shadow: 0 0 0 2px var(--brand) inset; }
.lg-thu { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.lg-so { font-size: 22px; font-weight: 800; line-height: 1.1; }
.lg-phu { font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.lg-don { font-size: 11px; padding: 2px 0; border-top: 1px dotted var(--line); overflow-wrap: anywhere; }
.lg-don-xong { color: var(--ink-soft); text-decoration: line-through; }
.lg-them { font-size: 11px; color: var(--ink-soft); padding-top: 2px; }
.lg-canhbao { margin: 10px 0 0; font-size: 12px; color: #b06000; background: #fff8e6;
  border: 1px solid #f2d999; border-radius: 8px; padding: 8px 10px; }

/* Nút chuyển tuần của lịch giao hàng (29/08/2026) */
.lg-dieu-huong { display: inline-flex; gap: 4px; align-items: center; }
.lg-nut { border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 4px 9px; color: var(--ink); }
.lg-nut:hover { background: #f1f3f4; }
.lg-nut-nay { font-size: 11px; padding: 4px 8px; font-weight: 700; }

/* Chủ tịch không nhìn tường thẻ việc (30/08) — một dòng đếm thay cho 62 thẻ */
.today-owner-note { font-size: 13px; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line);
  border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; }

/* MỤC TIÊU & NHỊP CHẠY (30/08) — dòng hành động nổi hơn dòng phụ thường */
.nc-hanh-dong { font-weight: 700; color: var(--ink) !important; font-size: 12px !important; }
.nc-do-gray { background: #9aa0a6; }
.nc-do-yellow { background: var(--den-vang); }
.nc-do-red { background: var(--den-do); }

/* TIỀN & LÃI (30/08) — phép tính lãi tháng đọc ngang trái→phải */
.tl-phep { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.tl-buoc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-dau { font-style: normal; font-weight: 800; font-size: 16px; color: var(--ink-soft); }
.tl-manh .fin-cell { border-width: 2px; }

/* 6 MẢNG — KẾT QUẢ & ĐIỂM CHÁY (30/08) — mỗi mảng một hàng */
.mg-hang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: #fff; }
.mg-hang.hc-red { background: #fff5f5; border-color: #f2c4c2; }
.mg-hang.hc-amber, .mg-hang.hc-yellow { background: #fffaf0; border-color: #f0dcae; }
.mg-hang.hc-green { background: #f4fbf6; border-color: #cfe8d6; }
.mg-ten { font-size: 13px; }
.mg-so { font-size: 12px; color: var(--ink); }
.mg-chay { font-size: 12px; color: #8a3b00; }

/* Kết quả lệnh quản trị trên trang THIẾT LẬP (30/08 — bảng chuyển từ Cowork - Bàn làm việc về) */
.admin-ketqua { display: flex; flex-direction: column; gap: 4px; }
.admin-ketqua-dong { margin: 0; font-size: 13px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; }

/* Nút gửi hình tròn màu logo SBH, biểu tượng ↵ (30/08, anh Tiền) */
.btn-send-tron {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  border: 0; background: #2E3192; /* màu logo SBH (indigo) */
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.btn-send-tron:hover { background: #232578; }
.btn-send-tron:disabled { opacity: .5; cursor: default; }

/* Trạm trao đổi tự nhiên hơn (30/08): gợi ý câu hỏi + Kathy đang soạn */
.goi-y-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.goi-y-row:empty { display: none; }
.goi-y-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--ink); }
.goi-y-chip:hover { border-color: #2E3192; color: #2E3192; }
.kathy-dang-soan { color: var(--ink-soft); }
.kathy-dang-soan .kds-chu::after { content: '…'; display: inline-block; overflow: hidden; vertical-align: bottom;
  animation: kathy-cham 1.2s steps(4, end) infinite; width: 0; }
/* Số giây: chữ số đều bề ngang để con số không nhảy trái phải mỗi giây (01/09/2026) */
.kathy-dang-soan .kds-giay { font-variant-numeric: tabular-nums; opacity: .85; }
@keyframes kathy-cham { to { width: 1.2em; } }

/* ============ Hội thoại kiểu Claude (30/08 — anh Tiền: "thiết kế hệt như Claude") ============
   Kathy: chữ trơn trên nền, không khung, không nhãn tên — như câu trả lời của Claude.
   Người gửi: bong bóng xám nhạt chữ sẫm bo tròn, không avatar. Thoáng dòng, dễ đọc. */
.chat-list { gap: 20px; line-height: 1.6; }
.chat-sender { display: none; }
.from-user .chat-avatar { display: none; }
.from-user .chat-text {
  background: #f1f0f5; color: var(--ink);
  border-radius: 18px 18px 4px 18px; padding: 10px 14px;
}
.from-system .chat-text, .text-response {
  background: transparent; color: var(--ink);
  border: 0; border-radius: 0; padding: 0; display: block;
}
.from-system .chat-bubble { max-width: 100%; }
.from-system .chat-avatar { background: transparent; }
/* Gỡ nốt hộp tím quanh câu Kathy (lớp .chat-bubble đời cũ dòng ~549) — Kathy là chữ trơn như Claude */
.chat-message.from-system .chat-bubble { background: transparent; border: 0; padding: 0; }
.chat-message.from-user .chat-bubble { background: transparent; border: 0; padding: 0; }
/* 30/08 (anh Tiền): bỏ luôn logo cạnh câu Kathy — hệt khung chat Claude, chỉ còn chữ */
.chat-message.from-system .chat-avatar { display: none; }

/* ============ Khung nhập kiểu Claude (30/08 — anh Tiền) ============
   Một hộp bo tròn lớn ôm cả ô gõ + nút ↵ tròn màu logo bên trong góc phải.
   Ô gõ không viền riêng; hướng dẫn Enter chuyển vào tooltip, placeholder gọn. */
.chat-form {
  display: flex; align-items: flex-end; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 8px 8px 8px 16px; margin: 0 10px 6px;
}
.chat-form:focus-within { border-color: #2E3192; box-shadow: 0 0 0 3px rgba(46, 49, 146, .08); }
.chat-form .chat-input, .chat-form .comm-input {
  border: 0 !important; outline: none; background: transparent;
  flex: 1; min-width: 0; padding: 8px 0; border-radius: 0;
  font-size: 14px; resize: none;
}
.btn-send-tron { width: 38px; height: 38px; font-size: 18px; }
/* 30/08 (anh Tiền): nút gửi cùng màu nền chat, chỉ MŨI TÊN mang màu logo */
.btn-send-tron { background: transparent; color: #2E3192; }
.btn-send-tron:hover { background: rgba(46, 49, 146, .08); }
/* Nút 2 trạng thái (30/08): ■ dừng khi Kathy đang soạn — vuông nhỏ, vẫn màu logo */
.btn-send-tron.dang-soan { font-size: 13px; }
/* 30/08 (anh Tiền): ô gõ bên trong TAN HẲN vào hộp — dập bóng hồng focus đời cũ (dòng ~581
   còn !important) để không còn "hình vuông" tách biệt; viền focus đã có ở .chat-form ngoài. */
.chat-form .chat-input:focus, .chat-form .comm-input:focus,
.chat-form .chat-input:focus-visible, .chat-form .comm-input:focus-visible {
  border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent;
}

/* Tệp đính kèm trong Cowork - Bàn làm việc (30/08) */
.btn-tep { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent;
  color: #2E3192; font-size: 17px; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.btn-tep:hover { background: rgba(46, 49, 146, .08); }
.tep-input-an { display: none; }
.tep-chip-row { padding: 0 14px 6px; }
.tep-chip-row:empty { display: none; }
.tep-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: #f1f0f5; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.tep-bo { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--ink-soft); }

/* ===== NHÓM ZALO KHÁCH (31/08/2026 — Nhã · Lộc · Hồng · Loan nhìn thấy tóm tắt nhóm khách)
   Kathy đang KHÔNG nhắn nhắc ai, nên khối này là nơi duy nhất việc hiện ra: việc của mình
   phải bật lên ngay từ cái liếc mắt, việc người khác vẫn đọc được nhưng nhạt hơn. */
.nz-loc { display: flex; gap: 8px; margin: 2px 0 12px; flex-wrap: wrap; }
.nz-ds { display: flex; flex-direction: column; gap: 12px; }
.nz-nhom { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.nz-nhom-gap { border-color: #e5484d; }
.nz-n-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.nz-n-top b { font-size: 14px; }
.nz-n-so { font-size: 12px; color: var(--ink-soft); }
.nz-viec { border-left: 3px solid var(--line); padding: 6px 0 6px 10px; margin-bottom: 6px; }
.nz-viec:last-child { margin-bottom: 0; }
.nz-cua-toi { border-left-color: #2E3192; background: rgba(46, 49, 146, .04);
  border-radius: 0 8px 8px 0; }
.nz-gap { border-left-color: #e5484d; }
.nz-v-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.nz-mang { font-weight: 700; color: #2E3192; }
.nz-ai { color: var(--ink); }
.nz-cho { color: var(--ink-soft); margin-left: auto; }
.nz-trich { margin: 4px 0 6px; font-size: 13px; line-height: 1.45; }
.nz-v-duoi { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.nz-nen-vao { font-size: 12px; color: var(--ink-soft); }
.nz-cua-toi .nz-nen-vao { color: #2E3192; font-weight: 600; }
.nz-con-lai { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

/* ============ ĐỢT 3 — MOBILE CHO THỢ XƯỞNG (31/08, NK-012) ============
   13 vai xưởng dùng điện thoại một tay: nút bấm phải ≥44px, chat ghim đáy màn dạng
   ngăn kéo (thanh COWORK - BÀN LÀM VIỆC luôn thấy, chạm là bung), lịch tuần cuộn ngang có
   điểm dừng từng ngày. Desktop không đổi gì. */
@media (max-width: 1023px) {
  /* Nút thao tác việc: to đủ ngón cái, chia đều hàng */
  .today-cta { gap: 8px; }
  .today-cta .btn { min-height: 44px; flex: 1 1 auto; font-size: 13px; }
  .td-toggle { min-height: 40px; }
  /* Chat = ngăn kéo ghim đáy: hé 48px thanh tiêu đề, chạm bung 75% màn */
  .page-today .today-kathy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--card); border-top: 2px solid var(--brand);
    box-shadow: 0 -4px 16px rgba(45, 22, 28, .14);
    transform: translateY(calc(100% - 48px));
    transition: transform .22s ease;
    max-height: 78dvh; display: flex; flex-direction: column;
  }
  .page-today .today-kathy.mo-chat { transform: translateY(0); }
  .page-today .today-kathy .comm-zone { height: 100%; min-height: 0; }
  .page-today .today-kathy .chat-list { max-height: none; }
  .page-today .today-kathy .zone-head { cursor: pointer; padding: 12px 14px; margin: 0; min-height: 44px; align-items: center; justify-content: center; }
  /* [31/08/2026 — phiên 33] Anh Tiền cho gỡ tiêu đề COWORK (chữ + gạch đỏ). Thanh .zone-head
     vẫn là tay nắm bung/cụp ngăn kéo chat của đợt 3 mobile, nhưng giờ RỖNG nên vô hình.
     Thay bằng một vạch xám nhỏ giữa thanh — đủ để biết nắm được, không ồn như tiêu đề đỏ. */
  .page-today .today-kathy .zone-head::before {
    content: "💬 CHAT KATHY — chạm để mở"; display: block; width: auto;
    padding: 8px 16px; border-radius: 999px; background: #1565c0; color: #fff;
    font-size: 12px; font-weight: 700;
  }
  /* chừa chỗ cho thanh chat hé ở đáy để nội dung cuối trang không bị che */
  .page-today .today-layout { padding-bottom: 64px; }
  /* Lịch tuần: mỗi ngày một điểm dừng cuộn */
  .lg-luoi { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .lg-ngay { scroll-snap-align: center; }
}

/* ===== TRANG QUẢN TRỊ NHÂN SỰ THEO GHẾ (NK-024, 31/08/2026 — phiên 33) ===== */
.nhansu-page { max-width: 900px; margin: 0 auto; padding: 16px 14px 60px; }
.ns-dau h2 { margin: 0 0 4px; font-size: 18px; }
.ns-huongdan { font-size: 12px; color: var(--ink-soft); margin: 0 0 8px; }
.ns-tang { margin-top: 18px; }
.ns-tang h3 { font-size: 12px; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ns-ghe { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.ns-ghe.ns-trong { border-style: dashed; background: #fafafa; }
.ns-ghe-dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ns-ghe-dau b { font-size: 14px; }
.ns-ma { font-size: 11px; background: var(--line); border-radius: 4px; padding: 1px 6px; }
.ns-khoa { font-size: 11px; color: #8a5a00; }
.ns-vai { font-size: 10.5px; color: var(--ink-soft); margin: 5px 0 0; overflow-wrap: anywhere; }
.ns-mota { font-size: 12px; color: var(--ink-soft); margin: 5px 0 0; max-width: 70ch; }
.ns-nguoi { font-size: 12px; font-weight: 600; color: #1e7b34; }
.ns-hanhdong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ns-input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.ns-taoghe { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 14px 0; background: #fff; }
.ns-taoghe h3 { margin: 0 0 4px; font-size: 13px; }
.ns-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ns-mota-o { width: 100%; margin: 6px 0; box-sizing: border-box; }
.ns-taoghe > input { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
/* Mật khẩu một lần: phải NỔI — đây là thứ duy nhất không xem lại được */
.ns-matkhau { border: 2px solid #1e7b34; background: #f2fbf5; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.ns-matkhau b { display: block; font-size: 13px; margin-bottom: 6px; }
.ns-matkhau code { font-size: 18px; letter-spacing: .05em; background: #fff; border: 1px dashed #1e7b34; border-radius: 6px; padding: 4px 10px; margin-right: 8px; user-select: all; }
.ns-matkhau p { font-size: 11px; color: #8a5a00; margin: 8px 0 0; }

/* ===== NHÓM ZALO KHÁCH — gom theo khách + nhấp nháy chờ SBH chốt (NK-036, 31/08 — phiên 33) ===== */
.nz-khach { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.nz-nhom-trong-khach { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.nz-nhom-trong-khach:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
.nz-o-nhom { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
.nz-cuoi { font-weight: 400; font-size: 11px; color: var(--ink-soft); }
.nz-nhom-cho .nz-o-nhom { color: #b3261e; }
/* Nhấp nháy = viền + nền thở chậm 1.6s — đủ bắt mắt, không chói. Ai chỉnh hệ điều hành
   "giảm chuyển động" thì đứng yên viền đỏ, vẫn nhận ra ngay. */
@keyframes nz-tho { 0%, 100% { border-color: #b3261e; background: #fff; } 50% { border-color: #b3261e; background: #fdeceb; } }
.nz-nhay { border: 2px solid #b3261e; animation: nz-tho 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nz-nhay { animation: none; background: #fdeceb; } }

/* Kathy hỏi khách của nhóm (NK-037) — nền vàng nhạt như phiếu hỏi, không đỏ (không phải lỗi) */
.nz-hoi { border: 1px dashed #b8860b; background: #fffaf0; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.nz-hoi-tieude { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }
.nz-hoi-dong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.nz-hoi-nhom { font-size: 12px; min-width: 180px; }
.nz-hoi-mota { flex: 1; min-width: 240px; }
.nz-hoi-doc { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.nz-hoi-trich { margin: 2px 0 0; font-size: 11.5px; color: var(--ink); font-style: italic; overflow-wrap: anywhere; }

/* CHI PHÍ AI (31/08/2026 — báo cáo chi phí dùng AI trên cửa vận hành) */
.ai-cost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ai-cost-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.ai-cost-cell b { display: block; font-size: 18px; }
.ai-cost-cell span { font-size: 11.5px; color: var(--ink-soft); }
.ai-cost-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-cost-tbl th, .ai-cost-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ai-cost-tbl th { color: var(--ink-soft); font-weight: 600; font-size: 11px; }

/* ===== COWORK - BÀN LÀM VIỆC · TÔNG MÀU KHUNG CHAT DEEPSEEK (31/08/2026, anh Tiền) =====
   Xanh chủ đạo #4D6BFE (signature DeepSeek) · nền trắng · bong bóng bo tròn 18px ·
   văn bản tối #1F2329 · viền nhẹ #E6E9F2. Ghi đè sau — không sửa luật cũ. */
.comm-zone .chat-panel { border-color: #E6E9F2; border-radius: 16px; background: #fff; }
.comm-zone .chat-head { border-bottom: 1px solid #ECEEF4; background: #fff; }
.comm-zone .chat-head h2 { color: #1F2329; }
.comm-zone .chat-head .zone-slogan, .comm-zone .zone-head-extra { color: #8A94A6; }
.comm-zone .ctx-chip { background: #EDF2FF; color: #4D6BFE; border-color: #D8E2FF; }
.comm-zone .ctx-clear { color: #4D6BFE; }
.comm-zone .chat-list { background: #fff; }
.comm-zone .chat-text { background: #4D6BFE; color: #fff; border-radius: 18px 18px 6px 18px; }
.comm-zone .from-user .chat-avatar { background: #4D6BFE; }
.comm-zone .from-system .chat-text, .comm-zone .text-response { background: #F4F6FB; color: #1F2329; border-radius: 6px 18px 18px 18px; }
.comm-zone .from-system .chat-avatar { background: #EDF2FF; color: #4D6BFE; }
.comm-zone .chat-sender { color: #8A94A6; }
.comm-zone .chat-trace { color: #9AA1AD; border-top-color: #ECEEF4; }
.comm-zone .chat-form { background: #fff; border-top-color: #ECEEF4; }
.comm-zone .chat-input { color: #1F2329; background: #fff; }
.comm-zone .chat-input::placeholder { color: #9AA1AD; }
.comm-zone .btn-send-tron { background: #4D6BFE; color: #fff; }
.comm-zone .btn-send-tron:hover { background: #3D5BF0; }
.comm-zone .goi-y-chip { border-color: #E6E9F2; color: #33373D; background: #fff; }
.comm-zone .goi-y-chip:hover { border-color: #4D6BFE; color: #4D6BFE; }
.comm-zone .btn-primary, .comm-zone .confirm-buttons .btn-primary { background: #4D6BFE; border-color: #4D6BFE; }
.comm-zone .btn-primary:hover, .comm-zone .confirm-buttons .btn-primary:hover { background: #3D5BF0; border-color: #3D5BF0; }
.comm-zone .ctx-bar { border-bottom-color: #ECEEF4; }

/* ===== COWORK - BÀN LÀM VIỆC · CHẾ ĐỘ TỐI DEEPSEEK (31/08/2026, anh Tiền: "nền đen chữ trắng giống hệt DeepSeek") =====
   Nền #1E1E1E · Kathy xám #2F2F33 chữ #E6E6EA · người gửi xanh #4D6BFE · viền #34343A · chữ phụ #8A8A93. */
.today-kathy { background: #1E1E1E; border-color: #34343A; }
.page-today .today-kathy .comm-zone, .comm-zone { background: #1E1E1E; color: #E6E6EA; }
.comm-zone .chat-panel { background: #1E1E1E; border-color: #34343A; }
.comm-zone .chat-head { background: #1E1E1E; border-bottom-color: #34343A; }
.comm-zone .chat-head h2 { color: #F5F5F5; }
.comm-zone .zone-head, .comm-zone .zone-head-extra { background: #1E1E1E; color: #E6E6EA; }
.comm-zone .ctx-bar { background: #232327; border-bottom-color: #34343A; }
.comm-zone .ctx-chip { background: #243052; color: #7B93FF; border-color: #2E3A5C; }
.comm-zone .ctx-clear { color: #7B93FF; }
.comm-zone .ctx-hint { color: #8A8A93; }
.comm-zone .chat-list { background: #1E1E1E; }
.comm-zone .chat-text { background: #4D6BFE; color: #fff; border-radius: 18px 18px 6px 18px; }
.comm-zone .from-user .chat-avatar { background: #4D6BFE; }
.comm-zone .from-system .chat-text, .comm-zone .text-response { background: #2F2F33; color: #E6E6EA; border-radius: 6px 18px 18px 18px; }
.comm-zone .from-system .chat-avatar { background: #2A3A66; color: #7B93FF; }
.comm-zone .chat-sender { color: #8A8A93; }
.comm-zone .chat-trace { color: #8A8A93; border-top-color: #34343A; background: #232327; }
.comm-zone .chat-form { background: #232327; border-top-color: #34343A; }
.comm-zone .chat-input { color: #F5F5F5; background: #232327; }
.comm-zone .chat-input::placeholder { color: #8A8A93; }
.comm-zone .btn-send-tron { background: #4D6BFE; color: #fff; }
.comm-zone .btn-send-tron:hover { background: #3D5BF0; }
.comm-zone .btn-ghost { color: #E6E6EA; border-color: #3A3A41; background: transparent; }
.comm-zone .goi-y-chip { border-color: #3A3A41; color: #DEDEDE; background: #232327; }
.comm-zone .goi-y-chip:hover { border-color: #4D6BFE; color: #7B93FF; }
.comm-zone .btn-primary, .comm-zone .confirm-buttons .btn-primary { background: #4D6BFE; border-color: #4D6BFE; color: #fff; }
.comm-zone .btn-primary:hover, .comm-zone .confirm-buttons .btn-primary:hover { background: #3D5BF0; }
.comm-zone .response-sources { color: #8A8A93; }
.comm-zone .response-group p { color: #E6E6EA; }
.comm-zone .np-box, .comm-zone .np-row { background: #232327; border-color: #34343A; color: #E6E6EA; }
.comm-zone .type-tag { color: #8A8A93; }
.comm-zone .chat-mock-note { color: #8A8A93; }


/* DeepSeek đúng nghĩa (31/08, anh Tiền: "tin người gửi vẫn giống DeepSeek"): bong bóng = MỘT
   viên thuốc duy nhất — bỏ vỏ hồng #fdecee cũ của .chat-bubble (nền hồng bao quanh viên xanh
   là lý do lệch khỏi DeepSeek). Focus ô nhập cũng chuyển xanh #4D6BFE thay vì đỏ SBH. */
.comm-zone .chat-message.from-user .chat-bubble, .comm-zone .chat-message.from-system .chat-bubble { background: transparent; border: 0; }
.comm-zone .chat-input { border: 1.5px solid #34343A; border-radius: 12px 0 0 12px; }
.comm-zone .chat-input:focus { border-color: #4D6BFE; box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.22); }


/* 31/08 (anh Tiền): tin NGƯỜI GỬI dùng đúng màu bong bóng người gửi của DeepSeek —
   ĐEN THAN #2F3033 chữ trắng (xanh #4D6BFE trong DeepSeek chỉ là màu nút gửi/logo/link,
   KHÔNG phải màu bong bóng người gửi). AI trả lời theo DeepSeek: KHÔNG bong bóng. */
.comm-zone .from-user .chat-text { background: #2F3033; color: #F5F5F5; border-radius: 16px 16px 16px 6px; }
.comm-zone .from-user .chat-avatar { background: #4D6BFE; }
.comm-zone .from-system .chat-text, .comm-zone .from-system .text-response { background: transparent; border: 0; border-radius: 0; color: #E6E6EA; }
.comm-zone .from-system .chat-sender { color: #8A8A93; }

/* HÀNG NÚT DƯỚI CÂU TRẢ LỜI — KIỂU CLAUDE CODE (31/08, anh Tiền: "làm cho anh cái này
   giống của claude code em nhé"). Ba điểm làm nên nếp đó:
   1. icon nét mảnh một màu (SVG stroke), không phải emoji nhiều màu;
   2. NẰM IM cho tới khi rê chuột vào tin mới hiện — đọc câu trả lời không bị nút chen vào;
   3. nền chỉ sáng nhẹ khi rê từng nút, không viền, không khối màu.
   Máy cảm ứng không có "rê chuột" nên phải cho hiện sẵn — xem @media hover: none bên dưới. */
.msg-actions { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity .15s ease; }
.chat-message:hover .msg-actions,
.msg-actions:focus-within { opacity: 1; }
.msg-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #8A8A93; cursor: pointer; transition: background .12s, color .12s; }
.msg-act svg { width: 16px; height: 16px; }
.msg-act:hover { background: rgba(255, 255, 255, 0.08); color: #E6E6EA; }
.msg-act:focus-visible { outline: 2px solid #7B93FF; outline-offset: 1px; }
.msg-act.on { color: #7B93FF; background: rgba(77, 107, 254, 0.16); }
.msg-act.xong { color: #4ADE80; }
/* Điện thoại / máy tính bảng: không có con trỏ để rê, nút phải thấy được ngay. */
@media (hover: none) {
  .msg-actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-actions { transition: none; }
}
/* HÀNG NÚT CHO TIN CỦA MÌNH (31/08, anh Tiền "thêm cái này cho người gửi").
   Bong bóng người gửi nằm sát phải nên hàng nút phải dồn phải theo, không thì nó
   lơ lửng giữa khoảng trống bên trái. Thời điểm gửi đứng trước, chữ nhỏ và mờ. */
.msg-actions-toi { justify-content: flex-end; }
.msg-luc { align-self: center; margin-right: 4px; font-size: 12px; color: #8A8A93; white-space: nowrap; }

/* ===== CỘT LỊCH SỬ TRÒ CHUYỆN (31/08/2026 — anh Tiền: "Thiết kế thêm cho anh cả cột bên trái")
   Cột chat chỉ chiếm 4/12 bề ngang trang. Chia đôi cứng thì chat còn ~200px, không đọc nổi —
   nên cột này TRƯỢT RA đè lên khung chat (như Claude Code khi cửa sổ hẹp), bấm ☰ mở, bấm ra
   ngoài hoặc Esc thì đóng. comm-zone phải position: relative để nó bám đúng khung. ===== */
.comm-zone { position: relative; }
.chat-congcu { display: flex; gap: 4px; padding: 0 2px 6px; }
.ct-nut { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #8A8A93; font-size: 15px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; }
.ct-nut:hover { background: rgba(255, 255, 255, 0.08); color: #E6E6EA; }
.ct-nut:focus-visible { outline: 2px solid #7B93FF; outline-offset: 1px; }

.ls-manche { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.45); }
.ls-bang {
  position: absolute; inset: 0 auto 0 0; z-index: 5; width: min(280px, 88%);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 10px; background: #232327; border-right: 1px solid #34343A;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
  transform: translateX(-100%); transition: transform .18s ease;
}
.ls-bang.hien { transform: translateX(0); }
/* BẮT BUỘC phải có: thuộc tính hidden của HTML chỉ đặt display:none ở mức trình duyệt, nên
   display:flex/absolute khai ở trên ĐÈ MẤT nó — bảng vẫn nằm đè lên cột trái dù đang "ẩn".
   Lỗi này nhìn y như một mảng thiết kế thừa, rất khó đoán ra nếu không soi. */
.ls-bang[hidden], .ls-manche[hidden] { display: none; }
.ls-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #E6E6EA; font-size: 14px; }
.ls-dong { border: 0; background: transparent; color: #8A8A93; font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ls-dong:hover { background: rgba(255, 255, 255, 0.08); color: #E6E6EA; }
.ls-moi { width: 100%; margin-bottom: 10px; padding: 9px 10px; border: 1px dashed #3E3E46; border-radius: 9px; background: transparent; color: #C9CBD2; font-size: 13px; text-align: left; cursor: pointer; }
.ls-moi:hover { background: rgba(255, 255, 255, 0.06); color: #F5F5F5; border-color: #4D6BFE; }
.ls-moc { margin: 10px 2px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #74747E; }
.ls-muc { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #C9CBD2; text-align: left; cursor: pointer; transition: background .12s; }
.ls-muc:hover { background: rgba(255, 255, 255, 0.07); }
.ls-muc.dang-mo { background: rgba(77, 107, 254, 0.16); color: #F5F5F5; }
/* Tiêu đề dài phải cắt một dòng, không cho đẩy toác cột */
.ls-ten { font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-khi { font-size: 11px; color: #74747E; }
.ls-trong { margin: 12px 4px; font-size: 13px; color: #74747E; }
@media (prefers-reduced-motion: reduce) {
  .ls-bang { transition: none; }
}

/* ===== CỬA SỔ CHAT ĐÚNG DEEPSEEK — nốt còn sót (31/08, anh Tiền) =====
   Hộp nhập viền bo tròn, nền tối nhẹ hơn trang, viền xanh khi focus; nút 📎, chip tệp, chữ
   "đang soạn", thanh cuộn đều tô tối — không còn vệt sáng/indigo SBH trong ô chat. */
.comm-zone .chat-form { background: #26262A; border: 1px solid #34343A; }
.comm-zone .chat-form:focus-within { border-color: #4D6BFE; box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.15); }
.comm-zone .chat-form .chat-input, .comm-zone .chat-form .comm-input { color: #F5F5F5; caret-color: #4D6BFE; }
.comm-zone .btn-tep { color: #9AA1AD; }
.comm-zone .btn-tep:hover { background: rgba(255, 255, 255, 0.08); color: #E6E6EA; }
.comm-zone .tep-chip { background: #26262A; border: 1px solid #3A3A41; color: #E6E6EA; }
.comm-zone .tep-bo { color: #8A8A93; background: transparent; border: 0; }
.comm-zone .kathy-dang-soan { color: #8A8A93; }
.comm-zone .chat-list::-webkit-scrollbar { width: 8px; }
.comm-zone .chat-list::-webkit-scrollbar-thumb { background: #3A3A41; border-radius: 99px; }
.comm-zone .chat-list::-webkit-scrollbar-thumb:hover { background: #4D6BFE; }
.comm-zone .chat-message.from-system .chat-bubble { max-width: 100%; }

/* ===== CHUẨN 100% MÀU KHUNG CHAT DEEPSEEK-HARNESS (31/08 — màu TRÍCH từ CSS gốc dsh-client-ui-theme:
   nền #151517 · lớp #232324 · bong bóng người gửi #2c2c2e · chữ #f9fafb/#cfd3d6/#adb2b8 ·
   accent #5686fe · nút gửi TRẮNG tròn chữ đen #0f1115 — đúng DeepSeek dark mode) ===== */
.comm-zone, .page-today .today-kathy .comm-zone { background: #151517; color: #f9fafb; }
.today-kathy { background: #151517; border-color: rgba(255, 255, 255, 0.12); }
.comm-zone .chat-panel { background: #151517; border-color: rgba(255, 255, 255, 0.12); }
.comm-zone .chat-head, .comm-zone .chat-trace, .comm-zone .zone-head { background: #232324; }
.comm-zone .chat-head h2 { color: #f9fafb; }
.comm-zone .chat-head { border-bottom-color: rgba(255, 255, 255, 0.10); }
.comm-zone .ctx-bar { background: #232324; border-bottom-color: rgba(255, 255, 255, 0.10); }
.comm-zone .ctx-chip { background: rgba(86, 134, 254, 0.16); color: #5686fe; border-color: rgba(86, 134, 254, 0.35); }
.comm-zone .ctx-clear { color: #5686fe; }
.comm-zone .chat-list { background: #151517; }
.comm-zone .chat-message .chat-avatar { background: #2c2c2e; color: #f9fafb; }
.comm-zone .from-user .chat-text { background: #2c2c2e; color: #f9fafb; border-radius: 16px 16px 16px 6px; }
.comm-zone .from-system .chat-text, .comm-zone .from-system .text-response { background: transparent; border: 0; border-radius: 0; color: #f9fafb; }
.comm-zone .chat-sender { color: #adb2b8; }
.comm-zone .chat-trace { color: #81858c; border-top-color: rgba(255, 255, 255, 0.08); }
.comm-zone .chat-form { background: #232324; border: 1px solid rgba(255, 255, 255, 0.12); }
.comm-zone .chat-form:focus-within { border-color: #5686fe; box-shadow: 0 0 0 3px rgba(86, 134, 254, 0.18); }
.comm-zone .chat-form .chat-input, .comm-zone .chat-form .comm-input { color: #f9fafb; caret-color: #5686fe; }
.comm-zone .chat-input::placeholder { color: #81858c; }
.comm-zone .btn-send-tron { background: #f9fafb; color: #0f1115; }
.comm-zone .btn-send-tron:hover { background: #e3e5e8; }
.comm-zone .btn-tep { color: #adb2b8; }
.comm-zone .btn-tep:hover { background: rgba(255, 255, 255, 0.10); color: #f9fafb; }
.comm-zone .tp-chip, .comm-zone .tep-chip { background: #2c2c2e; border: 1px solid rgba(255, 255, 255, 0.12); color: #f9fafb; }
.comm-zone .tep-bo { color: #adb2b8; }
.comm-zone .goi-y-chip { border-color: rgba(255, 255, 255, 0.16); color: #cfd3d6; background: transparent; }
.comm-zone .goi-y-chip:hover { border-color: #5686fe; color: #5686fe; }
.comm-zone .kathy-dang-soan { color: #adb2b8; }
.comm-zone .btn-ghost { color: #cfd3d6; border-color: rgba(255, 255, 255, 0.16); }
.comm-zone .btn-primary, .comm-zone .confirm-buttons .btn-primary { background: #5686fe; border-color: #5686fe; color: #fff; }
.comm-zone .response-sources, .comm-zone .type-tag { color: #adb2b8; }
.comm-zone .np-box, .comm-zone .np-row { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.12); color: #f9fafb; }
.comm-zone .chat-mock-note { color: #adb2b8; }
.msg-act { color: #adb2b8; }
.msg-act:hover { background: rgba(255, 255, 255, 0.10); color: #f9fafb; }
.msg-act.on { color: #5686fe; background: rgba(86, 134, 254, 0.14); }
/* Đã sao chép → dấu tích XANH LÁ như Claude Code (xanh dương ở đây trùng màu nút đang chọn,
   nhìn không ra là "xong" hay "đang bật"). Khối này nằm sau nên đè màu khai ở ~dòng 1667. */
.msg-act.xong { color: #4ADE80; }
.comm-zone .chat-list::-webkit-scrollbar { width: 8px; }
.comm-zone .chat-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }
.comm-zone .chat-list::-webkit-scrollbar-thumb:hover { background: #5686fe; }


/* ===== ĐẦU TRANG — KHỐI CHUẨN DUY NHẤT (31/08/2026, anh Tiền: "thiết kế cân đối cái này
   nhìn mất thẩm mỹ"). Trước đó cùng ba lớp .ch-focus/.ch-row/.ch-motto được khai lại ở BỐN
   chỗ khác nhau trong file này, đời sau đè đời trước — nên không ai còn biết kích thước thật
   đến từ đâu, sửa chỗ này lệch chỗ kia. Nay: một nơi, một lần.

   Bố cục: hàng chính (thương hiệu | người dùng | nút) rồi một dải chữ mỏng (tôn chỉ trái,
   câu dẫn dắt phải). Hai tầng thay vì ba, nên hàng chính rõ là hàng chính. ===== */
.ch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
}
/* Mọi nút trên đầu trang cùng CHIỀU CAO và cùng độ bo — trước đây nút biểu tượng vuông 8px
   đứng cạnh nút chữ bo tròn, cao thấp lệch nhau nên hàng nút nhìn gãy. */
.ch-actions { display: flex; align-items: center; gap: 8px; }
.ch-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.ch-icon-btn:hover { border-color: #D12132; color: #D12132; }
.btn-setup {
  height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  /* nowrap: chữ "⚙ THIẾT LẬP" trước bị bẻ thành hai dòng, nút phình cao hơn hàng bên cạnh */
  white-space: nowrap;
}
.ch-identity { display: flex; align-items: center; gap: 10px; }
.ch-user { display: flex; align-items: center; gap: 8px; }

/* Dải chữ mỏng dưới hàng chính. Tôn chỉ bên trái viết nhỏ và nhạt — nó là câu nhắc, không
   phải tiêu đề; trước nó to 20px căn giữa nên tranh vai trò với tên thương hiệu. */
.ch-band {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap;
  padding: 0 20px 9px;
}
.ch-focus {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  color: #8E8A93; text-transform: uppercase;
  padding: 0; background: none; text-align: left;
}
.ch-motto {
  font-size: 13px; font-weight: 600; color: #D12132;
  padding: 0; text-align: right;
}
@media (max-width: 640px) {
  .ch-row { padding: 8px 12px; gap: 8px 10px; }
  .ch-band { padding: 0 12px 8px; }
  .ch-focus { font-size: 10.5px; letter-spacing: .14em; }
  .ch-motto { font-size: 12px; }
  .btn-setup { padding: 0 11px; font-size: 12px; }
}

/* ===== MOTTO "GIAO HÀNG ĐÚNG HẸN · PHÁT TRIỂN DOANH NGHIỆP" VÀO GIỮA (31/08, anh Tiền) =====
   .ch-band chuyển 3 cột (tôn chỉ trái · motto CHÍNH GIỮA · đối trọng phải) thay vì dàn
   trái/phải như cũ — motto nằm đúng trung tâm mọi màn hình. */
.ch-band { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px; }
.ch-focus { grid-column: 1; justify-self: start; text-align: left; }
.ch-motto { grid-column: 2; justify-self: center; text-align: center; }
.ch-band::after { content: ''; grid-column: 3; }

/* KHỐI MỤC TIÊU & NHỊP CHẠY / TIỀN & LÃI / CHI PHÍ AI — 3 con số + MORE (31/08) */
.today-viec .so-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.today-viec .so-3 .cell { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; padding: 6px 8px; background: #232324; min-width: 0; overflow: hidden; }
.today-viec .so-3 .cell span { display: block; font-size: 9px; letter-spacing: .04em; color: #adb2b8; font-weight: 700; }
.today-viec .so-3 .cell b { display: block; font-size: 12px; color: #f9fafb; margin-top: 2px; overflow-wrap: anywhere; line-height: 1.3; }
.today-viec .so-3 .cell small { display: block; font-size: 9px; color: #81858c; margin-top: 2px; }
.today-viec .dh-hanh-dong { font-size: 11px; color: #f7ad31; margin: 2px 0 0; line-height: 1.4; }


/* KHUNG CHAT VỪA KHUÔN HÌNH — KHÔNG TRÀN (31/08) */
.page-today .today-kathy { overflow: hidden; }
@media (min-width: 1024px) { .page-today .today-kathy { top: 74px; height: calc(100dvh - 96px); } }
.page-today .today-kathy .comm-zone { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.page-today .today-kathy .chat-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.page-today .today-kathy .chat-head, .page-today .today-kathy .ctx-bar,
.page-today .today-kathy .chat-trace, .page-today .today-kathy .chat-form { flex: 0 0 auto; }


/* SỐ NÉN NHỎ (31/08) */
.today-viec .kpi-current { font-size: 14px !important; font-weight: 700; color: #0f1115; }
.today-viec .kpi-name { font-size: 11px; font-weight: 600; }
.today-viec .kpi-target { font-size: 10.5px; }
.today-viec .kpi-meta { font-size: 9.5px; }
.today-viec .hd-num, .today-viec .wig-num { font-size: 13px; overflow-wrap: anywhere; }
.today-viec .desk-block .desk-source { font-size: 9.5px; color: #adb2b8; line-height: 1.35; }

/* TÊN NGƯỜI ĐANG ĐĂNG NHẬP — chỉ tên, màu xanh (31/08, anh Tiền) */
.dn-cum { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dn-chip { color: #22A06B; background: rgba(34, 160, 107, 0.10); border: 1px solid rgba(34, 160, 107, 0.25);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; }

/* GIỚI TÍNH NHÂN SỰ (31/08, anh Tiền) — chip ♂/♀ + ô chọn nhỏ trên khối nhân sự */
.hd-gt { margin-left: 6px; background: #232324; border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f9fafb; border-radius: 6px; font-size: 10.5px; padding: 1px 4px; }
.today-viec .hd-gt { font-size: 10.5px; }

/* CÂU TRẢ LỜI AI LIỀN MỘT KHỐI (31/08, anh Tiền: "rời rạc — giữ xuống dòng như cũ") */
.comm-zone .text-response, .comm-zone .chat-text, .comm-zone .response-group p { white-space: pre-wrap; }

/* CỠ CHỮ Ô CHAT TO HƠN (31/08, anh Tiền: "cỡ chữ hơi bé") */
.comm-zone .text-response, .comm-zone .chat-text { font-size: 14.5px; line-height: 1.65; }
.comm-zone .chat-input, .comm-zone .comm-input { font-size: 15px; }
.comm-zone .msg-act { font-size: 14px; width: 28px; height: 28px; }
.comm-zone .chat-sender, .comm-zone .ctx-chip { font-size: 11.5px; }
.comm-zone .chat-trace, .comm-zone .response-sources { font-size: 11px; }
.comm-zone .kathy-dang-soan { font-size: 14.5px; }

/* ===== PHONG CÁCH HARNESS: KHOẢNG CÁCH & TRÌNH BÀY (31/08, anh Tiền) =====
   Tin nhắn thở (gap 22px), avatar tròn, câu trả lời dạng khối đọc thoáng,
   ô nhập viên thuốc rộng rãi, hàng nút dưới câu trả lời cách đều — đúng nhịp Harness. */
.comm-zone .chat-list { gap: 22px; padding: 18px 20px; }
.comm-zone .chat-message { gap: 12px; align-items: flex-start; }
.comm-zone .chat-avatar { width: 30px; height: 30px; font-size: 12px; }
.comm-zone .chat-avatar-logo { width: 30px; height: 30px; border-radius: 50%; }
.comm-zone .from-system .chat-bubble { padding-top: 2px; }
.comm-zone .from-user .chat-bubble { padding-top: 2px; }
.comm-zone .text-response, .comm-zone .chat-text { line-height: 1.75; margin: 0 0 6px; }
.comm-zone .from-user .chat-text { margin: 0; }
.comm-zone .msg-actions { margin-top: 10px; gap: 6px; }
.comm-zone .msg-act { width: 30px; height: 30px; }
.comm-zone .chat-head { padding: 14px 18px; }
.comm-zone .ctx-bar { padding: 10px 18px; }
.comm-zone .chat-trace { padding: 8px 18px; font-size: 11px; }
.comm-zone .chat-form { border-radius: 24px; padding: 9px 9px 9px 18px; margin: 0 12px 10px; }
.comm-zone .btn-send-tron { width: 40px; height: 40px; font-size: 19px; }
.comm-zone .goi-y-row { padding: 2px 20px 10px; }
.comm-zone .goi-y-chip { padding: 8px 14px; font-size: 12.5px; }
.comm-zone .response-group { gap: 12px; }
.comm-zone .response-card, .comm-zone .order-risk { border-radius: 14px; }


/* ===== PHÊ DUYỆT L3 — 1 CHẠM TRONG Ô CHAT (02/09/2026, anh Tiền) ===== */
.approval-thong { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid #E4D28A;
  background: #FFFBEE; border-radius: 10px; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; }
.approval-summary { width: 100%; margin: 0 0 2px; font-size: 13px; color: #5a4a1a; }
.approval-thong .btn { min-height: 36px; }
.pv-badge { font-size: 11px; font-weight: 700; color: #8a6d00; margin-left: auto; }
.pv-xong { color: #2e7d32; }


/* ===== BÀN 5.0 — BẬC 1: TỒN KHO & ĐƠN TRỄ SỐNG (02/09/2026) ===== */
.live-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px 0 2px; }
.live-bar-title { font-size: 12px; font-weight: 700; color: #666; }
.live-btn { min-height: 34px; }
.live-zone { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff; margin: 10px 0; }
.live-zone--risk { border-color: #E2B93B; background: #FFFBEE; }
.live-head { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: #444;
  letter-spacing: .03em; }
.live-row { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0; border-top: 1px dashed #eee; }
.live-val { color: #666; }
.live-do { color: #b71c1c; font-weight: 700; }
/* CEO (Nhã): lỗi bộ phận — bấm dòng mở chi tiết + nút xử lý (02/09) */
.live-exc { cursor: pointer; flex-wrap: wrap; }
.live-exc:hover { background: #fdf6e3; }
.live-exc-main { flex: 0 1 auto; min-width: 0; }
.live-exc-detail { flex-basis: 100%; display: none; margin-top: 4px; padding: 6px 8px;
  background: #fff; border: 1px solid #e8dcb8; border-radius: 6px; }
.live-exc.live-open .live-exc-detail { display: block; }
.live-exc-detail-txt { font-size: 11.5px; line-height: 1.45; color: #555;
  white-space: pre-wrap; word-break: break-word; }
.live-exc-actions { margin-top: 6px; display: flex; gap: 8px; }
.exc-btn { border: 1px solid #cbb26a; background: #fffdf4; border-radius: 6px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: #6b5b25; }
.exc-btn:hover { background: #f7efcf; }
.exc-btn.exc-ok { border-color: #2e7d32; color: #1b5e20; background: #f1f8f1; }
.exc-btn.exc-ok:hover { background: #e0f0e0; }
.live-exc-repeat { font-size: 11.5px; color: #8a6d1a; background: #fdf6e3;
  border: 1px dashed #e2b93b; border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; }
.exc-assign { border: 1px solid #cbb26a; border-radius: 6px; background: #fff;
  padding: 3px 6px; font-size: 11.5px; color: #4a3d10; max-width: 210px; }
.exc-assign-go { border-color: #3949ab; color: #283593; background: #f2f4fb; }
.exc-assign-go:hover { background: #e3e7f7; }
/* NK-137: doanh số / công nợ / lịch tiền */
.row-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; padding: 4px 0; border-top: 1px dashed #eee; }
.row-stat b { font-weight: 800; color: #444; }
.row-stat-v { font-weight: 800; color: #1b5e20; font-size: 13.5px; }
.cn-list { display: none; margin-top: 4px; padding: 6px 8px; background: #f7f7f7;
  border: 1px solid #e8e8e8; border-radius: 6px; }
.cn-list.cn-open { display: block; }
.cn-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  padding: 2px 0; color: #555; }


/* ===== TRA SỐNG THEO YÊU CẦU (02/09 chiều — chỉ hiện khi bấm) ===== */
.live-pad { margin: 10px 0 4px; }

/* ===== BÀN HỒNG — FINANCE & FULFILLMENT OPERATING DESK (AI 5.1, 03/09) ===== */
.hd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 6px; }
.hd-kpi { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 4px;
  cursor: pointer; text-align: center; font-family: inherit; }
.hd-kpi b { display: block; font-size: 16px; font-weight: 900; color: #1b5e20; }
.hd-kpi span { font-size: 10.5px; color: #666; }
.hd-risk b, .hd-kpi.hd-no b { color: #b71c1c; }
.hd-kpi.hd-loi b { color: #b71c1c; }
.hd-oh { color: #b71c1c !important; font-weight: 800; }
.hd-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.exc-btn--on { background: #2e7d32 !important; color: #fff !important; border-color: #2e7d32 !important; }
.hd-flash { outline: 2px solid #2e7d32; outline-offset: 2px; }
.hd-tabs { display: none; gap: 6px; margin: 8px 0; }
.hd-mobile-tab { display: none; } /* bản mobile ẩn trên desktop — chỉ 1 bản */
.hd-stack { display: contents; }
@media (max-width: 899px) {
  .hd-tabs { display: flex; flex-wrap: wrap; }
  .hd-stack { display: none; }
  .hd-mobile-tab { display: contents; }
  .hd-mobile-tab.hd-mt-kathy { display: contents; }
  .hd-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* AI 5.1: chip hỏi nhanh + KATHY full mobile */
.hd-chip { font-size: 11px; padding: 3px 8px; }
@media (max-width: 899px) {
  body.hd-kathy-open .hong-desk { display: none; }
  body.hd-kathy-open .today-layout { grid-template-columns: 1fr !important; }
  body.hd-kathy-open .today-kathy { display: block !important; max-height: 92vh; }
  body.hd-kathy-open .today-kathy .comm-input, body.hd-kathy-open .chat-input { font-size: 16px; }
}

/* ---- BIQ200 §XI: MY OUTCOME + MY DECISIONS trên bàn vận hành (NK-224) ---- */
.xi-khoi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.xi-o { border: 1px solid #E3E6EE; border-radius: 10px; padding: 11px 13px; background: #FCFDFF; }
.xi-o h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.xi-ds { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.55; }
.xi-ds li { margin-bottom: 4px; }
.xi-ds span { color: #6B7280; font-size: 11.5px; }
.xi-y { margin: 5px 0 0; font-size: 11.5px; color: #6B7280; line-height: 1.5; }
@media (max-width: 900px) { .xi-khoi { grid-template-columns: 1fr; } }