@font-face {
  font-family: 'SGK Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(./fonts/source-serif-4-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'SGK Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(./fonts/source-serif-4-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{color-scheme:light dark;--ink:#0f172a;--muted:#475569;--paper:#f8fafc;--blue:#1e40af;--line:#cbd5e1;--surface:#fff;--danger:#8b2d26;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer}button:hover{border-color:var(--blue);background:#eff6ff}button:disabled{cursor:wait;opacity:.65}button.primary,button[aria-pressed=true],button[aria-current=page]{background:var(--blue);color:#fff;border-color:var(--blue)}a{color:var(--blue)}:focus-visible{outline:3px solid #1e40af;outline-offset:4px}[hidden]{display:none!important}.topbar{max-width:1120px;padding:18px 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.wordmark{font-size:24px;letter-spacing:-1px;font-weight:800;text-decoration:none}.wordmark span{display:block;font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:500}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.notice{max-width:1072px;margin:12px auto;padding:10px 20px;border-left:3px solid var(--blue);background:#eff6ff;color:#1e3a8a;font-size:14px;overflow-wrap:anywhere}.notice.error{background:#fffbeb;border-color:#78350f;color:#78350f}main{max-width:1072px;margin:28px auto 0;padding:0 20px 120px;min-height:80dvh}.page-heading{margin:24px 0}.eyebrow{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}h1{font-size:clamp(27px,5vw,40px);line-height:1.25;letter-spacing:-.8px;margin:10px 0}h2{font-size:22px;line-height:1.4}h3{font-size:19px}p{overflow-wrap:anywhere}.page-heading p{color:var(--muted);margin:8px 0}.page-heading .eyebrow{color:var(--blue)}label{display:grid;gap:6px;font-weight:600;margin:12px 0}input,textarea,select{border:1px solid #94a3b8;border-radius:8px;min-height:48px;padding:10px 12px;background:#fff;color:var(--ink);width:100%;max-width:100%}textarea{resize:vertical;min-height:150px}.grade-filter{max-width:180px}.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin:24px 0}.course-card,.lesson-card,.download-card,.progress-card,.question{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;min-width:0;overflow-wrap:anywhere}.course-card{border-top:4px solid var(--blue)}.course-card h2{margin:4px 0}.meta{font-size:14px;color:var(--muted)}.lesson-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.lesson-card h3{margin:0}.lesson-card .actions{flex-shrink:0}#lesson-content{max-width:76ch;margin:30px 0;font-size:17px;line-height:1.85}#lesson-content h2,#lesson-content h3{margin-top:32px}#lesson-content p{white-space:pre-wrap}#lesson-content pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e2e8f0;padding:16px}#lesson-content blockquote{border-left:4px solid #94a3b8;padding-left:16px;margin-left:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:10px max(12px,calc((100% - 1072px)/2)) calc(10px + env(safe-area-inset-bottom));gap:6px;z-index:5}.bottom-nav button{border:0;font-size:14px;padding:10px 4px}.question{margin-top:22px}.question legend{font-size:18px;font-weight:700;padding:0 8px;max-width:100%}.option{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;min-height:48px;cursor:pointer;font-weight:400}.option:has(input:checked){background:#eff6ff;border-color:var(--blue)}.option input{width:22px;height:22px;min-height:22px;flex-shrink:0;margin:2px 0}.hint{background:#fffbeb;color:#78350f;padding:12px;border-radius:8px}.question details summary{cursor:pointer;padding:12px 0;font-weight:600;min-height:48px}.success{background:#ecfdf5;color:#065f46;padding:16px;border-radius:8px}dialog{width:min(540px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:26px;border:1px solid var(--line);border-radius:14px;color:var(--ink)}dialog::backdrop{background:#0f172a80}.skip{position:absolute;top:-80px;left:20px;background:#fff;padding:12px;z-index:100}.skip:focus{top:12px}.teacher-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.teacher-grid label{margin:0}.teacher-section{background:#fff;border:1px solid var(--line);padding:24px;border-radius:12px;margin:20px 0}.teacher-section h2{margin-top:0}.full{grid-column:1/-1}.question-edit{border:1px solid var(--line);padding:16px;border-radius:10px;margin:16px 0}.danger{color:#9f1239}.teacher-layout{padding-bottom:50px}table{width:100%;border-collapse:collapse}td,th{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere}.table-wrap{overflow:auto}#result{margin-top:20px}#preview{white-space:pre-wrap;overflow-wrap:anywhere}.offline-label{font-weight:600}small{font-size:14px}.status-ok{color:#15803d;font-weight:600}.status-wait{color:#b45309;font-weight:600}.status-out{color:#b91c1c;font-weight:600}
@media(max-width:640px){.topbar{padding:14px 18px}.topbar .actions{gap:6px}.topbar button{font-size:14px;padding:8px 10px}.wordmark{font-size:22px}main{margin-top:20px;padding-inline:18px}.notice{margin-inline:18px;padding:10px 12px}.lesson-card{align-items:flex-start;flex-direction:column;padding:18px}.lesson-card .actions{width:100%}.teacher-grid{grid-template-columns:1fr}.teacher-section{padding:16px}.course-card,.question{padding:18px}.bottom-nav button{font-size:13px}.bottom-nav{gap:2px}h1{letter-spacing:-.4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Student workspace: keep the teacher editor's existing layout isolated. */
.student-app{--ink:#18302d;--muted:#536762;--paper:#f5f4ef;--blue:#183e39;--line:#d8dfd8;--surface:#fffefa;background:var(--paper);font-size:16px}
.student-app .topbar{max-width:none;height:92px;margin:0;padding:16px 32px;background:var(--surface);position:sticky;top:0;z-index:10;gap:16px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
a.teacher-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--muted);background:var(--surface);transition:background-color .15s,border-color .15s,color .15s}
a.teacher-link:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.student-app .wordmark{font-family:'SGK Serif','Times New Roman',Times,serif;font-size:42px;letter-spacing:-3px;line-height:1;color:var(--blue)}
.student-app .wordmark span{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:1.4px;line-height:1.7;margin-top:5px;text-transform:uppercase}
.student-app .topbar .actions{justify-content:flex-end;max-width:80%}.connection{font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;margin-right:12px}.connection::before{content:'';width:7px;height:7px;border-radius:50%;background:#2f6f58}.connection.is-offline::before{background:#915c15}
.student-app button{border-radius:8px;transition:background .15s,border-color .15s}.student-app button:hover{background:#eaf1eb;border-color:#527b68}.student-app button.primary:hover,.student-app button[aria-current=page]:hover{background:#28574f;color:#fff}.student-app .quiet{background:transparent;border-color:transparent}.student-app :focus-visible{outline-color:#306d5a}.student-app button:disabled{cursor:not-allowed}
.student-app .bottom-nav{width:218px;top:92px;right:auto;bottom:0;display:flex;flex-direction:column;gap:8px;padding:32px 18px;background:#eeeee6;border-right:1px solid var(--line);border-top:0;z-index:4}.nav-label{font-size:10px;font-weight:750;letter-spacing:1.4px;color:var(--muted);padding:0 14px 20px}.student-app .bottom-nav button{display:flex;align-items:center;gap:16px;padding:14px 16px;text-align:left;border-radius:8px;font-size:15px;background:transparent;color:var(--muted);font-weight:650}.student-app .bottom-nav button[aria-current=page]{background:var(--blue);color:#fff}.nav-number{font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}.nav-note{font-size:12px;line-height:1.8;color:var(--muted);padding:20px 14px;margin-top:auto;border-top:1px solid var(--line)}
.student-app .workspace{margin-left:218px}.student-app main{max-width:1100px;padding:0 36px 40px;margin:0 auto;min-height:calc(100dvh - 225px)}.student-app .notice{max-width:1028px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--muted);margin:0 auto 26px;padding:12px 0;font-size:12px;min-height:43px}.student-app .notice.error{color:#843d17;background:#fff3dd;border-radius:8px;padding-inline:16px}
.study-hero{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:28px;padding:16px 0 32px;border-bottom:1px solid var(--line)}.student-app .eyebrow{font-size:11px;letter-spacing:1.6px;color:#3c6758;font-weight:750}.study-hero h1{font-family:'SGK Serif','Times New Roman',Times,serif;font-weight:500;font-size:clamp(34px,4.2vw,54px);line-height:1.12;letter-spacing:-1.6px;margin:18px 0}.study-hero>div>p:last-child{color:var(--muted);font-size:15px}.hero-note{border-left:1px solid var(--line);padding:10px 0 10px 28px}.hero-book{display:block;font-family:'SGK Serif','Times New Roman',Times,serif;font-size:60px;line-height:1.1;letter-spacing:-5px;color:#8b613c}.hero-note p{font-weight:700;font-size:16px;margin:12px 0 2px}.hero-note small{font-size:12px;color:var(--muted)}
.catalog-toolbar{display:grid;grid-template-columns:210px 1fr;gap:20px;margin:24px 0}.student-app label{font-size:13px;color:var(--ink);margin:0}.student-app input,.student-app select,.student-app textarea{border-color:#a8b7ac;background:var(--surface);border-radius:7px}.student-app .grade-filter{max-width:none}.student-app .course-grid{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}.student-app .course-card{border:1px solid var(--line);padding:14px 18px;min-width:180px;flex:1;margin:0;border-radius:9px;display:grid;grid-template-columns:1fr auto;gap:0 16px;align-items:center;background:var(--surface)}.student-app .course-card h2{font-size:18px;grid-row:2;margin:0}.student-app .course-card .meta{font-size:11px;margin:0}.student-app .course-card button{grid-column:2;grid-row:1/3;font-size:12px;padding:6px 12px;min-height:40px}.student-app .course-card button[aria-pressed=true]{background:var(--blue);color:white}
.section-title{font-size:18px;letter-spacing:-.3px;margin:0 0 16px}.student-app .lesson-card{padding:20px 22px;margin:0;border-radius:0;background:var(--surface);border:0;border-bottom:1px solid var(--line);gap:24px}.student-app .lesson-card:first-of-type{border-radius:10px 10px 0 0}.student-app .lesson-card:last-child{border-radius:0 0 10px 10px}.lesson-description{min-width:0}.student-app .lesson-card h3{font-size:17px;line-height:1.5;letter-spacing:-.2px;max-width:65ch}.student-app .lesson-card .meta{font-size:12px;margin:3px 0}.student-app .lesson-open{flex-shrink:0;font-size:13px;min-width:100px;background:#edf1e9;color:#214f43;border-color:transparent}.student-app .lesson-open:hover{background:var(--blue);color:#fff}.lesson-stack{margin-top:18px}.study-tip{margin-top:28px;padding:16px 20px;border-left:3px solid #a9844d;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px}.study-tip strong{color:var(--ink)}
.empty-state{padding:32px;background:var(--surface);border:1px dashed #a9b9aa;border-radius:10px;max-width:760px}.empty-state h2{font-size:22px;margin:0 0 8px}.empty-state p{color:var(--muted);font-size:14px;margin:8px 0 18px}.empty-state button{font-size:13px;margin:4px 8px 4px 0}.resume-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;background:#e5eddf;border:1px solid #c4d6be;border-radius:10px;margin:24px 0}.resume-card h2{font-size:18px;margin:6px 0}.resume-card p{font-size:12px;margin:3px 0}.resume-card button{font-size:13px}
.student-app .page-heading{margin:24px 0}.student-app .page-heading h1{font-family:'SGK Serif','Times New Roman',Times,serif;font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.25;letter-spacing:-1px}.student-app .page-heading>p{font-size:14px}.back-button{background:transparent!important;border:0;padding-left:0;font-size:13px}.lesson-meta{font-size:12px;color:var(--muted)}.lesson-meta summary{cursor:pointer}.lesson-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px}.lesson-tools>button{font-size:13px}.mode-switch{display:flex;gap:4px;background:#e5e9df;padding:4px;border-radius:9px}.mode-switch button{font-size:13px;border:0;min-height:42px;padding:8px 16px;background:transparent}.mode-switch button[aria-pressed=true]{background:var(--blue);color:#fff}.student-app .reading-paper{max-width:none;background:var(--surface);padding:32px 40px;border:1px solid var(--line);border-radius:10px;font-size:17px;line-height:1.9;margin-top:24px}.reading-paper>*{max-width:74ch}.inline-note{font-size:13px;padding:12px 16px;background:#eaf0e4;border-radius:6px;color:#324b38}.exercise-header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:24px}.exercise-header h2{font-size:20px}.exercise-header p{font-size:12px;color:var(--muted)}.student-app .question{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-top:24px;padding:24px}.student-app .question legend{font-size:17px;line-height:1.6}.student-app .option{font-size:15px;margin:10px 0;align-items:flex-start;line-height:1.6}.student-app .option:has(input:checked){border-color:#3c6758;background:#eef3e9}.student-app .submit-bar{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:24px 0}.submit-bar p{font-size:12px;color:var(--muted)}.feedback-row{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 22px;font-size:14px}.feedback-row p{margin:6px 0}.student-app #result>button{margin-top:20px}.student-app .progress-card,.student-app .download-card{border-radius:10px;padding:22px;margin-bottom:14px}.student-app .progress-card h2,.student-app .download-card h2{font-size:18px;margin:0 0 12px}.score-text{font-size:24px;font-weight:750;color:var(--blue)}.download-card button{margin:6px 8px 0 0;font-size:13px}.text-button{background:transparent!important;border-color:transparent;color:#6c3c2a}.student-footer{font-size:11px;letter-spacing:.5px;color:var(--muted);max-width:1028px;margin:24px auto;padding:20px 0;border-top:1px solid var(--line)}.student-app dialog{background:var(--surface);font-size:14px;padding:28px}.student-app dialog h2{font-size:27px;font-family:'SGK Serif','Times New Roman',Times,serif;font-weight:500}.student-app dialog input{margin-bottom:16px}.dialog-actions{margin-top:20px;justify-content:flex-end}.student-app dialog li{padding:8px 0}.student-app dialog ol{padding-left:22px}.student-app .hint{background:#faf0da;color:#66450f}.student-app .success{background:#e4efdf;color:#24472d}
@media(max-width:1050px){.student-app .bottom-nav{width:184px;padding-inline:12px}.student-app .workspace{margin-left:184px}.student-app main{padding-inline:24px}.student-app .notice,.student-footer{margin-inline:24px}.hero-note{padding-left:20px}.catalog-toolbar{grid-template-columns:190px 1fr}}
@media(max-width:760px){.student-app .topbar{height:auto;min-height:80px;padding:14px 18px;align-items:center}.student-app .wordmark{font-size:34px}.student-app .wordmark span{font-size:9px;letter-spacing:1px}.student-app .topbar .actions{max-width:75%;gap:4px}.student-app .topbar button{font-size:12px;min-height:42px;padding:8px 10px}.connection{font-size:10px;order:3;flex-basis:100%;justify-content:flex-end;margin:1px 0 0}.student-app .workspace{margin:0}.student-app main{padding:0 18px 20px;min-height:0}.student-app .notice{margin:0 18px 16px;padding:10px 0;font-size:11px}.student-app .bottom-nav{top:auto;left:0;bottom:0;width:100%;height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:3px;background:var(--surface);border:0;border-top:1px solid var(--line)}.student-app .bottom-nav button{padding:10px 2px;font-size:12px;display:block;text-align:center;min-height:46px;white-space:nowrap}.nav-number,.nav-label,.nav-note{display:none}.student-app .workspace{padding-bottom:82px}.study-hero{gap:16px;grid-template-columns:1.5fr 1fr;padding:0 0 22px}.study-hero h1{font-size:32px;letter-spacing:-1px;margin:12px 0}.study-hero .eyebrow{font-size:9px;letter-spacing:1.1px}.study-hero>div>p:last-child{font-size:12px}.hero-book{font-size:44px}.hero-note{padding-left:14px}.hero-note p{font-size:12px;line-height:1.6}.hero-note small{font-size:10px;display:block;line-height:1.6}.catalog-toolbar{grid-template-columns:1fr;gap:12px;margin:20px 0}.student-app input,.student-app select{font-size:16px}.student-app .course-grid{margin-bottom:24px;gap:10px}.student-app .course-card{padding:12px 16px}.student-app .course-card h2{font-size:17px}.student-app .lesson-card{flex-direction:row;align-items:center;gap:12px;padding:18px 16px}.student-app .lesson-card h3{font-size:15px}.student-app .lesson-card .meta{font-size:10px}.student-app .lesson-open{min-width:76px;font-size:12px;padding:8px 10px}.section-title{font-size:17px}.resume-card{padding:16px;display:block}.resume-card button{margin-top:12px}.empty-state{padding:24px 20px}.student-app .reading-paper{padding:20px 18px;font-size:16px}.student-app .question{padding:18px 14px}.student-app .question legend{font-size:16px}.student-app .page-heading h1{font-size:30px}.student-app .page-heading .eyebrow{font-size:10px}.student-app .lesson-tools{gap:10px}.mode-switch button{padding:8px 12px;font-size:12px}.student-app .option{font-size:14px;padding:12px 10px}.student-footer{margin:20px 18px;font-size:10px}.student-app .question input[type=radio]{font-size:inherit}.study-tip{font-size:12px;padding:12px 16px}.student-app .download-card,.student-app .progress-card{padding:18px}}

/* Readable captions and controls at student phone sizes. */
.student-app .eyebrow,.student-app .meta,.student-app .connection,.student-app .notice,.student-app .hero-note small,.student-app .course-card .meta,.student-app .lesson-card .meta,.student-app .student-footer,.student-app .wordmark span,.student-app .nav-label{font-size:12px}
.student-app .topbar button,.student-app .course-card button,.student-app .lesson-open,.student-app .mode-switch button,.student-app .bottom-nav button,.student-app .resume-card button,.student-app .empty-state button,.student-app .download-card button{font-size:14px;min-height:44px}
.student-app .nav-label{letter-spacing:.6px}.student-app .wordmark span{letter-spacing:.4px}.student-app .course-card{min-width:0}
@media(max-width:760px){.student-app .topbar .actions{max-width:75%}.student-app .wordmark{font-size:30px}.student-app .wordmark span{font-size:10px}.student-app .course-card{grid-template-columns:1fr auto;gap:0 10px}.student-app .hero-note{padding-left:12px}.student-app .bottom-nav button{font-size:14px}.student-app .lesson-card .lesson-open{min-width:82px}.student-app .wordmark span{font-size:12px;max-width:65px;line-height:1.1}.student-app .study-hero .eyebrow{font-size:12px;letter-spacing:.6px}}
@media(max-width:760px){.student-app .study-hero{grid-template-columns:1fr;gap:10px;padding-bottom:18px}.student-app .study-hero h1{font-size:32px;margin:10px 0}.student-app .hero-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;border:0;padding:0}.student-app .hero-book{display:none}.student-app .hero-note p{margin:0;font-size:13px}.student-app .hero-note small{font-size:12px}.student-app .study-hero>div>p:last-child{margin-bottom:4px}}

/* Reserve the initial data region so arriving lessons do not shift the page. */
.student-app .course-grid{min-height:84px}.student-app .course-grid:empty{min-height:0}.student-app.is-loading #courses{min-height:84px}.student-app.is-loading #lesson-list{min-height:500px}.course-skeleton{width:100%;height:84px;border-radius:10px;background:#e8eae2}.lesson-skeleton{height:112px;margin-bottom:2px;border-radius:8px;background:#eeefe8}.student-app.is-loading .study-tip,.student-app.is-loading .student-footer{visibility:hidden}
@media(max-width:760px){.student-app .course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:108px}.student-app .course-card{display:block;padding:14px;min-width:0;min-height:108px}.student-app .course-card button{margin-top:10px;width:100%;font-size:14px}.student-app .course-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:1fr auto}.student-app .course-card:only-child button{width:auto;margin:0}.student-app.is-loading #courses{min-height:108px}.course-skeleton{height:108px;grid-column:1/-1}.student-app.is-loading #lesson-list{min-height:500px}}

/* Socratic AI Tutor dialog & triggers */
.tutor-btn{background:#e8f0e6;color:#183e39;border:1px solid #c2d4be;font-weight:600}
.tutor-btn:hover{background:#d5e5d1;border-color:#183e39}
.lesson-actions{display:flex;gap:8px;align-items:center}
.question-tutor-btn{background:transparent;border:1px dashed #7a9484;color:#28574f;font-size:12px;min-height:36px;padding:6px 12px;border-radius:6px;cursor:pointer;margin-top:10px}
.question-tutor-btn:hover{background:#eff5ee;border-style:solid}
.tutor-dialog{display:none;width:min(580px,calc(100% - 24px));max-height:85dvh;border-radius:14px;border:1px solid var(--line);background:var(--surface);flex-direction:column;padding:0;overflow:hidden;box-shadow:0 12px 32px rgba(24,62,57,0.18)}
.tutor-dialog[open]{display:flex}
.tutor-dialog::backdrop{background:rgba(24,48,45,0.45);backdrop-filter:blur(2px)}
.tutor-header{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--line);background:#fafbf7}
.tutor-header h2{font-size:22px;margin:4px 0 0;font-family:'SGK Serif','Times New Roman',Times,serif;font-weight:600;color:var(--blue)}
.tutor-context-note{font-size:12px;color:var(--muted);margin:4px 0 0}
.tutor-quota-badge{font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;background:#eef2ea;color:#28574f;border:1px solid #dce4d7;white-space:nowrap}
.tutor-quota-badge.is-locked{background:#fde8e8;color:#9b1c1c;border-color:#f8b4b4}
.close-btn{background:transparent!important;border:0;font-size:18px;color:var(--muted);cursor:pointer;min-height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.close-btn:hover{background:#eaece3!important;color:var(--ink)}
.tutor-messages{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px;max-height:50vh;min-height:220px;background:#fcfdfa}
.tutor-msg{max-width:88%;padding:12px 16px;border-radius:12px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.tutor-msg p{margin:4px 0}
.tutor-msg p:first-child{margin-top:0}
.tutor-msg p:last-child{margin-bottom:0}
.tutor-user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:2px}
.tutor-bot{align-self:flex-start;background:#eef2ea;color:var(--ink);border:1px solid #dce4d7;border-bottom-left-radius:2px}
.tutor-bot.is-loading{font-style:italic;color:var(--muted);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.tutor-offline-banner{padding:10px 20px;background:#fff3dd;color:#843d17;font-size:13px;border-top:1px solid #eedec3;text-align:center}
.tutor-form{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line);background:var(--surface);align-items:center}
.tutor-form input{flex:1;min-height:44px;font-size:14px}
.tutor-form button{min-height:44px;padding:0 18px;font-size:14px}
@media(max-width:640px){
  .tutor-dialog{width:calc(100% - 16px);max-height:92dvh}
  .tutor-header{padding:14px 18px}
  .tutor-messages{padding:14px 16px}
  .tutor-form{padding:12px 14px}
}

/* Scoped Auth & Account UI (from docs/design/login/login.css) */
.pin-wrap {
  display: flex;
  min-width: 0;
  border: 1px solid #7b8983;
  border-radius: 8px;
  background: var(--surface, #fff);
  align-items: center;
}
.pin-wrap input {
  border: 0 !important;
  background: transparent !important;
  min-height: 48px;
  padding: 10px 12px;
  width: 100%;
  font-size: 16px;
}
.pin-wrap:focus-within {
  outline: 3px solid #216a60;
  outline-offset: 3px;
}
.pin-wrap input:focus-visible {
  outline: 0;
}
.reveal {
  flex-shrink: 0;
  min-width: 58px;
  min-height: 48px;
  border: 0;
  border-left: 1px solid var(--line, #cbd5e1);
  border-radius: 0 7px 7px 0;
  background: transparent;
  color: var(--blue, #183e39);
  font-size: 14px;
  font-weight: 650;
  padding: 8px 12px;
  cursor: pointer;
}
.reveal:hover {
  background: #f1f5f9;
}
.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line, #cbd5e1);
  color: var(--ink, #0f172a);
  min-height: 48px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 16px;
}
.secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted, #475569);
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}
.text-button:hover {
  text-decoration: underline;
  background: transparent;
}
.auth-dialog {
  width: min(440px, calc(100% - 32px));
  max-width: 440px;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 8px 28px rgba(24, 48, 45, 0.12);
}
.auth-card {
  max-width: 440px;
  margin: 24px auto;
  border-radius: 12px;
  padding: 24px 20px;
}
.account-summary {
  overflow-wrap: anywhere;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #cbd5e1);
}
.account-summary h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}
#account-info {
  font-size: 15px;
  color: var(--muted, #475569);
  font-weight: 600;
}
.account-note {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  border-left: 3px solid #f59e0b;
  font-size: 14px;
}
.field {
  margin-bottom: 14px;
  min-width: 0;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 650;
}
.field .hint {
  font-size: 13px;
  color: var(--muted, #475569);
  margin-top: 6px;
  background: transparent;
  padding: 0;
}
.notice.status:empty {
  display: none !important;
}
.notice.error {
  background: #fff0ec;
  color: #8b2d26;
  border-color: #8b2d26;
  border-left: 3px solid #8b2d26;
}
.notice.success {
  background: #eef5ee;
  color: #245b41;
  border-color: #245b41;
  border-left: 3px solid #245b41;
}

/* Modal Dialog Box (dom.js) & Form Cleanups (U1, U3, U4) */
.msg-dialog {
  width: min(420px, calc(100% - 32px));
  max-width: 420px;
  border-radius: 12px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}
.msg-dialog h2 {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
.msg-dialog p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.msg-dialog label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 600;
  font-size: 14px;
}
.msg-dialog input {
  width: 100%;
  margin-top: 4px;
}
.msg-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}
.msg-actions button {
  min-height: 48px;
  padding: 10px 18px;
  font-size: 15px;
}
.danger-btn {
  background: var(--danger, #8b2d26) !important;
  border-color: var(--danger, #8b2d26) !important;
  color: #fff !important;
}
.danger-btn:hover {
  background: #70241e !important;
  border-color: #70241e !important;
}
.field-error {
  color: var(--danger, #8b2d26);
  font-size: 14px;
  margin: 4px 0 0;
  line-height: 1.4;
}
.field-error[hidden] {
  display: none !important;
}
.form-intro {
  margin-bottom: 16px;
}
.form-help {
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
}
.form-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.form-subheading {
  font-size: 16px;
  margin: 0 0 4px;
}
.btn-full {
  width: 100%;
  margin-top: 8px;
}
.dialog-footer-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Adaptive Settings Menu & Confirmation Details (AGENTS.md J & K) */
.settings-layout { min-width: 0; }
.settings-menu { min-width: 0; }
.group-label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 8px;
}
.group-label:first-child { margin-top: 0; }
.group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.group-link {
  width: 100%;
  text-align: left;
  display: block;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  line-height: 1.45;
}
.group-link strong {
  display: block;
  font-size: 16px;
  font-weight: 650;
}
.group-link span {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.group-link[aria-current=page] {
  background: #eff6ff;
  border-color: var(--blue);
  color: var(--ink);
}
.settings-detail { min-width: 0; }
.detail-top { margin-bottom: 20px; }
.detail-top h2 { font-size: 1.5rem; margin-top: 16px; }
.description { margin-top: 8px; color: var(--muted); }
.account-data { display: grid; gap: 0; margin: 0 0 20px; }
.account-data div { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.account-data dt { font-size: 13px; color: var(--muted); }
.account-data dd { margin: 4px 0 0; font-weight: 600; }

@media(max-width: 959px) {
  .settings-layout.has-detail .settings-menu { display: none; }
  .settings-layout:not(.has-detail) .settings-detail { display: none; }
  #settings.detail-active > .page-head { display: none; }
  .detail-top h2 { margin-top: 8px; }
}
@media(min-width: 960px) {
  .settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .settings-menu { padding-right: 24px; border-right: 1px solid var(--line); }
  .back-button { display: none; }
  .settings-detail > .card { padding: 28px; }
}

.row-actions {
  min-width: 0;
}
.row-actions summary {
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
}
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions summary::after {
  content: ' ▾';
  font-size: 11px;
  margin-left: 6px;
}
.row-actions[open] summary::after {
  content: ' ▴';
}
.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.action-list button {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 13px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.empty-region:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Cổng đăng nhập: chưa có phiên thì chỉ thấy cổng, không thấy bài học */
.is-gated .teacher-link,.is-gated main,.is-gated .bottom-nav,.is-gated #status,.is-gated #login,.is-gated #open-settings,.is-gated #account{display:none!important}
.gate{min-height:calc(100dvh - 140px);display:grid;place-items:center;padding:24px 20px}
.gate-card{width:min(440px,100%);padding:32px 24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-align:center}
.gate-card h1{font-size:clamp(24px,6vw,30px);margin:8px 0}
.gate-lead{color:var(--muted);margin:0 0 24px}
.gate-actions{display:grid;gap:12px}
.gate-actions button,.gate-link{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 16px;border-radius:9px;font-size:16px;font-weight:600;text-decoration:none}
.gate-link{border:1px solid var(--blue);color:var(--blue);background:var(--surface)}
.gate-link:hover{background:#eaf1eb}
.booting main,.booting .bottom-nav,.booting #gate{display:none!important}

/* ===== Chuẩn chữ và bố cục điện thoại (docs/design/chuan-giao-dien-hoc-sinh.md) =====
   Nội dung 17px, phụ 15px, nhãn in hoa 14px, nút và ô nhập 16px; không có chữ nào dưới 14px. */
.student-app{--fs-body:17px;--fs-small:15px;--fs-label:14px;--fs-control:16px;font-size:var(--fs-body);line-height:1.6}
.student-app .eyebrow,.student-app .study-hero .eyebrow,.student-app .page-heading .eyebrow,.student-app .nav-label,.student-app .nav-number,.student-app .wordmark span{font-size:var(--fs-label);letter-spacing:.08em}
.student-app .meta,.student-app .notice,.student-app .connection,.student-app .hero-note small,.student-app .hero-note p,.student-app .course-card .meta,.student-app .lesson-card .meta,.student-app .student-footer,.student-app .nav-note,.student-app .inline-note,.student-app #catalog-summary,.student-app .study-tip strong,.student-app .study-tip span,.student-app label,.student-app .empty-state p,.student-app .page-heading>p,.student-app .tutor-context-note,.student-app .tutor-quota-badge,.student-app .tutor-offline-banner,.student-app .account-note,.student-app a.teacher-link,.student-app .study-hero>div>p{font-size:var(--fs-small)}
.student-app button,.student-app .lesson-open,.student-app .topbar button,.student-app .course-card button,.student-app .mode-switch button,.student-app .resume-card button,.student-app .empty-state button,.student-app .download-card button,.student-app .tutor-form button,.student-app .reveal{font-size:var(--fs-control)}
.student-app .question-tutor-btn{font-size:var(--fs-label);min-height:44px}
.student-app input,.student-app select,.student-app textarea,.student-app .tutor-form input{font-size:var(--fs-control)}
.student-app .bottom-nav button{font-size:var(--fs-label)}
.student-app button[aria-pressed=true],.student-app button[aria-pressed=true]:hover,.student-app .mode-switch button[aria-pressed=true]:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.student-app .tutor-msg{font-size:var(--fs-body)}
.student-app summary,.student-app #answer-count,.student-app #draft-status,.student-app #lesson-version,.student-app .lesson-card h3,.student-app .tutor-header .eyebrow{font-size:var(--fs-small)}
.student-app .lesson-card h3,.student-app .lesson-card h2{font-size:18px}
@media(max-width:760px){
  .student-app .topbar{position:static}
  .student-app main{padding-inline:16px}
  .student-app .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
  .student-app .bottom-nav button{padding:8px 2px;min-height:48px;white-space:normal;line-height:1.25;display:flex;align-items:center;justify-content:center}
}
@media(max-width:640px){
  .student-app .tutor-header{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .student-app .tutor-header>div:last-child{justify-content:space-between}
  .student-app .tutor-header h2{font-size:22px}
  .student-app .tutor-quota-badge{white-space:normal}
}

/* ===== Giao diện đăng nhập và thanh trên theo mẫu: nền trung tính, thẻ bo góc, biểu tượng thay chữ ===== */
.student-app{--auth-btn-bg:#18181b;--auth-btn-fg:#fff;--control:#8a8a93;--radius:12px}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.student-app .topbar{height:72px;padding:0 24px;gap:12px}
.student-app .topbar .actions{max-width:none;margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.student-app .wordmark{display:flex;align-items:center;gap:10px;font-size:34px;min-height:44px}
.student-app .wordmark span{margin:0;font-family:system-ui,sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.student-app .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;position:relative}
.student-app .icon-btn:hover{background:#f1f1f3;border-color:var(--control)}
.student-app #theme-toggle[aria-pressed=true],.student-app #theme-toggle[aria-pressed=true]:hover{background:var(--surface);color:var(--ink);border-color:var(--line)}
.student-app .icon-btn:focus-visible,.student-app .auth-btn:focus-visible{outline:3px solid #2d7a6c;outline-offset:2px}
.student-app .btn-login{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:var(--radius);background:var(--auth-btn-bg);color:var(--auth-btn-fg);border-color:var(--auth-btn-bg)}
.student-app .btn-login:hover{background:#27272a}
.student-app .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:var(--fs-small)}
.student-app .avatar-btn{border-radius:50%;width:48px;height:48px}
.student-app .connection{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;color:#15803d}
.student-app .connection::before{display:none}
.student-app .connection .ic-offline,.student-app .connection.is-offline .ic-online{display:none}
.student-app .connection.is-offline .ic-offline{display:block}
.student-app .connection.is-offline{color:#b45309}
.student-app .ic-moon,:root[data-theme=dark] .ic-sun{display:none}
:root[data-theme=dark] .ic-moon{display:block}
:root[data-theme=light] .ic-sun{display:block}
:root[data-theme=light] .ic-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ic-sun{display:none}:root:not([data-theme=light]) .ic-moon{display:block}}
.student-app .gate{background:var(--paper)}
.student-app .auth-card,.student-app .auth-dialog{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08)}
.student-app .auth-card{width:min(440px,100%);padding:36px 28px;text-align:center}
.student-app .auth-logo{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:16px;border-radius:50%;background:var(--auth-btn-bg);color:var(--auth-btn-fg);font-family:'SGK Serif','Times New Roman',serif;font-weight:700;font-size:26px;letter-spacing:-1.5px}
.student-app .auth-card h1,.student-app .auth-dialog h2{margin:0 0 6px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.student-app .gate-lead,.student-app .form-help{margin:0 0 24px;font-size:var(--fs-body);color:var(--muted)}
.student-app .gate-actions{display:grid;gap:12px}
.student-app .auth-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:12px 20px;border:1px solid var(--auth-btn-bg);border-radius:14px;background:var(--auth-btn-bg);color:var(--auth-btn-fg);font-size:17px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .12s,background .15s}
.student-app .auth-btn:hover{background:#27272a;color:#fff;border-color:#27272a}
.student-app .auth-btn:active{transform:translateY(1px)}
.student-app .auth-btn span{flex:1;text-align:left}
.student-app .auth-btn .ic-end{margin-left:auto}
.student-app .auth-btn-alt{background:var(--surface);color:var(--ink);border-color:var(--control);box-shadow:none}
.student-app .auth-btn-alt:hover{background:#f4f4f5;color:var(--ink);border-color:var(--ink)}
.student-app .auth-dialog{width:min(440px,calc(100% - 32px));max-width:440px;padding:36px 28px 28px;color:var(--ink)}
.student-app .auth-dialog::backdrop{background:rgba(9,9,11,.55);backdrop-filter:blur(3px)}
.student-app .auth-dialog .form-intro{text-align:center}
.student-app .dialog-close{position:absolute;top:12px;right:12px;border-color:transparent;background:transparent}
.student-app .auth-dialog .field{display:grid;gap:8px;margin-bottom:16px;text-align:left}
.student-app .auth-dialog label{font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.student-app .input-icon{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 6px 0 16px;border:1px solid var(--control);border-radius:var(--radius);background:var(--surface);color:var(--muted)}
.student-app .input-icon:focus-within{border-color:#2d7a6c;outline:3px solid rgba(45,122,108,.35);outline-offset:0}
.student-app .input-icon input{flex:1;min-width:0;min-height:52px;padding:0;border:0!important;background:transparent!important;color:var(--ink);font-size:var(--fs-control);outline:0}
.student-app .input-icon input:focus-visible{outline:0}
.student-app .input-icon .reveal{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted)}
.student-app .input-icon .reveal:hover{background:rgba(127,127,127,.15)}
.student-app .reveal .ic-eyeoff,.student-app .reveal[aria-pressed=true] .ic-eye{display:none}
.student-app .reveal[aria-pressed=true] .ic-eyeoff{display:block}
.student-app .pin-wrap{border:1px solid var(--control)}
.student-app .auth-dialog .btn-full{margin-top:8px}
.student-app .auth-dialog .notice.error:empty{display:none}
@media(max-width:760px){
  .student-app .topbar{height:64px;padding:0 16px}
  .student-app .topbar .actions{gap:6px}
  .student-app .wordmark span{display:none}
  .student-app .btn-login span{display:none}
  .student-app .btn-login{width:44px;padding:0;justify-content:center}
  .student-app .auth-card{padding:28px 20px}
  .student-app .auth-card h1,.student-app .auth-dialog h2{font-size:28px}
}

/* ===== Trang học sinh theo mẫu: thẻ bo góc, biểu tượng, điều hướng dưới có biểu tượng ===== */
.student-app{--soft:#eef0ee;--radius-card:16px}
.student-app .ic-sm{width:16px;height:16px}
.student-app h1,.student-app .page-heading h1,.student-app .study-hero h1{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.2;font-size:clamp(28px,5vw,40px)}
.student-app .study-hero h1{font-size:clamp(28px,5vw,44px)}
.student-app .hero-book{display:none}
.student-app .eyebrow{letter-spacing:.08em}
.student-app button.primary,.student-app button.btn-login{background:var(--auth-btn-bg);color:var(--auth-btn-fg);border-color:var(--auth-btn-bg)}
.student-app button.primary:hover{background:#27272a;color:#fff;border-color:#27272a}
.student-app button,.student-app .lesson-open{border-radius:12px}
.student-app .btn-ic,.student-app .back-button,.student-app .lesson-open,.student-app .course-card button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.student-app .back-button{min-height:44px;padding:8px 12px 8px 4px;font-weight:600;color:var(--ink)}
.student-app .lesson-stack{display:grid;gap:12px}
.student-app .lesson-card,.student-app .lesson-card:first-of-type,.student-app .lesson-card:last-child{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.student-app .tile{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--blue)}
.student-app .tile .ic{width:24px;height:24px}
.student-app .lesson-description{display:grid;gap:6px;min-width:0}
.student-app .lesson-description h3{margin:0;font-size:18px;line-height:1.3;font-weight:700}
.student-app .lesson-description .meta{margin:0}
.student-app .chip{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:var(--fs-label);font-weight:600}
.student-app .lesson-open{min-height:44px;padding:8px 16px;border:1px solid var(--control);background:var(--surface);color:var(--ink);font-weight:700}
.student-app .lesson-open:hover{background:var(--auth-btn-bg);color:var(--auth-btn-fg);border-color:var(--auth-btn-bg)}
.student-app .course-grid{gap:12px}
.student-app .course-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"t m b" "t h b";align-items:center;gap:0 16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.student-app .course-card,.student-app .course-card *{text-align:left}
.student-app .course-card .tile{grid-area:t}.student-app .course-card .meta{grid-area:m;margin:0}.student-app .course-card h2{grid-area:h;margin:0;font-size:18px;font-weight:700}.student-app .course-card button{grid-area:b;min-height:44px}
.student-app .empty-state{display:grid;justify-items:center;gap:8px;max-width:none;padding:32px 20px;text-align:center;border:1px dashed var(--control);border-radius:var(--radius-card);background:var(--surface)}
.student-app .empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--soft);color:var(--muted)}
.student-app .empty-icon .ic{width:28px;height:28px}
.student-app .empty-state h2{margin:4px 0 0;font-size:20px;font-weight:700}
.student-app .empty-state p{margin:0;max-width:34ch}
.student-app .reading-paper,.student-app .resume-card,.student-app .study-tip{border-radius:var(--radius-card)}
.student-app .exercise-header{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:8px}
.student-app .exercise-header::before,.student-app .exercise-header::after{content:'';position:absolute;left:0;bottom:0;height:6px;border-radius:3px}
.student-app .exercise-header::before{right:0;background:var(--soft)}
.student-app .exercise-header::after{width:var(--p,0%);background:var(--blue);transition:width .25s}
.student-app #result{border-radius:var(--radius-card)}
.student-app .result-title{display:flex;align-items:center;gap:10px;font-size:22px}
.student-app .result-title .ic{color:#15803d;width:28px;height:28px}
.student-app .bottom-nav button{display:flex;align-items:center;gap:12px;border-radius:12px}
.student-app .bottom-nav .nav-ic{width:24px;height:24px}
.student-app .bottom-nav button[aria-current=page]{background:var(--soft);color:var(--ink);border-color:transparent}
.student-app .bottom-nav button[aria-current=page] .nav-ic{color:var(--blue)}
.student-app .bottom-nav button[aria-current=page]:hover{background:var(--soft);color:var(--ink)}
.student-app .bottom-nav button:hover{background:var(--soft)}
@media(max-width:760px){
  .student-app .bottom-nav{padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:4px}
  .student-app .bottom-nav button{flex-direction:column;justify-content:center;gap:2px;min-height:60px;padding:6px 2px;font-size:var(--fs-label);line-height:1.2}
  .student-app .bottom-nav button[aria-current=page]{background:var(--soft)}
  .student-app .lesson-card,.student-app .lesson-card:first-of-type,.student-app .lesson-card:last-child{grid-template-columns:auto 1fr;gap:12px 14px}
  .student-app .lesson-open{grid-column:1/-1;width:100%}
  .student-app .course-card{grid-template-columns:auto 1fr;grid-template-areas:"t m" "t h" "b b";gap:0 14px}
  .student-app .course-card,.student-app .course-card:only-child{grid-template-columns:auto 1fr;min-height:0}
  .student-app .course-grid{display:grid;grid-template-columns:1fr;min-height:0}
  .student-app .course-card button{margin-top:12px;width:100%;text-align:center}.student-app .course-card button span{text-align:center}
  .student-app .workspace{padding-bottom:88px}
}

/* ===== Chữ co giãn theo màn hình hẹp, thông báo cập nhật dạng biểu tượng, bỏ chữ thừa ===== */
@media(max-width:760px){
  .student-app{--fs-body:clamp(18px,4.6vw,22px);--fs-small:clamp(16px,4.1vw,20px);--fs-label:clamp(15px,3.8vw,18px);--fs-control:clamp(17px,4.3vw,20px)}
  .student-app .bottom-nav button{letter-spacing:0}
  .student-app .study-hero{display:none}
}
.student-app .update-wrap{display:inline-flex}
.student-app .update-wrap[hidden]{display:none}
.student-app .update-btn{border-color:#2d7a6c;color:#2d7a6c}
.student-app .badge-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#dc2626;border:2px solid var(--surface)}
.student-app .icon-btn[aria-busy=true] svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.student-app #status:not(.error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0;min-height:0}
.student-app .student-footer,.student-app .nav-note,.student-app .nav-label{display:none}
.student-app label.option,.student-app fieldset legend,.student-app .hint{font-size:var(--fs-body)}
.student-app label.option{min-height:52px;line-height:1.4}
.student-app .update-wrap,.student-app #update-notice{background:transparent;border:0;padding:0;margin:0;min-height:0;max-width:none}
.student-app #msg-title,.student-app .auth-dialog h2{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em}

.student-app .lesson-tools{justify-content:flex-start;gap:10px 12px}
.student-app fieldset.question legend{float:left;width:100%;padding:0;margin:0 0 16px}
.student-app fieldset.question legend+*{clear:both}
.student-app #result button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.student-app .detail-top h2{margin-top:0}
.student-app #settings .page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}
.student-app #settings .page-head h1{margin:0}
.student-app #close-settings{min-width:48px;min-height:48px;padding:0;justify-content:center}
.student-app .question legend,.student-app fieldset.question legend{font-size:var(--fs-body);font-weight:700;line-height:1.5}
@media(min-width:960px){.student-app .settings-detail .back-button{display:none}}
.student-app .lesson-tools,.student-app .lesson-actions{gap:12px}
.student-app .mode-switch{gap:0;padding:0;background:transparent;border:1px solid var(--control);border-radius:12px;overflow:hidden}
.student-app .mode-switch button{min-height:46px;border-radius:0;padding:8px 18px}
.student-app .lesson-actions button{min-height:48px;padding:8px 18px;border:1px solid var(--control);border-radius:12px}
.student-app .lesson-actions button,.student-app .lesson-actions .tutor-btn{background:var(--surface);color:var(--ink)}
.student-app .bottom-nav .nav-text{white-space:nowrap}

/* Nút chế độ: hai nút tách khe */
.student-app .mode-switch{gap:4px;padding:4px;border:0;border-radius:16px;background:var(--line)}
.student-app .mode-switch button{min-height:48px;border-radius:12px;padding:6px 18px}
.student-app .lesson-actions button{min-height:56px}
/* Trang kết quả và thống kê */
.student-app .result-hero{display:flex;align-items:center;gap:28px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .score-ring{--p:0%;flex:none;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--blue) var(--p),var(--line) 0)}
.student-app .score-ring strong{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:var(--surface);font:800 28px/1 system-ui,sans-serif;color:var(--ink)}
.student-app .result-text h2{margin:0 0 4px;font:800 clamp(22px,3vw,30px)/1.2 system-ui,sans-serif}
.student-app .result-count{margin:0 0 6px;font-size:var(--fs-body);font-weight:700}
.student-app .result-text .meta{margin:4px 0 0}
.student-app .stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.student-app .stat-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.student-app .stat-tile{display:grid;gap:2px;justify-items:start;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .stat-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:12px;background:var(--paper);color:var(--brand-text,var(--blue))}
.student-app .stat-ic .ic{width:22px;height:22px}
.student-app .stat-value{font:800 clamp(24px,3.4vw,32px)/1.1 system-ui,sans-serif;color:var(--ink)}
.student-app .stat-label{font-size:var(--fs-small);color:var(--muted)}
.student-app .result-actions{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 24px}
.student-app .result-actions button{min-height:50px;padding:8px 22px;display:inline-flex;align-items:center;gap:8px}
.student-app .panel{margin:16px 0;padding:20px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .panel-title{margin:0 0 16px;font:800 var(--fs-body)/1.3 system-ui,sans-serif}
.student-app .week-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:150px;align-items:end}
.student-app .week-col{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:end;gap:6px;height:100%}
.student-app .week-bar{width:100%;max-width:44px;min-height:4px;border-radius:8px 8px 4px 4px;background:var(--blue)}
.student-app .week-num{font-style:normal;font-size:var(--fs-label);color:var(--muted)}
.student-app .week-day{font-size:var(--fs-label);color:var(--muted)}
.student-app .stat-row{padding:14px 0;border-top:1px solid var(--line)}
.student-app .stat-row:first-of-type{border-top:0;padding-top:0}
.student-app .stat-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.student-app .stat-row h3{margin:0;font:700 var(--fs-body)/1.35 system-ui,sans-serif}
.student-app .stat-row-score{font:800 var(--fs-body)/1 system-ui,sans-serif;color:var(--brand-text,var(--blue))}
.student-app .bar{height:10px;margin:10px 0 8px;border-radius:99px;background:var(--line);overflow:hidden}
.student-app .bar span{display:block;height:100%;border-radius:99px;background:var(--blue)}
.student-app .stat-row .meta{margin:0}
.student-app .pending-note{display:flex;align-items:center;gap:10px}
.student-app .pending-note .ic{flex:none}
@media(max-width:760px){.student-app .result-hero{flex-direction:column;text-align:center;gap:16px;padding:22px}.student-app .stat-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.student-app .stat-grid{gap:10px}.student-app .stat-tile{padding:14px}.student-app .week-chart{gap:6px}}
/* Hộp thoại Gia sư AI */
.student-app .tutor-dialog{padding:0;margin:auto;width:min(640px,calc(100% - 32px));height:min(760px,86dvh);max-height:none;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.student-app .tutor-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:none}
.student-app .tutor-header{display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px 16px 14px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.student-app .tutor-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--blue);color:#fff}
.student-app .tutor-title{flex:1;min-width:0}
.student-app .tutor-header h2{margin:0;font:800 var(--fs-body)/1.25 system-ui,sans-serif;color:var(--ink)}
.student-app .tutor-context-note{margin:2px 0 0;font-size:var(--fs-label);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.student-app .tutor-quota-badge{flex:none;padding:6px 12px;border-radius:99px;font-size:var(--fs-label);font-weight:700;white-space:nowrap}
.student-app .tutor-quota-badge:empty{display:none}
.student-app .tutor-header .icon-btn,.student-app .tutor-form .icon-btn{display:inline-grid;place-items:center;flex:none;width:48px;min-width:48px;height:48px;padding:0;border-radius:14px}
.student-app .tutor-header .close-btn{background:transparent;border:1px solid transparent;color:var(--muted)}
.student-app .tutor-header .close-btn:hover{border-color:var(--control);color:var(--ink)}
.student-app .tutor-messages{flex:1;max-height:none;min-height:0;padding:20px;background:var(--paper)}
.student-app .tutor-msg{max-width:86%;font-size:var(--fs-body);line-height:1.55}
.student-app .tutor-form{padding:12px 16px;gap:10px;background:var(--surface)}
.student-app .tutor-form input{border-radius:14px;min-height:48px}
@media(max-width:640px){.student-app .result-actions button:first-child{flex:1 1 100%;justify-content:center}.student-app .result-actions button{flex:1 1 40%;justify-content:center}.student-app .tutor-dialog{width:100%;max-width:none;margin:0;height:100dvh;max-height:100dvh;border-radius:0;border:0}.student-app .tutor-header{flex-direction:row;padding:10px 12px 10px 16px}.student-app .tutor-header>div:last-child{justify-content:flex-start}.student-app .tutor-messages{padding:16px}.student-app .tutor-msg{max-width:92%}}


/* Tổng quan học tập */
.student-app .dash-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:8px 0 16px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .dash-greet h2{margin:0 0 4px;font:800 clamp(22px,3vw,30px)/1.2 system-ui,sans-serif}
.student-app .dash-greet .meta{margin:0}
.student-app .dash-next{display:grid;gap:4px;justify-items:start;min-width:0;max-width:100%}
.student-app .dash-next-label{font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-text,var(--blue))}
.student-app .dash-next strong{font:700 var(--fs-body)/1.35 system-ui,sans-serif;overflow-wrap:anywhere}
.student-app .dash-next button{margin-top:8px;min-height:50px;padding:8px 22px;display:inline-flex;align-items:center;gap:8px}
.student-app .dash-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;margin:16px 0;align-items:stretch}
.student-app .dash-overview .panel,.student-app .dash-overview .stat-grid{margin:0}
.student-app .dash-ring-card{display:flex;align-items:center;gap:20px}
.student-app .dash-ring-card .score-ring{width:116px;height:116px}
.student-app .dash-ring-card .score-ring strong{width:88px;height:88px;font-size:22px}
.student-app .dash-ring-card .panel-title{margin-bottom:10px}
.student-app .dash-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-small)}
.student-app .dash-legend li{display:flex;align-items:center;gap:8px}
.student-app .dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%}
.student-app .dot.is-mastered{background:var(--blue)}
.student-app .dot.is-learning{background:var(--muted)}
.student-app .dot.is-none{background:var(--line);border:1px solid var(--control)}
.student-app .stat-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.student-app .path{list-style:none;margin:0;padding:0}
.student-app .path-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:0 0 22px}
.student-app .path-step:last-child{padding-bottom:0}
.student-app .path-step::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line)}
.student-app .path-step:last-child::before{display:none}
.student-app .path-node{z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--control);background:var(--surface);font:800 var(--fs-small)/1 system-ui,sans-serif;color:var(--muted)}
.student-app .path-step.is-learning .path-node{border-color:var(--blue);color:var(--brand-text,var(--blue))}
.student-app .path-step.is-review .path-node{border-style:dashed}
.student-app .path-step.is-mastered .path-node{background:var(--blue);border-color:var(--blue);color:#fff}
.student-app .path-step.is-mastered::before{background:var(--blue)}
.student-app .path-node .ic{width:22px;height:22px}
.student-app .path-body{min-width:0;padding-top:2px}
.student-app .path-body .bar{margin:8px 0 6px}
.student-app .path-body .meta{margin:0}
.student-app .path-go{min-height:48px;padding:6px 16px;display:inline-flex;align-items:center;gap:8px;font-weight:700}
.student-app .how-calc{margin:16px 0 8px}
.student-app .how-calc summary{min-height:44px;display:flex;align-items:center;color:var(--muted);cursor:pointer}
.student-app #sync{margin:0 0 4px}
@media(max-width:760px){.student-app .dash-overview{grid-template-columns:1fr}.student-app .dash-hero{padding:20px}.student-app .dash-next{width:100%}.student-app .dash-next button{width:100%;justify-content:center}.student-app .path-step{grid-template-columns:44px minmax(0,1fr)}.student-app .path-go{grid-column:2;justify-self:start}.student-app .dash-ring-card{flex-direction:row}}


/* Bốn nút công cụ bài học: tách rời, đều nhau */
.student-app .lesson-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.student-app .mode-switch,.student-app .lesson-actions{display:contents}
.student-app .mode-switch button,.student-app .lesson-actions button{width:100%;min-height:52px;padding:8px 14px;border:1px solid var(--control);border-radius:14px;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.student-app .mode-switch button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:760px){.student-app .lesson-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tổng quan: biểu tượng đồng bộ cạnh lời chào, nút AI trên thanh đầu */
.student-app .dash-greet-top{display:flex;align-items:center;gap:12px}
.student-app .dash-greet-top h2{margin:0}
.student-app .sync-btn{display:inline-grid;place-items:center;flex:none;width:48px;min-width:48px;height:48px;padding:0;border-radius:14px;margin:0}
.student-app .ai-btn{color:var(--brand-text,var(--blue))}
.student-app .tutor-picks{display:grid;gap:10px;margin-top:4px}
.student-app .tutor-pick{justify-content:flex-start;text-align:left;min-height:52px;padding:10px 16px;border-radius:14px;font-weight:600}

@media(max-width:400px){.student-app .bottom-nav .nav-text{font-size:15px;letter-spacing:0}.student-app .topbar{padding-inline:12px}.student-app .topbar .actions{gap:2px}.student-app .topbar .actions button{min-width:44px;width:44px;height:44px;min-height:44px;padding:0}}

/* UI-TEAL:BEGIN - giao diện học sinh: kem ấm, xanh ngọc, Nunito */
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url(./fonts/nunito-vietnamese-wght-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url(./fonts/nunito-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.student-app{--ink:#10292c;--muted:#486367;--paper:#fffdf7;--blue:#0f766e;--line:#e5e7dc;--surface:#fff;--soft:#f1f5ef;--brand-text:#0f766e;--auth-btn-bg:#0f766e;--auth-btn-fg:#fff;--control:#7a9591;--radius-card:18px;--teal-bg:#d9f2ee;--teal-fg:#0f766e;--blue-bg:#e0ebff;--blue-fg:#1d4ed8;--amber-bg:#fef0d4;--amber-fg:#9a4306;--violet-bg:#ede7fe;--violet-fg:#6d28d9;--green-bg:#dcfce7;--green-fg:#15803d;--hero-art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cellipse cx='110' cy='148' rx='86' ry='9' fill='%230f766e' opacity='.14'/%3E%3Crect x='34' y='106' width='152' height='36' rx='10' fill='%230f766e'/%3E%3Crect x='46' y='116' width='128' height='5' rx='2.5' fill='%23fff' opacity='.35'/%3E%3Crect x='50' y='72' width='132' height='36' rx='10' fill='%23f59e0b'/%3E%3Crect x='62' y='82' width='104' height='5' rx='2.5' fill='%23fff' opacity='.4'/%3E%3Crect x='68' y='38' width='108' height='36' rx='10' fill='%237c3aed'/%3E%3Crect x='80' y='48' width='80' height='5' rx='2.5' fill='%23fff' opacity='.4'/%3E%3Cpath d='M188 22l4 11 11 4-11 4-4 11-4-11-11-4 11-4z' fill='%23f59e0b'/%3E%3Cpath d='M34 40l2.5 6.5 6.5 2.5-6.5 2.5L34 58l-2.5-6.5L25 49l6.5-2.5z' fill='%237c3aed' opacity='.8'/%3E%3Ccircle cx='200' cy='78' r='4' fill='%230f766e' opacity='.5'/%3E%3Ccircle cx='22' cy='92' r='3' fill='%23f59e0b' opacity='.7'/%3E%3Cg transform='rotate(-24 150 28)'%3E%3Crect x='128' y='20' width='44' height='10' rx='3' fill='%23ef4444'/%3E%3Cpath d='M172 20l12 5-12 5z' fill='%23fcd9b0'/%3E%3Crect x='128' y='20' width='8' height='10' rx='2' fill='%23fca5a5'/%3E%3C/g%3E%3C/svg%3E");font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500}
.student-app *:not(.wordmark):not(.auth-logo):not(svg):not(path){font-family:inherit}
.student-app h1,.student-app h2,.student-app h3,.student-app strong{font-weight:800}
.student-app .wordmark,.student-app .auth-logo{font-family:'SGK Serif','Times New Roman',serif!important}
.student-app .topbar{background:rgba(255,253,247,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.student-app .bottom-nav{background:#fbf8ef}
.student-app button.primary,.student-app .auth-btn:not(.auth-btn-alt){background:var(--blue);color:#fff;border-color:var(--blue);border-radius:14px;font-weight:800;box-shadow:0 8px 20px rgba(15,118,110,.22)}
.student-app button.primary:hover,.student-app .auth-btn:not(.auth-btn-alt):hover{background:#115e59;border-color:#115e59;color:#fff}
.student-app .course-card,.student-app .lesson-card,.student-app .panel,.student-app .stat-tile,.student-app .dash-ring-card,.student-app .question,.student-app .progress-card,.student-app .download-card{box-shadow:0 1px 2px rgba(16,41,44,.04),0 8px 24px rgba(16,41,44,.05)}
.student-app .tile{border-radius:14px;background:var(--teal-bg);color:var(--teal-fg)}
.student-app .tone-blue{background:var(--blue-bg);color:var(--blue-fg)}
.student-app .tone-amber{background:var(--amber-bg);color:var(--amber-fg)}
.student-app .tone-violet{background:var(--violet-bg);color:var(--violet-fg)}
.student-app .tone-green{background:var(--green-bg);color:var(--green-fg)}
.student-app .tone-teal{background:var(--teal-bg);color:var(--teal-fg)}
.student-app .stat-tile{background:var(--surface);color:var(--ink)}
.student-app .stat-tile .stat-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;margin-bottom:6px}
.student-app .stat-tile.tone-teal .stat-ic{background:var(--teal-bg);color:var(--teal-fg)}
.student-app .stat-tile.tone-blue .stat-ic{background:var(--blue-bg);color:var(--blue-fg)}
.student-app .stat-tile.tone-amber .stat-ic{background:var(--amber-bg);color:var(--amber-fg)}
.student-app .stat-tile.tone-green .stat-ic{background:var(--green-bg);color:var(--green-fg)}
.student-app .stat-tile .stat-value{font-size:clamp(24px,4vw,30px);font-weight:900;line-height:1.1}
.student-app .bottom-nav button[aria-current=page]{background:var(--teal-bg);color:var(--teal-fg);font-weight:800}
.student-app .bottom-nav button[data-tab=catalog][aria-current=page]{background:var(--blue-bg);color:var(--blue-fg)}
.student-app .bottom-nav button[data-tab=practice][aria-current=page]{background:var(--amber-bg);color:var(--amber-fg)}
.student-app .bottom-nav button[data-tab=exams][aria-current=page]{background:var(--green-bg);color:var(--green-fg)}
.student-app .bottom-nav button[data-tab=materials][aria-current=page]{background:var(--violet-bg);color:var(--violet-fg)}
.student-app .bar{height:12px}
.student-app .bar>*,.student-app .bar span{background:linear-gradient(90deg,#14b8a6,#0f766e)}
.student-app .mode-switch button[aria-pressed=true]{background:var(--blue);color:#fff}
.student-app .dash-hero{background:linear-gradient(135deg,#e6f6f3 0%,#fffdf7 60%);border-color:#cfe9e4;padding-right:min(250px,30%);background-image:var(--hero-art),linear-gradient(135deg,#e6f6f3 0%,#fffdf7 60%);background-repeat:no-repeat;background-position:right 24px center,0 0;background-size:190px auto,auto}
@media(max-width:760px){.student-app .dash-hero{padding-right:20px;background-image:linear-gradient(135deg,#e6f6f3 0%,#fffdf7 60%);background-size:auto;background-position:0 0}}
.student-app .gate-card,.student-app .auth-card{background-image:var(--hero-art);background-repeat:no-repeat;background-position:right -20px bottom -14px;background-size:150px auto}
@media(max-width:560px){.student-app .gate-card,.student-app .auth-card{background-image:none}}
:root:has(.student-app){--paper:#fffdf7}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);box-shadow:0 0 0 1000px var(--surface) inset;transition:background-color 9999s}
/* UI-TEAL:END */
/* EXAM:BEGIN - tab Thi và màn hình làm bài */
.student-app .exam-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.student-app .exam-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.student-app .exam-card.is-real{border-color:#9fd3c7}
.student-app .exam-card-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.student-app .exam-badge{font-size:14px;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--amber-bg);color:var(--amber-fg)}
.student-app .exam-badge.real{background:var(--green-bg);color:var(--green-fg)}
.student-app .exam-kind{font-size:14px;color:var(--muted);font-weight:700}
.student-app .exam-title{font-size:18px;margin:0}
.student-app .exam-meta,.student-app .exam-best{margin:0;font-size:15px;color:var(--muted)}
.student-app .exam-card-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.student-app .exam-state{font-size:14px;font-weight:700;color:var(--muted)}
.student-app .exam-state.state-open,.student-app .exam-state.state-progress{color:var(--brand-text)}
.student-app .exam-go{min-height:48px;padding:0 18px}
.student-app .exam-go:disabled{opacity:.55;cursor:not-allowed}
.exam-screen{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.exam-screen[hidden]{display:none}
body.exam-open{overflow:hidden}
.exam-screen .ex-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.exam-screen .ex-title{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
.exam-screen .ex-title strong{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exam-screen .ex-title span{font-size:14px;color:var(--muted)}
.exam-screen .ex-clock{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;padding:4px 14px;border-radius:12px;background:var(--soft);min-width:96px;text-align:center}
.exam-screen .ex-clock.warn{background:#fff3d6;color:#7a4a00}
.exam-screen .ex-clock.danger{background:#fde2de;color:#9b1c10}
.exam-screen button{min-height:48px;border-radius:12px;font-size:16px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 16px;cursor:pointer}
.exam-screen button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.exam-screen button:disabled{opacity:.5;cursor:not-allowed}
.exam-screen .ex-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0}
.exam-screen .ex-stage{overflow:auto;padding:18px;outline:none}
.exam-screen .ex-card{max-width:820px;margin:0 auto}
.exam-screen .ex-q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.exam-screen .ex-q-num{font-size:20px;margin:0}
.exam-screen .ex-q-pts{font-size:14px;font-weight:800;color:var(--brand-text)}
.exam-screen .ex-prompt{font-size:18px;line-height:1.6;margin-bottom:16px}
.exam-screen .ex-options{display:grid;gap:10px}
.exam-screen .ex-opt{display:flex;gap:12px;align-items:flex-start;text-align:left;min-height:56px;padding:12px 14px;border-width:2px;font-weight:600;width:100%}
.exam-screen .ex-opt-key{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);font-weight:900}
.exam-screen .ex-opt-text{font-size:17px;line-height:1.5;padding-top:3px}
.exam-screen .ex-opt.is-on{border-color:var(--blue);background:var(--teal-bg)}
.exam-screen .ex-opt.is-on .ex-opt-key{background:var(--blue);color:#fff}
.exam-screen .ex-text{width:100%;font:inherit;font-size:17px;line-height:1.5;padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);resize:vertical}
.exam-screen .ex-count{display:block;text-align:right;font-size:14px;color:var(--muted)}
.exam-screen .ex-side{border-left:1px solid var(--line);padding:16px;overflow:auto;background:var(--surface)}
.exam-screen .ex-side-title{font-size:16px;margin:0 0 10px}
.exam-screen .ex-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.exam-screen .ex-pn{padding:0;min-width:48px}
.exam-screen .ex-pn.is-done{background:var(--teal-bg);border-color:var(--blue)}
.exam-screen .ex-pn.is-flag{border-color:#d97706;box-shadow:inset 0 -4px 0 #d97706}
.exam-screen .ex-pn.is-current{outline:3px solid var(--ink);outline-offset:1px}
.exam-screen .ex-legend{font-size:14px;color:var(--muted);line-height:2}
.exam-screen .lg{display:inline-block;width:14px;height:14px;border-radius:4px;margin:0 6px 0 8px;vertical-align:-2px;border:1px solid var(--line)}
.exam-screen .lg-done{background:var(--teal-bg);border-color:var(--blue)}.exam-screen .lg-flag{border-color:#d97706;box-shadow:inset 0 -3px 0 #d97706}
.exam-screen .ex-counts{font-size:15px;font-weight:700}
.exam-screen .ex-foot{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.exam-screen .ex-save{flex:1 1 200px;font-size:14px;color:var(--muted)}
.exam-screen .ex-save.bad{color:#9b1c10;font-weight:700}
.exam-screen .ex-pal-toggle{display:none}
.exam-screen .ex-result{max-width:820px;margin:0 auto;padding:20px;overflow:auto;flex:1;width:100%}
.exam-screen .ex-result-hero{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.exam-screen .ex-result-ic{width:40px;height:40px;color:var(--brand-text)}
.exam-screen .ex-score{font-size:56px;font-weight:900;color:var(--brand-text)}
.exam-screen .ex-score span{font-size:22px;color:var(--muted)}
.exam-screen .ex-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.exam-screen .ex-tile{background:var(--soft);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.exam-screen .ex-tile span{font-size:14px;color:var(--muted)}.exam-screen .ex-tile strong{font-size:20px}
.exam-screen .ex-note{font-size:15px;color:var(--muted);margin:12px 0 0}.exam-screen .ex-note.warn{color:#7a4a00;font-weight:700}
.exam-screen .ex-review{margin-top:18px;display:grid;gap:10px}
.exam-screen .ex-review-row{background:var(--surface);border:1px solid var(--line);border-left-width:6px;border-radius:12px;padding:12px}
.exam-screen .ex-review-row.is-ok{border-left-color:#16a34a}.exam-screen .ex-review-row.is-bad{border-left-color:#dc2626}.exam-screen .ex-review-row.is-text{border-left-color:#d97706}
.exam-screen .ex-review-prompt{font-size:16px;margin:4px 0}
.exam-screen .ex-mine,.exam-screen .ex-right{margin:4px 0;font-size:16px}.exam-screen .ex-right{font-weight:800;color:var(--brand-text)}
.exam-screen .ex-result-actions{display:flex;gap:10px;margin:18px 0 24px;flex-wrap:wrap}
@media(max-width:760px){
.exam-screen .ex-body{grid-template-columns:1fr}
.exam-screen .ex-side{position:fixed;left:0;right:0;bottom:0;max-height:55vh;transform:translateY(100%);transition:transform .2s;z-index:3;border-left:0;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.18);visibility:hidden}
.exam-screen .ex-side.is-open{transform:none;visibility:visible}
.exam-screen .ex-pal-toggle{display:inline-block}
.exam-screen .ex-clock{font-size:22px;min-width:84px}
.exam-screen .ex-prompt{font-size:17px}
.exam-screen .ex-foot button{flex:1 1 auto}
.exam-screen .ex-result-grid{grid-template-columns:1fr}
}
/* EXAM:END */


/* ROLE-SWITCH (đăng nhập: Học sinh | Giáo viên) */
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.role-switch a,.role-switch span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:999px;font-size:16px;font-weight:650;text-decoration:none;color:var(--muted);touch-action:manipulation}
.role-switch [aria-current=page]{background:var(--auth-btn-bg,var(--blue));color:var(--auth-btn-fg,#fff)}
.role-switch a:hover{background:rgba(127,127,127,.15);color:var(--ink)}
.role-switch a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.role-switch a{transition:background-color .16s ease,color .16s ease}}
/* HOÀN THIỆN: vùng chạm 48px, cuộn hộp thoại, tiêu đề cân dòng */
.student-app .input-icon .reveal,.student-app .dialog-close{width:48px;height:48px;min-width:48px;min-height:48px}
.student-app button,.student-app a,.student-app summary,.student-app select{touch-action:manipulation}
.student-app dialog{overscroll-behavior:contain}
.student-app h1,.student-app h2,.student-app h3{text-wrap:balance}


/* PRACTICE-UPLOAD (nộp file thực hành, đường thi Firebase) */
.practice-box{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.practice-box h2{margin:0 0 6px;font-size:18px}
.practice-upload{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.practice-upload .practice-pick{min-height:48px;padding:0 18px;border-radius:10px}
.practice-status{flex:1 1 100%;margin:0;font-size:15px;color:var(--muted)}
.practice-status.bad{color:var(--danger,#b42318);font-weight:600}

/* DARK-THEME:BEGIN */
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]),:root:not([data-theme=light]) .student-app{--ink:#faf9f5;--muted:#b8b5aa;--paper:#262624;--blue:#2d7a6c;--line:#403f3b;--surface:#30302e;--danger:#ff9f95;--brand-text:#93d4c3;--auth-btn-bg:#ece9df;--auth-btn-fg:#1f1e1d;--control:#8a877d;--soft:#2b2b29;--teal-bg:#1f3a37;--teal-fg:#5eead4;--blue-bg:#1e2f4a;--blue-fg:#93c5fd;--amber-bg:#3b3220;--amber-fg:#fcd34d;--violet-bg:#2f2a4a;--violet-fg:#c4b5fd;--green-bg:#1f3a2a;--green-fg:#86efac;color-scheme:dark}
:where(:root:not([data-theme=light])) button:hover{background:#252a2f}
:where(:root:not([data-theme=light])) a{color:var(--brand-text)}
:where(:root:not([data-theme=light])) :focus-visible{outline:3px solid #364471}
:where(:root:not([data-theme=light])) .notice{background:#252a2f;color:#9fb0e3}
:where(:root:not([data-theme=light])) .notice.error{background:#302e26;border-color:#6e4731;color:#edbfa5}
:where(:root:not([data-theme=light])) .eyebrow{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .page-heading .eyebrow{color:var(--brand-text)}
:where(:root:not([data-theme=light])) input,:where(:root:not([data-theme=light])) textarea,:where(:root:not([data-theme=light])) select{border:1px solid #464d56;background:var(--surface)}
:where(:root:not([data-theme=light])) #lesson-content pre{background:#2b2d2f}
:where(:root:not([data-theme=light])) #lesson-content blockquote{border-left:4px solid #464d56}
:where(:root:not([data-theme=light])) .bottom-nav{background:var(--surface)}
:where(:root:not([data-theme=light])) .option:has(input:checked){background:#252a2f}
:where(:root:not([data-theme=light])) .hint{background:#302e26;color:#edbfa5}
:where(:root:not([data-theme=light])) .success{background:#272f2b;color:#aff4e0}
:where(:root:not([data-theme=light])) .skip{background:var(--surface)}
:where(:root:not([data-theme=light])) .teacher-section{background:var(--surface)}
:where(:root:not([data-theme=light])) .danger{color:#ea93ab}
:where(:root:not([data-theme=light])) .status-ok{color:#a2e9bc}
:where(:root:not([data-theme=light])) .status-wait{color:#efb487}
:where(:root:not([data-theme=light])) .status-out{color:#e38787}
:where(:root:not([data-theme=light])) .student-app .topbar{box-shadow:0 1px 3px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) a.teacher-link:hover{color:var(--brand-text);background:#252a2f}
:where(:root:not([data-theme=light])) .student-app .wordmark{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .connection::before{background:#3a6d5a}
:where(:root:not([data-theme=light])) .connection.is-offline::before{background:#835b25}
:where(:root:not([data-theme=light])) .student-app button:hover{background:#2b2d2c;border-color:#4b5c54}
:where(:root:not([data-theme=light])) .student-app button.primary:hover,:where(:root:not([data-theme=light])) .student-app button[aria-current=page]:hover{background:#3a6760}
:where(:root:not([data-theme=light])) .student-app :focus-visible{outline-color:#416157}
:where(:root:not([data-theme=light])) .student-app .bottom-nav{background:#2e2e2c}
:where(:root:not([data-theme=light])) .student-app .notice.error{color:#e7b9a0;background:#322e27}
:where(:root:not([data-theme=light])) .student-app .eyebrow{color:#b4d0c6}
:where(:root:not([data-theme=light])) .hero-book{color:#d1b7a1}
:where(:root:not([data-theme=light])) .student-app input,:where(:root:not([data-theme=light])) .student-app select,:where(:root:not([data-theme=light])) .student-app textarea{border-color:#49504a}
:where(:root:not([data-theme=light])) .student-app .lesson-open{background:#2c2e2b;color:#bedfd7}
:where(:root:not([data-theme=light])) .study-tip{border-left:3px solid #665946}
:where(:root:not([data-theme=light])) .empty-state{border:1px dashed #485048}
:where(:root:not([data-theme=light])) .resume-card{background:#2e2f2c;border:1px solid #424e3e}
:where(:root:not([data-theme=light])) .mode-switch{background:#2e2f2d}
:where(:root:not([data-theme=light])) .inline-note{background:#2d2f2b;color:#c3d4c7}
:where(:root:not([data-theme=light])) .student-app .option:has(input:checked){border-color:#465c54;background:#2c2e2b}
:where(:root:not([data-theme=light])) .score-text{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .text-button{color:#dbbbaf}
:where(:root:not([data-theme=light])) .student-app .hint{background:#312f29;color:#edd5ae}
:where(:root:not([data-theme=light])) .student-app .success{background:#2d2f2c;color:#c3ddc9}
:where(:root:not([data-theme=light])) .course-skeleton{background:#2e2f2d}
:where(:root:not([data-theme=light])) .lesson-skeleton{background:#2d2e2c}
:where(:root:not([data-theme=light])) .tutor-btn{background:#2c2e2b;color:#c5e5e1;border:1px solid #424e3f}
:where(:root:not([data-theme=light])) .tutor-btn:hover{background:#2f322e;border-color:#3c5d59}
:where(:root:not([data-theme=light])) .question-tutor-btn{border:1px dashed #505a54;color:#badbd6}
:where(:root:not([data-theme=light])) .question-tutor-btn:hover{background:#2b2d2a}
:where(:root:not([data-theme=light])) .tutor-dialog{box-shadow:0 12px 32px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .tutor-dialog::backdrop{background:rgba(57,96,91,0.45)}
:where(:root:not([data-theme=light])) .tutor-header{background:#2b2c28}
:where(:root:not([data-theme=light])) .tutor-header h2{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .tutor-quota-badge{background:#2c2d2b;color:#badbd6;border:1px solid #41483c}
:where(:root:not([data-theme=light])) .tutor-quota-badge.is-locked{background:#302727;color:#e49696;border-color:#602828}
:where(:root:not([data-theme=light])) .close-btn:hover{background:#2e2f2c !important}
:where(:root:not([data-theme=light])) .tutor-messages{background:var(--surface)}
:where(:root:not([data-theme=light])) .tutor-bot{background:#2c2d2b;border:1px solid #41483c}
:where(:root:not([data-theme=light])) .tutor-offline-banner{background:#322e27;color:#e7b9a0;border-top:1px solid #564830}
:where(:root:not([data-theme=light])) .pin-wrap{border:1px solid #545956;background:var(--surface, var(--surface))}
:where(:root:not([data-theme=light])) .pin-wrap:focus-within{outline:3px solid #3b655f}
:where(:root:not([data-theme=light])) .reveal{border-left:1px solid var(--line, #3b434d);color:var(--blue, #c5e5e1)}
:where(:root:not([data-theme=light])) .reveal:hover{background:#292b2d}
:where(:root:not([data-theme=light])) .secondary{border:1px solid var(--line, #3b434d);color:var(--ink, #ced7ea)}
:where(:root:not([data-theme=light])) .secondary:hover{background:#292b2d;border-color:#464d56}
:where(:root:not([data-theme=light])) .text-button{color:var(--muted, #b4bdc9)}
:where(:root:not([data-theme=light])) .auth-dialog{box-shadow:0 8px 28px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .account-summary{border-bottom:1px solid var(--line, #3b434d)}
:where(:root:not([data-theme=light])) #account-info{color:var(--muted, #b4bdc9)}
:where(:root:not([data-theme=light])) .account-note{background:#302e26;color:#edb898;border-left:3px solid #7e612f}
:where(:root:not([data-theme=light])) .field .hint{color:var(--muted, #b4bdc9)}
:where(:root:not([data-theme=light])) .notice.error{background:#302826;color:#dea39f;border-color:#693e3b;border-left:3px solid #693e3b}
:where(:root:not([data-theme=light])) .notice.success{background:#2a2d2a;color:#b8decc;border-color:#3e6050;border-left:3px solid #3e6050}
:where(:root:not([data-theme=light])) .msg-dialog{box-shadow:0 10px 30px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .danger-btn{background:var(--danger, #793530) !important;border-color:var(--danger, #693e3b) !important}
:where(:root:not([data-theme=light])) .danger-btn:hover{background:#76342f !important;border-color:#673c39 !important}
:where(:root:not([data-theme=light])) .field-error{color:var(--danger, #dea39f)}
:where(:root:not([data-theme=light])) .group-link[aria-current=page]{background:#252a2f}
:where(:root:not([data-theme=light])) .action-list{background:#282a2c}
:where(:root:not([data-theme=light])) .gate-link{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .gate-link:hover{background:#2b2d2c}
:where(:root:not([data-theme=light])) .student-app .icon-btn:hover{background:#2b2b2c}
:where(:root:not([data-theme=light])) .student-app .icon-btn:focus-visible,:where(:root:not([data-theme=light])) .student-app .auth-btn:focus-visible{outline:3px solid #3f645d}
:where(:root:not([data-theme=light])) .student-app .btn-login:hover{background:#4b4b50}
:where(:root:not([data-theme=light])) .student-app .connection{color:#a2e9bc}
:where(:root:not([data-theme=light])) .student-app .connection.is-offline{color:#efb487}
:where(:root:not([data-theme=light])) .student-app .auth-card,:where(:root:not([data-theme=light])) .student-app .auth-dialog{box-shadow:0 1px 2px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .auth-btn{box-shadow:0 1px 2px rgba(0,0,0,.55),inset 0 1px 0 rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .auth-btn:hover{background:#4b4b50;border-color:#4b4b4e}
:where(:root:not([data-theme=light])) .student-app .auth-btn-alt:hover{background:#2b2b2b}
:where(:root:not([data-theme=light])) .student-app .auth-dialog::backdrop{background:rgba(67,67,78,0.55)}
:where(:root:not([data-theme=light])) .student-app .input-icon:focus-within{border-color:#3f645d;outline:3px solid rgba(62,100,93,0.35)}
:where(:root:not([data-theme=light])) .student-app .input-icon .reveal:hover{background:rgba(90,90,90,0.15)}
:where(:root:not([data-theme=light])) .student-app button.primary:hover{background:#4b4b50;border-color:#4b4b4e}
:where(:root:not([data-theme=light])) .student-app .lesson-card,:where(:root:not([data-theme=light])) .student-app .lesson-card:first-of-type,:where(:root:not([data-theme=light])) .student-app .lesson-card:last-child{box-shadow:0 1px 2px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .tile{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .course-card{box-shadow:0 1px 2px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .result-title .ic{color:#a2e9bc}
:where(:root:not([data-theme=light])) .student-app .bottom-nav button[aria-current=page] .nav-ic{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .update-btn{border-color:#3f645d;color:#a8d9d0}
:where(:root:not([data-theme=light])) .student-app .badge-dot{background:#661e1e}
:where(:root:not([data-theme=light])) .student-app .stat-ic{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .stat-row-score{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .tutor-dialog{box-shadow:0 24px 60px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .tutor-dialog::backdrop{background:rgba(71,71,71,0.60)}
:where(:root:not([data-theme=light])) .student-app .dash-next-label{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .path-step.is-learning .path-node{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .ai-btn{color:var(--brand-text)}
:where(:root:not([data-theme=light])) .student-app .topbar{background:rgba(46,44,36,0.88)}
:where(:root:not([data-theme=light])) .student-app .bottom-nav{background:#2e2c28}
:where(:root:not([data-theme=light])) .student-app button.primary,:where(:root:not([data-theme=light])) .student-app .auth-btn:not(.auth-btn-alt){box-shadow:0 8px 20px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app button.primary:hover,:where(:root:not([data-theme=light])) .student-app .auth-btn:not(.auth-btn-alt):hover{background:#267974;border-color:#336966}
:where(:root:not([data-theme=light])) .student-app .course-card,:where(:root:not([data-theme=light])) .student-app .lesson-card,:where(:root:not([data-theme=light])) .student-app .panel,:where(:root:not([data-theme=light])) .student-app .stat-tile,:where(:root:not([data-theme=light])) .student-app .dash-ring-card,:where(:root:not([data-theme=light])) .student-app .question,:where(:root:not([data-theme=light])) .student-app .progress-card,:where(:root:not([data-theme=light])) .student-app .download-card{box-shadow:0 1px 2px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.55)}
:where(:root:not([data-theme=light])) .student-app .bar>*,:where(:root:not([data-theme=light])) .student-app .bar span{background:linear-gradient(90deg,#228b80,#228179)}
:where(:root:not([data-theme=light])) .student-app .dash-hero{background:linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%);border-color:#364f4a;background-image:var(--hero-art),linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%)}
:where(:root:not([data-theme=light])) .student-app .exam-card.is-real{border-color:#3c5851}
:where(:root:not([data-theme=light])) .exam-screen .ex-clock.warn{background:#322f28;color:#f7d5a1}
:where(:root:not([data-theme=light])) .exam-screen .ex-clock.danger{background:#312928;color:#eb9c94}
:where(:root:not([data-theme=light])) .exam-screen .ex-pn.is-flag{border-color:#7d582d;box-shadow:inset 0 -4px 0 #f0b776}
:where(:root:not([data-theme=light])) .exam-screen .lg-flag{border-color:#7d582d;box-shadow:inset 0 -3px 0 #f0b776}
:where(:root:not([data-theme=light])) .exam-screen .ex-save.bad{color:#eb9c94}
:where(:root:not([data-theme=light])) .exam-screen .ex-note.warn{color:#f7d5a1}
:where(:root:not([data-theme=light])) .exam-screen .ex-review-row.is-ok{border-left-color:#33724a}
:where(:root:not([data-theme=light])) .exam-screen .ex-review-row.is-bad{border-left-color:#763737}
:where(:root:not([data-theme=light])) .exam-screen .ex-review-row.is-text{border-left-color:#7d582d}
:where(:root:not([data-theme=light])) .role-switch a:hover{background:rgba(90,90,90,0.15)}
:where(:root:not([data-theme=light])) .practice-status.bad{color:var(--danger,#e69089)}
@media (max-width:760px){
:where(:root:not([data-theme=light])) .student-app .dash-hero{background-image:linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%)}
:where(:root:not([data-theme=light])) .exam-screen .ex-side{box-shadow:0 -8px 24px rgba(0,0,0,.55)}
}
:where(:root:not([data-theme=light])) .student-app .topbar{background:rgba(38,38,36,.88)}
:where(:root:not([data-theme=light])) .student-app button.primary,:where(:root:not([data-theme=light])) .student-app .auth-btn:not(.auth-btn-alt){background:#2d7a6c;color:#fff;border-color:#2d7a6c;box-shadow:none}
:where(:root:not([data-theme=light])) .student-app button.primary:hover,:where(:root:not([data-theme=light])) .student-app .auth-btn:not(.auth-btn-alt):hover{background:#36907f;color:#fff;border-color:#36907f}
:where(:root:not([data-theme=light])) .student-app .dash-hero{background-color:#2a3331;border-color:#3a4744}
:where(:root:not([data-theme=light])) .student-app .bottom-nav{background:#2b2b29}
:where(:root:not([data-theme=light])) .student-app :focus-visible,:where(:root:not([data-theme=light])) .student-app .icon-btn:focus-visible,:where(:root:not([data-theme=light])) .student-app .auth-btn:focus-visible,:where(:root:not([data-theme=light])) .student-app button:focus-visible{outline-color:#93d4c3}
:where(:root:not([data-theme=light])) .student-app .update-btn{border-color:#4ac0a8;color:#4ac0a8}
:where(:root:not([data-theme=light])) .student-app .lesson-open,:where(:root:not([data-theme=light])) .student-app .course-card button{background:var(--surface);color:var(--ink);border-color:var(--control)}
:where(:root:not([data-theme=light])) .student-app .lesson-open:hover{background:#faf9f5;color:#1f1e1d;border-color:#faf9f5}
:where(:root:not([data-theme=light])) .student-app .result-title .ic{color:#4ade80}
:where(:root:not([data-theme=light])) .student-app .auth-btn-alt:hover{background:#3a3936;color:var(--ink);border-color:var(--ink)}
:where(:root:not([data-theme=light])) .student-app .connection{color:#4ade80}
:where(:root:not([data-theme=light])) .student-app .connection.is-offline{color:#fbbf24}
:where(:root:not([data-theme=light])) .student-app .role-switch [aria-current=page],:where(:root:not([data-theme=light])) .student-app .auth-logo{background:#2d7a6c;color:#fff}
}
:root[data-theme=dark],:root[data-theme=dark] .student-app{--ink:#faf9f5;--muted:#b8b5aa;--paper:#262624;--blue:#2d7a6c;--line:#403f3b;--surface:#30302e;--danger:#ff9f95;--brand-text:#93d4c3;--auth-btn-bg:#ece9df;--auth-btn-fg:#1f1e1d;--control:#8a877d;--soft:#2b2b29;--teal-bg:#1f3a37;--teal-fg:#5eead4;--blue-bg:#1e2f4a;--blue-fg:#93c5fd;--amber-bg:#3b3220;--amber-fg:#fcd34d;--violet-bg:#2f2a4a;--violet-fg:#c4b5fd;--green-bg:#1f3a2a;--green-fg:#86efac;color-scheme:dark}
:where(:root[data-theme=dark]) button:hover{background:#252a2f}
:where(:root[data-theme=dark]) a{color:var(--brand-text)}
:where(:root[data-theme=dark]) :focus-visible{outline:3px solid #364471}
:where(:root[data-theme=dark]) .notice{background:#252a2f;color:#9fb0e3}
:where(:root[data-theme=dark]) .notice.error{background:#302e26;border-color:#6e4731;color:#edbfa5}
:where(:root[data-theme=dark]) .eyebrow{color:var(--brand-text)}
:where(:root[data-theme=dark]) .page-heading .eyebrow{color:var(--brand-text)}
:where(:root[data-theme=dark]) input,:where(:root[data-theme=dark]) textarea,:where(:root[data-theme=dark]) select{border:1px solid #464d56;background:var(--surface)}
:where(:root[data-theme=dark]) #lesson-content pre{background:#2b2d2f}
:where(:root[data-theme=dark]) #lesson-content blockquote{border-left:4px solid #464d56}
:where(:root[data-theme=dark]) .bottom-nav{background:var(--surface)}
:where(:root[data-theme=dark]) .option:has(input:checked){background:#252a2f}
:where(:root[data-theme=dark]) .hint{background:#302e26;color:#edbfa5}
:where(:root[data-theme=dark]) .success{background:#272f2b;color:#aff4e0}
:where(:root[data-theme=dark]) .skip{background:var(--surface)}
:where(:root[data-theme=dark]) .teacher-section{background:var(--surface)}
:where(:root[data-theme=dark]) .danger{color:#ea93ab}
:where(:root[data-theme=dark]) .status-ok{color:#a2e9bc}
:where(:root[data-theme=dark]) .status-wait{color:#efb487}
:where(:root[data-theme=dark]) .status-out{color:#e38787}
:where(:root[data-theme=dark]) .student-app .topbar{box-shadow:0 1px 3px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) a.teacher-link:hover{color:var(--brand-text);background:#252a2f}
:where(:root[data-theme=dark]) .student-app .wordmark{color:var(--brand-text)}
:where(:root[data-theme=dark]) .connection::before{background:#3a6d5a}
:where(:root[data-theme=dark]) .connection.is-offline::before{background:#835b25}
:where(:root[data-theme=dark]) .student-app button:hover{background:#2b2d2c;border-color:#4b5c54}
:where(:root[data-theme=dark]) .student-app button.primary:hover,:where(:root[data-theme=dark]) .student-app button[aria-current=page]:hover{background:#3a6760}
:where(:root[data-theme=dark]) .student-app :focus-visible{outline-color:#416157}
:where(:root[data-theme=dark]) .student-app .bottom-nav{background:#2e2e2c}
:where(:root[data-theme=dark]) .student-app .notice.error{color:#e7b9a0;background:#322e27}
:where(:root[data-theme=dark]) .student-app .eyebrow{color:#b4d0c6}
:where(:root[data-theme=dark]) .hero-book{color:#d1b7a1}
:where(:root[data-theme=dark]) .student-app input,:where(:root[data-theme=dark]) .student-app select,:where(:root[data-theme=dark]) .student-app textarea{border-color:#49504a}
:where(:root[data-theme=dark]) .student-app .lesson-open{background:#2c2e2b;color:#bedfd7}
:where(:root[data-theme=dark]) .study-tip{border-left:3px solid #665946}
:where(:root[data-theme=dark]) .empty-state{border:1px dashed #485048}
:where(:root[data-theme=dark]) .resume-card{background:#2e2f2c;border:1px solid #424e3e}
:where(:root[data-theme=dark]) .mode-switch{background:#2e2f2d}
:where(:root[data-theme=dark]) .inline-note{background:#2d2f2b;color:#c3d4c7}
:where(:root[data-theme=dark]) .student-app .option:has(input:checked){border-color:#465c54;background:#2c2e2b}
:where(:root[data-theme=dark]) .score-text{color:var(--brand-text)}
:where(:root[data-theme=dark]) .text-button{color:#dbbbaf}
:where(:root[data-theme=dark]) .student-app .hint{background:#312f29;color:#edd5ae}
:where(:root[data-theme=dark]) .student-app .success{background:#2d2f2c;color:#c3ddc9}
:where(:root[data-theme=dark]) .course-skeleton{background:#2e2f2d}
:where(:root[data-theme=dark]) .lesson-skeleton{background:#2d2e2c}
:where(:root[data-theme=dark]) .tutor-btn{background:#2c2e2b;color:#c5e5e1;border:1px solid #424e3f}
:where(:root[data-theme=dark]) .tutor-btn:hover{background:#2f322e;border-color:#3c5d59}
:where(:root[data-theme=dark]) .question-tutor-btn{border:1px dashed #505a54;color:#badbd6}
:where(:root[data-theme=dark]) .question-tutor-btn:hover{background:#2b2d2a}
:where(:root[data-theme=dark]) .tutor-dialog{box-shadow:0 12px 32px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .tutor-dialog::backdrop{background:rgba(57,96,91,0.45)}
:where(:root[data-theme=dark]) .tutor-header{background:#2b2c28}
:where(:root[data-theme=dark]) .tutor-header h2{color:var(--brand-text)}
:where(:root[data-theme=dark]) .tutor-quota-badge{background:#2c2d2b;color:#badbd6;border:1px solid #41483c}
:where(:root[data-theme=dark]) .tutor-quota-badge.is-locked{background:#302727;color:#e49696;border-color:#602828}
:where(:root[data-theme=dark]) .close-btn:hover{background:#2e2f2c !important}
:where(:root[data-theme=dark]) .tutor-messages{background:var(--surface)}
:where(:root[data-theme=dark]) .tutor-bot{background:#2c2d2b;border:1px solid #41483c}
:where(:root[data-theme=dark]) .tutor-offline-banner{background:#322e27;color:#e7b9a0;border-top:1px solid #564830}
:where(:root[data-theme=dark]) .pin-wrap{border:1px solid #545956;background:var(--surface, var(--surface))}
:where(:root[data-theme=dark]) .pin-wrap:focus-within{outline:3px solid #3b655f}
:where(:root[data-theme=dark]) .reveal{border-left:1px solid var(--line, #3b434d);color:var(--blue, #c5e5e1)}
:where(:root[data-theme=dark]) .reveal:hover{background:#292b2d}
:where(:root[data-theme=dark]) .secondary{border:1px solid var(--line, #3b434d);color:var(--ink, #ced7ea)}
:where(:root[data-theme=dark]) .secondary:hover{background:#292b2d;border-color:#464d56}
:where(:root[data-theme=dark]) .text-button{color:var(--muted, #b4bdc9)}
:where(:root[data-theme=dark]) .auth-dialog{box-shadow:0 8px 28px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .account-summary{border-bottom:1px solid var(--line, #3b434d)}
:where(:root[data-theme=dark]) #account-info{color:var(--muted, #b4bdc9)}
:where(:root[data-theme=dark]) .account-note{background:#302e26;color:#edb898;border-left:3px solid #7e612f}
:where(:root[data-theme=dark]) .field .hint{color:var(--muted, #b4bdc9)}
:where(:root[data-theme=dark]) .notice.error{background:#302826;color:#dea39f;border-color:#693e3b;border-left:3px solid #693e3b}
:where(:root[data-theme=dark]) .notice.success{background:#2a2d2a;color:#b8decc;border-color:#3e6050;border-left:3px solid #3e6050}
:where(:root[data-theme=dark]) .msg-dialog{box-shadow:0 10px 30px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .danger-btn{background:var(--danger, #793530) !important;border-color:var(--danger, #693e3b) !important}
:where(:root[data-theme=dark]) .danger-btn:hover{background:#76342f !important;border-color:#673c39 !important}
:where(:root[data-theme=dark]) .field-error{color:var(--danger, #dea39f)}
:where(:root[data-theme=dark]) .group-link[aria-current=page]{background:#252a2f}
:where(:root[data-theme=dark]) .action-list{background:#282a2c}
:where(:root[data-theme=dark]) .gate-link{color:var(--brand-text)}
:where(:root[data-theme=dark]) .gate-link:hover{background:#2b2d2c}
:where(:root[data-theme=dark]) .student-app .icon-btn:hover{background:#2b2b2c}
:where(:root[data-theme=dark]) .student-app .icon-btn:focus-visible,:where(:root[data-theme=dark]) .student-app .auth-btn:focus-visible{outline:3px solid #3f645d}
:where(:root[data-theme=dark]) .student-app .btn-login:hover{background:#4b4b50}
:where(:root[data-theme=dark]) .student-app .connection{color:#a2e9bc}
:where(:root[data-theme=dark]) .student-app .connection.is-offline{color:#efb487}
:where(:root[data-theme=dark]) .student-app .auth-card,:where(:root[data-theme=dark]) .student-app .auth-dialog{box-shadow:0 1px 2px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .auth-btn{box-shadow:0 1px 2px rgba(0,0,0,.55),inset 0 1px 0 rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .auth-btn:hover{background:#4b4b50;border-color:#4b4b4e}
:where(:root[data-theme=dark]) .student-app .auth-btn-alt:hover{background:#2b2b2b}
:where(:root[data-theme=dark]) .student-app .auth-dialog::backdrop{background:rgba(67,67,78,0.55)}
:where(:root[data-theme=dark]) .student-app .input-icon:focus-within{border-color:#3f645d;outline:3px solid rgba(62,100,93,0.35)}
:where(:root[data-theme=dark]) .student-app .input-icon .reveal:hover{background:rgba(90,90,90,0.15)}
:where(:root[data-theme=dark]) .student-app button.primary:hover{background:#4b4b50;border-color:#4b4b4e}
:where(:root[data-theme=dark]) .student-app .lesson-card,:where(:root[data-theme=dark]) .student-app .lesson-card:first-of-type,:where(:root[data-theme=dark]) .student-app .lesson-card:last-child{box-shadow:0 1px 2px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .tile{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .course-card{box-shadow:0 1px 2px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .result-title .ic{color:#a2e9bc}
:where(:root[data-theme=dark]) .student-app .bottom-nav button[aria-current=page] .nav-ic{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .update-btn{border-color:#3f645d;color:#a8d9d0}
:where(:root[data-theme=dark]) .student-app .badge-dot{background:#661e1e}
:where(:root[data-theme=dark]) .student-app .stat-ic{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .stat-row-score{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .tutor-dialog{box-shadow:0 24px 60px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .tutor-dialog::backdrop{background:rgba(71,71,71,0.60)}
:where(:root[data-theme=dark]) .student-app .dash-next-label{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .path-step.is-learning .path-node{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .ai-btn{color:var(--brand-text)}
:where(:root[data-theme=dark]) .student-app .topbar{background:rgba(46,44,36,0.88)}
:where(:root[data-theme=dark]) .student-app .bottom-nav{background:#2e2c28}
:where(:root[data-theme=dark]) .student-app button.primary,:where(:root[data-theme=dark]) .student-app .auth-btn:not(.auth-btn-alt){box-shadow:0 8px 20px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app button.primary:hover,:where(:root[data-theme=dark]) .student-app .auth-btn:not(.auth-btn-alt):hover{background:#267974;border-color:#336966}
:where(:root[data-theme=dark]) .student-app .course-card,:where(:root[data-theme=dark]) .student-app .lesson-card,:where(:root[data-theme=dark]) .student-app .panel,:where(:root[data-theme=dark]) .student-app .stat-tile,:where(:root[data-theme=dark]) .student-app .dash-ring-card,:where(:root[data-theme=dark]) .student-app .question,:where(:root[data-theme=dark]) .student-app .progress-card,:where(:root[data-theme=dark]) .student-app .download-card{box-shadow:0 1px 2px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.55)}
:where(:root[data-theme=dark]) .student-app .bar>*,:where(:root[data-theme=dark]) .student-app .bar span{background:linear-gradient(90deg,#228b80,#228179)}
:where(:root[data-theme=dark]) .student-app .dash-hero{background:linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%);border-color:#364f4a;background-image:var(--hero-art),linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%)}
:where(:root[data-theme=dark]) .student-app .exam-card.is-real{border-color:#3c5851}
:where(:root[data-theme=dark]) .exam-screen .ex-clock.warn{background:#322f28;color:#f7d5a1}
:where(:root[data-theme=dark]) .exam-screen .ex-clock.danger{background:#312928;color:#eb9c94}
:where(:root[data-theme=dark]) .exam-screen .ex-pn.is-flag{border-color:#7d582d;box-shadow:inset 0 -4px 0 #f0b776}
:where(:root[data-theme=dark]) .exam-screen .lg-flag{border-color:#7d582d;box-shadow:inset 0 -3px 0 #f0b776}
:where(:root[data-theme=dark]) .exam-screen .ex-save.bad{color:#eb9c94}
:where(:root[data-theme=dark]) .exam-screen .ex-note.warn{color:#f7d5a1}
:where(:root[data-theme=dark]) .exam-screen .ex-review-row.is-ok{border-left-color:#33724a}
:where(:root[data-theme=dark]) .exam-screen .ex-review-row.is-bad{border-left-color:#763737}
:where(:root[data-theme=dark]) .exam-screen .ex-review-row.is-text{border-left-color:#7d582d}
:where(:root[data-theme=dark]) .role-switch a:hover{background:rgba(90,90,90,0.15)}
:where(:root[data-theme=dark]) .practice-status.bad{color:var(--danger,#e69089)}
@media (max-width:760px){
:where(:root[data-theme=dark]) .student-app .dash-hero{background-image:linear-gradient(135deg,#2a2f2e 0%,#2f2c25 60%)}
:where(:root[data-theme=dark]) .exam-screen .ex-side{box-shadow:0 -8px 24px rgba(0,0,0,.55)}
}
:where(:root[data-theme=dark]) .student-app .topbar{background:rgba(38,38,36,.88)}
:where(:root[data-theme=dark]) .student-app button.primary,:where(:root[data-theme=dark]) .student-app .auth-btn:not(.auth-btn-alt){background:#2d7a6c;color:#fff;border-color:#2d7a6c;box-shadow:none}
:where(:root[data-theme=dark]) .student-app button.primary:hover,:where(:root[data-theme=dark]) .student-app .auth-btn:not(.auth-btn-alt):hover{background:#36907f;color:#fff;border-color:#36907f}
:where(:root[data-theme=dark]) .student-app .dash-hero{background-color:#2a3331;border-color:#3a4744}
:where(:root[data-theme=dark]) .student-app .bottom-nav{background:#2b2b29}
:where(:root[data-theme=dark]) .student-app :focus-visible,:where(:root[data-theme=dark]) .student-app .icon-btn:focus-visible,:where(:root[data-theme=dark]) .student-app .auth-btn:focus-visible,:where(:root[data-theme=dark]) .student-app button:focus-visible{outline-color:#93d4c3}
:where(:root[data-theme=dark]) .student-app .update-btn{border-color:#4ac0a8;color:#4ac0a8}
:where(:root[data-theme=dark]) .student-app .lesson-open,:where(:root[data-theme=dark]) .student-app .course-card button{background:var(--surface);color:var(--ink);border-color:var(--control)}
:where(:root[data-theme=dark]) .student-app .lesson-open:hover{background:#faf9f5;color:#1f1e1d;border-color:#faf9f5}
:where(:root[data-theme=dark]) .student-app .result-title .ic{color:#4ade80}
:where(:root[data-theme=dark]) .student-app .auth-btn-alt:hover{background:#3a3936;color:var(--ink);border-color:var(--ink)}
:where(:root[data-theme=dark]) .student-app .connection{color:#4ade80}
:where(:root[data-theme=dark]) .student-app .connection.is-offline{color:#fbbf24}
:where(:root[data-theme=dark]) .student-app .role-switch [aria-current=page],:where(:root[data-theme=dark]) .student-app .auth-logo{background:#2d7a6c;color:#fff}
/* DARK-THEME:END */
/* Sửa banner chào ở chế độ tối: thuộc tính background rút gọn làm hình lặp lại khắp khung */
.student-app .dash-hero{background-repeat:no-repeat;background-position:right 24px center,0 0;background-size:190px auto,auto}
@media(max-width:760px){.student-app .dash-hero{background-position:0 0;background-size:auto}}
/* ---------- Tab Thi (Firebase, thi-app.js): cùng màu, chữ, khung câu hỏi với phần luyện tập ---------- */
.student-app .thi-wrap{max-width:820px;margin:0 auto;padding:8px 0 32px}
.student-app .thi-head{margin:0 0 16px}.student-app .thi-head h2{margin:0 0 4px;font-size:clamp(22px,4vw,28px);line-height:1.25}
.student-app .thi-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.student-app .thi-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface);color:var(--ink)}
.student-app .thi-card.is-open{border-left:4px solid var(--brand-text,var(--blue));padding-left:17px}
.student-app .thi-card-info{min-width:0;display:grid;gap:8px}
.student-app .thi-card-title{margin:0;font-size:var(--fs-body,17px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.student-app .thi-card-meta{margin:0}
.student-app .thi-tags{display:flex;flex-wrap:wrap;gap:6px}
.student-app .thi-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:8px;font-size:var(--fs-label,13px);font-weight:700;background:var(--teal-bg,#d9f2ee);color:var(--teal-fg,#0f766e)}
.student-app .thi-chip.is-real{background:var(--amber-bg,#fef0d4);color:var(--amber-fg,#9a4306)}
.student-app .thi-chip.is-open{background:var(--green-bg,#dcfce7);color:var(--green-fg,#15803d)}
.student-app .thi-chip.is-locked{background:var(--soft,#f1f5ef);color:var(--muted)}
.student-app .thi-card-actions{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.student-app .thi-card-actions button,.student-app .thi-submit,.student-app .thi-back,.student-app .thi-actions button{min-height:48px;padding:10px 20px;border-radius:12px;font-weight:700}
.student-app .thi-btn-ghost{background:transparent;color:var(--brand-text,var(--blue));border:1px solid var(--line)}
.student-app .thi-btn-ghost:hover{border-color:var(--brand-text,var(--blue))}
.student-app .thi-done{padding:0 4px}
.student-app .thi-waitbox{display:flex;align-items:center;gap:14px;padding:20px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-waitbox p{margin:0}
.student-app .thi-pulse{flex:none;width:14px;height:14px;border-radius:50%;background:var(--brand-text,var(--blue));animation:thi-pulse 1.4s ease-in-out infinite}
@keyframes thi-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.student-app .thi-form .question{margin:0 0 14px;background:var(--surface)}
.student-app .thi-pts{color:var(--muted);font-weight:400}
.student-app .thi-bar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--paper)}
.student-app .thi-count{flex:1;min-width:120px}
.student-app .thi-lock:empty{display:none}.student-app .thi-lock{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:var(--amber-bg,#fef0d4);color:var(--amber-fg,#9a4306);font-weight:600}
.student-app .thi-error{color:var(--danger,#b3261e);min-height:1.2em;margin:6px 0}
.student-app .thi-result{text-align:center;padding:28px 20px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-hero{background:linear-gradient(135deg,var(--teal-bg,#d9f2ee) 0%,var(--surface) 70%)}
.student-app .thi-result:focus{outline:none}
.student-app .thi-result p{margin:2px 0}
.student-app .thi-result-ic{width:44px;height:44px;color:var(--brand-text,var(--blue))}
.student-app .thi-result-title{font-size:var(--fs-body,17px);font-weight:800}
.student-app .thi-score{font-size:clamp(44px,10vw,60px)!important;font-weight:800;line-height:1.1;color:var(--brand-text,var(--blue))}
.student-app .thi-stats{margin:0 0 16px}
.student-app .thi-board{padding:18px 20px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-board h3{margin:0 0 10px;font-size:var(--fs-body,17px)}
.student-app .thi-rank{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.student-app .thi-rank-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(60px,30%) 44px;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px}
.student-app .thi-rank-row.is-me{background:var(--teal-bg,#d9f2ee);font-weight:800}
.student-app .thi-rank-pos{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft,#f1f5ef);font-weight:800;font-size:var(--fs-label,13px)}
.student-app .thi-rank-row.is-top .thi-rank-pos{background:var(--amber-bg,#fef0d4);color:var(--amber-fg,#9a4306)}
.student-app .thi-rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-app .thi-rank-bar{height:8px;border-radius:99px;background:var(--soft,#f1f5ef);position:relative;overflow:hidden}
.student-app .thi-rank-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct,0%);border-radius:99px;background:var(--brand-text,var(--blue))}
.student-app .thi-rank-score{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.student-app .thi-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.student-app .thi-loading{padding:24px 0}
@media(max-width:760px){.student-app .thi-bar{bottom:calc(66px + env(safe-area-inset-bottom))}.student-app .thi-card{flex-direction:column;align-items:stretch;padding:16px}.student-app .thi-card.is-open{padding-left:13px}.student-app .thi-card-actions{justify-content:stretch}.student-app .thi-card-actions button{flex:1}.student-app .thi-rank-row{grid-template-columns:28px minmax(0,1fr) 56px 40px;gap:8px}}
@media (prefers-reduced-motion:reduce){.student-app .thi-pulse{animation:none}}
.student-app .thi-icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--brand-text,var(--blue))}
.student-app .thi-icon-btn:hover{border-color:var(--brand-text,var(--blue))}
.student-app .thi-icon-btn .ic{width:22px;height:22px}
.student-app .thi-practical{display:grid;gap:10px;padding:18px 20px;margin:0 0 14px;border:1px dashed var(--brand-text,var(--blue));border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-practical h3{margin:0;font-size:var(--fs-body,17px)}
.student-app .thi-practical input[type=file]{min-height:48px;font-size:16px}
.student-app .thi-practical .thi-th-up{justify-self:start}
.student-app .thi-th-status{margin:0}.student-app .thi-th-status.is-bad{color:var(--danger,#b3261e)}
@media(max-width:760px){.student-app .thi-card-actions .thi-icon-btn{flex:none}}
/* Cài đặt học sinh: Đăng xuất luôn thấy ngay (đầu trang Tài khoản + cuối danh mục), Đổi mã PIN thu gọn */
.student-app .account-head{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface);margin-bottom:16px}
.student-app .account-head #account-info{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.student-app .account-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal-bg,#d9f2ee);color:var(--teal-fg,#0f766e)}
.student-app .account-logout{flex:none;min-height:48px;padding:10px 18px;border-radius:12px;font-weight:700;color:var(--danger,#b3261e);border-color:var(--line)}
.student-app .pin-details{border:1px solid var(--line);border-radius:var(--radius-card,16px);padding:4px 16px;background:var(--surface)}
.student-app .pin-details>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
.student-app .pin-details>summary::-webkit-details-marker{display:none}
.student-app .pin-details>summary::after{content:'';margin-left:auto;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.student-app .pin-details[open]>summary::after{transform:rotate(-135deg)}
.student-app .pin-details[open]{padding-bottom:16px}
.student-app .group-logout{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--danger,#b3261e);font-weight:700;text-align:left}
.student-app .group-logout .ic{width:20px;height:20px}
@media(max-width:760px){.student-app .account-head{flex-wrap:wrap}.student-app .account-logout{width:100%}}
@media (prefers-reduced-motion:reduce){.student-app .pin-details>summary::after{transition:none}}
/* ---------- Thi: thanh tiêu đề neo + bảng số câu; thẻ bài phân biệt loại thi và trạng thái; huy hiệu mục Thi ---------- */
.student-app .thi-exam{padding-top:0}
.student-app .thi-sticky{position:sticky;top:var(--thi-top,0px);z-index:5;margin:0 -4px 16px;padding:12px 4px 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.student-app .thi-sticky-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.student-app .thi-sticky-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.student-app .thi-sticky-title h2{margin:0;font-size:clamp(20px,3.6vw,26px);line-height:1.25}
.student-app .thi-sticky .thi-count{font-weight:800;color:var(--brand-text,var(--blue));font-variant-numeric:tabular-nums}
.student-app .thi-qnav{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:thin}
.student-app .thi-qbtn{flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.student-app .thi-qbtn.is-done{background:var(--brand-text,var(--blue));border-color:var(--brand-text,var(--blue));color:var(--surface)}
.student-app .thi-qbtn.is-missing{border:2px solid var(--danger,#b3261e);color:var(--danger,#b3261e);background:var(--surface)}
.student-app .thi-q{scroll-margin-top:calc(var(--thi-top,0px) + 140px)}
.student-app .thi-q.is-missing{border-color:var(--danger,#b3261e);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger,#b3261e) 25%,transparent)}
.student-app .thi-bar{justify-content:flex-end}
/* thẻ bài */
.student-app .thi-card.is-real{border-left:6px solid var(--amber-fg,#b45309)}
.student-app .thi-card.is-trial{border-left:6px solid var(--teal-fg,#0f766e)}
.student-app .thi-card.is-open{padding-left:15px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.student-app .thi-card.is-closed{padding-left:15px;opacity:.85}
.student-app .thi-kind{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label,13px);font-weight:800;letter-spacing:.06em}
.student-app .thi-kind .ic{width:16px;height:16px}
.student-app .thi-card.is-real .thi-kind{color:var(--amber-fg,#b45309)}
.student-app .thi-card.is-trial .thi-kind{color:var(--teal-fg,#0f766e)}
.student-app .thi-state{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--fs-label,13px);font-weight:800}
.student-app .thi-state.is-open{background:var(--green-bg,#dcfce7);color:var(--green-fg,#15803d)}
.student-app .thi-state.is-locked{background:var(--soft,#f1f5ef);color:var(--muted)}
.student-app .thi-state .ic{width:14px;height:14px}
.student-app .thi-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:thi-pulse 1.4s ease-in-out infinite}
.student-app .thi-summary{margin:-6px 0 14px;color:var(--muted)}
.student-app .thi-summary.is-open{color:var(--green-fg,#15803d);font-weight:700}
/* huy hiệu mục Thi */
.student-app [data-tab="exams"]{position:relative}
.student-app [data-tab="exams"].has-open .nav-ic{color:var(--green-fg,#15803d);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--green-fg,#15803d) 60%,transparent))}
.student-app .nav-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger,#dc2626);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;animation:thi-pulse 1.6s ease-in-out infinite}
@media(min-width:761px){.student-app .nav-badge{position:static;margin-left:auto;animation:none}.student-app [data-tab="exams"]{display:flex;align-items:center}}
@media(max-width:760px){.student-app .thi-sticky{top:var(--thi-top,0px)}.student-app .thi-sticky-title h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){.student-app .thi-dot,.student-app .nav-badge{animation:none}}
/* ---------- Gia sư AI: khung chat neo góc phải dưới (máy tính) / tấm trượt từ dưới lên (điện thoại), không che trang ---------- */
body.student-app dialog.tutor-dialog{position:fixed;inset:auto 24px 24px auto;margin:0;width:min(420px,calc(100vw - 48px));height:min(640px,calc(100dvh - 120px));max-height:none;border-radius:20px;border:1px solid var(--line);z-index:60;box-shadow:0 18px 48px rgba(0,0,0,.22);animation:tutor-in .18s ease-out}
body.student-app dialog.tutor-dialog::backdrop{background:transparent}
@keyframes tutor-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){body.student-app dialog.tutor-dialog{inset:auto 0 calc(66px + env(safe-area-inset-bottom)) 0;width:100%;height:min(78dvh,calc(100dvh - 140px));border-radius:20px 20px 0 0;border-width:1px 0 0}}
.tutor-dialog .tutor-messages{scroll-behavior:smooth}
.tutor-msg .typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:tutor-caret .8s steps(1) infinite}
@keyframes tutor-caret{50%{opacity:0}}
.typing-dots{display:inline-flex;gap:5px;align-items:center;min-height:22px;margin:0}
.typing-dots span{width:8px;height:8px;border-radius:50%;background:var(--muted,#6b7280);animation:tutor-dot 1.1s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes tutor-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){dialog.tutor-dialog,.typing-dots span,.tutor-msg .typing::after{animation:none}}
/* Nhận xét bài thi thử */
.student-app .thi-review{padding:18px 20px;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-review-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.student-app .thi-review-head h3{margin:0;font-size:var(--fs-body,17px)}
.student-app .thi-review-av{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--brand-text,var(--blue));color:var(--surface)}
.student-app .thi-review-av .ic{width:20px;height:20px}
.student-app .thi-review-msg{margin-top:8px;line-height:1.65}
.student-app .thi-typing-dots::after{content:'…';animation:tutor-caret 1s steps(1) infinite}
/* ---------- Thanh đọc bài: tên bài + % đã đọc, dính dưới thanh trên cùng khi cuộn ---------- */
.student-app .read-bar{position:sticky;top:var(--read-top,0px);z-index:4;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,max-content) minmax(120px,1fr) auto;align-items:center;gap:12px;margin:12px 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px)}
.student-app .read-bar[hidden]{display:none}
.student-app .read-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.student-app .read-track{position:relative;height:8px;border-radius:99px;background:var(--soft,#f1f5ef);overflow:hidden}
.student-app .read-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--brand-text,var(--blue));transition:width .2s ease-out}
.student-app .read-pct{font-size:var(--fs-small,14px);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.student-app .read-bar.is-done .read-pct{color:var(--green-fg,#15803d)}
.student-app .read-bar.is-done .read-fill{background:var(--green-fg,#15803d)}
@media(max-width:760px){.student-app .read-bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}.student-app .read-track{grid-column:1 / -1;order:3}}
@media (prefers-reduced-motion:reduce){.student-app .read-fill{transition:none}}
/* Tài liệu PDF (học sinh) */
.student-app .doc-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.student-app .doc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--amber-bg,#fef0d4);color:var(--amber-fg,#9a4306)}
.student-app .doc-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.student-app .doc-card .actions button{min-height:44px}
@media(max-width:760px){.student-app .doc-card{grid-template-columns:auto minmax(0,1fr)}.student-app .doc-card .actions{grid-column:1 / -1}.student-app .doc-card .actions button{flex:1}}

/* Máy tính rộng: mở Gia sư AI → khung chat thành cột bên phải cao hết màn hình, nội dung dịch sang trái vừa khít */
@media(min-width:1100px){
  body.student-app.tutor-open dialog.tutor-dialog{inset:var(--tb-h,0px) 0 0 auto;width:var(--tutor-w);height:auto;border-radius:0;border-width:0 0 0 1px;box-shadow:-8px 0 24px rgba(0,0,0,.06);animation:tutor-side .2s ease-out}
  body.student-app.tutor-open .workspace{margin-right:var(--tutor-w);transition:margin-right .2s ease-out}
  body.student-app.tutor-open main{max-width:none}
}
@keyframes tutor-side{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.student-app.tutor-open .workspace{transition:none}}

/* 28/10: nội dung bài lấp đầy tới khung chat (không còn khoảng trống), khung chat rộng ra trên màn lớn */
body.student-app{--tutor-w:min(36vw,clamp(380px,calc(100vw - 1180px),540px))}
body.student-app #lesson-content.reading-paper{max-width:none}
/* 4 nút công cụ: 3 nút chữ + nút AI gọn như tab */
.student-app .lesson-tools{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(96px,.55fr)}
.student-app .lesson-tools button{white-space:nowrap}
.student-app .lesson-tools button span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.student-app .lesson-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Nút đồng bộ ở Tổng quan: chỉ xoay biểu tượng, không vẽ lại trắng trang */
#sync.is-spinning svg{animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){#sync.is-spinning svg{animation:none}}
/* Bản đồ năng lực: mỗi chủ đề một ô, màu theo mức (Vững / Đang học / Cần ôn) */
.student-app{--lv-good-fg:var(--green-fg,#15803d);--lv-good-bg:var(--green-bg,#e7f6ec);--lv-mid-fg:var(--amber-fg,#a15c07);--lv-mid-bg:var(--amber-bg,#fdf3e1);--lv-weak-fg:#b42318;--lv-weak-bg:#fdecea}
:root[data-theme=dark] .student-app{--lv-weak-fg:#ff9a8f;--lv-weak-bg:#3a1f1d}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .student-app{--lv-weak-fg:#ff9a8f;--lv-weak-bg:#3a1f1d}}
.student-app .mastery-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.student-app .mastery-legend{display:flex;flex-wrap:wrap;gap:6px}
.student-app .mastery-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:var(--fs-small,13px);font-weight:600}
.student-app .mastery-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.student-app .is-good.mastery-chip,.student-app .mastery-tile.is-good{color:var(--lv-good-fg);background:var(--lv-good-bg)}
.student-app .is-mid.mastery-chip,.student-app .mastery-tile.is-mid{color:var(--lv-mid-fg);background:var(--lv-mid-bg)}
.student-app .is-weak.mastery-chip,.student-app .mastery-tile.is-weak{color:var(--lv-weak-fg);background:var(--lv-weak-bg)}
.student-app .mastery-tip{display:flex;align-items:flex-start;gap:12px;margin:12px 0;padding:14px 16px;border-radius:14px;border:1px solid currentColor;color:var(--lv-weak-fg);background:var(--lv-weak-bg)}
.student-app .mastery-tip.is-mid{color:var(--lv-mid-fg);background:var(--lv-mid-bg)}
.student-app .mastery-tip .ic{flex:none;width:22px;height:22px}
.student-app .mastery-tip strong{color:inherit}
.student-app .mastery-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.student-app .mastery-tile{padding:14px 16px;border-radius:14px;min-width:0}
.student-app .mastery-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.student-app .mastery-top h3{margin:0;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.student-app .mastery-pct{font-size:22px;font-variant-numeric:tabular-nums}
.student-app .mastery-bar{display:block;height:8px;margin:8px 0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);position:relative;overflow:hidden}
.student-app .mastery-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:currentColor;border-radius:inherit}
.student-app .mastery-tile .meta{margin:0;color:var(--ink);opacity:.8;font-size:13px}
.student-app .mastery-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.student-app .mastery-acts button{min-height:44px;font-size:14px;padding:6px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;display:inline-flex;align-items:center;gap:6px}
.student-app .mastery-empty{margin:12px 0 0;color:var(--muted)}
/* Thi thật: nhắc rời màn hình */
.student-app .thi-leave{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--amber-bg,#fdf3e1);color:var(--amber-fg,#a15c07);font-size:14px}
.student-app .thi-th-task{margin:4px 0 12px;padding:12px 14px;border-left:3px solid var(--blue);background:var(--soft,#f1f5ef);border-radius:8px;white-space:pre-wrap}
.student-app .thi-th-score{font-weight:700;font-size:16px;text-align:center}
/* Trò chơi câu hỏi (học sinh): thẻ mời + màn chơi toàn màn hình, 4 ô màu lớn */
/* ---------- Luyện tập trên lớp (học sinh) ---------- */
.lt-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:16px;background:var(--surface)}
.lt-empty h2{margin:0;font-size:20px}.lt-empty p{margin:0;color:var(--muted);max-width:44ch}
.lt-empty-ic{font-size:32px;color:var(--muted);line-height:1}
.lt-card{display:grid;gap:10px;padding:20px;border-radius:16px;background:#0f2a2b;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.lt-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.lt-live{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#7ef0c8}
.lt-live::before{content:"";width:10px;height:10px;border-radius:50%;background:#22c3a6;animation:lt-blink 1.4s infinite}
.lt-code{font-size:14px;color:#d3efe9;font-variant-numeric:tabular-nums}
.lt-title{margin:0;font-size:22px;line-height:1.3}.lt-meta{margin:0;color:#d3efe9}
.lt-card .lt-join{justify-self:start;min-height:52px;padding:0 28px;border-radius:12px;background:#22c3a6;color:#062b25;border:0;font-size:18px;font-weight:800}
@keyframes lt-blink{50%{opacity:.35}}
.lt-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom));z-index:40;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;background:#0f2a2b;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.25);animation:lt-in .3s ease-out}
.lt-banner[hidden]{display:none}
.lt-banner-mid{flex:1;display:grid;min-width:0}.lt-banner-mid strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-banner-mid span{font-size:13px;opacity:.85}
.lt-banner .lt-banner-join{min-height:48px;padding:0 18px;border-radius:12px;background:#22c3a6;color:#062b25;border:0;font-weight:800}
.lt-banner .lt-banner-x{min-height:44px;width:44px;padding:0;border-radius:10px;background:transparent;color:#fff;border:1px solid #ffffff40;font-size:22px}
.lt-banner-dot{width:12px;height:12px;border-radius:50%;background:#22c3a6;animation:lt-blink 1.4s infinite;flex:none}
@keyframes lt-in{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(max-width:760px){body.student-app .lt-banner{bottom:calc(84px + env(safe-area-inset-bottom))}}
body.lt-playing{overflow:hidden}
body.lt-playing .help-fab,body.lt-playing .help-panel,body.lt-playing .lt-banner{display:none}
.lt-play{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(circle at 50% 0,#1d4a48,#0f2a2b 60%);color:#fff}
.lt-play[hidden]{display:none}
.lt-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #ffffff22}
.lt-top-title{flex:1;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-score{font-weight:800;color:#7ef0c8;font-size:15px;font-variant-numeric:tabular-nums}
.lt-close{min-height:44px;width:44px;padding:0;border-radius:10px;background:transparent;color:#fff;border:1px solid #ffffff40;font-size:22px}
.lt-main{overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;max-width:720px;width:100%;margin:0 auto}
.lt-avatar{align-self:center;margin-top:24px;width:88px;height:88px;border-radius:50%;background:#22c3a6;color:#062b25;display:grid;place-items:center;font-size:40px;font-weight:900}
.lt-name{margin:0;text-align:center;font-size:20px;font-weight:800}
.lt-big{margin:0;text-align:center;font-size:28px;line-height:1.25}
.lt-wait{margin:0;text-align:center;color:#d3efe9}.lt-count{margin:0;text-align:center;font-weight:700;color:#7ef0c8}
.lt-pulse{align-self:center;width:18px;height:18px;border-radius:50%;background:#22c3a6;animation:lt-blink 1.2s infinite}
.lt-pause-ic{align-self:center;margin-top:32px;width:96px;height:96px;border-radius:50%;background:#ffffff1f;display:grid;place-items:center;font-size:36px;font-weight:900;letter-spacing:4px}
.lt-head{display:flex;justify-content:space-between;align-items:center}
.lt-idx{font-weight:800;color:#7ef0c8}
.lt-timer{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;background:conic-gradient(#22c3a6 calc(var(--p,1)*360deg),#ffffff22 0)}
.lt-q{margin:0;font-size:20px;font-weight:800;line-height:1.4}
.lt-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lt-opt{display:flex;align-items:center;gap:10px;min-height:96px;padding:12px;border-radius:14px;border:0;color:#fff;font-size:16px;font-weight:700;text-align:left;line-height:1.3;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .12s ease}
.lt-opt:active:not(:disabled){transform:scale(.97)}
.lt-opt b{flex:none;font-size:26px;line-height:1;width:32px;text-align:center}
.lt-opt:disabled{opacity:.45;cursor:default}
.lt-opt.is-chosen{opacity:1;outline:4px solid #fff;outline-offset:2px}
.lt-play .lt-opt.lt-A{background:#c8102e}.lt-play .lt-opt.lt-B{background:#1360c4}.lt-play .lt-opt.lt-C{background:#9a6400}.lt-play .lt-opt.lt-D{background:#1d7a2e}
.lt-play .lt-opt:hover:not(:disabled){border-color:transparent;filter:brightness(1.1)}.lt-play .lt-close:hover{background:#ffffff14}
.lt-result{display:grid;gap:6px;text-align:center;padding:24px;border-radius:18px;background:#ffffff14;animation:lt-pop .35s ease-out}
.lt-result strong{font-size:30px}.lt-result.is-ok{background:#1d7a2e}.lt-result.is-bad{background:#c8102e}.lt-result.is-none{background:#3c4a4a}
.lt-result.is-end{background:#ffffff14;border:1px solid #ffffff30}.lt-result.is-top{background:linear-gradient(160deg,#b8860b,#7a5a00);color:#fff}
.lt-gain{font-size:22px;font-weight:900}.lt-streak{font-weight:700;color:#ffe9a8}
.lt-medal{justify-self:center;width:72px;height:72px;border-radius:50%;background:#ffd166;color:#3d2b00;display:grid;place-items:center;font-size:34px;font-weight:900}
.lt-rank{margin:0;text-align:center;font-size:18px;font-weight:800}
.lt-sub{margin:4px 0 0;text-align:center;font-size:16px}
.lt-top5,.lt-podium{list-style:none;counter-reset:r;padding:0;margin:0;display:grid;gap:6px}
.lt-top5 li{counter-increment:r;display:flex;gap:10px;background:#ffffff14;border-radius:10px;padding:8px 12px}
.lt-top5 li::before{content:counter(r);font-weight:900;width:20px}.lt-top5 li strong{margin-left:auto}
.lt-podium li{display:flex;gap:10px;align-items:center;background:#ffffff14;border-radius:10px;padding:10px 12px}
.lt-podium li b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffffff26}
.lt-podium .lt-pod-1 b{background:#ffd166;color:#3d2b00}.lt-podium li small{margin-left:auto;color:#d3efe9}
.lt-awards{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lt-awards li{padding:8px 14px;border-radius:999px;background:#ffd166;color:#3d2b00;font-weight:800}
.lt-main .lt-done{align-self:center;min-height:52px;padding:0 32px;border-radius:12px;background:#22c3a6;color:#062b25;border:0;font-size:18px;font-weight:800}
@keyframes lt-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media(max-width:360px){.lt-opts{grid-template-columns:minmax(0,1fr)}.lt-opt{min-height:64px}}
@media(prefers-reduced-motion:reduce){.lt-banner,.lt-banner-dot,.lt-pulse,.lt-live::before,.lt-result,.lt-opt{animation:none;transition:none}}
body:has(#lt-banner:not([hidden])) .help-fab{bottom:calc(150px + env(safe-area-inset-bottom))}
/* Điện thoại: khung chat Gia sư toàn màn hình như ứng dụng nhắn tin, bám theo vùng nhìn thấy khi bàn phím bật
   (--vv-top/--vv-h do app.js đo bằng visualViewport) → tiêu đề không bị đẩy khuất, ô nhập luôn ngay trên bàn phím */
@media(max-width:760px){
  body.student-app dialog.tutor-dialog{inset:var(--vv-top,0px) 0 auto 0;width:100%;height:var(--vv-h,100dvh);max-height:none;border-radius:0;border:0;z-index:70;animation:none}
  body.student-app.tutor-open{overflow:hidden}
  body.student-app dialog.tutor-dialog .tutor-header{padding-top:max(10px,env(safe-area-inset-top))}
  body.student-app dialog.tutor-dialog .tutor-form,body.student-app dialog.tutor-dialog form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
/* Thi thử Trắc nghiệm + Tự luận: khung gõ kẻ dòng chấm như giấy thi */
.student-app .thi-part{margin:26px 0 4px;font-size:15px;letter-spacing:.6px;color:var(--brand-text,var(--blue))}
.student-app .thi-tl-q .thi-tl-label{margin:10px 0 4px;font-size:14px;color:var(--muted)}
.student-app .thi-tl-paper{--lh:2.15rem;--dot:#7b8a83;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:4px 14px 10px}
.student-app .thi-tl-paper:focus-within{border-color:var(--brand-text,var(--blue));box-shadow:0 0 0 3px rgba(24,62,57,.12)}
.student-app textarea.thi-tl-input{display:block;width:100%;min-height:calc(var(--lh) * 6);border:0;border-radius:0;padding:0;margin:0;resize:none;overflow:hidden;outline:none;
  font-size:17px;line-height:var(--lh);color:var(--ink);background-color:var(--surface);background-attachment:local;
  background-image:linear-gradient(to right,transparent 2px,var(--surface) 2px),linear-gradient(to bottom,transparent calc(var(--lh) - 7px),var(--dot) calc(var(--lh) - 7px),var(--dot) calc(var(--lh) - 5.5px),transparent calc(var(--lh) - 5.5px));
  background-size:6px var(--lh),100% var(--lh)}
.student-app .thi-tl-count{margin:4px 2px 0;text-align:right;font-size:12px}
.student-app .thi-qbtn.is-tl{border-style:dashed}
.student-app .thi-qbtn.is-tl.is-done{border-style:solid}
.student-app .thi-grading{margin:8px 0;font-weight:600;color:var(--brand-text,var(--blue))}
.student-app .thi-tl-result{margin:16px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-card,16px);background:var(--surface)}
.student-app .thi-tl-result h3{margin:0 0 10px;font-size:17px}
.student-app .thi-tl-items{margin:0;padding-left:22px;display:grid;gap:12px}
.student-app .thi-tl-item p{margin:2px 0}
.student-app .thi-tl-q{font-weight:600}
.student-app .thi-tl-score{font-weight:750;color:var(--brand-text,var(--blue))}
.student-app .thi-tl-nx{font-size:15px;color:var(--ink);background:color-mix(in srgb,var(--blue) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--blue) 25%,var(--surface));border-radius:8px;padding:8px 12px}
.student-app .thi-tl-pending{margin:0 0 10px;color:#78350f;background:#fffbeb;border-radius:8px;padding:10px 12px}
@media(max-width:760px){.student-app .thi-tl-paper{padding:2px 10px 8px}.student-app textarea.thi-tl-input{font-size:16px}}

/* Cập nhật ứng dụng: chấm đỏ nhấp nháy + màn hình chờ khi tự cập nhật */
.student-app .update-btn{position:relative}
.student-app .update-btn .badge-dot{animation:uo-ping 1.6s ease-out infinite}
.student-app .update-btn .ic{animation:uo-spin 3.2s linear infinite}
@keyframes uo-ping{0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}80%,100%{box-shadow:0 0 0 9px rgba(220,38,38,0)}}
@keyframes uo-spin{to{transform:rotate(360deg)}}
.update-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(15,40,36,.72);backdrop-filter:blur(6px)}
.update-overlay[hidden]{display:none}
.uo-card{width:min(400px,100%);padding:30px 24px 24px;border-radius:20px;background:var(--surface,#fffefa);color:var(--ink,#18302d);text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:uo-in .28s ease-out}
@keyframes uo-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
.uo-logo{position:relative;width:84px;height:84px;margin:0 auto 14px;display:grid;place-items:center}
.uo-logo i{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(14,118,110,.18);border-top-color:#0e766e;animation:uo-spin 1s linear infinite}
.uo-card h2{margin:0 0 4px;font-size:21px}
.uo-card p{margin:0 0 16px;color:var(--muted,#536762);font-size:15px}
.uo-bar{height:10px;border-radius:99px;background:rgba(14,118,110,.14);overflow:hidden;margin:0 0 18px}
.uo-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0e766e,#34b79f);transition:width .7s ease}
.uo-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;text-align:left}
.uo-steps li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted,#536762);font-weight:600}
.uo-steps b{width:20px;height:20px;border-radius:50%;border:2px solid #b7c7c2;flex:none;display:grid;place-items:center;font-size:12px;color:#fff;transition:all .25s}
.uo-steps li.now{color:var(--ink,#18302d)}
.uo-steps li.now b{border-color:#0e766e;border-top-color:transparent;animation:uo-spin .8s linear infinite}
.uo-steps li.done{color:#0e766e}
.uo-steps li.done b{background:#0e766e;border-color:#0e766e}
.uo-steps li.done b::after{content:"✓"}
.uo-card .uo-note{margin:0;font-size:13px}
@media (prefers-reduced-motion:reduce){.student-app .update-btn .badge-dot,.student-app .update-btn .ic,.uo-logo i,.uo-card{animation:none}.uo-steps li.now b{animation:none;border-top-color:#0e766e}}

/* Màn hình đăng nhập: thẻ nằm chính giữa khoảng trống dưới thanh trên (điện thoại + máy tính) */
body.student-app:has(#gate:not([hidden])){display:flex;flex-direction:column;min-height:100dvh}
body.student-app:has(#gate:not([hidden])) .gate{flex:1;min-height:0;padding:24px 20px}
body.student-app:has(#gate:not([hidden])) .workspace,body.student-app:has(#gate:not([hidden])) .student-footer{display:none}

/* Trợ giúp nhanh: nút tròn nhỏ + khung hỏi đáp có câu hỏi sẵn */
.help-fab{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:30;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:0;background:#0f766e;color:#fff;box-shadow:0 4px 14px rgba(15,118,110,.4);cursor:pointer;transition:transform .15s ease-out,box-shadow .15s ease-out}
.help-fab:hover{background:#115e59;transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,118,110,.45)}
.help-fab:focus-visible{outline:3px solid #134e4a;outline-offset:3px}
.help-fab[aria-expanded=true]{background:#134e4a}
.help-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.help-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(15,118,110,.5);animation:help-pulse 2.4s ease-out 3;pointer-events:none}
@keyframes help-pulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.5)}70%,100%{box-shadow:0 0 0 14px rgba(15,118,110,0)}}
.help-panel{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - 110px));border:1px solid var(--line,#d8dfd8);border-radius:18px;background:var(--surface,#fffefa);color:var(--ink,#18302d);box-shadow:0 18px 48px rgba(0,0,0,.28);overflow:hidden;animation:help-in .2s ease-out}
.help-panel[hidden]{display:none}
@keyframes help-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 14px 12px 18px;background:#0f766e;color:#fff}
.help-head h2{margin:0;font-size:17px;line-height:1.3;color:#fff}
.help-head p{margin:2px 0 0;font-size:13px;opacity:.9;color:#fff}
.help-close{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.help-close:hover{background:rgba(255,255,255,.28)}
.help-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.help-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--paper,#f5f4ef);scroll-behavior:smooth}
.help-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.help-msg p{margin:0}.help-msg p+p{margin-top:6px}
.help-bot{align-self:flex-start;background:var(--surface,#fffefa);border:1px solid var(--line,#d8dfd8);border-bottom-left-radius:4px}
.help-me{align-self:flex-end;background:#0f766e;color:#fff;border-bottom-right-radius:4px}
.help-typing{display:flex;gap:4px;padding:13px 14px}
.help-typing i{width:7px;height:7px;border-radius:50%;background:#7a8f8a;animation:help-dot 1s ease-in-out infinite}
.help-typing i:nth-child(2){animation-delay:.15s}.help-typing i:nth-child(3){animation-delay:.3s}
@keyframes help-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.help-foot{display:flex;flex-direction:column;gap:8px;max-height:46%;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#d8dfd8);background:var(--surface,#fffefa)}
.help-tabs{display:flex;gap:6px;overflow-x:auto;flex:none}
.help-tab{flex:none;min-height:34px;padding:4px 12px;border-radius:999px;border:1px solid var(--line,#d8dfd8);background:transparent;color:var(--ink,#18302d);font-size:14px;font-weight:700;cursor:pointer}
.help-tab[aria-pressed=true]{background:#0f766e;border-color:#0f766e;color:#fff}
.help-chips{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0}
.help-chip{min-height:40px;padding:8px 12px;border-radius:12px;border:1px solid #0f766e;background:transparent;color:#0f766e;text-align:left;font-size:14.5px;font-weight:600;cursor:pointer;line-height:1.35}
.help-chip:hover{background:rgba(15,118,110,.08)}
.help-chip.done{border-color:var(--line,#d8dfd8);color:var(--muted,#536762);font-weight:500}
.help-zalo{flex:none;display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;background:#0068ff;color:#fff;text-decoration:none;font-weight:700;font-size:14.5px}
.help-zalo[hidden]{display:none}
.help-zalo:hover{background:#0057d9;color:#fff}
.help-fab:focus-visible,.help-tab:focus-visible,.help-chip:focus-visible,.help-zalo:focus-visible{outline:3px solid #134e4a;outline-offset:2px}
@media(max-width:760px){
 body.student-app:not(:has(#gate:not([hidden]))) .help-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
 .help-panel{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom));height:min(78dvh,640px)}
 body.help-open .help-fab{display:none}
}
body:has(#exams-view:not([hidden]) .thi-exam) .help-fab,body:has(#exams-view:not([hidden]) .thi-exam) .help-panel,body.tutor-open .help-fab,body.tutor-open .help-panel,body:has(dialog[open]:modal) .help-fab,body:has(dialog[open]:modal) .help-panel{display:none}
:where(:root[data-theme=dark]) .help-fab,:where(:root[data-theme=dark]) .help-head,:where(:root[data-theme=dark]) .help-tab[aria-pressed=true],:where(:root[data-theme=dark]) .help-me{background:#2d7a6c;border-color:#2d7a6c}
:where(:root[data-theme=dark]) .help-chip{border-color:#4ac0a8;color:#8fe0cf}
:where(:root[data-theme=dark]) .help-bot{background:#2b2d2c}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .help-fab,:where(:root:not([data-theme=light])) .help-head,:where(:root:not([data-theme=light])) .help-tab[aria-pressed=true],:where(:root:not([data-theme=light])) .help-me{background:#2d7a6c;border-color:#2d7a6c}:where(:root:not([data-theme=light])) .help-chip{border-color:#4ac0a8;color:#8fe0cf}:where(:root:not([data-theme=light])) .help-bot{background:#2b2d2c}}
@media (prefers-reduced-motion:reduce){.help-ring,.help-panel,.help-typing i{animation:none}.help-log{scroll-behavior:auto}}
@media(max-width:760px){body.student-app:has(#lt-banner:not([hidden])) .help-fab{bottom:calc(150px + env(safe-area-inset-bottom))}}
.student-app .gate-card.auth-card{padding-bottom:92px;background-size:130px auto}
@media(max-width:560px){.student-app .gate-card.auth-card{padding-bottom:28px}}

/* Thương hiệu AI Học Tập: biểu tượng (nét SVG gốc trong bộ nhận diện, đổi màu theo giao diện) + tên dạng chữ */
.student-app .wordmark.brand{gap:10px;font-size:inherit;letter-spacing:0;color:var(--brand-text,#0f766e);text-decoration:none}
.brand-ic{height:40px;width:auto;flex:none;display:block}
.student-app .wordmark .brand-name{display:block;margin:0;font:800 22px/1.15 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:-.01em;text-transform:none;white-space:nowrap;color:inherit}
@media(max-width:760px){.brand-ic{height:34px}.student-app .wordmark .brand-name{font-size:19px}}
@media(max-width:380px){.student-app .wordmark .brand-name{font-size:17px}}
.student-app .auth-logo-img{display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:16px}

/* Giới thiệu dưới thẻ đăng nhập (chỉ khi chưa đăng nhập): thẻ đăng nhập vẫn nằm giữa màn hình đầu, giới thiệu ở dưới */
.student-app .about{display:none}
body.student-app:has(#gate:not([hidden])){--tb:72px}
@media(max-width:760px){body.student-app:has(#gate:not([hidden])){--tb:80px}}
body.student-app:has(#gate:not([hidden])) .gate{flex:none;min-height:calc(100dvh - var(--tb))}
body.student-app:has(#gate:not([hidden])) .about{display:block;padding:8px 20px 48px}
.student-app .about-inner{max-width:880px;margin:0 auto}
.student-app .about h2{margin:0 0 10px;font-size:clamp(22px,4vw,30px);line-height:1.3;color:var(--ink)}
.student-app .about-lead{margin:0 0 20px;color:var(--muted);font-size:var(--fs-body,17px)}
.student-app .about-hero{display:block;width:100%;height:auto;aspect-ratio:1672/941;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.student-app .about-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.student-app .about-list li{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:4px}
.student-app .about-list strong{color:var(--brand-text,#0f766e);font-size:16px}
.student-app .about-list span{color:var(--muted);font-size:15px;line-height:1.5}
.student-app .about-foot{margin:24px 0 0;text-align:center;color:var(--muted);font-size:var(--fs-label,15px)}
.uo-logo img{width:64px;height:64px;border-radius:16px;display:block}
/* Đã đăng nhập trên điện thoại hẹp: thanh trên nhiều nút → chỉ giữ biểu tượng logo (tên vẫn có trong aria-label) */
@media(max-width:480px){body.student-app:not(:has(#gate:not([hidden]))) .wordmark .brand-name{display:none}}
.student-app .about h2{text-align:center;text-wrap:balance}
.student-app .about-lead{max-width:68ch;margin-left:auto;margin-right:auto;text-align:center;text-wrap:pretty}
.student-app .about-list{display:flex;flex-wrap:wrap;gap:12px}
.student-app .about-list li{flex:1 1 260px;align-content:start}
.student-app .tutor-routed{margin:2px 0;align-self:center;font-size:13px;color:var(--muted);padding:2px 10px;border:1px dashed var(--line);border-radius:999px}

/* ===== Mở bằng trình duyệt (khi mở link trong Zalo/Facebook…) ===== */
.browser-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:var(--paper,#f5f4ef);overflow:auto}
body.browser-gate-open{overflow:hidden}
.bg-card{width:min(420px,100%);padding:32px 24px 22px;border:1px solid var(--line,#d8dfd8);border-radius:24px;background:var(--surface,#fffefa);text-align:center;box-shadow:0 18px 50px rgba(15,60,50,.14);animation:help-in .25s ease-out}
.bg-logo{display:block;margin:0 auto 14px;border-radius:18px}
.bg-card h2{margin:0 0 10px;font-size:clamp(23px,6vw,28px);line-height:1.25;color:var(--ink,#18302d);text-wrap:balance}
.bg-lead{margin:0 0 22px;color:var(--muted,#536762);font-size:16px;line-height:1.55}
.bg-primary,.bg-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer}
.bg-primary{border:0;background:#0f766e;color:#fff;box-shadow:0 6px 16px rgba(15,118,110,.3)}
.bg-primary:hover{background:#115e59}
.bg-secondary{margin-top:12px;border:1px solid var(--line,#d8dfd8);background:transparent;color:var(--ink,#18302d)}
.bg-steps{margin:16px 0 0;padding:12px 14px 12px 34px;border-radius:12px;background:var(--paper,#f5f4ef);text-align:left;font-size:15px;line-height:1.6;color:var(--ink,#18302d)}
.bg-steps[hidden]{display:none}
.bg-steps li+li{margin-top:4px}
.bg-steps .ins-ic{width:18px;height:18px;vertical-align:-3px}
.bg-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;min-height:40px;padding:6px 12px;border:0;background:transparent;color:#0f766e;font-weight:700;font-size:15px;cursor:pointer}
.bg-note{margin:6px 0 0;color:var(--muted,#536762);font-size:13px}
.bg-primary:focus-visible,.bg-secondary:focus-visible,.bg-link:focus-visible{outline:3px solid #134e4a;outline-offset:3px}

/* ===== Bảng hướng dẫn cài ===== */
.ins-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
dialog.install-sheet{width:min(460px,calc(100% - 24px));padding:0;border:1px solid var(--line,#d8dfd8);border-radius:22px;background:var(--surface,#fffefa);color:var(--ink,#18302d);overflow:hidden}
dialog.install-sheet::backdrop{background:rgba(10,30,26,.55);backdrop-filter:blur(3px)}
@media(max-width:560px){dialog.install-sheet{margin:auto 0 0;width:100%;max-width:100%;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}}
.ins-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 0 22px}
.ins-head h2{margin:0;font-size:19px}
.ins-x{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:var(--paper,#f5f4ef);color:var(--ink,#18302d);font-size:24px;line-height:1;cursor:pointer}
.ins-body{padding:14px 22px 22px}
.ins-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ins-brand img{border-radius:14px;box-shadow:0 4px 12px rgba(15,118,110,.25)}
.ins-brand strong{display:block;font-size:18px}
.ins-brand span{display:block;color:var(--muted,#536762);font-size:14px}
.ins-benefits{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.ins-benefits li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--paper,#f5f4ef);font-size:15px}
.ins-benefits .ins-ic{color:#0f766e;width:20px;height:20px}
.ins-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ins-steps li{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line,#d8dfd8);border-radius:14px}
.ins-n{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#0f766e;color:#fff;font-weight:800;font-size:14px}
.ins-tx{flex:1;font-size:15px;line-height:1.45}
.ins-steps .ins-ic{color:#0f766e}
.ins-primary,.ins-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer}
.ins-primary{border:0;background:#0f766e;color:#fff}
.ins-primary:hover{background:#115e59}
.ins-secondary{border:1px solid var(--line,#d8dfd8);background:transparent;color:var(--ink,#18302d)}
.ins-ok{margin:0 0 12px;padding:12px;border-radius:12px;background:var(--paper,#f5f4ef)}
.ins-lead{margin:0 0 12px;color:var(--muted,#536762)}
.ins-note{margin:14px 0 0;color:var(--muted,#536762);font-size:13px}

/* ===== Gợi ý cài (chỉ khi máy chưa cài) ===== */
.install-nudge{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:10px;width:min(520px,calc(100% - 24px));padding:10px 10px 10px 12px;border:1px solid var(--line,#d8dfd8);border-radius:18px;background:var(--surface,#fffefa);box-shadow:0 12px 32px rgba(0,0,0,.18);animation:help-in .25s ease-out}
.install-nudge img{border-radius:11px;flex:none}
.install-nudge .in-tx{flex:1;min-width:0;display:grid;line-height:1.3}
.install-nudge .in-tx strong{font-size:15px}
.install-nudge .in-tx span{font-size:13px;color:var(--muted,#536762)}
.install-nudge .in-go{min-height:40px;padding:6px 14px;border:0;border-radius:11px;background:#0f766e;color:#fff;font-weight:700;cursor:pointer}
.install-nudge .in-later{min-height:40px;padding:6px 8px;border:0;background:transparent;color:var(--muted,#536762);font-weight:600;cursor:pointer}
@media(max-width:760px){body.student-app:not(:has(#gate:not([hidden]))) .install-nudge{bottom:calc(84px + env(safe-area-inset-bottom))}}
body.tutor-open .install-nudge,body:has(dialog[open]:modal) .install-nudge,body:has(#exams-view:not([hidden]) .thi-exam) .install-nudge{display:none}
:where(:root[data-theme=dark]) .bg-primary,:where(:root[data-theme=dark]) .ins-primary,:where(:root[data-theme=dark]) .ins-n,:where(:root[data-theme=dark]) .install-nudge .in-go{background:#2d7a6c}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .bg-primary,:where(:root:not([data-theme=light])) .ins-primary,:where(:root:not([data-theme=light])) .ins-n,:where(:root:not([data-theme=light])) .install-nudge .in-go{background:#2d7a6c}}
@media (prefers-reduced-motion:reduce){.bg-card,.install-nudge{animation:none}}
body:has(#install-nudge) .help-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
@media(max-width:760px){body.student-app:not(:has(#gate:not([hidden]))):has(#install-nudge) .help-fab{bottom:calc(160px + env(safe-area-inset-bottom))}}
.student-app dialog.install-sheet .ins-head h2{margin:0;font:800 19px/1.3 Nunito,system-ui,sans-serif;letter-spacing:0}
.student-app .install-sheet .ins-steps,.student-app .install-sheet .ins-benefits{padding:0;margin-left:0;margin-right:0}
body:has(#install-nudge) .help-fab{bottom:calc(116px + env(safe-area-inset-bottom))}

/* ===== Loading dùng chung (học sinh + giáo viên) ===== */
@keyframes ld-spin{to{transform:rotate(360deg)}}
@keyframes ld-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes ld-bar{0%{left:-40%;width:40%}50%{width:55%}100%{left:100%;width:40%}}
/* 1) Nút đang xử lý: vòng xoay nhỏ trong nút */
button[aria-busy=true]{cursor:progress}
button[aria-busy=true]:not(.icon-btn):not(.t-icon-btn):not(.sync-btn)::before{content:"";display:inline-block;flex:none;width:1em;height:1em;margin-right:.55em;vertical-align:-.16em;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ld-spin .7s linear infinite}
.t-icon-btn[aria-busy=true] svg,.icon-btn[aria-busy=true] svg{animation:ld-spin .9s linear infinite}
/* 2) Khối "đang tải" cho danh sách / báo cáo */
.ld-box{display:grid;justify-items:center;gap:12px;margin:0;padding:28px 16px;border:1px solid var(--line,#d8dfd8);border-radius:14px;background:var(--surface,#fffefa);color:var(--muted,#536762);text-align:center;font-weight:600}
.ld-box::before{content:"";width:34px;height:34px;border-radius:50%;border:3.5px solid rgba(15,118,110,.18);border-top-color:#0f766e;animation:ld-spin .8s linear infinite}
.ld-box::after{content:"";width:min(320px,80%);height:10px;border-radius:99px;background:linear-gradient(90deg,rgba(127,127,127,.14) 25%,rgba(127,127,127,.32) 50%,rgba(127,127,127,.14) 75%);background-size:200% 100%;animation:ld-shimmer 1.3s linear infinite}
.ld-box.ld-lg{min-height:220px;align-content:center}
.ld-inline::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.55em;vertical-align:-.16em;border:2.5px solid rgba(15,118,110,.25);border-top-color:#0f766e;border-radius:50%;animation:ld-spin .8s linear infinite}
.student-app .thi-loading{display:grid;justify-items:center;gap:12px;padding:28px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:center;font-weight:600}
.student-app .thi-loading::before{content:"";width:34px;height:34px;border-radius:50%;border:3.5px solid rgba(15,118,110,.18);border-top-color:#0f766e;animation:ld-spin .8s linear infinite}
/* Danh mục bài học đang tải lần đầu */
.student-app.is-loading #courses:empty{display:grid;place-items:center;align-content:center;gap:10px;min-height:160px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.student-app.is-loading #courses:empty::before{content:"";width:34px;height:34px;border-radius:50%;border:3.5px solid rgba(15,118,110,.18);border-top-color:#0f766e;animation:ld-spin .8s linear infinite}
.student-app.is-loading #courses:empty::after{content:"Đang tải bài học…";color:var(--muted);font-weight:600}
/* 3) Thanh tiến trình mỏng mép trên khi đợi máy chủ */
.net-bar{position:fixed;top:0;left:0;right:0;z-index:400;height:3px;overflow:hidden;background:rgba(15,118,110,.15);pointer-events:none}
.net-bar[hidden]{display:none}
.net-bar i{position:absolute;top:0;height:100%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#0f766e,#34b79f,#f59e0b);animation:ld-bar 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){button[aria-busy=true]::before,.ld-box::before,.ld-box::after,.ld-inline::before,.thi-loading::before,.student-app.is-loading #courses:empty::before,.t-icon-btn[aria-busy=true] svg{animation:none}.net-bar i{animation:none;left:0;width:100%;opacity:.7}}
/* Chuẩn giao diện: logo đủ vùng chạm 44px, chú thích cuối trang đủ cỡ chữ */
.student-app .wordmark.brand{min-width:44px}
/* ===== Hiệu ứng Luyện tập dùng chung (quiz-fx.js): đếm ngược 3·2·1, pháo giấy ===== */
.qfx-count{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(circle at 50% 45%,#1f5552ee,#0b2221f5 70%);color:#fff;transition:opacity .22s ease}
.qfx-count.is-out{opacity:0}
.qfx-count-title{margin:0;max-width:90%;text-align:center;font-size:clamp(20px,3vw,34px);font-weight:800;color:#d3efe9;min-height:1.3em}
.qfx-ring{position:relative;width:clamp(180px,32vmin,320px);height:clamp(180px,32vmin,320px);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px #ffffff14,0 0 80px #0006}
.qfx-ring.is-on{animation:qfx-pop .85s cubic-bezier(.2,.9,.25,1.25) both}
.qfx-ring.is-on::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:6px solid #fff;opacity:0;animation:qfx-wave .85s ease-out both}
.qfx-num{font-size:clamp(84px,18vmin,180px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 6px 0 #0003}
.qfx-n3{background:#c8102e}.qfx-n2{background:#1360c4}.qfx-n1{background:#9a6400}
.qfx-go{background:#1d7a2e;width:auto;min-width:clamp(220px,40vmin,420px);border-radius:999px;padding:0 40px}
.qfx-go .qfx-num{font-size:clamp(48px,10vmin,96px)}
@keyframes qfx-pop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes qfx-wave{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.qfx-confetti{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.qfx-confetti i{position:absolute;top:-24px;left:var(--x);width:10px;height:16px;border-radius:2px;transform:scale(var(--s));animation:qfx-fall var(--d) cubic-bezier(.3,.6,.5,1) var(--w) forwards}
@keyframes qfx-fall{to{transform:translateY(110vh) rotate(var(--r)) scale(var(--s));opacity:.9}}
@media(prefers-reduced-motion:reduce){.qfx-ring.is-on,.qfx-ring.is-on::after{animation:none}.qfx-count{transition:none}}
/* Luyện tập (học sinh): màn kết quả từng câu và kết thúc, bản 29/10 chiều */
.lt-sound{min-height:44px;padding:0 12px;border-radius:10px;background:transparent;color:#fff;border:1px solid #ffffff40;font-size:13px;font-weight:700}
.lt-play .lt-sound:hover{background:#ffffff14;border-color:#ffffff80}
.lt-result{gap:8px;padding:28px 20px;border-radius:22px;justify-items:center}
.lt-result strong{font-size:32px;line-height:1.15}
.lt-res-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#ffffff2e;font-size:46px;font-weight:900;line-height:1;animation:qfx-pop .6s cubic-bezier(.2,.9,.25,1.25) both}
.lt-result.is-ok{background:linear-gradient(160deg,#25a03c,#17652a)}
.lt-result.is-bad{background:linear-gradient(160deg,#d8263f,#8f0c20)}
.lt-result.is-none{background:linear-gradient(160deg,#4b5b5b,#2e3a3a)}
.lt-gain{display:inline-block;padding:6px 18px;border-radius:999px;background:#ffffff;color:#17652a;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.lt-streak{padding:4px 14px;border-radius:999px;background:#ffd166;color:#3d2b00;font-weight:800}
.lt-res-ans{font-size:18px;font-weight:700}
.lt-res-rank{font-weight:700;color:#ffffffe6}
.lt-top5 li{counter-increment:none;align-items:center}
.lt-top5 li::before{content:none}
.lt-top5 li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#ffffff26;font-size:14px;flex:none}
.lt-top5 li.is-first b{background:#ffd166;color:#3d2b00}
.lt-top5 li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-result.is-top{background:linear-gradient(160deg,#ffd166,#b88200);color:#2a1d00}
.lt-result.lt-top-2{background:linear-gradient(160deg,#e3e8ec,#8e9ba4);color:#16222b}
.lt-result.lt-top-3{background:linear-gradient(160deg,#f0b27a,#9b5a24);color:#2a1404}
.lt-result.is-top .lt-res-rank{color:inherit}
.lt-result.is-top .lt-medal{background:#ffffffcc;color:#2a1d00}
.lt-stage{list-style:none;padding:0;margin:0;display:flex;align-items:flex-end;justify-content:center;gap:8px}
.lt-step{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:2px}
.lt-step-name{font-weight:800;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.lt-step small{color:#d3efe9;font-size:13px}
.lt-step-block{display:grid;place-items:start center;padding-top:6px;border-radius:10px 10px 0 0;font-size:24px;font-weight:900;margin-top:4px}
.lt-step-1 .lt-step-block{height:96px;background:linear-gradient(180deg,#ffd166,#c98f00);color:#3d2b00}
.lt-step-2 .lt-step-block{height:72px;background:linear-gradient(180deg,#e3e8ec,#9aa7b0);color:#1d2a33}
.lt-step-3 .lt-step-block{height:54px;background:linear-gradient(180deg,#f0b27a,#a8642c);color:#2e1605}
@media(prefers-reduced-motion:reduce){.lt-res-ic{animation:none}}
@media(max-width:600px){.qfx-ring{width:clamp(200px,56vmin,300px);height:clamp(200px,56vmin,300px)}}
@keyframes qfx-pop{0%{transform:scale(.4);opacity:.25}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.lt-sound{white-space:nowrap}
#msg-body{white-space:pre-line}
.lt-intro-n{align-self:center;margin-top:12px}
.lt-intro-q{font-size:22px;text-align:center;background:#fff;color:#0f2a2b;border-radius:16px;padding:20px}
.lt-intro-bar{display:block;height:8px;border-radius:999px;background:#ffffff26;overflow:hidden;position:relative}
.lt-intro-bar::after{content:"";position:absolute;inset:0;background:#22c3a6;transform-origin:left;animation:lt-drain var(--ms,3000ms) linear forwards}
@keyframes lt-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* ===== Thảo luận (học sinh) ===== */
.tl-card{background:linear-gradient(150deg,#2b2a5a,#1b1f3d)}
.tl-banner{background:#2b2a5a}
.tl-play{background:radial-gradient(circle at 50% 0,#33306b,#16183a 65%)}
.tl-slide{display:grid;gap:12px}
.tl-q{background:#fff;color:#16183a;border-radius:16px;padding:16px 18px}
.tl-form{display:grid;gap:10px}
.tl-label{font-weight:800;color:#fff;margin:0}
.tl-play .tl-input{width:100%;min-height:52px;font-size:17px;border-radius:12px;border:2px solid #ffffff50;background:#ffffff14;color:#fff;padding:12px 14px}
.tl-play .tl-input::placeholder{color:#d8d6ff}
.tl-play .tl-input:focus{outline:3px solid #ffd166;outline-offset:2px}
.tl-play .tl-input[aria-invalid=true]{border-color:#ff9fb2}
.tl-err{margin:0;color:#ffc2cf;font-weight:700;min-height:1.2em}
.tl-play .tl-send{min-height:52px;border-radius:12px;background:#ffd166;color:#2a1d00;border:0;font-size:17px;font-weight:900}
.tl-play .tl-send:hover{filter:brightness(1.05);background:#ffd166}
.tl-ok{margin:0;font-weight:800;color:#a8f0d4}
.tl-mine{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tl-mine li{background:#ffffff1f;border-radius:999px;padding:6px 14px;font-weight:700;overflow-wrap:anywhere}
.tl-note{margin:0;text-align:center;color:#e6e4ff;font-weight:700;padding:16px;border-radius:14px;background:#ffffff14}
.tl-poll,.tl-scale{border:0;margin:0;padding:0;display:grid;gap:8px}
.tl-scale legend{font-weight:800;color:#fff;padding:0;margin-bottom:6px}
.tl-choice{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:12px;background:#ffffff14;color:#fff;font-weight:700;cursor:pointer;margin:0}
.tl-choice:has(input:checked){background:#ffd166;color:#2a1d00}
.tl-choice input{width:22px;height:22px;min-height:22px;accent-color:#2a1d00}
.tl-scale-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tl-dot{position:relative;margin:0;display:grid;place-items:center;min-height:52px;border-radius:12px;background:#ffffff14;color:#fff;font-weight:900;font-size:18px;cursor:pointer}
.tl-dot input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tl-dot:has(input:checked){background:#ffd166;color:#2a1d00}
.tl-dot:has(input:focus-visible){outline:3px solid #fff;outline-offset:2px}
.tl-scale-ends{margin:2px 0 0;font-size:13px;color:#d8d6ff}
.tl-qa{display:grid;gap:8px}
.tl-qa-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tl-qa-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:#ffffff14}
.tl-qa-list li.is-done{opacity:.6}
.tl-play .tl-vote{min-height:44px;min-width:64px;padding:0 10px;border-radius:10px;background:#ffffff1f;color:#fff;border:1px solid #ffffff40;font-weight:900}
.tl-play .tl-vote.is-on{background:#ffd166;color:#2a1d00;border-color:#ffd166}
.tl-play .tl-vote:disabled{opacity:.55;cursor:default}
.tl-qa-text{overflow-wrap:anywhere}.tl-qa-done{color:#a8f0d4;font-weight:700}
.tl-end-ic{align-self:center;background:#ffd166;color:#2a1d00}
.student-app .tl-play .tl-label,.tl-play .tl-label{color:#fff}
.lt-play button.tl-send{background:#ffd166;color:#2a1d00;border:0}
.lt-play button.tl-send:hover{background:#ffdd85;color:#2a1d00}
/* Nội dung bài học: bảng, danh sách, công thức (renderMarkdown mới) */
.md-table{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px;max-width:100%}
.md-table table{width:100%;border-collapse:collapse;font-size:.95em;line-height:1.55}
.md-table th,.md-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.md-table th{background:color-mix(in srgb,var(--line) 45%,transparent);font-weight:800}
.md-table tr:last-child td{border-bottom:0}
#lesson-content ul,#lesson-content ol,.ex-prompt ul,.ex-prompt ol{margin:8px 0 14px;padding-left:1.5em}
#lesson-content li{margin:6px 0}
#lesson-content li>ul,#lesson-content li>ol{margin:6px 0}
#lesson-content code,.ex-prompt code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.math{font-family:'SGK Serif','Times New Roman',serif;font-style:italic;white-space:nowrap}
.md-img-alt{color:var(--muted);font-style:italic}
#lesson-content blockquote p{margin:4px 0}
.lesson-chips{display:flex;flex-wrap:wrap;gap:8px}
.student-app .read-chip.is-done{background:color-mix(in srgb,#16a34a 18%,transparent);color:#15803d}
.path-read{display:flex;align-items:center;gap:6px}
.path-read.is-done{color:#15803d;font-weight:700}
:where(:root[data-theme=dark]) .student-app .read-chip.is-done,:where(:root[data-theme=dark]) .path-read.is-done{color:#86efac}
@media(prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .student-app .read-chip.is-done,:where(:root:not([data-theme=light])) .path-read.is-done{color:#86efac}}
.tutor-suggest{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.student-app .tutor-chip{min-height:44px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700;text-align:left}
/* Cập nhật ứng dụng (thiết kế lại 29/10): chấm đỏ tĩnh, rõ ở cả nền sáng và tối; biểu tượng không quay. Bỏ thanh chạy ngang mép trên. */
.student-app .update-btn .badge-dot,.student-app .update-btn .ic{animation:none}
.student-app .update-btn .badge-dot{top:5px;right:5px;width:11px;height:11px;background:#dc2626;border:2px solid var(--surface);box-shadow:none}
.student-app .update-btn{border-color:color-mix(in srgb,#dc2626 45%,var(--line))}
:where(:root[data-theme=dark]) .student-app .badge-dot,:where(:root[data-theme=dark]) .student-app .update-btn .badge-dot{background:#f87171}
@media(prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .student-app .badge-dot,:where(:root:not([data-theme=light])) .student-app .update-btn .badge-dot{background:#f87171}}
.net-bar,#net-bar{display:none!important}
/* Thảo luận (học sinh), bản thiết kế 29/10 tối */
.tl-main{max-width:600px}
.tl-slide{gap:14px;padding-top:4px}
.tl-slide .lt-idx{display:inline-flex;align-self:start;padding:4px 12px;border-radius:999px;background:#ffffff1a;color:#cfc9ff;font-size:14px}
.tl-q{font-size:20px;line-height:1.4;padding:18px 20px;box-shadow:0 8px 24px #0004}
.tl-form{gap:14px;padding:16px;border-radius:18px;background:#ffffff0d;border:1px solid #ffffff1f}
.tl-field{display:grid;gap:6px}
.tl-play .tl-input{min-height:52px;background:#0f1230;border-color:#ffffff38}
.tl-play textarea.tl-input{min-height:84px;resize:vertical;line-height:1.45}
.tl-hint{margin:-4px 0 0;font-size:13px;color:#cfc9ff}
.tl-err:empty{display:none}
.tl-mine li{background:#ffd16626;color:#ffe9b3;border:1px solid #ffd16655}
.tl-choice{background:#0f1230;border:1px solid #ffffff2e}
.tl-dot{background:#0f1230;border:1px solid #ffffff2e}
.tl-scale{padding:12px;border-radius:14px;background:#ffffff0a}
/* Khung xương Tổng quan học sinh (29/10 tối): giữ đúng bố cục khi đang tải, không để nút xoay một mình trên vùng trống */
.student-app .dash-skel{display:grid;gap:16px;margin:8px 0 16px}
.student-app .sk{border-radius:var(--radius-card,16px);background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line) 45%,transparent) 50%,var(--line) 100%);background-size:200% 100%;animation:sk-wave 1.4s ease-in-out infinite;opacity:.7}
.student-app .sk-hero{height:132px}
.student-app .sk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.student-app .sk-ring{min-height:220px}
.student-app .sk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.student-app .sk-tile{min-height:102px}
@keyframes sk-wave{from{background-position:100% 0}to{background-position:-100% 0}}
@media(max-width:760px){.student-app .sk-grid{grid-template-columns:1fr}.student-app .sk-ring{min-height:160px}}
@media(prefers-reduced-motion:reduce){.student-app .sk{animation:none}}
/* Nguyên tắc Gia sư AI hiện khi mở (29/10 tối) */
.student-app .tutor-rules{border-left:4px solid var(--brand,#0f766e);max-width:100%}
.student-app .tutor-rules .tutor-rules-title{font-weight:700;margin:0 0 4px}
.student-app .tutor-rules p{margin:0 0 6px}
.student-app .tutor-rules ul{margin:0 0 6px;padding-left:1.2em}
.student-app .tutor-rules li{margin:0 0 2px;padding:0;line-height:1.45}
.student-app .tutor-rules .tutor-rules-ask{margin:6px 0 0}