/* css/global.css */
:root {
  /* Tone màu sáng sủa, năng động kiểu MochiMochi */
  --primary-color: #f59e0b; /* Cam rực rỡ */
  --primary-hover: #d97706;
  --secondary-color: #3b82f6; /* Xanh dương */
  --success-color: #22c55e; /* Xanh lá */
  --danger-color: #ef4444; /* Đỏ */

  --bg-body: #f8fafc; /* Nền xám rất nhạt */
  --bg-surface: #ffffff; /* Nền thẻ trắng tinh */

  --text-main: #0f172a; /* Đen tuyền */
  --text-muted: #64748b; /* Xám nhạt */

  --border-color: #e2e8f0;

  /* Đổ bóng mềm tạo độ sâu */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 15px 40px rgba(59, 130, 246, 0.1);

  --font-main: "Nunito", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-main);
  overflow: hidden; /* Chống cuộn toàn trang web, chỉ cho phép cuộn khu vực nội dung */
}

/* Tiện ích dùng chung */
button {
  font-family: var(--font-main);
  cursor: pointer;
  border: none;
  outline: none;
}
/* ================= CHẾ ĐỘ DARK MODE (VŨ TRỤ) ================= */
body.dark-theme {
  --bg-body: #020617; /* Nền xanh đen sâu thẳm cực ngầu */
  --bg-surface: #0f172a; /* Nền của các thẻ Sidebar, Header... */

  --text-main: #38bdf8; /* Chữ màu xanh lơ phát sáng như yêu cầu */
  --text-muted: #7dd3fc; /* Chữ nhạt màu xanh da trời */

  --border-color: #1e293b; /* Viền mờ đi cho hợp tông tối */

  /* Đổi lại màu bóng đổ (shadow) để hợp với nền đen */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Ép các khu vực bị fix cứng màu trắng (như thẻ Card) phải nghe theo Darkmode */
body.dark-theme .learn-wrapper,
body.dark-theme .sidebar,
body.dark-theme .header,
body.dark-theme .lesson-card,
body.dark-theme .premium-card,
body.dark-theme .login-box,
body.dark-theme .topic-card-pro,
body.dark-theme .az-item-pro,
body.dark-theme .lesson-control-bar {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main);
}

/* Chỉnh lại nền ô Input khi gõ từ */
body.dark-theme .hidden-input,
body.dark-theme .vi-type-input,
body.dark-theme .lesson-size-select {
  background-color: #1e293b;
  color: var(--text-main);
  border-color: #334155;
}

/* Đổi màu nền chữ trong thẻ cho đẹp */
body.dark-theme .lesson-title,
body.dark-theme .premium-title,
body.dark-theme .topic-title-pro,
body.dark-theme .az-title-pro {
  color: #38bdf8 !important; /* Xanh neon */
}
/* ================= FIX LỖI MÀU NỀN CÁC COMPONENT TRONG DARK MODE ================= */

/* 1. Ép màu nền Kim Cương và Lửa Streak chìm vào Dark Mode */
body.dark-theme .tool-chip.streak {
  background-color: rgba(234, 88, 12, 0.15) !important;
  border-color: rgba(234, 88, 12, 0.3) !important;
  color: #fb923c !important;
}

body.dark-theme .tool-chip.coin {
  background-color: rgba(2, 132, 199, 0.15) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
  color: #38bdf8 !important;
}

/* 2. Fix thẻ Khóa học 1000 từ vựng (Premium Card) */
body.dark-theme .premium-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

body.dark-theme .premium-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 30px rgba(56, 189, 248, 0.1);
}

/* 3. Fix màu nền các nút Menu Sidebar khi hover hoặc active */
body.dark-theme .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme .menu-item.active {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

body.dark-theme .btn-back {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

body.dark-theme .btn-back:hover {
  border-color: #38bdf8 !important;
}

/* ================= BỔ SUNG DARK MODE CHO CÁC MÀN HÌNH PHỤ ================= */

/* 4. Ép màu nền thẻ Card ở màn SRS, Sổ từ vựng, Hồ sơ, Cài đặt */
body.dark-theme .srs-card,
body.dark-theme .mochi-item,
body.dark-theme .mochi-tab,
body.dark-theme .mochi-search-input,
body.dark-theme .pro-stat-box,
body.dark-theme .achieve-card,
body.dark-theme .setting-item,
body.dark-theme .modal-box,
body.dark-theme .form-input,
body.dark-theme .streak-dropdown-inner,
body.dark-theme .freeze-modal-box {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* 5. Đổi màu Tiêu đề bên trong thành Xanh Neon */
body.dark-theme .srs-title,
body.dark-theme .m-word,
body.dark-theme .pro-name,
body.dark-theme .pro-stat-val,
body.dark-theme .achieve-title,
body.dark-theme .setting-name,
body.dark-theme .modal-title,
body.dark-theme .streak-title,
body.dark-theme .freeze-modal-title {
  color: #38bdf8 !important;
}

/* 6. Đổi màu chữ phụ (Mô tả, Nghĩa tiếng Việt) thành Xanh lợt */
body.dark-theme .srs-desc,
body.dark-theme .m-meaning,
body.dark-theme .m-type,
body.dark-theme .pro-email,
body.dark-theme .pro-stat-label,
body.dark-theme .setting-desc,
body.dark-theme .form-label {
  color: var(--text-muted) !important;
}

/* 7. Fix vài điểm nhấn nhỏ (Nút Tab đang chọn, Thẻ khóa) */
body.dark-theme .srs-card.locked {
  background-color: #020617 !important; /* Xám đen tối */
  opacity: 0.6;
}

body.dark-theme .mochi-tab.active {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}
/* ================= BẢN VÁ LỖI VIỀN TRẮNG ĐAU MẮT TRONG DARK MODE ================= */

/* 1. FIX THẺ PREMIUM (1000 Từ Vựng ở Trang Chủ) */
body.dark-theme .premium-card {
  background-color: #0f172a !important; /* Nền xanh navy tối */
  border: 2px solid #1e293b !important; /* Viền xám đen tiệp màu nền */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Đổ bóng tối */
}
body.dark-theme .premium-card:hover {
  border-color: #38bdf8 !important; /* Hover thì sáng viền xanh neon */
}
body.dark-theme .premium-title {
  color: #38bdf8 !important; /* Chữ tiêu đề xanh neon */
}
body.dark-theme .premium-stats {
  color: #94a3b8 !important; /* Chữ phụ xám nhạt dịu mắt */
}

/* 2. FIX SỔ TỪ VỰNG (Mochi Item) */
body.dark-theme .mochi-item {
  background-color: #0f172a !important;
  border: 2px solid #1e293b !important; /* Ép viền chìm vào bóng tối */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
body.dark-theme .mochi-item:hover {
  border-color: #38bdf8 !important;
  background-color: #1e293b !important; /* Hover sáng nền lên 1 chút */
}
body.dark-theme .m-word {
  color: #38bdf8 !important; /* Từ vựng tiếng Anh sáng lóa */
}
body.dark-theme .m-ipa,
body.dark-theme .m-type,
body.dark-theme .m-meaning {
  color: #94a3b8 !important; /* Nghĩa tiếng Việt màu dịu đi để nổi bật từ chính */
}

/* 3. FIX NÚT "THÊM TỪ MỚI" Ở SỔ TỪ VỰNG */
body.dark-theme .btn-add-word {
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}
body.dark-theme .btn-add-word:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
}
/* ================= VÁ LỖI CÁI HỘP TRẮNG KHỔNG LỒ Ở SỔ TỪ VỰNG ================= */

/* 1. Ép cái hộp to bọc ngoài Sổ từ vựng thành màu xanh đen */
body.dark-theme .vocab-mochi-wrapper {
  background-color: #0f172a !important;
  border: 2px solid #1e293b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Đổi màu luôn mấy cái Tab (Cấp độ 1, Cấp độ 2...) nằm trên cái hộp đó */
body.dark-theme .mochi-tab {
  background-color: #1e293b !important;
  border: 2px solid #334155 !important;
  color: #94a3b8 !important;
}

body.dark-theme .mochi-tab:hover {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark-theme .mochi-tab.active {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

/* 3. Chỉnh luôn ô Tìm kiếm từ vựng cho tiệp màu */
body.dark-theme .mochi-search-input {
  background-color: #1e293b !important;
  border: 2px solid #334155 !important;
  color: #38bdf8 !important;
}

body.dark-theme .mochi-search-input::placeholder {
  color: #64748b !important;
}

body.dark-theme .mochi-search-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}
/* ================= FIX LỖI FLASHCARD (THẺ LẬT) TRONG DARK MODE ================= */

/* 1. Ép màu nền thẻ mặt trước và mặt sau */
body.dark-theme .flip-card-front,
body.dark-theme .flip-card-back {
  background-color: #0f172a !important; /* Nền xanh navy */
  border: 2px solid #1e293b !important; /* Viền xám tối */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* Mặt sau cho viền xanh và nền đậm hơn chút để dễ phân biệt khi lật */
body.dark-theme .flip-card-back {
  background-color: #020617 !important;
  border-color: #0284c7 !important;
}

/* 2. Đổi màu chữ trên thẻ */
body.dark-theme .word-title {
  color: #38bdf8 !important; /* Tiếng Anh sáng xanh neon */
}

body.dark-theme .word-ipa,
body.dark-theme .word-meaning {
  color: #94a3b8 !important; /* Chữ xám dịu mắt */
}

/* 3. Fix màu mấy cái nút Loa và Ốc sên */
body.dark-theme .audio-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .audio-btn:hover {
  background-color: #334155 !important;
  border-color: #38bdf8 !important; /* Hover sáng viền lên */
}
/* ================= VÁ LỖI MÀU XANH BÀI ĐÃ HỌC TRONG DARK MODE ================= */
body.dark-theme .lesson-card.active {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: #22c55e !important;
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.1) !important;
}
body.dark-theme .lesson-card.active .lesson-title,
body.dark-theme .lesson-card.active .lesson-sub {
  color: #4ade80 !important;
}
body.dark-theme .lesson-card.active .lesson-icon-ring {
  background: #facc15 !important;
}
/* ================= VÁ LỖI NỀN TRẮNG Ở TRANG CHỦ & CÀI ĐẶT TRONG DARK MODE ================= */

/* 1. Fix khối Khóa học ở Trang chủ */
body.dark-theme .course-card-hm {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
body.dark-theme .course-card-hm:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 15px 30px rgba(56, 189, 248, 0.1) !important;
}
body.dark-theme .course-title-hm {
  color: #38bdf8 !important;
}
body.dark-theme .course-stats-hm {
  color: var(--text-muted) !important;
}

/* 2. Fix khối bọc ngoài của trang Cài đặt */
body.dark-theme .settings-wrapper {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

/* 3. Đổi màu chữ của phần Setting cho tiệp màu tối */
body.dark-theme .setting-name {
  color: #38bdf8 !important;
}
body.dark-theme .setting-desc {
  color: var(--text-muted) !important;
}
body.dark-theme .danger-title {
  color: #f87171 !important; /* Đỏ sáng hơn cho Dark Mode */
}
/* ================= VÁ LỖI FLASHCARD CÓ ẢNH TRONG DARK MODE ================= */
body.dark-theme #fcImage {
  border-color: #1e293b !important;
}
.batch-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}
.batch-btn:hover {
  background: var(--bg-body);
}
.batch-btn.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #3b82f6;
}