/* Paid courses and ads: the paywall (pw-), ad slots (qc-), checkout (co-) and
   the "Quyền truy cập" page (ac-). Flat look, the site's own tokens.
   CLASS PREFIX qc- for ads, never ad-: ad blockers hide "ad-" classes. */
:root {
  --cm-ink: var(--flat-ink, #0a0a0a);
  --cm-paper: var(--flat-paper, #fff);
  --cm-hair: var(--flat-hair, #e6e6e6);
  --cm-blue: var(--flat-blue, #1a3aff);
  --cm-green: var(--flat-green, #0f7a4a);
  --cm-orange: var(--flat-orange, #e8501e);
  --cm-dim: #4b5563;
  --cm-lab: #9aa1ab;
  --cm-soft: #f5f5f5;
  --cm-on-blue: rgba(255, 255, 255, .86);
  --cm-font: var(--flat-font, 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

/* ---- lesson list: room for a lock --------------------------------------- */
.ls2-item:has(.ls2-item-x) { grid-template-columns: 24px 1fr auto; }
.ls2-item-x { font-size: 10px; color: var(--cm-lab); padding-top: 3px; }
.ls2-item.is-now .ls2-item-x { color: var(--cm-paper); }

/* ---- course page (new design, blue hero) --------------------------------- */
.cd2-access { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cd2-chip { display: inline-flex; gap: 7px; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px; border: 1.5px solid var(--cm-on-blue); color: var(--cm-paper); }
.cd2-chip-solid { background: var(--cm-paper); color: var(--cm-blue); border-color: var(--cm-paper); }
.cd2-price { display: flex; flex-wrap: wrap; margin-top: 22px; border: 2px solid var(--cm-paper); max-width: 680px; }
.cd2-price > div { flex: 1 1 180px; padding: 12px 16px; border-right: 2px solid var(--cm-paper); min-width: 0; }
.cd2-price > div:last-child { border-right: 0; }
.cd2-price small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-on-blue); font-weight: 700; }
.cd2-price b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cd2-price b em { font-size: 13px; font-weight: 600; letter-spacing: 0; font-style: normal; }
.cd2-price > div > em { font-style: normal; font-size: 12px; color: var(--cm-on-blue); }
@media (max-width: 560px) {
  .cd2-price > div { border-right: 0; border-bottom: 2px solid var(--cm-paper); flex-basis: 100%; }
  .cd2-price > div:last-child { border-bottom: 0; }
}
.cd2-lesson.is-lock .cd2-lesson-t { opacity: .7; }
.cd2-lesson-prev { color: var(--cm-on-blue); font-size: 12px; font-weight: 700; }

/* ---- paywall ------------------------------------------------------------- */
.pw-teaser { position: relative; max-height: 220px; overflow: hidden; }
.pw-teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(transparent, var(--cm-paper)); pointer-events: none; }
.pw { border: 2px solid var(--cm-ink); margin: 8px 0 28px; font-family: var(--cm-font); color: var(--cm-ink); background: var(--cm-paper); }
.pw-h { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-bottom: 2px solid var(--cm-ink); }
.pw-h > i { font-size: 18px; margin-top: 4px; }
.pw-h b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.pw-h span { display: block; font-size: 14px; color: var(--cm-dim); margin-top: 4px; line-height: 1.55; }
.pw-opts { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pw-opts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.pw-o { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-bottom: 2px solid var(--cm-ink); min-width: 0; }
.pw-o:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .pw-o { border-bottom: 0; border-right: 2px solid var(--cm-ink); }
  .pw-o:last-child { border-right: 0; }
}
.pw-best { background: var(--cm-blue); color: var(--cm-paper); }
.pw-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--cm-lab); }
.pw-best .pw-k { color: var(--cm-on-blue); }
.pw-t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pw-p { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pw-p small { font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.pw-l { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--cm-dim); }
.pw-best .pw-l { color: var(--cm-on-blue); }
.pw-l li { display: flex; gap: 8px; margin: 3px 0; }
.pw-l i { font-size: 11px; margin-top: 4px; }
.pw .pw-btn, .pw .pw-btn:link, .pw .pw-btn:visited { display: block; margin-top: auto; text-align: center; padding: 12px 16px; font-weight: 800;
  font-size: 14px; text-decoration: none; border: 2px solid var(--cm-ink); background: var(--cm-paper); color: var(--cm-ink); }
.pw .pw-btn-on, .pw .pw-btn-on:link, .pw .pw-btn-on:visited { background: var(--cm-ink); color: var(--cm-paper); }
.pw .pw-best .pw-btn, .pw .pw-best .pw-btn:link, .pw .pw-best .pw-btn:visited { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-paper); }
.pw .pw-btn:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 2px; }
.pw-none { padding: 18px 20px; margin: 0; color: var(--cm-dim); }
.pw-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 20px; border-top: 2px solid var(--cm-ink); font-size: 12.5px; color: var(--cm-dim); }
.pw-foot i { margin-right: 6px; }
.pw-foot a { color: var(--cm-ink); }
.pw-signin { margin: 0; padding: 12px 20px; border-top: 1px solid var(--cm-hair); font-size: 13.5px; }
.pw-signin a { color: var(--cm-blue); font-weight: 700; }

/* ---- ad slots ------------------------------------------------------------ */
/* A sticky lesson list slides over the ad below it while reading, and a sticky
   sidebar would make the ad itself follow the reader (which AdSense frowns on).
   With an ad in the sidebar, the list scrolls away like the rest of the page. */
.ls2-side:has(.qc-wrap) .ls2-side-in { position: static; max-height: none; }
.lesson-sidebar:has(.qc-wrap) { position: static; }
.qc-wrap { margin: 18px 0 0; min-width: 0; max-width: 100%; overflow: hidden; text-align: center; }
.qc-lab { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--cm-lab);
  text-align: left; margin-bottom: 6px; font-family: var(--cm-font); }
.qc-lesson-end, .qc-course-page, .qc-interview-detail, .qc-library-item, .qc-community-post, .qc-roadmap-page {
  margin: 28px 0; padding-top: 14px; border-top: 1px solid var(--cm-hair); }
.qc-catalogue-feed, .qc-documents-feed { margin: 0; grid-column: 1 / -1; }

/* ---- checkout ------------------------------------------------------------ */
.co-page { font-family: var(--cm-font); color: var(--cm-ink); background: var(--cm-paper); padding: clamp(22px, 4vw, 44px) 0 56px; }
.co-in { max-width: 920px; margin: 0 auto; padding: 0 16px; }
.co-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--cm-lab); }
.co-h1 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; margin: 6px 0 18px; text-wrap: balance; }
.co-box { display: grid; grid-template-columns: 1fr; border: 2px solid var(--cm-ink); }
@media (min-width: 760px) { .co-box { grid-template-columns: 1fr 1fr; } }
.co-l, .co-r { padding: 20px; min-width: 0; }
.co-l { border-bottom: 2px solid var(--cm-ink); }
@media (min-width: 760px) { .co-l { border-bottom: 0; border-right: 2px solid var(--cm-ink); } }
.co-sum { margin: 0; font-size: 14px; }
.co-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cm-hair); }
.co-sum dt { color: var(--cm-dim); }
.co-sum dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.co-sum .co-total dd { font-size: 18px; font-weight: 800; }
.co-steps { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13.5px; }
.co-steps li { display: flex; gap: 10px; padding: 6px 0; color: var(--cm-dim); }
.co-steps b { display: block; color: var(--cm-ink); }
.co-steps .n { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--cm-ink); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 11px; color: var(--cm-ink); }
.co-qr { width: 200px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; border: 2px solid var(--cm-ink); background: var(--cm-paper); padding: 6px; }
.co-qr svg { width: 100%; height: 100%; display: block; }
.co-bank { margin: 14px 0 0; font-size: 13.5px; }
.co-bank div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cm-hair); flex-wrap: wrap; }
.co-bank dt { color: var(--cm-dim); }
.co-bank dd { margin: 0; font-weight: 700; display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.co-copy { border: 1px solid var(--cm-ink); background: var(--cm-paper); color: var(--cm-ink); font: 600 11.5px var(--cm-font); padding: 3px 8px; cursor: pointer; }
.co-btn { display: block; width: 100%; margin-top: 16px; padding: 13px 18px; border: 2px solid var(--cm-ink); background: var(--cm-ink);
  color: var(--cm-paper); font: 800 14.5px var(--cm-font); cursor: pointer; text-align: center; text-decoration: none; }
.co-btn-ghost { background: var(--cm-paper); color: var(--cm-ink); }
.co-btn:focus-visible, .co-copy:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 2px; }
.co-note { font-size: 12.5px; color: var(--cm-dim); margin: 10px 0 0; line-height: 1.5; }
.co-msg { border: 2px solid var(--cm-ink); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.co-msg.ok { border-color: var(--cm-green); color: var(--cm-green); }
.co-msg.err { border-color: var(--cm-orange); color: var(--cm-orange); }
.co-plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.co-plan { border: 2px solid var(--cm-ink); padding: 8px 14px; font-weight: 700; font-size: 13.5px; text-decoration: none; color: var(--cm-ink); background: var(--cm-paper); }
.co-plan.on { background: var(--cm-ink); color: var(--cm-paper); }

/* ---- access page --------------------------------------------------------- */
.ac-mem { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; border: 2px solid var(--cm-ink); padding: 16px 18px; margin: 0 0 18px; }
.ac-mem b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.ac-mem span { font-size: 13.5px; color: var(--cm-dim); }
.ac-list { border: 2px solid var(--cm-ink); }
.ac-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--cm-hair); }
.ac-row:first-child { border-top: 0; }
@media (min-width: 720px) { .ac-row { grid-template-columns: minmax(0, 1fr) 190px 150px; align-items: center; } }
.ac-t { font-weight: 800; font-size: 15px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ac-m { font-size: 12.5px; color: var(--cm-dim); }
.ac-s { font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.ac-s.ok { color: var(--cm-green); }
.ac-s.soon { color: var(--cm-orange); }
.ac-s.off { color: var(--cm-lab); }
.ac-a { font-size: 13px; font-weight: 800; color: var(--cm-ink); }
.ac-h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-lab); margin: 26px 0 8px; }
.ac-table-wrap { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.ac-table th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-lab);
  padding: 6px 8px; border-bottom: 2px solid var(--cm-ink); }
.ac-table td { padding: 9px 8px; border-bottom: 1px solid var(--cm-hair); font-variant-numeric: tabular-nums; }
.ac-empty { border: 2px dashed var(--cm-hair); padding: 22px; color: var(--cm-dim); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .pw *, .co-page * { transition: none !important; } }

/* The ways to pay (Cài đặt › Thanh toán, includes/pay-gateways.php): tabs over one panel each. */
.co-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.co-method { flex: 1 1 120px; min-height: 44px; border: 2px solid var(--cm-ink); background: var(--cm-paper); color: var(--cm-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.co-method.on { background: var(--cm-ink); color: var(--cm-paper); }
.co-method:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 2px; }
.co-gw { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.co-gw .co-note { margin: 0; }
.co-renew { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.co-renew input { width: 18px; height: 18px; }
/* Mã giảm giá at checkout (thanh-toan.php, includes/course-codes.php) */
.co-sum s { color: #8b929c; font-weight: 500; }
.co-disc dt, .co-disc dd { color: #0f7a4a; }
.co-plan s { opacity: .6; font-weight: 500; margin-right: 2px; }
.co-code { margin-top: 14px; display: grid; gap: 8px; }
.co-code-f { display: grid; gap: 6px; }
.co-code-f label { font-size: 12.5px; font-weight: 700; }
.co-code-f span { display: flex; }
.co-code-f input { flex: 1; min-width: 0; border: 2px solid #0a0a0a; border-right: 0; padding: 10px 12px; font: 700 14px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.co-code-f button { border: 2px solid #0a0a0a; background: #0a0a0a; color: #fff; font-weight: 800; padding: 0 16px; cursor: pointer; }
.co-code-on { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; border: 2px solid #0f7a4a; padding: 10px 12px; color: #0f7a4a; font-weight: 600; font-size: 13.5px; }
.co-code-on small { display: block; color: #b45309; font-weight: 500; margin-top: 2px; }
.co-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: #0a0a0a; text-decoration: underline; cursor: pointer; }
/* the paywall with a code (includes/course-paywall.php) */
.pw-strip { display: flex; gap: 10px; align-items: center; padding: 10px 20px; border-bottom: 2px solid var(--cm-ink); font-size: 13.5px; font-weight: 700; color: #0f7a4a; }
.pw-p s { font-size: 15px; font-weight: 600; opacity: .6; margin-right: 6px; letter-spacing: 0; }
.pw-code-link { font-weight: 700; margin-left: auto; }