/* theme.css — tách từ doc-site 24H Station. Dùng chung mọi page. Sửa style Ở ĐÂY. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

    :root {
      color-scheme: light;
      --pm-bg: #f6f8fb;
      --pm-surface: #ffffff;
      --pm-text: #172033;
      --pm-muted: #627085;
      --pm-border: #dbe3ee;
      --pm-accent: #e0348c;
      --pm-accent-soft: #fce7f0;
      --pm-gradient: linear-gradient(120deg,#000000,#f6a5c0);
      --pm-good: #047857;
      --pm-warn: #b45309;
      --pm-risk: #b91c1c;
      --pm-page-top: 16px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: var(--pm-page-top);
    }

    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      color: var(--pm-text);
      background: var(--pm-bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }

    .pm-guide {
      height: 100vh;
      max-width: none;
      margin: 0;
      overflow: hidden;
      padding: 0 24px 0 0;
    }

    .pm-shell {
      display: grid;
      grid-template-columns: 280px 280px minmax(0, 1fr); /* RULE: TOC=280px, vừa heading ngắn (≤28 ký tự · rule) */
      gap: 24px;
      height: 100vh;
      align-items: start;
    }

    .pm-doc-sidebar,
    .pm-page-sidebar {
      position: sticky;
      overflow: auto;
      background: var(--pm-surface);
    }

    .pm-doc-sidebar {
      top: 0;
      min-height: 100vh;
      max-height: 100vh;
      padding: 24px 18px;
      border-right: 1px solid var(--pm-border);
    }

    .pm-page-sidebar {
      top: var(--pm-page-top);
      max-height: calc(100vh - (var(--pm-page-top) * 2));
      margin-top: var(--pm-page-top);
      padding: 18px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
    }

    .pm-doc-sidebar h2,
    .pm-page-sidebar h2 {
      margin: 0 0 12px;
      font-size: 15px;
      line-height: 1.3;
    }

    .pm-doc-group-label {
      margin: 16px 0 6px;
      color: var(--pm-muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .pm-doc-group-label:first-child {
      margin-top: 0;
    }

    .pm-doc-sidebar button,
    .pm-page-sidebar button {
      display: block;
      width: 100%;
      margin: 0;
      padding: 9px 10px;
      border: 0;
      border-radius: 6px;
      color: var(--pm-muted);
      background: transparent;
      text-align: left;
      text-decoration: none;
      font: inherit;
      font-size: 14px;
      cursor: pointer;
    }

    .pm-doc-sidebar button:hover,
    .pm-doc-sidebar button.is-active,
    .pm-page-sidebar button:hover,
    .pm-page-sidebar button.is-active {
      color: var(--pm-accent);
      background: var(--pm-accent-soft);
    }

    .pm-page-sidebar button[data-depth="3"] {
      font-weight: 700;
      color: #17201c;
      font-size: 14px;
      margin-top: 5px;
    }

    .pm-page-sidebar button[data-depth="4"] {
      padding-left: 22px;
      font-weight: 500;
      font-size: 13.5px;
    }

    .pm-page-sidebar button[data-depth="5"] {
      padding-left: 34px;
      font-weight: 400;
      font-size: 13px;
    }

    .pm-content {
      min-width: 0;
      height: calc(100vh - var(--pm-page-top));
      margin-top: var(--pm-page-top);
      overflow-y: auto;
      padding-bottom: 24px;
      scroll-behavior: smooth;
    }

    .pm-hero,
    .pm-section {
      margin-bottom: 18px;
      padding: 24px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: var(--pm-surface);
    }

    .pm-hero h1 {
      margin: 0 0 10px;
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .pm-section {
      scroll-margin-top: calc(var(--pm-page-top) + 4px);
    }

    .pm-section h1,
    .pm-section h2 {
      margin: 0 0 12px;
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .pm-section h3 {
      margin: 22px 0 10px;
      font-size: 18px;
    }

    .pm-section h4 {
      margin: 18px 0 8px;
      font-size: 16px;
    }

    .pm-section h2,
    .pm-section h3,
    .pm-section h4 {
      scroll-margin-top: calc(var(--pm-page-top) + 8px);
    }

    .pm-lead,
    .pm-note,
    .pm-meta {
      color: var(--pm-muted);
    }

    .pm-source-status {
      margin-bottom: 0;
      font-size: 13px;
    }

    .pm-source-status[data-state="live"] {
      color: var(--pm-good);
    }

    .pm-source-status[data-state="fallback"] {
      color: var(--pm-warn);
    }

    .pm-note {
      margin: 12px 0 0;
      padding: 12px 14px;
      border-left: 4px solid var(--pm-accent);
      background: var(--pm-accent-soft);
    }

    .pm-table-wrap {
      width: 100%;
      overflow-x: auto;
      margin: 12px 0 4px;
    }

    .pm-table {
      width: 100%;
      min-width: 720px;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 14px;
    }

    .pm-table th,
    .pm-table td {
      padding: 10px 12px;
      border: 1px solid var(--pm-border);
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
    }

    .pm-table th {
      background: #fdf2f7;
      color: #1a1a1a;
    }

    code {
      padding: 2px 5px;
      border-radius: 4px;
      background: #fdf2f7;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.92em;
    }

    pre {
      overflow: auto;
      margin: 12px 0;
      padding: 14px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: #111111;
      color: #e5e7eb;
      line-height: 1.5;
    }

    pre code {
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      font-size: 13px;
    }

    .pm-mermaid-wrap {
      overflow: auto;
      margin: 12px 0;
      padding: 14px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: #ffffff;
    }

    .pm-mermaid-wrap svg {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }

    .pm-mermaid-wrap pre {
      margin: 0;
      background: transparent;
      color: var(--pm-text);
    }

    .pm-wireframe-wrap {
      overflow: auto;
      margin: 12px 0 18px;
      padding: 16px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: #ffffff;
    }

    .pm-wireframe-wrap[data-renderer="wiremd"] {
      background: #fbfaf2;
    }

    .pm-wireframe-wrap svg {
      display: block;
      max-width: none;
      height: auto;
      margin: 0 auto;
    }

    .pm-wireframe-wrap pre {
      margin: 0;
      background: transparent;
      color: var(--pm-text);
    }

    .pm-wiremd-render {
      display: inline-block;
      min-width: min(100%, 420px);
      max-width: 100%;
      padding: 16px;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: #fdf2f7;
      color: #333333;
    }

    .pm-wiremd-render .wmd-h1 {
      margin-top: 0;
      font-size: 28px;
      text-decoration: none;
    }

    .pm-wiremd-render .wmd-input {
      width: min(100%, 330px) !important;
      max-width: 100% !important;
    }

    .pm-wireframe-error {
      white-space: pre-wrap;
      color: var(--pm-risk);
    }

    ul,
    ol {
      padding-left: 24px;
    }

    li {
      margin: 6px 0;
    }

    .doc-source {
      display: inline-block;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .pm-env-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 14px;
    }

    .pm-env-tab {
      min-height: 38px;
      padding: 8px 12px;
      border: 0;
      border-radius: 6px;
      background: #fdf2f7;
      color: var(--pm-muted);
      cursor: pointer;
      font: inherit;
      font-size: 14px;
    }

    .pm-env-tab:hover,
    .pm-env-tab.is-active {
      background: var(--pm-accent-soft);
      color: var(--pm-accent);
    }

    .pm-env-panel {
      overflow: hidden;
      border: 1px solid var(--pm-border);
      border-radius: 8px;
      background: var(--pm-surface);
    }

    .pm-env-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--pm-border);
    }

    .pm-env-file-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
    }

    .pm-env-status {
      color: var(--pm-muted);
      font-size: 13px;
      white-space: nowrap;
    }

    .pm-env-output {
      min-height: 520px;
      margin: 0;
      border: 0;
      border-radius: 0;
      white-space: pre;
    }

    .pm-env-file[hidden] {
      display: none;
    }

    .pm-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 16px;
    }

    .pm-filter-button {
      min-height: 36px;
      padding: 8px 11px;
      border: 0;
      border-radius: 6px;
      background: #fdf2f7;
      color: var(--pm-muted);
      cursor: pointer;
      font: inherit;
      font-size: 13px;
    }

    .pm-filter-button:hover,
    .pm-filter-button.is-active {
      background: var(--pm-accent-soft);
      color: var(--pm-accent);
    }

    .pm-scope-summary {
      margin: 0 0 12px;
      color: var(--pm-muted);
      font-size: 14px;
    }

    @media (max-width: 1120px) {
      .pm-shell {
        grid-template-columns: 260px minmax(0, 1fr);
      }

      .pm-doc-sidebar {
        grid-row: 1 / span 2;
      }

      .pm-page-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        grid-column: 2;
        grid-row: 1;
        margin-top: var(--pm-page-top);
      }

      .pm-content {
        grid-column: 2;
        grid-row: 2;
        margin-top: var(--pm-page-top);
      }
    }

    @media (max-width: 760px) {
      body {
        height: auto;
        overflow: auto;
      }

      .pm-guide {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: 0 14px 14px;
      }

      .pm-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        height: auto;
      }

      .pm-doc-sidebar,
      .pm-page-sidebar {
        position: relative;
        top: auto;
        min-height: auto;
        max-height: none;
        grid-column: auto;
      }

      .pm-doc-sidebar {
        grid-row: auto;
        margin: 14px 0 0;
        border: 1px solid var(--pm-border);
        border-radius: 8px;
      }

      .pm-page-sidebar,
      .pm-content {
        margin-top: 0;
        grid-column: auto;
      }

      .pm-content {
        height: auto;
        overflow: visible;
        padding-bottom: 0;
      }

      .pm-hero h1 {
        font-size: 28px;
      }

      .pm-env-header {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  
.pm-guide{height:calc(100vh - 58px)}
/* ═══ RULE KIT: TOC menu (#page-toc) LUÔN 1 dòng — KHÔNG rớt dòng, cắt bằng … · sửa Ở ĐÂY ═══ */
.pm-page-sidebar{min-width:0}
#page-toc{min-width:0}
#page-toc button{display:block;width:100%;max-width:100%;min-width:0;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* RULE KIT: hero chỉ hiện tiêu đề — ẩn meta template/dev (lead mô tả · Source · trạng thái nạp) */
.pm-hero .pm-lead,.pm-hero .pm-meta,#doc-load-status{display:none!important}

/* wireframe mockup inline (combo planning-md) */
.pm-wireframe-frame{display:inline-block;margin:14px 18px 14px 0;vertical-align:top}
.pm-wireframe-frame iframe{width:300px;height:600px;border:1px solid var(--pm-border);border-radius:14px;background:#fff}
.pm-wireframe-frame figcaption{text-align:center;font-size:12px;color:var(--pm-muted);margin-top:6px;font-weight:600}