/* ==========================================================================
   Giao diện luyện đề chứng chỉ IT.
   CSS độc lập, KHÔNG phụ thuộc Tailwind đã build — tránh việc purge loại mất
   class và tránh đụng tới style của hệ `exams` cũ.
   Mọi selector đặt dưới .cert-* hoặc #cert-* để không rò ra phần còn lại của site.
   ========================================================================== */

:root {
  --cert-ground: #EEF2F8;
  --cert-surface: #FFFFFF;
  --cert-surface-alt: #F6F9FD;
  --cert-header: #0C1A2E;
  --cert-ink: #101C2E;
  --cert-ink-soft: #3C4B63;
  --cert-ink-mute: #64748B;
  --cert-line: #DDE5F0;
  --cert-line-soft: #EBF0F7;
  --cert-accent: #0069FF;          /* wave-500, màu thương hiệu sẵn có */
  --cert-accent-dim: #E6F0FF;
  --cert-accent-deep: #003F99;
  --cert-ok: #16A34A;
  --cert-ok-dim: #E7F6EC;
  --cert-ok-line: #A7DFBB;
  --cert-bad: #DC2626;
  --cert-bad-dim: #FDECEC;
  --cert-bad-line: #F5B5B5;
  --cert-mark: #D97706;
  --cert-mark-dim: #FEF3C7;
  --cert-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cert-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body.cert-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cert-ground);
  color: var(--cert-ink);
  font-family: var(--cert-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.cert-body * { box-sizing: border-box; }

.cert-app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- header cố định ---------- */
.cert-hd { flex: none; height: 58px; background: var(--cert-header); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.cert-hd-exit { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #FFFFFF2E; color: #E6EDF7; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.cert-hd-exit:hover { background: #FFFFFF14; border-color: #FFFFFF52; color: #fff; }
.cert-hd-div { width: 1px; height: 26px; background: #FFFFFF24; flex: none; }
.cert-hd-title { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cert-hd-title strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-hd-title span { font-size: 11px; color: #93A6C2; }
.cert-hd-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cert-timer { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF12; border: 1px solid #FFFFFF1F; padding: 6px 13px; border-radius: 999px; }
.cert-timer .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; flex: none; }
.cert-timer .val { font-family: var(--cert-mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.cert-timer .cap { font-size: 11px; color: #93A6C2; }
.cert-timer.is-urgent { background: #DC26261F; border-color: #DC262659; }
.cert-timer.is-urgent .dot { background: #F87171; animation: certBlip 1.1s ease-in-out infinite; }
.cert-timer.is-urgent .val { color: #FCA5A5; }
.cert-timer.is-off { opacity: .45; }
@keyframes certBlip { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.cert-submit { background: var(--cert-accent); border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.cert-submit:hover { background: #0057D6; }
.cert-submit:disabled { opacity: .55; cursor: not-allowed; }

body.cert-body button:focus-visible,
body.cert-body select:focus-visible,
body.cert-body a:focus-visible { outline: 2px solid var(--cert-accent); outline-offset: 2px; }
.cert-hd button:focus-visible, .cert-hd a:focus-visible { outline-color: #7FB2FF; }

/* ---------- thân hai cột ---------- */
.cert-bd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 336px; }
.cert-main { min-width: 0; overflow-y: auto; padding: 22px 26px 40px; }
.cert-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.cert-qmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-qidx { font-size: 13px; font-weight: 700; color: var(--cert-ink-mute); font-variant-numeric: tabular-nums; }
.cert-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--cert-accent-dim); color: var(--cert-accent-deep); }
.cert-chip.is-multiple { background: #F3E8FF; color: #6B21A8; }
.cert-chip.is-matching { background: var(--cert-mark-dim); color: #92400E; }
.cert-mark-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--cert-surface); border: 1px solid var(--cert-line); color: var(--cert-ink-soft); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.cert-mark-btn:hover { border-color: var(--cert-mark); color: var(--cert-mark); }
.cert-mark-btn[aria-pressed="true"] { background: var(--cert-mark-dim); border-color: var(--cert-mark); color: #92400E; }

.cert-card { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.cert-stem { margin: 0; font-size: 16.5px; line-height: 1.6; font-weight: 600; }
.cert-hint { font-size: 12.5px; color: var(--cert-ink-mute); margin: -8px 0 0; }

/* ---------- đáp án ---------- */
.cert-opts { display: flex; flex-direction: column; gap: 10px; }
.cert-opt { display: flex; align-items: flex-start; gap: 13px; padding: 13px 16px; border: 1px solid var(--cert-line); border-radius: 10px; background: var(--cert-surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; text-align: left; font: inherit; color: inherit; width: 100%; }
.cert-opt:hover:not([disabled]) { border-color: #B8CDEA; background: #FAFCFF; }
.cert-opt[disabled] { cursor: default; }
.cert-opt .box { width: 19px; height: 19px; flex: none; margin-top: 1px; border: 2px solid #B6C2D4; background: var(--cert-surface); display: grid; place-items: center; transition: border-color .15s; }
.cert-opt[data-shape="radio"] .box { border-radius: 50%; }
.cert-opt[data-shape="check"] .box { border-radius: 5px; }
.cert-opt .box::after { content: ""; width: 9px; height: 9px; background: var(--cert-accent); transform: scale(0); transition: transform .15s ease-out; }
.cert-opt[data-shape="radio"] .box::after { border-radius: 50%; }
.cert-opt[data-shape="check"] .box::after { border-radius: 2px; }
.cert-opt .key { font-size: 12.5px; font-weight: 700; color: var(--cert-ink-mute); width: 15px; flex: none; margin-top: 1px; }
.cert-opt .txt { font-size: 15px; color: var(--cert-ink-soft); }
.cert-opt[aria-checked="true"] { border-color: var(--cert-accent); background: var(--cert-accent-dim); box-shadow: inset 0 0 0 1px var(--cert-accent); }
.cert-opt[aria-checked="true"] .box { border-color: var(--cert-accent); }
.cert-opt[aria-checked="true"] .box::after { transform: scale(1); }
.cert-opt[aria-checked="true"] .key, .cert-opt[aria-checked="true"] .txt { color: var(--cert-accent-deep); font-weight: 600; }
.cert-opt.is-right { border-color: var(--cert-ok-line); background: var(--cert-ok-dim); box-shadow: inset 0 0 0 1px var(--cert-ok); }
.cert-opt.is-right .box { border-color: var(--cert-ok); }
.cert-opt.is-right .box::after { background: var(--cert-ok); transform: scale(1); }
.cert-opt.is-right .key, .cert-opt.is-right .txt { color: #15803D; }
.cert-opt.is-wrong { border-color: var(--cert-bad-line); background: var(--cert-bad-dim); box-shadow: inset 0 0 0 1px var(--cert-bad); }
.cert-opt.is-wrong .box { border-color: var(--cert-bad); }
.cert-opt.is-wrong .box::after { background: var(--cert-bad); transform: scale(1); }
.cert-opt.is-wrong .key, .cert-opt.is-wrong .txt { color: #B91C1C; }
.cert-opt .tag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; align-self: center; }
.cert-opt.is-right .tag { background: var(--cert-ok); color: #fff; }
.cert-opt.is-wrong .tag { background: var(--cert-bad); color: #fff; }

/* ---------- ghép đôi ---------- */
.cert-pairs { display: flex; flex-direction: column; gap: 10px; }
.cert-pair { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cert-line); border-radius: 10px; background: var(--cert-surface-alt); }
.cert-pair .p { font-size: 14.5px; color: var(--cert-ink-soft); }
.cert-pair select { font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--cert-line); border-radius: 8px; background: var(--cert-surface); color: var(--cert-ink); width: 100%; }
.cert-pair.is-right { border-color: var(--cert-ok-line); background: var(--cert-ok-dim); }
.cert-pair.is-wrong { border-color: var(--cert-bad-line); background: var(--cert-bad-dim); }
.cert-pair .verdict { grid-column: 2; font-size: 12px; font-weight: 600; margin-top: -4px; }
.cert-pair.is-right .verdict { color: #15803D; }
.cert-pair.is-wrong .verdict { color: #B91C1C; }

/* ---------- giải thích ---------- */
.cert-expl { border-left: 3px solid var(--cert-accent); background: var(--cert-accent-dim); border-radius: 0 10px 10px 0; padding: 14px 18px; }
.cert-expl h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cert-accent-deep); }
.cert-expl p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--cert-ink-soft); }

/* Nội dung giải thích dựng từ Markdown: đoạn văn, danh sách, in đậm, code.
   Chỉ nhắm trong .cert-expl-body để không đụng phần còn lại của trang. */
.cert-expl-body > *:first-child { margin-top: 0; }
.cert-expl-body > *:last-child { margin-bottom: 0; }
.cert-expl-body p { margin: 0 0 10px; }
.cert-expl-body strong { color: var(--cert-ink); font-weight: 700; }
.cert-expl-body em { font-style: italic; }
.cert-expl-body ul, .cert-expl-body ol {
  margin: 10px 0; padding-left: 22px;
  font-size: 14.5px; line-height: 1.68; color: var(--cert-ink-soft);
}
.cert-expl-body ul { list-style: disc; }
.cert-expl-body ol { list-style: decimal; }
.cert-expl-body li { margin: 4px 0; }
.cert-expl-body li::marker { color: var(--cert-accent); }
.cert-expl-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--cert-ink) 8%, transparent);
  color: var(--cert-accent-deep);
}
.cert-expl-body pre {
  margin: 10px 0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
  background: color-mix(in srgb, var(--cert-ink) 8%, transparent);
}
.cert-expl-body pre code { padding: 0; background: none; font-size: 13px; }
.cert-expl-body a { color: var(--cert-accent); text-decoration: underline; }
.cert-expl-body blockquote {
  margin: 10px 0; padding-left: 12px;
  border-left: 2px solid var(--cert-line); color: var(--cert-ink-mute);
}
/* Tiêu đề trong giải thích rất hiếm (30/44.544 câu) — kéo về cỡ chữ thường
   để không lấn nhãn "GIẢI THÍCH" ở trên. */
.cert-expl-body h1, .cert-expl-body h2, .cert-expl-body h3,
.cert-expl-body h4, .cert-expl-body h5, .cert-expl-body h6 {
  margin: 12px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--cert-ink);
}
.cert-verdict { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.cert-verdict.is-right { color: #15803D; }
.cert-verdict.is-wrong { color: #B91C1C; }

/* ---------- điều hướng ---------- */
.cert-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--cert-surface); border: 1px solid var(--cert-line); color: var(--cert-ink); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.cert-btn:hover:not(:disabled) { border-color: var(--cert-accent); color: var(--cert-accent); }
.cert-btn:disabled { opacity: .42; cursor: not-allowed; }
.cert-btn.is-primary { background: var(--cert-accent); border-color: var(--cert-accent); color: #fff; }
.cert-btn.is-primary:hover:not(:disabled) { background: #0057D6; border-color: #0057D6; color: #fff; }
.cert-navcount { font-size: 13px; font-weight: 600; color: var(--cert-ink-mute); font-variant-numeric: tabular-nums; }
.cert-navmid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
/* Nhãn đúng/sai trong thanh điều hướng chỉ cần trên điện thoại — màn lớn đã
   thấy nhãn gốc ngay phía trên phần giải thích. */
.cert-navverdict { display: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cert-navverdict.is-right { color: #15803D; }
.cert-navverdict.is-wrong { color: #B91C1C; }

/* ---------- cột phải ---------- */
.cert-side { background: var(--cert-surface); border-left: 1px solid var(--cert-line); display: flex; flex-direction: column; min-height: 0; }
.cert-side-hd { flex: none; padding: 16px 18px 14px; border-bottom: 1px solid var(--cert-line-soft); display: flex; flex-direction: column; gap: 12px; }
.cert-prog { display: flex; align-items: baseline; justify-content: space-between; }
.cert-prog .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cert-ink-mute); }
.cert-prog .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cert-prog .v em { font-style: normal; color: var(--cert-ink-mute); font-weight: 600; }
.cert-bar { height: 6px; border-radius: 999px; background: #E4EBF4; overflow: hidden; }
.cert-bar i { display: block; height: 100%; background: var(--cert-ok); border-radius: 999px; transition: width .3s; }
.cert-mode-note { font-size: 11.5px; color: var(--cert-ink-mute); line-height: 1.45; margin: 0; }

.cert-side-sc { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cert-cell { position: relative; aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--cert-line); background: var(--cert-surface); color: var(--cert-ink-soft); font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; transition: border-color .12s, background .12s, color .12s, transform .12s; }
.cert-cell:hover { border-color: var(--cert-accent); color: var(--cert-accent); transform: translateY(-1px); }
.cert-cell.is-done { background: var(--cert-ok-dim); border-color: var(--cert-ok-line); color: #15803D; }
.cert-cell.is-flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cert-mark); border: 2px solid var(--cert-surface); }
.cert-cell.is-current { background: var(--cert-accent); border-color: var(--cert-accent); color: #fff; box-shadow: 0 0 0 3px var(--cert-accent-dim); }
.cert-legend { flex: none; border-top: 1px solid var(--cert-line-soft); padding: 12px 18px 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cert-legend i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 11.5px; color: var(--cert-ink-mute); }
.cert-sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--cert-line); flex: none; }
.cert-sw.is-done { background: var(--cert-ok-dim); border-color: var(--cert-ok-line); }
.cert-sw.is-current { background: var(--cert-accent); border-color: var(--cert-accent); }
.cert-sw.is-flagged { background: var(--cert-mark); border-color: var(--cert-mark); }

/* ---------- hộp thoại xác nhận ---------- */
.cert-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; }
.cert-modal.is-open { display: flex; }
.cert-modal-ov { position: absolute; inset: 0; background: rgba(12, 26, 46, .55); }
.cert-modal-box { position: relative; background: var(--cert-surface); border-radius: 16px; padding: 28px; width: 100%; max-width: 460px; box-shadow: 0 24px 60px -18px rgba(12, 26, 46, .5); }
.cert-modal-box h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.cert-modal-box p { margin: 0 0 20px; color: var(--cert-ink-soft); font-size: 14.5px; line-height: 1.6; }
.cert-modal-stat { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cert-modal-stat span { background: var(--cert-surface-alt); border: 1px solid var(--cert-line); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; color: var(--cert-ink-soft); }
.cert-modal-stat b { color: var(--cert-ink); font-variant-numeric: tabular-nums; }
.cert-modal-act { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- màn kết quả ---------- */
.cert-result-page { min-height: 100vh; overflow-y: auto; padding: 40px 20px 72px; background: var(--cert-ground); }
body.cert-body.is-scrollable { overflow: auto; }
.cert-res { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.cert-score { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 16px; padding: 30px; text-align: center; }
.cert-score .big { font-family: var(--cert-mono); font-size: 58px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cert-score .scale { font-size: 13px; color: var(--cert-ink-mute); margin-top: 6px; }
.cert-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 22px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.cert-badge.is-pass { background: var(--cert-ok-dim); color: #15803D; }
.cert-badge.is-fail { background: var(--cert-bad-dim); color: #B91C1C; }
.cert-est { margin-top: 16px; font-size: 12.5px; color: var(--cert-ink-mute); background: var(--cert-surface-alt); border: 1px dashed var(--cert-line); border-radius: 9px; padding: 11px 15px; line-height: 1.55; text-align: left; }
.cert-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cert-stat { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px; padding: 16px 18px; }
.cert-stat .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cert-ink-mute); }
.cert-stat .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.cert-panel { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px; overflow: hidden; }
.cert-panel h3 { margin: 0; padding: 14px 18px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cert-ink-mute); border-bottom: 1px solid var(--cert-line-soft); }
.cert-trow { display: grid; grid-template-columns: 130px 1fr 64px; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--cert-line-soft); }
.cert-trow:last-child { border-bottom: 0; }
.cert-trow .nm { font-size: 14px; font-weight: 600; }
.cert-trow .n { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cert-mini { height: 8px; border-radius: 999px; background: #E4EBF4; overflow: hidden; }
.cert-mini i { display: block; height: 100%; background: var(--cert-accent); border-radius: 999px; }
.cert-res-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- điện thoại ---------- */
@media (max-width: 900px) {
  .cert-bd { grid-template-columns: minmax(0, 1fr); position: relative; }
  .cert-main { padding: 16px 14px 12px; }   /* đáy hẹp vì thanh điều hướng găm ở đó */
  .cert-card { padding: 18px 16px; }
  .cert-pair { grid-template-columns: minmax(0, 1fr); }
  .cert-pair .verdict { grid-column: 1; }
  .cert-hd-title span { display: none; }
  .cert-hd-exit span { display: none; }
  .cert-timer .cap { display: none; }
  .cert-side { position: absolute; inset: 0 0 0 auto; width: 300px; z-index: 20; transform: translateX(101%); transition: transform .26s cubic-bezier(.32, .72, 0, 1); box-shadow: -12px 0 34px -12px rgba(12, 26, 46, .4); }
  .cert-app[data-side="open"] .cert-side { transform: translateX(0); }
  .cert-side-toggle { display: inline-grid !important; }

  /* Giải thích dài (trung vị ~670 ký tự, 13% vượt 1.200) đẩy thanh điều hướng
     xuống quá tầm với. Găm nó vào đáy vùng cuộn để lúc nào cũng bấm được,
     không bắt người học phải thu gọn hay cuộn hết mới sang câu sau. */
  .cert-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    /* Kéo tràn ra hai mép và đáy để nền che kín, bù đúng padding của .cert-main */
    margin: 4px -14px -12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cert-surface);
    border-top: 1px solid var(--cert-line);
  }
  .cert-nav .cert-btn { padding: 10px 14px; }
  .cert-navverdict { display: block; }
}
.cert-side-toggle { display: none; place-items: center; width: 34px; height: 34px; background: #FFFFFF14; border: 1px solid #FFFFFF24; border-radius: 8px; color: #E6EDF7; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  body.cert-body *, body.cert-body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Catalog — chạy BÊN TRONG layout chung của site (theme::layouts.app),
   nên không đụng tới `body`, chỉ dùng tiền tố .certcat-
   Đi hai cấp: hãng -> chứng chỉ -> đề, vì danh mục có hơn 60 chứng chỉ.
   ========================================================================== */

.certcat { max-width: 1200px; margin: 0 auto; padding: 32px 20px 72px; font-family: var(--cert-sans); color: var(--cert-ink); }

/* ---------- đầu trang ---------- */
.certcat-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.certcat-head h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.certcat-head p { margin: 0; color: var(--cert-ink-mute); max-width: 68ch; font-size: 15px; }
.certcat-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.certcat-totals span {
  background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 999px;
  padding: 6px 15px; font-size: 13px; color: var(--cert-ink-soft);
}
.certcat-totals b { color: var(--cert-accent-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

.certcat-crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cert-ink-mute); margin-bottom: 16px; }
.certcat-crumb a { color: var(--cert-accent); text-decoration: none; font-weight: 600; }
.certcat-crumb a:hover { text-decoration: underline; }
.certcat-crumb strong { color: var(--cert-ink); font-weight: 700; }

/* ---------- ô tìm kiếm ---------- */
.certcat-search { position: relative; margin-bottom: 22px; }
.certcat-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--cert-ink-mute); pointer-events: none; }
.certcat-search input {
  width: 100%; font: inherit; font-size: 15px; color: var(--cert-ink);
  padding: 13px 18px 13px 46px; background: var(--cert-surface);
  border: 1px solid var(--cert-line); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.certcat-search input::placeholder { color: var(--cert-ink-mute); }
.certcat-search input:focus { outline: none; border-color: var(--cert-accent); box-shadow: 0 0 0 3px var(--cert-accent-dim); }

/* ---------- lưới thẻ ---------- */
.certcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }

/* ---------- thẻ HÃNG ---------- */
.certcat-vcard {
  display: flex; flex-direction: column; background: var(--cert-surface);
  border: 1px solid var(--cert-line); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.certcat-vcard:hover { border-color: var(--cert-accent); transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(12, 26, 46, .4); }
/* Nền lấy màu nhận diện của hãng qua biến --v đặt inline trên thẻ.
   16 thẻ cùng một màu thì mắt không phân biệt được hãng nào với hãng nào. */
.certcat-vcard-top {
  height: 118px; display: grid; place-items: center; position: relative; overflow: hidden;
  /* nền dự phòng cho trình duyệt chưa hỗ trợ color-mix — vẫn ra đúng màu hãng,
     chỉ mất hiệu ứng chuyển sắc */
  background: var(--v, #0069FF);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v, #0069FF) 88%, white) 0%,
    color-mix(in srgb, var(--v, #0069FF) 78%, black) 100%);
}
/* vân sáng chéo để mảng màu không bị phẳng */
.certcat-vcard-top::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 14%, rgba(255,255,255,.24), transparent 46%);
}
/* tấm nền trắng cho logo — logo hãng vốn thiết kế để đặt trên nền sáng,
   đặt thẳng lên nền màu sẽ chìm hoặc chói */
.certcat-vcard-top .plate {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 108px; height: 66px; padding: 10px 14px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 6px 18px -6px rgba(8, 20, 40, .45);
}
.certcat-vcard-top .plate img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.certcat-vcard-top .mono {
  font-weight: 800; font-size: 21px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--v, #0069FF);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.certcat-vcard-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.certcat-vcard-body h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.certcat-vcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 20px; border-top: 1px solid var(--cert-line-soft);
  font-size: 13.5px; font-weight: 700; color: var(--cert-accent);
}
.certcat-vcard-foot svg { width: 17px; height: 17px; transition: transform .16s; }
.certcat-vcard:hover .certcat-vcard-foot svg { transform: translateX(3px); }

/* ---------- dòng thống kê ---------- */
.certcat-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.certcat-stats li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cert-ink-mute); }
.certcat-stats svg { width: 16px; height: 16px; flex: none; color: var(--cert-accent); }
.certcat-stats b { color: var(--cert-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- thẻ CHỨNG CHỈ ---------- */
.certcat-card {
  display: flex; flex-direction: column; gap: 11px; background: var(--cert-surface);
  border: 1px solid var(--cert-line); border-radius: 16px; padding: 18px 20px 16px;
  text-decoration: none; color: inherit;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.certcat-card-hd { display: flex; align-items: center; gap: 8px; }
.certcat-pill { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.certcat-pill.is-free { background: var(--cert-ok-dim); color: #15803D; }
.certcat-pill.is-owned { background: var(--cert-accent-dim); color: var(--cert-accent-deep); }
.certcat-card-ft {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cert-line-soft); font-size: 12.5px;
}
.certcat-meta { color: var(--cert-ink-mute); }
.certcat-card:hover { border-color: var(--cert-accent); transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(12, 26, 46, .4); }
.certcat-code {
  display: inline-flex; align-self: flex-start; background: var(--cert-accent-dim);
  color: var(--cert-accent-deep); font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .04em;
}
.certcat-card h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.certcat-card .certcat-stats { margin-top: auto; }
.certcat-price {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--cert-line-soft); font-size: 13.5px;
}
.certcat-free { color: var(--cert-ok); font-weight: 700; }
.certcat-owned { color: var(--cert-ok); font-weight: 700; }
.certcat-lock { color: var(--cert-mark); font-weight: 700; }
.certcat-vnd { color: var(--cert-ink-mute); }

/* ---------- trang chi tiết một chứng chỉ ---------- */
.certcat-hero { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 16px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.certcat-hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.certcat-hero .sub { color: var(--cert-ink-mute); font-size: 14.5px; margin: 0; }
.certcat-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.certcat-fact { display: inline-flex; align-items: center; gap: 7px; background: var(--cert-surface-alt); border: 1px solid var(--cert-line); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; color: var(--cert-ink-soft); }
.certcat-fact b { color: var(--cert-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.certcat-fact.is-todo { background: var(--cert-mark-dim); border-color: #FCD9A0; color: #92400E; }
.certcat-note {
  margin: -6px 0 20px; padding: 11px 16px; font-size: 13px; line-height: 1.55;
  color: #7C4A03; background: var(--cert-mark-dim);
  border: 1px solid #FCD9A0; border-radius: 10px;
}
.certcat-flash {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; font-size: 14px;
  background: var(--cert-accent-dim); border: 1px solid var(--cert-accent); color: var(--cert-accent-deep);
}

/* ---------- danh sách đề ---------- */
.certcat-exams { display: flex; flex-direction: column; gap: 10px; }
.certcat-exam { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: center; background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px; padding: 16px 20px; }
.certcat-exam .nm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.certcat-exam .info { grid-column: 1; font-size: 12.5px; color: var(--cert-ink-mute); }
.certcat-exam .act { grid-row: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.certcat-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.certcat-tag.free { background: var(--cert-ok-dim); color: #15803D; }
.certcat-tag.locked { background: var(--cert-mark-dim); color: #92400E; }
.certcat-tag.doing { background: var(--cert-accent-dim); color: var(--cert-accent-deep); }

.certcat-empty { grid-column: 1 / -1; background: var(--cert-surface); border: 1px dashed var(--cert-line); border-radius: 14px; padding: 40px; text-align: center; color: var(--cert-ink-mute); }

@media (max-width: 640px) {
  .certcat { padding: 20px 14px 56px; }
  .certcat-head h1 { font-size: 24px; }
  .certcat-grid { grid-template-columns: 1fr; }
  .certcat-exam { grid-template-columns: 1fr; }
  .certcat-exam .act { grid-row: auto; }
}

/* ---------- dấu hiệu hãng ở đầu trang hãng ---------- */
.certcat-vendor-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.certcat-vendor-head h1 { grid-column: 2; }
.certcat-vendor-head p { grid-column: 2; }
.certcat-vendor-mark {
  grid-row: 1 / span 2; display: grid; place-items: center;
  width: 76px; height: 76px; padding: 12px; border-radius: 16px;
  background: #fff; border: 1px solid var(--cert-line);
  box-shadow: 0 8px 20px -10px rgba(8, 20, 40, .35);
  font-size: 17px; font-weight: 800; letter-spacing: .03em;
  color: var(--v, var(--cert-accent)); white-space: nowrap;
}
.certcat-vendor-mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* thẻ chứng chỉ thừa hưởng màu hãng từ lưới */
.certcat-card:hover { border-color: var(--cert-accent); }
/* Mã chứng chỉ giữ màu hãng — đây là chỗ nhận diện, và nó nhỏ nên không chói */
.certcat-code { background: color-mix(in srgb, var(--v, #0069FF) 11%, white); color: color-mix(in srgb, var(--v, #0069FF) 74%, black); }

@media (max-width: 640px) {
  .certcat-vendor-head { grid-template-columns: 1fr; }
  .certcat-vendor-head h1, .certcat-vendor-head p { grid-column: 1; }
  .certcat-vendor-mark { grid-row: auto; width: 60px; height: 60px; }
}

/* ---------- sao đánh giá ---------- */
.cert-stars { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1; }
.cert-stars .track {
  position: relative; display: inline-block; white-space: nowrap;
  color: #D8DFEA; letter-spacing: 1px; font-size: 15px;
}
.cert-stars .fill {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: #F5A524; white-space: nowrap; letter-spacing: 1px;
}
.cert-stars b { color: var(--cert-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cert-stars em { font-style: normal; color: var(--cert-ink-mute); font-size: 12px; }
/* Chưa ai đánh giá thì nói thẳng, KHÔNG hiện 5 sao giả */
.cert-stars.is-empty { color: var(--cert-ink-mute); font-size: 12.5px; font-style: italic; }
.cert-stars.sm .track { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- thanh công cụ: lọc + sắp xếp ---------- */
.certcat-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--cert-surface); border: 1px solid var(--cert-line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 20px;
}
.certcat-search.is-inline { flex: 1 1 260px; margin: 0; }
.certcat-search.is-inline input { padding: 10px 16px 10px 42px; border-radius: 10px; }
.certcat-search.is-inline svg { left: 14px; width: 17px; height: 17px; }
.certcat-sorts { display: flex; gap: 4px; flex-wrap: wrap; }
.certcat-sorts a {
  font-size: 12.5px; font-weight: 600; color: var(--cert-ink-soft); text-decoration: none;
  padding: 8px 13px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.certcat-sorts a:hover { background: var(--cert-surface-alt); color: var(--cert-accent); }
.certcat-sorts a.is-on {
  background: var(--cert-accent-dim);
  border-color: var(--cert-accent);
  color: var(--cert-accent-deep);
}

@media (max-width: 640px) {
  .certcat-toolbar { flex-direction: column; align-items: stretch; }
  .certcat-sorts { justify-content: flex-start; overflow-x: auto; }
}

/* ---------- widget đánh giá trên màn kết quả ---------- */
.cert-rate { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px; padding: 20px; text-align: center; }
.cert-rate h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
/* Xếp ngược 5→1 để CSS ~ tô được các sao bên trái sao đang chọn */
.cert-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 14px; }
.cert-rate-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.cert-rate-stars label { font-size: 30px; line-height: 1; color: #D8DFEA; cursor: pointer; transition: color .12s, transform .12s; }
.cert-rate-stars label:hover, .cert-rate-stars label:hover ~ label,
.cert-rate-stars input:checked ~ label { color: #F5A524; }
.cert-rate-stars label:hover { transform: scale(1.12); }
.cert-rate-stars input:focus-visible + label { outline: 2px solid var(--cert-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- số điểm kèm ảnh xu ---------- */
.cert-points { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--cert-mark); }
.cert-points img { width: 17px; height: 17px; object-fit: contain; display: block; flex: none; }
.cert-points b { font-variant-numeric: tabular-nums; }
.cert-points.lg { font-size: 16px; gap: 7px; }
.cert-points.lg img { width: 22px; height: 22px; }

/* ==========================================================================
   Trang thống kê của người dùng
   ========================================================================== */

.certdash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 26px; }
.certdash-kpi { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.certdash-kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cert-ink-mute); }
.certdash-kpi .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.certdash-kpi .v em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--cert-ink-mute); }
.certdash-kpi .v.is-ok { color: var(--cert-ok); }
.certdash-kpi .v.is-low { color: var(--cert-mark); }
.certdash-kpi .sub { font-size: 11.5px; color: var(--cert-ink-mute); }

.certdash-block { margin-bottom: 30px; }
.certdash-block > h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cert-ink-mute); }
.certdash-block > h2 span { background: var(--cert-accent-dim); color: var(--cert-accent-deep); font-size: 12px; padding: 2px 9px; border-radius: 999px; letter-spacing: 0; }
.certdash-block > h2::after { content: ""; flex: 1; height: 1px; background: var(--cert-line); }

/* đang làm dở */
.certdash-resume { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.certdash-resume-item {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center;
  background: var(--cert-surface); border: 1px solid var(--cert-accent); border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s;
}
.certdash-resume-item:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(12,26,46,.4); }
.certdash-resume-item .nm { font-size: 14.5px; font-weight: 700; }
.certdash-resume-item .meta { grid-column: 1 / -1; font-size: 12px; color: var(--cert-ink-mute); }
.certdash-resume-item .go { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--cert-accent); margin-top: 4px; }

/* biểu đồ cột xu hướng */
.certdash-trend {
  display: flex; align-items: flex-end; gap: 8px; height: 132px;
  background: var(--cert-surface); border: 1px solid var(--cert-line);
  border-radius: 12px; padding: 16px 18px;
}
.certdash-trend .bar {
  flex: 1; min-width: 14px; height: var(--h); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--cert-accent), color-mix(in srgb, var(--cert-accent) 62%, black));
  position: relative; display: flex; align-items: flex-start; justify-content: center;
}
.certdash-trend .bar b { position: absolute; top: -19px; font-size: 11px; font-weight: 700; color: var(--cert-ink-mute); font-variant-numeric: tabular-nums; }

/* thẻ tiến độ từng chứng chỉ */
.certdash-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.certdash-cert {
  background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit; transition: border-color .16s, transform .16s;
}
.certdash-cert:hover { border-color: var(--cert-accent); transform: translateY(-2px); }
.certdash-cert .hd { display: flex; align-items: center; gap: 9px; }
.certdash-cert .vendor { margin-left: auto; font-size: 11.5px; color: var(--cert-ink-mute); }
.certdash-cert h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.certdash-cert .prog-lbl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--cert-ink-mute); margin-bottom: 5px; }
.certdash-cert .prog-lbl b { color: var(--cert-ink); }
.certdash-cert .prog-bar { height: 7px; border-radius: 999px; background: #E4EBF4; overflow: hidden; }
.certdash-cert .prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cert-ok); }
.certdash-cert-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.certdash-cert-stats li { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--cert-ink-mute); }
.certdash-cert-stats b { color: var(--cert-ink); font-variant-numeric: tabular-nums; }

/* bảng lịch sử */
.certdash-table-wrap { background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px; overflow-x: auto; }
.certdash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
.certdash-table th, .certdash-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--cert-line-soft); vertical-align: middle; }
.certdash-table th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cert-ink-mute); background: var(--cert-surface-alt); white-space: nowrap; }
.certdash-table tr:last-child td { border-bottom: 0; }
.certdash-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.certdash-table .num em { display: block; font-style: normal; font-size: 11.5px; color: var(--cert-ink-mute); }
.certdash-table .ex { display: block; margin-top: 3px; color: var(--cert-ink-soft); }
.certdash-verdict { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.certdash-verdict.is-pass { background: var(--cert-ok-dim); color: #15803D; }
.certdash-verdict.is-fail { background: var(--cert-bad-dim); color: #B91C1C; }
.certdash-verdict.is-none { background: var(--cert-surface-alt); color: var(--cert-ink-mute); font-weight: 600; }
.certdash-link { color: var(--cert-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.certdash-link:hover { text-decoration: underline; }
.certdash-pages { margin-top: 14px; }

@media (max-width: 640px) {
  .certdash-kpi .v { font-size: 22px; }
  .certdash-certs, .certdash-resume { grid-template-columns: 1fr; }
}

/* lối vào trang thống kê từ catalog */
.certcat-mylink {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--cert-accent-dim); border: 1px solid var(--cert-accent);
  color: var(--cert-accent-deep); font-size: 13.5px; font-weight: 700;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  transition: background .15s;
}
.certcat-mylink:hover { background: color-mix(in srgb, var(--cert-accent) 18%, white); }
.certcat-mylink svg { width: 16px; height: 16px; }

/* ==========================================================================
   Trang nạp điểm và nâng cấp VIP
   ========================================================================== */

.topup-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.topup-balance {
  display: flex; align-items: center; gap: 12px;
  background: var(--cert-surface); border: 1px solid var(--cert-line);
  border-radius: 14px; padding: 14px 20px;
}
.topup-balance img { width: 34px; height: 34px; object-fit: contain; }
.topup-balance .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cert-ink-mute); }
.topup-balance .v { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.topup-vip-on {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #7C4A03;
  background: var(--cert-mark-dim); border: 1px solid #FCD9A0; border-radius: 14px; padding: 14px 20px;
}
.topup-vip-on .badge { background: var(--cert-mark); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .06em; }

.topup-error { background: var(--cert-bad-dim); border: 1px solid var(--cert-bad-line); color: #B91C1C; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }

.topup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.topup-grid.is-vip { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.topup-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 16px;
  padding: 26px 20px 20px; text-align: center;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.topup-card:hover { border-color: var(--cert-accent); transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(12,26,46,.4); }
.topup-card.is-featured { border-color: var(--cert-accent); box-shadow: 0 0 0 3px var(--cert-accent-dim); }
.topup-card.is-vip { align-items: stretch; text-align: left; }
.topup-card.is-vip h3 { margin: 0; font-size: 17px; font-weight: 800; }
.topup-card button { width: 100%; justify-content: center; margin-top: auto; }

.topup-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px;
  white-space: nowrap; letter-spacing: .02em;
}
.topup-badge.is-green { background: var(--cert-ok); color: #fff; }
.topup-badge.is-blue { background: var(--cert-accent); color: #fff; }
.topup-badge.is-purple { background: #7C3AED; color: #fff; }
.topup-badge.is-red { background: var(--cert-bad); color: #fff; }
.topup-card.is-vip .topup-badge { left: 20px; transform: none; }

.topup-points { display: flex; align-items: center; gap: 8px; }
.topup-points img { width: 26px; height: 26px; object-fit: contain; }
.topup-points b { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cert-mark); }
.topup-bonus { font-size: 12.5px; color: var(--cert-ok); font-weight: 600; }
.topup-bonus.is-muted { color: transparent; }
.topup-price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.topup-price em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--cert-ink-mute); margin-left: 1px; }
.topup-term { font-size: 12.5px; color: var(--cert-ink-mute); }
.topup-desc { margin: 0; font-size: 12.5px; color: var(--cert-ink-mute); line-height: 1.5; }

.topup-benefits { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.topup-benefits li { position: relative; padding-left: 22px; font-size: 13px; color: var(--cert-ink-soft); line-height: 1.45; }
.topup-benefits li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--cert-ok); font-weight: 800;
}

.topup-vip-intro {
  background: var(--cert-accent-dim); border: 1px solid var(--cert-accent);
  color: var(--cert-accent-deep); border-radius: 12px; padding: 13px 18px;
  font-size: 14px; line-height: 1.55; margin-bottom: 16px;
}

/* Bảng "điểm dùng được vào đâu": tên · giá · VIP có miễn không */
.topup-uses {
  display: grid; gap: 1px; background: var(--cert-line);
  border: 1px solid var(--cert-line); border-radius: 12px; overflow: hidden;
}
.topup-use {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px 16px; align-items: center;
  background: var(--cert-surface); padding: 13px 16px;
}
.topup-use .nm { font-size: 14px; font-weight: 700; }
.topup-use .cost { font-size: 13px; color: var(--cert-ink-mute); text-align: right; }
.topup-use .tag {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: var(--cert-line); color: var(--cert-ink-mute);
}
.topup-use.is-vipfree .tag {
  background: color-mix(in srgb, var(--cert-ok) 14%, transparent);
  color: var(--cert-ok);
}
@media (max-width: 560px) {
  .topup-use { grid-template-columns: 1fr auto; }
  .topup-use .cost { grid-column: 1 / -1; text-align: left; }
}

.topup-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.topup-sample {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center;
  background: var(--cert-surface); border: 1px solid var(--cert-line); border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color .16s;
}
.topup-sample:hover { border-color: var(--cert-accent); }
.topup-sample .nm { font-size: 14px; font-weight: 700; }
.topup-sample .meta { grid-column: 1 / -1; font-size: 12px; color: var(--cert-ink-mute); }
.topup-sample .cert-points { grid-column: 1 / -1; }

.topup-note { font-size: 13px; color: var(--cert-ink-mute); margin: 14px 0 0; }
.topup-note a { color: var(--cert-accent); font-weight: 600; text-decoration: none; }
.topup-note a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .topup-grid, .topup-grid.is-vip { grid-template-columns: 1fr; }
  .topup-status { flex-direction: column; align-items: stretch; }
}