/* One compact control row. Content owns the rest of the lesson canvas. */
#lesson{--control-size:clamp(42px,5.8vh,56px);--lesson-top:12%;--shell-gap:clamp(7px,.9vw,14px)}
.toolbar{top:max(2vh,env(safe-area-inset-top));left:2.5%;right:calc(2.5% + var(--control-size) + var(--shell-gap));width:auto;gap:var(--shell-gap);align-items:center}
.toolbar .tool-button,.fullscreen-control{width:var(--control-size);height:var(--control-size);min-height:var(--control-size);padding:0;flex:none;border:2px solid #ffffffc9;border-radius:18px;background:#f3ffffe8;color:#12618e;box-shadow:0 3px 0 #0599ad26;font-size:clamp(22px,3.6vh,34px);line-height:1}
.toolbar .tool-button>span:first-child{font-size:1.15em}
.toolbar .tool-button:hover,.fullscreen-control:hover{background:#fff}
.toolbar .tool-button:active{transform:translateY(1px)}
.fullscreen-control{right:2.5%;top:max(2vh,env(safe-area-inset-top));padding:clamp(10px,1.8vh,16px)}
.fullscreen-control svg{width:100%;height:100%}
.toolbar #pause{width:auto;min-width:clamp(104px,12vw,154px);padding:0 .7em;display:flex;align-items:center;justify-content:center;gap:.4em;font-size:clamp(16px,2.5vh,23px);white-space:nowrap;border-radius:999px}
.progress-group{position:static;flex:1;width:auto;min-width:80px;max-width:28vw;gap:0;padding:0 clamp(0px,.5vw,8px)}
.progress{width:100%;height:3px;display:flex;gap:clamp(7px,.8vw,12px);overflow:visible;margin:0;background:transparent;border:0;box-shadow:none;padding:0;min-height:0}
.progress-phase{display:flex;flex:1;gap:1.5px;min-width:0;height:100%;border-radius:99px;overflow:visible}
.progress-step{display:block;flex:1;min-width:0;height:100%;border-radius:1px;background:#9bbac6;border:0}
.progress-phase .progress-step:first-child{border-radius:99px 1px 1px 99px}
.progress-phase .progress-step:last-child{border-radius:1px 99px 99px 1px}
.progress-phase .progress-step:only-child{border-radius:99px}
.progress-step[data-state="complete"]{background:#edb719;border-color:#a77908}
.progress-step[data-state="current"]{background:#276aba;border-color:#276aba;box-shadow:0 0 0 1px #276aba;transform:none}
.lesson-menu-wrap{position:relative;flex:none}
#lesson-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #d2e5eb;box-shadow:0 10px 28px #164f6a30;border-radius:18px;padding:7px;min-width:210px}
#lesson-menu button{border:0;background:transparent;padding:14px 16px;border-radius:12px;font-size:19px;white-space:nowrap;width:100%;text-align:left}
#lesson-menu button:hover{background:#e7f6f7}
.is-paused #pause{color:#fff;background:#258064}
.pause-status{border:1px solid #e4ca70;box-shadow:none;font-size:clamp(14px,2vh,20px);padding:.4em .8em}
.home #home-results{position:absolute;left:2.5%;top:max(2vh,env(safe-area-inset-top));border:1px solid #ffffffba;background:#ffffffb8;border-radius:999px;text-decoration:none;font-size:clamp(14px,2.2vh,20px);padding:10px 16px;margin:0}
.home #home-results.is-holding{animation:none}
.home #home-results::after{content:none}
.home #home-results.is-holding{outline:2px solid #b78100;outline-offset:2px}
#lesson .button-progress,#lesson [data-cam-hover]{background-image:linear-gradient(#f1c445aa,#f1c445aa)!important;background-size:calc(var(--button-progress,0)*100%) 100%!important;background-position:left top!important;background-repeat:no-repeat!important}
.home .subject>.subject-stars{color:#22566b;background:#ffffffed;border:1px solid #b6dbe2;font-size:clamp(14px,2.2vh,20px);padding:.2em .55em;top:4%;bottom:auto;right:6%;transform:none;white-space:nowrap}
.home .subject{padding-bottom:3vh}
.lesson-complete{position:absolute;top:3%;right:5%;display:grid;place-items:center;width:clamp(32px,5vh,46px);height:clamp(32px,5vh,46px);border-radius:50%;background:#12834e;color:white;font-size:clamp(28px,4.5vh,40px);font-weight:900;line-height:1;box-shadow:0 2px 0 #07563133}
.lesson-progress.progress{position:absolute;top:7%;bottom:auto;left:8%;right:auto;width:60%;height:3px;gap:clamp(6px,.7vw,10px)}
.lesson-card:has(.lesson-progress){padding-top:5vh}
.toolbar #replay{width:auto;padding:0 .6em;display:flex;align-items:center;gap:.35em;font-size:clamp(15px,2.3vh,21px);white-space:nowrap;border-radius:999px}
.answer-status:not(.sr-only){position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:.2em .7em;border-radius:99px;background:#fff;font-size:clamp(17px,2.8vh,28px);font-weight:700;white-space:nowrap;pointer-events:none}
.answer-status[data-result="right"]{color:#186b42;border:1px solid #9dc8ab}
.answer-status[data-result="wrong"]{color:#8b4016;border:1px solid #ddb18c}
.home-head{gap:2vw}.home-head .guide-face{width:clamp(52px,10vh,100px);height:clamp(52px,10vh,100px)}
.home .subjects{width:90%;max-width:none}.home .subject{flex:1;min-width:0}
.lesson-entry:has(.lesson-restart) .lesson-picture{height:auto}
.lesson-ready{background:transparent;gap:2vh;justify-content:center;padding-top:9vh}
.lesson-ready h1{font-size:clamp(28px,5.8vh,62px);max-width:85%}
#ready-picture{height:29vh;width:min(60vw,760px);display:flex;align-items:center;justify-content:center}
#ready-picture .lesson-picture{width:100%;height:100%;justify-content:center;gap:2vw}
#ready-picture .lesson-picture img{width:35%;height:100%}
#ready-picture .lesson-picture b{font-size:29vh}
#ready-picture .lesson-picture.letters{font-size:29vh}
#ready-start{font-size:clamp(30px,6.5vh,70px);min-width:46vw;min-height:16vh;padding:2vh 4vw;margin:0;border-width:4px;box-shadow:0 7px 0 #d9aa15,0 12px 30px #168ea735}
#ready-start span{font-size:.65em;margin:0 .4em 0 0}
#ready-note{font-size:clamp(16px,2.7vh,27px);min-height:1.3em;color:#23627a}
.ready-guide{position:absolute;right:4%;bottom:8%;width:clamp(80px,18vw,230px);height:clamp(80px,24vh,230px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 8px #007f9320)}
.math-group,.practice-group,.number-panel,.writing-board{top:var(--lesson-top)}
.math-group{height:68%}.number-panel{height:66%}.practice-group{height:48%}
.number-panel:not(.counter) .big-number{font-size:clamp(120px,min(64vh,32vw),700px)}
.sequence{top:19%;height:39%}.rest{top:16%}
.writing-board{left:28%;right:24%;height:69%;background:#fcffff;border:3px solid #fff;box-shadow:0 10px 28px #058d9f20}
.writing-strokes path{vector-effect:none}
.writing-model{opacity:.8}
.action-reminder{outline:2px solid #d7a829!important;outline-offset:4px;box-shadow:0 0 0 5px #fff4b343!important}
.answer-row.action-reminder{border-radius:18px}
.lesson-guide{bottom:auto;left:2.5%;width:clamp(58px,10vh,104px);height:clamp(58px,10vh,104px)}
.lesson-guide img{width:100%;height:100%;border-width:2px;box-shadow:0 2px 8px #16758c26}
.lesson-guide::after{content:'☝';position:absolute;right:-.25em;bottom:-.15em;font-size:clamp(22px,4vh,38px);transform:rotate(var(--guide-angle,0deg));filter:drop-shadow(0 2px 1px #146c7933)}
.is-paused .action-reminder{animation-play-state:paused}
.finish-cast{gap:3vw;height:18vh;align-items:center}.finish-cast .guide-face{height:16vh;width:16vh}
#finished{gap:1.5vh;padding-top:6vh;background:#d9ffffde}
#finished .finish-star,#finished:has(#after-lesson:not([hidden])) .finish-star{font-size:18vh;line-height:1}
.finish-preview{display:flex;align-items:stretch;justify-content:center;gap:1vw;height:20vh;width:76vw}
.finish-tile{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;border:2px solid #fff;border-radius:20px;background:#ffffffa8;padding:1vh .5vw;gap:.5vh}
.finish-tile b{font-size:7vh;line-height:1;color:#2463a0}
.finish-tile>span{height:8vh;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}
.finish-tile img{max-width:32%;height:4vh;object-fit:contain}
.finish-letter{font-family:QuicksandLesson,sans-serif;font-size:20vh;line-height:1;color:#c54775;font-weight:700;padding:0 3vw}
#finish-title{font-size:clamp(27px,5.5vh,58px)}
#finish-line{font-size:clamp(18px,3vh,30px)}
#finished .after-lesson{font-size:clamp(16px,2.7vh,26px);padding:.4em 1em;max-width:90%}
#finished .primary{font-size:clamp(22px,3.8vh,38px);margin:0}
@media(max-height:450px) and (orientation:landscape){
  #lesson{--control-size:42px;--lesson-top:15%;--shell-gap:7px}
  .toolbar .tool-button,.fullscreen-control{border-radius:12px}
  .progress{height:3px}
  #ready-start{min-height:17vh;font-size:7vh}.ready-guide{height:26vh;width:16vw}
  .home #home-results{font-size:13px;padding:7px 11px}
  #finished{gap:1vh}.finish-cast,.finish-preview{height:17vh}.finish-cast .guide-face{height:15vh;width:15vh}
  #finished .after-lesson{font-size:3.3vh!important}.finish-tile{border-radius:12px}
}
@media(orientation:portrait){
  .home #home-results{font-size:14px;max-width:65%;text-align:left}
  .home-head{margin-top:5vh}.ready-guide{width:22vw;height:16vh;bottom:3%}
  .lesson-ready{gap:3vh}.lesson-ready h1{font-size:clamp(25px,4.2vh,44px);max-width:94%}
  #ready-picture{width:90%;height:25vh}#ready-picture .lesson-picture b,#ready-picture .lesson-picture.letters{font-size:22vh}
  #ready-start{width:90%;min-height:13vh;font-size:clamp(27px,6vw,45px)}
  #ready-note{max-width:90%;font-size:18px}
}

/* Dòng nhỏ cho người lớn trên màn lỗi; lời cho trẻ vẫn là chữ lớn phía trên. */
#audio-error .error-detail{max-width:min(680px,90vw);font-size:clamp(13px,2.3vh,17px);line-height:1.35;color:#174a7a;opacity:.85;margin-top:1vh}
#audio-error .error-detail:empty{display:none}