/* Lesson journey v3: a reading-first, no-popup learning surface */
#learn {--paper:#f9fbfe;--ink:#172b43;--muted:#566b82;--line:#dbe5ee;--teal:#087e7a;--teal-light:#e7faf4;--blue:#22539b;--amber:#995f0b;--amber-bg:#fff5e1;--good:#08734d;--good-bg:#e5f8ee;--bad:#a73d41;--bad-bg:#fff0ef}
#learn .course-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 19px;padding:21px 24px;border:1px solid #31506a;border-radius:19px;background:linear-gradient(115deg,#152e45,#1a3448)}
#learn .course-intro h2{font-size:23px;line-height:1.24;margin:8px 0;color:white}
#learn .course-intro p{color:#c8d9e4;margin:6px 0;font-size:14px;line-height:1.55}
#learn .course-count{font-weight:750;white-space:nowrap;text-align:center;padding:14px 20px;color:#e5fbf6;border:1px solid #457384;background:#14394a;border-radius:15px}
#learn .course-count strong{display:block;font-size:29px;color:#9cf1dc;line-height:1.2}
#learn .course-shell{display:grid;grid-template-columns:minmax(250px,284px) minmax(0,1fr);align-items:start;gap:22px}
#learn .course-rail{border-radius:18px;border:1px solid #2d4760;padding:12px;background:#111f34;position:sticky;top:22px;max-height:calc(100vh - 42px);overflow-y:auto;scrollbar-width:thin}
#learn .rail-heading{padding:12px 12px 14px;color:#d7e7f6}
#learn .rail-heading strong{display:block;font-size:14px}
#learn .rail-heading small{display:block;color:#9db9ce;margin-top:6px;line-height:1.4}
#learn .rail-item{appearance:none;display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:13px 10px;border:1px solid transparent;background:transparent;color:#c9d9e7;border-radius:12px;margin:0 0 5px;font:inherit;transition:background .12s,border-color .12s}
#learn .rail-item:hover{background:#203951}
#learn .rail-item:focus-visible{outline:3px solid #97eedb;outline-offset:2px}
#learn .rail-item .rail-num{width:35px;height:35px;border-radius:11px;border:1px solid #3e5871;background:#263c53;display:grid;place-items:center;color:#cee1ee;font-weight:800;flex:none;font-size:13px}
#learn .rail-item .rail-text{display:block;flex:1;min-width:0}
#learn .rail-item .rail-title{display:block;font-weight:760;font-size:13px;line-height:1.35;color:#e1edf7}
#learn .rail-item .rail-vi{display:block;font-size:12px;margin-top:4px;line-height:1.4;color:#a8bed0}
#learn .rail-item .rail-status{display:block;margin-top:5px;font-weight:650;font-size:11px;color:#9eb4ca}
#learn .rail-item.is-opened{border-color:#8f6540;background:#302c2e}
#learn .rail-item.is-opened .rail-num{background:#7c511f;color:#fff;border-color:#c18a47}
#learn .rail-item.is-opened .rail-status{color:#ffd78c}
#learn .rail-item.is-done{border-color:#376c60;background:#153a36}
#learn .rail-item.is-done .rail-num{background:#13705e;color:white;border-color:#64d9ba}
#learn .rail-item.is-done .rail-status{color:#9af1d6}
#learn .rail-item.is-selected{box-shadow:inset 4px 0 0 #82ead5;border-color:#70d4c0;background:#224954}
#learn .rail-item.is-selected .rail-title{color:#fff}
#learn .course-legend{display:flex;flex-wrap:wrap;gap:11px;margin:14px 7px 5px;font-size:11px;color:#b1c7da}
#learn .legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;background:#39516b}
#learn .legend-dot.opened{background:#ca9154}
#learn .legend-dot.done{background:#50c39e}
#learn .course-reader{background:var(--paper);color:var(--ink);border:1px solid #e3ebf3;border-radius:20px;overflow:hidden;min-width:0;box-shadow:0 10px 30px #05142527}
#learn .course-reader p{color:var(--muted);font-size:15px;line-height:1.7}
#learn .reader-header{padding:28px 30px 22px;background:linear-gradient(126deg,#f0faf8,#f4f7ff);border-bottom:1px solid var(--line)}
#learn .reader-headline{display:flex;align-items:center;justify-content:space-between;gap:10px}
#learn .reader-kicker{font-weight:800;font-size:11px;letter-spacing:.12em;color:var(--teal);text-transform:uppercase}
#learn .reader-title{font-size:28px;line-height:1.23;letter-spacing:-.025em;color:#183147;margin:11px 0 5px}
#learn .reader-subtitle{font-size:16px;color:#387080;margin-bottom:12px}
#learn .reader-status{display:inline-flex;gap:6px;align-items:center;background:white;border:1px solid #c9dedf;padding:8px 11px;border-radius:9px;font-weight:750;font-size:12px;color:#285e62}
#learn .reader-description{margin:8px 0}
#learn .steps-overview{padding:19px 30px;background:white;border-bottom:1px solid var(--line)}
#learn .steps-overview-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:10px;font-weight:750;font-size:13px;color:#314e61}
#learn .step-strip{display:flex;flex-wrap:wrap;gap:7px}
#learn .step-jump{border:1px solid #d2e3e8;background:#f6fbfc;border-radius:22px;padding:9px 10px;color:#355c69;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
#learn .step-jump:hover{background:#e3f6f0;border-color:#80c8b8}
#learn .step-jump:focus-visible{outline:3px solid #0aa8a1}
#learn .journey-body{padding:7px 30px 30px}
#learn .journey-stage{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;position:relative;padding:24px 0 4px;scroll-margin-top:18px}
#learn .journey-stage:not(:last-child) .stage-mark:after{content:"";position:absolute;top:47px;bottom:-22px;left:20px;width:2px;background:linear-gradient(#7ebeb4,#d5e5e7)}
#learn .stage-mark{display:flex;justify-content:center;position:relative}
#learn .stage-number{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:white;background:#126a72;font-weight:800;box-shadow:0 3px 0 #b4d9d5}
#learn .stage-content{min-width:0;border-bottom:1px solid #e2eaf0;padding-bottom:23px}
#learn .journey-stage:last-child .stage-content{border-bottom:none}
#learn .stage-heading{margin:0 0 12px}
#learn .stage-kicker{font-size:11px;letter-spacing:.1em;color:#137b79;text-transform:uppercase;font-weight:850}
#learn .stage-heading h3{font-size:21px;letter-spacing:-.015em;line-height:1.3;color:#1b344d;margin:4px 0 3px}
#learn .stage-heading .stage-vi{font-size:14px;color:#50828a;line-height:1.5}
#learn .bi-pair{margin:12px 0;border:1px solid #e0e8f0;border-radius:13px;padding:17px 19px;background:white}
#learn .bi-pair strong{display:block;color:#1b3a51;font-size:12px;margin-bottom:6px}
#learn .bi-en{color:#263d55;font-size:15px;line-height:1.68}
#learn .bi-vi{color:#446977;font-size:14px;line-height:1.7;margin-top:9px;padding-top:9px;border-top:1px dashed #d9e5eb}
#learn .context-chip{display:inline-flex;border:1px solid #d7e6f3;background:#edf5fb;color:#315e88;font-weight:800;padding:4px 9px;border-radius:7px;font-size:11px;margin:0 0 8px}
#learn .stage-hint{border-left:3px solid #3ca7a2;background:#eff9f8;border-radius:0 12px 12px 0;padding:14px 17px;margin-top:14px;color:#34596b;font-size:14px;line-height:1.65}
#learn .stage-hint.warn{border-color:#d69a49;background:var(--amber-bg)}
#learn textarea.study-notes{width:100%;min-height:106px;resize:vertical;padding:15px 16px;border:1px solid #bdcfdc;border-radius:12px;background:white;color:#1b344d;font:inherit;font-size:14px;line-height:1.6}
#learn textarea.study-notes:focus{outline:3px solid #b9eee0;border-color:#099889}
#learn .autosave-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px;color:#64808d;font-size:12px}
#learn .quiz-question{border:1px solid #dce7ed;background:#fff;border-radius:14px;padding:18px 18px 16px;margin:15px 0}
#learn .quiz-question h4{font-size:17px;line-height:1.4;color:#21374d;margin:9px 0 4px}
#learn .quiz-question .q-vi{font-size:14px;color:#467783;line-height:1.55;margin:3px 0 14px}
#learn .quiz-order{display:inline-flex;border-radius:7px;background:#e8f6f5;color:#207c75;padding:4px 8px;font-size:11px;font-weight:800}
#learn .quiz-options{display:grid;gap:9px}
#learn .quiz-option{appearance:none;background:#f8fafc;border:1.5px solid #d9e4ec;border-radius:12px;padding:12px 14px;text-align:left;font:inherit;color:#273d52;display:grid;grid-template-columns:26px minmax(0,1fr) 18px;gap:10px;align-items:start;width:100%;cursor:pointer}
#learn .quiz-option:hover:not(:disabled){background:#f1f9fc;border-color:#66b1bf}
#learn .quiz-option:focus-visible{outline:3px solid #62bac9;outline-offset:2px}
#learn .quiz-option:disabled{cursor:default;opacity:1}
#learn .choice-letter{background:#e3ebf1;border-radius:7px;width:26px;height:26px;display:grid;place-items:center;font-size:12px;font-weight:850;color:#3b637e}
#learn .quiz-option .option-en{font-size:13px;font-weight:700;line-height:1.45}
#learn .quiz-option .option-vi{font-size:12px;line-height:1.5;color:#647f8b;margin-top:4px}
#learn .quiz-option.is-correct{background:#e5f8ec;border-color:#34a571}
#learn .quiz-option.is-correct .choice-letter{background:#119268;color:white}
#learn .quiz-option.is-wrong{background:#fff0ef;border-color:#d77370}
#learn .quiz-option.is-wrong .choice-letter{background:#d45f5c;color:white}
#learn .option-mark{font-size:18px;font-weight:900;text-align:center;color:#09815d}
#learn .quiz-option.is-wrong .option-mark{color:#af403c}
#learn .quiz-result{border-radius:12px;margin-top:12px;padding:16px 18px;border:1px solid #99d8bc;background:var(--good-bg)}
#learn .quiz-result.is-wrong{border-color:#efbcb4;background:var(--bad-bg)}
#learn .quiz-result .result-title{font-size:15px;font-weight:850;color:var(--good)}
#learn .quiz-result.is-wrong .result-title{color:var(--bad)}
#learn .quiz-result p{font-size:13px;line-height:1.62;margin:8px 0;color:#33485c}
#learn .quiz-result .answer-line{font-weight:750;color:#214f4c}
#learn .quiz-retry{margin-top:6px;padding:8px 12px;border-radius:9px;background:white;border:1px solid #b9c9d2;font:inherit;font-size:12px;font-weight:750;color:#225069;cursor:pointer}
#learn .quiz-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 15px;margin:14px 0;border:1px solid #cddedc;background:#f0faf7;border-radius:12px;color:#176e62;font-weight:760;font-size:13px}
#learn .finish-card{border:1px solid #c9dedc;background:#eef9f6;border-radius:15px;padding:20px;margin:15px 0}
#learn .finish-card h4{font-size:19px;color:#215c5a;margin:0 0 8px}
#learn .finish-btn{font:inherit;border:0;border-radius:10px;background:#0b766b;color:white;font-weight:850;padding:13px 18px;margin-top:12px;cursor:pointer}
#learn .finish-btn:hover{background:#075e56}
#learn .finish-btn:disabled{cursor:not-allowed;background:#bacdcc;color:#536a74}
#learn .finish-message{font-size:12px;color:#527478;margin-top:8px}
#learn .reader-empty{padding:45px 34px;background:#fbfdff;color:#263f56;min-height:360px}
#learn .reader-empty h2{font-size:28px;color:#173449}
#learn .reader-empty p{color:#557080}
#learn .empty-cta{border:0;background:#0d8076;color:#fff;padding:13px 16px;font:inherit;border-radius:11px;font-weight:800;cursor:pointer}
#learn .module-switch{display:flex;justify-content:space-between;gap:11px;border-top:1px solid #e2eaef;background:#fbfdff;padding:18px 28px}
#learn .module-switch button{font:inherit;background:#f0f7f9;color:#1c6670;border:1px solid #c8e3e5;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:800;cursor:pointer}
#learn .module-switch button:disabled{opacity:.35;cursor:not-allowed}
#learn .course-banner{border-radius:11px;border:1px solid #dce9ec;background:#f4f9fb;color:#537280;padding:12px 16px;font-size:12px;line-height:1.6;margin:11px 0}
@media(max-width:1150px){#learn .course-shell{grid-template-columns:220px minmax(0,1fr)}#learn .course-intro{padding:20px}#learn .journey-body{padding:6px 23px 25px}}
@media(max-width:890px){#learn .course-shell{grid-template-columns:minmax(0,1fr)}#learn .course-rail{position:static;max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}#learn .rail-heading,#learn .course-legend{grid-column:1/-1}#learn .rail-item{margin:0}}
@media(max-width:560px){#learn .course-rail{grid-template-columns:minmax(0,1fr)}#learn .course-intro{display:block}#learn .course-count{display:inline-block;margin-top:12px}#learn .reader-header{padding:22px 18px}#learn .reader-title{font-size:24px}#learn .steps-overview{padding:17px}#learn .journey-body{padding:3px 14px 18px}#learn .journey-stage{grid-template-columns:32px minmax(0,1fr);gap:9px;padding-top:17px}#learn .stage-number{width:31px;height:31px;font-size:12px}#learn .journey-stage:not(:last-child) .stage-mark:after{top:37px;left:15px}#learn .stage-heading h3{font-size:18px}#learn .bi-pair{padding:13px}#learn .module-switch{padding:15px}}
@media(prefers-reduced-motion:reduce){#learn *{scroll-behavior:auto!important;transition:none!important}}