h1 {font-size: 36px; font-weight: 800; margin: 0 0 24px;line-height: 1.2;}
/* Lightweight layout helpers to complement existing site styles */
.article-wrap { padding: 48px 0; }
.content-layout { display: flex; gap: 32px; align-items: flex-start; }
.content-left { flex: 0 0 75%; max-width: 75%; }
.content-right { flex: 0 0 25%; max-width: 25%; }

/* Article content */
.article-header { margin-bottom: 16px; }
.article-title { font-size: 36px; line-height: 1.2; font-weight: 800; margin: 0 0 12px; }
.article-meta { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
.article-cover { width: 100%; border-radius: 12px; margin: 16px 0 24px; }
.article-body { font-size: 18px; line-height: 1.8; color: #111827; }
.article-body h2 { font-size: 24px; margin: 28px 0 12px; }
.article-body p { margin: 0 0 16px; }
.article-body ul { padding-left: 20px; margin: 0 0 16px; }

/* Sidebar */
.sidebar-section { background: #ffffff; border: 1px solid #eef2f7; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.sidebar-title { font-weight: 700; margin: 0 0 12px; font-size: 16px; color: #111827; }
.popular-item { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.popular-item:hover { background: #f8fafc; }
.popular-top { display: flex; align-items: center; gap: 12px; }
.popular-top .popular-title { flex: 1; }
.popular-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.popular-text { display: flex; flex-direction: column; }
.popular-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: #0f172a; }
.popular-perex { font-size: 13px; line-height: 1.4; color: #4b5563; margin: 0; }

.sidebar-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); color: #fff; }
.sidebar-cta .cta-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.sidebar-cta .cta-text { font-size: 14px; opacity: 0.95; margin: 0 0 12px; }
.sidebar-cta .button { display: inline-flex; align-items: center; }

.content-left img {max-width: 100%; height: auto; border-radius: 12px; border: 1px solid #ddd;}

/* Responsive */
@media (max-width: 1024px) {
    .content-left { flex-basis: 70%; max-width: 70%; }
    .content-right { flex-basis: 30%; max-width: 30%; }
}
@media (max-width: 840px) {
    .content-layout { flex-direction: column; }
    .content-left, .content-right { flex-basis: 100%; max-width: 100%; }
}
/* Desktop-only sticky sidebar */
@media (min-width: 1025px) {
    .content-right { position: sticky; top: 125px; align-self: flex-start; max-height: calc(100vh - 125px); overflow: auto; }
    /* Ensure strict 9/3 layout on desktop */
    .content-left { flex-basis: 75%; max-width: 75%; }
    .content-right { flex-basis: 25%; max-width: 25%; }
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    text-align: center;
}