/* Tính lương — tông lạnh, sáng, kiểu bảng lương.
   Màu lấy từ app #3: MauApp (apps/03-thue-tncn/app/lib/src/ui/mau_app.dart) và
   Mau của ll_ui (platform/ll_ui/lib/src/theme.dart).

   XANH = TIỀN BẠN GIỮ, ĐỎ = KHOẢN BỊ TRỪ. Đây là nghĩa, không phải trang trí:
   tô đỏ một con số không bị trừ là làm người đọc hiểu sai bảng lương.

   Lệch app ở MỘT chỗ có chủ ý: --muc-mo bằng luôn --muc-phu (#6E7381 thay
   #8A8F9C). Màu mờ của app chỉ đạt 3,2:1 trên nền trắng — người lớn tuổi đọc
   dòng phụ 13–14px trên laptop đặt xa không nổi. Thứ bậc chữ đi bằng cỡ và độ
   đậm, không bằng một màu xám nhạt hơn. */

:root {
  --nen: #FBFAF7;
  --the: #FFFFFF;
  --nen-phu: #F1EFE9;
  --nen-chip: #F5F3EE;
  --vien: #ECEAE4;
  --vien-dam: #DDD9CE;
  --muc: #1E2430;
  --muc-phu: #6E7381;
  --muc-mo: #6E7381;
  --muc-rat-mo: #A0A5B0;
  --muc-xam: #4A5162;
  --nhan: #1F7A55;
  --nhan-dam: #165C40;
  --nhan-nhat: #E7F1EC;
  --nhan-vien: #CFE3D8;
  --tren-nhan: #FFFFFF;
  --do: #B3452F;
  /* Thẻ thực nhận nền mực đậm, và ba màu sáng hơn để đọc được trên nó. */
  --toi: #1E2430;
  --tren-toi: #FFFFFF;
  --tren-toi-phu: #8E96A8;
  --tren-toi-nhat: #C3C9D6;
  --xanh-sang: #3DBE87;
  --xam: #7C86A0;
  --do-sang: #E0705A;
  --canh-bao-nen: #FBF3E4;
  --canh-bao-vien: #EBDCBE;
  --canh-bao-chu: #7E5716;
  --bo-the: 18px;
  --bo-nut: 16px;
  --bo-nhan: 999px;
  --gian-nhan: .5px;
}

.chip-tk { border-radius: 999px; }

.hai-cot > .cot-nhap { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.hai-cot > .ket-qua { flex: 1.5 1 440px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- đầu vào ---------- */

.chieu { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--nen-phu); }
.chieu button {
  flex: 1 1 0; min-height: 48px; border: 0; border-radius: 9px; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--muc-phu);
}
.chieu button[aria-checked='true'] {
  background: var(--the); color: var(--muc); font-weight: 600; box-shadow: 0 1px 3px rgba(30, 36, 48, .08);
}

.the-tien { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

/* Ô tiền: số to, gạch chân xanh. Viền dưới dày lên khi đang gõ — đó là dấu tiêu
   điểm, thay cho khung outline trông lạc giữa thẻ. */
.o-tien { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--nhan); padding-bottom: 8px; }
.o-tien:focus-within { box-shadow: 0 2px 0 0 var(--nhan); }
.o-tien input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; padding: 0; background: transparent;
  font-weight: 600; color: var(--muc);
}
.o-tien input:focus, .o-tien input:focus-visible { outline: none; }
.o-tien input::placeholder { color: var(--vien-dam); }
.o-tien .don-vi { font-weight: 500; color: var(--muc-mo); }
.o-tien-lon input { font-size: 40px; letter-spacing: -1.2px; line-height: 1.15; }
.o-tien-lon .don-vi { font-size: 22px; }
.o-tien-vua input { font-size: 28px; letter-spacing: -.7px; line-height: 1.2; }
.o-tien-vua input::placeholder { font-size: 20px; letter-spacing: 0; font-weight: 500; }
.o-tien-vua .don-vi { font-size: 18px; }

.doc-la { font-size: 15px; color: var(--muc-phu); min-height: 22px; }
.doc-la strong { font-weight: 600; color: var(--muc); }

.nhanh { display: flex; flex-wrap: wrap; gap: 8px; }
.nhanh button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--nen-chip);
  font-size: 15px; font-weight: 500; color: var(--muc-xam);
}
.nhanh button:hover { background: var(--nen-phu); }

.the-tuy-chon { padding: 4px 20px; }
.the-tuy-chon > * + * { border-top: 1px solid var(--vien); }
.dong-chon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.dong-chon.dung { flex-direction: column; align-items: stretch; gap: 10px; }
.dong-chon .chu, .nut-mo-rong .chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dong-chon .tieu, .nut-mo-rong .tieu { font-size: 16px; font-weight: 500; color: var(--muc); }
.dong-chon .phu, .nut-mo-rong .phu { font-size: 14px; color: var(--muc-mo); }

.buoc { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.buoc output { font-size: 19px; font-weight: 600; min-width: 24px; text-align: center; }
.nut-buoc {
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--nen-phu);
  display: flex; align-items: center; justify-content: center; color: var(--muc-phu);
}
.nut-buoc.them { background: var(--nhan-nhat); color: var(--nhan); }
.nut-buoc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.nut-buoc[aria-disabled='true'] { background: var(--nen-phu); color: var(--muc-rat-mo); cursor: not-allowed; }

.vung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vung button {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--vien); background: var(--the);
  font-size: 16px; font-weight: 600; color: var(--muc-phu);
}
.vung button[aria-checked='true'] {
  border-color: var(--nhan); box-shadow: inset 0 0 0 .5px var(--nhan);
  background: var(--nhan-nhat); color: var(--nhan); font-weight: 700;
}

.nut-mo-rong {
  width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: transparent; text-align: left;
  display: flex; align-items: center; gap: 12px;
}
.nut-mo-rong .chu { flex: 1 1 auto; }
.nut-mo-rong .gia-tri { font-size: 15px; font-weight: 600; color: var(--nhan); white-space: nowrap; }
.mui-ten { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muc-rat-mo); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nut-mo-rong[aria-expanded='true'] .mui-ten { transform: rotate(180deg); }
.khoi-mo { padding: 2px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.khoi-mo .goi-y { font-size: 15px; color: var(--muc-phu); line-height: 1.5; }
.nut-xoa { align-self: flex-start; min-height: 44px; font-size: 15px; }

/* ---------- kết quả ---------- */

.the-toi {
  background: var(--toi); border-radius: var(--bo-the); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 18px; color: var(--tren-toi);
}
.the-toi .nhan { color: var(--tren-toi-phu); letter-spacing: .6px; }
.the-toi .khoi { display: flex; flex-direction: column; gap: 18px; }
.the-toi .khoi .phu { margin-top: -8px; }
.so-lon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.so-lon b { font-size: 56px; font-weight: 700; letter-spacing: -2px; line-height: 1; color: var(--tren-toi); }
.so-lon.dai b { font-size: 44px; letter-spacing: -1.4px; }
.so-lon span { font-size: 26px; font-weight: 500; color: var(--tren-toi-phu); }
.the-toi .phu { font-size: 16px; color: var(--tren-toi-nhat); }
.the-toi .phu strong { color: var(--tren-toi); font-weight: 600; }
.the-toi .trong { font-size: 17px; color: var(--tren-toi-nhat); }

/* Ba đoạn cộng lại đúng 100%, không có khe — khe hở làm tỷ lệ vẽ ra lệch số in bên dưới. */
.thanh { height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(255, 255, 255, .08); }
.thanh i { display: block; height: 100%; }
.mau-giu { background: var(--xanh-sang); }
.mau-bh { background: var(--xam); }
.mau-thue { background: var(--do-sang); }
.chu-giai { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.chu-giai > span { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tren-toi-nhat); }
.cham { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.the-thuong { background: var(--nhan-nhat); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.the-thuong .dau { display: flex; align-items: center; gap: 12px; }
.the-thuong .nhan { flex: 1 1 auto; color: var(--nhan); }
.the-thuong .them { font-size: 15px; font-weight: 600; color: var(--nhan); white-space: nowrap; }
.the-thuong .khoang { font-size: 26px; font-weight: 600; letter-spacing: -.7px; line-height: 1.2; }
.the-thuong .khoang small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muc-phu); }
.the-thuong p { font-size: 15px; color: var(--muc-phu); line-height: 1.5; }

.bang-tach { padding: 8px 24px; }
.bang-tach .dong { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 16px; }
.bang-tach .dong > :last-child { text-align: right; white-space: nowrap; }
.bang-tach .nhom-dong { padding: 6px 0; border-bottom: 1px solid var(--vien); }
.bang-tach .dong-chinh { padding: 14px 0; font-weight: 600; }
.bang-tach .dong-chinh > :last-child { font-weight: 700; }
.bang-tach > .dong-chinh:first-child { border-bottom: 1px solid var(--vien); }
.bang-tach .ten-phu { color: var(--muc-phu); }
.bang-tach .gia-phu { color: var(--muc-phu); }
.bang-tach .gia-do { color: var(--do); }
.bang-tach .ghi { font-weight: 400; color: var(--muc-mo); }
.ds-bac { padding: 0 0 12px; display: flex; flex-direction: column; gap: 2px; }
.ds-bac .dong { font-size: 15px; color: var(--muc-phu); padding: 3px 0; }
.ds-bac .dong > :first-child { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.so-bac {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 7px; background: var(--nen-phu); font-size: 13px; font-weight: 600;
}

.thong-bao {
  padding: 14px 16px; border-radius: 14px; background: var(--nen-chip); border: 1px solid var(--vien);
  display: flex; gap: 10px; align-items: flex-start; color: var(--muc-phu);
}
.thong-bao.canh-bao { background: var(--canh-bao-nen); border-color: var(--canh-bao-vien); color: var(--canh-bao-chu); }
.thong-bao svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thong-bao .chu { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.5; }

.hang-hai { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.can-cu { flex: 1 1 280px; min-width: 0; }
.can-cu summary { min-height: 56px; padding: 16px 20px; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: var(--bo-the); }
.can-cu summary:hover { background: var(--nen); }
.than-can-cu { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--muc-phu); }
.than-can-cu strong { font-weight: 600; color: var(--muc); }
.than-can-cu .chua-doc {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--nen-chip);
  border: 1px solid var(--vien-dam); font-size: 13px; font-weight: 600; color: var(--muc-phu); white-space: nowrap;
}
.than-can-cu .gioi-thieu { padding: 10px 12px; border-radius: 12px; background: var(--nen-chip); font-size: 14.5px; }

.the-app {
  flex: 1 1 280px; padding: 16px 20px; border-radius: var(--bo-the);
  background: var(--nhan-nhat); border: 1px solid var(--nhan-vien);
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--muc);
}
.the-app:hover { border-color: var(--nhan); }
.the-app .tieu { font-size: 16px; font-weight: 600; }
.the-app .phu { font-size: 15px; color: var(--muc-xam); line-height: 1.5; }
.the-app .lien-ket { font-size: 15px; font-weight: 600; color: var(--nhan); }

.luu-y { font-size: 15px; color: var(--muc-mo); line-height: 1.5; }

.chan-trang a { display: inline-block; padding: 10px 2px; }

/* ---------- điện thoại ---------- */

@media (max-width: 899px) {
  .thuong-hieu small { display: none; }
  .thuong-hieu b { font-size: 20px; }
  /* Bản vẽ điện thoại đi thẳng vào ô nhập; tiêu đề trang chỉ còn cho trình đọc màn hình. */
  .tieu-de-trang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .hai-cot > .cot-nhap, .hai-cot > .ket-qua { gap: 14px; }
  .the-tien { padding: 18px; }
  .o-tien-lon { padding-bottom: 6px; }
  .o-tien-lon input { font-size: 34px; letter-spacing: -1px; }
  .o-tien-lon .don-vi { font-size: 20px; }
  .nhanh { flex-wrap: nowrap; gap: 6px; }
  .nhanh button { flex: 1 1 0; padding: 0 4px; }
  .the-tuy-chon { padding: 4px 18px; }
  .dong-chon { padding: 14px 0; gap: 10px; }
  .dong-chon.dung { gap: 8px; }
  .buoc { gap: 10px; }

  .the-toi, .the-toi .khoi { gap: 14px; }
  .the-toi { padding: 22px 20px; }
  .so-lon b { font-size: 44px; letter-spacing: -1.6px; }
  .so-lon.dai b { font-size: 34px; letter-spacing: -1px; }
  .so-lon span { font-size: 22px; }
  .thanh { height: 9px; }
  .chu-giai { justify-content: space-between; gap: 8px; }
  .chu-giai > span { gap: 6px; }
  .cham { width: 9px; height: 9px; }

  .the-thuong .khoang { font-size: 22px; }
  .bang-tach { padding: 6px 18px; }
  .bang-tach .dong-chinh { padding: 13px 0; }
  .the-app { padding: 16px 18px; }
}