/* G2G design system. Shared visual rules live here; operational settings in enhancements.css. */
/* Published student results; shared tokens and controls, no grading-rule overrides. */
.result-page{padding-bottom:32px}
.result-page [hidden]{display:none!important}
.result-back{margin-bottom:16px}
.result-page .the{margin:0;padding:24px}
.result-page .result-hero{border-top:3px solid var(--brand-primary)}
.result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.result-heading>div:first-child{min-width:0}
.result-identity{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.result-avatar{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;border-radius:20px;background:var(--brand-soft);color:var(--brand-text);font-size:22px;font-weight:500;overflow:hidden}
.result-avatar img{width:100%;height:100%;object-fit:cover}
.result-name{display:flex;gap:8px;align-items:center}
.result-name h1{font-size:clamp(20px,2.5vw,28px);margin:0;overflow-wrap:anywhere}
.result-name .icon-btn{flex-shrink:0}
.result-provider{color:var(--phu);font-size:12px;letter-spacing:.07em}
.result-heading h2{margin:6px 0;font-size:22px;overflow-wrap:anywhere}
.result-heading p{margin:0}
.result-outcome{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-radius:20px;background:var(--surface-muted);color:var(--phu);padding:20px 24px;min-width:144px;max-width:240px;text-align:center}
.result-outcome strong{font-size:clamp(20px,2.8vw,32px);font-weight:500;line-height:1.25}
.result-outcome.passed{background:color-mix(in srgb,var(--xanh) 9%,var(--mat));color:var(--xanh)}
.result-outcome.failed{background:color-mix(in srgb,var(--do) 8%,var(--mat));color:var(--do)}
.result-stats{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid var(--vien)}
.result-stats>div{display:flex;flex-direction:column;min-width:0;gap:4px}
.result-stats>div+div{border-left:1px solid var(--vien);padding-left:20px}
.result-stats strong{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}
.result-stats small,.result-bar-label small{font-size:14px;color:var(--phu);font-weight:400}
.result-stats span{font-size:13px;color:var(--phu)}
.result-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;background:var(--mat);border:1px solid var(--vien);border-radius:var(--pill);width:fit-content;max-width:100%;margin:24px 0 20px}
.result-tabs .nut{border-color:transparent}
@media(max-width:700px){
  .result-page>.result-tabs{flex-wrap:nowrap;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:6px}
  .result-page>.result-tabs .nut{flex:0 0 auto;white-space:nowrap;padding-inline:14px;min-height:44px}
}
.result-tabs [aria-selected=true],.result-filter [aria-pressed=true]{background:var(--brand-primary);color:var(--brand-on-primary);border-color:var(--brand-primary)}
.result-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:stretch}
.result-columns>*{min-width:0}
.result-page h2{font-size:22px;font-weight:500}
.result-columns h2{margin:0 0 24px}
.result-bar{margin-bottom:20px}
.result-bar-label,.result-pass-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-bar-label{margin-bottom:8px}
.result-bar-label strong{font-weight:500;font-variant-numeric:tabular-nums}
.result-track{height:9px;border-radius:var(--pill);background:var(--surface-muted);overflow:hidden}
.result-track>span{display:block;height:100%;border-radius:inherit;background:var(--brand-primary)}
.result-bar-score{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.result-bar-score strong{white-space:nowrap}
.result-bar-score .score-badge{margin:0;white-space:nowrap}
.result-track--excellent>span{background:var(--score-excellent)}
.result-track--good>span{background:var(--score-good)}
.result-track--satisfactory>span{background:var(--score-satisfactory)}
.result-track--sufficient>span{background:var(--score-sufficient)}
.result-track--failed>span{background:var(--score-failed)}
.result-pass-row{border-top:1px solid var(--vien);padding-top:16px;margin-top:16px;font-size:14px;flex-wrap:wrap}
.result-donut{width:156px;height:156px;margin:8px auto 24px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--xanh) 0 var(--correct-angle),var(--do) var(--correct-angle) var(--wrong-angle),var(--vien) var(--wrong-angle) 360deg)}
.result-donut>div{width:124px;height:124px;border-radius:50%;background:var(--mat);display:flex;align-items:center;justify-content:center;flex-direction:column}
.result-donut strong{font-size:30px;font-weight:500}
.result-donut span{font-size:12px;color:var(--phu)}
.result-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--phu)}
.result-correct{color:var(--xanh)}
.result-wrong{color:var(--do)}
.result-blank{color:var(--phu)}
.result-feedback{margin-top:24px;border-top:1px solid var(--vien);padding-top:20px}
.result-reviewer{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--phu)}
.result-feedback h3{font-size:15px;margin:0 0 8px}
.result-feedback p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.result-filter{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.result-part{margin-top:24px}
.result-part h3{font-size:17px;font-weight:500}
.result-question{border-top:1px solid var(--vien);padding:20px 0}
.result-question-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.result-question-heading strong{font-weight:500;overflow-wrap:anywhere}
.result-question-heading>span{flex-shrink:0;font-size:13px}
.result-answer{padding:12px 16px;background:var(--surface-muted);border-radius:var(--r-sm);margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.result-answer>span{font-size:12px}
.result-answer--correct{background:color-mix(in srgb,var(--xanh) 7%,var(--mat));color:var(--xanh)}
.result-answer-image{display:block;max-width:min(100%,360px);height:auto;margin-top:8px}
@media(max-width:700px){.result-columns{grid-template-columns:1fr}.result-page .the{padding:20px}.result-heading{gap:12px}.result-avatar{width:48px;height:48px;border-radius:16px;font-size:18px}.result-identity{gap:10px}.result-outcome{padding:14px;min-width:100px;max-width:140px}.result-stats{grid-template-columns:repeat(3,1fr);gap:20px 12px}.result-stats>div+div{border:0;padding:0}.result-stats strong{font-size:26px}.result-tabs{border-radius:24px}.result-name{gap:2px}.result-heading h2{font-size:20px}.result-question-heading{flex-wrap:wrap}}
@media(max-width:420px){.result-stats{grid-template-columns:repeat(2,1fr)}.result-identity{align-items:flex-start;flex-direction:column}.result-name h1{font-size:19px}.result-outcome{min-width:90px;max-width:110px;padding:12px}.result-name{flex-wrap:wrap}}
:root {
  --brand-primary:#111827;
  --brand-on-primary:#fff;
  --brand-text:#111827;
  --brand-soft:#f0f1f3;
  --brand-border:#c5c8cf;
  --button-secondary:#fff;
  --button-secondary-text:#101318;
  --button-secondary-border:#e4e6e9;
  --button-secondary-hover:#f3f4f5;
  --nen:#f4f5f6;
  --mat:#fff;
  --chu:#101318;
  --phu:#626870;
  --mo:var(--phu);
  --vien:#e4e6e9;
  --surface-muted:#f3f4f5;
  --example-bg:#f2f6fa;
  --example-border:#cbd8e4;
  --example-text:#40566b;
  --tim:var(--brand-primary);
  --tim-nhat:var(--brand-soft);
  --xanh:#087a56;
  --vang:#996000;
  --do:#b42318;
  --r:24px;
  --r-sm:12px;
  --pill:999px;
  --control-height:44px;
  --control-height-sm:40px;
  --editor-control:40px;
  --control-font-size:14px;
  --control-line-height:1.5;
  --editor-gap:12px;
  --control-pad-x:14px;
  --control-border:var(--vien);
  --control-border-hover:#c9cdd3;
  --card-padding:24px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --motion-fast:140ms ease;
  --max:1600px;
  --shadow:0 20px 64px rgba(16,24,40,.14);
  --font-ui:"Google Sans Flex","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
* { box-sizing:border-box; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.navigation-arrow.navigation-arrow { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:80px; min-height:44px; padding:10px 16px; }
.text-link.navigation-arrow { width:auto; min-width:0; padding-inline:0; }
/* Site-wide dropdown shape, including compact and feature-specific controls. */
select:not([multiple]), .inline-gap-trigger { border-radius:var(--pill)!important; }
html { background:var(--nen); color-scheme:light; }
body { margin:0; color:var(--chu); background:var(--nen); font:400 15px/1.5 var(--font-ui); font-optical-sizing:auto; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
input[type=checkbox],input[type=radio] { accent-color:var(--brand-primary); }
button:disabled,input:disabled,select:disabled,textarea:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--brand-text); outline-offset:3px;
}
b,strong { font-weight:600; }
h1,h2,h3 { font-weight:500; line-height:1.2; letter-spacing:-.035em; }
h1 { font-size:36px; } h2 { font-size:24px; } h3 { font-size:20px; }
.an { display:none!important; }
#app { width:min(calc(var(--max) + 64px),100%); min-height:100dvh; margin:0 auto; padding:24px 32px 0; }
.ui-icon { display:block; flex:none; width:20px; height:20px; }
.instruction-token { display:inline; padding:0 6px; border:1px solid var(--phu); border-radius:0; font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.text-headline,.exam-instruction .text-headline { display:block; margin:12px 0; color:inherit; font-family:inherit; font-size:clamp(24px,2.2vw,28px); font-style:normal; font-weight:500; line-height:1.3; letter-spacing:normal; overflow-wrap:anywhere; }
.text-signature,.exam-instruction .text-signature { display:inline; margin:0; color:inherit; font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Segoe Print",cursive; font-size:clamp(28px,2.5vw,36px); font-style:normal; font-weight:400; line-height:1.5; letter-spacing:normal; overflow-wrap:anywhere; }

/* Shared navigation: centered pills, utility controls on the right. */
.thanh-dau { display:flex; align-items:center; gap:24px; min-height:80px; padding:12px 16px; background:var(--mat); border:1px solid var(--vien); border-radius:20px; }
.thuong-hieu { display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:0; }
.logo { display:grid; place-items:center; width:48px; height:48px; background:transparent; border-radius:14px; color:var(--chu); font-size:16px; letter-spacing:-.06em; font-weight:700; }
.ten-he-thong { min-width:0; }.ten-he-thong strong { display:block; font-size:16px; font-weight:550; }.ten-he-thong small { display:block; color:var(--phu); font-size:12px; }
.thanh-ben,.site-nav { display:flex; align-items:center; justify-content:center; flex:1; gap:6px; min-width:0; }
.muc-ben { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 16px; white-space:nowrap; border:1px solid transparent; border-radius:var(--pill); background:var(--surface-muted); font-size:14px; font-weight:500; }
.muc-ben .ui-icon { width:17px; height:17px; }
.muc-ben--icon { width:44px; padding:10px; flex:none; }
.muc-ben:hover { background:var(--brand-soft); }
.muc-ben.active { background:var(--brand-primary); color:var(--brand-on-primary); }
.header-account { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.account-switch { position:relative; }.account-avatar { display:grid; place-items:center; width:40px; height:40px; padding:0; overflow:hidden; border:0; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); font-size:13px; font-weight:600; cursor:pointer; }.account-avatar img { width:100%; height:100%; object-fit:cover; }.account-role-menu { position:absolute; z-index:30; top:calc(100% + 10px); right:0; display:grid; width:58px; padding:6px; border:1px solid var(--vien); border-radius:16px; background:var(--mat); box-shadow:var(--shadow); }.account-role-menu[hidden] { display:none; }.account-role-menu button { display:grid; place-items:center; min-height:42px; padding:8px; border:0; border-radius:10px; background:transparent; text-align:center; font-weight:650; cursor:pointer; }.account-role-menu button:hover { background:var(--surface-muted); }
.account-role-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-width:58px; min-height:44px; padding:0 12px; border:1px solid var(--vien); border-radius:var(--pill); background:var(--surface-muted); color:var(--chu); font:650 14px/1 var(--font-ui); cursor:pointer; white-space:nowrap; }
.account-role-trigger .ui-icon { width:16px; height:16px; stroke:var(--phu); transition:transform var(--motion-fast); }
.account-role-trigger[aria-expanded="true"] .ui-icon { transform:rotate(180deg); }
.account-role-trigger:hover,.account-role-trigger[aria-expanded="true"] { background:var(--brand-soft); }
.account-role-menu button[aria-current="true"] { background:var(--brand-soft); color:var(--brand-text); font-weight:600; }
.header-account { position:relative; }
.header-account .account-avatar { position:relative; overflow:visible; }
.header-account .account-avatar img { border-radius:50%; }
.account-role-indicator { position:absolute; top:-3px; left:-3px; z-index:1; display:grid; place-items:center; width:18px; height:18px; border:2px solid var(--mat); border-radius:50%; background:var(--mat); pointer-events:none; }
.account-role-indicator svg { width:14px; height:14px; }
.account-role-indicator[data-role="master"] { color:#7c3aed; }
.account-role-indicator[data-role="teacher"] { color:#2563eb; }
.account-role-indicator[data-role="student"] { color:#15803d; }
.header-account .account-role-menu { width:180px; max-width:calc(100vw - 32px); }
.header-account .account-role-menu button { display:flex; align-items:center; justify-content:flex-start; gap:12px; text-align:left; padding:10px 14px; font-weight:500; min-height:44px; }
.header-account .account-role-menu button:last-child { border-top:1px solid var(--vien); border-radius:0 0 10px 10px; }
.header-logout { border:0!important; background:var(--surface-muted)!important; }
.khung,.khung-quan-tri { width:min(var(--max),100%); margin:0 auto; padding:36px 0 48px; }
.noi-dung-quan-tri { min-width:0; }
.tieu-de-trang { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.tieu-de-trang>div:first-child { min-width:0; flex:1; }
.tieu-de-trang h1 { margin:0; font-size:clamp(28px,2.8vw,40px); font-weight:450; line-height:1.2; letter-spacing:-.04em; overflow-wrap:anywhere; }
.tieu-de-trang p { margin:8px 0 0; color:var(--phu); font-size:14px; line-height:1.5; max-width:72ch; }
.nhom-nut { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nut { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); border:1px solid var(--button-secondary-border); background:var(--button-secondary); color:var(--button-secondary-text); border-radius:var(--pill); padding:8px 18px; min-height:var(--control-height); font-size:var(--control-font-size); line-height:var(--control-line-height); font-weight:500; text-decoration:none; touch-action:manipulation; transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast); }
.nut:hover:not(:disabled) { background:var(--button-secondary-hover); }
.text-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 0; border:0; border-radius:4px; background:transparent; color:var(--phu); font:500 13px var(--font-ui); text-decoration:none; white-space:nowrap; }.text-link:hover { color:var(--chu); text-decoration:underline; text-underline-offset:4px; }
.nut.chinh { background:var(--brand-primary); color:var(--brand-on-primary); border-color:var(--brand-primary); }
.nut.chinh:hover:not(:disabled) { background:var(--brand-hover,var(--brand-primary)); }
.nut.nguy { color:var(--do); }.nut.nho { min-height:var(--control-height-sm); padding:8px 13px; font-size:var(--control-font-size); }.nut.full { width:100%; }
.icon-btn,.gear { display:grid; place-items:center; flex:none; width:var(--editor-control); height:var(--editor-control); padding:0; border:1px solid var(--control-border); border-radius:50%; background:var(--mat); color:var(--phu); transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast); }
.icon-btn:hover:not(:disabled),.gear:hover { background:var(--surface-muted); color:var(--chu); }
.result-name .icon-btn,.learner-name .icon-btn { width:20px;height:20px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent; }
.result-name .icon-btn:hover:not(:disabled),.learner-name .icon-btn:hover:not(:disabled) { background:transparent;color:var(--chu); }
.result-name .icon-btn svg,.learner-name .icon-btn svg { width:16px;height:16px; }
.nhan { display:inline-flex; align-items:center; align-self:flex-start; border-radius:var(--pill); padding:5px 10px; background:var(--brand-soft); color:var(--brand-text); font-size:12px; font-weight:500; white-space:nowrap; }
.nhan.vang { background:#fff5df; color:var(--vang); }.nhan.xanh { background:#e9f6ef; color:var(--xanh); }.nhan.xam { background:var(--surface-muted); color:var(--phu); }.nhan.do { background:#fff0ee; color:var(--do); }
.nhan-muc,.preview-eyebrow { font-size:11px; font-weight:600; letter-spacing:.07em; color:var(--phu); text-transform:uppercase; }
.phu-de,.tien-do { color:var(--phu); font-size:13px; }.dat { color:var(--xanh); }

/* Flat surfaces: depth comes from spacing, not a shadow around every control. */
.the,.thong-ke,.cot-xay,.goethe-outline,.goethe-editor,.ds-cham,.phieu-cham {
  background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); padding:var(--card-padding);
}
.the.nen-nhat { background:var(--surface-muted); }
.hang-thong-ke { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.thong-ke span { color:var(--phu); font-size:13px; }.thong-ke b { display:block; font-size:36px; line-height:1.2; font-weight:450; letter-spacing:-.04em; margin-top:14px; }
.tong-quan-hv { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:24px; align-items:center; }
.tong-quan-hv .o span { color:var(--phu); font-size:13px; }.tong-quan-hv .o b { display:block; margin-top:8px; font-size:28px; font-weight:500; }.tong-quan-hv .o:first-child b { font-size:20px; }
.danh-sach-de { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.the-de { position:relative; display:flex; flex-direction:column; min-width:0; }
.exam-card-details { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:16px; }
.exam-card-tags { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.exam-card-tags .nhan { background:#f0f1f3; color:#48515e; }
.exam-provider[data-provider="GOETHE"] { background:#eaf4ed; color:#27633e; }
.exam-provider[data-provider="TELC"] { background:#eaf0fc; color:#31569b; }
.exam-provider[data-provider="FID"] { background:#f4ecfa; color:#75418f; }
.exam-level[data-level="A1"] { background:#fff3d6; color:#795400; }
.exam-level[data-level="A2"] { background:#ffeadc; color:#914615; }
.exam-level[data-level="B1"] { background:#e4f4f4; color:#216568; }
.exam-level[data-level="B2"] { background:#ece9fa; color:#5c4595; }
.exam-level[data-level="C1"] { background:#f9e7ef; color:#963c65; }
.exam-level[data-level="C2"] { background:#e7edf4; color:#405675; }
.the-de-new { position:absolute; top:var(--card-padding); right:var(--card-padding); display:inline-flex; align-items:center; min-height:26px; padding:4px 10px; border-radius:var(--pill); background:var(--brand-soft); color:var(--brand-text); font-size:12px; font-weight:600; line-height:1; }
.the-de h3 { font-size:20px; line-height:1.4; height:2.8em; flex-shrink:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0 0 12px; font-weight:500; overflow-wrap:anywhere; }
.the-de:has(.the-de-new) h3 { padding-right:48px; }
.the-de .meta { font-size:13px; color:var(--phu); line-height:1.5; white-space:nowrap; }
.exam-card-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; margin-top:auto; }
.exam-card-status { flex:0 0 100%; min-width:0; font-size:13px; line-height:1.5; color:var(--phu); }
.exam-card-footer>.nut { min-height:44px; white-space:normal; text-align:center; }
.exam-transition { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; overflow:hidden; isolation:isolate; opacity:1; transition:opacity 500ms ease; }
.exam-transition::before { content:''; position:absolute; inset:0; background:#fff; animation:exam-white-fill 1100ms cubic-bezier(.45,0,.25,1) both; }
.exam-transition-center { position:absolute; left:var(--transition-center-x); top:calc(var(--transition-center-y) - 38px); width:min(360px,100%); transform:translateX(-50%); z-index:2; display:grid; grid-template-rows:48px auto; justify-items:center; gap:8px; animation:exam-caption-fade 400ms 1000ms ease both; }
.exam-transition-logo { display:block; width:48px; height:48px; object-fit:contain; border-radius:12px; }
.exam-transition p { margin:0; width:100%; box-sizing:border-box; padding:0 20px; text-align:center; overflow-wrap:anywhere; font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; font-weight:400; -webkit-font-smoothing:antialiased; line-height:20px; color:var(--phu); letter-spacing:.04em; }
.exam-transition-waves { position:absolute; inset:0; z-index:1; pointer-events:none; }
.exam-transition-waves i { position:absolute; left:var(--reveal-x); top:var(--reveal-y); width:calc(var(--reveal-radius) * 2); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,transparent 8%,var(--wave-color,var(--brand-primary)) 30%,var(--wave-color,var(--brand-primary)) 66%,transparent 96%); animation:exam-power-wave 1500ms cubic-bezier(.22,.61,.36,1) both; }
.exam-transition.is-leaving { opacity:0; }
@keyframes exam-white-fill { from { opacity:0; } to { opacity:1; } }
@keyframes exam-power-wave { 0% { transform:translate(-50%,-50%) scale(.04); opacity:0; } 15% { opacity:.35; } 60% { opacity:.18; } 100% { transform:translate(-50%,-50%) scale(1.4); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .exam-transition-waves { display:none; } }
@keyframes exam-caption-fade { from { opacity:0; } to { opacity:1; } }
.exam-card-footer>.nut .ui-icon { flex-shrink:0; width:18px; height:18px; }
.exam-card-status strong { color:var(--chu); font-weight:600; }.exam-latest-result { font-weight:600; }.exam-latest-result.failed { color:#c83b3b; }.exam-latest-result.passed { color:#218a58; }
.table-wrap { overflow:auto; background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); }
.profile-form { display:grid; gap:16px; }.profile-form label { display:grid; gap:8px; }.profile-form [data-error] { color:#b42318; margin:0; }
.account-profile-form { gap:20px; }
.account-profile-field { min-width:0; }
.account-profile-form .account-profile-hint { margin:8px 0 0; color:var(--phu); font-size:13px; line-height:1.5; }
.account-profile-form label { grid-template-columns:1fr auto; align-items:baseline; }
.account-profile-form label input { grid-column:1 / -1; width:100%; }
.account-profile-optional { color:var(--phu); font-size:12px; font-weight:400; }
.account-profile-form [data-error]:empty { display:none; }
.grade-filters { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px; }.grade-filters label { display:grid; gap:8px; flex:1 1 150px; color:var(--phu); font-size:13px; }.grade-filters select { width:100%; }
@media(max-width:760px) {
  .grade-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:12px; }
  .grade-filters label { min-width:0; }
}
.score-badge { position:relative; display:inline-flex; padding:4px 10px; border-radius:var(--pill); white-space:nowrap; font-weight:500; }
:root { --score-excellent:#145c37;--score-good:#244d81;--score-satisfactory:#735700;--score-sufficient:#43515a;--score-failed:#9b2720; }
.score-excellent { background:#c5ebd7; color:var(--score-excellent); }.score-good { background:#c9daf8; color:var(--score-good); }.score-satisfactory { background:#fff2cc; color:var(--score-satisfactory); }.score-sufficient { background:#eef1f3; color:var(--score-sufficient); }.score-failed { background:#f9d7d3; color:var(--score-failed); }
.score-tooltip { position:absolute; z-index:2; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:5px 10px; border-radius:var(--pill); background:inherit; color:inherit; font-size:12px; font-weight:400; pointer-events:none; opacity:0; }
.gradebook-table td { padding-top:38px; }
.gradebook-table .attempt-meta { white-space:nowrap; }
.grading-score-row>div { display:flex; align-items:center; gap:8px; }
.score-badge:hover .score-tooltip,.score-badge:focus .score-tooltip { opacity:1; }
.bang { width:100%; border-collapse:collapse; min-width:760px; }
.bang th,.bang td { text-align:left; padding:18px 20px; border-bottom:1px solid var(--vien); font-size:14px; vertical-align:middle; }
.bang th { font-size:12px; font-weight:500; color:var(--phu); background:#fafafa; }.bang tbody tr:hover { background:#fcfcfd; }.bang tr:last-child td { border-bottom:0; }
.bang .phu { display:block; color:var(--phu); font-size:12px; margin-top:4px; }.bang td b { font-weight:550; overflow-wrap:anywhere; }
.hanh-dong-bang { display:flex; gap:6px; flex-wrap:wrap; min-width:max-content; }.bang td:last-child,.bang th:last-child { white-space:nowrap; }
.table-link { padding:0; border:0; background:none; color:var(--chu); font:600 14px/1.45 var(--font-ui); text-align:left; cursor:pointer; }.table-link:hover { color:var(--brand-text); }.table-link:focus-visible { outline:2px solid var(--brand-ring); outline-offset:3px; border-radius:4px; }

/* Shared forms and dialogs. Inner score/file controls are deliberately excluded. */
.truong,.cai-dat input:not([type=checkbox]):not([type=radio]):not([type=file]),.cai-dat select,.cai-dat textarea,
.exam-setup-grid input:not([type=checkbox]):not([type=radio]),.exam-setup-grid select,
.profile-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.profile-form select,.profile-form textarea,
.grade-filters select,.exam-filter select,.access-code-create input,.exam-free-navigation select,
.question-profile-field select,.question-profile-field input,.dap-an,.viet,.nhan-xet,.tieu-chi input {
  min-width:0; min-height:var(--control-height); border:1px solid var(--control-border); border-radius:var(--r-sm); background:var(--mat); padding:10px var(--control-pad-x); font:400 var(--control-font-size)/var(--control-line-height) var(--font-ui);
}
.truong { height:var(--control-height); }.truong.tim { min-width:220px; flex:1; }
/* Keep editable controls readable before focus on touch devices, including
   landscape phones and dialogs. Preserve user-controlled viewport zoom. */
@media (any-pointer:coarse) {
  :root { --control-font-size:16px; --control-height-sm:44px; --editor-control:44px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]),
  select, textarea, [contenteditable="true"], [contenteditable=""] {
    font-size:16px !important;
  }
}
.letter-builder-answer .truong { height:var(--editor-control); min-width:88px; flex:none; }
.part-display-setting { display:grid; gap:8px; font-size:13px; color:var(--phu); margin-bottom:16px; max-width:260px; }
.part-display-setting .truong { width:100%; min-width:0; height:var(--editor-control); }
.goethe-instruction-icons .instruction-image-width { flex:1; width:0; min-width:0; height:var(--editor-control); padding:8px; font-size:var(--control-font-size); }
.goethe-instruction-icons:has(.instruction-image-width) .icon-btn { flex:none; }
.goethe-instruction--media[data-section-image-control] .goethe-instruction-actions { grid-template-columns:minmax(0,1fr); }
input::placeholder,textarea::placeholder { color:#777d85; opacity:1; }
.bo-loc { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.cai-dat label { display:block; font-size:13px; color:var(--phu); font-weight:500; margin:16px 0 7px; }.cai-dat input,.cai-dat select,.cai-dat textarea { width:100%; }
.cai-dat textarea { min-height:96px; resize:vertical; }.check { display:flex!important; align-items:center; gap:8px!important; font-weight:400!important; color:var(--chu)!important; }.check input { width:auto!important; }
.hop-chon { position:fixed; inset:0; background:rgba(16,20,27,.32); display:grid; place-items:center; padding:24px; z-index:80; }
.noi-hop { position:relative; width:min(980px,100%); max-height:92dvh; overflow:auto; background:var(--mat); border-radius:28px; padding:32px; box-shadow:var(--shadow); }
.noi-hop.noi-hop--compact { width:min(500px,100%); }
.site-confirm-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(16,20,27,.36); }
.site-confirm { width:min(420px,100%); padding:28px; border:1px solid var(--vien); border-radius:20px; background:var(--mat); box-shadow:var(--shadow); }
.site-confirm p { margin:0; color:var(--chu); font-size:16px; line-height:1.55; }
.site-confirm-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:10px; margin-top:24px; }
.site-confirm-actions > .nut { width:100%; min-width:0; padding:10px 12px; }
.site-confirm-actions > .nut > span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:480px) {
  .site-confirm { padding:24px 18px; }
  .site-confirm-actions > .nut { gap:6px; padding-inline:8px; }
  .site-confirm-actions .ui-icon { width:18px; height:18px; }
}
.site-confirm-danger { background:var(--do)!important; color:#fff!important; }
.site-confirm-extra { display:flex; align-items:center; justify-content:center; width:fit-content; min-height:44px; margin:12px auto -8px; padding:8px 12px; color:#767676; font-weight:400; }
.site-confirm-extra:hover:not(:disabled) { color:var(--phu); }
.dau-hop { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.dau-hop h2 { margin:8px 0 0; font-size:28px; font-weight:500; }
.dau-hop:has(>button) { padding-right:40px; }
.dau-hop>button { position:absolute; top:8px; right:8px; width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; font-size:22px; }
.luoi-chon { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.dong-chon { border:1px solid var(--vien); border-radius:var(--r-sm); padding:16px; display:flex; gap:10px; align-items:flex-start; }.dong-chon input { margin-top:4px; }
.chan-hop { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-top:28px; flex-wrap:wrap; }.chan-hop>.phu-de { flex:1; min-width:160px; }
.question-profile-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.question-profile-field { display:grid; gap:8px; font-size:13px; font-weight:500; }
.exam-setup { width:min(620px,100%); }.exam-setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }.exam-setup-grid label { display:grid; gap:8px; font-size:14px; font-weight:500; }.exam-setup-name { grid-column:1/-1; }
.exam-setup-grid input,.exam-setup-grid select,.question-profile-field input,.question-profile-field select { width:100%; }
.noi-hop.skill-settings-dialog { width:min(440px,100%); padding:24px; border-radius:var(--r); }
.skill-settings-dialog .dau-hop h2 { margin:0; font-size:24px; }
.skill-settings-dialog .skill-time-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; margin-top:24px; gap:16px; }
.skill-settings-dialog .skill-time-row>label { font-weight:400; }
.skill-time-control { display:flex; align-items:center; gap:8px; }
.skill-settings-dialog .skill-time-control input { width:80px; text-align:center; font-variant-numeric:tabular-nums; }
.skill-time-control>span { color:var(--phu); font-size:13px; }
.skill-settings-dialog .chan-hop { margin-top:20px; }
.skill-settings-dialog .chan-hop .nut { min-width:80px; }
.audio-flow-settings { margin-top:20px; border-top:1px solid var(--vien); padding-top:12px; }
.audio-flow-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.audio-flow-row>span { min-width:0; overflow-wrap:anywhere; }
.audio-flow-row>button { flex:none; min-width:120px; min-height:44px; font-weight:400; }
.audio-flow-toggle[aria-pressed="true"] { background:var(--brand-soft); color:var(--brand-text); border-color:var(--brand-border); }
.choice-field { display:grid; gap:8px; font-size:14px; font-weight:500; }.choice-buttons { display:flex; gap:6px; flex-wrap:wrap; }.choice-buttons button { min-width:48px; min-height:44px; border:1px solid var(--vien); background:var(--mat); border-radius:var(--pill); padding:10px 14px; font-weight:500; }
.choice-buttons button.active { background:var(--brand-primary); border-color:var(--brand-primary); color:var(--brand-on-primary); }
#qType,label:has(+ #qType) { display:none; }
.goi-y { border:1px solid var(--vien); background:var(--surface-muted); border-radius:16px; padding:16px; font-size:13px; line-height:1.6; margin-top:16px; }

/* Builder keeps the approved two-row question/answers layout. */
.goethe-builder{width:min(var(--max),100%);margin:0 auto;padding:32px 0 48px;}
.exam-title-input { display:block; width:100%; min-width:0; resize:none; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; font:450 clamp(26px,2.5vw,36px)/1.25 var(--font-ui); letter-spacing:-.035em; color:var(--chu); border:0; border-radius:8px; background:transparent; padding:4px 0; }
.builder-heading { display:flex; align-items:flex-start; gap:20px; }.builder-meta { display:flex; align-items:center; gap:20px; }.builder-meta p { margin:0; }.builder-back { flex:none; margin:0; }.builder-back:hover { text-decoration:none; }.builder-title { min-width:0; flex:1; }.builder-save-status { color:var(--phu); font-size:12px; padding-right:8px; }.builder-save-status[data-state=error] { color:var(--do); }
.goethe-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.goethe-outline { display:flex; flex-direction:column; gap:28px; padding:22px; }
.goethe-skill { margin:0; }.goethe-skill>div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-bottom:12px; }.goethe-skill>div b { font-size:21px; font-weight:500; }
.goethe-skill>div>span { color:var(--phu); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }.gear { width:32px; height:32px; background:var(--surface-muted); border:0; }.gear .ui-icon { width:18px; height:18px; }
.goethe-part { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; border:1px solid transparent; background:var(--surface-muted); border-radius:var(--pill); padding:10px 14px; margin-bottom:8px; text-align:left; font-size:14px; font-weight:400; }.goethe-part:last-child { margin-bottom:0; }
.goethe-part:hover { background:var(--brand-soft); }.goethe-part.active { background:var(--brand-primary); color:var(--brand-on-primary); }.goethe-part small { color:inherit; font-size:12px; }
.goethe-editor { min-width:0; min-height:560px; padding:24px; }.part-editor { display:flex; flex-direction:column; gap:24px; }
.goethe-instruction textarea,.goethe-question-row>textarea,.goethe-free-response>textarea,.writing-form-row>input {
  width:100%; min-width:0; border:1px solid var(--control-border); border-radius:var(--r-sm); padding:10px var(--control-pad-x); background:var(--mat); font-size:var(--control-font-size); line-height:1.5;
}
.goethe-instruction textarea { display:block; height:80px; min-height:80px; resize:vertical; background:var(--surface-muted); }
.goethe-questions { display:flex; flex-direction:column; gap:24px; }.goethe-question { display:flex; flex-direction:column; gap:var(--editor-gap); width:100%; }
.goethe-question+.goethe-question,.part-question+.part-question { border-top:1px solid var(--vien); padding-top:24px; }
.goethe-question-row,.goethe-instruction--media,.goethe-instruction--with-audio,.goethe-free-response { display:grid; grid-template-columns:minmax(0,1fr) 224px; gap:var(--editor-gap); align-items:stretch; min-width:0; }
.goethe-question-row>textarea { height:100%; min-height:calc(var(--editor-control) * 2 + var(--editor-gap)); resize:vertical; }
.goethe-question-side { display:grid; grid-template-rows:var(--editor-control) auto; align-content:start; gap:var(--editor-gap); min-width:0; }
.goethe-score { display:grid; grid-template-columns:minmax(80px,1fr) repeat(3,var(--editor-control)); gap:8px; align-content:start; min-width:0; }
.goethe-free-response { grid-template-columns:minmax(0,1fr) 272px; }
.goethe-score>label:first-child,.writing-form-row>label { display:flex; align-items:center; justify-content:space-between; height:var(--editor-control); min-width:0; padding:0 var(--control-pad-x); border:1px solid var(--control-border); border-radius:var(--r-sm); background:var(--mat); font-size:var(--control-font-size); }
.goethe-score input[type=number],.writing-form-row>label input { width:48px; min-width:0; padding:0; border:0; background:transparent; font-size:var(--control-font-size); font-weight:500; }
.goethe-score input[type=number] { width:3ch; min-width:3ch; flex:none; appearance:textfield; -moz-appearance:textfield; }
.goethe-score input[type=number]::-webkit-inner-spin-button,.goethe-score input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.goethe-question-actions { display:contents; }.goethe-question-actions .icon-btn { width:var(--editor-control); height:var(--editor-control); }
.question-example-toggle.active { color:var(--example-text); border-color:var(--example-border); background:var(--example-bg); }.part-question.is-example { padding:18px; border:1px solid var(--example-border); border-radius:18px; background:var(--example-bg); }.is-disabled { opacity:.45; }
.audio-upload { display:flex; align-items:center; gap:8px; position:relative; height:var(--editor-control); min-width:0; padding:0 var(--control-pad-x); border:1px solid var(--control-border); border-radius:var(--r-sm); background:var(--mat); color:var(--phu); font-size:var(--control-font-size); overflow:hidden; }
.audio-file-select { position:relative; display:flex; align-items:center; min-width:0; height:100%; flex:1; cursor:pointer; }.audio-file-select span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audio-file-select input,.choice-image-upload input,.section-image-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.audio-preview { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:var(--surface-muted); padding:4px; flex:none; color:var(--brand-text); }.audio-preview .ui-icon { width:18px; height:18px; }.inline-audio-preview { display:none; }
.audio-upload>.ui-icon { width:18px; height:18px; flex:none; }.audio-stop-icon { display:block; width:10px; height:10px; border-radius:2px; background:currentColor; }
.goethe-answer-row { width:100%; }.goethe-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; margin:0; }
.goethe-choices label { display:flex; gap:8px; align-items:center; min-width:0; }.goethe-choices label>input[type=radio] { width:16px; height:16px; margin:0; flex:none; }.goethe-choices label b { font-size:var(--control-font-size); font-weight:500; }
.goethe-choices label>input:last-child { height:var(--editor-control); min-width:0; width:100%; border:1px solid var(--control-border); border-radius:var(--r-sm); padding:8px var(--control-pad-x); background:var(--mat); font-size:var(--control-font-size); }
.goethe-choices label:has(>input[type=radio]:checked)>input:last-child { border-color:var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 20%,var(--mat)); }
.goethe-choices--true-false { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-image-upload { display:grid; place-items:center; position:relative; width:var(--control-height-sm); height:var(--editor-control); flex:0 0 var(--control-height-sm); cursor:pointer; border:1px solid var(--control-border); border-radius:var(--r-sm); color:var(--phu); }
.choice-image-upload>.ui-icon { width:18px; height:18px; }.choice-uploaded-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:9px; }
.choice-image-tooltip { display:none; position:absolute; z-index:40; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:180px; height:132px; padding:6px; border:1px solid var(--vien); border-radius:12px; background:var(--mat); box-shadow:var(--shadow); pointer-events:none; }
.choice-image-tooltip img { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; }.choice-image-upload.has-image:hover .choice-image-tooltip,.choice-image-upload.has-image:focus-within .choice-image-tooltip { display:block; }
.goethe-instruction--media textarea { height:100%; min-height:calc(var(--editor-control) * 2 + var(--editor-gap)); }
.goethe-instruction-actions { display:grid; gap:var(--editor-gap); align-content:start; }.goethe-instruction-icons { display:flex; justify-content:flex-end; gap:8px; height:var(--editor-control); }
.section-image-upload { display:flex; align-items:center; justify-content:center; position:relative; height:var(--editor-control); min-width:0; border:1px solid var(--control-border); border-radius:var(--r-sm); padding:0 var(--control-pad-x); cursor:pointer; overflow:hidden; font-size:var(--control-font-size); }
.section-image-label { display:flex; gap:8px; align-items:center; justify-content:center; min-width:0; height:100%; }.section-image-label>img { width:14px; height:14px; object-fit:contain; }.section-image-label>img[alt="Hình ảnh đề bài"] { width:auto; max-width:100%; height:32px; border-radius:6px; }
/* Builder density belongs to the container, not to individual fields. */
.goethe-editor { --control-height:var(--editor-control); }
.goethe-editor :is(.truong,.nut,.audio-upload,.section-image-upload,.writing-form-row>input,.writing-form-row>select,.goethe-choices label>input:last-child) { min-height:var(--editor-control); }
.goethe-editor :is(input.truong,select.truong,.writing-form-row>input,.writing-form-row>select,.goethe-choices label>input:last-child) { padding-block:8px; }
.goethe-editor .nut:not(.chinh):not(.nguy):not(.active) { background:var(--mat); color:var(--chu); border-color:var(--control-border); }
.goethe-editor .nut:not(.chinh):not(.nguy):not(.active):hover:not(:disabled) { background:var(--surface-muted); border-color:var(--control-border-hover); }
.goethe-editor :is(.goethe-score>label,.writing-form-row>label):hover:not(:has(input:disabled)) { border-color:var(--control-border-hover); }
.goethe-editor :is(.goethe-score>label,.writing-form-row>label):focus-within { outline:2px solid var(--brand-text); outline-offset:3px; }
.question-image-upload .section-image-label>img { width:auto; max-width:100%; height:32px; border-radius:6px; object-fit:contain; }
.writing-form { display:grid; gap:12px; width:100%; }.writing-form--framed { padding:20px; border:1px solid var(--vien); border-radius:20px; background:var(--mat); }.writing-form-row { display:grid; grid-template-columns:150px minmax(110px,.65fr) minmax(0,1.4fr) 104px var(--editor-control) var(--editor-control); gap:8px; align-items:center; min-width:0; }.writing-form-row>input,.writing-form-row>select { height:var(--editor-control); min-width:0; padding:8px var(--control-pad-x); border:1px solid var(--control-border); border-radius:var(--r-sm); background-color:var(--mat); font-size:var(--control-font-size); }.writing-form-row.is-hidden { opacity:.38; }.writing-form-row>label.is-disabled { color:var(--phu); background:var(--nen); }.rubric-image-upload { position:relative; display:grid; place-items:center; min-height:var(--editor-control); overflow:hidden; border:1px dashed var(--control-border); border-radius:var(--r-sm); cursor:pointer; }.rubric-image-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; }.rubric-image-upload img { display:block; width:100%; height:44px; object-fit:contain; }
.mixed-writing-question.is-hidden { opacity:.38; }.mixed-writing-question.is-hidden textarea,.mixed-writing-question.is-hidden .goethe-choices,.mixed-writing-question.is-hidden .audio-upload,.mixed-writing-question.is-hidden .goethe-score>label,.mixed-writing-question.is-hidden [data-action="hide-mixed-choice"] { visibility:hidden; }.mixed-writing-question.is-hidden .goethe-question-row { min-height:var(--editor-control); }
.mixed-writing-question { margin-block:12px; }.mixed-writing-instructions { display:grid; gap:20px; margin-top:20px; }
.goethe-free-response>textarea { min-height:120px; resize:vertical; }
.xay-dung { display:grid; grid-template-columns:260px minmax(0,1fr) 260px; gap:20px; align-items:start; }.cot-xay { min-width:0; }
.phan-item,.cau-item { border:1px solid var(--vien); border-radius:var(--r-sm); padding:16px; margin:10px 0; }.phan-item.active { background:var(--brand-soft); border-color:var(--brand-border); }
.phan-head,.cau-item { display:flex; justify-content:space-between; align-items:center; gap:12px; }.phan-tool { display:flex; gap:4px; }.cau-item .noi { min-width:0; }.cau-item .noi b { display:block; font-size:14px; }.cau-item .noi small { color:var(--phu); }

/* Exam and preview use the same surfaces; bottom navigation stays in normal flow. */
.thi { min-height:calc(100dvh - 24px); background:var(--nen); }
.thanh-thi { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:14px 24px; border:1px solid var(--vien); border-radius:20px; background:var(--mat); }
.thanh-thi strong { font-size:16px; font-weight:550; }.thong-tin-thi { display:flex; gap:14px; align-items:center; font-size:13px; }.thong-tin-thi b { font-variant-numeric:tabular-nums; }.exam-time-label { color:var(--phu); }
.exam-mobile-brand { display:flex; align-items:center; gap:10px; min-width:0; }.exam-mobile-brand img { display:none; width:36px; height:36px; border-radius:10px; object-fit:contain; }
.noi-dung-thi { max-width:var(--max); margin:0 auto; padding:32px 0; }
.exam-context { padding:0 0 24px; }.exam-context h1 { font-size:32px; font-weight:450; margin:8px 0; }
.thi:not(.thi--preview) .exam-context { padding-bottom:0; }
.thi:not(.thi--preview) .exam-free-navigation { align-items:center; margin-top:12px; }
.exam-instruction { display:flex; flex-direction:column; gap:20px; align-items:stretch; margin:0 0 20px; padding:22px 24px; border-radius:var(--r); border:1px solid var(--vien); background:var(--mat); }
.exam-instruction>div { min-width:0; width:100%; }.exam-instruction span { display:block; margin-bottom:8px; color:var(--phu); font-size:11px; font-weight:600; letter-spacing:.06em; }.exam-instruction p { margin:0; white-space:pre-wrap; font-size:15px; line-height:1.7; }
.exam-instruction img { display:block; align-self:flex-start; width:100%; max-width:100%; height:auto; max-height:none; object-fit:contain; border-radius:12px; }.question-instruction { margin-bottom:10px; color:var(--phu); font-size:13px; line-height:1.6; }
.question-stimulus { display:flex; flex-direction:column; gap:20px; align-items:stretch; margin:0 0 22px; padding:0 0 22px; border:0; }.question-stimulus>div { width:100%; min-width:0; }.question-stimulus span { display:block; margin-bottom:8px; color:var(--phu); font-size:11px; font-weight:600; letter-spacing:.06em; }.question-stimulus p { margin:0; white-space:pre-wrap; font-size:15px; line-height:1.7; }.question-stimulus img { display:block; align-self:flex-start; width:100%; max-width:100%; height:auto; max-height:none; object-fit:contain; border-radius:12px; }
.question-number { color:inherit; font:700 inherit; }
.to-thi { display:grid; gap:16px; min-height:0; padding:0; background:transparent; }
.cau-thi { padding:24px; border:1px solid var(--vien); border-radius:var(--r); background:var(--mat); }.cau-thi .noi { margin:0; white-space:pre-wrap; font-size:15px; line-height:1.65; }.cau-thi .ma { font-size:12px; color:var(--phu); }
.question-inline-image { display:block; margin:16px 0; }.question-inline-image img { display:block; max-width:min(760px,86%); max-height:520px; object-fit:contain; border-radius:12px; }
.writing-form-intro,.writing-setup-block>header,.writing-block-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.writing-form-intro { margin-block:8px; }.writing-form-intro span { color:var(--phu); }
.writing-setup-block { border:1px solid var(--vien); border-radius:20px; padding:20px; min-width:0; }.writing-setup-block.is-hidden { opacity:.4; }.writing-setup-block>header { margin-bottom:16px; }.writing-setup-block strong { font-weight:500; }
.writing-block-actions { justify-content:flex-end; }.writing-score { display:flex; align-items:center; gap:8px; color:var(--phu); }.writing-score input { width:80px; }
.writing-block-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px; }.writing-block-content--heading,.writing-block-content--note,.writing-block-content--image { grid-template-columns:1fr; }
.writing-setup-field { display:grid; gap:8px; min-width:0; }.writing-setup-field>span,.writing-option-setup small { color:var(--phu); font-size:13px; }
.writing-setup-block--text { padding:12px; border-radius:var(--r-sm); }
.writing-block-content--text { grid-template-columns:minmax(140px,1fr) minmax(220px,2fr) auto; gap:12px; align-items:center; }
.writing-block-content--text .writing-block-actions { gap:8px; white-space:nowrap; }
.writing-block-content--text .writing-setup-field { gap:0; }
.writing-setup-block--note,.writing-setup-block--truefalse { padding:12px; border-radius:var(--r-sm); }
.writing-block-content--note { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; }
.writing-block-content--truefalse { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; }
.writing-block-content--truefalse>.writing-setup-field { grid-column:1; grid-row:1; }
.writing-block-content--truefalse>.writing-block-actions { grid-column:2; grid-row:1; }
.writing-block-content--truefalse>.writing-option-setup { grid-column:1/-1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.writing-block-content--truefalse>.writing-option-setup>label { min-width:0; }
.writing-block-content--truefalse>.writing-option-setup input:not([type=radio]) { min-width:0; }
.writing-block-content--note .writing-setup-field textarea,.writing-block-content--truefalse .writing-setup-field textarea { min-height:72px; }
.writing-setup-block--signature .writing-setup-field { gap:0; }
.writing-setup-block:not(.writing-setup-block--text) { padding:16px; }
.writing-setup-block:not(.writing-setup-block--text)>header { margin-bottom:10px; }
.writing-setup-block--heading .writing-setup-field textarea,.writing-setup-block--note .writing-setup-field textarea { min-height:68px; }
@media(max-width:850px){.writing-block-content--text { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }.writing-block-content--text .writing-block-actions { grid-column:1/-1; justify-content:flex-end; }}
@media(max-width:520px){.writing-block-content--text { grid-template-columns:1fr; }.writing-block-content--text .writing-block-actions { grid-column:auto; }}
@media(max-width:700px){.writing-block-content.writing-block-content--note,.writing-block-content.writing-block-content--truefalse { grid-template-columns:minmax(0,1fr) auto; }.writing-block-content--truefalse>.writing-option-setup { grid-template-columns:1fr; }}
.writing-paper .form-given { overflow-wrap:anywhere; }
.writing-paper .form-answer-line:has(>.form-point-column:empty) { grid-template-columns:minmax(0,1fr); }
.writing-paper .form-point-column:empty { display:none; }
.writing-answer-help { display:block; margin-top:-8px; color:var(--phu); font-size:12px; line-height:1.5; }
.writing-setup-field input,.writing-setup-field textarea,.writing-option-setup input:not([type=radio]),.writing-score input { min-width:0; width:100%; min-height:var(--control-height); padding:10px var(--control-pad-x); background:var(--mat); border:1px solid var(--control-border); border-radius:var(--r-sm); font:400 var(--control-font-size)/var(--control-line-height) var(--font-ui); }.writing-score input { width:80px; min-height:var(--editor-control); }.writing-setup-field textarea { min-height:96px; resize:vertical; }
.writing-example-toggle { grid-column:1/-1; display:flex; align-items:center; gap:8px; font-size:13px; }.writing-option-setup { display:grid; gap:12px; }.writing-option-setup>label { display:flex; align-items:center; gap:12px; }
.writing-image-picker { display:flex; align-items:center; justify-content:center; gap:12px; min-height:120px; border:1px dashed var(--vien); border-radius:12px; position:relative; overflow:hidden; cursor:pointer; }.writing-image-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }.writing-image-picker img { max-width:100%; max-height:180px; object-fit:contain; }.writing-image-picker:has(img)>svg,.writing-image-picker:has(img)>span { display:none; }
.writing-add-blocks { display:flex; flex-wrap:wrap; gap:8px; padding-block:12px; }
/* One native-select treatment across admin, builder, preview and exam screens. */
select:not([multiple]), .inline-gap-trigger { appearance:none; -webkit-appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23585d65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
/* Shared interactive states. Component layouts may choose 44px or the compact 40px builder density. */
:where(.truong,.cai-dat input:not([type=checkbox]):not([type=radio]):not([type=file]),.cai-dat select,.cai-dat textarea,.exam-setup-grid input:not([type=checkbox]):not([type=radio]),.exam-setup-grid select,.question-profile-field select,.question-profile-field input,.dap-an,.viet,.nhan-xet,.tieu-chi input,.goethe-instruction textarea,.goethe-question-row>textarea,.goethe-free-response>textarea,.writing-form-row>input,.writing-form-row>select,.goethe-choices label>input:last-child,.writing-setup-field input,.writing-setup-field textarea,.writing-option-setup input:not([type=radio])) { transition:border-color var(--motion-fast),background-color var(--motion-fast),box-shadow var(--motion-fast); }
:where(.truong,.cai-dat input:not([type=checkbox]):not([type=radio]):not([type=file]),.cai-dat select,.cai-dat textarea,.exam-setup-grid input:not([type=checkbox]):not([type=radio]),.exam-setup-grid select,.question-profile-field select,.question-profile-field input,.dap-an,.viet,.nhan-xet,.tieu-chi input,.goethe-instruction textarea,.goethe-question-row>textarea,.goethe-free-response>textarea,.writing-form-row>input,.writing-form-row>select,.goethe-choices label>input:last-child,.writing-setup-field input,.writing-setup-field textarea,.writing-option-setup input:not([type=radio])):hover:not(:disabled) { border-color:var(--control-border-hover); }
:where(.audio-upload,.section-image-upload,.choice-image-upload,.rubric-image-upload,.writing-image-picker) { transition:border-color var(--motion-fast),background-color var(--motion-fast); }
:where(.audio-upload,.section-image-upload,.choice-image-upload,.rubric-image-upload,.writing-image-picker):hover { border-color:var(--control-border-hover); background-color:var(--surface-muted); }
[data-image-paste-target].image-paste-active { border-color:var(--brand-primary); outline:2px solid var(--brand-border); outline-offset:3px; }
.writing-paper { position:relative; isolation:isolate; width:min(760px,calc(100% - 34px)); margin:40px auto 48px; padding:28px; border:1px solid #d8d3c9; border-radius:1px; background:#fff; box-shadow:0 1px 1px rgba(30,24,15,.12),0 4px 7px rgba(30,24,15,.09),0 18px 30px -14px rgba(30,24,15,.34); transform:rotate(var(--paper-rotate,0deg)); transform-origin:center; display:grid; gap:12px; }
.writing-paper::before { content:""; position:absolute; z-index:-1; inset:3px -4px -5px 5px; border:1px solid rgba(164,153,134,.42); background:#fff; box-shadow:2px 3px 5px rgba(30,24,15,.1); transform:rotate(.28deg); }
.form-line { display:grid; grid-template-columns:minmax(150px,34%) minmax(0,1fr); align-items:center; gap:12px; }.form-line--full { grid-template-columns:1fr; }.form-label { font-size:14px; }.form-cells { display:flex; gap:8px; min-width:0; }.form-cell { flex:1; display:flex; align-items:center; gap:8px; min-width:0; }.form-cell>input[type=text],.form-given { width:100%; min-width:0; border:1px solid transparent; border-radius:2px; background:#e7e8ea; color:var(--chu); padding:7px 10px; min-height:36px; font:inherit; }.form-cell>input[type=text]:focus { outline:2px solid var(--brand-primary); outline-offset:2px; }.form-given { font-weight:500; white-space:pre-wrap; }.form-point { flex:none; font-size:13px; color:var(--phu); }.form-cell h3 { width:100%; margin:0 0 12px; text-align:center; font-size:22px; font-weight:600; white-space:pre-wrap; }.form-cell p { margin:8px 0 0; white-space:pre-wrap; }.form-cell img { max-width:100%; max-height:360px; object-fit:contain; }.form-signature { font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Segoe Print",cursive; font-style:normal; font-size:23px; font-weight:400; }.form-options { display:grid; gap:8px; width:100%; }.form-options label { display:flex; gap:10px; align-items:center; padding:5px 0; background:transparent; }
.writing-paper .form-cell>input[type=text] { font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:18px; letter-spacing:.01em; }.writing-paper .form-prefilled { opacity:1; color:var(--chu); background:#f0f1f2; cursor:default; }
.writing-paper .form-options label>input[type=radio] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.writing-paper .form-options label>span { position:relative; display:flex; align-items:center; gap:12px; min-height:26px; }.writing-paper .form-options label>span::before { content:""; flex:none; width:20px; height:20px; border:1.6px solid #55534e; border-radius:2px; background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 .5px rgba(30,24,15,.12); }.writing-paper .form-options label>input[type=radio]:checked+span::after { content:"✓"; position:absolute; left:1px; top:50%; color:#25231f; font:700 27px/1 "Segoe Print","Bradley Hand","Comic Sans MS",cursive; transform:translateY(-59%) rotate(-11deg); }.writing-paper .form-options label>input[type=radio]:focus-visible+span::before { outline:2px solid var(--brand-primary); outline-offset:3px; }
.form-answer-line { display:grid; grid-template-columns:minmax(0,1fr) 4ch; gap:8px; align-items:center; min-width:0; }
.form-line--full .form-answer-line { grid-template-columns:minmax(0,1fr); }
.form-point-column { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
@media(max-width:700px){.writing-block-content { grid-template-columns:1fr; }.writing-setup-block { padding:16px; }.writing-paper { padding:20px 14px; }.form-line { grid-template-columns:minmax(0,32%) minmax(0,1fr); gap:8px; }.form-line--full { grid-template-columns:1fr; }.form-label { font-size:13px; }.form-cell>input[type=text] { font-size:16px; }.writing-block-actions { gap:6px; }.writing-score input { width:60px; }}
.writing-paper:not(.gap-article) { width:min(760px,calc(100% - 12px)); margin:20px auto 24px; }
.writing-paper .form-label { min-width:0; overflow-wrap:anywhere; }
@media(max-width:700px) {
  .exam-paper:has(.writing-form-question) { padding-inline:12px; }
  .writing-form-question .writing-paper { width:100%; margin:12px 0 20px; padding:20px 18px; transform:none; }
  .writing-paper .form-answer-line { grid-template-columns:minmax(0,1fr) 3ch; gap:4px; }
  .writing-paper .form-line--full .form-answer-line { grid-template-columns:minmax(0,1fr); }
  .writing-paper .form-cell h3 { font-size:20px; overflow-wrap:anywhere; }
  .writing-paper .form-options label>span { min-width:0; overflow-wrap:anywhere; gap:8px; }
}
.answer-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:16px; }.answer-options:first-child { margin-top:0; }
.answer-option { position:relative; display:block; cursor:pointer; }.answer-option>input { position:absolute; opacity:0; }
.answer-option-body { display:flex; align-items:center; gap:10px; min-height:52px; height:100%; padding:12px 14px; border:1px solid var(--vien); border-radius:var(--r-sm); background:var(--mat); font-size:14px; line-height:1.45; }
.answer-letter { font-weight:700; }
.cau-thi.is-unanswered .preview-question-prompt { animation:unanswered-question-flash 1.8s ease-in-out .25s 1; }
@keyframes unanswered-question-flash { 0%,22%,48%,72%,100% { color:inherit; } 11%,60% { color:var(--do); } }
.answer-option-body>img { width:52px; height:40px; object-fit:contain; border-radius:6px; }
.answer-option:hover .answer-option-body { border-color:var(--brand-border); }
.answer-option>input:checked+.answer-option-body { border-color:var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 20%,var(--mat)); color:var(--brand-text); font-weight:400; }
.answer-option>input:focus-visible+.answer-option-body { outline:2px solid var(--brand-text); outline-offset:3px; }
.matching-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,420px); align-items:center; gap:16px; margin-top:12px; }.matching-row b { font-size:14px; font-weight:500; }.dap-an { width:100%; }.viet { width:100%; min-height:280px; resize:vertical; margin-top:16px; }
.writing-response-form { display:grid; gap:12px; margin-top:18px; }.writing-response-form--framed { width:min(760px,100%); margin:24px auto 0; padding:32px; border:1px solid var(--chu); border-radius:2px; background:var(--mat); }.writing-display-group { display:grid; grid-template-columns:minmax(130px,220px) minmax(0,1fr); gap:14px; align-items:start; }.writing-display-group.is-full { grid-template-columns:1fr; }.writing-display-label { padding-top:12px; font-size:14px; }.writing-display-group>div { display:flex; gap:10px; flex-wrap:wrap; }.writing-display-field { position:relative; display:flex; align-items:center; gap:8px; flex:1 1 180px; min-width:0; }.writing-display-field>.truong { width:100%; }.writing-display-field--heading,.writing-display-field--image { flex-basis:100%; justify-content:center; }.writing-form-heading { display:block; width:100%; text-align:center; font-size:22px; font-weight:600; line-height:1.25; white-space:pre-wrap; }.writing-static-value { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; background:var(--nen); font-weight:500; white-space:pre-wrap; }.writing-point { flex:none; order:2; margin-left:auto; color:var(--phu); font-size:13px; }.writing-binary { display:flex; align-items:center; gap:14px; min-height:44px; }.writing-binary label { display:flex; align-items:center; gap:6px; }.writing-form-image { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:0; }
.cau-thi.is-answered .answer-match,.cau-thi.is-answered .viet { border-color:var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 20%,var(--mat)); }
.dieu-huong-thi { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 0; }.dieu-huong-thi .nut { min-width:112px; min-height:44px; }.dieu-huong-thi .section-arrow { display:inline-flex; align-items:center; justify-content:center; }.dieu-huong-thi .tien-do { text-align:center; }.dieu-huong-thi .tien-do b { color:var(--chu); }
.audio-thi { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 0; padding:12px; border-radius:16px; background:var(--surface-muted); }.audio-thi .phu-de { flex:1; min-width:160px; font-size:12px; }
.section-audio { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:14px 16px; border-radius:var(--r-sm); background:var(--surface-muted); }.section-audio-segment { display:none; }.section-audio-play { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; padding:0; border:0; border-radius:50%; background:var(--brand-primary); color:var(--brand-on-primary); cursor:pointer; transition:transform .16s ease,opacity .16s ease; }.section-audio-play:hover:not(:disabled) { transform:scale(1.04); }.section-audio-play:disabled { cursor:default; opacity:.42; }.section-audio-play .ui-icon { width:20px; height:20px; }.section-audio-body { display:grid; gap:8px; width:100%; min-width:0; }.section-audio-progress { display:block; width:100%; height:6px; overflow:hidden; border-radius:var(--pill); background:var(--vien); }.section-audio-progress[hidden] { display:none; }.section-audio-progress i { display:block; width:0; height:100%; border-radius:inherit; background:var(--brand-primary); transition:width .12s linear; }.section-audio-status { min-height:18px; color:var(--chu); font-size:12px; }
/* Preview: one reading column, one paper, optional section switcher. */
.thi--preview { max-width:var(--max); margin:0 auto; }
.preview-identity { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }.preview-identity strong { display:block; overflow-wrap:anywhere; }.preview-identity .text-link { padding:0; }.thi--preview .thanh-thi>.nut { flex:none; }
.preview-shell { display:flex; flex-direction:column; gap:28px; padding:16px 0 40px; }.thi--preview .noi-dung-thi { width:100%; min-width:0; margin:0; padding:0; }
.navigation-loading { position:fixed; inset:0 0 auto; height:3px; z-index:10000; pointer-events:none; overflow:hidden; background:var(--brand-soft); }
.navigation-loading::after { content:""; display:block; width:35%; height:100%; background:var(--brand-primary); border-radius:999px; animation:navigation-loading-slide 1.2s ease-in-out infinite; will-change:transform; }
@keyframes navigation-loading-slide { from { transform:translateX(-100%); } to { transform:translateX(390%); } }
@media(prefers-reduced-motion:reduce) { .navigation-loading::after { animation:none; width:100%; } }
.thanh-thi--preview { display:block; }.preview-header-row { display:flex; align-items:center; flex-wrap:nowrap; gap:16px; }
.preview-exam-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-header-row>.navigation-arrow { flex-shrink:0; }
.preview-header-row>.preview-outline { flex-shrink:0; max-width:50%; }
.preview-outline { position:static; display:flex; align-items:center; flex-wrap:wrap; gap:16px; min-width:0; margin-left:auto; max-width:calc(100% - 36px); }
.preview-section-picker { display:flex; align-items:center; min-width:0; }.preview-section-picker .truong { width:var(--picker-width, 20ch); min-width:0; max-width:100%; background-color:var(--mat); }.preview-outline>.preview-progress { margin-left:auto; }
.preview-progress { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--phu); white-space:nowrap; }.preview-progress-track { display:block; width:100px; height:4px; background:var(--vien); border-radius:var(--pill); overflow:hidden; }.preview-progress i { display:block; height:100%; background:var(--brand-primary); border-radius:inherit; }
.thi--preview .exam-context { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 4px 20px; }.thi--preview .exam-title-block { min-width:0; }.thi--preview .exam-context h1 { margin:6px 0 0; overflow-wrap:anywhere; }.preview-section-position,.preview-question-count { color:var(--phu); font-size:13px; }.preview-question-count { white-space:nowrap; }
.exam-paper { padding:28px 32px; background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); }
.exam-paper .exam-instruction { margin:0 0 8px; padding:0 0 24px; border:0; border-radius:0; background:transparent; }.exam-paper .exam-instruction p { font-size:16px; }.exam-paper .section-audio { margin-top:16px; }.exam-paper .to-thi { gap:0; }
.exam-paper .cau-thi { min-width:0; padding:24px 0; border:0; border-radius:0; background:transparent; }.exam-paper .cau-thi:last-child { border-bottom:0; padding-bottom:0; }.exam-paper .cau-thi:first-child { padding-top:0; }.exam-paper .exam-instruction+.to-thi .cau-thi:first-child { padding-top:20px; }
.exam-paper .cau-thi.is-example,.exam-paper .cau-thi.is-example:first-child,.exam-paper .cau-thi.is-example:last-child,.exam-paper .exam-instruction+.to-thi .cau-thi.is-example:first-child { margin:20px 0; padding:22px; border:1px solid var(--example-border); border-radius:18px; background:var(--example-bg); }.question-example-title { margin-bottom:14px; color:var(--example-text); font-size:18px; font-weight:700; }.cau-thi.is-example input:disabled,.cau-thi.is-example select:disabled,.cau-thi.is-example textarea:disabled { opacity:1; cursor:default; }.cau-thi.is-example .answer-option>input:disabled { appearance:none; -webkit-appearance:none; opacity:0; }
.preview-question-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }.preview-question-prompt { flex:1; min-width:0; overflow-wrap:anywhere; }.exam-paper .cau-thi .noi { font-size:16px; }.exam-paper .question-instruction { white-space:pre-wrap; }
.exam-paper .audio-thi { flex:none; margin:0; padding:0; background:transparent; }.exam-paper .audio-thi .nut { min-height:44px; background:var(--surface-muted); color:var(--chu); border-color:var(--vien); }.exam-paper .audio-thi .nut:hover:not(:disabled) { background:var(--brand-soft); }
.exam-paper .answer-option-body { min-width:0; overflow-wrap:anywhere; }.exam-paper .answer-options--illustrated .answer-option-body { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(112px,auto) auto; gap:12px; }.exam-paper .answer-options--illustrated .answer-option-body>span { grid-column:1; grid-row:2; }.exam-paper .answer-options--illustrated .answer-option-body>img { grid-column:1/-1; grid-row:1; width:100%; height:144px; object-fit:contain; }
.thi--preview .dieu-huong-thi { position:static; background:transparent; border:0; margin-top:20px; }.thi--preview .viet { font-size:16px; }
.qg-listen-intro { border:1px solid var(--vien); background:var(--mat); border-radius:var(--r); padding:24px; }.qg-listen-intro h3 { margin-top:0; }.qg-listen-status { color:var(--phu); margin-top:8px; font-size:13px; }

/* Grading, login and feedback. */
.cham-bai { display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; }.ds-cham,.phieu-cham { min-width:0; }.hv-cham { border:1px solid var(--vien); border-radius:var(--r-sm); padding:16px; margin-bottom:12px; }.hv-cham.active { background:var(--brand-soft); border-color:var(--brand-border); }
.bai-lam { background:var(--surface-muted); border:1px solid var(--vien); border-radius:16px; padding:20px; min-height:150px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }.phieu-cham h3 { margin-top:28px; }
.tieu-chi { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--vien); }.tieu-chi input { width:100%; font-variant-numeric:tabular-nums; }.nhan-xet { width:100%; min-height:100px; resize:vertical; }.tong-diem { display:flex; justify-content:space-between; gap:12px; font-weight:600; font-size:18px; padding:16px 0; }
.dang-nhap { max-width:1040px; margin:64px auto; display:grid; grid-template-columns:1.2fr 1fr; gap:24px; }.dang-nhap .gioi-thieu,.dang-nhap .hop-dang-nhap { border:1px solid var(--vien); border-radius:28px; background:var(--mat); padding:36px; }.dang-nhap .gioi-thieu { background:var(--brand-soft); }.dang-nhap h1 { font-size:40px; font-weight:450; line-height:1.15; margin:16px 0 24px; }.dang-nhap p { color:var(--phu); line-height:1.65; }
.dang-nhap-google { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 16px; background:var(--brand-primary); color:var(--brand-on-primary); border:1px solid var(--brand-primary); border-radius:var(--pill); font-weight:500; }.che-do-demo { margin-top:24px; border-top:1px solid var(--vien); padding-top:20px; }.chon-demo { display:grid; gap:8px; margin-top:12px; }
.landing { max-width:1180px; margin:32px auto 24px; padding:42px 50px 24px; border:1px solid var(--vien); border-radius:30px; background:var(--mat); }.landing-main { display:grid; grid-template-columns:1fr 0.9fr; align-items:center; gap:54px; min-height:430px; }.landing-kicker { font-size:12px; letter-spacing:.14em; font-weight:700; color:var(--brand-text); }.landing-copy h1 { font-size:clamp(38px,4.1vw,62px); line-height:1.08; letter-spacing:-.05em; margin:20px 0; }.landing-copy p { max-width:520px; font-size:18px; line-height:1.55; color:var(--phu); }.landing-free { display:block; margin:12px 0 0; color:#188454; font-weight:600; }.landing-cta { width:max-content; min-width:240px; padding-inline:26px; }.landing-mockup { border:1px solid var(--vien); border-radius:22px; overflow:hidden; background:white; box-shadow:0 26px 70px rgba(20,30,40,.09); transform:rotate(1deg); }.mockup-bar { display:flex; align-items:center; gap:5px; padding:14px 20px; border-bottom:1px solid var(--vien); background:#f7f9fa; }.mockup-bar span { width:7px; height:7px; border-radius:50%; background:#cbd0d2; }.mockup-bar b { margin-left:auto; font-size:12px; }.mockup-body { padding:34px; }.mockup-body small { color:var(--phu); font-weight:700; letter-spacing:.05em; }.mockup-body h2 { font-size:23px; margin:16px 0 24px; }.mockup-choice { display:flex; align-items:center; gap:14px; border:1px solid var(--vien); border-radius:13px; padding:18px; margin:10px 0; }.mockup-choice i { width:18px; height:18px; border:2px solid #aeb7ba; border-radius:50%; }.mockup-choice.selected { border-color:var(--brand-border); background:var(--brand-soft); }.mockup-choice.selected i { border:6px solid var(--brand-primary); }.mockup-progress { height:6px; margin:28px 0 12px; border-radius:9px; background:#eef1f2; }.mockup-progress span { display:block; width:60%; height:100%; border-radius:9px; background:var(--brand-primary); }.landing-bottom { display:flex; justify-content:space-between; gap:32px; padding:22px 0; border-top:1px solid var(--vien); }.landing-bottom h2 { font-size:17px; margin:0 0 12px; }.landing-types { display:flex; flex-wrap:wrap; gap:8px; }.landing-types span { padding:9px 13px; border-radius:100px; border:1px solid var(--vien); font-size:13px; }.landing-metrics { display:flex; flex-wrap:wrap; gap:24px; }.landing-metrics div { display:grid; gap:2px; white-space:nowrap; }.landing-metrics b { font-size:20px; }.landing-metrics span { font-size:12px; color:var(--phu); }.landing footer { padding-top:14px; border-top:1px solid var(--vien); font-size:12px; color:var(--phu); }
.web-feedback { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:80; pointer-events:none; }
.web-feedback[hidden] { display:none; }
.feedback-question { display:grid;place-items:center;position:absolute;left:0;top:8px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--brand-primary);font-family:inherit;font-size:26px;font-weight:500;line-height:1;cursor:pointer;pointer-events:auto; }
.feedback-attachment { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.feedback-image-control { display:inline-flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; }
.feedback-attachment input[hidden] { display:none; }
.feedback-image-preview { position:relative; padding-right:20px; }
.feedback-image-preview img { max-width:100%; max-height:150px; object-fit:contain; border-radius:12px; }
.feedback-image-preview button { position:absolute; right:0; top:0; }
.feedback-panel { position:relative;width:min(360px,calc(100vw - 72px));padding:20px;background:var(--mat);border:1px solid var(--vien);border-radius:var(--r);box-shadow:0 8px 32px #0002;transform:translateX(calc(100% - 26px)) rotate(-12deg);transform-origin:left 36px;transition:transform .25s ease; }
.web-feedback.is-open { pointer-events:auto; }
.web-feedback.is-open .feedback-panel { transform:translateX(-28px) rotate(0deg); }
.feedback-panel[hidden] { display:none; }
.feedback-panel header { display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-left:30px;padding-right:36px;min-height:32px; }
.feedback-panel header strong { font-size:18px;font-weight:500; }
.feedback-panel header .icon-btn { position:absolute;top:8px;right:8px;width:44px;height:44px;min-width:44px;padding:8px; }
.web-feedback:not(.is-open) .feedback-panel header .icon-btn { visibility:hidden; }
.feedback-panel form { max-height:calc(100dvh - 140px);overflow:auto; }
@media(prefers-reduced-motion:reduce) { .feedback-panel { transition:none; } }
.feedback-panel form { display:grid; gap:12px; }
.feedback-panel textarea { width:100%; min-height:120px; resize:vertical; }
.feedback-panel textarea:focus-visible { outline:2px solid var(--brand-border); outline-offset:2px; }
.feedback-panel [role=status]:empty { display:none; }
.feedback-panel small,.feedback-panel [role=status] { font-size:12px; color:var(--phu); }
@media(max-width:900px) { .web-feedback { display:none; } }
.admin-dashboard { --dashboard-ink:var(--chu); --dashboard-paper:var(--mat); padding:8px 0 24px; }
.admin-dashboard .the { background:var(--dashboard-paper); border-color:transparent; border-radius:28px; }
.admin-dashboard .dashboard-heading h1 { font-size:clamp(30px,3.5vw,44px); font-weight:400; letter-spacing:-1.5px; }
.admin-dashboard .dashboard-heading .chinh { background:var(--dashboard-ink); border-color:var(--dashboard-ink); color:var(--mat); }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch; }
.dashboard-panel .dashboard-period-select { width:112px; min-width:112px; height:40px; font-size:13px; }
.admin-dashboard .dashboard-heading { align-items:center; gap:16px; }
.admin-dashboard .dashboard-heading>div:first-child { flex:1; }
.dashboard-heading p { margin:4px 0 0; color:var(--phu); font-size:13px; }
.dashboard-stats { margin-bottom:20px; }
.dashboard-metric { padding:20px 24px; }
.dashboard-metric-label { display:flex; align-items:center; gap:8px; color:var(--phu); }
.dashboard-metric small { display:block; color:var(--phu); margin-top:8px; font-size:12px; }
.dashboard-metric--attention { border-color:var(--brand-border); background:var(--brand-soft); }
.dashboard-metric--attention .dashboard-metric-label { color:var(--brand-text); }
.dashboard-panel { min-width:0; padding:24px; display:flex; flex-direction:column; min-height:280px; }
.dashboard-panel header { min-height:44px; }
.dashboard-panel header,.dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dashboard-panel h2,.dashboard-infrastructure h2 { margin:0; font-size:18px; font-weight:500; }
.dashboard-panel header>span,.dashboard-caption { color:var(--phu); font-size:12px; }
.dashboard-panel .text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }
.dashboard-growth-total { display:flex; align-items:baseline; gap:8px; margin:16px 0 12px; }
.dashboard-growth-total>b { font-size:56px; font-weight:350; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.dashboard-growth-total>span { color:var(--phu); font-size:13px; }
.dashboard-bars { display:grid; grid-template-columns:repeat(var(--bars,6),minmax(40px,1fr)); gap:12px; overflow-x:auto; margin-top:auto; padding-top:16px; }
.dashboard-bars>div { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.dashboard-bars b { font-size:12px; font-weight:500; }
.dashboard-bars small { font-size:11px; color:var(--phu); white-space:nowrap; }
.dashboard-bar-track { display:flex; align-items:end; justify-content:center; height:88px; width:100%; border-bottom:1px solid var(--vien); }
.dashboard-bar-track>span { width:min(28px,75%); background:var(--brand-primary); border-radius:var(--pill); }
.dashboard-types,.dashboard-graders { list-style:none; padding:0; margin:12px 0 0; }
.dashboard-types li:not(.dashboard-empty) { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:8px 0; font-size:13px; }
.dashboard-types b { font-weight:500; }
.dashboard-type-track { grid-column:1/-1; background:var(--surface-muted); height:4px; border-radius:999px; overflow:hidden; }
.dashboard-type-track i { display:block; height:100%; background:var(--brand-primary); border-radius:inherit; }
.dashboard-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px dashed var(--vien); }
.dashboard-row:last-child { border-bottom:0; }
.dashboard-row>b { flex-shrink:0; font-size:13px; font-weight:500; }
.dashboard-person { display:inline-flex; align-items:center; gap:10px; min-width:0; font-size:13px; }
.dashboard-person>span:last-child { overflow-wrap:anywhere; }
.dashboard-avatar { display:grid; place-items:center; width:40px; height:40px; overflow:hidden; flex:none; border-radius:50%; background:var(--surface-muted); color:var(--phu); font-size:11px; font-weight:500; }
.dashboard-avatar img { width:100%; height:100%; object-fit:cover; }
.dashboard-empty { color:var(--phu); font-size:13px; padding:24px 0; }
.dashboard-people-link { margin-top:12px; }
.dashboard-infrastructure { margin-top:32px; }
.dashboard-resource-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:24px; }
.resource-ring { display:flex; align-items:center; gap:16px; min-width:0; }
.distribution-chart { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:20px; padding:20px 0; margin:auto 0; }
.distribution-plot { position:relative; width:120px; height:120px; flex:none; }
.distribution-plot svg { width:100%; height:100%; transform:rotate(-90deg); }
.distribution-plot circle { fill:none; stroke:color-mix(in srgb,var(--brand-primary),var(--phu) calc(var(--slice)*18%)); stroke-width:13; }
.distribution-plot>div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.distribution-plot b { font-size:36px; font-weight:450; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.distribution-plot span { font-size:12px; color:var(--phu); }
.distribution-legend { list-style:none; padding:0; margin:0; min-width:0; }
.distribution-legend li { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; }
.distribution-legend i { width:8px; height:8px; border-radius:50%; flex:none; background:color-mix(in srgb,var(--brand-primary),var(--phu) calc(var(--slice)*18%)); }
.distribution-legend span { flex:1; overflow-wrap:anywhere; }
.distribution-legend b { font-weight:500; }
.resource-ring-plot { position:relative; width:88px; height:88px; flex:none; }
.resource-ring-plot svg { width:100%; height:100%; transform:rotate(-90deg); }
.resource-ring-plot circle { fill:none; stroke-width:7; }
.resource-ring-track { stroke:var(--surface-muted); }
.resource-ring-fill { stroke:var(--brand-primary); }
.resource-ring--warning .resource-ring-fill { stroke:var(--do); }
.resource-ring-plot b { position:absolute; inset:0; display:grid; place-items:center; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
.resource-ring span,.r2-visual-facts span { display:block; color:var(--phu); font-size:12px; }
.resource-ring strong { display:block; font-size:14px; font-weight:500; margin-top:4px; overflow-wrap:anywhere; }
.r2-visual-summary { display:flex; align-items:center; gap:32px; flex-wrap:wrap; margin:16px 0; }
.r2-visual-facts { display:flex; gap:32px; flex-wrap:wrap; }
.r2-visual-facts b { font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; }
.resource-columns { display:flex; gap:24px; align-items:stretch; padding:16px 0; min-width:0; }
.resource-column { flex:1; min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.resource-column b { font-size:13px; font-weight:500; }
.resource-column span { font-size:12px; color:var(--phu); overflow-wrap:anywhere; }
.resource-column-track { height:88px; width:100%; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--vien); }
.resource-column-track i { display:block; width:36px; max-width:80%; background:var(--brand-primary); border-radius:6px 6px 0 0; }
.resource-column:nth-child(2) i { background:var(--brand-text); }
.resource-column:nth-child(3) i { background:var(--phu); }
.dashboard-resource { display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; }
.dashboard-resource>div { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.dashboard-resource span,.dashboard-resource small { color:var(--phu); font-size:12px; }
.dashboard-resource b { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.dashboard-resource-total { gap:4px; padding-left:24px; border-left:1px solid var(--vien); }
.dashboard-resource-total>b { font-size:22px; }
.dashboard-resource meter { width:100%; height:6px; appearance:none; border:0; background:var(--surface-muted); border-radius:999px; }
.dashboard-resource meter::-webkit-meter-bar { background:var(--surface-muted); border:0; border-radius:999px; }
.dashboard-resource meter::-webkit-meter-optimum-value { background:var(--brand-primary); border-radius:999px; }
.dashboard-resource meter::-moz-meter-bar { background:var(--brand-primary); border-radius:999px; }
.dashboard-warning { color:var(--do); font-size:13px; margin:12px 0 0; }
.dashboard-details { margin-top:20px; border-top:1px solid var(--vien); padding-top:8px; }
.dashboard-details h3 { margin:0; padding:12px 0; min-height:44px; font-size:14px; font-weight:500; }
.dashboard-details h3>span { margin-left:12px; font-size:12px; font-weight:400; color:var(--phu); }
.dashboard-system-heading { margin-bottom:16px; }
.dashboard-services { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.dashboard-service { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--phu); min-height:28px; }
.dashboard-service i { width:6px; height:6px; border-radius:50%; background:var(--phu); flex:none; }
.dashboard-service.is-ok i { background:var(--xanh); }
.dashboard-service.is-off i { background:var(--do); }
.dashboard-service.is-off small { color:var(--do); }
.dashboard-service small { font-size:11px; }
.dashboard-alerts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.dashboard-state { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:4px 10px; border-radius:var(--pill); background:var(--surface-muted); color:var(--phu); font-size:12px; line-height:1.5; }
.dashboard-state--success { color:var(--xanh); background:color-mix(in srgb,var(--xanh),var(--mat) 92%); }
.dashboard-state--error { color:var(--do); background:color-mix(in srgb,var(--do),var(--mat) 92%); }
.dashboard-system-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; align-items:start; }
.dashboard-system-grid>.the { min-width:0; padding:24px; }
.dashboard-system-grid h3 { margin:0; font-size:16px; font-weight:500; }
.dashboard-system-grid h3>span { font-size:12px; font-weight:400; color:var(--phu); margin-left:6px; }
.dashboard-cpu-card { grid-column:1; grid-row:span 2; display:flex; flex-direction:column; }
.dashboard-cpu-card>.dashboard-section-heading { flex-wrap:wrap; }
.dashboard-cpu-card .monitor-range { margin:0; gap:0; width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--vien); }
.dashboard-cpu-card .monitor-range span { padding:12px 4px; font-size:12px; text-align:center; border-radius:0; background:transparent; border-bottom:3px solid transparent; }
.dashboard-cpu-card .monitor-range input:checked+span { background:transparent; color:var(--chu); border-bottom-color:var(--brand-primary); font-weight:550; }
.dashboard-cpu-history { width:100%; margin:16px auto 0; display:block; }
.dashboard-cpu-history .monitor-chart { width:100%; }
.dashboard-cpu-history .monitor-chart header { justify-content:flex-start; margin:0 0 16px; }
.dashboard-cpu-history .monitor-chart strong { font-size:22px; font-weight:450; line-height:1.1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.dashboard-cpu-history .monitor-chart svg { max-height:none; }
.dashboard-cpu-history .monitor-chart svg text { font-size:12px; }
.dashboard-cpu-history .monitor-grid { stroke-dasharray:none; }
.dashboard-cpu-history .monitor-line { stroke-width:1.5; vector-effect:non-scaling-stroke; }
.monitor-area { fill:var(--brand-primary); fill-opacity:.3; stroke:none; }
.monitor-axis { stroke:var(--phu); stroke-width:.7; fill:none; }
.monitor-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin:12px 0 0; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.monitor-summary>div { min-width:0; padding:10px 4px; border-radius:12px; background:var(--surface-muted); }
.monitor-summary dt { color:var(--phu); overflow-wrap:anywhere; }
.monitor-summary dd { margin:8px 0 0; font-size:14px; overflow-wrap:anywhere; }
.dashboard-cpu-history .monitor-dot { opacity:0; }
.dashboard-cpu-history .monitor-dot:hover,.dashboard-cpu-history circle:only-of-type { opacity:1; }
.dashboard-capacity-rings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.resource-gauge { min-width:0; text-align:center; }
.resource-gauge-plot { position:relative; width:min(100%,148px); margin:auto; }
.resource-gauge svg { display:block; width:100%; overflow:visible; }
.resource-gauge path { fill:none; stroke-width:8; stroke-linecap:round; }
.resource-gauge-track { stroke:var(--chu); opacity:.85; }
.resource-gauge-fill { stroke:var(--brand-primary); }
.resource-gauge--warning .resource-gauge-fill { stroke:var(--do); }
.resource-gauge-plot>div { position:absolute; inset:38% 0 10%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.resource-gauge span { font-size:12px; color:var(--phu); }
.resource-gauge b { font-size:28px; line-height:1.2; font-weight:450; font-variant-numeric:tabular-nums; }
.resource-gauge>strong { font-size:12px; font-weight:400; display:block; margin-top:4px; overflow-wrap:anywhere; }
.admin-dashboard .dashboard-r2-card { background:var(--dashboard-ink); color:var(--mat); --phu:color-mix(in srgb,var(--mat) 65%,var(--dashboard-ink)); --vien:color-mix(in srgb,var(--mat) 18%,var(--dashboard-ink)); --surface-muted:color-mix(in srgb,var(--mat) 15%,var(--dashboard-ink)); }
.dashboard-r2-card .icon-btn { color:inherit; background:transparent; border-color:transparent; }
.dashboard-r2-card .dashboard-state--success { color:color-mix(in srgb,var(--xanh) 55%,var(--mat)); background:transparent; padding:0; }
.dashboard-r2-card .dashboard-state--error,.dashboard-r2-card .dashboard-warning { color:color-mix(in srgb,var(--do) 55%,var(--mat)); background:transparent; }
.dashboard-ai-queue { margin:24px 0; }.dashboard-ai-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }.dashboard-ai-metrics>div { display:grid; gap:4px; padding:14px; border-radius:14px; background:var(--surface-muted); }.dashboard-ai-metrics b { font-size:20px; overflow-wrap:anywhere; }.dashboard-ai-metrics span,.dashboard-ai-errors small { color:var(--phu); font-size:12px; }.dashboard-ai-errors { margin-top:16px; padding:14px; border:1px solid color-mix(in srgb,var(--do) 35%,var(--vien)); border-radius:14px; background:color-mix(in srgb,var(--do) 5%,var(--mat)); }.dashboard-ai-error-head { display:flex; gap:12px; align-items:center; justify-content:space-between; }.dashboard-ai-errors p { display:grid; gap:4px; margin:10px 0 0; overflow-wrap:anywhere; }.dashboard-ai-errors p:last-child { margin-bottom:0; }
.dashboard-ai-accuracy { margin-top:16px; padding:14px; border:1px solid var(--vien); border-radius:14px; }.dashboard-ai-accuracy ul { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }.dashboard-ai-accuracy li { display:flex; gap:12px; justify-content:space-between; align-items:baseline; }.dashboard-ai-accuracy li span { color:var(--phu); overflow-wrap:anywhere; }.dashboard-ai-accuracy li b { white-space:nowrap; }
.dashboard-ai-providers,.dashboard-ai-accuracy-meta { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }.dashboard-ai-provider,.dashboard-ai-part,.dashboard-ai-model { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:12px; font-style:normal; line-height:1.2; }.dashboard-ai-provider { color:var(--phu); }.dashboard-ai-provider.is-active { color:var(--chu); background:color-mix(in srgb,var(--brand-primary) 16%,var(--mat)); font-weight:650; }.dashboard-ai-part { color:#255e9d; background:#e8f2ff; }.dashboard-ai-model { color:#7b4d00; background:#fff2cf; }.dashboard-ai-accuracy li { align-items:center; }.dashboard-ai-exam { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; color:var(--phu); }.dashboard-ai-accuracy button.dashboard-ai-exam { appearance:none; padding:0; border:0; background:transparent; cursor:pointer; text-decoration:none; }.dashboard-ai-accuracy-meta { justify-content:flex-end; flex-shrink:0; }.dashboard-ai-accuracy-meta b { font-variant-numeric:tabular-nums; }
.dashboard-ai-queue { box-shadow:inset 0 3px 0 var(--brand-primary); }
.dashboard-ai-metrics--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-ai-queue>.dashboard-section-heading>.dashboard-ai-providers { display:flex; flex-wrap:nowrap; gap:4px; min-width:0; }
.dashboard-ai-providers .dashboard-ai-provider { gap:4px; white-space:nowrap; }
.dashboard-ai-provider b { font-size:inherit; font-variant-numeric:tabular-nums; }
.dashboard-ai-provider.is-active { color:#111; background:var(--brand-primary); box-shadow:0 1px 2px color-mix(in srgb,#111 20%,transparent); }
@media(max-width:700px){.dashboard-ai-metrics:not(.dashboard-ai-metrics--compact){grid-template-columns:1fr;}.dashboard-ai-metrics--compact{gap:8px;}.dashboard-ai-metrics--compact>div{min-width:0;padding:12px 10px;align-content:start;}.dashboard-ai-metrics--compact b{font-size:18px;}.dashboard-ai-queue>.dashboard-section-heading>.dashboard-ai-providers{margin-left:auto;max-width:100%;}.dashboard-ai-providers .dashboard-ai-provider{padding:4px 6px;font-size:12px;}.dashboard-ai-accuracy li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}.dashboard-ai-accuracy-meta{gap:4px;}.dashboard-ai-part,.dashboard-ai-model{padding:3px 6px;}}
.dashboard-capacity-rings .resource-ring { gap:10px; }
.dashboard-capacity-rings .resource-ring-plot { width:64px; height:64px; }
.dashboard-capacity-rings .resource-ring strong { font-size:12px; }
.dashboard-data-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:16px; border-top:1px solid var(--vien); }
.dashboard-data-total span { color:var(--phu); font-size:12px; }
.dashboard-data-total strong { font-size:22px; font-weight:450; font-variant-numeric:tabular-nums; }
.dashboard-storage-strip { display:flex; gap:3px; height:6px; overflow:hidden; border-radius:var(--pill); margin:12px 0 20px; background:var(--surface-muted); }
.dashboard-storage-segment { min-width:0; background:var(--brand-primary); }
.dashboard-storage-segment--0 { background:var(--brand-text); }
.dashboard-storage-segment--2 { background:var(--phu); }
.dashboard-r2-body { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:12px 0 16px; }
.dashboard-r2-body .resource-ring-plot { width:64px; height:64px; }
.dashboard-r2-body .resource-ring { gap:10px; }
.dashboard-r2-body .resource-ring-plot>b { font-size:16px; line-height:1; letter-spacing:-.04em; }
.dashboard-r2-size { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.dashboard-r2-size>b { font-size:22px; font-weight:400; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.dashboard-disclosure,.dashboard-cpu-history .monitor-values { margin:0; border-top:1px solid var(--vien); color:var(--phu); font-size:12px; }
.dashboard-disclosure summary,.dashboard-cpu-history .monitor-values summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; padding:8px 0 0; cursor:pointer; list-style:none; }
.dashboard-disclosure summary::-webkit-details-marker,.dashboard-cpu-history .monitor-values summary::-webkit-details-marker { display:none; }
.dashboard-disclosure summary::after,.dashboard-cpu-history .monitor-values summary::after { content:'+'; font-size:18px; }
.dashboard-disclosure[open] summary::after,.dashboard-cpu-history .monitor-values[open] summary::after { content:'−'; }
.dashboard-disclosure summary:focus-visible { outline:2px solid var(--brand-text); outline-offset:4px; border-radius:4px; }
.dashboard-detail-content { padding-top:12px; }
.dashboard-detail-content p { margin:8px 0; font-size:12px; color:var(--phu); }
.dashboard-detail-content .dashboard-warning { color:var(--do); }
.dashboard-storage-card { margin-top:24px; min-width:0; grid-column:1/-1; }
.dashboard-storage-card h2 { margin:0; font-size:18px; font-weight:500; }
@media(max-width:960px) {
  .dashboard-system-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-system-grid>.dashboard-cpu-card { grid-column:1/-1; }
  .dashboard-cpu-card { grid-row:auto; }
  .dashboard-cpu-history { display:block; }
  .dashboard-services { gap:6px 12px; }
}
@media(max-width:600px) {
  .dashboard-panel,.dashboard-system-grid>.the { padding:20px; }
  .admin-dashboard .the { border-radius:24px; }
  .dashboard-system-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .dashboard-grid { gap:16px; }
  .dashboard-system-heading { align-items:flex-start; }
  .dashboard-services { width:100%; }
  .dashboard-cpu-card>.dashboard-section-heading { align-items:flex-start; flex-wrap:wrap; }
  .dashboard-cpu-card .monitor-range span { min-height:44px; padding:12px 2px; font-size:12px; }
  .dashboard-cpu-history .monitor-period { max-width:100%; overflow-x:auto; }
  .dashboard-cpu-history .monitor-chart svg { min-width:520px; }
  .dashboard-r2-size { align-items:flex-start; }
  .dashboard-panel { min-height:260px; }
}
.dashboard-exam-storage { margin-top:12px; }
.dashboard-exam-storage .table-wrap { max-width:100%; overflow-x:auto; }
.dashboard-exam-storage td:first-child { min-width:200px; }
.dashboard-exam-storage .bang th { font-size:12px; color:var(--phu); font-weight:450; padding:12px 16px; }
.dashboard-exam-storage .bang td { padding:14px 16px; font-size:13px; }
.dashboard-exam-storage .table-link { font-weight:500; text-align:left; max-width:560px; }
.dashboard-exam-storage .phu { font-size:11px; margin-top:4px; }
.dashboard-exam-storage td:last-child { font-variant-numeric:tabular-nums; }
@media(max-width:1100px) { .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid>.dashboard-panel:first-child { grid-column:1/-1; }.dashboard-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-resource-total { padding-left:0; border-left:0; } }
@media(max-width:760px) { .dashboard-grid { grid-template-columns:minmax(0,1fr); }.admin-dashboard .dashboard-heading { flex-wrap:nowrap; }.dashboard-heading>div { min-width:0; }.dashboard-heading h1 { font-size:28px; }.dashboard-heading .nut { flex-shrink:0; }.dashboard-bars { gap:8px; }.dashboard-metric { padding:18px; }.dashboard-details h3>span { display:block; margin:4px 0 0; } }
@media(max-width:380px) { .dashboard-resource-grid { grid-template-columns:1fr; } }
.grading-detail { max-width:var(--max); }.grading-workspace { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:24px;align-items:start;margin-bottom:24px; }.grading-workspace>.the { min-width:0;margin:0; }.grading-panel { padding:24px; }.grading-submissions { overflow-wrap:anywhere; }.grading-automatic { margin-bottom:24px; }.grading-panel h2 { font-size:18px; margin:0 0 14px; }.grading-panel h2:not(:first-child) { margin-top:30px; }.grading-section { border:1px solid var(--vien); border-radius:12px; margin:9px 0; }.grading-section summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; padding:16px 18px; }.grading-section summary span { color:var(--phu); }.grading-section>div { padding:0 18px 12px; }.grading-answer { display:grid; gap:5px; padding:10px 0; border-top:1px solid var(--vien); }.grading-answer span { color:var(--phu); overflow-wrap:anywhere; }.grading-writing .bai-lam { margin:12px 0; }.grading-score-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; }.grading-score-row input { width:100px; padding:10px; border:1px solid var(--vien); border-radius:9px; }.grading-feedback { display:grid; gap:12px; margin:0 0 20px; }.grading-feedback>span { font-size:18px;font-weight:500; }.grading-feedback textarea { min-height:180px; width:100%;resize:vertical; }.ai-writing-suggestion { margin:14px 0 4px; padding:14px; border:1px solid var(--vien); border-radius:12px; background:color-mix(in srgb,var(--brand-primary) 3%,white); }.ai-writing-suggestion-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.ai-writing-suggestion-head>strong { font-size:18px; }.ai-writing-score { display:flex; align-items:flex-start; gap:4px; color:var(--brand-primary); }.ai-writing-score b { font-size:28px; line-height:.9; }.ai-writing-score span { font-size:11px; padding-top:1px; }.ai-writing-suggestion ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }.ai-writing-suggestion li { display:flex; gap:8px; align-items:flex-start; }.ai-writing-suggestion li span { width:18px; font-weight:700; text-align:center; }.ai-writing-suggestion .is-met span { color:var(--thanh-cong); }.ai-writing-suggestion .is-missing span { color:var(--loi); }.ai-writing-pending { display:flex; align-items:center; gap:8px; color:var(--phu); margin:14px 0 0; }.ai-writing-pending i { width:15px; height:15px; border:2px solid color-mix(in srgb,var(--brand-primary) 25%,transparent); border-top-color:var(--brand-primary); border-radius:50%; animation:ai-writing-spin .8s linear infinite; }@keyframes ai-writing-spin{to{transform:rotate(360deg)}}
.ai-writing-score { color:#111; }
.grading-identity { display:flex;align-items:center;gap:14px;margin:12px 0; }
.grading-class { display:inline-block;font-size:13px;color:var(--phu); }
.grading-detail>.tieu-de-trang>.nhom-nut { display:grid;justify-items:end;grid-template-columns:auto auto; }
.grading-detail .nhom-nut>.result-outcome { grid-column:1/-1;justify-self:end; }
.grading-question-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start; }
.grading-question-grid .result-question { border:1px solid var(--vien);border-radius:16px;padding:18px;min-width:0;overflow-wrap:anywhere; }
.grading-question-grid [data-result-verdict=wrong] { border-color:color-mix(in srgb,var(--do) 35%,var(--vien)); }
.grading-question-grid [hidden] { display:none; }
.grading-panel .result-tabs { margin-top:0;border-radius:16px; }
.grading-score-row>div { display:flex;align-items:center;gap:8px; }
.grading-toolbar { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px; }
.grading-navigation { display:flex;justify-content:space-between;gap:16px;margin:24px 0; }
.grading-toolbar>.result-tabs { margin:0; }
.grading-toolbar>.nhom-nut { margin-left:auto; }
.grading-toolbar [data-grade-save-status]:empty { display:none; }
.grading-detail>.the { margin-bottom:24px; }
.grading-detail>.tieu-de-trang { align-items:flex-start; }
.grading-submissions .bai-lam { line-height:1.85;padding:20px;margin:0; }
.grading-submissions .bai-lam.lined-writing-paper { min-height:240px;background-color:var(--mat);white-space:pre-wrap; }
.grading-writing-empty { display:block;color:var(--phu);font-family:var(--font,Arial,sans-serif);font-size:14px;font-style:italic; }
.grading-submissions .grading-typed-paper { background:var(--mat);min-height:240px; }
.grading-detail,.result-page { max-width:1240px; }
.grading-detail .grading-hero { padding:24px 28px;margin-bottom:24px;align-items:center;border-top:3px solid var(--brand-primary); }
.grading-hero p { margin:6px 0 0; }
.grading-detail .grading-hero { display:grid;grid-template-columns:minmax(0,1fr) auto; }
.grading-hero>div:first-child { min-width:0;width:auto;overflow-wrap:anywhere; }
.grading-hero>.result-outcome { grid-column:2;grid-row:1;justify-self:end;align-self:start; }
.grading-hero>.result-stats { grid-column:1/-1; }
.grading-hero .result-stats { flex-basis:100%;width:100%; }
.result-stats strong>#gradeHeaderTotal { font:inherit;color:inherit; }
.grading-detail .grading-workspace { gap:0;background:var(--mat);border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;align-items:stretch;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); }
.grading-detail .grading-review { border-left:1px solid var(--vien);background:color-mix(in srgb,var(--surface-muted) 35%,var(--mat));display:flex;flex-direction:column; }
.grading-review .grading-feedback { flex:1; }
.grading-review .grading-feedback textarea { min-height:150px;background:var(--mat); }
.grading-review .tong-diem { margin-top:auto;padding-top:16px;border-top:1px solid var(--vien); }
.grading-review .tong-diem strong { font-size:30px;font-weight:500; }
.grading-oral { max-width:480px;margin:0 auto;padding:12px 8px 20px; }
.grading-oral-icon { display:grid;place-items:center;width:48px;height:48px;background:var(--brand-soft);color:var(--brand-text);border-radius:16px;margin-bottom:16px; }
.grading-oral-icon svg { width:24px;height:24px; }
.grading-oral h2 { margin-bottom:8px; }
.grading-oral .grading-score-row { margin-top:20px;border-top:1px solid var(--vien);padding-top:20px; }
.grading-score-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px; }
.grading-score-grid .result-bar { margin:0; }
.grading-scores>p { margin:20px 0 0;font-size:12px; }
.grading-automatic>summary { display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none; }
.grading-automatic>summary::-webkit-details-marker { display:none; }
.grading-automatic>summary strong { font-size:18px;font-weight:500; }
.grading-automatic>summary small { display:block;margin-top:4px; }
.grading-disclosure-arrow { display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;line-height:1;align-self:center; }
.grading-disclosure-arrow svg { display:block;width:20px;height:20px; }
.grading-automatic[open] .grading-disclosure-arrow { transform:rotate(180deg); }
.grading-automatic-content { margin-top:24px;border-top:1px solid var(--vien);padding-top:24px; }
.grading-automatic-content>[data-grade-tabs] { display:flow-root; }
.grading-automatic-content .result-tabs { float:left;margin:0 24px 20px 0;padding:4px;gap:4px;background:var(--surface-muted);border-color:transparent; }
.grading-automatic-content .result-filter { justify-content:flex-end;align-items:center;min-height:54px;margin:0 0 20px;gap:8px; }
.grading-automatic-content .result-tabs .nut { font-weight:500; }
.grading-automatic-content .result-tabs small { color:inherit;opacity:.7;font-weight:400; }
.grading-automatic-content .result-filter .nut { background:transparent;border-color:transparent;color:var(--phu); }
.grading-automatic-content .result-filter .nut[aria-pressed=true] { background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-border); }
.grading-automatic-content .result-part,.grading-automatic-content [data-grade-empty] { clear:both; }
@media(max-width:1100px){.grading-automatic-content .result-tabs{float:none;width:fit-content;margin:0 0 12px}.grading-automatic-content .result-filter{justify-content:flex-start;min-height:44px;margin-bottom:20px}}
.grading-automatic .result-answer-image { max-width:min(100%,220px); }
@media(max-width:900px){.grading-detail .grading-workspace{grid-template-columns:1fr}.grading-detail .grading-review{border-left:0;border-top:1px solid var(--vien)}.grading-detail .grading-hero{padding:20px;gap:16px}.grading-score-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grading-oral{max-width:none;padding:0}}
@media(max-width:480px){.grading-score-grid{grid-template-columns:1fr}.grading-detail .grading-hero{align-items:flex-start}.grading-hero .result-outcome{min-width:90px;padding:12px}.grading-hero .result-outcome strong{font-size:18px}}
@media(max-width:600px){.grading-hero .grading-identity{align-items:center;flex-direction:row;gap:10px}.grading-hero .grading-identity>div{min-width:0}.grading-hero .grading-identity h1{font-size:22px}.grading-hero .result-avatar{width:44px;height:44px;font-size:20px}.grading-hero>.result-outcome{min-width:72px;max-width:100px;padding:10px}.grading-hero>.result-outcome strong{font-size:18px}}
@media(max-width:700px){
  .grading-hero .result-stats,.result-hero .result-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .grading-hero .result-stats strong,.result-hero .result-stats strong{font-size:24px}
  .grading-hero .result-stats small,.result-hero .result-stats small{font-size:12px}
  .grading-hero .result-stats>div>span,.result-hero .result-stats>div>span{font-size:12px}
  .result-hero .result-identity{flex-direction:row;align-items:center;gap:10px}
}
.grading-history { margin:0 0 24px; }
.grading-history h2 { font-size:18px;margin:0 0 8px; }
.grading-history svg { width:100%;max-width:700px;display:block;height:auto;overflow:visible; }
.grading-history text { fill:var(--phu);font-size:12px; }
.history-axis { stroke:var(--vien); }
.history-line { fill:none;stroke:var(--brand-text);stroke-width:2; }
.history-point { fill:var(--brand-text); }
.grading-history-values { display:flex;gap:8px 20px;flex-wrap:wrap;font-size:12px;color:var(--phu); }
.grading-history-values b { font-weight:500;color:var(--chu);margin-left:4px; }
@media(max-width:900px) { .grading-workspace { grid-template-columns:minmax(0,1fr);gap:20px; }.grading-panel { padding:20px; } }
@media(max-width:680px) { .grading-question-grid { grid-template-columns:minmax(0,1fr); }.grading-detail>.tieu-de-trang>.nhom-nut { display:flex;flex-wrap:wrap;justify-content:flex-end; }.grading-history svg { min-height:120px; }.grading-identity .result-avatar { flex-shrink:0; } }
.exam-filter { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; margin:24px 0; }
.exam-filter .filter-field { display:grid; gap:8px; min-width:180px; flex:1 1 180px; max-width:280px; font-size:13px; color:var(--phu); }
.exam-filter select,.grade-filters select,.profile-form select,.access-code-create input,.exam-free-navigation select { height:var(--control-height); width:100%; }
.profile-form :is(input,select,textarea):hover:not(:disabled),.grade-filters select:hover,.exam-filter select:hover,.access-code-create input:hover { border-color:var(--control-border-hover); }
@media(max-width:600px){.exam-filter .filter-field{min-width:0;flex:1 1 40%;max-width:none}.exam-filter>.nut{width:100%}}
.thuong-hieu .logo img { display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:760px){.landing { margin:8px auto; padding:28px 22px 18px; }.landing-main { grid-template-columns:1fr; gap:30px; }.landing-copy h1 { font-size:40px; }.landing-copy p { font-size:16px; }.landing-mockup { transform:none; }.landing-bottom { flex-direction:column; gap:22px; }.landing-metrics { justify-content:space-between; gap:12px; }.dashboard-grid { grid-template-columns:1fr; }}
.thong-bao { position:fixed; right:24px; bottom:24px; z-index:100; pointer-events:none; background:#101318; color:#fff; padding:14px 20px; border-radius:16px; box-shadow:var(--shadow); font-size:14px; max-width:calc(100vw - 48px); }
.canh-bao-che-do { width:100%; padding:10px 16px 0; font-size:12px; color:var(--phu); text-align:center; }.offline { background:#fff0ee; color:var(--do); border:1px solid #f3d1cc; border-radius:12px; padding:10px 16px; margin-top:12px; text-align:center; font-size:13px; }
.rong { padding:48px 20px; text-align:center; color:var(--phu); }.loading { min-height:70vh; display:grid; place-items:center; color:var(--phu); }.ket-qua-cho { max-width:700px; margin:24px auto; text-align:center; }.ket-qua-cho .vong { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 24px; background:var(--brand-soft); color:var(--brand-text); font-size:28px; }.ket-qua-cho .vong.thanh-cong { background:#e8f7ed; color:#218447; }.chi-tiet-kq { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:24px 0; }.chi-tiet-kq .the { text-align:center; }.chi-tiet-kq b { display:block; font-size:24px; margin-top:8px; }

/* Responsive dimensions are grouped by breakpoint so they cannot be undone later. */
@media(max-width:1240px) {
  .thanh-dau { flex-wrap:wrap; gap:12px; }.thanh-ben,.site-nav { order:3; flex-basis:100%; justify-content:flex-start; overflow-x:auto; padding:2px; }.header-account { margin-left:auto; }
  .goethe-layout { grid-template-columns:224px minmax(0,1fr); }.goethe-outline,.goethe-editor { padding:20px; }.goethe-choices { gap:10px; }.goethe-choices label { gap:6px; }
}
@media(max-width:960px) {
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app { padding:16px 20px 0; }.goethe-layout,.xay-dung,.cham-bai { grid-template-columns:1fr; }.goethe-outline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.goethe-editor { min-height:0; }.danh-sach-de { grid-template-columns:repeat(2,minmax(0,1fr)); }.tong-quan-hv { grid-template-columns:repeat(4,minmax(0,1fr)); }.tong-quan-hv .o:first-child { grid-column:1/-1; }
  .hang-thong-ke { grid-template-columns:repeat(2,minmax(0,1fr)); }.ds-cham { min-height:0; }.chi-tiet-kq { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .resource-grid,.resource-breakdown { grid-template-columns:1fr; }.dashboard-infrastructure--empty { padding:18px; }
  #app { padding:12px 12px 0; }.thanh-dau { padding:10px; border-radius:18px; }.thanh-dau .logo { width:40px; height:40px; }.header-account { gap:6px; }.ten-he-thong strong { font-size:14px; }.ten-he-thong small { font-size:11px; }.muc-ben { padding:10px 14px; }.muc-ben:not(.muc-ben--icon) .ui-icon { display:none; }.muc-ben--icon { width:44px; padding:10px; }
  .khung,.khung-quan-tri,.goethe-builder { padding:24px 0 32px; }.tieu-de-trang { align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:24px; }.tieu-de-trang>div:first-child { flex-basis:100%; }.tieu-de-trang h1 { font-size:30px; }.tieu-de-trang>.nhom-nut { width:100%; }.tieu-de-trang>.nhom-nut .nut { flex:1; }
  .table-wrap { border-radius:18px; }.bang th,.bang td { padding:14px 16px; }.the,.thong-ke,.goethe-outline,.goethe-editor,.ds-cham,.phieu-cham { padding:18px; border-radius:20px; }.thong-ke b { font-size:30px; }.danh-sach-de { grid-template-columns:1fr; }.tong-quan-hv { grid-template-columns:1fr 1fr; }.tong-quan-hv .o b { font-size:24px; }.bo-loc { display:grid; grid-template-columns:1fr; }.truong,.truong.tim { min-width:0; width:100%; }
  .goethe-outline { grid-template-columns:1fr; gap:24px; }.goethe-skill { display:grid; grid-template-columns:repeat(var(--part-columns,1),minmax(0,1fr)); gap:12px 8px; }.goethe-skill>div { grid-column:1/-1; margin-bottom:0; }.goethe-part { display:grid; gap:2px; justify-content:start; border-radius:14px; padding:10px 8px; margin:0; min-width:0; }.goethe-part small { font-size:11px; }
  .goethe-question-row,.goethe-instruction--media,.goethe-instruction--with-audio,.goethe-free-response { grid-template-columns:1fr; }.goethe-question-row>textarea { height:104px; min-height:104px; }.goethe-question-side { grid-template-columns:1fr; grid-template-rows:auto; gap:12px; align-items:start; }.goethe-score { grid-template-columns:minmax(80px,1fr) repeat(3,var(--editor-control)); gap:6px; }
  .goethe-instruction-actions { grid-template-columns:auto minmax(0,1fr); }.goethe-choices { grid-template-columns:1fr; gap:12px; }.goethe-choices label>input:last-child { font-size:16px; }.goethe-choices--true-false { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .writing-form-row { grid-template-columns:minmax(0,1fr) var(--editor-control) var(--editor-control); padding-block:12px; border-bottom:1px solid var(--vien); }.writing-form-row>input,.writing-form-row>select,.rubric-image-upload { grid-column:1/-1; }.writing-form-row>label { grid-column:1; }.writing-response-form--framed { padding:20px 16px; }.writing-display-group { grid-template-columns:1fr; gap:6px; }.writing-display-label { padding-top:0; }
  .hop-chon { padding:12px; }.noi-hop { padding:24px 20px; border-radius:24px; max-height:94dvh; }.dau-hop h2 { font-size:26px; }.exam-setup-grid { grid-template-columns:1fr; }.exam-setup-name { grid-column:auto; }.chan-hop { gap:16px; }.chan-hop>.phu-de { flex-basis:100%; }.chan-hop>.nhom-nut { margin-left:auto; }.luoi-chon { grid-template-columns:1fr; }.exam-setup-grid input,.exam-setup-grid select,.truong,.exam-filter select,.grade-filters select,.profile-form input,.profile-form select,.profile-form textarea,.access-code-create input { font-size:16px; }
  .thanh-thi { padding:14px 16px; border-radius:18px; }.thong-tin-thi { gap:8px; font-size:12px; }.exam-time-label { display:none; }.noi-dung-thi { padding:24px 0; }.exam-context h1 { font-size:28px; }.exam-instruction,.question-stimulus { padding:18px; border-radius:20px; }.cau-thi { padding:18px; border-radius:20px; }.answer-options,.matching-row,.writing-display-group { grid-template-columns:1fr; }
  .exam-mobile-brand img { display:block; }.exam-mobile-brand strong { font-size:14px; white-space:nowrap; }.question-stimulus img,.question-inline-image img,.exam-instruction img,.exam-paper .exam-instruction img { width:100%; max-width:100%; height:auto; max-height:none; }
  .exam-paper .answer-options--mobile-three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .exam-paper .answer-options--illustrated:has(> .answer-option:nth-child(3)):not(:has(> .answer-option:nth-child(4))) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .exam-paper .answer-options--illustrated:has(> .answer-option:nth-child(3)):not(:has(> .answer-option:nth-child(4))) .answer-option-body { padding:8px 6px; font-size:12px; gap:8px; }
  .exam-paper .answer-options--mobile-three .answer-option-body { padding:8px 6px; font-size:12px; }
  .builder-heading { gap:12px; }.builder-back { font-size:12px; }.builder-save-status { flex-basis:100%; padding:0; }
  .thi--preview .thanh-thi { display:block; }.preview-header-row { gap:8px; }.preview-shell { gap:24px; }.preview-section-picker .truong { max-width:100%; }.preview-outline>.preview-progress { margin-left:0; margin-right:auto; }.preview-progress-track { width:48px; }.exam-paper { padding:20px; border-radius:20px; }.preview-question-heading { flex-direction:column; gap:12px; }.exam-paper .answer-options--illustrated .answer-option-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-items:center; }.exam-paper .answer-options--illustrated .answer-option-body>img { grid-column:1/-1; grid-row:1; width:100%; height:auto; max-height:none; }.exam-paper .answer-options--illustrated .answer-option-body>span { grid-column:1; grid-row:2; }
  .dieu-huong-thi { flex-wrap:nowrap; gap:8px; }.dieu-huong-thi .tien-do { white-space:nowrap; font-size:12px; }.dieu-huong-thi .nut { min-width:80px; padding:10px 12px; font-size:13px; }.audio-thi { align-items:flex-start; flex-direction:column; }.dang-nhap { display:block; margin:32px auto; }.dang-nhap .gioi-thieu { display:none; }.dang-nhap .hop-dang-nhap { padding:28px 24px; }
}
@media(max-width:420px) {
  .goethe-question-side { grid-template-columns:1fr; }.thanh-dau .thuong-hieu { gap:8px; }.goethe-choices--true-false { grid-template-columns:1fr; }.question-profile-row { gap:6px; }.question-profile-field { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.access-toggle{display:flex;align-items:center;gap:12px}.access-toggle input{width:20px;height:20px;min-height:0}.exam-code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line,#e5e7eb)}.exam-code-row strong{letter-spacing:.15em}.promotion-celebration{text-align:center;padding:24px}.promotion-celebration>span{display:inline-grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#e7f6ef;color:#188454;font-size:44px}.promotion-celebration h2{margin-top:24px}
.learner-card{margin-bottom:24px;overflow:hidden}.learner-identity{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.learner-details{flex:1;min-width:160px}.learner-name{display:flex;align-items:center;gap:8px;min-width:0}.learner-name h1{font-size:clamp(22px,3vw,30px);margin:0 0 4px;overflow-wrap:anywhere}.learner-name .icon-btn{flex-shrink:0}.learner-name-editor{flex:1;min-width:0}.learner-name-editor input{width:100%}.learner-name [hidden]{display:none}.learner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.learner-avatar{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;flex-shrink:0;overflow:hidden;font-size:22px}.learner-avatar img{width:100%;height:100%;object-fit:cover}.learner-emblem{width:60px;height:68px;flex-shrink:0;clip-path:polygon(50% 0,95% 23%,90% 73%,50% 100%,10% 73%,5% 23%);background:var(--brand-primary);color:var(--brand-on-primary);display:grid;place-items:center;font-size:23px;font-weight:600}.learner-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid var(--vien);margin-top:20px;padding-top:20px}.learner-stats>div{display:flex;flex-direction:column;gap:8px}.learner-stats span{font-size:13px;color:#666b73}.learner-stats strong{font-size:22px;font-weight:500}.learner-share-status:empty{display:none}@media(max-width:600px){.learner-identity{gap:12px}.learner-details{min-width:0;flex-basis:calc(100% - 136px)}.learner-actions{width:100%;margin-left:0}.learner-actions .nut{flex:1;padding-inline:12px}.learner-avatar{width:44px;height:44px}.learner-emblem{width:52px;height:60px;font-size:21px}.learner-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exam-free-navigation{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:16px 0 24px;flex-wrap:wrap}.exam-free-navigation label{display:grid;gap:8px}#site-confirm-message{max-height:50vh;overflow:auto;overflow-wrap:anywhere}
.exam-access-dialog .noi-hop { width:min(600px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; }
.exam-access-dialog h3 { font-size:15px; font-weight:500; margin:0 0 12px; }
.access-exam-title { color:var(--phu); margin:4px 0 20px; overflow-wrap:anywhere; font-size:13px; }
.exam-access-dialog .access-section { padding:20px 0; border-top:1px solid var(--vien); }
.exam-access-dialog .profile-form { gap:0; }
.exam-access-dialog .access-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; padding:16px; border:1px solid var(--control-border); border-radius:var(--r-sm); }
.access-toggle span { display:grid; gap:4px; }
.access-toggle strong { font-weight:500; }
.access-toggle small { color:var(--phu); }
.exam-access-dialog .access-toggle input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--brand-primary); }
.access-section select { width:100%; }
.access-level-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,1fr); gap:16px; align-items:center; }
.access-level-row h3 { margin:0; }
.access-save,.access-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.access-save { padding-bottom:20px; }
.access-save [role=status] { font-size:13px; color:var(--xanh); }
.access-section-heading h3 { margin:0; }
.access-code-create { display:flex; align-items:end; gap:12px; margin:16px 0 8px; }
.access-code-create label { display:grid; gap:8px; flex:1; min-width:0; font-size:13px; color:var(--phu); }
.access-code-create input { width:100%; min-width:0; color:var(--chu); }
.exam-access-dialog .exam-code-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--vien); gap:16px; }
.exam-code-row>div { display:grid; gap:4px; }
.exam-code-row strong { font-size:20px; letter-spacing:3px; }
.exam-code-row small { color:var(--phu); }
.access-empty { padding:20px; text-align:center; background:var(--surface-muted); border-radius:var(--r-sm); margin-top:16px; color:var(--phu); font-size:13px; }
.exam-access-dialog .access-error { color:var(--do); }
.exam-access-dialog [role=status]:empty { display:none; }
@media(max-width:480px) { .access-code-create,.access-save { align-items:stretch; flex-direction:column; }.access-level-row{grid-template-columns:1fr;gap:12px} }
.class-teachers{border:0;padding:0;margin:0;min-width:0}.class-teachers legend{font-weight:500}.class-teacher-options{display:grid;gap:8px;max-height:280px;overflow:auto}.class-form .class-teacher-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--vien,#e5e7eb);border-radius:12px;cursor:pointer}.class-form .class-teacher-option:has(input:checked){background:var(--brand-soft);border-color:var(--brand-border)}.class-form .class-teacher-option input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--brand-primary)}.class-teacher-avatar{width:32px;height:32px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--brand-soft);display:inline-grid;place-items:center;font-size:12px}.class-teacher-avatar img{width:100%;height:100%;object-fit:cover}.class-teacher-chips{display:flex;gap:8px;flex-wrap:wrap}.class-teacher-chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.class-description{max-width:320px;white-space:pre-wrap;overflow-wrap:anywhere}.class-form textarea{resize:vertical;min-height:88px}
.table-link.grade-attempt--graded { color:var(--xanh); }
.confirmation-copy { position:relative; display:inline-flex; flex:none; }
.confirmation-copy-tooltip { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 4px); z-index:3; padding:5px 10px; border-radius:8px; background:var(--chu); color:var(--mat); font-size:12px; white-space:nowrap; pointer-events:none; }
.roster-search { width:min(360px,100%); margin-bottom:20px; }
.user-list-filters { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.user-list-filters #userSearch { width:min(360px,100%); margin-left:auto; }
@media(max-width:680px) { .user-list-filters #userSearch { width:100%; margin-left:0; } }
.image-remove-control { position:relative; overflow:visible; margin-right:12px; }
.image-remove-button { position:absolute; top:-8px; right:-10px; z-index:5; width:28px; height:28px; padding:0; border:1px solid var(--vien); border-radius:50%; background:#fff; color:#b42318; font-size:22px; line-height:1; cursor:pointer; display:none; }
.image-remove-control:has(img):hover>.image-remove-button,
.image-remove-control:has(img):focus-within>.image-remove-button { display:grid; place-items:center; }
.image-remove-button:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }
@media (hover:none) { .image-remove-control:has(img)>.image-remove-button { display:grid; place-items:center; } }

/* Matching tables are edited as one group, not a stack of question cards. */
.student-result-list { display:grid; gap:16px; }
.tieu-de-trang.exam-list-heading { flex-wrap:nowrap; align-items:center; gap:12px; }
.tieu-de-trang.exam-list-heading > div:first-child { flex:1 1 auto; min-width:0; }
.exam-list-heading > .nut { flex:0 0 auto; white-space:nowrap; }
.instruction-content { display:grid; gap:12px; min-width:0; }
.landing-copy p > strong { color:#d4a800; }
.class-picker-field { position:relative; display:block; width:100%; }
.profile-form .class-picker-field > input { width:100%; padding-right:80px; }
.class-picker-field > .class-picker-clear { position:absolute; right:34px; top:50%; transform:translateY(-50%); width:32px; height:32px; min-height:32px; padding:6px; border:0; background:transparent; }
.class-picker-field > .class-picker-clear[hidden] { display:none; }
.user-role-name { display:inline-flex; align-items:center; gap:8px; }
.user-role-icon { display:inline-flex; flex:none; }
.user-role-icon .ui-icon { width:16px; height:16px; }
.user-role-name--teacher { color:#2563a6; }
.paired-question-group { display:grid; gap:16px; margin:0; }
.paired-question-group > .goethe-question + .goethe-question { border-top:0; padding-top:0; }
.paired-question-group > h3 { margin:0; font-size:18px; }
.exam-question-pair { display:grid; gap:16px; margin:0 0 40px; min-width:0; }
.exam-question-pair--example { padding:18px; border:1px solid var(--example-border); border-radius:var(--r); background:var(--example-bg); }
.exam-question-pair--example > .question-example-title { margin-bottom:0; }
.exam-paper .to-thi .exam-question-pair > .cau-thi,
.exam-paper .to-thi .exam-question-pair > .cau-thi:is(:first-child,:last-child),
.exam-paper .exam-question-pair.exam-question-pair--example > .cau-thi.is-example,
.exam-paper .exam-question-pair.exam-question-pair--example > .cau-thi.is-example:is(:first-child,:last-child),
.exam-paper .to-thi .exam-question-pair > .cau-thi.is-example:is(:first-child,:last-child) { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.exam-question-pair:last-child { margin-bottom:0; }
.exam-reading-split .to-thi > .cau-thi:not(.is-example) { padding-block:12px; }
.exam-stimulus-group + .exam-stimulus-group { margin-top:24px; }
.exam-reading-split .to-thi > .cau-thi:not(.is-example):first-child { padding-top:0; }
.exam-reading-split .to-thi > .cau-thi:not(.is-example):last-child { padding-bottom:0; }
.exam-reading-split .to-thi > .exam-question-pair--example { margin-bottom:12px; }
.exam-paper [data-stimulus-order] { min-width:0; }
.exam-last-edit { white-space:nowrap; font-size:13px; color:var(--phu); font-variant-numeric:tabular-nums; }
.exam-paper [data-stimulus-order] > .cau-thi:not(.is-example) { padding:12px 0; margin:0; }
.exam-paper [data-stimulus-order] > .exam-question-pair--example { margin-bottom:16px; }
.exam-paper .to-thi > [data-stimulus-order] + [data-stimulus-order] { margin-top:16px; }
.paired-part-editor [data-action="add-inline-question"],.paired-part-editor [data-action="remove-inline-question"],.paired-part-editor [data-action="toggle-question-example"] { display:none; }
.instruction-content > textarea { width:100%; }
.instruction-audio { display:grid; gap:8px; max-width:420px; }
.instruction-audio > span { font-size:13px; color:var(--phu); }
.goethe-instruction--with-audio { grid-template-columns:minmax(0,1fr) minmax(120px,224px); align-items:start; }
.goethe-instruction--with-audio .instruction-audio { min-width:0; width:100%; align-content:start; }
@media(max-width:700px) {
  .goethe-instruction--with-audio { grid-template-columns:minmax(0,1fr); gap:16px; }
  .goethe-instruction .instruction-content textarea { min-height:160px; }
  .goethe-instruction--media[data-section-image-control] .goethe-instruction-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
  .goethe-instruction-actions .instruction-audio { grid-column:1/-1; max-width:none; }
  .goethe-instruction-actions .goethe-instruction-icons { grid-column:2; grid-row:2; flex-wrap:nowrap; height:auto; }
  .goethe-instruction-actions .section-image-upload { grid-column:1; grid-row:2; }
}
.goethe-instruction[data-has-image="false"] [data-action="clear-section-image"] { display:none; }
.publish-error-list { display:grid; gap:16px; margin:20px 0; padding-left:24px; max-height:55vh; overflow:auto; overflow-wrap:anywhere; }
.student-result-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:24px; padding:24px; border:1px solid var(--vien); border-radius:24px; background:#fff; }
.student-result-info h2 { margin:0; font-size:18px; font-weight:550; line-height:1.4; overflow-wrap:anywhere; }
.student-result-info h2.passed { color:var(--xanh); }
.student-result-info h2.failed { color:var(--do); }
.bang thead th { white-space:nowrap; }
.table-link.exam-title-status.is-published { color:var(--brand-text); }
.bang tbody tr:has(.exam-title-status.is-published) { background:color-mix(in srgb,var(--brand-primary) 3%,var(--mat)); }
.bang tbody tr:has(.exam-title-status.is-published):hover { background:color-mix(in srgb,var(--brand-primary) 6%,var(--mat)); }
.release-update { position:fixed; z-index:12000; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100vw - 32px); padding:16px 20px; border:1px solid var(--vien); border-radius:16px; background:var(--mat); color:var(--chu); box-shadow:0 8px 32px #0002; font-size:14px; line-height:1.5; pointer-events:none; }
.release-update-spinner { flex:none; width:18px; height:18px; border:2px solid var(--vien); border-top-color:var(--brand-primary); border-radius:50%; animation:release-spin .8s linear infinite; }
@keyframes release-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .release-update-spinner { animation:none; } }
.table-link.exam-title-status.is-draft { color:var(--phu); }
.student-result-info p { margin:8px 0 0; color:var(--phu); font-size:13px; }
.student-result-outcome { display:flex; align-items:center; gap:20px; }
.student-result-score { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.student-result-score strong { font-size:32px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; }
.student-result-score span { color:var(--phu); font-size:13px; }
.student-result-badge { padding:6px 12px; border-radius:999px; background:#eef1f3; color:#43515a; font-size:14px; font-weight:500; }
.student-result-badge.passed { background:#e5f4ec; color:#145c37; }
.student-result-badge.failed { background:#fbe9e6; color:#9b2720; }
.student-results-empty { text-align:center; padding:40px 24px; }
.student-results-empty p { margin:12px 0 24px; color:var(--phu); }
@media(max-width:700px) {
  .student-result-row { grid-template-columns:minmax(0,1fr) auto; gap:20px 12px; padding:20px; border-radius:20px; }
  .student-result-info { grid-column:1/-1; }
  .student-result-outcome { flex-wrap:wrap; gap:12px; }
  .student-result-score strong { font-size:28px; }
}

.letter-group-editor { display:grid; gap:20px; margin-top:20px; }
.letter-group-toolbar { display:flex; flex-wrap:wrap; gap:16px; align-items:end; }
.letter-group-toolbar label { display:grid; gap:8px; color:var(--phu); font-size:13px; }
.letter-group-toolbar label:first-child { width:240px; max-width:100%; }
.letter-group-toolbar label:last-child { width:140px; }
.letter-group-editor .truong { height:var(--editor-control); min-width:0; width:100%; }
.letter-group-audio { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:720px; }
.letter-group-audio > div { display:grid; gap:8px; min-width:0; }
.letter-group-audio > div > span { font-size:13px; color:var(--phu); }
.letter-group-scroll { overflow-x:auto; }
.letter-group-table { width:100%; max-width:900px; border-collapse:separate; border-spacing:0 8px; min-width:420px; }
.letter-group-table th { text-align:left; font-size:13px; font-weight:500; color:var(--phu); padding:0 12px 4px 0; }
.letter-group-table td { padding:0 12px 0 0; vertical-align:middle; }
.letter-group-table th:first-child { width:84px; }
.letter-group-table th:nth-child(3) { width:128px; }
.letter-group-table th:last-child { width:40px; }
.letter-group-table th:nth-child(4) { width:116px; }
.letter-group-table .nhom-nut { flex-wrap:nowrap; }
.compact-score { display:inline-flex; align-items:center; gap:4px; width:64px; flex:0 0 64px; height:var(--editor-control); padding:0 8px; border:1px solid var(--control-border); border-radius:var(--r-sm); background:var(--mat); }
.compact-score input { width:2ch; min-width:0; flex:1; padding:0; border:0; background:transparent; text-align:center; appearance:textfield; }
.compact-score input::-webkit-inner-spin-button,.compact-score input::-webkit-outer-spin-button { appearance:none; margin:0; }
.compact-score span { flex:none; }
.gap-score-row { display:flex; gap:8px; align-items:center; }
.gap-score-row > .gap-option { flex:1; min-width:0; }
.gap-options-editor fieldset > .compact-score { grid-column:1/-1; }
.letter-group-table td:last-child { padding-right:0; }
.letter-group-table small { color:var(--phu); white-space:nowrap; }
.letter-group-table .letter-builder-answer { margin:0; padding:0; display:block; }
.letter-group-table .letter-builder-answer > label { display:none; }
.letter-group-editor > .nut { justify-self:start; }
@media(max-width:600px) { .letter-group-audio { grid-template-columns:1fr; } }

/* Inline sentence gaps share the existing letter-answer controls. */
.inline-gap-editor, .gap-options-editor { display:grid; gap:16px; }
.gap-options-editor [data-gap-options-count] { display:grid; gap:12px; }
.gap-article-editor { display:grid; gap:20px; padding:24px; border:1px solid var(--vien); border-radius:24px; min-width:0; }
.gap-article.writing-paper { width:calc(100% - 12px); max-width:760px; margin:8px auto 16px; min-width:0; gap:20px; }
.inline-gap-paper .gap-sentences { margin-top:8px; }
.inline-gap-paper .letter-answer-error { grid-column:1 / -1; }
.gap-article h2 { text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.gap-article-image { width:100%; height:auto; justify-self:center; }
.gap-article-editor { grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:16px; }
.gap-article-editor .gap-title-input { height:100%; min-height:calc(var(--editor-control) * 2 + 8px); min-width:0; width:100%; resize:vertical; text-align:left; }
.gap-article-editor .gap-author-text { grid-column:1 / -1; }
.gap-image-editor { display:grid; gap:8px; align-self:start; min-width:0; }
.gap-image-editor .goethe-instruction-icons { display:grid; grid-template-columns:minmax(0,1fr) var(--editor-control); gap:8px; }
.gap-image-editor .instruction-image-width { width:100%; min-width:0; height:var(--editor-control); }
.gap-image-editor .section-image-upload { height:var(--editor-control); min-height:0; }
.gap-image-editor .section-image-label img { width:auto; max-width:100%; height:32px; object-fit:contain; }
@media(max-width:600px) { .gap-article-editor { padding:16px; border-radius:20px; } }
@media(max-width:600px) { .gap-article-editor { grid-template-columns:minmax(0,1fr) 120px; gap:12px; } }
.inline-gap-editor { margin-top:24px; }
.inline-gap-editor .gap-author-text { min-height:280px; width:100%; resize:vertical; }
.gap-option { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:12px; }
.gap-option-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-bottom:12px; }
.gap-option-row .gap-option { margin:0; min-width:0; }
.gap-option .truong { height:var(--editor-control); min-width:0; width:100%; }
.gap-answer-mapping { display:grid; gap:12px; min-width:0; padding-top:16px; border-top:1px solid var(--vien); }
.gap-passage { white-space:pre-wrap; line-height:2; overflow-wrap:anywhere; }
.inline-gap { --gap-control-height:32px; position:relative; display:inline-flex; align-items:center; min-height:var(--gap-control-height); margin:4px; max-width:calc(100% - 8px); vertical-align:middle; white-space:nowrap; line-height:1; }
.inline-gap select[data-option-texts], .inline-gap select[data-option-texts]:has(option:checked:not([value=""])) { color:transparent; }
.inline-gap-value { position:absolute; left:8px; pointer-events:none; color:var(--brand-on-primary); font-weight:600; font-size:14px; }
.inline-gap select[hidden] { display:none; }
.inline-gap:has(select[data-option-texts]:not([hidden])) .inline-gap-value { position:relative; left:0; display:inline-flex; align-items:center; min-height:var(--gap-control-height); min-width:40px; padding:0 8px; }
.inline-gap select[data-option-texts]:not([hidden]) { position:absolute; inset:0; width:100%; height:100%; }
.inline-gap-trigger { width:auto; min-width:56px; min-height:36px; border:1px solid var(--brand-primary); border-radius:8px; padding:0 24px 0 8px; background-color:var(--brand-primary); background-position:right 6px center; background-size:12px; color:var(--brand-on-primary); font-weight:600; }
.inline-gap-trigger[data-answered="true"] { background-color:color-mix(in srgb,var(--xanh) 14%,var(--mat)); border-color:var(--xanh); color:var(--xanh); }
.letter-picker-dialog { width:calc(100% - 24px); max-width:720px; max-height:80vh; max-height:80dvh; padding:0; border:1px solid var(--vien); border-radius:20px; background:var(--mat); color:var(--chu); white-space:normal; box-shadow:var(--shadow); }
.letter-picker-dialog::backdrop { background:rgb(0 0 0 / .35); }
.letter-picker-dialog header { position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:16px 60px 16px 16px; background:var(--mat); border-bottom:1px solid var(--vien); }
.letter-picker-dialog header button { position:absolute; top:8px; right:8px; width:44px; height:44px; }
.letter-picker-options { display:grid; gap:8px; padding:12px; }
.letter-picker-option { width:100%; min-height:44px; text-align:left; white-space:normal; overflow-wrap:anywhere; padding:12px; border:1px solid var(--vien); border-radius:12px; background:var(--mat); font-size:16px; font-weight:400; }
.letter-picker-option[aria-pressed="true"] { border-color:var(--brand-primary); background:var(--brand-soft); color:var(--brand-text); }
.inline-gap:has(option:checked:not([value=""])) .inline-gap-value { color:var(--xanh); }
.inline-gap select { width:56px; min-width:56px; height:32px; min-height:32px; padding:0 24px 0 8px; border-radius:8px; font-size:14px; line-height:1; background-position:right 6px center; background-size:12px; background-color:var(--brand-primary); border-color:var(--brand-primary); color:var(--brand-on-primary); font-weight:600; }
@media(pointer:coarse) { .inline-gap { --gap-control-height:36px; } .inline-gap select { height:36px; min-height:36px; font-size:16px; } .inline-gap-value,.inline-gap-trigger { font-size:16px; } }
.inline-gap select option { background-color:var(--mat); color:var(--chu); }
.gap-passage .inline-gap select,.gap-passage .inline-gap-trigger { background-image:none; padding-inline:8px; min-width:40px; }
.gap-passage .inline-gap .inline-gap-value { padding-inline:8px; min-width:40px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.inline-gap select:has(option:checked:not([value=""])) { background-color:color-mix(in srgb,var(--xanh) 14%,var(--mat)); border-color:var(--xanh); color:var(--xanh); }
.inline-gap-paper .gap-sentences p { font-weight:400; }
.inline-gap-paper .gap-sentences b { font-weight:600; }
.exam-paper .answer-options--short { grid-template-columns:repeat(var(--answer-columns),minmax(0,1fr)); gap:8px; }
.exam-paper .answer-options--long { grid-template-columns:minmax(0,1fr); }
.exam-paper .answer-options--short .answer-option-body { min-height:44px; padding:10px 8px; }
@media(min-width:761px) { .exam-reading-split > .split-follow { position:sticky; top:var(--split-top,16px); align-self:start; } }
.gap-demo { background:var(--brand-soft); border-radius:8px; padding:4px 8px; }
.gap-sentences { margin-top:24px; display:grid; gap:12px; }
.gap-choice-bank { columns:4; column-gap:24px; margin-top:24px; }
.gap-choice-group { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; break-inside:avoid; margin-bottom:20px; }
.gap-choice-group>b { color:var(--brand-text); font-weight:500; }
.gap-choice-group p { display:flex; gap:8px; margin:0 0 4px; font-weight:400; }
.gap-choice-group p>span:last-child { min-width:0; overflow-wrap:anywhere; }
@media(max-width:960px){ .gap-choice-bank { columns:2; column-gap:16px; } }
@media(max-width:380px){ .gap-choice-bank { columns:1; } }
.gap-sentences p { margin:0; display:flex; gap:16px; }
.inline-gap-paper .gap-sentences p { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:baseline; gap:12px; }
.inline-gap-paper .gap-sentences p>span { min-width:0; overflow-wrap:anywhere; }
.inline-gap-paper.exam-reading-split>.gap-choice-bank { columns:2; margin-top:8px; }
.gap-author-help { grid-column:1 / -1; margin:0; color:var(--phu); font-size:12px; line-height:1.5; }
.cau-thi--binary { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.cau-thi--binary>.preview-question-heading { flex:1 1 240px; min-width:0; }
.cau-thi--binary>.answer-options { display:flex; flex:0 0 auto; gap:8px; margin:0; }
.cau-thi--binary>.answer-options .answer-option-body { justify-content:center; min-width:64px; min-height:44px; padding:10px 14px; white-space:nowrap; }
.cau-thi--binary>:not(.preview-question-heading):not(.answer-options) { flex-basis:100%; }
.heading-match-question { margin-top:24px; }
.builder-question-number { grid-column:1/-1; margin-bottom:8px; color:var(--chu); font-size:14px; font-weight:600; }
.heading-match-question p { white-space:pre-wrap; }
.heading-match-question > div { display:flex; align-items:center; gap:8px; }
.heading-match-question .inline-gap { display:inline-flex; align-items:center; flex:0 1 auto; min-width:0; max-width:100%; margin:0; }
.heading-match-question .inline-gap-trigger { width:auto; max-width:100%; min-height:44px; padding:10px 12px; background-image:none; white-space:normal; overflow-wrap:anywhere; text-align:left; font-weight:600; }
.heading-match-question .inline-gap-trigger[data-answered="false"] { background-color:var(--mat); border-color:var(--control-border); color:var(--phu); }
.heading-match-question .inline-gap-trigger:hover { border-color:var(--brand-primary); }
[data-editor-mode="heading-match"] { display:grid; gap:12px; }
.heading-answer-row { display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:12px; max-width:420px; }
.heading-answer-row>label { display:grid; gap:6px; min-width:0; color:var(--phu); font-size:13px; }
.heading-answer-row .truong { width:100%; min-width:0; height:var(--editor-control); color:var(--chu); }
.heading-option-row { display:grid; grid-template-columns:20px minmax(0,1fr) var(--editor-control) var(--editor-control); gap:8px; align-items:center; }
[data-editor-mode="heading-match"] textarea { min-height:140px; }
.gap-options-editor fieldset { min-width:0; border:1px solid var(--vien); border-radius:12px; padding:12px; display:grid; gap:8px; }
.inline-gap-editor--positions { grid-template-columns:minmax(0,1fr); }
.inline-gap-editor--positions fieldset { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.inline-gap-editor--positions .gap-choice-edit { min-width:0; gap:8px; }
.gap-options-editor fieldset[hidden] { display:none; }
.gap-choice-edit { display:flex; align-items:center; gap:12px; min-height:44px; }
.gap-choice-edit > input[type="radio"] { flex:0 0 auto; }
.gap-choice-edit > .truong { flex:1; min-width:0; }
.gap-options-editor [data-gap-options] { min-height:320px; }
.thi .viet.lined-writing-paper,.grading-submissions .bai-lam.lined-writing-paper { line-height:32px; padding:16px 20px; border:1px solid var(--vien,#dfe1e5); border-radius:12px; font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive; font-size:18px; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--vien,#dfe1e5) 31px,var(--vien,#dfe1e5) 32px); background-origin:content-box; }
.thi .viet.lined-writing-paper { min-height:400px; }
.goethe-score.goethe-score--writing { grid-template-columns:minmax(80px,1fr) repeat(4,var(--editor-control)); }
.goethe-question-row:has(.goethe-score--audio) { grid-template-columns:minmax(0,1fr); }
.goethe-question-side:has(.goethe-score--audio) { grid-template-rows:auto; }
.goethe-score.goethe-score--audio { grid-template-columns:60px minmax(0,1fr) repeat(3,var(--editor-control)); gap:6px; align-items:center; }
.goethe-score--audio>label:first-child { padding:0 8px; justify-content:space-between; gap:4px; }
.goethe-score--audio>label:first-child>span { display:inline; flex:none; }
.goethe-score--audio input[type=number] { width:2ch; min-width:2ch; text-align:center; }
.goethe-score--audio .audio-upload { min-width:0; width:100%; }
.part-question > .goethe-score--audio { grid-column:1/-1; margin-bottom:12px; }
.goethe-question-row:has(> .goethe-question-side:empty) { grid-template-columns:minmax(0,1fr); }
.goethe-question-side:empty { display:none; }
.button-tooltip { position:fixed; z-index:1000; width:max-content; max-width:calc(100vw - 16px); padding:6px 10px; border-radius:8px; background:var(--chu); color:var(--mat); font-size:12px; line-height:1.4; text-align:center; pointer-events:none; }
.button-tooltip--image { white-space:pre-line; }
.button-tooltip--image-width { white-space:pre-line; max-width:min(240px,calc(100vw - 16px)); }
.reading-blocks-editor { display:grid; gap:16px; margin:20px 0; }
.reading-block-editor { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
.reading-block-image { position:relative; border:1px solid var(--vien); border-radius:12px; display:grid; place-items:center; overflow:hidden; cursor:pointer; }
.reading-block-image input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.reading-block-image img { width:100%; height:100px; object-fit:contain; }
.reading-block-fields { display:grid; gap:8px; min-width:0; }
.reading-block-heading { display:flex; align-items:center; gap:8px; }
.reading-block-heading input { min-width:0; flex:1; }
.reading-block-heading .icon-btn { flex-shrink:0; }
.reading-block-fields textarea { height:auto; min-height:120px; min-width:0; width:100%; resize:vertical; }
.reading-block { display:flow-root; margin-top:24px; }
.exam-paper .exam-instruction .reading-block > img { float:left; width:88px; height:auto; margin:0 16px 8px 0; border-radius:0; }
.reading-block > div { min-width:0; }
.reading-block h3 { margin:0 0 4px; font-size:inherit; font-weight:600; }
.reading-block h3 > b { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; border:1px solid #f5cf32; border-radius:50%; background:#f8d438; color:#171717; font-size:14px; vertical-align:middle; }
.letter-answers [data-letter-answer], .text-bold { font-weight:600; }
.reading-block p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:600px) { .reading-block-editor { grid-template-columns:64px minmax(0,1fr); gap:8px; } .exam-paper .exam-instruction .reading-block > img { width:64px; } }
.monitor-range { display:flex; gap:6px; margin:16px 0; }
.monitor-range label { position:relative; cursor:pointer; }
.monitor-range input { position:absolute; opacity:0; }
.monitor-range span { display:block; padding:10px 16px; border-radius:var(--pill); background:var(--surface-muted); }
.monitor-range input:checked + span { background:var(--brand-primary); color:var(--brand-on-primary); }
.monitor-range input:focus-visible + span { outline:2px solid var(--chu); }
.monitor-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.monitor-chart { min-width:0; }
.monitor-chart header,.monitor-r2-status { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0; }
.monitor-chart strong { font-size:24px; font-weight:500; }
.monitor-chart svg { width:100%; display:block; overflow:visible; }
.monitor-chart svg text { fill:var(--phu); font:9px var(--font-ui); }
.monitor-grid { stroke:var(--vien); fill:none; }
.monitor-line { stroke:var(--brand-primary); stroke-width:2; fill:none; }
.monitor-dot { fill:var(--brand-primary); }
.monitor-error { fill:var(--do); }
.monitor-empty { height:134px; display:grid; place-items:center; color:var(--phu); font-size:13px; }
.monitor-period { display:none; }
.dashboard-infrastructure:has(.monitor-range input[value="1"]:checked) .monitor-period--1,
.dashboard-infrastructure:has(.monitor-range input[value="24"]:checked) .monitor-period--24,
.dashboard-infrastructure:has(.monitor-range input[value="168"]:checked) .monitor-period--168,
.dashboard-infrastructure:has(.monitor-range input[value="720"]:checked) .monitor-period--720,
.dashboard-infrastructure:has(.monitor-range input[value="8760"]:checked) .monitor-period--8760 { display:block; }
.monitor-values { margin:12px 0; color:var(--phu); font-size:12px; }
.monitor-values summary { cursor:pointer; padding:8px 0; }
.monitor-values > div { max-height:200px; overflow:auto; }
.monitor-values table { width:100%; }
@media(max-width:700px) { .monitor-charts { grid-template-columns:minmax(0,1fr); gap:20px; } }
.audio-upload { overflow:visible; }
.audio-remove { position:absolute; top:-10px; right:-6px; z-index:2; display:grid; place-items:center; width:24px; height:24px; padding:3px; border:1px solid var(--vien); border-radius:50%; color:var(--do); background:var(--mat); }
.audio-remove[hidden] { display:none; }
.audio-remove .ui-icon { width:16px; height:16px; }

/* Section prompts are independent blocks; the whole tool column stretches together. */
.section-instructions { display:grid; gap:24px; margin-bottom:24px; }
.section-prompt-editor { margin-block:16px; }
.image-width-control { position:relative; display:flex; align-items:center; min-width:0; flex:1; }
.image-width-control .instruction-image-width { width:100%; padding-right:30px; }
.image-width-control>span { position:absolute; right:10px; font-size:12px; color:var(--muted); pointer-events:none; }
.positioned-section-prompt { margin-block:24px; }
.section-prompt-editor { display:grid; grid-template-columns:minmax(0,1fr) 224px; align-items:stretch; gap:16px; min-width:0; }
.section-prompt-editor .instruction-content { display:flex; min-width:0; }
.section-prompt-editor .instruction-content textarea { flex:1; width:100%; height:100%; min-height:180px; resize:vertical; }
.section-prompt-tools { display:flex; flex-direction:column; gap:12px; min-width:0; padding-right:6px; }
.section-prompt-tools .section-image-upload { width:100%; min-height:var(--editor-control); }
.section-prompt-tools .instruction-image-width { width:100%; height:var(--editor-control); }
.section-prompt-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:auto; }
.section-prompt-actions .icon-btn { flex:none; }
@media(max-width:700px) {
  .section-prompt-editor { grid-template-columns:minmax(0,1fr); gap:12px; }
  .section-prompt-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
  .section-prompt-tools>[data-audio-question-id],.section-prompt-actions { grid-column:1/-1; }
  .section-prompt-editor .instruction-content textarea { height:180px; }
}