.class-scanner { width:min(520px,calc(100% - 28px)); max-height:90vh; overflow:auto; border:1px solid #d7e7fd; border-radius:22px; padding:24px; color:#10214e; font:15px/1.5 "Segoe UI",sans-serif; box-shadow:0 24px 80px #173a7f33; }
.class-scanner::backdrop { background:#10214e66; backdrop-filter:blur(3px); }
.class-scanner h2 { margin:8px 34px 8px 0; font-size:23px; }
.class-scanner video { width:100%; max-height:280px; border-radius:14px; background:#14213c; }
.class-scanner video[hidden] { display:none; }
.class-scanner form { display:grid; gap:10px; margin-top:22px; }
.class-scanner input { box-sizing:border-box; width:100%; min-width:0; padding:12px; border:1px solid #bfcee4; border-radius:10px; font:inherit; }
.class-scanner button { border:0; border-radius:10px; padding:12px 17px; background:#0763ed; color:white; font:600 14px "Segoe UI",sans-serif; cursor:pointer; min-height:44px; }
.class-scanner .scanner-close { float:right; background:#edf5ff; color:#10214e; font-size:24px; padding:0; width:44px; }
.class-scanner button:disabled { opacity:.6; cursor:wait; }
.class-scanner :focus-visible { outline:3px solid #4690ff; outline-offset:3px; }
.scanner-status { padding:12px; border-radius:10px; background:#edf6ff; }
.join-shell { background:radial-gradient(ellipse at top,#eaf6ff,white 65%); min-height:100vh; color:#10214e; }
.join-shell .join-brand { display:flex; align-items:center; gap:10px; padding:16px 24px; text-decoration:none; color:#10214e; font-size:22px; font-weight:750; }
.join-brand img { width:42px; height:42px; object-fit:contain; }
.join-shell .screen.center { min-height:calc(100vh - 86px); padding:24px 16px; }
.join-shell .card { border:1px solid #dce9fb; border-radius:22px; box-shadow:0 16px 60px #2b67b00e; }
.join-shell .btn-accent,.join-shell .btn--primary { background:#0763ed; border-color:#0763ed; color:#fff; }
.join-shell #newStudentCodeDisplay { color:#0763ed!important; }
.join-shell #joinFlowStatus { max-width:650px; margin:10px auto; padding:12px 18px; background:#fff4d9; border-radius:12px; }
.join-shell #joinFlowStatus.hidden { display:none; }
.join-shell button:disabled { opacity:.6; cursor:wait; }
.sh-scan-btn { background:white; color:#007b41; border:1px solid #a7e5be; padding:11px 14px; border-radius:10px; min-height:44px; font:600 14px "Segoe UI",sans-serif; cursor:pointer; margin:0 0 16px; }

/* /join: một giao diện thống nhất cho mọi bước, giữ ID/logic trong app.js. */
.join-shell { --j-blue:#225fe6; --j-navy:#172650; --j-green:#13864f; --j-muted:#5b6880; --j-border:#dce7f5; background:#f6faff; color:var(--j-navy); min-width:0; }
.join-shell :focus-visible,.class-scanner :focus-visible { outline:3px solid #79aaff; outline-offset:3px; }
.join-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(20px,5vw,72px); background:#fffffff0; border-bottom:1px solid #e8edf6; }
.join-shell .join-brand { display:inline-flex; align-items:center; gap:11px; padding:0; color:var(--j-navy); text-decoration:none; font-size:20px; font-weight:800; line-height:1.05; }
.join-brand img { width:40px; height:40px; object-fit:contain; }
.join-brand small { display:block; margin-top:4px; color:var(--j-muted); font-size:11px; font-weight:600; }
.join-home-link { color:#385b93; text-decoration:none; font-size:14px; font-weight:700; }
.join-home-link:hover { text-decoration:underline; }
.join-layout { width:min(1200px,100%); min-height:calc(100vh - 76px); margin:auto; padding:clamp(28px,5vw,62px) clamp(20px,4vw,48px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(32px,5vw,84px); align-items:center; }
.join-intro { max-width:520px; padding:15px 0; }
.join-eyebrow { display:inline-block; padding:8px 13px; border-radius:999px; color:#1e5bc9; background:#e5f0ff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.join-intro h1 { margin:24px 0 18px; color:var(--j-navy); font-size:clamp(40px,5vw,62px); line-height:1.08; letter-spacing:-.045em; }
.join-intro h1 em { color:var(--j-blue); font-style:normal; }
.join-intro > p { max-width:440px; margin:0; color:var(--j-muted); font-size:16px; line-height:1.7; }
.join-steps { display:grid; margin:33px 0 27px; }
.join-steps > div { display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; column-gap:14px; position:relative; padding-bottom:23px; }
.join-steps > div:not(:last-child)::after { content:""; position:absolute; left:20px; top:43px; bottom:3px; width:2px; background:#d8e8fb; }
.join-steps > div > span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--j-blue); background:#e4efff; font-size:13px; font-weight:800; }
.join-steps > div:first-child > span { color:#fff; background:var(--j-blue); }
.join-steps strong { align-self:end; font-size:15px; }
.join-steps small { margin-top:3px; color:var(--j-muted); font-size:13px; }
.join-note { display:flex; gap:12px; align-items:flex-start; max-width:460px; padding:17px 19px; border:1px solid #cbe9d9; border-radius:15px; background:#effbf4; }
.join-note > span { color:var(--j-green); font-size:22px; line-height:1; }
.join-note p { margin:0; color:#385a4b; font-size:13px; line-height:1.55; }
.join-note strong { color:#17633d; }
.join-flow { min-width:0; }
.join-shell .join-flow .screen.center { min-height:0; display:block; padding:0; }
.join-shell .join-card { width:100%; max-width:none; padding:clamp(24px,3vw,38px); border:1px solid var(--j-border); border-radius:24px; background:#fff; box-shadow:0 18px 58px #1943841a; text-align:left; }
.join-card-step { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; color:#62738d; font-size:11px; font-weight:800; letter-spacing:.09em; }
.join-step-dots { display:flex; gap:6px; }
.join-step-dots i { display:block; width:23px; height:5px; border-radius:8px; background:#dbe6f5; }
.join-step-dots i:first-child,.join-step-dots.is-complete i { background:var(--j-blue); }
.join-card-icon { display:grid; place-items:center; width:51px; height:51px; margin-bottom:19px; border-radius:15px; font-size:25px; font-weight:800; }
.join-card-icon--blue { background:#e8f1ff; color:var(--j-blue); }
.join-card-icon--green { background:#e6f7ec; color:var(--j-green); }
.join-card h2 { margin:0 0 10px; color:var(--j-navy); font-size:clamp(24px,2.5vw,30px); line-height:1.2; letter-spacing:-.025em; overflow-wrap:anywhere; }
.join-card-description { margin:0 0 23px; color:var(--j-muted); font-size:14px; line-height:1.6; }
.join-card .join-field { width:100%; margin:0; }
.join-card .join-field .field__label { display:block; margin-bottom:8px; color:#263d66; font-size:13px; font-weight:750; }
.join-card .join-field input[type="text"] { width:100%; min-height:52px; padding:11px 15px; border:1px solid #bfcfe4; border-radius:11px; background:#fff; color:var(--j-navy); font:600 16px system-ui,"Segoe UI",sans-serif; }
.join-card .join-field input::placeholder { color:#8d9bb0; font-weight:400; }
#classCodeInput { text-transform:uppercase; letter-spacing:.12em; }
#studentCodeInput { letter-spacing:.14em; }
.join-field-hint { margin:8px 0 22px; color:#64738b; font-size:12px; }
.join-shell .join-card .btn { min-height:49px; border-radius:11px; font-weight:750; }
.join-shell .join-card .btn--primary,.join-shell .join-card .btn-accent { background:var(--j-blue); border-color:var(--j-blue); color:white; }
.join-shell .join-card .btn--primary { display:flex; justify-content:space-between; padding-inline:20px; width:100%; }
.join-shell .join-card .btn-outline { border:1px solid #bed3ec; background:#fff; color:#2359ad; }
.join-shell .join-card button:disabled { opacity:.58; cursor:wait; }
.join-qr-btn,.join-main-action { width:100%; }
.join-qr-btn { gap:9px; }
.join-qr-btn > span { font-size:20px; line-height:1; }
.join-divider { display:flex; align-items:center; gap:14px; margin:19px 0; color:#8491a4; font-size:12px; font-weight:650; }
.join-divider::before,.join-divider::after { content:""; flex:1; height:1px; background:#e3eaf4; }
.join-overline { margin:0 0 5px; color:var(--j-green); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.join-teacher { margin:0 0 17px; color:#536782; font-size:14px; }
.join-card .btn-google { width:100%; border:1px solid #c6d6ec; background:#fff; color:#294a7d; box-shadow:0 3px 10px #1e416e0f; }
.join-back { width:100%; margin-top:16px; color:#56739e !important; }
.join-choice { padding:17px; border:1px solid #dbe8f8; border-radius:14px; background:#f7fbff; }
.join-choice--new { border-color:#d8e9de; background:#f8fcf9; }
.join-choice h3 { margin:0 0 5px; color:var(--j-navy); font-size:16px; }
.join-choice > p { margin:0 0 16px; color:var(--j-muted); font-size:12.5px; line-height:1.5; }
.join-choice .join-field { margin-bottom:12px; }
.join-choice .btn { width:100%; }
.join-error { margin:14px 0 0; padding:11px 13px; border:1px solid #fecaca; border-radius:10px; background:#fff3f3; color:#a52129 !important; font-size:13px; line-height:1.5; }
.join-created-code { margin:22px 0 16px; padding:17px; border:1px dashed #82abe7; border-radius:14px; background:#f3f8ff; text-align:center; }
.join-created-code span { display:block; color:#597398; font-size:11px; font-weight:850; letter-spacing:.1em; }
.join-created-code strong { display:block; margin-top:5px; color:var(--j-blue); font-size:clamp(34px,6vw,46px); font-variant-numeric:tabular-nums; letter-spacing:.16em; overflow-wrap:anywhere; }
.join-warning { margin:0 0 19px; padding:13px 15px; border-left:3px solid #e7a73e; border-radius:6px; background:#fff8e8; color:#75521a; font-size:13px; line-height:1.55; }
.join-warning strong { color:#674209; }
#recoverCreatedAccountBtn { margin-top:10px; }
#joinFlowStatus { width:min(1100px,calc(100% - 40px)); margin:18px auto 0; padding:12px 17px; border:1px solid #b9e7ce; border-radius:12px; background:#effbf4; color:#17633d; font-size:14px; }
.join-shell:has(#dashboardView:not(.hidden)) .join-layout { display:none; }
.join-shell:has(#dashboardView:not(.hidden)) .join-header { display:none; }
.join-shell #dashboardView .topbar { padding:14px clamp(20px,5vw,72px); border-color:#e3eaf5; background:#fff; }
.join-shell #dashboardView .account { min-width:0; flex-wrap:wrap; justify-content:flex-end; }
.join-shell #dashboardView .brand img { height:31px !important; }
.join-shell #dashboardView .container { max-width:1040px; padding:39px 24px 80px; }
.join-shell #dashboardView h2 { margin:0; font-size:clamp(25px,3vw,34px); letter-spacing:-.03em; }
.join-shell #dashboardView .row-between { gap:16px; margin-bottom:23px; }
.join-shell #dashboardView .quiz-list { display:grid; gap:13px; }
.join-shell #dashboardView .quiz-card { border:1px solid var(--j-border); border-radius:16px; background:#fff; box-shadow:0 5px 24px #1b45780d; }
.join-shell #dashboardView .quiz-card-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:12px; background:#e9f3ff; }
.join-shell #dashboardView .quiz-card-title { color:var(--j-navy); }
.join-shell #dashboardView .empty-state { margin-top:28px; padding:34px 20px; border:1px dashed #b9d1ef; border-radius:18px; background:#fff; text-align:center; }
.join-shell #dashboardView .empty-state-line { color:var(--j-muted); }
.join-shell #dashboardView .btn-accent { background:var(--j-blue); color:#fff; }
.join-shell #dashboardView .btn-outline { border-color:#bed3ec; color:#2359ad; background:#fff; }
.join-dashboard-link { color:#2458ab; font-size:14px; font-weight:700; text-decoration:none; }
.join-dashboard-link:hover { text-decoration:underline; }
.join-dashboard-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
@media (max-width:820px) {
 .join-layout { grid-template-columns:1fr; gap:25px; max-width:620px; padding:28px 20px 56px; }
 .join-intro { max-width:none; padding:0; }
 .join-intro h1 { margin:16px 0 9px; font-size:38px; }
 .join-intro h1 br { display:none; }
 .join-intro h1 em::before { content:" "; white-space:pre; }
 .join-intro > p { font-size:14px; }
 .join-steps { grid-template-columns:repeat(3,1fr); gap:8px; margin:19px 0 0; }
 .join-steps > div { display:block; padding:0; }
 .join-steps > div::after { display:none; }
 .join-steps > div > span { width:31px; height:31px; margin-bottom:6px; border-radius:9px; font-size:11px; }
 .join-steps strong { display:block; font-size:11px; line-height:1.3; }
 .join-steps small,.join-note { display:none; }
}
@media (max-width:480px) {
 .join-header { min-height:65px; padding:10px 16px; }
 .join-shell .join-brand { gap:7px; font-size:17px; }
 .join-brand img { width:34px; height:34px; }
 .join-home-link { max-width:110px; font-size:11px; text-align:right; }
 .join-layout { padding:23px 14px 46px; gap:22px; }
 .join-eyebrow { padding:6px 10px; font-size:10px; }
 .join-intro h1 { font-size:33px; }
 .join-intro > p { font-size:13px; line-height:1.55; }
 .join-shell .join-card { padding:22px 18px; border-radius:19px; }
 .join-card-step { margin-bottom:18px; }
 .join-card h2 { font-size:24px; }
 .join-choice { padding:14px; }
 .join-shell #dashboardView .topbar { padding:10px 15px; }
 .join-shell #dashboardView .brand img { height:25px !important; }
 .join-shell #dashboardView .account { gap:4px; }
 .join-shell #dashboardView #studentNameLabel { font-size:11px; }
 .join-shell #dashboardView .container { padding:26px 15px 65px; }
 .join-shell #dashboardView .row-between { align-items:flex-start; flex-direction:column; }
}
@media (max-width:350px) { .join-steps { gap:5px; } .join-steps strong { font-size:10px; } .join-shell .join-card { padding:20px 15px; } .join-shell #dashboardView .quiz-card { flex-wrap:wrap; } }
/* PB-F53: lớp giáo viên đã lưu trữ (kết thúc năm học) — xếp cuối, nền nhạt, nhãn rõ. */
.join-shell #dashboardView .quiz-card.enrollment-archived { background:#f6f8fb; }
.enrollment-archived-note { display:inline-block; margin:6px 0 0; padding:3px 9px; border-radius:8px; background:#eef1f6; color:#4a5a72; font-size:12px; font-weight:600; line-height:1.4; }
/* PB-G41: ô danh sách lớp đang tải / lỗi */
.enrollment-loading { margin:12px 0 0; font-size:14px; }
.enrollment-error .btn { margin-left:6px; }
/* PB-G01: số bài cần làm + hạn gần nhất trên thẻ lớp; đang tải / lỗi báo ngay trong thẻ. */
.enrollment-todo { margin:6px 0 0; font-size:13px; line-height:1.45; color:#4a5a72; }
.enrollment-todo.has-todo { color:#9a3412; font-weight:700; }
.enrollment-todo.is-loading::before { content:""; display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; border:2px solid #c7d2e3; border-top-color:#2563eb; border-radius:50%; animation:enrollment-spin .8s linear infinite; }
.enrollment-todo.is-stale { opacity:.8; }
.enrollment-todo.is-error { color:#b42318; font-weight:600; }
.enrollment-todo-retry { margin-left:4px; padding:2px 10px; border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; }
@keyframes enrollment-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .enrollment-todo.is-loading::before { animation:none; } }