:root {
    --ink: #1f2a2a;
    --ink-soft: #3f4f4e;
    --muted: #71807d;
    --line: #dfe8e4;
    --line-strong: #cfdcd7;
    --paper: #fbfcfa;
    --paper-soft: #f3f7f4;
    --surface: #ffffff;
    --green: #2e6b58;
    --green-dark: #245546;
    --green-soft: #e8f2ed;
    --blue-soft: #edf4f7;
    --warm-soft: #f7f2e9;
    --shadow: 0 18px 55px rgba(34, 59, 50, .08);
    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 32px;
    --shell: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

button,
input {
    font: inherit;
}

.site-shell {
    width: min(var(--shell), calc(100% - 44px));
    margin-inline: auto;
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(251, 252, 250, .91);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(211, 223, 218, .78);
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex: 0 0 auto;
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e1f0e8, #eef5f1);
    color: var(--green-dark);
    border: 1px solid #d6e6de;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
}

.brand-mark-small {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.brand-copy strong,
.brand-copy small {
    display: block;
}

.brand-copy strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.brand-copy small {
    margin-top: 3px;
    color: #84918e;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
}

.public-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    color: #596765;
    font-size: 13px;
}

.public-nav a {
    text-decoration: none;
    font-weight: 500;
}

.public-nav a:hover {
    color: var(--green-dark);
}

.nav-future {
    color: #9aa5a2;
    cursor: default;
}

.public-main {
    min-height: 70vh;
}

.eyebrow {
    margin: 0 0 13px;
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 16%, rgba(210, 235, 221, .8), transparent 30rem),
        radial-gradient(circle at 8% 80%, rgba(230, 240, 244, .85), transparent 28rem),
        var(--paper);
}

.hero-grid {
    min-height: 720px;
    padding-block: 78px 92px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: 72px;
}

.hero-copy h1,
.learn-hero-copy h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(48px, 6.2vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 500;
}

.hero-lead {
    max-width: 680px;
    margin: 28px 0 0;
    color: var(--ink-soft);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.65;
}

.hero-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
}

.button-primary:hover {
    background: var(--green-dark);
}

.button-quiet {
    background: rgba(255,255,255,.75);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
}

.button-quiet:hover {
    background: #fff;
    border-color: #bfcfc8;
}

.hero-note {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 13px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5c9b76;
    box-shadow: 0 0 0 5px rgba(92,155,118,.1);
}

.hero-visual {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
}

.visual-core {
    position: relative;
    z-index: 3;
    width: 265px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, #ffffff 0 12%, transparent 13%),
        linear-gradient(150deg, #edf7f1, #dcece4);
    border: 1px solid #ccded5;
    box-shadow: 0 28px 80px rgba(45, 86, 68, .15);
}

.visual-core span {
    color: #6f857c;
    font-size: 12px;
    letter-spacing: .24em;
}

.visual-core strong {
    margin-top: 4px;
    color: #294f42;
    font-size: 44px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
}

.visual-core small {
    margin-top: 13px;
    color: #7d8d87;
    font-size: 11px;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(79, 117, 99, .19);
    border-radius: 50%;
}

.orbit-one {
    width: 405px;
    height: 405px;
}

.orbit-two {
    width: 520px;
    height: 310px;
    transform: rotate(-28deg);
}

.floating-chip {
    position: absolute;
    z-index: 4;
    padding: 10px 14px;
    border: 1px solid rgba(208, 220, 214, .9);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 13px 35px rgba(41, 68, 57, .08);
    color: #52635e;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.chip-language {
    top: 21%;
    left: 6%;
}

.chip-music {
    top: 25%;
    right: 1%;
}

.chip-interior {
    bottom: 18%;
    left: 14%;
}

.section {
    padding: 104px 0;
}

.section-soft {
    background: var(--paper-soft);
    border-block: 1px solid #e5ece8;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 44px;
}

.section-heading h2,
.home-cta h2,
.learn-final h2,
.vocabulary-grid h2 {
    margin: 0;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 500;
}

.section-heading > p:last-child,
.split-heading > p,
.section-copy {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.split-heading {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .65fr);
    align-items: end;
    gap: 70px;
}

.split-heading > p {
    margin: 0 0 3px;
}

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

.space-card {
    min-height: 310px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(36, 68, 55, .035);
}

.space-card-featured {
    background:
        linear-gradient(145deg, rgba(238,248,243,.92), rgba(255,255,255,.98));
    border-color: #cfe2d8;
    transition: transform .2s ease, box-shadow .2s ease;
}

.space-card-featured:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.space-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.space-symbol {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--paper-soft);
    color: #53675f;
    font-size: 13px;
    font-weight: 600;
}

.space-state {
    color: #9aa5a2;
    font-size: 11px;
}

.state-live {
    color: #4b7e64;
}

.space-kicker {
    margin: 0 0 8px;
    color: #7d8c87;
    font-size: 12px;
}

.space-card h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.025em;
}

.space-card p:not(.space-kicker):not(.eyebrow) {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.space-link {
    margin-top: 24px;
    color: var(--green);
    font-size: 13px;
    font-weight: 500;
}

.space-card-manifesto {
    justify-content: center;
    background: #253f36;
    color: #fff;
    border-color: #253f36;
}

.space-card-manifesto .eyebrow {
    color: #b7d2c6;
}

.space-card-manifesto p:not(.eyebrow) {
    color: #d9e4df !important;
}

.feature-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px;
}

.feature-number {
    color: #8aa095;
    font-size: 11px;
    letter-spacing: .08em;
}

.feature-strip h3 {
    margin: 13px 0 9px;
    font-size: 20px;
    font-weight: 500;
}

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

.home-cta-section {
    padding-top: 82px;
    padding-bottom: 120px;
}

.home-cta {
    padding: 48px 52px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 10%, rgba(218,239,228,.8), transparent 23rem),
        #eef5f1;
    border: 1px solid #d7e6de;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
}

.home-cta p:not(.eyebrow) {
    max-width: 650px;
    margin: 13px 0 0;
    color: var(--muted);
}

.learn-hero {
    background:
        radial-gradient(circle at 85% 8%, rgba(220, 239, 230, .9), transparent 30rem),
        linear-gradient(#fbfcfa, #f7faf8);
    border-bottom: 1px solid #e1e9e5;
}

.learn-hero-grid {
    min-height: 650px;
    padding-block: 72px 82px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
    align-items: center;
    gap: 84px;
}

.module-breadcrumb {
    margin-bottom: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8b9894;
    font-size: 12px;
}

.module-breadcrumb a {
    text-decoration: none;
}

.learn-meta {
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    color: #7b8985;
    font-size: 12px;
}

.learn-meta strong {
    color: #3b524a;
    font-weight: 600;
}

.tone-card {
    padding: 30px;
    border-radius: 28px;
    background: rgba(255,255,255,.93);
    border: 1px solid #d8e5df;
    box-shadow: var(--shadow);
}

.tone-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667771;
    font-size: 12px;
}

.tone-badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--green-soft);
    color: #537563;
    font-size: 10px;
}

.tone-word {
    margin: 46px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 50px;
    letter-spacing: -.04em;
}

.tone-word strong,
.tone-base {
    font-weight: 500;
}

.tone-word strong {
    color: var(--green-dark);
}

.tone-arrow {
    color: #a5b2ae;
    font-size: 22px;
}

.tone-card > p {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.tone-list {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e7ece9;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

.tone-list span {
    padding: 8px 4px;
    border-radius: 9px;
    background: #f5f8f6;
    text-align: center;
    color: #556760;
    font-size: 13px;
}

.module-nav-wrap {
    position: sticky;
    top: 76px;
    z-index: 20;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e6ece9;
}

.module-nav {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 26px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
}

.module-nav a {
    text-decoration: none;
    color: #596964;
    font-weight: 500;
}

.module-language {
    margin-left: auto;
    color: #99a39f;
}

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

.lesson-feature {
    min-height: 315px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lesson-feature-primary {
    background: #28473c;
    color: #fff;
    border-color: #28473c;
}

.lesson-index {
    color: #98a7a1;
    font-size: 11px;
}

.lesson-feature-primary .lesson-index {
    color: #aac3b8;
}

.lesson-type {
    margin: 0 0 9px;
    color: #81908b;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lesson-feature-primary .lesson-type {
    color: #b5cdc2;
}

.lesson-feature h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 500;
}

.lesson-feature p:not(.lesson-type) {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.lesson-feature-primary p:not(.lesson-type) {
    color: #d5e1dc;
}

.lesson-action {
    margin-top: 25px;
    color: #809089;
    font-size: 12px;
}

.lesson-feature-primary .lesson-action {
    color: #bfd2ca;
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.path-card {
    min-height: 190px;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
}

.path-step {
    color: #85938f;
    font-size: 11px;
}

.path-card h3 {
    margin: 30px 0 7px;
    font-size: 21px;
    font-weight: 500;
}

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

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

.content-preview-card {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.content-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #899690;
    font-size: 11px;
}

.content-preview-card h3 {
    margin: 42px 0 13px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
}

.content-preview-card p {
    margin: 0;
    min-height: 92px;
    color: var(--muted);
    font-size: 14px;
}

.content-status {
    display: inline-block;
    margin-top: 22px;
    color: #6d8078;
    font-size: 11px;
}

.vocabulary-section {
    background: #f8faf8;
}

.vocabulary-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 100px;
}

.word-stack {
    display: grid;
    gap: 12px;
}

.word-card {
    padding: 21px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.word-vietnamese {
    color: #2e5044;
    font-size: 24px;
    font-weight: 500;
}

.word-meaning {
    color: #87938f;
    font-size: 13px;
}

.learn-final-section {
    padding-top: 80px;
    padding-bottom: 120px;
}

.learn-final {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.learn-final p:not(.eyebrow) {
    max-width: 690px;
    margin: 20px auto 28px;
    color: var(--muted);
    font-size: 17px;
}

.public-footer {
    border-top: 1px solid #e0e7e3;
    background: #f7f9f7;
}

.footer-main {
    min-height: 170px;
    padding-block: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.footer-brand {
    display: flex;
    gap: 13px;
}

.footer-brand strong {
    font-size: 14px;
    font-weight: 600;
}

.footer-brand p {
    margin: 5px 0 0;
    color: #87938f;
    font-size: 12px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a {
    color: #6b7975;
    text-decoration: none;
    font-size: 12px;
}

.footer-bottom {
    min-height: 58px;
    border-top: 1px solid #e2e8e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #96a09d;
    font-size: 11px;
}

@media (max-width: 980px) {
    .public-nav {
        gap: 16px;
    }

    .nav-future {
        display: none;
    }

    .hero-grid,
    .learn-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero-grid {
        min-height: auto;
        padding-block: 72px;
    }

    .hero-copy {
        max-width: 760px;
    }

    .hero-visual {
        min-height: 430px;
    }

    .learn-hero-grid {
        padding-block: 52px 64px;
    }

    .module-breadcrumb {
        margin-bottom: 34px;
    }

    .tone-card {
        max-width: 620px;
    }

    .space-grid,
    .lesson-feature-grid,
    .content-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vocabulary-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }
}

@media (max-width: 700px) {
    .site-shell {
        width: min(100% - 28px, var(--shell));
    }

    .header-inner {
        min-height: 66px;
    }

    .brand-copy small {
        display: none;
    }

    .public-nav {
        gap: 12px;
        font-size: 12px;
    }

    .hero-copy h1,
    .learn-hero-copy h1 {
        font-size: clamp(43px, 13vw, 62px);
    }

    .hero-lead {
        font-size: 17px;
    }

    .home-hero .hero-grid {
        padding-top: 54px;
    }

    .hero-visual {
        min-height: 340px;
        transform: scale(.86);
        margin: -24px 0;
    }

    .visual-core {
        width: 225px;
    }

    .visual-core strong {
        font-size: 38px;
    }

    .orbit-one {
        width: 330px;
        height: 330px;
    }

    .orbit-two {
        width: 410px;
        height: 255px;
    }

    .section {
        padding: 74px 0;
    }

    .split-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .space-grid,
    .lesson-feature-grid,
    .content-preview-grid,
    .feature-strip,
    .path-grid {
        grid-template-columns: 1fr;
    }

    .space-card,
    .lesson-feature {
        min-height: 265px;
    }

    .feature-strip {
        gap: 32px;
    }

    .home-cta {
        padding: 32px 25px;
        align-items: flex-start;
        flex-direction: column;
    }

    .learn-hero-grid {
        min-height: auto;
    }

    .tone-list {
        gap: 4px;
    }

    .tone-list span {
        font-size: 11px;
    }

    .module-nav-wrap {
        top: 66px;
    }

    .module-nav {
        gap: 19px;
    }

    .module-language {
        display: none;
    }

    .vocabulary-grid {
        gap: 34px;
    }

    .word-vietnamese {
        font-size: 20px;
    }

    .footer-main,
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-main {
        padding-block: 34px;
    }

    .footer-bottom {
        padding-block: 18px;
    }
}

@media (max-width: 430px) {
    .public-nav a {
        display: none;
    }

    .public-nav::after {
        content: "Learn Vietnamese";
        color: #6c7975;
        font-size: 11px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .learn-meta {
        gap: 14px;
    }

    .tone-word {
        font-size: 42px;
    }
}
/* IDEAL SPACE: LEARN VIETNAMESE LESSONS */
.lesson-action-link{text-decoration:none}.lesson-action-link:hover{color:var(--green-dark)}
.lesson-library-hero{padding:74px 0 68px;background:radial-gradient(circle at 82% 12%,rgba(221,239,230,.82),transparent 28rem),linear-gradient(#fbfcfa,#f7faf8);border-bottom:1px solid #e3ebe7}
.lesson-library-hero h1{max-width:760px;margin:0;font-size:clamp(46px,6vw,74px);line-height:1;letter-spacing:-.05em;font-weight:500}
.lesson-library-section{min-height:440px}.lesson-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.library-card{min-height:320px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.library-card:hover{transform:translateY(-2px);border-color:#cadbd3;box-shadow:var(--shadow)}
.library-card-meta{display:flex;justify-content:space-between;gap:12px;color:#8b9894;font-size:11px}
.library-card h2{margin:38px 0 12px;font-size:28px;line-height:1.16;letter-spacing:-.025em;font-weight:500}
.library-card p{margin:0;color:var(--muted);font-size:14px}.library-card-link{margin-top:30px;color:var(--green);font-size:12px;font-weight:500}
.empty-library{padding:50px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.empty-library h2{margin:0;font-weight:500}
.lesson-page-header{padding:72px 0 64px;background:radial-gradient(circle at 78% 8%,rgba(221,239,230,.78),transparent 26rem),#f8faf8;border-bottom:1px solid #e3eae6}
.lesson-article-shell{max-width:820px}.lesson-page-header h1{margin:0;font-size:clamp(42px,6vw,68px);line-height:1.02;letter-spacing:-.048em;font-weight:500}
.lesson-deck{max-width:720px;margin:25px 0 0;color:var(--ink-soft);font-size:19px;line-height:1.65}
.lesson-page-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:20px;color:#889590;font-size:11px}
.lesson-content{padding:66px 0 48px;color:#34443f;font-size:17px;line-height:1.85}.lesson-content h2{margin:52px 0 17px;color:var(--ink);font-size:30px;line-height:1.2;letter-spacing:-.025em;font-weight:500}.lesson-content h2:first-child{margin-top:0}
.lesson-content p{margin:0 0 22px}.lesson-content ul,.lesson-content ol{margin:20px 0 30px;padding-left:24px}.lesson-content li{margin:8px 0}.lesson-content strong{color:#2d4f43;font-weight:600}
.lesson-bottom-nav{padding:25px 0 80px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.lesson-bottom-nav a{color:var(--green);text-decoration:none;font-size:13px}
@media(max-width:700px){.lesson-library-grid{grid-template-columns:1fr}.lesson-library-hero,.lesson-page-header{padding-top:52px}.library-card{min-height:270px}.lesson-bottom-nav{align-items:flex-start;flex-direction:column}}
/* IDEAL SPACE: LEARNING LEVELS */
.learning-levels-section {
    padding-top: 94px;
    padding-bottom: 94px;
    background: #fff;
    border-bottom: 1px solid #e6ece9;
}
.learning-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.learning-level-card {
    min-height: 315px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.learning-level-card:hover {
    transform: translateY(-2px);
    border-color: #cbdcd4;
    box-shadow: var(--shadow);
}
.level-card-beginner {
    background:
        linear-gradient(145deg, rgba(235,247,241,.98), rgba(255,255,255,.98));
    border-color: #cee1d7;
}
.level-number {
    color: #93a29c;
    font-size: 11px;
    letter-spacing: .08em;
}
.level-label {
    margin: 0 0 9px;
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.learning-level-card h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.025em;
}
.learning-level-card p:not(.level-label) {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 14px;
}
.level-card-link {
    margin-top: 28px;
    color: var(--green);
    font-size: 12px;
    font-weight: 500;
}
.level-filter {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.level-filter a {
    padding: 8px 12px;
    border: 1px solid #d8e3de;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #6c7b76;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
}
.level-filter a:hover,
.level-filter a.is-active {
    border-color: #9db9ac;
    background: #edf6f1;
    color: #356450;
}
.lesson-level-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
}
.level-beginner {
    background: #e9f4ee;
    color: #4d765f;
}
.level-intermediate {
    background: #eef3f8;
    color: #58718a;
}
.level-advanced {
    background: #f3eef8;
    color: #735e87;
}
.empty-library > p:last-child {
    max-width: 700px;
    margin-bottom: 0;
    color: var(--muted);
}
@media (max-width: 850px) {
    .learning-level-grid {
        grid-template-columns: 1fr;
    }
    .learning-level-card {
        min-height: 245px;
    }
}
/* IDEAL SPACE: RICH LESSON CONTENT */
.lesson-content h3 {
    margin: 36px 0 13px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 500;
}
.lesson-content ol {
    padding-left: 26px;
}
.lesson-content li + li {
    margin-top: 10px;
}
.lesson-content p + ul,
.lesson-content p + ol {
    margin-top: 10px;
}
.lesson-level-name {
    padding: 4px 9px;
    border-radius: 999px;
    background: #e9f4ee;
    color: #4d765f;
}
/* IDEAL SPACE: CURRICULUM TRACKS */
.pronunciation-path-card {
    margin-bottom: 20px;
    padding: 24px 26px;
    border: 1px solid #d8e5df;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #f6faf8, #fff);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    text-decoration: none;
}
.pronunciation-path-card h3 {
    margin: 5px 0 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 500;
}
.pronunciation-path-card > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.pronunciation-path-card > span {
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.track-filter {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.track-filter a {
    padding: 10px 14px;
    border: 1px solid #d3dfda;
    border-radius: 10px;
    background: #fff;
    color: #687771;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
.track-filter a.is-active,
.track-filter a:hover {
    border-color: #94b3a5;
    background: #edf6f1;
    color: #315f4c;
}
.library-card-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    color: #8b9893;
    font-size: 10px;
    letter-spacing: .06em;
}
@media (max-width: 850px) {
    .pronunciation-path-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pronunciation-path-card > span {
        white-space: normal;
    }
}
/* ========================================================================
   LEARN VIETNAMESE NAV PHASE 1 — 2026-08-27
   ======================================================================== */
.learn-vietnamese-site .public-header.is-learn-header {
    position: relative;
    top: auto;
}
.learn-header-inner {
    gap: 20px;
}
.learn-public-brand {
    min-width: 180px;
}
.learn-brand-mark {
    background: linear-gradient(145deg, #dff1e8, #edf6f1);
}
.learn-primary-nav {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
    gap: 18px;
}
.learn-primary-nav a {
    position: relative;
    white-space: nowrap;
}
.learn-primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
    transform: scaleX(0);
    transition: transform .18s ease;
}
.learn-primary-nav a:hover::after,
.learn-primary-nav a:focus-visible::after {
    transform: scaleX(1);
}
.ideal-space-return {
    min-height: 39px;
    padding: 8px 13px;
    border: 1px solid #b9d2c6;
    border-radius: 11px;
    background: #edf6f1;
    color: #2e604d;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    box-shadow: 0 7px 18px rgba(46,107,88,.07);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ideal-space-return:hover {
    transform: translateY(-1px);
    background: #e5f2eb;
    border-color: #99baa9;
}
.learn-vietnamese-site .module-nav-wrap {
    top: 0;
}

/* Course Navigator: compact always-visible orientation bar */
.course-navigator {
    position: sticky;
    top: 0;
    z-index: 28;
    background: rgba(248, 251, 249, .96);
    border-bottom: 1px solid #dce7e2;
    box-shadow: 0 7px 24px rgba(35, 68, 55, .055);
    backdrop-filter: blur(16px);
}
.course-nav-bar {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}
.course-nav-open,
.course-nav-step a,
.course-nav-step > span,
.course-nav-close,
.course-nav-jumps button,
.course-nav-density button,
.course-nav-fold-all,
.lesson-open-map {
    font: inherit;
}
.course-nav-open {
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid #cbdcd4;
    border-radius: 9px;
    background: #fff;
    color: #365d4d;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}
.course-nav-menu-icon {
    font-size: 15px;
    line-height: 1;
}
.course-nav-location {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #687873;
    font-size: 12px;
    white-space: nowrap;
}
.course-nav-location strong {
    color: #315947;
}
.course-nav-separator {
    color: #a0aca8;
}
.course-nav-count {
    color: #8d9995;
    font-weight: 500;
}
.course-nav-current-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #41524c;
}
.course-nav-step {
    display: flex;
    align-items: center;
    gap: 5px;
}
.course-nav-step a,
.course-nav-step > span {
    min-width: 34px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid #d7e2dd;
    border-radius: 9px;
    background: #fff;
    color: #456557;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
}
.course-nav-step .is-disabled {
    opacity: .38;
}
.course-nav-step a:hover {
    border-color: #a9c2b6;
    background: #f2f8f5;
}

/* Drawer */
.course-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(24, 39, 33, .28);
    opacity: 0;
    transition: opacity .22s ease;
}
.course-nav-backdrop.is-open {
    opacity: 1;
}
.course-nav-drawer {
    position: fixed;
    z-index: 71;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(520px, 92vw);
    background: #fbfcfb;
    border-right: 1px solid #d7e2dd;
    box-shadow: 24px 0 70px rgba(28, 51, 42, .17);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
}
.course-nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .24s ease;
}
.course-map-is-open {
    overflow: hidden;
}
.course-nav-drawer-head {
    min-height: 116px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e0e8e4;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.course-nav-drawer-head .eyebrow {
    margin-bottom: 5px;
}
.course-nav-drawer-head h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: -.025em;
}
.course-nav-drawer-head p:not(.eyebrow) {
    margin: 7px 0 0;
    color: #82908b;
    font-size: 11px;
}
.course-nav-close {
    width: 38px;
    height: 38px;
    border: 1px solid #d7e2dd;
    border-radius: 11px;
    background: #fff;
    color: #52645d;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.course-nav-tools {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e9e5;
    background: #f6f9f7;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
}
.course-nav-jumps {
    display: flex;
    gap: 6px;
}
.course-nav-jumps button,
.course-nav-density button,
.course-nav-fold-all {
    min-height: 34px;
    border: 1px solid #d4e0da;
    border-radius: 9px;
    background: #fff;
    color: #5a6d65;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}
.course-nav-jumps button {
    padding: 6px 9px;
}
.course-nav-jumps button.is-primary {
    border-color: #9fbdae;
    background: #eaf5ef;
    color: #2e604d;
}
.course-nav-density {
    min-width: 150px;
    min-height: 34px;
    border: 1px solid #d4e0da;
    border-radius: 9px;
    background: #fff;
    display: grid;
    grid-template-columns: 34px minmax(70px, 1fr) 34px;
    align-items: center;
}
.course-nav-density button {
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 17px;
}
.course-nav-density span {
    padding-inline: 4px;
    color: #73827d;
    text-align: center;
    font-size: 10px;
    white-space: nowrap;
}
.course-nav-fold-all {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 6px 10px;
}
.course-nav-scroll {
    min-height: 0;
    padding: 10px 10px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b8c9c1 transparent;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    user-select: none;
}
.course-nav-scroll:focus-visible {
    outline: 2px solid #8fb4a3;
    outline-offset: -3px;
}
.course-nav-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.course-unit {
    margin-bottom: 8px;
    border: 1px solid #e0e8e4;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}
.course-unit.is-current-unit {
    border-color: #bdd4c8;
    box-shadow: 0 0 0 2px rgba(70, 125, 97, .04);
}
.course-unit-toggle {
    width: 100%;
    min-height: 48px;
    padding: 8px 11px;
    border: 0;
    background: #f9fbfa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #40564d;
    cursor: pointer;
    text-align: left;
}
.course-unit-toggle > span:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.course-unit-toggle strong {
    font-size: 12px;
}
.course-unit-toggle small {
    color: #899691;
    font-size: 10px;
}
.course-unit-chevron {
    color: #81908a;
    transition: transform .18s ease;
}
.course-unit.is-collapsed .course-unit-chevron {
    transform: rotate(180deg);
}
.course-unit-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .2s ease;
}
.course-unit.is-collapsed .course-unit-body {
    grid-template-rows: 0fr;
}
.course-unit-body-inner {
    min-height: 0;
    overflow: hidden;
}
.course-unit-lessons {
    padding: 5px;
    display: grid;
    gap: 3px;
}
.course-lesson-item {
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #54645e;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.course-lesson-item:hover {
    background: #f3f8f5;
    border-color: #d9e6df;
}
.course-lesson-item.is-current {
    background: #e9f5ef;
    border-color: #a8c8b7;
    color: #274f3e;
    box-shadow: inset 3px 0 0 #4d8068;
}
.course-lesson-item.is-current::after {
    content: "You are here";
    grid-column: 2 / 4;
    margin-top: -3px;
    color: #628373;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .03em;
}
.course-lesson-item.is-pulse {
    animation: course-current-pulse .8s ease;
}
@keyframes course-current-pulse {
    0%,100% { box-shadow: inset 3px 0 0 #4d8068; }
    45% { box-shadow: inset 3px 0 0 #4d8068, 0 0 0 4px rgba(77,128,104,.12); }
}
.course-lesson-code {
    color: #315d4b;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}
.course-lesson-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}
.course-lesson-performance {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.course-lesson-latest-score {
    min-width: 28px;
    padding: 2px 5px;
    border-radius: 7px;
    background: #eff6f2;
    color: #35634f;
    text-align: center;
    font-size: 10px;
}
.course-lesson-recent {
    display: inline-flex;
    gap: 3px;
}
.course-lesson-recent span {
    color: #899590;
    font-size: 9px;
}
.course-lesson-unfinished {
    color: #a46f2d;
    font-size: 14px;
    line-height: 1;
}

/* Density levels */
.course-nav-drawer[data-density="score"] .course-lesson-recent {
    display: none;
}
.course-nav-drawer[data-density="lesson"] .course-lesson-performance {
    display: none;
}
.course-nav-drawer[data-density="code"] .course-unit-lessons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}
.course-nav-drawer[data-density="code"] .course-lesson-item {
    min-height: 40px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course-nav-drawer[data-density="code"] .course-lesson-title,
.course-nav-drawer[data-density="code"] .course-lesson-performance {
    display: none;
}
.course-nav-drawer[data-density="code"] .course-lesson-item.is-current::after {
    content: "";
    display: none;
}

/* Lesson page changes */
.lesson-sequence-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}
.lesson-sequence-side {
    min-width: 0;
}
.lesson-sequence-next {
    text-align: right;
}
.lesson-sequence-link {
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid #dce6e1;
    border-radius: 13px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none !important;
}
.lesson-sequence-link:hover {
    border-color: #b8d0c4;
    background: #f6faf8;
}
.lesson-sequence-link strong {
    color: #315e4b;
    font-size: 12px;
}
.lesson-sequence-link > span:last-child:not(.lesson-sequence-label) {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #76847f;
    font-size: 10px;
}
.lesson-sequence-label {
    color: #8a9792;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lesson-open-map {
    min-width: 112px;
    border: 1px solid #b7d0c4;
    border-radius: 13px;
    background: #edf6f1;
    color: #315f4c;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

/* Grouped lesson library */
.lesson-unit-library {
    display: grid;
    gap: 54px;
}
.lesson-library-unit {
    scroll-margin-top: 20px;
}
.lesson-library-unit-head {
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e0e8e4;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}
.lesson-library-unit-head .eyebrow {
    margin-bottom: 5px;
}
.lesson-library-unit-head h2 {
    margin: 0;
    font-size: 31px;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 520;
}
.lesson-library-unit-head > span {
    color: #899691;
    font-size: 11px;
}

/* Responsive */
@media (max-width: 980px) {
    .learn-header-inner {
        padding-block: 10px;
        flex-wrap: wrap;
    }
    .learn-primary-nav {
        order: 3;
        width: 100%;
        flex: 1 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 4px 0 2px;
    }
    .learn-primary-nav::-webkit-scrollbar {
        display: none;
    }
    .learn-vietnamese-site .public-nav a {
        display: inline-flex;
    }
    .course-nav-current-title {
        display: none;
    }
}

@media (max-width: 700px) {
    .learn-header-inner {
        min-height: auto;
        gap: 9px 14px;
    }
    .learn-public-brand {
        min-width: 0;
    }
    .learn-brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
    .ideal-space-return {
        min-height: 36px;
        padding-inline: 10px;
        margin-left: auto;
    }
    .learn-primary-nav {
        gap: 15px;
        font-size: 11px;
    }
    .course-nav-bar {
        min-height: 48px;
        gap: 8px;
    }
    .course-nav-open {
        min-width: 38px;
        padding-inline: 8px;
    }
    .course-nav-open > span:last-child {
        display: none;
    }
    .course-nav-location {
        gap: 5px;
        font-size: 11px;
    }
    .course-nav-location > span:first-child,
    .course-nav-location .course-nav-separator:first-of-type {
        display: none;
    }
    .course-nav-step-code {
        display: none;
    }
    .course-nav-step a,
    .course-nav-step > span {
        min-width: 32px;
        min-height: 32px;
        padding: 3px 7px;
    }
    .course-nav-drawer {
        width: min(94vw, 520px);
    }
    .course-nav-tools {
        grid-template-columns: 1fr;
    }
    .course-nav-density {
        width: 100%;
    }
    .course-nav-fold-all {
        grid-column: auto;
    }
    .course-nav-jumps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .course-nav-jumps button span {
        display: none;
    }
    .course-nav-jumps button {
        min-height: 39px;
    }
    .course-lesson-item {
        min-height: 44px;
    }
    .course-nav-drawer[data-density="code"] .course-unit-lessons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lesson-sequence-nav {
        grid-template-columns: 1fr 1fr;
    }
    .lesson-open-map {
        grid-column: 1 / -1;
        order: -1;
        min-height: 44px;
    }
    .lesson-sequence-link {
        min-height: 88px;
    }
    .lesson-library-unit-head h2 {
        font-size: 27px;
    }
}

@media (max-width: 430px) {
    .learn-vietnamese-site .public-nav a {
        display: inline-flex;
    }
    .learn-vietnamese-site .public-nav::after {
        content: none;
    }
    .learn-primary-nav {
        width: calc(100vw - 28px);
    }
    .ideal-space-return span:last-child {
        display: none;
    }
    .ideal-space-return {
        width: 38px;
        justify-content: center;
    }
    .course-nav-location {
        overflow: hidden;
    }
    .course-nav-location > span:nth-of-type(2),
    .course-nav-location .course-nav-separator {
        display: none;
    }
    .course-nav-location strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .course-nav-drawer {
        width: 100vw;
    }
    .course-nav-drawer-head {
        padding-inline: 15px;
    }
    .course-nav-scroll {
        padding-inline: 7px;
    }
    .course-nav-drawer[data-density="code"] .course-unit-lessons {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
/* ========================================================================
   LEARN VIETNAMESE WORKSPACE PHASE 2 — 2026-08-28
   ======================================================================== */
:root{--learn-header-height:76px;--course-rail-code:66px;--course-rail-lesson:228px;--course-rail-score:304px;--course-rail-full:392px}
.learn-vietnamese-site .public-header.is-learn-header{position:sticky;top:0;z-index:48}
.learn-vietnamese-site .course-navigator,.learn-vietnamese-site .course-nav-backdrop,.learn-vietnamese-site .course-nav-drawer{display:none!important}
.course-rail{position:fixed;z-index:44;left:0;top:var(--learn-header-height);bottom:0;width:var(--course-rail-code);border-right:1px solid #cddbd5;background:linear-gradient(180deg,rgba(249,252,250,.985),rgba(243,248,245,.985));box-shadow:12px 0 34px rgba(28,58,46,.09);display:grid;grid-template-rows:auto auto minmax(0,1fr);transition:width .24s cubic-bezier(.2,.75,.2,1),box-shadow .24s ease;overflow:visible;backdrop-filter:blur(16px)}
.course-rail[data-density="lesson"]{width:var(--course-rail-lesson);box-shadow:16px 0 44px rgba(28,58,46,.12)}
.course-rail[data-density="score"]{width:var(--course-rail-score);box-shadow:18px 0 50px rgba(28,58,46,.14)}
.course-rail[data-density="full"]{width:var(--course-rail-full);box-shadow:22px 0 58px rgba(28,58,46,.16)}
.course-rail-head{min-height:66px;border-bottom:1px solid #dce7e2;background:linear-gradient(135deg,#eaf6f0,#f7fbf9);display:flex;align-items:stretch;position:relative}
.course-rail-identity{min-width:0;padding:10px 11px;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.course-rail-identity>*{white-space:nowrap}.course-rail-level{color:#6d8278;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.course-rail-identity strong{margin-top:2px;color:#2f604c;font-size:15px}.course-rail-identity small{margin-top:1px;color:#89958f;font-size:9px}
.course-rail[data-density="code"] .course-rail-level,.course-rail[data-density="code"] .course-rail-identity small{display:none}.course-rail[data-density="code"] .course-rail-identity{padding-inline:7px;align-items:center}
.course-rail-resize{position:absolute;z-index:3;right:-19px;top:12px;width:20px;border:1px solid #bdd0c7;border-left:0;border-radius:0 9px 9px 0;background:#f7fbf9;overflow:hidden;box-shadow:5px 3px 12px rgba(36,68,55,.08)}.course-rail-resize button{width:20px;height:21px;padding:0;border:0;background:transparent;color:#436655;display:grid;place-items:center;cursor:pointer;font:inherit;font-size:16px;line-height:1}.course-rail-resize button+button{border-top:1px solid #d6e3dd}.course-rail-resize button:hover:not(:disabled){background:#e8f4ee}.course-rail-resize button:disabled{color:#b8c3be;cursor:default}
.course-rail-quick{min-height:38px;padding:5px;border-bottom:1px solid #e0e8e4;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.course-rail-quick button{min-width:0;padding:0;border:1px solid #d7e3dd;border-radius:7px;background:#fff;color:#657970;cursor:pointer;font:inherit;font-size:11px}.course-rail-quick button:nth-child(2){border-color:#a9c7b8;background:#eaf5ef;color:#2e604d}.course-rail[data-density="code"] .course-rail-quick{grid-template-columns:1fr;min-height:32px;padding:4px 7px}.course-rail[data-density="code"] .course-rail-quick button:not(:nth-child(2)){display:none}
.course-rail-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:7px 5px 36px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aebfb7 transparent;cursor:grab;touch-action:pan-y;user-select:none;-webkit-overflow-scrolling:touch}.course-rail-scroll.is-dragging{cursor:grabbing}
.course-rail .course-unit{margin-bottom:5px;border-radius:9px}.course-rail .course-unit-toggle{min-height:37px;padding:5px 7px}.course-rail .course-unit-label{min-width:0;display:flex;align-items:baseline;gap:7px}.course-rail .course-unit-toggle strong{font-size:10px}.course-rail .course-unit-toggle small{font-size:8px}.course-rail[data-density="code"] .course-unit-toggle{min-height:30px;padding:3px;justify-content:center}.course-rail[data-density="code"] .course-unit-label small,.course-rail[data-density="code"] .course-unit-chevron{display:none}.course-rail[data-density="code"] .course-unit-toggle strong{max-width:54px;overflow:hidden;text-overflow:ellipsis;font-size:8px}
.course-rail .course-unit-lessons{padding:3px}.course-rail .course-lesson-item{min-height:37px;padding:5px 6px;grid-template-columns:43px minmax(0,1fr) auto;gap:6px}.course-rail .course-lesson-code{font-size:10px}.course-rail .course-lesson-title{font-size:10px}.course-rail .course-lesson-item.is-current::after{content:none}.course-rail[data-density="code"] .course-unit-lessons{display:grid;grid-template-columns:1fr;gap:2px}.course-rail[data-density="code"] .course-lesson-item{min-height:31px;padding:4px 2px;display:flex;justify-content:center}.course-rail[data-density="code"] .course-lesson-title,.course-rail[data-density="code"] .course-lesson-performance{display:none}.course-rail[data-density="lesson"] .course-lesson-performance{display:none}.course-rail[data-density="score"] .course-lesson-recent{display:none}.course-rail[data-density="full"] .course-lesson-recent{display:inline-flex}.course-rail .course-lesson-item.is-current{background:#dff1e8;border-color:#8eb9a4;box-shadow:inset 3px 0 0 #3f755d}.course-rail .course-unit.is-current-unit{border-color:#a8c9b9}
.lesson-workspace-header{max-width:1080px}.lesson-workspace{max-width:1080px;padding-top:52px;padding-bottom:78px;display:grid;grid-template-columns:minmax(0,760px) minmax(210px,260px);align-items:start;justify-content:center;gap:42px}.lesson-reading-column{min-width:0}.lesson-workspace .lesson-content{padding:0}
.learning-tools{position:sticky;top:calc(var(--learn-header-height) + 18px);display:grid;gap:13px}.learning-tool-card{padding:16px;border:1px solid #dce6e1;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(35,68,55,.045)}.learning-tool-kicker{margin:0 0 4px;color:#73847c;font-size:8px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.learning-tool-card h2{margin:0;font-size:16px;line-height:1.2;font-weight:600;letter-spacing:-.015em}.learning-tool-card>p:not(.learning-tool-kicker){margin:7px 0 0;color:#7b8984;font-size:10px}.tool-card-outline{border-color:#c8dce9;background:linear-gradient(145deg,#f6fbfe,#fff)}.tool-card-prerequisite{border-color:#dbcff0;background:linear-gradient(145deg,#faf7ff,#fff)}.tool-card-related{border-color:#eadbb8;background:linear-gradient(145deg,#fffbf2,#fff)}.tool-card-course{border-color:#cbe0d4;background:linear-gradient(145deg,#f3faf6,#fff)}
.lesson-outline{margin-top:10px;display:grid;gap:2px;max-height:320px;overflow-y:auto;scrollbar-width:thin}.lesson-outline-link{min-width:0;padding:6px 7px;border-radius:8px;display:grid;grid-template-columns:23px minmax(0,1fr);gap:5px;color:#64766f;text-decoration:none;font-size:9px}.lesson-outline-link>span{color:#9aa6a1;font-size:8px}.lesson-outline-link>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}.lesson-outline-link:hover,.lesson-outline-link.is-active{background:#eaf4f8;color:#365f70}
.learning-related-list{margin-top:9px;display:grid;gap:6px}.learning-related-link{padding:7px 8px;border:1px solid rgba(110,120,115,.12);border-radius:9px;background:rgba(255,255,255,.7);display:grid;grid-template-columns:37px minmax(0,1fr);gap:6px;text-decoration:none}.learning-related-link strong{color:#486859;font-size:9px}.learning-related-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#71817b;font-size:9px}.learning-related-link:hover{border-color:#b8cec4;background:#fff}.learning-tool-sequence{margin-top:10px;display:flex;justify-content:space-between;gap:8px}.learning-tool-sequence a{color:#3f6a58;text-decoration:none;font-size:10px;font-weight:650}
.lesson-section-block{margin:0 0 18px;padding:25px 27px;border:1px solid #e1e8e4;border-radius:18px;background:#fff;box-shadow:0 7px 24px rgba(36,68,55,.035);scroll-margin-top:calc(var(--learn-header-height) + 20px)}.lesson-section-block>h2:first-child{margin:0 0 16px;font-size:26px}.lesson-section-block>:last-child{margin-bottom:0}.lesson-block-goal{border-color:#c9deeb;background:linear-gradient(145deg,#f2f9fd,#fff 75%);box-shadow:inset 4px 0 0 #83b3cf,0 7px 24px rgba(36,68,55,.035)}.lesson-block-dialogue{border-color:#d9cff0;background:linear-gradient(145deg,#f8f5ff,#fff 78%);box-shadow:inset 4px 0 0 #a892d0,0 7px 24px rgba(36,68,55,.035)}.lesson-block-vocabulary{border-color:#c5e3e1;background:linear-gradient(145deg,#f0fbfa,#fff 78%);box-shadow:inset 4px 0 0 #63aaa5,0 7px 24px rgba(36,68,55,.035)}.lesson-block-culture{border-color:#ead9aa;background:linear-gradient(145deg,#fff9e9,#fff 78%);box-shadow:inset 4px 0 0 #cfae55,0 7px 24px rgba(36,68,55,.035)}.lesson-block-warning{border-color:#eccfc8;background:linear-gradient(145deg,#fff5f2,#fff 78%);box-shadow:inset 4px 0 0 #d78e7d,0 7px 24px rgba(36,68,55,.035)}.lesson-block-practice{border-color:#d3c9ed;background:linear-gradient(145deg,#f7f3ff,#fff 78%);box-shadow:inset 4px 0 0 #8c77c1,0 7px 24px rgba(36,68,55,.035)}.lesson-block-recap{border-color:#c7dfce;background:linear-gradient(145deg,#f1faf3,#fff 78%);box-shadow:inset 4px 0 0 #70a981,0 7px 24px rgba(36,68,55,.035)}.lesson-block-goal>h2{color:#3f7189}.lesson-block-dialogue>h2{color:#67518f}.lesson-block-vocabulary>h2{color:#387a76}.lesson-block-culture>h2{color:#846b28}.lesson-block-warning>h2{color:#9b5a4c}.lesson-block-practice>h2{color:#655096}.lesson-block-recap>h2{color:#477b56}
.lesson-workspace .lesson-sequence-nav{grid-template-columns:1fr 1fr;margin-top:28px}.lesson-workspace .lesson-sequence-next{text-align:right}
@media(max-width:980px){:root{--course-rail-code:58px;--course-rail-lesson:210px;--course-rail-score:282px;--course-rail-full:360px}.lesson-workspace{max-width:820px;grid-template-columns:1fr;gap:24px}.learning-tools{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card-outline{grid-row:span 2}}
@media(max-width:700px){:root{--course-rail-code:46px;--course-rail-lesson:min(78vw,245px);--course-rail-score:min(88vw,315px);--course-rail-full:calc(100vw - 12px)}.course-rail{z-index:46}.course-rail-head{min-height:55px}.course-rail-resize{top:7px}.course-rail[data-density="code"] .course-rail-identity{padding-inline:3px}.course-rail[data-density="code"] .course-rail-identity strong{font-size:11px}.course-rail[data-density="code"] .course-unit{border-radius:7px}.course-rail[data-density="code"] .course-unit-toggle{min-height:27px}.course-rail[data-density="code"] .course-unit-toggle strong{font-size:7px}.course-rail[data-density="code"] .course-lesson-item{min-height:29px}.course-rail[data-density="code"] .course-lesson-code{font-size:8px}.lesson-workspace-header,.lesson-workspace{width:min(100% - 40px,var(--shell));margin-left:max(54px,calc((100% - min(var(--shell),100% - 28px))/2))}.lesson-workspace{padding-top:34px}.learning-tools{grid-template-columns:1fr}.lesson-section-block{padding:20px 18px;border-radius:15px}.lesson-section-block>h2:first-child{font-size:23px}}
@media(prefers-reduced-motion:reduce){.course-rail,.course-unit-body,.course-lesson-item{transition:none!important}}
/* ========================================================================
   LEARN VIETNAMESE WORKSPACE PHASE 3 — 2026-08-29
   Larger typography, navigation consolidated into left rail,
   cross-space Explore & Practice cards
   ======================================================================== */
:root {
    --course-rail-code: 74px;
    --course-rail-lesson: 270px;
    --course-rail-score: 350px;
    --course-rail-full: 440px;
}

/* Phase 3 rail has more internal layers, so it owns its grid explicitly. */
.course-rail {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    font-size: 14px;
}
.course-rail-head {
    min-height: 76px;
}
.course-rail-level {
    font-size: 11px;
}
.course-rail-identity strong {
    font-size: 18px;
}
.course-rail-identity small {
    margin-top: 3px;
    font-size: 12px;
}
.course-rail-resize {
    right: -24px;
    width: 25px;
    top: 13px;
}
.course-rail-resize button {
    width: 25px;
    height: 25px;
    font-size: 19px;
}

/* Previous / current / next lives in the rail now. */
.course-rail-sequence {
    min-height: 48px;
    padding: 6px;
    border-bottom: 1px solid #dce6e1;
    background: #f9fbfa;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
.course-rail-sequence a,
.course-rail-sequence button {
    min-width: 0;
    min-height: 36px;
    padding: 5px;
    border: 1px solid #d3e0da;
    border-radius: 9px;
    background: #fff;
    color: #476558;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}
.course-rail-sequence button {
    border-color: #9fc3b1;
    background: #e9f5ef;
    color: #285944;
}
.course-rail-sequence strong {
    font-size: 12px;
}
.course-rail[data-density="code"] .course-rail-sequence {
    grid-template-columns: 1fr;
}
.course-rail[data-density="code"] .course-rail-sequence > :not(button) {
    display: none;
}
.course-rail[data-density="code"] .course-rail-sequence button strong {
    display: none;
}

/* Lesson outline now belongs to the left rail. */
.course-rail-outline-panel {
    border-bottom: 1px solid #dce6e1;
    background: linear-gradient(145deg, #f3f9fd, #fbfdfc);
    min-height: 0;
}
.course-rail-section-title,
.course-rail-course-head {
    min-height: 38px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #4d655b;
    font-size: 12px;
    font-weight: 700;
}
.course-rail-section-title button,
.course-rail-course-head button {
    width: 30px;
    height: 28px;
    padding: 0;
    border: 1px solid #d3e0da;
    border-radius: 8px;
    background: #fff;
    color: #557064;
    cursor: pointer;
    font: inherit;
}
.course-rail-outline {
    max-height: 220px;
    padding: 0 7px 8px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.course-rail-outline-link {
    min-height: 36px;
    padding: 6px 7px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    color: #5d7168;
    text-decoration: none;
}
.course-rail-outline-link > span {
    color: #8da099;
    font-size: 11px;
}
.course-rail-outline-link > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}
.course-rail-outline-link:hover,
.course-rail-outline-link.is-active {
    background: #dfeff7;
    color: #315e72;
}
.course-rail-outline-panel.is-collapsed .course-rail-outline {
    display: none;
}
.course-rail-outline-panel.is-collapsed .course-rail-section-title button {
    transform: rotate(180deg);
}

/* Related/prerequisite context is only shown when there is room. */
.course-rail-context {
    padding: 8px;
    border-bottom: 1px solid #dce6e1;
    background: linear-gradient(145deg, #fffaf1, #fbfdfc);
    display: grid;
    gap: 8px;
}
.course-rail-context-group {
    display: grid;
    gap: 4px;
}
.course-rail-context-label {
    color: #887346;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.course-rail-related-link {
    min-height: 34px;
    padding: 5px 7px;
    border: 1px solid #e6dcc5;
    border-radius: 8px;
    background: rgba(255,255,255,.82);
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.course-rail-related-link strong {
    color: #735e30;
    font-size: 11px;
}
.course-rail-related-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6f756f;
    font-size: 12px;
}
.course-rail[data-density="code"] .course-rail-outline-panel,
.course-rail[data-density="code"] .course-rail-context,
.course-rail[data-density="lesson"] .course-rail-context {
    display: none;
}
.course-rail[data-density="score"] .course-rail-context {
    display: none;
}

/* Course list typography: no more micro text. */
.course-rail-course-head {
    border-bottom: 1px solid #e0e8e4;
    background: #f6f9f7;
}
.course-rail-course-head > div {
    display: flex;
    gap: 4px;
}
.course-rail[data-density="code"] .course-rail-course-head > span,
.course-rail[data-density="code"] .course-rail-course-head > div button:first-child {
    display: none;
}
.course-rail[data-density="code"] .course-rail-course-head {
    justify-content: center;
    padding: 4px;
}
.course-rail .course-unit-toggle {
    min-height: 44px;
    padding: 7px 9px;
}
.course-rail .course-unit-toggle strong {
    font-size: 13px;
}
.course-rail .course-unit-toggle small {
    font-size: 11px;
}
.course-rail .course-lesson-item {
    min-height: 43px;
    padding: 7px 8px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
}
.course-rail .course-lesson-code {
    font-size: 13px;
}
.course-rail .course-lesson-title {
    font-size: 13px;
}
.course-rail .course-lesson-latest-score {
    font-size: 12px;
}
.course-rail .course-lesson-recent span {
    font-size: 11px;
}
.course-rail[data-density="code"] .course-unit-toggle {
    min-height: 36px;
}
.course-rail[data-density="code"] .course-unit-toggle strong {
    font-size: 10px;
}
.course-rail[data-density="code"] .course-lesson-item {
    min-height: 36px;
}
.course-rail[data-density="code"] .course-lesson-code {
    font-size: 12px;
}

/* One-column lesson reading area. No redundant right navigation cards. */
.lesson-workspace {
    max-width: 940px;
    grid-template-columns: minmax(0, 860px);
    gap: 0;
}
.lesson-reading-column {
    width: 100%;
}
.learning-tools {
    display: none !important;
}

/* Cross-space support area: useful links, not duplicated course navigation. */
.learning-explore {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid #dbe5e0;
}
.learning-explore-head {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, .7fr);
    align-items: end;
    gap: 32px;
}
.learning-explore-head .eyebrow {
    margin-bottom: 7px;
}
.learning-explore-head h2 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 540;
}
.learning-explore-head > p {
    margin: 0;
    color: #73827d;
    font-size: 15px;
    line-height: 1.6;
}
.learning-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.learning-explore-card {
    min-height: 210px;
    padding: 20px;
    border: 1px solid #dbe5e0;
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0 14px;
    text-decoration: none;
    color: #34483f;
    box-shadow: 0 8px 28px rgba(36,68,55,.045);
    transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease;
}
a.learning-explore-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(36,68,55,.08);
}
.learning-explore-symbol {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
}
.learning-explore-card > div {
    min-width: 0;
}
.learning-explore-card small {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.learning-explore-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
}
.learning-explore-card p {
    margin: 9px 0 0;
    color: #687872;
    font-size: 14px;
    line-height: 1.6;
}
.learning-explore-card > strong {
    grid-column: 2;
    margin-top: 15px;
    font-size: 13px;
}
.explore-pronunciation {
    border-color: #c7ddec;
    background: linear-gradient(145deg, #f1f8fd, #fff);
}
.explore-pronunciation .learning-explore-symbol {
    background: #dceef8;
    color: #3a718a;
}
.explore-pronunciation small,
.explore-pronunciation > strong {
    color: #41768e;
}
.explore-tones {
    border-color: #d7cbed;
    background: linear-gradient(145deg, #f7f3ff, #fff);
}
.explore-tones .learning-explore-symbol {
    background: #e8e0f7;
    color: #6a5594;
}
.explore-tones small,
.explore-tones > strong {
    color: #6a5594;
}
.explore-guide {
    border-color: #ead9ab;
    background: linear-gradient(145deg, #fff9e9, #fff);
}
.explore-guide .learning-explore-symbol {
    background: #f7eac7;
    color: #876d2d;
}
.explore-guide small,
.explore-guide > strong {
    color: #846a29;
}
.explore-vocabulary {
    border-color: #c4e1dd;
    background: linear-gradient(145deg, #effaf8, #fff);
}
.explore-vocabulary .learning-explore-symbol {
    background: #d9f0ec;
    color: #39786f;
}
.explore-vocabulary small,
.explore-vocabulary > strong {
    color: #39786f;
}
.explore-games {
    border-color: #efcfca;
    background: linear-gradient(145deg, #fff4f1, #fff);
}
.explore-games .learning-explore-symbol {
    background: #f7ddd7;
    color: #9b5c50;
}
.explore-media {
    border-color: #c9d9ef;
    background: linear-gradient(145deg, #f3f7fd, #fff);
}
.explore-media .learning-explore-symbol {
    background: #dee8f7;
    color: #506f9a;
}
.learning-explore-card.is-coming {
    opacity: .82;
}
.learning-explore-card.is-coming > strong {
    color: #8a9691;
}

/* Keep semantic lesson cards readable. */
.lesson-section-block {
    padding: 28px 30px;
}
.lesson-section-block > h2:first-child {
    font-size: 28px;
}
.lesson-section-block p,
.lesson-section-block li {
    font-size: 17px;
}
.lesson-section-block li + li {
    margin-top: 9px;
}

/* Bottom navigation stays simple and large enough to tap. */
.lesson-workspace .lesson-sequence-nav {
    margin-top: 34px;
}
.lesson-sequence-link {
    min-height: 94px;
}
.lesson-sequence-label {
    font-size: 11px;
}
.lesson-sequence-link strong {
    font-size: 14px;
}
.lesson-sequence-link > span:last-child:not(.lesson-sequence-label) {
    font-size: 12px;
}

/* Tablet */
@media (max-width: 980px) {
    :root {
        --course-rail-code: 66px;
        --course-rail-lesson: 250px;
        --course-rail-score: 326px;
        --course-rail-full: 400px;
    }
    .lesson-workspace {
        max-width: 820px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    :root {
        --course-rail-code: 48px;
        --course-rail-lesson: min(82vw, 275px);
        --course-rail-score: min(90vw, 340px);
        --course-rail-full: calc(100vw - 8px);
    }
    .course-rail-head {
        min-height: 62px;
    }
    .course-rail[data-density="code"] .course-rail-identity strong {
        font-size: 12px;
    }
    .course-rail[data-density="code"] .course-unit-toggle strong {
        font-size: 8px;
    }
    .course-rail[data-density="code"] .course-lesson-code {
        font-size: 10px;
    }
    .course-rail-outline {
        max-height: 180px;
    }
    .learning-explore-head {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .learning-explore-grid {
        grid-template-columns: 1fr;
    }
    .learning-explore-card {
        min-height: 185px;
        padding: 18px;
    }
    .lesson-section-block {
        padding: 22px 19px;
    }
    .lesson-section-block > h2:first-child {
        font-size: 24px;
    }
    .lesson-section-block p,
    .lesson-section-block li {
        font-size: 16px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE COURSE RAIL PHASE 4 — 2026-08-29
   Two independent columns: Units + all lessons
   ======================================================================== */
:root {
    --course-rail-code: 178px;
    --course-rail-lesson: 290px;
    --course-rail-score: 368px;
    --course-rail-full: 446px;
}

.course-rail-two-column {
    grid-template-rows: auto minmax(0, 1fr);
    font-size: 14px;
}

.course-rail-top {
    min-height: 66px;
    padding: 8px 9px 8px 10px;
    border-bottom: 1px solid #d7e3dd;
    background: linear-gradient(135deg, #e8f4ee, #f8fbf9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.course-rail-current {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
}

.course-rail-current > span {
    color: #6b7e75;
    font-size: 11px;
    font-weight: 700;
}

.course-rail-current > strong {
    color: #2d604b;
    font-size: 16px;
}

.course-rail-current > small {
    color: #819089;
    font-size: 11px;
}

.course-rail-size-controls {
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
}

.course-rail-size-controls button {
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid #bdd0c6;
    border-radius: 8px;
    background: #fff;
    color: #426553;
    display: grid;
    place-items: center;
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    line-height: 1;
}

.course-rail-size-controls button:hover:not(:disabled) {
    background: #e9f4ee;
}

.course-rail-size-controls button:disabled {
    color: #b8c4be;
    cursor: default;
}

.course-rail-columns {
    min-height: 0;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    background: #f8fbf9;
}

.course-unit-column,
.course-lesson-column {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(103,130,117,.35) transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.course-unit-column.is-dragging,
.course-lesson-column.is-dragging {
    cursor: grabbing;
}

.course-unit-column {
    padding: 6px 4px 28px;
    border-right: 1px solid #dce6e1;
    background: #f2f7f4;
}

.course-lesson-column {
    padding: 6px 5px 30px;
    background: #fbfcfb;
}

.course-unit-column::-webkit-scrollbar,
.course-lesson-column::-webkit-scrollbar {
    width: 3px;
}

.course-unit-column::-webkit-scrollbar-thumb,
.course-lesson-column::-webkit-scrollbar-thumb {
    background: rgba(88,117,103,.30);
    border-radius: 999px;
}

.course-unit-column::-webkit-scrollbar-track,
.course-lesson-column::-webkit-scrollbar-track {
    background: transparent;
}

.course-unit-row {
    min-height: 42px;
    margin-bottom: 3px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 2px;
}

.course-unit-row.is-current {
    background: #e7f3ed;
    border-color: #bdd5c9;
}

.course-unit-row.is-active-view {
    background: #e1f0e9;
    border-color: #a7c6b6;
}

.course-unit-open {
    width: 23px;
    height: 28px;
    border: 1px solid #c9d9d1;
    border-radius: 7px;
    background: #fff;
    color: #527064;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.course-unit-open:hover {
    border-color: #9ebdac;
    background: #edf6f1;
    color: #315e4b;
}

.course-unit-jump {
    min-width: 0;
    min-height: 30px;
    padding: 4px 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #53665e;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}

.course-unit-jump:hover {
    background: rgba(255,255,255,.8);
    color: #315f4d;
}

.course-lesson-unit-group {
    scroll-margin-top: 6px;
}

.course-lesson-unit-group + .course-lesson-unit-group {
    margin-top: 8px;
}

.course-lesson-unit-marker {
    min-height: 27px;
    padding: 4px 7px;
    border-bottom: 1px solid #dce6e1;
    color: #687b72;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.course-lesson-column .course-unit-lessons {
    padding: 3px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.course-lesson-column .course-lesson-item {
    min-height: 37px;
    padding: 5px 6px;
    border-radius: 8px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 5px;
}

.course-lesson-column .course-lesson-code {
    font-size: 12px;
}

.course-lesson-column .course-lesson-title {
    font-size: 12px;
}

.course-rail[data-density="code"] .course-rail-current > span,
.course-rail[data-density="code"] .course-rail-current > small {
    display: none;
}

.course-rail[data-density="code"] .course-rail-columns {
    grid-template-columns: 90px minmax(0, 1fr);
}

.course-rail[data-density="code"] .course-lesson-title,
.course-rail[data-density="code"] .course-lesson-performance {
    display: none;
}

.course-rail[data-density="code"] .course-lesson-column .course-lesson-item {
    grid-template-columns: 1fr;
    justify-items: start;
}

.course-rail[data-density="lesson"] .course-lesson-performance {
    display: none;
}

.course-rail[data-density="score"] .course-lesson-recent {
    display: none;
}

.course-rail[data-density="full"] .course-lesson-recent {
    display: inline-flex;
}

/* Retire the older phase-3 rail layers. */
.course-rail-two-column .course-rail-head,
.course-rail-two-column .course-rail-sequence,
.course-rail-two-column .course-rail-outline-panel,
.course-rail-two-column .course-rail-context,
.course-rail-two-column .course-rail-course-head,
.course-rail-two-column > .course-rail-scroll {
    display: none !important;
}

/* Lesson library now exposes stable Unit anchors for direct Unit URLs. */
.lesson-library-unit[id] {
    scroll-margin-top: 24px;
}

/* Mobile keeps both columns; Unit remains understandable to first-time users. */
@media (max-width: 700px) {
    :root {
        --course-rail-code: 158px;
        --course-rail-lesson: min(82vw, 285px);
        --course-rail-score: min(90vw, 350px);
        --course-rail-full: calc(100vw - 8px);
    }

    .course-rail-top {
        min-height: 58px;
        padding: 7px 6px 7px 8px;
    }

    .course-rail-current > strong {
        font-size: 13px;
    }

    .course-rail-size-controls button {
        width: 28px;
        height: 28px;
    }

    .course-rail-columns,
    .course-rail[data-density="code"] .course-rail-columns {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .course-unit-row {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .course-unit-open {
        width: 21px;
        height: 26px;
        font-size: 10px;
    }

    .course-unit-jump {
        font-size: 11px;
    }

    .course-lesson-column .course-lesson-item {
        min-height: 35px;
    }

    .course-lesson-column .course-lesson-code {
        font-size: 11px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE GLOBAL RAIL + UNIT PAGES PHASE 5B — 2026-08-29
   ======================================================================== */
.course-unit-row{
    grid-template-columns:minmax(0,1fr) 24px;
}
.course-unit-jump{order:1}
.course-unit-open{
    order:2;
    font-size:18px;
    font-weight:500;
    line-height:1;
}
.course-lesson-unit-group.is-jump-focus{
    animation:learn-unit-focus .9s ease;
}
@keyframes learn-unit-focus{
    0%{background:rgba(85,145,116,.02);box-shadow:inset 0 0 0 1px rgba(85,145,116,0)}
    35%{background:rgba(216,239,227,.68);box-shadow:inset 0 0 0 1px rgba(85,145,116,.20)}
    100%{background:transparent;box-shadow:inset 0 0 0 1px rgba(85,145,116,0)}
}

/* Support dock exists on every Learn Vietnamese page through shared JS. */
.learn-support-dock{
    position:fixed;
    z-index:36;
    top:calc(var(--learn-header-height) + 16px);
    right:12px;
    width:168px;
    padding:8px;
    border:1px solid #d7e2dd;
    border-radius:15px;
    background:rgba(251,253,252,.96);
    box-shadow:0 14px 38px rgba(31,60,48,.10);
    backdrop-filter:blur(15px);
    display:grid;
    gap:5px;
}
.learn-support-title{
    padding:4px 6px 7px;
    color:#708079;
    font-size:10px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.learn-support-item{
    min-height:39px;
    padding:7px 8px;
    border:1px solid transparent;
    border-radius:10px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:7px;
    color:#52665d;
    text-decoration:none;
    font-size:12px;
    font-weight:650;
}
.learn-support-item>span:first-child{
    width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800
}
.learn-support-item:hover{border-color:#bfd2c8;background:#fff}
.support-pronunciation{background:#f1f8fd}.support-pronunciation>span:first-child{background:#dceef8;color:#3e7188}
.support-tones{background:#f7f3ff}.support-tones>span:first-child{background:#e8e0f7;color:#695490}
.support-guide{background:#fff9e9}.support-guide>span:first-child{background:#f7eac7;color:#846b2b}
.support-vocabulary{background:#effaf8}.support-vocabulary>span:first-child{background:#d9f0ec;color:#39786f}
.support-future{background:#f8f9f8;color:#8d9894;cursor:default}.support-future>span:first-child{background:#edf0ee;color:#8a9691}

/* Unit page */
.unit-page-hero{
    padding:64px 0 54px;
    background:radial-gradient(circle at 82% 10%,rgba(221,239,230,.78),transparent 27rem),linear-gradient(#fbfcfa,#f7faf8);
    border-bottom:1px solid #e0e9e4
}
.unit-page-shell{max-width:940px}
.unit-page-hero h1{margin:0;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:-.05em;font-weight:520}
.unit-page-lead{max-width:720px;margin:22px 0 0;color:#53655e;font-size:18px;line-height:1.65}
.unit-page-heading{margin-bottom:22px;display:flex;align-items:end;justify-content:space-between;gap:28px}
.unit-page-heading h2{margin:0;font-size:34px;line-height:1.1;letter-spacing:-.035em;font-weight:540}
.unit-page-heading>p{margin:0 0 3px;color:#7b8984;font-size:13px}
.unit-page-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.unit-page-lesson-card{
    min-height:250px;padding:20px;border:1px solid #dce6e1;border-radius:18px;background:#fff;
    display:flex;flex-direction:column;justify-content:space-between;gap:20px;color:inherit;text-decoration:none;
    box-shadow:0 9px 28px rgba(36,68,55,.045);transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease
}
.unit-page-lesson-card:hover{transform:translateY(-2px);border-color:#b6cfc3;box-shadow:0 15px 36px rgba(36,68,55,.08)}
.unit-page-code{color:#3f715c;font-size:12px;font-weight:800;letter-spacing:.04em}
.unit-page-lesson-card h3{margin:0;font-size:22px;line-height:1.22;font-weight:600}
.unit-page-lesson-card p{margin:10px 0 0;color:#6e7d77;font-size:14px;line-height:1.6}
.unit-page-lesson-card>strong{color:#3a6b57;font-size:12px}
.unit-other-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.unit-other-card{padding:14px 15px;border:1px solid #dce6e1;border-radius:13px;background:rgba(255,255,255,.82);color:inherit;text-decoration:none}
.unit-other-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.unit-other-card strong{color:#3e6655;font-size:14px}
.unit-other-card span{color:#85918d;font-size:10px}
.unit-other-card p{margin:6px 0 0;color:#75837e;font-size:12px;line-height:1.5}

/* Old lesson-only support section is redundant now. */
.learning-explore{display:none!important}

/* Tablet */
@media (max-width:1180px){
    .learn-support-dock{
        top:auto;right:12px;bottom:12px;left:74px;width:auto;padding:6px;border-radius:13px;
        display:flex;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none
    }
    .learn-support-dock::-webkit-scrollbar{display:none}
    .learn-support-title{display:none}
    .learn-support-item{min-width:118px;flex:0 0 auto}
    .unit-page-shell{max-width:820px}
}

/* Mobile */
@media (max-width:700px){
    .learn-vietnamese-site{padding-bottom:70px}
    .learn-support-dock{left:54px;right:7px;bottom:7px;padding:5px}
    .learn-support-item{min-width:106px;min-height:42px;grid-template-columns:25px minmax(0,1fr);font-size:11px}
    .learn-support-item>span:first-child{width:25px;height:25px}
    .unit-page-hero{padding:48px 0 42px}
    .unit-page-shell{
        width:min(100% - 42px,var(--shell));
        margin-left:max(54px,calc((100% - min(var(--shell),100% - 28px))/2))
    }
    .unit-page-hero h1{font-size:clamp(43px,13vw,60px)}
    .unit-page-lead{font-size:16px}
    .unit-page-heading{align-items:flex-start;flex-direction:column;gap:8px}
    .unit-page-lesson-grid,.unit-other-grid{grid-template-columns:1fr}
    .unit-page-lesson-card{min-height:220px}
    .course-unit-row{grid-template-columns:minmax(0,1fr) 22px}
}
@media (prefers-reduced-motion:reduce){
    .course-lesson-unit-group.is-jump-focus{animation:none;background:rgba(216,239,227,.50)}
}
/* ========================================================================
   LEARN VIETNAMESE RAIL COMPACT + PERSISTENT UNIT FOCUS PHASE 6 — 2026-08-29
   ======================================================================== */

/* Compact mode is intentionally much narrower. */
:root {
    --course-rail-code: 142px;
    --course-rail-lesson: 276px;
    --course-rail-score: 354px;
    --course-rail-full: 430px;
}

.course-rail-columns,
.course-rail[data-density="code"] .course-rail-columns {
    grid-template-columns: 64px minmax(0, 1fr);
}

/* Unit name above; simple direct-page glyph below. */
.course-unit-row {
    min-height: 54px;
    padding: 5px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

.course-unit-jump {
    order: 1;
    width: 100%;
    min-height: 27px;
    padding: 3px 1px 2px;
    text-align: center;
    font-size: 11px;
    line-height: 1.15;
}

.course-unit-open {
    order: 2;
    width: auto;
    height: auto;
    min-height: 18px;
    margin: 0 auto;
    padding: 0 7px 1px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #648076;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.course-unit-open:hover {
    border: 0 !important;
    background: transparent !important;
    color: #275b46;
    transform: translateX(1px);
}

/* Compact lesson-code column: enough for B001-style codes, no dead width. */
.course-rail[data-density="code"] .course-lesson-column {
    padding-left: 3px;
    padding-right: 3px;
}

.course-rail[data-density="code"] .course-lesson-unit-marker {
    padding-left: 5px;
    padding-right: 4px;
    font-size: 10px;
}

.course-rail[data-density="code"] .course-lesson-column .course-lesson-item {
    min-height: 34px;
    padding: 4px 4px;
}

.course-rail[data-density="code"] .course-lesson-code {
    font-size: 11px;
}

/* Persistent, deliberately subtle Unit focus.
   It remains until another Unit is selected or the page changes. */
.course-lesson-unit-group.is-unit-selected {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(218, 239, 228, .72),
        rgba(242, 249, 245, .38)
    );
    box-shadow: inset 2px 0 0 rgba(63, 126, 98, .38);
    transition: background .18s ease, box-shadow .18s ease;
}

.course-lesson-unit-group.is-unit-selected .course-lesson-unit-marker {
    color: #356b54;
    background: rgba(223, 241, 232, .58);
}

/* Phase 5B used a short animation; persistent selection replaces it. */
.course-lesson-unit-group.is-jump-focus {
    animation: none !important;
}

/* Tablet support dock begins after the actual collapsed rail,
   so its first shortcut is no longer hidden below the rail. */
@media (max-width: 1180px) {
    .learn-support-dock {
        left: calc(var(--course-rail-code) + 8px);
    }
}

/* Mobile: preserve full "Unit X" labels but use less screen width. */
@media (max-width: 700px) {
    :root {
        --course-rail-code: 124px;
        --course-rail-lesson: min(79vw, 270px);
        --course-rail-score: min(88vw, 334px);
        --course-rail-full: calc(100vw - 6px);
    }

    .course-rail-columns,
    .course-rail[data-density="code"] .course-rail-columns {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .course-unit-row {
        min-height: 52px;
        padding-left: 1px;
        padding-right: 1px;
    }

    .course-unit-jump {
        font-size: 10px;
    }

    .course-unit-open {
        font-size: 15px;
    }

    .course-rail[data-density="code"] .course-lesson-code {
        font-size: 10px;
    }

    .learn-support-dock {
        left: calc(var(--course-rail-code) + 6px);
    }
}
/* ========================================================================
   LEARN VIETNAMESE RAIL GAME-LIKE UNIT ACTION + DISTINCT STATES PHASE 7 — 2026-08-29
   ======================================================================== */

/*
 * State language:
 * - Blue = the learner's actual current Unit / current lesson.
 * - Green = the Unit currently being browsed/jumped to in the navigator.
 *
 * This keeps "where I am learning" visually separate from
 * "where I am looking in the menu".
 */

/* Actual current Unit: cool blue. */
.course-unit-row.is-current {
    background: #edf3fb;
    border-color: #bfd0e5;
    box-shadow: inset 2px 0 0 #6f91b8;
}

.course-unit-row.is-current .course-unit-jump {
    color: #365c80;
    font-weight: 760;
}

/* Browsed/scrolled Unit: green, but never overwrite actual-current blue. */
.course-unit-row.is-active-view:not(.is-current) {
    background: #e8f4ee;
    border-color: #b7d4c5;
    box-shadow: inset 2px 0 0 #73a58e;
}

.course-unit-row.is-active-view:not(.is-current) .course-unit-jump {
    color: #3b725b;
}

/* If the real current Unit is also in view, current-state blue wins. */
.course-unit-row.is-current.is-active-view {
    background: #edf3fb;
    border-color: #bfd0e5;
    box-shadow: inset 2px 0 0 #6f91b8;
}

/* Actual current lesson: stronger blue marker. */
.course-lesson-item.is-current,
.course-lesson-item[aria-current="page"] {
    border: 1px solid #b9cce3 !important;
    background: #eaf2fb !important;
    box-shadow: inset 3px 0 0 #6388b0 !important;
    color: #244f73 !important;
}

.course-lesson-item.is-current .course-lesson-code,
.course-lesson-item[aria-current="page"] .course-lesson-code {
    color: #245f8a !important;
    font-weight: 850;
}

.course-lesson-item.is-current .course-lesson-title,
.course-lesson-item[aria-current="page"] .course-lesson-title {
    color: #355a77 !important;
}

/* Browsed Unit remains persistent green around the group. */
.course-lesson-unit-group.is-unit-selected {
    background: linear-gradient(
        90deg,
        rgba(220, 241, 230, .78),
        rgba(244, 250, 247, .42)
    );
    box-shadow: inset 2px 0 0 rgba(70, 133, 104, .46);
}

.course-lesson-unit-group.is-unit-selected .course-lesson-unit-marker {
    background: rgba(220, 241, 230, .70);
    color: #356c54;
}

/*
 * Unit-page action, game-list style:
 * large horizontal hit target under "Unit X",
 * but visually just a simple glyph — no permanent frame.
 */
.course-unit-open {
    width: 48px !important;
    min-width: 48px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #5d786c;
    font-size: 21px !important;
    font-weight: 520;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.course-unit-open:hover {
    border: 0 !important;
    background: rgba(100, 139, 121, .10) !important;
    color: #285b46 !important;
    transform: none !important;
}

.course-unit-open:active {
    background: rgba(100, 139, 121, .17) !important;
    transform: translateY(1px) !important;
}

.course-unit-open:focus-visible {
    outline: 2px solid rgba(82, 127, 105, .46);
    outline-offset: 1px;
}

/* Give the larger action target enough vertical room without bloating the list. */
.course-unit-row {
    min-height: 56px;
}

@media (max-width: 700px) {
    .course-unit-open {
        width: 44px !important;
        min-width: 44px !important;
        height: 22px !important;
        min-height: 22px !important;
        font-size: 20px !important;
    }

    .course-unit-row {
        min-height: 54px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE RAIL FINER SCROLL + COMPACT UNIT ACTION PHASE 8 — 2026-08-29
   ======================================================================== */

/*
 * Unit row stays easy to hit horizontally, but consumes less vertical space.
 * The direct-page action remains visually frameless.
 */
.course-unit-row {
    min-height: 47px;
    padding: 2px 1px 2px;
}

.course-unit-jump {
    min-height: 24px;
    padding: 2px 1px 1px;
    line-height: 1.05;
}

.course-unit-open {
    width: 48px !important;
    min-width: 48px !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 0 !important;
    margin: -1px auto 0 !important;
    font-size: 19px !important;
    line-height: 16px !important;
}

/*
 * Ultra-light scrollbars.
 * WebKit visible thumb is narrowed and its painted segment shortened
 * with transparent block borders.
 */
.course-unit-column,
.course-lesson-column {
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 111, 96, .24) transparent;
}

.course-unit-column::-webkit-scrollbar,
.course-lesson-column::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
}

.course-unit-column::-webkit-scrollbar-track,
.course-lesson-column::-webkit-scrollbar-track {
    background: transparent !important;
}

.course-unit-column::-webkit-scrollbar-thumb,
.course-lesson-column::-webkit-scrollbar-thumb {
    min-height: 18px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-radius: 999px;
    background: rgba(74, 108, 92, .28);
    background-clip: padding-box;
}

.course-unit-column:hover::-webkit-scrollbar-thumb,
.course-lesson-column:hover::-webkit-scrollbar-thumb {
    background: rgba(74, 108, 92, .38);
    background-clip: padding-box;
}

/*
 * Browsed Unit focus is a background/edge cue only.
 * Do not change lesson text weight when using Unit X as a lookup control.
 */
.course-lesson-unit-group.is-unit-selected .course-lesson-unit-marker {
    font-weight: 600 !important;
}

.course-lesson-unit-group.is-unit-selected
.course-lesson-item:not([aria-current="page"]):not(.is-current)
.course-lesson-code {
    font-weight: 600 !important;
}

.course-lesson-unit-group.is-unit-selected
.course-lesson-item:not([aria-current="page"]):not(.is-current)
.course-lesson-title {
    font-weight: 400 !important;
}

/* Current lesson keeps its blue identity, but no extra weight jump is needed. */
.course-lesson-item.is-current .course-lesson-code,
.course-lesson-item[aria-current="page"] .course-lesson-code {
    font-weight: 700 !important;
}

.course-lesson-item.is-current .course-lesson-title,
.course-lesson-item[aria-current="page"] .course-lesson-title {
    font-weight: 500 !important;
}

@media (max-width: 700px) {
    .course-unit-row {
        min-height: 45px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .course-unit-jump {
        min-height: 23px;
    }

    .course-unit-open {
        width: 44px !important;
        min-width: 44px !important;
        height: 16px !important;
        min-height: 16px !important;
        font-size: 18px !important;
        line-height: 15px !important;
    }

    .course-unit-column::-webkit-scrollbar,
    .course-lesson-column::-webkit-scrollbar {
        width: 2px !important;
    }
}
/* ========================================================================
   LEARN VIETNAMESE RAIL ICON GLASS BLUE PHASE 9 — 2026-08-29
   ======================================================================== */

/*
 * Replace the small simple glyph with a larger, clearer long arrow.
 * Keep the hit target, but make the visual feel like a light blue translucent gem.
 */
.course-unit-open {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0;
    width: 48px !important;
    min-width: 48px !important;
    height: 18px !important;
    min-height: 18px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg,
            rgba(236, 247, 255, .72),
            rgba(197, 228, 248, .26)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 rgba(126, 176, 211, .14),
        0 0 0 1px rgba(154, 199, 229, .28) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.course-unit-open::before {
    content: "⟶";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #79aeda;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255,255,255,.52),
        0 0 10px rgba(177, 216, 244, .16);
    transform: translateY(-0.5px);
}

.course-unit-open::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 2px;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.62),
        rgba(255,255,255,0)
    );
    pointer-events: none;
}

.course-unit-open:hover {
    background:
        linear-gradient(180deg,
            rgba(241, 250, 255, .84),
            rgba(184, 223, 248, .34)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        inset 0 -1px 0 rgba(111, 167, 207, .18),
        0 0 0 1px rgba(136, 189, 224, .34),
        0 6px 14px rgba(124, 175, 214, .10) !important;
    color: transparent !important;
}

.course-unit-open:hover::before {
    color: #5e9ed2;
}

.course-unit-open:active {
    background:
        linear-gradient(180deg,
            rgba(224, 243, 255, .88),
            rgba(168, 212, 242, .38)
        ) !important;
}

.course-unit-open:focus-visible {
    outline: 2px solid rgba(122, 177, 216, .48);
    outline-offset: 1px;
}

@media (max-width: 700px) {
    .course-unit-open {
        width: 44px !important;
        min-width: 44px !important;
        height: 17px !important;
        min-height: 17px !important;
    }

    .course-unit-open::before {
        font-size: 20px;
    }

    .course-unit-open::after {
        left: 6px;
        right: 6px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE RAIL VISUALLY SHORT SCROLLBAR PHASE 10 — 2026-08-29
   Keep the native drag area, but paint only a very short center segment.
   ======================================================================== */

.course-unit-column::-webkit-scrollbar,
.course-lesson-column::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
}

.course-unit-column::-webkit-scrollbar-track,
.course-lesson-column::-webkit-scrollbar-track {
    background: transparent !important;
}

.course-unit-column::-webkit-scrollbar-thumb,
.course-lesson-column::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(50% - 9px),
            rgba(73, 108, 91, .34) calc(50% - 9px),
            rgba(73, 108, 91, .34) calc(50% + 9px),
            transparent calc(50% + 9px),
            transparent 100%
        ) !important;
}

.course-unit-column:hover::-webkit-scrollbar-thumb,
.course-lesson-column:hover::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(50% - 11px),
            rgba(73, 108, 91, .48) calc(50% - 11px),
            rgba(73, 108, 91, .48) calc(50% + 11px),
            transparent calc(50% + 11px),
            transparent 100%
        ) !important;
}

/* Firefox cannot independently shorten the painted native thumb,
   so keep it extremely quiet there. */
.course-unit-column,
.course-lesson-column {
    scrollbar-width: thin;
    scrollbar-color: rgba(73, 108, 91, .18) transparent;
}

@media (max-width: 700px) {
    .course-unit-column::-webkit-scrollbar-thumb,
    .course-lesson-column::-webkit-scrollbar-thumb {
        background:
            linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(50% - 7px),
                rgba(73, 108, 91, .32) calc(50% - 7px),
                rgba(73, 108, 91, .32) calc(50% + 7px),
                transparent calc(50% + 7px),
                transparent 100%
            ) !important;
    }
}
/* ========================================================================
   LEARN VIETNAMESE CUSTOM MINI SCROLLBAR PHASE 11 — 2026-08-29
   Native rail scrollbars hidden; fixed 18px/16px draggable indicators.
   ======================================================================== */

/* Hide native browser scrollbars completely inside the two navigator columns. */
.course-unit-column,
.course-lesson-column {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.course-unit-column::-webkit-scrollbar,
.course-lesson-column::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/*
 * The visible line is only 2px wide, but the transparent hit area is 12px
 * so it remains practical to drag with a mouse.
 */
.rail-mini-scroll-thumb {
    --mini-thumb-height: 18px;
    position: fixed;
    z-index: 58;
    width: 12px;
    height: var(--mini-thumb-height);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
    opacity: .68;
    transition: opacity .14s ease;
}

.rail-mini-scroll-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: rgba(72, 108, 91, .42);
    box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}

.rail-mini-scroll-thumb:hover,
.rail-mini-scroll-thumb.is-dragging {
    opacity: 1;
}

.rail-mini-scroll-thumb:hover::before,
.rail-mini-scroll-thumb.is-dragging::before {
    background: rgba(61, 99, 81, .62);
}

.rail-mini-scroll-thumb.is-hidden {
    display: none;
}

/* Unit/lesson indicators differ just enough to read as two separate columns. */
.rail-mini-scroll-unit::before {
    background: rgba(87, 126, 108, .36);
}

.rail-mini-scroll-lesson::before {
    background: rgba(76, 113, 96, .46);
}

@media (max-width: 700px) {
    .rail-mini-scroll-thumb {
        --mini-thumb-height: 16px;
        width: 10px;
    }

    .rail-mini-scroll-thumb::before {
        left: 4px;
        width: 2px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE MINI SCROLLBAR COLOR PHASE 12 — 2026-08-29
   Add clearer colors to the short custom rail indicators.
   ======================================================================== */

.rail-mini-scroll-thumb {
    opacity: .86;
}

.rail-mini-scroll-thumb::before {
    width: 3px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.24),
        0 0 8px rgba(118, 169, 210, .10);
}

/* Unit column: soft sky blue */
.rail-mini-scroll-unit::before {
    background: linear-gradient(
        180deg,
        rgba(170, 210, 240, .96),
        rgba(116, 171, 215, .96)
    );
    box-shadow:
        0 0 0 1px rgba(255,255,255,.28),
        0 0 10px rgba(111, 173, 221, .16);
}

/* Lesson column: mint/teal so the two rails are easier to separate */
.rail-mini-scroll-lesson::before {
    background: linear-gradient(
        180deg,
        rgba(150, 214, 197, .96),
        rgba(87, 160, 142, .96)
    );
    box-shadow:
        0 0 0 1px rgba(255,255,255,.24),
        0 0 10px rgba(84, 165, 146, .14);
}

.rail-mini-scroll-thumb:hover::before,
.rail-mini-scroll-thumb.is-dragging::before {
    width: 3px;
}

.rail-mini-scroll-unit:hover::before,
.rail-mini-scroll-unit.is-dragging::before {
    background: linear-gradient(
        180deg,
        rgba(188, 223, 247, 1),
        rgba(96, 160, 212, 1)
    );
    box-shadow:
        0 0 0 1px rgba(255,255,255,.34),
        0 0 12px rgba(101, 169, 221, .24);
}

.rail-mini-scroll-lesson:hover::before,
.rail-mini-scroll-lesson.is-dragging::before {
    background: linear-gradient(
        180deg,
        rgba(170, 226, 211, 1),
        rgba(72, 154, 134, 1)
    );
    box-shadow:
        0 0 0 1px rgba(255,255,255,.30),
        0 0 12px rgba(75, 159, 138, .22);
}

@media (max-width: 700px) {
    .rail-mini-scroll-thumb {
        opacity: .92;
    }

    .rail-mini-scroll-thumb::before {
        width: 3px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE UNIT ICON TRUE CENTER PHASE 13 — 2026-08-29
   Keep the long glass arrow, but lock it to true geometric center.
   ======================================================================== */

.course-unit-open {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
}

.course-unit-open::before {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    line-height: 1 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.course-unit-open::after {
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 14px) !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 700px) {
    .course-unit-open {
        display: grid !important;
        place-items: center !important;
    }

    .course-unit-open::before {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .course-unit-open::after {
        width: calc(100% - 12px) !important;
        transform: translateX(-50%) !important;
    }
}
/* ========================================================================
   LEARN VIETNAMESE UNIT ICON VECTOR TRUE CENTER PHASE 14 — 2026-08-29
   Replace font glyph with a CSS-drawn arrow to remove font-metric offset.
   ======================================================================== */

/*
 * The previous ⟶ was geometrically centered as a text box,
 * but its font glyph contains asymmetric internal whitespace.
 * This version draws the arrow from CSS primitives instead.
 */
.course-unit-open {
    --unit-arrow-color: #79aeda;
    --unit-arrow-line: 24px;
    --unit-arrow-head: 7px;
    position: relative;
}

/* arrow shaft */
.course-unit-open::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--unit-arrow-line) !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        rgba(156, 203, 237, .78),
        var(--unit-arrow-color)
    ) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.52),
        0 0 7px rgba(160, 205, 237, .16) !important;
    transform: translate(-52%, -50%) !important;
    pointer-events: none !important;
}

/* arrow head */
.course-unit-open::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(50% + 9px) !important;
    width: var(--unit-arrow-head) !important;
    height: var(--unit-arrow-head) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 2px solid var(--unit-arrow-color) !important;
    border-right: 2px solid var(--unit-arrow-color) !important;
    border-radius: 1px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
}

.course-unit-open:hover {
    --unit-arrow-color: #5d9ed2;
}

.course-unit-open:active {
    --unit-arrow-color: #4e91c7;
}

@media (max-width: 700px) {
    .course-unit-open {
        --unit-arrow-line: 22px;
        --unit-arrow-head: 6px;
    }

    .course-unit-open::after {
        left: calc(50% + 8px) !important;
    }
}
/* ========================================================================
   LEARN VIETNAMESE LESSON COLUMN FONT +2PX PHASE 15 — 2026-08-29
   Increase lesson-column typography only; preserve all rail widths.
   ======================================================================== */

/* Base lesson-column text: +2px from the current 12px values. */
.course-lesson-column .course-lesson-code {
    font-size: 14px;
}

.course-lesson-column .course-lesson-title {
    font-size: 14px;
}

/* Unit marker inside the lesson column: +2px from 11px. */
.course-lesson-column .course-lesson-unit-marker {
    font-size: 13px;
}

/* Compact mode previously used 11px lesson codes / 10px markers. */
.course-rail[data-density="code"] .course-lesson-code {
    font-size: 13px;
}

.course-rail[data-density="code"] .course-lesson-unit-marker {
    font-size: 12px;
}

/* Mobile compact mode previously used 10px lesson codes. */
@media (max-width: 700px) {
    .course-rail[data-density="code"] .course-lesson-code {
        font-size: 12px;
    }

    .course-rail[data-density="code"] .course-lesson-unit-marker {
        font-size: 12px;
    }
}
/* ========================================================================
   LEARN VIETNAMESE DEFAULT WEIGHT + ICON CLEANUP PHASE 17V2 — 2026-08-29
   ======================================================================== */

/* Lesson-column text: use the site's normal/default weight.
   Current/focus states are distinguished by color/background only. */
.course-lesson-column .course-lesson-code,
.course-lesson-column .course-lesson-title,
.course-lesson-column .course-lesson-unit-marker,
.course-lesson-column .course-lesson-item.is-current .course-lesson-code,
.course-lesson-column .course-lesson-item.is-current .course-lesson-title,
.course-lesson-column .course-lesson-item[aria-current="page"] .course-lesson-code,
.course-lesson-column .course-lesson-item[aria-current="page"] .course-lesson-title,
.course-lesson-unit-group.is-unit-selected .course-lesson-unit-marker,
.course-lesson-unit-group.is-unit-selected
.course-lesson-item:not(.is-current):not([aria-current="page"])
.course-lesson-code,
.course-lesson-unit-group.is-unit-selected
.course-lesson-item:not(.is-current):not([aria-current="page"])
.course-lesson-title {
    font-weight: normal !important;
}

/* Remove the glass/pill container from the Unit-page action.
   Keep only the blue CSS-vector arrow. */
.course-unit-open,
.course-unit-open:hover,
.course-unit-open:active {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.course-unit-open {
    --unit-arrow-color: #72a9d5;
}

.course-unit-open:hover {
    --unit-arrow-color: #4f94c8;
}

.course-unit-open:active {
    --unit-arrow-color: #3f84ba;
}

/* Remove old glass highlight/shadows from the vector pieces. */
.course-unit-open::before,
.course-unit-open::after {
    box-shadow: none !important;
}

/* Keyboard accessibility remains visible only when keyboard-focused. */
.course-unit-open:focus-visible {
    outline: 2px solid rgba(93, 157, 205, .42);
    outline-offset: 2px;
    border-radius: 2px !important;
}

/* ========================================================================
   LEARN VIETNAMESE DESKTOP/TABLET RESERVED COMPACT RAIL PHASE 19 — 2026-08-29
   Reserve only the compact rail footprint. Wider rail states remain overlays.
   ======================================================================== */

@media (min-width: 701px) {
    /*
     * The fixed navigator is 142px in its smallest desktop/tablet state.
     * Reserve exactly that footprint in normal layout.
     *
     * Important:
     * - Main does not follow expanded rail widths.
     * - Expanding the rail therefore overlays only the extra width.
     * - Collapsing/expanding does not push the lesson horizontally.
     */
    body:has([data-course-rail]) main.public-main {
        box-sizing: border-box !important;
        margin-left: 142px !important;
        margin-right: 0 !important;
        width: calc(100% - 142px) !important;
        max-width: calc(100% - 142px) !important;
        min-width: 0 !important;
    }

    body:has([data-course-rail]) main.public-main > *,
    body:has([data-course-rail]) main.public-main section,
    body:has([data-course-rail]) main.public-main article {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
}

/*
 * Mobile is intentionally not changed in Phase 19.
 * Phase 18's mobile content reservation has been removed above.
 * Mobile returns to the pre-Phase18 overlay behavior until a separate
 * mobile navigator decision is made.
 */

/* ========================================================================
   LEARN VIETNAMESE LESSON AVAILABLE SPACE PHASE 20 — 2026-08-29
   Use the free desktop/tablet area instead of squeezing lesson content.
   ======================================================================== */

/*
 * Desktop: the support dock occupies about 188px at the right edge.
 * Reserve a little more than that, then let the lesson use the rest.
 */
@media (min-width: 1181px) {
    .lesson-workspace-page .lesson-workspace-header,
    .lesson-workspace-page .lesson-workspace {
        box-sizing: border-box !important;
        width: min(calc(100% - 214px), 1280px) !important;
        max-width: none !important;
        margin-left: 22px !important;
        margin-right: auto !important;
    }

    .lesson-workspace-page .lesson-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: stretch !important;
        gap: 0 !important;
    }

    .lesson-workspace-page .lesson-reading-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .lesson-workspace-page .lesson-content,
    .lesson-workspace-page .lesson-section-block,
    .lesson-workspace-page .lesson-sequence-nav {
        width: 100% !important;
        max-width: none !important;
    }

    .lesson-workspace-page .lesson-deck {
        max-width: 980px !important;
    }

    .lesson-workspace-page .lesson-workspace-header h1 {
        max-width: 1160px !important;
    }
}

/*
 * Tablet: support moves to the bottom, so there is no reason to keep the
 * old 820/940px reading caps. Use almost all space after the compact rail.
 */
@media (min-width: 701px) and (max-width: 1180px) {
    .lesson-workspace-page .lesson-workspace-header,
    .lesson-workspace-page .lesson-workspace {
        box-sizing: border-box !important;
        width: calc(100% - 44px) !important;
        max-width: none !important;
        margin-left: 22px !important;
        margin-right: 22px !important;
    }

    .lesson-workspace-page .lesson-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: stretch !important;
        gap: 0 !important;
    }

    .lesson-workspace-page .lesson-reading-column,
    .lesson-workspace-page .lesson-content,
    .lesson-workspace-page .lesson-section-block,
    .lesson-workspace-page .lesson-sequence-nav {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .lesson-workspace-page .lesson-deck {
        max-width: 100% !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE EXPANDABLE RIGHT SUPPORT RAIL PHASE 22 — 2026-08-29
   42px button-only -> 88px icon rail -> 176px full support rail.
   Main reserves the current rail width: support never overlays lesson text.
   ======================================================================== */

:root {
    --learn-support-rail-space: 42px;
}

body[data-learn-support-density="0"] {
    --learn-support-rail-space: 42px;
}

body[data-learn-support-density="1"] {
    --learn-support-rail-space: 88px;
}

body[data-learn-support-density="2"] {
    --learn-support-rail-space: 176px;
}

/* ------------------------------------------------------------
   Wide desktop: true reserved right rail
   ------------------------------------------------------------ */

@media (min-width: 1181px) {
    /*
     * Left compact Course Navigator remains reserved at 142px.
     * Right Quick Support reserves only its CURRENT width.
     * Therefore no overlay and no wasted blank 176px when collapsed.
     */
    body:has([data-course-rail]) main.public-main {
        box-sizing: border-box !important;
        margin-left: 142px !important;
        margin-right: var(--learn-support-rail-space) !important;
        width: calc(100% - 142px - var(--learn-support-rail-space)) !important;
        max-width: calc(100% - 142px - var(--learn-support-rail-space)) !important;
        min-width: 0 !important;
        transition:
            margin-right .18s ease,
            width .18s ease,
            max-width .18s ease;
    }

    .learn-support-dock {
        position: fixed !important;
        z-index: 38 !important;
        top: var(--learn-header-height) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        box-sizing: border-box !important;
        width: var(--learn-support-rail-space) !important;
        max-width: var(--learn-support-rail-space) !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 10px 6px 14px !important;
        border: 0 !important;
        border-left: 1px solid rgba(54,100,83,.14) !important;
        border-radius: 0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(244,250,247,.98),
                rgba(250,252,251,.98)
            ) !important;

        box-shadow: none !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transition:
            width .18s ease,
            max-width .18s ease,
            padding .18s ease;
    }

    .learn-support-controls {
        order: -10;
        min-height: 34px;
        display: grid;
        grid-template-columns: repeat(2, 30px);
        justify-content: center;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
    }

    .learn-support-resize {
        appearance: none;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid #bfd3c9;
        border-radius: 9px;
        background: rgba(255,255,255,.86);
        color: #376655;
        display: grid;
        place-items: center;
        font: inherit;
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(41,73,60,.045);
    }

    .learn-support-resize:hover:not(:disabled) {
        border-color: #9fc1b1;
        background: #fff;
    }

    .learn-support-resize:disabled {
        display: none;
    }

    .learn-support-title {
        margin: 0 !important;
        padding: 5px 7px 7px !important;
        white-space: nowrap;
        overflow: hidden;
    }

    .learn-support-item {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        overflow: hidden;
    }

    /* State 0: a tiny right-edge control only. */
    .learn-support-dock[data-support-density="0"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .learn-support-dock[data-support-density="0"] .learn-support-controls {
        grid-template-columns: 30px;
    }

    .learn-support-dock[data-support-density="0"] .learn-support-title,
    .learn-support-dock[data-support-density="0"] .learn-support-item {
        display: none !important;
    }

    /* State 1: vertical icon rail, labels hidden. */
    .learn-support-dock[data-support-density="1"] .learn-support-title {
        display: none !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-item {
        min-height: 44px !important;
        padding: 6px !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        gap: 0 !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-item > span:first-child {
        width: 30px !important;
        height: 30px !important;
        margin: 0 auto !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-item > span:nth-child(2) {
        display: none !important;
    }

    /* State 2: full familiar Quick Support labels. */
    .learn-support-dock[data-support-density="2"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .learn-support-dock[data-support-density="2"] .learn-support-title {
        display: block !important;
    }

    .learn-support-dock[data-support-density="2"] .learn-support-item {
        min-height: 39px !important;
        padding: 7px 8px !important;
        grid-template-columns: 28px minmax(0,1fr) !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .learn-support-dock[data-support-density="2"] .learn-support-item > span:nth-child(2) {
        display: block !important;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Phase20's internal right-side reserve is no longer needed:
     * the support rail now lives outside main.
     */
    .lesson-workspace-page .lesson-workspace-header,
    .lesson-workspace-page .lesson-workspace {
        box-sizing: border-box !important;
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
}

/* ------------------------------------------------------------
   Tablet/mobile: preserve the existing horizontal bottom dock.
   Resize controls are irrelevant there.
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
    .learn-support-controls {
        display: none !important;
    }

    .learn-support-dock {
        width: auto !important;
        max-width: none !important;
    }

    .learn-support-dock .learn-support-item {
        display: grid;
    }

    .learn-support-dock .learn-support-item > span:nth-child(2) {
        display: block;
    }
}

/* ========================================================================
   LEARN VIETNAMESE SMART TWO-STATE SUPPORT RAIL PHASE 23 — 2026-08-29
   Remove icon-only mode. Auto full when space is available.
   ======================================================================== */

/*
 * Phase 22 state 1 is retired. If stale markup/storage briefly produces it,
 * render it as full until Phase 23 JS normalizes the state.
 */
body[data-learn-support-density="1"] {
    --learn-support-rail-space: 176px !important;
}

@media (min-width: 1181px) {
    /* Hide the old two-button Phase 22 controls completely. */
    .learn-support-controls {
        display: none !important;
    }

    /* State 1 visually equals full state; there is no icon-only rail. */
    .learn-support-dock[data-support-density="1"] {
        width: 176px !important;
        max-width: 176px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-title {
        display: block !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-item {
        display: grid !important;
        min-height: 39px !important;
        padding: 7px 8px !important;
        grid-template-columns: 28px minmax(0,1fr) !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .learn-support-dock[data-support-density="1"] .learn-support-item > span:nth-child(2) {
        display: block !important;
    }

    /* ------------------------------------------------------------
       New polished single toggle
       ------------------------------------------------------------ */

    .smart-support-toggle-wrap {
        order: -20;
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 0 7px;
        flex: 0 0 auto;
    }

    .smart-support-toggle {
        appearance: none;
        position: relative;
        box-sizing: border-box;
        height: 38px;
        width: 34px;
        min-width: 34px;
        padding: 0;
        border: 1px solid rgba(113, 164, 140, .34);
        border-radius: 13px;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.96),
                rgba(224,242,234,.82)
            );
        color: #3d755f;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        overflow: hidden;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.94),
            inset 0 -1px 0 rgba(73,122,101,.06),
            0 5px 16px rgba(44,93,73,.10),
            0 0 0 1px rgba(255,255,255,.34);
        transition:
            width .18s ease,
            border-color .16s ease,
            background .16s ease,
            box-shadow .16s ease,
            transform .12s ease;
    }

    .learn-support-dock[data-support-density="2"] .smart-support-toggle {
        width: 104px;
        justify-content: flex-start;
        padding: 0 12px 0 10px;
    }

    .smart-support-toggle:hover {
        border-color: rgba(92, 153, 124, .52);
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,1),
                rgba(214,239,228,.92)
            );
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 7px 20px rgba(44,93,73,.14),
            0 0 0 1px rgba(255,255,255,.44);
    }

    .smart-support-toggle:active {
        transform: translateY(1px) scale(.985);
    }

    .smart-support-toggle:focus-visible {
        outline: 2px solid rgba(91,157,126,.48);
        outline-offset: 2px;
    }

    .smart-support-toggle-gem {
        position: relative;
        width: 20px;
        height: 22px;
        min-width: 20px;
        border-radius: 9px;
        background:
            radial-gradient(circle at 35% 28%, rgba(255,255,255,.96), transparent 32%),
            linear-gradient(
                155deg,
                rgba(177,221,201,.80),
                rgba(116,181,151,.58)
            );
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.78),
            0 2px 7px rgba(60,119,92,.12);
    }

    .smart-support-chevron {
        position: absolute;
        top: 50%;
        width: 6px;
        height: 6px;
        border-left: 1.8px solid #3f8064;
        border-bottom: 1.8px solid #3f8064;
        transform: translateY(-50%) rotate(45deg);
        transform-origin: center;
        transition: transform .18s ease;
    }

    .smart-support-chevron-a {
        left: 6px;
    }

    .smart-support-chevron-b {
        left: 10px;
    }

    /*
     * Full rail collapses toward the RIGHT edge, so reverse the chevrons.
     */
    .smart-support-toggle[data-expanded="1"] .smart-support-chevron {
        transform: translateY(-50%) rotate(225deg);
    }

    .smart-support-toggle-label {
        display: none;
        font-size: 11px;
        line-height: 1;
        font-weight: normal;
        letter-spacing: .015em;
        white-space: nowrap;
        color: #426e5d;
    }

    .learn-support-dock[data-support-density="2"] .smart-support-toggle-label {
        display: inline-block;
    }

    /*
     * Collapsed means ONLY the polished toggle. No title, links or mystery
     * icon-only state.
     */
    .learn-support-dock[data-support-density="0"] .smart-support-toggle-wrap {
        min-height: 48px;
        padding-top: 4px;
    }

    .learn-support-dock[data-support-density="0"] .learn-support-title,
    .learn-support-dock[data-support-density="0"] .learn-support-item {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    .smart-support-toggle-wrap {
        display: none !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE SUPPORT RESPONSIVE REFLOW PHASE 24 — 2026-08-29
   Robust left/right rail reservation + guaranteed lesson text wrapping.
   ======================================================================== */

:root {
    --learn-support-collapsed: 72px;
    --learn-support-full: 176px;
}

/* Retire the old 42px collapsed width so the word "Support" fits. */
body[data-learn-support-density="0"] {
    --learn-support-rail-space: var(--learn-support-collapsed) !important;
}

body[data-learn-support-density="2"] {
    --learn-support-rail-space: var(--learn-support-full) !important;
}

@media (min-width: 1181px) {
    /*
     * Robust layout rule:
     * use margins only. Do NOT also force a calculated width.
     * A normal block with left/right margins automatically occupies exactly
     * the remaining space between both fixed rails.
     */
    body:has([data-course-rail]) main.public-main {
        box-sizing: border-box !important;
        margin-left: 142px !important;
        margin-right: var(--learn-support-rail-space) !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        overflow-x: clip !important;

        transition:
            margin-right .18s ease !important;
    }

    .learn-support-dock {
        width: var(--learn-support-rail-space) !important;
        max-width: var(--learn-support-rail-space) !important;
    }

    /*
     * Make every level of the lesson layout shrinkable.
     * This is the critical protection against text/card content continuing
     * underneath the fixed Support rail.
     */
    .lesson-workspace-page,
    .lesson-workspace-page .lesson-workspace-header,
    .lesson-workspace-page .lesson-workspace,
    .lesson-workspace-page .lesson-reading-column,
    .lesson-workspace-page .lesson-content,
    .lesson-workspace-page .lesson-section-block,
    .lesson-workspace-page .lesson-sequence-nav,
    .lesson-workspace-page article,
    .lesson-workspace-page section,
    .lesson-workspace-page div {
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .lesson-workspace-page .lesson-workspace-header,
    .lesson-workspace-page .lesson-workspace {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .lesson-workspace-page .lesson-reading-column,
    .lesson-workspace-page .lesson-content,
    .lesson-workspace-page .lesson-section-block,
    .lesson-workspace-page .lesson-sequence-nav {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /*
     * Lesson prose must reflow when the right rail opens.
     * No learner-facing prose should keep a desktop nowrap/min-content width.
     */
    .lesson-workspace-page .lesson-reading-column p,
    .lesson-workspace-page .lesson-reading-column li,
    .lesson-workspace-page .lesson-reading-column dd,
    .lesson-workspace-page .lesson-reading-column dt,
    .lesson-workspace-page .lesson-reading-column blockquote,
    .lesson-workspace-page .lesson-section-block p,
    .lesson-workspace-page .lesson-section-block li,
    .lesson-workspace-page .lesson-section-block span:not(.lesson-badge):not(.lesson-chip) {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    /* ------------------------------------------------------------
       Support toggle: always self-identifying
       ------------------------------------------------------------ */

    .smart-support-toggle-wrap {
        min-height: 52px !important;
        padding: 4px 0 8px !important;
    }

    .smart-support-toggle {
        width: 64px !important;
        min-width: 64px !important;
        height: 38px !important;
        padding: 0 7px !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 13px !important;
    }

    .learn-support-dock[data-support-density="2"] .smart-support-toggle {
        width: 118px !important;
        min-width: 118px !important;
        padding: 0 11px !important;
    }

    .smart-support-toggle-label,
    .learn-support-dock[data-support-density="0"] .smart-support-toggle-label,
    .learn-support-dock[data-support-density="2"] .smart-support-toggle-label {
        display: inline-block !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: normal !important;
        letter-spacing: .01em !important;
        color: #426e5d !important;
    }

    .smart-support-toggle-gem {
        width: 17px !important;
        min-width: 17px !important;
        height: 20px !important;
    }

    .smart-support-chevron-a {
        left: 5px !important;
    }

    .smart-support-chevron-b {
        left: 8px !important;
    }

    /*
     * Collapsed rail is still compact, but no longer mysterious.
     * Only the labeled Support control is visible.
     */
    .learn-support-dock[data-support-density="0"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .learn-support-dock[data-support-density="0"] .learn-support-title,
    .learn-support-dock[data-support-density="0"] .learn-support-item {
        display: none !important;
    }
}

/*
 * At 1181px and below Phase23 still hands Support to the existing bottom dock.
 * Do not reserve a right-side rail there.
 */
@media (max-width: 1180px) {
    body:has([data-course-rail]) main.public-main {
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE OUTER MAIN SELECTOR FIX PHASE 25 — 2026-08-29
   Rail reservation applies ONLY to main.public-main.
   Nested lesson-reading-column <main> must never inherit rail margins.
   ======================================================================== */

.lesson-workspace-page .lesson-reading-column {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================================================
   LEARN VIETNAMESE VERTICAL SPACE PHASE 26 — 2026-08-29
   Reduce dead vertical space while keeping comfortable reading rhythm.
   ======================================================================== */

@media (min-width: 701px) {
    /*
     * Hero content already has generous breathing room.
     * Reduce only the excess space below it.
     */
    .lesson-workspace-page .lesson-workspace-header {
        padding-bottom: 20px !important;
    }

    /*
     * Previous layout left about 65px outside the workspace plus about 52px
     * inside it before the first lesson block. Bring that total down without
     * making the page feel cramped.
     */
    .lesson-workspace-page .lesson-workspace {
        margin-top: 18px !important;
        padding-top: 24px !important;
    }

    /*
     * Keep the first learning block visually connected to the lesson hero.
     */
    .lesson-workspace-page .lesson-reading-column > :first-child,
    .lesson-workspace-page .lesson-content > :first-child {
        margin-top: 0 !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE HEADER GAP FIX PHASE 27 — 2026-08-29
   Correct the actual source of excessive vertical whitespace.
   ======================================================================== */

@media (min-width: 701px) {
    /*
     * Geometry audit confirmed the parent .lesson-page-header still carried
     * the original 72px top / 64px bottom padding.
     */
    .lesson-workspace-page .lesson-page-header {
        padding-top: 36px !important;
        padding-bottom: 20px !important;
    }

    .lesson-workspace-page .lesson-workspace {
        margin-top: 10px !important;
        padding-top: 20px !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE MOBILE COMPACT RAILS PHASE 28 — 2026-08-29
   Portrait phone: 48px Course tab -> 124px overlay on demand.
   Low-height/phone Support: button -> bottom link bar on demand.
   ======================================================================== */

@media (max-width: 700px) {
    body[data-mobile-course-mode="compact"] main.public-main {
        box-sizing: border-box !important;
        margin-left: 48px !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    body[data-mobile-course-mode="compact"] [data-course-rail] {
        transition: width .16s ease, max-width .16s ease !important;
    }

    body[data-mobile-course-mode="compact"][data-mobile-course-open="0"] [data-course-rail] {
        width: 48px !important;
        max-width: 48px !important;
        min-width: 48px !important;
        overflow: hidden !important;
    }

    body[data-mobile-course-mode="compact"][data-mobile-course-open="1"] [data-course-rail] {
        width: 124px !important;
        max-width: 124px !important;
        min-width: 124px !important;
        overflow: visible !important;
        z-index: 62 !important;
        box-shadow: 8px 0 22px rgba(34, 68, 55, .08);
    }

    body[data-mobile-course-mode="compact"][data-mobile-course-open="0"]
    [data-course-rail] > :not(.mobile-course-toggle-wrap) {
        display: none !important;
    }

    .mobile-course-toggle-wrap {
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        padding: 6px 4px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-course-toggle {
        appearance: none;
        box-sizing: border-box;
        width: 40px;
        min-width: 40px;
        height: 36px;
        padding: 0 3px;
        border: 1px solid rgba(92, 151, 124, .32);
        border-radius: 10px;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.96),
                rgba(223,241,232,.88)
            );
        color: #386d59;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        cursor: pointer;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            0 4px 12px rgba(37,77,60,.08);
        font: inherit;
    }

    body[data-mobile-course-open="1"] .mobile-course-toggle {
        width: 76px;
        padding: 0 7px;
    }

    .mobile-course-toggle-label {
        font-size: 9px;
        line-height: 1;
        font-weight: normal;
        white-space: nowrap;
    }

    .mobile-course-toggle-chevron {
        width: 5px;
        height: 5px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(-45deg);
        transition: transform .16s ease;
    }

    body[data-mobile-course-open="1"] .mobile-course-toggle-chevron {
        transform: rotate(135deg);
    }

    body[data-mobile-course-mode="compact"] .lesson-workspace-page,
    body[data-mobile-course-mode="compact"] .lesson-page-header,
    body[data-mobile-course-mode="compact"] .lesson-workspace-header,
    body[data-mobile-course-mode="compact"] .lesson-workspace,
    body[data-mobile-course-mode="compact"] .lesson-reading-column,
    body[data-mobile-course-mode="compact"] .lesson-section-block {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-mobile-course-mode="compact"] .lesson-workspace-header,
    body[data-mobile-course-mode="compact"] .lesson-workspace {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    body[data-mobile-course-mode="compact"] .lesson-workspace-page h1,
    body[data-mobile-course-mode="compact"] .lesson-workspace-page p,
    body[data-mobile-course-mode="compact"] .lesson-workspace-page li {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

@media (min-width: 701px) {
    .mobile-course-toggle-wrap {
        display: none !important;
    }
}

@media (max-width: 700px), (max-height: 560px) and (max-width: 1180px) {
    body[data-mobile-support-mode="compact"] .learn-support-dock {
        z-index: 70 !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(72, 121, 100, .16) !important;
        background: rgba(250, 253, 251, .97) !important;
        box-shadow: 0 8px 24px rgba(30, 69, 52, .10) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="0"]
    .learn-support-dock {
        position: fixed !important;
        left: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
        width: 86px !important;
        max-width: 86px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 3px !important;
        border-radius: 13px !important;
        display: block !important;
        overflow: hidden !important;
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="0"]
    .learn-support-dock > :not(.mobile-support-toggle-wrap) {
        display: none !important;
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="1"]
    .learn-support-dock {
        position: fixed !important;
        left: 54px !important;
        right: 6px !important;
        bottom: 6px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 5px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="1"]
    .learn-support-dock::-webkit-scrollbar {
        display: none;
    }

    body[data-mobile-support-mode="compact"] .learn-support-title,
    body[data-mobile-support-mode="compact"] .learn-support-controls,
    body[data-mobile-support-mode="compact"] .smart-support-toggle-wrap {
        display: none !important;
    }

    .mobile-support-toggle-wrap {
        box-sizing: border-box;
        flex: 0 0 auto;
        width: 78px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-support-toggle {
        appearance: none;
        box-sizing: border-box;
        width: 78px;
        height: 32px;
        padding: 0 8px;
        border: 0;
        border-radius: 10px;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(225,242,234,.92)
            );
        color: #3e715d;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        font: inherit;
        font-size: 10px;
        line-height: 1;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
    }

    .mobile-support-toggle-gem {
        position: relative;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 20%),
            linear-gradient(145deg, #b8dfcf, #71b495);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .mobile-support-toggle-gem::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid rgba(42, 105, 78, .85);
        border-bottom: 1.5px solid rgba(42, 105, 78, .85);
        transform: rotate(45deg);
        transition: transform .15s ease;
    }

    body[data-mobile-support-open="1"] .mobile-support-toggle-gem::after {
        transform: rotate(225deg);
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="1"]
    .learn-support-item {
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: 150px !important;
        min-height: 42px !important;
        padding: 6px 9px !important;
        display: grid !important;
        grid-template-columns: 26px auto !important;
        align-items: center !important;
        gap: 6px !important;
    }

    body[data-mobile-support-mode="compact"][data-mobile-support-open="1"]
    .learn-support-item > span:nth-child(2) {
        display: block !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 701px) and (min-height: 561px) and (max-width: 1180px),
       (min-width: 1181px) {
    .mobile-support-toggle-wrap {
        display: none !important;
    }
}

/* ========================================================================
   LEARN VIETNAMESE TWO STATE LEFT RAIL PHASE 29 — 2026-08-29
   Left Course Navigator now behaves like the right Support rail:
   it always reserves its current width and never overlays lesson content.
   ======================================================================== */

:root {
    --course-left-rail-space: 142px;
}

/* ------------------------------------------------------------
   Reserve CURRENT left rail width in the outer main only.
   ------------------------------------------------------------ */

body:has([data-course-rail]) main.public-main {
    margin-left: var(--course-left-rail-space) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transition: margin-left .18s ease !important;
}

[data-course-rail] {
    width: var(--course-left-rail-space) !important;
    max-width: var(--course-left-rail-space) !important;
    min-width: var(--course-left-rail-space) !important;
    transition:
        width .18s ease,
        max-width .18s ease,
        min-width .18s ease !important;
}

/* Old 4-step / mobile Phase28 controls are retired. */
[data-phase29-disabled="1"] {
    display: none !important;
}

/* ------------------------------------------------------------
   New single two-state control
   ------------------------------------------------------------ */

.two-state-course-toggle-wrap {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.two-state-course-toggle {
    appearance: none;
    box-sizing: border-box;
    width: 86px;
    min-width: 40px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(92,151,124,.32);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(223,241,232,.88)
        );
    color: #386d59;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 4px 12px rgba(37,77,60,.08);
}

.two-state-course-toggle-label {
    font-size: 10px;
    line-height: 1;
    font-weight: normal;
    white-space: nowrap;
}

.two-state-course-toggle-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}

body[data-course-rail-two-state="expanded"] .two-state-course-toggle-chevron {
    transform: rotate(135deg);
}

/* ------------------------------------------------------------
   Wide desktop/tablet: 142px <-> 430px
   ------------------------------------------------------------ */

@media (min-width: 701px) {
    body[data-course-rail-two-state="collapsed"] {
        --course-left-rail-space: 142px;
    }

    body[data-course-rail-two-state="expanded"] {
        --course-left-rail-space: 430px;
    }

    /*
     * Preserve the original density rendering by mapping the two states
     * directly to the narrowest and widest visual modes.
     */
    body[data-course-rail-two-state="collapsed"] [data-course-rail] {
        --course-rail-code: 142px;
    }

    body[data-course-rail-two-state="expanded"] [data-course-rail] {
        --course-rail-code: 430px;
    }
}

/* ------------------------------------------------------------
   Phone: 48px <-> 124px, BOTH reserved in layout.
   No overlay in either state.
   ------------------------------------------------------------ */

@media (max-width: 700px) {
    body[data-course-rail-two-state="collapsed"] {
        --course-left-rail-space: 48px;
    }

    body[data-course-rail-two-state="expanded"] {
        --course-left-rail-space: 124px;
    }

    body[data-course-rail-two-state="collapsed"] [data-course-rail] {
        overflow: hidden !important;
    }

    body[data-course-rail-two-state="expanded"] [data-course-rail] {
        overflow: hidden !important;
        box-shadow: none !important;
    }

    /*
     * Collapsed phone rail is a self-identifying Course tab only.
     */
    body[data-course-rail-two-state="collapsed"]
    [data-course-rail] > :not(.two-state-course-toggle-wrap) {
        display: none !important;
    }

    .two-state-course-toggle {
        width: 40px;
        padding: 0 3px;
        gap: 2px;
    }

    body[data-course-rail-two-state="expanded"] .two-state-course-toggle {
        width: 84px;
        padding: 0 8px;
        gap: 6px;
    }

    .two-state-course-toggle-label {
        font-size: 9px;
    }

    /*
     * Supersede Phase28's overlay reservation.
     */
    body[data-mobile-course-mode="compact"] main.public-main {
        margin-left: var(--course-left-rail-space) !important;
        width: auto !important;
        max-width: none !important;
    }

    body[data-mobile-course-mode="compact"] [data-course-rail] {
        width: var(--course-left-rail-space) !important;
        max-width: var(--course-left-rail-space) !important;
        min-width: var(--course-left-rail-space) !important;
        box-shadow: none !important;
    }
}

/* Nested lesson main must remain neutral. */
.lesson-workspace-page .lesson-reading-column {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================================================
   LEARN VIETNAMESE GLOBAL CURRICULUM LEFT RAIL PHASE 30 V2 — 2026-08-29
   Beginner Units/B01-B107 remain the global course spine on every lesson.
   Non-B curriculum lessons are appended as "Lessons" at the bottom.
   ======================================================================== */

[data-course-rail][data-phase30-global-course-nav="1"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

[data-course-rail][data-phase30-global-course-nav="1"] .phase30-course-summary {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 8px 10px 9px;
    border-bottom: 1px solid rgba(56, 104, 83, .10);
    display: none;
}

body[data-course-rail-two-state="expanded"]
[data-course-rail][data-phase30-global-course-nav="1"]
.phase30-course-summary {
    display: grid !important;
    gap: 2px;
}

.phase30-course-summary strong {
    color: #295f4b;
    font-size: 12px;
    font-weight: 600;
}

.phase30-course-summary span {
    color: #648078;
    font-size: 10px;
}

.phase30-course-summary small {
    margin-top: 2px;
    color: #53766a;
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

[data-course-rail][data-phase30-global-course-nav="1"] .course-rail-columns {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    align-content: start !important;
}

[data-course-rail][data-phase30-global-course-nav="1"] .course-unit-column,
[data-course-rail][data-phase30-global-course-nav="1"] .course-lesson-column {
    min-height: 0 !important;
    align-content: start !important;
    justify-content: flex-start !important;
}

[data-course-rail][data-phase30-global-course-nav="1"] .course-unit-row,
[data-course-rail][data-phase30-global-course-nav="1"] .course-lesson-unit-group,
[data-course-rail][data-phase30-global-course-nav="1"] .course-unit-lessons {
    align-self: start !important;
}

/*
 * Phase29 had only changed width. Phase30 maps the two states to the
 * content density too: compact code view <-> full information view.
 */
body[data-course-rail-two-state="collapsed"]
[data-course-rail][data-phase30-global-course-nav="1"]
.course-lesson-title {
    display: none !important;
}

body[data-course-rail-two-state="expanded"]
[data-course-rail][data-phase30-global-course-nav="1"]
.course-lesson-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

@media (min-width: 701px) {
    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-rail-columns {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-lesson-item {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 45px minmax(0, 1fr) !important;
        grid-template-areas:
            "code title"
            "code performance" !important;
        column-gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-lesson-code {
        grid-area: code !important;
    }

    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-lesson-title {
        grid-area: title !important;
    }

    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-lesson-performance {
        grid-area: performance !important;
    }
}

/* Extra non-B lessons live after Unit 12 / B107 in lesson-column scroll. */
[data-course-rail][data-phase30-global-course-nav="1"]
.phase30-extra-lessons {
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(73, 120, 100, .18);
}

[data-course-rail][data-phase30-global-course-nav="1"]
.phase30-extra-lessons-title {
    color: #316b56 !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
}

.phase30-extra-meta {
    display: block;
    margin-top: 2px;
    color: #7a8f88;
    font-size: 9px;
    font-weight: normal;
    line-height: 1.2;
}

body[data-course-rail-two-state="collapsed"] .phase30-extra-meta {
    display: none !important;
}

/* Do not allow Phase28 mobile overlay rules to reappear. */
@media (max-width: 700px) {
    body[data-course-rail-two-state="expanded"]
    [data-course-rail][data-phase30-global-course-nav="1"]
    .course-lesson-title {
        display: none !important;
    }
}

/* Phase30 V2 — Phase28/Phase29 phone-width conflict fix.
   Phase29 two-state width is authoritative even while Phase28 data attrs remain. */
@media (max-width: 700px) {
    body[data-mobile-course-mode="compact"][data-course-rail-two-state="collapsed"]
    [data-course-rail],
    body[data-mobile-course-mode="compact"][data-mobile-course-open="0"][data-course-rail-two-state="collapsed"]
    [data-course-rail],
    body[data-mobile-course-mode="compact"][data-mobile-course-open="1"][data-course-rail-two-state="collapsed"]
    [data-course-rail] {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    body[data-mobile-course-mode="compact"][data-course-rail-two-state="expanded"]
    [data-course-rail],
    body[data-mobile-course-mode="compact"][data-mobile-course-open="0"][data-course-rail-two-state="expanded"]
    [data-course-rail],
    body[data-mobile-course-mode="compact"][data-mobile-course-open="1"][data-course-rail-two-state="expanded"]
    [data-course-rail] {
        width: 124px !important;
        min-width: 124px !important;
        max-width: 124px !important;
    }

    body[data-mobile-course-mode="compact"][data-course-rail-two-state="collapsed"]
    main.public-main {
        margin-left: 48px !important;
    }

    body[data-mobile-course-mode="compact"][data-course-rail-two-state="expanded"]
    main.public-main {
        margin-left: 124px !important;
    }
}

/* Current states remain visually explicit. */
[data-course-rail][data-phase30-global-course-nav="1"]
.course-lesson-item.is-current {
    box-shadow: inset 3px 0 0 #5b91cf;
}

[data-course-rail][data-phase30-global-course-nav="1"]
.course-unit-row.is-current {
    color: #245b4a;
}

/* The two independent columns always start at the top. */
[data-course-rail][data-phase30-global-course-nav="1"]
.course-unit-column > :first-child,
[data-course-rail][data-phase30-global-course-nav="1"]
.course-lesson-column > :first-child {
    margin-top: 0 !important;
}

/* ========================================================================
   LEARN VIETNAMESE LESSONS UNIT ROW PHASE 31 V4 — 2026-08-29
   Retire old 4-density arrows and add Lessons as a Unit-column destination.
   ======================================================================== */

/* Phase4 shrink/grow arrows are obsolete after Phase29 two-state rail. */
[data-course-rail] .course-rail-size-controls,
[data-course-rail] [data-course-rail-shrink],
[data-course-rail] [data-course-rail-grow],
[data-course-rail] [data-phase31-retired="1"] {
    display: none !important;
}

/* Keep the top area clean after retiring the old arrows. */
[data-course-rail][data-phase30-global-course-nav="1"] .course-rail-top {
    justify-content: flex-start !important;
}

/*
 * Lessons behaves as the final Unit-column destination.
 * It is visually separated but reuses the same Unit row language.
 */
[data-course-rail][data-phase31-lessons-unit-row="1"] .phase31-lessons-row {
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(76, 123, 103, .20) !important;
    border-radius: 0 0 9px 9px !important;
}

[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase31-lessons-row.is-current,
[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase31-lessons-row.is-unit-selected {
    background: #e7f3ed !important;
    border-color: #bdd5c9 !important;
}

[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase31-lessons-jump {
    color: #315f4d !important;
}

[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase31-lessons-open::before {
    content: "↗";
}

[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase31-lessons-open {
    font-size: 0 !important;
}

/* Lessons destination mirrors Unit selection in the lesson column. */
[data-course-rail][data-phase31-lessons-unit-row="1"]
.phase30-extra-lessons.is-unit-selected {
    background:
        linear-gradient(
            90deg,
            rgba(220, 241, 231, .46),
            rgba(255, 255, 255, 0)
        );
}

/* Do not spread the final Lessons row toward the bottom. */
[data-course-rail][data-phase31-lessons-unit-row="1"]
.course-unit-column {
    align-content: start !important;
    justify-content: flex-start !important;
}
/* Shared Learn Vietnamese voice preference; synthesis/play controls consume this later. */
.lv-voice-selector{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem;border:1px solid rgba(80,94,109,.25);border-radius:999px;white-space:nowrap;font-size:.78rem}.lv-voice-selector>span{padding-left:.35rem;color:#52606d}.lv-voice-selector button{border:0;border-radius:999px;padding:.38rem .62rem;background:transparent;color:inherit;cursor:pointer}.lv-voice-selector button.is-selected{background:#183b56;color:#fff}.lv-voice-selector button:focus-visible{outline:2px solid #147d92;outline-offset:2px}.lv-voice-selector button:disabled{opacity:.42;cursor:not-allowed}@media(max-width:900px){.lv-voice-selector{order:4;margin:.35rem auto 0}}
.lv-ai-voice-disclosure{display:block;color:#66727e;font-size:.68rem;white-space:nowrap}

/* Learn Vietnamese inline pronunciation annotation: small visual, generous invisible hit target. */
.lesson-content .lv-audio-play{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin:0 0 0 3px;padding:0;border:0;border-radius:2px;background:transparent;box-shadow:none;color:#71817b;line-height:1;vertical-align:baseline;transform:translateY(-.32em);cursor:pointer;overflow:visible;transition:color .14s ease,opacity .14s ease}
.lesson-content .lv-audio-play::before{content:"";position:absolute;inset:-8px;border-radius:6px}
.lesson-content .lv-audio-play-icon{display:block;width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.lesson-content .lv-audio-play:hover{color:#245f57}.lesson-content .lv-audio-play:focus-visible{color:#183b56;outline:2px solid #147d92;outline-offset:3px}.lesson-content .lv-audio-play.is-playing{color:#147d92}.lesson-content .lv-audio-play.is-playing .lv-audio-play-icon{animation:lv-audio-pulse .8s ease-in-out infinite alternate}.lesson-content .lv-audio-play.is-unavailable{color:#9b5c5c;opacity:.7}
@keyframes lv-audio-pulse{from{opacity:.58}to{opacity:1}}
@media(max-width:600px){.lesson-content .lv-audio-play{width:15px;height:15px;margin-left:3px}.lesson-content .lv-audio-play-icon{width:15px;height:15px}.lesson-content .lv-audio-play::before{inset:-8px}}
@media(prefers-reduced-motion:reduce){.lesson-content .lv-audio-play{transition:none}.lesson-content .lv-audio-play.is-playing .lv-audio-play-icon{animation:none}}