/* css/layout.css */

/* Bố cục tổng: Chia 2 cột (Sidebar + Main) */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ================= 1. SIDEBAR ================= */
.sidebar {
  width: 260px;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  z-index: 20;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 30px 20px;
}

.logo-icon-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.logo-text {
  font-family: "Nunito", sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}

.logo-text .voca {
  background: linear-gradient(180deg, #19d7f5 0%, #0498f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-text .go {
  background: linear-gradient(180deg, #ffae22 0%, #ff8500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 15px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 20px;
  border-radius: 16px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: var(--bg-body);
  color: var(--text-main);
}

.menu-item.active {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--secondary-color);
}

.menu-badge {
  margin-left: auto;
  background-color: var(--danger-color);
  color: white;
  font-size: 12px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ================= 2. MAIN WRAPPER & HEADER ================= */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.header {
  height: 70px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 30px;
  z-index: 10;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 15px;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 14px;
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
}

.tool-chip.streak {
  color: #ea580c;
  border-color: #ffedd5;
  background-color: #fff7ed;
}

/* Đổi từ xu vàng sang kim cương xanh */
.tool-chip.coin {
  color: #0284c7; /* Chữ xanh kim cương */
  border-color: #bae6fd;
  background-color: #e0f2fe; /* Nền xanh nhạt */
}

.user-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--secondary-color);
  overflow: hidden;
}

.user-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= 3. SPA VIEWS (HIỆU ỨNG TRƯỢT MÀN HÌNH) ================= */
.main-content {
  flex: 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.view-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  /* Đẩy thẻ sang phải 30px để chờ trượt vào */
  transform: translateX(30px);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.view-section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none; /* CHÌA KHÓA LÀ CHỮ 'none' NÀY ĐỂ FIX LỖI BAY LÊN NÓC */
}

/* Tiêu đề chung cho các view */
.welcome-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 5px;
}

.welcome-sub {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 30px;
  font-weight: 600;
}