/* ═══════════════════════════════════════════════════════════════════════════
   mock-pages.css — Thi thử IELTS /ielts/mock + một bộ thi thử /ielts/kb-mock?id=, App học v3 (Đợt 5, 27/09/2026).
   Dải, thẻ lọc, lưới đề, thẻ chuẩn bị lấy từ khuôn kho đề (reading-library.css); dòng từng phần lấy .ilh-row (il-history.css).
   Tệp này chỉ lo phần ghép: lưới 2 cột cho 4 kỹ năng, bảng cấu trúc bài thi, dòng phần trong thẻ. Chỉ token — tự lật ở nền tối.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 4 kỹ năng: lưới 2 cột (4 thẻ trong lưới 3 cột để lại một thẻ lẻ) */
.mk3-skills .rl3-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.mk3-skills { scroll-margin-top: 80px; }

/* Cấu trúc bài thi thật */
.mk3-fmt { padding: 6px 22px; overflow: hidden; }
.mk3-fmt table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.mk3-fmt thead th { padding: 12px 14px 10px 0; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--lv-muted); border-bottom: 1px solid var(--lv-hair); }
.mk3-fmt tbody th, .mk3-fmt td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lv-hair); color: var(--lv-text); }
.mk3-fmt tbody th { width: 110px; font-weight: 700; color: var(--lv-ink); }
.mk3-fmt tbody tr:last-child > * { border-bottom: 0; }
.mk3-tip { margin-top: 12px; }

/* Một bộ đề: mỗi phần một dòng .ilh-row, chữ dòng thẳng hàng với tiêu đề thẻ */
.mk3-rows { margin: -4px -14px -10px; }
.mk3-part .rt3-card__h { margin-bottom: 8px; }
.mk3-steps li span { font-size: 13.5px; line-height: 1.55; }

@media (max-width: 720px) {
  .mk3-skills .rl3-tests { grid-template-columns: minmax(0, 1fr); }
  .mk3-fmt { padding: 4px 16px; }
  .mk3-fmt thead { display: none; }
  .mk3-fmt tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--lv-hair); }
  .mk3-fmt tbody tr:last-child { border-bottom: 0; }
  .mk3-fmt tbody th, .mk3-fmt td { display: block; width: auto; padding: 2px 0; border: 0; }
  .mk3-fmt tbody th { margin-bottom: 4px; }
  .mk3-fmt td::before { content: attr(data-l) ": "; font-weight: 600; color: var(--lv-muted); }
  .mk3-rows { margin: -4px -10px -8px; }
}

/* ═══ Bìa đề thi thử /luyen-de?level=N (01/11/2026) — ilib_exam_cover() trong includes/hsk_lib_ui.php ═══
   Mỗi cấp một sắc màu cổ (朱 đỏ trầm · 赭 đất nung · 黄 hoàng thổ · 青 navy · 绛 đỏ sẫm · 墨 mực), số đề to, chữ Hán mờ làm nền,
   khung viền mảnh như tờ đề. Chỉ trộn từ token KHÔNG lật (primary/secondary/accent/warning/inverse-surface/on-dark) ⇒
   bìa đậm giữ nguyên ở nền tối; riêng bìa khoá (giấy nhạt) đổi màu chữ theo chế độ. */
.ex-cv { --ex-c: var(--color-primary);
  --ex-hi: color-mix(in srgb, var(--ex-c) 80%, var(--color-on-dark));
  --ex-lo: color-mix(in srgb, var(--ex-c) 56%, var(--color-inverse-surface));
  --ex-ink: color-mix(in srgb, var(--ex-c) 78%, var(--color-inverse-surface));
  --ex-line: color-mix(in srgb, var(--color-on-dark) 24%, transparent);
  isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  padding: 11px 12px 10px; color: var(--color-on-dark); font-family: var(--font-sans);
  background: radial-gradient(110% 85% at 0% 0%, color-mix(in srgb, var(--ex-hi) 55%, transparent), transparent 62%),
              linear-gradient(160deg, var(--ex-c) 0%, var(--ex-lo) 100%);
  transition: box-shadow var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease); }
.ex-cv--2 { --ex-c: var(--color-accent); }
.ex-cv--3 { --ex-c: color-mix(in srgb, color-mix(in srgb, var(--color-warning) 50%, var(--color-accent)) 86%, var(--color-inverse-surface)); }
.ex-cv--4 { --ex-c: var(--color-secondary); }
.ex-cv--5 { --ex-c: color-mix(in srgb, var(--color-primary) 60%, var(--color-inverse-surface)); }
.ex-cv--6 { --ex-c: color-mix(in srgb, var(--color-secondary) 10%, var(--color-inverse-surface)); }
/* Cấp 6 (墨 mực): viền, dòng cấp và triện ánh vàng — tách hẳn khỏi navy cấp 4 */
.ex-cv--6:not(.is-locked) { --ex-line: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.ex-cv--6:not(.is-locked) :is(.ex-cv__top, .ex-cv__seal) { color: color-mix(in srgb, var(--color-warning) 78%, var(--color-on-dark)); }
/* Khung tờ đề: viền mảnh lùi vào 5px + vạch ngắn dưới dòng "HSK N" */
.ex-cv::before { content: ""; position: absolute; inset: 5px; z-index: -1; border: 1px solid var(--ex-line); border-radius: var(--radius-md); pointer-events: none; }
.ex-cv__wm { position: absolute; right: -14px; top: 24px; z-index: -1; font: 900 84px/1 var(--font-cjk);
  color: color-mix(in srgb, var(--color-on-dark) 12%, transparent); pointer-events: none; user-select: none;
  transition: transform var(--lv-dur) var(--lv-ease); }
.rl3-test:hover .ex-cv__wm { transform: translate(-3px, -3px); }
.ex-cv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding-bottom: 5px;
  border-bottom: 1px solid var(--ex-line); font-size: 10.5px; line-height: 1.3; }
.ex-cv__top b { font-weight: 800; letter-spacing: .06em; }
.ex-cv__top span { font-family: var(--font-cjk); font-weight: 600; letter-spacing: .08em; opacity: .82; }
.ex-cv__no { display: flex; flex-direction: column; line-height: 1; }
.ex-cv__no small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.ex-cv__no b { margin-top: 3px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ex-cv__ft { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 20px; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.ex-cv__ft > span:first-child { opacity: .86; }
/* Dấu triện 免费: hai chữ xếp dọc trong khung vuông nghiêng nhẹ */
.ex-cv__seal { flex: none; writing-mode: vertical-rl; padding: 3px 2px; border: 1.5px solid currentColor; border-radius: var(--radius-sm);
  font: 700 10px/1.05 var(--font-cjk); letter-spacing: .04em; background: color-mix(in srgb, var(--color-on-dark) 14%, transparent); transform: rotate(-6deg); }
.ex-cv__lock { flex: none; opacity: .9; }

/* Đề đang có: viền màu cấp quanh bìa cho nổi giữa các đề khoá */
.ex-cv.is-mine { box-shadow: 0 0 0 2px var(--lv-surface, var(--color-surface)), 0 0 0 4px color-mix(in srgb, var(--ex-c) 70%, transparent); }

/* Đề khoá / sắp mở bán: bìa "giấy" trung tính, màu cấp chỉ ở chữ + khung, khung nét đứt + ổ khoá — không làm mờ cả bìa */
.rl3-test.is-locked .ex-cv { opacity: 1; }
.ex-cv.is-locked { color: var(--ex-ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ex-c) 3%, var(--color-surface)) 0%, color-mix(in srgb, var(--ex-c) 5%, var(--color-soft)) 100%); }
.ex-cv.is-locked::before { border: 1px dashed color-mix(in srgb, var(--ex-c) 40%, transparent); }
.ex-cv.is-locked .ex-cv__top { border-bottom-color: color-mix(in srgb, var(--ex-c) 22%, transparent); }
.ex-cv.is-locked .ex-cv__wm { color: color-mix(in srgb, var(--ex-c) 11%, transparent); }
.ex-cv.is-locked .ex-cv__no b { opacity: .78; }
.rl3-test.is-locked:hover .ex-cv { background: linear-gradient(160deg, color-mix(in srgb, var(--ex-c) 6%, var(--color-surface)) 0%, color-mix(in srgb, var(--ex-c) 9%, var(--color-soft)) 100%); }
html[data-user-theme="dark"] .ex-cv { --ex-ink: color-mix(in srgb, var(--ex-c) 38%, var(--color-on-dark)); }
@media (prefers-color-scheme: dark) {
  html[data-user-theme="system"] .ex-cv { --ex-ink: color-mix(in srgb, var(--ex-c) 38%, var(--color-on-dark)); }
}

@media (max-width: 720px) {
  .ex-cv { padding: 10px 10px 9px; }
  .ex-cv__no b { font-size: 30px; }
  .ex-cv__wm { top: 22px; font-size: 74px; }
}
@media (prefers-reduced-motion: reduce) { .ex-cv, .ex-cv__wm { transition: none; } }