/* Lịch báo giảng, đồng hồ tiết học (lbg-). Khung trang in dùng chung sg- ở cc-ke-hoach-bai-day.css. */
.chinh:has(> .lbg-rong) { max-width: 1320px; }
.lbg-ghi { margin: 10px 0 0; }
@media (max-width: 640px) { .lbg-muc { flex-direction: column; } }
.lbg-tt { display: grid; gap: 14px; }
@media (min-width: 720px) { .lbg-tt { grid-template-columns: 2fr 2fr 120px; } }
.lbg-thu .the__h { margin-bottom: 8px; }
.lbg-trong { margin: 0; }

/* Dòng tiết: điện thoại xếp 2 cột có nhãn; màn rộng thành một hàng, nhãn gom lên đầu */
.lbg-dau { display: none; }
.lbg-dong { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 0; border-top: 1px solid var(--vien); }
.lbg-o { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lbg-o label { font-size: .8125rem; font-weight: 600; color: var(--phu); }
.lbg-o input, .lbg-o select { width: 100%; min-height: 42px; padding: 6px 9px; border: 1px solid #cfd6d1; border-radius: 8px; font: inherit; background: #fff; color: var(--chu); }
.lbg-o input:focus, .lbg-o select:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.lbg-o--ten-bai, .lbg-o--do-dung, .lbg-o--ghi-chu { grid-column: 1 / -1; }
.lbg-o--bo { grid-column: 1 / -1; align-items: flex-end; }
.lbg-nut-nho { border: 1px solid #efc2bd; background: #fff; color: var(--do); border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 700;
  padding: 4px 14px; cursor: pointer; min-height: 36px; }
.lbg-nut-nho:hover { background: var(--do-nhat); }
@media (min-width: 1000px) {
  .lbg-dau, .lbg-dong { display: grid; grid-template-columns: 92px 64px 84px 150px 84px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 56px; gap: 6px; align-items: center; }
  .lbg-dau { font-size: .8125rem; font-weight: 700; color: var(--c-dam); padding: 0 0 6px; }
  .lbg-dong { padding: 4px 0; border-top: 0; }
  .lbg-o label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lbg-o--ten-bai, .lbg-o--do-dung, .lbg-o--ghi-chu, .lbg-o--bo { grid-column: auto; }
  .lbg-o input, .lbg-o select { min-height: 38px; }
  .lbg-nut-nho { padding: 4px 10px; min-height: 32px; }
}
.lbg-luu { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0 12px;
  background: linear-gradient(to top, var(--bg) 75%, transparent); }

/* Bản in */
.lbg-to { font-size: 12pt; }
.lbg-to__td { font-size: 15pt; margin: 6pt 0 2pt !important; }
.lbg-to__bang { font-size: 11pt; margin-top: 8pt; }
.lbg-to__bang td, .lbg-to__bang th { vertical-align: middle; }
.lbg-to__thu { width: 24mm; }
.lbg-to__buoi { width: 15mm; }
.lbg-to__tiet { width: 11mm; }
.lbg-to__lop { width: 18mm; }
.lbg-to__mon { width: 30mm; }
.lbg-to__ppct { width: 17mm; }
.lbg-to__dd { width: 48mm; }
.lbg-to__gc { width: 32mm; }
.lbg-to__ngay { font-weight: 400; }
.lbg-to__ky { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 10pt; text-align: center; break-inside: avoid; }
.lbg-to__ky p { margin: 0 0 2pt; }
.lbg-to__ten { margin-top: 22mm !important; font-weight: 700; }
@media (max-width: 760px) { .lbg-to__bang { min-width: 820px; } }

/* Đồng hồ tiết học (nền navy của chế độ chiếu) */
.chinh:has(> .lbg-dh) { padding: 0; }
.lbg-dh { min-height: 100vh; display: flex; flex-direction: column; padding: 14px clamp(14px, 3vw, 40px) 28px; }
.lbg-dh__thanh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lbg-dh__dan { flex: 1; }
.lbg-dh__nut { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45);
  background: transparent; color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.lbg-dh__nut:hover { background: rgba(255,255,255,.14); }
.lbg-dh__nut[aria-pressed="true"] { background: var(--nhan); border-color: var(--nhan); color: var(--c-dam); }
.lbg-dh__chinh { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3vh 0; }
.lbg-dh__chinh p { margin: 0; }
.lbg-dh__ngay { font-size: clamp(1.1rem, 2.6vw, 2.2rem); color: #d8e3f4; }
.lbg-dh__gio { font-size: clamp(3.6rem, 17vw, 15rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lbg-dh__tt { font-size: clamp(1.5rem, 5vw, 4.4rem); font-weight: 800; color: var(--nhan); margin-top: 1.5vh !important; }
.lbg-dh__con { font-size: clamp(1.4rem, 4.4vw, 3.8rem); font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.lbg-dh__td { width: min(900px, 86vw); height: 14px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin: 2vh 0 0; }
.lbg-dh__td span { display: block; height: 100%; width: 0; background: var(--nhan); border-radius: 999px; }
.lbg-dh__bai { font-size: clamp(1.1rem, 2.8vw, 2.4rem); font-weight: 600; margin-top: 2.5vh !important; overflow-wrap: anywhere; max-width: 92vw; }
.lbg-dh__sau { font-size: clamp(1rem, 2vw, 1.6rem); color: #d8e3f4; margin-top: 1vh !important; }
.lbg-dh__cai { background: var(--the); color: var(--chu); border-radius: var(--r); padding: 18px; max-width: 900px; width: 100%; margin: 0 auto; }
.lbg-dh__cai h2 { color: var(--c-dam); }
.lbg-dh__cai h3 { margin: 18px 0 8px; color: var(--c-dam); }
.lbg-dh__cai .nut--vien { color: var(--c-dam); }
.lbg-dh__buoi-ds { display: grid; gap: 14px; }
@media (min-width: 720px) { .lbg-dh__buoi-ds { grid-template-columns: 1fr 1fr; } }
.lbg-dh__buoi { border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 10px 12px 12px; margin: 0; min-width: 0; }
.lbg-dh__buoi legend { font-weight: 700; padding: 0 6px; color: var(--c-dam); }
.lbg-dh__tiet { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.lbg-dh__tiet label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: .8125rem; color: var(--phu); min-width: 0; }
.lbg-dh__tiet input { flex: 1; min-width: 0; min-height: 40px; padding: 4px 6px; border: 1px solid #cfd6d1; border-radius: 8px; font: inherit; color: var(--chu); background: #fff; }
.lbg-dh__chuong { display: grid; gap: 10px; align-items: end; margin-bottom: 8px; }
@media (min-width: 720px) { .lbg-dh__chuong { grid-template-columns: 1fr 1fr; } }
.lbg-dh__chon { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.lbg-dh__chon input { width: 20px; height: 20px; accent-color: var(--c); flex: none; }
.lbg-dh__chuong .nut { justify-self: start; }
.lbg-dh__phut { flex: 0 1 140px !important; }
.lbg-dh__cuoi { margin-top: 18px; }
.lbg [hidden], .lbg-dh [hidden] { display: none !important; }