/* ═══════════════════════════════════════════════════════════
   HOME TOEIC — luyen-doc-chu-de.css
   Trang "Luyện đọc theo chủ đề" — chọn Part 5/6/7 → lưới thẻ bài chủ đề (mỗi bài là các câu cùng
   chủ đề, gom từ nhiều đề có sẵn trong Supabase — xem admin.html > tab "Luyện đọc chủ đề"), mỗi
   thẻ có nút "Luyện ngay" luyện thẳng — KHÔNG có bước xem chi tiết riêng (thử làm rồi bỏ, user báo
   dư/xấu — 1 thẻ đã đủ thông tin để quyết định luyện hay không). CHỈ web công khai (toeicthaysang).
   ═══════════════════════════════════════════════════════════ */

.dc-page { padding-bottom: 48px; }

@media (min-width: 768px) {
  .pg-hero { padding: calc(var(--nav-h, 60px) + 22px) 24px 0; }
}

/* ── Công tắc chế độ "Làm bài / Luyện dịch" (2026-09-30) ── */
.dc-hidden { display: none !important; }
.dc-mode {
  display: inline-flex;
  gap: 4px;
  margin-top: 26px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dc-mode-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.dc-mode-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.dc-mode-btn:hover:not(.active) { color: var(--primary-dark); background: var(--bg-hover); }
[data-theme="dark"] .dc-mode-btn:hover:not(.active) { color: var(--primary-light); }
.dc-mode-btn.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px -3px rgba(29,111,242,.45);
}
@media (max-width: 480px) {
  .dc-mode { display: flex; }
  .dc-mode-btn { flex: 1; padding: 9px 10px; }
}

/* Thẻ Luyện dịch: tên canh giữa icon, cả thẻ bấm được. Nút "Luyện dịch" xanh đậm sẵn như nút "Luyện ngay"
   bên Làm bài (trước 2026-10-02 để nhạt, chỉ đậm khi rê chuột — điện thoại trông như nút bị tắt). */
.dc-topic-card--dich { cursor: pointer; }
.dc-topic-card--dich .dc-topic-card-row { align-items: center; min-height: 40px; }

/* ── Dải tab Part 5/6/7 ── */
.dc-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0 26px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dc-tabs::-webkit-scrollbar { display: none; }
.dc-tab {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  opacity: .55;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.dc-tab:hover { opacity: .85; border-color: var(--primary-light); color: var(--primary-dark); }
.dc-tab:active { transform: scale(.97); }
.dc-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: transparent;
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 16px -2px rgba(29,111,242,.3);
}
[data-theme="dark"] .dc-tab:hover { color: var(--primary-light); border-color: var(--primary-light); }

/* ── Lưới thẻ bài chủ đề ── */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.dc-loading, .dc-empty {
  color: var(--text-3);
  font-size: 14px;
  padding: 34px 4px;
  text-align: center;
  grid-column: 1 / -1;
}

/* ĐỒNG BỘ HOÁ 2026-09-23 với 2 trang "cùng họ" Từ vựng (.cb-story-card, co-ban.css) và Luyện
   nghe (.nk-exam-card, nghe-khuyet.css) — user phản hồi 3 trang "mỗi nơi 1 kiểu design". CÙNG 1
   công thức nền/viền/bo góc/bóng/icon ở cả 3 file — sửa 1 nơi nhớ soi lại 2 nơi còn lại. */
.dc-topic-card {
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--primary-light) 0%, transparent 55%),
    var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dc-topic-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* Hàng icon+mô tả CÙNG hàng ngang (user 2026-09-23: "cho tiêu đề nằm chung biểu tượng như bên Từ
   vựng") — thay cho icon nằm riêng phía trên mô tả trước đây. Công thức y hệt .cb-story-row bên
   co-ban.css (gap 12px, align-items flex-start). */
.dc-topic-card-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dc-topic-card-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(29,111,242,.4);
}
.dc-topic-card-icon svg { width: 19px; height: 19px; }
/* Không còn tiêu đề riêng (bỏ theo yêu cầu — dư, redundant với mô tả cho các bài rất ngắn gọn) —
   mô tả giờ LÀ nội dung chính của thẻ nên đậm/rõ hơn hẳn bản mô tả phụ trước đây. */
.dc-topic-card-desc {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Thanh tiến độ "đã luyện" — VÒNG 4 (2026-09-23, user: "nằm trên nút luyện ngay/vào học thì hợp
   lý hơn" — dời từ ĐẦU thẻ xuống NGAY TRÊN nút CTA ở cuối thẻ). Cùng công thức .cb-story-progress
   bên co-ban.css: track+nhãn số xếp CHUNG 1 HÀNG NGANG. Sửa 1 nơi nhớ soi lại 2 nơi còn lại. */
.dc-topic-card-progress { display: flex; align-items: center; gap: 8px; }
.dc-topic-card-progress-track {
  flex: 1; min-width: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-hover);
  overflow: hidden;
}
.dc-topic-card-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-mid), var(--primary-dark));
  transition: width .3s ease;
}
.dc-topic-card-progress-fill.is-complete { background: var(--success); }
.dc-topic-card-progress-label {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-2);
  white-space: nowrap;
}
/* Nút CTA ngay trong thẻ — bấm là luyện thẳng, không qua bước nào khác. Bo pill (999px, không
   còn 12px) + gradient/bóng đổ khớp ĐÚNG công thức nút "Vào học" bên Từ vựng
   (.cb-story-action-btn--enter, co-ban.css) — cùng 1 kiểu nút hành động chính trên cả 2 trang. */
.dc-card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: #fff;
  font-weight: 700; font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29,111,242,.35);
  transition: transform .15s, box-shadow .15s;
}
.dc-card-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.dc-card-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29,111,242,.45); }
.dc-card-cta:active { transform: translateY(0) scale(.97); }

/* Bài yêu cầu Pro mà tài khoản chưa mua — vẫn bấm được (mất cơ hội mời mua nếu khoá cứng). Nền
   đổi tông cam (cùng công thức radial-gradient của thẻ thường, chỉ đổi màu glow — đồng bộ với nền
   thẻ khoá bên Từ vựng/Luyện nghe) + icon khoá góc thẻ + nút CTA đổi màu cam mời mua. KHÔNG còn
   giảm opacity cả thẻ (bản cũ) — nền tint đã đủ làm dấu hiệu, đồng bộ với 2 trang kia. */
.dc-topic-card.is-locked {
  background:
    radial-gradient(120% 140% at 100% 0%, #fde68a 0%, transparent 55%),
    var(--bg-card);
  border-color: #fed7aa;
}
.dc-topic-card.is-locked:hover { border-color: #d97706; }
.dc-topic-card-lock {
  position: absolute;
  top: 16px; right: 16px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #fb923c 0%, #ea580c 100%);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 3px 8px -1px rgba(234,88,12,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.dc-topic-card-lock svg { width: 12px; height: 12px; }
.dc-card-cta--locked {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  box-shadow: 0 4px 14px -3px rgba(234,88,12,.4);
}
.dc-card-cta--locked:hover { box-shadow: 0 7px 18px -3px rgba(234,88,12,.5); }