# SavingsCard
Sổ tiết kiệm Tà Tưa Bank: số dư, lãi 1%/ngày, kỳ hạn, ngày đáo hạn, tiến độ và nút Gửi / Rút; có biến thể khoản vay.

## Khi nào dùng
- Hộp Tà Tưa Bank: lãi kép 1%/ngày game, kỳ hạn 7, 14, 21, 28 hoặc 35 ngày.
- Khoản nợ đang trả góp 10 ngày (nền `mint`).

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Sổ tiết kiệm | `tt-savings-card` | Số dư lớn, 3 ô thông tin, thanh tiến độ, hai nút |
| Khoản vay | `tt-savings-card tt-savings-card--loan` | Nền và viền `mint`, "Đang nợ", nút Trả hết |

## Cấu trúc
```html
<article class="tt-savings-card" aria-labelledby="sv1">
  <div class="tt-savings-card__head">
    <span class="tt-savings-card__icon" aria-hidden="true">🏦</span>
    <div><h3 class="tt-savings-card__title" id="sv1">Tà Tưa Bank</h3>
         <div class="tt-savings-card__rate">Lãi kép 1%/ngày</div></div>
  </div>
  <div class="tt-savings-card__balance tt-num"><span class="tt-sr-only">Số dư </span>1,15tr</div>
  <div class="tt-savings-card__facts">
    <div class="tt-savings-card__fact"><span class="tt-savings-card__fact-label">Kỳ hạn</span><span class="tt-savings-card__fact-value">14 ngày</span></div>
  </div>
  <div class="tt-savings-card__progress-text"><span>Tiến độ tích luỹ</span><span>9/14 ngày</span></div>
  <div class="tt-progress tt-progress--goal" role="progressbar" aria-label="..." aria-valuemin="0" aria-valuemax="14" aria-valuenow="9"><i class="tt-progress__fill"></i></div>
  <p class="tt-savings-card__note">Rút trước kỳ hạn sẽ mất toàn bộ tiền lãi.</p>
  <div class="tt-savings-card__actions"><!-- lưới cột đều -->
    <button type="button" class="tt-button tt-button--small tt-button--accent" data-action="deposit"><b>Còn 8,85tr</b>Gửi thêm</button>
    <button type="button" class="tt-button tt-button--small" data-action="withdraw"><b>Mất lãi</b>Rút trước hạn</button>
  </div>
</article>
```
Số tiền định dạng bằng `TTMU.formatMoney`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đang gửi | Thanh `tt-progress` theo số ngày đã tích luỹ |
| Đến hạn | Tiến độ đầy (`tt-progress is-done`), nút Rút không mất lãi |
| Khoản vay | Nền `mint` 14%, ô thông tin nền `panel` |

## Hành vi JS
`TTMU.businessCards(root, { onAction })`: "deposit", "withdraw", "repay" gọi `onAction(action, nút, thẻ)`.

## Token sử dụng
`panel`, `bg`, `line`, `ink`, `mint`, `soft`, `shadow-edge`, `radius-10/14`, `space-6/8/12`.

## Khả năng tiếp cận
- Số dư lớn có chữ ẩn `tt-sr-only` "Số dư " đứng trước số; tiến độ là `role="progressbar"`.
- Nút Rút nêu hậu quả ("Mất lãi") bằng chữ, không chỉ bằng màu.
- Khoản vay nhận biết bằng tiêu đề "Đang nợ", không chỉ nền `mint`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Nói rõ rút trước hạn mất lãi, chỉ nhận gốc | Giấu quy tắc kỳ hạn |
| Dùng `TTMU.formatMoney` cho mọi số tiền | Gõ tay "1.150.000đ" |

## Nguồn
`.p-fin-box` (ô thông tin), `.evc.loan` (khoản vay, nền `mint`), `.ledger`, hộp Gửi tiết kiệm Tà Tưa Bank (`bankInpAmt`, `data-bank-term`) — css/style.css, js/game.js; số liệu: lãi kép 1%/ngày, kỳ hạn 7–35 ngày, vay ngân hàng trả góp 10 ngày.
- Bố cục thẻ (số dư lớn, ba ô thông tin) là bổ sung có chủ đích, game hiện hiển thị trong hộp thoại.