/* Reset và thiết lập cơ bản */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Arial', sans-serif;
      background: url(https://www.dmoe.cc/random.php) no-repeat center center fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: #333; /* Đổi màu chữ mặc định thành tối hơn */
      text-align: center;
      overflow: hidden;
    }

    /* Container chính */
    .container {
      background: rgba(255, 255, 255, 0.8); /* Tăng độ mờ nền lên */
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
      max-width: 400px;
      width: 90%;
      transition: all 0.5s ease-out;
    }

    /* Header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 10px 0;
    }
    .menu-button {
      background: none;
      border: none;
      color: #ff6b00; /* Đổi màu cam đậm hơn */
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      padding: 10px 20px;
    }

    /* Avatar và khung */
    .profile-frame {
      position: relative;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    .avatar {
      width: 95%;
      height: 95%;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .avatar-frame {
      width: 150px;
      height: 150px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .profile-text {
      margin: 20px 0;
      font-size: 20px;
      font-weight: bold;
      color: #333; /* Đảm bảo màu chữ tối */
      text-shadow: none; /* Bỏ text-shadow gây mờ */
    }

    /* Nút Learn More */
    .learn-more {
      display: inline-block;
      background: linear-gradient(135deg, #ff6b00, #ff9500);
      border: none;
      padding: 10px 20px;
      border-radius: 30px;
      font-size: 16px;
      color: white; /* Đổi màu chữ thành trắng */
      cursor: pointer;
      transition: all 0.3s;
    }
    .learn-more:hover {
      background: linear-gradient(135deg, #ff9500, #ff6b00);
      transform: scale(1.1);
    }

    /* Social Icons */
    .social-icons {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    .social-icons img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s;
    }
    .social-icons img:hover {
      transform: scale(1.2);
      opacity: 0.8;
    }

    /* Footer */
    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      color: #666; /* Màu chữ tối hơn */
      font-size: 14px;
    }
    .cat, .time {
      background: rgba(255, 255, 255, 0.3);
      padding: 5px 10px;
      border-radius: 10px;
    }

    /* Battery Status */
    .battery-status {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .battery-icon {
      width: 40px;
      height: 20px;
      border: 2px solid #333;
      border-radius: 5px;
      margin-right: 8px;
      position: relative;
      display: inline-block;
    }
    .battery-level {
      height: 100%;
      border-radius: 3px;
      background: #4CAF50;
    }

    /* Animation cho thời gian */
    @keyframes timeGlow {
      0% { color: #ff0000; }
      14% { color: #ff7b00; }
      28% { color: #ffd000; }
      42% { color: #00b300; }
      57% { color: #00b3b3; }
      71% { color: #0033cc; }
      85% { color: #8000cc; }
      100% { color: #ff0000; }
    }
    .time {
      font-size: 18px;
      animation: timeGlow 1.5s linear infinite;
    }

    /* ROBOT */
    #floating-robot {
      position: fixed;
      width: 60px;
      height: 60px;
      cursor: grab;
      user-select: none;
      z-index: 9999;
    }
    #robot-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.2s;
    }
    #robot-image:hover {
      transform: scale(1.05) rotate(5deg);
    }
    .dragging {
      cursor: grabbing !important;
    }
    #chat-bubble {
      position: absolute;
      bottom: 70px;
      left: 30px;
      width: 180px;
      background: rgba(0, 0, 0, 0.7);
      border: 1px solid #fff;
      border-radius: 15px;
      padding: 6px;
      font-size: 11px;
      color: #ffeb3b;
      backdrop-filter: blur(6px);
      z-index: 10000;
      pointer-events: none;
      text-align: left;
      white-space: pre-wrap;
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
      font-family: monospace;
      display: none;
    }

    /* POPUP NHẠC */
    #music-popup {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(0,0,0,0.9);
      color: white;
      padding: 15px;
      border-radius: 12px;
      z-index: 9999;
      font-size: 14px;
      box-shadow: 0 0 10px rgba(255,255,255,0.3);
      max-width: 250px;
    }
    #music-popup button {
      margin: 5px 5px 0 0;
      padding: 5px 12px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
    #music-popup button:first-child {
      background: #4CAF50;
      color: white;
    }
    #music-popup button:last-child {
      background: #f44336;
      color: white;
    }
    .song-info {
      margin-bottom: 10px;
      font-weight: bold;
      color: #ffc107;
    }

 /* MŨI TÊN MỞ RỘNG & NỘI DUNG MỞ RỘNG */
.expand-arrow {
  font-size: 30px;
  color: #ffc107;
  cursor: pointer;
  margin-top: 15px;
  transition: transform 0.3s ease;
  display: block;
  text-align: center;

  outline: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent; /* Ẩn hiệu ứng xanh trên mobile */
  user-select: none;
}
.expand-arrow:focus,
.expand-arrow:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Xoay khi mở rộng */
.expand-arrow.rotated {
  transform: rotate(180deg);
}

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  background: rgba(0, 0, 0, 0.1); /* Tối hơn so với rgba(255, 255, 255, 0.05) */
  border-radius: 10px;
  margin-top: 15px;
  padding: 0 15px;
  color: #000; /* Vẫn giữ màu chữ đen */
  text-align: left;
}

.expandable-content.expanded {
  max-height: 200px;
  padding: 15px;
}

.expandable-content p {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.expandable-content p:last-child {
  margin-bottom: 0;
}
.loading-screen, .main-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.5s ease;
    }

    .loading-screen {
      background-color: #121212;
      color: #add8e6;
      z-index: 10001; /* Đã cập nhật z-index */
    }

    .character {
      width: 120px;
      height: 120px;
      background: url('https://i.imgur.com/wrotbWV.gif') no-repeat center;
      background-size: contain;
      animation: float 2s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .message {
      margin-top: 10px;
      font-size: 20px;
    }

    /* Khung mới cho toàn bộ phần hiển thị tiến trình và thông tin */
    .loading-frame {
      border: 2px solid #add8e6; /* Viền khung màu xanh nhạt */
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #1e1e1e; /* Nền tối hơn cho khung */
      box-shadow: 0 0 15px rgba(173, 216, 230, 0.4); /* Hiệu ứng đổ bóng nhẹ */
    }

    .progress-container {
      margin-top: 20px;
      width: 200px;
      height: 10px;
      background-color: #333;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid white; /* Viền trắng cho thanh tiến trình */
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(to right, #FF0000, #FFA500, #FFFF00, #008000, #0000FF, #4B0082, #EE82EE);
      transition: width 0.2s ease;
    }

    .info-display {
      margin-top: 15px;
      font-size: 14px;
      color: #ccc;
      text-align: center;
    }

    .info-display p {
      margin: 5px 0;
    }

    .main-content {
      background-color: #fff;
      color: #333;
      opacity: 0;
      z-index: 1;
    }

    .main-content.show {
      opacity: 1;
    }