/* Mục "Tiến bộ" của Bảng của thầy (thay-tien-bo.js). Trong khối xanh .thay-o, nên nền thẻ là --the và chữ lấy lại
   token gốc qua lớp .tb-muc (cùng cách be.css làm cho .the-khung trong .o-trang).
   Bốn chỉ số xếp dọc, mỗi chỉ số một thẻ trắng có số thứ tự tròn — đọc từ trên xuống như một bản nhận xét, không
   phải lưới thẻ bằng nhau: bốn chỉ số KHÔNG ngang hàng về độ dài và không gộp thành điểm tổng. */

.tb-chon { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tb-chon .nut-nho { min-height: 44px; padding: 0 14px; font-size: .92rem; font-weight: 800; }
.tb-chon .nut-nho.dang { background: var(--nhan); border-color: var(--nhan-dam); color: var(--nhan-chu); }
.tb-chon .trong { width: 100%; }

/* minmax(0, 1fr): không có nó, ô lưới lấy chiều rộng NỘI TẠI của con (SVG biểu đồ 520px, bảng motif) và
   đẩy cả trang tràn ngang ở khổ 375. */
.tb-be { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tb-muc {
  --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);
  min-width: 0; padding: 16px 18px 18px; border-radius: 16px; background: var(--the); color: var(--muc);
  box-shadow: inset 0 -4px 0 var(--vien);
}
.tb-muc h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 10px;
  font: 900 1.1rem/1.25 var(--chu-to); color: var(--muc);
}
.tb-muc h3 small { font: 700 .74rem/1.3 var(--chu); letter-spacing: .04em; color: var(--mo); }
.tb-so-muc {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--nhan-nhat); color: var(--nhan-dam); font: 900 .88rem/1 var(--chu-to);
}
.tb-phu { margin: 16px 0 8px; font: 800 .98rem/1.3 var(--chu-to); color: var(--muc2); }
.tb-muc .trong { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--nen2); color: var(--mo); font-weight: 600; }
.tb-ghi { margin: 10px 0 0; max-width: 72ch; color: var(--mo); font-size: .86rem; font-weight: 600; text-wrap: pretty; }
.tb-muc .bang-cuon { margin: 0; border: 1px solid var(--vien); box-shadow: none; }

/* con số chính của chỉ số 1 */
.tb-so { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.tb-so b { font: 900 2rem/1 var(--chu-to); font-variant-numeric: tabular-nums; }
.tb-so em { font-style: normal; font-weight: 800; color: var(--mo); font-variant-numeric: tabular-nums; }
.tb-xu { font-size: .9rem; font-weight: 800; }
.tb-xu.tien_bo { color: var(--tot); }
.tb-xu.giam { color: var(--xau); }
.tb-xu.on_dinh { color: var(--mo); }

/* biểu đồ rating: đường đậm, dải sai số mờ cùng màu nhấn */
.tb-do { margin: 4px 0 2px; overflow-x: auto; overscroll-behavior-x: contain; }
.tb-bieu-do { display: block; }
.tb-luoi { stroke: var(--vien); stroke-width: 1; }
.tb-nhan { fill: var(--mo); font: 700 12px var(--chu); }   /* 12px trong viewBox 520 — vẽ ra ≥ 12px thật */
.tb-dai { fill: var(--nhan); opacity: .16; }
.tb-duong { fill: none; stroke: var(--nhan); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tb-diem { fill: var(--the); stroke: var(--nhan-dam); stroke-width: 2; }

/* nhãn kết luận: chữ + màu, không chỉ màu (một người không phân biệt màu vẫn đọc được) */
.tb-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--nen2);
  font: 800 .8rem/1.5 var(--chu); color: var(--muc2); white-space: nowrap;
}
.tb-chip.tot { background: #e7f5ea; color: #1d6a33; }
.tb-chip.xau { background: #fde9ee; color: #9c1f41; }
.tb-chip.mo { background: transparent; color: var(--mo); box-shadow: inset 0 0 0 1.5px var(--vien); }

.tb-ds { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tb-ds li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 9px 12px; border-radius: 12px; background: var(--nen2); font-weight: 600;
}
.tb-ds li b { font-variant-numeric: tabular-nums; }
.tb-bang td.so, .tb-bang th { font-variant-numeric: tabular-nums; }
.tb-bang td em { font-style: normal; color: var(--mo); font-weight: 600; }
.tb-bang td.tb-xau { color: var(--xau); font-weight: 800; }

/* danh sách ván trong sổ biên bản */
.tb-van { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tb-van li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 10px 8px 14px; border: 1.5px solid var(--vien); border-radius: 14px; background: var(--the);
}
.tb-van-ten { flex: 1 1 16rem; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tb-van .nut-nho { text-decoration: none; display: inline-flex; align-items: center; color: var(--muc2); }
.tb-van [data-xoa-van] { color: var(--xau); }

/* đánh giá của thầy: ô chữ dài, lưu bằng nút bên dưới */
.tb-dg-form { display: grid; gap: 8px; }
.tb-dg-form textarea {
  padding: 10px 12px; border: 2px solid var(--vien); border-radius: 12px; background: var(--the); color: var(--muc);
  font: 600 .98rem/1.55 var(--chu); resize: vertical;
}
.tb-dg-form textarea:focus { outline: 0; border-color: var(--nhan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nhan) 18%, transparent); }
.tb-dg-duoi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb-dg-bao { font-weight: 700; font-size: .9rem; color: var(--muc2); }
.tb-dg-bao[data-loai="tot"] { color: var(--tot); }
.tb-dg-bao[data-loai="loi"] { color: var(--xau); }

@media (max-width: 520px) {
  .tb-muc { padding: 14px 14px 16px; }
  .tb-so b { font-size: 1.7rem; }
  .tb-van li { gap: 6px 8px; }
}