/* Editorial blog/news layer. Loaded only on post, archive and post-search routes. */
.blog-grid{align-items:stretch}
.article-card{position:relative;min-width:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.article-card:hover{border-color:rgba(200,164,109,.75);box-shadow:0 14px 32px rgba(25,57,42,.09);transform:translateY(-2px)}
.article-card-image{position:relative;display:block}
.article-card-image img{transition:transform .35s ease}
.article-card:hover .article-card-image img{transform:scale(1.025)}
.article-card-image .empty-state{display:grid;place-items:center;height:100%;min-height:180px;color:var(--champagne);font:2rem Georgia,serif}
.article-card-body{min-width:0}
.article-card h3{max-width:34ch}
.article-card h3 a{color:var(--forest);text-decoration:none}
.article-card p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.65}
.article-card-meta{align-items:center;border-top:1px solid rgba(25,57,42,.09)}
.article-card-date,.article-card-reading{white-space:nowrap}
.article-card-reading{color:#829087}
.article-readmore{display:inline-flex;align-items:center;gap:5px;color:var(--forest);font-size:.74rem;font-weight:600;text-decoration:none;white-space:nowrap}
.article-readmore span{color:var(--champagne);font-size:1rem;line-height:1}
.article-card-featured-label{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:99px;color:var(--forest);background:var(--mint);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.article-card.is-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);min-height:330px}
.article-card.is-featured .article-card-image{height:100%;min-height:330px;aspect-ratio:auto}
.article-card.is-featured .article-card-body{justify-content:center;padding:clamp(24px,4vw,48px)}
.article-card.is-featured .article-card-body h3{max-width:20ch;font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.2}
.article-card.is-featured .article-card-body p{max-width:48ch;margin-top:14px;font-size:.94rem;-webkit-line-clamp:4}
.article-card.is-featured .article-card-meta{margin-top:25px}
.article-card.is-featured .article-card-image .empty-state{min-height:330px}
.blog-index-main .blog-grid>.article-card:first-child,.blog-archive-main .blog-grid>.article-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);min-height:330px}
.blog-index-main .blog-grid>.article-card:first-child:before,.blog-archive-main .blog-grid>.article-card:first-child:before{position:absolute;top:14px;left:14px;z-index:2;padding:5px 9px;border-radius:99px;color:var(--forest);background:var(--mint);content:"Bài nổi bật";font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.blog-index-main .blog-grid>.article-card:first-child .article-card-image,.blog-archive-main .blog-grid>.article-card:first-child .article-card-image{height:100%;min-height:330px;aspect-ratio:auto}
.blog-index-main .blog-grid>.article-card:first-child .article-card-body,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body{justify-content:center;padding:clamp(24px,4vw,48px)}
.blog-index-main .blog-grid>.article-card:first-child .article-card-body h3,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body h3{max-width:20ch;font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.2}
.blog-index-main .blog-grid>.article-card:first-child .article-card-body p,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body p{max-width:48ch;margin-top:14px;font-size:.94rem;-webkit-line-clamp:4}
.blog-index-main .blog-grid>.article-card:first-child .article-card-meta,.blog-archive-main .blog-grid>.article-card:first-child .article-card-meta{margin-top:25px}
.blog-index-main .blog-grid>.article-card:first-child .article-card-image .empty-state,.blog-archive-main .blog-grid>.article-card:first-child .article-card-image .empty-state{min-height:330px}
.article-filter{align-items:center}
.article-filter .filter-chip{transition:color .2s ease,background .2s ease,border-color .2s ease}
.article-filter .filter-chip:hover{border-color:var(--champagne);color:var(--forest);background:#fff}
.blog-grid + .navigation.pagination,.blog-grid + nav.navigation.pagination{margin-top:34px}
.navigation.pagination .nav-links{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.navigation.pagination .page-numbers{display:inline-grid;place-items:center;min-width:35px;height:35px;padding:0 10px;border:1px solid var(--line);border-radius:99px;color:var(--forest);font-size:.78rem;text-decoration:none;background:#fff}
.navigation.pagination .page-numbers.current,.navigation.pagination .page-numbers:hover{border-color:var(--forest);color:#fff;background:var(--forest)}
.article-page .article-header{position:relative}
.article-page .article-header h1{max-width:22ch;margin-right:auto;margin-left:auto;text-wrap:balance}
.article-page .article-meta{align-items:center}
.article-page .article-meta .article-reading-time{color:var(--forest);font-weight:600}
.article-content{font-size:1.04rem}
.article-content>p:first-child{margin-top:0;font-size:1.12rem;color:var(--forest)}
.article-content h2,.article-content h3{scroll-margin-top:90px;text-wrap:balance}
.article-content h3{margin-top:28px;color:var(--forest);font-size:1.35rem}
.article-content img{height:auto;max-width:100%;border-radius:14px}
.article-content figure{margin:30px 0}
.article-content figcaption{margin-top:9px;color:var(--muted);font-size:.78rem;text-align:center}
.article-content blockquote{margin:30px 0;padding:22px 25px;border-left:3px solid var(--champagne);border-radius:0 12px 12px 0;color:var(--forest);background:var(--warm);font:1.17rem/1.7 Georgia,serif}
.article-content a{color:var(--forest);text-decoration:underline;text-decoration-color:rgba(200,164,109,.7);text-underline-offset:3px}
.article-content a:hover{color:#8c6a37}
.article-content table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.article-content th,.article-content td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.article-content th{color:var(--forest);background:var(--mint)}
.article-related-card .article-card-body{padding-top:17px}

/* Keep article content aligned to the same site container as the page shell.
 * The previous 960/760px limits made long-form pages look visibly pinched. */
.blog-index-main .blog-grid>.article-card:first-child:before,.blog-archive-main .blog-grid>.article-card:first-child:before{display:none}
.article-page .article-header p{max-width:700px}
.article-page .article-meta{flex-wrap:wrap;row-gap:6px}
.article-page .article-content{width:100%;max-width:100%;margin:52px auto 0;font-size:1.05rem;line-height:1.85}
.article-page .article-content> :where(p,h2,h3,h4,ul,ol,blockquote,table,pre,dl){max-width:100%;margin-right:auto;margin-left:auto}
.article-page .article-content>p{margin-top:20px;color:#4f5b52;font-size:1.06rem;line-height:1.9}
.article-page .article-content>p:first-child{margin-top:0;font-size:1.15rem;line-height:1.8}
.article-page .article-content>h2{margin-top:46px;font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.25}
.article-page .article-content>h3{margin-top:34px;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.35}
.article-page .article-content>h4{margin-top:27px;color:var(--forest);font-size:1.12rem;line-height:1.45}
.article-page .article-content>ul,.article-page .article-content>ol{margin-top:20px;padding-left:24px;color:#4f5b52}
.article-page .article-content>figure,.article-page .article-content>.wp-block-image,.article-page .article-content>.wp-block-gallery,.article-page .article-content>.wp-block-embed{width:100%;max-width:100%;margin:36px auto}
.article-page .article-content>figure img,.article-page .article-content>.wp-block-image img{width:auto;max-width:100%;height:auto;margin-right:auto;margin-left:auto}
.article-page .article-content>.alignwide{max-width:100%}
.article-page .article-content>.alignfull{width:100%;max-width:none}
.article-page .article-content a:focus-visible,.article-card a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:3px}
.article-card-featured-label{margin-bottom:8px}
.article-related .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:820px){
  .article-page .article-content{max-width:100%;margin-top:38px;font-size:1rem}
  .article-page .article-content> :where(p,h2,h3,h4,ul,ol,blockquote,table,pre,dl){max-width:100%}
  .article-page .article-content>figure,.article-page .article-content>.wp-block-image,.article-page .article-content>.wp-block-gallery,.article-page .article-content>.wp-block-embed{max-width:100%;margin-top:29px;margin-bottom:29px}
  .article-related .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:590px){
  .article-page .article-content>p{font-size:1rem;line-height:1.8}
  .article-page .article-content>p:first-child{font-size:1.05rem}
  .article-page .article-content>h2{margin-top:35px;font-size:1.72rem}
  .article-page .article-content>h3{margin-top:27px;font-size:1.27rem}
  .article-related .blog-grid{grid-template-columns:1fr}
}

@media(max-width:820px){
  .article-card.is-featured{grid-template-columns:1fr;min-height:0}
  .article-card.is-featured .article-card-image{height:auto;min-height:0;aspect-ratio:1.65}
  .article-card.is-featured .article-card-body{padding:23px}
  .article-card.is-featured .article-card-image .empty-state{min-height:220px}
  .blog-index-main .blog-grid>.article-card:first-child,.blog-archive-main .blog-grid>.article-card:first-child{grid-template-columns:1fr;min-height:0}
  .blog-index-main .blog-grid>.article-card:first-child .article-card-image,.blog-archive-main .blog-grid>.article-card:first-child .article-card-image{height:auto;min-height:0;aspect-ratio:1.65}
  .blog-index-main .blog-grid>.article-card:first-child .article-card-body,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body{padding:23px}
  .blog-index-main .blog-grid>.article-card:first-child .article-card-image .empty-state,.blog-archive-main .blog-grid>.article-card:first-child .article-card-image .empty-state{min-height:220px}
}
@media(max-width:590px){
  .article-card:hover{box-shadow:none;transform:none}
  .article-card.is-featured .article-card-body h3{font-size:1.5rem}
  .article-card.is-featured .article-card-body p{-webkit-line-clamp:3}
  .blog-index-main .blog-grid>.article-card:first-child .article-card-body h3,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body h3{font-size:1.5rem}
  .blog-index-main .blog-grid>.article-card:first-child .article-card-body p,.blog-archive-main .blog-grid>.article-card:first-child .article-card-body p{-webkit-line-clamp:3}
  .article-card-meta{gap:7px;font-size:.7rem}
  .article-readmore{font-size:.72rem}
  .article-content>p:first-child{font-size:1.03rem}
  .article-content blockquote{padding:18px 19px;font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){.article-card,.article-card-image img{transition:none}.article-card:hover .article-card-image img{transform:none}}
