/* ═══════════════════════════════════════════════════════════════
   dict-page.css — Tất cả CSS riêng cho trang Từ Điển (tudien.html)
   Tách từ inline <style> block — Sprint 0 Redesign
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg-gray);
  padding-top: 100px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dict-page-container {
  max-width: 1200px;
  margin: 0 auto 50px;
  background: var(--bg-dark);
  border-radius: 15px;
  box-shadow: var(--shadow-card);
  padding: 40px;
  min-height: 70vh;
  color: var(--text-dark);
}
.ex-audio-btn {
  background: none;
  border: none;
  color: #2196f3;
  cursor: pointer;
  font-size: 1.1rem;
  margin-left: 10px;
  transition: 0.2s;
}
.ex-audio-btn:hover {
  color: #d32f2f;
  transform: scale(1.2);
}
.dict-comment-box {
  margin-top: 30px;
  border-top: 2px dashed #eee;
  padding-top: 30px;
}
/* THEME SÁNG HỌC THUẬT CHO BÌNH LUẬN TỪ ĐIỂN */
.dict-cmt-wrapper {
  position: relative;
}
.dict-cmt-list-container {
  max-height: 500px; /* Giới hạn chiều cao 3 bình luận */
  overflow: hidden;
  transition: max-height 0.5s ease;
  position: relative;
  padding-bottom: 20px;
}
.dict-cmt-list-container.expanded {
  max-height: 5000px; /* Mở khóa chiều cao khi bấm Xem tất cả */
}
.dict-cmt-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bg-dark) 90%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dict-cmt-list-container.expanded .dict-cmt-fade {
  opacity: 0;
}

.dict-cmt-item {
  background: var(--bg-gray) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  color: var(--text-dark) !important;
}
.dict-cmt-body {
  background: var(--bg-dark) !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin-top: 10px;
}
.dict-cmt-actions {
  display: flex;
  gap: 15px;
  margin-top: 12px;
  justify-content: flex-end;
  border-top: 1px dashed #eee;
  padding-top: 10px;
}
.dict-action-btn {
  background: none;
  border: none;
  color: #777;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s;
  font-weight: 500;
}
.dict-action-btn:hover {
  color: var(--primary-red);
}
.dict-action-btn.active-like {
  color: #e91e63;
}
.dict-action-btn.active-dislike {
  color: #555;
}
.dict-reply-box {
  background: #f1f3f5;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  border-left: 3px solid #1976d2;
}

/* FIX LỖI TOOLTIP HSK BỊ CẮT VIỀN TRONG TỪ ĐIỂN */
.dict-hsk-tooltip {
  left: auto !important;
  right: -5px !important; /* Ép nảy sát mép phải, dồn về bên trái */
  transform: translateY(10px) !important; /* Đổi hướng nảy */
}
.hsk-mini-btn:hover .dict-hsk-tooltip {
  transform: translateY(0) !important;
}
.dict-hsk-tooltip::after {
  left: auto !important;
  right: 8px !important; /* Dời mũi tên chỉ đúng vào nút HSK */
  transform: none !important;
}

/* ==========================================
   STYLE CHO DROPDOWN GỢI Ý (HIỆN ĐẠI & TU TIÊN)
   ========================================== */
.dict-suggest-box {
  position: absolute;
  top: 100%;
  left: 2.5%;
  width: 95%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border: 2px solid #bbdefb;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  max-height: 350px; /* Giới hạn chiều cao */
  overflow-y: auto; /* Tạo thanh cuộn độc lập */
  z-index: 1000;
  display: none;
  margin-top: 15px;
}
/* Trang trí thanh cuộn (Scrollbar) */
.dict-suggest-box::-webkit-scrollbar {
  width: 6px;
}
.dict-suggest-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  margin: 10px 0;
}
.dict-suggest-box::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #2196f3, #d32f2f);
  border-radius: 10px;
}
/* Giao diện từng dòng gợi ý */
.dict-suggest-item {
  padding: 15px 20px;
  border-bottom: 1px dashed #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}
.dict-suggest-item:last-child {
  border-bottom: none;
}
.dict-suggest-item:hover {
  background: linear-gradient(to right, #e3f2fd, transparent);
  transform: translateX(5px);
  border-left: 4px solid var(--primary-red);
}
.sugg-hz {
  font-size: 1.8rem;
  color: var(--primary-red);
  font-family: "KaiTi", serif;
  font-weight: bold;
  min-width: 50px;
}
.sugg-py {
  font-family: monospace;
  color: #4a148c;
  font-weight: bold;
  font-size: 1.1rem;
  background: #f3e5f5;
  padding: 4px 10px;
  border-radius: 8px;
}
.sugg-vi {
  color: #333;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
/* Huy hiệu đếm lượt tra cứu */
.dict-stat-badge {
  background: linear-gradient(45deg, #ff9800, #f44336);
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(244, 67, 54, 0.3);
}

/* === DICTIONARY 3-COLUMN LAYOUT === */
.dict-3col-layout {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  gap: 30px;
  align-items: start;
}

.dict-sidebar-left {
  position: sticky;
  top: 100px;
  padding-right: 10px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.dict-sidebar-left::-webkit-scrollbar { width: 4px; }
.dict-sidebar-left::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.dict-sidebar-right {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
}

.dict-main-center {
  min-width: 0; /* Anti-overflow in grid */
}

.nav-side-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--bg-gray);
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-side-btn i {
  margin-right: 8px;
  color: var(--primary-red);
}
.nav-side-btn:hover, .nav-side-btn.active {
  background: rgba(211, 47, 47, 0.1);
  color: var(--primary-red);
  border-color: rgba(211, 47, 47, 0.3);
  transform: translateX(5px);
}

.history-badge {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.history-badge:hover {
  border-color: rgba(211, 47, 47, 0.4);
  background: rgba(211, 47, 47, 0.05);
  transform: scale(1.02);
}
.history-badge .hz {
  font-family: "KaiTi", serif;
  font-size: 1.5rem;
  color: var(--primary-red);
  font-weight: bold;
}
.history-badge .info {
  display: flex;
  flex-direction: column;
}
.history-badge .py {
  font-family: monospace;
  color: #4a148c;
  font-size: 0.85rem;
  font-weight: bold;
}
.history-badge .vi {
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

@media (max-width: 900px) {
  body, html {
    overflow-x: hidden;
  }
  .dict-page-container {
    padding: 15px !important;
  }
  /* === DICT PAGE HEADER: Mobile === */
  .dict-page-header {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
  }
  /* Title: revert to inline text so words don't stack */
  .dict-page-title {
    display: block !important;
    font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  .dict-page-title > i.fas { display: none; } /* Ẩn icon language trên mobile */

  /* Dark mode toggle: xếp ngang sau title */
  .dict-page-header .switch {
    transform: scale(0.65) !important;
    margin: -5px 0 0 8px !important;
    vertical-align: middle !important;
  }

  .dict-3col-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    gap: 10px;
  }
  .dict-sidebar-left {
    position: static;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: center !important; /* Fix button vertical stretch */
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: none;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    gap: 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .dict-sidebar-left::-webkit-scrollbar { 
    display: none; 
  }
  .nav-side-btn {
    width: auto;
    flex-shrink: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
    margin-bottom: 0;
    margin-right: 0;
    text-align: center;
    
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    height: max-content !important;
    line-height: 1.2 !important;
    border-radius: 20px !important;
  }
  .nav-side-btn:hover, .nav-side-btn.active {
    transform: translateY(-2px);
  }

  .dict-sidebar-right {
    display: none !important;
  }

  /* =============================================
     NOTEBOOK TAB — RESPONSIVE FIX
     ============================================= */

  /* -- Tablet & Mobile chung (≤ 900px) -- */
  #tab-sotay h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  /* SRS Dashboard: 3 ô thống kê → wrap thông minh */
  #nb-srs-dashboard {
    flex-wrap: wrap !important;
  }
  #nb-srs-dashboard > .srs-stat-card {
    flex: 1 1 calc(50% - 8px) !important;  /* 2 cột trên tablet */
    min-width: 0 !important;
  }
  #nb-srs-dashboard > .srs-stat-card:last-child {
    flex: 1 1 100% !important;  /* Ô cuối chiếm cả hàng */
  }

  /* Topic detail header: Stack dọc trên mobile */
  #nb-view-2-detail > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 15px !important;
  }
  #nb-view-2-detail > div:first-child > div:last-child {
    width: 100%;
  }
  #nb-view-2-detail > div:first-child > div:last-child .btn {
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* Tên chủ đề: cắt ellipsis nếu quá dài */
  #nb-detail-topic-name {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
    word-break: break-word;
  }

  /* SRS Filter buttons: wrap tự nhiên */
  #nb-srs-filters {
    flex-wrap: wrap !important;
  }

  /* Danh sách filter + title: stack dọc */
  #nb-srs-filters ~ h4,
  #nb-view-2-detail div[style*="justify-content:space-between"][style*="flex-wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Topic grid: đảm bảo scroll ngang mượt */
  #nb-topic-grid {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #nb-topic-grid::-webkit-scrollbar {
    display: none;
  }

  /* Nút quay lại SVG: nhỏ hơn trên mobile */
  .notebook-back-svg {
    transform: scale(0.85);
    transform-origin: left center;
  }

  /* =============================================
     TRANSLATION TAB — RESPONSIVE FIX
     ============================================= */

  /* Tiêu đề + mô tả gọn hơn */
  #tab-dich h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
  #tab-dich > p {
    font-size: 0.85rem !important;
  }

  /* Mode toggle: nhỏ hơn trên mobile */
  .translate-mode-btn {
    padding: 7px 16px !important;
    font-size: 0.85rem !important;
  }

  /* Language selector: co giãn thay vì width cố định */
  #sourceLang, #targetLang {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 !important;
    font-size: 0.85rem !important;
  }

  /* Translate panels: stack dọc thay vì 2 cột */
  .translate-panels {
    grid-template-columns: 1fr !important;
  }

  /* Nút dịch: full width */
  #btn-translate-now {
    width: 100% !important;
    max-width: 400px;
  }

  /* History items: stack dọc, hiển thị full nội dung */
  .translate-history-item > div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Cho text hiển thị đầy đủ thay vì cắt ngắn */
  .translate-history-item div[style*="text-overflow: ellipsis"],
  .translate-history-item div[style*="text-overflow:ellipsis"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  /* Thanh phân cách giữa nguồn-kết quả */
  .translate-history-item > div > div:last-child {
    border-top: 1px dashed #eee;
    padding-top: 6px;
  }

  /* History list: tăng max-height cho dễ duyệt */
  #translation-history-list {
    max-height: 400px !important;
  }
}

/* Tweak for dark mode to ensure text is visible */
body.dark-mode, body.dark-mode .dict-page-container {
   background: #1a1a1a !important;
   color: #eee !important;
}
body.dark-mode .dict-suggest-item,
body.dark-mode .dict-cmt-item,
body.dark-mode .dict-cmt-body,
body.dark-mode #ai-translate-result,
body.dark-mode .dict-reply-box,
body.dark-mode .dict-ex-card {
   background: #2a2a2a !important;
   color: #eee !important;
   border-color: #444 !important;
}
body.dark-mode .ex-audio-btn { color: #bbdefb !important; }
body.dark-mode .dict-suggest-box { background: rgba(42, 42, 42, 0.98) !important; border-color: #555 !important; }
body.dark-mode .dict-suggest-item:hover { background: #333 !important; }
body.dark-mode .sugg-vi, body.dark-mode .dict-ex-vi { color: #ddd !important; }
body.dark-mode .dict-ex-zh { color: #eee !important; }
body.dark-mode .dict-ex-py { color: #bbdefb !important; }
body.dark-mode .vip-lock-overlay { background: rgba(0,0,0,0.85) !important; }
/* Dark mode — chip bar */
body.dark-mode .dict-nav-item:not(.active) {
  background: rgba(255,255,255,0.06) !important;
  color: #bbb !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark-mode .dict-nav-item:not(.active):hover {
  background: rgba(211,47,47,0.15) !important;
  color: #ff7070 !important;
}
body.dark-mode .dict-nav-item.active {
  background: var(--primary-red) !important;
  color: white !important;
}
body.dark-mode .dict-action-btn.active-dislike { color: #bbb !important; }
body.dark-mode input, body.dark-mode textarea { background: #222 !important; color: #eee !important; border: 1px solid #444 !important; }
body.dark-mode select { background: #222 !important; color: #eee !important; border: 1px solid #444 !important; }
body.dark-mode #tab-baihoc > div > div { background: #2a2a2a !important; border-color: #444 !important; color: #eee !important; }
body.dark-mode #ai-lesson-result-area { background: #2a2a2a !important; border-color: #444 !important; color: #eee !important; }
body.dark-mode #ai-lesson-result-area * { color: #eee !important; }

/* Overrides for JS inline styles */
body.dark-mode #dict-result-area div[style*="color: #333"],
body.dark-mode #dict-result-area div[style*="color:#333"],
body.dark-mode #dict-result-area div[style*="color: #666"],
body.dark-mode #dict-result-area div[style*="color:#666"],
body.dark-mode #dict-result-area div[style*="color: #444"],
body.dark-mode #dict-result-area div[style*="color:#444"] {
    color: #eee !important;
}
body.dark-mode #dict-result-area div[style*="background: #f5f5f5"],
body.dark-mode #dict-result-area div[style*="background:#f5f5f5"] {
    background: #333 !important;
    color: #ddd !important;
}
body.dark-mode #dict-result-area div[style*="background: #f1f8e9"],
body.dark-mode #dict-result-area div[style*="background:#f1f8e9"] {
    background: #2a2a2a !important;
    color: #eee !important;
}
body.dark-mode #dict-result-area div[style*="background:#fff"],
body.dark-mode #dict-result-area div[style*="background: #fff"] {
    background: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}
body.dark-mode .dict-cmt-fade {
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0), rgba(26, 26, 26, 1) 90%) !important;
}
/* AI Translation Inline CSS Overrides */
body.dark-mode #ai-translate-result * {
    color: #eee !important;
}
body.dark-mode #ai-translate-result div[style*="background:#f3e5f5"],
body.dark-mode #ai-translate-result div[style*="background: #f3e5f5"] {
    background: #3a2a4a !important;
    color: #e1bee7 !important;
}

/* --- SWAG TOGGLE CSS --- */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align: middle;
  margin-left: 15px;
}

.switch #input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196f3;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.sun-moon {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#input:checked + .slider {
  background-color: black;
}

#input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

#input:checked + .slider .sun-moon {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: white;
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

.moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}

#input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.slider.round {
  border-radius: 34px;
}

.slider.round .sun-moon {
  border-radius: 50%;
}

#moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 4;
}

#moon-dot-2 {
  left: 2px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
}

#moon-dot-3 {
  left: 16px;
  top: 18px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

#light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 43px;
  height: 43px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 55px;
  height: 55px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

.cloud-light {
  position: absolute;
  fill: #eee;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.cloud-dark {
  position: absolute;
  fill: #ccc;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

#cloud-1 {
  left: 30px;
  top: 15px;
  width: 40px;
}

#cloud-2 {
  left: 44px;
  top: 10px;
  width: 20px;
}

#cloud-3 {
  left: 18px;
  top: 24px;
  width: 30px;
}

#cloud-4 {
  left: 36px;
  top: 18px;
  width: 40px;
}

#cloud-5 {
  left: 48px;
  top: 14px;
  width: 20px;
}

#cloud-6 {
  left: 22px;
  top: 26px;
  width: 30px;
}

@keyframes cloud-move {
  0% {
    transform: translateX(0px);
  }

  40% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0px);
  }
}

.stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.star {
  fill: white;
  position: absolute;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  animation-name: star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#input:checked + .slider .stars {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

#star-1 {
  width: 20px;
  top: 2px;
  left: 3px;
  animation-delay: 0.3s;
}

#star-2 {
  width: 6px;
  top: 16px;
  left: 3px;
}

#star-3 {
  width: 12px;
  top: 20px;
  left: 10px;
  animation-delay: 0.6s;
}

#star-4 {
  width: 18px;
  top: 0px;
  left: 18px;
  animation-delay: 1.3s;
}

@keyframes star-twinkle {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  80% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

/* --- VIP TABS CSS --- */
/* ── FEATURE NAV: Horizontal Scroll Chip Bar (Duolingo / YouTube style) ── */
.dict-nav-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 8px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE */
}
.dict-nav-menu::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.dict-nav-item {
  flex-shrink: 0;                 /* Không bị co lại */
  scroll-snap-align: start;
  padding: 7px 14px;
  border-radius: 20px;
  color: var(--text-light, #666);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  background: var(--bg-gray, #f1f3f5);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
}
.dict-nav-item i { font-size: 0.8rem; }
.dict-nav-item:hover {
  background: rgba(211, 47, 47, 0.08);
  border-color: rgba(211, 47, 47, 0.3);
  color: var(--primary-red, #d32f2f);
}
.dict-nav-item.active {
  background: var(--primary-red, #d32f2f);
  color: #fff;
  border-color: var(--primary-red, #d32f2f);
  box-shadow: 0 3px 10px rgba(211, 47, 47, 0.35);
}
.dict-nav-item .badge {
  background: linear-gradient(45deg, #ffd700, #ff9800);
  color: #333;
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.vip-tab-content {
  display: none;
  animation: fadeIn 0.4s ease;
}
.vip-tab-content.active {
  display: block;
}
.vip-lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-align: center;
  border-radius: 15px;
  display: none;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.vip-lock-overlay i {
  font-size: 5rem;
  color: #fbc02d;
  margin-bottom: 20px;
  text-shadow: 0 5px 15px rgba(251, 192, 45, 0.4);
}
.vip-lock-overlay h2 {
  color: var(--primary-red);
  margin-bottom: 10px;
}
.dict-settings-menu {
  position: absolute;
  top: 60px;
  right: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 20px;
  width: 300px;
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 15px;
  border: 2px solid #f0f0f0;
  animation: fadeInDown 0.3s ease;
}
.dict-settings-menu.show {
  display: flex;
}
body.dark-mode .dict-settings-menu {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.dict-settings-menu h4 {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.dark-mode .dict-settings-menu h4 {
  color: #ccc;
}

.dict-setting-group {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.dark-mode .dict-setting-group {
  background: #333;
}

.dict-setting-pills {
  display: flex;
  gap: 5px;
  background: #eee;
  padding: 4px;
  border-radius: 20px;
}
body.dark-mode .dict-setting-pills {
  background: #444;
}
.dict-setting-pill {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #666;
  font-weight: bold;
  transition: 0.2s;
}
body.dark-mode .dict-setting-pill {
  color: #aaa;
}
.dict-setting-pill.active {
  background: #fff;
  color: #1565c0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body.dark-mode .dict-setting-pill.active {
  background: #555;
  color: #90caf9;
}

.dict-main-word {
  font-family: 'KaiTi', serif;
}

/* Cute Font Override */
.font-cute, .font-cute :not(.fas):not(.fab):not(.far) {
  font-family: 'ZCOOL KuaiLe', 'Comic Sans MS', cursive !important;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE: Translate panels side-by-side → stacked on mobile */
@media (max-width: 768px) {
  .translate-panels {
    grid-template-columns: 1fr !important;
  }
}

/* Translate icon buttons hover */
.btn-icon-translate:hover {
  color: var(--primary-red) !important;
  background: rgba(211, 47, 47, 0.08) !important;
}

/* Dark mode for new translate elements */
body.dark-mode .translate-mode-btn:not(.active) { color: #bbb !important; }
body.dark-mode #translate-mode-toggle { background: #333 !important; }
body.dark-mode #aiModeLockOverlay { background: rgba(42, 42, 42, 0.95) !important; border-color: #555 !important; }
body.dark-mode #aiModeLockOverlay h3 { color: #ff6b6b !important; }
body.dark-mode #aiModeLockOverlay p { color: #bbb !important; }

/* User Custom Back Button SVG */
.styled-wrapper .button {
  display: block; position: relative; width: 76px; height: 76px; margin: 0;
  overflow: hidden; outline: none; background-color: transparent; cursor: pointer; border: 0;
  transform: scale(0.65); /* scale down slightly since 76px is big */
  transform-origin: left center;
}
.styled-wrapper .button:before {
  content: ""; position: absolute; border-radius: 50%; inset: 7px;
  border: 3px solid var(--primary-dark, black); transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}
body.dark-mode .styled-wrapper .button:before { border-color: #eee; }
.styled-wrapper .button:after {
  content: ""; position: absolute; border-radius: 50%; inset: 7px;
  border: 4px solid var(--primary-red, #d32f2f); transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0;
}
.styled-wrapper .button:hover:before, .styled-wrapper .button:focus:before { opacity: 0; transform: scale(0.7); }
.styled-wrapper .button:hover:after, .styled-wrapper .button:focus:after { opacity: 1; transform: scale(1); }
.styled-wrapper .button-box { display: flex; position: absolute; top: 0; left: 0; }
.styled-wrapper .button-elem {
  display: block; width: 30px; height: 30px; margin: 24px 18px 0 22px;
  transform: rotate(360deg); fill: var(--bg-gray, #f0eeef);
}
body.dark-mode .styled-wrapper .arrow-icon path { fill: #eee; }
.styled-wrapper .button:hover .button-box, .styled-wrapper .button:focus .button-box {
  transition: 0.4s; transform: translateX(-69px);
}

/* History Delete Button & Smart Scroll */
.dict-history-delete-btn { color: #999; }
.dict-history-delete-btn:hover { color: #fff; }
#dict-recent-history::-webkit-scrollbar { width: 4px; }
#dict-recent-history::-webkit-scrollbar-track { background: transparent; }
#dict-recent-history::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
#dict-recent-history::-webkit-scrollbar-thumb:hover { background: #aaa; }
body.dark-mode .dict-history-delete-btn { color: #666; }
body.dark-mode .dict-history-delete-btn:hover { color: #fff; }

/* ═══════════════════════════════════════════════
   🌟 WORD OF THE DAY
   ═══════════════════════════════════════════════ */
.wotd-card { margin-bottom: 20px; }
.wotd-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-red) 8%, transparent), rgba(255,152,0,0.08));
  border: 1px solid color-mix(in srgb, var(--primary-red) 20%, transparent);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(15px);
}
.wotd-inner.show {
  opacity: 1;
  transform: translateY(0);
}
.wotd-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-red) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary-red) 40%, transparent);
}
.wotd-label {
  font-size: 0.85rem;
  color: #ff9800;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.wotd-hanzi {
  font-family: 'KaiTi', serif;
  font-size: 3rem;
  color: var(--primary-red);
  font-weight: bold;
  line-height: 1.2;
}
.wotd-pinyin {
  font-family: monospace;
  font-size: 1.1rem;
  color: #4a148c;
  margin-top: 5px;
}
.wotd-hanviet {
  color: #888;
  font-size: 0.9rem;
  margin-top: 3px;
}
.wotd-hsk {
  display: inline-block;
  background: linear-gradient(45deg, #ff9800, #f44336);
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 8px;
}
.wotd-tip {
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 10px;
}
body.dark-mode .wotd-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-red) 12%, transparent), rgba(255,152,0,0.06));
}
body.dark-mode .wotd-pinyin { color: #ce93d8; }

/* ═══════════════════════════════════════════════
   📖 TEXT ANALYZER
   ═══════════════════════════════════════════════ */
.analyzer-textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 1.1rem;
  resize: vertical;
  background: var(--bg-gray);
  color: var(--text-dark);
  font-family: 'KaiTi', 'Noto Sans SC', sans-serif;
  transition: border-color 0.2s;
}
.analyzer-textarea:focus {
  outline: none;
  border-color: var(--primary-red);
}
.analyzer-tokens {
  line-height: 2.4;
  font-size: 1.3rem;
  padding: 20px;
  background: var(--bg-gray);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.token-word {
  font-family: 'KaiTi', serif;
  color: var(--primary-red);
  padding: 3px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}
.token-word:hover {
  background: rgba(211,47,47,0.1);
  border-bottom-color: var(--primary-red);
}
.token-unknown {
  font-family: 'KaiTi', serif;
  color: #ff9800;
  text-decoration: underline wavy #ff980055;
}
.token-punct {
  color: #999;
}
.token-tooltip {
  position: fixed;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  display: none;
  backdrop-filter: blur(5px);
}
.tt-hsk {
  background: linear-gradient(45deg, #ff9800, #f44336);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: bold;
}
.analyzer-stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  padding: 12px 15px;
  background: rgba(76,175,80,0.08);
  border-radius: 10px;
  font-size: 0.9rem;
  color: #666;
  flex-wrap: wrap;
}
body.dark-mode .analyzer-stats { color: #aaa; background: rgba(76,175,80,0.05); }

/* ═══════════════════════════════════════════════
   📊 HSK PROGRESS
   ═══════════════════════════════════════════════ */
.hsk-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.hsk-prog-card {
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.hsk-prog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.15);
}
.hsk-prog-card:active { transform: translateY(0); }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.hsk-prog-level {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.hsk-prog-bar-bg {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.hsk-prog-bar-bg.big { height: 12px; margin-top: 8px; }
body.dark-mode .hsk-prog-bar-bg { background: #444; }
.hsk-prog-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}
.hsk-prog-stats {
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
}
.hsk-prog-stats span { font-weight: bold; }
.hsk-prog-total {
  margin-top: 20px;
  padding: 15px;
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* ═══════════════════════════════════════════════
   📋 CLIPBOARD BUTTON + TOAST
   ═══════════════════════════════════════════════ */
.clipboard-fab {
  position: fixed;
  bottom: 90px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1976d2, #2196f3);
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(33,150,243,0.4);
  z-index: 999;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clipboard-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(33,150,243,0.5);
}
.clipboard-toast {
  position: fixed;
  bottom: 150px;
  left: 20px;
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.clipboard-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   💡 MẸO GHI NHỚ WIDGET (cột trái từ điển)
   ═══════════════════════════════════════════════ */
.ytt-tips-widget {
  margin-top: 12px;
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.ytt-tips-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px 5px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--primary-red);
  border-bottom: 1px solid var(--border-color);
}
.ytt-tips-shuffle {
  background: none; border: none; cursor: pointer;
  color: var(--primary-red); font-size: 1rem; line-height: 1;
  padding: 2px 5px; border-radius: 6px; transition: background 0.15s;
}
.ytt-tips-shuffle:hover { background: color-mix(in srgb, var(--primary-red) 15%, transparent); }
.ytt-tips-filter {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
}
.ytt-tips-cat {
  background: none; border: 1px solid var(--border-color);
  border-radius: 10px; font-size: 0.65rem; padding: 2px 6px;
  cursor: pointer; color: var(--text-light); transition: all 0.15s;
  line-height: 1.4;
}
.ytt-tips-cat.active, .ytt-tips-cat:hover {
  background: var(--primary-red); border-color: var(--primary-red); color: #fff;
}
.ytt-tips-list {
  padding: 6px; display: flex; flex-direction: column; gap: 5px;
  max-height: 340px; overflow-y: auto;
}
.ytt-tips-list::-webkit-scrollbar { width: 3px; }
.ytt-tips-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.ytt-tip-card {
  background: var(--bg-dark); border-radius: 8px;
  padding: 7px 9px; border: 1px solid var(--border-color);
  transition: border-color 0.15s;
}
.ytt-tip-card:hover { border-color: color-mix(in srgb, var(--primary-red) 40%, transparent); }
.ytt-tip-meta {
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
}
.ytt-tip-num { font-weight: 700; font-size: 0.75rem; color: var(--primary-red); min-width: 16px; }
.ytt-tip-cat { font-weight: 600; font-size: 0.7rem; color: var(--text-dark); flex: 1; }
.ytt-tip-level {
  font-size: 0.6rem; font-weight: 600; border-radius: 8px;
  padding: 1px 5px; white-space: nowrap;
}
.ytt-lvl-so  { color: #4caf50; background: rgba(76,175,80,0.14); }
.ytt-lvl-trung { color: #ff9800; background: rgba(255,152,0,0.14); }
.ytt-lvl-cao { color: #f44336; background: rgba(244,67,54,0.14); }
.ytt-tip-text { font-size: 0.73rem; color: var(--text-light); line-height: 1.45; }


/* ══ AI LESSON TAB: Accordion + Topic Cards ══ */

              /* V8: Accordion Topic Grid */
              .ai-chip {
                  display: inline-flex;
                  align-items: center;
                  padding: 5px 12px;
                  font-size: 0.85rem;
                  border-radius: 20px;
                  background-color: var(--box-bg-light, #f1f3f4);
                  color: var(--text-color, #333);
                  border: 1px solid var(--border-color, #ddd);
                  cursor: pointer;
                  transition: all 0.2s ease;
                  user-select: none;
              }
              .ai-chip:hover {
                  background-color: var(--primary-red, #dc3545);
                  color: white;
                  border-color: var(--primary-red, #dc3545);
              }
              .ai-chip i { margin-right: 6px; color: #ff9800; }
              .ai-chip:hover i { color: white; }
              body.dark-mode .ai-chip { background-color: #333; color: #eee; border-color: #555; }
              body.dark-mode .ai-chip:hover { background-color: var(--primary-red); color: white; border-color: var(--primary-red); }
              .ai-accordion-header {
                  display: flex; justify-content: space-between; align-items: center;
                  padding: 10px 14px; cursor: pointer; border-radius: 10px;
                  background: var(--bg-gray, #f5f5f5); border: 1px solid var(--border-color, #e0e0e0);
                  margin-bottom: 6px; transition: all 0.2s ease; user-select: none;
              }
              .ai-accordion-header:hover { border-color: var(--primary-red); }
              .ai-accordion-header .ai-acc-arrow { transition: transform 0.3s ease; font-size: 0.8rem; color: #999; }
              .ai-accordion-header.open .ai-acc-arrow { transform: rotate(180deg); }
              .ai-accordion-body { display: none; padding: 8px 4px 12px 4px; }
              .ai-accordion-body.open { display: flex; flex-wrap: wrap; gap: 8px; animation: fadeIn 0.3s ease; }
              body.dark-mode .ai-accordion-header { background: #2a2a2a; border-color: #444; }
              .ai-history-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color, #ddd); background: var(--bg-gray, #f5f5f5); color: var(--text-color, #666); font-size: 0.85rem; cursor: pointer; transition: 0.2s; }
              .ai-history-btn:hover { border-color: var(--primary-red); color: var(--primary-red); }
              body.dark-mode .ai-history-btn { background: #2a2a2a; border-color: #444; color: #ccc; }
              .ai-history-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--bg-dark, #fff); border: 1px solid var(--border-color, #ddd); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 100; max-height: 250px; overflow-y: auto; width: 280px; padding: 8px 0; }
              .ai-history-dropdown.open { display: block; animation: fadeIn 0.2s ease; }
              .ai-history-item { padding: 10px 16px; cursor: pointer; transition: 0.15s; font-size: 0.9rem; color: var(--text-color); border-bottom: 1px solid var(--border-color, #eee); }
              .ai-history-item:last-child { border-bottom: none; }
              .ai-history-item:hover { background: rgba(211,47,47,0.08); }
              body.dark-mode .ai-history-dropdown { background: #1e1e1e; border-color: #444; }

              /* [v7.68] Bài học của tôi — Card Grid */
              #ai-user-topics-body.open {
                  display: block;
                  padding: 10px 4px 14px 4px;
              }
              #ai-topic-cards-grid {
                  display: grid;
                  grid-template-columns: repeat(2, 1fr);
                  gap: 10px;
                  margin-top: 8px;
              }
              @media (min-width: 640px) {
                  #ai-topic-cards-grid { grid-template-columns: repeat(3, 1fr); }
              }
              .ai-topic-card {
                  position: relative;
                  background: var(--bg-dark, #fff);
                  border: 1px solid var(--border-color, #e0e0e0);
                  border-radius: 12px;
                  padding: 12px 10px 10px;
                  cursor: pointer;
                  transition: transform 0.2s ease, box-shadow 0.2s ease;
                  display: flex;
                  flex-direction: column;
                  gap: 6px;
              }
              .ai-topic-card:hover {
                  transform: scale(1.02);
                  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
              }
              body.dark-mode .ai-topic-card { background: #1e1e24; border-color: #333; }
              body.dark-mode .ai-topic-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
              /* Nút ✕ xóa từng card */
              .ai-topic-card-del {
                  position: absolute; top: 6px; right: 6px;
                  width: 20px; height: 20px; padding: 0;
                  border: none; border-radius: 50%;
                  background: rgba(0,0,0,0.08);
                  color: #999; font-size: 0.7rem; line-height: 20px;
                  text-align: center; cursor: pointer;
                  transition: background 0.15s, color 0.15s;
                  display: flex; align-items: center; justify-content: center;
              }
              .ai-topic-card-del:hover { background: #ffebee; color: #c62828; }
              body.dark-mode .ai-topic-card-del { background: rgba(255,255,255,0.08); color: #777; }
              body.dark-mode .ai-topic-card-del:hover { background: #3e0000; color: #ef9a9a; }
              .ai-topic-card-icon { font-size: 1.5rem; text-align: center; line-height: 1; }
              .ai-topic-card-title {
                  font-size: 0.82rem; font-weight: 600;
                  color: var(--text-dark, #333);
                  text-align: center; line-height: 1.3;
                  overflow: hidden; display: -webkit-box;
                  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              }
              body.dark-mode .ai-topic-card-title { color: #e0e0e0; }
              .ai-topic-card-meta {
                  display: flex; justify-content: space-between;
                  align-items: center; flex-wrap: wrap; gap: 3px;
              }
              .ai-topic-card-level {
                  display: inline-block; font-size: 0.7rem;
                  font-weight: bold; padding: 2px 7px; border-radius: 10px;
              }
              .ai-tc-hsk12 { background: #e8f5e9; color: #2e7d32; }
              .ai-tc-hsk34 { background: #fff8e1; color: #e65100; }
              .ai-tc-hsk56 { background: #ffebee; color: #c62828; }
              body.dark-mode .ai-tc-hsk12 { background: #1b3a1d; color: #81c784; }
              body.dark-mode .ai-tc-hsk34 { background: #3e2600; color: #ffb74d; }
              body.dark-mode .ai-tc-hsk56 { background: #3e0000; color: #ef9a9a; }
              .ai-topic-card-date { font-size: 0.7rem; color: #aaa; }
              .ai-topic-card-open {
                  margin-top: 4px; padding: 5px 0; width: 100%;
                  border: none; border-radius: 8px;
                  background: var(--primary-red, #d32f2f);
                  color: white; font-size: 0.78rem; font-weight: bold;
                  cursor: pointer; transition: opacity 0.2s;
              }
              .ai-topic-card-open:hover { opacity: 0.82; }
              .ai-user-topics-empty {
                  text-align: center; padding: 20px 10px;
                  color: #aaa; font-size: 0.88rem; line-height: 1.7;
              }
              .ai-user-topics-empty span { font-size: 0.8rem; color: #bbb; }
              /* Thanh tìm kiếm */
              .ai-topic-search {
                  width: 100%; box-sizing: border-box;
                  padding: 7px 12px; border-radius: 20px;
                  border: 1px solid var(--border-color, #ddd);
                  background: var(--bg-gray, #f5f5f5);
                  color: var(--text-dark, #333);
                  font-size: 0.85rem; outline: none; transition: border-color 0.2s;
              }
              .ai-topic-search:focus { border-color: var(--primary-red, #d32f2f); }
              body.dark-mode .ai-topic-search { background: #2a2a2a; border-color: #444; color: #eee; }
              /* Counter */
              #ai-topics-counter { font-size: 0.72rem; color: #aaa; font-weight: normal; }

/* ══ DARK MODE OVERRIDES + MODAL CSS ══ */

/* ══════════════════════════════════════════════════
   CHẾ ĐỘ TỐI (DARK MODE) — Inline Style Overrides
   Ít nhất phải !important để ghi đè inline style
   ══════════════════════════════════════════════════ */

/* --- SRS STAT CARDS (Sổ tay) --- */
body.dark-mode .srs-stat-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: #333 !important;
}
body.dark-mode .srs-stat-card div[style*="color:#2e7d32"],
body.dark-mode .srs-stat-card div[style*="color:#1b5e20"] {
  color: #66bb6a !important;
}
body.dark-mode .srs-stat-card div[style*="color:#f57f17"],
body.dark-mode .srs-stat-card div[style*="color:#e65100"] {
  color: #ffa726 !important;
}
body.dark-mode .srs-stat-card div[style*="color:#c62828"],
body.dark-mode .srs-stat-card div[style*="color:#b71c1c"] {
  color: #ef5350 !important;
}

/* --- NOTEBOOK: Topic Detail Header --- */
body.dark-mode #nb-view-2-detail > div[style*="background: #fff3f4"] {
  background: rgba(211, 47, 47, 0.08) !important;
  border-color: var(--primary-red) !important;
}

/* --- NOTEBOOK: Vocab List Items (sinh bởi JS) --- */
body.dark-mode #nb-item-list > div {
  background: rgba(255,255,255,0.03) !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}

/* --- AI LESSON TAB: Left Panel --- */
body.dark-mode #tab-baihoc > div > div[style*="background: #f9f9f9"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
}

/* --- AI LESSON: AI Chips --- */
body.dark-mode .ai-chip {
  background-color: #1e1e26 !important;
  color: #ccc !important;
  border-color: #444 !important;
}
body.dark-mode .ai-chip:hover {
  background-color: var(--primary-red) !important;
  color: white !important;
  border-color: var(--primary-red) !important;
}

/* --- TRANSLATION TAB --- */
body.dark-mode #ai-translate-result {
  background: #1a1a22 !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}
body.dark-mode .translate-result-wrapper {
  color: var(--text-dark) !important;
}
body.dark-mode .btn-icon-translate {
  color: #888 !important;
}

/* --- VIP TABS: general fix for white text containers --- */
body.dark-mode .vip-tab-content h2,
body.dark-mode .vip-tab-content h3,
body.dark-mode .vip-tab-content h4,
body.dark-mode .vip-tab-content label {
  color: var(--text-dark) !important;
}
body.dark-mode .vip-tab-content p {
  color: var(--text-light) !important;
}

/* --- THI THỬ: Test Cards --- */
body.dark-mode #tab-thithu div[style*="background: white"],
body.dark-mode #tab-thithu div[style*="background:#fafafa"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
}
body.dark-mode #tab-thithu div[style*="color: #666"] {
  color: #aaa !important;
}
body.dark-mode #tab-thithu div[style*="color: #333"],
body.dark-mode #tab-thithu h3[style*="color: #333"],
body.dark-mode #tab-thithu div[style*="color:#333"] {
  color: var(--text-dark) !important;
}
body.dark-mode #tab-thithu ul {
  color: var(--text-light) !important;
}

/* --- SETTINGS MODAL --- */
body.dark-mode .dict-settings-sheet {
  background: #1a1a22 !important;
}
body.dark-mode .dict-settings-sheet > div[style*="background: var(--bg-dark)"] {
  background: #0f0f12 !important;
}

/* --- MODALS: Quick Create / Delete Topic --- */
body.dark-mode #quickCreateTopicModal .modal-content,
body.dark-mode #deleteTopicModal .modal-content {
  background: #1e1e26 !important;
  color: var(--text-dark) !important;
}
body.dark-mode #quickCreateTopicModal .modal-content h3,
body.dark-mode #deleteTopicModal .modal-content h3 {
  color: var(--primary-red) !important;
}
body.dark-mode #quickCreateTopicModal .modal-content p,
body.dark-mode #deleteTopicModal .modal-content p {
  color: var(--text-light) !important;
}

/* --- VIP LOCK OVERLAY --- */
body.dark-mode #vipLockOverlay {
  background: rgba(30, 30, 38, 0.95) !important;
}
body.dark-mode #vipLockOverlay p {
  color: #999 !important;
}

/* --- NOTEBOOK: SRS Filter Buttons --- */
body.dark-mode #nb-srs-filters .btn-outline {
  background: #1e1e26 !important;
  color: var(--text-light) !important;
  border-color: #444 !important;
}

/* --- AI Explain Sidebar --- */
body.dark-mode #aiExplainSidebar {
  background: rgba(20, 20, 28, 0.95) !important;
}
body.dark-mode #aiExplainContent {
  color: var(--text-dark) !important;
}

/* --- ĐƯỜNG SPLIT (Divaders / borders) --- */
body.dark-mode .vip-tab-content div[style*="border-bottom: 1px dashed #ddd"],
body.dark-mode .vip-tab-content div[style*="border-top: 1px dashed #ddd"] {
  border-color: #333 !important;
}

/* --- PILL BUTTON (Settings) Dark Mode --- */
body.dark-mode .pill-btn {
  background: #1a1a22;
  border-color: #3a3a4a;
  color: var(--text-dark);
}
body.dark-mode .pill-btn:hover {
  background: #22222c;
}

/* --- NOTEBOOK: Topic Cards (JS-generated inline bg:#fff) --- */
body.dark-mode #nb-topic-grid > div {
  background: #1a1a22 !important;
  border-color: #333 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
body.dark-mode #nb-topic-grid > div h4 {
  color: var(--text-dark) !important;
}
body.dark-mode #nb-topic-grid > div p,
body.dark-mode #nb-topic-grid > div span,
body.dark-mode #nb-topic-grid > div .progress-info {
  color: #aaa !important;
}
body.dark-mode #nb-topic-grid > div .progress-info span[style*="color: #4caf50"] {
  color: #66bb6a !important;
}
body.dark-mode #nb-topic-grid > div .progress-bar-bg {
  background: #333 !important;
}
/* Badge trong topic card */
body.dark-mode #nb-topic-grid > div > div[style*="background: #f3e5f5"] {
  background: rgba(123, 31, 162, 0.2) !important;
}
body.dark-mode #nb-topic-grid > div > div[style*="background: #e3f2fd"] {
  background: rgba(21, 101, 192, 0.2) !important;
}

/* --- NOTEBOOK: Empty State --- */
body.dark-mode #nb-topic-grid > div[style*="background:#fff"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
}

/* --- NOTEBOOK: VIP Preset Vocab Cards --- */
body.dark-mode #nb-view-1-list > div > div[style*="background:#fdfcf0"],
body.dark-mode div[style*="background:#fdfcf0"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
}
body.dark-mode div[style*="background:#fdfcf0"] h4 {
  color: var(--text-dark) !important;
}

/* --- THI THỬ: ALL cards and sidebars — broader selectors --- */
body.dark-mode #tab-thithu div[style*="background: white"],
body.dark-mode #tab-thithu div[style*="background:#fafafa"],
body.dark-mode #tab-thithu div[style*="background:white"],
body.dark-mode #tab-thithu div[style*="background: #fafafa"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
  color: var(--text-dark) !important;
}
body.dark-mode #tab-thithu h3 {
  color: var(--text-dark) !important;
}
body.dark-mode #tab-thithu p {
  color: var(--text-light) !important;
}
body.dark-mode #tab-thithu span[style*="background: #eee"],
body.dark-mode #tab-thithu span[style*="background:#eee"] {
  background: #2a2a32 !important;
  color: #aaa !important;
}
body.dark-mode #tab-thithu div[style*="font-weight:bold"] {
  color: var(--text-dark) !important;
}
/* Test button giữ nguyên màu gradient */
body.dark-mode #tab-thithu .btn-red {
  color: white !important;
}
/* Avatar placeholders */
body.dark-mode #tab-thithu div[style*="background:#eee"] {
  background: #2a2a32 !important;
}
/* Leaderboard names */
body.dark-mode #tab-thithu div[style*="color:#444"],
body.dark-mode #tab-thithu div[style*="color:#333"] {
  color: var(--text-dark) !important;
}
/* HSK Level Buttons (background: white inline trên button) */
body.dark-mode #tab-thithu button[style*="background: white"],
body.dark-mode #tab-thithu button[style*="background:white"] {
  background: #1a1a22 !important;
  border-color: #444 !important;
  color: var(--text-light) !important;
}
/* Mẹo thi sidebar HSK chips */
body.dark-mode #tab-thithu span[style*="background: var(--primary-dark)"] {
  background: var(--primary-red) !important;
}
/* Vinh danh tuần → background white */
body.dark-mode #tab-thithu div[style*="background:#fff8e1"] {
  background: rgba(255, 202, 40, 0.08) !important;
  border-color: #444 !important;
}

/* --- TỔNG QUÁT: Override mọi background white/fafafa inline --- */
body.dark-mode .vip-tab-content div[style*="background: white"],
body.dark-mode .vip-tab-content div[style*="background:#fff"],
body.dark-mode .vip-tab-content div[style*="background: #fff"],
body.dark-mode .vip-tab-content div[style*="background: #fafafa"],
body.dark-mode .vip-tab-content div[style*="background:#fafafa"],
body.dark-mode .vip-tab-content div[style*="background:white"] {
  background: #1a1a22 !important;
  border-color: #333 !important;
}

/* ══ MODAL NỀN ══ */
.ytt-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 9999;
  align-items: center; justify-content: center;
}
.ytt-modal-overlay.open { display: flex; }
.ytt-modal-box {
  background: var(--bg-dark, #1a1a2e); border: 1px solid var(--border-color, #333);
  border-radius: 16px; padding: 20px; width: min(92vw, 420px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  position: relative; animation: yttModalIn 0.2s ease;
}
@keyframes yttModalIn { from { opacity:0; transform:scale(0.93); } to { opacity:1; transform:scale(1); } }
.ytt-modal-box h3 {
  margin: 0 0 14px; font-size: 1rem; color: var(--text-dark, #eee);
  display: flex; align-items: center; gap: 8px;
}
.ytt-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.3rem;
  color: var(--text-muted, #888); cursor: pointer; line-height: 1;
}
.ytt-modal-close:hover { color: var(--text-dark, #eee); }

/* ══ MODAL VẼ NÉT ══ */
#draw-canvas {
  display: block; width: 100%; aspect-ratio: 1;
  border-radius: 10px; background: #fff; cursor: crosshair;
  touch-action: none;
}
body.dark-mode #draw-canvas { background: #1e1e2e; }
.draw-controls { display: flex; gap: 8px; margin-top: 12px; }
.draw-controls button {
  flex: 1; padding: 8px 0; border-radius: 8px; border: 1px solid var(--border-color, #333);
  background: var(--bg-card, #252540); color: var(--text-dark, #eee);
  cursor: pointer; font-size: 0.85rem; transition: background 0.2s;
}
.draw-controls button:hover { background: var(--border-color, #333); }
.draw-controls .draw-recognize {
  background: var(--primary-red, #d32f2f); border-color: transparent; color: #fff;
}
.draw-controls .draw-recognize:hover { background: var(--dark-red, #b71c1c); }
.draw-results { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.draw-result-char {
  width: 40px; height: 40px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--bg-card, #252540); border: 1px solid var(--border-color, #444);
  cursor: pointer; transition: all 0.15s;
}
.draw-result-char:hover {
  background: color-mix(in srgb, var(--primary-red, #d32f2f) 15%, transparent);
  border-color: var(--primary-red, #d32f2f); color: var(--primary-red, #d32f2f);
}

/* ══ MODAL BỘ THỦ ══ */
.radical-stroke-group { margin-bottom: 14px; }
.radical-stroke-label {
  font-size: 0.72rem; color: var(--text-muted, #888);
  margin-bottom: 6px; font-weight: 600; letter-spacing: 0.05em;
}
.radical-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.radical-btn {
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border-color, #444);
  background: var(--bg-card, #252540); color: var(--text-dark, #eee);
  cursor: pointer; font-size: 1.1rem; transition: all 0.15s; line-height: 1;
}
.radical-btn:hover {
  background: color-mix(in srgb, var(--primary-red, #d32f2f) 15%, transparent);
  border-color: var(--primary-red, #d32f2f); color: var(--primary-red, #d32f2f);
}
#radical-modal .ytt-modal-box { width: min(92vw, 560px); max-height: 80vh; overflow-y: auto; }
#radical-modal .ytt-modal-box::-webkit-scrollbar { width: 5px; }
#radical-modal .ytt-modal-box::-webkit-scrollbar-thumb { background: var(--border-color, #333); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   BENTO GRID HOMEPAGE — State 1 (trước khi search)
   ═══════════════════════════════════════════════════════════════ */
.dhome { animation: fadeIn 0.4s ease; }
.dhome-row { display: grid; gap: 12px; margin-bottom: 12px; }
.dhome-r-21 { grid-template-columns: 1.45fr 1fr; }
.dhome-r-11 { grid-template-columns: 1fr 1fr; }

.dhome-card {
  background: var(--bg-gray, #14141c);
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.dhome-ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dhome-ct {
  font-size: 0.78rem;
  color: var(--text-light, #7a7a86);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dhome-sub { font-size: 0.68rem; color: var(--text-light, #7a7a86); }

/* WOTD slot — xóa margin/padding mặc định của wotd-card khi nằm trong bento */
.dhome-wotd-slot { padding: 0; }
.dhome-wotd-slot .wotd-card { margin-bottom: 0; }
.dhome-wotd-slot .wotd-inner {
  border-radius: 14px;
  border: none;
  height: 100%;
}

/* Streak */
.dhome-streak-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.dhome-streak-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ff7043;
  line-height: 1;
}
.dhome-streak-lbl {
  font-size: 0.72rem;
  color: var(--text-light, #8a8a96);
  margin-bottom: 6px;
  line-height: 1.3;
}
.dhome-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 6px;
}
.dhome-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
}
.dhome-cell.on { background: var(--primary-red, #e53935); }
.dhome-cell.tod { background: #ff7043; box-shadow: 0 0 0 1.5px #ff7043; }

/* Tips card — override widget style khi trong bento */
.dhome-card .ytt-tips-widget {
  border: none;
  background: transparent;
  margin-top: 0;
}
.dhome-card .ytt-tips-header { padding-left: 0; padding-right: 0; }

/* Tra gần đây */
.dhome-recent {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dhome-rpill {
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color, rgba(255,255,255,0.05));
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-dark, #d0d0da);
  cursor: pointer;
  transition: all 0.2s;
}
.dhome-rpill:hover {
  border-color: var(--primary-red);
  background: rgba(211,47,47,0.08);
}
.dhome-rpill-hz {
  color: var(--primary-red, #ff9c8a);
  margin-right: 5px;
  font-weight: 500;
}
.dhome-empty {
  color: var(--text-light, #7a7a86);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
}

/* Promo banner */
.dhome-promo {
  background: rgba(211,47,47,0.06);
  border: 1px solid rgba(229,57,53,0.25);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.dhome-promo-l { flex: 1; }
.dhome-promo-tag {
  display: inline-block;
  background: var(--primary-red, #e53935);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}
.dhome-promo-h {
  font-size: 0.95rem;
  color: var(--text-dark, #fff);
  font-weight: 600;
  margin-bottom: 3px;
}
.dhome-promo-s {
  font-size: 0.72rem;
  color: var(--text-light, #a8a8b4);
}
.dhome-promo-btn {
  background: #ff7043;
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
}
.dhome-promo-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════
   Sprint 4: Hero Card v2 — căn giữa, italic pinyin, Share
   ═══════════════════════════════════════════════ */
.dict-hero-v2 {
  position: relative;
  text-align: center;
  padding: 28px 20px 20px;
}
.dict-hero-quick {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.dict-hero-word {
  font-size: 4.5rem;
  color: var(--primary-red);
  line-height: 1.15;
  margin-bottom: 2px;
}
.dict-hero-word .dict-word-row {
  justify-content: center;
}
.dict-hero-word .dict-word-trad-row {
  font-size: 0.55em;
  opacity: 0.7;
}
.dict-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dict-hero-pinyin {
  font-size: 1.4rem;
  color: var(--dict-particle, #ab47bc);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.dict-hero-hanviet {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
  opacity: 0.8;
}
.dict-hero-v2 .dict-word-card__badges {
  justify-content: center;
}
.dict-hero-v2 .dict-action-bar {
  justify-content: center;
  flex-wrap: wrap;
}
.dict-action-chip--share {
  color: #64b5f6;
  border-color: rgba(100,181,246,0.2);
}
.dict-action-chip--share::before {
  background: radial-gradient(circle at center, rgba(100,181,246,0.12), transparent 70%);
}
.dict-action-chip--share:hover {
  color: #90caf9;
  border-color: rgba(100,181,246,0.4);
  background: rgba(100,181,246,0.08);
  box-shadow: 0 4px 16px rgba(100,181,246,0.15);
}
@media (max-width: 600px) {
  .dict-hero-word { font-size: 3.4rem; }
  .dict-hero-pinyin { font-size: 1.2rem; }
  .dict-hero-quick { top: 10px; right: 10px; }
}

/* ═══════════════════════════════════════════════
   Sprint 5: Content Section Restyling — Dark Mode
   ═══════════════════════════════════════════════ */

/* Meaning block — card nhẹ bọc phần nghĩa */
.dict-meaning-block {
  background: rgba(255,255,255,0.015);
  border-radius: 12px !important;
  padding: 18px 18px 8px !important;
  margin-top: 22px !important;
  border-left-width: 4px !important;
  transition: background 0.2s;
}
.dict-meaning-block:hover {
  background: rgba(255,255,255,0.03);
}

/* Pos badge — hiện đại hơn */
.dict-pos-badge {
  font-size: 0.95rem !important;
  padding: 5px 16px !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Meaning entry */
.dict-meaning-entry {
  margin-bottom: 22px !important;
}
.dict-meaning-vi {
  font-size: 1.15rem !important;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.dict-meaning-vi .dict-icon {
  margin-right: 6px;
  opacity: 0.7;
  font-size: 0.9em;
}

/* Explain box — subtle card */
.dict-explain-box {
  border-radius: 8px !important;
  border-left: 3px solid rgba(255,193,7,0.4) !important;
  background: rgba(255,193,7,0.04) !important;
  padding: 10px 14px !important;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Example card — dark glass */
.dict-ex-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s, background 0.2s;
}
.dict-ex-card:hover {
  background: rgba(255,255,255,0.04) !important;
  border-left-color: var(--primary-red) !important;
}
.dict-ex-zh {
  font-size: 1.08rem !important;
  line-height: 1.6;
  margin-bottom: 4px;
}
.dict-ex-py {
  font-style: italic;
  opacity: 0.85;
  font-size: 0.92rem;
}
.dict-ex-vi {
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.8;
  margin-top: 2px;
}

/* "Xem thêm" button — modern */
.btn-read-more {
  background: transparent !important;
  color: var(--primary-red) !important;
  border: 1px solid rgba(211,47,47,0.25) !important;
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
}
.btn-read-more:hover {
  background: rgba(211,47,47,0.08) !important;
  border-color: rgba(211,47,47,0.5) !important;
  transform: translateY(-1px);
}

/* Body section wrapper */
.dict-body-section {
  margin-top: 24px !important;
}

/* Polyphone section — tinh tế hơn */
.dict-polyphone-section {
  background: rgba(156, 39, 176, 0.03) !important;
  border: 1px solid rgba(156, 39, 176, 0.12) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}

/* Relations row */
.dict-relations-row {
  margin-top: 24px !important;
  gap: 20px !important;
}

/* Section title — đỏ chủ đạo */
body.dark-mode .dict-section-title {
  border-left-color: var(--primary-red) !important;
  color: var(--text-dark) !important;
  font-size: 1.15rem;
  padding-left: 12px;
}

/* Comment box — card style */
.dict-comment-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  margin-top: 24px;
}

/* Mobile: Sprint 5 */
@media (max-width: 600px) {
  .dict-meaning-block { padding: 14px 14px 6px !important; }
  .dict-relations-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .dict-relations-row > div {
    min-width: 0 !important;
  }
}

/* ── State 1: Homepage mode — ẩn sidebars, center full-width ── */
.dict-3col-layout.dhome-active {
  grid-template-columns: 1fr;
}
.dict-3col-layout.dhome-active .dict-sidebar-left,
.dict-3col-layout.dhome-active .dict-sidebar-right {
  display: none !important;
}

/* ── Responsive: Bento → Stack dọc trên mobile ── */
@media (max-width: 768px) {
  .dhome-r-21,
  .dhome-r-11 { grid-template-columns: 1fr; }
  .dhome-streak-num { font-size: 2rem; }
  .dhome-promo { flex-direction: column; text-align: center; gap: 10px; }
}

/* ═══════════════════════════════════════════════
   Sprint 6: Mobile Polish
   ═══════════════════════════════════════════════ */

/* ── Phone ≤520px ── */
@media (max-width: 520px) {
  /* Hero card v2 */
  .dict-hero-word { font-size: 3rem; }
  .dict-hero-pinyin { font-size: 1.1rem; }
  .dict-hero-hanviet { font-size: 0.8rem; }
  .dict-hero-quick { top: 8px; right: 8px; gap: 6px; }
  .dict-hero-quick .dict-icon-btn { width: 36px; height: 36px; font-size: 14px; }
  .dict-hero-v2 { padding: 14px 12px 14px; }
  .dict-hero-v2 .dict-word-card__badges { gap: 6px; font-size: 0.78rem; }

  /* Action bar: ngang scroll thay wrap */
  .dict-hero-v2 .dict-action-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .dict-hero-v2 .dict-action-bar::-webkit-scrollbar { display: none; }

  /* Content sections */
  .dict-meaning-block { padding: 12px 12px 4px !important; margin-top: 16px !important; }
  .dict-pos-badge { font-size: 0.88rem !important; padding: 4px 12px !important; }
  .dict-meaning-vi { font-size: 1.05rem !important; }
  .dict-explain-box { font-size: 0.85rem !important; padding: 8px 12px !important; }
  .dict-comment-box { padding: 14px !important; border-radius: 10px; }

  /* Polyphone section */
  .dict-polyphone-section { padding: 14px !important; }

  /* Bento homepage */
  .dhome-card { padding: 12px; }
  .dhome-streak-num { font-size: 1.8rem; }
  .dhome-streak-lbl { font-size: 0.75rem; }
}

/* ── Very small phone ≤380px ── */
@media (max-width: 380px) {
  .dict-hero-word { font-size: 2.6rem; }
  .dict-hero-pinyin { font-size: 0.95rem; }
  .dict-hero-v2 .dict-word-card__badges { flex-wrap: wrap; justify-content: center; }
  .dict-hero-v2 .dict-action-bar { gap: 6px; }
  .dict-action-chip { padding: 6px 12px !important; font-size: 0.78rem !important; }
  .dhome-card { padding: 10px; }
  .dhome-promo-h { font-size: 0.85rem; }
  .dhome-promo-s { font-size: 0.65rem; }
}