/* LessonSlide: slide bài giảng dựng ở kích thước thiết kế cố định, co giãn bằng transform.
   Mọi kích thước trong slide tính theo px của khổ thiết kế (1280x720 / 1024x768), nhân với --ls-k
   (hệ số co chữ khi nội dung dài). */
.ls-viewport { position: absolute; inset: 0; overflow: hidden; }
.ls-slide {
  --ls-k: 1;
  --ls-ink: #1f2937;
  --ls-accent: #004aad;
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  padding: 36px 56px;
  display: flex; flex-direction: column;
  color: var(--ls-ink);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ls-u: 1; /* cỡ chữ giáo viên chọn trên bảng */
  font-size: calc(30px * var(--ls-k) * var(--ls-u));
  line-height: 1.45;
  background: transparent;
}
.ls-slide.ls-solid { background: #fff; }
.ls-slide * { box-sizing: border-box; }

.ls-head { flex: 0 0 auto; margin-bottom: calc(18px * var(--ls-k)); border-bottom: 3px solid var(--ls-accent); padding-bottom: 8px; }
.ls-title { font-size: calc(44px * var(--ls-k) * var(--ls-u)); font-weight: 700; color: var(--ls-accent); line-height: 1.2; }

.ls-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 32px; overflow: hidden; }
.ls-text { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; gap: calc(14px * var(--ls-k)); }
.ls-figure { flex: 0 1 42%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ls-figure img { max-width: 100%; max-height: 100%; object-fit: contain; min-height: 0; flex: 1 1 auto; }
.ls-caption { font-size: calc(22px * var(--ls-k) * var(--ls-u)); color: #4b5563; text-align: center; font-style: italic; }

.ls-layout-IMAGE_TOP .ls-body { flex-direction: column; }
.ls-layout-IMAGE_TOP .ls-figure { flex: 0 1 50%; }
.ls-layout-IMAGE_TOP .ls-text { flex: 1 1 auto; }
.ls-layout-TEXT_ONLY .ls-text { flex-basis: 100%; }
.ls-layout-IMAGE_ONLY .ls-figure { flex: 1 1 100%; }
.ls-layout-TEXT_IMAGE:not(.ls-has-figure) .ls-text,
.ls-layout-IMAGE_TEXT:not(.ls-has-figure) .ls-text { flex-basis: 100%; }

.ls-title-page { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: calc(22px * var(--ls-k)); }
.ls-title-big { font-size: calc(64px * var(--ls-k) * var(--ls-u)); font-weight: 700; color: var(--ls-accent); line-height: 1.15; }
.ls-title-page .ls-text { flex: 0 0 auto; align-items: center; font-size: calc(32px * var(--ls-k) * var(--ls-u)); color: #374151; }
.ls-title-page .ls-figure { flex: 0 1 auto; max-height: 40%; }

.ls-block { transition: opacity .25s ease, transform .25s ease; border-radius: 10px; }
.ls-block-content > :first-child { margin-top: 0; }
.ls-block-label { font-weight: 700; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ls-style-DEFINITION, .ls-style-THEOREM, .ls-style-EXAMPLE, .ls-style-NOTE, .ls-style-EXERCISE, .ls-style-QUESTION { padding: 10px 16px; border-left: 6px solid; }
.ls-style-DEFINITION { background: #eef4ff; border-color: #004aad; } .ls-style-DEFINITION .ls-block-label { color: #004aad; }
.ls-style-THEOREM { background: #fff4e5; border-color: #e67e00; } .ls-style-THEOREM .ls-block-label { color: #b35f00; }
.ls-style-EXAMPLE { background: #ecfdf3; border-color: #16a34a; } .ls-style-EXAMPLE .ls-block-label { color: #15803d; }
.ls-style-NOTE { background: #fef2f2; border-color: #dc2626; } .ls-style-NOTE .ls-block-label { color: #b91c1c; }
.ls-style-EXERCISE { background: #f5f3ff; border-color: #7c3aed; } .ls-style-EXERCISE .ls-block-label { color: #6d28d9; }
/* Tiêu đề: chữ lớn, đậm, gạch chân mảnh; không có khung và nhãn. */ border-color: #0284c7; } .ls-style-QUESTION .ls-block-label { color: #0369a1; }

/* Đoạn chưa tới lượt: giữ chỗ để bố cục không nhảy khi hiện dần. */
.ls-hidden { visibility: hidden; }
/* Giáo viên thấy mờ đoạn sắp hiện, học sinh không thấy. */
.ls-ghost { opacity: .22; outline: 2px dashed #9ca3af; outline-offset: 2px; }
.ls-current { animation: ls-in .35s ease; }
@keyframes ls-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ls-h { font-weight: 700; color: var(--ls-accent); }
.ls-h1 { font-size: 1.3em; } .ls-h2 { font-size: 1.15em; } .ls-h3 { font-size: 1.05em; }
.ls-gap { height: .45em; }
.ls-slide ul, .ls-slide ol { margin: 0; padding-left: 1.3em; }
.ls-slide li { margin: .1em 0; }
.ls-slide code { background: #f3f4f6; padding: 0 .25em; border-radius: 4px; font-size: .9em; }
.ls-slide mark { background: #fff59d; padding: 0 .15em; }
.ls-slide mjx-container { font-size: 100% !important; }
.ls-slide mjx-container[display="true"] { margin: .3em 0 !important; }

.ls-foot { position: absolute; left: 56px; right: 56px; bottom: 12px; display: flex; justify-content: space-between; font-size: 18px; color: #6b7280; }
.ls-foot-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 80%; }
.ls-no-foot .ls-foot { display: none; }

/* Bảng Markdown trong khối nội dung (LessonSlide.markdown). Cỡ chữ nhỏ hơn chữ thường một chút để bảng vừa khung. */
.ls-table-wrap { max-width: 100%; overflow-x: auto; margin: 4px 0; }
.ls-table { border-collapse: collapse; font-size: .85em; line-height: 1.3; }
.ls-table th, .ls-table td { border: 2px solid #9ca3af; padding: 4px 12px; vertical-align: middle; }
.ls-table th { background: rgba(0, 74, 173, .08); font-weight: 700; }