/* SCBC color identity: Tình Đầu 1.19.0; effective shell overrides included. */
:root{--scbc-indigo:#514c96;--scbc-indigo-hover:#625baa;--scbc-orange:#b9550b;--scbc-orange-hover:#9f4808;--scbc-accent:#e8770e;--scbc-paper:#ffffff;--scbc-ink:#3e4149;--scbc-body-ink:#171417;--scbc-muted:#6c7078;--scbc-line:#e5e5e9;--scbc-input:#cfd0d6;--scbc-tint:#f4f3fa;--scbc-cream:#fff9eb;--scbc-error:#b94437;--scbc-footer:#514c96;--scbc-on-indigo:#f4f2ff;--scbc-on-indigo-muted:#e2e0f3;--scbc-focus:#514c96;--scbc-focus-dark:#ffdc9e}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--scbc-body-ink);background:var(--scbc-paper);font-synthesis:none;line-height:1.55}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}a{color:var(--scbc-indigo);text-underline-offset:4px}button,input,select{font:inherit}button{background:var(--scbc-orange);color:var(--scbc-paper);border:1px solid var(--scbc-orange);border-radius:7px;padding:10px 18px;cursor:pointer}button:hover{background:var(--scbc-orange-hover)}button:disabled{opacity:.5;cursor:default}input,select{background:var(--scbc-paper);border:1px solid var(--scbc-input);border-radius:6px;padding:11px;color:var(--scbc-body-ink);max-width:100%}label{display:flex;flex-direction:column;gap:5px}h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.2;letter-spacing:-.035em}h2{font-size:1.3rem}main{max-width:1150px;margin:0 auto;padding:28px 28px 64px;min-height:80vh}.topbar{padding:19px 28px;background:var(--scbc-paper);border-bottom:1px solid var(--scbc-line);display:flex;gap:32px;align-items:center}.brand{font-size:1.3rem;font-weight:850;letter-spacing:.03em;text-decoration:none}.brand span{font-size:.75rem;display:block;letter-spacing:.18em}.topbar nav{display:flex;gap:24px;flex:1;flex-wrap:wrap}.topbar nav a{font-weight:600;text-decoration:none}.eyebrow{font-size:.75rem;letter-spacing:.16em;font-weight:750;color:var(--scbc-muted);margin-top:30px}.muted{color:var(--scbc-muted);font-size:.92rem}.notice{background:var(--scbc-cream);border:1px solid var(--scbc-line);padding:14px 18px;border-radius:8px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:var(--scbc-paper);border:1px solid var(--scbc-line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:13px;box-shadow:0 3px 12px #514c960a}.card h3{font-size:1.05rem;margin:0;line-height:1.5}.card p{margin:0}.card a{margin-top:auto;font-weight:700}.card .category{font-size:.76rem;font-weight:650;color:var(--scbc-indigo)}.card .video-mark{font-size:1.6rem;color:var(--scbc-indigo);background:var(--scbc-tint);width:48px;height:48px;border-radius:10px;text-align:center;padding:4px}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:32px 0 20px}#search{display:flex;gap:10px;align-items:end}#search label{font-size:.8rem}.pagination{display:flex;gap:20px;align-items:center;justify-content:center;margin:28px 0}.pagination button{background:var(--scbc-paper);color:var(--scbc-indigo);border-color:var(--scbc-line)}#login-panel{max-width:460px;margin:7vh auto;background:var(--scbc-paper);border:1px solid var(--scbc-line);padding:32px;border-radius:14px}#login{display:grid;gap:18px}#player-host{aspect-ratio:16/9;background:var(--scbc-indigo);border-radius:10px;overflow:hidden;margin-top:20px}#player-host iframe{width:100%;height:100%;border:0}#lesson>label{max-width:540px}#release-panel{margin-top:40px;border-top:1px solid var(--scbc-line);padding-top:20px}fieldset{border:1px solid var(--scbc-input);border-radius:8px;margin-bottom:18px}#release-groups{display:flex;gap:20px;flex-wrap:wrap;padding:15px}#release-groups label{flex-direction:row;align-items:center}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--scbc-paper)}th,td{text-align:left;border-bottom:1px solid var(--scbc-line);padding:15px}th{background:var(--scbc-tint)}#message:not(:empty){padding:14px;background:var(--scbc-cream);border-radius:7px}footer{text-align:center;padding:24px;color:var(--scbc-muted);font-size:.85rem}:focus-visible{outline:3px solid var(--scbc-focus);outline-offset:3px}@media(max-width:800px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{gap:16px;flex-wrap:wrap}.topbar nav{order:3;flex-basis:100%}.section-heading{align-items:stretch;flex-direction:column}}@media(max-width:520px){main{padding:18px 16px 40px}.cards{grid-template-columns:1fr}.topbar{padding:15px 16px}.topbar button{margin-left:auto}.topbar nav{gap:17px;font-size:.9rem}#search input{min-width:0;width:100%}#search label{flex:1}#login-panel{padding:22px;margin:20px auto}h1{font-size:1.9rem}.pagination{gap:10px}.pagination button{padding:9px}}

.study-clock{margin-top:20px;padding:24px 28px;border-radius:16px;background:var(--scbc-indigo);color:var(--scbc-on-indigo);display:flex;justify-content:space-between;align-items:center;gap:24px}.study-clock[hidden]{display:none}.clock-label{font-size:12px;letter-spacing:.12em;margin:0 0 8px}.clock-digits{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:clamp(36px,7vw,64px);font-weight:700;letter-spacing:.04em;color:var(--scbc-on-indigo)}.clock-units{font-size:11px;letter-spacing:.16em;color:var(--scbc-on-indigo-muted)}.clock-details{max-width:330px}.clock-details p{display:flex;justify-content:space-between;gap:28px}.clock-details strong{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.clock-details small{color:var(--scbc-on-indigo-muted);line-height:1.6}@media(max-width:600px){.study-clock{align-items:flex-start;flex-direction:column;padding:20px}.clock-details{width:100%;max-width:none}}

@media screen{
 /* Fill short pages; keep the footer in normal flow for long lessons. */
 body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
 body>main{flex:1 0 auto;width:100%;min-height:0}
 body>.topbar,body>footer{flex-shrink:0}
/* Keep anonymous learning pages focused on sign-in, including expired sessions. */
body.student-login-page>main{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 16px}
body.student-login-page>footer{padding:16px}
.student-login-page #login-panel{width:100%;margin:0}
.student-login-page #login-panel>h1{font-size:clamp(1.8rem,4vw,2rem);margin:16px 0}
.student-login-page #login-panel>.eyebrow{margin:16px 0 12px}
.student-login-page #login-panel>p{margin:12px 0}
.student-login-page #message{width:100%;max-width:460px}
.student-login-page #message:empty{display:none}
.login-language-slot .scbc-language-bar{padding:0;background:transparent}
.login-language-slot .scbc-language>span{display:none}
 h1,h2,h3{color:var(--scbc-indigo)}
 a:hover{color:var(--scbc-indigo-hover)}
 .pagination button:hover{background-color:var(--scbc-tint)}
 footer{background-color:var(--scbc-footer);color:var(--scbc-on-indigo)}
 .study-clock :focus-visible{outline-color:var(--scbc-focus-dark)}
}
/* Student library: neutral reading surface, orange learning actions. */
#welcome,#lesson-title,.card h3{color:var(--scbc-ink)}
.card{padding:0;gap:0;overflow:hidden;box-shadow:0 2px 8px #17141708}
.lesson-art{aspect-ratio:16/9;background:var(--scbc-tint);position:relative;display:grid;place-items:center;overflow:hidden}
.art-play{font-size:3rem;color:var(--scbc-indigo);line-height:1}
.lesson-art img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.lesson-card-content{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.card .category{color:var(--scbc-muted);font-weight:500;font-size:.78rem}
.card h3{overflow-wrap:anywhere}
.card a{align-self:flex-start;color:var(--scbc-orange);text-decoration:none}
.card a:hover{color:var(--scbc-orange-hover);text-decoration:underline}
.featured-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background:#fff;border-color:#ffc9d6}
.featured-card .lesson-art{aspect-ratio:auto;min-width:0;width:100%;height:100%;min-height:230px}
.featured-card .lesson-card-content{padding:28px}
.featured-card h3{font-size:1.35rem;line-height:1.4}
.resume-kicker{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--scbc-orange)}
.featured-card a{background:var(--scbc-orange);color:var(--scbc-paper);border-radius:7px;padding:12px 20px;min-height:44px}
.featured-card a:hover{background:var(--scbc-orange-hover);color:var(--scbc-paper);text-decoration:none}
.weekly-summary{border-block:1px solid var(--scbc-line);padding:20px 0;margin:28px 0 34px}
.weekly-summary .eyebrow{margin:0;color:var(--scbc-muted)}
.weekly-summary dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0 0}
.weekly-summary dt{color:var(--scbc-muted);font-size:.85rem}
.weekly-summary dd{margin:6px 0 0;font-size:clamp(1rem,2vw,1.5rem);font-weight:700;color:var(--scbc-ink);font-variant-numeric:tabular-nums}
.library-filter-label{max-width:240px;margin:0 0 22px;font-size:.85rem}
@media(max-width:700px){.featured-card{grid-template-columns:1fr}.featured-card .lesson-art{aspect-ratio:16/9;min-height:0;height:auto}.featured-card .lesson-card-content{padding:22px}.weekly-summary dl{gap:12px}.weekly-summary dd{font-size:1rem}}

.history-detail>td{background:var(--scbc-tint);padding:20px}.history-detail caption{text-align:left;padding:0 0 12px;font-weight:600}.history-detail table{font-size:.9rem}.history-detail .pagination{margin:16px 0 0}#log-rows>tr:not(.history-detail)>td:first-child{font-weight:600;color:var(--scbc-ink)}
.history-lesson-link{display:flex;align-items:center;gap:16px;min-height:44px;text-decoration:none}.history-lesson-link:hover{color:var(--scbc-orange)}
.history-lesson-link .lesson-art{width:136px;flex:0 0 136px;border-radius:8px}.history-lesson-link .art-play{font-size:2rem}.history-lesson-link>span{overflow-wrap:anywhere}
@media(max-width:700px){
 #log> .table-wrap>table>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #log-rows .history-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--scbc-line);gap:12px}
 #log-rows .history-summary>td{border:0;padding:0;min-width:0}
 #log-rows .history-summary>td:first-child{grid-column:1/-1}
 #log-rows .history-summary>td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;color:var(--scbc-muted);margin-bottom:4px}
 #log-rows .history-summary>td:last-child{grid-column:1/-1}
 #log-rows .history-detail{display:block}#log-rows .history-detail>td{display:block;padding:12px}
 .history-lesson-link{gap:12px}.history-lesson-link .lesson-art{width:104px;flex-basis:104px}
}