/* ============================================================
   TDEDUS — ธีมพาสเทลบนพื้นขาวนม (น่ารักแต่จริงจังนิดๆ) ใช้ทั้งเว็บ
   พื้นขาวขุ่นอุ่นๆ การ์ดขาวนวล ตัวอักษรม่วงเทาเข้ม (อ่านง่าย ไม่ดำจัด) สีเน้นลาเวนเดอร์ + พีช/มิ้นต์/ฟ้า/เนย/ชมพูเป็นสีประกอบ
   ทุกคอมโพเนนต์อ้างอิงโทเค็นด้านล่าง: --ink-rgb = สีหมึกไว้ทำเส้น/พื้นโปร่งแสง, --shade-rgb = สีเงาม่วงอ่อน (แทนเงาดำ)
   การ์ดแมตช์ 2 โทนสลับกัน: tone-a = ลาเวนเดอร์, tone-b = พีช
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@400;500;600;700&family=Mitr:wght@400;500;600&family=Sriracha&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Russo+One&family=Bungee&family=Teko:wght@600;700&family=Black+Ops+One&family=Racing+Sans+One&family=Audiowide&display=swap');   /* ตัวอักษรป้ายชื่อทีม (.vr-top.nt-N) */
:root {
  --bg: #f7f4ef;           /* ขาวนมอุ่นๆ ไม่ขาวจัด */
  --card: #fffdfa;         /* การ์ดขาวนวล */
  --surface: #f3eff8;      /* พื้นหัวตาราง/หัวการ์ด ม่วงหมอกจางๆ */
  --hover: #efe9f7;
  --text: #3d3551;         /* ม่วงเทาเข้ม แทนดำ ให้ดูนุ่มแต่ยังจริงจัง */
  --text-soft: #5a5170;   /* ข้อความรอง เข้มกว่า --muted */
  --muted: #847c97;
  --border: #e7e0ee;
  --accent: #8b7bdc;       /* ลาเวนเดอร์ สีหลักของเว็บ */
  --accent-strong: #6a58c9;/* ลาเวนเดอร์เข้ม ใช้กับตัวอักษรบนพื้นขาวให้คอนทราสต์พอ */
  --accent-soft: rgba(139, 123, 220, .16);
  --red: #e5484d;          /* แดงเด่น สีเน้นคู่กับลาเวนเดอร์ (โลโก้ เมนูที่เลือก การ์ดสมาชิก ตัวเลขนับ) */
  --red-deep: #b4202e;
  --red-soft: rgba(229, 72, 77, .12);
  --gold: #f0b46a;         /* พีชทอง ใช้แทนทองเดิมทั่วเว็บ */
  --peach: #f6b49a;
  --mint: #8fd3bd;
  --sky: #9cc7ef;
  --butter: #f5d98a;
  --pink: #f3a6bf;
  --live: #ec7575;         /* ชมพูคอรัล */
  --win: #3fa982;          /* มิ้นต์เข้มพออ่านได้ */
  --ink-rgb: 61, 53, 81;
  --shade-rgb: 110, 90, 150;
  --shadow: 0 6px 20px rgba(110, 90, 150, .10);
  --shadow-hover: 0 12px 30px rgba(110, 90, 150, .16);
  --font-head: "Mitr", "IBM Plex Sans Thai Looped", "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 380px at 12% -120px, rgba(139, 123, 220, .13), transparent 70%),
    radial-gradient(800px 360px at 92% -80px, rgba(246, 180, 154, .16), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, rgba(143, 211, 189, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "IBM Plex Sans Thai Looped", "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: 15px;
}

a { color: inherit; }

h1, h2, h3, .lg-name, .lg-hero-name, .league-hero-name, .fo-vs, .vr-vs { font-family: var(--font-head); }

/* ---------- แถบบน: พื้นดำผสมแดงเข้มสมัยใหม่ (ทึบ ไม่โปร่งแสง — การ์ดที่เลื่อนผ่านข้างใต้จะไม่โผล่ทะลุ)
   [โลโก้ tded.us + คำโปรย] [เมนู] [ช่องค้นหา ยืดเต็มที่เหลือ] [เข้าสู่ระบบ | สมัครสมาชิก]
   เอฟเฟกต์: แสงเรืองแดง/ส้มลอยช้าๆ (::before) + แสงวาบพาดผ่านเป็นระยะ (::after) — ขยับด้วย transform อย่างเดียว ไม่หนักเครื่อง ---------- */
:root { --hdr-h: 76px; }   /* ความสูงแถบบนรวมเส้นใต้ แผงซ้ายใช้ติดหนึบถัดลงมา */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  min-height: var(--hdr-h);
  padding: 10px 22px;
  color: #fff;
  background: linear-gradient(115deg, #050506 0%, #140709 22%, #4a0812 45%, #8e1224 68%, #3a060e 86%, #070506 100%);   /* ดำสนิท→แดงเข้ม→ดำ */
  border-bottom: 3px solid #ff6b7a;
  border-image: linear-gradient(90deg, #ff4d5e, #ffc078 50%, #ff4d5e) 1;   /* เส้นใต้แดงสด→ทอง→แดงสด */
  box-shadow: 0 8px 26px rgba(90, 8, 20, .35);
}
header.topbar::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background:
    radial-gradient(26% 60% at 30% 50%, rgba(255, 50, 70, .38), transparent 70%),
    radial-gradient(22% 55% at 66% 40%, rgba(255, 150, 80, .16), transparent 70%),
    radial-gradient(30% 70% at 92% 70%, rgba(220, 30, 55, .30), transparent 70%);
  animation: hdrDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
header.topbar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -30%;
  z-index: -1;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-20deg);
  animation: hdrSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hdrDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes hdrSheen { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(700%) skewX(-20deg); } }

/* โลโก้: ตราขีดเฉียง 3 เส้น (ขาว / ชมพู / ทอง) เรืองแสง + ตัวอักษร tded.us + คำโปรย — ชี้เมาส์แล้วขีดพุ่งเหลื่อมกัน */
a.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: inherit; }
.brand-mark { width: 48px; height: 34px; overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 120, 130, .6)); }
.brand-mark path { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.brand-mark .bm1 { fill: #fff; }
.brand-mark .bm2 { fill: #ff9aa6; }
.brand-mark .bm3 { fill: #ffc078; }
a.brand:hover .bm1 { transform: translateX(-3px); }
a.brand:hover .bm3 { transform: translateX(3px); }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-word { margin: 0; font-family: var(--font-head); font-size: 31px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.brand-word span { color: #ffc078; }
.brand-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: rgba(255, 225, 225, .85); white-space: nowrap; }

/* เมนู: ตัวหนาสีขาว หน้าที่อยู่เป็นแคปซูลขาว ตัวอักษรแดงเข้ม */
.topnav { display: flex; gap: 4px; flex: none; }
.topnav a { padding: 8px 15px; border-radius: 999px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .88); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.topnav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.topnav a.active { background: #fff; color: #9c1426; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }

.search-form {
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  min-width: 0;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  transition: background .15s, border-color .15s;
}
.search-form:focus-within { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 192, 120, .45); }
.search-form input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; font-size: 14px; color: #fff; }
.search-form input::placeholder { color: rgba(255, 255, 255, .72); }
.search-form:focus-within input { color: var(--text); }
.search-form:focus-within input::placeholder { color: var(--muted); }
.search-form button { border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 4px 8px; }

/* ---------- แถบที่สอง ใต้แถบบน (ไม่ติดหนึบ) แบบกะทัดรัด: พื้นขาว ตัดกับแถบบนสีดำแดง
   ซ้าย = ช่องสถิติแนวนอน [ไอคอนวงกลมสี | ตัวเลข + ป้าย] คนละสี / ขวา = กล่องสมาชิก VIP แถวเดียว ---------- */
.subbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 7px 22px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(var(--shade-rgb), .07);
}
/* ช่องสถิติ: การ์ดสีสดคนละสี (--c จาก index.php) พื้นไล่เฉดสีอ่อน ขอบสี ชี้แล้วลอยขึ้น */
.sb-stats { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }   /* ฐานกว้าง 0: ย่อช่องเลือกลีกก่อน ไม่ดันกล่องสมาชิกตกบรรทัด */
.sb-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--c) 35%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 7%, #fff), color-mix(in srgb, var(--c) 20%, #fff));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 16%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.sb-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 26%, transparent); }
a.sb-stat { text-decoration: none; cursor: pointer; }   /* ช่องที่กดกรองได้ (ติดแผน / คอมโบ) */
.sb-stat.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.sb-ic { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 45%, transparent); }
.sb-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }   /* เว้นพอให้สระ/วรรณยุกต์ไทยของป้ายไม่ชนตัวเลข */
.sb-txt b { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: color-mix(in srgb, var(--c) 82%, #1a1024); font-variant-numeric: tabular-nums; }
.sb-txt b span { margin-left: 3px; font-family: inherit; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--c) 55%, #6b6280); }
.sb-txt small { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, #2b1f3a); white-space: nowrap; }
/* ปุ่มสมาชิกชิดขวา: [สมัครสมาชิก][เข้าสู่ระบบ] หรือ [👤 ชื่อ][ออกจากระบบ] (โฆษณา VIP ย้ายไปแผงซ้ายหน้าแรกแล้ว) */
.sb-member {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: auto;
}
.sb-price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sb-vip { align-self: center; padding: 1px 7px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #3d1600; background: linear-gradient(135deg, #ffe0a8, #f5b642); box-shadow: 0 1px 4px rgba(240, 160, 60, .4); }
.sb-price b { font-family: var(--font-head); font-size: 21px; font-weight: 600; line-height: 1; color: var(--red-deep); }
.sb-price b span { margin-left: 3px; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.sb-perday { font-style: normal; font-size: 10.5px; font-weight: 700; color: #1f8a63; }
.sb-perks { display: flex; gap: 10px; margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 1px dashed #e6c787; cursor: help; }
.sb-perks li { position: relative; padding-left: 16px; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sb-perks li::before { content: "✓"; position: absolute; left: 0; top: 50%; display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; transform: translateY(-50%); border-radius: 50%; font-size: 8.5px; font-weight: 900; color: #fff; background: #2f9e76; }
.sb-cta { display: flex; gap: 6px; }
.auth-btn { padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.auth-btn.signup { color: #fff; border: none; background: linear-gradient(135deg, #f0525c, var(--red) 50%, var(--red-deep)); box-shadow: 0 3px 10px rgba(229, 72, 77, .35); }
.auth-btn.signup:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(229, 72, 77, .45); }
.auth-btn.login { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.auth-btn.login:hover { border-color: var(--red); color: var(--red-deep); }
a.auth-btn { display: inline-block; text-decoration: none; }
.auth-out { margin: 0; display: inline; }
.auth-user { display: inline-flex; align-items: center; max-width: 160px; padding: 7px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-user:hover { background: var(--hover); }

/* หน้า login.php: การ์ดเข้าสู่ระบบ / สมัครสมาชิก */
.mb-card { max-width: 400px; margin: 40px auto; padding: 26px 24px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.mb-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 22px; color: var(--text); }
.mb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface); border-radius: 12px; }
.mb-tabs a { padding: 9px 0; border-radius: 9px; text-align: center; font-weight: 700; color: var(--muted); text-decoration: none; }
.mb-tabs a.on { background: var(--card); color: var(--red-deep); box-shadow: 0 2px 6px rgba(var(--shade-rgb), .12); }
.mb-sub { margin: 0 0 14px; color: var(--text-soft); font-size: 14px; }
.mb-error { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red-deep); font-size: 14px; font-weight: 600; }
.mb-form { display: grid; gap: 6px; }
.mb-form label { display: grid; gap: 5px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.mb-form input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 16px; }
.mb-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mb-hint { color: var(--muted); font-size: 12px; }
.mb-pw { position: relative; display: block; }
.mb-pw input { padding-right: 46px; }
.mb-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 8px; border: 0; background: none; cursor: pointer; font-size: 16px; opacity: .6; }
.mb-eye:hover { opacity: 1; }
.mb-submit { display: block; width: 100%; box-sizing: border-box; margin-top: 14px; padding: 13px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #f0525c, var(--red) 50%, var(--red-deep)); color: #fff; font: inherit; font-size: 16px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px rgba(229, 72, 77, .3); }
.mb-submit:hover { filter: brightness(1.05); }
.mb-alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--text-soft); }
.mb-alt a { color: var(--red-deep); font-weight: 700; }
.mb-alt small { color: var(--muted); }
.mb-link { border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) { .mb-card { margin: 16px; padding: 22px 18px; } }
@media (max-width: 1360px) {
  .sb-perks { display: none; }   /* จอไม่กว้างพอ: ซ่อนสิทธิ์ย่อให้ทุกอย่างอยู่แถวเดียว (รายละเอียดสิทธิ์ยังอยู่ใน tooltip ของราคา) */
}
@media (max-width: 1100px) {
  .sb-stats { overflow-x: auto; scrollbar-width: none; padding: 2px; }
}
@media (max-width: 760px) {
  .subbar { padding: 8px 12px; }
  .sb-stats { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sb-stats .lg-pick { grid-column: 1 / -1; min-width: 0; }   /* เลือกลีกเต็มแถว ช่องสถิติ 2 ช่องอยู่แถวถัดไป */
  .sb-stat { padding: 4px 8px 4px 4px; gap: 6px; }
  .sb-ic { width: 26px; height: 26px; }
  .sb-ic svg { width: 15px; height: 15px; }
  .sb-txt b { font-size: 17px; }
  .sb-member { flex: 1 1 100%; margin-left: 0; }
  .sb-price { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0; }
  .sb-cta .auth-btn { padding: 7px 12px; }
}

/* มุมขวาบน: "คู่ถัดไปเตะใน" นับถอยหลัง (แคปซูลกระจกขอบทอง กดไปหน้าแมตช์) + ป้าย LIVE จุดแดงกะพริบ / เวลาอัปเดต / นาฬิกาไทย */
.top-live { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.tl-next {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 6px 16px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 192, 120, .45);
  box-shadow: inset 0 0 18px rgba(255, 150, 80, .12);
  transition: background .15s;
}
.tl-next:hover { background: rgba(255, 255, 255, .15); }
.tl-lbl { font-size: 11.5px; font-weight: 600; color: rgba(255, 225, 225, .85); white-space: nowrap; }
.ko-count { font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1.1; color: #ffc078; font-variant-numeric: tabular-nums; }
.ko-count.soon { color: #ff8a95; animation: pulse 1.2s ease-in-out infinite; }   /* เหลือไม่ถึงชั่วโมง */
.tl-teams { grid-column: 1 / -1; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.tl-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.tl-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #fff; }
.tl-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 0 rgba(255, 59, 78, .7); animation: liveDot 1.6s ease-out infinite; }
.tl-live small { font-weight: 600; letter-spacing: 0; color: rgba(255, 225, 225, .75); }
@keyframes liveDot { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.6); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
#tlClock { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.tl-clock > small { font-size: 11.5px; color: rgba(255, 225, 225, .8); }

/* จอกลาง: ช่องค้นหาลงไปเต็มแถวที่สอง / มือถือ: โลโก้แถวแรก เมนูเลื่อนแนวนอนแถวสอง ค้นหาแถวสาม */
@media (max-width: 1180px) {
  header.topbar { flex-wrap: wrap; }
  .search-form { order: 5; flex-basis: 100%; }
}
@media (max-width: 860px) {
  .tl-clock { display: none; }   /* จอแคบ: เหลือแค่คู่ถัดไป */
}
@media (max-width: 700px) {
  header.topbar { position: relative; padding: 10px 14px; gap: 8px; }   /* มือถือแถบบนสูง 3 แถว ไม่ติดหนึบ จะได้ไม่กินจอตอนเลื่อน */
  .brand-word { font-size: 25px; }
  .brand-tag { font-size: 10px; letter-spacing: .06em; }
  .brand-mark { width: 38px; height: 27px; }
  .topnav { order: 4; flex-basis: 100%; overflow-x: auto; }
  .topnav a { padding: 7px 12px; font-size: 14px; }
  .tl-next { padding: 5px 12px; }
  .tl-teams { max-width: 150px; }
  .ko-count { font-size: 18px; }
}

main {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px 48px;
}

/* หน้ารายละเอียดแมตช์ (page 2): ใช้พื้นที่เต็มจอมากขึ้น การ์ดเปรียบเทียบ/ตัวจริง/ตารางข้อมูลจะได้กว้างขึ้นตามจริง */
main.match-detail {
  max-width: min(1440px, 96vw);
}

/* ---------- หน้ารอง (ตาราง/ทีม/นักเตะ ฯลฯ) ---------- */
.league-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.league-group h2 {
  font-size: 14px;
  margin: 0;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
}

.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.match-row:last-child { border-bottom: none; }

.match-time {
  width: 56px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.match-status { font-size: 11px; font-weight: 700; }
.match-status.live { color: var(--live); }
.match-status.finished { color: var(--muted); }

.match-teams { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.team-line { display: flex; justify-content: space-between; gap: 10px; }
.team-name { font-weight: 500; }
.team-score { font-weight: 700; min-width: 20px; text-align: right; }

.empty-note { text-align: center; color: var(--muted); padding: 40px 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.tabs a {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.tabs a:hover { border-color: var(--accent); }
.tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }

table.standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

table.standings th, table.standings td {
  padding: 9px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

table.standings th { background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
table.standings td.team { text-align: left; font-weight: 600; }
table.standings td.rank { color: var(--muted); width: 30px; }
table.standings td.pts { font-weight: 800; color: var(--accent-strong); }
table.standings tr:last-child td { border-bottom: none; }
table.standings tr:hover td { background: var(--hover); }

table.standings tr.zone-champion td.rank { border-left: 3px solid #e9c46a; }
table.standings tr.zone-ucl td.rank { border-left: 3px solid #7fb3ea; }
table.standings tr.zone-uel td.rank { border-left: 3px solid #f5a97f; }
table.standings tr.zone-relegation td.rank { border-left: 3px solid #e97b7b; }

.standings-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.standings-legend span { display: flex; align-items: center; gap: 6px; }
.standings-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend-champion i { background: #e9c46a; }
.legend-ucl i { background: #7fb3ea; }
.legend-uel i { background: #f5a97f; }
.legend-relegation i { background: #e97b7b; }

.updated-note { color: var(--muted); font-size: 12px; margin-bottom: 14px; }

a.match-row-link { display: block; text-decoration: none; color: inherit; }
a.match-row-link:hover .match-row { background: var(--hover); }

.match-detail-header {
  background: linear-gradient(180deg, var(--surface), var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  text-align: center;
}

.mdh-league { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.mdh-teams { max-width: 320px; margin: 0 auto 12px; }
.mdh-team-line { display: flex; justify-content: space-between; font-size: 17px; font-weight: 600; padding: 4px 0; }
.mdh-score { font-weight: 800; color: var(--accent); }
.mdh-meta { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--muted); }

.table-scroll { overflow-x: auto; }

table.raw-table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }
table.raw-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.raw-table tr.hdr td { color: var(--muted); font-weight: 700; background: var(--surface); }

.lineup-grid { display: grid; grid-template-columns: 1fr 1fr; }
.lineup-col { padding: 10px 12px; border-right: 1px solid var(--border); }
.lineup-col:last-child { border-right: none; }
.lineup-team-name { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.player-row { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; }
.player-no { color: var(--muted); width: 22px; flex-shrink: 0; text-align: right; }

.country-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.country-block { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.country-label { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.country-block .tabs { margin-bottom: 0; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

.team-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, border-color .15s;
}
.team-card:hover { transform: translateY(-3px); border-color: var(--accent); }

.team-logo { width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; }
.team-logo-big { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; }
.team-card-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.team-card-count { font-size: 11px; color: var(--muted); margin-top: 4px; }

table.squad-table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 13px; }
table.squad-table th, table.squad-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
table.squad-table th { background: var(--surface); color: var(--muted); font-size: 11px; }
table.squad-table tr:hover td { background: var(--hover); }

.player-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.player-photo-big { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }

.league-logo { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 2px; }
.league-trophy { margin-right: 2px; }

.league-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.league-hero .league-logo { width: 48px; height: 48px; margin-right: 0; }
.league-hero .league-trophy { font-size: 36px; margin-right: 0; line-height: 1; }
.league-hero-name { font-size: 18px; font-weight: 800; }
.league-hero-country { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   หน้าแรก
   ============================================================ */

/* โครง 2 คอลัมน์: แผงข้อมูลซ้าย (สมาชิก / ข้อมูลให้อ่าน) + เนื้อหา */
.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0 22px 60px;
  align-items: start;
}
main.content { max-width: none; margin: 0; padding: 22px 0 0; min-width: 0; }

/* ---------- แผงข้อมูลซ้าย: การ์ดเล็กเรียงลงมา ติดใต้แถบบนตอนเลื่อนหน้า (กว้างใกล้เคียงเมนูลีกเดิม) ---------- */
.info-side {
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0 16px;
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dcd2ea transparent;
}
.info-side > * { flex-shrink: 0; }   /* แผงสูงเกินจอให้เลื่อนในแผงแทน ห้ามบีบการ์ดจนเนื้อหาโดนตัด */
/* จอไม่ถึง 1180px แถบบนตกเป็น 2 แถว ความสูงไม่คงที่ — แผงซ้ายเลิกติดหนึบ ไม่งั้นจะมุดเข้าใต้แถบบนจนเนื้อหาโดนบัง */
@media (max-width: 1180px) { .info-side { position: static; max-height: none; overflow: visible; } }
.is-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 16px 14px; box-shadow: var(--shadow); }
.is-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--accent-strong); }
.is-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.is-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.is-list li { position: relative; padding-left: 13px; }
.is-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--peach); }
.is-list b { color: var(--text); }
.is-card p.is-muted { margin: 0; color: var(--muted); }

/* ---------- VIP คอมโบเด็ด (vip_combos.php): การ์ดแบบ "การ์ดสะสมฟอยล์" ร่วงลงมาจากด้านบนทีละใบตอนเปิดหน้า
   ขอบทองไล่สีหมุนวน + แสงฟอยล์รุ้งกวาดผ่าน + เอียง 3 มิติตามเมาส์ (app.js ตั้ง --rx/--ry) + เอียง/เทปแปะแบบทำมือ
   ทุกเอฟเฟกต์ขยับด้วย transform/opacity/background-position — ปิดเองในโหมดลดการเคลื่อนไหว ---------- */
.vx-wrap { position: relative; margin-bottom: 22px; }
.vx-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 4px 14px; }
.vx-ribbon {
  align-self: center;
  position: relative;
  padding: 5px 16px 5px 12px;
  font-style: normal;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #3d1600;
  background: linear-gradient(110deg, #f5b642 0%, #fff0c2 45%, #f5b642 55%, #e39a1c 100%) 0 0 / 250% 100%;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
  animation: vxGold 3.5s linear infinite;
}
.vx-head b { font-family: "Sriracha", var(--font-head); font-size: 26px; font-weight: 400; color: var(--text); transform: rotate(-1.5deg); }
.vx-head small { font-size: 12.5px; color: var(--muted); font-style: italic; }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 18px; perspective: 1100px; }
.vx-card {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 40px;   /* ล่างเผื่อที่ให้หน้าไพ่มุมขวาล่าง */
  border-radius: 16px 10px 18px 12px;
  color: #fff;
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
    linear-gradient(160deg, #1d060b, #2c0912 50%, #12040a);
  box-shadow: 0 14px 34px rgba(40, 5, 12, .38), 0 0 0 1px rgba(255, 220, 150, .25);
  transform: rotate(var(--tilt, 0deg)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .2s;
  animation: vxDrop .9s cubic-bezier(.22, 1.4, .36, 1) backwards;   /* backwards: จบแล้วคืน transform ให้การเอียงตามเมาส์ทำงาน */
  animation-delay: calc(var(--i) * .16s + .1s);
}
.vx-card:nth-child(4n+1) { --tilt: -1.4deg; }
.vx-card:nth-child(4n+2) { --tilt: 1.1deg; }
.vx-card:nth-child(4n+3) { --tilt: -.6deg; }
.vx-card:nth-child(4n+4) { --tilt: 1.6deg; }
.vx-card[data-href] { cursor: pointer; }   /* กดได้ทั้งการ์ด (app.js) */
.vx-card:focus-visible { outline: 3px solid #f5b642; outline-offset: 3px; }
.vx-card:hover { box-shadow: 0 22px 44px rgba(40, 5, 12, .5), 0 0 0 1px rgba(255, 220, 150, .5), 0 0 30px color-mix(in srgb, var(--c) 45%, transparent); }
@keyframes vxDrop {
  0% { opacity: 0; transform: translateY(-120px) rotate(-8deg) scale(.9); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
/* ขอบทองไล่สีหมุนวนรอบการ์ด (วาดด้วย mask ให้เหลือแค่เส้นขอบ) */
.vx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, #f5b642, #fff0c2, var(--c), #f5b642, #fff0c2) 0 0 / 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vxGold 4s linear infinite;
  pointer-events: none;
}
@keyframes vxGold { to { background-position: 250% 0; } }
/* แสงฟอยล์รุ้งกวาดผ่านเป็นระยะ */
.vx-foil {
  position: absolute;
  inset: -40%;
  z-index: 1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 120, 200, .16) 44%, rgba(255, 240, 150, .28) 48%, rgba(120, 220, 255, .18) 52%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-60%);
  animation: vxFoil 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .7s + 1s);
  pointer-events: none;
}
@keyframes vxFoil { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
/* เทปกาวแปะมุมบนแบบทำมือ */
.vx-card > .vx-top::after { content: ""; position: absolute; top: -8px; right: 26px; width: 58px; height: 16px; background: rgba(255, 240, 200, .35); transform: rotate(8deg); }
.vx-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; }
@keyframes vxBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
/* ---- หน้าไพ่ประจำคอมโบ (vip_card_index): แต้มตัวใหญ่ + ดอกใต้แต้ม บนการ์ดขาวขอบสีธีม แบบมุมไพ่จริง ---- */
.vx-idx {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-height: 56px;
  padding: 4px 0;
  border-radius: 8px;
  line-height: 1;
  color: color-mix(in srgb, var(--c) 85%, #1a1024);
  background: linear-gradient(160deg, #fffdf6, #f4ecd9);
  border: 2px solid var(--c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 2px #fff;
  transform: rotate(-6deg);
}
.vx-idx b { font-family: "Sriracha", var(--font-head); font-size: 24px; font-weight: 400; }
.vx-idx i { font-style: normal; font-size: 20px; margin-top: 1px; }
.vx-idx.tl { animation: vxBob 3s ease-in-out infinite; }
/* มุมขวาล่าง: หน้าไพ่เล็กกลับหัว 180° แบบไพ่จริง */
.vx-idx.br { position: absolute; z-index: 3; right: 12px; bottom: 8px; width: 30px; min-height: 38px; transform: rotate(180deg); border-width: 1.5px; }
.vx-idx.br b { font-size: 16px; }
.vx-idx.br i { font-size: 13px; }
/* ดอกไพ่ตัวใหญ่จางๆ เป็นลายน้ำพื้นหลัง */
.vx-mark { position: absolute; z-index: 0; right: -14px; top: 40%; font-size: 170px; line-height: 1; color: var(--c); opacity: .13; transform: rotate(14deg); pointer-events: none; }
/* ตัวละคร Joker ประจำคอมโบบนหัวการ์ด (vip_joker_svg): เวทีวงแสงสีธีม + ลำแสงหมุนช้า + ตัวละครโยกหัวเบาๆ + ป้ายชื่อเฉียง */
.vx-joker-hero {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: -6px -16px 0;
  padding-top: 6px;
  height: 128px;
  overflow: hidden;
  background: radial-gradient(55% 75% at 50% 62%, color-mix(in srgb, var(--c) 55%, transparent), transparent 72%);
  border-bottom: 1px dashed rgba(255, 255, 255, .18);
}
.vx-joker-hero::before {   /* ลำแสงแฉกหมุนหลังตัวละคร */
  content: "";
  position: absolute;
  left: 50%; top: 58%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 30%, transparent) 0 10deg, transparent 10deg 24deg);
  border-radius: 50%;
  opacity: .55;
  animation: vxRays 18s linear infinite;
}
@keyframes vxRays { to { transform: rotate(360deg); } }
.vx-joker-art { position: relative; width: 122px; height: 122px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transform-origin: 50% 90%; animation: vxJester 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes vxJester { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-3px); } }
.vx-joker-name { position: absolute; z-index: 1; left: 12px; bottom: 8px; padding: 2px 10px; border-radius: 4px; font-family: "Sriracha", var(--font-head); font-size: 12px; color: #fff; background: color-mix(in srgb, var(--c) 75%, #000); transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.vx-card.vx-joker .vx-joker-hero { background: radial-gradient(55% 75% at 50% 62%, rgba(168, 85, 247, .55), rgba(20, 184, 166, .25) 50%, transparent 75%); }

/* ---------- แผง "VIP วิเคราะห์คู่นี้" ในการ์ดแมตช์ (vip_match_panel) ใต้แถวตราพิศดาร ----------
   พื้นดำแดงขอบทอง · ติดหลายคอมโบ = แถบ "เลือกไพ่" (radio + CSS ล้วน) · แต่ละใบ:
   [Joker + หน้าไพ่ | ชื่อ + ตั๋วเล่นอะไร + ป้ายระดับ/ราคา | เกจความเด่น] → แถบสัญญาณ → เหตุผล (ไอคอน) + วิธีเล่น 2 ขั้น → เทปจุดระวัง
   เอฟเฟกต์ใช้ transform/opacity (+ เกจใช้ @property) และปิดหมดเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.vm-panel { position: relative; margin: 12px 16px 4px; padding: 14px 16px 10px; border-radius: 18px; color: #fff; border: 1.5px solid #e9c46a; background: radial-gradient(60% 80% at 100% 0%, rgba(255, 60, 80, .25), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(233, 196, 106, .12), transparent 70%), linear-gradient(135deg, #0d0609, #2a0911 60%, #12040a); box-shadow: 0 10px 26px rgba(40, 5, 12, .32); overflow: hidden; }
.vm-panel::before { content: "🃏"; position: absolute; right: -14px; top: -22px; font-size: 120px; opacity: .06; transform: rotate(18deg); pointer-events: none; }
.vm-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; }
.vm-top .vx-ribbon { align-self: center; font-size: 13px; }
.vm-top b { font-family: "Sriracha", var(--font-head); font-size: 22px; font-weight: 400; color: #ffe0a8; }
.vm-top small { font-size: 12px; color: rgba(255, 225, 225, .75); }
.vm-top strong { color: #ffd27a; }

/* แถบเลือกไพ่ (เฉพาะติดหลายคอมโบ) */
.vm-r { position: absolute; opacity: 0; pointer-events: none; }
.vm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; padding-left: 4px; }
.vm-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; cursor: pointer; user-select: none;
  background: rgba(255, 255, 255, .06); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); color: rgba(255, 255, 255, .75);
  transform: rotate(-2deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, box-shadow .2s; }
.vm-tab:nth-child(even) { transform: rotate(2deg); }
.vm-tab:hover { transform: translateY(-4px) rotate(0); color: #fff; }
.vm-tab-face { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 6px; background: #fffaf0; color: var(--c); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.vm-tab-face i { display: block; font-style: normal; font-size: 12px; }
.vm-tab-name { font-size: 13px; font-weight: 700; }
.vm-tab b { font-family: var(--font-head); font-size: 13px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 70%, #000); color: #fff; }
.vm-deck:has(.vm-r:focus-visible) .vm-tab { outline: 1px dashed rgba(255, 255, 255, .25); }
.vm-panel.many .vm-combo { display: none; }
.vm-r.i0:checked ~ .vm-combo.i0, .vm-r.i1:checked ~ .vm-combo.i1, .vm-r.i2:checked ~ .vm-combo.i2, .vm-r.i3:checked ~ .vm-combo.i3, .vm-r.i4:checked ~ .vm-combo.i4,
.vm-r.i5:checked ~ .vm-combo.i5, .vm-r.i6:checked ~ .vm-combo.i6, .vm-r.i7:checked ~ .vm-combo.i7, .vm-r.i8:checked ~ .vm-combo.i8, .vm-r.i9:checked ~ .vm-combo.i9 { display: block; animation: vmDeal .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.vm-r.i0:checked ~ .vm-tabs .i0, .vm-r.i1:checked ~ .vm-tabs .i1, .vm-r.i2:checked ~ .vm-tabs .i2, .vm-r.i3:checked ~ .vm-tabs .i3, .vm-r.i4:checked ~ .vm-tabs .i4,
.vm-r.i5:checked ~ .vm-tabs .i5, .vm-r.i6:checked ~ .vm-tabs .i6, .vm-r.i7:checked ~ .vm-tabs .i7, .vm-r.i8:checked ~ .vm-tabs .i8, .vm-r.i9:checked ~ .vm-tabs .i9 {
  transform: translateY(-6px) rotate(0); color: #fff; background: color-mix(in srgb, var(--c) 35%, #1a0a10); border-color: var(--c); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 45%, transparent); }
@keyframes vmDeal { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(.97); } to { opacity: 1; transform: none; } }

/* ใบคอมโบ */
.vm-combo { position: relative; margin-top: 10px; padding: 12px 14px 12px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 24%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .03)); border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent); }
.vm-combo.joker { border-color: transparent; background: linear-gradient(160deg, rgba(168, 85, 247, .22), rgba(255, 255, 255, .03)) padding-box, linear-gradient(120deg, #ff3d57, #ff9800, #16a34a, #06b6d4, #6366f1, #a855f7) border-box; }
.vm-head { display: flex; align-items: center; gap: 14px; }
.vm-art { position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%); }
.vm-art .vx-joker-art { width: 92px; height: 92px; animation: vxJester 2.8s ease-in-out infinite; }
.vm-face { position: absolute; right: -6px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 40px; border-radius: 6px; background: #fffaf0; color: var(--c); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1; transform: rotate(10deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.vm-face i { display: block; font-style: normal; font-size: 12px; }
.vm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vm-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vm-name b { font-family: "Sriracha", var(--font-head); font-size: 21px; font-weight: 400; color: color-mix(in srgb, var(--c) 40%, #fff); }
.vm-name small { font-size: 11.5px; color: rgba(255, 230, 230, .7); }
/* ตั๋วเดิมพัน: รอยปรุด้านซ้าย + แสงวิ่งผ่าน */
.vm-ticket { position: relative; display: flex; align-items: stretch; overflow: hidden; border-radius: 10px; background: linear-gradient(110deg, #ffe7b8, #f5b642); color: #3d1600; box-shadow: 0 4px 12px rgba(245, 182, 66, .3); }
.vm-ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); animation: vmShine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes vmShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.vm-ticket-l { display: flex; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 800; background: rgba(61, 22, 0, .1); border-right: 2px dashed rgba(61, 22, 0, .35); white-space: nowrap; }
.vm-ticket b { padding: 6px 12px; font-family: var(--font-head); font-size: 16px; font-weight: 600; }
.vm-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vm-lv, .vm-price { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.vm-lv.hot { background: linear-gradient(90deg, #ff3d57, #ff9800); color: #fff; }
.vm-lv.star { background: #ffd27a; color: #4a2600; }
.vm-lv.ok { background: rgba(255, 255, 255, .14); color: #fff; }
.vm-price.good { background: rgba(47, 158, 118, .25); color: #9ff0cf; border: 1px solid rgba(127, 224, 189, .5); }
.vm-price.ok { background: rgba(255, 255, 255, .1); color: #ffe0c0; border: 1px solid rgba(255, 255, 255, .2); }
.vm-price.hi { background: rgba(229, 72, 77, .22); color: #ffb3b5; border: 1px solid rgba(255, 158, 162, .5); }
.vm-price.na { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); border: 1px dashed rgba(255, 255, 255, .25); }
.vm-all { margin-left: auto; font-size: 11.5px; font-weight: 800; white-space: nowrap; text-decoration: none; color: #fff; padding: 3px 11px; border-radius: 999px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); transition: background-color .15s, transform .15s; }
.vm-all:hover { background: var(--c); transform: translateY(-1px); }
/* เกจวงกลมความเด่น: เติมจาก 0 ตอนแผงโผล่ */
.vm-gauge { flex: none; position: relative; display: grid; place-items: center; align-content: center; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(closest-side, #1c0a10 76%, transparent 78%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0);
  animation: vmGauge 1.3s cubic-bezier(.2, .8, .3, 1) both; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.vm-gauge b { font-family: var(--font-head); font-size: 26px; line-height: 1; }
.vm-gauge small { font-size: 10px; color: rgba(255, 230, 230, .7); }
@keyframes vmGauge { from { --p: 0; } }

/* แถบสัญญาณบวก / ต้องระวัง */
.vm-signal { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 12px; }
.vm-signal span { white-space: nowrap; }
.vm-signal .good { color: #9ff0cf; }
.vm-signal .bad { color: #ffb3b5; }
.vm-signal b { font-family: var(--font-head); font-size: 15px; }
.vm-signal i { flex: 1; height: 9px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, #e5484d, #ff8a80); }
.vm-signal em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1f9d6f, #7fe0bd); transform-origin: left; animation: vmGrow 1s .2s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes vmGrow { from { transform: scaleX(0); } }

/* เหตุผล + วิธีเล่น */
.vm-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.vm-body h5, .vm-care h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
.vm-why h5 { color: #7fe0bd; }
.vm-how h5 { color: #ffd08a; }
.vm-body h5 span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 13px; }
.vm-why ul, .vm-care ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vm-why li, .vm-care li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 245, 245, .92);
  animation: vmIn .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.15s + var(--d, 0) * .09s); transition: transform .15s, background-color .15s; }
.vm-why li { background: rgba(47, 158, 118, .12); border-left: 3px solid #2f9e76; }
.vm-why li:hover { transform: translateX(4px); background: rgba(47, 158, 118, .2); }
.vm-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 14px; line-height: 1; }
.vm-n { font-family: var(--font-head); font-weight: 600; color: #ffd27a; }
@keyframes vmIn { from { opacity: 0; transform: translateX(-10px); } }
.vm-step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: rgba(255, 255, 255, .05); color: rgba(255, 245, 245, .9); }
.vm-step + .vm-step { margin-top: 6px; }
.vm-step.main { background: rgba(245, 182, 66, .14); border: 1px solid rgba(245, 182, 66, .4); }
.vm-step em { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-family: var(--font-head); font-weight: 700; background: rgba(255, 255, 255, .15); }
.vm-step.main em { background: #f5b642; color: #3d1600; }
.vm-step small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #ffd08a; }

/* จุดระวัง: กรอบเทปเหลืองดำ */
.vm-care { margin-top: 12px; padding: 12px 12px 10px; border-radius: 12px; position: relative; background: rgba(229, 72, 77, .1);
  border: 5px solid transparent; border-image: repeating-linear-gradient(45deg, #f5c542 0 10px, #1a1a1a 10px 20px) 5; }
.vm-care h5 { color: #ffcf5a; }
.vm-care li { background: rgba(0, 0, 0, .25); }
.vm-note { margin: 8px 2px 0; font-size: 10.5px; font-style: italic; color: rgba(255, 225, 225, .6); }

@media (max-width: 760px) {
  .vm-panel { margin: 10px 8px 4px; padding: 12px 10px 8px; }
  .vm-head { flex-wrap: wrap; gap: 10px; }
  .vm-art, .vm-art .vx-joker-art { width: 70px; height: 70px; }
  .vm-main { order: 3; flex-basis: 100%; }
  .vm-gauge { width: 70px; height: 70px; margin-left: auto; }
  .vm-gauge b { font-size: 21px; }
  .vm-body { grid-template-columns: minmax(0, 1fr); }
  .vm-all { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-combo, .vm-gauge, .vm-signal em, .vm-why li, .vm-care li, .vm-ticket::after, .vm-art .vx-joker-art { animation: none !important; }
}
/* ---- JOKER (ม้ามืด): ขอบรุ้งวิ่ง + หน้าไพ่รุ้ง + ตัวอักษร JOKER แนวตั้ง ---- */
.vx-card.vx-joker::before { background: linear-gradient(120deg, #ff3d57, #ff9800, #eab308, #16a34a, #06b6d4, #6366f1, #a855f7, #ff3d57) 0 0 / 300% 300%; padding: 3px; }
.vx-card.vx-joker { background: radial-gradient(90% 60% at 100% 0%, rgba(20, 184, 166, .45), transparent 70%), radial-gradient(70% 50% at 0% 100%, rgba(168, 85, 247, .35), transparent 70%), linear-gradient(160deg, #0a0712, #1a0f24 50%, #07050c); }
.vx-idx.joker { color: #fff; background: linear-gradient(160deg, #ff3d57, #ff9800 25%, #16a34a 50%, #6366f1 75%, #a855f7); border-color: #fff; min-height: 70px; }
.vx-idx.joker b { font-family: var(--font-head); font-size: 9px; font-weight: 600; line-height: 1.05; letter-spacing: 0; text-align: center; }
.vx-idx.joker i { font-size: 18px; }
.vx-idx.joker.br { min-height: 48px; }
.vx-idx.joker.br b { font-size: 6.5px; }
.vx-card.vx-joker .vx-mark { opacity: .22; font-size: 150px; }
/* หน้าไพ่ในหัวข้อหน้ารวมคอมโบ และในชิปบนการ์ดแมตช์ */
.vx-facecard { align-self: center; padding: 4px 10px; border-radius: 7px; font-family: "Sriracha", var(--font-head); font-size: 20px; line-height: 1; color: color-mix(in srgb, var(--c) 85%, #1a1024); background: linear-gradient(160deg, #fffdf6, #f4ecd9); border: 2px solid var(--c); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); transform: rotate(-5deg); }
.vx-facecard.joker { background: linear-gradient(135deg, #ff3d57, #ff9800, #16a34a, #6366f1, #a855f7); border-color: #fff; }
.vx-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vx-name b { font-family: "Sriracha", var(--font-head); font-size: 19px; font-weight: 400; color: color-mix(in srgb, var(--c) 45%, #fff); }
.vx-name small { font-size: 11px; color: rgba(255, 225, 225, .7); }
.vx-match { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 10px; border-radius: 12px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .07); border: 1px dashed rgba(255, 255, 255, .22); }
.vx-match:hover { background: rgba(255, 255, 255, .13); }
.vx-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vx-t.away { justify-content: flex-end; text-align: right; }
.vx-t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 800; line-height: 1.25; }   /* ชื่อยาวขึ้น 2 บรรทัด */
.vx-t .tb { width: 28px; height: 28px; flex: none; }
.vx-match > i { font-style: italic; font-family: var(--font-head); font-size: 14px; color: #ffc078; }
.vx-match > small { grid-column: 1 / -1; text-align: center; font-size: 11px; color: rgba(255, 225, 225, .7); }
.vx-pick { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #3d1600; background: linear-gradient(110deg, #ffe0a8, #f5b642); box-shadow: 0 4px 14px rgba(245, 182, 66, .35); transform: rotate(-.8deg); }
.vx-pick span { font-size: 12px; font-weight: 800; white-space: nowrap; }
.vx-pick b { font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1.25; }
.vx-meter { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 11px; color: rgba(255, 225, 225, .75); }
.vx-meter i { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.vx-meter em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), #ffc078); transform-origin: left; animation: vxFill 1.2s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * .16s + .7s); }
@keyframes vxFill { from { transform: scaleX(0); } }
.vx-meter b { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: #fff; }
.vx-why { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.4; }
.vx-why li { position: relative; padding-left: 20px; color: rgba(255, 245, 245, .92); }
.vx-why li::before { position: absolute; left: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 900; }
.vx-why li.ok::before { content: "✓"; color: #fff; background: #2f9e76; }
.vx-why li.risk::before { content: "!"; color: #3d1600; background: #f5b642; }
.vx-why li.risk { color: #ffd6a0; }
/* ท้ายการ์ด: ป้ายราคา (ซ้าย) + ปุ่มดูทั้งหมด (ขวา) ชิดล่างเสมอ */
.vx-foot { position: relative; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; margin-top: auto; padding-right: 34px; }   /* ขวาเว้นให้หน้าไพ่มุมขวาล่าง / ป้ายยาวตกบรรทัดแทนการโดนตัด */
.vx-price { padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; transform: rotate(1deg); }
.vx-price.good { color: #0b3d2c; background: #7fe0bd; }
.vx-price.ok { color: #3d1600; background: #ffd08a; }
.vx-price.hi { color: #fff; background: #e5484d; }
.vx-price.na { color: rgba(255, 245, 245, .85); background: rgba(255, 255, 255, .14); }
.vx-more { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; text-decoration: none; color: #fff; background: var(--c); box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 50%, transparent); transition: transform .15s; }
.vx-more:hover { transform: translateX(3px); }
/* จำนวนคู่ในคอมโบ: เหรียญมุมขวาบนของการ์ด เต้นเบาๆ */
.vx-count { margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 50%; font-family: var(--font-head); font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); border: 2px solid rgba(255, 240, 200, .8); box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 55%, transparent); transform: rotate(10deg); animation: vxBob 2.6s ease-in-out infinite; }
.vx-note { margin: 12px 4px 0; font-size: 11px; color: var(--muted); font-style: italic; }
/* หน้ากรองคอมโบเดียว (?vip=): หัวข้อสีประจำธีม */
.vx-focus .vx-head b { color: color-mix(in srgb, var(--c) 80%, #1a1024); }
.vx-close { margin-left: auto; }
/* ชิปคอมโบ VIP บนการ์ดแมตช์ (ช่องกลาง): สีประจำธีม กดไปดูทุกคู่ในคอมโบนั้น */
.vx-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; }
.vx-chips > em { padding: 2px 7px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #3d1600; background: linear-gradient(135deg, #ffe0a8, #f5b642); }
.vx-chip i { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; font-style: normal; font-family: "Sriracha", var(--font-head); font-size: 12px; color: color-mix(in srgb, var(--c) 85%, #1a1024); background: #fffdf6; }   /* หน้าไพ่ประจำคอมโบ เช่น K♥ */
.vx-chip { padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-decoration: none; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .15s; }
.vx-chip:hover { transform: translateY(-1px) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .vx-card { transform: rotate(var(--tilt, 0deg)); } }

/* ---------- แผงไฮไลต์ VIP: สไตล์ "บอร์ดทำมือ" — 4 การ์ดกระจาย 4 มุม เอียงคนละนิด ขอบคนละแบบ มีเทปแปะ
   หัวข้อฟอนต์ลายมือ (Sriracha) + เส้นขีดเน้นแบบวาดมือ / ตราประทับ VIP กลางแผง / ไม่มีเลขอันดับ คู่แรกเด่นด้วยไฮไลต์ปากกา ---------- */
.vip-board {
  position: relative;
  margin-bottom: 20px;
  padding: 22px 22px 24px;
  border-radius: 22px 18px 26px 16px;
  border: 1.5px solid #e9c46a;
  background:
    radial-gradient(35% 70% at 50% 50%, rgba(255, 60, 80, .32), transparent 70%),
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(125deg, #07070a 0%, #1b080c 45%, #5a0a16 100%);
  box-shadow: 0 12px 30px rgba(60, 6, 14, .28), inset 0 1px 0 rgba(255, 220, 150, .25);
}
.vb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 90px; }   /* ช่องกลางกว้าง เว้นที่ให้ตราประทับ */
/* การ์ดแต่ละมุม: เอียง/ขยับไม่เท่ากัน ขอบคนละแบบ */
.vb-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 14px 10px; background: #fffdf7; border-radius: 6px 14px 8px 12px; box-shadow: 3px 5px 0 rgba(0, 0, 0, .25), 0 10px 22px rgba(0, 0, 0, .25); }
.vb-card:nth-child(1) { transform: rotate(-1.3deg); border: 2px solid var(--c); }
.vb-card:nth-child(2) { transform: rotate(1deg) translateY(8px); border: 2px dashed var(--c); border-radius: 14px 6px 12px 8px; }
.vb-card:nth-child(3) { transform: rotate(.8deg) translateX(6px); border: 4px double var(--c); border-radius: 10px 10px 4px 16px; }
.vb-card:nth-child(4) { transform: rotate(-.7deg) translateY(-4px); border: 2px solid var(--c); border-left-width: 7px; border-radius: 4px 16px 10px 6px; }
/* พื้นหลังสีสดคนละใบ ลายกระดาษคนละแบบ (เหมือนโน้ตแปะบอร์ดจริง): เส้นบรรทัด / ตาราง / จุด / เฉียง + ไล่สีอ่อน→เข้มของสีการ์ด */
.vb-card { border-color: color-mix(in srgb, var(--c) 85%, #000) !important; }
.vb-card:nth-child(1) {
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--c) 22%, transparent) 21px 22px),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #fff), color-mix(in srgb, var(--c) 30%, #fff));
}
.vb-card:nth-child(2) {
  background:
    linear-gradient(color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(200deg, color-mix(in srgb, var(--c) 14%, #fffbe8), color-mix(in srgb, var(--c) 34%, #fff));
}
.vb-card:nth-child(3) {
  background:
    radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1.4px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(140deg, color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 32%, #fff));
}
.vb-card:nth-child(4) {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--c) 10%, transparent) 10px 20px),
    linear-gradient(170deg, color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 34%, #fff));
}
.vb-row { border-bottom-color: color-mix(in srgb, var(--c) 35%, transparent) !important; }
.vb-card:hover { z-index: 2; transform: rotate(0) scale(1.02); transition: transform .2s; }
/* เทปกาวแปะมุมบน (คนละตำแหน่ง/มุมเอียง) */
.vb-card::before { content: ""; position: absolute; top: -11px; width: 74px; height: 20px; background: color-mix(in srgb, var(--c) 30%, rgba(255, 255, 240, .75)); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); opacity: .9; }
.vb-card:nth-child(1)::before { left: 18px; transform: rotate(-6deg); }
.vb-card:nth-child(2)::before { right: 22px; transform: rotate(5deg); }
.vb-card:nth-child(3)::before { left: 50%; transform: translateX(-50%) rotate(-3deg); }
.vb-card:nth-child(4)::before { right: 14px; transform: rotate(-8deg); }
.vb-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; }
.vb-title span { font-size: 20px; transform: rotate(-8deg); }
.vb-title b {
  position: relative;
  font-family: "Sriracha", var(--font-head);
  font-size: 19px;
  font-weight: 400;
  color: color-mix(in srgb, var(--c) 85%, #1a1024);
  /* เส้นขีดเน้นใต้หัวข้อแบบวาดมือ (SVG คลื่นหยักๆ ใช้สีจาก currentColor ไม่ได้ใน data-uri จึงใช้สีกลางแล้วจางลง) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 20 3, 35 9, 55 5 S 90 2, 118 6' fill='none' stroke='%23f0a93a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 8px no-repeat;
  padding-bottom: 4px;
}
.vb-title small { font-size: 11px; color: var(--muted); font-style: italic; }
.vb-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; text-decoration: none; color: var(--text); border-bottom: 1px dashed #e6dccb; }
.vb-row:last-child { border-bottom: none; }
.vb-row:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.vb-row .tb { width: 26px; height: 26px; }
/* คู่แรกของแต่ละบอร์ด: ตัวใหญ่ขึ้น + ไฮไลต์ปากกาเน้นข้อความเฉียงๆ */
.vb-row.top .vb-team b { font-size: 14px; background: linear-gradient(100deg, transparent 2%, color-mix(in srgb, var(--c) 28%, #fff6a8) 6% 94%, transparent 98%) 0 70% / 100% 55% no-repeat; }
.vb-row.top .vb-val b { font-size: 20px; }
.vb-row.top .tb { width: 30px; height: 30px; }
.vb-team { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vb-team b, .vb-team small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-team b { align-self: flex-start; max-width: 100%; }   /* กว้างเท่าชื่อ ไฮไลต์ปากกาจะได้ไม่ลากยาวทั้งแถว */
.vb-team b { font-size: 12.5px; font-weight: 800; }
.vb-team small { font-size: 10.5px; color: var(--muted); }
.vb-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.vb-val b { font-family: "Sriracha", var(--font-head); font-size: 17px; font-weight: 400; color: color-mix(in srgb, var(--c) 85%, #1a1024); white-space: nowrap; }
.vb-val small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.vb-empty { padding: 10px 0; text-align: center; font-size: 12px; color: var(--muted); font-style: italic; }
/* ตราประทับ VIP กลางแผง: วงกลมขอบทองสองชั้น เอียงนิดๆ คร่อมระหว่าง 4 การ์ด */
.vb-stamp {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 50%;
  color: #ffe0a8;
  text-align: center;
  background: radial-gradient(circle, #3a0710 55%, #1b080c);
  border: 3px double #e9c46a;
  box-shadow: 0 0 0 5px rgba(233, 196, 106, .18), 0 8px 20px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.vb-stamp em { font-style: normal; font-family: var(--font-head); font-size: 22px; font-weight: 600; letter-spacing: .12em; color: #f5b642; line-height: 1; }
.vb-stamp b { font-family: "Sriracha", var(--font-head); font-size: 14px; font-weight: 400; line-height: 1.2; color: #fff; }
.vb-stamp small { font-size: 9px; letter-spacing: .06em; color: rgba(255, 224, 168, .75); }
/* จอแคบ: การ์ดเรียงลงมา ตราประทับย้ายไปมุมบนแทนที่จะอยู่กลาง */
@media (max-width: 900px) {
  .vb-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 40px; }
  .vb-stamp { left: auto; right: 14px; top: 8px; width: 80px; height: 80px; transform: rotate(-12deg); }
  .vb-stamp em { font-size: 17px; }
  .vb-stamp b { font-size: 11px; }
  .vb-stamp small { display: none; }
  .vb-card:nth-child(n) { transform: rotate(0); }
}

/* การ์ดวันบอลในแผงซ้าย (แทนปุ่มวัน/หัวข้อวันที่ตัวใหญ่ในเนื้อหา) */
.is-card.is-days { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.dd-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background .15s; }
.dd-row:hover { background: var(--hover); }
.dd-ic { font-size: 18px; }
.dd-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.dd-txt b { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.dd-txt small { font-size: 10.5px; color: var(--muted); }
.dd-row em { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
/* เส้นคั่นบางๆ ระหว่างกลุ่มวันในรายการแมตช์ */
.day-div { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; }
.day-div i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.day-div span { font-size: 12.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }

/* ตัวเลือกลีก: แคปซูลในแถบที่สอง (header.php) สูงเท่าช่องสถิติ โทนฟ้า — [🏆 เลือกลีก | dropdown] เลือกแล้วกรองทันที */
.lg-pick {
  --c: #1e88ff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 360px;
  min-width: 220px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--c) 35%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 7%, #fff), color-mix(in srgb, var(--c) 18%, #fff));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 16%, transparent);
}
.lg-pick label { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #1a1024); white-space: nowrap; }
.lg-pick select { flex: 1 1 auto; min-width: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); background: #fff; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.lg-pick select:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }

/* ---------- ระบบแผน (plans.php): การ์ด "แผน" ในแผงซ้าย (ปุ่มเรียงลงมาทีละแผน) + ตราบนการ์ดคู่ที่ติด ---------- */
.is-plans { background: linear-gradient(160deg, #fffdf6, #fff4dc); border-color: #f0d49a; }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  border-radius: 16px;
  border: 1.5px solid #f0d49a;
  background: linear-gradient(135deg, #fffaf0, #fff1d6);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.plan-btn:hover { transform: translateX(3px); box-shadow: var(--shadow-hover); }
.plan-btn.active { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18), var(--shadow); }
.plan-btn img { width: 34px; height: auto; flex: none; filter: drop-shadow(0 2px 3px rgba(var(--shade-rgb), .3)); }
.plan-btn span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.plan-btn b { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #8a4b0f; }
.plan-btn small { font-size: 11.5px; color: var(--text-soft); }
.plan-btn em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: #e5484d; border-radius: 999px; padding: 2px 10px; }

/* ---------- 🂠 ตราแผนพิศดาร = ไพ่ใบเล็กเรียงเป็นกำมือ (plan_badges) ----------
   ไพ่งาช้างขอบแดงกรอบใน · เลขแผนมุมซ้ายบน/ขวาล่างกลับหัว · โล่แผนกลางใบ · ชื่อแผนด้านล่าง
   วางซ้อนกันด้วยระยะติดลบ เอียง/ยก/เยื้องไม่เท่ากันทุกใบ (nth-child) ให้ดูวางด้วยมือ ไม่เป็นระเบียบแบบเครื่อง
   ชี้เมาส์: ใบนั้นลอยขึ้นตั้งตรงมาอยู่หน้าสุด · ไม่มีแอนิเมชันวนตลอด (ไม่หน่วง) */
.plan-badges { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; row-gap: 10px; padding: 8px 6px 6px 10px; }
.plan-badge, .plan-combo {
  --r: -4deg; --y: 0px;
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 76px; height: 106px; margin-left: -10px; padding: 14px 5px 12px;   /* ซ้อนแค่ขอบ ~10px เห็นทุกใบเต็ม */
  border-radius: 8px; text-decoration: none; text-align: center;
  color: #7a1f1f;
  background: radial-gradient(90% 70% at 50% 45%, #fffdf7, #f6ecd6);
  border: 1.5px solid #c9a25a;
  outline: 1px solid rgba(179, 38, 44, .55); outline-offset: -5px;   /* กรอบในแบบไพ่จริง */
  box-shadow: -3px 3px 0 rgba(0, 0, 0, .06), -2px 6px 12px rgba(40, 20, 10, .28);
  transform: translateY(var(--y)) rotate(var(--r));
  transform-origin: 50% 110%;
  transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s;
}
/* เอียง/ยกคนละนิด วนทุก 7 ใบ — ค่าไม่เป็นลำดับ ให้ดูวางด้วยมือ */
.plan-badges > :nth-child(7n+1) { --r: -6deg; --y: 3px; }
.plan-badges > :nth-child(7n+2) { --r: -1deg; --y: -3px; }
.plan-badges > :nth-child(7n+3) { --r: 4deg; --y: 2px; }
.plan-badges > :nth-child(7n+4) { --r: -3deg; --y: -1px; }
.plan-badges > :nth-child(7n+5) { --r: 6deg; --y: 4px; }
.plan-badges > :nth-child(7n+6) { --r: 1deg; --y: -3px; }
.plan-badges > :nth-child(7n+7) { --r: -5deg; --y: 2px; }
/* ชี้เมาส์ = ไพ่ตั้งตรงแล้วขยายใหญ่ให้อ่านชัด · กด = ป๊อปอัปอธิบาย (app.js) */
.plan-badge, .plan-combo { cursor: pointer; }
.plan-badge:hover, .plan-combo:hover, .plan-badge:focus-visible, .plan-combo:focus-visible { z-index: 5; transform: translateY(-16px) rotate(0deg) scale(1.35); box-shadow: 0 18px 30px rgba(40, 20, 10, .4); }
/* เทปกาวแปะบางใบ */
.plan-badges > :nth-child(3n+2)::after { content: ""; position: absolute; top: -7px; left: 50%; width: 34px; height: 12px; margin-left: -17px; background: rgba(255, 240, 200, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-8deg); }
/* เลขแผนมุมไพ่ */
.pb-i { position: absolute; top: 5px; left: 7px; font-style: normal; font-family: "Sriracha", var(--font-head); font-size: 15px; line-height: 1; color: #b3262c; }
.pb-i.br { top: auto; left: auto; right: 7px; bottom: 5px; transform: rotate(180deg); }
.pb-k { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: #b3262c; opacity: .75; }
.plan-badge img { width: 38px; height: 38px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.pb-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-head); font-size: 10.5px; font-weight: 600; line-height: 1.15; color: #5a1a12; }
/* ไพ่คอมโบ (ติดครบทุกแผนในชุด เช่น 1+7+10): ใบแดงไล่ส้ม ตัวทอง เด่นสุดในกำมือ */
.plan-combo { color: #fff; background: radial-gradient(90% 70% at 50% 40%, #ff5a4f, #c81e2e); border-color: #ffd27a; outline-color: rgba(255, 220, 140, .7); box-shadow: -2px 6px 14px rgba(200, 30, 46, .45); }
.plan-combo .pb-i { color: #ffe08a; }
.plan-combo b { font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.1; color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.plan-combo small { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff; }
/* ไพ่ "พิศดาร 0" (ไม่ติดแผนไหนเลย): ใบสีฟ้า ตัวขาว บอกให้พัก/ข้ามคู่นี้ */
.plan-zero { width: 92px; color: #fff; background: radial-gradient(90% 70% at 50% 40%, #4cc3ff, #0a7cc4); border-color: #bfe8ff; outline-color: rgba(255, 255, 255, .6); box-shadow: -2px 6px 14px rgba(10, 124, 196, .45); }
.plan-zero .pb-i, .plan-zero .pb-k, .plan-zero .pb-d { color: #fff; opacity: 1; }
.plan-zero .pz-n { font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1; text-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.plan-zero .pb-d { -webkit-line-clamp: 3; font-weight: 700; }
/* กล่องหัวตอนกรองคอมโบ: ตราแผนที่ประกอบเป็นคอมโบ ต่อกันด้วย + */
.combo-hero-ic { font-size: 40px; line-height: 1; }
.combo-parts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.combo-parts > b { font-family: var(--font-head); font-size: 18px; color: var(--red); }
.combo-parts a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1.5px solid #f0d49a; background: linear-gradient(135deg, #fffaf0, #fff1d6); text-decoration: none; font-family: var(--font-head); font-size: 13px; color: #8a4b0f; }
.combo-parts a img { width: 24px; height: auto; }
.combo-parts a small { font-family: inherit; font-size: 11px; color: var(--text-soft); }
@keyframes planSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.fo-top .plan-badges { margin-left: 4px; }
.plan-hero-img { width: 46px; height: auto; }

/* ธงประเทศ (รูปในเครื่อง images/flags) */
.flag {
  width: 20px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  vertical-align: -2px;
  flex-shrink: 0;
}

/* ---------- แถบสถิติบนสุด ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stat-tile {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 12px;
  background: linear-gradient(160deg, #fffdfa, #f6f1fa);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.stat-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.st-value { font-size: 28px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.st-label { font-size: 12px; color: var(--muted); margin: 3px 0 8px; font-weight: 600; }
.delta { display: inline-block; font-size: 11px; font-weight: 700; color: var(--muted); }
.delta.up { color: var(--win); background: rgba(70, 211, 105, .12); border-radius: 999px; padding: 2px 9px; }

/* ตราทีม: โลโก้จริง หรือวงกลมตัวอักษรย่อ */
.tb { flex-shrink: 0; display: block; }
.tb-sm { width: 26px; height: 26px; }
.tb-lg { width: 84px; height: 84px; }
.tb-xl { width: 132px; height: 132px; }

img.tb {
  object-fit: contain;
  background: #fff;                 /* พื้นขาวรองโลโก้ */
  border-radius: 50%;
}
img.tb-sm { padding: 3px; }
img.tb-lg { padding: 11px; }
img.tb-xl { padding: 18px; }

.tb-mono {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(145deg, hsl(var(--h), 62%, 52%), hsl(var(--h), 62%, 34%));
}
/* ตราทีมชาติ: ธงจริงเต็มวงกลม ขอบขาว (nation_badge ใน nations.php) */
.tb-flag { position: relative; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(var(--shade-rgb), .3); }
.tb-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 45%), radial-gradient(circle at 50% 110%, rgba(0, 0, 0, .22), transparent 60%); }
.tb-sm.tb-flag { box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(var(--shade-rgb), .3); }
.tb-sm.tb-mono { font-size: 10px; }
.tb-lg.tb-mono { font-size: 28px; }
.tb-xl.tb-mono { font-size: 44px; }
/* ตราสำรองรูปทรงอื่น (สี่เหลี่ยม/สามเหลี่ยม/ห้าเหลี่ยม/หกเหลี่ยม/โล่/ข้าวหลามตัด/แปดเหลี่ยม จาก team_badge ใน ui.php)
   วาดด้วย SVG: วงแหวนสีทีมที่จุดต่างๆ ใช้ box-shadow ซึ่งออกมาเป็นวงกลมเสมอ ไม่เข้ากับรูปทรง
   จึงปิด box-shadow (ต้อง !important เพราะแต่ละจุดประกาศด้วย selector เจาะจงสูงกว่า) แล้วใช้เส้นขอบ SVG สีทีม (--ring) แทน */
.tb-shaped { position: relative; background: none; border-radius: 0; box-shadow: none !important; filter: drop-shadow(0 3px 6px rgba(var(--shade-rgb), .28)); }
.tb-shaped .tb-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tb-shaped .tb-bg path { fill: hsl(var(--h), 58%, 52%); stroke: var(--ring, #fff); stroke-width: 6; stroke-linejoin: round; }
.tb-shaped .tb-txt { position: relative; line-height: 1; }
.tb-shape-triangle .tb-txt { font-size: .78em; transform: translateY(22%); }   /* จุดกึ่งกลางสายตาของสามเหลี่ยมอยู่ต่ำกว่ากลางกล่อง */
.tb-shape-diamond .tb-txt { font-size: .85em; }
.tb-shape-shield .tb-txt { transform: translateY(-4%); }
.home .tb-shaped { --ring: var(--ca); }
.away .tb-shaped { --ring: var(--cb); }

/* ---------- สลับวัน ---------- */
.day-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.day-pills a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.056);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}
.day-pills a span { background: var(--red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.day-pills a:hover { background: var(--hover); border-color: var(--accent); }

.day { scroll-margin-top: 84px; }

h2.date-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 30px;
  font-weight: 600;
  font-family: var(--font-head);
  color: var(--text);
  margin: 30px 0 4px;
  padding: 0 0 0 14px;
  border-left: 5px solid var(--red);
  border-image: linear-gradient(180deg, var(--red), var(--accent)) 1;   /* แถบข้างหัวข้อวัน ไล่แดง→ลาเวนเดอร์ */
  line-height: 1.15;
}
h2.date-heading small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* หัวลีก */
.lg-head { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.lg-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; }
.lg-icon .league-logo { width: 38px; height: 38px; margin: 0; object-fit: contain; background: #fff; border-radius: 9px; padding: 3px; }
.lg-icon .league-trophy { font-size: 30px; line-height: 1; margin: 0; }
.lg-titles { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.lg-name { font-weight: 900; font-size: 19px; line-height: 1.2; }
.lg-country { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.lg-count { margin-left: auto; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 11px; }

/* หัวลีกตอนเลือกลีกจากเมนู */
.lg-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: radial-gradient(80% 200% at 0% 50%, rgba(139, 123, 220, .28), transparent 70%), linear-gradient(180deg, #fffdfa, #f5f0fa);
}
.lg-hero-icon { display: flex; }
.lg-hero-icon .league-logo { width: 64px; height: 64px; margin: 0; object-fit: contain; background: #fff; border-radius: 14px; padding: 5px; }
.lg-hero-icon .league-trophy { font-size: 52px; line-height: 1; margin: 0; }
.lg-hero-name { font-size: 28px; font-weight: 900; line-height: 1.15; }
.lg-back { margin-left: auto; color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; background: rgba(var(--ink-rgb), 0.08); border-radius: 6px; padding: 7px 14px; }
.lg-back:hover { background: rgba(var(--ink-rgb), 0.16); }

/* ---------- การ์ดประชัน ---------- */
/* ===== full-width matchup card: one match per row ===== */
.fo-list { display: flex; flex-direction: column; }   /* spacing comes from .fo-sep between cards */

/* divider between two matches: says which match comes next */
.fo-sep { display: flex; align-items: center; gap: 14px; padding: 18px 4px; }
.fo-sep i { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb), 0.24), transparent); }
.fo-sep span {
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-soft);
  background: rgba(var(--ink-rgb), 0.056);
  border: 1px solid rgba(var(--ink-rgb), 0.144);
  border-radius: 999px;
}
.fo-sep span::before { content: "▼  "; color: var(--muted); }

.fo {
  --ca: #8c1c1c; --ca-rgb: 140, 28, 28; --cb: #3b82f6; --cb-rgb: 59, 130, 246;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.072);
  color: var(--text);
  background:
    radial-gradient(52% 130% at 0% 30%, rgba(var(--ca-rgb), .16), transparent 62%),
    radial-gradient(52% 130% at 100% 30%, rgba(var(--cb-rgb), .16), transparent 62%),
    linear-gradient(180deg, #fffdfa, #f7f3fb);
  box-shadow: var(--shadow);
}
.fo::after {                /* bottom edge split in the two team colors */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ca) 0 49%, #fff 49% 51%, var(--cb) 51% 100%);
}

.fo-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.064); }

/* สลับสีคู่ต่อคู่ให้ตัดกันชัด (การ์ดเต็ม render_matchup: คู่แรก = tone-a):
   tone-a = ขาวสะอาด / tone-b = กรอบหนาแดงเข้มเกือบดำ + แถบหัวการ์ดเข้ม ตัวการ์ดข้างในคงพื้นสว่างให้อ่านง่าย
   (+ .fo X ด้านล่าง = สีสำหรับพื้นสว่างที่ใช้ร่วมทั้งสองโทน) */
.fo.tone-a {
  border-color: #e8e1ec;
  border-left: 7px solid #d9cfe4;
  background:
    radial-gradient(52% 130% at 0% 30%, rgba(var(--ca-rgb), .12), transparent 62%),
    radial-gradient(52% 130% at 100% 30%, rgba(var(--cb-rgb), .12), transparent 62%),
    #fff;
}
.fo.tone-a .fo-top { background: linear-gradient(90deg, #f6f2fa, #fff 75%); }
.fo.tone-b {
  border: 6px solid #2a060d;
  border-left: 10px solid #e5484d;
  background:
    radial-gradient(52% 130% at 0% 30%, rgba(var(--ca-rgb), .14), transparent 62%),
    radial-gradient(52% 130% at 100% 30%, rgba(var(--cb-rgb), .14), transparent 62%),
    linear-gradient(180deg, #fbf6f7, #f1e6e8);
  box-shadow: 0 12px 36px rgba(40, 5, 12, 0.35);
}
.fo.tone-b .fo-top { background: linear-gradient(90deg, #1d060b, #3a0a14 60%, #5a0a16); border-bottom-color: #12040a; color: #fff; }
.fo.tone-b .fo-top .vs-time, .fo.tone-b .fo-top .fo-round { color: #fff; }
.fo.tone-b .fo-top .fo-more { color: #fff; background: rgba(255, 255, 255, .14); }
.fo .fo-round { color: var(--text-soft); background: rgba(var(--ink-rgb), 0.07); border-color: rgba(var(--ink-rgb), 0.16); }
.fo .fo-more { color: var(--text); background: rgba(var(--ink-rgb), 0.08); }
.fo .fo-more:hover { background: rgba(var(--ink-rgb), 0.17); }
.fo .fo-team::before { color: var(--text); opacity: .05; }
.fo .fo-name { color: var(--text); text-shadow: none; }
.fo .fo-chip { color: var(--text-soft); background: rgba(255, 255, 255, .78); border-color: rgba(var(--ink-rgb), 0.2); }
.fo .fo-rank { background: rgba(255, 255, 255, .82); border-color: rgba(var(--ink-rgb), 0.14); }
.fo .rk-t b { color: var(--text); }
.fo .pos-row span { background: rgba(255, 255, 255, .82); border-color: rgba(var(--ink-rgb), 0.16); }
.fo .pos-row b { color: var(--text); }
.fo .kp-item { background: rgba(255, 255, 255, .88); box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.07); }
.fo .fo-facts { background: rgba(var(--ink-rgb), 0.1); }
.fo .fo-facts div { background: rgba(255, 255, 255, .88); }
.fo .fo-vs { color: var(--text); text-shadow: 4px 4px 0 rgba(243, 166, 191, .75); }
.fo .prob-odds b { color: var(--text); }
.fo .pb.d { background: #e8e2f0; color: var(--text-soft); text-shadow: none; }
.fo .mk { background: rgba(255, 255, 255, .85); border-color: rgba(var(--ink-rgb), 0.14); }
.fo .mk small { color: var(--muted); }
.fo .mv.dn { color: #15803d; }
.fo .mv.up { color: #e97b7b; }
.fo .fo-tabs button, .fo .fo-tabs span { color: var(--muted); background: rgba(var(--ink-rgb), 0.06); border-color: rgba(var(--ink-rgb), 0.16); }
.fo .fo-tabs span { color: var(--text); }
.fo .fo-tabs button:hover { color: var(--text); border-color: rgba(var(--ink-rgb), 0.4); }
.fo .fo-tabs button.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.fo .verdict { background: rgba(255, 255, 255, .82); border-color: rgba(var(--ink-rgb), 0.14); }
.fo .vd-bar .t { background: #e8e2f0; color: var(--text-soft); text-shadow: none; }
.fo .rd-ring, .fo .rd-axis { stroke: rgba(var(--ink-rgb), 0.16); }
.fo .rd-lbl { fill: var(--text-soft); }
.fo .rd-a { fill: rgba(var(--ca-rgb), .30); }
.fo .rd-b { fill: rgba(var(--cb-rgb), .30); }
.fo .cv { color: var(--muted); background: rgba(var(--ink-rgb), 0.05); }
.fo .cmp-row.w-h .cv.h { color: #fff; text-shadow: 0 1px 3px rgba(var(--shade-rgb), 0.22); background: var(--ca); box-shadow: 0 3px 12px rgba(var(--ca-rgb), .5); }
.fo .cmp-row.w-a .cv.a { color: #fff; text-shadow: 0 1px 3px rgba(var(--shade-rgb), 0.22); background: var(--cb); box-shadow: 0 3px 12px rgba(var(--cb-rgb), .5); }
.fo .cmp-row.w-t .cv { color: var(--text-soft); }
.fo .cl b { color: var(--text); }
.fo .cmp-row.w-h .cl em { color: var(--ca); color: color-mix(in srgb, var(--ca) 72%, #000); }
.fo .cmp-row.w-a .cl em { color: var(--cb); color: color-mix(in srgb, var(--cb) 72%, #000); }
.fo .bt { background: rgba(var(--ink-rgb), 0.09); }
.fo .cmp-sub { color: var(--text); border-top-color: rgba(var(--ink-rgb), 0.2); }
.fo .fo-lineup { background: rgba(255, 255, 255, .8); border-color: rgba(var(--ink-rgb), 0.14); }
.fo .lu-grid, .fo .lu-col + .lu-col { border-color: rgba(var(--ink-rgb), 0.12); }
.fo .lu-sub { color: var(--muted); }
.fo-no { font-size: 13px; font-weight: 900; color: #fff; border-radius: 999px; padding: 4px 12px; letter-spacing: .02em; }
.fo.tone-a .fo-no { background: var(--accent); }
.fo.tone-b .fo-no { background: var(--peach); color: #5a2e1c; }
.vs-time {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(139, 123, 220, .35);
}
.fo-more {
  margin-left: auto;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  background: rgba(var(--ink-rgb), 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  transition: background .15s;
}
.fo-more:hover { background: rgba(var(--ink-rgb), 0.176); }

/* layout follows the card's own width (works on the homepage and the narrower match page):
   default = two teams side by side with the charts full width below;
   very wide card = teams on the left/right of the charts */
.fo { container-type: inline-size; }
.fo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "h a" "m m";
  gap: 22px;
  align-items: start;
  padding: 6px 20px 28px;
}
.fo-team.home { grid-area: h; }
.fo-team.away { grid-area: a; }
.fo-mid { grid-area: m; }
.fo-team > .rec, .fo-team > .fo-facts { max-width: 440px; }
@container (min-width: 1500px) {
  .fo-grid { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(220px, 300px); grid-template-areas: "h m a"; }
}

/* team side: badge, name, formation, rank, record, facts */
.fo-team {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}
.fo-team::before {          /* big faded initials behind the team */
  content: attr(data-ini);
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-size: 130px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--text);
  opacity: .05;
  pointer-events: none;
}
.fo-team .tb-xl { width: 112px; height: 112px; }
.fo-team img.tb-xl { padding: 15px; }
.fo-team .tb-xl.tb-mono { font-size: 38px; }
.fo-team.home .tb { box-shadow: 0 0 0 4px var(--ca), 0 0 48px rgba(var(--ca-rgb), .8); }
.fo-team.away .tb { box-shadow: 0 0 0 4px var(--cb), 0 0 48px rgba(var(--cb-rgb), .8); }

.fo-name {
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 3px 14px rgba(var(--shade-rgb), 0.28);
  overflow-wrap: anywhere;
}
.fo-chip {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: 999px;
  padding: 2px 11px;
}
.fo-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--ink-rgb), 0.096);
  border-radius: 12px;
  padding: 6px 16px;
}
.rk-n { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.fo-team.home .rk-n { color: var(--ca); }
.fo-team.away .rk-n { color: var(--cb); }
.rk-t { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.rk-t b { font-size: 15px; }
.rk-t small { font-size: 11px; color: var(--muted); }

.rec { width: 100%; }
.rec-cap { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.rec-cap small { opacity: .7; }
.rec-bar { display: flex; height: 22px; gap: 2px; border-radius: 8px; overflow: hidden; font-size: 11px; font-weight: 800; }
.rec-bar i { display: flex; align-items: center; justify-content: center; min-width: 20px; font-style: normal; }
.rec-bar .w { background: #7fcbac; }
.rec-bar .d { background: #c9c1d6; }
.rec-bar .l { background: #f09a9a; }

.fo-facts {
  width: 100%;
  margin: 2px 0 0;
  display: grid;
  gap: 1px;
  background: rgba(var(--ink-rgb), 0.064);
  border-radius: 10px;
  overflow: hidden;
}
.fo-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; background: rgba(255, 255, 255, .85); font-size: 12.5px; }
.fo-facts dt { color: var(--muted); font-weight: 600; }
.fo-facts dd { margin: 0; font-weight: 800; text-align: right; }

/* center: VS, win probability, charts */
.fo-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; container-type: inline-size; }
.fo-vs {
  text-align: center;
  font-size: 58px;
  font-weight: 900;
  font-style: italic;
  line-height: .9;
  transform: skewX(-8deg);
  text-shadow: 0 0 30px rgba(255, 255, 255, .55), 4px 4px 0 var(--accent);
}

.prob { display: flex; flex-direction: column; gap: 7px; }
.prob-cap { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.prob-cap small { color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.prob-bar { display: flex; gap: 3px; height: 36px; border-radius: 10px; overflow: hidden; }
.pb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 6px rgba(var(--shade-rgb), 0.22);
  white-space: nowrap;
}
.pb.h { background: linear-gradient(90deg, var(--ca), rgba(var(--ca-rgb), .72)); }
.pb.d { background: #e8e2f0; color: var(--text-soft); text-shadow: none; }
.pb.a { background: linear-gradient(90deg, rgba(var(--cb-rgb), .72), var(--cb)); }
.prob-odds { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.prob-odds b { color: var(--text); margin-left: 3px; }

.fo-tabs { display: flex; justify-content: center; gap: 6px; }
.fo-tabs button, .fo-tabs span {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(var(--ink-rgb), 0.056);
  border: 1px solid rgba(var(--ink-rgb), 0.096);
  border-radius: 999px;
  padding: 5px 16px;
  cursor: pointer;
}
.fo-tabs span { cursor: default; color: var(--text); }
.fo-tabs button:hover { color: var(--accent-strong); border-color: rgba(var(--ink-rgb), 0.24); }
.fo-tabs button.on { color: #fff; background: var(--accent); border-color: var(--accent); }

.fo[data-r="10"] .rng-3 { display: none; }
.fo[data-r="3"] .rng-10 { display: none; }

.cmp { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 14px; align-items: center; }
.cmp-radar svg { display: block; width: 100%; height: auto; }
.rd-ring { fill: none; stroke: rgba(var(--ink-rgb), 0.104); }
.rd-axis { stroke: rgba(var(--ink-rgb), 0.104); }
.rd-lbl { fill: var(--text-soft); font-size: 14px; font-weight: 700; }
/* center column too narrow for radar + bars side by side (depends on the card's own width, not the screen):
   radar goes above, bars below */
@container (max-width: 720px) {
  .cmp { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cmp-radar { max-width: 320px; width: 100%; margin: 0 auto; }
}
.rd-a { fill: rgba(var(--ca-rgb), .38); stroke: var(--ca); stroke-width: 2; stroke-linejoin: round; }
.rd-b { fill: rgba(var(--cb-rgb), .38); stroke: var(--cb); stroke-width: 2; stroke-linejoin: round; }

/* comparison rows: the winning side of each row glows in its team color, the losing side is dimmed,
   the center says which side leads and by how much (more / less) */
.cmp-bars { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 156px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 12px;
}
.cmp-row.w-h { background: linear-gradient(90deg, rgba(var(--ca-rgb), .16), transparent 55%); }
.cmp-row.w-a { background: linear-gradient(270deg, rgba(var(--cb-rgb), .16), transparent 55%); }
.cv {
  text-align: center;
  padding: 5px 4px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: rgba(var(--ink-rgb), 0.032);
}
.cmp-row.w-h .cv.h { color: #fff; background: rgba(var(--ca-rgb), .42); box-shadow: inset 0 0 0 1px var(--ca), 0 0 16px rgba(var(--ca-rgb), .5); }
.cmp-row.w-a .cv.a { color: #fff; background: rgba(var(--cb-rgb), .42); box-shadow: inset 0 0 0 1px var(--cb), 0 0 16px rgba(var(--cb-rgb), .5); }
.cmp-row.w-t .cv { color: var(--text-soft); }
.cl { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.15; }
.cl b { font-size: 12.5px; color: var(--text); }
.cl em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.cmp-row.w-h .cl em { color: var(--ca); color: color-mix(in srgb, var(--ca) 72%, #000); }
.cmp-row.w-a .cl em { color: var(--cb); color: color-mix(in srgb, var(--cb) 72%, #000); }
.bt { display: flex; height: 12px; border-radius: 6px; background: rgba(var(--ink-rgb), 0.064); overflow: hidden; }
.bt.h { justify-content: flex-end; }
.bt i { display: block; height: 100%; border-radius: 6px; opacity: .3; }
.bt.h i { background: var(--ca); }
.bt.a i { background: var(--cb); }
.cmp-row.w-h .bt.h i { opacity: 1; box-shadow: 0 0 14px var(--ca); }
.cmp-row.w-a .bt.a i { opacity: 1; box-shadow: 0 0 14px var(--cb); }
.cmp-row.w-t .bt i { opacity: .65; }

.cmp-sub { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(var(--ink-rgb), 0.128); font-size: 12.5px; font-weight: 800; color: var(--text); }
.cmp-sub small { margin-left: 6px; font-weight: 600; color: var(--muted); }
.cmp-sub + .cmp-bars { margin-top: 8px; }

/* overall verdict: who leads in how many aspects */
.verdict { background: rgba(255, 255, 255, .72); border: 1px solid rgba(var(--ink-rgb), 0.096); border-radius: 14px; padding: 12px 16px 14px; }
.vd-title { margin-bottom: 8px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.vd-title small { font-weight: 600; }
.vd-bar { display: flex; gap: 3px; height: 32px; border-radius: 9px; overflow: hidden; font-size: 12.5px; font-weight: 900; }
.vd-bar span { display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; color: #fff; text-shadow: 0 1px 5px rgba(var(--shade-rgb), 0.22); }
.vd-bar .h { background: linear-gradient(90deg, var(--ca), rgba(var(--ca-rgb), .7)); }
.vd-bar .t { background: #e8e2f0; color: var(--text-soft); text-shadow: none; }
.vd-bar .a { background: linear-gradient(90deg, rgba(var(--cb-rgb), .7), var(--cb)); }
.vd-text { margin-top: 9px; text-align: center; font-size: 14px; font-weight: 700; }
.vd-text b { font-weight: 900; }

.fo-empty { text-align: center; color: var(--muted); padding: 22px 10px; font-size: 13px; }
.fo-slot { padding: 6px 0 4px; }
/* คั่นก่อนเข้าเนื้อหาเชิงลึก เฉพาะตอนกางจากการ์ดย่อ (compact=true) — บอกว่าจากนี้เป็นข้อมูลใหม่ ไม่ได้ซ้ำกับที่เห็นตอนย่อ */
.fo-deeper { display: flex; align-items: center; gap: 12px; margin: 4px 20px 6px; }
.fo-deeper span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fo-deeper::before, .fo-deeper::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }

/* round tag, odds movement, market lines */
.fo-round {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
  background: rgba(var(--ink-rgb), 0.08);
  border: 1px solid rgba(var(--ink-rgb), 0.144);
  border-radius: 6px;
  padding: 4px 11px;
}
.mv { font-style: normal; font-size: 10px; margin-left: 2px; }
.mv.dn { color: var(--win); }
.mv.up { color: var(--live); }
.mkt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mk {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--ink-rgb), 0.096);
  border-radius: 8px;
  padding: 5px 12px;
}
.mk em { font-style: normal; color: var(--muted); font-weight: 700; }
.mk b { font-size: 14px; }
.mk small { color: var(--muted); font-size: 11.5px; }

/* team panel: position split, key players */
.pos-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pos-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--ink-rgb), 0.096);
  border-radius: 6px;
  padding: 3px 9px;
}
.pos-row b { color: var(--text); margin-left: 1px; }
.fo .pos-row .ico { color: var(--text-soft); }
.kp { width: 100%; max-width: 440px; }
.kp-cap { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.kp-cap small { opacity: .7; }
.kp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .85);
  border-radius: 10px;
  text-align: left;
}
.kp-ph { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #ece6f3; flex-shrink: 0; }
.kp-mono { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.kp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kp-n b, .kp-n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-n b { font-size: 13px; }
.kp-n small { font-size: 11px; color: var(--muted); }
.kp-v { font-size: 13px; font-weight: 800; white-space: nowrap; }

/* ===== rank: giant number behind each logo + bolder rank badge ===== */
.fo-team.has-rk::before { top: -46px; font-size: 200px; letter-spacing: -.05em; opacity: .26; }
.fo-team.has-rk.home::before { color: var(--ca); }
.fo-team.has-rk.away::before { color: var(--cb); }
.fo-rank { gap: 12px; padding: 8px 22px; border-width: 2px; }
.fo-team.home .fo-rank { border-color: var(--ca); box-shadow: 0 0 22px rgba(var(--ca-rgb), .5); }
.fo-team.away .fo-rank { border-color: var(--cb); box-shadow: 0 0 22px rgba(var(--cb-rgb), .5); }
.fo-rank.top3 { background: linear-gradient(135deg, rgba(255, 196, 60, .3), rgba(255, 255, 255, .72)); }
.fo .fo-rank.top3 { background: linear-gradient(135deg, rgba(255, 196, 60, .55), rgba(255, 255, 255, .85)); }
.rk-lbl { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.rk-n { font-size: 46px; }
.rk-n i { margin-right: 4px; font-size: 27px; font-style: normal; vertical-align: 5px; }

/* ===== star duel: the best players of both sides face each other, flanking the VS (fighting-game style) ===== */
.duel { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; margin: 0 auto; }
.dl-cap { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.dl-cap small { margin-left: 6px; font-weight: 600; }
.dl-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.dl-stage .fo-vs { font-size: 52px; }

/* ===== pitch: formation + expected starting XI of both teams ===== */
.pitch-wrap { display: flex; flex-direction: column; gap: 8px; }
.pitch-cap { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.pitch-cap small { margin-left: 6px; font-weight: 600; }
.pitch-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.ph-badge { display: flex; align-items: center; }
.ph.home .ph-badge .tb { box-shadow: 0 0 0 2px var(--ca); border-radius: 50%; }
.ph.away .ph-badge .tb { box-shadow: 0 0 0 2px var(--cb); border-radius: 22%; }
.ph.away { justify-content: flex-end; text-align: right; }
.ph b { font-weight: 900; font-style: italic; text-transform: uppercase; }
.ph-f { padding: 2px 10px; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(var(--shade-rgb), 0.22); border-radius: 6px; }
.ph.home .ph-f { background: var(--ca); }
.ph.away .ph-f { background: var(--cb); }
.ph em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.ph em.est { color: #f5a623; }                       /* estimated lineup: clearly flagged */
.fo .ph em.est { color: #b45309; }
.pitch {
  position: relative;
  aspect-ratio: 100 / 60;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid rgba(var(--ink-rgb), 0.16);
  background: repeating-linear-gradient(90deg, #93cfa0 0 10%, #88c796 10% 20%);
  box-shadow: inset 0 0 70px rgba(var(--shade-rgb), 0.152);
}
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .42); }
.pitch-lines * { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* 3 โซน หลัง-กลาง-หน้า: เส้นประขาวชัด 2 เส้น + แรเงาโซนกลาง + ป้ายชื่อโซนบนหัวสนาม */
.pitch-lines .pz-line { stroke: rgba(255, 255, 255, .95); stroke-width: 3px; stroke-dasharray: 8 6; }
.pitch-lines .pz-mid { fill: rgba(255, 255, 255, .1); stroke: none; }
.pz-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: -4px; }   /* แถบเหนือสนาม แบ่ง 3 ช่องตรงกับ 3 โซน */
.pz-labels span { padding: 4px 6px; border-radius: 8px 8px 0 0; text-align: center; font-size: 11.5px; font-weight: 800; color: #fff; background: #3f8a55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-labels span:nth-child(2) { background: #2f7045; }
.pz-labels i { font-style: normal; }
.pz-labels .pz-short { display: none; }
@media (max-width: 700px) { .pz-labels .pz-long { display: none; } .pz-labels .pz-short { display: inline; } }

/* บทวิเคราะห์ใต้สนาม: สไตล์แผน 2 ทีม · ผล 3 โซน (คน vs คน ใครชนะ) · ระบบอ่านเกม */
.pz-read { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.pz-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pz-style { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border-top: 4px solid var(--ca); }
.pz-style.away { border-top-color: var(--cb); }
.pz-style b { font-size: 14px; }
.pz-style span { padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 900; color: #fff; background: var(--ca); }
.pz-style.away span { background: var(--cb); }
.pz-style em { font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--red-deep); }
.pz-style small { flex-basis: 100%; font-size: 11.5px; color: var(--text-soft); }
.pz-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pz-row { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-left: 5px solid #cfc8da; }
.pz-row + .pz-row { border-top: 2px dashed var(--border); }
.pz-row.w-home { border-left-color: var(--ca); background: linear-gradient(90deg, rgba(var(--ca-rgb), .12), transparent 60%); }
.pz-row.w-away { border-left-color: var(--cb); background: linear-gradient(90deg, rgba(var(--cb-rgb), .12), transparent 60%); }
.pz-zone { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pz-zone b { font-size: 13.5px; }
.pz-zone small { font-size: 11px; color: var(--muted); }
.pz-count { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 0 6px; }
.pz-count span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; background: var(--ca); }
.pz-count span.a { background: var(--cb); }
.pz-count i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
.pz-count small { grid-column: 1 / -1; font-size: 10px; color: var(--muted); }
.pz-verdict { justify-self: end; text-align: right; font-size: 13px; font-weight: 800; }
.pz-row.w-home .pz-verdict { color: color-mix(in srgb, var(--ca) 80%, #1a1024); }
.pz-row.w-away .pz-verdict { color: color-mix(in srgb, var(--cb) 80%, #1a1024); }
.pz-sum { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; background: linear-gradient(135deg, #fff7e0, #ffeaf0); border: 1px solid #f3d9a8; }
.pz-sum b { color: var(--red-deep); }
@media (max-width: 560px) {
  .pz-labels span { font-size: 8.5px; padding: 1px 5px; }
  .pz-styles { grid-template-columns: 1fr; }
  .pz-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pz-verdict { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

.pp {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100px;
  transform: translate(-50%, -50%);
  transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.pitch-wrap.interactive .pp { cursor: pointer; }
.pitch-wrap.interactive .pp:not(.pp-bench) { cursor: grab; touch-action: none; }
.pitch-wrap.interactive .pp:not(.pp-bench).dragging { cursor: grabbing; animation: none; transition: none; z-index: 5; }
.pp:hover { z-index: 4; }   /* ตัวที่ชี้เมาส์อยู่ลอยขึ้นมาบนสุด กันซ้อนทับกับนักเตะอีกฝั่งเวลาแผนใช้เต็มสนาม */

/* เอฟเฟกต์แยกสองทีมแบบเห็นชัดจากไกลๆ ไม่ใช่แค่สีต่างกัน (เฉพาะบนสนาม ไม่ใช้กับตัวสำรองที่วางนิ่งเป็นแถว):
   เจ้าบ้าน = วงแหวนกระเพื่อมเด้งออกซ้อนกัน 2 วง (ripple) / ทีมเยือน = วงแหวนหมุนรอบตัว (spin) ต่างชนิดกันชัดเจน */
.pp.home:not(.pp-bench)::before,
.pp.home:not(.pp-bench)::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%) scale(.5);
  border-radius: 50%;
  border: 3px solid var(--ca);
  box-shadow: 0 0 10px rgba(var(--ca-rgb), .8);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: ripplePing 1.8s ease-out infinite;
}
.pp.home:not(.pp-bench)::after { animation-delay: -.9s; }
@keyframes ripplePing {
  0% { transform: translateX(-50%) scale(.5); opacity: .95; }
  75% { opacity: 0; }
  100% { transform: translateX(-50%) scale(1.55); opacity: 0; }
}

.pp.away:not(.pp-bench)::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 22%;
  background: conic-gradient(from 0deg, rgba(var(--cb-rgb), 0) 0deg, var(--cb) 70deg, rgba(var(--cb-rgb), 0) 150deg, rgba(var(--cb-rgb), 0) 210deg, var(--cb) 290deg, rgba(var(--cb-rgb), 0) 360deg);
  z-index: -1;
  pointer-events: none;
  opacity: .9;
  animation: spinRing 1.4s linear infinite;
}
@keyframes spinRing {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* รูปทรง: เจ้าบ้าน = วงกลม / ทีมเยือน = เหลี่ยมมน — แยกสองทีมได้แม้ตาบอดสี */
.pp-av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #efe9f6; box-shadow: 0 0 0 4px var(--ca), 0 0 18px rgba(var(--ca-rgb), .9), 0 3px 10px rgba(var(--shade-rgb), 0.22); }
.pp.away .pp-av { border-radius: 22%; box-shadow: 0 0 0 4px var(--cb), 0 0 18px rgba(var(--cb-rgb), .9), 0 3px 10px rgba(var(--shade-rgb), 0.22); }
.pp-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-photo.pp-mono {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 14px;
  background: linear-gradient(145deg, hsl(var(--h), 62%, 52%), hsl(var(--h), 62%, 34%));
}
.pp-no {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 2px #000;
  background: var(--ca);
  box-shadow: 0 0 0 2px #fff;
}
.pp.away .pp-no { background: var(--cb); }
.pp-nm { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--text); padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); }
.pp.home .pp-nm { box-shadow: inset 0 -2px 0 var(--ca); }
.pp.away .pp-nm { box-shadow: inset 0 -2px 0 var(--cb); }
.pp-sc { font-size: 10px; font-weight: 900; color: #7a4d00; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }   /* player score (0-10) under the name */
.pitch-wrap.interactive .pp:hover .pp-av { box-shadow: 0 0 0 3px var(--butter), 0 4px 14px rgba(var(--shade-rgb), 0.24); }
.pp.pp-selected .pp-av { box-shadow: 0 0 0 3px var(--mint), 0 0 22px rgba(143, 211, 189, .85); }

/* ป้ายแนวทางการเล่น (ประมาณจากตำแหน่งในผัง) มุมซ้ายบนของรูป */
.pp-role {
  position: absolute;
  left: -4px;
  top: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 5px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--text);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(var(--ink-rgb), 0.21);
}

/* เส้นคู่ปะทะระหว่างสองฝั่ง (รุกเจอรับ/กลางเจอกลาง/รับเจอรุก) วาดใหม่ทุกครั้งที่แผน/ตัวจริงเปลี่ยน */
.pitch-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mline {
  stroke-width: .7;
  stroke-linecap: round;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation: mlineIn .5s ease forwards;
}
.mline.fav-home { stroke: var(--ca); }
.mline.fav-away { stroke: var(--cb); }
@keyframes mlineIn { 0% { opacity: 0; } 55% { opacity: .8; } 100% { opacity: .38; } }

/* เปรียบเทียบราย 3 แนว: รุกเจอรับ / กลางเจอกลาง / รับเจอรุก เป็น % ใต้สนาม */
.matchup-bands { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 4px; }
.mb-cap { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.mb-cap small { margin-left: 6px; font-weight: 600; }
.mb-row { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; }
.mb-side { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; color: var(--muted); }
.mb-side.h { text-align: left; }
.mb-side.a { text-align: right; }
.mb-side.lead { color: var(--accent-strong); }
.mb-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(var(--ink-rgb), 0.064); }
.mb-bar i { display: block; height: 100%; }
.mb-bar i.h { background: linear-gradient(90deg, rgba(var(--ca-rgb), .55), var(--ca)); }
.mb-bar i.a { background: linear-gradient(90deg, var(--cb), rgba(var(--cb-rgb), .55)); }
.mb-label { text-align: center; font-size: 11px; color: var(--muted); margin: 0 0 10px; }
.mb-label small { opacity: .8; }
.fo .mb-bar { background: rgba(var(--ink-rgb), 0.08); }

/* ===== ตัวสำรอง: การ์ดนักเตะแบบเดียวกับบนสนาม แต่วางนิ่ง ๆ เป็นแถว คลิกได้ ===== */
.pitch-bench summary small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; margin-top: 2px; }
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pb-col { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 6px; padding: 12px; }
.pb-col + .pb-col { border-left: 1px solid rgba(var(--ink-rgb), 0.08); }
.pp-bench { position: static; transform: none; width: 62px; animation: none; transition: transform .15s, opacity .2s; }
.pp-bench:hover { transform: translateY(-3px); }
.pp-bench .pp-av { width: 36px; height: 36px; }
.pp-bench .pp-nm { font-size: 9.5px; max-width: 62px; white-space: normal; text-align: center; line-height: 1.2; color: var(--text); text-shadow: none; }
.pp-bench .pp-sc { color: #b89a2f; }
.pb-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; }
.fo .pb-col + .pb-col { border-left-color: rgba(var(--ink-rgb), 0.12); }
.fo .pp-bench .pp-nm { color: var(--text); }

/* ===== เปลี่ยนแผนการเล่น ===== */
.pf-select {
  background: rgba(var(--ink-rgb), 0.08);
  color: var(--text);
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 6px;
}
.fo .pf-select { background: rgba(var(--ink-rgb), 0.08); color: var(--text); border-color: rgba(var(--ink-rgb), 0.2); }

/* ===== จำลองการแข่งขัน ===== */
.sim-wrap { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sim-btn {
  background: linear-gradient(135deg, var(--accent), var(--pink));
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(139, 123, 220, .45);
  transition: transform .15s, box-shadow .15s;
}
.sim-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 36px rgba(139, 123, 220, .6); }
.sim-btn:active { transform: translateY(0) scale(.98); }
.sim-btn[disabled] { opacity: .6; cursor: wait; transform: none; }

.sim-result { width: 100%; display: flex; flex-direction: column; gap: 16px; animation: simIn .35s ease both; }
@keyframes simIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sim-score-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.sim-score-team { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); max-width: 120px; text-align: center; }
.sim-score-big { display: flex; align-items: center; gap: 10px; font-size: 52px; font-weight: 900; font-style: italic; font-variant-numeric: tabular-nums; }
.sim-score-big .dash { font-size: 28px; color: var(--muted); }
.sim-note { text-align: center; font-size: 12.5px; color: var(--muted); }

.sim-fact-cap, .sim-lines-cap { text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.sim-factors { display: flex; flex-direction: column; gap: 8px; }
.sim-frow { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; font-size: 12px; }
.sim-frow b { font-variant-numeric: tabular-nums; }
.sim-frow .bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(var(--ink-rgb), 0.064); }
.sim-frow .bar i { display: block; height: 100%; }
.sim-frow .bar i.h { background: var(--ca); }
.sim-frow .bar i.a { background: var(--cb); }
.sim-flabel { text-align: center; color: var(--muted); font-weight: 700; font-size: 11px; }
.fo .sim-frow .bar { background: rgba(var(--ink-rgb), 0.08); }

.sim-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sim-line { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(var(--ink-rgb), 0.048); border: 1px solid rgba(var(--ink-rgb), 0.08); border-radius: 999px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-line b { color: #b7791f; }
.sim-line.top { background: rgba(139, 123, 220, .22); border-color: rgba(139, 123, 220, .5); }
.fo .sim-line { background: rgba(var(--ink-rgb), 0.06); border-color: rgba(var(--ink-rgb), 0.16); color: var(--text); }
.sim-again { align-self: center; background: transparent; border: 1px solid rgba(var(--ink-rgb), 0.2); color: var(--text); font-weight: 800; font-size: 12.5px; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.sim-again:hover { background: rgba(var(--ink-rgb), 0.08); }
.fo .sim-again { color: var(--text); border-color: rgba(var(--ink-rgb), 0.25); }

/* ===== ป๊อปอัปรายละเอียดนักเตะ ===== */
.pp-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(var(--ink-rgb), .32); backdrop-filter: blur(4px); }
.pp-modal[hidden] { display: none; }
.pp-modal-card { position: relative; width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 26px 22px 22px; box-shadow: 0 30px 80px rgba(var(--shade-rgb), 0.24); animation: simIn .2s ease both; }
.pp-modal-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(var(--ink-rgb), 0.064); color: var(--text); font-size: 14px; cursor: pointer; }
.pp-modal-close:hover { background: rgba(var(--ink-rgb), 0.144); }
.pp-modal-photo { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden; box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(var(--shade-rgb), 0.2); }
.pp-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-modal-photo.pp-mono { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 900; color: #fff; background: linear-gradient(145deg, hsl(var(--h), 62%, 52%), hsl(var(--h), 62%, 34%)); }
.pp-modal-name { text-align: center; font-size: 19px; font-weight: 900; margin-bottom: 2px; }
.pp-modal-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.pp-modal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pp-modal-stats div { background: rgba(var(--ink-rgb), 0.04); border-radius: 10px; padding: 8px 10px; text-align: center; }
.pp-modal-stats dt { font-size: 10.5px; color: var(--muted); font-weight: 700; margin: 0 0 2px; }
.pp-modal-stats dd { margin: 0; font-size: 15px; font-weight: 900; }
.pp-modal-hint { text-align: center; font-size: 11.5px; color: var(--muted); margin: 4px 0 8px; }
.pp-modal-swaplist { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.pp-modal-swap { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), 0.096); background: rgba(var(--ink-rgb), 0.048); color: var(--text); font-weight: 800; font-size: 12.5px; text-align: left; cursor: pointer; }
.pp-modal-swap:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-modal-swap small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; margin-top: 1px; }
.pp-modal-swap:hover small { color: rgba(255, 255, 255, .85); }

/* ===== หน้ารายละเอียดแมตช์: การ์ดสรุปด้านบนให้เด่นและอ่านง่ายขึ้น ===== */
main.match-detail .fo-top { font-size: 13px; padding: 14px 18px; }
main.match-detail .pband { padding: 10px 26px 22px; }
main.match-detail .pb-true strong { font-size: 64px; }
main.match-detail .pb-diff { font-size: 15px; max-width: 320px; }
main.match-detail .pb-mid .fo-vs { font-size: 78px; }
main.match-detail .fo { box-shadow: 0 0 0 1px rgba(139, 123, 220, .35), 0 30px 70px rgba(var(--shade-rgb), 0.2); }

/* ===== team power: team (sum of the 11 scores) / coach / true power ===== */
.pw { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(var(--ink-rgb), 0.096); border-radius: 14px; }
.pw-cap { text-align: center; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.pw-cap small { margin-left: 6px; font-weight: 600; color: var(--muted); }
.pw-foot { text-align: center; font-size: 11px; color: var(--muted); }
.cmp-row.pw-true { padding-block: 8px; }
.pw-true .cv { padding: 8px 4px; font-size: 20px; }
.pw-true .cl b { font-size: 14px; }
.fo .pw { background: rgba(255, 255, 255, .82); border-color: rgba(var(--ink-rgb), 0.14); }

.fo-xi { display: none; }
@media (max-width: 700px) {
  .fo-xi { display: block; }
  .pp { width: 34px; }
  .pp-av { width: 28px; height: 28px; }
  .pp::before { width: 38px; height: 38px; top: 0; }
  .pp-no { width: 15px; height: 15px; font-size: 8px; }
  .pp-nm, .pp-sc { display: none; }
  .pp-role { min-width: 13px; height: 13px; font-size: 7px; }
  .mb-row { grid-template-columns: 36px 1fr 36px; }
  .mb-side { font-size: 11px; }
  .pitch-heads { grid-template-columns: 1fr; }
  .ph.away { justify-content: flex-start; text-align: left; }
  .pb-grid { grid-template-columns: 1fr; }
  .pb-col + .pb-col { border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.08); }
  main.match-detail .pb-true strong { font-size: 44px; }
  main.match-detail .pb-mid .fo-vs { font-size: 46px; }
}

/* ===== arena: the two managers are the main visual at the top (slanted "character select" frames flanking VS) ===== */
/* middle column = the 6-axis radar of both teams, VS sits right under it */
.arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "h r a" "h v a";
  align-items: center;
  gap: 0 12px;
  padding: 22px 24px 10px;
}
.arena .ar-side.home { grid-area: h; }
.arena .ar-side.away { grid-area: a; }
.ar-radarbox { grid-area: r; align-self: end; width: 340px; max-width: 100%; }
.ar-radarbox svg { display: block; width: 100%; height: auto; }
.ar-vsbox { grid-area: v; align-self: start; display: flex; justify-content: center; }
.ar-vsbox .fo-vs { margin-top: -8px; font-size: 86px; }
.arena.no-radar { grid-template-areas: "h v a"; }             /* no stats for this match: VS stays between the two */
.arena.no-radar .ar-vsbox { align-self: center; }
.arena.no-radar .ar-vsbox .fo-vs { margin-top: 0; font-size: 96px; }
.arena.no-vs { grid-template-areas: "h r a"; }                /* VS lives in the power band below instead */
.arena.no-vs .ar-radarbox { align-self: center; }

/* ===== power band under the managers: TRUE power face-off, team power hangs above, coach multiplier below ===== */
.pband { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 6px 24px 18px; }
.pb-side { --c: var(--ca); --c-rgb: var(--ca-rgb); display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pb-side.away { --c: var(--cb); --c-rgb: var(--cb-rgb); }
.pb-team, .pb-coach {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 8px;
  padding: 6px 18px;
  font-size: 13px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--ink-rgb), 0.144);
  border-radius: 999px;
}
.pb-team span, .pb-coach span { font-weight: 700; color: var(--muted); }
.pb-team b, .pb-coach b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pb-team::after, .pb-coach::before { content: ""; position: absolute; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); background: rgba(var(--c-rgb), .85); }
.pb-team::after { top: 100%; }            /* team power hangs down to the big number */
.pb-coach::before { bottom: 100%; }       /* coach multiplier connects up to it */
.pb-true { display: flex; flex-direction: column; align-items: center; margin: 14px 0; }
.pb-true em { font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pb-true strong {
  font-size: clamp(58px, 6.2vw, 96px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 34px rgba(var(--c-rgb), .9), 3px 3px 0 rgba(var(--c-rgb), .55);
}
.pb-side:not(.win) .pb-true strong { opacity: .72; }              /* the weaker side is dimmed */
.pb-side.win .pb-true strong { text-shadow: 0 0 50px rgba(var(--c-rgb), 1), 4px 4px 0 var(--c); }
.pb-coach small { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: 800; }
.pb-coach small.dn { color: var(--live); }
.pb-coach small.up { color: var(--win); }
.pb-coach small.eq { color: var(--muted); }
.pb-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pb-mid .fo-vs { font-size: 66px; }
.pb-diff { max-width: 200px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.3; }
.pb-tug { grid-column: 1 / -1; display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: 6px; }
.pb-tug i { display: block; height: 100%; }
.pb-tug .h { background: var(--ca); }
.pb-tug .a { background: var(--cb); }
.pb-foot { grid-column: 1 / -1; text-align: center; font-size: 11px; color: var(--muted); }

/* ===== ฟอร์มล่าสุด หน้า-กลาง-หลัง เป็นสัญลักษณ์ใหญ่ๆ (ไฟ/ลม/ไม้/น้ำ · โล่) จัดแบบ "ปะทะกันตรงกลาง": เจ้าบ้านชิดขวา ทีมเยือนชิดซ้าย มาเจอกันกลางแถว ตัวเลขอยู่ริมนอก
   สัญลักษณ์ไถลเข้าหากันแล้วมีแฟลชตรงจุดชน (ครั้งเดียวตอนโหลด) ฝั่งที่ดีกว่ายังเด้งต่อเนื่องเบาๆ ให้รู้สึกมีชีวิต ===== */
.form-signs { display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 18px; }
.fs-cap { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.fs-cap small { margin-left: 6px; font-weight: 600; }
.fs-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(var(--ca-rgb), .12), rgba(var(--ink-rgb), 0.03) 46%, rgba(var(--ink-rgb), 0.03) 54%, rgba(var(--cb-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.fo .fs-row { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.1); }
.fs-line { position: relative; display: grid; grid-template-columns: 1fr 76px 76px 1fr; align-items: center; width: 100%; column-gap: 0; overflow: hidden; }
.fs-icon-big {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(var(--shade-rgb), 0.24));
}
.fs-icon-big.h { animation: fsSlideInH .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.fs-icon-big.a { animation: fsSlideInA .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.fs-icon-big.h.lead { z-index: 1; animation: fsSlideInHLead .55s cubic-bezier(.34, 1.56, .64, 1) both, fsBounce 1.7s ease-in-out .55s infinite; }
.fs-icon-big.a.lead { z-index: 1; animation: fsSlideInALead .55s cubic-bezier(.34, 1.56, .64, 1) both, fsBounce 1.7s ease-in-out .55s infinite; }
@keyframes fsSlideInH { 0% { transform: translateX(-46px) scale(.3); opacity: 0; } 60% { transform: translateX(6px) scale(1.12); opacity: 1; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes fsSlideInA { 0% { transform: translateX(46px) scale(.3); opacity: 0; } 60% { transform: translateX(-6px) scale(1.12); opacity: 1; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes fsSlideInHLead { 0% { transform: translateX(-46px) scale(.3); opacity: 0; } 60% { transform: translateX(6px) scale(1.34); opacity: 1; } 100% { transform: translateX(0) scale(1.22); opacity: 1; } }
@keyframes fsSlideInALead { 0% { transform: translateX(46px) scale(.3); opacity: 0; } 60% { transform: translateX(-6px) scale(1.34); opacity: 1; } 100% { transform: translateX(0) scale(1.22); opacity: 1; } }
@keyframes fsBounce { 0%, 100% { transform: scale(1.22) translateY(0); } 50% { transform: scale(1.22) translateY(-5px); } }
.fs-icon-big.h.lead::before, .fs-icon-big.a.lead::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  z-index: -1;
  animation: fsGlow 1.4s ease-in-out .55s infinite;
}
.fs-icon-big.h.lead::before { background: radial-gradient(circle, rgba(var(--ca-rgb), .55) 0%, rgba(var(--ca-rgb), 0) 72%); }
.fs-icon-big.a.lead::before { background: radial-gradient(circle, rgba(var(--cb-rgb), .55) 0%, rgba(var(--cb-rgb), 0) 72%); }
@keyframes fsGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* แฟลชระเบิดตรงจุดที่สองสัญลักษณ์ชนกัน (ครั้งเดียว จับเวลาให้พอดีตอนไถลเข้ามาถึง) */
.fs-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 209, 102, .65) 42%, rgba(255, 209, 102, 0) 72%);
  pointer-events: none;
  opacity: 0;
  animation: fsBurst .5s ease-out .48s both;
}
@keyframes fsBurst { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 35% { transform: translate(-50%, -50%) scale(1.5); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.fs-val { display: flex; flex-direction: column; animation: fsValIn .4s ease .32s both; }
.fs-val.h { align-items: flex-end; text-align: right; padding-right: 8px; }
.fs-val.a { align-items: flex-start; text-align: left; padding-left: 8px; }
@keyframes fsValIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fs-val b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.fs-val small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fs-val.lead b { font-size: 22px; }
.fs-val.h.lead b { color: var(--ca); }
.fs-val.a.lead b { color: var(--cb); }
.fs-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .01em;
  padding: 3px 11px;
  border-radius: 999px;
  color: #2b2438;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: 0 3px 10px rgba(var(--shade-rgb), 0.14), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  opacity: 0;
  animation: fsTagPop .4s cubic-bezier(.34, 1.56, .64, 1) .75s both, fsTagPulse 1.7s ease-in-out .95s infinite;
}
@keyframes fsTagPop { 0% { opacity: 0; transform: scale(.4) translateY(4px); } 70% { opacity: 1; transform: scale(1.15) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fsTagPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.fs-val.h .fs-tag { background: linear-gradient(135deg, var(--ca), rgba(var(--ca-rgb), .8)); box-shadow: 0 3px 12px rgba(var(--ca-rgb), .6), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.fs-val.a .fs-tag { background: linear-gradient(135deg, var(--cb), rgba(var(--cb-rgb), .8)); box-shadow: 0 3px 12px rgba(var(--cb-rgb), .6), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.fs-lbl { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.3; margin-bottom: 2px; }
/* ป้ายหมวดหมู่แบบแท็กนิตยสาร สีต่างกันตามธีมแต่ละแถว (รุก/กลาง/รับ/วินัย) ให้แยกแยะง่ายและมีสีสันขึ้นโดยไม่ต้องพึ่งไอคอนอย่างเดียว */
.fs-lbl span { display: inline-block; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }
.fs-atk .fs-lbl span { background: rgba(249, 115, 22, .18); color: #fb923c; }
.fs-mid .fs-lbl span { background: rgba(59, 130, 246, .18); color: #60a5fa; }
.fs-def .fs-lbl span { background: rgba(34, 197, 94, .18); color: #4ade80; }
.fs-dis .fs-lbl span { background: rgba(234, 179, 8, .2); color: #facc15; }
.fo .fs-atk .fs-lbl span { background: rgba(249, 115, 22, .16); color: #c2410c; }
.fo .fs-mid .fs-lbl span { background: rgba(59, 130, 246, .16); color: #1d4ed8; }
.fo .fs-def .fs-lbl span { background: rgba(34, 197, 94, .16); color: #15803d; }
.fo .fs-dis .fs-lbl span { background: rgba(234, 179, 8, .22); color: #92400e; }
.vs-drow .fs-atk .fs-lbl span { background: rgba(249, 115, 22, .16); color: #c2410c; }
.vs-drow .fs-mid .fs-lbl span { background: rgba(59, 130, 246, .16); color: #1d4ed8; }
.vs-drow .fs-def .fs-lbl span { background: rgba(34, 197, 94, .16); color: #15803d; }
.vs-drow .fs-dis .fs-lbl span { background: rgba(234, 179, 8, .22); color: #92400e; }
/* เส้นคั่นบางๆ แบบนิตยสาร ระหว่างแต่ละแถวสถิติ แทนที่จะให้ชิดกันเรียบๆ */
.form-signs .fs-row + .fs-row { position: relative; }
.form-signs .fs-row + .fs-row::before { content: ""; position: absolute; top: -6px; left: 20%; right: 20%; height: 1px; background: currentColor; opacity: .08; }
.fo .fs-val b { color: var(--text-soft); }
@media (max-width: 560px) {
  .fs-line { grid-template-columns: 1fr 46px 46px 1fr; }
  .fs-icon-big { font-size: 34px; }
  .fs-val b { font-size: 14px; }
  .fs-val.lead b { font-size: 16px; }
  .fs-val small { font-size: 8.5px; }
  .fs-lbl { font-size: 8.5px; }
  .fs-tag { font-size: 9.5px; padding: 2px 7px; margin-top: 3px; }
}
/* light card */
.fo .pb-team, .fo .pb-coach { background: rgba(255, 255, 255, .88); border-color: rgba(var(--ink-rgb), 0.16); }
.fo .pb-true strong { color: var(--text); text-shadow: 3px 3px 0 rgba(var(--c-rgb), .5); }
.fo .pb-side.win .pb-true strong { text-shadow: 4px 4px 0 var(--c); }
.fo .pb-coach small.dn { color: #b91c1c; }
.fo .pb-coach small.up { color: #15803d; }
@media (max-width: 560px) {
  .pband { padding: 4px 10px 14px; gap: 4px 6px; }
  .pb-true strong { font-size: 46px; }
  .pb-mid .fo-vs { font-size: 36px; }
  .pb-diff { max-width: 96px; font-size: 11px; }
  .pb-team, .pb-coach { padding: 4px 10px; font-size: 11px; }
  .pb-team b, .pb-coach b { font-size: 14px; }
  .pb-coach small { font-size: 10px; }
}
.ar-side {
  --c: var(--ca); --c-rgb: var(--ca-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}
.ar-side.away { --c: var(--cb); --c-rgb: var(--cb-rgb); }
.ar-side::before {           /* giant league rank behind the portrait */
  content: attr(data-rk);
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-size: 230px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--c);
  opacity: .25;
  pointer-events: none;
}
.ar-glow { position: relative; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(var(--c-rgb), .85)); }
.ar-frame { width: 200px; height: 236px; overflow: hidden; background: linear-gradient(165deg, var(--c), #fff 150%); }
.ar-side.home .ar-frame { clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
.ar-side.away .ar-frame { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.ar-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ar-mono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 72px; font-weight: 900; font-style: italic; color: rgba(255, 255, 255, .92); }
.ar-logo { position: absolute; bottom: -14px; z-index: 2; }
.ar-side.home .ar-logo { left: -18px; }
.ar-side.away .ar-logo { right: -18px; }
.ar-logo .tb { width: 68px; height: 68px; box-shadow: 0 0 0 3px var(--c), 0 4px 14px rgba(var(--shade-rgb), 0.22); }
.ar-logo img.tb { padding: 9px; }
.ar-logo .tb.tb-mono { font-size: 22px; }
.ar-role { margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ar-coach {
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.12;
  text-shadow: 0 3px 14px rgba(var(--shade-rgb), 0.28);
  overflow-wrap: anywhere;
}
.ar-team { font-size: 13.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-soft); }
/* no manager data (lower leagues): the big team logo is the main visual instead */
.ar-logoonly { margin: 30px 0 4px; }
.ar-logoonly .tb { width: 156px; height: 156px; box-shadow: 0 0 0 4px var(--c), 0 0 52px rgba(var(--c-rgb), .85); }
.ar-logoonly img.tb { padding: 22px; }
.ar-logoonly .tb.tb-mono { font-size: 52px; }
.ar-logoonly + .ar-team { font-size: clamp(18px, 1.8vw, 26px); font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--text); }
/* narrow: portraits + VS on the first row, radar full width underneath */
@media (max-width: 700px) {
  .arena { grid-template-areas: "h v a" "r r r"; row-gap: 6px; }
  .arena.no-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h a" "r r"; }   /* VS is in the power band: two managers, radar below */
  .ar-vsbox { align-self: center; }
  .ar-radarbox { justify-self: center; width: min(100%, 330px); margin-top: 8px; }
}
/* light card */
.fo .ar-coach, .fo .ar-logoonly + .ar-team { color: var(--text); text-shadow: none; }
.fo .ar-team { color: var(--text-soft); }
.fo .ar-side::before { color: var(--c); color: color-mix(in srgb, var(--c) 62%, #000); opacity: .2; }   /* silver team colors stay visible on the pale card */
.fo .fo-team.home .rk-n { color: var(--ca); color: color-mix(in srgb, var(--ca) 68%, #000); }
.fo .fo-team.away .rk-n { color: var(--cb); color: color-mix(in srgb, var(--cb) 68%, #000); }
@media (max-width: 560px) {
  .arena { padding: 14px 10px 4px; }
  .ar-vsbox .fo-vs, .arena.no-radar .ar-vsbox .fo-vs { margin-top: 0; font-size: 46px; }
  .ar-frame { width: 122px; height: 144px; }
  .ar-side::before { font-size: 130px; top: -14px; }
  .ar-logo .tb { width: 48px; height: 48px; }
  .ar-logo { bottom: -10px; }
  .ar-side.home .ar-logo { left: -10px; }
  .ar-side.away .ar-logo { right: -10px; }
  .ar-coach { font-size: 14px; }
  .ar-team { font-size: 12px; }
  .ar-logoonly .tb { width: 96px; height: 96px; }
  .ar-logoonly { margin-top: 20px; }
}

.dl-big { --c: var(--ca); --c-rgb: var(--ca-rgb); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.dl-big.away { --c: var(--cb); --c-rgb: var(--cb-rgb); }
.dl-glow { filter: drop-shadow(0 0 12px rgba(var(--c-rgb), .75)); transition: transform .3s; }
.dl-big.win .dl-glow { filter: drop-shadow(0 0 24px rgba(var(--c-rgb), 1)); }
a:hover .dl-big, .fo:hover .dl-big.home .dl-glow { transform: translateX(6px); }
.fo:hover .dl-big.away .dl-glow { transform: translateX(-6px); }
.dl-frame {
  width: 156px;
  height: 178px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--c), #fff 145%);
}
.dl-big.home .dl-frame { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }      /* slanted edges pointing at the VS */
.dl-big.away .dl-frame { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.dl-big:not(.win) .dl-frame { filter: saturate(.72) brightness(.82); }              /* the weaker side is dimmed */
.dl-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dl-mono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 56px; font-weight: 900; font-style: italic; color: rgba(255, 255, 255, .92); }
.dl-name {
  font-size: clamp(14px, 1.25vw, 19px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(var(--shade-rgb), 0.28);
  overflow-wrap: anywhere;
}
.dl-meta { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.dl-value { padding: 3px 16px; font-size: 20px; font-weight: 900; border-radius: 8px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(var(--ink-rgb), 0.128); }
.dl-big.win .dl-value { color: #fff; text-shadow: 0 1px 3px rgba(var(--shade-rgb), 0.2); background: var(--c); border-color: var(--c); box-shadow: 0 0 20px rgba(var(--c-rgb), .75); }

.dl-vbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; }
.dl-vbar .tug { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; }
.dl-vbar .tug i { display: block; height: 100%; }
.dl-vbar .tug .h { background: var(--ca); }
.dl-vbar .tug .a { background: var(--cb); }

.dl-list { display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.dl-row.w-h { background: linear-gradient(90deg, rgba(var(--ca-rgb), .2), transparent 60%); }
.dl-row.w-a { background: linear-gradient(270deg, rgba(var(--cb-rgb), .2), transparent 60%); }
.dl-c { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dl-c.away { justify-content: flex-end; text-align: right; }
.dl-sm { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center top; background: #ece6f3; }
.dl-sm.dl-mono { width: 46px; height: 46px; font-size: 15px; font-style: normal; }
.dl-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dl-n b, .dl-n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-n b { font-size: 13.5px; }
.dl-n small { font-size: 11px; color: var(--muted); }
.dl-v { flex-shrink: 0; padding: 3px 10px; font-size: 14px; font-weight: 900; white-space: nowrap; border-radius: 7px; background: rgba(var(--ink-rgb), 0.056); color: var(--muted); }
.dl-row.w-h .dl-c.home .dl-v { color: #fff; background: var(--ca); box-shadow: 0 0 14px rgba(var(--ca-rgb), .55); }
.dl-row.w-a .dl-c.away .dl-v { color: #fff; background: var(--cb); box-shadow: 0 0 14px rgba(var(--cb-rgb), .55); }
.dl-x { font-size: 12px; font-weight: 900; font-style: italic; color: var(--accent); }

/* duel on the light card */
.fo .dl-name { color: var(--text); text-shadow: none; }
.fo .dl-value { background: rgba(255, 255, 255, .88); border-color: rgba(var(--ink-rgb), 0.16); }
.fo .dl-big.win .dl-value { color: #fff; background: var(--c); border-color: var(--c); }
.fo .dl-v { background: rgba(var(--ink-rgb), 0.07); color: var(--muted); }
.fo .dl-sm { background: #ece6f3; }

@media (max-width: 560px) {
  .fo-team.has-rk::before { font-size: 130px; top: -28px; }
  .rk-n { font-size: 34px; }
  .rk-lbl { display: none; }
  .fo-rank { gap: 8px; padding: 6px 12px; }
  .rk-t b, .rk-t small { white-space: nowrap; }
  .dl-frame { width: 104px; height: 120px; }
  .dl-stage .fo-vs { font-size: 42px; }
  .dl-value { font-size: 15px; padding: 2px 10px; }
  .dl-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dl-x { display: none; }
  .dl-c.away { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

/* starting XI + substitutes (collapsible) */
.fo-lineup { background: rgba(255, 255, 255, .72); border: 1px solid rgba(var(--ink-rgb), 0.08); border-radius: 12px; }
.fo-lineup > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
}
.fo-lineup > summary::-webkit-details-marker { display: none; }
.fo-lineup > summary small { color: var(--muted); font-weight: 600; }
.fo-lineup > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.fo-lineup[open] > summary::after { transform: rotate(180deg); }
.lu-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(var(--ink-rgb), 0.08); }
.lu-col { padding: 12px 16px; }
.lu-col + .lu-col { border-left: 1px solid rgba(var(--ink-rgb), 0.08); }
.lu-team { font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.lu-team small { color: var(--muted); font-weight: 600; }
.lu-xi, .lu-sub { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lu-xi li, .lu-sub li { display: flex; gap: 10px; padding: 3px 0; }
.lu-no { width: 24px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.lu-sub-cap { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.lu-sub { font-size: 12.5px; color: var(--muted); }

@keyframes enterL { from { opacity: 0; transform: translateX(-34px) scale(.9); } }
@keyframes enterR { from { opacity: 0; transform: translateX(34px) scale(.9); } }
@keyframes vsPulse { 50% { transform: skewX(-8deg) scale(1.06); } }
@keyframes vsShake { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ป้ายสถานะ (ไม่ใช่สกอร์) */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.chip-live { background: var(--live); color: #fff; }
.chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.chip-done { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.chip-warn { background: #fdf0d5; color: #9a6400; }

.vr-meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ico { display: inline-block; flex: none; vertical-align: -2px; }

/* ---------- ลีกอื่น: พับเก็บ + แถว VS กะทัดรัด ---------- */
details.more-leagues {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 18px;
}
details.more-leagues > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  font-size: 16px;
}
details.more-leagues > summary::-webkit-details-marker { display: none; }
details.more-leagues > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s ease; }
details.more-leagues[open] > summary::after { transform: rotate(180deg); }
details.more-leagues > summary small { color: var(--muted); font-weight: 600; font-size: 12px; }
details.more-leagues[open] > summary { border-bottom: 1px solid var(--border); }

.lg-compact { padding-bottom: 6px; }
.lg-compact .lg-head { margin: 18px 0 8px; gap: 10px; }
.lg-compact .lg-icon, .lg-compact .lg-icon .league-logo { width: 26px; height: 26px; }
.lg-compact .lg-icon .league-trophy { font-size: 20px; }
.lg-compact .lg-name { font-size: 14px; }

/* แถวกะทัดรัด: แถวละ 1 คู่เต็มความกว้าง กดเพื่อกางเป็นการ์ดเปรียบเทียบเต็ม
   สลับโทนพีช/ลาเวนเดอร์เหมือนการ์ดเต็ม .fo — คู่คี่ = พีช (tone-b), คู่คู่ = ลาเวนเดอร์ (tone-a) ตั้งคลาสจาก index.php
   กรอบหนา+ชัดขึ้น + เงาใต้การ์ด แยกแต่ละคู่ออกจากกัน/จากพื้นหลังหน้าเว็บให้เห็นชัดเจน โดยเฉพาะการ์ดเข้มที่ก่อนหน้านี้กลืนกับพื้นเว็บที่เข้มอยู่แล้ว */
.vs-rows { display: flex; flex-direction: column; gap: 12px; }
details.vs-drow { border-radius: 16px; overflow: hidden; position: relative; }
/* ---------- การ์ด Joker แปะทับมุมขวาบนของการ์ดแมตช์ (vip_sticker_html) ----------
   ล้นออกนอกขอบการ์ดแบบเอาการ์ดจริงมาแปะ เอียงไม่เท่ากัน มีเทปกาว หลายใบซ้อนเป็นพัด ชี้เมาส์แล้วกางออก */
details.vs-drow.has-joker { overflow: visible; z-index: 2; margin-top: 18px; }
.vj-stack { position: absolute; z-index: 5; top: -22px; right: -12px; width: 176px; height: 250px; pointer-events: none; }
.vj-card {
  --k: 0;
  position: absolute;
  top: 0;
  right: calc(var(--k) * 34px);
  z-index: calc(10 - var(--k));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 162px;
  padding: 8px 10px 10px;
  border-radius: 12px 8px 14px 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  pointer-events: auto;
  background: radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--c) 55%, transparent), transparent 75%), linear-gradient(160deg, #1d060b, #2c0912 55%, #12040a);
  border: 2px solid color-mix(in srgb, var(--c) 70%, #fff);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, .22), 0 12px 26px rgba(40, 5, 12, .45);
  transform: rotate(calc(7deg - var(--k) * 9deg)) translateY(calc(var(--k) * 10px));
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), right .25s;
  animation: vjIn .7s cubic-bezier(.22, 1.4, .36, 1) backwards;
  animation-delay: calc(var(--k) * .12s + .2s);
}
.vj-card.joker { border-image: linear-gradient(120deg, #ff3d57, #ff9800, #16a34a, #06b6d4, #6366f1, #a855f7) 1; }
@keyframes vjIn { from { opacity: 0; transform: translate(40px, -30px) rotate(25deg) scale(.7); } }
/* เทปกาวแปะบนการ์ดใบหน้าสุด */
.vj-card:first-child::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(255, 240, 200, .55); transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
/* ชี้เมาส์: กางพัดออก ใบที่ชี้ลอยขึ้นมาหน้าสุด */
.vj-stack:hover .vj-card { right: calc(var(--k) * 150px); }
.vj-card:hover { z-index: 20; transform: rotate(0deg) scale(1.06); }
.vj-face { position: absolute; top: 6px; left: 7px; padding: 2px 6px; border-radius: 5px; font-family: "Sriracha", var(--font-head); font-size: 15px; line-height: 1; color: color-mix(in srgb, var(--c) 85%, #1a1024); background: #fffdf6; border: 1.5px solid var(--c); transform: rotate(-8deg); }
.vj-face i { font-style: normal; }
.vj-card.joker .vj-face { background: linear-gradient(135deg, #ff3d57, #ff9800, #16a34a, #6366f1, #a855f7); border-color: #fff; }
.vj-art { width: 74px; height: 74px; }
.vj-art .vx-joker-art { width: 74px; height: 74px; animation: vxJester 2.8s ease-in-out infinite; }
.vj-name { font-family: "Sriracha", var(--font-head); font-size: 14px; font-weight: 400; line-height: 1.15; color: color-mix(in srgb, var(--c) 40%, #fff); }
.vj-pick { width: 100%; padding: 3px 6px; border-radius: 7px; font-size: 11.5px; font-weight: 800; line-height: 1.25; color: #3d1600; background: linear-gradient(110deg, #ffe0a8, #f5b642); transform: rotate(-1.5deg); }
.vj-why { font-size: 10.5px; line-height: 1.3; color: rgba(255, 240, 240, .88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vj-score { font-size: 10px; color: rgba(255, 225, 225, .7); }
.vj-score b { font-family: var(--font-head); font-size: 13px; color: #ffe0a8; }
/* การ์ดที่มี Joker: เว้นขวาของแถวบนไม่ให้ Joker ทับชื่อทีมเยือนมากเกินไป */
details.vs-drow.has-joker .vr-top { padding-right: 150px; }
@media (max-width: 900px) {
  /* จอแคบ: Joker ไม่ลอยทับ วางเป็นแถวการ์ดเอียงๆ บนสุดของการ์ดแทน */
  details.vs-drow.has-joker { margin-top: 0; }
  details.vs-drow.has-joker .vr-top { padding-right: 0; }
  .vj-stack { position: static; width: auto; height: auto; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
  .vj-card { position: relative; right: auto !important; width: 150px; }
  .vj-stack:hover .vj-card { right: auto; }
}
/* เลขคู่ตัวใหญ่จางๆ มุมขวาบน แบบเลขหน้านิตยสาร — ตกแต่งล้วนๆ (ซ้ำกับป้าย vr-no ที่อ่านได้จริง) วาดจาก data-n ด้วย CSS ล้วน ไม่เพิ่ม DOM/รูปภาพ จึงไม่กระทบความเร็ว */
details.vs-drow::before {
  content: attr(data-n);
  position: absolute;
  top: -14px;
  right: 6px;
  font-size: 76px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
details.vs-drow > * { position: relative; z-index: 1; }
/* สลับสีคู่ต่อคู่ให้ตัดกันชัด: คู่คี่ (tone-b, คู่แรก) = ขาวสะอาด / คู่คู่ (tone-a) = แดงเข้มเกือบดำ
   การ์ดเข้ม: เฉพาะกรอบ/พื้น/ชื่อทีมเป็นโทนเข้ม ส่วนแผงข้อมูลข้างใน (ช่องกลาง แผงทีม) คงพื้นขาวทึบให้อ่านง่าย */
details.vs-drow.tone-b { background: #fff; border: 2px solid #e8e1ec; border-left: 6px solid #d9cfe4; box-shadow: 0 3px 14px rgba(var(--shade-rgb), 0.12); }
details.vs-drow.tone-b[open] { border-color: var(--red); }
details.vs-drow.tone-a {
  background: radial-gradient(60% 90% at 50% 0%, rgba(255, 60, 80, .22), transparent 70%), linear-gradient(165deg, #1d060b, #3a0a14 55%, #12040a);
  border: 2px solid #5a1020;
  border-left: 6px solid #e5484d;
  box-shadow: 0 6px 20px rgba(40, 5, 12, .35);
}
details.vs-drow.tone-a[open] { border-color: #e5484d; }
.tone-a .vr-side .vr-name { color: #fff; }
.tone-a .vr-side .vr-role { color: rgba(255, 220, 220, .75); }
.tone-a .vr-center, .tone-a .vr-panel { background: #fff; }
.tone-a .vr-more { color: rgba(255, 220, 220, .7); }
.tone-a.vs-drow::before { color: #fff; opacity: .1; }   /* เลขคู่ตัวใหญ่จางมุมขวา */
.tone-a .vr-hc { border-color: rgba(255, 255, 255, .15); }
summary.vs-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
}
summary.vs-row::-webkit-details-marker { display: none; }
.vs-drow summary.vs-row { color: var(--text); }
.vs-drow summary.vs-row:hover { background: rgba(var(--ink-rgb), 0.06); }
.tone-a summary.vs-row { color: var(--text); }
.tone-a summary.vs-row:hover { background: rgba(255, 255, 255, .05); }
details.vs-drow.tone-b > .fo-slot { background: #fff; }
details.vs-drow.tone-a > .fo-slot { background: transparent; }
details.vs-drow > .fo-slot { padding: 0 10px 12px; }
details.vs-drow .fo { box-shadow: none; }

/* ---------- การ์ดแมตช์หน้าแรก: แถวบน 3 ช่อง (ทีมเหย้า | ช่องกลางกว้างสุด | ทีมเยือน) ---------- */
.vr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.vr-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px; text-align: center; align-self: start; }   /* โลโก้ + ชื่อทีมชิดบนสุดของแถว ไม่ลอยกลางตามช่องกลางที่สูง */
.vr-logo { position: relative; display: flex; }
.vr-logo .tb { width: 76px; height: 76px; }
.vr-logo img.tb { padding: 9px; }
.vr-logo .tb.tb-mono { font-size: 26px; }
.vr-side.home .tb { box-shadow: 0 0 0 3px var(--ca), 0 6px 18px rgba(var(--ca-rgb), .35); }
.vr-side.away .tb { box-shadow: 0 0 0 3px var(--cb), 0 6px 18px rgba(var(--cb-rgb), .35); }
/* ตัวเต็ง: ประกายหมุนรอบโลโก้ + ป้ายสีเนยใต้ชื่อ */
.vr-side.is-fav .vr-logo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #f9d98f 8%, transparent 20%, transparent 50%, #f9d98f 58%, transparent 70%);
  z-index: -1;
  animation: favSpin 3.2s linear infinite;
}
@keyframes favSpin { to { transform: rotate(360deg); } }
.vr-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.vr-role { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.vr-fav { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #5a3b00; background: linear-gradient(135deg, #fff3d1, #f9d98f 55%, #f3c27a); border: 1.5px solid #f3c77a; box-shadow: 0 3px 10px rgba(240, 180, 106, .45); }

/* ช่องกลาง: เลขคู่+เวลา / VS / เรดาร์ / ใครลุ้นกว่า+ราคา */
.vr-center { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 10px 14px 12px; border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .06); }
.vr-center .lean { width: 100%; }
.vr-r1 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.vr-no { font-size: 11px; font-weight: 900; color: #fff; border-radius: 999px; padding: 3px 9px; letter-spacing: .02em; }
.tone-a .vr-no { background: var(--accent); }
.tone-b .vr-no { background: var(--peach); color: #5a2e1c; }
.vr-time { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.vr-vs { font-size: 28px; font-weight: 600; font-style: italic; line-height: 1; letter-spacing: .04em; color: var(--text); text-shadow: 3px 3px 0 rgba(243, 166, 191, .75); }

/* แถวล่าง 2 ช่อง: ข้อมูลของแต่ละทีมแยกฝั่ง (ฟอร์มล่าสุด + ปัจจัยแฮนดิแคปของทีมนั้น) */
.vr-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.vr-panel { --c: var(--ca); --c-rgb: var(--ca-rgb); min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(var(--ink-rgb), .08); border-top: 4px solid var(--c); }
.vr-panel.home { padding-right: 8px; }   /* ด้านที่ติดกลางการ์ดบางลง ไอคอนสองฝั่งจะได้ชิดกัน */
.vr-panel.away { padding-left: 8px; }
.vr-panel.away { --c: var(--cb); --c-rgb: var(--cb-rgb); }
.tp-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 800; text-transform: uppercase; }
.tp-head i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tp-head small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; white-space: nowrap; }
.tp-cap, .tp-sub { margin: 2px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tp-sub { margin-top: 12px; }
.tp-cap small, .tp-sub small { margin-left: 4px; font-weight: 600; opacity: .85; }
.tp-rows { display: flex; flex-direction: column; gap: 8px; }
/* แถวฟอร์ม "ไอคอนชนกันกลางการ์ด": เจ้าบ้าน = [ป้ายผล][ชื่อแนว][ตัวเลข][ไอคอน] / ทีมเยือน = [ไอคอน][ตัวเลข][ชื่อแนว][ป้ายผล]
   ไอคอนสองฝั่งอยู่ติดเส้นกลางการ์ดชิดกันโดยไม่มีตัวเลขคั่น (ลำดับใน HTML เหมือนกัน สลับตำแหน่งด้วย grid-column) */
.tp-row { display: grid; align-items: center; gap: 8px; min-height: 64px; padding: 4px 8px; border-radius: 14px; background: rgba(var(--ink-rgb), .035); }
.tp-row > * { grid-row: 1; }
.vr-panel.home .tp-row { grid-template-columns: 54px minmax(0, 1fr) auto 64px; padding-right: 2px; }
.vr-panel.home .tp-win { grid-column: 1; }
.vr-panel.home .tp-lbl { grid-column: 2; align-items: flex-end; text-align: right; }
.vr-panel.home .tp-val { grid-column: 3; text-align: right; }
.vr-panel.home .tp-ic  { grid-column: 4; }
.vr-panel.away .tp-row { grid-template-columns: 64px auto minmax(0, 1fr) 54px; padding-left: 2px; }
.vr-panel.away .tp-ic  { grid-column: 1; }
.vr-panel.away .tp-val { grid-column: 2; }
.vr-panel.away .tp-lbl { grid-column: 3; }
.vr-panel.away .tp-win { grid-column: 4; }
/* หัวแผงเจ้าบ้านกลับด้านให้ชิดขวาเข้าหากลางเหมือนแถว */
.vr-panel.home .tp-head { flex-direction: row-reverse; }
.vr-panel.home .tp-head small { margin-left: 0; margin-right: auto; }
.vr-panel.home .tp-cap, .vr-panel.home .tp-sub { text-align: right; }
.tp-lbl { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.tp-lbl small { font-size: 11px; font-weight: 500; color: var(--muted); }
.tp-val { min-width: 2.4em; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.tp-win { padding: 4px 0; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; text-align: center; white-space: nowrap; }

/* ไอคอนใหญ่ + เคลื่อนไหวแบบประหยัด: ขยับเฉพาะ transform/opacity (การ์ดจอทำให้ ไม่คำนวณเลย์เอาต์ใหม่)
   แต่ละแนวท่าไม่เหมือนกัน: ไฟ = ลุกโชน / กองกลาง = โยกซ้ายขวา / แนวรับ = ตั้งมั่นเด้งเบาๆ / วินัย = ลอยขึ้นลง */
.tp-ic { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; height: 56px; font-size: 46px; line-height: 1; }
.tp-row .tp-ic { animation: tpFloat 3.2s ease-in-out infinite; }
.tp-row.fs-atk .tp-ic { animation: tpFlame 1.3s ease-in-out infinite; transform-origin: 50% 90%; }
.tp-row.fs-mid .tp-ic { animation: tpSway 2.6s ease-in-out infinite; transform-origin: 50% 85%; }
.tp-row.fs-def .tp-ic { animation: tpBrace 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.vr-panel.away .tp-row .tp-ic { animation-delay: -.6s; }   /* สองฝั่งไม่ขยับพร้อมกันเป๊ะ ดูมีชีวิตกว่า */
@keyframes tpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tpFlame { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 25% { transform: scale(1.06, 1.14) rotate(2deg); } 50% { transform: scale(.97, 1.02) rotate(-1deg); } 75% { transform: scale(1.04, 1.1) rotate(3deg); } }
@keyframes tpSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes tpBrace { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.1, .92); } 90% { transform: scale(.96, 1.06); } }

/* ชนะ: วงแสงสีแดงเด่นๆ อยู่ด้านหลังไอคอน (เต้นเป็นจังหวะด้วย opacity/scale) ตัวเลขแดง ป้ายแดงทึบ — ไม่ระบายทั้งแถว */
.tp-row.is-win .tp-ic::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, .75) 0%, rgba(239, 68, 68, .35) 45%, rgba(239, 68, 68, 0) 72%);
  animation: tpGlow 1.6s ease-in-out infinite;
}
@keyframes tpGlow { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
/* พื้นเหลืองนวลอ่อนๆ ทั้งแถวที่ชนะ บอกเบาๆ ว่าแถวนี้คือฝั่งชนะ (ไม่ทับวงแสงแดงหลังไอคอน) */
.tp-row.is-win { background: #fff6d6; box-shadow: inset 0 0 0 1px #f6e3a1; }
.tp-row.is-win .tp-val { font-size: 26px; color: #e03444; }
.tp-row.is-win .tp-win { color: #fff; background: #e5484d; box-shadow: 0 2px 10px rgba(229, 72, 77, .45); }
/* แพ้: ไม่มีแสง ไอคอนจางและนิ่งลง ตัวเลขเทา */
.tp-row.is-lose .tp-ic { opacity: .5; filter: grayscale(.6); animation-duration: 5s; }
.tp-row.is-lose .tp-val { color: var(--muted); }
.tp-row.is-lose .tp-win { color: var(--muted); background: rgba(var(--ink-rgb), .07); }
/* เสมอ */
.tp-row.is-tie .tp-win { color: var(--text-soft); background: rgba(var(--ink-rgb), .1); }
.tp-factors { display: flex; flex-direction: column; gap: 6px; }
.vr-panel .vc-item.is-support .vc-team, .vr-panel .vc-item.is-support .vc-num { color: var(--win); }
.vr-panel .vc-item.is-against .vc-team, .vr-panel .vc-item.is-against .vc-num { color: var(--live); }
.vr-panel .vc-item.is-support .vc-bar i { background: var(--win); }
.vr-panel .vc-item.is-against .vc-bar i { background: var(--live); }
/* สรุปแฮนดิแคปเต็มความกว้างใต้สองแผง */
.vr-hc { overflow: hidden; border-radius: 14px; border: 1px solid rgba(var(--ink-rgb), .08); }
.vr-hc-t { padding: 7px 12px; font-size: 12px; font-weight: 700; text-align: center; color: #fff; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--peach))); }
.vr-hc-t b { color: #fff6d8; }
.vr-more { padding-top: 2px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); }
details.vs-drow[open] .vr-more { display: none; }
/* จอแคบ: สองทีมขึ้นแถวแรกคู่กัน ช่องกลางลงไปเต็มความกว้างข้างใต้ / แคบมาก: แผงทีมเรียงลงมาทีละแผง */
@media (max-width: 700px) {
  .vr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h a" "c c"; gap: 8px; }
  .vr-side.home { grid-area: h; }
  .vr-side.away { grid-area: a; }
  .vr-center { grid-area: c; }
  .vr-logo .tb { width: 58px; height: 58px; }
  .vr-logo img.tb { padding: 7px; }
  .vr-name { font-size: 14px; }
}
@media (max-width: 520px) {
  .vr-bottom { grid-template-columns: minmax(0, 1fr); }
  /* แผงเรียงลงมาทีละแผงแล้ว ไม่ต้องหันเข้าหากัน: เจ้าบ้านใช้ลำดับเดียวกับทีมเยือน */
  .vr-panel.home .tp-row { grid-template-columns: 64px auto minmax(0, 1fr) 54px; padding: 4px 8px 4px 2px; }
  .vr-panel.home .tp-ic  { grid-column: 1; }
  .vr-panel.home .tp-val { grid-column: 2; text-align: left; }
  .vr-panel.home .tp-lbl { grid-column: 3; align-items: flex-start; text-align: left; }
  .vr-panel.home .tp-win { grid-column: 4; }
  .vr-panel.home .tp-head { flex-direction: row; }
  .vr-panel.home .tp-head small { margin-left: auto; margin-right: 0; }
  .vr-panel.home .tp-cap, .vr-panel.home .tp-sub { text-align: left; }
}

/* เรดาร์ 5-6 มุม (mu_radar ใน compare.php ตัวเดียวกับการ์ดเต็ม) ขยายใหญ่ขึ้นมาก + เรืองแสงใต้ลาย + ป้ายสีเจ้าบ้าน/เยือนกำกับไว้ด้านบนให้จำสีได้ทันที */
.vr-radar { width: 100%; max-width: 340px; margin: 0; padding: 6px; border-radius: 16px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ca) 10%, transparent), transparent 70%); }
.vr-radar svg.radar { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 10px rgba(var(--shade-rgb), 0.112)); }
.vr-radar .rd-lbl { font-size: 15.5px; }
.vr-radar .rd-a { animation: rdPulseA 2.6s ease-in-out infinite; transform-origin: 180px 130px; }
.vr-radar .rd-b { animation: rdPulseB 2.6s ease-in-out .3s infinite; transform-origin: 180px 130px; }
@keyframes rdPulseA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes rdPulseB { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.vr-radar-legend { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 800; margin-bottom: 2px; }
.vrl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.vrl-dot.vrl-a { background: var(--ca); }
.vrl-dot.vrl-b { background: var(--cb); margin-left: 8px; }

@media (max-width: 560px) {
  .vr-radar { max-width: 220px; }
}
.vs-drow .rd-ring, .vs-drow .rd-axis { stroke: rgba(var(--ink-rgb), 0.16); }
.vs-drow .rd-lbl { fill: var(--text-soft); }
.vs-drow .rd-a { fill: rgba(var(--ca-rgb), .30); }
.vs-drow .rd-b { fill: rgba(var(--cb-rgb), .30); }

/* "ใครลุ้นกว่า" (.lean จาก mu_lean ใน compare.php) — แถบชักเย่าเจ้าบ้าน vs เยือนเส้นเดียว ไม่มีเสมอมาปนให้งง อ่านปราดเดียวจบ
   ฝั่งที่ลุ้นกว่าตัวเข้ม ฝั่งรองจางลง ต่อด้วยเส้นสูงต่ำ/แฮนดิแคปเหมือนเดิม */
.lean { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }
.lean-cap { text-align: center; font-size: 10px; font-weight: 800; }
.lean-cap small { font-weight: 600; margin-left: 4px; opacity: .7; }
.lean-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; }
.lean-bar i { display: block; height: 100%; transition: opacity .15s ease; }
.lean-bar i.h { background: linear-gradient(90deg, var(--ca), rgba(var(--ca-rgb), .7)); }
.lean-bar i.a { background: linear-gradient(90deg, rgba(var(--cb-rgb), .7), var(--cb)); }
.lean-bar i:not(.win) { opacity: .4; }
.lean-pct { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; }
.lean-pct b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.lean-pct .h { color: var(--ca); }
.lean-pct .a { color: var(--cb); }
.lean-pct span:not(.win) { opacity: .55; }
.lean-pct .win { font-weight: 900; font-size: 13.5px; }
.tone-a .lean-cap { color: var(--muted); }
.vs-drow .lean-cap { color: var(--muted); }
.vs-drow .mk { padding: 4px 8px; }
.vs-drow .mk b { font-size: 12px; }
.vs-drow .mk small { font-size: 10px; }
.vs-drow .mk { background: rgba(255, 255, 255, .85); border: 1px solid rgba(var(--ink-rgb), 0.14); }
.vs-drow .mk em { color: var(--muted); }
.vs-drow .mk small { color: var(--muted); }

/* การ์ด 2 ข้าง "วิเคราะห์แฮนดิแคป" (.vr-case จาก mu_handicap_case ใน compare.php) — ดีไซน์ใหม่เป็นการ์ดแนวตั้งทรงไพ่ กรอบคู่ทอง/แดง
   ซ้ายเขียว = ปัจจัยหนุนให้เต็งต่อได้ตามราคา / ขวาแดง = ปัจจัยค้านที่ทำให้เสี่ยง ทั้งสองฝั่งสูงเท่ากันเสมอ (grid stretch) ไม่ล้นกรอบการ์ด
   แต่ละปัจจัยมีแท่งกราฟบอกขนาด (สเกลเดียวกัน 0-9 ลูก/6นัด) แทนที่จะเป็นตัวหนังสือล้วน อ่านไวขึ้น + เอฟเฟกต์เด้งเข้า/แท่งไหลเข้าตอนโหลด */
.vr-case {
  position: relative;
  margin: 8px 0 2px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, black 4%), color-mix(in srgb, var(--surface) 88%, black 6%));
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent) inset, 0 6px 18px rgba(var(--shade-rgb), 0.14);
  animation: vcCardIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes vcCardIn { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.vc-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 10px 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--gold)));
  overflow: hidden;
}
.vc-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  background-size: 220% 100%;
  animation: vcHeadGlint 3.2s ease-in-out .4s infinite;
}
@keyframes vcHeadGlint { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
.vc-head-t { position: relative; }
.vc-head-t b { color: #fff6d8; font-size: 14.5px; margin-left: 3px; text-shadow: 0 1px 2px rgba(var(--shade-rgb), 0.16); }
.vc-head-s { position: relative; font-size: 10.5px; font-weight: 700; opacity: .9; letter-spacing: .03em; }
.vc-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.vc-col { position: relative; display: flex; flex-direction: column; padding: 9px 8px 10px; }
.vc-col::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .5; }
.vc-support::after { right: 0; }
.vc-against::after { display: none; }
.vc-support { background: linear-gradient(180deg, color-mix(in srgb, var(--win) 14%, transparent), transparent 60%); }
.vc-against { background: linear-gradient(180deg, color-mix(in srgb, var(--live) 14%, transparent), transparent 60%); }
.vc-col-h { font-size: 11px; font-weight: 900; letter-spacing: .02em; margin-bottom: 6px; text-align: center; }
.vc-support .vc-col-h { color: var(--win); }
.vc-against .vc-col-h { color: var(--live); }
.vc-col-body { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.vc-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.vc-item-h { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.vc-ic { flex: none; font-size: 14px; line-height: 1; }
.vc-team { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.vc-num { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.vc-support .vc-num { color: var(--win); }
.vc-against .vc-num { color: var(--live); }
.vc-bar { height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.vc-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: vcBarGrow .6s cubic-bezier(.22, 1, .36, 1) .15s both; }
.vc-support .vc-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--win) 70%, transparent), var(--win)); }
.vc-against .vc-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 70%, transparent), var(--live)); }
@keyframes vcBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vc-reason { font-size: 10.5px; line-height: 1.35; opacity: .85; }
.vc-empty { font-size: 11px; opacity: .55; font-style: italic; text-align: center; margin: auto 0; }
.vc-verdict { position: relative; padding: 8px 10px; font-size: 12px; font-weight: 800; text-align: center; color: var(--text); }
.vc-verdict small { font-weight: 600; opacity: .8; margin-left: 4px; }
.vc-lean-s { background: linear-gradient(90deg, color-mix(in srgb, var(--win) 55%, var(--card)), color-mix(in srgb, var(--win) 30%, var(--card))); }
.vc-lean-a { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 55%, var(--card)), color-mix(in srgb, var(--live) 30%, var(--card))); }
.vc-lean-n { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.vs-drow .vc-item { background: rgba(255, 255, 255, .8); border-color: rgba(var(--ink-rgb), 0.1); }
.vs-drow .vc-team { color: var(--text); }
.vs-drow .vc-reason { color: var(--text-soft); }
@media (max-width: 420px) { .vc-cols { grid-template-columns: 1fr; } .vc-support::after { display: none; } .vc-support { border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); } }

.vr-nochart { font-size: 11px; padding: 2px 0; text-align: center; }
.vs-drow .vr-nochart { color: rgba(var(--ink-rgb), 0.35); }
.tone-a .vr-nochart { color: var(--muted); }

/* ---------- จอเล็ก ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 230px minmax(0, 1fr); gap: 16px; padding: 0 16px 50px; }
}

@media (max-width: 860px) {
  header.topbar { padding: 10px 14px; }
  .shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 12px 50px; }
  main.content { padding-top: 0; }
  /* แผงซ้ายแตกการ์ดออกมาเป็นแถวของหน้าเลย (display: contents): การ์ดสมาชิก + การ์ดแผนอยู่บนเหนือเนื้อหา
     การ์ดอื่น (วิธีอ่าน/ประกาศ) ย้ายไปอยู่ใต้เนื้อหา */
  .info-side { display: contents; }
  .info-side .is-card { order: 2; }
  .info-side .is-plans { order: 0; }
  .is-plans .plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .tb-xl { width: 92px; height: 92px; }
  img.tb-xl { padding: 13px; }
  .cmp { grid-template-columns: 1fr; }
  .cmp-radar { max-width: 280px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
  .fo-grid { padding: 4px 12px 22px; gap: 12px; }
  .fo-top { padding: 12px 12px 0; }
  .fo-team .tb-xl { width: 84px; height: 84px; }
  .fo-team img.tb-xl { padding: 11px; }
  .fo-team .tb-xl.tb-mono { font-size: 28px; }
  .fo-name { font-size: 15px; }
  .fo-facts { display: none; }
  .fo-vs { font-size: 44px; }
  .cmp-row { grid-template-columns: 46px minmax(0, 1fr) 108px minmax(0, 1fr) 46px; gap: 4px; padding: 4px 2px; }
  .cl b { font-size: 11px; }
  .cl em { font-size: 9.5px; white-space: normal; }
  .cv { font-size: 12px; padding: 4px 2px; }
  .vd-bar { font-size: 11px; }
  .prob-odds { flex-direction: column; align-items: center; gap: 2px; }
  .lg-hero { flex-wrap: wrap; }
  .lg-hero-name { font-size: 22px; }
  h2.date-heading { font-size: 24px; }
  summary.vs-row { padding: 8px 10px 10px; }
}

/* ============================================================
   ทางเชื่อมระหว่างหน้า (board.php): เส้นทางหน้า / ทางลัด / คู่ก่อน-ถัดไป / ลงเตะวันนี้ / คู่อื่นในลีก
   ============================================================ */
.md-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 4px 0 12px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; min-width: 0; }
.crumbs a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { font-style: normal; color: var(--muted); }
.crumbs b { color: var(--text); overflow-wrap: anywhere; }
.md-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.md-quick a {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .15s, background-color .15s;
}
.md-quick a:hover { background: var(--hover); transform: translateY(-1px); }
.md-quick a:first-child { background: var(--red); border-color: var(--red); color: #fff; }

/* คู่ก่อนหน้า | คู่ที่ n/N | คู่ถัดไป */
.md-step { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 0 0 14px; }
.md-step a, .md-step .off { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: 12px; text-decoration: none; min-width: 0; }
.md-step a { background: var(--card); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.md-step a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.md-step a b { font-size: 13px; color: var(--accent-strong); }
.md-step a small { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-step-next { text-align: right; }
.md-step-no { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; color: var(--text-soft); padding: 0 6px; white-space: nowrap; }
.md-step-no b { font-size: 18px; color: var(--red); }
.md-step-no small { font-size: 10.5px; color: var(--muted); }

/* การ์ด "ลงเตะวันนี้/คืนนี้" ในหน้าทีม / นักเตะ */
.nx-pill {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
  border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #1c1017, #5a1420 55%, var(--red-deep));
  box-shadow: 0 8px 22px rgba(180, 32, 46, .28); transition: transform .15s, box-shadow .15s;
}
.nx-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(180, 32, 46, .36); }
.nx-when { display: flex; flex-direction: column; line-height: 1.25; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .22); }
.nx-when b { font-family: var(--font-head); font-size: 15px; }
.nx-when small { font-size: 20px; font-weight: 800; color: #ffd27a; }
.nx-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 0; }
.nx-vs b { font-size: 14px; }
.nx-vs i { font-style: normal; font-size: 11px; opacity: .7; }
.nx-vs small { flex-basis: 100%; font-size: 11.5px; opacity: .8; }
.nx-tags { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nx-tags i { font-style: normal; font-weight: 800; font-size: 13px; color: #ffd27a; white-space: nowrap; }
.nx-plan, .nx-vip { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.nx-plan { background: #fff3d1; color: #7a4a00; }
.nx-vip { background: linear-gradient(135deg, #b58cff, #7c4dff); color: #fff; }

/* ป้ายในตารางคะแนน: ทีมนี้มีเตะวันนี้/คืนนี้ */
.nx-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; vertical-align: middle;
  color: var(--red-deep); background: var(--red-soft); border: 1px solid rgba(229, 72, 77, .3);
}
.nx-chip:hover { background: var(--red); color: #fff; }
.nx-chip i { font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: 6px; background: #7c4dff; color: #fff; }
table.standings tr.is-me td { background: #fff3d1; }
table.standings tr.is-me td.team { box-shadow: inset 4px 0 0 var(--red); }
table.standings tr { scroll-margin-top: calc(var(--hdr-h, 76px) + 20px); }

/* อันดับในหน้าทีม */
.tm-rank { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin-top: 8px; padding: 6px 14px; border-radius: 12px; background: var(--surface); color: var(--text-soft); font-size: 12.5px; text-decoration: none; }
.tm-rank b { font-family: var(--font-head); font-size: 22px; color: var(--red); }
.tm-rank:hover { background: var(--hover); }

/* รูปนักเตะที่ไม่มีรูป: ตัวอักษรย่อ */
.ph-mono { display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--accent-strong); font-weight: 800; font-size: 12px; vertical-align: middle; }
.player-photo-big.ph-mono { font-size: 28px; }

/* คู่อื่นในลีกเดียวกัน (ท้ายหน้าแมตช์) */
.md-same { margin: 18px 0; }
.md-same h2 { font-family: var(--font-head); font-size: 18px; margin: 0 0 10px; }
.md-same h2 small { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.md-same-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.md-same-list a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; min-width: 0; }
.md-same-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ms-time { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; color: var(--muted); min-width: 44px; }
.ms-time b { font-size: 14px; color: var(--red); }
.ms-teams { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 13px; }
.ms-teams > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ms-teams b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* หน้าแรก: อันดับในการ์ดกดไปตารางได้ / หัวลีกมีลิงก์ตาราง */
.vr-rk { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.vr-rk:hover { color: var(--red); }
.lg-table { margin-left: auto; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--accent-strong); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); }
.lg-table:hover { background: var(--hover); }
.lg-table + .lg-count { margin-left: 8px; }

/* แผง VIP ในการ์ดแมตช์: ลิงก์ไปดูทุกคู่ในคอมโบเดียวกัน */

@media (max-width: 640px) {
  .md-step { grid-template-columns: 1fr 1fr; }
  .md-step-no { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 6px; }
  .nx-when { border-right: 0; padding-right: 0; }
  .nx-tags { margin-left: 0; }
  .md-same-list { grid-template-columns: 1fr; }
  .vm-all { margin-left: 0; }
}

/* ---------- ⏰ จังหวะเวลาเข้าเล่น (vip_timing_html) ท้ายแผงวิเคราะห์คู่นี้ ---------- */
.vt { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(6, 182, 212, .16), rgba(255, 255, 255, .03)); border: 1.5px solid rgba(6, 182, 212, .5); }
.vt h5 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: #7ee3f5; }
.vt h5 > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 13px; }
.vt h5 small { font-size: 11px; font-weight: 500; color: rgba(255, 230, 230, .6); }
.vt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.vt-big { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 24px; background: rgba(6, 182, 212, .25); animation: vtPulse 2.2s ease-in-out infinite; }
@keyframes vtPulse { 50% { transform: scale(1.08) rotate(-4deg); } }
.vt-head > div:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.vt-head b { display: block; font-family: var(--font-head); font-size: 19px; color: #fff; }
.vt-wait b { color: #7fe0bd; }
.vt-pre b { color: #ffd27a; }
.vt-skip b { color: #9ecbff; }
.vt-head small { font-size: 12px; color: rgba(255, 235, 235, .8); }
.vt-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-stats span { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.vt-stats b { display: inline; font-size: 13px; font-family: var(--font-head); color: #ffd27a; }

/* แถบเวลา 0-90 */
.vt-bar { position: relative; margin: 26px 0 4px; }
.vt-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; height: 34px; }
.vt-seg { position: relative; display: grid; place-items: center; border-radius: 6px; background: rgba(6, 182, 212, var(--a)); font-size: 11px; }
.vt-seg:nth-child(n+4) { background: rgba(255, 138, 76, var(--a)); }
.vt-seg b { font-family: var(--font-head); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vt-seg.peak { outline: 2px solid #ffd27a; outline-offset: 1px; }
.vt-seg i { position: absolute; bottom: calc(100% + 3px); font-style: normal; font-size: 10.5px; font-weight: 800; color: #ffd27a; white-space: nowrap; }
.vt-win { position: absolute; top: -6px; bottom: -6px; border: 2px solid #7fe0bd; border-radius: 8px; background: rgba(127, 224, 189, .12); box-shadow: 0 0 14px rgba(127, 224, 189, .45); animation: vtGlow 1.8s ease-in-out infinite; pointer-events: none; }
.vt-win em { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); padding: 0 7px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #073b2c; background: #7fe0bd; white-space: nowrap; }
@keyframes vtGlow { 50% { opacity: .55; } }
.vt-ht { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; transform: translateX(-1px); background: rgba(255, 255, 255, .7); font-size: 0; }
.vt-ball { position: absolute; left: 0; bottom: -16px; font-size: 13px; animation: vtRoll 9s linear infinite; }
@keyframes vtRoll { from { transform: translateX(0) rotate(0); } to { transform: translateX(calc(100cqw - 14px)) rotate(1080deg); } }
.vt-bar { container-type: inline-size; }
.vt-ticks { display: flex; justify-content: space-between; margin: 16px 0 10px; font-size: 10.5px; color: rgba(255, 230, 230, .6); }

/* ถ้ายัง 0-0 ถึงนาที… */
.vt-chks { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 10px; }
.vt-chks > em { flex: 1 1 100%; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; }
.vt-chks > em br { display: none; }
.vt-chks > em small { font-weight: 500; color: rgba(255, 230, 230, .65); margin-left: 6px; }
.vt-chk { flex: 1 1 64px; display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); line-height: 1.25; transition: transform .15s; }
.vt-chk:hover { transform: translateY(-3px); }
.vt-chk small { font-size: 10.5px; color: rgba(255, 230, 230, .7); }
.vt-chk b { font-family: var(--font-head); font-size: 15px; }
.vt-chk i { font-style: normal; font-size: 11px; color: #ffd27a; }
.vt-chk.go { background: rgba(127, 224, 189, .18); border-color: #7fe0bd; }
.vt-chk.go small::after { content: " ✓"; color: #7fe0bd; }
.vt-chk.late { opacity: .55; }
.vt-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vt-plans li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: rgba(0, 0, 0, .22); color: rgba(255, 245, 245, .92); animation: vmIn .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.2s + var(--d, 0) * .09s); }
.vt-plans li b { color: #ffe0a8; }
@media (prefers-reduced-motion: reduce) { .vt-big, .vt-win, .vt-ball, .vt-plans li { animation: none !important; } }

/* ============================================================
   หน้า "Joker ผ่านมาแล้ว" (history.php)
   ============================================================ */
.topnav a.nav-joker:not(.active) { background: linear-gradient(135deg, rgba(168, 85, 247, .35), rgba(255, 61, 87, .35)); border: 1px solid rgba(255, 210, 122, .5); }
.hist { max-width: 1280px; margin: 0 auto; }
.hs-hero { position: relative; display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; padding: 18px 20px; border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(50% 90% at 0% 0%, rgba(168, 85, 247, .45), transparent 70%), radial-gradient(50% 90% at 100% 100%, rgba(255, 61, 87, .35), transparent 70%), linear-gradient(135deg, #12060c, #2a0911 60%, #150a1f);
  border: 1.5px solid #e9c46a; box-shadow: 0 12px 30px rgba(40, 5, 12, .3); }
.hs-hero-art { flex: none; width: 120px; height: 120px; }
.hs-hero-art .vx-joker-art { width: 120px; height: 120px; }
.hs-hero-txt { flex: 1; min-width: 0; }
.hs-hero h2 { margin: 0; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 32px; color: #ffe0a8; }
.hs-hero p { margin: 2px 0 12px; font-size: 13px; color: rgba(255, 235, 235, .8); }
.hs-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-kpis .k { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); min-width: 96px; }
.hs-kpis .k b { font-family: var(--font-head); font-size: 24px; line-height: 1.1; }
.hs-kpis .k b i { font-style: normal; opacity: .5; margin: 0 2px; }
.hs-kpis .k small { font-size: 11px; color: rgba(255, 235, 235, .7); }
.hs-kpis .k.hit { background: linear-gradient(135deg, #ffd27a, #f5b642); color: #3d1600; border-color: transparent; }
.hs-kpis .k.hit small { color: #6b3a00; }
.hs-kpis .k.up b { color: #7fe0bd; }
.hs-kpis .k.down b { color: #ff9ea2; }
.hs-csv { position: absolute; right: 16px; top: 14px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-decoration: none; color: #3d1600; background: #ffe0a8; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); transition: transform .15s; }
.hs-csv:hover { transform: translateY(-2px); }

.hs-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hs-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-fgroup em { font-style: normal; font-weight: 800; font-size: 12.5px; margin-right: 4px; min-width: 52px; }
.hs-fgroup a { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.hs-fgroup a small { color: var(--muted); font-weight: 500; }
.hs-fgroup a:hover { background: var(--hover); }
.hs-fgroup a.on { background: var(--red); border-color: var(--red); color: #fff; }
.hs-fgroup a.on small { color: rgba(255, 255, 255, .8); }
.hs-fgroup a.hs-clear { background: #fff3d1; border-color: #f3c77a; }

.hs-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.hs-board, .hs-bands { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hs-board h3, .hs-bands h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 17px; }
.hs-board h3 small { font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.hs-trow { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) minmax(90px, 150px) 56px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background-color .15s, transform .15s; }
.hs-trow + .hs-trow { margin-top: 3px; }
.hs-trow:hover { background: color-mix(in srgb, var(--c) 10%, transparent); transform: translateX(3px); }
.hs-trow.on { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.hs-rank { font-family: var(--font-head); font-weight: 700; color: var(--muted); text-align: center; }
.hs-trow:nth-child(2) .hs-rank { color: #d4a017; font-size: 18px; }
.hs-tart { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%); }
.hs-tart .vx-joker-art { width: 44px; height: 44px; animation: none; }
.hs-tname { display: flex; flex-direction: column; min-width: 0; }
.hs-tname b { font-size: 13.5px; color: color-mix(in srgb, var(--c) 70%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-tname small { font-size: 11px; color: var(--muted); }
.hs-hitbar { display: flex; align-items: center; gap: 6px; }
.hs-hitbar i { flex: 1; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.hs-hitbar em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c, #2f9e76), color-mix(in srgb, var(--c, #2f9e76) 50%, #ffd27a)); transform-origin: left; animation: vmGrow .9s cubic-bezier(.2, .8, .3, 1) both; }
.hs-hitbar b { font-family: var(--font-head); font-size: 14px; min-width: 40px; text-align: right; }
.hs-units { font-family: var(--font-head); font-size: 13px; font-weight: 600; text-align: right; }
.up { color: #1f9d6f; }
.down { color: #d33a3f; }
.hs-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 56px; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed var(--border); --c: #7c4dff; }
.hs-band:nth-of-type(2) { --c: #ff9800; }
.hs-band:nth-of-type(3) { --c: #ff3d57; }
.hs-band-l { display: flex; flex-direction: column; font-size: 12.5px; }
.hs-band-l small { font-size: 11px; color: var(--muted); }
.hs-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-soft); }

.hs-day { margin-bottom: 16px; }
.hs-day h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; font-family: var(--font-head); font-size: 18px; }
.hs-day h3 small { font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
.hs-day h3 b { margin-left: auto; font-size: 15px; }
.hs-list { display: grid; gap: 6px; }
.hs-item { border-radius: 14px; background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--c); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .15s; }
.hs-item:hover { box-shadow: var(--shadow-hover); }
.hs-item.g-win, .hs-item.g-hwin { background: linear-gradient(90deg, rgba(47, 158, 118, .09), var(--card) 45%); }
.hs-item.g-lose, .hs-item.g-hlose { background: linear-gradient(90deg, rgba(229, 72, 77, .08), var(--card) 45%); }
.hs-item summary { display: grid; grid-template-columns: 36px 64px minmax(0, 1.3fr) 76px minmax(0, 1.4fr) 90px; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; list-style: none; }
.hs-item summary::-webkit-details-marker { display: none; }
.hs-face { display: grid; place-items: center; width: 32px; height: 42px; border-radius: 6px; background: #fffaf0; border: 1.5px solid var(--c); color: var(--c); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transform: rotate(-5deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.hs-item:hover .hs-face { transform: rotate(6deg) scale(1.08); }
.hs-face i { display: block; font-style: normal; font-size: 12px; }
.hs-when { display: flex; flex-direction: column; min-width: 0; }
.hs-when b { font-family: var(--font-head); font-size: 16px; color: var(--red); }
.hs-when small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.hs-teams > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hs-teams b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-score { display: flex; flex-direction: column; align-items: center; }
.hs-score b { font-family: var(--font-head); font-size: 20px; letter-spacing: .02em; }
.hs-score b.dim { color: var(--muted); font-size: 16px; }
.hs-score small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.hs-pick { display: flex; flex-direction: column; min-width: 0; }
.hs-pick small { font-size: 11px; color: color-mix(in srgb, var(--c) 70%, #000); font-weight: 700; }
.hs-pick b { font-size: 13px; }
.hs-res { display: flex; flex-direction: column; align-items: flex-end; }
.hs-res em { font-style: normal; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface); }
.g-win .hs-res em, .g-hwin .hs-res em { background: #d7f5e8; color: #11714f; }
.g-lose .hs-res em, .g-hlose .hs-res em { background: #fde0e1; color: #b3262c; }
.g-push .hs-res em { background: #eef0f4; color: #4d5566; }
.g-wait .hs-res em { background: #fff3d1; color: #7a4a00; }
.hs-res small { font-family: var(--font-head); font-size: 12.5px; margin-top: 2px; }
.hs-more { padding: 4px 14px 12px 60px; border-top: 1px dashed var(--border); }
.hs-more ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.hs-more li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.hs-more li.risk { color: #b3262c; }
.hs-more .vm-ic { background: var(--surface); }
.hs-more .vm-n { color: var(--red-deep); }
.hs-more p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hs-tag { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--text-soft); text-decoration: none; }
.hs-tag.link { color: var(--accent-strong); font-weight: 700; }

@media (max-width: 900px) {
  .hs-grid { grid-template-columns: minmax(0, 1fr); }
  .hs-item summary { grid-template-columns: 34px minmax(0, 1fr) 70px; grid-template-areas: "face teams score" "face pick res"; row-gap: 6px; }
  .hs-face { grid-area: face; align-self: start; }
  .hs-when { display: none; }
  .hs-teams { grid-area: teams; }
  .hs-score { grid-area: score; }
  .hs-pick { grid-area: pick; }
  .hs-res { grid-area: res; }
  .hs-more { padding-left: 14px; }
}
@media (max-width: 640px) {
  .hs-hero { flex-direction: column; align-items: flex-start; padding-top: 48px; }
  .hs-hero-art, .hs-hero-art .vx-joker-art { width: 80px; height: 80px; }
  .hs-hero h2 { font-size: 26px; }
  .hs-trow { grid-template-columns: 18px 36px minmax(0, 1fr) 70px 48px; gap: 6px; }
  .hs-tart, .hs-tart .vx-joker-art { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .hs-hitbar em { animation: none; } }

/* ---------- history.php v2: ผลวันนี้บนสุด / ช่วงเวลา / KPI / กราฟ / วิธีคิด / ตารางรายวัน ---------- */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.hs-today { position: relative; display: flex; gap: 18px; align-items: center; margin: 6px 0 12px; padding: 18px 22px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(50% 90% at 0% 0%, rgba(168, 85, 247, .45), transparent 70%), radial-gradient(45% 80% at 100% 100%, rgba(255, 61, 87, .35), transparent 70%), linear-gradient(135deg, #12060c, #2a0911 60%, #150a1f);
  border: 1.5px solid #e9c46a; box-shadow: 0 12px 30px rgba(40, 5, 12, .3); }
.hs-today-art { flex: none; width: 118px; height: 118px; align-self: flex-start; }
.hs-today-art .vx-joker-art { width: 118px; height: 118px; }
.hs-today-main { flex: 1; min-width: 0; }
.hs-today-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hs-today-h h2 { margin: 0; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 30px; color: #ffe0a8; }
.hs-date { font-family: var(--font-head); font-size: 15px; }
.hs-date small { font-family: "IBM Plex Sans Thai Looped", sans-serif; font-size: 11px; color: rgba(255, 235, 235, .65); margin-left: 4px; }
.hs-empty-today { margin: 10px 0; font-size: 14px; color: rgba(255, 235, 235, .85); }
.hs-today-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 12px 0 8px; }
/* วงแหวนความแม่น */
.hs-ring { position: relative; flex: none; display: grid; place-items: center; align-content: center; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ring-bg, #fffdfa) 77%, transparent 79%), conic-gradient(#1f9d6f calc(var(--p) * 1%), #f3c3c5 0);
  animation: vmGauge 1.3s cubic-bezier(.2, .8, .3, 1) both; }
.hs-ring b { font-family: var(--font-head); font-size: 26px; line-height: 1; color: var(--text); }
.hs-ring small { font-size: 10.5px; color: var(--muted); }
.hs-ring.big { width: 128px; height: 128px; --ring-bg: #1d0a12; background: radial-gradient(closest-side, #1d0a12 77%, transparent 79%), conic-gradient(#7fe0bd calc(var(--p) * 1%), rgba(255, 158, 162, .45) 0); box-shadow: 0 0 26px rgba(127, 224, 189, .3); }
.hs-ring.big b { font-size: 36px; color: #fff; }
.hs-ring.big small { color: rgba(255, 235, 235, .7); font-size: 12px; }
.hs-tally { display: flex; flex-wrap: wrap; gap: 10px; }
.hs-tally .t { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); animation: vmDeal .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.hs-tally .t:nth-child(2) { animation-delay: .08s; } .hs-tally .t:nth-child(3) { animation-delay: .16s; } .hs-tally .t:nth-child(4) { animation-delay: .24s; }
.hs-tally .t b { font-family: var(--font-head); font-size: 40px; line-height: 1.05; }
.hs-tally .t small { font-size: 12px; font-weight: 700; }
.hs-tally .win { background: rgba(47, 158, 118, .22); border-color: rgba(127, 224, 189, .5); } .hs-tally .win b { color: #7fe0bd; }
.hs-tally .lose { background: rgba(229, 72, 77, .2); border-color: rgba(255, 158, 162, .45); } .hs-tally .lose b { color: #ff9ea2; }
.hs-tally .wait b { color: #ffd27a; }
.hs-money { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px dashed rgba(255, 210, 122, .5); }
.hs-money small { font-size: 11.5px; color: rgba(255, 235, 235, .7); }
.hs-money b { font-family: var(--font-head); font-size: 34px; line-height: 1.1; }
.hs-money.up b { color: #7fe0bd; } .hs-money.down b { color: #ff9ea2; }
.hs-say { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: rgba(255, 240, 240, .92); }
.hs-say b { font-family: var(--font-head); font-weight: 600; }
.hs-say .up { color: #7fe0bd; } .hs-say .down { color: #ff9ea2; }
.hs-vs, .hs-best { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hs-vs.up { background: rgba(127, 224, 189, .18); color: #7fe0bd; } .hs-vs.down { background: rgba(255, 158, 162, .18); color: #ff9ea2; }
.hs-best { background: color-mix(in srgb, var(--c) 35%, transparent); border: 1px solid var(--c); color: #fff; }
/* แถบวิ่งผลล่าสุด */
.hs-ticker { display: flex; align-items: center; gap: 10px; margin-top: 10px; overflow: hidden; border-radius: 10px; background: #1f0c13; padding: 6px 10px 6px 0; }
.hs-ticker em { position: relative; z-index: 1; flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: #ffd27a; padding: 0 10px; background: #1f0c13; box-shadow: 10px 0 10px #1f0c13; }
.hs-ticker-track { display: flex; gap: 22px; white-space: nowrap; animation: hsTick 60s linear infinite; }
.hs-ticker:hover .hs-ticker-track { animation-play-state: paused; }
.hs-ticker .tk { font-size: 12px; color: rgba(255, 240, 240, .85); }
.hs-ticker .tk b { color: #fff; }
@keyframes hsTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ช่วงเวลา + ตัวกรอง */
.hs-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); position: sticky; top: calc(var(--hdr-h, 76px) + 6px); z-index: 5; }
.hs-period a { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: background-color .15s, transform .15s; }
.hs-period a:hover { transform: translateY(-1px); background: var(--hover); }
.hs-period a.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(229, 72, 77, .3); }
.hs-period a.sm { padding: 4px 11px; font-size: 12px; }
.hs-period a.clear { background: #fff3d1; border-color: #f3c77a; }
.hs-period a.csv { background: #1d0a12; color: #ffe0a8; border-color: #1d0a12; }
.hs-period .sp { flex: 1; }

/* KPI ของช่วงที่เลือก */
.hs-kpi-row { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hs-kpi-row .kp { display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); min-width: 0; }
.hs-kpi-row .kp.ring { padding: 8px; align-items: center; }
.hs-kpi-row .kp b { font-family: var(--font-head); font-size: 26px; line-height: 1.15; white-space: nowrap; }
.hs-kpi-row .kp b i { font-style: normal; opacity: .4; margin: 0 2px; }
.hs-kpi-row .kp small { font-size: 11.5px; color: var(--muted); }
.hs-kpi-row .kp.up b { color: #1f9d6f; } .hs-kpi-row .kp.down b { color: #d33a3f; }

.hs-grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.hs-card { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); min-width: 0; }
.hs-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-family: var(--font-head); font-size: 17px; }
.hs-card h3 small { font-family: "IBM Plex Sans Thai Looped", sans-serif; font-size: 11.5px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg.w { background: #2fb383; } .lg.l { background: #ef6a6f; } .lg.a { background: #7c4dff; border-radius: 50%; }

/* กราฟ SVG */
.hs-chart-scroll { overflow-x: auto; }
.hs-svg { display: block; width: 100%; height: auto; font-family: var(--font-head); }
.hs-svg .grid { stroke: var(--border); stroke-width: 1; }
.hs-svg .mid { stroke: #c9bedb; stroke-width: 1; stroke-dasharray: 4 4; }
.hs-svg .ax { font-size: 10.5px; fill: var(--muted); }
.hs-svg .ax.r { text-anchor: end; } .hs-svg .ax.c { text-anchor: middle; }
.hs-svg .ax.v { fill: #5b3cc4; font-weight: 600; }
.hs-svg .bar { transform-box: fill-box; transform-origin: bottom; animation: hsBar .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * .05s); }
.hs-svg .bar:hover rect { filter: brightness(1.1); }
.hs-svg .w { fill: #2fb383; } .hs-svg .l { fill: #ef6a6f; }
.hs-svg .acc { fill: none; stroke: #7c4dff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hs-svg .dot { fill: #fff; stroke: #7c4dff; stroke-width: 2.5; }
.hs-svg.cum .area.up { fill: rgba(47, 179, 131, .18); } .hs-svg.cum .area.down { fill: rgba(239, 106, 111, .18); }
.hs-svg.cum .cumline { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.hs-svg.cum .cumline.up { stroke: #1f9d6f; } .hs-svg.cum .cumline.down { stroke: #d33a3f; }
.hs-svg.cum .dot.up { stroke: #1f9d6f; } .hs-svg.cum .dot.down { stroke: #d33a3f; }
@keyframes hsBar { from { transform: scaleY(0); } }
.hs-cum-h { margin: 8px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); }

/* วิธีคิด */
.how-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.how-row:last-child { border-bottom: 0; }
.how-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface); font-size: 16px; }
.how-row p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.how-row small { font-size: 12px; color: var(--text-soft); }

/* ตารางรายวัน */
.hs-daily { margin-bottom: 14px; }
.hs-daily table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hs-daily th { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; padding: 6px 8px; border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.hs-daily td { text-align: center; padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hs-daily td:first-child, .hs-daily th:first-child { text-align: left; }
.hs-daily td:first-child a { font-weight: 700; color: var(--text); text-decoration: none; }
.hs-daily td:first-child em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; margin-left: 4px; }
.hs-daily tbody tr { cursor: pointer; transition: background-color .15s; }
.hs-daily tbody tr:hover { background: var(--hover); }
.hs-daily tr.on { background: #fff3d1; }
.hs-daily tr.today td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.hs-mini { display: inline-flex; align-items: center; gap: 6px; }
.hs-mini i { width: 64px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #2fb383 calc(var(--p) * 1%), #f3c3c5 0); }
.hs-mini b { font-family: var(--font-head); min-width: 36px; text-align: right; }

@media (max-width: 1100px) { .hs-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hs-kpi-row .kp.ring { grid-row: span 2; } }
@media (max-width: 900px) { .hs-grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .hs-today { flex-direction: column; align-items: stretch; padding: 14px; }
  .hs-today-art { position: absolute; right: 6px; top: 6px; width: 64px; height: 64px; opacity: .9; }
  .hs-today-art .vx-joker-art { width: 64px; height: 64px; }
  .hs-today-h h2 { font-size: 24px; padding-right: 60px; }
  .hs-today-row { gap: 12px; }
  .hs-ring.big { width: 104px; height: 104px; } .hs-ring.big b { font-size: 28px; }
  .hs-tally .t { min-width: 66px; padding: 6px 8px; } .hs-tally .t b { font-size: 30px; }
  .hs-money { flex: 1 1 100%; } .hs-money b { font-size: 28px; }
  .hs-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-kpi-row .kp.ring { grid-row: auto; grid-column: 1 / -1; }
  .hs-period { position: static; }
}
@media (prefers-reduced-motion: reduce) { .hs-ring, .hs-tally .t, .hs-ticker-track, .hs-svg .bar { animation: none !important; } }

@media (max-width: 640px) { .topnav .nj-long { display: none; } }

/* ---------- Joker ที่น่าสนใจที่สุด + Joker ประจำวัน (history.php) ---------- */
.hs-mvp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; margin-bottom: 14px; }
.hs-mvp { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), linear-gradient(140deg, #150810, #2a0911 70%, #12060c);
  border: 2px solid #e9c46a; box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 30%, rgba(40, 5, 12, .3)); }
.hs-mvp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(-120%); animation: vmShine 5s ease-in-out infinite; pointer-events: none; }
.hs-crown { align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #3d1600; background: linear-gradient(90deg, #ffe7a8, #f5b642); box-shadow: 0 3px 10px rgba(245, 182, 66, .4); }
.hs-crown small { font-weight: 600; opacity: .75; margin-left: 4px; }
.hs-mvp-body { display: flex; align-items: center; gap: 14px; }
.hs-mvp-art { position: relative; flex: none; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%); }
.hs-mvp-art .vx-joker-art { width: 110px; height: 110px; }
.hs-mvp-txt { min-width: 0; }
.hs-mvp-txt > b { display: block; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 26px; color: color-mix(in srgb, var(--c) 35%, #fff); line-height: 1.2; }
.hs-mvp-txt > small { font-size: 12px; color: rgba(255, 235, 235, .7); }
.hs-mvp-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.hs-mvp-stats span { display: flex; flex-direction: column; padding: 5px 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 10.5px; color: rgba(255, 235, 235, .75); }
.hs-mvp-stats em { font-style: normal; font-family: var(--font-head); font-size: 18px; color: #fff; line-height: 1.15; }
.hs-mvp-stats .trust { background: rgba(255, 210, 122, .18); } .hs-mvp-stats .trust em { color: #ffd27a; }
.hs-mvp-stats .up em { color: #7fe0bd; } .hs-mvp-stats .down em { color: #ff9ea2; }
.hs-mvp-txt p { margin: 0; font-size: 12.5px; color: rgba(255, 240, 240, .85); }
.hs-mvp-go { align-self: flex-end; font-size: 12.5px; font-weight: 800; color: #ffe0a8; text-decoration: none; }
.hs-mvp-go:hover { text-decoration: underline; }

.hs-mvps { display: flex; flex-direction: column; }
.hs-mvp-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.hs-dmvp { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px 10px; border-radius: 14px; text-decoration: none; color: var(--text); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #fff), var(--card)); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent);
  transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.hs-dmvp:nth-child(even) { transform: rotate(1.5deg); }
.hs-dmvp:hover { transform: translateY(-5px) rotate(0); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 30%, transparent); }
.hs-dmvp.today { border-width: 2.5px; border-color: var(--red); }
.hs-dmvp > small { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.hs-dmvp-art { width: 62px; height: 62px; }
.hs-dmvp-art .vx-joker-art { width: 62px; height: 62px; animation: none; }
.hs-dmvp-art.empty { display: grid; place-items: center; font-size: 28px; }
.hs-dmvp b { font-size: 12.5px; color: color-mix(in srgb, var(--c) 70%, #000); }
.hs-dmvp-s { font-size: 11.5px; font-weight: 700; }
.hs-dmvp .up, .hs-dmvp .down { font-family: var(--font-head); font-size: 12px; }
.hs-dmvp.none { opacity: .7; }
.hs-tbest { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, #fff); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: color-mix(in srgb, var(--c) 70%, #000); }
.hs-tbest small { color: var(--text-soft); font-weight: 600; }
@media (max-width: 1000px) { .hs-mvp-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hs-mvp-art, .hs-mvp-art .vx-joker-art { width: 80px; height: 80px; } .hs-mvp-txt > b { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .hs-mvp::after { animation: none; } }

/* ---------- 💵 สรุปแบบเงินๆ: เล่นทุกใบ ใบละ 1,000 (history.php) ---------- */
.hs-cash { margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1.5px solid #f3c77a; box-shadow: var(--shadow); }
.hs-cash h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; font-family: var(--font-head); font-size: 19px; }
.hs-cash h3 small { font-family: "IBM Plex Sans Thai Looped", sans-serif; font-size: 12px; font-weight: 500; color: var(--muted); }
.hs-cash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hs-cash-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid; animation: vmDeal .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.hs-cash-card:nth-child(2) { animation-delay: .06s; } .hs-cash-card:nth-child(3) { animation-delay: .12s; } .hs-cash-card:nth-child(4) { animation-delay: .18s; }
.hs-cash-card.up { background: linear-gradient(160deg, #e3f8ef, #fffdfa); border-color: #8fd3bd; }
.hs-cash-card.down { background: linear-gradient(160deg, #fde6e7, #fffdfa); border-color: #f3a6a9; }
.hs-cash-l { font-size: 13px; font-weight: 800; color: var(--text-soft); }
.hs-cash-big { font-family: var(--font-head); font-size: 25px; line-height: 1.15; }
.hs-cash-card.up .hs-cash-big { color: #11714f; } .hs-cash-card.down .hs-cash-big { color: #b3262c; }
.hs-cash-flow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.hs-cash-flow b { font-family: var(--font-head); color: var(--text); }
.hs-cash-flow i { font-style: normal; color: var(--muted); }
.hs-cash-card small { font-size: 11.5px; color: var(--muted); }
.hs-cash-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hs-cash-tbl th { font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1.5px solid var(--border); text-align: center; white-space: nowrap; }
.hs-cash-tbl td { padding: 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.hs-cash-tbl th:first-child, .hs-cash-tbl td:first-child { text-align: left; }
.hs-cash-tbl td:last-child b { font-family: var(--font-head); font-size: 15px; }
.hs-est { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff3d1; color: #7a4a00; border: 1px dashed #f3c77a; }
@media (prefers-reduced-motion: reduce) { .hs-cash-card { animation: none; } }
.hs-cash-real { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: #eef9f4; border: 1px dashed #8fd3bd; font-size: 13px; }
.hs-cash-real b.up, .hs-cash-real b.down { font-family: var(--font-head); font-size: 15px; }

/* ---------- ป้าย % สถิติย้อนหลังของ Joker (vip_stat_badge) บนการ์ดทุกแบบ ---------- */
.vs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; vertical-align: middle;
  background: #fff; color: #3d3551; border: 1.5px solid #d9d2e6; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.vs-badge i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, #fff 58%, transparent 62%), conic-gradient(var(--vs-c, #2fb383) calc(var(--p) * 1%), #eadff0 0); }
.vs-badge b { font-family: var(--font-head); font-size: 13.5px; color: var(--vs-c, #2fb383); }
.vs-badge small { font-size: 10.5px; color: #6b6380; }
.vs-badge em { font-style: normal; font-family: var(--font-head); font-size: 12px; padding: 0 6px; border-radius: 999px; }
.vs-badge em.up { background: #d7f5e8; color: #11714f; } .vs-badge em.down { background: #fde0e1; color: #b3262c; }
.vs-badge.hot { --vs-c: #1f9d6f; border-color: #8fd3bd; }
.vs-badge.good { --vs-c: #c98a00; border-color: #f3c77a; }
.vs-badge.meh { --vs-c: #d33a3f; border-color: #f3a6a9; }
.vs-badge.new { padding: 2px 9px; color: #6b6380; background: #f4f1f8; box-shadow: none; }
/* การ์ด VIP หน้าแรก */
.vx-track { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 2px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 60%, #3d3551); }
/* แผงวิเคราะห์คู่นี้ + แถบเลือกไพ่ */
.vm-track { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255, 235, 235, .85); white-space: nowrap; }
.vm-tab .vs-badge { padding: 1px 7px 1px 2px; font-size: 10.5px; } .vm-tab .vs-badge i { width: 14px; height: 14px; } .vm-tab .vs-badge b { font-size: 12px; }
/* การ์ด Joker แปะมุมแถวแมตช์ */
.vj-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; }
.vj-score .vs-badge { padding: 1px 7px 1px 2px; } .vj-score .vs-badge i { width: 14px; height: 14px; } .vj-score .vs-badge b { font-size: 12px; }
/* history: % ในกล่องเงิน */
.hs-cash-pct { font-size: 12.5px; color: var(--text-soft); }
.hs-cash-pct b { font-family: var(--font-head); font-size: 16px; }
.hs-cash-card.up .hs-cash-pct b:first-child { color: #11714f; } .hs-cash-card.down .hs-cash-pct b:first-child { color: #b3262c; }
.hs-pctpill { display: inline-block; min-width: 58px; padding: 2px 10px; border-radius: 999px; font-family: var(--font-head); font-size: 14px; }
.hs-pctpill.up { background: #d7f5e8; color: #11714f; } .hs-pctpill.down { background: #fde0e1; color: #b3262c; }

/* ---------- 📦 ข้อมูลครบกี่ % (data_badge) ---------- */
.dc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle;
  background: #fff; border: 1.5px solid var(--dc, #cfc6dd); color: #3d3551; cursor: help; }
.dc-chip i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, #fff 56%, transparent 60%), conic-gradient(var(--dc) calc(var(--p) * 1%), #ece6f3 0); }
.dc-chip b { font-family: var(--font-head); font-size: 13px; color: var(--dc); }
.dc-chip small { font-size: 10.5px; font-weight: 600; color: #6b6380; }
.dc-chip.dc-good { --dc: #3b82c4; }
.dc-chip.dc-mid { --dc: #c98a00; }
.dc-chip.dc-low { --dc: #d33a3f; }
.dc-chip.dc-full { --dc: #1f9d6f; }
details.dc-box { display: inline-block; vertical-align: middle; }
details.dc-box > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
details.dc-box > summary::-webkit-details-marker { display: none; }
details.dc-box > summary em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent-strong); }
details.dc-box[open] { display: block; flex-basis: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.dc-bar { height: 8px; margin: 8px 0; border-radius: 999px; background: #f3c3c5; overflow: hidden; }
.dc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2fb383, #7fe0bd); transform-origin: left; animation: vmGrow .8s cubic-bezier(.2, .8, .3, 1) both; }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px 12px; }
.dc-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 4px 6px; border-radius: 8px; font-size: 12.5px; color: var(--text); }
.dc-list li b { font-weight: 700; }
.dc-list li small { grid-column: 2; font-size: 11px; color: var(--muted); }
.dc-list li.ok { background: rgba(47, 158, 118, .08); }
.dc-list li.no { background: rgba(229, 72, 77, .07); }
.dc-list li.no b { color: #b3262c; }
.dc-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .dc-bar i { animation: none; } }

@property --sa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes vxSuperSpin { to { --sa: 360deg; } }
/* แผงวิเคราะห์: ใบซุปเปอร์มีขอบทองเรืองแสง */
.vm-combo.super { border-color: transparent; background: linear-gradient(160deg, rgba(200, 215, 240, .22), rgba(255, 255, 255, .03)) padding-box, linear-gradient(120deg, #fff, #9aa6b8, #e8f0ff, #6f7b8e) border-box; box-shadow: 0 0 18px rgba(190, 215, 255, .4); }

/* ---------- ⏰ แจ้งเตือนถึงนาทีเข้าเล่น (app.js) ---------- */
.va-stack { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.va-toast { position: relative; pointer-events: auto; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; border-radius: 16px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #0b3a2e, #12060c); border: 2px solid #7fe0bd; box-shadow: 0 12px 30px rgba(0, 0, 0, .4), 0 0 20px rgba(127, 224, 189, .35);
  animation: vaIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes vaIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.va-h { font-family: var(--font-head); font-size: 16px; color: #7fe0bd; }
.va-toast a { font-weight: 800; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.va-j { font-size: 12px; color: #ffe08a; font-weight: 700; }
.va-p { font-size: 12.5px; color: rgba(255, 245, 245, .9); }
.va-x { position: absolute; right: 8px; top: 6px; border: 0; background: none; color: rgba(255, 255, 255, .7); font-size: 14px; cursor: pointer; }
.va-bell { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid #7fe0bd; background: rgba(127, 224, 189, .15); color: #fff; font-size: 11.5px; cursor: pointer; }
.va-left { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #7fe0bd; transform-origin: left; transform: scaleX(var(--left, 1)); transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { .vx-card.vx-super, .vx-super-h span, .va-toast { animation: none !important; } }

/* ---------- 🃏 สีการ์ดตามระดับคะแนนความเด่น (vip_tier) แบบการ์ด FIFA ----------
   💎 t-plat 94+ แพลทินัม · 🥇 t-gold 85+ ทอง · 🥈 t-silver 75+ เงิน · ⚫ t-black ต่ำกว่า 75 ดำ
   ใช้กับการ์ดหน้าแรก (.vx-card) และการ์ดแปะมุมแถวแมตช์ (.vj-card) · ซุปเปอร์ Joker ใช้สีตามคะแนนเหมือนใบอื่น ขนาดเท่ากัน
   ตัวแปร: --tb พื้นการ์ด · --tr ขอบฟอยล์วิ่ง · --tbd สีเส้นขอบ · --tg สีเรืองแสง */
.t-plat {
  --tb: linear-gradient(125deg, rgba(110, 215, 255, .38), transparent 30%, rgba(180, 140, 255, .38) 55%, transparent 78%, rgba(110, 215, 255, .32)),
        linear-gradient(150deg, #7f93b4, #34435f 28%, #95a8c6 48%, #232e46 72%, #677b9c);
  --tr: linear-gradient(120deg, #fff, #7fd6ff, #e6ecf7, #b996ff, #fff, #7fd6ff);
  --tbd: #e6eeff;
  --tg: rgba(120, 195, 255, .8);
}
.t-gold {
  --tb: linear-gradient(150deg, #e6a700, #8a5600 28%, #f2bb12 47%, #663e00 72%, #cf8f00);
  --tr: linear-gradient(120deg, #fff4b0, #ffbf00, #fffbe0, #c27a00, #ffe04d, #fff4b0);
  --tbd: #ffd23f;
  --tg: rgba(255, 185, 0, .75);
}
.t-silver {
  --tb: linear-gradient(150deg, #a0aab8, #56606e 28%, #b9c3cf 47%, #39404b 72%, #86909f);
  --tr: linear-gradient(120deg, #fff, #c3cbd6, #fff, #76808f, #eef1f5, #fff);
  --tbd: #eef1f5;
  --tg: rgba(215, 228, 245, .6);
}
.t-black {
  --tb: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c) 32%, transparent), transparent 70%),
        linear-gradient(150deg, #2c2c33, #08080a 30%, #26262c 50%, #020203 74%, #18181d);
  --tr: linear-gradient(120deg, #52525b, #e4e4e7, #18181b, #a1a1aa, #3f3f46, #52525b);
  --tbd: #71717a;
  --tg: rgba(170, 170, 185, .35);
}
@property --sx { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
@keyframes vxSheen { 0%, 35% { --sx: 130%; } 100% { --sx: -130%; } }
@keyframes vxOvrGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3), 0 0 12px var(--tg), 0 6px 14px rgba(0, 0, 0, .55); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 0 28px var(--tg), 0 6px 14px rgba(0, 0, 0, .55); } }

/* ---- การ์ดหน้าแรก ---- */
.vx-card[class*=" t-"] { background: var(--tb); box-shadow: 0 0 0 1px var(--tbd), 0 0 22px var(--tg), 0 14px 32px rgba(0, 0, 0, .45); }
.vx-card[class*=" t-"]:hover { box-shadow: 0 0 0 1px var(--tbd), 0 0 36px var(--tg), 0 22px 44px rgba(0, 0, 0, .5); }
.vx-card[class*=" t-"]::before { background: var(--tr) 0 0 / 300% 300%; padding: 3px; }
.vx-card[class*=" t-"] .vx-foil { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 55%, transparent 62%); }
.vx-card[class*=" t-"] .vx-joker-hero { background: radial-gradient(55% 75% at 50% 62%, var(--tg), transparent 75%); border-bottom-color: rgba(255, 255, 255, .3); }
.vx-card[class*=" t-"] .vx-joker-name { background: rgba(0, 0, 0, .65); }
/* พื้นโลหะสว่างบางจุด → ตัวหนังสือขาวมีเงาเข้ม + กล่องข้อมูลพื้นทึบครึ่งหนึ่ง อ่านได้ทุกสี */
.vx-card[class*=" t-"] :is(.vx-name, .vx-match, .vx-meter, .vx-why, .vx-track) { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.vx-card[class*=" t-"] .vx-name b { color: #fff; }
.vx-card[class*=" t-"] :is(.vx-name small, .vx-match > small, .vx-meter, .vx-track) { color: rgba(255, 255, 255, .9); }
.vx-card[class*=" t-"] .vx-match { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .35); }
.vx-card[class*=" t-"] .vx-match:hover { background: rgba(0, 0, 0, .42); }
.vx-card[class*=" t-"] .vx-why { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); }
.vx-card[class*=" t-"] .vx-why li { color: #fff; }
.vx-card[class*=" t-"] .vx-meter i { background: rgba(0, 0, 0, .35); }
.vx-card[class*=" t-"] .vx-meter em { background: linear-gradient(90deg, var(--tbd), #fff); }

/* ---- ป้ายคะแนน (vip_ovr_html): โล่ตัวเลขใหญ่แบบเรตติ้ง FIFA — ค่าเริ่มต้น = โล่เงินเลขดำ ---- */
.vx-ovr {
  position: absolute; z-index: 6; top: 10px; left: 10px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 64px; padding: 6px 8px 11px;
  border-radius: 12px 12px 34px 34px / 12px 12px 20px 20px;
  line-height: 1; color: #0b0f17; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%) var(--sx) 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #ffffff, #b9c1cc 28%, #f5f7fa 50%, #7f8998 76%, #e5e9ef);
  border: 2.5px solid #fff;
  transform: rotate(-5deg);
  animation: vxSheen 4s ease-in-out infinite, vxOvrGlow 2.4s ease-in-out infinite;
}
.vx-ovr::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; border: 1px solid rgba(0, 0, 0, .25); pointer-events: none; }   /* เส้นขอบในแบบปั๊มนูน */
.vx-ovr b { font-family: var(--font-head); font-size: 42px; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 2px 3px rgba(0, 0, 0, .25); }
.vx-ovr small { margin-top: 3px; padding: 2px 6px 0; border-top: 2px solid currentColor; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; }
.vx-super .vx-ovr small, .vj-card.super .vx-ovr small { letter-spacing: .14em; }
/* 🥇 ทอง: โล่ทองสด เลขน้ำตาลเข้ม */
.t-gold .vx-ovr { color: #3a1f00; border-color: #fff4c0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%) var(--sx) 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #fff2a8, #ffbf00 28%, #ffeb80 50%, #c27a00 76%, #ffd23f); }
/* 💎 แพลทินัม: โล่ดำนิล ขอบขาว เลขไล่เฉดแพลทินัม-ฟ้าเรืองแสง */
.t-plat .vx-ovr { color: #eaf2ff; border-color: #eaf2ff;
  background: linear-gradient(115deg, transparent 35%, rgba(170, 220, 255, .4) 50%, transparent 65%) var(--sx) 0 / 250% 100% no-repeat,
    linear-gradient(160deg, #2e3a52, #0a0e16 60%, #1b2233); }
.t-plat .vx-ovr::before { border-color: rgba(170, 220, 255, .45); }
.t-plat .vx-ovr b { color: transparent; background: linear-gradient(180deg, #fff 20%, #bfe6ff 55%, #b9a2ff); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 6px rgba(130, 200, 255, .9)); }
/* ⚫ ดำ: โล่ดำเงา เลขขาว */
.t-black .vx-ovr { color: #fff; border-color: #d4d4d8;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%) var(--sx) 0 / 250% 100% no-repeat,
    linear-gradient(160deg, #3f3f46, #09090b 60%, #27272a); }
.t-black .vx-ovr::before { border-color: rgba(255, 255, 255, .25); }
.t-black .vx-ovr b { text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }

/* ---- การ์ดแปะมุมแถวแมตช์ ---- */
.vj-card[class*=" t-"] {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, .06) 55%, transparent 65%) var(--sx) 0 / 250% 100% no-repeat, var(--tb);
  border: 2px solid var(--tbd);
  border-image: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 16px var(--tg), 4px 6px 0 rgba(0, 0, 0, .2), 0 12px 26px rgba(0, 0, 0, .45);
  animation: vjIn .7s cubic-bezier(.22, 1.4, .36, 1) backwards, vxSheen 4.5s ease-in-out infinite;
  animation-delay: calc(var(--k) * .12s + .2s), calc(var(--k) * .7s);
}
.vj-card[class*=" t-"] :is(.vj-name, .vj-why) { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
.vj-card[class*=" t-"] .vj-pick { box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
/* ป้ายคะแนนบนการ์ดแปะ: ยื่นออกนอกมุมซ้ายบนแบบสติกเกอร์ */
.vj-card .vx-ovr { top: -12px; left: -12px; min-width: 52px; padding: 5px 6px 9px; }
.vj-card .vx-ovr b { font-size: 34px; }
.vj-card .vx-ovr small { font-size: 8.5px; }
.vj-face { left: auto; right: 7px; transform: rotate(8deg); }

@media (max-width: 900px) { .vj-card .vx-ovr { top: -8px; left: -8px; } }
@media (prefers-reduced-motion: reduce) { .vx-ovr, .vj-card { animation: none !important; } }

/* ---------- 📐 การ์ดขนาดเท่ากันทุกใบแบบสำรับไพ่จริง (กว้างเท่ากัน + ทุกแถวสูงเท่ากัน) ---------- */
.vx-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 1fr; }   /* auto-fill: ใบน้อยไม่ยืดเต็มแถว · 1fr: สูงเท่าใบที่สูงสุด */
.vj-card { min-height: 226px; }   /* การ์ดแปะมุมแถว: กว้าง 162px เท่ากันอยู่แล้ว ล็อกความสูงให้เท่ากันด้วย */

/* ---------- 💎 แพลทินัม (94+): ลูกเล่นมากกว่าทอง ----------
   ขอบรุ้งแพลทินัมหมุนรอบ · ชั้นโฮโลแกรมรุ้งไหล + กากเพชรระยิบ · แสงเรืองเปลี่ยนสี ฟ้า→ม่วง→ชมพู · โล่คะแนนขอบเปลี่ยนสี */
@keyframes vxHolo { to { background-position: 23px 46px, 42px -55px, 300% 0; } }
@keyframes vxTwinkle { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes vxPlatGlow {
  0%, 100% { box-shadow: 0 0 0 1px #e6eeff, 0 0 24px rgba(120, 200, 255, .9), 0 14px 32px rgba(0, 0, 0, .45); }
  33% { box-shadow: 0 0 0 1px #efe6ff, 0 0 30px rgba(185, 150, 255, .9), 0 14px 32px rgba(0, 0, 0, .45); }
  66% { box-shadow: 0 0 0 1px #ffe6f4, 0 0 30px rgba(255, 150, 215, .85), 0 14px 32px rgba(0, 0, 0, .45); }
}
@keyframes vxPlatRim { 0%, 100% { border-color: #9fe0ff; } 33% { border-color: #cdb5ff; } 66% { border-color: #ffb3de; } }
.t-plat::after {   /* โฮโลแกรม + กากเพชร (อยู่ใต้ตัวหนังสือ ไม่บังการอ่าน) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.6px) 0 0 / 23px 23px,
    radial-gradient(circle, rgba(200, 235, 255, .85) 0 1px, transparent 1.6px) 11px 7px / 31px 31px,
    linear-gradient(115deg, transparent 0%, rgba(255, 90, 200, .38) 18%, rgba(90, 220, 255, .38) 36%, rgba(160, 255, 190, .3) 52%, rgba(255, 230, 120, .32) 68%, rgba(170, 120, 255, .38) 84%, transparent 100%) 0 0 / 300% 300%;
  mix-blend-mode: overlay;
  animation: vxHolo 7s linear infinite, vxTwinkle 1.8s ease-in-out infinite;
}
.vx-card.t-plat::after { z-index: 2; }   /* เนื้อหาการ์ดอยู่ z-index 3 */
.vj-card.t-plat::after { z-index: -1; }  /* vj-card เป็น stacking context: อยู่เหนือพื้น ใต้ตัวหนังสือ */
.vx-card.t-plat::before { background: conic-gradient(from var(--sa, 0deg), #fff, #7fd6ff, #b996ff, #ff9ad5, #fff, #7fd6ff, #fff); padding: 3px; animation: vxSuperSpin 4s linear infinite; }
.vx-card.t-plat { animation: vxDrop .9s cubic-bezier(.22, 1.4, .36, 1) backwards, vxPlatGlow 4s ease-in-out infinite; animation-delay: calc(var(--i) * .16s + .1s), 0s; }
.vj-card.t-plat { animation: vjIn .7s cubic-bezier(.22, 1.4, .36, 1) backwards, vxSheen 3.5s ease-in-out infinite, vxPlatGlow 4s ease-in-out infinite, vxPlatRim 4s ease-in-out infinite;
  animation-delay: calc(var(--k) * .12s + .2s), 0s, 0s, 0s; }
.t-plat .vx-ovr { animation: vxSheen 3s ease-in-out infinite, vxOvrGlow 2s ease-in-out infinite, vxPlatRim 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .t-plat::after, .vx-card.t-plat, .vx-card.t-plat::before, .vj-card.t-plat, .t-plat .vx-ovr { animation: none !important; } }

/* ---------- 📏 การ์ดกะทัดรัด: หัวเตี้ยลง เหตุผล 3 ข้อ ข้อละไม่เกิน 2 บรรทัด ท้ายการ์ด = ราคา + สถิติย้อนหลัง ---------- */
.vx-card { gap: 8px; }
.vx-joker-hero { height: 100px; }
.vx-joker-art { width: 94px; height: 94px; }
.vx-why li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-foot .vx-track { margin: 0; gap: 4px; }
.vj-card { min-height: 226px; }

/* ---------- 💎 แพลทินัม: ลายเส้นแกะสลักแบบธนบัตร (ทองไม่มี) ----------
   ลายดอกกุหลาบเส้นวงรีไขว้ (guilloche) หลังตัว Joker · เส้นคลื่นละเอียดทั้งใบ · ลายมุมกรอบคู่ + เพชร · กรอบเส้นในรอบการ์ด */
.t-plat {
  --tb:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cellipse id='e' cx='100' cy='100' rx='94' ry='30'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23fff' stroke-width='.5' stroke-opacity='.5'%3E%3Cuse href='%23e'/%3E%3Cuse href='%23e' transform='rotate(15 100 100)'/%3E%3Cuse href='%23e' transform='rotate(30 100 100)'/%3E%3Cuse href='%23e' transform='rotate(45 100 100)'/%3E%3Cuse href='%23e' transform='rotate(60 100 100)'/%3E%3Cuse href='%23e' transform='rotate(75 100 100)'/%3E%3Cuse href='%23e' transform='rotate(90 100 100)'/%3E%3Cuse href='%23e' transform='rotate(105 100 100)'/%3E%3Cuse href='%23e' transform='rotate(120 100 100)'/%3E%3Cuse href='%23e' transform='rotate(135 100 100)'/%3E%3Cuse href='%23e' transform='rotate(150 100 100)'/%3E%3Cuse href='%23e' transform='rotate(165 100 100)'/%3E%3Ccircle cx='100' cy='100' r='97' stroke-opacity='.4'/%3E%3Ccircle cx='100' cy='100' r='36' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E") 50% 14% / 240px 240px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1'%3E%3Cpath d='M2 4H28Q36 4 36 12V38'/%3E%3Cpath d='M2 9H26Q31 9 31 14V38' stroke-opacity='.5'/%3E%3C/g%3E%3Cpath d='M36 0L40 4L36 8L32 4Z' fill='%23fff'/%3E%3C/svg%3E") right 7px top 7px / 42px 42px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1'%3E%3Cpath d='M38 36H12Q4 36 4 28V2'/%3E%3Cpath d='M38 31H14Q9 31 9 26V2' stroke-opacity='.5'/%3E%3C/g%3E%3Cpath d='M4 32L8 36L4 40L0 36Z' fill='%23fff'/%3E%3C/svg%3E") left 7px bottom 7px / 42px 42px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.5' stroke-opacity='.2'%3E%3Cpath d='M0 4C15 -2 15 10 30 4S45 -2 60 4'/%3E%3Cpath d='M0 11C15 17 15 5 30 11S45 17 60 11'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 14px repeat,
    linear-gradient(125deg, rgba(110, 215, 255, .38), transparent 30%, rgba(180, 140, 255, .38) 55%, transparent 78%, rgba(110, 215, 255, .32)),
    linear-gradient(150deg, #7f93b4, #34435f 28%, #95a8c6 48%, #232e46 72%, #677b9c);
}
.vx-card.t-plat, .vj-card.t-plat { outline: 1px solid rgba(255, 255, 255, .55); outline-offset: -6px; }   /* กรอบเส้นในแบบบัตรพิมพ์ลาย */

/* ---------- ⚡ ลื่นขึ้น: ลดแอนิเมชันที่วาดใหม่ทุกเฟรม ----------
   เดิม: ขอบวิ่ง/แสงฟอยล์/เงาเรือง/โฮโลแกรม เล่นตลอดทุกใบพร้อมกัน → เว็บหน่วง กระตุก
   ตอนนี้: นิ่งเป็นค่าเริ่มต้น เหลือแค่ตัว Joker โยก (transform เบา) · ชี้เมาส์ที่การ์ดค่อยเล่นขอบวิ่ง + แสงฟอยล์
   แพลทินัมใบเดียวที่มีแสงฟอยล์กวาดช้าๆ ตลอด (ลายเส้น/โฮโลแกรม/กากเพชร/กรอบในยังอยู่ครบแบบนิ่ง) */
.vx-card::before, .vx-card[class*=" t-"]::before, .vx-card.t-plat::before { animation: none; }
.vx-card:hover::before { animation: vxGold 3s linear infinite; }
.vx-card.t-plat:hover::before { animation: vxSuperSpin 4s linear infinite; }
.vx-foil { opacity: 0; animation: none; }
.vx-card:hover .vx-foil { opacity: 1; animation: vxFoil 2.4s ease-in-out infinite; }
.vx-card.t-plat .vx-foil { opacity: 1; animation: vxFoil 7s ease-in-out infinite; }
.t-plat::after { animation: none; opacity: .85; }
.vx-card.t-plat { animation: vxDrop .9s cubic-bezier(.22, 1.4, .36, 1) backwards; animation-delay: calc(var(--i) * .16s + .1s);
  box-shadow: 0 0 0 1px #e6eeff, 0 0 24px rgba(150, 195, 255, .75), 0 14px 32px rgba(0, 0, 0, .45); }
.vj-card[class*=" t-"], .vj-card.t-plat { animation: vjIn .7s cubic-bezier(.22, 1.4, .36, 1) backwards; animation-delay: calc(var(--k) * .12s + .2s); }
.vj-card.t-plat { border-color: #d6e6ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 18px rgba(150, 195, 255, .75), 0 12px 26px rgba(0, 0, 0, .45); }
.vx-card .vx-ovr, .vj-card .vx-ovr { animation: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 16px var(--tg), 0 6px 14px rgba(0, 0, 0, .55); }
.vx-card.t-plat .vx-ovr, .vj-card.t-plat .vx-ovr { border-color: var(--tbd); }

/* ---------- 📏 ย่อขนาดโดยรวมลงเล็กน้อย ---------- */
.vx-grid { grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 18px 14px; }
.vx-card { padding: 14px 14px 36px; }
.vx-joker-hero { height: 90px; margin: -5px -14px 0; }
/* หน้าแรก (คอมโบเด็ดวันนี้): ย่อการ์ดทั้งใบลงอีก ~14% ตามสัดส่วนเดิม แถวหนึ่งได้การ์ดมากขึ้น — จอคอมเท่านั้น (มือถือย่อไว้แล้ว 2 ใบต่อแถว) */
@media (min-width: 761px) { .vx-grid.vx-home { zoom: .86; } }
.vx-joker-art { width: 84px; height: 84px; }
.vx-name b { font-size: 17px; }
.vx-idx { width: 40px; min-height: 50px; }
.vx-idx b { font-size: 21px; }
.vx-idx i { font-size: 17px; }
.vx-card .vx-ovr { min-width: 56px; padding: 5px 7px 10px; }
.vx-card .vx-ovr b { font-size: 36px; }
.vx-card .vx-ovr small { font-size: 9px; }
.vj-card { width: 150px; min-height: 212px; }
.vj-card .vj-art, .vj-card .vj-art .vx-joker-art { width: 66px; height: 66px; }
.vj-card .vx-ovr b { font-size: 30px; }

/* ---------- 🪙 โลหะเหมือนจริง (แทนสีสดแบบเดิม) ----------
   หลักที่ทำให้ดูเป็นโลหะจริง: แถบแสงสะท้อนสว่าง-มืดสลับ (ขัดเงา) + เส้นขนแมวละเอียด (brushed) + ขอบนูน (bevel)
   + ตัวหนังสือบนเนื้อโลหะเป็นแบบแกะสลัก (สีเข้ม เงาสว่างใต้ตัว) + กล่องข้อมูลเป็นกระจกดำ อ่านง่าย
   + โล่คะแนนเป็นลงยาดำ เลขไล่เฉดโลหะของระดับนั้น พร้อมชื่อระดับ (PLATINUM / GOLD / SILVER / BLACK)
   --ink สีตัวแกะสลัก · --num สีเลขบนโล่ */
.t-gold {
  --tb: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(90, 60, 0, .05) 0 1px, transparent 1px 4px),
        linear-gradient(155deg, #3d2702 0%, #8f6110 13%, #d9a843 23%, #a8751a 33%, #523503 47%, #8e6112 59%, #deb24f 69%, #7f550b 81%, #342101 100%);
  --tr: linear-gradient(120deg, #5a3d06, #f5d27a, #8f6414, #ffe7a3, #6b4a0a, #f5d27a);
  --tbd: #d4a441; --tg: rgba(230, 170, 50, .45);
  --ink: #fff3cf; --num: linear-gradient(180deg, #fff6d0 10%, #f2c14e 50%, #a8741a);
}
.t-silver {
  --tb: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
        linear-gradient(155deg, #33373c 0%, #787e87 13%, #c3c8cf 23%, #7d838c 35%, #3d4148 49%, #777d86 61%, #bcc1c8 71%, #646a72 83%, #2e3236 100%);
  --tr: linear-gradient(120deg, #4b5058, #eef0f3, #7d838c, #fff, #3d4148, #eef0f3);
  --tbd: #b9bec5; --tg: rgba(200, 210, 225, .3);
  --ink: #f4f6f8; --num: linear-gradient(180deg, #fff 10%, #cfd4db 50%, #7d848e);
}
.t-plat {
  --tb:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cellipse id='e' cx='100' cy='100' rx='94' ry='30'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23475569' stroke-width='.5' stroke-opacity='.4'%3E%3Cuse href='%23e'/%3E%3Cuse href='%23e' transform='rotate(15 100 100)'/%3E%3Cuse href='%23e' transform='rotate(30 100 100)'/%3E%3Cuse href='%23e' transform='rotate(45 100 100)'/%3E%3Cuse href='%23e' transform='rotate(60 100 100)'/%3E%3Cuse href='%23e' transform='rotate(75 100 100)'/%3E%3Cuse href='%23e' transform='rotate(90 100 100)'/%3E%3Cuse href='%23e' transform='rotate(105 100 100)'/%3E%3Cuse href='%23e' transform='rotate(120 100 100)'/%3E%3Cuse href='%23e' transform='rotate(135 100 100)'/%3E%3Cuse href='%23e' transform='rotate(150 100 100)'/%3E%3Cuse href='%23e' transform='rotate(165 100 100)'/%3E%3Ccircle cx='100' cy='100' r='97' stroke-opacity='.35'/%3E%3Ccircle cx='100' cy='100' r='36' stroke-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 50% 12% / 230px 230px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23334155' stroke-opacity='.6' stroke-width='1'%3E%3Cpath d='M2 4H28Q36 4 36 12V38'/%3E%3Cpath d='M2 9H26Q31 9 31 14V38' stroke-opacity='.35'/%3E%3C/g%3E%3Cpath d='M36 0L40 4L36 8L32 4Z' fill='%23334155' fill-opacity='.6'/%3E%3C/svg%3E") right 7px top 7px / 42px 42px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23334155' stroke-opacity='.6' stroke-width='1'%3E%3Cpath d='M38 36H12Q4 36 4 28V2'/%3E%3Cpath d='M38 31H14Q9 31 9 26V2' stroke-opacity='.35'/%3E%3C/g%3E%3Cpath d='M4 32L8 36L4 40L0 36Z' fill='%23334155' fill-opacity='.6'/%3E%3C/svg%3E") left 7px bottom 7px / 42px 42px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cg fill='none' stroke='%23475569' stroke-width='.5' stroke-opacity='.14'%3E%3Cpath d='M0 4C15 -2 15 10 30 4S45 -2 60 4'/%3E%3Cpath d='M0 11C15 17 15 5 30 11S45 17 60 11'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 14px repeat,
    linear-gradient(125deg, rgba(190, 225, 255, .18), transparent 35%, rgba(225, 205, 255, .16) 60%, transparent 85%),
    linear-gradient(155deg, #414b5c 0%, #8792a8 13%, #d3dbe7 23%, #929eb2 34%, #4c5770 48%, #8591a8 60%, #ccd5e2 70%, #737f94 82%, #3c4557 100%);
  --tr: linear-gradient(120deg, #5d6880, #fff, #a9b5c9, #fff, #4c5770, #eef3fa);
  --tbd: #d9e2ef; --tg: rgba(170, 200, 255, .5);
  --ink: #f7faff; --num: linear-gradient(180deg, #fff 10%, #e3eaf4 45%, #9aa7ba);
}
.t-black {
  --tb: linear-gradient(155deg, transparent 20%, rgba(255, 255, 255, .07) 32%, transparent 44%, transparent 62%, rgba(255, 255, 255, .05) 72%, transparent 84%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 3px, transparent 3px 6px),
        repeating-linear-gradient(-45deg, #17171a 0 3px, #0c0c0e 3px 6px);
  --tr: linear-gradient(120deg, #2a2a2e, #b8b8c0, #1a1a1d, #e4e4e7, #3f3f46, #b8b8c0);
  --tbd: #8b8b93; --tg: rgba(0, 0, 0, .35);
  --ink: #fff; --num: linear-gradient(180deg, #fff 10%, #d4d4d8 50%, #71717a);
}
.t-plat::after { opacity: .3; }   /* มุก/กากเพชรจางๆ พอให้รู้ว่าเป็นใบพิเศษ ไม่ใช่รุ้งจัด */

/* ตัวการ์ด: ขอบนูน + เงาจริง */
.vx-card[class*=" t-"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 1px var(--tbd), 0 0 18px var(--tg), 0 10px 26px rgba(0, 0, 0, .45); }
.vx-card[class*=" t-"]::before { background: var(--tr) 0 0 / 300% 300%; }
.vx-card[class*=" t-"] .vx-joker-hero { background: radial-gradient(55% 75% at 50% 62%, rgba(255, 255, 255, .28), transparent 72%); border-bottom: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.vx-card[class*=" t-"] .vx-joker-hero::before { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0 10deg, transparent 10deg 24deg); }
.vx-card[class*=" t-"] .vx-mark { color: rgba(0, 0, 0, .1); opacity: 1; }
.vx-card.t-black .vx-mark { color: rgba(255, 255, 255, .06); }
/* ตัวหนังสือบนเนื้อโลหะ = แกะสลัก */
.vx-card:is(.t-plat, .t-gold, .t-silver) .vx-name b { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.vx-card:is(.t-plat, .t-gold, .t-silver) .vx-name small { color: var(--ink); opacity: .75; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.vx-card:is(.t-plat, .t-gold, .t-silver) .vx-track { color: var(--ink); text-shadow: none; }
/* กล่องข้อมูล = กระจกดำ */
.vx-card[class*=" t-"] :is(.vx-match, .vx-why) { background: rgba(8, 10, 14, .66); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.vx-card[class*=" t-"] .vx-match:hover { background: rgba(8, 10, 14, .78); }
.vx-card[class*=" t-"] .vx-joker-name { background: rgba(8, 10, 14, .78); }

/* โล่คะแนน: ลงยาดำ ขอบโลหะของระดับ เลขไล่เฉดโลหะ */
.vx-card .vx-ovr, .vj-card .vx-ovr {
  color: #e5e7eb; border: 2px solid var(--tbd);
  background: linear-gradient(160deg, #2b2f36, #0a0b0e 55%, #1c1f25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .5);
}
.vx-card .vx-ovr::before, .vj-card .vx-ovr::before { border-color: rgba(255, 255, 255, .18); }
.vx-card .vx-ovr b, .vj-card .vx-ovr b { color: transparent; background: var(--num); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.vx-card .vx-ovr small, .vj-card .vx-ovr small { font-size: 8px; letter-spacing: .08em; border-top-color: var(--tbd); color: #e5e7eb; }

/* การ์ดแปะมุมแถวแมตช์ */
.vj-card[class*=" t-"], .vj-card.t-plat { border: 2px solid var(--tbd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 14px var(--tg), 4px 6px 0 rgba(0, 0, 0, .18), 0 12px 26px rgba(0, 0, 0, .45); }
.vj-card:is(.t-plat, .t-gold, .t-silver) .vj-name { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.vj-card:is(.t-plat, .t-gold, .t-silver) .vj-why { color: #fff; text-shadow: none; padding: 4px 6px; border-radius: 6px; background: rgba(8, 10, 14, .62); }

/* ---------- 👻 แพลทินัม: Joker ตัวใหญ่จางๆ เต็มหลังการ์ด (vip_ghost_html) ----------
   อยู่หลังสุด ล้นขอบการ์ดจนเห็นแค่ครึ่งหน้า ลอยโยกช้าๆ (transform อย่างเดียว ไม่หน่วง) · ตัวเล็กบนหัวการ์ดซ่อนไว้ (ย้ายมาเป็นตัวใหญ่แทน) */
.vx-ghost { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vj-card .vx-ghost { z-index: -1; }   /* vj-card เป็น stacking context: อยู่เหนือพื้นการ์ด ใต้ทุกอย่าง */
.vx-card.t-plat .vx-joker-hero .vx-joker-art, .vj-card.t-plat .vj-art { visibility: hidden; }
.vx-card.t-plat .vx-joker-hero { background: none; }
.vx-card.t-plat .vx-joker-hero::before { display: none; }

/* ---------- 🃏 แพลทินัม: รูป Joker ไพ่จริง (vip_ghost_html) ----------
   หน้า Joker อยู่กลางหัวการ์ด (ตรงที่เคยเป็นตัวเล็ก) หมวกล้นขอบบน ตัวอักษร JOKER บนตัวเห็นชัดว่าเป็น Joker
   multiply: พื้นขาวของรูปกลืนหายไปกับเนื้อแพลทินัม เหลือแต่ตัวละคร · ไล่จางลงด้านล่างใต้กล่องข้อมูล
   ขนาด: กว้าง 150% ของการ์ด · หน้า (55% / 21% ของรูป) มาอยู่กลางการ์ด ห่างขอบบน ~24% ของความกว้าง (margin-top % คิดจากความกว้าง) */
.vx-ghost-img {
  position: absolute; top: 0; left: -32%; width: 150%; max-width: none; height: auto; margin-top: -24%;
  mix-blend-mode: multiply; opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, #000 28%, rgba(0, 0, 0, .35) 50%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 28%, rgba(0, 0, 0, .35) 50%, transparent 75%);
  transform-origin: 55% 22%; animation: vxGhostImg 8s ease-in-out infinite;
}
@keyframes vxGhostImg { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(4px) rotate(2deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .vx-ghost-img { animation: none; } }

/* ---------- 🖼️ โลหะเข้มขึ้น + กรอบการ์ดแบบการ์ดสะสม + ท้ายการ์ดจบที่ราคา ----------
   โลหะโทนเข้มขึ้นแล้ว (ใน .t-gold/.t-silver/.t-plat) → ตัวหนังสือบนเนื้อโลหะเป็นสีอ่อน เงาเข้มใต้ตัว (--ink)
   กรอบ: ขอบโลหะหนา 5px (::before) → เส้นดำบาง 1px → เส้นสว่างบางด้านใน (outline) = กรอบสองชั้นแบบการ์ดพรีเมียม */
.vx-card:is(.t-plat, .t-gold, .t-silver) .vx-name b { text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .6); }
.vx-card:is(.t-plat, .t-gold, .t-silver) .vx-name small { opacity: .85; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.vj-card:is(.t-plat, .t-gold, .t-silver) .vj-name { text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }

.vx-card[class*=" t-"]::before { padding: 5px; }
.vx-card[class*=" t-"] {
  outline: 1px solid rgba(255, 255, 255, .38); outline-offset: -9px;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 18px var(--tg), 0 10px 26px rgba(0, 0, 0, .5);
}
.vx-card.t-plat { outline-color: rgba(255, 255, 255, .5); }
.vj-card[class*=" t-"], .vj-card.t-plat {
  border: 4px solid var(--tbd);
  outline: 1px solid rgba(255, 255, 255, .38); outline-offset: -8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 14px var(--tg), 4px 6px 0 rgba(0, 0, 0, .18), 0 12px 26px rgba(0, 0, 0, .45);
}

/* คู่แข่ง: โลโก้เจ้าบ้าน + ชื่อเจ้าบ้าน · VS · โลโก้ทีมเยือน (ไม่มีชื่อเยือน) + เวลาเตะ */
.vx-match { grid-template-columns: minmax(0, 1fr) auto auto; }
.vx-match .vx-t b { font-size: 13.5px; }
.vx-match .vx-t .tb { width: 30px; height: 30px; }
.vx-match .vx-t.away { justify-content: center; }

/* ท้ายการ์ด: ป้ายราคาอย่างเดียว */
.vx-foot { justify-content: flex-start; }
.vx-card[class*=" t-"]:hover { box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 30px var(--tg), 0 18px 36px rgba(0, 0, 0, .55); }

/* ---------- ➖ เส้นคั่นระหว่างคู่ (index.php .vs-sep) ----------
   เส้นหนาไล่สีจางสองข้าง + ป้าย "คู่ที่ N" ตรงกลาง → เห็นชัดว่าจบคู่นี้ เริ่มคู่ถัดไป
   + กรอบการ์ดคู่หนาขึ้น มีแถบสีซ้ายชัด ทั้งสองโทน */
.vs-rows { gap: 6px; }
.vs-sep { display: flex; align-items: center; gap: 10px; margin: 8px 4px; }
.vs-sep::before, .vs-sep::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #e5484d 35%, #e5484d); opacity: .55; }
.vs-sep::after { background: linear-gradient(270deg, transparent, #e5484d 35%, #e5484d); }
.vs-sep span { flex: none; padding: 3px 14px; border-radius: 999px; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #e5484d, #b3262c); box-shadow: 0 3px 8px rgba(179, 38, 44, .3); }
details.vs-drow.tone-b { border: 2.5px solid #cbbfd9; border-left: 8px solid #8a6fb0; }
details.vs-drow.tone-a { border-width: 2.5px; border-left-width: 8px; }

/* ---------- ⚔️ การ์ดพลังใต้โลโก้ทีม (index.php vr_power_cards): แนวรุก 🔥 · กองกลาง 👑 · แนวรับ 🛡️ ----------
   การ์ดเข้มไล่สีตามแนว มีแถบเงาเฉียง + ไอคอนในช่องกระจกเรืองแสง + ตัวเลขใหญ่ · ลายน้ำไอคอนใหญ่จางมุมขวา
   ฝั่งที่ดีกว่า = ขอบทอง เรืองทอง + ริบบิ้น "✓ เหนือกว่า" · ฝั่งที่ด้อยกว่า = หม่นลง · นิ่ง ไม่มีแอนิเมชันวน (ไม่หน่วง) */
.vr-pcs { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 230px; margin-top: 8px; }
.vr-pc {
  --k1: #ff7a18; --k2: #c81e1e; --k3: #4a0707;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 12px 6px 12px 6px;
  text-align: left; color: #fff;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 46%, transparent 54%),
              linear-gradient(135deg, var(--k1), var(--k2) 55%, var(--k3));
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .28);
}
.vr-pc.pc-mid { --k1: #a855f7; --k2: #6d28d9; --k3: #2e1065; }
.vr-pc.pc-def { --k1: #38bdf8; --k2: #1d4ed8; --k3: #0b1e4d; }
.vr-pc::after { position: absolute; right: -8px; bottom: -14px; font-size: 54px; line-height: 1; opacity: .13; transform: rotate(-12deg); pointer-events: none; }
.vr-pc.pc-atk::after { content: "🔥"; }
.vr-pc.pc-mid::after { content: "👑"; }
.vr-pc.pc-def::after { content: "🛡️"; }
.pc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 22px; line-height: 1;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 12px color-mix(in srgb, var(--k1) 70%, transparent); }
.pc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pc-t small { font-size: 12px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pc-t em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-v { position: relative; z-index: 1; font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
/* ดีกว่า: ขอบทอง + เรือง + ริบบิ้นมุมบน */
.vr-pc.win { border: 2px solid #ffd54a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .25), 0 0 16px rgba(255, 200, 60, .55), 0 6px 14px rgba(0, 0, 0, .3); }
.vr-pc.win .pc-v { color: #ffe27a; }
.pc-win { position: absolute; top: 0; right: 0; padding: 1px 8px 2px; border-radius: 0 0 0 8px; font-style: normal; font-size: 9.5px; font-weight: 800; color: #4a2c00; background: linear-gradient(135deg, #ffe89a, #f5b82e); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.vr-pc.win .pc-v { margin-top: 10px; }
/* ด้อยกว่า: หม่นลง */
.vr-pc.lose { filter: saturate(.45) brightness(.88); }
.vr-pc.lose .pc-ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
/* แผงล่างเหลือฝั่งเดียว (อีกฝั่งไม่มีปัจจัยราคาต่อ): ให้อยู่ฝั่งของตัวเอง */
.vr-bottom > .vr-panel.away:only-child { grid-column: 2; }
@media (max-width: 760px) {
  .vr-pcs { max-width: none; gap: 5px; }
  .vr-pc { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px; padding: 5px 8px 5px 5px; }
  .pc-ic { width: 32px; height: 32px; font-size: 18px; }
  .pc-v { font-size: 18px; }
  .pc-t em { display: none; }
}

/* ---------- 🂠 การ์ดพลังแบบไพ่แนวตั้ง 3 ใบเรียงข้างกัน (ทับสไตล์แนวนอนด้านบน) ----------
   ช่องทีมยืดเต็มความสูงแถว (เท่าช่องกลาง) → การ์ดยืดสูงตามพอดี ไม่สั้นกุด
   ในไพ่: ชื่อแนวบนสุด · ไอคอนวงกลมเรืองแสงกลางใบ · ตัวเลขใหญ่ · ชื่อระดับล่างสุด · กรอบเส้นในแบบไพ่จริง
   ฝั่งที่ดีกว่า: แถบทอง "✓ เหนือกว่า" พาดหัวไพ่ */
.vr-side { align-self: stretch; }
.vr-pcs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 7px; width: 100%; max-width: 250px; margin-top: 10px; }
.vr-pc {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px;
  min-height: 150px; max-height: 240px; padding: 18px 4px 9px; border-radius: 10px; text-align: center;
  outline: 1px solid rgba(255, 255, 255, .3); outline-offset: -5px;
  background: linear-gradient(160deg, transparent 40%, rgba(255, 255, 255, .14) 48%, transparent 56%),
              radial-gradient(80% 45% at 50% 42%, rgba(255, 255, 255, .18), transparent 70%),
              linear-gradient(180deg, var(--k1), var(--k2) 55%, var(--k3));
}
.vr-pc .pc-t { display: contents; }
.vr-pc .pc-t small { order: 1; font-size: 12px; }
.vr-pc .pc-ic { order: 2; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; }
.vr-pc .pc-v { order: 3; font-size: 24px; margin: 0; }
.vr-pc .pc-t em { order: 4; max-width: 100%; font-size: 10px; line-height: 1.2; white-space: normal; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.vr-pc::after { right: 50%; bottom: 8px; margin-right: -34px; font-size: 68px; opacity: .1; transform: rotate(-10deg); }
.vr-pc.win .pc-v { margin-top: 0; }
.pc-win { left: 0; right: 0; top: 0; padding: 2px 0 3px; border-radius: 0; font-size: 9px; text-align: center; letter-spacing: .02em; }
@media (max-width: 760px) {
  .vr-pcs { gap: 4px; max-width: none; }
  .vr-pc { min-height: 118px; padding: 16px 2px 7px; }
  .vr-pc .pc-t small { font-size: 10.5px; }
  .vr-pc .pc-ic { width: 32px; height: 32px; font-size: 18px; }
  .vr-pc .pc-v { font-size: 18px; }
  .pc-win { font-size: 7.5px; letter-spacing: 0; }
}

/* ---------- 🂠 การ์ดพลัง: ไพ่แนวตั้งขนาดคงที่ (ใหญ่กว่าไพ่พิศดารนิดหน่อย) เรียบง่าย สองฝั่งเหมือนกัน ----------
   ทับสไตล์ก่อนหน้า: ไม่ยืดตามความสูงแถวแล้ว · สัดส่วนไพ่จริง 5:7 · กว้างสูงสุด 84px (ไพ่พิศดาร 76px)
   ในไพ่เหลือ 3 อย่าง: ชื่อแนว · ไอคอน · ตัวเลข (ชื่อระดับอยู่ใน tooltip) · ฝั่งดีกว่า = ขอบทอง + เหรียญ ✓ มุมขวาบน */
.vr-side { align-self: start; }
.vr-pcs { flex: none; display: flex; justify-content: center; gap: 7px; max-width: none; margin-top: 10px; }
.vr-pc {
  flex: none; width: min(84px, calc((100% - 14px) / 3)); aspect-ratio: 5 / 7; min-height: 0; max-height: none;
  justify-content: center; gap: 6px; padding: 8px 4px;
  border-radius: 9px; border: 1.5px solid rgba(255, 255, 255, .35);
  outline: 1px solid rgba(255, 255, 255, .28); outline-offset: -5px;
  background: radial-gradient(90% 55% at 50% 30%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(170deg, var(--k1), var(--k2) 60%, var(--k3));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.vr-pc::after { content: none; }
.vr-pc .pc-t small { font-size: 11.5px; }
.vr-pc .pc-ic { width: 36px; height: 36px; font-size: 20px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.vr-pc .pc-v { font-size: 22px; }
.vr-pc .pc-t em { display: none; }
.vr-pc.win { border: 2px solid #ffd54a; box-shadow: 0 0 12px rgba(255, 200, 60, .5), 0 4px 10px rgba(0, 0, 0, .25); }
.vr-pc .pc-win { left: auto; right: -1px; top: -1px; width: 20px; height: 20px; padding: 0; border-radius: 0 8px 0 8px; font-size: 0; }
.vr-pc .pc-win::before { content: "✓"; display: grid; place-items: center; height: 100%; font-size: 12px; font-weight: 900; }
.vr-pc.lose { filter: saturate(.5) brightness(.9); }
@media (max-width: 760px) {
  .vr-pcs { gap: 4px; }
  .vr-pc { width: calc((100% - 8px) / 3); min-height: 0; padding: 6px 2px; gap: 3px; }
  .vr-pc .pc-t small { font-size: 9.5px; }
  .vr-pc .pc-ic { width: 26px; height: 26px; font-size: 15px; }
  .vr-pc .pc-v { font-size: 16px; }
}

/* ---------- ⚖️ สองฝั่งเท่ากันเสมอ (vr-side ใช้ subgrid แบ่งแถวร่วมกัน) ----------
   ปัญหาเดิม: ฝั่งที่มีป้าย "ตัวเต็ง" / ชื่อทีมยาว 2 บรรทัด / อันดับยาว ดันการ์ดพลังลงต่ำกว่าอีกฝั่ง
   แก้: ช่องทีมทั้งสองฝั่งใช้ 5 แถวเดียวกัน (โลโก้ · ชื่อ · เจ้าบ้าน/อันดับ · ตัวเต็ง · การ์ดพลัง)
   แต่ละแถวสูงเท่าฝั่งที่สูงกว่า → การ์ดพลังสองฝั่งเริ่มระดับเดียวกันพอดี · ฝั่งไม่มีป้ายตัวเต็ง = เว้นช่องว่างไว้เท่ากัน */
.vr-top { grid-template-rows: repeat(5, auto) 1fr; row-gap: 6px; }   /* แถวที่ 6 (1fr) รับความสูงส่วนเกินของช่องกลาง ไม่ให้ไปถ่างแถวของช่องทีม */
.vr-top > .vr-side { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 5; justify-items: center; align-self: stretch; row-gap: 6px; }
.vr-top > .vr-side.home { grid-column: 1; }
.vr-top > .vr-side.away { grid-column: 3; }
.vr-top > .vr-center { grid-column: 2; grid-row: 1 / span 6; align-self: start; }
.vr-side > .vr-logo { grid-row: 1; align-self: end; }
.vr-side > .vr-name { grid-row: 2; align-self: center; }
.vr-side > .vr-role { grid-row: 3; align-self: start; }
.vr-side > .vr-fav { grid-row: 4; align-self: center; }
.vr-side > .vr-pcs { grid-row: 5; align-self: start; margin-top: 4px; }
@media (max-width: 760px) {
  .vr-top { grid-template-rows: repeat(5, auto) auto; grid-template-areas: none; }
  .vr-top > .vr-side.home { grid-area: auto; grid-column: 1; grid-row: 1 / span 5; }
  .vr-top > .vr-side.away { grid-area: auto; grid-column: 2; grid-row: 1 / span 5; }
  .vr-top > .vr-center { grid-area: auto; grid-column: 1 / -1; grid-row: 6; }
}
/* การ์ดพลัง + โลโก้/ชื่อ อยู่กึ่งกลางช่องทีมทั้งสองฝั่ง */
.vr-side > .vr-pcs { justify-self: stretch; width: 100%; max-width: none; display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
.vr-side > :not(.vr-pcs) { justify-self: center; text-align: center; }

/* ---------- ▯ การ์ดพลังสี่เหลี่ยมแนวตั้ง (ไพ่ 5:7) ซ้อนลงมาเป็นคอลัมน์ กึ่งกลางช่องทีม ----------
   (กฎเก่าตั้ง .vr-pcs เป็นแนวตั้งอยู่แล้ว เดิมเลยชิดซ้าย → จัดกึ่งกลาง) · เยื้อง/เอียงคนละนิดแบบวางด้วยมือ ทับกันเล็กน้อย */
.vr-side > .vr-pcs { flex-direction: column; align-items: center; gap: 0; }
.vr-side .vr-pc { width: 84px; margin-top: -10px; transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.vr-side .vr-pc:first-child { margin-top: 0; }
.vr-side .vr-pc:nth-child(1) { transform: translateX(-12px) rotate(-6deg); z-index: 3; }
.vr-side .vr-pc:nth-child(2) { transform: translateX(12px) rotate(5deg); z-index: 2; }
.vr-side .vr-pc:nth-child(3) { transform: translateX(-4px) rotate(-3deg); z-index: 1; }
.vr-side .vr-pc:hover { transform: rotate(0) scale(1.08); z-index: 5; }
@media (max-width: 760px) {
  .vr-side .vr-pc { width: 64px; margin-top: -8px; }
  .vr-side .vr-pc:nth-child(1) { transform: translateX(-8px) rotate(-6deg); }
  .vr-side .vr-pc:nth-child(2) { transform: translateX(8px) rotate(5deg); }
  .vr-side .vr-pc:nth-child(3) { transform: translateX(-3px) rotate(-3deg); }
}

/* ---------- ⚔️ จัดเป็นระเบียบ: คอลัมน์ตรง ระยะเท่ากัน · เอียงแบบตั้งใจ สองฝั่งกระจกเงาหันเข้าหากัน (เหมือนตั้งท่าสู้) ----------
   เจ้าบ้านเอียงขวาเข้าหากลาง · ทีมเยือนเอียงซ้ายเข้าหากลาง · ทุกใบในฝั่งเดียวกันเอียงเท่ากัน ไม่เยื้องสุ่มแล้ว */
.vr-side > .vr-pcs { gap: 8px; }
.vr-side .vr-pc, .vr-side .vr-pc:first-child { margin-top: 0; }
.vr-side.home .vr-pc:nth-child(n) { transform: translateX(6px) rotate(6deg); }
.vr-side.away .vr-pc:nth-child(n) { transform: translateX(-6px) rotate(-6deg); }
.vr-side.home .vr-pc:hover, .vr-side.away .vr-pc:hover { transform: rotate(0) scale(1.08); }
@media (max-width: 760px) {
  .vr-side > .vr-pcs { gap: 6px; }
  .vr-side.home .vr-pc:nth-child(n) { transform: translateX(4px) rotate(6deg); }
  .vr-side.away .vr-pc:nth-child(n) { transform: translateX(-4px) rotate(-6deg); }
}

/* ---------- 🎨 การ์ดพลังพื้นโทนอ่อน + ลายเอกลักษณ์ของแต่ละแนว ----------
   แนวรุก = พีชส้มอ่อน ลายลูกศร ›› พุ่งไปข้างหน้า · กองกลาง = ลาเวนเดอร์อ่อน ลายวงกลมกลางสนาม+เส้นแบ่งครึ่ง
   แนวรับ = ฟ้าอ่อน ลายกำแพงอิฐ · ตัวหนังสือเข้มสีตามแนว · ดีกว่า = ขอบทอง + ✓ · ด้อยกว่า = จางลง */
.vr-side .vr-pc { --ink: #7c2d12; --line: #fb923c; border: 2px solid var(--line); outline: 1px solid color-mix(in srgb, var(--line) 45%, transparent); outline-offset: -6px; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); color: var(--ink); }
.vr-side .vr-pc.pc-atk {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l6 6-6 6M12 6l6 6-6 6' fill='none' stroke='%23ea580c' stroke-opacity='.13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 22px 22px repeat,
              linear-gradient(170deg, #fff6ee, #ffe3cc);
}
.vr-side .vr-pc.pc-mid { --ink: #4c1d95; --line: #a78bfa;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 118' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%237c3aed' stroke-opacity='.2' stroke-width='1.5'%3E%3Cpath d='M0 59H84'/%3E%3Ccircle cx='42' cy='59' r='24'/%3E%3C/g%3E%3Ccircle cx='42' cy='59' r='2.5' fill='%237c3aed' fill-opacity='.25'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
              linear-gradient(170deg, #f7f2ff, #e9ddff);
}
.vr-side .vr-pc.pc-def { --ink: #1e3a8a; --line: #60a5fa;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 .5H24M0 6.5H24M6 .5V6.5M18 6.5V12' fill='none' stroke='%232563eb' stroke-opacity='.15' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 12px repeat,
              linear-gradient(170deg, #f0f7ff, #d9ebff);
}
.vr-side .vr-pc::before, .vr-side .vr-pc::after { content: none; }
.vr-side .vr-pc .pc-t small { color: var(--ink); text-shadow: none; letter-spacing: .03em; }
.vr-side .vr-pc .pc-ic { background: #fff; box-shadow: 0 0 0 2px var(--line), 0 2px 6px rgba(0, 0, 0, .12); }
.vr-side .vr-pc .pc-v { color: var(--ink); text-shadow: none; }
.vr-side .vr-pc.win { border: 2.5px solid #f5b82e; box-shadow: 0 0 0 1px #fff, 0 0 12px rgba(245, 184, 46, .55), 0 3px 8px rgba(0, 0, 0, .12); }
.vr-side .vr-pc.win .pc-v { color: var(--ink); }
.vr-side .vr-pc.lose { filter: saturate(.6); opacity: .8; }

/* ---------- 🎨 การ์ดพลังโทนเข้ม เอกลักษณ์ชัดแต่ละแนว (ทับโทนอ่อนด้านบน · ทรงไพ่เดิม) ----------
   แนวรุก = แดงเลือดหมู→ดำ ขอบ/ตัวเลขส้มไฟ ลาย ›› ส้ม · กองกลาง = เขียวสนามหญ้าเข้ม ลายเส้นสนามขาว (วงกลมกลาง)
   แนวรับ = กรมท่าเหล็ก ขอบ/ตัวเลขฟ้าน้ำแข็ง ลายกำแพงอิฐฟ้า · ตัวหนังสือขาว ตัวเลขสีเอกลักษณ์ · ดีกว่า = ขอบทอง + ✓ */
.vr-side .vr-pc { --ink: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }
.vr-side .vr-pc.pc-atk { --line: #ff6b1a; --acc: #ffb347;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6l6 6-6 6M12 6l6 6-6 6' fill='none' stroke='%23ff6b1a' stroke-opacity='.22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 22px 22px repeat,
              radial-gradient(90% 50% at 50% 100%, rgba(255, 107, 26, .45), transparent 70%),
              linear-gradient(170deg, #5c0a12, #2a0508 60%, #140204);
}
.vr-side .vr-pc.pc-mid { --line: #34d399; --acc: #6ee7b7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 118' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='1.5'%3E%3Cpath d='M0 59H84'/%3E%3Ccircle cx='42' cy='59' r='24'/%3E%3C/g%3E%3Ccircle cx='42' cy='59' r='2.5' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
              repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px),
              linear-gradient(170deg, #0f5a3c, #083a26 60%, #04200f);
}
.vr-side .vr-pc.pc-def { --line: #38bdf8; --acc: #7dd3fc;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 .5H24M0 6.5H24M6 .5V6.5M18 6.5V12' fill='none' stroke='%2338bdf8' stroke-opacity='.2' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 12px repeat,
              radial-gradient(90% 50% at 50% 0%, rgba(56, 189, 248, .35), transparent 70%),
              linear-gradient(170deg, #12305e, #0a1c3c 60%, #050d1f);
}
.vr-side .vr-pc .pc-t small { color: var(--acc); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.vr-side .vr-pc .pc-ic { background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px var(--line), 0 0 12px color-mix(in srgb, var(--line) 60%, transparent); }
.vr-side .vr-pc .pc-v, .vr-side .vr-pc.win .pc-v { color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--line) 70%, transparent), 0 2px 3px rgba(0, 0, 0, .6); }
.vr-side .vr-pc.win { border: 2.5px solid #ffd54a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 200, 60, .6), 0 4px 10px rgba(0, 0, 0, .3); }
.vr-side .vr-pc.lose { filter: saturate(.55) brightness(.85); opacity: 1; }
/* ไอคอนกลางการ์ดพลัง: ใหญ่ขึ้น เด่นขึ้น — วงกลมพื้นสว่างนวล ให้อีโมจิสีปกติเด่นบนการ์ดเข้ม */
.vr-side .vr-pc { gap: 5px; }
.vr-side .vr-pc .pc-ic { width: 52px; height: 52px; font-size: 32px;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 45%, rgba(255, 255, 255, .7) 70%, rgba(255, 255, 255, .45));
  box-shadow: 0 0 0 2px var(--line), 0 0 14px color-mix(in srgb, var(--line) 70%, transparent), 0 3px 6px rgba(0, 0, 0, .35); }
.vr-side .vr-pc .pc-ic { filter: none; text-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
@media (max-width: 760px) { .vr-side .vr-pc .pc-ic { width: 38px; height: 38px; font-size: 23px; } }
/* การ์ดพลัง (แนวรุก/กองกลาง/แนวรับ) ใหญ่ขึ้นโดยรวม 20% (84 → 101px · ตัวอักษร/ไอคอน/ตัวเลขขยายตาม) */
.vr-side .vr-pc { width: 101px; gap: 6px; border-radius: 11px; outline-offset: -6px; }
.vr-side .vr-pc .pc-t small { font-size: 13px; }
.vr-side .vr-pc .pc-ic { width: 62px; height: 62px; font-size: 38px; }
.vr-side .vr-pc .pc-v { font-size: 26px; }
.vr-side .vr-pc .pc-win { width: 24px; height: 24px; }
.vr-side .vr-pc .pc-win::before { font-size: 14px; }
@media (max-width: 760px) {
  .vr-side .vr-pc { width: 77px; gap: 4px; }
  .vr-side .vr-pc .pc-t small { font-size: 11px; }
  .vr-side .vr-pc .pc-ic { width: 46px; height: 46px; font-size: 27px; }
  .vr-side .vr-pc .pc-v { font-size: 19px; }
}

/* ---------- ✨ เอฟเฟกต์ประจำการ์ดพลัง (เห็นแล้วรู้ว่าการ์ดอะไร) ----------
   🔥 แนวรุก: ไฟในวงกลมไหวลุก + ประกายไฟลอยขึ้นจากก้นการ์ด
   🎯 กองกลาง: เป้าเต้นตุบแบบล็อกเป้า + วงคลื่นแผ่ออกจากกลางสนาม (เหมือนคุมจังหวะเกม)
   🛡️ แนวรับ: ไอคอนตั้งการ์ดรับแรง + แสงเหล็กวาบกวาดผ่านการ์ดเป็นระยะ
   ใช้ transform/opacity อย่างเดียว (ไม่วาดใหม่ทุกเฟรม ไม่หน่วง) · ปิดเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว */
.vr-side .vr-pc .pc-ic { position: relative; z-index: 1; }
.vr-side .vr-pc::after { content: ""; position: absolute; pointer-events: none; }

/* 🔥 แนวรุก */
.vr-side .vr-pc.pc-atk .pc-ic { animation: pcFlame 1.3s ease-in-out infinite; }
@keyframes pcFlame { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.08) rotate(3deg); } }
.vr-side .vr-pc.pc-atk::after {
  left: 10%; right: 10%; bottom: 0; height: 60%;
  background: radial-gradient(circle, #ffd27a 0 1.5px, transparent 2px) 20% 90% / 22px 26px,
              radial-gradient(circle, #ff8a3d 0 1.2px, transparent 1.8px) 70% 60% / 18px 30px;
  animation: pcEmbers 2.4s linear infinite;
}
@keyframes pcEmbers { 0% { transform: translateY(20px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-50px); opacity: 0; } }

/* 🎯 กองกลาง */
.vr-side .vr-pc.pc-mid .pc-ic { animation: pcLock 2.4s ease-in-out infinite; }
@keyframes pcLock { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(.97); } }
.vr-side .vr-pc.pc-mid::after {
  left: 50%; top: 50%; width: 62px; height: 62px; margin: -36px 0 0 -31px; border-radius: 50%;
  border: 2px solid rgba(110, 231, 183, .8);
  animation: pcWave 2.4s ease-out infinite;
}
@keyframes pcWave { 0%, 70% { transform: scale(.9); opacity: 0; } 75% { opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* 🛡️ แนวรับ */
.vr-side .vr-pc.pc-def .pc-ic { animation: pcBrace 2.2s ease-in-out infinite; }
@keyframes pcBrace { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(0) scale(1); } 55% { transform: translateY(2px) scale(.94, 1.04); } 65% { transform: translateY(-1px) scale(1.04, .97); } }
.vr-side .vr-pc.pc-def::after {
  top: -20%; bottom: -20%; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent 20%, rgba(200, 235, 255, .35) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-12deg);
  animation: pcSteel 3.6s ease-in-out infinite;
}
@keyframes pcSteel { 0%, 55% { transform: translateX(-120%) skewX(-12deg); } 85%, 100% { transform: translateX(220%) skewX(-12deg); } }

/* ทีมที่ด้อยกว่าในแนวนั้น: เอฟเฟกต์ช้าลง เบาลง */
.vr-side .vr-pc.lose .pc-ic, .vr-side .vr-pc.lose::after { animation-duration: 4s; }
.vr-side .vr-pc.lose::after { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .vr-side .vr-pc .pc-ic, .vr-side .vr-pc::after { animation: none !important; } }

/* ---------- ✨ เอฟเฟกต์ไพ่พิศดาร + ไพ่ทอง 17 และ 32 ----------
   ทุกใบ: โล่ในไพ่ลอยโยกเบาๆ จังหวะไม่พร้อมกัน (nth-child) · ชี้เมาส์ = โล่เด้งหมุน
   พิศดาร 17a/17b = ไพ่ทอง · พิศดาร 32 = ไพ่ทองเด่นสุด (ทองสว่างกว่า ใหญ่กว่า มงกุฎ 👑 แสงวาบกวาดผ่าน เรืองทอง)
   ใช้ transform/opacity เท่านั้น */
.plan-badge img { animation: pbFloat 3.2s ease-in-out infinite; }
.plan-badges > :nth-child(3n+2) img { animation-delay: -1.1s; }
.plan-badges > :nth-child(3n+3) img { animation-delay: -2.2s; }
@keyframes pbFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.plan-badge:hover img { animation: pbPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pbPop { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }

/* 🥇 ไพ่ทอง: 17a / 17b / 32 */
.plan-badge:is(.pb-p17a, .pb-p17b, .pb-p32) {
  overflow: hidden;
  color: #5a3a00;
  background: radial-gradient(90% 60% at 50% 40%, #fff6cf, transparent 70%), linear-gradient(155deg, #f7d774, #e2ad2e 45%, #fbe39a 60%, #c9901a);
  border: 2px solid #b8860b;
  outline-color: rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 1px #fff3c4, 0 0 12px rgba(245, 190, 50, .55), -2px 6px 12px rgba(120, 80, 10, .35);
}
.plan-badge:is(.pb-p17a, .pb-p17b, .pb-p32) .pb-i, .plan-badge:is(.pb-p17a, .pb-p17b, .pb-p32) .pb-k { color: #7a4a00; }
.plan-badge:is(.pb-p17a, .pb-p17b, .pb-p32) .pb-d { color: #4a2c00; }
/* แสงวาบกวาดผ่านไพ่ทอง */
.plan-badge:is(.pb-p17a, .pb-p17b, .pb-p32)::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%);
  transform: translateX(-130%) skewX(-14deg);
  animation: pbGoldSheen 3.4s ease-in-out infinite;
}
@keyframes pbGoldSheen { 0%, 60% { transform: translateX(-130%) skewX(-14deg); } 90%, 100% { transform: translateX(230%) skewX(-14deg); } }
.plan-badge.pb-p17b::before { animation-delay: -1.2s; }

/* 👑 พิศดาร 32 = ทองเด่นสุด */
.plan-badge.pb-p32 {
  z-index: 2;
  background: radial-gradient(90% 60% at 50% 40%, #fffbe6, transparent 70%), linear-gradient(155deg, #ffe680, #f5b700 40%, #fff1a8 58%, #d99a00);
  border: 2.5px solid #9a6a00;
  box-shadow: 0 0 0 2px #fff6cc, 0 0 20px rgba(255, 196, 0, .85), -2px 8px 14px rgba(120, 80, 10, .4);
  transform: translateY(calc(var(--y) - 4px)) rotate(var(--r)) scale(1.1);
}
.plan-badge.pb-p32:hover { transform: translateY(-18px) rotate(0) scale(1.45); }
.plan-badge.pb-p32::after { content: "👑"; position: absolute; top: 1px; right: 4px; left: auto; width: auto; height: auto; margin: 0; font-size: 15px; line-height: 1; background: none; box-shadow: none; transform: rotate(14deg); animation: pbCrown 1.8s ease-in-out infinite; }
@keyframes pbCrown { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-2px); } }
.plan-badge.pb-p32::before { animation-duration: 2.4s; background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .95) 50%, transparent 85%); }
.plan-badge.pb-p32 img { filter: drop-shadow(0 0 6px rgba(255, 220, 90, .9)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }

@media (prefers-reduced-motion: reduce) { .plan-badge img, .plan-badge::before, .plan-badge::after { animation: none !important; } }
.plan-badge.pb-p32::after { font-size: 19px; top: 2px; right: 3px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }

/* ---------- ➖ เส้นคั่นระหว่างคู่ แบบใหม่ (ทับแบบเดิม): เว้นบน ~3 บรรทัด · เส้น 5 เส้นสองข้าง · ไพ่เลขคู่ตรงกลาง ----------
   เส้น 5 เส้น: แดง-ส้ม-ทอง-ส้ม-แดง ไล่จางออกด้านนอก · มีลำแสงวิ่งไปตามเส้นเข้าหาไพ่ตรงกลาง (transform อย่างเดียว)
   ไพ่เลขคู่: ไพ่แดงขอบทองเอียงนิด ⚽ หมุนกลิ้ง · เห็นชัดว่าจบคู่หนึ่ง เริ่มอีกคู่ */
.vs-sep { margin: 56px 4px 14px; gap: 12px; }
.vs-sep::before, .vs-sep::after { content: none; }
.vs-sep-l, .vs-sep-r {
  position: relative; flex: 1; height: 26px; overflow: hidden;
  background: repeating-linear-gradient(180deg, var(--l1) 0 2px, transparent 2px 6px);
  --l1: #e5484d;
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%);
  mask: linear-gradient(90deg, transparent, #000 45%);
}
.vs-sep-l { background: linear-gradient(180deg, #e5484d 0 2px, transparent 2px 6px, #ff8a3d 6px 8px, transparent 8px 12px, #f5b82e 12px 14px, transparent 14px 18px, #ff8a3d 18px 20px, transparent 20px 24px, #e5484d 24px 26px); }
.vs-sep-r { background: inherit; background: linear-gradient(180deg, #e5484d 0 2px, transparent 2px 6px, #ff8a3d 6px 8px, transparent 8px 12px, #f5b82e 12px 14px, transparent 14px 18px, #ff8a3d 18px 20px, transparent 20px 24px, #e5484d 24px 26px);
  -webkit-mask: linear-gradient(270deg, transparent, #000 45%); mask: linear-gradient(270deg, transparent, #000 45%); }
/* ลำแสงวิ่งตามเส้นเข้าหากลาง */
.vs-sep-l::after, .vs-sep-r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  mix-blend-mode: overlay;
}
.vs-sep-l::after { left: 0; animation: sepRunL 2.6s ease-in-out infinite; }
.vs-sep-r::after { right: 0; animation: sepRunR 2.6s ease-in-out infinite; }
@keyframes sepRunL { 0% { transform: translateX(-100px); } 100% { transform: translateX(calc(100vw)); } }
@keyframes sepRunR { 0% { transform: translateX(100px); } 100% { transform: translateX(calc(-100vw)); } }
/* ไพ่เลขคู่ตรงกลาง */
.vs-sep-card {
  flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 76px; padding: 0; border-radius: 9px; line-height: 1;
  color: #fff; background: radial-gradient(80% 60% at 50% 35%, #ff6b6b, #c81e2e 70%, #8a0f1c);
  border: 2px solid #f5c542; outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -5px;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .25), 0 6px 14px rgba(179, 38, 44, .4);
  transform: rotate(-4deg);
}
.vs-sep-card em { font-style: normal; font-size: 16px; animation: sepBall 2.6s linear infinite; }
@keyframes sepBall { to { transform: rotate(360deg); } }
.vs-sep-card small { margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #ffe08a; }
.vs-sep-card b { font-family: var(--font-head); font-size: 24px; font-weight: 800; text-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
@media (max-width: 760px) { .vs-sep { margin-top: 40px; } .vs-sep-card { width: 50px; height: 66px; } .vs-sep-card b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .vs-sep-l::after, .vs-sep-r::after, .vs-sep-card em { animation: none; } }

/* ---------- การ์ดที่กางจากแถวย่อ (.fo-compact): ซ่อนของที่แถวบนแสดงแล้ว ----------
   VS (ป้ายพลัง/ดวลตัวเด่น) และอันดับ+แต้มของแต่ละทีม มีอยู่บนแถวแล้ว */
.fo-compact .fo-vs, .fo-compact .dl-x { display: none; }
.fo-compact .fo-rank { display: none; }
.fo-compact .fo-top:not(:has(.fo-round, .fo-more)) { display: none; }
.fo-compact .prob .mkt { display: none; }   /* สูง/ต่ำ + แฮนดิแคป อยู่ใน "ใครลุ้นกว่า" บนแถวแล้ว (โอกาสชนะ 1X2 + เสมอ ยังแสดง เพราะแถวไม่มีเสมอ) */
.vr-center .lean .mkt { display: none; }   /* เส้น/ราคาสูงต่ำ + แฮนดิแคป อยู่บนการ์ดเสริม 4 ใบแล้ว */

/* ---------- 📒 สมุดวางการ์ด (compare.php bet_cards): 4 หน้า เต็งเจ้าบ้าน · เต็งทีมเยือน · สูง · ต่ำ ----------
   สมุดกระดาษครีมเส้นบรรทัดฟ้า เส้นกั้นหน้าแดง ห่วงสันด้านบน · หัวหน้าเขียนลายมือ · โน้ตเส้น/ราคาแบบกระดาษโพสต์อิท
   การ์ดปัจจัย = ไพ่ใบเล็กสีประจำชนิด (ยิงดุ รับหลวม ฟอร์มดี ...) วางเอียงคนละนิด มีมุมกระดาษยึด
   หน้าที่การ์ดมากกว่าในคู่ = สติกเกอร์ดาว "⭐ แนะนำ" */
.nb { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 12px 10px; padding: 18px 0 0;
  border-radius: 6px 6px 14px 14px; background: #d9c7a6; box-shadow: 0 6px 16px rgba(60, 40, 10, .25), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.nb-rings { position: absolute; top: -9px; left: 16px; right: 16px; height: 22px; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, #fdfaf2 0 3.5px, #8a8f98 4px 6.5px, transparent 7px) 0 0 / 34px 22px repeat-x; }
.nb-pg {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 250px;
  padding: 12px 12px 10px 20px;
  background: linear-gradient(90deg, transparent 12px, rgba(229, 72, 77, .45) 12px 13.5px, transparent 13.5px),
              repeating-linear-gradient(180deg, #fffdf6 0 25px, #cfe1f5 25px 26px);
  border-right: 1px solid rgba(0, 0, 0, .08);
  color: #2b2238;
}
.nb-pg:first-of-type { border-radius: 0 0 0 12px; }
.nb-pg:last-child { border-right: 0; border-radius: 0 0 12px 0; }
.nb-h { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nb-ic { flex: none; font-size: 20px; }
.nb-h b { font-family: "Sriracha", var(--font-head); font-size: 19px; font-weight: 400; line-height: 1.1; color: #2b2238; }
.nb-h small { margin-left: auto; font-size: 11px; color: #6b6380; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nb-hdp-h .nb-h b { color: #1f7a58; } .nb-hdp-a .nb-h b { color: #b3262c; } .nb-over .nb-h b { color: #c2530a; } .nb-under .nb-h b { color: #1d5ea3; }
.nb-note { align-self: flex-start; padding: 4px 10px; font-family: var(--font-head); font-size: 13.5px; font-weight: 800; color: #4a3a00;
  background: #fff3a8; box-shadow: 1px 2px 4px rgba(0, 0, 0, .15); transform: rotate(-2deg); }
.nb-hdp-a .nb-note { background: #ffd6d9; transform: rotate(1.5deg); color: #5a1016; }
.nb-over .nb-note { background: #ffe0c2; transform: rotate(-1deg); color: #5a2a00; }
.nb-under .nb-note { background: #d6ebff; transform: rotate(2deg); color: #0f2f52; }
.nb-cards { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 6px; flex: 1; padding: 6px 2px 2px; }
.nb-empty { font-family: "Sriracha", var(--font-head); font-size: 13px; color: #a39bb3; padding: 8px 4px; }
.nb-foot { font-family: "Sriracha", var(--font-head); font-size: 12px; color: #8a8199; text-align: right; }
.nb-pg.none { opacity: .75; }
.nb-pg.pick { background: linear-gradient(90deg, transparent 12px, rgba(229, 72, 77, .45) 12px 13.5px, transparent 13.5px), repeating-linear-gradient(180deg, #fffae6 0 25px, #e9d9a8 25px 26px); }
.nb-star { position: absolute; top: -12px; right: 8px; z-index: 3; padding: 4px 10px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; color: #4a2c00;
  background: radial-gradient(circle at 30% 30%, #fff3b0, #f5b82e); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transform: rotate(8deg); }

/* การ์ดปัจจัยใบเล็ก */
.fc {
  --fc: #e8590c;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 70px; height: 96px; padding: 5px 3px 5px; border-radius: 7px; text-align: center; line-height: 1.05;
  color: #fff; background: radial-gradient(80% 55% at 50% 38%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc) 70%, color-mix(in srgb, var(--fc) 75%, #000));
  border: 2px solid #fff; box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
  transform: rotate(-3deg); transition: transform .2s cubic-bezier(.3, 1.5, .5, 1);
}
.nb-cards > .fc:nth-child(3n+2) { transform: rotate(2.5deg) translateY(2px); }
.nb-cards > .fc:nth-child(3n+3) { transform: rotate(-1deg) translateY(-1px); }
.fc:hover { transform: rotate(0) scale(1.12); z-index: 2; }
.fc::before, .fc::after { content: ""; position: absolute; width: 12px; height: 12px; background: rgba(60, 40, 10, .55); }   /* มุมกระดาษยึดการ์ด */
.fc::before { top: -3px; left: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fc::after { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.fc small { font-size: 8px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.fc-n { font-family: var(--font-head); font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.fc-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.fc strong { font-family: var(--font-head); font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap; }
.fc em { max-width: 100%; font-style: normal; font-size: 8.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .nb { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 6px 8px; }
  .nb-pg { min-height: 0; }
  .nb-pg:nth-child(3) { border-right: 1px solid rgba(0, 0, 0, .08); }
}

/* ไพ่พิศดาร + Joker ในสมุด (compare.php bet_cards) — ขนาดเท่าการ์ดปัจจัย */
.fc-plan { color: #7a1f1f; background: radial-gradient(90% 70% at 50% 45%, #fffdf7, #f6ecd6); border: 1.5px solid #c9a25a; outline: 1px solid rgba(179, 38, 44, .5); outline-offset: -4px; }
.fc-plan small { color: #b3262c; }
.fc-plan .fc-n { font-family: "Sriracha", var(--font-head); font-size: 15px; font-weight: 400; color: #b3262c; text-shadow: none; }
.fc-plan img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.fc-plan em { color: #5a1a12; font-weight: 700; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; }
.fc-plan:is(.fcp-p17a, .fcp-p17b, .fcp-p32) { background: linear-gradient(155deg, #f7d774, #e2ad2e 45%, #fbe39a 60%, #c9901a); border-color: #b8860b; color: #4a2c00; }
.fc-plan.fcp-p32 { box-shadow: 0 0 10px rgba(255, 196, 0, .8), 0 3px 7px rgba(0, 0, 0, .25); }
.fc-joker { color: #fff; background: radial-gradient(80% 55% at 50% 45%, #6d28d9, #2e1065 75%); border: 2px solid #f5c542; box-shadow: 0 0 8px rgba(245, 197, 66, .5), 0 3px 7px rgba(0, 0, 0, .3); }
.fc-joker small { color: #f5c542; letter-spacing: .12em; }
.fc-joker .fc-n { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fc-joker .fc-art, .fc-joker .fc-art .vx-joker-art { width: 34px; height: 34px; animation: none; filter: none; }
.fc-joker strong { color: #ffe08a; }
.fc-joker em { font-weight: 700; }
.nb-cards { gap: 10px 4px; } .nb-pg { padding-left: 17px; padding-right: 8px; } .fc { width: 66px; height: 92px; }   /* 3 ใบต่อแถวในหน้าสมุด */

/* ---------- ⭐ หน้า "แนะนำ" ในสมุด: เด่นจริงๆ ----------
   หน้า: กรอบทองเรืองแสงเต้นเป็นจังหวะรอบหน้า
   ไพ่พิศดารในหน้าแนะนำ: ใหญ่ขึ้นนิดหน่อย · รัศมีแสงทองหมุนรอบหลังไพ่ · กรอบทองกะพริบขยายออก · ไพ่ส่ายดุ๊กดิ๊ก
   (transform/opacity อย่างเดียว ไม่หน่วง) */
.nb-pg.pick { z-index: 1; }
.nb-pg.pick::after { content: ""; position: absolute; inset: 3px; border: 3px solid #f5b82e; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 14px rgba(245, 184, 46, .8), inset 0 0 12px rgba(245, 184, 46, .45); animation: nbPickPulse 1.6s ease-in-out infinite; }
@keyframes nbPickPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.nb-pg.pick .nb-star { animation: nbStar 1.2s ease-in-out infinite; }
@keyframes nbStar { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.12); } }

.nb-pg.pick .nb-cards { isolation: isolate; }
.nb-pg.pick .fc-plan { width: 74px; height: 102px; z-index: 1; animation: fcWiggle 2.4s ease-in-out infinite; box-shadow: 0 0 12px rgba(245, 184, 46, .75), 0 4px 8px rgba(0, 0, 0, .25); border: 2px solid #f5b82e; }
.nb-pg.pick .fc-plan:nth-child(2n) { animation-delay: -1.2s; }
@keyframes fcWiggle { 0%, 60%, 100% { transform: rotate(-3deg) scale(1); } 68% { transform: rotate(4deg) scale(1.06); } 76% { transform: rotate(-4deg) scale(1.06); } 84% { transform: rotate(2deg) scale(1.03); } 92% { transform: rotate(-3deg) scale(1); } }
/* รัศมีแสงทองหมุนหลังไพ่ (แทนมุมกระดาษ) */
.nb-pg.pick .fc-plan::before { content: ""; top: 50%; left: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; z-index: -1; border-radius: 50%; clip-path: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 60, .75) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: fcRays 5s linear infinite; }
@keyframes fcRays { to { transform: rotate(360deg); } }
/* กรอบทองกะพริบขยายออก */
.nb-pg.pick .fc-plan::after { content: ""; top: -5px; left: -5px; right: -5px; bottom: -5px; width: auto; height: auto; clip-path: none; background: none;
  border: 2px solid #ffd54a; border-radius: 10px; animation: fcRing 1.6s ease-out infinite; }
@keyframes fcRing { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nb-pg.pick::after, .nb-pg.pick .nb-star, .nb-pg.pick .fc-plan, .nb-pg.pick .fc-plan::before, .nb-pg.pick .fc-plan::after { animation: none !important; } }
/* แก้: รัศมีหมุนทับหน้าไพ่ (ไพ่เอียง = stacking context ส่งไปหลังไพ่ไม่ได้) → เปลี่ยนเป็นแสงทองรอบไพ่ + ✨ ประกายมุมไพ่ */
.nb-pg.pick .fc-plan { box-shadow: 0 0 0 2px #fff6cc, 0 0 16px 4px rgba(255, 196, 0, .75), 0 4px 8px rgba(0, 0, 0, .25); }
.nb-pg.pick .fc-plan::before { content: "✨"; top: -10px; right: -8px; left: auto; width: auto; height: auto; margin: 0; z-index: 2; font-size: 16px; line-height: 1;
  background: none; -webkit-mask: none; mask: none; animation: fcSpark 1.4s ease-in-out infinite; }
.nb-pg.pick .fc-plan:nth-child(2n)::before { animation-delay: -.7s; }
@keyframes fcSpark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.25) rotate(20deg); opacity: 1; } }

/* ---------- ● การ์ดปัจจัยทั่วไป = วงกลม · การ์ดพิเศษ (Joker / พิศดาร) = สี่เหลี่ยม → แยกกันง่าย ---------- */
.fc:not(.fc-plan):not(.fc-joker) {
  width: 70px; height: 70px; margin-top: 11px; padding: 6px 4px; border-radius: 50%; justify-content: center; gap: 1px;
  border: 2.5px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 3px 7px rgba(0, 0, 0, .25);
}
.fc:not(.fc-plan):not(.fc-joker):not(.fc-star)::before, .fc:not(.fc-plan):not(.fc-joker):not(.fc-star)::after { content: none; }   /* ไม่มีมุมกระดาษ (การ์ดดาวเด่นใช้ ::before/::after วาดกรอบ 5 เหลี่ยมแบบศึกดาวเด่น) */
.fc:not(.fc-plan):not(.fc-joker) small, .fc:not(.fc-plan):not(.fc-joker) em { display: none; }
.fc:not(.fc-plan):not(.fc-joker) .fc-n { font-size: 10px; }
.fc:not(.fc-plan):not(.fc-joker) .fc-ic { width: 26px; height: 26px; font-size: 15px; }
.fc:not(.fc-plan):not(.fc-joker) strong { font-size: 11.5px; }
.fc:not(.fc-plan):not(.fc-joker) { width: 62px; height: 62px; margin-top: 15px; } .fc:not(.fc-plan):not(.fc-joker) .fc-ic { width: 24px; height: 24px; font-size: 14px; }

/* ---------- 🔍 ป๊อปอัปอธิบายการ์ด (app.js) ----------
   การ์ดขยาย 1.6 เท่าทางซ้าย + ชื่อการ์ด · ความหมาย · ตัวเลขจริงของคู่นี้ ทางขวา · มือถือ = แผ่นล่างจอ */
.card-pop { position: fixed; z-index: 200; display: none; align-items: center; gap: 16px; width: 340px; max-width: calc(100vw - 16px); padding: 16px 18px 16px 16px;
  border-radius: 16px; color: #fff; background: linear-gradient(160deg, #2a1b44, #150d24); border: 2px solid #f5c542;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45), 0 0 0 4px rgba(245, 197, 66, .15); animation: popIn .18s ease-out; }
.card-pop.on { display: flex; }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.card-pop.sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; }
.card-pop-card { flex: none; display: block; padding: 0; align-self: center; }
.card-pop-card > * { zoom: 1.6; transform: none !important; animation: none !important; margin: 0 !important; filter: none !important; opacity: 1 !important; }
.card-pop-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.card-pop-txt b { font-family: var(--font-head); font-size: 17px; color: #ffe08a; }
.card-pop-txt .m { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.card-pop-txt .v { margin: 0; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .1); }
.card-pop-txt .v:empty { display: none; }
/* ไพ่พิศดาร: ใช้ทำอะไร (data-pop-w) */
.card-pop-txt .w { margin: 0; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: #fff; background: rgba(76, 195, 255, .16); border-left: 3px solid #4cc3ff; }
.card-pop-txt .w:empty { display: none; }
.card-pop-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: rgba(255, 255, 255, .7); font-size: 15px; cursor: pointer; }
.fc, .vr-pc { cursor: help; }

/* ---------- 📱 มือถือ: การ์ด "แผน" (พิศดารทุกแผน) ย่อเหลือ 1 บรรทัด เลื่อนซ้าย-ขวา ----------
   เดิมเป็นปุ่มใหญ่ 2 คอลัมน์ ~16 แถว กินพื้นที่เกือบเต็มจอ → เหลือชิปเล็ก (โล่ + เลขแผน + จำนวนคู่) แถวเดียว ปัดดูได้ */
@media (max-width: 760px) {
  .is-plans { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
  .is-plans h3 { flex: none; margin: 0; font-size: 13px; white-space: nowrap; }
  .is-plans .plan-list { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 4px; margin: 0; grid-template-columns: none; }
  .is-plans .plan-list::-webkit-scrollbar { display: none; }
  .is-plans .plan-btn { flex: none; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 999px; min-height: 0; }
  .is-plans .plan-btn:hover { transform: none; }
  .is-plans .plan-btn img { width: 20px; }
  .is-plans .plan-btn span { flex: none; }
  .is-plans .plan-btn b { font-size: 12px; white-space: nowrap; }
  .is-plans .plan-btn small { display: none; }
  .is-plans .plan-btn em { font-size: 10px; padding: 1px 6px; }
}
@media (max-width: 760px) { .is-plans .plan-list { flex-direction: row; flex: 1; min-width: 0; } .is-plans { min-width: 0; overflow: hidden; } }

/* ---------- 📱 มือถือ: จัดแถวแมตช์ให้กระชับ อ่านง่าย (≤ 760px) ----------
   1) ไพ่พิศดารบนแถว → แถวเดียว ไพ่จิ๋ว (โล่ + เลขแผน) ปัดซ้าย-ขวา · แตะไพ่ = ไปดูทุกคู่ของแผนนั้นเหมือนเดิม
   2) การ์ดพลัง รุก/กลาง/รับ → เหมือนคอม (แนวตั้ง เอียงเข้าหากัน) ใช้ขนาดมือถือจากส่วนการ์ดพลังด้านบน
   3) สมุดวางการ์ด → หน้าละแถว เต็มความกว้าง การ์ดเรียงได้หลายใบต่อแถว */
@media (max-width: 760px) {
  /* 1) พิศดารบนแถว */
  .vr-center .plan-badges { display: flex; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 8px 4px 6px 8px; row-gap: 0; }
  .vr-center .plan-badges::-webkit-scrollbar { display: none; }
  .vr-center .plan-badge, .vr-center .plan-combo { width: 46px; height: 60px; padding: 12px 2px 4px; margin-left: -4px; gap: 0; outline-offset: -3px; }
  .vr-center .plan-badge .pb-d, .vr-center .plan-badge .pb-k, .vr-center .plan-badge .pb-i.br { display: none; }
  .vr-center .plan-badge .pb-i { top: 3px; left: 5px; font-size: 12px; }
  .vr-center .plan-badge img { width: 26px; height: 26px; }
  .vr-center .plan-combo b { font-size: 11px; } .vr-center .plan-combo small { font-size: 7px; }
  .vr-center .plan-badges > *::after { display: none; }   /* ไม่มีเทปกาวบนไพ่จิ๋ว */
  .vr-center .plan-badge.pb-p32 { transform: translateY(var(--y)) rotate(var(--r)) scale(1.05); }
  .vr-center .plan-badge.pb-p32::after { display: block; font-size: 11px; top: 0; right: 1px; }

  /* 3) สมุด: หน้าละแถว */
  .nb { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .nb-pg, .nb-pg:nth-child(3) { min-height: 0; border-right: 0; border-bottom: 1px dashed rgba(0, 0, 0, .15); border-radius: 0; }
  .nb-pg:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
  .nb-h b { white-space: nowrap; }
  .nb-cards { gap: 10px 6px; }
  .nb-pg.pick::after { inset: 2px; }
}

/* ---------- 📱 มือถือ: การ์ด Joker หน้าแรก (คอมโบเด็ดวันนี้) ย่อ 2 ใบต่อแถว ----------
   ตัดกล่องชื่อทีม + ป้ายราคาท้ายการ์ด + หน้าไพ่มุมล่าง · เหลือ: คะแนน · Joker · ชื่อคอมโบ · 🎯 เล่นอะไร · เพราะอะไร (2 ข้อ)
   กดการ์ดยังไปหน้ารายละเอียดคู่นั้นเหมือนเดิม (ดูชื่อทีม/ราคาได้ที่นั่น) */
@media (max-width: 760px) {
  .vx-grid, .vx-grid.vx-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .vx-grid .vx-card { padding: 8px 8px 10px; gap: 6px; border-radius: 12px; }
  .vx-card .vx-match, .vx-card .vx-foot, .vx-card .vx-idx.br, .vx-card .vx-mark, .vx-card .vx-name small, .vx-card .vx-count, .vx-card > .vx-top::after { display: none; }
  .vx-card .vx-joker-hero { height: 64px; margin: -3px -8px 0; padding-top: 2px; }
  .vx-card .vx-joker-art { width: 60px; height: 60px; }
  .vx-card .vx-joker-name { display: none; }
  .vx-card .vx-ovr, .vx-card:not(.vx-super) .vx-ovr { top: 5px; left: 5px; min-width: 38px; padding: 3px 4px 6px; border-width: 1.5px; }
  .vx-card .vx-ovr b, .vx-card:not(.vx-super) .vx-ovr b { font-size: 22px; }
  .vx-card .vx-ovr small, .vx-card:not(.vx-super) .vx-ovr small { font-size: 6.5px; padding: 1px 2px 0; }
  .vx-card .vx-top { gap: 6px; }
  .vx-card .vx-idx.tl { width: 26px; min-height: 34px; padding: 2px 0; border-width: 1.5px; }
  .vx-card .vx-idx.tl b { font-size: 14px; } .vx-card .vx-idx.tl i { font-size: 11px; }
  .vx-card .vx-idx.joker.tl b { font-size: 6px; }
  .vx-card .vx-name b, .vx-card:not(.vx-super) .vx-name b { font-size: 13px; line-height: 1.15; }
  .vx-card .vx-pick { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 7px; border-radius: 8px; transform: none; }
  .vx-card .vx-pick span { font-size: 10px; }
  .vx-card .vx-pick b, .vx-card:not(.vx-super) .vx-pick b { font-size: 12.5px; line-height: 1.2; }
  .vx-card .vx-why, .vx-card[class*=" t-"] .vx-why { font-size: 10.5px; gap: 3px; padding: 5px 6px; line-height: 1.3; }
  .vx-card .vx-why li { padding-left: 15px; -webkit-line-clamp: 2; }
  .vx-card .vx-why li::before { width: 11px; height: 11px; font-size: 7px; }
  .vx-card .vx-why li:nth-child(n+3) { display: none; }
  .vx-card .vx-ghost-img { margin-top: -30%; }
}

/* ---------- 📱 มือถือ: แผง VIP ไฮไลต์วันนี้ (เต็งหนัก / เจ้าบ้านกระแสแรง / ฟอร์มดี / ฟอร์มแย่) = 2×2 แบบย่อเหมือนคอม ----------
   ตัดบรรทัดรอง (พบใคร/เวลา, ราคาย่อย, คำอธิบายหัวข้อ) เหลือ: โลโก้ · ชื่อทีม · ตัวเลข — กดแถวไปหน้าคู่นั้นเหมือนเดิม */
@media (max-width: 760px) {
  .vip-board { padding: 16px 8px 12px; }
  .vb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; padding-top: 46px; }
  .vb-stamp { left: 50%; right: auto; top: 6px; width: 104px; height: 40px; margin-left: -52px; border-radius: 12px; transform: rotate(-3deg); flex-direction: row; gap: 6px; }
  .vb-stamp em { font-size: 15px; } .vb-stamp b { font-size: 11px; } .vb-stamp small { display: none; }
  .vb-card { padding: 10px 6px 6px; gap: 1px; }
  .vb-card::before { width: 44px; height: 14px; top: -8px; }
  .vb-title { margin-bottom: 3px; gap: 0 4px; flex-wrap: nowrap; }
  .vb-title span { font-size: 14px; }
  .vb-title b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vb-title small, .vb-team small, .vb-val small { display: none; }
  .vb-row { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 5px; padding: 4px 2px; }
  .vb-row .tb, .vb-row.top .tb { width: 18px; height: 18px; }
  .vb-team b, .vb-row.top .vb-team b { font-size: 11px; }
  .vb-val b { font-size: 13px; } .vb-row.top .vb-val b { font-size: 15px; }
}

/* ---------- 📱 มือถือ: แถวแมตช์หน้าตาเหมือนคอม ----------
   3 คอลัมน์เหมือนคอม: ทีมเหย้า | ช่องกลาง (เวลา · พิศดาร · VS · เรดาร์ · ใครลุ้นกว่า) | ทีมเยือน — ย่อขนาดทุกอย่างให้พอดีจอ
   สมุดวางการ์ด: 2×2 (เต็งเจ้าบ้าน·เต็งทีมเยือน / สูง·ต่ำ) แทนหน้าละแถว */
@media (max-width: 760px) {
  .vr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; gap: 4px 6px; }
  .vr-top > .vr-side.home { grid-column: 1; grid-row: 1 / span 5; }
  .vr-top > .vr-side.away { grid-column: 3; grid-row: 1 / span 5; }
  .vr-top > .vr-center { grid-column: 2; grid-row: 1 / span 6; padding: 6px 4px 8px; border-radius: 12px; }
  .vr-side { padding: 6px 0; }
  .vr-side .vr-logo .tb { width: 44px; height: 44px; font-size: 16px; }
  .vr-side .vr-name { font-size: 11.5px; line-height: 1.2; word-break: break-word; }
  .vr-side .vr-role { font-size: 9.5px; line-height: 1.3; }
  .vr-side .vr-fav { font-size: 9.5px; padding: 1px 6px; }
  .vr-side .vr-pc { width: min(64px, 100%); }
  .vr-side.home .vr-pc:nth-child(n) { transform: translateX(3px) rotate(5deg); }
  .vr-side.away .vr-pc:nth-child(n) { transform: translateX(-3px) rotate(-5deg); }
  .vr-side .vr-pc .pc-t small { font-size: 9px; letter-spacing: 0; }
  .vr-side .vr-pc .pc-ic { width: 32px; height: 32px; font-size: 19px; }
  .vr-side .vr-pc .pc-v { font-size: 15px; }
  .vr-center .vr-r1 { flex-wrap: wrap; justify-content: center; gap: 3px; font-size: 10.5px; }
  .vr-center .vr-vs { font-size: 26px; }
  .vr-center .vr-radar svg { max-width: 100%; height: auto; }
  .vr-center .lean-cap small { display: none; }

  .nb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-pg { padding: 10px 6px 8px 14px; }
  .nb-pg:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .08); }
  .nb-h { gap: 4px; }
  .nb-h b { font-size: 14px; }
  .nb-h small { display: none; }
  .nb-note { font-size: 11px; padding: 3px 6px; }
  .nb-cards { gap: 8px 3px; }
  .fc { width: 50px; height: 70px; padding: 3px 2px; }
  .fc small { font-size: 6.5px; } .fc-n { font-size: 9.5px; } .fc em { font-size: 7px; }
  .fc-plan .fc-n { font-size: 12px; } .fc-plan img, .fc-joker .fc-art, .fc-joker .fc-art .vx-joker-art { width: 22px; height: 22px; }
  .fc strong { font-size: 10.5px; }
  .fc:not(.fc-plan):not(.fc-joker) { width: 48px; height: 48px; margin-top: 11px; padding: 3px; }
  .fc:not(.fc-plan):not(.fc-joker) .fc-n { font-size: 8px; } .fc:not(.fc-plan):not(.fc-joker) .fc-ic { width: 18px; height: 18px; font-size: 11px; } .fc:not(.fc-plan):not(.fc-joker) strong { font-size: 9px; }
  .nb-pg.pick .fc-plan { width: 54px; height: 76px; }
  .nb-star { font-size: 9.5px; padding: 2px 7px; }
}
@media (max-width: 760px) {
  .vr-center .dc-chip small, .vr-center .dc-box > summary em { display: none; }
  .vr-center .dc-chip { padding: 1px 6px 1px 2px; font-size: 10px; }
  .vr-center .vr-radar-legend { display: none; }
  .vr-center .vr-radar { width: 100%; }
  .vr-center .lean-pct { font-size: 11px; }
  .vr-center .lean-pct b { display: block; font-size: 10px; }
}

/* ---------- 📊 หน้ารายละเอียดแมตช์ (match.php): หัวแบบหน้าแรก + กราฟ + ข้อมูลดิบพับไว้ ---------- */
.md-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 2px 10px; }
.md-lg { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); }
.md-when { font-size: 13px; color: var(--text-soft); }
.md-score { padding: 3px 12px; border-radius: 999px; font-size: 13px; color: #fff; background: linear-gradient(135deg, #e5484d, #b3262c); }
.md-score b { font-family: var(--font-head); font-size: 16px; }
.md-hero { margin-bottom: 18px; }
.md-hero > summary { cursor: default; }
.md-hero > summary:hover { background: none !important; }
.md-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 22px 2px 10px; font-family: "Sriracha", var(--font-head); font-size: 22px; font-weight: 400; color: var(--text); }
.md-sec span { font-size: 22px; }
.md-sec small { font-family: var(--font-body, inherit); font-size: 12px; color: var(--muted); }

.md-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; }
.md-c { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--card, #fff); border: 1px solid var(--border, #eee); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.md-c.wide { grid-column: 1 / -1; }
.md-c h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--text); }
.md-c h3 span { font-size: 18px; }
.md-c h3 small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.md-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-soft); }
.md-legend span { display: inline-flex; align-items: center; gap: 5px; }
.md-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.md-legend i.up { background: #16a34a; } .md-legend i.dn { background: #ef4444; }
.md-legend b { color: var(--text); }

/* ฟอร์ม */
.md-frow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border, #eee); }
.md-frow:last-child { border-bottom: 0; }
.md-fname, .md-gname, .md-dname { font-weight: 800; font-size: 13.5px; color: var(--text); }
.md-frow.h .md-fname, .md-grow.h .md-gname { border-left: 4px solid var(--ca, #16a34a); padding-left: 8px; }
.md-frow.a .md-fname, .md-grow.a .md-gname { border-left: 4px solid var(--cb, #dc2626); padding-left: 8px; }
.md-fdots { display: flex; gap: 6px; flex-wrap: wrap; }
.md-fd { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; line-height: 1.05; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); }
.md-fd b { font-size: 14px; } .md-fd small { font-size: 9.5px; opacity: .9; }
.md-fd.w { background: #16a34a; } .md-fd.d { background: #a3a3a3; } .md-fd.l { background: #dc2626; } .md-fd.n { background: #cbd5e1; }
.md-fd:last-child { outline: 2px solid #f5b82e; outline-offset: 2px; }   /* นัดล่าสุด */
.md-fbar { position: relative; height: 22px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.md-fbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #86efac, #16a34a); border-radius: 999px; }
.md-fbar b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 22px; color: #14311f; }

/* ประตูต่อนัด */
.md-grow { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 0; }
.md-gname small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.md-gbars { display: flex; align-items: stretch; gap: 5px; height: 110px; }
.md-gb { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.md-gb i { position: relative; display: block; margin: 0 auto; width: 70%; max-width: 26px; min-height: 2px; }
.md-gb i.up { margin-top: auto; flex: none; background: linear-gradient(180deg, #4ade80, #16a34a); border-radius: 5px 5px 0 0; }
.md-gb i.dn { flex: none; background: linear-gradient(180deg, #ef4444, #fca5a5); border-radius: 0 0 5px 5px; }
.md-gb { justify-content: center; }
.md-gb > i.up { height: calc(var(--h, 0) * 1%); }
.md-gb i b { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--text); }
.md-gb i.up b { top: -14px; } .md-gb i.dn b { bottom: -14px; }
.md-gb { position: relative; }
.md-gb::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #cbd5e1; }
.md-gb i.up, .md-gb i.dn { max-height: 50%; }

/* โดนัท */
.md-dns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.md-dn { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.md-donut { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.md-donut-ring { position: relative; width: 104px; height: 104px; border-radius: 50%; }
.md-donut-ring > div { position: absolute; inset: 16px; border-radius: 50%; background: var(--card, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.md-donut-ring b { font-family: var(--font-head); font-size: 18px; color: var(--text); }
.md-donut-ring small { font-size: 10px; color: var(--muted); }
.md-donut .md-legend { justify-content: center; font-size: 11.5px; }

/* เจอกัน */
.md-h2h { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; }
.md-h2h-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.md-h2h-list li { display: grid; grid-template-columns: 78px minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; background: #f6f4f9; }
.md-h2h-list li small { color: var(--muted); }
.md-h2h-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-h2h-list li span:last-child { text-align: left; }
.md-h2h-list li span:nth-of-type(1) { text-align: right; }
.md-h2h-list li b { text-align: center; font-family: var(--font-head); font-size: 14px; padding: 1px 0; border-radius: 6px; background: #fff; }
.md-h2h-list li.h { border-left: 4px solid var(--ca, #16a34a); } .md-h2h-list li.a { border-left: 4px solid var(--cb, #dc2626); } .md-h2h-list li.d { border-left: 4px solid #a3a3a3; }

/* ราคาไหล */
.md-odds { display: flex; flex-direction: column; gap: 8px; }
.md-odd { display: grid; grid-template-columns: minmax(0, 1.4fr) auto 70px minmax(60px, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.md-odd .l { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-odd .v i { font-style: normal; color: var(--muted); }
.md-odd .c { font-weight: 800; text-align: right; }
.md-odd.dn .c { color: #16a34a; } .md-odd.up .c { color: #dc2626; } .md-odd.eq .c { color: var(--muted); }
.md-odd .bar { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.md-odd .bar i { display: block; height: 100%; border-radius: 999px; background: #94a3b8; }
.md-odd.dn .bar i { background: #16a34a; } .md-odd.up .bar i { background: #dc2626; }

/* ข้อมูลดิบ พับไว้ */
.md-raw { margin: 20px 0 10px; border-radius: 14px; border: 1px dashed var(--border, #ddd); background: var(--card, #fff); }
.md-raw > summary { cursor: pointer; padding: 12px 16px; font-weight: 800; font-size: 14px; color: var(--text); }
.md-raw > summary small { font-weight: 500; font-size: 12px; color: var(--muted); }
.md-raw[open] > summary { border-bottom: 1px dashed var(--border, #ddd); }
.md-raw > .league-group, .md-raw > h2 { margin-left: 12px; margin-right: 12px; }

@media (max-width: 760px) {
  .md-charts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .md-c { padding: 12px 10px; }
  .md-frow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
  .md-frow .md-fdots { grid-column: 1 / -1; order: 3; }
  .md-frow .md-fbar { width: 120px; }
  .md-fd { width: 36px; height: 36px; }
  .md-grow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .md-gbars { height: 90px; gap: 3px; }
  .md-h2h { grid-template-columns: minmax(0, 1fr); }
  .md-h2h-list li { grid-template-columns: 62px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 4px; padding: 4px 6px; font-size: 11px; }
  .md-odd { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .md-odd .bar { grid-column: 1 / -1; }
  .md-sec { font-size: 19px; }
}
.md-gb { display: grid; grid-template-rows: 1fr 1fr; } .md-gb i.up, .md-gb i.dn { max-height: none; margin: 0 auto; } .md-gb i.up { align-self: end; } .md-gb i.dn { align-self: start; }   /* แท่งยิงได้ครึ่งบน / เสียครึ่งล่าง เส้นศูนย์กลาง */
.md-gb { grid-template-columns: minmax(0, 1fr); } .md-gb i.up, .md-gb i.dn { width: 70%; justify-self: center; }   /* คอลัมน์กริดต้องกว้างเต็ม ไม่งั้นแท่ง % กลายเป็น 0 */
@media (max-width: 760px) { .is-guide .ig-toc { display: none; } .is-guide { margin: 0 0 8px; } .ig-cover { transform: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px 10px 20px; } .ig-cover em { margin-top: 0; flex-basis: 100%; } }

/* ---------- 📒 สมุดคู่มือ (ภาพเป็นหลัก คำน้อย) ----------
   แถบซ้ายหน้าแรก .is-guide = สมุดปกหนังบาง ห่วงสันซ้าย สายรัดยางขวา ตัว Joker + ไพ่บนปก (ไม่มีตัวหนังสือ) + ป้ายไอคอนเลือกบท
   หน้า guide.php .gd = หน้ากระดาษ เส้นบรรทัด · ภาพใหญ่ คำสั้น */
.is-guide { margin-bottom: 14px; }

.gd { max-width: 1180px; margin: 0 auto; padding: 14px 14px 40px; display: flex; flex-direction: column; gap: 16px; }
.gd-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 4px; background: linear-gradient(180deg, var(--bg, #f7f3ee) 70%, transparent); }
.gd-tabs a { flex: none; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none; color: #4a2c00; background: #fff3c4; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.gd-page { scroll-margin-top: 60px; padding: 18px 20px 20px 34px; border-radius: 6px 16px 16px 6px; color: #2b2238;
  background: linear-gradient(90deg, transparent 16px, rgba(229, 72, 77, .4) 16px 17.5px, transparent 17.5px), repeating-linear-gradient(180deg, #fffdf6 0 27px, #dbe7f5 27px 28px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.gd-page h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 26px; }
.gd-page h2 small, .gd-sub small { font-family: var(--font-body, inherit); font-size: 12.5px; color: var(--muted); }
.gd-count { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 50%; font-family: var(--font-head); font-size: 26px; color: #fff; background: linear-gradient(135deg, #7048e8, #b45309); box-shadow: 0 4px 10px rgba(112, 72, 232, .35); }
.gd-sub { margin: 18px 0 8px; font-size: 16px; }
.gd-tip { margin-top: 12px; display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 14px; background: #fff3c4; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }

.gd-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.gd-flow > i { font-style: normal; font-size: 26px; color: #b45309; }
.gd-fl { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; padding: 14px 8px; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.gd-fl span { font-size: 46px; line-height: 1; }
.gd-fl b { font-size: 15px; } .gd-fl small { font-size: 11px; color: var(--muted); }
.gd-fl.ok { background: #dcfce7; }

.gd-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gd-tier { display: flex; flex-direction: column; align-items: center; padding: 14px 8px; border-radius: 12px; color: #fff; background: var(--tb); border: 2px solid var(--tbd); box-shadow: 0 0 12px var(--tg); }
.gd-tier.plat { --tb: linear-gradient(155deg, #414b5c, #8792a8 25%, #d3dbe7 45%, #4c5770 70%, #3c4557); --tbd: #d9e2ef; --tg: rgba(170, 200, 255, .5); }
.gd-tier.gold { --tb: linear-gradient(155deg, #3d2702, #8f6110 25%, #d9a843 45%, #523503 70%, #342101); --tbd: #d4a441; --tg: rgba(230, 170, 50, .45); }
.gd-tier.silver { --tb: linear-gradient(155deg, #33373c, #787e87 25%, #c3c8cf 45%, #3d4148 70%, #2e3236); --tbd: #b9bec5; --tg: rgba(200, 210, 225, .3); }
.gd-tier.black { --tb: repeating-linear-gradient(-45deg, #17171a 0 3px, #0c0c0e 3px 6px); --tbd: #8b8b93; --tg: rgba(0, 0, 0, .3); }
.gd-tier b { font-family: var(--font-head); font-size: 34px; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.gd-tier span { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }


.gd-pls { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.gd-pl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; height: 130px; padding: 18px 6px 8px; border-radius: 9px; text-align: center; text-decoration: none; color: #5a1a12; cursor: pointer;
  background: radial-gradient(90% 70% at 50% 45%, #fffdf7, #f6ecd6); border: 1.5px solid #c9a25a; outline: 1px solid rgba(179, 38, 44, .5); outline-offset: -5px; box-shadow: 0 3px 8px rgba(40, 20, 10, .2); transition: transform .2s; }
.gd-pl:nth-child(3n+1) { transform: rotate(-2deg); } .gd-pl:nth-child(3n+2) { transform: rotate(1.5deg); }
.gd-pl:hover { transform: translateY(-5px) rotate(0); }
.gd-pl.gold { background: linear-gradient(155deg, #f7d774, #e2ad2e 45%, #fbe39a 60%, #c9901a); border-color: #b8860b; box-shadow: 0 0 12px rgba(245, 190, 50, .6); }
.gd-pl-no { position: absolute; top: 5px; left: 8px; font-style: normal; font-family: "Sriracha", var(--font-head); font-size: 17px; color: #b3262c; }
.gd-pl img { width: 46px; height: 46px; object-fit: contain; }
.gd-pl small { font-size: 11px; font-weight: 700; line-height: 1.2; }
.gd-pl em { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 13px; }
.gd-pl u { position: absolute; bottom: -8px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; text-decoration: none; font-size: 11px; font-weight: 800; color: #fff; background: #e5484d; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }

.gd-pages4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 14px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, .1); }
.gd-pages4 span { padding: 12px 6px; text-align: center; font-family: "Sriracha", var(--font-head); font-size: 16px; background: repeating-linear-gradient(180deg, #fffdf6 0 20px, #cfe1f5 20px 21px); border-right: 1px solid #e5d9c0; }
.gd-shapes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.gd-shapes > div { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.gd-sh { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 6px; font-size: 15px; }
.gd-sh.jk { color: #fff; background: radial-gradient(80% 55% at 50% 45%, #6d28d9, #2e1065 75%); border: 2px solid #f5c542; }
.gd-sh.pl { background: #fffaf0; border: 1.5px solid #c9a25a; }
.gd-sh.cir { width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #e8590c; font-size: 12px; }
.gd-sh.st { width: auto; height: auto; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #ffe89a, #f5b82e); }
.gd-fcs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.gd-fcs .fc.gd-fcd { width: 70px; height: 70px; margin: 0; border-radius: 50%; justify-content: center; gap: 2px; cursor: pointer; transform: none; border: 2.5px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 3px 7px rgba(0, 0, 0, .25); }
.gd-fcs .fc.gd-fcd::before, .gd-fcs .fc.gd-fcd::after { content: none; }
.gd-fcs .fc.gd-fcd .fc-n { font-size: 10.5px; }
.gd-fcs .fc.gd-fcd .fc-ic { width: 28px; height: 28px; font-size: 16px; }
.gd-power { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.gd-demo { padding: 0; }
.gd-demo .vr-pcs { flex-direction: row !important; gap: 8px; }
.gd-demo .vr-pc { width: 84px !important; transform: none !important; cursor: pointer; }

.gd-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gd-best > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }
.gd-best span { font-size: 38px; line-height: 1; } .gd-best b { font-size: 14px; }
.gd-src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gd-src > * { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; color: #3d3551; background: #f3f0f8; }

@media (max-width: 760px) {
  .is-guide { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
  .gd-page { padding: 14px 10px 14px 24px; }
  .gd-page h2 { font-size: 21px; }
  .gd-fl { width: 84px; padding: 10px 4px; } .gd-fl span { font-size: 34px; } .gd-flow > i { font-size: 18px; } .gd-flow { gap: 4px; }
  .gd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .gd-pls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gd-pages4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-best { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-best span { font-size: 28px; } .gd-best b { font-size: 12px; }
}

/* ---------- 📜 คัมภีร์ tded.us (แถบซ้ายหน้าแรก): หนังสือปกหนังแนวตั้งเล่มเล็ก ----------
   ปกหนังแดงเข้ม ขอบทองนูน 2 ชั้น มุมทอง สันหนาซ้าย ตราไพ่กลางปก ชื่อทอง ริบบิ้นคั่นหน้าห้อยล่าง · ชี้เมาส์ = ยกขึ้นเรืองทอง */
.is-guide { display: flex; justify-content: center; margin: 4px 0 18px; }
.ig-tome { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 118px; height: 160px; padding: 0 0 0 10px; text-decoration: none; color: #f5d27a;
  border-radius: 4px 10px 10px 4px;
  background: radial-gradient(70% 50% at 55% 40%, rgba(255, 200, 120, .18), transparent 70%), repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 5px), linear-gradient(160deg, #6b0f1a, #3d0710 60%, #2a040a);
  box-shadow: inset 12px 0 0 #2a040a, inset 13px 0 0 rgba(245, 210, 122, .5), inset 0 0 0 2px rgba(245, 210, 122, .35), 3px 2px 0 #efe3c8, 5px 4px 0 #d9c7a2, 8px 10px 18px rgba(40, 5, 12, .45);
  transform: rotate(-3deg); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.ig-tome::before { content: ""; position: absolute; inset: 8px 8px 8px 20px; border: 1.5px solid rgba(245, 210, 122, .75); border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(42, 4, 10, .6), inset 0 0 0 4px rgba(245, 210, 122, .4); pointer-events: none; }
.ig-tome::after { content: "✦    ✦"; position: absolute; top: 12px; left: 22px; right: 10px; text-align: center; font-size: 9px; letter-spacing: 1px; color: #f5d27a; opacity: .8; }
.ig-tome:hover { transform: rotate(0) translateY(-4px); box-shadow: inset 12px 0 0 #2a040a, inset 13px 0 0 rgba(245, 210, 122, .5), inset 0 0 0 2px rgba(245, 210, 122, .5), 3px 2px 0 #efe3c8, 5px 4px 0 #d9c7a2, 0 0 22px rgba(245, 196, 66, .55), 8px 14px 22px rgba(40, 5, 12, .5); }
.ig-seal { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; font-size: 20px; background: radial-gradient(circle at 35% 30%, #fff1b8, #d4a441 60%, #8a5d10); box-shadow: 0 0 0 2px #2a040a, 0 0 0 3.5px rgba(245, 210, 122, .8), 0 3px 6px rgba(0, 0, 0, .5); }
.ig-tome b { font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 22px; line-height: 1.1; color: #ffe08a; text-shadow: 0 1px 0 #2a040a, 0 0 8px rgba(245, 196, 66, .5); }
.ig-tome small { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #f5d27a; opacity: .9; }
.ig-ribbon { position: absolute; bottom: -14px; right: 26px; width: 10px; height: 22px; background: linear-gradient(90deg, #b3262c, #e5484d 50%, #b3262c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
@media (max-width: 760px) { .is-guide { justify-content: flex-start; margin: 0 0 12px 8px; } .ig-tome { width: 84px; height: 112px; } .ig-seal { width: 28px; height: 28px; font-size: 14px; } .ig-tome b { font-size: 16px; } .ig-tome small { font-size: 9px; } }

/* หน้าคัมภีร์: การ์ด Joker แบบหน้าแรก (vx-card + สีระดับ) ย่อขนาด · ไม่มีเอฟเฟกต์ตามเมาส์ */
.gd-vxs { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.gd-vxs.small { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gd-vx { padding: 10px 10px 12px; gap: 6px; animation: none; }
.gd-vx .vx-joker-hero { height: 86px; margin: -4px -10px 0; }
.gd-vx .vx-joker-art { width: 80px; height: 80px; }
.gd-vx .vx-ovr { top: 6px; left: 6px; min-width: 46px; padding: 4px 5px 8px; }
.gd-vx .vx-ovr b { font-size: 24px; } .gd-vx .vx-ovr small { font-size: 7px; }
.gd-vx .vx-top { gap: 6px; }
.gd-vx .vx-idx.tl { width: 30px; min-height: 38px; } .gd-vx .vx-idx.tl b { font-size: 15px; } .gd-vx .vx-idx.tl i { font-size: 12px; }
.gd-vx .vx-name b { font-size: 14px; line-height: 1.15; } .gd-vx .vx-name small { font-size: 10.5px; }
.gd-vx.dim { filter: grayscale(.9); opacity: .55; }
.gd-vxs.small .gd-vx .vx-joker-hero { height: 60px; } .gd-vxs.small .gd-vx .vx-joker-art { width: 56px; height: 56px; } .gd-vxs.small .gd-vx .vx-name small { display: none; }
.gd-today { position: relative; z-index: 3; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .4); }
@media (max-width: 760px) { .gd-vxs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gd-vxs.small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 📒 คัมภีร์ บทสมุดวางการ์ด (ละเอียดขึ้น) ---------- */
.gd-ex-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; font-size: 14px; }
.gd-ex-h span { padding: 3px 10px; border-radius: 999px; font-weight: 800; color: #fff; background: #7048e8; }
.gd-ex-h b { font-size: 15px; }
.gd-ex-h a { margin-left: auto; font-weight: 800; font-size: 13px; color: #b3262c; text-decoration: none; }
.gd-ex .nb { margin: 14px 0 6px; }
.gd-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gd-parts > div { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.gd-parts i { position: absolute; top: -8px; left: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: #b45309; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.gd-parts b { font-size: 13.5px; } .gd-parts small { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.gd-pv { grid-row: 1 / 3; justify-self: center; display: grid; place-items: center; font-size: 13px; }
.gd-pv.head { font-family: "Sriracha", var(--font-head); font-size: 15px; color: #1f7a58; }
.gd-pv.note { padding: 4px 8px; font-family: var(--font-head); font-weight: 800; font-size: 12px; color: #4a3a00; background: #fff3a8; box-shadow: 1px 2px 4px rgba(0, 0, 0, .15); transform: rotate(-2deg); }
.gd-pv.jk { width: 40px; height: 54px; border-radius: 6px; font-size: 18px; color: #fff; background: radial-gradient(80% 55% at 50% 45%, #6d28d9, #2e1065 75%); border: 2px solid #f5c542; }
.gd-pv.pl { width: 40px; height: 54px; border-radius: 6px; font-size: 18px; background: radial-gradient(90% 70% at 50% 45%, #fffdf7, #f6ecd6); border: 1.5px solid #c9a25a; outline: 1px solid rgba(179, 38, 44, .5); outline-offset: -4px; }
.gd-pv.cir { width: 46px; height: 46px; border-radius: 50%; font-size: 20px; color: #fff; background: radial-gradient(circle at 40% 35%, #ff9a5a, #e8590c 70%); border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(232, 89, 12, .5); }
.gd-pv.star { padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #4a2c00; background: radial-gradient(circle at 30% 30%, #fff3b0, #f5b82e); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transform: rotate(8deg); }
.gd-pv.foot { font-family: "Sriracha", var(--font-head); font-size: 14px; color: #8a8199; }
.gd-fgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gd-fg { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.gd-fg h4 { margin: 0 0 8px; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 17px; }
.gd-fgi { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px dashed #eee4d0; }
.gd-fgi:first-of-type { border-top: 0; }
.gd-fgi .fc.gd-fcd { flex: none; width: 50px; height: 50px; margin: 0; padding: 3px; border-radius: 50%; justify-content: center; gap: 1px; transform: none; border: 2.5px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 2px 5px rgba(0, 0, 0, .2); }
.gd-fgi .fc.gd-fcd::before, .gd-fgi .fc.gd-fcd::after { content: none; }
.gd-fgi .fc.gd-fcd .fc-n { font-size: 8px; } .gd-fgi .fc.gd-fcd .fc-ic { width: 20px; height: 20px; font-size: 12px; }
.gd-fgi b { display: block; font-size: 13.5px; } .gd-fgi small { font-size: 11.5px; color: #4b4360; }
.gd-reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gd-rd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); border-top: 5px solid #16a34a; }
.gd-rd.no { border-top-color: #a3a3a3; }
.gd-vs { display: flex; align-items: center; gap: 6px; }
.gd-vs em { font-style: normal; font-family: var(--font-head); font-weight: 800; font-size: 16px; padding: 4px 8px; border-radius: 8px; background: #fff7e6; border: 1.5px solid #f0d49a; }
.gd-rd.ok .gd-vs em.a { background: #fff3c4; border-color: #f5b82e; box-shadow: 0 0 8px rgba(245, 184, 46, .5); }
.gd-vs i { font-style: normal; font-size: 11px; color: var(--muted); }
.gd-rd b { font-size: 13px; }
@media (max-width: 760px) {
  .gd-fgroups { grid-template-columns: minmax(0, 1fr); }
  .gd-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-parts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 📜 คัมภีร์ด้านใน: สมุดเก่าบนโต๊ะไม้ + ลูกเล่น 3 อย่าง (พลิกไพ่ · สไลด์คะแนน · ตาชั่งการ์ด) ---------- */
body:has(main.gd) { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 220, 170, .18), transparent 60%), repeating-linear-gradient(92deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 9px), linear-gradient(180deg, #7a4a2a, #5c3519 60%, #4a2a14); background-attachment: fixed; }
.gd { max-width: 1200px; }
.gd-tabs { background: none; }
.gd-tabs a { background: #fff3c4; border: 1.5px solid #e2c47a; }
/* กระดาษสมุดเก่า: ครีมเหลือง เส้นบรรทัด เส้นกั้นหน้าคู่แดง รูเจาะ เทปกาว คราบกาแฟ ลายดินสอ */
.gd-page { position: relative; padding: 26px 26px 26px 58px; border-radius: 4px 14px 14px 4px;
  background:
    radial-gradient(circle at 22px 60px, #5c3519 0 7px, transparent 7.5px) 0 0 / 44px 120px repeat-y,
    linear-gradient(90deg, transparent 38px, rgba(210, 60, 60, .45) 38px 39.5px, transparent 39.5px 42px, rgba(210, 60, 60, .45) 42px 43.5px, transparent 43.5px),
    radial-gradient(circle at 92% 88%, transparent 34px, rgba(150, 95, 40, .12) 35px 38px, transparent 39px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(100, 140, 190, .28) 29px 30px),
    radial-gradient(120% 90% at 30% 20%, #fffaf0, #f7ecd2 60%, #efdfbd);
  box-shadow: 0 1px 0 #fff inset, 0 10px 26px rgba(30, 15, 5, .45), 4px 4px 0 #e9dcc0, 7px 7px 0 #d9c8a4; }
.gd-page::before { content: ""; position: absolute; top: -10px; left: 50%; width: 110px; height: 24px; margin-left: -55px; background: rgba(255, 244, 200, .8); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transform: rotate(-2deg); }
.gd-page::after { content: ""; position: absolute; right: 18px; top: 16px; width: 120px; height: 120px; opacity: .12; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%233b2a1a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='38' cy='40' r='20'/%3E%3Cpath d='M38 20l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3Crect x='62' y='52' width='22' height='32' rx='3' transform='rotate(12 73 68)'/%3E%3Cpath d='M68 64l6 4-6 4M20 78c10-6 20 6 30 0s20 6 30 0' /%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.gd-page:nth-of-type(even)::after { transform: scaleX(-1) rotate(-10deg); }
.gd-page h2 { font-size: 30px; color: #3b1f0a; }
.gd-say { position: relative; margin: -4px 0 16px; padding: 10px 14px 10px 40px; border-radius: 10px; font-size: 14.5px; line-height: 1.7; color: #3b2a1a; background: rgba(255, 243, 196, .7); border: 1.5px dashed #d9b35a; }
.gd-say::before { content: "✍️"; position: absolute; left: 12px; top: 9px; font-size: 16px; }
.gd-say b { color: #9a3412; }

/* ① ไพ่พลิก */
.gd-flip { perspective: 1100px; cursor: pointer; outline: none; }
.gd-flip-in { position: relative; display: grid; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.gd-flip-in > * { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gd-flip .gd-vx { transform: none !important; }
.gd-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 14px; color: #2b2238;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #b45309) 16%, #fffaf0), #fffaf0 70%); border: 2.5px solid color-mix(in srgb, var(--c, #b45309) 60%, #fff); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.gd-back > b { font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 17px; color: color-mix(in srgb, var(--c, #b45309) 80%, #1a1024); }
.gd-back p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.gd-back p em { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: #6b4a1a; }
.gd-back p.care { color: #8a4b00; }
.gd-back p.st { margin-top: auto; padding-top: 6px; border-top: 1px dashed #e6dccb; font-weight: 700; }
.gd-back .gd-today { background: var(--c, #b45309); border: 0; align-self: flex-start; }
@media (hover: hover) { .gd-flip:hover .gd-flip-in { transform: rotateY(180deg); } }
.gd-flip.on .gd-flip-in { transform: rotateY(180deg); }
@media (hover: hover) { .gd-flip.on:hover .gd-flip-in { transform: rotateY(180deg); } }
.gd-turn { position: absolute; z-index: 6; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35); }
.gd-flip.dim { filter: grayscale(.9); opacity: .6; }
/* การ์ด Joker ใหญ่ขึ้น */
.gd-vxs { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.gd-vxs.small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.gd-vx { min-height: 230px; }
.gd-vx .vx-joker-hero { height: 112px; } .gd-vx .vx-joker-art { width: 104px; height: 104px; }
.gd-vx .vx-ovr { min-width: 54px; } .gd-vx .vx-ovr b { font-size: 28px; }
.gd-vx .vx-name b { font-size: 16px; } .gd-vx .vx-name small { font-size: 11.5px; }
/* ไพ่พิศดารใหญ่ขึ้น + พลิก */
.gd-pls { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 16px; }
.gd-plf .gd-pl { height: 172px; padding: 22px 8px 10px; transform: none !important; }
.gd-plf .gd-pl img { width: 66px; height: 66px; }
.gd-plf .gd-pl small { font-size: 12.5px; }
.gd-plf .gd-pl-no { font-size: 20px; }
.gd-back.pl { padding: 12px 10px; border-radius: 9px; background: radial-gradient(90% 70% at 50% 45%, #fffdf7, #f6ecd6); border: 1.5px solid #c9a25a; }
.gd-back.pl > b { font-size: 16px; color: #b3262c; }
.gd-back.pl p { font-size: 11.5px; }
.gd-back.pl small { margin-top: auto; font-size: 11px; color: var(--muted); }
.gd-back.pl .gd-today { background: #b3262c; margin-top: auto; }

/* ② สไลด์คะแนน */
.gd-slide { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.gd-slide-card { width: 230px; }
.gd-slide-card .gd-turn { display: none; }
.gd-slide-ctl { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1.5px dashed #d9b35a; }
.gd-slide-ctl > b { font-size: 16px; }
.gd-slide-ctl input[type=range] { width: 100%; accent-color: #b45309; height: 26px; }
.gd-slide-out { display: flex; align-items: baseline; gap: 12px; }
.gd-slide-out span { font-family: var(--font-head); font-size: 44px; font-weight: 800; color: #3b1f0a; }
.gd-slide-out em { font-style: normal; padding: 3px 12px; border-radius: 999px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #444; }
.gd-slide-out em.plat { background: linear-gradient(135deg, #5d6880, #a9b5c9); } .gd-slide-out em.gold { background: linear-gradient(135deg, #8f6110, #d9a843); }
.gd-slide-out em.silver { background: linear-gradient(135deg, #4b5058, #9aa0a8); } .gd-slide-out em.black { background: #111; }
.gd-slide-ctl small { font-size: 14px; color: #3b2a1a; }

/* ③ ตาชั่งการ์ด */
.gd-scale { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 18px 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1.5px dashed #d9b35a; }
.gd-sc-beam { position: relative; display: flex; justify-content: space-between; width: min(560px, 100%); height: 150px; border-bottom: 8px solid #8a5d10; border-radius: 4px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 100%; }
.gd-sc-pan { position: relative; width: 42%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 6px; }
.gd-sc-pan::after { content: ""; position: absolute; bottom: -8px; left: 0; right: 0; height: 14px; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, #d9a843, #8a5d10); }
.gd-sc-pan > b { order: 2; font-family: "Sriracha", var(--font-head); font-weight: 400; font-size: 18px; }
.gd-sc-cards { order: 1; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 4px; min-height: 40px; }
.gd-sc-cards i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 16px; background: #fff; border: 2.5px solid #e8590c; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); animation: scDrop .35s cubic-bezier(.3, 1.6, .5, 1); }
.gd-sc-pan.r .gd-sc-cards i { border-color: #2f7fd1; }
@keyframes scDrop { from { transform: translateY(-30px); opacity: 0; } }
.gd-sc-post { width: 16px; height: 60px; background: linear-gradient(90deg, #6b4508, #d9a843, #6b4508); border-radius: 4px 4px 0 0; box-shadow: 0 30px 0 -4px #6b4508; }
.gd-sc-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.gd-sc-ctl button { padding: 8px 16px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; background: #e8590c; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.gd-sc-ctl button[data-add=r] { background: #2f7fd1; } .gd-sc-ctl button.rs { background: #7a6a55; }
.gd-sc-ctl button:active { transform: scale(.95); }
.gd-sc-verdict { margin-top: 12px; padding: 8px 16px; border-radius: 12px; font-weight: 800; font-size: 15px; background: #f3f0f8; text-align: center; }
.gd-sc-verdict.ok { background: #dcfce7; color: #14532d; } .gd-sc-verdict.no { background: #fee2e2; color: #7f1d1d; } .gd-sc-verdict.wait { background: #fef3c7; color: #78350f; }

.gd-best > div small { font-size: 11.5px; color: var(--muted); }
.gd-fl span { font-size: 54px; } .gd-fl { width: 136px; }

@media (max-width: 760px) {
  .gd-page { padding: 20px 12px 18px 40px; background-size: 30px 120px, auto, auto, auto, auto; }
  .gd-page::after { width: 70px; height: 70px; }
  .gd-page h2 { font-size: 22px; }
  .gd-say { font-size: 13px; padding: 8px 10px 8px 34px; }
  .gd-vxs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gd-vx { min-height: 0; } .gd-vx .vx-joker-hero { height: 80px; } .gd-vx .vx-joker-art { width: 74px; height: 74px; }
  .gd-pls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gd-plf .gd-pl { height: 140px; } .gd-plf .gd-pl img { width: 46px; height: 46px; }
  .gd-slide-card { width: 180px; margin: 0 auto; }
  .gd-sc-beam { height: 120px; }
  .gd-fl { width: 84px; } .gd-fl span { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .gd-flip-in, .gd-sc-beam { transition: none; } .gd-sc-cards i { animation: none; } }
/* แก้: ด้านหลังสูงกว่า → การ์ดยืดไม่เท่ากัน · ให้ด้านหน้ากำหนดความสูง (คงที่) ด้านหลังซ้อนทับเต็มใบ เลื่อนอ่านได้ */
.gd-flip-in { display: block; }
.gd-flip-in > .gd-back { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; }
.gd-vxs .gd-vx { height: 250px; min-height: 0; }
.gd-vxs.small .gd-vx { height: 190px; }
.gd-plf .gd-pl { height: 172px; }
@media (max-width: 760px) { .gd-vxs .gd-vx { height: 200px; } .gd-vxs.small .gd-vx { height: 160px; } .gd-plf .gd-pl { height: 140px; } }

/* การ์ดพลังในสมุด (bet_power_pages): สี่เหลี่ยมสีเข้มประจำแนว แบบการ์ดใต้โลโก้ ย่อส่วน */
.fc-power { width: 58px; color: #fff; border: 2px solid rgba(255, 255, 255, .55); outline: 1px solid rgba(255, 255, 255, .3); outline-offset: -5px; box-shadow: 0 3px 7px rgba(0, 0, 0, .3); }
.fc-power::before, .fc-power::after { content: none; }
.fc-power.pw-atk { background: radial-gradient(90% 50% at 50% 100%, rgba(255, 107, 26, .5), transparent 70%), linear-gradient(170deg, #5c0a12, #2a0508 60%, #140204); }
.fc-power.pw-mid { background: radial-gradient(90% 50% at 50% 50%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(170deg, #0f5a3c, #083a26 60%, #04200f); }
.fc-power.pw-def { background: radial-gradient(90% 50% at 50% 0%, rgba(56, 189, 248, .4), transparent 70%), linear-gradient(170deg, #12305e, #0a1c3c 60%, #050d1f); }
.fc-power small { font-size: 8.5px; letter-spacing: 0; opacity: 1; }
.fc-power .fc-ic { width: 26px; height: 26px; font-size: 15px; }
.fc-power strong { font-size: 9.5px; }
.fc-power em { font-size: 7.5px; }
.nb-pg.pick .fc-power { box-shadow: 0 0 10px rgba(245, 184, 46, .7), 0 3px 7px rgba(0, 0, 0, .3); border-color: #f5b82e; }
@media (max-width: 760px) { .fc-power { width: 46px; } .fc-power .fc-ic { width: 20px; height: 20px; font-size: 12px; } }
/* การ์ดพลังในสมุด = สี่เหลี่ยม (ไม่ใช้กฎวงกลมของการ์ดปัจจัย) */
.nb .fc.fc-power { width: 58px; height: 84px; margin-top: 0; padding: 5px 2px; border-radius: 8px; justify-content: space-between; gap: 2px; border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 3px 7px rgba(0, 0, 0, .3); }
.nb .fc.fc-power small, .nb .fc.fc-power em { display: block; }
.nb .fc.fc-power .fc-ic { width: 26px; height: 26px; font-size: 15px; background: rgba(255, 255, 255, .9); }
.nb .fc.fc-power strong { font-size: 9px; white-space: nowrap; }
.nb .fc.fc-power em { font-size: 7.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-pg.pick .fc.fc-power { border-color: #f5b82e; box-shadow: 0 0 10px rgba(245, 184, 46, .7), 0 3px 7px rgba(0, 0, 0, .3); }
@media (max-width: 760px) { .nb .fc.fc-power { width: 46px; height: 68px; } .nb .fc.fc-power .fc-ic { width: 20px; height: 20px; font-size: 12px; } .nb .fc.fc-power strong { font-size: 7.5px; } }

/* =====================================================================
   📜 คัมภีร์ตะวันออก (guide.php · main.gd.cn) — ทับธีมสมุดเดิม
   พื้น: แลกเกอร์แดงดำ + ลายเมฆมงคล ทอง · หน้า: กระดาษข้าวเหลืองซีด ขอบลายขอบเครื่องหมายวงกต แดงชาด
   ฟอนต์: Ma Shan Zheng (พู่กันจีน) · Charmonman (ไทยลายมือหรู) · Chonburi (ไทยหัวเรื่องหนา)
   ===================================================================== */
body:has(main.gd.cn) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23d4a441' stroke-opacity='.13' stroke-width='1.6'%3E%3Cpath d='M10 40c0-10 12-14 18-6 2-10 18-10 20 0 8-4 16 2 12 10H10z'/%3E%3Cpath d='M70 22c0-8 10-11 14-5 2-8 14-8 16 0 6-3 12 2 9 8H70z'/%3E%3Cpath d='M22 40c2-4 6-5 9-2M40 40c2-5 8-6 11-2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px,
    radial-gradient(90% 60% at 50% 0%, rgba(200, 30, 30, .35), transparent 70%),
    linear-gradient(180deg, #2a0707, #1a0404 50%, #0f0202);
  background-attachment: fixed;
}
.gd.cn { max-width: 1320px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; padding-top: 18px; }
.gd.cn .gd-tabs { display: none; }
.cn-body { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---- ม้วนคัมภีร์ซ้าย ---- */
.cn-scroll { position: sticky; top: 12px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .6)); }
.cn-rod { display: block; width: 100%; height: 18px; border-radius: 9px; background: linear-gradient(180deg, #3a1d0a, #8a5a20 40%, #d4a441 50%, #8a5a20 60%, #3a1d0a); position: relative; z-index: 2; }
.cn-rod::before, .cn-rod::after { content: ""; position: absolute; top: -3px; width: 16px; height: 24px; border-radius: 5px; background: radial-gradient(circle at 40% 35%, #ffe08a, #b8860b 60%, #5c3d00); }
.cn-rod::before { left: -8px; } .cn-rod::after { right: -8px; }
.cn-paper { position: relative; width: 88%; padding: 22px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: repeating-linear-gradient(90deg, rgba(120, 80, 30, .05) 0 1px, transparent 1px 5px), radial-gradient(120% 80% at 50% 30%, #f7ebcf, #ead6a8 70%, #dcc28c);
  border-left: 3px double #8b1a1a; border-right: 3px double #8b1a1a; }
.cn-title { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cn-title b { writing-mode: vertical-rl; font-family: "Chonburi", serif; font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 6px; color: #1a0d05; text-shadow: 1px 1px 0 rgba(139, 26, 26, .25); }
.cn-title small { font-family: "Charmonman", var(--font-head); font-weight: 700; font-size: 14px; color: #8b1a1a; }
.cn-toc { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.cn-toc a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: #2b1a0a; font-family: "Charmonman", var(--font-head); font-weight: 700; font-size: 15px; border-bottom: 1px dashed rgba(139, 26, 26, .3); transition: background .15s, transform .15s; }
.cn-toc a:hover { background: rgba(139, 26, 26, .12); transform: translateX(3px); }
.cn-toc em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; font-style: normal; font-family: "Chonburi", serif; font-size: 17px; color: #fff4d6; background: #a4161a; box-shadow: inset 0 0 0 2px #fff4d6, inset 0 0 0 3px #a4161a; }
.cn-vert { writing-mode: vertical-rl; font-family: "Chonburi", serif; font-size: 18px; letter-spacing: 4px; color: rgba(26, 13, 5, .55); }

/* ---- ตราประทับแดง ---- */
.cn-stamp { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 6px; font-style: normal; font-family: "Chonburi", serif; font-weight: 400; font-size: 36px; line-height: 1; color: #fff1e0;
  background: radial-gradient(circle at 30% 25%, #e0282e, #a4161a 60%, #7a0c10); box-shadow: inset 0 0 0 3px #fff1e0, inset 0 0 0 5px #a4161a, 0 3px 8px rgba(0, 0, 0, .35);
  transform: rotate(-6deg); }
.cn-stamp.big { width: 64px; height: 64px; font-size: 42px; transform: rotate(8deg); }
.cn-stamp.sm { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; font-size: 19px; box-shadow: inset 0 0 0 2px #fff1e0, inset 0 0 0 3px #a4161a; opacity: .9; }
.cn-page .cn-h .cn-stamp { transform: scale(2.2) rotate(-18deg); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.8, .4, 1), opacity .3s; }
.cn-page.in .cn-h .cn-stamp { transform: rotate(-6deg); opacity: 1; }

/* ---- หัวหน้า ---- */
.cn-hero { position: relative; padding: 26px 90px; border-radius: 10px; text-align: center; color: #ffe8b0; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px), radial-gradient(80% 120% at 50% 0%, #b3161c, #6e0a0e 70%, #3d0508);
  border: 3px solid #d4a441; box-shadow: inset 0 0 0 6px #6e0a0e, inset 0 0 0 8px #d4a441, 0 14px 30px rgba(0, 0, 0, .5); }
.cn-hero-t > b { display: block; font-family: "Chonburi", serif; font-weight: 400; font-size: 58px; line-height: 1; letter-spacing: 10px; color: #ffd76a; text-shadow: 0 3px 0 #5c0508, 0 0 18px rgba(255, 200, 80, .5); }
.cn-hero h1 { margin: 6px 0 6px; font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 28px; color: #fff4d6; letter-spacing: .02em; }
.cn-hero p { margin: 0 auto; max-width: 620px; font-size: 14.5px; line-height: 1.7; color: #ffe8c4; } .cn-hero p b { color: #ffd76a; }
.cn-lantern { position: absolute; top: 14px; display: grid; place-items: center; width: 54px; height: 70px; border-radius: 45%; font-family: "Chonburi", serif; font-size: 28px; color: #ffe08a;
  background: radial-gradient(circle at 40% 35%, #ff5a4f, #c1121f 60%, #7a0c10); box-shadow: 0 0 22px rgba(255, 90, 60, .7), inset 0 -6px 0 rgba(0, 0, 0, .2); transform-origin: 50% -30px; animation: cnSwing 3.2s ease-in-out infinite; }
.cn-lantern::before, .cn-lantern::after { content: ""; position: absolute; left: 50%; width: 22px; margin-left: -11px; height: 6px; border-radius: 2px; background: #d4a441; }
.cn-lantern::before { top: -3px; } .cn-lantern::after { bottom: -3px; }
.cn-lantern.l { left: 22px; } .cn-lantern.r { right: 22px; animation-delay: -1.6s; }
@keyframes cnSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ---- หน้าคัมภีร์ (กระดาษข้าว) ---- */
.gd.cn .gd-page { padding: 30px 60px 30px 34px; border-radius: 4px; color: #2b1a0a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h20v20H6V6h12v12H10v-8h4v4' fill='none' stroke='%238b1a1a' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h20v20H6V6h12v12H10v-8h4v4' fill='none' stroke='%238b1a1a' stroke-width='1.6'/%3E%3C/svg%3E") 0 100% / 24px 24px repeat-x,
    radial-gradient(60% 40% at 85% 90%, rgba(40, 20, 5, .08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 80, 30, .04) 0 1px, transparent 1px 6px),
    radial-gradient(130% 90% at 30% 20%, #f8edd3, #efdcb0 60%, #e3c98f);
  background-origin: border-box;
  border: 0; box-shadow: 0 0 0 2px #8b1a1a, 0 0 0 6px #e8d2a0, 0 0 0 8px #5c0508, 0 16px 34px rgba(0, 0, 0, .55); }
.gd.cn .gd-page::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 12px; width: 3px; height: auto; margin: 0; border-left: 1px solid rgba(139, 26, 26, .4); border-right: 1px solid rgba(139, 26, 26, .4); background: none; box-shadow: none; transform: none; }
.gd.cn .gd-page::after { display: none; }
.cn-side { position: absolute; right: 16px; top: 34px; writing-mode: vertical-rl; font-family: "Chonburi", serif; font-size: 22px; letter-spacing: 6px; color: rgba(26, 13, 5, .35); pointer-events: none; }
.cn-h { display: flex !important; align-items: center; gap: 14px; margin: 0 0 16px !important; }
.cn-ht { display: flex; flex-direction: column; font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 30px; line-height: 1.15; color: #3d0508; }
.cn-ht small { font-family: "Chonburi", serif; font-size: 16px; color: #8b1a1a; letter-spacing: 2px; }
.cn-ht em { font-style: normal; font-family: "Charmonman", var(--font-head); font-weight: 700; font-size: 16px; color: #7a5a2a; }
.gd.cn .gd-say { font-size: 15px; background: rgba(255, 248, 225, .75); border: 1.5px solid rgba(139, 26, 26, .35); border-left: 6px solid #a4161a; border-radius: 4px; }
.gd.cn .gd-say::before { content: "📜"; }
.gd.cn .gd-say b { color: #a4161a; }
.cn-sub { font-family: "Charmonman", var(--font-head) !important; font-size: 20px !important; color: #3d0508; }
/* กล่องเคล็ดวิชา */
.cn-xin { position: relative; margin-top: 18px; padding: 16px 18px 14px 18px; border-radius: 4px; color: #fbe7c0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), linear-gradient(160deg, #3d0508, #22030a); border: 2px solid #d4a441; box-shadow: inset 0 0 0 4px #3d0508, inset 0 0 0 5px rgba(212, 164, 65, .5); }
.cn-xin > b { display: inline-block; margin-bottom: 8px; padding: 2px 12px; font-family: "Chonburi", serif; font-weight: 400; font-size: 20px; color: #3d0508; background: linear-gradient(135deg, #ffe08a, #d4a441); border-radius: 3px; }
.cn-xin p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; }
.cn-xin p b { color: #ffd76a; }

/* เหรียญแลกเกอร์แดงขอบทอง (ไอคอน) */
.cn-medal { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-style: normal; font-family: "Chonburi", serif; font-size: 26px; color: #ffe08a;
  background: radial-gradient(circle at 35% 30%, #d62828, #8b0000 70%); box-shadow: 0 0 0 3px #d4a441, 0 0 0 5px #5c0508, 0 4px 10px rgba(0, 0, 0, .35); }
.gd.cn .gd-flow { gap: 12px; }
.gd.cn .gd-fl { position: relative; width: 160px; padding: 32px 10px 14px; border-radius: 6px; background: radial-gradient(120% 90% at 50% 20%, #fffaf0, #f3e2bb); border: 2px solid #8b1a1a; box-shadow: 0 6px 14px rgba(60, 20, 5, .25); }
.gd.cn .gd-fl .cn-medal { position: absolute; top: -22px; left: 50%; margin-left: -25px; }
.gd.cn .gd-fl span { font-size: 46px; } .gd.cn .gd-fl b { font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 16px; color: #3d0508; } .gd.cn .gd-fl small { text-align: center; font-size: 11.5px; color: #6b4a2a; }
.gd.cn .gd-fl.ok { background: radial-gradient(120% 90% at 50% 20%, #f0fff4, #cdeccf); }
.gd.cn .gd-flow > i { color: #a4161a; font-size: 30px; }

/* ชั้นการ์ด */
.gd.cn .gd-tier { position: relative; padding-top: 18px; border-width: 3px; }
.gd.cn .gd-tier i { font-style: normal; font-family: "Chonburi", serif; font-size: 34px; line-height: 1; color: #ffe08a; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.gd.cn .gd-tier small { font-size: 11px; opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.cn-tierch { font-style: normal; font-family: "Chonburi", serif; font-size: 44px; color: #a4161a; line-height: 1; }
.gd.cn .gd-slide-ctl { background: rgba(255, 248, 225, .85); border: 2px solid #8b1a1a; border-radius: 4px; }
.gd.cn .gd-slide-ctl input[type=range] { accent-color: #a4161a; }

/* การ์ด Joker: กรอบแดงทอง + หน้ากากงิ้วใหญ่ */
.gd.cn .gd-vx { box-shadow: 0 0 0 2px #d4a441, 0 0 0 4px #5c0508, 0 10px 20px rgba(0, 0, 0, .5) !important; }
.gd.cn .gd-vx .vx-joker-hero { background: radial-gradient(60% 80% at 50% 65%, rgba(220, 40, 40, .5), transparent 75%); }
.gd.cn .gd-vx .vx-joker-hero::before { background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, .3) 0 8deg, transparent 8deg 20deg); }
.gd.cn .gd-vx .vx-joker-art { width: 118px !important; height: 118px !important; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.gd.cn .gd-vxs .gd-vx { height: 270px; }
.gd.cn .gd-vx .vx-joker-hero { height: 128px; }
.gd.cn .gd-back { color: #2b1a0a; background: repeating-linear-gradient(90deg, rgba(120, 80, 30, .05) 0 1px, transparent 1px 5px), radial-gradient(120% 90% at 50% 10%, #fbf1d8, #efdcb0); border: 3px double #8b1a1a; border-radius: 6px; }
.gd.cn .gd-back > b { font-family: "Charmonman", var(--font-head); font-weight: 700; font-size: 19px; color: #8b1a1a; padding-right: 34px; }
.gd.cn .gd-back p em { color: #8b1a1a; }
.gd.cn .gd-back .gd-today { background: #a4161a; }
.gd.cn .gd-turn { background: #a4161a; border-color: #ffd76a; color: #ffe8b0; }
.gd.cn .gd-flip.dim { filter: grayscale(.85) sepia(.3); }
/* ไพ่พิศดาร: ขอบแดงชาด */
.gd.cn .gd-pl { border: 2px solid #8b1a1a; outline-color: rgba(212, 164, 65, .8); }
.gd.cn .gd-back.pl { border: 3px double #8b1a1a; }
/* ส่วนประกอบสมุด */
.gd.cn .gd-parts > div, .gd.cn .gd-fg, .gd.cn .gd-best > div, .gd.cn .gd-read > div { background: rgba(255, 250, 235, .9); border: 1.5px solid rgba(139, 26, 26, .45); border-radius: 4px; }
.gd.cn .gd-parts i { width: 28px; height: 28px; border-radius: 4px; font-family: "Chonburi", serif; font-size: 17px; background: #a4161a; box-shadow: inset 0 0 0 2px #fff1e0; }
.gd-pv.pw { width: 40px; height: 56px; border-radius: 6px; font-size: 18px; color: #fff; background: radial-gradient(90% 50% at 50% 100%, rgba(255, 107, 26, .55), transparent 70%), linear-gradient(170deg, #5c0a12, #140204); border: 2px solid rgba(255, 255, 255, .5); }
.gd.cn .gd-fg h4 { font-family: "Charmonman", var(--font-head); font-weight: 700; color: #3d0508; }
.gd.cn .gd-best > div { position: relative; padding-top: 34px; margin-top: 18px; }
.gd.cn .gd-best .cn-medal { position: absolute; top: -24px; left: 50%; margin-left: -25px; }
.gd.cn .gd-best b { font-family: "Chonburi", var(--font-head); font-weight: 400; color: #3d0508; }
.gd.cn .gd-src > * { background: #3d0508; color: #ffe08a; border: 1px solid #d4a441; }
/* ตาชั่งสำริด */
.gd.cn .gd-scale { background: rgba(255, 248, 225, .7); border: 2px solid #8b1a1a; border-radius: 6px; }
.gd.cn .gd-sc-beam { border-bottom-color: #7a4a10; }
.gd.cn .gd-sc-pan::after { background: linear-gradient(180deg, #e0b24a, #7a4a10); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.gd.cn .gd-sc-post { background: linear-gradient(90deg, #4a2a05, #d4a441, #4a2a05); }
.gd.cn .gd-sc-ctl button { background: #a4161a; box-shadow: inset 0 0 0 2px #ffd76a; } .gd.cn .gd-sc-ctl button[data-add=r] { background: #1e3a8a; } .gd.cn .gd-sc-ctl button.rs { background: #5c3d1a; }
.gd.cn .gd-ex-h span { background: #a4161a; }
.gd.cn .gd-ex-h a { color: #a4161a; }

@media (max-width: 900px) {
  .gd.cn { grid-template-columns: minmax(0, 1fr); }
  .cn-scroll { position: static; }
  .cn-paper { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 12px; }
  .cn-title b { writing-mode: horizontal-tb; font-size: 30px; letter-spacing: 4px; }
  .cn-stamp.big, .cn-vert { display: none; }
  .cn-toc { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cn-toc a { font-size: 13px; padding: 4px 6px; }
  .cn-hero { padding: 20px 14px 18px; } .cn-hero-t > b { font-size: 40px; } .cn-hero h1 { font-size: 21px; }
  .cn-lantern { width: 36px; height: 46px; font-size: 18px; top: 8px; } .cn-lantern.l { left: 8px; } .cn-lantern.r { right: 8px; }
  .gd.cn .gd-page { padding: 26px 14px 24px 26px; }
  .cn-side { display: none; }
  .cn-ht { font-size: 22px; } .cn-stamp { width: 44px; height: 44px; font-size: 28px; }
  .gd.cn .gd-fl { width: 46%; } .gd.cn .gd-flow > i { display: none; }
  .gd.cn .gd-vxs .gd-vx { height: 220px; } .gd.cn .gd-vx .vx-joker-hero { height: 96px; } .gd.cn .gd-vx .vx-joker-art { width: 88px !important; height: 88px !important; }
}
@media (prefers-reduced-motion: reduce) { .cn-lantern { animation: none; } .cn-page .cn-h .cn-stamp { transition: none; transform: rotate(-6deg); opacity: 1; } }

/* ---------- 📜 คัมภีร์ตะวันออก รุ่นภาษาไทยล้วน + กลิ่นญี่ปุ่น ----------
   ตราประทับ/เหรียญ = คำไทย (Chonburi) · วงหมึกพู่กัน (enso) รอบตรา · ลายคลื่น (seigaiha) ขอบล่างหน้า · กลีบดอกไม้ร่วงในหัว
   เนื้อความใช้ Pridi (ตัวอ่านสบาย ดูเป็นทางการ) */
.gd.cn { font-family: "Pridi", var(--font-body, sans-serif); }
.cn-stamp { font-family: "Chonburi", serif; font-size: 18px; letter-spacing: 0; padding: 0 4px; width: auto; min-width: 56px; }
.cn-stamp.big { font-size: 22px; min-width: 64px; }
.cn-stamp.round { border-radius: 50%; }
.cn-stamp.sm { font-size: 11px; min-width: 34px; width: auto; height: 26px; padding: 0 5px; }
.cn-title b { writing-mode: horizontal-tb; font-family: "Chonburi", serif; font-size: 30px; line-height: 1.15; letter-spacing: 1px; text-align: center; }
.cn-title small { font-family: "Chonburi", serif; letter-spacing: 2px; }
.cn-toc em { font-family: "Chonburi", serif; font-size: 14px; }
.cn-vert { writing-mode: horizontal-tb; font-family: "Charmonman", serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; color: rgba(26, 13, 5, .55); }
/* หัว */
.cn-hero-t > b { font-family: "Chonburi", serif; font-size: 50px; letter-spacing: 2px; }
.cn-hero h1 { font-family: "Charmonman", serif; font-weight: 700; font-size: 26px; }
.cn-lantern { font-family: "Chonburi", serif; font-size: 15px; }
/* กลีบดอกไม้ร่วง (ญี่ปุ่น) — transform/opacity เท่านั้น */
.cn-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cn-petals i { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e0, #f48fb1); opacity: .85; animation: cnPetal 9s linear infinite; }
.cn-petals i:nth-child(1) { left: 12%; animation-delay: 0s; } .cn-petals i:nth-child(2) { left: 28%; animation-delay: -2s; animation-duration: 11s; }
.cn-petals i:nth-child(3) { left: 46%; animation-delay: -5s; } .cn-petals i:nth-child(4) { left: 63%; animation-delay: -1s; animation-duration: 12s; }
.cn-petals i:nth-child(5) { left: 78%; animation-delay: -7s; } .cn-petals i:nth-child(6) { left: 90%; animation-delay: -3.5s; animation-duration: 10s; }
@keyframes cnPetal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .85; } 100% { transform: translate(-60px, 320px) rotate(540deg); opacity: 0; } }
/* วงหมึกพู่กันรอบตรา (enso) */
.cn-enso { position: relative; display: grid; place-items: center; flex: none; width: 84px; height: 84px; }
.cn-enso::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 5px solid rgba(26, 13, 5, .78); border-right-color: transparent; border-bottom-width: 7px; transform: rotate(-30deg); filter: blur(.3px); }
.cn-enso .cn-stamp { position: relative; }
/* ลายคลื่นญี่ปุ่นขอบล่างทุกหน้า + ทับขอบเดิม */
.gd.cn .gd-page { padding-bottom: 46px; }
.gd.cn .gd-page::after { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 24px; top: auto; width: auto; height: 22px; opacity: .55; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%238b1a1a' stroke-width='1.2'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='13'/%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Ccircle cx='0' cy='20' r='18'/%3E%3Ccircle cx='40' cy='20' r='18'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 20px repeat-x; }
.gd.cn .gd-page:nth-of-type(even)::after { transform: none; }
/* ข้อความคมแนวข้าง */
.cn-side { writing-mode: vertical-rl; font-family: "Charmonman", serif; font-weight: 700; font-size: 18px; letter-spacing: 2px; color: rgba(139, 26, 26, .4); }
.cn-ht small { font-family: "Charmonman", serif; font-weight: 700; font-size: 17px; letter-spacing: 1px; }
/* ชั้นการ์ด: คำไทย */
.gd.cn .gd-tier i { font-family: "Chonburi", serif; font-size: 18px; }
/* เหรียญคำไทย */
.cn-medal { font-family: "Chonburi", serif; font-size: 14px; }
.gd.cn .gd-parts i { font-family: "Chonburi", serif; font-size: 14px; }
.cn-xin > b { font-family: "Chonburi", serif; font-size: 16px; }
/* ตารางเทียบ tded vs ทั่วไป */
.gd-vs-tbl { display: flex; flex-direction: column; margin: 6px 0 16px; border: 2px solid #8b1a1a; border-radius: 6px; overflow: hidden; background: rgba(255, 250, 235, .9); }
.gd-vs-tbl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; border-top: 1px dashed rgba(139, 26, 26, .3); }
.gd-vs-tbl > div:first-child { border-top: 0; }
.gd-vs-tbl > div > * { padding: 9px 12px; font-size: 13.5px; line-height: 1.5; }
.gd-vs-tbl > div > span { font-weight: 700; color: #3d0508; background: rgba(139, 26, 26, .06); height: 100%; display: flex; align-items: center; }
.gd-vs-tbl i { font-style: normal; color: #7a6a55; }
.gd-vs-tbl i.us { color: #14532d; font-weight: 600; background: rgba(22, 163, 74, .08); height: 100%; display: flex; align-items: center; }
.gd-vs-tbl .h { background: #3d0508; }
.gd-vs-tbl .h b { padding: 10px 12px; font-family: "Chonburi", serif; font-weight: 400; font-size: 15px; color: #e8d2a0; }
.gd-vs-tbl .h b.us { color: #ffd76a; background: #5c0508; }
.cn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.cn-stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 6px; background: linear-gradient(160deg, #3d0508, #22030a); border: 2px solid #d4a441; }
.cn-stats b { font-family: "Chonburi", serif; font-weight: 400; font-size: 30px; color: #ffd76a; line-height: 1.1; }
.cn-stats small { font-size: 12px; color: #fbe7c0; }

/* 📱 มือถือ: อ่านง่าย ปุ่มใหญ่ ลดของตกแต่ง */
@media (max-width: 900px) {
  .cn-title b { font-size: 22px; } .cn-title small { font-size: 12px; }
  .cn-hero-t > b { font-size: 34px; } .cn-hero h1 { font-size: 18px; } .cn-hero p { font-size: 13.5px; }
  .cn-enso { width: 62px; height: 62px; } .cn-stamp { min-width: 44px; height: 44px; font-size: 14px; }
  .cn-ht { font-size: 21px; } .cn-ht small { font-size: 14px; } .cn-ht em { font-size: 13px; }
  .gd.cn .gd-say { font-size: 14px; }
  .cn-xin p { font-size: 13.5px; }
  .gd-vs-tbl > div { grid-template-columns: 1fr 1fr; } .gd-vs-tbl > div > span { grid-column: 1 / -1; padding: 6px 10px; }
  .gd-vs-tbl .h span { display: none; }
  .gd-vs-tbl > div > * { font-size: 12.5px; padding: 7px 9px; }
  .cn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cn-stats b { font-size: 24px; }
  .gd.cn .gd-best { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd.cn .gd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd.cn .gd-pls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd.cn .gd-fgroups { grid-template-columns: minmax(0, 1fr); }
  .gd-sc-ctl button { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .cn-petals { display: none; } }

/* ---------- 💎 โฆษณา VIP 290 บาท/เดือน (บนสุดของแผงซ้ายหน้าแรก) : ราคาใหญ่ + ได้อะไร 4 ข้อ (2 คอลัมน์) + ปุ่มเดียว ---------- */
/* หนังสือคัมภีร์เล่มเล็ก (.va-tome) วางมุมขวาบนข้างราคา ไม่กินแถวเพิ่ม — ข้อความสามแถวบนเว้นขวาไว้ให้ */
.is-vipad { position: relative; overflow: hidden; padding: 14px 14px 14px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 200, 120, .35), transparent 60%), linear-gradient(160deg, #3a1450, #7a1830 55%, #b4202e);
  box-shadow: 0 10px 26px rgba(122, 24, 48, .3); border: 1px solid rgba(255, 210, 140, .45); }
.is-vipad .va-top, .is-vipad .va-price { margin-right: 66px; }
.is-vipad .va-top span { white-space: nowrap; font-size: 11.5px; }   /* หัวกล่องบรรทัดเดียว (แผงซ้ายจอคอมแคบ) */
.is-vipad .va-top { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255, 235, 215, .9); }
.is-vipad .va-top em { padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #3d1600; background: linear-gradient(135deg, #ffe0a8, #f5b642); }
.is-vipad .va-price { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.is-vipad .va-price b { font-family: var(--font-head); font-size: 48px; font-weight: 600; line-height: 1; color: #ffd27a; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.is-vipad .va-price span { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: rgba(255, 240, 225, .95); }
.is-vipad .va-perday { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #0f5a40; background: #b8f0d9; }
.is-vipad .va-perks { margin: 12px 0 0; padding: 10px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px dashed rgba(255, 214, 140, .35); }
.is-vipad .va-perks li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.is-vipad .va-perks i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-size: 13px; background: rgba(255, 255, 255, .14); }
.is-vipad .va-perks span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.is-vipad .va-perks b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-vipad .va-perks small { font-size: 10.5px; color: rgba(255, 228, 200, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-vipad .va-cta { display: block; margin-top: 12px; padding: 11px; border-radius: 12px; text-align: center; font-size: 14.5px; font-weight: 800; text-decoration: none; color: #7a1830;
  background: linear-gradient(135deg, #fff3d6, #ffd27a); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s; }
.is-vipad .va-cta:hover { transform: translateY(-1px); }
.is-vipad .va-done { margin-top: 10px; padding: 8px; border-radius: 12px; text-align: center; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .14); }
.is-vipad .va-tome { position: absolute; top: 10px; right: 12px; z-index: 1; width: 62px; height: 86px; padding-left: 7px; }
.is-vipad .va-tome::before { inset: 5px 5px 5px 13px; }
.is-vipad .va-tome::after { display: none; }
.is-vipad .va-tome .ig-seal { width: 24px; height: 24px; margin-bottom: 1px; font-size: 12px; }
.is-vipad .va-tome b { font-size: 13px; }
.is-vipad .va-tome small { font-size: 7.5px; letter-spacing: .06em; }

/* Joker ผ่านมาแล้ว: ป้ายกุญแจบนเมนู (ยังไม่ล็อกอิน) + หน้าเชิญสมัคร */
.nj-lock { font-size: .85em; }
.mb-lock { text-align: center; }
.mb-lock .mb-lock-ic { font-size: 42px; line-height: 1; margin-bottom: 8px; }
.mb-lock .mb-sub { line-height: 1.6; }

/* 📱 จอแคบ: แผงซ้ายแตกเป็นแถวของหน้า — โฆษณา VIP (+คัมภีร์ในกล่อง) ขึ้นบนสุดของหน้า */
@media (max-width: 860px) {
  .info-side .is-vipad { order: -1; }
}
@media (max-width: 760px) {
  .sb-member { justify-content: flex-end; }
  .sb-cta { flex: 1; }
  .sb-cta > * { flex: 1; text-align: center; }
  .sb-cta .auth-out .auth-btn { width: 100%; }
  .auth-user { max-width: none; justify-content: center; }
}

/* ---------- ⚡ ความเร็วหน้าแรก ---------- */
/* การ์ดที่อยู่นอกจอ: เบราว์เซอร์ข้ามการจัดวาง/วาด/แอนิเมชันจนกว่าจะเลื่อนมาใกล้ (auto = จำความสูงจริงหลังเคยวาดแล้ว หน้าไม่กระโดด) */
.fo-list > .fo, .vs-rows > .vs-drow { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.vs-rows > .vs-drow { contain-intrinsic-size: auto 420px; }
/* ปุ่มไปหน้ารายละเอียด (นักเตะ · สนาม · แผนการเล่น · จำลองการแข่ง) ท้ายการ์ดแมตช์หน้าแรก */
.vr-detail { display: block; width: fit-content; margin: 10px auto 2px; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #f0525c, var(--red) 50%, var(--red-deep)); box-shadow: 0 3px 10px rgba(229, 72, 77, .3); }
.vr-detail:hover { filter: brightness(1.06); }
details[data-static] > summary.vs-row { cursor: default; }
/* ---------- หน้าแรก: พลังทีม/พลังโค้ช/พลังที่แท้จริง + 🃏 ศึกดาวเด่น 3 คู่ (vs_stars ใน compare.php) ---------- */
.vs-stars { margin: 12px 4px 4px; padding: 12px 10px 10px; border-radius: 16px; background: rgba(255, 253, 250, .97); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .08); }
.vs-stars .pband { padding: 0 8px 12px; }
.vs-stars .pb-true strong { font-size: 46px; }
.vs-stars .pb-mid .fo-vs { font-size: 38px; }
.vs-stars .pb-foot { display: none; }   /* สูตรเต็มดูในหน้ารายละเอียด */
.sd-wrap { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 2px dashed rgba(var(--ink-rgb), .12); }
.sd-cap { text-align: center; font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--red-deep); }
.sd-cap small { display: block; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--muted); }
.sd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.sd-vs { font-family: var(--font-head); font-size: 22px; font-weight: 700; font-style: italic; color: var(--accent-strong); text-shadow: 0 2px 0 rgba(var(--shade-rgb), .15); }
/* การ์ดไพ่: ขาวงาช้าง ขอบสีทีม มุมบนซ้ายเป็นอันดับ + ไอคอนตำแหน่ง แบบมุมไพ่ · ใบที่ชนะกรอบทองเรือง */
.sd-card { --c: var(--ca); --c-rgb: var(--ca-rgb); position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 8px 10px; border-radius: 12px; text-align: center;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--c-rgb), .16), transparent 70%), linear-gradient(180deg, #fffdf6, #f6efe0); border: 2px solid rgba(var(--c-rgb), .55);
  box-shadow: 0 3px 0 rgba(var(--c-rgb), .35), 0 6px 14px rgba(var(--shade-rgb), .16); }
.sd-card.away { --c: var(--cb); --c-rgb: var(--cb-rgb); }
.sd-card.win { border-color: #e0a92e; box-shadow: 0 0 0 2px #ffe49a, 0 0 18px rgba(240, 180, 60, .55), 0 6px 14px rgba(var(--shade-rgb), .2); }
.sd-idx { position: absolute; top: 6px; left: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sd-idx b { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--c); }
.sd-idx i { font-style: normal; font-size: 11px; }
.sd-win { position: absolute; top: -9px; right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; color: #5a3a00; background: linear-gradient(135deg, #fff1b8, #f0b43c); box-shadow: 0 2px 6px rgba(240, 160, 40, .45); }
.sd-photo { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--c), 0 3px 8px rgba(0, 0, 0, .2); }
.sd-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #fff; background: var(--c); }
img.sd-img { background: #fff; }
.sd-name { max-width: 100%; font-size: 13px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-meta { font-size: 10.5px; color: var(--muted); }
.sd-val { margin-top: 2px; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--c); }
.sd-card.win .sd-val { color: #b07a00; }
.sd-sc { font-size: 10.5px; font-weight: 700; color: var(--text-soft); }
.sd-verdict { align-self: center; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2a1240, #7a1830); }
@media (max-width: 560px) {
  .vs-stars { margin: 10px 0 4px; padding: 10px 6px; }
  .vs-stars .pband { padding: 0 2px 10px; gap: 6px 6px; }
  .vs-stars .pb-true strong { font-size: 34px; }
  .vs-stars .pb-mid .fo-vs { font-size: 26px; }
  .sd-row { gap: 4px; }
  .sd-vs { font-size: 16px; }
  .sd-photo { width: 52px; height: 52px; }
  .sd-name { font-size: 12px; }
  .sd-val { font-size: 17px; }
}/* ศึกดาวเด่น จอกว้าง: 3 คู่ดวลวางเรียงกัน การ์ดทรงไพ่ตั้ง (5:7) ไม่ยืดกว้าง */
.sd-grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) {
  .sd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .sd-row { gap: 4px; }
  .sd-card { aspect-ratio: 5 / 7; justify-content: center; max-width: 150px; justify-self: center; width: 100%; padding: 16px 6px 10px; }
  .sd-vs { font-size: 16px; }
}
/* ---------- เส้นคั่นระหว่างคู่ (match_sep ใน index.php): เส้นขนาน 5 เส้นสองข้าง + ป้ายคู่ที่/เวลา/ทีม ---------- */
.m-sep { display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; gap: 10px; margin: 18px 0 12px; }
.m-sep-l, .m-sep-r { height: 22px; background: repeating-linear-gradient(to bottom, rgba(180, 32, 46, .75) 0 2px, transparent 2px 5px); border-radius: 2px; }
.m-sep-l { -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.m-sep-r { -webkit-mask: linear-gradient(270deg, transparent, #000 40%); mask: linear-gradient(270deg, transparent, #000 40%); }
.m-sep-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; max-width: 100%; padding: 7px 16px; border-radius: 999px; background: #fff; border: 2px solid rgba(180, 32, 46, .6); box-shadow: 0 3px 10px rgba(var(--shade-rgb), .15); }
.m-sep-card b { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f0525c, var(--red-deep)); }
.m-sep-card em { font-style: normal; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--red-deep); }
.m-sep-teams { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--text); }
.m-sep-teams i { font-style: normal; font-size: 11px; color: var(--muted); }
.m-sep-teams .tb { width: 22px; height: 22px; }

/* กลางหัวการ์ด: พลังที่แท้จริงสองฝั่งแทนคำว่า VS (ฝั่งที่มากกว่าสีเข้ม) */
.vr-vs.vr-pw { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: inherit; }
.vr-pw b { font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; font-style: italic; }
.vr-pw b.h { color: color-mix(in srgb, var(--ca) 78%, #1a1024); } .vr-pw b.a { color: color-mix(in srgb, var(--cb) 78%, #1a1024); }   /* ผสมเข้มนิดหน่อย สีทีมอ่อนก็ยังอ่านออก */
.vr-pw.w-h b.a, .vr-pw.w-a b.h { color: #6b6280; }   /* ฝั่งพลังน้อยกว่า: เทาเข้ม (สีทีมบางทีมเป็นขาว อ่านไม่ออก) */
.vr-pw b { -webkit-text-stroke: .5px rgba(0, 0, 0, .25); }   /* สีทีมอ่อน (ขาว/เหลือง) ยังอ่านออกบนพื้นขาว */
.vr-pw small { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: rgba(var(--ink-rgb), .06); }
.vs-band { margin: 10px 4px 12px; }
.vs-band .pband { padding-bottom: 6px; }

/* ศึกดาวเด่น: ไพ่สองใบวางซ้อนกลางโต๊ะ เอียงเข้าหากัน พื้นสีทีม ใบที่ชนะอยู่บน */
.sd-row { position: relative; display: flex; justify-content: center; align-items: center; padding: 12px 0 6px; }
.sd-row .sd-vs { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 15px; font-style: italic; color: #fff; background: radial-gradient(circle at 35% 30%, #ff7a7f, #b4202e); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .35); text-shadow: none; }
.sd-card { width: 46%; max-width: 170px; color: #fff; border: 2px solid rgba(255, 255, 255, .7);
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .28), transparent 65%), linear-gradient(165deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.sd-card.home { transform: rotate(-6deg) translateX(5px); z-index: 1; }
.sd-card.away { transform: rotate(6deg) translateX(-5px); z-index: 1; }
.sd-card.win { z-index: 2; border-color: #ffd96a; box-shadow: 0 0 0 2px #ffe49a, 0 0 20px rgba(255, 200, 70, .7), 0 10px 20px rgba(0, 0, 0, .35); }
.sd-card .sd-meta, .sd-card .sd-sc { color: rgba(255, 255, 255, .85); }
.sd-card .sd-val, .sd-card.win .sd-val { color: #ffe08a; }
.sd-card .sd-idx b { color: #fff; }
.sd-card .sd-photo { box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0, 0, 0, .35); }
.sd-logo { position: absolute; top: 6px; right: 8px; }
.sd-logo .tb { width: 24px; height: 24px; }
.sd-card.win .sd-win { right: auto; left: 50%; transform: translateX(-50%); top: -11px; }
.sd-card:hover { z-index: 3; transform: rotate(0) scale(1.04); transition: transform .2s; }
@media (min-width: 900px) { .sd-grid { gap: 6px; } .sd-card { max-width: 140px; } }
@media (max-width: 560px) {
  .vr-pw b { font-size: 24px; }
  .vr-pw small { font-size: 9px; padding: 1px 5px; }
  .m-sep-card { padding: 6px 10px; gap: 2px 8px; }
  .sd-card { width: 48%; }
  .sd-card.home { transform: rotate(-5deg) translateX(8px); }
  .sd-card.away { transform: rotate(5deg) translateX(-8px); }
}/* แถบพลัง: กลางเป็นส่วนต่างพลังที่แท้จริง (แทน VS) */
.pb-gap { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pb-gap small { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.pb-gap b { font-family: var(--font-head); font-size: 40px; font-weight: 700; font-style: italic; color: var(--accent-strong); }
.pb-gap.home b { color: var(--ca); } .pb-gap.away b { color: var(--cb); }
.pb-gap b { -webkit-text-stroke: .5px rgba(0, 0, 0, .25); }
@media (max-width: 560px) { .pb-gap b { font-size: 26px; } }/* ศึกดาวเด่น: ใบที่ชนะเด่นชัด (ใหญ่ขึ้น เรืองทอง มงกุฎ) · ใบที่แพ้เล็กลงและหม่น */
.sd-card.win { transform: rotate(0deg) scale(1.1) !important; z-index: 3; border: 3px solid #ffd24a;
  box-shadow: 0 0 0 3px #fff3c4, 0 0 28px 6px rgba(255, 196, 40, .85), 0 12px 24px rgba(0, 0, 0, .4); animation: sdWin 2s ease-in-out infinite; }
.sd-card:not(.win) { filter: saturate(.55) brightness(.82); transform-origin: center; }
.sd-card.home:not(.win) { transform: rotate(-8deg) translateX(8px) scale(.9); }
.sd-card.away:not(.win) { transform: rotate(8deg) translateX(-8px) scale(.9); }
.sd-card.win .sd-win { top: -16px; padding: 3px 12px; font-size: 12px; background: linear-gradient(135deg, #fff6c8, #f5b82a); box-shadow: 0 3px 10px rgba(240, 160, 30, .6); }
.sd-card.win .sd-win::before { content: "👑 "; }
.sd-card.win .sd-val { font-size: 1.25em; color: #ffe27a; text-shadow: 0 0 10px rgba(255, 210, 80, .8), 0 1px 2px rgba(0, 0, 0, .6); }
@keyframes sdWin { 0%, 100% { box-shadow: 0 0 0 3px #fff3c4, 0 0 22px 4px rgba(255, 196, 40, .7), 0 12px 24px rgba(0, 0, 0, .4); } 50% { box-shadow: 0 0 0 3px #fff3c4, 0 0 34px 10px rgba(255, 196, 40, .95), 0 12px 24px rgba(0, 0, 0, .4); } }
@media (prefers-reduced-motion: reduce) { .sd-card.win { animation: none; } }
.sd-card:hover { filter: none; }
.sd-verdict { font-size: 15px; padding: 8px 20px; background: linear-gradient(135deg, #b8860b, #f0b43c 50%, #b8860b); color: #3a2400; box-shadow: 0 4px 12px rgba(240, 170, 40, .45); }
.sd-verdict::before { content: "🏆 "; }
.sd-row { padding: 18px 0 8px; }
.sd-win { white-space: nowrap; }   /* ป้าย 👑 ✓ ชนะ บรรทัดเดียว ไม่ทับรูป */

/* ศึกดาวเด่นอยู่เหนือแถบพลัง: ย่อลงเล็กน้อย */
.vs-duel .sd-card { max-width: 150px; padding: 10px 6px 8px; }
.vs-duel .sd-photo { width: 54px; height: 54px; }
.vs-duel .sd-val { font-size: 17px; }
.vs-duel .sd-name { font-size: 12px; }
.vs-duel .sd-cap { font-size: 15px; }
.vs-duel .sd-row { padding: 14px 0 6px; }
@media (min-width: 900px) { .vs-duel .sd-card { max-width: 124px; } }
@media (max-width: 560px) { .vs-duel .sd-photo { width: 46px; height: 46px; } .vs-duel .sd-val { font-size: 15px; } }

/* การ์ดดาวเด่นในสมุด (ชนะดวลค่าตัว → หนุนหน้าเต็งของทีมนั้น): ย่อส่วนจากการ์ดศึกดาวเด่น พื้นสีทีม ขอบทอง */
.fc.fc-star { --c: var(--ca); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 56px; min-height: 76px; padding: 4px 3px; border-radius: 8px; color: #fff; text-align: center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 55%, #000)); border: 2px solid #ffd24a; box-shadow: 0 0 8px rgba(255, 196, 40, .6), 0 2px 5px rgba(0, 0, 0, .3); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.fc.fc-star.away { --c: var(--cb); }
.fc-star small { font-size: 7.5px; font-weight: 900; letter-spacing: .03em; color: #ffe27a; }
.fc-star .fc-ph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff; }
.fc-star .fc-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--c); }
.fc-star img.fc-img { background: #fff; }
.fc-star strong { font-size: 11px; font-weight: 900; color: #ffe27a; line-height: 1.1; }
.fc-star em { max-width: 100%; font-style: normal; font-size: 8.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }/* การ์ดดาวเด่นในสมุด: ทรงไพ่ย่อส่วน (ทับสไตล์การ์ดวงกลมของสมุด) แบบเดียวกับ .nb .fc.fc-power */
.nb .fc.fc-star { width: 58px; height: 84px; margin-top: 0; padding: 4px 2px; border-radius: 8px; justify-content: space-between; gap: 1px; border: 2px solid #ffd24a; box-shadow: 0 0 8px rgba(255, 196, 40, .6), 0 3px 7px rgba(0, 0, 0, .3); }
.nb .fc.fc-star small, .nb .fc.fc-star em { display: block; }
.nb .fc.fc-star .fc-ph { width: 32px; height: 32px; }
.nb .fc.fc-star strong { font-size: 10.5px; white-space: nowrap; }
.nb .fc.fc-star em { font-size: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- ⚖️ สมดุลขนาดการ์ดหน้าแรก (details[data-static]): การ์ดพลัง รุก/กลาง/รับ ≈ การ์ดศึกดาวเด่น · การ์ดในสมุดใหญ่ขึ้น กระจายเต็มหน้า ---------- */
/* จอคอม: การ์ดพลัง 124 กว้าง ≈ การ์ดดาวเด่น 118 (ใบชนะขยาย ×1.1 ≈ 130) */
@media (min-width: 900px) {
  details[data-static] .vr-pc { width: 124px; min-height: 166px; flex: none; }
  details[data-static] .vr-pc .pc-ic { width: 52px; height: 52px; font-size: 28px; }
  details[data-static] .vr-pc .pc-v { font-size: 28px; }
  details[data-static] .vr-pc .pc-t small { font-size: 13px; }
  details[data-static] .vs-duel .sd-card { max-width: 118px; }
  details[data-static] .vs-duel .sd-photo { width: 58px; height: 58px; }
  details[data-static] .vs-duel .sd-val { font-size: 19px; }
}
/* การ์ดในสมุด: ใหญ่ขึ้น ระยะห่างมากขึ้น กระจายเต็มความกว้างหน้า */
details[data-static] .nb-cards { justify-content: space-evenly; gap: 14px 10px; padding: 10px 4px 6px; }
details[data-static] .nb .fc:is(.fc-power, .fc-star, .fc-plan, .fc-joker) { width: 70px; height: 98px; }   /* การ์ดทรงไพ่ */
details[data-static] .nb .fc:not(.fc-power, .fc-star, .fc-plan, .fc-joker) { width: 72px; height: 72px; }   /* การ์ดปัจจัยทรงกลม: กลมเท่าเดิม แค่ใหญ่ขึ้น */
details[data-static] .nb .fc .fc-ic, details[data-static] .nb .fc.fc-power .fc-ic { width: 32px; height: 32px; font-size: 18px; }
details[data-static] .nb .fc strong, details[data-static] .nb .fc.fc-power strong { font-size: 11px; }
details[data-static] .nb .fc small, details[data-static] .nb .fc.fc-power small { font-size: 8.5px; }
details[data-static] .nb .fc em, details[data-static] .nb .fc.fc-power em { font-size: 9px; }
details[data-static] .nb .fc.fc-star .fc-ph { width: 38px; height: 38px; }
details[data-static] .nb .fc.fc-star strong { font-size: 12px; }
/* มือถือ: การ์ดดาวเด่นเล็กลงให้ใกล้การ์ดพลังข้างโลโก้ · การ์ดพลังใหญ่ขึ้นเท่าที่ช่องให้ · การ์ดในสมุดขนาดกลาง */
@media (max-width: 560px) {
  details[data-static] .vs-duel .sd-card { max-width: 128px; }
  details[data-static] .vs-duel .sd-photo { width: 44px; height: 44px; }
  details[data-static] .vr-pc { min-height: 104px; }
  details[data-static] .vr-pc .pc-ic { width: 36px; height: 36px; font-size: 20px; }
  details[data-static] .vr-pc .pc-v { font-size: 20px; }
  details[data-static] .nb-cards { gap: 10px 6px; }
  details[data-static] .nb .fc:is(.fc-power, .fc-star, .fc-plan, .fc-joker) { width: 58px; height: 82px; }
  details[data-static] .nb .fc:not(.fc-power, .fc-star, .fc-plan, .fc-joker) { width: 60px; height: 60px; }
}
/* ---------- 🔮 ศึกดาวเด่น: ผ้าดูดวงกำมะหยี่ (เฉพาะส่วนนี้) — พื้นกำมะหยี่ม่วงแดงเข้ม ลายผ้าจาง ๆ กรอบทองสองชั้น ลายปักมุม ช่องวางไพ่ขอบทอง ---------- */
.vs-stars.vs-duel { position: relative; padding: 22px 26px 18px; border-radius: 20px; color: #f6e7c1; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 215, 140, .10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 0%, #5b1a4a, #3a0f35 45%, #1f0820 100%);
  border: 2px solid #c9a24a; box-shadow: inset 0 0 0 5px #2a0b26, inset 0 0 0 6px rgba(233, 196, 106, .7), inset 0 0 40px rgba(0, 0, 0, .55), 0 10px 26px rgba(40, 8, 36, .35); }
/* ลายปักทองที่ 4 มุม */
.vs-stars.vs-duel::before, .vs-stars.vs-duel::after { content: "❦"; position: absolute; top: 10px; font-size: 22px; line-height: 1; color: #e9c46a; opacity: .75; text-shadow: 0 0 6px rgba(233, 196, 106, .6); pointer-events: none; }
.vs-stars.vs-duel::before { left: 14px; transform: rotate(-90deg); }
.vs-stars.vs-duel::after { right: 14px; transform: scaleX(-1) rotate(-90deg); }
.vs-duel .sd-wrap { border-top: 0; padding-top: 0; }
.vs-duel .sd-cap { color: #ffd98a; text-shadow: 0 1px 0 #2a0b26, 0 0 12px rgba(255, 200, 100, .45); letter-spacing: .02em; }
.vs-duel .sd-cap small { color: rgba(246, 231, 193, .7); }
.vs-duel .sd-cap::after { content: ""; display: block; width: 160px; height: 8px; margin: 6px auto 0; background: radial-gradient(circle, #e9c46a 0 2px, transparent 3px) center / 12px 8px repeat-x; opacity: .7; }
/* ช่องวางไพ่ของแต่ละคู่ดวล: กรอบทองประ มุมมน พื้นกำมะหยี่เข้มกว่ารอบข้าง — ไพ่อยู่กึ่งกลางช่อง ไม่ชิดขอบ */
.vs-duel .sd-grid { max-width: 960px; margin: 0 auto; }
.vs-duel .sd-row { justify-content: center; gap: 0; margin: 0 auto; width: 100%; max-width: 320px; padding: 18px 14px 12px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12) 70%); border: 1.5px dashed rgba(233, 196, 106, .55); box-shadow: inset 0 0 18px rgba(0, 0, 0, .45); }
.vs-duel .sd-row .sd-card { width: 44%; }
.vs-duel .sd-row .sd-vs { box-shadow: 0 0 0 3px #e9c46a, 0 4px 12px rgba(0, 0, 0, .5); }
.vs-duel .sd-verdict { margin-top: 4px; }
@media (min-width: 900px) {
  .vs-duel .sd-grid { gap: 18px; }
  .vs-duel .sd-row { max-width: 290px; }
}
@media (max-width: 560px) {
  .vs-stars.vs-duel { padding: 18px 12px 14px; }
  .vs-duel .sd-row { max-width: 300px; padding: 16px 10px 10px; }
  .vs-duel .sd-row .sd-card { width: 46%; }
}/* ช่องวางไพ่กว้างขึ้นนิด ไพ่สองใบไม่บังกันมาก ชื่อไม่ถูกตัด */
.vs-duel .sd-row { max-width: 330px; }
.vs-duel .sd-row .sd-card { width: 47%; }
.vs-duel .sd-card.win { transform: rotate(0deg) scale(1.05) !important; }
.vs-duel .sd-card.home:not(.win) { transform: rotate(-6deg) translateX(3px) scale(.94); }
.vs-duel .sd-card.away:not(.win) { transform: rotate(6deg) translateX(-3px) scale(.94); }
@media (min-width: 900px) { .vs-duel .sd-row { max-width: 305px; padding: 18px 8px 12px; } }
/* ศึกดาวเด่น: พื้นกลืนกับการ์ดของคู่นั้น (การ์ดขาว = พื้นขาว · การ์ดเข้ม = พื้นเข้ม) เหลือแค่กรอบทองบาง ๆ + ช่องวางไพ่ — เรียบ ไม่เยอะ */
.vs-stars.vs-duel { background: transparent; box-shadow: none; border: 1.5px solid rgba(201, 162, 74, .7); padding: 18px 20px 14px; }
.vs-stars.vs-duel::before, .vs-stars.vs-duel::after { content: none; }
.vs-duel .sd-cap::after { display: none; }
.vs-duel .sd-row { background: transparent; box-shadow: none; border: 1.5px dashed rgba(201, 162, 74, .6); }
details.vs-drow.tone-b .vs-duel .sd-cap { color: var(--red-deep); text-shadow: none; }
details.vs-drow.tone-b .vs-duel .sd-cap small { color: var(--muted); }
details.vs-drow.tone-a .vs-duel .sd-cap { color: #ffd98a; text-shadow: none; }
details.vs-drow.tone-a .vs-duel .sd-cap small { color: rgba(255, 235, 215, .7); }/* การ์ดดาวเด่น: ผสมโทนเข้มลงพื้นเสมอ — ทีมที่สีเป็นขาว/เหลืองอ่อนตัวหนังสือขาวก็ยังอ่านออก */
.sd-card, .fc.fc-star { background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .22), transparent 65%), linear-gradient(165deg, color-mix(in srgb, var(--c) 48%, #2a1a30), color-mix(in srgb, var(--c) 30%, #000)); }/* ตัวหนังสือบนการ์ดดาวเด่น: เงาเข้มรอบตัว อ่านออกแม้พื้นเทาอ่อน (ทีมที่ได้สีรองเป็นขาว) */
.sd-card, .fc.fc-star { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .65); }

/* ---------- ⬟ การ์ดนักเตะทรง 5 เหลี่ยม (โล่ปลายแหลมล่าง) — ศึกดาวเด่น + การ์ดดาวเด่นในสมุด ----------
   พื้น/กรอบวาดด้วย ::before (ชั้นกรอบ) + ::after (ชั้นพื้นสีทีม) ตัดทรงด้วย clip-path · แสงเรือง/เงาใช้ drop-shadow ที่ตัวการ์ด จึงเดินตามทรง 5 เหลี่ยม */
.sd-card, .fc.fc-star { --pent: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); --frame: rgba(255, 255, 255, .75);
  isolation: isolate; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-bottom: 26px !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.sd-card::before, .fc.fc-star::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; border: 0; border-radius: 0; box-shadow: none; z-index: -2; clip-path: var(--pent); background: var(--frame); }
.sd-card::after, .fc.fc-star::after { content: ""; position: absolute; inset: 2px; width: auto; height: auto; margin: 0; transform: none; border: 0; border-radius: 0; box-shadow: none; z-index: -1; clip-path: var(--pent);
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .22), transparent 65%), linear-gradient(165deg, color-mix(in srgb, var(--c) 48%, #2a1a30), color-mix(in srgb, var(--c) 30%, #000)); }
.sd-card.win, .fc.fc-star { --frame: linear-gradient(160deg, #fff3c4, #f0b43c 45%, #b8860b); }
.sd-card.win::after { inset: 3px; }
.sd-card.win { filter: drop-shadow(0 0 10px rgba(255, 196, 40, .9)) drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); animation: none; }
.sd-card:not(.win) { filter: saturate(.6) brightness(.85) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.fc.fc-star { filter: drop-shadow(0 0 5px rgba(255, 196, 40, .7)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); padding-bottom: 16px !important; }
/* ขนาด: เล็กกว่าการ์ดแนวรุก/กลาง/รับ (124×166) เล็กน้อย */
@media (min-width: 900px) {
  details[data-static] .vs-duel .sd-card { max-width: 106px; aspect-ratio: 5 / 7.4; }
  details[data-static] .vs-duel .sd-photo { width: 52px; height: 52px; }
  details[data-static] .vs-duel .sd-val { font-size: 17px; }
  .vs-duel .sd-row { max-width: 270px; }
}
@media (max-width: 560px) { details[data-static] .vs-duel .sd-card { max-width: 116px; } }

/* ---------- 📺 ป้ายชื่อทีมแบบกราฟิกทีวี/ปกนิตยสาร (vr_side): โลโก้ใหญ่ขึ้น + แถบสีทีมเอียง ชื่อตัวหนาใหญ่ โลโก้ยักษ์จางเป็นพื้นหลัง ---------- */
.vr-logo .tb { width: 96px; height: 96px; }
.vr-logo img.tb { padding: 11px; }
.vr-logo .tb.tb-mono { font-size: 32px; }
.vr-side > .vr-name { --tc: var(--ca); position: relative; isolation: isolate; justify-self: stretch !important; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 60px; margin-top: 4px; padding: 8px 16px 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: normal; text-overflow: clip; color: #fff !important;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(100deg, color-mix(in srgb, var(--tc) 90%, #000), color-mix(in srgb, var(--tc) 50%, #000));
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: inset 0 -4px 0 #ffd24a, inset 0 2px 0 rgba(255, 255, 255, .35); }
.vr-side.away > .vr-name { --tc: var(--cb); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%); }
.vr-name > b { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-family: var(--font-head); font-size: calc(26px * var(--fk, 1)); font-weight: 700; line-height: 1.25; padding: 0 .12em; letter-spacing: .02em; text-transform: uppercase; font-style: italic;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 14px rgba(0, 0, 0, .5); }
.vr-name.nl-m > b { font-size: calc(21px * var(--fk, 1)); }
.vr-name.nl-s > b { font-size: calc(17px * var(--fk, 1)); }
.vr-name.nl-xs > b { font-size: calc(15px * var(--fk, 1)); }
.vr-name:is(.nl-s, .nl-xs) > b { -webkit-line-clamp: 3; }
.vr-wm { position: absolute; z-index: -1; top: 50%; right: -18px; transform: translateY(-50%) rotate(-12deg); opacity: .3; pointer-events: none; filter: saturate(1.2); }
.vr-side.away .vr-wm { right: auto; left: -18px; transform: translateY(-50%) rotate(12deg); }
.vr-side .vr-wm .tb { width: 118px !important; height: 118px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
.vr-side .vr-wm .tb img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) {
  .vr-logo .tb { width: 68px; height: 68px; }
  .vr-logo img.tb { padding: 8px; }
  .vr-side > .vr-name { min-height: 46px; padding: 6px 10px 8px; }
  .vr-name > b { font-size: calc(18px * var(--fk, 1)); }
  .vr-name.nl-m > b { font-size: calc(15px * var(--fk, 1)); }
  .vr-name.nl-s > b { font-size: calc(13px * var(--fk, 1)); }
  .vr-name.nl-xs > b { font-size: calc(12px * var(--fk, 1)); }
  .vr-side .vr-wm .tb { width: 84px !important; height: 84px !important; }
}

/* ---------- ⇆ จอคอม: โลโก้ชิดขอบนอก (เจ้าบ้านซ้ายสุด · ทีมเยือนขวาสุด) วางคู่กับป้ายชื่อบรรทัดเดียวกัน ใช้พื้นที่เต็ม
   สัดส่วน 3 ช่อง ทีม : กลาง : ทีม = 1.25 : 1.5 : 1.25 (เดิม 1 : 2 : 1 ช่องกลางกว้างเกิน ชื่อทีมอึดอัด) ---------- */
@media (min-width: 761px) {
  .vr-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.25fr); gap: 6px 12px; }
  .vr-top > .vr-side { grid-template-columns: auto minmax(0, 1fr); column-gap: 0; padding-left: 0; padding-right: 0; }
  .vr-top > .vr-side.away { grid-template-columns: minmax(0, 1fr) auto; }
  .vr-top > .vr-side > .vr-logo { grid-row: 1 / span 2; align-self: center; z-index: 2; }
  .vr-top > .vr-side > .vr-name { grid-row: 1 / span 2; align-self: center; min-height: 72px; }
  .vr-top > .vr-side.home > .vr-logo { grid-column: 1; justify-self: start; }
  .vr-top > .vr-side.home > .vr-name { grid-column: 2; margin-left: -30px; padding-left: 40px; padding-right: 18px; }
  .vr-top > .vr-side.away > .vr-logo { grid-column: 2; justify-self: end; }
  .vr-top > .vr-side.away > .vr-name { grid-column: 1; margin-right: -30px; padding-right: 40px; padding-left: 18px; }
  .vr-top > .vr-side > :is(.vr-role, .vr-fav, .vr-pcs) { grid-column: 1 / -1; }
  .vr-top > .vr-side .vr-logo .tb { width: 104px; height: 104px; }
  .vr-top > .vr-side .vr-logo img.tb { padding: 12px; }
}

/* ---------- 📺 แถบหัวแมตช์แบบสกอร์บาร์ถ่ายทอดสด: พาดเต็มความกว้างหลังโลโก้+ป้ายชื่อ สีทีมเจ้าบ้าน → เข้มกลาง → สีทีมเยือน ขอบทองบน-ล่าง ---------- */
@media (min-width: 761px) {
  .vr-top { position: relative; isolation: isolate; }
  .vr-top::before { content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; top: 22px; height: 84px; pointer-events: none;
    background:
      repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px),
      linear-gradient(90deg, color-mix(in srgb, var(--ca) 80%, #000) 0%, color-mix(in srgb, var(--ca) 35%, #16090f) 32%, #16090f 50%, color-mix(in srgb, var(--cb) 35%, #16090f) 68%, color-mix(in srgb, var(--cb) 80%, #000) 100%);
    border-top: 3px solid #ffd24a; border-bottom: 3px solid #ffd24a;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 8px 18px rgba(20, 5, 10, .35), inset 0 10px 18px rgba(255, 255, 255, .08); }
  details.vs-drow.has-joker .vr-top::before { right: 144px; }
  .vr-top > .vr-center { position: relative; z-index: 1; background: #fff; box-shadow: 0 6px 18px rgba(20, 5, 10, .18), inset 0 0 0 1px rgba(var(--ink-rgb), .06); }
  .vr-top > .vr-side > .vr-name { box-shadow: inset 0 -4px 0 #ffd24a, inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .2); }
}

/* ---------- 🎨 ทรงแถบหัวแมตช์ 6 แบบ (compare.php vs_head → .vr-top.hs-N) คู่ละแบบ ไม่เหลี่ยมซ้ำกันทั้งหน้า ----------
   hs-0 ตรง (แบบเดิม) · hs-1 เฉียงแรง · hs-2 มนแคปซูล · hs-3 หกเหลี่ยมปลายแหลม · hs-4 เอียงทั้งแถบ · hs-5 ริบบิ้นปลายบาก */
/* hs-1 เฉียงแรง: แถบเป็นสี่เหลี่ยมด้านขนาน ป้ายชื่อเฉียงมากขึ้น */
.vr-top.hs-1 > .vr-side > .vr-name { clip-path: polygon(26px 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.vr-top.hs-1 > .vr-side.away > .vr-name { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 26px 100%); }
/* hs-2 มนแคปซูล */
.vr-top.hs-2 > .vr-side > .vr-name { clip-path: none; border-radius: 999px; }
/* hs-3 หกเหลี่ยมปลายแหลม */
.vr-top.hs-3 > .vr-side > .vr-name { clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); }
/* hs-4 เอียงทั้งป้าย */
.vr-top.hs-4 > .vr-side > .vr-name { clip-path: none; border-radius: 6px; transform: rotate(-3deg); }
.vr-top.hs-4 > .vr-side.away > .vr-name { transform: rotate(3deg); }
/* hs-5 ริบบิ้นปลายบาก + มุมมน */
.vr-top.hs-5 > .vr-side > .vr-name { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%); border-radius: 4px; }
@media (min-width: 761px) {
  .vr-top.hs-1::before { left: 0; right: 0; clip-path: polygon(40px 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
  .vr-top.hs-2::before { left: 0; right: 0; border-radius: 999px; border: 3px solid #ffd24a; }
  .vr-top.hs-3::before { left: 0; right: 0; clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 34px 100%, 0 50%); }
  .vr-top.hs-4::before { transform: rotate(-1.6deg); border-radius: 10px; }
  .vr-top.hs-4 > .vr-side.away > .vr-name { transform: rotate(-3deg); }   /* แถบเอียงทางเดียวกัน ป้ายสองฝั่งเอียงตามแถบ */
  .vr-top.hs-5::before { left: -10px; right: -10px; clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%, 30px 50%); }
  details.vs-drow.has-joker .vr-top:is(.hs-1, .hs-2, .hs-3)::before { right: 150px; }
  /* ป้ายชื่อที่ทรงไม่ใช่เฉียงซ้าย: ให้ข้อความอยู่กลางพ้นโลโก้ที่ทับหัวป้าย */
  .vr-top:is(.hs-2, .hs-3, .hs-5) > .vr-side.home > .vr-name { padding-left: 44px; }
  .vr-top:is(.hs-2, .hs-3, .hs-5) > .vr-side.away > .vr-name { padding-right: 44px; }
}

/* ---------- ✨ ลูกเล่นตัวอักษรชื่อทีม 10 แบบ (.vr-top.nt-N สุ่มคงที่ตามแมตช์ แยกจากทรงแถบ hs-N) ----------
   --fk = ตัวคูณขนาดตัวอักษร (ฟอนต์แคบอย่าง Anton/Bebas/Teko ใหญ่ขึ้นได้) · ตัวไล่สีใช้ drop-shadow แทน text-shadow (พื้นตัวอักษรโปร่ง) */
/* nt-1 Anton สูงแคบ ไล่สีทอง */
.vr-top.nt-1 .vr-name > b { --fk: 1.12; font-family: "Anton", var(--font-head); font-weight: 400; font-style: normal; letter-spacing: .03em;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 45%, #c8870f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
/* nt-2 Bebas ห่างๆ + เงาซ้อนสามมิติสีทอง */
.vr-top.nt-2 .vr-name > b { --fk: 1.25; font-family: "Bebas Neue", var(--font-head); font-weight: 400; font-style: normal; letter-spacing: .12em;
  text-shadow: 2px 2px 0 #ffd24a, 4px 4px 0 rgba(0, 0, 0, .55); }
/* nt-3 Russo One ตัวโปร่งเส้นขอบขาว + เรืองแสง */
.vr-top.nt-3 .vr-name > b { --fk: .95; font-family: "Russo One", var(--font-head); font-weight: 400; font-style: normal; color: transparent;
  -webkit-text-stroke: 1.4px #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 210, 74, .45); }
/* nt-4 Bungee โครเมียมเงิน */
.vr-top.nt-4 .vr-name > b { --fk: .9; font-family: "Bungee", var(--font-head); font-weight: 400; font-style: normal;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ee 40%, #8d99a8 52%, #f4f7fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .7)); }
/* nt-5 Teko นีออน กระพริบเบาๆ */
.vr-top.nt-5 .vr-name > b { --fk: 1.3; font-family: "Teko", var(--font-head); font-weight: 700; font-style: normal; letter-spacing: .06em; line-height: 1.05; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px #ffd24a, 0 0 24px #ff8a3d; animation: ntNeon 3.5s ease-in-out infinite; }
@keyframes ntNeon { 0%, 46%, 50%, 54%, 100% { opacity: 1; } 48% { opacity: .55; } 52% { opacity: .7; } }
/* nt-6 Black Ops One ตัวพ่นสเตนซิล เอียงนิด */
.vr-top.nt-6 .vr-name > b { --fk: .95; font-family: "Black Ops One", var(--font-head); font-weight: 400; font-style: normal; letter-spacing: .04em; transform: rotate(-2deg); color: #fff7e0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
/* nt-7 Racing Sans ตัวเอียงแข่งรถ + เส้นความเร็วหลังชื่อ */
.vr-top.nt-7 .vr-name > b { --fk: 1.1; font-family: "Racing Sans One", var(--font-head); font-weight: 400; letter-spacing: .02em; text-shadow: 3px 0 0 rgba(255, 210, 74, .8), 0 2px 0 rgba(0, 0, 0, .5); }
.vr-top.nt-7 .vr-name::after { content: ""; position: absolute; z-index: 0; inset: 30% 8%; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 7px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
/* nt-8 Audiowide ล้ำอนาคต ขีดทองใต้ชื่อ */
.vr-top.nt-8 .vr-name > b { --fk: .85; font-family: "Audiowide", var(--font-head); font-weight: 400; font-style: normal; letter-spacing: .06em;
  padding-bottom: 4px; background: linear-gradient(90deg, transparent, #ffd24a, transparent) bottom / 100% 2px no-repeat; }
/* nt-9 Anton ขาวตัดขอบดำหนา เงาสีทีม แบบโปสเตอร์ */
.vr-top.nt-9 .vr-name > b { --fk: 1.15; font-family: "Anton", var(--font-head); font-weight: 400; font-style: normal; letter-spacing: .05em; color: #fff;
  -webkit-text-stroke: 1px #1a0a10; paint-order: stroke fill; text-shadow: 3px 3px 0 color-mix(in srgb, var(--ca) 70%, #000); }
.vr-top.nt-9 > .vr-side.away .vr-name > b { text-shadow: 3px 3px 0 color-mix(in srgb, var(--cb) 70%, #000); }

/* แสงวาบวิ่งผ่านป้ายชื่อ (แบบคี่ nt-1/3/5/7/9) */
.vr-top:is(.nt-1, .nt-3, .nt-5, .nt-7, .nt-9) .vr-name::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: ntShine 4.5s ease-in-out infinite; }
.vr-top > .vr-side.away .vr-name::before { animation-delay: -2.2s; }
@keyframes ntShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }

/* ทรงแถบเพิ่ม: hs-6 ลูกศรชี้เข้ากลาง · hs-7 มุมมนสลับ + แถบคู่บาง */
.vr-top.hs-6 > .vr-side.home > .vr-name { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.vr-top.hs-6 > .vr-side.away > .vr-name { clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); }
.vr-top.hs-7 > .vr-side > .vr-name { clip-path: none; border-radius: 18px 0 18px 0; }
.vr-top.hs-7 > .vr-side.away > .vr-name { border-radius: 0 18px 0 18px; }
@media (min-width: 761px) {
  .vr-top.hs-6::before { left: 0; right: 0; clip-path: polygon(0 0, 44% 0, 50% 50%, 56% 0, 100% 0, 100% 100%, 56% 100%, 50% 50%, 44% 100%, 0 100%); }
  .vr-top.hs-7::before { border: 0; box-shadow: none; background:
      linear-gradient(90deg, color-mix(in srgb, var(--ca) 85%, #000), #16090f 50%, color-mix(in srgb, var(--cb) 85%, #000)) top / 100% 30px no-repeat,
      linear-gradient(90deg, color-mix(in srgb, var(--ca) 85%, #000), #16090f 50%, color-mix(in srgb, var(--cb) 85%, #000)) bottom / 100% 30px no-repeat,
      linear-gradient(#ffd24a, #ffd24a) center / 100% 3px no-repeat; }
  /* แสงวิ่งผ่านแถบหัวทั้งแถบ (แบบคู่ hs-0/2/4/6) */
  .vr-top:is(.hs-0, .hs-2, .hs-4, .hs-6)::after { content: ""; position: absolute; z-index: -1; top: 22px; height: 84px; left: 0; width: 18%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); animation: hsSweep 7s linear infinite; }
  @keyframes hsSweep { 0% { left: -20%; } 60%, 100% { left: 105%; } }
}
@media (prefers-reduced-motion: reduce) { .vr-top .vr-name::before, .vr-top::after, .vr-top.nt-5 .vr-name > b { animation: none !important; } }

/* ---------- 🖐 ชี้เมาส์แล้ว "ยก" ขึ้นมาดู: โลโก้ทีมบนหัวแมตช์ + ไพ่ศึกดาวเด่น (ใบไหนก็ได้ ขึ้นมาอยู่บนสุด ตั้งตรง ขยาย สีเต็ม) ---------- */
.vr-side .vr-logo { transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), filter .2s; }
.vr-side .vr-logo:hover { z-index: 6; transform: translateY(-8px) scale(1.18); filter: drop-shadow(0 12px 16px rgba(20, 5, 10, .45)); }
.sd-card { transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), filter .2s; }
.sd-row .sd-card:hover, .vs-duel .sd-row .sd-card:hover { z-index: 10 !important; transform: translateY(-12px) rotate(0deg) scale(1.2) !important;
  filter: drop-shadow(0 0 10px rgba(255, 196, 40, .8)) drop-shadow(0 16px 20px rgba(0, 0, 0, .45)) !important; }
.sd-row:has(.sd-card:hover) .sd-vs { opacity: .25; transition: opacity .2s; }   /* ป้าย VS ตรงกลางจางลง ไม่บังไพ่ที่ยกขึ้นมา */
.nb .fc.fc-star:hover { z-index: 6; transform: translateY(-8px) rotate(0) scale(1.25); }

/* ---------- 🎫 การ์ด "ดูรายละเอียดคู่นี้" (index.php vs_row → a.vr-go ก่อน details) ----------
   วางกลาง ทับขอบบนของการ์ดแมตช์ ยื่นขึ้นด้านบนนิดหน่อย เอียงนิดเหมือนตั๋ว · ชี้เมาส์ = ยกขึ้น ลูกศรพุ่งไปข้างหน้า = กดแล้วไปหน้าอื่น */
.vs-rows > .vr-go { align-self: center; position: relative; z-index: 6; margin: 8px 0 -40px; }
.vs-rows > .vr-go + details.vs-drow.has-joker { margin-top: 0; }
.vs-rows > .vr-go + details.vs-drow > summary.vs-row { padding-top: 40px; }
.vr-go { --gc: #ffd24a; display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; border-radius: 14px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(120deg, #3a0d1c, #8c1c2c 55%, #d23a44);
  border: 2px solid var(--gc); box-shadow: 0 0 0 3px rgba(255, 210, 74, .25), 0 10px 22px rgba(60, 10, 20, .4);
  transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; overflow: hidden; isolation: isolate; }
/* รูเจาะขอบตั๋วซ้าย-ขวา */
.vr-go::before, .vr-go::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gc); z-index: 2; }
.vr-go::before { left: -9px; }
.vr-go::after { right: -9px; }
.vr-go-logos { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.vr-go-logos .tb { width: 28px; height: 28px; }
.vr-go-logos i { font-style: italic; font-weight: 900; font-size: 11px; color: #b4202e; }
.vr-go-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vr-go-txt b { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); white-space: nowrap; }
.vr-go-txt small { font-size: 11px; font-weight: 600; color: rgba(255, 240, 225, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-go-arrow { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; color: #3a0d1c;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f0b43c); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .25s; }
/* แสงวาบวิ่งผ่านตั๋วเป็นระยะ */
.vr-go-txt::after { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 -30%; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: goShine 5s ease-in-out infinite; }
@keyframes goShine { 0%, 70% { left: -30%; } 100% { left: 120%; } }
.vr-go:hover { transform: translateY(-4px) rotate(0deg) scale(1.05); box-shadow: 0 0 0 4px rgba(255, 210, 74, .45), 0 16px 30px rgba(60, 10, 20, .5); }
.vr-go:hover .vr-go-arrow { transform: translateX(5px); animation: goNudge .7s ease-in-out infinite; }
@keyframes goNudge { 0%, 100% { transform: translateX(3px); } 50% { transform: translateX(8px); } }
.vr-go:active { transform: translateY(-1px) scale(.98); }
@media (max-width: 560px) {
  .vr-go { gap: 8px; padding: 6px 8px 6px 12px; }
  .vr-go-logos .tb { width: 22px; height: 22px; }
  .vr-go-txt b { font-size: 14px; }
  .vr-go-txt small { font-size: 9.5px; }
  .vr-go-arrow { width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .vr-go-txt::after, .vr-go:hover .vr-go-arrow { animation: none; } }

/* การ์ดดูรายละเอียด: คำน้อย ตัวใหญ่ เด่นด้วยเอฟเฟกต์ — ขอบเรืองแสงเต้นเป็นจังหวะ + โลโก้ใหญ่ขึ้น + ลูกศรใหญ่ */
.vr-go { gap: 14px; padding: 8px 10px 8px 12px; animation: goPulse 2.4s ease-in-out infinite; }
@keyframes goPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 210, 74, .25), 0 10px 22px rgba(60, 10, 20, .4); } 50% { box-shadow: 0 0 0 6px rgba(255, 210, 74, .45), 0 0 26px rgba(255, 190, 60, .65), 0 10px 22px rgba(60, 10, 20, .4); } }
.vr-go:hover { animation: none; }
.vr-go-logos .tb { width: 34px; height: 34px; }
.vr-go-txt b { font-size: 24px; letter-spacing: .01em; }
.vr-go-arrow { width: 42px; height: 42px; font-size: 22px; }
@media (max-width: 560px) {
  .vr-go-logos .tb { width: 26px; height: 26px; }
  .vr-go-txt b { font-size: 18px; }
  .vr-go-arrow { width: 32px; height: 32px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vr-go { animation: none; } }

/* ---------- 📜 หน้ารายละเอียด (match.php) ให้หน้าตาเข้าชุดกับหน้าแรก ----------
   บทสรุปคัมภีร์ (md_summary) · หัวข้อส่วนแบบแถบถ่ายทอดสด · การ์ดกราฟขอบทองมีแถบสีทีม · แก้สีทีมอ่อน (ขาว/เทา) ที่กลืนพื้น */
.md-sum { position: relative; margin: 18px 0 8px; padding: 16px 18px 18px; border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--ca) 45%, transparent), transparent 60%), radial-gradient(80% 140% at 100% 100%, color-mix(in srgb, var(--cb) 45%, transparent), transparent 60%), linear-gradient(135deg, #1c0a12, #3a0d1c 50%, #1c0a12);
  border: 2px solid #ffd24a; box-shadow: 0 0 0 4px rgba(255, 210, 74, .18), 0 14px 30px rgba(40, 5, 12, .35); }
.md-sum::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 16px); }
.mds-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.mds-h span { font-family: "Sriracha", var(--font-head); font-size: 24px; font-weight: 400; color: #ffe08a; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.mds-h small { font-size: 12px; font-weight: 700; color: rgba(255, 235, 215, .7); }
.mds-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mds-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 14px; text-align: center; min-width: 0;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); animation: mdsIn .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 80ms);
  transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), background .2s; }
.mds-t:hover { transform: translateY(-5px) scale(1.04); background: rgba(255, 255, 255, .12); }
@keyframes mdsIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.mds-ic { font-size: 26px; line-height: 1.1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.mds-t small { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: rgba(255, 235, 215, .72); }
.mds-t b { max-width: 100%; font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.mds-t em { font-style: normal; font-size: 11.5px; font-weight: 700; color: rgba(255, 235, 215, .8); overflow-wrap: anywhere; }
.mds-t.hot { background: linear-gradient(160deg, rgba(255, 210, 74, .28), rgba(255, 210, 74, .08)); border-color: #ffd24a; box-shadow: 0 0 16px rgba(255, 196, 40, .35); }
.mds-t.hot b { color: #ffe08a; }
.mds-t.zero { background: linear-gradient(160deg, #38bdf8, #0284c7); border-color: #bfe8ff; }
.mds-t.dim { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .mds-t { animation: none; } }

/* หัวข้อส่วน (กราฟวิเคราะห์ / เจาะลึก): แถบเฉียงสีทีมแบบกราฟิกถ่ายทอดสด */
.md-sec[style] { position: relative; align-items: center; gap: 4px 12px; margin: 26px 0 12px; padding: 10px 22px 10px 18px; color: #fff; isolation: isolate; }
.md-sec[style]::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px), linear-gradient(90deg, color-mix(in srgb, var(--ca) 80%, #000), #1c0a12 55%, color-mix(in srgb, var(--cb) 70%, #000));
  box-shadow: inset 0 -3px 0 #ffd24a; }
.md-sec[style] small { color: rgba(255, 235, 215, .8); }

/* การ์ดกราฟ: แถบสีทีมบนหัว + ขอบทองบาง + ยกขึ้นเมื่อชี้ */
.md-charts .md-c { position: relative; overflow: hidden; border: 1.5px solid rgba(201, 162, 74, .55); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), box-shadow .22s; }
.md-charts .md-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ca), #ffd24a 50%, var(--cb)); }
.md-charts .md-c:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(60, 10, 20, .14); }
.md-charts .md-c h3 { font-family: var(--font-head); font-weight: 600; }

/* สีทีมอ่อน (ขาว/เทาอ่อน) กลืนพื้นขาว: ป้ายแผน/จำนวนในโซน ใส่เส้นขอบ + เงาตัวอักษร */
.pz-style span, .pz-count span { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .22); text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }
.pz-style span, .pz-count span { background: color-mix(in srgb, var(--ca) 72%, #2a2233); }
.pz-style.away span, .pz-count span.a { background: color-mix(in srgb, var(--cb) 72%, #2a2233); }
.pz-row.w-home .pz-verdict { color: color-mix(in srgb, var(--ca) 55%, #1a1024); }
.pz-row.w-away .pz-verdict { color: color-mix(in srgb, var(--cb) 55%, #1a1024); }

/* =====================================================================
   🏮 หน้าคัมภีร์ (match.php · main.match-detail.cn) — ธีมจีนโบราณแดงเข้ม (ต่อยอดจากคัมภีร์ตะวันออกใน guide.php)
   พื้นแลกเกอร์แดงดำ + ลายเมฆมงคลทอง · การ์ดกราฟ = กระดาษข้าว กรอบแดงชาด+ทอง ลายวงกตหัวการ์ด มุมกรอบทอง
   หัวข้อ = ป้ายไม้แขวนแลกเกอร์ขอบทอง ฟอนต์ Chonburi · บทสรุป = ไพ่แลกเกอร์ขอบทอง ตราประทับ "เด่น"
   ===================================================================== */
body:has(main.match-detail.cn) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23d4a441' stroke-opacity='.13' stroke-width='1.6'%3E%3Cpath d='M10 40c0-10 12-14 18-6 2-10 18-10 20 0 8-4 16 2 12 10H10z'/%3E%3Cpath d='M70 22c0-8 10-11 14-5 2-8 14-8 16 0 6-3 12 2 9 8H70z'/%3E%3Cpath d='M22 40c2-4 6-5 9-2M40 40c2-5 8-6 11-2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px,
    radial-gradient(90% 60% at 50% 0%, rgba(200, 30, 30, .4), transparent 70%),
    linear-gradient(180deg, #2a0707, #1a0404 50%, #0f0202);
  background-attachment: fixed;
}
main.match-detail.cn { --cn-red: #a4161a; --cn-deep: #5c0508; --cn-gold: #d4a441; --cn-gold2: #ffe08a; --cn-paper: #f8edd3; }

/* ทางลัดด้านบน: แผ่นกระดาษข้าวขอบแดง */
.match-detail.cn .md-nav .crumbs, .match-detail.cn .md-nav .crumbs a, .match-detail.cn .md-nav .crumbs i { color: #f6d9a8; }
.match-detail.cn .md-nav .crumbs b { color: var(--cn-gold2); }
.match-detail.cn .md-quick a, .match-detail.cn .md-step > * { background: linear-gradient(160deg, #3d0508, #22030a); color: #fbe7c0; border: 1.5px solid var(--cn-gold); box-shadow: inset 0 0 0 3px #3d0508, inset 0 0 0 4px rgba(212, 164, 65, .45); }
.match-detail.cn .md-step small, .match-detail.cn .md-step span { color: #f6d9a8; }
.match-detail.cn .md-step b { color: var(--cn-gold2); }
.match-detail.cn .md-title { color: #fbe7c0; }
.match-detail.cn .md-title .md-lg { font-family: "Chonburi", var(--font-head); font-size: 20px; color: var(--cn-gold2); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.match-detail.cn .md-title .md-when, .match-detail.cn .md-title .md-score { color: #f6d9a8; }

/* การ์ดหัวแมตช์: กรอบทองซ้อนสองชั้นแบบกรอบภาพจีน */
.match-detail.cn details.md-hero { border: 0; box-shadow: 0 0 0 2px var(--cn-gold), 0 0 0 6px var(--cn-deep), 0 0 0 8px var(--cn-gold), 0 20px 40px rgba(0, 0, 0, .55); }

/* ---- 📜 บทสรุปคัมภีร์: แผ่นแลกเกอร์ ขอบทองสองชั้น มุมทอง ไพ่แต่ละช่องเป็นไพ่แลกเกอร์ ---- */
.match-detail.cn .md-sum { margin: 26px 0 10px; padding: 20px 22px 22px; border-radius: 6px; border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23d4a441' stroke-opacity='.16' stroke-width='1.6'%3E%3Cpath d='M10 40c0-10 12-14 18-6 2-10 18-10 20 0 8-4 16 2 12 10H10z'/%3E%3Cpath d='M70 22c0-8 10-11 14-5 2-8 14-8 16 0 6-3 12 2 9 8H70z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 200px 100px,
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--ca) 35%, transparent), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--cb) 35%, transparent), transparent 60%),
    linear-gradient(160deg, #4a060b, #2a0307 60%, #1a0204);
  box-shadow: 0 0 0 2px var(--cn-gold), 0 0 0 6px var(--cn-deep), 0 0 0 8px var(--cn-gold), 0 20px 40px rgba(0, 0, 0, .55); }
.match-detail.cn .md-sum::before { inset: 8px; border: 1px solid rgba(212, 164, 65, .45); background: none; pointer-events: none; }
.match-detail.cn .md-sum::after { content: "卷"; position: absolute; right: 18px; top: 10px; font-family: "Ma Shan Zheng", "Chonburi", serif; font-size: 64px; line-height: 1; color: rgba(212, 164, 65, .14); pointer-events: none; }
.match-detail.cn .mds-h span { font-family: "Chonburi", var(--font-head); font-size: 26px; color: var(--cn-gold2); letter-spacing: .02em; }
.match-detail.cn .mds-h small { color: #f6d9a8; }
.match-detail.cn .mds-tiles { gap: 14px; perspective: 800px; }
.match-detail.cn .mds-t { padding: 16px 10px 12px; border-radius: 6px; background: linear-gradient(170deg, #5c0a10, #2e0408); border: 1.5px solid var(--cn-gold);
  box-shadow: inset 0 0 0 3px #2e0408, inset 0 0 0 4px rgba(212, 164, 65, .45), 0 8px 16px rgba(0, 0, 0, .45); overflow: hidden; }
.match-detail.cn .mds-t::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 224, 138, .28), transparent); transform: skewX(-20deg); transition: left .6s; }
.match-detail.cn .mds-t:hover::before { left: 130%; }
.match-detail.cn .mds-t:hover { transform: translateY(-8px) rotateX(6deg) scale(1.05); box-shadow: inset 0 0 0 3px #2e0408, inset 0 0 0 4px rgba(212, 164, 65, .7), 0 0 22px rgba(255, 196, 40, .45), 0 16px 26px rgba(0, 0, 0, .55); }
.match-detail.cn .mds-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d4a441 60%, #8a5a12); box-shadow: 0 0 0 2px #2e0408, 0 0 0 3px var(--cn-gold), 0 4px 8px rgba(0, 0, 0, .5); }
.match-detail.cn .mds-t small { color: #f6d9a8; }
.match-detail.cn .mds-t b { font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 18px; color: #fff3dc; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.match-detail.cn .mds-t em { color: #f0c98a; }
.match-detail.cn .mds-t.hot { background: linear-gradient(170deg, #8c1016, #4a060b); border-color: var(--cn-gold2); }
.match-detail.cn .mds-t.hot b { color: var(--cn-gold2); }
/* ตราประทับ "เด่น" มุมขวาบนของไพ่ที่มีน้ำหนักมาก */
.match-detail.cn .mds-t.hot::after { content: "เด่น"; position: absolute; top: 8px; right: -2px; padding: 2px 8px; font-family: "Chonburi", serif; font-size: 11px; color: #fff3dc;
  background: #c1121f; border: 1.5px solid #ffd7a0; border-radius: 3px; transform: rotate(12deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.match-detail.cn .mds-t.zero { background: linear-gradient(170deg, #0e4f7a, #07263d); border-color: #7dd3fc; }

/* ---- 🪧 หัวข้อส่วน: ป้ายไม้แขวน แลกเกอร์แดง ขอบทองสองชั้น ห้อยพู่ ---- */
.match-detail.cn .md-sec[style] { justify-content: center; width: fit-content; max-width: 100%; margin: 34px auto 16px; padding: 12px 34px; border-radius: 4px; }
.match-detail.cn .md-sec[style]::before { clip-path: none; border-radius: 4px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), linear-gradient(160deg, #8c1016, #4a060b);
  box-shadow: 0 0 0 2px var(--cn-gold), 0 0 0 5px var(--cn-deep), 0 0 0 7px var(--cn-gold), 0 10px 20px rgba(0, 0, 0, .5); }
.match-detail.cn .md-sec[style]::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 10px; height: 24px; margin-left: -5px;
  background: linear-gradient(180deg, var(--cn-gold) 0 4px, #c1121f 4px); border-radius: 0 0 5px 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); animation: cnSway 3s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes cnSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.match-detail.cn .md-sec[style] { font-family: "Chonburi", var(--font-head); font-size: 24px; color: var(--cn-gold2); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.match-detail.cn .md-sec[style] small { font-family: var(--font-head); color: #f6d9a8; }

/* ---- 📄 การ์ดกราฟ: กระดาษข้าว กรอบแดงชาด+ทอง แถบลายวงกตบนหัว มุมทอง ---- */
.match-detail.cn .md-charts { gap: 20px; }
.match-detail.cn .md-charts .md-c { padding: 30px 20px 18px; border-radius: 4px; border: 0; color: #2b1a0a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h20v20H6V6h12v12H10v-8h4v4' fill='none' stroke='%23a4161a' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x,
    repeating-linear-gradient(90deg, rgba(120, 80, 30, .035) 0 1px, transparent 1px 6px),
    radial-gradient(130% 90% at 30% 20%, #fbf3df, #f1e0b8 70%, #e8d09c);
  box-shadow: 0 0 0 2px var(--cn-red), 0 0 0 5px #e8d2a0, 0 0 0 7px var(--cn-deep), 0 14px 28px rgba(0, 0, 0, .5); }
.match-detail.cn .md-charts .md-c::before { top: 16px; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, transparent, var(--cn-gold), transparent); }
/* มุมทองสี่มุม */
.match-detail.cn .md-charts .md-c::after { content: ""; position: absolute; inset: 6px; pointer-events: none;
  background:
    linear-gradient(var(--cn-gold), var(--cn-gold)) 0 0 / 14px 2px no-repeat, linear-gradient(var(--cn-gold), var(--cn-gold)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--cn-gold), var(--cn-gold)) 100% 0 / 14px 2px no-repeat, linear-gradient(var(--cn-gold), var(--cn-gold)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--cn-gold), var(--cn-gold)) 0 100% / 14px 2px no-repeat, linear-gradient(var(--cn-gold), var(--cn-gold)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--cn-gold), var(--cn-gold)) 100% 100% / 14px 2px no-repeat, linear-gradient(var(--cn-gold), var(--cn-gold)) 100% 100% / 2px 14px no-repeat; }
.match-detail.cn .md-charts .md-c:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--cn-red), 0 0 0 5px #f3dfae, 0 0 0 7px var(--cn-deep), 0 0 26px rgba(255, 196, 40, .35), 0 20px 34px rgba(0, 0, 0, .55); }
.match-detail.cn .md-charts .md-c h3 { font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 18px; color: var(--cn-deep); }
.match-detail.cn .md-charts .md-c h3 small { font-family: var(--font-head); color: #7a5a3a; }
.match-detail.cn .md-charts .md-c h3 span { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }

/* แถบพลังในการ์ดหัว: กระดาษข้าว กรอบแดงชาด+ทอง (เดิมขาวเรียบ) */
.match-detail.cn .vs-stars.vs-band { border: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(120, 80, 30, .035) 0 1px, transparent 1px 6px), radial-gradient(130% 90% at 30% 20%, #fbf3df, #f1e0b8 70%, #e8d09c);
  box-shadow: 0 0 0 2px var(--cn-red), 0 0 0 5px #e8d2a0, 0 0 0 7px var(--cn-deep), 0 12px 24px rgba(0, 0, 0, .45); }
/* ---- 🔎 เจาะลึก: การ์ดใหญ่ใส่กรอบภาพจีน ---- */
.match-detail.cn .fo { box-shadow: 0 0 0 2px var(--cn-gold), 0 0 0 6px var(--cn-deep), 0 0 0 8px var(--cn-gold), 0 20px 40px rgba(0, 0, 0, .55); border: 0; }

/* ---- คู่อื่นในลีก + ข้อมูลดิบ: แผ่นกระดาษข้าว ---- */
.match-detail.cn .md-same h2 { font-family: "Chonburi", var(--font-head); font-weight: 400; color: var(--cn-gold2); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.match-detail.cn .md-same h2 small { color: #f6d9a8; }
.match-detail.cn .md-same-list a { background: radial-gradient(130% 90% at 30% 20%, #fbf3df, #efdcb0); border: 0; box-shadow: 0 0 0 1.5px var(--cn-red), 0 0 0 4px #e8d2a0, 0 8px 16px rgba(0, 0, 0, .4);
  transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.match-detail.cn .md-same-list a:hover { transform: translateY(-4px) rotate(-.6deg); }
.match-detail.cn .md-raw { background: radial-gradient(130% 90% at 30% 20%, #fbf3df, #efdcb0); box-shadow: 0 0 0 2px var(--cn-red), 0 0 0 5px #e8d2a0; border: 0; }
.match-detail.cn > .empty-note { color: #fbe7c0; }
@media (prefers-reduced-motion: reduce) { .match-detail.cn .md-sec[style]::after { animation: none; } }
@media (max-width: 560px) {
  .match-detail.cn .md-sec[style] { font-size: 19px; padding: 10px 20px; }
  .match-detail.cn .mds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ⚔ สนามแผนการเล่น: เส้นคู่ปะทะชัดขึ้น + ป้าย ⚔ กลางเส้น (ใครสู้ใคร) ---------- */
.pitch-links { z-index: 1; }
.mline { stroke-width: 3; stroke-dasharray: 6 4; animation: mlineIn .5s ease forwards, mlineRun 1.4s linear infinite; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)); }
@keyframes mlineIn { 0% { opacity: 0; } 100% { opacity: .85; } }
@keyframes mlineRun { to { stroke-dashoffset: -20; } }
.mclash { position: absolute; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; font-size: 11px; line-height: 1; color: #fff;
  background: var(--ca); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .4); cursor: help; pointer-events: auto; animation: mclashIn .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.mclash.fav-away { background: var(--cb); }
.mclash { background: color-mix(in srgb, var(--ca) 75%, #2a2233); }
.mclash.fav-away { background: color-mix(in srgb, var(--cb) 75%, #2a2233); }
.mline.fav-home { stroke: color-mix(in srgb, var(--ca) 80%, #2a2233); }
.mline.fav-away { stroke: color-mix(in srgb, var(--cb) 80%, #2a2233); }
.mclash.big { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 13px; box-shadow: 0 0 0 2px #ffd24a, 0 0 10px rgba(255, 196, 40, .8), 0 2px 6px rgba(0, 0, 0, .4); }
.mclash:hover { transform: scale(1.4); z-index: 6; }
@keyframes mclashIn { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .mline { animation: mlineIn .5s ease forwards; } .mclash { animation: none; } }

/* ---------- 📐 สนามแผนการเล่น: เล็กลง ~20% อยู่กลาง (จอคอม) + ชั้นเส้น "บทบาทในทีม" ---------- */
@media (min-width: 761px) {
  .pitch-wrap > :is(.pitch-heads, .pz-labels, .pitch, .pitch-tools) { width: 80%; margin-left: auto; margin-right: auto; }
}
.pitch-tools { display: flex; justify-content: center; gap: 8px; }
.pt-btn { padding: 5px 14px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--muted); background: rgba(var(--ink-rgb), .06); border: 1.5px solid rgba(var(--ink-rgb), .15); transition: all .15s; }
.pt-btn.on { color: #fff; background: linear-gradient(135deg, #8c1016, #4a060b); border-color: #d4a441; box-shadow: 0 2px 8px rgba(60, 10, 20, .3); }
.pitch.hide-duel :is(.mline, .mclash) { display: none; }
.pitch.hide-tac-home :is(.tline, .mtac).home, .pitch.hide-tac-away :is(.tline, .mtac).away { display: none; }

.pt-btn.home.on { background: color-mix(in srgb, var(--ca) 80%, #2a2233); }

.pt-btn.away.on { background: color-mix(in srgb, var(--cb) 80%, #2a2233); }

/* ดูบทบาททีมเดียว: อีกทีมจางลง จะได้เห็นโครงทีมที่เลือกชัด */

.pitch.hide-tac-away:not(.hide-tac-home) .pp.away:not(:hover), .pitch.hide-tac-home:not(.hide-tac-away) .pp.home:not(:hover) { opacity: .55; }
/* เส้นบทบาท: ทึบ สีทีม (ต่างจากเส้นประ ⚔) · กองกลางลงช่วย = เส้นจุด · ป้ายบทบาทเม็ดยาสีทีม */
.tline { stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; animation: mlineIn .5s ease both; }
.tline.home { stroke: color-mix(in srgb, var(--ca) 80%, #2a2233); }
.tline.away { stroke: color-mix(in srgb, var(--cb) 80%, #2a2233); }
.tline.k-drop { stroke-dasharray: 1 5; stroke-width: 3.5; }
.tline.k-link { opacity: .6; }
.mtac { position: absolute; z-index: 3; pointer-events: none; }
.mtac-tip { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ca) 80%, #2a2233); animation: tacPing 1.6s ease-out infinite; }
.mtac-tip.away { box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--cb) 80%, #2a2233); }
@keyframes tacPing { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(.7); } }
.mtac-lb { transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; color: #fff; pointer-events: auto; cursor: help;
  background: color-mix(in srgb, var(--ca) 80%, #2a2233); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 2px 5px rgba(0, 0, 0, .3); animation: mclashIn .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.mtac-lb.away { background: color-mix(in srgb, var(--cb) 80%, #2a2233); }
.mtac-lb:hover { z-index: 7; transform: translate(-50%, -50%) scale(1.25); }
@media (max-width: 700px) { .mtac-lb { font-size: 8px; padding: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .mtac-tip, .mtac-lb, .tline { animation: none; } }

/* ---------- ⚽ หน้าคัมภีร์: สนามแผนการเล่น (ยกขึ้นก่อนบทสรุป) โทนเข้ม เข้าชุดแลกเกอร์แดง-ทองของเว็บ + ชั้นความร้อนของโซน ---------- */
.md-pitch { margin: 0 0 8px; padding: 16px 16px 12px; border-radius: 6px; color: #fbe7c0;
  background: linear-gradient(160deg, #3d0508, #1c0205); box-shadow: 0 0 0 2px #d4a441, 0 0 0 6px #5c0508, 0 0 0 8px #d4a441, 0 20px 40px rgba(0, 0, 0, .55); }
.md-pitch .pitch-cap, .md-pitch .pitch-cap small, .md-pitch .ph b, .md-pitch .ph em { color: #f6d9a8; }
.md-pitch .ph em.est { color: #ffc46b; }
/* สนามเข้ม: หญ้าเขียวแก่เกือบดำเป็นแถบ ขอบทอง เส้นสนามทอง แสงแดงหม่นขอบ */
.md-pitch .pitch { border: 2px solid #d4a441; border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(80, 5, 10, .55)), repeating-linear-gradient(90deg, #123a26 0 10%, #0e311f 10% 20%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 10px 24px rgba(0, 0, 0, .5); }
.md-pitch .pitch-lines { stroke: rgba(212, 164, 65, .55); }
.md-pitch .pitch-lines .pz-line { stroke: rgba(255, 224, 138, .85); }
.md-pitch .pitch-lines .pz-mid { fill: rgba(255, 224, 138, .05); }
.md-pitch .pz-labels span { background: linear-gradient(160deg, #8c1016, #4a060b); color: #ffe08a; box-shadow: inset 0 -2px 0 #d4a441; }
.md-pitch .pz-labels span:nth-child(2) { background: linear-gradient(160deg, #a4161a, #5c0508); }
.md-pitch .pt-btn:not(.on) { color: #f6d9a8; background: rgba(255, 255, 255, .06); border-color: rgba(212, 164, 65, .45); }
.md-pitch .pp-nm { box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.md-pitch .pp-sc { color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* บทวิเคราะห์ใต้สนาม/ตัวสำรอง/จำลอง: แผ่นกระดาษข้าวบนพื้นเข้ม */
.md-pitch :is(.pz-read, .matchup-bands, .pitch-bench, .sim-box, .fo-lineup) { color: #2b1a0a; background: radial-gradient(130% 90% at 30% 20%, #fbf3df, #efdcb0); border-radius: 6px; }
.md-pitch .matchup-bands { margin-top: 6px; padding-bottom: 10px; }

/* ชั้นความร้อน 3 โซน: ยิ่งบอลอยู่มาก ยิ่งแดงส้มเรือง · โซนเดือดสุดมีเปลวไฟเต้น */
.pitch-heat { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ph-z { position: absolute; top: 0; bottom: 0; width: 33.333%; transition: opacity .4s;
  background: radial-gradient(60% 55% at 50% 50%, rgba(255, 120, 40, calc(var(--heat) * .55)), rgba(200, 20, 30, calc(var(--heat) * .25)) 60%, transparent 85%); }
.ph-z.is-hot { animation: heatPulse 2.4s ease-in-out infinite; }
@keyframes heatPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
.ph-tag { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-size: 11.5px; font-weight: 800; color: #ffe08a;
  background: rgba(20, 4, 8, .75); border: 1px solid rgba(212, 164, 65, .6); }
.ph-z.is-hot .ph-tag { color: #fff; background: linear-gradient(135deg, #ff7a2a, #c1121f); border-color: #ffd24a; box-shadow: 0 0 12px rgba(255, 120, 40, .7); }
.ph-z.is-ball .ph-tag { font-size: 12.5px; }
/* แถบสรุปใต้สนาม */
.pitch-heat-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 80%; margin: 4px auto 0; }
.pitch-heat-sum:empty { display: none; }
.pitch-heat-sum > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 6px; background: linear-gradient(160deg, #5c0a10, #2e0408); border: 1.5px solid #d4a441; color: #fbe7c0; box-shadow: inset 0 0 0 3px #2e0408, inset 0 0 0 4px rgba(212, 164, 65, .4); }
.pitch-heat-sum b { font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 15px; color: #ffe08a; }
.pitch-heat-sum em { font-style: normal; font-weight: 900; font-size: 18px; color: #ff9a4a; }
.pitch-heat-sum small { font-size: 11.5px; color: #f0c98a; }
.phs-hot { border-color: #ff7a2a !important; }
@media (max-width: 760px) { .pitch-heat-sum { width: 100%; grid-template-columns: 1fr; } .ph-tag { font-size: 9px; padding: 1px 6px; } }
@media (prefers-reduced-motion: reduce) { .ph-z.is-hot { animation: none; } }

/* ---------- 🔗 เครือข่ายจ่ายบอล + ⚠ ช่องว่างกลาง-หน้า + 📋 แผนการเล่น ---------- */
.pitch-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.pline { fill: none; stroke-linecap: round; opacity: .92; vector-effect: non-scaling-stroke; stroke-dasharray: 1.1 .8; animation: plineFlow 1.2s linear infinite; }   /* ความหนาเป็นพิกเซลจอ (ไม่ขยายตามสนาม) */
.pline.k-tri { opacity: .55; stroke-dasharray: none; animation: none; }
@keyframes plineFlow { to { stroke-dashoffset: -3.8; } }
.pitch.hide-tac-home .pline.home, .pitch.hide-tac-away .pline.away { display: none; }
.mgap { transform: translate(-50%, -50%); padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 900; color: #3a2300; background: #ffd24a; box-shadow: 0 0 0 1.5px #fff, 0 0 12px rgba(255, 196, 40, .8); pointer-events: auto; cursor: help; animation: tacPing 1.6s ease-out infinite; }
.pitch.hide-tac-home .mgap.home, .pitch.hide-tac-away .mgap.away { display: none; }
.pitch-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 80%; margin: 6px auto 0; }
.pitch-plan:empty { display: none; }
.gp-card { padding: 12px 14px; border-radius: 6px; color: #2b1a0a; background: radial-gradient(130% 90% at 30% 20%, #fbf3df, #efdcb0); border-top: 5px solid color-mix(in srgb, var(--ca) 80%, #2a2233); box-shadow: 0 0 0 1.5px #a4161a, 0 6px 14px rgba(0, 0, 0, .35); }
.gp-card.away { border-top-color: color-mix(in srgb, var(--cb) 80%, #2a2233); }
.gp-h { margin-bottom: 6px; font-family: "Chonburi", var(--font-head); font-size: 16px; color: #5c0508; }
.gp-h b { font-weight: 400; color: #a4161a; }
.gp-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gp-card li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.gp-card li i { flex: none; width: 22px; font-style: normal; text-align: center; }
.gp-card li b { color: #5c0508; }
.gp-card li.warn { padding: 4px 6px; border-radius: 6px; background: rgba(255, 196, 40, .25); }
@media (max-width: 760px) { .pitch-plan { width: 100%; grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pline, .mgap { animation: none; } }

/* 🧱 เส้นขึ้นเกมจากหลัง (บาง ทึบ) · 🚀 บอลยาว (โค้งสูง สีทอง เรือง) */
.pline.k-build { opacity: .7; stroke-dasharray: none; animation: none; }
.pline.k-long { stroke: #ffd24a; opacity: 1; stroke-dasharray: 2 1; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .8)); animation: plineFlow .9s linear infinite; }
.mtac-lb.mlong { color: #3a2300; background: #ffd24a; box-shadow: 0 0 0 1.5px #fff, 0 0 10px rgba(255, 196, 40, .8); }
.pitch.hide-tac-home .pline.k-long.home, .pitch.hide-tac-away .pline.k-long.away { display: none; }

/* ↪ แบ็กหุบใน: เส้นทึบหนา สีม่วงทอง แยกจากการเติมริมเส้น */
.tline.k-invert { stroke: #b388ff; stroke-width: 3; stroke-dasharray: 5 3; }
.mtac-lb.k-invert { background: linear-gradient(135deg, #7c3aed, #4c1d95); }

/* ---------- 🏠 คอมโบเต็งเจ้าบ้าน: ไพ่แดงทองข้างไพ่พิศดาร · ★★★ เต็งเหล็ก เรืองทองเต้น ---------- */
.fav-combo { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 86px; height: 106px; margin: 8px 6px 0; padding: 10px 6px; border-radius: 8px; cursor: pointer;
  color: #fff; text-align: center; background: radial-gradient(90% 70% at 50% 35%, #e0303a, #7a0a12); border: 2px solid #ffd24a; outline: 1px solid rgba(255, 224, 138, .6); outline-offset: -6px;
  box-shadow: 0 6px 14px rgba(120, 10, 20, .45); transform: rotate(3deg); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); vertical-align: top; }
.fav-combo:hover { transform: translateY(-12px) rotate(0) scale(1.3); z-index: 5; }
.fav-combo small { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #ffe08a; }
.fav-combo b { font-size: 17px; line-height: 1.1; color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fav-combo i { font-style: normal; font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.fav-combo.t3 { background: radial-gradient(90% 70% at 50% 35%, #ffd24a, #b8860b 60%, #7a4a00); color: #3a0d1c; animation: favGlow 2s ease-in-out infinite; }
.fav-combo.t3 small, .fav-combo.t3 b { color: #5c0508; text-shadow: none; }
@keyframes favGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 210, 74, .4), 0 6px 14px rgba(120, 10, 20, .45); } 50% { box-shadow: 0 0 0 5px rgba(255, 210, 74, .6), 0 0 24px rgba(255, 196, 40, .9); } }
@media (prefers-reduced-motion: reduce) { .fav-combo.t3 { animation: none; } }

/* ป้ายชื่อทีม: ไม่ตัดกลางคำ (เช่น ALBACET/E) — ย่อตัวอักษรให้คำที่ยาวสุด (--wl ตัวอักษร) พอดีความกว้างป้าย (cqi = % ความกว้างป้าย) */
.vr-side > .vr-name { container-type: inline-size; }
.vr-side > .vr-name > b { overflow-wrap: normal; word-break: normal; font-size: min(calc(26px * var(--fk, 1)), calc(88cqi / (var(--wl, 8) * .68 * var(--fk, 1)) * var(--fk, 1))); }
.vr-side > .vr-name.nl-m > b { font-size: min(calc(21px * var(--fk, 1)), calc(88cqi / (var(--wl, 8) * .68))); }
.vr-side > .vr-name.nl-s > b { font-size: min(calc(17px * var(--fk, 1)), calc(88cqi / (var(--wl, 8) * .68))); }
.vr-side > .vr-name.nl-xs > b { font-size: min(calc(15px * var(--fk, 1)), calc(88cqi / (var(--wl, 8) * .68))); }

/* 🔥 คอมโบสูง: ไพ่ไฟส้ม-แดง (คู่กับไพ่คอมโบเต็งแดงทอง) */
.fav-combo.over-combo { background: radial-gradient(90% 70% at 50% 35%, #ff9a3c, #c2410c 55%, #7c1d06); transform: rotate(-3deg); }
.fav-combo.over-combo.t3 { background: radial-gradient(90% 70% at 50% 35%, #fff1a8, #ff8a1f 50%, #b91c1c); color: #3a0d1c; }

/* การ์ด Joker: ป้ายท้ายการ์ดบอกว่ากดแล้วไปไหน (หน้าแรก = ดูทุกคู่ · หน้ารวม = เปิดคัมภีร์คู่นั้น) */
.vx-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vx-seeall { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; color: #3a2300; background: linear-gradient(135deg, #fff1b8, #f0b43c); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.vx-card:hover .vx-seeall { filter: brightness(1.1); }

/* VIP 290: ข้อ "เข้ากลุ่ม LINE VIP" ไฮไลต์เขียว LINE */
/* แถว LINE VIP: แถบเขียวทั้งแถว โลโก้ LINE ใหญ่ เรืองเต้นเบาๆ ให้เด่นกว่าข้ออื่น */
.is-vipad .va-perks li.va-line { margin: 4px -6px 0; padding: 7px 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(6, 199, 85, .32), rgba(6, 199, 85, .12)); box-shadow: inset 0 0 0 1.5px rgba(6, 199, 85, .75); animation: vaLine 2.4s ease-in-out infinite; }
.is-vipad .va-perks li.va-line i { width: 38px; height: 38px; padding: 0; background: none; border-radius: 10px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); }
.va-line-logo { display: block; width: 38px; height: 38px; }
.is-vipad .va-perks li.va-line b { font-size: 14px; color: #8dffb9; }
.is-vipad .va-perks li.va-line small { color: #d9ffe7; }
@keyframes vaLine { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(6, 199, 85, .75); } 50% { box-shadow: inset 0 0 0 1.5px rgba(6, 199, 85, 1), 0 0 16px rgba(6, 199, 85, .55); } }
@media (prefers-reduced-motion: reduce) { .is-vipad .va-perks li.va-line { animation: none; } }

/* 🧊 คอมโบต่ำ: ไพ่น้ำแข็งฟ้า-น้ำเงิน */
.fav-combo.under-combo { background: radial-gradient(90% 70% at 50% 35%, #7dd3fc, #2563eb 55%, #1e1b6b); border-color: #bfe8ff; outline-color: rgba(255, 255, 255, .6); transform: rotate(2deg); }
.fav-combo.under-combo small, .fav-combo.under-combo b { color: #e0f4ff; }
.fav-combo.under-combo.t3 { background: radial-gradient(90% 70% at 50% 35%, #ffffff, #93c5fd 45%, #1d4ed8); color: #0b1d4a; animation: favGlow 2s ease-in-out infinite; }
.fav-combo.under-combo.t3 small, .fav-combo.under-combo.t3 b { color: #0b1d4a; }

/* 🏆 คอมโบชนะขาด (1X2): ไพ่เขียวมรกต-ทอง */
.fav-combo.win-combo { background: radial-gradient(90% 70% at 50% 35%, #34d399, #15803d 55%, #064e3b); transform: rotate(-2deg); }
.fav-combo.win-combo.t3 { background: radial-gradient(90% 70% at 50% 35%, #fff3c4, #34d399 45%, #065f46); color: #062e22; animation: favGlow 2s ease-in-out infinite; }
.fav-combo.win-combo.t3 small, .fav-combo.win-combo.t3 b { color: #062e22; }

/* ---------- ⚖️ ตัวค้าน & ความเสี่ยง ---------- */
/* ชิปบนหัวแมตช์: เขียว = ปลอดภัย (4-5★) · เหลือง = ปานกลาง · แดง = เสี่ยง */
.risk-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 900; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .2s; }
.risk-chip:hover { transform: scale(1.1); }
.risk-chip b { color: #ffe08a; letter-spacing: -.05em; }
.risk-chip i { font-style: normal; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11px; }
.risk-chip.lo { background: linear-gradient(135deg, #16a34a, #065f46); }
.risk-chip.mid { background: linear-gradient(135deg, #d97706, #92400e); }
.risk-chip.hi { background: linear-gradient(135deg, #dc2626, #7f1d1d); }

/* แผงในหน้าคัมภีร์ */
.rk-panel { margin: 18px 0 10px; padding: 18px 20px; border-radius: 6px; color: #2b1a0a; background: radial-gradient(130% 90% at 30% 20%, #fbf3df, #efdcb0);
  box-shadow: 0 0 0 2px #a4161a, 0 0 0 5px #e8d2a0, 0 0 0 7px #5c0508, 0 14px 28px rgba(0, 0, 0, .5); }
.rk-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 22px; color: #5c0508; }
.rk-h small { font-family: var(--font-head); font-size: 12.5px; color: #7a5a3a; }
.rk-grid { display: grid; grid-template-columns: 1fr 1.3fr 1.6fr; gap: 12px; }
.rk-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px rgba(164, 22, 26, .25); }
.rk-card small { font-size: 11.5px; font-weight: 800; color: #7a5a3a; }
.rk-card b { font-family: var(--font-head); font-size: 30px; line-height: 1.1; color: #5c0508; }
.rk-card em { font-style: normal; font-size: 12px; color: #5a4030; }
.rk-risk span { font-size: 20px; letter-spacing: 2px; color: #d4a441; }
.rk-risk.s5 b, .rk-risk.s4 b { color: #15803d; } .rk-risk.s3 b { color: #b45309; } .rk-risk.s2 b, .rk-risk.s1 b { color: #b91c1c; }
.rk-price.val b { color: #15803d; } .rk-price.bal b { color: #1d4ed8; } .rk-price.exp b { color: #b91c1c; }
.rk-meter { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #7a5a3a; }
.rk-track { position: relative; flex: 1; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #dc2626, #facc15 40%, #60a5fa 50%, #facc15 60%, #16a34a); }
.rk-track i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #5c0508, 0 2px 4px rgba(0, 0, 0, .4); }
.rk-bar { display: flex; align-items: center; gap: 8px; }
.rk-bar small { width: 34px; flex: none; }
.rk-seg { display: flex; flex: 1; height: 22px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 900; color: #fff; }
.rk-seg i { display: grid; place-items: center; min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; }
.rk-seg .h { background: color-mix(in srgb, var(--ca) 80%, #2a2233); } .rk-seg .d { background: #8a8f9e; } .rk-seg .a { background: color-mix(in srgb, var(--cb) 80%, #2a2233); }
.rk-ah { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rk-ah b { font-size: 14px; color: #5c0508; }
.rk-ah small { font-size: 12px; color: #5a4030; }
.rk-seg.ah { height: 26px; }
.rk-seg.ah .w { background: #15803d; } .rk-seg.ah .hw { background: #65a30d; } .rk-seg.ah .p { background: #8a8f9e; } .rk-seg.ah .hl { background: #ea580c; } .rk-seg.ah .l { background: #b91c1c; }
.rk-con { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(185, 28, 28, .08); border-left: 5px solid #b91c1c; }
.rk-con b { font-family: "Chonburi", var(--font-head); font-weight: 400; color: #b91c1c; }
.rk-con ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.rk-con li.ok { list-style: none; margin-left: -18px; color: #15803d; font-weight: 800; }
@media (max-width: 760px) { .rk-grid { grid-template-columns: 1fr; } }

/* 📊 โอกาสแต่ละแบบ + ข้อมูลเสริม/ตัวค้านคู่กัน */
.rk-prob { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(164, 22, 26, .2); }
.rk-prob h3 { margin: 0 0 8px; font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 17px; color: #5c0508; }
.rk-prob h3 small { font-family: var(--font-head); font-size: 11.5px; color: #7a5a3a; }
.rk-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-top: 1px dashed rgba(164, 22, 26, .2); }
.rk-row:first-of-type { border-top: 0; }
.rk-lbl { font-size: 12px; font-weight: 900; color: #5c0508; padding-top: 6px; }
.rk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.rk-t { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 8px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rk-t small { font-size: 10.5px; font-weight: 700; color: #6b5a4a; line-height: 1.25; }
.rk-t b { font-family: var(--font-head); font-size: 20px; line-height: 1.1; color: #2b1a0a; }
.rk-t i { position: absolute; left: 0; bottom: 0; height: 3px; background: #8a8f9e; }
.rk-t.win i { background: #15803d; } .rk-t.win b { color: #15803d; }
.rk-t.lose i { background: #b91c1c; } .rk-t.lose b { color: #b91c1c; }
.rk-t.draw i { background: #6b7280; }
.rk-t.goal i { background: #ea580c; } .rk-t.goal b { color: #c2410c; }
.rk-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-scores span { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rk-scores b { font-family: var(--font-head); font-size: 16px; color: #5c0508; }
.rk-scores i { font-style: normal; font-size: 12px; font-weight: 800; color: #7a5a3a; }
.rk-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rk-pc .rk-con { margin-top: 0; }
.rk-pro { padding: 10px 14px; border-radius: 8px; background: rgba(21, 128, 61, .08); border-left: 5px solid #15803d; }
.rk-pro b { font-family: "Chonburi", var(--font-head); font-weight: 400; color: #15803d; }
.rk-pro ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
@media (max-width: 760px) { .rk-pc { grid-template-columns: 1fr; } .rk-row { grid-template-columns: 1fr; } }

/* 🛡️ ทีมน่าเล่นไม่แพ้: ชิปเขียวอมฟ้า · ช่องแนะนำในแผงความเสี่ยง */
.risk-chip.nl-chip { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.risk-chip.nl-chip.t3 { background: linear-gradient(135deg, #2dd4bf, #0f766e 60%, #134e4a); box-shadow: 0 0 0 2px #ffd24a, 0 2px 10px rgba(15, 118, 110, .5); }
.rk-t.nlpick { box-shadow: 0 0 0 2px #0f766e, 0 1px 3px rgba(0, 0, 0, .12); }
.rk-t.nlrec { background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; }
.rk-t.nlrec small, .rk-t.nlrec em { color: #d9fff8; font-style: normal; font-size: 11px; }
.rk-t.nlrec b { color: #fff; font-size: 16px; }

/* ⏱️ ราคาที่ควรเป็นระหว่างเกม */
.live-fair { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px rgba(164, 22, 26, .2); }
.live-fair h3 { margin: 0 0 8px; font-family: "Chonburi", var(--font-head); font-weight: 400; font-size: 17px; color: #5c0508; }
.live-fair h3 small { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 11.5px; color: #7a5a3a; }
.lf-calc { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 800; color: #5c0508; }
.lf-calc label { display: inline-flex; align-items: center; gap: 8px; }
.lf-calc input[type=range] { width: 180px; accent-color: #a4161a; }
.lf-calc input[type=number] { width: 52px; padding: 3px 6px; border-radius: 6px; border: 1.5px solid #d4a441; font: inherit; text-align: center; }
.lf-cap { margin: 10px 0 6px; font-size: 12.5px; font-weight: 900; color: #5c0508; }
.lf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.lf-card { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.lf-card small { font-size: 11px; font-weight: 800; color: #6b5a4a; }
.lf-card b { font-family: var(--font-head); font-size: 20px; color: #2b1a0a; }
.lf-card em { font-style: normal; font-size: 11px; color: #7a5a3a; }
.lf-card i { font-style: normal; font-size: 11.5px; font-weight: 900; color: #15803d; }
.lf-card u { text-decoration: none; margin-top: 2px; font-size: 10.5px; font-weight: 800; }
.lf-card u.ok { color: #15803d; } .lf-card u.no { color: #b91c1c; }
.lf-table { overflow-x: auto; }
.lf-table table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border-radius: 6px; overflow: hidden; }
.lf-table th { padding: 6px 8px; background: #5c0508; color: #ffe08a; font-weight: 800; white-space: nowrap; }
.lf-table td { padding: 5px 8px; text-align: center; border-top: 1px solid rgba(164, 22, 26, .12); white-space: nowrap; font-weight: 800; color: #2b1a0a; }
.lf-table td small { margin-left: 4px; font-weight: 700; color: #15803d; }
.lf-table td:first-child { color: #5c0508; }
.lf-note { margin: 8px 0 0; font-size: 11px; color: #7a5a3a; }

/* ⏱️ บันไดเส้นแฮนดิแคป/สูง */
.lf-ladgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.lf-lad table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border-radius: 6px; overflow: hidden; }
.lf-lad th { padding: 5px 7px; background: #5c0508; color: #ffe08a; font-weight: 800; white-space: nowrap; }
.lf-lad td { padding: 4px 7px; text-align: center; border-top: 1px solid rgba(164, 22, 26, .12); white-space: nowrap; font-weight: 700; color: #2b1a0a; }
.lf-lad td:first-child { text-align: left; font-weight: 900; color: #5c0508; }
.lf-lad td:first-child small { font-weight: 700; color: #a4161a; }
.lf-lad td b { color: #1d4ed8; }
.lf-lad td:nth-child(4) { color: #15803d; }
.lf-lad td:last-child { font-weight: 900; color: #c2410c; }
.lf-lad tr.main td { background: rgba(255, 210, 74, .22); }
@media (max-width: 900px) { .lf-ladgrid { grid-template-columns: 1fr; } }