/* GÓI 04 - Page-level UI enhancements (modern look) */
:root{
  --nav-h: 56px;
  --content-max: 1180px;
  --surface: #ffffff;
  --surface-2: #f7f7f9;
  --border: rgba(0,0,0,.12);
  --text: rgba(0,0,0,.86);
  --muted: rgba(0,0,0,.62);
  --shadow-1: 0 6px 22px rgba(0,0,0,.08);
  --shadow-2: 0 10px 30px rgba(0,0,0,.12);
  --radius: 14px;
}

/* Make doc-like pages readable */
.modern-doc{
  max-width: var(--content-max);
  margin: 0 auto;
}
.modern-doc h1,.modern-doc h2,.modern-doc h3{
  color: var(--text);
  letter-spacing: .2px;
}
.modern-doc h2{
  margin-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.modern-doc p, .modern-doc li{
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
}
.modern-doc small{ color: var(--muted); }

.modern-doc pre{
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px 12px;
  overflow: auto;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.modern-doc code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}
.modern-doc .copy-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.modern-doc .copy-btn:hover{ color: var(--text); box-shadow: var(--shadow-1); }

.call-to-action{
  max-width: var(--content-max);
  margin: 0 auto 14px auto;
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.call-to-action h2{
  margin: 0 0 8px 0;
  border: 0;
  padding: 0;
}

/* =========================
   Lists (dsroom/dsbai) - multifreezer
   ========================= */
#freezer-example{
  width: 100%;
  /* JS will convert to viewport-based height */
  max-height: 520px;
  overflow: hidden;
  margin: 12px auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  background: var(--surface);
}
#freezer-example .table{
  margin-bottom: 0;
}
#freezer-example .table th,
#freezer-example .table td{
  white-space: normal !important;
  vertical-align: middle !important;
}
#freezer-example .table th{
  background: #f3f4f7 !important;
  color: var(--text) !important;
  outline: none !important;
  border-bottom: 1px solid var(--border) !important;
}
#freezer-example .table thead th{
  outline: none !important;
}
#freezer-example .table td{
  outline: none !important;
  border-top: 1px solid var(--border) !important;
}
#freezer-example .table col{
  background: transparent !important;
}

/* Make header row easier to scan */
#freezer-example .table thead th{
  font-weight: 600;
  font-size: 13px;
}

/* =========================
   Submit page (CodeMirror)
   ========================= */
/* Keep submit pages full width on desktop (do not constrain with content-max) */
/* textarea fallback (before CM init) */
textarea#code,
textarea.code-editor{
  width: 100% !important;
  min-height: 56vh !important;
  max-height: 70vh !important;
  resize: vertical;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: #ffffff !important;
  color: rgba(0,0,0,.88) !important;
  padding: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 14px;
  line-height: 1.55 !important;
  box-shadow: var(--shadow-1) !important;
}

/* CodeMirror */
.CodeMirror{
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  min-height: 56vh !important;

  /* IMPORTANT: do NOT lock CodeMirror height.
     - Allows auto-grow (page scroll) like before
     - Allows user to drag-resize via native resize handle */
  height: auto !important;
  max-height: none !important;
  resize: vertical;
  overflow: hidden;
	font-size: var(--cm-font-size, 14px);
  background: #ffffff;
  color: rgba(0,0,0,.88);
}

/* CodeMirror default CSS uses overflow: scroll !important (always shows scrollbar)
   => force auto so scrollbar only appears when needed */
.CodeMirror-scroll{
  overflow: auto !important;
}
.CodeMirror .CodeMirror-gutters{ border-right: 1px solid var(--border) !important; }
.CodeMirror-lines{ padding: 10px 0 !important; }
/* Một số trang CodeMirror copy font-size của textarea sang inline style cho <pre>
   => cần !important để nút +/- đổi cỡ chữ tác động cả nội dung */
.CodeMirror pre,
.CodeMirror-line,
.CodeMirror-code{
  font-size: inherit !important;
  color: inherit;
}

/* Editor dark mode (opt-in via body.editor-dark) */
body.editor-dark textarea#code,
body.editor-dark textarea.code-editor{
  background: #0b1220 !important;
  color: #e7eaf0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.editor-dark .CodeMirror{
  background: #0b1220 !important;
  color: #e7eaf0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.editor-dark .CodeMirror .CodeMirror-gutters{
  background: #0b1220 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
}
body.editor-dark .CodeMirror-linenumber{ color: rgba(231,234,240,.55) !important; }
body.editor-dark .CodeMirror-cursor{ border-left: 2px solid rgba(231,234,240,.95) !important; }
body.editor-dark .CodeMirror-selected{ background: rgba(255,255,255,.10) !important; }
/* Token colors for dark editor */
body.editor-dark div.CodeMirror span.cm-comment{ color: rgba(231,234,240,.55) !important; }
body.editor-dark div.CodeMirror span.cm-keyword{ color: #7dd3fc !important; }
body.editor-dark div.CodeMirror span.cm-atom{ color: #fda4af !important; }
body.editor-dark div.CodeMirror span.cm-number{ color: #fbbf24 !important; }
body.editor-dark div.CodeMirror span.cm-def{ color: #93c5fd !important; }
body.editor-dark div.CodeMirror span.cm-variable{ color: #e5e7eb !important; }
body.editor-dark div.CodeMirror span.cm-variable-2{ color: #a7f3d0 !important; }
body.editor-dark div.CodeMirror span.cm-variable-3{ color: #fca5a5 !important; }
body.editor-dark div.CodeMirror span.cm-property{ color: #c4b5fd !important; }
body.editor-dark div.CodeMirror span.cm-operator{ color: #e5e7eb !important; }
body.editor-dark div.CodeMirror span.cm-string{ color: #86efac !important; }
body.editor-dark div.CodeMirror span.cm-string-2{ color: #fda4af !important; }
body.editor-dark div.CodeMirror span.cm-meta{ color: #fcd34d !important; }
body.editor-dark div.CodeMirror span.cm-qualifier{ color: #60a5fa !important; }
body.editor-dark div.CodeMirror span.cm-builtin{ color: #c084fc !important; }
body.editor-dark div.CodeMirror span.cm-bracket{ color: #e5e7eb !important; }
body.editor-dark div.CodeMirror span.cm-tag{ color: #fca5a5 !important; }
body.editor-dark div.CodeMirror span.cm-attribute{ color: #fcd34d !important; }
body.editor-dark div.CodeMirror span.cm-link{ color: #93c5fd !important; text-decoration: underline !important; }
body.editor-dark div.CodeMirror span.cm-error{ color: #fecaca !important; background: rgba(220,38,38,.12) !important; border-radius: 4px; }
body.editor-dark div.CodeMirror .CodeMirror-activeline-background{ background: rgba(255,255,255,.04) !important; }
body.editor-dark div.CodeMirror .CodeMirror-matchingbracket{ outline: 1px solid rgba(125,211,252,.45) !important; color: #e7eaf0 !important; }


/* Controls (language selectors, buttons) */
#ngonngu, #cppStdCham, select.inp{
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  padding: 6px 10px !important;
  height: 34px;
}
#btnNopBai{
  padding: 8px 14px !important;
  border-radius: 12px !important;
}

/* =========================
   Running/status pages
   ========================= */
.status-box{
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
  font-size: 15px !important;
}