/* Sổ lớp (/cong-cu/so-lop). Tệp nạp ở mọi trang → mọi lớp có tiền tố sl-. Ưu tiên màn chiếu 1280–1920px, vẫn dùng được ở 390px. */
.chinh:has(> .sl) { max-width: 1480px; }
.sl-an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-giua { justify-content: center; text-align: center; }
.sl-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.sl-dau h1 { margin: 0; }
.sl-dau__phu { margin: 2px 0 0; }
.sl-dau__phai { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sl-chon-lop { min-width: 260px; }
.sl-nhan-tep { cursor: pointer; }
input.sl-an-chu:focus-visible + .sl-nhan-tep, .sl-nhan-tep:focus-within { outline: 3px solid var(--c-vien); }

/* Nhắc sao lưu */
.sl-nhac { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.sl-nhac > span:first-child { flex: 1 1 320px; }

/* Tab */
.sl-tab { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.sl-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; }
.sl-tab [role="tab"]:hover { border-color: var(--c-vien); color: var(--c-dam); }
.sl-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.sl-p { padding: clamp(16px, 2.2vw, 28px); }
.sl-p h2 { font-size: 1.1rem; }
.sl-thanh { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
.sl-thanh__nut { margin-left: auto; }
.sl-f-mon { min-width: 220px; flex: 0 1 280px; }
.sl-f-hk { min-width: 150px; flex: 0 1 200px; }
.sl-f-buoc { width: 140px; }
.sl-f-so { width: 120px; }
.sl-f-tk { min-width: 200px; }
.sl-nut-to { min-height: 56px; padding: 12px 36px; font-size: 1.2rem; }
.sl-thap { color: var(--do) !important; font-weight: 800; }

/* Bảng chung */
.sl-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: var(--r-nho); margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.sl-bang { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sl-bang th, .sl-bang td { border-bottom: 1px solid var(--vien); padding: 4px 6px; text-align: left; vertical-align: middle; }
.sl-bang thead th { background: var(--c-nhat); color: var(--c-dam); font-size: .8125rem; font-weight: 800; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.sl-bang tbody tr:last-child > * { border-bottom: 0; }
.sl-c-stt { width: 3.2em; text-align: center !important; color: var(--phu); font-variant-numeric: tabular-nums; }
.sl-c-ns { width: 9.5em; } .sl-c-to { width: 5em; } .sl-c-xoa { width: 48px; }
.sl-o { width: 100%; min-height: 38px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; font: inherit; color: var(--chu); background: transparent; }
.sl-o:hover { border-color: var(--vien); }
.sl-o:focus { border-color: var(--c); background: #fff; outline: 3px solid var(--c-nhat); }
.sl-trong { text-align: center !important; color: var(--phu); padding: 22px 10px !important; }
.sl-xoa-hs { width: 36px; height: 36px; font-size: 1.3rem; color: var(--phu); }
.sl-xoa-hs:hover { color: var(--do); background: var(--do-nhat); }

/* 1. Danh sách */
.sl-lop-tt { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.sl-lop-tt .field { flex: 1 1 220px; max-width: 340px; }
.sl-lop-tt__nut { margin-left: auto; }
#sl-mau-bao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
#sl-mau-bao[hidden] { display: none; }
.sl-ds { display: grid; gap: 20px; }
@media (min-width: 1000px) { .sl-ds { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } }
.sl-ds__bang .sl-cuon { max-height: 62vh; overflow-y: auto; }
.sl-ds__ben { background: var(--bg); border-radius: var(--r); padding: 16px; align-self: start; }
.sl-ds__ben textarea { min-height: 150px; font-size: .9375rem; }
.sl-ds__ben .hang-nut { margin: 10px 0; }
#sl-ds-bao:empty, #sl-diem-bao:empty { display: none; }
#sl-ds-bao .bao, #sl-diem-bao .bao { margin: 10px 0 0; }

/* 2. Sổ điểm */
.sl-ghi-chu { margin-bottom: 12px; }
.sl-mon-form { background: var(--bg); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.sl-mon-form[hidden] { display: none; }
.sl-mon-form__luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 12px; }
.sl-mon-form .field[hidden], .sl-mon-form .field__hint[hidden], .sl-f-buoc[hidden], #sl-diem-co[hidden], #sl-diem-rong[hidden] { display: none; }
.sl-meo { margin-bottom: 8px; }
.sl-cuon--diem { max-height: 70vh; overflow: auto; }
.sl-bang--diem { width: auto; min-width: 100%; }
.sl-bang--diem thead th { text-align: center; line-height: 1.25; padding: 6px 4px; }
.sl-bang--diem thead small { font-weight: 600; color: var(--phu); }
.sl-bang--diem .sl-c-ten { position: sticky; left: 0; z-index: 2; background: var(--the); min-width: 190px; max-width: 260px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--vien); }
.sl-bang--diem thead .sl-c-ten { background: var(--c-nhat); z-index: 3; text-align: left; }
.sl-bang--diem tbody tr:nth-child(even) > * { background: #fafbf9; }
.sl-bang--diem tbody tr:hover > * { background: var(--c-nhat); }
.sl-bang--diem td { padding: 2px 3px; text-align: center; }
.sl-od { width: 4.4em; min-height: 38px; padding: 4px; text-align: center; border: 1px solid #dfe4df; border-radius: 7px; font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums; background: #fff; color: var(--chu); }
.sl-od:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.sl-od.sl-thap { background: var(--do-nhat); border-color: #efc2bd; }
.sl-od.sl-loi { border-color: var(--do); outline: 3px solid #f6c9c3; background: #fff; color: var(--do); }
.sl-c-tinh { font-weight: 800; color: var(--c-dam); background: var(--nhan-nhat) !important; min-width: 4.8em; font-variant-numeric: tabular-nums; }
th.sl-c-tinh { color: var(--nhan-dam) !important; }
.sl-diem-bao { min-height: 0; }
.sl-tk { margin-top: 18px; border-top: 1px solid var(--vien); padding-top: 14px; }
.sl-tk__dau { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.sl-tk__dau h2 { margin: 0; }
.sl-tk__than { display: grid; gap: 16px; }
@media (min-width: 900px) { .sl-tk__than { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); align-items: start; } }
.sl-tk__so { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.sl-tk__so li { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 8px 12px; display: flex; flex-direction: column; }
.sl-tk__so b { font-size: 1.4rem; color: var(--c-dam); line-height: 1.2; }
.sl-tk__so span { font-size: .8125rem; color: var(--phu); }
.sl-tk__so .sl-tk--thap b { color: var(--do); }
.sl-tk__so .sl-tk--nhan { background: var(--nhan-nhat); border-color: #f3d49b; }
.sl-tk__so .sl-tk--nhan b { color: var(--nhan-dam); }
.sl-tk__so .sl-tk--xam b { color: var(--phu); }
.sl-tk__bd { position: relative; height: 260px; }

/* 3. Nhận xét */
.sl-nx { display: grid; gap: 18px; }
@media (min-width: 1000px) { .sl-nx { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; } }
.sl-nx__ds { display: flex; flex-direction: column; gap: 6px; }
.sl-nx__muc { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 4.5em; gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--r-nho);
  border: 1px solid var(--vien); background: var(--the); }
.sl-nx__muc.sl-dang { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-nhat); }
.sl-nx__muc label { font-weight: 600; padding-top: 8px; display: flex; gap: 8px; }
.sl-nx__stt { color: var(--phu); font-weight: 400; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.sl-nx__muc textarea { width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid #cfd6d1; border-radius: var(--r-nho); font: inherit; resize: vertical; }
.sl-nx__muc textarea:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.sl-nx__dem { font-size: .8125rem; color: var(--phu); padding-top: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.sl-nx__dem.sl-qua { color: var(--do); font-weight: 700; }
.sl-nx__kho { position: sticky; top: 72px; background: var(--bg); border-radius: var(--r); padding: 16px; }
.sl-nx__dang { font-weight: 700; color: var(--c-dam); min-height: 1.5em; margin-bottom: 8px; }
.sl-kho { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.sl-kho li { display: flex; gap: 4px; align-items: stretch; }
.sl-kho__cau { flex: 1; text-align: left; min-height: 44px; padding: 8px 12px; border-radius: var(--r-nho); border: 1px solid var(--c-vien); background: #fff; color: var(--chu);
  font: inherit; font-size: .9375rem; cursor: pointer; }
.sl-kho__cau:hover { background: var(--c-nhat); border-color: var(--c); }
.sl-kho__xoa { width: 40px; height: auto; border-radius: var(--r-nho); font-size: 1.2rem; color: var(--phu); }
.sl-kho__xoa:hover { color: var(--do); background: var(--do-nhat); }

/* 4. Sơ đồ chỗ ngồi */
.sl-cho-nut { margin-bottom: 10px; }
.sl-so-do { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r); padding: 14px; overflow-x: auto; }
.sl-so-do__tieu { font-weight: 800; color: var(--c-dam); margin: 0 0 10px; text-align: center; }
.sl-buc { width: min(360px, 60%); margin: 0 auto 14px; padding: 8px; text-align: center; font-weight: 800; letter-spacing: .04em; color: var(--nhan-dam);
  background: var(--nhan-nhat); border: 2px solid #f3d49b; border-radius: var(--r-nho); }
.sl-buc[hidden] { display: none; }
#sl-buc-duoi { margin: 14px auto 0; }
.sl-lop-hoc { display: grid; grid-template-columns: repeat(var(--sl-day, 4), minmax(max-content, 1fr)); gap: 12px clamp(14px, 3vw, 44px); min-width: max-content; }
.sl-day { display: flex; flex-direction: column; gap: 10px; }
.sl-day__ten { text-align: center; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--phu); }
.sl-ban { position: relative; display: grid; grid-template-columns: repeat(var(--sl-cho, 2), minmax(92px, 1fr)); gap: 4px; padding: 16px 6px 6px; border-radius: 10px;
  background: #efe7d6; border: 1px solid #dccfb3; }
.sl-ban__so { position: absolute; top: 1px; left: 8px; font-size: .6875rem; font-weight: 700; color: #7a6a47; }
.sl-cho { min-height: 50px; display: flex; }
.sl-cho > * { flex: 1; }
.sl-cho__trong { border: 2px dashed #cdbf9f; border-radius: 8px; background: rgba(255,255,255,.5); cursor: pointer; min-height: 50px; }
.sl-cho__trong:hover { border-color: var(--c); background: var(--c-nhat); }
.sl-cho--toi > * { outline: 3px solid var(--c); outline-offset: 1px; }
.sl-hs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 50px; padding: 4px 6px; border-radius: 8px;
  border: 1px solid var(--c-vien); border-left: 5px solid var(--c); background: #fff; color: var(--chu); font: inherit; cursor: grab; touch-action: none; user-select: none;
  line-height: 1.15; text-align: center; }
.sl-hs:hover { background: var(--c-nhat); }
.sl-hs__ten { font-weight: 800; font-size: 1rem; }
.sl-hs__ho { font-size: .6875rem; color: var(--phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sl-hs.sl-chon { background: var(--nhan-nhat); border-color: var(--nhan-dam); box-shadow: 0 0 0 3px #f3d49b; }
.sl-hs.sl-dang-keo { opacity: .35; }
.sl-bong { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,.25); min-width: 96px; }
.sl-to-1 { border-left-color: #1d4f91; } .sl-to-2 { border-left-color: #c99434; } .sl-to-3 { border-left-color: #1f7a3a; }
.sl-to-4 { border-left-color: #8a3fa0; } .sl-to-5 { border-left-color: #b42318; } .sl-to-0 { border-left-color: #2b7a8c; }
.sl-cho-ngoai { margin-top: 16px; }
.sl-cho-ngoai__ds { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; padding: 10px; border: 2px dashed var(--vien); border-radius: var(--r); background: var(--bg); }
.sl-cho-ngoai__ds .sl-hs { min-width: 110px; }
.sl-cho-ngoai__ds.sl-cho--toi { border-color: var(--c); }
.sl-cho-ngoai__ds.sl-cho--toi > * { outline: 0; }
.sl-so-do:fullscreen { background: var(--bg); padding: 24px clamp(16px, 3vw, 48px); overflow: auto; display: flex; flex-direction: column; justify-content: center; }
.sl-so-do:fullscreen .sl-so-do__tieu { font-size: 1.5rem; }
.sl-so-do:fullscreen .sl-ban { grid-template-columns: repeat(var(--sl-cho, 2), minmax(130px, 1fr)); }
.sl-so-do:fullscreen .sl-hs { min-height: 64px; }
.sl-so-do:fullscreen .sl-hs__ten { font-size: 1.35rem; }
.sl-so-do:fullscreen .sl-hs__ho { font-size: .875rem; }
/* In A4: so-lop.js gắn lớp sl-dang-in cho body và @page ngang khi bấm "In A4" */
@media print {
  body.sl-dang-in * { visibility: hidden !important; }
  body.sl-dang-in .demo-bar, body.sl-dang-in .dau, body.sl-dang-in .chan { display: none !important; }
  body.sl-dang-in #sl-so-do, body.sl-dang-in #sl-so-do * { visibility: visible !important; }
  body.sl-dang-in #sl-so-do { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; overflow: visible; }
  body.sl-dang-in .sl-lop-hoc { min-width: 0; }
  body.sl-dang-in .sl-hs { border-left-width: 1px; border-color: #777; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sl-dang-in .sl-ban { background: #fff; border-color: #999; }
  body.sl-dang-in .sl-cho__trong { border-color: #bbb; }
}

/* 5. Điểm thưởng */
.sl-th { position: relative; display: grid; gap: 16px; }
@media (min-width: 1000px) { .sl-th { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); } .sl-ly-do { grid-column: 1 / -1; } }
.sl-giay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.sl-ly-do { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-ly { min-height: 42px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the); color: var(--chu); font: inherit; font-weight: 600; cursor: pointer; }
.sl-ly:hover { border-color: var(--c-vien); }
.sl-ly[aria-checked="true"] { background: var(--nhan); border-color: var(--nhan); color: var(--c-dam); font-weight: 800; }
.sl-th__luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; }
.sl-th__luoi--hs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sl-th__o { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: var(--r); background: var(--c-nhat); border: 2px solid var(--c-vien); }
.sl-th__ten { font-weight: 800; color: var(--c-dam); text-align: center; line-height: 1.2; }
.sl-th__diem { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; line-height: 1; color: var(--c-dam); font-variant-numeric: tabular-nums; }
.sl-th__nut { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; width: 100%; }
.sl-cong, .sl-tru { min-height: 56px; border-radius: var(--r-nho); font: inherit; font-size: 1.35rem; font-weight: 900; cursor: pointer; border: 2px solid; }
.sl-cong { background: var(--xanh-la); border-color: var(--xanh-la); color: #fff; }
.sl-cong:hover { background: #17602d; }
.sl-tru { background: #fff; border-color: #efc2bd; color: var(--do); }
.sl-tru:hover { background: var(--do-nhat); }
.sl-cong:disabled, .sl-tru:disabled { opacity: .4; cursor: not-allowed; }
.sl-th__luoi--hs .sl-th__o { padding: 10px 8px; }
.sl-th__luoi--hs .sl-th__ten { font-size: .9375rem; }
.sl-th__luoi--hs .sl-th__diem { font-size: 2rem; }
.sl-th__luoi--hs .sl-cong, .sl-th__luoi--hs .sl-tru { min-height: 46px; font-size: 1.1rem; }
.sl-th__xh { background: var(--bg); border-radius: var(--r); padding: 16px; align-self: start; }
.sl-xh { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-xh li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-nho); }
.sl-xh__vt { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-nhat); color: var(--c-dam); font-weight: 800; flex: none; }
.sl-xh__ten { flex: 1; min-width: 0; font-weight: 600; }
.sl-xh b { font-size: 1.2rem; color: var(--c-dam); font-variant-numeric: tabular-nums; }
.sl-xh .sl-xh--dau { border-color: #f3d49b; background: var(--nhan-nhat); }
.sl-xh .sl-xh--dau .sl-xh__vt { background: var(--nhan); }
.sl-th__nk summary, .sl-th__sua summary { cursor: pointer; font-weight: 700; color: var(--c-dam); min-height: 40px; display: flex; align-items: center; }
.sl-th__nk .ds { max-height: 260px; overflow-y: auto; }
.sl-nk { padding: 6px 0; gap: 8px; font-size: .875rem; align-items: center; }
.sl-th__sua { margin-top: 16px; }
.sl-th__sua .field { margin: 8px 0; max-width: 520px; }
#sl-th-khung:fullscreen { background: var(--bg); padding: 24px clamp(16px, 3vw, 48px); overflow: auto; align-content: start; }
#sl-th-khung:fullscreen .sl-th__ten { font-size: 1.4rem; }
#sl-th-khung:fullscreen .sl-th__diem { font-size: 4.5rem; }
#sl-th-khung:fullscreen .sl-cong, #sl-th-khung:fullscreen .sl-tru { min-height: 72px; font-size: 1.7rem; }
#sl-th-khung:fullscreen .sl-th__luoi--hs .sl-th__diem { font-size: 2.6rem; }

/* 6. Bốc thăm */
.sl-boc { display: grid; gap: 18px; }
@media (min-width: 1000px) { .sl-boc { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: start; } }
.sl-boc__chinh { display: flex; flex-direction: column; gap: 14px; }
.sl-boc__o { min-height: 42vh; display: grid; place-items: center; text-align: center; padding: 20px; border-radius: var(--r); background: var(--c-dam); color: #fff;
  font-size: clamp(2.2rem, 6vw, 6rem); font-weight: 900; line-height: 1.15; word-break: break-word; }
.sl-boc__o.sl-dang { color: var(--nhan); }
.sl-boc__chinh:fullscreen { background: var(--c-dam); padding: 24px clamp(16px, 4vw, 60px); justify-content: center; }
.sl-boc__chinh:fullscreen .sl-boc__o { min-height: 70vh; font-size: clamp(3rem, 9vw, 9rem); }
.sl-boc__chinh:fullscreen .nut--vien { color: #fff; border-color: rgba(255,255,255,.55); }
.sl-boc__chinh:fullscreen .nut:not(.nut--vien) { background: var(--nhan); border-color: var(--nhan); color: var(--c-dam); }
.sl-boc__chinh:fullscreen .phu { color: #d9e3f2; }
.sl-boc__ben { background: var(--bg); border-radius: var(--r); padding: 16px; }
.sl-boc__ds { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 40vh; overflow-y: auto; }
.sl-boc__ds li { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.sl-boc__ds input { width: 20px; height: 20px; accent-color: var(--do); flex: none; }
.sl-boc__ds label { flex: 1; cursor: pointer; }
.sl-boc__ds input:checked + label { text-decoration: line-through; color: var(--phu); }
.sl-boc__ls { margin: 0 0 12px; padding-left: 1.6em; max-height: 30vh; overflow-y: auto; }
.sl-boc__ls li { padding: 2px 0; }

@media (max-width: 640px) {
  .sl-dau__phai { width: 100%; }
  .sl-chon-lop { flex: 1; min-width: 0; }
  .sl-thanh > .field { flex: 1 1 140px; min-width: 0; width: auto; }
  .sl-thanh__nut { margin-left: 0; }
  .sl-nhac .hang-nut .nut { flex: 1 1 auto; }
  .sl-bang--diem .sl-c-ten { min-width: 128px; max-width: 150px; font-size: .875rem; }
  .sl-bang--diem .sl-c-stt { display: none; }
  .sl-od { width: 3.6em; }
  .sl-nx__muc { grid-template-columns: 1fr; gap: 4px; }
  .sl-nx__muc label { padding-top: 0; }
  .sl-nx__dem { padding-top: 0; }
  .sl-nx__kho { position: static; order: -1; padding: 12px; }
  .sl-kho { max-height: 200px; }
  .sl-ban { grid-template-columns: repeat(var(--sl-cho, 2), minmax(72px, 1fr)); }
  .sl-th__luoi { grid-template-columns: 1fr 1fr; }
  .sl-th__luoi--hs { grid-template-columns: 1fr 1fr; }
  .sl-tk__so { grid-template-columns: 1fr 1fr; }
  #sl-bang-hs { min-width: 470px; }
  #sl-bang-hs td:nth-child(2) { min-width: 180px; }
  .sl-c-ns { width: 7.5em; }
  .sl-c-to { width: 3.6em; }
}
@media (prefers-reduced-motion: reduce) { .sl-bong { transform: translate(-50%, -50%); } }