body {
  font-family: Arial;
  color: #fff;

  background: url("../assets/images/mu-bg.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

.container {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
}

h1 {
  color: #ffd700;
  text-shadow: 0 0 10px #ffcc00;
  margin-bottom: 30px;
}

.box {
  background: rgba(0,0,0,0.75);
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,215,0,0.3);
}

.box h2 {
  color: #ffcc00;
  margin-bottom: 15px;
}

ul {
  list-style: none;
}

li {
  padding: 10px;
  margin: 5px 0;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid gold;
  text-align: left;
}
body {
  font-family: Arial, sans-serif;
  color: #fff;

  /* 🔥 NỀN MU DARK */
  background:
    radial-gradient(circle at top, rgba(255, 200, 0, 0.10), transparent 40%),
    radial-gradient(circle at bottom, rgba(255, 0, 0, 0.08), transparent 40%),
    url("../assets/images/mu-bg.jpg");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/images/fog.png");
  background-size: cover;
  opacity: 0.12;
  pointer-events: none;

  animation: fogMove 60s linear infinite;
}

@keyframes fogMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(-20%, -20%); }
}
body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(255,215,0,0.15),
    rgba(255,100,0,0.08),
    transparent 70%
  );

  animation: glow 6s ease-in-out infinite;
}

@keyframes glow {
  0% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.4; }
  50% { transform: translate(-50%,-50%) scale(1.2); opacity: 0.7; }
  100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.4; }
}
html {
  scroll-behavior: smooth;
}