.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  transform: translateY(-180%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--paper);
  background: var(--ink-950);
  font-weight: 700;
}
.skip-link:focus { transform: none; }

.boot-state, .fatal-state {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  text-align: center;
}
.boot-state p { margin: 0; color: var(--ink-600); font-weight: 700; }
.boot-mark { display: flex; align-items: end; gap: 5px; height: 30px; }
.boot-mark span { width: 10px; height: 10px; border-radius: 3px; background: var(--blue-700); animation: tokenLoad 900ms var(--ease) infinite alternate; }
.boot-mark span:nth-child(2) { height: 20px; animation-delay: 120ms; background: var(--red-700); }
.boot-mark span:nth-child(3) { height: 28px; animation-delay: 240ms; }
@keyframes tokenLoad { to { transform: translateY(-7px); opacity: .55; } }
.fatal-state { max-width: 620px; margin: auto; }
.fatal-state h1 { margin: 0; font: 700 var(--text-3xl)/1.05 var(--font-display); }
.fatal-state p:not(.eyebrow) { color: var(--ink-600); }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--outline-w) minmax(0, 1fr) var(--assistant-w);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas:
    "header header header"
    "outline lesson assistant";
}
.app-shell.assistant-closed { grid-template-columns: var(--outline-w) minmax(0, 1fr) 0; }

.topbar {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(220px, var(--outline-w)) minmax(260px, 1fr) auto;
  align-items: center;
  min-height: var(--header-h);
  padding: 0 var(--space-4);
  color: var(--paper);
  background: var(--ink-950);
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; width: fit-content; }
.brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--red-700);
  border-radius: 10px 3px 10px 3px;
  font: 700 1.15rem/1 var(--font-display);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
}
.brand b, .brand small { display: block; }
.brand b { font-family: var(--font-display); letter-spacing: .01em; }
.brand small { color: #b8c8dd; font: 600 .68rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.course-position { display: grid; grid-template-columns: auto minmax(100px, 280px) auto; align-items: center; justify-content: center; gap: var(--space-3); color: #dbe6f5; font-size: var(--text-xs); }
.course-position > span { font-family: var(--font-mono); letter-spacing: .07em; }
.course-position strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.course-meter { height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: rgb(255 255 255 / .16); }
.course-meter i { display: block; width: 0; height: 100%; background: var(--red-700); transition: width 300ms var(--ease); }
.topbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.topbar .button--quiet { color: var(--paper); background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); }
.topbar .button--quiet:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4); }
.topbar .icon-button { color: var(--paper); }
.topbar .icon-button:hover { background: rgb(255 255 255 / .12); }
.spark { color: #ff9bac; }
.status-badge { padding: .25rem .55rem; border: 1px solid rgb(255 255 255 / .25); border-radius: var(--radius-pill); color: #cfe4ff; font-size: .7rem; font-weight: 700; }

.outline {
  grid-area: outline;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-8);
  background: var(--paper);
  border-right: 1px solid var(--ink-200);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.outline__head {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 calc(var(--space-4) * -1);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--ink-100);
  background: rgb(255 255 255 / .97);
  backdrop-filter: blur(10px);
}
.outline__head .eyebrow { font-size: .66rem; }
.outline__hub-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-900);
  font: 700 var(--text-sm)/1.2 var(--font-display);
  text-decoration: none;
}
.outline__hub-link:hover { color: var(--blue-800); }

#outline-nav { padding-top: var(--space-3); }
.journey { margin: 0; border-bottom: 1px solid var(--ink-100); }
.journey summary {
  list-style: none;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--space-2);
  padding: .55rem 0;
  cursor: pointer;
  color: var(--ink-700);
}
.journey summary::-webkit-details-marker { display: none; }
.journey summary::after { content: "›"; font: 700 1.15rem/1 var(--font-mono); text-align: center; transform: rotate(0); transition: transform 220ms var(--ease); }
.journey[open] summary::after, .journey.is-opening summary::after { transform: rotate(90deg); }
.journey.is-closing summary::after { transform: rotate(0); }
.journey__heading { min-width: 0; }
.journey__heading small, .journey__heading b { display: block; }
.journey__heading small { margin-bottom: 2px; color: var(--blue-700); font: 700 .6rem/1.15 var(--font-mono); letter-spacing: .04em; }
.journey__heading b { color: var(--ink-800); font: 700 .76rem/1.25 var(--font-display); }
.journey.is-current .journey__heading small { color: var(--red-700); }
.journey.is-current .journey__heading b, .journey[open] .journey__heading b { color: var(--ink-950); }
.journey__progress { min-width: 34px; padding: .28rem .4rem; border-radius: var(--radius-pill); color: var(--ink-600); background: var(--ink-50); font: 700 .6rem/1 var(--font-mono); text-align: center; }
.journey__lessons { display: grid; gap: 3px; padding-bottom: var(--space-3); overflow: hidden; transform-origin: top; }
.journey.is-opening .journey__lessons, .journey.is-closing .journey__lessons { pointer-events: none; }
.outline-item {
  min-height: 44px;
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: .65rem .55rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.outline-item:hover { background: var(--ink-50); }
.outline-item.is-current { border-left-color: var(--red-700); background: var(--blue-50); }
.outline-item__index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--ink-600);
  background: var(--ink-100);
  font: 700 .65rem/1 var(--font-mono);
}
.outline-item.is-done .outline-item__index { color: var(--green-800); background: var(--green-100); }
.outline-item.is-current .outline-item__index { color: var(--paper); background: var(--red-700); }
.outline-item__title { display: block; color: var(--ink-900); font-size: .84rem; font-weight: 700; line-height: 1.3; }
.outline-item__meta { display: grid; gap: 4px; margin-top: 5px; color: var(--ink-500); font-size: .68rem; }
.outline-item__duration { font: 600 .66rem/1.2 var(--font-mono); }
.outline-item__formats { display: flex; flex-wrap: wrap; gap: 3px 6px; line-height: 1.25; }
.content-kind { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-600); font-size: .66rem; }
.content-kind i { color: var(--ink-500); font: 700 .62rem/1 var(--font-mono); font-style: normal; }
.content-kind[data-kind="video"] i { color: var(--red-700); }
.content-kind[data-kind="lab"] i,
.content-kind[data-kind="practice"] i { color: var(--blue-700); }
.content-kind[data-kind="quiz"] i { color: var(--amber-800); }
.content-kind[data-kind="interactive"] i { color: var(--green-700); }
.content-kind[data-kind="paper"] i { color: var(--ink-900); }
.outline-item__state { color: var(--green-700); font-weight: 700; }
.outline-assessment {
  --assessment-accent: var(--amber-700);
  --assessment-border: var(--amber-100);
  --assessment-soft: var(--amber-50);
  --assessment-ink: var(--amber-800);
  --assessment-mark: var(--amber-100);
  --assessment-mark-ink: var(--amber-800);
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  margin: 3px 0;
  padding: .65rem .55rem;
  border: 1px solid var(--assessment-border);
  border-left: 3px solid var(--assessment-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--assessment-ink);
  background: var(--assessment-soft);
  text-align: left;
  cursor: pointer;
}
.outline-assessment--final {
  --assessment-accent: var(--blue-700);
  --assessment-border: var(--blue-100);
  --assessment-soft: var(--blue-50);
  --assessment-ink: var(--blue-800);
  --assessment-mark: var(--blue-100);
  --assessment-mark-ink: var(--blue-800);
}
.outline-assessment--assignment {
  --assessment-accent: var(--ink-900);
  --assessment-border: var(--ink-200);
  --assessment-soft: var(--ink-50);
  --assessment-ink: var(--ink-900);
  --assessment-mark: var(--ink-100);
  --assessment-mark-ink: var(--ink-900);
}
.outline-assessment.is-passed {
  --assessment-accent: var(--green-700);
  --assessment-border: var(--green-100);
  --assessment-soft: var(--green-50);
  --assessment-ink: var(--green-800);
  --assessment-mark: var(--green-100);
  --assessment-mark-ink: var(--green-800);
}
.outline-assessment.is-current {
  --assessment-accent: var(--red-700);
  --assessment-border: var(--red-100);
  --assessment-soft: var(--red-50);
  --assessment-ink: var(--red-800);
  --assessment-mark: var(--red-100);
  --assessment-mark-ink: var(--red-800);
}
.outline-assessment.is-passed.is-current { --assessment-mark: var(--green-100); --assessment-mark-ink: var(--green-800); }
.outline-assessment:hover { border-color: var(--assessment-accent); }
.outline-assessment__mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--assessment-mark-ink);
  background: var(--assessment-mark);
  font: 700 .72rem/1 var(--font-mono);
}
.outline-assessment b, .outline-assessment small { display: block; }
.outline-assessment b { font-size: .84rem; line-height: 1.3; }
.outline-assessment small { display: flex; flex-wrap: wrap; gap: 3px 5px; margin-top: 5px; color: var(--ink-600); font: 600 .62rem/1.25 var(--font-mono); }
.outline-assessment small i { color: var(--ink-600); font-style: normal; }
.outline-cluster { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--ink-200); }
.outline-cluster > p { margin: 0 0 var(--space-2); color: var(--ink-700); font: 700 var(--text-xs)/1.2 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.outline-cluster--optional { padding: var(--space-4) 0 var(--space-2); border-top-color: var(--blue-700); }
.outline-item--optional { border: 1px solid var(--blue-100); border-left: 3px solid var(--blue-700); background: var(--blue-50); }
.outline-item--optional:hover { border-color: var(--blue-700); background: var(--paper); }
.outline-item--optional.is-current { border-left-color: var(--red-700); background: var(--red-50); }
.outline-item--optional .outline-item__index { color: var(--paper); background: var(--blue-700); }
.outline-item--optional.is-current .outline-item__index { background: var(--red-700); }
.outline-optional-state { color: var(--blue-800); font: 700 .66rem/1.25 var(--font-mono); }
.inline-warning { margin-top: var(--space-5); padding: var(--space-3); border: 1px solid var(--amber-100); border-radius: var(--radius-md); color: var(--amber-800); background: var(--amber-50); font-size: var(--text-xs); }

.lesson-stage {
  grid-area: lesson;
  min-width: 0;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  scroll-padding-top: var(--space-6);
}
.lesson-pane {
  --journey-accent: var(--blue-700);
  --journey-soft: var(--blue-50);
  width: min(100%, calc(var(--content-max) + 2 * var(--space-8)));
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-12);
}
.lesson-pane[data-journey="A"] { --journey-accent: var(--red-700); --journey-soft: var(--red-50); }
.lesson-pane[data-journey="B"] { --journey-accent: var(--amber-700); --journey-soft: var(--amber-50); }
.lesson-pane[data-journey="C"] { --journey-accent: var(--blue-700); --journey-soft: var(--blue-50); }
.lesson-pane[data-journey="D"] { --journey-accent: var(--green-700); --journey-soft: var(--green-50); }
.lesson-pane[data-journey="E"] { --journey-accent: var(--ink-900); --journey-soft: var(--ink-50); }
.lesson-pane[data-journey="optional"] { --journey-accent: var(--blue-700); --journey-soft: var(--blue-50); }
.lesson-pane[data-journey] .lesson-kicker .eyebrow { color: var(--journey-accent); }
.lesson-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--ink-600); font-size: var(--text-sm); }
.lesson-kicker .eyebrow { color: var(--red-700); }
.lesson-duration { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 var(--text-xs)/1 var(--font-mono); }
.lesson-duration::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); }
.lesson-title { max-width: 780px; margin: var(--space-3) 0 0; font: 700 var(--text-3xl)/1.06 var(--font-display); letter-spacing: -.035em; }
.lesson-title:focus { outline: 0; }
.central-question { max-width: var(--content-measure); margin: var(--space-4) 0 var(--space-6); color: var(--ink-700); font: 600 var(--text-xl)/1.45 var(--font-display); }
.source-chip { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .55rem; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--ink-600); background: var(--paper); font: 600 .68rem/1 var(--font-mono); }
.gate-policy-chip { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .55rem; border: 1px solid var(--green-100); border-radius: var(--radius-pill); color: var(--green-800); background: var(--green-50); font: 700 .68rem/1 var(--font-mono); }
.lesson-pane[data-activity="gate"] [data-assessment-mount] .assessment-card { margin-top: var(--space-4); }
.snapshot-note { display: flex; gap: var(--space-3); margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--amber-700); color: var(--amber-800); background: var(--amber-50); font-size: var(--text-sm); }

.module-brief {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.15fr) minmax(250px, .85fr);
  margin: var(--space-8) 0;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-top: 5px solid var(--journey-accent);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.module-brief__mark {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  color: var(--journey-accent);
  background: var(--journey-soft);
  border-right: 1px solid var(--ink-200);
  font-family: var(--font-mono);
}
.module-brief__mark span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }
.module-brief__mark strong { font-size: 1.35rem; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.module-brief__task { min-width: 0; padding: var(--space-5); }
.module-brief__task .eyebrow { color: var(--journey-accent); }
.module-brief__task h2 { margin: var(--space-2) 0; font: 700 var(--text-xl)/1.2 var(--font-display); }
.module-brief__task > p:not(.eyebrow) { margin: 0; color: var(--ink-700); font-size: var(--text-sm); }
.module-path { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--ink-100); }
.module-path span { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-600); font: 700 .7rem/1.4 var(--font-mono); }
.module-path span + span::before { content: "→"; margin-right: var(--space-4); color: var(--ink-300); }
.module-path i { color: var(--journey-accent); font-style: normal; }
.module-path b { color: var(--ink-500); }
.module-path .is-done, .module-path .is-done b { color: var(--green-700); }
.module-path .is-current { color: var(--ink-950); }
.module-path .is-current i { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--journey-accent); }
.module-path .is-current b { color: var(--journey-accent); }
.module-path .is-pending, .module-path .is-pending b { color: var(--ink-500); }
.module-brief__outcomes { padding: var(--space-5); border-left: 1px solid var(--ink-200); background: var(--ink-50); }
.module-brief__outcomes .eyebrow { color: var(--ink-700); letter-spacing: .045em; }
.module-brief__outcomes ul { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.module-brief__outcomes li { display: flex; gap: var(--space-2); color: var(--ink-700); font-size: var(--text-sm); }
.module-brief__outcomes li::before { content: "→"; flex: 0 0 auto; color: var(--journey-accent); font-weight: 700; }

.learning-outcomes { margin: var(--space-8) 0; padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.learning-outcomes h2 { margin: 0 0 var(--space-3); font: 700 var(--text-sm)/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.learning-outcomes ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.learning-outcomes li { display: flex; gap: var(--space-3); color: var(--ink-700); }
.learning-outcomes li::before { content: "→"; color: var(--red-700); font-weight: 700; }

.content-blocks { display: grid; gap: var(--space-5); }
.content-block--lead { padding-left: var(--space-4); border-left: 3px solid var(--journey-accent); font-size: var(--text-lg); }
.content-block h2 { margin: 0 0 var(--space-3); font: 700 var(--text-2xl)/1.2 var(--font-display); letter-spacing: -.02em; }
.content-block h3 { margin: 0 0 var(--space-2); font: 700 var(--text-lg)/1.25 var(--font-display); }
.content-block p { margin: 0; color: var(--ink-800); }
.content-block strong { color: var(--ink-950); }
.content-block ul { margin: 0; padding-left: 1.25rem; color: var(--ink-800); }
.content-block li + li { margin-top: .4rem; }
.instructional-visual {
  margin: var(--space-2) 0 var(--space-3);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.instructional-visual__frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-950);
}
.instructional-visual__frame::after {
  content: "Mở hình lớn ↗";
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: .4rem .55rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: var(--radius-sm);
  color: var(--paper);
  background: rgb(16 35 63 / .86);
  font: 700 .65rem/1 var(--font-mono);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.instructional-visual__frame:hover::after,
.instructional-visual__frame:focus-visible::after { opacity: 1; transform: none; }
.instructional-visual__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.instructional-visual figcaption {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: stretch;
  border-top: 1px solid var(--ink-200);
}
.instructional-visual__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--journey-accent);
  background: var(--journey-soft);
  border-right: 1px solid var(--ink-200);
  font-family: var(--font-mono);
}
.instructional-visual__cue b { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.instructional-visual__cue i { font-size: 1.2rem; font-style: normal; }
.instructional-visual figcaption > div { align-self: center; padding: var(--space-4); }
.instructional-visual figcaption .eyebrow { color: var(--journey-accent); }
.instructional-visual figcaption p:last-child { max-width: 660px; margin: var(--space-1) 0 0; color: var(--ink-800); font-size: var(--text-sm); }
.instructional-visual figcaption > a {
  min-width: 88px;
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: var(--space-3);
  border-left: 1px solid var(--ink-200);
  color: var(--blue-700);
  background: var(--paper);
  font: 700 .68rem/1.25 var(--font-mono);
  text-align: center;
  text-decoration: none;
}
.instructional-visual figcaption > a:hover { color: var(--blue-800); background: var(--blue-50); }
.callout { padding: var(--space-4) var(--space-5); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); background: var(--blue-50); }
.callout--warning { border-color: var(--amber-100); background: var(--amber-50); }
.callout__label { display: block; margin-bottom: var(--space-2); color: var(--blue-700); font: 700 var(--text-xs)/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.callout--warning .callout__label { color: var(--amber-800); }
.concept-formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.concept-formula span { padding: .45rem .65rem; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--paper); font: 700 var(--text-sm)/1 var(--font-mono); }
.concept-formula b { color: var(--red-700); }

.optional-header .eyebrow { color: var(--blue-700); }
.optional-badge { padding: .35rem .55rem; border: 1px solid var(--green-700); color: var(--green-800); background: var(--green-50); font: 700 .68rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.optional-intro {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  margin: var(--space-8) 0 var(--space-6);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-top: 5px solid var(--blue-700);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.optional-intro__mark { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5) var(--space-4); color: var(--paper); background: var(--ink-950); font-family: var(--font-mono); }
.optional-intro__mark span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; }
.optional-intro__mark strong { font-size: 1.6rem; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.optional-intro__copy { padding: var(--space-6); }
.optional-intro__copy h2 { margin: var(--space-2) 0 var(--space-3); font: 700 var(--text-2xl)/1.16 var(--font-display); letter-spacing: -.02em; }
.optional-intro__copy > p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--ink-700); }
.optional-policy { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--ink-200); color: var(--ink-700); font-size: var(--text-sm); }
.optional-policy > span { flex: 0 0 auto; color: var(--green-700); font-weight: 700; }
.optional-policy p { margin: 0; }
.optional-route { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-200); background: var(--ink-50); }
.optional-route__step { position: relative; min-width: 0; min-height: 108px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 3px var(--space-3); padding: var(--space-4); color: inherit; text-decoration: none; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.optional-route__step + .optional-route__step { border-left: 1px solid var(--ink-200); }
.optional-route__step:hover { background: var(--blue-50); box-shadow: inset 0 -3px 0 var(--blue-700); }
.optional-route__step:focus-visible { z-index: 1; outline: 3px solid var(--blue-700); outline-offset: -3px; }
.optional-route__step i { grid-row: 1 / span 3; align-self: start; color: var(--red-700); font: 700 var(--text-lg)/1 var(--font-mono); font-style: normal; }
.optional-route__step span { color: var(--ink-500); font: 700 .66rem/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.optional-route__step b { min-width: 0; color: var(--ink-900); font-size: var(--text-sm); line-height: 1.3; overflow-wrap: anywhere; }
.optional-route__step em { color: var(--blue-800); font: 700 .72rem/1.3 var(--font-mono); font-style: normal; }
.optional-route__step em span { color: inherit; font-size: inherit; letter-spacing: 0; }
.optional-route__step.is-complete::after { content: "✓"; position: absolute; top: var(--space-3); right: var(--space-3); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--green-700); font-size: .7rem; }
.resource-section { margin: 0 0 var(--space-12); }
.resource-section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink-900); }
.resource-section__head h2 { margin: var(--space-2) 0; font: 700 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -.02em; }
.resource-section__head div > p:last-child { max-width: 680px; margin: 0; color: var(--ink-600); font-size: var(--text-sm); }
.resource-section__head > span { flex: 0 0 auto; color: var(--ink-600); font: 700 var(--text-xs)/1.2 var(--font-mono); }
.resource-list { display: grid; gap: var(--space-4); }
.resource-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--ink-200); background: var(--paper); box-shadow: var(--shadow-sm); transition: border-color 160ms var(--ease), transform 160ms var(--ease); }
.resource-card:hover { transform: translateY(-1px); border-color: var(--ink-300); }
.resource-card.is-complete { border-color: var(--green-700); }
.resource-card__rail { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4) var(--space-3); color: var(--blue-800); background: var(--blue-50); border-right: 1px solid var(--blue-100); font-family: var(--font-mono); }
.resource-section:not(.resource-section--ordered) .resource-card__rail { color: var(--ink-800); background: var(--ink-50); border-right-color: var(--ink-200); }
.resource-card__rail span { font-size: 1.15rem; font-weight: 700; }
.resource-card__rail i { font-size: .65rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.resource-card__body { min-width: 0; padding: var(--space-5); }
.resource-card__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); }
.resource-byline { margin: 0 0 3px; color: var(--ink-500); font: 700 .69rem/1.3 var(--font-mono); }
.resource-card h3 { margin: 0; font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: -.015em; }
.resource-complete-mark { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: transparent; border: 1px solid var(--ink-200); }
.resource-card.is-complete .resource-complete-mark { color: var(--paper); border-color: var(--green-700); background: var(--green-700); }
.resource-why { margin: var(--space-3) 0; color: var(--ink-800); }
.resource-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--ink-100); color: var(--ink-600); font-size: var(--text-sm); }
.resource-guide b { color: var(--blue-800); font: 700 .68rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.resource-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--ink-100); }
.resource-connections, .resource-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.resource-connections > span { color: var(--ink-500); font: 700 .66rem/1.2 var(--font-mono); text-transform: uppercase; }
.resource-connection { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: .5rem; border: 1px solid var(--ink-200); color: var(--ink-700); background: var(--ink-50); cursor: pointer; font: 700 .68rem/1 var(--font-mono); }
.resource-connection:hover { color: var(--paper); border-color: var(--blue-700); background: var(--blue-700); }
.resource-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: .6rem .8rem; color: var(--paper); background: var(--blue-700); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.resource-link:hover { background: var(--blue-800); }
.resource-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: .6rem .8rem; border: 1px solid var(--ink-200); color: var(--ink-700); background: var(--paper); cursor: pointer; font-size: var(--text-sm); font-weight: 700; }
.resource-toggle:hover { color: var(--green-800); border-color: var(--green-700); }
.resource-toggle[aria-pressed="true"] { color: var(--green-800); border-color: var(--green-700); background: var(--green-50); }

.slide-deck { margin: var(--space-8) 0; }
.slide-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-950); box-shadow: var(--shadow-md); }
.slide-stage img { width: 100%; height: 100%; object-fit: contain; }
.slide-stage__error { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-2); padding: var(--space-6); color: var(--paper); background: var(--ink-950); text-align: center; }
.slide-stage__error small { color: var(--ink-300); }
.slide-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.slide-controls .button { min-height: 44px; }
.slide-count { min-width: 80px; text-align: center; color: var(--ink-600); font: 700 var(--text-xs)/1 var(--font-mono); }
.slide-thumbs { contain: paint; display: flex; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) 0; overflow-x: auto; }
.slide-thumb { flex: 0 0 92px; padding: 3px; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.slide-thumb[aria-current="true"] { border-color: var(--red-700); }
.slide-thumb img { aspect-ratio: 16 / 9; object-fit: cover; }

.slide-reference {
  margin: var(--section-gap) 0 0;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.slide-reference > summary {
  min-height: 92px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.slide-reference > summary::-webkit-details-marker { display: none; }
.slide-reference > summary:hover { background: var(--blue-50); }
.slide-reference > summary img { width: 112px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); object-fit: cover; }
.slide-reference > summary span { min-width: 0; display: grid; gap: 2px; }
.slide-reference > summary small { color: var(--blue-700); font: 700 .68rem/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.slide-reference > summary strong { font: 700 var(--text-lg)/1.25 var(--font-display); }
.slide-reference > summary em { color: var(--ink-600); font-size: var(--text-sm); font-style: normal; }
.slide-reference > summary > b { min-width: var(--control-min); min-height: var(--control-min); display: grid; place-items: center; padding: 0 var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); color: var(--blue-700); background: var(--paper); font: 700 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; }
.slide-reference[open] > summary { border-bottom: 1px solid var(--ink-200); background: var(--ink-50); }
.slide-reference[open] > summary > b::before { content: "Đóng"; }
.slide-reference[open] > summary > b { color: transparent; font-size: 0; }
.slide-reference[open] > summary > b::before { color: var(--blue-700); font-size: var(--text-xs); }
.slide-reference__body { padding: var(--space-5); }
.slide-reference .slide-deck { margin: 0; }
.slide-reference .slide-deck > .activity-head { display: none; }

.lesson-footer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--ink-200);
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(12px);
}
.footer-status { color: var(--ink-600); font-size: var(--text-sm); text-align: center; }
.footer-status[hidden] { display: none; }
.footer-status.is-partial { color: var(--amber-800); font-weight: 700; }
.footer-status.is-complete { color: var(--green-700); font-weight: 700; }
.lesson-footer .button--gate-skip { width: fit-content; justify-self: end; color: var(--ink-600); background: transparent; border-color: transparent; }
.lesson-footer .button--gate-skip:hover:not(:disabled) { color: var(--blue-800); background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }

.assistant {
  grid-area: assistant;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--paper);
  border-left: 1px solid var(--ink-200);
  visibility: visible;
  transition: transform 200ms var(--ease), opacity 160ms var(--ease), visibility 0s linear;
}
.assistant-closed .assistant { pointer-events: none; visibility: hidden; border-left: 0; transform: translateX(100%); opacity: 0; transition-delay: 0s, 0s, 200ms; }
.assistant__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--ink-100); }
.assistant__identity { display: flex; align-items: center; gap: var(--space-3); }
.assistant__identity b, .assistant__identity small { display: block; }
.assistant__identity b { font-family: var(--font-display); }
.assistant__identity small { margin-top: 2px; color: var(--ink-500); font-size: .66rem; }
.assistant__mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--ink-950); box-shadow: inset -7px -7px 0 var(--blue-700); }
.assistant__context { padding: var(--space-3) var(--space-4); color: var(--ink-600); background: var(--ink-50); border-bottom: 1px solid var(--ink-100); font-size: var(--text-xs); }
.assistant__messages { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.chat-message { max-width: 92%; padding: .7rem .8rem; border-radius: var(--radius-md); font-size: var(--text-sm); white-space: pre-wrap; }
.chat-message--assistant { align-self: flex-start; background: var(--ink-50); border: 1px solid var(--ink-100); }
.chat-message--user { align-self: flex-end; color: var(--paper); background: var(--blue-700); }
.lesson-flow__region { min-width: 0; }
.assistant__composer { padding: var(--space-3); border-top: 1px solid var(--ink-100); }
.assistant__suggestions { contain: paint; display: flex; gap: var(--space-2); margin-bottom: var(--space-2); overflow-x: auto; }
.suggestion-chip { min-height: var(--control-min); flex: 0 0 auto; max-width: 230px; padding: .42rem .65rem; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--blue-800); background: var(--paper); font-size: .72rem; cursor: pointer; }
.suggestion-chip:hover { border-color: var(--blue-700); background: var(--blue-50); }
.assistant__composer form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.assistant__composer input { min-width: 0; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--ink-950); background: var(--paper); }
.assistant__composer input:focus { border-color: var(--blue-700); outline: none; box-shadow: var(--shadow-focus); }

.confirm-dialog { width: min(92vw, 480px); padding: 0; border: 0; border-radius: var(--radius-xl); color: var(--ink-950); box-shadow: var(--shadow-md); }
.confirm-dialog::backdrop { background: rgb(16 35 63 / .62); backdrop-filter: blur(3px); }
.confirm-dialog form { padding: var(--space-6); }
.confirm-dialog h2 { margin: var(--space-2) 0; font: 700 var(--text-2xl)/1.2 var(--font-display); }
.confirm-dialog p:not(.eyebrow) { color: var(--ink-600); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
.toast-region { position: fixed; z-index: 80; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); }
.toast { max-width: 360px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--paper); background: var(--ink-950); box-shadow: var(--shadow-md); font-size: var(--text-sm); animation: toastIn 180ms var(--ease); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

.mobile-only { display: none; }
.drawer-scrim { position: fixed; z-index: 40; inset: var(--header-h) 0 0; background: rgb(16 35 63 / .48); }

@media (max-width: 1180px) {
  :root { --outline-w: 280px; --assistant-w: 300px; }
  .course-position { grid-template-columns: minmax(100px, 220px) auto; }
  .course-position > span { display: none; }
  .status-badge { display: none; }
}

@media (max-width: 1100px) {
  .mobile-only { display: inline-grid; }
  .app-shell, .app-shell.assistant-closed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "lesson"; }
  .topbar { grid-template-columns: auto auto minmax(100px, 1fr) auto; gap: var(--space-2); }
  .topbar .brand small { display: none; }
  .topbar .brand__mark { width: 32px; height: 32px; }
  .course-position { grid-template-columns: minmax(70px, 180px) auto; }
  .outline {
    position: fixed;
    z-index: 50;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: min(88vw, 340px);
    height: auto;
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform 200ms var(--ease), visibility 0s linear 200ms;
    box-shadow: var(--shadow-md);
  }
  .outline.is-open { visibility: visible; transform: none; transition-delay: 0s; }
  .assistant {
    position: fixed;
    z-index: 55;
    top: auto;
    right: 0;
    bottom: 0;
    width: min(92vw, 420px);
    height: min(78vh, 680px);
    border-top: 1px solid var(--ink-200);
    border-left: 1px solid var(--ink-200);
    border-radius: var(--radius-xl) 0 0 0;
    box-shadow: var(--shadow-md);
  }
  .assistant-closed .assistant { transform: translateY(105%); }
}

@media (max-width: 680px) {
  :root { --header-h: 58px; }
  .topbar { padding: 0 var(--space-2); }
  .brand span:last-child, .course-position strong, .assistant-label { display: none; }
  .topbar .brand { min-width: 44px; justify-content: center; }
  .course-position { grid-template-columns: minmax(76px, 1fr); }
  .topbar__actions { gap: 0; }
  .topbar .button--quiet { width: 44px; padding: 0; border: 0; background: transparent; }
  .lesson-pane { padding: var(--space-8) var(--space-4) var(--space-10); }
  .lesson-title { font-size: 2rem; }
  .central-question { font-size: 1.12rem; }
  .module-brief { grid-template-columns: 68px minmax(0, 1fr); margin-top: var(--space-6); }
  .module-brief__mark { padding: var(--space-4) var(--space-3); }
  .module-brief__mark strong { font-size: 1rem; }
  .module-brief__task { padding: var(--space-4); }
  .module-brief__outcomes { grid-column: 1 / -1; padding: var(--space-4); border-top: 1px solid var(--ink-200); border-left: 0; }
  .module-path { gap: var(--space-2) var(--space-3); }
  .module-path span + span::before { margin-right: var(--space-3); }
  .learning-outcomes { padding: var(--space-4); }
  .instructional-visual figcaption { grid-template-columns: 52px minmax(0, 1fr); }
  .instructional-visual__cue { grid-row: 1 / span 2; padding: var(--space-2); }
  .instructional-visual figcaption > div { padding: var(--space-3); }
  .instructional-visual figcaption > a { grid-column: 2; min-width: 0; min-height: 44px; justify-content: start; padding: 0 var(--space-3); border-top: 1px solid var(--ink-200); border-left: 0; }
  .instructional-visual__frame::after { display: none; }
  .optional-intro { grid-template-columns: 62px minmax(0, 1fr); margin-top: var(--space-6); }
  .optional-intro__mark { padding: var(--space-4) var(--space-3); }
  .optional-intro__copy { padding: var(--space-4); }
  .optional-route { grid-template-columns: 1fr; }
  .optional-route__step + .optional-route__step { border-top: 1px solid var(--ink-200); border-left: 0; }
  .resource-section__head { align-items: start; }
  .resource-section__head > span { display: none; }
  .resource-card { grid-template-columns: 58px minmax(0, 1fr); }
  .resource-card__rail { padding: var(--space-4) var(--space-2); }
  .resource-card__body { padding: var(--space-4); }
  .resource-card__foot { align-items: stretch; flex-direction: column; }
  .resource-actions { align-items: stretch; }
  .resource-link, .resource-toggle { flex: 1 1 auto; justify-content: center; }
  .resource-guide { grid-template-columns: 1fr; gap: var(--space-1); }
  .lesson-footer {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "status status" "previous next";
    gap: 6px var(--space-2);
    padding: 6px var(--space-2) var(--space-2);
  }
  .lesson-footer:has(.footer-status[hidden]) { grid-template-areas: "previous next"; }
  #previous-button { grid-area: previous; }
  #next-button { grid-area: next; }
  .lesson-footer .button { min-width: 0; padding-inline: .65rem; font-size: var(--text-sm); }
  .footer-status { grid-area: status; display: block; min-height: 16px; font: 700 .72rem/1.25 var(--font-mono); text-align: center; }
  .slide-thumbs { display: none; }
  .slide-reference > summary { grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--space-3); }
  .slide-reference > summary img { width: 76px; }
  .slide-reference > summary em { display: none; }
  .slide-reference__body { padding: var(--space-3); }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .outline, .journey summary::after { transition: none; }
}