/* Course page as a classroom (block/product_detail/view_classroom.tpl): course overview above; outline on the left and lesson
   on the right. Colours follow the header's light/dark switch (html[data-meduc-theme]); dark is the default. */
.mcr {
  --mcr-bg: #050506;
  --mcr-panel: #0d0e11;
  --mcr-side: #09090b;
  --mcr-line: #24262c;
  --mcr-card-line: #3e414a;
  --mcr-ink: #f5f5f6;
  --mcr-muted: #a2a6ae;
  --mcr-red: #e8234f;
  --mcr-explain-accent: #a5b4fc;
  --mcr-red-soft: rgb(232 35 79 / .13);
  --mcr-hover: rgb(255 255 255 / .05);
  --mcr-tag-bg: rgb(245 166 35 / .16);
  --mcr-tag-ink: #f5b45a;
  --mcr-soft-button: rgb(255 255 255 / .08);
  padding: 22px 0 72px;
  background: var(--mcr-bg);
  color: var(--mcr-ink);
  font-family: Inter, Arial, sans-serif;
}
html[data-meduc-theme="light"] .mcr {
  --mcr-bg: #f5f5f7;
  --mcr-panel: #fff;
  --mcr-side: #fbfbfc;
  --mcr-line: #e5e6ea;
  --mcr-card-line: #cbd0d8;
  --mcr-ink: #15171c;
  --mcr-muted: #6b6f78;
  --mcr-red: #d4213d;
  --mcr-explain-accent: #4f46e5;
  --mcr-red-soft: rgb(212 33 61 / .08);
  --mcr-hover: rgb(21 23 28 / .04);
  --mcr-tag-bg: #fdf0e1;
  --mcr-tag-ink: #b5640e;
  --mcr-soft-button: #eef0f3;
}
.mcr *, .mcr *::before, .mcr *::after { box-sizing: border-box; }
.mcr [hidden] { display: none !important; }
.mcr a { text-decoration: none; }
.mcr button { font-family: inherit; }
.mcr a:focus-visible, .mcr button:focus-visible, .mcr summary:focus-visible, .mcr input:focus-visible { outline: 2px solid var(--mcr-red); outline-offset: 2px; }
.mcr-shell { width: min(94%, 1600px); margin-inline: auto; }
/* Rows whose blocks moved into the classroom would still leave their padding as blank bands. */
[nh-row]:not(:has([nh-block])) { display: none !important; }

/* Course heading and breadcrumb. */
.mcr-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcr-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mcr-muted); font: 500 13px/1.5 Inter, Arial, sans-serif; }
.mcr .mcr-breadcrumb a { color: var(--mcr-muted); }
.mcr .mcr-breadcrumb a:hover { color: var(--mcr-ink); }
.mcr-breadcrumb [aria-current] { color: var(--mcr-ink); }

/* Frame: outline + main */
.mcr-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); overflow: clip; border: 1px solid var(--mcr-line); border-radius: 16px; background: var(--mcr-panel); }
.mcr-sidebar { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; background: var(--mcr-side); scrollbar-width: thin; }
.mcr-outline-actions { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--mcr-side); }
.mcr .mcr-outline-actions--quiz > .mcr-mock-exam { flex:1; min-width:0; text-align:center; }
.mcr-outline-actions h3 { margin:0; color:var(--mcr-ink); font:700 15px/1.4 Inter,Arial,sans-serif; }
.mcr .mcr-mock-exam { position:relative; isolation:isolate; overflow:hidden; flex:none; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:8px; background:linear-gradient(110deg,#bd1939,var(--mcr-red),#e72b50); color:#fff; box-shadow:0 4px 12px rgb(212 33 61 / .2); font:700 13px/1.2 Inter,Arial,sans-serif; cursor:pointer; transition:filter .2s,box-shadow .2s; }
.mcr .mcr-mock-exam:hover { filter:brightness(1.1); box-shadow:0 5px 16px rgb(212 33 61 / .28); }
.mcr .mcr-mock-exam::after { content:""; position:absolute; top:-70%; bottom:-70%; left:-55%; width:40%; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .08),rgb(255 255 255 / .45),rgb(255 255 255 / .08),transparent); transform:skewX(-22deg); animation:mcr-glass-sweep 4.8s ease-in-out infinite; pointer-events:none; }
.mcr-lock, .mcr-files svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mcr-chapter { border-top: 1px solid var(--mcr-line); }
.mcr-chapter > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: start; gap: 4px; padding: 16px 18px 14px 22px; background: var(--mcr-red-soft); color: var(--mcr-red); cursor: pointer; list-style: none; }
.mcr-chapter summary::-webkit-details-marker { display: none; }
.mcr-chapter-number { padding-top: 2px; color: var(--mcr-red); font: 700 12px/1.4 Inter, Arial, sans-serif; }
.mcr-chapter-title { font: 700 13px/1.45 Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.mcr-chapter-title small { display: block; margin-top: 4px; color: var(--mcr-muted); font: 500 12px/1.3 Inter, Arial, sans-serif; text-transform: none; }
.mcr-chevron { width: 18px; height: 18px; fill: none; stroke: var(--mcr-muted); stroke-width: 2; transform: rotate(-90deg); transition: transform .15s; }
.mcr-chapter > summary .mcr-chevron { stroke: currentColor; }
.mcr-chapter[open] .mcr-chevron { transform: none; }
.mcr-lessons { margin: 0; padding: 8px 12px 12px; list-style: none; }
.mcr-lessons > li + li { border-top: 1px solid var(--mcr-line); }
.mcr .mcr-lesson { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 10px 10px 10px 10px; border-radius: 10px; color: var(--mcr-ink); font: 400 14px/1.45 Inter, Arial, sans-serif; transition: background-color .15s; }
.mcr .mcr-lesson:hover { background: var(--mcr-hover); }
.mcr .mcr-lesson.is-current { background: #bd263a; color: #fff; font-weight: 600; }
.mcr-lesson-number { color: var(--mcr-muted); font: 600 11.5px/1 Inter, Arial, sans-serif; }
.mcr-lesson.is-current .mcr-lesson-number { color: rgb(255 255 255 / .85); }
.mcr-tag { padding: 4px 8px; border-radius: 6px; background: var(--mcr-tag-bg); color: var(--mcr-tag-ink); font: 700 10px/1 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mcr-lock { color: var(--mcr-muted); opacity: .7; }
.mcr-tag--free { background:rgb(26 163 93 / .15); color:#36b979; }
html[data-meduc-theme="light"] .mcr-tag--free { color:#16824e; }
.mcr-tag--pro { background:var(--mcr-red-soft); color:var(--mcr-red); }
.mcr .mcr-lesson.is-current .mcr-tag { background:#fff; }
.mcr .mcr-lesson.is-current .mcr-tag--free { color:#16824e; }
.mcr .mcr-lesson.is-current .mcr-tag--pro { color:#bd263a; }

.mcr-main { min-width: 0; padding: 10px 32px 36px; border-left: 1px solid var(--mcr-line); }
.mcr-lesson-view, .mcr-sidebar { scroll-margin-top:calc(var(--mhi-header-h, 66px) + 12px); }

/* Buttons */
.mcr .mcr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; font: 700 15px/1.2 Inter, Arial, sans-serif; text-align: center; cursor: pointer; transition: filter .15s, background-color .15s, border-color .15s; }
.mcr .mcr-btn svg { width: 16px; height: 16px; fill: currentColor; }
.mcr .mcr-btn--primary { background: var(--mcr-red); color: #fff !important; }
.mcr .mcr-btn--primary:hover { filter: brightness(1.08); }
.mcr .mcr-btn--secondary { border-color: var(--mcr-line); background: var(--mcr-soft-button); color: var(--mcr-ink) !important; }
.mcr .mcr-btn--secondary:hover { border-color: var(--mcr-red); }
.mcr .mcr-btn--ghost { border-color: var(--mcr-line); background: transparent; color: var(--mcr-ink) !important; }
.mcr .mcr-btn--ghost:hover { background: var(--mcr-hover); }
.mcr .mcr-btn--ghost-light { border-color: rgb(255 255 255 / .4); background: transparent; color: #fff !important; }
.mcr .mcr-btn--ghost-light:hover { background: rgb(255 255 255 / .1); }
.mcr .mcr-btn--block { width: 100%; margin-top: 10px; }

/* Course information is a separate section above the classroom. */
.mcr-course-overview { margin-top:18px; padding:30px; border:1px solid var(--mcr-line); border-radius:16px; background:var(--mcr-panel); scroll-margin-top:calc(var(--mhi-header-h,66px) + 16px); }
.mcr-course-heading { margin-bottom:24px; }
.mcr-course-eyebrow { margin:0 0 10px; color:var(--mcr-red); font:700 11px/1.3 Inter,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.mcr .mcr-course-heading h1 { max-width:1100px; margin:0; color:var(--mcr-ink); font:800 clamp(26px,2.8vw,40px)/1.22 Inter,Arial,sans-serif; letter-spacing:-.035em; }
.mcr-intro { display:grid; grid-template-columns:minmax(0,1fr) 400px; align-items:start; gap:36px; }
.mcr-intro-main { min-width:0; }
.mcr-overview-image { display:block; width:100%; height:auto; margin-top:24px; border-radius:10px; }
.mcr-overview-pending { margin-top:24px; }
body:has([data-mcr]) [nh-block="6a5tyhf"], body:has([data-mcr]) [nh-block="zdi3rma"], body:has([data-mcr]) [nh-block="5y31vx8"] { display:none !important; }
/* Keep registration in view alongside a long description or overview image. */
.mcr-intro-side { position:sticky; top:calc(var(--mhi-header-h,66px) + 16px); align-self:start; max-height:calc(100dvh - var(--mhi-header-h,66px) - 32px); overflow-y:auto; scrollbar-width:thin; }
.mcr-overview-tabs { display:flex; align-items:stretch; gap:30px; min-height:54px; border-bottom:1px solid var(--mcr-line); overflow-x:auto; scrollbar-width:none; scroll-margin-top:calc(var(--mhi-header-h,66px) + 12px); }
.mcr-overview-tabs::-webkit-scrollbar { display:none; }
.mcr-overview-tabs button, .mcr .mcr-overview-jump { flex:none; padding:12px 0 15px; border:0; border-bottom:3px solid transparent; background:none; color:var(--mcr-muted); font:700 16px/1.3 Inter,Arial,sans-serif; cursor:pointer; }
.mcr-overview-tabs button:hover, .mcr .mcr-overview-jump:hover { color:var(--mcr-ink); }
.mcr-overview-tabs button[aria-selected="true"] { border-bottom-color:var(--mcr-red); color:var(--mcr-red); }
.mcr-about-preview { margin:0; color:var(--mcr-ink); font:400 16px/1.8 Inter,Arial,sans-serif; }
.mcr-read-more { display:inline-flex; gap:10px; align-items:center; margin-top:14px; padding:6px 0; border:0; background:none; color:var(--mcr-red); font:700 14px/1.4 Inter,Arial,sans-serif; cursor:pointer; }
.mcr-read-more:hover { text-decoration:underline; text-underline-offset:4px; }
.mcr-learning-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:38px 0 18px; scroll-margin-top:calc(var(--mhi-header-h,66px) + 16px); }
.mcr .mcr-learning-heading h2 { margin:0; color:var(--mcr-ink); font:800 26px/1.25 Inter,Arial,sans-serif; letter-spacing:-.025em; }
.mcr-learning-heading > span { color:var(--mcr-muted); font:500 13px/1.4 Inter,Arial,sans-serif; }
.mcr-related-courses { margin-top:40px; padding:28px; border:1px solid var(--mcr-line); border-radius:16px; background:var(--mcr-panel); }
.mcr-section { padding: 30px 0; border-bottom: 1px solid var(--mcr-line); scroll-margin-top: 130px; }
.mcr-section:last-of-type { border-bottom: 0; }
.mcr-intro-hero { padding-top: 26px; scroll-margin-top: 130px; }
.mcr-section--about:empty { display: none; }
.mcr .mcr-section-link { display: inline-block; margin-top: 18px; color: var(--mcr-red); font: 700 14px/1.4 Inter, Arial, sans-serif; }
.mcr-slot:empty { display: none; }
.mcr-slot + .mcr-slot { margin-top: 34px; }
.mcr-feedback { margin-top: 0; }
.mcr-slot:empty + .mcr-feedback { margin-top: 0; }
.mcr-intro-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111216; }
.mcr-intro-media iframe, .mcr-voice iframe { display: block; width: 100%; height: 100%; border: 0; }
.mcr-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.mcr-poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: #fff; cursor: pointer; }
.mcr-poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.mcr-poster:hover img { opacity: 1; }
.mcr-poster::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .6)); pointer-events: none; }
.mcr-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--mcr-red); box-shadow: 0 12px 34px rgb(0 0 0 / .45); transform: translate(-50%, -50%); transition: transform .2s; }
.mcr-play svg { width: 28px; height: 28px; margin-left: 3px; fill: #fff; }
.mcr-poster:hover .mcr-play { transform: translate(-50%, -50%) scale(1.06); }
.mcr-poster-label { position: absolute; z-index: 1; bottom: 16px; left: 18px; font: 700 11px/1.3 Inter, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mcr-buy { padding:26px 24px 24px; border:1px solid var(--mcr-line); border-top:3px solid var(--mcr-red); border-radius:16px; background:var(--mcr-panel); box-shadow:0 10px 36px rgb(0 0 0 / .06); }
.mcr-buy-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.mcr-buy-eyebrow { margin:0; color:var(--mcr-muted); font:700 11px/1.4 Inter,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.mcr-buy .mcr-price { flex-wrap:nowrap; justify-content:space-between; gap:12px; }
.mcr-buy .mcr-price strong { flex:0 1 auto; font-size:30px; letter-spacing:-.04em; white-space:nowrap; }
.mcr-buy .mcr-price s { flex:none; font-size:14px; white-space:nowrap; }
.mcr-buy .mcr-discount { flex:none; padding:4px 7px; background:var(--mcr-red-soft); color:var(--mcr-red); font-size:11px; }
.mcr-buy .mcr-unit-cost { display:flex; justify-content:space-between; align-items:baseline; gap:8px 12px; margin:18px 0 8px; padding:12px 14px; border:1px solid var(--mcr-line); border-radius:9px; background:var(--mcr-side); font-size:13px; }
.mcr-buy .mcr-unit-cost strong { color:var(--mcr-ink); font-size:17px; }
.mcr-buy .mcr-specs { margin:8px 0 0; border-top:0; }
.mcr-buy .mcr-specs div { align-items:flex-start; gap:12px; padding:15px 0; }
.mcr-buy .mcr-specs div:last-child { padding-bottom:15px; border-bottom:1px solid var(--mcr-line); }
.mcr-buy .mcr-specs dt { display:flex; align-items:center; gap:8px; flex:1 1 47%; font-size:13px; font-weight:500; }
.mcr-buy .mcr-specs dt svg, .mcr-owned svg { flex:none; width:17px; height:17px; fill:none; stroke:var(--mcr-red); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mcr-buy .mcr-specs dd { flex:1 1 53%; min-width:0; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.mcr-buy .mcr-buy-note { margin:18px 0 0; color:var(--mcr-muted); font-size:13px; font-weight:500; line-height:1.7; text-align:center; }
.mcr-buy-actions { display:grid; gap:10px; margin-top:20px; }
.mcr-buy-actions .mcr-btn { justify-content:center; min-height:49px; margin:0; padding:14px 18px; font-size:15px; }
.mcr-buy-actions .mcr-btn--primary { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(110deg,#bd1939,var(--mcr-red),#e72b50); box-shadow:0 5px 18px rgb(212 33 61 / .2); transition:filter .2s,box-shadow .2s; }
.mcr-buy-actions .mcr-btn--primary:hover { filter:brightness(1.08); box-shadow:0 7px 22px rgb(212 33 61 / .28); }
.mcr-buy-actions .mcr-btn--primary::after { content:""; position:absolute; top:-70%; bottom:-70%; left:-55%; width:40%; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .08),rgb(255 255 255 / .38),rgb(255 255 255 / .08),transparent); transform:skewX(-22deg); animation:mcr-glass-sweep 5.6s ease-in-out infinite; pointer-events:none; }
.mcr-buy .mcr-owned { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:19px; }
.mcr-buy .mcr-owned svg { width:21px; height:21px; margin-top:1px; stroke:#22a363; }
.mcr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.mcr-price strong { color: var(--mcr-red); font: 800 30px/1.1 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.mcr-price s { color: var(--mcr-muted); font: 500 16px/1.2 Inter, Arial, sans-serif; }
.mcr-discount { padding: 3px 8px; border-radius: 6px; background: var(--mcr-red); color: #fff; font: 700 12px/1.3 Inter, Arial, sans-serif; }
.mcr-price--center { justify-content: center; margin: 4px 0 18px; }
.mcr-price--center s { color: rgb(255 255 255 / .6); }
.mcr-buy-note { margin: 12px 0 4px; color: var(--mcr-muted); font: 500 13px/1.55 Inter, Arial, sans-serif; }
.mcr-unit-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 10px 0 16px; color: var(--mcr-muted); font: 500 12px/1.5 Inter, Arial, sans-serif; }
.mcr-unit-cost strong { color: var(--mcr-ink); font-size: 17px; font-weight: 700; }
.mcr-assurance { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mcr-line); }
.mcr .mcr-assurance-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mcr-red); font: 800 11px/1.45 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mcr-assurance-title svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mcr-assurance ul { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.mcr-assurance li { position: relative; margin: 0; padding-left: 12px; color: var(--mcr-muted); font: 400 12px/1.65 Inter, Arial, sans-serif; }
.mcr-assurance li::before { position: absolute; top: .65em; left: 0; width: 4px; height: 4px; background: var(--mcr-red); content: ""; }
.mcr-assurance strong { color: var(--mcr-ink); font-weight: 700; }

.mcr-specs { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--mcr-line); }
.mcr-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mcr-line); }
.mcr-specs div:last-child { border-bottom: 0; padding-bottom: 0; }
.mcr-specs dt { flex: none; color: var(--mcr-muted); font: 600 13px/1.45 Inter, Arial, sans-serif; }
.mcr-specs dd { margin: 0; color: var(--mcr-ink); font: 600 13.5px/1.45 Inter, Arial, sans-serif; text-align: right; }
.mcr-owned { margin: 0 0 6px; color: var(--mcr-ink); font: 800 20px/1.3 Inter, Arial, sans-serif; }
/* Teachers */
.mcr-teachers { display: grid; gap: 14px; }
.mcr-teacher-card { display: flex; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--mcr-line); border-radius: 12px; }
.mcr-teacher-card img { flex: none; width: 110px; height: 140px; border-radius: 10px; background: #1b1d22; object-fit: cover; }
.mcr-teacher-card img.is-poster { object-position: 88% 40%; }
.mcr-teacher-subject { display: inline-block; padding: 4px 9px; border-radius: 100px; background: var(--mcr-soft-button); color: var(--mcr-ink); font: 700 10.5px/1.3 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mcr .mcr-teacher-card h3 { margin: 10px 0 0; color: var(--mcr-ink); font: 800 19px/1.3 Inter, Arial, sans-serif; letter-spacing: -.01em; }
.mcr-teacher-card p { margin: 6px 0 0; color: var(--mcr-muted); font: 400 14px/1.6 Inter, Arial, sans-serif; }
.mcr .mcr-section-title { margin: 0 0 14px; color: var(--mcr-ink); font: 700 20px/1.3 Inter, Arial, sans-serif; }
/* Admin-written HTML: its own colours and fonts are overridden so it stays readable in both themes. */
.mcr-richtext { position: relative; color: var(--mcr-ink); font: 400 15.5px/1.75 Inter, Arial, sans-serif; overflow-wrap: anywhere; }
.mcr-richtext * { color: inherit !important; background: transparent !important; font-family: inherit !important; }
.mcr-richtext img { max-width: 100%; height: auto; border-radius: 8px; }
.mcr-richtext p { margin: 0 0 12px; }
.mcr-lead { margin-bottom: 14px; }

/* Lesson */
.mcr-toolbar { position:sticky; top:var(--mhi-header-h,66px); z-index:40; display:flex; align-items:stretch; justify-content:space-between; gap:16px; min-height:67px; margin:0 0 22px; padding:4px 0 0; border-bottom:1px solid var(--mcr-line); background:var(--mcr-panel); box-shadow:0 12px 22px -22px rgb(0 0 0 / .6); }
.mcr-tabs { display:flex; align-items:stretch; min-width:0; gap:26px; overflow-x:auto; scrollbar-width:none; }
.mcr-tabs::-webkit-scrollbar { display: none; }
.mcr-tabs button, .mcr .mcr-tab-jump { display:flex; align-items:center; flex:none; padding:0; border:0; border-bottom:3px solid transparent; background: none; color: var(--mcr-muted); font: 600 15px/1.2 Inter, Arial, sans-serif; cursor: pointer; }
.mcr-tabs button:hover, .mcr .mcr-tab-jump:hover { color: var(--mcr-ink); }
.mcr-tabs button[aria-selected="true"] { border-bottom-color: var(--mcr-red); color: var(--mcr-red); }
.mcr-toolbar-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 8px; }
.mcr-toolbar-price strong { color:var(--mcr-red); font:800 21px/1.2 Inter,Arial,sans-serif; letter-spacing:-.035em; }
.mcr-toolbar-price s { color:var(--mcr-muted); font:500 12px/1.2 Inter,Arial,sans-serif; }
.mcr-toolbar-discount { padding:3px 6px; border-radius:5px; background:rgb(232 35 79 / .14); color:var(--mcr-red); font:800 10px/1.2 Inter,Arial,sans-serif; font-style:normal; white-space:nowrap; }
@keyframes mcr-glass-sweep { 0%,55% { transform:translateX(0) skewX(-22deg); } 82%,100% { transform:translateX(390%) skewX(-22deg); } }
.mcr-toolbar-progress { padding-bottom: 14px; color: var(--mcr-muted); font: 600 13px/1.2 Inter, Arial, sans-serif; }

/* Video stage */
/* The layers sit in one grid cell. While a card shows, the frame drops its fixed 16:9 ratio (keeping 16:9 as the
   minimum height, measured on the panel's width), so a sign-up card on a narrow screen is never cut off. */
.mcr-panel { container-type: inline-size; }
/* The quiz dialog must use the viewport as its fixed-position containing block. */
.mcr-panel[data-mcr-panel="quiz"] { container-type:normal; }
.mcr-stage:has(> .mcr-stage-card:not([hidden])) { aspect-ratio: auto; min-height: calc(100cqw * 9 / 16); }
.mcr-stage { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 72% 28%, rgb(232 35 79 / .32), transparent 55%), linear-gradient(135deg, #1c2028, #121318); color: #fff; }
.mcr-stage > * { grid-area: 1 / 1; min-width: 0; }
.mcr-stage-poster { position: relative; }
.mcr-stage-poster img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.mcr-stage-poster img:not([src]) { display: none; }
.mcr-stage-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0; border: 0; background: transparent; color: #fff; font: 600 16px/1.3 Inter, Arial, sans-serif; cursor: pointer; }
.mcr-stage-play .mcr-play { position: static; width: 82px; height: 82px; transform: none; }
.mcr-stage-play:hover .mcr-play { transform: scale(1.06); }
.mcr-stage-player iframe, .mcr-stage-player > div { display: block; width: 100%; height: 100%; border: 0; }
.mcr-stage-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; background: linear-gradient(180deg, rgb(10 10 12 / .72), rgb(20 2 10 / .9)); text-align: center; }
.mcr-card-icon { width: 40px; height: 40px; margin-bottom: 14px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.mcr-card-kicker { margin: 0 0 8px; color: #ff8aa1; font: 700 11px/1.3 Inter, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mcr-stage-card h3 { max-width: 560px; margin: 0; color: #fff; font: 800 clamp(20px, 2vw, 28px)/1.3 Inter, Arial, sans-serif; letter-spacing: -.015em; }
.mcr-stage-card p { max-width: 520px; margin: 10px 0 0; color: rgb(255 255 255 / .78); font: 400 15px/1.6 Inter, Arial, sans-serif; }
.mcr-stage-card .mcr-price strong { color: #fff; }
.mcr-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.mcr-card-link { margin-top: 16px; padding: 0; border: 0; background: none; color: #ffd08a; font: 600 14px/1.4 Inter, Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mcr-lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.mcr-nav-button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--mcr-line); border-radius: 10px; background: transparent; color: var(--mcr-ink); font: 600 14px/1.2 Inter, Arial, sans-serif; cursor: pointer; }
.mcr-nav-button:hover:not(:disabled) { border-color: var(--mcr-red); color: var(--mcr-red); }
.mcr-nav-button:disabled { opacity: .35; cursor: default; }
.mcr-position { color: var(--mcr-muted); font: 700 12px/1 Inter, Arial, sans-serif; letter-spacing: .1em; }

/* Files, quizzes, feedback */
.mcr-empty { margin: 0; padding: 30px 24px; border: 1px dashed var(--mcr-line); border-radius: 12px; color: var(--mcr-muted); font: 500 15px/1.6 Inter, Arial, sans-serif; text-align: center; }
.mcr-files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mcr .mcr-files a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--mcr-line); border-radius: 10px; color: var(--mcr-ink); font: 600 14.5px/1.4 Inter, Arial, sans-serif; overflow-wrap: anywhere; }
.mcr .mcr-files a:hover { border-color: var(--mcr-red); }
.mcr-quiz-card { display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 1.5px solid var(--mcr-card-line); border-radius: 14px; background: var(--mcr-panel); }
.mcr .mcr-quiz-card h3 { margin: 0; color: var(--mcr-ink); font: 700 18px/1.35 Inter, Arial, sans-serif; }
.mcr-quiz-card p { margin: 6px 0 0; color: var(--mcr-muted); font: 400 14px/1.55 Inter, Arial, sans-serif; }
.mcr-quiz-card .mcr-btn { flex: none; }
.mcr-quiz-card > div:first-child { flex:1; min-width:0; }
.mcr-quiz-actions { display:flex; flex:none; align-items:center; gap:10px; }
.mcr .mcr-quiz-actions .mcr-btn { min-height:42px; padding:10px 16px; font-size:14px; }
.mcr .mcr-quiz-actions [data-mcr-quiz-history] { border-color:var(--mcr-ink); background:var(--mcr-ink); color:var(--mcr-panel) !important; }
.mcr .mcr-quiz-actions [data-mcr-quiz-history]:hover { opacity:.85; }
.mcr-quiz-card > .mcr-quiz-error { flex-basis:100%; margin:0; }
.mcq-submit-actions { display:flex; flex:none; align-items:center; gap:8px; }
.mcq-history-tabs { display:flex; gap:28px; margin:0; border-bottom:1px solid var(--mcr-line); }
.mcq-history-tab { padding:12px 0; border:0; border-bottom:3px solid transparent; background:none; color:var(--mcr-muted); font:700 15px/1.4 Inter,Arial,sans-serif; cursor:pointer; }
.mcq-history-tab[aria-selected="true"] { color:var(--mcr-red); border-bottom-color:var(--mcr-red); }
.mcq-history-panel[hidden] { display:none; }
.mcq-notebook-intro { margin:22px 0 0; color:var(--mcr-muted); font:400 14px/1.65 Inter,Arial,sans-serif; }
.mcq-notebook-list { display:grid; gap:12px; }
.mcq-notebook-item { border:1px solid var(--mcr-line); border-radius:12px; background:var(--mcr-panel); }
.mcq-notebook-item > summary { display:flex; align-items:flex-start; gap:14px; padding:18px; color:var(--mcr-ink); font:600 15px/1.55 Inter,Arial,sans-serif; cursor:pointer; list-style:none; }
.mcq-notebook-item > summary::-webkit-details-marker { display:none; }
.mcq-notebook-item > summary::after { content:"+"; flex:none; margin-left:auto; color:var(--mcr-muted); font-size:20px; line-height:1.1; }
.mcq-notebook-item[open] > summary { border-bottom:1px solid var(--mcr-line); }
.mcq-notebook-item[open] > summary::after { content:"−"; }
.mcq-notebook-number { flex:none; padding:4px 8px; border-radius:6px; background:var(--mcr-red-soft); color:var(--mcr-red); font:700 12px/1.4 Inter,Arial,sans-serif; }
.mcq-notebook-question { min-width:0; overflow-wrap:anywhere; }
.mcq-notebook-item .mcq-review-question { margin:0; padding:20px 18px; border:0; }
.mcr-quiz-list { display: grid; gap: 12px; }
.mcr .mcr-quiz-card .mcr-quiz-error { color: var(--mcr-red); font-weight: 600; }
/* Filter of a long quiz list (exam-prep lessons). */
.mcr-quiz-filter { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mcr-quiz-filter input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--mcr-line); border-radius: 10px; background: var(--mcr-panel); color: var(--mcr-ink); font: 500 14.5px/1.3 Inter, Arial, sans-serif; }
.mcr-quiz-filter input::placeholder { color: var(--mcr-muted); }
.mcr-quiz-filter span { flex: none; color: var(--mcr-muted); font: 600 13px/1.3 Inter, Arial, sans-serif; }
/* A quiz for the course's students only: its name and size, and the sign-up button. */
.mcr-quiz-card.is-locked { background: transparent; }
.mcr .mcr-quiz-card.is-locked .mcr-btn .mcr-lock { color: currentColor; opacity: 1; }
.mcr-quiz-free { display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 999px; background: var(--mcr-red); color: #fff; letter-spacing: .06em; vertical-align: 1px; }
.mcr .mcr-feedback-title { margin: 0 0 16px; color: var(--mcr-ink); font: 700 20px/1.3 Inter, Arial, sans-serif; }
.mcr-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 14px; }
.mcr-voice { margin: 0; }
.mcr-voice > :first-child { height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.mcr-poster--small .mcr-play { width: 52px; height: 52px; }
.mcr-poster--small .mcr-play svg { width: 20px; height: 20px; }
.mcr-voice figcaption { margin-top: 10px; color: var(--mcr-ink); font: 600 14px/1.45 Inter, Arial, sans-serif; }
.mcr-voice figcaption span { display: block; margin-bottom: 3px; color: var(--mcr-muted); font: 700 10.5px/1.3 Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
/* The site styles every <footer> as its page footer (white background image); a quote's footer is just a byline. */
.mcr-quote footer strong { color: var(--mcr-ink); }
.mcr .mcr-feedback-all { display: inline-block; margin-top: 24px; color: var(--mcr-red); font: 700 14px/1.4 Inter, Arial, sans-serif; }

/* Quiz: the lesson's card, then the player (classroom-quiz.js) that takes its place. */
.mcr-resource.is-covered { display: none !important; }
.mcr-quiz-kicker { margin: 0 0 6px !important; color: var(--mcr-red) !important; font: 700 11px/1.3 Inter, Arial, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }
.mcr .mcr-quiz-rank { display: inline-block; margin-top: 16px; color: var(--mcr-red); font: 700 14px/1.4 Inter, Arial, sans-serif; }
.mcr-quiz-disclaimer { margin: 18px 0 0; padding: 15px 18px; border-left: 3px solid var(--mcr-red); border-radius: 0 10px 10px 0; background: var(--mcr-red-soft); color: var(--mcr-ink); font: 400 13px/1.65 Inter, Arial, sans-serif; }
.mcr-quiz-disclaimer[hidden] { display: none; }
.mcq-policy { margin: 0; padding: 14px 20px; border-top: 1px solid var(--mcr-line); color: var(--mcr-muted); background: var(--mcr-red-soft); font: 400 12.5px/1.6 Inter, Arial, sans-serif; }
.mcr-contribution { margin-top: 18px; border: 1px solid var(--mcr-line); border-radius: 14px; background: var(--mcr-panel); }
.mcr-contribution summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; color: var(--mcr-ink); font: 700 15px/1.4 Inter, Arial, sans-serif; cursor: pointer; list-style: none; }
.mcr-contribution summary::-webkit-details-marker { display: none; }
.mcr-contribution summary span { color: var(--mcr-red); }
.mcr-contribution[open] summary { border-bottom: 1px solid var(--mcr-line); }
.mcr-contribution-body { padding: 20px; }
.mcr-contribution-intro { margin: 0 0 18px; color: var(--mcr-muted); font: 400 14px/1.6 Inter, Arial, sans-serif; }
.mcr-contribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mcr-contribution label { display: grid; gap: 7px; color: var(--mcr-ink); font: 600 13px/1.4 Inter, Arial, sans-serif; }
.mcr-contribution label[hidden] { display: none; }
.mcr-contribution input, .mcr-contribution select, .mcr-contribution textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--mcr-line); border-radius: 9px; background: var(--mcr-panel); color: var(--mcr-ink); font: 400 14px/1.5 Inter, Arial, sans-serif; }
.mcr-contribution :is(input, select, textarea):focus-visible { outline: 2px solid var(--mcr-red); outline-offset: 2px; }
.mcr-contribution-wide { margin-top: 16px; }
.mcr-contribution textarea { resize: vertical; }
.mcr-contribution-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.mcr-contribution-footer [role=status] { color: var(--mcr-red); font: 600 13px/1.5 Inter, Arial, sans-serif; }
.mcr-contribution-footer [role=status].is-success { flex: 0 0 100%; padding: 14px 16px; border-radius: 9px; background: #eef8f1; color: #18834b; overflow-wrap: anywhere; }
.mcq-invitation { max-width: 660px; margin: 24px auto 0; padding: 18px 20px; border: 1px solid var(--mcr-line); border-radius: 12px; background: var(--mcr-red-soft); text-align: center; }
.mcq-invitation strong { color: var(--mcr-ink); font: 700 17px/1.4 Inter, Arial, sans-serif; }
.mcq-invitation p { margin: 7px 0 14px; color: var(--mcr-muted); font: 400 14px/1.55 Inter, Arial, sans-serif; }
.mcq-contribute-question { margin-left: auto; padding: 7px 0; border: 0; background: none; color: var(--mcr-red); font: 700 13px/1.4 Inter, Arial, sans-serif; cursor: pointer; }
.mcq-contribute-question:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .mcr-contribution-grid { grid-template-columns: 1fr; }
  .mcr-contribution-body { padding: 16px; }
  .mcr-contribution summary { padding: 16px; }
  .mcq-contribute-question { margin-left: 0; }
}
.mcq { display: flex; flex-direction: column; min-width: 0; overflow: clip; border: 1px solid var(--mcr-line); border-radius: 14px; background: var(--mcr-panel); scroll-margin-top: 76px; }
.mcq[hidden] { display: none !important; }
.mcq-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 216px; height: min(70dvh, 760px); min-height: 400px; min-width: 0; }
.mcq-stage { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mcq-map-panel { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--mcr-line); background: var(--mcr-side); scrollbar-width: thin; }
.mcq-map-panel[hidden] { display: none; }
.mcq-workspace:has(.mcq-map-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
.mcq-map-head { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 11px; background: var(--mcr-side); color: var(--mcr-ink); font: 700 13px/1.3 Inter, Arial, sans-serif; }
.mcq-expand { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mcr-line); border-radius: 8px; background: var(--mcr-panel); color: var(--mcr-ink); cursor: pointer; }
.mcq-expand:hover { border-color: var(--mcr-red); color: var(--mcr-red); }
.mcq-expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.mcr-quiz-expanded { overflow: hidden; }
.mcq.is-expanded { position: fixed; z-index: 11000; inset: 12px; height: calc(100dvh - 24px); border-radius: 14px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .72), 0 20px 70px rgb(0 0 0 / .36); }
.mcq.is-expanded .mcq-bar { position: relative; top: auto; flex: none; }
.mcq.is-expanded .mcq-workspace { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 240px; }
.mcq.is-expanded .mcq-policy { flex: none; }
.mcq-bar { position: sticky; z-index: 3; top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--mcr-line); background: var(--mcr-panel); }
.mcq-bar-title { min-width: 0; margin-right: auto; }
.mcr .mcq-back { flex: none; padding: 8px 12px; border: 1px solid var(--mcr-line); border-radius: 8px; background: transparent; color: var(--mcr-ink); font: 600 13px/1.2 Inter, Arial, sans-serif; cursor: pointer; }
.mcr .mcq-back:hover { background: var(--mcr-hover); }
.mcr .mcq-back:focus { outline: 2px solid var(--mcr-red); outline-offset: 2px; box-shadow: none; }
.mcq-back[hidden] { display: none; }
.mcq-history { padding:0 4px 24px; }
.mcq-history-title { margin: 10px 0 6px; color: var(--mcr-ink); font: 700 27px/1.25 Inter, Arial, sans-serif; }
.mcq-history-subtitle { margin: 0 0 20px; color: var(--mcr-muted); font: 400 15px/1.5 Inter, Arial, sans-serif; }
.mcq-history-heading { margin: 30px 0 14px; color: var(--mcr-ink); font: 700 18px/1.35 Inter, Arial, sans-serif; }
.mcq-history-hint { margin: 10px 0 0; color: var(--mcr-muted); font: 400 13px/1.5 Inter, Arial, sans-serif; }
.mcq-history-empty, .mcq-history-error { padding: 20px; border: 1px dashed var(--mcr-line); border-radius: 10px; color: var(--mcr-muted); font: 400 14px/1.5 Inter, Arial, sans-serif; }
.mcq-history-error { color: var(--mcr-red); }
.mcq-history-list { display: grid; gap: 10px; }
.mcq-history-item { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--mcr-line); border-radius: 12px; background: var(--mcr-hover); }
.mcq-history-copy { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.mcq-history-copy strong { color: var(--mcr-ink); font: 700 15px/1.35 Inter, Arial, sans-serif; }
.mcq-history-copy span, .mcq-history-score span { color: var(--mcr-muted); font: 400 12px/1.4 Inter, Arial, sans-serif; }
.mcq-history-score { display: grid; gap: 3px; min-width: 105px; }
.mcq-history-score strong { color: var(--mcr-ink); font: 700 18px/1.2 Inter, Arial, sans-serif; }
.mcr .mcq-history-item .mcr-btn { flex: none; min-height: 38px; padding: 8px 14px; }
.mcq-kicker { display: block; white-space: nowrap; color: var(--mcr-muted); font: 700 11px/1.3 Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mcq-name { display: block; margin-top: 3px; overflow: hidden; color: var(--mcr-ink); font: 700 16px/1.35 Inter, Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.mcq-bar-meta { display: flex; flex: none; align-items: center; gap: 12px; }
.mcq-progress { color: var(--mcr-muted); font: 600 13px/1.3 Inter, Arial, sans-serif; }
.mcq-timer { padding: 7px 10px; border-radius: 8px; background: var(--mcr-soft-button); color: var(--mcr-ink); font: 700 13px/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.mcq-timer.is-low { background: var(--mcr-red); color: #fff; }
.mcr .mcq-bar .mcr-btn { min-height: 40px; padding: 8px 16px; }
.mcq-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--mcr-line); background: rgb(245 166 35 / .14); }
.mcq-confirm p { flex: 1 1 260px; margin: 0; color: var(--mcr-ink); font: 600 14px/1.5 Inter, Arial, sans-serif; }
.mcr .mcq-confirm .mcr-btn { min-height: 38px; padding: 8px 16px; }
.mcq-stage { padding: 26px 24px 8px; }
.mcq-question-list { display: grid; gap: 18px; }
.mcq-question-list .mcq-question { padding: 22px; border: 1px solid var(--mcr-line); border-radius: 12px; background: var(--mcr-panel); }
.mcq-count { margin: 0 0 10px; color: var(--mcr-red); font: 700 12px/1.3 Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mcq-text { color: var(--mcr-ink); font: 600 18px/1.6 Inter, Arial, sans-serif; }
.mcq-note { margin-top: 10px; color: var(--mcr-muted); font: 400 15px/1.65 Inter, Arial, sans-serif; }
.mcq-text p, .mcq-note p, .mcq-option-text p { margin: 0 0 6px; }
.mcq-text p:last-child, .mcq-note p:last-child, .mcq-option-text p:last-child { margin-bottom: 0; }
.mcq-text img, .mcq-note img, .mcq-explain-body img { max-width: 100%; height: auto; border-radius: 8px; }
.mcq-options { display: grid; gap: 10px; margin-top: 20px; }
.mcq-option { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--mcr-line); border-radius: 12px; background: transparent; color: var(--mcr-ink); font: 400 15.5px/1.55 Inter, Arial, sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.mcq-option:hover:not(:disabled):not(.is-selected) { border-color: var(--mcr-explain-accent); background: var(--mcr-hover); }
.mcq-option.is-selected { border-color: var(--mcr-explain-accent); background: rgb(99 102 241 / .14); }
.mcr .mcq-option:focus-visible { outline-color: var(--mcr-explain-accent); }
.mcq-option:disabled { opacity: 1; cursor: default; }
.mcq-letter { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin-top: -1px; border: 1px solid var(--mcr-line); border-radius: 50%; font: 700 13px/1 Inter, Arial, sans-serif; }
.mcq-option.is-selected .mcq-letter { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.mcq-option.is-wrong .mcq-letter { border-color: var(--mcr-red); background: var(--mcr-red); color: #fff; }
.mcq-option.is-correct { border-color: #22a35a; background: rgb(34 163 90 / .12); }
.mcq-option.is-correct .mcq-letter { border-color: #22a35a; background: #22a35a; color: #fff; }
.mcq-option.is-wrong { border-color: var(--mcr-red); background: var(--mcr-red-soft); }
.mcq-skipped { margin: 14px 0 0; color: #e8930c; font: 600 14px/1.5 Inter, Arial, sans-serif; }
.mcq-explain { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--mcr-explain-accent); border-radius: 0 10px 10px 0; background: rgb(148 148 148 / .1); }
.mcq-explain-title { margin: 0 0 6px; color: var(--mcr-explain-accent); font: 700 12px/1.3 Inter, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mcq-explain-body { color: var(--mcr-ink); font: 400 15px/1.7 Inter, Arial, sans-serif; overflow-wrap: anywhere; }
.mcq-explain-legacy * { color: inherit !important; background: transparent !important; font-family: inherit !important; font-size: inherit !important; }
.mcq-explain-body p { margin: 0 0 8px; }
.mcq-explain-heading { margin: 14px 0 8px; color: var(--mcr-ink); font: 700 15px/1.4 Inter, Arial, sans-serif; }
.mcq-explain-heading:first-child { margin-top: 0; }
.mcq-explain-concept { color: var(--mcr-ink); }
.mcq-explain-options { display: grid; gap: 9px; }
.mcq-explain-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid; border-radius: 8px; line-height: 1.55; }
.mcq-explain-option-key { flex: none; font-weight: 700; }
.mcq-explain-option.is-correct { border-color: rgb(34 163 90 / .45); background: rgb(34 163 90 / .12); color: #79dba4; }
.mcq-explain-option.is-wrong { border-color: rgb(232 35 79 / .4); background: rgb(232 35 79 / .1); color: #ff94a5; }
html[data-meduc-theme="light"] .mcq-explain-option.is-correct { color: #16804b; }
html[data-meduc-theme="light"] .mcq-explain-option.is-wrong { color: #bf2944; }
.mcq-explain-verdict { font-weight: 700; }
.mcq-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-bottom: 18px; }
.mcq-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 8px 12px 18px; }
.mcq-cell { width: 100%; height: 38px; padding: 0; border: 1px solid var(--mcr-line); border-radius: 8px; background: transparent; color: var(--mcr-muted); font: 600 13px/1 Inter, Arial, sans-serif; cursor: pointer; }
.mcq-cell:hover { border-color: var(--mcr-red); }
.mcq-cell.is-answered { background: var(--mcr-soft-button); color: var(--mcr-ink); }
.mcq-cell.is-correct { border-color: #22a35a; background: #22a35a; color: #fff; }
.mcq-cell.is-wrong { border-color: var(--mcr-red); background: var(--mcr-red); color: #fff; }
.mcq-cell.is-skipped { border-style: dashed; }
.mcq-cell.is-unknown { border-style: dotted; }
.mcq-cell.is-current { box-shadow: 0 0 0 2px var(--mcr-panel), 0 0 0 4px var(--mcr-red); }
.mcq-result { padding: 10px 0 26px; text-align: center; }
.mcq-result-kicker { margin: 0; color: var(--mcr-red); font: 700 12px/1.3 Inter, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mcq-score { margin: 10px 0 0; color: var(--mcr-muted); font: 500 18px/1.2 Inter, Arial, sans-serif; }
.mcq-score strong { color: var(--mcr-ink); font: 400 76px/1 Anton, Impact, sans-serif; }
.mcq-meter { width: min(420px, 100%); height: 8px; margin: 16px auto 0; overflow: hidden; border-radius: 8px; background: var(--mcr-line); }
.mcq-meter span { display: block; height: 100%; border-radius: inherit; background: var(--mcr-red); }
.mcq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 22px auto 0; overflow: hidden; border: 1px solid var(--mcr-line); border-radius: 12px; }
.mcq-stats div { padding: 12px 10px; border-right: 1px solid var(--mcr-line); }
.mcq-stats div:last-child { border-right: 0; }
.mcq-stats dt { color: var(--mcr-muted); font: 700 11px/1.3 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mcq-stats dd { margin: 4px 0 0; color: var(--mcr-ink); font: 700 18px/1.2 Inter, Arial, sans-serif; }
.mcq-saved { margin: 16px 0 0; color: var(--mcr-muted); font: 500 13.5px/1.5 Inter, Arial, sans-serif; }
.mcr .mcq-saved a { color: var(--mcr-red); text-decoration: underline; text-underline-offset: 3px; }
.mcq-result-offer { display: grid; justify-items: center; gap: 8px; width: min(480px, 100%); margin: 20px auto 0; padding: 16px 20px; border: 1px solid var(--mcr-line); border-radius: 12px; background: var(--mcr-red-soft); }
.mcq-result-offer-label { margin: 0; color: var(--mcr-muted); font: 600 13px/1.3 Inter, Arial, sans-serif; }
.mcq-result-offer .mcr-price { justify-content: center; }
.mcq-post-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 28px; }
.mcr .mcq-post-actions > .mcr-btn { flex:0 0 auto; width:auto; min-height:44px; margin:0; padding:11px 20px; font-size:15px; }
.mcq-result-review { padding-top: 28px; border-top: 1px solid var(--mcr-line); text-align: left; }
.mcq-result-review-title { margin: 0 0 18px; color: var(--mcr-ink); font: 700 22px/1.35 Inter, Arial, sans-serif; }
.mcq-review-question { margin-bottom: 16px; padding: 22px; border: 1px solid var(--mcr-line); border-radius: 12px; background: var(--mcr-panel); }
.mcq-question-list .mcq-review-question { margin-bottom: 0; }
.mcq-review-question .mcq-nav { justify-content: flex-end; margin-top: 10px; padding-bottom: 0; }
.mcq-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
@container (max-width: 620px) {
  .mcq:not(.is-expanded) .mcq-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mcq:not(.is-expanded) .mcq-map-panel { order: -1; overflow: visible; border-left: 0; border-bottom: 1px solid var(--mcr-line); }
  .mcq:not(.is-expanded) .mcq-map-head { padding: 8px 12px; }
  .mcq:not(.is-expanded) .mcq-map { display: flex; overflow-x: auto; padding: 8px 12px 10px; scrollbar-width: thin; }
  .mcq:not(.is-expanded) .mcq-cell { flex: 0 0 36px; height: 36px; }
  .mcq:not(.is-expanded) .mcq-workspace:has(.mcq-map-panel[hidden]) { grid-template-rows: minmax(0, 1fr); }
}

/* FAQ (block/slider/view_faq_accordion.tpl) */
.mfq-title { margin: 0 0 8px; color: var(--mcr-ink, inherit); font: 700 20px/1.3 Inter, Arial, sans-serif; text-transform: none; }
.mfq-item { border-bottom: 1px solid var(--mcr-line, #e5e6ea); }
.mfq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--mcr-ink, inherit); font: 600 16px/1.45 Inter, Arial, sans-serif; cursor: pointer; list-style: none; }
.mfq-item summary::-webkit-details-marker { display: none; }
.mfq-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s; }
.mfq-item[open] .mfq-icon { transform: rotate(45deg); }
.mfq-answer { padding: 0 34px 20px 0; color: var(--mcr-muted, #6b6f78); font: 400 15px/1.75 Inter, Arial, sans-serif; }

/* Related courses (block/product/view_course_related.tpl) */
.mrc { padding-top: 30px; }
.mrc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.mrc-title { margin: 0; color: var(--mcr-ink, inherit); font: 700 20px/1.3 Inter, Arial, sans-serif; }
.mrc-controls { display: flex; gap: 8px; }
.mrc-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--mcr-line, #e5e6ea); border-radius: 50%; background: transparent; color: var(--mcr-ink, inherit); font: 400 18px/1 Inter, Arial, sans-serif; cursor: pointer; }
.mrc-controls button:disabled { opacity: .35; cursor: default; }
.mrc-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mrc-rail::-webkit-scrollbar { display: none; }
.mrc .mrc-card { flex: 0 0 230px; scroll-snap-align: start; color: var(--mcr-ink, inherit) !important; }
.mrc-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #1b1d22; }
.mrc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mrc-card:hover .mrc-cover img { transform: scale(1.04); }
.mrc-name { display: -webkit-box; margin-top: 10px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 14.5px/1.4 Inter, Arial, sans-serif; }
.mrc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.mrc-price strong { color: var(--mcr-red, #d4213d); font: 800 15px/1.2 Inter, Arial, sans-serif; }
.mrc-price s { color: var(--mcr-muted, #6b6f78); font: 500 12.5px/1.2 Inter, Arial, sans-serif; }

/* The site's rating and question blocks, moved into the introduction: same look as the rest of the classroom. */
.mcr-slot .course-details-card { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.mcr-slot .title-section-2 { margin: 0 0 16px; padding: 0; border: 0; background: none; }
.mcr-slot .title-section-2 span { padding: 0; border: 0; background: none; color: var(--mcr-ink); font: 700 20px/1.3 Inter, Arial, sans-serif; text-transform: none; }
.mcr-slot .title-section-2::before, .mcr-slot .title-section-2::after, .mcr-slot .title-section-2 span::before, .mcr-slot .title-section-2 span::after { display: none; }
.mcr-slot [nh-rating], .mcr-slot [nh-comment], .mcr-slot .overall-rating, .mcr-slot .rating-list, .mcr-slot .list-comment { color: var(--mcr-ink); }
.mcr-slot .overall-rating { padding: 18px; border: 1px solid var(--mcr-line); border-radius: 12px; background: transparent; }
.mcr-slot .point-comment span { color: var(--mcr-ink); }
.mcr-slot .progress { background: var(--mcr-line); }
.mcr-slot .progress-bar { background: #f5a623; }
.mcr-slot .rating-num, .mcr-slot .star-percent, .mcr-slot .total-comment { color: var(--mcr-muted); }
.mcr-slot textarea, .mcr-slot input[type="text"], .mcr-slot input[type="email"], .mcr-slot input[type="tel"] { border: 1px solid var(--mcr-line) !important; border-radius: 10px; background: var(--mcr-panel) !important; color: var(--mcr-ink) !important; }
.mcr-slot .btn-primary, .mcr-slot .edu-btn { border-color: var(--mcr-red) !important; border-radius: 10px; background: var(--mcr-red) !important; color: #fff !important; }
.mcr-slot .rating-list li, .mcr-slot .list-comment li { border-color: var(--mcr-line) !important; }

/* Course pages use the registration card instead of a fixed bottom purchase bar. */
body:has(.mcr) #meduc-action-bar { display: none !important; }
body.mhb-ready:has(.mcr) { padding-bottom: 0; }

@media (max-width: 1500px) {
  .mcr-layout { grid-template-columns: 340px minmax(0, 1fr); }
  .mcr-intro { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
}
@media (max-width:1280px) {
  .mcr-toolbar { flex-direction:column-reverse; align-items:stretch; gap:4px; min-height:0; }
  .mcr-tabs button, .mcr .mcr-tab-jump { padding:12px 0; }
}
@media (max-width: 991.98px) {
  .mcr-layout { grid-template-columns: 1fr; }
  .mcr-main { order: -1; padding: 14px 20px 28px; border-left: 0; }
  .mcr-sidebar { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; border-top: 1px solid var(--mcr-line); }
  .mcr-outline-actions { position: static; }
  .mcr-lesson-view, .mcr-sidebar { scroll-margin-top:72px; }
  .mcr-course-overview { padding:24px; }
  .mcr-intro { grid-template-columns:minmax(0,1fr); gap:24px; }
  .mcr-intro-side { position:static; max-height:none; overflow:visible; }
}
@media (max-width: 767.98px) {
  /* On phones, the inline quiz and curriculum follow the page scroll. The expanded quiz keeps its own scroll area. */
  .mcq:not(.is-expanded) .mcq-workspace { height:auto; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  .mcq:not(.is-expanded) .mcq-workspace:has(.mcq-map-panel[hidden]) { grid-template-rows:auto; }
  .mcq:not(.is-expanded) .mcq-stage, .mcq:not(.is-expanded) .mcq-map-panel { overflow:visible; overscroll-behavior:auto; }
  .mcq:not(.is-expanded) [data-mcq-question] { scroll-margin-top:150px; }
  .mcq.is-expanded { inset: 0; height: 100dvh; border: 0; border-radius: 0; }
  .mcq.is-expanded .mcq-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mcq.is-expanded .mcq-map-panel { order: -1; overflow: visible; border-left: 0; border-bottom: 1px solid var(--mcr-line); }
  .mcq.is-expanded .mcq-map-head { padding: 8px 12px; }
  .mcq.is-expanded .mcq-map { display: flex; overflow-x: auto; padding: 8px 12px 10px; scrollbar-width: thin; }
  .mcq.is-expanded .mcq-cell { flex: 0 0 36px; height: 36px; }
  .mcr { padding-top:14px; }
  .mcr-course-overview { padding:20px 16px; border-radius:12px; }
  .mcr-buy { padding:22px 18px 20px; }
  .mcr-buy .mcr-price strong { font-size:clamp(22px,6vw,28px); }
  .mcr-buy .mcr-price s { font-size:clamp(12px,3vw,14px); }
  .mcr-course-heading { margin-bottom:16px; }
  .mcr-overview-tabs { gap:24px; }
  .mcr-overview-tabs button, .mcr .mcr-overview-jump { font-size:15px; }
  .mcr-about-preview { font-size:15px; }
  .mcr-intro-hero { padding-top:20px; }
  .mcr-learning-heading { margin-top:28px; }
  .mcr .mcr-learning-heading h2 { font-size:22px; }
  .mcr-related-courses { padding:18px 14px; }
  .mcr-shell { width: calc(100% - 24px); }
  .mcr-main { padding: 12px 14px 24px; }
  .mcr-layout { border-radius: 12px; }
  .mcr-stage { border-radius: 10px; }
  .mcr-stage-card { padding: 26px 18px; }
  .mcr-stage-card p { font-size: 13.5px; }
  .mcr-quiz-card { align-items: stretch; flex-direction: column; }
  .mcr-quiz-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .mcr-quiz-actions [data-mcr-quiz-enroll] { grid-column:1 / -1; }
  .mcq-bar-meta { flex-wrap:wrap; }
  .mcq-submit-actions { margin-left:auto; }
  .mcq-history-tabs { gap:22px; }
  .mcq-notebook-item > summary { gap:10px; padding:14px; font-size:14px; }
  .mcq-bar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .mcq-bar-meta { width: 100%; justify-content: space-between; }
  .mcq-stage { padding: 20px 14px 4px; }
  .mcq-review-question { padding: 16px; }
  .mcq-result-review-title { font-size: 19px; }
  .mcq-history { padding:0 0 20px; }
  .mcq-history-title { font-size: 22px; }
  .mcq-history-item { flex-wrap: wrap; gap: 10px 14px; padding: 14px; }
  .mcq-history-copy { flex: 1 1 100%; }
  .mcq-history-score { flex: 1; }
  .mcq-text { font-size: 16.5px; }
  .mcq-option { padding: 12px 12px; font-size: 15px; }
  .mcq:not(.is-expanded) .mcq-map { padding: 8px 12px 10px; }
  .mcq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcq-stats div:nth-child(2) { border-right: 0; }
  .mcq-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--mcr-line); }
}
@media (prefers-reduced-motion: reduce) { .mcr *, .mcr *::before, .mcr *::after { transition:none !important; animation:none !important; } .mcr-buy-actions .mcr-btn--primary::after, .mcr .mcr-mock-exam::after { display:none; } }

/* Explanation Markdown follows the quiz typography in either theme. */
.mcq-markdown { min-width: 0; }
.mcq-markdown > :first-child { margin-top: 0; }
.mcq-markdown > :last-child { margin-bottom: 0; }
.mcq-markdown p { margin: 0 0 .65em; }
.mcq-markdown :is(h1,h2,h3,h4,h5,h6) { margin: 1em 0 .45em; font: 700 1em/1.45 Inter, Arial, sans-serif; color: inherit; }
.mcq-markdown ul, .mcq-markdown ol { margin: .55em 0 .8em; padding-left: 1.5em; }
.mcq-markdown ul { list-style: disc; }
.mcq-markdown ol { list-style: decimal; }
.mcq-markdown li { margin: .3em 0; }
.mcq-markdown blockquote { margin: .7em 0; padding-left: 1em; border-left: 3px solid currentColor; }
.mcq-markdown pre { max-width: 100%; padding: .75em; overflow-x: auto; background: rgb(127 127 127 / .1); border-radius: 6px; white-space: pre; }
.mcq-markdown code { padding: .12em .3em; border-radius: 4px; background: rgb(127 127 127 / .1); font-size: .9em; }
.mcq-markdown pre code { padding: 0; background: none; }
.mcq-markdown a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mcq-markdown table { display: block; max-width: 100%; margin: .7em 0; border-collapse: collapse; overflow-x: auto; }
.mcq-markdown th, .mcq-markdown td { padding: .4em .65em; border: 1px solid rgb(127 127 127 / .35); text-align: left; }
.mcq-explain-option-detail { flex: 1; }

.mcq-explain-body .mcq-markdown :is(p,li,strong,b,em,i,span) { color: inherit; }

/* Practice reveals each answer immediately; mock exams keep the full-paper workspace. */
.mcq-practice-hint { margin:0 0 18px; color:var(--mcr-muted); font-size:13px; }
.mcq-practice-nav { display:flex; justify-content:space-between; gap:12px; padding-top:20px; border-top:1px solid var(--mcr-line); }
.mcq-practice-nav button:disabled { opacity:.4; cursor:default; }
.mcq-practice-feedback { margin:18px 0 0; padding:12px 16px; border-radius:8px; background:var(--mcr-soft-button); font-weight:600; }
.mcq-practice-feedback.is-correct { color:#79dba4; background:rgb(34 163 90 / .12); }
.mcq-practice-feedback.is-wrong { color:#ff94a5; background:var(--mcr-red-soft); }
html[data-meduc-theme="light"] .mcq-practice-feedback.is-correct { color:#16804b; }
html[data-meduc-theme="light"] .mcq-practice-feedback.is-wrong { color:#bf2944; }

.mcq-practice-feedback:focus { outline: none; }

/* Lesson metadata: separate from the free/paid badge. */
.mcr-lesson-labels { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.mcr-lesson-label { padding:3px 6px; border:1px solid var(--mcr-line); border-radius:4px; color:var(--mcr-muted); font:600 10px/1.3 Inter,Arial,sans-serif; }
.mcr-lesson-label--type { color:var(--mcr-red); background:var(--mcr-red-soft); border-color:transparent; }
.mcr .mcr-lesson.is-current .mcr-lesson-label { color:#fff; border-color:rgb(255 255 255 / .35); background:rgb(255 255 255 / .12); }

/* Optional học phần above chapters: no additional scroll area. */
.mcr-unit-heading { display:grid; gap:6px; padding:18px 18px 15px; border-top:1px solid var(--mcr-line); border-bottom:1px solid var(--mcr-line); background:var(--mcr-hover); }
.mcr-unit-heading > span { color:var(--mcr-red); font:700 11px/1.4 Inter,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.mcr-unit-heading > strong { color:var(--mcr-ink); font:700 14px/1.5 Inter,Arial,sans-serif; }
.mcr-chapter--in-unit > summary { padding-left:24px; }

/* Keep mock-exam navigation available before exams are populated. */
.mcr-outline-actions--quiz { flex-wrap:wrap; }
.mcr-mock-pending { flex-basis:100%; margin:0; color:var(--mcr-muted); font:500 12px/1.5 Inter,Arial,sans-serif; }