/* ธีมแบบ VS Code + Eva Dark (ตามที่ตั้งค่าไว้ใน VS Code ของเจ้าของเว็บ) · โหลดต่อจาก style.css / lesson.css
   - สี UI จาก Eva Dark ของ fisheva · สีโค้ดจาก editor.tokenColorCustomizations ที่ปรับให้นุ่มลง
   - ฟอนต์โค้ด JetBrains Mono 15px / 1.7 เปิด ligatures เหมือน editor · เนื้อหาใช้ IBM Plex Sans Thai Looped อ่านง่าย
   - ไอคอนจาก Flaticon UIcons (regular rounded)
   ย้อนกลับเป็นธีมเดิมได้โดยลบ <link> ของไฟล์นี้และ <script> sql-highlight.js ออก */
:root {
  color-scheme: dark;
  --font-body: "IBM Plex Sans Thai Looped","IBM Plex Sans Thai","Segoe UI","Leelawadee UI",Tahoma,sans-serif;
  --font-code: "JetBrains Mono","Fira Code",Consolas,"IBM Plex Sans Thai Looped",monospace;
  --font-icon: uicons-regular-rounded;

  /* Eva Dark */
  --vs-editor: #282c34;
  --vs-side: #21252b;
  --vs-deep: #181a1f;
  --vs-raised: #2f323c;
  --vs-fg: #9da5b3;
  --vs-ui: #b0b7c3;
  --vs-bright: #d7dae0;
  --vs-muted: #8e99b1;
  --vs-linenum: #535773;
  --vs-focus: #4480f4;
  --vs-cursor: #ff9070;
  --vs-remote: #56b7c3;
  --vs-hover: rgba(89,141,239,.13);
  --vs-select: rgba(89,141,239,.24);
  --vs-border: #353a45;

  /* สีโค้ดตาม tokenColorCustomizations ของ [Eva Dark] */
  --syn-kw: #a596d6;
  --syn-fn: #7f9cd4;
  --syn-ctrl: #b98bc4;
  --syn-op: #7aadb3;
  --syn-prop: #cc8a8f;
  --syn-type: #d494b4;
  --syn-str: #a3bc8e;
  --syn-param: #d6be93;
  --syn-num: #dda088;
  --syn-com: #737ba3;
  --syn-punc: #79859d;
  --br-1: #838fa7;
  --br-2: #cf68e1;
  --br-3: #a78cfa;

  /* ตัวแปรที่ style.css / lesson.css ใช้ */
  --bg: var(--vs-side);
  --card: var(--vs-editor);
  --text: var(--vs-ui);
  --heading: var(--vs-bright);
  --muted: var(--vs-muted);
  --primary: #7aa5f2;
  --primary-dark: #a9c4f7;
  --icon-bg: var(--vs-hover);
  --line: var(--vs-border);
  --success: var(--syn-str);
  --danger: #e0868d;
  --green-pale: rgba(163,188,142,.12);
  --red-pale: rgba(204,138,143,.13);
  --amber: var(--syn-param);
  --footer-bg: var(--vs-side);
  --footer-text: var(--vs-muted);
  --grad-primary: linear-gradient(135deg,var(--syn-fn),var(--syn-kw));
  --shadow-card: 0 8px 24px rgba(0,0,0,.22);
  --button: #3f72d6;
  --button-hover: #3566c8;
  --button-2: rgba(103,110,149,.34);
  --button-2-hover: rgba(103,110,149,.52);

  /* Bootstrap (โหมด dark ตั้งที่ <html data-bs-theme="dark">) */
  --bs-body-font-family: var(--font-body);
  --bs-body-line-height: 1.8;
  --bs-body-bg: var(--vs-side);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--vs-bright);
  --bs-emphasis-color-rgb: 215,218,224;
  --bs-secondary-color: var(--vs-muted);
  --bs-tertiary-bg: var(--vs-raised);
  --bs-border-color: var(--line);
  --bs-heading-color: var(--heading);
  --bs-primary-rgb: 122,165,242;
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 122,165,242;
  --bs-link-hover-color: var(--primary-dark);
  --bs-link-hover-color-rgb: 169,196,247;
  scrollbar-color: rgba(162,171,229,.22) transparent;
}
::selection {background:rgba(89,141,239,.35)}
body {background:var(--bg);color:var(--text);font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4 {color:var(--heading);letter-spacing:0}
a {color:var(--primary)}
a:hover {color:var(--primary-dark)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:2px solid var(--vs-focus);outline-offset:2px}
.skip-link {background:var(--vs-editor);color:var(--vs-bright)}

/* ฟอนต์: ทุกจุดที่ style.css ล็อก Prompt / Consolas / system-ui ไว้ */
.quiz-brand strong,.result-score,.choice-letter,.slot-number {font-family:var(--font-body)}
pre,code,.written-input,.token,.timer strong,.mobile-timer strong,.clause-order span,.join-map .node,.join-map .edge,.grid-button,.rank-number {font-family:var(--font-code);font-variant-ligatures:contextual common-ligatures}

/* ไอคอน Flaticon (<i class="icon fi-rr-...">) ขนาดตามกล่องเดิมของ style.css */
i.icon {display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;fill:none;stroke:none}
.header-actions i.icon,.login-facts i.icon,.mobile-quiz-bar i.icon,.flag-button i.icon,.reference-link i.icon {font-size:14px}
.grid-legend i.icon {font-size:11px}
.login-icon i.icon,.callout>i.icon {font-size:20px}

/* ---------- แถบด้านบน = title bar ---------- */
.navbar-modern {background:var(--vs-editor);color:var(--text);border-bottom:1px solid var(--vs-deep)}
.quiz-navbar {min-height:58px;padding-block:8px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.quiz-navbar .quiz-brand,.quiz-navbar .quiz-brand.text-white {color:var(--vs-bright)!important}
.brand-symbol {width:36px;height:36px}
.quiz-brand strong {font-size:1rem;font-weight:600}
.quiz-brand strong span {color:var(--syn-fn);font-weight:600}
.quiz-brand small {font-family:var(--font-code);font-size:.62rem;letter-spacing:.08em;color:var(--vs-linenum);margin-top:1px}
.nickname-badge {font-family:var(--font-code);font-size:.78rem;color:var(--syn-param);background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:4px}

/* ---------- ปุ่มแบบ VS Code ---------- */
.btn,.button {border-radius:4px;font-weight:500;box-shadow:none}
.btn-primary,.button.primary,.lesson-cta .btn {
  --bs-btn-color:#fff;--bs-btn-bg:var(--button);--bs-btn-border-color:var(--button);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--button-hover);--bs-btn-hover-border-color:var(--button-hover);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--button-hover);--bs-btn-active-border-color:var(--button-hover);
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--button);--bs-btn-disabled-border-color:var(--button);
  --bs-btn-focus-box-shadow:none;
  background:var(--bs-btn-bg);color:var(--bs-btn-color);border:1px solid var(--bs-btn-border-color);
}
.btn-primary:hover,.button.primary:hover,.lesson-cta .btn:hover {background:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);color:#fff}
.btn-outline-primary,.button,.header-actions .btn-outline-light,.header-actions .btn-light {
  --bs-btn-color:var(--vs-bright);--bs-btn-bg:var(--button-2);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--vs-bright);--bs-btn-hover-bg:var(--button-2-hover);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--vs-bright);--bs-btn-active-bg:var(--button-2-hover);--bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:var(--vs-bright);--bs-btn-disabled-bg:var(--button-2);--bs-btn-disabled-border-color:transparent;
  --bs-btn-focus-box-shadow:none;
  background:var(--bs-btn-bg);color:var(--bs-btn-color);border:1px solid transparent;
}
.button:hover,.btn-outline-primary:hover,.header-actions .btn-outline-light:hover,.header-actions .btn-light:hover {background:var(--button-2-hover);color:var(--vs-bright);border-color:transparent}
.button.secondary {background:transparent;border-color:var(--vs-border);color:var(--syn-kw)}
.button.secondary:hover {background:var(--vs-hover);border-color:var(--syn-kw);color:var(--syn-kw)}
.button:disabled,.btn:disabled {opacity:.45}
.header-actions .btn {min-height:32px;padding:4px 11px;font-size:.8rem}
@media(prefers-reduced-motion:no-preference) {.btn,.button {transition:background .12s,border-color .12s,color .12s}}

/* ---------- การ์ด = แผง editor ---------- */
.panel,.content-card {background:var(--card);border:1px solid var(--vs-deep);border-radius:8px;box-shadow:var(--shadow-card)}
.site-banner {border:1px solid var(--vs-deep);border-radius:8px;box-shadow:var(--shadow-card)}
.site-banner img {filter:brightness(.88) saturate(.95)}
.panel-heading {padding:14px 18px;color:var(--syn-fn);background:var(--vs-side);border-bottom:1px solid var(--vs-deep)}
.panel-heading h2 {color:var(--vs-bright);font-size:.95rem}
.panel-heading p {color:var(--vs-muted)}
.panel-heading>i.icon,.rank-icon {width:34px;height:34px;border-radius:6px;background:var(--vs-raised);font-size:16px}
.panel-heading>i.icon {color:var(--syn-fn)}
.rank-icon {color:var(--syn-param);border:0}
.navigator-panel .panel-heading {margin-bottom:16px}

/* หัวข้อมีเคอร์เซอร์สีส้มค้างไว้ เหมือนกำลังพิมพ์ใน editor */
.login-panel h2::after,.lesson-hero h1::after {content:"";display:inline-block;width:2px;height:1.05em;margin-left:6px;vertical-align:-.14em;background:var(--vs-cursor)}
/* ข้อความนำหน้าเป็นคอมเมนต์โค้ด */
.login-kicker::before,.lesson-hero .login-kicker::before {content:"// ";content:"// " / "";font-family:var(--font-code);color:var(--syn-com)}

/* ---------- หน้าแรก: กล่องเข้าสอบ ---------- */
.login-icon {width:44px;height:44px;border-radius:8px;background:var(--vs-hover);color:var(--syn-fn)}
.login-kicker {display:block;color:var(--vs-muted);font-size:.9rem}
.login-description {margin-top:8px}
.chapter-info summary {color:var(--primary);font-weight:500}
.chapter-info summary::marker {color:var(--syn-kw)}
.chapter-info li::marker {color:var(--syn-num)}
.lesson-callout {background:var(--vs-side);border:1px solid var(--vs-deep);border-left:3px solid var(--syn-fn);border-radius:6px;color:var(--text)}
.lesson-callout:hover {background:var(--vs-hover);border-color:var(--vs-deep);border-left-color:var(--vs-focus)}
.lesson-callout i.icon {width:36px;height:36px;font-size:18px;border-radius:6px;background:var(--vs-raised);color:var(--syn-fn)}
.lesson-callout strong {color:var(--vs-bright)}
.form-label {font-weight:500;color:var(--vs-bright)}
.form-control,.form-select,.answer-input,.written-input {background-color:var(--vs-side);border:1px solid var(--vs-border);border-radius:4px;color:var(--vs-bright)}
.form-control::placeholder {color:#6b7394}
.form-control:focus,.form-select:focus,.answer-input:focus,.written-input:focus {background-color:var(--vs-side);border-color:var(--vs-focus);box-shadow:none;color:var(--vs-bright)}
.login-facts {border-top:1px solid var(--line);gap:8px}
.login-facts>span {font-family:var(--font-code);font-size:.78rem;padding:3px 10px;border-radius:4px;background:var(--vs-side);border:1px solid var(--vs-deep);color:var(--syn-fn)}
.login-facts>span:nth-child(2) {color:var(--syn-param)}
.login-facts>span:nth-child(3) {color:var(--syn-str)}
.login-note {padding:10px 14px;border-radius:6px;background:var(--vs-side);border:1px solid var(--vs-deep);border-left:3px solid var(--syn-param);color:var(--vs-muted)}
.error-message {color:var(--danger)}

/* ---------- อันดับ ---------- */
.rank-table {--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-hover-bg:var(--vs-hover);--bs-table-hover-color:var(--vs-bright)}
.rank-table thead {background:var(--vs-side);color:var(--vs-muted)}
.rank-table th,.rank-table td {border-color:var(--line)}
.rank-table th {color:var(--vs-bright)}
.rank-number {position:relative;border-radius:4px;background:var(--vs-side);color:var(--vs-muted)}
.rank-1 {background:rgba(214,190,147,.16);color:var(--syn-param)}
.rank-1::before {content:"\f4f9";content:"\f4f9" / "";font-family:var(--font-icon);position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1;color:var(--syn-param)}
.rank-2 {background:rgba(176,183,195,.14);color:#c5cbd6}
.rank-3 {background:rgba(221,160,136,.16);color:var(--syn-num)}
.your-rank {--bs-table-bg:var(--vs-select)}
.rank-note {border-top:1px solid var(--line);color:var(--vs-muted)}
.ranking-empty {color:var(--vs-muted)}
.ranking-empty::before {content:"\fb10";content:"\fb10" / "";font-family:var(--font-icon);display:block;font-size:2rem;line-height:1.3;margin-bottom:6px;color:var(--syn-kw)}
.attempt-row {border-top:1px solid var(--line);color:var(--text)}
.attempt-row strong {color:var(--syn-num);font-family:var(--font-code)}

/* ---------- ระหว่างทำข้อสอบ ---------- */
.session-header {background:var(--vs-side);border-bottom:1px solid var(--vs-deep)}
.session-header #session-position {font-family:var(--font-code);font-size:.8rem;color:var(--vs-muted)}
.pill {border-radius:4px;background:var(--vs-editor);color:var(--vs-bright);border:1px solid var(--vs-deep);font-weight:500}
.pill.written {color:var(--syn-type)}
.text-button {color:var(--primary)}
.question-meta .meta-labels>span {color:var(--vs-muted)}
.flag-button {color:var(--vs-muted)}
.flag-button.flagged {color:var(--syn-param)}
.question-title {color:var(--vs-bright);line-height:1.85}
.question-instruction {color:var(--vs-muted)}
.choice {border:1px solid var(--vs-border);border-radius:6px;background:var(--vs-side);color:var(--text)}
.choice:hover {background:var(--vs-hover);border-color:#3d4a66}
.choice.selected {background:var(--vs-select);border-color:var(--vs-focus);color:var(--vs-bright)}
.choice.correct,.match-row.correct,.drop-slot.correct {background:var(--green-pale);border-color:rgba(163,188,142,.55)}
.choice.incorrect,.match-row.incorrect,.drop-slot.incorrect {background:var(--red-pale);border-color:rgba(204,138,143,.55)}
.choice-letter {display:inline-grid;place-items:center;min-width:24px;height:24px;margin-top:0;border-radius:4px;background:var(--vs-raised);color:var(--syn-kw);font-family:var(--font-code);font-size:.78rem}
.choice-text.sql-inline {font-family:var(--font-code);font-size:.9rem;color:var(--vs-fg)}
.form-check-input {background-color:var(--vs-side);border:1px solid #4b5263}
.form-check-input:checked {background-color:var(--vs-focus);border-color:var(--vs-focus)}
.form-check-input:focus {border-color:var(--vs-focus);box-shadow:0 0 0 .2rem rgba(68,128,244,.25)}
.match-row {border:1px solid var(--vs-border);border-radius:6px;background:var(--vs-side)}
.token-bank {border:1px dashed var(--vs-border);background:var(--vs-side);border-radius:6px}
.token {border:1px solid var(--vs-border);border-radius:4px;color:var(--syn-kw);background:var(--vs-raised)}
.token[aria-pressed="true"] {background:var(--vs-focus);border-color:var(--vs-focus);color:#fff;box-shadow:none}
.drop-slot {border:1px dashed var(--vs-border);border-radius:6px;background:var(--vs-side);color:var(--vs-muted)}
.drop-slot.filled {background:rgba(165,150,214,.12);border-style:solid;border-color:rgba(165,150,214,.45);color:var(--syn-kw)}
.drop-slot.drag-over {box-shadow:0 0 0 2px var(--vs-focus)}
.slot-number {border-radius:4px;background:var(--vs-raised);color:var(--vs-muted)}
.slot-clear {color:var(--vs-muted)}
.code-slot {border:1px dashed var(--syn-kw);border-radius:3px;background:rgba(165,150,214,.12);color:var(--syn-kw)}
/* กล่องผลตรวจแบบ notification ของ VS Code */
.feedback {background:var(--vs-side);border:1px solid var(--vs-deep);border-left:3px solid var(--syn-fn);border-radius:6px;color:var(--text)}
.feedback h4 {color:var(--vs-bright)}
.feedback.correct {background:var(--vs-side);border-color:var(--vs-deep);border-left-color:var(--syn-str);color:var(--text)}
.feedback.incorrect {background:var(--vs-side);border-color:var(--vs-deep);border-left-color:var(--syn-prop);color:var(--text)}
.feedback.correct h4 {color:var(--syn-str)}
.feedback.incorrect h4 {color:var(--danger)}
.feedback h4::before {content:"\f80b  ";content:"\f80b  " / "";font-family:var(--font-icon),var(--font-body);font-weight:400;vertical-align:-.1em}
.feedback.correct h4::before {content:"\f3c4  ";content:"\f3c4  " / ""}
.feedback.incorrect h4::before {content:"\f4f4  ";content:"\f4f4  " / ""}
.feedback .rubric-heading::before {content:none}
.reference-link {color:var(--primary)}
.rubric {color:var(--text)}
.question-actions {border-top:1px solid var(--line)}
.timer {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px;color:var(--vs-muted)}
.timer strong {color:var(--vs-bright);font-weight:500}
.timer.urgent {background:var(--red-pale);border-color:rgba(204,138,143,.55)}
.timer.urgent strong {color:var(--danger)}
.progress-label {color:var(--vs-muted)}
progress {height:4px;background:var(--vs-side)}
progress::-webkit-progress-bar {background:var(--vs-side)}
progress::-webkit-progress-value {background:#4283f5}
progress::-moz-progress-bar {background:#4283f5}
.grid-button {border:1px solid var(--vs-border);border-radius:4px;background:var(--vs-side);color:var(--vs-muted);font-size:.78rem}
.grid-button:hover {background:var(--vs-hover);color:var(--vs-bright)}
.grid-button.current {outline:2px solid var(--vs-focus);outline-offset:1px;color:var(--vs-bright)}
.grid-button.answered {background:var(--vs-select);border-color:rgba(89,141,239,.5);color:var(--vs-bright)}
.grid-button.correct {background:var(--green-pale);border-color:rgba(163,188,142,.55);color:var(--syn-str)}
.grid-button.incorrect {background:var(--red-pale);border-color:rgba(204,138,143,.55);color:var(--danger)}
.grid-button.flagged:after {border-top-color:var(--syn-param)}
.grid-legend {color:var(--vs-muted)}
.grid-legend i.icon {color:var(--syn-param)}
.legend-box {border-radius:2px;border:1px solid var(--vs-border);background:var(--vs-side)}
.legend-box.done {background:var(--vs-select);border-color:rgba(89,141,239,.5)}
.result-score {background:linear-gradient(90deg,var(--syn-fn),var(--syn-kw));-webkit-background-clip:text;background-clip:text;color:transparent}
.result-score span {-webkit-text-fill-color:var(--vs-muted)}
.result-name {color:var(--syn-param)}
.result-header,.review-list {border-color:var(--line)}
.review-row {border-bottom:1px solid var(--line)}
.review-row small {color:var(--vs-muted)}
.empty-state {color:var(--vs-muted)}
.mobile-quiz-bar {background:var(--vs-side);border-top:1px solid var(--vs-deep);box-shadow:0 -6px 20px rgba(0,0,0,.25);color:var(--vs-muted)}
.mobile-timer {color:var(--vs-bright)}
.mobile-timer .icon {color:var(--syn-fn)}
dialog {background:var(--vs-editor);color:var(--text);border:1px solid var(--vs-deep);border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
dialog::backdrop {background:rgba(0,0,0,.5)}
.dialog-header {border-bottom:1px solid var(--line)}
.dialog-header .icon-button {color:var(--vs-muted)}
.icon-button:hover {background:var(--vs-hover)}
#dialog-content .resource-file {border-color:var(--line)}

/* ---------- ก้อนโค้ด = แท็บ editor ของ VS Code ---------- */
/* ตัดบรรทัดยาว (word wrap) ให้เห็นโค้ดครบโดยไม่ต้องเลื่อนแนวนอน */
pre {
  position:relative;padding:0;margin:14px 0;overflow:hidden;
  background:var(--vs-editor);border:1px solid var(--vs-deep);border-radius:8px;color:var(--vs-fg);
  font-size:14px;line-height:1.7;letter-spacing:.3px;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
}
/* แถบแท็บ: แท็บ query.sql ที่เปิดอยู่ + พื้นที่แท็บว่างด้านขวา */
pre::before {
  content:"query.sql";content:"query.sql" / "";display:block;height:34px;padding-left:32px;
  font:500 12.5px/34px var(--font-code);letter-spacing:0;color:var(--vs-bright);
  background:linear-gradient(90deg,var(--vs-editor) 0 124px,var(--vs-deep) 124px 125px,var(--vs-side) 125px);
  box-shadow:inset 0 -1px 0 var(--vs-deep);
}
pre::after {content:"\f525";content:"\f525" / "";position:absolute;left:12px;top:10px;font:13px/1 var(--font-icon);color:var(--syn-param)}
pre>code,.lesson pre>code {display:block;padding:12px 16px;white-space:pre-wrap;overflow-wrap:anywhere;background:none;border:0;border-radius:0;color:inherit;font:inherit;letter-spacing:inherit;counter-reset:sql-line}
/* บรรทัดที่ตัดต่อจะเยื้องตรงกับโค้ด ส่วนเลขบรรทัดอยู่เฉพาะบรรทัดแรก */
.sql-line {display:block;position:relative;min-height:1.7em;padding-left:2.6em;counter-increment:sql-line}
.sql-line::before {content:counter(sql-line);content:counter(sql-line) / "";position:absolute;left:0;width:1.6em;text-align:right;color:var(--vs-linenum)}
code.inline-code,.lesson code {font-size:.86em;background:var(--vs-side);color:var(--vs-fg);border:1px solid var(--vs-deep);border-radius:4px;padding:1px 6px}
.drop-code {font-size:14px}
/* สีไฮไลต์ SQL (class ใส่โดย assets/js/sql-highlight.js) */
.sql-kw {color:var(--syn-kw)}
.sql-type {color:var(--syn-type)}
.sql-fn {color:var(--syn-fn)}
.sql-str {color:var(--syn-str)}
.sql-num {color:var(--syn-num)}
.sql-logic,.sql-const,.sql-cmp {color:var(--syn-ctrl)}
.sql-op {color:var(--syn-op)}
.sql-prop {color:var(--syn-prop)}
.sql-punc {color:var(--syn-punc)}
.sql-com {color:var(--syn-com)}
.sql-br1 {color:var(--br-1)}
.sql-br2 {color:var(--br-2)}
.sql-br3 {color:var(--br-3)}

/* ---------- ส่วนท้าย = status bar ---------- */
.footer-modern {background:var(--vs-side);color:var(--vs-muted);border-top:1px solid var(--vs-deep);padding:0!important;font-size:12.5px}
.footer-modern .container {display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;min-height:28px;text-align:left!important}
.footer-modern .container::before {content:"\f482";content:"\f482" / "";font:13px/28px var(--font-icon);padding:0 10px;margin-right:-6px;background:var(--vs-remote);color:var(--vs-side)}
.footer-modern .fw-semibold {font-size:12.5px;font-weight:500;color:var(--vs-ui)}
.footer-modern .small-muted {margin:0!important;font-size:12.5px;color:var(--vs-muted)}
.footer-modern .credit {margin-left:auto!important}
.footer-modern a {color:var(--vs-muted);text-decoration:none}
.footer-modern a:hover {color:var(--vs-bright);text-decoration:underline}

/* ---------- หน้าสรุปเนื้อหา ---------- */
.lesson-hero h1 {color:var(--vs-bright)}
.topic-nav a {border:1px solid var(--vs-deep);border-radius:6px;background:var(--vs-side);color:var(--text);font-weight:500}
.topic-nav a:hover {border-color:var(--vs-focus);background:var(--vs-hover);color:var(--vs-bright)}
.topic-nav b,.topic-nav.extra b {border-radius:4px;font-family:var(--font-code);font-size:.75rem;background:rgba(127,156,212,.16);color:var(--syn-fn)}
.topic-nav a:nth-child(4n+2) b {background:rgba(165,150,214,.16);color:var(--syn-kw)}
.topic-nav a:nth-child(4n+3) b {background:rgba(163,188,142,.16);color:var(--syn-str)}
.topic-nav a:nth-child(4n) b {background:rgba(221,160,136,.16);color:var(--syn-num)}
.topic-nav-label {color:var(--vs-muted)}
.part-divider {color:var(--syn-com);font-family:var(--font-code);font-weight:500;font-size:.88rem}
.part-divider::before,.part-divider::after {border-top:1px dashed var(--vs-border)}
.part-divider span::before {content:"// ";content:"// " / ""}
.exam-format div {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px}
.exam-format strong {font-family:var(--font-code);color:var(--syn-num)}
.exam-format div:nth-child(2) strong {color:var(--syn-kw)}
.exam-format div:nth-child(3) strong {color:var(--syn-str)}
.exam-format div:nth-child(4) strong {color:var(--syn-fn)}
.exam-format span {color:var(--vs-muted)}
.exam-format .hot {background:rgba(68,128,244,.1);border-color:rgba(68,128,244,.6)}
.exam-format .hot strong {color:var(--vs-bright)}
.exam-format .hot span {color:var(--text)}

/* สีประจำหัวข้อ วนตามสีโค้ด: ฟ้า ม่วง เขียว ส้ม */
.lesson-topic {--tc:var(--syn-fn);--tc-bg:rgba(127,156,212,.16)}
#topic-2,#topic-6,#topic-10 {--tc:var(--syn-kw);--tc-bg:rgba(165,150,214,.16)}
#topic-3,#topic-7 {--tc:var(--syn-str);--tc-bg:rgba(163,188,142,.16)}
#topic-4,#topic-8 {--tc:var(--syn-num);--tc-bg:rgba(221,160,136,.16)}
.topic-head {padding-bottom:16px;border-bottom:1px solid var(--line)}
.topic-no {width:42px;height:42px;border-radius:8px;background:var(--tc-bg);color:var(--tc);font-family:var(--font-code);font-size:1.1rem}
.topic-head h2 {color:var(--vs-bright)}
.topic-head p {color:var(--vs-muted)}
/* หัวข้อย่อยแบบหัวข้อ Markdown */
.lesson h3.sub {color:var(--vs-bright)}
.lesson h3.sub::before {content:"## ";content:"## " / "";font-family:var(--font-code);font-weight:500;color:var(--syn-kw)}
.lesson-table {--bs-table-bg:transparent;--bs-table-border-color:var(--line);--bs-table-color:var(--text)}
.lesson-table thead th {background:var(--vs-side);color:var(--vs-muted)}
.lesson-table th {color:var(--vs-bright)}
.mini-card {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px}
.mini-card h3 {color:var(--syn-fn)}
.mini-card .eg {color:var(--vs-muted)}
.type-grid div {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px}
.type-grid span {color:var(--vs-muted)}
.clause-order span {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:4px;color:var(--syn-kw);font-weight:500}
.clause-order span+span::before {color:var(--syn-op)}
.callout {background:var(--vs-side);border:1px solid var(--vs-deep);border-left:3px solid var(--syn-param);border-radius:6px}
.callout>i.icon {color:var(--syn-param)}
.callout h3 {color:var(--vs-bright)}
.bad>span {background:rgba(204,138,143,.18);color:#e3a5aa}
.good>span {background:rgba(163,188,142,.18);color:#b9d0a6}
.bad small {color:var(--vs-muted)}
.bad code {text-decoration-color:rgba(224,134,141,.7)}
.join-map {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px}
.join-map .node {border:1px solid var(--vs-border);border-radius:4px;background:var(--vs-raised);color:var(--syn-kw);font-weight:500}
.join-map .node.hub {border-color:var(--syn-kw)}
.join-map .edge {color:var(--syn-prop)}
.join-map .edge::before,.join-map .edge::after {border-top:1px dashed var(--vs-linenum)}
.note-line {background:var(--vs-side);border:1px solid var(--vs-deep);border-left:3px solid var(--syn-fn);border-radius:6px}
.note-line i.icon {color:var(--syn-fn);font-size:16px}
.steps li::marker {color:var(--syn-num);font-family:var(--font-code)}
.quick-quiz details {background:var(--vs-side);border:1px solid var(--vs-deep);border-radius:6px}
.quick-quiz details[open] {border-color:var(--vs-border)}
.quick-quiz summary::marker {color:var(--syn-kw)}
.quick-quiz details p {border-top:1px dashed var(--line)}
.lesson-cta {background:var(--vs-editor);border-left:3px solid var(--vs-focus);color:var(--text)}
.lesson-cta h2 {color:var(--vs-bright)}
.lesson-cta .small-muted {color:var(--vs-muted)}
.lesson-cta .btn {padding-inline:24px}

@media(max-width:767.98px) {
  body {font-size:15.5px}
  pre {font-size:13px}
  .footer-modern .credit {margin-left:0!important}
}
@media print {
  :root {color-scheme:light}
  pre::before,pre::after,.sql-line::before {display:none}
}