/* CODE.NTT v1124 - one theme/layout contract across Quiz + HTML + SQL.
   Loaded from the shared header after page head CSS. Theme JS mirrors the chosen
   theme onto both html/body so legacy selectors keep working. */

/* Module roots should use the whole content viewport unless a feature deliberately
   owns an internal scroll container (tables/editors keep their own overflow). */
body[data-code^="tn_"] #contentnav,
body[data-code^="html"] #contentnav,
body[data-code^="sql"] #contentnav,
body[data-code="tracnghiem"] #contentnav,
body[data-code^="tn_"] #meModuleWrap,
body[data-code^="html"] #meModuleWrap,
body[data-code^="sql"] #meModuleWrap,
body[data-code="tracnghiem"] #meModuleWrap{width:100%!important;max-width:none!important;box-sizing:border-box}
body[data-code^="tn_"] #meModuleWrap>.quiz-page,
body[data-code="tracnghiem"] #meModuleWrap>.quiz-page,
body[data-code^="html"] #meModuleWrap>.ntt-html-page,
body[data-code^="sql"] #meModuleWrap>.ntt-sql-page,
body[data-code^="html"] #meModuleWrap>.ntt-import-page,
body[data-code^="sql"] #meModuleWrap>.ntt-import-page{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}

/* Import pages were a major mismatch: their CSS historically listened on html,
   while the toggle used to update only body. Keep an explicit fallback too. */
body[data-site-theme="dark"] .ntt-import-page .panel,
body[data-site-theme="dark"] .ntt-import-page .panel-heading,
body[data-site-theme="dark"] .ntt-import-page .panel-body{background:#111827!important;color:#e5edf8!important;border-color:#334155!important}
body[data-site-theme="dark"] .ntt-import-page .ntt-import-help{background:#0f172a!important;color:#dce7f5!important;border-color:#334155!important}
body[data-site-theme="dark"] .ntt-import-page p,
body[data-site-theme="dark"] .ntt-import-page small,
body[data-site-theme="dark"] .ntt-import-page label{color:#b5c3d4!important}
body[data-site-theme="dark"] .ntt-import-page code{background:#261b0f!important;color:#fed7aa!important;border-color:#713f12!important}

/* Shared Bootstrap/legacy surfaces inside the three learning modules. */
body[data-site-theme="dark"][data-code^="tn_"] .well,
body[data-site-theme="dark"][data-code^="html"] .well,
body[data-site-theme="dark"][data-code^="sql"] .well,
body[data-site-theme="dark"][data-code^="tn_"] .panel,
body[data-site-theme="dark"][data-code^="html"] .panel,
body[data-site-theme="dark"][data-code^="sql"] .panel{background:#111827!important;color:#e5edf8!important;border-color:#334155!important}

/* Light mode remains genuinely light and readable; do not inherit dark text from
   stale legacy classes after a toggle back to light. */
body[data-site-theme="light"][data-code^="tn_"] .quiz-page,
body[data-site-theme="light"][data-code="tracnghiem"] .quiz-page{color:#162033}
body[data-site-theme="light"] .ntt-html-page,
body[data-site-theme="light"] .ntt-sql-page,
body[data-site-theme="light"] .ntt-import-page{color:#172033}

@media(max-width:767px){
  body[data-code^="tn_"] #contentnav,
  body[data-code^="html"] #contentnav,
  body[data-code^="sql"] #contentnav,
  body[data-code="tracnghiem"] #contentnav{padding-left:8px!important;padding-right:8px!important}
}


/* CODE.NTT v1125 — generic dark-marker parity for bootstrap surfaces. */
:where(body[data-site-theme="dark"],body.dark-mode,body.darkmode,body.dark,body.theme-dark,body.ntt-dark,html[data-site-theme="dark"] body,html.dark-mode body,html.darkmode body,html.dark body,html.theme-dark body,html.ntt-dark body)[data-code^="tn_"] .panel,
:where(body[data-site-theme="dark"],body.dark-mode,body.darkmode,body.dark,body.theme-dark,body.ntt-dark,html[data-site-theme="dark"] body,html.dark-mode body,html.darkmode body,html.dark body,html.theme-dark body,html.ntt-dark body)[data-code^="html"] .panel,
:where(body[data-site-theme="dark"],body.dark-mode,body.darkmode,body.dark,body.theme-dark,body.ntt-dark,html[data-site-theme="dark"] body,html.dark-mode body,html.darkmode body,html.dark body,html.theme-dark body,html.ntt-dark body)[data-code^="sql"] .panel{
  background:#111827!important;color:#e5edf8!important;border-color:#334155!important;
}

/* CODE.NTT v1126: cache/version marker; v1124 html/body theme bridge and full-width contract retained. */

/* v1322 — account-name identity: users allowed to create rooms get a non-color-only badge. */
.ntt-member-name{display:inline-flex;align-items:baseline;position:relative;max-width:100%;vertical-align:baseline}
.ntt-member-name .ntt-member-name-text{min-width:0}
.ntt-member-name--room-creator{font-weight:700;text-shadow:0 1px 1px rgba(15,23,42,.18)}
.ntt-member-name--room-creator .ntt-member-room-star{display:inline-block;margin-right:.16em;color:#956200;font-size:.66em;line-height:1;transform:translateY(-.46em);text-shadow:0 1px 0 rgba(255,255,255,.7)}
:is(body[data-site-theme="dark"],body.dark-mode,body.darkmode,body.dark,body.theme-dark,body.ntt-dark,html[data-site-theme="dark"] body,html.dark-mode body,html.darkmode body,html.dark body,html.theme-dark body,html.ntt-dark body) .ntt-member-name--room-creator{color:inherit;text-shadow:0 1px 1px rgba(0,0,0,.45)}
:is(body[data-site-theme="dark"],body.dark-mode,body.darkmode,body.dark,body.theme-dark,body.ntt-dark,html[data-site-theme="dark"] body,html.dark-mode body,html.darkmode body,html.dark body,html.theme-dark body,html.ntt-dark body) .ntt-member-name--room-creator .ntt-member-room-star{color:#ffd166;text-shadow:0 1px 1px rgba(0,0,0,.65)}