/**
 * =========================================================================
 * SỔ THU CHI & VAY NỢ - GIAO DIỆN SÁNG SỦA, CHỮ TO RÕ (LIGHT THEME MISA DESIGN)
 * =========================================================================
 */

:root {
  /* MD3 Color Palette & Coral-Pink Accent */
  --accent-coral: #f43f5e;           /* Coral-Pink MD3 Accent */
  --accent-coral-hover: #e11d48;
  --accent-coral-light: #fff1f2;
  --accent-coral-glow: rgba(244, 63, 94, 0.25);

  --primary: #0284c7;               /* Primary Slate-Sky */
  --primary-dark: #0369a1;
  --primary-light: #f0f9ff;
  --primary-glow: rgba(2, 132, 199, 0.2);
  
  /* 4 Màu Ngữ Nghĩa Tài Chính Thống Nhất Xuyên Suốt */
  --color-chi: #ea580c;             /* 1. Chi tiêu: ĐỎ */
  --bg-chi-pastel: #fff7ed;
  --border-chi-pastel: #fed7aa;

  --color-thu: #10b981;             /* 2. Thu nhập: GREEN */
  --bg-thu-pastel: #ecfdf5;
  --border-thu-pastel: #d1fae5;

  --color-transfer: #64748b;        /* 3. Chuyển khoản: XÁM */
  --color-transfer-dark: #475569;
  --bg-transfer-pastel: #f1f5f9;
  --border-transfer-pastel: #cbd5e1;

  --color-debt: #f97316;            /* 4. Vay nợ: CAM */
  --color-debt-dark: #ea580c;
  --bg-debt-pastel: #fff7ed;
  --border-debt-pastel: #fed7aa;

  --success: #10b981;
  --danger: #ef4444;
  --warning: #f97316;
  
  /* Nền và Bề mặt Material Design 3 */
  --bg-page: #f4f6f8;               /* Light Cool-Gray */
  --bg-card: #ffffff;               /* Trắng tinh khôi */
  --bg-subcard: #f8fafc;
  --bg-input: #ffffff;
  
  /* Typography Inter tương phản cao, số tiền rõ nét */
  --text-main: #0f172a;             /* Dark Slate */
  --text-secondary: #475569;
  --text-muted: #64748b;            /* Xám trung tính */
  --text-light: #ffffff;
  
  /* Viền và Bo góc MD3 */
  --border: #eaecf0;                /* Subtle modern border */
  --border-light: #f1f3f5;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px;
  
  /* MD3 Flat / Soft Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.07);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
 * THANH CUỘN OVERLAY BÁN TRONG SUỐT 20% (TRANSPARENCY 20% - KHÔNG LỆCH LAYOUT)
 * ========================================================================= */
* {
  box-sizing: border-box;
}

/* Ẩn các nút mũi tên điều hướng hai đầu cuộn */
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Kích thước thanh cuộn mảnh (4px), track hoàn toàn trong suốt */
*::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  background: transparent !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 3px 0 !important;
}

/* Con trượt (Thumb): Độ mờ/trong suốt 20% (alpha 0.20), bo tròn mềm mại chuẩn Apple / Fintech */
*::-webkit-scrollbar-thumb {
  background-color: rgba(15, 23, 42, 0.20) !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
  transition: background-color 0.2s ease !important;
}

/* Khi người dùng rê chuột vào thanh cuộn: tăng độ rõ lên 40% để dễ tương tác */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(15, 23, 42, 0.40) !important;
}

*::-webkit-scrollbar-corner {
  background: transparent !important;
}

html, body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* =========================================================================
 * BỐ CỤC CHUẨN: MOBILE (FULL MÀN HÌNH OPPO FIND X9) & PC LAPTOP (KHUNG MÔ PHỎNG)
 * ========================================================================= */
@media (max-width: 500px) {
  html, body {
    display: block !important;
    position: static !important;
    background: var(--bg-page) !important;
  }

  #app-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-page);
  }
}

@media (min-width: 501px) {
  body {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    background: #e2e8f0 !important;
  }

  #app-container {
    width: 100%;
    max-width: 425px;
    height: min(890px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    aspect-ratio: 425 / 890;
    border-radius: 28px;
    background-color: var(--bg-page);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #cbd5e1;
    margin: auto;
  }
}

/* =========================================================================
 * 1. MÀN HÌNH KHÓA MÃ PIN (LIGHT THEME)
 * ========================================================================= */
.pin-overlay {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pin-lock-header {
  text-align: center;
  margin-bottom: 24px;
}

.pin-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 12px auto;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.pin-lock-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
}

.pin-lock-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.pin-dots {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

.pin-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #cbd5e1;
  transition: all 0.2s ease;
}

.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
  transform: scale(1.15);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  width: 100%;
  max-width: 280px;
}

.pin-key {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: var(--text-main);
  font-size: 1.55rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
}

.pin-key:hover, .pin-key:active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
  transform: scale(0.96);
}

.pin-key-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pin-key-icon {
  font-size: 1.25rem;
  color: var(--danger);
}

.pin-error {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 14px;
  min-height: 20px;
}

.pin-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* =========================================================================
 * 2. APP HEADER - MATERIAL DESIGN 3 CLEAN SURFACE
 * ========================================================================= */
.app-header-3cards {
  background: #ffffff;
  color: var(--text-main);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-badge-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.brand-badge-mini i {
  font-size: 1.25rem;
  color: var(--accent-coral);
}

.header-right-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pill-coral, .btn-pill-amber {
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--accent-coral-light);
  color: var(--accent-coral);
  border: 1px solid #fecdd3;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-pill-coral:hover, .btn-pill-amber:hover {
  background: #ffe4e6;
  transform: translateY(-1px);
}

.icon-btn-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn-mini:hover {
  background: #e2e8f0;
  color: var(--text-main);
}

/* =========================================================================
 * 2B. THANH ĐIỀU HƯỚNG CẠNH DƯỚI (BOTTOM NAVIGATION BAR) - LUÔN CỐ ĐỊNH
 * ========================================================================= */
.app-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2px 8px;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

@media (min-width: 501px) {
  .app-bottom-nav {
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 0;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  border-radius: var(--radius-md);
}

.bottom-nav-item .nav-icon-wrap {
  width: 44px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

.bottom-nav-item .nav-label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.2s ease;
}

.bottom-nav-item:hover {
  color: var(--text-main);
}

.bottom-nav-item.active {
  color: var(--accent-coral);
}

.bottom-nav-item.active .nav-icon-wrap {
  background: var(--accent-coral-light);
  color: var(--accent-coral);
}

.bottom-nav-item.active .nav-label {
  color: var(--accent-coral);
  font-weight: 700;
}

/* =========================================================================
 * 3. VÙNG CUỘN CHÍNH & CARD SECTIONS
 * ========================================================================= */
.main-scroll-view {
  flex: 1;
  overflow-y: auto;
  overflow-y: overlay; /* Đè nổi lên giao diện, không chiếm pixel chiều ngang làm lệch bố cục */
  overflow-x: hidden;
  scrollbar-gutter: stable; /* Giữ cố định bề rộng container, triệt tiêu 100% hiện tượng co giãn giao diện */
  padding: 8px 10px 54px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-page);
  -webkit-overflow-scrolling: touch;
}

.hidden {
  display: none !important;
}

.card-view-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Khung chứa Card trắng */
.card-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================================
 * 4. THẺ 1 (TRÁI) - TÀI KHOẢN & TIMELINE THEO ẢNH MẪU 2, 4, 5
 * ========================================================================= */

/* View 1A: Danh Sách Ví (Ảnh 4) */
.total-asset-hero {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.total-asset-hero .hero-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.total-asset-hero .hero-val {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--text-main);
  margin-top: 4px;
}

/* Thanh tìm kiếm chuẩn pill bo tròn */
.search-box {
  position: relative;
  width: 100%;
}

.search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 11px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 0.88rem;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.search-box input::placeholder {
  color: #94a3b8;
}

.search-clear {
  position: absolute;
  right: 12px;
  top: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Danh sách ví dạng hàng chuẩn Ảnh 4 */
.wallet-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  cursor: pointer;
}

.wallet-item-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wallet-item:hover {
  background: #f8fafc;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.wallet-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.wallet-icon-box svg.vcb-svg-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.wallet-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.wallet-bal {
  font-size: 1rem;
  font-weight: 800;
}

/* View 1B: Chi Tiết Tài Khoản (VCB-5067 - Ảnh 2 & 5) */
.acc-blue-header {
  background: var(--primary);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 168, 236, 0.3);
}

.acc-blue-header .acc-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acc-blue-header .acc-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.acc-blue-header .acc-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-tool-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.acc-tool-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Header Chi tiết Sổ nợ từng đối tượng (Căn giữa tên & Ghi chú AI nhỏ nghiêng) */
.debt-person-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 10px rgba(0, 168, 236, 0.3);
  position: relative;
}

.debt-person-header-center {
  flex: 1;
  text-align: center;
  min-width: 0;
  padding: 0 6px;
}

.debt-person-header-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.debt-person-ai-note {
  font-size: 9.5px;
  font-style: italic;
  color: rgba(224, 242, 254, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  margin-top: 3px;
  white-space: nowrap;
  line-height: 1.2;
}

.debt-person-ai-note i {
  font-size: 10px;
  color: #fde047;
  flex-shrink: 0;
}

/* Dòng chọn kỳ: "Toàn bộ thời gian >" căn giữa */
.acc-period-selector-row {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}

.acc-period-link-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.acc-period-link-btn:hover {
  opacity: 0.8;
}

/* Bảng tóm tắt Tổng thu | Tổng chi + Số dư hiện tại */
.acc-summary-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.acc-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}

.acc-summary-col:first-child {
  border-right: 1px solid var(--border);
}

.acc-summary-lbl {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.acc-summary-val-inc {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--success);
  margin-top: 3px;
}

.acc-summary-val-exp {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--danger);
  margin-top: 3px;
}

.acc-current-bal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.acc-current-bal-lbl {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.acc-current-bal-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-main);
}

/* =========================================================================
 * 5. DÒNG THỜI GIAN TIMELINE THEO NGÀY CHUẨN XÁC THEO ẢNH 2 & 5
 * ========================================================================= */
.acc-timeline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline-day-block {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Tiêu đề ngày có VẠCH XANH ĐỨNG BÊN TRÁI & SỐ NGÀY RẤT TO */
.timeline-day-header-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--border-light);
  background: #ffffff;
}

/* Vạch xanh đứng bên trái chuẩn ảnh */
.timeline-day-header-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--primary);
}

.timeline-date-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-big-day {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
}

.timeline-dow-month {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.timeline-dow-month strong {
  color: var(--text-main);
  font-weight: 700;
}

.timeline-day-total-badge {
  font-size: 1rem;
  font-weight: 800;
  color: var(--danger);
}

/* Danh sách giao dịch nối bằng VẠCH NÉT ĐỨT */
.timeline-tx-items-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px 10px;
}

/* Vạch nét đứt nối các node tròn giao dịch */
.timeline-tx-items-list::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  border-left: 2px dashed #cbd5e1;
  z-index: 0;
}

/* Hàng giao dịch hỗ trợ cử chỉ vuốt & bấm sửa */
.swipe-item-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #ffffff;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Nút Gạch nợ hiện khi vuốt trái sang phải */
.swipe-action-bg-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(135deg, #00a8ec, #0284c7);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 1;
}

.swipe-action-bg-left i {
  font-size: 1.2rem;
}

/* Nút Xóa hiện khi vuốt phải sang trái */
.swipe-action-bg-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 1;
}

.swipe-action-bg-right i {
  font-size: 1.2rem;
}

/* Lớp nội dung giao dịch trượt */
.swipe-content-row {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
  will-change: transform;
}

.swipe-content-row:hover {
  background: #f8fafc;
}

.swipe-content-row.swiped-left {
  transform: translateX(-90px);
}

.swipe-content-row.swiped-right {
  transform: translateX(90px);
}

.timeline-tx-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-cat-circle-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.timeline-cat-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.timeline-tx-subnote {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

.timeline-tx-values {
  text-align: right;
}

.timeline-tx-amt {
  font-size: 1.05rem;
  font-weight: 800;
}

.timeline-tx-amt.expense {
  color: var(--danger);
}

.timeline-tx-amt.income {
  color: var(--success);
}

.timeline-tx-running-bal {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}

/* =========================================================================
 * 5.1 THIẾT KẾ THẺ GIAO DỊCH HIỆN ĐẠI (CARD-BASED THEO ẢNH MẪU HUẾ 3N2D)
 * ========================================================================= */

/* =========================================================================
 * 5. MD3 FLOATING ACTION BUTTON (CORAL-PINK ACCENT)
 * ========================================================================= */
.md3-fab {
  display: none !important;
}

/* Thẻ tóm tắt tài chính chuẩn Ảnh 2 (Ngân sách / Đã chi / Số dư) */
.acc-summary-modern-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-summary-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}

.acc-summary-metric-col {
  display: flex;
  flex-direction: column;
}

.acc-summary-metric-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

.acc-summary-metric-val-inc {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-thu);
}

.acc-summary-metric-val-exp {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-chi);
}

.acc-summary-footer-bal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acc-summary-bal-lbl {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.acc-summary-bal-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-main);
}

/* Cụm phân chia theo từng ngày (Day Group Section) */
.timeline-day-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.timeline-day-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 6px 4px;
}

.day-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.day-num-box {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
  background: #ffffff;
  border: 1px solid var(--border);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.day-dow-col {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.day-dow-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-main);
}

.day-date-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.day-total-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  background: #fef2f2;
  color: var(--color-chi);
  border: 1px solid #fee2e2;
}

/* Khung chứa các thẻ giao dịch có trục thời gian bên trái */
.timeline-cards-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 18px;
}

.timeline-cards-track::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: #e2e8f0;
  border-radius: 1px;
}

/* Thẻ giao dịch độc lập (Floating Modern Transaction Card) */
.swipe-item-container.card-mode {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
  margin-bottom: 2px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.swipe-item-container.card-mode:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.swipe-content-row.card-mode {
  padding: 12px 14px;
  border: none;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* Nút Swipe Action ẩn hoàn toàn khi thẻ ở trạng thái tĩnh */
.swipe-item-container.card-mode .swipe-action-bg-left,
.swipe-item-container.card-mode .swipe-action-bg-right {
  opacity: 0;
  pointer-events: none;
  border-radius: 16px;
  transition: opacity 0.18s ease;
}

.swipe-item-container.card-mode.is-swiped-left .swipe-action-bg-right,
.swipe-item-container.card-mode.is-swiped-right .swipe-action-bg-left,
.swipe-item-container.card-mode.is-dragging .swipe-action-bg-left,
.swipe-item-container.card-mode.is-dragging .swipe-action-bg-right,
.swipe-item-container.card-mode:has(.swiped-left) .swipe-action-bg-right,
.swipe-item-container.card-mode:has(.swiped-right) .swipe-action-bg-left {
  opacity: 1;
  pointer-events: auto;
}

/* Badge Icon Pastel vuông bo góc 12px chuẩn Ảnh 1 & 2 */
.cat-pastel-badge {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.swipe-item-container.card-mode:hover .cat-pastel-badge {
  transform: scale(1.06);
}

/* Các biến thể màu Pastel theo nhóm hạng mục */
.badge-food {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
}

.badge-transport {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0284c7;
}

.badge-house {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #9333ea;
}

.badge-shopping {
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  color: #db2777;
}

.badge-health {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
}

.badge-education {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

.badge-debt {
  background: var(--bg-debt-pastel);
  border: 1px solid var(--border-debt-pastel);
  color: var(--color-debt);
}

.badge-income {
  background: var(--bg-thu-pastel);
  border: 1px solid var(--border-thu-pastel);
  color: var(--color-thu);
}

.badge-transfer {
  background: var(--bg-transfer-pastel);
  border: 1px solid var(--border-transfer-pastel);
  color: var(--color-transfer-dark);
}

.badge-default {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

/* Khối thông tin chi tiết giữa */
.tx-info-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tx-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tx-main-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tag loại giao dịch chuẩn 4 màu: Chi (Đỏ), Thu (Xanh), Chuyển khoản (Vàng), Nợ (Cam) */
.tx-type-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.tag-chi {
  background: var(--bg-chi-pastel);
  color: var(--color-chi);
  border: 1px solid var(--border-chi-pastel);
}

.tag-thu {
  background: var(--bg-thu-pastel);
  color: var(--color-thu);
  border: 1px solid var(--border-thu-pastel);
}

.tag-transfer {
  background: var(--bg-transfer-pastel);
  color: var(--color-transfer-dark);
  border: 1px solid var(--border-transfer-pastel);
}

.tag-debt {
  background: var(--bg-debt-pastel);
  color: var(--color-debt-dark);
  border: 1px solid var(--border-debt-pastel);
}

.tx-note-text {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tx-category-sub {
  font-size: 0.82rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.25;
}
.tx-category-sub.text-emerald {
  color: #059669 !important;
  font-weight: 600;
}

.tx-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 1px;
}

.tx-meta-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tx-meta-wallet {
  color: var(--primary);
  font-weight: 600;
}

.tx-meta-person {
  color: var(--color-debt-dark);
  font-weight: 700;
}

.tx-meta-transfer-wallets {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.72rem;
}

.tx-transfer-arrow-icon {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 4px;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

.tx-wallet-name {
  color: var(--primary);
  font-weight: 600;
}

/* Khối hiển thị số tiền bên phải chuẩn 4 màu */
.tx-values-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.tx-amount-val {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tx-amount-val.amt-chi {
  color: var(--color-chi);
}

.tx-amount-val.amt-thu {
  color: var(--color-thu);
}

.tx-amount-val.amt-transfer {
  color: var(--color-transfer-dark);
}

.tx-amount-val.amt-debt {
  color: var(--color-debt);
}

.tx-sub-pill {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 2px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tx-running-bal-tag {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 500;
}

/* =========================================================================
 * 6. THẺ 2 (GIỮA) - NHẬP LIỆU MATERIAL DESIGN 3 (SEGMENTED PILL SWITCHER)
 * ========================================================================= */

/* 3 Tab Nhập Liệu: Chi Tiêu / Thu Nhập / Chuyển Khoản dạng Pill */
.entry-3tabs-switcher {
  display: flex;
  background: #eef2f6;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  gap: 4px;
}

.entry-3tab-btn {
  flex: 1;
  padding: 9px 8px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.entry-3tab-btn.active-chi {
  background: var(--color-chi, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3) !important;
  font-weight: 700 !important;
}

.entry-3tab-btn.active-thu {
  background: var(--color-thu);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  font-weight: 700;
}

.entry-3tab-btn.active-transfer {
  background: var(--color-transfer);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.25);
  font-weight: 700;
}

/* Banner Sửa / Gạch Nợ / Cân Đối (NẰM CHỒNG LÊN THANH TAB NHẬP LIỆU GIỐNG POPUP QR, KHÔNG ĐẨY MÀN HÌNH NHẬP LIỆU) */
.form-banner-editing,
.partial-pay-banner,
.reconcile-pay-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  border-radius: 9999px;
  padding: 0 8px 0 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  animation: fadeIn 0.2s ease-out;
  box-sizing: border-box;
}

.form-banner-editing.hidden,
.partial-pay-banner.hidden,
.reconcile-pay-banner.hidden {
  display: none !important;
}

.form-banner-editing {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #7dd3fc;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
  color: #0369a1;
}

.partial-pay-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fde68a;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.12);
  color: #92400e;
}

.reconcile-pay-banner {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1.5px solid #d8b4fe;
  box-shadow: 0 2px 6px rgba(147, 51, 234, 0.12);
  color: #6b21a8;
}

.banner-overlay-content {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  overflow: hidden;
}

.banner-overlay-text {
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.btn-cancel-edit-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.btn-cancel-edit-pill:active {
  transform: scale(0.92);
  background: #fee2e2;
  border-color: #fca5a5;
}

/* HỘP SỐ TIỀN CỰC TO NỀN TRẮNG CHUẨN XỊN */
.amount-hero-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.amount-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 10px 0;
}

.amount-big-field {
  width: 100%;
  max-width: 320px;
  background: transparent;
  border: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-main);
  outline: none;
  text-align: center;
  letter-spacing: -0.02em;
}

.currency-suffix {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
}

/* Dải phím cộng nhanh số tiền (+30k, +50k, +1tr...) */
.quick-amt-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.quick-amt-chip {
  padding: 5px 11px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.quick-amt-chip:hover, .quick-amt-chip:active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Form 2 Cột Đối Xứng Tuyệt Đối & Cân Đối Chuẩn UI */
.form-2col-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.form-group-compact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0; /* Ngăn chặn nội dung select/text làm vỡ tỷ lệ 50-50 */
  width: 100%;
  box-sizing: border-box;
}

.form-group-compact .form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-height: 18px;
  display: flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-input, .form-select {
  height: 42px;
  padding: 8px 10px;
  font-size: 0.85rem;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--text-main);
  outline: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-overflow: ellipsis;
}

.form-select {
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.form-input[type="datetime-local"] {
  font-size: 0.78rem;
  padding: 8px 8px;
  font-family: inherit;
}

.form-input:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.w-full {
  width: 100%;
}

optgroup {
  font-weight: 700;
  color: var(--primary);
  background: #f8fafc;
}

optgroup option {
  font-weight: normal;
  color: var(--text-main);
  background: #ffffff;
  padding: 6px 10px;
}

/* Chips chọn nhanh mục con có icon */
.entry-child-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 4px 0;
}

.entry-child-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  box-shadow: var(--shadow-sm);
}

.entry-child-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.entry-child-chip.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 800;
  box-shadow: 0 2px 6px var(--primary-glow);
}

.new-person-pill {
  padding: 4px 10px;
  border-radius: 14px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #b45309;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Hàng 3 Nút Cân Đối: [↺ Xóa] [LƯU GIAO DỊCH] [🎙️ Voice] */
.entry-action-bar-balanced {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}

.btn-square-reset {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.btn-square-reset:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: #fee2e2;
}

.btn-primary-large {
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-coral);
  border: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  letter-spacing: 0.01em;
}

.btn-primary-large:hover {
  background: var(--accent-coral-hover);
}

.btn-primary-large:active {
  transform: scale(0.98);
}

.btn-primary-large.theme-chi {
  background: var(--color-chi, #ea580c) !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3) !important;
}
.btn-primary-large.theme-chi:hover {
  background: #c2410c !important;
}

.btn-primary-large.theme-thu {
  background: var(--color-thu);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-primary-large.theme-thu:hover {
  background: #059669;
}

.btn-primary-large.theme-transfer {
  background: var(--color-transfer);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
}
.btn-primary-large.theme-transfer:hover {
  background: #ca8a04;
}

.btn-square-voice {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.btn-square-voice:hover {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 168, 236, 0.4);
}

/* =========================================================================
 * 7. THẺ 3 (PHẢI) - KHÁC & BÁO CÁO (LƯỚI THẺ VUÔNG CHUẨN ẢNH 3)
 * ========================================================================= */
.hub-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 0;
}

.hub-square-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.hub-square-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.hub-square-btn:active {
  transform: scale(0.97);
}

.hub-square-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.hub-square-btn:hover .hub-square-icon-box {
  transform: scale(1.08);
}

.hub-square-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
}

.hub-square-sub {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

/* =========================================================================
 * 8. MODAL HẠNG MỤC THU/CHI ACCORDION TREE (CHUẨN ẢNH 1)
 * ========================================================================= */
.cat-mgmt-type-toggle {
  display: flex;
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: var(--radius-md);
  gap: 6px;
}

.cat-mgmt-tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cat-mgmt-tab-btn.active-chi {
  background: var(--color-chi, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35) !important;
}

.cat-mgmt-tab-btn.active-thu {
  background: var(--success);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 176, 80, 0.35);
}

.cat-tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  overflow-y: overlay;
  padding: 2px;
}

.cat-parent-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.cat-parent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  transition: background 0.15s;
}

.cat-parent-header:hover {
  background: #f8fafc;
}

.cat-parent-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.cat-icon-badge {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.cat-parent-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.cat-child-count-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.cat-parent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-toggle-arrow {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.cat-parent-card.expanded .cat-toggle-arrow {
  transform: rotate(180deg);
}

.cat-child-container {
  display: none;
  padding: 8px 12px 12px 28px;
  background: #f8fafc;
  border-top: 1px solid var(--border-light);
}

.cat-parent-card.expanded .cat-child-container {
  display: block;
}

.cat-child-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-child-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 0.88rem;
}

.cat-child-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  font-weight: 600;
}

.cat-child-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  flex-shrink: 0;
  margin-right: 8px;
}

.btn-del-cat {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-del-cat:hover {
  color: var(--danger);
  background: #fee2e2;
}

.btn-add-child-inline {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-add-child-inline:hover {
  background: #d0f0fd;
}

/* Emoji Picker Grid khi thêm Danh mục */
.emoji-picker-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding: 8px;
  background: #f8fafc;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.emoji-select-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.emoji-select-btn:hover {
  background: var(--primary-light);
  transform: scale(1.1);
}

.emoji-select-btn.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* =========================================================================
 * 9. MODALS & SHEETS (LIGHT THEME CAO CẤP)
 * ========================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 900;
}

.modal-card.apple-sheet {
  width: 100%;
  max-width: 412px;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

.sheet-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}

.close-btn {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.close-btn:hover {
  background: #e2e8f0;
  color: var(--text-main);
}

.sheet-body {
  padding: 16px 18px 24px 18px;
  overflow-y: auto;
  overflow-y: overlay;
}

/* =========================================================================
 * 10. NÚT NỔI FAB (+) & THANH ĐIỀU HƯỚNG DƯỚI CÙNG
 * ========================================================================= */
.fab-cyan-btn {
  position: absolute;
  right: 18px;
  bottom: 74px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 168, 236, 0.45);
  z-index: 40;
  transition: all 0.2s;
}

.fab-cyan-btn:hover {
  transform: scale(1.08);
  background: var(--primary-dark);
}

.fab-cyan-btn:active {
  transform: scale(0.95);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #757575;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
  flex: 1;
  text-decoration: none;
}

.bottom-nav-item i {
  font-size: 1.25rem;
}

.bottom-nav-item.active {
  color: var(--primary);
  font-weight: 800;
}

.bottom-nav-center-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  box-shadow: 0 4px 14px rgba(0, 168, 236, 0.45);
  margin-top: -18px;
  border: 3px solid #ffffff;
  cursor: pointer;
  transition: transform 0.2s;
}

.bottom-nav-center-btn:hover {
  transform: scale(1.08);
}

.bottom-nav-center-btn:active {
  transform: scale(0.95);
}

/* Toast popup */
.toast-popup {
    position: fixed !important;
    bottom: 84px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 32px) !important;
    width: max-content !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    /* Ẩn mặc định bằng opacity — KHÔNG dùng display:none để tránh xung đột */
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }
/* Chỉ hiện và chạy animation khi JS thêm class .show */
.toast-popup.show {
    opacity: 1 !important;
    visibility: visible !important;
    animation: fadeInOut 2.5s ease forwards !important;
  }
  .toast-popup span,
  .toast-popup #toast-message {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .toast-popup i,
  .toast-popup svg {
    flex-shrink: 0 !important;
  }
  .btn-delete-edit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #e11d48;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .btn-delete-edit-pill:active {
    transform: scale(0.92);
    background: #ffe4e6;
  }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* =========================================================================
 * 11. CÁC LỚP TIỆN ÍCH KHÁC
 * ========================================================================= */
.text-emerald { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-sky { color: var(--primary) !important; }
.text-amber { color: var(--warning) !important; }
.text-muted { color: var(--text-muted) !important; }
.font-bold { font-weight: 700 !important; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.flex-row { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }

/* =========================================================================
 * 12. CHI TIẾT CÁC MODAL & TIỆN ÍCH (LIGHT THEME)
 * ========================================================================= */

/* Action Sheet khi chạm vào giao dịch */
.direct-settle-info-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: center;
}
.direct-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}
.direct-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.direct-amt-val {
  font-size: 1.45rem;
  font-weight: 900;
  margin-top: 6px;
}

.action-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-act-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.sheet-act-btn:hover {
  background: #f1f5f9;
}
.btn-act-settle {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-act-del {
  color: var(--danger);
  border-color: #fecaca;
  background: #fef2f2;
}
.btn-act-cancel {
  text-align: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Modal Chi tiết Sổ Nợ (2 Tab Pending & Đã Gạch) */
.debt-detail-summary-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.detail-stat-box {
  text-align: center;
}
.detail-stat-label {
  font-size: 0.8rem;
  color: #92400e;
  font-weight: 600;
}
.detail-balance-val {
  font-size: 1.5rem;
  font-weight: 900;
  margin-top: 2px;
}
.detail-sub-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #fde68a;
  font-size: 0.82rem;
  color: #78350f;
}
.two-tabs-switcher {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-md);
  gap: 6px;
  margin-bottom: 12px;
}
.two-tab-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.two-tab-btn.active {
  background: #ffffff;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}
.dot-amber { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); display: inline-block; }
.dot-emerald { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }
.dot-sky { width: 8px; height: 8px; border-radius: 50%; background: #0284c7; display: inline-block; }

.three-tabs-switcher .two-tab-btn {
  padding: 8px 4px;
  font-size: 0.76rem;
  gap: 4px;
  white-space: nowrap;
}

.debt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}
.debt-status-pill.settled {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.debt-status-pill.partial {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.debt-status-pill.pending {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.debt-item-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.debt-item-2btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.btn-settle-full {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--success);
  border: none;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 176, 80, 0.3);
}
.btn-settle-part {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Modal Voice Input */
.voice-mic-wave-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  gap: 12px;
}
.voice-big-mic-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 4px 20px var(--primary-glow);
  cursor: pointer;
  transition: transform 0.2s;
}
.voice-big-mic-circle:hover {
  transform: scale(1.08);
}
.voice-sample-chips-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.voice-sample-chip {
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.voice-sample-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

/* Modal Kịch Bản Gợi Ý */
.scenario-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.scenario-btn:hover {
  border-color: var(--primary);
  background: #f8fafc;
}
.scenario-title {
  font-size: 0.92rem;
  font-weight: 800;
}
.scenario-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Thống Kê & Bộ Lọc Thẻ Phải */
.segmented-control {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-md);
  gap: 6px;
}
.seg-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.seg-btn.active {
  background: #ffffff;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.filter-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.filter-controls-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: flex-end;
}
.filter-controls-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: flex-end;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.filter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-select {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 0.82rem;
  outline: none;
}

.month-summary-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.month-summary-card-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px 14px;
}
.month-summary-card-2col .month-stat-col:first-child {
  border-right: 1px solid var(--border);
  padding-right: 10px;
}
.month-summary-card-2col .month-stat-col:last-child {
  padding-left: 10px;
}
.month-summary-card-2col .month-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.month-stat-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.month-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.month-stat-val {
  font-size: 0.95rem;
  font-weight: 800;
}

.debt-person-row {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.debt-person-row:hover {
  background: #f8fafc;
  border-color: var(--warning);
}

/* Các nút bấm thao tác Modal */
.btn-action-emerald {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--success);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 176, 80, 0.3);
}
.btn-action-amber {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--warning);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.btn-action-sky {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid var(--primary);
  cursor: pointer;
}
.btn-action-cancel {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #f1f5f9;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.btn-primary-emerald {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--success);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 176, 80, 0.3);
}
.btn-secondary-outline {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.btn-pill-sky {
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.settle-choice-card {
  padding: 12px;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settle-choice-card.choice-full {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.settle-choice-card.choice-part {
  background: #fffbeb;
  border-color: #fde68a;
}
.settle-confirm-info-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

/* =========================================================================
 * 13. PHOSPHOR ICONS INTEGRATION (OFFICIAL PHOSPHORICONS.COM)
 * ========================================================================= */
.ph {
  vertical-align: -0.125em;
  font-size: 1.25rem;
  line-height: 1;
}

.cat-pastel-badge .ph {
  font-size: 1.4rem;
  line-height: 1;
}

.cat-icon-badge .ph {
  font-size: 1.25rem;
  line-height: 1;
}

.cat-child-icon .ph {
  font-size: 1.15rem;
  line-height: 1;
}

.entry-child-chip .chip-icon-box {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.entry-child-chip .ph {
  font-size: 1.1rem;
  line-height: 1;
}

/* Phosphor Icon Picker Grid (Thêm hạng mục) */
.phosphor-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  background: #f8fafc;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.icon-select-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #ffffff;
  color: #334155;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.icon-select-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  transform: scale(1.08);
}

/* =========================================================================
 * 14. CUSTOM CATEGORY DROPDOWN WITH PHOSPHOR ICONS & PASTEL BADGES
 * ========================================================================= */
.custom-category-trigger {
  height: 42px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.custom-category-trigger:hover,
.custom-category-trigger:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.category-trigger-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cat-pill-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
}

#wrapper-entry-category, .relative {
  position: relative !important;
}

.custom-category-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 215px;
  min-width: 195px;
  max-width: 235px;
  max-height: 280px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.22), 0 8px 12px -6px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
  animation: fadeInDown 0.18s ease-out;
}

.cat-dd-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.cat-dd-search-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 0.78rem;
  color: var(--text-main);
  outline: none;
  padding: 2px 0;
}

.cat-dd-search-input::placeholder {
  color: var(--text-muted);
}

.category-dropdown-scroll {
  max-height: 240px;
  overflow-y: auto;
  overflow-y: overlay;
  padding: 4px;
}

.cat-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.cat-dd-item:hover {
  background: #f1f5f9;
}

.cat-dd-item.selected {
  background: #e0f2fe;
}

.cat-dd-item.is-child {
  padding-left: 20px;
  background: #fbfcfe;
}

.cat-dd-item.is-child:hover {
  background: #f1f5f9;
}

.cat-dd-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cat-dd-badge {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.cat-dd-badge.small {
  width: 22px;
  height: 22px;
  min-width: 22px;
  font-size: 0.82rem;
}

.cat-dd-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-dd-count,
.all-tx-header-count,
.recent-all-tx-badge {
  display: none !important;
}

/* =========================================================================
 * 15. INTEGRATED NUMERIC KEYPAD (BÀN PHÍM SỐ TÍCH HỢP 4x4)
 * ========================================================================= */
.entry-keypad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
}

.keypad-btn {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-main);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.12s ease;
  touch-action: manipulation;
}

.keypad-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.keypad-btn:active {
  transform: scale(0.96);
  background: #e2e8f0;
}

.keypad-btn.keypad-fn {
  background: #f1f5f9;
  color: #475569;
  font-size: 1.05rem;
}

.keypad-btn.keypad-op,
#btn-keypad-clear,
#btn-keypad-delete {
  background: #fff7ed;
  border-color: #fed7aa;
}

.keypad-btn.keypad-op:hover,
#btn-keypad-clear:hover,
#btn-keypad-delete:hover {
  background: #ffedd5;
}

.keypad-btn.keypad-op:active,
#btn-keypad-clear:active,
#btn-keypad-delete:active {
  background: #fed7aa;
}

.keypad-btn.keypad-op {
  color: #ea580c;
  font-size: 1.25rem;
}

#btn-keypad-clear {
  color: #ea580c;
  font-weight: 700;
  font-size: 1.15rem;
}

#btn-keypad-delete {
  color: #ef4444;
  font-size: 1.15rem;
}

.keypad-btn.keypad-ok {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 168, 236, 0.35);
}

.keypad-btn.keypad-ok:hover,
.keypad-btn.keypad-ok:active {
  background: var(--primary-dark);
  color: #ffffff;
  transform: scale(0.96);
}

.keypad-btn.keypad-triple-zero {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.keypad-toggle-bar {
  width: 100%;
  height: 34px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s;
}

.keypad-toggle-bar:hover {
  background: var(--primary-light);
}

/* =========================================================================
 * 16. FULL-WIDTH SAVE BUTTON & NOTE WITH VOICE
 * ========================================================================= */
.entry-save-container {
  width: 100%;
  box-sizing: border-box;
}

.btn-primary-large.w-full {
  width: 100% !important;
  height: 46px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.28);
}

.note-input-container {
  position: relative;
  width: 100%;
}

.note-input-container input {
  padding-right: 36px !important;
}

.btn-input-voice {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #0284c7;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-input-voice:hover {
  background: rgba(2, 132, 199, 0.1);
  color: #0369a1;
}

.btn-input-voice.recording {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-ring 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse-ring {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.12);
    opacity: 0.8;
  }
}

/* =========================================================================
 * 17. SETTING TOGGLE SWITCH (BẬT / TẮT MÃ PIN)
 * ========================================================================= */
.switch-toggle-label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  margin: 0;
}

.switch-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #475569;
  transition: 0.25s;
  border-radius: 24px;
}

.switch-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
}

.switch-toggle-label input:checked + .switch-toggle-slider {
  background-color: #10b981;
}

.switch-toggle-label input:checked + .switch-toggle-slider:before {
  transform: translateX(20px);
}

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

/* =========================================================================
 * CÁC LỚP CSS MỚI: XEM TOÀN BỘ GIAO DỊCH & TÌM KIẾM INLINE TIÊU ĐỀ VÍ
 * ========================================================================= */

/* 1. Nút Xem Toàn Bộ Giao Dịch Gần Đây (Thay thế Tổng tiền tài sản) */
.recent-all-tx-hero-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 10px 14px;
  min-height: 52px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.recent-all-tx-hero-btn:hover {
  background: #f1f5f9;
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}

.recent-all-tx-hero-btn:active {
  transform: scale(0.98);
}

.recent-all-tx-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recent-all-tx-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.recent-all-tx-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.recent-all-tx-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-all-tx-right i {
  font-size: 1rem;
  color: #94a3b8;
}

.recent-all-tx-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(2, 132, 199, 0.1);
  padding: 3px 8px;
  border-radius: 20px;
}

/* 2. Tìm kiếm tích hợp thẳng vào thanh tiêu đề ví xanh */
.acc-header-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 20px;
  padding: 3px 10px;
  margin: 0 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  animation: fadeInDown 0.15s ease-out;
}

.acc-header-search-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #1e293b;
  font-size: 0.82rem;
  padding: 3px 6px;
  min-width: 0;
}

.acc-header-search-icon {
  color: #64748b;
  font-size: 0.85rem;
}

.acc-header-search-clear {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.acc-header-search-clear:hover {
  color: #ef4444;
}

/* 3. Thanh chọn kỳ thời gian của View Toàn Bộ Giao Dịch (3 Tab: Tháng - Năm - Toàn bộ) */
.all-tx-period-bar-3cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background: #eef2f6;
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.all-tx-period-btn {
  border: none;
  background: transparent;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  text-align: center;
  white-space: nowrap;
}

.all-tx-period-btn.active {
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

.all-tx-overlay-select {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 10;
  -webkit-appearance: none;
  background: transparent;
  border: none;
}

/* Dòng bộ lọc thời gian: Droplist đơn giản [10/2026] đến [10/2026] */
.all-tx-range-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.all-tx-simple-droplist-box {
  flex: 1;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.all-tx-simple-droplist-box:active {
  background: #f8fafc;
}

.all-tx-simple-droplist-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.all-tx-simple-droplist-caret {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.all-tx-range-to-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  text-transform: uppercase;
}

.all-tx-custom-date-box {
  display: flex;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.all-tx-header-count {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 20px;
}

/* =========================================================================
 * 17. COMPACT MODE FOR CARD-CENTER (TỐI ƯU OPPO FIND X9 & KHÔNG SCROLL)
 * ========================================================================= */
#card-center .form-input,
#card-center .form-select,
#card-center .custom-category-trigger {
  height: 42px;
  padding: 6px 12px;
  font-size: 0.88rem;
  border-radius: 12px;
}

#card-center .form-group-compact .form-label {
  display: none !important;
}

#card-center .form-2col-compact {
  gap: 10px;
}

#card-center #fields-income-expense,
#card-center #fields-transfer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* SỬA LỖI LỆCH DÒNG SỐ TIỀN & ĐƠN VỊ đ */
#card-center .amount-hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 14px;
  margin-bottom: 8px;
  border-radius: 16px;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  overflow: hidden;
}

#card-center .calc-expression-preview {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}

#card-center .calc-expression-preview:empty {
  display: none !important;
}

#card-center .calc-vertical-box {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

#card-center .calc-vertical-op {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ea580c;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#card-center .calc-vertical-nums {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

#card-center .calc-num-line {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#card-center .calc-num-line.calc-num-placeholder {
  color: #94a3b8;
  font-style: italic;
}

#card-center .amount-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#card-center .amount-big-field {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-main);
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  width: auto;
  max-width: 240px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

#card-center .amount-unit-lower {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: lowercase;
  line-height: 1;
  pointer-events: none;
}

#card-center .calc-expression-preview:empty {
  display: none !important;
}

#card-center .note-input-container {
  margin-top: 2px;
}

#card-center #entry-note-input {
  height: 42px;
  border-radius: 12px;
  font-size: 0.88rem;
  padding-left: 12px;
  padding-right: 40px;
}

#card-center .keypad-btn {
  height: 46px;
  font-size: 1.25rem;
  border-radius: 12px;
}

#card-center .keypad-btn.keypad-ok {
  height: 100%;
  min-height: 98px;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 12px;
}

#card-center .entry-keypad-grid {
  gap: 6px;
  margin-top: auto;
  margin-bottom: 2px;
}

#card-center .btn-primary-large.w-full {
  height: 42px;
  font-size: 0.95rem;
  border-radius: 12px;
}

#card-center .entry-3tabs-switcher {
  padding: 4px;
  border-radius: 9999px;
  gap: 5px;
  margin-bottom: 8px;
}

#card-center .entry-3tab-btn {
  padding: 7px 12px;
  font-size: 0.85rem;
  border-radius: 9999px;
}

/* QUICK PILLS ROW (4 VÍ & 4 HẠNG MỤC GỌN 1 HÀNG BẰNG NHAU) */
.quick-pills-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  padding: 2px 0;
  box-sizing: border-box;
}

.quick-pill-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6.5px 4px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.quick-pill-item i {
  font-size: 12px;
  flex-shrink: 0;
}

.quick-pill-logo-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quick-pill-logo-svg svg {
  width: 100%;
  height: 100%;
}

.quick-pill-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100% !important;
  text-align: center;
  line-height: 1;
}

.quick-pill-item:hover {
  filter: brightness(0.96);
}

/* Khi chọn pill: Tab Chi thì nền Đỏ giống tab Chi, Tab Thu thì nền Xanh lá giống tab Thu */
.quick-pill-item.active-chi {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35) !important;
}
.quick-pill-item.active-chi i,
.quick-pill-item.active-chi span {
  color: #ffffff !important;
}

.quick-pill-item.active-thu {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
}
.quick-pill-item.active-thu i,
.quick-pill-item.active-thu span {
  color: #ffffff !important;
}

.quick-pill-item.active-transfer {
  background: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}
.quick-pill-item.active-transfer i,
.quick-pill-item.active-transfer span {
  color: #ffffff !important;
}

.quick-pill-item.active-chi .vcb-path-front,
.quick-pill-item.active-thu .vcb-path-front,
.quick-pill-item.active-transfer .vcb-path-front {
  fill: #ffffff !important;
}

.quick-pill-item.active-chi .vcb-path-back,
.quick-pill-item.active-thu .vcb-path-back,
.quick-pill-item.active-transfer .vcb-path-back {
  fill: #ffffff !important;
  opacity: 0.65 !important;
}

.quick-pill-item.active-chi .vcb-stroke-outer,
.quick-pill-item.active-thu .vcb-stroke-outer,
.quick-pill-item.active-transfer .vcb-stroke-outer,
.quick-pill-item.active-chi .vcb-stroke-inner,
.quick-pill-item.active-thu .vcb-stroke-inner,
.quick-pill-item.active-transfer .vcb-stroke-inner {
  stroke: #ffffff !important;
}

/* Category swipe containers */
.cat-parent-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #ffffff;
}

.cat-parent-card:not(.expanded) .cat-parent-swipe-wrap {
  border-radius: var(--radius-md);
}

.cat-parent-header.swipe-content-row {
  border: none;
  border-radius: 0;
  padding: 12px 14px;
}

.cat-child-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border);
  margin-bottom: 4px;
}

.cat-child-row.swipe-content-row {
  border: none;
  border-radius: 0;
  padding: 8px 12px;
}

/* =========================================================================
 * 18. CUSTOM WALLET DROPDOWN STYLES (CÓ ĐỦ ICON & SỐ DƯ)
 * ========================================================================= */
.wallet-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.wallet-dropdown-item:hover {
  background: #f1f5f9;
}

.wallet-dropdown-item.active {
  background: #e0f2fe;
}

.wallet-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wallet-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-item-balance {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.wallet-item-balance.positive {
  color: #0284c7;
}

.wallet-item-balance.negative {
  color: #ef4444;
}

/* =========================================================================
 * 19. SỔ VAY NỢ REDESIGN (media_1791203089335.jpg)
 * ========================================================================= */
.debt-stats-summary-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.debt-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 6px;
  text-align: center;
}

.debt-stat-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debt-stat-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.debt-stat-val {
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debt-progress-container {
  width: 100%;
}

.debt-progress-bg {
  width: 100%;
  height: 7px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.debt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Accordion Card */
.debt-accordion-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 8px;
}

.debt-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}

.debt-accordion-header:hover {
  background: #f1f5f9;
}

.debt-people-list-container {
  display: flex;
  flex-direction: column;
}

.debt-person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}

.debt-person-row:last-child {
  border-bottom: none;
}

.debt-person-row:hover {
  background: #f8fafc;
}

.debt-person-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.debt-avatar-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.debt-person-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debt-person-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.debt-person-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.debt-person-amount {
  font-size: 0.88rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.debt-person-amount.owing {
  color: #ef4444;
}

.debt-person-amount.settled {
  color: #10b981;
}

.btn-debt-more {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 4px;
  font-size: 1rem;
  cursor: pointer;
}

/* Detail View in Sổ Nợ */
.debt-item-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.debt-item-card:hover {
  border-color: #cbd5e1;
}

.btn-quick-settle {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-quick-settle:hover {
  background: #ffedd5;
}

/* =========================================================================
 * 19. LAYOUT & ARCHITECTURE ENHANCEMENTS (V9 ARCHITECTURE)
 * ========================================================================= */

/* Tab Nhập Liệu - Bám sát thanh 3 tab đáy, không scroll */
#card-center {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main-scroll-view:has(#card-center:not(.hidden)) {
  overflow-y: hidden !important;
  padding-top: 6px;
  padding-bottom: 56px;
}

#card-center .entry-keypad-grid {
  margin-top: auto;
  margin-bottom: 2px;
}

/* Tab Tài Khoản - Nút Xem toàn bộ giao dịch là 1 zone riêng nằm sát bên dưới zone Danh sách tài khoản */
#card-left {
  display: flex;
  flex-direction: column;
}

#view-wallets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 72px;
}

#view-wallets-list .recent-all-tx-hero-btn {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  width: 100%;
  max-width: 100%;
}

/* Tab Khác - Danh sách hạng mục cha-con trải dài toàn màn hình */
#right-view-category {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 72px);
}

#right-view-category .cat-tree-list {
  flex: 1;
  max-height: none !important;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* 4 Hạng mục hệ thống cố định (Cho vay, Trả nợ, Đi vay, Thu nợ) */
.cat-locked-section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px 0;
  padding: 0 4px;
}

.cat-locked-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4), transparent);
}

.cat-locked-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
}

.cat-locked-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 1px 6px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}

/* Unified Search View Styling */
.unified-search-header-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 4px 8px;
  gap: 6px;
}

.unified-search-header-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.82rem;
  width: 100%;
}

.unified-search-header-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.unified-search-clear-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

/* =========================================================================
 * 19. CHỐNG SCROLL NGANG & BÁO CÁO CƠ CẤU CHI TIÊU HỢP LÝ
 * ========================================================================= */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

.main-scroll-view {
  overflow-x: hidden !important;
}

/* Thống Kê Báo Cáo - Cơ Cấu Chi Tiêu (Breakdown Hạng Mục) */
.stats-breakdown-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stats-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stats-breakdown-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.stats-breakdown-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-breakdown-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.stats-breakdown-amt {
  font-size: 12px;
  font-weight: 700;
  color: #ea580c;
}

.stats-breakdown-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 38px;
  text-align: right;
}

.stats-progress-bg {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.stats-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* =========================================================================
 * 15. NÂNG CẤP TOÀN BỘ DROPLIST CÓ ICON & MÀU + THỐNG KÊ TAB THU / CHI
 * ========================================================================= */
.custom-droplist-wrap {
  position: relative !important;
  width: 100%;
}

.custom-droplist-trigger {
  height: 38px;
  padding: 5px 6px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.custom-droplist-trigger:hover,
.custom-droplist-trigger:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.droplist-trigger-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.droplist-display-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-droplist-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 190px;
  max-height: 270px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.2), 0 6px 12px -4px rgba(0, 0, 0, 0.12);
  z-index: 10500;
  overflow: hidden;
  animation: fadeInDown 0.15s ease-out;
}

.droplist-menu-scroll {
  max-height: 260px;
  overflow-y: auto;
  overflow-y: overlay;
  padding: 4px;
}

.droplist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.droplist-item:hover {
  background: #f1f5f9;
}

.droplist-item.active {
  background: #e0f2fe;
}

.droplist-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.droplist-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.droplist-item-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.droplist-item-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.droplist-item-check {
  font-size: 0.85rem;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}

.droplist-item.active .droplist-item-check {
  opacity: 1;
}

/* Checkbox Bao gồm nợ vay nằm cùng hàng với Droplist Hạng mục (nửa màn hình) */
.stats-debt-pill-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  width: 100%;
  height: 38px;
  min-height: 38px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stats-debt-pill-trigger:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.stats-debt-pill-trigger.active-checked {
  background: #f0f9ff;
  border-color: #0284c7;
  box-shadow: 0 0 0 1px #0284c7;
}

.stats-debt-pill-text {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-debt-pill-trigger.active-checked .stats-debt-pill-text {
  color: #0284c7;
}

.stats-checkbox-input {
  width: 16px;
  height: 16px;
  accent-color: #0284c7;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

/* =========================================================================
 * DROPLIST HẠNG MỤC CHA - CON ĐA CHỌN (MULTI-SELECT TREE)
 * ========================================================================= */
.stats-cat-multiselect-trigger {
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.stats-cat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0284c7;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.custom-cat-tree-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: calc(200% + 8px);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 50;
  overflow: hidden;
  animation: dropIn 0.15s ease-out;
}

.cat-tree-menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.btn-cat-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn-cat-quick:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.cat-filter-parent-block {
  margin-bottom: 4px;
}

.cat-filter-parent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.cat-filter-parent-row:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.cat-filter-parent-row.is-checked {
  background: #f0f9ff;
  border-color: #bae6fd;
}

.cat-filter-chk-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  padding: 2px;
}

.cat-filter-chk {
  width: 16px;
  height: 16px;
  accent-color: #0284c7;
  cursor: pointer;
  margin: 0;
  border-radius: 4px;
}

.cat-filter-name {
  font-size: 0.8rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-filter-subcount {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  background: #ffffff;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.cat-filter-children-list {
  padding-left: 22px;
  margin-left: 12px;
  margin-top: 3px;
  border-left: 2px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-filter-child-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
  font-size: 0.76rem;
  color: #475569;
}

.cat-filter-child-row:hover {
  background: #f8fafc;
  color: var(--text-main);
}

.cat-filter-child-row.is-checked {
  background: #f0f9ff;
  color: #0284c7;
  font-weight: 600;
}

.cat-filter-child-bullet {
  font-size: 0.75rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-filter-child-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-screen Thống kê Hạng mục: Banner bộ lọc */
.stats-cat-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stats-cat-banner-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stats-cat-filter-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-cat-type-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.stats-cat-type-pill.tag-chi {
  background: #ffe4e6;
  color: #e11d48;
  border: 1px solid #fecdd3;
}
.stats-cat-type-pill.tag-thu {
  background: #dcfce7;
  color: #059669;
  border: 1px solid #a7f3d0;
}

/* 2 Tab Thu / Chi của Thống Kê Báo Cáo */
.stats-main-tabs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stats-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.stats-tab-btn.active-chi {
  border-color: #ea580c !important;
  background: #fff7ed !important;
}

.stats-tab-btn.active-thu {
  border-color: #10b981;
  background: #ecfdf5;
}

.stats-tab-icon-wrap {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.stats-tab-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stats-tab-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
}

.stats-tab-sum {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chi tiết từng hạng mục thu/chi (Drilldown) */
.cat-detail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}

.btn-cat-back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-cat-back:hover {
  background: #e2e8f0;
}

.cat-detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  margin: 0 8px;
}

.cat-detail-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-detail-total {
  font-size: 0.82rem;
  font-weight: 800;
}

.stats-breakdown-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stats-breakdown-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.stats-breakdown-card:active {
  transform: scale(0.99);
}

/* =========================================================================
 * 18. DATE PICKER COMPONENT (PHƯƠNG ÁN 3 FORM + CUPERTINO WHEELS MODAL)
 * ========================================================================= */
.entry-quick-date-bar {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}

.entry-quick-date-chip {
  flex: 1;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.entry-quick-date-chip:active {
  background: #f1f5f9;
}

.entry-quick-date-chip.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.entry-quick-date-chip-other {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  background: #f8fafc;
  color: var(--primary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.entry-quick-date-chip-other:active {
  background: #e0f2fe;
}

/* Modal layout */
.date-picker-modal-sheet {
  max-width: 412px;
  border-radius: 24px 24px 0 0;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px 18px;
  border-bottom: 1px solid var(--border-light);
  background: #ffffff;
}

.date-picker-nav-btn {
  background: transparent;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
}

.date-picker-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}

.date-picker-modal-body {
  padding: 14px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 1. Quick dates bar inside modal */
.date-picker-quick-dates-box {
  display: flex;
  gap: 8px;
  width: 100%;
}

.date-modal-quick-chip {
  flex: 1;
  padding: 8px 6px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f8fafc;
  color: var(--text-main);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.date-modal-quick-chip:active {
  background: #f1f5f9;
}

.date-modal-quick-chip.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

/* 2. Cupertino 3D Wheels Container */
.cupertino-wheels-container {
  position: relative;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 18px;
  height: 160px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 8px;
  box-sizing: border-box;
}

.cupertino-highlight-band {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 60px;
  height: 40px;
  background: rgba(2, 132, 199, 0.08);
  border-top: 1.5px solid rgba(2, 132, 199, 0.35);
  border-bottom: 1.5px solid rgba(2, 132, 199, 0.35);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.cupertino-vignette-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, #f8fafc 15%, rgba(248, 250, 252, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.cupertino-vignette-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to top, #f8fafc 15%, rgba(248, 250, 252, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.cupertino-wheel-col {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  user-select: none;
  z-index: 3;
}

.cupertino-wheel-col::-webkit-scrollbar {
  display: none;
}

.cupertino-col-date {
  flex: 1.4;
}

.cupertino-col-time {
  flex: 1;
  font-family: monospace;
}

.cupertino-col-divider {
  width: 1px;
  height: 80px;
  background: var(--border);
  z-index: 3;
}

.cupertino-wheel-spacer {
  height: 60px; /* (160 - 40) / 2 */
  flex-shrink: 0;
}

.cupertino-wheel-item {
  height: 40px;
  line-height: 40px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  scroll-snap-align: center;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.cupertino-wheel-item.selected {
  color: var(--primary);
  font-weight: 800;
  font-size: 0.95rem;
}

.cupertino-col-time .cupertino-wheel-item.selected {
  font-size: 1.15rem;
}

/* 3. Quick Time Section */
.date-picker-quick-time-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-picker-time-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-picker-time-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-picker-stepper-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 4px;
}

.stepper-step-btn {
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s;
}

.stepper-step-btn:active {
  background: #e2e8f0;
}

.stepper-time-value {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  font-family: monospace;
  padding: 0 6px;
}

.date-picker-quick-hours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.date-quick-hour-chip {
  padding: 6px 2px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.date-quick-hour-chip:active {
  background: #f1f5f9;
}

.date-quick-hour-chip.active-current {
  background: #e0f2fe;
  color: var(--primary);
  border-color: #bae6fd;
  font-weight: 700;
}

/* 4. Bottom Apply Button */
.date-picker-apply-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.date-picker-apply-btn:active {
  opacity: 0.9;
}

/* =========================================================================
 * BỐ CỤC MỚI 4 HÀNG NHẬP LIỆU (THU - CHI & CHUYỂN KHOẢN)
 * 3 pill xếp theo hàng ngang trong 1 hàng, chiều cao cân đối 38px
 * ========================================================================= */
.entry-field-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-height: 38px;
  height: 38px;
  width: 100%;
  box-sizing: border-box;
}

.entry-field-left {
  flex: 1 1 0;
  width: calc(50% - 3px);
  min-width: 0;
  display: flex;
  position: relative;
}

.entry-field-left .custom-category-trigger {
  width: 100%;
  height: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 12px;
  box-sizing: border-box;
}

.entry-field-right {
  flex: 1 1 0;
  width: calc(50% - 3px);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  height: 100%;
  min-height: 38px;
  box-sizing: border-box;
}

.entry-field-right .quick-pill-item,
.entry-field-right .entry-quick-date-chip,
.entry-field-right .entry-quick-date-chip-other {
  width: 100%;
  height: 100%;
  min-height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 2px !important;
  border-radius: 10px;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  box-sizing: border-box;
  white-space: normal !important;
  line-height: 1.15 !important;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #ffffff;
  transition: all 0.15s ease;
  user-select: none;
  text-align: center !important;
}

.entry-field-right .quick-pill-item i,
.entry-field-right .quick-pill-item svg,
.entry-field-right .quick-pill-item .quick-pill-logo-svg,
.entry-field-right .entry-quick-date-chip i,
.entry-field-right .entry-quick-date-chip svg {
  display: none !important;
}

.entry-field-right .entry-quick-date-chip.active,
.entry-field-right .quick-pill-item.active-chi,
.entry-field-right .entry-quick-date-chip.active.active-chi {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35) !important;
}

.entry-field-right .quick-pill-item.active-thu,
.entry-field-right .entry-quick-date-chip.active.active-thu {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

.entry-field-right .quick-pill-item.active-transfer,
.entry-field-right .entry-quick-date-chip.active.active-transfer,
#fields-transfer .entry-quick-date-chip.active {
  background: #eab308 !important;
  color: #ffffff !important;
  border-color: #eab308 !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.35) !important;
}

.entry-field-right .entry-quick-date-chip-other {
  color: #475569;
  border-color: #cbd5e1;
  background: #f8fafc;
}

.entry-field-right .entry-quick-date-chip-other:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.entry-field-right .quick-pill-item span,
.entry-field-right .entry-quick-date-chip span,
.entry-field-right .entry-quick-date-chip-other span {
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Micro ô ghi chú - Animation thu âm đọc gì ghi nấy */
.btn-input-voice.recording {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  animation: pulse-voice 1.2s infinite;
}

@keyframes pulse-voice {
  0% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { transform: translateY(-50%) scale(1.12); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* =========================================================================
 * BỘ LỌC THỜI GIAN TOÀN BỘ GIAO DỊCH: CUSTOM DROPLIST (THAY THẾ SELECT NATIVE)
 * ========================================================================= */
.all-tx-droplist-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.all-tx-simple-droplist-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.all-tx-simple-droplist-box:hover {
  background: #f8fafc;
  border-color: #38bdf8;
}

.all-tx-simple-droplist-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-tx-simple-droplist-caret {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 4px;
}

.all-tx-droplist-wrapper .custom-droplist-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 130px;
  max-height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 999;
  padding: 4px;
  box-sizing: border-box;
}

.all-tx-droplist-wrapper .droplist-item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.12s ease;
}

.all-tx-droplist-wrapper .droplist-item:hover {
  background: #f1f5f9;
  color: var(--primary);
}

.all-tx-droplist-wrapper .droplist-item.active {
  background: rgba(2, 132, 199, 0.1);
  color: var(--primary);
  font-weight: 700;
}

/* =========================================================================
 * SỔ NỢ: THỜI GIAN VÀ SỐ TIỀN GỐC CHỈ NẰM TRONG 1 DÒNG DUY NHẤT
 * ========================================================================= */
.debt-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.69rem !important;
  color: #64748b !important;
  gap: 5px !important;
  margin-top: 3px !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
}

.debt-meta-row span,
.debt-meta-row .tx-meta-time,
.debt-meta-row .tx-meta-orig {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: -0.01em !important;
}

.debt-meta-row .tx-meta-acc {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important;
  display: inline-block !important;
}

.debt-meta-row .meta-dot {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}


/* =========================================================================
 * QR SCANNER, VIETQR AUTOPROCESS & LONG-PRESS OK BUTTON STYLES
 * ========================================================================= */

/* 1. OK Button Long-Press, Progress & Bank Mode */
#btn-keypad-ok {
  position: relative;
  overflow: hidden;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 2px !important;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  background: #ea580c;
  border-color: #ea580c;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(234, 88, 12, 0.35);
}

#btn-keypad-ok * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

#btn-keypad-ok.key-ok-pressing {
  transform: scale(0.96) !important;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.5), 0 4px 16px rgba(234, 88, 12, 0.5) !important;
}

.keypad-ok-label-main {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.keypad-ok-divider {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 4px 0 3px;
}

.keypad-ok-sub {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.01em;
}

.keypad-ok-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #38bdf8;
  width: 0%;
  border-radius: 2px;
  box-shadow: 0 0 8px #38bdf8;
  transition: width 0.05s linear;
  pointer-events: none;
}

#btn-keypad-ok.bank-mode {
  background: linear-gradient(135deg, #008744 0%, #005f30 100%) !important;
  border-color: #008744 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 135, 68, 0.45) !important;
}

#btn-keypad-ok.bank-mode .keypad-ok-divider {
  background: rgba(255, 255, 255, 0.35);
}

#btn-keypad-ok.bank-mode .keypad-ok-sub {
  color: #a7f3d0;
}

/* 2. Beneficiary QR Card - NẰM CHỒNG LÊN THANH TAB THU-CHI-CK (KHÔNG ĐẨY BÀN PHÍM) */
.entry-top-bar-slot {
  position: relative;
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin-bottom: 8px;
}

.beneficiary-qr-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #86efac;
  border-radius: var(--radius-pill);
  padding: 0 8px 0 10px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.15);
  box-sizing: border-box;
  animation: fadeIn 0.2s ease-out;
}

.beneficiary-qr-card.hidden {
  display: none !important;
}

.beneficiary-qr-content {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.beneficiary-qr-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.beneficiary-name {
  font-size: 10.5px;
  font-weight: 800;
  color: #065f46;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.beneficiary-separator {
  font-size: 9px;
  color: #94a3b8;
  flex-shrink: 0;
}

.beneficiary-stk {
  font-size: 10px;
  font-weight: 700;
  color: #047857;
  white-space: nowrap;
}

.beneficiary-bank {
  font-size: 9.5px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  text-transform: uppercase;
}

.btn-remove-beneficiary {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.btn-remove-beneficiary:active {
  background: #ef4444;
  color: #ffffff;
  transform: scale(0.9);
}

.wallet-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.wallet-modal-item:hover,
.wallet-modal-item:active {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.wallet-modal-item.selected {
  background: #f0fdf4;
  border-color: #86efac;
}

.wallet-modal-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wallet-modal-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.wallet-modal-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.wallet-modal-balance {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.category-modal-parent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.category-modal-parent-item:hover {
  background: #f1f5f9;
}
.category-modal-parent-item.selected {
  background: #eff6ff;
  border-color: #93c5fd;
}

.category-modal-child-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 24px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.category-modal-child-item:hover {
  background: #f8fafc;
}
.category-modal-child-item.selected {
  background: #eff6ff;
  border-color: #bfdbfe;
}


/* =========================================================================
 * BẢNG 2 CỘT CHỌN HẠNG MỤC (TIẾT KIỆM DIỆN TÍCH)
 * ========================================================================= */
.category-modal-2col-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 380px;
  max-height: 52vh;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
@media (max-width: 380px) {
  .category-modal-2col-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.category-modal-col-left {
  background: #f8fafc;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.category-modal-col-right {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.category-col-header {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 5px;
  background: inherit;
  flex-shrink: 0;
}

.category-col-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-col-freq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cat-col-freq-item:hover, .cat-col-freq-item:active {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.cat-col-freq-item.selected {
  background: #ecfdf5;
  border-color: #10b981;
}

.cat-col-parent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.03);
  font-weight: 700;
  font-size: 12.5px;
  color: #1e293b;
  transition: all 0.15s ease;
}
.cat-col-parent-item:hover, .cat-col-parent-item:active {
  background: #f1f5f9;
}
.cat-col-parent-item.selected {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
}

.cat-col-child-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s ease;
}
.cat-col-child-item:hover, .cat-col-child-item:active {
  background: #f8fafc;
  color: #0f172a;
}
.cat-col-child-item.selected {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 700;
}

.cat-item-badge {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.cat-child-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.cat-item-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}
.cat-child-name {
  font-size: 11.5px;
  font-weight: 500;
  color: #475569;
}

/* Đồng bộ Icon Ví Popup 100% giống Tab Danh sách tài khoản */
.wallet-modal-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.wallet-modal-icon-badge svg.vcb-svg-icon {
  width: 22px;
  height: 22px;
  display: block;
}


/* =========================================================================
 * BẢO ĐẢM NÚT VUỐT ẨN HOÀN TOÀN KHI Ở TRẠNG THÁI TĨNH (TRIỆT TIÊU ĐƯỜNG ĐỎ RỈ VIỀN)
 * ========================================================================= */
.swipe-action-bg-left,
.swipe-action-bg-right {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

.swipe-item-container.is-swiped-left .swipe-action-bg-right,
.swipe-item-container.is-swiped-right .swipe-action-bg-left,
.swipe-item-container.is-dragging .swipe-action-bg-left,
.swipe-item-container.is-dragging .swipe-action-bg-right,
.swipe-item-container:has(.swiped-left) .swipe-action-bg-right,
.swipe-item-container:has(.swiped-right) .swipe-action-bg-left,
.cat-parent-swipe-wrap.is-swiped-left .swipe-action-bg-right,
.cat-parent-swipe-wrap.is-swiped-right .swipe-action-bg-left,
.cat-parent-swipe-wrap.is-dragging .swipe-action-bg-left,
.cat-parent-swipe-wrap.is-dragging .swipe-action-bg-right,
.cat-parent-swipe-wrap:has(.swiped-left) .swipe-action-bg-right,
.cat-parent-swipe-wrap:has(.swiped-right) .swipe-action-bg-left {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Animation popup từ dưới lên khi bấm vào khoản tiền để chỉnh sửa */
@keyframes slideUpFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0.85;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#card-center.popup-from-bottom {
  animation: slideUpFromBottom 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}


/* =========================================================================
 * HÀNG 4: GHI CHÚ (50%) + ĐỐI TƯỢNG (50% - BẰNG 3 PILL PHÍA TRÊN)
 * ========================================================================= */
.entry-field-50 {
  flex: 1 1 0;
  width: calc(50% - 3px);
  min-width: 0;
  display: flex;
  position: relative;
  height: 38px;
  box-sizing: border-box;
}

#entry-row-note-person {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-height: 38px;
  height: 38px;
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}

#entry-row-note-person .note-input-container {
  height: 38px;
  min-height: 38px;
  width: 100%;
  margin-top: 0;
  position: relative;
}

#entry-row-note-person #entry-note-input {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 30px 0 10px !important;
  font-size: 0.82rem;
  border-radius: 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
  outline: none;
}

#entry-row-note-person #entry-note-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

#entry-row-note-person .btn-input-voice {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #0284c7;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

#entry-row-note-person .btn-input-voice:hover {
  background: rgba(2, 132, 199, 0.1);
  color: #0369a1;
}

#entry-row-note-person .custom-category-trigger {
  width: 100%;
  height: 38px !important;
  min-height: 38px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#entry-row-note-person .custom-category-trigger:hover {
  border-color: var(--primary);
}

.person-required-alert {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4) !important;
  animation: person-shake 0.35s ease-in-out;
}

@keyframes person-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.btn-add-person-entry {
  padding: 3px 8px;
  border-radius: 6px;
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-add-person-entry:hover {
  background: #0369a1;
}

.person-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.person-dropdown-item:hover {
  background: rgba(2, 132, 199, 0.08);
  color: var(--primary);
}

.person-dropdown-item.is-clear {
  color: #ef4444;
  font-size: 0.8rem;
  border-bottom: 1px dashed var(--border-subtle);
  margin-bottom: 4px;
}

.person-dropdown-item.is-add-new {
  color: #0284c7;
  font-weight: 700;
  background: rgba(2, 132, 199, 0.06);
  border: 1px dashed rgba(2, 132, 199, 0.35);
  margin-bottom: 6px;
}


/* =========================================================================
 * MODAL CHỌN ĐỐI TƯỢNG VAY - NỢ (POPUP BOTTOM SHEET)
 * ========================================================================= */
.person-picker-modal-sheet {
  max-height: 82vh;
}

.person-debt-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  box-sizing: border-box;
  min-height: 44px;
  width: 100%;
}

.person-debt-chip:hover,
.person-debt-chip:active {
  border-color: var(--primary);
  background: rgba(2, 132, 199, 0.04);
}

.person-debt-chip.is-selected {
  border-color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  box-shadow: 0 0 0 1px #0284c7;
}

.person-chip-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.person-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.person-chip-avatar.active-debt-avatar {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

.person-chip-name {
  font-size: 0.82rem;
  color: var(--text-main);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-chip-debt {
  font-size: 0.7rem;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 700;
  flex-shrink: 0;
}

.person-add-dashed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px dashed rgba(2, 132, 199, 0.45);
  background: rgba(2, 132, 199, 0.04);
  color: #0284c7;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.person-add-dashed-btn:hover {
  background: rgba(2, 132, 199, 0.09);
  border-color: #0284c7;
}


/* =========================================================================
 * PERSON BOTTOM SHEET & DUPLICATE DIALOG ENHANCEMENTS
 * ========================================================================= */
.person-picker-modal-sheet {
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}

.person-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: #f8fafc;
  box-sizing: border-box;
  width: 100%;
}

.person-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.person-search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.person-search-input-wrap input {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0 10px 0 34px;
  font-size: 0.85rem;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}

.person-search-input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.btn-person-add-submit {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-person-add-submit:hover {
  opacity: 0.9;
}

.person-modal-body {
  padding: 12px 14px 24px 14px;
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.person-clear-wrap {
  margin-bottom: 2px;
}

.btn-person-clear {
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed #fca5a5;
  background: #fff5f5;
  color: #ef4444;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.person-group-section {
  display: flex;
  flex-direction: column;
}

.person-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.person-badge-count {
  font-size: 10px;
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}

.person-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.person-empty-state {
  padding: 30px 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* DUPLICATE DIALOG */
.duplicate-confirm-box {
  padding: 18px 16px;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  max-width: 412px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  animation: slideUp 0.25s ease-out;
}

.duplicate-confirm-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.duplicate-confirm-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.duplicate-confirm-title-area h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.duplicate-confirm-title-area p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.duplicate-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.btn-dup-merge {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s;
}

.btn-dup-merge:hover {
  opacity: 0.9;
}

.btn-dup-rename {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}

.btn-dup-rename:hover {
  background: #e2e8f0;
}

.btn-dup-cancel {
  width: 100%;
  height: 36px;
  background: transparent;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* =========================================================================
 * GEMINI AI & VOICE INPUT STYLES
 * ========================================================================= */
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }

.gemini-config-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gemini-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gemini-input-group input {
  flex: 1;
  min-width: 0;
  height: 38px;
  font-size: 0.85rem;
}

.gemini-input-group button {
  height: 38px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

.gemini-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  padding-top: 4px;
}

.gemini-test-conn-btn {
  background: none;
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.gemini-test-conn-btn:hover {
  background: rgba(245, 158, 11, 0.15);
}

.voice-test-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.voice-test-input-row input {
  flex: 1;
  min-width: 0;
  height: 36px;
}

.voice-test-input-row button {
  height: 36px;
  flex-shrink: 0;
  padding: 0 14px;
}

/* =========================================================================
 * GIAO DIỆN GHI CHÉP BẰNG GIỌNG NÓI TOÀN MÀN HÌNH (VOICE FULLSCREEN)
 * ========================================================================= */
.voice-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 40%, #0284c7 100%);
  color: #ffffff;
  font-family: inherit;
}

.voice-fullscreen-overlay.hidden {
  display: none !important;
}

.voice-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
}

.voice-header-back-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.15s;
}

.voice-header-back-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.voice-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
  margin: 0 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-header-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.voice-fullscreen-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voice-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 30px 20px;
}

.voice-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 12px;
}

.voice-empty-text {
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 260px;
}

.voice-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.voice-tx-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  color: #1e293b;
  animation: slide-in-card 0.25s ease-out;
}

@keyframes slide-in-card {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voice-card-del-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #334155;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: transform 0.15s;
}

.voice-card-del-btn:hover {
  transform: scale(1.1);
  background: #ef4444;
}

.voice-card-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.voice-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.voice-card-content {
  flex: 1;
  min-width: 0;
}

.voice-card-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.voice-card-cat {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.voice-card-amount {
  font-size: 0.98rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.voice-card-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.voice-card-note {
  font-size: 0.8rem;
  font-style: italic;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.voice-card-wallet-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-card-wallet-badge {
  font-size: 0.72rem;
  color: #0284c7;
  background: #f0f9ff;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #bae6fd;
}

.voice-card-edit-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.voice-card-edit-btn:hover {
  color: #0284c7;
  background: #e0f2fe;
}

.voice-card-row-3 {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}

.voice-fullscreen-footer {
  padding: 14px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
}

.voice-sample-hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.4;
}

.voice-footer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
}

.voice-footer-circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.voice-footer-circle-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.3);
}

.voice-mic-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.voice-main-mic-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  color: #0284c7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  transition: all 0.2s;
}

.voice-main-mic-btn.listening {
  background: #ef4444;
  color: #ffffff;
  animation: pulse-voice 1.3s infinite;
}

@keyframes pulse-voice {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);
  }
}

.voice-mic-label {
  font-size: 0.78rem;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.voice-save-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

/* =========================================================================
 * BẢNG LỊCH THU CHI (CALENDAR VIEW)
 * ========================================================================= */
.cal-month-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.cal-nav-arrow {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-nav-arrow:hover {
  background: #f1f5f9;
  color: #0284c7;
}

.cal-current-month-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  color: #0f172a;
}

.cal-current-month-label:hover {
  background: rgba(2, 132, 199, 0.08);
}

.cal-summary-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cal-sum-col {
  flex: 1;
  text-align: center;
}

.cal-sum-title {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 2px;
}

.cal-sum-val {
  font-size: 0.88rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-sum-divider {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
}

.cal-grid-wrapper {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cal-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-cell {
  min-height: 52px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.15s;
}

.cal-day-cell:hover {
  border-color: #38bdf8;
  background: #f8fafc;
}

.cal-day-cell.selected {
  border: 2px solid #0284c7;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.cal-day-cell.empty {
  border: none;
  background: transparent;
  cursor: default;
}

.cal-day-num {
  font-size: 0.7rem;
  font-weight: 600;
  color: #475569;
}

.cal-day-amt-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
}

.cal-day-amt-thu {
  font-size: 0.65rem;
  font-weight: 700;
  color: #16a34a;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.1;
}

.cal-day-amt-chi {
  font-size: 0.65rem;
  font-weight: 700;
  color: #dc2626;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.1;
}

.cal-day-detail-section {
  margin-top: 10px;
}

.cal-tx-item {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
 * MODAL CHỈNH SỬA GIAO DỊCH VOICE (ĐỒNG BỘ 100% GIAO DIỆN NHẬP LIỆU CHUNG)
 * ========================================================================= */
.voice-edit-modal-card {
  width: 100%;
  max-width: 390px;
  background: #ffffff !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.voice-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.voice-edit-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.voice-edit-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-edit-close-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.voice-edit-body {
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-edit-amount-box {
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.voice-edit-amount-input {
  width: 100%;
  background: transparent;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  text-align: center;
  outline: none;
  line-height: 1.2;
}

.voice-edit-amount-unit {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0284c7;
  margin-left: 4px;
  user-select: none;
}

/* =========================================================================
 * HOÀN THIỆN ĐỒNG BỘ GIAO DIỆN CHỈNH SỬA VOICE VỚI CARD-CENTER
 * ========================================================================= */
#modal-voice-edit-item {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box;
}

#modal-voice-edit-item.hidden {
  display: none !important;
}

.voice-edit-modal-card {
  width: 100%;
  max-width: 390px;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
  box-sizing: border-box;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.voice-edit-modal-card .custom-category-trigger {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.voice-edit-modal-card .custom-category-trigger:hover,
.voice-edit-modal-card .custom-category-trigger:focus-within {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15) !important;
}

.voice-edit-modal-card select {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  cursor: pointer;
}

.voice-edit-modal-card input[type="text"],
.voice-edit-modal-card input[type="date"] {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.voice-edit-modal-card select option {
  background: #ffffff;
  color: #1e293b;
  font-weight: 600;
  padding: 6px;
}

.voice-edit-modal-card .entry-field-right {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  height: 38px !important;
}

.voice-edit-modal-card .entry-field-right .quick-pill-item,
.voice-edit-modal-card .entry-field-right .entry-quick-date-chip {
  width: 100% !important;
  height: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  box-sizing: border-box;
  white-space: normal !important;
  line-height: 1.15 !important;
  cursor: pointer;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  transition: all 0.15s ease;
  user-select: none;
  text-align: center !important;
}

.voice-edit-modal-card .entry-field-right .quick-pill-item:hover,
.voice-edit-modal-card .entry-field-right .entry-quick-date-chip:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.voice-edit-modal-card .entry-field-right .quick-pill-item.active-chi,
.voice-edit-modal-card .entry-field-right .entry-quick-date-chip.active-chi {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35) !important;
}

.voice-edit-modal-card .entry-field-right .quick-pill-item.active-thu,
.voice-edit-modal-card .entry-field-right .entry-quick-date-chip.active-thu {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}


/* WALLET MANAGEMENT FORM MODAL STYLES */
#modal-wallet-form input.wallet-form-input,
.wallet-form-input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
#modal-wallet-form input.wallet-form-input:focus,
.wallet-form-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
.wallet-del-btn {
  width: 100% !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.wallet-del-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}


/* VOICE EDIT MODAL 4-ROW REDESIGN */
.voice-edit-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.voice-edit-wallet-pills-row {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 4px 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.voice-edit-wallet-pills-row::-webkit-scrollbar {
  display: none;
}

.voice-wallet-pill {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.voice-wallet-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.voice-wallet-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.28) !important;
}

.voice-wallet-pill.active i {
  color: #ffffff !important;
}

.voice-wallet-pill.active svg path,
.voice-wallet-pill.active svg polygon,
.voice-wallet-pill.active svg rect {
  fill: #ffffff !important;
}

.voice-edit-note-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 12px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.voice-edit-note-box:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}


/* THỐNG NHẤT 4 PILL TÀI KHOẢN: KÍCH THƯỚC BẰNG NHAU, MÀU SẮC ĐỒNG NHẤT */
#entry-wallet-quick-pills {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
}

#entry-wallet-quick-pills .quick-pill-item {
  width: 100% !important;
  height: 100% !important;
  min-height: 38px !important;
  padding: 2px 1px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 10px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
}

#entry-wallet-quick-pills .quick-pill-item.active,
#entry-wallet-quick-pills .quick-pill-item.active-chi {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35) !important;
}

#entry-wallet-quick-pills .quick-pill-item.active-thu {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

#entry-wallet-quick-pills .quick-pill-item.active-transfer {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

.voice-edit-wallet-pills-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.voice-wallet-pill {
  width: 100% !important;
  height: 38px !important;
  padding: 0 2px !important;
  border-radius: 11px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.voice-wallet-pill:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.voice-wallet-pill.active,
.voice-wallet-pill.active.active-chi {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.28) !important;
}

.voice-wallet-pill.active.active-thu {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.28) !important;
}


/* =========================================================================
 * 5. GIAO DIỆN MODAL QUÉT QR TOÀN MÀN HÌNH
 * ========================================================================= */
.qr-scanner-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.qr-scanner-overlay.hidden {
  display: none !important;
}
.qr-scanner-header {
  padding: 24px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 60;
}
.qr-scanner-title {
  font-size: 16px;
  font-weight: 700;
}
.qr-scanner-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.qr-scanner-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.qr-scanner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.qr-camera-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.qr-camera-viewport video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
/* Ẩn overlay scan-box mặc định của Html5Qrcode (ta dùng overlay trang trí riêng) */
#qr-camera-viewport__scan_region,
#qr-camera-viewport__dashboard,
[id$="__scan_region"],
[id$="__dashboard"] {
  display: none !important;
}
/* Canvas decode của Html5Qrcode - ẩn khỏi màn hình nhưng vẫn hoạt động */
.qr-camera-viewport canvas {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
}
.qr-target-box {
  width: 250px;
  height: 250px;
  position: relative;
  z-index: 10;
}
.qr-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #38bdf8;
  border-style: solid;
}
.qr-corner.top-left { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.qr-corner.top-right { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.qr-corner.bottom-left { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }
.qr-corner.bottom-right { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }

.qr-laser-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
  box-shadow: 0 0 16px #38bdf8, 0 0 8px #38bdf8;
  top: 50%;
  animation: laserScan 2s ease-in-out infinite alternate;
}

@keyframes laserScan {
  0% { top: 15px; }
  100% { top: 235px; }
}

.qr-scanner-hint {
  margin-top: 26px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  max-width: 260px;
  line-height: 1.4;
  z-index: 10;
}
.qr-scanner-controls {
  padding: 20px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 60;
}
.qr-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.qr-tool-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.15s ease;
}
.qr-tool-icon-circle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.qr-tool-active {
  background: rgba(2, 132, 199, 0.3) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}


/* =========================================================================
 * 6. DIALOG CHUYỂN TIẾP VCB DIGIBANK
 * ========================================================================= */
.bank-toast-dialog {
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  max-width: 340px;
  width: 90%;
  margin: auto;
  text-align: center;
  box-sizing: border-box;
}
.bank-dialog-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #008744;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 12px;
  box-shadow: 0 4px 12px rgba(0, 135, 68, 0.3);
}
.bank-dialog-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.bank-dialog-sub {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 14px;
  line-height: 1.4;
}
.bank-dialog-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  text-align: left;
}
.bank-dialog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}
.bank-dialog-row:last-child {
  margin-bottom: 0;
}
.bank-dialog-label {
  color: #64748b;
  font-weight: 500;
}
.bank-dialog-amount {
  font-size: 15px;
  font-weight: 800;
  color: #008744;
  font-family: 'JetBrains Mono', monospace;
}
.bank-dialog-beneficiary {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-dialog-btn-open {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #008744;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 135, 68, 0.3);
  margin-bottom: 8px;
  transition: all 0.15s ease;
}
.bank-dialog-btn-open:hover {
  background: #007038;
}
.bank-dialog-btn-close {
  width: 100%;
  padding: 8px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.bank-dialog-btn-close:hover {
  color: #334155;
}


/* =========================================================================
 * 3 PILL TÀI KHOẢN: CÂN CHỈNH KÍCH THƯỚC BẰNG NHAU NHƯ TIME & HẠNG MỤC
 * ========================================================================= */
#entry-wallet-quick-pills {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}

#entry-wallet-quick-pills .quick-pill-item {
  width: 100% !important;
  height: 100% !important;
  min-height: 38px !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
}

/* =========================================================================
 * NÚT "+ THÊM TÀI KHOẢN" HEADER THỐNG NHẤT GIAO DIỆN BADGE PILL
 * ========================================================================= */
.btn-wallet-add-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
  border-radius: 9999px !important;
  padding: 3.5px 10px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  line-height: 1.2 !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.06) !important;
}

.btn-wallet-add-pill:hover {
  background: rgba(2, 132, 199, 0.16) !important;
  border-color: #0284c7 !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15) !important;
}

.btn-wallet-add-pill:active {
  transform: translateY(0.5px) !important;
}

/* =========================================================================
 * NÚT BÚT CHÌ TẠI TỪNG TÀI KHOẢN (BỎ NÚT ...)
 * ========================================================================= */
.btn-wallet-item-edit {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-wallet-item-edit:hover {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
  color: #0284c7 !important;
  transform: scale(1.05) !important;
}

.btn-wallet-item-edit:active {
  transform: scale(0.95) !important;
}

/* =========================================================================
 * 2 NÚT HÀNG DƯỚI TAB TÀI KHOẢN (MỖI NÚT 50% CHIẾM 1 NỬA DÒNG)
 * ========================================================================= */
.account-bottom-dual-btns {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

.account-bottom-hero-btn {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.account-bottom-hero-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.account-bottom-hero-btn:active {
  transform: translateY(0.5px) !important;
}

.account-bottom-btn-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.account-bottom-btn-info {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.account-bottom-btn-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.account-bottom-btn-sub {
  font-size: 10.5px !important;
  color: #64748b !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================================
 * VUỐT LỊCH THU CHI & DANH SÁCH CHI TIẾT TRONG THÁNG
 * ========================================================================= */
.cal-grid-wrapper {
  touch-action: pan-y !important;
  user-select: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

.cal-grid-wrapper.swipe-left-anim {
  animation: calSwipeLeft 0.25s ease;
}

.cal-grid-wrapper.swipe-right-anim {
  animation: calSwipeRight 0.25s ease;
}

@keyframes calSwipeLeft {
  0% { transform: translateX(20px); opacity: 0.6; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes calSwipeRight {
  0% { transform: translateX(-20px); opacity: 0.6; }
  100% { transform: translateX(0); opacity: 1; }
}

.cal-month-tx-section {
  margin-top: 14px;
  padding-bottom: 24px;
}

/* =========================================================================
 * TOAST THOÁT APP PWA (VUỐT / NHẤN 2 LẦN LIÊN TIẾP ĐỂ THOÁT)
 * ========================================================================= */
.pwa-exit-toast {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.pwa-exit-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================================
 * BẢO MẬT & ĐĂNG NHẬP (LOGIN SCREEN & CONFIG LOCKING)
 * ========================================================================= */
.app-login-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at 50% 20%, #1e293b, #0f172a 80%) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.app-login-overlay.hidden {
  display: none !important;
}

.login-fade-out {
  opacity: 0 !important;
  transform: scale(0.98) !important;
  pointer-events: none !important;
}

.app-login-card {
  width: 100% !important;
  max-width: 360px !important;
  background: rgba(30, 41, 59, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 28px !important;
  padding: 32px 24px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-login-logo-wrap {
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto 16px auto !important;
  background: rgba(234, 88, 12, 0.12) !important;
  border: 1px solid rgba(234, 88, 12, 0.3) !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.25) !important;
}

.app-login-logo-img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) !important;
}

.app-login-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 4px !important;
}

.app-login-sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-bottom: 24px !important;
}

.app-login-input-wrap {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.app-login-input {
  width: 100% !important;
  height: 50px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 0 46px 0 16px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.app-login-input:focus {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25) !important;
  background: rgba(15, 23, 42, 0.95) !important;
}

.app-login-input::placeholder {
  color: #64748b !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
}

.app-login-toggle-eye {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-login-remember-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.app-login-remember-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #ea580c !important;
  cursor: pointer !important;
}

.btn-app-login {
  width: 100% !important;
  height: 48px !important;
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-app-login:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45) !important;
}

.btn-app-login:active {
  transform: translateY(1px) !important;
}

.app-login-error {
  min-height: 20px !important;
  color: #f87171 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
}

.app-login-hint {
  margin-top: 18px !important;
  font-size: 11px !important;
  color: #64748b !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
  padding-top: 12px !important;
}

/* KHÓA CẤU HÌNH TRONG CÀI ĐẶT */
.config-lock-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  transition: all 0.25s ease !important;
}

.config-lock-banner.unlocked {
  background: #f0fdf4 !important;
  border-color: #dcfce7 !important;
}

.config-lock-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.config-lock-badge.locked {
  background: #fef3c7 !important;
  color: #d97706 !important;
}

.config-lock-badge.unlocked {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.btn-config-lock-action {
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
}

.btn-config-lock-action.unlocked {
  background: #64748b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25) !important;
}

.config-protected-input:disabled {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
  letter-spacing: 2px !important;
}


/* ========================================================================== */
/* BỔ SUNG & ĐỒNG BỘ CẤU HÌNH API, DATABASE, JETBRAINS MONO & KHÓA SCROLL TAB */
/* ========================================================================== */

/* 1. Global button reset để triệt tiêu khung viền mặc định của browser */
button {
  font-family: inherit;
  border: none;
  background: none;
  outline: none;
  box-sizing: border-box;
}

/* 2. Nút Hướng dẫn tạo & lấy URL Google Sheet (chuẩn link phẳng, không khung lỗi) */
.guide-link-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}
.guide-link-btn:hover {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  text-decoration: underline !important;
}

/* 3. Đồng bộ giao diện Gemini Voice vào cụm Cấu hình API và Database (nền sáng đồng nhất) */
.gemini-config-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: none !important;
}

.gemini-test-conn-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}
.gemini-test-conn-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 4. Font JetBrains Mono cho hiển thị số tiền màn hình nhập liệu & edit giao dịch nhanh */
.amount-big-field,
#entry-amount-input,
.calc-expression-preview,
#amount-calc-preview,
.voice-edit-amount-input,
#edit-voice-amount-input {
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: 'zero' 1, 'tnum' 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* 5. Khóa cuộn trang danh sách tài khoản (Tab Tài Khoản) */
.main-scroll-view:has(#card-left:not(.hidden) #view-wallets-list:not(.hidden)) {
  overflow-y: hidden !important;
  padding-bottom: 54px !important;
}

#card-left:has(#view-wallets-list:not(.hidden)) {
  overflow-y: hidden !important;
  height: 100% !important;
}

#view-wallets-list {
  padding-bottom: 0 !important;
  overflow: hidden !important;
  gap: 8px !important;
}

#view-wallets-list .card-section {
  padding: 8px 10px !important;
}

#view-wallets-list .wallet-list-container {
  gap: 6px !important;
  padding-top: 6px !important;
}

#view-wallets-list .wallet-item {
  padding: 8px 12px !important;
  min-height: 52px !important;
}

#view-wallets-list .wallet-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  font-size: 18px !important;
}

#view-wallets-list .wallet-name {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#view-wallets-list .wallet-bal {
  font-size: 13.5px !important;
  line-height: 1.2 !important;
}

#view-wallets-list .account-bottom-dual-btns {
  margin-top: 6px !important;
  gap: 8px !important;
}

#view-wallets-list .account-bottom-hero-btn {
  min-height: 54px !important;
  padding: 8px 10px !important;
}

/* 6. Danh mục Modal: Chiều cao các dòng cột Thường dùng và cột Danh mục bằng nhau (40px) */
.cat-col-freq-item {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cat-col-parent-item {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: #fafafa !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: #1e293b !important;
  transition: all 0.15s ease !important;
}

.cat-item-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.cat-child-name {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ========================================================================== */
/* CĂN CHÍNH GIỮA 100% TIÊU ĐỀ THANH XANH (ACC-BLUE-HEADER) & DỌN DẸP BẢO MẬT */
/* ========================================================================== */

.acc-blue-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

.acc-blue-header .acc-name {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  max-width: 65% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.acc-blue-header .acc-tool-btn,
.acc-blue-header .acc-tools,
.acc-blue-header .acc-header-search-wrap {
  position: relative !important;
  z-index: 2 !important;
}

.debt-person-header {
  position: relative !important;
  min-height: 52px !important;
}

.debt-person-header .debt-person-header-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  max-width: 70% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  text-align: center !important;
}

.debt-person-header .acc-tool-btn {
  position: relative !important;
  z-index: 2 !important;
}


/* ========================================================================== */
/* TĂNG CHIỀU CAO CÁC MỤC DANH SÁCH TÀI KHOẢN VÀ 2 NÚT TOÀN BỘ GD + LỊCH     */
/* ========================================================================== */

#view-wallets-list {
  padding-bottom: 0 !important;
  overflow: hidden !important;
  gap: 12px !important;
}

#view-wallets-list .search-box {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
}

#view-wallets-list .card-section {
  padding: 12px 14px !important;
  border-radius: 18px !important;
}

#view-wallets-list .section-title-row {
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
}

#view-wallets-list .wallet-list-container {
  gap: 10px !important;
  padding-top: 8px !important;
}

#view-wallets-list .wallet-item {
  padding: 12px 14px !important;
  min-height: 68px !important;
  height: 68px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

#view-wallets-list .wallet-item-content {
  gap: 12px !important;
}

#view-wallets-list .wallet-icon-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  font-size: 22px !important;
}

#view-wallets-list .wallet-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
}

#view-wallets-list .wallet-bal {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

#view-wallets-list .wallet-edit-btn,
#view-wallets-list .wallet-item .ph-pencil-simple,
#view-wallets-list .wallet-item i.ph-pencil-simple {
  font-size: 18px !important;
}

/* 2 Nút dưới cùng: Toàn bộ GD và Lịch thu chi */
#view-wallets-list .account-bottom-dual-btns {
  margin-top: 10px !important;
  gap: 10px !important;
}

#view-wallets-list .account-bottom-hero-btn {
  min-height: 68px !important;
  height: 68px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

#view-wallets-list .account-bottom-btn-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#view-wallets-list .account-bottom-btn-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#view-wallets-list .account-bottom-btn-sub {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}


/* ========================================================================== */
/* TĂNG CHIỀU CAO RỘNG RÃI CÁC VÍ VÀ 2 NÚT TOÀN BỘ GD + LỊCH                 */
/* ========================================================================== */

#view-wallets-list {
  padding-bottom: 0 !important;
  overflow: hidden !important;
  gap: 12px !important;
}

#view-wallets-list .search-box {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
}

#view-wallets-list .card-section {
  padding: 14px !important;
  border-radius: 20px !important;
}

#view-wallets-list .section-title-row {
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}

#view-wallets-list .wallet-list-container {
  gap: 12px !important;
  padding-top: 8px !important;
}

#view-wallets-list .wallet-item {
  padding: 14px 16px !important;
  min-height: 74px !important;
  height: 74px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

#view-wallets-list .wallet-item-content {
  gap: 14px !important;
}

#view-wallets-list .wallet-icon-box {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
}

#view-wallets-list .wallet-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
}

#view-wallets-list .wallet-bal {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

#view-wallets-list .wallet-edit-btn,
#view-wallets-list .wallet-item .ph-pencil-simple,
#view-wallets-list .wallet-item i.ph-pencil-simple {
  font-size: 20px !important;
}

/* 2 Nút dưới cùng: Toàn bộ GD và Lịch thu chi */
#view-wallets-list .account-bottom-dual-btns {
  margin-top: 14px !important;
  gap: 10px !important;
}

#view-wallets-list .account-bottom-hero-btn {
  min-height: 74px !important;
  height: 74px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#view-wallets-list .account-bottom-btn-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#view-wallets-list .account-bottom-btn-info {
  min-width: 0 !important;
  flex: 1 !important;
}

#view-wallets-list .account-bottom-btn-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

#view-wallets-list .account-bottom-btn-sub {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}


/* ========================================================================== */
/* ĐỒNG BỘ ĐỘ BO CONG TÌM KIẾM (16PX) & GIẢM KHOẢNG TRỐNG TAB TÀI KHOẢN       */
/* ========================================================================== */

#view-wallets-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#view-wallets-list .search-box {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

#view-wallets-list .search-box input,
.search-box input {
  width: 100% !important;
  height: 44px !important;
  padding: 10px 36px 10px 38px !important;
  border-radius: 16px !important; /* Đồng bộ 16px với danh sách tài khoản & nút bấm */
  background: #ffffff !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text-main) !important;
  font-size: 0.88rem !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

#view-wallets-list .search-box .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.95rem !important;
  color: var(--text-muted, #94a3b8) !important;
  pointer-events: none !important;
}

#view-wallets-list .card-section {
  padding: 12px 14px !important;
  border-radius: 16px !important; /* Đồng bộ 16px */
  margin: 0 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

#view-wallets-list .section-title-row {
  padding-bottom: 8px !important;
  margin-bottom: 2px !important;
}

#view-wallets-list .wallet-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-top: 6px !important;
}

#view-wallets-list .wallet-item {
  padding: 12px 14px !important;
  min-height: 68px !important;
  height: 68px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#view-wallets-list .account-bottom-dual-btns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

#view-wallets-list .account-bottom-hero-btn {
  min-height: 68px !important;
  height: 68px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important; /* Đồng bộ 16px */
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}


/* ========================================================================== */
/* ĐỒNG BỘ ĐỘ BO CONG 3 TAB THU - CHI - CK VỚI KHU VỰC SỐ TIỀN (16PX)       */
/* ========================================================================== */

.entry-3tabs-switcher,
#entry-3tabs-switcher,
#voice-edit-tabs-switcher {
  border-radius: 16px !important; /* Đồng bộ hoàn toàn với khu vực số tiền .amount-hero-box */
  padding: 4px !important;
  background: #eef2f6 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}

.entry-3tab-btn,
.entry-3tabs-switcher button {
  border-radius: 12px !important; /* Bo cong bên trong hài hòa với khung ngoài 16px */
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* ========================================================================== */
/* 2 NÚT HÀNG DƯỚI TAB TÀI KHOẢN: BỎ GHI CHÚ, CHIỀU CAO LINH ĐỘNG HIỆN FULL CHỮ */
/* ========================================================================== */

#view-wallets-list .account-bottom-hero-btn,
.account-bottom-hero-btn {
  height: auto !important;
  min-height: 52px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 16px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#view-wallets-list .account-bottom-btn-info,
.account-bottom-btn-info {
  min-width: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

#view-wallets-list .account-bottom-btn-title,
.account-bottom-btn-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  margin: 0 !important;
}

#view-wallets-list .account-bottom-btn-sub,
.account-bottom-btn-sub {
  display: none !important;
}

/* ========================================================================== */
/* 1. TĂNG CHIỀU CAO & ĐỘ LỚN ICON TAB ĐÁY (BOTTOM NAVIGATION) THÊM 30%        */
/* ========================================================================== */

.app-bottom-nav {
  height: 68px !important; /* Tăng 30% từ 52px lên 68px */
  padding: 4px 10px !important;
  box-sizing: border-box !important;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.06) !important;
  border-top: 1px solid var(--border, #e2e8f0) !important;
  background: #ffffff !important;
  z-index: 100 !important;
}

.bottom-nav-item {
  padding: 4px 0 !important;
  gap: 3px !important;
  touch-action: manipulation !important;
}

.bottom-nav-item .nav-icon-wrap {
  width: 58px !important; /* Tăng 30% từ 44px lên 58px */
  height: 34px !important; /* Tăng 30% từ 26px lên 34px */
  border-radius: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.bottom-nav-item i,
.bottom-nav-item .nav-icon-wrap i {
  font-size: 26px !important; /* Tăng 30% từ 20px lên 26px */
  line-height: 1 !important;
}

.bottom-nav-item .nav-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}

.bottom-nav-item.active .nav-icon-wrap {
  background: rgba(234, 88, 12, 0.14) !important;
  color: #ea580c !important;
}

.bottom-nav-item.active .nav-label {
  color: #ea580c !important;
}

/* Đẩy màn hình nhập liệu và các view cuộn lên cao tương ứng để không bị đè bàn phím */
.main-scroll-view,
.main-scroll-view:has(#card-center:not(.hidden)),
#view-wallets-list {
  padding-bottom: 74px !important; /* Chừa khoảng đệm 74px tương ứng với thanh tab 68px */
}

#card-center .entry-keypad-grid {
  margin-top: auto !important;
  margin-bottom: 4px !important; /* Bàn phím số cách mép trên thanh tab 4px an toàn */
}


/* ========================================================================== */
/* 2. LOGO MÀN HÌNH ĐĂNG NHẬP GIỐNG HỆT ẢNH CỦ CÀ RỐT PIXEL ART SQUIRCLE       */
/* ========================================================================== */

.app-login-logo-wrap {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 16px auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.app-login-logo-img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  border-radius: 28px !important;
  filter: drop-shadow(0 12px 28px rgba(234, 88, 12, 0.38)) !important;
  image-rendering: pixelated !important; /* Giữ độ sắc nét của pixel art */
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
}




/* ========================================================================== */
/* KHẮC PHỤC TRIỆT ĐỂ: ẨN HOÀN TOÀN DANH SÁCH VÍ KHI CHUYỂN SANG SCREEN CHI TIẾT */
/* ========================================================================== */

#view-wallets-list.hidden,
#view-account-detail.hidden,
#view-all-transactions.hidden,
#view-calendar.hidden,
#view-search-results.hidden,
[id^="view-"].hidden,
[id^="right-view-"].hidden,
.card-view-section.hidden {
  display: none !important;
}


/* Đảm bảo vùng Cài Đặt & Cấu Hình cuộn mượt và không bị che khuất khu vực Đổi Mật Khẩu */
#right-view-setting {
  padding-bottom: 90px !important;
}


/* =========================================================================
 * CẤU HÌNH PILL GHIM NHANH HẠNG MỤC
 * ========================================================================= */
.pinned-pills-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pinned-pill-slot-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  border-radius: 14px !important;
  border: 1px dashed #cbd5e1 !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.18s ease !important;
  min-height: 98px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.pinned-pill-slot-btn:hover,
.pinned-pill-slot-btn:active {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  transform: translateY(-1px) !important;
}

.slot-pill-badge {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 3px !important;
}

.slot-pill-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  flex-shrink: 0 !important;
}

.slot-pill-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  display: block !important;
}

.slot-pill-sub {
  font-size: 9px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.slot-pill-edit-action {
  font-size: 9.5px !important;
  color: #ea580c !important;
  font-weight: 700 !important;
  margin-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1 !important;
}

.pinned-pills-tab-wrap {
  display: flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  padding: 2px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  gap: 2px !important;
}

.pinned-pills-tab-btn {
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  transition: all 0.15s ease !important;
}

.pinned-pills-tab-btn.active-chi {
  background: #ffffff !important;
  color: #ea580c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.pinned-pills-tab-btn.active-thu {
  background: #ffffff !important;
  color: #16a34a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================================
 * MỞ CUỘN CHO TAB KHÁC & CÀI ĐẶT VÀ CẤU HÌNH (SCROLL TỰ NHIÊN MƯỢT MÀ)
 * ========================================================================= */
.main-scroll-view:has(#card-right:not(.hidden)),
.main-scroll-view:has(#right-view-setting:not(.hidden)) {
  overflow-y: auto !important;
  overflow-y: overlay !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#card-right {
  overflow-y: visible !important;
}

#right-view-setting {
  overflow-y: visible !important;
  padding-bottom: 120px !important;
  touch-action: pan-y !important;
}


/* =========================================================================
 * GIAO DIỆN ĐỒNG BỘ: CÀI ĐẶT & CẤU HÌNH (PREMIUM CLEAN SETTINGS)
 * ========================================================================= */
.settings-card {
  background: #ffffff !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.settings-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.settings-card-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}

.settings-icon-badge {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}

.settings-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
}

.settings-card-sub {
  font-size: 10.5px !important;
  color: #64748b !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

.settings-card-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 2px 0 !important;
  width: 100% !important;
}

/* Row Tự động đồng bộ */
.sync-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 12px !important;
}

/* Badge trạng thái */
.status-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.status-pill-badge.active {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

.status-pill-badge.warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

.status-pill-badge.neutral {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

/* Khối dịch vụ Gemini & Sheets */
.settings-service-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.service-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.service-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.service-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.service-model-tag {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 1.5px 6px !important;
  border-radius: 6px !important;
}

/* Input group */
.settings-input-group {
  display: flex !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.settings-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.settings-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

.settings-input:disabled {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.settings-btn-save {
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  background: #10b981 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25) !important;
}

.settings-btn-save:hover {
  background: #059669 !important;
}

.settings-btn-save:active {
  transform: scale(0.98) !important;
}

.service-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.service-guide-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.service-guide-link:hover {
  text-decoration: underline !important;
}

.service-test-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.service-test-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Các nút hành động đồng bộ */
.btn-sync-action {
  height: 38px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.15s ease !important;
}

.btn-sync-action.secondary {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.btn-sync-action.secondary:hover {
  background: #f1f5f9 !important;
}

.btn-sync-action.primary {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}

.btn-sync-action.primary:hover {
  background: #059669 !important;
}

/* 2 Nút bảo mật */
.btn-security-action {
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.btn-security-action.change-pwd {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

.btn-security-action.change-pwd:hover {
  background: #e0f2fe !important;
}

.btn-security-action.lock-app {
  background: #ea580c !important;
  border: 1px solid #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28) !important;
}

.btn-security-action.lock-app:hover {
  background: #c2410c !important;
}

.settings-hint-text {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Pill Slot Button - Style Cao Cấp */
.pinned-pill-slot-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 4px 8px 4px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.18s ease !important;
  min-height: 96px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.pinned-pill-slot-btn:hover,
.pinned-pill-slot-btn:active {
  background: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12) !important;
  transform: translateY(-1px) !important;
}


.settings-actions-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
}

.btn-sync-action {
  width: 100% !important;
}

.btn-security-action {
  width: 100% !important;
}

/* ===== PAYMENT APP SELECTOR ===== */
.pay-app-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  text-align: left;
}
.pay-app-btn:active {
  transform: scale(0.97);
}
.pay-app-btn.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.pay-app-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.pay-app-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
}
.pay-app-btn.selected .pay-app-name {
  color: #1d4ed8;
}


/* Custom Select for Payment App & Settings */
.settings-select-wrap {
  position: relative !important;
  width: 100% !important;
}
.settings-custom-select {
  width: 100% !important;
  height: 42px !important;
  padding: 0 38px 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.settings-custom-select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
.settings-select-caret {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #64748b !important;
  font-size: 14px !important;
}
.settings-btn-test {
  height: 38px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0284c7 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}
.settings-btn-test:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}