/* ===================================================================
   Lớp màu — nạp SAU styles.css, chỉ thêm màu, không đổi bố cục.
   Mỗi icon/thẻ nhận màu riêng qua biến --c đặt sẵn trong HTML
   (màu danh mục, màu ví). Muốn đổi bảng màu ví/danh mục: sửa PALETTE
   trong js/store.js.
   =================================================================== */

:root{
  --c1:#ff6b6b; --c2:#ffa94d; --c3:#ffd43b; --c4:#51cf66;
  --c5:#22b8cf; --c6:#4c6ef5; --c7:#9775fa; --c8:#f06595;
  --tint:14%;
}
html[data-theme="dark"]{ --tint:24% }

/* ---------- nền trang: vệt màu nhẹ thay vì xám phẳng ---------- */
body{
  background:
    radial-gradient(60rem 30rem at 110% -10%, color-mix(in srgb, var(--c7) 10%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at -20% 30%, color-mix(in srgb, var(--c5) 9%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- thẻ tổng số dư: dải màu nhiều sắc ---------- */
.hero{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c7) 70%, transparent), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--c5) 65%, transparent), transparent 60%),
    linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
}

/* ---------- icon giao dịch / danh mục / ví theo màu riêng ---------- */
.tx-ico[style*="--c"],
.cat-item[style*="--c"] .ic,
.wallet-card[style*="--c"] .wallet-ico,
.wb-ico{
  background:color-mix(in srgb, var(--c) var(--tint), var(--card)) !important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent) !important;
}

/* nhãn tên tài khoản trong mỗi giao dịch */
.w-chip{
  display:inline-flex; align-items:center; gap:3px;
  padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
  color:color-mix(in srgb, var(--c) 78%, var(--text));
  background:color-mix(in srgb, var(--c) var(--tint), var(--card));
  white-space:nowrap; max-width:11rem; overflow:hidden; text-overflow:ellipsis;
  vertical-align:middle;
}
html[lang="lo"] .w-chip{font-size:12.5px}
.tx-sub{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}

/* ---------- thẻ ví: viền trên + nền nhuộm theo màu ví ---------- */
.wallet-card[style*="--c"]{
  border-top:4px solid var(--c);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--card)), var(--card) 70%);
}
.wallet-card[style*="--c"] .wallet-bal:not(.down){color:color-mix(in srgb, var(--c) 75%, var(--text))}

/* danh mục */
.cat-item[style*="--c"]{border-left:3px solid var(--c)}
.cat-pick[style*="--c"] .ic{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) var(--tint), var(--card));
}
.cat-pick[style*="--c"].active{
  border-color:var(--c) !important;
  background:color-mix(in srgb, var(--c) 12%, var(--card)) !important;
}
.cat-pick[style*="--c"].active .nm{color:color-mix(in srgb, var(--c) 75%, var(--text)) !important}

/* ---------- ô số liệu: mỗi ô một màu ---------- */
.stat{position:relative; overflow:hidden; --c:var(--c6)}
.grid-3 > .stat:nth-child(1), .grid-2 > .stat:nth-child(1){--c:var(--c1)}
.grid-3 > .stat:nth-child(2), .grid-2 > .stat:nth-child(2){--c:var(--c5)}
.grid-3 > .stat:nth-child(3){--c:var(--c7)}
.stat{background:linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--card)), var(--card) 75%) !important}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c);
}
.stat:has(.stat-value.up){--c:var(--c4)}

/* ---------- tiêu đề thẻ: gạch màu nhỏ phía trước ---------- */
.card{border-top:3px solid transparent}
.grid-2 > .card:nth-child(1){border-top-color:var(--c8)}
.grid-2 > .card:nth-child(2){border-top-color:var(--c6)}

/* ---------- thanh tab dưới: mỗi mục một màu ---------- */
.bn-item:nth-of-type(1){--c:var(--c4)}
.bn-item:nth-of-type(2){--c:var(--c6)}
.bn-item:nth-of-type(3){--c:var(--c2)}
.bn-item:nth-of-type(4){--c:var(--c7)}
.bn-item.active{color:var(--c) !important}
.bn-item.active span{
  background:color-mix(in srgb, var(--c) 16%, transparent);
  border-radius:12px; padding:3px 12px;
}
.bn-fab{
  background:conic-gradient(from 200deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7), var(--c8), var(--c1)) !important;
  box-shadow:0 6px 18px color-mix(in srgb, var(--c7) 40%, transparent) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* ---------- menu bên (máy tính): icon trong ô màu ---------- */
.nav-item .nav-ico{
  width:28px; height:28px; border-radius:9px; display:inline-grid; place-items:center;
  background:color-mix(in srgb, var(--c, var(--accent)) var(--tint), transparent);
}
#mainNav .nav-item:nth-of-type(8n+1){--c:var(--c4)}
#mainNav .nav-item:nth-of-type(8n+2){--c:var(--c6)}
#mainNav .nav-item:nth-of-type(8n+3){--c:var(--c2)}
#mainNav .nav-item:nth-of-type(8n+4){--c:var(--c1)}
#mainNav .nav-item:nth-of-type(8n+5){--c:var(--c5)}
#mainNav .nav-item:nth-of-type(8n+6){--c:var(--c7)}
#mainNav .nav-item:nth-of-type(8n+7){--c:var(--c8)}
#mainNav .nav-item:nth-of-type(8n+8){--c:var(--c3)}

/* loại giao dịch trong hộp thêm: chi đỏ, thu xanh lá, chuyển xanh dương */
#txTypeSeg .seg-item.active[data-type="expense"]{background:var(--red); color:#fff}
#txTypeSeg .seg-item.active[data-type="income"]{background:var(--green); color:#fff}
#txTypeSeg .seg-item.active[data-type="transfer"]{background:var(--blue); color:#fff}

/* ===================================================================
   Thẻ "Số dư từng tài khoản"
   =================================================================== */
.wb-card{border-top-color:var(--c6) !important}
.wb-stack{
  display:flex; height:10px; border-radius:999px; overflow:hidden; margin:2px 0 12px;
  background:var(--line-2); gap:2px;
}
.wb-stack i{display:block; background:var(--c); min-width:3px}
.wb-list{display:flex; flex-direction:column; gap:8px}
.wb-row, .sal-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border-radius:14px; border:0; cursor:pointer; font:inherit; color:inherit;
  background:color-mix(in srgb, var(--c) 7%, var(--card));
  box-shadow:inset 3px 0 0 var(--c);
  transition:transform .15s, background .15s;
}
.wb-row:hover{background:color-mix(in srgb, var(--c) 13%, var(--card)); transform:translateX(2px)}
.wb-ico{
  width:40px; height:40px; flex:0 0 40px; border-radius:12px;
  display:grid; place-items:center; font-size:20px;
}
.wb-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.wb-name{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wb-sub{font-size:12px; color:var(--text-2); display:flex; gap:4px; flex-wrap:wrap}
.wb-sub b{color:var(--red); font-weight:600}
.wb-right{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.wb-bal{font-weight:750; white-space:nowrap; color:color-mix(in srgb, var(--c) 70%, var(--text))}
.wb-bal.down{color:var(--red)}
.wb-pct{font-size:11px; font-weight:700; color:var(--c)}
.wb-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:13px; color:var(--text-2);
}
.wb-foot b.down{color:var(--red)}
html[lang="lo"] .wb-sub, html[lang="lo"] .wb-foot{font-size:13.5px}

/* ===================================================================
   Hộp "Chia lương"
   =================================================================== */
.sal-seg{margin:4px 0 12px; border-radius:12px; padding:4px}
.sal-rows{display:flex; flex-direction:column; gap:8px}
.sal-row{cursor:default; flex-wrap:wrap}
.sal-in{display:flex; align-items:center; gap:4px; flex:0 0 9.5rem}
.sal-in .input{text-align:right; font-weight:700; padding:8px 10px}
.sal-in em{font-style:normal; font-weight:700; color:var(--c); min-width:1.2em}
.sal-get{flex-basis:100%; text-align:right; font-size:12px; font-weight:600; color:var(--c)}
.sal-get:empty{display:none}
.sal-sum{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 10px;
  padding:12px; border-radius:14px; background:var(--line-2); text-align:center;
}
.sal-sum span{display:block; font-size:11.5px; color:var(--text-2)}
.sal-sum b{font-size:14px}
.sal-sum.ok{background:color-mix(in srgb, var(--c4) 18%, var(--card))}
.sal-sum.ok div:last-child b{color:var(--green)}
.sal-sum.over{background:color-mix(in srgb, var(--c1) 18%, var(--card))}
.sal-sum.over div:last-child b{color:var(--red)}
.sal-sum.left div:last-child b{color:#e8890c}


/* ===================================================================
   Tổng kết tháng & mục đích tài khoản
   =================================================================== */
.p-tag{
  display:inline-flex; align-items:center; gap:3px; margin-left:6px;
  padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;
  color:color-mix(in srgb, var(--c) 80%, var(--text));
  background:color-mix(in srgb, var(--c) var(--tint), var(--card));
  vertical-align:middle;
}
.wallet-card .p-tag{margin:2px 0 2px}
.wb-btns{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}

/* 6 câu hỏi */
.q-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.q-item{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--card)), var(--card));
  box-shadow:var(--shadow); border-left:4px solid var(--c); min-width:0;
}
.q-ic{font-size:18px}
.q-l{font-size:12px; color:var(--text-2)}
.q-v{font-size:14.5px; overflow:hidden; text-overflow:ellipsis}

/* bảng tài khoản trong tháng */
.acc-table{display:flex; flex-direction:column; gap:6px}
.acc-row{
  display:grid; grid-template-columns:2.2fr repeat(5, 1fr); gap:8px; align-items:center;
  padding:10px 12px; border-radius:12px; font-size:13px; text-align:right;
  background:color-mix(in srgb, var(--c, var(--line)) 7%, var(--card));
  box-shadow:inset 3px 0 0 var(--c, transparent);
}
.acc-row > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acc-row .acc-name{display:flex; align-items:center; gap:8px; text-align:left; white-space:normal}
.acc-name .p-tag{margin:2px 0 0; display:flex; width:max-content}
.acc-head{background:transparent; box-shadow:none; font-size:11.5px; font-weight:700; color:var(--text-2); padding-top:0; padding-bottom:0}
.acc-head span:first-child{text-align:left}
.acc-total{background:var(--line-2); font-weight:700}
.acc-close{font-weight:750}
.acc-row .up{color:var(--green)} .acc-row .down{color:var(--red)}

/* kế hoạch vs thực tế, chưa dùng hết */
.pva-sum, .al-info{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;
  padding:12px; border-radius:14px; background:var(--line-2); text-align:center;
}
.al-info{grid-template-columns:repeat(2,1fr)}
.pva-sum span, .al-info span{display:block; font-size:11.5px; color:var(--text-2)}
.pva-sum b.up{color:var(--green)} .pva-sum b.down{color:var(--red)}
.pva-row{padding:10px 0; border-bottom:1px solid var(--line)}
.pva-row:last-child{border-bottom:0}
.pva-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.pva-foot{font-size:12.5px; margin-top:5px; color:var(--text-2); text-align:right}
.pva-foot b{color:var(--c)}
.pva-foot.down b{color:var(--red)}
.ok-tag{background:color-mix(in srgb, var(--green) 18%, var(--card)) !important; color:var(--green) !important}
.warn-tag{background:color-mix(in srgb, #f59e0b 20%, var(--card)) !important; color:#c2410c !important}

/* phân bổ tiền dư */
.al-card{border-top-color:var(--c4) !important}
.al-rows{display:flex; flex-direction:column; gap:8px}
.al-row{
  padding:12px; border-radius:14px;
  background:color-mix(in srgb, var(--c) 8%, var(--card)); box-shadow:inset 3px 0 0 var(--c);
}
.al-top{display:flex; align-items:center; gap:12px}
.al-top .wb-ico{background:color-mix(in srgb, var(--c) var(--tint), var(--card))}
.al-top .wb-main b{font-size:14px}
.al-ctl{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.al-ctl .al-w{flex:1 1 10rem; min-width:0}
.al-ctl .sal-in{flex:0 0 6rem}
.al-amt{margin-left:auto; font-size:15px; color:color-mix(in srgb, var(--c) 80%, var(--text)); white-space:nowrap}
.al-amt.down{color:var(--red)}
.al-keep .al-top .wb-main{flex:1}
.al-actions{display:flex; justify-content:space-between; gap:8px; margin-top:14px; flex-wrap:wrap}
html[lang="lo"] .q-l, html[lang="lo"] .acc-row, html[lang="lo"] .p-tag{font-size:13px}

/* ô "Tổng số dư" ở menu bên: không cho bị ép dẹt, chữ nằm giữa */
.side-balance{
  flex-shrink:0; min-height:4.75rem;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:2px;
}
.side-balance-value{margin-top:0; line-height:1.2}

/* danh mục trong hộp thoại: bỏ thanh cuộn riêng để kéo xuống là thấy Ngày, Ghi chú, nút Lưu */
.modal .cat-grid, html[lang="lo"] .modal .cat-grid{max-height:none; overflow:visible}
.btn-save-bottom{width:100%; margin-top:8px; padding:14px; font-size:16px; font-weight:700; border-radius:14px}

/* ===================================================================
   Trợ lý: nút nổi + khung chat
   =================================================================== */
.as-fab{
  position:fixed; right:20px; bottom:20px; z-index:45;
  display:flex; align-items:center; gap:8px; padding:12px 18px; border:0; border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; font:inherit; font-weight:700; font-size:14px;
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.38); cursor:pointer; transition:transform .15s;
}
.as-fab:hover{transform:translateY(-2px)}
.as-fab.hidden{display:none}
.as-fab-ic{font-size:18px}

.as-box{
  position:fixed; right:20px; bottom:20px; z-index:90; width:380px; height:min(600px, calc(100vh - 40px));
  display:none; flex-direction:column; overflow:hidden;
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-lg), 0 0 0 1px var(--line);
}
.as-box.open{display:flex; animation:asIn .2s ease-out}
@keyframes asIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.as-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.as-avatar{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:20px}
.as-title{flex:1; min-width:0; display:flex; flex-direction:column}
.as-title span{font-size:11px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.as-x{color:#fff !important; background:rgba(255,255,255,.15) !important}
.as-list{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--bg)}
.as-msg{display:flex; flex-direction:column; max-width:92%}
.as-msg.me{align-self:flex-end; align-items:flex-end}
.as-msg.bot{align-self:flex-start}
.as-bubble{padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.55; word-wrap:break-word}
.as-msg.bot .as-bubble{background:var(--card); border-bottom-left-radius:4px; box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06))}
.as-msg.me .as-bubble{background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; border-bottom-right-radius:4px}
.as-btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.as-btns .btn{background:var(--card)}
.as-chips{display:flex; gap:6px; overflow-x:auto; padding:8px 12px; border-top:1px solid var(--line); scrollbar-width:none}
.as-chips::-webkit-scrollbar{display:none}
.as-chips .chip{white-space:nowrap; flex:0 0 auto; font-size:12px}
.as-input{display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.as-input input{flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:10px 14px; font:inherit; background:var(--bg); color:var(--text)}
.as-input input:focus{outline:none; box-shadow:var(--ring)}
.as-input .btn{border-radius:50%; width:40px; height:40px; padding:0; font-size:16px}
html[lang="lo"] .as-bubble{font-size:15px}