/* Sổ tay học tập (/cong-cu/so-tay). Tệp nạp ở mọi trang → lớp có tiền tố sth- (và md-noi-dung cho phần Markdown đã hiển thị). */
.chinh:has(> .sth) { max-width: 1400px; }
.sth-an { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sth-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.sth-dau h1 { margin: 0; }
.sth-dau .phu { margin: 2px 0 0; }
.sth-tab { display: flex; gap: 6px; }
.sth-tab [role="tab"] { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the); color: var(--chu);
  font: inherit; font-weight: 700; cursor: pointer; }
.sth-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.sth-khung { display: grid; gap: 14px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .sth-khung { grid-template-columns: 290px minmax(0, 1fr); } .sth-ben { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; } }
.sth-ben { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sth-the-loc { display: flex; flex-wrap: wrap; gap: 6px; }
.sth-the-loc:empty { display: none; }
.sth-chip { border: 1px solid var(--c-vien); background: var(--the); color: var(--c-dam); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .875rem; cursor: pointer; min-height: 34px; }
.sth-chip[aria-pressed="true"] { background: var(--c-dam); color: #fff; border-color: var(--c-dam); }
.sth-chip small { opacity: .75; }
.sth-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sth-muc { width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: var(--r-nho); padding: 8px 10px; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; color: var(--chu); }
.sth-muc:hover { background: var(--c-nhat); }
.sth-muc[aria-current="true"] { background: var(--c-nhat); border-color: var(--c-vien); }
.sth-muc small { color: var(--phu); font-size: .8125rem; }
.sth-trong { padding: 8px 10px; }
.sth-ben__nut { border-top: 1px solid var(--vien); padding-top: 10px; }
.sth-soan { margin: 0; }
.sth-soan[hidden] { display: none; }
.sth-soan__dau { display: grid; gap: 10px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sth-cong-cu { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 12px 0 8px; }
.sth-che-do { display: inline-flex; border: 1px solid var(--c-vien); border-radius: 999px; overflow: hidden; }
.sth-che-do label { position: relative; cursor: pointer; }
.sth-che-do input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sth-che-do span { display: block; padding: 7px 14px; font-weight: 700; font-size: .9375rem; color: var(--c-dam); }
.sth-che-do input:checked + span { background: var(--c-dam); color: #fff; }
.sth-che-do input:focus-visible + span { outline: 3px solid var(--nhan); outline-offset: -3px; }
.sth-chen { display: flex; flex-wrap: wrap; gap: 6px; }
.sth-hai { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .sth-hai--ca-hai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sth-hai--soan .sth-xem, .sth-hai--xem .sth-o-soan { display: none; }
#sth-chu { width: 100%; min-height: 58vh; padding: 12px 14px; border: 1px solid #cfd6d1; border-radius: var(--r-nho); font: .95rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; }
#sth-chu:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.sth-xem { min-height: 58vh; max-height: 75vh; overflow: auto; padding: 12px 18px; border: 1px solid var(--vien); border-radius: var(--r-nho); background: #fff; }
.sth-hai--xem .sth-xem { max-height: none; }
.sth-chan { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 10px; }
.sth-huong-dan { margin-top: 10px; }
.sth-huong-dan summary { cursor: pointer; font-weight: 700; color: var(--c-dam); }
.sth-hd p { margin: 6px 0; line-height: 1.9; }

/* Nội dung Markdown đã hiển thị */
.md-noi-dung { line-height: 1.65; overflow-wrap: anywhere; }
.md-noi-dung h1 { font-size: 1.6rem; } .md-noi-dung h2 { font-size: 1.3rem; margin-top: 1.1em; } .md-noi-dung h3 { font-size: 1.1rem; margin-top: 1em; }
.md-noi-dung table { border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; max-width: 100%; }
.md-noi-dung th, .md-noi-dung td { border: 1px solid var(--vien); padding: 6px 10px; text-align: left; }
.md-noi-dung th { background: var(--c-nhat); }
.md-noi-dung code { background: #f1f3f0; border-radius: 4px; padding: 1px 5px; font-size: .9em; }
.md-noi-dung pre { background: #f1f3f0; border-radius: var(--r-nho); padding: 10px 12px; overflow-x: auto; }
.md-noi-dung pre code { background: none; padding: 0; }
.md-noi-dung blockquote { margin: 10px 0; padding: 4px 14px; border-left: 4px solid var(--nhan); background: var(--nhan-nhat); }
.md-noi-dung ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 4px; }
.md-noi-dung li > input[type="checkbox"] { margin-right: 6px; }
.md-noi-dung img { max-width: 100%; }
.md-noi-dung .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* Lịch */
.sth-lich-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.sth-l-rong { grid-column: span 2; }
.sth-l-nut { grid-column: 1 / -1; }
.sth-tuan { display: grid; gap: 10px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sth-ngay { background: #fbfbf9; border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 8px; min-width: 0; }
.sth-ngay h3 { font-size: .95rem; margin: 0 0 6px; color: var(--c-dam); }
.sth-buoi { background: #fff; border-left: 4px solid var(--c-dam); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; box-shadow: var(--bong); overflow-wrap: anywhere; }
.sth-buoi__gio { font-size: .8125rem; font-weight: 700; color: var(--nhan-dam); }
.sth-buoi__nut { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sth-buoi__nut .nut--nho { min-height: 32px; padding: 4px 10px; }
.sth-ics { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
#sth-lich-bao:empty { display: none; }
#sth-lich-bao { margin-top: 10px; }
@media (max-width: 1100px) { .sth-tuan { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .sth-ngay--trong { display: none; } }
@media (max-width: 640px) {
  .sth-soan__dau { grid-template-columns: 1fr; }
  .sth-l-rong { grid-column: 1 / -1; }
  #sth-chu, .sth-xem { min-height: 45vh; }
}
@media print {
  body:has(.sth) .dau, body:has(.sth) .demo-bar, body:has(.sth) .chan, .sth-dau, .sth-ben, .sth-soan__dau, .sth-cong-cu, .sth-o-soan, .sth-chan, .sth-huong-dan { display: none !important; }
  body:has(.sth) { background: #fff; }
  .sth-khung { display: block; }
  .sth-soan { border: 0; box-shadow: none; padding: 0; }
  .sth-hai .sth-xem { display: block !important; border: 0; max-height: none; min-height: 0; overflow: visible; padding: 0; }
}

/* Hẹn giờ học, mục tiêu tuần, nhật ký học tập (so-tay-hoc.js) */
.sth-tab { flex-wrap: wrap; }
@media (max-width: 640px) { .sth-tab { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; } .sth-tab [role="tab"] { white-space: nowrap; padding: 8px 14px; } }
.sth-g-luoi { display: grid; gap: 14px; align-items: start; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
@media (min-width: 960px) { .sth-g-luoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sth-g-luoi > .the { margin: 0; }
.sth-g { text-align: center; }
.sth-g-khung { --mau: var(--c); position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 6px auto 14px; display: grid; place-items: center; }
.sth-g-khung--nghi, .sth-g-khung--nghi_dai { --mau: var(--xanh-la); }
.sth-g-vong { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--mau) calc(var(--p, 1) * 360deg), var(--c-nhat) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); }
.sth-g-giua { position: relative; }
.sth-g-gd { font-weight: 800; color: var(--mau); text-transform: uppercase; letter-spacing: .08em; font-size: .9375rem; }
.sth-g-so { font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--chu); }
.sth-g-nut { justify-content: center; }
.sth-g-bao { min-height: 1.5em; margin: 10px 0 4px; font-weight: 600; color: var(--xanh-la); }
.sth-g-cai { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.sth-g-rong { grid-column: 1 / -1; }
.sth-mt-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.sth-mt-nav b { flex: 1 1 12em; text-align: center; }
.sth-mt-form { display: flex; gap: 8px; align-items: end; }
.sth-mt-form .field { flex: 1; }
.sth-mt-ds { list-style: none; margin: 12px 0 6px; padding: 0; }
.sth-mt { display: flex; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--vien); }
.sth-mt label { flex: 1; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.sth-mt input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c); }
.sth-mt--xong span { text-decoration: line-through; color: var(--phu); }
.sth-mt__o { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--c); border-radius: var(--r-nho); font: inherit; }
.sth-nk-so { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sth-nk-so > div { background: var(--c-nhat); border-radius: var(--r-nho); padding: 10px 12px; display: flex; flex-direction: column; }
.sth-nk-so__to { font-size: 1.5rem; font-weight: 900; color: var(--c-dam); font-variant-numeric: tabular-nums; }
.sth-nk-form { display: grid; gap: 12px; grid-template-columns: 1.4fr 1fr 1fr; }
.sth-nk-rong { grid-column: 1 / -1; }
@media (max-width: 640px) { .sth-nk-form { grid-template-columns: 1fr 1fr; } .sth-nk-form .field:first-child { grid-column: 1 / -1; } }
.sth-nk-chon { display: flex; gap: 6px; }
.sth-nk-chon [aria-pressed="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.sth-nk-bd { position: relative; height: 260px; }
.sth-nk-ds { list-style: none; margin: 0; padding: 0; }
.sth-nk-muc { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--vien); padding: 9px 2px; font: inherit; color: var(--chu); cursor: pointer; }
.sth-nk-muc:hover { background: var(--c-nhat); }
.sth-nk-muc small { display: block; color: var(--phu); white-space: pre-line; overflow-wrap: anywhere; }
@media print { #sth-p-gio, #sth-p-hoc { display: none !important; } }
.sth-nk-chon .nut { white-space: nowrap; }
@media (max-width: 640px) { .sth-mt-nav b { order: -1; flex-basis: 100%; text-align: left; } }