/* Delu Academy · kiểu riêng từng trang. Chỉ dùng token. */

/* ══════════ SLIDE (dùng ở trang chủ và trang học) ══════════ */
.slide { position: relative; container-type: inline-size; background: var(--surface-2); color: var(--text); overflow: hidden; }
.slide::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: .9cqw; background: var(--course-grad); }
.slide__img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.slide__in { position: relative; min-height: 56.25cqw; padding: 6cqw 7cqw 6cqw 8cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqw; }
.slide__kicker { font-size: max(.6875rem, 1.7cqw); font-weight: 600; color: var(--course-tone); }
.slide__title { font-size: max(1.0625rem, 4.3cqw); line-height: 1.16; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.slide__in--cover .slide__title { max-width: 13em; font-size: max(1.375rem, 6.2cqw); line-height: 1.12; letter-spacing: -.035em; }
.slide__lead { font-size: max(.8125rem, 2.5cqw); color: var(--text-2); }
.slide__list { display: grid; gap: 1.8cqw; font-size: max(.8125rem, 2.35cqw); line-height: 1.42; }
.slide__list li { display: grid; grid-template-columns: auto 1fr; gap: 1.8cqw; }
.slide__list li::before { content: ""; width: max(.375rem, 1cqw); aspect-ratio: 1; margin-top: .55em; border-radius: 50%; background: var(--course-tone); }
.slide__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw; }
.slide__col { display: grid; align-content: start; gap: 1cqw; padding: 2.4cqw; border-radius: max(.5rem, 1.8cqw); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: max(.75rem, 1.85cqw); line-height: 1.42; color: var(--text-2); }
.slide__col strong { font-size: max(.8125rem, 2.3cqw); letter-spacing: -.01em; color: var(--text); }
.slide__code { margin: 0; padding: 2.6cqw 3cqw; border-radius: max(.5rem, 1.8cqw); background: var(--code-bg); color: var(--code-fg); font: 400 max(.6875rem, 1.72cqw)/1.62 var(--font-mono); overflow: auto; white-space: pre; tab-size: 2; }
.slide__code i { font-style: normal; } .slide__code .k { color: var(--code-key); } .slide__code .s { color: var(--code-str); }
.slide__outline { display: grid; gap: 1cqw; font-size: max(.8125rem, 2.3cqw); }
.slide__outline li { display: grid; grid-template-columns: max(2rem, 5cqw) 1fr; gap: 1.6cqw; padding: 1.3cqw 1.8cqw; border-radius: max(.375rem, 1.4cqw); color: var(--text-2); }
.slide__outline li span { font-variant-numeric: tabular-nums; color: var(--text-3); }
.slide__outline li.is-current { background: var(--course-soft); color: var(--text); font-weight: 600; }
.slide__outline li.is-current span { color: var(--course-tone); }
@container (max-width: 30rem) { .slide__cols { grid-template-columns: 1fr; } }
.slide__in.is-next { animation: slide-next var(--dur-3) var(--ease-out); }
.slide__in.is-prev { animation: slide-prev var(--dur-3) var(--ease-out); }
.slide__in.is-lang { animation: slide-lang var(--dur-3) var(--ease-out); }
.slide__in.is-bump-next { animation: bump-next var(--dur-3) var(--ease-out); }
.slide__in.is-bump-prev { animation: bump-prev var(--dur-3) var(--ease-out); }
@keyframes slide-next { from { opacity: 0; transform: translateX(5cqw); } }
@keyframes slide-prev { from { opacity: 0; transform: translateX(-5cqw); } }
@keyframes slide-lang { from { opacity: 0; transform: translateY(1.6cqw); filter: blur(6px); } }
@keyframes bump-next { 50% { transform: translateX(-12px); } }
@keyframes bump-prev { 50% { transform: translateX(12px); } }

/* ══════════ TRANG CHỦ ══════════ */
.hero { position: relative; padding-top: clamp(2.25rem, 4.6vw, 3.75rem); text-align: center; overflow: clip; }
.js .hero { opacity: 0; animation: failsafe 1ms 2.4s forwards; }
.js .hero.is-ready { opacity: 1; animation: none; }
@keyframes failsafe { to { opacity: 1; } }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: 0 .875rem 0 .625rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.hero__eyebrow .brand__mark { width: .875rem; }
.hero__title { margin-top: var(--sp-5); }
.hero__line { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.hero__line > span { display: inline-block; }
.hero__line > .grad-text { padding-block: .14em; margin-block: -.14em; }
.hero__lead { max-width: 40rem; margin: var(--sp-5) auto 0; text-wrap: balance; }
.hero__cta { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-6); }
.hero__note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); }
.hero__stage { margin-top: clamp(2.5rem, 4.6vw, 3.5rem); padding: 0 var(--gutter) clamp(3.5rem, 7vw, 6rem); }

/* Bộ ba: thẻ khoá | chứng chỉ | thẻ khoá. Hai thẻ bên xoay nghiêng vào giữa. */
.tri { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 1.8vw, 1.75rem); width: min(100%, 76rem); margin-inline: auto; perspective: 120rem; }
.tri__side { flex: 0 1 22rem; min-width: 0; transform-style: preserve-3d; }
.tri__mid { position: relative; z-index: 2; flex: 0 1 34rem; min-width: 0; }
.tri__tilt { transition: transform var(--dur-4) var(--ease-soft); }
.tri__side--l .tri__tilt { transform: rotateY(24deg); transform-origin: 100% 50%; }
.tri__side--r .tri__tilt { transform: rotateY(-24deg); transform-origin: 0 50%; }
@media (hover: hover) {
  .tri__side--l .tri__tilt:hover, .tri__side--l .tri__tilt:focus-within { transform: rotateY(8deg) translateY(-.5rem); }
  .tri__side--r .tri__tilt:hover, .tri__side--r .tri__tilt:focus-within { transform: rotateY(-8deg) translateY(-.5rem); }
}
@media (max-width: 47.99rem) {
  .tri { position: relative; display: block; width: min(100%, 26rem); aspect-ratio: 1.414; margin-top: 4.5rem; perspective: none; }
  .tri__mid { position: absolute; inset: 0; }
  .tri__side { position: absolute; top: -19%; width: 60%; }
  .tri__side--l { left: 0; } .tri__side--r { right: 0; }
  .tri__side--l .tri__tilt { transform: rotate(-7deg); } .tri__side--r .tri__tilt { transform: rotate(6deg); }
  .tri__side .pass__sub, .tri__side .pass__meta { display: none; }
}

/* Ô khoá học */
.ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.ctile { position: relative; display: flex; flex-direction: column; min-height: 37rem; padding: clamp(1.5rem, 3.4vw, 2.75rem) clamp(1.5rem, 3.4vw, 2.75rem) 0; border-radius: var(--r-2xl); background: var(--course-soft); overflow: hidden; }
.ctile__no { font-size: var(--fs-sm); font-weight: 700; color: var(--course-tone); }
.ctile__title { margin-top: var(--sp-2); }
.ctile__desc { margin-top: var(--sp-3); max-width: 30rem; min-height: 4.75em; color: var(--text-2); }
.ctile__facts { display: flex; gap: var(--sp-8); margin-top: var(--sp-6); }
.fact strong { display: block; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; font-variant-numeric: tabular-nums; }
.fact__label { font-size: var(--fs-xs); color: var(--text-2); }
.ctile__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.ctile__price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctile__pass { margin-top: auto; padding-top: var(--sp-10); }
.ctile__pass .pass { width: min(100%, 27rem); margin: 0 auto -3.5rem; transform: rotate(-3deg); transition: transform var(--dur-4) var(--ease-soft); }
.ctile:nth-child(even) .ctile__pass .pass { transform: rotate(3deg); }
@media (hover: hover) { .ctile:hover .ctile__pass .pass { transform: rotate(0deg) translateY(-1.75rem); } }
@media (max-width: 56rem) { .ctiles { grid-template-columns: 1fr; } .ctile { min-height: 0; } .ctile__desc { min-height: 0; } }

/* Demo bài học */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.demo__text .h2 { margin-top: var(--sp-3); } .demo__text .lead { margin-top: var(--sp-4); }
.feats { margin-top: var(--sp-8); display: grid; gap: var(--sp-5); }
.feats li { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--sp-4); align-items: start; }
.feats .ic { width: 2.75rem; height: 2.75rem; padding: .7rem; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--accent); }
.feats strong { display: block; font-weight: 600; } .feats span { font-size: var(--fs-sm); color: var(--text-2); }
.window { border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); overflow: hidden; }
.window__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 3.25rem; padding: 0 var(--sp-3) 0 var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.window__ctrl { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-2); border-top: 1px solid var(--line); }
.window__count { min-width: 3.5rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
@media (max-width: 56rem) { .demo { grid-template-columns: 1fr; } }

/* Hành trình: mặc định là danh sách tĩnh. Có GSAP thì home.js thêm .is-live để ghim và kể theo cuộn. */
.journey { position: relative; background: var(--bg-soft); padding-block: var(--section-y); }
.section--soft + .journey { padding-top: 0; }
.journey__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.journey__text .h1 { margin-top: var(--sp-3); }
.jsteps { margin-top: var(--sp-10); display: grid; gap: var(--sp-6); }
.jstep { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); }
.jstep__no { padding-top: .3rem; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--course-tone); }
.jstep p { margin-top: var(--sp-2); max-width: 27rem; color: var(--text-2); }
.jdots { display: none; }
.flip { position: relative; width: min(100%, 35rem); margin-inline: auto; aspect-ratio: 1.414; perspective: 110rem; }
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip__face--back { transform: rotateY(180deg); }
.flip__face > .pass, .flip__face > .cert { width: 100%; height: 100%; aspect-ratio: auto; }
.flip .ring { transition: none; }
.jbadge { position: absolute; z-index: 3; display: none; align-items: center; gap: .375rem; min-height: 2.25rem; padding: 0 .875rem; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.jbadge .ic { color: var(--success); }
.jbadge--1 { left: -6%; top: 27%; } .jbadge--2 { right: -6%; top: 40%; } .jbadge--3 { right: 9%; bottom: -5%; }
.journey.is-live { height: 420vh; padding: 0; }
.journey.is-live .journey__pin { position: sticky; top: 0; height: 100svh; padding-top: var(--nav-h); display: grid; align-items: center; overflow: clip; }
.journey.is-live .flip__inner { transform: none; }
.journey.is-live .jsteps { position: relative; display: block; height: 9.5rem; margin-top: var(--sp-8); }
.journey.is-live .jstep { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; }
.journey.is-live .jbadge { display: inline-flex; }
.journey.is-live .jdots { display: flex; gap: .375rem; margin-top: var(--sp-8); }
.jdots i { width: 2rem; height: .25rem; border-radius: var(--r-pill); background: var(--line-strong); transition: background-color var(--dur-2), width var(--dur-3) var(--ease-out); }
.jdots i.is-on { width: 3rem; background: var(--course-tone); }
@media (max-width: 56rem) {
  .journey__grid { grid-template-columns: 1fr; }
  .flip { width: min(100%, 24rem); }
  .journey.is-live .journey__grid { gap: var(--sp-6); }
  .journey.is-live .journey__text .h1 { font-size: var(--fs-h2); }
  .journey.is-live .jsteps { height: 9rem; margin-top: var(--sp-5); }
  .journey.is-live .jdots { margin-top: var(--sp-4); }
  .jbadge--1 { left: -1%; } .jbadge--2 { right: -1%; }
}

/* Xác minh */
.verify__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); }
.verify__row .input { height: 3.25rem; font-size: var(--fs-body); letter-spacing: .04em; text-transform: uppercase; }
.verify__row .input::placeholder { text-transform: none; letter-spacing: .04em; }
.verify__sample { min-height: 1.5rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.verify__result { margin-top: var(--sp-6); min-height: 1px; }
.vcard { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-xl); background: var(--success-soft); animation: vcard-in var(--dur-4) var(--ease-soft); }
.vcard--bad { background: var(--danger-soft); }
.vcard__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--success); color: var(--bg); }
.vcard--bad .vcard__ic { background: var(--danger); }
.vcard strong { display: block; } .vcard p { font-size: var(--fs-sm); color: var(--text-2); }
@keyframes vcard-in { from { opacity: 0; transform: translateY(.75rem) scale(.98); } }
@media (max-width: 36rem) { .verify__row { grid-template-columns: 1fr; } .vcard { grid-template-columns: auto 1fr; } .vcard .link { grid-column: 1 / -1; } }

/* Giá */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 2px solid transparent; border-radius: var(--r-2xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.plan--best { box-shadow: var(--shadow-2); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-spectrum) border-box; }
.plan__name { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 1.75rem; font-weight: 600; }
.plan__price { margin-top: var(--sp-4); font-size: clamp(2rem, 1.5rem + 1.5vw, 2.625rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__price small { margin-right: .375rem; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.plan__for { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
.plan__list { margin: var(--sp-6) 0 var(--sp-8); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.plan__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; }
.plan__list .ic { margin-top: .12em; color: var(--success); }
.plan .btn { margin-top: auto; }
.plans__note { margin-top: var(--sp-6); text-align: center; }
@media (max-width: 56rem) { .plans { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } }

/* Lời mời cuối: vòng tròn đã khép kín (logo) cắt ở góc */
.section--cta { padding-top: 0; }
.cta-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: var(--sp-5); padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); border-radius: var(--r-2xl); background: var(--gray-900); color: var(--gray-100); text-align: center; box-shadow: 0 0 0 1px var(--line); }
.cta-panel .lead { color: var(--gray-400); }
.cta-panel::before { content: ""; position: absolute; z-index: -1; right: -9rem; bottom: -19rem; width: 38rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 210deg, var(--iris-500), var(--blue-400), var(--mint-500), var(--sun-400), var(--coral-500), var(--pink-500), var(--iris-500)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3rem), #000 calc(100% - 3rem + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3rem), #000 calc(100% - 3rem + 1px)); }
@media (max-width: 48rem) { .cta-panel::before { width: 22rem; right: -8rem; bottom: -13rem; } }

/* ══════════ TRANG HỌC ══════════ */
.learn { display: grid; grid-template-columns: 21rem minmax(0, 1fr); grid-template-rows: var(--nav-h) minmax(0, 1fr); height: 100dvh; background: var(--bg-soft); }
.learn__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 0 var(--sp-3) 0 var(--sp-2); background: var(--surface); border-bottom: 1px solid var(--line); }
.learn__back { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap; transition: color var(--dur-2), background-color var(--dur-2); }
.learn__back:hover { color: var(--text); background: var(--bg-soft); }
.learn__toc-btn { display: none; }
.learn__where { display: flex; flex-direction: column; min-width: 0; margin-inline: auto; text-align: center; line-height: 1.3; }
.learn__where span { font-size: var(--fs-xs); color: var(--text-2); }
.learn__where strong { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learn__tools { display: flex; align-items: center; gap: var(--sp-2); }
.learn__search { position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .5rem 0 .75rem; border-radius: var(--r-pill); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); transition: color var(--dur-2), box-shadow var(--dur-2); }
.learn__search::after { content: ""; position: absolute; inset: -4px 0; }
.learn__search:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
kbd { display: inline-block; min-width: 1.375rem; padding: .1rem .35rem; border-radius: .3rem; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); font: 500 .6875rem/1.4 var(--font-mono); text-align: center; color: var(--text-2); }
.learn__ring { --size: 2.25rem; --w: 3px; }

.learn__side { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5) var(--sp-3) var(--sp-8); background: var(--surface); border-right: 1px solid var(--line); }
.toc__head { padding: 0 var(--sp-3) var(--sp-4); }
.toc__head .bar { margin-top: .5rem; }
.toc__ch { border-top: 1px solid var(--line); }
.toc__sum { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; align-items: center; min-height: 3rem; padding: .5rem .75rem; border-radius: var(--r-md); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; transition: background-color var(--dur-2); }
.toc__sum::-webkit-details-marker { display: none; }
.toc__sum:hover { background: var(--bg-soft); }
.toc__no, .toc__n, .toc__m { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-3); }
.toc__lock { color: var(--text-3); display: inline-flex; }
.toc__list { padding-bottom: .5rem; }
.toc__ls { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; align-items: center; min-height: 2.75rem; padding: .375rem .75rem; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); transition: background-color var(--dur-2), color var(--dur-2); }
.toc__ls:hover { background: var(--bg-soft); color: var(--text); }
.toc__ls.is-current { background: var(--course-soft); color: var(--text); font-weight: 600; }
.toc__state { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.toc__state .ic { width: .8rem; height: .8rem; stroke-width: 2.6; }
.toc__ls.is-current .toc__state { box-shadow: inset 0 0 0 1.5px var(--course-tone); }
.toc__ls.is-current:not(.is-done) .toc__state::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--course-tone); }
.toc__ls.is-done .toc__state { background: var(--success); box-shadow: none; color: var(--bg); }
.toc__state.is-new { animation: pop var(--dur-4) var(--ease-pop); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.toc__locked { padding: 0 .75rem .75rem 2.75rem; font-size: var(--fs-xs); color: var(--text-2); }
.toc__locked .link { min-height: 2.25rem; font-size: var(--fs-xs); }

.learn__main { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sp-4); min-height: 0; padding: clamp(1rem, 2.4vw, 2rem); overflow-y: auto; }
.viewer { display: grid; align-content: center; min-height: 0; }
.viewer .slide { width: min(100%, calc((100dvh - var(--nav-h) - 9.5rem) * 16 / 9)); margin-inline: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); touch-action: pan-y; }
.viewer .slide:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }
.learn__ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); width: min(100%, 64rem); margin-inline: auto; }
.learn__nav { grid-column: 2; display: flex; align-items: center; gap: var(--sp-3); }
.learn__pos { display: grid; gap: .375rem; min-width: 8rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.learn__pos .bar { background: var(--line-strong); }
.learn__done { grid-column: 3; justify-self: end; }
.learn__done.btn--soft { --btn-bg: var(--surface); --btn-bd: var(--line-strong); }
.learn__done.is-pop { animation: btn-pop var(--dur-4) var(--ease-pop); }
@keyframes btn-pop { 40% { transform: scale(1.06); } }
.learn__scrim { position: fixed; inset: var(--nav-h) 0 0; z-index: calc(var(--z-sheet) - 1); background: var(--scrim); }
.paywall { display: grid; justify-items: center; gap: var(--sp-4); width: min(100%, 38rem); margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--r-2xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); text-align: center; animation: vcard-in var(--dur-4) var(--ease-soft); }
.paywall__ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--course-soft); color: var(--course-tone); }
.paywall .lead { font-size: var(--fs-body); }
.paywall .cluster { margin-top: var(--sp-3); }

.search { padding: 0; }
.search__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--line); color: var(--text-2); }
.search__input { height: 3rem; border: 0; outline: 0; background: none; font-size: var(--fs-body); color: var(--text); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__list { max-height: 22rem; overflow-y: auto; padding: var(--sp-2); }
.search__hit { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--sp-3); align-items: center; min-height: 3.5rem; padding: .5rem .75rem; border-radius: var(--r-md); cursor: pointer; color: var(--text-2); }
.search__hit strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.search__hit.is-sel, .search__hit:hover { background: var(--bg-soft); }
.search__hit.is-sel { box-shadow: inset 0 0 0 1px var(--line-strong); }
.search__no { font-size: var(--fs-xs); color: var(--text-3); }
.search__empty { padding: var(--sp-6) var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.search__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-2); }
.search__foot span { margin-right: .5rem; }

@media (max-width: 60rem) {
  .learn { grid-template-columns: minmax(0, 1fr); }
  .learn__side { position: fixed; inset: var(--nav-h) auto 0 0; z-index: var(--z-sheet); width: min(22rem, 88vw); transform: translateX(-102%); visibility: hidden; box-shadow: var(--shadow-3); transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3); }
  .learn.is-toc .learn__side { transform: none; visibility: visible; }
  .learn__toc-btn { display: inline-grid; }
  .learn__back { padding: 0; width: 2.75rem; justify-content: center; }
  .learn__back span, .learn__search span, .learn__search kbd, .learn__theme, .learn__ring { display: none; }
  .learn__search { width: 2.5rem; padding: 0; justify-content: center; }
  .learn__bar { gap: var(--sp-1); padding-inline: var(--sp-1) var(--sp-3); }
  .learn__where { flex: 1; margin-inline: var(--sp-1); text-align: left; }
  .learn__ctrl { grid-template-columns: minmax(0, 1fr); }
  .learn__nav { grid-column: 1; justify-content: center; }
  .learn__done { grid-column: 1; justify-self: stretch; }
  .viewer { align-content: start; }
  .viewer .slide { width: 100%; }
}

/* ══════════ TRANG KHOÁ ══════════ */
.chero { background: var(--course-soft); padding-block: clamp(.75rem, 2vw, 1.5rem) clamp(2.5rem, 6vw, 5rem); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.crumb { display: flex; align-items: center; gap: .375rem; font-size: var(--fs-sm); color: var(--text-2); }
.crumb a { display: inline-flex; align-items: center; min-height: 2.75rem; } .crumb a:hover { color: var(--text); }
.chero__grid { margin-top: clamp(.5rem, 2vw, 1.5rem); }
.chero__no { font-size: var(--fs-sm); font-weight: 700; color: var(--course-tone); }
.chero .h1 { margin-top: var(--sp-2); } .chero .lead { margin-top: var(--sp-4); max-width: 34rem; }
.chero__chips { margin-top: var(--sp-6); --gap: .5rem; }
.chero__chips .chip { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pass--hero { view-transition-name: pass; width: min(100%, 30rem); margin-inline: auto; }
.cbody { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.cbody__main > section + section { margin-top: clamp(3rem, 6vw, 5rem); }
.cbody h2 { margin-bottom: var(--sp-5); }
.outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-8); }
.outcomes li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; }
.outcomes .ic { margin-top: .15em; color: var(--course-tone); }
.chapters .acc__sum { display: grid; grid-template-columns: 2.5rem 1fr auto auto; gap: var(--sp-3); }
.chapters__no { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-3); }
.chapters__meta { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.chapters .acc__chev { margin-left: 0; }
.chapters .acc__panel { padding-left: calc(2.5rem + var(--sp-3)); }
.lessons { margin-top: var(--sp-4); display: grid; }
.lessons li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .625rem; align-items: center; min-height: 2.5rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text); }
.lessons .ic { color: var(--text-3); } .lessons span:last-child { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.certrow { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--sp-8); align-items: center; }
.certrow p + .link { margin-top: var(--sp-2); }
.buy { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); display: grid; gap: var(--sp-4); }
.buy__price { font-size: 2.25rem; line-height: 1.1; letter-spacing: -.035em; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy__list { display: grid; gap: .625rem; font-size: var(--fs-sm); }
.buy__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; } .buy__list .ic { margin-top: .12em; color: var(--success); }
.buy__bundle { display: grid; gap: .125rem; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.buy__resume { display: flex; align-items: center; gap: var(--sp-4); }
.buybar { display: none; }
@media (max-width: 60rem) {
  .chero__grid, .cbody { grid-template-columns: minmax(0, 1fr); }
  .chero__grid > :last-child { order: -1; }
  .pass--hero { width: min(100%, 24rem); }
  .outcomes, .certrow { grid-template-columns: minmax(0, 1fr); }
  .buy { position: static; }
  .buybar { position: fixed; inset: auto 0 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom)); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); }
  .buybar strong { font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .has-buybar { padding-bottom: 5rem; }
  .chapters .acc__sum { grid-template-columns: 2rem 1fr auto; } .chapters__meta { display: none; }
  .chapters .acc__panel { padding-left: 0; }
}

/* ══════════ DANH MỤC ══════════ */
.cat { padding-block: clamp(2rem, 5vw, 4rem) var(--section-y); }
.cat__head .lead { margin-top: var(--sp-3); max-width: 36rem; }
.cat__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block: var(--sp-8) var(--sp-6); }
.cat__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.ccard { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-2xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.ccard:hover { box-shadow: 0 0 0 1px var(--line), var(--shadow-2); transform: translateY(-3px); }
.ccard__body { display: grid; gap: var(--sp-2); padding-inline: var(--sp-2); }
.ccard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.ccard__price { font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.soon { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--sp-8); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--r-2xl); background: var(--bg-soft); }
.soon__form { display: grid; gap: var(--sp-2); }
.soon__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.empty { grid-column: 1 / -1; padding: var(--sp-12) var(--sp-6); border-radius: var(--r-2xl); background: var(--bg-soft); text-align: center; color: var(--text-2); }
@media (max-width: 56rem) { .cat__grid, .soon { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .cat__bar .seg { width: 100%; } .cat__bar .seg__btn { padding: 0 .375rem; font-size: var(--fs-xs); white-space: nowrap; } }

/* ══════════ THANH TOÁN ══════════ */
.checkout { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section-y); }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: var(--sp-6); }
.checkout form { display: grid; gap: var(--sp-5); }
.checkout fieldset { margin: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-4); }
.checkout legend { padding: 0; margin-bottom: var(--sp-4); float: left; width: 100%; }
.checkout legend + * { clear: both; }
.methods { display: grid; gap: var(--sp-2); }
.method { position: relative; display: grid; grid-template-columns: 2.75rem 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: box-shadow var(--dur-2), background-color var(--dur-2); }
.method:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.method input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.method__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--bg-soft); color: var(--text-2); }
.method strong { display: block; font-weight: 600; } .method span.small { color: var(--text-2); }
.method__dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow var(--dur-2) var(--ease-out); }
.method:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.method:has(input:checked) .method__dot { box-shadow: inset 0 0 0 6px var(--accent); }
.method:has(input:checked) .method__ic { background: var(--surface); color: var(--accent); }
.method:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.qr { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--bg-soft); animation: vcard-in var(--dur-3) var(--ease-out); }
.qr__code { aspect-ratio: 1; padding: .5rem; border-radius: var(--r-md); background: var(--paper); color: var(--paper-ink); }
.qr__code svg { width: 100%; height: 100%; }
.qr dl { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.qr dt { font-size: var(--fs-xs); color: var(--text-2); } .qr dd { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.copy-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); color: var(--accent); }
.copy-btn:hover { background: var(--accent-soft); }
.checkout__legal { font-size: var(--fs-xs); color: var(--text-2); text-align: center; }
.summary { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); display: grid; gap: var(--sp-4); }
.summary__items { display: grid; gap: var(--sp-3); }
.summary__item { display: grid; grid-template-columns: 6rem 1fr; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.summary__item strong { display: block; }
.summary__lines { display: grid; gap: .5rem; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.summary__lines div { display: flex; justify-content: space-between; gap: var(--sp-4); font-variant-numeric: tabular-nums; }
.summary__total { padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.paid { display: grid; justify-items: center; gap: var(--sp-4); width: min(100%, 36rem); margin: clamp(2rem, 8vw, 6rem) auto 0; text-align: center; }
.paid__ring { --size: 5.5rem; --w: 6px; --ring-fill: var(--success); --ring-track: var(--success-soft); color: var(--success); }
.paid__ring .ic { width: 2.25rem; height: 2.25rem; stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw var(--dur-4) var(--ease-out) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.paid .cluster { margin-top: var(--sp-3); justify-content: center; }
@media (max-width: 60rem) { .checkout__grid { grid-template-columns: minmax(0, 1fr); } .summary { position: static; order: -1; } .qr { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .qr__code { width: 10rem; } .qr dd { justify-content: center; } }

/* ══════════ CHỨNG CHỈ ══════════ */
.certpage__top { display: grid; justify-items: center; gap: var(--sp-4); padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem); text-align: center; background: linear-gradient(to bottom, var(--course-soft), transparent 70%); }
.certpage__stage { width: min(100% - 2 * var(--gutter), 52rem); margin-top: var(--sp-4); }
.certpage__actions { margin-top: var(--sp-6); justify-content: center; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.facts div { padding: var(--sp-5); background: var(--surface); }
.facts dt { font-size: var(--fs-xs); color: var(--text-2); } .facts dd { margin-top: .25rem; display: flex; align-items: center; gap: .375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.certpage__note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--text-2); }
.certpage__again { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } }
@media print {
  dl-header, dl-footer, .certpage__actions, .certpage__again, .facts, .certpage__note, .certpage__top > :not(.certpage__stage), .toast-wrap { display: none !important; }
  .certpage__top { background: none; padding: 0; } .certpage__stage { width: 100%; margin: 0; }
  .cert { box-shadow: 0 0 0 1px var(--paper-line); transform: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* ══════════ BẢNG HỌC TẬP ══════════ */
.dash { padding-block: clamp(2rem, 5vw, 4rem) var(--section-y); }
.dash__head .h2 { margin-top: var(--sp-2); }
.resume { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: var(--sp-8); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--r-2xl); background: var(--course-soft); }
.resume__body { display: grid; gap: var(--sp-3); justify-items: start; }
.resume__bar { width: min(100%, 22rem); display: grid; gap: .375rem; font-size: var(--fs-xs); color: var(--text-2); }
.resume__bar .bar { background: var(--surface); }
.resume .cluster { margin-top: var(--sp-2); --gap: 1.25rem; }
.dash__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
.dash h2 { margin-bottom: var(--sp-4); }
.mycourse { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.mycourse:first-of-type { border-top: 0; padding-top: 0; }
.mycourse strong { display: block; } .mycourse p { font-size: var(--fs-sm); color: var(--text-2); }
.mycourse__lock { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--bg-soft); color: var(--text-3); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; margin-block: var(--sp-2) var(--sp-4); }
.week span { display: grid; justify-items: center; gap: .375rem; font-size: var(--fs-xs); color: var(--text-2); }
.week i { width: 100%; max-width: 2.25rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; color: var(--bg); }
.week .is-on i { background: var(--success); box-shadow: none; }
.week .is-today i { box-shadow: inset 0 0 0 2px var(--text); }
.week .ic { width: .9rem; height: .9rem; stroke-width: 2.6; }
.wallet-empty { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: var(--sp-8); align-items: center; }
.ghost-cert { aspect-ratio: 1.414; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); display: grid; place-items: center; color: var(--text-3); }
.ghost-cert .ic { width: 2rem; height: 2rem; }
.dash__certs { margin-top: var(--sp-6); }
@media (max-width: 56rem) { .resume, .dash__grid, .wallet-empty { grid-template-columns: minmax(0, 1fr); } .mycourse { grid-template-columns: auto 1fr; } .mycourse > :last-child { grid-column: 1 / -1; justify-self: start; } }

/* Trang học: thông báo nổi nằm trên hàng điều khiển, không che nút đổi slide */
body:has(.learn) .toast-wrap { bottom: 6rem; }

/* ══════════ TRANG HỌC: chế độ Bài đọc ══════════ */
.learn__main { grid-template-rows: auto minmax(0, 1fr) auto; }
.learn__main:has(.reader) { display: block; }
.learn__main:has(.reader) > * + * { margin-top: var(--sp-4); }
.learn__main:has(.reader) .learn__ctrl { width: min(100%, 46rem); padding-bottom: var(--sp-8); }
.learn__view { display: flex; justify-content: center; }
.viewer:has(.reader) { align-content: start; }
.reader { width: min(100%, 46rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 1.125rem; line-height: 1.72; }
.reader__kicker { font-size: var(--fs-sm); font-weight: 600; color: var(--course-tone); }
.reader__title { margin-top: .5rem; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.reader__meta { display: flex; align-items: center; gap: .375rem; margin-top: .75rem; font-size: var(--fs-sm); color: var(--text-2); }
.reader h2 { margin-top: 2.25rem; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.015em; font-weight: 700; }
.reader p, .reader ul, .reader ol, .reader pre, .reader aside { margin-top: 1rem; }
.reader ul { list-style: disc; padding-left: 1.25rem; } .reader ol { list-style: decimal; padding-left: 1.25rem; }
.reader li + li { margin-top: .375rem; } .reader li::marker { color: var(--course-tone); }
.reader pre { padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--code-bg); color: var(--code-fg); font: 400 .875rem/1.65 var(--font-mono); overflow: auto; tab-size: 2; }
.reader pre i { font-style: normal; } .reader pre .k { color: var(--code-key); } .reader pre .s { color: var(--code-str); }
.reader__note { padding: 1rem 1.25rem; border-radius: var(--r-md); border-left: 3px solid var(--course-tone); background: var(--course-soft); }
.reader__note strong { font-size: var(--fs-sm); color: var(--course-tone); } .reader__note p { margin-top: .25rem; }
.reader__terms { display: flex; flex-wrap: wrap; gap: .5rem; }
.reader__next { margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.learn__ctrl.is-read .learn__nav { visibility: hidden; }
@media (max-width: 60rem) { .learn__ctrl.is-read .learn__nav { display: none; } }

/* ══════════ THANH TOÁN: ô xác nhận (tuổi, điều khoản, dữ liệu cá nhân) ══════════ */
.checkout .consents { gap: var(--sp-1); }
.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; min-height: 2.75rem; padding-block: .5rem; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.consents.has-error .field__error { display: flex; margin-top: var(--sp-2); }
.btn[aria-disabled="true"]:empty { display: none; }