/* ==========================================================================
   HSK CBT Skin — chỉ bảng trả lời 答题卡

   Plugin này CỐ Ý không đụng tới giao diện câu hỏi và đáp án. Toàn bộ phần
   chữ đề, ô đáp án, ô nhập, nút bấm của LearnDash giữ nguyên như bản gốc.
   Ở đây chỉ có: khung hai cột để chừa chỗ, và cột phải chứa đồng hồ cùng
   bảng trả lời.

   Bảng trả lời chính là Question Overview Table của LearnDash, được dời sang
   cột phải rồi xếp lại thành lưới và chia theo Question Category.
   ========================================================================== */

.hsk-cbt {
  --hsk-navy: #134a86;
  --hsk-blue: #1c6fbd;
  --hsk-blue-dark: #15558f;
  --hsk-band: #dbe7f4;
  --hsk-band-line: #b3c9e0;
  --hsk-line: #b9c5d3;
  --hsk-line-soft: #dfe5ec;
  --hsk-ink: #1b1b1b;
  --hsk-ink-soft: #5a6674;
  --hsk-red: #c0392b;
  --hsk-amber: #e08a1e;
  --hsk-side-width: 258px;
  --hsk-sticky-top: 12px;
  --hsk-cn: "SimSun", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif;
  --hsk-ui: "Microsoft YaHei", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hsk-num: "DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
}

.hsk-cbt.hsk-webfont {
  --hsk-cn: "Noto Serif SC", "SimSun", "Songti SC", serif;
}

/* --------------------------------------------------------------------------
   1. THANH TIÊU ĐỀ
   -------------------------------------------------------------------------- */
.hsk-cbt .hsk-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--hsk-blue) 0%, var(--hsk-navy) 100%);
  border: 1px solid var(--hsk-blue-dark);
  border-bottom: 0;
  color: #fff;
  font-family: var(--hsk-ui);
  font-size: 17px;
  font-weight: 700;
}

.hsk-cbt .hsk-level {
  font-family: var(--hsk-cn);
  font-size: 19px;
}

/* --------------------------------------------------------------------------
   2. KHUNG HAI CỘT

   Cột phải phải nằm BÊN TRONG .wpProQuiz_content, vì LearnDash tìm bảng số câu
   bằng cách dò bên trong khung đó. Mọi thứ còn lại của LearnDash được gom vào
   một cột trái theo dòng chảy bình thường, để cách nổi trái phải của nó vẫn
   hoạt động như cũ.
   -------------------------------------------------------------------------- */
.hsk-cbt .wpProQuiz_content.hsk-has-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hsk-side-width);
  align-items: start;
}

.hsk-cbt .wpProQuiz_content.hsk-has-side > .hsk-col {
  grid-column: 1;
  min-width: 0;
}

.hsk-cbt .hsk-col::after {
  content: "";
  display: block;
  clear: both;
}

.hsk-cbt .wpProQuiz_content.hsk-side-off {
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   3. CỘT PHẢI
   -------------------------------------------------------------------------- */
.hsk-cbt .wpProQuiz_content.hsk-has-side > .hsk-side {
  grid-column: 2;
  grid-row: 1 / span 999;
  align-self: start;
  background: #f7f9fb;
  border: 0;
  border-left: 1px solid var(--hsk-line);
  font-family: var(--hsk-ui);
  color: var(--hsk-ink);

  /* Ghim lại khi cuộn, đề dài mấy cũng luôn trong tầm mắt */
  position: sticky;
  top: var(--hsk-sticky-top);
  max-height: calc(100vh - var(--hsk-sticky-top) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hsk-cbt:not(.hsk-started) .hsk-side,
.hsk-cbt .hsk-side[hidden] { display: none !important; }

.hsk-cbt .hsk-side__actions[hidden],
.hsk-cbt .hsk-clock[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   4. ĐỒNG HỒ
   -------------------------------------------------------------------------- */
.hsk-cbt .hsk-clock {
  padding: 10px 12px 11px;
  background: var(--hsk-navy);
  border-bottom: 1px solid var(--hsk-blue-dark);
  text-align: center;
}

.hsk-cbt .hsk-clock__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #cfe0f2;
}

.hsk-cbt .hsk-clock__time {
  display: block;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid #94aec9;
  color: var(--hsk-red);
  font-family: var(--hsk-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hsk-cbt .hsk-clock__time.is-urgent { animation: hsk-blink 1.2s steps(2, end) infinite; }

@keyframes hsk-blink { 50% { background: #ffe9e6; } }

/* --------------------------------------------------------------------------
   5. BẢNG TRẢ LỜI
   -------------------------------------------------------------------------- */
.hsk-cbt .hsk-card {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--hsk-line-soft);
}

.hsk-cbt .hsk-card[hidden] { display: none; }

.hsk-cbt .hsk-card__head {
  order: 0;
  padding: 8px 12px;
  background: var(--hsk-band);
  border-bottom: 1px solid var(--hsk-band-line);
  font-family: var(--hsk-cn);
  font-size: 14px;
  font-weight: 700;
  color: var(--hsk-navy);
}

.hsk-cbt .hsk-card__head small {
  display: block;
  font-family: var(--hsk-ui);
  font-size: 11px;
  font-weight: 400;
  color: var(--hsk-ink-soft);
}

/* Dòng tiêu đề từng phần thi. Thứ tự sắp xếp do JS đặt, nhờ vậy lưới số nằm
   ngay dưới đúng phần đang mở mà không phải sắp xếp lại cây DOM — điều bắt
   buộc, vì LearnDash nhận ra câu cần nhảy tới qua vị trí thẻ trong danh sách. */
.hsk-cbt .hsk-tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 9px 26px 9px 12px;
  background: var(--hsk-navy);
  border: 0;
  border-bottom: 1px solid var(--hsk-blue-dark);
  font-family: var(--hsk-ui);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.hsk-cbt .hsk-tab__cn { font-family: var(--hsk-cn); color: #cfe0f2; }

.hsk-cbt .hsk-tab:hover { background: var(--hsk-blue); }

/* Mũi nhọn: chỉ xuống là đang gập, chỉ lên là đang mở */
.hsk-cbt .hsk-tab::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid #cfe0f2;
  border-bottom: 2px solid #cfe0f2;
  transform: rotate(45deg);
  transition: transform .12s linear;
}

.hsk-cbt .hsk-tab.is-active::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.hsk-cbt .hsk-legend {
  order: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px 12px;
  font-size: 11px;
  color: var(--hsk-ink-soft);
}

.hsk-cbt .hsk-legend span { display: flex; align-items: center; gap: 5px; }

.hsk-cbt .hsk-legend i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--hsk-line);
  font-style: normal;
}

.hsk-cbt .hsk-legend i.done { background: var(--hsk-blue); border-color: var(--hsk-blue-dark); }
.hsk-cbt .hsk-legend i.current { border: 2px solid var(--hsk-amber); }

/* --------------------------------------------------------------------------
   6. LƯỚI SỐ CÂU — chính là bảng của LearnDash, chỉ xếp lại
   -------------------------------------------------------------------------- */

/* LD30 chừa 2em margin và 2em padding dưới khối này vì nguyên bản nó là dải
   ngang giữa trang. Quy tắc của LD30 ngang bậc chọn với chỗ này nên phải nói
   dứt khoát, không thì thừa cả trăm pixel trắng dưới lưới số. */
.hsk-cbt .hsk-card .wpProQuiz_reviewDiv {
  display: block !important;
  position: static;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
}

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion {
  position: static;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  background: none;
  border: 0;
}

/* Con trỏ kéo của thanh cuộn ngang cũ, không còn việc gì để làm */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion > div { display: none !important; }

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
  list-style: none;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li {
  position: relative;
  float: none !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--hsk-line);
  border-radius: 0;
  color: var(--hsk-ink-soft);
  font-family: var(--hsk-num);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li:hover { border-color: var(--hsk-blue); }

/* Nút bên trong của LD30 phủ kín ô để vùng bấm bằng cả ô */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li > button {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Đã trả lời — trạng thái gốc của LearnDash, cộng dấu riêng để ô đổi màu ngay
   lúc vừa chọn đáp án thay vì đợi chuyển câu */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionSolved,
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionSolvedCorrect,
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionSolvedIncorrect,
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.hsk-answered {
  background: var(--hsk-blue);
  border-color: var(--hsk-blue-dark);
  color: #fff;
  font-weight: 700;
}

/* Đang làm */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionTarget {
  border: 2px solid var(--hsk-amber);
  color: var(--hsk-amber);
  font-weight: 700;
}

.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionTarget.hsk-answered,
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionTarget.wpProQuiz_reviewQuestionSolved {
  color: #fff;
}

/* Đánh dấu xem lại */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionReview::after,
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.wpProQuiz_reviewQuestionSkip::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: var(--hsk-amber);
}

/* Câu không thuộc phần thi đang mở */
.hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol > li.hsk-off { display: none !important; }

/* Đang gập thì giấu cả lưới */
.hsk-cbt.hsk-collapsed [data-hsk-overview],
.hsk-cbt.hsk-collapsed [data-hsk-groups] { display: none !important; }

/* Chú thích và nút của LearnDash trong khối này đã có bản tiếng Việt bên dưới */
.hsk-cbt .hsk-card .wpProQuiz_reviewLegend,
.hsk-cbt .hsk-card .wpProQuiz_reviewButtons { display: none !important; }

/* --------------------------------------------------------------------------
   7. LƯỚI SỐ TỰ DỰNG — chỉ dùng khi đề tắt Question Overview Table
   -------------------------------------------------------------------------- */
.hsk-cbt .hsk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 10px 12px 12px;
}

.hsk-cbt .hsk-grid[hidden] { display: none !important; }

.hsk-cbt .hsk-num {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid var(--hsk-line);
  color: var(--hsk-ink-soft);
  font-family: var(--hsk-num);
  font-size: 12px;
  cursor: pointer;
}

.hsk-cbt .hsk-num:hover { border-color: var(--hsk-blue); }

.hsk-cbt .hsk-num.is-done {
  background: var(--hsk-blue);
  border-color: var(--hsk-blue-dark);
  color: #fff;
  font-weight: 700;
}

.hsk-cbt .hsk-num.is-current {
  border: 2px solid var(--hsk-amber);
  color: var(--hsk-amber);
  font-weight: 700;
}

.hsk-cbt .hsk-num.is-current.is-done { color: #fff; }

/* --------------------------------------------------------------------------
   8. NÚT TẠM DỪNG VÀ MÀN CHE
   -------------------------------------------------------------------------- */
.hsk-cbt .hsk-side__actions { padding: 12px; display: grid; gap: 8px; }

.hsk-cbt .hsk-btn {
  padding: 9px 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
  border: 1px solid var(--hsk-line);
  color: var(--hsk-navy);
  font-family: var(--hsk-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hsk-cbt .hsk-btn:hover { filter: brightness(1.05); }

.hsk-cbt .hsk-pause {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(19, 74, 134, .96);
  color: #fff;
  text-align: center;
  font-family: var(--hsk-ui);
}

.hsk-cbt .hsk-pause[hidden] { display: none; }

.hsk-cbt .hsk-pause__box {
  max-width: 420px;
  padding: 28px 24px;
  background: var(--hsk-navy);
  border: 1px solid #2f6ea8;
}

.hsk-cbt .hsk-pause__cn {
  font-family: var(--hsk-cn);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
}

.hsk-cbt .hsk-pause__note {
  font-size: 13px;
  line-height: 1.7;
  color: #cfe0f2;
  margin: 0 0 20px;
}

.hsk-cbt .hsk-pause__box .hsk-btn { width: 100%; }

/* --------------------------------------------------------------------------
   9. LINH TINH
   -------------------------------------------------------------------------- */

/* Đồng hồ gốc của LearnDash được soi lên cột phải nên ẩn bản gốc đi */
.hsk-cbt.hsk-has-clock .wpProQuiz_time_limit { display: none !important; }

.hsk-cbt .hsk-side button:focus-visible {
  outline: 2px solid var(--hsk-amber);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .hsk-cbt .wpProQuiz_content.hsk-has-side { display: block; }

  .hsk-cbt .wpProQuiz_content.hsk-has-side > .hsk-side {
    position: static;
    max-height: none;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--hsk-line);
  }

  .hsk-cbt .hsk-card .wpProQuiz_reviewQuestion ol,
  .hsk-cbt .hsk-grid { grid-template-columns: repeat(10, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hsk-cbt .hsk-clock__time.is-urgent { animation: none; }
  .hsk-cbt .hsk-tab::after { transition: none; }
}