:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #60a5fa;
  --success: #22c55e;
  --danger: #ef4444;
  --bg: #eef5fb;
  --bg2: #f7fbff;
  --card: #ffffff;
  --border: #d7e3f0;
  --text: #1e293b;
  --muted: #64748b;
  --sidebar-w: 228px;
}

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

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: #0d0d0d;
  color: #fff;
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}
.sidebar .logo {
  padding: 24px 16px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar .logo h1 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: .12em; color: #fff; }
.sidebar .logo h1::first-line { color: var(--accent); }
.sidebar .logo small { opacity: 0.7; font-size: 0.75rem; }
.sidebar nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-group { margin: 4px 8px; }
.nav-group-toggle {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.08) !important;
  border-radius: 8px;
  font-weight: 700;
}
.nav-group-toggle .nav-caret { font-style: normal; transition: transform .15s; }
.nav-group.open .nav-group-toggle .nav-caret { transform: rotate(180deg); }
.nav-group-items { display: none; padding: 2px 0 4px 10px; }
.nav-group.open .nav-group-items { display: block; }
.nav-group.has-active > .nav-group-toggle { background: rgba(255,255,255,.18) !important; }
.nav-icon-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.nav-ico-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.9rem; }
.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  text-align: left;
  padding: 8px 14px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ios-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  flex-shrink: 0;
  background: #007aff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.nav-label { flex: 1; }
.nav-toggle-left { display: flex; align-items: center; gap: 10px; }
.nav-ico-edit {
  display: grid;
  grid-template-columns: 32px 1fr 52px 44px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.sidebar nav button:hover,
.sidebar nav button.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.sidebar .footer {
  padding: 12px;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Main */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 20px 28px;
  max-width: 1600px;
}

/* Chỉ một trang hiển thị tại một thời điểm */
main.main > .page { display: none !important; }
main.main > .page.active { display: block !important; }
.page { display: none !important; }
.page.active { display: block !important; }

/* Drag & drop */
.drop-zone-active {
  outline: 2px dashed #1F4E79 !important;
  outline-offset: 4px;
  background: #e8f0fe !important;
}
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }
.picker-item { cursor: grab; text-align: left; width: 100%; margin-bottom: 4px; }

h2.page-title {
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: #1e3a5f;
  letter-spacing: .04em;
}
h2.page-title span, .page-title-accent { color: var(--accent); }

/* Cards & forms */
.card {
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 10px;
  align-items: flex-end;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-group label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  min-width: 120px;
  outline: none;
  transition: border 0.15s;
  background: #fff;
  color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}
.form-group textarea { resize: vertical; min-height: 60px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #219a52; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a93226; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { background: #2a2a2e; color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Tables */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
th, td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
}
tr:hover td { background: #f8fafc; }
tr.selected td { background: #e8f0fe; }
td.money, th.money { text-align: right; }
td.center, th.center { text-align: center; }

/* Totals panel */
.totals-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.totals-inputs { flex: 1; min-width: 260px; }
.totals-result {
  min-width: 260px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 14px 18px;
  border: 1px solid var(--border);
}
.totals-result .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.9rem;
}
.totals-result .grand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  border-top: 2px solid var(--primary);
  margin-top: 6px;
  padding-top: 8px;
}
.totals-result .remaining {
  font-weight: 600;
  color: var(--danger);
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-nhap { background: #ecf0f1; color: #7f8c8d; }
.badge-dagui { background: #d6eaf8; color: #2980b9; }
.badge-thuongluong { background: #fef9e7; color: #d68910; }
.badge-dachot { background: #d5f5e3; color: #1e8449; }
.badge-dahuy { background: #fadbd8; color: #c0392b; }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  justify-content: center;
  align-items: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: #fff;
  border-radius: 12px;
  width: 95%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.modal h3 { margin-bottom: 16px; color: var(--primary); }
.modal .form-group { margin-bottom: 10px; }
.modal .form-group input,
.modal .form-group select { width: 100%; }

/* Empty state */
.empty {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  .sidebar .logo h1, .sidebar .logo small, .sidebar nav button span { display: none; }
  .sidebar nav button { text-align: center; padding: 14px 0; font-size: 1.2rem; }
  .main { margin-left: 60px; padding: 12px; }
}

/* ===== Kế toán tabs ===== */
.acct-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e8ecf0;
  padding-bottom: 8px;
}
.acct-tab {
  background: #f0f2f5;
  border: none;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 0.92rem;
  color: #555;
  font-weight: 500;
  transition: all 0.15s;
}
.acct-tab:hover { background: #e4e8ee; color: #1F4E79; }
.acct-tab.active {
  background: #1F4E79;
  color: #fff;
}
.acct-tab-panel { display: none; }
.acct-tab-panel.active { display: block; }

/* ===== Thiết kế feature grid ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.feature-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.feature-item:hover {
  border-color: #1F4E79;
  box-shadow: 0 4px 12px rgba(31,78,121,0.08);
}
.feature-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.feature-item strong {
  display: block;
  color: #1F4E79;
  margin-bottom: 4px;
  font-size: 0.95rem;
}
.feature-item p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

/* ===== Dashboard ===== */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-card.accent { border-color: #1F4E79; background: #f0f5fa; }
.dash-card.success { border-color: #2e7d32; background: #f1f8f2; }
.dash-card.warn { border-color: #e65100; background: #fff8f0; }
.dash-num { font-size: 1.5rem; font-weight: 700; color: #1F4E79; line-height: 1.2; }
.dash-num.money { font-size: 1.05rem; }
.dash-label { font-size: 0.8rem; color: #666; margin-top: 4px; }
.dash-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1F4E79;
  margin: 8px 0 10px;
}
.alert-list { margin: 0; padding-left: 18px; }
.alert-list li { margin-bottom: 6px; font-size: 0.92rem; line-height: 1.4; }

.progress-bar {
  height: 8px;
  background: #e8ecf0;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  width: 70px;
  vertical-align: middle;
  margin-right: 4px;
}
.progress-fill {
  height: 100%;
  background: #1F4E79;
  border-radius: 4px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8ecf0;
  font-size: 0.8rem;
  color: #333;
}
.badge-success { background: #c8e6c9; color: #1b5e20; }
.badge-warn { background: #ffe0b2; color: #e65100; }

/* ===== Kanban / Workspace v0.4 ===== */
.ws-board-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.ws-board-tab {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.ws-board-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ws-board-tab.add { border-style: dashed; color: var(--muted); }
.ws-tab-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-left: 4px; }
.ws-board-tab.proj { font-weight: 600; }
.ws-archived-row { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ws-arch-item { background: rgba(255,255,255,0.18); color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 0.8rem; }
.ws-arch-item button { margin-left: 4px; border: none; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.ws-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ws-view-group { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-view-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.82rem;
}
.ws-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ws-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.ws-filters input, .ws-filters select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
}
.ws-cal-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.kanban-board {
  display: flex;
  gap: 12px;
  min-height: 420px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.kanban-board.kanban-lanes {
  flex-direction: column;
  overflow-x: hidden;
  gap: 14px;
}
.prio-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  padding: 8px;
  min-height: 180px;
  border-left: 6px solid var(--lane, #64748b);
}
.prio-row.lane-over { outline: 2px dashed #1F4E79; }
.prio-label {
  flex: 0 0 118px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 4px solid var(--lane, #64748b);
}
.prio-label strong { color: #1F4E79; font-size: 0.88rem; }
.prio-actions button { border: none; background: #f1f5f9; border-radius: 4px; cursor: pointer; }
.prio-cols {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex: 1;
  align-items: flex-start;
  min-height: 160px;
}
.prio-add {
  align-self: flex-start;
  border: 1px dashed #9db6c9;
  background: #fff;
  color: #1F4E79;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
}
.ws-dept-chip.dept-over { outline: 2px dashed #fff; }
.kanban-col {
  background: #ebecf0;
  border-radius: 12px;
  padding: 8px 8px 10px;
  min-height: 200px;
  min-width: 272px;
  max-width: 272px;
  flex: 0 0 272px;
  transition: background 0.15s;
}
.kanban-col.drag-over { background: #dce6f0; }
.kanban-col.add-col { background: transparent; min-height: auto; box-shadow: none; }
.kanban-col-header {
  font-weight: 600;
  font-size: 0.85rem;
  color: #1F4E79;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.col-name { flex: 1; }
.col-actions { opacity: 0.35; }
.kanban-col:hover .col-actions { opacity: 1; }
.col-actions button { border: none; background: none; cursor: pointer; padding: 0 2px; }
.kanban-count {
  background: #1F4E79;
  color: #fff;
  font-size: 0.75rem;
  padding: 1px 7px;
  border-radius: 10px;
}
.kanban-list { min-height: 80px; }
.kanban-add-btn, .kanban-add-col {
  width: 100%;
  border: 1px dashed #c5ccd6;
  background: transparent;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: #555;
  margin-top: 4px;
}
.kanban-card {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
  cursor: grab;
  border: none;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
.trello-card { overflow: hidden; padding: 0 0 8px; }
.card-cover { height: 140px; background-size: cover; background-position: center; margin-bottom: 8px; }
.card-cover-img { width: 100%; height: 140px; object-fit: cover; display: block; margin-bottom: 8px; }
.trello-card .kanban-card-title { padding: 8px 10px 4px; font-weight: 600; }
.trello-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 10px; font-size: 0.75rem; color: #5e6c84; }
.trello-badges .ck-done { background: #61bd4f; color: #fff; padding: 1px 6px; border-radius: 4px; }
.card-ava {
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: #1F4E79; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
}
.pj-templates { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.pj-tpl { font-size: 0.9rem; display: flex; gap: 8px; align-items: center; }
.kanban-card:active { cursor: grabbing; }
.kanban-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.kanban-card-meta { font-size: 0.78rem; color: #666; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kanban-card-actions { margin-top: 6px; display: flex; gap: 4px; }
.card-dl { font-weight: 600; }
.dl-ok { color: #475569; }
.dl-soon { color: #c2410c; background: #ffedd5; padding: 1px 6px; border-radius: 8px; }
.dl-today { color: #b91c1c; background: #fee2e2; padding: 1px 6px; border-radius: 8px; }
.dl-over { color: #fff; background: #dc2626; padding: 1px 6px; border-radius: 8px; }

.modal-wide { max-width: 920px !important; width: 96%; }
.td-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.td-head h3 { margin: 0; flex: 1; outline: none; }
.td-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; margin-top: 12px; }
@media (max-width: 800px) { .td-grid { grid-template-columns: 1fr; } }
.td-grid textarea, .td-grid input, .td-grid select { width: 100%; }
.td-link { font-size: 0.85rem; color: #555; margin: 8px 0; }
.ck-bar { height: 8px; background: #e8ecf0; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.ck-fill { height: 100%; background: #16a34a; }
.ck-item { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 0.9rem; }
.cmt { background: #f8fafc; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 0.88rem; }
.cmt-meta { font-size: 0.75rem; color: #64748b; margin-bottom: 2px; }
.att-row { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; padding: 4px 0; }
.ws-set-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ws-set-row input[type=text], .ws-set-row input:not([type]) { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }

.cal-week-head, .cal-week-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day-h { font-weight: 600; font-size: 0.8rem; color: #1F4E79; padding: 6px; background: #eef3f8; border-radius: 6px; text-align: center; }
.cal-day-col { min-height: 180px; background: #f8fafc; border: 1px solid #e8ecf0; border-radius: 8px; padding: 6px; }
.cal-chip { font-size: 0.75rem; padding: 4px 6px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; }
.cal-chip.ev { background: #dbeafe; color: #1e40af; }
.cal-chip.tk { background: #fef3c7; color: #92400e; }
.cal-month-head, .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-month-head { font-size: 0.8rem; font-weight: 600; text-align: center; color: #1F4E79; margin-bottom: 4px; }
.cal-m-cell { min-height: 88px; border: 1px solid #e8ecf0; border-radius: 8px; padding: 4px; background: #fff; cursor: pointer; }
.cal-m-cell.muted { opacity: 0.45; }
.cal-m-num { font-size: 0.78rem; color: #64748b; }

.ws-board-table { width: 100%; }
.ws-board-table th, .ws-board-table td { vertical-align: middle; }
.ws-board-table input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.muted-hint { color: #64748b; font-size: 0.82rem; line-height: 1.45; }
.auth-chip { color: #fff; font-size: 0.78rem; margin-bottom: 6px; }
.auth-chip span { display: block; font-weight: 600; }
.auth-chip small { opacity: 0.8; display: block; margin-bottom: 6px; }
.auth-chip .btn { color: #1F4E79; background: #fff; }

#ws-task-detail { align-items: flex-start; padding: 48px 12px 24px; background: rgba(0,0,0,0.55); }
.trello-modal {
  background: #f1f2f4;
  border-radius: 12px;
  width: 96%;
  max-width: 780px;
  max-height: 90vh;
  overflow: auto;
  padding: 16px 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.tr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tr-top select { border: none; background: #e4e6ea; border-radius: 6px; padding: 6px 10px; font-weight: 600; }
.tr-icon { border: none; background: transparent; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.tr-body { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
@media (max-width: 800px) { .tr-body { grid-template-columns: 1fr; } }
.tr-title-row { display: flex; gap: 8px; align-items: flex-start; }
.tr-title-row h3 { margin: 0; flex: 1; outline: none; font-size: 1.25rem; }
.tr-check { width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 4px; }
.tr-inlist { font-size: 0.85rem; color: #64748b; margin: 4px 0 10px 30px; }
.tr-inlist select { border: none; background: #e4e6ea; border-radius: 4px; padding: 2px 6px; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px 30px; }
.tr-actions button { border: 1px solid #d0d4da; background: #fff; border-radius: 6px; padding: 6px 10px; font-size: 0.82rem; cursor: pointer; }
.tr-block { margin-bottom: 14px; }
.tr-h { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.tr-h-row { display: flex; justify-content: space-between; align-items: center; }
.tr-ghost { border: 1px solid #d0d4da; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.tr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-fields label { font-size: 0.75rem; color: #64748b; display: flex; flex-direction: column; gap: 3px; }
.tr-fields input, .tr-fields select, .tr-block textarea { padding: 7px 8px; border: 1px solid #d0d4da; border-radius: 6px; font-size: 0.88rem; width: 100%; background: #fff; }
.tr-block textarea { min-height: 70px; }
.tr-add-row { display: flex; gap: 8px; margin-top: 8px; }
.tr-add-row input { flex: 1; padding: 6px 8px; border: 1px solid #d0d4da; border-radius: 6px; }
.tr-side { background: #fff; border-radius: 10px; padding: 12px; }
.tr-cmt-box { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tr-cmt-box input { padding: 8px; border: 1px solid #d0d4da; border-radius: 6px; }
.tr-muted { font-size: 0.8rem; color: #64748b; margin-top: 6px; }
.tr-x { margin-left: auto; border: none; background: none; cursor: pointer; color: #94a3b8; }

#page-tasks.page.active {
  background: linear-gradient(180deg, #dbeafe 0 88px, #f8fbff 88px);
  margin: -20px -28px;
  padding: 20px 28px 28px;
}
#page-tasks .page-title { color: #1e3a5f; }
#page-tasks .ws-board-tab {
  background: #fff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  font-weight: 600;
  opacity: 1;
}
#page-tasks .ws-board-tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
#page-tasks .ws-board-tab.add { background: #eff6ff; color: #1d4ed8; border: 1px dashed #93c5fd; }
#page-tasks .ws-toolbar .btn-outline,
#page-tasks .ws-view-btn {
  background: #fff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
  opacity: 1;
}
#page-tasks .ws-view-btn.active {
  background: #3b82f6 !important;
  color: #fff !important;
}
#page-tasks .ws-tab-label { color: #1e3a5f; opacity: 0.85; }
.dept-chip { background: #e8f0fe; color: #1F4E79; padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }
.ws-dept-chip { display: inline-flex; align-items: center; }
.ws-dept-chip .ws-board-tab { border-radius: 20px 0 0 20px !important; margin: 0; }
.dept-ed, .dept-del {
  border: none;
  background: #fff;
  padding: 6px 7px;
  cursor: pointer;
  font-weight: 700;
}
.dept-ed { color: #1F4E79; }
.dept-del {
  color: #b91c1c;
  border-radius: 0 20px 20px 0;
}
#page-tasks .ws-dept-chip .dept-del { background: #fff; color: #b91c1c; }
.tr-x { border: none; background: #fee2e2; color: #b91c1c; border-radius: 4px; width: 22px; height: 22px; cursor: pointer; margin-left: auto; }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.att-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att-card { width: 110px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; font-size: 0.75rem; }
.att-card img { width: 100%; height: 72px; object-fit: cover; display: block; }
.att-ico { height: 72px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: #f1f5f9; }
.att-name { padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-acts { display: flex; justify-content: space-between; padding: 0 6px 6px; }
.mem-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mem-chip { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 20px; padding: 4px 10px 4px 4px; font-size: 0.82rem; cursor: pointer; }
.mem-chip.on { background: #dbeafe; outline: 1px solid #1F4E79; }
.mem-chip input { display: none; }
.mem-ava, .chat-ava, .card-ava {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1F4E79; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
}
.card-avas { display: inline-flex; margin-left: auto; }
.card-avas .card-ava { margin-left: -4px; border: 2px solid #fff; }
.chat-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding-right: 4px; }
.chat-bubble { display: flex; gap: 8px; align-items: flex-start; }
.chat-body { background: #f1f5f9; border-radius: 0 10px 10px 10px; padding: 6px 8px; flex: 1; font-size: 0.85rem; }
.chat-img { max-width: 100%; border-radius: 6px; margin-top: 4px; }
.chat-compose { display: flex; flex-direction: column; gap: 6px; }
.chat-compose textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; }
.chat-actions { display: flex; justify-content: space-between; align-items: center; }
.lane-chip { background: #fee2e2; color: #991b1b; padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }
.kanban-card.card-over { outline: 2px dashed #1F4E79; }
.quote-pull { background: #eef6ff; border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.quote-sheet { background: #fff; border: 1px solid #dbe3ee; border-radius: 8px; padding: 10px; font-size: 0.78rem; max-height: 420px; overflow: auto; }
.qs-head { text-align: center; margin-bottom: 8px; color: #1F4E79; }
.qs-title { font-weight: 700; font-size: 0.95rem; margin: 4px 0; }
.qs-table-wrap { overflow-x: auto; }
.qs-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.qs-table th { background: #1F4E79; color: #fff; padding: 4px; }
.qs-table td { border: 1px solid #d0d7e2; padding: 3px 4px; }
.qs-table .c { text-align: center; }
.qs-table .r { text-align: right; }
.qs-table .qg td { background: #e8f0fe; font-weight: 700; color: #1F4E79; }
.qs-table .qsum td { background: #fff8e1; font-weight: 600; }
.qs-foot { margin-top: 8px; text-align: right; line-height: 1.5; }
.qs-grand { font-size: 0.95rem; color: #1F4E79; font-weight: 700; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 8px; }
.perm-grid label { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.perm-box { background: #f4f7fb; border-radius: 8px; padding: 10px 12px; }

/* Workspace light: trắng + xanh dương nhạt */
.kanban-col, .prio-lane, .prio-label, .kanban-card, .ws-filters {
  background: #fff !important;
  color: #1e293b !important;
  border-color: #dbeafe !important;
}
.prio-label strong { color: #1d4ed8 !important; }
.ws-filters { background: #f8fbff !important; }
.kanban-card { box-shadow: 0 1px 3px rgba(37,99,235,.08); }
.btn-primary, .ws-view-btn.active, .ws-board-tab.active {
  background: #3b82f6 !important;
  color: #fff !important;
}
.btn-success { background: #2563eb !important; }
h3, h4, .dash-num, .qs-grand { color: #1d4ed8 !important; }
.perm-box { background: #eff6ff !important; }
.nav-group-toggle { background: rgba(59,130,246,.18) !important; }

.block-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.blk{border:1px solid #d7e3f0;border-radius:8px;padding:8px;background:#fff}
.blk img{max-width:100%;max-height:160px;object-fit:cover;border-radius:6px}
.blk textarea{width:100%;min-height:70px}
.blk-tools{display:flex;gap:4px;margin-top:6px}

.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.opt-card{background:#fff;border:1px solid #e5e7eb;padding:8px;border-radius:8px}
.opt-card img{width:100%;height:120px;object-fit:cover;background:#eee}
.opt-card p{font-size:.8rem;margin:6px 0}

#opt-files{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.theme-studio{display:block;width:100%}
.th-preview{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#f6f4f1;min-height:520px}
.th-zone{cursor:pointer;outline:2px solid transparent;outline-offset:-2px}
.th-zone.on{outline-color:#3b82f6}
.th-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:11px;letter-spacing:.12em}
.th-hero{padding:36px 24px 28px;color:#fff}
.th-hero h3{font-size:1.4rem;margin:6px 0}
.th-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
.th-card{background:#fff;min-height:110px;box-shadow:0 1px 3px #0001}
.th-card .ph{height:80px;background:#ddd}
.th-card p{padding:6px 8px;font-size:12px}
.th-ct{padding:16px;color:#fff}
.th-insp{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px}
.th-insp h4{margin:0 0 8px}
@media(max-width:900px){.theme-studio{grid-template-columns:1fr}}

.th-drag.dragging{opacity:.5}
.th-drag.dragover{outline:2px dashed #3b82f6;background:#eff6ff}

.sa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.sa-studio{display:grid;grid-template-columns:220px minmax(420px,1fr) 300px;gap:16px;align-items:start;width:100%}
.sa-left{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px}
.sa-left button{text-align:left;border:0;background:0;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:.88rem}
.sa-left button.on{background:#dbeafe;color:#1d4ed8;font-weight:600}
.sa-mid{min-width:0}
.sa-right{position:sticky;top:12px;max-height:calc(100vh - 80px);overflow:auto}
.sel-tag{display:none;background:#2563eb;color:#fff;font-size:.72rem;padding:2px 8px;border-radius:999px;width:fit-content;margin-bottom:6px}
.sel-tag.on{display:inline-block}
.th-zone.on{outline:2px solid #2563eb;outline-offset:-2px}
.th-zone .sel-lab{display:none;position:absolute;top:8px;right:8px;background:#2563eb;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;z-index:2}
.th-zone.on .sel-lab{display:block}
@media(max-width:900px){.sa-studio{grid-template-columns:1fr}}

.btn-dark{background:#0d1b2a;color:#fff;border:0;padding:8px 14px;border-radius:8px;cursor:pointer}
.sa-brandmark{padding:8px 10px 16px;border-bottom:1px solid #eef2f7;margin-bottom:8px}
.sa-brandmark b{display:block;font-size:1.6rem;letter-spacing:.2em;color:#0d1b2a}
.sa-brandmark small{color:#8b7355;letter-spacing:.18em;font-size:.68rem}
.sa-left{background:#fff;border:0;box-shadow:0 8px 24px #0d1b2a0d;border-radius:12px;padding:12px}
.sa-left button.on{background:#e8f0fe;color:#1d4ed8}
.th-preview.via-preview{background:#f3f6fb;border:0;border-radius:16px;padding:0;box-shadow:0 10px 30px #0d1b2a14}
.via-preview .th-bar{border-radius:12px 12px 0 0;padding:12px 16px;display:flex;justify-content:space-between}
.via-preview .th-hero{padding:22px 20px 8px;background:transparent;color:#0d1b2a;min-height:auto}
.via-preview .th-hero .eye{letter-spacing:.2em;font-size:.72rem;color:#5b6b7c}
.via-preview .th-hero h3{font-size:1.6rem;margin:6px 0 10px;color:#0d1b2a}
.via-preview .th-prods{margin:8px 16px 16px;padding:12px;border:1.5px dashed #93c5fd;border-radius:12px;position:relative;background:#fff}
.via-preview .th-grid{grid-template-columns:repeat(4,1fr);gap:10px}
.via-preview .th-card{border-radius:10px;box-shadow:none;border:1px solid #edf1f5}
.via-preview .th-card .ph{height:72px;background:#eef2f6;font-size:22px;display:flex;align-items:center;justify-content:center}
.via-preview .th-ctbtn{margin:0 16px 18px;background:#0d1b2a;color:#fff;text-align:center;padding:12px;border-radius:10px;cursor:pointer}
.insp-head{display:flex;justify-content:space-between;align-items:center}
.insp-x{border:0;background:0;font-size:20px;cursor:pointer}
.sa-right{background:#fff;border:0;box-shadow:0 8px 24px #0d1b2a0d;border-radius:12px;padding:16px}

.sa-stats{display:flex;gap:10px;margin:12px 0}
.sa-stats .stat{background:#eef3fb;padding:12px 16px;border-radius:10px;font-weight:600}
.sa-todo{margin:8px 0 16px}
.sa-left button{border-left:3px solid transparent}
.sa-left button.on{border-left-color:#2563eb;background:#e8f0fe}
.prev-label{text-align:center;letter-spacing:.2em;font-size:.75rem;color:#64748b;margin-bottom:8px}
.dev-toggle{display:flex;gap:0;margin-top:10px}
.dev-toggle button{flex:1;border:1px solid #e2e8f0;background:#fff;padding:8px;cursor:pointer}
.dev-toggle button.on{background:#e8f0fe}
.th-preview.mob{max-width:380px;margin:0 auto}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.data-table th,.data-table td{border:1px solid #e5e7eb;padding:8px;text-align:left}

#page-shopadmin.page.active{display:block!important;width:100%;max-width:none}
#th-preview{min-height:480px;width:100%}
#sa-theme.card{padding:12px;width:100%}
#sa-theme>h3,#sa-theme>.muted-hint{display:none}