/* Course introduction follows the book catalogue; exam introduction follows the journal. */
.mcl .mcl-catalog-hero { --mcl-hero-bg:#171310; overflow:hidden; background:var(--mcl-hero-bg); }
html[data-meduc-theme="light"] .mcl .mcl-catalog-hero { --mcl-hero-bg:#f8f6f1; }
.mcl .mcl-catalog-hero .mcl-eyebrow { margin:0 0 20px; font-size:10px; letter-spacing:.14em; }
.mcl .mcl-catalog-title { max-width:600px; margin:0; font:400 clamp(53px,5.2vw,78px)/1.13 Anton,Impact,sans-serif; letter-spacing:-.01em; text-wrap:balance; }
.mcl .mcl-catalog-title>span { display:block; color:var(--mcl-red); }
.mcl .mcl-catalog-intro { max-width:440px; margin:24px 0 0; color:var(--mcl-muted); font-size:14px; line-height:1.85; }
.mcl-course-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:70px; padding-block:56px 65px; }
.mcl-course-hero-copy { min-width:0; }
.mcl-course-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.mcl .mcl-course-hero-actions .mcl-register { min-height:48px; gap:25px; padding:12px 19px; font-size:13px; line-height:1.5; }
.mcl-course-hero-actions>span { color:var(--mcl-muted); font-size:11px; }
.mcl-course-hero-actions strong { color:var(--mcl-ink); font-weight:600; }
.mcl-course-hero-art { position:relative; isolation:isolate; height:385px; min-width:0; }
.mcl-course-art-backdrop { position:absolute; inset:5px 8px 15px; border-radius:48% 48% 10px 10px; background:radial-gradient(ellipse at 50% 20%,#6a4b34,#29201b); }
html[data-meduc-theme="light"] .mcl-course-art-backdrop { background:radial-gradient(ellipse at 50% 20%,#f1e5d2,#ddd4c7); }
.mcl-course-hero-cover { position:absolute; bottom:35px; display:block; width:55%; aspect-ratio:4 / 3; padding:7px; overflow:hidden; border-radius:5px 9px 9px 5px; background:#faf9f7; box-shadow:10px 15px 25px #0004; transform-origin:bottom center; transition:translate .2s; }
.mcl-course-hero-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.mcl-course-hero-cover:nth-of-type(1) { left:0; z-index:1; transform:rotate(-11deg); }
.mcl-course-hero-cover:nth-of-type(2) { left:18%; bottom:85px; z-index:3; width:67%; transform:rotate(2deg); }
.mcl-course-hero-cover:nth-of-type(3) { right:-3%; bottom:50px; z-index:2; transform:rotate(12deg); }
.mcl-course-hero-cover:hover { translate:0 -5px; }
.mcl-course-art-note { position:absolute; right:-8px; bottom:-5px; z-index:4; display:flex; align-items:center; gap:13px; padding:15px 19px; border:1px solid var(--mcl-line); border-radius:6px; background:var(--mcl-surface); color:var(--mcl-ink); font:600 10px/1.6 Inter,Arial,sans-serif; letter-spacing:.09em; box-shadow:0 8px 25px #0001; }
.mcl-course-art-note svg { width:28px; height:28px; fill:none; stroke:var(--mcl-red); stroke-width:1.5; stroke-linejoin:round; }
.mcl-catalog-hero--course.mcl-catalog-hero--category .mcl-course-hero-inner { grid-template-columns:1fr; gap:0; padding-block:45px; }
.mcl .mcl-catalog-hero--course.mcl-catalog-hero--category .mcl-catalog-title { max-width:1000px; font-size:clamp(42px,4.6vw,64px); }
.mcl .mcl-catalog-hero--course.mcl-catalog-hero--category .mcl-catalog-intro { max-width:640px; margin-top:18px; }
.mcl .mcl-catalog-hero--exam { --mcl-hero-bg:#141416; padding-block:65px 56px; text-align:center; }
html[data-meduc-theme="light"] .mcl .mcl-catalog-hero--exam { --mcl-hero-bg:#f7f6f2; }
.mcl .mcl-exam-eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; letter-spacing:.15em; }
.mcl-exam-eyebrow>span { width:26px; height:2px; background:var(--mcl-red); }
.mcl .mcl-catalog-hero--exam .mcl-catalog-title { max-width:none; font-size:clamp(52px,6.2vw,94px); line-height:1.16; }
.mcl .mcl-catalog-hero--exam .mcl-catalog-intro { max-width:550px; margin:26px auto 0; line-height:1.9; }
.mcl-exam-hero-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:27px; color:var(--mcl-muted); font-size:11px; }
.mcl-exam-hero-meta strong { color:var(--mcl-ink); font-weight:600; }
.mcl-exam-hero-meta a>span { display:inline-block; margin-left:10px; color:var(--mcl-red); font-size:18px; }
.mcl .mcl-exam-hero-meta a:hover { color:var(--mcl-red); }
.mcl .mcl-catalog-hero--exam.mcl-catalog-hero--category { padding-block:45px; }
.mcl .mcl-catalog-hero--exam.mcl-catalog-hero--category .mcl-catalog-title { font-size:clamp(48px,5.3vw,76px); }
.mcl-catalog-body { scroll-margin-top:95px; }
@media(max-width:1100px) { .mcl-course-hero-inner { gap:35px; } .mcl-course-hero-art { height:335px; } }
@media(max-width:991.98px) { .mcl-course-hero-inner { gap:28px; padding-block:45px 55px; } .mcl .mcl-catalog-hero--course .mcl-catalog-title { font-size:clamp(48px,6vw,61px); } .mcl-course-hero-art { height:300px; } .mcl-course-art-note { right:0; padding:12px; font-size:8px; } }
@media(max-width:767.98px) {
  .mcl-course-hero-inner { grid-template-columns:1fr; gap:30px; padding-block:35px 42px; }
  .mcl .mcl-catalog-hero .mcl-eyebrow { margin-bottom:17px; font-size:8px; }
  .mcl .mcl-catalog-hero--course .mcl-catalog-title { max-width:530px; font-size:clamp(47px,10.5vw,64px); }
  .mcl .mcl-catalog-hero--course .mcl-catalog-intro { max-width:520px; margin-top:19px; font-size:13px; }
  .mcl-course-hero-art { width:100%; max-width:500px; height:315px; margin-inline:auto; }
  .mcl-course-art-note { right:0; bottom:0; }
  .mcl .mcl-catalog-hero--exam { padding-block:43px 36px; }
  .mcl .mcl-catalog-hero--exam .mcl-catalog-title { font-size:clamp(39px,7.5vw,58px); }
  .mcl .mcl-catalog-hero--exam .mcl-catalog-intro { max-width:450px; font-size:13px; }
}
@media(max-width:480px) {
  .mcl .mcl-catalog-hero--exam .mcl-catalog-title { font-size:40px; }
  .mcl .mcl-catalog-hero--exam .mcl-eyebrow { font-size:9px; letter-spacing:.1em; }
  .mcl .mcl-catalog-hero--exam .mcl-catalog-intro { margin-top:20px; }
  .mcl-exam-hero-meta { gap:10px; font-size:10px; }
  .mcl-course-hero-art { height:285px; }
  .mcl-course-hero-cover:nth-of-type(2) { bottom:70px; }
}
@media(prefers-reduced-motion:reduce) { .mcl-course-hero-cover { transition:none; } }

/* Chữa đề keeps the course hero's composition, with lesson notes and a real class photo. */
.mcl-solution-paper { position:absolute; top:48px; width:49%; min-height:280px; padding:22px; border:1px solid #ded8cf; border-radius:8px; background:#fffdf8; color:#25232a; box-shadow:0 16px 30px #0002; }
.mcl-solution-paper--question { left:-3%; transform:rotate(-12deg); z-index:1; }
.mcl-solution-paper--method { right:-3%; transform:rotate(12deg); z-index:2; }
.mcl-solution-step { display:block; margin-bottom:18px; color:#bc2141; font:700 8px/1.5 Inter,Arial,sans-serif; letter-spacing:.1em; }
.mcl-solution-paper strong { display:block; font:700 20px/1.3 Inter,Arial,sans-serif; }
.mcl-solution-paper i { display:block; width:82%; height:5px; margin-top:13px; border-radius:8px; background:#e8e2d8; }
.mcl-solution-paper i:nth-of-type(2) { width:65%; }.mcl-solution-paper i:nth-of-type(3) { width:73%; margin-bottom:17px; }
.mcl-solution-answer { display:flex; align-items:center; gap:12px; margin:8px 0; padding:7px 8px; border:1px solid #e4ded4; border-radius:5px; font:700 9px/1 Inter,Arial,sans-serif; }
.mcl-solution-answer b { width:65%; height:4px; background:#ded7cb; }.mcl-solution-answer em { margin-left:auto; font-style:normal; }
.mcl-solution-answer.is-chosen { border-color:#bcb4eb; background:#eeebff; color:#5141a3; }.mcl-solution-answer.is-chosen b { background:#b5a8e2; }
.mcl-solution-path { display:grid; justify-items:center; gap:9px; margin-top:22px; }.mcl-solution-path b { width:100%; padding:11px; border:1px solid #ded8ce; border-radius:7px; background:#f6f0e6; text-align:center; font:600 12px/1.4 Inter,Arial,sans-serif; }.mcl-solution-path em { color:#bb2947; font-style:normal; font-size:17px; }
.mcl-solution-photo { position:absolute; top:7px; left:17%; z-index:3; width:68%; height:318px; overflow:hidden; border:7px solid #faf9f7; border-radius:7px; background:#1b1918; box-shadow:8px 17px 30px #0004; transform:rotate(2deg); }
.mcl-solution-photo>img { display:block; width:100%; height:100%; object-fit:cover; object-position:44% center; }
.mcl-solution-photo>div { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; background:linear-gradient(transparent 30%,#090707e6); color:#fff; }
.mcl-solution-photo>div>span { margin-bottom:9px; color:#ffbdc7; font:700 8px/1.5 Inter,Arial,sans-serif; letter-spacing:.12em; }.mcl-solution-photo strong { color:#fff; font:400 31px/1.2 Anton,Impact,sans-serif; }
.mcl-solution-play { position:absolute; top:21px; right:20px; display:grid; place-items:center; width:42px; height:42px; border:1px solid #fff8; border-radius:50%; background:#ffffff21; backdrop-filter:blur(8px); }.mcl-solution-play svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; }
@media(max-width:1100px) { .mcl-solution-photo { height:285px; }.mcl-solution-paper { top:40px; min-height:260px; padding:17px; } }
@media(min-width:768px) and (max-width:991.98px) { .mcl-solution-art { height:325px; }.mcl-solution-photo { height:265px; left:14%; width:76%; }.mcl-solution-paper strong { font-size:16px; }.mcl-solution-paper { top:33px; width:54%; padding:13px; }.mcl-solution-art .mcl-course-art-note { bottom:-8px; } }
@media(max-width:767.98px) { .mcl-solution-art { height:340px; }.mcl-solution-photo { height:288px; }.mcl-solution-paper { top:40px; min-height:265px; }.mcl-solution-art .mcl-course-art-note { bottom:0; } }
@media(max-width:390px) { .mcl-solution-art { height:315px; }.mcl-solution-photo { left:15%; width:72%; height:267px; }.mcl-solution-photo>div { padding:18px; }.mcl-solution-photo strong { font-size:27px; }.mcl-solution-paper { min-height:244px; padding:13px; }.mcl-solution-paper strong { font-size:16px; }.mcl-solution-step { font-size:7px; } }