/* ============================================================
   "ร่างกายดี 7 ด้าน" topic pages — series strip + prev/next
   ============================================================ */
.seven-strip{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;
}
.seven-strip a{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 6px;
  border:1px solid var(--line); border-radius:99px; background:var(--white);
  font-size:.88rem; color:var(--ink); transition:border-color .2s, background .2s;
}
.seven-strip a:hover{ border-color:#C98A45; color:var(--ink); }
.seven-strip a b{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#FBF3E6; border:2px solid #C98A45; color:#6A4320; font-size:.8rem; font-weight:700;
}
.seven-strip a[aria-current="page"]{ background:#C98A45; border-color:#C98A45; color:#fff; font-weight:600; }
.seven-strip a[aria-current="page"] b{ background:#fff; }

.seven-badge{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 .6rem;
  font-family:var(--f-brand); color:#9C6A35; font-size:1rem;
}
.seven-badge b{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#FBF3E6; border:3px solid #C98A45; color:#6A4320; font-size:1.15rem;
}

.seven-temp-cover{
  border-radius:var(--radius-lg); overflow:hidden; margin:0 0 8px;
  background:
    radial-gradient(60% 90% at 50% 0%, #FFF4E3 0%, #F6E3C6 55%, #EACB9C 100%);
  padding:44px 24px; text-align:center; color:#6A4320;
}
.seven-temp-cover .big{ font-family:var(--f-display); font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; margin:0 0 8px; }
.seven-temp-cover p{ margin:0; font-size:1rem; }

.seven-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:42px 0 12px;
}
.seven-pager a{
  display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--white); color:var(--ink); transition:border-color .2s, transform .2s;
}
.seven-pager a:hover{ border-color:#C98A45; transform:translateY(-2px); color:var(--ink); }
.seven-pager small{ display:block; color:#7A6A58; font-size:.82rem; margin-bottom:2px; }
.seven-pager strong{ font-family:var(--f-display); font-size:1.12rem; }
.seven-pager .next{ text-align:right; }
.seven-back{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:8px 0 60px;
}
@media (max-width:560px){
  .seven-strip a{ font-size:.8rem; padding:4px 10px 4px 4px; }
  .seven-pager{ grid-template-columns:1fr; }
  .seven-pager .next{ text-align:left; }
}

/* home card inside the prev/next row */
.seven-pager.three{ grid-template-columns:1fr auto 1fr; }
.seven-pager .home{
  text-align:center; background:#FBF3E6; border-color:#E6CFAE; min-width:140px;
}
.seven-pager .home small{ color:#9C6A35; }
.seven-pager .home strong{ color:#6A4320; }
.seven-pager .home:hover{ background:#F4E3C8; border-color:#C98A45; }
.seven-pager:not(.three) .home{ text-align:left; }
@media (max-width:560px){
  .seven-pager.three{ grid-template-columns:1fr; }
  .seven-pager .home, .seven-pager:not(.three) .home{ text-align:left; }
}

/* TikTok videos on topic pages */
.seven-videos{ margin:40px 0 8px; }
.seven-videos .sv-note{ color:#7A6A58; font-size:.92rem; margin-top:-.4rem; }
.sv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; margin-top:14px; }
.sv-card{ margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.sv-frame{ position:relative; aspect-ratio:9/16; background:#111; }
.sv-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sv-card figcaption{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; font-size:.92rem; }
.sv-card figcaption strong{ color:var(--ink); line-height:1.4; }
.sv-card figcaption a{ font-size:.85rem; }
@media (min-width:900px){ .sv-grid{ grid-template-columns:repeat(auto-fill, minmax(280px, 320px)); } }
.sv-card.wide{ grid-column:1 / -1; max-width:720px; }
.sv-card.wide .sv-frame{ aspect-ratio:16/9; }
.sv-caveat{ font-size:.82rem; color:#8A5A1E; background:#FBF3E6; border-left:3px solid #C98A45; padding:6px 9px; border-radius:4px; }
.sv-card.fb{ grid-column:1 / -1; max-width:520px; }
.sv-frame.fb{ aspect-ratio:auto; height:640px; background:#fff; }