*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Segoe UI', sans-serif;
}

p{
  margin-bottom: 0 !important;
}

body{
  background:#0b0b0f;
  color:#fff;
}

.flex-1{
  flex: 1;
}
.app{
  max-width:420px;
  margin:auto;
  padding:10px;
}

/* Header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.user{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn-none{
  background: 0;
  border: 0;
  width: 100%;
  cursor: pointer;
}
.user img{
  width:60px;
  height:60px;
  border-radius:50%;
  border: 4px solid #ffffff94;
}
.curson{
  cursor: pointer;
}

.coin-float{
  width:70px;
}

/* Coin box */
.coin-box{
  margin:20px 0;
  padding:25px;
  border-radius:20px;

  text-align:center;
}

.span-num{
  font-size: 30px;
}

.coin-box h1{
  font-size:50px;
  font-weight: 500;
  margin:10px 0;
}

.btn-main{
  margin-top:15px;
  width: 260px !important;
  padding: 13px 14px;
  border:none;
  border-radius:30px;
  background: #8800FF;
  background: linear-gradient(178deg, rgba(136, 0, 255, 1) 0%, rgba(82, 0, 153, 1) 100%);
  color:#fff;
  font-size:20px;
  font-weight: 500;
  cursor:pointer;
}

.btn-main.small{
  width:auto;
  padding:10px 30px;
}

/* Menu */
.menu{
  display:flex;
  justify-content:space-around;
  margin:20px 0;
  text-align: center;
  font-size: 15px;
}

.menu-item{
  opacity:.6;
}

.menu-item.active{
  opacity:1;
}

/* Register */
.register{
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(135deg,#8a2be2,#3b0066);
  margin-top: 100px;
}

.register img{
  width:80px;
}

/* Balance */
.balance{
  margin:20px 0;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(135deg,#5b189e,#1c002f);
}

.money{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}
.money h2{
  font-weight: 600;
}
.up-date{
  font-size: 13px;
}
/* History */
.history-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
}

.history-item{
  padding:15px;
  border-radius:15px;
  background:linear-gradient(135deg,#4b0082,#1a002a);
  margin-bottom:10px;

  justify-content:space-between;
}

.plus{
  color:#6dff9c;
}
.coin-top{
  position:absolute;
  top: -10px;
  right:-6px;         /* ให้ล้นขอบนิด ๆ แบบแอป */
  width:96px;         /* ปรับตาม PNG */
  transform: rotate(8deg);
  z-index:3;
  width: 115px;

  filter:
    drop-shadow(0 12px 25px rgba(0,0,0,.65))
    drop-shadow(0 0 15px rgba(130,80,255,.45));

  animation: floatCoin 4s ease-in-out infinite;
}

@keyframes floatCoin{
  0%   { transform: translateY(0) rotate(8deg); }
  50%  { transform: translateY(-6px) rotate(6deg); }
  100% { transform: translateY(0) rotate(8deg); }
}
.header{
  position:relative;
}
.coin-top::after{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top left,
    rgba(255,255,255,.35),
    transparent 60%);
  pointer-events:none;
}
.hj0221{
  position: absolute;
  width: 100%;
  z-index: -999;
}
.span-li{
  font-size: 20px;
  font-weight: 500;
}
.img-hkimk{
  width: 200px !important;
  margin-top: -100px;
  margin-bottom: -21.5px;
}
.img-kkoli{
  width: 75px;
}
.box-coin-h-01{
  background: #520099;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.box-coin-h-02{
  background: #8400ff;
  background: linear-gradient(0deg, rgba(132, 0, 255, 1) 0%, rgba(98, 27, 161, 1) 0%, rgba(0, 0, 0, 1) 56%);
  padding: 20px;
  border: 2px solid #520099;
  border-top: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.coin-a{
  position: absolute;
  width: 110px;
  z-index: -9;
  margin-top: -55px;
  margin-left: -30px;
}
.coin-b{
  position: absolute;
  width: 120px;
  margin-top: -110px;
}
.btn-buy{
  background: #1D1D1D;
  border: 0;
  border-radius: 100px;
  padding: 10px 40px;
  color: white;
}
.flex {
  display: flex;
}
.centerY{
  align-items: center;
}
.yellow{
  color: yellow;
}
.icon-w1{
  width: 35px;
  margin-top: 5px;
}
.btn-can{
  background: #585858;
  border: 0;
  border-radius: 100px;
  padding: 10px 30px;
  color: white;
  font-size: 12px;
}
.copy{
  background: linear-gradient(0deg, rgba(132, 0, 255, 1) 0%, rgba(98, 27, 161, 1) 0%, rgb(27, 27, 27) 56%);
  border-radius: 100px;
  padding: 7px 40px;
  color: white;
  font-size: 15px;
  border: 1.2px solid #c5c5c5;
}
.box-itemoopp{
  background: #520099;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.uploads025{
  background: #140025;
  border-radius: 100px;
  padding: 10px;
  color: white;
  border: 0;
  width: 100%;
}