/* ============================================================
   CHI TIÊU — (tách từ style.css, dòng 1390-1806)
   ============================================================ */

  /* ---------- Chi tiêu: thẻ tổng hợp ---------- */
  .ct-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }
  .ct-card {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    box-shadow: none;
    animation: fadeUp .6s ease both;
  }
  .ct-card .ct-label { font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
  .ct-card .ct-val {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
  }
  .ct-card.thu .ct-val { color: var(--green); }
  .ct-card.chi .ct-val { color: var(--red); }
  .ct-card.balance .ct-val { color: var(--cyan); }

  /* ---------- Chi tiêu: thanh công cụ & form ---------- */
  .ct-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
  }
  .ct-toolbar input[type="month"],
  .ct-form input[type="number"],
  .ct-form input[type="date"],
  .ct-form input[type="text"],
  .ct-form select {
    padding: 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }
  .ct-form input[type="number"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .ct-toolbar input[type="month"]:focus,
  .ct-form input:focus, .ct-form select:focus {
    border-color: var(--cyan);
    box-shadow: none;
  }
  .ct-toolbar select { color-scheme: dark; }

  /* Ô thêm đơn vị ngàn (×1000) — đẹp */
  .ct-amt-wrap { display: flex; align-items: stretch; gap: 8px; flex: 1 1 100%; }
  .ct-amt-wrap input[type="number"] { flex: 1 1 50%; text-align: left !important; height: 42px; box-sizing: border-box; }
  .ct-amt-k {
    flex: 1 1 50%;
    background: rgba(113,112,255,0.14);
    border: 1px solid rgba(113,112,255,.4); color: var(--cyan);
    font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .4px;
    border-radius: 8px; cursor: pointer; height: 42px; box-sizing: border-box;
    transition: all .18s; white-space: nowrap;
  }
  .ct-amt-k:hover { background: rgba(113,112,255,0.28); box-shadow: none; }
  .ct-amt-k:active { transform: scale(.97); }

  /* Layout form thêm chi tiêu: fields + side (Lưu/Hủy + thêm nhanh) */
  .ct-add-box { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .ct-add-fields { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 280px; }
  .ct-add-fields .ct-dd { flex: 1 1 100%; }
  .ct-add-fields input[type="date"],
  .ct-add-fields input[type="text"],
  .ct-add-fields .ct-dd-toggle { height: 42px; box-sizing: border-box; }
  .ct-add-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .ct-save-col { display: flex; flex-direction: row; gap: 8px; }
  .ct-save-col .btn { flex: 1 1 66px; justify-content: center; }
  .ct-quick { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; }
  .ct-quick-btn, .ct-quick-set {
    padding: 8px 6px; border-radius: 9px; border: 1px dashed rgba(113,112,255,.4);
    background: rgba(113,112,255,.1); color: var(--cyan); cursor: pointer;
    font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.2;
    transition: all .15s; overflow: hidden; text-overflow: ellipsis; max-width: 92px;
  }
  .ct-quick-btn {
    border-color: color-mix(in srgb, var(--qcol, var(--cyan)) 45%, transparent);
    background: color-mix(in srgb, var(--qcol, var(--cyan)) 12%, transparent);
    color: var(--qcol, var(--cyan));
  }
  .ct-quick-btn:hover { background: color-mix(in srgb, var(--qcol, var(--cyan)) 24%, transparent); box-shadow: none; transform: translateY(-1px); }
  .ct-quick-btn:active { transform: translateY(0) scale(.96); }
  .ct-quick-set { border-style: solid; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.45); color: #fbbf24; max-width: none; }
  .ct-quick-set:hover { background: rgba(251,191,36,.2); box-shadow: none; transform: translateY(-1px); }
  .ct-quick-set.open { background: rgba(251,191,36,.26); border-color: #fbbf24; }

  /* Panel cấu hình thêm nhanh */
  .ct-quick-config { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(13,21,36,.55); border: 1px solid rgba(139,151,255,.24); border-radius: 12px; }
  .ct-quick-config[hidden] { display: none !important; }
  .ct-qc-row { display: grid; grid-template-columns: 1fr 78px 1fr; gap: 6px; align-items: center; }
  .ct-qc-label { font-size: 11px; font-weight: 800; color: var(--cyan); white-space: nowrap; }
  .ct-qc-row input, .ct-qc-row select {
      padding: 6px 8px; background: rgba(255,255,255,.06); color: var(--text-main);
      border: 1px solid var(--glass-border); border-radius: 8px; font-size: 12px; outline: none; min-width: 0;
    }
    .ct-qc-row input:focus, .ct-qc-row select:focus { border-color: var(--cyan); box-shadow: none; }
    .ct-qc-row input.qc-amount { text-align: left !important; font-variant-numeric: tabular-nums; }
    .ct-qc-row select.qc-cat {
      appearance: none; -webkit-appearance: none;
      background-color: rgba(113,112,255,.1);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
      padding-right: 26px; border-color: rgba(113,112,255,.35); color: var(--cyan); font-weight: 600; cursor: pointer;
      border-left: 4px solid var(--qcol, var(--cyan));
    }
    .ct-qc-row select.qc-cat:hover { border-color: rgba(113,112,255,.6); }
    .ct-qc-row select.qc-cat option { color: var(--text-main); background: #0d1524; }
  .ct-qc-row select { color-scheme: dark; }
  .ct-qc-foot { display: flex; gap: 8px; justify-content: flex-end; }
  .ct-qc-foot .btn { padding: 6px 12px; font-size: 12px; }

  /* Droplist phân loại tùy chỉnh */
  .ct-dd { position: relative; min-width: 130px; }
  .ct-dd-toggle {
    width: 100%;
    padding: 9px 34px 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .25s, box-shadow .25s;
  }
  .ct-dd-toggle .ct-dd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-dd-toggle::after {
    content: '';
    position: absolute;
    right: 13px; top: 47%;
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--text-dim);
    border-bottom: 1.6px solid var(--text-dim);
    transform: translateY(-60%) rotate(45deg);
    transition: transform .2s;
  }
  .ct-dd.open .ct-dd-toggle::after { transform: translateY(-20%) rotate(225deg); }
  .ct-dd.open .ct-dd-toggle { border-color: var(--cyan); box-shadow: none; }
  .ct-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #0d1626;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 6px;
    max-height: 248px;
    overflow-y: auto;
    z-index: 40;
    display: none;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    list-style: none;
    margin: 0;
  }
  .ct-dd.open .ct-dd-menu { display: block; }
  .ct-dd-menu li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    transition: background .15s;
  }
  .ct-dd-menu li .ct-dd-li-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; box-shadow: none; }
  .ct-dd-menu li:hover { background: rgba(122,171,255,.13); }
  .ct-dd-menu li.selected { background: rgba(74,214,255,.16); color: var(--cyan); }
  .ct-dd-menu li.new-cat {
    border-top: 1px solid var(--hairline);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--cyan);
  }
  /* Bảng chọn tháng/năm tùy chỉnh */
  .ct-mp { position: relative; min-width: 118px; }
  .ct-mp-toggle {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s;
  }
  .ct-mp-toggle:hover { border-color: rgba(124,172,255,.5); }
  .ct-mp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 230px;
    background: #0d1526;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px;
    z-index: 80;
    display: none;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
  }
  .ct-mp.open .ct-mp-panel { display: block; }
  .ct-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .ct-mp-nav {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .15s;
  }
  .ct-mp-nav:hover { background: rgba(124,172,255,.12); }
  .ct-mp-year {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-bright);
    letter-spacing: .5px;
  }
  .ct-mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .ct-mp-grid button {
    padding: 7px 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .ct-mp-grid button:hover { background: rgba(124,172,255,.12); }
  .ct-mp-grid button.sel { background: rgba(113,112,255,.16); border-color: rgba(113,112,255,.5); color: var(--cyan); font-weight: 600; }
  .ct-dd-menu::-webkit-scrollbar { width: 6px; }
  .ct-dd-menu::-webkit-scrollbar-thumb { background: rgba(126,166,224,.3); border-radius: 4px; }
  .btn {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
  }
  .btn-primary {
    background: var(--cyan);
    color: #ffffff;
    box-shadow: none;
  }
  .btn-primary:hover { filter: brightness(1.12); }
  .btn-ghost {
    background: rgba(255,255,255,0.065);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
  }
  .btn-ghost:hover { border-color: var(--cyan); box-shadow: none; }
  .btn-danger {
    background: rgba(251,113,133,0.14);
    color: var(--red);
    border: 1px solid rgba(251,113,133,0.35);
  }
  .btn-danger:hover { background: rgba(251,113,133,0.26); }

  .ct-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch;
        padding: 14px 16px;
        margin-bottom: 16px;
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        background: var(--bg-card);
        animation: fadeUp .4s ease both;
        position: relative;
        z-index: 59;
      }
      .ct-total-box {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        flex: 0 0 auto;
        padding: 14px 2px;
        border: none;
        border-bottom: 1px solid var(--hairline);
        border-radius: 0;
        background: transparent;
      }
      .ct-add-box {
        display: flex;
        flex: 1 1 340px;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 14px 2px;
        border: none;
        background: transparent;
      }
    .ct-form input[type="number"] { width: 170px; text-align: center; }
    .ct-total-label {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--text-dim);
      white-space: nowrap;
    }
    .ct-total-eq {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-dim);
    }
    .ct-total-val {
        font-family: var(--font-mono);
        font-size: 29px;
        font-weight: 800;
        color: #fb7185;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        letter-spacing: .01em;
      }
    .ct-form input[type="date"] { color-scheme: dark; }

  /* ---------- Chi tiêu: bảng ---------- */
  .ct-table-wrap { margin-top: 20px; }
  .tag { display:inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .tag.thu { color: var(--green); background: rgba(52,211,153,0.14); }
  .tag.chi { color: var(--red); background: rgba(251,113,133,0.14); }
  .amt.thu { color: var(--green); }
  .amt.chi { color: var(--red); }
  .row-actions { display:flex; gap:6px; justify-content: flex-end; }
  .icon-btn {
    padding: 4px 9px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: all .2s;
  }
  .icon-btn:hover { color: var(--text-main); border-color: var(--cyan); box-shadow: none; }
  .icon-btn.del:hover { color: var(--red); border-color: var(--red); box-shadow: none; }

  .ct-chart { width: 100%; height: 310px; margin-top: 10px; }
#ct-chart-bar { height: 260px; }
  #ct-chart-years { height: 396px; }
  .ct-pies-row { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
  .ct-pie-box { flex: 1 1 290px; min-width: 270px; }
  .ct-pie-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 2px;
    font-weight: 600;
  }
  #ct-pie-avg-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: #fb7185;
    letter-spacing: .01em;
    line-height: 1.25;
  }
  .ct-budget-line {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.35;
    padding: 0 6px;
    min-height: 34px;
  }
  .ct-budget-line .ct-x {
    color: #fb7185;
    font-weight: 800;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
  }
  .ct-budget-line .ct-y {
    color: var(--cyan);
    font-weight: 800;
    font-size: 21px;
  }
  .ct-empty { text-align:center; color: var(--text-faint); padding: 40px 0; }

  /* ============ Light theme: đồng bộ màu các panel/droplist Chi tiêu ============ */
  html[data-theme="light"] .ct-dd-toggle,
  html[data-theme="light"] .ct-mp-toggle { background: rgba(255,255,255,0.6); border-color: rgba(111,88,48,0.2); }
  html[data-theme="light"] .ct-dd-menu { background: #fffdf4; border-color: rgba(111,88,48,0.18); box-shadow: 0 16px 40px rgba(90,70,30,0.18); }
  html[data-theme="light"] .ct-mp-panel { background: #fffdf4; border-color: rgba(111,88,48,0.18); box-shadow: 0 12px 32px rgba(90,70,30,0.16); }
  html[data-theme="light"] .ct-dd-menu li:hover { background: rgba(138,95,36,0.10); }
  html[data-theme="light"] .ct-dd-menu li.selected { background: rgba(138,95,36,0.14); color: #7a5418; }
  html[data-theme="light"] .ct-quick-config { background: rgba(250,245,230,0.9); border-color: rgba(173,132,62,0.35); }
  html[data-theme="light"] .ct-qc-row input,
  html[data-theme="light"] .ct-qc-row select { background: rgba(255,255,255,0.7); color: #2c2414; border-color: rgba(111,88,48,0.2); }
  html[data-theme="light"] .ct-qc-row select.qc-cat option { background: #fffdf4; color: #2c2414; }
  html[data-theme="light"] .ct-qc-row select { color-scheme: light; }