*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial;
  background:#f3f4f6;
  color:#333;
}

/* TOP */
.topbar{
  height:50px;
  background:#0a2a66;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  font-weight:bold;
}

/* LAYOUT */
.mobile-layout{
  display:flex;
  height:100%;
  flex:1;
  overflow:hidden;
  
}
/* MENU LEFT */
.mobile-menu{
  width:22%;
  background:#ffffff;
  padding:6px;

  overflow-y:auto;   /* SCROLL RIÊNG */
}

/* ITEM */
.mobile-menu div{
  margin-bottom:6px;
  padding:35px 4px;
  border-radius:6px;

  background:#eaf6ff;   /* xanh bên trong */

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  height:50px;
}

/* TEXT */
.mobile-menu div span{
  color:#555;
  font-weight:600;
  font-size:10px;
  text-align:center;
  line-height:1.2;
}

/* ICON */
.mobile-menu div img{
  width:20px;
  height:20px;
  margin-bottom:4px;
}

/* ACTIVE */
.mobile-menu .active{
  background:#eaf6ff;             /* xanh nhạt */
  border:2px solid #00c3ff;       /* viền xanh đậm hơn */
}

/* chữ active */
.mobile-menu .active span{
  color:#00aaff;
}



/* GRID */
.tab{
  display:none;
}

.tab.active{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* CARD */
.game-box{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
  transition:0.2s;
}

.game-box:hover{
  transform:translateY(-3px);
}

/* IMAGE */
.game-box img{
  width:100%;
  height:110px;
  object-fit:cover;
}

/* TITLE */
.game-box p{
  padding:8px;
  font-size:13px;
  font-weight:bold;
  color:#333;
}

/* BANNER (thêm vào HTML nếu muốn) */
.banner{
  width:100%;
  height:140px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
}

.banner img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* BOTTOM NAV */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:50px;
  background:#fff;

  display:flex;
  justify-content:space-around;
  align-items:flex-end;   /* 👈 QUAN TRỌNG */

  border-top:1px solid #ddd;
}

/* ITEM */
.nav-item{
  display:flex;
  flex-direction:column;   /* xếp icon + chữ dọc */
  align-items:center;
  justify-content:flex-end; /* 👈 dồn xuống đáy */

  height:100%; /* full chiều cao nav */
  font-size:11px;
  color:#555;
}
.nav-item img{
  width:60px;
  height:40px;

}
.nav-item span{
  color:#222;
 
}
.nav-item.support img{
  width:20px;
  height:20px;

  object-fit:cover;
  object-position:top;   /* LẤY PHẦN TRÊN */
}

/* giao dịch */
.nav-item.transaction img{
  width:20px;
  height:20px;

  object-fit:cover;
  object-position:top;   /* LẤY PHẦN TRÊN */
}

/* user */
.nav-item.user img{
   width:20px;
  height:20px;

  object-fit:cover;
  object-position:top;   /* LẤY PHẦN TRÊN */
}

.nav-item.center img{
   width:45px;
  height:45px;

  object-fit:cover;
  object-position:top;   /* LẤY PHẦN TRÊN */
}
.nav-item.support span{
  color:#222;
}


.nav-item.transaction span{
  color:#222;
}

.nav-item.user span{
  color:#222;
}



/* CENTER BUTTON */
.nav-item.center span{
  display:block;
  margin-top:3px;
  font-size:11px;
   color:#222;
  transform:translateY(6px); /* 👈 kéo lên */
}
.nav-item.center img{
  width:45px;
  height:45px;

  object-fit:cover;
  object-position:top;

  transform:translateY(8px); /* 👈 nhô icon lên */
}




/* CENTER BUTTON */
.nav-item.center{
  position:relative;
  top:-15px;   /* ĐẨY LÊN */

  display:flex;
  flex-direction:column;   /* 👈 THÊM DÒNG NÀY */
  justify-content:center;
  align-items:center;
}
/* APP BANNER (trên cùng) */
.app-banner{
  background:#fff;
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eee;
}

.app-left{
  display:flex;
  align-items:center;
  gap:20px;
}

/* NÚT X */
.close-btn{
  font-size:16px;
  color:#999;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-left img{
  width:35px;
  height:35px;
  border-radius:10px;
  padding:5px;

  /* 👇 nền trắng mờ + ám đen */
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.5),
    rgba(200,200,200,0.4),
    rgba(0,0,0,0.2)
  );

  

  box-shadow:
    0 4px 10px rgba(0,0,0,0.25),
    inset 0 1px 2px rgba(255,255,255,0.3);
}
.app-left b{
  font-size:13px;
  color:#333;
}

.app-left p{
  font-size:11px;
  color:#333;       /* đậm hơn */
  font-weight:500;  /* tăng nhẹ độ đậm */
}

/* NÚT TẢI */
.download-btn{
  background:#4da6ff;
  color:#fff;
  padding:6px 12px;
  
  font-size:15px;
  text-decoration:none;
}

/* BANNER LỚN */
.main-banner{
  width:100%;
  height:140px;
  overflow:hidden;
}

.main-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* THANH AUTH */
.auth-bar{
  background:#fff;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eee;
}

/* LEFT */
.auth-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.auth-left img{
 
  width:auto;
}

.auth-left span{
  font-weight:bold;
  font-size:14px;
  color:#333;
}

/* RIGHT BUTTON */
.auth-right{
  display:flex;
  gap:10px; /* khoảng cách 2 nút */
}

/* khung nút */
.btn{
  position:relative;
  display:inline-block;

  height:26px;          /* chiều cao chung */
  border-radius:20px;   /* 👈 bo tròn */
  overflow:hidden;      /* 👈 giữ SVG theo bo */
}

/* SVG nền */
.btn-bg{
  position:absolute;

  top:0;
  left:-35px;

  width:100%;
  height:100%;

  object-fit:contain; /* hoặc fill */
}

/* chữ */
.btn-label{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  color:#fff;         /* 👈 chữ màu đen */
  font-size:14px;     /* 👈 chỉnh size chữ */
  font-weight:600;
  white-space:nowrap;
}
.btn.login{
  width:115px;   /* 👈 chỉnh riêng */
}
/* SVG */
.btn.login .btn-bg{
  position:absolute;
  top:50%;
  left:50%;

  width:110%;   /* 👈 zoom riêng */
  height:110%;

  transform:translate(-50%, -50%);
  object-fit:fill;
}

/* chữ */
.btn.login .btn-label{
  position:absolute;
  top:50%;
  left:60%;
  transform:translate(-50%, -50%);

  color:#fff;
  font-size:15px;  /* 👈 chỉnh riêng */
  font-weight:600;
}


/* =========================
   🟡 ĐĂNG KÝ
========================= */

/* khung */
.btn.register{
  width:130px;   /* 👈 chỉnh riêng */
  height:26px;
}

/* SVG */
.btn.register .btn-bg{
  position:absolute;
  top:50%;
  left:15%;

  width:100%;   /* 👈 riêng luôn */
  height:100%;

  transform:translate(-50%, -50%) scale(0.8); /* 👈 nhỏ lại */
}
.btn.login .btn-bg{
  position:absolute;
  top:50%;
  left:15%;

  width:100%;   /* 👈 riêng luôn */
  height:100%;

  transform:translate(-50%, -50%) scale(0.8); /* 👈 nhỏ lại */
}

/* chữ */
.btn.register .btn-label{
  position:absolute;
  top:50%;
  left:60%;
  transform:translate(-50%, -50%);

  color:#fff;
  font-size:14px;
  font-weight:500;
}
/* Đăng ký */
.btn.register{
  width:90px;   /* 👈 chỉnh riêng */
}
/* ĐĂNG KÝ (CAM) */
.register{
  background:#ffa84d;
  color:#fff;
}

/* ĐĂNG NHẬP (XANH) */
.login{
  background:#399fda;
  color:#fff;
}
.icon.arrow{
  position:relative;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  color:#1e90ff;
  font-size:16px;
  font-weight:bold;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* ĐUÔI MŨI TÊN LÒI RA BÊN TRÁI */
.icon.arrow::before{
  content:"";
  position:absolute;
  left:-0px;             /* nằm bên trái */
  width:10px;
  height:2px;
  background:#1e90ff;    /* màu xanh */
  border-radius:2px;
}
/* SLIDER */
.slider{
  position:relative;
  overflow:hidden;
  width:100%;
  height:140px;
}

/* SLIDES */
.slides{
  display:flex;
  transition:0.5s;
}

.slides img{
  width:100%;
  flex-shrink:0;
  height:140px;
  object-fit:cover;
}

/* DOTS */
.dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
}

/* DOT */
.dots span{
  width:6px;
  height:6px;
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  cursor:pointer;
}

/* DOT ACTIVE */
.dots .active{
  background:#fff;
}
.mobile-content{
  padding:6px 4px;
  width:100%;
  height:100%;   /* 🔥 QUAN TRỌNG */
  overflow-y:auto;
  background:#fff;
}
.tab{
  display:none;
}

.tab.active{
  display:grid;
  grid-template-columns:1fr 1fr;

  column-gap:5px;   /* 👈 giảm NGANG */
  row-gap:5px;      /* 👈 giữ DỌC */
}
/* CARD LỚN */

.game-card img{
  width:100%;
  height:100%;
  
  object-fit:contain;  /* KHÔNG CẮT */
}


/* TEXT */
.game-card .title{
  position:absolute;
  top:8px;
  left:10px;
  background:rgba(255,255,255,0.8);
  padding:3px 6px;
  border-radius:6px;
  font-size:12px;
  font-weight:bold;
}

/* ẨN SCROLL BAR */
.mobile-menu::-webkit-scrollbar,
.mobile-content::-webkit-scrollbar{
  display:none;
}

/* FIREFOX */
.mobile-menu,
.mobile-content{
  scrollbar-width:none;
}

/* IE, EDGE CŨ */
.mobile-menu,
.mobile-content{
  -ms-overflow-style:none;
}
/* ICON HOT NHẢY */
.hot-item img{
  animation:hotJump 0.8s infinite ease-in-out;
  transform-origin:center;
}

@keyframes hotJump{
  0%   { transform:translateY(0) scale(1.2); }
  50%  { transform:translateY(-6px) scale(1.4); }
  100% { transform:translateY(0) scale(1.2); }
}
.app-wrapper{
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.app{
  width:412px;
  height:915px;
  background:#fff;

  transform-origin: top left;
}

.game-card img{
  width:100%;
  height:100%;
  object-fit:cover;   /* 🔥 FULL KHUNG */
  display:block;
}
.game-card:active{
  transform:scale(0.96);
}
.game-card{
  width:100%;
  height:200px;          /* 👈 chỉnh ở đây */
  border-radius:15px;
  overflow:hidden;
  background:#000;
}


.game-card.full-img img{
  width:100%;
  height:100%;
  object-fit:cover;  /* 🔥 full khung */
}
#live{
  max-height:610px;   /* 👈 chiều cao vùng cuộn */
  overflow-y:auto;    /* 👈 bật cuộn dọc */
}
.live-card{
  height:120px;          /* 👈 thấp lại (quan trọng) */
  border-radius:12px;
  overflow:hidden;
}
.live-card img{
  width:100%;
  height:100%;
  object-fit:cover;   /* full + không méo */
}
#lottery.active{
  display:grid;
  grid-template-columns:1fr; /* 👈 1 cột */
  gap:8px;
}
#sports.active{
  display:grid;
  grid-template-columns:1fr 1fr; /* mặc định 2 cột */
  gap:8px;
}

/* 👇 ảnh đầu tiên chiếm full */
#sports.active .game-card:first-child{
  grid-column:1 / -1;   /* full ngang */
  height:120px;         /* 👈 chỉnh cao tùy ý */
}

/* 👇 các ảnh còn lại */
#sports.active .game-card{
  height:115px;         /* 👈 chỉnh size chung */
}
#games.active{
  display:grid;
  grid-template-columns:1fr 1fr; /* 👈 2 cột */
  gap:8px;
}

/* 👇 chỉnh kích thước card */
#games.active .game-card{
  height:115px;   /* 👈 bạn chỉnh số này */
}
#pvp.active{
  display:grid;
  grid-template-columns:1fr; /* 👈 1 cột */
  gap:8px;
}
#fish.active{
  display:grid;
  grid-template-columns:1fr 1fr; /* mặc định 2 cột */
  gap:8px;
}

/* 👇 ảnh đầu tiên chiếm full */
#fish.active .game-card:first-child{
  grid-column:1 / -1;   /* full ngang */
  height:160px;         /* 👈 chỉnh cao tùy ý */
}

/* 👇 các ảnh còn lại */
#fish.active .game-card{
  height:140px;         /* 👈 chỉnh size chung */
}
#cock.active{
  display:flex;
  flex-direction:column; /* 👈 1 cột */
  gap:8px;
}

/* 👇 chỉnh kích thước */
#cock.active .game-card{
  width:100%;
  height:300px; /* 👈 chỉnh ở đây */
}
.modal {
  position: fixed;
  top: 45%;
  left: 0;
  width: 100vw;
  height: 0vh;

  display: none;
  justify-content: center;
  align-items: center;

  /* 👇 nền tối nhẹ */
  background: rgba(0,0,0,0.3);

  backdrop-filter: blur(3px); /* 👈 làm mờ nền phía sau */
  z-index: 999999;
z-index: 9999999;
}
.modal-content {
  background: #fff;
  
  width: 350px;
   position: relative;
  padding-top: 60px; /* 👈 chừa chỗ cho tiêu đề */
  border-radius: 20px;
    transform: translateY(-50px); /* 👈 chỉnh số này */
  z-index: 1000000;
}

.modal-content input {
  width: 100%;
  margin: 8px 0;
  
  padding: 10px;
}
.modal-content h3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;

background: #eee; /* 👈 đen nhẹ hơn (0.3 - 0.5 là đẹp) */
  color: #000; /* 👈 chữ trắng */

  padding: 12px 0;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-radius: 20px 20px 0 0; /* 👈 bo tròn khớp với modal */
}
.btn-login {
  width: 100%;
  padding: 18px;
  background: #aaa;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.close {
  position: absolute;
  top: 10px;     /* 👈 đừng để âm, dễ lệch mobile */
  right: 10px;
width: 20px !important;
  height: 20px !important;
  z-index: 9999999;
  cursor: pointer;
}

.close-icon {
  width: 20px !important;
  height: 20px !important;

}
.input-group {
  position: relative;

  display: flex;
  align-items: center;

  padding: 12px 0;
  margin: 10px 0;
}

/* 👇 Gạch ngang custom */
.input-group::after {
  content: "";
  position: absolute;
  bottom: 0;

  left: 20px;   /* 👈 cách lề trái */
  right: 20px;  /* 👈 cách lề phải */

  height: 1px;
  background: rgba(0,0,0,0.2);
}

/* 👇 QUAN TRỌNG */
.input-group input {
  flex: 1;              /* 🔥 giúp input giãn full */
  border: none;
  outline: none;
  background: transparent;

  font-size: 18px;
  min-width: 0;         /* 🔥 tránh bị co lỗi flex */
}

.input-icon {
  width: 100px;
  height: 25px;
  margin-right: -20px;
  opacity: 0.6;
}



/* 👁 icon mắt */
.toggle-password {
  width: 22px;
  height: 22px;

  margin-left: 8px;   /* 👈 cách input */
  margin-right: 8px;  /* 👈 đẩy vào khỏi mép phải */

  cursor: pointer;
  opacity: 0.6;
}

.toggle-password:active {
  transform: scale(0.9); /* hiệu ứng bấm */
}
.form-icon {
  width: 100px;
  height: 25px;
  margin-right: -20px;

  opacity: 0.8;
  filter: brightness(0) invert(0.4);
}
.forgot-password {
  text-align: right;
  margin-top: 5px;
}

.forgot-password a {
  font-size: 16px;
  color: #007aff;
  text-decoration: none;

  transition: 0.2s;
}

.forgot-password a:hover {
  color: #007aff;
}