/* l7-goal.css — ป๊อปอัพประตู เสียง และแถบสีบนแถว
 * วางที่ httpdocs/live/l7-goal.css
 * แยกออกมาเป็นไฟล์นิ่ง ไม่ฝังใน ASP เพราะเครื่องหมายคำพูดต้องพิมพ์ซ้อนทุกตัว
 * และแยกแล้วเบราว์เซอร์แคชได้ ไม่ต้องส่งซ้ำทุกครั้งที่โหลดหน้า
 */

/* ---------- แถบข้อความแจ้งเตือนล่างจอ ---------- */
.l7-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:#0a2d5a; color:#fff; border:1px solid #0e84d4;
  box-shadow:0 8px 28px rgba(10,45,90,.4);
  padding:11px 20px; border-radius:999px;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif; font-size:14px; font-weight:500;
  opacity:0; pointer-events:none; transition:.28s; z-index:9999;
}
.l7-toast.on{ opacity:1; transform:translate(-50%,0) }

/* ---------- แถบสีค้างบนแถวที่เพิ่งมีประตู 15 วินาที ---------- */
.l7-row{ position:relative }
.l7-row.hit-h::after,.l7-row.hit-a::after{
  content:""; position:absolute; top:0; bottom:0; width:52%;
  pointer-events:none; z-index:0; animation:l7HitFade 60s ease-out forwards;
}
/* ฟ้า #00CCFF ทั้งสองฝั่ง = สีนี้แปลว่า "ทีมนี้เพิ่งทำประตู"
   ไม่ต้องจำว่าฟ้าคือเหย้าแดงคือเยือน ดูออกทันทีว่าใครยิง */
.l7-row.hit-h::after{ left:0;  background:linear-gradient(90deg,rgba(0,204,255,.42),rgba(0,204,255,0) 95%) }
.l7-row.hit-a::after{ right:0; background:linear-gradient(270deg,rgba(0,204,255,.42),rgba(0,204,255,0) 95%) }
.l7-row.hit-h > span,.l7-row.hit-a > span{ position:relative; z-index:1 }
/* ทีมที่ยิงประตู: ตัวหนา + พื้นหลังเรืองแสงรอบข้อความ ให้สะดุดตาจากระยะไกล */
.l7-row.hit-h .l7-hn,
.l7-row.hit-a .l7-an{
  display:inline-block; padding:2px 9px; border-radius:7px; font-weight:800;
  animation:l7Glow 1.6s ease-in-out infinite;
}
.l7-row.hit-h .l7-hn,
.l7-row.hit-a .l7-an{
  color:#04405c; background:rgba(0,204,255,.38);
  box-shadow:0 0 0 1px rgba(0,204,255,.75);
}
@keyframes l7Glow{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.22) }
}
@keyframes l7HitFade{ 0%{opacity:0} 2%{opacity:1} 87%{opacity:1} 100%{opacity:0} }

/* เครื่องหมาย ' กะพริบ = นาทีกำลังเดิน */
.l7-tk{
  font-style:normal; font-weight:800; color:#ed1b2e;
  animation:l7Tick 1s steps(1,end) infinite;
}
@keyframes l7Tick{ 0%,50%{opacity:1} 50.01%,100%{opacity:.15} }

/* สกอร์วาบตอนเปลี่ยน */
.l7-score.flash{ animation:l7Goal .9s ease }
@keyframes l7Goal{
  0%{ transform:scale(1) }
  30%{ transform:scale(1.35); background:#fff3cd; border-color:#f0b400 }
  100%{ transform:scale(1) }
}

/* ---------- ป๊อปอัพประตู ---------- */
#l7Goals{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:9998;
  display:flex; flex-direction:column; gap:9px; pointer-events:none;
  width:min(600px,calc(100vw - 24px));
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;
}
.l7-goal{
  pointer-events:auto;
  /* ไล่สีตามภาพต้นแบบ ฟ้าสดด้านบนจางลงเกือบขาวด้านล่าง */
  background:linear-gradient(180deg,#7fe4ff 0%,#b3efff 45%,#e6faff 78%,#fafeff 100%);
  border:1px solid #7fe2ff; border-radius:16px;
  box-shadow:0 16px 44px rgba(10,90,140,.32); overflow:hidden; position:relative;
  animation:l7DropIn .44s cubic-bezier(.2,.9,.3,1.35) both;
}
.l7-goal.out{ animation:l7DropOut .3s ease forwards }
/* เดิมเป็นแถบสีบาง ๆ ที่ขอบซ้าย/ขวา ดูไม่ออกว่าฝั่งไหนยิง
   เปลี่ยนเป็นริบบิ้นเต็มความกว้างด้านบน สีบอกฝั่งชัดกว่าและดูเป็นชิ้นเดียวกัน */
@keyframes l7DropIn{ from{opacity:0;transform:translateY(-18px) scale(.96)} to{opacity:1;transform:none} }
@keyframes l7DropOut{ to{opacity:0;transform:translateY(-10px) scale(.97)} }

.l7-g-top{
  display:flex; align-items:center; gap:9px; padding:10px 14px;
  position:relative; overflow:hidden;
}
.l7-goal.h .l7-g-top{ background:linear-gradient(120deg,#053a6b,#0e84d4 62%,#33aaff) }
.l7-goal.a .l7-g-top{ background:linear-gradient(120deg,#7a0c14,#d81528 62%,#ff5a6a) }
/* ประกายวิ่งผ่านริบบิ้นรอบเดียวตอนเด้ง */
.l7-g-top::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  animation:l7Sheen 1.5s ease-out .25s 1;
}
@keyframes l7Sheen{ to{ left:130% } }
/* ลูกฟุตบอลใช้ SVG จริง ไล่เฉดสีแบบเดิมออกมาเป็นวงกลมเฉย ๆ ไม่เหมือนลูกบอล */
.l7-g-ball{
  width:23px; height:23px; flex-shrink:0; display:block;
  position:relative; z-index:1;
  animation:l7Spin 1.1s linear 2;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
.l7-g-ball svg{ width:100%; height:100%; display:block }
@keyframes l7Spin{ to{ transform:rotate(360deg) } }
.l7-g-word{
  font-style:italic; font-weight:800; font-size:17px; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35); position:relative; z-index:1;
}
.l7-g-league{
  margin-left:auto; font-size:11.5px; color:rgba(255,255,255,.92); font-weight:600;
  text-align:right; max-width:180px; position:relative; z-index:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.l7-g-x{
  width:23px; height:23px; border-radius:7px; border:none; cursor:pointer; flex-shrink:0;
  background:rgba(255,255,255,.22); color:#fff; font-size:16px; line-height:1;
  position:relative; z-index:1;
}
.l7-g-x:hover{ background:rgba(255,255,255,.4) }

.l7-g-mid{ display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:12px; padding:13px 18px 10px }
.l7-g-team{ display:flex; align-items:center; gap:7px; min-width:0; font-size:14.5px; color:#155070 }
.l7-g-team.h{ flex-direction:row-reverse; text-align:right }
/* ชื่อทีมยาว ๆ อย่าง "โบรุสเซีย มึนเช่นกลัดบัค" ยาวกว่า 210px
   ให้ตัดขึ้นบรรทัดที่สองแทนการตัดท้ายด้วย ... จะได้อ่านครบ */
.l7-g-team span{
  min-width:0; white-space:normal; overflow-wrap:break-word; word-break:break-word;
  line-height:1.25; max-height:2.5em; overflow:hidden;
}
/* ชื่อที่ยาวเกิน 18 ตัวอักษร ย่อขนาดลงหน่อยให้ลงสองบรรทัดพอดี */
.l7-g-team span.long{ font-size:13px }
.l7-g-team span.xlong{ font-size:12px }
.l7-g-team.scored{ color:#0b2b4a; font-weight:800 }
.l7-g-team img{ width:24px; height:24px; object-fit:contain; flex-shrink:0 }

.l7-g-score{ display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; line-height:1 }
.l7-g-score .n{ font-size:24px; color:#3c7f9e; transition:.25s }
.l7-g-score .d{ font-size:15px; color:#7fc4dd }
.l7-goal.h .l7-g-score .n.h,.l7-goal.a .l7-g-score .n.a{ font-size:33px; animation:l7Pop .6s cubic-bezier(.2,.9,.3,1.4) }
.l7-goal.h .l7-g-score .n.h{ color:#04355f; text-shadow:0 2px 10px rgba(255,255,255,.9) }
.l7-goal.a .l7-g-score .n.a{ color:#c2101d; text-shadow:0 2px 10px rgba(255,255,255,.9) }
@keyframes l7Pop{ 0%{transform:scale(.6);opacity:.3} 45%{transform:scale(1.28)} 100%{transform:scale(1);opacity:1} }

/* ชื่อคนยิงกับนาที จัดกึ่งกลางให้สมดุลกับสกอร์ด้านบน */
.l7-g-who{
  padding:0 15px 13px; font-size:12.5px; color:#255a78;
  display:flex; gap:7px; align-items:center; justify-content:center;
}
.l7-g-who b{
  color:#062f52; font-weight:800;
  background:rgba(255,255,255,.6); padding:1px 8px; border-radius:6px;
}
.l7-g-min{ font-size:11.5px; color:#3c7f9e }

.l7-g-bar{ height:3px; background:rgba(255,255,255,.45); position:relative; overflow:hidden }
.l7-g-bar i{ position:absolute; inset:0; transform-origin:left; display:block }
.l7-goal.h .l7-g-bar i{ background:linear-gradient(90deg,#4dd8ff,#0e84d4) }
.l7-goal.a .l7-g-bar i{ background:linear-gradient(90deg,#ff7a85,#ed1b2e) }
.l7-goal:hover .l7-g-bar i{ animation-play-state:paused }
@keyframes l7Drain{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ---------- ปุ่มเสียง/ตั้งค่า (อยู่ขวาสุดของแถบกำลังแข่ง) ---------- */
.l7-tools{ display:flex; align-items:center; gap:6px; margin-left:auto }

/* ปุ่มธงสลับภาษา อยู่ขวาสุดของแถบกำลังแข่งขัน
   แสดงสองธงพร้อมกัน ธงที่เลือกอยู่จะสว่าง อีกอันจะจาง กดสลับได้ทันที */
.l7-flags{display:flex;gap:4px;align-items:center;margin-left:auto;padding-left:8px}
/* ธงอยู่ก่อนปุ่มเครื่องมือ ทั้งคู่จึงถูกดันไปกองขวาสุดด้วยกัน
   เอา margin-left:auto ออกจาก l7-tools ไม่งั้นมันจะดันตัวเองแยกออกไป */
.l7-flags ~ .l7-tools{margin-left:6px}
.l7-flag{width:26px;height:17px;border-radius:3px;cursor:pointer;opacity:.4;
  border:1.5px solid rgba(255,255,255,.5);display:block;
  transition:opacity .15s ease,transform .15s ease,border-color .15s ease}
.l7-flag:hover{opacity:.75;transform:scale(1.08)}
.l7-flag.on{opacity:1;border-color:#ffdd00;box-shadow:0 0 0 1.5px rgba(255,221,0,.45)}
.l7-tool{
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  font-size:14px; line-height:1; display:grid; place-items:center; padding:0;
}
.l7-tool:hover{ background:rgba(255,255,255,.34) }
.l7-tool.off{ opacity:.5 }

/* ===== เบราว์เซอร์ล็อกเสียงจนกว่าผู้ใช้จะคลิกอะไรสักอย่างในหน้า =====
   คนที่เปิดทิ้งไว้เฉย ๆ จะไม่ได้ยินเสียงประตูโดยไม่รู้ตัว
   ใช้ box-shadow เรืองแสงรอบปุ่มอย่างเดียว ไม่แตะพื้นปุ่มและไม่ขยับ
   (spread เป็นบวกอย่างเดียว แสงจึงอยู่นอกกรอบปุ่ม ไม่ทับตัวปุ่ม) */
.l7-tool.locked{
  animation:l7pulse 1.5s ease-in-out infinite;
}
@keyframes l7pulse{
  0%{   box-shadow:0 0 9px 3px rgba(255,221,0,.85) }
  55%{  box-shadow:0 0 20px 8px rgba(255,238,120,1) }
  100%{ box-shadow:0 0 9px 3px rgba(255,221,0,.85) }
}

/* ---------- ปุ่มสลับมุมมอง (บนหัววิดเจ็ต) ---------- */
.l7-view{
  margin-left:auto; margin-right:8px;
  font-family:inherit; font-size:12px; font-weight:700; color:#eaf4ff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  padding:5px 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.l7-view:hover{ background:rgba(255,255,255,.3) }

/* ---------- โหมดจัดกลุ่ม: ซ่อนคอลัมน์ลีกในแถว ---------- */
/* หัวข้อลีกบอกอยู่แล้ว ซ้ำในทุกแถวเปลืองที่ เอาไปให้ชื่อทีมแทน */
.l7-grouped .l7-row .l7-lg,
.l7-grouped .l7-thead .l7-lg{ display:none }
/* ธงประเทศก็ซ่อนด้วย เพราะกลุ่มเดียวกันคือประเทศเดียวกัน */
.l7-grouped .l7-row .l7-flag,
.l7-grouped .l7-thead .l7-flag{ display:none }

/* ---------- หัวกลุ่มลีกในมุมมองจัดกลุ่ม ---------- */
.l7-ghead{
  display:flex; align-items:center; gap:7px;
  padding:7px 13px; background:#cfe1f8; letter-spacing:.2px;
  border-top:1px solid #a9c7ee; border-bottom:1px solid #a9c7ee;
  font-size:12.5px; font-weight:800; color:#083f73;
}
/* หัวกลุ่มแรกไม่ต้องมีเส้นบน จะได้ไม่ซ้อนกับหัวคอลัมน์ */
.l7-list .l7-ghead:first-child{ border-top:none }
.l7-ghead img{ width:20px; height:14px; object-fit:cover; border-radius:2px; flex-shrink:0 }

/* ---------- รายละเอียดในแมตช์ (กางใต้แถว) ---------- */
/* กดได้เฉพาะคู่ที่มีรายละเอียดให้ดู
   ยังไม่เตะ หรือเช็คแล้วว่าไม่มีข้อมูล ก็ไม่ต้องให้เมาส์เป็นรูปมือ
   จะได้ไม่ชวนให้กดแล้วไม่มีอะไรเกิดขึ้น */
.l7-row{ cursor:pointer }
.l7-row[data-bucket="ns"],
.l7-row.nodetail{ cursor:default }
.l7-row.open{ background:#eef4ff !important }

.l7-detail{
  background:#f8fbff; border-bottom:1px solid #dbe3ef;
  padding:8px 13px; font-family:'Segoe UI',Tahoma,Arial,sans-serif;
}
.l7-detail.l7-hidden{ display:none }

.l7-ev{
  display:flex; align-items:center; gap:9px;
  padding:4px 8px; font-size:12.5px; color:#334155; border-radius:6px;
}
.l7-ev:nth-child(even){ background:rgba(255,255,255,.7) }
/* เจ้าบ้านชิดซ้าย ทีมเยือนเยื้องเข้ามา ดูออกว่าฝั่งไหน */
.l7-ev.a{ margin-left:auto; flex-direction:row-reverse; text-align:right }

.l7-ev-min{
  flex:0 0 42px; text-align:center; font-size:11px; font-weight:800;
  color:#0a5ca8; background:#e7eefb; border-radius:5px; padding:2px 0;
}
.l7-ev-ico{ flex:0 0 18px; text-align:center; font-size:13px; line-height:1 }
.l7-ev-txt{ flex:1 1 auto; min-width:0 }
.l7-ev-txt em{ font-style:normal; color:#64748b; font-size:11.5px }

/* ใบเหลือง/ใบแดงวาดด้วย CSS ไม่ใช้อีโมจิ สีจะได้ตรงทุกเครื่อง */
.l7-ev-yc,.l7-ev-rc{
  display:inline-block; width:9px; height:12px; border-radius:2px; vertical-align:middle;
}
.l7-ev-yc{ background:#f0b400 }
.l7-ev-rc{ background:#e02020 }

.l7-ev-none{ padding:6px 8px; font-size:12.5px; color:#64748b }
.l7-ev-none small{ display:block; color:#94a3b8; font-size:11px; margin-top:2px }

/* ---------- ปุ่มที่กำลังเปิดใช้งานอยู่ ---------- */
.l7-view.on{
  background:#ffdd00; color:#0a2d5a; border-color:#e6c700;
}
.l7-view.on:hover{ background:#ffe95c }

/* ---------- แผงเลือกลีก ---------- */
.l7-lgpanel{ width:360px; max-height:76vh; display:flex; flex-direction:column }
.l7-lglist{
  overflow-y:auto; margin:10px 0; border:1px solid #e7ecf6; border-radius:9px;
  background:#f8fbff; max-height:52vh;
}
.l7-lgitem{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-bottom:1px solid #eef2f7; font-size:12.5px; cursor:pointer; margin:0;
}
.l7-lgitem:last-child{ border-bottom:none }
.l7-lgitem:hover{ background:#eef4ff }
.l7-lgitem span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.l7-lgitem b{ font-size:11px; color:#64748b; background:#e7ecf6; padding:1px 7px; border-radius:999px }
.l7-lgitem input{ flex-shrink:0; width:15px; height:15px; cursor:pointer }

/* ---------- แผงตั้งค่า ---------- */
/* แผงลอยกลางจอ พร้อมฉากหลังมืดกันคลิกทะลุไปโดนแถวข้างหลัง */
.l7-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:9997; width:320px; max-width:calc(100vw - 32px);
  background:#fff; border:1px solid #dbe3ef; border-radius:14px;
  box-shadow:0 24px 60px rgba(10,30,70,.38); padding:16px 18px;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif; font-size:13px; color:#334155;
  animation:l7PanelIn .2s ease both;
}
.l7-panel[hidden]{ display:none }
@keyframes l7PanelIn{ from{ opacity:0; transform:translate(-50%,-46%) } to{ opacity:1 } }

.l7-backdrop{ position:fixed; inset:0; z-index:9996; background:rgba(8,25,50,.45) }
.l7-backdrop[hidden]{ display:none }
.l7-panel h4{ margin:0 0 10px; font-size:14px; color:#0a2d5a }
.l7-panel label{ display:block; margin:9px 0 4px; font-weight:600; font-size:12px; color:#475569 }
.l7-panel select,.l7-panel input[type=range]{ width:100%; box-sizing:border-box }
.l7-panel select{ padding:6px 8px; border:1px solid #dbe3ef; border-radius:8px; font-family:inherit; font-size:13px }
.l7-panel .l7-kitd{ font-size:11.5px; color:#94a3b8; margin-top:4px; line-height:1.5 }
.l7-panel .l7-chk{ display:flex; align-items:center; gap:8px; margin:10px 0; font-weight:600; font-size:12.5px }

/* ===== สวิตช์เลื่อนแบบแอปมือถือ =====
   ช่องติ๊กธรรมดาไม่บอกว่าสถานะไหนคือเปิด สวิตช์เลื่อนเห็นปุ๊บรู้ปั๊บ */
.l7-panel .l7-sw{ display:flex; align-items:center; gap:10px; margin:4px 0 12px;
  font-weight:700; font-size:13px; color:#0a2d5a; cursor:pointer; user-select:none }
.l7-panel .l7-sw input{ position:absolute; opacity:0; width:0; height:0 }
.l7-panel .l7-sw i{
  flex:0 0 auto; position:relative; width:44px; height:25px; border-radius:25px;
  background:#c7d2e0; transition:background .22s ease;
}
.l7-panel .l7-sw i:before{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .22s ease;
}
.l7-panel .l7-sw input:checked + i{ background:#1a9c4c }
.l7-panel .l7-sw input:checked + i:before{ transform:translateX(19px) }
.l7-panel .l7-sw input:focus-visible + i{ box-shadow:0 0 0 3px rgba(14,132,212,.35) }
.l7-panel .l7-sw span{ flex:1 1 auto; min-width:0 }
.l7-panel .l7-row2{ display:flex; gap:8px; margin-top:12px }
.l7-panel button{
  flex:1; padding:8px; border-radius:9px; border:1px solid #dbe3ef; background:#f8fbff;
  font-family:inherit; font-size:12.5px; font-weight:700; color:#0a5ca8; cursor:pointer;
}
.l7-panel button:hover{ background:#eef4ff }
.l7-panel .l7-close{ background:#0a5ca8; color:#fff; border-color:#0a5ca8 }
.l7-panel .l7-close:hover{ background:#0a2d5a }