/* Bảng lớp học (/cong-cu/bang-lop). Tệp này nạp ở mọi trang → mọi lớp đều có tiền tố bl-. Ưu tiên màn chiếu 1280–1920px. */
.chinh:has(> .bl) { max-width: 1480px; }
.bl { --bl-to: clamp(2rem, 5vw, 4.5rem); }
.bl:fullscreen { background: var(--bg); padding: 20px clamp(16px, 3vw, 40px); overflow: auto; }
.bl:fullscreen .bl-p { min-height: calc(100vh - 150px); }
.bl-an { display: none; }
.bl-giua { justify-content: center; text-align: center; }
.bl-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.bl-dau h1 { margin: 0; }
.bl-dau__phu { margin: 2px 0 0; }
.bl-dau__phai { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bl-chon-lop { min-width: 220px; }

/* Thanh tab */
.bl-tab { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.bl-tab [role="tab"] { flex: none; min-height: 46px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the);
  color: var(--chu); font: inherit; font-weight: 700; cursor: pointer; }
.bl-tab [role="tab"]:hover { border-color: var(--c-vien); color: var(--c-dam); }
.bl-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.bl-p { padding: clamp(16px, 2.2vw, 28px); }
.bl-p h2 { font-size: 1.15rem; }
.bl-nut-to { min-height: 56px; padding: 12px 34px; font-size: 1.2rem; }
.bl-nho-chon { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.bl-nho-chon input { width: 5.5em; min-height: 44px; padding: 8px 10px; border: 1px solid #cfd6d1; border-radius: var(--r-nho); font: inherit; background: #fff; }

/* Danh sách */
.bl-ds { display: grid; gap: 18px; }
@media (min-width: 900px) { .bl-ds { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.bl-ds textarea { min-height: 320px; font-size: 1.05rem; line-height: 1.6; }
.bl-ds__ben { display: flex; flex-direction: column; gap: 14px; }

/* Vòng quay */
.bl-quay { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .bl-quay { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); } }
.bl-banh { position: relative; width: min(100%, 62vh); aspect-ratio: 1; margin: 0 auto; }
.bl-kim { position: absolute; top: -6px; left: 50%; z-index: 2; width: 0; height: 0; transform: translateX(-50%);
  border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 38px solid var(--do);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.bl-quay__ben { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bl-ket { display: flex; flex-direction: column; gap: 2px; min-height: 5.5rem; }
.bl-ket strong { font-size: var(--bl-to); line-height: 1.1; color: var(--c-dam); word-break: break-word; }

/* Bốc thăm */
.bl-boc { display: flex; flex-direction: column; gap: 16px; }
.bl-boc__o { min-height: 40vh; display: grid; place-items: center; text-align: center; padding: 20px; border-radius: var(--r);
  background: var(--c-dam); color: #fff; font-size: clamp(2.4rem, 7vw, 6.5rem); font-weight: 900; line-height: 1.15; word-break: break-word; }
.bl-boc__o.bl-nhieu { font-size: clamp(1.8rem, 4.5vw, 4rem); }
.bl-boc__o.bl-dang { color: var(--nhan); }

/* Chia nhóm */
.bl-nhom-dk { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 10px; }
.bl-nhom-dk .field { width: 9rem; }
.bl-kieu { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.bl-kieu legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 6px; }
.bl-kieu label, .bl-gio-kieu label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.bl-kieu input, .bl-gio-kieu input { width: 20px; height: 20px; accent-color: var(--c); }
.bl-nhom { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bl-nhom__o { border: 2px solid var(--c-vien); border-radius: var(--r); padding: 12px 16px; background: var(--c-nhat); }
.bl-nhom__o:nth-child(even) { background: var(--nhan-nhat); border-color: #f3d49b; }
.bl-nhom__o h3 { color: var(--c-dam); margin-bottom: 6px; }
.bl-nhom__o ul { margin: 0; padding-left: 1.2em; font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 600; }

/* Đồng hồ */
.bl-gio-kieu { display: flex; gap: 18px; justify-content: center; }
.bl-so-gio { text-align: center; font-size: clamp(4.5rem, min(17vw, 28vh), 16rem); font-weight: 900; line-height: 1; color: var(--c-dam);
  font-variant-numeric: tabular-nums; margin: 10px 0 4px; letter-spacing: .02em; }
.bl-so-gio.bl-sap-het { color: var(--nhan-dam); }
.bl-so-gio.bl-het-gio { color: var(--do); animation: bl-nhay 1s steps(2) 4; }
.bl-het { text-align: center; font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 800; color: var(--do); min-height: 1.4em; margin: 0 0 8px; }
.bl-p .hang-nut + .hang-nut, .bl-mau-gio { margin-top: 10px; }
#bl-p-gio .field--check { margin-top: 14px; display: flex; }
#bl-p-gio:fullscreen { background: var(--bg); display: flex; flex-direction: column; justify-content: center; }
#bl-p-gio:fullscreen .bl-so-gio { font-size: min(30vw, 55vh); }
@keyframes bl-nhay { 50% { opacity: .25; } }

/* Xúc xắc, số */
.bl-xx { display: flex; flex-wrap: wrap; gap: 16px; min-height: 130px; align-items: center; margin: 10px 0; }
.bl-xx__vien { width: clamp(80px, 9vw, 130px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 12%;
  gap: 6%; background: #fff; border: 3px solid var(--c-dam); border-radius: 18%; box-shadow: var(--bong); }
.bl-xx__vien span { border-radius: 50%; }
.bl-xx__vien span.co { background: var(--c-dam); }
.bl-lac .bl-xx__vien { transform: rotate(8deg); }
.bl-lac .bl-xx__vien:nth-child(even) { transform: rotate(-10deg); }
.bl-tong { font-size: 1.6rem; font-weight: 800; color: var(--c-dam); min-height: 1.5em; margin: 0 0 8px; }
.bl-so { font-size: clamp(4rem, 12vw, 9rem); font-weight: 900; color: var(--c-dam); line-height: 1.1; margin: 10px 0; font-variant-numeric: tabular-nums; }
.bl-p .luoi-2 > div > .field--check { margin-top: 12px; }

@media (max-width: 640px) {
  .bl-dau__phai { width: 100%; }
  .bl-chon-lop { flex: 1; min-width: 0; }
  .bl-boc__o { min-height: 30vh; }
  .bl-nut-to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bl-so-gio.bl-het-gio { animation: none; } }