/* "Tự kiểm 3 câu" (includes/sections/skill-check.php). Flat tokens with
   literal fallbacks: the skill page has both A/B arms. */
.sc { --sc-ink: var(--flat-ink, #0a0a0a); --sc-hair: var(--flat-hair, #e6e6e6); --sc-blue: var(--flat-blue, #1a3aff);
      --sc-green: var(--flat-green, #0f7a4a); --sc-orange: var(--flat-orange, #e8501e); --sc-dim: var(--flat-dim, #6b7280);
      margin: 28px 0 8px; padding: 20px; font-family: var(--flat-font, 'Be Vietnam Pro', system-ui, sans-serif);
      color: var(--sc-ink); background: var(--flat-paper, #fff); border: 2px solid var(--sc-ink); scroll-margin-top: 80px; }
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.sc-h { margin: 0; font-size: 20px; font-weight: 800; color: var(--sc-ink); }
.sc-h .fas { color: var(--sc-blue); }
.sc-sub { font-size: 13px; color: var(--sc-dim); }
.sc-done { font-size: 13px; font-weight: 800; color: var(--sc-green); }
.sc-q { margin: 0 0 14px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--sc-hair); }
.sc-q legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.sc-n { color: var(--sc-blue); }
.sc-o { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 8px 10px; margin: 0 0 4px; cursor: pointer;
        font-size: 14px; line-height: 1.45; border: 1.5px solid var(--sc-hair); }
.sc-o:hover { border-color: var(--sc-ink); }
.sc-o input { margin-top: 3px; flex: 0 0 auto; }
.sc-q.is-ok .sc-o.is-right, .sc-q.is-bad .sc-o.is-right { border-color: var(--sc-green); background: #eef8f2; }
.sc-why { margin: 6px 0 0; padding: 8px 10px; font-size: 13px; line-height: 1.5; border-left: 3px solid var(--sc-dim); background: #f6f6f6; }
.sc-q.is-ok .sc-why { border-left-color: var(--sc-green); }
.sc-q.is-bad .sc-why { border-left-color: var(--sc-orange); }
.sc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sc-go { min-height: 44px; padding: 0 20px; font: inherit; font-weight: 800; color: #fff; background: var(--sc-blue); border: 0; cursor: pointer; }
.sc-go:hover { background: var(--sc-ink); }
.sc-result { margin: 0; font-size: 14px; font-weight: 700; }
.sc-result.is-pass { color: var(--sc-green); }
.sc-result.is-fail { color: var(--sc-orange); }
.sc a:focus-visible, .sc button:focus-visible, .sc-o:focus-within { outline: 3px solid var(--sc-blue); outline-offset: 2px; }