/* Site Visit Stats — การแสดงผลหน้าเว็บ ทุกสีอ้างผ่านตัวแปร ปรับในธีมได้ด้วย .svs-w{--svs-accent:…} */
.svs-frontpage-footer-wrap{width:100%;position:relative;z-index:20;padding:0 0 18px}
.svs-frontpage-footer-wrap:not(.is-card){padding:.6em 16px;text-align:center}
.svs-w{--svs-accent:#4338ca;font-family:inherit;font-variant-numeric:tabular-nums;box-sizing:border-box}
.svs-w *{box-sizing:border-box}
.svs-t-dark{--svs-bg:linear-gradient(135deg,#141a2e,var(--svs-accent));--svs-fg:#fff;--svs-dim:rgba(255,255,255,.68);--svs-line:rgba(255,255,255,.16);--svs-hl:#d9d2ff;--svs-chip:rgba(255,255,255,.1);--svs-shadow:0 15px 35px rgba(15,18,40,.18)}
.svs-t-light{--svs-bg:#fff;--svs-fg:#1d2140;--svs-dim:#676c8c;--svs-line:#e3e5f0;--svs-hl:var(--svs-accent);--svs-chip:#f2f2fa;--svs-shadow:0 8px 24px rgba(29,33,64,.06)}
.svs-t-plain{--svs-bg:transparent;--svs-fg:inherit;--svs-dim:inherit;--svs-line:currentColor;--svs-hl:inherit;--svs-chip:transparent;--svs-shadow:none}
.svs-w .svs-n{font-weight:800;color:var(--svs-fg)}
.svs-w .svs-l{color:var(--svs-dim)}
.svs-w .svs-hl .svs-n{color:var(--svs-hl)}
.svs-w .svs-title{font-size:12px;color:var(--svs-dim);margin-bottom:8px;text-align:center}
.svs-w .svs-title span{color:var(--svs-hl)}
.svs-icon{fill:currentColor;opacity:.75;flex:none}
.svs-w ul{list-style:none;margin:0;padding:0}

/* การ์ดแถวเดียว */
.svs-s-card{width:min(1100px,100%);margin:0 auto;padding:13px 18px;border-radius:18px;background:var(--svs-bg);color:var(--svs-fg);border:1px solid var(--svs-line);box-shadow:var(--svs-shadow)}
.svs-s-card .svs-row{display:flex;flex-wrap:wrap;justify-content:center}
.svs-s-card .svs-i{flex:1 1 110px;max-width:220px;text-align:center;padding:2px 10px;border-left:1px solid var(--svs-line)}
.svs-s-card .svs-i:first-child{border-left:0}
.svs-s-card .svs-n{display:block;font-size:20px;line-height:1.15}
.svs-s-card .svs-l{display:block;font-size:11px;margin-top:3px}

/* กล่องแยก */
.svs-s-tiles .svs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.svs-s-tiles .svs-i{background:var(--svs-bg);border:1px solid var(--svs-line);border-radius:14px;padding:14px 16px;box-shadow:var(--svs-shadow);display:flex;flex-direction:column-reverse;gap:2px}
.svs-s-tiles .svs-n{font-size:26px;line-height:1.15}
.svs-s-tiles .svs-l{font-size:12px}
.svs-s-tiles .svs-hl{border-top:3px solid var(--svs-accent)}
.svs-s-tiles.svs-t-dark .svs-hl{border-top-color:var(--svs-hl)}

/* บรรทัดเดียว และ ข้อความเรียบ */
.svs-s-bar,.svs-s-minimal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em 1.1em;font-size:.9em;line-height:1.6;color:var(--svs-fg)}
.svs-s-bar:not(.svs-t-plain){background:var(--svs-bg);padding:.45em 1.1em;border-radius:10px}
.svs-s-bar .svs-i,.svs-s-minimal .svs-i{white-space:nowrap}
.svs-s-bar .svs-n{font-weight:700}
.svs-s-minimal{gap:.25em .6em;font-size:.85em}
.svs-s-minimal .svs-n{font-weight:600}
.svs-s-minimal .svs-sep{opacity:.5}
.svs-t-plain .svs-l{opacity:.75}

/* ป้ายเม็ดยา */
.svs-s-pills .svs-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.svs-s-pills .svs-i{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px;border-radius:999px;background:var(--svs-chip);border:1px solid var(--svs-line);font-size:13px;white-space:nowrap}
.svs-s-pills.svs-t-dark .svs-i{background:linear-gradient(135deg,#1b2140,#2a2770)}
.svs-s-pills .svs-hl{background:var(--svs-accent);border-color:var(--svs-accent)}
.svs-s-pills .svs-hl .svs-n,.svs-s-pills .svs-hl .svs-l{color:#fff}
.svs-s-pills .svs-n{font-size:15px}

/* รายการแนวตั้ง */
.svs-s-list{background:var(--svs-bg);border:1px solid var(--svs-line);border-radius:14px;padding:6px 16px;box-shadow:var(--svs-shadow);max-width:360px}
.svs-s-list .svs-title{text-align:left;margin:8px 0 2px}
.svs-s-list .svs-i{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--svs-line)}
.svs-s-list .svs-i:first-child{border-top:0}
.svs-s-list .svs-n{font-size:17px}
.svs-s-list .svs-l{font-size:13px}

/* กราฟเส้น */
.svs-s-sparkline{background:var(--svs-bg);border:1px solid var(--svs-line);border-radius:16px;padding:16px 18px 14px;box-shadow:var(--svs-shadow);color:var(--svs-fg);max-width:520px}
.svs-s-sparkline .svs-title{text-align:left}
.svs-s-sparkline .svs-big{display:block;font-size:30px;line-height:1.1;color:var(--svs-hl)}
.svs-s-sparkline .svs-spark-head .svs-l{font-size:12px}
.svs-spark{display:block;width:100%;height:64px;margin:10px 0 8px;overflow:visible}
.svs-spark-area{fill:var(--svs-accent);opacity:.14}
.svs-t-dark .svs-spark-area{fill:#fff;opacity:.12}
.svs-spark-line{fill:none;stroke:var(--svs-accent);stroke-width:2;stroke-linejoin:round}
.svs-t-dark .svs-spark-line{stroke:var(--svs-hl)}
.svs-spark-dot{fill:var(--svs-accent)}
.svs-t-dark .svs-spark-dot{fill:#fff}
.svs-s-sparkline .svs-row{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;border-top:1px solid var(--svs-line);padding-top:10px}
.svs-s-sparkline .svs-n{font-weight:700}

@media (max-width:480px){
  .svs-s-card .svs-i{flex-basis:45%}
  .svs-s-card .svs-i:nth-child(3){border-left:0}
  .svs-s-card .svs-n{font-size:18px}
  .svs-s-tiles .svs-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svs-s-tiles .svs-n{font-size:22px}
}
.svs-post-views{white-space:nowrap;font-variant-numeric:tabular-nums}

/* แก้วโปร่งแสง — สำหรับวางบนพื้นสี เช่น footer ของธีม */
.svs-t-glass{--svs-fg:#fff;--svs-dim:rgba(255,255,255,.8);--svs-line:rgba(255,255,255,.28);--svs-chip:rgba(255,255,255,.13);--svs-hl:var(--svs-accent);--svs-bg:transparent;--svs-shadow:0 10px 30px rgba(10,20,50,.12)}
.svs-s-glass{--svs-accent:#16325c;display:flex;justify-content:center;flex-direction:column;align-items:center}
.svs-s-glass .svs-title{color:var(--svs-dim)}
.svs-s-glass .svs-row{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--svs-chip);border:1px solid var(--svs-line);box-shadow:var(--svs-shadow),inset 0 1px 0 rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
.svs-s-glass .svs-i{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;white-space:nowrap;transition:background .2s}
.svs-s-glass .svs-i:not(.svs-hl):hover{background:rgba(255,255,255,.1)}
.svs-s-glass .svs-i + .svs-i:not(.svs-hl){position:relative}
.svs-s-glass .svs-i + .svs-i:not(.svs-hl)::before{content:"";position:absolute;left:-2px;top:28%;bottom:28%;width:1px;background:var(--svs-line)}
.svs-s-glass .svs-l{font-size:12.5px;letter-spacing:.01em}
.svs-s-glass .svs-n{font-size:17px;line-height:1;font-weight:800;letter-spacing:-.01em;color:var(--svs-fg)}
.svs-s-glass .svs-hl{background:#fff;box-shadow:0 4px 14px rgba(10,20,50,.18)}
.svs-s-glass .svs-hl .svs-n{color:var(--svs-accent)}
.svs-s-glass .svs-hl .svs-l{color:var(--svs-accent);opacity:.72}
.svs-live{width:8px;height:8px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:svs-pulse 2.2s ease-out infinite}
@keyframes svs-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%,100%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
@media (prefers-reduced-motion:reduce){.svs-live{animation:none}}
/* glass บนพื้นขาวหรือพื้นเข้ม */
.svs-s-glass.svs-t-light{--svs-chip:#f1f2f8;--svs-line:#e1e3ee;--svs-accent:#4338ca}
.svs-s-glass.svs-t-light .svs-hl{background:var(--svs-accent)}
.svs-s-glass.svs-t-light .svs-hl .svs-n,.svs-s-glass.svs-t-light .svs-hl .svs-l{color:#fff}
.svs-s-glass.svs-t-dark .svs-row{background:var(--svs-bg)}
.svs-s-glass.svs-t-plain{--svs-chip:transparent}
@media (max-width:560px){
  .svs-s-glass .svs-row{border-radius:22px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .svs-s-glass .svs-i{justify-content:center;padding:9px 10px}
  .svs-s-glass .svs-i + .svs-i:not(.svs-hl)::before{display:none}
}
