/* 
 * COJ Exam 2569 - SaaS UI, High-Contrast Card Frames, Eye-Care Reading Themes (Light / Warm Sepia / Night Dark),
 * Typography Scaler, Silent Anti-Sharing Watermark & Anti-Print Protection
 */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

:root {
  --coj-navy: #1E1B4B;
  --coj-gold: #F59E0B;
  --coj-gold-light: #FEF3C7;
  --coj-crimson: #991B1B;

  /* Modern EdTech Palette: Deep Indigo, Vibrant Royal Blue, Warm Amber, Emerald Green & Soft White Cards */
  --bg-page: #F3F6FC;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F8FAFF;
  --bg-muted: #EEF2FA;
  --text-main: #1E1B4B;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --border-color: #E2E8F4;
  --border-strong: #CBD5E8;
  --card-shadow: 0 10px 28px -6px rgba(30, 27, 75, 0.08), 0 4px 12px -2px rgba(37, 99, 235, 0.04);
  --watermark-color: rgba(30, 27, 75, 0.026);

  /* Font Scale Multiplier */
  --font-base-size: 16px;
  --question-title-size: 1.12rem;
  --choice-text-size: 1rem;
  --explain-text-size: 0.97rem;
  --table-cell-size: 0.95rem;
}

/* =========================================================
   FONT SIZE SCALER (ก / ก+ / ก++)
   ========================================================= */
body[data-font-scale="normal"] {
  --font-base-size: 16px;
  --question-title-size: 1.1rem;
  --choice-text-size: 0.985rem;
  --explain-text-size: 0.96rem;
  --table-cell-size: 0.95rem;
}

body[data-font-scale="large"] {
  --font-base-size: 17.5px;
  --question-title-size: 1.22rem;
  --choice-text-size: 1.08rem;
  --explain-text-size: 1.05rem;
  --table-cell-size: 1.03rem;
}

body[data-font-scale="xlarge"] {
  --font-base-size: 19px;
  --question-title-size: 1.34rem;
  --choice-text-size: 1.18rem;
  --explain-text-size: 1.14rem;
  --table-cell-size: 1.11rem;
}

/* =========================================================
   PROMINENT CARD & BOX FRAMES (ให้กรอบข้อความโดดเด่น ไม่กลืนพื้นหลัง)
   ========================================================= */
.saas-card {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
  box-shadow: var(--card-shadow);
  border-radius: 1rem;
}

.question-card-frame {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-top: 4px solid #1e293b;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  border-radius: 1rem;
}

.question-card-frame.star-highlight {
  border-top-color: #d97706;
}

.subject-row-frame {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-left: 5px solid #1d4ed8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  border-radius: 0.85rem;
  transition: all 0.15s ease;
}

.subject-row-frame.part2-accent {
  border-left-color: #d97706;
}

.subject-row-frame:hover {
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
}

.neutral-choice-box {
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-color);
  border-radius: 0.75rem;
  transition: all 0.15s ease;
}

/* ไฮไลต์เมื่อชี้เฉพาะตัวเลือกที่คลิกได้ (ปุ่ม) — แถวตัวเลือกแบบอ่านอย่างเดียวไม่เปลี่ยนสี */
button.neutral-choice-box:hover {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.solution-bottom-box {
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-color);
  border-radius: 1rem;
}

/* =========================================================
   EYE-CARE THEME 2: WARM SEPIA / PAPER (โหมดถนอมสายตา)
   ========================================================= */
body[data-theme="sepia"] {
  --bg-page: #dfD5C3;
  --bg-surface: #fdfaf3;
  --bg-subtle: #f4eee1;
  --bg-muted: #e8decb;
  --text-main: #261c10;
  --text-secondary: #4a3c2c;
  --text-muted: #6e5d49;
  --border-color: #c8bba4;
  --border-strong: #b09f82;
  --card-shadow: 0 5px 15px rgba(60, 42, 18, 0.09), 0 2px 5px rgba(60, 42, 18, 0.05);
  --watermark-color: rgba(60, 45, 25, 0.035);
}

body[data-theme="sepia"] .bg-white {
  background-color: #fdfaf3 !important;
}

body[data-theme="sepia"] .bg-slate-50,
body[data-theme="sepia"] .bg-slate-50\/80,
body[data-theme="sepia"] .bg-slate-50\/70,
body[data-theme="sepia"] .bg-slate-50\/60 {
  background-color: #f3ece0 !important;
}

body[data-theme="sepia"] .bg-slate-100 {
  background-color: #e8decb !important;
}

body[data-theme="sepia"] .text-slate-900,
body[data-theme="sepia"] .text-slate-800 {
  color: #261c10 !important;
}

body[data-theme="sepia"] .text-slate-700,
body[data-theme="sepia"] .text-slate-600 {
  color: #4a3c2c !important;
}

body[data-theme="sepia"] .text-slate-500 {
  color: #6e5d49 !important;
}

body[data-theme="sepia"] .border-slate-300,
body[data-theme="sepia"] .border-slate-200,
body[data-theme="sepia"] .border-slate-200\/90,
body[data-theme="sepia"] .border-slate-200\/80,
body[data-theme="sepia"] .border-slate-100 {
  border-color: #c8bba4 !important;
}

body[data-theme="sepia"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #c8bba4 !important;
}

body[data-theme="sepia"] .neutral-choice-box {
  background-color: #f6f0e4;
  border-color: #c5b69c;
}

body[data-theme="sepia"] button.neutral-choice-box:hover {
  background-color: #ebe2d0;
  border-color: #8c7656;
}

body[data-theme="sepia"] .solution-bottom-box {
  background-color: #f4eee1;
  border-color: #c8bba4;
}

body[data-theme="sepia"] .bg-emerald-50,
body[data-theme="sepia"] .bg-emerald-50\/90,
body[data-theme="sepia"] .bg-emerald-50\/70,
body[data-theme="sepia"] .bg-emerald-50\/50,
body[data-theme="sepia"] .bg-emerald-50\/20 {
  background-color: #e6efe0 !important;
}

body[data-theme="sepia"] .bg-blue-50,
body[data-theme="sepia"] .bg-blue-50\/50,
body[data-theme="sepia"] .bg-blue-50\/20 {
  background-color: #e4ecf2 !important;
}

body[data-theme="sepia"] .bg-rose-50,
body[data-theme="sepia"] .bg-rose-50\/70,
body[data-theme="sepia"] .bg-rose-50\/40 {
  background-color: #f5e5e0 !important;
}

body[data-theme="sepia"] .bg-amber-50,
body[data-theme="sepia"] .bg-amber-50\/80,
body[data-theme="sepia"] .bg-amber-50\/70,
body[data-theme="sepia"] .bg-amber-50\/50,
body[data-theme="sepia"] .bg-amber-100\/80 {
  background-color: #f5e9ce !important;
}

/* =========================================================
   EYE-CARE THEME 3: NIGHT DARK MODE (โหมดกลางคืน)
   ========================================================= */
body[data-theme="dark"] {
  --bg-page: #090e1a;
  --bg-surface: #152033;
  --bg-subtle: #1e2d45;
  --bg-muted: #263854;
  --text-main: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #334868;
  --border-strong: #476288;
  --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  --watermark-color: rgba(255, 255, 255, 0.025);
}

body[data-theme="dark"] .question-card-frame {
  border-top-color: #3b82f6;
}

body[data-theme="dark"] .question-card-frame.star-highlight {
  border-top-color: #f59e0b;
}

body[data-theme="dark"] .neutral-choice-box {
  background-color: #1c2a42;
  border-color: #374d6d;
}

body[data-theme="dark"] button.neutral-choice-box:hover {
  background-color: #253757;
  border-color: #60a5fa;
}

body[data-theme="dark"] .solution-bottom-box {
  background-color: #1a273b;
  border-color: #334868;
}

body[data-theme="dark"] .bg-white {
  background-color: #152033 !important;
}

body[data-theme="dark"] .bg-slate-50,
body[data-theme="dark"] .bg-slate-50\/80,
body[data-theme="dark"] .bg-slate-50\/70,
body[data-theme="dark"] .bg-slate-50\/60 {
  background-color: #1e2d45 !important;
}

body[data-theme="dark"] .bg-slate-100 {
  background-color: #263854 !important;
}

body[data-theme="dark"] .text-slate-950,
body[data-theme="dark"] .text-slate-900,
body[data-theme="dark"] .text-slate-800 {
  color: #f8fafc !important;
}

body[data-theme="dark"] .bg-amber-200.text-slate-950,
body[data-theme="dark"] .bg-amber-300.text-slate-950,
body[data-theme="dark"] .bg-amber-400.text-slate-950,
body[data-theme="dark"] .bg-amber-500.text-slate-950,
body[data-theme="dark"] .bg-emerald-300.text-slate-950,
body[data-theme="dark"] .bg-emerald-400.text-slate-950,
body[data-theme="dark"] .bg-emerald-500.text-slate-950 {
  color: #0f172a !important;
}

body[data-theme="dark"] .text-slate-700,
body[data-theme="dark"] .text-slate-600 {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] .text-slate-500 {
  color: #94a3b8 !important;
}

body[data-theme="dark"] .text-blue-950,
body[data-theme="dark"] .text-blue-900,
body[data-theme="dark"] .text-blue-800,
body[data-theme="dark"] .text-blue-700 {
  color: #93c5fd !important;
}

body[data-theme="dark"] .text-emerald-950,
body[data-theme="dark"] .text-emerald-900,
body[data-theme="dark"] .text-emerald-800 {
  color: #6ee7b7 !important;
}

body[data-theme="dark"] .text-rose-900,
body[data-theme="dark"] .text-rose-800,
body[data-theme="dark"] .text-rose-700 {
  color: #fda4af !important;
}

body[data-theme="dark"] .text-amber-950,
body[data-theme="dark"] .text-amber-900,
body[data-theme="dark"] .text-amber-800 {
  color: #fde68a !important;
}

body[data-theme="dark"] .border-slate-300,
body[data-theme="dark"] .border-slate-200,
body[data-theme="dark"] .border-slate-200\/90,
body[data-theme="dark"] .border-slate-200\/80,
body[data-theme="dark"] .border-slate-100 {
  border-color: #334868 !important;
}

body[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334868 !important;
}

body[data-theme="dark"] .bg-blue-50,
body[data-theme="dark"] .bg-blue-50\/50,
body[data-theme="dark"] .bg-blue-50\/20,
body[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(30, 64, 175, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

body[data-theme="dark"] .bg-emerald-50,
body[data-theme="dark"] .bg-emerald-50\/90,
body[data-theme="dark"] .bg-emerald-50\/70,
body[data-theme="dark"] .bg-emerald-50\/50,
body[data-theme="dark"] .bg-emerald-50\/20,
body[data-theme="dark"] .bg-emerald-100 {
  background-color: rgba(6, 95, 70, 0.28) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

body[data-theme="dark"] .bg-rose-50,
body[data-theme="dark"] .bg-rose-50\/70,
body[data-theme="dark"] .bg-rose-50\/40,
body[data-theme="dark"] .bg-rose-100 {
  background-color: rgba(159, 18, 57, 0.25) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}

body[data-theme="dark"] .bg-amber-50,
body[data-theme="dark"] .bg-amber-50\/80,
body[data-theme="dark"] .bg-amber-50\/70,
body[data-theme="dark"] .bg-amber-50\/50,
body[data-theme="dark"] .bg-amber-100,
body[data-theme="dark"] .bg-amber-100\/80 {
  background-color: rgba(146, 64, 14, 0.28) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

body[data-theme="dark"] .text-amber-700 {
  color: #fbbf24 !important;
}

body[data-theme="dark"] .text-emerald-700:not(.qr-svg-wrap *) {
  color: #34d399 !important;
}

body[data-theme="dark"] .teaser-fade-overlay {
  background: linear-gradient(to top, #152033 20%, rgba(21, 32, 51, 0.92) 65%, transparent 100%) !important;
}

body[data-theme="sepia"] .teaser-fade-overlay {
  background: linear-gradient(to top, #fdfaf3 20%, rgba(253, 250, 243, 0.92) 65%, transparent 100%) !important;
}

/* =========================================================
   BASE TYPOGRAPHY & READABILITY
   ========================================================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-size: var(--font-base-size);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'Prompt', sans-serif;
  letter-spacing: -0.01em;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.q-title-text {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: var(--text-main);
  font-size: var(--question-title-size);
  line-height: 1.78;
  margin: 0;
  letter-spacing: 0;
}

.q-choice-text {
  font-size: var(--choice-text-size);
  line-height: 1.7;
}

.q-explain-text {
  font-size: var(--explain-text-size);
  line-height: 1.85;
}

#section-cheatsheet table td,
#section-cheatsheet table th {
  font-size: var(--table-cell-size);
  line-height: 1.75;
  vertical-align: top;
}

.cheatsheet-card {
  border: 1.5px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 1rem !important;
}

/* =========================================================
   INTERACTIVE CHOICE BUTTONS
   ========================================================= */
.choice-btn {
  transition: all 0.15s ease-in-out;
}

.choice-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.choice-selected {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
}

body[data-theme="sepia"] .choice-selected {
  border-color: #2563eb !important;
  background-color: #e4edf7 !important;
}

body[data-theme="dark"] .choice-selected {
  border-color: #3b82f6 !important;
  background-color: rgba(37, 99, 235, 0.28) !important;
  color: #f8fafc !important;
}

.choice-correct {
  border-color: #16a34a !important;
  background-color: #f0fdf4 !important;
  color: #14532d !important;
}

body[data-theme="sepia"] .choice-correct {
  border-color: #15803d !important;
  background-color: #e6f2e2 !important;
  color: #14532d !important;
}

body[data-theme="dark"] .choice-correct {
  border-color: #10b981 !important;
  background-color: rgba(6, 95, 70, 0.38) !important;
  color: #a7f3d0 !important;
}

.choice-wrong {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  color: #7f1d1d !important;
}

body[data-theme="sepia"] .choice-wrong {
  border-color: #b91c1c !important;
  background-color: #f7e4e1 !important;
  color: #7f1d1d !important;
}

body[data-theme="dark"] .choice-wrong {
  border-color: #f43f5e !important;
  background-color: rgba(159, 18, 57, 0.38) !important;
  color: #fecdd3 !important;
}

/* =========================================================
   ANTI-SHARING WATERMARK & TEASER BLUR
   ========================================================= */
.watermark-card {
  position: relative;
  overflow: hidden;
}

.watermark-stamp {
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--watermark-color);
  white-space: nowrap;
  z-index: 0;
  letter-spacing: 0.04em;
}

.watermark-card > *:not(.watermark-stamp) {
  position: relative;
  z-index: 1;
}

.teaser-blur-content {
  filter: blur(4.5px);
  user-select: none;
  pointer-events: none;
  opacity: 0.65;
}

/* =========================================================
   ANTI-PIRACY & CONTENT PROTECTION (SILENT DRM SHIELD)
   1. Anti-Copy & Anti-Select (ยกเว้นช่อง input ค้นหา) — ทำงานเงียบ ไม่มีป๊อปอัป/Toast
   2. Snap Guard: ซ่อน/เบลอเนื้อหาชั่วขณะ ~800ms เมื่อกดปุ่มแคปจอ แล้วคืนค่าเองอัตโนมัติ
   (ยกเลิกม่านเบลอเมื่อสลับแท็บ/เสียโฟกัสแล้ว เพื่อให้ผู้ใช้สลับหน้าจอได้ตามปกติ)
   ========================================================= */
body[data-drm-shield="on"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body[data-drm-shield="on"] .question-card-frame,
body[data-drm-shield="on"] .neutral-choice-box,
body[data-drm-shield="on"] .choice-btn,
body[data-drm-shield="on"] .solution-bottom-box,
body[data-drm-shield="on"] .cheatsheet-card,
body[data-drm-shield="on"] .subject-row-frame,
body[data-drm-shield="on"] .q-title-text,
body[data-drm-shield="on"] .q-choice-text,
body[data-drm-shield="on"] .q-explain-text,
body[data-drm-shield="on"] #section-info,
body[data-drm-shield="on"] #section-seqsheet,
body[data-drm-shield="on"] #section-exam,
body[data-drm-shield="on"] #section-cheatsheet,
body[data-drm-shield="on"] table,
body[data-drm-shield="on"] thead,
body[data-drm-shield="on"] tbody,
body[data-drm-shield="on"] tr,
body[data-drm-shield="on"] th,
body[data-drm-shield="on"] td {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
}

/* ยกเว้นช่องค้นหาและฟอร์ม input ให้พิมพ์และลากเลือกข้อความในช่องค้นหาได้ตามปกติ */
body[data-drm-shield="on"] input,
body[data-drm-shield="on"] textarea,
body[data-drm-shield="on"] select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Silent Snap Guard (ซ่อนเนื้อหาทันทีเมื่อกด PrintScreen / Win+Shift+S / Cmd+Shift+3,4,5 แล้วคืนค่าเองใน ~800ms) */
body.drm-snap-guard main,
body.drm-snap-guard #global-position-bar-wrapper,
body.drm-snap-guard header {
  filter: blur(30px) brightness(0.15) !important;
  opacity: 0.04 !important;
  transition: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.cheatsheet-card {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   DESIGN SYSTEM v2.5 (Modern EdTech Exam Platform)
   คู่สีการศึกษาพรีเมียม: Deep Indigo #1E1B4B • Vibrant Royal Blue #2563EB • Warm Amber #F59E0B • Emerald Green #10B981
   ========================================================= */
:root {
  --navy-950: #1E1B4B;
  --navy-900: #25215E;
  --navy-800: #1E3A8A;
  --navy-700: #1D4ED8;
  --navy-600: #2563EB;
  --navy-100: #DBEAFE;
  --navy-50: #EFF6FF;
  --accent: #F59E0B;
  --accent-hover: #FBBF24;
  --accent-ink: #1E1B4B;
  --success: #059669;
  --success-strong: #10B981;
  --success-soft: #ECFDF5;
  --danger: #DC2626;
  --danger-strong: #EF4444;
  --danger-soft: #FEF2F2;
  --warn-soft: #FFFBEB;
  --warn-line: #FCD34D;
  --warn-ink: #92400E;
  --ctl-active-bg: #1E1B4B;
  --ctl-active-ink: #FFFFFF;
  --brand-soft: #EFF6FF;
  --brand-line: #BFDBFE;
  --brand-ink: #1D4ED8;
  --shadow-sm: 0 4px 14px -3px rgba(30, 27, 75, 0.06), 0 2px 6px -2px rgba(37, 99, 235, 0.04);
  --shadow-md: 0 12px 28px -6px rgba(30, 27, 75, 0.12), 0 4px 12px -3px rgba(37, 99, 235, 0.06);
  --shadow-lg: 0 22px 44px -10px rgba(30, 27, 75, 0.24);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

body[data-theme="sepia"] {
  --ctl-active-bg: #3b2f22;
  --ctl-active-ink: #fdfaf3;
  --brand-soft: #efe7d8;
  --brand-line: #d8cbb3;
  --brand-ink: #4a3c2c;
  --success-soft: #e6efe0;
  --danger-soft: #f5e1dc;
  --warn-soft: #f6ead0;
  --warn-line: #d9b26a;
}

body[data-theme="dark"] {
  --ctl-active-bg: #dbe4f3;
  --ctl-active-ink: #0f1f38;
  --brand-soft: #1e2d45;
  --brand-line: #334868;
  --brand-ink: #c7d5ec;
  --success: #34d399;
  --success-soft: rgba(16, 185, 129, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(244, 63, 94, 0.14);
  --warn-soft: rgba(245, 158, 11, 0.12);
  --warn-line: rgba(245, 158, 11, 0.5);
  --warn-ink: #fcd34d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
}

/* ตัวหนาเฉพาะหัวข้อหลัก: ลดน้ำหนักตัวหนาของ Prompt ทั้งเว็บลงหนึ่งระดับ */
.font-heading.font-bold {
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
}

.ico-fill {
  fill: currentColor;
}

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 0.55rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn:focus-visible,
.seg-btn:focus-visible,
.icon-btn:focus-visible,
.nav-tab:focus-visible,
.choice-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-sm {
  font-size: 0.76rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.6rem;
}

.btn-lg {
  font-size: 0.9rem;
  padding: 0.75rem 1.3rem;
  border-radius: 0.8rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(120, 72, 0, 0.18);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-dark {
  background: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
}

.btn-dark:hover:not(:disabled) {
  filter: brightness(1.15);
}

.btn-outline {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-main);
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text-main);
}

.btn-on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
}

.btn-on-dark:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.btn-flag-on {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn-ink);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  color: inherit;
  transition: background-color 0.15s ease;
}

.icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- ป้าย ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  white-space: nowrap;
}

.badge-navy { background: var(--brand-soft); color: var(--brand-ink); }
.badge-warm { background: #f6efe3; color: #7a5414; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-on-dark { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.14); }
.badge-on-dark.is-success { background: rgba(52, 211, 153, 0.16); color: #a7f3d0; border-color: rgba(52, 211, 153, 0.3); }

body[data-theme="sepia"] .badge-warm { background: #efe2c9; }
body[data-theme="dark"] .badge-warm { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }

/* ---------- Segmented Control ---------- */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 0.75rem;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
}

.seg-wrap {
  flex-wrap: wrap;
}

.seg-block {
  display: flex;
  width: 100%;
}

.seg-block .seg-btn {
  flex: 1 1 0;
  justify-content: center;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.8rem;
  border-radius: 0.55rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.seg-btn:hover {
  color: var(--text-main);
}

.seg-btn.is-active {
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.seg-sm .seg-btn {
  padding: 0.28rem 0.6rem;
  font-size: 0.74rem;
}

.seg-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
}

.seg-btn.is-active .seg-count {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* ---------- Select ---------- */
.select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.select-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0.55rem 1.4rem 0.55rem 0;
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  color: var(--text-main);
  cursor: pointer;
}

.select-input option {
  color: #0f172a;
  background: #ffffff;
}

.select-caret {
  position: absolute;
  right: 0.7rem;
  pointer-events: none;
}

.select-wrap-light {
  max-width: 100%;
  margin-bottom: 0.6rem;
}

/* ---------- Header แถวเดียว ---------- */
.app-header {
  background: linear-gradient(135deg, #1E1B4B 0%, #1E296B 55%, #1D4ED8 100%);
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px -4px rgba(30, 27, 75, 0.35);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  min-height: 3.75rem;
  flex-wrap: wrap;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  min-width: 0;
  flex: 0 0 auto;
}

.brand-mark {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #f7b84a 0%, #e08f12 100%);
  color: #231703;
  flex: none;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.brand-mark svg {
  width: 1.2rem;
  height: 1.2rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.2;
}

.brand-sub {
  font-size: 0.71rem;
  color: #cbd5e1;
  line-height: 1.35;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.8rem;
  border-radius: 0.65rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  color: #cbd5e1;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-tab.is-active {
  background: #ffffff;
  color: var(--navy-900);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex: none;
  white-space: nowrap;
}

.header-actions .icon-btn {
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.header-actions .icon-btn:hover,
.header-actions .icon-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.header-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.header-chip.is-on { color: #6ee7b7; }
.header-chip.is-off { color: #fda4af; }

@media (max-width: 1023px) {
  .main-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    margin: 0 -0.25rem;
  }
  .brand-sub {
    max-width: 52vw;
  }
}

/* จอกว้าง: บังคับหัวเว็บให้อยู่แถวเดียวเสมอ (เมนูเลื่อนแนวนอนได้หากพื้นที่ไม่พอ) */
@media (min-width: 1024px) {
  .app-header-inner {
    flex-wrap: nowrap;
  }
  .main-nav {
    min-width: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .brand-sub {
    font-size: 0.67rem;
  }
  .nav-tab {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
  }
}

/* ---------- เมนูตั้งค่า ---------- */
.settings-wrap {
  position: relative;
}

.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(21rem, calc(100vw - 2rem));
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  z-index: 50;
}

.settings-section {
  padding: 0.75rem 0.8rem;
}

.settings-section + .settings-section {
  border-top: 1px solid var(--border-color);
}

.settings-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.switch-text {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.45;
}

.switch-text strong {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
}

.switch-text small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.switch {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.15s ease;
}

.switch.is-on {
  background: var(--success-strong);
}

.switch-knob {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.switch.is-on .switch-knob {
  transform: translateX(1.1rem);
}

.settings-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
}

/* ---------- แถบเลือกตำแหน่ง ---------- */
.position-bar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.pos-compact,
.pos-locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.pos-locked-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.pos-locked-name {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color: var(--text-main);
}

.pos-locked-meta,
.pos-status {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.pos-status {
  align-items: center;
  gap: 0.35rem;
}

.pos-status.is-unlocked {
  color: var(--success);
}

.pos-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pos-pill-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.pos-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.pos-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.pos-pill.is-active {
  background: var(--ctl-active-bg);
  border-color: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
}

.pos-pill-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.04rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
}

.pos-pill.is-active .pos-pill-count {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
}

body[data-theme="dark"] .pos-pill.is-active .pos-pill-count {
  background: rgba(15, 31, 56, 0.12);
}

.pos-expanded {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pos-expanded-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.85rem;
}

.pos-hub-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.pos-expanded-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
}

.pos-expanded-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.pos-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pos-accent, var(--brand-ink));
}

.pos-pill.is-active .pos-pill-icon {
  color: #FBBF24;
}

.pos-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pos-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: var(--pos-accent, #2563EB);
  opacity: 0.85;
  transition: height 0.2s ease, opacity 0.2s ease;
}

.pos-card:hover {
  transform: translateY(-4px);
  border-color: var(--pos-accent, var(--navy-600));
  box-shadow: 0 14px 28px -8px rgba(30, 27, 75, 0.15), 0 4px 10px -2px rgba(37, 99, 235, 0.08);
}

.pos-card.is-active {
  background: linear-gradient(145deg, #1E1B4B 0%, #1E3A8A 100%);
  border-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 16px 32px -8px rgba(30, 27, 75, 0.34);
  transform: translateY(-2px);
}

.pos-card.is-active::before {
  background: linear-gradient(90deg, #F59E0B 0%, #10B981 100%);
  height: 4px;
  opacity: 1;
}

.pos-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.pos-card-icon-wrap {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pos-soft, #EFF6FF);
  color: var(--pos-accent, #2563EB);
  border: 1px solid var(--pos-border, #BFDBFE);
  font-size: 1.05rem;
  flex: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pos-card:hover .pos-card-icon-wrap {
  transform: scale(1.07);
}

.pos-card.is-active .pos-card-icon-wrap {
  background: rgba(255, 255, 255, 0.15);
  color: #FBBF24;
  border-color: rgba(255, 255, 255, 0.26);
}

.pos-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.pos-card-doc {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pos-card-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.08rem 0.48rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.pos-card-flag.is-unlocked {
  background: var(--success-soft);
  color: var(--success);
}

.pos-card-name {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text-main);
}

.pos-card-vacancy {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.pos-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-color);
}

.pos-card.is-active .pos-card-footer {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.pos-card-count {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--pos-accent, var(--brand-ink));
}

.pos-card-arrow {
  font-family: 'Prompt', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pos-card.is-active .pos-card-doc,
.pos-card.is-active .pos-card-vacancy {
  color: #DBEAFE;
}

.pos-card.is-active .pos-card-count {
  color: #FBBF24;
}

.pos-card.is-active .pos-card-arrow {
  color: #6EE7B7;
  font-weight: 600;
}

.pos-card.is-active .pos-card-name {
  color: #FFFFFF;
}

.pos-card.is-active .pos-card-flag {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

body[data-theme="dark"] .pos-card.is-active .pos-card-flag {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- Hero ---------- */
.edtech-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.65rem 1.4rem;
  color: #FFFFFF;
  background:
    radial-gradient(110% 130% at 95% 5%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 55%),
    radial-gradient(85% 110% at 5% 95%, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 55%),
    linear-gradient(145deg, #1E1B4B 0%, #172554 55%, #1E3A8A 100%);
  box-shadow: 0 20px 44px -12px rgba(30, 27, 75, 0.32), 0 6px 16px -4px rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
  .edtech-hero {
    padding: 2.35rem 2.5rem;
  }
}

.edtech-hero-glow {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(48px);
}

.edtech-hero-glow--1 {
  width: 18rem;
  height: 18rem;
  top: -5rem;
  right: -3rem;
  background: rgba(37, 99, 235, 0.38);
}

.edtech-hero-glow--2 {
  width: 15rem;
  height: 15rem;
  bottom: -4rem;
  left: -3rem;
  background: rgba(16, 185, 129, 0.22);
}

.edtech-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 768px) {
  .edtech-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 1.15rem;
  }
}

@media (min-width: 1024px) {
  .edtech-hero-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.92fr);
    gap: 2.25rem;
  }
}

.edtech-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.05rem;
}

.edtech-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.9rem;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #A7F3D0;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.edtech-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.28);
  animation: edtechPulse 1.8s ease-in-out infinite;
  flex: none;
}

@keyframes edtechPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.75; }
}

.edtech-hero-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  line-height: 1.32;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.015em;
}

.edtech-text-highlight {
  color: #FBBF24;
  text-decoration: underline;
  text-decoration-color: rgba(245, 158, 11, 0.45);
  text-underline-offset: 6px;
}

.edtech-hero-sub {
  font-size: 0.95rem;
  line-height: 1.72;
  color: #DBEAFE;
  margin: 0;
  max-width: 44rem;
}

.edtech-stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  margin-top: 0.15rem;
}

@media (min-width: 640px) {
  .edtech-stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.edtech-stat-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.edtech-stat-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

.edtech-stat-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 1.05rem;
}

.edtech-stat-icon.is-indigo { background: rgba(99, 102, 241, 0.25); color: #C7D2FE; }
.edtech-stat-icon.is-blue { background: rgba(37, 99, 235, 0.32); color: #93C5FD; }
.edtech-stat-icon.is-emerald { background: rgba(16, 185, 129, 0.25); color: #6EE7B7; }
.edtech-stat-icon.is-amber { background: rgba(245, 158, 11, 0.26); color: #FDE68A; }

.edtech-stat-num {
  display: block;
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #FFFFFF;
}

.edtech-stat-label {
  display: block;
  font-size: 0.7rem;
  color: #BFDBFE;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.edtech-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.25rem;
}

.edtech-cta-primary {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  padding: 0.88rem 1.55rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #1E1B4B;
  border: 1px solid #FBBF24;
  box-shadow: 0 10px 24px -6px rgba(245, 158, 11, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.edtech-cta-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px -6px rgba(245, 158, 11, 0.7);
}

.edtech-cta-secondary {
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.88rem 1.35rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.11);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.edtech-cta-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 639px) {
  .edtech-cta-primary,
  .edtech-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

.edtech-countdown-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.35rem 1.4rem;
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35);
}

.edtech-cd-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(147, 197, 253, 0.35);
  color: #DBEAFE;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
}

.edtech-cd-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #F8FAFC;
  line-height: 1.4;
}

.edtech-cd-boxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.edtech-cd-unit {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.35rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(147, 197, 253, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.edtech-cd-unit.is-pulse {
  border-color: rgba(245, 158, 11, 0.55);
}

.edtech-cd-num {
  font-family: 'Prompt', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  color: #FBBF24;
}

.edtech-cd-lbl {
  font-family: 'Prompt', sans-serif;
  font-size: 0.68rem;
  color: #93C5FD;
  margin-top: 0.2rem;
}

.edtech-cd-sep {
  font-family: 'Prompt', monospace;
  font-weight: 700;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.45);
}

.edtech-cd-highlights {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.edtech-cd-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #E2E8F0;
}

.edtech-cd-item .ico {
  color: #10B981;
  flex: none;
}

.edtech-cd-store-btn {
  background: rgba(37, 99, 235, 0.32);
  border: 1px solid rgba(147, 197, 253, 0.4);
  color: #FFFFFF;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
}

.edtech-cd-store-btn:hover {
  background: rgba(37, 99, 235, 0.5);
}

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  color: #e2e8f0;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(47, 85, 150, 0.55) 0%, rgba(47, 85, 150, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(245, 165, 36, 0.12) 0%, rgba(245, 165, 36, 0) 60%),
    linear-gradient(160deg, #0f1f38 0%, #0a1628 100%);
  box-shadow: var(--shadow-md);
}

@media (min-width: 1024px) {
  .hero {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 2rem 2.1rem;
  }
}

.hero-deco {
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.hero-deco .ico {
  width: 15rem;
  height: 15rem;
  stroke-width: 1.2;
}

.hero-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.hero-meta {
  font-size: 0.78rem;
  color: #94a3b8;
}

.hero-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
}

.hero-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #b8c4d6;
  max-width: 44rem;
  margin: 0;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.hero-facts span {
  display: flex;
  flex-direction: column;
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: #f1f5f9;
}

.hero-facts small {
  font-family: 'Sarabun', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  color: #94a3b8;
}

.hero-details {
  font-size: 0.82rem;
  color: #cbd5e1;
}

.hero-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Prompt', sans-serif;
  color: #e2e8f0;
}

.hero-details summary::-webkit-details-marker {
  display: none;
}

.hero-details[open] .hero-details-caret {
  transform: rotate(180deg);
}

.hero-details p {
  margin: 0.5rem 0 0;
  line-height: 1.7;
  max-width: 44rem;
}

.score-split {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 34rem;
}

.score-split-label {
  font-size: 0.74rem;
  color: #94a3b8;
}

.score-split-bar {
  display: flex;
  height: 1.75rem;
  border-radius: 0.6rem;
  overflow: hidden;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
}

.score-split-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.seg-part1 { background: #4f7fd9; color: #ffffff; }
.seg-part2 { background: rgba(255, 255, 255, 0.16); color: #e2e8f0; }

.hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: none;
}

@media (min-width: 1024px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.hero-center {
  text-align: center;
  align-items: center !important;
  flex-direction: column !important;
}

.hero-center .hero-body {
  align-items: center;
}

.hero-actions-center {
  flex-direction: row !important;
  justify-content: center;
}

/* ---------- Section ---------- */
.section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

@media (min-width: 768px) {
  .section-card {
    padding: 1.6rem 1.75rem;
  }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.section-head h3 {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--text-main);
  margin: 0;
}

.section-head p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.toolbar-hint {
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- Exam Readiness Progress Bar & Dashboard (Ticket 2) ---------- */
.readiness-dashboard-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  position: relative;
  overflow: hidden;
}

.readiness-dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1E1B4B 0%, #2563EB 50%, #10B981 100%);
}

.readiness-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.readiness-title-group {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.readiness-icon-badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pos-soft, #EFF6FF);
  color: var(--pos-accent, #2563EB);
  border: 1px solid rgba(37, 99, 235, 0.2);
  font-size: 1.25rem;
  flex: none;
}

.readiness-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-main);
  margin: 0;
  line-height: 1.35;
}

.readiness-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0;
  line-height: 1.5;
}

.readiness-score-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.5rem 0.9rem;
  border-radius: 0.85rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}

.readiness-score-num {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--brand-ink);
}

.readiness-score-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.readiness-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.readiness-progress-track {
  position: relative;
  height: 0.9rem;
  border-radius: 9999px;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.readiness-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563EB 0%, #10B981 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.readiness-pass-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: #F59E0B;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.readiness-milestones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.readiness-milestone-pass {
  color: var(--warn-ink);
  font-weight: 600;
}

.readiness-kpi-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (min-width: 640px) {
  .readiness-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .readiness-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.readiness-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.readiness-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.readiness-kpi-label .ico {
  color: #2563EB;
}

.readiness-kpi-val {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-main);
}

.readiness-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------- 2-Side Syllabus Structure Overview & Split Grid (Ticket 2) ---------- */
.syllabus-structure-header {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.3rem;
  border-radius: 1.15rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.syllabus-main-heading {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0;
}

.syllabus-main-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

.syllabus-dual-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .syllabus-dual-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.syllabus-overview-pill {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border-color);
}

.syllabus-overview-pill.is-core {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(30, 27, 75, 0.04) 100%);
  border-color: rgba(37, 99, 235, 0.25);
}

.syllabus-overview-pill.is-specific {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.32);
}

.syllabus-overview-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: 'Prompt', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.syllabus-overview-pill.is-core .syllabus-overview-badge {
  background: #2563EB;
  color: #FFFFFF;
}

.syllabus-overview-pill.is-specific .syllabus-overview-badge {
  background: #D97706;
  color: #FFFFFF;
}

.syllabus-overview-detail {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.syllabus-overview-detail strong {
  font-family: 'Prompt', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.syllabus-overview-detail span {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.syllabus-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .syllabus-split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.syllabus-col-card {
  position: relative;
  overflow: hidden;
}

.syllabus-col-card.is-core-col {
  border-top: 4px solid #2563EB;
}

.syllabus-col-card.is-specific-col {
  border-top: 4px solid #F59E0B;
}

.syllabus-col-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.syllabus-col-kicker.is-core {
  color: #2563EB;
}

.syllabus-col-kicker.is-specific {
  color: #D97706;
}

/* ---------- 2-Column Sticky Left Sidebar + Right Main Workspace (Home Explorer) ---------- */
.explorer-workspace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .explorer-workspace-grid {
    grid-template-columns: 325px minmax(0, 1fr);
    gap: 1.4rem;
  }
}

.explorer-left-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .explorer-left-sidebar {
    position: sticky;
    top: 4.5rem;
  }
}

.explorer-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Compact Sidebar Hero Card */
.hero.hero-sidebar-card {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 1.25rem 1.25rem;
  gap: 1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero.hero-sidebar-card .hero-title {
  font-size: 1.22rem;
  line-height: 1.32;
}

.hero-facts.is-sidebar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.hero-facts.is-sidebar-grid .is-full-span {
  grid-column: 1 / -1;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.hero-facts.is-sidebar-grid span {
  font-size: 0.78rem;
  line-height: 1.4;
}

.hero-facts.is-sidebar-grid small {
  font-size: 0.66rem;
}

.hero-actions.is-sidebar-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

/* Quick Navigation Menu in Left Sidebar */
.explorer-side-menu {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.explorer-side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.explorer-side-menu-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.explorer-side-menu-head .ico {
  color: #2563EB;
}

.explorer-side-menu-list {
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  gap: 0.2rem;
}

.explorer-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.52rem 0.7rem;
  border-radius: 0.7rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-align: left;
}

.explorer-side-link:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
  border-color: var(--border-color);
}

.explorer-side-link.is-active {
  background: #EEF2FF;
  color: #1E1B4B;
  border-color: #C7D2FE;
  font-weight: 600;
}

body[data-theme="dark"] .explorer-side-link.is-active {
  background: rgba(37, 99, 235, 0.24);
  color: #F8FAFC;
  border-color: rgba(96, 165, 250, 0.4);
}

.explorer-side-link-left {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.explorer-side-link-left .ico {
  color: #2563EB;
}

.explorer-side-link-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.48rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  white-space: nowrap;
}

.explorer-side-link-badge.is-blue { background: #DBEAFE; color: #1D4ED8; }
.explorer-side-link-badge.is-amber { background: #FEF3C7; color: #B45309; }
.explorer-side-link-badge.is-emerald { background: #D1FAE5; color: #047857; }

/* Compact Readiness Meter inside Left Sidebar */
.readiness-dashboard-card.is-sidebar-compact {
  padding: 0.75rem 0.85rem;
  gap: 0.5rem;
  border-radius: 0.95rem;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-head {
  gap: 0.4rem 0.6rem;
  flex-wrap: nowrap;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-title-group {
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-title {
  font-size: 0.82rem;
  line-height: 1.25;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-icon-badge {
  width: 1.95rem;
  height: 1.95rem;
  font-size: 0.92rem;
  border-radius: 0.6rem;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-score-box {
  padding: 0.25rem 0.55rem;
  border-radius: 0.65rem;
  flex: none;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-score-num {
  font-size: 1rem;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-progress-wrap {
  gap: 0.25rem;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-progress-track {
  height: 0.55rem;
}

.readiness-dashboard-card.is-sidebar-compact .readiness-milestones {
  font-size: 0.68rem;
}

.readiness-kpi-grid.is-sidebar-kpi {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.35rem;
}

.readiness-kpi-grid.is-sidebar-kpi .readiness-kpi-item {
  padding: 0.38rem 0.45rem;
  border-radius: 0.65rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
}

.readiness-kpi-grid.is-sidebar-kpi .readiness-kpi-label {
  font-size: 0.68rem;
  gap: 0.2rem;
}

.readiness-kpi-grid.is-sidebar-kpi .readiness-kpi-val {
  font-size: 0.78rem;
}

.syllabus-overview-pill.is-selected {
  box-shadow: 0 0 0 2px #2563EB;
}

/* ---------- รายวิชาแบบ Compact Card Row (อ่านง่ายในหน้าเดียว ไม่เลื่อนยาว) ---------- */
.syllabus-col-card {
  padding: 1.1rem 1.25rem !important;
  gap: 0.75rem !important;
}

.section-head.is-compact-head {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}

.subject-list {
  display: flex;
  flex-direction: column;
}

.subject-list.is-compact-list {
  gap: 0.38rem;
}

.subject-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-color);
}

.subject-row.is-compact-card {
  padding: 0.52rem 0.78rem;
  border: 1px solid #CBD5E1;
  border-left: 4px solid #2563EB;
  border-radius: 0.7rem;
  background: var(--bg-subtle);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.subject-row.is-compact-card.is-part2 {
  border-left-color: #D97706;
}

.subject-row.is-compact-card:hover {
  background: var(--bg-surface);
  border-color: #60A5FA;
  box-shadow: 0 4px 12px -4px rgba(30, 27, 75, 0.1);
}

@media (min-width: 640px) {
  .subject-row,
  .subject-row.is-compact-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.subject-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

.subject-row-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.subject-row-text-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.subject-row-title h4 {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.38;
  color: var(--text-main);
  margin: 0;
}

@media (min-width: 640px) {
  .subject-row.is-compact-card .subject-row-title h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.subject-row-summary {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0.12rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subject-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

@media (max-width: 639px) {
  .subject-row-actions {
    flex-wrap: wrap;
    padding-left: 2.8rem;
  }
}

.subject-row-count {
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.code-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.12rem 0.45rem;
  margin-top: 0.12rem;
  border-radius: 0.45rem;
  background: var(--brand-soft);
  color: var(--brand-ink);
  white-space: nowrap;
}

.code-pill.is-part2 {
  background: #f6efe3;
  color: #7a5414;
}

body[data-theme="sepia"] .code-pill.is-part2 { background: #efe2c9; }
body[data-theme="dark"] .code-pill.is-part2 { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }

/* ---------- แถบรายวิชาด้านซ้าย / ตัวเลือกวิชา ---------- */
.side-nav {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.side-nav-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.side-nav-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-main);
}

.side-nav-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem;
  max-height: 72vh;
  overflow-y: auto;
}

.side-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.side-group-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.15rem 0.5rem 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.side-group-label span:first-child {
  font-weight: 600;
  color: var(--text-secondary);
}

.side-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 0.7rem;
  border: 1px solid transparent;
  color: var(--text-main);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.side-item:hover {
  background: var(--bg-subtle);
}

.side-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.side-item-count {
  flex: none;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.12rem;
  white-space: nowrap;
}

.side-item.is-active {
  background: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
}

.side-item.is-active .side-item-count {
  color: inherit;
  opacity: 0.7;
}

.side-item.is-active .code-pill {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
}

body[data-theme="dark"] .side-item.is-active .code-pill {
  background: rgba(15, 31, 56, 0.12);
}

.option-tile {
  border-color: var(--border-color);
  background: var(--bg-surface);
  padding: 0.65rem 0.75rem;
}

.option-tile:hover {
  border-color: var(--border-strong);
}

.option-tile.is-active {
  border-color: var(--ctl-active-bg);
}

/* ---------- ห้องอ่านข้อสอบ ---------- */
.reader-card {
  overflow: hidden;
  border-width: 1px !important;
  border-radius: 1.1rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.reader-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  padding: 1.15rem 1.35rem;
}

.reader-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  width: 100%;
}

.reader-head-kicker-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.reader-head-kicker-wrap .heading-kicker {
  margin-bottom: 0 !important;
}

.reader-title-banner {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.07) 0%, rgba(248, 250, 252, 0.85) 100%);
  border: 1px solid rgba(147, 197, 253, 0.45);
}

.reader-head.heading-accent-amber .reader-title-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.09) 0%, rgba(255, 251, 235, 0.85) 100%);
  border-color: rgba(252, 211, 77, 0.55);
}

body[data-theme="sepia"] .reader-title-banner {
  background: #F5EFE2;
  border-color: #D6C7B2;
}

body[data-theme="dark"] .reader-title-banner,
body[data-theme="dark"] .reader-head.heading-accent-amber .reader-title-banner {
  background: rgba(15, 23, 42, 0.75);
  border-color: #334155;
}

.reader-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text-main);
  margin: 0;
  width: 100%;
}

.reader-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.reader-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1.25rem 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
}

.reader-search {
  position: relative;
}

.reader-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}

.reader-search-input {
  width: 100%;
  padding: 0.62rem 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reader-search-input::placeholder {
  color: var(--text-muted);
}

.reader-search-input:focus {
  border-color: var(--navy-600);
  box-shadow: var(--ring);
}

.reader-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.reader-search-clear:hover {
  background: var(--bg-muted);
  color: var(--text-main);
}

.reader-search-input:placeholder-shown + .reader-search-clear {
  display: none;
}

.reader-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.reader-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.reader-chip-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0.2rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.filter-chip.is-active {
  background: var(--ctl-active-bg);
  border-color: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
}

.filter-chip-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: var(--bg-muted);
}

.filter-chip.is-active .filter-chip-count {
  background: rgba(255, 255, 255, 0.2);
}

.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.status-bar-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.status-bar-text strong {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color: var(--text-main);
}

.page-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.page-pill {
  padding: 0.28rem 0.65rem;
  border-radius: 0.55rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: all 0.15s ease;
}

.page-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.page-pill.is-active {
  background: var(--ctl-active-bg);
  border-color: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
  font-weight: 600;
}

/* ---------- กรอบโซนตัวอย่างแนวข้อสอบ & การ์ดข้อสอบ High-Contrast (ไม่กลืนพื้นหลัง) ---------- */
.sample-showcase-card {
  background: linear-gradient(180deg, #E2E8F0 0%, #EEF2FF 100%) !important;
  border: 2px solid #94A3B8 !important;
  box-shadow: 0 14px 32px -8px rgba(30, 27, 75, 0.12) !important;
}

body[data-theme="sepia"] .sample-showcase-card {
  background: linear-gradient(180deg, #E5DAC6 0%, #EFE7D8 100%) !important;
  border-color: #B09F82 !important;
}

body[data-theme="dark"] .sample-showcase-card {
  background: linear-gradient(180deg, #0F172A 0%, #152238 100%) !important;
  border-color: #3B5275 !important;
}

.sample-showcase-head {
  padding-bottom: 0.65rem;
  border-bottom: 1.5px solid rgba(100, 116, 139, 0.25);
}

.sample-showcase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1D4ED8;
  background: #DBEAFE;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
}

body[data-theme="dark"] .sample-showcase-kicker {
  background: rgba(37, 99, 235, 0.25);
  color: #93C5FD;
}

/* การ์ดข้อสอบ High-Contrast (แยกชั้นออกจากพื้นหลังชัดเจนทุกโหมดสี) */
.question-card-frame {
  background-color: var(--bg-surface);
  border: 2px solid #64748B;
  border-top: 6px solid #1E1B4B;
  border-radius: 1.15rem;
  box-shadow: 0 14px 32px -6px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.question-card-frame.star-highlight {
  border-top-color: #D97706;
}

body[data-theme="sepia"] .question-card-frame {
  border-color: #9C8A6E;
  border-top-color: #5C4428;
}

body[data-theme="sepia"] .question-card-frame.star-highlight {
  border-top-color: #B45309;
}

body[data-theme="dark"] .question-card-frame {
  border-color: #476288;
  border-top-color: #3B82F6;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
}

body[data-theme="dark"] .question-card-frame.star-highlight {
  border-top-color: #F59E0B;
}

.qcard {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: 1.2rem 1.1rem 1.3rem;
}

@media (min-width: 768px) {
  .qcard {
    padding: 1.5rem 1.75rem 1.65rem;
    gap: 1.15rem;
  }
}

.qcard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  background: linear-gradient(90deg, #E0E7FF 0%, #E2E8F0 100%);
  margin: -1.2rem -1.1rem 0.15rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 2px solid #94A3B8;
  border-radius: 0.9rem 0.9rem 0 0;
}

@media (min-width: 768px) {
  .qcard-head {
    margin: -1.5rem -1.75rem 0.25rem;
    padding: 0.95rem 1.75rem;
  }
}

body[data-theme="sepia"] .qcard-head {
  background: linear-gradient(90deg, #EAE0CE 0%, #EFE7D8 100%);
  border-bottom-color: #B09F82;
}

body[data-theme="dark"] .qcard-head {
  background: linear-gradient(90deg, #1E2D45 0%, #243652 100%);
  border-bottom-color: #3B5275;
}

.qcard-head-left,
.qcard-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.qcard-num {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  line-height: 1.4;
  background: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
  padding: 0.24rem 0.7rem;
  border-radius: 0.55rem;
  white-space: nowrap;
}

.qcard-num--correct { background: var(--success-soft); color: var(--success); }
.qcard-num--wrong { background: var(--danger-soft); color: var(--danger); }
.qcard-num--skipped { background: var(--bg-muted); color: var(--text-secondary); }
.qcard-num--locked { background: var(--bg-muted); color: var(--text-muted); }

.qcard-ref {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 100%;
}

.qcard-ref .ico {
  color: var(--text-muted);
  margin-top: 0.15em;
}

.case-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #4338ca;
  background: #eef0fd;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

body[data-theme="dark"] .case-chip { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }

.star-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.4;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  max-width: 100%;
}

.star-chip-icon {
  display: inline-flex;
  gap: 1px;
  color: #d4910f;
}

.star-chip-icon .ico {
  width: 0.78rem;
  height: 0.78rem;
}

.star-chip--note .ico {
  color: var(--text-muted);
}

.star-chip-label {
  min-width: 0;
}

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.22rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.bookmark-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.bookmark-btn.is-saved {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}

/* โจทย์ + ป้าย [โจทย์เคสสมมติ] */
.case-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.5rem;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74em;
  font-weight: 500;
  line-height: 1.6;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* ตัวเลือก [ก] [ข] [ค] [ง] — High-Contrast Thumb-Friendly Choice Pills */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.choice-row,
.neutral-choice-box.choice-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 3.55rem;
  text-align: left;
  padding: 0.8rem 1.05rem 0.8rem 0.85rem;
  border-radius: 0.95rem;
  border: 1.5px solid #94A3B8;
  border-left: 4px solid #3B82F6;
  background-color: #F1F5F9;
  color: var(--text-main);
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-theme="sepia"] .choice-row,
body[data-theme="sepia"] .neutral-choice-box.choice-row {
  background-color: #EFE7D8;
  border-color: #B09F82;
  border-left-color: #8C6239;
}

body[data-theme="dark"] .choice-row,
body[data-theme="dark"] .neutral-choice-box.choice-row {
  background-color: #1C2A42;
  border-color: #476288;
  border-left-color: #3B82F6;
}

button.choice-row.neutral-choice-box:hover,
body[data-theme="sepia"] button.choice-row.neutral-choice-box:hover,
body[data-theme="dark"] button.choice-row.neutral-choice-box:hover {
  border-color: #2563EB;
  background-color: #EFF6FF;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.18);
}

body[data-theme="sepia"] button.choice-row.neutral-choice-box:hover {
  background-color: #EBE2D0;
}

body[data-theme="dark"] button.choice-row.neutral-choice-box:hover {
  background-color: #253757;
}

button.choice-row:active:not(:disabled) {
  transform: scale(0.988);
}

.choice-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.16);
}

@keyframes choicePopIn {
  0% { transform: scale(0.985); }
  50% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

.choice-letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--choice-text-size);
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.7rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  line-height: 1;
  background: #1E1B4B;
  color: #FFFFFF;
  border: 1.5px solid #1E1B4B;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body[data-theme="sepia"] .choice-letter {
  background: #4A3728;
  color: #FDFAF3;
  border-color: #4A3728;
}

body[data-theme="dark"] .choice-letter {
  background: #3B82F6;
  color: #FFFFFF;
  border-color: #60A5FA;
}

.choice-body {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.65;
  color: inherit;
}

.choice-tag {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.22rem 0.68rem;
  border-radius: 999px;
  white-space: nowrap;
}

.choice-tag--correct { background: var(--success-strong); color: #ffffff; }
.choice-tag--wrong { background: var(--danger-strong); color: #ffffff; }
.choice-tag--selected { background: #2563EB; color: #ffffff; }

button.choice-row.neutral-choice-box:hover .choice-letter {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  transform: scale(1.06);
}

.choice-correct,
body[data-theme="sepia"] .choice-correct {
  border-color: #10B981 !important;
  background-color: var(--success-soft) !important;
  color: var(--text-main) !important;
  animation: choicePopIn 0.26s ease-out;
  box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.18);
}

.choice-wrong,
body[data-theme="sepia"] .choice-wrong {
  border-color: #EF4444 !important;
  background-color: var(--danger-soft) !important;
  color: var(--text-main) !important;
  animation: choicePopIn 0.26s ease-out;
  box-shadow: 0 6px 16px -4px rgba(239, 68, 68, 0.16);
}

.choice-selected,
body[data-theme="sepia"] .choice-selected {
  border-color: #2563EB !important;
  background-color: var(--brand-soft) !important;
  animation: choicePopIn 0.24s ease-out;
  box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.18);
}

body[data-theme="dark"] .choice-correct { border-color: rgba(52, 211, 153, 0.55) !important; color: #e2fbef !important; }
body[data-theme="dark"] .choice-wrong { border-color: rgba(251, 113, 133, 0.55) !important; color: #ffe4e8 !important; }
body[data-theme="dark"] .choice-selected { border-color: #60a5fa !important; color: #f1f5f9 !important; }

.choice-correct .choice-letter { background: var(--success-strong); color: #ffffff; border-color: var(--success-strong); transform: scale(1.05); }
.choice-wrong .choice-letter { background: var(--danger-strong); color: #ffffff; border-color: var(--danger-strong); }
.choice-selected .choice-letter { background: #2563EB; color: #ffffff; border-color: #2563EB; transform: scale(1.05); }

.choice-correct .choice-body,
.choice-wrong .choice-body,
.choice-selected .choice-body {
  font-weight: 600;
}

.choice-dimmed .choice-body {
  opacity: 0.65;
}

@media (max-width: 640px) {
  .choice-row,
  .neutral-choice-box.choice-row {
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    padding: 0.85rem 0.9rem;
    min-height: 3.6rem;
  }
  .choice-body {
    flex: 1 1 65%;
  }
  .choice-tag {
    margin-left: auto;
  }
}

.qcard-hint {
  margin-top: -0.3rem;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.qcard-hint-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
}

.qcard-hint-link:hover {
  color: var(--text-main);
}

/* กล่องเฉลยละเอียด (Solution Box) & กล่องจุดหลอก (Trap Alert) — แยกสัดส่วนตัวบท เหตุผล และจุดหลอกชัดเจนด้วยการ์ดสีเขียว/น้ำเงิน/แดงนวลตา */
.solution-bottom-box.sol-box,
body[data-theme="sepia"] .solution-bottom-box.sol-box,
body[data-theme="dark"] .solution-bottom-box.sol-box {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 1.15rem;
}

@media (min-width: 768px) {
  .solution-bottom-box.sol-box {
    padding: 1.3rem 1.4rem;
  }
}

.sol-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  border-radius: 0.8rem;
}

.sol-result--correct { background: var(--success-soft); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); }
.sol-result--wrong { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3); }

.sol-answer {
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-left: 4px solid var(--success-strong);
}

.sol-explain {
  padding: 0.95rem 1.15rem;
  border-radius: 0.9rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 4px solid var(--navy-600);
}

.sol-trap {
  padding: 0.95rem 1.15rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-left: 4px solid #EF4444;
}

body[data-theme="dark"] .sol-answer {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

body[data-theme="dark"] .sol-explain {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
  border-left-color: #60a5fa;
}

body[data-theme="dark"] .sol-trap {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.28);
  border-left-color: #fb7185;
}

.sol-answer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sol-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.24rem 0.75rem;
  border-radius: 999px;
  background: #10B981;
  color: #FFFFFF;
}

.sol-answer-text {
  font-size: var(--choice-text-size);
  line-height: 1.72;
  font-weight: 600;
  color: var(--text-main);
}

.sol-answer-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sol-tool-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sol-tool-link:hover {
  color: var(--text-main);
}

.sol-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-main);
  margin-bottom: 0.45rem;
}

.sol-icon-pill {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.48rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sol-icon-pill.is-law {
  background: rgba(37, 99, 235, 0.14);
  color: #2563EB;
}

.sol-icon-pill.is-trap {
  background: rgba(239, 68, 68, 0.14);
  color: #DC2626;
}

.sol-explain .sol-section-title { color: var(--brand-ink); }
body[data-theme="dark"] .sol-explain .sol-section-title { color: #93c5fd; }
.sol-trap .sol-section-title { color: #B91C1C; }
body[data-theme="dark"] .sol-trap .sol-section-title { color: #fda4af; }

.sol-section-body p {
  margin: 0;
  line-height: 1.9;
  color: var(--text-secondary);
}

.sol-section-body p + p {
  margin-top: 0.65rem;
}

.sol-locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  border: 1px dashed var(--border-strong);
  background: var(--bg-subtle);
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.sol-locked > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* ---------- ห้องสอบ ---------- */
.exam-card {
  overflow: hidden;
  border-width: 1px !important;
  border-radius: 1.1rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.exam-progress {
  height: 4px;
  background: var(--bg-muted);
}

.exam-progress > div {
  height: 100%;
  background: var(--navy-600);
  transition: width 0.3s ease;
}

.exam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.exam-head-left,
.exam-head-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.exam-session {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
}

.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.timer-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--text-main);
}

.timer-text.is-urgent {
  color: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

.exam-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .exam-body {
    padding: 1.6rem 1.75rem;
  }
}

.exam-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-color);
}

.exam-foot-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.exam-foot-meta small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.answer-sheet {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-width: 1px !important;
  border-radius: 1.1rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.answer-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.answer-sheet-head h4 {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0;
  color: var(--text-main);
}

.answer-sheet-head span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.answer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.answer-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.2rem;
  display: inline-block;
}

.dot-correct { background: var(--success-strong); }
.dot-wrong { background: var(--danger-strong); }
.dot-selected { background: var(--ctl-active-bg); }
.dot-empty { background: var(--bg-muted); border: 1px solid var(--border-color); }

.answer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.15rem;
}

.answer-cell {
  position: relative;
  height: 2.1rem;
  border-radius: 0.55rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.76rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.answer-cell:hover {
  border-color: var(--border-strong);
}

.answer-cell.is-correct { background: #059669; border-color: #059669; color: #ffffff; font-weight: 600; }
.answer-cell.is-wrong { background: #dc2626; border-color: #dc2626; color: #ffffff; font-weight: 600; }
.answer-cell.is-selected { background: #2563eb; border-color: #2563eb; color: #ffffff; font-weight: 600; }
.answer-cell.is-flagged:not(.is-answered) {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
  font-weight: 600;
}
.answer-cell.is-flagged.is-answered {
  box-shadow: inset 0 0 0 2px #fbbf24;
}
.answer-cell.is-current { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent); }

.answer-cell-flag {
  position: absolute;
  top: -0.35rem;
  right: -0.25rem;
  color: #d97706;
  font-size: 0.7rem;
}

.answer-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

/* ---------- ตั้งค่าการสอบ ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 0.9rem;
  overflow: hidden;
}

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg-subtle);
}

.setting-row + .setting-row {
  border-top: 1px solid var(--border-color);
}

.setting-name {
  width: 7.5rem;
  flex: none;
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.start-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.start-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.start-summary strong {
  color: var(--text-main);
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- ผลสอบ (Exam Scorecard & 3-Sec Diagnostic — Ticket 3) ---------- */
.result-card {
  position: relative;
  overflow: hidden;
  border-top: 4px solid #2563EB;
}

.scorecard-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .scorecard-hero-grid {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
  }
}

.scorecard-donut-wrap {
  position: relative;
  width: 10.5rem;
  height: 10.5rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scorecard-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.scorecard-donut-bg {
  fill: none;
  stroke: var(--bg-muted);
  stroke-width: 3.4;
}

.scorecard-donut-fill {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.scorecard-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scorecard-info-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .scorecard-info-col {
    align-items: flex-start;
    text-align: left;
  }
}

.scorecard-headline {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.38;
  color: var(--text-main);
  margin: 0;
}

.result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.result-percent {
  font-family: 'Prompt', sans-serif;
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.result-percent.is-pass { color: var(--success); }
.result-percent.is-fail { color: var(--danger); }

.result-raw {
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
}

@media (min-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.stat-tile small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stat-tile strong {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

/* 3-Second Strengths & Weaknesses Diagnostic Grid */
.sw-3sec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 1024px) {
  .sw-3sec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sw-diagnostic-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-subtle);
}

.sw-diagnostic-card.is-strength {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.28);
}

.sw-diagnostic-card.is-moderate {
  background: rgba(37, 99, 235, 0.05);
  border-color: rgba(37, 99, 235, 0.24);
}

.sw-diagnostic-card.is-weakness {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.28);
}

.sw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sw-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}

.sw-card-badge.is-strength { background: #10B981; color: #FFFFFF; }
.sw-card-badge.is-moderate { background: #2563EB; color: #FFFFFF; }
.sw-card-badge.is-weakness { background: #EF4444; color: #FFFFFF; }

.sw-card-count {
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sw-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sw-subject-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.65rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-main);
}

.sw-subject-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-subject-chip strong {
  font-family: 'Prompt', sans-serif;
  font-size: 0.76rem;
  color: var(--success);
  white-space: nowrap;
}

.sw-review-link {
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--danger);
  white-space: nowrap;
}

.sw-review-link:hover {
  text-decoration: underline;
}

.sw-empty-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.sw-empty-note.is-great {
  color: var(--success);
  font-weight: 600;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.breakdown-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.15rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border-color);
}

.breakdown-row:first-child {
  border-top: 0;
}

.breakdown-main {
  min-width: 0;
  flex: 1 1 18rem;
}

.breakdown-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.breakdown-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-main);
}

.breakdown-status-pill {
  font-family: 'Prompt', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}

.breakdown-status-pill.is-good { background: var(--success-soft); color: var(--success); }
.breakdown-status-pill.is-ok { background: var(--brand-soft); color: var(--brand-ink); }
.breakdown-status-pill.is-low { background: var(--danger-soft); color: var(--danger); }

.meter {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.meter-fill.is-good { background: linear-gradient(90deg, #059669 0%, #10B981 100%); }
.meter-fill.is-ok { background: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%); }
.meter-fill.is-low { background: linear-gradient(90deg, #DC2626 0%, #F59E0B 100%); }

.breakdown-side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breakdown-score {
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}

.breakdown-score.is-good { color: var(--success); }
.breakdown-score.is-ok { color: var(--brand-ink); }
.breakdown-score.is-low { color: var(--danger); }

/* ---------- ร้านค้า (SaaS Pricing Table & Interactive Group Buying — Ticket 4) ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #93C5FD;
}

.product-card.is-owned {
  border-color: #10B981;
}

.product-card.is-master-bundle {
  border: 2px solid #F59E0B;
  box-shadow: 0 18px 38px -10px rgba(245, 158, 11, 0.25), 0 6px 16px -4px rgba(30, 27, 75, 0.14);
}

.product-head {
  padding: 1.3rem 1.25rem;
  color: #e2e8f0;
  background: linear-gradient(145deg, #1E1B4B 0%, #172554 60%, #1E3A8A 100%);
  border-bottom: 3px solid var(--pos-accent, #2563EB);
}

.product-head.is-master-bundle-head {
  background:
    radial-gradient(110% 130% at 95% 0%, rgba(245, 158, 11, 0.36) 0%, rgba(245, 158, 11, 0) 60%),
    linear-gradient(145deg, #1E1B4B 0%, #312E81 55%, #1D4ED8 100%);
  border-bottom: 3px solid #F59E0B;
}

.product-pos-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 1.2rem;
}

.product-pos-icon.is-bundle {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #1E1B4B;
}

.saas-hot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #EF4444 0%, #F59E0B 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.45);
}

.saas-hot-pill.is-gold {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #1E1B4B;
}

.package-box.is-master-package-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-color: #F59E0B;
}

.saas-bundle-promo-box {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
}

/* Interactive Group Buying Range Slider Widget */
.group-slider-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.25rem;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.04) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1.5px solid rgba(37, 99, 235, 0.2);
}

.group-range-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: 0.95rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.group-range-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.group-range-current {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.88rem;
  color: var(--text-main);
}

.group-range-current .ico {
  color: #2563EB;
}

.group-range-saving {
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.group-range-saving.is-saving {
  background: var(--success-soft);
  color: var(--success);
}

.group-range-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.group-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #2563EB 0%,
    #10B981 var(--slider-pct, 0%),
    var(--bg-muted) var(--slider-pct, 0%),
    var(--bg-muted) 100%
  );
  outline: none;
  cursor: pointer;
}

.group-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #1E1B4B;
  border: 3px solid #FBBF24;
  box-shadow: 0 4px 10px rgba(30, 27, 75, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.group-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.group-range-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #1E1B4B;
  border: 3px solid #FBBF24;
  box-shadow: 0 4px 10px rgba(30, 27, 75, 0.3);
  cursor: pointer;
}

.group-range-ticks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}

@media (min-width: 768px) {
  .group-range-ticks {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

.group-tick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.2rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  font-family: 'Prompt', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.group-tick-btn span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-main);
}

.group-tick-btn small {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.group-tick-btn.is-group small {
  color: var(--success);
  font-weight: 600;
}

.group-tick-btn.is-active {
  background: #1E1B4B;
  border-color: #2563EB;
  color: #FFFFFF;
}

.group-tick-btn.is-active span {
  color: #FFFFFF;
}

.group-tick-btn.is-active small {
  color: #FBBF24;
}

.product-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.product-doc {
  font-size: 0.72rem;
  color: #94a3b8;
}

.product-head h3 {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  margin: 0;
}

.product-head p {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0.3rem 0 0;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem 1.25rem;
  flex: 1 1 auto;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.feature-list li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.feature-list .ico {
  color: var(--success);
  margin-top: 0.2em;
}

.price-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border-color);
}

.price-option.is-featured {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.price-option-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-main);
}

.price-option-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.price-option-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.price {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
}

/* ---------- โปรโมชันซื้อเป็นกลุ่ม & แพ็กเกจเดียว ---------- */
.group-ctrl-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.group-ctrl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  border-radius: 0.7rem;
  padding: 0.18rem;
  gap: 0.25rem;
}

.qty-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.qty-btn:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-value {
  min-width: 4.4rem;
  text-align: center;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-main);
  padding: 0 0.35rem;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 767px) {
  .tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.8rem 0.95rem;
  border-radius: 0.85rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-subtle);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tier-card:hover {
  border-color: var(--border-strong);
}

.tier-card.is-active {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  box-shadow: var(--shadow-sm);
}

.tier-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.4rem;
}

.tier-size {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
}

.tier-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.package-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border-radius: 0.9rem;
  border: 1.5px solid var(--warn-line);
  background: var(--warn-soft);
  margin-top: auto;
}

.package-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.package-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.price-per-person {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: 'Prompt', sans-serif;
}

.price-per-person strong {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.1;
}

.price-per-person small {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.price-orig {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.package-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--warn-line);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.save-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--success);
}

.card-qty-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.card-qty-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.member-slot-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 15.5rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.member-slot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.member-slot-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 8.5rem;
}

.member-slot-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 13rem;
  justify-content: flex-end;
}

.member-slot-controls .select-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.member-slot-price {
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.order-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.order-row.is-discount {
  color: var(--success);
  font-weight: 600;
}

.invite-code-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 17rem;
  overflow-y: auto;
}

.invite-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.invite-code-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.invite-code-info strong {
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  color: var(--text-main);
}

.invite-code-info small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.invite-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.invite-code-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-main);
}

.group-promo-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.35rem;
  border-radius: 1rem;
  border: 1.5px solid var(--warn-line);
  background: var(--warn-soft);
}

.group-promo-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 20rem;
  min-width: 0;
}

.group-promo-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-main);
  margin: 0;
}

.group-promo-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.group-promo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.group-promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Modal ชำระเงิน ---------- */
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  color: #e2e8f0;
  background: linear-gradient(160deg, #0f1f38 0%, #0a1628 100%);
}

.modal-head h3 {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  color: #ffffff;
  margin: 0.55rem 0 0;
}

.modal-head .icon-btn {
  color: #94a3b8;
}

.modal-head .icon-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
}

.order-summary {
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.order-summary small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.order-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  margin-top: 0.15rem;
}

.order-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.order-total strong {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-main);
}

.note-box {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border-left: 3px solid var(--navy-600);
  background: var(--brand-soft);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.note-box p {
  margin: 0.25rem 0 0;
}

.note-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color: var(--text-main);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

#checkout-modal-content {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

#refund-policy-modal-content {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

body[data-theme="dark"] #refund-policy-modal-content .text-slate-900,
body[data-theme="dark"] #refund-policy-modal-content .text-slate-800,
body[data-theme="dark"] #refund-policy-modal-content .text-slate-700 {
  color: #f1f5f9 !important;
}

body[data-theme="dark"] #refund-policy-modal-content .text-slate-600,
body[data-theme="dark"] #refund-policy-modal-content .text-slate-500 {
  color: #94a3b8 !important;
}

body[data-theme="dark"] #refund-policy-modal-content .text-amber-800 {
  color: #fbbf24 !important;
}

body[data-theme="dark"] #refund-policy-modal-content .bg-slate-50 {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

body[data-theme="dark"] #refund-policy-modal-content .bg-emerald-50 {
  background: rgba(6, 78, 59, 0.3) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #ecfdf5 !important;
}

body[data-theme="dark"] #refund-policy-modal-content .text-emerald-800,
body[data-theme="dark"] #refund-policy-modal-content .text-emerald-900,
body[data-theme="dark"] #refund-policy-modal-content .text-emerald-950 {
  color: #6ee7b7 !important;
}

body[data-theme="dark"] #refund-policy-modal-content .bg-blue-50\/40 {
  background: rgba(30, 58, 138, 0.3) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

body[data-theme="dark"] #refund-policy-modal-content .text-blue-900,
body[data-theme="dark"] #refund-policy-modal-content .text-blue-700 {
  color: #93c5fd !important;
}

body[data-theme="sepia"] #refund-policy-modal-content .bg-slate-50 {
  background: #f4ecdc !important;
  border-color: #dfd3bd !important;
}

body[data-theme="sepia"] #refund-policy-modal-content .bg-emerald-50 {
  background: #e5ede3 !important;
  border-color: #bcd1b9 !important;
}

body[data-theme="sepia"] #refund-policy-modal-content .bg-blue-50\/40 {
  background: #e6ebf2 !important;
  border-color: #c1cfde !important;
}

/* ---------- ระบบชำระเงินอัตโนมัติ (QR PromptPay & Slip Verification Engine) ---------- */
.payment-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 1.25rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.76rem;
}

.payment-mode-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
}

.payment-mode-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

.payment-mode-dot.is-sandbox {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

.checkout-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

@media (max-width: 639px) {
  .checkout-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.checkout-step-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
}

.checkout-step-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.checkout-step-btn.is-active {
  background: var(--ctl-active-bg);
  color: var(--ctl-active-ink);
  border-color: var(--ctl-active-bg);
  font-weight: 600;
}

.checkout-step-btn.is-done {
  border-color: #059669;
  background: var(--success-soft);
  color: var(--success);
}

.checkout-step-num {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.08);
  flex: none;
}

.checkout-step-btn.is-active .checkout-step-num {
  background: #d97706;
  color: #ffffff;
}

.checkout-step-btn.is-done .checkout-step-num {
  background: #059669;
  color: #ffffff;
}

.checkout-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkg-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (max-width: 639px) {
  .pkg-mode-grid {
    grid-template-columns: 1fr;
  }
}

.pkg-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.8rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-subtle);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pkg-mode-card:hover {
  border-color: var(--border-strong);
}

.pkg-mode-card.is-active {
  border-color: #d97706;
  background: var(--warn-soft);
  box-shadow: var(--shadow-sm);
}

.pkg-mode-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.35rem;
}

.pkg-mode-title {
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pkg-mode-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.qr-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 639px) {
  .qr-payment-layout {
    grid-template-columns: 1fr;
  }
}

.qr-card-frame {
  border-radius: 1rem;
  overflow: hidden;
  border: 1.5px solid #1e293b;
  background: #ffffff;
  color: #0f172a;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.qr-card-banner {
  background: #0f172a;
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  font-family: 'Prompt', sans-serif;
}

.qr-card-banner-top {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.qr-card-banner-sub {
  font-size: 0.68rem;
  color: #fbbf24;
  margin-top: 0.1rem;
}

.qr-svg-wrap {
  padding: 0.85rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-svg-wrap svg,
.qr-svg-wrap img {
  width: 11.5rem;
  height: 11.5rem;
  object-fit: contain;
  display: block;
}

.stripe-status-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border-radius: 0.95rem;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-subtle);
  transition: all 0.2s ease;
}

.stripe-status-box.is-waiting {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
}

.stripe-status-box.is-verified {
  border-color: #059669;
  background: var(--success-soft);
}

.stripe-pulse-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: stripePulse 1.6s infinite;
}

@keyframes stripePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.qr-card-foot {
  padding: 0.55rem 0.75rem 0.75rem;
  border-top: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.74rem;
}

.qr-card-foot strong {
  display: block;
  font-family: 'Prompt', sans-serif;
  font-size: 0.82rem;
  color: #0f172a;
}

.qr-info-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qr-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.qr-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border-color);
}

.qr-detail-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.qr-detail-label {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.qr-detail-val {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  color: var(--text-main);
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.qr-detail-val.is-amount {
  font-size: 1.15rem;
  color: #059669;
}

body[data-theme="dark"] .qr-detail-val.is-amount {
  color: #34d399;
}

.slip-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.35rem 1rem;
  border-radius: 0.95rem;
  border: 2px dashed var(--border-strong);
  background: var(--bg-subtle);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.slip-dropzone:hover,
.slip-dropzone.is-dragover {
  border-color: #d97706;
  background: var(--warn-soft);
}

.slip-dropzone-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  font-size: 1.25rem;
}

.slip-dropzone-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-main);
}

.slip-dropzone-sub {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.slip-preview-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1.5px solid #059669;
  background: var(--success-soft);
}

.slip-preview-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.slip-thumb {
  width: 3.6rem;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  flex: none;
}

.sandbox-box {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
}

.sandbox-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.slip-scanner-frame {
  position: relative;
  max-width: 14rem;
  margin: 0 auto;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 2px solid #059669;
  background: #0f172a;
  box-shadow: var(--shadow-md);
}

.slip-scanner-frame img {
  width: 100%;
  height: auto;
  max-height: 14rem;
  object-fit: contain;
  display: block;
}

@keyframes slipLaserScan {
  0% { top: 4%; opacity: 0.95; }
  50% { top: 92%; opacity: 1; }
  100% { top: 4%; opacity: 0.95; }
}

.slip-scanner-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #10b981 20%, #f59e0b 50%, #10b981 80%, transparent 100%);
  box-shadow: 0 0 12px 3px rgba(16, 185, 129, 0.75);
  animation: slipLaserScan 1.35s ease-in-out infinite;
}

.antifraud-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 639px) {
  .antifraud-list {
    grid-template-columns: 1fr;
  }
}

.antifraud-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  font-size: 0.76rem;
}

.antifraud-item.is-pass {
  border-color: rgba(5, 150, 105, 0.45);
  background: var(--success-soft);
}

.antifraud-item.is-fail {
  border-color: rgba(220, 38, 38, 0.45);
  background: var(--danger-soft);
}

.antifraud-item .ico {
  margin-top: 0.15rem;
}

.antifraud-item.is-pass .ico {
  color: var(--success);
}

.antifraud-item.is-fail .ico {
  color: var(--danger);
}

.api-config-drawer {
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.api-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.8rem;
}

/* ---------- ตารางสรุป (Cheat Sheet) ---------- */
.toc-bar {
  padding: 0.5rem;
  border-width: 1px !important;
  border-radius: 0.9rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.toc-scroll {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.toc-scroll > * {
  flex: none;
  white-space: nowrap;
}

.toc-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 0.5rem;
}

.toc-link {
  padding: 0.38rem 0.75rem;
  border-radius: 0.6rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.76rem;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.toc-link:hover {
  background: var(--bg-muted);
  color: var(--text-main);
}

.cheatsheet-card {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 1.1rem !important;
}

#section-cheatsheet table thead th {
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 0.84rem;
}

#section-cheatsheet table tbody tr:nth-child(even) > td:not([class*="bg-"]) {
  background-color: var(--bg-subtle);
}

/* ---------- พื้นผิวทั่วไป (ปรับการ์ดเดิมให้เข้าชุด) ---------- */
.saas-card {
  border-width: 1px;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-sm);
}

#seqsheet-questions-list > * + * {
  margin-top: 1.5rem !important;
}

/* ป้องกันคอลัมน์ในกริดขยายเกินจอ (เนื้อหายาว/แถบปุ่ม) ทำให้ข้อความไม่ตัดบรรทัดบนมือถือ */
#seqsheet-workspace .grid > *,
#exam-workspace .grid > *,
#explorer-position-detail .grid > * {
  min-width: 0;
}

/* มือถือ: แถบเลือกตำแหน่งเป็นแถวเดียวเลื่อนแนวนอน (ไม่กินพื้นที่หลายบรรทัด) */
@media (max-width: 767px) {
  .pos-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0.1rem 1rem;
  }
  .pos-pill-row::-webkit-scrollbar {
    display: none;
  }
  .pos-pill {
    flex: none;
  }
  .pos-expanded .grid {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0.1rem 1rem 0.25rem;
  }
  .pos-expanded .grid::-webkit-scrollbar {
    display: none;
  }
  .pos-card {
    flex: 0 0 10.5rem;
  }
  .side-nav-body {
    max-height: 46vh;
  }
}

/* =========================================================
   SCROLLBAR STYLING
   ========================================================= */
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 9999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* =========================================================
   OFFICIAL FULL-TEXT LAW LINKS (.btn-official-law / .official-law-link)
   รองรับโหมดสว่าง (Light), ถนอมสายตา (Sepia), และโหมดมืด (Dark)
   ========================================================= */
.btn-official-law,
.official-law-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.68rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1e3a8a;
  background: linear-gradient(180deg, #eff6ff 0%, #e0e7ff 100%);
  border: 1px solid #93c5fd;
  border-radius: 0.55rem;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.btn-official-law:hover,
.official-law-link:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.24);
  transform: translateY(-1px);
}

.btn-official-law:active,
.official-law-link:active {
  transform: translateY(0);
}

.btn-official-law .ico,
.official-law-link .ico {
  width: 0.88rem;
  height: 0.88rem;
  flex-shrink: 0;
}

.btn-official-law .official-law-ext-ico,
.official-law-link .official-law-ext-ico {
  width: 0.76rem;
  height: 0.76rem;
  opacity: 0.82;
}

/* บนแถบหัวตารางสีเข้ม (Dark Table Headers in Cheat Sheet) */
.bg-slate-900 .btn-official-law,
.bg-slate-900 .official-law-link,
.btn-official-law.is-on-dark,
.official-law-link.is-on-dark {
  color: #e0e7ff;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow: none;
}

.bg-slate-900 .btn-official-law:hover,
.bg-slate-900 .official-law-link:hover,
.btn-official-law.is-on-dark:hover,
.official-law-link.is-on-dark:hover {
  color: #ffffff;
  background: #2563eb;
  border-color: #60a5fa;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.38);
}

/* โหมดถนอมสายตา (Sepia Theme) */
body[data-theme="sepia"] .btn-official-law:not(.is-on-dark),
body[data-theme="sepia"] .official-law-link:not(.is-on-dark) {
  color: #1e3a8a;
  background: #e6eef8;
  border-color: #8ab4f8;
}

body[data-theme="sepia"] .btn-official-law:not(.is-on-dark):hover,
body[data-theme="sepia"] .official-law-link:not(.is-on-dark):hover {
  color: #ffffff;
  background: #1d4ed8;
  border-color: #1e40af;
}

/* โหมดมืด (Dark Theme) */
body[data-theme="dark"] .btn-official-law,
body[data-theme="dark"] .official-law-link {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: none;
}

body[data-theme="dark"] .btn-official-law:hover,
body[data-theme="dark"] .official-law-link:hover {
  color: #ffffff;
  background: #2563eb;
  border-color: #60a5fa;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

/* =========================================================
   EDTECH COLOR-CODED HEADINGS, KICKER BADGES & CHEAT SHEET THEMES (v32)
   ระบบแยกสีหัวข้อตามหมวดหมู่ (Visual Hierarchy & Color-Coded System)
   รองรับทั้งโหมดสว่าง (Light), ถนอมสายตา (Sepia), และโหมดมืด (Dark)
   ========================================================= */

/* 1. Left Accent Bars สำหรับหัวข้อหลักและหัวข้อย่อยในทุกแท็บ */
.heading-accent-blue,
.heading-accent-indigo,
.heading-accent-emerald,
.heading-accent-amber,
.heading-accent-rose {
  position: relative;
  padding-left: 16px !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.heading-accent-blue {
  border-left-color: #2563EB !important;
}

.heading-accent-indigo {
  border-left-color: #4F46E5 !important;
}

.heading-accent-emerald {
  border-left-color: #059669 !important;
}

.heading-accent-amber {
  border-left-color: #D97706 !important;
}

.heading-accent-rose {
  border-left-color: #E11D48 !important;
}

/* กรณีใช้กับ .reader-head หรือการ์ดที่มี padding เดิมอยู่แล้ว */
.reader-head.heading-accent-blue,
.reader-head.heading-accent-indigo,
.reader-head.heading-accent-emerald,
.reader-head.heading-accent-amber,
.reader-head.heading-accent-rose {
  padding-left: 24px !important;
  border-left-width: 6px !important;
}

/* 2. Kicker Badges (ป้ายกำกับหมวดหมู่ด้านบนหัวข้อ) */
.heading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
  line-height: 1.3;
  border: 1px solid transparent;
  width: fit-content;
}

.kicker-blue {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.kicker-indigo {
  background: #EEF2FF;
  color: #3730A3;
  border-color: #C7D2FE;
}

.kicker-emerald {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.kicker-amber {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}

.kicker-rose {
  background: #FFF1F2;
  color: #BE123C;
  border-color: #FECDD3;
}

.kicker-violet {
  background: #F5F3FF;
  color: #5B21B6;
  border-color: #DDD6FE;
}

.kicker-teal {
  background: #F0FDFA;
  color: #0F766E;
  border-color: #99F6E4;
}

.kicker-sky {
  background: #F0F9FF;
  color: #0369A1;
  border-color: #BAE6FD;
}

/* 3. หัวข้อหมวดวิชาในแถบสารบัญซ้ายของแท็บอ่านชีทเรียงข้อ (#section-seqsheet) */
.side-group-label.is-part1,
.side-group-label.is-part2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  margin: 8px 6px 6px !important;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
}

.side-group-label.is-part1 {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.03) 100%);
  color: #1E40AF !important;
  border-left: 4px solid #2563EB;
}

.side-group-label.is-part2 {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0.03) 100%);
  color: #92400E !important;
  border-left: 4px solid #D97706;
}

/* 4. ระบบธีมสีประจำตารางสรุปตัวบท 10 ตาราง (Cheat Sheet Themes .cs-theme-1 ถึง .cs-theme-10) */
.cheatsheet-card[class*="cs-theme-"] {
  border-width: 1px;
  border-style: solid;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cs-table-head {
  position: relative;
  padding: 18px 24px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 640px) {
  .cs-table-head.has-side-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cs-head-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cs-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.cs-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: fit-content;
  margin-bottom: 2px;
}

.cs-table-title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff !important;
  line-height: 1.35;
  margin: 0;
}

.cs-table-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.5;
  margin: 2px 0 0 0;
}

.cs-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: all 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
}

.cs-quick-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Table 1: Royal Blue (#2563EB) - กำหนดเวลาและอายุความสำคัญ */
.cs-theme-1 {
  border-color: #BFDBFE !important;
}
.cs-theme-1 .cs-table-head {
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
  border-left: 6px solid #60A5FA;
}
.cs-theme-1 .cs-thead-row {
  background: #EFF6FF !important;
  color: #1E3A8A !important;
  border-bottom: 2px solid #BFDBFE !important;
}
.cs-theme-1 .cs-thead-row th {
  color: #1E3A8A !important;
  font-weight: 700 !important;
}

/* Table 2: Deep Indigo (#1E1B4B / #4338CA) - อำนาจผู้พิพากษาและองค์คณะ */
.cs-theme-2 {
  border-color: #C7D2FE !important;
}
.cs-theme-2 .cs-table-head {
  background: linear-gradient(135deg, #1E1B4B 0%, #4338CA 100%) !important;
  border-left: 6px solid #818CF8;
}
.cs-theme-2 .cs-thead-row {
  background: #EEF2FF !important;
  color: #312E81 !important;
  border-bottom: 2px solid #C7D2FE !important;
}
.cs-theme-2 .cs-thead-row th {
  color: #312E81 !important;
  font-weight: 700 !important;
}

/* Table 3: Warm Amber (#D97706) - เปรียบเทียบ ก.ต. vs ก.บ.ศ. vs ก.ศ. */
.cs-theme-3 {
  border-color: #FDE68A !important;
}
.cs-theme-3 .cs-table-head {
  background: linear-gradient(135deg, #78350F 0%, #D97706 100%) !important;
  border-left: 6px solid #FBBF24;
}
.cs-theme-3 .cs-thead-row {
  background: #FFFBEB !important;
  color: #78350F !important;
  border-bottom: 2px solid #FDE68A !important;
}
.cs-theme-3 .cs-thead-row th {
  color: #78350F !important;
  font-weight: 700 !important;
}

/* Table 4: Rose (#E11D48) - คดีทุจริตและประพฤติมิชอบ vs คดีอาญาทั่วไป */
.cs-theme-4 {
  border-color: #FECDD3 !important;
}
.cs-theme-4 .cs-table-head {
  background: linear-gradient(135deg, #881337 0%, #E11D48 100%) !important;
  border-left: 6px solid #FB7185;
}
.cs-theme-4 .cs-thead-row {
  background: #FFF1F2 !important;
  color: #881337 !important;
  border-bottom: 2px solid #FECDD3 !important;
}
.cs-theme-4 .cs-thead-row th {
  color: #881337 !important;
  font-weight: 700 !important;
}

/* Table 5: Crimson / Rose (#BE123C) - วินัย การลา และการอุทธรณ์ร้องทุกข์ */
.cs-theme-5 {
  border-color: #FECDD3 !important;
}
.cs-theme-5 .cs-table-head {
  background: linear-gradient(135deg, #4C0519 0%, #BE123C 100%) !important;
  border-left: 6px solid #FDA4AF;
}
.cs-theme-5 .cs-thead-row {
  background: #FFF1F2 !important;
  color: #881337 !important;
  border-bottom: 2px solid #FECDD3 !important;
}
.cs-theme-5 .cs-thead-row th {
  color: #881337 !important;
  font-weight: 700 !important;
}

/* Table 6: Violet / Indigo (#6D28D9) - บริหารงานบุคคล การบรรจุ แต่งตั้ง */
.cs-theme-6 {
  border-color: #DDD6FE !important;
}
.cs-theme-6 .cs-table-head {
  background: linear-gradient(135deg, #3B0764 0%, #6D28D9 100%) !important;
  border-left: 6px solid #C084FC;
}
.cs-theme-6 .cs-thead-row {
  background: #F5F3FF !important;
  color: #4C1D95 !important;
  border-bottom: 2px solid #DDD6FE !important;
}
.cs-theme-6 .cs-thead-row th {
  color: #4C1D95 !important;
  font-weight: 700 !important;
}

/* Table 7: Emerald (#059669) - การคลัง การงบประมาณ การเบิกจ่ายเงิน */
.cs-theme-7 {
  border-color: #A7F3D0 !important;
}
.cs-theme-7 .cs-table-head {
  background: linear-gradient(135deg, #064E3B 0%, #059669 100%) !important;
  border-left: 6px solid #34D399;
}
.cs-theme-7 .cs-thead-row {
  background: #ECFDF5 !important;
  color: #064E3B !important;
  border-bottom: 2px solid #A7F3D0 !important;
}
.cs-theme-7 .cs-thead-row th {
  color: #064E3B !important;
  font-weight: 700 !important;
}

/* Table 8: Teal / Emerald (#0D9488) - วงเงินและวิธีจัดซื้อจัดจ้างภาครัฐ */
.cs-theme-8 {
  border-color: #99F6E4 !important;
}
.cs-theme-8 .cs-table-head {
  background: linear-gradient(135deg, #134E4A 0%, #0D9488 100%) !important;
  border-left: 6px solid #2DD4BF;
}
.cs-theme-8 .cs-thead-row {
  background: #F0FDFA !important;
  color: #134E4A !important;
  border-bottom: 2px solid #99F6E4 !important;
}
.cs-theme-8 .cs-thead-row th {
  color: #134E4A !important;
  font-weight: 700 !important;
}

/* Table 9: Sky / Royal Blue (#0284C7) - งานสารบรรณ การเก็บรักษาและทำลายหนังสือ */
.cs-theme-9 {
  border-color: #BAE6FD !important;
}
.cs-theme-9 .cs-table-head {
  background: linear-gradient(135deg, #0C4A6E 0%, #0284C7 100%) !important;
  border-left: 6px solid #38BDF8;
}
.cs-theme-9 .cs-thead-row {
  background: #F0F9FF !important;
  color: #0C4A6E !important;
  border-bottom: 2px solid #BAE6FD !important;
}
.cs-theme-9 .cs-thead-row th {
  color: #0C4A6E !important;
  font-weight: 700 !important;
}

/* Table 10: Amber Gold / Indigo (#B45309) - ค่าธรรมเนียมศาล เงินรางวัลนำจับ สัญญาประกัน */
.cs-theme-10 {
  border-color: #FDE68A !important;
}
.cs-theme-10 .cs-table-head {
  background: linear-gradient(135deg, #451A03 0%, #B45309 100%) !important;
  border-left: 6px solid #FBBF24;
}
.cs-theme-10 .cs-thead-row {
  background: #FFFBEB !important;
  color: #78350F !important;
  border-bottom: 2px solid #FDE68A !important;
}
.cs-theme-10 .cs-thead-row th {
  color: #78350F !important;
  font-weight: 700 !important;
}

/* 5. กล่องหมวดระเบียบและประกาศ 3 องค์กรหลัก (ก.บ.ศ. / ก.ศ. / สำนักงานศาลยุติธรรม) */
.reg-org-box {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  margin-bottom: 28px;
}

.reg-org-head {
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}

.reg-org-head--kbs {
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
  border-left: 6px solid #60A5FA;
}

.reg-org-head--ks {
  background: linear-gradient(135deg, #064E3B 0%, #059669 100%);
  border-left: 6px solid #34D399;
}

.reg-org-head--coj {
  background: linear-gradient(135deg, #78350F 0%, #D97706 100%);
  border-left: 6px solid #FBBF24;
}

.reg-org-body {
  padding: 20px;
}

/* 6. รองรับโหมดถนอมสายตา (Sepia Theme) และโหมดมืด (Dark Theme) สำหรับระบบสี v32 */
body[data-theme="sepia"] .kicker-blue {
  background: #E0ECFF;
  color: #1E3A8A;
  border-color: #93C5FD;
}
body[data-theme="sepia"] .kicker-indigo {
  background: #E5E7FF;
  color: #312E81;
  border-color: #A5B4FC;
}
body[data-theme="sepia"] .kicker-emerald {
  background: #D8F3E5;
  color: #064E3B;
  border-color: #6EE7B7;
}
body[data-theme="sepia"] .kicker-amber {
  background: #FDECC8;
  color: #78350F;
  border-color: #FCD34D;
}
body[data-theme="sepia"] .kicker-rose {
  background: #FFE0E5;
  color: #881337;
  border-color: #FDA4AF;
}
body[data-theme="sepia"] .reg-org-box {
  background: #FBF7EE;
  border-color: #DFD3C3;
}

body[data-theme="dark"] .kicker-blue {
  background: rgba(37, 99, 235, 0.22);
  color: #93C5FD;
  border-color: rgba(96, 165, 250, 0.4);
}
body[data-theme="dark"] .kicker-indigo {
  background: rgba(79, 70, 229, 0.22);
  color: #A5B4FC;
  border-color: rgba(129, 140, 248, 0.4);
}
body[data-theme="dark"] .kicker-emerald {
  background: rgba(5, 150, 105, 0.22);
  color: #6EE7B7;
  border-color: rgba(52, 211, 153, 0.4);
}
body[data-theme="dark"] .kicker-amber {
  background: rgba(217, 119, 6, 0.22);
  color: #FCD34D;
  border-color: rgba(251, 191, 36, 0.4);
}
body[data-theme="dark"] .kicker-rose {
  background: rgba(225, 29, 72, 0.22);
  color: #FDA4AF;
  border-color: rgba(251, 113, 133, 0.4);
}
body[data-theme="dark"] .kicker-violet {
  background: rgba(109, 40, 217, 0.22);
  color: #C4B5FD;
  border-color: rgba(167, 139, 250, 0.4);
}
body[data-theme="dark"] .kicker-teal {
  background: rgba(13, 148, 136, 0.22);
  color: #5EEAD4;
  border-color: rgba(45, 212, 191, 0.4);
}
body[data-theme="dark"] .kicker-sky {
  background: rgba(2, 132, 199, 0.22);
  color: #7DD3FC;
  border-color: rgba(56, 189, 248, 0.4);
}

body[data-theme="dark"] .side-group-label.is-part1 {
  background: rgba(37, 99, 235, 0.18);
  color: #93C5FD !important;
  border-left-color: #60A5FA;
}
body[data-theme="dark"] .side-group-label.is-part2 {
  background: rgba(217, 119, 6, 0.18);
  color: #FCD34D !important;
  border-left-color: #FBBF24;
}

body[data-theme="dark"] .cheatsheet-card[class*="cs-theme-"] {
  border-color: #334155 !important;
}
body[data-theme="dark"] .cs-theme-1 .cs-thead-row,
body[data-theme="dark"] .cs-theme-2 .cs-thead-row,
body[data-theme="dark"] .cs-theme-3 .cs-thead-row,
body[data-theme="dark"] .cs-theme-4 .cs-thead-row,
body[data-theme="dark"] .cs-theme-5 .cs-thead-row,
body[data-theme="dark"] .cs-theme-6 .cs-thead-row,
body[data-theme="dark"] .cs-theme-7 .cs-thead-row,
body[data-theme="dark"] .cs-theme-8 .cs-thead-row,
body[data-theme="dark"] .cs-theme-9 .cs-thead-row,
body[data-theme="dark"] .cs-theme-10 .cs-thead-row {
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .cs-theme-1 .cs-thead-row th { color: #93C5FD !important; }
body[data-theme="dark"] .cs-theme-2 .cs-thead-row th { color: #A5B4FC !important; }
body[data-theme="dark"] .cs-theme-3 .cs-thead-row th { color: #FCD34D !important; }
body[data-theme="dark"] .cs-theme-4 .cs-thead-row th { color: #FDA4AF !important; }
body[data-theme="dark"] .cs-theme-5 .cs-thead-row th { color: #FDA4AF !important; }
body[data-theme="dark"] .cs-theme-6 .cs-thead-row th { color: #C4B5FD !important; }
body[data-theme="dark"] .cs-theme-7 .cs-thead-row th { color: #6EE7B7 !important; }
body[data-theme="dark"] .cs-theme-8 .cs-thead-row th { color: #5EEAD4 !important; }
body[data-theme="dark"] .cs-theme-9 .cs-thead-row th { color: #7DD3FC !important; }
body[data-theme="dark"] .cs-theme-10 .cs-thead-row th { color: #FCD34D !important; }

body[data-theme="dark"] .reg-org-box {
  background: #0F172A;
  border-color: #334155;
}

/* =========================================================
   QUESTION CARD, SEQUENTIAL READER & EXAM ROOM UI OVERHAUL
   แยกความแตกต่างระหว่างข้อสอบแต่ละข้อชัดเจน 100% ทั้งในโหมดอ่านข้อสอบและฝึกทำข้อสอบ
   ========================================================= */

/* 1. กรอบการ์ดข้อสอบหลัก (.qcard / .question-card-frame) */
.qcard {
  border: 2px solid #94A3B8 !important;
  border-left: 6px solid #1E3A8A !important;
  border-radius: 1.15rem !important;
  background: var(--bg-surface);
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.qcard:hover {
  box-shadow: 0 16px 34px -6px rgba(30, 58, 138, 0.16), 0 6px 14px -3px rgba(15, 23, 42, 0.08) !important;
}

/* การ์ดข้อสอบโจทย์ตุ๊กตา / เคสสมมติ (.is-case-study) */
.qcard.is-case-study {
  border-color: #A78BFA !important;
  border-left: 6px solid #6D28D9 !important;
}

/* การ์ดข้อสอบออกบ่อยพิเศษ 2 ดาว (.star-highlight) */
.qcard.star-highlight {
  border-top: 5px solid #F59E0B !important;
}

/* การ์ดเฉลยรายข้อหลังส่งคำตอบ (.is-review-correct / .is-review-wrong / .is-review-skipped) */
.qcard.is-review-correct {
  border-color: #6EE7B7 !important;
  border-left: 6px solid #059669 !important;
}

.qcard.is-review-wrong {
  border-color: #FDA4AF !important;
  border-left: 6px solid #E11D48 !important;
}

.qcard.is-review-skipped {
  border-color: #94A3B8 !important;
  border-left: 6px solid #475569 !important;
}

/* 2. ระยะห่างและเส้นคั่นสายตาระหว่างข้อสอบแต่ละข้อ (Inter-Question Separation & Visual Divider) */
.qcard-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 2rem 0 1.4rem !important;
  user-select: none;
}

.qcard-separator-line {
  flex: 1 1 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #94A3B8 40%, #64748B 100%);
  opacity: 0.65;
}

.qcard-separator-line:last-child {
  background: linear-gradient(90deg, #64748B 0%, #94A3B8 60%, transparent 100%);
}

.qcard-separator-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1E3A8A;
  background: #EFF6FF;
  border: 1.5px solid #93C5FD;
  padding: 0.24rem 1.05rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);
}

body[data-theme="sepia"] .qcard-separator-pill {
  background: #EFE7D8;
  border-color: #B09F82;
  color: #4A3728;
}

body[data-theme="dark"] .qcard-separator-pill {
  background: #1E293B;
  border-color: #475569;
  color: #93C5FD;
}

/* สลับโทนสีข้อคี่ vs ข้อคู่ (Odd = Royal Navy/Blue, Even = Deep Ocean Teal) ให้เห็นความต่างระหว่างข้อทันที */
.qcard.is-even-q:not(.is-case-study):not(.is-review-correct):not(.is-review-wrong):not(.is-review-skipped) {
  border-left: 6px solid #0D9488 !important;
}

/* 3. แถบหัวการ์ดข้อสอบแบบ High-Contrast (แยกหัวข้อแต่ละข้อชัดเจน) */
.qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 100%) !important;
  border-bottom: 2px solid #1D4ED8 !important;
  padding: 0.9rem 1.35rem !important;
  color: #FFFFFF;
}

.qcard.is-even-q:not(.is-case-study):not(.is-review-correct):not(.is-review-wrong):not(.is-review-skipped) .qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%) !important;
  border-bottom: 2px solid #0D9488 !important;
}

.qcard.is-case-study .qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #3B0764 0%, #6D28D9 100%) !important;
  border-bottom: 2px solid #7C3AED !important;
}

.qcard.is-review-correct .qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #064E3B 0%, #059669 100%) !important;
  border-bottom: 2px solid #10B981 !important;
}

.qcard.is-review-wrong .qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #881337 0%, #E11D48 100%) !important;
  border-bottom: 2px solid #F43F5E !important;
}

.qcard.is-review-skipped .qcard-head:not(.exam-q-meta-bar) {
  background: linear-gradient(135deg, #1E293B 0%, #475569 100%) !important;
  border-bottom: 2px solid #64748B !important;
}

/* ป้ายเลขข้อสอบ (.qcard-num) โดดเด่นด้วยสีทองอำพัน */
.qcard-head:not(.exam-q-meta-bar) .qcard-num,
.exam-head .qcard-num {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
  color: #1E1B4B !important;
  font-family: 'Prompt', sans-serif;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 0.32rem 0.9rem !important;
  border-radius: 0.6rem !important;
  border: 1px solid #FDE68A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  letter-spacing: 0.01em;
}

.qcard-head:not(.exam-q-meta-bar) .qcard-num.qcard-num--correct {
  background: #ECFDF5 !important;
  color: #065F46 !important;
  border: 1.5px solid #6EE7B7 !important;
}

.qcard-head:not(.exam-q-meta-bar) .qcard-num.qcard-num--wrong {
  background: #FFF1F2 !important;
  color: #9F1239 !important;
  border: 1.5px solid #FDA4AF !important;
}

.qcard-head:not(.exam-q-meta-bar) .qcard-num.qcard-num--skipped,
.qcard-head:not(.exam-q-meta-bar) .qcard-num.qcard-num--locked {
  background: #F8FAFC !important;
  color: #1E293B !important;
  border: 1.5px solid #CBD5E1 !important;
}

/* ป้ายมาตราอ้างอิง (.qcard-ref) บนแถบหัวการ์ดสีเข้ม */
.qcard-head:not(.exam-q-meta-bar) .qcard-ref {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #F8FAFC !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 999px !important;
}

.qcard-head:not(.exam-q-meta-bar) .qcard-ref .ico {
  color: #FCD34D !important;
}

/* ป้ายโจทย์ตุ๊กตา ป้ายดาวความสำคัญ และปุ่มบันทึกบนแถบหัวการ์ดสีเข้ม */
.qcard-head:not(.exam-q-meta-bar) .case-chip {
  background: #F5F3FF !important;
  color: #5B21B6 !important;
  border: 1px solid #DDD6FE !important;
  font-weight: 700 !important;
}

.qcard-head:not(.exam-q-meta-bar) .star-chip {
  background: rgba(254, 243, 199, 0.96) !important;
  color: #92400E !important;
  border: 1px solid #FDE68A !important;
  font-weight: 600 !important;
}

.qcard-head:not(.exam-q-meta-bar) .star-chip.is-hot {
  background: #FEF3C7 !important;
  color: #78350F !important;
  border: 1.5px solid #F59E0B !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.qcard-head:not(.exam-q-meta-bar) .bookmark-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
  padding: 0.28rem 0.72rem !important;
}

.qcard-head:not(.exam-q-meta-bar) .bookmark-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: #FDE68A !important;
}

.qcard-head:not(.exam-q-meta-bar) .bookmark-btn.is-saved {
  background: #F59E0B !important;
  border-color: #FDE68A !important;
  color: #1E1B4B !important;
  font-weight: 700 !important;
}

/* 4. กล่องคำถามหลัก (Question Stem Box: .q-title-text) */
.qcard .q-title-text {
  background: #F8FAFF;
  border: 1.5px solid #DBEAFE;
  border-left: 5px solid #2563EB;
  border-radius: 0.9rem;
  padding: 1.05rem 1.25rem !important;
  margin: 0.25rem 0 0.15rem !important;
  font-size: var(--question-title-size);
  line-height: 1.82;
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.qcard.is-even-q:not(.is-case-study) .q-title-text {
  background: #F0FDFA;
  border-color: #CCFBF1;
  border-left: 5px solid #0D9488;
}

.qcard.is-case-study .q-title-text,
.exam-body.is-case-study .q-title-text {
  background: #FAF5FF;
  border-color: #E9D5FF;
  border-left: 5px solid #7C3AED;
}

.exam-body .q-title-text {
  background: #F8FAFF;
  border: 1.5px solid #DBEAFE;
  border-left: 5px solid #2563EB;
  border-radius: 0.9rem;
  padding: 1.15rem 1.35rem !important;
  margin: 0.85rem 0 1.15rem !important;
  font-size: var(--question-title-size);
  line-height: 1.85;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* 5. ตัวเลือก ก. ข. ค. ง. (Clean Choice Cards: .choice-row.neutral-choice-box) */
.choice-row.neutral-choice-box {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-left: 4px solid #60A5FA;
  border-radius: 0.85rem;
  padding: 0.82rem 1.05rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.choice-row.neutral-choice-box .choice-letter {
  background: #EFF6FF;
  border: 1.5px solid #93C5FD;
  color: #1E3A8A;
  font-weight: 700;
  width: 2.1rem;
  height: 2.1rem;
}

.choice-btn.neutral-choice-box:hover {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
  border-left-color: #1D4ED8 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.12);
}

.choice-btn.neutral-choice-box:hover .choice-letter {
  background: #1D4ED8 !important;
  border-color: #1E3A8A !important;
  color: #FFFFFF !important;
}

/* 6. ปุ่มเลือกหมวดวิชาในแถบซ้ายอ่านข้อสอบ (.side-item) และหน้าตั้งค่าฝึกสอบ (.option-tile) */
.side-item,
.option-tile {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-left: 4px solid #2563EB;
  border-radius: 0.85rem;
  padding: 0.68rem 0.85rem;
  margin-bottom: 0.35rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.16s ease;
}

.side-item.is-part1-item,
.option-tile.is-part1-item {
  border-left-color: #2563EB;
}

.side-item.is-part2-item,
.option-tile.is-part2-item {
  border-left-color: #D97706;
}

.side-item:hover:not(.is-active),
.option-tile:hover:not(.is-active) {
  background: #F8FAFF;
  border-color: #60A5FA;
  transform: translateX(2px);
}

.side-item.is-part2-item:hover:not(.is-active),
.option-tile.is-part2-item:hover:not(.is-active) {
  background: #FFFBEB;
  border-color: #F59E0B;
}

.side-item-count {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-weight: 600;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
}

.side-item.is-active,
.option-tile.is-active {
  background: linear-gradient(135deg, #1E1B4B 0%, #1D4ED8 100%) !important;
  border-color: #F59E0B !important;
  border-left: 5px solid #FBBF24 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px -3px rgba(30, 58, 138, 0.35);
}

.side-item.is-active .side-item-count,
.option-tile.is-active .side-item-count {
  background: #F59E0B !important;
  border-color: #FDE68A !important;
  color: #1E1B4B !important;
  font-weight: 700 !important;
}

/* 7. ห้องสอบเสมือนจริง (Active Exam Room: .exam-card, .exam-head, .exam-q-meta-bar, .answer-sheet) */
.exam-card {
  border: 2px solid #94A3B8 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 14px 32px -8px rgba(15, 23, 42, 0.14) !important;
}

.exam-head {
  background: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 100%) !important;
  border-bottom: 2px solid #1D4ED8 !important;
  padding: 1rem 1.4rem !important;
  color: #FFFFFF;
}

.exam-head .exam-session {
  color: #E2E8F0 !important;
  font-weight: 500;
  font-size: 0.88rem;
}

.exam-head .timer-chip {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(251, 191, 36, 0.55) !important;
  color: #FDE68A !important;
}

.exam-head .timer-chip .ico {
  color: #FBBF24 !important;
}

.exam-head .timer-text {
  color: #FEF3C7 !important;
}

.exam-head .btn-outline {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

.exam-head .btn-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #FDE68A;
  color: #FFFFFF;
}

/* แถบข้อมูลมาตราและดาวความสำคัญภายในห้องสอบ (.exam-q-meta-bar) */
.qcard-head.exam-q-meta-bar {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0.8rem !important;
  padding: 0.6rem 0.95rem !important;
  margin-bottom: 0.85rem;
}

/* กระดาษคำตอบด้านขวาในห้องสอบ (.answer-sheet & .answer-cell) */
.answer-sheet {
  border: 2px solid #94A3B8 !important;
  border-radius: 1.15rem !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 12px 26px -6px rgba(15, 23, 42, 0.12) !important;
}

.answer-sheet-head {
  background: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 100%);
  border-bottom: 2px solid #1D4ED8;
  padding: 0.9rem 1.15rem;
  margin-bottom: 0 !important;
}

.answer-sheet-head h4 {
  color: #FFFFFF !important;
  font-size: 0.95rem;
}

.answer-sheet-head span {
  background: #F59E0B;
  color: #1E1B4B !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #FDE68A;
}

.answer-sheet .answer-grid {
  padding: 1rem 1.1rem 0.75rem;
  gap: 0.45rem;
}

.answer-sheet .answer-legend {
  margin: 0 1.1rem;
  padding: 0.75rem 0;
}

.answer-sheet .answer-sheet-actions {
  padding: 0.75rem 1.1rem 1.1rem !important;
}

.answer-sheet > .btn {
  margin: 0.75rem 1.1rem 1.1rem !important;
  width: calc(100% - 2.2rem) !important;
}

.answer-cell {
  height: 2.35rem !important;
  border-radius: 0.55rem !important;
  border: 1.5px solid #CBD5E1 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.answer-cell.is-current {
  background: linear-gradient(135deg, #1E1B4B 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
  transform: scale(1.05);
}

/* 8. รองรับโหมดถนอมสายตา (Sepia) และโหมดมืด (Dark) สำหรับการ์ดข้อสอบและห้องสอบ */
body[data-theme="sepia"] .qcard .q-title-text,
body[data-theme="sepia"] .exam-body .q-title-text {
  background: #F5EFE2;
  border-color: #D6C7B2;
  border-left-color: #1D4ED8;
}

body[data-theme="sepia"] .qcard.is-case-study .q-title-text,
body[data-theme="sepia"] .exam-body.is-case-study .q-title-text {
  background: #F3ECF8;
  border-color: #D8B4FE;
  border-left-color: #7C3AED;
}

body[data-theme="sepia"] .choice-row.neutral-choice-box,
body[data-theme="sepia"] .side-item:not(.is-active),
body[data-theme="sepia"] .option-tile:not(.is-active) {
  background: #FBF7EE;
  border-color: #D6C7B2;
}

body[data-theme="sepia"] .qcard-head.exam-q-meta-bar {
  background: #EFE7D6 !important;
  border-color: #D6C7B2 !important;
}

body[data-theme="dark"] .qcard {
  border-color: #475569 !important;
  border-left-color: #3B82F6 !important;
}

body[data-theme="dark"] .qcard.is-case-study {
  border-color: #6D28D9 !important;
  border-left-color: #A78BFA !important;
}

body[data-theme="dark"] .qcard .q-title-text,
body[data-theme="dark"] .exam-body .q-title-text {
  background: #0F172A;
  border-color: #334155;
  border-left-color: #3B82F6;
  box-shadow: none;
}

body[data-theme="dark"] .qcard.is-case-study .q-title-text,
body[data-theme="dark"] .exam-body.is-case-study .q-title-text {
  background: #1A1230;
  border-color: #4C1D95;
  border-left-color: #A78BFA;
}

body[data-theme="dark"] .choice-row.neutral-choice-box {
  background: #0F172A;
  border-color: #334155;
  border-left-color: #3B82F6;
}

body[data-theme="dark"] .choice-row.neutral-choice-box .choice-letter {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.45);
  color: #93C5FD;
}

body[data-theme="dark"] .choice-btn.neutral-choice-box:hover {
  background: #1E293B !important;
  border-color: #60A5FA !important;
}

body[data-theme="dark"] .side-item:not(.is-active),
body[data-theme="dark"] .option-tile:not(.is-active) {
  background: #0F172A;
  border-color: #334155;
}

body[data-theme="dark"] .side-item-count {
  background: #1E293B;
  border-color: #475569;
  color: #CBD5E1;
}

body[data-theme="dark"] .qcard-head.exam-q-meta-bar {
  background: #0F172A !important;
  border-color: #334155 !important;
}

body[data-theme="dark"] #seqsheet-questions-list > .qcard + .qcard::before,
body[data-theme="dark"] .exam-review-list > .qcard + .qcard::before {
  background: #0F172A;
  border-color: #334155;
  color: #94A3B8;
}

body[data-theme="dark"] .answer-cell:not(.is-current):not(.is-answered):not(.is-selected):not(.is-correct):not(.is-wrong):not(.is-flagged) {
  background: #0F172A;
  border-color: #334155 !important;
  color: #CBD5E1;
}

body[data-theme="dark"] .answer-cell.is-flagged:not(.is-answered) {
  background: rgba(245, 158, 11, 0.22);
  border-color: #F59E0B !important;
  color: #FDE68A;
}

body[data-theme="sepia"] .answer-cell.is-flagged:not(.is-answered) {
  background: #FDE68A;
  border-color: #D97706 !important;
  color: #78350F;
}

/* =========================================================
   SOCIAL PROOF, QUESTION FEEDBACK & MOTIVATION SYSTEM (v33)
   1. Time-based Live Online Pill
   2. Report Question Modal & Card Footer Button
   3. Rotating Motivational Quotes Engine
   4. Top Batch Target Banner & Beta Tester Feedback Cards
   ========================================================= */

/* --- 1. Time-based Live Online Pill --- */
.edtech-hero-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.edtech-hero-pills .edtech-status-pill {
  margin-bottom: 0 !important;
}

.live-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065F46;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.live-online-pill strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.live-online-pill.is-header-pill {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.42);
  color: #6EE7B7;
  font-size: 0.73rem;
  padding: 0.24rem 0.65rem;
}

@media (max-width: 900px) {
  #live-online-header-pill {
    display: none;
  }
}

.live-online-pill.is-hero-pill {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.45);
  color: #A7F3D0;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.14);
}

.live-online-pill.is-card-pill {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  color: #D1FAE5;
  font-size: 0.72rem;
  padding: 0.2rem 0.58rem;
}

.live-online-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
  flex-shrink: 0;
  animation: liveOnlinePulse 2.2s infinite ease-in-out;
}

@keyframes liveOnlinePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.28);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
  }
}

/* --- 2. Report Question Card Footer & Modal --- */
.qcard-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #CBD5E1;
}

.qcard-report-hint {
  font-size: 0.75rem;
  color: #64748B;
}

.btn-report-question {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.68rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  transition: all 0.16s ease;
  margin-left: auto;
}

.btn-report-question:hover {
  color: #B45309;
  background: #FFFBEB;
  border-color: #F59E0B;
}

.report-modal-card {
  max-width: 38rem;
}

.report-autofill-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.report-autofill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1E293B;
}

.report-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.report-meta-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 0.55rem;
  padding: 0.45rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.report-meta-item.is-full {
  grid-column: 1 / -1;
}

.report-meta-item small,
.report-meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748B;
}

.report-meta-item strong,
.report-meta-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
}

.report-snippet-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3.5px solid #2563EB;
  border-radius: 0.55rem;
  padding: 0.6rem 0.75rem;
  max-height: 9.5rem;
  overflow-y: auto;
}

.report-snippet-q,
.report-snippet-question {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.5;
  margin-bottom: 0.45rem;
}

.report-snippet-choices {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.report-snippet-choice {
  font-size: 0.75rem;
  color: #475569;
  padding: 0.22rem 0.48rem;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.report-snippet-choice.is-correct,
.report-snippet-choice.is-correct-ref {
  background: #ECFDF5;
  color: #065F46;
  font-weight: 600;
}

.report-snippet-ans-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #D1FAE5;
  color: #065F46;
  white-space: nowrap;
}

.report-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-textarea {
  width: 100%;
  border: 1.5px solid #CBD5E1;
  border-radius: 0.65rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #0F172A;
  background: #FFFFFF;
  resize: vertical;
  min-height: 5.2rem;
  font-family: inherit;
}

.report-textarea:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.report-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.25rem;
}

.report-mailto-btn {
  flex: 1 1 13rem;
  justify-content: center;
  text-decoration: none;
}

.report-privacy-note {
  font-size: 0.74rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* --- 3. Rotating Motivational Quotes Engine --- */
.motivation-quote-card {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1.5px solid #BFDBFE;
  border-left: 4px solid #2563EB;
  border-radius: 0.85rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.motivation-quote-card.is-scorecard-quote {
  margin: 0.85rem 0 0.35rem;
  background: linear-gradient(135deg, #F0FDF4 0%, #EFF6FF 100%);
  border-color: #A7F3D0;
  border-left-color: #059669;
}

.motivation-quote-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.motivation-quote-badge,
.motivation-quote-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #1D4ED8;
}

.motivation-quote-card.is-scorecard-quote .motivation-quote-badge,
.motivation-quote-card.is-scorecard-quote .motivation-quote-kicker {
  color: #047857;
}

.motivation-quote-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.motivation-quote-counter {
  font-size: 0.69rem;
  font-weight: 700;
  color: #64748B;
  font-variant-numeric: tabular-nums;
}

.motivation-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #475569;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #CBD5E1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.motivation-next-btn:hover {
  color: #1D4ED8;
  border-color: #93C5FD;
  background: #FFFFFF;
}

.motivation-quote-text {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.55;
  color: #1E293B;
  margin: 0;
}

/* --- 4. Top Batch Target Banner & Beta Tester Feedback Cards --- */
.top-batch-target-pill {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.5rem 0.72rem;
  border-radius: 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: #FEF3C7;
}

.top-batch-target-pill.is-promo-target,
.top-batch-target-pill.is-promo-banner {
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-left: 4px solid #D97706;
  color: #78350F;
  margin-top: 0.65rem;
  margin-bottom: 0.35rem;
}

.top-batch-target-icon {
  flex-shrink: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}

.top-batch-target-text {
  flex: 1;
}

/* Compact Group Promo Card */
.group-promo-card.is-compact-promo {
  padding: 1rem 1.25rem;
  gap: 0.85rem 1.25rem;
  align-items: center;
}

.group-promo-card.is-compact-promo .group-promo-title {
  font-size: 0.98rem;
  margin-top: 0.2rem;
}

.group-promo-card.is-compact-promo .group-promo-text {
  font-size: 0.82rem;
  margin: 0.1rem 0 0;
}

/* Bottom Rolling User Reviews (ท้าย UI ล่างสุด • สลับสับเปลี่ยนและเลื่อนไปมา) */
.bottom-reviews-outer {
  margin-top: 2rem;
  padding: 0.5rem 0 0.25rem;
}

.bottom-reviews-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
}

.bottom-reviews-rotator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-color);
}

.bottom-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  white-space: nowrap;
}

.bottom-reviews-active-text {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  font-size: 0.84rem;
}

.bottom-reviews-quote {
  color: var(--text-main);
  font-weight: 500;
}

.bottom-reviews-author {
  color: #047857;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.bottom-reviews-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bottom-reviews-nav-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bottom-reviews-nav-btn:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: #EFF6FF;
}

.bottom-reviews-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.bottom-reviews-track {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  animation: bottomReviewsSlide 38s linear infinite alternate;
}

.bottom-reviews-track:hover {
  animation-play-state: paused;
}

@keyframes bottomReviewsSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-48%);
  }
}

.bottom-review-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  white-space: nowrap;
}

.bottom-review-stars {
  color: #F59E0B;
  font-size: 0.76rem;
}

.bottom-review-text {
  color: var(--text-main);
}

.bottom-review-name {
  color: #047857;
  font-family: 'Prompt', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
}

/* --- Sepia & Dark Theme Overrides for v33 Components --- */
body[data-theme="sepia"] .motivation-quote-card {
  background: #F5EFE2;
  border-color: #D6C7B2;
  border-left-color: #1D4ED8;
}

body[data-theme="sepia"] .bottom-reviews-card,
body[data-theme="sepia"] .report-autofill-box,
body[data-theme="sepia"] .btn-report-question {
  background: #F5EFE2;
  border-color: #D6C7B2;
}

body[data-theme="sepia"] .bottom-review-pill,
body[data-theme="sepia"] .report-meta-item,
body[data-theme="sepia"] .report-snippet-box,
body[data-theme="sepia"] .report-textarea {
  background: #FBF7EE;
  border-color: #D6C7B2;
}

body[data-theme="dark"] .qcard-report-footer,
body[data-theme="dark"] .bottom-reviews-rotator {
  border-color: #334155;
}

body[data-theme="dark"] .qcard-report-hint,
body[data-theme="dark"] .report-privacy-note,
body[data-theme="dark"] .motivation-quote-counter {
  color: #94A3B8;
}

body[data-theme="dark"] .btn-report-question {
  background: #0F172A;
  border-color: #334155;
  color: #CBD5E1;
}

body[data-theme="dark"] .btn-report-question:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: #F59E0B;
  color: #FCD34D;
}

body[data-theme="dark"] .report-autofill-box,
body[data-theme="dark"] .bottom-reviews-card {
  background: #0F172A;
  border-color: #334155;
}

body[data-theme="dark"] .bottom-review-pill {
  background: #1E293B;
  border-color: #334155;
}

body[data-theme="dark"] .report-autofill-head,
body[data-theme="dark"] .report-meta-item strong,
body[data-theme="dark"] .report-meta-value,
body[data-theme="dark"] .report-snippet-q,
body[data-theme="dark"] .report-snippet-question,
body[data-theme="dark"] .bottom-reviews-quote,
body[data-theme="dark"] .bottom-review-text,
body[data-theme="dark"] .motivation-quote-text {
  color: #F1F5F9;
}

body[data-theme="dark"] .report-meta-item,
body[data-theme="dark"] .report-snippet-box,
body[data-theme="dark"] .report-textarea {
  background: #1E293B;
  border-color: #475569;
  color: #F8FAFC;
}

body[data-theme="dark"] .report-snippet-choice {
  color: #CBD5E1;
}

body[data-theme="dark"] .report-snippet-choice.is-correct,
body[data-theme="dark"] .report-snippet-choice.is-correct-ref {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
}

body[data-theme="dark"] .report-snippet-ans-tag {
  background: rgba(16, 185, 129, 0.25);
  color: #A7F3D0;
}

body[data-theme="dark"] .motivation-quote-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-color: #334155;
  border-left-color: #3B82F6;
}

body[data-theme="dark"] .motivation-quote-badge,
body[data-theme="dark"] .motivation-quote-kicker {
  color: #93C5FD;
}

body[data-theme="dark"] .motivation-next-btn,
body[data-theme="dark"] .bottom-reviews-nav-btn {
  background: #0F172A;
  border-color: #475569;
  color: #CBD5E1;
}

body[data-theme="dark"] .top-batch-target-pill.is-promo-target,
body[data-theme="dark"] .top-batch-target-pill.is-promo-banner {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(251, 191, 36, 0.42);
  border-left-color: #F59E0B;
  color: #FDE68A;
}

body[data-theme="dark"] .bottom-reviews-badge {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.4);
  color: #93C5FD;
}

body[data-theme="dark"] .bottom-reviews-author,
body[data-theme="dark"] .bottom-review-name {
  color: #6EE7B7;
}

/* =========================================================
   ANTI-PRINT PROTECTION (บล็อกการสั่งพิมพ์หน้าเว็บออกเป็นกระดาษหรือไฟล์)
   เมื่อสั่งพิมพ์จากเมนูเบราว์เซอร์ จะได้หน้าว่างที่มีข้อความแจ้งลิขสิทธิ์แทนเนื้อหา
   ========================================================= */
@media print {
  html,
  body,
  body[data-theme="sepia"],
  body[data-theme="dark"] {
    background: #ffffff !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body > * {
    display: none !important;
  }
  body::before {
    content: "สงวนลิขสิทธิ์ตามกฎหมาย — GovExamPass.com • คลังข้อสอบและตารางสรุปตัวบทในระบบนี้ให้บริการเฉพาะการอ่านและฝึกทำข้อสอบออนไลน์เท่านั้น ห้ามพิมพ์ คัดลอก ทำซ้ำ หรือเผยแพร่โดยไม่ได้รับอนุญาต";
    display: block !important;
    margin: 2.5cm 1.5cm;
    padding: 2cm 1.5cm;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    text-align: center;
    font-family: 'Prompt', 'Sarabun', sans-serif;
    font-size: 13pt;
    font-weight: 600;
    line-height: 1.85;
    color: #0f172a;
    background: #ffffff;
  }
}

/* =========================================================
   MOBILE (390px) & TABLET (820px) RESPONSIVE OVERHAUL (v34)
   - Ticket 2: หน้าแรก (#section-info) + แถบเลือก 5 ตำแหน่ง Smooth Snap + การ์ดสรุปตำแหน่ง + ปุ่มรายวิชา Thumb-friendly
   - Ticket 3: หน้าอ่านเรียงมาตรา (#section-seqsheet) + Dropdown/Drawer & แถบสไลด์เลือกวิชาด้านบน + ช้อยส์และกล่องเฉลยเต็มจอ
   - Ticket 4: หน้าตารางสรุป (#section-cheatsheet) Sticky Column & overflow-x-auto + หน้าต่างชำระเงิน/QR กึ่งกลางจอ
   - Ticket 5: ป้องกัน Horizontal Overflow 100% + ตัวหนังสืออ่านง่าย (>= 14px) + ปุ่มกดสะดวก (Touch Target >= 44px)
   ========================================================= */

/* 0. ป้องกันการล้นขอบจอแนวนอน (Zero Horizontal Overflow Guarantee) */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-header,
.app-header-inner,
.main-nav,
#global-position-bar-wrapper,
#global-position-bar,
.pos-expanded,
.pos-compact,
main,
main > section,
.explorer-left-sidebar,
.explorer-side-menu,
.explorer-main-col,
.reader-card,
.reader-head,
.mobile-seq-switcher {
  min-width: 0;
  max-width: 100%;
}

.edtech-hero,
.hero,
.watermark-card {
  overflow: hidden !important;
}

.edtech-hero-grid,
.explorer-workspace-grid,
.sw-3sec-grid,
.qr-payment-layout,
.pkg-mode-grid,
.antifraud-list,
.stat-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pkg-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .antifraud-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qr-payment-layout {
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .edtech-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  }
}

@media (min-width: 1024px) {
  .edtech-hero-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.92fr);
  }
  .explorer-workspace-grid {
    grid-template-columns: 325px minmax(0, 1fr);
  }
  .sw-3sec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.edtech-hero-grid > *,
.explorer-workspace-grid > *,
.sw-3sec-grid > *,
.qr-payment-layout > *,
#seqsheet-workspace > .grid > *,
#exam-workspace > .grid > * {
  min-width: 0;
  max-width: 100%;
}

.edtech-hero,
.hero,
.section-card,
.saas-card,
.qcard,
.product-card,
.cheatsheet-card,
.watermark-card {
  max-width: 100%;
}

.pos-mobile-swipe-hint {
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

body[data-theme="dark"] .pos-mobile-swipe-hint {
  color: #93C5FD;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(96, 165, 250, 0.4);
}

/* ---------- Ticket 3: Mobile/Tablet Subject Switcher Bar (#section-seqsheet) ---------- */
.mobile-seq-switcher {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
  margin: 0.2rem 0;
  border-radius: 0.85rem;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-color);
}

.mobile-seq-switcher.is-always-visible {
  display: flex;
}

.mobile-seq-switcher-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.mobile-seq-select-wrap {
  flex: 1 1 13rem;
  min-width: 0;
}

.mobile-seq-select-wrap .select-input {
  width: 100%;
  min-height: 2.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding-right: 2rem;
}

.mobile-seq-drawer-btn {
  flex: 0 0 auto;
  min-height: 2.35rem !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 0.65rem !important;
  white-space: nowrap;
}

.mobile-seq-drawer-btn.is-active {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}

.mobile-seq-pill-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.1rem 0.05rem 0.2rem;
  scrollbar-width: thin;
}

.mobile-seq-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.68rem;
  border-radius: 0.68rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-family: 'Prompt', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-seq-pill.is-part1 {
  border-left: 4px solid #2563EB;
}

.mobile-seq-pill.is-part2 {
  border-left: 4px solid #D97706;
}

.mobile-seq-pill-code {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.08rem 0.4rem;
  border-radius: 0.35rem;
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.mobile-seq-pill.is-part2 .mobile-seq-pill-code {
  background: #FEF3C7;
  color: #92400E;
}

.mobile-seq-pill-name {
  max-width: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-seq-pill-count {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.mobile-seq-pill.is-active {
  background: linear-gradient(135deg, #1E1B4B 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border-color: #F59E0B !important;
  border-left: 4px solid #FBBF24 !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.28);
}

.mobile-seq-pill.is-active .mobile-seq-pill-code {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.mobile-seq-pill.is-active .mobile-seq-pill-count {
  background: #F59E0B;
  color: #1E1B4B;
  font-weight: 700;
}

/* =========================================================
   MEDIA QUERY: MOBILE & TABLET (<= 1023px)
   ครอบคลุมทั้งสมาร์ตโฟน (390x844) และแท็บเล็ต/iPad (820x1180)
   ========================================================= */
@media (max-width: 1023px) {
  /* 1. ลำดับขนาดฟอนต์ตามความสำคัญจริง (Visual Hierarchy) โดยไม่บังคับป้ายกำกับใหญ่เทอะทะ */
  .btn:not(.btn-sm),
  .nav-tab,
  .pos-pill,
  .api-input,
  .select-input,
  .reader-search-input {
    font-size: 0.875rem;
  }

  .btn-sm,
  .seg-btn,
  .filter-chip,
  .page-pill,
  .cs-quick-btn,
  .toc-link,
  .explorer-side-link {
    font-size: 0.8rem;
  }

  /* 2. แบ่งระดับความสูงปุ่มหลัก vs ปุ่มย่อย/ป้ายเล็ก ไม่ให้ป้ายเล็กสูงเทอะทะเกินไป */
  .brand,
  .btn:not(.btn-sm),
  .btn-lg,
  .icon-btn,
  .nav-tab,
  .pos-pill,
  .explorer-side-link,
  .qty-btn,
  .group-tick-btn,
  .checkout-step-btn,
  .api-input,
  .select-input,
  .reader-search-input,
  #settings-toggle,
  #vip-demo-toggle .select-input {
    min-height: 2.5rem;
  }

  .btn-sm,
  .seg-btn,
  .filter-chip,
  .page-pill,
  .bookmark-btn,
  .btn-report-question,
  .cs-quick-btn,
  .toc-link,
  .sw-review-link,
  .answer-cell {
    min-height: 2.15rem !important;
  }

  .motivation-next-btn,
  .bottom-reviews-nav-btn,
  .reader-search-clear {
    min-height: 1.85rem !important;
    min-width: 1.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .icon-btn,
  .qty-btn,
  #settings-toggle {
    min-width: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sw-review-link {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
    background: rgba(239, 68, 68, 0.1);
  }

  /* 3. แถบนำทางหลักด้านบน (#main-nav) เลื่อนแนวนอนนุ่มนวลและแตะง่าย */
  .brand {
    flex: 1 1 0%;
    min-width: 0;
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
  }

  .brand-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .brand-sub {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0.3rem;
    padding: 0.25rem 0;
  }

  .seg {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  .hero-deco {
    right: 0.25rem !important;
  }

  .edtech-hero-glow--1 {
    right: 0 !important;
    left: auto !important;
    max-width: 100% !important;
  }

  .edtech-hero-glow--2 {
    left: 0 !important;
    max-width: 100% !important;
  }

  .nav-tab {
    scroll-snap-align: start;
    padding: 0.45rem 0.8rem !important;
    font-size: 0.85rem !important;
  }

  /* 4. Ticket 2.1: แถบเลือก 5 ตำแหน่งด้านบน (Horizontal Scroll with Smooth Snap) */
  #global-position-bar {
    overflow-x: clip;
  }

  .pos-expanded .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0.55rem !important;
    margin: 0 !important;
    padding: 0.15rem 0.1rem 0.45rem !important;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
  }

  .pos-expanded .pos-card {
    flex: 0 0 13.5rem !important;
    min-width: 13.5rem !important;
    max-width: 14.5rem !important;
    scroll-snap-align: start;
    padding: 0.65rem 0.8rem !important;
    gap: 0.3rem !important;
  }

  .pos-card-name {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .pos-compact {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .pos-pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem !important;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.2rem;
  }

  .pos-pill {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    padding: 0.42rem 0.8rem !important;
    font-size: 0.84rem !important;
  }

  /* 5. จัดลำดับหน้าแรกบนมือถือ/แท็บเล็ต (< 1024px): ให้ .explorer-left-sidebar (ข้อมูลตำแหน่ง + ปุ่มปลดล็อก + ความพร้อม) แสดงด้านบนก่อน .explorer-main-col */
  .explorer-workspace-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .explorer-left-sidebar {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    z-index: 1;
    width: 100%;
    min-width: 0;
    gap: 0.55rem !important;
  }

  .explorer-main-col {
    order: 2 !important;
    width: 100%;
    gap: 0.75rem !important;
  }

  .explorer-side-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem !important;
    padding: 0.45rem 0.55rem !important;
  }

  .explorer-side-link {
    width: auto !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
  }

  /* 6. การ์ดรายวิชา (.subject-row.is-compact-card) */
  .subject-row.is-compact-card {
    padding: 0.65rem 0.8rem !important;
    gap: 0.5rem !important;
  }

  .subject-row-actions {
    gap: 0.4rem !important;
  }

  .subject-row-actions .btn {
    padding: 0.42rem 0.75rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }

  /* 7. หน้าอ่านข้อสอบเรียงมาตรา (#section-seqsheet) ซ่อนรายการยาวด้านซ้ายเป็น Drawer และโชว์แถบสลับวิชาด้านบนทันที */
  .mobile-seq-switcher {
    display: flex !important;
  }

  #seqsheet-workspace .side-nav:not(.is-mobile-drawer-open) {
    display: none !important;
  }

  #seqsheet-workspace .side-nav.is-mobile-drawer-open {
    display: block !important;
    margin-bottom: 0.65rem;
    border: 2px solid #2563EB;
    box-shadow: 0 14px 32px -6px rgba(15, 23, 42, 0.22);
  }

  /* 8. การ์ดข้อสอบ (.qcard) และตัวเลือก ก–ง บนแท็บเล็ต */
  .choice-list {
    gap: 0.55rem;
  }

  .choice-row {
    min-height: 2.8rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .choice-row .choice-letter {
    width: 2rem;
    height: 2rem;
    font-size: 0.88rem;
    flex: none;
  }

  .sol-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.6rem !important;
  }

  /* 9. ตารางสรุปตัวบท 10 ตาราง (#section-cheatsheet) ตั้งค่า overflow-x-auto + Sticky Column ด้านซ้าย */
  #section-cheatsheet .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    position: relative;
    scrollbar-width: thin;
  }

  #section-cheatsheet .overflow-x-auto > table {
    min-width: 42rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  #section-cheatsheet .overflow-x-auto > table th:first-child,
  #section-cheatsheet .overflow-x-auto > table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 9rem;
    max-width: 11.5rem;
    border-right: 1.5px solid var(--border-color);
    box-shadow: 3px 0 8px -2px rgba(15, 23, 42, 0.12);
  }

  #section-cheatsheet .overflow-x-auto > table thead th:first-child {
    z-index: 3;
    background-color: var(--bg-subtle, #f1f5f9);
  }

  #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(odd) > td:first-child {
    background-color: var(--bg-surface, #ffffff);
  }

  #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(even) > td:first-child {
    background-color: var(--bg-subtle, #f8fafc);
  }

  body[data-theme="sepia"] #section-cheatsheet .overflow-x-auto > table thead th:first-child {
    background-color: #EFE7D6 !important;
  }

  body[data-theme="sepia"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(odd) > td:first-child {
    background-color: #FBF7EE !important;
  }

  body[data-theme="sepia"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(even) > td:first-child {
    background-color: #F5EFE2 !important;
  }

  body[data-theme="dark"] #section-cheatsheet .overflow-x-auto > table thead th:first-child {
    background-color: #1E293B !important;
  }

  body[data-theme="dark"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(odd) > td:first-child {
    background-color: #0F172A !important;
  }

  body[data-theme="dark"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(even) > td:first-child {
    background-color: #1E293B !important;
  }
}

/* =========================================================
   MEDIA QUERY: SMARTPHONE / MOBILE (<= 767px, e.g., 390x844)
   ย่อสเกลฟอนต์ลง 10–12% + ลดระยะขอบการ์ดให้ข้อสอบ 1 ข้อจบในหน้าเดียว + ลดความรกหน้าแรก
   ========================================================= */
@media (max-width: 767px) {
  /* 1. ตัวแปรสเกลฟอนต์บนมือถือ (ย่อลง ~10–12% ให้พอดีสายตาบนจอ 390x844) */
  :root,
  body[data-font-scale="normal"] {
    --font-base-size: 15px;
    --question-title-size: 0.98rem; /* ~15.7px (15.5px–16px) */
    --choice-text-size: 0.92rem;    /* ~14.7px (14.5px–15px) */
    --explain-text-size: 0.885rem;  /* ~14.15px (14px–14.5px) */
    --table-cell-size: 0.84rem;
  }

  body[data-font-scale="large"] {
    --font-base-size: 16px;
    --question-title-size: 1.06rem;
    --choice-text-size: 0.98rem;
    --explain-text-size: 0.94rem;
    --table-cell-size: 0.9rem;
  }

  body[data-font-scale="xlarge"] {
    --font-base-size: 17px;
    --question-title-size: 1.14rem;
    --choice-text-size: 1.05rem;
    --explain-text-size: 1rem;
    --table-cell-size: 0.96rem;
  }

  /* 2. ป้าย Tag / Badge / Kicker เล็ก ขนาด 11.5px–12px (0.72rem–0.75rem) ไม่แย่งสายตาเนื้อหาหลัก */
  .badge,
  .heading-kicker,
  .sample-showcase-kicker,
  .syllabus-col-kicker,
  .cs-kicker,
  .qcard-num,
  .qcard-head:not(.exam-q-meta-bar) .qcard-num,
  .exam-head .qcard-num,
  .qcard-ref,
  .qcard-head:not(.exam-q-meta-bar) .qcard-ref,
  .star-chip,
  .case-chip,
  .case-tag-badge,
  .bookmark-btn,
  .btn-report-question,
  .qcard-report-meta,
  .qcard-report-hint,
  .code-pill,
  .pos-card-doc,
  .pos-card-flag,
  .pos-hub-kicker,
  .pos-mobile-swipe-hint,
  .live-online-pill,
  .edtech-status-pill,
  .edtech-cd-badge,
  .sol-answer-badge,
  .choice-tag,
  .subject-row-count,
  .side-item-count,
  .filter-chip-count,
  .seg-count,
  .qcard-separator-pill,
  .sw-card-badge,
  .bottom-reviews-badge,
  .motivation-quote-badge,
  .motivation-quote-kicker {
    font-size: 0.73rem !important; /* ~11.7px */
    line-height: 1.35 !important;
    white-space: normal !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .group-range-saving,
  .top-batch-target-pill,
  .btn,
  .cs-quick-btn {
    white-space: normal !important;
    max-width: 100% !important;
    height: auto !important;
    line-height: 1.38 !important;
  }

  .watermark-stamp {
    max-width: 90% !important;
    white-space: normal !important;
    text-align: center;
    font-size: 0.78rem !important;
  }

  /* 3. ลดระยะขอบหน้าเว็บ + ย่อแถบเลือกตำแหน่ง (#global-position-bar) และ #edtech-master-hero ให้กะทัดรัด */
  main {
    padding-top: 0.65rem !important;
    padding-bottom: 1rem !important;
  }

  main > section.hidden {
    display: none !important;
  }

  #section-info:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.65rem !important;
  }

  #section-info > * + * {
    margin-top: 0 !important;
  }

  #global-position-bar-wrapper > div {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  .pos-expanded {
    padding: 0.45rem 0.6rem !important;
    gap: 0.35rem !important;
    border-radius: 0.85rem !important;
  }

  .pos-expanded-head {
    gap: 0.25rem 0.4rem !important;
  }

  .pos-expanded-title {
    font-size: 0.8rem !important;
  }

  .pos-expanded .pos-card {
    flex: 0 0 11.25rem !important;
    min-width: 11.25rem !important;
    max-width: 12rem !important;
    padding: 0.48rem 0.62rem !important;
    gap: 0.18rem !important;
    border-radius: 0.75rem !important;
  }

  .pos-card-icon-wrap {
    width: 1.65rem !important;
    height: 1.65rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.45rem !important;
  }

  .pos-card-name {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  .pos-card-vacancy {
    display: none !important;
  }

  .pos-card-footer {
    padding-top: 0.22rem !important;
  }

  .pos-card-count,
  .pos-card-arrow {
    font-size: 0.7rem !important;
  }

  /* ย่อ #edtech-master-hero บนมือถือให้เป็นแบนเนอร์กระชับ ไม่บังตัวอย่างข้อสอบ */
  .edtech-hero {
    padding: 0.65rem 0.75rem !important;
    border-radius: 0.9rem !important;
  }

  .edtech-hero-grid {
    gap: 0.45rem !important;
  }

  .edtech-hero-main {
    gap: 0.38rem !important;
  }

  .edtech-hero-pills {
    gap: 0.3rem !important;
    margin-bottom: 0 !important;
  }

  .edtech-status-pill {
    display: none !important;
  }

  .edtech-hero-title {
    font-size: 0.98rem !important;
    line-height: 1.32 !important;
  }

  .edtech-hero-sub,
  .edtech-cd-highlights,
  .edtech-cd-title,
  .edtech-cd-store-btn {
    display: none !important;
  }

  .edtech-stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    margin-top: 0 !important;
  }

  .edtech-stat-card {
    padding: 0.28rem 0.35rem !important;
    border-radius: 0.55rem !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
  }

  .edtech-stat-icon,
  .edtech-stat-label {
    display: none !important;
  }

  .edtech-stat-num {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .edtech-cta-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    margin-top: 0.05rem !important;
    width: 100%;
  }

  .edtech-cta-primary,
  .edtech-cta-secondary {
    flex: 1 1 0% !important;
    width: auto !important;
    justify-content: center !important;
    min-height: 2.15rem !important;
    padding: 0.32rem 0.5rem !important;
    font-size: 0.76rem !important;
    border-radius: 0.65rem !important;
  }

  .edtech-countdown-card {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.38rem 0.55rem !important;
    gap: 0.35rem !important;
    border-radius: 0.7rem !important;
  }

  .edtech-cd-badge {
    padding: 0.14rem 0.45rem !important;
    font-size: 0.68rem !important;
  }

  .edtech-cd-boxes {
    gap: 0.2rem !important;
    margin-left: auto;
  }

  .edtech-cd-unit {
    padding: 0.2rem 0.32rem !important;
    border-radius: 0.45rem !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.15rem !important;
  }

  .edtech-cd-num {
    font-size: 0.82rem !important;
  }

  .edtech-cd-lbl {
    font-size: 0.62rem !important;
    margin-top: 0 !important;
  }

  .edtech-cd-sep {
    font-size: 0.78rem !important;
  }

  /* 4. โจทย์ข้อสอบ + ช้อยส์ ก–ง + คำอธิบายเฉลย + ลดระยะขอบการ์ดให้จบใน 1 จอมือถือ (390x844) */
  .section-card {
    padding: 0.75rem 0.7rem !important;
    gap: 0.65rem !important;
    border-radius: 0.9rem !important;
  }

  .sample-showcase-head {
    padding-bottom: 0.4rem !important;
    gap: 0.4rem !important;
  }

  .sample-showcase-head h3,
  .syllabus-main-heading,
  .section-head h3 {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .sample-showcase-head p {
    font-size: 0.76rem !important;
    margin-top: 0.08rem !important;
  }

  .syllabus-structure-header {
    padding: 0.75rem 0.8rem !important;
    gap: 0.5rem !important;
    border-radius: 0.9rem !important;
  }

  .reader-head {
    padding: 0.7rem 0.75rem !important;
    gap: 0.45rem !important;
  }

  .reader-head.heading-accent-blue,
  .reader-head.heading-accent-indigo,
  .reader-head.heading-accent-emerald,
  .reader-head.heading-accent-amber,
  .reader-head.heading-accent-rose {
    padding-left: 0.8rem !important;
  }

  .reader-title-banner {
    padding: 0.45rem 0.65rem !important;
  }

  .reader-title {
    font-size: 0.96rem !important;
    line-height: 1.35 !important;
  }

  .reader-head-actions {
    width: 100%;
    display: flex;
    gap: 0.4rem;
  }

  .reader-head-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .reader-toolbar {
    padding: 0.6rem 0.75rem !important;
    gap: 0.5rem !important;
  }

  .qcard {
    padding: 0.68rem 0.72rem 0.72rem !important;
    gap: 0.5rem !important;
    border-radius: 0.9rem !important;
  }

  .qcard-head:not(.exam-q-meta-bar) {
    margin: -0.68rem -0.72rem 0.08rem !important;
    padding: 0.48rem 0.72rem !important;
    gap: 0.3rem 0.45rem !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
  }

  .qcard-head.exam-q-meta-bar {
    padding: 0.42rem 0.65rem !important;
    margin-bottom: 0.35rem !important;
    gap: 0.3rem !important;
  }

  .qcard-head-left,
  .qcard-head-right {
    gap: 0.28rem !important;
  }

  .qcard-head:not(.exam-q-meta-bar) .qcard-num,
  .exam-head .qcard-num {
    padding: 0.18rem 0.55rem !important;
    border-radius: 0.45rem !important;
  }

  .qcard-head:not(.exam-q-meta-bar) .qcard-ref {
    padding: 0.15rem 0.5rem !important;
  }

  .qcard-head:not(.exam-q-meta-bar) .bookmark-btn,
  .bookmark-btn {
    padding: 0.16rem 0.48rem !important;
    min-height: 1.9rem !important;
  }

  /* โจทย์ข้อสอบ: 15.5px–16px (0.97rem–1rem), line-height 1.55–1.6, padding 0.6rem 0.75rem */
  .q-title-text,
  .qcard .q-title-text,
  .exam-body .q-title-text {
    font-size: var(--question-title-size, 0.98rem) !important;
    line-height: 1.56 !important;
    padding: 0.6rem 0.75rem !important;
    margin: 0.08rem 0 !important;
    border-radius: 0.7rem !important;
  }

  /* ช้อยส์ ก–ง: 14.5px–15px (0.91rem–0.9375rem), line-height 1.5, padding 0.55rem 0.75rem, min-height 2.55rem */
  .choice-list {
    gap: 0.45rem !important;
  }

  .q-choice-text,
  .choice-row .choice-body {
    font-size: var(--choice-text-size, 0.92rem) !important;
    line-height: 1.5 !important;
  }

  .choice-row,
  .neutral-choice-box.choice-row {
    font-size: var(--choice-text-size, 0.92rem) !important;
    line-height: 1.5 !important;
    padding: 0.55rem 0.75rem !important;
    min-height: 2.55rem !important;
    gap: 0.55rem !important;
    border-radius: 0.7rem !important;
    flex-wrap: nowrap !important;
  }

  .choice-row .choice-letter,
  .choice-row.neutral-choice-box .choice-letter {
    width: 1.8rem !important;
    height: 1.8rem !important;
    font-size: 0.82rem !important;
    border-radius: 0.5rem !important;
    flex: none !important;
  }

  /* คำอธิบายเฉลย: 14px–14.5px (0.875rem–0.9rem), line-height 1.6 */
  .q-explain-text,
  .sol-section-body,
  .sol-section-body p,
  .sol-answer-text,
  .sol-body,
  .sol-trap {
    font-size: var(--explain-text-size, 0.885rem) !important;
    line-height: 1.6 !important;
  }

  .solution-bottom-box.sol-box,
  .sol-box {
    padding: 0.65rem 0.72rem !important;
    gap: 0.5rem !important;
    margin-top: 0.35rem !important;
    border-radius: 0.8rem !important;
  }

  .sol-answer,
  .sol-explain,
  .sol-trap {
    padding: 0.6rem 0.7rem !important;
    border-radius: 0.68rem !important;
  }

  .sol-section-title {
    font-size: 0.78rem !important;
    margin-bottom: 0.2rem !important;
  }

  .qcard-hint {
    margin-top: -0.15rem !important;
    font-size: 0.72rem !important;
  }

  .qcard-report-footer {
    margin-top: 0.3rem !important;
    padding-top: 0.35rem !important;
    gap: 0.3rem !important;
  }

  .btn-report-question {
    padding: 0.18rem 0.52rem !important;
    min-height: 1.95rem !important;
  }

  .qcard-separator {
    margin: 0.95rem 0 0.7rem !important;
  }

  /* ห้องสอบเสมือนจริง (.exam-head, .exam-body, .exam-foot) บนมือถือ */
  .exam-head {
    padding: 0.55rem 0.75rem !important;
    gap: 0.35rem 0.5rem !important;
  }

  .exam-head .exam-session {
    font-size: 0.78rem !important;
    max-width: 11rem;
  }

  .qcard-body,
  .exam-body {
    padding: 0.65rem 0.72rem !important;
    gap: 0.5rem !important;
  }

  .exam-foot {
    padding-top: 0.55rem !important;
    gap: 0.4rem !important;
  }

  .exam-foot .btn {
    min-height: 2.25rem !important;
    padding: 0.38rem 0.7rem !important;
    font-size: 0.8rem !important;
  }

  /* 5. การ์ดรายวิชา (.subject-row.is-compact-card) บนมือถือ */
  .subject-row.is-compact-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.45rem 0.58rem !important;
    gap: 0.28rem !important;
  }

  .subject-row.is-compact-card .subject-row-title {
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }

  .subject-row.is-compact-card .subject-row-title h4 {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .subject-row-summary {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    margin-top: 0.06rem !important;
  }

  .subject-row-actions {
    padding-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.28rem !important;
    padding-top: 0.28rem;
    border-top: 1px dashed var(--border-color);
  }

  .subject-row-actions .subject-row-count {
    flex: 0 0 auto;
    padding: 0.14rem 0.42rem !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
  }

  .subject-row-actions .btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 1.78rem !important;
    padding: 0.2rem 0.35rem !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
    gap: 0.2rem !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .subject-row-actions .btn .ico {
    width: 0.72rem !important;
    height: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  /* 6. แก้ไขการ์ดวิเคราะห์ผลสอบ (.sw-diagnostic-card & .sw-subject-chip) ไม่ให้ล้นจอ 390px */
  .sw-diagnostic-card {
    padding: 0.75rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sw-subject-chip {
    flex-wrap: wrap !important;
    gap: 0.3rem 0.45rem !important;
  }

  .sw-subject-chip span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    flex: 1 1 100%;
  }

  /* 7. หน้าต่างชำระเงิน (#checkout-modal) และ QR Code กึ่งกลางจอมือถือพอดี */
  #checkout-modal,
  #question-report-modal {
    padding: 0.5rem !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #checkout-modal-content,
  .report-modal-card {
    width: 100% !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 92vh !important;
    margin: auto !important;
    border-radius: 1rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .modal-head {
    padding: 0.85rem 0.9rem !important;
    gap: 0.5rem !important;
  }

  .modal-head h3 {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .checkout-stepper {
    padding: 0.5rem 0.75rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
  }

  .checkout-step-btn {
    padding: 0.4rem 0.5rem !important;
  }

  .checkout-step-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25 !important;
  }

  .modal-body {
    padding: 0.85rem !important;
    gap: 0.75rem !important;
  }

  .member-slot-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .member-slot-controls {
    width: 100% !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
  }

  .qr-payment-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  .qr-card-frame {
    max-width: 17rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .qr-svg-wrap svg,
  .qr-svg-wrap img {
    width: 11rem !important;
    height: 11rem !important;
    max-width: 100% !important;
  }

  .qr-detail-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
  }

  .qr-detail-val {
    text-align: left !important;
    word-break: break-word !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  .qr-info-panel .btn:not(.qr-detail-val .btn),
  .slip-dropzone .btn,
  .modal-actions .btn {
    width: 100% !important;
    min-height: 2.55rem !important;
    justify-content: center !important;
  }

  .qr-detail-val .btn {
    width: auto !important;
    min-height: 2rem !important;
    padding: 0.25rem 0.6rem !important;
  }

  .slip-preview-left {
    width: 100% !important;
  }

  .slip-preview-left > div {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .modal-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
  }
}

/* ==========================================================================
   HOME 10-QUESTION INTERACTIVE SAMPLE SLIDER & EXAM AUTO-ADVANCE FLOW BAR
   ========================================================================== */
.sample-autoplay-btn.is-playing {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.sample-slider-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.85rem;
  border-radius: 0.9rem;
  background: var(--bg-surface);
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

body[data-theme="sepia"] .sample-slider-bar {
  background: #F4EFE6;
  border-color: #C2B299;
}

body[data-theme="dark"] .sample-slider-bar {
  background: #1E293B;
  border-color: #334155;
}

.sample-slider-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.sample-slider-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 0.25rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.sample-answered-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.48rem;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1D4ED8;
}

body[data-theme="dark"] .sample-answered-pill {
  background: rgba(59, 130, 246, 0.25);
  color: #93C5FD;
}

.sample-number-strip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sample-num-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.45rem;
  border-radius: 0.6rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
  transition: all 0.16s ease;
  cursor: pointer;
}

.sample-num-btn:hover {
  border-color: #2563EB;
  color: #1D4ED8;
  transform: translateY(-1px);
}

.sample-num-btn.is-active {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: #1E1B4B !important;
  box-shadow: 0 4px 10px rgba(30, 27, 75, 0.22);
}

body[data-theme="dark"] .sample-num-btn.is-active {
  background: #2563EB !important;
  border-color: #60A5FA !important;
}

.sample-num-btn.is-answered.is-correct:not(.is-active) {
  background: #ECFDF5;
  color: #047857;
  border-color: #10B981;
}

.sample-num-btn.is-answered.is-wrong:not(.is-active) {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #EF4444;
}

body[data-theme="dark"] .sample-num-btn.is-answered.is-correct:not(.is-active) {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.5);
}

body[data-theme="dark"] .sample-num-btn.is-answered.is-wrong:not(.is-active) {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.5);
}

.sample-num-mark {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.sample-card-foot-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border-color);
}

.sample-foot-counter {
  font-family: 'Prompt', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* แถบสลับโหมดสอบ & สวิตช์เลื่อนข้อถัดไปอัตโนมัติในห้องสอบ (#section-exam) */
.exam-flow-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  padding: 0.6rem 1.15rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.exam-flow-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.exam-flow-label {
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.exam-autoadvance-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all 0.16s ease;
  cursor: pointer;
}

.exam-autoadvance-switch.is-on {
  background: #ECFDF5;
  border-color: #10B981;
  color: #065F46;
}

body[data-theme="dark"] .exam-autoadvance-switch.is-on {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6EE7B7;
}

.exam-autoadvance-switch.is-dimmed {
  opacity: 0.78;
}

.exam-autoadvance-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #94A3B8;
}

.exam-autoadvance-switch.is-on .exam-autoadvance-dot {
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

@media (max-width: 640px) {
  .sample-slider-bar {
    padding: 0.55rem 0.65rem;
    gap: 0.5rem;
  }

  .sample-slider-nav {
    width: 100%;
    justify-content: space-between;
  }

  .sample-number-strip {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
  }

  .sample-num-btn {
    flex: 0 0 auto;
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  .exam-flow-bar {
    padding: 0.5rem 0.72rem;
    gap: 0.4rem;
  }

  .exam-flow-autoadvance,
  .exam-autoadvance-switch {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CHEAT SHEET (10 TABLES) & REGULATIONS (3 ORGS) TOOLBAR, CARDS & MOBILE UX
   ========================================================================== */
.toc-bar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.toc-link {
  border: 1.5px solid transparent;
  cursor: pointer;
}

.toc-link.is-active {
  background: linear-gradient(135deg, #1E1B4B 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 3px 10px rgba(30, 58, 138, 0.24);
}

body[data-theme="dark"] .toc-link.is-active {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  border-color: #60A5FA !important;
}

.cs-toolbar-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border-color);
}

.cs-search-input-wrap {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: center;
}

.cs-search-ico {
  position: absolute;
  left: 0.7rem;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-muted);
  pointer-events: none;
}

.cs-search-input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.38rem 2.1rem 0.38rem 2.15rem;
  border-radius: 0.65rem;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.84rem;
  line-height: 1.35;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cs-search-input:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cs-search-clear {
  position: absolute;
  right: 0.4rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: none;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cs-search-clear:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.cs-filter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.cs-filter-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.68rem;
  border-radius: 999px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--border-color);
}

/* Regulations Filter Toolbar & Cards */
.reg-filter-toolbar {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.reg-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.reg-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.78rem;
  border-radius: 0.6rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all 0.16s ease;
}

.reg-filter-btn:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
}

.reg-filter-btn.is-active {
  background: linear-gradient(135deg, #1E1B4B 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 3px 10px rgba(30, 58, 138, 0.22);
}

.reg-filter-btn--kbs.is-active {
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
  border-color: #1D4ED8 !important;
}

.reg-filter-btn--ks.is-active {
  background: linear-gradient(135deg, #064E3B 0%, #059669 100%) !important;
  border-color: #059669 !important;
}

.reg-filter-btn--coj.is-active {
  background: linear-gradient(135deg, #78350F 0%, #B45309 100%) !important;
  border-color: #B45309 !important;
}

.reg-item-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.reg-item-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.reg-card-title {
  font-size: var(--table-cell-size, 0.92rem) !important;
  line-height: 1.45 !important;
}

.reg-card-desc {
  font-size: var(--explain-text-size, 0.875rem) !important;
  line-height: 1.62 !important;
}

.reg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.34rem 0.65rem;
  border-radius: 0.52rem;
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reg-action-btn .ico {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.reg-action-btn--read {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--border-color);
}

.reg-action-btn--read:hover {
  background: #1E1B4B;
  color: #FFFFFF;
  border-color: #1E1B4B;
}

.reg-action-btn--exam {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.reg-action-btn--exam:hover {
  background: #059669;
  color: #FFFFFF;
  border-color: #059669;
}

.reg-action-btn--related {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.reg-action-btn--related:hover {
  background: #D97706;
  color: #FFFFFF;
  border-color: #D97706;
}

body[data-theme="sepia"] .reg-action-btn--exam {
  background: #DFEFE5;
  color: #064E3B;
  border-color: #86EFAC;
}

body[data-theme="sepia"] .reg-action-btn--related {
  background: #F7E8C8;
  color: #78350F;
  border-color: #FCD34D;
}

body[data-theme="dark"] .reg-action-btn--read {
  background: #172554;
  color: #DBEAFE;
  border-color: #3B82F6;
}

body[data-theme="dark"] .reg-action-btn--read:hover {
  background: #2563EB;
  color: #FFFFFF;
}

body[data-theme="dark"] .reg-action-btn--exam {
  background: #064E3B;
  color: #D1FAE5;
  border-color: #10B981;
}

body[data-theme="dark"] .reg-action-btn--exam:hover {
  background: #059669;
  color: #FFFFFF;
}

body[data-theme="dark"] .reg-action-btn--related {
  background: #451A03;
  color: #FEF3C7;
  border-color: #F59E0B;
}

body[data-theme="dark"] .reg-action-btn--related:hover {
  background: #D97706;
  color: #FFFFFF;
}

body[data-theme="dark"] #section-cheatsheet .official-law-link:not(.is-on-dark) {
  background: #1E293B;
  color: #DBEAFE;
  border-color: #3B82F6;
}

body[data-theme="dark"] #section-cheatsheet td.text-rose-800 {
  background-color: #2A121F !important;
  color: #FFE4E6 !important;
}

/* Sepia & Dark Theme Table Header + Sticky First Column Consistency */
body[data-theme="sepia"] .cs-theme-1 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-2 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-3 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-4 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-5 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-6 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-7 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-8 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-9 .cs-thead-row,
body[data-theme="sepia"] .cs-theme-10 .cs-thead-row {
  background: #EFE7D6 !important;
  border-bottom-color: #D3C4AA !important;
}

@media (max-width: 1023px) {
  body[data-theme="light"] #section-cheatsheet .cs-theme-1 .overflow-x-auto > table thead th:first-child { background-color: #EFF6FF !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-2 .overflow-x-auto > table thead th:first-child { background-color: #EEF2FF !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-3 .overflow-x-auto > table thead th:first-child { background-color: #FFFBEB !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-4 .overflow-x-auto > table thead th:first-child { background-color: #FFF1F2 !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-5 .overflow-x-auto > table thead th:first-child { background-color: #FFF1F2 !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-6 .overflow-x-auto > table thead th:first-child { background-color: #F5F3FF !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-7 .overflow-x-auto > table thead th:first-child { background-color: #ECFDF5 !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-8 .overflow-x-auto > table thead th:first-child { background-color: #F0FDFA !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-9 .overflow-x-auto > table thead th:first-child { background-color: #F0F9FF !important; }
  body[data-theme="light"] #section-cheatsheet .cs-theme-10 .overflow-x-auto > table thead th:first-child { background-color: #FFFBEB !important; }

  body[data-theme="dark"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(odd) > td:first-child {
    background-color: #152033 !important;
  }

  body[data-theme="dark"] #section-cheatsheet .overflow-x-auto > table tbody tr:nth-child(even) > td:first-child {
    background-color: #1E2D45 !important;
  }
}

@media (max-width: 767px) {
  .toc-bar {
    padding: 0.45rem 0.65rem !important;
    gap: 0.42rem !important;
  }

  .cs-toolbar-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding-top: 0.38rem;
  }

  .cs-search-input-wrap {
    flex: 1 1 auto;
    width: 100%;
  }

  .cs-filter-meta {
    width: 100%;
    justify-content: space-between;
  }

  .cs-table-head,
  .reg-org-head {
    padding: 0.85rem 0.9rem !important;
    gap: 0.55rem !important;
  }

  .cs-table-title {
    font-size: 0.96rem !important;
    line-height: 1.35 !important;
  }

  .cs-table-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  #section-cheatsheet .overflow-x-auto > table {
    min-width: 36rem;
  }

  #section-cheatsheet .overflow-x-auto > table th,
  #section-cheatsheet .overflow-x-auto > table td {
    padding: 0.65rem 0.7rem !important;
  }

  #section-cheatsheet .overflow-x-auto > table th:first-child,
  #section-cheatsheet .overflow-x-auto > table td:first-child {
    min-width: 7.5rem;
    max-width: 9.25rem;
  }

  .reg-org-body {
    padding: 0.75rem !important;
  }

  .reg-filter-toolbar {
    padding: 0.6rem 0.7rem !important;
  }

  .reg-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
  }

  .reg-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .reg-card-desc,
  .reg-card-actions {
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   V34 MOBILE (390px) & TABLET (768px) COMPACT HOME UI/UX OPTIMIZATION
   1. Tablet Hero (768px–1023px): 2-Column Side-by-Side Layout (~360–420px tall)
   2. Position Profile Sidebar (.explorer-left-sidebar): Top Order & Compact Cards (< 1024px)
   3. Collapsible Toggle (#home-sample-questions) & Compact .sample-question-stage (< 640px)
   4. Compact Syllabus List (#home-syllabus-section & .subject-row) on Mobile (< 640px)
   ========================================================================== */

/* Collapsible Sample Showcase (#home-sample-questions) */
.sample-showcase-card.is-collapsed {
  padding-bottom: 0.7rem !important;
  gap: 0 !important;
}

.sample-showcase-card.is-collapsed .sample-showcase-head {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.sample-showcase-card.is-collapsed .sample-collapsible-body {
  display: none !important;
}

.sample-collapse-btn {
  font-weight: 600 !important;
}

.sample-collapse-btn.is-collapsed {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* 1. Tablet Hero (768px–1023px) — 2 คอลัมน์ซ้าย-ขวา กระชับสมดุล (~360–420px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .edtech-hero {
    padding: 1.15rem 1.25rem !important;
    border-radius: 1.1rem !important;
  }

  .edtech-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  .edtech-hero-main {
    gap: 0.62rem !important;
    justify-content: space-between;
  }

  .edtech-hero-pills {
    gap: 0.35rem !important;
    margin-bottom: 0 !important;
  }

  .edtech-status-pill,
  .edtech-hero .live-online-pill.is-hero-pill {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.58rem !important;
    line-height: 1.3 !important;
  }

  .edtech-hero-title {
    font-size: 1.32rem !important;
    line-height: 1.32 !important;
    margin: 0 !important;
  }

  .edtech-hero-sub {
    font-size: 0.8rem !important;
    line-height: 1.44 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .edtech-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    margin-top: 0 !important;
  }

  .edtech-stat-card {
    padding: 0.45rem 0.58rem !important;
    gap: 0.45rem !important;
    border-radius: 0.65rem !important;
  }

  .edtech-stat-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: 0.48rem !important;
  }

  .edtech-stat-num {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  .edtech-stat-label {
    font-size: 0.66rem !important;
    line-height: 1.22 !important;
  }

  .edtech-cta-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    padding-top: 0.1rem !important;
    width: 100%;
  }

  .edtech-cta-primary,
  .edtech-cta-secondary {
    flex: 1 1 0% !important;
    min-height: 2.4rem !important;
    padding: 0.42rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 0.66rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .edtech-countdown-card {
    padding: 0.82rem 0.9rem !important;
    gap: 0.48rem !important;
    border-radius: 0.9rem !important;
    justify-content: space-between !important;
  }

  .edtech-cd-badge {
    font-size: 0.66rem !important;
    padding: 0.2rem 0.55rem !important;
  }

  .edtech-cd-title {
    font-size: 0.75rem !important;
    line-height: 1.32 !important;
  }

  .edtech-cd-boxes {
    gap: 0.24rem !important;
    padding: 0.08rem 0 !important;
  }

  .edtech-cd-unit {
    padding: 0.38rem 0.22rem !important;
    border-radius: 0.55rem !important;
  }

  .edtech-cd-num {
    font-size: 1.15rem !important;
    line-height: 1.08 !important;
  }

  .edtech-cd-lbl {
    font-size: 0.6rem !important;
    margin-top: 0.12rem !important;
  }

  .edtech-cd-sep {
    font-size: 0.95rem !important;
    margin-top: -0.45rem !important;
  }

  .edtech-cd-highlights {
    gap: 0.24rem !important;
    padding: 0.42rem 0.52rem !important;
    border-radius: 0.58rem !important;
  }

  .edtech-cd-item {
    font-size: 0.67rem !important;
    line-height: 1.28 !important;
    gap: 0.32rem !important;
  }

  .edtech-cd-store-btn {
    min-height: 2.2rem !important;
    padding: 0.36rem 0.55rem !important;
    font-size: 0.73rem !important;
    border-radius: 0.62rem !important;
  }
}

/* 2. Position Profile Sidebar (.explorer-left-sidebar) บน Mobile & Tablet (< 1024px) */
@media (max-width: 1023px) {
  .explorer-workspace-grid > .explorer-left-sidebar {
    order: 1 !important;
  }

  .explorer-workspace-grid > .explorer-main-col {
    order: 2 !important;
  }

  .hero.hero-sidebar-card {
    padding: 0.55rem 0.68rem !important;
    gap: 0.32rem !important;
    border-radius: 0.82rem !important;
  }

  .hero.hero-sidebar-card .hero-body {
    gap: 0.26rem !important;
  }

  .hero.hero-sidebar-card .hero-chips {
    gap: 0.22rem !important;
    align-items: center !important;
  }

  .hero.hero-sidebar-card .hero-chips .badge,
  .hero.hero-sidebar-card .hero-chips .live-online-pill,
  .hero.hero-sidebar-card .hero-chips .hero-meta {
    font-size: 0.64rem !important;
    padding: 0.1rem 0.42rem !important;
    line-height: 1.2 !important;
  }

  .hero.hero-sidebar-card .hero-title {
    font-size: 0.92rem !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }

  .hero-facts.is-sidebar-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.24rem !important;
    padding-top: 0 !important;
  }

  .hero-facts.is-sidebar-grid > span {
    padding: 0.2rem 0.38rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  .hero-facts.is-sidebar-grid > span.is-full-span {
    grid-column: 1 / -1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero-facts.is-sidebar-grid small {
    font-size: 0.58rem !important;
    margin-bottom: 0.02rem !important;
    display: inline !important;
    margin-right: 0.3rem !important;
  }

  .hero.hero-sidebar-card .hero-details {
    padding: 0.2rem 0.45rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.68rem !important;
  }

  .hero.hero-sidebar-card .score-split {
    padding: 0.26rem 0.45rem !important;
    gap: 0.18rem !important;
    border-radius: 0.48rem !important;
  }

  .hero.hero-sidebar-card .score-split-label {
    font-size: 0.64rem !important;
  }

  .hero.hero-sidebar-card .score-split-bar {
    height: 1rem !important;
    font-size: 0.62rem !important;
  }

  .hero.hero-sidebar-card .top-batch-target-pill {
    padding: 0.16rem 0.38rem !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
  }

  .hero.hero-sidebar-card .top-batch-target-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero-actions.is-sidebar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.26rem !important;
    padding-top: 0.22rem !important;
  }

  .hero-actions.is-sidebar-actions > .btn:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .hero-actions.is-sidebar-actions > .btn {
    min-height: 1.78rem !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.69rem !important;
    border-radius: 0.48rem !important;
  }

  .motivation-quote-card.is-sidebar-quote {
    padding: 0.32rem 0.55rem !important;
    gap: 0.14rem !important;
    border-radius: 0.65rem !important;
  }

  .motivation-quote-card.is-sidebar-quote .motivation-quote-top {
    margin-bottom: 0 !important;
  }

  .motivation-quote-card.is-sidebar-quote .motivation-quote-text {
    font-size: 0.69rem !important;
    line-height: 1.24 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .readiness-dashboard-card.is-sidebar-compact {
    padding: 0.38rem 0.58rem !important;
    gap: 0.24rem !important;
    border-radius: 0.68rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-head {
    gap: 0.3rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-icon-badge {
    width: 1.45rem !important;
    height: 1.45rem !important;
    border-radius: 0.4rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-title {
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-score-num {
    font-size: 0.88rem !important;
    line-height: 1.05 !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-progress-track {
    height: 0.34rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-milestones {
    font-size: 0.58rem !important;
    margin-top: 0.08rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-kpi-grid.is-sidebar-kpi {
    gap: 0.24rem !important;
    padding-top: 0.18rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-kpi-item {
    padding: 0.18rem 0.3rem !important;
    border-radius: 0.4rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-kpi-label {
    font-size: 0.58rem !important;
  }

  .readiness-dashboard-card.is-sidebar-compact .readiness-kpi-val {
    font-size: 0.68rem !important;
  }
}

/* บนจอ Tablet (768px–1023px): จัดวาง .explorer-left-sidebar แบบ 2 คอลัมน์ซ้าย-ขวา + กระชับ #home-sample-questions */
@media (min-width: 768px) and (max-width: 1023px) {
  .explorer-left-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) !important;
    gap: 0.55rem !important;
    align-items: start !important;
  }

  .explorer-left-sidebar > .hero-sidebar-card {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    height: 100%;
  }

  .explorer-left-sidebar > .motivation-quote-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .explorer-left-sidebar > .readiness-dashboard-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #home-sample-questions.sample-showcase-card {
    padding: 0.85rem 1rem !important;
    gap: 0.55rem !important;
  }

  #home-sample-questions .sample-showcase-head {
    padding-bottom: 0.45rem !important;
  }

  #home-sample-questions .sample-showcase-head p {
    display: none !important;
  }

  #home-sample-questions .sample-slider-bar {
    padding: 0.45rem 0.65rem !important;
    margin-bottom: 0.5rem !important;
  }

  #home-sample-questions .sample-question-stage .qcard {
    padding: 0.75rem 0.9rem !important;
    gap: 0.48rem !important;
  }

  #home-sample-questions .sample-question-stage .qcard-head {
    margin: -0.75rem -0.9rem 0.1rem !important;
    padding: 0.48rem 0.9rem !important;
  }

  #home-sample-questions .sample-question-stage .q-title-text {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    padding: 0.5rem 0.65rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-list {
    gap: 0.35rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-row {
    padding: 0.45rem 0.65rem !important;
    min-height: 2.25rem !important;
    font-size: 0.86rem !important;
  }

  #home-sample-questions .sample-question-stage .qcard-hint.is-idle-hint {
    display: none !important;
  }
}

/* 3 & 4. Mobile (< 640px) Compact Sample Question Stage & Compact Syllabus List */
@media (max-width: 639px) {
  /* บีบระยะห่างและลดกล่องซ้ำซ้อนใน #home-sample-questions & .sample-question-stage */
  #home-sample-questions.sample-showcase-card {
    padding: 0.58rem 0.62rem !important;
    gap: 0.45rem !important;
  }

  #home-sample-questions .sample-showcase-head {
    padding-bottom: 0.35rem !important;
    gap: 0.35rem !important;
  }

  #home-sample-questions .sample-showcase-kicker {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.45rem !important;
    margin-bottom: 0.15rem !important;
  }

  #home-sample-questions .sample-showcase-head h3 {
    font-size: 0.86rem !important;
    line-height: 1.28 !important;
  }

  /* ซ่อนคำอธิบายซ้ำซ้อนในหัวการ์ดตัวอย่างบนมือถือ (มีบอกในตัวการ์ดแล้ว) */
  #home-sample-questions .sample-showcase-head p {
    display: none !important;
  }

  #home-sample-questions .sample-head-actions {
    width: 100% !important;
    gap: 0.28rem !important;
  }

  #home-sample-questions .sample-head-actions .btn {
    flex: 1 1 auto !important;
    min-height: 1.85rem !important;
    padding: 0.22rem 0.45rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.5rem !important;
    justify-content: center !important;
  }

  #home-sample-questions .sample-slider-bar {
    padding: 0.35rem 0.48rem !important;
    margin-bottom: 0.42rem !important;
    gap: 0.32rem !important;
    border-radius: 0.65rem !important;
  }

  #home-sample-questions .sample-slider-nav .btn {
    min-height: 1.65rem !important;
    padding: 0.15rem 0.42rem !important;
    font-size: 0.68rem !important;
  }

  #home-sample-questions .sample-slider-counter {
    font-size: 0.72rem !important;
    padding: 0.14rem 0.45rem !important;
  }

  #home-sample-questions .sample-num-btn {
    min-width: 1.7rem !important;
    height: 1.7rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.45rem !important;
  }

  #home-sample-questions .sample-question-stage .qcard {
    padding: 0.5rem 0.55rem 0.55rem !important;
    gap: 0.35rem !important;
    border-radius: 0.75rem !important;
  }

  #home-sample-questions .sample-question-stage .qcard-head {
    margin: -0.5rem -0.55rem 0.05rem !important;
    padding: 0.32rem 0.55rem !important;
    gap: 0.22rem !important;
    flex-wrap: nowrap !important;
  }

  /* ซ่อนป้ายเลขข้อซ้ำซ้อนในหัวการ์ดตัวอย่างบนมือถือ (มีแสดงใน .sample-slider-bar ด้านบนแล้ว) และย่อข้อความดาว */
  #home-sample-questions .sample-question-stage .qcard-head .qcard-num,
  #home-sample-questions .sample-question-stage .qcard-head .star-chip-label {
    display: none !important;
  }

  #home-sample-questions .sample-question-stage .qcard-head .qcard-ref,
  #home-sample-questions .sample-question-stage .qcard-head .star-chip,
  #home-sample-questions .sample-question-stage .qcard-head .bookmark-btn {
    font-size: 0.64rem !important;
    padding: 0.1rem 0.36rem !important;
    min-height: 1.45rem !important;
  }

  #home-sample-questions .sample-question-stage .q-title-text {
    font-size: 0.84rem !important;
    line-height: 1.38 !important;
    padding: 0.4rem 0.52rem !important;
    margin: 0 !important;
    border-radius: 0.55rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-list {
    gap: 0.28rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-row {
    padding: 0.36rem 0.5rem !important;
    min-height: 2.05rem !important;
    gap: 0.4rem !important;
    border-radius: 0.55rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-row .choice-letter {
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.72rem !important;
    border-radius: 0.38rem !important;
  }

  #home-sample-questions .sample-question-stage .choice-row .choice-body {
    font-size: 0.79rem !important;
    line-height: 1.34 !important;
  }

  /* ซ่อนบรรทัดบอกใบ้ซ้ำซ้อนเมื่อยังไม่ได้คลิกตอบ (เพราะมีแสดงใน .sol-locked ด้านล่างแล้ว) */
  #home-sample-questions .sample-question-stage .qcard-hint.is-idle-hint {
    display: none !important;
  }

  #home-sample-questions .sample-question-stage .sol-locked {
    padding: 0.35rem 0.5rem !important;
    gap: 0.35rem !important;
    border-radius: 0.55rem !important;
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
  }

  #home-sample-questions .sample-question-stage .sol-locked .btn {
    min-height: 1.68rem !important;
    padding: 0.18rem 0.45rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #home-sample-questions .sample-question-stage .sample-card-foot-nav {
    padding-top: 0.28rem !important;
    gap: 0.3rem !important;
  }

  #home-sample-questions .sample-question-stage .sample-card-foot-nav .btn {
    min-height: 1.65rem !important;
    padding: 0.15rem 0.45rem !important;
    font-size: 0.68rem !important;
  }

  #home-sample-questions .sample-question-stage .sample-foot-counter {
    font-size: 0.7rem !important;
  }

  /* 4. สารบัญรายวิชา (#home-syllabus-section & .subject-row) แบบ Compact List บนมือถือ (< 640px) */
  #home-syllabus-section.syllabus-structure-header {
    padding: 0.55rem 0.65rem !important;
    gap: 0.38rem !important;
    border-radius: 0.78rem !important;
  }

  #home-syllabus-section .toolbar-row {
    gap: 0.38rem !important;
  }

  #home-syllabus-section .syllabus-main-heading {
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
  }

  #home-syllabus-section .seg {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 0.82fr 1.15fr 1.15fr !important;
    gap: 0.25rem !important;
    padding: 0.22rem !important;
    border-radius: 0.68rem !important;
    background: var(--bg-muted) !important;
    border: 1.5px solid var(--border-color) !important;
  }

  #home-syllabus-section .seg-btn {
    min-height: 2.05rem !important;
    padding: 0.26rem 0.3rem !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    white-space: nowrap !important;
  }

  #home-syllabus-section .seg-btn.is-active {
    background: linear-gradient(135deg, #1E1B4B 0%, #2563EB 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  }

  .syllabus-col-card {
    padding: 0.55rem 0.58rem !important;
    gap: 0.42rem !important;
  }

  .syllabus-col-card .section-head.is-compact-head {
    padding-bottom: 0.32rem !important;
    gap: 0.28rem !important;
  }

  .syllabus-col-card .section-head.is-compact-head h3 {
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
  }

  .subject-list.is-compact-list {
    gap: 0.28rem !important;
  }

  .subject-row.is-compact-card {
    padding: 0.38rem 0.5rem !important;
    gap: 0.24rem !important;
    border-radius: 0.62rem !important;
  }

  .subject-row.is-compact-card .code-pill {
    font-size: 0.64rem !important;
    padding: 0.1rem 0.36rem !important;
  }

  .subject-row.is-compact-card .subject-row-title h4 {
    font-size: 0.79rem !important;
    line-height: 1.26 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .subject-row.is-compact-card .subject-row-summary {
    font-size: 0.69rem !important;
    line-height: 1.26 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0.04rem !important;
  }

  .subject-row.is-compact-card .subject-row-actions {
    padding-top: 0.22rem !important;
    gap: 0.24rem !important;
    flex-wrap: nowrap !important;
  }

  .subject-row.is-compact-card .subject-row-actions .subject-row-count {
    font-size: 0.62rem !important;
    padding: 0.12rem 0.36rem !important;
  }

  .subject-row.is-compact-card .subject-row-actions .btn {
    min-height: 1.66rem !important;
    padding: 0.16rem 0.3rem !important;
    font-size: 0.66rem !important;
    border-radius: 999px !important;
    gap: 0.18rem !important;
  }

  /* บีบการ์ดโปรโมชันท้ายสารบัญวิชา (.group-promo-card.is-compact-promo) บนมือถือ */
  .group-promo-card.is-compact-promo {
    padding: 0.6rem 0.7rem !important;
    gap: 0.45rem !important;
    border-radius: 0.8rem !important;
  }

  .group-promo-card.is-compact-promo .group-promo-title {
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
  }

  .group-promo-card.is-compact-promo .group-promo-text {
    font-size: 0.71rem !important;
    line-height: 1.32 !important;
  }

  .group-promo-card.is-compact-promo .group-promo-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .group-promo-card.is-compact-promo .group-promo-actions .btn {
    min-height: 1.95rem !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.72rem !important;
    justify-content: center !important;
  }
}