/* ============================================================
   116Lotto — Bootstrap 5 rebuild
   Custom theme stylesheet
   ============================================================ */
:root {
  --brand-red: #e2231a;
  --brand-red-dark: #b3140d;
  --brand-gold: #ffce00;
  --brand-blue: #0a64c2;
  --brand-blue-dark: #034a9a;
  --ink: #1c2230;
  --muted: #6b7280;
  --soft-bg: #f4f6fb;
  --card-radius: 18px;
}

* { font-family: 'Kanit', system-ui, -apple-system, "Segoe UI", sans-serif; }

body {
  color: var(--ink);
  background: #fff;
  font-weight: 300;
  padding-bottom: 64px; /* room for mobile bottom nav */
}

h1, h2, h3, h4, h5 { font-weight: 600; }
a { text-decoration: none; }
img { max-width: 100%; }

.text-brand { color: var(--brand-red) !important; }
.bg-soft { background: var(--soft-bg); }
.section { padding: 48px 0; }
.section-sm { padding: 32px 0; }

.section-title {
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  text-align: center;
}
.section-title .hl { color: var(--brand-red); }
.section-sub { color: var(--muted); text-align: center; max-width: 760px; margin: 0 auto; font-weight: 300; }

/* ---------- Buttons ---------- */
.btn-brand {
  background: linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
  color: #fff; border: none; border-radius: 999px; font-weight: 500;
  padding: .5rem 1.4rem; box-shadow: 0 6px 14px rgba(226,35,26,.28);
}
.btn-brand:hover { color: #fff; filter: brightness(1.06); }
.btn-blue {
  background: linear-gradient(180deg, #1c87f2, var(--brand-blue-dark));
  color: #fff; border: none; border-radius: 999px; font-weight: 500;
  padding: .5rem 1.4rem; box-shadow: 0 6px 14px rgba(10,100,194,.3);
}
.btn-blue:hover { color: #fff; filter: brightness(1.06); }
.btn-gold {
  background: linear-gradient(180deg, #ffe14d, var(--brand-gold));
  color: #6b4e00; border: none; border-radius: 999px; font-weight: 600;
}

/* ---------- Header ---------- */
.site-header {
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 1030;
}
.site-header .navbar-brand img { height: 40px; }
.site-header .nav-link { color: var(--ink); font-weight: 400; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--brand-red); }
.invite-badge { height: 42px; border-radius: 12px; }

/* ---------- Hero carousel ---------- */
.hero .carousel-item img { width: 100%; height: auto; display: block; }
.hero .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .6; }
.hero .carousel-indicators .active { background: var(--brand-red); opacity: 1; }

/* ---------- Intro ---------- */
.intro h1 { font-size: clamp(1.4rem, 3.6vw, 2.2rem); font-weight: 700; }
.intro p { color: var(--muted); font-weight: 300; }

/* ---------- Menu cards ---------- */
.menu-card {
  background: #fff; border: 1px solid #eef0f5; border-radius: var(--card-radius);
  padding: 18px 14px; text-align: center; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column; align-items: center;
}
.menu-card:hover { transform: translateY(-5px); box-shadow: 0 14px 26px rgba(0,0,0,.1); }
.menu-card .ic { width: 56px; height: 56px; object-fit: contain; margin-bottom: 10px; }
.menu-card .t { font-weight: 600; color: var(--ink); }
.menu-card .s { font-size: .82rem; color: var(--muted); font-weight: 300; }

/* ---------- Promo banners ---------- */
.promo-banner img { border-radius: 14px; width: 100%; box-shadow: 0 8px 18px rgba(0,0,0,.08); }

/* ---------- Mini games ---------- */
.minigame-card img { border-radius: 16px; width: 100%; box-shadow: 0 8px 18px rgba(0,0,0,.1); transition: transform .2s; }
.minigame-card:hover img { transform: scale(1.03); }

/* ---------- Winners / stats ---------- */
.stats-wrap { background: linear-gradient(135deg, #11254d, #0a1730); color: #fff; border-radius: 20px; overflow: hidden; }
.stats-num { color: var(--brand-gold); font-weight: 700; font-size: clamp(1.4rem,4vw,2.2rem); }
.winner-feed { height: 360px; overflow: hidden; position: relative; }
.winner-track { animation: scrollUp 26s linear infinite; }
.winner-feed:hover .winner-track { animation-play-state: paused; }
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.winner-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 10px;
}
.winner-row img { width: 38px; height: 38px; border-radius: 50%; background:#fff; }
.winner-row .id { font-size: .82rem; opacity: .8; }
.winner-row .ty { font-size: .82rem; }
.winner-row .amt { margin-left: auto; color: var(--brand-gold); font-weight: 600; white-space: nowrap; }

/* ---------- Gallery ---------- */
.gallery img { border-radius: 12px; width: 100%; box-shadow: 0 6px 14px rgba(0,0,0,.08); transition: transform .2s; }
.gallery img:hover { transform: translateY(-4px); }

/* ---------- Feature grid ---------- */
.feature-card { text-align: center; padding: 20px 14px; border-radius: var(--card-radius); background: #fff; border:1px solid #eef0f5; height:100%; }
.feature-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; }
.feature-card .t { font-weight: 600; }
.feature-card .s { font-size: .85rem; color: var(--muted); font-weight: 300; }

/* ---------- Prize block ---------- */
.prize-list .prize-item { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eef0f5; border-radius:12px; padding:10px 14px; margin-bottom:10px; }
.prize-list .prize-item img { width: 30px; }
.prize-list .prize-item .lbl { font-weight: 500; }
.prize-list .prize-item .val { margin-left:auto; color: var(--brand-red); font-weight: 700; }

/* ---------- Rate tabs ---------- */
.rate-tabs .nav-link { color: var(--ink); border-radius: 999px; font-weight: 500; }
.rate-tabs .nav-link.active { background: var(--brand-red); color: #fff; }
.rate-table th { background: var(--brand-blue-dark); color: #fff; font-weight: 500; }
.rate-table td .val { color: var(--brand-red); font-weight: 600; }

/* ---------- Lottery types ---------- */
.type-chip { display:block; text-align:center; background:#fff; border:1px solid #eef0f5; border-radius:12px; padding:12px 8px; color:var(--ink); font-weight:500; transition: all .15s; }
.type-chip:hover { background: var(--brand-red); color:#fff; border-color: var(--brand-red); }

/* ---------- Reviews ---------- */
.review-card { background:#fff; border:1px solid #eef0f5; border-radius:var(--card-radius); padding:20px; height:100%; }
.review-card .avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.review-card .stars { color: var(--brand-gold); }
.review-card p { font-weight:300; color:#444; font-size:.92rem; }

/* ---------- Comparison ---------- */
.compare-table { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.compare-table th { background: var(--brand-red); color:#fff; font-weight:500; text-align:center; }
.compare-table td { text-align:center; vertical-align: middle; }
.compare-table td:first-child { text-align:left; font-weight:400; }
.compare-table .yes { width:22px; }
.compare-table .no { width:22px; }
.compare-logo { height:46px; }

/* ---------- Footer ---------- */
.site-footer { background:#0d1426; color:#cbd3e1; padding:40px 0 24px; }
.site-footer h6 { color:#fff; font-weight:600; margin-bottom:14px; }
.site-footer a { color:#cbd3e1; }
.site-footer a:hover { color:#fff; }
.bank-logos img { background:#fff; border-radius:8px; padding:4px; height:42px; margin:4px; }
.app-badges img { height:46px; }
.social-ic { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-size:1.1rem; }
.social-ic.line { background:#06c755; }
.social-ic.fb { background:#1877f2; }
.social-ic.tg { background:#229ed9; }

/* ---------- Mobile bottom nav ---------- */
.bottom-nav {
  position: fixed; left:0; right:0; bottom:0; z-index:1040;
  background:#fff; box-shadow:0 -2px 14px rgba(0,0,0,.12);
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:6px 4px;
}
.bottom-nav a { color:#7a8190; font-size:.68rem; text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.bottom-nav a img { width:22px; height:22px; }
.bottom-nav a.center { margin-top:-26px; }
.bottom-nav a.center .circle {
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(180deg,var(--brand-red),var(--brand-red-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(226,35,26,.4); border:4px solid #fff;
}
.bottom-nav a.center .circle img { width:30px; height:30px; filter: brightness(0) invert(1); }
@media (min-width: 992px){ .bottom-nav { display:none; } body { padding-bottom:0; } }

/* ---------- Floating contact ---------- */
.float-contact {
  position: fixed; right:18px; bottom:78px; z-index:1035;
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(180deg,var(--brand-red),var(--brand-red-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:0 8px 18px rgba(226,35,26,.45);
}
.float-contact:hover { color:#fff; filter:brightness(1.08); }
@media (min-width: 992px){ .float-contact { bottom:24px; } }

/* ---------- Scroll-top ---------- */
.scroll-top { position:fixed; right:18px; bottom:142px; z-index:1035; width:44px; height:44px; border-radius:50%; background:#0d1426; color:#fff; border:none; display:none; align-items:center; justify-content:center; }
.scroll-top.show { display:flex; }
@media (min-width: 992px){ .scroll-top { bottom:92px; } }