/* Typography for rich text produced by the editor.
 *
 * Used by BOTH the blog article body and the static pages (terms of service, privacy policy).
 * It used to be called .blog-content and live in blog.css, while the static pages leaned entirely
 * on the Tailwind Typography `prose` classes - and that plugin is NOT loaded anywhere in this
 * project. So every one of the fifteen prose modifiers on those pages did nothing: measured
 * 2026-09-11, the two live legal pages rendered 18 headings and 33 list items with no styling at
 * all, i.e. a single undifferentiated wall of text on the two documents people are most likely to
 * actually need to read.
 *
 * One class for both, so a fix to either lands on both. */
.noi-dung-soan h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a202c;
}
.dark .noi-dung-soan h2 {
    color: #f7fafc;
}
.noi-dung-soan h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #2d3748;
}
.dark .noi-dung-soan h3 {
    color: #edf2f7;
}
.noi-dung-soan p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.8;
    font-size: 1.05rem;
    color: #4a5568;
}
.dark .noi-dung-soan p {
    color: #cbd5e0;
}
.noi-dung-soan ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #4a5568;
}
.dark .noi-dung-soan ul {
    color: #cbd5e0;
}
.noi-dung-soan ul li {
    margin-bottom: 0.5rem;
}
/* NUMBERED LISTS.
 *
 * Tailwind preflight sets list-style: none on both ul and ol. ul already had a rule restoring its
 * bullets; ol did not - so every numbered list in an article lost its numbers and collapsed into
 * a few loose lines. Measured 2026-09-10: post #4 has exactly one such list. */
.noi-dung-soan ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #4a5568;
}
.dark .noi-dung-soan ol {
    color: #cbd5e0;
}
.noi-dung-soan ol li {
    margin-bottom: 0.5rem;
}

/* Heading level 4: no article uses it yet, but the editor offers it, so one eventually will -
   and with no rule it renders identically to body text. */
.noi-dung-soan h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.dark .noi-dung-soan h4 {
    color: #edf2f7;
}

/* Blockquote: with no rule it degrades into an ordinary paragraph and loses its meaning. */
.noi-dung-soan blockquote {
    border-left: 3px solid var(--theme-color, #3b82f6);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 1.5rem 0;
    color: #4a5568;
    font-style: italic;
}
.dark .noi-dung-soan blockquote {
    color: #cbd5e0;
}

/* Tables: preflight strips every border, so without a rule the cells run together into a
   single block of text. */
.noi-dung-soan table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
.noi-dung-soan th,
.noi-dung-soan td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: #4a5568;
}
.noi-dung-soan th {
    background: #f7fafc;
    font-weight: 600;
}
.dark .noi-dung-soan th,
.dark .noi-dung-soan td {
    border-color: #2d3748;
    color: #cbd5e0;
}
.dark .noi-dung-soan th {
    background: #1a202c;
}
/* LINKS INSIDE THE ARTICLE BODY.
 *
 * There used to be no rule for <a> here. The wrapper carried the `prose` class from the Tailwind
 * Typography plugin, but that plugin is NOT loaded anywhere in this project, so `prose` is a dead
 * class. Combined with Tailwind preflight setting a { color: inherit; text-decoration: inherit },
 * every link in an article inherited the paragraph colour #4a5568 and lost its underline -
 * readers could not tell it was clickable.
 *
 * KEEP THE UNDERLINE, do not rely on colour alone: colour carries no meaning for readers who
 * cannot distinguish it, the underline is the cue they can actually read.
 *
 * The colour comes from the --theme-color variable on the html element, so links follow whatever
 * brand colour the operator sets in Settings instead of a hardcoded value that drifts. */
.noi-dung-soan a {
    color: var(--theme-color, #3b82f6);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 600;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.noi-dung-soan a:hover {
    color: var(--theme-color-light, #5895f7);
    text-decoration-thickness: 2px;
}
.noi-dung-soan a:focus-visible {
    outline: 2px solid var(--theme-color, #3b82f6);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Dark background: the operator-chosen brand colour may be dark, so use the lighter variant. */
.dark .noi-dung-soan a {
    color: var(--theme-color-light, #5895f7);
}
.dark .noi-dung-soan a:hover {
    color: var(--theme-color, #3b82f6);
    filter: brightness(1.25);
}
/* An image wrapped in a link gets no underline - a rule under a picture is just a stray line. */
.noi-dung-soan a:has(> img) {
    text-decoration: none;
}
.noi-dung-soan img {
    border-radius: 1rem;
    margin: 2rem auto;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .noi-dung-soan h2 {
        font-size: 1.35rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .noi-dung-soan h3 {
        font-size: 1.15rem;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .noi-dung-soan p {
        font-size: 0.975rem;
        margin-bottom: 1rem;
        line-height: 1.7;
    }
    .noi-dung-soan img {
        margin: 1.25rem auto;
        border-radius: 0.75rem;
    }
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}