/* VnExpress TOPBAR + MENU + ARTICLE DETAIL */
:root{
  --vne-text:#222;
  --vne-muted:#6b7280;
  --vne-border:#e5e7eb;
  --vne-bg:#f5f7fb;
  --vne-card:#fff;
  --vne-accent:#8d5fd3;
  --vne-shadow:0 8px 24px rgba(17,24,39,.05);
}

body{
  background:var(--vne-bg);
  color:var(--vne-text);
}

/* topbar and header */
.site-topbar,
.topbar,
.header-top,
.top-strip{
  background:#fafbfc !important;
  border-bottom:1px solid var(--vne-border) !important;
  color:#4b5563 !important;
  font-size:12px !important;
  line-height:1.4;
}
.site-topbar a,
.topbar a,
.header-top a,
.top-strip a{
  color:#4b5563 !important;
}

.site-header,
.header-wrap,
.header-main{
  background:#fff !important;
  box-shadow:none !important;
  border-bottom:1px solid var(--vne-border);
}

/* menu */
.navbar,
.main-nav,
.site-nav,
.menu-bar,
.nav-wrap{
  background:#fff !important;
  border-bottom:1px solid var(--vne-border) !important;
  box-shadow:none !important;
}
.navbar a,
.main-nav a,
.site-nav a,
.menu-bar a,
.nav-wrap a{
  color:#1f2937 !important;
  font-family:Inter, Arial, sans-serif;
  font-size:14px !important;
  font-weight:500 !important;
}
.navbar a:hover,
.main-nav a:hover,
.site-nav a:hover,
.menu-bar a:hover,
.nav-wrap a:hover{
  color:var(--vne-accent) !important;
}
.navbar .active > a,
.main-nav .active > a,
.site-nav .active > a,
.menu-bar .active > a,
.nav-wrap .active > a{
  color:var(--vne-accent) !important;
}

/* article page */
.article-page,
.post-page,
.news-detail,
.article-detail,
.detail-page{
  max-width:1240px;
  margin:0 auto;
}
.article-page .container,
.post-page .container,
.news-detail .container,
.article-detail .container,
.detail-page .container{
  max-width:1240px;
}

.article-content,
.post-content,
.entry-content,
.news-content,
.detail-content{
  background:#fff;
  border:1px solid var(--vne-border);
  border-radius:12px;
  box-shadow:var(--vne-shadow);
  padding:24px 26px;
}

.article-title,
.post-title-single,
.entry-title,
.news-title-single,
.detail-title,
h1.article-title,
h1.post-title-single,
h1.entry-title{
  font-family:"Noto Serif", Georgia, serif !important;
  font-size:clamp(28px, 2.3vw, 42px) !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  color:#111827 !important;
  letter-spacing:-.02em;
  margin-bottom:14px !important;
}

.article-meta,
.post-meta-single,
.entry-meta,
.news-meta-single,
.detail-meta{
  color:var(--vne-muted) !important;
  font-size:13px !important;
  border-bottom:1px solid var(--vne-border);
  padding-bottom:12px;
  margin-bottom:18px !important;
}

.article-sapo,
.post-sapo,
.entry-sapo,
.news-sapo,
.detail-sapo,
.article-excerpt{
  font-size:18px !important;
  line-height:1.75 !important;
  color:#374151 !important;
  font-weight:500;
  margin-bottom:18px !important;
}

.article-content p,
.post-content p,
.entry-content p,
.news-content p,
.detail-content p{
  font-family:Inter, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:1.9 !important;
  color:#111827 !important;
  margin:0 0 1.15em !important;
}

.article-content h2,
.post-content h2,
.entry-content h2,
.news-content h2,
.detail-content h2{
  font-family:"Noto Serif", Georgia, serif !important;
  font-size:clamp(22px,1.5vw,28px) !important;
  line-height:1.45 !important;
  margin:1.4em 0 .7em !important;
  color:#111827 !important;
}

.article-content h3,
.post-content h3,
.entry-content h3,
.news-content h3,
.detail-content h3{
  font-family:"Noto Serif", Georgia, serif !important;
  font-size:clamp(20px,1.3vw,24px) !important;
  line-height:1.5 !important;
  margin:1.2em 0 .65em !important;
}

.article-content blockquote,
.post-content blockquote,
.entry-content blockquote,
.news-content blockquote,
.detail-content blockquote{
  border-left:4px solid var(--vne-accent);
  margin:1.25rem 0;
  padding:.2rem 0 .2rem 1rem;
  color:#374151;
  background:#faf8ff;
}

.article-content img,
.post-content img,
.entry-content img,
.news-content img,
.detail-content img{
  border-radius:8px;
  max-width:100%;
  height:auto;
}
.article-content figure,
.post-content figure,
.entry-content figure,
.news-content figure,
.detail-content figure{
  margin:1.25rem 0;
}
.article-content figcaption,
.post-content figcaption,
.entry-content figcaption,
.news-content figcaption,
.detail-content figcaption{
  text-align:center;
  color:var(--vne-muted);
  font-size:13px;
  margin-top:8px;
}

.article-sidebar,
.post-sidebar,
.detail-sidebar,
.news-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-sidebar .widget,
.post-sidebar .widget,
.detail-sidebar .widget,
.news-sidebar .widget,
.related-posts,
.same-category,
.detail-box{
  background:#fff;
  border:1px solid var(--vne-border);
  border-radius:12px;
  box-shadow:var(--vne-shadow);
  padding:14px;
}

.related-posts .title,
.same-category .title,
.article-sidebar .widget-title,
.post-sidebar .widget-title,
.detail-sidebar .widget-title,
.news-sidebar .widget-title{
  font-family:Inter, Arial, sans-serif;
  font-size:15px !important;
  font-weight:700 !important;
  margin-bottom:10px;
  color:#111827;
}

.related-posts a,
.same-category a,
.article-sidebar a,
.post-sidebar a,
.detail-sidebar a,
.news-sidebar a{
  color:#111827;
  text-decoration:none;
}
.related-posts a:hover,
.same-category a:hover,
.article-sidebar a:hover,
.post-sidebar a:hover,
.detail-sidebar a:hover,
.news-sidebar a:hover{
  color:var(--vne-accent);
}

/* comments/share row */
.share-row,
.post-share,
.detail-share,
.article-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px;
  margin-top:18px;
  border-top:1px solid var(--vne-border);
}
.share-row a,
.post-share a,
.detail-share a,
.article-tools a,
.share-row button,
.post-share button,
.detail-share button,
.article-tools button{
  border:1px solid var(--vne-border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
}

/* article list cards become more news-like */
.article-list .card,
.category-page .card,
.search-page .card{
  background:#fff;
  border:1px solid var(--vne-border);
  border-radius:12px;
  box-shadow:var(--vne-shadow);
}

/* mobile */
@media (max-width: 991px){
  .article-content,
  .post-content,
  .entry-content,
  .news-content,
  .detail-content{
    padding:18px 16px;
    border-radius:10px;
  }
  .article-title,
  .post-title-single,
  .entry-title,
  .news-title-single,
  .detail-title{
    font-size:clamp(24px, 5.8vw, 32px) !important;
  }
  .article-sapo,
  .post-sapo,
  .entry-sapo,
  .news-sapo,
  .detail-sapo,
  .article-excerpt{
    font-size:16px !important;
  }
  .article-content p,
  .post-content p,
  .entry-content p,
  .news-content p,
  .detail-content p{
    font-size:17px !important;
    line-height:1.85 !important;
  }
}