:root {
  --bg: #0f1117;
  --bg-card: #181b24;
  --bg-hover: #1f2430;
  --surface: #181b24;
  --border: #2a3040;
  --text: #e8eaef;
  --text-muted: #8b93a7;
  --primary: #ff6b35;
  --primary-hover: #ff8555;
  --accent: #3ecf8e;
  --danger: #ff5c5c;
  --warning: #f5a623;
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --font: "Be Vietnam Pro", system-ui, sans-serif;
  --rev-heat-low: var(--surface);
  --rev-heat-high: #0d7a6e;
  --rev-mkt-total-bg: #a67c00;
  --rev-mkt-total-fg: #fff;
  --rev-mkt-sum-bg: var(--bg-hover);
}

/* ── Light mode ──────────────────────────────────────────────── */
body.light-mode {
  --bg: #f0f2f7;
  --bg-card: #ffffff;
  --bg-hover: #e8eaf0;
  --surface: #ffffff;
  --border: #d8dce8;
  --text: #1a1d2e;
  --text-muted: #6b7180;
  --accent: #059669;
  --danger: #dc2626;
  --warning: #d97706;
  --shadow: 0 4px 20px rgba(0,0,0,.1);
  --rev-heat-low: #ffffff;
  --rev-mkt-total-bg: #d4a017;
  --rev-mkt-total-fg: #1a1a1a;
  --rev-mkt-sum-bg: #f1f5f9;
}
body.light-mode .ads-pivot-table thead th {
  background: #e8eaf0;
  color: #1a1d2e;
}
body.light-mode .inhouse-chip { background: rgba(0,0,0,.04); }
body.light-mode .inhouse-progress-bar-track { background: rgba(0,0,0,.08); }
body.light-mode .inhouse-meta-tag { background: rgba(0,0,0,.04); }
body.light-mode .inhouse-img-del { background: rgba(0,0,0,.55); }
body.light-mode .inhouse-card:hover { border-color: #b8bcd0; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.brand-logo {
  width: 130px;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}

.nav-group-label:hover {
  background: var(--bg-hover);
}

.nav-group-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.15s;
}

.nav-group.is-open .nav-group-chevron {
  transform: rotate(0deg);
}

.nav-group:not(.is-open) .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}

.nav-group:not(.is-open) .nav-group-items {
  display: none;
}

.nav-item {
  background: none;
  border: none;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-item.active {
  background: rgba(255, 107, 53, 0.12);
  color: var(--primary);
}

.nav-subitem {
  padding: 10px 16px 10px 20px;
  font-size: 13px;
  font-weight: 500;
}

.nav-single .nav-item {
  cursor: default;
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.connection {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.connection .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.connection.ok .dot { background: var(--accent); }
.connection.error .dot { background: var(--danger); }
.connection.loading .dot { background: var(--warning); animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.shop-id {
  font-size: 12px;
  color: var(--text-muted);
}

.shop-select-wrap {
  margin-top: 12px;
}

.shop-select-wrap label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.shop-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  padding-right: 28px;
  font: inherit;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: menulist;
  pointer-events: auto;
}

.shop-select option {
  background: var(--bg-card);
  color: var(--text);
}

.shop-select option:checked,
.shop-select option:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.shop-select:focus {
  outline: none;
  border-color: var(--primary);
}

.shop-bar {
  margin-bottom: 20px;
  max-width: 640px;
}

.shop-bar .shop-select-wrap {
  margin-top: 0;
}

.shop-bar .shop-select {
  font-size: 14px;
  padding: 10px 12px;
  padding-right: 28px;
}

/* Main */
.main {
  padding: 28px 32px;
  overflow-y: auto;
}

.app:has(#marketingVideoView:not(.hidden)) {
  height: 100dvh;
  overflow: hidden;
}

.app:has(#marketingVideoView:not(.hidden)) > .main {
  min-height: 0;
  overflow: hidden;
}

.main:has(#marketingVideoView:not(.hidden)) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding-top: clamp(12px, 1.5vh, 16px);
  padding-bottom: clamp(12px, 1.5vh, 16px);
  padding-left: clamp(16px, 2vw, 32px);
  padding-right: clamp(16px, 2vw, 32px);
}

.main:has(#marketingVideoView:not(.hidden)) .topbar {
  margin-bottom: clamp(8px, 1vh, 10px);
  flex-shrink: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}

.topbar h2 {
  font-size: 24px;
  font-weight: 700;
}

.subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}

/* Theme toggle button */
.btn-theme-toggle {
  padding: 7px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-theme-toggle .icon-moon { display: none; }
.btn-theme-toggle .icon-sun  { display: block; }
body.light-mode .btn-theme-toggle .icon-sun  { display: none; }
body.light-mode .btn-theme-toggle .icon-moon { display: block; }

.orders-display-count {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.stat-card.accent {
  border-color: rgba(62, 207, 142, 0.3);
  background: linear-gradient(135deg, rgba(62, 207, 142, 0.08), var(--bg-card));
}

.stat-card.warning {
  border-color: rgba(245, 166, 35, 0.35);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.1), var(--bg-card));
}

.stat-card.warning .stat-value {
  color: var(--warning);
}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
}

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Filters */
.filters {
  padding: 20px;
  margin-bottom: 20px;
}

.filter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.35fr 1.35fr auto;
  gap: 14px;
  align-items: end;
}

.filter-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-action-group .btn {
  white-space: nowrap;
}

.datetime-picker {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238b93a7' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px !important;
}

.datetime-picker::placeholder {
  color: var(--text-muted);
}

/* Flatpickr — dark theme */
.flatpickr-calendar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
  font-family: inherit;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-days,
span.flatpickr-weekday {
  background: var(--bg-card);
  color: var(--text);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
}

.flatpickr-day {
  color: var(--text);
  border-radius: 8px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--bg-hover);
  border-color: var(--bg-hover);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.flatpickr-day.today {
  border-color: var(--accent);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--text-muted);
  opacity: 0.45;
}

.flatpickr-time {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text);
  background: var(--bg);
  border-radius: 6px;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time .numInputWrapper:hover input,
.flatpickr-time .numInputWrapper:focus-within input {
  background: var(--bg-hover);
  color: var(--text);
}

.flatpickr-time .numInputWrapper span:hover {
  background: var(--bg-hover);
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--text-muted);
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: var(--text-muted);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--text-muted);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--text);
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.field input,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.field input:focus,
.field select:focus {
  border-color: var(--primary);
}

.webhook-settings-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.shop-bar .webhook-settings-row {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 16px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.webhook-settings-row .filter-hint {
  margin-top: 0;
  flex: 1 1 100%;
}
.webhook-toggle-label {
  font-size: 14px;
  font-weight: 500;
}
.webhook-toggle-sub {
  font-weight: 400;
  color: var(--text-muted);
}

.webhook-token-btn {
  padding: 4px 8px;
  min-height: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.webhook-token-btn svg {
  display: block;
}

.webhook-token-saved {
  margin-bottom: 8px;
}

.webhook-assignee-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  flex-wrap: nowrap;
}

.webhook-assignee-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.webhook-assignee-select {
  padding: 6px 10px;
  min-height: 28px;
  font-size: 13px;
  max-width: 220px;
}

.filter-extra {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.filter-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.filter-hint strong {
  color: var(--warning);
  font-weight: 600;
}

.filter-hint-warn {
  color: var(--danger, #c0392b);
  font-weight: 500;
}

.missing-tag-ok {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.missing-tag-run {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.readiness-box {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.06);
}

.readiness-box h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.geocode-blockers {
  margin: 0 24px 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  font-size: 13px;
}

.geocode-blockers h4 {
  margin: 0 0 8px;
  color: #f87171;
  font-size: 13px;
}

.geocode-blockers ul {
  margin: 0;
  padding-left: 18px;
}

.geocode-blockers li {
  margin-bottom: 4px;
}

.cell-missing-col {
  min-width: 180px;
}

.missing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}

.missing-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 92, 92, 0.15);
  color: var(--danger);
  white-space: nowrap;
}

.row-incomplete {
  background: rgba(255, 92, 92, 0.04) !important;
}

.row-incomplete:hover {
  background: rgba(255, 92, 92, 0.08) !important;
}

.cell-actions {
  vertical-align: middle;
  white-space: nowrap;
}

.cell-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}

.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.btn-icon:hover { color: var(--text); }

/* CSKH */
.cskh-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.cskh-search {
  flex: 1;
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.cskh-market-filter {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.cskh-days-row {
  display: flex;
  gap: 8px;
}

.cskh-days-row input {
  flex: 1;
}

/* CSKH — mốc chăm sóc + trạng thái */
.cskh-milestone-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cskh-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.cskh-status-empty {
  color: #dc2626;
  font-weight: 600;
  cursor: pointer;
}

tr.cskh-row { cursor: pointer; }
tr.cskh-row:hover { background: var(--surface); }

.cskh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.cskh-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 901;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.cskh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.cskh-modal-head h3 { margin: 0; }
.cskh-modal-body { padding: 16px 18px; }

.cskh-care-milestone-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

.cskh-needs-status {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

.cskh-care-checks {
  display: flex;
  gap: 20px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.cskh-care-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cskh-history { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.cskh-history h4 { margin: 0 0 10px; }

.cskh-history-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.cskh-history-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 4px;
}

.cskh-history-meta { color: var(--muted, #6b7280); font-size: 12px; }
.cskh-history-note { font-size: 13px; margin-top: 4px; }

/* Table */
.table-card { overflow: hidden; }

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--bg-hover);
}

tbody tr:last-child td {
  border-bottom: none;
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px !important;
}

.cell-code {
  font-weight: 600;
  color: var(--primary);
}

.cell-products {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.cell-money {
  font-weight: 600;
  white-space: nowrap;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-new { background: rgba(62, 207, 142, 0.15); color: var(--accent); }
.badge-confirmed { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-shipping { background: rgba(245, 166, 35, 0.15); color: var(--warning); }
.badge-done { background: rgba(139, 147, 167, 0.15); color: var(--text-muted); }
.badge-cancelled { background: rgba(255, 92, 92, 0.15); color: var(--danger); }
.badge-default { background: var(--bg-hover); color: var(--text-muted); }

#pageInfo {
  font-size: 13px;
  color: var(--text-muted);
}

/* Progress */
.progress-bar {
  margin-bottom: 20px;
}

.progress-track {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s;
}

#progressText {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.progress-detail {
  font-size: 13px;
  color: var(--text);
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}

.progress-eta {
  font-size: 14px;
  color: var(--primary);
  text-align: center;
  margin-top: 4px;
  font-weight: 600;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-content.modal-lg {
  max-width: 720px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.geocode-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.geocode-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.geocode-box h4 {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.geocode-box.suggested {
  border-color: rgba(62, 207, 142, 0.4);
}

.confidence-bar {
  height: 8px;
  background: var(--bg-hover);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 6px;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warning), var(--accent));
  border-radius: 4px;
}

.confidence-low .confidence-fill { background: var(--danger); }
.confidence-mid .confidence-fill { background: var(--warning); }
.confidence-high .confidence-fill { background: var(--accent); }

.warning-list {
  margin-top: 12px;
  padding: 12px;
  background: rgba(245, 166, 35, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: var(--warning);
}

.warning-list li { margin-left: 18px; }

.geocode-status {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.geocode-status-ok {
  background: rgba(62, 207, 142, 0.12);
  color: var(--accent);
  border: 1px solid rgba(62, 207, 142, 0.3);
}

.geocode-status-warn {
  background: rgba(245, 166, 35, 0.12);
  color: var(--warning);
  border: 1px solid rgba(245, 166, 35, 0.3);
}

.geocode-status-fail {
  background: rgba(255, 92, 92, 0.1);
  color: var(--danger);
  border: 1px solid rgba(255, 92, 92, 0.3);
}

.geocode-input-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

.geocode-input-box label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.geocode-input-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  word-break: break-word;
}

.geocode-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.ai-reasoning {
  background: var(--bg);
  border-left: 3px solid var(--warning);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.geocode-box p {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.geocode-box code {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 4px;
}

.geocode-product-match {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(56, 189, 120, 0.08);
  border: 1px solid rgba(56, 189, 120, 0.25);
}

.geocode-product-match h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.geocode-product-info {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.25);
}

.geocode-product-muted {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
}

.geocode-product-warn {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
}

.geocode-wa-check {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.06);
}

.geocode-wa-check h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.geocode-wa-ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.geocode-wa-no {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}

.geocode-wa-warn {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}

.geocode-wa-muted {
  opacity: 0.9;
}

.wa-status-line {
  margin: 0;
  font-size: 13px;
}

.wa-open-link {
  margin-left: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}

.wa-open-link:hover {
  text-decoration: underline;
}

.wa-cell {
  margin-top: 4px;
}

.wa-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  text-decoration: none;
}

.wa-yes {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.wa-no {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.wa-skip {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.wa-error {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.phone-with-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cell-phone {
  white-space: nowrap;
}

.wa-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.geocode-price-line {
  margin: 0 0 8px;
  font-size: 14px;
}

.geocode-price-line .cell-muted {
  font-size: 12px;
}

.geocode-note-box {
  margin-bottom: 8px;
}

.geocode-note-box label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cell-note-snippet {
  font-size: 11px;
  margin-bottom: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-limit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.batch-limit-row label {
  font-size: 13px;
  color: var(--text-muted);
}

.batch-limit-row input[type="number"] {
  width: 72px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
}

.cell-muted {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cell-error-hint {
  color: var(--danger);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.detail-item span {
  font-size: 14px;
}

.detail-full {
  grid-column: 1 / -1;
}

.items-list {
  margin-top: 16px;
}

.items-list h4 {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 14px;
  box-shadow: var(--shadow);
  z-index: 200;
  max-width: 360px;
}

.toast.error {
  border-color: var(--danger);
  color: var(--danger);
}

.toast.success {
  border-color: var(--accent);
}

.hidden { display: none !important; }

.ops-excel-intro {
  margin-bottom: 16px;
  padding: 16px 20px;
}

.ops-subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.ops-subtab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ops-subtab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.ops-subtab.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.admin-subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.admin-subtab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-subtab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.admin-subtab.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.inhouse-row-unmatched {
  background: rgba(234, 179, 8, 0.08);
}

/* —— Báo cáo Kho —— */
.inhouse-report-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.inhouse-report-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(62, 207, 142, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-color: rgba(62, 207, 142, 0.2);
}

.inhouse-report-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.inhouse-report-period {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.inhouse-report-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inhouse-report-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}

.inhouse-report-status.is-ready {
  border-color: rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.1);
  color: var(--accent);
}

.inhouse-report-status.is-warming {
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.1);
  color: var(--warning);
}

.inhouse-report-filters {
  padding: 16px 18px;
}

/* —— Cảnh báo nhập hàng —— */
.inhouse-alert-banner {
  padding: 12px 16px;
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.08);
}

.inhouse-alert-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inhouse-alert-banner-icon {
  font-size: 18px;
  line-height: 1;
}

.inhouse-alert-banner-text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  min-width: 180px;
}

.inhouse-alert-banner-text strong {
  color: var(--warning);
  font-weight: 800;
}

.inhouse-alert-section {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-color: rgba(245, 166, 35, 0.25);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.06) 0%, transparent 100%);
}

.inhouse-alert-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.inhouse-alert-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inhouse-alert-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.inhouse-alert-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.inhouse-alert-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.inhouse-alert-filter-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  font-size: 13px;
  min-width: 180px;
}

.inhouse-alert-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
}

.inhouse-alert-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.inhouse-alert-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.inhouse-alert-config-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.inhouse-alert-config-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.inhouse-alert-config-unit {
  font-size: 13px;
  color: var(--text-muted);
}

.inhouse-alert-config-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 72ch;
}

.inhouse-alert-config-label {
  font-size: 12px;
  color: var(--text-muted);
}

.inhouse-alert-config-input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.inhouse-alert-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.inhouse-alert-kpi {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}

.inhouse-alert-kpi-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.inhouse-alert-kpi-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.inhouse-alert-kpi--unmatched .inhouse-alert-kpi-value { color: var(--warning); }
.inhouse-alert-kpi--negative .inhouse-alert-kpi-value { color: var(--danger); }
.inhouse-alert-kpi--recv2 .inhouse-alert-kpi-value { color: #f59e0b; }
.inhouse-alert-kpi--qty-shortfall .inhouse-alert-kpi-value { color: #60a5fa; }
.inhouse-alert-kpi--cancelled .inhouse-alert-kpi-value { color: var(--text-muted); }
.inhouse-alert-kpi--shortfall .inhouse-alert-kpi-value { color: var(--accent); }
.inhouse-alert-kpi--total .inhouse-alert-kpi-value { color: var(--accent); }

.inhouse-alert-config-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.inhouse-alert-config-hint--ok { color: var(--success, #3ecf8e); }
.inhouse-alert-config-hint--err { color: var(--danger); }

.inhouse-alert-summary-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.inhouse-alert-table-scroll {
  overflow-x: auto;
}

.inhouse-alert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.inhouse-alert-table--orders .col-w-product { width: 26%; }
.inhouse-alert-table--orders .col-w-market { width: 5%; }
.inhouse-alert-table--orders .col-w-num { width: 6%; }
.inhouse-alert-table--orders .col-w-recv { width: 12%; }
.inhouse-alert-table--orders .col-w-alert { width: 27%; }

.inhouse-alert-table th,
.inhouse-alert-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow: hidden;
}

.inhouse-alert-table th.col-num,
.inhouse-alert-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inhouse-alert-table td.col-missing {
  color: var(--warning);
  font-weight: 600;
}

.inhouse-alert-table td.col-market,
.inhouse-alert-table th:nth-child(2) {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
  padding-right: 6px;
}

.inhouse-alert-order-product {
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.inhouse-recv-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.inhouse-recv-cell--empty {
  color: var(--text-muted);
}

.inhouse-recv-cell-qty {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.inhouse-recv-cell-date {
  font-size: 11px;
  color: var(--text-muted);
}

.inhouse-recv-cell-overdue {
  display: inline-block;
  width: fit-content;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.inhouse-alert-table td.col-alert {
  vertical-align: middle;
}

.inhouse-alert-cell-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.inhouse-alert-cell-actions .inhouse-alert-goto {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
}

.inhouse-alert-row--overdue td {
  background: rgba(245, 158, 11, 0.04);
}

.inhouse-alert-table td.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 16px;
}

.inhouse-alert-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.inhouse-alert-page-info {
  font-size: 12px;
  color: var(--text-muted);
}

.inhouse-alert-pagination {
  margin-left: auto;
}

.inhouse-alert-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px 4px 2px 0;
  border: 1px solid transparent;
}

.inhouse-alert-badge--unmatched {
  color: var(--warning);
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.3);
}

.inhouse-alert-badge--negative_closing {
  color: var(--danger);
  background: rgba(255, 92, 92, 0.1);
  border-color: rgba(255, 92, 92, 0.25);
}

.inhouse-alert-badge--recv2_overdue {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

.inhouse-alert-badge--cancelled_note {
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.12);
  border-color: rgba(128, 128, 128, 0.25);
}

.inhouse-alert-badge--qty_shortfall {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
}

.inhouse-alert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.inhouse-card--warn {
  border-color: rgba(245, 166, 35, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.12);
}

.inhouse-card--info {
  border-color: rgba(96, 165, 250, 0.35);
}

.inhouse-card--cancelled {
  opacity: 0.72;
  border-color: rgba(128, 128, 128, 0.35);
}

.inhouse-card--highlight {
  animation: inhouseHighlight 2s ease;
}

@keyframes inhouseHighlight {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.45); }
}

.inhouse-alert-row--cancel td {
  color: var(--text-muted);
}

.inhouse-alert-goto {
  white-space: nowrap;
}

.inhouse-report-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}

.inhouse-report-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.inhouse-report-filter--actions {
  flex: 1 1 auto;
}

.inhouse-report-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.inhouse-report-month,
.inhouse-report-market {
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inhouse-report-month:focus,
.inhouse-report-market:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.12);
}

.inhouse-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inhouse-report-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inhouse-report-hint {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  word-break: break-word;
  max-height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.inhouse-report-hint.is-warming {
  border-color: rgba(245, 166, 35, 0.3);
  background: rgba(245, 166, 35, 0.08);
  color: var(--warning);
}

.inhouse-report-hint.is-error {
  border-color: rgba(255, 92, 92, 0.3);
  background: rgba(255, 92, 92, 0.08);
  color: var(--danger);
}

.inhouse-report-hint.is-success {
  border-color: rgba(62, 207, 142, 0.3);
  background: rgba(62, 207, 142, 0.08);
  color: var(--accent);
}

.inhouse-report-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.05);
  color: var(--text-muted);
  font-size: 13px;
}

.inhouse-report-loading-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(62, 207, 142, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: inhouseSpin 0.7s linear infinite;
  flex-shrink: 0;
}

.inhouse-report-loading-spin--inline {
  width: 18px;
  height: 18px;
}

@keyframes inhouseSpin {
  to { transform: rotate(360deg); }
}

.inhouse-kpi-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inhouse-kpi-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 0 2px;
}

.inhouse-kpi-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.inhouse-kpi-section-formula {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.inhouse-report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.inhouse-report-empty--error {
  color: var(--danger);
}

.inhouse-report-empty-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.7;
}

.inhouse-report-product-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
}

.inhouse-report-table-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.inhouse-report-table-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.inhouse-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inhouse-legend-dot--warn {
  background: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.25);
}

.inhouse-report-table-scroll {
  overflow-x: auto;
  max-height: min(520px, 60vh);
  overflow-y: auto;
}

.inhouse-product-name {
  font-weight: 500;
  line-height: 1.35;
}

.inhouse-product-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.2);
  color: #ca8a04;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.inhouse-report-totals td {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(62, 207, 142, 0.06);
  border-top: 2px solid rgba(62, 207, 142, 0.25);
  color: var(--text);
}

.inhouse-report-totals td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inhouse-bchdkd-card {
  overflow: hidden;
}

.inhouse-bchdkd-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(62, 207, 142, 0.12);
  color: var(--accent);
  flex-shrink: 0;
}

.inhouse-bchdkd-placeholder {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.inhouse-bchdkd-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.inhouse-bchdkd-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(62, 207, 142, 0.1);
  color: var(--accent);
  flex-shrink: 0;
}

.inhouse-bchdkd-block-head b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0;
  padding: 0;
  border: none;
}

.inhouse-bchdkd-block-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 700px) {
  .inhouse-report-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .inhouse-report-month,
  .inhouse-report-market {
    width: 100%;
    min-width: 0;
  }

  .inhouse-report-actions {
    width: 100%;
  }

  .inhouse-report-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .inhouse-report-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .inhouse-report-table-legend {
    align-self: flex-start;
  }
}

/* —— Business Manager page —— */
.bm-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bm-page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.bm-page-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bm-page-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.bm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 10px;
  min-width: min(100%, 360px);
}

.bm-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
}

.bm-kpi-val {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.bm-kpi-label {
  margin-top: 2px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.bm-kpi-val.bm-kpi-ok {
  color: var(--accent);
}

.bm-kpi-val.bm-kpi-warn {
  color: #f59e0b;
}

.bm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.bm-toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

.bm-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.bm-tool-btn:hover {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.08);
}

.bm-tool-btn.is-active {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.14);
  color: var(--accent);
}

.bm-tool-icon {
  font-size: 1rem;
  line-height: 1;
}

.bm-drawer {
  animation: bm-drawer-in 0.2s ease-out;
}

@keyframes bm-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bm-drawer-card {
  padding: 16px 18px;
}

.bm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bm-drawer-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.bm-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.bm-drawer-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.bm-meta-line {
  margin-top: 10px;
  margin-bottom: 0;
}

.bm-list-section {
  margin-top: 4px;
}

.bm-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.bm-list-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.bm-list-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.bm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bm-list-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.bm-card {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bm-card:hover {
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.bm-card-inactive {
  opacity: 0.65;
}

.bm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bm-card-name {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
}

.bm-card-id {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bm-card-id code {
  font-size: 0.9em;
}

.bm-card-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bm-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.bm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.bm-card-meta-item strong {
  color: var(--text);
}

.bm-card-note {
  font-style: italic;
}

.bm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bm-card-ads {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.bm-card-ads-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.bm-ad-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.bm-ad-status-on {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent);
}

.bm-ad-status-off {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.admin-bm-link {
  color: var(--accent);
  text-decoration: none;
}

.admin-bm-link:hover {
  text-decoration: underline;
}

.bm-select {
  width: 100%;
}

.bm-report-filters {
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .bm-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .bm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .bm-toolbar-spacer {
    display: none;
  }

  .bm-tool-btn,
  .bm-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .bm-card-top {
    flex-direction: column;
  }

  .bm-card-top-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.admin-bm-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-field-wide {
  grid-column: 1 / -1;
}

.admin-bms-table .admin-bm-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.admin-bms-table .admin-bm-link:hover {
  text-decoration: underline;
}

.admin-fb-meta {
  margin-top: 8px;
  margin-bottom: 0;
}

.admin-fb-sync-card {
  margin-bottom: 16px;
}

.admin-fb-sync-card code {
  font-size: 0.9em;
}

.admin-bms-table .admin-bm-ad-count {
  display: inline-block;
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.admin-bm-ads-row td {
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px 14px;
}

.admin-bm-ads-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.admin-bm-ads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-bm-ads-table th,
.admin-bm-ads-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.admin-bm-ads-table th {
  color: var(--text-muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}

.admin-bm-ads-empty {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.admin-bm-ad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-ads-report-card {
  margin-bottom: 16px;
}

.admin-ads-report-wrap {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .admin-bm-form-grid {
    grid-template-columns: 1fr;
  }
}

.ops-build-table th:nth-child(1) { width: 120px; }
.ops-build-table th:nth-child(2) { min-width: 180px; }
.ops-build-table th:nth-child(3),
.ops-build-table th:nth-child(4),
.ops-build-table th:nth-child(7),
.ops-build-table th:nth-child(8) { width: 100px; }
.ops-build-table th:nth-child(5),
.ops-build-table th:nth-child(6) { min-width: 280px; }

.ops-field-order {
  font-variant-numeric: tabular-nums;
  max-width: 140px;
}

.ops-col-input {
  vertical-align: top;
  padding: 6px 8px !important;
}

.ops-field-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}

.ops-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.ops-field-qty,
.ops-field-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  max-width: 96px;
}

.ops-col-note-out {
  vertical-align: top;
  font-size: 0.92em;
  line-height: 1.45;
  word-break: break-word;
}

.ops-reconcile-ok {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.ops-reconcile-fail {
  color: var(--danger);
  font-weight: 600;
  white-space: nowrap;
}

.ops-excel-intro code {
  font-size: 0.85em;
  word-break: break-word;
}

.ops-excel-card .table-wrap {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.ops-excel-table th:nth-child(1) { min-width: 320px; }
.ops-excel-table th:nth-child(2) { min-width: 200px; }
.ops-excel-table th:nth-child(3),
.ops-excel-table th:nth-child(4),
.ops-excel-table th:nth-child(5) { width: 110px; }

.ops-col-note {
  vertical-align: top;
  padding: 6px 8px !important;
}

.ops-note-input {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}

.ops-note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.ops-col-readonly {
  vertical-align: middle;
}

.ops-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ops-row-loading td {
  opacity: 0.65;
}

.ops-row-error .ops-col-readonly {
  color: var(--danger);
}

.ops-row-ok .ops-col-readonly:first-of-type {
  color: var(--text);
}

/* Admin — quản lý shop */
.admin-form-card,
.admin-list-card {
  padding: 20px;
}

.admin-form-card {
  margin-bottom: 20px;
}

.admin-form-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.admin-field span {
  font-weight: 500;
  color: var(--text-muted);
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  color-scheme: inherit;
  box-sizing: border-box;
}

.admin-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.45;
}

.admin-field input::placeholder,
.admin-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.admin-field-key small {
  margin-top: 2px;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-form-status {
  margin: 12px 0 0;
  font-size: 13px;
}

.admin-form-status-info { color: var(--text-muted); }
.admin-form-status-success { color: var(--accent); }
.admin-form-status-error { color: var(--danger); }

.admin-shops-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-shops-table th,
.admin-shops-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.admin-shops-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}

.admin-key-cell {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-col-actions {
  white-space: nowrap;
  width: 1%;
}

.admin-ready-status-cell {
  font-size: 13px;
  max-width: 180px;
}

.admin-ready-status-cell-muted {
  color: var(--text-muted);
}

.admin-ready-status-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.admin-ready-status-select {
  width: 100%;
  max-width: 420px;
}

.admin-ready-status-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.nav > .nav-item:not(.nav-subitem) {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}

.mobile-menu-btn,
.mobile-menu-backdrop,
.mobile-menu-drawer {
  display: none;
}

.mobile-menu-btn {
  align-items: center;
  justify-content: center;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 1001;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn svg {
  display: block;
  pointer-events: none;
}

.mobile-menu-btn:active {
  background: var(--bg-hover);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.55);
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1003;
  width: min(300px, 88vw);
  height: 100%;
  height: 100dvh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  box-shadow: var(--shadow);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-menu-drawer.open {
  transform: translateX(0);
}

body.mobile-layout .mobile-menu-btn,
body.mobile-layout .mobile-menu-drawer {
  display: flex;
}

body.mobile-layout .mobile-menu-backdrop:not(.hidden) {
  display: block;
}

body.mobile-layout .sidebar {
  display: none !important;
}

body.mobile-layout .app {
  grid-template-columns: 1fr;
}

body.mobile-layout .main {
  padding: calc(56px + env(safe-area-inset-top, 0px)) 16px 16px;
}

body.mobile-layout .topbar {
  flex-direction: column;
  align-items: stretch;
  padding-left: 52px;
}

body.mobile-layout .stats {
  grid-template-columns: 1fr 1fr;
}

body.mobile-layout .filter-grid {
  grid-template-columns: 1fr;
}

body.mobile-layout .topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.mobile-layout .topbar-actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
  justify-content: center;
}

body.mobile-layout.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.mobile-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.mobile-menu-header .brand {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.mobile-menu-header .brand-logo { width: 100px; }

.mobile-menu-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 24px;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-section + .mobile-menu-section {
  margin-top: 16px;
}

.mobile-menu-section-label {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mobile-menu-item {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-item.active {
  background: rgba(255, 107, 53, 0.14);
  border-color: rgba(255, 107, 53, 0.45);
  color: var(--primary);
}

@media (max-width: 896px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: calc(56px + env(safe-area-inset-top, 0px)) 16px 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: stretch; padding-left: 52px; }
  .topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu-drawer {
    display: flex;
  }

  .mobile-menu-backdrop:not(.hidden) {
    display: block;
  }

  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* ===== Team Kế toán: Đối soát COD ===== */
.acc-subtab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.acc-subtab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ===== Chi phí Ads (Kế toán) ===== */
.ads-page {
  padding-bottom: 24px;
}

.ads-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.ads-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ads-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.ads-subtitle strong {
  color: var(--text);
  font-weight: 700;
}

.ads-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ads-status-pill {
  font-size: 12px;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}

.ads-status-pill.is-loading {
  color: var(--primary);
  border-color: rgba(255, 107, 53, 0.35);
  background: rgba(255, 107, 53, 0.08);
  font-weight: 600;
}

.ads-status-pill.is-ok {
  color: var(--accent);
  border-color: rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.1);
}

.ads-status-pill.is-error {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}

.ads-errors {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
  font-size: 13px;
  line-height: 1.5;
}

.ads-errors strong {
  color: #fff;
}

.ads-errors ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.ads-errors li {
  margin: 4px 0;
}

.ads-filters-card {
  margin-bottom: 16px;
}

.ads-filters-top {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.ads-date-input,
.ads-month-input {
  min-width: 160px;
}

.ads-filter-actions {
  flex-wrap: wrap;
}

.ads-btn-icon {
  opacity: 0.85;
  margin-right: 2px;
}

.ads-table-card {
  padding: 0;
  overflow: hidden;
}

.ads-email-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ads-email-field textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.ads-email-smtp-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px 12px;
  background: var(--bg);
}

.ads-email-smtp-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 0;
  color: var(--text-muted);
  list-style: none;
}

.ads-email-smtp-summary::-webkit-details-marker {
  display: none;
}

.ads-email-smtp-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  vertical-align: middle;
}

.ads-email-smtp-badge.is-custom {
  background: rgba(255, 107, 53, 0.15);
  color: #ff8c5a;
}

.ads-email-smtp-grid input:disabled,
.ads-email-smtp-grid input:read-only {
  opacity: 0.75;
  cursor: not-allowed;
}

.ads-email-smtp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ads-email-smtp-grid .admin-field-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding-top: 22px;
}

.ads-email-status {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}

.ads-email-status.is-ok {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

.ads-email-status.is-error {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}

.ads-email-status.is-loading {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.08);
}

.ads-email-note {
  margin: 0;
}

.ads-email-monthly-details {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}

.ads-email-monthly-enabled {
  margin-top: 0.5rem;
}

.ads-daily-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

.ads-daily-row {
  cursor: pointer;
}

.ads-daily-row:hover td {
  background: rgba(96, 165, 250, 0.08);
}

.ads-lock-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 244, 230, 0.15);
  color: #fbbf24;
}

@media (max-width: 720px) {
  .ads-email-smtp-grid {
    grid-template-columns: 1fr;
  }

  .ads-email-smtp-grid .admin-field-check {
    padding-top: 0;
  }
}

.ads-pivot-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

.ads-pivot-scroll {
  max-height: min(52vh, 520px);
}

.ads-pivot-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max(100%, 960px);
  font-size: 12px;
}

.ads-pivot-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1f2430;
  color: #f9fafb;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.ads-pivot-table thead th.ads-pivot-num {
  text-align: right;
  padding-right: 12px;
}

.ads-pivot-table thead th.ads-pivot-io {
  text-align: right;
}

.ads-pivot-table thead tr.ads-pivot-head-sub th {
  top: 38px;
  z-index: 2;
  font-size: 10px;
  padding: 6px 8px;
  color: #d1d5db;
}

.ads-pivot-table .ads-pivot-market {
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ads-pivot-table .ads-pivot-io {
  min-width: 88px;
}

.ads-pivot-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.ads-pivot-table tbody tr:not(.ads-pivot-total):hover td {
  background: rgba(255, 255, 255, 0.03);
}

.ads-pivot-table .ads-pivot-name {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
  max-width: 180px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}

.ads-pivot-table thead .ads-pivot-name {
  z-index: 3;
  left: 0;
}

.ads-pivot-table .ads-pivot-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
  min-width: 72px;
}

.ads-pivot-table tbody tr.ads-pivot-total td {
  background: rgba(255, 107, 53, 0.1);
  border-top: 2px solid rgba(255, 107, 53, 0.35);
  font-weight: 700;
  color: var(--text);
}

.ads-pivot-table tbody tr.ads-pivot-total .ads-pivot-name {
  background: rgba(255, 107, 53, 0.1);
}

.ads-pivot-table .ads-pivot-grand,
.ads-pivot-table .ads-pivot-grand-h {
  color: #ff8c5a;
  font-weight: 800;
}

.ads-table-head {
  padding: 16px 18px 0;
}

.ads-table-head h3 {
  margin: 0 0 2px;
}

.ads-table-scroll {
  overflow: auto;
  max-height: min(62vh, 720px);
  padding: 0 18px 16px;
}

.ads-table .ads-col-stt {
  width: 44px;
  color: var(--text-muted);
  font-size: 12px;
}

.ads-table .ads-col-period {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}

.ads-table .ads-col-account {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  max-width: 140px;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-table .ads-col-campaign {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 320px;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-table .rev-cell-name b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-table .rev-cell-name .ads-camp-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-channel {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}

.ads-channel--in {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.1);
}

.ads-channel--out {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.1);
}

.ads-channel--test {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
}

.ads-channel--up {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.35);
  background: rgba(192, 132, 252, 0.1);
}

.ads-market {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.ads-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 40px;
  border-top: 1px dashed var(--border);
  margin: 0 18px 18px;
  border-radius: 12px;
  background: var(--bg);
}

.ads-empty-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.7;
}

.ads-empty-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.ads-empty-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.5;
}

.ads-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.ads-empty-actions .btn {
  min-width: 140px;
}

.ads-mapping-card {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
}

.ads-mapping-card summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.ads-mapping-card summary::-webkit-details-marker {
  display: none;
}

.ads-mapping-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  transition: background 0.15s;
}

.ads-mapping-summary:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ads-mapping-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ads-mapping-summary-title::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
  color: var(--text-muted);
}

.ads-mapping-card[open] .ads-mapping-summary-title::before {
  transform: rotate(90deg);
}

.ads-mapping-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-mapping-badge.is-ok {
  color: var(--accent);
  border-color: rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.1);
}

.ads-mapping-body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--border);
}

.ads-mapping-desc {
  margin: 14px 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ads-mapping-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ads-mapping-file {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ads-mapping-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.ads-mapping-save-status {
  font-size: 12px;
  color: var(--text-muted);
}

.ads-mapping-save-status.is-ok {
  color: var(--accent);
}

.ads-mapping-save-status.is-error {
  color: #f87171;
}

.ads-mapping-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 12px;
}

.ads-mapping-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ads-mapping-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.ads-mapping-tab.active {
  color: var(--accent);
  border-color: rgba(62, 207, 142, 0.4);
  background: rgba(62, 207, 142, 0.1);
}

.ads-mapping-panel {
  margin-bottom: 8px;
}

.ads-mapping-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.ads-mapping-hint code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.ads-mapping-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.ads-mapping-table {
  margin: 0;
  min-width: 520px;
}

.ads-mapping-table th:last-child,
.ads-mapping-table td:last-child {
  width: 40px;
  text-align: center;
}

.ads-mapping-table input,
.ads-mapping-table select {
  width: 100%;
  min-width: 72px;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
}

.ads-mapping-table input:focus,
.ads-mapping-table select:focus {
  outline: none;
  border-color: rgba(62, 207, 142, 0.45);
  background: rgba(0, 0, 0, 0.2);
}

.ads-mapping-del {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ads-mapping-del:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.ads-mapping-add-row {
  margin-top: 8px;
}

.ads-mapping-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.ads-mapping-test-input {
  flex: 1 1 240px;
  min-width: 200px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.ads-mapping-test-result {
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 768px) {
  .ads-filter-actions {
    width: 100%;
  }

  .ads-filter-actions .btn {
    flex: 1 1 auto;
  }

  .ads-table-scroll {
    max-height: 50vh;
  }
}

.cod-step-card { display: flex; flex-direction: column; gap: 16px; }
.cod-step-head { display: flex; align-items: flex-start; gap: 12px; }
.cod-step-head h3 { font-size: 16px; margin-bottom: 2px; }
.cod-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropzone */
.cod-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg);
}
.cod-dropzone:hover { border-color: var(--primary); }
.cod-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(255, 107, 53, 0.08);
}
.cod-dz-icon { color: var(--text-muted); margin-bottom: 8px; }
.cod-dz-title { font-size: 15px; font-weight: 500; }
.cod-dz-hint { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.cod-link {
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.cod-file-name {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.cod-columns {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--bg-hover);
  border-radius: 10px;
}
.cod-col-field { display: flex; flex-direction: column; gap: 4px; }
.cod-col-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.cod-col-field input {
  width: 90px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  text-transform: uppercase;
}

.cod-actions { display: flex; gap: 12px; }

/* Result card */
.cod-result-card { display: flex; flex-direction: column; gap: 14px; }
.cod-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cod-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cod-chip {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cod-chip:hover { border-color: var(--primary); }
.cod-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cod-chip-n {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}
.cod-chip.active .cod-chip-n { background: rgba(255, 255, 255, 0.25); }
.cod-chip-ok.active { background: var(--accent); border-color: var(--accent); }
.cod-chip-warn.active { background: var(--warning); border-color: var(--warning); }
.cod-chip-miss.active { background: var(--danger); border-color: var(--danger); }

.cod-search {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-width: 240px;
}
.cod-search:focus { outline: none; border-color: var(--primary); }

/* Virtual table */
.cod-vtable {
  --cod-grid-cols: 48px 150px 100px 110px 50px 130px 120px 180px 120px 110px 108px;
  --cod-table-width: 100%;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cod-vhead-scroller {
  overflow: hidden;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}
.cod-vhead {
  display: grid;
  grid-template-columns: var(--cod-grid-cols);
  width: var(--cod-table-width);
  min-width: var(--cod-table-width);
}
.cod-th {
  position: relative;
  padding: 12px 14px 12px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  overflow: hidden;
  user-select: none;
}
.cod-th-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.cod-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
  touch-action: none;
}
.cod-col-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 3px;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 0.15s ease;
}
.cod-col-resizer:hover::after,
.cod-col-resizer.is-dragging::after {
  background: var(--primary);
}
body.cod-col-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
body.cod-col-resizing * {
  cursor: col-resize !important;
}
.cod-vbody {
  position: relative;
  height: 540px;
  overflow: auto;
}
.cod-vrows {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cod-table-width);
  min-width: var(--cod-table-width);
  will-change: transform;
}
.cod-vspacer {
  width: var(--cod-table-width);
  min-width: var(--cod-table-width);
}
.cod-vrow {
  display: grid;
  grid-template-columns: var(--cod-grid-cols);
  width: var(--cod-table-width);
  min-width: var(--cod-table-width);
  align-items: center;
  height: 44px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.cod-vrow > div {
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cod-num { text-align: right; font-variant-numeric: tabular-nums; }
.cod-center { text-align: center; }
.cod-vhead .cod-num { text-align: right; }
.cod-vhead .cod-center { text-align: center; }
.cod-track { font-family: ui-monospace, monospace; font-size: 12.5px; }
.cod-team {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.cod-match { font-weight: 700; }
.cod-ok { color: var(--accent); }
.cod-bad { color: var(--danger); }
.cod-row-ok { background: rgba(62, 207, 142, 0.06); }
.cod-row-warn { background: rgba(245, 166, 35, 0.07); }
.cod-row-miss { background: rgba(255, 92, 92, 0.06); }
.cod-vrow:hover { background: var(--bg-hover); }

.cod-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
}

.badge-warning { background: rgba(245, 166, 35, 0.15); color: var(--warning); }
.badge-muted { background: var(--bg-hover); color: var(--text-muted); }

/* Force rerun panel */
.force-rerun-card { padding: 0; }
.force-rerun { width: 100%; }
.force-rerun-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.force-rerun-summary::-webkit-details-marker { display: none; }
.force-rerun-summary::before {
  content: "▸";
  position: absolute;
  margin-left: -14px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.force-rerun[open] .force-rerun-summary::before { transform: rotate(90deg); }
.force-rerun-summary { position: relative; padding-left: 34px; }
.force-rerun-title { font-weight: 600; color: var(--text); }
.force-rerun-body {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.force-rerun-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 14px;
  align-items: start;
}
.force-rerun-ids textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
}
.force-rerun-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.force-rerun-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.force-row {
  display: grid;
  grid-template-columns: 22px 90px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.force-row-icon { text-align: center; font-weight: 700; }
.force-row-code { font-weight: 600; color: var(--text); }
.force-row-detail { color: var(--text-muted); }
.force-row-ok { background: rgba(62, 207, 142, 0.06); }
.force-row-ok .force-row-icon { color: var(--success, #3ecf8e); }
.force-row-fail { background: rgba(255, 92, 92, 0.06); }
.force-row-fail .force-row-icon { color: var(--danger); }
@media (max-width: 640px) {
  .force-rerun-grid { grid-template-columns: 1fr; }
}

/* ---- Quản lý Team ---- */
.team-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.team-manager-actions { display: flex; gap: 8px; flex-shrink: 0; }
.team-dirty-hint {
  color: var(--primary);
  font-size: 13px;
  margin: 0 0 12px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.team-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-name-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 8px;
}
.team-name-input:focus { outline: none; border-color: var(--primary); }
.team-count {
  background: var(--bg-hover);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
}
.team-del-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.team-del-btn:hover { background: rgba(255, 92, 92, 0.12); }
.team-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.team-member { display: flex; align-items: center; gap: 6px; }
.team-member-input {
  flex: 1.2;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
}
.team-member-role {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 8px;
}
.team-member-input:focus,
.team-member-role:focus { outline: none; border-color: var(--primary); }
.team-member-del {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  flex-shrink: 0;
}
.team-member-del:hover { color: var(--danger); }
.team-add-row { display: flex; gap: 6px; align-items: center; }
.team-add-input,
.team-add-role {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
}
.team-add-input:focus,
.team-add-role:focus { outline: none; border-color: var(--primary); }
.team-add-btn { flex-shrink: 0; }

/* Đơn trùng */
.duplicate-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: var(--radius);
  color: var(--warning);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.duplicate-notice:hover { background: rgba(245, 166, 35, 0.18); }
.duplicate-notice svg { flex-shrink: 0; }
.duplicate-notice-cta {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.2);
  font-size: 0.82rem;
}

.dup-group {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dup-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.dup-count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 92, 92, 0.15);
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 600;
}
.dup-table { display: flex; flex-direction: column; }
.dup-row {
  display: grid;
  grid-template-columns: 100px 1.1fr 110px 1.6fr 1.4fr 100px 110px 130px;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.dup-row:last-child { border-bottom: none; }
.dup-row-head {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dup-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dup-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-align: left;
}
.dup-link:hover { color: var(--primary-hover); text-decoration: underline; }

.team-col-inactive {
  opacity: 0.72;
  border-style: dashed;
}
.team-col-inactive .team-name-input,
.team-col-inactive .team-member-input,
.team-col-inactive .team-member-role {
  color: var(--text-muted);
}
.team-active-toggle-wrap {
  flex-shrink: 0;
}

.registry-row-inactive td {
  color: var(--text-muted);
}
.registry-row-inactive code {
  opacity: 0.85;
}

.registry-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.registry-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.registry-toggle-ui {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(139, 147, 167, 0.35);
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.registry-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.registry-toggle input:checked + .registry-toggle-ui {
  background: var(--accent, #3ecf8e);
}
.registry-toggle input:checked + .registry-toggle-ui::after {
  transform: translateX(16px);
}
.registry-toggle input:focus-visible + .registry-toggle-ui {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Quản lý doanh thu ---- */
.rev-page {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 32px;
}

.rev-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.rev-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.rev-header-text {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}

.rev-subtabs {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 6px;
  max-width: 100%;
  box-sizing: border-box;
}

.rev-subtab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  transition: color 0.2s;
}

.rev-subtab:hover:not(.active) {
  color: var(--text);
}

.rev-subtab.active {
  color: var(--primary);
}

.rev-subtab-indicator {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 107, 53, 0.12);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
  will-change: transform, width;
}

@media (max-width: 640px) {
  .rev-subtab {
    font-size: 12px;
    padding: 9px 6px;
  }
}

.rev-subtabs.rev-seg {
  display: flex;
  width: 100%;
}

.rev-period {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.rev-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rev-cache-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(62, 207, 142, 0.15);
  color: var(--accent);
  border: 1px solid rgba(62, 207, 142, 0.35);
}

.rev-status-pill {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 1.2em;
}

.rev-status-pill.is-loading {
  color: var(--primary);
  font-weight: 600;
}

.rev-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.12), rgba(62, 207, 142, 0.08));
  border: 1px solid rgba(255, 107, 53, 0.25);
  color: var(--text);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.rev-loading-spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: rev-spin 0.7s linear infinite;
}

@keyframes rev-spin {
  to { transform: rotate(360deg); }
}

.rev-filters {
  margin-bottom: 16px;
  padding: 16px 18px;
}

.rev-filters-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.rev-filter-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rev-filter-dates { flex: 1; min-width: 260px; }

.rev-filter-actions {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.rev-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.rev-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rev-date-sep {
  color: var(--text-muted);
  font-size: 13px;
}

.rev-quick-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rev-preset-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.rev-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.rev-preset-btn.active {
  background: rgba(255, 107, 53, 0.12);
  border-color: var(--primary);
  color: var(--primary);
}

.rev-year-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.rev-refresh-btn {
  min-width: 36px;
  padding-left: 10px;
  padding-right: 10px;
}

.rev-filters-pos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: start;
  margin-bottom: 12px;
  overflow: visible;
}

.rev-filters-pos .rev-filter-label {
  padding-top: 8px;
}

.rev-pos-search {
  grid-column: 2;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
}

.rev-pos-search:focus {
  outline: none;
  border-color: var(--primary);
}

.rev-filters-fx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.rev-seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.rev-pos-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 2;
}

.rev-pos-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text-muted);
  font-weight: 600;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.rev-pos-btn:hover:not(.active) {
  color: var(--text);
  border-color: var(--text-muted);
}

.rev-pos-btn.active {
  background: rgba(255, 107, 53, 0.14);
  border-color: var(--primary);
  color: var(--primary);
}

.rev-pos-btn.is-hidden { display: none; }

.rev-pos-config {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.rev-pos-config-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.rev-pos-config-details > summary::-webkit-details-marker { display: none; }

.rev-pos-config-body {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rev-pos-config-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
}

.rev-pos-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.rev-pos-config-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.25rem;
}

.rev-pos-config-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  font-size: 0.85rem;
  cursor: pointer;
}

.rev-pos-config-item input { margin-top: 0.15rem; flex-shrink: 0; }

.rev-pos-config-item-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rev-pos-config-item-label b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-pos-config-item-sub {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-pos-fx-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rev-pos-fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.rev-pos-fx-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rev-pos-fx-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary, #f59e0b);
}

.rev-pos-fx-field input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  color: inherit;
  font-size: 0.85rem;
}

.rev-pos-fx-field input:focus {
  outline: none;
  border-color: var(--primary, #f59e0b);
}

.rev-pos-fx-manual {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
}

.rev-pos-fx-manual input { flex-shrink: 0; }

.rev-member-picker {
  position: relative;
  grid-column: 2;
  max-width: 280px;
  width: 100%;
}

.rev-member-picker-input {
  width: 100%;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.rev-member-picker-input:focus {
  outline: none;
  border-color: var(--primary);
  cursor: text;
}

.rev-member-picker-menu {
  position: absolute;
  z-index: 200;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-card);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #3a4050 var(--bg-card);
}

.rev-member-picker-menu::-webkit-scrollbar {
  width: 8px;
}

.rev-member-picker-menu::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

.rev-member-picker-menu::-webkit-scrollbar-thumb {
  background: #3a4050;
  border-radius: 4px;
}

.rev-member-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.rev-member-picker-option:hover,
.rev-member-picker-option.active {
  background: rgba(255, 107, 53, 0.12);
  color: var(--primary);
}

.rev-member-picker-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.rev-view-btn {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-muted);
  font-weight: 600;
  transition: color 0.15s, background 0.15s;
}

.rev-view-btn:hover:not(.active) {
  color: var(--text);
  background: var(--bg-hover);
}

.rev-view-btn.on,
.rev-view-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.rev-date, .rev-select, .rev-amount {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
}

.rev-date:focus, .rev-select:focus, .rev-amount:focus {
  outline: none;
  border-color: var(--primary);
}

.rev-amount { width: 100%; min-width: 120px; }

.rev-fx-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rev-fx-item {
  font-size: 12px;
  color: var(--text);
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.rev-fx-item b {
  color: var(--primary);
  margin-right: 4px;
}

.rev-kpis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.rev-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px 9px;
  border-left: 3px solid var(--rev-kpi-accent, var(--border));
  transition: transform 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.rev-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.rev-kpi-icon {
  font-size: 13px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.85;
}

.rev-kpi-l {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rev-kpi-v {
  font-size: 14px;
  font-weight: 800;
  margin-top: 3px;
  color: var(--rev-kpi-accent, var(--text));
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-kpi-e {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.rev-chart-card {
  min-height: 280px;
  padding: 16px 18px;
}

.rev-table-card,
.rev-mkt-product-card,
.rev-status-card,
.rev-mkt-card {
  padding: 16px 18px 18px;
}

.rev-chart-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  min-height: 200px;
}

.rev-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.rev-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.rev-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.rev-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.rev-card-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.rev-alerts-card {
  padding: 16px 18px;
}

.rev-alerts-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  width: 100%;
}

.rev-alert-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 12px;
  text-align: center;
  background: var(--bg);
  border-radius: 10px;
  border: 1px dashed var(--border);
}

.rev-alert {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.rev-alert-icon { flex-shrink: 0; font-size: 14px; }

.rev-alert-warning {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.35);
  color: #f5c842;
}

.rev-alert-danger {
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid rgba(255, 92, 92, 0.35);
  color: #ff8a8a;
}

.rev-alert-info {
  background: rgba(91, 192, 222, 0.08);
  border: 1px solid rgba(91, 192, 222, 0.3);
  color: #8ecae6;
}

.rev-alert-ai {
  border-left: 3px solid rgba(167, 139, 250, 0.6);
}

.rev-alert-ai-loading {
  background: rgba(167, 139, 250, 0.08);
  border: 1px dashed rgba(167, 139, 250, 0.4);
  color: var(--text-muted);
}

.rev-ai-summary {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: var(--text);
}

.rev-ai-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  margin-right: 8px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.35);
  color: #c4b5fd;
  vertical-align: middle;
}

.rev-ai-error {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0;
  padding: 0 4px;
}

.rev-tables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.rev-table-wrap {
  overflow: auto;
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.rev-table-wrap.rev-table-wrap--product .rev-table {
  table-layout: fixed;
  width: 100%;
  min-width: 980px;
}

.rev-table-wrap.rev-table-wrap--product .rev-table th:first-child,
.rev-table-wrap.rev-table-wrap--product .rev-table td:first-child {
  width: 220px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.rev-table-wrap.rev-table-wrap--product .rev-table .rev-cell-name b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  font-size: 12.5px;
}

.rev-table-wrap.rev-table-wrap--product .rev-table .rev-cell-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.rev-table-wrap.rev-table-wrap--team-excel {
  max-height: 520px;
}

.rev-table-wrap.rev-table-wrap--team-excel .rev-table {
  min-width: 640px;
}

.rev-table-wrap.rev-table-wrap--team-excel .rev-table th {
  max-width: none;
  white-space: nowrap;
}

.rev-table td.rev-team-span {
  vertical-align: middle;
  text-align: left;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  font-weight: 700;
  white-space: normal;
  max-width: 160px;
}

.rev-table tr.rev-team-block-total td {
  background: rgba(245, 166, 35, 0.12);
  border-top: 1px solid rgba(245, 166, 35, 0.35);
}

.rev-table tbody tr.rev-team-block-total:hover {
  background: rgba(245, 166, 35, 0.16);
}

.rev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--text);
  min-width: 980px;
}

.rev-table th, .rev-table td {
  padding: 9px 11px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.rev-table tbody tr:hover {
  background: var(--bg-hover);
}

.rev-table tbody tr:last-child td {
  border-bottom: 0;
}

.rev-table th:first-child, .rev-table td:first-child { text-align: left; }

.rev-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: normal;
  max-width: 7.5em;
  line-height: 1.25;
  vertical-align: bottom;
}

.rev-table .rev-cell-name b {
  display: block;
  font-size: 13px;
}

.rev-table tr.rev-team-drill {
  cursor: pointer;
  transition: background 0.15s;
}

.rev-table tr.rev-team-drill:hover {
  background: rgba(255, 107, 53, 0.06);
}

.rev-table tr.rev-team-drill:hover .rev-cell-name b {
  color: var(--primary);
}

.rev-cell-drill {
  position: relative;
  padding-right: 28px !important;
}

.rev-drill-hint {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.rev-team-drill:hover .rev-drill-hint {
  opacity: 1;
  color: var(--primary);
}

.rev-cell-drill::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s, transform 0.15s;
}

.rev-team-drill:hover .rev-cell-drill::after {
  opacity: 1;
  color: var(--primary);
  transform: translate(2px, -50%);
}

.rev-table-head {
  align-items: center;
  gap: 10px;
}

.rev-team-back {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.rev-team-back:hover {
  color: var(--primary);
  border-color: rgba(255, 107, 53, 0.45);
  background: rgba(255, 107, 53, 0.08);
}

.rev-table .rev-cell-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.rev-table-empty td {
  text-align: center !important;
  color: var(--text-muted);
  padding: 24px !important;
}

.rev-good { color: var(--accent); font-weight: 600; }
.rev-bad { color: var(--danger); font-weight: 600; }
.rev-teal { color: #5bc0de; font-weight: 700; }
.rev-expected { color: #a855f7; font-weight: 600; }
.rev-expected-na { color: var(--text-muted); }
.rev-kpi-loading { color: var(--text-muted); font-size: 0.85em; font-style: italic; }
.rev-warn { color: var(--warning); font-weight: 700; }

.rev-status-card { margin-bottom: 14px; }

.rev-mkt-product-card { margin-bottom: 14px; }
.rev-mkt-product-wrap {
  overflow: auto;
  max-height: 420px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.rev-mkt-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--text);
}
.rev-mkt-matrix th,
.rev-mkt-matrix td {
  padding: 9px 11px;
  text-align: right;
  white-space: nowrap;
}
.rev-mkt-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.rev-mkt-matrix thead th:first-child {
  text-align: left;
}
.rev-mkt-matrix tbody td,
.rev-mkt-matrix tfoot td {
  border-bottom: 1px solid var(--border);
}
.rev-mkt-matrix tbody tr:last-child td,
.rev-mkt-matrix tfoot tr:last-child td {
  border-bottom: 0;
}
.rev-mkt-matrix .rev-mkt-corner {
  text-align: left;
  min-width: 140px;
  position: sticky;
  left: 0;
  z-index: 3;
}
.rev-mkt-matrix .rev-mkt-row-label {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  color: var(--text);
}
.rev-mkt-matrix .rev-mkt-col-head {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-mkt-matrix thead .rev-mkt-total-col {
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 700;
}
.rev-mkt-matrix tbody .rev-mkt-total-col,
.rev-mkt-matrix tfoot .rev-mkt-total-col {
  background: var(--rev-mkt-total-bg);
  color: var(--rev-mkt-total-fg);
  font-weight: 700;
}
.rev-mkt-matrix .rev-mkt-total-row .rev-mkt-row-label,
.rev-mkt-matrix .rev-mkt-total-row td:not(.rev-mkt-heat):not(.rev-mkt-grand) {
  font-weight: 700;
  background: var(--rev-mkt-sum-bg);
}
.rev-mkt-matrix .rev-mkt-grand {
  background: var(--rev-mkt-total-bg) !important;
  color: var(--rev-mkt-total-fg);
  font-weight: 800;
}
.rev-mkt-matrix td.rev-mkt-zero {
  color: var(--text-muted);
  background: var(--bg-card);
}
.rev-mkt-matrix td.rev-mkt-heat {
  background: color-mix(in srgb, var(--rev-heat-high) var(--rev-heat-pct, 0%), var(--rev-heat-low));
}
.rev-mkt-matrix td.rev-mkt-heat--light-text {
  color: #fff;
}
.rev-mkt-matrix td.rev-mkt-heat--dark-text {
  color: var(--text);
}
.rev-mkt-product-empty {
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

.rev-table .rev-row-total td {
  border-top: 2px solid var(--border);
  background: rgba(255, 107, 53, 0.05);
}

.rev-table tbody tr.rev-row-total:hover {
  background: rgba(255, 107, 53, 0.08);
}

.rev-mkt-card { margin-bottom: 14px; }

.rev-mkt-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.rev-mkt-details summary::-webkit-details-marker { display: none; }

.rev-mkt-details[open] .rev-mkt-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rev-mkt-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.rev-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rev-field-grow { flex: 1; min-width: 140px; }

.rev-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rev-mkt-table-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rev-mkt-table-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rev-mkt-reload-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.rev-mkt-reload-btn:hover { color: var(--primary); background: var(--bg-alt); }

.rev-mkt-table-body { overflow-x: auto; }

.rev-mkt-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.rev-mkt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rev-mkt-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.rev-mkt-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.rev-mkt-table tr:last-child td { border-bottom: none; }
.rev-mkt-table tr:hover td { background: var(--bg-alt); }

/* Nguồn số chi MKT: sửa tay (chốt) > Meta (chính thức) > báo cáo ngày (tạm). */
.rev-mkt-src {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.rev-mkt-src-manual { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.rev-mkt-src-meta { background: rgba(62, 207, 142, 0.15); color: var(--accent); }
.rev-mkt-src-report { background: rgba(245, 166, 35, 0.15); color: var(--warning); }

.rev-mkt-amount-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rev-mkt-amount-input {
  width: 130px;
  text-align: right;
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.rev-mkt-edit-btn, .rev-mkt-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.rev-mkt-edit-btn:hover { color: var(--primary); background: var(--bg-alt); }
.rev-mkt-del-btn:hover { color: var(--danger, #dc2626); background: var(--bg-alt); }

.rev-footer {
  padding: 8px 4px;
}

.rev-footer p {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.rev-footer-note { opacity: 0.75; }

.rev-pw-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  margin-top: 8px;
  background: var(--bg);
  color: var(--text);
}

.rev-pw-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
  font-weight: 600;
}

.rev-errors {
  color: var(--danger);
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .rev-kpis { grid-template-columns: repeat(3, 1fr); }
  .rev-dashboard-grid { grid-template-columns: 1fr; }
  .rev-tables-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rev-kpis { grid-template-columns: repeat(2, 1fr); }
  .rev-filters-top { flex-direction: column; align-items: stretch; }
  .rev-filters-pos { grid-template-columns: 1fr; }
  .rev-pos-seg { grid-column: 1; }
  .rev-pos-search { max-width: none; grid-column: 1; }
}

/* —— Team Marketing — Tạo video —— */
.mkt-page {
  --mkt-gap: clamp(10px, 1.2vw, 20px);
  --mkt-pad-x: clamp(12px, 1.4vw, 16px);
  --mkt-pad-y: clamp(10px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  align-self: stretch;
}

.mkt-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--mkt-gap);
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.mkt-form-card,
.mkt-preview-card {
  padding: var(--mkt-pad-y) var(--mkt-pad-x);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mkt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.mkt-card-head .admin-form-title {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.mkt-panel-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mkt-panel-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mkt-video-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.mkt-form-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.mkt-form-body::-webkit-scrollbar {
  width: 6px;
}

.mkt-form-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.mkt-field-prompt {
  flex: 0 0 auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.mkt-field-images {
  flex: 0 0 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.mkt-field-options {
  flex: 0 0 auto;
}

.mkt-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.mkt-field-tight {
  margin-bottom: 4px;
}

.mkt-field-full {
  grid-column: 1 / -1;
}

.mkt-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mkt-prompt-count {
  float: right;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.mkt-prompt-count-over {
  color: #f87171;
}

.mkt-notice-modal {
  position: relative;
  max-width: 360px;
  padding: 28px 24px 22px;
  text-align: center;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 16px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: mkt-notice-in 0.22s ease-out;
}

@keyframes mkt-notice-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mkt-notice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  opacity: 0.7;
}

.mkt-notice-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}

.mkt-notice-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.22), rgba(234, 88, 12, 0.1));
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mkt-notice-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.mkt-notice-body {
  margin: 0 0 22px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-line;
}

.mkt-notice-btn {
  min-width: 128px;
  border-radius: 999px;
  padding: 9px 22px;
  font-weight: 600;
}

.mkt-dark-input,
.mkt-prompt-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
  color-scheme: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.mkt-dark-input-sm {
  padding: 6px 8px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.mkt-prompt-wrap {
  display: block;
}

.mkt-prompt-wrap textarea {
  display: block;
  width: 100%;
  min-height: clamp(72px, 12vh, 96px);
  max-height: min(320px, 42vh);
  height: clamp(88px, 14vh, 120px);
  resize: vertical;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.35;
  font-size: clamp(0.78rem, 0.2vw + 0.74rem, 0.84rem);
}

.mkt-dark-input::placeholder,
.mkt-prompt-wrap textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
  font-size: 0.82rem;
}

.mkt-dark-input:focus,
.mkt-prompt-wrap textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Option list trong select cũng theo theme */
.mkt-dark-input option {
  background: var(--bg-card);
  color: var(--text);
}

.mkt-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: clamp(4px, 0.6vw, 6px) clamp(6px, 0.9vw, 10px);
  flex-shrink: 0;
}

.mkt-options-grid .mkt-field {
  margin-bottom: 0;
}

.mkt-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.mkt-upload-row .mkt-label {
  flex-shrink: 0;
}

.mkt-file-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.mkt-upload-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.mkt-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mkt-form-status {
  flex-shrink: 0;
  margin: 4px 0 0;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  min-height: 0;
}

.mkt-form-status.hidden {
  display: none !important;
  margin: 0;
  padding: 0;
}

.mkt-audio-inline {
  flex-shrink: 0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.mkt-btn-generate {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 18px;
  min-width: 0;
  white-space: nowrap;
}

.mkt-form-footer .btn-primary.mkt-btn-generate {
  flex: 0 0 auto;
}

.mkt-image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 72px), 1fr));
  gap: clamp(4px, 0.6vw, 6px);
  margin-top: 6px;
  flex: 0 0 auto;
  max-height: min(180px, 28vh);
  min-height: clamp(48px, 8vh, 72px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.mkt-image-preview:not(.hidden) {
  padding: 2px;
}

.mkt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #0d0d0d;
}

.mkt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-thumb-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.mkt-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mkt-thumb-remove:hover {
  background: rgba(220, 38, 38, 0.85);
}

.mkt-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mkt-preview-head .admin-form-title {
  font-size: 1rem;
  margin: 0;
}

.mkt-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.mkt-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  flex: 1;
  min-height: 0;
}

.mkt-preview-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mkt-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.mkt-status-progress {
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.mkt-status-done {
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--accent);
  background: rgba(34, 197, 94, 0.1);
}

.mkt-status-error {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.mkt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  color: var(--text-muted);
  flex: 1;
  width: 100%;
}

.mkt-loading-progress {
  width: min(100%, 320px);
}

.mkt-progress-bar-only {
  width: 100%;
  gap: 0;
}

.mkt-progress-bar-only .mkt-progress-track {
  flex: 1;
  width: 100%;
  height: 8px;
  border-radius: 999px;
}

.mkt-loading-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  max-width: min(100%, 320px);
}

.mkt-loading-pct {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mkt-loading-eta {
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.mkt-loading-eta.mkt-loading-reconnect {
  color: #f5a623;
}

.mkt-progress-eta {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.mkt-job-progress-wrap .mkt-progress {
  min-width: 120px;
}

.mkt-scene-progress {
  width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mkt-scene-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mkt-scene-label {
  flex: 0 0 52px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}

.mkt-scene-item .mkt-progress {
  flex: 1;
  min-width: 0;
}

/* Thanh tiến trình % */
.mkt-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mkt-progress-compact {
  gap: 6px;
}

.mkt-progress-compact .mkt-progress-track {
  height: 6px;
}

.mkt-progress-compact .mkt-progress-pct {
  font-size: 0.72rem;
  min-width: 2.5em;
}

.mkt-progress-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.mkt-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, var(--primary));
  transition: width 0.4s ease;
}

.mkt-progress-done .mkt-progress-fill {
  background: linear-gradient(90deg, #22c55e, var(--accent));
}

.mkt-progress-error .mkt-progress-fill {
  background: var(--danger);
  width: 100% !important;
}

.mkt-progress-pct {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 2.8em;
  text-align: right;
}

.mkt-progress-done .mkt-progress-pct {
  color: var(--accent);
}

.mkt-progress-error .mkt-progress-pct {
  color: var(--danger);
}

.mkt-job-progress-wrap {
  display: inline-flex;
  min-width: 120px;
  max-width: 180px;
  padding: 0;
  border: none;
  background: transparent;
}

.mkt-batch-overall-progress {
  margin-top: 8px;
  max-width: 360px;
}

.mkt-col-status .mkt-progress {
  min-width: 100px;
}

.mkt-video-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  min-height: 0;
  width: 100%;
}

.mkt-video-wrap video {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mkt-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}

.mkt-preview-actions .btn,
.mkt-preview-actions .mkt-btn-download {
  text-decoration: none;
}

.mkt-preview-actions .btn:hover,
.mkt-preview-actions .mkt-btn-download:hover {
  text-decoration: none;
}

.mkt-btn-download {
  flex: 0 0 auto;
}

@media (min-width: 961px) and (max-width: 1199px) {
  .mkt-layout,
  .mkt-batch-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

@media (min-width: 1600px) {
  .mkt-layout,
  .mkt-batch-layout {
    gap: 20px;
  }
}

@media (max-width: 960px) {
  .app:has(#marketingVideoView:not(.hidden)) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .main:has(#marketingVideoView:not(.hidden)) {
    display: block;
    overflow: auto;
    height: auto;
  }

  .mkt-page {
    flex: none;
    min-height: 0;
  }

  .mkt-layout,
  .mkt-batch-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }

  .mkt-batch-settings {
    grid-row: auto;
  }

  .mkt-batch-detail {
    grid-column: 1;
  }

  .mkt-panel-right {
    min-height: clamp(220px, 38vh, 360px);
  }

  .mkt-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .mkt-mode-tabs {
    justify-content: center;
  }

  .mkt-prompt-wrap textarea {
    min-height: 80px;
    max-height: min(240px, 36vh);
    height: clamp(80px, 12vh, 120px);
  }
}

@media (max-width: 640px) {
  .mkt-options-grid {
    grid-template-columns: 1fr;
  }

  .mkt-form-footer,
  .mkt-batch-form-footer {
    flex-wrap: wrap;
  }

  .mkt-btn-generate {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .mkt-card-head .admin-form-title {
    white-space: normal;
  }

  .mkt-mode-tab {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  .mkt-preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mkt-preview-actions .btn,
  .mkt-preview-actions .mkt-btn-download {
    width: 100%;
    justify-content: center;
  }
}

/* Marketing — batch Excel */
.mkt-mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.mkt-mode-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.mkt-mode-tab.active {
  background: var(--primary);
  color: #fff;
}

.mkt-batch-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--mkt-gap, 16px);
  flex: 1;
  min-height: 0;
  width: 100%;
}

.mkt-batch-settings {
  grid-row: 1 / 3;
  padding: var(--mkt-pad-y, 14px) var(--mkt-pad-x, 16px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mkt-batch-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-batch-upload-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-batch-excel-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mkt-batch-file-name {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mkt-batch-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.mkt-batch-options {
  margin-top: 4px;
}

.mkt-batch-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mkt-batch-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: var(--mkt-pad-y, 14px) var(--mkt-pad-x, 16px);
  overflow: hidden;
}

.mkt-batch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.mkt-batch-head .admin-form-title {
  margin: 0 0 4px;
  font-size: 1rem;
}

.mkt-batch-summary {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.mkt-batch-head-actions {
  position: relative;
  flex-shrink: 0;
}

.mkt-download-menu {
  position: relative;
}

.mkt-download-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 20;
  overflow: hidden;
}

.mkt-download-option {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.mkt-download-option:hover {
  background: var(--bg-hover);
}

.mkt-batch-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.mkt-batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.mkt-batch-table th,
.mkt-batch-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.mkt-batch-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.mkt-col-stt {
  width: 52px;
  text-align: center;
  font-weight: 600;
}

.mkt-col-status {
  width: 120px;
  white-space: nowrap;
}

.mkt-col-video {
  width: 88px;
  text-align: center;
}

.mkt-col-action {
  width: 90px;
  text-align: right;
}

.mkt-col-prompt {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-batch-row {
  cursor: pointer;
}

.mkt-batch-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.mkt-batch-row-selected {
  background: rgba(255, 107, 53, 0.08);
}

.mkt-batch-mini-video {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg);
}

.mkt-batch-spin {
  width: 18px;
  height: 18px;
}

.mkt-batch-video-err {
  color: var(--danger);
  font-weight: 700;
}

.mkt-batch-detail {
  grid-column: 2;
  padding: 14px 16px;
}

.mkt-batch-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.mkt-batch-detail-head .admin-form-title {
  margin: 0;
  font-size: 1rem;
}

.mkt-batch-detail-prompt {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  max-height: 4.5em;
  overflow-y: auto;
}

.mkt-batch-detail-error {
  margin: 0 0 10px;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 0.82rem;
  line-height: 1.4;
}

.mkt-batch-progress-err {
  margin-top: 0.25rem;
  color: #fca5a5;
  font-size: 0.72rem;
  line-height: 1.3;
}

.mkt-batch-eta {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* —— Tạo Video hàng loạt: cột ảnh + badge nguồn ảnh —— */

.mkt-col-img {
  width: 92px;
  text-align: center;
}

.mkt-batch-img-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mkt-batch-img-thumb {
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
  display: block;
}

.mkt-img-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.mkt-batch-img-cell .mkt-img-badge {
  position: absolute;
  top: 2px;
  right: 2px;
}

.mkt-img-badge-ai {
  background: rgba(129, 140, 248, 0.9);
  color: #fff;
}

.mkt-batch-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mkt-batch-detail-source {
  flex-shrink: 0;
}

.mkt-batch-detail-image {
  margin: 0 0 10px;
}

.mkt-batch-detail-image img {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
  object-fit: contain;
  background: #000;
}

/* —— TikTok auto-đăng (scaffold) —— */

.mkt-tiktok-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.mkt-tiktok-progress {
  background: rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
}

.mkt-tiktok-done {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.mkt-tiktok-error {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

a.mkt-tiktok-done:hover {
  text-decoration: underline;
}

.mkt-tiktok-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mkt-tiktok-toggle {
  margin-bottom: 8px;
}

.mkt-tiktok-options {
  margin-top: 8px;
}

.mkt-tiktok-options textarea.mkt-dark-input {
  min-height: 72px;
  max-height: min(220px, 32vh);
  resize: vertical;
  line-height: 1.35;
}

.mkt-preview-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mkt-tiktok-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.mkt-tiktok-muted {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.mkt-col-tiktok {
  min-width: 110px;
}

.admin-tiktok-ok {
  color: #86efac;
  font-weight: 600;
}

.admin-tiktok-bad {
  color: #fca5a5;
  font-weight: 600;
}

.mkt-batch-detail-video {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.mkt-batch-detail-video video {
  display: block;
  width: 100%;
  max-height: clamp(180px, 28vh, 320px);
}

/* ── INHOUSE ────────────────────────────────────────────────── */
#inhouseView {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inhouse-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inhouse-search {
  flex: 1;
  min-width: 180px;
  max-width: 340px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  font-family: var(--font);
}
.inhouse-search::placeholder { color: var(--text-muted); }
.inhouse-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,207,142,.12); }

/* Card list */
.inhouse-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inhouse-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s;
}
.inhouse-card:hover { border-color: #3a4055; }

/* Card header */
.inhouse-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inhouse-card-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.inhouse-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inhouse-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inhouse-meta-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}
.inhouse-card-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.inhouse-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.inhouse-btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.inhouse-btn-icon:hover { background: var(--bg-hover); color: var(--text); border-color: #3a4055; }
.inhouse-btn-icon.danger:hover { background: rgba(255,92,92,.12); color: var(--danger); border-color: var(--danger); }

/* Progress section */
.inhouse-card-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inhouse-progress-bar-track {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.inhouse-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s;
}
.inhouse-progress-bar-fill.complete { background: var(--accent); }
.inhouse-progress-bar-fill.partial { background: var(--warning); }
.inhouse-progress-bar-fill.none { background: var(--danger); width: 0 !important; }

.inhouse-recv-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inhouse-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  border-radius: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
}
.inhouse-chip .chip-label { font-weight: 600; color: var(--text); }
.inhouse-chip.chip-done { border-color: rgba(62,207,142,.3); background: rgba(62,207,142,.07); }
.inhouse-chip.chip-done .chip-label { color: var(--accent); }
.inhouse-chip.chip-missing { border-color: rgba(255,92,92,.35); background: rgba(255,92,92,.08); }
.inhouse-chip.chip-missing .chip-label { color: var(--danger); }

.inhouse-qty-summary {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inhouse-qty-summary b { color: var(--text); font-size: 13px; }

/* Finance row */
.inhouse-card-finance {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.inhouse-fin-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px;
  border-right: 1px solid var(--border);
}
.inhouse-fin-item:first-child { padding-left: 0; }
.inhouse-fin-item:last-child { border-right: none; }
.inhouse-fin-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 700;
}
.inhouse-fin-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.inhouse-fin-value.accent { color: var(--accent); }

/* Notes */
.inhouse-card-notes {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* Empty state */
.inhouse-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.inhouse-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: .5;
}

/* Modal */
.inhouse-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  width: min(580px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.inhouse-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.inhouse-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.inhouse-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.inhouse-modal-close:hover { background: var(--bg-hover); color: var(--text); }

.inhouse-form {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inhouse-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inhouse-form-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.inhouse-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inhouse-form-row--full { grid-template-columns: 1fr; }
.inhouse-form-row--3 { grid-template-columns: 2fr 1fr 1fr; }

.inhouse-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.inhouse-form input,
.inhouse-form textarea,
.inhouse-form select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  font-family: var(--font);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.inhouse-form input:focus,
.inhouse-form textarea:focus,
.inhouse-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62,207,142,.12);
}
.inhouse-form textarea { resize: vertical; min-height: 60px; }

.inhouse-form-select-wrap {
  position: relative;
  width: 100%;
}
.inhouse-form-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  transform: translateY(-35%);
  pointer-events: none;
}
.inhouse-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}
.inhouse-form select:required:invalid {
  color: var(--text-muted);
}
.inhouse-form select option {
  background: var(--bg-card);
  color: var(--text);
}
.inhouse-form select option[disabled] {
  color: var(--text-muted);
}

body.light-mode .inhouse-form select option {
  background: #fff;
  color: var(--text);
}

.inhouse-form-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

.inhouse-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.inhouse-form-status {
  font-size: 12px;
  color: var(--text-muted);
}
.inhouse-form-status.error { color: var(--danger); }

/* "+ Thêm lần nhập" button */
.inhouse-btn-add-recv {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  align-self: flex-start;
  margin-top: 2px;
}
.inhouse-btn-add-recv:hover { border-color: var(--accent); color: var(--accent); background: rgba(62,207,142,.06); }

.inhouse-recv2-row { display: flex; flex-direction: column; gap: 10px; }

/* Form image zone */
.inhouse-form-img-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.inhouse-form-img-zone:hover { border-color: var(--accent); color: var(--accent); background: rgba(62,207,142,.05); }
.inhouse-form-img-icon { font-size: 18px; }

.inhouse-form-img-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.inhouse-fimg-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.inhouse-fimg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inhouse-fimg-thumb .inhouse-img-del { opacity: 1; }

/* Image gallery */
.inhouse-img-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.inhouse-img-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg);
  transition: border-color 0.15s, transform 0.15s;
}
.inhouse-img-thumb:hover { border-color: var(--accent); transform: scale(1.03); }
.inhouse-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inhouse-img-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  z-index: 1;
}
.inhouse-img-thumb:hover .inhouse-img-del { opacity: 1; }
.inhouse-img-del:hover { background: var(--danger); }

.inhouse-img-add {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 22px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.inhouse-img-add:hover { border-color: var(--accent); color: var(--accent); background: rgba(62,207,142,.06); }
.inhouse-img-add--first {
  width: auto;
  height: 36px;
  flex-direction: row;
  gap: 6px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
}
.inhouse-img-add-icon { font-size: 16px; }
.inhouse-img-add-txt { font-size: 13px; }

/* Lightbox */
.inhouse-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inhouse-lightbox.hidden { display: none; }

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
}

.lb-img-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
  display: block;
  object-fit: contain;
}

.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lb-close:hover { background: rgba(255,255,255,.25); }

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lb-arrow:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-arrow.hidden { display: none; }

.lb-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  background: rgba(0,0,0,.4);
  padding: 4px 12px;
  border-radius: 20px;
}

.chip-date { opacity: .7; }
.chip-none { opacity: .4; }

@media (max-width: 640px) {
  .inhouse-form-row,
  .inhouse-form-row--3 { grid-template-columns: 1fr; }
  #inhouseView { padding: 12px 14px; }
  .inhouse-fin-item { padding: 0 10px; }
  .inhouse-img-thumb,
  .inhouse-img-add:not(.inhouse-img-add--first) { width: 72px; height: 72px; }
  .lb-arrow { width: 38px; height: 38px; font-size: 26px; }
}

/* ── INHOUSE REPORT KPI CARDS ─────────────────────────────────── */
@keyframes kpiCountUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inhouse-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 0;
}

.inhouse-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.inhouse-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 14px;
}
.inhouse-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.inhouse-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inhouse-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inhouse-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  white-space: nowrap;
}
.inhouse-kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  animation: kpiCountUp 0.4s ease both;
}
.inhouse-kpi-unit {
  font-size: 10px;
  opacity: .5;
  font-weight: 500;
}

/* Opening — slate/neutral */
.inhouse-kpi--opening {
  border-color: rgba(139,147,167,.25);
}
.inhouse-kpi--opening:hover { border-color: rgba(139,147,167,.5); }
.inhouse-kpi--opening .inhouse-kpi-icon {
  background: rgba(139,147,167,.12);
  color: #8b93a7;
}
.inhouse-kpi--opening .inhouse-kpi-label { color: #8b93a7; }
.inhouse-kpi--opening .inhouse-kpi-value { color: var(--text); }

/* Import — blue */
.inhouse-kpi--import {
  border-color: rgba(59,130,246,.25);
}
.inhouse-kpi--import:hover { border-color: rgba(59,130,246,.5); box-shadow: 0 8px 24px rgba(59,130,246,.12); }
.inhouse-kpi--import .inhouse-kpi-icon {
  background: rgba(59,130,246,.12);
  color: #3b82f6;
}
.inhouse-kpi--import .inhouse-kpi-label { color: #3b82f6; }
.inhouse-kpi--import .inhouse-kpi-value { color: #3b82f6; }

/* Export — orange */
.inhouse-kpi--export {
  border-color: rgba(249,115,22,.25);
}
.inhouse-kpi--export:hover { border-color: rgba(249,115,22,.5); box-shadow: 0 8px 24px rgba(249,115,22,.1); }
.inhouse-kpi--export .inhouse-kpi-icon {
  background: rgba(249,115,22,.12);
  color: #f97316;
}
.inhouse-kpi--export .inhouse-kpi-label { color: #f97316; }
.inhouse-kpi--export .inhouse-kpi-value { color: #f97316; }

/* Return In — yellow/amber */
.inhouse-kpi--return-in {
  border-color: rgba(245,166,35,.25);
}
.inhouse-kpi--return-in:hover { border-color: rgba(245,166,35,.5); box-shadow: 0 8px 24px rgba(245,166,35,.1); }
.inhouse-kpi--return-in .inhouse-kpi-icon {
  background: rgba(245,166,35,.12);
  color: var(--warning);
}
.inhouse-kpi--return-in .inhouse-kpi-label { color: var(--warning); }
.inhouse-kpi--return-in .inhouse-kpi-value { color: var(--warning); }

/* Return Out — red */
.inhouse-kpi--return-out {
  border-color: rgba(255,92,92,.25);
}
.inhouse-kpi--return-out:hover { border-color: rgba(255,92,92,.45); box-shadow: 0 8px 24px rgba(255,92,92,.1); }
.inhouse-kpi--return-out .inhouse-kpi-icon {
  background: rgba(255,92,92,.12);
  color: var(--danger);
}
.inhouse-kpi--return-out .inhouse-kpi-label { color: var(--danger); }
.inhouse-kpi--return-out .inhouse-kpi-value { color: var(--danger); }

/* Closing — green accent */
.inhouse-kpi--closing {
  border-color: rgba(62,207,142,.3);
  background: linear-gradient(135deg, rgba(62,207,142,.07) 0%, var(--bg-card) 70%);
}
.inhouse-kpi--closing:hover { border-color: rgba(62,207,142,.6); box-shadow: 0 8px 28px rgba(62,207,142,.15); }
.inhouse-kpi--closing .inhouse-kpi-icon {
  background: rgba(62,207,142,.15);
  color: var(--accent);
}
.inhouse-kpi--closing .inhouse-kpi-label { color: var(--accent); }
.inhouse-kpi--closing .inhouse-kpi-value { color: var(--accent); }

.inhouse-kpi--closing.is-negative {
  border-color: rgba(255, 92, 92, 0.35);
  background: linear-gradient(135deg, rgba(255, 92, 92, 0.08) 0%, var(--bg-card) 70%);
}
.inhouse-kpi--closing.is-negative:hover {
  border-color: rgba(255, 92, 92, 0.55);
  box-shadow: 0 8px 28px rgba(255, 92, 92, 0.12);
}
.inhouse-kpi--closing.is-negative .inhouse-kpi-icon {
  background: rgba(255, 92, 92, 0.12);
  color: var(--danger);
}
.inhouse-kpi--closing.is-negative .inhouse-kpi-label,
.inhouse-kpi--closing.is-negative .inhouse-kpi-value {
  color: var(--danger);
}

/* Light mode adjustments */
body.light-mode .inhouse-kpi-card { background: var(--bg-card); }
body.light-mode .inhouse-kpi--opening .inhouse-kpi-value { color: var(--text); }
body.light-mode .inhouse-kpi--import .inhouse-kpi-value { color: #1d4ed8; }
body.light-mode .inhouse-kpi--import .inhouse-kpi-icon { color: #1d4ed8; }
body.light-mode .inhouse-kpi--import .inhouse-kpi-label { color: #1d4ed8; }
body.light-mode .inhouse-kpi--export .inhouse-kpi-value { color: #c2410c; }
body.light-mode .inhouse-kpi--export .inhouse-kpi-icon { color: #c2410c; }
body.light-mode .inhouse-kpi--export .inhouse-kpi-label { color: #c2410c; }
body.light-mode .inhouse-kpi--closing { background: linear-gradient(135deg, rgba(5,150,105,.06) 0%, var(--bg-card) 70%); }

/* Responsive KPI grid */
@media (max-width: 1100px) {
  .inhouse-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .inhouse-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .inhouse-kpi-value { font-size: 22px; }
}
@media (max-width: 420px) {
  .inhouse-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inhouse-kpi-card { padding: 12px; gap: 8px; }
  .inhouse-kpi-icon { width: 32px; height: 32px; }
  .inhouse-kpi-value { font-size: 20px; }
}

/* ── INHOUSE REPORT TABLE ─────────────────────────────────────── */
.inhouse-report-table-card {
  margin-bottom: 0;
  overflow: hidden;
}
.inhouse-report-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.inhouse-report-table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.inhouse-report-table-title svg { color: var(--accent); flex-shrink: 0; }

.inhouse-report-table { width: 100%; border-collapse: collapse; }
.inhouse-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 16px;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.inhouse-report-table thead th.col-num { text-align: right; }

.inhouse-report-table tbody tr {
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.inhouse-report-table tbody tr:last-child { border-bottom: none; }
.inhouse-report-table tbody tr:hover { background: var(--bg-hover); }

.inhouse-report-table tbody td {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.inhouse-report-table tbody td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.inhouse-report-table tbody td.col-import { color: #3b82f6; font-weight: 600; }
.inhouse-report-table tbody td.col-export { color: #f97316; font-weight: 600; }
.inhouse-report-table tbody td.col-return-in { color: var(--warning); }
.inhouse-report-table tbody td.col-return-out { color: var(--danger); }
.inhouse-report-table tbody td.col-closing { font-weight: 700; color: var(--accent); }
.inhouse-report-table tbody td.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px;
  font-style: italic;
}
.inhouse-report-table .inhouse-row-unmatched {
  background: rgba(234,179,8,.07);
}
.inhouse-report-table .inhouse-row-unmatched:hover {
  background: rgba(234,179,8,.12);
}
body.light-mode .inhouse-report-hero {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(37, 99, 235, 0.04) 100%);
}

body.light-mode .inhouse-report-table thead th {
  background: var(--bg-card);
}

body.light-mode .inhouse-report-table tbody tr:nth-child(even):not(.inhouse-row-unmatched) {
  background: rgba(0, 0, 0, 0.02);
}

body.light-mode .inhouse-report-totals td {
  background: rgba(5, 150, 105, 0.06);
}

body.light-mode .inhouse-report-table tbody tr { border-bottom-color: rgba(0,0,0,.05); }
body.light-mode .inhouse-report-table tbody td.col-import { color: #1d4ed8; }
body.light-mode .inhouse-report-table tbody td.col-export { color: #c2410c; }

/* ── INHOUSE BCHDKD HEADER ───────────────────────────────────── */
.inhouse-report-table tbody tr:nth-child(even):not(.inhouse-row-unmatched) {
  background: rgba(255, 255, 255, 0.015);
}

.inhouse-report-table tbody td.col-product {
  max-width: 220px;
}

.inhouse-bchdkd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.inhouse-bchdkd-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.inhouse-bchdkd-title-wrap svg { color: var(--accent); flex-shrink: 0; }
.inhouse-bchdkd-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}
.inhouse-bchdkd-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.inhouse-bchdkd-body {
  padding: 16px 20px 20px;
}

.inhouse-bchdkd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* BCHDKD individual block */
.inhouse-bchdkd-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s, transform 0.15s;
}
.inhouse-bchdkd-block:hover {
  border-color: rgba(62,207,142,.3);
  transform: translateY(-2px);
}

.inhouse-bchdkd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.inhouse-bchdkd-row-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.inhouse-bchdkd-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Profit block special style */
.inhouse-bchdkd-block--profit {
  border-color: rgba(62,207,142,.25);
  background: linear-gradient(135deg, rgba(62,207,142,.06) 0%, var(--bg) 70%);
}
.inhouse-bchdkd-block--profit:hover {
  border-color: rgba(62,207,142,.5);
  box-shadow: 0 6px 20px rgba(62,207,142,.12);
}
.inhouse-bchdkd-profit {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-top: 6px;
}

/* Template note */
.inhouse-bchdkd-template-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(245,166,35,.07);
  border-left: 3px solid var(--warning);
  border-radius: 0 6px 6px 0;
}

body.light-mode .inhouse-bchdkd-block { background: var(--bg-card); }
body.light-mode .inhouse-bchdkd-block--profit { background: linear-gradient(135deg, rgba(5,150,105,.05) 0%, var(--bg-card) 70%); }

/* ── INHOUSE ĐỐI SOÁT VẬN CHUYỂN QUỐC TẾ (issue #18) ─────────── */
/* ── Inhouse — Kho hàng (sub-tab) ── */
.iwh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.iwh-show-inactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.iwh-filters { margin-bottom: 14px; padding: 12px 14px; }
.iwh-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.iwh-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.iwh-filter--search { flex: 1 1 200px; min-width: 180px; }
.iwh-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.iwh-filter select,
.iwh-filter input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
}
.iwh-load-hint { display: none !important; }
.iwh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.iwh-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.iwh-card--inactive { opacity: .55; }
.iwh-card-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.iwh-card-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.iwh-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.iwh-card-body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.iwh-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
}
.iwh-card-row--route { flex-direction: column; gap: 6px; }
.iwh-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  min-width: 48px;
}
.iwh-card-partner { font-weight: 600; }
.iwh-card-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.iwh-contact-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.iwh-contact-link:hover { text-decoration: underline; }
.iwh-zalo-btn { padding: 2px 8px !important; font-size: 12px !important; }
.iwh-card-address,
.iwh-card-route-note,
.iwh-card-notes {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.iwh-route-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.iwh-route-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: var(--accent);
}
.iwh-route-arrow {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 1px;
}
.iwh-card-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.iwh-muted { color: var(--text-muted); }
.iwh-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.iwh-badge--market { background: rgba(148,163,184,.15); color: var(--text-muted); }
.iwh-badge--fake { background: rgba(239,68,68,.15); color: #f87171; }
.iwh-badge--normal { background: rgba(34,197,94,.15); color: #4ade80; }
.iwh-badge--outsource { background: rgba(59,130,246,.15); color: #60a5fa; }
.iwh-badge--transit { background: rgba(245,158,11,.15); color: #fbbf24; }
.iwh-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

body.light-mode .iwh-card { background: var(--bg-card); }
body.light-mode .iwh-badge--fake { color: #dc2626; }
body.light-mode .iwh-badge--normal { color: #16a34a; }
body.light-mode .iwh-badge--outsource { color: #2563eb; }
body.light-mode .iwh-badge--transit { color: #d97706; }

@media (max-width: 720px) {
  .iwh-filters-row { flex-direction: column; }
  .iwh-filter { min-width: 0; width: 100%; }
  .iwh-grid { grid-template-columns: 1fr; }
}


.inhouse-rc-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 28px;
}

/* —— Hero —— */
.inhouse-rc-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(62, 207, 142, 0.06) 100%);
  border-color: rgba(59, 130, 246, 0.22);
}

.inhouse-rc-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.inhouse-rc-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 52ch;
}

.inhouse-rc-batch-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  white-space: nowrap;
}

/* —— Workflow steps —— */
.inhouse-rc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inhouse-rc-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.inhouse-rc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* —— Upload workspace —— */
.inhouse-rc-workspace {
  padding: 18px 20px;
  border-left: 3px solid rgba(59, 130, 246, 0.55);
}

.inhouse-rc-workspace-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.inhouse-rc-workspace-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.inhouse-rc-workspace-title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.inhouse-rc-workspace-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.inhouse-rc-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.inhouse-rc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.inhouse-rc-field--upload {
  justify-content: flex-end;
}

.inhouse-rc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.inhouse-rc-input {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.inhouse-rc-input--compact {
  padding: 8px 10px;
  font-size: 13px;
}

.inhouse-rc-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.12);
}

.inhouse-rc-input--sm {
  min-width: 200px;
  padding: 7px 10px;
  font-size: 13px;
}

.inhouse-rc-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-weight: 700;
  white-space: nowrap;
}

.inhouse-rc-hint {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  word-break: break-word;
}

.inhouse-rc-hint.is-warming {
  border-color: rgba(245, 166, 35, 0.3);
  background: rgba(245, 166, 35, 0.08);
  color: var(--warning);
}

.inhouse-rc-hint.is-error {
  border-color: rgba(255, 92, 92, 0.3);
  background: rgba(255, 92, 92, 0.08);
  color: var(--danger);
}

.inhouse-rc-hint.is-success {
  border-color: rgba(62, 207, 142, 0.3);
  background: rgba(62, 207, 142, 0.08);
  color: var(--accent);
}

/* —— Filter toolbar —— */
.inhouse-rc-toolbar {
  padding: 14px 18px;
}

.inhouse-rc-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.inhouse-rc-toolbar-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.inhouse-rc-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}

/* —— KPI cards —— */
.inhouse-rc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.inhouse-rc-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--inhouse-rc-accent, var(--border));
  transition: transform 0.15s, box-shadow 0.15s;
}

.inhouse-rc-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.inhouse-rc-kpi--cod { --inhouse-rc-accent: #3ecf8e; }
.inhouse-rc-kpi--ship { --inhouse-rc-accent: #60a5fa; }
.inhouse-rc-kpi--other { --inhouse-rc-accent: #a78bfa; }
.inhouse-rc-kpi--rate { --inhouse-rc-accent: #f5a623; }
.inhouse-rc-kpi--rate.is-good { --inhouse-rc-accent: #3ecf8e; }
.inhouse-rc-kpi--rate.is-warn { --inhouse-rc-accent: #f5a623; }
.inhouse-rc-kpi--rate.is-bad { --inhouse-rc-accent: #ff5c5c; }

.inhouse-rc-kpi-icon {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.9;
}

.inhouse-rc-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.inhouse-rc-kpi-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.inhouse-rc-kpi-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* —— Alert —— */
.inhouse-rc-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.08);
}

.inhouse-rc-alert-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.inhouse-rc-alert-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}

.inhouse-rc-alert-text strong {
  color: var(--warning);
  font-weight: 800;
}

.inhouse-rc-alert-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

/* —— Tables —— */
.inhouse-rc-table-card,
.inhouse-rc-detail-card {
  padding: 0;
  overflow: hidden;
}

.inhouse-rc-table-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.inhouse-rc-table-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.inhouse-rc-table-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.inhouse-rc-table-scroll {
  overflow: auto;
  max-height: min(52vh, 480px);
}

.inhouse-rc-table-scroll--detail {
  max-height: min(60vh, 560px);
}

.inhouse-rc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: max(100%, 900px);
  font-size: 13px;
}

.inhouse-rc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1f2430;
  color: #f3f4f6;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  text-align: left;
}

.inhouse-rc-table thead th.col-num,
.inhouse-rc-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inhouse-rc-table thead th.col-actions,
.inhouse-rc-table td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.inhouse-rc-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.inhouse-rc-table tbody tr:last-child td {
  border-bottom: none;
}

.inhouse-rc-table tbody tr.inhouse-rc-batch-row {
  cursor: pointer;
  transition: background 0.12s;
}

.inhouse-rc-table tbody tr.inhouse-rc-batch-row:hover td {
  background: rgba(59, 130, 246, 0.07);
}

.inhouse-rc-table tbody tr.inhouse-rc-batch-row.is-active td {
  background: rgba(59, 130, 246, 0.12);
}

.inhouse-rc-table .inhouse-rc-file,
.inhouse-rc-table .inhouse-rc-products {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inhouse-rc-empty {
  text-align: center;
  padding: 36px 20px !important;
  color: var(--text-muted);
  font-size: 13.5px;
}

.inhouse-rc-empty-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.inhouse-rc-bad {
  color: var(--danger);
  font-weight: 800;
}

.inhouse-rc-row--bad td {
  background: rgba(255, 92, 92, 0.06);
}

.inhouse-rc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.inhouse-rc-del {
  color: var(--danger) !important;
}

/* —— Tags & badges —— */
.inhouse-rc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg);
  white-space: nowrap;
}

.inhouse-rc-tag--out {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

.inhouse-rc-tag--in {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
}

.inhouse-rc-partner {
  font-weight: 700;
  color: var(--text);
}

.inhouse-rc-market {
  font-weight: 700;
  font-size: 12px;
  color: #60a5fa;
}

.inhouse-rc-match-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(62, 207, 142, 0.12);
  color: var(--accent);
  border: 1px solid rgba(62, 207, 142, 0.25);
}

.inhouse-rc-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.inhouse-rc-status--matched {
  border-color: rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.1);
  color: var(--accent);
}

.inhouse-rc-status--amount_mismatch {
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.1);
  color: var(--warning);
}

.inhouse-rc-status--not_found {
  border-color: rgba(255, 92, 92, 0.35);
  background: rgba(255, 92, 92, 0.1);
  color: var(--danger);
}

.inhouse-rc-status--recorded {
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
}

/* —— Detail panel —— */
.inhouse-rc-detail-card {
  border-color: rgba(59, 130, 246, 0.25);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 120px);
}

.inhouse-rc-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.inhouse-rc-detail-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.inhouse-rc-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.inhouse-rc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}

.inhouse-rc-chip b {
  color: var(--text);
  font-weight: 800;
}

.inhouse-rc-chip--ok b { color: var(--accent); }
.inhouse-rc-chip--warn b { color: var(--warning); }
.inhouse-rc-chip--bad b { color: var(--danger); }

.inhouse-rc-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body.light-mode .inhouse-rc-hero {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(62, 207, 142, 0.05) 100%);
}

body.light-mode .inhouse-rc-table thead th {
  background: #e8ecf2;
  color: #1f2937;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 1100px) {
  .inhouse-rc-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inhouse-rc-field--upload { grid-column: 1 / -1; }
  .inhouse-rc-kpis { grid-template-columns: repeat(2, 1fr); }
  .inhouse-rc-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .inhouse-rc-form-grid,
  .inhouse-rc-filter-row,
  .inhouse-rc-kpis { grid-template-columns: 1fr; }
  .inhouse-rc-steps { flex-direction: column; }
  .inhouse-rc-detail-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .inhouse-rc-input--sm { min-width: 0; width: 100%; }
}



/* ═══════════════════════════════════════════════════════════════════
   Team IT — Order Dịch Vụ (it-service-order)
   ═══════════════════════════════════════════════════════════════════ */
.it-page { display: flex; flex-direction: column; gap: 16px; }
.it-subtabs { margin-bottom: 0; }

/* ── Form ─────────────────────────────────────────────────────────── */
.it-form-panel { display: flex; flex-direction: column; gap: 16px; }
.it-form-section { padding: 18px 20px; }

.it-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.it-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.it-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.it-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.it-field-full { grid-column: 1 / -1; }
.it-field > span {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
}
.it-req { color: var(--danger); font-weight: 700; }

.it-field input,
.it-field select,
.it-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.it-field textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
.it-field input:focus,
.it-field select:focus,
.it-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.it-field .it-invalid,
.it-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}

.it-sub-title {
  margin: 18px 0 12px;
  padding-left: 10px;
  border-left: 3px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.it-sub-title:first-of-type { margin-top: 4px; }
.it-sub-input   { color: #3b82f6; }
.it-sub-process { color: var(--primary); }
.it-sub-output  { color: var(--accent); }

.it-hint { margin: 0 0 12px; font-size: 0.82rem; color: var(--text-muted); }

/* ── Upload ───────────────────────────────────────────────────────── */
.it-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.it-upload-box {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.it-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.it-upload-label { font-weight: 600; color: var(--text); font-size: 0.92rem; }
.it-upload-desc { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.it-file-hidden { display: none; }

.it-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.it-chip-icon { flex: 0 0 auto; }
.it-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text);
}
.it-chip-size { flex: 0 0 auto; font-size: 0.76rem; color: var(--text-muted); }
.it-chip-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.it-chip-remove:hover { background: color-mix(in srgb, var(--danger) 32%, transparent); }

/* ── Action bar ───────────────────────────────────────────────────── */
.it-form-actions-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  position: sticky;
  bottom: 0;
  z-index: 4;
}
.it-actions-spacer { flex: 1 1 auto; }
.it-form-status {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 500;
}
.it-form-status--info    { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text); }
.it-form-status--success { background: color-mix(in srgb, var(--accent) 15%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.it-form-status--error   { background: color-mix(in srgb, var(--danger) 15%, transparent); color: color-mix(in srgb, var(--danger) 70%, var(--text)); }

/* ── List ─────────────────────────────────────────────────────────── */
.it-list-panel { display: flex; flex-direction: column; gap: 14px; }
.it-list-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
}
.it-filter { display: flex; flex-direction: column; gap: 5px; }
.it-filter-label { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); }
.it-filter select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  min-width: 150px;
}
.it-toolbar-spacer { flex: 1 1 auto; }

.it-order-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.it-loading { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--text-muted); }

.it-card {
  --st: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--st);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.it-card.it-status-pending     { --st: var(--text-muted); }
.it-card.it-status-in_progress { --st: #3b82f6; }
.it-card.it-status-done        { --st: var(--accent); }
.it-card.it-status-cancelled   { --st: var(--danger); }

.it-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.it-card-head-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.it-card-head-side { display: flex; align-items: center; gap: 6px; }
.it-card-code { font-weight: 700; font-size: 0.9rem; color: var(--text); letter-spacing: .02em; }

.it-pri {
  --pri: var(--warning);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pri) 15%, transparent);
  color: color-mix(in srgb, var(--pri) 62%, var(--text));
}
.it-pri--urgent { --pri: var(--danger); }
.it-pri--normal { --pri: var(--warning); }
.it-pri--low    { --pri: var(--accent); }

.it-status-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.it-card-del {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.it-card-del:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

.it-card-title { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.it-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.it-card-meta-item { white-space: nowrap; }
.it-tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: color-mix(in srgb, var(--primary) 65%, var(--text));
}
.it-card-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.it-card-more { border-top: 1px solid var(--border); padding-top: 8px; }
.it-card-more > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  list-style: none;
}
.it-card-more > summary::-webkit-details-marker { display: none; }
.it-card-more > summary::before { content: "\25B8  "; }
.it-card-more[open] > summary::before { content: "\25BE  "; }
.it-card-details { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.it-detail-row { display: flex; gap: 8px; font-size: 0.8rem; }
.it-detail-label { flex: 0 0 116px; color: var(--text-muted); }
.it-detail-val { flex: 1 1 auto; color: var(--text); white-space: pre-wrap; word-break: break-word; }

.it-card-atts { display: flex; flex-direction: column; gap: 6px; }
.it-att {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.it-att:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.it-att-kind {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.it-att-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--text);
}
.it-att-size { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-muted); }

.it-order-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.it-order-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .it-form-grid { grid-template-columns: 1fr; }
  .it-upload-grid { grid-template-columns: 1fr; }
  .it-order-list { grid-template-columns: 1fr; }
}
.mobile-layout .it-form-grid { grid-template-columns: 1fr; }
.mobile-layout .it-upload-grid { grid-template-columns: 1fr; }
.mobile-layout .it-order-list { grid-template-columns: 1fr; }
.mobile-layout .it-form-actions-bar { position: static; }
.mobile-layout .it-form-section { padding: 14px; }

/* ===================== Lead (issue #38) ===================== */
.lead-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.lead-search {
  flex: 1 1 260px;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
}
.lead-filter {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
}
.lead-toolbar .btn-primary { margin-left: auto; }
.lead-table td { vertical-align: middle; }
.lead-col-actions { white-space: nowrap; display: flex; gap: 6px; }
.lead-order-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-hover);
  font-size: 12px;
  font-weight: 600;
}
.lead-status-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
  font-size: 13px;
  max-width: 190px;
}
.lead-status-select[data-group="new"] { border-left: 3px solid #9aa0a6; }
.lead-status-select[data-group="processing"] { border-left: 3px solid #f0a01a; }
.lead-status-select[data-group="done"] { border-left: 3px solid #2fa565; }
.lead-status-select:disabled { opacity: .6; cursor: not-allowed; }

/* Dedup (issue #43) */
.lead-dup-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.lead-dup-current {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 13px;
  font-weight: 600;
}
.lead-dup-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lead-dup-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.lead-dup-option:hover { background: var(--bg-hover); }
.lead-dup-linked {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 13px;
}
.lead-gsheet-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.lead-gsheet-cols label {
  flex: 1 1 0;
  min-width: 84px;
}
.lead-gsheet-cols input { text-align: center; text-transform: uppercase; }

/* Modal Lead dùng chung khung .inhouse-modal */
.lead-modal { width: min(640px, 96vw); }
.lead-form .lead-col-full { grid-column: 1 / -1; flex: 1 1 100%; }
.lead-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.lead-req { color: #e5484d; }
.lead-phone-warn {
  margin: -4px 0 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(240, 160, 26, .12);
  color: #b8860b;
  font-size: 12.5px;
}
.lead-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* Lên đơn — product picker + giỏ */
.lead-convert-form { gap: 12px; }
.lead-convert-section-label {
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
  color: var(--text-muted);
}
.lead-product-search-row { display: flex; gap: 8px; }
.lead-product-search-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
}
.lead-product-results {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lead-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lead-product-name { font-size: 13px; }
.lead-product-hint { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }
.lead-cart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  min-height: 44px;
}
.lead-cart-empty { color: var(--text-muted); font-size: 13px; text-align: center; }
.lead-cart-item { display: flex; align-items: center; gap: 10px; }
.lead-cart-name { flex: 1; font-size: 13px; }
.lead-cart-qty {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
}
.lead-cart-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.lead-cart-remove:hover { color: #e5484d; }
.lead-pos-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 4px; }
.lead-pos-section-label { font-weight: 600; color: var(--text); margin-top: 12px; }
.lead-pos-current { font-size: 12.5px; color: var(--text); margin: 2px 0 0; white-space: pre-line; }
.lead-sync-hint {
  flex: 1 1 220px;
  min-width: 180px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
}
.lead-sync-hint-error { color: var(--danger, #e57373); }

/* Virtual scroll bảng Lead */
.lead-scroll {
  max-height: calc(100vh - 300px);
  min-height: 240px;
  overflow-y: auto;
}
.lead-scroll .lead-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
}
.lead-table tbody tr { height: 45px; }
.lead-table tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.lead-table tbody td.lead-col-actions { overflow: visible; max-width: none; }
.lead-table tbody tr.lead-spacer,
.lead-table tbody tr.lead-spacer td {
  padding: 0;
  border: none;
  background: transparent;
}
.lead-table-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ============ Báo cáo ngày MKT (mkt-report) ============ */
.mktr-panel { display: flex; flex-direction: column; gap: 14px; }
.mktr-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mktr-field > span { color: var(--text-muted); font-weight: 600; }
.mktr-field-full { flex: 1 1 100%; }
.mktr-field select, .mktr-field input, .mktr-field textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.mktr-form-head { display: block; }
.mktr-form-head .mktr-field { min-width: 0; }
.mktr-deadline-hint { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--text-muted); }

.mktr-table-scroll { overflow-x: auto; }
.mktr-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
.mktr-table th {
  text-align: left; padding: 8px; color: var(--text-muted); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mktr-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mktr-in { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.mktr-product { min-width: 120px; } .mktr-market { min-width: 70px; }
.mktr-cost, .mktr-revenue, .mktr-metric-orders, .mktr-metric-mess, .mktr-metric-calls { min-width: 72px; text-align: right; }
.mktr-metrics-cell { font-size: 12px; line-height: 1.35; white-space: nowrap; }
.mktr-pct { display: inline-block; min-width: 44px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mktr-row-del { background: none; border: none; color: var(--danger); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mktr-table-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; }
.mktr-total { font-weight: 600; font-variant-numeric: tabular-nums; }

.mktr-attach { display: flex; flex-direction: column; gap: 4px; min-width: 180px; border: 1px dashed transparent; border-radius: 6px; padding: 2px; }
.mktr-attach:focus-within { border-color: var(--accent); }
.mktr-attach-row { display: flex; align-items: center; gap: 6px; }
.mktr-attach-hint { font-size: 11px; color: var(--text-muted); }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.mktr-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.mktr-thumb { position: relative; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; background: var(--bg); }
.mktr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mktr-thumb-doc { font-size: 18px; }
.mktr-thumb-del { position: absolute; top: -2px; right: -2px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 16px; height: 16px; line-height: 14px; font-size: 12px; cursor: pointer; padding: 0; }

.mktr-actions-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mktr-form-actions { display: flex; flex-direction: column; gap: 8px; }
.it-actions-spacer { flex: 1; }

.mktr-filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.mktr-loading { color: var(--text-muted); padding: 12px; }

.mktr-team-block { margin-top: 12px; }
.mktr-team-title { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.mktr-team-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.mktr-member { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.mktr-member > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.mktr-member > summary::-webkit-details-marker { display: none; }
.mktr-member-name { font-weight: 600; }
.mktr-member-shift { font-size: 12px; color: var(--text-muted); }
.mktr-member-cost, .mktr-member-metric { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.mktr-member-metric { margin-left: 0; }
.mktr-sub-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0 12px 10px; width: calc(100% - 24px); }
.mktr-sub-table th { text-align: left; padding: 5px 8px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.mktr-sub-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.mktr-num { text-align: right; font-variant-numeric: tabular-nums; }
.mktr-metric-tag { font-size: 10px; color: var(--text-muted); }
.mktr-att-link { color: var(--accent); text-decoration: none; }
.mktr-member-note { margin: 0 12px 10px; font-size: 12px; color: var(--text-muted); }
.mktr-sub-empty td { color: var(--text-muted); font-style: italic; }

.mktr-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.mktr-badge--on_time { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.mktr-badge--late { background: color-mix(in srgb, var(--warning) 18%, transparent); color: color-mix(in srgb, var(--warning) 80%, var(--text)); }
.mktr-badge--missing { background: color-mix(in srgb, var(--danger) 16%, transparent); color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.mktr-badge--pending { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }

.mktr-viol-block { margin-top: 12px; }
.mktr-viol-block h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.mktr-viol-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.mktr-viol-table-wrap { overflow-x: auto; }
.mktr-viol-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.mktr-viol-table th { text-align: left; padding: 8px; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mktr-viol-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mktr-viol-result {
  width: 100%; min-width: 140px; max-width: 180px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.mktr-viol-note {
  width: 100%; min-width: 160px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.mktr-viol-row--saved .mktr-viol-result,
.mktr-viol-row--saved .mktr-viol-note { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.mktr-viol-row--error .mktr-viol-result,
.mktr-viol-row--error .mktr-viol-note { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }
.mktr-viol-ok { color: var(--accent); margin: 0; }
.mktr-viol-pending { color: var(--text-muted); margin: 0; }

.mktr-config-card { max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.mktr-config-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.mktr-config-grid .mktr-field { min-width: 140px; }

/* mkt-report: link chips + ảnh report + lightbox */
.mktr-attach-row { flex-wrap: wrap; }
.mktr-link-input { min-width: 120px; flex: 1; }
.mktr-links { display: flex; flex-wrap: wrap; gap: 4px; }
.mktr-link-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px; font-size: 11px; max-width: 100%; }
.mktr-link-chip a { color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mktr-link-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.mktr-thumb-img { cursor: zoom-in; }

.mktr-att-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mktr-att-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; }
.mktr-att-thumb:hover { border-color: var(--accent); }

.mktr-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; }
.mktr-lightbox.hidden { display: none; }
.mktr-lb-img { max-width: 90vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.mktr-lb-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.mktr-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 40px; width: 52px; height: 72px; cursor: pointer; border-radius: 8px; }
.mktr-lb-nav:hover { background: rgba(255,255,255,.25); }
.mktr-lb-prev { left: 16px; } .mktr-lb-next { right: 16px; }
.mktr-lb-nav.hidden { display: none; }
.mktr-lb-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 999px; }

/* mkt-report: bảng Báo cáo dạng phẳng */
.mktr-report-scroll { overflow-x: auto; padding: 0; }
.mktr-report-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.mktr-report-table th {
  text-align: left; padding: 9px 10px; color: var(--text-muted); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
  background: var(--bg-card); z-index: 1;
}
.mktr-report-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mktr-report-table .mktr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mktr-col-action { width: 88px; text-align: center; white-space: nowrap; vertical-align: middle; }
.mktr-reset-btn {
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  font-weight: 600;
  padding: 2px 10px;
}
.mktr-reset-btn:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
}
.mktr-reset-na { color: var(--text-muted); }
.mktr-reset-bulk { color: var(--danger) !important; }
.mktr-team-row td {
  background: var(--bg-hover); font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--border); padding: 7px 10px;
}
.mktr-member-first > td { border-top: 2px solid var(--border); }
.mktr-member-cell { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mktr-member-name { font-weight: 600; display: block; }
.mktr-member-total { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mktr-member-note-tag { cursor: help; margin-left: 4px; }
.mktr-empty-cell { color: var(--text-muted); font-style: italic; }
.mktr-report-table tr:hover > td { background: color-mix(in srgb, var(--text-muted) 6%, transparent); }

/* ===== mkt-report: polish Tạo báo cáo + Vi phạm ===== */
.mktr-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.mktr-card-title--row { justify-content: space-between; }
.mktr-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}
.mktr-head-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* Pill deadline */
.mktr-deadline-hint { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mktr-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted);
}
.mktr-pill.is-active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mktr-pill--muted { opacity: .8; }

/* Bảng nhập */
.mktr-table thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.mktr-table tbody tr:hover > td { background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.mktr-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.mktr-row-del { transition: color .15s, transform .15s; }
.mktr-row-del:hover { transform: scale(1.2); }

/* Footer tổng chi phí */
.mktr-table-actions { justify-content: flex-end; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
.mktr-total-label { color: var(--text-muted); font-weight: 600; font-size: 13px; align-self: center; }
.mktr-total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.mktr-total--muted { color: var(--text); font-weight: 600; }

/* Thẻ thống kê Vi phạm */
.mktr-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 4px; }
.mktr-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; border-left: 4px solid var(--border); }
.mktr-stat-card.has-viol { border-left-color: var(--danger); }
.mktr-stat-card.is-clean { border-left-color: var(--accent); }
.mktr-stat-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.mktr-stat-nums { display: flex; gap: 22px; }
.mktr-stat-num { display: flex; flex-direction: column; line-height: 1.1; }
.mktr-stat-num b { font-size: 26px; font-variant-numeric: tabular-nums; }
.mktr-stat-num small { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.mktr-stat-miss b { color: var(--danger); }
.mktr-stat-late b { color: var(--warning); }
.mktr-stat-pending { color: var(--text-muted); font-size: 13px; }

.mktr-viol-empty { color: var(--accent); font-weight: 600; }
.mktr-viol-member { display: flex; align-items: center; gap: 8px; }
.mktr-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--text-muted);
}
.mktr-avatar--miss { background: var(--danger); }
.mktr-avatar--late { background: var(--warning); }
.mktr-viol-table tbody tr:hover > td { background: color-mix(in srgb, var(--text-muted) 5%, transparent); }

/* ── Đối soát chi phí Ads ── */
.mktr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.mktr-check input { margin: 0; }
.mktr-recon-table { min-width: 900px; }
.mktr-recon-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mktr-recon-pos { color: color-mix(in srgb, var(--warning) 82%, var(--text)); }
.mktr-recon-neg { color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.mktr-recon-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mktr-recon-badge--match { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.mktr-recon-badge--minor { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 80%, var(--text)); }
.mktr-recon-badge--major { background: color-mix(in srgb, var(--danger) 16%, transparent); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.mktr-recon-badge--under { background: color-mix(in srgb, var(--danger) 22%, transparent); color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.mktr-recon-badge--over { background: color-mix(in srgb, var(--warning) 20%, transparent); color: color-mix(in srgb, var(--warning) 82%, var(--text)); }
.mktr-recon-badge--pending { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.mktr-recon-card--under { border-left-color: var(--danger); }
.mktr-recon-card--major { border-left-color: var(--danger); }
.mktr-recon-card--over { border-left-color: var(--warning); }
.mktr-recon-card--minor { border-left-color: var(--warning); }
.mktr-recon-card--match { border-left-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   VẬN CHUYỂN & COD (issue #44)
   Dùng token màu chung — tự đúng cả dark lẫn light mode.
   ══════════════════════════════════════════════════════════════ */

.ship-page { display: flex; flex-direction: column; gap: 14px; }

/* ── Thẻ thống kê ── */
.ship-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ship-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ship-stat-val { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.ship-stat-label { font-size: .78rem; color: var(--text-muted); }
.ship-stat--ok { border-left-color: var(--accent); }
.ship-stat--bad { border-left-color: var(--danger); }
.ship-stat--warn { border-left-color: var(--warning); }
.ship-stat--info { border-left-color: var(--primary); }
.ship-stat--wait { border-left-color: var(--warning); }
.ship-stat--muted { border-left-color: var(--text-muted); }

/* ── Bộ lọc ── */
.ship-filters { padding: 12px 14px; }
.ship-filters-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.ship-filters-actions { margin-left: auto; display: flex; gap: 8px; }

.ship-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.ship-field > span { font-size: .78rem; color: var(--text-muted); }
.ship-field-grow { flex: 1; min-width: 200px; }
.ship-field-full { width: 100%; margin-top: 10px; }
.ship-field input,
.ship-field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-family: var(--font);
  font-size: .85rem;
}
.ship-field input:focus,
.ship-field select:focus { outline: none; border-color: var(--primary); }
.ship-check { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); padding-bottom: 7px; }

/* ── Badge trạng thái ── */
.ship-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.ship-badge--ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ship-badge--bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.ship-badge--warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.ship-badge--info { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.ship-badge--wait { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
.ship-badge--muted { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }

.ship-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .72rem;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ship-tag--api { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ship-tag--manual { color: var(--text-muted); }

/* ── Danh sách vận đơn ── */
.ship-list { display: flex; flex-direction: column; gap: 10px; }
.ship-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ship-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ship-card-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-card-side { display: flex; align-items: center; gap: 6px; }
.ship-track { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; color: var(--text); font-size: .95rem; }
.ship-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); }
.ship-meta-item b { color: var(--text); }
.ship-card-raw, .ship-card-note { font-size: .8rem; color: var(--text-muted); margin: 0; }
.ship-card-err { font-size: .78rem; color: var(--danger); margin: 0; }
.ship-card-del {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.ship-card-del:hover { color: var(--danger); }

/* ── Lịch sử trạng thái ── */
.ship-hist { border-top: 1px solid var(--border); padding-top: 6px; }
.ship-hist summary { cursor: pointer; font-size: .78rem; color: var(--text-muted); }
.ship-hist-body { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ship-hist-row { display: flex; align-items: center; gap: 10px; font-size: .76rem; color: var(--text-muted); }
.ship-hist-time { min-width: 78px; font-family: ui-monospace, monospace; }
.ship-hist-raw { flex: 1; }
.ship-hist-src { opacity: .7; font-style: italic; }

/* ── Trạng thái rỗng / loading ── */
.ship-empty {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
  background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius);
}
.ship-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.ship-loading { color: var(--text-muted); font-size: .85rem; padding: 14px; margin: 0; }

/* ── Tra đơn ── */
.ship-lookup-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.ship-lookup-results { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ship-lookup-item {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font); color: var(--text);
}
.ship-lookup-item:hover { background: var(--bg-hover); border-color: var(--primary); }
.ship-lookup-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ship-lookup-code { font-family: ui-monospace, monospace; font-weight: 700; color: var(--primary); }
.ship-lookup-name { font-weight: 600; }
.ship-lookup-phone, .ship-lookup-sub { color: var(--text-muted); font-size: .8rem; }
.ship-lookup-sub { display: flex; gap: 14px; flex-wrap: wrap; }
.ship-lookup-sub b { color: var(--text); }
.ship-lookup-addr { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Đơn đã chọn ── */
.ship-selected {
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 8px;
  padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 4px;
}
.ship-selected-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ship-selected-addr, .ship-selected-meta { font-size: .8rem; color: var(--text-muted); margin: 0; }
.ship-selected-meta b { color: var(--text); }
.ship-attach-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ship-attach-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ship-api-hint { margin-top: 10px; }

/* ── Cấu hình hãng ── */
.ship-carriers-intro { padding: 12px 14px; }
.ship-carriers-intro h3 { margin: 0 0 4px; font-size: .95rem; }
.ship-carrier-list { display: flex; flex-direction: column; gap: 10px; }
.ship-carrier { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ship-carrier-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ship-carrier-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-carrier-name { font-weight: 700; font-size: .95rem; }
.ship-carrier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ship-carrier-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-carrier-updated { margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.ship-secret-set { color: var(--accent); font-weight: 600; font-size: .72rem; }
.ship-manual-note, .ship-webhook-url { margin: 0; }
.ship-webhook-url code {
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; font-size: .76rem;
}

@media (max-width: 720px) {
  .ship-filters-actions { margin-left: 0; width: 100%; }
  .ship-field, .ship-field-grow { min-width: 100%; }
  .ship-carrier-updated { margin-left: 0; }
}