/* Section 2 — Story content
   Tokens: assets/css/global.css (Round11 design system) */
.cs-content {
    background: var(--color-2nd-bg);
    padding: var(--space-section-lg) var(--section-horizontal-padding);
    font-family: var(--font-body);
    color: var(--color-1st-fg);
}

.cs-content__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    /* layout-specific */
    gap: var(--section-gap);
    align-items: start;
}

/* ============================================================
   Sidebar trái — Company info (page chrome — giữ class)
   ============================================================ */
.cs-content__meta {
    display: flex;
    flex-direction: column;
    gap: var(--var-40);
    width: 240px;
    position: sticky;
    top: 120px;
    /* sticky offset — depends on header height */
}

.cs-meta__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--var-4);
    display: flex;
    flex-direction: column;
    gap: var(--var-24);
    width: 100%;
}

.cs-meta__row {
    display: flex;
    flex-direction: column;
    gap: var(--var-16);
    padding-bottom: var(--var-24);
    border-bottom: 1px solid var(--color-stroke);
}

.cs-meta__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cs-meta__label {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

.cs-meta__value {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    color: var(--color-1st-fg);
}

.cs-meta__logo {
    height: var(--var-24);
    width: auto;
    display: block;
    align-self: flex-start;
}

/* ============================================================
   Main column — output của the_content() (HTML thuần, không class)
   ============================================================ */
.cs-content__body {
    max-width: 800px;
    /* layout-specific */
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Đảm bảo text dài (URL, từ không break được) wrap thay vì tràn ra ngoài container */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.cs-content__body>* {
    margin: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* ---------- Headings (rich content) — direct mapping h{N} ↔ --fs-h{N} ---------- */
.cs-content__body> :is(h1, h2, h3, h4, h5, h6) {
    padding: var(--var-16) var(--var-40);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.cs-content__body>h1 {
    font-size: var(--fs-h1);
    /* 58px */
}

.cs-content__body>h2 {
    font-size: var(--fs-h2);
    /* 48px */
}

.cs-content__body>h3 {
    font-size: var(--fs-h3);
    /* 40px */
}

.cs-content__body>h4 {
    font-size: var(--fs-h4);
    /* 32px */
}

.cs-content__body>h5 {
    font-size: var(--fs-h5);
    /* 25px */
}

.cs-content__body>h6 {
    font-size: var(--fs-h6);
    /* 20px */
}

/* ---------- Paragraph ---------- */
.cs-content__body>p {
    padding: 0 var(--var-40) var(--var-36);
    font-weight: 400;
    font-size: var(--fs-label-lg);
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* ---------- Lists ---------- */
.cs-content__body>ol,
.cs-content__body>ul {
    padding: 0 var(--var-40) var(--var-36) calc(var(--var-40) + var(--var-24));
    list-style: decimal;
    color: var(--color-2nd-fg);
    font-size: var(--fs-label-lg);
    line-height: 1.4;
    font-weight: 400;
}

.cs-content__body>ul {
    list-style: disc;
}

.cs-content__body>ol>li,
.cs-content__body>ul>li {
    padding-bottom: var(--var-8);
}

.cs-content__body ol ol,
.cs-content__body ul ul,
.cs-content__body ol ul,
.cs-content__body ul ol {
    margin: var(--var-8) 0 0;
    padding-left: var(--var-24);
    padding-bottom: 0;
}

.cs-content__body ol ol {
    list-style: lower-alpha;
}

.cs-content__body ol ol ol {
    list-style: lower-roman;
}

/* ---------- Summary collapsible (<details>) ---------- */
.cs-content__body>details {
    background: var(--color-3rd-bg);
    margin-bottom: var(--var-36);
}

.cs-content__body>details>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--var-36) var(--var-40);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    font-size: var(--fs-h4);
    /* 32px */
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.cs-content__body>details>summary::-webkit-details-marker {
    display: none;
}

.cs-content__body>details>summary::marker {
    content: "";
}

.cs-content__body>details>summary::after {
    content: "";
    flex: 0 0 var(--var-12);
    height: var(--var-12);
    margin-left: var(--var-16);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 7.5L6 3.5L10 7.5' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
}

.cs-content__body>details[open]>summary::after {
    transform: rotate(0deg);
}

/* Headings inside <details> Summary box — direct mapping h{N} ↔ --fs-h{N} */
.cs-content__body>details> :is(h1, h2, h3, h4, h5, h6) {
    padding: var(--var-16) var(--var-40);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.cs-content__body>details>h1 {
    font-size: var(--fs-h1);
    /* 58px */
}

.cs-content__body>details>h2 {
    font-size: var(--fs-h2);
    /* 48px */
}

.cs-content__body>details>h3 {
    font-size: var(--fs-h3);
    /* 40px */
}

.cs-content__body>details>h4 {
    font-size: var(--fs-h4);
    /* 32px */
}

.cs-content__body>details>h5 {
    font-size: var(--fs-h5);
    /* 25px */
}

.cs-content__body>details>h6 {
    font-size: var(--fs-h6);
    /* 20px — phù hợp cho group heading bên trong Summary */
}

.cs-content__body>details>ol,
.cs-content__body>details>ul {
    padding: 0 var(--var-40) 0 calc(var(--var-40) + var(--var-24));
    list-style: decimal;
    color: var(--color-2nd-fg);
    font-size: var(--fs-label-lg);
    line-height: 1.4;
}

.cs-content__body>details>ul {
    list-style: disc;
}

.cs-content__body>details>ol>li,
.cs-content__body>details>ul>li {
    padding-bottom: var(--var-8);
}

.cs-content__body>details> :last-child {
    padding-bottom: var(--var-36);
}

/* ---------- Blockquote (quote với gradient bar) ---------- */
.cs-content__body>blockquote {
    position: relative;
    padding: var(--var-20) var(--var-40) var(--var-20) calc(var(--var-40) + var(--var-4));
    margin-bottom: var(--var-36);
}

.cs-content__body>blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--var-4);
    background: linear-gradient(180deg, var(--color-1st-brd) 0%, var(--color-2nd-brd) 100%);
}

.cs-content__body>blockquote>p {
    margin: 0 0 var(--var-24);
    padding: var(--var-28) 0 0 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='16' viewBox='0 0 21 16' fill='none'><path d='M0 16V10.4C0 7.84 0.56 5.52 1.68 3.44C2.8 1.36 4.56 0 6.96 0V3.04C5.6 3.12 4.56 3.68 3.84 4.72C3.12 5.76 2.72 6.96 2.64 8.32H6.96V16H0ZM13.36 16V10.4C13.36 7.84 13.92 5.52 15.04 3.44C16.16 1.36 17.92 0 20.32 0V3.04C18.96 3.12 17.92 3.68 17.2 4.72C16.48 5.76 16.08 6.96 16 8.32H20.32V16H13.36Z' fill='%23050505'/></svg>") top left no-repeat;
    background-size: 21px 16px;
    font-weight: 400;
    font-size: var(--fs-quote);
    /* 28px */
    line-height: 1.4;
    color: var(--color-1st-fg);
}

.cs-content__body>blockquote>cite,
.cs-content__body>blockquote>footer {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-1st-fg);
}

/* ---------- Table ---------- */
/* Bảng được JS wrap trong <div class="cs-content__table-scroll"> (xem scripts.js).
   Wrapper là block scroll container; bảng giữ display:table native nên colgroup widths
   vẫn áp đúng cell, không bị anonymous-table quirk khi ép display:block lên <table>. */
.cs-content__table-scroll,
.cs-content__body>figure:has(table) {
    max-width: calc(100% - var(--var-80));
    margin: 0 var(--var-40) var(--var-36);
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(5, 5, 5, 0.3) transparent;
}

.cs-content__table-scroll::-webkit-scrollbar,
.cs-content__body>figure:has(table)::-webkit-scrollbar {
    height: 6px;
}

.cs-content__table-scroll::-webkit-scrollbar-thumb,
.cs-content__body>figure:has(table)::-webkit-scrollbar-thumb {
    background: rgba(5, 5, 5, 0.3);
    border-radius: 3px;
}

.cs-content__table-scroll>table,
.cs-content__body>figure:has(table)>table {
    margin: 0;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    border: none;
    table-layout: auto;
    font-size: var(--fs-label-lg);
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

.cs-content__body table td,
.cs-content__body table th {
    padding: var(--var-8) var(--var-8) var(--var-8) 0;
    border-bottom: 1px solid var(--color-stroke);
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: top;
    /* match Figma `items-start` — header wrap 2 dòng vẫn align top */
    text-align: left;
    font-weight: 400;
    min-width: 140px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cs-content__body table a {
    word-break: break-all;
}

/* Hàng đầu tiên không có border-top */
.cs-content__body table tr:first-child td,
.cs-content__body table tr:first-child th {
    border-top: none;
}

.cs-content__body table tr:last-child td,
.cs-content__body table tr:last-child th {
    border-bottom: none;
}

.cs-content__body table tr>td:last-child,
.cs-content__body table tr>th:last-child {
    text-align: right;
    padding-right: 0;
}

/* ---------- Figure / Image ---------- */
.cs-content__body>figure {
    margin: 0 0 var(--var-36);
}

.cs-content__body>figure>img {
    width: 100%;
    height: 424px;
    /* design-specific */
    object-fit: cover;
    display: block;
}

.cs-content__body>figure>figcaption {
    margin-top: var(--var-12);
    padding: 0 var(--var-40);
    font-size: var(--fs-label-md);
    line-height: 1.4;
    color: var(--color-disabled-fg);
    text-align: center;
}

.cs-content__body>img {
    width: 100%;
    height: 424px;
    object-fit: cover;
    display: block;
    margin-bottom: var(--var-36);
}

/* ---------- Inline content images (WP editor: <p><img>) ----------
   Editor thường wrap ảnh trong <p> kèm width/height attribute lớn (1463x894…).
   Constrain về tối đa width của <p> content-box, giữ aspect ratio. */
.cs-content__body p img {
    max-width: 100%;
    height: auto;
}

/* WP alignment classes — editor-inserted images */
.cs-content__body .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cs-content__body .alignleft {
    float: left;
    margin: 0 var(--var-24) var(--var-16) 0;
    max-width: 50%;
}

.cs-content__body .alignright {
    float: right;
    margin: 0 0 var(--var-16) var(--var-24);
    max-width: 50%;
}

.cs-content__body .alignnone {
    display: block;
}

/* ---------- Aside (Key Takeaways callout) ---------- */
.cs-content__body>aside {
    background: var(--color-3rd-bg);
    padding: var(--var-24) var(--var-40) var(--var-40);
    display: flex;
    flex-direction: column;
}

/* Headings inside <aside> Key Takeaways — direct mapping (aside có sẵn 40px padding-x → h padding-x = 0) */
.cs-content__body>aside> :is(h1, h2, h3, h4, h5, h6) {
    padding: var(--var-16) 0;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.cs-content__body>aside>h1 {
    font-size: var(--fs-h1);
    /* 58px */
}

.cs-content__body>aside>h2 {
    font-size: var(--fs-h2);
    /* 48px */
}

.cs-content__body>aside>h3 {
    font-size: var(--fs-h3);
    /* 40px */
}

.cs-content__body>aside>h4 {
    font-size: var(--fs-h4);
    /* 32px — phù hợp cho Key Takeaways title */
}

.cs-content__body>aside>h5 {
    font-size: var(--fs-h5);
    /* 25px */
}

.cs-content__body>aside>h6 {
    font-size: var(--fs-h6);
    /* 20px */
}

.cs-content__body>aside>p {
    padding: 0;
    margin: 0 0 var(--var-16);
    font-weight: 400;
    font-size: var(--fs-label-lg);
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

.cs-content__body>aside>p:last-child {
    margin-bottom: 0;
}

/* ---------- Links inline ---------- */
.cs-content__body a {
    color: var(--color-3rd-btn-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline;
}

.cs-content__body a:hover {
    opacity: 0.8;
}

/* ---------- Inline code ---------- */
.cs-content__body code {
    padding: 2px var(--var-6);
    background: var(--color-1st-bg);
    border-radius: var(--var-4);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    color: var(--color-1st-fg);
}

/* ============================================================
   Sidebar phải — Promo (page chrome — giữ class)
   ============================================================ */
.cs-content__promo {
    width: 300px;
    /* layout-specific */
    position: sticky;
    top: 120px;
}

.cs-content__promo-link {
    display: block;
    width: 100%;
}

.cs-content__promo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1000 / 1480;
    object-fit: cover;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .cs-content__inner {
        grid-template-columns: 220px minmax(0, 1fr) 260px;
        gap: var(--var-48);
    }

    .cs-content__meta,
    .cs-content__promo {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .cs-content {
        padding: var(--space-section-sm) var(--var-24);
    }

    .cs-content__inner {
        grid-template-columns: 1fr;
        gap: var(--var-48);
    }

    .cs-content__meta,
    .cs-content__promo {
        position: static;
        width: 100%;
        max-width: 100%;
    }

    .cs-content__body {
        max-width: 100%;
    }

    .cs-content__promo img {
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .cs-content {
        padding: 72px var(--var-20);
        /* 72px outside --var-* scale */
    }

    /* Mobile: ẩn promo sidebar — chỉ hiện meta + body */
    .cs-content__promo {
        display: none;
    }

    /* Mobile: meta list gap nhỏ hơn + Book Demo button inline (auto width) */
    .cs-meta__list {
        gap: var(--var-20);
    }

    .cs-content__body> :is(h1, h2, h3, h4, h5, h6),
    .cs-content__body>p,
    .cs-content__body>details>summary,
    .cs-content__body>details> :is(h1, h2, h3, h4, h5, h6),
    .cs-content__body>aside {
        padding-left: var(--var-20);
        padding-right: var(--var-20);
    }

    .cs-content__body>details>ol,
    .cs-content__body>details>ul,
    .cs-content__body>ol,
    .cs-content__body>ul {
        padding-left: calc(var(--var-20) + var(--var-24));
        padding-right: var(--var-20);
    }

    .cs-content__table-scroll,
    .cs-content__body>figure:has(table) {
        margin-left: var(--var-20);
        margin-right: var(--var-20);
        max-width: calc(100% - var(--var-40));
    }

    /* Blockquote padding đều 4 phía 20px theo Figma mobile */
    .cs-content__body>blockquote {
        padding: var(--var-20);
    }

    .cs-content__body>blockquote::before {
        /* gradient bar vẫn ở cạnh trái, đè lên padding-left */
        left: 0;
    }

    .cs-content__body>figure>img,
    .cs-content__body>img {
        height: 280px;
    }
}