/* wrapper */
.fo{ background:#0f172a; color:#e2e8f0; border-radius:14px; padding:14px; }

/* === grid cards === */
.fo-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }

.fo-card{
  background:#0b1220;
  border:1px solid #1f2a44;
  border-radius:12px;
  padding:14px;
}

/* header area */
.fo-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fo-card__top-left{ display:grid; gap:4px; }
.fo-league{ font-size:13px; opacity:.9; }
.fo-time{ font-size:12px; opacity:.6; }

.fo-card__top-right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.fo-badge{
  font-size:12px; padding:4px 8px; line-height:1; border-radius:10px;
  background:#0f172a; color:#cbd5e1; border:1px solid #1f2a44;
}

/* teams */
.fo-card__teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:8px 0 12px }
.fo-team{ font-weight:800; color:#e2e8f0; font-size:16px; text-wrap:balance; }
.fo-vs{ opacity:.6; font-size:12px }

/* odds */
.fo-card__odds{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fo-odd{
  background:#0f1a2e;
  border:1px solid #1f2a44;
  border-radius:8px;
  padding:8px 10px;
  display:flex; align-items:center; justify-content:space-between;
  transition:.2s ease;
}
.fo-odd:hover{ transform:translateY(-1px); }
.fo-odd span{ opacity:.7; font-size:12px; }
.fo-odd b{ font-weight:800; }

/* hot (ไฮไลต์) */
.fo-odd.is-hot{
  background:#3b0b12;
  border-color:#5e1a22;
  color:#fff;
}

/* foot note */
.fo-card__note{ margin-top:10px; font-size:12px; opacity:.65; }

/* ===========================
   Pretty Horizontal Scrollbar
   ใช้กับ .fo-track-wrap ที่มีคลาส .fo-scroll
   =========================== */

/* ค่าพื้นฐานแบบปรับธีมได้ด้วย CSS variables */
.fo {
  --fo-scroll-track: #0b1220;         /* สีพื้นราง */
  --fo-scroll-thumb: #334155;         /* สีหัวเลื่อน */
  --fo-scroll-thumb-hover: #475569;   /* สีหัวเลื่อนตอน hover */
  --fo-scroll-height: 8px;            /* ความสูงแถบเลื่อนเริ่มต้น */
  --fo-scroll-height-hover: 10px;     /* ความสูงตอน hover (เดสก์ท็อป) */
  --fo-scroll-radius: 999px;          /* มนๆ */
  --fo-scroll-border: 2px;            /* เว้นขอบให้ thumb ดูลอย */
}

/* Firefox */
.fo .fo-scroll {
  scrollbar-color: var(--fo-scroll-thumb) var(--fo-scroll-track);
  scrollbar-width: thin;                  /* บางพอดี */
  scrollbar-gutter: stable both-edges;    /* กันเลย์เอาต์สั่น */
}

/* WebKit (Chrome/Edge/Safari) */
.fo .fo-scroll::-webkit-scrollbar {
  height: var(--fo-scroll-height);
  background: transparent;
}

.fo .fo-scroll::-webkit-scrollbar-track {
  background: var(--fo-scroll-track);
  border-radius: var(--fo-scroll-radius);
}

.fo .fo-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--fo-scroll-thumb) 0%,
    var(--fo-scroll-thumb) 60%,
    var(--fo-scroll-thumb-hover) 100%
  );
  border-radius: var(--fo-scroll-radius);
  border: var(--fo-scroll-border) solid var(--fo-scroll-track);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* โทน hover: หนาขึ้นนิดและสีเข้มขึ้น (เฉพาะอุปกรณ์ที่มี hover) */
@media (hover: hover) {
  .fo .fo-scroll:hover::-webkit-scrollbar {
    height: var(--fo-scroll-height-hover);
  }
  .fo .fo-scroll:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
      var(--fo-scroll-thumb-hover) 0%,
      var(--fo-scroll-thumb-hover) 60%,
      #64748b 100%
    );
  }
}

/* ปรับให้ scrollbar ไม่ไปบังคอนเทนต์ด้านล่าง */
.fo .fo-track { padding-bottom: 10px; }