/* soccerthai.com — สไตล์หลักของทั้งเว็บ
   แยกออกมาจาก _head.php เพื่อให้เบราว์เซอร์เก็บไว้ใช้ซ้ำได้
   เดิมฝังอยู่ในหน้า จึงถูกส่งใหม่ทุกครั้งที่เปิดหน้า ครั้งละ 213 กิโลไบต์
   ชื่อไฟล์ต่อท้ายด้วยเลขรุ่นจากเวลาแก้ไขไฟล์ แก้เมื่อไหร่ทุกคนได้ของใหม่ทันที
   จึงไม่ต้องกลัวแคชค้างแบบที่เคยเจอ */

:root{
  color-scheme:dark;
  --navy-void:#04091A;--navy-deep:#070E24;--navy-panel:#0C1733;--navy-line:#16264D;
  --blue:#1B7BFF;--blue-dim:#0F4FB0;--cyan:#4DD8FF;--silver:#DCE6F5;--red:#ED1B2E;--gold:#FFC53D;--purple:#A66BFF;
  /* สีทีมเยือนแยกจาก --red เพราะแดงชนกับใบแดงในไทม์ไลน์ คนอ่านผิดว่าโดนใบแดง
     --red เก็บไว้ใช้กับ "กำลังแข่ง" และใบแดงเท่านั้น */
  --away:#FF4D94;--away-dim:#C9236B;
  /* สีเสมอ ใช้เขียวอมเทาเพราะอยู่คนละฝั่งวงล้อสีกับฟ้ากับชมพู แยกออกทันที
     เลือกเฉดจางกว่าอีกสองสี เพราะเสมอไม่ควรเด่นเท่าผลแพ้ชนะ
     และเว็บยังไม่ได้ใช้เขียวที่ไหน จึงไม่กำกวมกับความหมายอื่น */
  --draw:#8FE36B;
  --bg:var(--navy-void);--surface:var(--navy-deep);--card:var(--navy-panel);--card-2:#0F1B3D;
  --line:var(--navy-line);--text:#EAF1FF;--lgh-bg:#1C2C52;--lgh-hot:#332C17;--lgh-line:#2C4075;--lgh-hotline:#54461F;--lgh-sub:#8AA0CC;
  --text-dim:#8CA0C8;--text-mute:#5C6E94;
  --line-lit:#2E4783;                       /* ขอบปุ่ม สว่างกว่าเส้นคั่นทั่วไป */
  --glow:0 0 24px rgba(27,123,255,.35);--shadow:0 8px 28px rgba(0,0,0,.45);
  --r-sm:8px;--r-md:12px;--r-lg:18px;
  --ff-display:"Chakra Petch",system-ui,sans-serif;--ff-body:"Anuphan",system-ui,sans-serif;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#E9EFFA;--surface:#F4F7FD;--card:#FFFFFF;--card-2:#F1F5FE;--line:#D3DEF2;
  --text:#0A1633;--lgh-bg:#D7E4FA;--lgh-hot:#FBEBC4;--lgh-line:#B3CBF0;--lgh-hotline:#E3CE93;--lgh-sub:#4A5D80;
  --text-dim:#5A6B8C;--text-mute:#8496B4;--purple:#7A3FE0;
  --line-lit:#AFC3E4;
  --glow:0 0 20px rgba(27,123,255,.18);--shadow:0 6px 20px rgba(16,38,80,.10);
}
*{box-sizing:border-box}
/* กฎกลาง: hidden ต้องซ่อนได้เสมอ
   CSS ของเราเองที่ตั้ง display จะทับกฎ [hidden]{display:none} ของเบราว์เซอร์
   เคยทำให้หน้าต่างทีมที่ติดตามเปิดค้าง และปุ่มเลือกคืน/ทีมของฉันโผล่ตลอด */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ff-body);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 20% 0%,rgba(27,123,255,.20),transparent 70%),
             radial-gradient(50% 100% at 82% 0%,rgba(77,216,255,.16),transparent 70%)}
[data-theme="light"] body::before{background:radial-gradient(70% 100% at 50% 0%,rgba(27,123,255,.12),transparent 70%)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
/* หน้าผลบอลสดกับหน้ารายการใช้ความกว้างจอมากกว่าหน้าอื่น
   ตารางมีสิบเอ็ดคอลัมน์ ชื่อทีมจึงถูกบีบจนขึ้นจุดไข่ปลาแม้จะบีบคอลัมน์อื่นแล้ว
   จอ 1920 เดิมเหลือขอบข้างละ 370px ซึ่งไม่ได้ใช้อะไรเลย
   เพดาน 1720px ทำให้ชื่อทีมได้ฝั่งละราว 477px พอสำหรับทุกชื่อในระบบ
   ไม่ปล่อยเต็มจอเพราะบนจอ 2560 บรรทัดจะยาวจนสายตากวาดไม่ทัน

   หน้าอื่นอย่างรายละเอียดคู่ ลีก ทีม ยังใช้ 1180px เท่าเดิม
   เพราะเป็นเนื้อหาอ่าน ไม่ใช่ตารางกว้าง */
.ui-desktop main.pg-live,
.ui-desktop main.pg-program,
.ui-desktop main.pg-results{max-width:1720px}
/* ตารางแคบ ขอบหน้า 7px ให้การ์ดไม่ติดขอบจอจนดูอึดอัด
   ลองที่ 2px แล้วแน่นเกินไป 7px เป็นจุดที่ยังได้พื้นที่คืนจากเดิม 16px
   แต่ยังเห็นระยะขอบชัดเจน */
@media (max-width:1100px){
  .ui-desktop .wrap{padding:0 7px}
}

/* ---------- ไอคอนที่มีสองสถานะ ----------
   วาดทั้งสองแบบไว้ใน HTML แล้วเลือกแสดงด้วย CSS ตามแอตทริบิวต์บน <html>
   ซึ่งสคริปต์ในส่วนหัวตั้งไว้ก่อนเบราว์เซอร์วาดหน้า จึงถูกต้องตั้งแต่เฟรมแรก
   ถ้าให้ JavaScript มาเปลี่ยนทีหลัง จะเห็นไอคอนสลับหรือหายแวบหนึ่งทุกครั้งที่โหลด */
#soundIco .ic-off,#themeIco .ic-sun{display:none}
[data-snd="off"] #soundIco .ic-on{display:none}
[data-snd="off"] #soundIco .ic-off{display:block}
[data-theme="light"] #themeIco .ic-moon{display:none}
[data-theme="light"] #themeIco .ic-sun{display:block}

/* ---------- ปุ่มดูเพิ่มท้ายตาราง ----------
   ใช้ตอนคู่บอลเยอะจนต้องตัด พาไปหน้าที่รวมคู่ทั้งหมดของเรื่องนั้น
   เต็มความกว้างเพราะเป็นทางออกหลักของตารางที่ถูกตัด ไม่ใช่ปุ่มรอง
   ตัวเลขจำนวนที่เหลืออยู่บรรทัดล่าง จะได้รู้ว่ากดไปแล้วเจออะไรเพิ่ม */
.more-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:100%;margin:1px 0;padding:13px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line-lit);
  font-family:var(--ff-display);font-size:13.5px;font-weight:700;color:var(--blue);
  transition:.16s}
.more-btn:hover{background:var(--card-2);border-color:var(--blue)}
.more-btn span{font-family:var(--ff);font-size:11.5px;font-weight:500;color:var(--text-mute)}
.ui-mobile .more-btn{padding:12px;font-size:13px}
/* ปุ่มทางลัดใช้ธาตุ button เพราะสลับโหมดในหน้าเดิม ไม่ได้พาไปหน้าอื่นเหมือนอันอื่น
   เบราว์เซอร์ใส่พื้นหลังกับเส้นขอบของตัวเองให้ปุ่ม ต้องล้างทิ้งให้หน้าตาตรงกัน */
button.more-btn{-webkit-appearance:none;appearance:none;cursor:pointer;text-align:center}
/* .more-btn ตั้ง display:flex ไว้ ซึ่งชนะกฎ display:none ที่เบราว์เซอร์ให้มากับ hidden
   ปุ่มที่สั่งซ่อนจึงยังโผล่อยู่ ต้องเขียนทับเองให้ hidden ทำงานจริง */
.more-btn[hidden]{display:none}
/* ---------- ไอคอนเปิดปิดเสียงในหัวตารางผลบอลสด ----------
   อยู่ต่อท้ายคำว่าผลบอลสด ไม่กินพื้นที่เพิ่มเพราะแทรกในแถวหัวตารางที่มีอยู่แล้ว
   หัวตารางสีเข้ม ไอคอนจึงใช้สีขาวโปร่ง ไม่ใช่สีข้อความปกติของเว็บ
   เป็นสวิตช์ถาวร อยู่ตลอดไม่ว่าเสียงจะเปิดหรือปิด */
.sect-snd{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;
  margin:-4px 0 -4px 7px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;transition:.16s}
.sect-snd:hover{background:rgba(255,255,255,.3)}
.sect-snd svg{width:14px;height:14px}
.sect-snd .ic-on{display:none}
[data-snd="on"] .sect-snd .ic-off{display:none}
[data-snd="on"] .sect-snd .ic-on{display:block}
[data-snd="on"] .sect-snd{background:rgba(255,255,255,.34)}

/* ================= แถบหัวเว็บ มืดตลอดทั้งสองธีม ================= */
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#04091A,#060D20);border-bottom:1px solid #14224A}
.topbar-in{max-width:1180px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;gap:14px}
.mark{display:flex;align-items:center;gap:9px;flex-shrink:0}
/* โลโก้จริงแทนลูกบอล CSS + ตัวหนังสือ ความสูงคุมไว้ ความกว้างไหลตามสัดส่วน */
.mark-logo{height:38px;width:auto;display:block}
.ui-mobile .mark-logo{height:30px}
.mark-ball{width:30px;height:30px;border-radius:50%;flex-shrink:0;position:relative;
  background:radial-gradient(circle at 32% 28%,#fff,#C7D6EC 40%,#5C79A8 78%,#22345C);
  box-shadow:0 0 14px rgba(77,216,255,.55),inset 0 -3px 6px rgba(0,0,0,.4)}
.mark-ball::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#12224A 0 22%,transparent 23%),
             radial-gradient(circle at 12% 66%,#12224A 0 15%,transparent 16%),
             radial-gradient(circle at 86% 62%,#12224A 0 15%,transparent 16%)}
.mark-txt{font-family:var(--ff-display);font-style:italic;font-weight:700;line-height:.95;letter-spacing:.4px}
.mark-txt span{display:block;font-size:17px}
.mark-txt .s{background:linear-gradient(180deg,#FFFFFF,#B9C9E4 55%,#7E93B8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mark-txt .t{margin-top:-3px;background:linear-gradient(180deg,#7FD0FF,#1B7BFF 60%,#0C46A0);-webkit-background-clip:text;background-clip:text;color:transparent}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#0B152F;border:1px solid #2E4783;
  border-radius:999px;padding:7px 14px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--blue);box-shadow:var(--glow)}
.search svg{flex-shrink:0;opacity:.55;color:#8CA0C8}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#EAF1FF;font-family:var(--ff-body);font-size:13.5px}
.search input::placeholder{color:#5C6E94}
.tools{display:flex;align-items:center;gap:7px;flex-shrink:0}
.icon-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#0B152F;
  border:1px solid #2E4783;color:#B9C9E4;transition:.2s}
.icon-btn:hover{border-color:var(--blue);color:#fff;box-shadow:var(--glow)}

/* โหมดฝัง iframe: ตัดเมนู ค้นหา ปุ่มตั้งค่า การ์ด และท้ายหน้า เหลือแค่ตารางสด */
html.embed .mainnav,html.embed .search,html.embed .tools a[href="/settings.php"],html.embed .hotcard,html.embed .foot,html.embed #btnReport{display:none!important}
html.embed .topbar-in{gap:10px}
html.embed .mark-txt .s{font-size:11px;letter-spacing:0;font-style:normal;font-family:var(--ff-body);font-weight:700}
html.embed .mark-txt .t{font-size:18px}
html.embed .wrap{padding-bottom:16px}
html.ui-desktop body{min-width:1000px}
.mainnav{display:flex;gap:6px;flex-shrink:0}
/* คอม: ปุ่มเมนูกว้างเท่ากันทุกอัน ดูเป็นระเบียบกว่ากว้างตามความยาวคำ
   มือถือไม่แตะ เพราะมีกฎของตัวเองอยู่แล้ว */
.ui-desktop .mainnav{flex:1 1 auto;min-width:0}
.ui-desktop .mainnav a{flex:1 1 0;min-width:0;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* คอมเห็นคำเต็ม มือถือเห็นคำสั้น อีกอันซ่อนด้วย CSS แต่ยังอยู่ใน HTML */
.ui-desktop .nv-short{display:none}
.ui-mobile .nv-long{display:none}
.mainnav a{padding:6px 13px;border-radius:9px;font-size:13px;font-weight:600;color:#A8BCE0;
  border:1px solid #2E4783;background:#0B152F;transition:.18s;white-space:nowrap}
.mainnav a:hover{color:#fff;border-color:var(--blue)}
.mainnav a.is-on{color:#fff;border-color:var(--blue);background:linear-gradient(160deg,var(--blue),var(--blue-dim));box-shadow:var(--glow)}

/* ================= หน้ารายการ (โปรแกรม / ย้อนหลัง) ================= */
/* ---------- หัวข้อหน้า (h1 + คำอธิบาย) ใช้ร่วมกันทุกหน้า ----------
   มาจาก includes/_pghead.php แก้ที่นั่นที่เดียวมีผลทุกหน้า */
/* ระยะห่างการ์ดในหน้าเท่ากันหมด 10px ทั้งบนและล่าง
   ของเดิมแต่ละการ์ดตั้งเองคนละค่า 14/12/10 เลยไม่เท่ากัน */
.pghead{display:block;margin:1px 0;padding:13px 16px;
  border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--card),var(--card-2) 55%,var(--card));
  border:1px solid var(--line-lit);box-shadow:var(--shadow)}
/* แถบไล่สีด้านซ้าย ใช้ภาษาเดียวกับหัวข้อตารางในหน้าแรก */
.pghead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--blue),var(--cyan))}
.pgh-top{display:flex;align-items:baseline;gap:12px;min-width:0}
/* h1 อยู่บรรทัดเดียวเสมอ ยาวเกินให้ตัดท้ายแทนการขึ้นบรรทัดใหม่
   ถ้าตกบรรทัดสองการ์ดจะสูงเกินไปและดันเนื้อหาลง */
.pghead h1{display:flex;align-items:center;gap:9px;margin:0;min-width:0;
  font-family:var(--ff-display);font-size:19px;font-weight:700;letter-spacing:.2px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pghead h1 .pgh-ico{flex-shrink:0}
.pgh-ico{font-size:17px;opacity:.9}
/* คอมบรรทัดเดียว ยาวเกินตัดท้าย
   มือถือให้ตกบรรทัดได้ไม่เกินสองบรรทัด เพราะพื้นที่แคบกว่าครึ่ง
   ถ้าบังคับบรรทัดเดียวทั้งสองแบบ ข้อความบนมือถือจะโดนตัดจนอ่านไม่ครบ */
.pgh-sub{margin:5px 0 0;font-size:12.5px;color:var(--text-dim);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* หน้าลีก หัวข้อยาวกว่าหน้าอื่นเพราะมีทั้งชื่อลีก ปีฤดูกาล และคำขยาย
   กฎปกติบังคับ h1 บรรทัดเดียวแล้วตัดท้ายด้วยจุดสามจุด ซึ่งไม่ควรใช้กับหน้านี้
   h1 คือหัวข้อหลักของหน้า ถูกตัดครึ่งแล้วคนอ่านไม่รู้ว่าหน้านี้มีอะไรบ้าง
   ให้ตกบรรทัดได้แทน พร้อมลดขนาดลงหนึ่งขั้นเพื่อไม่ให้การ์ดสูงเกินไป
   คำอธิบายใต้หัวข้อก็เลิกตัดท้ายเช่นกัน เพราะทุกคำในนั้นตั้งใจให้คนอ่านครบ */
.pg-league .pghead h1{white-space:normal;overflow:visible;text-overflow:clip;
  font-size:16px;line-height:1.35;align-items:flex-start}
.ui-mobile .pg-league .pghead h1{font-size:13.5px}
@media (max-width:400px){.ui-mobile .pg-league .pghead h1{font-size:13px}}
.pg-league .pgh-sub{white-space:normal;overflow:visible;text-overflow:clip}
.ui-mobile .pg-league .pgh-sub{-webkit-line-clamp:4}
/* ป้ายมุมขวาอยู่บรรทัดเดียวกับ h1 ไม่ใช่ลอยอยู่บนสุดของการ์ด */
.pgh-meta{flex-shrink:0;margin-left:auto;font-family:var(--ff-display);font-size:12px;
  color:var(--text-dim);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 13px;white-space:nowrap}
.ui-mobile .pghead{padding:11px 13px;border-radius:14px;margin:1px 0}
.ui-mobile .pgh-top{gap:8px}
.ui-mobile .pghead h1{font-size:15.5px;gap:7px}
.ui-mobile .pgh-sub{font-size:11px;white-space:normal;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
/* จอแคบมาก ย่อลงอีกขั้นแทนที่จะตัดคำทิ้ง */
@media (max-width:400px){
  .ui-mobile .pghead h1{font-size:14px}
  .ui-mobile .pgh-sub{font-size:10.5px}
  .ui-mobile .pgh-ico{font-size:14px}
}
.ui-mobile .pgh-meta{font-size:10.5px;padding:3px 9px}
.pg-head .n{font-family:var(--ff-display);font-weight:700;color:var(--text)}
/* ---------- การ์ดเลือกวัน ----------
   ปุ่มทุกอันกว้างเท่ากันด้วย flex บนตัวลูก ไม่ใช้ min-width รายตัว
   (min-width เคยทำให้ปุ่มกดไม่ติดมาแล้ว) */
.daycard{position:relative;display:flex;align-items:stretch;gap:6px;
  background:var(--card);border:1px solid var(--line-lit);border-radius:14px;
  padding:7px;margin-bottom:1px;box-shadow:var(--shadow);
  scroll-margin-top:calc(var(--hh) + 10px)}
/* ไม่ใช้ scroll-snap เพราะพอเลื่อนสุดแล้วมันดูดกลับสองสามพิกเซล
   ระบบจึงคิดว่ายังไม่สุด ทำให้ปุ่มสลับกลับเป็น "เลื่อน" ทันทีที่เพิ่งขึ้น "ย้อนกลับ" */
.daynav{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:1px}
.daynav::-webkit-scrollbar{display:none}
/* ขอบใช้สีเดียวกับปุ่มเมนูบนแถบหัวเว็บ
   ของเดิมใช้ var(--line) ซึ่งจางมากในธีมมืด แทบมองไม่เห็นว่าเป็นปุ่ม */
.dn{flex:1 0 auto;min-width:104px;text-align:center;
  padding:9px 10px;border-radius:10px;font-size:12.5px;font-weight:600;
  background:#0B152F;border:1px solid #2E4783;color:#A8BCE0;
  transition:.18s;white-space:nowrap}
.dn:hover{border-color:var(--blue);color:#fff}
[data-theme="light"] .dn{background:var(--card-2);border-color:#C3D3EC;color:var(--text-dim)}
[data-theme="light"] .dn:hover{border-color:var(--blue);color:var(--text)}
.dn:hover{color:var(--text);border-color:var(--blue)}
.dn.is-on{background:linear-gradient(135deg,var(--blue),#0F4FB0);border-color:var(--blue);
  color:#fff;box-shadow:var(--glow);font-weight:600}
/* ป้ายบอกว่าเลื่อนได้ ลูกศรขยับเบา ๆ */
/* เป็นปุ่มจริง กดแล้วเลื่อนแถบวันไปข้างหน้าหนึ่งชุด
   พื้นหลังไล่สีน้ำเงินเหมือนปุ่มวันที่เลือกไว้ จะได้ดูเป็นปุ่มชัด ๆ
   ของเดิมพื้นใสจนดูเหมือนข้อความลอย ไม่รู้ว่ากดได้ */
.day-more{flex-shrink:0;display:flex;align-items:center;gap:5px;cursor:pointer;
  font-family:var(--ff-display);font-size:11.5px;font-weight:700;letter-spacing:.3px;
  color:#fff;border:0;border-radius:10px;padding:0 11px;margin-left:2px;
  align-self:stretch;white-space:nowrap;transition:.18s;
  background:linear-gradient(135deg,var(--blue),#0B3FA0);
  box-shadow:0 2px 8px rgba(27,123,255,.30), inset 0 1px 0 rgba(255,255,255,.22)}
.day-more b{font-weight:700}
.day-more i{font-style:normal;font-size:16px;line-height:1;color:#fff;
  animation:dmNudge 1.5s ease-in-out infinite}
.day-more:hover{background:linear-gradient(135deg,#4A9AFF,var(--blue));
  box-shadow:0 3px 12px rgba(27,123,255,.45), inset 0 1px 0 rgba(255,255,255,.28)}
.day-more:hover i{animation:none;transform:translateX(3px)}
.day-more:active{transform:scale(.96)}
/* มุมมองคอมไม่ต้องมีปุ่มเลย เพราะปุ่มวันอยู่ในจอครบทุกกรณี
   มุมมองมือถือมีเสมอ เพราะล้นจอทุกขนาดตั้งแต่ 360 ถึง 430
   ตัดสินที่นี่ ไม่ใช่ให้ JS วัดแล้วค่อยเติมคลาสทีหลัง ซึ่งทำให้เห็นปุ่มกระพริบ */
.ui-desktop .day-more{display:none}
/* เผื่อกรณีที่ปุ่มวันเพิ่มจำนวนจนล้นบนคอม JS ยังสั่งให้แสดงได้ */
.ui-desktop .day-more.need{display:flex}
.day-more.gone{display:none}
/* โหมดย้อนกลับ ลูกศรชี้ซ้ายและขยับไปทางซ้ายแทน */
/* โหมดย้อนกลับ ไล่สีกลับทางให้สอดคล้องกับลูกศรที่ชี้ซ้าย */
.day-more.back{background:linear-gradient(315deg,var(--blue),#0B3FA0)}
.day-more.back:hover{background:linear-gradient(315deg,#4A9AFF,var(--blue))}
.day-more.back i{animation-name:dmNudgeBack}
@keyframes dmNudgeBack{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(-3px);opacity:1}}
.day-more.back:hover i{transform:translateX(-3px)}
/* ลูกศรบนพื้นสีทึบ ถ้าจางถึง .55 จะดูเลือน ใช้ .75 เป็นจุดต่ำสุดแทน */
@keyframes dmNudge{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .day-more i{animation:none;opacity:.8} }

.dn.cal{flex:0 0 auto;min-width:0;padding:5px 9px}
.dn.cal input{background:none;border:0;color:var(--text);font-family:var(--ff-body);font-size:12.5px;outline:0;color-scheme:dark}
[data-theme="light"] .dn.cal input{color-scheme:light}
.lt.list tr.row{cursor:pointer}
/* วันที่หน้าเวลา ขึ้นทุกแถวเพราะวันบอลคาบเกี่ยวสองวันปฏิทิน
   คู่ที่ข้ามไปวันถัดไป (.next) เน้นสีให้เห็นรอยต่อชัด */
/* ช่องวันที่ของตัวเอง จัดกึ่งกลางให้ตรงกับหัวตาราง */
.c-date{text-align:center;font-family:var(--ff-display);font-size:11px;color:var(--text-mute);
  font-variant-numeric:tabular-nums}
.c-date .dt.next{color:var(--blue-dim);font-weight:700}
[data-theme="dark"] .c-date .dt.next{color:var(--cyan)}
/* โหมดการ์ด วันที่อยู่บรรทัดบนของเวลา */
.c-st .dt{display:block;font-size:9.5px;font-weight:400;color:var(--text-mute);
  letter-spacing:0;font-variant-numeric:tabular-nums}
.c-st .dt.next{color:var(--blue-dim);font-weight:600}
[data-theme="dark"] .c-st .dt.next{color:var(--cyan)}
.vs{font-family:var(--ff-display);font-size:11px;color:var(--text-mute);letter-spacing:1px}
tr.row[data-href]{cursor:pointer}

/* ================= หน้ารายละเอียดแมตช์ ================= */
.mh{margin:16px 0 10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mh-lg{display:flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:600;font-size:15px}
.mh-lg img{width:24px;height:16px;object-fit:cover;border-radius:3px}
.mh-lg small{color:var(--text-mute);font-weight:500;font-size:12px}
.mh-meta{display:flex;align-items:baseline;gap:12px;flex:1;font-size:12.5px;color:var(--text-dim)}
.mh-when{white-space:nowrap}
.mh-venue{margin-left:auto;text-align:right;color:var(--text-mute);font-size:12px}
.board{display:grid;grid-template-columns:1fr 200px 1fr;align-items:center;gap:16px;padding:22px 24px;margin-bottom:12px;
  background:linear-gradient(100deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.board.live{border-color:rgba(77,216,255,.4);box-shadow:var(--shadow),0 0 0 1px rgba(77,216,255,.15) inset}
.bt{display:flex;align-items:center;gap:14px;min-width:0}
.bt.h{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.bt img{width:64px;height:64px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:14px;padding:6px;flex-shrink:0}
.bt b{display:block;font-size:19px;font-weight:700;line-height:1.2}
.bt small{display:block;font-size:11.5px;color:var(--text-mute)}
.bs{text-align:center}
.st-tag{display:inline-block;font-family:var(--ff-display);font-weight:700;font-size:12px;padding:3px 12px;border-radius:999px;margin-bottom:6px;
  background:var(--card-2);color:var(--text-dim);border:1px solid var(--line)}
/* คู่ที่ยังไม่เตะไม่มีข้อความในป้ายนี้ ถ้าปล่อยไว้จะเป็นกรอบเปล่า
   ซึ่งทำให้คนสงสัยว่ามีอะไรหายไป ซ่อนทั้งป้ายเลยดีกว่า */
.st-tag.ns:empty{display:none}
.st-tag.live{color:var(--red);border-color:rgba(237,27,46,.4)}
.st-tag.pen{color:var(--purple);border-color:rgba(166,107,255,.4)}
.big{font-family:var(--ff-display);font-weight:700;font-size:46px;line-height:1;letter-spacing:2px;font-variant-numeric:tabular-nums}
.big i{font-style:normal;opacity:.35;font-size:32px;margin:0 6px}
.board.live .big{color:var(--cyan);text-shadow:0 0 22px rgba(77,216,255,.45)}
[data-theme="light"] .board.live .big{color:var(--blue-dim);text-shadow:none}
.big .vs{font-size:22px;color:var(--text-mute);letter-spacing:4px}
.bs .sub{font-size:12px;color:var(--text-dim);margin-top:6px;font-family:var(--ff-display)}
.penc{color:var(--purple);font-weight:700}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:1px;box-shadow:var(--shadow)}
.mcard h2{display:flex;align-items:baseline;gap:10px;font-family:var(--ff-display);font-size:13px;
  font-weight:600;color:var(--text-dim);margin:0 0 12px;letter-spacing:.4px}
/* ของที่ต้องชิดขวาในหัวข้อการ์ด เช่นผู้ตัดสิน แผนการเล่น */
.h2-right{margin-left:auto;font-weight:500;font-size:11.5px;color:var(--text-mute);letter-spacing:0}

/* ================= หัวข้อการ์ดหน้าลีก เรียงเป็นธงไทย =================
   ห้าการ์ดพอดีห้าแถบ แดง ขาว น้ำเงิน ขาว แดง
   แถบขาวใช้ฟ้าอ่อนแทน เพราะขาวจริงในธีมมืดจะจ้าจนแย่งความสนใจจากเนื้อหา
   และในธีมสว่างจะกลืนไปกับพื้นจนแทบมองไม่เห็น
   ไล่สีบนลงล่าง เพราะแถบกว้างแต่เตี้ย ไล่แนวนอนจะเห็นการเปลี่ยนสีน้อยมาก

   ใช้คนละความหมายกับหัวสถานะในหน้าผลบอลสด แต่คนละหน้าและคนละบริบท
   การเรียงแบบธงอ่านออกทันทีว่าเป็นลวดลาย ไม่ใช่รหัสสี */
.pg-league .mcard > h2{margin:-16px -18px 12px;padding:10px 18px;
  border-radius:var(--r-md) var(--r-md) 0 0;color:#fff;font-size:13.5px;font-weight:700}
.ui-mobile .pg-league .mcard > h2{margin:-12px -12px 10px;padding:9px 12px;font-size:12.5px}
.pg-league .mcard > h2 .h2-right{color:rgba(255,255,255,.82)}

/* PHP ใส่คลาส flag-1 ถึง flag-5 มาให้ตามลำดับการ์ดจริง */
.mcard.flag-1 > h2,
.mcard.flag-5 > h2{background:linear-gradient(180deg,#ED1B2E,#C10D1D)}
/* แถบขาวของธง ใช้ไล่จากฟ้าใสไปขาว
   ฟ้าเดิม #A8DCF0 มีความสดแค่ 30% จึงดูหม่น เปลี่ยนเป็น #38BDF8 ที่สด 77%
   ไล่ขึ้นไปหาขาวทำให้ได้ความหมายของแถบขาวกลับมาและดูมีมิติ */
.mcard.flag-2 > h2,
.mcard.flag-4 > h2{background:linear-gradient(180deg,#38BDF8,#E8F7FF);color:#08315E}
.mcard.flag-2 > h2 .h2-right,
.mcard.flag-4 > h2 .h2-right{color:rgba(8,49,94,.70)}
.mcard.flag-3 > h2{background:linear-gradient(180deg,#1B7BFF,#0B3FA0)}
/* การ์ดนอกลำดับธง ใช้สีกลางที่ไม่ชนกับสามสีของธง */
.mcard.flag-x > h2{background:linear-gradient(180deg,#55637F,#3A4761)}

/* ธีมสว่าง ฟ้าอ่อนต้องเข้มขึ้น ไม่งั้นจางไปกับพื้นขาว */
/* ธีมสว่าง ปลายทางไม่ไปถึงขาวสนิท ไม่งั้นแถบจะหายไปกับพื้นการ์ด */
[data-theme="light"] .mcard.flag-2 > h2,
[data-theme="light"] .mcard.flag-4 > h2{
  background:linear-gradient(180deg,#1FA8E8,#BFE7F8);color:#06284A}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
/* ระยะห่างระหว่างแถวต้องมากกว่าระยะห่างภายในแถว ไม่งั้นสายตาแยกไม่ออกว่าอะไรเป็นกลุ่มเดียวกัน
   เดิม padding 5px เท่ากับช่องไฟระหว่างชื่อคนยิงกับคนจ่าย จึงอ่านแล้วชนกันไปหมด */
.tl-row{display:grid;grid-template-columns:1fr 58px 1fr;align-items:center;gap:10px;
  padding:9px 0;font-size:13px;position:relative}
/* เส้นคั่นจาง ๆ ระหว่างเหตุการณ์ ช่วยแยกกลุ่มโดยไม่ต้องเพิ่มระยะห่างมากจนหน้ายืด */
.tl-row + .tl-row::before{content:"";position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--line);opacity:.55}
/* ไอคอนอยู่ในบรรทัดเดียวกับชื่อแล้ว ไม่ต้องใช้ flex จัดตำแหน่งอีก
   ของเดิมแยกเป็นสองก้อน พอชื่อยาวจนตกสองบรรทัด ก้อนชื่อกินความกว้างเต็มช่อง
   ไอคอนเลยถูกดันไปติดขอบและดูห่างจากตัวหนังสือ */
.tl-row .l{text-align:right}
.tl-row .r{text-align:left}
.tl-ico{display:inline-block;vertical-align:-1px;font-size:13px}
/* ยิงจุดโทษไม่เข้า: ลูกบอลจางลงพร้อมกากบาทแดงมุมขวาบน
   หรี่เฉพาะลูกบอลที่อยู่ใน <i> ไม่ใช่หรี่ทั้งก้อน ไม่งั้นกากบาทจะจางตามไปด้วย
   กากบาทวาดด้วย ::after จึงไม่กินพื้นที่ในแถว ไอคอนยังกว้างเท่าเหตุการณ์อื่น */
.tl-ico.ic-miss{position:relative}
.tl-ico.ic-miss i{display:inline-block;font-style:normal;opacity:.32;filter:grayscale(.85)}
/* กากบาทวางทับกลางลูกบอล ไม่ใช่มุมขวาบน
   ไอคอนในไทม์ไลน์กว้างแค่ 13px ป้ายที่มุมจึงเล็กจนดูเป็นจุดเลอะมากกว่าสัญลักษณ์
   ส่วนกากบาททับกลางเป็นภาษาที่คนอ่านออกทันทีว่าไม่สำเร็จ และใหญ่ได้เต็มขนาดไอคอน */
.tl-ico.ic-miss::after{content:"✕";position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:14px;line-height:1;font-weight:900;color:var(--red);
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tl-row .l .tl-ico{margin-right:6px}
.tl-row .r .tl-ico{margin-left:6px}
.tl-txt{display:block;min-width:0}
.tl-row .m{text-align:center;font-family:var(--ff-display);font-size:11.5px;color:var(--text-mute);background:var(--card);position:relative;font-variant-numeric:tabular-nums}
/* คนจ่าย / คนที่ถูกเปลี่ยนออก แยกเป็นบรรทัดรอง จะได้ไม่อ่านปนกับคนยิง
   ชิดกับชื่อคนยิงมากกว่าระยะห่างระหว่างแถว จะได้รู้ว่าเป็นของแถวเดียวกัน */
.tl-row .out{display:block;color:var(--text-mute);font-size:11.5px;margin-top:2px;line-height:1.35}
.tl-row b{line-height:1.4}
.tl-row em{font-style:normal;font-size:11px;color:var(--text-mute);background:var(--card-2);padding:1px 6px;border-radius:5px;margin-left:4px}
.tl-row.goal b,.tl-row.pen b{color:var(--text)}
.tl-row.h.goal .m,.tl-row.h.pen .m{color:var(--cyan)}
.tl-row.a.goal .m,.tl-row.a.pen .m{color:var(--away)}
/* ชื่อทีมกับโค้ชอยู่แถวเดียวกัน โค้ชชิดขวา */
.lu-team{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.lu-team b{font-size:15px}
.lu-coach{margin-left:auto;font-size:11.5px;color:var(--text-mute);text-align:right}
/* การ์ดเจ้าบ้าน/ทีมเยือน แถบสีซ้ายบอกฝั่ง */
.lu-card.h{box-shadow:inset 3px 0 0 var(--cyan)}
.lu-card.a{box-shadow:inset 3px 0 0 var(--away)}
[data-theme="light"] .lu-card.h{box-shadow:inset 3px 0 0 var(--blue)}

.lu-sub{display:flex;align-items:center;gap:7px;font-family:var(--ff-display);font-size:11px;
  color:var(--text-mute);letter-spacing:.4px;margin:12px 0 5px}
.lu-sub i{font-style:normal;font-size:10px;background:var(--card-2);color:var(--text-mute);
  border-radius:99px;padding:1px 7px}
/* ตัวจริงเน้นกว่าตัวสำรอง */
.lu-sub.xi{color:var(--text);font-weight:600}
.lu-sub.xi i{background:rgba(27,123,255,.15);color:var(--blue-dim)}
.lu-list{list-style:none;margin:0;padding:0;columns:1}
.lu-list li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.lu-list li:last-child{border-bottom:0}
.lu-list .no{width:22px;font-family:var(--ff-display);font-weight:700;font-size:11px;color:var(--text-mute);text-align:right;flex-shrink:0}
.lu-list small{margin-left:auto;font-size:10.5px;color:var(--text-mute)}
/* ตัวสำรองจางกว่าและตัวเล็กกว่า จะได้แยกออกจากตัวจริงตั้งแต่มองผ่าน */
.lu-list.sub li{color:var(--text-mute);font-size:12px;opacity:.85}
.lu-list.sub .no{font-size:10px}
.lu-list li{transition:background .15s}
.lu-list li:hover{background:var(--card-2)}
.stt-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:10px;padding:5px 0}
.stt-row .v{font-family:var(--ff-display);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.stt-row .v.h{text-align:right;color:var(--cyan)}
.stt-row .v.a{text-align:left;color:var(--away)}
[data-theme="light"] .stt-row .v.h{color:var(--blue-dim)}
.stt-row .lbl{text-align:center;font-size:12px;color:var(--text-dim)}
.stt-row .bar{grid-column:1/-1;display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--line);gap:2px}
.stt-row .bar i{display:block;height:100%}
.stt-row .bar i.h{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.stt-row .bar i.a{background:linear-gradient(90deg,#FF9EC5,var(--away))}
.nodata{font-size:12.5px;color:var(--text-mute);padding:6px 0}

/* ================= การ์ดโปรแกรมลีกใหญ่ ================= */
.hotcard{padding:0;overflow:hidden;margin-top:6px}
.hc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--card-2),transparent)}
.hc-head h2{margin:0;font-size:14px;color:var(--text)}
.hc-head h2 small{color:var(--text-mute);font-weight:500;font-size:11.5px;margin-left:6px}
.lt.hc tr.crow{cursor:pointer;transition:background .2s}
.lt.hc tr.crow:hover td{background:var(--card-2)}
.c-day{text-align:center;font-family:var(--ff-display);font-size:11px;color:var(--text-mute)}
.hc-more{padding:8px;text-align:center;border-top:1px solid var(--line)}

/* ================= สรุปตัวเลข ================= */
.ticker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 14px;border-radius:var(--r-md);
  margin:14px 0 10px;background:linear-gradient(100deg,var(--card),var(--card-2));border:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.ticker::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--red) 0 20%,#fff 20% 40%,#0C46A0 40% 60%,#fff 60% 80%,var(--red) 80%)}
.tk{display:flex;align-items:baseline;gap:7px;padding-left:6px}
.tk b{font-family:var(--ff-display);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.tk span{font-size:11.5px;color:var(--text-dim)}
.tk.live b{color:var(--red)}
.tk-date{margin-left:auto;font-family:var(--ff-display);font-weight:600;font-size:12px;color:var(--text-dim);text-align:right;line-height:1.35}
#upd{display:block;font-size:10.5px;font-weight:400;color:var(--text-mute)}
#upd.stale{color:var(--red)}

/* ================= แถบเครื่องมือ ================= */
/* --hh = ความสูงจริงของแถบหัวเว็บ, --th = ความสูงแถบเครื่องมือ
   วัดด้วย JS ตอนโหลดและตอนย่อขยายจอ เพราะมือถือเมนูตกบรรทัดสอง ความสูงไม่คงที่ */
:root{--hh:53px;--th:46px}
/* เนื้อหาเริ่มชิดแถบหกลีก ไม่ต้องเว้น 12px
   ทุกอย่างข้างในเป็นการ์ดที่มีขอบของตัวเองอยู่แล้ว */
/* เว้นระยะท้ายหน้าเล็กน้อย ให้กรอบท้ายหน้าไม่ติดขอบจอพอดีจนดูอึดอัด
   และทำให้รอยต่อระหว่างเนื้อหากับพื้นหลังดูตั้งใจ ไม่ใช่เหมือนหน้าขาด */
.wrap{padding-top:1px;padding-bottom:14px}
/* คอม: การ์ดทั้งสองใบไปชิดขวาด้วยกัน ห่างกันแค่ 1px
   ของเดิมใช้ space-between ซึ่งดันการ์ดไปคนละมุม
   ช่องว่างตรงกลางจึงเป็นพื้นที่เหลือทั้งหมด ไม่ใช่ค่าที่ตั้งไว้
   มือถือไม่แตะ เพราะการ์ดกว้างเต็มจอและเรียงบนล่างอยู่แล้ว */
.ui-desktop .toolbar{justify-content:flex-end}
/* ช่องว่างระหว่างการ์ดสองใบในแถบเครื่องมือ
   แต่ละใบมีขอบและพื้นของตัวเองอยู่แล้ว ไม่ต้องเว้นมาก */
.toolbar{display:flex;align-items:center;gap:1px;flex-wrap:wrap;
  position:sticky;top:var(--hh);z-index:35;background:var(--bg);
  padding:1px 0;margin-bottom:1px}
/* หน้าโปรแกรม/ย้อนหลัง ไม่ต้องลอยติดขอบบน
   หน้าพวกนั้นคนเลื่อนอ่านรายการยาว ๆ แถบที่ลอยอยู่จะกินพื้นที่ไปตลอด
   ต่างจากหน้าผลบอลสดที่ต้องกรองไปดูสกอร์ไป จึงคุ้มที่จะให้ลอย
   บนมือถือแถบสูงสองแถว ยิ่งบังเยอะ */
.pg-program .toolbar,
.pg-results .toolbar{position:static}
/* จัดปุ่มเป็นการ์ด แยกกลุ่มหน้าที่ ซ้าย=กรองรายคู่ ขวา=มุมมองทั้งหน้า */
.tbar{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:14px;
  background:var(--card);border:1px solid var(--line-lit);box-shadow:var(--shadow)}
.tbar .tb{background:var(--card-2);border-color:var(--line)}
#btnGroup.is-on{background:var(--card-2);border-color:var(--line);color:var(--text-dim);box-shadow:none}
.tbar .tb:hover{border-color:var(--blue)}
.tbar .seg{background:var(--card-2);border-color:var(--line);box-shadow:none}

/* ปุ่มภาษาแบบธง ธงของภาษาที่ใช้อยู่จะคมชัด อีกอันจางและเบลอ */
.tb.lang{padding:4px 8px;gap:6px}
.fl{width:22px;height:15px;border-radius:3px;overflow:hidden;display:block;line-height:0;
  filter:grayscale(.85) blur(.7px);opacity:.4;transition:.22s}
.fl svg{width:100%;height:100%;display:block}
html[lang="th"] .fl.th,html[lang="en"] .fl.en{filter:none;opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.toolbar .sp{flex:1}
.tb{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:var(--card);border:1px solid var(--line-lit);color:var(--text-dim);transition:.18s;white-space:nowrap}
.tb:hover{color:var(--text);border-color:var(--blue);background:var(--card-2)}
.tb i{font-style:normal;font-family:var(--ff-display);font-weight:700;font-size:11.5px;opacity:.8}
.tb.is-on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--glow)}
.tb[disabled]{opacity:.6;cursor:progress}
.tb.is-on svg{fill:currentColor}
.tb.warn{border-color:var(--gold);color:var(--gold)}
.tb.lang b{font-family:var(--ff-display);font-size:11px;padding:1px 6px;border-radius:5px;background:var(--card-2);border:1px solid var(--line)}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:var(--card);border:1px solid var(--line-lit);border-radius:999px;padding:3px}
/* รองรับทั้งปุ่มและลิงก์ในชุดเดียวกัน
   ชุดฮอตลีกใช้ปุ่มเพราะสลับด้วย JavaScript ในหน้าเดิม
   ชุดมุมมองเวลาใช้ลิงก์เพราะต้องโหลดหน้าใหม่ และต้องกดได้แม้ JavaScript ไม่ทำงาน */
.seg button,.seg a{display:flex;align-items:center;justify-content:center;
  padding:5px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--text-mute);transition:.18s;white-space:nowrap;
  /* ต้องตั้งความสูงบรรทัดเอง ห้ามปล่อยให้เบราว์เซอร์เลือกให้
     ปุ่มใช้ค่า normal ราว 1.15 เท่า ส่วนลิงก์สืบทอดจากตัวแม่ราว 1.45 เท่า
     สองชุดในแถบเดียวกันจึงสูงต่างกันราว 4px ทั้งที่ตั้งขนาดตัวอักษรและระยะขอบเท่ากันแล้ว
     ตั้งเป็นค่าเดียวกันตรงนี้ มีผลทั้งมุมมองคอมและมุมมองมือถือ */
  line-height:1.25}
.seg button.is-on,.seg a.is-on{background:var(--blue);color:#fff;box-shadow:var(--glow)}
/* ลีกดังไม่มีบอลเตะ ปุ่ม "ทั้งหมด" กะพริบให้สะดุดตา
   วงแหวนขยายออกแล้วจางหาย ไม่ใช่กะพริบทั้งปุ่มซึ่งจะกวนสายตาเกินไป */
.seg button.nudge{color:var(--text);position:relative}
.seg button.nudge::after{content:"";position:absolute;inset:-2px;border-radius:999px;
  border:2px solid var(--blue);animation:nudgeRing 1.5s ease-out infinite;pointer-events:none}
@keyframes nudgeRing{
  0%  {transform:scale(.9);opacity:.9}
  70% {transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .seg button.nudge::after{animation:none;opacity:.9;transform:none}
}
/* ปุ่มในกล่องข้อความ ใช้สีน้ำเงินให้เห็นชัดว่าเป็นทางออก */
.nr-go{background:var(--blue);border-color:var(--blue);color:#fff}
.nr-go:hover{background:#4A9AFF;border-color:#4A9AFF;color:#fff}

/* ================= แผงเลือกลีก / แผงเลือกคืน ================= */
.panel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.pc-top{display:flex;gap:6px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line)}
.pc-top input{flex:1;min-width:150px;background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;color:var(--text);font-family:var(--ff-body);font-size:13px;outline:0}
.pc-top input:focus{border-color:var(--blue);box-shadow:var(--glow)}
.pc-title{flex:1;font-family:var(--ff-display);font-size:13px}
.pc-b{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);font-size:12px;font-weight:500;color:var(--text-dim);transition:.18s}
.pc-b:hover{border-color:var(--blue);color:var(--text)}
.pc-x{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--text-mute);font-size:18px}
.pc-x:hover{background:var(--card-2);color:var(--text)}
.pc-list{max-height:300px;overflow-y:auto;padding:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.lgp-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;min-width:0}
.lgp-item:hover{background:var(--card-2)}
.lgp-item input{width:14px;height:14px;accent-color:var(--blue);flex-shrink:0;margin:0}
.lgp-item img{width:20px;height:14px;object-fit:cover;border-radius:3px;flex-shrink:0}
.lgp-n{min-width:0;flex:1;font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgp-n small{display:block;font-size:10px;color:var(--text-mute)}
.lgp-c{font-family:var(--ff-display);font-size:11px;color:var(--text-mute)}
.hp-list{max-height:300px;overflow-y:auto}
.hp-row{display:grid;grid-template-columns:46px minmax(0,1fr) minmax(0,150px) 74px;align-items:center;gap:7px;
  padding:6px 12px;border-bottom:1px solid var(--line);font-size:12px}
.hp-row:last-child{border-bottom:0}
.hp-row .t{font-family:var(--ff-display);color:var(--text-mute)}
.hp-row .l{color:var(--text-mute);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.hp-row .m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.hp-row .m em{font-style:normal;color:var(--text-mute);margin:0 6px}
.hp-row .pc-b{justify-self:end}
.pc-empty{padding:20px;text-align:center;color:var(--text-mute);font-size:13px}

/* ================= หัวลีกในโหมดจัดกลุ่ม ================= */
/* ห้ามใส่ display:flex ให้ td โดยตรง ตารางจะคำนวณความกว้างช่องนั้นผิดจนข้อความหาย
   ต้องห่อเนื้อหาไว้ใน div แล้วค่อย flex ที่ div */
/* ดาวท้ายหัวลีก กดติดตามทั้งลีกรอบเดียว */
/* ระยะระหว่างชื่อประเทศกับดาว ให้ดูเท่ากับระยะธงกับชื่อลีกซึ่งเป็น 7px
   ต้องหักสองอย่างที่วัดจาก CSS ไม่เห็น
     1) ช่องไฟในปุ่ม ข้างละ 4px  ((22-14)/2)
     2) ช่องว่างในตัวรูปดาวเอง ปลายดาวเว้าเข้าไปอีกราว 3px
        ต่างจากธงที่เป็นสี่เหลี่ยมทึบเต็มกรอบพอดี
   รวมต้องหัก 7px จึงตั้ง margin เป็น 0 แล้วดึงกลับอีก 3px */
.lg-star{margin-left:-3px;width:22px;height:22px;flex-shrink:0;display:inline-grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--text-mute);border-radius:6px;transition:.16s;padding:0}
.lg-star svg{width:14px;height:14px}
.lg-star:hover{color:var(--gold);background:rgba(255,197,61,.12)}
/* ปุ่มดาวสูง 22px ส่วนบรรทัดข้อความในหัวลีกสูงราว 17px
   ถ้าปล่อยไว้ หัวลีกหน้าแรกจะสูงกว่าหน้าโปรแกรมกับหน้าย้อนหลังที่ไม่มีปุ่มนี้
   ใส่ระยะขอบบนล่างติดลบ ให้ส่วนที่เกินบรรทัดไม่ไปดันความสูงของกล่อง
   ปุ่มยังใหญ่เท่าเดิมสำหรับนิ้ว แค่ไม่นับรวมในการคำนวณความสูง
   ผลคือหัวลีกทุกหน้าสูงเท่ากัน เพราะวัดจากข้อความอย่างเดียวเหมือนกันหมด */
.lghead .lg-star{margin-top:-4px;margin-bottom:-4px}
.lg-star.on{color:var(--gold)}
.lg-star.on svg{fill:currentColor}
.ui-mobile .lg-star{width:26px;height:26px}
.ui-mobile .lg-star svg{width:15px;height:15px}

/* หัวลีกเป็นชั้นรอง เล็กและจางกว่าหัวสถานะชัดเจน */
tr.lghead td{background:linear-gradient(90deg,var(--card-2),transparent 70%);padding:4px 12px;height:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--line-lit);
  font-family:var(--ff-display);font-weight:600;font-size:11.5px;color:var(--text-dim)}
.lgh-in{display:flex;align-items:center;width:100%}
/* ชื่อประเทศมี margin-left:auto อยู่แล้ว จึงถูกดันไปชิดขวา
   ถ้าดาวมี margin-left:auto ด้วย จะเกิดช่องว่างสองชั้น ชื่อประเทศเลยค้างอยู่ทางซ้าย
   ดาวจึงใช้ระยะคงที่ ให้ไปเกาะติดกับชื่อประเทศเป็นก้อนเดียวกัน */
.lgh-in .lg-star,.lghead .lg-star{margin-left:-3px}
tr.lghead:first-child td{border-top:0}
tr.lghead td img{width:20px;height:14px;object-fit:cover;border-radius:3px;margin-right:7px;flex-shrink:0}
tr.lghead td small{color:var(--text-mute);font-weight:500;font-size:10.5px;margin-left:auto;padding-left:10px}
/* ปุ่มพับลีก ชิดขวาสุดของหัวลีก */
tr.lghead td{position:relative}
.ui-mobile .lghead{position:relative}
/* ลีกที่ปักหมุดไว้ใน config ให้ขีดข้างเป็นสีทอง จะได้รู้ว่าทำไมขึ้นก่อน */
tr.lghead.hot td{box-shadow:inset 3px 0 0 var(--gold)}
.ui-mobile .lghead.hot{border-color:rgba(255,197,61,.5);box-shadow:inset 3px 0 0 var(--gold)}
.lghead .hotmark{font-size:9.5px;font-weight:700;color:#3A2A00;background:var(--gold);
  padding:1px 7px;border-radius:99px;margin-left:8px;flex-shrink:0}
/* โหมดจัดกลุ่ม: ชื่อลีกกับธงในแต่ละแถวซ้ำกับหัวลีกอยู่แล้ว ยุบทิ้งให้ชื่อทีมได้พื้นที่เพิ่ม
   ยุบด้วยการบีบ col ให้กว้าง 0 แทนการ display:none จะได้ไม่ทำให้คอลัมน์อื่นเลื่อน */
body.grouped .lt col.w-flag,body.grouped .lt col.w-lg{width:0}
/* โหมดจัดกลุ่มลีก มีหัวลีกอยู่แล้ว จึงยุบช่องธงกับช่องลีกทิ้ง
   ต้องซ่อนลูกข้างในด้วย ไม่ใช่แค่ตั้งขนาดตัวอักษรเป็นศูนย์
   เพราะรูปโลโก้ไม่สนใจขนาดตัวอักษร จะยังอยู่และเบียดช่องให้กว้างค้างไว้ */
body.grouped .c-flag,body.grouped .c-lg{padding:0;font-size:0;overflow:hidden}
body.grouped .c-flag>*,body.grouped .c-lg>*{display:none}
body.grouped .c-flag img,body.grouped .c-flag .fl-txt{display:none}
body.grouped .lt thead th:nth-child(2),body.grouped .lt thead th:nth-child(3){padding:0;font-size:0}

/* ================= หัวข้อสามตาราง ================= */
/* เผื่อที่ให้แถบบนสุดกับแถบเครื่องมือตอนกระโดดมาด้วยลิงก์ #tLive
   เบราว์เซอร์เลื่อนให้หัวข้ออยู่ที่ขอบบนจอพอดี แต่สองแถบนั้นลอยทับอยู่
   หัวข้อกับคู่แรก ๆ จึงหายไปใต้แถบ ต้องเลื่อนย้อนขึ้นเองถึงจะเห็นจุดเริ่ม
   มีผลเฉพาะตอนกระโดดด้วยลิงก์ ไม่กระทบการเลื่อนตามปกติ */
.sect{margin-bottom:1px;scroll-margin-top:calc(var(--hh) + var(--th) + 6px)}
/* แถวคู่บอลมีจุดกระโดดจากปุ่มดูเพิ่มเติม ต้องเผื่อความสูงของแถบที่ปักหมุดไว้
   ไม่งั้นคู่ที่กระโดดมาจะไปอยู่ใต้แถบเครื่องมือจนมองไม่เห็น
   เผื่อแค่พอดีหัวตาราง ถ้าเผื่อมากกว่านี้จะเหลือที่ว่างจนแถวก่อนหน้าโผล่ขึ้นมาด้วย
   ซึ่งทำให้ดูเหมือนกระโดดไม่ตรงจุด */
/* ค่านี้คือระยะที่เว้นไว้เหนือเป้าหมาย ยิ่งมากยิ่งดันคู่ที่กระโดดไปลงต่ำ
   แล้วคู่ก่อนหน้าจะโผล่ขึ้นมาให้เห็นมากขึ้น ไม่ใช่น้อยลง
   เผื่อแค่พอไม่ให้คู่เป้าหมายมุดใต้แถบเครื่องมือที่ปักหมุดอยู่ก็พอ */
.row{scroll-margin-top:calc(var(--hh) + var(--th) - 16px)}
.sect:first-of-type .sect-head{margin-top:0}
/* หัวข้อสามตาราง แยกสีตามสถานะ กำลังแข่ง=แดง รอเตะ=น้ำเงิน จบแล้ว=เทา
   ต้องมีพื้นทึบ เพราะ sticky ถ้าโปร่งจะเห็นแถวลอดขึ้นมา */
/* หัวสถานะใช้พื้นสีทึบ ต่างจากหัวลีกที่เป็นพื้นอ่อน
   ของเดิมทั้งสองอันเป็นพื้นอ่อนไล่สีเหมือนกัน ต่างกันแค่ขนาดตัวอักษร 13 กับ 12
   ในธีมสว่างที่พื้นการ์ดกับพื้นหน้าใกล้กันมาก จึงกลืนจนแยกชั้นไม่ออก
   หัวนี้ปักหมุดอยู่ตอนเลื่อนด้วย สีทึบจึงบอกได้ตลอดว่ากำลังอยู่ในส่วนไหน */
/* หัวสถานะ ระยะ 1px เท่าที่อื่น ตัวมันเองมีพื้นสีทึบเป็นกรอบอยู่แล้ว
   ไม่ต้องพึ่งช่องว่างเพื่อแยกตัวจากเนื้อหา */
.sect-head{display:flex;align-items:center;gap:9px;padding:9px 14px;margin:1px 0;
  border-radius:10px;position:sticky;top:calc(var(--hh) + var(--th));z-index:30;
  border:0;background:var(--card);overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
/* หน้าลีกไม่ปักหมุดหัวข้อ ให้เลื่อนไปกับเนื้อหาตามปกติ
   ค่าปักหมุดของหน้าอื่นเผื่อความสูงแถบเครื่องมือไว้ด้วย แต่หน้าลีกไม่มีแถบนั้น
   จึงเหลือช่องว่างแล้วแถวคู่บอลเลื่อนผ่านให้เห็นครึ่งตัว เหมือนหัวข้อลอยกลางอากาศ
   และหน้านี้มีแค่สามหัวข้อสั้น ๆ ต่างจากหน้าแรกที่ยาวเป็นร้อยคู่
   คนไม่ได้หลงว่าตัวเองอยู่ส่วนไหน การปักหมุดจึงมีแต่เสีย ไม่มีได้ */
.pg-league .sect-head{position:static}
/* h2 ที่ห่อชื่อตารางกับป้ายมุมขวา ล้างสไตล์เริ่มต้นของ h2 ให้หมด
   แล้วทำหน้าที่เป็นแถวยืดหยุ่นแทน ป้ายมุมขวาจึงยังชิดขวาได้เหมือนเดิม */
.sect-h{flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  margin:0;padding:0;font:inherit;line-height:1.25}
.sect-name{font-family:var(--ff-display);font-weight:700;font-size:14.5px;letter-spacing:.4px;color:#fff}
.sect-n{font-size:11px;color:var(--text-mute);margin-left:auto}
/* คำอธิบายชิดขวาของหัวข้อ บอกว่าตารางนี้คือเนื้อหาอะไร */
.sect-note{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-mute);
  font-family:var(--ff-display);letter-spacing:.2px;white-space:nowrap}
.ui-mobile .sect-note{font-size:10.5px}
.sect-dot{width:7px;height:7px;border-radius:50%;background:var(--text-mute);flex-shrink:0;margin-left:2px}
.sect-dot.live{background:var(--red);animation:pulse 1.6s infinite}
.sect-dot.ns{background:var(--blue)}

/* สามสถานะสามสี ใช้ไล่สีทแยงให้ดูมีมิติ ไม่ใช่สีแบนทื่อ

   ต้องมีครบทุกตาราง ตัวหนังสือในหัวตารางเป็นสีขาวเสมอ
   ถ้าตารางไหนไม่เข้ากฎนี้ จะได้พื้นสีการ์ดซึ่งอ่อน แล้วตัวหนังสือขาวจะมองไม่เห็น
   ตอนแยกหน้าแรกเป็นหกตาราง ผมตั้งชื่อใหม่แต่ลืมเพิ่มสีให้สามอันหลัง */
#tLive .sect-head{background:linear-gradient(120deg,#C10D1D,#ED1B2E 55%,#FF4757)}
#tNs   .sect-head{background:linear-gradient(120deg,#0B3FA0,#1B7BFF 55%,#4A9AFF)}
#tFt   .sect-head{background:linear-gradient(120deg,#3A4761,#55637F 55%,#6B7A94)}

/* ตารางลีกดังใช้สีเดียวกันแต่เข้มกว่า บอกว่าเป็นเรื่องเดียวกันและสำคัญกว่า
   พร้อมแถบขาวด้านซ้าย ให้แยกออกจากตารางลีกอื่นได้ตั้งแต่เหลือบตาแรก */
#tLiveH .sect-head{background:linear-gradient(120deg,#8E0A16,#C10D1D 55%,#ED1B2E)}
#tNsH   .sect-head{background:linear-gradient(120deg,#06266B,#0B3FA0 55%,#1B7BFF)}
#tFtH   .sect-head{background:linear-gradient(120deg,#252F42,#3A4761 55%,#55637F)}
#tLiveH .sect-head::before,#tNsH .sect-head::before,#tFtH .sect-head::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(255,255,255,.8)}

/* ตัวหนังสือบนพื้นทึบเป็นสีขาวหมด อ่านง่ายทั้งสองธีม */
/* โลโก้ลีกหน้าชื่อลีก
   ขนาดเล็กและจางกว่าตัวหนังสือเล็กน้อย เป็นตัวช่วยกวาดตา ไม่ใช่ของหลัก
   พื้นขาวจาง ๆ เพราะโลโก้หลายลีกเป็นสีเข้มและจะจมไปกับธีมมืด */
.lglogo{width:16px;height:16px;object-fit:contain;flex-shrink:0;
  background:rgba(255,255,255,.9);border-radius:4px;padding:1px;
  vertical-align:-3px;margin-right:6px}
td.c-lg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ในตารางคอม โลโก้อยู่หน้าชื่อลีกในบรรทัดเดียวกัน
   ในการ์ดมือถือ โลโก้อยู่ในช่องซ้ายเหนือเวลา จึงต้องจัดกึ่งกลางและไม่มีระยะขวา */
.ui-mobile .lglogo{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
/* ธงกับโลโก้ลีกวางคู่กันในช่องซ้าย กว้างรวม 40px ซึ่งพอดีในช่อง 50px
   ธงเป็นสี่เหลี่ยมผืนผ้าจึงกว้างกว่าสูง ส่วนโลโก้เป็นสี่เหลี่ยมจัตุรัส */
.ui-mobile .c-idn{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:3px}
.ui-mobile .c-idn .lgflag{width:18px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0}
.ui-mobile .c-idn .lglogo{width:18px;height:18px;margin:0;flex-shrink:0}
/* มุมมองคอมมีช่องธงกับช่องลีกของตัวเองอยู่แล้ว ไม่ต้องใช้ชุดนี้ */
.ui-desktop .c-idn{display:none}

.sect-note{color:rgba(255,255,255,.85)}
/* คำมุมขวาแสดงทั้งตารางลีกดังและลีกอื่น ไม่ซ่อนอันไหน
   เคยซ่อนของตารางลีกอื่นเพราะคิดว่าซ้ำ แต่หัวตารางเป็นแบบติดขอบบนเวลาเลื่อน
   พอเลื่อนลงมาถึงตารางลีกอื่น หัวตารางฮอตลีกเลื่อนพ้นไปแล้ว
   คำนั้นจึงหายจากสายตา ทั้งที่เป็นจุดที่ต้องการให้เห็นมากที่สุด */
.sect-n{color:rgba(255,255,255,.8)}
.sect-dot{background:rgba(255,255,255,.9)}
.sect-dot.live{background:#fff}
.sect-dot.ns{background:#fff}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ================= ตารางคู่บอล ================= */
.league{border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.lt{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
/* วัดจากข้อมูลจริงเมื่อ 9 ก.ย. 2569
     ชื่อลีกไทย 985 รายการ  90% ไม่เกิน 31 ตัว = 186px ที่ 12px
     ชื่อทีมไทย 6,360 รายการ 90% ไม่เกิน 19 ตัว = 122px ที่ 13px
       บวกโลโก้ 20 และช่องไฟ 12 รวมต้องการ 154px ต่อฝั่ง

   ของเดิมให้ลีก 340px ซึ่งเกินที่ใช้จริงเกือบเท่าตัว
   ชื่อทีมจึงเหลือแค่ฝั่งละ 130px และขึ้นจุดไข่ปลาแทบทุกแถว
   คอมเมนต์เดิมเขียนว่าชื่อทีมเหลือ 242px ซึ่งคำนวณผิดตั้งแต่แรก

   ลดลีกเหลือ 240px (ครอบคลุม 95% ของชื่อลีก) และบีบคอลัมน์อื่นที่เผื่อเกิน
   ชื่อทีมได้เพิ่มเป็นฝั่งละ 205px ซึ่งพอสำหรับชื่อยาวสุด 33 ตัว */
.w-hide{width:26px}.w-flag{width:32px}.w-lg{width:240px}
.w-date{width:44px}.w-time{width:50px}.w-st{width:70px}
.w-score{width:64px}.w-ht{width:62px}.w-star{width:38px}

/* ---------- ตารางแคบ ----------
   มุมมองคอมบนมือถือ viewport ถูกบังคับเป็น width=1024 แล้วย่อทั้งหน้าลงใส่จอ
   ตารางจึงกว้าง 1024 เสมอ ไม่ว่าจอจริงจะ 360 หรือ 412
   เพดาน 1720 ที่ตั้งไว้จึงไม่ช่วยอะไรในกรณีนี้ ต้องบีบคอลัมน์อื่นเอา

   ที่ 1024 ชื่อทีมได้แค่ฝั่งละ 125px ซึ่งไม่พอแม้แต่ชื่อขนาดกลาง
   ยุบชื่อลีกกับคอลัมน์ที่ไม่ใช่ใจความหลักลง ชื่อทีมได้เพิ่มเป็นราว 190px */
@media (max-width:1100px){
  /* วัดจากชื่อจริงในระบบที่ 12.5px
       ชื่อทีม  6,360 รายการ  95% ไม่เกิน 21 ตัว = 160px (รวมโลโก้กับช่องไฟแล้ว)
       ชื่อลีก    985 รายการ  99% ไม่เกิน 43 ตัว = 262px

     ชื่อทีมสั้นกว่าชื่อลีกมาก การให้ทั้งสองเท่ากันจึงเปลืองที่ฝั่งทีม
     ลีก 260px ครอบคลุมชื่อลีก 99% ส่วนทีมเหลือฝั่งละ 169px ครอบคลุม 95%
     ที่เหลืออีก 5% เป็นชื่อยาวผิดปกติซึ่งนาน ๆ โผล่ที ยอมให้ตัดได้ */
  .ui-desktop .w-lg{width:260px}
  .ui-desktop .w-date{width:38px}
  .ui-desktop .w-time{width:44px}
  .ui-desktop .w-st{width:62px}
  .ui-desktop .w-score{width:58px}
  .ui-desktop .w-ht{width:56px}
  .ui-desktop .w-hide{width:22px}
  .ui-desktop .w-flag{width:26px}
  .ui-desktop .w-star{width:32px}
  .ui-desktop .lt{font-size:12.5px}
  .ui-desktop .lt td{padding:4px 4px}
  .ui-desktop .lt thead th{padding:5px 4px}
}
/* หัวตารางห้ามตกบรรทัด ถ้าตกจะดันความสูงหัวและดูไม่เป็นระเบียบ
   คอลัมน์ไหนแคบกว่าคำ ให้ย่อตัวอักษรลงแทนการขึ้นบรรทัดใหม่ */
.lt thead th{white-space:nowrap;padding:5px 6px;border-bottom:1px solid var(--line);background:var(--card-2);text-align:left;
  font-family:var(--ff-display);font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--text-mute)}
.lt th.r{text-align:right}.lt th.c{text-align:center}.lt th.l{text-align:left}
.lt td{padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle;height:32px}
.lt tr:last-child td{border-bottom:0}
.lt tr.row:hover td{background:var(--card-2)}
.lt tr.row{transition:background .3s}
.lt tr.row.is-live td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.lt tr.row.moved td{background:rgba(27,123,255,.14)}

.c-hide{text-align:center}
.hide{width:20px;height:20px;border-radius:6px;color:var(--text-mute);font-size:15px;line-height:1;opacity:.45;transition:.15s}
.hide:hover{opacity:1;background:var(--card-2);color:var(--red)}
.c-flag img{width:22px;height:15px;object-fit:cover;border-radius:3px;display:block;border:1px solid rgba(0,0,0,.25)}
.fl-txt{display:inline-block;width:22px;height:15px;border-radius:3px;background:#132550;color:#9DB6E4;
  font-family:var(--ff-display);font-size:8px;font-weight:700;text-align:center;line-height:15px}
.c-lg{color:var(--text-dim);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.c-time{text-align:center;font-family:var(--ff-display);font-weight:600;font-size:12px;
  color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-st{font-family:var(--ff-display);font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums}
.st.live{color:var(--red);display:inline-flex;align-items:center;gap:5px}
.st.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
.st.ft{font-family:var(--ff-display);font-size:13px;font-weight:700;color:var(--text-dim);letter-spacing:.3px}

/* ป้ายสถานะในหน้าย้อนหลัง ใส่กรอบให้เข้าชุดกับปุ่มไฮไลท์และป้ายเลื่อน
   เฉพาะหน้านี้ ไม่แตะหน้าผลบอลสด เพราะนาทีที่กำลังแข่งเปลี่ยนทุกนาที
   ถ้าใส่กรอบจะทำให้แถวดูหนักและแย่งความสนใจจากสกอร์ */
.pg-results .st.ft,
.pg-results .st.off,
.pg-results .st.pen{display:inline-block;padding:2px 9px;border-radius:6px;
  font-size:11px;font-weight:600;letter-spacing:.2px;
  background:rgba(140,160,200,.14);box-shadow:inset 0 0 0 1px rgba(140,160,200,.35)}
[data-theme="light"] .pg-results .st.ft,
[data-theme="light"] .pg-results .st.off,
[data-theme="light"] .pg-results .st.pen{
  background:rgba(90,110,150,.10);box-shadow:inset 0 0 0 1px rgba(90,110,150,.30)}
.pg-results .st.pen{color:var(--purple)}
.ui-mobile .pg-results .st.ft,
.ui-mobile .pg-results .st.off,
.ui-mobile .pg-results .st.pen{font-size:10px;padding:2px 7px}
/* ปุ่มดูไฮไลท์ พื้นแดงไล่สีมีสามเหลี่ยมเล่น
   ไม่ใช้โลโก้ยูทูปเพราะเป็นเครื่องหมายการค้า วาดเองให้คลาดเคลื่อนยิ่งไม่ควร
   สีแดงกับสามเหลี่ยมสื่อว่าเป็นวิดีโออยู่แล้วโดยไม่ต้องยืมโลโก้ใคร */
.hl{display:inline-flex;align-items:center;justify-content:center;width:26px;height:19px;
  border-radius:6px;margin-right:7px;vertical-align:-4px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#FF2D46,#C4001D);
  box-shadow:0 1px 3px rgba(196,0,29,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition:.16s}
.hl svg{width:13px;height:13px;margin-left:1px}
.hl:hover{background:linear-gradient(135deg,#FF4A5E,#E00023);
  box-shadow:0 2px 8px rgba(255,45,70,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-1px)}
.hl:active{transform:translateY(0) scale(.95)}
/* หัวตาราง "สถานะ" จัดกึ่งกลาง เนื้อหาต้องกึ่งกลางตามไม่งั้นเหลื่อมกัน
   ใช้เฉพาะโหมดตาราง ส่วนโหมดการ์ดมีกฎของตัวเองอยู่แล้ว */
.c-st{white-space:nowrap}
.lt td.c-st{text-align:center}
.lt td.c-st .hl{margin-right:0}
.ui-mobile .c-side .hl{margin:0 0 4px}
.st.off{color:var(--text-mute);font-style:italic}
.st.wait{color:var(--gold)}
.st.nodata{color:var(--text-mute);font-style:italic}
.st.pen{color:var(--purple);font-weight:700}

.c-home{text-align:right}
.c-away{text-align:left}
.c-home>*,.c-away>*{display:inline-block;vertical-align:middle}
.tname{color:inherit;text-decoration:none;font-weight:500;max-width:calc(100% - 64px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 6px}
.tname.win{font-weight:700}
.tname.lose{color:var(--text-dim)}
.tname.penwin{color:var(--purple);font-weight:700}
.badge{width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;overflow:hidden;
  font-family:var(--ff-display);font-weight:700;font-size:8px;color:#fff;box-shadow:inset 0 -2px 5px rgba(0,0,0,.3)}
.badge img{width:100%;height:100%;object-fit:contain;display:block;background:rgba(255,255,255,.92);border-radius:6px}
.cards{display:inline-flex;gap:3px;align-items:center;min-width:1px}
.cd{width:8px;height:11px;border-radius:1.5px;display:inline-grid;place-items:center;
  font-family:var(--ff-display);font-weight:700;font-size:8px;color:#3A2A00;line-height:1}
.cd.yl{background:#F5C518;box-shadow:0 0 0 .5px rgba(0,0,0,.25)}
.cd.rd{background:#E01B24;color:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25)}

.c-score{text-align:center}
.sc{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:56px;padding:2px 6px;border-radius:7px;
  font-family:var(--ff-display);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.sc i{font-style:normal;opacity:.45;font-size:12px}
.sc.pending{font-size:11px;color:var(--text-mute);letter-spacing:2px;font-weight:600}
tr.is-live .sc{background:rgba(77,216,255,.10);color:var(--cyan);box-shadow:0 0 0 1px rgba(77,216,255,.28) inset}
[data-theme="light"] tr.is-live .sc{background:rgba(27,123,255,.14);color:#0B3FA0;box-shadow:0 0 0 1px rgba(27,123,255,.30) inset}
.sc.flash{animation:goal .9s ease}
@keyframes goal{0%{transform:scale(1)}25%{transform:scale(1.35);text-shadow:0 0 18px var(--cyan)}100%{transform:scale(1)}}

.c-ht{text-align:center;font-family:var(--ff-display);font-size:11.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
/* ป้ายครึ่งแรก รวมตัวอักษร HT กับสกอร์ไว้ในป้ายเดียว ดูเป็นก้อนเดียวกัน */
.httag{display:inline-flex;align-items:center;gap:4px;font-family:var(--ff-display);
  font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--text-mute);
  background:var(--card-2);border:1px solid var(--line);border-radius:5px;padding:1px 4px;
  vertical-align:1px;white-space:nowrap}
.httag b{font-size:11px;font-weight:700;color:var(--text-dim);letter-spacing:0;
  font-variant-numeric:tabular-nums}
.c-star{text-align:center}
.star{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;color:var(--text-mute);transition:.18s}
.star:hover{color:var(--gold);background:var(--card-2)}
.star.is-on{color:var(--gold)}
.star.is-on svg{fill:var(--gold)}

/* แถบสีค้าง 15 วิ หลังมีประตู */
/* แถวที่เพิ่งได้ประตู: พื้นทึบสีเข้มของฝั่งที่ยิง ชื่อทีมสีอ่อน กะพริบ ค้างรวม 30 วินาที */
tr.row.hit-h td.c-home,tr.row.hit-h td.c-score,
.ui-mobile .row.hit-h .c-home{
  background:linear-gradient(90deg,#0A3E9E,#1B6FE0 78%)!important;animation:hitFade 30s ease-out forwards}
tr.row.hit-a td.c-away,tr.row.hit-a td.c-score,
.ui-mobile .row.hit-a .c-away{
  background:linear-gradient(270deg,#9E0C55,#E52D82 78%)!important;animation:hitFade 30s ease-out forwards}
.ui-mobile .row.hit-h .c-home,.ui-mobile .row.hit-a .c-away{border-radius:7px;padding:2px 4px}

tr.row.hit-h .c-home .tname,tr.row.hit-a .c-away .tname,
.ui-mobile .row.hit-h .c-home .tname,.ui-mobile .row.hit-a .c-away .tname{
  color:#fff!important;font-weight:800;animation:blinkName 1.1s ease-in-out 9}
tr.row.hit-h td.c-score .sc,tr.row.hit-a td.c-score .sc{color:#fff!important;background:none!important;box-shadow:none!important}
tr.row.hit-h .c-home .badge,tr.row.hit-a .c-away .badge,
.ui-mobile .row.hit-h .c-home .badge,.ui-mobile .row.hit-a .c-away .badge{animation:blinkRing 1.1s ease-in-out 9}

@keyframes hitFade{0%{opacity:0}3%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes blinkName{0%,100%{color:#fff;text-shadow:none}
  50%{color:#FFF6C2;text-shadow:0 0 10px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.45)}}
@keyframes blinkRing{0%,100%{box-shadow:inset 0 -2px 5px rgba(0,0,0,.3)}
  50%{box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 0 0 2px #fff,0 0 12px rgba(255,255,255,.8)}}

.foot{margin:1px 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);text-align:center}
.foot small{font-size:11px;color:var(--text-mute)}
/* ลิงก์หน้าข้อมูลทั่วไป ท้ายทุกหน้า */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:10px}
.foot-links a{font-size:11.5px;color:var(--text-dim);transition:color .16s}
.foot-links a:hover{color:var(--text)}
.foot-act{margin-top:10px}

/* ================= เนื้อหาแนะนำเว็บ ท้ายหน้าแรก ================= */
.intro{margin:1px 0 0;padding:20px 22px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--card),var(--card-2) 60%,var(--card));
  border:1px solid var(--line-lit);box-shadow:var(--shadow)}
.intro::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--blue))}
/* หัวข้อสองบรรทัด ชื่อเว็บอยู่บนเดี่ยว ๆ คำอธิบายอยู่ล่าง จัดกึ่งกลางทั้งคู่
   ใช้เฉพาะหัวข้อแรกของหน้าแรก หัวข้ออื่นยังชิดซ้ายเหมือนเดิม */
.intro h2.h2-two{display:block;text-align:center;line-height:1.35}
.intro h2.h2-two .h2-brand{display:block;font-size:22px;letter-spacing:.6px}
.intro h2.h2-two .h2-tag{display:block;font-size:15px;font-weight:600;color:var(--text-dim);margin-top:2px}
.ui-mobile .intro h2.h2-two .h2-brand{font-size:19px}
.ui-mobile .intro h2.h2-two .h2-tag{font-size:13.5px}
/* สไตล์หลักของหัวข้อบทความอยู่รวมกันที่ส่วน "หัวข้อในบทความ" ด้านล่าง */
.intro h2{font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--text);
  margin:0 0 8px;letter-spacing:.2px}
.intro h2 + p{margin:0 0 18px;font-size:13.5px;color:var(--text-dim);line-height:1.8;max-width:820px}
.intro > p:last-child{margin-bottom:0}

.intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
  margin-bottom:22px}
.ic{padding:14px 15px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);
  transition:.18s}
.ic:hover{border-color:var(--blue);transform:translateY(-2px)}
.ic-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ic-i{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;
  font-size:15px;background:rgba(27,123,255,.12);box-shadow:inset 0 0 0 1px rgba(27,123,255,.22)}
.ic-h b{font-family:var(--ff-display);font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}
.ic p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.7}

/* หัวข้อที่สองมีเส้นคั่นด้านบน แยกจากตารางคุณสมบัติ */
.intro-grid + h2{padding-top:18px;border-top:1px solid var(--line)}

.ui-mobile .intro{padding:16px 14px;border-radius:14px}
.ui-mobile .intro h2{font-size:15px}
.ui-mobile .intro h2 + p{font-size:12.5px;margin-bottom:14px}
.ui-mobile .intro-grid{grid-template-columns:1fr;gap:9px;margin-bottom:18px}
.ui-mobile .ic{padding:12px}
.ui-mobile .ic:hover{transform:none}

/* ================= หน้าข้อมูลทั่วไป ================= */
.doc{line-height:1.8;font-size:14px}
.doc h2{font-family:var(--ff-display);font-size:15px;font-weight:600;color:var(--text);
  margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc p{margin:0 0 10px;color:var(--text-dim)}
.doc b{color:var(--text)}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
[data-theme="dark"] .doc a{color:var(--cyan)}
.doc ul{margin:0 0 12px;padding-left:20px;color:var(--text-dim)}
.doc li{margin-bottom:5px}
.doc code{background:var(--card-2);border:1px solid var(--line);border-radius:5px;
  padding:1px 7px;font-size:12.5px;color:var(--text-dim)}
.ui-mobile .doc{font-size:13.5px;line-height:1.75}
.ui-mobile .doc h2{font-size:14px}
.foot-act .tb{font-size:12px;padding:6px 16px}

/* ================= หน้าแจ้งปัญหา ================= */
.rp-form{display:flex;flex-direction:column;gap:14px}
.rp-f{display:flex;flex-direction:column;gap:6px}
.rp-f > span{font-size:13.5px;font-weight:600;color:var(--text)}
.rp-f > span small{display:block;font-weight:400;font-size:11.5px;color:var(--text-mute);margin-top:2px}
.rp-in{width:100%;background:var(--card-2);border:1px solid var(--line-lit);border-radius:11px;
  padding:11px 14px;color:var(--text);font-family:var(--ff-body);font-size:13.5px;outline:0;
  transition:border-color .18s,box-shadow .18s}
.rp-in:focus{border-color:var(--blue);box-shadow:var(--glow)}
textarea.rp-in{resize:vertical;min-height:110px;line-height:1.6}
select.rp-in{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-mute) 50%),
                   linear-gradient(135deg,var(--text-mute) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.rp-in:invalid:not(:placeholder-shown){border-color:var(--away)}
.rp-send{margin-top:2px;background:linear-gradient(135deg,var(--blue),#0B3FA0);
  border-color:var(--blue);color:#fff;font-weight:600;font-size:14px;padding:12px}
.rp-send:hover{background:linear-gradient(135deg,#4A9AFF,var(--blue));color:#fff}
.rp-err{padding:11px 14px;border-radius:11px;font-size:13px;
  background:rgba(237,27,46,.10);border:1px solid rgba(237,27,46,.35);color:var(--red)}
/* ช่องล่อบอต ต้องไม่ใช่ display:none เพราะบอตบางตัวข้ามช่องที่ซ่อนแบบนั้น */
.rp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rp-ok{text-align:center;padding:10px 0}
.rp-ok .rp-ico{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--draw),#2E9E4F)}
.rp-ok b{display:block;font-family:var(--ff-display);font-size:17px;margin-bottom:6px}
.rp-ok p{margin:0;font-size:13px;color:var(--text-dim)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--card);border:1px solid var(--blue);
  box-shadow:var(--glow),var(--shadow);padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:500;
  opacity:0;pointer-events:none;transition:.28s;z-index:99;
  white-space:nowrap;max-width:calc(100vw - 28px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* ---------- แถบถามเรื่องเสียง ----------
   เบราว์เซอร์ห้ามเว็บเล่นเสียงจนกว่าผู้ใช้จะกดอะไรสักอย่าง การเลื่อนหน้าไม่นับ
   แถบนี้จึงทำสองหน้าที่ในปุ่มเดียว ถามความสมัครใจ และเป็นการกดที่ปลดล็อกให้ด้วย
   วางล่างจอแบบแถบคุกกี้ ไม่บังเนื้อหา คนที่มาดูสกอร์เลื่อนผ่านได้โดยไม่ต้องตอบ */
/* ---------- หน้าแนะนำติดตั้งไอเฟรม /freescore-code/ ----------
   บนคอมแบ่งซ้ายขวา ซ้ายคือตัวเลือก ขวาคือผลลัพธ์ที่ปักหมุดไว้
   คนเห็นโค้ดเปลี่ยนทันทีทุกครั้งที่กด โดยไม่ต้องเลื่อนหน้าไปมา
   บนมือถือเรียงลงมาทีละอัน เพราะจอแคบเกินกว่าจะแบ่งสองฝั่ง */
.fsc-card{padding:20px 22px}
.fsc-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:26px;align-items:start}
.ui-mobile .fsc-build{grid-template-columns:1fr;gap:18px}
.ui-mobile .fsc-card{padding:14px}

/* ---- ฝั่งตัวเลือก ---- */
/* แต่ละขั้นมีกรอบของตัวเอง ทำให้เห็นว่าอะไรอยู่กลุ่มเดียวกันโดยไม่ต้องอ่าน
   ใช้เส้นขอบบางกับพื้นโปร่ง ไม่ใช่กล่องทึบ เพราะกล่องทึบซ้อนในการ์ดอีกทีจะดูหนักและอึดอัด
   ขอบจะเข้มขึ้นเมื่อเอาเมาส์ชี้ ให้รู้ว่าทั้งกลุ่มเป็นหน่วยเดียวกัน */
/* ฝั่งตัวเลือกบนคอมจัดเป็นตารางสองคอลัมน์
   ขั้นแรกกว้างเต็มแถวเพราะมีสี่ปุ่มและเป็นตัวเลือกหลักที่ทุกคนต้องกด
   ขั้นที่เหลือจับคู่กันแถวละสองช่อง การ์ดจึงสั้นลงและกวาดตาได้เร็วกว่าเรียงลงมาทั้งหมด
   บนมือถือเรียงลงมาทีละอันเหมือนเดิม เพราะจอแคบเกินกว่าจะวางคู่กัน */
.fsc-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.fsc-side>.fsc-opt:first-child{grid-column:1 / -1}
.ui-mobile .fsc-side{grid-template-columns:1fr}
.fsc-opt{margin:0;border:1px solid var(--line);border-radius:14px;padding:13px 15px 15px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);transition:.16s}
.fsc-opt:hover{border-color:var(--line-lit)}
[data-theme="light"] .fsc-opt{background:linear-gradient(180deg,rgba(0,0,0,.012),transparent)}
.ui-mobile .fsc-opt{padding:12px 13px 14px;border-radius:12px}
.fsc-lbl{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--text)}
/* เลขลำดับช่วยให้เห็นว่าต้องทำอะไรก่อนหลัง โดยไม่ต้องเขียนคำอธิบายเพิ่ม */
.fsc-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;flex:none}
.fsc-row{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.ui-mobile .fsc-row{grid-template-columns:1fr 1fr}
/* กลุ่มที่ปุ่มสั้นอย่างความสูงของกรอบ วางสี่ปุ่มบรรทัดเดียวได้พอดีแม้บนมือถือ */
.ui-mobile .fsc-row.c4{grid-template-columns:repeat(4,1fr)}
.fsc-b{padding:9px 10px;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line-lit);background:var(--card-2);color:var(--text-dim);transition:.16s}
.fsc-b:hover{border-color:var(--blue);color:var(--text)}
.fsc-b.is-on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--glow)}
.fsc-note{font-size:11.5px;color:var(--text-mute);line-height:1.75;margin:8px 0 0}
/* แถวขนาดกรอบ ป้ายซ้ายกว้างเท่ากันทั้งสองแถว ช่องกรอกกับปุ่มจึงเรียงตรงกัน */
.fsc-size{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.fsc-size:last-child{margin-bottom:0}
.fsc-size>span{flex:none;width:38px;font-size:12.5px;color:var(--text-mute)}
.fsc-size .fsc-row{flex:1;min-width:0}
.fsc-size input{width:92px;flex:none;padding:9px 10px;border-radius:10px;text-align:center;
  border:1px solid var(--line-lit);background:var(--card-2);color:var(--text);
  font-family:var(--ff-display);font-weight:700;font-size:12.5px}
.fsc-size input:disabled{opacity:.45}
.fsc-full{flex:none;padding:9px 14px}

/* ---- แผงผลลัพธ์ ---- */
/* แผงผลลัพธ์ใช้ขอบหนาขึ้นและพื้นทึบ เพื่อแยกจากกรอบตัวเลือกทางซ้ายว่าเป็นคนละหน้าที่
   ซ้ายคือสิ่งที่กด ขวาคือสิ่งที่ได้ */
.fsc-panel{position:sticky;top:calc(var(--hh) + 10px);
  background:var(--card-2);border:1px solid var(--line-lit);border-radius:14px;padding:16px;
  box-shadow:var(--shadow)}
.ui-mobile .fsc-panel{position:static;padding:14px}
.fsc-plbl{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--text);margin:0 0 9px}
.fsc-panel textarea{width:100%;resize:vertical;padding:11px 12px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.75}
.fsc-act{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:9px}
.fsc-copy,.fsc-prev{padding:11px 12px;border-radius:999px;cursor:pointer;text-align:center;
  font-family:var(--ff-display);font-weight:700;font-size:12.5px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.fsc-copy{border:0;background:var(--blue);color:#fff;box-shadow:var(--glow)}
.fsc-prev{border:1px solid var(--line-lit);background:var(--card);color:var(--text)}
.fsc-prev:hover{border-color:var(--blue)}
/* สรุปสิ่งที่เลือก ให้เห็นผลลัพธ์เป็นคำไทยโดยไม่ต้องไปอ่านที่อยู่ในโค้ดเอง */
.fsc-sum{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;
  display:grid;gap:6px;font-size:12px}
.fsc-sum div{display:flex;justify-content:space-between;gap:10px}
.fsc-sum span{color:var(--text-mute)}
.fsc-sum b{color:var(--text);font-weight:600}

/* ---- ตัวอย่างสด ---- */
.fsc-demo{border:1px solid var(--line-lit);border-radius:12px;overflow:hidden;background:var(--bg)}
.fsc-demo iframe{display:block;width:100%;height:520px;border:0}

/* ---- คำถามพบบ่อย ----
   ไม่ใช้คลาส lgdoc เพราะคลาสนั้นบีบความกว้างไว้ที่ 80 ตัวอักษรสำหรับบทความยาว
   ทำให้การ์ดนี้แคบกว่าการ์ดอื่นในหน้าเดียวกันจนดูไม่เข้าชุด
   ที่นี่ใช้เต็มความกว้างแล้วแบ่งสองคอลัมน์บนคอมแทน */
.fsc-faq h3{font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--text);
  margin:0 0 6px;padding-left:12px;position:relative}
.fsc-faq h3::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;
  border-radius:3px;background:linear-gradient(180deg,var(--blue),var(--cyan))}
.fsc-faq p{font-size:13px;line-height:1.85;color:var(--text-dim);margin:0 0 18px}
.fsc-faq code{background:var(--card-2);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text)}
.ui-desktop .fsc-faq .fsc-qa{columns:2;column-gap:30px}
.fsc-faq .fsc-qa>div{break-inside:avoid;page-break-inside:avoid}

.sndbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:98;
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:16px;
  background:var(--card);border:1px solid var(--blue);
  box-shadow:var(--glow),var(--shadow);cursor:pointer;
  transform:translateY(150%);transition:.32s cubic-bezier(.2,.9,.3,1.2)}
.sndbar.on{transform:translateY(0)}
.sndbar:hover{background:var(--card-2)}
/* วงกลมนำสายตา ใช้สีหลักของเว็บ ให้รู้ว่าเป็นของเว็บ ไม่ใช่แจ้งเตือนของเบราว์เซอร์ */
.sndbar .lead{flex:none;width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;box-shadow:var(--glow);
  animation:sndpulse 2.4s ease-in-out infinite}
@keyframes sndpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.sndbar .lead{animation:none}}
.sndbar .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sndbar .t1{font-family:var(--ff-display);font-weight:700;font-size:13.5px;color:var(--text)}
.sndbar .t2{font-size:11.5px;color:var(--text-mute);display:flex;align-items:center;gap:4px}
/* ไอคอนในประโยคทำกรอบเหมือนปุ่มจริงด้านบน เทียบแล้วรู้ทันทีว่าต้องกดอันไหน */
.sndbar .chip{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;flex:none;
  border:1px solid var(--line-lit);background:var(--card-2);color:var(--text-dim)}
/* ปุ่มลำโพงบนป๊อปอัพประตู อยู่ซ้ายของปุ่มปิด ใช้ไอคอนชุดเดียวกับแถบบนสุด */
.g-snd{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-right:2px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer;border:0}
.g-snd:hover{background:rgba(255,255,255,.3)}
/* ปุ่มปิดข้อความ เล็กและจาง ไม่ใช่ทางเลือกหลัก ทางหลักคือกดเปิดเสียง */
/* ปุ่มตอบสองปุ่ม แทนปุ่มกากบาทเดิม
   ใช่เป็นปุ่มหลักสีน้ำเงิน ไม่ใช่เป็นปุ่มรองขอบบาง คนจึงเห็นทางเลือกที่เราแนะนำก่อน */
.sndbar button.yes,.sndbar button.no{flex:none;padding:8px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--ff-display);font-weight:700;font-size:12.5px}
.sndbar button.yes{border:0;background:var(--blue);color:#fff;box-shadow:var(--glow)}
.sndbar button.no{border:1px solid var(--line-lit);background:var(--card-2);color:var(--text-dim)}
.sndbar button.no:hover{border-color:var(--blue);color:var(--text)}
.ui-mobile .sndbar button.yes,.ui-mobile .sndbar button.no{padding:8px 13px;font-size:12px}
/* ปุ่มในกล่องที่ไม่มีข้อมูล ทำให้เด่นพอจะกดแต่ไม่แย่งความสนใจจากข้อความ */
.empty-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;
  padding:9px 20px;border-radius:999px;font-family:var(--ff-display);font-size:13px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--blue),#0B3FA0);
  box-shadow:0 2px 8px rgba(27,123,255,.3);transition:.16s}
.empty-btn:hover{background:linear-gradient(135deg,#4A9AFF,var(--blue));
  box-shadow:0 3px 12px rgba(27,123,255,.45)}
.empty{padding:40px 16px;text-align:center;color:var(--text-mute);font-size:14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.empty b{display:block;color:var(--text);font-size:16px;margin-bottom:6px;font-family:var(--ff-display)}
.empty code{background:var(--card-2);padding:2px 7px;border-radius:5px;font-size:12.5px}

/* ================= ป๊อปอัพประตู =================
   คอลัมน์เดียวกลางจอ เรียงตามลำดับที่ประตูเข้า บนลงล่าง กล่องเป็นโทนสว่างเสมอ
   เจ้าบ้านเลื่อนเข้าจากซ้าย ทีมเยือนจากขวา บอกฝั่งโดยไม่ต้องอ่าน
   แสดงพร้อมกันได้ 6 กล่อง เกินนั้นเข้าคิว ไม่ทิ้งลูกไหน
   ============================================== */
/* จัดกลางด้วย left/right + margin auto ไม่ใช้ translateX เพราะ 100vw
   นับความกว้างแถบเลื่อนเข้าไปด้วย ทำให้เบี้ยวไปทางซ้ายบนเดสก์ท็อป */
.gcol{position:fixed;top:10px;left:0;right:0;margin:0 auto;z-index:80;
  display:flex;flex-direction:column;gap:7px;align-items:stretch;
  width:min(380px,calc(100% - 24px));pointer-events:none}

/* กล่องใช้โทนสว่างเสมอ แม้เว็บจะอยู่ธีมมืด เพราะเด่นกว่าและอ่านง่ายกว่า
   ทำโดยประกาศตัวแปรสีทับเฉพาะในกล่อง ลูกทุกตัวจึงรับค่าใหม่ไปเอง */
.goal{--card:#FFFFFF;--card-2:#F1F5FE;--line:#D8E2F4;
  --text:#0A1633;--text-dim:#4F6082;--text-mute:#8496B4;
  --cyan:#0F4FB0;--red:#D6141F;--purple:#7A3FE0;--away:#D6247A;--away-dim:#A8145C;--draw:#3E8F1E;
  pointer-events:auto;width:100%;background:#fff;border:1px solid #D8E2F4;color:#0A1633;
  border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.5);overflow:hidden;position:relative}
.goal.h{animation:inL .46s cubic-bezier(.2,.9,.3,1.32) both}
.goal.a{animation:inR .46s cubic-bezier(.2,.9,.3,1.32) both}
/* ออกให้จางหายอยู่กับที่ ไม่เลื่อนไปข้าง ๆ
   ถ้าออกไปด้านข้างแล้วชุดใหม่เข้ามาจากด้านข้าง มันจะวิ่งสวนกันจนดูกระพริบ */
.goal.out{animation:gOut .26s ease forwards!important}
@keyframes inL{from{opacity:0;transform:translateX(-60px) scale(.95)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(60px) scale(.95)}to{opacity:1;transform:none}}
@keyframes gOut{to{opacity:0;transform:scale(.97)}}

/* แถบสีคาดหัว ทิศไล่เฉดชี้เข้าหาฝั่งที่กล่องเข้ามา */
.g-band{display:flex;align-items:center;gap:7px;padding:4px 10px;color:#fff;position:relative;overflow:hidden}
.goal.h .g-band{background:linear-gradient(90deg,#0B4FD0,#1B7BFF 45%,#4DD8FF)}
.goal.a .g-band{background:linear-gradient(270deg,#A01055,#E52D82 45%,#FF7DB8)}
.g-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 62%);
  transform:translateX(-120%);animation:sheen 1.5s ease .2s}
@keyframes sheen{to{transform:translateX(120%)}}
.g-ball{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;animation:spin 1.1s linear 2}
.g-ball img{width:100%;height:100%;display:block;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}
.g-word{font-family:var(--ff-display);font-style:italic;font-weight:700;font-size:12px;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.g-side{font-size:9.5px;font-weight:600;opacity:.9;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.18)}
.g-league{font-size:9.5px;opacity:.85;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-league.right{margin-left:auto}
.g-league.left{margin-right:auto}
.g-x{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font-size:13px;color:#fff;opacity:.75;flex-shrink:0}
.g-x:hover{opacity:1;background:rgba(0,0,0,.2)}

.g-mid{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:0;padding:6px 10px 5px}
.g-team{display:flex;align-items:center;gap:5px;min-width:0}
.g-team.h{flex-direction:row-reverse;text-align:right;padding-right:5px}
.g-team.a{padding-left:5px}
.g-team>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-dim)}
.g-team.scored>span:last-child{color:var(--text);font-weight:700}
.g-team .badge{width:18px;height:18px;border-radius:5px}
.g-team.scored .badge{box-shadow:0 0 0 2px #fff,0 0 0 3px currentColor}
.goal.h .g-team.scored{color:var(--cyan)}
.goal.a .g-team.scored{color:var(--away)}
.g-score{display:flex;align-items:center;justify-content:center;gap:2px;font-family:var(--ff-display);
  font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.g-score .n{font-size:18px;color:var(--text-mute);transition:.25s;min-width:15px;text-align:center}
.g-score .d{font-size:11px;color:var(--text-mute);opacity:.45;margin:0 -1px}
.goal.h .g-score .n.h,.goal.a .g-score .n.a{font-size:26px;min-width:20px;animation:gpop .6s cubic-bezier(.2,.9,.3,1.4)}
.goal.h .g-score .n.h{color:#0F4FB0;text-shadow:0 0 16px rgba(27,123,255,.35)}
.goal.a .g-score .n.a{color:#C9236B;text-shadow:0 0 16px rgba(229,45,130,.32)}
@keyframes gpop{0%{transform:scale(.6);opacity:.3}45%{transform:scale(1.28)}100%{transform:scale(1);opacity:1}}
/* บรรทัดคนยิง ชิดฝั่งเดียวกับทีมที่ยิง จะได้รู้ทันทีโดยไม่ต้องอ่านชื่อ */
.g-who{padding:0 11px 6px;font-size:11px;color:var(--text-dim);display:flex;gap:5px;align-items:baseline;
  min-width:0;overflow:hidden}
.goal.h .g-who{justify-content:flex-start}
.goal.a .g-who{justify-content:flex-end}
.g-who b{font-family:var(--ff-display);color:var(--text);font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.g-min{font-family:var(--ff-display);font-size:10px;color:var(--text-mute);flex-shrink:0}
.g-bar{height:2px;background:#E4EBF7;position:relative;overflow:hidden}
.g-bar i{position:absolute;inset:0;transform-origin:left}
.goal.h .g-bar i{background:linear-gradient(90deg,#4DD8FF,#1B7BFF)}
.goal.a .g-bar i{background:linear-gradient(270deg,#FF9EC5,#E52D82)}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.goal:hover .g-bar i{animation-play-state:paused}

/* ================= แถบกำลังโหลด =================
   วางไว้บนสุดของหน้า วิ่งด้วย CSS ล้วน ไม่ต้องรอ JavaScript
   จึงเริ่มวิ่งตั้งแต่เบราว์เซอร์อ่านถึงบรรทัดนี้ ซึ่งเร็วกว่าตอนที่ JS ทำงานมาก

   หายเองโดยไม่ใช้ JavaScript ด้วย: แท็ก <div class="ld-done"> ที่ท้ายหน้า
   จะถูกอ่านก็ต่อเมื่อ HTML มาครบแล้ว แล้วใช้ตัวเลือก ~ สั่งให้แถบจางหายไป
   ================================================= */
.ldbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;overflow:hidden;
  background:rgba(27,123,255,.10);pointer-events:none}
.ldbar i{position:absolute;top:0;bottom:0;width:42%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,transparent,#1B7BFF 18%,#4DD8FF 50%,#8FE9FF 72%,transparent);
  box-shadow:0 0 12px rgba(77,216,255,.65);
  animation:ldrun 1.05s cubic-bezier(.55,.1,.45,.9) infinite}
@keyframes ldrun{
  0%  {transform:translateX(-105%)}
  100%{transform:translateX(255%)}
}
/* พอเจอ .ld-done ท้ายหน้า แปลว่าเนื้อหามาครบแล้ว ให้แถบจางหาย
   ต้องใช้ :has() ไม่ใช่ ~ เพราะแถบอยู่ "ก่อน" .ld-done ในหน้า
   ส่วน ~ จับได้เฉพาะพี่น้องที่อยู่ถัดไปเท่านั้น
   เบราว์เซอร์เก่าที่ไม่รู้จัก :has() มี JavaScript สั่ง .done ให้อีกทาง */
body:has(.ld-done) .ldbar,
.ldbar.done{animation:ldout .45s ease .12s forwards}
@keyframes ldout{to{opacity:0;visibility:hidden}}
[data-theme="light"] .ldbar{background:rgba(27,123,255,.12)}
[data-theme="light"] .ldbar i{
  background:linear-gradient(90deg,transparent,#0F4FB0 18%,#1B7BFF 50%,#6FC8FF 72%,transparent);
  box-shadow:0 0 10px rgba(27,123,255,.45)}
/* เครื่องที่ตั้งค่าลดการเคลื่อนไหว ไม่ต้องวิ่ง */
@media (prefers-reduced-motion:reduce){ .ldbar i{animation:none;width:100%;opacity:.5} }

/* ================= ทีมที่ติดตาม ================= */
.icon-btn{position:relative}
/* ดาวบนแถบหัวเป็นปุ่มเปิดหน้าต่างตั้งค่า ไม่ใช่สวิตช์ จึงไม่เปลี่ยนสี
   ของเดิมเป็นทองเมื่อ "มีของในรายการ" แต่คนอ่านว่า "กำลังกรองอยู่"
   เพราะสีทองในเว็บนี้แปลว่าเปิดใช้งาน กลายเป็นสองปุ่มเปลี่ยนสีคนละความหมาย
   ตอนนี้เหลือปุ่มเดียวที่เปลี่ยนสีคือปุ่มกรองในแถบเครื่องมือ */
.icon-btn.is-on{border-color:var(--line-lit);color:#B9C9E4}
.icon-btn.is-on svg{fill:none}
.badge-n{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--gold);color:#3A2A00;font-family:var(--ff-display);font-weight:700;font-size:9.5px;
  font-style:normal;display:grid;place-items:center;line-height:1}
.badge-n[hidden]{display:none}

/* หน้าต่างทีมที่ติดตาม เต็มจอ ปิดด้วยปุ่มเท่านั้น */
.tmpop{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;
  background:var(--bg);animation:ftIn .18s ease both}
.tmpop[hidden]{display:none}
.tmpop.out{animation:ftOut .16s ease forwards}
.tmbox{flex:1;display:flex;flex-direction:column;min-height:0;max-width:820px;width:100%;margin:0 auto}
.tm-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--card-2),transparent);flex-shrink:0}
.tm-head b{font-family:var(--ff-display);font-size:15px}
.tm-x{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line-lit);background:var(--card);color:var(--text-dim);font-size:12.5px;font-weight:600}
.tm-x:hover{border-color:var(--blue);color:var(--text)}
.tm-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:10px 16px 0;flex-shrink:0}
.tm-tabs button{padding:8px;border-radius:10px;border:1px solid var(--line-lit);background:var(--card);
  color:var(--text-dim);font-size:13px;font-weight:600;transition:.16s}
.tm-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--glow)}
.tm-search{padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.tm-search input{width:100%;background:var(--card-2);border:1px solid var(--line-lit);border-radius:999px;
  padding:10px 16px;color:var(--text);font-family:var(--ff-body);font-size:13.5px;outline:0}
.tm-search input:focus{border-color:var(--blue);box-shadow:var(--glow)}
.tm-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-content:start}
.tm-sec{grid-column:1/-1;font-family:var(--ff-display);font-size:12px;color:var(--text-dim);
  padding:12px 6px 4px;letter-spacing:.4px;border-top:1px solid var(--line);margin-top:6px}
.tm-sec:first-child{border-top:0;margin-top:0;padding-top:4px}
.tm-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;cursor:pointer;min-width:0;
  border:1px solid transparent;transition:.15s}
.tm-item:hover{background:var(--card-2)}
.tm-item.on{background:rgba(255,197,61,.12);border-color:rgba(255,197,61,.5)}
.tm-logo{width:26px;height:26px;border-radius:7px;flex-shrink:0;object-fit:contain;
  background:rgba(255,255,255,.92);padding:2px}
.tm-logo.txt{display:grid;place-items:center;background:#33456F;color:#fff;padding:0;
  font-family:var(--ff-display);font-weight:700;font-size:9px}
.tm-item span.nm{flex:1;min-width:0;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-item span.nm small{color:var(--text-mute);font-size:11px;font-weight:400}
.tm-logo.flag{object-fit:cover;padding:0;background:none;border-radius:4px;width:26px;height:18px}
.tm-item .cnt{flex-shrink:0;font-family:var(--ff-display);font-size:11.5px;color:var(--text-mute);
  background:var(--card-2);border-radius:99px;padding:1px 8px;margin-right:2px}
.tm-item.on .cnt{background:rgba(255,197,61,.20);color:var(--text)}
.tm-item .st{width:20px;height:20px;flex-shrink:0;color:var(--text-mute)}
.tm-item.on .st{color:var(--gold)}
.tm-item.on .st svg{fill:var(--gold)}
.tm-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--card-2);font-size:12.5px;flex-shrink:0}
.tm-foot .sw{margin-left:auto}
.tm-empty{grid-column:1/-1;padding:26px;text-align:center;color:var(--text-mute);font-size:13px}
.ui-mobile .tm-list{grid-template-columns:1fr}

/* ================= หน้าเฉพาะลีก ================= */
/* แถบไอคอนลีก ใช้เหมือนกันทั้งคอมและมือถือ เลื่อนแนวนอนได้เมื่อจอแคบ */
/* แถบไอคอนลีก เป็นแถบเต็มความกว้างต่อจากแถบหัวเว็บ
   พื้นเข้มกว่าพื้นหน้าเล็กน้อย ให้ดูเป็นส่วนต่อของแถบหัว ไม่ใช่การ์ดลอยในเนื้อหา */
/* ระยะแนวตั้งทั้งหน้าใช้ 1px เท่ากันหมด
   ของเดิมแต่ละอันเว้น 10px ทำให้หน้ายาวโดยไม่ได้อะไรเพิ่ม
   ช่องไฟภายในการ์ดยังเหมือนเดิม เนื้อหาจึงไม่อึดอัด */
.lgbar{background:linear-gradient(180deg,#060D20,var(--bg));border-bottom:1px solid var(--line);
  margin-top:1px}
.lgnav{padding:6px 16px}
.ui-mobile .lgnav{padding:5px 1px}
[data-theme="light"] .lgbar{background:linear-gradient(180deg,#DCE6F7,var(--bg))}
/* สิบสองลีกเรียงยาวเกินจอ ช่องไฟจึงเหลือ 1px เพื่อให้เห็นลีกได้มากที่สุดในหนึ่งจอ
   และเป็นระยะเดียวกับที่การ์ดอื่นทั้งเว็บใช้ */
.lgnav{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;padding:8px 16px}
.lgnav::-webkit-scrollbar{display:none}
/* ---------- บอกว่ายังเลื่อนต่อได้ ----------
   แถบที่เลื่อนได้บนมือถือไม่มีแถบเลื่อนให้เห็น คนจึงไม่รู้ว่ามีลีกซ่อนอยู่ทางขวา
   ใส่เงาไล่สีคลุมขอบขวาให้ไอคอนตัวสุดท้ายจางหายไป เป็นสัญญาณที่คนอ่านออกโดยไม่ต้องมีข้อความ
   ครอบตัวแถบด้วย div เพื่อวางเงาทับได้โดยไม่เลื่อนตามเนื้อหา
   ซ่อนเงาเมื่อเลื่อนสุดแล้ว จะได้ไม่หลอกว่ายังมีต่อ */
.lgwrap{position:relative}
/* ปุ่มเลื่อนดูลีก เป็นปุ่มจริงเพราะต้องกดได้ กดครั้งเดียวเลื่อนทีละโลโก้ กดค้างเลื่อนต่อเนื่อง
   วงกลมทึบสีฟ้าสด สีรองของเว็บซึ่งไม่มีในโลโก้ลีกไหน เห็นชัดไม่ว่าทับอยู่บนสีอะไร

   ปิดเมนูกดค้างของเบราว์เซอร์ให้หมด ทั้ง touch-callout ที่ทำให้ขึ้นเมนูบันทึกรูป
   การเลือกข้อความ และแถบไฮไลต์ตอนแตะ ไม่งั้นกดค้างเพื่อเลื่อนจะกลายเป็นเปิดเมนูแทน */
.lgmore,.lgless{position:absolute;top:50%;width:24px;height:24px;z-index:3;
  margin-top:-12px;border:0;padding:0;border-radius:999px;cursor:pointer;
  transition:opacity .25s,transform .12s;background-color:var(--cyan);
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lgmore{right:6px;animation:lgpeekR 1.5s ease-in-out infinite;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062033' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.lgless{left:6px;animation:lgpeekL 1.5s ease-in-out infinite;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062033' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.lgmore:active,.lgless:active{transform:scale(.9);animation:none}
/* สุดทางด้านไหน ปุ่มด้านนั้นหายไป จะได้ไม่หลอกว่ายังมีต่อ */
.lgwrap.at-end .lgmore,.lgwrap.at-start .lgless{opacity:0;pointer-events:none;animation:none}
@keyframes lgpeekR{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes lgpeekL{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.lgmore,.lgless{animation:none}}
.lgn{flex:1 0 auto;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:7px 6px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  color:var(--text-dim);font-size:11px;font-weight:600;transition:.18s;text-align:center}
.lgn img{width:38px;height:38px;border-radius:9px;display:block}
.lgn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lgn:hover{border-color:var(--blue);color:var(--text);transform:translateY(-2px)}
.lgn.is-on{border-color:var(--blue);color:#fff;
  background:linear-gradient(180deg,rgba(27,123,255,.22),rgba(27,123,255,.06));
  box-shadow:var(--glow)}
[data-theme="light"] .lgn.is-on{color:var(--blue-dim)}
/* มือถือเหลือแค่รูป ชื่อยังอยู่ใน HTML แต่ซ่อนด้วย CSS
   จอ 360px ใส่ได้หกอันพอดีโดยไม่ต้องเลื่อน */
.ui-mobile .lgnav{gap:1px;padding:6px 1px}
/* จากหกลีกเป็นสิบสองลีก บนมือถือเรียงพอดีจอไม่ได้แล้ว
   ให้แต่ละอันกว้างอย่างน้อย 52px แล้วเลื่อนแนวนอนได้ ถ้าลีกน้อยยังยืดเต็มจอเหมือนเดิม */
.ui-mobile .lgn{flex:1 0 52px;min-width:52px;padding:6px 4px;border-radius:10px}
/* โลโก้ทางการจาก API พื้นขาว ใส่กรอบมนกับพื้นให้ดูเป็นชุดเดียวกับไอคอนที่วาดเอง */
.lgn img.lg-api,.lgcard img.lg-api{object-fit:contain;background:#fff;padding:5px;border:1px solid var(--line)}
.ui-mobile .lgn span{display:none}
.ui-mobile .lgn img{width:100%;height:auto;max-width:46px;border-radius:9px}
.ui-mobile .lgn:hover{transform:none}

/* หน้ารวมลีก */
.lggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;margin-bottom:1px}
.lgcard{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 12px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);transition:.18s;text-align:center}
.lgcard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--glow)}
.lgcard img{width:56px;height:56px;border-radius:12px}
.lgcard .nm{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--text)}
.lgcard .sub{font-size:11px;color:var(--text-mute)}
.ui-mobile .lggrid{grid-template-columns:1fr 1fr;gap:8px}
.ui-mobile .lgcard{padding:12px 8px}
.ui-mobile .lgcard img{width:46px;height:46px}
.ui-mobile .lgcard .nm{font-size:12.5px}

/* นัดแบบกางพับ กดหัวข้อเพื่อเปิดปิด */
.rds{display:flex;flex-direction:column;gap:5px}
.rd-h{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:9px;
  cursor:pointer;background:var(--card-2);border:1px solid var(--line);transition:.16s;
  font-family:var(--ff-display);font-size:12.5px;font-weight:600;color:var(--text-dim);text-align:left}
.rd-h:hover{border-color:var(--blue);color:var(--text)}
.rd-h .cv{font-size:15px;line-height:1;color:var(--blue);transition:transform .2s;flex-shrink:0}
[data-theme="dark"] .rd-h .cv{color:var(--cyan)}
.rd-h .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-h .n{flex-shrink:0;font-size:10.5px;font-weight:500;color:var(--text-mute);
  background:var(--card);border-radius:99px;padding:2px 9px}
/* กล่องแถวของการ์ดคู่วันนี้ในหน้าลีก แสดงตลอด ไม่ต้องกดกาง
   ต่างจาก rd-b ของการ์ดโปรแกรมซึ่งซ่อนไว้จนกว่าจะกดเปิดนัดนั้น */
.td-b{display:flex;flex-direction:column;gap:3px;padding:5px 0 3px}
.rd-b{display:none;padding:5px 0 3px}
.rd.open .rd-b{display:flex;flex-direction:column;gap:3px}
.rd.open .rd-h{border-color:var(--line-lit);background:var(--card)}
.rd.open .rd-h .cv{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){ .rd-h .cv{transition:none} }

/* ตารางคะแนน */
.tblwrap{overflow-x:auto;scrollbar-width:thin;
  /* กันเงาของช่องที่ตรึงไว้ล้นออกนอกการ์ด */
  margin:0 -2px;padding:0 2px}
.sttab{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:622px}
/* ตารางเหย้า/เยือนไม่มีคอลัมน์ห้านัดหลัง จึงแคบลงและอาจไม่ต้องเลื่อนเลยบนจอกลาง */
.sttab.noform{min-width:490px}
.sttab thead th{padding:5px 3px;font-family:var(--ff-display);font-size:10px;font-weight:600;
  color:var(--text-mute);letter-spacing:.2px;text-align:center;
  border-bottom:1px solid var(--line);background:var(--card-2)}
.sttab thead th.l{text-align:left;padding-left:7px}
.sttab td{padding:5px 3px;text-align:center;font-size:12px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.sttab tbody tr:hover td{background:var(--card-2)}
/* คอลัมน์แคบลงจากเดิม ตัวเลขแค่หลักเดียวสองหลักไม่ต้องกว้าง 44px */
/* ทุกคอลัมน์กำหนดความกว้างชัดเจน ไม่ใช้ auto
   ตารางแบบ table-layout:fixed คำนวณ auto ไม่แน่นอน บางกรณีได้ความกว้างเป็นศูนย์
   จนชื่อทีมหายไปทั้งคอลัมน์ */
.s-rank{width:30px}.s-team{width:220px}.s-n{width:34px}.s-g{width:54px}.s-pts{width:42px}.s-form{width:106px}
.sttab td.s-rank{font-family:var(--ff-display);color:var(--text-mute)}

/* ตรึงอันดับกับชื่อทีมไว้ตอนเลื่อนดูตัวเลขทางขวา
   ต้องมีพื้นทึบ ไม่งั้นเนื้อหาที่เลื่อนผ่านจะทะลุขึ้นมา */
.sttab th:nth-child(1),.sttab td.s-rank{position:sticky;left:0;z-index:2;background:var(--card)}
/* เงาบอกว่ามีของอยู่ทางขวาให้เลื่อนดู
   ธีมสว่างใช้เงาดำได้เพราะพื้นขาว แต่ธีมมืดพื้นเข้มอยู่แล้ว เงาดำจึงกลืนหายไป
   ธีมมืดจึงใช้เส้นเรืองแสงสีฟ้าแทน ซึ่งเห็นชัดบนพื้นเข้ม */
.sttab th:nth-child(2),.sttab td.s-team{position:sticky;left:30px;z-index:2;background:var(--card);
  box-shadow:6px 0 8px -6px rgba(0,0,0,.35)}
[data-theme="dark"] .sttab th:nth-child(2),
[data-theme="dark"] .sttab td.s-team{
  box-shadow:1px 0 0 rgba(77,216,255,.30), 7px 0 10px -6px rgba(0,0,0,.75)}
.sttab thead th:nth-child(1),.sttab thead th:nth-child(2){z-index:3;background:var(--card-2)}
.sttab tbody tr:hover td.s-rank,.sttab tbody tr:hover td.s-team{background:var(--card-2)}
.sttab td.s-team{text-align:left;padding-left:7px}
.sttab td.s-team .in{display:flex;align-items:center;gap:7px;min-width:0}
.sttab td.s-team .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sttab td.s-team .badge{width:19px;height:19px;flex-shrink:0}
.sttab td.s-pts{font-family:var(--ff-display);font-weight:700;font-size:13.5px;color:var(--text)}
.sttab td.plus{color:var(--draw)}
.sttab td.minus{color:var(--away)}
.sttab td.s-form{text-align:left;white-space:nowrap}
/* แถบสีซ้ายบอกโซน เข้ารอบยุโรปหรือตกชั้น */
.sttab tr.q-ucl  td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.sttab tr.q-uel  td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.sttab tr.q-uecl td:first-child{box-shadow:inset 3px 0 0 var(--draw)}
.sttab tr.q-pro  td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.sttab tr.q-rel  td:first-child{box-shadow:inset 3px 0 0 var(--away)}
/* จอแคบ ไม่ซ่อนคอลัมน์แล้ว เก็บครบทุกช่องแล้วให้เลื่อนดูแทน
   ตรึงอันดับกับชื่อทีมไว้ จะได้รู้เสมอว่ากำลังดูแถวไหน
   เคยลองซ่อน ชนะ/เสมอ/แพ้/ได้เสีย/ห้านัดหลัง แล้วข้อมูลหายไปเลย ไม่มีทางดูได้
   ย่อความกว้างแต่ละคอลัมน์ลงแทน จะได้เลื่อนไม่ไกล */
@media (max-width:430px){
  /* ย่อทุกคอลัมน์ให้พอดีเนื้อหาจริงที่ 10.5px
     ตัวเลขสองหลักกว้างราว 12px คอลัมน์ 24px จึงพอ
     ได้-เสียแบบ 10-12 ราว 30px คอลัมน์ 38px พอ
     ห้านัดหลังห้าวง วงละ 14+1 รวม 75px คอลัมน์ 80px พอ
     รวมตารางแคบลงจาก 470 เหลือ 412px เลื่อนน้อยลง 58px */
  /* ช่องชื่อทีม 128px หักโลโก้ 15 ช่องไฟ 4 ระยะซ้าย 4 เหลือข้อความ 105px
     ปรับลงมาสามรอบจาก 150 เพราะประมาณความกว้างตัวอักษรไทยเผื่อไว้เกินจริงทุกครั้ง
     ตัวอักษรไทยที่ 10.5px จริงกว้างราว 5.2px ไม่ใช่ 6.1 อย่างที่คำนวณไว้แรก
     105px จึงยังพอสำหรับชื่อ 20 ตัวอย่างปารีส แซงต์-แชร์กแมง */
  .sttab{min-width:422px}
  .sttab.noform{min-width:344px}
  .s-rank{width:26px}.s-team{width:128px}.s-n{width:24px}
  .s-g{width:38px}.s-pts{width:30px}.s-form{width:80px}
  .sttab thead th{font-size:9px;padding:4px 2px}
  .sttab td{font-size:10.5px;padding:4px 2px}
  .sttab td.s-team{padding-left:4px}
  .sttab td.s-team .in{gap:4px}
  .sttab td.s-team .nm{font-size:10.5px}
  .sttab td.s-team .badge{width:15px;height:15px}
  .sttab td.s-pts{font-size:11.5px}
  .fm{width:14px;height:14px;font-size:8.5px;margin-right:1px}
}

/* ผลห้านัดหลัง */
.fm{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;margin-right:2px;
  font-style:normal;font-size:9.5px;font-weight:700;color:#fff;font-family:var(--ff-display)}
/* ผลห้านัดหลังใช้ชุดสีของตัวเอง ไม่ใช้สีฝั่งเจ้าบ้าน/ทีมเยือน
   เพราะแต่ละแถวคือคนละทีม ไม่มีเจ้าบ้านหรือทีมเยือนให้ยึด
   ตรงนี้บอกว่า "ทีมนี้ชนะหรือแพ้" ไม่ใช่ "ใครชนะ"

   น้ำเงินชนะ  เขียวเสมอ (สีเดียวกับเสมอในหน้ารายละเอียด)  แดงแพ้
   น้ำเงินซ้ำกับแถบโซนแชมเปียนส์ลีกในตารางเดียวกัน แต่คนละตำแหน่งคนละรูปทรง
   แถบโซนเป็นเส้นบางขอบซ้ายสุด ส่วนนี่เป็นกล่องมนมีตัวอักษรอยู่ขวาสุด */
.fm.w{background:var(--blue)}
.fm.d{background:var(--draw);color:#06301C}
.fm.l{background:#D6141F}
[data-theme="light"] .fm.w{background:var(--blue-dim)}

/* โปรแกรม/ผลล่าสุดในหน้าลีก */
.lgfx{display:flex;flex-direction:column;gap:3px}
/* แถวโปรแกรมในหน้าลีก ตัวอักษรเล็กลงหนึ่งขั้นและช่องไฟแคบลง
   เพราะเพิ่มโลโก้เข้ามา ต้องเผื่อที่ให้ชื่อทีมเท่าเดิม */
/* คอมมีพื้นที่เหลือเยอะ ใช้ขนาดสบายตา ชื่อทีมได้ฝั่งละเกือบ 500px อยู่แล้ว
   ส่วนมือถือบีบให้กระชับที่สุดในกฎด้านล่าง เพราะพื้นที่ต่างกันสิบเท่า */
/* คอลัมน์กลางกว้างตามเนื้อหา ไม่ตรึงเป็นตัวเลข
   ของเดิมตรึงไว้ 44px คำว่า "พบ" ใช้แค่ 14px จึงเหลือช่องว่างรอบ 15px ต่อข้าง
   ส่วนสกอร์ใช้ 30px เหลือ 7px ชื่อทีมจึงห่างจากตัวคั่นไม่เท่ากันระหว่างสองตาราง
   ใช้ auto แล้วให้สองฝั่งเป็น 1fr เท่ากัน ตัวคั่นอยู่กลางแถวเสมอ
   และชื่อทีมชิดตัวคั่นเท่ากันทุกแถวทุกตาราง */
/* ต้องเป็น minmax(0,1fr) ไม่ใช่ 1fr เฉย ๆ
   1fr ย่อได้ไม่ต่ำกว่าความยาวข้อความ ชื่อทีมยาวอย่าง "ไอน์ทรัค แฟรงค์เฟิร์ต"
   จึงดันคอลัมน์จนล้นแถวและไปทับสกอร์ ซึ่งเป็นสาเหตุที่หน้าพัง
   minmax(0,...) อนุญาตให้ย่อจนเหลือศูนย์ได้ ข้อความส่วนเกินจึงถูกตัดแทนการดัน
   หน้าทีมใช้แบบนี้อยู่แล้วจึงไม่เคยมีปัญหา */
/* วันที่กับเวลามีเนื้อหาคงที่ ไม่ต้องเผื่อ
   "21:00" ห้าตัวอักษรเสมอ ใช้จริงราว 28px  "12/9" ใช้ราว 22px
   ของเดิมตั้ง 46 กับ 50px ซึ่งเผื่อไว้เกือบเท่าตัว
   ลดลงแล้วคืนพื้นที่ให้ชื่อทีมได้ 30px ต่อแถว */
.lgfx-row{display:grid;grid-template-columns:34px 32px minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px;
  padding:8px 10px;border-radius:9px;background:var(--card-2);font-size:12.5px;transition:.15s}
/* โลโก้ทีมในแถวโปรแกรม อยู่ติดชื่อทีมและอยู่ฝั่งกลางเสมอ
   เจ้าบ้านโลโก้อยู่หลังชื่อ ทีมเยือนอยู่หน้าชื่อ ทั้งคู่จึงชิดตรงกลาง */
.lgfx-row .t{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.lgfx-row .t.r{justify-content:flex-end}
.lgfx-row .tlg{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.lgfx-row:hover{background:var(--card);box-shadow:0 0 0 1px var(--line-lit) inset}
.lgfx-row .d,.lgfx-row .tm{font-family:var(--ff-display);font-size:11px;color:var(--text-mute);
  font-variant-numeric:tabular-nums;text-align:center}
.lgfx-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgfx-row .t.r{text-align:right}
/* คำว่า "พบ" กับสกอร์ต้องมีขนาดและความกว้างเท่ากันเป๊ะ
   ทั้งคู่อยู่คอลัมน์กลางที่กว้างเท่ากันอยู่แล้ว แต่ถ้าตัวอักษรคนละขนาด
   ช่องว่างรอบจะไม่เท่ากัน ตาจึงเห็นชื่อทีมของสองตารางอยู่คนละตำแหน่ง */
/* ไม่ต้องบังคับความกว้างแล้ว เพราะคอลัมน์กว้างตามเนื้อหา
   เว้นช่องไฟข้างละ 2px ให้ชื่อทีมไม่ติดตัวคั่นจนเกินไป */
/* บนคอมชื่อทีมมีที่เหลือฝั่งละเกือบ 500px ซึ่งไม่มีทางใช้หมด
   จึงเว้นช่องว่างรอบตัวคั่นได้สบาย ๆ 14px ต่อข้าง อ่านง่ายกว่าเบียดกัน
   ส่วนมือถือคุมไว้ที่ 5px ในกฎด้านล่าง เพราะพื้นที่ต่างกันห้าเท่า */
.lgfx-row .vs{margin:0 7px;text-align:center;font-size:12px;color:var(--text-mute);white-space:nowrap}
/* เลื่อนคู่แข่งขันในตารางผลบอลไปทางขวาเล็กน้อย
   ทำที่สัดส่วนคอลัมน์ ฝั่งซ้ายกว้างขึ้นฝั่งขวาแคบลง เส้นกึ่งกลางจึงเลื่อน
   ไม่มีทางล้นเพราะ fr แบ่งพื้นที่ที่เหลือเสมอ และไม่ไปยุ่งกับช่องว่างข้างสกอร์ */
.lgfx-row.res{grid-template-columns:34px 32px 1.01fr auto 0.99fr}
/* มือถือไม่เลื่อนขวาแล้ว ให้คู่แข่งขันอยู่กลางแถวเหมือนตารางโปรแกรม
   การเลื่อนทำให้ฝั่งซ้ายเหลือที่มากขึ้นโดยไม่ได้อะไรกลับมา
   บนคอมยังเลื่อนอยู่ เพราะพื้นที่เหลือเยอะและดูสบายตากว่า */
.ui-mobile .lgfx-row.res{grid-template-columns:26px 28px minmax(0,1fr) auto minmax(0,1fr)}

/* ไม่บังคับให้ตารางโปรแกรมกับผลบอลตรงกันแล้ว
   ช่องกลางอันหนึ่งเป็นคำว่า "พบ" อีกอันเป็นสกอร์ กว้างคนละอย่างโดยธรรมชาติ
   การพยายามให้ตรงกันทำได้แค่ด้วยการเบียดช่องใดช่องหนึ่ง ซึ่งเสียมากกว่าได้
   ปล่อยให้แต่ละตารางจัดกึ่งกลางของตัวเอง ชื่อทีมชิดตัวคั่นเท่ากันในตารางเดียวกัน */
/* คู่ที่อยู่ในนัดที่ผ่านมาแล้วแต่ยังไม่มีผล */
.lgfx-row .vs.wait{color:var(--gold);font-family:var(--ff-display);font-weight:600;font-size:10.5px}
/* ป้ายคู่ที่เลื่อนหรือยกเลิก แทนที่เวลาเตะในหน้าโปรแกรม
   ใช้สีเทาสีเดียวทั้งสองแบบ เพราะในมุมของคนที่หาว่าคู่นี้เตะไหม
   สองอันนี้ตอบเหมือนกันคือไม่เตะ ถ้าใช้สองสีคนจะคิดว่ามีนัยยะซ่อนอยู่
   กรอบเบา ๆ ให้สะดุดตาแต่ไม่แย่งความสนใจจากคู่ที่กำลังจะเตะจริง */
.st-off{display:inline-block;font-family:var(--ff-display);font-weight:600;font-size:10.5px;
  color:var(--text-dim);letter-spacing:.2px;white-space:nowrap;
  padding:2px 8px;border-radius:6px;
  background:rgba(140,160,200,.14);box-shadow:inset 0 0 0 1px rgba(140,160,200,.35)}
[data-theme="light"] .st-off{background:rgba(90,110,150,.10);box-shadow:inset 0 0 0 1px rgba(90,110,150,.30)}
.c-score .st-off{font-size:11px}
.ui-mobile .st-off{font-size:9.5px;padding:1px 6px}
/* เลื่อนหรือยกเลิก ใช้สีจางกว่ารอผล เพราะไม่ได้รอแล้ว */
.lgfx-row .vs.wait.off{color:var(--text-mute);font-style:italic;font-weight:500}
/* สกอร์เว้นเท่ากับคำว่า "พบ" เพื่อให้สองตารางดูเป็นชุดเดียวกัน */
/* สกอร์ของคู่ที่กำลังแข่งในการ์ดวันนี้ ใช้สีเน้นให้ต่างจากคู่ที่จบแล้ว
   คนกวาดตาจะเห็นทันทีว่าคู่ไหนยังเตะอยู่ ไม่ต้องอ่านเทียบทีละแถว */
.lgfx-row .sc.now{color:var(--red);font-weight:800}
[data-theme="dark"] .lgfx-row .sc.now{color:var(--cyan)}
.lgfx-row .sc{margin:0 7px;text-align:center;white-space:nowrap;font-family:var(--ff-display);font-weight:700;font-size:12px;
  font-variant-numeric:tabular-nums}
/* มือถือ 360px มีพื้นที่ในแถวแค่ 320px ต้องบีบทุกอย่าง
   คอลัมน์กลาง 28px พอสำหรับสกอร์ "2 - 1" ที่ 10px ซึ่งใช้ราว 22px
   ช่องไฟ 2px ชื่อทีมจึงได้ฝั่งละ 112px */
.ui-mobile .lgfx-row{grid-template-columns:26px 28px minmax(0,1fr) auto minmax(0,1fr);gap:2px;font-size:10px;padding:7px 6px}
.ui-mobile .lgfx-row .d,.ui-mobile .lgfx-row .tm{font-size:9.5px}
.ui-mobile .lgfx-row .vs{margin:0 3px;font-size:10.5px}
/* ช่องว่างข้างสกอร์ 5px ต่อข้าง (กริด 2 + margin 3)
   1px ที่ตั้งไว้เดิมทำให้โลโก้ทีมเยือนดูติดสกอร์จนอ่านยาก */
.ui-mobile .lgfx-row .sc{margin:0 3px;font-size:10.5px}
.ui-mobile .lgfx-row .tlg{width:15px;height:15px}
.ui-mobile .lgfx-row .t{gap:3px}


/* ดาวซัลโว / ผู้จ่ายบอล */
/* ลีกนอกยุโรปอย่างไทยลีก API ไม่มีสถิตินักเตะ การ์ดดาวซัลโวจึงไม่ขึ้น
   ถ้าเหลือการ์ดเดียวให้กินเต็มความกว้าง ไม่ใช่ครึ่งเดียวแล้วมีที่ว่างข้าง ๆ */
/* การ์ดในกริดต้องไม่มีระยะล่างของตัวเอง ไม่งั้นบนมือถือที่เรียงบนล่าง
   จะได้ช่องไฟกริด 10 บวกระยะล่างการ์ดอีก 10 กลายเป็น 20 ไม่เท่าที่อื่น */
.lgtop{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;margin-bottom:1px}
.lgtop .mcard{margin-bottom:0}
.ui-mobile .lgtop{grid-template-columns:1fr}
.tops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tops li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:12.5px;
  min-width:0;border-bottom:1px solid var(--line)}
.tops li:last-child{border-bottom:0}
.tops li:hover{background:var(--card-2)}
.tops .no{width:20px;text-align:center;font-family:var(--ff-display);font-size:11px;color:var(--text-mute)}
/* ใช้ชื่อ tp-ph ไม่ใช่ ph เพราะ .ph เป็นครึ่งสนามในหน้ารายละเอียดอยู่แล้ว
   กฎของครึ่งสนามมี flex:1 กับ padding:20px ซึ่งไปยืดกรอบรูปจนผิดรูป
   ชื่อคลาสสั้น ๆ แบบนี้ต้องค้นก่อนตั้งเสมอ */
.tops .tp-ph{width:28px;height:28px;min-width:28px;border-radius:50%;overflow:hidden;
  flex:0 0 28px;padding:0;background:var(--card-2);display:block}
.tops .tp-ph img{width:28px;height:28px;object-fit:cover;display:block;border-radius:50%}
.tops .no{flex-shrink:0}
.tops .nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tops .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tops .nm small{color:var(--text-mute);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tops .v{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--blue);min-width:26px;text-align:right}
[data-theme="dark"] .tops .v{color:var(--cyan)}

/* ---------- การ์ดหัวข้อหน้ารายละเอียดคู่ ----------
   จัดกึ่งกลางทั้งชื่อคู่ ชื่อลีก และวันที่กับสนาม
   เพราะเป็นหน้าที่มีคู่เดียว เนื้อหากลางหน้าดูสมดุลกว่าชิดซ้าย */
.pg-match .pghead{text-align:center}
.pg-match .pgh-top{justify-content:center}
.pg-match .pgh-sub{text-align:center}
.pg-match .mh-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
  margin-top:7px;font-size:12px;color:var(--text-mute)}
.pg-match .mh-when{font-family:var(--ff-display)}

/* ประตูรวมกับค่าเฉลี่ย แยกคนละมุม */
.h2h-goals{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ui-mobile .h2h-goals{font-size:11.5px}

/* แท็บตารางคะแนน รวม เหย้า เยือน
   สามปุ่มกว้างเท่ากันเต็มความกว้างการ์ด
   ของเดิมใช้ width:fit-content ปุ่มจึงกว้างตามความยาวคำ
   คำว่า "ทั้งหมด" ยาวกว่า "เหย้า" สองเท่า ดูไม่สมดุลและตกบรรทัดบนจอแคบ */
.seg.stseg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-bottom:10px;gap:3px}
.seg.stseg button{width:100%;justify-content:center;padding:8px 6px;font-size:12.5px}
.ui-mobile .seg.stseg button{padding:9px 4px;font-size:12px}
.st-note{margin-top:10px;font-size:11.5px}
.sgrp{font-family:var(--ff-display);font-size:12px;font-weight:600;color:var(--text-dim);
  margin:12px 0 6px}
.sgrp:first-of-type{margin-top:0}

/* กระดานสกอร์ที่เป็นลิงก์ ต้องไม่เห็นเป็นลิงก์สีน้ำเงินขีดเส้นใต้ */
a.bt{color:inherit;text-decoration:none;transition:.16s}
a.bt:hover b{color:var(--blue)}
[data-theme="dark"] a.bt:hover b{color:var(--cyan)}

/* เนื้อหายาวท้ายหน้าลีก ประวัติและคำอธิบาย
   ย่อหน้าอ่านง่าย ความกว้างจำกัดไม่ให้บรรทัดยาวเกินสายตา */
/* จำกัดความยาวบรรทัดเพื่อให้อ่านง่าย แต่จัดไว้กลางการ์ด
   ถ้าชิดซ้ายอย่างเดียว การ์ดกว้าง 1010px จะเหลือที่ว่างขวาเกือบ 300px
   ซึ่งดูเหมือนหน้าโหลดไม่เสร็จ พอแบ่งที่ว่างสองข้างเท่ากันจะดูตั้งใจ */
.lgdoc{max-width:80ch;margin-inline:auto}
.lgdoc .lead{font-size:13.5px;color:var(--text);padding:12px 14px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line);margin:0 0 4px}
/* ---------- หัวข้อในบทความ ----------
   ของเดิมเป็นตัวหนาเปล่า ๆ ต่างจากย่อหน้าแค่ขนาด กวาดตาหาหัวข้อยาก ดูจืด
   ใส่แถบไล่สีหลักด้านซ้ายแบบเดียวกับการ์ดหัวข้อหน้า ทั้งเว็บจะได้พูดภาษาเดียวกัน
   ใช้กับบทความหน้าแรกและหน้าลีก/ทีม ยกเว้นหัวข้อแบรนด์กับคำถาม FAQ ที่มีแบบของตัวเอง */
.intro h2:not(.h2-two),.lgdoc h3:not(.faq-q){
  position:relative;display:block;padding-left:14px;margin:28px 0 10px;
  font-family:var(--ff-display);font-weight:700;color:var(--text);letter-spacing:.3px;line-height:1.3}
.intro h2:not(.h2-two){font-size:17.5px}
.lgdoc h3:not(.faq-q){font-size:14.5px;margin-top:22px}
.intro h2:not(.h2-two)::before,.lgdoc h3:not(.faq-q)::before{
  content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));box-shadow:var(--glow)}
.lgdoc h3:not(.faq-q)::before{width:3px}
/* หัวข้อแรกของบทความไม่ต้องเว้นบนเยอะ เพราะมีหัวข้อใหญ่หรือกล่องนำอยู่เหนือแล้ว */
.intro h2.h2-two + h2,.lgdoc .lead + h3{margin-top:14px}
.ui-mobile .intro h2:not(.h2-two){font-size:15.5px;margin-top:22px}
.ui-mobile .lgdoc h3:not(.faq-q){font-size:13.5px;margin-top:18px}
.lgdoc p{font-size:13px;line-height:1.85;color:var(--text-dim);margin:0 0 10px}
/* ---------- คำถามที่พบบ่อย ----------
   ใช้ชุดเดียวกันทั้งบทความหน้าแรกและบทความหน้าลีก ของเดิมเขียนไว้ใต้ .lgdoc อย่างเดียว
   หน้าแรกจึงไม่ได้สไตล์อะไรเลย คำถามกับคำตอบกองรวมกันเป็นพืด

   คำถามเป็น h3 จริง ไม่ใช่ตัวหนาในย่อหน้า บอทอ่านโครงหัวข้อได้ คนเห็นเหมือนเดิม
   แต่ละข้อเป็นกล่องของตัวเอง มีเส้นคั่นบาง ๆ เหนือคำถามให้เห็นว่าขึ้นข้อใหม่ */
.faq{display:flex;flex-direction:column;gap:0}
.faq h3.faq-q{margin:0;padding:13px 12px 0;color:var(--text);
  font-family:var(--ff-display);font-size:13.5px;font-weight:700;line-height:1.5;
  border-top:1px solid var(--line)}
.faq h3.faq-q:first-child{border-top:0;padding-top:4px}
.faq h3.faq-q::before{content:"ถาม  ";font-size:11px;font-weight:600;color:var(--blue);letter-spacing:.5px}
.faq h3.faq-q + p{margin:0;padding:5px 12px 13px;background:transparent;border-radius:0}
.lgdoc .faq p{padding:10px 12px;border-radius:9px;background:var(--card-2);margin-bottom:6px}
.lgdoc .faq h3.faq-q + p{background:transparent;border-radius:0;margin-bottom:0;padding:5px 12px 13px}
.lgdoc .faq b{color:var(--text);font-weight:600}
.ui-mobile .faq h3.faq-q{font-size:13px}
/* บรรทัดบอกเวลาอัปเดตข้อมูล เป็นข้อมูลประกอบ ไม่ใช่เนื้อหาหลัก จึงจางกว่าย่อหน้าอื่น */
.lgdoc-upd{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--text-mute);line-height:1.7}
.ui-mobile .lgdoc .lead{font-size:12.5px;padding:10px 12px}

.ui-mobile .lgdoc p{font-size:12.5px;line-height:1.8}

/* รายชื่อทุกทีมท้ายหน้าลีก เรียงตามตัวอักษร */
.tmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.tmg{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line);transition:.16s;min-width:0}
.tmg:hover{border-color:var(--blue);background:var(--card);transform:translateY(-1px)}
.tmg img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.tmg span{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-mobile .tmgrid{grid-template-columns:1fr 1fr;gap:5px}
.ui-mobile .tmg{padding:7px 9px}
.ui-mobile .tmg span{font-size:11.5px}

/* ================= หน้าทีม ================= */
/* h1 หน้าทีมสั้น จัดกึ่งกลางแล้วดูสมดุลกว่าชิดซ้าย
   หน้าอื่นไม่แตะ เพราะหัวข้อยาวกว่าและมีป้ายมุมขวาด้วย */
.pg-team .pghead{text-align:center}
.pg-team .pgh-top{justify-content:center}
.pg-team .pgh-sub{text-align:center}
/* หัวข้อการ์ดมีแถบสีเหมือนหน้าลีก แต่ใช้สีเดียวทั้งหน้า
   หน้าลีกใช้ธงไทยเพราะมีห้าการ์ดพอดี ส่วนหน้าทีมจำนวนการ์ดไม่แน่นอน */
.pg-team .mcard > h2{margin:-16px -18px 12px;padding:10px 18px;
  border-radius:var(--r-md) var(--r-md) 0 0;color:#fff;font-size:13.5px;font-weight:700;
  background:linear-gradient(180deg,#1B7BFF,#0B3FA0)}
.pg-team .mcard > h2 .h2-right{color:rgba(255,255,255,.82)}
.ui-mobile .pg-team .mcard > h2{margin:-12px -12px 10px;padding:9px 12px;font-size:12.5px}
.tmcard{padding:0;overflow:hidden}
/* แถบหัวการ์ดทีม พื้นไล่สีน้ำเงินเข้มแบบสนามยามค่ำ
   ให้โลโก้กับชื่อสโมสรเด่นออกมาจากพื้นหลัง ไม่กลืนไปกับการ์ดอื่น */
.tm-top{position:relative;display:flex;align-items:center;gap:18px;padding:22px 20px;
  border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(125deg,#0B1E4A 0%,#123A87 45%,#0A2C6B 100%)}
/* แสงจาง ๆ มุมซ้ายบน เหมือนไฟสปอตไลต์ส่องลงสนาม */
.tm-top::before{content:"";position:absolute;left:-10%;top:-60%;width:60%;height:200%;
  background:radial-gradient(ellipse at center,rgba(77,216,255,.20),transparent 65%);
  pointer-events:none}
.tm-top > *{position:relative;z-index:1}
[data-theme="light"] .tm-top{background:linear-gradient(125deg,#123A87 0%,#1B7BFF 55%,#0B3FA0 100%)}
.tm-top .tm-id b{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.tm-top .tm-id small{color:rgba(255,255,255,.72)}
.tm-top .tm-meta{color:rgba(255,255,255,.82)}
.tm-top .tm-meta a{color:#9BDcFF}
.tm-top .tm-rank{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.tm-top .tm-rank b{color:#fff}
.tm-top .tm-rank small,.tm-top .tm-rank span{color:rgba(255,255,255,.78)}
/* โลโก้เป็นพระเอกของการ์ด ใหญ่ขึ้นและมีวงแสงรอบ
   ให้ตาไปหยุดที่โลโก้ก่อนแล้วค่อยอ่านชื่อ */
.tm-logo-big{width:92px;height:92px;object-fit:contain;flex-shrink:0;padding:11px;
  background:radial-gradient(circle at 50% 40%,#fff,#E8EEF8);border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.6)}
[data-theme="dark"] .tm-logo-big{box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 0 3px rgba(77,216,255,.14)}
.tm-id{flex:1;min-width:0}
.tm-id b{display:block;font-family:var(--ff-display);font-size:22px;font-weight:700;line-height:1.2}
.tm-id small{display:block;font-size:12px;color:var(--text-mute);margin-top:2px}
.tm-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--text-dim)}
.tm-meta a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
[data-theme="dark"] .tm-meta a{color:var(--cyan)}
/* อันดับในตาราง เด่นมุมขวา เป็นตัวเลขที่คนมองหาก่อนอย่างอื่น */
.tm-rank{flex-shrink:0;text-align:center;padding:10px 16px;border-radius:14px;
  background:var(--card);border:1px solid var(--line-lit);min-width:86px}
.tm-rank b{display:block;font-family:var(--ff-display);font-size:32px;font-weight:700;line-height:1;color:var(--blue)}
[data-theme="dark"] .tm-rank b{color:var(--cyan)}
.tm-rank small{display:block;font-size:10.5px;color:var(--text-mute);margin-top:2px}
.tm-rank span{display:block;font-size:11.5px;color:var(--text-dim);margin-top:4px}

/* แถบสนาม อยู่ระหว่างหัวการ์ดกับแถบสถิติ จัดกึ่งกลาง */
.tm-venue{padding:9px 16px;text-align:center;font-size:12.5px;color:var(--text-dim);
  background:var(--card-2);border-bottom:1px solid var(--line)}

/* แต่ละช่องเป็นการ์ดของตัวเอง แทนการใช้เส้นแบ่งระหว่างช่อง
   เส้นแบ่งบาง ๆ บนพื้นการ์ดสีใกล้กันมองแทบไม่เห็น และเวลาตัดขึ้นบรรทัดใหม่
   ตำแหน่งเส้นก็ไม่เป็นระเบียบ การ์ดแยกเห็นชัดแน่นอนทุกจอทุกธีม */
/* แปดช่องพอดีสองแถว ไม่ใช้ auto-fit เพราะมันเลือกจำนวนคอลัมน์เอง
   บนจอ 360 ได้แถวละ 3 ช่องแล้วตกเป็น 3 แถว ซึ่งไม่ตั้งใจ
   กำหนดตายตัว 8 คอลัมน์บนคอม 4 คอลัมน์บนมือถือ ได้สองแถวเสมอ */
.tm-stats{display:grid;grid-template-columns:repeat(8,1fr);
  gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
@media (max-width:900px){ .tm-stats{grid-template-columns:repeat(4,1fr)} }
.ts{text-align:center;padding:10px 6px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line-lit)}
.ts b{display:block;font-family:var(--ff-display);font-size:19px;font-weight:700;line-height:1.1}
.ts b.w{color:var(--blue)}.ts b.d{color:var(--draw)}.ts b.l{color:#D6141F}
[data-theme="dark"] .ts b.w{color:var(--cyan)}
.ts span{display:block;font-size:10.5px;color:var(--text-mute);margin-top:3px}
.ts b.pt{color:var(--gold)}
/* ห้านัดหลังอยู่ท้ายแถวแผนที่ใช้บ่อย ชิดขวา ใช้พื้นที่ว่างที่เหลือ */
.tx-fmt .tx-b{align-items:center}
.tx-hh{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.tx-hh .tx-h{margin-bottom:0}
.tx-hh .tx-h.r{margin-left:auto}
.fm-wrap{margin-left:auto;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}

.tm-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0}
.tx{padding:13px 18px;border-right:1px solid var(--line)}
.tx:last-child{border-right:0}
.tx-h{display:block;font-family:var(--ff-display);font-size:11.5px;font-weight:600;
  color:var(--text-mute);letter-spacing:.3px;margin-bottom:9px}
.tx-b{display:flex;gap:8px;flex-wrap:wrap}
.fmt{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border-radius:8px;
  background:var(--card-2);border:1px solid var(--line);
  font-family:var(--ff-display);font-weight:700;font-size:13px}
.fmt i{font-style:normal;font-weight:500;font-size:10.5px;color:var(--text-mute)}
/* แผนภูมิแท่ง ช่วงนาทีที่ยิงประตู */
.tx-b.bars{align-items:flex-end;gap:5px;height:64px}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:4px}
.bar i{display:block;width:100%;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--blue),var(--blue-dim))}
[data-theme="dark"] .bar i{background:linear-gradient(180deg,var(--cyan),var(--blue))}
.bar em{font-style:normal;font-size:8.5px;color:var(--text-mute);white-space:nowrap}

/* แถวโปรแกรมในหน้าทีม มีคอลัมน์รายการเพิ่มมาท้ายสุด */
/* ลดคอลัมน์กลางและช่องไฟ ให้ชื่อทีมยาว ๆ อย่างแมนยูกับสเปอร์สไม่โดนตัด */
/* สามคอลัมน์ ตัวคั่นตรงกันทุกแถว
   คอลัมน์กลาง 34px คำนวณจากสกอร์ 2 - 1 ที่ใช้จริง 27px
   ช่องไฟ 4px คือวรรคเดียว วันที่กับเวลาก็ชิดกันด้วยเหตุผลเดียวกัน
   เทียบของเดิมประหยัดพื้นที่ได้ราว 20px ต่อแถว ชื่อทีมจึงยาวขึ้นได้ */
.lgfx-row.tmfx{grid-template-columns:34px 38px minmax(0,1fr) 34px minmax(0,1fr) 108px;
  gap:4px;font-size:12px}
.lgfx-row.tmfx .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgfx-row.tmfx .t.r{text-align:right}
.lgfx-row.tmfx .vs{text-align:center;font-size:12px;color:var(--text-mute)}
.lgfx-row.tmfx .sc{text-align:center;font-family:var(--ff-display);font-weight:700;
  font-size:12.5px;font-variant-numeric:tabular-nums}
.lgfx-row.tmfx .d,.lgfx-row.tmfx .tm{text-align:center;font-size:11px}
.lgfx-row .cp{text-align:right;overflow:hidden;white-space:nowrap}
/* ป้ายรายการมีกรอบ จะได้เห็นชัดว่าคู่นี้แข่งรายการอะไร
   ทีมหนึ่งลงหลายรายการ ถ้าเป็นตัวหนังสือเปล่าจะกลืนไปกับชื่อทีม */
.lgfx-row .cp i{display:inline-block;font-style:normal;max-width:100%;
  font-family:var(--ff-display);font-size:9.5px;font-weight:600;letter-spacing:.2px;
  padding:2px 8px;border-radius:6px;color:var(--text-dim);
  background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-lit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
/* แถบสีซ้ายบอกผลของทีมนี้ ไม่ต้องอ่านสกอร์ก็รู้ว่าชนะหรือแพ้ */
.lgfx-row.res-w{border-left:3px solid var(--blue)}
.lgfx-row.res-d{border-left:3px solid var(--draw)}
.lgfx-row.res-l{border-left:3px solid #D6141F}
[data-theme="dark"] .lgfx-row.res-w{border-left-color:var(--cyan)}
.lgfx-row.tmfx .tm{font-family:var(--ff-display);font-size:10.5px}
.ui-mobile .lgfx-row.tmfx{grid-template-columns:32px 34px minmax(0,1fr) 32px minmax(0,1fr);
  gap:3px;font-size:11.5px;padding:7px}
.ui-mobile .lgfx-row .cp{grid-column:1/-1;text-align:left;padding-top:3px}

/* รายชื่อนักเตะ */
.sq-sec{display:flex;align-items:center;gap:8px;margin:16px 0 7px;
  font-family:var(--ff-display);font-size:12.5px;font-weight:600;color:var(--text-dim)}
.sq-sec:first-of-type{margin-top:0}
.sq-sec i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--text-mute);
  background:var(--card-2);border-radius:99px;padding:1px 8px}
.sq-list{display:flex;flex-direction:column;gap:2px}
.sq-head,.sq-row{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;align-items:center;gap:5px;
  padding:6px 8px;border-radius:8px;font-size:12px}
/* คอลัมน์ตัวเลขแคบลงและชิดขวา ชื่อจึงได้ความกว้างเพิ่มราว 40px
   ของเดิมชื่อยาวตกไปบรรทัดสอง เพราะคอลัมน์ตัวเลขกว้างเกินความจำเป็น */
/* อายุ ลงเล่น นาที ยิง แอส กว้างเท่ากันหมด 38px และชิดขวา
   ความกว้างเท่ากันทำให้ตัวเลขเรียงตรงกันทุกแถว อ่านไล่ลงมาง่ายกว่า */
.sq-list.has-st .sq-head,.sq-list.has-st .sq-row{
  grid-template-columns:28px minmax(0,1fr) 38px 38px 38px 38px 38px 40px 46px}
.sq-head{font-family:var(--ff-display);font-size:10px;font-weight:600;
  color:var(--text-mute);letter-spacing:.3px;background:var(--card-2)}
.sq-row{background:var(--card-2);transition:.15s}
.sq-row:hover{background:var(--card);box-shadow:0 0 0 1px var(--line-lit) inset}
.sq-row .c-no{font-family:var(--ff-display);font-weight:700;font-size:11.5px;
  color:var(--text-mute);text-align:center}
.sq-row .c-nm{display:flex;align-items:center;gap:8px;min-width:0}
.sq-row .c-nm img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--card)}
.sq-row .c-nm b{font-weight:500;font-size:12px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ตัวเลขชิดขวา อ่านเทียบกันง่ายกว่าและกินที่น้อยกว่าจัดกลาง */
.sq-row .c-ag,.sq-row .c-n,.sq-head .c-ag,.sq-head .c-n{text-align:right;font-variant-numeric:tabular-nums}
.sq-head .c-cd,.sq-head .c-rt{text-align:center}
.sq-row .c-cd{display:flex;justify-content:center;gap:3px}
.sq-row .c-n.g{font-family:var(--ff-display);font-weight:700;color:var(--blue)}
.sq-row .c-n.a{font-family:var(--ff-display);font-weight:700;color:var(--draw)}
[data-theme="dark"] .sq-row .c-n.g{color:var(--cyan)}
.sq-row .c-rt{text-align:center}
.rt{display:inline-block;font-style:normal;font-family:var(--ff-display);font-weight:700;
  font-size:11.5px;padding:2px 8px;border-radius:6px;color:var(--text-dim);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.rt.hi{color:#06301C;background:var(--draw);box-shadow:none}
/* จอแคบ ซ่อนคอลัมน์ที่ไม่จำเป็น เหลือของที่คนดูจริง */
.ui-mobile .sq-list.has-st .sq-head,.ui-mobile .sq-list.has-st .sq-row{
  grid-template-columns:24px 150px 34px 34px 40px 34px 34px 40px 44px;gap:4px;font-size:11.5px}
.ui-mobile .sq-list .sq-head,.ui-mobile .sq-list .sq-row{grid-template-columns:24px 150px 34px}
/* จอแคบ ไม่ซ่อนคอลัมน์แล้ว ตรึงชื่อนักเตะไว้แล้วเลื่อนดูข้อมูลแทน
   การซ่อนเป็นการตัดสินใจแทนผู้ใช้ว่าเขาไม่อยากดูนาทีหรือใบเหลือง
   ทั้งที่จริงแค่จอไม่พอ แบบนี้ได้ข้อมูลครบและรู้เสมอว่าดูแถวของใครอยู่
   ใช้หลักเดียวกับตารางคะแนนในหน้าลีก */
.ui-mobile .sq-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ui-mobile .sq-wrap::-webkit-scrollbar{display:none}
.ui-mobile .sq-list{min-width:430px}
.ui-mobile .sq-head,.ui-mobile .sq-row{position:relative}
.ui-mobile .c-no{position:sticky;left:0;z-index:2;background:inherit}
.ui-mobile .c-nm{position:sticky;left:24px;z-index:2;background:inherit;
  box-shadow:6px 0 8px -6px rgba(0,0,0,.45)}
[data-theme="dark"].ui-mobile .c-nm{
  box-shadow:1px 0 0 rgba(77,216,255,.30), 7px 0 10px -6px rgba(0,0,0,.75)}
.ui-mobile .sq-head{background:var(--card-2)}
.ui-mobile .sq-row{background:var(--card-2)}
.ui-mobile .sq-row .c-nm img{width:22px;height:22px}
.ui-mobile .tm-top{flex-wrap:wrap;gap:12px;padding:14px}
.ui-mobile .tm-logo-big{width:56px;height:56px}
.ui-mobile .tm-id b{font-size:17px}
.ui-mobile .tm-rank{min-width:70px;padding:8px 12px}
.ui-mobile .tm-rank b{font-size:26px}
.ui-mobile .tm-stats{grid-template-columns:repeat(4,1fr);gap:5px;padding:10px}
/* จอ 360 ช่องละ 81px ตัวเลขกับคำกำกับยังพอดี ไม่ต้องย่อ */
.ui-mobile .ts span{font-size:9.5px;letter-spacing:-.2px}
.ui-mobile .ts{padding:8px 4px}
.ui-mobile .ts b{font-size:16px}
.ui-mobile .tx{border-right:0;border-bottom:1px solid var(--line)}

/* ================= สนามบอล =================
   คอม   แนวนอน เหย้าซ้าย เยือนขวา เหมือนดูจากอัฒจันทร์หลังประตู
   มือถือ แนวตั้ง เหย้าบน เยือนล่าง เพราะจอสูงกว่ากว้าง
   ผู้รักษาประตูอยู่ริมสุดของฝั่งตัวเองเสมอ ใช้ flex-direction สลับทิศเอา */
.pitch{display:flex;border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(120deg,#12603A,#178A4E 45%,#12603A);
  min-height:420px;padding:10px 6px}
/* ลายสนาม เส้นกลางกับวงกลมกลางสนาม */
.pitch::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.28);transform:translateX(-1px)}
.pitch::after{content:"";position:absolute;left:50%;top:50%;width:96px;height:96px;
  border:2px solid rgba(255,255,255,.28);border-radius:50%;transform:translate(-50%,-50%)}
/* แถบลายหญ้าสลับ */
.pitch{background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 44px,transparent 44px 88px),
  linear-gradient(120deg,#12603A,#178A4E 45%,#12603A)}

.ph{flex:1;display:flex;min-width:0;position:relative;z-index:1}
/* ป้ายชื่อทีมกับแผน อยู่ในสนามของฝั่งตัวเอง ลอยทับพื้นหญ้า
   เหย้าอยู่ขอบบนของครึ่งตัวเอง เยือนอยู่ขอบล่าง สะท้อนกัน */
.ph-tag{position:absolute;left:6px;right:6px;display:flex;align-items:center;gap:8px;
  font-size:11px;color:#fff;pointer-events:none;z-index:2}
.ph-tag b{font-family:var(--ff-display);font-weight:700;font-size:12px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-tag i{font-style:normal;font-family:var(--ff-display);font-weight:700;font-size:11px;
  padding:1px 8px;border-radius:99px;background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);flex-shrink:0}
.ph.h .ph-tag{top:2px}
.ph.h .ph-tag i{margin-left:auto}      /* เหย้า ชื่อซ้าย แผนขวา */
.ph.a .ph-tag{bottom:2px}
.ph.a .ph-tag b{margin-left:auto;text-align:right}   /* เยือน แผนซ้าย ชื่อขวา */
.ph.h{flex-direction:row}          /* เหย้า ผู้รักษาประตูอยู่ซ้ายสุด */
.ph.a{flex-direction:row-reverse}  /* เยือน สะท้อนกลับ ผู้รักษาประตูอยู่ขวาสุด */
.prow{flex:1;display:flex;flex-direction:column;justify-content:space-around;
  align-items:center;gap:4px;min-width:0}
.ph{padding:20px 2px}

.pp{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:74px;min-width:0}
.pp .pic{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pp .pic img{width:100%;height:100%;object-fit:cover;display:block}
.pp .no{position:absolute;right:-3px;bottom:-3px;min-width:17px;height:17px;padding:0 3px;
  border-radius:99px;display:grid;place-items:center;font-style:normal;
  font-family:var(--ff-display);font-size:9.5px;font-weight:700;color:#fff;
  border:1.5px solid rgba(255,255,255,.85)}
.ph.h .pp .no{background:var(--blue-dim)}
.ph.a .pp .no{background:var(--away-dim)}
.pp .nm{font-size:10px;font-weight:600;color:#fff;text-align:center;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.pitch-note{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11px;color:var(--text-mute)}
/* สองฝั่ง เหย้าชิดซ้าย เยือนชิดขวา ตรงกับตำแหน่งในสนาม */
.pitch-note.two{justify-content:space-between}
.pitch-note .side{display:flex;align-items:center;gap:6px;min-width:0}
.pitch-note .lgd.h{background:var(--blue)}
.pitch-note .lgd.a{background:var(--away)}

/* มือถือ พลิกเป็นแนวตั้ง */
.ui-mobile .pitch{flex-direction:column;min-height:560px;padding:8px 4px}
/* มือถือ เหย้าอยู่ครึ่งบน ป้ายจึงอยู่บนสุด เยือนครึ่งล่าง ป้ายอยู่ล่างสุด */
.ui-mobile .ph{padding:16px 2px}
.ui-mobile .ph-tag{left:8px;right:8px}
.ui-mobile .pitch::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-1px)}
.ui-mobile .pitch::after{width:80px;height:80px}
.ui-mobile .pitch{background-image:
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 40px,transparent 40px 80px),
  linear-gradient(160deg,#12603A,#178A4E 45%,#12603A)}
.ui-mobile .ph.h{flex-direction:column}
.ui-mobile .ph.a{flex-direction:column-reverse}
.ui-mobile .prow{flex-direction:row;gap:2px}
.ui-mobile .pp{max-width:62px}
.ui-mobile .pp .pic{width:34px;height:34px}
.ui-mobile .pp .nm{font-size:9px}

/* รูปนักเตะในรายชื่อ */
.lu-list .fc{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--card-2);margin-right:2px}
.lu-list .fc img{width:100%;height:100%;object-fit:cover;display:block}

/* ================= ประวัติการเจอกัน (หน้ารายละเอียด) ================= */
.h2h-sum{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.h2h-side{text-align:center;padding:11px 8px;border-radius:12px;background:var(--card-2);
  border:1px solid var(--line)}
.h2h-side b{display:block;font-family:var(--ff-display);font-size:26px;line-height:1.1;font-weight:700}
.h2h-side span{display:block;margin-top:3px;font-size:11px;color:var(--text-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-side.h{box-shadow:inset 3px 0 0 var(--cyan)}
.h2h-side.h b{color:var(--cyan)}
.h2h-side.a{box-shadow:inset -3px 0 0 var(--away)}
.h2h-side.a b{color:var(--away)}
.h2h-side.d{box-shadow:inset 0 3px 0 var(--draw)}
.h2h-side.d b{color:var(--draw)}
[data-theme="light"] .h2h-side.h{box-shadow:inset 3px 0 0 var(--blue)}
[data-theme="light"] .h2h-side.h b{color:var(--blue-dim)}

.h2h-goals{text-align:center;font-size:12px;color:var(--text-mute);margin-bottom:12px}
.h2h-goals b{color:var(--text-dim);font-family:var(--ff-display);font-size:13px}

.h2h-list{display:flex;flex-direction:column;gap:3px}
.h2h-row{display:grid;grid-template-columns:62px 1fr 1fr 58px 1fr;align-items:center;gap:8px;
  padding:7px 9px;border-radius:9px;font-size:12.5px;background:var(--card-2);
  border-left:3px solid var(--line)}
/* แถบซ้ายบอกว่าฝั่งไหนชนะ ใช้สีฝั่งเดียวกับทั้งเว็บ
   ของเดิมใช้เขียว-แดงแบบผลแพ้ชนะ ซึ่งเป็นคนละภาษากับสีฝั่งที่ใช้อยู่ */
.h2h-row.w{border-left-color:var(--cyan)}
.h2h-row.l{border-left-color:var(--away)}
.h2h-row.d{border-left-color:var(--draw)}
[data-theme="light"] .h2h-row.w{border-left-color:var(--blue)}
.h2h-row .d{font-family:var(--ff-display);font-size:11px;color:var(--text-mute);
  font-variant-numeric:tabular-nums}
.h2h-row .l{color:var(--text-mute);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-row .t.r{text-align:right}
.h2h-row .s{text-align:center;font-family:var(--ff-display);font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums}
.h2h-note{display:flex;align-items:center;gap:5px;margin:12px 0 0;font-size:11px;color:var(--text-mute)}
/* สามช่องเท่ากัน เหย้าซ้าย เสมอกลาง เยือนขวา ตรงกับช่องสรุปด้านบนพอดี */
.h2h-note.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.h2h-note .side{display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-note .side.l{justify-content:flex-start}
.h2h-note .side.c{justify-content:center}
.h2h-note .side.r{justify-content:flex-end}
.ui-mobile .h2h-note.three{font-size:10px;gap:4px}
/* จุดสีนำหน้าคำอธิบาย จะได้ไม่ต้องเขียนชื่อสีเป็นตัวหนังสือ
   เขียนชื่อสีไว้แล้วลืมแก้ตอนเปลี่ยนสีจริง เคยเป็นปัญหามาแล้ว */
.lgd{display:inline-block;width:9px;height:9px;border-radius:3px;flex-shrink:0}
.lgd.h{background:var(--cyan)}
.lgd.d{background:var(--draw)}
.lgd.a{background:var(--away)}
[data-theme="light"] .lgd.h{background:var(--blue)}

.ui-mobile .h2h-row{grid-template-columns:52px 1fr 46px 1fr;gap:6px;font-size:11.5px;padding:7px}
.ui-mobile .h2h-row .l{display:none}
.ui-mobile .h2h-side b{font-size:22px}
.ui-mobile .h2h-side span{font-size:10px}

/* ================= ป๊อปอัพจบเกม (เฉพาะคู่ที่ติดตาม) =================
   กลางจอ มีฉากหลังหรี่ ต้องเด่นกว่าป๊อปอัพประตู เพราะเป็นผลสุดท้ายที่คนรอ
   ================================================================= */
.ftpop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;
  background:rgba(3,7,20,.62);backdrop-filter:blur(3px);animation:ftIn .25s ease both}
.ftpop.out{animation:ftOut .22s ease forwards}
.ftpop[hidden]{display:none}
@keyframes ftIn{from{opacity:0}to{opacity:1}}
@keyframes ftOut{to{opacity:0}}
.ftbox{--card:#FFFFFF;--card-2:#F1F5FE;--line:#D8E2F4;--text:#0A1633;--text-dim:#4F6082;--text-mute:#8496B4;
  width:min(400px,100%);background:#fff;color:#0A1633;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.6);animation:ftPop .42s cubic-bezier(.2,.9,.3,1.35) both}
@keyframes ftPop{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:none}}
.ftb-band{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;color:#fff;
  background:linear-gradient(90deg,#1B2A4E,#33507F 50%,#1B2A4E);position:relative}
.ftb-band b{font-family:var(--ff-display);font-style:italic;font-weight:700;font-size:15px;letter-spacing:.6px}
/* ป้าย FT แทนอีโมจิ อ่านออกทุกเครื่อง ไม่ขึ้นกับฟอนต์อีโมจิของระบบ */
.ftb-tag{font-family:var(--ff-display);font-weight:700;font-size:11px;letter-spacing:1px;
  padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* ชื่อลีกอยู่ใต้แถบสี ในพื้นที่ขาว กว้างกว่าและตัดคำได้ */
.ftb-lg{padding:8px 16px 0;text-align:center;font-size:11.5px;color:var(--text-dim);
  font-family:var(--ff-display);line-height:1.35}
.ftb-x{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;color:#fff;opacity:.75;font-size:17px}
.ftb-x:hover{opacity:1;background:rgba(0,0,0,.22)}
.ftb-mid{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:6px;padding:18px 16px 8px}
.ftb-t{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.ftb-t .badge{width:46px;height:46px;border-radius:12px}
.ftb-t span{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ftb-t.win span{font-weight:800}
.ftb-t.lose span{color:var(--text-mute)}
.ftb-sc{text-align:center;font-family:var(--ff-display);font-weight:700;font-size:38px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:1px}
.ftb-sc i{font-style:normal;opacity:.3;font-size:26px;margin:0 3px}
.ftb-sub{text-align:center;font-size:11.5px;color:var(--text-mute);padding:0 16px 14px;font-family:var(--ff-display)}
.ftb-foot{display:flex;gap:8px;padding:0 14px 14px}
.ftb-foot a,.ftb-foot button{flex:1;text-align:center;padding:9px;border-radius:10px;font-size:12.5px;font-weight:600;
  border:1px solid #D8E2F4;background:#F1F5FE;color:#0A1633;transition:.18s}
.ftb-foot a:hover,.ftb-foot button:hover{border-color:#1B7BFF;color:#0F4FB0}
.ui-mobile .ftb-mid{grid-template-columns:1fr 78px 1fr;padding:14px 12px 6px}
.ui-mobile .ftb-sc{font-size:31px}
.ui-mobile .ftb-t .badge{width:40px;height:40px}

/* ================= หน้าตั้งค่า ================= */
.set-head{margin:22px 0 16px}
.set-head h1{font-family:var(--ff-display);font-size:22px;margin:0 0 3px}
.set-head p{margin:0;color:var(--text-dim);font-size:13.5px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.panel h2{font-family:var(--ff-display);font-size:14px;font-weight:600;margin:0 0 12px;color:var(--text-dim)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.opt:last-child{border-bottom:0}
.opt small{display:block;color:var(--text-mute);font-size:12px;margin-top:1px}
.sw{width:46px;height:26px;border-radius:99px;background:var(--card-2);border:1px solid var(--line);position:relative;flex-shrink:0;transition:.2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-mute);transition:.2s}
.sw.on{background:var(--blue);border-color:var(--blue)}
.sw.on::after{left:22px;background:#fff}
.range{width:140px;accent-color:var(--blue)}
.num{width:70px;padding:8px;border-radius:9px;background:var(--card-2);border:1px solid var(--line);
  color:var(--text);font-family:var(--ff-display);font-size:14px;text-align:center}
.kit{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;margin-bottom:8px;width:100%;
  border:1px solid var(--line);background:var(--card-2);text-align:left;transition:.18s}
.kit:hover{border-color:var(--blue)}
.kit.on{border-color:var(--blue);background:rgba(27,123,255,.10);box-shadow:var(--glow)}
.kit-n{font-weight:600;font-size:13.5px;display:block}
.kit-d{font-size:11.5px;color:var(--text-mute);display:block}
.kit-p{margin-left:auto;display:flex;gap:5px;flex-shrink:0}
.pv{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-size:11px;
  font-family:var(--ff-display);font-weight:700;border:1px solid var(--line);color:var(--text-mute)}
.pv.h:hover{color:var(--cyan);border-color:var(--cyan)}
.pv.a:hover{color:var(--away);border-color:var(--away)}
.tryb{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
/* บังคับสองปุ่มอยู่บรรทัดเดียวแม้บนมือถือ */
.tryb.row2{grid-template-columns:1fr 1fr}
.ui-mobile .tryb.row2{grid-template-columns:1fr 1fr}
.ui-mobile .tryb.row2 button{font-size:12.5px;padding:10px 6px}
/* ปุ่มในหัวข้อการ์ด ชิดขวา */
.panel h2{display:flex;align-items:center;gap:10px}
.h2-btn{margin-left:auto;font-weight:500}
/* ปุ่มเต็มความกว้างการ์ด */
.btn-wide{display:flex;width:100%;justify-content:center;padding:11px;border-radius:11px;font-size:13.5px}
.tryb button{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);
  font-size:14px;font-weight:600;transition:.18s}
.tryb button:hover{border-color:var(--blue);box-shadow:var(--glow)}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-dim);margin-bottom:4px}
.backlink:hover{color:var(--text)}
.note{font-size:12.5px;color:var(--text-mute);line-height:1.75;margin-top:10px}
/* แถวคืนค่า คำอธิบายอยู่บรรทัดเดียวกับปุ่ม ปุ่มชิดขวา */
.opt-line{flex:1;min-width:0;font-size:13.5px}
.opt .tb{flex-shrink:0}
.note code{background:var(--card-2);padding:1px 6px;border-radius:5px;font-size:11.5px}


/* ============================================================
   มุมมองมือถือ (html.ui-mobile) — การ์ดต่อคู่
   ผูกกับ class ไม่ใช่ media query จะได้สลับได้ตามใจผู้ใช้
   ============================================================ */
.ui-mobile body{font-size:13px}
/* มือถือใช้พื้นที่จอให้เต็มที่ ระยะซ้ายขวา 1px พอ
   การ์ดมีขอบของตัวเองอยู่แล้ว ไม่ต้องเว้นขอบจออีก */
.ui-mobile .wrap{padding:0 1px}
.ui-mobile .topbar-in{padding:7px 8px;gap:7px;flex-wrap:wrap}
.ui-mobile .mark-ball{width:24px;height:24px}
.ui-mobile .mark-txt span{font-size:13px}
.ui-mobile .mainnav{order:3;flex-basis:100%;gap:0;justify-content:space-between}
.ui-mobile .mainnav a{padding:5px 6px;font-size:12px;flex:1;text-align:center}
/* มือถือซ่อนช่องค้นหาไว้ก่อน กดปุ่มแว่นขยายแล้วค่อยกางเต็มบรรทัด
   ใช้ order เพื่อดันไปอยู่บรรทัดล่างสุดของแถบ ไม่ไปแทรกกลางโลโก้กับปุ่ม */
.ui-mobile .search{display:none}
.ui-mobile .search.open{display:flex;order:9;flex:1 0 100%;margin-top:2px}
.ui-desktop .sq-btn{display:none}
.ui-mobile .tools{margin-left:auto;gap:5px}
.ui-mobile .icon-btn{width:30px;height:30px}
.ui-mobile .ticker{padding:7px 10px;gap:10px;margin:10px 0 8px}
.ui-mobile .tk b{font-size:15px}
.ui-mobile .tk span{font-size:10.5px}
.ui-mobile .tk-date{flex-basis:100%;margin-left:0;text-align:left;font-size:11px}
/* กฎนี้อยู่ท้ายไฟล์จึงชนะกฎรวมด้านบน
   แก้กฎรวมอย่างเดียวไม่พอ ต้องแก้ที่นี่ด้วย ไม่งั้นบนมือถือยังห่างเหมือนเดิม */
.ui-mobile .toolbar{gap:1px;padding:1px 0}
/* มือถือ: การ์ดละบรรทัด ปุ่มข้างในยืดแบ่งความกว้างเท่า ๆ กัน */
.ui-mobile .toolbar .sp{display:none}
.ui-mobile .tbar{width:100%;gap:6px}
.ui-mobile .tbar .tb{flex:1 1 auto;justify-content:center;min-width:0;padding:7px 8px}
/* ชุดปุ่มสองชุดในแถบต้องกว้างเท่ากันเสมอ
   ถ้าปล่อยให้ยืดตามความยาวคำ ชุดที่คำยาวกว่าจะกว้างกว่าและดูไม่เป็นระเบียบ
   flex:1 1 0 ทำให้ทั้งสองชุดแบ่งพื้นที่เท่ากันโดยไม่สนใจความยาวคำข้างใน */
.ui-mobile .tbar .seg{flex:1 1 0;min-width:0}

.ui-mobile #btnLang{flex:0 0 auto;padding:4px 8px}
.ui-mobile .mainnav{gap:5px}
.ui-mobile .mainnav a{padding:5px 6px;font-size:12px}
.ui-mobile .tb{font-size:11.5px}
/* ต้องระบุทั้ง button และ a
   ชุดฮอตลีกใช้ปุ่ม ส่วนชุดมุมมองเวลาใช้ลิงก์เพราะต้องโหลดหน้าใหม่
   กฎเดิมเขียนไว้ตั้งแต่ตอนที่ในแถบมีแต่ปุ่ม พอเพิ่มลิงก์เข้ามา
   ลิงก์จึงไม่ได้ค่าเดียวกัน ตัวอักษรใหญ่กว่าและระยะบนล่างมากกว่า
   ทำให้สองชุดสูงไม่เท่ากันราว 6px ซึ่งเห็นชัดเมื่อวางข้างกัน

   เขียนค่าทั้งสี่ด้านไว้ในกฎเดียว ไม่แยกเป็นสองกฎ
   เพราะกฎที่เขียน padding แบบเต็มจะลบค่าด้านซ้ายขวาที่ตั้งไว้ในกฎก่อนหน้าเสมอ
   ช่องไฟซ้ายขวา 6px เพื่อให้คำยาวอย่าง "กลุ่มลีก" มีที่พอบนจอเล็ก */
.ui-mobile .seg button,.ui-mobile .seg a{padding:3px 6px;font-size:11.5px}

.ui-mobile .pc-list{grid-template-columns:1fr;max-height:260px}
.ui-mobile .hp-row{grid-template-columns:44px 1fr 62px;gap:6px}
.ui-mobile .hp-row .l{display:none}
.ui-mobile .sect-head{padding:5px 10px}
.ui-mobile .sect-name{font-size:12px}

/* กล่องรายการ */
.ui-mobile .league{background:none;border:0;box-shadow:none;overflow:visible}
.ui-mobile .rows{display:flex;flex-direction:column;align-items:stretch;gap:1px}
.ui-mobile .lghead{display:flex!important;align-items:center;gap:7px;padding:6px 10px;margin:1px 0 0;
  border-radius:8px;background:var(--card-2);border:1px solid var(--line);
  font-family:var(--ff-display);font-weight:600;font-size:12px;color:var(--text)}
.ui-mobile .lghead:first-child{margin-top:0}
.ui-mobile .lghead img{width:18px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0}
.ui-mobile .lghead small{color:var(--text-mute);font-weight:500;font-size:10.5px;margin-left:auto}
.ui-mobile .lghead[hidden]{display:none!important}

/* การ์ด */
/* ช่องไฟระหว่างคอลัมน์ 8px เท่ากันทุกช่อง แต่ช่องสุดท้ายไม่ต้องการมากขนาดนั้น
   เพราะเป็นปุ่มเล็ก ๆ ไม่ใช่ข้อความที่ต้องเว้นให้อ่านง่าย
   ใช้ column-gap รายช่องแทนค่าเดียวทั้งแถว และลดขอบขวาการ์ดลงด้วย
   ที่ได้คืนรวม 10px ยกให้ชื่อทีม บนจอ 360 เพิ่มจาก 192 เป็น 202px */
/* บีบทุกระยะที่ไม่ได้ทำหน้าที่อะไร เพื่อยกพื้นที่ให้ชื่อทีม
     ขอบซ้าย 10 -> 4   ไม่มีอะไรต้องเว้น การ์ดมีขอบของตัวเองอยู่แล้ว
     ช่องไฟ   8 -> 6   ยังแยกคอลัมน์ออกจากกันได้ชัด
     ขอบขวา   2 -> 1
   คอลัมน์ซ้ายคง 50px เพราะผลครึ่งแรกกว้างราว 54px ซึ่งแน่นอยู่แล้ว */
.ui-mobile .row{display:grid;grid-template-columns:50px 1fr 44px 28px;align-items:center;
  column-gap:6px;row-gap:0;padding:8px 1px 8px 6px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:background .3s}
.ui-mobile .row[hidden]{display:none}
.ui-mobile .row.is-live{border-color:rgba(77,216,255,.35)}
.ui-mobile .row.is-live::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.ui-mobile .row.moved{background:rgba(27,123,255,.14)}
.ui-mobile .c-left{text-align:center;line-height:1.2}
.ui-mobile .c-st{font-family:var(--ff-display);font-weight:600;font-size:11.5px;color:var(--text-mute);white-space:normal}
.ui-mobile .st.live{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-size:12px}
.ui-mobile .st.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
.ui-mobile .st.ns{color:var(--text-mute)}
.ui-mobile .st.pen{color:var(--purple);font-weight:700;font-size:10.5px}
.ui-mobile .c-ht{font-family:var(--ff-display);font-size:10px;color:var(--text-mute);margin-top:2px;font-variant-numeric:tabular-nums}
.ui-mobile .c-ht:empty{display:none}
.ui-mobile .ct{display:flex;flex-direction:column;gap:5px;min-width:0}
.ui-mobile .c-home,.ui-mobile .c-away{display:flex;align-items:center;gap:8px;min-width:0;text-align:left}
.ui-mobile .badge{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:inline-grid}
.ui-mobile .tname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:500;margin:0;max-width:none;flex:1}
.ui-mobile .tname.win{font-weight:700}
.ui-mobile .tname.lose{color:var(--text-dim)}
.ui-mobile .cards{display:inline-flex;gap:3px;flex-shrink:0;margin-left:auto}
.ui-mobile .cards:empty{display:none}
.ui-mobile .c-score{padding:0}
.ui-mobile .sc{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0;background:none;box-shadow:none;letter-spacing:0}
.ui-mobile .sc b{font-family:var(--ff-display);font-weight:700;font-size:17px;line-height:20px;width:100%;text-align:center;border-radius:6px;font-variant-numeric:tabular-nums}
.ui-mobile .sc i{display:none}
.ui-mobile .row.is-live .sc b{color:var(--cyan);background:rgba(77,216,255,.14)}
/* ต้องเขียนติดกันไม่มีเว้นวรรค เพราะ data-theme กับ ui-mobile อยู่บน <html> ตัวเดียวกัน
   เว้นวรรคแปลว่า "ลูกของ" ซึ่งไม่มีทางตรง กฎเดิมจึงไม่เคยทำงาน
   ธีมสว่างบนมือถือเลยใช้สีฟ้านีออนที่ออกแบบมาสำหรับพื้นดำ อ่านยากมาก */
[data-theme="light"].ui-mobile .row.is-live .sc b{color:#0B3FA0;background:rgba(27,123,255,.14)}
.ui-mobile .sc.pending{font-size:12px;color:var(--text-mute);letter-spacing:0}
.ui-mobile .sc.pending b{color:var(--text-mute);font-size:13px}
.ui-mobile .sc.flash b{animation:goal .9s ease}
.ui-mobile .c-side{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center}
/* หน้าย้อนหลังในโหมดการ์ด สถานะย้ายมาอยู่ขวาสุด
   ความกว้างและระยะห่างเท่ากับช่องดาวในหน้าผลบอลสด จะได้เรียงตรงกันเวลาสลับหน้า */
/* ปุ่มดาวกับปุ่มซ่อนกว้างแค่ 24px ไม่ต้องกันที่ไว้ 34px
   ลดลงเป็น 26px ซึ่งยังกดง่ายและได้ที่คืนให้ชื่อทีม

   ช่องไฟระหว่างคอลัมน์ตั้งค่าเดียวทั้งแถว จะลดเฉพาะช่องนี้ตรง ๆ ไม่ได้
   จึงใช้ระยะขอบซ้ายติดลบ 4px ดึงเข้ามา ได้ผลเท่ากับช่องไฟ 4px
   เป็นวิธีมาตรฐานสำหรับกรณีที่ต้องการช่องไฟไม่เท่ากันในกริดเดียว */
.ui-mobile .c-side{min-width:28px;padding-right:0;margin-left:-5px}
.ui-mobile .c-side .st.ft{font-family:var(--ff-display);font-size:13px;font-weight:700;
  color:var(--text-dim);letter-spacing:.3px}
[data-theme="light"].ui-mobile .c-side .st.ft{color:var(--text-dim)}
/* คู่ที่จบแล้วบนมือถือ ทั้งหน้าแรกและหน้าผลย้อนหลัง
   วันที่กับเวลาอยู่บรรทัดเดียวกัน ของเดิมวันที่ขึ้นบรรทัดบนทำให้การ์ดสูงขึ้นโดยไม่จำเป็น
   "12/9 15:30" สั้นพอที่จะอยู่บรรทัดเดียวได้สบาย และอ่านเป็นชุดเดียวกันเป็นธรรมชาติกว่า
   ไม่แตะหน้าโปรแกรมล่วงหน้า เพราะที่นั่นวันที่เป็นตัวแยกวันที่คนต้องกวาดตาหา */
.ui-mobile .pg-live .c-st .dt,
.ui-mobile .pg-results .c-st .dt,
.ui-mobile .pg-league .c-st .dt{display:inline;margin-right:4px}
.ui-mobile .pg-live .c-st .st,
.ui-mobile .pg-results .c-st .st,
.ui-mobile .pg-league .c-st .st{white-space:nowrap}
/* คำว่าจบเล็กลงและถอยจากขอบขวา เป็นป้ายบอกสถานะ ไม่ใช่ข้อมูลหลักของแถว
   สกอร์กับชื่อทีมควรเด่นกว่า */
.ui-mobile .c-side .st.ft{font-size:11px;margin-right:4px}
.ui-mobile .star{width:26px;height:26px}
.ui-mobile .hide{width:22px;height:20px;font-size:14px;opacity:.35}

.ui-mobile .row .c-lg,.ui-mobile .row .c-time{display:none}

/* ป๊อปอัพ */
.ui-mobile .gcol{width:calc(100% - 20px);top:8px}

/* การ์ดลีกใหญ่: ตารางแบบยุบ */
.ui-mobile .hotcard .lt{table-layout:auto}
.ui-mobile .hotcard .c-lg,.ui-mobile .hotcard col.w-lg{display:none}
.ui-mobile .hc-head{padding:9px 10px}
.ui-mobile .hc-head h2{font-size:12.5px}
.ui-mobile .hotcard .tname{font-size:12px;max-width:110px}

/* หน้ารายการ */
.ui-mobile .pg-head h1{font-size:16px}
.ui-mobile .daycard{padding:6px;border-radius:12px}
.ui-mobile .dn{min-width:92px;padding:8px 8px;font-size:11.5px}
.ui-mobile .day-more{font-size:10.5px;padding:0 9px;border-radius:9px}

.ui-mobile .pg-program .c-left .c-st{font-size:12px;color:var(--text-dim)}
.ui-mobile .vs{font-size:10px;text-align:center;display:block;color:var(--text-mute)}

/* หน้ารายละเอียด */
.ui-mobile .mh{margin:10px 0 8px}
.ui-mobile .mh-meta{margin-left:0;flex-basis:100%;font-size:11.5px}
.ui-mobile .board{grid-template-columns:1fr 92px 1fr;gap:8px;padding:14px 10px}
.ui-mobile .bt,.ui-mobile .bt.h{flex-direction:column;gap:6px;text-align:center}
.ui-mobile .bt img{width:44px;height:44px;padding:4px;border-radius:10px}
.ui-mobile .bt b{font-size:13px}
.ui-mobile .bt small{display:none}
.ui-mobile .big{font-size:30px}
.ui-mobile .big i{font-size:20px;margin:0 3px}
.ui-mobile .mcard{padding:12px}
.ui-mobile .tl-row{grid-template-columns:1fr 44px 1fr;font-size:12px;padding:8px 0}
.ui-mobile .stt-row{grid-template-columns:44px 1fr 44px}
.ui-mobile .panel{padding:14px}
.ui-mobile .tryb{grid-template-columns:1fr}
.ui-mobile .range{width:110px}
/* ---------- หัวลีกในโหมดจัดกลุ่มลีก ----------
   ใช้พื้นสีเรียบ ไม่ใช่ไล่สี
   เคยลองไล่สีจากน้ำเงินไปโปร่ง แต่บนการ์ดมือถือเกิดรอยต่อกลางแถบให้เห็นชัด
   เพราะครึ่งซ้ายเป็นสีจาง ครึ่งขวาเป็นพื้นการ์ด กลายเป็นแถบสองสีที่ดูเหมือนผิดพลาด
   สีเรียบทั้งแถบอ่านง่ายกว่าและไม่มีรอยต่อ ส่วนขีดซ้ายทำหน้าที่บอกว่าเป็นหัวข้อ */
/* หัวลีกใช้สีจากชุดสีของเว็บเอง ไม่ใช่สีที่คิดขึ้นใหม่
   สีที่ผสมเองมีปัญหาสองอย่างที่เจอมาแล้ว
   ถ้าใช้สีโปร่งจะซ้อนกับพื้นข้างใต้จนเห็นรอยต่อกลางแถบ
   ถ้าใช้สีทึบที่คิดเอง ก็ไปชนกับสีตัวอักษรของแต่ละธีมจนอ่านยาก

   card-2 เป็นสีพื้นชั้นรองของเว็บอยู่แล้ว จึงเข้ากับทุกธีมโดยอัตโนมัติ
   และคู่กับ text ซึ่งเป็นสีตัวอักษรหลักเสมอ ไม่มีทางกลืนกัน
   สิ่งที่ทำให้รู้ว่าเป็นหัวข้อคือขีดสีด้านซ้ายกับตัวหนา ไม่ใช่ความเข้มของพื้น */
tr.lghead td{background:var(--lgh-bg);box-shadow:inset 3px 0 0 var(--blue);
  font-weight:700;color:var(--text)}
tr.lghead.hot td{background:var(--lgh-hot);box-shadow:inset 3px 0 0 var(--gold)}
tr.lghead td small{color:var(--lgh-sub)}

.ui-mobile .lghead{background:var(--lgh-bg);border-color:var(--lgh-line);
  box-shadow:inset 3px 0 0 var(--blue);color:var(--text);font-weight:700}
.ui-mobile .lghead.hot{background:var(--lgh-hot);border-color:var(--lgh-hotline);
  box-shadow:inset 3px 0 0 var(--gold)}
.ui-mobile .lghead small{color:var(--lgh-sub)}

/* ---------- ไอคอนตั้งค่าเสียงและป๊อปอัพ ----------
   ใช้ทั้งหน้าปกติและโหมดฝัง ต่างกันแค่ตำแหน่งกล่อง
   หน้าปกติวางกลางจอตามปกติ ส่วนในกรอบวางชิดบน
   เพราะกรอบอาจสูงมากจนกลางกรอบเป็นจุดที่คนเลื่อนไปไม่ถึง */
.sect-cfg{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:4px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;flex:none}
.sect-cfg svg{width:15px;height:15px}
.sect-cfg:hover{background:rgba(255,255,255,.26)}

.esnd{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:14px}
.embed .esnd{align-items:flex-start;padding:64px 12px 12px}
.esnd-bk{position:absolute;inset:0;background:rgba(3,8,22,.55)}
.esnd-box{position:relative;width:100%;max-width:340px;background:var(--card);
  border:1px solid var(--line-lit);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow)}
.esnd-hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.esnd-hd b{font-family:var(--ff-display);font-size:14px;color:var(--text)}
.esnd-x{border:0;background:transparent;color:var(--text-mute);font-size:22px;line-height:1;cursor:pointer}
.esnd-sec{margin:0 0 12px}
.esnd-lbl{font-size:12px;font-weight:700;color:var(--text);margin:0 0 7px}
.esnd-lbl small{color:var(--text-mute);font-weight:500;margin-left:6px}
.esnd-sel{width:100%;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:12.5px;
  border:1px solid var(--line-lit);background:var(--card-2);color:var(--text);
  font-family:inherit;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-mute) 50%),
    linear-gradient(135deg,var(--text-mute) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.esnd-sel:focus{border-color:var(--blue);outline:none}
.esnd-row small{color:var(--text-mute);font-weight:400;font-size:11px;margin-left:4px}
.esnd input[type=range]{width:100%;accent-color:var(--blue)}
.esnd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text)}
.esnd-sw{width:42px;height:24px;border-radius:999px;border:1px solid var(--line-lit);
  background:var(--card-2);cursor:pointer;position:relative;flex:none}
.esnd-sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;
  background:var(--text-mute);transition:.16s}
.esnd-sw.on{background:var(--blue);border-color:var(--blue)}
.esnd-sw.on i{left:20px;background:#fff}
.esnd-note{font-size:11px;color:var(--text-mute);line-height:1.7;margin:2px 0 0}


/* กฎของกล่องโหลดย้ายไปฝังไว้ในหน้าแทน ไม่เก็บไว้ที่นี่
   เพราะต้องวาดให้ได้ทันที ถ้ารอไฟล์นี้มาถึงก่อน กล่องจะขึ้นช้ากว่าที่ควร
   และถ้าเก็บไว้ทั้งสองที่ กฎในไฟล์นี้จะทับกฎในหน้าเสมอ เพราะถูกเรียกทีหลัง */

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}