/* Ba subset cùng một variable font: tiếng Việt và chữ Latin luôn đồng nhất. */
        @font-face {
            font-family: "Plus Jakarta Sans Local";
            src: url("/fonts/rollcall/pjs-vietnamese.woff2") format("woff2");
            font-style: normal;
            font-weight: 200 800;
            font-display: swap;
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
        }

        @font-face {
            font-family: "Plus Jakarta Sans Local";
            src: url("/fonts/rollcall/pjs-latin-ext.woff2") format("woff2");
            font-style: normal;
            font-weight: 200 800;
            font-display: swap;
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        @font-face {
            font-family: "Plus Jakarta Sans Local";
            src: url("/fonts/rollcall/pjs-latin.woff2") format("woff2");
            font-style: normal;
            font-weight: 200 800;
            font-display: swap;
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        :root {
            --ink: #0e0f11;
            --ink-2: #25282c;
            --muted: #656b70;
            --muted-2: #626a70;
            --paper: #ffffff;
            --canvas: #f7f9f6;
            --canvas-2: #f1f5ef;
            --line: #e4e9e2;
            --line-dark: rgba(14, 15, 17, .13);
            --lime: #9acd32;
            --lime-deep: #4f760d;
            --lime-soft: #eff9dd;
            /* Mặt tối: xanh rừng sâu, cùng trục màu với nền giấy #f7f9f6 — thay cho gần-đen. */
            --forest-lift: #14251d;
            --forest: #0f1d17;
            --forest-deep: #091411;
            --forest-surface: linear-gradient(180deg, var(--forest-lift) 0%, var(--forest) 52%, var(--forest-deep) 100%);
            --forest-edge: rgba(216, 250, 231, .075);
            --forest-line: rgba(206, 245, 222, .15);
            --forest-fill: rgba(220, 250, 234, .055);
            --forest-mute: rgba(230, 246, 238, .66);
            --forest-faint: rgba(228, 245, 236, .52);
            --blue: #005fbd;
            --orange: #c74616;
            --orange-deep: #a93209;
            --orange-soft: #fff0e9;
            --mint: #087656;
            --coral: #d84c7f;
            --violet: #5b45b8;
            --sun: #e89812;
            --radius-sm: 12px;
            --radius: 18px;
            --radius-lg: 26px;
            --radius-xl: 32px;
            --pill: 999px;
            --shadow: 0 18px 54px rgba(28, 38, 30, .055), 0 2px 8px rgba(28, 38, 30, .025);
            --shadow-pop: 0 28px 76px rgba(28, 38, 30, .09), 0 7px 20px rgba(28, 38, 30, .045);
            --max: 1200px;
            --font: "Plus Jakarta Sans Local", "Be Vietnam Pro", "Segoe UI", sans-serif;
            --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
            --ease: cubic-bezier(.2, .75, .25, 1);
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            max-width: 100%;
            overflow-x: clip;
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: var(--font);
            font-size: 16px;
            line-height: 1.68;
            -webkit-font-smoothing: antialiased;
            max-width: 100%;
            overflow-x: clip;
        }

            body.nav-open {
                overflow: hidden;
            }

        img, svg {
            display: block;
            max-width: 100%;
        }

        a {
            color: inherit;
        }

        button, input {
            font: inherit;
        }

        button {
            color: inherit;
        }

        h1, h2, h3, p {
            margin-top: 0;
        }

        h1, h2, h3 {
            font-family: var(--font);
            text-wrap: balance;
        }

        p {
            text-wrap: pretty;
        }

        .day-dot,
        .journey-dates,
        .schedule-band__item strong,
        .selection-dock__amount strong,
        .payment-amount strong,
        .price,
        .lesson__n,
        .lesson time {
            font-variant-numeric: tabular-nums lining-nums;
        }

        ::selection {
            color: var(--ink);
            background: rgba(154, 205, 50, .35);
        }

        .skip-link {
            position: fixed;
            top: 8px;
            left: 16px;
            z-index: 1000;
            padding: 10px 16px;
            border-radius: var(--pill);
            color: #fff;
            background: var(--forest);
            transform: translateY(-150%);
            transition: transform .2s ease;
        }

            .skip-link:focus {
                transform: translateY(0);
            }

        :focus-visible {
            outline: 3px solid #005fbd;
            outline-offset: 4px;
        }

        .container {
            width: min(calc(100% - 40px), var(--max));
            margin-inline: auto;
        }

        .section {
            position: relative;
            padding: 116px 0;
        }

        .section--soft {
            background: var(--canvas);
        }

        .section--green {
            background: linear-gradient(180deg, #f4f9ed 0%, #fff 100%);
        }

        .section--dark {
            overflow: hidden;
            color: #fff;
            background: var(--forest-surface);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .section--dark::before {
                content: "";
                position: absolute;
                inset: -30% -15%;
                pointer-events: none;
                background: radial-gradient(circle at 15% 38%, rgba(154, 205, 50, .24), transparent 25%), radial-gradient(circle at 82% 65%, rgba(0, 113, 227, .18), transparent 26%);
            }

        .section__head {
            max-width: 780px;
            margin-bottom: 52px;
        }

        .section__head--center {
            margin-inline: auto;
            text-align: center;
        }

        .section__label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 18px;
            padding: 7px 12px;
            border: 1px solid var(--line);
            border-radius: var(--pill);
            color: var(--ink-2);
            background: rgba(255,255,255,.72);
            font-size: 12px;
            font-weight: 750;
            line-height: 1;
            letter-spacing: .075em;
            text-transform: uppercase;
        }

            .section__label::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--lime);
                box-shadow: 0 0 0 4px rgba(154,205,50,.15);
            }

        .section--dark .section__label {
            color: #fff;
            border-color: var(--forest-line);
            background: var(--forest-fill);
        }

        .section__title {
            margin-bottom: 20px;
            color: inherit;
            font-size: clamp(36px, 5vw, 58px);
            font-weight: 650;
            line-height: 1.12;
            letter-spacing: -.036em;
        }

        .section__lead {
            margin-bottom: 0;
            color: var(--muted);
            font-size: clamp(17px, 2vw, 20px);
            line-height: 1.72;
        }

        .section--dark .section__lead {
            color: var(--forest-mute);
        }

        .accent {
            color: var(--lime-deep);
            font-family: inherit;
            font-style: normal;
            font-weight: inherit;
            letter-spacing: inherit;
        }

        .section--dark .accent {
            color: #b8e861;
        }

        .scroll-progress {
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            height: 3px;
            pointer-events: none;
        }

            .scroll-progress span {
                display: block;
                width: 0;
                height: 100%;
                background: linear-gradient(90deg, var(--lime-deep), var(--lime), var(--orange));
            }

        .site-header {
            position: fixed;
            z-index: 90;
            top: 12px;
            left: 50%;
            width: min(calc(100% - 32px), 1240px);
            transform: translateX(-50%);
        }

        .nav-shell {
            display: flex;
            align-items: center;
            min-height: 62px;
            padding: 7px 8px 7px 18px;
            border: 1px solid rgba(255,255,255,.82);
            border-radius: var(--pill);
            background: rgba(255,255,255,.78);
            box-shadow: 0 8px 30px rgba(30,40,32,.06);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
            transition: box-shadow .25s ease, background .25s ease;
        }

        .site-header.scrolled .nav-shell {
            background: rgba(255,255,255,.93);
            box-shadow: 0 14px 38px rgba(30,40,32,.10);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-width: max-content;
            min-height: 44px;
            color: var(--ink);
            text-decoration: none;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: .025em;
        }

            .brand img {
                width: 34px;
                height: 34px;
                border-radius: 50%;
            }

            .brand small {
                margin-left: 2px;
                color: var(--muted-2);
                font-size: 10px;
                font-weight: 650;
                letter-spacing: .03em;
            }

        .desktop-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin: 0 auto;
        }

            .desktop-nav a {
                padding: 12px 11px;
                border-radius: var(--pill);
                color: #4d5357;
                text-decoration: none;
                font-size: 13px;
                font-weight: 650;
                transition: color .2s, background .2s;
            }

                .desktop-nav a:hover {
                    color: var(--ink);
                    background: var(--canvas-2);
                }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 0 20px;
            border-radius: var(--pill);
            color: #fff;
            background: var(--forest);
            text-decoration: none;
            font-size: 13px;
            font-weight: 750;
            box-shadow: 0 8px 18px rgba(9,20,17,.17);
            transition: transform .25s var(--ease), background .25s;
        }

            .nav-cta:hover {
                background: #1b3128;
                transform: translateY(-1px);
            }

        .menu-toggle {
            display: none;
            width: 46px;
            height: 46px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: var(--canvas);
            cursor: pointer;
        }

            .menu-toggle span {
                display: block;
                width: 18px;
                height: 1.5px;
                margin: 5px auto;
                background: var(--ink);
                transition: transform .25s, opacity .25s;
            }

            .menu-toggle[aria-expanded="true"] span:first-child {
                transform: translateY(3.25px) rotate(45deg);
            }

            .menu-toggle[aria-expanded="true"] span:last-child {
                transform: translateY(-3.25px) rotate(-45deg);
            }

        .mobile-menu {
            display: none;
        }

        .hero {
            position: relative;
            min-height: 910px;
            overflow: hidden;
            padding: 154px 0 92px;
            background: radial-gradient(circle at 76% 24%, rgba(154,205,50,.18), transparent 25%), radial-gradient(circle at 91% 61%, rgba(0,113,227,.08), transparent 28%), linear-gradient(180deg, #fbfdf9 0%, #fff 92%);
        }

            .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: .45;
                background-image: linear-gradient(rgba(14,15,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,15,17,.035) 1px, transparent 1px);
                background-size: 42px 42px;
                mask-image: linear-gradient(to bottom, #000, transparent 75%);
            }

        .hero__grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.06fr .94fr;
            align-items: center;
            gap: clamp(54px, 7vw, 96px);
        }

        .hero__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 24px;
            padding: 8px 13px 8px 9px;
            border: 1px solid #dae6d0;
            border-radius: var(--pill);
            color: #3b4e2f;
            background: rgba(255,255,255,.78);
            font-size: 12px;
            font-weight: 750;
            letter-spacing: .025em;
            box-shadow: 0 6px 18px rgba(50,70,38,.05);
        }

            .hero__eyebrow b {
                display: inline-grid;
                place-items: center;
                min-width: 26px;
                height: 26px;
                border-radius: 50%;
                color: var(--ink);
                background: var(--lime);
                font-size: 11px;
            }

        .hero h1 {
            margin-bottom: 26px;
            font-size: clamp(56px, calc(38px + 6vw), 94px);
            font-weight: 700;
            line-height: 1.01;
            letter-spacing: -.048em;
        }

            .hero h1 .small-line {
                display: block;
                max-width: 680px;
                margin-top: 16px;
                font-size: .43em;
                font-weight: 520;
                line-height: 1.2;
                letter-spacing: -.024em;
            }

            .hero h1 em {
                position: relative;
                color: var(--lime-deep);
                font-family: inherit;
                font-style: normal;
                font-weight: inherit;
                white-space: nowrap;
            }

                .hero h1 em::after {
                    content: "";
                    position: absolute;
                    right: 1%;
                    bottom: -.04em;
                    left: 2%;
                    height: .12em;
                    border-radius: var(--pill);
                    background: var(--lime);
                    transform: rotate(-1deg);
                    opacity: .75;
                }

        .hero__desc {
            max-width: 650px;
            margin-bottom: 30px;
            color: #51585c;
            font-size: clamp(17px, 1.8vw, 20px);
            line-height: 1.72;
        }

        .hero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 23px;
        }

        /* A direct route to the full lecture archive: prominent, but quieter than the primary CTA. */
        .lecture-library-link {
            position: relative;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 13px;
            width: min(100%, 520px);
            margin: 0 0 23px;
            padding: 11px 14px 11px 11px;
            overflow: hidden;
            border: 1px solid rgba(15, 29, 23, .9);
            border-radius: 18px;
            color: #fff;
            background: linear-gradient(135deg, #163126 0%, var(--forest) 72%);
            box-shadow: 0 14px 30px rgba(9, 20, 17, .14);
            text-decoration: none;
            transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
        }

            .lecture-library-link::after {
                content: "";
                position: absolute;
                right: 0;
                bottom: 0;
                width: 42%;
                height: 2px;
                background: linear-gradient(90deg, transparent, var(--lime));
                opacity: .9;
            }

            .lecture-library-link:hover {
                border-color: rgba(154, 205, 50, .75);
                box-shadow: 0 18px 38px rgba(9, 20, 17, .2);
                transform: translateY(-2px);
            }

        .lecture-library-link__mark {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            color: var(--forest);
            background: var(--lime);
            font-family: var(--mono);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: -.04em;
            line-height: 1;
        }

        .lecture-library-link__copy {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

            .lecture-library-link__copy strong {
                overflow: hidden;
                font-size: 14px;
                font-weight: 760;
                letter-spacing: -.015em;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .lecture-library-link__copy small {
                color: var(--forest-mute);
                font-size: 11px;
                font-weight: 560;
                line-height: 1.45;
            }

        .lecture-library-link__arrow {
            width: 19px;
            height: 19px;
            color: var(--lime);
            transition: transform .25s var(--ease);
        }

            .lecture-library-link:hover .lecture-library-link__arrow {
                transform: translateX(3px);
            }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 54px;
            padding: 0 23px;
            border: 1px solid transparent;
            border-radius: var(--pill);
            text-decoration: none;
            font-size: 14px;
            font-weight: 760;
            line-height: 1.2;
            cursor: pointer;
            transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
        }

            .btn svg {
                width: 17px;
                height: 17px;
            }

            .btn:hover {
                transform: translateY(-2px);
            }

        .btn--primary {
            color: #fff;
            background: linear-gradient(135deg, var(--orange), var(--orange-deep));
            box-shadow: 0 13px 28px rgba(217,70,21,.22);
        }

            .btn--primary:hover {
                box-shadow: 0 16px 35px rgba(217,70,21,.28);
            }

        .btn--dark {
            color: #fff;
            background: var(--forest);
            box-shadow: 0 12px 25px rgba(9,20,17,.18);
        }

            .btn--dark:hover {
                background: #1b3128;
            }

        .btn--outline {
            color: var(--ink);
            border-color: var(--line-dark);
            background: rgba(255,255,255,.74);
        }

            .btn--outline:hover {
                border-color: rgba(14,15,17,.27);
                background: #fff;
            }

        .btn--white {
            color: var(--ink);
            background: #fff;
            box-shadow: 0 12px 30px rgba(0,0,0,.14);
        }

        .btn--ghost-white {
            color: #fff;
            border-color: rgba(206, 245, 222, .26);
            background: var(--forest-fill);
        }

            .btn--ghost-white:hover {
                border-color: rgba(206, 245, 222, .42);
                background: rgba(220, 250, 234, .1);
            }

        .btn--block {
            width: 100%;
        }

        .hero__note {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            margin: 0;
            color: #767c80;
            font-size: 12px;
            font-weight: 600;
        }

            .hero__note span {
                display: inline-flex;
                align-items: center;
                gap: 7px;
            }

                .hero__note span::before {
                    content: "";
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: var(--lime-deep);
                }

        .journey-card {
            position: relative;
            padding: 28px;
            border: 1px solid rgba(255,255,255,.85);
            border-radius: var(--radius-xl);
            background: rgba(255,255,255,.74);
            box-shadow: var(--shadow-pop);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            transform: rotate(.55deg);
        }

            .journey-card::before {
                content: "";
                position: absolute;
                inset: -1px;
                z-index: -1;
                border-radius: inherit;
                background: linear-gradient(145deg, rgba(154,205,50,.5), transparent 42%, rgba(0,113,227,.2));
            }

        .journey-card__top {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 25px;
        }

        .journey-card__kicker {
            margin: 0 0 5px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 750;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .journey-card h2 {
            margin: 0;
            font-size: 23px;
            line-height: 1.22;
            letter-spacing: -.025em;
        }

        .live-chip {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 11px;
            border-radius: var(--pill);
            color: #40670d;
            background: var(--lime-soft);
            font-size: 11px;
            font-weight: 750;
            white-space: nowrap;
        }

            .live-chip::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--lime-deep);
                box-shadow: 0 0 0 5px rgba(154,205,50,.17);
            }

        .day-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-bottom: 28px;
        }

        .day-dot {
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--muted);
            background: #f8faf7;
            font-size: 10px;
            font-weight: 750;
            transition: transform .2s;
        }

            .day-dot:hover {
                transform: translateY(-2px);
            }

            .day-dot:nth-child(-n+7) {
                color: #467309;
                border-color: #d7eab7;
                background: #f0f9e2;
            }

            .day-dot:nth-child(n+8):nth-child(-n+14) {
                color: #087263;
                border-color: #cde9e3;
                background: #ecf8f5;
            }

            .day-dot:nth-child(n+15):nth-child(-n+23) {
                color: #125aa3;
                border-color: #ccdef0;
                background: #edf5fc;
            }

            .day-dot:nth-child(n+24):nth-child(-n+26) {
                color: #6a4db4;
                border-color: #ddd4f5;
                background: #f3f0fb;
            }

            .day-dot:nth-child(n+27) {
                color: #a64723;
                border-color: #f0d2c5;
                background: #fff1eb;
            }

        .stage-rail {
            position: relative;
            display: grid;
            gap: 9px;
        }

        .stage-row {
            display: grid;
            grid-template-columns: 30px 1fr auto;
            align-items: center;
            gap: 10px;
            min-height: 45px;
            padding: 8px 11px 8px 8px;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: rgba(255,255,255,.72);
        }

        .stage-row__n {
            display: grid;
            place-items: center;
            width: 29px;
            height: 29px;
            border-radius: 9px;
            color: #fff;
            background: var(--stage);
            font-size: 11px;
            font-weight: 800;
        }

        .stage-row strong {
            display: block;
            overflow: hidden;
            font-size: 12px;
            line-height: 1.25;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stage-row span {
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 650;
            white-space: nowrap;
        }

        .stage-row:nth-child(1) {
            --stage: var(--lime-deep);
        }

        .stage-row:nth-child(2) {
            --stage: var(--mint);
        }

        .stage-row:nth-child(3) {
            --stage: var(--blue);
        }

        .stage-row:nth-child(4) {
            --stage: var(--violet);
        }

        .stage-row:nth-child(5) {
            --stage: var(--orange);
        }

        .journey-dates {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 12px;
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
        }

            .journey-dates div:last-child {
                text-align: right;
            }

            .journey-dates small {
                display: block;
                color: var(--muted-2);
                font-size: 9px;
                font-weight: 750;
                letter-spacing: .08em;
                text-transform: uppercase;
            }

            .journey-dates strong {
                font-size: 17px;
                letter-spacing: -.018em;
                font-variant-numeric: tabular-nums;
            }

            .journey-dates svg {
                width: 54px;
                color: var(--lime-deep);
            }

        .float-tag {
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 14px;
            border: 1px solid rgba(255,255,255,.9);
            border-radius: var(--pill);
            background: rgba(255,255,255,.88);
            box-shadow: 0 12px 30px rgba(30,40,32,.10);
            backdrop-filter: blur(12px);
            font-size: 11px;
            font-weight: 750;
        }

            .float-tag b {
                display: grid;
                place-items: center;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                color: #fff;
                background: var(--forest);
                font-size: 10px;
            }

        .float-tag--one {
            top: 17%;
            right: -13%;
            transform: rotate(4deg);
        }

        .float-tag--two {
            bottom: 13%;
            left: -16%;
            transform: rotate(-4deg);
        }

        .fact-strip {
            position: relative;
            z-index: 3;
            margin-top: -31px;
        }

        .fact-strip__inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: #fff;
            box-shadow: var(--shadow);
        }

        .fact {
            padding: 25px 27px;
        }

            .fact + .fact {
                border-left: 1px solid var(--line);
            }

            .fact strong {
                display: block;
                margin-bottom: 2px;
                font-size: clamp(19px, 2vw, 26px);
                line-height: 1.24;
                letter-spacing: -.025em;
            }

            .fact span {
                color: var(--muted);
                font-size: 12px;
                font-weight: 600;
            }

        .problem-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: .86fr 1.14fr;
            gap: 76px;
            align-items: start;
        }

        .problem-quote {
            margin: 0;
            font-size: clamp(28px, 4vw, 46px);
            font-weight: 600;
            line-height: 1.24;
            letter-spacing: -.03em;
        }

            .problem-quote strong {
                color: #c6f171;
                font-weight: inherit;
            }

        .mastery-flow {
            display: grid;
            gap: 10px;
            counter-reset: mastery;
        }

        .mastery-step {
            counter-increment: mastery;
            display: grid;
            grid-template-columns: 42px 1fr;
            align-items: center;
            gap: 15px;
            min-height: 70px;
            padding: 12px 18px 12px 12px;
            border: 1px solid var(--forest-line);
            border-radius: var(--radius);
            background: var(--forest-fill);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .mastery-step::before {
                content: counter(mastery, decimal-leading-zero);
                display: grid;
                place-items: center;
                width: 42px;
                height: 42px;
                border-radius: 13px;
                color: var(--ink);
                background: #b8e861;
                font-size: 11px;
                font-weight: 800;
            }

            .mastery-step strong {
                font-size: 15px;
            }

        .asset-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 18px;
        }

        .asset-card {
            position: relative;
            min-height: 245px;
            overflow: hidden;
            padding: 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: #fff;
            transition: transform .3s var(--ease), box-shadow .3s;
        }

            .asset-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow);
            }

            .asset-card:nth-child(1), .asset-card:nth-child(2) {
                grid-column: span 6;
            }

            .asset-card:nth-child(n+3) {
                grid-column: span 4;
                min-height: 225px;
            }

            .asset-card::after {
                content: attr(data-number);
                position: absolute;
                right: 18px;
                bottom: -27px;
                color: var(--wash, #eef5e6);
                font-family: var(--font);
                font-size: 126px;
                font-weight: 750;
                line-height: 1;
                letter-spacing: -.06em;
                pointer-events: none;
            }

            .asset-card:nth-child(2) {
                --wash: #e9f5f2;
            }

            .asset-card:nth-child(3) {
                --wash: #ebf2f9;
            }

            .asset-card:nth-child(4) {
                --wash: #f0edf9;
            }

            .asset-card:nth-child(5) {
                --wash: #faede7;
            }

        .asset-icon {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            margin-bottom: 38px;
            border-radius: 14px;
            color: var(--ink);
            background: var(--lime-soft);
        }

        .asset-card:nth-child(2) .asset-icon {
            color: var(--mint);
            background: #e7f7f2;
        }

        .asset-card:nth-child(3) .asset-icon {
            color: var(--blue);
            background: #e9f3fd;
        }

        .asset-card:nth-child(4) .asset-icon {
            color: var(--violet);
            background: #f0edfa;
        }

        .asset-card:nth-child(5) .asset-icon {
            color: var(--orange);
            background: var(--orange-soft);
        }

        .asset-icon svg {
            width: 22px;
            height: 22px;
        }

        .asset-card h3 {
            position: relative;
            z-index: 1;
            max-width: 420px;
            margin: 0;
            font-size: clamp(20px, 2.4vw, 28px);
            line-height: 1.32;
            letter-spacing: -.026em;
        }

        .asset-card p {
            position: relative;
            z-index: 1;
            margin: 10px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .format-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .phase {
            position: relative;
            padding: 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.82);
        }

            .phase::before {
                content: attr(data-step);
                position: absolute;
                top: 30px;
                right: 28px;
                color: #ccd3ca;
                font-size: 12px;
                font-weight: 800;
                letter-spacing: .06em;
            }

        .phase__time {
            display: inline-flex;
            align-items: center;
            min-height: 31px;
            margin-bottom: 28px;
            padding: 0 11px;
            border-radius: var(--pill);
            color: #426e0b;
            background: var(--lime-soft);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .phase:nth-child(2) .phase__time {
            color: #0c5f9e;
            background: #eaf4fd;
        }

        .phase:nth-child(3) .phase__time {
            color: #9d3f1f;
            background: var(--orange-soft);
        }

        .phase h3 {
            margin-bottom: 13px;
            font-size: 22px;
            line-height: 1.3;
            letter-spacing: -.024em;
        }

        .phase p, .phase li {
            color: var(--muted);
            font-size: 14px;
        }

            .phase p:last-child {
                margin-bottom: 0;
            }

        .phase ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .phase li {
            position: relative;
            padding: 7px 0 7px 20px;
            border-bottom: 1px solid var(--line);
        }

            .phase li:last-child {
                border-bottom: 0;
            }

            .phase li::before {
                content: "";
                position: absolute;
                top: 17px;
                left: 1px;
                width: 7px;
                height: 7px;
                border: 2px solid var(--lime-deep);
                border-radius: 50%;
            }

        .schedule-band {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto 1fr;
            align-items: center;
            gap: 20px;
            margin-top: 24px;
            padding: 25px 30px;
            border: 1px solid var(--forest-lift);
            border-radius: var(--radius-lg);
            background: var(--forest-surface);
            box-shadow: inset 0 1px 0 var(--forest-edge);
            color: #fff;
        }

        .schedule-band__item {
            text-align: center;
        }

            .schedule-band__item small {
                display: block;
                color: var(--forest-faint);
                font-size: 10px;
                font-weight: 750;
                letter-spacing: .08em;
                text-transform: uppercase;
            }

            .schedule-band__item strong {
                font-size: clamp(18px, 2vw, 24px);
                letter-spacing: -.02em;
                font-variant-numeric: tabular-nums;
            }

        .schedule-band__sep {
            color: #b8e861;
            font-size: 20px;
        }

        .late-entry-note {
            position: relative;
            display: grid;
            grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
            gap: clamp(24px, 4vw, 52px);
            align-items: center;
            margin-top: 14px;
            padding: clamp(24px, 3.8vw, 38px);
            overflow: hidden;
            border: 1px solid #dbe7d6;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(90deg, rgba(154, 205, 50, .08) 1px, transparent 1px) 0 0 / 28px 28px,
                linear-gradient(rgba(154, 205, 50, .08) 1px, transparent 1px) 0 0 / 28px 28px,
                #fff;
            box-shadow: var(--shadow);
        }

            .late-entry-note::before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 5px;
                background: var(--lime);
            }

        .late-entry-note__copy,
        .continuity-path {
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .late-entry-note__label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: var(--blue);
            font-family: var(--mono);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

            .late-entry-note__label::before {
                content: "";
                width: 24px;
                height: 2px;
                border-radius: var(--pill);
                background: var(--lime-deep);
            }

        .late-entry-note h3 {
            margin: 0;
            font-size: clamp(23px, 3vw, 34px);
            line-height: 1.16;
            letter-spacing: -.034em;
        }

        .late-entry-note__copy p {
            margin: 12px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .continuity-path {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
            gap: 10px;
            align-items: stretch;
        }

        .continuity-path__node {
            display: flex;
            min-height: 150px;
            flex-direction: column;
            justify-content: space-between;
            padding: 19px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--canvas);
        }

        .continuity-path__node--groups {
            border-color: var(--forest-lift);
            color: #fff;
            background: var(--forest-surface);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

        .continuity-path__eyebrow {
            color: var(--blue);
            font-family: var(--mono);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .continuity-path__node--groups .continuity-path__eyebrow {
            color: #b8e861;
        }

        .continuity-path__node strong,
        .continuity-path__node small {
            display: block;
        }

        .continuity-path__node strong {
            margin-top: 18px;
            font-size: 15px;
            line-height: 1.4;
        }

        .continuity-path__node small {
            margin-top: 7px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.55;
        }

        .continuity-path__node--groups small {
            color: var(--forest-mute);
        }

        .continuity-path__link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: var(--lime-deep);
            font-family: var(--mono);
            font-size: 20px;
            font-weight: 800;
        }

            .continuity-path__link::before,
            .continuity-path__link::after {
                content: "";
                flex: 1;
                height: 1px;
                background: #cbdabf;
            }

        .course-builder {
            margin: 0 0 28px;
            scroll-margin-top: 98px;
        }

        .builder-shell {
            overflow: clip;
            border: 1px solid #dfe7dc;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, #f7faf3 0%, #fff 58%);
            box-shadow: var(--shadow);
        }

        .builder-head {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 28px;
            padding: 31px 32px 25px;
        }

        .builder-head__step {
            display: inline-block;
            margin-bottom: 8px;
            color: var(--lime-deep);
            font-size: 10px;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: .065em;
            text-transform: uppercase;
        }

        .builder-head h3 {
            margin: 0 0 7px;
            font-size: clamp(24px, 3vw, 34px);
            line-height: 1.2;
            letter-spacing: -.03em;
        }

        .builder-head p {
            max-width: 650px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .builder-head__rule {
            max-width: 255px;
            padding: 13px 15px;
            border: 1px solid #deead4;
            border-radius: 14px;
            color: #4b6350;
            background: rgba(255,255,255,.75);
            font-size: 11px;
            line-height: 1.5;
        }

        .plan-fieldset {
            margin: 0;
            padding: 0 32px 32px;
            border: 0;
        }

            .plan-fieldset legend, .plan-fieldset > p, .plan-fieldset > h4 {
                margin: 0 0 12px;
                padding: 0;
                color: var(--ink);
                font-size: 12px;
                font-weight: 800;
            }

        .plan-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .plan-choice {
            position: relative;
            min-width: 0;
            cursor: pointer;
        }

        .plan-choice--rule {
            cursor: default;
        }

        .plan-choice input {
            position: absolute;
            z-index: 2;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        .plan-choice__card {
            display: grid;
            grid-template-columns: 36px 1fr;
            align-items: center;
            gap: 12px;
            min-height: 82px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 17px;
            background: #fff;
            transition: border-color .2s, box-shadow .2s, transform .2s;
        }

        .plan-choice:hover .plan-choice__card {
            transform: translateY(-2px);
            border-color: #cbd9c2;
        }

        .plan-choice input:focus-visible + .plan-choice__card {
            outline: 3px solid var(--blue);
            outline-offset: 3px;
        }

        .plan-choice input:checked + .plan-choice__card {
            border-color: var(--lime-deep);
            background: #f7fbef;
            box-shadow: 0 0 0 3px rgba(79,118,13,.10);
        }

        .plan-choice__radio {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border: 1px solid #ccd5c8;
            border-radius: 50%;
            color: transparent;
            background: #fff;
            font-size: 15px;
            font-weight: 800;
        }

        .plan-choice--rule .plan-choice__card {
            min-height: 94px;
        }

        .plan-choice--rule:hover .plan-choice__card {
            transform: none;
            border-color: var(--line);
        }

        .plan-choice--rule .plan-choice__radio {
            color: #fff;
            border-color: var(--lime-deep);
            background: var(--lime-deep);
            font-size: 10px;
            letter-spacing: -.02em;
        }

        .plan-choice input:checked + .plan-choice__card .plan-choice__radio {
            color: #fff;
            border-color: var(--lime-deep);
            background: var(--lime-deep);
        }

        .plan-choice__copy {
            min-width: 0;
        }

            .plan-choice__copy strong {
                display: block;
                font-size: 14px;
                line-height: 1.35;
                text-wrap: pretty;
            }

            .plan-choice__copy span {
                display: block;
                margin-top: 3px;
                color: var(--muted);
                font-size: 10px;
                line-height: 1.35;
            }

        .pricing-gift-note {
            margin: 13px 0 0 !important;
            padding: 11px 13px !important;
            border: 1px solid #dce8d3;
            border-radius: 13px;
            color: #49603d !important;
            background: #f7fbf3;
            font-size: 10px !important;
            line-height: 1.5;
        }

        .selection-dock {
            position: sticky;
            z-index: 24;
            top: 86px;
            display: grid;
            grid-template-columns: minmax(155px,.8fr) minmax(210px,1.4fr) auto auto;
            align-items: center;
            gap: 18px;
            margin: 0 0 19px;
            padding: 15px 17px;
            border: 1px solid var(--forest-line);
            border-radius: 19px;
            color: #fff;
            background: rgba(13, 27, 21, .95);
            box-shadow: 0 16px 42px rgba(9,26,20,.22), inset 0 1px 0 var(--forest-edge);
            backdrop-filter: blur(16px);
        }

            .selection-dock.is-checkout-open {
                position: relative;
                top: auto;
            }

        .selection-dock__count strong {
            display: block;
            font-size: 15px;
            line-height: 1.25;
        }

        .selection-dock__count span {
            color: rgba(255,255,255,.58);
            font-size: 10px;
        }

        .selection-progress {
            height: 7px;
            overflow: hidden;
            border-radius: var(--pill);
            background: rgba(255,255,255,.12);
        }

            .selection-progress span {
                display: block;
                width: 0;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(90deg, var(--lime), #b8e861);
                transition: width .3s var(--ease);
            }

        .selection-hint {
            margin: 6px 0 0;
            color: rgba(255,255,255,.62);
            font-size: 10px;
            line-height: 1.35;
        }

        .selection-dock__amount {
            min-width: 128px;
            text-align: right;
        }

            .selection-dock__amount span {
                display: block;
                color: rgba(255,255,255,.52);
                font-size: 9px;
                font-weight: 750;
                letter-spacing: .07em;
                text-transform: uppercase;
            }

            .selection-dock__amount strong {
                display: block;
                font-size: 18px;
                line-height: 1.18;
                letter-spacing: -.02em;
                font-variant-numeric: tabular-nums;
            }

        .promotion-original {
            display: block;
            color: var(--orange);
            font-variant-numeric: tabular-nums;
            font-weight: 750;
            text-decoration-line: line-through;
            text-decoration-thickness: 2px;
            text-decoration-color: currentColor;
        }

            .promotion-original[hidden], .promotion-label[hidden] {
                display: none !important;
            }

        .selection-dock__amount .promotion-original {
            margin: 2px 0 1px;
            color: #ff836d;
            font-size: 12px;
            line-height: 1.2;
        }

        .promotion-label {
            display: block;
            margin-top: 3px;
            color: var(--lime-deep);
            font-size: 9px;
            font-style: normal;
            font-weight: 800;
            letter-spacing: .045em;
            text-transform: uppercase;
        }

        .selection-dock__amount .promotion-label {
            color: #b8e861;
        }

        .selection-actions {
            display: flex;
            gap: 8px;
        }

            .selection-actions button {
                min-height: 44px;
                border-radius: var(--pill);
                font-size: 11px;
                font-weight: 780;
                white-space: nowrap;
                cursor: pointer;
            }

        .selection-reset, .selection-all {
            padding: 0 13px;
            border: 1px solid rgba(255,255,255,.2);
            color: #fff;
            background: transparent;
        }

        .selection-checkout {
            padding: 0 17px;
            border: 0;
            color: var(--ink);
            background: #b8e861;
        }

            .selection-checkout:disabled, .selection-reset:disabled, .selection-all:disabled {
                opacity: .42;
                cursor: not-allowed;
            }

        .selection-codes {
            grid-column: 1 / -1;
            display: none;
            margin-top: -6px;
            color: rgba(255,255,255,.62);
            font-family: ui-monospace, Consolas, monospace;
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .selection-dock.has-selection .selection-codes {
            display: block;
        }

        .selection-step-label {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 24px 0 12px;
            color: var(--ink-2);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .065em;
            text-transform: uppercase;
        }

            .selection-step-label::before {
                content: "2";
                display: grid;
                place-items: center;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                color: #fff;
                background: var(--forest);
                font-size: 10px;
            }

        .lesson {
            grid-template-columns: 42px minmax(0, 1fr) 44px;
            align-items: start;
            padding-inline: 8px;
            border-radius: 13px;
            transition: background .2s, opacity .2s;
        }

            .lesson.is-selected {
                background: color-mix(in srgb, var(--level-color) 8%, white);
            }

            .lesson.is-locked:not(.is-selected) .lesson-choice {
                opacity: .53;
            }

        .lesson-choice {
            position: relative;
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            align-self: center;
            border-radius: 13px;
            cursor: pointer;
        }

            .lesson-choice input {
                position: absolute;
                z-index: 2;
                inset: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                opacity: 0;
                cursor: pointer;
            }

                .lesson-choice input:disabled {
                    cursor: not-allowed;
                }

        .lesson-choice__mark {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border: 1.5px solid #c5cec1;
            border-radius: 9px;
            color: transparent;
            background: #fff;
            font-size: 14px;
            font-weight: 800;
            transition: border-color .2s, background .2s, transform .2s;
        }

        .lesson-choice:hover .lesson-choice__mark {
            transform: scale(1.06);
            border-color: var(--level-color);
        }

        .lesson-choice input:checked + .lesson-choice__mark {
            color: #fff;
            border-color: var(--level-color);
            background: var(--level-color);
        }

        .lesson-choice input:focus-visible + .lesson-choice__mark {
            outline: 3px solid var(--blue);
            outline-offset: 3px;
        }

        .lesson-choice input:disabled + .lesson-choice__mark {
            cursor: not-allowed;
        }

        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0,0,0,0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        .payment-checkout {
            margin-top: 28px;
            scroll-margin-top: 94px;
            border: 1px solid #dfe5dc;
            border-radius: var(--radius-xl);
            background: #fff;
            box-shadow: var(--shadow-pop);
            overflow: clip;
        }

            .payment-checkout[hidden] {
                display: none !important;
            }

        .checkout-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            padding: 27px 31px;
            color: #fff;
            background: var(--forest-surface);
        }

        .checkout-head__step {
            display: block;
            margin-bottom: 5px;
            color: #b8e861;
            font-size: 10px;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: .065em;
            text-transform: uppercase;
        }

        .checkout-head h3 {
            margin: 0;
            font-size: clamp(23px, 3vw, 34px);
            line-height: 1.2;
            letter-spacing: -.03em;
        }

        .checkout-head p {
            max-width: 420px;
            margin: 0;
            color: var(--forest-mute);
            font-size: 11px;
            text-align: right;
        }

        .checkout-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 0;
        }

        .qr-panel {
            padding: 30px;
            border-right: 1px solid var(--line);
            background: var(--canvas);
            text-align: center;
        }

        .qr-button {
            width: min(100%, 340px);
            margin: 0 auto;
            padding: 8px;
            border: 1px solid #dce3d9;
            border-radius: 22px;
            background: #fff;
            cursor: zoom-in;
            box-shadow: 0 5px 18px rgba(28,38,30,.035);
        }

            .qr-button img {
                width: 100%;
                height: auto;
                border-radius: 15px;
            }

        .qr-panel__hint {
            max-width: 360px;
            margin: 14px auto 0;
            color: var(--muted);
            font-size: 11px;
        }

        .qr-warning {
            display: flex;
            gap: 9px;
            margin-top: 16px;
            padding: 12px 13px;
            border: 1px solid #efdbc8;
            border-radius: 13px;
            color: #79431d;
            background: #fff7ef;
            font-size: 10px;
            line-height: 1.5;
            text-align: left;
        }

            .qr-warning b {
                flex: 0 0 auto;
                display: grid;
                place-items: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                color: #fff;
                background: var(--orange);
            }

        .transfer-panel {
            padding: 30px;
        }

        .payment-amount {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 23px;
            padding: 19px 20px;
            border-radius: 17px;
            background: var(--lime-soft);
        }

            .payment-amount.has-promotion {
                background: linear-gradient(135deg, #fff2eb 0%, var(--lime-soft) 84%);
                box-shadow: inset 3px 0 var(--orange);
            }

            .payment-amount span {
                display: block;
                margin-bottom: 6px;
                color: #52634b;
                font-size: 10px;
                font-weight: 750;
                text-transform: uppercase;
                letter-spacing: .06em;
            }

            .payment-amount strong {
                color: var(--ink);
                font-size: clamp(27px, 4vw, 39px);
                line-height: 1.05;
                letter-spacing: -.032em;
                font-variant-numeric: tabular-nums;
            }

            .payment-amount .promotion-original {
                margin-bottom: 4px;
                font-size: clamp(16px, 2vw, 20px);
                line-height: 1.2;
            }

            .payment-amount .promotion-label {
                margin-top: 7px;
                color: var(--orange-deep);
                font-size: 9px;
            }

        .bank-details {
            display: grid;
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 17px;
            overflow: hidden;
        }

        .bank-row {
            display: grid;
            grid-template-columns: 112px minmax(0,1fr) auto;
            align-items: center;
            gap: 14px;
            min-height: 63px;
            padding: 10px 13px 10px 17px;
            border-bottom: 1px solid var(--line);
        }

            .bank-row:last-child {
                border-bottom: 0;
            }

        .bank-row__label {
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
        }

        .bank-row__value {
            min-width: 0;
            color: var(--ink);
            font-size: 12px;
            font-weight: 750;
            overflow-wrap: anywhere;
        }

        .copy-mini {
            min-width: 76px;
            min-height: 44px;
            padding: 0 11px;
            border: 1px solid var(--line-dark);
            border-radius: var(--pill);
            background: #fff;
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
        }

            .copy-mini:hover {
                border-color: var(--ink);
            }

        .transfer-memo {
            margin-top: 18px;
            padding: 18px;
            border: 1px solid #d8e5ce;
            border-radius: 17px;
            background: #f8fbf5;
        }

        .transfer-memo__label {
            display: block;
            margin-bottom: 7px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .transfer-memo__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .transfer-memo code {
            color: var(--ink);
            font-family: ui-monospace, Consolas, monospace;
            font-size: 13px;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .copy-feedback {
            min-height: 18px;
            margin: 8px 0 0;
            color: var(--lime-deep);
            font-size: 10px;
            font-weight: 700;
        }

            .copy-feedback.is-error {
                color: #a93209;
            }

        .checkout-lower {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            padding: 0 30px 30px;
        }

        .selected-lessons, .registration-summary {
            min-width: 0;
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
        }

            .selected-lessons h4, .registration-summary h4 {
                margin: 0 0 14px;
                font-size: 15px;
                letter-spacing: -.02em;
            }

            .selected-lessons ol {
                max-height: 275px;
                margin: 0;
                padding: 0;
                list-style: none;
                overflow: auto;
            }

            .selected-lessons li {
                padding: 9px 0;
                border-bottom: 1px solid var(--line);
                color: var(--muted);
                font-size: 11px;
                line-height: 1.5;
            }

                .selected-lessons li:last-child {
                    border-bottom: 0;
                }

                .selected-lessons li strong {
                    color: var(--ink);
                }

        .registration-summary {
            background: var(--canvas);
        }

            .registration-summary pre {
                max-height: 240px;
                margin: 0 0 14px;
                padding: 14px;
                border: 1px solid var(--line);
                border-radius: 13px;
                color: var(--ink-2);
                background: #fff;
                font: 11px/1.55 var(--font);
                white-space: pre-wrap;
                overflow: auto;
            }

        .checkout-next {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 22px;
            margin: 0 30px 30px;
            padding: 22px;
            border-radius: 18px;
            color: #fff;
            background: var(--forest-surface);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .checkout-next h4 {
                margin: 0 0 7px;
                font-size: 16px;
            }

            .checkout-next ol {
                margin: 0;
                padding-left: 19px;
                color: var(--forest-mute);
                font-size: 11px;
            }

        .checkout-next__actions {
            display: grid;
            min-width: 255px;
            gap: 8px;
        }

            .checkout-next__actions .copy-feedback {
                margin: 0;
                color: #b8e861;
                text-align: center;
            }

        .qr-dialog {
            width: min(calc(100% - 30px), 620px);
            max-height: calc(100dvh - 30px);
            padding: 0;
            border: 0;
            border-radius: 25px;
            background: #fff;
            box-shadow: 0 30px 100px rgba(0,0,0,.32);
            overflow: auto;
        }

            .qr-dialog::backdrop {
                background: rgba(7, 16, 12, .74);
                backdrop-filter: blur(7px);
            }

        .qr-dialog__head {
            position: sticky;
            z-index: 2;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 14px 16px 14px 21px;
            border-bottom: 1px solid var(--line);
            background: rgba(255,255,255,.94);
            backdrop-filter: blur(12px);
        }

            .qr-dialog__head strong {
                font-size: 13px;
            }

        .qr-dialog__close {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            background: var(--canvas);
            font-size: 22px;
            cursor: pointer;
        }

        .qr-dialog__details {
            display: grid;
            grid-template-columns: 1fr 1.45fr;
            gap: 10px;
            padding: 18px 20px 14px;
            background: #f7faf4;
        }

        .qr-dialog__field {
            min-width: 0;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: 13px;
            background: #fff;
        }

            .qr-dialog__field span {
                display: block;
                margin-bottom: 5px;
                color: var(--muted);
                font-size: 9px;
                font-weight: 800;
                letter-spacing: .06em;
                text-transform: uppercase;
            }

            .qr-dialog__field strong, .qr-dialog__field code {
                display: block;
                margin-bottom: 9px;
                color: var(--ink);
                font-size: 13px;
                font-weight: 800;
                overflow-wrap: anywhere;
            }

            .qr-dialog__field code {
                font-family: ui-monospace, Consolas, monospace;
            }

            .qr-dialog__field .copy-mini {
                width: 100%;
            }

        .qr-dialog__status {
            grid-column: 1 / -1;
            min-height: 16px;
            margin: -2px 0 0 !important;
            padding: 0 !important;
            color: var(--lime-deep) !important;
            font-size: 10px !important;
            font-weight: 700;
        }

            .qr-dialog__status.is-error {
                color: #a93209 !important;
            }

        .qr-dialog img {
            width: 100%;
            height: auto;
        }

        .qr-dialog p {
            margin: 0;
            padding: 0 24px 24px;
            color: var(--muted);
            font-size: 11px;
            text-align: center;
        }

        .js .mobile-cta.selection-context {
            opacity: 0;
            pointer-events: none;
            transform: translateY(calc(100% + 18px));
        }

        .curriculum-intro {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 30px;
            margin-bottom: 42px;
        }

            .curriculum-intro .section__head {
                margin: 0;
            }

        .curriculum-tools {
            display: flex;
            align-items: center;
            gap: 14px;
        }

            .curriculum-tools span {
                color: var(--muted);
                font-size: 12px;
                font-weight: 650;
            }

        .text-button {
            min-height: 44px;
            padding: 0 15px;
            border: 1px solid var(--line-dark);
            border-radius: var(--pill);
            background: #fff;
            font-size: 12px;
            font-weight: 750;
            cursor: pointer;
            transition: border-color .2s, transform .2s;
        }

            .text-button:hover {
                border-color: var(--ink);
                transform: translateY(-1px);
            }

        .level-rail {
            display: grid;
            grid-template-columns: 7fr 7fr 9fr 3fr 2fr;
            gap: 5px;
            margin-bottom: 18px;
        }

            .level-rail span {
                height: 8px;
                border-radius: var(--pill);
                background: var(--level);
            }

                .level-rail span:nth-child(1) {
                    --level: var(--lime-deep);
                }

                .level-rail span:nth-child(2) {
                    --level: var(--mint);
                }

                .level-rail span:nth-child(3) {
                    --level: var(--blue);
                }

                .level-rail span:nth-child(4) {
                    --level: var(--violet);
                }

                .level-rail span:nth-child(5) {
                    --level: var(--orange);
                }

        .levels {
            display: grid;
            gap: 12px;
        }

        .level {
            --level-color: var(--lime-deep);
            border: 1px solid var(--line);
            border-radius: 24px;
            background: #fff;
            overflow: clip;
            transition: box-shadow .25s, border-color .25s;
        }

            .level:nth-child(2) {
                --level-color: var(--mint);
            }

            .level:nth-child(3) {
                --level-color: var(--blue);
            }

            .level:nth-child(4) {
                --level-color: var(--violet);
            }

            .level:nth-child(5) {
                --level-color: var(--orange);
            }

            .level[open] {
                border-color: color-mix(in srgb, var(--level-color) 28%, var(--line));
                box-shadow: 0 16px 42px rgba(30,40,32,.055);
            }

            .level summary {
                display: grid;
                grid-template-columns: 58px 1fr auto 30px;
                align-items: center;
                gap: 18px;
                min-height: 104px;
                padding: 18px 25px 18px 18px;
                list-style: none;
                cursor: pointer;
            }

                .level summary::-webkit-details-marker {
                    display: none;
                }

        .level__number {
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            border-radius: 18px;
            color: #fff;
            background: var(--level-color);
            font-size: 19px;
            font-weight: 800;
        }

        .level__title strong {
            display: block;
            margin-bottom: 4px;
            font-size: clamp(17px, 2vw, 22px);
            line-height: 1.3;
            letter-spacing: -.02em;
        }

        .level__title span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .level__meta {
            text-align: right;
        }

            .level__meta strong {
                display: block;
                font-size: 22px;
                line-height: 1;
            }

            .level__meta span {
                color: var(--muted-2);
                font-size: 10px;
                font-weight: 700;
            }

        .level__chevron {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--canvas);
            transition: transform .25s;
        }

            .level__chevron svg {
                width: 15px;
                height: 15px;
            }

        .level[open] .level__chevron {
            transform: rotate(180deg);
        }

        .level__body {
            padding: 0 28px 30px 94px;
        }

        .level__summary {
            display: grid;
            grid-template-columns: 1.12fr .88fr;
            gap: 24px;
            padding: 24px 0 28px;
            border-top: 1px solid var(--line);
        }

            .level__summary p {
                margin: 0;
                color: var(--muted);
                font-size: 14px;
            }

        .level__outcome {
            align-self: start;
            padding: 17px 19px;
            border-left: 3px solid var(--level-color);
            border-radius: 0 13px 13px 0;
            background: var(--canvas);
        }

            .level__outcome small {
                display: block;
                margin-bottom: 5px;
                color: var(--muted-2);
                font-size: 9px;
                font-weight: 800;
                letter-spacing: .09em;
                text-transform: uppercase;
            }

            .level__outcome strong {
                font-size: 13px;
                line-height: 1.45;
            }

        .lesson-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 18px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .lesson {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) 44px;
            gap: 12px;
            min-height: 76px;
            padding: 12px 0;
            border-top: 1px solid var(--line);
        }

        .lesson__n {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            color: var(--level-color);
            background: color-mix(in srgb, var(--level-color) 9%, white);
            font-size: 10px;
            font-weight: 800;
        }

        .lesson strong {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            line-height: 1.45;
        }

        .lesson time {
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 700;
        }

        .smcc-note {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 20px;
            padding: 14px 17px;
            border: 1px solid #e3dff5;
            border-radius: 15px;
            color: #554c72;
            background: #f7f5fc;
            font-size: 12px;
        }

            .smcc-note img {
                width: 96px;
                height: auto;
                object-fit: contain;
            }

        .curriculum-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            margin-top: 24px;
            padding: 23px 25px;
            border: 1px solid #dfe9d8;
            border-radius: var(--radius);
            background: linear-gradient(120deg, var(--lime-soft), #fff 70%);
        }

            .curriculum-cta p {
                margin: 0;
                color: var(--muted);
                font-size: 13px;
            }

            .curriculum-cta strong {
                color: var(--ink);
            }

        .mentor-wrap {
            display: grid;
            grid-template-columns: .78fr 1.22fr;
            align-items: center;
            gap: clamp(48px, 8vw, 100px);
        }

        .mentor-photo {
            position: relative;
            max-width: 470px;
            margin-inline: auto;
        }

            .mentor-photo::before {
                content: "";
                position: absolute;
                inset: 10% -12% -7% 10%;
                z-index: 0;
                border-radius: 46% 54% 42% 58% / 56% 45% 55% 44%;
                background: linear-gradient(145deg, var(--lime-soft), #dceaf8);
                transform: rotate(-5deg);
            }

            .mentor-photo img {
                position: relative;
                z-index: 1;
                width: 100%;
                aspect-ratio: 1;
                border-radius: 46% 54% 48% 52% / 50% 45% 55% 50%;
                object-fit: cover;
                box-shadow: var(--shadow-pop);
                filter: saturate(.92) contrast(1.02);
            }

        .mentor-badge {
            position: absolute;
            z-index: 2;
            right: -4%;
            bottom: 4%;
            max-width: 190px;
            padding: 14px 17px;
            border: 1px solid rgba(255,255,255,.9);
            border-radius: 17px;
            background: rgba(255,255,255,.9);
            box-shadow: var(--shadow);
            backdrop-filter: blur(12px);
        }

            .mentor-badge strong {
                display: block;
                font-size: 22px;
                letter-spacing: -.024em;
            }

            .mentor-badge span {
                color: var(--muted);
                font-size: 10px;
                font-weight: 700;
            }

        .mentor-copy h2 {
            margin-bottom: 18px;
            font-size: clamp(38px, 5vw, 62px);
            line-height: 1.12;
            letter-spacing: -.036em;
        }

        .mentor-copy h3 {
            margin-bottom: 6px;
            font-size: 20px;
            letter-spacing: -.025em;
        }

        .mentor-role {
            margin-bottom: 26px;
            color: var(--lime-deep);
            font-size: 13px;
            font-weight: 750;
        }

        .mentor-copy p {
            color: var(--muted);
            font-size: 16px;
        }

        .mentor-quote {
            margin: 28px 0 0;
            padding: 24px 25px;
            border-left: 4px solid var(--lime);
            border-radius: 0 var(--radius) var(--radius) 0;
            color: var(--ink-2);
            background: #fff;
            box-shadow: var(--shadow);
            font-size: 17px;
            font-weight: 580;
        }

        .barrier {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 60px;
            align-items: center;
            padding: 46px;
            border: 1px solid #dfe9d8;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, #f3fae8, #fff 68%);
        }

            .barrier h2 {
                margin: 0;
                font-size: clamp(30px, 4vw, 47px);
                line-height: 1.17;
                letter-spacing: -.032em;
            }

        .barrier-list {
            display: grid;
            gap: 12px;
        }

        .barrier-item {
            display: grid;
            grid-template-columns: 34px 1fr;
            align-items: start;
            gap: 13px;
            color: var(--muted);
            font-size: 14px;
        }

            .barrier-item b {
                display: grid;
                place-items: center;
                width: 34px;
                height: 34px;
                border-radius: 11px;
                color: #416d0b;
                background: #dff0bd;
            }

            .barrier-item svg {
                width: 16px;
                height: 16px;
            }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-items: stretch;
            gap: 18px;
        }

        .price-card {
            display: flex;
            flex-direction: column;
            min-height: 450px;
            padding: 31px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: #fff;
        }

        .price-card--featured {
            position: relative;
            color: #fff;
            border-color: var(--forest-lift);
            background: var(--forest-surface);
            box-shadow: var(--shadow-pop), inset 0 1px 0 var(--forest-edge);
            transform: translateY(-10px);
        }

        .price-card__badge {
            align-self: flex-start;
            min-height: 29px;
            padding: 6px 10px;
            border-radius: var(--pill);
            color: #426e0b;
            background: var(--lime-soft);
            font-size: 10px;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: .065em;
            text-transform: uppercase;
        }

        .price-card h3 {
            margin: 22px 0 8px;
            font-size: 22px;
            letter-spacing: -.024em;
        }

        .price-card__desc {
            min-height: 50px;
            margin-bottom: 24px;
            color: var(--muted);
            font-size: 13px;
        }

        .price-card--featured .price-card__desc {
            color: var(--forest-mute);
        }

        .price {
            margin-bottom: 27px;
            font-size: clamp(36px, 4vw, 49px);
            font-weight: 720;
            line-height: 1.05;
            letter-spacing: -.036em;
            font-variant-numeric: tabular-nums;
        }

            .price small {
                font-size: 14px;
                font-weight: 650;
                letter-spacing: -.01em;
            }

        .price-card ul {
            flex: 1;
            margin: 0 0 27px;
            padding: 0;
            list-style: none;
        }

        .price-card li {
            position: relative;
            padding: 10px 0 10px 25px;
            border-bottom: 1px solid var(--line);
            color: var(--muted);
            font-size: 13px;
        }

            .price-card li::before {
                content: "✓";
                position: absolute;
                left: 0;
                color: var(--lime-deep);
                font-weight: 800;
            }

        .price-card--featured li {
            color: rgba(234, 249, 242, .74);
            border-color: var(--forest-line);
        }

            .price-card--featured li::before {
                color: #b8e861;
            }

        .price-card .btn {
            margin-top: auto;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: clamp(45px, 8vw, 100px);
            align-items: start;
        }

            .faq-layout .section__head {
                position: sticky;
                top: 110px;
                margin: 0;
            }

        .faq-list {
            display: grid;
            gap: 10px;
        }

        .faq {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            overflow: clip;
        }

            .faq summary {
                display: grid;
                grid-template-columns: 1fr 32px;
                align-items: center;
                gap: 20px;
                min-height: 78px;
                padding: 16px 18px 16px 22px;
                list-style: none;
                font-size: 14px;
                font-weight: 750;
                cursor: pointer;
            }

                .faq summary::-webkit-details-marker {
                    display: none;
                }

                .faq summary span:last-child {
                    display: grid;
                    place-items: center;
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background: var(--canvas);
                    transition: transform .25s;
                }

            .faq[open] summary span:last-child {
                transform: rotate(45deg);
            }

        .faq__answer {
            padding: 0 60px 22px 22px;
            color: var(--muted);
            font-size: 14px;
        }

            .faq__answer p {
                margin: 0;
            }

        .final-cta {
            position: relative;
            overflow: hidden;
            padding: 90px 0;
            color: #fff;
            background: var(--forest-surface);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .final-cta::before, .final-cta::after {
                content: "";
                position: absolute;
                border-radius: 50%;
                filter: blur(90px);
            }

            .final-cta::before {
                width: 500px;
                height: 500px;
                top: -280px;
                right: -80px;
                background: rgba(154,205,50,.34);
            }

            .final-cta::after {
                width: 360px;
                height: 360px;
                bottom: -230px;
                left: 7%;
                background: rgba(0,113,227,.28);
            }

        .final-cta__inner {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 50px;
        }
        /* .final-cta không mang class .section--dark nên phải tự đổi màu nhấn sang lime sáng. */
        .final-cta .accent {
            color: #b8e861;
        }

        .final-cta h2 {
            max-width: 800px;
            margin-bottom: 16px;
            font-size: clamp(38px, 5.8vw, 70px);
            line-height: 1.08;
            letter-spacing: -.04em;
        }

        .final-cta p {
            max-width: 720px;
            margin: 0;
            color: var(--forest-mute);
            font-size: 16px;
        }

        .final-actions {
            display: grid;
            min-width: 265px;
            gap: 10px;
        }

        .copy-keyword {
            border: 0;
        }

        .copy-status {
            min-height: 16px;
            margin: 0;
            color: var(--forest-faint);
            font-size: 10px;
            text-align: center;
        }

        .footer {
            padding: 34px 0 100px;
            border-top: 1px solid var(--line);
            background: #fff;
        }

        .footer__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .footer .brand {
            font-size: 13px;
        }

        .footer p {
            margin: 0;
            color: var(--muted-2);
            font-size: 11px;
            text-align: right;
        }

        .footer a {
            color: var(--ink);
            text-decoration: none;
        }

        .footer p a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
        }

        .mobile-cta {
            display: none;
        }

        .reveal, .js .reveal {
            opacity: 1;
            transform: none;
        }

            .js .reveal.is-visible {
                animation: reveal-in .7s var(--ease) both;
            }

        .delay-1 {
            animation-delay: .08s !important;
        }

        .delay-2 {
            animation-delay: .16s !important;
        }

        @keyframes reveal-in {
            from {
                opacity: .58;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Ba mục tiêu chính — nền kẻ ô mảnh như bản vẽ thiết kế khóa học. */
        .goals {
            background: linear-gradient(180deg, var(--canvas) 0%, #fdfefb 56%, #fff 100%);
        }

            .goals::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: .62;
                background-image: linear-gradient(rgba(14,15,17,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(14,15,17,.04) 1px, transparent 1px);
                background-size: 46px 46px;
                -webkit-mask-image: radial-gradient(125% 72% at 50% 0%, #000 24%, transparent 76%);
                mask-image: radial-gradient(125% 72% at 50% 0%, #000 24%, transparent 76%);
            }

            .goals > .container {
                position: relative;
                z-index: 1;
            }

            .goals .section__head {
                max-width: 840px;
            }

        .goals-axis {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 9px;
            margin-top: 27px;
        }

            .goals-axis span {
                display: inline-flex;
                align-items: center;
                gap: 9px;
                padding: 8px 15px 8px 9px;
                border: 1px solid var(--line);
                border-radius: var(--pill);
                background: rgba(255,255,255,.82);
                font-size: 12px;
                font-weight: 750;
            }

            .goals-axis b {
                display: grid;
                place-items: center;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                color: #fff;
                background: var(--axis);
                font-family: var(--mono);
                font-size: 10px;
                font-weight: 700;
            }

            .goals-axis span:nth-of-type(1) {
                --axis: var(--lime-deep);
            }

            .goals-axis span:nth-of-type(2) {
                --axis: var(--orange);
            }

            .goals-axis span:nth-of-type(3) {
                --axis: var(--forest);
            }

            .goals-axis i {
                color: #b4bdb0;
                font-size: 13px;
                font-style: normal;
            }

        .goals-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1.14fr;
            align-items: stretch;
            gap: 18px;
        }

        .goal {
            --goal-ink: var(--lime-deep);
            display: flex;
            flex-direction: column;
            padding: 31px 30px 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: #fff;
            transition: transform .3s var(--ease), box-shadow .3s;
        }

            .goal:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow);
            }

            .goal:nth-child(2) {
                --goal-ink: var(--orange);
            }

        .goal--dark {
            --goal-ink: #b8e861;
            color: #fff;
            border-color: var(--forest-lift);
            background: var(--forest-surface);
            box-shadow: var(--shadow-pop), inset 0 1px 0 var(--forest-edge);
        }

        .goal__step {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 23px;
            color: var(--goal-ink);
            font-family: var(--mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

            .goal__step::after {
                content: "";
                flex: 1;
                height: 1px;
                background: currentColor;
                opacity: .3;
            }

        .goal h3 {
            margin: 0 0 12px;
            font-size: clamp(21px, 2.1vw, 26px);
            line-height: 1.26;
            letter-spacing: -.028em;
        }

        .goal p {
            margin: 0 0 34px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.66;
        }

        .goal--dark p {
            color: var(--forest-mute);
        }
        /* min-height cố định để đường kẻ của cả ba tấm thẳng hàng dù hiện vật cao thấp khác nhau. */
        .goal__artifact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 71px;
            margin-top: auto;
            padding-top: 19px;
            border-top: 1px solid var(--line);
        }

        .goal--dark .goal__artifact {
            border-top-color: var(--forest-line);
        }

        .goal__artifact small {
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.45;
        }

        .goal--dark .goal__artifact small {
            color: var(--forest-faint);
        }

        .glyph {
            flex: 0 0 auto;
            color: var(--goal-ink);
        }

        .glyph--rhythm {
            width: 100px;
            height: 28px;
            background: repeating-linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 9px);
            -webkit-mask-image: linear-gradient(90deg, #000 0 40%, rgba(0,0,0,.2) 78%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 40%, rgba(0,0,0,.2) 78%, transparent 100%);
        }

        .glyph--loop {
            width: 104px;
            height: 34px;
        }

        .glyph--lessons {
            width: 96px;
            height: 52px;
            background-image: radial-gradient(circle at center, currentColor 2.1px, transparent 2.3px);
            background-size: 13.7px 13px;
        }

        /* Mở lớp: ba chặng từ người học thành người dạy. */
        .section--dark.relay::before {
            background: radial-gradient(circle at 79% 21%, rgba(154, 205, 50, .25), transparent 26%), radial-gradient(circle at 17% 71%, rgba(0, 113, 227, .17), transparent 28%);
        }

        .relay-rail {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .relay-node {
            position: relative;
            padding: 26px 24px 24px;
            border: 1px solid var(--forest-line);
            border-radius: var(--radius);
            background: var(--forest-fill);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .relay-node:last-child {
                border-color: rgba(184,232,97,.34);
                background: rgba(184,232,97,.09);
            }

            .relay-node:not(:last-child)::after {
                content: "→";
                position: absolute;
                top: 34px;
                right: -20px;
                width: 20px;
                color: rgba(184,232,97,.72);
                font-size: 15px;
                line-height: 1;
                text-align: center;
            }

        .relay-node__n {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            margin-bottom: 20px;
            border-radius: 12px;
            color: var(--ink);
            background: #b8e861;
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 700;
        }

        .relay-node h3 {
            margin: 0 0 8px;
            font-size: 18px;
            line-height: 1.32;
            letter-spacing: -.022em;
        }

        .relay-node p {
            margin: 0;
            color: var(--forest-mute);
            font-size: 13px;
            line-height: 1.6;
        }

        .relay-result {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            margin-top: 20px;
            padding: 23px 26px;
            border: 1px solid var(--forest-line);
            border-radius: var(--radius);
            background: var(--forest-fill);
            box-shadow: inset 0 1px 0 var(--forest-edge);
        }

            .relay-result p {
                max-width: 640px;
                margin: 0;
                color: rgba(236, 250, 243, .8);
                font-size: 15px;
                line-height: 1.62;
            }

                .relay-result p strong {
                    color: #fff;
                    font-weight: 750;
                }

            .relay-result .btn {
                flex: 0 0 auto;
            }

        .mentor-copy .mentor-cred {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: -13px 0 26px;
            padding: 8px 14px 8px 9px;
            border: 1px solid #dbe8cf;
            border-radius: var(--pill);
            color: #4a5a3d;
            background: rgba(255,255,255,.8);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.35;
            text-align: left;
        }

            .mentor-copy .mentor-cred b {
                flex: 0 0 auto;
                display: grid;
                place-items: center;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                color: #fff;
                background: var(--violet);
            }

            .mentor-copy .mentor-cred svg {
                width: 13px;
                height: 13px;
            }

        .final-cta .final-goals {
            margin-top: 18px;
            color: var(--forest-faint);
            font-size: 13px;
            line-height: 1.6;
        }

            .final-cta .final-goals b {
                color: rgba(236, 250, 243, .84);
                font-weight: 750;
            }

        @media (max-width: 1080px) {
            .desktop-nav {
                display: none;
            }

            .nav-shell {
                justify-content: space-between;
            }

                .nav-shell > .nav-cta {
                    margin-left: auto;
                    margin-right: 8px;
                }

            .menu-toggle {
                display: block;
            }

            .mobile-menu {
                display: grid;
                position: fixed;
                z-index: 89;
                top: 82px;
                left: 16px;
                right: 16px;
                max-height: calc(100dvh - 98px);
                padding: 18px;
                border: 1px solid var(--line);
                border-radius: 25px;
                background: rgba(255,255,255,.97);
                box-shadow: var(--shadow-pop);
                backdrop-filter: blur(18px);
                visibility: hidden;
                opacity: 0;
                transform: translateY(-12px) scale(.98);
                transition: opacity .2s, transform .2s, visibility .2s;
                overflow-y: auto;
            }

                .mobile-menu.open {
                    visibility: visible;
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }

                .mobile-menu a:not(.btn) {
                    min-height: 48px;
                    padding: 12px 10px;
                    border-bottom: 1px solid var(--line);
                    color: var(--ink-2);
                    text-decoration: none;
                    font-size: 14px;
                    font-weight: 680;
                }

                .mobile-menu .btn {
                    margin-top: 14px;
                }

            .hero {
                min-height: auto;
                padding-top: 145px;
            }

            .hero__grid {
                grid-template-columns: 1fr;
            }

            .hero__content {
                max-width: 800px;
                text-align: center;
                margin-inline: auto;
            }

            .hero__desc {
                margin-inline: auto;
            }

            .hero__actions, .hero__note {
                justify-content: center;
            }

            .hero__visual {
                width: min(100%, 650px);
                margin-inline: auto;
            }

            .float-tag {
                display: none;
            }

            .problem-grid {
                gap: 50px;
            }

            .mentor-wrap {
                grid-template-columns: .9fr 1.1fr;
                gap: 55px;
            }

            .goals-grid {
                grid-template-columns: 1fr 1fr;
            }

            .goal--dark {
                grid-column: 1 / -1;
            }

                .goal--dark .goal__artifact {
                    justify-content: flex-start;
                    gap: 26px;
                }
        }

        @media (min-width: 601px) and (max-width: 960px) {
            .selection-dock {
                grid-template-columns: minmax(145px,.8fr) minmax(200px,1.2fr) auto;
            }

            .selection-actions {
                grid-column: 1 / -1;
                justify-content: flex-end;
            }
        }

        @media (max-width: 820px) {
            .section {
                padding: 86px 0;
            }

            .fact-strip__inner {
                grid-template-columns: repeat(2, 1fr);
            }

            .fact:nth-child(3) {
                border-left: 0;
                border-top: 1px solid var(--line);
            }

            .fact:nth-child(4) {
                border-top: 1px solid var(--line);
            }

            .problem-grid, .mentor-wrap, .barrier, .faq-layout {
                grid-template-columns: 1fr;
            }

            .asset-card:nth-child(n) {
                grid-column: span 6;
            }

            .asset-card:last-child {
                grid-column: 4 / span 6;
            }

            .format-grid {
                grid-template-columns: 1fr;
            }

            .schedule-band {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .schedule-band__sep {
                transform: rotate(90deg);
            }

            .late-entry-note {
                grid-template-columns: 1fr;
            }

            .curriculum-intro {
                grid-template-columns: 1fr;
                align-items: start;
            }

            .curriculum-tools {
                justify-content: space-between;
            }

            .builder-head {
                grid-template-columns: 1fr;
                align-items: start;
            }

            .builder-head__rule {
                max-width: none;
            }

            .plan-options {
                grid-template-columns: 1fr;
            }

            .selection-dock {
                grid-template-columns: minmax(130px,.7fr) minmax(180px,1fr) auto;
            }

            .selection-actions {
                grid-column: 1 / -1;
                justify-content: flex-end;
            }

            .checkout-grid {
                grid-template-columns: 1fr;
            }

            .qr-panel {
                display: flex;
                flex-direction: column;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .transfer-panel {
                order: -1;
            }

            .qr-panel .qr-warning {
                order: -1;
                margin: 0 0 16px;
            }

            .checkout-lower {
                grid-template-columns: 1fr;
            }

            .checkout-next {
                grid-template-columns: 1fr;
            }

            .checkout-next__actions {
                width: min(100%, 420px);
                min-width: 0;
            }

            .level__summary {
                grid-template-columns: 1fr;
            }

            .lesson-list {
                grid-template-columns: 1fr;
            }

            .curriculum-cta {
                align-items: flex-start;
                flex-direction: column;
            }

            .mentor-photo {
                width: min(80%, 440px);
            }

            .mentor-copy {
                text-align: center;
            }

            .mentor-quote {
                text-align: left;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                max-width: 600px;
                margin-inline: auto;
            }

            .price-card {
                min-height: 0;
            }

            .price-card--featured {
                transform: none;
            }

            .faq-layout .section__head {
                position: static;
            }

            .final-cta__inner {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .final-cta h2, .final-cta p {
                margin-inline: auto;
            }

            .final-actions {
                width: min(100%, 390px);
                margin-inline: auto;
            }

            .relay-rail {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .relay-node:not(:last-child)::after {
                top: auto;
                right: auto;
                bottom: -22px;
                left: 24px;
                content: "↓";
            }
        }

        @media (max-width: 600px) {
            html {
                scroll-padding-top: 82px;
            }

            body {
                font-size: 15px;
            }

            .container {
                width: min(calc(100% - 28px), var(--max));
            }

            .site-header {
                top: 8px;
                width: calc(100% - 16px);
            }

            .nav-shell {
                min-height: 58px;
                padding-left: 11px;
            }

                .brand small, .nav-shell > .nav-cta {
                    display: none;
                }

            .brand img {
                width: 32px;
                height: 32px;
            }

            .section {
                padding: 72px 0;
            }

            .section__head {
                margin-bottom: 34px;
            }

            .section__title {
                font-size: clamp(33px, 11vw, 44px);
                line-height: 1.12;
                letter-spacing: -.032em;
            }

            .hero {
                padding: 123px 0 68px;
            }

                .hero h1 {
                    line-height: 1.04;
                    letter-spacing: -.04em;
                }

                    .hero h1 .small-line {
                        font-size: .42em;
                    }

            .hero__desc {
                font-size: 16px;
            }

            .hero__actions {
                display: grid;
            }

            .hero__actions .btn {
                width: 100%;
            }

            .lecture-library-link {
                grid-template-columns: auto minmax(0, 1fr) auto;
                width: 100%;
                margin-bottom: 21px;
                padding-right: 12px;
            }

            .lecture-library-link__copy strong {
                font-size: 13px;
            }

            .lecture-library-link__copy small {
                font-size: 10px;
            }

            .hero__note {
                display: grid;
                justify-content: start;
                width: fit-content;
                margin-inline: auto;
                text-align: left;
            }

            .late-entry-note {
                padding: 24px 20px;
            }

            .continuity-path {
                grid-template-columns: 1fr;
            }

            .continuity-path__node {
                min-height: 0;
            }

            .continuity-path__link {
                min-height: 34px;
            }

                .continuity-path__link::before,
                .continuity-path__link::after {
                    flex: 0 0 34px;
                }

            .journey-card {
                padding: 19px;
                border-radius: 28px;
                transform: none;
            }

            .journey-card__top {
                align-items: start;
            }

            .live-chip {
                padding: 7px 9px;
                font-size: 9px;
            }

            .day-grid {
                gap: 5px;
            }

            .day-dot {
                border-radius: 7px;
                font-size: 8px;
            }

            .stage-row {
                grid-template-columns: 28px 1fr auto;
                gap: 8px;
            }

            .stage-row__n {
                width: 28px;
                height: 28px;
            }

            .stage-row strong {
                font-size: 10px;
            }

            .stage-row span {
                font-size: 8px;
            }

            .stage-rail {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
            }

            .stage-row {
                grid-template-columns: 27px minmax(0, 1fr);
                min-height: 41px;
                padding: 6px;
            }

                .stage-row span {
                    display: none;
                }

                .stage-row:last-child {
                    grid-column: 1 / -1;
                }

            .float-tag {
                display: none;
            }

            .fact-strip {
                margin-top: 0;
                padding-top: 14px;
            }

            .fact {
                padding: 19px 18px;
            }

                .fact strong {
                    font-size: 19px;
                }

                .fact span {
                    font-size: 10px;
                }

            .problem-grid {
                gap: 38px;
            }

            .mastery-step {
                min-height: 62px;
            }

            .goals-axis {
                gap: 7px;
            }

                .goals-axis i {
                    display: none;
                }

            .goals-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .goal {
                padding: 26px 22px 21px;
            }

                .goal p {
                    margin-bottom: 26px;
                }

            .goal__artifact {
                min-height: 63px;
            }

            .goal--dark {
                grid-column: auto;
            }

                .goal--dark .goal__artifact {
                    justify-content: space-between;
                    gap: 18px;
                }

            .glyph--lessons {
                width: 82px;
                height: 44px;
                background-size: 11.7px 11px;
            }

            .relay-node {
                padding: 22px 20px 20px;
            }

                .relay-node:not(:last-child)::after {
                    left: 20px;
                }

            .relay-result {
                align-items: stretch;
                flex-direction: column;
                padding: 20px;
            }

                .relay-result .btn {
                    width: 100%;
                }

            .asset-grid {
                gap: 12px;
            }

            .asset-card:nth-child(n) {
                grid-column: span 12;
                min-height: 205px;
                padding: 24px;
            }

            .asset-icon {
                margin-bottom: 29px;
            }

            .phase {
                padding: 24px;
            }

            .schedule-band {
                padding: 24px 18px;
            }

            .curriculum-tools {
                align-items: flex-start;
                flex-direction: column;
            }

            .builder-head {
                padding: 24px 20px 19px;
            }

            .builder-shell {
                border-radius: 24px;
            }

            .builder-head__rule {
                display: none;
            }

            .plan-fieldset {
                padding: 0 20px 22px;
            }

            .plan-options {
                grid-template-columns: 1fr;
            }

            .plan-choice__card {
                min-height: 70px;
            }

            .plan-choice__copy span, .pricing-gift-note, .selection-hint, .level__title span {
                font-size: 11px !important;
            }

            .selection-dock {
                top: 75px;
                grid-template-columns: 1fr auto;
                gap: 10px 14px;
                padding: 13px;
                border-radius: 17px;
            }

            .selection-dock__count {
                min-width: 0;
            }

            .selection-dock__amount {
                grid-column: 2;
                grid-row: 1;
                min-width: 112px;
                align-self: start;
            }

                .selection-dock__amount strong {
                    font-size: 16px;
                }

            .selection-progress-wrap {
                grid-column: 1 / -1;
            }

            .selection-actions {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: auto auto minmax(0, 1fr);
            }

                .selection-actions button {
                    width: 100%;
                }

            .selection-checkout {
                grid-column: auto;
            }

            .selection-codes {
                display: none !important;
            }

            .level-rail {
                gap: 3px;
            }

            .level summary {
                grid-template-columns: 46px 1fr 27px;
                gap: 12px;
                min-height: 90px;
                padding: 14px;
            }

            .level__number {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                font-size: 15px;
            }

            .level__title strong {
                font-size: 15px;
            }

            .level__title span {
                font-size: 10px;
            }

            .level__meta {
                display: none;
            }

            .level__body {
                padding: 0 17px 20px;
            }

            .level__summary {
                padding: 18px 0 20px;
            }

            .lesson {
                min-height: 69px;
                grid-template-columns: 37px minmax(0, 1fr) 42px;
                gap: 8px;
                padding-inline: 4px;
            }

            .lesson__n {
                width: 35px;
                height: 35px;
            }

            .lesson strong {
                font-size: 12px;
            }

            .lesson-choice {
                width: 42px;
                height: 42px;
            }

            .checkout-head {
                align-items: flex-start;
                flex-direction: column;
                padding: 23px 20px;
            }

            .payment-checkout {
                border-radius: 28px;
            }

            .checkout-head p {
                text-align: left;
            }

            .qr-panel, .transfer-panel {
                padding: 20px;
            }

            .payment-amount {
                align-items: flex-start;
                flex-direction: column;
            }

            .bank-row {
                grid-template-columns: minmax(0,1fr) auto;
                gap: 5px 10px;
                padding: 12px;
            }

            .bank-row__label {
                grid-column: 1 / -1;
            }

            .bank-row__value {
                font-size: 11px;
            }

            .transfer-memo__row {
                align-items: flex-start;
                flex-direction: column;
            }

                .transfer-memo__row .copy-mini {
                    width: 100%;
                }

            .checkout-lower {
                padding: 0 20px 20px;
            }

            .selected-lessons, .registration-summary {
                padding: 18px;
            }

            .checkout-next {
                margin: 0 20px 20px;
                padding: 19px;
            }

            .checkout-next__actions {
                width: 100%;
            }

            .qr-dialog__details {
                grid-template-columns: 1fr;
            }

            .qr-dialog__status {
                grid-column: 1;
            }

            .smcc-note {
                align-items: flex-start;
                flex-direction: column;
            }

            .mentor-photo {
                width: 88%;
            }

                .mentor-photo::before {
                    inset: 8% -3% -5% 8%;
                }

            .mentor-badge {
                right: -2%;
            }

            .barrier {
                gap: 32px;
                padding: 29px 23px;
            }

            .price-card {
                padding: 26px;
            }

            .final-cta h2 {
                line-height: 1.1;
                letter-spacing: -.034em;
            }

            .footer {
                padding-bottom: 108px;
            }

            .footer__inner {
                align-items: flex-start;
                flex-direction: column;
            }

            .footer p {
                text-align: left;
            }

            .mobile-cta {
                display: flex;
                position: fixed;
                z-index: 80;
                right: max(10px, env(safe-area-inset-right));
                bottom: max(10px, env(safe-area-inset-bottom));
                left: max(10px, env(safe-area-inset-left));
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                min-height: 64px;
                padding: 8px 8px 8px 16px;
                border: 1px solid var(--forest-line);
                border-radius: 21px;
                color: #fff;
                background: rgba(13, 27, 21, .95);
                box-shadow: 0 15px 40px rgba(6, 18, 13, .3), inset 0 1px 0 var(--forest-edge);
                backdrop-filter: blur(14px);
                opacity: 1;
            }

            .js .mobile-cta {
                opacity: 0;
                pointer-events: none;
                transform: translateY(calc(100% + 18px));
                transition: opacity .28s var(--ease), transform .35s var(--ease);
            }

                .js .mobile-cta.is-visible {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(0);
                }

                    .js .mobile-cta.is-visible.selection-context {
                        opacity: 0;
                        pointer-events: none;
                        transform: translateY(calc(100% + 18px));
                    }

            .mobile-cta span {
                font-size: 10px;
                line-height: 1.35;
            }

            .mobile-cta strong {
                display: block;
                font-size: 12px;
            }

            .mobile-cta a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 125px;
                min-height: 46px;
                padding: 0 14px;
                border-radius: 15px;
                color: #fff;
                background: linear-gradient(135deg, var(--orange), var(--orange-deep));
                text-decoration: none;
                font-size: 11px;
                font-weight: 800;
            }
        }

        @media (max-width: 400px) {
            .stage-rail {
                grid-template-columns: 1fr;
            }

            .stage-row:last-child {
                grid-column: auto;
            }

            .selection-actions {
                grid-template-columns: 1fr 1fr;
            }

            .selection-checkout {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 360px) {
            .hero h1 {
                font-size: 50px;
            }

            .journey-card h2 {
                font-size: 18px;
            }

            .journey-card__kicker {
                font-size: 9px;
            }

            .fact-strip__inner {
                grid-template-columns: 1fr;
            }

            .fact + .fact {
                border-left: 0;
                border-top: 1px solid var(--line);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }

            .js .reveal {
                opacity: 1;
                transform: none;
                animation: none !important;
            }
        }