/* Canonical article document styling. Loaded by both the Admin editor and the public reader. */
.article-content {
  --article-text: var(--nv-text, var(--text, #1d1d1f));
  --article-muted: var(--nv-text-secondary, var(--text-secondary, #6e6e73));
  --article-border: var(--nv-border, var(--border, #d2d2d7));
  --article-soft: var(--nv-primary-soft, var(--primary-soft, #f5f5f7));
  /* site.css defaults (--nv-accent, --nv-font-*); the public theme may override them per site. */
  --article-accent: var(--nv-accent, hsl(210,77%,46%));
  --article-font-body: var(--nv-font-body, 'Inter', var(--font-geist-sans, system-ui), sans-serif);
  --article-font-display: var(--nv-font-display, var(--font-space-grotesk, 'Space Grotesk'), sans-serif);
  --article-radius: var(--nv-radius, var(--radius, 10px));
  /* Public type scale (site.css :root); the fallbacks are the same values for the Admin editor. */
  --article-font-size: var(--font-size-ct, 18px);
  --article-h1-size: var(--font-size-2xl, 22px);
  --article-h2-size: var(--font-size-xl, 18px);
  --article-h3-size: var(--font-size-lg, 16px);
  --article-h5-size: var(--font-size-md, 15px);
  --article-small-size: var(--font-size-sm, 14px);
  --article-code-bg: color-mix(in srgb, var(--article-text) 7%, transparent);
  width: 100%;
  margin-inline: auto;
  color: var(--article-text);
  /* The page-language body font (site.css): Inter, or the :lang(vi) font below. */
  font-family: var(--article-font-body);
  font-size: var(--article-font-size);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
/* Vietnamese body font, as site.css sets for .nv-page:lang(vi); the Admin editor sets lang per locale. */
.article-content:lang(vi) { --article-font-body: var(--nv-font-body, 'Segoe UI', 'Segoe UI Midlevel', sans-serif); }
.article-content > :first-child { margin-top: 0; }
.article-content > :last-child { margin-bottom: 0; }
    .article-content p {
        font-weight: 400;
        margin: 0 0 16px 0;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        unicode-bidi: isolate;
    }
.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6 {
  margin: 2rem 0 .8rem;
  color: var(--article-text);
  font-family: var(--article-font-display);
  font-weight: 600;
  letter-spacing: -.025em;
}
/* !important keeps imported inline font sizes from overriding the heading scale. */
.article-content h1 { font-size: var(--article-h1-size) !important; line-height: 1.25; }
.article-content h2 { font-size: var(--article-h2-size) !important; line-height: 1.3; }
.article-content h3,.article-content h4 { font-size: var(--article-h3-size) !important; line-height: 1.4; }
.article-content h5,.article-content h6 { font-size: var(--article-h5-size) !important; line-height: 1.4; }
.article-content h6 { letter-spacing: .01em; text-transform: uppercase; }
.article-content ul,.article-content ol { margin: 0 0 1.25rem; padding-left: 1.75rem; }
.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.article-content ul ul { list-style-type: circle; }
.article-content ul ul ul { list-style-type: square; }
.article-content ol ol { list-style-type: lower-alpha; }
.article-content li { display: list-item; margin: .35rem 0; }
.article-content li > ul,.article-content li > ol { margin: .35rem 0 0; }
.article-content strong { font-weight: 600; }
.article-content em { font-style: italic; }
.article-content u { text-decoration: underline; text-underline-offset: .14em; }
.article-content s { text-decoration: line-through; }
.article-content a { color: var(--nv-link, var(--article-accent)); text-decoration: underline; text-underline-offset: .16em; }
.article-content blockquote { margin: 1.5rem 0; padding: .9rem 1.25rem; border-left: 4px solid var(--article-accent); border-radius: 0 var(--article-radius) var(--article-radius) 0; background: var(--article-soft); font-style: italic; }
.article-content blockquote > :last-child { margin-bottom: 0; }
    .article-content :not(pre) > code {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: break-spaces;
        box-decoration-break: clone;
        font-style: normal;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D97757' fill-opacity='.5' d='M4 21 C40 17 92 20 140 16.5 C166 15 186 17.5 197 15 C195 21 198 26 195.5 30 C197 33 195 36 196 38 C150 39.5 102 36.5 56 38.5 C34 39.5 16 37.5 3 39 C5.5 34 2 29 4.5 25.5 C3 24 3.5 22.5 4 21Z'/%3E%3C/svg%3E") 0px 0px / 100% 100% no-repeat;
        padding: 0px 0.1em;
        margin: 0px -0.04em;
    }
.article-content pre { max-width: 100%; margin: 1.5rem 0; overflow-x: auto; padding: 1rem; border-radius: var(--article-radius); color: #e6edf3; background: #17202b; line-height: 1.6; }
.article-content pre code { padding: 0; color: inherit; background: transparent; font-size: .875rem; }
.article-content hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--article-border); }
.article-content img { display: block; max-width: 100%; height: auto; margin-block: 1.5rem; border-radius: var(--article-radius); object-fit: contain; }
.article-content img[data-alignment='left'] { margin-right: auto; margin-left: 0; }
.article-content img[data-alignment='center'],.article-content img:not([data-alignment]) { margin-right: auto; margin-left: auto; }
.article-content img[data-alignment='right'] { margin-right: 0; margin-left: auto; }
.article-content figure { max-width: 100%; margin: 1.5rem auto; }
.article-content figure img { margin-block: 0; }
.article-content figcaption { margin-top: .5rem; color: var(--article-muted); font-size: .875rem; text-align: center; }
.article-content [data-youtube-video] { position: relative; width: 100%; margin: 1.5rem 0; overflow: hidden; border-radius: var(--article-radius); background: #000; aspect-ratio: 16 / 9; }
.article-content [data-youtube-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The editor's table wrapper is the scroll container. The public sanitizer keeps no class names, so
   there it arrives as a plain <div> around the table - matched by structure instead. */
.article-content .tableWrapper,.article-content div:has(> table) { max-width: 100%; margin: 1.5rem 0; overflow-x: auto; }
.article-content table { width: 100%; min-width: 560px; border: 1px solid var(--article-border); border-collapse: separate; border-spacing: 0; border-radius: var(--article-radius); }
/* A table imported without any wrapper scrolls inside its own box, never the page. */
.article-content > table { display: block; max-width: 100%; min-width: 0; overflow-x: auto; }
.article-content th,.article-content td { min-width: 96px; padding: .55rem .75rem; border-right: 1px solid var(--article-border); border-bottom: 1px solid var(--article-border); vertical-align: top; text-align: left; }
.article-content th { background: var(--article-soft); font-weight: 600; }
.article-content :is(small,figcaption) { font-size: var(--article-small-size) !important; }
.article-content tr:last-child > * { border-bottom: 0; }
.article-content tr > *:last-child { border-right: 0; }

/* Tiptap-only image chrome; it never appears in generated article HTML. */
.article-content .post-image-node { position: relative; max-width: 100%; margin-block: 1.5rem; }
.article-content .post-image-node[data-alignment='left'] { margin-right: auto; margin-left: 0; }
.article-content .post-image-node[data-alignment='center'] { margin-right: auto; margin-left: auto; }
.article-content .post-image-node[data-alignment='right'] { margin-right: 0; margin-left: auto; }
.article-content .post-image-node img { width: 100%; margin: 0; }
.post-image-node.is-selected img { outline: 2px solid var(--article-accent); outline-offset: 2px; }
.post-image-resize-handle { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: var(--article-accent); box-shadow: 0 1px 5px #0005; cursor: nwse-resize; touch-action: none; }
.post-image-toolbar { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 9px); display: flex; max-width: min(96vw, 620px); gap: 2px; overflow-x: auto; padding: 4px; border: 1px solid var(--article-border); border-radius: 8px; color: var(--article-text); background: var(--surface, white); box-shadow: 0 8px 24px #0002; transform: translateX(-50%); white-space: nowrap; }
.post-image-toolbar button { min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 5px; color: inherit; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.post-image-toolbar button:hover,.post-image-toolbar button[aria-pressed='true'] { background: var(--article-soft); }

@media (min-width: 1200px) {
    .nv-post-layout > * {
        margin-top: 0px;
    }
    nv-public-post {
        border-radius: 0px !important;
        box-shadow: none !important;
    }
    .nv-post-sidebar-column{
        margin-top:0px;
    }
    .nv-post-toc, .nv-post-toc-show {
        border-right: none;
        border-left: none;
        border-radius: 0px;
    }
}
/* Public reader only: the article sits flush inside its card. Typography lives in the shared rules above. */
.nv-page .article-content { padding: 0; margin: 0; }