:root{
  --gold:#d4af37;
}

html,body{height:100%}
body{margin:0; color:#fff; font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; overflow-x:hidden; background:#000}
body, body *{font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;}
/* override nền + chữ của skin_css.css (body đang set bg_header.jpg + Tahoma) */
body{background:#000 !important; font:14px/20px "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;}

/* typography gần giống taikhoan */
.Acc .left .c_2,
.Acc .right .c_2,
#ThongTinTongQuan .c_2,
.Title_c_2{font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important; font-weight:800 !important; letter-spacing:.3px;}
.Acc .left .c_2,
.Acc .right .c_2,
#ThongTinTongQuan .c_2,
.Title_c_2{background:linear-gradient(180deg,#fff,var(--gold) 40%,#8a6d1d 80%); -webkit-background-clip:text; background-clip:text; color:transparent !important; text-shadow:0 2px 14px rgba(212,175,55,.25);}
/* tránh bị đè chữ bởi lớp pháo hoa/overlay */
.Acc .left .c_2,
.Acc .right .c_2,
#ThongTinTongQuan .c_2,
.Title_c_2,
#InfoAccount .Title_c_2{
  position: relative;
  z-index: 3;
  line-height: 1.25;
  padding: 2px 0;
}

/* nếu có lớp hiệu ứng nằm trên cùng thì cho nó nằm dưới chữ */
.fireworks,
#fireworks,
.firework,
.petal{
  z-index: 1;
  pointer-events: none;
}
#background-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:brightness(.85) saturate(1.1);
}

.backdrop{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(212, 175, 55, .12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.5), rgb(0 0 0 / 13%) 60%, rgb(28 28 28 / 15%));
  pointer-events:none;
}

.fog{
  position:fixed;
  inset:-10% -10% auto -10%;
  height:60%;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200"><defs><radialGradient id="g" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="white" stop-opacity=".15"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="100" fill="url(%23g)"/><circle cx="400" cy="80" r="120" fill="url(%23g)"/><circle cx="700" cy="120" r="100" fill="url(%23g)"/></svg>') repeat-x;
  background-size:1200px 300px;
  animation:fogMove 70s linear infinite;
  opacity:.6;
  filter:blur(8px);
  z-index:-1;
}

@keyframes fogMove{
  from{transform:translateX(0)}
  to{transform:translateX(-1200px)}
}

.petal::before,
.petal::after{
  content:"";
  position:fixed;
  top:-10vh;
  width:12px;
  height:18px;
  border-radius:12px 12px 12px 12px/14px 14px 4px 4px;
  background:rgba(255,192,203,.75);
  box-shadow:0 0 10px rgba(255,182,193,.5);
  animation:fall 12s linear infinite;
  transform:rotate(20deg);
  z-index:0;
}

.petal::after{ left:75%; animation-delay:2s; opacity:.7; }
.petal::before{ left:25%; animation-delay:6s; opacity:.9; }

@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(10deg) }
  100%{ transform:translateY(120vh) rotate(360deg) }
}