/* =========================================
   1. CORE: VARIABLES & RESET
   ========================================= */
:root {
  /* Bảng màu chuẩn Xianxia */
  --primary-red: #d32f2f;
  --primary-dark: #b71c1c;
  --dark-red: #b71c1c;
  --primary-gradient: linear-gradient(
    135deg,
    var(--primary-red) 0%,
    #880e4f 100%
  );
  --accent-gold: #ffd700;
  --dark-gold: #d4af37;

  /* Text & BG - Light Mode (Mặc định) */
  --text-dark: #2d3436;
  --text-light: #636e72;
  --bg-gray: #f1f2f6;
  --bg-dark: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.95);
  --border-color: #dfe6e9;

  /* Shadows */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 15px 35px rgba(212, 175, 55, 0.2);

  /* Từ Điển: Bảng màu Semantic (Nền Trắng) */
  --dict-verb: #1976d2;
  --dict-noun: #2e7d32;
  --dict-adj: #f57c00;
  --dict-number: #00897b;
  --dict-grammar: #d32f2f;
  --dict-particle: #8e24aa;
  --dict-default: #c2185b;

  /* Bảng phân cấp không gian (Z-index Stack) */
  --z-base: 1;
  --z-nav: 1000;
  --z-dropdown: 9991;
  --z-marquee: 9980;
  --z-chat: 9990;
  --z-wheel: 9995;
  --z-modal: 9999;
  --z-modal-high: 10000;
  --z-modal-top: 99999;
  --z-tooltip: 99999;
  --z-toast: 100000;
  --z-max: 999999;
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR THEMES — chuyển màu toàn site qua data-theme attribute
   Mặc định (xianxia): không cần selector vì :root đã định nghĩa
   ═══════════════════════════════════════════════════════════════════ */

/* Academy (Học Thuật) — xanh dương, chuyên nghiệp */
body[data-theme="academy"],
body[data-theme="professional"] {
  --primary-red: #0277bd;
  --primary-dark: #01579b;
  --dark-red: #00838f;
  --primary-gradient: linear-gradient(135deg, #0288d1 0%, #01579b 100%);
  --accent-gold: #b0bec5;
  --dark-gold: #78909c;
}
body.dark-mode[data-theme="academy"],
body.dark-mode[data-theme="professional"] {
  --primary-red: #29b6f6;
  --primary-dark: #03a9f4;
  --primary-gradient: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
  --accent-gold: #cfd8dc;
}

/* Rose (Hoa Đào) — hồng đỏ, nữ tính */
body[data-theme="rose"] {
  --primary-red: #e91e63;
  --primary-dark: #c2185b;
  --dark-red: #ad1457;
  --primary-gradient: linear-gradient(135deg, #e91e63 0%, #880e4f 100%);
  --accent-gold: #f8bbd0;
  --dark-gold: #f48fb1;
}
body.dark-mode[data-theme="rose"] {
  --primary-red: #f48fb1;
  --primary-dark: #e91e63;
  --primary-gradient: linear-gradient(135deg, #f48fb1 0%, #c2185b 100%);
  --accent-gold: #f8bbd0;
}

/* Forest (Trúc Lâm) — xanh lá, trung tính */
body[data-theme="forest"] {
  --primary-red: #2e7d32;
  --primary-dark: #1b5e20;
  --dark-red: #1b5e20;
  --primary-gradient: linear-gradient(135deg, #43a047 0%, #1b5e20 100%);
  --accent-gold: #c8e6c9;
  --dark-gold: #a5d6a7;
}
body.dark-mode[data-theme="forest"] {
  --primary-red: #66bb6a;
  --primary-dark: #43a047;
  --primary-gradient: linear-gradient(135deg, #66bb6a 0%, #2e7d32 100%);
  --accent-gold: #a5d6a7;
}

/* Gold (Kim Long) — vàng đồng, sang trọng */
body[data-theme="gold"] {
  --primary-red: #f57f17;
  --primary-dark: #e65100;
  --dark-red: #bf360c;
  --primary-gradient: linear-gradient(135deg, #ff8f00 0%, #e65100 100%);
  --accent-gold: #ffe082;
  --dark-gold: #ffd54f;
}
body.dark-mode[data-theme="gold"] {
  --primary-red: #ffa726;
  --primary-dark: #ff8f00;
  --primary-gradient: linear-gradient(135deg, #ffa726 0%, #e65100 100%);
  --accent-gold: #ffe082;
}

/* Ocean (Thương Hải) — xanh ngọc, mát mẻ */
body[data-theme="ocean"] {
  --primary-red: #00838f;
  --primary-dark: #006064;
  --dark-red: #004d40;
  --primary-gradient: linear-gradient(135deg, #00acc1 0%, #006064 100%);
  --accent-gold: #b2ebf2;
  --dark-gold: #80deea;
}
body.dark-mode[data-theme="ocean"] {
  --primary-red: #4dd0e1;
  --primary-dark: #00acc1;
  --primary-gradient: linear-gradient(135deg, #4dd0e1 0%, #00838f 100%);
  --accent-gold: #b2ebf2;
}

/* CHẾ ĐỘ TỐI (DARK MODE) - Kích hoạt khi có class .dark-mode trên body */
body.dark-mode {
  --text-dark: #f5f6fa;
  --text-light: #a4b0be;
  --bg-gray: #1e1e24;
  --bg-dark: #0f0f12;
  --bg-panel: rgba(25, 25, 30, 0.9);
  --border-color: #2f3542;

  /* Kéo sáng màu từ điển lên để không bị mù trên nền đen */
  --dict-verb: #64b5f6;
  --dict-noun: #81c784;
  --dict-adj: #ffb74d;
  --dict-number: #4db6ac;
  --dict-grammar: #e57373;
  --dict-particle: #ba68c8;
  --dict-default: #f06292;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 15px 35px rgba(212, 175, 55, 0.15);
}
/* Dark Mode: Form Controls */
body.dark-mode .form-control {
  background: #1a1a22;
  border-color: #3a3a4a;
  color: var(--text-dark);
}
body.dark-mode .form-control:focus {
  background: #22222c;
  border-color: var(--primary-red);
}
body.dark-mode select.form-control {
  background: #1a1a22;
  color: var(--text-dark);
}
body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a22;
}
body.dark-mode .skeleton-card {
  background: #1e1e24;
  border-color: #2f3542;
}
body.dark-mode .stroke-box {
  background-color: #1e1e24;
  border-color: #2f3542;
}

/* CLASS HỖ TRỢ HIỂN THỊ TỪ ĐIỂN TỰ ĐỘNG ĐỔI MÀU */
.dict-theme-verb {
  border-left-color: var(--dict-verb) !important;
}
.dict-theme-verb .dict-pos-badge {
  background: var(--dict-verb);
  color: #fff;
}
.dict-theme-verb .dict-icon {
  color: var(--dict-verb);
}

.dict-theme-noun {
  border-left-color: var(--dict-noun) !important;
}
.dict-theme-noun .dict-pos-badge {
  background: var(--dict-noun);
  color: #fff;
}
.dict-theme-noun .dict-icon {
  color: var(--dict-noun);
}

.dict-theme-adj {
  border-left-color: var(--dict-adj) !important;
}
.dict-theme-adj .dict-pos-badge {
  background: var(--dict-adj);
  color: #fff;
}
.dict-theme-adj .dict-icon {
  color: var(--dict-adj);
}

.dict-theme-number {
  border-left-color: var(--dict-number) !important;
}
.dict-theme-number .dict-pos-badge {
  background: var(--dict-number);
  color: #fff;
}
.dict-theme-number .dict-icon {
  color: var(--dict-number);
}

.dict-theme-grammar {
  border-left-color: var(--dict-grammar) !important;
}
.dict-theme-grammar .dict-pos-badge {
  background: var(--dict-grammar);
  color: #fff;
}
.dict-theme-grammar .dict-icon {
  color: var(--dict-grammar);
}

.dict-theme-particle {
  border-left-color: var(--dict-particle) !important;
}
.dict-theme-particle .dict-pos-badge {
  background: var(--dict-particle);
  color: #fff;
}
.dict-theme-particle .dict-icon {
  color: var(--dict-particle);
}

.dict-theme-default {
  border-left-color: var(--dict-default) !important;
}
.dict-theme-default .dict-pos-badge {
  background: var(--dict-default);
  color: #fff;
}
.dict-theme-default .dict-icon {
  color: var(--dict-default);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden !important;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  overflow-x: hidden !important;
  background-color: var(--bg-dark);
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Cute font override — áp dụng toàn trang khi body.font-cute */
body.font-cute,
body.font-cute :not(.fas):not(.fab):not(.far):not([class*="fa-"]) {
  font-family: 'ZCOOL KuaiLe', 'Comic Sans MS', cursive !important;
}
* {
  box-sizing: border-box;
}
.container, .container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
input,
textarea,
[contenteditable="true"] {
  user-select: auto;
  -webkit-user-select: auto;
}
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}
button,
i,
img {
  user-select: none;
  -webkit-user-select: none;
}
ul {
  list-style: none;
}

/* =========================================
   THANH TÌM KIẾM TỪ ĐIỂN — HÀO QUANG HOÀNG KIM
   ========================================= */
/* ─── SEARCH BAR (compact redesign) ──────────────────────── */
.dict-search-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}
.dict-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-dark);
  border: 1.5px solid var(--border-color);
  border-radius: 50px;
  padding: 0 6px 0 18px;
  height: 46px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.dict-search-bar:focus-within {
  border-color: #ffd54f;
  box-shadow: 0 0 0 3px rgba(255,213,79,0.15), 0 0 18px rgba(255,213,79,0.2);
}
.dict-search-icon {
  color: var(--text-light);
  font-size: 0.82rem;
  flex-shrink: 0;
  opacity: 0.6;
}
#dict-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-dark) !important;
  font-size: 0.95rem !important;
  font-family: 'Poppins', sans-serif;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0;
  transform: none !important;
  transition: none !important;
}
#dict-search-input::placeholder {
  color: var(--text-light);
  opacity: 0.6;
}
/* Trạng thái loading index — placeholder nhấp nháy nhẹ */
#dict-search-input.dict-index-loading::placeholder {
  animation: dict-loading-pulse 1.2s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes dict-loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.2; }
}
.dict-search-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.dict-tool-btn {
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: none; cursor: pointer;
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  transition: all 0.15s;
}
.dict-tool-btn:hover {
  background: color-mix(in srgb, var(--primary-red) 12%, transparent);
  color: var(--primary-red);
}
.dict-tool-btn.active {
  color: var(--primary-red);
  background: color-mix(in srgb, var(--primary-red) 10%, transparent);
}
.radical-icon {
  font-family: 'KaiTi', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.dict-search-submit {
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: var(--primary-red);
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  transition: all 0.18s;
  flex-shrink: 0;
}
.dict-search-submit:hover {
  background: var(--primary-dark);
  transform: scale(1.06);
}
/* Ẩn old search btn (đã thay bằng .dict-search-submit) */
.dict-search-btn { display: none !important; }

/* Dark mode overrides */
body.dark-mode .dict-search-bar {
  background: #1a1a22;
  border-color: #333;
}
body.dark-mode #dict-search-input::placeholder { color: #666; }

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-red), var(--dark-red));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #880e4f;
}

/* =========================================
   2. UI COMPONENTS: BUTTONS & INPUTS
   ========================================= */
.btn {
  display: inline-block;
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.5px;
}
.btn-red {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4);
}
.btn-red:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(183, 28, 28, 0.6);
}
.btn-outline {
  border: 2px solid white;
  color: white;
  background: transparent;
}
.btn-outline:hover {
  background: white;
  color: var(--primary-red);
}
.btn-google {
  background: white;
  color: #333;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-transform: none;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px;
  border-radius: 8px;
}
.btn-google:hover {
  background: #f1f1f1;
}
.btn-facebook {
  background: #1877f2;
  color: white;
  transition: 0.3s;
}
.btn-facebook:hover {
  background: #145dbf;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4);
}

.form-control {
  width: 100%;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  margin-bottom: 15px;
  transition: 0.3s;
  background: #fdfdfd;
  font-family: "Poppins", sans-serif;
}
.form-control:focus {
  border-color: var(--primary-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
  background: white;
}

/* =========================================
   3. GLOBAL MODALS & OVERLAYS BASE
   ========================================= */
.auth-box {
  background: rgba(20, 20, 25, 0.75);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  width: 90%;
  border-radius: 20px;
  padding: 40px;
  position: relative;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.15);
  animation: zoomIn 0.3s ease;
  color: #eee;
}

/* =========================================
   3.5 DRAWER MODALS (TRƯỢT TỪ PHẢI CẠNH)
   ========================================= */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}
.drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
}
.drawer-modal {
  position: fixed;
  top: 0;
  right: -100%;
  width: 550px; /* Tăng độ rộng để nhìn bao quát hơn trên Desktop */
  max-width: 100vw; /* Giữ an toàn 100% khi trên giao diện Mobile */
  height: 100vh;
  background: rgba(15, 15, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: var(--z-modal-high);
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-left: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}
.drawer-modal.open {
  right: 0;
}
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-header h2 {
  color: var(--accent-gold);
  margin: 0;
  font-family: "Zhi Mang Xing", cursive;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.drawer-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.3s;
}
.drawer-close:hover {
  color: var(--primary-red);
  transform: rotate(90deg);
}
.drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.drawer-body::-webkit-scrollbar {
  width: 6px;
}
.drawer-body::-webkit-scrollbar-thumb {
  background: var(--dark-gold);
  border-radius: 3px;
}

/* --- Responsive Modal cho Màn hình rộng (Desktop / Laptop) --- */
@media (min-width: 992px) {
  .drawer-modal {
    width: 650px; /* Tăng cực rộng trên Laptop để nhìn thoáng đãng */
  }
  
  /* Căn giữa Tàng Kinh Các trên Desktop */
  /* [CLEANUP 2026-04-26] #profileModal rules removed — modal đã bị xóa. #shopModal giữ nguyên. */
  #shopModal.drawer-modal {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.9);
    height: 85vh;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    border: 1px inset rgba(255, 215, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  #shopModal.drawer-modal {
    width: 800px; /* Thoải mái hơn cho cửa hàng */
  }
  
  #shopModal.drawer-modal.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 600px) {
  .drawer-modal {
    width: 100%; /* Phủ kín màn hình trên điện thoại */
    border-left: none;
  }
}

.modal-overlay,
.all-news-overlay,
.news-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}
.modal-overlay {
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.85);
}
.all-news-overlay {
  z-index: var(--z-modal-high);
  background: rgba(0, 0, 0, 0.85);
}
.news-popup-overlay {
  z-index: var(--z-modal-top);
  background: rgba(0, 0, 0, 0.9);
}

.close-modal,
.close-news {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 35px;
  color: #999;
  cursor: pointer;
  z-index: 10;
  opacity: 0.9;
  transition: 0.3s;
}
.close-news {
  position: sticky;
  top: 10px;
  margin-left: auto;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.close-modal:hover,
.close-news:hover {
  transform: scale(1.2);
  color: var(--primary-red);
}

/* Skeleton Loading */
.skeleton {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
  background-size: 1000px 100%;
}
.skeleton-card {
  display: flex;
  gap: 20px;
  padding: 25px;
  background: white;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid #eee;
}
.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-line {
  height: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.w-50 {
  width: 50%;
}
.w-80 {
  width: 80%;
}
.w-100 {
  width: 100%;
}

/* Fix Video Nền */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* =========================================
   4. GLOBAL ANIMATIONS (KEYFRAMES)
   ========================================= */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulseBtn {
  0% {
    box-shadow: 0 0 0 0 rgba(251, 192, 45, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(251, 192, 45, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(251, 192, 45, 0);
  }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes spinIcon {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinBorder {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes floatGift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes admin_aura {
  from {
    box-shadow:
      0 0 10px #ff4500,
      0 0 5px var(--accent-gold);
  }
  to {
    box-shadow:
      0 0 25px #ff0000,
      0 0 15px var(--accent-gold);
  }
}
@keyframes shine_text {
  to {
    background-position: 200% center;
  }
}
@keyframes hotline-phone-ring-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}
@keyframes hotline-phone-ring-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

/* =========================================
   [ONBOARDING] TRÚC CƠ CHUYỂN SINH UI (TỰ SINH - TỰ HỦY)
   ========================================= */
.onboarding-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex; justify-content: center; align-items: center;
  z-index: 999999; /* Đứng trên cả mây */
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.onboarding-overlay.show {
  opacity: 1; visibility: visible;
}
.onboarding-box {
  background: var(--bg-dark); /* Gán biến thay vì mã mãnh Hex để có độ tương thích Light/Dark Mode vô hạn */
  width: 90%; max-width: 450px;
  padding: 30px; border-radius: 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}
.onboarding-header h2 {
  color: var(--primary-red);
  font-size: 1.8rem; margin-bottom: 5px;
  font-family: 'Zhi Mang Xing', cursive;
  text-shadow: 0 0 5px rgba(211,47,47, 0.2);
}
.close-onboarding {
  position: absolute; top: 12px; right: 20px;
  background: transparent; border: none; font-size: 0.9rem;
  color: #999; cursor: pointer; text-decoration: underline;
  transition: 0.2s;
}
.close-onboarding:hover { color: var(--primary-red); }



@keyframes hotline-phone-ring-img-circle-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

/* TỐI ƯU KHUNG CHỮ HÁN ĐỘNG TỪ ĐIỂN */
#stroke-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}
.stroke-box {
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: white;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSI1MCUiIHkxPSIwIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgc3Ryb2tlPSIjZGZkZmRmIiBzdHJva2UtZGFzaGFycmF5PSI1LDUiLz48bGluZSB4MT0iMCIgeTE9IjUwJSIgeDI9IjEwMCUiIHkyPSI1MCUiIHN0cm9rZT0iI2RmZGZkZiIgc3Ryb2tlLWRhc2hhcnJheT0iNSw1Ii8+PC9zdmc+");
  background-size: cover;
  background-position: center;
}

/* ==========================================================
   SỔ TAY (NOTEBOOK) VOCABULARY LIST STYLES
   ========================================================== */
.nb-vocab-row {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nb-vocab-row:hover {
  background: #fdfdfd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.nb-vocab-status {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
}
.nb-vocab-hanzi {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  font-family: 'KaiTi', serif;
  white-space: nowrap;
}
.nb-vocab-pinyin {
  color: #1565c0;
  font-family: monospace;
  font-size: 0.8rem;
  white-space: nowrap;
}
.nb-vocab-meaning {
  color: #777;
  font-size: 0.85rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notebook Dark Mode */
body.dark-mode .nb-vocab-row {
  background: #1a1a22;
  border-color: #333;
}
body.dark-mode .nb-vocab-row:hover {
  background: #25252d;
  border-color: #444;
}
body.dark-mode .nb-vocab-hanzi {
  color: var(--text-dark);
}
body.dark-mode .nb-vocab-pinyin {
  color: #64b5f6; /* Lighter blue for dark mode visibility */
}
body.dark-mode .nb-vocab-meaning {
  color: #aaa;
}

/* --- NGỮ PHÁP HOÀNG KIM (IMPERIAL GOLD) --- */
.grammar-details {
  background: transparent; /* [v7.37 FIX BUG 3] Xóa nền vàng */
  border: 1px solid #e0e0e0;
  border-left: 5px solid #f57f17;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.grammar-details > summary {
  font-weight: 600;
  font-size: 1.1rem;
  color: #d84315;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.grammar-details > summary::-webkit-details-marker {
  display: none;
}

.grammar-details > summary::before {
  content: '\25B6';
  font-size: 0.9em;
  margin-right: 10px;
  color: #f57f17;
  transition: transform 0.3s ease;
}

.grammar-details[open] > summary::before {
  transform: rotate(90deg);
}

.grammar-details > div {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e0e0e0;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- DARK MODE HOÀNG KIM --- */
body.dark-mode .grammar-details {
  background: transparent !important; /* [v7.37 FIX BUG 3] Xóa nền vàng dark mode */
  border: 1px solid #444 !important;
  border-left: 5px solid #ffd54f !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

body.dark-mode .grammar-details > summary {
  color: #ffd54f !important;
}

body.dark-mode .grammar-details > summary:hover {
  color: #fff3e0 !important;
}

body.dark-mode .grammar-details > summary::before {
  color: #ffd54f;
}

body.dark-mode .grammar-details > div {
  border-top: 1px dashed #555;
  color: #e0e0e0;
}

/* --- NGỮ PHÁP TITLE HOÀNG KIM --- */
.grammar-main-title {
  color: #d84315;
  font-weight: bold;
  margin-bottom: 10px;
  border-color: #f57f17 !important;
}

body.dark-mode .grammar-main-title {
  color: #ffd54f !important;
  border-color: #ffd54f !important;
}

/* --- LỊCH SỬ PINYIN (SMART BLACK/WHITE) --- */
.dict-hist-pinyin {
  color: #777;
}

body.dark-mode .dict-hist-pinyin {
  color: #aaa;
}

/* HIỆU ỨNG NÚT NGỮ PHÁP (STATIC — không nhấp nháy) */
.grammar-pulse-btn {
  color: #d84315 !important;
  font-weight: 600;
  border: 1px solid rgba(245, 127, 23, 0.3);
}

body.dark-mode .grammar-pulse-btn {
  color: #ffd54f !important;
  border: 1px solid rgba(255, 213, 79, 0.3);
}

/* =========================================
   TỐI ƯU DARK MODE CHO KHỐI BÀI HỌC AI
   ========================================= */
/* Đảm bảo nền sáng chuẩn chỉ ở Light Mode */
.ai-lesson-container {
    background-color: #ffffff;
    color: #333333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Biến hình khi sang Dark Mode */
body.dark-mode .ai-lesson-container {
    background-color: #1a1a24 !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333;
}

/* Đồng bộ bảng từ vựng bên trong */
body.dark-mode .ai-lesson-container table tr {
    background-color: transparent !important;
}

body.dark-mode .ai-lesson-container table td,
body.dark-mode .ai-lesson-container table th {
    border-color: #444444 !important;
    color: #e0e0e0 !important;
}

/* Tiêu đề con bên trong khối — Hoàng Kim */
body.dark-mode .ai-lesson-container h1,
body.dark-mode .ai-lesson-container h2,
body.dark-mode .ai-lesson-container h3 {
    color: #ffd54f !important;
}

/* Phụ đề và text phụ */
body.dark-mode .ai-lesson-container p,
body.dark-mode .ai-lesson-container span,
body.dark-mode .ai-lesson-container em {
    color: #d0d0d0;
}

/* Các section con */
body.dark-mode .ai-lesson-section {
    border-color: #333 !important;
}

/* Vocab cards */
body.dark-mode .ai-lesson-vocab-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #3a3a4a !important;
}

/* Grammar cards */
body.dark-mode .ai-lesson-grammar-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #3a3a4a !important;
}

/* Phrase items */
body.dark-mode .ai-lesson-phrase-item {
    border-color: #3a3a4a !important;
}

/* Dialogue bubbles */
body.dark-mode .ai-lesson-dialogue-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #3a3a4a !important;
}

/* Exercise items */
body.dark-mode .ai-lesson-fill-item,
body.dark-mode .ai-lesson-reorder-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #3a3a4a !important;
}

/* Input fields trong bài tập */
body.dark-mode .ai-lesson-fill-input {
    background: #2a2a35 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

/* Word chips */
body.dark-mode .ai-lesson-word-chip {
    background: #2a2a35 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

/* Header Bài Học (tiêu đề + nút Sổ Tay) */
body.dark-mode .ai-lesson-header {
    background: #1e1e2a !important;
    border-bottom-color: #3a3a4a !important;
}

/* Thanh nhân vật Hội Thoại (Character Intro Pill) */
body.dark-mode .ai-lesson-dialogue-intro {
    background: #1e1e2a !important;
    border-color: #3a3a4a !important;
}
body.dark-mode .ai-dlg-char-intro {
    color: #e0e0e0 !important;
}

/* =========================================
   TUYỆT SÁT THANH CUỘN NGANG — BÙA CHÚ BẠO LỰC
   ========================================= */
/* (Merged into html/body rules above) */

/* =========================================
   HUY HIỆU CẢNH GIỚI HSK — BÊN CẠNH CHỮ HÁN
   ========================================= */
/* Khu vực chứa chữ Hán và Huy hiệu */
.word-header-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

/* Dòng phụ: HSK badge + Hán Việt + Tra cứu */
.dict-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

/* Responsive: Thu gọn trên mobile */
@media (max-width: 768px) {
  .word-header-container {
    gap: 8px;
    padding-right: 0 !important;
  }
  .word-header-container .dict-main-word {
    font-size: 3rem !important;
  }
  .word-header-container > span[style*="1.8rem"] {
    font-size: 1.2rem !important;
  }
  .dict-meta-row {
    gap: 8px;
  }
  .badge-hsk {
    font-size: 12px;
    padding: 3px 10px;
  }
}

/* Cấu trúc Huy Hiệu */
.badge-hsk {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge-hsk i {
  font-size: 12px;
}

/* Bảng màu Linh Khí cho từng Cảnh Giới (HSK 1 -> 9) */
.hsk-level-1 { background: linear-gradient(135deg, #4CAF50, #388E3C); } /* Luyện Khí - Xanh lá */
.hsk-level-2 { background: linear-gradient(135deg, #2196F3, #1565C0); } /* Trúc Cơ - Xanh dương */
.hsk-level-3 { background: linear-gradient(135deg, #FF9800, #EF6C00); } /* Kết Đan - Cam */
.hsk-level-4 { background: linear-gradient(135deg, #F44336, #C62828); } /* Nguyên Anh - Đỏ */
.hsk-level-5 { background: linear-gradient(135deg, #9C27B0, #6A1B9A); } /* Hóa Thần - Tím */
.hsk-level-6 { background: linear-gradient(135deg, #607D8B, #37474F); } /* Luyện Hư - Xám Bạc */
.hsk-level-7 { background: linear-gradient(135deg, #FF5722, #BF360C); } /* Đại Thừa */
.hsk-level-8 { background: linear-gradient(135deg, #E91E63, #880E4F); } /* Quái Vật */
.hsk-level-9 { background: linear-gradient(135deg, #FFD700, #FF6F00); color: #333; } /* Thượng Cổ */

/* =========================================
   NÚT GACHA 3D — VÒNG QUAY MAY MẮN
   ========================================= */
.btn-gacha-3d {
  --primary: 255, 90, 120;
  --secondary: 150, 50, 60;
  width: 80px;
  height: 80px;
  border: none;
  outline: 8px solid rgba(var(--primary), .5);
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: .3s;
  background: transparent;
  display: block;
  margin: 0 auto 10px;
}
.btn-gacha-3d:hover {
  outline-width: 12px;
  outline-color: rgba(var(--primary), .7);
}
.btn-gacha-3d .back {
  background: rgb(var(--secondary));
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.btn-gacha-3d .front {
  background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%);
  box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5);
  border-radius: 100%;
  position: absolute;
  border: 1px solid rgb(var(--secondary));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: inherit;
  transform: translateY(-15%);
  transition: .15s;
  color: rgb(var(--secondary));
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-gacha-3d:active .front {
  transform: translateY(0%);
  box-shadow: 0 0;
}
.btn-gacha-3d:disabled {
  outline-color: rgba(100, 100, 100, .3);
  cursor: not-allowed;
}
 
.btn-gacha-3d:disabled .front {
  background: linear-gradient(0deg, rgba(100,100,100,.6) 20%, rgba(100,100,100) 50%);
  color: #666;
}

/* =========================================
   ZERO-JS LOADING DOM MANIPULATION
   ========================================= */
.is-loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.is-loading .front {
  color: transparent !important;
}
.is-loading::after {
  content: "\f110"; /* FontAwesome Spinner Glyph */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, sans-serif;
  font-weight: 900; /* Bắt buộc cho icon Solid */
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  font-size: 1.2em;
  line-height: 1;
  color: #fff;
  z-index: 10;
  animation: spinIcon 1s linear infinite;
}
.btn-outline.is-loading::after {
  color: var(--primary-red, #d32f2f);
}

/* ══════════════════════════════════════════════
   PAGE TRANSITION OVERLAY — Fake SPA (v7.54)
   Che chớp trắng khi full page reload
   ══════════════════════════════════════════════ */

/* Body fade-in khi trang mới paint xong */
@keyframes ytt-page-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: ytt-page-fadein 250ms ease;
}

/* Overlay che trang cũ trước khi navigate */
#ytt-page-overlay {
  position: fixed;
  inset: 0;
  background: #0f0f12;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  will-change: opacity;
}
#ytt-page-overlay.ytt-overlay-in {
  opacity: 1;
  pointer-events: all;
}