/*
 * Rich text of a post body (news-detail.html) and of a CMS page.
 *
 * The body is HTML written in the admin editor, so it cannot carry the theme's Tailwind classes; these
 * rules give its plain tags the look news-detail.html gives the same elements by hand (paragraph
 * spacing, navy sub-headings, check-mark list, styled blockquote, rounded pictures).
 * Tailwind's preflight resets heading sizes and list markers, hence the explicit values.
 */
.tamda-prose > * + * { margin-top: 1.5rem; }
.tamda-prose > :first-child { margin-top: 0; }

.tamda-prose strong, .tamda-prose b { font-weight: 700; color: #233869; }
.tamda-prose a { color: #233869; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tamda-prose a:hover { color: #f2af08; }

.tamda-prose h2, .tamda-prose h3, .tamda-prose h4, .tamda-prose h5, .tamda-prose h6 {
    font-family: Gilroy, SVN-Gilroy, sans-serif;
    font-weight: 700;
    color: #233869;
    line-height: 1.375;
}
.tamda-prose h2 { font-size: 1.125rem; margin-top: 2rem; }
.tamda-prose h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.tamda-prose h4, .tamda-prose h5, .tamda-prose h6 { font-size: 1rem; }
.tamda-prose h2 + *, .tamda-prose h3 + *, .tamda-prose h4 + * { margin-top: 1rem; }
@media (min-width: 768px) {
    .tamda-prose h2 { font-size: 1.25rem; }
    .tamda-prose h3 { font-size: 1.125rem; }
}

.tamda-prose ul, .tamda-prose ol { padding-left: 0; }
.tamda-prose li + li { margin-top: 0.75rem; }
.tamda-prose ul > li { position: relative; padding-left: 1.75rem; list-style: none; }
.tamda-prose ul > li::before {
    /* fa-check-circle (Font Awesome 6 Free, solid), as the theme's benefit list. */
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1em;
    color: #233869;
    font-size: 0.875rem;
}
.tamda-prose ol { list-style: decimal; padding-left: 1.5rem; }
.tamda-prose ol > li::marker { color: #233869; font-weight: 700; }

.tamda-prose blockquote {
    background: #f9fafb;
    border-left: 4px solid #233869;
    border-radius: 0 1rem 1rem 0;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #233869;
    font-family: Gilroy, SVN-Gilroy, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1rem;
}
@media (min-width: 768px) {
    .tamda-prose blockquote { padding: 2rem; font-size: 1.125rem; }
}
.tamda-prose blockquote footer, .tamda-prose blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tamda-prose img { max-width: 100%; height: auto; border-radius: 1rem; }
.tamda-prose figure { margin: 2rem 0; }
.tamda-prose figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #9ca3af; text-align: center; }
.tamda-prose iframe, .tamda-prose video { max-width: 100%; border-radius: 1rem; }

.tamda-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; display: block; overflow-x: auto; }
.tamda-prose th, .tamda-prose td { border: 1px solid #e5e7eb; padding: 0.625rem 0.875rem; text-align: left; }
.tamda-prose th { background: #f9fafb; color: #233869; font-weight: 700; }

.tamda-prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

/* The blockquote's last line is its attribution ("— BAN KỸ THUẬT …"), as in the theme. */
.tamda-prose blockquote > p + p:last-child {
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tamda-prose blockquote > p + p:last-child { color: #233869; }

/* Two pictures in a row sit side by side from 768px, like the theme's "Two Smaller Images" grid. */
.tamda-prose figure > img { width: 100%; }
@media (min-width: 768px) {
    .tamda-prose figure:has(+ figure), .tamda-prose figure + figure {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 0.875rem);
    }
    .tamda-prose figure + figure { margin-top: 0; margin-left: 1.25rem; }
    .tamda-prose figure:has(+ figure) > img, .tamda-prose figure + figure > img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}