/* Page layouts. Learning owns the viewport; only its content panes scroll. */
.site-header{height:76px;max-width:none;padding:0 28px;gap:22px;background:#fafbf6}
.site-header nav{gap:22px;flex-wrap:nowrap}.site-header nav a{display:block;text-decoration:none;color:#66766a;padding:13px 0;white-space:nowrap;font-size:13px}
.site-header nav a.active{color:#285c3e;font-weight:700;border-bottom:2px solid #58864b}.site-header .points{text-decoration:none;white-space:nowrap;font-size:12px}
body>main{padding:0 28px;max-width:1240px}.page-heading{padding:34px 0 18px}.page-heading h1{font-size:36px;margin:10px 0}.page-heading p{color:#667663;margin:0}
.home-links{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:6px 0 40px}.resume-card{display:block;text-decoration:none;color:var(--ink);padding:24px;border:1px solid #dbe5ce;border-radius:14px;background:#f0f5e7}.resume-card h2{font-size:22px}.resume-card p{font-size:13px;color:#67775e}
.catalog-layout{margin:8px 0 32px}.catalog-layout>aside{border:1px solid var(--line);border-radius:14px;padding:22px;background:white}.catalog-layout .aside-title{font-size:13px}.catalog-layout .library-filters{grid-template-columns:minmax(180px,2fr) repeat(4,minmax(100px,1fr));align-items:end}.catalog-layout #clearFilters{justify-self:start}.catalog-layout #lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0;overflow:visible}.catalog-layout .lesson{min-width:0;min-height:112px;border:1px solid #dbe4d1;text-decoration:none;padding:16px;background:#fbfcf8;margin:0}.catalog-layout .lesson:hover{border-color:#86a46b;background:#f0f6e6}.catalog-layout .lesson b{font-size:14px;line-height:1.6}.catalog-layout .lesson small{font-size:11px;line-height:1.6}.catalog-layout .tip{display:none}
.page-reference .knowledge{margin:28px 0}.page-progress .journey{padding:24px;border:1px solid #dbe4d1;border-radius:14px;background:white}.page-progress .progress-info{width:300px}.page-progress .progress-tools{margin:24px 0}
.learning-page{height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:68px minmax(0,1fr)}
.learning-page .site-header{height:68px;padding:0 22px}.learning-page>main{margin:0;max-width:none;min-height:0;padding:0;display:grid;grid-template-rows:46px minmax(0,1fr);overflow:hidden}
.workspace-bar{display:flex;align-items:center;gap:15px;padding:0 22px;border-bottom:1px solid var(--line);background:#f3f6ed;font-size:12px}.workspace-bar a{color:#496b3c;text-decoration:none}.workspace-bar button{background:white;color:#3b633e;border:1px solid #cfdcc4;border-radius:6px;padding:6px 12px;font-size:12px}.workspace-bar #saveState{margin:0 auto 0 0;font-size:11px}.workspace-bar #next{margin-left:auto}
#workspace{min-height:0;overflow:hidden}.learning-page .work{height:100%;padding:0;display:grid;grid-template-columns:minmax(300px,35%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(100px,31%);overflow:hidden}
.reading-pane{grid-column:1;grid-row:1/3;overflow:auto;padding:24px 24px 40px;background:#fff;border-right:1px solid var(--line);min-width:0;min-height:0;scrollbar-gutter:stable}
.reading-pane h2{font-size:24px!important;margin-top:16px!important}.reading-pane .description{font-size:14px;line-height:1.8}.reading-pane .mission{display:block;padding:14px}.reading-pane .mission>span{display:none}.reading-pane .mission p{font-size:13px}.reading-pane .mission button{margin:12px 0 0;font-size:12px}.reading-pane .runtime-note{font-size:12px}.reading-pane pre{font-size:13px}.reading-pane .muted{display:none}
.coding-pane{grid-column:2;grid-row:1;min-height:0;min-width:0;padding:14px 18px 0;display:flex;flex-direction:column;background:#edf2e7}
.coding-pane .editor{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:10px}.coding-pane .editor-head{padding:10px 16px;flex-shrink:0}.coding-pane .code-area{flex:1;min-height:0;padding:14px 0;overflow:hidden}.coding-pane #code{height:100%;min-height:0!important;max-height:none;resize:none;padding-bottom:12px;overflow:auto;font:14px/1.9 Consolas,monospace;white-space:pre;overflow-wrap:normal}.coding-pane #lines{overflow:hidden;font:14px/1.9 Consolas,monospace;min-height:0}.coding-pane .editor-footer{flex-shrink:0;padding:9px 12px}.coding-pane .editor-footer>div{flex-wrap:nowrap}.coding-pane .editor-help{font-size:10px;line-height:1.5;margin:6px 0 8px;flex-shrink:0}.coding-pane .analyze-button{font-size:11px;padding:8px 10px}
.terminal-pane{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:auto;padding:10px 18px 14px;display:grid;grid-template-columns:minmax(130px,28%) minmax(0,1fr);grid-template-rows:auto minmax(60px,1fr) auto;column-gap:14px;background:#edf2e7}
.terminal-pane .inputbox{grid-column:1;grid-row:1/4;margin:0;min-width:0;display:flex;flex-direction:column;font-size:11px;line-height:1.7}.terminal-pane #inputs{flex:1;min-height:60px;height:auto;resize:none;background:#fff;font-size:12px}.terminal-pane .output-head{grid-column:2;grid-row:1;padding:0 0 7px;font-size:12px;gap:10px}.terminal-pane #output{grid-column:2;grid-row:2;min-height:0;max-height:none;font:13px/1.8 Consolas,monospace;color:#35573e;background:white}.terminal-pane #feedback{grid-column:2;grid-row:3;font-size:12px;margin-top:6px}
.workspace-tabs{display:none}.picker-head{display:flex;justify-content:space-between;gap:18px;align-items:center}#lessonPicker{width:min(700px,calc(100vw - 24px));max-width:700px;max-height:90dvh;padding:20px}#lessonPicker aside{border:0;border-radius:10px}#lessonPicker #lessons{display:grid}#lessonPicker .tip{display:none}#lessonPicker .library-filters{grid-template-columns:1fr 1fr}#closePicker{padding:8px;border:1px solid #ccd9c1;background:white;border-radius:6px;color:#436538}
.study-article>.analyze-button{margin:0 0 14px;font-size:12px}.analysis-dialog{max-height:94dvh}.analysis-dialog-head{position:sticky;top:-26px;background:white;z-index:1;padding:6px 0;border-bottom:1px solid #e3eadb}
@media(min-width:1600px){.reading-pane{padding:28px 36px}.learning-page .work{grid-template-columns:minmax(400px,34%) minmax(0,1fr)}.coding-pane #code,.coding-pane #lines{font-size:16px}.terminal-pane #output{font-size:15px}}
@media(max-width:1000px){.site-header nav{gap:14px}.site-header{padding:0 18px;gap:15px}.site-header .brand{font-size:20px}.site-header .logo{display:none}.site-header nav a{font-size:12px}.catalog-layout .library-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout #lessons{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-page .work{grid-template-columns:minmax(260px,36%) minmax(0,1fr)}.reading-pane{padding:18px 16px}.coding-pane{padding:12px 12px 0}.terminal-pane{padding:8px 12px 12px}.coding-pane .editor-footer>span{display:none}.coding-pane .editor-footer>div{margin-left:auto}.workspace-bar #saveState{max-width:35%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
@media(max-width:760px){
 .site-header{height:auto;min-height:92px;padding:10px 16px 0;flex-wrap:wrap;gap:0;align-content:center}.site-header .brand{font-size:20px;margin-right:auto}.site-header .points{padding:5px 11px;font-size:11px}.site-header nav{order:3;width:100%;overflow-x:auto;gap:20px}.site-header nav a{padding:10px 0 8px;font-size:12px}
 body>main{padding:0 16px;margin:0}.home-links{grid-template-columns:1fr}.page-heading{padding:25px 0 16px}.page-heading h1{font-size:30px}.catalog-layout .library-filters{grid-template-columns:1fr 1fr}.catalog-layout .library-filters label:first-child{grid-column:1/3}.catalog-layout #lessons{grid-template-columns:1fr}.catalog-layout .lesson{min-height:88px}.catalog-layout>aside{padding:16px}.page-progress .journey{display:block}.page-progress .progress-info{width:100%;text-align:left;margin-top:12px}
 .learning-page{grid-template-rows:92px minmax(0,1fr)}.learning-page .site-header{height:92px;padding:8px 16px 0}.learning-page>main{grid-template-rows:42px 42px minmax(0,1fr);padding:0;margin:0}.workspace-bar{gap:8px;padding:0 12px}.workspace-bar #saveState{display:none}.workspace-bar button{padding:5px 8px;font-size:11px}.workspace-tabs{display:flex;border-bottom:1px solid #d5dfcb;background:#f3f6ed;padding:0 12px;gap:22px}.workspace-tabs button{background:none;border:0;padding:8px 4px;color:#6b7c61;font-size:13px}.workspace-tabs button[aria-selected=true]{color:#285c3e;font-weight:700;border-bottom:3px solid #6a944e}
 .learning-page .work{display:block;position:relative;height:100%}.learning-page .reading-pane,.learning-page .coding-pane,.learning-page .terminal-pane{display:none;height:100%;border:0}
 .learning-page[data-pane=reading] .reading-pane{display:block;padding:20px}.learning-page[data-pane=code] .coding-pane{display:flex;padding:12px}.learning-page[data-pane=output] .terminal-pane{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(100px,1fr) auto auto;gap:10px;padding:14px}.terminal-pane .output-head{grid-column:1;grid-row:1}.terminal-pane #output{grid-column:1;grid-row:2}.terminal-pane #feedback{grid-column:1;grid-row:3}.terminal-pane .inputbox{grid-column:1;grid-row:4}.terminal-pane #inputs{height:80px;min-height:80px;flex:none}.coding-pane .editor-help{font-size:10px}.reading-pane .lesson-head{display:block}.analysis-dialog-head{top:-16px}
}
/* Child reading: familiar language first; technical details remain available. */
.analysis-reading-options{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.analysis-reading-options button{min-height:44px;padding:9px 16px;border:1px solid #b8cba7;border-radius:22px;background:white;color:#3c6236;font-size:14px}.analysis-reading-options button[aria-pressed=true]{background:#e6f1d5;border-color:#71964f;font-weight:700}
.analysis-dialog[data-reading=simple] .analysis-scope,.analysis-dialog[data-reading=simple] .analysis-names,.analysis-dialog[data-reading=simple] .analysis-expressions,.analysis-dialog[data-reading=simple] #analysisCallsWrap{display:none}
.error-details{grid-column:2;margin-top:8px;font-size:12px;color:#5c6755}.error-details pre{font-size:11px;margin-top:8px;min-height:0;max-height:200px}.error-details summary{cursor:pointer;line-height:1.8}
#hintText{margin:0 0 10px;font-size:14px;line-height:1.9}#moreHint{min-height:44px;font-size:13px;color:#5a6b35}.reading-pane #hintBtn{min-height:44px;min-width:90px}.reading-pane summary{min-height:44px;padding:10px 0;font-size:14px;line-height:1.7}.reading-pane .mission b{font-size:13px}.reading-pane .mission p{font-size:14px}.reading-pane .analyze-button{min-height:44px}
@media(max-width:760px){.error-details{grid-column:1;grid-row:5}.workspace-tabs button{min-height:42px}.site-header nav a{min-height:36px}}
.learning-path{margin:8px 0 32px;padding:24px;border:1px solid #d9e3cf;background:#fff;border-radius:16px}.path-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.path-heading p{color:#607457;font-size:14px;margin:8px 0 18px}#pathProgress{white-space:nowrap;font-size:13px;color:#52743f}.intro-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.path-step{display:flex;flex-direction:column;gap:10px;padding:20px;text-decoration:none;color:#345032;border:1px solid #e0e7d8;background:#f9fbf5;border-radius:12px;min-width:0}.path-step small{font-size:12px;color:#687c5c}.path-step strong{font-size:16px;line-height:1.6}.path-step>span{font-size:13px;line-height:1.7;color:#59714e}.path-step.upcoming{border-color:#799b54;background:#eef6df;box-shadow:inset 0 3px #799b54}.path-step.completed small{color:#3f722f}.extended-library{border-top:1px solid #d9e3cf;padding:18px 0}.extended-library>summary{cursor:pointer;font-size:16px;font-weight:600;line-height:1.8;min-height:48px}.lesson-purpose{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6;background:#eff6e4;border-left:3px solid #84a75d;padding:12px 14px;margin:16px 0}.lesson-purpose span{font-size:12px;color:#657a56}.try-challenge{border:1px dashed #b9cda5;padding:14px;border-radius:9px;font-size:14px;color:#4b6b39;line-height:1.8}.try-challenge::before{content:'Thử thêm một chút · ';font-weight:700}
@media(max-width:900px){.intro-path{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.learning-path{padding:18px 14px}.intro-path{grid-template-columns:1fr}.path-heading{display:block}#pathProgress{display:block;margin:0 0 16px}.path-step{padding:16px}.path-step strong{font-size:16px}}
.parent-overview{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px;border:1px solid #d7e3c9;border-radius:16px;background:#eff6e4;margin:12px 0 24px}.parent-overview h3{margin-top:8px}.parent-overview ol{padding-left:24px;font-size:14px;line-height:2}.parent-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}.parent-cards article{background:#fff;border:1px solid #dbe4d2;border-radius:14px;padding:24px}.parent-cards article h2{font-size:21px}.parent-cards article p{font-size:14px;line-height:1.9;color:#4f6746}.parent-cards a{color:#39662d;font-size:14px}.parent-overview p{font-size:15px;line-height:1.9}
@media(max-width:700px){.parent-overview,.parent-cards{grid-template-columns:1fr}.parent-overview,.parent-cards article{padding:20px}}
.output-actions{display:flex;align-items:center;gap:12px}.output-actions #stopOutput{border:1px solid #ab7c5c;border-radius:6px;background:#fff6eb;color:#81532e;padding:6px 12px;min-height:36px;cursor:pointer}.fix-code{grid-column:2;justify-self:start;border:1px solid #9cb77f;border-radius:8px;background:#eff6e2;color:#3d6530;font-size:13px;padding:9px 14px;min-height:44px;margin:8px 0;cursor:pointer}
@media(max-width:760px){.fix-code{grid-column:1;grid-row:4}.terminal-pane .inputbox{grid-row:5}.error-details{grid-row:6}}

.course-preview{border:1px solid #d9e3cf;background:#f4f8ed;border-radius:16px;padding:24px;margin:0 0 28px}.course-preview h2{font-size:22px;margin:0 0 12px}.course-preview p{font-size:16px;line-height:1.8;color:#4c6843}.course-preview a,.journey-continue{display:block;width:fit-content;margin:14px 0;color:#315b35;font-size:16px;font-weight:600;line-height:1.7}.course-preview [role=status]{color:#52743f}.journey-stage{margin:18px 0;border-top:1px solid #d9e3cf;padding-top:8px}.journey-stage>summary{cursor:pointer;min-height:48px;padding:10px 0;font-size:18px;font-weight:600;line-height:1.6;color:#345032}.journey-stage .intro-path{margin-top:8px}.original-course #journeyProgress{font-size:14px;color:#52743f;white-space:nowrap}@media(max-width:600px){.course-preview{padding:18px 14px}.course-preview h2{font-size:20px}.original-course #journeyProgress{display:block;margin-bottom:12px}.journey-stage>summary{font-size:17px}}

#originalPath{scroll-margin-top:90px}