.kh-page { max-width: 1040px; margin: 0 auto; padding: 20px 16px 0; }

.kh-loading, .kh-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center; grid-column: 1 / -1;
}
.kh-empty-state svg { color: var(--text-2); opacity: .45; }
.kh-loading p, .kh-empty-state p { font-size: 13.5px; color: var(--text-2); margin: 0; max-width: 320px; line-height: 1.5; }

.kh-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (max-width: 767px) {
  .kh-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════ */
.kh-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  opacity: 0; animation: khCardIn .4s ease forwards;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kh-card:hover { box-shadow: var(--shadow-md); border-color: #c7d7fb; transform: translateY(-2px); }
@keyframes khCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kh-card-img-wrap { width: 100%; aspect-ratio: 16 / 10; background: var(--bg-hover); overflow: hidden; flex-shrink: 0; }
.kh-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-card-img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); background: linear-gradient(135deg, var(--bg-hover), var(--bg));
}

.kh-card-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kh-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kh-card-top .tag { flex-shrink: 0; }
.kh-card-name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.35; }

/* ── Chip ngày khai giảng (khóa Zoom) — cùng kiểu .lo-meta-row/.lo-meta-chip của lop-online.css ── */
.kh-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.kh-meta-chip svg { flex-shrink: 0; color: var(--primary); }

.kh-card-desc {
  font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.kh-card-fee { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kh-card-fee-original { font-size: 13.5px; color: var(--text-2); text-decoration: line-through; font-weight: 700; }
.kh-card-fee-badge {
  font-size: 11px; font-weight: 800; color: var(--success); background: var(--success-light);
  padding: 2px 7px; border-radius: var(--radius-pill); line-height: 1.5;
}
.kh-card-fee-amount { font-size: 18px; color: var(--primary); font-weight: 800; }
.kh-card-fee-amount.sale { color: var(--price-sale); }

.kh-card-btn {
  margin-top: 4px; width: 100%; padding: 12px; border: none; border-radius: var(--radius);
  background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 14.5px;
  cursor: pointer; font-family: inherit; transition: background .15s, transform .12s;
}
.kh-card-btn:hover { background: #dbe7fd; }
.kh-card-btn:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════
   MODAL — "Thông tin khóa học"
   ═══════════════════════════════════════════════════════════ */
.kh-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: khFadeIn .2s ease; overflow-y: auto;
}
@keyframes khFadeIn { from { opacity: 0; } to { opacity: 1; } }

.kh-modal {
  background: var(--bg-card); border-radius: 20px; max-width: 600px; width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: khPopIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes khPopIn { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.kh-modal-img-wrap { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-hover); overflow: hidden; }
.kh-modal-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kh-modal-body { padding: 20px 22px 22px; }
.kh-modal-title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 4px; line-height: 1.3; }
.kh-modal-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0 0 16px; }

.kh-block-title {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}

.kh-content-list { list-style: none; padding: 0; margin: 0 0 16px; }
.kh-content-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.55; color: var(--text); padding: 5px 0;
}
.kh-content-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  margin-top: 7px; background: var(--primary);
}

/* Nội dung học gõ qua trình soạn thảo có định dạng (bôi đen/gạch chân/gạch đầu dòng) ở admin —
   mỗi dòng mặc định có chấm đầu dòng như danh sách cũ; "gạch đầu dòng" trong toolbar admin dùng
   cho khi cần thụt 1 dòng thành danh sách con bên trong 1 mục. */
.kh-content-rich { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
.kh-content-rich > div, .kh-content-rich > p {
  position: relative; margin: 0; padding: 5px 0 5px 16px;
}
.kh-content-rich > div:empty, .kh-content-rich > p:empty,
.kh-content-rich > div:has(> br:only-child), .kh-content-rich > p:has(> br:only-child) { display: none; }
.kh-content-rich > div::before, .kh-content-rich > p::before {
  content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--primary);
}
.kh-content-rich ul, .kh-content-rich ol { list-style: none; margin: 4px 0; padding-left: 16px; }
.kh-content-rich li { position: relative; padding: 3px 0 3px 16px; }
.kh-content-rich li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--primary);
}
.kh-content-rich b, .kh-content-rich strong { font-weight: 800; }

.kh-price-block { padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.kh-price-box { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kh-price-original { font-size: 15px; font-weight: 700; color: var(--text-2); text-decoration: line-through; }
.kh-price-badge {
  font-size: 12px; font-weight: 800; color: var(--success); background: var(--success-light);
  padding: 3px 8px; border-radius: var(--radius-pill); line-height: 1.5;
}
.kh-price-sale { font-size: 22px; font-weight: 800; color: var(--price-sale); }
.kh-price-amount { font-size: 22px; font-weight: 800; color: var(--primary); }
.kh-discount-reason {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--warning);
  background: var(--warning-light); border-radius: 8px; padding: 6px 10px; width: fit-content;
}

/* Nút "Đăng ký khóa này" nay dùng .btn .btn-primary .btn-block dùng chung (style.css) */
#khRegisterBtn { margin-bottom: 14px; }

.kh-cta-title {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}
.kh-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kh-cta {
  flex: 1; min-width: 140px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: none; border-radius: 10px; color: #fff; font-weight: 800; font-size: 13.5px;
  text-decoration: none; font-family: inherit; transition: opacity .15s, transform .12s;
}
.kh-cta:hover { opacity: .92; transform: translateY(-1px); }
.kh-cta:active { transform: translateY(0); }
.kh-cta-zalo { background: #0068ff; box-shadow: 0 4px 14px rgba(0,104,255,.25); }
.kh-cta-fb   { background: #1877f2; box-shadow: 0 4px 14px rgba(24,119,242,.25); }

/* ═══════════════════════════════════════════════════════════
   KHỐI "LIÊN HỆ / TƯ VẤN" — cuối trang Khóa học, luôn hiện sẵn (không cần
   mở modal 1 khóa cụ thể mới thấy). Dùng lại đúng nút .kh-cta có sẵn.
   ═══════════════════════════════════════════════════════════ */
.kh-contact-section {
  margin: 8px 0 40px; padding: 40px 24px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, var(--primary-light) 0%, var(--bg-card) 65%);
  border: 1.5px solid var(--border);
}
.kh-contact-icon {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-mid));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(29,111,242,.5);
}
.kh-contact-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 22px; text-wrap: balance; }
.kh-contact-row.kh-cta-row {
  width: 100%; max-width: 380px; margin: 0 auto; justify-content: center;
}
.kh-contact-row .kh-cta { padding: 14px; font-size: 14.5px; border-radius: 12px; }
@media (max-width: 420px) {
  .kh-contact-row.kh-cta-row { flex-direction: column; }
}

/* ── Khối đăng ký/thanh toán — hiện khi bấm "Đăng ký khóa này" ── */
.kh-pay-block {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
  animation: khFadeIn .2s ease;
}
.kh-pay-title { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 10px; }

.kh-bank-card {
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px;
  padding: 2px 14px;
}
.kh-bank-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.kh-bank-row:last-child { border-bottom: none; }
.kh-bank-label { color: var(--text-2); flex-shrink: 0; min-width: 92px; font-weight: 600; }
.kh-bank-value { color: var(--text); font-weight: 700; flex: 1; word-break: break-word; white-space: pre-line; }
.kh-copy-btn {
  flex-shrink: 0; background: var(--bg-card); color: var(--primary); border: 1px solid var(--primary-light);
  border-radius: 7px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.kh-copy-btn:hover { background: var(--primary-light); }

.kh-transfer-box {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
  background: var(--bg-hover); border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  color: var(--text-2); line-height: 1.55;
}
.kh-transfer-box svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
/* Dòng cảnh báo quan trọng (VD "đừng sửa nội dung chuyển khoản") — tách tông màu cam/vàng cảnh
   báo, khác hẳn các dòng hướng dẫn thường (trung tính) để mắt tự dừng lại đọc kỹ hơn. */
.kh-transfer-box--warn { background: var(--warning-light); color: var(--warning); font-weight: 600; }
.kh-transfer-box--warn svg { color: var(--warning); }

/* Danh sách gạch đầu dòng gộp mọi hướng dẫn thanh toán vào 1 ô duy nhất (renderPayBox trong
   khoa-hoc.js) — dùng "-" thay vì chấm tròn mặc định để rõ là "gạch đầu dòng", đồng thời dễ admin
   tự sửa từng dòng trực tiếp trong code vì chỉ có 1 chỗ, không rải rác nhiều ô như bản đầu. */
.kh-transfer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kh-transfer-list li { position: relative; padding-left: 14px; }
.kh-transfer-list li::before { content: '-'; position: absolute; left: 0; color: var(--primary); font-weight: 800; }

.kh-qr-wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 4px; padding: 18px 16px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 14px;
}
.kh-qr-wrap img {
  display: block; max-width: 220px; width: 100%; border-radius: 10px; border: 1.5px solid var(--border);
  background: #fff; padding: 10px; box-shadow: var(--shadow-sm); box-sizing: border-box;
}
.kh-qr-label { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 10px; }

/* Modal thanh toán 3 gói Pro (startPurchaseFlow trong khoa-hoc.js) — phóng to giữa màn hình thay
   vì nhét gọn trong thẻ giá nhỏ, để mã QR đủ lớn dễ quét + đọc rõ từng dòng hướng dẫn. */
.kh-pay-modal { position: relative; max-width: 460px; }
.kh-pay-modal .kh-modal-body { padding-top: 26px; }
.kh-pay-modal .kh-qr-wrap img { max-width: 260px; }
.kh-pay-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--text-2); transition: background .15s, color .15s;
}
.kh-pay-modal-close:hover { background: var(--border); color: var(--text); }

/* Trạng thái thành công — đổi hẳn màu nền/khung sang tông xanh lá (giống .kh-activate-note) để
   nổi bật rõ ràng thay vì chỉ đổi chữ trong 1 dòng nhỏ như trạng thái "đang chờ". */
.kh-pay-status--success {
  background: var(--success-light); color: var(--success); font-weight: 700;
  border-radius: 10px; padding: 12px; flex-wrap: wrap;
}

/* Mời vào nhóm trợ giảng ngay dưới hộp "Thanh toán thành công" (nút .ps-btn từ pro-support.js). */
.kh-pay-group {
  margin-top: 12px; padding: 12px; border-radius: 12px;
  border: 1.5px solid rgba(99,102,241,.3); background: rgba(99,102,241,.06);
}
.kh-pay-group-text { font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 10px; }

/* Nút (i) cạnh dòng "Trợ giảng" trong bảng so sánh — mở bảng nhóm trợ giảng. */
.kh-compare-info {
  display: inline-flex; vertical-align: -4px; margin-left: 4px; padding: 2px; border: none; border-radius: 50%;
  background: none; color: #6366f1; cursor: pointer;
}
.kh-compare-info[hidden] { display: none; }
.kh-compare-info:hover { background: rgba(99,102,241,.12); }
.kh-compare-info svg { width: 17px; height: 17px; }

.kh-activate-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  background: var(--success-light); border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  color: var(--success); font-weight: 700; line-height: 1.55;
}
.kh-activate-note svg { flex-shrink: 0; margin-top: 2px; }

/* Nút "Đóng" nay dùng .btn .btn-ghost .btn-sm .btn-block dùng chung (style.css) */
#khModalClose { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════
   BẢNG SO SÁNH MIỄN PHÍ / PRO / PRO MAX — nội dung marketing tĩnh
   (upgrade_config.plan_comparison, admin.html > tab "Thanh toán & Liên hệ").
   3 cột có màu riêng để phân biệt cấp; các dòng cùng "group" gộp dưới 1 tiêu
   đề thu gọn được (mặc định đóng), dòng không group hiện thẳng.
   ═══════════════════════════════════════════════════════════ */
.kh-compare-section { margin: 40px 0 24px; }
.kh-compare-title {
  font-size: 21px; font-weight: 800; color: var(--text); text-align: center;
  margin: 0 0 22px; text-wrap: balance;
}

.kh-compare-scroll {
  overflow-x: auto; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-sm);
}
/* table-layout:fixed + % cố định cho từng cột — để 4 cột LUÔN chia đều đúng tỷ lệ ở mọi bề rộng
   màn hình (trước đây để trình duyệt tự tính theo nội dung, cột tiêu chí dài chữ + nowrap chiếm
   hết chỗ, 3 cột còn lại bị bóp méo không đều, vỡ trên mobile). Bỏ hẳn position:sticky ở cột tiêu
   chí — sticky + border-collapse trong <table> hay lỗi hiển thị/mất chữ trên trình duyệt mobile. */
.kh-compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kh-compare-feature-col, .kh-compare-feature { width: 30%; }
.kh-plan-free, .kh-plan-pro, .kh-plan-promax { width: 23.33%; }

thead .kh-compare-feature-col { background: var(--bg-card); border-bottom: 2px solid var(--border); }
thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius) - 2px); }
thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--radius) - 2px); }

th.kh-compare-col {
  padding: 14px 10px 16px; text-align: center; vertical-align: top;
  border-left: 1px solid var(--border); border-bottom: 2px solid var(--border);
}
.kh-compare-name { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.kh-compare-table tbody tr:nth-child(even) { background: var(--bg-hover); }
/* Xuống dòng thay vì cắt/tràn chữ khi tiêu chí dài — ưu tiên đủ chỗ cho 3 cột Free/Pro/Pro Max
   thay vì để cột tiêu chí giãn theo độ dài câu chữ. */
.kh-compare-feature {
  background: inherit; padding: 12px 14px; font-size: 13.5px; color: var(--text); font-weight: 600;
  border-top: 1px solid var(--border); white-space: normal; word-break: break-word; line-height: 1.4;
}
.kh-compare-cell {
  text-align: center; padding: 12px 8px;
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.kh-compare-yes, .kh-compare-no { display: inline-flex; }
.kh-compare-yes { color: var(--success); }
.kh-compare-no { color: var(--text-3); opacity: .5; }

/* 3 cột màu riêng — Miễn phí trung tính, Pro tông xanh thương hiệu, Pro Max tông vàng cao cấp.
   Header đậm màu để định vị cột; thân bảng giữ màu RẤT nhạt cùng tông (không đổi qua nth-child vì
   colspan của hàng tiêu đề nhóm sẽ lệch số thứ tự cột) để dải màu chạy liền mạch từ trên xuống,
   nhìn thu hút mà không loá mắt khi đọc nhiều dòng. */
.kh-plan-free   { background: var(--bg-hover); }
.kh-plan-pro     { background: var(--primary-light); }
.kh-plan-pro .kh-compare-name { color: var(--primary-dark); }
:root[data-theme="dark"] .kh-plan-pro .kh-compare-name { color: #93c5fd; }
.kh-plan-promax  { background: linear-gradient(180deg, rgba(255,192,0,.20), rgba(255,192,0,.07)); }
.kh-plan-promax .kh-compare-name { color: #8a5d00; }
:root[data-theme="dark"] .kh-plan-promax .kh-compare-name { color: var(--gold); }
.kh-compare-plan-col .kh-compare-name { margin-bottom: 0; }
.kh-compare-text { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.4; }

.kh-compare-table td.kh-compare-cell:nth-child(2) { background: rgba(148,163,184,.06); }
.kh-compare-table td.kh-compare-cell:nth-child(3) { background: rgba(29,111,242,.055); }
.kh-compare-table td.kh-compare-cell:nth-child(4) { background: linear-gradient(180deg, rgba(255,192,0,.09), rgba(255,192,0,.03)); }

/* Dòng giới thiệu dưới tiêu đề */
.kh-compare-sub {
  margin: -12px auto 20px; max-width: 560px; text-align: center;
  font-size: 13.5px; color: var(--text-2); line-height: 1.5; text-wrap: balance;
}
/* Quyền lợi chỉ có ở Pro Max — tên tiêu chí tông vàng đậm + vạch vàng bên trái */
.kh-compare-row--promax .kh-compare-feature { color: #8a5d00; box-shadow: inset 3px 0 0 #f5b000; }
:root[data-theme="dark"] .kh-compare-row--promax .kh-compare-feature { color: var(--gold); }
/* Hàng nút cuối bảng */
.kh-compare-table tfoot td { border-top: 1px solid var(--border); padding-top: 14px; padding-bottom: 16px; }
.kh-compare-table tfoot .kh-compare-feature { background: var(--bg-card); }
.kh-compare-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 160px; min-height: 38px; padding: 8px 10px;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.2;
  transition: transform .15s ease, filter .15s ease;
}
.kh-compare-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.kh-compare-cta--pro    { background: var(--primary); color: #fff; box-shadow: 0 4px 12px -3px rgba(29,111,242,.45); }
.kh-compare-cta--promax { background: linear-gradient(180deg, #ffd24d, #f5b000); color: #3d2a00; box-shadow: 0 4px 12px -3px rgba(245,176,0,.5); }

/* Điện thoại: bảng 4 cột bóp tên tiêu chí còn 3-4 chữ/dòng, rất khó đọc. Đổi sang dạng XẾP CHỒNG —
   mỗi quyền lợi: tên tiêu chí 1 dòng riêng full bề ngang, bên dưới là 3 ô Cơ bản/Pro/Pro Max. Hàng
   tên gói bám dính dưới thanh menu khi cuộn để luôn biết cột nào là gói nào. overflow:clip (không
   phải auto) để khung không thành vùng cuộn riêng — sticky mới bám theo trang được. */
@media (max-width: 560px) {
  .kh-compare-scroll { overflow: clip; }
  .kh-compare-table, .kh-compare-table thead, .kh-compare-table tbody, .kh-compare-table tfoot { display: block; }
  .kh-compare-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-compare-table thead { position: sticky; top: var(--nav-h, 60px); z-index: 3; }
  .kh-compare-table thead .kh-compare-feature-col { display: none; }
  .kh-compare-table thead th.kh-compare-col:nth-child(2) { border-left: none; }
  .kh-compare-table thead tr { background: var(--bg-card); } /* nền đặc: cột Pro Max nền trong suốt, cuộn qua sẽ lộ chữ */
  th.kh-compare-col, .kh-compare-feature, .kh-compare-cell { width: auto; }
  th.kh-compare-col { padding: 11px 4px; }
  .kh-compare-name { font-size: 13px; }
  .kh-compare-table tbody tr:nth-child(even) { background: none; }
  .kh-compare-feature {
    grid-column: 1 / -1; width: auto;
    padding: 11px 14px 4px; border-top: 1px solid var(--border);
    font-size: 13.5px; background: var(--bg-card);
  }
  .kh-compare-cell { border-top: none; padding: 6px 4px 12px; background: var(--bg-card) !important; }
  .kh-compare-table tbody td.kh-compare-cell:nth-child(2) { border-left: none; }
  .kh-compare-text { font-size: 12.5px; }
  .kh-compare-row--promax .kh-compare-feature { box-shadow: none; }
  .kh-compare-row--promax .kh-compare-feature::before {
    content: 'Pro Max'; display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px;
    background: rgba(245,176,0,.18); color: #8a5d00; font-size: 10.5px; font-weight: 800; vertical-align: 1px;
  }
  :root[data-theme="dark"] .kh-compare-row--promax .kh-compare-feature::before { color: var(--gold); }
  .kh-compare-table tfoot .kh-compare-cta-label { display: none; }
  .kh-compare-table tfoot td { border-top: 1px solid var(--border); padding: 12px 4px 14px; }
  .kh-compare-table tfoot td.kh-col-free { border-left: none; }
  .kh-compare-cta { font-size: 12.5px; padding: 8px 6px; min-height: 36px; }
  /* Dòng 3 gói giống hệt nhau → 1 ô chung "Có ở mọi gói" (planRowHtml gắn class). */
  .kh-compare-row--all td.kh-col-pro, .kh-compare-row--all td.kh-col-promax { display: none; }
  .kh-compare-row--all td.kh-col-free {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .kh-compare-row--all .kh-compare-all-note { display: inline; font-size: 12px; font-weight: 700; color: var(--text-2); }
}
.kh-compare-all-note { display: none; }

/* Tiêu đề nhóm thu gọn được — dòng bấm được, mặc định đóng (is-collapsed ẩn các dòng con). */
.kh-compare-group-header td {
  padding: 0; border-top: 1px solid var(--border); background: var(--bg-hover);
}
.kh-compare-group-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 18px;
  border: none; background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.kh-compare-group-chevron {
  display: inline-flex; color: var(--text-2); transition: transform .18s ease; flex-shrink: 0;
}
.kh-compare-group-toggle[aria-expanded="true"] .kh-compare-group-chevron { transform: rotate(180deg); }
.kh-compare-group-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
.kh-compare-group-count { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-left: auto; }
.kh-compare-grouped-row.is-collapsed { display: none; }

.kh-card-fee-per { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-left: 2px; }

/* ── Danh sách giá theo thời hạn (courses[].plans, modal "Học phí theo thời hạn") ── */
.kh-plan-list { display: flex; flex-direction: column; gap: 2px; }
.kh-plan-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.kh-plan-row:last-child { border-bottom: none; }
.kh-plan-duration { font-size: 13px; font-weight: 700; color: var(--text); }
.kh-plan-fee { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kh-plan-original { font-size: 12px; color: var(--text-2); text-decoration: line-through; font-weight: 700; }
.kh-plan-badge {
  font-size: 10px; font-weight: 800; color: var(--success); background: var(--success-light);
  padding: 2px 6px; border-radius: var(--radius-pill);
}
.kh-plan-amount { font-size: 16px; font-weight: 800; color: var(--primary); }
.kh-plan-amount.sale { color: var(--price-sale); }
.kh-plan-reason { font-size: 11.5px; color: var(--warning); font-weight: 600; margin: -4px 0 6px; }

/* ═══════════════════════════════════════════════════════════
   BẢNG GIÁ CÁC GÓI PRO (upgrade_config.pricing_cards, thanh toán tự động SePay) — thiết kế lại
   2026-09-27: tiêu đề khu vực, thẻ có icon theo gói + điểm nổi bật + nhãn góc (Đề xuất / Hợp
   với bạn / Gói hiện tại), dải tạo niềm tin bên dưới. Mỗi thẻ đổi màu qua 4 biến --acc*.
   ═══════════════════════════════════════════════════════════ */
.kh-pricing-section { margin: 8px 0 8px; }
.kh-sec-head { text-align: center; margin: 6px auto 26px; max-width: 620px; }
.kh-sec-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
}
.kh-sec-kicker svg { width: 12px; height: 12px; }
.kh-sec-title { font-size: 27px; font-weight: 800; color: var(--text); margin: 12px 0 8px; line-height: 1.25; text-wrap: balance; }
.kh-sec-sub { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.6; text-wrap: balance; }
@media (max-width: 600px) {
  .kh-sec-title { font-size: 22px; }
  .kh-sec-sub { font-size: 13.5px; }
}

/* Dải khuyến mãi chung — khi mọi gói đang giảm cùng lý do + cùng hạn (sharedPromo trong
   khoa-hoc.js): gom 1 lần lý do + đồng hồ đếm ngược thay vì lặp trên từng thẻ. */
.kh-promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 16px 20px; border-radius: 18px; color: #fff;
  background: linear-gradient(115deg, #e11d48 0%, #f43f5e 35%, #f97316 100%);
  box-shadow: 0 18px 40px -22px rgba(225,29,72,.8);
}
.kh-promo::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); animation: khPromoShine 4.5s ease-in-out infinite;
}
@keyframes khPromoShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.kh-promo-main { display: flex; align-items: center; gap: 14px; min-width: 0; position: relative; z-index: 1; }
.kh-promo-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2);
}
.kh-promo-ic svg { width: 24px; height: 24px; }
.kh-promo-title { font-size: 19px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.kh-promo-sub { font-size: 13px; font-weight: 600; opacity: .92; margin-top: 2px; }
.kh-promo .kh-countdown {
  margin: 0; padding: 8px 12px; background: rgba(0,0,0,.14); box-shadow: none; animation: none;
  position: relative; z-index: 1;
}
.kh-promo .kh-countdown-label { margin-bottom: 5px; }
@media (max-width: 600px) {
  .kh-promo { padding: 14px 16px; }
  .kh-promo .kh-countdown { width: 100%; }
  .kh-promo-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .kh-promo::after { animation: none; display: none; } }

.kh-nowrap { white-space: nowrap; }

/* Dòng cá nhân hoá phía trên các thẻ (gói đang dùng / gợi ý theo ngày thi). */
.kh-pricing-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  padding: 13px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; color: var(--text);
  border: 1.5px solid var(--bn-border); background: var(--bn-bg);
}
.kh-pricing-banner b { font-weight: 800; }
.kh-pricing-banner-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bn-ic); color: #fff;
}
.kh-pricing-banner-ic svg { width: 20px; height: 20px; }
.kh-pricing-banner--green { --bn-bg: var(--success-light); --bn-border: rgba(16,185,129,.35); --bn-ic: var(--success); }
.kh-pricing-banner--blue  { --bn-bg: var(--primary-light); --bn-border: rgba(29,111,242,.28); --bn-ic: var(--primary); }
.kh-pricing-banner--gold  { --bn-bg: rgba(255,192,0,.14); --bn-border: rgba(255,192,0,.5); --bn-ic: #d99a00; }
.kh-pricing-banner--warn  { --bn-bg: var(--warning-light); --bn-border: rgba(245,158,11,.45); --bn-ic: var(--warning); }

/* Lưới: chừa khoảng trên cho nhãn góc nhô ra khỏi thẻ. */
.kh-pricing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; padding-top: 14px;
  align-items: stretch;
}
@media (max-width: 900px) { .kh-pricing-grid { grid-template-columns: 1fr; gap: 28px; } }
.kh-pricing-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; }
@media (max-width: 1200px) { .kh-pricing-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; } }
@media (max-width: 600px)  { .kh-pricing-grid--4 { grid-template-columns: 1fr; gap: 30px; } }

.kh-price-card {
  --acc: var(--primary); --acc-2: #4f8ff7; --acc-soft: rgba(29,111,242,.08); --acc-text: var(--primary-dark);
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 22px; border-radius: 20px;
  background: linear-gradient(180deg, var(--acc-soft) 0%, var(--bg-card) 150px);
  border: 1.5px solid color-mix(in srgb, var(--acc) 26%, var(--border));
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kh-price-card::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: -1.5px; height: 3px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--acc), var(--acc-2));
}
.kh-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--acc) 55%, transparent);
  border-color: color-mix(in srgb, var(--acc) 55%, var(--border));
}
.kh-price-card--lite   { --acc: #0ea5e9; --acc-2: #38bdf8; --acc-soft: rgba(14,165,233,.09); --acc-text: #0369a1; }
.kh-price-card--basic  { --acc: #6366f1; --acc-2: #818cf8; --acc-soft: rgba(99,102,241,.10); --acc-text: #4338ca; }
.kh-price-card--pro    { --acc: var(--primary); --acc-2: #4f8ff7; --acc-soft: rgba(29,111,242,.09); --acc-text: var(--primary-dark); }
.kh-price-card--promax { --acc: #f5b000; --acc-2: #ffd24d; --acc-soft: rgba(255,192,0,.16); --acc-text: #8a5d00; }
:root[data-theme="dark"] .kh-price-card--lite   { --acc-text: #7dd3fc; }
:root[data-theme="dark"] .kh-price-card--basic  { --acc-text: #a5b4fc; }
:root[data-theme="dark"] .kh-price-card--pro    { --acc-text: #93c5fd; }
:root[data-theme="dark"] .kh-price-card--promax { --acc-text: var(--gold); }

/* Thẻ nổi bật (Đề xuất / Hợp với bạn): viền đậm màu gói + bóng màu, luôn "nhô" hơn thẻ khác. */
.kh-price-card.is-recommended, .kh-price-card.is-fit {
  border-width: 2px; border-color: var(--acc);
  box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--acc) 75%, transparent);
}
.kh-price-card.is-recommended::before, .kh-price-card.is-fit::before { height: 4px; }

/* Gói đã có / đã bao gồm trong gói đang dùng: làm mờ nhẹ, không nhấc lên khi rê chuột. */
.kh-price-card.is-owned:not(.is-current) { opacity: .72; }
.kh-price-card.is-owned:hover { transform: none; box-shadow: var(--shadow-sm); }
.kh-price-card.is-current { border-width: 2px; border-color: var(--acc); }

/* Nhãn góc trên: Đề xuất (vàng) / Hợp với bạn (xanh lá) / Gói hiện tại (màu gói). */
.kh-pc-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 5px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.35);
}
.kh-pc-tag svg { width: 12px; height: 12px; }
.kh-pc-tag--rec     { background: linear-gradient(120deg, #ffc000, #ffd84d); color: #3a2a00; }
.kh-pc-tag--fit     { background: linear-gradient(120deg, #059669, #10b981); color: #fff; }
.kh-pc-tag--current { background: var(--acc); color: #fff; }
.kh-price-card--promax .kh-pc-tag--current { color: #3a2a00; }

.kh-pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kh-pc-ic {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 8px 16px -8px var(--acc);
}
.kh-price-card--promax .kh-pc-ic { color: #3a2a00; }
.kh-price-card-name { font-size: 18px; font-weight: 800; color: var(--acc-text); line-height: 1.3; margin: 0; }

/* Lý do giảm giá (admin tự ghi, VD "Ưu đãi khai giảng", "Mừng 1.000 học viên") — nhãn nổi bật
   tông hồng-cam ấm, có dải sáng chạy nhẹ để hút mắt; chỉ hiện khi đợt giảm còn hiệu lực. */
.kh-price-card-reason {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; align-self: flex-start;
  margin: 0 0 12px; padding: 6px 12px 6px 10px; border-radius: 10px;
  background: linear-gradient(120deg, #f43f5e, #f97316);
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1.35;
  box-shadow: 0 6px 16px -8px rgba(244,63,94,.75);
}
.kh-price-card-reason svg { flex-shrink: 0; }
.kh-price-card-reason span { overflow-wrap: anywhere; }
.kh-price-card-reason::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); animation: khReasonShine 3.2s ease-in-out infinite;
}
@keyframes khReasonShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .kh-price-card-reason::after { animation: none; display: none; } }

.kh-price-card-fee-row { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kh-price-card-fee-original { font-size: 14px; color: var(--text-3); text-decoration: line-through; font-weight: 700; }
.kh-price-card-fee-badge {
  font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(120deg, #e11d48, #f97316);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
/* Giá là con số quan trọng nhất trên thẻ; giá sau giảm tách hẳn xuống dòng riêng, màu xanh lá
   (--success) — giữ đúng "cảm giác nhẹ nhàng" đã chốt cho các ô giá này. */
.kh-price-card-fee-amount { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -.5px; line-height: 1.1; }
.kh-price-card-fee-amount.sale { flex-basis: 100%; color: var(--success); }
.kh-price-card-duration { font-size: 13px; font-weight: 700; color: var(--text-2); }

.kh-pc-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.kh-pc-save {
  font-size: 11.5px; font-weight: 800; color: #047857; background: var(--success-light);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
:root[data-theme="dark"] .kh-pc-save { color: #6ee7b7; }

.kh-pc-feats {
  list-style: none; margin: 2px 0 20px; padding: 16px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--acc) 30%, var(--border));
  display: flex; flex-direction: column; gap: 10px;
}
.kh-pc-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); font-weight: 500; }
.kh-pc-feats li:first-child { font-weight: 700; }
.kh-pc-feat-ic {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc);
}
.kh-price-card--promax .kh-pc-feat-ic { color: #b07800; }
:root[data-theme="dark"] .kh-price-card--promax .kh-pc-feat-ic { color: var(--gold); }

.kh-price-card-register {
  margin-top: auto; min-height: 46px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 10px 20px -12px var(--acc);
  transition: filter .18s ease, transform .18s ease;
}
.kh-price-card-register:hover { filter: brightness(1.07); }
.kh-price-card-register:active { transform: scale(.98); }
.kh-price-card--promax .kh-price-card-register { color: #3a2a00; background: linear-gradient(135deg, #ffc000, #ffd84d); }
.kh-price-card-register.is-disabled, .kh-price-card-register[disabled] {
  background: var(--bg-hover); color: var(--text-2); box-shadow: none; cursor: default; filter: none; transform: none;
}

/* Hiện dần từng thẻ — CHỈ lần vẽ đầu (xem renderPricingCards: vẽ lại không chạy lại hiệu ứng). */
.kh-pricing-anim .kh-sec-head, .kh-pricing-anim .kh-price-card, .kh-pricing-anim .kh-trust {
  animation: khPcIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.kh-pricing-anim .kh-price-card:nth-child(1) { animation-delay: .05s; }
.kh-pricing-anim .kh-price-card:nth-child(2) { animation-delay: .12s; }
.kh-pricing-anim .kh-price-card:nth-child(3) { animation-delay: .19s; }
.kh-pricing-anim .kh-price-card:nth-child(4) { animation-delay: .26s; }
.kh-pricing-anim .kh-trust { animation-delay: .32s; }
@keyframes khPcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kh-pricing-anim .kh-sec-head, .kh-pricing-anim .kh-price-card, .kh-pricing-anim .kh-trust { animation: none; }
  .kh-price-card:hover { transform: none; }
}

/* Dải tạo niềm tin dưới bảng giá. */
.kh-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px;
}
.kh-trust--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kh-trust, .kh-trust--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .kh-trust, .kh-trust--3 { grid-template-columns: 1fr; } }
.kh-trust-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.kh-trust-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.kh-trust-ic svg { width: 20px; height: 20px; }
.kh-trust-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.kh-trust-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-top: 2px; }

.kh-compare-link {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content;
  margin: 22px auto 0; font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: none;
}
.kh-compare-link:hover { text-decoration: underline; }
.kh-compare-link svg { width: 14px; height: 14px; }

/* Modal mời đăng nhập trước khi mua (showSignInPrompt trong khoa-hoc.js) — thay confirm() mặc
   định của trình duyệt. */
.kh-confirm-modal { max-width: 380px; }
.kh-confirm-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.kh-confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Trạng thái đơn hàng SePay (renderPayBox/pollOrderStatus trong khoa-hoc.js) — spinner CSS thuần,
   không cần thư viện/ảnh gif. */
.kh-pay-status {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px;
  font-weight: 700; color: var(--text-2); line-height: 1.5;
}
.kh-pay-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: khSpin .7s linear infinite;
}
@keyframes khSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kh-pay-spinner { animation: none; } }

/* Nhãn thời hạn cũ dạng chữ tự do (tương thích ngược, xem priceCardUntilHtml trong khoa-hoc.js) */
.kh-price-card-until {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--warning);
  background: var(--warning-light); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 18px;
}

/* ── Đồng hồ đếm ngược "Giảm giá đến hết lúc" — tông đỏ/cam tạo cảm giác cấp bách, chạy thật
   từng giây (startCountdowns trong khoa-hoc.js). ── */
.kh-countdown {
  margin: 2px 0 18px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #ea580c);
  box-shadow: 0 6px 20px -6px rgba(220,38,38,.55);
  animation: khCountdownPulse 2.2s ease-in-out infinite;
}
@keyframes khCountdownPulse {
  0%, 100% { box-shadow: 0 6px 20px -6px rgba(220,38,38,.55); }
  50%      { box-shadow: 0 6px 26px -4px rgba(234,88,12,.85); }
}
.kh-countdown-label {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 8px; opacity: .95;
}
.kh-countdown-label svg { flex-shrink: 0; color: #fef08a; }
.kh-countdown-digits { display: flex; align-items: center; justify-content: center; gap: 6px; }
.kh-countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 38px; }
.kh-countdown-num {
  font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums; background: rgba(255,255,255,.16);
  border-radius: 7px; padding: 3px 0; width: 100%; text-align: center;
}
.kh-countdown-unit small { font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-top: 3px; text-transform: uppercase; letter-spacing: .3px; }
.kh-countdown-colon { font-size: 18px; font-weight: 800; color: rgba(255,255,255,.75); margin-top: -12px; }

@media (prefers-reduced-motion: reduce) { .kh-countdown { animation: none; } }

/* Lưới 4 cột (đủ 4 gói) trên màn rộng: thẻ hẹp nên thu nhỏ chữ + đồng hồ đếm ngược. */
@media (min-width: 1201px) {
  .kh-pricing-grid--4 .kh-price-card { padding: 24px 16px 18px; }
  .kh-pricing-grid--4 .kh-pc-ic { width: 40px; height: 40px; border-radius: 12px; }
  .kh-pricing-grid--4 .kh-price-card-name { font-size: 16px; }
  .kh-pricing-grid--4 .kh-price-card-fee-amount { font-size: 26px; }
  .kh-pricing-grid--4 .kh-pc-feats li { font-size: 13px; }
  .kh-pricing-grid--4 .kh-countdown { padding: 10px 8px; }
  .kh-pricing-grid--4 .kh-countdown-digits { gap: 3px; }
  .kh-pricing-grid--4 .kh-countdown-unit { min-width: 0; flex: 1; }
  .kh-pricing-grid--4 .kh-countdown-num { font-size: 17px; }
  .kh-pricing-grid--4 .kh-countdown-colon { font-size: 15px; }
}

/* Bảng so sánh: viền nổi cột của gói đang được gợi ý (highlightCompareColumn trong khoa-hoc.js). */
.kh-compare--hl-pro .kh-col-pro       { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
.kh-compare--hl-promax .kh-col-promax { box-shadow: inset 2px 0 0 #f5b000, inset -2px 0 0 #f5b000; }
.kh-compare--hl-pro th.kh-col-pro       { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 3px 0 var(--primary); }
.kh-compare--hl-promax th.kh-col-promax { box-shadow: inset 2px 0 0 #f5b000, inset -2px 0 0 #f5b000, inset 0 3px 0 #f5b000; }
.kh-compare--hl-pro tfoot .kh-col-pro       { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 -2px 0 var(--primary); }
.kh-compare--hl-promax tfoot .kh-col-promax { box-shadow: inset 2px 0 0 #f5b000, inset -2px 0 0 #f5b000, inset 0 -2px 0 #f5b000; }
/* Điện thoại (bảng xếp chồng, xem khối max-width:560px ở trên): mỗi ô là 1 mảnh rời trong lưới nên
   viền dọc liên tục không còn ý nghĩa — chỉ giữ viền nổi ở ô tên gói trên cùng. */
@media (max-width: 560px) {
  .kh-compare--hl-pro td.kh-col-pro, .kh-compare--hl-promax td.kh-col-promax { box-shadow: none; }
  .kh-compare--hl-pro th.kh-col-pro       { box-shadow: inset 0 -3px 0 var(--primary); }
  .kh-compare--hl-promax th.kh-col-promax { box-shadow: inset 0 -3px 0 #f5b000; }
}


/* ═══════════════════════════════════════════════════════════
   ĐÁNH GIÁ HỌC VIÊN (bằng chứng xã hội) — courses_config.reviews. Layout masonry (CSS columns)
   để card ảnh (dọc/ngang) và card chữ (ngắn/dài) xen kẽ tự nhiên, không bó khung như grid đều ô.
   ═══════════════════════════════════════════════════════════ */
.kh-reviews-section { margin: 8px 0 40px; }
.kh-reviews-title {
  font-size: 21px; font-weight: 800; color: var(--text); text-align: center;
  margin: 0 0 22px; text-wrap: balance;
}
.kh-reviews-grid { columns: 2; column-gap: 20px; }
@media (max-width: 640px) { .kh-reviews-grid { columns: 1; } }

.kh-review-card {
  break-inside: avoid; margin-bottom: 20px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm);
  overflow: hidden; opacity: 0; animation: khCardIn .4s ease forwards;
}
.kh-review-card:not(.kh-review-card--img) { padding: 20px; }
.kh-review-quote-icon { color: var(--primary); opacity: .35; margin-bottom: 8px; }
.kh-review-content { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0; }

.kh-review-card--img {
  cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease;
}
.kh-review-card--img:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kh-review-card--img:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kh-review-img { width: 100%; display: block; }
.kh-review-caption { padding: 12px 14px; }

.kh-review-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.kh-review-card--img .kh-review-footer { margin-top: 0; padding-top: 0; border-top: none; }
.kh-review-name { font-size: 13px; font-weight: 800; color: var(--text); }
.kh-review-score {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; color: var(--success); background: var(--success-light);
  padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.kh-review-score svg { flex-shrink: 0; }

.kh-lightbox-overlay {
  position: fixed; inset: 0; z-index: 10001; background: rgba(15,23,42,.85);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out; animation: khFadeIn .15s ease;
}
.kh-lightbox-img {
  max-width: 100%; max-height: 100%; border-radius: 12px; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════════════════════
   CÂU HỎI THƯỜNG GẶP (FAQ) — courses_config.faq. Accordion: mặc định mọi câu
   đóng, chỉ hiện đáp án của câu đang mở (max-height transition — không dùng
   display:none để có hiệu ứng trượt mượt khi mở/đóng).
   ═══════════════════════════════════════════════════════════ */
.kh-faq-section { margin: 8px 0 40px; }
.kh-faq-title {
  font-size: 21px; font-weight: 800; color: var(--text); text-align: center;
  margin: 0 0 22px; text-wrap: balance;
}
.kh-faq-list {
  max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
}
.kh-faq-item {
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--bg-card);
  overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.kh-faq-item.is-open { border-color: #c7d7fb; box-shadow: var(--shadow-sm); }

.kh-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border: none; background: none; cursor: pointer; font-family: inherit;
  text-align: left; color: var(--text);
}
.kh-faq-q-text { font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.kh-faq-item.is-open .kh-faq-q-text { color: var(--primary-dark); }
.kh-faq-chevron {
  flex-shrink: 0; display: inline-flex; color: var(--text-2);
  transition: transform .2s ease, color .2s ease;
}
.kh-faq-item.is-open .kh-faq-chevron { transform: rotate(180deg); color: var(--primary); }

.kh-faq-a {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.kh-faq-item.is-open .kh-faq-a { grid-template-rows: 1fr; }
.kh-faq-a-inner {
  overflow: hidden; min-height: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2);
}
.kh-faq-a > .kh-faq-a-inner { padding: 0 18px; }
.kh-faq-item.is-open .kh-faq-a-inner { padding: 0 18px 16px; }

/* ═══════════════════════════════════════════════════════════
   ĂN MỪNG SAU KHI NÂNG CẤP THÀNH CÔNG (checkUpgradeCelebration() trong khoa-hoc.js, chạy 1 lần
   duy nhất ngay sau khi tải lại trang từ nút "Tải lại trang ngay"). Cùng ngôn ngữ hình ảnh với
   showCelebration() ở exam-engine.js (Luyện nghe) — pháo hoa rơi + thẻ pop-in giữa màn hình.
   ═══════════════════════════════════════════════════════════ */
.kh-celeb-overlay { position: fixed; inset: 0; z-index: 10001; pointer-events: none; }
@keyframes khCelebFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(600deg) scale(.6); opacity: 0; }
}

.kh-celeb-card-wrap {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,.4); animation: khFadeIn .2s ease;
}
.kh-celeb-card-wrap.leave { animation: khCelebFadeOut .3s ease forwards; }
@keyframes khCelebFadeOut { to { opacity: 0; } }

.kh-celeb-card {
  background: var(--bg-card); border-radius: 28px; padding: 42px 40px; max-width: 340px;
  text-align: center; box-shadow: 0 28px 72px rgba(0,0,0,.25), 0 4px 20px rgba(99,102,241,.15);
  animation: khCelebCardIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
  position: relative; overflow: hidden;
}
@keyframes khCelebCardIn {
  0%   { opacity: 0; transform: scale(.55) translateY(20px); }
  65%  { transform: scale(1.06) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.kh-celeb-icon {
  color: var(--gold); margin-bottom: 14px; display: flex; justify-content: center;
  animation: khCelebIconPop 1s ease-in-out infinite;
}
@keyframes khCelebIconPop {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50%      { transform: scale(1.15) rotate(6deg); }
}
.kh-celeb-title {
  font-size: 26px; font-weight: 900; letter-spacing: -.3px; margin: 0 0 8px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.kh-celeb-desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.kh-celeb-desc b { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .kh-celeb-icon { animation: none; }
}