/* ==========================================================================
   VPPA PICKLEBALL — Tin tức / Blog
   Dùng chung bộ token của style.css nên tự đổi theo nền sáng / nền đen.
   ========================================================================== */

/* ---------- Bài nổi bật ---------- */
.post-feat{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;
  padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg);
  background:var(--panel-solid); border:1px solid var(--hairline-soft); box-shadow:var(--sh-1);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.post-feat:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.post-feat__media{ aspect-ratio:16/11; border-radius:var(--r); overflow:hidden; }
.post-feat__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.post-feat:hover .post-feat__media img{ transform:scale(1.05); }
.post-feat h2{ font-size:clamp(1.5rem,2.4vw,2.2rem); margin-bottom:4px; }
.post-feat .lead{ margin-top:16px; }
@media(max-width:860px){ .post-feat{ grid-template-columns:1fr; } }

/* ---------- Bộ lọc chủ đề ---------- */
.post-filter{ margin-top:clamp(30px,3.6vw,52px); }

/* ---------- Thẻ bài viết ---------- */
.post-grid{ align-items:stretch; }
.post-card{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--panel-solid); border:1px solid var(--hairline-soft);
  border-radius:var(--r); box-shadow:var(--sh-1);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--hairline); }
.post-card__media{ display:block; border-radius:var(--r) var(--r) 0 0; }
.post-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(20px,2vw,26px); }
.post-card h3{ font-size:1.14rem; line-height:1.35; margin:10px 0 10px; }
.post-card h3 a{ transition:color .25s; }
.post-card h3 a:hover{ color:var(--accent); }
.post-card p{ font-size:.92rem; color:var(--tx-2); flex:1; margin-bottom:16px; }
.post-card[hidden]{ display:none; }

.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.76rem; font-weight:600; color:var(--tx-3);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.post-meta--big{ font-size:.84rem; margin-top:20px; }

/* ---------- Phân trang ---------- */
.pager{ display:flex; justify-content:center; gap:9px; margin-top:clamp(36px,4vw,58px); }
.pager a{
  min-width:44px; height:44px; display:grid; place-items:center; padding:0 14px;
  border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--panel-solid);
  font-weight:700; font-size:.9rem; box-shadow:var(--sh-1);
  font-variant-numeric:tabular-nums; transition:all .3s var(--ease);
}
.pager a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.pager a.on{ background:linear-gradient(180deg,#F2452F,var(--red)); border-color:transparent; color:#fff; }

/* ---------- Trang bài viết ---------- */
.post-hero{ padding-block:clamp(42px,5vw,80px) clamp(24px,2.6vw,36px); background:var(--ground); }
.post-hero h1{
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.16; max-width:22ch;
  padding-block:.06em; /* chừa chỗ cho dấu tiếng Việt trên chữ hoa */
}
.post-hero .crumbs{ color:var(--tx-3); }
.post-hero .crumbs a:hover{ color:var(--accent); }
.post-hero .crumbs span{ color:var(--accent); }

.post-cover{ margin:0 0 clamp(26px,3vw,42px); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.post-lead{
  font-size:clamp(1.06rem,1.3vw,1.22rem); line-height:1.75; color:var(--tx-2);
  font-weight:500; padding-left:20px; border-left:3px solid var(--accent);
  margin-bottom:clamp(26px,3vw,40px);
}

/* Thân bài — nhịp đọc thoáng, đủ tương phản */
.post-body{ font-size:1.06rem; line-height:1.85; color:var(--tx); }
.post-body > *:first-child{ margin-top:0; }
.post-body p{ margin:0 0 1.3em; }
.post-body h2{
  font-size:clamp(1.45rem,2.2vw,1.95rem); margin:1.9em 0 .6em;
  padding-block:.06em; scroll-margin-top:110px;
}
.post-body h3{ font-size:clamp(1.16rem,1.6vw,1.4rem); margin:1.6em 0 .5em; scroll-margin-top:110px; }
.post-body h4{ font-size:1.06rem; margin:1.4em 0 .45em; }
.post-body ul, .post-body ol{ margin:0 0 1.3em; padding-left:0; list-style:none; }
.post-body ol{ counter-reset:pb; }
.post-body li{ position:relative; padding-left:30px; margin-bottom:.62em; color:var(--tx-2); }
.post-body ul > li::before{
  content:""; position:absolute; left:8px; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--accent);
}
.post-body ol > li::before{
  counter-increment:pb; content:counter(pb) "."; position:absolute; left:0; top:0;
  font-family:var(--f-display); font-weight:800; color:var(--accent); font-size:.95em;
}
.post-body li > ul, .post-body li > ol{ margin-top:.5em; margin-bottom:0; }
.post-body blockquote{
  margin:1.7em 0; padding:22px 26px; border-radius:var(--r);
  background:var(--accent-bg); border-left:3px solid var(--accent);
  font-size:1.05rem; line-height:1.75; color:var(--tx);
}
.post-body blockquote p:last-child{ margin-bottom:0; }
.post-body img{ width:100%; height:auto; border-radius:var(--r); margin:1.6em 0; box-shadow:var(--sh-1); }
.post-body figure{ margin:1.7em 0; }
.post-body figure img{ margin:0; }
.post-body figcaption{ margin-top:11px; font-size:.85rem; color:var(--tx-3); text-align:center; line-height:1.55; }
.post-body a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-body a:hover{ text-decoration-thickness:2px; }
.post-body strong, .post-body b{ font-weight:700; color:var(--tx); }
.post-body hr{ border:0; border-top:1px solid var(--hairline); margin:2.4em 0; }
.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--paper-2); padding:2px 7px; border-radius:6px;
}
.post-body pre{ background:var(--ink-900); color:#E7E9ED; padding:20px 22px; border-radius:var(--r); overflow-x:auto; }
.post-body pre code{ background:none; padding:0; color:inherit; }
.post-body table{
  width:100%; border-collapse:collapse; margin:1.7em 0; font-size:.95rem;
  border:1px solid var(--hairline-soft); border-radius:var(--r); overflow:hidden;
}
.post-body th, .post-body td{ padding:13px 16px; border-bottom:1px solid var(--hairline-soft); text-align:left; }
.post-body th{ background:var(--paper-2); font-weight:700; font-size:.86rem; }
.post-body tr:last-child td{ border-bottom:0; }

.post-tags{ display:flex; flex-wrap:wrap; gap:9px; margin:clamp(30px,3.4vw,46px) 0 0; }
.post-share{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:clamp(26px,3vw,38px) 0 clamp(46px,5vw,76px);
  padding-top:24px; border-top:1px solid var(--hairline-soft);
}
.post-share > span{ font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }

@media(max-width:560px){
  .post-body{ font-size:1.02rem; line-height:1.8; }
  .post-lead{ padding-left:16px; }
}