/* Bảng của thầy (public/thay.js). Trang làm việc của người lớn: thẻ trắng trên nền pastel của trang, chữ tối, nhấn
   bằng màu chủ đề (--nhan) và hai màu nghĩa: cam (--cta) = việc chờ thầy làm, đỏ (--xau) = cảnh báo gian lận.
   Bảng học sinh / bảng ván giữ kiểu .bang-thay ở be.css (cuộn ngang trong .bang-cuon trên điện thoại). */

.man-thay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 40px; }
/* thầy cũng bấm trên điện thoại: mọi nút ≥ 44px */
.man-thay .nut-nho, .hop-ghi-chu .nut-nho { min-height: 44px; }
.man-thay[hidden] { display: none; }
.man-thay > .nut-phu { justify-self: start; }
.thay-dau { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.thay-dau h1 { margin: 0; font: 900 clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem)/1.1 var(--chu-to); color: var(--muc); }
.thay-giai { margin: 6px 0 0; max-width: 62ch; color: var(--muc2); font-weight: 600; font-size: .95rem; text-wrap: pretty; }
.thay-o .thay-giai { margin: -4px 0 12px; color: var(--mo); font-size: .9rem; }

/* ba con số đầu trang */
.thay-so { display: flex; gap: 10px; margin: 0; }
.thay-so > div { min-width: 104px; padding: 10px 14px; border-radius: 16px; background: var(--the); box-shadow: var(--bong); }
.thay-so dt { font-size: .75rem; font-weight: 800; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; }
.thay-so dd { margin: 2px 0 0; font: 900 1.8rem/1 var(--chu-to); font-variant-numeric: tabular-nums; color: var(--muc); }
.thay-so .can[data-muc="cham"] { background: color-mix(in srgb, var(--cta) 12%, var(--the)); }
.thay-so .can[data-muc="cham"] dd { color: var(--cta-dam); }
.thay-so .can[data-muc="canh"] { background: color-mix(in srgb, var(--xau) 10%, var(--the)); }
.thay-so .can[data-muc="canh"] dd { color: var(--xau); }

/* ô các mục: trong trang (cuộn tới) và ngoài (Dashboard, tab mới) */
.thay-mo-dun, .thay-ngoai { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.o-mo-dun {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 14px; text-align: left;
  border: 2px solid var(--vien); border-bottom-width: 5px; border-radius: 16px; background: var(--the); color: var(--muc);
  font: inherit; cursor: pointer; text-decoration: none; transition: border-color .15s, transform .12s ease;
}
.o-mo-dun:hover { border-color: var(--nhan); }
.o-mo-dun:active { transform: translateY(2px); border-bottom-width: 3px; margin-bottom: 2px; }
.o-mo-dun:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.o-mo-dun img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.o-mo-dun > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-mo-dun b { font: 900 1.02rem/1.15 var(--chu-to); }
.o-mo-dun small { font-size: .8rem; font-weight: 600; color: var(--mo); line-height: 1.25; }
.o-mo-dun .dem {
  position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center;
  border-radius: 999px; background: var(--cta); color: #fff; font: 900 .85rem/1 var(--chu-to); font-style: normal; box-shadow: 0 2px 0 var(--cta-dam);
}
.o-mo-dun[data-den="t-canh"] .dem { background: var(--xau); box-shadow: 0 2px 0 color-mix(in srgb, var(--xau) 60%, #000); }
.o-mo-dun .dem[hidden] { display: none; }
.thay-ngoai-tieu-de { margin: 6px 0 -8px; font: 900 .8rem/1 var(--chu-to); color: var(--muc2); text-transform: uppercase; letter-spacing: .06em; }
.o-mo-dun.ngoai { background: color-mix(in srgb, var(--nhan-nhat) 55%, var(--the)); border-style: solid; }
.mui-ngoai { flex: none; margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--mo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* các khối nội dung */
.thay-o { padding: 18px 20px 20px; border-radius: var(--bo); background: var(--the); box-shadow: var(--bong); scroll-margin-top: 84px; }
.thay-o:focus { outline: none; }
.thay-o:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.thay-o h2 { margin: 0 0 10px; font: 900 1.3rem/1.2 var(--chu-to); color: var(--muc); }
.thay-o .bang-cuon { margin: 0; box-shadow: none; border: 1px solid var(--vien); }
.thay-o .trong { margin: 0; padding: 14px; border-radius: 12px; background: var(--nen2); color: var(--mo); font-weight: 600; }
#t-canh.co { border-top: 6px solid var(--xau); }

/* cảnh báo */
#t-canh .thay-noi { display: grid; gap: 12px; }
.the-canh { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--vien); border-left: 6px solid var(--m4); }
.the-canh[data-muc="1"] { border-left-color: var(--m3); }
.the-canh[data-muc="3"] { border-left-color: var(--xau); background: color-mix(in srgb, var(--xau) 5%, var(--the)); }
.the-canh header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.the-canh header b { font: 900 1.1rem/1.2 var(--chu-to); }
.muc-nhac { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--m2); color: var(--mc2); font-weight: 800; font-size: .8rem; white-space: nowrap; }
.muc-nhac[data-muc="2"], .the-canh[data-muc="2"] .muc-nhac { background: var(--m4); color: var(--mc4); }
.muc-nhac[data-muc="3"], .the-canh[data-muc="3"] .muc-nhac { background: var(--xau); color: #fff; }
.the-canh ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.the-canh li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--muc2); }
.the-canh li small { display: block; color: var(--mo); font-size: .8rem; font-weight: 600; }
.the-canh li .nut-nho, .bang-van .nut-nho, .ds-cham .nut-nho { flex: none; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--muc2); }
.the-canh > .nut-phu { justify-self: start; }

/* chấm bài */
.ds-cham { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-cham li {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(160px, 1.6fr) auto; align-items: center; gap: 8px 14px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--vien);
}
.cham-dau b { display: block; font: 900 1rem/1.2 var(--chu-to); }
.cham-dau small { color: var(--mo); font-size: .78rem; font-weight: 600; }
.cham-bai { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cham-nx { min-height: 44px; padding: 0 12px; border: 2px solid var(--vien); border-radius: 12px; font: inherit; font-size: .9rem; min-width: 0; }
.cham-nx:focus { outline: 0; border-color: var(--nhan); }
.cham-nut { display: flex; gap: 6px; }
.cham-nut .nut-nho { min-height: 44px; padding: 0 14px; font-weight: 800; }
.cham-nut .dat { border-color: var(--tot); color: var(--tot); }
.cham-nut .dat:hover { background: var(--tot); color: #fff; }

/* giao bài */
.gb-form { display: grid; gap: 8px; }
.gb-form > label, .gb-duoi label { font-weight: 800; font-size: .9rem; color: var(--muc2); }
.gb-ai { margin: 0 0 6px; padding: 0; border: 0; display: grid; gap: 8px; }
.gb-ai legend { margin-bottom: 8px; font-weight: 800; font-size: .9rem; color: var(--muc2); }
.gb-ai > .nut-nho { justify-self: start; }
.gb-chon { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--vien); border-radius: 999px; font-weight: 700; font-size: .9rem; background: var(--the); }
.chip input:checked + span { border-color: var(--nhan); background: var(--nhan); color: var(--nhan-chu); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.gb-form textarea { padding: 10px 12px; border: 2px solid var(--vien); border-radius: 12px; font: inherit; resize: vertical; }
.gb-form textarea:focus, .gb-duoi input:focus { outline: 0; border-color: var(--nhan); }
.gb-duoi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gb-duoi input { min-height: 44px; padding: 0 10px; border: 2px solid var(--vien); border-radius: 12px; font: inherit; }
.gb-duoi .nut-lon { margin-left: auto; }
.gb-bao { margin: 0; min-height: 1.3em; font-weight: 800; }
.gb-bao[data-loai="tot"] { color: var(--tot); } .gb-bao[data-loai="loi"] { color: var(--xau); }

/* bảng ván gần đây */
.bang-van tr.nghi td { background: color-mix(in srgb, var(--xau) 6%, var(--the)); }
.bang-van .co-nghi { color: var(--xau) !important; font-weight: 800; }
.bang-thay .mo { color: var(--mo); }

/* hộp ghi chú riêng */
.hop-ghi-chu { width: min(560px, calc(100% - 24px)); }
.gc-khung { display: grid; gap: 8px; padding: 20px 22px 22px; }
.gc-khung .gt-dau .kq-dong { position: static; }
.gc-khung > label { font-weight: 800; font-size: .9rem; color: var(--muc2); }
.gc-hs { min-height: 44px; padding: 0 10px; border: 2px solid var(--vien); border-radius: 12px; font: inherit; font-weight: 700; background: var(--the); color: var(--muc); }
.gc-form { display: grid; gap: 8px; }
.gc-chu { padding: 10px 12px; border: 2px solid var(--vien); border-radius: 12px; font: inherit; resize: vertical; }
.gc-chu:focus, .gc-hs:focus { outline: 0; border-color: var(--nhan); }
.gc-loi:empty { display: none; }
.gc-phu { margin: 0; color: var(--mo); font-size: .82rem; font-weight: 600; }
.gc-ds { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow: auto; display: grid; gap: 6px; }
.gc-ds li { position: relative; padding: 10px 48px 10px 12px; border-radius: 12px; background: var(--nen2); }
.gc-ds li p { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.gc-ds li small { color: var(--mo); font-size: .78rem; font-weight: 700; }
.gc-ds li.trong { padding-right: 12px; color: var(--mo); }
.gc-ds .nut-xoa { position: absolute; top: 4px; right: 4px; }

@media (max-width: 760px) {
  .thay-so { width: 100%; }
  .thay-so > div { flex: 1; min-width: 0; padding: 8px 10px; }
  .thay-so dd { font-size: 1.5rem; }
  .thay-mo-dun, .thay-ngoai { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .o-mo-dun { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 10px 12px; }
  .o-mo-dun img { width: 34px; height: 34px; }
  .mui-ngoai { position: absolute; top: 10px; right: 10px; }
  .thay-o { padding: 16px 14px; }
  .ds-cham li { grid-template-columns: 1fr; }
  .the-canh li { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .o-mo-dun { transition: none; } }

/* --- Chấm khởi động (thay-khoi-dong.js) -------------------------------------------------------------------------- */
.kd-chon-buoi { display: flex; gap: 8px; margin: 0 0 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.chip-buoi {
  position: relative; flex: none; display: grid; gap: 2px; min-height: 52px; padding: 8px 14px; text-align: left;
  border: 2px solid var(--vien); border-bottom-width: 4px; border-radius: 14px; background: var(--the); color: var(--muc); font: inherit; cursor: pointer;
}
.chip-buoi b { font: 900 1rem/1.1 var(--chu-to); white-space: nowrap; }
.chip-buoi small { font-size: .78rem; font-weight: 700; color: var(--mo); white-space: nowrap; }
.chip-buoi:hover { border-color: var(--nhan); }
.chip-buoi.dang { background: var(--nhan); border-color: var(--nhan-dam); color: var(--nhan-chu); }
.chip-buoi.dang small { color: var(--nhan-chu); opacity: .9; }
.chip-buoi:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cham-cho { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 2px var(--the); }
.kd-buoi { display: grid; gap: 12px; }
.kd-buoi-dau h3 { font-size: 1.15rem; color: var(--muc); }
.kd-buoi-dau p { margin: 4px 0 0; color: var(--mo); font-weight: 600; font-size: .9rem; }
.kd-buoi-dau a { color: var(--nhan-dam); font-weight: 800; text-underline-offset: 3px; }
.kd-hang { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--vien); border-radius: 16px; background: color-mix(in srgb, var(--nen2) 45%, var(--the)); }
.kd-hang header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.kd-hang header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kd-hang header b { font: 900 1.08rem/1.2 var(--chu-to); color: var(--muc); }
.kd-nguon { margin: 0; color: var(--mo); font-size: .85rem; font-weight: 600; }
.kd-nguon .da-ghi { color: #237a3a; font-weight: 800; }
.kd-nguon .chua-ghi { color: var(--cta-dam); font-weight: 800; }
.chon-de { display: inline-flex; gap: 4px; }
.chon-de .nut-nho { min-height: 36px; padding: 0 10px; }
.chon-de .nut-nho.dang { background: var(--nhan); border-color: var(--nhan); color: var(--nhan-chu); }
.the-de { padding: 2px 8px; border-radius: 999px; background: var(--nhan-nhat); font-size: .8rem; font-weight: 800; color: var(--nhan-dam); }
.kd-luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.o-cau {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 48px; padding: 0; border: 2px dashed var(--vien);
  border-radius: 12px; background: var(--the); color: var(--muc); font: 900 1rem/1 var(--chu-to); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .12s, border-color .12s, transform .1s;
}
.o-cau:hover { border-color: var(--nhan); }
.o-cau:active { transform: translateY(1px); }
.o-cau:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.o-cau svg { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.o-cau.dung { border: 2px solid #2f9a4b; background: #dff5e3; color: #1d6b31; }
.o-cau.sai { border: 2px solid var(--xau); background: color-mix(in srgb, var(--xau) 12%, #fff); color: color-mix(in srgb, var(--xau) 80%, #000); }
.kd-hang footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.kd-tong { margin: 0; display: grid; gap: 2px; font-weight: 700; color: var(--muc2); }
.kd-tong b { font: 900 1.15rem/1 var(--chu-to); color: var(--muc); }
.kd-tong small { font-size: .78rem; font-weight: 600; color: var(--mo); }
.kd-hang-nut { display: flex; gap: 8px; }
.kd-hang-nut .ghi { background: var(--cta); border-color: var(--cta-dam); color: var(--cta-chu); font-weight: 800; }
.kd-hang-nut .ghi:hover:not(:disabled) { border-color: var(--cta-dam); filter: brightness(1.06); }
.kd-dap-an { padding: 10px 14px; border-radius: 14px; background: var(--nen2); }
.kd-dap-an summary { min-height: 32px; display: flex; align-items: center; font-weight: 800; color: var(--muc); cursor: pointer; }
.kd-dap-an h4 { margin: 10px 0 4px; font: 900 .95rem/1.2 var(--chu-to); color: var(--muc2); }
.kd-dap-an ol { margin: 6px 0 0; padding-left: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; }
.kd-dap-an li b { margin-right: 8px; color: var(--muc); }
.kd-dap-an li span { color: var(--mo); font-size: .85rem; font-weight: 600; }

/* --- Lịch học (thay-lich.js) ------------------------------------------------------------------------------------- */
/* 7 màu nhóm: nền nhạt + chữ/viền đậm cùng sắc (pastel, như thẻ màu nhóm ở Dashboard) */
#t-lich .sac-1 { --sn: #dcefe1; --sd: #2f7a45; } #t-lich .sac-2 { --sn: #dfeaf8; --sd: #2d5f9e; }
#t-lich .sac-3 { --sn: #fbe6d4; --sd: #a8571c; } #t-lich .sac-4 { --sn: #ece2f7; --sd: #6a45a8; }
#t-lich .sac-5 { --sn: #fbe0e6; --sd: #a83a59; } #t-lich .sac-6 { --sn: #e0f2f2; --sd: #23726f; }
#t-lich .sac-7 { --sn: #f6efcf; --sd: #7d6516; } #t-lich .lh-ca.nghi { --sn: #eef1f3; --sd: #6b7780; }
.lh-thanh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.lh-thanh h3 { min-width: 9ch; text-align: center; font-size: 1.2rem; color: var(--muc); }
.lh-thanh .nut-tron { display: grid; place-items: center; color: var(--muc); }
.lh-thanh svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lh-dem { margin: 0 0 0 auto; color: var(--mo); font-size: .88rem; font-weight: 700; }
.lh-thu-dau, .lh-luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lh-thu-dau li { padding: 0 6px 4px; font-size: .75rem; font-weight: 800; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; }
.lh-ngay { min-height: 96px; padding: 6px; border-radius: 12px; background: var(--nen2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lh-ngay.ngoai { opacity: .45; }
.lh-ngay.hom-nay { box-shadow: inset 0 0 0 3px var(--nhan); background: var(--the); }
.lh-so { margin: 0; display: flex; align-items: baseline; gap: 2px; color: var(--muc2); }
.lh-so b { font: 900 1rem/1 var(--chu-to); }
.lh-thu, .lh-thang { display: none; }
.lh-nay { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--nhan); color: var(--nhan-chu); font: 800 .68rem/1.4 var(--chu); font-style: normal; }
.lh-ca { display: grid; gap: 4px; padding: 6px 7px; border-radius: 10px; background: var(--sn); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sd) 22%, transparent); }
.lh-ca.toi { box-shadow: inset 0 0 0 2px var(--sd); }
.lh-ca-mo { display: grid; gap: 3px; color: var(--sd); text-decoration: none; border-radius: 6px; }
.lh-ca-mo:hover .lh-ten-nhom { text-decoration: underline; text-underline-offset: 2px; }
.lh-ca-mo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lh-gio { display: flex; align-items: center; gap: 5px; font: 800 .82rem/1.1 var(--chu); font-variant-numeric: tabular-nums; }
.lh-ten-nhom { font: 800 .74rem/1.2 var(--chu); color: color-mix(in srgb, var(--sd) 80%, #000); }
.lh-toi { margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--sd); color: #fff; font: 800 .66rem/1.5 var(--chu); font-style: normal; }
.lh-ban { display: flex; flex-wrap: wrap; gap: 3px; }
.lh-hs { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: rgb(255 255 255 / .75);
  font: 700 .74rem/1.4 var(--chu); color: var(--muc); overflow-wrap: anywhere; }
.lh-hs.co-mat { background: var(--sd); color: #fff; }
.lh-tick { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lh-ga { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.lh-ga.chua { color: var(--mo); background: transparent; }
.lh-ga.nhap { color: #c98a12; background: #f4c65a; }
.lh-ga.xong { color: #2d5f9e; background: #5d93d6; }
.lh-ga.da-day { color: #2f7a45; background: #4cc46a; }
.lh-ga.nghi { color: #6b7780; background: repeating-linear-gradient(45deg, #9aa4ab 0 2px, transparent 2px 4px); }
.lh-kd {
  justify-self: start; min-height: 32px; padding: 0 8px; border: 1.5px solid var(--sd); border-radius: 8px; background: rgb(255 255 255 / .8);
  color: var(--sd); font: 800 .72rem/1 var(--chu); cursor: pointer;
}
.lh-kd:hover { background: #fff; }
.lh-kd:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lh-chu { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--mo); font-size: .82rem; font-weight: 700; }
.lh-chu li { display: inline-flex; align-items: center; gap: 6px; }
.lh-mau { width: 14px; height: 14px; border-radius: 4px; background: var(--sn); box-shadow: inset 0 0 0 2px var(--sd); }
.lh-chu .lh-tick { width: 14px; height: 14px; color: #2f7a45; }
.lh-ghi { margin-top: 10px; }
.lh-ghi a { color: var(--nhan-dam); font-weight: 800; }
.lh-trong { margin-top: 10px; }
.lh-nghi { display: block; border-radius: 8px; }
.lh-ly-do { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.lh-qua-nut { display: none; }
@media (max-width: 1100px) { .lh-gio-het { display: none; } }

/* điện thoại: chỉ các ngày có ca, mỗi ngày một hàng (cột ngày bên trái, các ca bên phải) */
@media (max-width: 759px) {
  .lh-thu-dau { display: none; }
  .lh-luoi { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lh-ngay { display: none; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 8px; }
  .lh-ngay.co, .lh-ngay.hom-nay { display: flex; }
  .lh-ngay.ngoai { display: none; }
  .lh-ngay.qua:not(.hom-nay) { opacity: .72; }
  .lh-luoi:not(.hien-qua) .lh-ngay.qua:not(.hom-nay) { display: none; }
  .lh-qua-nut { display: block; width: 100%; margin: 0 0 8px; }
  .lh-so { flex: none; width: 56px; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; text-align: center; }
  .lh-thu, .lh-thang { display: block; font-size: .72rem; font-weight: 800; color: var(--mo); }
  .lh-so b { font-size: 1.4rem; }
  .lh-nay { margin: 2px 0 0; }
  .lh-ngay > .lh-ca { flex: 1 1 calc(100% - 66px); min-width: 0; }
  .lh-ngay > .lh-ca + .lh-ca { margin-left: 66px; }
  .lh-ngay.hom-nay:not(.co)::after { content: "Hôm nay không có ca"; align-self: center; color: var(--mo); font-weight: 700; font-size: .88rem; }
  .lh-gio-het { display: inline; }
  .lh-gio { font-size: .92rem; }
  .lh-ten-nhom, .lh-hs { font-size: .82rem; }
  .lh-dem { flex-basis: 100%; margin: 0; }
  .kd-luoi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kd-hang { padding: 12px; }
  .kd-hang-nut { width: 100%; }
  .kd-hang-nut > * { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .o-cau { transition: none; } }