:root {
  color-scheme: light;
  --paper: #fbf8f2;
  --ink: #1e2029;
  --muted: #4a4d5e;
  --muted-light: #707386;
  --coral: #e65a3c;
  --coral-dark: #c24024;
  --coral-wash: #ffede6;
  --jade: #8CD9BD;
  --jade-dark: #23745a;
  --jade-deep: #114634;
  --jade-wash: #edf9f4;
  --jade-border: #6ec4a6;
  --teal: #8CD9BD;
  --teal-dark: #23745a;
  --teal-wash: #edf9f4;
  --yellow: #f0a82d;
  --yellow-wash: #fff8e8;
  --green: #2e8b57;
  --green-wash: #e8f7ee;
  --line: #ded7ca;
  --line-strong: #c8bead;
  --white: #ffffff;
  --shadow: 0 .5rem 1.5rem rgba(40, 32, 24, .06);
  --shadow-hover: 0 .875rem 2.125rem rgba(40, 32, 24, .10);
  --round: 1rem;

  /* Typography Scale - Điều chỉnh linh hoạt qua --font-scale, sắc nét từ xa */
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-scale: 1;
  --fs-title-main: calc(clamp(1.75rem, 3.2vw, 2.25rem) * var(--font-scale));  /* Tiêu đề màn hình chào */
  --fs-title: calc(clamp(1.375rem, 2.4vw, 1.625rem) * var(--font-scale));       /* Tiêu đề chặng & bản đồ */
  --fs-title-sub: calc(1.1562rem * var(--font-scale));                     /* Tiêu đề mục / thẻ */
  --fs-content-lg: calc(1.1562rem * var(--font-scale));                    /* Nội dung câu hỏi mở, quiz */
  --fs-content: calc(1.0312rem * var(--font-scale));                       /* Nội dung bài học, diễn giải */
  --fs-content-dense: calc(.9688rem * var(--font-scale));                 /* Ô bảng so sánh, chú thích */
  --fs-tag: calc(.8125rem * var(--font-scale));                             /* Nhãn, nút bấm phụ, gợi ý */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Color Theme Palettes */
[data-theme="blue-amber"] {
  --coral: #2872e0;
  --coral-dark: #1952a8;
  --coral-wash: #eaf2ff;
  --teal: #e59218;
  --teal-dark: #b86f05;
  --teal-wash: #fdf5e7;
}

[data-theme="emerald-violet"] {
  --coral: #109868;
  --coral-dark: #0a6947;
  --coral-wash: #e6f7f0;
  --teal: #8243c2;
  --teal-dark: #5e2894;
  --teal-wash: #f3ecfb;
}

[data-theme="ruby-cyan"] {
  --coral: #d82b4b;
  --coral-dark: #a1142e;
  --coral-wash: #fdebee;
  --teal: #0896b0;
  --teal-dark: #056677;
  --teal-wash: #e5f6f9;
}

* { box-sizing: border-box; }

/* Desktop Presentation Base (Chuẩn 100vh không cuộn màn hình) */
html, body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(215, 175, 125, .28) .0625rem, transparent .0625rem);
  background-size: 1.5rem 1.5rem;
  line-height: 1.45;
  touch-action: manipulation;
}

/* Cỡ chữ gốc co giãn theo khung nhìn: 16px tại 1440×810 trở xuống, ~21px tại 1920×1080,
   ~28px tại 2560×1440, ~43px tại 3840×2160 → mọi đơn vị rem (chữ, nút, khoảng cách, hình) tăng theo. */
html {
  font-size: clamp(16px, min(100vw / 90, 100vh / 50.625), 48px);
}

button, a, input, select, textarea { font: inherit; }
button { color: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: .1875rem solid var(--teal);
  outline-offset: .125rem;
}
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Shortcut reminder spans */
.kbd-hint {
  display: inline;
  opacity: .85;
  font-weight: 700;
  margin-left: .125rem;
}

/* Main Shell (Desktop 100vh) */
.site-shell {
  width: min(98%, 86.25rem);
  height: 100vh;
  max-height: 100vh;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 0 2.125rem;
}

/* Topbar Header */
.topbar {
  height: 3.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  border-bottom: .125rem solid var(--line);
  padding: 0 .25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  min-width: 0;
}
.brand strong { color: var(--coral-dark); }
.brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: #fff;
  background: var(--coral);
  border-radius: .5625rem;
  box-shadow: 0 .1562rem 0 var(--coral-dark);
  transform: rotate(-3deg);
  flex-shrink: 0;
}
.brand-mark svg { width: 1.125rem; height: 1.125rem; }

.topbar-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.topbar-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .5625rem;
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-tag);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
  transition: all .16s ease;
  white-space: nowrap;
}
.topbar-action-btn:hover {
  background: #fdfaf6;
  border-color: var(--coral);
  color: var(--coral-dark);
  transform: translateY(-.0625rem);
}
.topbar-action-btn.is-active {
  background: var(--coral-wash);
  border-color: var(--coral);
  color: var(--coral-dark);
}

.btn-editor {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-wash);
}
.btn-editor:hover {
  border-color: var(--teal-dark);
  color: var(--teal-dark);
}

.progress-pill {
  display: inline-flex;
  gap: .375rem;
  align-items: center;
  border: .125rem solid var(--line-strong);
  border-radius: 6.1875rem;
  padding: .3125rem .75rem;
  color: var(--ink);
  background: var(--white);
  font-size: .8125rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
  white-space: nowrap;
}
.progress-pill:hover {
  border-color: var(--yellow);
  transform: translateY(-.0625rem);
}
.progress-star { color: var(--yellow); font-size: .9375rem; }

/* Travel Overlay */
.travel-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  background: radial-gradient(circle at center, #fff6da 0, #ffdf9d 48%, #ffbd7b 100%);
  pointer-events: none;
}
.travel-overlay.is-traveling { visibility: visible; opacity: 1; pointer-events: auto; }
.travel-core {
  position: relative;
  z-index: 2;
  width: 6.875rem;
  height: 6.875rem;
  display: grid;
  place-items: center;
  border: .4375rem solid #fff0c8;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 27%, #ffd886 0 9%, transparent 10%), linear-gradient(145deg, #ffad62, #f37c55 75%);
  box-shadow: inset -.5rem -.625rem 0 rgba(205, 85, 55, .12), 0 0 4.375rem 1.125rem rgba(243, 124, 85, .32);
  animation: enter-the-atom 1s cubic-bezier(.62,.02,.8,.48) both;
}
.travel-core .nucleus-face { transform: scale(1.15); }
.travel-orbit {
  position: absolute;
  z-index: 1;
  width: 16.25rem;
  height: 6.875rem;
  border: .25rem solid rgba(255,255,255,.75);
  border-radius: 50%;
  animation: orbit-rush 1s cubic-bezier(.55,.05,.8,.4) both;
}
.travel-orbit-two {
  border-color: rgba(242, 128, 88, .5);
  transform: rotate(58deg);
  animation-delay: .04s;
}
.travel-caption {
  position: absolute;
  z-index: 3;
  bottom: 12%;
  left: 1.25rem;
  right: 1.25rem;
  margin: 0;
  color: #7c3b24;
  font-size: .9375rem;
  font-weight: 800;
  text-align: center;
}
.travel-glint { position: absolute; z-index: 3; top: 27%; left: 25%; color: #fff; font-size: 1.875rem; animation: glint-away .75s ease both; }
.travel-glint-two { top: 62%; left: auto; right: 23%; color: #f18862; animation-delay: .08s; }

/* Main Views */
main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: scene-in .30s cubic-bezier(.22,.8,.26,1) both;
}
.view.is-active { display: flex; flex-direction: column; justify-content: space-between; }
.view.is-leaving {
  display: flex;
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: scene-out .18s ease both;
}

@keyframes scene-in {
  from { opacity: 0; transform: translateY(.5rem) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scene-out {
  to { opacity: 0; transform: translateY(-.5rem) scale(1.005); }
}

/* ==========================================================================
   1. LANDING VIEW (MÀN KHỞI ĐỘNG)
   ========================================================================== */
.landing-view {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: .75rem 0;
}
.landing-view.is-active,
.landing-view.is-leaving {
  display: flex;
  flex-direction: column;
}

.landing-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.decor-star-one { top: 12%; left: 16%; color: var(--yellow); font-size: 1.5rem; animation: twinkle 3s ease-in-out infinite; }
.decor-star-two { top: 18%; right: 18%; color: var(--teal); font-size: 1.25rem; animation: twinkle 3.5s ease-in-out infinite 1s; }
.decor-dot-one { bottom: 20%; left: 22%; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); opacity: .4; }
.decor-dot-two { bottom: 24%; right: 22%; width: .625rem; height: .625rem; border-radius: 50%; background: var(--teal); opacity: .4; }

.landing-content {
  position: relative;
  z-index: 2;
  width: min(52.5rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: auto 0;
}

.atom-stage { width: 7.5rem; height: 7.5rem; position: relative; display: grid; place-items: center; isolation: isolate; }
.atom-stage-large { width: 8.125rem; height: 8.125rem; margin-bottom: .125rem; }
.atom-glow {
  position: absolute;
  width: 5.625rem;
  height: 5.625rem;
  border-radius: 50%;
  background: rgba(246, 150, 81, .28);
  filter: blur(1.25rem);
  z-index: -1;
  animation: glow 3.6s ease-in-out infinite;
}
.nucleus {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.125rem;
  height: 4.125rem;
  border: .25rem solid #fff0c8;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 27%, #ffd886 0 9%, transparent 10%), linear-gradient(145deg, #ffad62, #f37c55 75%);
  box-shadow: inset -.3125rem -.375rem 0 rgba(205, 85, 55, .12), 0 .375rem 1.125rem rgba(217, 114, 65, .25);
}
.nucleus-large { width: 4.5rem; height: 4.5rem; border-width: .25rem; }
.nucleus-face { width: 2rem; height: 1.375rem; position: relative; display: block; }
.nucleus-face i { position: absolute; top: .1875rem; width: .2812rem; height: .4062rem; background: #61362d; border-radius: 50%; }
.nucleus-face i:first-child { left: .3125rem; }
.nucleus-face i:nth-child(2) { right: .3125rem; }
.nucleus-face b { position: absolute; bottom: .1875rem; left: 50%; width: .75rem; height: .375rem; border-bottom: .125rem solid #61362d; border-radius: 50%; transform: translateX(-50%); }

.orbit {
  position: absolute;
  inset: .75rem -.25rem;
  border: .125rem solid rgba(97, 184, 183, .65);
  border-radius: 50%;
  transform: rotate(-34deg);
  animation: orbit-wobble 6s ease-in-out infinite alternate;
}
.orbit-two { inset: .875rem -.125rem; border-color: rgba(242, 133, 100, .65); transform: rotate(35deg); animation-delay: -.9s; }
.orbit-three { inset: 1.625rem -.875rem; border-color: rgba(114, 174, 127, .68); transform: rotate(69deg); animation-delay: -1.7s; }
.orbit-electron {
  position: absolute;
  top: 50%;
  left: -.375rem;
  width: .6875rem;
  height: .6875rem;
  border: .125rem solid #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 .125rem .25rem rgba(47, 66, 70, .2);
}
.electron-blue { background: #3fa5af; }
.electron-green { background: #7aa545; }
.electron-pink { background: #e06c85; }
.atom-twinkle { position: absolute; color: var(--yellow); font-size: 1.125rem; animation: twinkle 2.4s ease-in-out infinite; }
.twinkle-a { top: .25rem; right: .375rem; }
.twinkle-b { bottom: .75rem; left: .375rem; color: #4aa3a7; font-size: .9375rem; animation-delay: -1.1s; }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 .375rem;
  color: #8c5540;
  font-size: var(--fs-tag);
  font-weight: 800;
}
.eyebrow-line { width: 1.375rem; height: .125rem; background: #dfa88d; }

.landing-content h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-title-main);
  font-weight: 900;
  line-height: 1.2;
}
.title-orange { color: var(--coral-dark); }
.title-blue { color: var(--teal-dark); }
.title-amp { color: var(--yellow); font-size: .92em; }

.warmup-card {
  margin: .625rem auto .875rem;
  padding: .75rem 1.25rem;
  max-width: min(42.5rem, 90vw);
  border-radius: var(--round);
  border: .125rem solid var(--line-strong);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: left;
}
.warmup-badge {
  display: inline-block;
  padding: .1875rem .625rem;
  margin-bottom: .375rem;
  border-radius: 6.1875rem;
  background: var(--yellow-wash);
  color: #92580a;
  font-size: .8125rem;
  font-weight: 800;
}
.warmup-card p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-content-lg);
  font-weight: 600;
  line-height: 1.5;
}

.landing-btn-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border: 0;
  border-radius: .75rem;
  padding: 0 1.375rem;
  color: #fff;
  background: linear-gradient(115deg, var(--coral), var(--coral-dark));
  box-shadow: 0 .25rem 0 var(--coral-dark), 0 .5rem 1.125rem rgba(217, 99, 78, .22);
  font-size: 1.0312rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .16s ease;
}
.primary-button:hover {
  transform: translateY(-.125rem);
  box-shadow: 0 .375rem 0 var(--coral-dark), 0 .75rem 1.375rem rgba(217, 99, 78, .28);
}
.primary-button:active { transform: translateY(.125rem); box-shadow: 0 .125rem 0 var(--coral-dark); }

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border: .125rem solid var(--line-strong);
  border-radius: .75rem;
  padding: 0 1.25rem;
  color: var(--ink);
  background: var(--white);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .16s ease;
}
.secondary-button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-wash);
  transform: translateY(-.125rem);
}

.landing-footnote {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: 700;
}
.footnote-icon { color: var(--yellow); }
.footnote-dot { color: var(--line-strong); font-size: 1rem; }

.float-label {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, .96);
  border: .0938rem solid var(--line-strong);
  border-radius: 6.1875rem;
  box-shadow: 0 .5rem 1.5rem rgba(40, 32, 24, .08);
  font-size: var(--fs-tag);
  font-weight: 700;
  pointer-events: none;
  backdrop-filter: blur(.5rem);
}
.float-label-left {
  left: 3%;
  top: 22%;
  animation: float-slow 4.5s ease-in-out infinite alternate;
}
.float-label-right {
  right: 3%;
  bottom: 22%;
  animation: float-slow 4.2s ease-in-out infinite alternate -2s;
}
.float-emoji { font-size: 1.375rem; }

@media (max-width: 1200px) {
  .float-label { display: none !important; }
}

/* ==========================================================================
   2. MAP VIEW (BẢN ĐỒ CÁC CHẶNG BÀI HỌC)
   ========================================================================== */
.map-view {
  padding: .25rem 0 .125rem;
  justify-content: space-between;
}

.map-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: .125rem;
  flex-shrink: 0;
}
.map-heading .eyebrow { justify-content: flex-start; margin-bottom: .125rem; }
.map-heading h2 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.15;
}
.map-heading h2 span { color: var(--coral-dark); }
.section-copy {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 600;
}
.map-tip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .75rem;
  border-radius: 6.1875rem;
  border: .0938rem solid var(--line-strong);
  background: rgba(255, 255, 255, .9);
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 700;
}

.map-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  border: .125rem solid #8CD9BD;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #edf8f4 0%, #e6f6ef 55%, #daf3e8 100%);
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(40, 32, 24, .06);
}

.world-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.landscape-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.landscape-hill-back {
  fill: #c6eddd;
  opacity: .92;
}
.landscape-hill-front {
  fill: #b0e4d0;
  opacity: .96;
}

.map-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.trail-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.trail-line.trail-metal {
  stroke: #e66a4e;
  stroke-dasharray: 6 5;
}

.trail-line.trail-nonmetal {
  stroke: #8CD9BD;
  stroke-dasharray: 6 5;
}

.trail-line.is-done {
  stroke: #2e8b57;
  stroke-width: 3.5;
  stroke-dasharray: none;
}

.route-card {
  position: absolute;
  z-index: 2;
  width: min(21.25rem, 32vw);
  display: grid;
  grid-template-columns: 1.625rem 2.625rem 1fr 1.125rem;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  text-align: left;
  border: .125rem solid var(--line-strong);
  border-bottom-width: .25rem;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 .25rem 1rem rgba(40, 32, 24, .06);
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.7,.2,1);
}
.route-card.route-metal { border-bottom-color: var(--coral); }
.route-card.route-nonmetal { border-bottom-color: var(--teal); }
.route-card:hover {
  transform: translateY(-.1875rem) scale(1.02);
  box-shadow: 0 .75rem 1.75rem rgba(40, 32, 24, .12);
  border-color: var(--coral-dark);
}
.route-card.route-nonmetal:hover { border-color: var(--teal-dark); }

.route-number { align-self: center; color: #3b3d4a; font-size: .8125rem; font-weight: 800; }
.route-icon { display: grid; width: 2.625rem; height: 2.625rem; place-items: center; border-radius: .6875rem; }
.route-icon svg { width: 1.375rem; height: 1.375rem; }
.icon-metal { color: var(--coral-dark); background: #fdeee7; }
.icon-nonmetal { color: var(--teal-dark); background: #e6f6f4; }

.route-copy { min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.route-category { color: var(--coral-dark); font-size: .7188rem; font-weight: 800; letter-spacing: .05rem; text-transform: uppercase; }
.route-nonmetal .route-category { color: var(--teal-dark); }
.route-copy strong { color: var(--ink); font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.route-copy small { overflow: hidden; color: #5d6072; font-size: .8438rem; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.route-arrow { width: 1rem; height: 1rem; color: #888b9a; transition: all .18s ease; }
.route-card:hover .route-arrow { color: var(--coral-dark); transform: translateX(.1875rem); }

.route-done { border-color: #6fb88e; }
.route-done::after {
  position: absolute;
  top: -.625rem;
  right: .875rem;
  content: '✓ Đã học';
  padding: .125rem .5rem;
  border-radius: 6.1875rem;
  color: #176337;
  background: #def7e5;
  border: .0625rem solid #99dda9;
  font-size: .75rem;
  font-weight: 800;
}

.map-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 9.375rem;
  height: 9.375rem;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.core-orbit {
  position: absolute;
  width: 9rem;
  height: 4.25rem;
  border: .1562rem solid rgba(235, 120, 85, 0.75);
  border-radius: 50%;
  transform: rotate(32deg);
}
.orbit-sparkle {
  position: absolute;
  right: .875rem;
  top: -.5rem;
  color: #f0a82d;
  font-size: 1rem;
  display: block;
}
.core-orbit-b {
  width: 9.25rem;
  height: 4.625rem;
  border: .1562rem solid rgba(40, 165, 155, 0.75);
  border-radius: 50%;
  transform: rotate(-38deg);
}
.map-core .nucleus {
  width: 4.75rem;
  height: 4.75rem;
  border: .25rem solid #fff2d4;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffd886 0 12%, transparent 13%), linear-gradient(145deg, #ff9f59, #f16846 80%);
  box-shadow: 0 .5rem 1.5rem rgba(240, 106, 70, 0.28);
}
.core-caption {
  position: absolute;
  top: calc(50% + 3.375rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .25rem .875rem;
  border: .0938rem solid #ded7ca;
  border-radius: 6.1875rem;
  color: #4e4a42;
  background: #ffffff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .05rem;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, 0.06);
}

/* Station Summary Banner below map */
.map-summary-wrap {
  width: 100%;
  margin: .375rem auto 0;
  flex-shrink: 0;
}
.summary-banner-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem 1.125rem;
  border: .125rem solid #d29432;
  border-radius: .875rem;
  background: linear-gradient(95deg, #fff9ed 0%, #fffefe 60%, #fff7eb 100%);
  box-shadow: 0 .25rem .875rem rgba(184, 126, 34, .08);
  cursor: pointer;
  text-align: left;
  transition: all .18s ease;
}
.summary-banner-card:hover {
  transform: translateY(-.125rem);
  box-shadow: 0 .5rem 1.25rem rgba(184, 126, 34, .15);
  border-color: #b87a1a;
}
.summary-banner-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.summary-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: .625rem;
  background: #fce8bd;
  color: #9c6204;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.summary-kicker {
  display: block;
  color: #a46407;
  font-size: .7812rem;
  font-weight: 800;
}
.summary-banner-left h3 {
  margin: .0625rem 0 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
}
.summary-banner-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.summary-tag {
  padding: .25rem .75rem;
  border-radius: 6.1875rem;
  background: #fdf0d5;
  color: #8c5203;
  font-size: .8125rem;
  font-weight: 800;
}
.summary-arrow {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: #f5eedf;
  color: #724b17;
}

/* ==========================================================================
   3. LESSON VIEW (CHI TIẾT CHẶNG BÀI GIẢNG)
   ========================================================================== */
.lesson-view {
  padding: .25rem 0;
  justify-content: space-between;
}
.lesson-toolbar {
  width: 100%;
  margin: 0 auto .25rem;
  flex-shrink: 0;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .5625rem;
  color: var(--ink);
  background: var(--white);
  font-size: var(--fs-tag);
  font-weight: 800;
  cursor: pointer;
  transition: all .16s ease;
}
.back-button:hover {
  color: var(--coral-dark);
  border-color: var(--coral);
  background: var(--coral-wash);
}
.lesson-toolbar-tools {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.teacher-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .5625rem;
  background: var(--white);
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}
.teacher-tool-btn:hover {
  color: var(--teal-dark);
  border-color: var(--teal);
  background: var(--teal-wash);
}
.lesson-step {
  color: var(--muted-light);
  font-size: var(--fs-tag);
  font-weight: 800;
}

.lesson-content-wrap {
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
}

.lesson-heading {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem 1.25rem;
  border: .125rem solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.lesson-heading-copy { position: relative; z-index: 1; flex: 1; }
.lesson-heading .eyebrow { justify-content: flex-start; margin-bottom: .125rem; }
.lesson-heading h1 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.15;
}
.lesson-heading h1 span { color: var(--accent, var(--coral-dark)); }
.lesson-summary {
  margin: .1875rem 0 0;
  color: var(--muted);
  font-size: var(--fs-content);
  line-height: 1.45;
  font-weight: 500;
}
.lesson-art { position: relative; z-index: 1; flex: 0 0 4.25rem; height: 3.625rem; display: grid; place-items: center; }
.lesson-art-orbit {
  position: absolute;
  inset: .375rem 0;
  border: .125rem solid color-mix(in srgb, var(--accent, var(--coral)) 40%, transparent);
  border-radius: 50%;
  transform: rotate(-26deg);
}
.lesson-art .nucleus { width: 3rem; height: 3rem; border-width: .1875rem; }
.lesson-art .nucleus-face { transform: scale(.72); }
.lesson-art-icon {
  position: absolute;
  top: 0;
  right: .125rem;
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border-radius: .5rem;
  color: var(--accent, var(--coral-dark));
  background: var(--wash, var(--coral-wash));
}
.lesson-art-icon svg { width: 1rem; height: 1rem; }

/* Lesson Columns (Facts vs Lab) */
.lesson-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
  gap: .875rem;
  align-items: stretch;
}
.fact-panel, .lab-panel {
  border: .125rem solid var(--line);
  border-radius: var(--round);
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.fact-panel { padding: .75rem 1rem; }
.fact-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .25rem;
  flex-shrink: 0;
}
.panel-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: var(--fs-title-sub);
  font-weight: 800;
}
.panel-heading-mark {
  display: grid;
  width: 1.625rem;
  height: 1.625rem;
  place-items: center;
  border-radius: .4375rem;
  color: var(--accent, var(--coral-dark));
  background: var(--wash, var(--coral-wash));
}

.fact-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .375rem;
  flex: 1;
  min-height: 0;
}
.fact-row {
  display: grid;
  grid-template-columns: 1.875rem 1fr;
  gap: .625rem;
  align-items: center;
  padding: .4375rem .75rem;
  border-radius: .75rem;
  background: #fbf9f4;
  border: .0938rem solid transparent;
  cursor: pointer;
  transition: all .2s ease;
}
.fact-row:hover {
  background: var(--wash, var(--coral-wash));
  border-color: color-mix(in srgb, var(--accent, var(--coral)) 30%, transparent);
}
.fact-row.is-unrevealed {
  opacity: .32;
  filter: blur(.1875rem) grayscale(.8);
  user-select: none;
}
.fact-row.is-just-revealed {
  animation: reveal-pop .3s ease both;
  border-color: var(--accent, var(--coral));
}

@keyframes reveal-pop {
  0% { transform: scale(.98); opacity: .4; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.fact-icon {
  display: grid;
  width: 1.875rem;
  height: 1.875rem;
  place-items: center;
  border-radius: .5rem;
  color: var(--accent, var(--coral-dark));
  background: var(--wash, var(--coral-wash));
  font-size: .9375rem;
}
.fact-icon svg { width: 1.0625rem; height: 1.0625rem; }
.fact-row strong {
  display: block;
  margin: 0 0 .0625rem;
  font-size: var(--fs-title-sub);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.fact-row p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-content);
  line-height: 1.42;
  font-weight: 500;
  white-space: pre-line;
}

/* Lab Panel */
.lab-panel {
  position: relative;
  overflow: hidden;
  padding: .75rem 1rem;
  background: linear-gradient(155deg, var(--wash, var(--coral-wash)) 0%, #fffefa 68%);
}
.lab-panel::after {
  content: '✦';
  position: absolute;
  right: .625rem;
  top: .125rem;
  color: rgba(230,171,91,.4);
  font-size: 1.25rem;
}
.lab-kicker {
  margin: 0 0 .125rem;
  color: var(--accent, var(--coral-dark));
  font-size: .7812rem;
  font-weight: 800;
}
.lab-title { margin: 0 0 .25rem; font-size: var(--fs-title-sub); font-weight: 800; }
.lab-visual {
  min-height: 3.75rem;
  display: grid;
  place-items: center;
  margin: .25rem 0 .375rem;
  border: .125rem dashed color-mix(in srgb, var(--accent, var(--coral)) 40%, transparent);
  border-radius: .75rem;
  background: rgba(255,255,255,.75);
}
.lab-visual-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--accent, var(--coral-dark));
}
.lab-visual-inner span {
  display: grid;
  justify-items: center;
  gap: .125rem;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
}
.lab-visual-inner b { font-size: 1.5rem; }
.lab-visual-inner em { color: #9c8a78; font-size: 1.125rem; font-style: normal; font-weight: 800; }
.lab-copy { margin: 0; color: var(--muted); font-size: var(--fs-content); line-height: 1.45; font-weight: 500; }

.equation {
  display: block;
  margin-top: .375rem;
  padding: .375rem .75rem;
  border: .0938rem solid rgba(215,176,132,.4);
  border-radius: .625rem;
  color: #513626;
  background: rgba(255,255,255,.9);
  font-size: 1.125rem;
  font-weight: 800;
  text-align: center;
}
.note-chip {
  display: flex;
  gap: .5rem;
  margin-top: .375rem;
  padding: .375rem .625rem;
  border: .0938rem solid #ebd9a9;
  border-radius: .625rem;
  color: #6d5423;
  background: #fef8e7;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 600;
}

/* ==========================================================================
   PHIẾU HỌC TẬP 4 THẺ (theo ba phiếu mẫu chang_1/2/3 — đơn vị rem để co giãn màn hình lớn)
   ========================================================================== */
.ws-skin-metal {
  --ws-page: #fbf1dc; --ws-deco: #d9a768; --ws-banner: #f6b46a; --ws-banner-edge: #b8691f; --ws-banner-text: #4a2a0c;
  --ws-card: #fce6c4; --ws-card-edge: #c7803a; --ws-num: #b8691f; --ws-pill: #fff7e6; --ws-arrow: #e08a2e;
  --ws-ink: #4a2a0c; --ws-frame: #b8691f; --ws-accent: #c2601a; --ws-hand: #7a3b0a; --ws-label: #8c7a66;
}
.ws-skin-jade {
  --ws-page: #e6efea; --ws-deco: #7fa6b9; --ws-banner: #7db59b; --ws-banner-edge: #4c8a74; --ws-banner-text: #ffffff;
  --ws-card: #cfe2ee; --ws-card-edge: #3e6b8e; --ws-num: #2b4f7c; --ws-pill: #eaf4fa; --ws-arrow: #2b4f7c;
  --ws-ink: #17344f; --ws-frame: #3e6b8e; --ws-accent: #2b6f93; --ws-hand: #1c4a73; --ws-label: #5e7686;
}

.worksheet-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: .5rem;
  padding: .55rem 1rem .7rem;
  border-radius: 1.1rem;
  border: .14rem solid var(--ws-card-edge);
  background: var(--ws-page);
  box-shadow: 0 .4rem 1.2rem rgba(40, 32, 24, .08);
  overflow: hidden;
  isolation: isolate;
}

/* Trang trí góc */
.ws-deco { position: absolute; z-index: 0; width: 4.4rem; opacity: .6; pointer-events: none; line-height: 0; }
.ws-deco .ws-art { width: 100%; height: auto; }
.ws-deco-tl { top: .15rem; left: .3rem; }
.ws-deco-tr { top: .15rem; right: .3rem; }
.ws-deco-bl { bottom: .1rem; left: .3rem; }
.ws-deco-br { bottom: .1rem; right: .3rem; }
.ws-skin-jade .ws-deco-tr, .ws-skin-jade .ws-deco-br { width: 5.4rem; }

/* Mặc định cho mọi hình vẽ của phiếu: không tô/viền, từng phần tử tự khai báo màu */
.ws-art {
  display: block;
  fill: none;
  stroke: none;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  overflow: visible;
}

/* Dải tiêu đề */
.ws-banner {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0 3.2rem;
  padding: .3rem 1.2rem .3rem .5rem;
  border-radius: 999px;
  background: var(--ws-banner);
  border: .17rem solid var(--ws-banner-edge);
  color: var(--ws-banner-text);
  box-shadow: 0 .2rem 0 rgba(0, 0, 0, .12);
}
.ws-banner-icon { flex: none; width: 2.5rem; height: 2.5rem; margin: -.3rem 0 -.3rem -.2rem; }
.ws-banner-icon .ws-art { width: 100%; height: 100%; }
.ws-banner-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .015em;
  text-align: center;
}
.ws-skin-jade .ws-banner-title { text-shadow: 0 .06rem .12rem rgba(20, 60, 50, .45); }
.ws-banner-step {
  flex: none;
  padding: .12rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ws-ink);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: none;
}

/* Lưới 4 thẻ + mũi tên */
.ws-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) 2rem minmax(0, 1.1fr) 2rem minmax(0, 1.14fr) 2rem minmax(0, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: .1rem;
}
.ws-step-label {
  grid-area: 1 / 1;
  padding: 0 0 .15rem;
  text-align: center;
  color: var(--ws-label);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.2;
}
.ws-card-1 { grid-area: 2 / 1; }
.ws-card-2 { grid-area: 2 / 3; }
.ws-card-3 { grid-area: 2 / 5; }
.ws-card-4 { grid-area: 2 / 7; }
.ws-arrow { grid-row: 2; align-self: center; justify-self: center; width: 1.9rem; color: var(--ws-arrow); line-height: 0; user-select: none; }
.ws-arrow .ws-art { width: 100%; height: auto; }
.ws-arrow-1 { grid-column: 2; }
.ws-arrow-2 { grid-column: 4; }
.ws-arrow-3 { grid-column: 6; }

/* Thẻ */
.ws-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 0;
  padding: .5rem .6rem .6rem;
  border: .17rem solid var(--ws-card-edge);
  border-radius: 1.1rem;
  background: var(--ws-card);
  box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .09), inset 0 0 0 .12rem rgba(255, 255, 255, .55);
  overflow: hidden;
  transition: filter .38s ease, opacity .38s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}
/* Bước mở duy nhất = phần chữ sáng tạo trong khung giấy (.ws-paper-text, thẻ 3); mở bằng Space hoặc click. */
.ws-answer { position: relative; }
/* Chỉ chữ trong khung giấy (.ws-paper-text) bị nhòe; khung giấy, biểu tượng và ô ghi phiếu hiển thị rõ.
   Phần tử nhòe tự nhận chuột (click mở nó); con bên trong không nhận chuột. */
.ws-answer.is-unrevealed {
  cursor: pointer;
  user-select: none;
  filter: blur(.45rem) grayscale(.4);
  opacity: .55;
  transition: filter .38s ease, opacity .38s ease;
}
.ws-answer.is-unrevealed > * { pointer-events: none; }
/* Chữ viết tay trên dòng ghi phiếu (thẻ 4) là phần tử nội tuyến: cần inline-block để filter áp dụng đúng. */
.ws-dotline .ws-hand.ws-answer { display: inline-block; }
.ws-answer.is-unrevealed:hover { opacity: .7; }
/* Không có nhãn/chữ hướng dẫn trên thẻ mờ: chỉ làm nhòe nội dung (mở bằng Space hoặc click). */
.ws-answer.is-just-revealed { animation: reveal-pop .45s cubic-bezier(.18, .89, .32, 1.28) both; }
@media (prefers-reduced-motion: reduce) {
  .ws-answer.is-just-revealed { animation: none; }
  .ws-answer.is-unrevealed, .ws-card { transition: none; }
}

.ws-card-head { flex: none; display: flex; align-items: center; gap: .45rem; position: relative; }
.ws-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ws-num);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  border: .14rem solid rgba(255, 255, 255, .75);
  box-shadow: 0 .1rem .25rem rgba(0, 0, 0, .28);
}
.ws-card-1 .ws-num { width: 2.5rem; height: 2.5rem; font-size: 1.35rem; }
.ws-card-title {
  flex: 1;
  min-width: 0;
  padding: .22rem .6rem;
  border: .12rem solid var(--ws-card-edge);
  border-radius: .75rem;
  background: var(--ws-pill);
  color: var(--ws-ink);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.2;
}
.ws-trophy { flex: none; width: 2.3rem; height: 2.5rem; margin: -.35rem -.1rem -.35rem 0; line-height: 0; }
.ws-trophy .ws-art { width: 100%; height: 100%; }

/* Thẻ 1: hình minh họa */
.ws-art-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ws-art-wrap > .ws-art { width: 100%; height: 100%; }
.ws-art-name { flex: none; text-align: center; color: var(--ws-ink); font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.ws-hint {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .38rem .55rem;
  border: .12rem solid var(--ws-card-edge);
  border-radius: .85rem;
  background: var(--ws-pill);
  color: var(--ws-ink);
  font-size: .9rem;
  line-height: 1.3;
}
.ws-hint b { font-weight: 900; }
.ws-hint-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--ws-accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
}
.ws-generic-art { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; }
.ws-generic-art > .ws-art { width: 100%; height: auto; max-height: 45%; }
.ws-generic-visual { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; color: var(--ws-ink); font-size: .85rem; font-weight: 700; }
.ws-generic-visual span { display: inline-flex; flex-direction: column; align-items: center; padding: .3rem .5rem; border: .1rem solid var(--ws-card-edge); border-radius: .6rem; background: #fff; text-align: center; }
.ws-generic-visual b { font-size: 1rem; }
.ws-generic-visual em { font-style: normal; font-weight: 900; font-size: 1.15rem; }

/* Thẻ 2: thảo luận */
.ws-kids { flex: 1 1 0; min-height: 4.5rem; display: flex; justify-content: center; }
.ws-kids .ws-art { width: 100%; height: 100%; }
.ws-question { flex: none; color: var(--ws-ink); font-size: .95rem; font-weight: 600; line-height: 1.3; }
.ws-options { flex: none; display: flex; flex-direction: column; gap: .2rem; }
.ws-options.is-inline { flex-direction: row; justify-content: center; gap: 1.4rem; }
.ws-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .12rem .3rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--ws-ink);
  font-size: .98rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.ws-opt:hover { background: rgba(255, 255, 255, .55); }
.ws-checkbox {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: .14rem solid var(--ws-ink);
  border-radius: .22rem;
  background: #fff;
}
.ws-opt.is-selected .ws-checkbox::after {
  content: '';
  position: absolute;
  left: .26rem;
  top: .02rem;
  width: .3rem;
  height: .6rem;
  border: solid var(--ws-ink);
  border-width: 0 .17rem .17rem 0;
  transform: rotate(40deg);
}
.ws-opt.is-correct { background: rgba(16, 185, 129, .16); color: #065f46; }
.ws-opt.is-correct .ws-checkbox { border-color: #059669; background: #d1fae5; }
.ws-opt.is-correct .ws-checkbox::after { border-color: #059669; }
.ws-opt.is-wrong { background: rgba(239, 68, 68, .14); color: #991b1b; }
.ws-opt.is-wrong .ws-checkbox { border-color: #dc2626; background: #fee2e2; }
.ws-opt.is-wrong .ws-checkbox::after { border-color: #dc2626; }
.ws-opt-feedback { flex: none; min-height: 1.1rem; font-size: .82rem; font-weight: 800; line-height: 1.25; }
.feedback-correct { color: #047857; }
.feedback-wrong { color: #b91c1c; }

/* Thẻ 3: sáng tạo */
.ws-prompt { flex: none; margin: 0; padding: 0 .2rem; text-align: center; color: var(--ws-ink); font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.ws-paper {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin: .5rem .35rem .45rem .15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.6rem .7rem .9rem;
  border: .22rem solid var(--ws-frame);
  border-radius: .9rem;
  background: #fff;
  box-shadow: inset 0 0 0 .1rem rgba(0, 0, 0, .05), 0 .15rem .4rem rgba(0, 0, 0, .14);
}
.ws-paper-note { position: absolute; top: .3rem; left: .35rem; width: 1.7rem; line-height: 0; }
.ws-paper-pencil { position: absolute; top: -1.45rem; right: -.8rem; width: 3.3rem; line-height: 0; transform: rotate(8deg); }
.ws-paper-scroll { position: absolute; bottom: -1rem; right: -.7rem; width: 2.7rem; line-height: 0; }
.ws-paper-note .ws-art, .ws-paper-pencil .ws-art, .ws-paper-scroll .ws-art { width: 100%; height: auto; }
.ws-paper-text { width: 100%; text-align: center; }
.ws-hand { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', 'Segoe UI', cursive; color: var(--ws-hand); }
.ws-line-main { font-size: 1.22rem; font-weight: 700; line-height: 1.3; }
.ws-line-sub { margin-top: .45rem; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }

/* Thẻ 4: ghi phiếu */
.ws-record {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .4rem .55rem .45rem;
  border: .12rem solid var(--ws-card-edge);
  border-radius: 1rem;
  background: #fff;
}
.ws-record-label { flex: none; display: flex; align-items: flex-start; gap: .35rem; color: var(--ws-ink); font-size: .82rem; font-weight: 900; line-height: 1.25; }
.ws-record-check { flex: none; width: 1.2rem; line-height: 0; }
.ws-record-check .ws-art { width: 100%; height: auto; }
.ws-record-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; gap: .1rem; }
.ws-dotline {
  display: flex;
  align-items: flex-end;
  min-height: 1.5rem;
  padding-bottom: .05rem;
  border-bottom: .14rem dotted rgba(23, 52, 79, .55);
  font-size: 1rem;
  line-height: 1.2;
}
.ws-skin-metal .ws-dotline { border-bottom-color: rgba(74, 42, 12, .55); }

/* Điện thoại / máy tính bảng dọc: xếp dọc các thẻ */
@media (max-width: 768px) {
  .worksheet-container { height: auto; padding: .6rem; }
  .ws-deco { display: none; }
  .ws-banner { margin: 0; padding: .4rem .7rem .4rem .4rem; border-radius: 1.2rem; }
  .ws-banner-title { font-size: 1rem; }
  .ws-banner-step { display: none; }
  .ws-grid { display: flex; flex-direction: column; gap: .4rem; }
  .ws-step-label { text-align: left; padding: 0 .3rem; }
  .ws-arrow { width: 1.6rem; transform: rotate(90deg); align-self: center; }
  .ws-card { padding: .6rem; }
  .ws-art-wrap { flex: none; height: 15rem; }
  .ws-kids { flex: none; height: 9.5rem; }
  .ws-paper { flex: none; min-height: 8rem; }
  .ws-record { flex: none; }
  .ws-record-lines { gap: .25rem; }
}

/* Lesson Bottom Bar */
.lesson-bottom-bar {
  width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
  height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: .0938rem solid var(--line);
  padding-top: .25rem;
}
.reveal-status-hint {
  font-size: var(--fs-tag);
  font-weight: 700;
  color: var(--muted);
  background: #f5f2ea;
  padding: .25rem .75rem;
  border-radius: .5rem;
}

.lesson-bottom-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.quiz-trigger-btn {
  background: linear-gradient(115deg, var(--teal-dark), var(--teal));
  box-shadow: 0 .1875rem 0 var(--teal-dark), 0 .375rem .875rem rgba(34, 156, 154, .25);
  font-size: .9375rem;
  min-height: 2.625rem;
  padding: 0 1.125rem;
}
.quiz-trigger-btn:hover {
  box-shadow: 0 .3125rem 0 var(--teal-dark), 0 .625rem 1.125rem rgba(34, 156, 154, .32);
}
.quiz-trigger-btn.has-solved {
  background: linear-gradient(115deg, #2e8b57, #3cb371);
  box-shadow: 0 .1875rem 0 #1b5835;
}

.lesson-next-btn {
  min-height: 2.625rem;
  padding: 0 1.125rem;
  font-size: .9375rem;
}

.lesson-view[data-tone="metal"] { --accent: var(--coral-dark); --wash: var(--coral-wash); }
.lesson-view[data-tone="nonmetal"] { --accent: var(--teal-dark); --wash: var(--teal-wash); }

/* ==========================================================================
   4. SUMMARY VIEW (BẢNG SO SÁNH 5 TIÊU CHÍ)
   ========================================================================== */
.summary-view {
  padding: .25rem 0;
  justify-content: space-between;
}
.summary-inner {
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.summary-header {
  text-align: center;
  margin-bottom: .25rem;
  flex-shrink: 0;
}
.summary-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .625rem;
  border-radius: 6.1875rem;
  background: #fce8bd;
  color: #92580a;
  font-size: .8125rem;
  font-weight: 800;
  margin-bottom: .125rem;
}
.summary-header h2 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 800;
}

/* Compare Table (Zero scroll) */
.table-container {
  flex: 1;
  min-height: 0;
  border: .125rem solid var(--line-strong);
  border-radius: .875rem;
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  overflow: hidden;
}
.compare-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-content-dense);
}
.compare-table th, .compare-table td {
  padding: .5rem .875rem;
  border-bottom: .0938rem solid var(--line);
  vertical-align: middle;
}
.compare-table th {
  background: #fbf9f4;
  font-weight: 800;
  font-size: var(--fs-title-sub);
}
.col-feature { width: 22%; color: var(--muted); }
.col-metal { width: 39%; color: var(--coral-dark); }
.col-nonmetal { width: 39%; color: var(--teal-dark); }
.head-icon { font-size: 1.125rem; vertical-align: middle; margin-right: .25rem; }

.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: #faf8f3; }
.feature-title { font-weight: 800; color: var(--ink); font-size: 1rem; }
.metal-val { line-height: 1.42; color: var(--ink); font-size: .9688rem; }
.metal-val b { color: var(--coral-dark); }
.nonmetal-val { line-height: 1.42; color: var(--ink); font-size: .9688rem; }
.nonmetal-val b { color: var(--teal-dark); }
.nonmetal-val em { color: var(--muted); font-size: .8438rem; font-weight: 600; display: block; margin-top: .0625rem; }

.summary-bottom-actions {
  flex-shrink: 0;
  display: flex;
  gap: .625rem;
  justify-content: center;
  padding-top: .375rem;
}
.summary-bottom-actions button {
  font-size: .9375rem;
  font-weight: 800;
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border-radius: .75rem;
}
.highlight-btn {
  background: linear-gradient(115deg, #d28c25, #ea9e2f);
  box-shadow: 0 .25rem 0 #9a6312, 0 .5rem 1rem rgba(210, 140, 37, .24);
}

/* Presenter Hint Bar (Thanh cố định dưới đáy) */
.presenter-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: #242634;
  color: #c9cddb;
  font-size: .7812rem;
  font-weight: 700;
  box-shadow: 0 -.125rem .625rem rgba(0,0,0,.1);
  white-space: nowrap;
  overflow: hidden;
}
.presenter-tag {
  color: var(--yellow);
  font-weight: 800;
}
kbd {
  display: inline-block;
  padding: .0625rem .3125rem;
  border-radius: .25rem;
  background: #393c50;
  color: #fff;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 800;
  box-shadow: 0 .0625rem 0 rgba(0,0,0,.3);
}

/* ==========================================================================
   POPUP MODALS (THỬ TÀI NHANH, THỬ THÁCH, SỔ GHI BÀI)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  background: rgba(20, 22, 33, .68);
  backdrop-filter: blur(.3125rem);
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .20s ease;
}
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal Sheets (Tối ưu rộng ngang 16:9 không cuộn dọc) */
.quiz-modal-sheet, .challenge-modal-sheet, .notebook-sheet, .editor-modal-sheet {
  width: min(92vw, 57.5rem);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 1.125rem;
  background: var(--white);
  border: .1562rem solid var(--line-strong);
  box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  animation: modal-in .22s cubic-bezier(.2,.8,.25,1) both;
}
.notebook-sheet { width: min(92vw, 60rem); }
.editor-modal-sheet { width: min(94vw, 61.25rem); max-height: 92vh; }

@keyframes modal-in {
  from { transform: scale(.96) translateY(.5rem); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.quiz-modal-header, .challenge-modal-header, .notebook-header, .editor-modal-header {
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: .125rem solid var(--line);
  background: #fbf9f4;
  flex-shrink: 0;
}
.quiz-modal-title-wrap h2, .challenge-modal-title-wrap h2, .notebook-title-wrap h2, .editor-title-wrap h2 {
  margin: .0625rem 0 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}
.quiz-modal-badge, .challenge-modal-badge, .editor-badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 6.1875rem;
  background: #faeac4;
  color: #92580a;
  font-size: .75rem;
  font-weight: 800;
}

.close-modal-btn {
  display: grid;
  width: 2.125rem;
  height: 2.125rem;
  place-items: center;
  border: .0938rem solid var(--line-strong);
  border-radius: .5625rem;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.close-modal-btn:hover {
  background: #fce8e6;
  border-color: #e56a5e;
  color: #b02316;
}

/* Quiz Modal Body (Tối ưu Lưới 2x2 cho 4 đáp án) */
.quiz-modal-body {
  padding: .875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.quiz-modal-question {
  margin: 0;
  font-size: var(--fs-content-lg);
  font-weight: 800;
  line-height: 1.42;
  color: var(--ink);
}
.quiz-modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  margin: .375rem 0;
}
.quiz-modal-opt-btn {
  min-height: 3rem;
  padding: .625rem 1rem;
  border: .125rem solid var(--line-strong);
  border-radius: .75rem;
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-content);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .625rem;
  transition: all .16s ease;
}
.quiz-modal-opt-btn:hover {
  border-color: var(--teal);
  background: var(--teal-wash);
  transform: translateY(-.0625rem);
}
.quiz-modal-opt-btn.is-correct {
  border-color: #2b9958;
  color: #156636;
  background: #e6f6ec;
}
.quiz-modal-opt-btn.is-wrong {
  border-color: #e56a5e;
  color: #b02316;
  background: #fdeee9;
  animation: shake .3s ease;
}

.quiz-modal-feedback {
  min-height: 1.75rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted);
}
.quiz-modal-feedback.success { color: #167a3f; }

.quiz-modal-footer, .challenge-modal-footer, .notebook-footer, .editor-modal-footer {
  padding: .625rem 1.25rem;
  border-top: .125rem solid var(--line);
  background: #fbf9f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.quiz-modal-hint, .challenge-modal-hint, .notebook-hint {
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
}
.quiz-modal-next-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.25rem);
  transition: all .2s ease;
  font-size: .9375rem;
  min-height: 2.75rem;
}
.quiz-modal-next-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Challenge Modal Content */
.challenge-score-pill {
  padding: .25rem .75rem;
  border-radius: 6.1875rem;
  background: var(--green-wash);
  color: var(--green);
  font-size: .8125rem;
  font-weight: 800;
}
.challenge-modal-body {
  padding: .875rem 1.25rem;
  display: grid;
  gap: .625rem;
}
.challenge-item {
  padding: .625rem .875rem;
  border-radius: .75rem;
  border: .0938rem solid var(--line);
  background: #fcfbf8;
}
.challenge-question {
  margin: 0 0 .375rem;
  font-size: var(--fs-content-lg);
  font-weight: 800;
}
.challenge-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.challenge-btn {
  padding: .5rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .625rem;
  background: #fff;
  font-size: var(--fs-content);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
}
.challenge-btn:hover {
  border-color: var(--teal);
  background: var(--teal-wash);
}
.challenge-btn.is-correct {
  border-color: #2b9958;
  color: #176337;
  background: #eaf8ee;
}
.challenge-btn.is-wrong {
  border-color: #e56a5e;
  color: #b02316;
  background: #fdeee9;
}
.challenge-fb {
  margin: .25rem 0 0;
  font-size: .9062rem;
  font-weight: 700;
  color: var(--muted);
}
.challenge-fb.success { color: #176337; }

/* Notebook Modal (Bố cục 2 cột song song) */
.notebook-title-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.notebook-icon { font-size: 1.625rem; }
.notebook-title-wrap p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .8438rem;
  font-weight: 600;
}
.notebook-body {
  padding: .875rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.note-box {
  padding: .625rem .875rem;
  border-radius: .75rem;
  border: .125rem solid var(--line);
  background: #fdfcf9;
}
.note-box-metal { border-color: #f0c5b8; background: #fffcfb; }
.note-box-nonmetal { border-color: #bce1dc; background: #fafffe; }
.note-box-takeaway {
  grid-column: span 2;
  border-color: #eed699;
  background: #fffcf2;
}
.note-box-header {
  font-size: var(--fs-title-sub);
  font-weight: 800;
  margin-bottom: .25rem;
}
.note-box-metal .note-box-header { color: var(--coral-dark); }
.note-box-nonmetal .note-box-header { color: var(--teal-dark); }
.note-box-takeaway .note-box-header { color: #9c6204; }
.note-box ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: .25rem;
}
.note-box li, .note-box-takeaway p {
  font-size: var(--fs-content);
  line-height: 1.45;
  color: var(--ink);
}

/* ==========================================================================
   LESSON STUDIO (BỘ SOẠN THẢO BÀI GIẢNG)
   ========================================================================== */
.editor-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.editor-select {
  padding: .375rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .625rem;
  background: #fff;
  font-size: .8438rem;
  font-weight: 700;
  color: var(--ink);
}
.editor-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .625rem;
  background: #fff;
  font-size: .8438rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all .16s ease;
}
.editor-btn-secondary:hover {
  background: var(--teal-wash);
  border-color: var(--teal);
  color: var(--teal-dark);
}

.editor-tabs {
  display: flex;
  background: #f6f3eb;
  border-bottom: .125rem solid var(--line);
  padding: 0 1rem;
  gap: .375rem;
  overflow-x: auto;
}
.editor-tab-btn {
  padding: .625rem 1rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: .8438rem;
  cursor: pointer;
  border-bottom: .1875rem solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}
.editor-tab-btn:hover { color: var(--ink); }
.editor-tab-btn.is-active {
  color: var(--coral-dark);
  border-bottom-color: var(--coral-dark);
  background: #fff;
}

.editor-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  max-height: 60vh;
}
.editor-panel {
  display: none;
  flex-direction: column;
  gap: .75rem;
}
.editor-panel.is-active { display: flex; }

.form-row {
  display: flex;
  gap: .75rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.form-group.flex-1 { flex: 1; }
.form-group.flex-2 { flex: 2; }
.form-group.align-self-end { align-self: flex-end; }

.form-group label {
  font-size: .8125rem;
  font-weight: 800;
  color: var(--ink);
}
.form-input, .form-textarea, .form-select {
  padding: .5rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .625rem;
  background: #fff;
  color: var(--ink);
  font-size: .8438rem;
  transition: border-color .15s ease;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--coral);
}
.form-textarea { resize: vertical; }

.subtle-note {
  font-size: .75rem;
  color: var(--muted);
  font-weight: normal;
  margin-left: .375rem;
}

.editor-sub-section {
  padding: .75rem .875rem;
  border: .0938rem solid var(--line);
  border-radius: .75rem;
  background: #fdfcf9;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.sub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sub-section-header strong {
  font-size: .875rem;
  color: var(--ink);
}

.btn-sm {
  padding: .3125rem .625rem;
  font-size: .75rem;
  min-height: 1.875rem;
  border-radius: .5rem;
}
.btn-subtle {
  border: .0938rem dashed var(--line-strong);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-subtle:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-wash);
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  border: .0938rem solid #e57368;
  background: #fff0ec;
  color: #ad281d;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-danger:hover { background: #fcdbd6; }

/* Routes Manager Chips in Studio */
.routes-manager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: #fbf9f4;
  border: .0938rem solid var(--line);
  border-radius: .75rem;
}
.routes-nav-chips {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
}
.route-chip-btn {
  padding: .375rem .75rem;
  border: .125rem solid var(--line-strong);
  border-radius: 6.1875rem;
  background: #fff;
  font-weight: 800;
  font-size: .8125rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.route-chip-btn:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
}
.route-chip-btn.is-active {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral-dark);
}

.route-editor-box {
  padding: .875rem;
  border: .125rem solid var(--line-strong);
  border-radius: .875rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.facts-editor-list, .summary-rows-list, .challenges-editor-list, .noteboxes-editor-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ed-item-card {
  padding: .625rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .625rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.ed-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ed-item-badge {
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
}

.editor-status-msg {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--green);
}
.editor-footer-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Typography Scale Adjuster Box in Lesson Studio */
.editor-typography-box {
  padding: .875rem 1rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .875rem;
  background: #fbf9f4;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .25rem;
}
.typography-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .625rem;
}
.typography-header-left {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.typography-header-left strong {
  font-size: .9062rem;
  color: var(--ink);
}
.typography-badge {
  display: inline-block;
  padding: .1875rem .5rem;
  border-radius: .375rem;
  background: var(--yellow-wash);
  color: #92580a;
  font-size: .75rem;
  font-weight: 800;
}
.btn-autofit-font {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;
  border: .0938rem solid var(--teal);
  border-radius: .5625rem;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-size: .8125rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .16s ease;
}
.btn-autofit-font:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-.0625rem);
}
.typography-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.font-preset-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.font-preset-btn {
  padding: .375rem .75rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .5rem;
  background: #fff;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.font-preset-btn:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
}
.font-preset-btn.is-active {
  background: var(--coral);
  border-color: var(--coral-dark);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 .125rem .25rem rgba(230, 90, 60, .25);
}
.font-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 16.25rem;
  flex: 1;
}
.font-slider-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
}
.font-slider-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.font-slider-limit {
  font-size: .7188rem;
  font-weight: 700;
  color: var(--muted-light);
}
.font-range-input {
  flex: 1;
  accent-color: var(--coral);
  cursor: pointer;
}
.font-scale-value {
  display: inline-block;
  min-width: 3rem;
  text-align: center;
  padding: .1875rem .5rem;
  border-radius: .375rem;
  background: #fff;
  border: .0938rem solid var(--line-strong);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--coral-dark);
}

/* Live Typography Preview Box */
.typography-live-preview {
  padding: .625rem .875rem;
  border-radius: .625rem;
  background: #fff;
  border: .0938rem dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.preview-badge {
  font-size: .6875rem;
  font-weight: 800;
  color: var(--muted-light);
  text-transform: uppercase;
  letter-spacing: .0312rem;
}
.preview-title {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.preview-content {
  font-size: var(--fs-content);
  color: var(--muted);
  line-height: 1.45;
  font-weight: 500;
}

/* ==========================================================================
   RESPONSIVE CHO ĐIỆN THOẠI & MÀN HÌNH NHỎ (MOBILE TOUCH VIEW)
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html { font-size: 16px !important; }
  body { font-size: .9375rem; }

  .site-shell {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 1.5rem !important;
    width: min(100% - 1.25rem, 36.25rem);
  }

  main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .view {
    height: auto !important;
    overflow: visible !important;
  }

  .view.is-active {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: .875rem;
  }

  /* Ẩn phím tắt và thanh điều khiển máy chiếu khi xem trên điện thoại */
  .kbd-hint,
  .presenter-bar,
  .map-tip,
  .btn-fullscreen {
    display: none !important;
  }

  .topbar {
    height: 3.25rem;
    padding: 0;
  }
  .brand { font-size: .9375rem; gap: .5rem; }
  .brand-mark { width: 1.75rem; height: 1.75rem; }
  .topbar-controls { gap: .375rem; }
  .topbar-action-btn {
    padding: .3125rem .5rem;
    font-size: .75rem;
  }
  .topbar-action-btn svg { width: .9375rem; height: .9375rem; }
  .progress-pill {
    padding: .3125rem .5625rem;
    font-size: .75rem;
  }

  .landing-view.is-active {
    padding: 1rem 0 1.5rem;
    min-height: calc(100svh - 5rem);
  }
  .landing-content { padding: 0; }
  .atom-stage-large { width: 8.125rem; height: 8.125rem; }
  .nucleus-large { width: 4.25rem; height: 4.25rem; border-width: .25rem; }
  .nucleus-large .nucleus-face { transform: scale(.72); }
  .landing-content h1 { font-size: clamp(1.5rem, 7vw, 1.875rem); }
  .warmup-card p { font-size: .9688rem; }
  .primary-button, .secondary-button {
    font-size: .9688rem !important;
    min-height: 2.75rem !important;
  }

  .map-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  .map-heading h2 { font-size: 1.3125rem; }
  .section-copy { font-size: .8438rem; }

  .map-scene {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .625rem !important;
    padding: .875rem !important;
    border-radius: 1rem;
    margin-top: .5rem;
  }
  .map-trails { display: none !important; }

  .map-core {
    order: -1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 6.875rem !important;
    height: 6.875rem !important;
    margin: .25rem auto .5rem !important;
  }
  .core-orbit { width: 6.25rem; height: 3.125rem; }
  .core-orbit-b { width: 6.625rem; height: 3.75rem; }
  .map-core .nucleus { width: 3.5rem; height: 3.5rem; }
  .map-core .nucleus-face { transform: scale(.65); }
  .core-caption { bottom: -.375rem; font-size: .625rem; padding: .125rem .5rem; }

  .route-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 4.125rem !important;
    grid-template-columns: 1.5rem 2.25rem 1fr 1.125rem !important;
    padding: .625rem .75rem !important;
    border-radius: .875rem !important;
  }
  .route-number { font-size: .75rem; }
  .route-icon { width: 2.125rem; height: 2.125rem; border-radius: .5625rem; }
  .route-icon svg { width: 1.125rem; height: 1.125rem; }
  .route-copy strong { font-size: .9375rem; }
  .route-copy small { font-size: .75rem; }

  .summary-banner-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem;
    border-radius: .875rem;
  }
  .summary-banner-left { gap: .625rem; }
  .summary-banner-left h3 { font-size: 1rem; }
  .summary-icon { width: 2.125rem; height: 2.125rem; font-size: 1.125rem; }
  .summary-banner-right {
    width: 100%;
    justify-content: space-between;
  }

  .lesson-view { padding-top: .375rem; }
  .lesson-toolbar { height: auto; margin-bottom: .375rem; }
  .back-button { padding: .3125rem .5625rem; font-size: .7812rem; }
  .teacher-tool-btn { padding: .3125rem .5625rem; font-size: .75rem; }
  .lesson-content-wrap { height: auto !important; gap: .625rem !important; }
  .lesson-heading {
    padding: .625rem .875rem;
    gap: .625rem;
    border-radius: .875rem;
  }
  .lesson-heading h1 { font-size: 1.25rem; }
  .lesson-summary { font-size: .875rem; }
  .lesson-art { flex: 0 0 3.375rem; height: 3.375rem; }
  .lesson-art .nucleus { width: 2.625rem; height: 2.625rem; }
  .lesson-art .nucleus-face { transform: scale(.60); }

  .lesson-columns {
    grid-template-columns: 1fr !important;
    gap: .625rem !important;
  }
  .fact-panel, .lab-panel {
    padding: .75rem !important;
    border-radius: .875rem !important;
  }
  .panel-heading { font-size: 1rem; }
  .fact-row {
    padding: .5rem .625rem;
    grid-template-columns: 1.625rem 1fr;
    gap: .5rem;
  }
  .fact-icon { width: 1.625rem; height: 1.625rem; font-size: .8438rem; }
  .fact-row strong { font-size: .9375rem; }
  .fact-row p { font-size: .8438rem; }

  .lab-title { font-size: 1rem; }
  .lab-copy { font-size: .8438rem; }
  .lab-visual { min-height: 3.375rem; margin: .25rem 0 .375rem; }
  .equation { font-size: .9375rem; padding: .375rem .5rem; }
  .note-chip { font-size: .8125rem; padding: .375rem .5rem; }

  .lesson-bottom-bar {
    height: auto !important;
    flex-direction: column !important;
    gap: .5rem !important;
    align-items: stretch !important;
    border-top: none !important;
    padding-top: .25rem !important;
  }
  .reveal-status-hint { text-align: center; font-size: .7812rem; }
  .lesson-bottom-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: .5rem !important;
  }
  .quiz-trigger-btn, .lesson-next-btn {
    width: 100% !important;
    min-height: 2.625rem !important;
    justify-content: center !important;
    font-size: .9062rem !important;
  }

  .summary-view { padding-top: .375rem; }
  .summary-inner { height: auto !important; }
  .summary-header h2 { font-size: 1.25rem; }
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: .75rem;
    margin-bottom: .625rem;
  }
  .compare-table { min-width: 33.75rem; font-size: .8438rem; }
  .compare-table th, .compare-table td { padding: .5rem .625rem; }
  .summary-bottom-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: .5rem !important;
  }
  .summary-bottom-actions button {
    width: 100% !important;
    min-height: 2.75rem !important;
    justify-content: center !important;
  }

  /* Modals on mobile (Bottom sheets) */
  .modal-backdrop {
    padding: .5rem;
    align-items: flex-end;
  }
  .quiz-modal-sheet, .challenge-modal-sheet, .notebook-sheet, .editor-modal-sheet {
    width: 100% !important;
    max-height: 88vh !important;
    border-radius: 1.125rem 1.125rem .5rem .5rem !important;
    border-width: .125rem !important;
  }
  .quiz-modal-header, .challenge-modal-header, .notebook-header, .editor-modal-header {
    padding: .625rem .875rem;
  }
  .quiz-modal-title-wrap h2, .challenge-modal-title-wrap h2, .notebook-title-wrap h2, .editor-title-wrap h2 {
    font-size: 1.0625rem;
  }
  .quiz-modal-body, .challenge-modal-body, .notebook-body, .editor-body {
    padding: .75rem .875rem;
    gap: .625rem;
  }
  .quiz-modal-question { font-size: 1.0625rem; }
  .quiz-modal-options {
    grid-template-columns: 1fr !important;
    gap: .5rem;
  }
  .quiz-modal-opt-btn {
    min-height: 2.625rem;
    padding: .5rem .75rem;
    font-size: .9062rem;
  }
  .quiz-modal-feedback { font-size: .9062rem; }
  .quiz-modal-footer, .challenge-modal-footer, .notebook-footer, .editor-modal-footer {
    padding: .625rem .875rem;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
  }
  .quiz-modal-hint, .challenge-modal-hint, .notebook-hint {
    text-align: center;
    font-size: .75rem;
  }
  .quiz-modal-next-btn {
    width: 100%;
    min-height: 2.5rem;
    justify-content: center;
    font-size: .9062rem;
  }

  .challenge-options {
    grid-template-columns: 1fr !important;
  }
  .challenge-btn { font-size: .875rem; }
  .challenge-question { font-size: .9688rem; }

  .notebook-body {
    grid-template-columns: 1fr !important;
  }
  .note-box-header { font-size: .9688rem; }
  .note-box li, .note-box-takeaway p { font-size: .8438rem; }

  .editor-header-actions { flex-wrap: wrap; gap: .375rem; }
  .form-row { flex-direction: column; gap: .5rem; }
}

@media (max-width: 400px) {
  .site-shell { width: min(100% - .75rem, 36.25rem); }
  .brand-text { font-size: .8438rem; }
  .topbar-action-btn span { display: none; }
  .topbar-action-btn { padding: .375rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   QUYỀN TRUY CẬP: nhãn chế độ, đăng nhập quản trị, thông báo cập nhật
   ========================================================================== */
[hidden] { display: none !important; }

.mode-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  border-radius: 99rem;
  border: .0938rem solid var(--line-strong);
  background: var(--white);
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: 800;
  white-space: nowrap;
}
.mode-badge.is-admin { background: #e6f7ee; border-color: #6ec4a6; color: #0f5a3f; }
.mode-badge.is-viewer { background: #eef3fb; border-color: #aac0e4; color: #2c4a7c; }
.mode-badge.is-warn { background: #fff3e0; border-color: #f0b25b; color: #8a4b05; }
.mode-badge.is-local { background: #f4f0e6; border-color: #d4c7a8; color: #6a5a34; }
.btn-account.is-admin { border-color: #6ec4a6; background: #e6f7ee; color: #0f5a3f; }

.auth-modal-sheet {
  width: min(92vw, 26rem);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1.125rem;
  background: var(--white);
  border: .1562rem solid var(--line-strong);
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, .25);
  animation: modal-in .22s cubic-bezier(.2, .8, .25, 1) both;
}
.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: .125rem solid var(--line);
  background: #fbf9f4;
}
.auth-modal-header h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.auth-modal-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.auth-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.auth-form label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.auth-form .primary-button, .auth-form .secondary-button, .auth-logout { margin-top: .4rem; width: 100%; }
.auth-note { margin: 0 0 .3rem; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.auth-message { min-height: 1.3rem; margin: 0; font-size: .9rem; font-weight: 700; }
.auth-message.is-error { color: #b91c1c; }
.auth-message.is-success { color: #047857; }
.auth-message.is-info { color: var(--muted); }

.update-toast {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 2.6rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: 92vw;
  padding: .55rem .9rem;
  border-radius: .9rem;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .3);
  font-size: .95rem;
  font-weight: 700;
}
.update-toast-btn {
  padding: .3rem .8rem;
  border: 0;
  border-radius: .6rem;
  background: #fbbf24;
  color: #3b2a00;
  font-weight: 800;
  cursor: pointer;
}
.update-toast-close { border: 0; background: transparent; color: #cbd5e1; font-size: 1rem; cursor: pointer; }

.editor-status-msg.is-error { color: #b91c1c; }
.editor-status-msg.is-info { color: var(--muted); }
.form-group.flex-3 { flex: 3; }
#edWorksheetSection .form-group label { display: block; margin-top: .25rem; }

/* ==========================================================================
   ĐƯỜNG PHỐ CẢNH SÁT — nút ở thẻ khởi động + popup nhúng (spec 003)
   Nút nằm góc phải trên của thẻ câu hỏi gợi mở nên không làm đổi chiều cao thẻ.
   ========================================================================== */
.warmup-card { position: relative; }

/* Nút mở "Đường phố Cảnh sát" ở màn hình khởi động (thay cho khung câu hỏi gợi mở): hình minh họa + chữ + mũi tên.
   Câu hỏi gợi mở thu gọn trong <details class="warmup-peek"> bên dưới, không hiện sẵn. */
.police-launch {
  width: min(32rem, 92vw);
  margin: .5rem auto .875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.police-launcher {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .875rem;
  padding: .625rem 1rem .625rem .75rem;
  border: .1875rem solid #1d4ed8;
  border-radius: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  box-shadow: 0 .3125rem 0 #1e3a8a, 0 .875rem 1.5rem rgba(37, 99, 235, .3);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.police-launcher::after { /* vệt sáng lướt qua */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: police-sheen 4.5s ease-in-out infinite 1.2s;
  pointer-events: none;
}
.police-launcher:hover { transform: translateY(-.1875rem); box-shadow: 0 .5rem 0 #1e3a8a, 0 1.125rem 1.75rem rgba(37, 99, 235, .36); }
.police-launcher:active { transform: translateY(.125rem); box-shadow: 0 .1875rem 0 #1e3a8a; }
.police-launcher:focus-visible { outline: .25rem solid #fbbf24; outline-offset: .25rem; }
.police-launcher-art {
  width: 6.75rem;
  height: 4.75rem;
  display: block;
  border-radius: .875rem;
  background: linear-gradient(180deg, #bfdbfe 0%, #eff6ff 100%);
  border: .125rem solid rgba(255, 255, 255, .75);
  overflow: hidden;
}
.police-launcher-art svg { display: block; width: 100%; height: 100%; stroke: none; }
.pl-glow { fill: #fde68a; opacity: .55; }
.pl-road { fill: #475569; }
.pl-dash { stroke: #e2e8f0; stroke-width: 2; stroke-linecap: round; fill: none; }
.pl-house path { fill: #fbbf77; }
.pl-house-b path { fill: #fda4af; }
.pl-door { fill: #7c2d12; }
.pl-body { fill: #f8fafc; stroke: #1e293b; stroke-width: 1.5; }
.pl-window { fill: #7dd3fc; }
.pl-wheel { fill: #1e293b; stroke: #94a3b8; stroke-width: 2; }
.pl-siren { stroke: #1e293b; stroke-width: 1; }
.pl-siren-red { fill: #ef4444; animation: pl-blink 1s steps(1) infinite; }
.pl-siren-blue { fill: #3b82f6; animation: pl-blink 1s steps(1) infinite .5s; }
.pl-car { animation: pl-bob 1.4s ease-in-out infinite; transform-box: fill-box; }
.police-launcher-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.police-launcher-kicker {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .125rem .625rem;
  border-radius: 6.1875rem;
  background: rgba(255, 255, 255, .2);
  font-size: .75rem;
  font-weight: 800;
}
.police-launcher-text strong { font-size: 1.375rem; font-weight: 900; line-height: 1.15; text-shadow: 0 .0625rem 0 rgba(0, 0, 0, .25); }
.police-launcher-text small { font-size: .8125rem; font-weight: 600; opacity: .9; }
.police-launcher-go {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fbbf24;
  color: #78350f;
  box-shadow: 0 .1875rem 0 #b45309;
  animation: pl-nudge 1.6s ease-in-out infinite;
}
.police-launcher-go svg { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
@keyframes pl-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes pl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.06rem); } }
@keyframes pl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.25rem); } }
@keyframes police-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Câu hỏi gợi mở: thu gọn mặc định */
.warmup-peek { width: 100%; text-align: center; }
.warmup-peek summary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .875rem;
  border-radius: 6.1875rem;
  color: var(--muted);
  font-size: var(--fs-tag);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.warmup-peek summary::-webkit-details-marker { display: none; }
.warmup-peek summary:hover { background: var(--yellow-wash); color: #92580a; }
.warmup-peek summary:focus-visible { outline: .1875rem solid var(--teal); outline-offset: .125rem; }
.warmup-peek[open] summary { background: var(--yellow-wash); color: #92580a; }
.warmup-peek p {
  margin: .5rem 0 0;
  padding: .625rem 1rem;
  border: .125rem solid var(--line-strong);
  border-radius: var(--round);
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: var(--fs-content);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

/* Popup: chuyển cảnh chỉ dùng opacity/transform. Nền .modal-backdrop (z-index 200) mờ dần nhờ transition chung;
   khung trượt nhẹ + phóng khi mở, thu nhẹ khi đóng (bỏ lớp is-open ⇒ chạy ngược). */
#policeStreetModal { transition: opacity .28s ease, visibility 0s linear .28s; }
#policeStreetModal.is-open { transition: opacity .28s ease, visibility 0s; }
.police-modal-sheet {
  position: relative;
  width: min(96vw, 112rem);
  height: min(92vh, 63rem);
  display: flex;
  flex-direction: column;
  border-radius: 1.125rem;
  background: var(--white);
  border: .1562rem solid var(--line-strong);
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, .25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(.75rem) scale(.96);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .25, 1);
}
#policeStreetModal.is-open .police-modal-sheet { opacity: 1; transform: none; }
.police-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 1.25rem;
}
.police-modal-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.police-modal-hint {
  margin-left: auto;
  margin-right: .5rem;
  color: #475069;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.police-modal-hint kbd {
  padding: .0625rem .4rem;
  border: .0625rem solid var(--line-strong);
  border-radius: .3rem;
  background: var(--yellow-wash);
  color: #92580a;
  font: inherit;
  font-weight: 900;
}
.police-modal-body { position: relative; flex: 1; min-height: 0; background: #1b1e2b; }
.police-modal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .3s ease;
}
.police-modal-body iframe.is-ready { opacity: 1; }
.police-modal-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  transition: opacity .3s ease;
}
.police-modal-loading.is-done { opacity: 0; pointer-events: none; }
.police-modal-spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: .2rem solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: police-spin .8s linear infinite;
}
@keyframes police-spin { to { transform: rotate(360deg); } }
@media (max-width: 40rem) { .police-modal-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #policeStreetModal, #policeStreetModal.is-open { transition-duration: .01s; }
  .police-modal-sheet { transform: none; transition: opacity .01s; }
  .police-modal-body iframe, .police-modal-loading { transition-duration: .01s; }
  .police-modal-spinner { animation-duration: 2.4s; }
  .police-launcher, .police-launcher:hover, .police-launcher:active { transform: none; transition: none; }
  .police-launcher::after, .police-launcher-go, .pl-car { animation: none; }
  .pl-siren-red, .pl-siren-blue { animation: none; }
  .pl-siren-blue { opacity: .35; }
}
.police-modal-error {
  position: absolute;
  inset: 3rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--white);
}
.police-modal-error[hidden] { display: none; }
.police-modal-error p { margin: 0; max-width: 40rem; font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
.police-modal-error-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
/* ---- spec 011: công tắc Thử tài nhanh, thư viện bài giảng ---- */
.quiz-trigger-btn[hidden] { display: none !important; }
.quiz-toggle-group { margin-top: .6rem; }
.quiz-toggle-label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.quiz-toggle-label input[type="checkbox"] { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--primary, #e8603c); }
.quiz-toggle-label small { color: var(--text-muted, #6b7280); }
.library-box { margin-bottom: 1rem; }
.library-list { display: flex; flex-direction: column; gap: .4rem; max-height: 14rem; overflow: auto; margin-bottom: .6rem; }
.library-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem;
  padding: .5rem .7rem; border: .0625rem solid rgba(128, 128, 128, .35); border-radius: .6rem; background: rgba(255, 255, 255, .5); }
.library-row.is-current { border-color: var(--primary, #e8603c); box-shadow: 0 0 0 .125rem rgba(232, 96, 60, .18); }
.library-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; min-width: 0; }
.library-meta { font-size: .8rem; color: var(--text-muted, #6b7280); }
.library-badge { font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.library-badge.is-active { background: #16a34a; color: #fff; }
.library-btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.library-btns button { font: inherit; font-size: .8rem; padding: .25rem .6rem; border-radius: .5rem; cursor: pointer;
  border: .0625rem solid rgba(128, 128, 128, .5); background: #fff; color: inherit; }
.library-btns button:hover { background: rgba(0, 0, 0, .06); }
.library-btns button.is-danger { color: #b91c1c; border-color: rgba(185, 28, 28, .5); }
.library-empty { margin: 0; font-size: .85rem; color: var(--text-muted, #6b7280); }
.library-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.library-hint { font-size: .85rem; }
.library-hint.is-error { color: #b91c1c; }

/* ==========================================================================
   ẢNH CÁC TRẠM — nút xem (phím I), hộp xem ảnh, bảng tải ảnh của quản trị
   ========================================================================== */
.btn-station-upload { border-color: var(--yellow); background: var(--yellow-wash); color: #92580a; }
.btn-station-upload:hover { border-color: #92580a; color: #92580a; }
.teacher-tool-btn.has-image { border-color: var(--teal); background: var(--teal-wash); color: var(--teal-dark); }
.teacher-tool-btn[hidden] { display: none !important; }

.station-image-sheet, .station-upload-sheet {
  width: min(94vw, 64rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 1.125rem;
  background: var(--white);
  border: .1562rem solid var(--line-strong);
  box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, .25);
  overflow: hidden;
  animation: modal-in .22s cubic-bezier(.2, .8, .25, 1) both;
}
.station-upload-sheet { width: min(94vw, 52rem); overflow-y: auto; }
.station-upload-sheet.is-dragging { outline: .25rem dashed var(--teal); outline-offset: -.5rem; }
.station-image-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem 1.125rem;
  border-bottom: .125rem solid var(--line);
  background: #fbf9f4;
}
.station-image-header h2 { margin: 0; font-size: 1.125rem; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.station-image-body {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  background: #14161f;
}
.station-image-body img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 8.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .5rem;
}
.station-image-empty { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1rem; color: #e5e7eb; text-align: center; }
.station-image-empty > span { font-size: 3rem; }
.station-image-empty p { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.station-image-footer { flex-shrink: 0; padding: .4rem 1rem; border-top: .0938rem solid var(--line); background: #fbf9f4; text-align: center; }
.station-image-hint { color: var(--muted); font-size: var(--fs-tag); font-weight: 700; }

.station-upload-body { display: flex; flex-direction: column; gap: .75rem; padding: .875rem 1.125rem 1.125rem; }
.station-upload-help { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.station-upload-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.station-upload-toolbar .primary-button, .station-upload-toolbar .secondary-button { min-height: 2.75rem; }
.station-upload-toolbar .primary-button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.station-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.station-slot {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  grid-template-areas: "thumb info" "btns btns";
  gap: .5rem .75rem;
  padding: .625rem;
  border: .125rem solid var(--line);
  border-radius: .875rem;
  background: #fff;
}
.station-slot.is-staged { border-color: var(--teal); background: var(--teal-wash); }
.station-slot-thumb {
  grid-area: thumb;
  width: 6.5rem;
  height: 4.75rem;
  display: grid;
  place-items: center;
  border-radius: .625rem;
  background: #eef0f4;
  overflow: hidden;
}
.station-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.station-slot-empty { font-size: 1.75rem; opacity: .55; }
.station-slot-spin {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: .2rem solid var(--line-strong); border-top-color: var(--teal-dark);
  animation: police-spin .8s linear infinite;
}
.station-slot-info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-width: 0; }
.station-slot-info strong { font-size: 1rem; font-weight: 900; }
.station-slot-info small { max-width: 100%; color: var(--muted); font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-slot-badge { margin-top: .125rem; padding: .0625rem .5rem; border-radius: 6.1875rem; background: #eef0f4; color: var(--muted); font-size: .75rem; font-weight: 800; }
.station-slot-badge.is-new { background: var(--teal); color: #fff; }
.station-slot-badge.is-saved { background: #dcfce7; color: #166534; }
.station-slot-badge.is-error { background: #fee2e2; color: #991b1b; }
.station-slot-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: .375rem; }
.station-slot-btns button {
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0 .625rem;
  border: .0938rem solid var(--line-strong);
  border-radius: .5rem;
  background: #fff;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 800;
  cursor: pointer;
}
.station-slot-btns button:hover:not(:disabled) { background: var(--teal-wash); border-color: var(--teal); }
.station-slot-btns button:disabled { opacity: .4; cursor: not-allowed; }
.station-slot-btns button.is-danger { color: #b91c1c; border-color: rgba(185, 28, 28, .5); }
.station-upload-status { min-height: 1.25rem; margin: 0; font-size: .9375rem; font-weight: 700; color: var(--muted); }
.station-upload-status.is-success { color: #166534; }
.station-upload-status.is-error { color: #b91c1c; }
.station-images-box { margin-top: .75rem; }
.station-images-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: .5rem; }

/* ==========================================================================
   ĐIỆN THOẠI — bổ sung (tối ưu hiển thị trên điện thoại)
   ========================================================================== */
@media (max-width: 768px) {
  /* Chỉ <html> giữ overflow-x:hidden (cuộn theo khung nhìn); <body> để visible, nếu không body thành vùng cuộn riêng
     và position:sticky của thanh trên/dưới không còn dính theo màn hình. */
  body { overflow: visible !important; }
  /* Không bị nhảy chiều cao khi thanh địa chỉ ẩn/hiện; chừa vùng an toàn của tai thỏ / thanh điều hướng */
  .site-shell { min-height: 100dvh !important; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important; }
  .topbar { position: sticky; top: 0; z-index: 60; background: var(--paper); height: auto; min-height: 3.25rem; padding: .25rem 0; gap: .5rem; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .topbar-controls { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
  .mode-badge { display: none; }
  /* Nút đủ lớn để chạm (≥ 40px) */
  .topbar-action-btn, .progress-pill, .back-button, .teacher-tool-btn { min-height: 2.5rem; }
  .close-modal-btn { width: 2.75rem; height: 2.75rem; }
  .route-card { min-height: 4.5rem !important; }

  /* Màn hình khởi động: bớt rườm rà để vừa một màn hình điện thoại */
  .landing-view.is-active { justify-content: flex-start; padding-top: .5rem; }
  .atom-stage-large { width: 6.5rem; height: 6.5rem; }
  .landing-content h1 { font-size: clamp(1.375rem, 6.6vw, 1.75rem); overflow-wrap: anywhere; }
  .eyebrow { font-size: .6875rem; }
  .warmup-card { max-width: 100%; margin: .5rem 0 .75rem; padding: .625rem .875rem; }
  .police-launch { width: 100%; margin: .375rem 0 .625rem; }
  .police-launcher { grid-template-columns: auto 1fr auto; gap: .625rem; padding: .5rem .75rem .5rem .5rem; border-radius: 1rem; }
  .police-launcher-art { width: 4.75rem; height: 3.5rem; border-radius: .625rem; }
  .police-launcher-text strong { font-size: 1.125rem; }
  .police-launcher-text small { display: none; }
  .police-launcher-go { width: 2.25rem; height: 2.25rem; }
  .landing-btn-group { width: 100%; flex-direction: column; }
  .landing-btn-group .primary-button, .landing-btn-group .secondary-button { width: 100%; }
  .landing-footnote { flex-wrap: wrap; justify-content: center; text-align: center; gap: .25rem .5rem; }

  /* Thanh công cụ chặng: các nút xếp gọn, chạm dễ */
  /* Hàng 1: [Về bản đồ] + nhãn chặng; hàng 2: các nút công cụ chia đều chiều ngang */
  .lesson-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
  .lesson-toolbar-tools { display: contents; }
  .lesson-toolbar .back-button { order: 0; flex: 0 0 auto; }
  .lesson-toolbar .lesson-step { order: 1; flex: 1 1 8rem; min-width: 0; text-align: right; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lesson-toolbar .teacher-tool-btn { order: 2; flex: 1 1 calc(50% - .25rem); justify-content: center; }

  /* Thanh nút dưới cùng của chặng dính đáy màn hình để luôn với tới bằng ngón cái */
  .lesson-bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-top: .5rem;
    padding: .5rem 0 max(.5rem, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(251, 248, 242, 0) 0, var(--paper) .75rem);
    gap: .375rem !important;
  }
  /* Hai nút hành động nằm cạnh nhau cho đỡ chiếm màn hình */
  .lesson-bottom-actions { flex-direction: row !important; gap: .5rem !important; }
  .lesson-bottom-actions .quiz-trigger-btn, .lesson-bottom-actions .lesson-next-btn {
    width: auto !important; flex: 1 1 0; min-width: 0; padding: 0 .5rem !important;
    line-height: 1.15; text-align: center; font-size: .875rem !important;
  }
  .reveal-status-hint { padding: .125rem .5rem; }

  /* Hộp thoại dạng tờ giấy trượt từ dưới lên, dùng chiều cao động */
  .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .quiz-modal-sheet, .challenge-modal-sheet, .notebook-sheet, .editor-modal-sheet,
  .station-image-sheet, .station-upload-sheet, .auth-modal-sheet, .police-modal-sheet {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 1.125rem 1.125rem 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .police-modal-sheet { height: 94dvh !important; }
  .station-image-sheet { max-height: 94dvh !important; }
  .station-image-body { padding: .5rem; }
  .station-image-body img { max-height: calc(94dvh - 7rem); }
  .station-image-hint { font-size: .75rem; }
  .station-slots { grid-template-columns: 1fr; }
  .station-slot { grid-template-columns: 5.5rem 1fr; }
  .station-slot-thumb { width: 5.5rem; height: 4rem; }
  .station-upload-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .station-upload-toolbar .primary-button, .station-upload-toolbar .secondary-button { white-space: nowrap; padding: 0 .625rem; font-size: .9375rem !important; }
  .station-upload-toolbar .btn-subtle { grid-column: 1 / -1; min-height: 2.5rem; }
  .station-upload-help { font-size: .875rem; }

  /* Đầu cửa sổ Soạn bài: tiêu đề một hàng, các nút công cụ hàng dưới, nút đóng ở góc */
  .editor-modal-header { position: relative; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
  .editor-title-wrap { flex: 1 1 100%; min-width: 0; padding-right: 3rem; }
  .editor-title-wrap h2 { font-size: 1rem !important; line-height: 1.25; }
  .editor-header-actions { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
  .editor-header-actions .editor-select { flex: 1 1 100%; width: 100%; min-width: 0; min-height: 2.5rem; }
  .editor-header-actions .editor-btn-secondary { flex: 1 1 0; min-width: 0; min-height: 2.5rem; justify-content: center; white-space: nowrap; padding-left: .5rem; padding-right: .5rem; }
  .editor-header-actions .close-modal-btn { position: absolute; top: .5rem; right: .5rem; }
  .editor-modal-sheet { display: flex; flex-direction: column; overflow: hidden !important; }
  .editor-modal-header, .editor-tabs, .editor-modal-footer { flex-shrink: 0; }
  .editor-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
  .editor-modal-footer { position: sticky; bottom: 0; background: var(--white); z-index: 2; }
  .editor-footer-buttons { display: flex; gap: .5rem; }
  .editor-footer-buttons .secondary-button { flex: 0 0 auto; }
  .editor-footer-buttons .primary-button { flex: 1 1 auto; }

  /* Ô nhập không bị iOS tự phóng to khi chạm (cần ≥ 16px) */
  input, select, textarea, .form-input, .form-select, .form-textarea { font-size: 1rem !important; }
  .editor-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .editor-tab-btn { flex: 0 0 auto; white-space: nowrap; }
  .update-toast { left: .5rem; right: .5rem; bottom: max(.5rem, env(safe-area-inset-bottom)); width: auto; }
}

/* Điện thoại xoay ngang (rộng > 768px nhưng thấp): cuộn dọc như điện thoại thay vì ép vừa 100vh */
@media (max-height: 520px) and (pointer: coarse) and (min-width: 769px) {
  html, body { height: auto !important; max-height: none !important; overflow-y: auto !important; }
  html { font-size: 14px !important; }
  .site-shell { height: auto !important; min-height: 100dvh; max-height: none !important; overflow: visible !important; }
  main, .view, .view.is-active { height: auto !important; overflow: visible !important; }
  .presenter-bar { display: none !important; }
  .landing-view.is-active { padding: .5rem 0 1rem; }
  .atom-stage-large { display: none; }
  .modal-backdrop { padding: .25rem; }
  .quiz-modal-sheet, .challenge-modal-sheet, .notebook-sheet, .editor-modal-sheet,
  .station-image-sheet, .station-upload-sheet, .auth-modal-sheet { max-height: 96dvh; }
  .station-image-body img { max-height: calc(96dvh - 6rem); }
}

/* ==========================================================================
   Spec 012 — chọn cách làm bài tổng kết, lưới ảnh tổng kết, xóa tất cả ảnh
   ========================================================================== */
.summary-mode-box { margin: 0 0 .75rem; padding: .625rem .875rem; border: .125rem solid var(--line); border-radius: .875rem; }
.summary-mode-box legend { padding: 0 .5rem; font-weight: 800; }
.summary-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.summary-mode-card {
  display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem;
  border: .125rem solid var(--line-strong); border-radius: .75rem; background: #fff; cursor: pointer;
}
.summary-mode-card input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; accent-color: var(--coral); }
.summary-mode-card small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.summary-mode-card:has(input:checked) { border-color: var(--coral); background: var(--coral-wash); box-shadow: 0 0 0 .125rem rgba(230, 90, 60, .18); }
.summary-mode-card:has(input:focus-visible) { outline: .1875rem solid var(--teal); outline-offset: .125rem; }
.summary-mode-note { margin: .5rem 0 0; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.summary-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .375rem 0; }
.summary-thumb { width: 7.5rem; height: 5.25rem; border-radius: .625rem; overflow: hidden; background: #eef0f4; border: .0938rem solid var(--line-strong); }
.summary-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
[hidden] { display: none !important; }

/* Trạm tổng kết ở chế độ ảnh: thay bảng bằng lưới ảnh, vừa khung không cuộn trên màn chiếu */
.table-container.is-images { border: 0; background: transparent; box-shadow: none; overflow: hidden; align-items: stretch; }
.summary-images {
  flex: 1; min-height: 0; width: 100%;
  display: grid; gap: .625rem; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr);
}
.summary-images[data-count="2"] { grid-template-columns: 1fr 1fr; }
.summary-images[data-count="3"], .summary-images[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.summary-image-btn {
  min-width: 0; min-height: 0; padding: .375rem; display: grid; place-items: center;
  border: .125rem solid var(--line-strong); border-radius: .875rem; background: #fff; cursor: zoom-in; box-shadow: var(--shadow);
}
.summary-image-btn:hover { border-color: var(--teal); }
.summary-image-btn { position: relative; }
/* Ảnh phủ trọn ô và co lại cho vừa (không bị cắt): ô lưới có chiều cao xác định nên dùng định vị tuyệt đối */
.summary-image-btn img {
  position: absolute; inset: .375rem; width: calc(100% - .75rem); height: calc(100% - .75rem);
  object-fit: contain; display: block; border-radius: .5rem;
}
.summary-images-empty {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center;
  border: .125rem dashed var(--line-strong); border-radius: .875rem; background: #fff; color: var(--muted); font-weight: 700;
}
.summary-images-empty > span { font-size: 3rem; opacity: .6; }
.summary-images-empty p { margin: 0; }
@media (max-width: 768px) {
  .summary-mode-cards { grid-template-columns: 1fr; }
  .table-container.is-images { overflow: visible; display: block; }
  .summary-images, .summary-images[data-count="2"], .summary-images[data-count="3"], .summary-images[data-count="4"] { display: flex; flex-direction: column; }
  .summary-image-btn { width: 100%; position: static; }
  .summary-image-btn img { position: static; width: 100%; height: auto; max-height: none; }
  .summary-thumb { width: 5.5rem; height: 4rem; }
}

/* Nút xóa tất cả ảnh + dòng nhắc trạm chưa lưu trong bảng tải ảnh */
.station-delete-all { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; }
.station-delete-all svg { width: 1rem; height: 1rem; }
.station-delete-all:disabled { opacity: .45; cursor: not-allowed; }
.station-upload-note { margin: 0; padding: .5rem .75rem; border-radius: .625rem; background: #fff7e0; color: #92580a; font-size: .875rem; font-weight: 700; }
@media (max-width: 768px) {
  .station-upload-toolbar .station-delete-all { grid-column: 1 / -1; justify-content: center; margin-left: 0; }
}

/* ==========================================================================
   Spec 012 — ô soạn chữ đậm/nghiêng trực quan + thanh B/I dùng chung
   ========================================================================== */
.rich-toolbar {
  position: sticky; top: 0; z-index: 5; flex-shrink: 0;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .375rem 1rem; background: #fffdf8; border-bottom: .125rem solid var(--line);
}
.rich-btn {
  width: 2.5rem; height: 2.25rem; display: grid; place-items: center;
  border: .125rem solid var(--line-strong); border-radius: .5rem; background: #fff; color: var(--ink);
  font-size: 1.0625rem; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s;
}
.rich-btn-bold { font-weight: 900; }
.rich-btn-italic { font-style: italic; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.rich-btn:hover:not(:disabled) { border-color: var(--coral); background: var(--coral-wash); }
.rich-btn.is-active { background: var(--coral); border-color: var(--coral-dark); color: #fff; }
.rich-btn:disabled { opacity: .4; cursor: not-allowed; }
.rich-toolbar-hint { flex: 1 1 14rem; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.rich-toolbar.is-disabled .rich-toolbar-hint { color: var(--muted-light); }

.rich-field {
  display: block; width: 100%; min-height: 2.5rem; overflow-wrap: anywhere; cursor: text;
  white-space: pre-wrap; line-height: 1.45; outline: none;
}
.rich-field.rich-multiline { min-height: 4.5rem; }
.rich-field:focus { border-color: var(--teal); box-shadow: 0 0 0 .1875rem rgba(35, 116, 90, .22); }
.rich-field:empty::before { content: attr(data-placeholder); color: var(--muted-light); pointer-events: none; }
.rich-field b, .rich-field strong { font-weight: 900; }
.rich-field i, .rich-field em { font-style: italic; }
@media (max-width: 768px) {
  .rich-toolbar { padding: .375rem .625rem; gap: .375rem; }
  .rich-btn { width: 2.75rem; height: 2.5rem; }
  .rich-toolbar-hint { font-size: .75rem; flex-basis: 100%; }
}

/* Nút "Tạo trạm mới" cố định ở thanh tab của Soạn bài (spec 012) */
.editor-tab-action {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.25rem;
  padding: 0 .875rem;
  border: .125rem solid var(--coral);
  border-radius: .625rem;
  background: var(--coral);
  color: #fff;
  font-size: .8438rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.editor-tab-action:hover:not(:disabled) { background: var(--coral-dark); border-color: var(--coral-dark); }
.editor-tab-action:disabled { opacity: .45; cursor: not-allowed; }
.editor-tab-action svg { width: 1rem; height: 1rem; stroke-width: 3; }
@media (max-width: 768px) {
  .editor-tabs { position: relative; }
  /* Trên điện thoại chỉ còn dấu ＋ (luôn thấy ở mép phải, không che nhãn tab) */
  .editor-tab-action { position: sticky; right: 0; margin-left: .5rem; box-shadow: -.5rem 0 .5rem #f6f3eb; min-height: 2.5rem; min-width: 2.75rem; justify-content: center; padding: 0 .625rem; }
  .editor-tab-action span { display: none; }
  .editor-tab-action svg { width: 1.25rem; height: 1.25rem; }
}

/* Màn hình vừa/máy tính bảng: thanh phím tắt gọn lại để không bị cắt hai đầu */
@media (min-width: 769px) and (max-width: 1100px) {
  .presenter-bar { gap: .5rem; font-size: .7rem; }
  .presenter-tag { display: none; }
}

@media (max-width: 400px) {
  .topbar { flex-wrap: wrap; }
  .brand { flex-basis: 100%; }
  .topbar-controls { width: 100%; justify-content: space-between; }
  .btn-station-upload span, .btn-editor span { display: none; }
  .topbar-action-btn { min-width: 2.5rem; justify-content: center; }
  .police-launcher-art { width: 4rem; height: 3rem; }
  .police-launcher-text strong { font-size: 1rem; }
}