/* 🎀 Theme 1: Pastel */
:root {
  --main-bg: #f8fbf9;          /* 🌿 Nền chính: xanh mint nhạt – làm nền cho toàn trang */
  --sidebar-bg: #e3f6f5;       /* 📦 Sidebar: xanh pastel nhẹ – vùng menu bên trái */
  --navbar-bg: #fff0f6;        /* 📌 Navbar: hồng pastel nhạt – thanh đầu trang */
  --primary: #ff9aa2;          /* 🎨 Màu chủ đạo: hồng đào nhẹ – dùng cho nút, tiêu đề nổi bật */
  --secondary: #a0e7e5;        /* 🌈 Màu phụ: xanh pastel – dùng kết hợp với primary (nút chuyển, hover...) */
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);  /* 🌫️ Đổ bóng nhẹ – tạo chiều sâu cho card, box... */
  --border-radius: 16px;       /* 🟦 Bo góc mềm mại cho khối giao diện (nút, khung, card...) */
  --text: #2e2e2e;             /* 📝 Màu chữ chính: xám đậm dịu – dùng cho nội dung chính */
  --text-light: #7d8b8c;       /* 🧾 Màu chữ phụ: xanh ghi – dùng cho mô tả, chú thích */
  --accent: #fbc4ab;           /* ✨ Màu nhấn: hồng cam pastel – dùng điểm nhấn phụ (label, badge...) */
  --avatar-bg: #ffffff;        /* 👤 Nền ảnh đại diện – nền trắng trung lập */
  --transition: all .25s cubic-bezier(.42,0,.58,1); /* 🔁 Hiệu ứng mượt cho animation/hover */
}

/* 🌙 Chế độ tối cho Theme 1 */
body.dark {
  --main-bg: #121218;          /* 🌚 Nền chính tối – giảm độ sáng khi bật dark mode */
  --sidebar-bg: #1e1e26;       /* 🔲 Sidebar tối */
  --navbar-bg: #1a1a22;        /* 🔳 Navbar tối */
  --primary: #ffb3c1;          /* 🎨 Màu chính: hồng sáng hơn để nổi bật trong nền tối */
  --secondary: #90e0ef;        /* 💧 Xanh pastel sáng – phù hợp dark mode */
  --text: #e5e5e5;             /* 📄 Màu chữ chính: gần trắng để dễ đọc */
  --text-light: #a1a1a1;       /* 📑 Màu chữ phụ: xám sáng hơn để dịu mắt */
  --accent: #ffdab9;           /* 💡 Màu nhấn pastel sáng – tạo điểm nhấn nhẹ trong tối */
  --avatar-bg: #2e2e3a;        /* 👤 Nền avatar tối – hòa với nền tối chung */
}




/* 🌿 Theme 2: Nature */
[data-theme="theme2"] {
  --main-bg: #f1fbe7;
  --sidebar-bg: #d0f1c3;
  --navbar-bg: #e6f4ea;
  --primary: #9bc53d;
  --secondary: #5bc0be;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --border-radius: 16px;
  --text: #2f3e2e;
  --text-light: #758674;
  --accent: #f4a261;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme2"] {
  --main-bg: #1c251b;
  --sidebar-bg: #2d3d2d;
  --navbar-bg: #233122;
  --primary: #a3d977;
  --secondary: #4ca69d;
  --text: #e3f3d9;
  --text-light: #9bb09d;
  --accent: #dd8f57;
  --avatar-bg: #2f3f2e;
}

/* 🌊 Theme 3: Ocean */
[data-theme="theme3"] {
  --main-bg: #e0f7fa;
  --sidebar-bg: #b2ebf2;
  --navbar-bg: #80deea;
  --primary: #00bcd4;
  --secondary: #0288d1;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --border-radius: 16px;
  --text: #003344;
  --text-light: #4f6d7a;
  --accent: #4dd0e1;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme3"] {
  --main-bg: #102027;
  --sidebar-bg: #1c313a;
  --navbar-bg: #263238;
  --primary: #4dd0e1;
  --secondary: #26c6da;
  --text: #e0f7fa;
  --text-light: #b2ebf2;
  --accent: #80deea;
  --avatar-bg: #1a2b33;
}

/* 🌙 Theme 4: Dark Luxe */
[data-theme="theme4"] {
  --main-bg: #1a1a2e;
  --sidebar-bg: #16213e;
  --navbar-bg: #0f3460;
  --primary: #e94560;
  --secondary: #53354a;
  --soft-shadow: 0 4px 24px rgba(255, 255, 255, 0.04);
  --border-radius: 16px;
  --text: #eeeeee;
  --text-light: #aaa;
  --accent: #903749;
  --avatar-bg: #1a1a2e;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme4"] {
  --main-bg: #101020;
  --sidebar-bg: #1a1a30;
  --navbar-bg: #14142f;
  --primary: #ff6f91;
  --secondary: #c74b50;
  --text: #ffffff;
  --text-light: #c3c3c3;
  --accent: #ff99ac;
  --avatar-bg: #1f1f38;
}

/* ☀️ Theme 5: Sunrise */
[data-theme="theme5"] {
  --main-bg: #fff6ec;
  --sidebar-bg: #ffedd8;
  --navbar-bg: #ffd8be;
  --primary: #faae7b;
  --secondary: #ffc3a0;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --border-radius: 16px;
  --text: #4b3832;
  --text-light: #a17c6b;
  --accent: #ffb5a7;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme5"] {
  --main-bg: #2e2118;
  --sidebar-bg: #3a2b23;
  --navbar-bg: #443026;
  --primary: #fdb87d;
  --secondary: #ffac99;
  --text: #fef7f1;
  --text-light: #c4a38f;
  --accent: #ffd0c3;
  --avatar-bg: #3a2b23;
}
[data-theme="theme6"] {
  --main-bg: #fff7fb;
  --sidebar-bg: #ffe6f7;
  --navbar-bg: #ffe3ec;
  --primary: #ff9ae5;
  --secondary: #cdb4db;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  --border-radius: 16px;
  --text: #2c003e;
  --text-light: #875b93;
  --accent: #ffc2e2;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme6"] {
  --main-bg: #2a1e2f;
  --sidebar-bg: #3d2a4d;
  --navbar-bg: #452b44;
  --primary: #ffb3f0;
  --secondary: #b19cd9;
  --text: #f8eaff;
  --text-light: #c8a9d8;
  --accent: #ffccf9;
  --avatar-bg: #392b3d;
}
[data-theme="theme7"] {
  --main-bg: #f0faff;
  --sidebar-bg: #d0f0ff;
  --navbar-bg: #c0e7ff;
  --primary: #00ffff;
  --secondary: #00d1ff;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --border-radius: 16px;
  --text: #003346;
  --text-light: #668c99;
  --accent: #00ffe5;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme7"] {
  --main-bg: #0d1a26;
  --sidebar-bg: #122836;
  --navbar-bg: #193b50;
  --primary: #00ffff;
  --secondary: #26c6da;
  --text: #c7faff;
  --text-light: #86b8c7;
  --accent: #40e0d0;
  --avatar-bg: #1a2a38;
}
[data-theme="theme8"] {
  --main-bg: #fff0e1;
  --sidebar-bg: #ffdcc5;
  --navbar-bg: #ffcab0;
  --primary: #ff9f1c;
  --secondary: #ff7b00;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --border-radius: 14px;
  --text: #3e1f0d;
  --text-light: #a86e4d;
  --accent: #ffe066;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme8"] {
  --main-bg: #2b1a11;
  --sidebar-bg: #402a1a;
  --navbar-bg: #593826;
  --primary: #ffa94d;
  --secondary: #ff922b;
  --text: #fff3e0;
  --text-light: #e6b88e;
  --accent: #ffd43b;
  --avatar-bg: #392716;
}
[data-theme="theme9"] {
  --main-bg: #f9f9f9;
  --sidebar-bg: #ededed;
  --navbar-bg: #dcdcdc;
  --primary: #bdbdbd;
  --secondary: #9e9e9e;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  --border-radius: 12px;
  --text: #2c2c2c;
  --text-light: #747474;
  --accent: #cfcfcf;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme9"] {
  --main-bg: #1c1c1c;
  --sidebar-bg: #2a2a2a;
  --navbar-bg: #333333;
  --primary: #757575;
  --secondary: #a6a6a6;
  --text: #eeeeee;
  --text-light: #aaaaaa;
  --accent: #999999;
  --avatar-bg: #2a2a2a;
}
[data-theme="theme10"] {
  --main-bg: #fff8f0;
  --sidebar-bg: #ffe0f7;
  --navbar-bg: #e0fbfc;
  --primary: #ff595e;
  --secondary: #8ac926;
  --soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --border-radius: 16px;
  --text: #1a1a1a;
  --text-light: #777;
  --accent: #ffca3a;
  --avatar-bg: #ffffff;
  --transition: all .25s cubic-bezier(.42,0,.58,1);
}
body.dark[data-theme="theme10"] {
  --main-bg: #1f1d1d;
  --sidebar-bg: #2b222b;
  --navbar-bg: #2a2d2e;
  --primary: #ff7b82;
  --secondary: #b7ef3c;
  --text: #fefefe;
  --text-light: #ccc;
  --accent: #ffe066;
  --avatar-bg: #2b2b2b;
}



body {
  margin: 0;
  font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
  background: var(--main-bg);
  color: var(--text);
  min-height: 100vh;
  transition: var(--transition);
}

.container {
  display: flex;
  min-height: 100vh;
}

/* ==== Sidebar hiện đại, phân biệt rõ li và a, giữ layout cũ ==== */

.sidebar {
  width: 300px;
  background: var(--sidebar-bg);
  color: var(--text);
  padding: 20px 0 0 0;
  transition: var(--transition);
  box-shadow: var(--soft-shadow);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 101;
  overflow: auto;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 14px;
  opacity: 0.95;
  transition: var(--transition);
  /* Thêm hiệu ứng chuyển động cho li */
  position: relative;
}

.sidebar li.active::before,
.sidebar li:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  opacity: 0.7;
  transition: var(--transition);
}

.sidebar li.active,
.sidebar li:hover {
  background: rgba(255,255,255,0.16); /* nền nhạt khi hover trọn dòng */
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.sidebar a {
  color: var(--text);
  text-decoration: none;
  padding: 11px 28px 11px 38px;
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
  font-size: 20px;
  font-weight: 500;
  background: transparent;
  box-shadow: none;
  letter-spacing: .5px;
  position: relative;
  z-index: 1;
  transition: var(--transition), box-shadow .35s cubic-bezier(.42,0,.58,1);
}

.sidebar li.active > a,
.sidebar li:hover > a,
.sidebar a:focus-visible {
  background: linear-gradient(90deg, var(--primary) 65%, var(--secondary) 100%);
  color: #232946;
  box-shadow: 0 2px 18px 0 #a7e9af33;
  transform: translateX(6px) scale(1.06);
  text-shadow: 0 2px 8px #a7e9af44;
}

.sidebar a .icon {
  margin-right: 18px;
  font-size: 22px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 2px 8px #ff9aa233;
  transition: var(--transition);
}

.sidebar li.active > a .icon,
.sidebar li:hover > a .icon {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 2px 16px #ff9aa244;
  border: 2px solid var(--secondary);
  transform: scale(1.06) rotate(-3deg);
}

@media (max-width: 900px) {
  .sidebar {
    width: 220px;
    min-width: 155px;
    font-size: 17px;
  }
  .sidebar a {
    font-size: 17px;
    padding: 10px 18px 10px 22px;
  }
}

.sidebar .close-btn {
  display: none;
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 22px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  z-index: 20;
  box-shadow: none;
  transition: var(--transition);
}

/* User info block at bottom */
.sidebar .user-info {
  position: absolute;
  bottom: 38px;
  left: 24px;
  right: 24px;
  background: rgba(255,255,255,0.23);
  border-radius: 18px;
  padding: 13px 20px;
  box-shadow: 0 2px 18px #ff9aa211;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 3;
  border: 1px solid #fff6;
}

.sidebar .user-info .balance {
  color: #28c76f;
  font-size: 15px;
  font-weight: 600;
}

.sidebar .user-info .avatar {
  margin-bottom: 7px;
}

/* Submenu style siêu đẹp */
.has-submenu > a {
  cursor: pointer;
  position: relative;
  font-weight: 600;
  background: linear-gradient(90deg, var(--primary) 10%, var(--secondary) 80%);
  color: #232946;
  box-shadow: 0 2px 20px #a0e7e533;
  padding-right: 38px;
}

.has-submenu > a::after {
  content: '▼';
  font-size: 12px;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  transition: .2s;
}

.submenu {
  list-style: none;
  padding-left: 28px;
  margin: 10px 0 0 0;
  display: none;
  animation: fadeIn .33s both;
}

.has-submenu.open .submenu {
  display: block;
}

.submenu li a {
  font-size: 17px;
  padding: 7px 18px;
  display: block;
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,0.16);
  transition: var(--transition);
  margin-bottom: 5px;
}

.submenu li a:hover {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #232946;
  box-shadow: 0 2px 9px #a0e7e544;
}

@media (max-width: 900px) {
  .sidebar {
    margin: 8px 0 0 0;
    top: 0;
    height: 96vh;
    border-radius: 20px;
    left: 0;
  }
}
@media (max-width: 768px) {
  .sidebar {
    width: 88vw;
    min-width: 180px;
    max-width: 99vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    box-shadow: 4px 0 28px 0 #a0e7e544;
    border-radius: 0 22px 22px 0;
    padding-top: 55px;
    transform: translateX(-102%);
    opacity: 0;
    pointer-events: none;
    margin: 0;
    transition: var(--transition);
  }
  .sidebar.show {
    transform: translateX(0%);
    opacity: 1;
    pointer-events: all;
  }
  .sidebar .close-btn {
    display: block;
  }
}

/* Animations */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px);}
  100% { opacity: 1; transform: none;}
}

.sidebar .close-btn {
  display: none;
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 18px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  z-index: 20;
  transition: var(--transition);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 14px 28px; /* tăng padding cho thoáng hơn */
  background: var(--navbar-bg);
  border-bottom: none;
  box-shadow: var(--soft-shadow);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  z-index: 100;
  position: sticky;    /* <--- Thêm dòng này */
  top: 0;              /* <--- Thêm dòng này */
  font-size: 21px;
}

#toggleSidebar {
  font-size: 18px;
  margin-right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  transition: var(--transition);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

#toggleSidebar:hover {
  background: var(--primary);
  color: #232946;
  box-shadow: 0 2px 14px 0 #a7e9af33;
  transform: scale(1.1);
}


@keyframes fadeInDown {
  0% {opacity: 0; transform: translateY(-20px);}
  100% {opacity: 1; transform: translateY(0);}
}

.search {
  flex: 1;
  margin-right: 18px;
  display: flex;
  align-items: center;
  animation: fadeIn .6s .2s both;
  justify-content: flex-end;
}
.search input {
  width: 100%;
  max-width: 270px;
  padding: 15px 16px;
  border: 1.5px solid #222;
  border-radius: var(--border-radius);
  background: #fff8fa;
  box-shadow: 0 1px 6px 0 #ffe1e015;
  font-size: 16px;
  color: var(--text);
  transition: var(--transition);
  outline: none;
  margin-left: 0;
}
.search input:focus {
  background: #fffbe7;
  box-shadow: 0 0 0 2px var(--primary);
  border-color: var(--primary);
}

#themeToggle {
  background: linear-gradient(135deg, var(--primary) 60%, var(--accent) 100%);
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 50%;
  color: #fff;
  width: 38px;
  height: 38px;
  box-shadow: 0 2px 12px #a7e9af22;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

#themeToggle:hover {
  background: linear-gradient(135deg, var(--accent) 10%, var(--primary) 90%);
  color: #232946;
  transform: scale(1.07) rotate(-8deg);
}

.avatar {
  position: relative;
  cursor: pointer;
  margin-left: 10px;
  min-width: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.avatar img, .avatar span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar-bg);
  display: inline-block;
  box-shadow: 0 2px 12px #a7e9af33;
  object-fit: cover;
  font-weight: bold;
  font-size: 17px;
  color: var(--primary);
  text-align: center;
  line-height: 36px;
  transition: var(--transition);
}

.avatar .dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 120%;
  background: var(--sidebar-bg);
  min-width: 220px; /* 👈 tăng chiều rộng */
  padding: 10px 0;
  box-shadow: var(--soft-shadow);
  border-radius: var(--border-radius);
  z-index: 10;
  animation: fadeIn .22s both;
}

.avatar .dropdown a {
  display: block;
  padding: 12px 35px; /* 👈 tăng padding ngang */
  color: var(--text);
  text-decoration: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  transition: background 0.12s;
  white-space: nowrap;
}

.avatar .dropdown.show {
  display: block;
}

.avatar .dropdown a:hover {
  background: var(--primary);
  color: #232946;
}

.content {
  padding: 4px 64px; /* to hơn */
  font-size: 18px;     /* to chữ mặc định */
  animation: fadeIn .7s .1s both;
}



.sidebar.hide {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  padding: 0;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 8px 0 0; /* Cách nút menu 8px, sát bên phải */
}
.logo img {
  max-height: 55px;   /* hoặc 36px, tuỳ navbar của bạn */
  max-width: 230px;   /* hoặc tuỳ chiều ngang bạn muốn */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 900px) {
  .content {
    padding: 32px 12px;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    width: 87vw;
    min-width: 220px;
    max-width: 99vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    box-shadow: 4px 0 28px 0 #a7e9af22;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    transition: var(--transition);
    padding-top: 50px;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .sidebar.show {
    transform: translateX(0%);
    opacity: 1;
    pointer-events: all;
  }
  .sidebar .close-btn {
    display: block;
  }
  main {
    width: 100vw;
  }
  .navbar {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--soft-shadow);
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .search {
    margin-right: 18px;
    width: 100%;
    justify-content: flex-end;
  }
}

::-webkit-scrollbar {
  width: 9px;
  background: #ffe1e033;
  border-radius: var(--border-radius);
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: var(--border-radius);
  opacity: .45;
}
.category-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  padding: 24px;
  background: var(--accent);
  border-radius: var(--border-radius);
  box-shadow: var(--soft-shadow);
  margin-top: 24px;
}

.category-box {
  background: #fff;
  border-radius: var(--border-radius);
  padding: 18px 20px;
  text-decoration: none;
  color: #232946; /* cố định để không bị ảnh hưởng dark mode */
  box-shadow: 0 4px 12px #a7e9af22;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.category-box:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 18px #a7e9af33;
  background: linear-gradient(145deg, var(--primary), var(--secondary));
  color: #232946;
}

.category-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-box .icon {
  font-size: 32px;
  flex-shrink: 0;
}

.category-box .title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.category-box .count {
  font-size: 14px;
  color: var(--text-light);
}

.has-submenu > a {
  cursor: pointer;
  position: relative;
  font-weight: 600;
}

.submenu {
  list-style: none;
  padding-left: 24px;
  margin: 8px 0 0 0;
  display: none;
}

.submenu li a {
  font-size: 20px;
  padding: 8px 18px;
  display: block;
  border-radius: var(--border-radius);
  color: var(--text);
  transition: var(--transition);
}

.submenu li a:hover {
  background: var(--primary);
  color: #232946;
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text);
}
.user-info .balance {
  color: #28c76f;
  font-size: 13px;
}

.balance-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, #e6fff2 0%, #f8fdfb 100%);
  border-radius: 12px;
  padding: 11px 24px;
  font-size: 21px;
  font-weight: 700;
  color: var(--primary, #28c76f);
  box-shadow: 0 2px 12px #28c76f1a;
  border: 1.5px solid #d2f8e5;
  margin-top: 12px;
  letter-spacing: 0.2px;
  transition: background 0.2s, color 0.2s;
}

.balance-label {
  color: var(--text, #17644c);
  font-weight: 500;
  font-size: 10px;
  opacity: 0.82;
}

.balance-amount {
  color: var(--primary, #28c76f);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.balance-unit {
  color: #999;
  font-size: 15px;
  font-weight: 500;
  margin-left: 2px;
}

body.dark .balance-box {
  background: linear-gradient(90deg, #203a2a 0%, #242c27 100%);
  color: #7ef97d;
  border: 1.5px solid #284e37;
}

body.dark .balance-label {
  color: #c5f3d9;
}

body.dark .balance-amount {
  color: #7ef97d;
}

body.dark .balance-unit {
  color: #aaa;
}

@media (max-width: 480px) {
  .balance-box {
    font-size: 16px;
    padding: 8px 10px;
  }
  .balance-label {
    font-size: 13.5px;
  }
  .balance-amount {
    font-size: 17px;
  }
}