/* Phần "Tích sao" của mục Học sinh (thay-tich-sao.js). Nằm trong khối xanh .thay-o, nên mỗi thẻ bạn là thẻ trắng
   lấy lại token chữ gốc (cùng cách be.css làm cho .the-khung trong .o-trang).
   Bố cục theo thẻ giấy thật: 20 ô sao thành hàng, hộp quà ở cuối — thầy nhìn thẻ trên màn hình và thẻ trong tay là
   một. Mỗi lý do một MÀU (sao-mau.js) và luôn kèm CHỮ, không bao giờ chỉ có màu. */

.ts-dau { display: grid; gap: 10px; }
.ts-in { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-in .nut-nho { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muc2); }

/* chú giải màu: ngôi sao tô màu + tên lý do + tên bút thầy dùng trên thẻ giấy */
.ts-chu-giai { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ts-cg { display: inline-flex; align-items: baseline; gap: 4px; font-size: .88rem; font-weight: 700; }
.ts-cg em { font-style: normal; font-weight: 600; color: var(--mo); }
.ts-sao { font-size: 1.05em; line-height: 1; }

/* dải bốn con số của tháng */
.ts-dai { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ts-o {
  --muc: var(--muc-t); --mo: var(--mo-t);
  padding: 10px 14px; border-radius: 14px; background: var(--the); color: var(--muc);
  box-shadow: inset 0 -4px 0 var(--vien-t);
}
.ts-o b { display: block; font: 900 1.6rem/1.1 var(--chu-to); font-variant-numeric: tabular-nums; }
.ts-o span { font-size: .82rem; font-weight: 700; color: var(--mo); }
.ts-o[data-loai="cho"] b { color: var(--cta-dam); }

.ts-bao { margin: 10px 0; font-weight: 700; }
.ts-bao:empty { display: none; }
.ts-bao[data-loai="loi"] { color: #ffc9d6; }

/* thẻ từng bạn */
.ts-the-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 14px 0 0; }
.ts-the {
  --muc: var(--muc-t); --muc2: var(--muc2-t); --mo: var(--mo-t); --vien: var(--vien-t); --nen2: var(--nen2-t);
  --nhan: var(--nhan-t); --nhan-dam: var(--nhan-dam-t); --nhan-chu: var(--nhan-chu-t); --nhan-nhat: var(--nhan-nhat-t);
  --tot: var(--tot-t); --xau: var(--xau-t);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start;
  padding: 14px 16px 16px; border-radius: 16px;
  background: var(--the); color: var(--muc); box-shadow: inset 0 -4px 0 var(--vien);
}
.ts-the h4 { margin: 0; font: 900 1.05rem/1.2 var(--chu-to); }

/* tiến độ tới hộp quà: 20 ô như thẻ giấy */
.ts-tien-do { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* 20 ô như thẻ giấy — chỉ để NHÌN. Xoá sao gắn nhầm bằng nút ✕ ở hàng "sao ngày …" hoặc nút Xoá trong sổ:
   ô 26px quá nhỏ để làm nút xoá dữ liệu (vùng chạm tối thiểu 44px, và dễ bấm nhầm). */
.ts-o-sao {
  display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--vien);
  border-radius: 7px; background: var(--the); color: var(--mo); font: 700 .72rem/1 var(--chu);
}
.ts-o-sao.co { border-color: currentColor; font-size: 1.05rem; }
.ts-hop { margin-left: 4px; font-size: 1.3rem; line-height: 1; }
.ts-dem { margin: 0; font-size: .9rem; font-weight: 600; color: var(--muc2); }
.ts-dem b { font-weight: 900; }
.ts-huy-hieu { margin: 0; font-weight: 800; color: var(--cta-dam); }
.ts-mo { color: var(--mo); font-size: .88rem; font-weight: 600; }

/* công cụ thưởng sao */
.ts-thuong { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--nen2); }
.ts-thuong-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ts-thuong-dau b { font: 800 .92rem/1 var(--chu-to); }
.ts-thuong input[type="date"] {
  min-height: 44px; padding: 0 10px; border: 1.5px solid var(--vien); border-radius: 10px;
  background: var(--the); color: var(--muc); font: 700 .88rem var(--chu);
}
.ts-nut-hang { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-nut { gap: 5px; display: inline-flex; align-items: center; }
.ts-hom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ts-mot {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 10px; border-radius: 999px;
  background: var(--the); box-shadow: inset 0 0 0 1.5px var(--vien); font-size: .85rem; font-weight: 700;
}
.ts-xoa {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -9px -9px -9px 0; border: 0; border-radius: 50%;
  background: none; color: var(--mo); font-size: .9rem; line-height: 1; cursor: pointer;
}
.ts-xoa:hover { background: var(--nen2); color: var(--xau); }
.ts-hoan { border-color: var(--cta); color: var(--cta-dam); }

/* mục tiêu tháng */
.ts-muc-tieu { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.ts-muc-tieu input, .ts-muc-tieu select {
  min-height: 44px; padding: 0 10px; border: 1.5px solid var(--vien); border-radius: 10px;
  background: var(--the); color: var(--muc); font: 600 .9rem var(--chu);
}
.ts-muc-tieu input { grid-column: 1 / -1; }
.ts-muc-tieu input:focus, .ts-muc-tieu select:focus { outline: 0; border-color: var(--nhan); }

/* sổ chi tiết */
.ts-so summary { padding: 6px 0; font-weight: 800; font-size: .9rem; cursor: pointer; color: var(--muc2); }
.ts-so ul { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; max-height: 40vh; overflow: auto; }
.ts-so li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--nen2); font-size: .86rem; font-weight: 600; }
.ts-so li .nut-nho { min-height: 44px; margin-left: auto; padding: 0 10px; font-size: .78rem; }

/* ý thức học tập */
.ts-y-thuc { margin: 18px 0 0; }
.ts-tieu { margin: 0 0 8px; font: 900 1.05rem/1.2 var(--chu-to); }
.ts-bang th { white-space: nowrap; }
.ts-bang td.so { font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .ts-muc-tieu { grid-template-columns: 1fr; }
  .ts-the { padding: 12px 12px 14px; }
}