.article {
    padding-block: var(--vjol-space-10);
    /* fail-safe: chống content (ảnh, table, embed) tràn ra ngoài grid cột trái */
    overflow-x: clip;
}

.article__header { margin-bottom: var(--vjol-space-8); }
.article__title { margin: 0 0 var(--vjol-space-4); }

/* ---------- 2-column layout (desktop) ---------- */

.article__layout {
    display: block;
}

@media (min-width: 1024px) {
    .article__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: var(--vjol-space-10);
        /* Không align-items: start — để grid items stretch full row height, sticky sidebar mới work */
    }
}

.article__content { min-width: 0; }

.article__sidebar { display: none; }
@media (min-width: 1024px) {
    .article__sidebar { display: block; }
}

.article__body {
    min-width: 0;
    font-size: var(--vjol-fs-lg);
    line-height: var(--vjol-lh-loose);
    overflow-wrap: break-word;
}
.article__body h2 { margin-block: var(--vjol-space-10) var(--vjol-space-4); }
.article__body h3 { margin-block: var(--vjol-space-8) var(--vjol-space-3); }

/* Media: img/video/iframe/embed luôn co theo cột */
.article__body img,
.article__body picture,
.article__body video,
.article__body iframe,
.article__body embed,
.article__body object {
    max-width: 100%;
    height: auto;
    display: block;
    margin-block: var(--vjol-space-6);
    border-radius: var(--vjol-radius-md);
}

/* Figure: bỏ margin-inline mặc định của user agent (40px), giới hạn width */
.article__body figure {
    margin: var(--vjol-space-6) 0;
    max-width: 100%;
}
.article__body figure img { margin-block: 0; }
.article__body figcaption {
    font-size: var(--vjol-fs-sm);
    color: var(--vjol-color-text-muted);
    text-align: center;
    margin-top: var(--vjol-space-2);
}

/* WP align classes — neutralize trong layout 2 cột (alignfull/wide không vượt cột) */
.article__body .alignfull,
.article__body .alignwide {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
}
.article__body .aligncenter {
    margin-inline: auto;
    display: block;
}
.article__body .alignleft  { margin-inline-end: var(--vjol-space-6); }
.article__body .alignright { margin-inline-start: var(--vjol-space-6); }

/* Table: gọn, có header bg, striped, hover */
.article__body table {
    width: 100%;
    max-width: 100%;
    margin: var(--vjol-space-5) 0;
    border-collapse: collapse;
    font-size: var(--vjol-fs-sm);
    line-height: var(--vjol-lh-snug);
    background: var(--vjol-color-surface, #fff);
    border: 1px solid var(--vjol-color-border);
    border-radius: var(--vjol-radius-md);
    overflow: hidden;
}
.article__body table th,
.article__body table td {
    padding: var(--vjol-space-3) var(--vjol-space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--vjol-color-border);
}
.article__body table thead th {
    background: var(--vjol-color-surface-2, #f6f7f8);
    font-weight: var(--vjol-fw-semibold);
    color: var(--vjol-color-text);
    border-bottom: 2px solid var(--vjol-color-border);
}
/* Nếu HTML không có thead, hàng đầu tiên cũng được tô đậm như header */
.article__body table tr:first-child th {
    background: var(--vjol-color-surface-2, #f6f7f8);
    font-weight: var(--vjol-fw-semibold);
}
.article__body table tbody tr:nth-child(even) td {
    background: var(--vjol-color-surface-2, #fafbfc);
}
.article__body table tbody tr:hover td {
    background: var(--vjol-color-primary-soft, #eef3ff);
}
.article__body table tbody tr:last-child td {
    border-bottom: 0;
}

/* Mobile: scroll ngang khi table rộng hơn cột nội dung */
@media (max-width: 640px) {
    .article__body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Code block: scroll ngang nội bộ */
.article__body pre {
    max-width: 100%;
    overflow-x: auto;
}

.article__pagination { margin-block: var(--vjol-space-6); }

.article__footer {
    margin-top: var(--vjol-space-8);
    padding-top: var(--vjol-space-6);
    border-top: 1px solid var(--vjol-color-border);
}

.article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vjol-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.article__tags a {
    display: inline-block;
    padding: var(--vjol-space-1) var(--vjol-space-3);
    background: var(--vjol-color-surface-2);
    color: var(--vjol-color-text);
    border-radius: var(--vjol-radius-full);
    text-decoration: none;
    font-size: var(--vjol-fs-sm);
}
.article__tags a:hover { background: var(--vjol-color-primary-soft); color: var(--vjol-color-primary); }

/* Meta */
.post-meta {
    color: var(--vjol-color-text-muted);
    font-size: var(--vjol-fs-sm);
}
.post-meta a { color: inherit; text-decoration: none; }
.post-meta a:hover { color: var(--vjol-color-primary); }