/* Giáo án pages for teachers: library, overview, the full-screen teaching view and the print layout.
   Every class is prefixed lt- so nothing collides with the rest of the site. Palette follows life-skills.css. */
.lt-page, .lt-overlay, .lt-print { --lt-ink:#1e293b; --lt-muted:#526177; --lt-blue:#2f72c4; --lt-green:#4aa863; --lt-yellow:#ffd166; --lt-pink:#ee6c9d; --lt-line:#e2e8f0; font-family:'Nunito',sans-serif; color:var(--lt-ink); }
.lt-page *, .lt-overlay *, .lt-print * { box-sizing:border-box; }
.lt-page { width:min(1216px,calc(100% - 48px)); margin:0 auto; padding:40px 0 72px; min-height:60vh; }
.lt-page h1, .lt-page h2, .lt-overlay h2, .lt-print h1, .lt-print h2 { font-family:inherit; font-weight:900; line-height:1.25; letter-spacing:-.01em; margin:0; color:var(--lt-ink); }
.lt-page p { margin:0; }
.lt-page :is(a,button,input,select):focus-visible, .lt-overlay :is(a,button):focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }
.lt-overlay:focus { outline:none; }

/* Buttons and small parts */
.lt-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:10px 26px; border:2px solid var(--lt-blue); border-radius:99px; background:var(--lt-blue); color:#fff; font:900 17px/1.3 'Nunito',sans-serif; text-align:center; text-decoration:none; cursor:pointer; transition:background-color .15s,transform .15s; }
.lt-btn:hover:not(:disabled) { background:#265fa6; border-color:#265fa6; }
.lt-btn:disabled { opacity:.45; cursor:not-allowed; }
.lt-btn-light { background:#fff; color:var(--lt-blue); border-color:#bfdcf0; }
.lt-btn-light:hover:not(:disabled) { background:#f0f8fd; border-color:#9fcbe8; }
.lt-link { display:inline-block; min-height:44px; padding:0 8px; border:0; background:none; color:var(--lt-blue); font:900 inherit/1.3 'Nunito',sans-serif; text-decoration:underline; cursor:pointer; }
.lt-pill { display:inline-flex; align-items:center; padding:6px 16px; border-radius:99px; background:#fff7dd; color:#8a5a00; font-weight:900; white-space:nowrap; }
.lt-tag { display:inline-block; padding:2px 12px; border-radius:99px; background:var(--lt-yellow); color:#3b2f00; font-style:normal; font-size:13px; font-weight:900; line-height:1.5; white-space:nowrap; }
.lt-label { display:block; margin-bottom:6px; font-size:13px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#64748b; }
.lt-eyebrow { display:inline-block; padding:4px 14px; border-radius:99px; background:#eaf5fa; color:#2563a8; font-size:12px; font-weight:900; letter-spacing:.08em; }
.lt-muted { color:var(--lt-muted); font-size:16px; }
.lt-error { padding:14px 18px; border-radius:14px; background:#fff0f5; border:1px solid #fbd4e0; color:#8f2b55; font-weight:700; }
.lt-empty { display:grid; justify-items:start; gap:16px; padding:36px 28px; border-radius:20px; background:#f8fafc; border:1px dashed #cbd5e1; color:var(--lt-muted); font-size:18px; font-weight:700; }

/* Lesson lines */
.lt-lines { display:grid; gap:.45em; }
.lt-line { position:relative; margin:0; }
.lt-line-1 { padding-left:1.2em; } .lt-line-1::before { content:'•'; position:absolute; left:.25em; }
.lt-line-2 { padding-left:2.4em; } .lt-line-2::before { content:'–'; position:absolute; left:1.35em; }

/* Sign-in */
.lt-login { display:grid; gap:14px; justify-items:center; max-width:560px; margin:24px auto; padding:36px 28px; border-radius:28px; background:linear-gradient(135deg,#e6f4f8,#fff 55%,#fff0f5); border:1px solid #dbeef6; text-align:center; }
.lt-login h1 { font-size:clamp(28px,3vw,38px); }
.lt-login-list { display:grid; gap:12px; width:100%; margin-top:8px; }
.lt-teacher { display:grid; gap:2px; min-height:64px; padding:12px 20px; border:2px solid #bfdcf0; border-radius:18px; background:#fff; color:var(--lt-ink); font-family:inherit; text-align:left; cursor:pointer; }
.lt-teacher strong { font-size:19px; } .lt-teacher small { font-size:15px; color:var(--lt-muted); font-weight:700; }
.lt-teacher:hover:not(:disabled) { border-color:var(--lt-blue); background:#f0f8fd; }
.lt-teacher:disabled { opacity:.6; }

/* Library */
.lt-library { display:grid; gap:24px; }
.lt-library-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.lt-library-head h1 { margin-top:10px; font-size:clamp(28px,3.2vw,40px); }
.lt-who { display:flex; align-items:center; gap:16px; }
.lt-who > span { display:grid; text-align:right; } .lt-who small { color:var(--lt-muted); font-weight:700; }
.lt-filters { display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:14px; padding:16px; border-radius:20px; background:#f2f9fd; border:1px solid #dbeef6; }
.lt-field { display:grid; gap:4px; font-weight:800; font-size:14px; color:#475569; }
.lt-field input, .lt-field select { width:100%; min-height:48px; padding:8px 14px; border:2px solid #cfe6f3; border-radius:14px; background:#fff; color:var(--lt-ink); font:700 16px 'Nunito',sans-serif; }
.lt-groups { display:grid; gap:28px; }
.lt-group h2 { margin-bottom:14px; font-size:22px; color:#2563a8; }
.lt-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.lt-card { display:grid; align-content:start; gap:8px; min-height:132px; padding:18px; border-radius:20px; background:#fff; border:2px solid #e2e8f0; color:var(--lt-ink); text-decoration:none; transition:border-color .15s,box-shadow .15s,transform .15s; }
.lt-card:hover { border-color:var(--lt-blue); box-shadow:0 10px 24px #2f72c41f; transform:translateY(-2px); }
.lt-card strong { font-size:19px; line-height:1.3; }
.lt-code { justify-self:start; padding:2px 12px; border-radius:99px; background:#edf8ef; color:#2c7a41; font-weight:900; font-size:14px; }
.lt-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:auto; color:var(--lt-muted); font-size:15px; font-weight:700; }
.lt-pages { display:flex; align-items:center; justify-content:center; gap:18px; font-weight:800; }

/* Overview */
.lt-over { display:grid; gap:22px; }
.lt-over-top { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:12px 18px; border-radius:20px; background:#f2f9fd; border:1px solid #dbeef6; }
.lt-over-where { color:#2563a8; font-weight:900; font-size:18px; }
.lt-over-top .lt-pill { margin-left:auto; }
.lt-over-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:start; }
.lt-over-main { display:grid; gap:20px; }
.lt-over-main h1 { font-size:clamp(28px,3.4vw,44px); }
.lt-over-block { display:grid; gap:8px; font-size:17px; line-height:1.55; }
.lt-over-group { display:grid; gap:4px; } .lt-over-group > b { color:#2c7a41; }
.lt-actions { display:flex; flex-wrap:wrap; gap:12px; }
.lt-acts { display:grid; gap:10px; align-content:start; }
.lt-act { display:flex; align-items:center; gap:10px; min-height:56px; padding:12px 16px; border-radius:18px; background:#f8fafc; border:1px solid var(--lt-line); font-weight:800; font-size:17px; }
.lt-act-title { flex:1 1 auto; min-width:0; }
.lt-act small { margin-left:auto; color:#64748b; font-weight:700; font-size:15px; white-space:nowrap; }

/* Teaching view: above the whole site */
.lt-overlay { position:fixed; inset:0; z-index:999990; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; background:linear-gradient(135deg,#e6f4f8,#fff 55%,#fff0f5); }
.lt-bar { display:flex; align-items:center; gap:16px; padding:12px 22px; background:#f2f9fd; border-bottom:1px solid #dbeef6; font-size:clamp(15px,1.5vw,20px); font-weight:800; }
.lt-bar-title { flex:0 1 auto; min-width:0; max-width:30%; overflow:hidden; color:#2563a8; white-space:nowrap; text-overflow:ellipsis; }
.lt-steps { display:flex; flex:1 1 0; justify-content:center; flex-wrap:nowrap; gap:8px; min-width:0; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.lt-steps::-webkit-scrollbar { display:none; }
.lt-step-pill { flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:4px 16px; border-radius:99px; background:#e2e8f0; color:#475569; white-space:nowrap; max-width:36ch; overflow:hidden; text-overflow:ellipsis; }
.lt-step-pill.is-on { flex:0 1 auto; min-width:0; background:var(--lt-blue); color:#fff; }
.lt-step-pill.is-done { background:#cfecd5; color:#2c7a41; }
.lt-clock { flex:0 0 auto; font-size:clamp(16px,1.6vw,22px); }
.lt-clock.is-over { background:#fde2e2; color:#b42318; }
.lt-body { position:relative; flex:1 1 auto; min-height:0; display:flex; }
/* The stage. Sizes inside it are written twice: first in window units (the fallback for tablets whose browser has no
   container queries, before Safari 16 / Chrome 105), then, in the @supports block further down, against the stage itself
   (cqw, cqh). --lt-stage-h approximates the stage's inner height for the fallback (bars and padding taken off). */
.lt-overlay { --lt-stage-h:calc(100vh - 150px - 2 * clamp(16px,3.2vh,40px)); }
.lt-stage { flex:1 1 0; min-width:0; display:flex; overflow:auto; padding:clamp(16px,3.2vh,40px) clamp(20px,4.4vw,80px); --lt-scale:1; cursor:pointer; -webkit-overflow-scrolling:touch; }

/* Spoken step: Capy on the left, the bubble and the children's box on the right */
/* Capy gives up some width when the text has to shrink (--lt-scale below 1), so long steps get a wider bubble. */
.lt-now { display:grid; grid-template-columns:clamp(150px,calc(23vw * (.5 + var(--lt-scale,1) / 2)),380px) minmax(0,1fr); align-items:center; gap:clamp(8px,1.3vw,24px); width:100%; max-width:1440px; margin:auto; }
.lt-now.has-figures { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3vw,56px); }
.lt-overlay .lt-capy { display:block; width:100%; height:auto; max-height:var(--lt-stage-h); object-fit:contain; }
.lt-figures { display:grid; grid-template-columns:repeat(var(--lt-cols,1),minmax(0,1fr)); grid-template-rows:repeat(var(--lt-rows,1),minmax(0,1fr)); gap:12px; height:var(--lt-stage-h); min-width:0; }
/* Each picture is shown whole and as large as its cell allows (Teach.jsx picks the column count that makes them largest);
   the shadow follows the picture, not the cell. */
.lt-figures img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; filter:drop-shadow(0 8px 18px #2364b324); }
.lt-talk { display:grid; justify-items:start; gap:clamp(10px,1.8vh,20px); min-width:0; }
.lt-chip { max-width:100%; padding:.3em .95em; border-radius:99px; background:#e4effb; color:#2364b3; font-size:max(18px,calc(clamp(18px,1.6vw,26px) * var(--lt-scale,1))); font-weight:800; line-height:1.3; }
.lt-bubble { position:relative; width:100%; padding:clamp(18px,2vw,34px) clamp(22px,2.4vw,40px); border-radius:clamp(22px,2.4vw,40px); border:2px solid #d6e4f3; background:#fff; box-shadow:0 12px 30px #2364b314; }
.lt-bubble::before { content:''; position:absolute; left:-13px; top:50%; width:24px; height:24px; margin-top:-12px; border-left:2px solid #d6e4f3; border-bottom:2px solid #d6e4f3; background:#fff; transform:rotate(45deg); }
.lt-say .lt-line, .lt-say-text { margin:0; font-size:max(22px,calc(clamp(26px,3vw,50px) * var(--lt-scale,1))); font-weight:800; line-height:1.28; overflow-wrap:break-word; }
.lt-say.lt-lines { gap:.35em; }
.lt-empty-step { color:var(--lt-muted); }
.lt-kid-box { display:flex; align-items:baseline; gap:clamp(10px,1.1vw,16px); width:100%; padding:clamp(12px,1.3vw,20px) clamp(16px,1.8vw,28px); border-radius:clamp(16px,1.6vw,26px); background:#e8f6ec; border:1px solid #cfecd5; color:#1d6b3a; }
.lt-kid-tag { flex:none; padding:.15em .8em; border-radius:99px; background:#cfecd5; font-size:max(14px,calc(clamp(14px,1.1vw,18px) * var(--lt-scale,1))); font-weight:900; letter-spacing:.07em; text-transform:uppercase; transform:translateY(-.1em); }
.lt-kid { flex:1 1 auto; min-width:0; }
/* Children's lines never go below 20px. */
.lt-kid .lt-line { font-size:max(20px,calc(clamp(21px,1.8vw,32px) * var(--lt-scale,1))); font-weight:700; line-height:1.36; }
.lt-more { position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; align-items:flex-end; justify-content:center; height:96px; padding-bottom:14px; background:linear-gradient(to bottom,#ffffff00,#ffffffee 70%); color:#2563a8; font-size:clamp(16px,1.6vw,22px); font-weight:900; pointer-events:none; }
/* At the smallest text a step that is still over gives up spacing (tight); if it still has to scroll, the scrolling area
   ends with room for the "Còn nữa ↓" cue, so the last line can be scrolled clear of it (scroll). Set by Teach.jsx. */
.lt-stage[data-fit] { padding-top:10px; padding-bottom:10px; }
.lt-stage[data-fit] .lt-talk { gap:8px; }
.lt-stage[data-fit] .lt-bubble { padding:12px 20px; }
.lt-stage[data-fit] .lt-kid-box { padding:8px 14px; }
.lt-stage[data-fit] :is(.lt-say, .lt-kid).lt-lines { gap:.15em; }
.lt-stage[data-fit] :is(.lt-say, .lt-kid) .lt-line { line-height:1.2; }
.lt-stage[data-fit="scroll"] { padding-bottom:96px; }

/* Material step: one line from the teacher, then the game fills the rest of the stage */
.lt-stage.is-material { overflow:hidden; padding:clamp(8px,1.4vh,16px) clamp(12px,1.8vw,26px); cursor:default; }
.lt-play { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:clamp(6px,1.2vh,12px); }
.lt-cue { flex:0 0 auto; display:flex; align-items:center; gap:clamp(8px,1vw,14px); min-height:50px; padding:3px clamp(10px,1.4vw,18px) 3px 6px; border-radius:16px; border:1px solid #dfe6ee; background:#fff; font-size:clamp(17px,1.6vw,24px); font-weight:800; }
.lt-overlay .lt-cue-capy { flex:none; width:clamp(42px,4vw,56px); height:clamp(42px,4vw,56px); object-fit:contain; }
.lt-cue .lt-label { flex:none; margin:0; }
/* The cue takes what the tag leaves and ends with an ellipsis. The tag keeps a short title whole; a long one is cut at
   45% of the line, and the label "Học liệu" is never cut. */
.lt-cue-text { flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lt-cue-tag { flex:0 0 auto; display:flex; gap:.35em; min-width:0; max-width:45%; padding:5px 14px; border-radius:12px; background:#f1e5ff; color:#6a3f96; font-size:clamp(14px,1.15vw,17px); font-weight:900; white-space:nowrap; }
.lt-cue-tag b { flex:none; font-weight:900; }
.lt-cue-title { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lt-game { flex:1 1 auto; min-height:0; display:flex; border:2px solid #ece6d2; border-radius:24px; background:#fffcf3; overflow:hidden; }
.lt-game > .math-player.is-embedded { flex:1 1 auto; min-width:0; height:auto; }
.lt-game-state { display:grid; gap:20px; place-content:center; justify-items:center; flex:1 1 auto; padding:24px; text-align:center; }
.lt-game-state h2 { font-size:clamp(22px,2.4vw,34px); }

/* Footer: back, where we are, what comes next, leave, forward */
.lt-foot { display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); padding:8px clamp(12px,1.6vw,22px); background:#fffffff0; border-top:1px solid var(--lt-line); color:#64748b; font-size:clamp(14px,1.35vw,18px); }
.lt-foot .lt-label { flex:none; margin:0; font-size:clamp(14px,1.35vw,18px); white-space:nowrap; }
.lt-next { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lt-foot .lt-btn-light { flex:0 0 auto; }
.lt-nav { flex:none; display:grid; place-items:center; width:54px; height:54px; padding:0; border:1px solid #cbd5e1; border-radius:50%; background:#fff; color:var(--lt-blue); cursor:pointer; box-shadow:0 4px 12px #1e293b1a; transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s; }
.lt-nav:hover:not(:disabled) { border-color:var(--lt-blue); }
.lt-nav:disabled { opacity:.3; cursor:not-allowed; }
.lt-nav.is-ready { background:var(--lt-blue); border-color:var(--lt-blue); color:#fff; box-shadow:0 0 0 8px #2f72c433; }
@media (prefers-reduced-motion:no-preference) {
    .lt-nav.is-ready { animation:lt-ready 1.8s ease-in-out infinite; }
    @keyframes lt-ready { 0%, 100% { box-shadow:0 0 0 6px #2f72c440; } 50% { box-shadow:0 0 0 14px #2f72c414; } }
}
.lt-nav.is-finish { width:auto; padding:0 24px; border-radius:99px; background:var(--lt-green); border-color:var(--lt-green); color:#fff; font:900 20px/1 'Nunito',sans-serif; }
.lt-nav.is-finish.is-ready { box-shadow:0 0 0 8px #4aa86340; }
@media (prefers-reduced-motion:no-preference) {
    .lt-nav.is-finish.is-ready { animation-name:lt-ready-finish; }
    @keyframes lt-ready-finish { 0%, 100% { box-shadow:0 0 0 6px #4aa86352; } 50% { box-shadow:0 0 0 14px #4aa8631a; } }
}

@media (max-width:900px) {
    .lt-over-grid { grid-template-columns:minmax(0,1fr); }
    .lt-filters { grid-template-columns:minmax(0,1fr); }
    .lt-bar-title { max-width:24%; }
}
/* Narrow screens: Capy (or the pictures) above the bubble, smaller */
@media (max-width:700px) {
    .lt-now, .lt-now.has-figures { grid-template-columns:minmax(0,1fr); justify-items:start; align-content:center; gap:14px; }
    .lt-overlay .lt-capy { width:clamp(96px,22vw,150px); max-height:none; }
    .lt-now.has-figures .lt-figures { width:100%; height:calc(var(--lt-stage-h) * .38); }
    .lt-talk { width:100%; }
    .lt-bubble::before, .lt-now.has-figures .lt-bubble::before { left:clamp(36px,9vw,64px); top:-13px; margin-top:0; transform:rotate(135deg); }
    .lt-cue { flex-wrap:wrap; padding-block:6px; }
    .lt-cue-tag { max-width:100%; }
}
/* Fallback only (no container queries), screen taller than wide: Capy, or the pictures, above the bubble. */
@supports not (container-type:size) {
    @media (orientation:portrait) {
        .lt-now, .lt-now.has-figures { grid-template-columns:minmax(0,1fr); justify-items:start; align-content:center; gap:16px; }
        .lt-overlay .lt-capy { width:clamp(120px,26vw,240px); max-height:none; }
        .lt-now.has-figures .lt-figures { width:100%; height:calc(var(--lt-stage-h) * .5); }
        .lt-talk { width:100%; }
        .lt-bubble::before, .lt-now.has-figures .lt-bubble::before { left:clamp(36px,9vw,64px); top:-13px; margin-top:0; transform:rotate(135deg); }
    }
}

/* With container queries: the stage is a size container and what is inside measures itself against it. */
@supports (container-type:size) {
    .lt-stage { container-type:size; }
    .lt-now { grid-template-columns:clamp(150px,calc(25cqw * (.5 + var(--lt-scale,1) / 2)),380px) minmax(0,1fr); gap:clamp(8px,1.4cqw,24px); }
    .lt-now.has-figures { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.4cqw,56px); }
    .lt-overlay .lt-capy { max-height:100cqh; }
    .lt-figures { height:100cqh; }
    .lt-talk { gap:clamp(10px,1.8cqh,20px); }
    .lt-chip { font-size:max(18px,calc(clamp(18px,1.7cqw,26px) * var(--lt-scale,1))); }
    .lt-bubble { padding:clamp(18px,2.2cqw,34px) clamp(22px,2.6cqw,40px); border-radius:clamp(22px,2.6cqw,40px); }
    .lt-say .lt-line, .lt-say-text { font-size:max(22px,calc(clamp(26px,3.3cqw,50px) * var(--lt-scale,1))); }
    .lt-kid-box { gap:clamp(10px,1.2cqw,16px); padding:clamp(12px,1.4cqw,20px) clamp(16px,2cqw,28px); border-radius:clamp(16px,1.8cqw,26px); }
    .lt-kid-tag { font-size:max(14px,calc(clamp(14px,1.2cqw,18px) * var(--lt-scale,1))); }
    .lt-kid .lt-line { font-size:max(20px,calc(clamp(21px,2cqw,32px) * var(--lt-scale,1))); }
    .lt-play { gap:clamp(6px,1.2cqh,12px); }
    .lt-cue { gap:clamp(8px,1cqw,14px); padding:3px clamp(10px,1.4cqw,18px) 3px 6px; font-size:clamp(17px,1.7cqw,24px); }
    .lt-overlay .lt-cue-capy { width:clamp(42px,4cqw,56px); height:clamp(42px,4cqw,56px); }
    .lt-cue-tag { font-size:clamp(14px,1.2cqw,17px); }
    .lt-game-state h2 { font-size:clamp(22px,2.6cqw,34px); }
    /* A stage taller than wide (tablet held upright): a larger Capy; the pictures go above the bubble and take the height
       the bubble does not need */
    @container (orientation:portrait) {
        .lt-now { grid-template-columns:clamp(150px,calc(30cqw * (.5 + var(--lt-scale,1) / 2)),380px) minmax(0,1fr); }
        .lt-now.has-figures { display:flex; flex-direction:column; align-items:stretch; height:100cqh; gap:clamp(18px,2.4cqh,32px); }
        .lt-now.has-figures .lt-figures { flex:1 1 0; width:100%; height:auto; min-height:34cqh; }
        .lt-now.has-figures .lt-talk { flex:none; }
        .lt-now.has-figures .lt-bubble::before { left:clamp(36px,10cqw,64px); top:-13px; margin-top:0; transform:rotate(135deg); }
    }
    @media (max-width:700px) {
        .lt-now, .lt-now.has-figures { grid-template-columns:minmax(0,1fr); gap:14px; }
        .lt-overlay .lt-capy { width:clamp(96px,24cqw,150px); max-height:none; }
        /* A phone on its side: pictures sized from the stage, not from the window (the narrow rule above uses the window). */
        .lt-now.has-figures .lt-figures { height:38cqh; }
        .lt-bubble::before, .lt-now.has-figures .lt-bubble::before { left:clamp(36px,10cqw,64px); }
    }
}

/* Print: only the paper layout */
.lt-print { display:none; }
@media print {
    body[data-lt-print] > *:not(.lt-print) { display:none !important; }
    body[data-lt-print] > .lt-print { display:block !important; margin:0; padding:0; color:#000; background:#fff; font-size:12pt; line-height:1.45; }
    .lt-print h1 { font-size:18pt; text-align:center; text-transform:uppercase; }
    .lt-print h2 { margin:14pt 0 6pt; font-size:13pt; text-transform:uppercase; }
    .lt-print-program { text-align:center; margin:0 0 4pt; }
    .lt-print-meta { text-align:center; margin:4pt 0 10pt; }
    .lt-print-group { margin:0 0 6pt; }
    .lt-print-table { width:100%; border-collapse:collapse; }
    .lt-print-table th, .lt-print-table td { border:1px solid #000; padding:5pt 7pt; vertical-align:top; text-align:left; }
    .lt-print-table thead th { text-align:center; background:#eee; }
    .lt-print-table { table-layout:fixed; }
    .lt-print-table thead th:first-child { width:62%; }
    .lt-print-table thead { display:table-header-group; }
    .lt-print-table tr { break-inside:avoid; }
    .lt-print-activity th { background:#f5f5f5; }
    .lt-print-heading { display:block; margin-bottom:3pt; }
    .lt-print-image { display:block; max-width:50%; max-height:6cm; margin-top:5pt; }
    .lt-print .lt-line-1::before, .lt-print .lt-line-2::before { content:'-'; }
}

/* Toán vui material picker, used inside the shared plan form */
.lt-mp { display:grid; gap:8px; font-family:'Nunito',sans-serif; color:#1e293b; }
.lt-mp-label { font-weight:900; font-size:15px; }
.lt-mp-current { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.lt-mp-title { font-weight:800; font-size:16px; overflow-wrap:anywhere; }
.lt-mp-btn { justify-self:start; min-height:44px; padding:8px 18px; border:2px solid #bfdcf0; border-radius:99px; background:#fff; color:#2f72c4; font:900 15px/1.3 'Nunito',sans-serif; cursor:pointer; }
.lt-mp-btn:hover:not(:disabled) { background:#f0f8fd; border-color:#9fcbe8; }
.lt-mp-btn:disabled { opacity:.45; cursor:not-allowed; }
.lt-mp-box { display:grid; gap:8px; padding:12px; border:2px solid #cfe6f3; border-radius:14px; background:#fff; }
.lt-mp-input { width:100%; box-sizing:border-box; min-height:44px; padding:8px 14px; border:2px solid #cfe6f3; border-radius:14px; background:#fff; color:#1e293b; font:700 16px 'Nunito',sans-serif; }
.lt-mp-list { list-style:none; margin:0; padding:0; max-height:240px; overflow:auto; display:grid; gap:4px; }
.lt-mp-option { width:100%; min-height:44px; padding:8px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; color:#1e293b; font:700 15px/1.3 'Nunito',sans-serif; text-align:left; cursor:pointer; }
.lt-mp-option:hover, .lt-mp-option.is-on { background:#e6f2fb; border-color:#2f72c4; }

/* The teacher's own copy: library switch, strip on the overview, the full-screen editor */
.lt-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.lt-tab { min-height:48px; padding:8px 22px; border:2px solid #bfdcf0; border-radius:99px; background:#fff; color:var(--lt-blue); font:900 17px/1.3 'Nunito',sans-serif; cursor:pointer; }
.lt-tab:hover { background:#f0f8fd; border-color:#9fcbe8; }
.lt-tab[aria-pressed="true"] { background:var(--lt-blue); border-color:var(--lt-blue); color:#fff; }
.lt-tag-mine { background:#d9f0e0; color:#1f5f31; }
.lt-card-warn { color:#8a5a00; font-weight:800; }
.lt-copy-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:14px 18px; border-radius:20px; background:#edf8ef; border:1px solid #cfecd5; color:#1f5f31; font-size:17px; }
.lt-copy-text { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; min-width:0; }
.lt-copy-text > span { color:#8a5a00; font-weight:800; }
.lt-copy-actions { display:flex; flex-wrap:wrap; gap:10px; }
.lt-copy-actions .lt-btn { min-height:44px; padding:8px 20px; font-size:16px; }
.lt-page .lt-error .lt-link { vertical-align:baseline; }
.lt-edit-bar { flex:0 0 auto; }
.lt-edit-title { flex:1 1 auto; min-width:0; overflow:hidden; color:#2563a8; white-space:nowrap; text-overflow:ellipsis; }
.lt-edit-dirty { flex:0 0 auto; color:#b45309; font-size:15px; font-weight:900; white-space:nowrap; }
.lt-edit-actions { display:flex; flex:0 0 auto; gap:10px; }
.lt-edit-bar .lt-btn { min-height:44px; padding:8px 24px; font-size:16px; }
.lt-edit-notice { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 22px; background:#edf8ef; border-bottom:1px solid #cfecd5; color:#1f5f31; font-size:16px; font-weight:800; }
.lt-edit-notice.is-error { background:#fff0f5; border-bottom-color:#fbd4e0; color:#8f2b55; }
.lt-edit-scroll { flex:1 1 auto; min-height:0; overflow:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.lt-edit-form { width:min(1100px,100%); margin:0 auto; padding:20px clamp(12px,3vw,24px) 56px; }
.lt-edit-form .lp-block:last-child { margin-bottom:0; }
@media (max-width:640px) {
    .lt-edit-bar { flex-wrap:wrap; gap:8px 12px; padding:10px 14px; }
    .lt-edit-title { flex-basis:100%; }
    .lt-edit-actions { margin-left:auto; }
}