/* ===== Tab Ví tiền — thiết kế lại 2026-10-10 =====
   Bỏ 4 ô thống kê dạng card (trùng lặp với dòng tổng bảng) và bỏ card ví dạng
   lưới. Nay: DÒNG TIỀN lên đầu (không cần tiêu đề — Ròng/tháng đã tự nói rõ),
   VÍ là BẢNG + dòng tổng — đúng pattern các tab vàng / cổ phiếu / tiền gửi.
   Click dòng → card chi tiết (Sửa · Chuyển · Xóa). */

/* Tiêu đề vùng ví (bỏ luôn "Dòng tiền" — chỉ còn 1 dòng nên không cần nhãn) */
.cash-table-head {
  font-size: 14px; font-weight: 700; color: var(--accent);
  padding: 14px 16px 8px;
}
.cash-sep { border-top: 2px solid #ef4444; margin: 18px 0 4px; }

/* Bảng ví — dùng padding/viền chung của .table-wrapper, không đặt lại */
.cash-own-wrap { margin: 0 0 4px; }
#cash-body tr { cursor: pointer; }
#cash-body tr.row-active { background: rgba(37, 99, 235, .10); }
#cash-body tr.cash-row-hidden { opacity: .55; background-image: linear-gradient(to right, #a855f7, #a855f7); background-size: 100% 2px; background-position: 0 50%; background-repeat: no-repeat; }
/* Cột số: căn PHẢI + tabular-nums cho thẳng hàng (lệch trên mobile là do
   căn giữa/trái lẫn lộn giữa các cột số) */
.cash-cell-name { font-weight: 650; }
.cash-cell-bal,
.cash-cell-apr,
.cash-cell-daily {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cash-cell-apr { color: #22c55e; }
/* Cột "Tính vào tổng" (2026-10-13): checkbox căn giữa — thay cho card chi tiết
   đã bỏ. Card mở là Sửa/Chuyển/Xóa; giờ chỉ còn lựa chọn hiển thị này nên
   đưa thẳng lên dòng, đổi là lưu ngay. */
.cash-cell-vis {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}
.cash-cell-vis .cash-vis-cb {
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: #22c55e;
}
.cash-head-vis {
  font-size: 12px;
  white-space: nowrap;
}
html[data-theme="light"] .cash-cell-vis .cash-vis-cb { accent-color: #16a34a; }
.cash-hidden-tag {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
  color: var(--text-faint); border: 1px dashed var(--hairline); vertical-align: middle;
}
html[data-theme="light"] .cash-cell-apr { color: #15803d; }

/* Dòng TỔNG nằm TRONG <tfoot> (cuối bảng) và lấn đúng CỘT của bảng ví:
   ô 1 = "Tổng N ví", ô 2 = tổng số dư, ô 3 = lãi suất TRUNG BÌNH, ô 4 = lãi/ngày.
   Cách đọc: "Tổng 3 ví · 18.5 m · TB 4.43%/năm · 2.2 k/ngày".
   ⚠ Cột Lãi suất phải là TRUNG BÌNH trọng số số dư, KHÔNG phải tổng các % —
     cộng nhiều lãi suất lại với nhau cho ra số vô nghĩa.
   Làm nổi bật: nền xanh nhạt + kẻ ngăn rõ + chữ in đậm, để phân biệt với các
   dòng ví thường. Tên ví trong dòng tổng không đậm bằng số (bỏ !important của
   .cash-cell-name). */
#cash-tfoot .cash-total-row td {
  background: rgba(37, 99, 235, .10);
  border-top: 2px solid rgba(37, 99, 235, .45);
  border-bottom: none;
  font-size: 13px;
  padding: 11px 12px;
  white-space: nowrap;
}
html[data-theme="light"] #cash-tfoot .cash-total-row td { background: rgba(37, 99, 235, .08); }
#cash-tfoot .cash-total-row td:last-child { border-right: none; }
#cash-tfoot .cash-tfoot-count { font-size: 14px; font-weight: 800; color: var(--text); }
#cash-tfoot .cash-tfoot-hidden { font-size: 11px; color: var(--text-faint); }
#cash-tfoot .cash-tfoot-unit { font-size: 11px; color: var(--text-dim); }
#cash-tfoot .cash-total-row td b { font-size: 15px; color: var(--text); }
#cash-tfoot .cash-cell-daily b { color: #22c55e; }
html[data-theme="light"] #cash-tfoot .cash-cell-daily b { color: #15803d; }
/* Hàng tổng không sinh thanh cuộn ngang khi mobile */
@media (max-width: 560px) {
  #cash-tfoot .cash-total-row td { white-space: normal; font-size: 12px; }
}

/* ===== Card mở rộng 1 ví (click dòng trong bảng) =====
   Vào THẲNG chế độ sửa: mọi ô là input, không có nhãn/giá trị chỉ-để-xem và
   không có nút "Sửa" / "Chuyển" trung gian. Bố cục lưới 2 cột dùng hết bề rộng
   card (PC) — nhãn nằm TRÊN ô nhập nên ô nhập rộng, dễ gõ; mobile tự về 1 cột
   nhờ `force-mobile-container-queries` (@container của app). */
.cash-detail-card { gap: 10px 16px; }
.cash-detail-card .ce-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cash-detail-card .ce-f-wide { grid-column: 1 / -1; }
.cash-detail-card .ce-f .dc-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cash-detail-card .ce-name,
.cash-detail-card .ce-balance,
.cash-detail-card .ce-apr,
.cash-detail-card .ce-amount,
.cash-detail-card .ce-to {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--glass-border); border-radius: 8px;
  background: var(--bg-deep); color: var(--text); font-family: var(--font);
}
.cash-detail-card .ce-balance,
.cash-detail-card .ce-apr,
.cash-detail-card .ce-amount { font-variant-numeric: tabular-nums; }
.cash-detail-card .ce-name:focus,
.cash-detail-card .ce-balance:focus,
.cash-detail-card .ce-apr:focus,
.cash-detail-card .ce-amount:focus,
.cash-detail-card .ce-to:focus { outline: none; border-color: var(--cyan); }
.cash-detail-card .ce-daily { font-size: 15px; font-weight: 700; color: #22c55e; padding: 6px 0; font-variant-numeric: tabular-nums; }
html[data-theme="light"] .cash-detail-card .ce-daily { color: #15803d; }
.cash-detail-card .ce-visible-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 6px 0; cursor: pointer; }
.cash-detail-card .ce-sep {
  border-top: 1px dashed var(--hairline); padding-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-faint); text-transform: uppercase;
}
.cash-detail-card .ce-tf-go { display: flex; justify-content: flex-end; }
.cash-detail-card .ce-actions {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid rgba(37,99,235,0.16); margin-top: 2px; padding-top: 10px;
}
/* Xóa nằm BÊN TRÁI, cặp Lưu + Hủy dồn sang BÊN PHẢI.
   `margin-right:auto` trên nút Xóa (phần tử đầu) đẩy hai nút sau ra mép phải. */
.cash-detail-card .ce-actions .cash-card-del { margin-right: auto; }

/* Mobile (1 cột): lưới tự dồn vì .ce-f không đặt bề rộng cứng */
@media (max-width: 560px) {
  .cash-detail-card { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Ẩn 4 ô thống kê cũ (vẫn giữ trong DOM để kpi.js / qa đọc — không xoá id) */
.cash-summary { display: none !important; }

/* Modal chuyển tiền cũ — không còn dùng (chuyển giờ nằm trong card) */
#cash-transfer-modal { display: none !important; }



.dm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.dm-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dm-modal-content {
  background: var(--bg-card);
  border: 1px solid rgba(37, 99, 235, .25);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(12px) scale(.98);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.dm-modal.open .dm-modal-content {
  transform: translateY(0) scale(1);
}
.dm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.dm-modal-header h3 {
  margin: 0;
  font-size:15px;
  font-weight: 700;
  letter-spacing: .3px;
}
.dm-modal-close {
  background: none;
  border: none;
  font-size:26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-faint);
  border-radius: 8px;
  width: 30px;
  height: 30px;
}
.dm-modal-close:hover {
  background: rgba(239, 68, 68, .14);
  color: #ef4444;
}
.dm-modal-body {
  padding: 20px;
}
.dm-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
}
.dm-form-row {
  margin-bottom: 14px;
}
.dm-form-row label {
  display: block;
  font-size:13px;
  color: var(--text-faint);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.dm-form-row input[type="text"],
.dm-form-row input[type="number"],
.dm-form-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--bg-main);
  color: var(--color-text);
}
.dm-form-row input:focus,
.dm-form-row select:focus {
  outline: none;
  border-color: rgba(37, 99, 235, .6);
}
.dm-form-row input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  accent-color: #2563eb;
}
/* ============================================================
   DÒNG TIỀN — Thu nhập & Nợ
   Nền phẳng, bo góc nhẹ, dùng biến màu sẵn có để tự đúng cả giao diện
   sáng/tối (anh: thiết kế đồng bộ, nền phẳng, không card rời rạc).
   ============================================================ */
  .cf-summary {
    /* 2026-10-10: chỉ còn 1 ô "Ròng/tháng" ⇒ 1 DÒNG gọn: nhãn bên trái,
       số căn PHẢI. Không còn viền card vì chỉ 1 số, nhìn như dòng tổng kết. */
    margin: 14px 0 6px;
  }
  .cf-stat {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--hairline);
    padding: 10px 2px;
  }
  .cf-stat-label { font-size: 13px; color: var(--text-faint); font-weight: 600; margin-bottom: 0; }
  .cf-stat-value { font-size: 17px; font-weight: 750; color: var(--text); text-align: right; }
  .cf-stat-value.pos { color: var(--color-up); }
  .cf-stat-value.neg { color: var(--color-down); }

  /* Tổng block (2026-10-10): số tiền xanh sau nhãn "Thu nhập", số nợ đỏ sau
     nhãn "Nợ". Nằm giữa nhãn và nút "＋ Thêm", đẩy nút sang phải. */
  .cf-block-total {
    font-size: 15px; font-weight: 750; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .cf-block-total-income { color: var(--color-up); }
  .cf-block-total-debt { color: var(--color-down); }

  .cf-block { margin-top: 20px; }
  .cf-block-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
  }
  .cf-block-title { font-size: 14px; font-weight: 700; color: var(--accent); }
  .cf-add-toggle { margin-left: auto; margin-bottom: 0; padding: 6px 12px; font-size: 13px; }

  .cf-rows { display: flex; flex-direction: column; gap: 6px; }
  .cf-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    background: var(--bg-card);
  }
  /* Dòng không được tính vào tổng: mờ + gạch ngang, NHƯNG vẫn hiện lý do
     bên cạnh — im lặng cho mờ đi khiến người dùng tưởng là lỗi. */
  .cf-row-off { opacity: .55; }
  .cf-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
  .cf-row-off .cf-row-label { text-decoration: line-through; }
  .cf-sub { font-size: 12px; color: var(--text-faint); }
  .cf-row-amount { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
  .cf-tag-auto, .cf-tag-off, .cf-tag-warn {
    font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  }
  .cf-tag-auto  { color: var(--text-dim); background: var(--bg-deep); border: 1px solid var(--hairline); }
  .cf-tag-off  { color: var(--color-down); border: 1px solid currentColor; }
  .cf-tag-warn { color: #f59e0b; border: 1px solid currentColor; }
  html[data-theme="light"] .cf-tag-auto { background: rgba(0,0,0,.05); }

  .cf-btn, .cf-jump {
    font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-dim); border: 1px solid var(--glass-border); cursor: pointer;
  }
  .cf-btn:hover, .cf-jump:hover { border-color: var(--accent); color: var(--accent); }
  .cf-wallet-sel {
    font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm);
    background: var(--bg-card-solid); color: var(--text); border: 1px solid var(--glass-border);
    max-width: 200px;
  }
  .cf-empty { font-size: 13px; color: var(--text-faint); padding: 8px 2px; }
  .cf-add[hidden] { display: none !important; }
/* Form "Rút về ví" / "Bán trái phiếu" (2026-10-08) — inline trong detail-card */
.de-withdraw-form {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end;
  padding: 8px 0 2px; border-top: 1px solid rgba(37,99,235,0.14); margin-top: 4px;
}
.de-withdraw-form .dc-label { color: var(--text-faint); font-size: 11px; font-weight: 600; margin-right: -6px; }
.de-withdraw-form select, .de-withdraw-form input {
  min-height: 34px; padding: 5px 8px; border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm, 6px); background: var(--bg-deep); color: var(--color-text);
  font: inherit; font-size: 13px; min-width: 0;
}
.de-withdraw-form select { flex: 1 1 200px; }
.de-withdraw-form input { flex: 1 1 120px; }
.de-withdraw-actions { display: flex; gap: 8px; }
.de-withdraw-actions button { padding: 6px 14px; border-radius: var(--radius-sm, 6px); font-size: 13px; cursor: pointer; }
/* Ghi chú dưới nhãn thu nhập tự động (dòng đáo hạn chưa nhập lãi không kỳ hạn) */
.cf-row.cf-row-auto { flex-wrap: wrap; }
.cf-row-note { flex-basis: 100%; font-size: 11px; color: var(--text-faint); line-height: 1.35; }

.thau-warn { display:none; margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: #fca5a5; font-size: 13px; font-weight: 600; }