/* Mục "Soạn bài" của Bảng của thầy (thay-soan-bai.js): danh sách buổi để vào soạn / mở lại giáo án.
   Nằm trong khối xanh .thay-o nên mỗi buổi là một thẻ trắng lấy lại token chữ gốc (như .tb-muc, .ts-the). */

.sb-khoi { margin: 12px 0 0; }
.sb-khoi > summary {
  padding: 8px 0; font: 800 .95rem/1.3 var(--chu-to); color: var(--muc); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.sb-dem {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--nen2); color: var(--muc2); font: 800 .8rem/1 var(--chu);
}
.sb-ds { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.sb-ca {
  --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);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 12px; border: 1.5px solid var(--vien); border-radius: 14px; background: var(--the); color: var(--muc);
}
.sb-ca.hom-nay { border-color: var(--cta); box-shadow: inset 0 0 0 1px var(--cta); }
.sb-ca.nghi { background: var(--nen2-t); color: var(--mo); }
.sb-ngay {
  flex: none; display: grid; place-items: center; width: 58px; padding: 4px 0; border-radius: 10px;
  background: var(--nen2); line-height: 1.1;
}
.sb-ngay b { font: 900 1.05rem/1.1 var(--chu-to); font-variant-numeric: tabular-nums; }
.sb-ngay span { font-size: .72rem; font-weight: 700; color: var(--mo); }
.sb-chinh { flex: 1 1 12rem; min-width: 0; }
.sb-nhom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: .96rem; }
.sb-nhom span { color: var(--mo); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.sb-hom-nay { font-style: normal; font-weight: 800; font-size: .76rem; color: var(--cta-dam); text-transform: uppercase; letter-spacing: .04em; }
.sb-ban { margin: 2px 0 0; font-size: .85rem; font-weight: 600; color: var(--mo); overflow-wrap: anywhere; }
.sb-tt {
  flex: none; padding: 4px 10px; border-radius: 999px; background: var(--nen2);
  font: 800 .78rem/1.5 var(--chu); color: var(--muc2); white-space: nowrap;
}
.sb-tt[data-tt="chua"] { background: #fff1e0; color: var(--cta-dam); }
.sb-tt[data-tt="nhap"] { background: #fff8db; color: #7a5c00; }
.sb-tt[data-tt="xong"] { background: #e7f5ea; color: #1d6a33; }
.sb-tt[data-tt="da-day"] { background: transparent; color: var(--mo); box-shadow: inset 0 0 0 1.5px var(--vien); }
.sb-mo {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--muc2); font-weight: 800;
}
.sb-mo:hover { border-color: var(--nhan); color: var(--muc); }

/* điện thoại: ngày và trạng thái một hàng, nút mở chiếm trọn hàng dưới cho dễ bấm */
@media (max-width: 520px) {
  .sb-ca { gap: 8px; }
  .sb-chinh { flex-basis: 8rem; }
  .sb-mo { flex: 1 1 100%; justify-content: center; }
}