/* ============================================================
   123bet vip - Core stylesheet (Vietnamese market)
   Prefix: sfec-  |  Palette: #5D5D5D / #273746 + amber accent
   ============================================================ */

:root{
  --sfec-bg:#273746;
  --sfec-bg-2:#1f2c38;
  --sfec-bg-3:#324757;
  --sfec-surface:#5D5D5D;
  --sfec-text:#f3f5f7;
  --sfec-muted:#c4ccd3;
  --sfec-primary:#e8b14b;
  --sfec-primary-2:#f3c668;
  --sfec-accent:#ff7a45;
  --sfec-success:#36c98a;
  --sfec-border:rgba(255,255,255,.08);
  --sfec-radius:14px;
  --sfec-shadow:0 6px 18px rgba(0,0,0,.28);
  --sfec-header-h:60px;
  --sfec-nav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(160deg,var(--sfec-bg) 0%,var(--sfec-bg-2) 100%);
  color:var(--sfec-text);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sfec-primary-2);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.sfec-container{width:100%;max-width:430px;margin:0 auto;padding:0 12px}
.sfec-wrapper{padding-bottom:90px}

/* ---------- Header ---------- */
.sfec-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--sfec-header-h);
  background:rgba(39,55,70,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sfec-border);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.sfec-header-inner{
  max-width:430px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
}
.sfec-logo{display:flex;align-items:center;gap:8px;font-size:1.8rem;font-weight:800;color:var(--sfec-primary)}
.sfec-logo .sfec-logo-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--sfec-primary),var(--sfec-accent));
  display:flex;align-items:center;justify-content:center;color:#273746;font-size:1.4rem
}
.sfec-logo small{display:block;font-size:1.05rem;font-weight:500;color:var(--sfec-muted);margin-top:-2px}
.sfec-header-actions{display:flex;align-items:center;gap:8px}
.sfec-icon-btn{
  width:38px;height:38px;border-radius:10px;
  background:var(--sfec-bg-3);color:var(--sfec-text);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem
}
.sfec-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:20px;font-size:1.25rem;font-weight:700;
  transition:transform .15s ease,filter .15s ease;min-height:36px
}
.sfec-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sfec-btn-primary{background:linear-gradient(135deg,var(--sfec-primary),var(--sfec-primary-2));color:#273746}
.sfec-btn-ghost{background:transparent;border:1px solid var(--sfec-primary);color:var(--sfec-primary-2)}
.sfec-btn-accent{background:linear-gradient(135deg,var(--sfec-accent),#ff9d6c);color:#273746}

/* ---------- Mobile slide menu ---------- */
.sfec-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:9998;opacity:0;visibility:hidden;transition:.25s
}
.sfec-menu-backdrop.sfec-open{opacity:1;visibility:visible}
.sfec-mobile-menu{
  position:fixed;top:0;right:-82%;width:78%;max-width:340px;height:100%;
  background:var(--sfec-bg-2);z-index:9999;
  transition:right .28s ease;padding:18px 16px;overflow-y:auto
}
.sfec-mobile-menu.sfec-open{right:0}
.sfec-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sfec-menu-head h3{color:var(--sfec-primary);font-size:1.5rem}
.sfec-menu-close{width:34px;height:34px;border-radius:50%;background:var(--sfec-bg-3);font-size:1.6rem}
.sfec-menu-section{margin-bottom:14px}
.sfec-menu-section h4{font-size:1.15rem;color:var(--sfec-muted);text-transform:uppercase;letter-spacing:.05em;margin:8px 6px}
.sfec-menu-section a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px 0;
  border-radius:10px;background:var(--sfec-bg-3);color:var(--sfec-text);font-size:1.3rem
}
.sfec-menu-section a:hover{background:var(--sfec-surface)}

/* ---------- Hero / Carousel ---------- */
.sfec-hero{padding:calc(var(--sfec-header-h) + 12px) 0 6px}
.sfec-carousel{position:relative;border-radius:var(--sfec-radius);overflow:hidden;box-shadow:var(--sfec-shadow)}
.sfec-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sfec-slides::-webkit-scrollbar{display:none}
.sfec-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;cursor:pointer}
.sfec-slide img{width:100%;height:170px;object-fit:cover}
.sfec-slide-cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:1.2rem;color:#fff
}
.sfec-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.sfec-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.sfec-dot.sfec-active{background:var(--sfec-primary);width:18px;border-radius:4px}

/* ---------- Section title ---------- */
.sfec-section{margin:18px 0}
.sfec-section-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px
}
.sfec-section-title{
  font-size:1.5rem;font-weight:800;color:var(--sfec-primary);
  display:flex;align-items:center;gap:8px
}
.sfec-section-title i{font-size:1.8rem}
.sfec-more{font-size:1.15rem;color:var(--sfec-primary-2)}

/* ---------- H1 ---------- */
.sfec-h1{
  font-size:1.85rem;font-weight:900;line-height:1.3;margin:14px 0 8px;
  background:linear-gradient(90deg,var(--sfec-primary),var(--sfec-primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* ---------- Game grid ---------- */
.sfec-game-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px
}
.sfec-game-card{
  background:var(--sfec-bg-3);border-radius:12px;overflow:hidden;
  border:1px solid var(--sfec-border);transition:transform .15s,box-shadow .15s;cursor:pointer
}
.sfec-game-card:hover{transform:translateY(-2px);box-shadow:var(--sfec-shadow);border-color:var(--sfec-primary)}
.sfec-game-card img{width:100%;height:84px;object-fit:cover;background:#222}
.sfec-game-name{
  font-size:1.05rem;font-weight:600;text-align:center;padding:6px 4px;color:var(--sfec-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sfec-game-badge{
  position:absolute;top:6px;right:6px;background:var(--sfec-accent);color:#fff;
  font-size:.95rem;font-weight:700;padding:2px 6px;border-radius:6px
}
.sfec-game-card{position:relative}

/* ---------- Promo CTA band ---------- */
.sfec-cta{
  background:linear-gradient(135deg,#273746,#5D5D5D);
  border:1px solid var(--sfec-primary);border-radius:var(--sfec-radius);
  padding:14px;margin:16px 0;text-align:center
}
.sfec-cta h3{color:var(--sfec-primary);font-size:1.5rem;margin-bottom:6px}
.sfec-cta p{color:var(--sfec-muted);font-size:1.2rem;margin-bottom:10px}

/* ---------- Info / content blocks ---------- */
.sfec-block{
  background:var(--sfec-bg-3);border-radius:var(--sfec-radius);padding:14px;margin:12px 0;
  border:1px solid var(--sfec-border)
}
.sfec-block h2{
  font-size:1.5rem;color:var(--sfec-primary);margin-bottom:8px;
  display:flex;align-items:center;gap:8px
}
.sfec-block h3{font-size:1.25rem;color:var(--sfec-primary-2);margin:10px 0 4px}
.sfec-block p{font-size:1.2rem;color:var(--sfec-muted);margin-bottom:8px}
.sfec-block ul{padding-left:18px;margin:6px 0}
.sfec-block li{font-size:1.2rem;color:var(--sfec-muted);margin-bottom:4px;list-style:disc}
.sfec-block a{color:var(--sfec-primary-2);font-weight:600}

/* ---------- Testimonial ---------- */
.sfec-testi-grid{display:grid;grid-template-columns:1fr;gap:8px}
.sfec-testi{
  background:var(--sfec-bg-3);border-radius:12px;padding:12px;border-left:3px solid var(--sfec-primary)
}
.sfec-testi-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sfec-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--sfec-primary),var(--sfec-accent));
  color:#273746;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.2rem
}
.sfec-testi-name{font-size:1.2rem;font-weight:700}
.sfec-stars{color:var(--sfec-primary);font-size:1rem}
.sfec-testi p{font-size:1.15rem;color:var(--sfec-muted)}

/* ---------- Payment ---------- */
.sfec-pay-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.sfec-pay{
  background:var(--sfec-bg-2);border:1px solid var(--sfec-border);border-radius:10px;
  padding:8px 12px;font-size:1.1rem;font-weight:600;color:var(--sfec-muted);display:flex;align-items:center;gap:6px
}

/* ---------- Winner ticker ---------- */
.sfec-winner{
  display:flex;align-items:center;gap:8px;background:var(--sfec-bg-2);
  padding:8px 12px;border-radius:10px;margin:6px 0;font-size:1.1rem
}
.sfec-winner b{color:var(--sfec-success)}

/* ---------- Footer ---------- */
.sfec-footer{
  background:var(--sfec-bg-2);border-top:1px solid var(--sfec-border);
  padding:18px 12px 24px;margin-top:16px
}
.sfec-footer h4{color:var(--sfec-primary);font-size:1.25rem;margin:10px 0 6px}
.sfec-footer p{font-size:1.1rem;color:var(--sfec-muted);margin-bottom:8px}
.sfec-footer-links{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.sfec-footer-links a{
  background:var(--sfec-bg-3);border-radius:8px;padding:5px 10px;
  font-size:1.1rem;color:var(--sfec-text)
}
.sfec-footer-links a:hover{color:var(--sfec-primary)}
.sfec-promo-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sfec-promo-row .sfec-btn{flex:1 1 auto;font-size:1.1rem;padding:6px 8px;min-height:32px}
.sfec-copy{text-align:center;font-size:1rem;color:var(--sfec-muted);border-top:1px solid var(--sfec-border);padding-top:10px;margin-top:10px}

/* ---------- Mobile bottom nav ---------- */
.sfec-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  height:var(--sfec-nav-h);
  background:rgba(31,44,56,.98);
  border-top:1px solid var(--sfec-primary);
  display:flex;justify-content:space-around;align-items:stretch;
  box-shadow:0 -3px 12px rgba(0,0,0,.35)
}
.sfec-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--sfec-muted);font-size:1rem;font-weight:600;
  transition:color .15s,transform .15s;min-width:60px;min-height:60px
}
.sfec-nav-btn i{font-size:2.2rem}
.sfec-nav-btn .material-icons-outlined,.sfec-nav-btn .material-icons{font-size:2.2rem}
.sfec-nav-btn.sfec-active{color:var(--sfec-primary)}
.sfec-nav-btn:active{transform:scale(.9)}
.sfec-nav-btn.sfec-nav-cta{
  position:relative;top:-10px;
  background:linear-gradient(135deg,var(--sfec-primary),var(--sfec-accent));
  color:#273746;border-radius:50%;width:54px;height:54px;flex:0 0 54px;
  box-shadow:0 4px 12px rgba(232,177,75,.5);align-self:center
}
.sfec-nav-btn.sfec-nav-cta i{font-size:2.4rem}

@media (max-width:768px){
  main.sfec-wrapper{padding-bottom:80px}
}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .sfec-bottomnav{display:none}
  .sfec-wrapper{padding-bottom:24px}
  .sfec-container{max-width:960px}
  .sfec-game-grid{grid-template-columns:repeat(6,1fr)}
  .sfec-testi-grid{grid-template-columns:repeat(2,1fr)}
  .sfec-slide img{height:260px}
}

/* ---------- Utility ---------- */
.sfec-text-amber{color:var(--sfec-primary)}
.sfec-center{text-align:center}
.sfec-hide{display:none}
.sfec-fade{opacity:0;transform:translateY(10px);transition:.4s}
.sfec-fade.sfec-show{opacity:1;transform:none}