/* ===== PG88 clone — Bootstrap 5 custom theme ===== */
:root{
  --pg-navy:#101142;
  --pg-navy-d:#080a25;
  --pg-gold:#ffd55b;
  --pg-gold-d:#f5b21a;
  --pg-green:#61ce70;
  --pg-pink:#e3007f;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Kanit',sans-serif;
  color:#fff;
  background-color:var(--pg-navy);
  background-image:url('../webp/bg-promotion-slide-min.webp');
  background-size:cover;
  background-position:top center;
  background-attachment:fixed;
  overflow-x:hidden;
}
a{ text-decoration:none; }
img{ max-width:100%; height:auto; }
.text-gold{ color:var(--pg-gold)!important; }
.section-pad{ padding:48px 0; }

/* ---- Provider logos bar ---- */
.providers{
  background:rgba(8,10,37,.65);
  padding:8px 0;
  border-bottom:1px solid rgba(255,213,91,.15);
}
.providers img{ height:64px; width:auto; transition:transform .2s; }
.providers img:hover{ transform:translateY(-4px) scale(1.05); }

/* ---- Hero ---- */
.hero img{ width:100%; display:block; }

/* ---- Navbar ---- */
.pg-navbar{
  background:linear-gradient(180deg,#15164f,#0d0e34);
  border-top:2px solid var(--pg-gold);
  border-bottom:2px solid var(--pg-gold);
  position:sticky; top:0; z-index:1030;
}
.pg-navbar .brand img{ height:60px; }
.pg-menu{ list-style:none; display:flex; gap:8px; margin:0; padding:0; flex-wrap:wrap; }
.pg-menu a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--pg-gold); font-weight:300; font-size:1.05rem; line-height:1.1;
  padding:6px 10px; border-radius:10px; transition:.2s;
}
.pg-menu a img{ height:42px; margin-bottom:4px; }
.pg-menu a:hover{ color:#fff; background:rgba(255,213,91,.12); }
.btn-auth img{ height:44px; transition:transform .2s; }
.btn-auth img:hover{ transform:scale(1.05); }

/* ---- Carousel ---- */
.promo-carousel .carousel-item img{ border-radius:16px; }
.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next{ width:6%; }

/* ---- Section heading ---- */
.sec-title{
  font-weight:600; color:var(--pg-gold);
  text-shadow:0 2px 12px rgba(255,213,91,.35);
  margin-bottom:18px;
}

/* ---- Services ---- */
.service-card{ text-align:center; }
.service-card img{ max-height:210px; }
.service-card p{ margin-top:14px; font-weight:300; color:#e7e9ff; }

/* ---- Content blocks ---- */
.content-block p{ color:#cfd2f5; font-weight:300; line-height:1.9; }

/* ---- Jackpot ---- */
.jackpot{
  background:url('../webp/jackpot-background-min.webp') center/cover no-repeat;
  padding:60px 0;
}
.jackpot-frame{
  background:url('../webp/jackpot-frame-min.webp') center/contain no-repeat;
  max-width:1140px; margin:0 auto; min-height:420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.jackpot-amount{
  font-size:clamp(2rem,6vw,5rem); font-weight:700; color:var(--pg-gold);
  text-shadow:0 0 18px rgba(255,213,91,.7),0 4px 6px rgba(0,0,0,.6);
  letter-spacing:2px;
}

/* ---- Game grid ---- */
.game-card{
  display:block; border-radius:12px; overflow:hidden; position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:.25s;
}
.game-card img{ width:100%; aspect-ratio:193/251; object-fit:cover; display:block; }
.game-card::after{
  content:"เล่นเลย"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,37,.72); color:var(--pg-gold); font-weight:500; font-size:1.1rem;
  opacity:0; transition:.25s;
}
.game-card:hover{ transform:translateY(-6px); }
.game-card:hover::after{ opacity:1; }

/* ---- App showcase ---- */
.showcase img{ border-radius:14px; transition:transform .25s; }
.showcase img:hover{ transform:translateY(-6px); }

/* ---- Footer ---- */
.pg-footer{
  background:rgba(5,6,20,.92);
  border-top:2px solid var(--pg-gold);
  padding:40px 0 90px;
  margin-top:30px;
}
.pg-footer h6{ color:var(--pg-gold); font-weight:500; }
.pg-footer a{ color:#cfd2f5; font-weight:300; }
.pg-footer a:hover{ color:var(--pg-gold); }
.footer-social img{ height:35px; margin:0 4px; }
.bank-list{ max-width:385px; }

/* ---- Floating side widgets ---- */
.float-social{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:1040; display:flex; flex-direction:column; gap:6px;
}
.float-social img{ height:46px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition:transform .2s; }
.float-social img:hover{ transform:scale(1.12); }
.sticky-left{ position:fixed; left:8px; bottom:8px; z-index:1040; width:150px; }
.sticky-right{ position:fixed; right:8px; bottom:8px; z-index:1039; width:170px; text-align:center; }
.sticky-right .contact-label{ display:inline-block; background:#111; color:var(--pg-gold);
  border:1px solid var(--pg-gold); border-radius:20px; padding:2px 14px; font-size:.85rem; margin-top:-6px; }

/* ---- Back to top / responsiveness ---- */
@media (max-width:991px){
  .pg-menu a{ font-size:.9rem; padding:4px 6px; }
  .pg-menu a img{ height:34px; }
  .pg-navbar .brand img{ height:46px; }
  .sticky-left{ width:110px; }
  .sticky-right{ width:120px; }
  .float-social img{ height:38px; }
}
@media (max-width:575px){
  .providers img{ height:42px; }
  .sticky-left,.sticky-right{ display:none; }
}

/* ==========================================================================
   PAGE-BUILDER content blocks — เพิ่มพื้นหลังกล่องเนื้อหา (เดิม inline มีแค่สี)
   ========================================================================== */
.v-content{
  background:linear-gradient(180deg, rgba(16,17,66,.55), rgba(8,10,37,.7));
  border:1px solid rgba(255,213,91,.22);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.v-content a{ color:var(--pg-gold); }
/* FAQ (block_type 5) — การ์ด Q/A */
.fags h2{ color:var(--pg-gold); }
.fags .bg-faq{ background:linear-gradient(180deg, rgba(16,17,66,.7), rgba(8,10,37,.8)) !important; transition:transform .18s ease, border-color .2s ease; }
.fags .bg-faq:hover{ transform:translateY(-3px); border-color:rgba(255,213,91,.55); }
.fags .bg-faq h3{ display:flex; align-items:flex-start; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px dashed rgba(255,213,91,.3); color:var(--pg-gold); font-weight:700; }
.fags .bg-faq h3::before{ content:"Q"; flex:0 0 auto; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg,var(--pg-gold),var(--pg-gold-d)); color:var(--pg-navy-d); font-weight:800; }
.fags .bg-faq p{ display:flex; align-items:flex-start; gap:10px; margin:0; color:#dfe2f5; line-height:1.8; }
.fags .bg-faq p::before{ content:"A"; flex:0 0 auto; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--pg-pink); color:#fff; font-weight:800; }
/* block ผลบอลสด / ผลหวย (ถ้ามีในหน้า) */
.livescore-block, .lotto-block, .football-block, .lottopage-block{
  background:linear-gradient(180deg, rgba(16,17,66,.55), rgba(8,10,37,.7));
  border:1px solid rgba(255,213,91,.22); border-radius:14px; padding:18px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}

/* ==========================================================================
   FOOTER MENU = badges
   ========================================================================== */
.footer-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-badge{
  display:inline-block; padding:6px 14px; border-radius:999px;
  font-size:.85rem; color:#e9ecff;
  background:rgba(8,10,37,.6); border:1px solid rgba(255,213,91,.35);
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}
.footer-badge:hover{ color:var(--pg-navy-d); border-color:var(--pg-gold); background:linear-gradient(180deg,#ffe48a,var(--pg-gold)); transform:translateY(-2px); }