/* =========================================================
   UFAGOOL - Bootstrap 5 rebuild
   Design tokens วัดจากหน้าเว็บต้นแบบ (ufagool.net)
   ========================================================= */

:root {
  /* พื้นหลัง */
  --ufa-bg:        #1b1919;
  --ufa-bg-dark:   #080808;
  --ufa-bg-blog:   #0b0e11;
  --ufa-panel:     #141414;
  --ufa-panel-2:   #1c1a1a;

  /* แดงหลักของแบรนด์ */
  --ufa-red:       #e01d1d;
  --ufa-red-2:     #ff3c3c;
  --ufa-red-deep:  #8c0d0d;
  --ufa-red-glow:  rgba(255, 60, 60, .35);

  /* ทองรอง */
  --ufa-gold:      #f5c542;
  --ufa-gold-2:    #f1c40f;
  --ufa-gold-soft: rgba(245, 197, 66, .12);

  --ufa-text:      #ffffff;
  --ufa-muted:     #b9b3b3;
  --ufa-line:      rgba(255, 255, 255, .08);

  --ufa-header-h:  72px;
  --ufa-radius:    14px;
  --ufa-radius-sm: 10px;

  --ufa-shadow:     0 4px 24px rgba(0,0,0,.7);
  --ufa-shadow-red: 0 8px 26px rgba(224,29,29,.35);

  --ufa-header-bg: linear-gradient(135deg,#080808 0%,#110000 40%,#1a0000 60%,#080808 100%);
}

/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--ufa-bg);
  color: var(--ufa-text);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #0d0c0c; }
::-webkit-scrollbar-thumb { background: #3a2626; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--ufa-red); }

/* ข้อความไล่สีทอง-แดง ใช้ซ้ำหลายที่ */
.ufa-gradient-text {
  background: linear-gradient(90deg,#ffe89a,#f5c542 45%,#ff6a3d 75%,#ff3c3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   1. HEADER
   ========================================================= */
.ufa-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1040;
  height: var(--ufa-header-h);
  background: var(--ufa-header-bg);
  box-shadow: var(--ufa-shadow), 0 1px 0 rgba(255,60,60,.08);
  border-bottom: 1px solid rgba(255,60,60,.12);
}

.ufa-header__inner {
  height: var(--ufa-header-h);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ufa-logo img { width: 206px; max-width: 45vw; }

.ufa-nav { display: flex; align-items: center; gap: .15rem; margin-left: .5rem; }

.ufa-nav__item {
  position: relative;
  padding: .5rem .7rem;
  font-size: .92rem;
  font-weight: 500;
  color: #efe7e7;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.ufa-nav__item:hover { color: #fff; background: rgba(255,60,60,.10); }

.ufa-nav__item.active { color: var(--ufa-red-2); }
.ufa-nav__item.active::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: .18rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,transparent,var(--ufa-red-2),transparent);
}

/* ป้าย New บนเมนูดูบอลสด */
.ufa-nav__badge {
  position: absolute;
  top: -2px; right: -6px;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1;
  padding: .18rem .3rem;
  border-radius: 5px;
  background: var(--ufa-red);
  color: #fff;
  box-shadow: 0 0 10px var(--ufa-red-glow);
}

/* ปุ่มมุมขวาบน */
.ufa-btn-login,
.ufa-btn-register {
  font-size: .88rem;
  font-weight: 500;
  padding: .48rem 1.15rem;
  border-radius: 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.ufa-btn-login {
  background: #171313;
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.ufa-btn-login:hover { background: #241b1b; border-color: var(--ufa-red-2); }

.ufa-btn-register {
  background: linear-gradient(135deg,var(--ufa-red-2),var(--ufa-red) 55%,var(--ufa-red-deep));
  color: #fff;
  box-shadow: var(--ufa-shadow-red);
}
.ufa-btn-login:hover,
.ufa-btn-register:hover { transform: translateY(-1px); }

.ufa-burger {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 9px;
  width: 42px; height: 38px;
  font-size: 1.05rem;
}

.header-spacer { height: var(--ufa-header-h); }

/* Offcanvas เมนูมือถือ */
.ufa-offcanvas {
  background: var(--ufa-header-bg);
  color: #fff;
  width: 280px;
}
.ufa-offcanvas .ufa-nav__item {
  display: block;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--ufa-line);
  border-radius: 0;
}
.ufa-offcanvas .ufa-nav__item.active::after { display: none; }

/* =========================================================
   2. HERO SLIDER (สไลด์กลางเด่น + เห็นสไลด์ข้าง)
   ========================================================= */
.hero {
  position: relative;
  background: #000;
  overflow: hidden;
  /* ความสูงเท่าต้นแบบ: 392px ที่จอกว้าง 1280 => 30.6vw */
  height: clamp(150px, 30.6vw, 392px);
}

.hero__viewport { overflow: hidden; height: 100%; }

.hero__track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.4,.1,.2,1);
}

.hero__slide {
  flex: 0 0 auto;
  width: 62%;
  height: 100%;
  padding: 0 6px;
  opacity: .45;
  transform: scale(.94);
  transition: opacity .5s, transform .5s;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* ปุ่มลูกศรซ้าย-ขวา */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 1rem;
  display: grid;
  place-items: center;
  transition: background .2s;
}
.hero__nav:hover { background: var(--ufa-red); }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }

.hero__dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 5;
}
.hero__dot {
  width: 8px; height: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  padding: 0;
  transition: width .25s, background .25s;
}
.hero__dot.is-active { width: 22px; border-radius: 5px; background: var(--ufa-red-2); }

/* =========================================================
   3. HERO ACTION BAR (แถบปุ่มใต้สไลด์)
   ========================================================= */
.hero-action-bar {
  padding: 18px 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(245,197,66,.12), transparent 70%),
    linear-gradient(#0a0a0a, #000);
  border-bottom: 1px solid rgba(255,60,60,.10);
}

.hero-action-bar__grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ufa-cta {
  min-width: 190px;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  padding: .7rem 1.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .18s, box-shadow .18s;
}
.ufa-cta:hover { transform: translateY(-2px); }

.ufa-cta--outline {
  background: #120e0e;
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.ufa-cta--outline:hover { border-color: var(--ufa-red-2); }

.ufa-cta--solid {
  background: linear-gradient(135deg,var(--ufa-red-2),var(--ufa-red) 55%,var(--ufa-red-deep));
  color: #fff;
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--ufa-shadow-red);
}

/* =========================================================
   4. BRAND SLIDER (หัวข้อ + แถวโลโก้ค่ายเกมเลื่อนอัตโนมัติ)
   ========================================================= */
.brand-slider {
  position: relative;
  padding: 26px 0 30px;
  background:
    radial-gradient(at 50% 0%, rgba(224,29,29,.18), transparent 60%),
    var(--ufa-bg);
}

.brand-slider__title {
  text-align: center;
  font-size: clamp(1.15rem, 3.2vw, 1.85rem);
  font-weight: 600;
  margin-bottom: 1.1rem;
  color: var(--ufa-red-2);
  text-shadow: 0 0 18px rgba(255,60,60,.55);
}

/* แถบเลื่อน - marquee ด้วย CSS animation ล้วน */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brand-card {
  flex: 0 0 auto;
  width: 180px;
  border-radius: var(--ufa-radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.brand-card img {
  width: 180px; height: 180px;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(.75);
  transition: filter .3s;
}
.brand-card:hover {
  transform: translateY(-5px);
  border-color: var(--ufa-red-2);
  box-shadow: 0 10px 26px rgba(224,29,29,.35);
}
.brand-card:hover img { filter: none; }

/* =========================================================
   5. PROMO VIDEO
   ========================================================= */
.promo-video {
  padding: 28px 12px 36px;
  background:
    radial-gradient(at 50% 0%, rgba(241,196,15,.08), transparent 60%),
    var(--ufa-bg-dark);
}

.promo-video__title {
  text-align: center;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 600;
  margin-bottom: .4rem;
}
.promo-video__subtitle {
  text-align: center;
  color: var(--ufa-muted);
  font-size: .95rem;
  margin-bottom: .9rem;
}
.promo-video__line {
  width: 140px; height: 3px;
  margin: 0 auto 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg,transparent,var(--ufa-gold),transparent);
}

.promo-video__frame {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--ufa-radius);
  padding: 10px;
  background: linear-gradient(135deg,rgba(245,197,66,.4),rgba(224,29,29,.35));
}

.promo-video__box {
  position: relative;
  border-radius: var(--ufa-radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.promo-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

.promo-video__badge {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .32rem .7rem;
  border-radius: 99px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(245,197,66,.5);
  color: var(--ufa-gold);
}
.promo-video__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ufa-red-2);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.7); }
}

.promo-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78px; height: 78px;
  border: none;
  border-radius: 50%;
  background: rgba(224,29,29,.92);
  color: #fff;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  animation: play-ring 2s infinite;
  transition: transform .2s;
}
.promo-video__play:hover { transform: scale(1.08); }
.promo-video__play.is-hidden { display: none; }
@keyframes play-ring {
  0%   { box-shadow: 0 0 0 0 rgba(224,29,29,.55); }
  70%  { box-shadow: 0 0 0 26px rgba(224,29,29,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,29,29,0); }
}

.promo-video__mute {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
}

.promo-video__cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* =========================================================
   6. UFA INTRO (บทความแนะนำเว็บ)
   ========================================================= */
.ufa-intro {
  padding: 32px 0 48px;
  background: var(--ufa-bg-dark);
}

.ufa-intro__card {
  background: linear-gradient(180deg,#141010,#0d0b0b);
  border: 1px solid rgba(255,60,60,.16);
  border-radius: var(--ufa-radius);
  padding: clamp(1.1rem, 3vw, 2.2rem);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.ufa-intro h1,
.ufa-intro h2 {
  font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1rem;
  text-align: center;
}

.ufa-intro h3 {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 600;
  color: var(--ufa-gold);
  margin: 1.9rem 0 .9rem;
}

.ufa-intro p {
  color: #d8d2d2;
  line-height: 2;
  font-size: .97rem;
  margin-bottom: 1rem;
}

.ufa-intro__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: grid;
  gap: .55rem;
}
.ufa-intro__list li {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ufa-line);
  border-left: 3px solid var(--ufa-red);
  border-radius: 8px;
  padding: .6rem .9rem;
  color: #e6e1e1;
  font-size: .95rem;
  transition: background .2s, transform .2s;
}
.ufa-intro__list li:hover {
  background: rgba(224,29,29,.10);
  transform: translateX(4px);
}

.ufa-intro__banner {
  display: block;
  margin: 1.6rem auto;
  border-radius: var(--ufa-radius-sm);
  max-width: 680px;
  width: 100%;
}

.ufa-intro__banner--wide { max-width: 1150px; }

.ufa-intro__logo {
  display: block;
  margin: 1.4rem auto .6rem;
  max-width: 340px;
  width: 70%;
}

/* =========================================================
   7. UVA – แบนเนอร์ขาว + กล่อง CTA ต้อนรับ
   ========================================================= */
.uva-wrap { background: #fff; }

.uva-banner { text-align: center; padding: 0; }
.uva-banner img { display: block; margin: 0 auto; width: 100%; max-width: 680px; }

.uva-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2.6rem 1rem 2.8rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(224,29,29,.35), transparent 65%),
    linear-gradient(160deg,#151010,#0a0808);
}

.uva-glow {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,66,.22), transparent 70%);
  pointer-events: none;
}

.uva-content { position: relative; z-index: 2; }

.uva-icon-ring {
  width: 68px; height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: var(--ufa-gold);
  background: rgba(0,0,0,.5);
  border: 2px solid rgba(245,197,66,.55);
  box-shadow: 0 0 26px rgba(245,197,66,.3);
}

.uva-title {
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  font-weight: 500;
  margin-bottom: .3rem;
}
.uva-name {
  display: block;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .04em;
}
.uva-sub {
  color: var(--ufa-muted);
  font-size: .95rem;
  margin: .7rem 0 1.3rem;
}

.uva-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.6rem;
}
.uva-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  padding: .45rem .95rem;
  border-radius: 99px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,197,66,.28);
  color: #eee6e6;
}
.uva-chip i { color: var(--ufa-gold); }

.uva-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.uva-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 200px;
  justify-content: center;
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .18s;
}
.uva-btn:hover { transform: translateY(-2px); }
.uva-btn--primary {
  background: linear-gradient(135deg,var(--ufa-red-2),var(--ufa-red) 55%,var(--ufa-red-deep));
  color: #fff;
  box-shadow: var(--ufa-shadow-red);
}
.uva-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

/* =========================================================
   8. JACKPOT (สลิปรางวัลเลื่อน)
   ========================================================= */
.jackpot-section {
  padding: 30px 0;
  background: var(--ufa-bg-dark);
}
.jackpot-card {
  flex: 0 0 auto;
  width: 268px;
  border-radius: var(--ufa-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(245,197,66,.2);
}
.jackpot-card img { width: 268px; height: 268px; object-fit: cover; display: block; }

.jackpot-section .marquee__track { animation-duration: 60s; gap: 14px; }

/* =========================================================
   9. BLOG
   ========================================================= */
.ufa-blog {
  padding: 20px 0 70px;
  background: var(--ufa-bg-blog);
}

.ufa-blog__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.2rem;
}
.ufa-blog__head h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}
.ufa-blog__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,var(--ufa-red),transparent);
}

.blog-card {
  display: flex;
  gap: .9rem;
  height: 100%;
  padding: .7rem;
  border-radius: var(--ufa-radius-sm);
  background: #12161a;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,60,60,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.blog-card__thumb {
  flex: 0 0 160px;
  width: 160px; height: 110px;
  border-radius: 8px;
  object-fit: cover;
}
.blog-card__title {
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: .35rem;
}
.blog-card__excerpt {
  font-size: .82rem;
  color: #9aa2aa;
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.ufa-copy {
  background: linear-gradient(180deg,#0b0909,#000);
  border-top: 1px solid rgba(255,60,60,.15);
  padding: 2.2rem 0 1.2rem;
}
.ufa-copy__logo img { width: 282px; max-width: 70vw; }

.ufa-copy__text {
  max-width: 900px;
  margin: 1rem auto 1.4rem;
  text-align: center;
  color: #9d9797;
  font-size: .85rem;
  line-height: 1.9;
}

.ufa-copy__partners {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--ufa-line);
  border-bottom: 1px solid var(--ufa-line);
}
.ufa-copy__partners img {
  height: 30px;
  width: auto;
  opacity: .65;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s;
}
.ufa-copy__partners img:hover { opacity: 1; filter: none; }

.ufa-copy__bottom {
  text-align: center;
  margin: 1.1rem 0 0;
  font-size: .8rem;
  color: #7d7676;
}
.ufa-copy__bottom span { color: var(--ufa-red-2); }

/* =========================================================
   11. STICKY PILL (แถบล่าง) + BACK TO TOP + LINE
   ========================================================= */
.footer-wrapper {
  position: fixed;
  left: 0; right: 0; bottom: 14px;
  z-index: 1035;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.footer-pill {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg,#141010,#0a0707);
  border: 1px solid rgba(255,60,60,.3);
  box-shadow: 0 10px 34px rgba(0,0,0,.75);
}

.pill-item {
  background: transparent;
  border: none;
  color: #e9e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem 1.15rem;
  font-size: .72rem;
  min-width: 88px;
  transition: background .2s, color .2s;
}
.pill-item:hover { background: rgba(255,60,60,.14); color: #fff; }
.pill-item__icon { font-size: 1rem; }
.pill-item--highlight { background: rgba(224,29,29,.9); color: #fff; }
.pill-item--highlight:hover { background: var(--ufa-red-2); }

.pill-divider { width: 1px; background: rgba(255,255,255,.12); }

.back-to-top {
  position: fixed;
  right: 18px; bottom: 96px;
  z-index: 1035;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,60,60,.35);
  border-radius: 50%;
  background: rgba(20,16,16,.9);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s, background .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--ufa-red); }

.line-float {
  position: fixed;
  right: 18px; bottom: 150px;
  z-index: 1035;
  width: 65px; height: 65px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  animation: line-bounce 2.4s ease-in-out infinite;
}
.line-float img { width: 100%; height: 100%; display: block; }
@keyframes line-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

/* =========================================================
   12. MODAL ต้อนรับ
   ========================================================= */
.ufa-modal .modal-content {
  background: transparent;
  border: none;
}
.ufa-modal__img {
  display: block;
  width: 100%;
  border-radius: var(--ufa-radius);
  border: 2px solid rgba(245,197,66,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
.ufa-modal__note {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .84rem;
  color: #cfc8c8;
}
.ufa-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 1rem;
}
.ufa-modal__actions .ufa-cta { min-width: 150px; padding: .6rem 1.2rem; }

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .ufa-nav__item { padding: .5rem .5rem; font-size: .85rem; }
  .ufa-logo img { width: 170px; }
}

@media (max-width: 991.98px) {
  .hero__slide { width: 82%; }
}

@media (max-width: 767.98px) {
  :root { --ufa-header-h: 62px; }

  .hero__slide { width: 92%; }
  .hero__nav { width: 34px; height: 34px; font-size: .85rem; }
  .hero__nav--prev { left: 6px; }
  .hero__nav--next { right: 6px; }

  .ufa-cta, .uva-btn { min-width: 150px; font-size: .92rem; }

  .brand-card, .brand-card img { width: 128px; }
  .brand-card img { height: 128px; }

  .jackpot-card, .jackpot-card img { width: 190px; }
  .jackpot-card img { height: 190px; }

  .blog-card { flex-direction: column; }
  .blog-card__thumb { flex: none; width: 100%; height: 170px; }

  .footer-wrapper { bottom: 0; }
  .footer-pill {
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .pill-item { flex: 1; min-width: 0; padding: .5rem .3rem; }

  .back-to-top { bottom: 78px; }
  .line-float { width: 54px; height: 54px; bottom: 130px; }

  body { padding-bottom: 62px; }
}

/* =========================================================
   14. CMS ADDITIONS (DRAKE) — ส่วนเสริมตอนแปลงเข้า CMS
   - โลโก้ค่ายเกมใช้คลังกลาง /assets/img/games (โปร่ง/ratio ต่างกัน) → contain
   - การ์ดแจ็คพอตแบบ CSS (raw ใช้รูปสลิปจากเว็บต้นทาง — ไม่ hotlink)
   - ปุ่ม LINE ลอยแบบไอคอน (raw ใช้รูป line.png จากเว็บต้นทาง)
   ========================================================= */
.brand-card { background: linear-gradient(180deg,#181414,#0e0c0c); }
.brand-card img {
  object-fit: contain;
  padding: 16px;
  background: transparent;
}

.jackpot-card--txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  text-align: center;
  padding: 1.1rem .9rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(245,197,66,.16), transparent 60%),
    linear-gradient(180deg,#171212,#0c0a0a);
  height: 268px;
}
.jackpot-card--txt .jp-game {
  font-size: .82rem;
  color: var(--ufa-muted);
  letter-spacing: .02em;
}
.jackpot-card--txt .jp-icon { font-size: 1.7rem; color: var(--ufa-gold); }
.jackpot-card--txt .jp-amount {
  font-size: 1.45rem;
  font-weight: 700;
  background: linear-gradient(90deg,#ffe89a,#f5c542 45%,#ff6a3d 75%,#ff3c3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jackpot-card--txt .jp-user {
  font-size: .78rem;
  color: #8f8888;
}
.jackpot-card--txt .jp-badge {
  align-self: center;
  font-size: .68rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 99px;
  background: rgba(224,29,29,.18);
  border: 1px solid rgba(255,60,60,.4);
  color: var(--ufa-red-2);
}
@media (max-width: 767.98px) {
  .jackpot-card--txt { height: 190px; padding: .8rem .6rem; }
  .jackpot-card--txt .jp-amount { font-size: 1.1rem; }
}

.line-float {
  display: grid;
  place-items: center;
  background: #06C755;
  color: #fff;
  font-size: 2rem;
}
.line-float:hover { color: #fff; }