/* 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(125,211,252,.28) !important; }

/* Make selection always visible in dark editor (including styleSelectedText addon) */
body.editor-dark span.CodeMirror-selectedtext{
  background: rgba(125,211,252,.28) !important;
  color: inherit !important;
}
body.editor-dark .CodeMirror-line::selection,
body.editor-dark .CodeMirror-line > span::selection,
body.editor-dark .CodeMirror-line > span > span::selection{
  background: rgba(125,211,252,.28) !important;
  color: inherit !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;
}

/* =========================
   Search form tables (#data-search)
   - Make first column wide enough so labels / controls don't wrap
   - Keep inputs/selects readable
   ========================= */
#data-search table{ table-layout: auto; }
#data-search table td:first-child,
#data-search table th:first-child{
  min-width: 150px !important;
  white-space: nowrap;
}
#data-search table td{ vertical-align: middle; }
#data-search table td input.form-control,
#data-search table td select{
  max-width: 100%;
}

/* Search dropdowns: make the "Tên bài / Nội dung" selector readable */
#data-search table td select{ width: auto; }
#data-search select[name="timbai_col"],
#data-search select[name="timtl_col"],
#data-search select[name="timde_col"]{
  width: 180px !important;
  min-width: 180px !important;
}
#data-search select[name="timbai_col"] + input[name="timbai"],
#data-search select[name="timtl_col"] + input,
#data-search select[name="timde_col"] + input{
  width: calc(100% - 190px) !important;
}



/* =========================
   Danh sách pages - keep table headers visible on page scroll
   ========================= */
body[class*="code-ds"] #freezer-example,
body[class*="code-ds"] .table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}
body[class*="code-ds"] #freezer-example{
  width: 100% !important;
}
body[class*="code-ds"] .list-sticky-table{
  border-collapse: separate;
  border-spacing: 0;
}
body[class*="code-ds"] .list-sticky-table > thead > tr > th{
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 30;
  vertical-align: middle !important;
  background: #fff6bf !important;
  background-clip: padding-box;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.7);
}
body[class*="code-ds"] .list-sticky-table > thead > tr > th a,
body[class*="code-ds"] .list-sticky-table > thead > tr > th b,
body[class*="code-ds"] .list-sticky-table > thead > tr > th center{
  color: inherit !important;
}
body[class*="code-ds"] .list-sticky-table > thead > tr > th input[type="checkbox"]{
  vertical-align: middle;
}
body.dark-mode[class*="code-ds"] .list-sticky-table > thead > tr > th,
body.dark[class*="code-ds"] .list-sticky-table > thead > tr > th{
  background: #4d4212 !important;
  color: #f3f0d7 !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.18);
}


/* v187: danh sách ds* keep row 1 on page scroll, color like autorank */
.list-sticky-wrap,
#freezer-example{
  max-height:none !important;
}
.list-sticky-wrap .table,
#freezer-example .table{
  width:max-content;
  min-width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.list-sticky-wrap .table thead > tr:first-child > th,
.list-sticky-wrap .table thead > tr:first-child > td,
#freezer-example .table thead > tr:first-child > th,
#freezer-example .table thead > tr:first-child > td{
  background:linear-gradient(180deg,#f8fbff,#edf4ff) !important;
  background-color:#edf4ff !important;
  color:#14355d !important;
  vertical-align:middle !important;
}
.list-sticky-wrap .table thead > tr:first-child > th table,
.list-sticky-wrap .table thead > tr:first-child > td table,
.list-sticky-wrap .table thead > tr:first-child > th table tr,
.list-sticky-wrap .table thead > tr:first-child > td table tr,
.list-sticky-wrap .table thead > tr:first-child > th table th,
.list-sticky-wrap .table thead > tr:first-child > td table td,
#freezer-example .table thead > tr:first-child > th table,
#freezer-example .table thead > tr:first-child > td table,
#freezer-example .table thead > tr:first-child > th table tr,
#freezer-example .table thead > tr:first-child > td table tr,
#freezer-example .table thead > tr:first-child > th table th,
#freezer-example .table thead > tr:first-child > td table td{
  background:linear-gradient(180deg,#f8fbff,#edf4ff) !important;
  background-color:#edf4ff !important;
}


/* v188: ds* tables may be rendered directly as table.table (no #freezer-example wrapper).
   Wrap them at runtime and move only the real first header row on page scroll. */
body[class*="code-ds"] .list-sticky-wrap,
body[class*="code-ds"] #freezer-example{
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  max-height:none !important;
}
body[class*="code-ds"] table.list-sticky-table,
body[class*="code-ds"] .list-sticky-wrap .table,
body[class*="code-ds"] #freezer-example .table{
  width:max-content;
  min-width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
body[class*="code-ds"] table.list-sticky-table > thead > tr > th,
body[class*="code-ds"] table.list-sticky-table > thead > tr > td,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr > th,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr > td,
body[class*="code-ds"] #freezer-example .table > thead > tr > th,
body[class*="code-ds"] #freezer-example .table > thead > tr > td{
  position:relative !important;
  top:auto !important;
  vertical-align:middle !important;
}
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child > th,
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child > td,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child > th,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child > td,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child > th,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child > td{
  background:linear-gradient(180deg,#f8fbff,#edf4ff) !important;
  background-color:#edf4ff !important;
  color:#14355d !important;
  box-shadow:0 1px 0 rgba(148,163,184,.18) !important;
}
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child table,
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child table tr,
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child table th,
body[class*="code-ds"] table.list-sticky-table > thead > tr:first-child table td,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child table,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child table tr,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child table th,
body[class*="code-ds"] .list-sticky-wrap .table > thead > tr:first-child table td,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child table,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child table tr,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child table th,
body[class*="code-ds"] #freezer-example .table > thead > tr:first-child table td{
  background:linear-gradient(180deg,#f8fbff,#edf4ff) !important;
  background-color:#edf4ff !important;
}