@import url('https://fonts.cdnfonts.com/css/montserrat');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Roboto Condensed',sans-serif;
  color:#fff;
  background:#000;
}
body.popup-open{overflow:hidden}

/* ================= SIDEBAR ================= */
.sidebar{
  width:310px;
  height:100vh;
  position:fixed;
  top:0;left:0;
  padding:20px 15px;
  background:rgba(10,10,15,.35);
  backdrop-filter:blur(12px);
  overflow-y:auto;
  z-index:1000;
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{
  background:#FFD700;
  border-radius:10px;
}

/* LOGO */
.sidebar-logo{
  display:flex;
  justify-content:center;
  margin-bottom:25px;
}
.sidebar-logo img{
  height:160px;
  border:3px solid #FFD700;
  border-radius:12px;
}

/* MENU */
.sidebar-menu{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ================= BUTTON CHUNG ================= */
.nav-button{
  width:100%;
  padding:10px 18px;
  border-radius:10px;
  background:#1a1a1f;
  color:#fff;
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  display:flex;
  align-items:center;
  position:relative;
  transition:.25s;
  box-shadow:0 4px 8px rgba(0,0,0,.25);
}
.nav-button i{margin-right:10px;font-size:20px}
.nav-button:hover{
  background:#222228;
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,.35);
}

/* ================= STYLE BIẾN THỂ ================= */
.nav-button.gold{color:#FFD700;border:2px solid #FFD700}
.nav-button.cyan{color:#40E0D0;border:2px solid #FFD700}
.nav-button.red{color:#ff0000;border:2px solid #FFD700}
.nav-button.orange{color:#ff9100;border:2px solid #FFD700}

/* Viền chạy */
.nav-button.run-border::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:10px;
  background:linear-gradient(120deg,#ffd700,#fff8c0,#ffd700);
  background-size:300% 300%;
  animation:borderRun 2s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* ================= MAIN CONTENT ================= */
.main-content,.content{margin-left:310px}

/* ================= POPUP CHUNG ================= */
.popup{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  z-index:9999;
  align-items:center;
  justify-content:center;
  animation:fadeIn .3s ease;
}
.popup-content{
  background:rgba(15,15,15,.95);
  padding:28px;
  border-radius:12px;
  width:1200px;
  max-width:95%;
  max-height:90vh;
  overflow-y:auto;
  color:#FFD700;
  animation:popupZoom .3s ease forwards;
}
.popup-content::-webkit-scrollbar{width:8px}
.popup-content::-webkit-scrollbar-thumb{
  background:#FFD700;
  border-radius:8px;
}
.close-popup{
  position:absolute;
  top:10px;right:15px;
  background:none;
  border:none;
  font-size:26px;
  color:#FFD700;
  cursor:pointer;
}

/* ================= TEXT ================= */
.title-gold{
  text-align:center;
  font-size:28px;
  font-weight:700;
  background:linear-gradient(90deg,#ffd700,#fff3b0,#ffd700);
  background-size:300% 300%;
  -webkit-background-clip:text;
  color:transparent;
  animation:goldShine 3s linear infinite;
}

/* ================= CENTER TEXT ================= */
.center-content{
  position:absolute;
  top:20%;
  left:40%;
  transform:translate(-50%,-50%);
}
.main-title{
  font-size:60px;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:0 0 10px #00ffff,0 0 40px #40E0D0;
  animation:neon 2.5s infinite alternate;
}
.sub-text{
  font-size:22px;
  padding:10px 25px;
  border-radius:8px;
  background:rgba(20,15,10,.85);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  animation:goldFlicker 2s infinite alternate;
}

/* ================= ANIMATION ================= */
@keyframes borderRun{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes popupZoom{
  from{opacity:0;transform:scale(.85)}
  to{opacity:1;transform:scale(1)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes goldShine{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes neon{
  from{text-shadow:0 0 10px #40E0D0}
  to{text-shadow:0 0 40px #00FFFF}
}
@keyframes goldFlicker{
  from{opacity:.85}
  to{opacity:1}
}
/* ÉP TOÀN BỘ CHỮ MENU SANG VÀNG */
.sidebar a,
.sidebar a:link,
.sidebar a:visited {
    color: #FFD700 !important;
    text-decoration: none;
}

/* Icon trong menu cũng vàng */
.sidebar a i {
    color: #FFD700 !important;
}