.htp-core-wrap, .htp-student-dashboard, .htp-lesson-experience, .htp-login-card, .htp-core-notice { --core-navy:#092f68; --core-coral:#c74646; --core-yellow:#f7b733; --core-sky:#dff3fb; --core-cream:#fff9ef; --core-border:#dbe8ef; }
.htp-kicker { display:inline-block; margin-bottom:12px; color:var(--core-coral); font-size:.76rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.htp-core-button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:11px 22px; border:0; border-radius:999px; color:#fff!important; background:var(--core-navy); box-shadow:0 12px 26px rgba(9,47,104,.18); font:inherit; font-weight:900; text-decoration:none; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.htp-core-button:hover { transform:translateY(-2px); box-shadow:0 17px 34px rgba(9,47,104,.24); }
.htp-core-button:focus-visible,.htp-quiz input:focus-visible+span { outline:3px solid rgba(247,183,51,.65); outline-offset:3px; }
.htp-core-button:disabled { opacity:.5; cursor:not-allowed; }
.htp-core-button--coral { background:var(--core-coral); }
.htp-core-notice { max-width:760px; padding:38px; border:1px solid #dbe8ef; border-radius:28px; background:#fff9ef; }
.htp-core-translation { color:#6f8094; font-size:.9rem; font-style:italic; }

.htp-unit-hero { display:grid; grid-template-columns:1fr auto; align-items:end; gap:36px; margin-bottom:42px; padding:44px; border-radius:34px; color:#fff; background:linear-gradient(135deg,#092f68,#061f45); }
.htp-unit-hero h2 { margin:0;color:#fff; font-size:clamp(2.5rem,5vw,4.7rem); }
.htp-unit-hero p { margin:4px 0 0;color:#cce2f6; }
.htp-unit-mission { max-width:310px; padding:20px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.08); }
.htp-unit-mission strong,.htp-unit-mission span { display:block; }
.htp-unit-mission span { color:#cce2f6; }
.htp-lesson-grid { display:grid; gap:18px; }
.htp-lesson-card { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:22px; padding:24px; border:1px solid var(--core-border); border-radius:24px; background:#fff; box-shadow:0 10px 30px rgba(9,47,104,.05); }
.htp-lesson-card.is-done { border-color:#a6d9bb; background:#f5fff8; }
.htp-lesson-card.is-locked { opacity:.62; background:#f5f7f8; }
.htp-lesson-number { display:grid; place-items:center; width:58px; height:58px; border-radius:19px; color:#fff; background:var(--core-coral); font-family:"Baloo 2",sans-serif; font-size:1.25rem; font-weight:900; }
.htp-lesson-card.is-done .htp-lesson-number { background:#1f774c; }
.htp-lesson-card h3 { margin:0 0 3px; }
.htp-lesson-card p { margin:0; color:#66778b; }
.htp-lesson-card small { display:block; margin-top:4px; color:#8a98a8; }
.htp-lesson-card a { font-weight:900; text-decoration:none; }
.htp-lock { color:#718091; font-weight:800; }

.htp-student-hello { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:28px; padding:42px; border:1px solid rgba(247,183,51,.3); border-radius:30px; background:radial-gradient(circle at 82% 10%,rgba(247,183,51,.28),transparent 34%),var(--core-cream); }
.htp-student-hello::before { content:"Bonjour"; position:absolute; right:190px; bottom:-28px; color:rgba(245,109,104,.08); font-family:"Baloo 2",sans-serif; font-size:5.4rem; font-weight:900; transform:rotate(-5deg); }
.htp-student-hello>* { position:relative; z-index:1; }
.htp-student-hello h2 { margin-bottom:6px; }
.htp-student-hello p { margin:0; }
.htp-xp { min-width:160px; padding:20px; border-radius:22px; color:#fff; background:var(--core-navy); text-align:center; }
.htp-xp strong,.htp-xp span { display:block; }
.htp-xp strong { color:var(--core-yellow); font-size:1.7rem; }
.htp-continue-card { display:flex; align-items:center; justify-content:space-between; gap:26px; padding:34px; border-radius:30px; color:#fff; background:linear-gradient(135deg,#0c3977,#0a2856); box-shadow:0 24px 60px rgba(9,47,104,.18); }
.htp-continue-card span { color:#a9c9e8; font-size:.75rem; font-weight:900; letter-spacing:.08em; }
.htp-continue-card h3 { margin:5px 0 0; color:#fff; }
.htp-continue-card small { display:block; margin-top:5px; color:#a9c9e8; }
.htp-progress-panel { margin-top:24px; padding:32px; border:1px solid var(--core-border); border-radius:30px; background:#fff; box-shadow:0 14px 42px rgba(9,47,104,.06); }
.htp-progress-panel--unit-2 { background:linear-gradient(145deg,#fff,#f4fbfd); }
.htp-progress-panel--unit-2 .htp-progress-track span { background:linear-gradient(90deg,#2a8fb8,#72c7df); }
.htp-progress-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.htp-progress-heading h3 { margin:0; }
.htp-progress-heading>strong { color:var(--core-navy); }
.htp-progress-track { height:12px; margin:22px 0 28px; overflow:hidden; border-radius:999px; background:#edf3f6; }
.htp-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--core-coral),var(--core-yellow)); }
.htp-dashboard-lessons { display:grid; gap:12px; }
.htp-dashboard-lesson { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:16px; padding:16px; border:1px solid var(--core-border); border-radius:19px; }
.htp-dashboard-lesson.is-locked { color:#798797; background:#f5f7f8; }
.htp-dashboard-lesson.is-done { border-color:#b7dfc6; background:#f4fff8; }
.htp-dashboard-lesson__number { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; color:#fff; background:var(--core-coral); font-weight:900; }
.htp-dashboard-lesson.is-locked .htp-dashboard-lesson__number { background:#9ca8b4; }
.htp-dashboard-lesson.is-done .htp-dashboard-lesson__number { background:#1f774c; }
.htp-dashboard-lesson h4 { margin:0; color:var(--core-navy); font-size:1.03rem; }
.htp-dashboard-lesson small { color:#748397; }
.htp-status { padding:8px 12px; border-radius:999px; font-size:.83rem; font-weight:900; text-decoration:none; }
.htp-status--open { color:#fff!important; background:var(--core-navy); }
.htp-status--done { color:#17643b!important; background:#dff6e8; }
.htp-status--locked { color:#6f7c89; background:#e8edef; }
.htp-dashboard-links { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:22px; }
.htp-dashboard-links a { display:flex; flex-direction:column; min-height:130px; justify-content:center; padding:24px; border:1px solid var(--core-border); border-radius:24px; color:var(--core-navy); background:#fff; box-shadow:0 10px 30px rgba(9,47,104,.05); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.htp-dashboard-links a:hover { transform:translateY(-3px); border-color:#b8d9e8; }
.htp-dashboard-links strong { font-size:1.12rem; }
.htp-dashboard-links span { color:#66778b; }
.htp-badges { margin-top:42px; }
.htp-badge-row { display:flex; flex-wrap:wrap; gap:12px; }
.htp-badge-row span { padding:10px 16px; border:1px dashed var(--core-border); border-radius:999px; color:#8793a0; }
.htp-badge-row .is-earned { border-style:solid; color:#7a5200; background:#fff3c7; }

.htp-corrections { scroll-margin-top:110px; margin-top:42px; padding:32px; border:1px solid var(--core-border); border-radius:30px; background:linear-gradient(145deg,#fff,#f7fbfd); box-shadow:0 16px 46px rgba(9,47,104,.07); }
.htp-corrections__heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
.htp-corrections__heading h3,.htp-corrections__heading p { margin:0; }
.htp-corrections__heading p { color:#748397; font-size:.9rem; font-style:italic; }
.htp-corrections__count { display:grid; place-items:center; width:50px; height:50px; border-radius:17px; color:#fff; background:var(--core-coral); font-weight:900; }
.htp-correction-list { display:grid; gap:16px; }
.htp-correction-card { padding:24px; border:1px solid var(--core-border); border-radius:22px; background:#fff; }
.htp-correction-card.is-approved { border-color:#abd9bc; background:linear-gradient(145deg,#f4fff8,#fff); }
.htp-correction-card.is-pending { border-color:#f1d28b; background:linear-gradient(145deg,#fffaf0,#fff); }
.htp-correction-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.htp-correction-card__top strong,.htp-correction-card__top small { display:block; }
.htp-correction-card__top small,.htp-correction-date { color:#748397; }
.htp-correction-status { padding:8px 12px; border-radius:999px; color:#765317; background:#fff0c7; font-size:.82rem; font-weight:900; white-space:nowrap; }
.is-approved .htp-correction-status { color:#17643b; background:#dff6e8; }
.htp-correction-text { margin:20px 0; padding:20px; border-left:5px solid var(--core-coral); border-radius:0 18px 18px 0; background:#fff; }
.htp-correction-text>span { color:var(--core-coral); font-size:.78rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.htp-correction-text p { margin:8px 0 0; }
.htp-correction-date { display:block; margin-top:14px; font-size:.8rem; }
.htp-correction-wait { margin:18px 0 0; color:#6f8094; }
.htp-correction-empty { display:flex; flex-direction:column; padding:24px; border:1px dashed var(--core-border); border-radius:20px; color:#718091; background:#fbfdfe; }

.htp-lesson-breadcrumb { display:flex; justify-content:space-between; gap:20px; margin-bottom:30px; color:#64758a; font-size:.85rem; font-weight:800; }
.htp-lesson-breadcrumb a { text-decoration:none; }
.htp-discovery { position:relative; overflow:hidden; padding:clamp(24px,5vw,58px); border:1px solid var(--core-border); border-radius:34px; background:linear-gradient(145deg,#fff 0 74%,#f4fbfd 100%); box-shadow:0 20px 60px rgba(9,47,104,.07); }
.htp-discovery::after { content:""; position:absolute; right:-100px; top:-100px; width:240px; height:240px; border:40px solid rgba(223,243,251,.75); border-radius:50%; pointer-events:none; }
.htp-discovery>* { position:relative; z-index:1; }
.htp-discovery h2 { font-size:clamp(2.2rem,5vw,4.3rem); }
.htp-discovery h3 { margin-top:38px; }
.htp-lesson-lead { max-width:760px; color:#3e5874; font-size:1.15rem; font-weight:700; }
.htp-objectives { margin:28px 0; padding:24px 28px; border:1px solid #cce6f0; border-radius:22px; background:linear-gradient(135deg,#edf9fd,#fff); }
.htp-objectives>strong { color:var(--core-navy); font-size:1.1rem; }
.htp-objectives ul { margin-bottom:0; }
.htp-language-table { margin:22px 0; padding:20px 24px; border-radius:20px; background:var(--core-sky); }
.htp-language-table p { margin:7px 0; }
.htp-conjugation-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0; }
.htp-conjugation-grid>div { padding:22px; border:1px solid var(--core-border); border-radius:20px; background:#fbfdfe; }
.htp-conjugation-grid strong { color:var(--core-navy); }
.htp-vocab-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:28px 0; }
.htp-vocab-grid div { padding:18px; border-radius:18px; background:var(--core-sky); }
.htp-vocab-grid strong,.htp-vocab-grid small { display:block; }
.htp-vocab-grid small { color:#537089; }
.htp-example { margin:26px 0; padding:24px; border-left:5px solid var(--core-yellow); border-radius:0 20px 20px 0; background:var(--core-cream); }
.htp-example p { margin:5px 0; }
.htp-mission { margin-top:34px; padding:26px; border-radius:22px; color:#fff; background:var(--core-navy); }
.htp-mission strong { color:var(--core-yellow); }

.htp-learning-path { position:sticky; top:12px; z-index:8; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 24px; padding:9px; border:1px solid rgba(9,47,104,.1); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 12px 34px rgba(9,47,104,.09); backdrop-filter:blur(14px); }
.htp-learning-path a { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:7px 12px; border-radius:15px; color:var(--core-navy); font-size:.84rem; font-weight:900; text-decoration:none; }
.htp-learning-path a:hover { background:var(--core-sky); }
.htp-learning-path span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#fff; background:var(--core-coral); }
.htp-lesson-visual { position:relative; overflow:hidden; margin:0 0 30px; border-radius:34px; background:var(--core-sky); box-shadow:0 24px 60px rgba(9,47,104,.13); }
.htp-lesson-visual img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.htp-lesson-visual figcaption { position:absolute; right:20px; bottom:20px; max-width:min(520px,calc(100% - 40px)); padding:16px 20px; border:1px solid rgba(255,255,255,.7); border-radius:18px; color:var(--core-navy); background:rgba(255,251,243,.92); box-shadow:0 10px 32px rgba(9,47,104,.12); font-weight:800; backdrop-filter:blur(10px); }
.htp-lesson-visual figcaption span { display:block; margin-bottom:4px; color:var(--core-coral); font-size:.73rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.htp-deep-dive { margin-top:34px; padding:clamp(26px,5vw,56px); border:1px solid var(--core-border); border-radius:34px; background:linear-gradient(145deg,#fff,#f8fcfe); box-shadow:0 20px 55px rgba(9,47,104,.07); scroll-margin-top:92px; }
.htp-deep-dive>h2 { max-width:800px; font-size:clamp(2rem,4vw,3.2rem); }
.htp-deep-dive>h3 { margin-top:36px; }
.htp-dialogue,.htp-story { display:grid; gap:10px; margin:26px 0; padding:26px; border-radius:24px; background:var(--core-navy); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.htp-dialogue p,.htp-story p { margin:0; padding:12px 15px; border-radius:14px; color:#fff; background:rgba(255,255,255,.08); }
.htp-dialogue strong,.htp-story strong { color:var(--core-yellow); }
.htp-teacher-note { position:relative; margin:26px 0; padding:24px 26px 24px 72px; border:1px solid #f3c6c2; border-radius:22px; background:#fff5f3; }
.htp-teacher-note::before { content:"💡"; position:absolute; left:24px; top:24px; font-size:1.8rem; }
.htp-teacher-note strong { color:#9d3c3a; }
.htp-teacher-note p { margin:6px 0 0; }
.htp-grammar-table { width:100%; margin:24px 0; border-spacing:0; border-collapse:separate; overflow:hidden; border:1px solid var(--core-border); border-radius:20px; background:#fff; }
.htp-grammar-table th,.htp-grammar-table td { padding:14px 16px; border-right:1px solid var(--core-border); border-bottom:1px solid var(--core-border); text-align:left; }
.htp-grammar-table th:last-child,.htp-grammar-table td:last-child { border-right:0; }
.htp-grammar-table tbody tr:last-child td { border-bottom:0; }
.htp-grammar-table th { color:#fff; background:var(--core-navy); font-size:.86rem; }
.htp-grammar-table tbody tr:nth-child(even) { background:#f5fbfd; }
.htp-pronunciation,.htp-error { padding:18px 22px; border-left:5px solid var(--core-yellow); border-radius:0 18px 18px 0; background:var(--core-cream); }
.htp-practice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.htp-practice-grid article { padding:22px; border:1px solid var(--core-border); border-radius:22px; background:#fff; box-shadow:0 10px 26px rgba(9,47,104,.05); }
.htp-practice-grid h3 { margin:0 0 10px; font-size:1.05rem; }
.htp-practice-grid details { margin-top:14px; border-top:1px dashed var(--core-border); }
.htp-practice-grid summary { padding-top:13px; color:var(--core-coral); font-weight:900; cursor:pointer; }
.htp-memory { margin-top:28px; padding:clamp(26px,5vw,46px); border-radius:30px; color:#fff; background:linear-gradient(135deg,var(--core-navy),#164f8f); scroll-margin-top:92px; box-shadow:0 20px 50px rgba(9,47,104,.18); }
.htp-memory h2,.htp-memory strong { color:var(--core-yellow); }
.htp-memory .htp-kicker { color:#ffd9d5; }
.htp-memory .htp-error { color:var(--core-navy); background:#fff; }
.htp-number-line { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:24px 0; }
.htp-number-line span { padding:16px 10px; border-radius:18px; color:var(--core-navy); background:var(--core-sky); text-align:center; }
.htp-family-tree { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.htp-family-tree div { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--core-border); border-radius:18px; background:#fff; }
.htp-family-tree span { font-size:1.8rem; }
.htp-speech-plan { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0; }
.htp-speech-plan article { position:relative; padding:24px 18px 20px; border-radius:22px; background:var(--core-sky); }
.htp-speech-plan article>span { display:grid; place-items:center; width:36px; height:36px; margin-bottom:13px; border-radius:50%; color:#fff; background:var(--core-coral); font-weight:950; }
.htp-speech-plan h3 { margin:0 0 8px; font-size:1rem; }
.htp-speech-plan p { margin:0; }
.htp-rehearsal { display:grid; gap:12px; }
.htp-rehearsal li { padding:16px 18px; border-radius:16px; background:var(--core-sky); }
.htp-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0; }
.htp-checklist label { padding:16px 18px; border:1px solid #cce6f0; border-radius:16px; background:#f4fbfd; }
.htp-keyword-card { margin:22px 0; padding:24px; border:2px dashed #e4a7a3; border-radius:22px; background:#fff8f6; }
.htp-pronunciation-lab { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:28px; margin:30px 0; padding:clamp(24px,4vw,40px); border:1px solid #b9dce9; border-radius:30px; background:linear-gradient(135deg,#edf9fd,#fff); box-shadow:0 16px 42px rgba(9,47,104,.07); }
.htp-pronunciation-lab h2 { margin:4px 0 8px; font-size:clamp(1.7rem,3vw,2.5rem); }
.htp-pronunciation-list { display:grid; gap:10px; }
.htp-pronunciation-list article { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid rgba(9,47,104,.1); border-radius:16px; background:#fff; }
.htp-pronunciation-list p { margin:0; color:var(--core-navy); font-weight:850; }
.htp-pronunciation-list article>div { display:flex; flex-shrink:0; gap:7px; }
.htp-speak-button { min-height:38px; padding:7px 12px; border:0; border-radius:999px; color:#fff; background:var(--core-navy); font-size:.78rem; font-weight:900; cursor:pointer; }
.htp-speak-button--slow { color:var(--core-navy); background:var(--core-yellow); }
.htp-speak-button:hover,.htp-speak-button.is-speaking { transform:translateY(-1px); box-shadow:0 7px 18px rgba(9,47,104,.18); }
.htp-speak-button.is-speaking::after { content:" · ▶"; }
.htp-voice-note { grid-column:1/-1; margin:0; padding:12px 15px; border-radius:14px; color:#7e2222; background:#ffe2e0; font-weight:800; }
.htp-preference-scale,.htp-frequency-line { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:24px 0; }
.htp-preference-scale span,.htp-frequency-line span { padding:15px 8px; border-radius:16px; color:var(--core-navy); background:var(--core-sky); text-align:center; font-weight:900; }
.htp-preference-scale strong,.htp-frequency-line strong { display:block; margin-top:4px; font-size:.82rem; }
.htp-preference-scale span:first-child,.htp-frequency-line span:first-child { color:#fff; background:#17835b; }
.htp-preference-scale span:last-child,.htp-frequency-line span:last-child { color:#fff; background:#c74646; }
.htp-time-triad { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:26px 0; }
.htp-time-triad article { padding:24px; border-radius:22px; color:#fff; background:var(--core-navy); }
.htp-time-triad article:first-child { background:#a84b15; }
.htp-time-triad article:last-child { background:#16778d; }
.htp-time-triad span { color:var(--core-yellow); font-size:.75rem; font-weight:950; letter-spacing:.08em; }
.htp-time-triad h3 { margin:8px 0; color:#fff; font-size:1.05rem; }
.htp-time-triad p { margin:0; }
.htp-day-timeline { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:26px 0; }
.htp-day-timeline span { display:grid; place-items:center; min-height:80px; padding:10px 5px; border-radius:16px; color:#fff; background:var(--core-navy); font-weight:950; text-align:center; }
.htp-day-timeline span:nth-child(even) { background:var(--core-coral); }
.htp-day-timeline strong { display:block; color:#fff; font-size:.72rem; }

/* Unit 5–6 visual learning boards. Each board turns a grammar idea into a
   short scene that can be scanned before the learner reads the explanation. */
.htp-route-strip,.htp-weather-choice,.htp-story-sequence,.htp-shop-scene,.htp-food-categories,.htp-recipe-steps,.htp-menu-board { display:grid; gap:12px; margin:26px 0; }
.htp-route-strip { grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; }
.htp-route-strip span,.htp-weather-choice span,.htp-story-sequence span,.htp-shop-scene span,.htp-food-categories span,.htp-recipe-steps span,.htp-menu-board span { display:flex; min-height:112px; align-items:center; justify-content:center; flex-direction:column; gap:7px; padding:18px 12px; border:1px solid rgba(9,47,104,.1); border-radius:22px; color:var(--core-navy); background:#fff; box-shadow:0 10px 25px rgba(9,47,104,.06); text-align:center; font-size:1.85rem; }
.htp-route-strip strong,.htp-weather-choice strong,.htp-story-sequence strong,.htp-shop-scene strong,.htp-food-categories strong,.htp-recipe-steps strong,.htp-menu-board strong { display:block; color:var(--core-navy); font-size:.98rem; line-height:1.25; }
.htp-route-strip small,.htp-weather-choice small,.htp-story-sequence small,.htp-shop-scene small,.htp-food-categories small,.htp-recipe-steps small,.htp-menu-board small { color:#60748b; font-size:.78rem; line-height:1.35; }
.htp-route-strip b { color:var(--core-coral); font-size:1.5rem; text-align:center; }
.htp-route-strip span:first-child,.htp-route-strip span:last-child { background:var(--core-sky); }
.htp-weather-choice,.htp-shop-scene,.htp-menu-board { grid-template-columns:repeat(4,1fr); }
.htp-weather-choice span:nth-child(1) { background:#fff8d8; }
.htp-weather-choice span:nth-child(2) { background:#e8f5fb; }
.htp-weather-choice span:nth-child(3) { background:#f0f1ff; }
.htp-weather-choice span:nth-child(4) { background:#eaf8f5; }
.htp-story-sequence,.htp-food-categories,.htp-recipe-steps { grid-template-columns:repeat(5,1fr); counter-reset:step; }
.htp-story-sequence span { position:relative; min-height:132px; border:0; color:#fff; background:linear-gradient(145deg,var(--core-navy),#176384); }
.htp-story-sequence span:nth-child(even) { background:linear-gradient(145deg,#b43d45,var(--core-coral)); }
.htp-story-sequence strong,.htp-story-sequence small { color:#fff; }
.htp-story-sequence span:not(:last-child)::after { content:"→"; position:absolute; z-index:2; right:-20px; top:45%; width:27px; height:27px; border-radius:50%; color:var(--core-navy); background:var(--core-yellow); font-size:.95rem; line-height:27px; }
.htp-shop-scene span { position:relative; padding-top:27px; background:linear-gradient(180deg,#fff,#fff7f5); }
.htp-shop-scene span::before { content:counter(step); counter-increment:step; position:absolute; left:12px; top:12px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#fff; background:var(--core-coral); font-size:.72rem; font-weight:950; }
.htp-shop-scene { counter-reset:step; }
.htp-food-categories span { min-height:105px; background:var(--core-sky); }
.htp-food-categories span:nth-child(even) { background:#fff2df; }
.htp-recipe-steps span { position:relative; min-height:106px; color:var(--core-coral); background:#fff8f6; font-size:1.4rem; font-weight:950; }
.htp-recipe-steps span strong { font-size:.9rem; }
.htp-menu-board { padding:16px; border-radius:28px; color:#fff; background:linear-gradient(135deg,var(--core-navy),#123e71); }
.htp-menu-board span { min-height:118px; border-color:rgba(255,255,255,.17); color:#fff; background:rgba(255,255,255,.09); box-shadow:none; }
.htp-menu-board strong { color:var(--core-yellow); }
.htp-menu-board small { color:#e7f6fb; }

.htp-adventure-map { overflow:hidden; margin:28px 0 34px; border:1px solid var(--core-border); border-radius:32px; background:#fff; box-shadow:0 20px 52px rgba(9,47,104,.12); }
.htp-adventure-map img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.htp-adventure-map figcaption { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; color:#fff; background:var(--core-navy); }
.htp-adventure-map figcaption span { display:block; color:var(--core-yellow); font-size:.72rem; font-weight:950; letter-spacing:.09em; }
.htp-adventure-map figcaption strong { display:block; margin-top:4px; color:#fff; font-size:1.12rem; }
.htp-adventure-map figcaption small { max-width:500px; color:#d9eaf6; line-height:1.5; }

.htp-story-beat { overflow:hidden; display:grid; grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr); margin:34px 0; border:1px solid rgba(9,47,104,.13); border-radius:30px; background:#fff; box-shadow:0 20px 48px rgba(9,47,104,.11); }
.htp-story-beat img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.htp-story-beat>div { display:flex; justify-content:center; flex-direction:column; padding:clamp(24px,4vw,42px); background:radial-gradient(circle at 100% 0,rgba(255,210,61,.28),transparent 28%),linear-gradient(145deg,#fff,#f1faff); }
.htp-story-beat>div>span { color:var(--core-coral); font-size:.72rem; font-weight:950; letter-spacing:.09em; }
.htp-story-beat h2 { margin:9px 0 12px; font-size:clamp(1.75rem,3vw,2.55rem); }
.htp-story-beat h2 small { color:#4c6a82; font-size:.62em; }
.htp-story-beat p { margin:0; color:#536c84; font-weight:750; }
.htp-story-beat__prompts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:22px; }
.htp-story-beat__prompts b { padding:11px 9px; border-radius:14px; color:var(--core-navy); background:#fff; box-shadow:0 7px 18px rgba(9,47,104,.07); font-size:.78rem; text-align:center; }

.htp-focus-quest { overflow:hidden; display:grid; grid-template-columns:minmax(190px,.75fr) minmax(0,1.65fr); gap:22px; margin:34px 0; padding:26px; border:1px solid #b8ddea; border-radius:28px; background:radial-gradient(circle at 0 0,#fff7d4,transparent 28%),linear-gradient(135deg,#effaff,#fff); box-shadow:0 16px 38px rgba(9,47,104,.08); }
.htp-focus-quest__intro span { color:var(--core-coral); font-size:.72rem; font-weight:950; letter-spacing:.08em; }
.htp-focus-quest__intro h2 { margin:8px 0; font-size:clamp(1.55rem,3vw,2.3rem); }
.htp-focus-quest__intro p { margin:0; color:#516a83; }
.htp-focus-quest__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.htp-focus-quest__steps button { position:relative; min-height:116px; padding:18px 13px; border:1px solid rgba(9,47,104,.12); border-radius:19px; color:var(--core-navy); background:#fff; font:inherit; font-weight:850; cursor:pointer; text-align:left; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.htp-focus-quest__steps button:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(9,47,104,.11); }
.htp-focus-quest__steps button b { display:grid; place-items:center; width:28px; height:28px; margin-bottom:10px; border-radius:50%; color:#fff; background:var(--core-coral); font-size:.75rem; }
.htp-focus-quest__steps button em { position:absolute; right:11px; top:11px; display:none; color:#157249; font-size:1.15rem; font-style:normal; }
.htp-focus-quest__steps button.is-done { border-color:#8bd0ac; background:#eaf9f1; }
.htp-focus-quest__steps button.is-done em { display:block; }
.htp-focus-quest__status { grid-column:1/-1; display:flex; align-items:center; gap:13px; padding:12px 15px; border-radius:15px; color:#fff; background:var(--core-navy); }
.htp-focus-quest__status span { display:grid; place-items:center; min-width:52px; height:34px; border-radius:999px; color:var(--core-navy); background:var(--core-yellow); font-weight:950; }
.htp-focus-quest__status strong { color:#fff; font-size:.88rem; }
.htp-focus-quest.is-complete .htp-focus-quest__status { background:#157249; }

.htp-mission-game { position:relative; overflow:hidden; margin:38px 0 0; padding:clamp(24px,4vw,44px); border:1px solid rgba(9,47,104,.13); border-radius:36px; background:radial-gradient(circle at 92% 4%,rgba(255,210,61,.38),transparent 22%),linear-gradient(145deg,#eef9fd,#fff8ec); box-shadow:0 26px 65px rgba(9,47,104,.14); }
.htp-mission-game::before { content:""; position:absolute; inset:0; opacity:.045; background-image:radial-gradient(var(--core-navy) 1.2px,transparent 1.2px); background-size:18px 18px; pointer-events:none; }
.htp-mission-game>header,.htp-mission-game>footer,.htp-game-path,.htp-challenge-card { position:relative; z-index:1; }
.htp-mission-game>header { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.htp-game-label { color:var(--core-coral); font-size:.74rem; font-weight:950; letter-spacing:.1em; }
.htp-mission-game h2 { max-width:760px; margin:9px 0; font-size:clamp(2rem,4vw,3.3rem); }
.htp-mission-game header p { max-width:760px; margin:0; color:#4c6680; font-size:1.05rem; }
.htp-game-score { flex:0 0 112px; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:112px; border:8px solid #d9edf5; border-radius:50%; color:#fff; background:var(--core-navy); box-shadow:0 12px 30px rgba(9,47,104,.18); }
.htp-game-score strong { display:block; color:var(--core-yellow); font-size:1.55rem; line-height:1; }
.htp-game-score span { margin-top:5px; color:#dcecf7; font-size:.72rem; font-weight:900; }
.htp-mission-progress { overflow:hidden; height:12px; margin-top:24px; border-radius:999px; background:#dcecf3; box-shadow:inset 0 1px 3px rgba(9,47,104,.15); }
.htp-mission-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--core-coral),var(--core-yellow)); transition:width .35s ease; }
.htp-game-path { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:34px 0; counter-reset:mission; }
.htp-game-step { position:relative; overflow:hidden; min-height:250px; padding:24px 18px 20px; border:2px solid transparent; border-radius:25px; color:var(--core-navy); background:#fff; box-shadow:0 12px 28px rgba(9,47,104,.08); font:inherit; cursor:pointer; text-align:left; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.htp-game-step::after { content:""; position:absolute; left:0; right:0; bottom:0; height:7px; background:var(--core-coral); }
.htp-game-step:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 18px 34px rgba(9,47,104,.15); }
.htp-game-step:nth-child(even):hover { transform:translateY(-5px) rotate(.3deg); }
.htp-game-step__icon { display:block; margin-bottom:17px; font-size:2.55rem; }
.htp-game-step b { display:block; color:var(--core-coral); font-size:.68rem; letter-spacing:.09em; }
.htp-game-step strong { display:block; margin:7px 0 9px; color:var(--core-navy); font-size:1.14rem; }
.htp-game-step small { display:block; color:#5c7187; font-size:.86rem; line-height:1.5; }
.htp-game-step em { position:absolute; right:14px; top:14px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:#5f7185; font-style:normal; font-weight:950; }
.htp-game-step.is-done { border-color:#58bd88; background:linear-gradient(180deg,#fff,#eaf9f1); }
.htp-game-step.is-done::after,.htp-game-step.is-done em { background:#17835b; }
.htp-game-step:disabled { cursor:not-allowed; filter:grayscale(.65); opacity:.48; transform:none; }
.htp-game-step:disabled:hover { transform:none; box-shadow:0 12px 28px rgba(9,47,104,.08); }
.htp-mission-console { position:relative; margin:-8px 0 28px; padding:clamp(22px,4vw,38px); border:2px solid #83c8df; border-radius:28px; background:linear-gradient(145deg,#eefaff,#fff); box-shadow:0 18px 45px rgba(9,47,104,.12); }
.htp-mission-console[hidden] { display:none; }
.htp-mission-console__top { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.htp-mission-console__top span { color:var(--core-coral); font-size:.75rem; font-weight:950; letter-spacing:.09em; }
.htp-mission-console__top button { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:var(--core-navy); font-size:1.35rem; cursor:pointer; }
.htp-mission-console h3 { margin:9px 0; font-size:clamp(1.55rem,3vw,2.25rem); }
.htp-mission-console>p { color:#526b82; font-weight:750; }
.htp-mission-question { margin-top:20px; padding:20px; border-radius:20px; background:#fff; }
.htp-mission-question>strong { display:block; color:var(--core-navy); font-size:1.05rem; }
.htp-mission-question>div { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.htp-mission-question button { min-height:64px; padding:12px; border:2px solid #d8e6ec; border-radius:16px; color:var(--core-navy); background:#fff; font:inherit; font-weight:850; cursor:pointer; }
.htp-mission-question button:hover { border-color:#83c8df; background:#eefaff; }
.htp-mission-question button.is-correct { border-color:#58bd88; background:#e6f8ee; }
.htp-mission-question button.is-wrong { border-color:#e06a67; background:#fff0ee; animation:htpShake .4s ease; }
.htp-mission-help { display:flex; align-items:center; gap:14px; margin-top:15px; }
.htp-mission-help button { flex-shrink:0; padding:10px 15px; border:0; border-radius:999px; color:#7c4c00; background:var(--core-yellow); font-weight:900; cursor:pointer; }
.htp-mission-help p { margin:0; color:#526b82; font-weight:800; }
.htp-mission-feedback { min-height:28px; margin:15px 0 0; color:var(--core-navy); font-weight:950; }
.htp-challenge-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:10px 0 28px; padding:22px 24px; border:2px dashed #e09b53; border-radius:23px; background:#fff7e8; }
.htp-challenge-card span { display:block; color:#b65b24; font-size:.7rem; font-weight:950; letter-spacing:.09em; }
.htp-challenge-card strong { display:block; margin-top:7px; color:var(--core-navy); }
.htp-challenge-card .is-drawn strong { color:#8b3c25; font-size:1.02rem; }
.htp-challenge-card button { flex-shrink:0; min-height:44px; padding:10px 18px; border:0; border-radius:999px; color:#fff; background:#a84b15; font-weight:950; cursor:pointer; }
.htp-mission-game>footer { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-top:22px; border-top:1px solid rgba(9,47,104,.12); }
.htp-game-reward { display:flex; align-items:center; gap:13px; }
.htp-game-reward>span { display:grid; place-items:center; width:56px; height:56px; border-radius:18px; background:var(--core-yellow); font-size:1.9rem; transform:rotate(-4deg); }
.htp-game-reward small { display:block; color:#667b90; font-size:.66rem; font-weight:950; letter-spacing:.08em; }
.htp-game-reward strong { color:var(--core-navy); }
.htp-mission-game>footer>p { max-width:510px; margin:0; color:#526a80; font-weight:850; text-align:right; }
.htp-mission-game.is-complete { border-color:#77c99d; background:radial-gradient(circle at 92% 4%,rgba(255,210,61,.5),transparent 22%),linear-gradient(145deg,#eaf9f1,#fffbed); }
.htp-mission-game.is-complete .htp-game-score { border-color:#a7dfbf; background:#14724a; }
.htp-studio-lock { margin:20px 0; padding:15px 18px; border:1px dashed #d58d89; border-radius:16px; color:#7f2929; background:#fff1ef; font-weight:900; }
.htp-recorder.is-unlocked { outline:3px solid rgba(23,131,91,.18); }
.htp-recorder.is-unlocked::before { content:"🏆 Phòng thu đã mở"; display:inline-block; margin-bottom:10px; padding:7px 12px; border-radius:999px; color:#fff; background:#17835b; font-weight:950; }

.htp-mini-game { position:relative; overflow:hidden; margin:38px 0; padding:clamp(24px,4vw,42px); border:2px solid #a9d7e8; border-radius:34px; background:radial-gradient(circle at 100% 0,rgba(255,210,61,.34),transparent 24%),linear-gradient(145deg,#f0fbff,#fff); box-shadow:0 22px 55px rgba(9,47,104,.11); }
.htp-mini-game>header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.htp-mini-label { color:var(--core-coral); font-size:.72rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.htp-mini-game h2 { margin:8px 0; font-size:clamp(1.8rem,3.5vw,2.8rem); }
.htp-mini-game header p { max-width:720px; margin:0; color:#526b82; font-weight:750; }
.htp-mini-xp { flex-shrink:0; padding:11px 15px; border-radius:999px; color:var(--core-navy); background:var(--core-yellow); box-shadow:0 8px 20px rgba(215,160,20,.2); }
.htp-mini-stage { margin:28px 0 22px; }
.htp-mini-game>footer { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:50px; padding-top:18px; border-top:1px solid rgba(9,47,104,.12); }
.htp-mini-game>footer p { margin:0; color:#586f85; font-weight:850; }
.htp-mini-game>footer p.is-success { color:#14724a; }
.htp-mini-game>footer p.is-error { color:#a23535; }
.htp-mini-game.is-completed { border-color:#62bd8a; background:radial-gradient(circle at 100% 0,rgba(255,210,61,.4),transparent 24%),linear-gradient(145deg,#e9f9f0,#fff); }
.htp-mini-game.is-completed::after { content:"✓ XP LƯU"; position:absolute; right:-35px; top:18px; width:145px; padding:7px 0; color:#fff; background:#17835b; font-size:.68rem; font-weight:950; text-align:center; transform:rotate(36deg); }
.htp-mini-game.is-shake { animation:htpShake .4s ease; }
@keyframes htpShake { 25%{transform:translateX(-7px)} 50%{transform:translateX(7px)} 75%{transform:translateX(-4px)} }
.htp-match-board { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.htp-match-column { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.htp-match-card,.htp-order-token,.htp-audio-choice,.htp-sort-item,.htp-timed-choice,.htp-audio-play,.htp-timed-start { min-height:62px; padding:13px 16px; border:2px solid transparent; border-radius:18px; color:var(--core-navy); background:#fff; box-shadow:0 8px 20px rgba(9,47,104,.07); font:inherit; font-weight:900; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.htp-match-card:hover,.htp-order-token:hover,.htp-audio-choice:hover,.htp-sort-item:hover,.htp-timed-choice:hover { transform:translateY(-2px); border-color:#90c9de; }
.htp-match-card--visual { min-height:90px; font-size:2rem; }
.htp-match-card.is-selected,.htp-audio-choice.is-selected,.htp-sort-item.is-selected,.htp-timed-choice.is-selected { border-color:var(--core-coral); background:#fff1ef; }
.htp-match-card.is-matched { border-color:#62bd8a; background:#e5f8ed; opacity:.75; }
.htp-match-card.is-wrong { border-color:#d64c4c; background:#ffe5e3; }
.htp-order-answer,.htp-order-bank { display:flex; align-items:center; align-content:center; flex-wrap:wrap; gap:10px; min-height:96px; padding:16px; border-radius:22px; }
.htp-order-answer { border:2px dashed #75bad5; background:#edf9fd; }
.htp-order-answer:empty::before { content:"Chạm vào các từ để xây dựng câu…"; color:#71869a; font-weight:800; }
.htp-order-bank { margin-top:13px; background:#f7f9fa; }
.htp-order-token { min-height:48px; padding:10px 14px; }
.htp-audio-game { display:grid; grid-template-columns:minmax(190px,.55fr) 1.45fr; gap:18px; }
.htp-audio-play,.htp-timed-start { min-height:88px; border:0; color:#fff; background:linear-gradient(135deg,var(--core-navy),#176887); font-size:1.02rem; }
.htp-audio-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.htp-sort-bank { display:flex; flex-wrap:wrap; gap:10px; min-height:74px; padding:14px; border-radius:20px; background:#f4f7f9; }
.htp-sort-item { min-height:48px; padding:10px 14px; cursor:grab; }
.htp-sort-zones { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:15px; }
.htp-sort-zone { min-height:170px; padding:16px; border:2px dashed #8ac3d9; border-radius:22px; background:#edf9fd; transition:background .15s ease,border-color .15s ease; }
.htp-sort-zone>strong { display:block; margin-bottom:12px; color:var(--core-navy); text-align:center; }
.htp-sort-zone .htp-sort-item { display:block; width:100%; margin-top:8px; cursor:pointer; }
.htp-sort-zone.is-over { border-color:var(--core-coral); background:#fff0ed; }
.htp-timed-top { display:flex; align-items:center; gap:16px; }
.htp-timed-start { flex:1; min-height:64px; }
.htp-timer { display:grid; place-items:center; min-width:118px; min-height:64px; border-radius:18px; color:var(--core-yellow); background:var(--core-navy); font-size:1.5rem; }
.htp-timed-questions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.htp-timed-questions article { padding:16px; border:1px solid var(--core-border); border-radius:20px; background:#fff; }
.htp-timed-questions article>strong { display:block; min-height:48px; color:var(--core-navy); }
.htp-timed-questions article>div { display:grid; gap:7px; margin-top:10px; }
.htp-timed-choice { min-height:44px; padding:9px; box-shadow:none; }
.htp-game-badge { border-color:#d5c8a4!important; background:#fffaf0!important; }
.htp-game-badge.is-earned { border-color:#e3b632!important; background:linear-gradient(135deg,#fff2b8,#fff)!important; }

.htp-quiz,.htp-recorder { margin-top:34px; padding:clamp(24px,5vw,50px); border-radius:34px; background:var(--core-cream); }
.htp-quiz fieldset { margin:22px 0; padding:22px; border:1px solid var(--core-border); border-radius:20px; background:#fff; }
.htp-quiz legend { padding:0 8px; color:var(--core-navy); font-weight:900; }
.htp-quiz label { display:flex; align-items:center; gap:12px; margin:10px 0; padding:11px 14px; border-radius:13px; cursor:pointer; }
.htp-quiz label { border:1px solid transparent; transition:background .15s ease,border-color .15s ease; }
.htp-quiz label:hover { border-color:#c7e2ee; background:var(--core-sky); }
.htp-quiz label:has(input:checked) { border-color:#91cadf; background:var(--core-sky); }
.htp-quiz-result,.htp-recorder__result { margin-top:20px; padding:18px; border-radius:16px; font-weight:800; }
.htp-quiz-result.is-pass,.htp-recorder__result.is-success { color:#145b34; background:#dff6e8; }
.htp-quiz-result.is-fail { color:#7e2222; background:#ffe2e0; }
.htp-recorder__status { display:flex; align-items:center; gap:20px; margin:26px 0; padding:22px; border-radius:20px; color:#fff; background:var(--core-navy); }
.htp-recorder__status strong { min-width:100px; color:var(--core-yellow); font-size:2rem; }
.htp-recorder__actions { display:flex; flex-wrap:wrap; gap:12px; }

.htp-login-card { position:relative; overflow:hidden; display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; padding:56px; border:1px solid var(--core-border); border-radius:36px; background:radial-gradient(circle at 12% 14%,rgba(223,243,251,.8),transparent 30%),linear-gradient(135deg,#fff 0 52%,var(--core-cream) 52%); box-shadow:0 24px 70px rgba(9,47,104,.1); }
.htp-login-card::after { content:"FR"; position:absolute; left:-18px; bottom:-75px; color:rgba(245,109,104,.07); font-family:"Baloo 2",sans-serif; font-size:13rem; font-weight:900; line-height:1; transform:rotate(-8deg); pointer-events:none; }
.htp-login-intro,.htp-login-form-wrap { position:relative; z-index:1; }
.htp-login-intro h2 { font-size:clamp(2.4rem,4.8vw,4.3rem); }
.htp-login-lead { font-size:1.14rem; font-weight:800; }
.htp-login-benefits { display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none; }
.htp-login-benefits li { position:relative; padding-left:30px; }
.htp-login-benefits li::before { content:"✓"; position:absolute; left:0; color:var(--core-coral); font-weight:900; }
.htp-login-form-wrap { padding:30px; border:1px solid rgba(9,47,104,.08); border-radius:26px; background:#fff; box-shadow:0 12px 34px rgba(9,47,104,.07); }
.htp-login-form-title { display:block; margin-bottom:16px; color:var(--core-navy); font-weight:900; }
.htp-login-card form { padding:0; }
.htp-login-card label { display:block; font-weight:800; }
.htp-login-card input[type="text"],.htp-login-card input[type="password"] { width:100%; min-height:52px; padding:10px 14px; border:1px solid var(--core-border); border-radius:14px; background:#fbfdfe; }
.htp-login-card input[type="text"]:focus,.htp-login-card input[type="password"]:focus { border-color:#77bad6; outline:3px solid rgba(119,186,214,.18); background:#fff; }
.htp-login-card input[type="submit"] { min-height:48px; padding:10px 22px; border:0; border-radius:999px; color:#fff; background:var(--core-navy); font-weight:900; }
.htp-login-help { margin:18px 0 0; color:#6f8094; font-size:.86rem; }

@media(max-width:760px){
 .htp-unit-hero,.htp-login-card { grid-template-columns:1fr; }
 .htp-unit-hero { align-items:start; padding:30px; }
 .htp-unit-mission { max-width:none; }
 .htp-login-card { gap:26px; padding:30px; background:linear-gradient(180deg,#fff,var(--core-cream)); }
 .htp-login-form-wrap { padding:22px; }
 .htp-lesson-card { grid-template-columns:58px 1fr; }
 .htp-lesson-card>a,.htp-lesson-card>.htp-lock { grid-column:2; }
 .htp-student-hello,.htp-continue-card { align-items:flex-start; flex-direction:column; }
 .htp-progress-heading { align-items:flex-start; flex-direction:column; }
 .htp-dashboard-lesson { grid-template-columns:48px 1fr; }
 .htp-dashboard-lesson .htp-status { grid-column:2; justify-self:start; }
 .htp-dashboard-links { grid-template-columns:1fr; }
 .htp-dashboard-links a { min-height:104px; }
 .htp-correction-card__top { flex-direction:column; }
 .htp-correction-status { white-space:normal; }
 .htp-vocab-grid { grid-template-columns:1fr; }
 .htp-conjugation-grid { grid-template-columns:1fr; }
 .htp-learning-path { position:static; grid-template-columns:repeat(2,1fr); }
 .htp-practice-grid,.htp-speech-plan { grid-template-columns:repeat(2,1fr); }
 .htp-number-line { grid-template-columns:repeat(2,1fr); }
 .htp-family-tree { grid-template-columns:repeat(2,1fr); }
 .htp-grammar-table { display:block; overflow-x:auto; }
 .htp-pronunciation-lab { grid-template-columns:1fr; }
 .htp-pronunciation-list article { align-items:flex-start; flex-direction:column; }
 .htp-preference-scale,.htp-frequency-line { grid-template-columns:repeat(3,1fr); }
 .htp-day-timeline { grid-template-columns:repeat(4,1fr); }
 .htp-route-strip { grid-template-columns:repeat(4,1fr); }
 .htp-route-strip b { display:none; }
 .htp-weather-choice,.htp-shop-scene,.htp-menu-board { grid-template-columns:repeat(2,1fr); }
 .htp-story-sequence,.htp-food-categories,.htp-recipe-steps { grid-template-columns:repeat(2,1fr); }
 .htp-story-sequence span:not(:last-child)::after { display:none; }
 .htp-adventure-map figcaption,.htp-mission-game>header,.htp-mission-game>footer { align-items:flex-start; flex-direction:column; }
 .htp-story-beat { grid-template-columns:1fr; }
 .htp-story-beat img { min-height:0; aspect-ratio:16/10; }
 .htp-story-beat__prompts { grid-template-columns:repeat(3,1fr); }
 .htp-mission-question>div { grid-template-columns:1fr; }
 .htp-mission-help { align-items:flex-start; flex-direction:column; }
 .htp-focus-quest { grid-template-columns:1fr; }
 .htp-focus-quest__steps { grid-template-columns:repeat(3,1fr); }
 .htp-game-path { grid-template-columns:repeat(2,1fr); }
 .htp-mission-game>footer>p { max-width:none; text-align:left; }
}

/* Bài 1 littérale — 36 sections dans le design validé */
.htp-u1-bai-one-literal .htp-u1-literal-objectives{margin:24px 0}
.htp-u1-bai-one-literal .htp-u1-part-heading{
	margin:30px 0 16px;
	padding:20px 24px;
	border:1px solid #cadbe4;
	border-radius:18px;
	background:#eef5f8;
}
.htp-u1-bai-one-literal .htp-u1-part-heading span{color:#a64046;font-size:.76rem;font-weight:900;letter-spacing:.1em}
.htp-u1-bai-one-literal .htp-u1-part-heading h2{margin:5px 0;color:#17324f}
.htp-u1-bai-one-literal .htp-u1-part-heading p{margin:0;color:#51697b}
.htp-u1-literal-section{
	margin:0 0 18px;
	border:1px solid #d4e1e7;
	border-radius:18px;
	overflow:hidden;
	background:#fff;
}
.htp-u1-literal-section>header{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #d9e4e9;background:#f7fafb}
.htp-u1-literal-section>header>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;color:#fff;background:#c96368;font-weight:900}
.htp-u1-literal-section>header h2{margin:0;color:#17324f;font-size:1.25rem}
.htp-u1-literal-section>div{padding:clamp(18px,3vw,28px);color:#17324f}
.htp-u1-literal-section h3{margin:18px 0 7px;color:#17324f}
.htp-u1-literal-section p{line-height:1.6}
.htp-u1-literal-section .htp-pronunciation-lab{margin-top:22px}
.htp-u1-scene{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:center;padding:20px;border:1px solid #d2e0e7;border-radius:16px;background:#f7fafb}
.htp-u1-scene>span{font-size:3.4rem;text-align:center}
.htp-u1-scene--day{background:linear-gradient(135deg,#f3f8fa,#fff)}
.htp-u1-scene--evening{background:linear-gradient(135deg,#e8f1f6,#fff)}
.htp-u1-definition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.htp-u1-definition-grid article,.htp-u1-id-example{padding:17px;border:1px solid #d5e2e8;border-radius:14px;background:#f8fafb}
.htp-u1-id-example{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0}.htp-u1-id-example strong{width:100%;font-size:1.25rem}
.htp-u1-two-dialogues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.htp-u1-two-dialogues article{padding:18px;border:1px solid #d4e0e6;border-radius:14px;background:#f8fafb}
.htp-u1-two-dialogues p{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:7px 0}
.htp-u1-two-dialogues p span{color:#27343e}
.htp-u1-literal-audio>div{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.htp-u1-age-builder{padding:20px;border:1px solid #d3e0e6;border-radius:15px;background:#f8fafb}
.htp-u1-age-builder label{display:flex;align-items:center;gap:12px;font-weight:800}
.htp-u1-age-builder select{padding:10px 14px;border:1px solid #b9cbd5;border-radius:9px;background:#fff}
.htp-u1-age-builder [data-u1-age-sentence]{font-size:1.35rem;font-weight:900;color:#17324f}
.htp-u1-age-builder button{padding:11px 15px;border:0;border-radius:9px;color:#fff;background:#263f70;font-weight:800}
.htp-u1-literal-evaluation,.htp-u1-literal-boundary{margin-top:24px;padding:24px;border:1px solid #d2e0e6;border-radius:18px;background:#f7fafb}
.htp-u1-literal-boundary{background:#fff}
.htp-u1-exact-mission audio{display:block;width:100%;margin-top:15px}
.htp-u1-exact-mission [data-u1-practice-record-state]{font-weight:750;color:#17324f}
@media(max-width:760px){
	.htp-u1-definition-grid,.htp-u1-two-dialogues{grid-template-columns:1fr}
	.htp-u1-scene{grid-template-columns:1fr}.htp-u1-scene>span{text-align:left}
}

/* Unité 1 — cours complet 2026 */
.htp-expedition-lesson--u1 .htp-u1-title-vi{margin:-.45rem 0 1rem;color:#e55f62;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800}
.htp-u1-patterns{display:grid;gap:1.5rem;margin-top:1.25rem}
.htp-u1-pattern{overflow:hidden;border:1px solid #d9d2c1;border-radius:24px;background:#fff;box-shadow:0 12px 28px rgba(16,52,107,.09)}
.htp-u1-pattern>header{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.25rem;background:#0f3975;color:#fff}
.htp-u1-pattern>header>span{display:grid;width:2.2rem;height:2.2rem;place-items:center;border-radius:50%;background:#ff6b68;font-weight:900}
.htp-u1-pattern>header h3{margin:0;color:#fff;font-size:1.25rem}
.htp-u1-pattern>div{padding:1rem 1.25rem;border-top:1px solid #ece5d6}
.htp-u1-pattern>div>b{display:block;margin-bottom:.45rem;color:#0f3975;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.htp-u1-pattern p{margin:.25rem 0;line-height:1.7;color:#17345a}
.htp-u1-pattern [lang="fr"]{font-size:1.07em;font-weight:650;color:#0b326d}
.htp-u1-pattern .htp-u1-explain{background:#fff6cc}
.htp-u1-pattern .htp-u1-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;background:#f4f8ff}
.htp-u1-pattern .htp-u1-examples>b{grid-column:1/-1}
.htp-u1-pattern .htp-u1-examples p{margin:0;padding:.8rem;border-radius:14px;background:#fff;border:1px solid #dbe6f6}
.htp-u1-pattern .htp-u1-rule{background:#eaf7ef}
.htp-u1-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.htp-u1-quick{padding:1.2rem;border:1px solid #d8e2f1;border-radius:20px;background:linear-gradient(145deg,#fff,#f6f9ff);box-shadow:0 8px 22px rgba(15,57,117,.07)}
.htp-u1-quick>span{color:#e55f62;font-size:.72rem;font-weight:900;letter-spacing:.09em}
.htp-u1-quick h3{margin:.45rem 0;color:#0f3975}
.htp-u1-quick details{margin-top:.85rem;padding:.75rem;border-radius:12px;background:#fff3bc}
.htp-number-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.65rem;margin:1rem 0 1.5rem}
.htp-number-cards span{display:grid;min-height:76px;place-items:center;padding:.55rem;border:1px solid #dbe4f2;border-radius:16px;background:#fff;text-align:center}
.htp-number-cards b{font-size:1.5rem;color:#e55f62}
.htp-number-cards small{font-weight:750;color:#0f3975}
.htp-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.htp-profile-grid article{padding:1.1rem;border-radius:18px;background:#f4f8ff;border:1px solid #dbe4f2}
.htp-profile-grid b,.htp-profile-grid span{display:block;color:#0f3975}
.htp-profile-grid b{font-size:1.15rem}.htp-profile-grid p{line-height:1.55}
.htp-question-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.htp-question-deck span{padding:1rem;border-radius:16px;background:#fff;color:#0f3975;font-weight:800}
.htp-u1-competency-report{margin:2rem 0;padding:clamp(1rem,3vw,2rem);border-radius:28px;background:#fff;border:1px solid #d8d1bd;box-shadow:0 18px 45px rgba(14,48,99,.12)}
.htp-u1-competency-report>header{display:grid;gap:.45rem;margin-bottom:1rem}.htp-u1-competency-report>header>*{margin:0}
.htp-u1-competency-report>header>strong{justify-self:start;padding:.55rem .8rem;border-radius:999px;background:#fff1b8;color:#0f3975}
.htp-u1-competency-list{display:grid;gap:.55rem}
.htp-u1-competency-list article{display:grid;grid-template-columns:2.3rem minmax(0,1fr) auto;align-items:center;gap:.85rem;padding:.85rem;border-radius:15px;background:#f6f9ff}
.htp-u1-competency-list article>b{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:#0f3975;color:#fff}
.htp-u1-competency-list span,.htp-u1-competency-list small{display:block}.htp-u1-competency-list span{font-weight:800;color:#0f3975}.htp-u1-competency-list small{margin-top:.2rem;color:#4d6077}
.htp-u1-competency-list article>strong{max-width:170px;text-align:right;color:#e55f62}
.htp-recorder__text{display:grid;gap:.45rem;margin:1rem 0;padding:1rem;border-radius:18px;background:#f4f8ff;color:#0f3975}
.htp-recorder__text span,.htp-recorder__text small{color:#50657f}.htp-recorder__text textarea{width:100%;min-height:150px;padding:1rem;border:2px solid #c7d7ec;border-radius:14px;background:#fff;color:#0d2f60;font:inherit;line-height:1.6}

@media (max-width:760px){
 .htp-u1-pattern .htp-u1-examples,.htp-u1-quick-grid,.htp-profile-grid,.htp-question-deck{grid-template-columns:1fr}
 .htp-number-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .htp-u1-competency-list article{grid-template-columns:2.2rem minmax(0,1fr)}
 .htp-u1-competency-list article>strong{grid-column:2;text-align:left;max-width:none}
}

/* Core 2.0 — Carnet d'expédition franco-vietnamien */
.htp-expedition-lesson,
.htp-expedition-unit {
 --exp-paper:#fffaf0;
 --exp-paper-deep:#f5ead8;
 --exp-ink:#092f68;
 --exp-coral:#c74646;
 --exp-gold:#e5aa2f;
 --exp-sky:#b9dceb;
 --exp-green:#3e8b71;
 --unit-accent:#c74646;
 position:relative;
 color:var(--exp-ink);
}
.htp-expedition-lesson--u2,.htp-expedition-unit--2{--unit-accent:#a94f6d}
.htp-expedition-lesson--u3,.htp-expedition-unit--3{--unit-accent:#2d745d}
.htp-expedition-lesson--u4,.htp-expedition-unit--4{--unit-accent:#a95518}
.htp-expedition-lesson--u5,.htp-expedition-unit--5{--unit-accent:#286f8a}
.htp-expedition-lesson--u6,.htp-expedition-unit--6{--unit-accent:#7f4885}
.htp-expedition-lesson {
 max-width:1120px;
 margin-inline:auto;
 padding:24px clamp(22px,5vw,70px) 90px clamp(42px,6vw,82px);
 border:1px solid #e4d5bd;
 border-radius:18px 48px 24px 34px;
 background:
  linear-gradient(90deg,transparent 26px,rgba(239,106,99,.34) 27px,transparent 29px),
  repeating-linear-gradient(0deg,rgba(9,47,104,.025) 0 1px,transparent 1px 29px),
  var(--exp-paper);
 box-shadow:0 30px 80px rgba(40,50,61,.13);
}
.htp-expedition-lesson::before {
 content:"";position:absolute;left:10px;top:38px;bottom:38px;width:20px;
 background:radial-gradient(circle,#ad9b82 0 3px,#fffaf0 3.5px 7px,transparent 7.5px) center top/18px 42px repeat-y;
 opacity:.9;pointer-events:none;
}
.htp-expedition-lesson::after {
 content:"CARNET DE MISSION";position:absolute;right:30px;top:10px;color:rgba(9,47,104,.28);
 font-size:.62rem;font-weight:950;letter-spacing:.18em;transform:rotate(1.5deg);
}
.htp-expedition-lesson .htp-lesson-breadcrumb {margin:8px 0 22px;padding-bottom:14px;border-bottom:1px dashed #cdbb9f}
.htp-expedition-lesson .htp-learning-path {
 top:10px;padding:7px;border-color:#d9c9af;border-radius:16px;background:rgba(255,250,240,.94);
 box-shadow:0 10px 32px rgba(57,48,37,.1);
}
.htp-expedition-lesson .htp-learning-path a{position:relative;border-radius:10px}
.htp-expedition-lesson .htp-learning-path a:not(:last-child)::after{content:"";position:absolute;right:-7px;width:13px;border-top:2px dotted #c7a873}
.htp-expedition-lesson .htp-learning-path span{background:var(--unit-accent);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--unit-accent)}

.htp-expedition-lesson .htp-lesson-visual {
 isolation:isolate;overflow:visible;margin:28px 0 52px;padding:12px;border:1px solid #d5c2a4;border-radius:5px;
 background:#fff8e9;box-shadow:6px 10px 0 #eadcc6,0 28px 65px rgba(42,50,61,.18);transform:rotate(-.25deg);
}
.htp-expedition-lesson .htp-lesson-visual::before,.htp-expedition-lesson .htp-lesson-visual::after{
 content:"";position:absolute;z-index:3;top:-15px;width:92px;height:31px;background:rgba(229,199,136,.62);box-shadow:0 1px 3px rgba(0,0,0,.08)
}
.htp-expedition-lesson .htp-lesson-visual::before{left:12%;transform:rotate(-4deg)}
.htp-expedition-lesson .htp-lesson-visual::after{right:10%;transform:rotate(5deg)}
.htp-expedition-lesson .htp-lesson-visual img{aspect-ratio:16/9;border-radius:2px;filter:saturate(.92) contrast(.98)}
.htp-expedition-lesson .htp-lesson-visual figcaption{
 right:24px;bottom:-28px;max-width:570px;padding:15px 20px 15px 25px;border:1px solid #d6c39e;border-radius:3px;
 background:#fff6db;box-shadow:4px 5px 0 rgba(197,169,113,.25);transform:rotate(1deg);
}
.htp-expedition-lesson .htp-lesson-visual figcaption::before{content:"";position:absolute;left:9px;top:15px;bottom:15px;border-left:3px double var(--unit-accent)}
.htp-expedition-lesson .htp-lesson-visual figcaption strong{display:block;margin-top:5px;color:var(--unit-accent);font-size:.77rem}
.htp-scene-hotspots{position:absolute;z-index:4;inset:12px;pointer-events:none}
.htp-scene-hotspots button{
 --x:20%;--y:26%;position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:7px;padding:0;border:0;color:var(--exp-ink);
 background:transparent;font:inherit;font-weight:900;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.htp-scene-hotspots button:nth-child(2){--x:63%;--y:20%}.htp-scene-hotspots button:nth-child(3){--x:48%;--y:60%}
.htp-scene-hotspots button i{display:grid;place-items:center;width:34px;height:34px;border:3px solid #fff;border-radius:50%;color:#fff;background:var(--unit-accent);font-style:normal;box-shadow:0 0 0 2px var(--unit-accent)}
.htp-scene-hotspots button span{max-width:0;overflow:hidden;padding:7px 0;border-radius:3px;background:#fff8e7;white-space:nowrap;opacity:0;transition:max-width .24s ease,padding .24s ease,opacity .2s ease}
.htp-scene-hotspots button:hover span,.htp-scene-hotspots button:focus-visible span,.htp-scene-hotspots button.is-active span{max-width:210px;padding:7px 11px;opacity:1}

.htp-expedition-lesson .htp-pronunciation-lab{
 position:relative;margin:40px 0;padding:clamp(26px,4vw,45px);border:2px solid var(--exp-ink);border-radius:28px 8px 32px 10px;
 background:linear-gradient(135deg,#e7f5f8,#cde7ef);box-shadow:9px 10px 0 rgba(9,47,104,.12);transform:rotate(.15deg)
}
.htp-expedition-lesson .htp-pronunciation-lab::before{content:"LABO SONORE";position:absolute;right:24px;top:15px;padding:5px 9px;border:1px solid var(--exp-ink);font-size:.58rem;font-weight:950;letter-spacing:.14em;transform:rotate(2deg)}
.htp-expedition-lesson .htp-pronunciation-list article{border:1px solid rgba(9,47,104,.18);border-radius:4px 18px 4px 18px;background:rgba(255,255,255,.66);box-shadow:none}
.htp-expedition-lesson .htp-speak-button{position:relative;padding-left:38px;border-radius:4px;background:var(--exp-ink)}
.htp-expedition-lesson .htp-speak-button::before{content:"";position:absolute;left:15px;top:50%;width:8px;height:12px;border-radius:2px;background:#fff;transform:translateY(-50%)}
.htp-expedition-lesson .htp-speak-button::after{content:"";position:absolute;left:21px;top:50%;width:9px;height:9px;border:2px solid #fff;border-left:0;border-bottom:0;border-radius:0 12px 0 0;transform:translateY(-50%) rotate(45deg)}
.htp-expedition-lesson .htp-speak-button--slow{color:var(--exp-ink)!important;background:#fff5d7}
.htp-expedition-lesson .htp-speak-button--slow::before{background:var(--exp-ink)}
.htp-expedition-lesson .htp-speak-button--slow::after{border-color:var(--exp-ink)}

.htp-expedition-lesson .htp-discovery,.htp-expedition-lesson .htp-deep-dive{
 border:0;border-radius:10px;background:transparent;box-shadow:none
}
.htp-expedition-lesson .htp-discovery{padding:36px 6px 30px}
.htp-expedition-lesson .htp-deep-dive{position:relative;padding:clamp(28px,5vw,54px);border:1px solid #d8c6aa;background:rgba(255,255,255,.4);box-shadow:5px 7px 0 #eadbc4}
.htp-expedition-lesson .htp-deep-dive::before{content:"";position:absolute;left:28px;right:28px;top:-7px;border-top:13px solid rgba(229,199,136,.55);transform:rotate(-.4deg)}
.htp-expedition-lesson .htp-objectives{border:0;border-left:7px solid var(--unit-accent);border-radius:3px;background:#fff3cf;box-shadow:4px 5px 0 #ead7ac;transform:rotate(-.25deg)}
.htp-expedition-lesson .htp-language-table{border:1px dashed #83adbd;border-radius:4px 22px 4px 22px;background:rgba(185,220,235,.42)}
.htp-expedition-lesson .htp-conjugation-grid>div,.htp-expedition-lesson .htp-vocab-grid div,.htp-expedition-lesson .htp-practice-grid article{
 border:1px solid #d5c2a5;border-radius:3px;background:#fff8e8;box-shadow:3px 4px 0 #eadbc4;transform:rotate(-.15deg)
}
.htp-expedition-lesson .htp-conjugation-grid>div:nth-child(even),.htp-expedition-lesson .htp-vocab-grid div:nth-child(even),.htp-expedition-lesson .htp-practice-grid article:nth-child(even){transform:rotate(.25deg);background:#edf7f8}
.htp-expedition-lesson .htp-dialogue,.htp-expedition-lesson .htp-story{border:2px solid var(--exp-ink);border-radius:6px 28px 6px 28px;background:var(--exp-ink);box-shadow:7px 8px 0 rgba(9,47,104,.14)}
.htp-expedition-lesson .htp-teacher-note{padding-left:34px;border:1px solid #d7bd87;border-radius:2px;background:#fff2b9;box-shadow:5px 5px 0 rgba(194,159,87,.23);transform:rotate(.25deg)}
.htp-expedition-lesson .htp-teacher-note::before{content:"NOTE DU PROF";left:auto;right:18px;top:-10px;padding:4px 8px;border:1px solid #b58b37;background:#fff7d4;font-size:.58rem;font-weight:950;letter-spacing:.1em;transform:rotate(2deg)}
.htp-expedition-lesson .htp-grammar-table{border-color:#bda987;border-radius:3px;background:#fffdf6;box-shadow:5px 6px 0 #eadbc4}
.htp-expedition-lesson .htp-grammar-table th{background:var(--exp-ink)}
.htp-expedition-lesson .htp-example{border-color:var(--unit-accent);border-radius:2px;background:#fff3d3}
.htp-expedition-lesson .htp-memory{border:2px solid var(--exp-ink);border-radius:50% 8px 50% 8px/8px 50% 8px 50%;background:#fff5d2;box-shadow:8px 9px 0 rgba(9,47,104,.1)}

.htp-expedition-lesson .htp-story-beat{overflow:visible;border:0;border-radius:8px;background:var(--exp-ink);box-shadow:9px 10px 0 rgba(9,47,104,.16)}
.htp-expedition-lesson .htp-story-beat img{border:9px solid #fff8e8;border-radius:2px;transform:rotate(-1.2deg);box-shadow:4px 5px 0 rgba(0,0,0,.18)}
.htp-expedition-lesson .htp-story-beat__prompts b{position:relative;padding-left:32px;border-radius:3px;background:#fff8e8}
.htp-expedition-lesson .htp-story-beat__prompts b::before{content:"";position:absolute;left:11px;top:50%;width:10px;height:10px;border:2px solid var(--unit-accent);border-radius:50%;transform:translateY(-50%)}
.htp-expedition-lesson .htp-focus-quest{border:2px dashed var(--unit-accent);border-radius:9px;background:#fff3cf;box-shadow:7px 8px 0 rgba(154,119,53,.16)}
.htp-expedition-lesson .htp-focus-quest__steps button{position:relative;border-radius:4px 19px 4px 19px;background:#fffdf7}
.htp-expedition-lesson .htp-focus-quest__steps button::before{content:"";position:absolute;right:14px;top:12px;width:14px;height:14px;border:2px solid var(--unit-accent);transform:rotate(45deg);opacity:.55}

.htp-time-machine{position:relative;overflow:hidden;margin:48px 0;padding:clamp(28px,5vw,52px);border:3px solid var(--exp-ink);border-radius:42px 8px 42px 8px;color:#fff;background:radial-gradient(circle at 50% 50%,#164d7a 0,#092f68 58%,#061e42 100%);box-shadow:10px 12px 0 #d9c7a8}
.htp-time-machine::before,.htp-time-machine::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.17);border-radius:50%}
.htp-time-machine::before{width:310px;height:310px;right:-120px;top:-150px}.htp-time-machine::after{width:190px;height:190px;left:-90px;bottom:-100px}
.htp-time-machine>*{position:relative;z-index:1}.htp-time-machine header{text-align:center}.htp-time-machine header>span{color:#f5c85c;font-size:.7rem;font-weight:950;letter-spacing:.13em}.htp-time-machine h2{margin:8px 0;color:#fff;font-size:clamp(2rem,4vw,3.2rem)}.htp-time-machine header p{color:#d5e8f3}
.htp-time-dial{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px auto;max-width:760px}
.htp-time-dial button{padding:15px 8px;border:1px solid rgba(255,255,255,.4);border-radius:50%;aspect-ratio:1.8;color:#d9ecf5;background:rgba(255,255,255,.07);font:inherit;font-weight:950;letter-spacing:.05em;cursor:pointer;transition:.2s ease}
.htp-time-dial button small{display:block;margin-top:4px;color:#9ec5d8;font-weight:700;letter-spacing:0}.htp-time-dial button.is-active{color:var(--exp-ink);background:#f7cf68;box-shadow:0 0 0 7px rgba(247,207,104,.18);transform:translateY(-4px)}.htp-time-dial button.is-active small{color:#684e16}
.htp-time-output{display:flex;flex-direction:column;align-items:center;max-width:700px;margin:auto;padding:25px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(255,255,255,.1);text-align:center}.htp-time-output strong{color:#fff;font-family:Georgia,serif;font-size:clamp(1.5rem,4vw,2.6rem)}.htp-time-output small{margin-top:8px;color:#f7cf68;font-weight:900}

.htp-expedition-lesson .htp-mission-game{padding:clamp(28px,5vw,58px);border:2px solid var(--exp-ink);border-radius:38px 8px 38px 8px;background:radial-gradient(circle at 75% 18%,rgba(229,170,47,.25),transparent 22%),linear-gradient(140deg,#fff1c8,#d8edf0);box-shadow:11px 13px 0 rgba(9,47,104,.13)}
.htp-expedition-lesson .htp-mission-game::before{opacity:.09;background-image:radial-gradient(var(--exp-ink) 1px,transparent 1.5px);background-size:20px 20px}
.htp-game-path{position:relative;grid-template-columns:repeat(4,1fr);gap:32px}
.htp-game-path::before{content:"";position:absolute;left:8%;right:8%;top:49%;border-top:4px dashed rgba(9,47,104,.35);transform:rotate(-2deg)}
.htp-game-step{min-height:260px;border:2px solid var(--exp-ink);border-radius:50% 8px 50% 8px/8px 50% 8px 50%;background:#fff8e8;box-shadow:6px 7px 0 rgba(9,47,104,.18);transform:rotate(-1deg)}
.htp-game-step:nth-child(even){transform:translateY(34px) rotate(1deg)}.htp-game-step:hover{transform:translateY(-7px) rotate(-1deg)}.htp-game-step:nth-child(even):hover{transform:translateY(27px) rotate(1deg)}
.htp-game-step__icon{font-size:0;width:56px;height:56px;border:3px solid var(--exp-ink);border-radius:50%;background:#f5c85c;box-shadow:inset 0 0 0 5px #fff8e8}
.htp-game-step__icon::before{content:"";display:block;width:22px;height:22px;margin:14px auto;border:4px solid var(--exp-ink);border-top:0;border-left:0;transform:rotate(-45deg)}
.htp-game-step:nth-child(2) .htp-game-step__icon::before{border:3px solid var(--exp-ink);border-radius:3px;transform:rotate(0)}
.htp-game-step:nth-child(3) .htp-game-step__icon::before{border-radius:50%;transform:none}
.htp-game-step:nth-child(4) .htp-game-step__icon::before{border-width:3px 0 3px 3px;border-radius:50% 0 0 50%;transform:none}
.htp-game-step::after{height:0}.htp-game-step em{background:var(--unit-accent)}
.htp-mission-console{border:2px solid var(--exp-ink);border-radius:7px 28px 7px 28px;background:#fffdf6;box-shadow:7px 8px 0 rgba(9,47,104,.15)}
.htp-challenge-card{border:2px dashed var(--exp-coral);border-radius:4px;background:#fff2d1;transform:rotate(-.25deg)}
.htp-game-reward{position:relative}.htp-reward-seal{display:block;width:58px;height:58px;border:3px double #9a6a00;border-radius:50%;background:#f5c85c;box-shadow:0 0 0 6px #fff3bd}.htp-reward-seal::before{content:"HTP";display:grid;place-items:center;height:100%;color:#6f4d00;font-size:.72rem;font-weight:950}

.htp-expedition-unit{padding:clamp(16px,3vw,32px);border:1px solid #e0d0b7;border-radius:20px;background:repeating-linear-gradient(0deg,rgba(9,47,104,.025) 0 1px,transparent 1px 29px),var(--exp-paper);box-shadow:0 25px 70px rgba(36,45,56,.11)}
.htp-expedition-unit .htp-unit-hero{position:relative;border-radius:7px 38px 7px 38px;background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--unit-accent) 55%,transparent),transparent 35%),var(--exp-ink);box-shadow:8px 9px 0 #d9c7aa}
.htp-expedition-unit .htp-unit-hero::after{content:"";position:absolute;right:25px;bottom:-16px;width:92px;height:32px;background:rgba(229,199,136,.65);transform:rotate(-5deg)}
.htp-expedition-unit .htp-lesson-card{border-color:#d4c2a5;border-radius:4px 22px 4px 22px;background:#fffaf0;box-shadow:4px 5px 0 #eadcc7}
.htp-expedition-unit .htp-lesson-number{border-radius:50%;background:var(--unit-accent);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--unit-accent)}
.htp-mobile-lesson-bar{display:none}

@media (max-width:760px){
 .htp-expedition-lesson{margin-inline:-14px;padding:18px 16px 94px 31px;border-radius:0;background:linear-gradient(90deg,transparent 20px,rgba(239,106,99,.3) 21px,transparent 23px),repeating-linear-gradient(0deg,rgba(9,47,104,.025) 0 1px,transparent 1px 27px),var(--exp-paper)}
 .htp-expedition-lesson::before{left:2px;width:16px;background-size:15px 37px}.htp-expedition-lesson::after{display:none}
 .htp-expedition-lesson .htp-learning-path{position:relative;top:auto;display:flex;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}.htp-expedition-lesson .htp-learning-path a{min-width:132px;scroll-snap-align:start}
 .htp-expedition-lesson .htp-lesson-visual{margin-top:20px;padding:6px}.htp-expedition-lesson .htp-lesson-visual img{aspect-ratio:4/3}.htp-expedition-lesson .htp-lesson-visual figcaption{position:relative;right:auto;bottom:auto;max-width:none;margin:-8px 8px -22px}
 .htp-scene-hotspots{inset:6px}.htp-scene-hotspots button{--x:9%;--y:18%}.htp-scene-hotspots button:nth-child(2){--x:56%;--y:15%}.htp-scene-hotspots button:nth-child(3){--x:39%;--y:52%}.htp-scene-hotspots button i{width:29px;height:29px;font-size:.74rem}.htp-scene-hotspots button span{display:none}
 .htp-expedition-lesson .htp-pronunciation-lab,.htp-expedition-lesson .htp-deep-dive{padding:25px 18px}.htp-expedition-lesson .htp-pronunciation-lab::before{right:12px;top:10px}
 .htp-time-dial{gap:7px}.htp-time-dial button{font-size:.72rem;aspect-ratio:1.15}.htp-time-dial button small{font-size:.64rem}
 .htp-game-path{grid-template-columns:1fr 1fr;gap:18px}.htp-game-path::before{display:none}.htp-game-step,.htp-game-step:nth-child(even){min-height:215px;transform:none}.htp-game-step:hover,.htp-game-step:nth-child(even):hover{transform:translateY(-4px)}
 .htp-mobile-lesson-bar{position:fixed;z-index:999;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(3,1fr);padding:7px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(9,47,104,.96);box-shadow:0 12px 40px rgba(0,0,0,.28);backdrop-filter:blur(14px)}
 .htp-mobile-lesson-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;color:#fff!important;font-size:.68rem;font-weight:900;text-decoration:none}.htp-mobile-lesson-bar span{width:17px;height:17px;border:2px solid #f5c85c;border-radius:50%}.htp-mobile-lesson-bar a:nth-child(2) span{border-radius:3px}.htp-mobile-lesson-bar a:nth-child(3) span{border-radius:50% 50% 8px 8px}
 .htp-expedition-unit{margin-inline:-12px;padding:15px;border-radius:0}.htp-expedition-unit .htp-unit-hero{padding:30px 22px}.htp-expedition-unit .htp-lesson-card{grid-template-columns:55px 1fr}.htp-expedition-unit .htp-lesson-card>a,.htp-expedition-unit .htp-lock{grid-column:2}
}
@media (max-width:480px){
 .htp-expedition-lesson .htp-lesson-breadcrumb{align-items:flex-start;flex-direction:column;gap:4px}.htp-expedition-lesson .htp-conjugation-grid,.htp-expedition-lesson .htp-vocab-grid,.htp-expedition-lesson .htp-practice-grid{grid-template-columns:1fr}.htp-game-path{grid-template-columns:1fr}.htp-game-step{min-height:180px}.htp-time-machine{padding:25px 15px}.htp-time-dial button{padding:10px 3px}.htp-expedition-unit .htp-lesson-card{padding:18px 13px;gap:12px}
}
@media (prefers-reduced-motion:reduce){.htp-expedition-lesson *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

@media(max-width:480px){
 .htp-core-button { width:100%; }
 .htp-core-notice,.htp-progress-panel,.htp-corrections,.htp-quiz,.htp-recorder { padding:22px; border-radius:24px; }
 .htp-student-hello,.htp-continue-card { padding:26px; border-radius:24px; }
 .htp-student-hello::before { display:none; }
 .htp-xp { width:100%; }
 .htp-dashboard-lesson { gap:12px; padding:13px; }
 .htp-dashboard-lesson__number { width:42px; height:42px; }
 .htp-lesson-breadcrumb { align-items:flex-start; flex-direction:column; }
 .htp-discovery { border-radius:24px; }
 .htp-discovery h2 { font-size:2.2rem; }
 .htp-language-table,.htp-conjugation-grid>div,.htp-objectives,.htp-example,.htp-mission { padding:18px; }
 .htp-quiz fieldset { padding:16px; }
 .htp-quiz label { align-items:flex-start; padding:12px 10px; }
 .htp-recorder__status { justify-content:center; flex-direction:column; text-align:center; }
 .htp-recorder__actions { flex-direction:column; }
 .htp-login-card { padding:22px; border-radius:26px; }
 .htp-login-form-wrap { padding:18px; border-radius:20px; }
 .htp-login-card input[type="submit"] { width:100%; }
 .htp-learning-path { gap:5px; padding:7px; }
 .htp-learning-path a { gap:6px; padding:6px; font-size:.76rem; }
 .htp-learning-path span { width:23px; height:23px; }
 .htp-lesson-visual { border-radius:24px; }
 .htp-lesson-visual figcaption { position:static; max-width:none; border:0; border-radius:0; box-shadow:none; }
 .htp-deep-dive,.htp-memory { padding:22px; border-radius:24px; }
 .htp-practice-grid,.htp-speech-plan,.htp-checklist,.htp-family-tree,.htp-number-line { grid-template-columns:1fr; }
 .htp-teacher-note { padding:64px 20px 20px; }
 .htp-teacher-note::before { left:20px; top:18px; }
 .htp-grammar-table th,.htp-grammar-table td { min-width:135px; padding:12px; }
 .htp-pronunciation-lab { padding:20px; border-radius:22px; }
 .htp-pronunciation-list article>div { width:100%; flex-wrap:wrap; }
 .htp-speak-button { flex:1; }
 .htp-preference-scale,.htp-frequency-line,.htp-time-triad { grid-template-columns:1fr; }
 .htp-day-timeline { grid-template-columns:repeat(2,1fr); }
 .htp-route-strip,.htp-weather-choice,.htp-story-sequence,.htp-shop-scene,.htp-food-categories,.htp-recipe-steps,.htp-menu-board { grid-template-columns:1fr; }
 .htp-route-strip span,.htp-weather-choice span,.htp-story-sequence span,.htp-shop-scene span,.htp-food-categories span,.htp-recipe-steps span,.htp-menu-board span { min-height:90px; }
 .htp-adventure-map { border-radius:23px; }
 .htp-adventure-map figcaption { padding:17px; }
 .htp-story-beat { border-radius:23px; }
 .htp-story-beat>div { padding:21px; }
 .htp-story-beat__prompts { grid-template-columns:1fr; }
 .htp-focus-quest { padding:20px; border-radius:23px; }
 .htp-focus-quest__steps,.htp-game-path { grid-template-columns:1fr; }
 .htp-focus-quest__steps button { min-height:84px; }
 .htp-mission-game { padding:21px; border-radius:25px; }
 .htp-game-score { flex-basis:90px; min-height:90px; border-width:6px; }
 .htp-game-step { min-height:190px; }
 .htp-challenge-card { align-items:stretch; flex-direction:column; padding:18px; }
 .htp-challenge-card button { width:100%; }
 .htp-mini-game { padding:20px; border-radius:24px; }
 .htp-mini-game>header,.htp-mini-game>footer { align-items:stretch; flex-direction:column; }
 .htp-mini-xp { align-self:flex-start; }
 .htp-match-board,.htp-audio-game { grid-template-columns:1fr; }
 .htp-match-column,.htp-audio-choices { grid-template-columns:repeat(2,1fr); }
 .htp-sort-zones,.htp-timed-questions { grid-template-columns:1fr; }
 .htp-sort-zone { min-height:115px; }
 .htp-timed-top { align-items:stretch; flex-direction:column; }
 .htp-timer { width:100%; }
}

/* Core 2.0.1 — correction complète de largeur, rythme et lisibilité */
body.single-htp_lesson .htp-page {
 padding-top:52px;
 background:linear-gradient(180deg,#f8f4ec 0,#eef5f4 52%,#f8f4ec 100%);
}
body.single-htp_lesson .htp-shell.htp-prose {
 width:min(1240px,calc(100% - 48px));
 max-width:none;
}
body.single-htp_lesson .htp-prose>.htp-page-header,
body.single-htp_lesson .htp-prose>.htp-lesson-experience.htp-expedition-lesson {
 width:100%;
 max-width:none;
}
body.single-htp_lesson .htp-page-header {
 min-height:0;
 margin-bottom:34px;
 padding:34px 48px;
 border-radius:22px 46px 22px 46px;
 background:radial-gradient(circle at 86% 20%,rgba(229,170,47,.3),transparent 28%),linear-gradient(135deg,#fffdf8,#f8eedc);
}
body.single-htp_lesson .htp-page-header h1 {
 max-width:1000px;
 margin:10px 0;
 font-size:clamp(2.8rem,5vw,4.8rem);
 line-height:1.02;
}
.htp-prose>.htp-core-wrap,
.htp-prose>.htp-student-dashboard,
.htp-prose>.htp-login-card {
 width:min(1180px,calc(100vw - 48px));
 max-width:none;
 margin-left:50%;
 transform:translateX(-50%);
}
.htp-expedition-lesson {
 max-width:none;
 padding:34px clamp(38px,4.5vw,66px) 96px clamp(56px,5.2vw,78px);
 font-size:18px;
 line-height:1.68;
}
.htp-expedition-lesson p,
.htp-expedition-lesson li,
.htp-expedition-lesson small {
 color:#27465f;
}
.htp-expedition-lesson h2,
.htp-expedition-lesson h3,
.htp-expedition-lesson h4,
.htp-expedition-lesson strong {
 color:#082f67;
}
.htp-expedition-lesson #htp-comprendre,
.htp-expedition-lesson #htp-comprendre>.htp-discovery {
 width:100%;
 max-width:none;
}
.htp-expedition-lesson .htp-learning-path {
 margin-bottom:34px;
}
.htp-expedition-lesson .htp-lesson-visual {
 margin-bottom:62px;
}
.htp-expedition-lesson .htp-lesson-visual img {
 max-height:590px;
 aspect-ratio:16/8.4;
}
.htp-expedition-lesson .htp-pronunciation-lab {
 display:grid;
 grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr);
 align-items:start;
 gap:36px;
 margin:52px 0;
 background:linear-gradient(135deg,#dff3f5,#bcdfe9);
}
.htp-expedition-lesson .htp-pronunciation-list {
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:13px;
}
.htp-expedition-lesson .htp-pronunciation-list article {
 align-items:flex-start;
 min-width:0;
 padding:18px;
 flex-direction:column;
}
.htp-expedition-lesson .htp-pronunciation-list article>div {
 display:grid;
 grid-template-columns:1fr 1fr;
 width:100%;
 margin-top:auto;
}
.htp-expedition-lesson .htp-speak-button {
 width:100%;
 min-width:0;
}
.htp-expedition-lesson .htp-discovery {
 padding:40px 12px 34px;
}
.htp-expedition-lesson .htp-discovery>h2,
.htp-expedition-lesson .htp-deep-dive>h2 {
 max-width:880px;
 margin-bottom:24px;
 font-size:clamp(2.15rem,3.5vw,3.55rem);
 line-height:1.08;
}
.htp-expedition-lesson .htp-objectives {
 padding:26px 34px;
 background:#fff0bf;
}
.htp-expedition-lesson .htp-language-table {
 padding:25px 30px;
 background:#dceff2;
}
.htp-expedition-lesson .htp-conjugation-grid {
 grid-template-columns:repeat(3,minmax(0,1fr));
}
.htp-expedition-lesson .htp-vocab-grid {
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:17px;
}
.htp-expedition-lesson .htp-conjugation-grid>div,
.htp-expedition-lesson .htp-vocab-grid div {
 min-width:0;
 padding:24px;
}
.htp-expedition-lesson .htp-example {
 padding:27px 30px;
 background:#fff1c9;
}
.htp-expedition-lesson .htp-story-beat {
 grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
 min-height:430px;
 margin:52px 0;
}
.htp-expedition-lesson .htp-story-beat img {
 min-height:430px;
 height:100%;
 border-width:7px;
}
.htp-expedition-lesson .htp-story-beat>div {
 padding:44px;
 background:radial-gradient(circle at 100% 0,rgba(229,170,47,.2),transparent 32%),#f2f8f7;
}
.htp-expedition-lesson .htp-story-beat p,
.htp-expedition-lesson .htp-story-beat h2 small {
 color:#36556b;
}
.htp-expedition-lesson .htp-story-beat__prompts {
 gap:11px;
}
.htp-expedition-lesson .htp-focus-quest {
 margin:52px 0;
 padding:38px;
 background:linear-gradient(135deg,#fff0bf,#fff8de);
}
.htp-expedition-lesson .htp-focus-quest__steps {
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:17px;
}
.htp-expedition-lesson .htp-focus-quest__steps button {
 min-height:112px;
 padding:20px;
}
.htp-expedition-lesson .htp-deep-dive {
 margin-top:52px;
 padding:clamp(36px,5vw,60px);
 background:#fffdf8;
}
.htp-expedition-lesson .htp-practice-grid {
 gap:20px;
}
.htp-expedition-lesson .htp-practice-grid article {
 padding:27px;
}
.htp-expedition-lesson .htp-memory {
 margin:52px 0;
 padding:42px 52px;
 background:linear-gradient(135deg,#fff1b9,#fff9df);
}
.htp-expedition-lesson .htp-mini-game {
 margin:52px 0;
 padding:42px;
 border-color:#76b99f;
 border-radius:8px 34px 8px 34px;
 background:radial-gradient(circle at 100% 0,rgba(229,170,47,.25),transparent 27%),linear-gradient(145deg,#e3f3eb,#fffdf7);
}
.htp-expedition-lesson .htp-quiz {
 margin-top:56px;
 padding:clamp(32px,5vw,58px);
 border:2px solid #9ab8c7;
 border-radius:34px 8px 34px 8px;
 background:linear-gradient(145deg,#eaf3f5,#fffdf8);
 box-shadow:9px 10px 0 rgba(9,47,104,.12);
}
.htp-expedition-lesson .htp-quiz>h2 {
 max-width:850px;
 font-size:clamp(2rem,3.5vw,3.4rem);
}
.htp-expedition-lesson .htp-quiz form {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:20px;
 margin-top:30px;
}
.htp-expedition-lesson .htp-quiz fieldset {
 min-width:0;
 margin:0;
 padding:25px;
 border-color:#bdced6;
 border-radius:6px 22px 6px 22px;
 background:#fffefb;
}
.htp-expedition-lesson .htp-quiz legend {
 padding:0 8px;
 color:#082f67;
 font-size:1.02rem;
 line-height:1.45;
}
.htp-expedition-lesson .htp-quiz form>.htp-core-button,
.htp-expedition-lesson .htp-quiz form+.htp-quiz-result {
 grid-column:1/-1;
}
.htp-expedition-lesson .htp-mission-game {
 margin-top:60px;
 padding:50px;
 background:radial-gradient(circle at 78% 15%,rgba(229,170,47,.3),transparent 25%),linear-gradient(140deg,#fff0bd,#d8ecec);
}
.htp-expedition-lesson .htp-game-path {
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:24px 32px;
 margin:42px 0 50px;
}
.htp-expedition-lesson .htp-game-path::before {
 top:50%;
 left:4%;
 right:4%;
}
.htp-expedition-lesson .htp-game-step,
.htp-expedition-lesson .htp-game-step:nth-child(even) {
 display:grid;
 grid-template-columns:72px 1fr 34px;
 grid-template-rows:auto auto 1fr;
 align-items:center;
 column-gap:17px;
 min-height:205px;
 padding:25px;
 transform:none;
}
.htp-expedition-lesson .htp-game-step__icon {
 grid-row:1/4;
 margin:0;
}
.htp-expedition-lesson .htp-game-step b,
.htp-expedition-lesson .htp-game-step strong,
.htp-expedition-lesson .htp-game-step small {
 grid-column:2;
}
.htp-expedition-lesson .htp-game-step em {
 position:static;
 grid-column:3;
 grid-row:1/4;
}
.htp-expedition-lesson .htp-game-step:hover,
.htp-expedition-lesson .htp-game-step:nth-child(even):hover {
 transform:translateY(-5px) rotate(-.2deg);
}
.htp-expedition-lesson .htp-mission-console {
 padding:34px;
}
.htp-expedition-lesson .htp-challenge-card {
 margin-top:36px;
 padding:27px 30px;
}
.htp-expedition-lesson .htp-recorder {
 margin-top:56px;
 padding:clamp(32px,5vw,55px);
}

@media (max-width:980px) {
 body.single-htp_lesson .htp-shell.htp-prose {width:min(100% - 28px,900px)}
 .htp-expedition-lesson{padding:28px 34px 90px 52px}
 .htp-expedition-lesson .htp-pronunciation-lab{grid-template-columns:1fr;gap:22px}
 .htp-expedition-lesson .htp-story-beat{grid-template-columns:1fr;min-height:0}
 .htp-expedition-lesson .htp-story-beat img{min-height:0;max-height:500px;aspect-ratio:16/9}
 .htp-expedition-lesson .htp-conjugation-grid,.htp-expedition-lesson .htp-vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .htp-expedition-lesson .htp-quiz form{grid-template-columns:1fr}
 .htp-expedition-lesson .htp-quiz form>*{grid-column:1}
}
@media (max-width:760px) {
 body.single-htp_lesson .htp-page{padding-top:24px}
 body.single-htp_lesson .htp-shell.htp-prose{width:100%}
 body.single-htp_lesson .htp-page-header{width:calc(100% - 28px);margin:0 14px 22px;padding:27px 23px;border-radius:18px}
 body.single-htp_lesson .htp-page-header h1{font-size:clamp(2.25rem,11vw,3.3rem)}
 .htp-prose>.htp-core-wrap,.htp-prose>.htp-student-dashboard,.htp-prose>.htp-login-card{width:calc(100vw - 20px)}
 .htp-expedition-lesson{box-sizing:border-box;width:100%;margin:0;font-size:16px;line-height:1.62}
 .htp-expedition-lesson .htp-pronunciation-list{grid-template-columns:1fr}
 .htp-expedition-lesson .htp-pronunciation-list article>div{display:flex}
 .htp-expedition-lesson .htp-conjugation-grid,.htp-expedition-lesson .htp-vocab-grid,.htp-expedition-lesson .htp-focus-quest__steps,.htp-expedition-lesson .htp-game-path{grid-template-columns:1fr}
 .htp-expedition-lesson .htp-game-step,.htp-expedition-lesson .htp-game-step:nth-child(even){grid-template-columns:58px 1fr 30px;min-height:165px;padding:20px}
 .htp-expedition-lesson .htp-game-step__icon{width:48px;height:48px}
 .htp-expedition-lesson .htp-game-step__icon::before{margin:10px auto}
 .htp-expedition-lesson .htp-quiz,.htp-expedition-lesson .htp-mini-game,.htp-expedition-lesson .htp-mission-game{padding:24px 18px}
 .htp-expedition-lesson .htp-memory{padding:30px 24px}
}

/* Core 2.1 — contrast, adaptive learning and revision dashboard. */
.htp-expedition-lesson .htp-mission,
.htp-expedition-lesson .htp-dialogue,
.htp-expedition-lesson .htp-story {
 color:#f8fbff;
}
.htp-expedition-lesson .htp-mission p,
.htp-expedition-lesson .htp-mission span,
.htp-expedition-lesson .htp-dialogue p,
.htp-expedition-lesson .htp-dialogue span,
.htp-expedition-lesson .htp-story p,
.htp-expedition-lesson .htp-story span {
 color:#f8fbff !important;
}
.htp-expedition-lesson .htp-mission strong,
.htp-expedition-lesson .htp-dialogue strong,
.htp-expedition-lesson .htp-story strong {
 color:#ffdc66 !important;
}
.htp-expedition-lesson .htp-story-beat>div,
.htp-expedition-lesson .htp-story-beat>div p {
 color:#27465f !important;
}
.htp-expedition-lesson .htp-story-beat>div h2,
.htp-expedition-lesson .htp-story-beat>div h2 small {
 color:#092f68 !important;
}
.htp-expedition-lesson .htp-lesson-visual img,
.htp-expedition-lesson .htp-story-beat img,
.htp-expedition-lesson .htp-adventure-map img {
 filter:saturate(.94) contrast(1.06) brightness(1.02);
}

.htp-learning-dashboard,
.htp-review-hub,
.htp-error-notebook,
.htp-remediation {
 box-sizing:border-box;
 margin:34px 0;
 padding:clamp(24px,4vw,42px);
 border:1px solid rgba(9,47,104,.14);
 border-radius:28px;
 color:#173a56;
 background:#fffdf7;
 box-shadow:0 22px 55px rgba(9,47,104,.1);
}
.htp-learning-dashboard>header,
.htp-review-hub>header,
.htp-error-notebook>header {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:24px;
 margin-bottom:24px;
}
.htp-learning-dashboard h3,
.htp-review-hub h3,
.htp-error-notebook h3,
.htp-remediation h3 {
 margin:7px 0 4px;
 color:#092f68;
 font-size:clamp(1.55rem,2.7vw,2.35rem);
 line-height:1.12;
}
.htp-learning-dashboard header p,
.htp-review-hub header p,
.htp-error-notebook header p,
.htp-remediation header p {
 margin:7px 0 0;
 color:#526b82;
}
.htp-learning-dashboard>header>a {
 display:flex;
 min-width:138px;
 padding:16px 18px;
 border-radius:18px;
 color:#092f68;
 background:#ffedaa;
 flex-direction:column;
 text-align:center;
 text-decoration:none;
}
.htp-learning-dashboard>header>a strong {font-size:1.8rem;line-height:1}
.htp-learning-dashboard>header>a span {margin-top:5px;font-size:.76rem;font-weight:850}
.htp-skill-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.htp-skill-card {
 display:flex;
 min-width:0;
 align-items:center;
 gap:12px;
 padding:16px 13px;
 border:1px solid #dbe7e9;
 border-radius:18px;
 background:#f4faf8;
}
.htp-skill-card h4 {margin:0;color:#092f68;font-size:.92rem}
.htp-skill-card small {display:block;color:#60748b;font-size:.69rem}
.htp-skill-card p {margin:5px 0 0;color:#2c6b58;font-size:.7rem;font-weight:900}
.htp-skill-ring {
 --skill:#c74646;
 position:relative;
 display:grid;
 width:64px;
 height:64px;
 flex:0 0 64px;
 place-items:center;
 border-radius:50%;
 background:conic-gradient(var(--skill) var(--score),#dce8e7 0);
}
.htp-skill-ring::before {content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.htp-skill-ring strong {position:relative;color:#092f68;font-size:.78rem}
.htp-skill-card--grammar .htp-skill-ring {--skill:#3d8cb8}
.htp-skill-card--comprehension .htp-skill-ring {--skill:#5cae87}
.htp-skill-card--pronunciation .htp-skill-ring {--skill:#d99e27}
.htp-skill-card--oral .htp-skill-ring {--skill:#9a6bc2}

.htp-review-hub {
 overflow:hidden;
 color:#fff;
 border-color:#163f74;
 background:radial-gradient(circle at 92% 0,rgba(255,218,102,.25),transparent 26%),linear-gradient(145deg,#092f68,#12577a);
}
.htp-review-hub .htp-kicker,.htp-review-hub h3,.htp-review-hub header p {color:#fff}
.htp-review-counter {min-width:118px;padding:14px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(255,255,255,.1);text-align:center}
.htp-review-counter strong {display:block;color:#ffdc66;font-size:2rem;line-height:1}
.htp-review-counter span {font-size:.72rem;font-weight:850}
.htp-review-track,.htp-remediation-progress {overflow:hidden;height:10px;margin:18px 0 26px;border-radius:999px;background:rgba(255,255,255,.17)}
.htp-review-track i,.htp-remediation-progress i {display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c74646,#ffdc66);transition:width .35s ease}
.htp-review-card {display:none;padding:clamp(20px,3vw,30px);border-radius:22px;color:#183a55;background:#fff}
.htp-review-card.is-current {display:block;animation:htpReviewIn .28s ease both}
.htp-review-meta {display:flex;align-items:center;gap:9px}
.htp-review-meta span,.htp-review-meta small {padding:6px 10px;border-radius:999px;color:#092f68;background:#e7f3f4;font-size:.7rem;font-weight:900}
.htp-review-meta small {color:#7d4d00;background:#fff0b7}
.htp-review-card h4 {margin:18px 0;color:#092f68;font-size:clamp(1.15rem,2vw,1.55rem)}
.htp-review-options,.htp-remediation-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.htp-review-options button,.htp-remediation-options button,.htp-error-card>[data-error-retry],.htp-review-next {
 min-height:50px;
 padding:11px 14px;
 border:2px solid #d9e5e8;
 border-radius:14px;
 color:#092f68;
 background:#fff;
 font:inherit;
 font-weight:850;
 cursor:pointer;
}
.htp-review-options button:hover,.htp-remediation-options button:hover {border-color:#69a9c3;background:#edf8fb}
.htp-review-options button.is-correct,.htp-remediation-options button.is-correct {border-color:#4faa79;background:#e3f7eb}
.htp-review-options button.is-wrong,.htp-remediation-options button.is-wrong {border-color:#dd6662;background:#fff0ed}
.htp-review-feedback {margin-top:15px;padding:14px;border-radius:13px;background:#eff7f7;color:#27465f;font-weight:750}
.htp-review-feedback.is-success {background:#def5e8;color:#176843}
.htp-review-feedback.is-error {background:#fff0ed;color:#8b302e}
.htp-review-next {margin-top:14px;border:0;color:#fff;background:#c74646}
.htp-review-complete,.htp-review-empty {display:flex;padding:23px;border-radius:18px;color:#27465f;background:#fff;flex-direction:column;gap:5px}
.htp-review-complete strong,.htp-review-empty strong {color:#092f68;font-size:1.15rem}

.htp-error-notebook>header>strong {display:grid;width:54px;height:54px;place-items:center;border-radius:50%;color:#fff;background:#c74646;font-size:1.35rem}
.htp-error-list {display:grid;gap:14px}
.htp-error-card {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:20px;border-left:6px solid #c74646;border-radius:16px;background:#fff3ef}
.htp-error-card>div:first-child>span {color:#a13f3d;font-size:.72rem;font-weight:950;text-transform:uppercase}
.htp-error-card h4 {margin:7px 0 13px;color:#092f68}
.htp-error-card p {margin:5px 0;color:#36566d}
.htp-error-card small {display:block;margin-top:12px;color:#526b82;line-height:1.55}
.htp-error-card>[data-error-retry] {align-self:start;border-color:#c74646;color:#fff;background:#c74646}
.htp-error-card>[data-error-options],.htp-error-card>[data-review-feedback] {grid-column:1/-1}
.htp-error-card.is-resolved {opacity:.72;border-left-color:#4faa79;background:#ecf8f1}

.htp-remediation {border:2px solid #e2b446;background:linear-gradient(145deg,#fff6d7,#fffdfa)}
.htp-remediation-progress {background:#eadfbd}
.htp-remediation-list {display:grid;gap:14px}
.htp-remediation-card {position:relative;padding:22px 22px 22px 66px;border:1px solid #e2d3a8;border-radius:18px;background:#fff}
.htp-remediation-card>b {position:absolute;left:19px;top:20px;display:grid;width:32px;height:32px;place-items:center;border-radius:50%;color:#fff;background:#092f68}
.htp-remediation-card h4 {margin:0 0 14px;color:#092f68}
.htp-remediation-card>[data-remediation-feedback] {margin:12px 0 0;color:#526b82;font-weight:800}
.htp-remediation-card.is-done {border-color:#70bb90;background:#edf9f2}
.htp-remediation-card.is-done>b {background:#24805a}
.htp-remediation-finish {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:18px;border-radius:16px;color:#176843;background:#def5e8}
@keyframes htpReviewIn {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (max-width:1100px) {
 .htp-skill-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .htp-skill-card:last-child {grid-column:1/-1}
}
@media (max-width:760px) {
 .htp-learning-dashboard,.htp-review-hub,.htp-error-notebook,.htp-remediation {margin:24px 0;padding:22px 17px;border-radius:20px}
 .htp-learning-dashboard>header,.htp-review-hub>header,.htp-error-notebook>header {align-items:flex-start;flex-direction:column}
 .htp-learning-dashboard>header>a,.htp-review-counter {box-sizing:border-box;width:100%}
 .htp-skill-grid,.htp-review-options,.htp-remediation-options {grid-template-columns:1fr}
 .htp-skill-card:last-child {grid-column:auto}
 .htp-error-card {grid-template-columns:1fr}
 .htp-error-card>[data-error-options],.htp-error-card>[data-review-feedback] {grid-column:auto}
 .htp-error-card>[data-error-retry] {width:100%}
 .htp-remediation-card {padding:64px 17px 18px}
 .htp-remediation-finish {align-items:stretch;flex-direction:column}
}

/* Core 2.1.1 — contrat de contraste commun à toutes les pages et unités. */
.htp-core-wrap,
.htp-student-dashboard,
.htp-lesson-experience,
.htp-login-card,
.htp-core-notice {
 color:#27465f;
}
.htp-core-wrap h1,.htp-core-wrap h2,.htp-core-wrap h3,.htp-core-wrap h4,
.htp-student-dashboard h1,.htp-student-dashboard h2,.htp-student-dashboard h3,.htp-student-dashboard h4,
.htp-lesson-experience h1,.htp-lesson-experience h2,.htp-lesson-experience h3,.htp-lesson-experience h4,
.htp-login-card h1,.htp-login-card h2,.htp-login-card h3,.htp-login-card h4 {
 color:#092f68;
}
.htp-core-translation,
.htp-login-help,
.htp-correction-wait {
 color:#526b82;
}

/* Les descendants des surfaces sombres ne doivent jamais hériter du texte bleu. */
.htp-expedition-lesson .htp-dialogue,
.htp-expedition-lesson .htp-story,
.htp-expedition-lesson .htp-mission,
.htp-expedition-lesson .htp-time-triad article,
.htp-expedition-lesson .htp-story-sequence>span,
.htp-expedition-lesson .htp-menu-board,
.htp-expedition-lesson .htp-menu-board>span,
.htp-expedition-lesson .htp-time-machine,
.htp-expedition-lesson .htp-game-score,
.htp-expedition-lesson .htp-recorder__status,
.htp-expedition-lesson .htp-focus-quest__status {
 color:#f8fbff !important;
}
.htp-expedition-lesson .htp-dialogue p,
.htp-expedition-lesson .htp-dialogue small,
.htp-expedition-lesson .htp-story p,
.htp-expedition-lesson .htp-story small,
.htp-expedition-lesson .htp-mission p,
.htp-expedition-lesson .htp-mission small,
.htp-expedition-lesson .htp-time-triad h3,
.htp-expedition-lesson .htp-time-triad p,
.htp-expedition-lesson .htp-time-triad strong,
.htp-expedition-lesson .htp-time-triad small,
.htp-expedition-lesson .htp-story-sequence>span strong,
.htp-expedition-lesson .htp-story-sequence>span small,
.htp-expedition-lesson .htp-menu-board>span small,
.htp-expedition-lesson .htp-time-machine h2,
.htp-expedition-lesson .htp-time-machine h3,
.htp-expedition-lesson .htp-time-machine h4,
.htp-expedition-lesson .htp-time-machine p,
.htp-expedition-lesson .htp-game-score span,
.htp-expedition-lesson .htp-recorder__status span,
.htp-expedition-lesson .htp-focus-quest__status strong {
 color:#f8fbff !important;
}
.htp-expedition-lesson .htp-dialogue strong,
.htp-expedition-lesson .htp-story strong,
.htp-expedition-lesson .htp-mission strong,
.htp-expedition-lesson .htp-time-triad span,
.htp-expedition-lesson .htp-menu-board>span strong,
.htp-expedition-lesson .htp-time-output small,
.htp-expedition-lesson .htp-game-score strong,
.htp-expedition-lesson .htp-recorder__status strong {
 color:#ffdc66 !important;
}
.htp-expedition-lesson .htp-time-output strong {
 color:#fff !important;
}
.htp-expedition-lesson .htp-time-dial button:not(.is-active),
.htp-expedition-lesson .htp-time-dial button:not(.is-active) small {
 color:#e8f5fb !important;
}
.htp-expedition-lesson .htp-time-dial button.is-active,
.htp-expedition-lesson .htp-time-dial button.is-active small,
.htp-expedition-lesson .htp-focus-quest__status span {
 color:#092f68 !important;
}
.htp-expedition-lesson .htp-preference-scale span:first-child,
.htp-expedition-lesson .htp-preference-scale span:first-child strong,
.htp-expedition-lesson .htp-frequency-line span:first-child,
.htp-expedition-lesson .htp-frequency-line span:first-child strong,
.htp-expedition-lesson .htp-preference-scale span:last-child,
.htp-expedition-lesson .htp-preference-scale span:last-child strong,
.htp-expedition-lesson .htp-frequency-line span:last-child,
.htp-expedition-lesson .htp-frequency-line span:last-child strong,
.htp-expedition-lesson .htp-day-timeline span,
.htp-expedition-lesson .htp-day-timeline strong {
 color:#fff !important;
}
.htp-expedition-lesson .htp-grammar-table th,
.htp-expedition-lesson .htp-audio-play,
.htp-expedition-lesson .htp-timed-start,
.htp-expedition-lesson .htp-speak-button:not(.htp-speak-button--slow) {
 color:#fff !important;
}
.htp-expedition-unit .htp-unit-hero,
.htp-expedition-unit .htp-unit-hero h2,
.htp-expedition-unit .htp-unit-hero strong {
 color:#fff !important;
}
.htp-expedition-unit .htp-unit-hero p,
.htp-expedition-unit .htp-unit-hero span {
 color:#dcecf7 !important;
}
.htp-student-dashboard .htp-continue-card,
.htp-student-dashboard .htp-continue-card h3,
.htp-student-dashboard .htp-xp {
 color:#fff !important;
}
.htp-student-dashboard .htp-xp strong,
.htp-student-dashboard .htp-adventure-map figcaption span {
 color:#ffdc66 !important;
}
.htp-student-dashboard .htp-adventure-map figcaption strong,
.htp-student-dashboard .htp-adventure-map figcaption small {
 color:#f8fbff !important;
}
.htp-core-button--coral,
.htp-lesson-number,
.htp-dashboard-lesson__number,
.htp-corrections__count,
.htp-learning-path span,
.htp-speech-plan article>span,
.htp-focus-quest__steps button b,
.htp-shop-scene span::before {
 color:#fff !important;
}

/* Core 3.0 — reference lesson architecture. */
.htp-student-hud{position:fixed;z-index:9998;right:18px;top:88px;display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid rgba(255,255,255,.55);border-radius:20px;color:#fff;background:rgba(9,47,104,.96);box-shadow:0 14px 36px rgba(9,47,104,.24);backdrop-filter:blur(12px)}
.htp-student-hud>a{display:flex;align-items:center;gap:8px;color:#fff!important;text-decoration:none}.htp-hud-home{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;color:#092f68;background:#ffdc66;font-size:1.1rem;font-weight:950}.htp-student-hud>div{display:grid;grid-template-columns:auto 78px auto;align-items:center;gap:8px}.htp-student-hud strong{color:#ffdc66!important;font-size:.9rem}.htp-student-hud>div>span{overflow:hidden;width:78px;height:7px;border-radius:99px;background:rgba(255,255,255,.22)}.htp-student-hud i{display:block;height:100%;border-radius:99px;background:#ff5f5d}.htp-student-hud small{color:#fff}
.htp-lesson-breadcrumb>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.htp-back-dashboard{padding:8px 12px;border-radius:999px;color:#fff!important;background:#092f68}.htp-lesson-breadcrumb>div a+a{padding-left:12px;border-left:1px solid #ccd9e4}
.htp-learning-path--six{grid-template-columns:repeat(6,1fr)}
.htp-u1-hero,.htp-module-zero{overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);margin-bottom:28px;border:1px solid #cfdae4;border-radius:36px;background:linear-gradient(140deg,#fff 0 58%,#edf8fc);box-shadow:0 24px 62px rgba(9,47,104,.12)}
.htp-u1-hero__copy,.htp-module-zero>div{align-self:center;padding:clamp(28px,5vw,64px)}.htp-u1-hero h1,.htp-module-zero h1{margin:10px 0 16px;color:#092f68;font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.02}.htp-u1-hero__copy>p,.htp-module-zero>div>p{color:#395775;font-size:1.14rem;font-weight:700}.htp-u1-hero ul{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}.htp-u1-hero li{position:relative;padding-left:28px}.htp-u1-hero li::before{content:"✓";position:absolute;left:0;color:#e95152;font-weight:950}.htp-u1-hero figure,.htp-module-zero figure{position:relative;margin:0;min-height:470px}.htp-u1-hero figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent 35%)}.htp-u1-hero img,.htp-module-zero img{width:100%;height:100%;object-fit:cover}.htp-u1-hero figcaption{position:absolute;z-index:1;right:18px;bottom:18px;left:18px;padding:14px 16px;border-radius:16px;color:#092f68;background:rgba(255,255,255,.9);font-weight:800;backdrop-filter:blur(9px)}
.htp-lesson-meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.htp-lesson-meta span{padding:8px 12px;border:1px solid #c4dce8;border-radius:999px;color:#092f68;background:#f2fbff;font-size:.82rem;font-weight:900}
.htp-four-skills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 28px}.htp-four-skills span{padding:18px;border:1px solid #d0dce6;border-radius:18px;color:#567087;background:#fff;text-align:center}.htp-four-skills b{display:block;margin-bottom:3px;color:#e95152;font-size:.75rem;letter-spacing:.1em}
.htp-course-chapter,.htp-sound-chapter{margin:28px 0;padding:clamp(28px,5vw,56px);border:1px solid #d5dfe7;border-radius:34px;background:#fff;box-shadow:0 18px 50px rgba(9,47,104,.07);scroll-margin-top:100px}.htp-course-chapter>h2,.htp-sound-chapter>h2{max-width:900px;margin:8px 0 22px;color:#092f68;font-size:clamp(1.85rem,3.5vw,3rem)}.htp-course-chapter>h2:not(:first-of-type){margin-top:42px}.htp-course-chapter p,.htp-sound-chapter p{font-size:1.03rem;line-height:1.75}.htp-course-chapter:nth-of-type(even){background:linear-gradient(145deg,#fff,#f4fbfd)}
.htp-dialogue--named p:nth-child(odd){margin-right:8%}.htp-dialogue--named p:nth-child(even){margin-left:8%}.htp-real-text{margin:22px 0;padding:28px;border-left:6px solid #ffdc66;border-radius:0 22px 22px 0;color:#092f68;background:#fff8dc;font-size:1.08rem;line-height:1.8}
.htp-teacher-audio{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.65fr);gap:18px;align-items:center;margin:24px 0;padding:22px;border:1px solid #b8dbe8;border-radius:24px;background:linear-gradient(135deg,#eaf8fd,#fff)}.htp-teacher-audio h3{margin:5px 0;color:#092f68}.htp-teacher-audio p{margin:0;color:#526e85;font-size:.9rem}.htp-audio-label{color:#e95152;font-size:.7rem;font-weight:950;letter-spacing:.1em}.htp-teacher-audio audio{width:100%}.htp-audio-pending{padding:16px;border:1px dashed #8ebdce;border-radius:16px;color:#496b82;background:#fff}.htp-audio-pending strong,.htp-audio-pending span{display:block}.htp-audio-pending strong{color:#092f68}.htp-teacher-audio details{grid-column:1/-1;padding-top:13px;border-top:1px solid #c9dfe7}.htp-teacher-audio summary{color:#092f68;font-weight:900;cursor:pointer}
.htp-comprehension{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}.htp-comprehension article,.htp-guided-task{padding:22px;border:1px solid #d4dee7;border-radius:20px;background:#fbfdff}.htp-comprehension h3{margin-top:0;color:#092f68}.htp-comprehension details{padding-top:10px;border-top:1px dashed #c9d7e0}.htp-comprehension summary{color:#e95152;font-weight:900;cursor:pointer}
.htp-rule-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.htp-rule-cards article{padding:18px;border-radius:18px;color:#fff;background:#092f68}.htp-rule-cards b,.htp-rule-cards span,.htp-rule-cards small{display:block}.htp-rule-cards b{color:#ffdc66}.htp-rule-cards span{margin-top:8px;color:#fff}.htp-rule-cards small{margin-top:5px;color:#dbeaf4}
.htp-guided-sequence,.htp-rehearsal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}.htp-guided-sequence article,.htp-rehearsal-cards article{position:relative;padding:24px;border-radius:22px;background:#eaf7fc}.htp-guided-sequence article>span,.htp-rehearsal-cards article>b{display:grid;place-items:center;width:36px;height:36px;margin-bottom:10px;border-radius:50%;color:#fff;background:#e95152}.htp-guided-sequence h3,.htp-rehearsal-cards h3{margin:0;color:#092f68}.htp-production{border-color:#0f4b84;background:linear-gradient(145deg,#092f68,#145790)!important;color:#fff}.htp-production h2,.htp-production h3,.htp-production p,.htp-production li{color:#fff}.htp-production .htp-kicker{color:#ffdc66}.htp-success-check{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.htp-success-check strong{width:100%;color:#ffdc66}.htp-success-check span{padding:9px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;background:rgba(255,255,255,.1)}
.htp-profile-grid,.htp-character-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.htp-profile-grid article,.htp-character-choice article{padding:22px;border:1px solid #d4dfe7;border-radius:22px;background:#fff}.htp-profile-grid b,.htp-profile-grid span,.htp-character-choice b,.htp-character-choice span{display:block}.htp-profile-grid b,.htp-character-choice b{color:#092f68;font-size:1.2rem}.htp-profile-grid span,.htp-character-choice span{color:#e95152;font-weight:850}.htp-character-choice{grid-template-columns:repeat(4,1fr)}
.htp-number-system{display:grid;gap:10px;margin:22px 0}.htp-number-system p{margin:0;padding:17px 20px;border-radius:16px;background:#edf8fc}.htp-number-system b{display:inline-block;min-width:84px;color:#e95152}.htp-form-model{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0;padding:20px;border:2px dashed #c8d9e4;border-radius:22px}.htp-form-model span{padding:14px;border-radius:14px;background:#f2f8fb}.htp-form-model b{color:#092f68}
.htp-draft-area{margin:28px 0}.htp-draft-area label,.htp-draft-area label span{display:block}.htp-draft-area label strong{color:#092f68;font-size:1.2rem}.htp-draft-area label span{color:#5f7488}.htp-draft-area textarea{width:100%;margin-top:12px;padding:18px;border:2px solid #b9cfdd;border-radius:18px;background:#fbfdff;font:inherit;line-height:1.6}.htp-production-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0}.htp-production-checks label{display:flex;gap:10px;align-items:flex-start;padding:16px;border:1px solid #cddce5;border-radius:16px;background:#f7fbfd}.htp-production-checks input{width:20px;height:20px;flex:none}.htp-production-checks.is-complete label{border-color:#8dccaa;background:#f2fff7}.htp-check-feedback{padding:14px 18px;border-radius:15px;color:#092f68;background:#ffedac;font-weight:900}.htp-production-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.htp-production-pair article{padding:22px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(255,255,255,.09)}
.htp-module-nav{position:sticky;top:12px;z-index:7;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0;padding:8px;border-radius:20px;background:#092f68}.htp-module-nav a{padding:13px;border-radius:14px;color:#fff!important;text-align:center;text-decoration:none;font-weight:900}.htp-module-nav a:hover{color:#092f68!important;background:#ffdc66}.htp-alphabet-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin:22px 0}.htp-alphabet-grid span{display:grid;place-items:center;min-height:64px;border-radius:15px;color:#092f68;background:#edf8fc;font-size:1.2rem;font-weight:950}.htp-alphabet-grid small{display:block;color:#5e7589;font-size:.68rem}.htp-sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.htp-sound-grid article{padding:22px;border:1px solid #d4dee6;border-radius:20px}.htp-sound-grid strong{display:block;color:#e95152;font-size:1.7rem}.htp-sound-grid p{margin:8px 0}.htp-contrast-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.htp-contrast-list article{padding:22px;border-radius:20px;background:#edf8fc}.htp-contrast-list b{color:#092f68;font-size:1.15rem}.htp-contrast-list p{margin:7px 0;color:#e95152;font-weight:900}
@media(max-width:900px){.htp-learning-path--six{grid-template-columns:repeat(3,1fr)}.htp-u1-hero,.htp-module-zero{grid-template-columns:1fr}.htp-u1-hero figure,.htp-module-zero figure{min-height:330px}.htp-four-skills,.htp-rule-cards,.htp-character-choice{grid-template-columns:repeat(2,1fr)}.htp-alphabet-grid{grid-template-columns:repeat(6,1fr)}.htp-student-hud{top:auto;right:12px;bottom:76px;left:12px;justify-content:space-between}.htp-student-hud>div{grid-template-columns:auto 64px auto}}
@media(max-width:640px){.htp-learning-path--six{display:flex;overflow:auto}.htp-learning-path--six a{min-width:125px}.htp-u1-hero,.htp-module-zero{border-radius:24px}.htp-u1-hero__copy,.htp-module-zero>div{padding:26px 22px}.htp-u1-hero h1,.htp-module-zero h1{font-size:2.45rem}.htp-u1-hero figure,.htp-module-zero figure{min-height:250px}.htp-four-skills,.htp-comprehension,.htp-guided-sequence,.htp-rehearsal-cards,.htp-profile-grid,.htp-character-choice,.htp-form-model,.htp-production-checks,.htp-production-pair,.htp-sound-grid,.htp-contrast-list{grid-template-columns:1fr}.htp-course-chapter,.htp-sound-chapter{padding:26px 20px;border-radius:24px}.htp-teacher-audio{grid-template-columns:1fr}.htp-rule-cards{grid-template-columns:1fr}.htp-alphabet-grid{grid-template-columns:repeat(4,1fr)}.htp-module-nav{grid-template-columns:repeat(2,1fr)}.htp-student-hud>a b{display:none}.htp-student-hud{padding:9px 11px}.htp-student-hud small{font-size:.7rem}.htp-lesson-breadcrumb>span{display:none}.htp-lesson-breadcrumb>div a+a{display:none}}

/* Unité 1.1 — architecture pédagogique finale 4.1 */
.htp-u1-final-tabs{position:sticky;top:76px;z-index:20;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:26px 0;padding:10px;border:1px solid #d6e1e8;border-radius:20px;background:#fffaf1;box-shadow:0 12px 28px rgba(9,47,104,.12)}
.htp-u1-final-tabs button{min-height:66px;padding:12px 18px;border:2px solid #cfdeea;border-radius:14px;color:#123a6d;background:#eaf4ff;font-weight:850}.htp-u1-final-tabs button b,.htp-u1-final-tabs button small{display:block}.htp-u1-final-tabs button small{margin-top:3px;color:#45647e}.htp-u1-final-tabs button.is-active{border-color:#0b376f;color:#fff;background:#0b376f}.htp-u1-final-tabs button.is-active small{color:#e8f2ff}
.htp-u1-opening{background:linear-gradient(135deg,#fff7d8,#fff)!important}.htp-u1-order{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:20px}.htp-u1-order span{padding:12px 8px;border-radius:12px;color:#0b376f;background:#fff;text-align:center;font-weight:850;box-shadow:0 4px 0 #dbe5eb}
.htp-u1-vi{color:#3f5e78!important;font-weight:650}.htp-u1-final-block{margin:30px 0;padding:clamp(24px,4vw,44px);border:1px solid #d2dfe8;border-radius:30px;background:#fff;box-shadow:0 16px 46px rgba(9,47,104,.08);scroll-margin-top:180px}.htp-u1-final-block>header{display:flex;align-items:center;gap:15px;margin-bottom:22px}.htp-u1-final-block>header>span{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border-radius:17px;color:#fff;background:#ef5b62;font-size:1.25rem;font-weight:950;box-shadow:4px 5px 0 #ffd85b}.htp-u1-final-block>header small{color:#d7424b;font-weight:900;letter-spacing:.09em}.htp-u1-final-block>header h2{margin:4px 0 2px;color:#0b376f;font-size:clamp(1.65rem,3vw,2.55rem)}.htp-u1-final-block>header p{margin:0;color:#3f5e78;font-weight:700}
.htp-u1-four-steps{display:grid;gap:18px}.htp-u1-four-steps>article{padding:22px;border:1px solid #d8e3ea;border-radius:20px;background:#f8fbfd}.htp-u1-four-steps>article>b,.htp-u1-four-steps>article>small{display:block}.htp-u1-four-steps>article>b{color:#0b376f;font-size:1.08rem}.htp-u1-four-steps>article>small{margin:3px 0 15px;color:#4b657c;font-weight:700}.htp-u1-phrase-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.htp-u1-phrase-cards p,.htp-u1-memory p{margin:0;padding:14px;border-radius:14px;color:#17324f;background:#fff;border:1px solid #cfe0eb}.htp-u1-phrase-cards strong,.htp-u1-phrase-cards span,.htp-u1-memory strong,.htp-u1-memory span{display:block}.htp-u1-phrase-cards strong,.htp-u1-memory strong{color:#0b376f;font-size:1.08rem}.htp-u1-phrase-cards span,.htp-u1-memory span{margin-top:4px;color:#3e5c76}.htp-u1-memory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.htp-u1-big-phrase{padding:16px;border-left:5px solid #ef5b62;color:#0b376f;background:#fff3c4;font-size:1.35rem;font-weight:900}
.htp-u1-final-dialogue{display:grid;gap:8px}.htp-u1-final-dialogue p{margin:0;padding:13px 16px;border-radius:13px;color:#0b376f;background:#fff}.htp-u1-final-dialogue p:nth-child(even){margin-left:7%;background:#fff5d4}.htp-u1-final-dialogue p:nth-child(odd){margin-right:7%;background:#eaf4ff}.htp-u1-writing-code{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.htp-u1-writing-code span{padding:7px 10px;border-radius:99px;background:#fff;color:#17324f;font-size:.78rem;font-weight:800}.htp-u1-copy-lines{padding:20px;border:1px solid #dfd2ba;border-radius:12px;background:repeating-linear-gradient(#fffdf8 0 34px,#dfe8ed 35px 36px);line-height:36px}.htp-u1-copy-lines p{margin:0}.htp-u1-copy-lines .red{color:#c7333c;font-weight:900}.htp-u1-copy-lines .blue{color:#084a96;font-weight:750}.htp-u1-copy-lines .blue span{color:#202a33;font-weight:550}
.htp-u1-number-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.htp-u1-number-grid span{display:grid;place-items:center;min-height:65px;border-radius:13px;color:#0b376f;background:#fff;border:1px solid #cddfe9}.htp-u1-number-grid b,.htp-u1-number-grid small{display:block}.htp-u1-number-grid b{font-size:1.3rem}.htp-u1-number-grid small{color:#3f5e78;font-weight:700}
.htp-u1-final-block .htp-teacher-audio,.htp-u1-final-practice .htp-teacher-audio{grid-template-columns:minmax(0,1fr) minmax(250px,.65fr);color:#fff!important;background:#0b376f!important;border-color:#0b376f}.htp-u1-final-block .htp-teacher-audio h3,.htp-u1-final-block .htp-teacher-audio p,.htp-u1-final-block .htp-teacher-audio summary,.htp-u1-final-block .htp-teacher-audio details,.htp-u1-final-practice .htp-teacher-audio h3,.htp-u1-final-practice .htp-teacher-audio p,.htp-u1-final-practice .htp-teacher-audio summary,.htp-u1-final-practice .htp-teacher-audio details{color:#fff!important}.htp-u1-final-block .htp-audio-label,.htp-u1-final-practice .htp-audio-label{color:#ffd85b!important}.htp-u1-final-block .htp-audio-pending,.htp-u1-final-practice .htp-audio-pending{border-color:#86a8cc;color:#e8f2ff!important;background:#174f91!important}.htp-u1-final-block .htp-audio-pending strong,.htp-u1-final-block .htp-audio-pending span,.htp-u1-final-practice .htp-audio-pending strong,.htp-u1-final-practice .htp-audio-pending span{color:#fff!important}.htp-u1-final-block .htp-teacher-audio details,.htp-u1-final-practice .htp-teacher-audio details{border-color:#6286ad}
.htp-u1-final-practice>h2{margin-bottom:4px}.htp-u1-practice-part{margin:24px 0;padding:24px;border:1px solid #d5e1e8;border-radius:22px;background:#fff}.htp-u1-practice-part>header{display:flex;align-items:center;gap:13px;margin-bottom:16px}.htp-u1-practice-part>header>span{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;color:#fff;background:#ef5b62;font-weight:950}.htp-u1-practice-part h3{margin:0;color:#0b376f}.htp-u1-practice-part header p{margin:3px 0 0;color:#3f5e78}.htp-u1-practice-part blockquote{padding:22px;border-left:5px solid #ffd85b;color:#0b376f;background:#fff7d5;font-size:1.08rem;line-height:1.7}.htp-u1-live-question{margin-top:16px;padding:17px;border-radius:16px;background:#edf6ff}.htp-u1-live-question p{color:#17324f}.htp-u1-live-question p span{color:#47637b}.htp-u1-live-question button,.htp-u1-sort button,.htp-u1-id-card button{margin:4px;padding:9px 12px;border:2px solid #bdd1df;border-radius:10px;color:#0b376f;background:#fff;font-weight:800}.htp-u1-live-question button.is-correct{color:#145b34;background:#dff6e8;border-color:#71b98d}.htp-u1-live-question button.is-wrong{color:#7e2222;background:#ffe2e0;border-color:#d68d8d}.htp-u1-live-question>strong,.htp-u1-sort>strong,.htp-u1-id-card>strong{display:block;margin-top:10px;color:#174f91}
.htp-u1-sort{padding:18px;border-radius:16px;background:#f1f7fb}.htp-u1-sort-bank{display:flex;flex-wrap:wrap;gap:6px}.htp-u1-sort-line{min-height:48px;padding:12px;border:2px dashed #9cb9cb;border-radius:10px;color:#0b376f;background:#fff;font-size:1.05rem;font-weight:800}.htp-u1-lucas{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(280px,1.2fr);gap:18px;margin-top:22px}.htp-u1-lucas figure{position:relative;overflow:hidden;margin:0;border-radius:18px;min-height:300px}.htp-u1-lucas img{width:100%;height:100%;object-fit:cover}.htp-u1-lucas figcaption{position:absolute;right:12px;bottom:12px;left:12px;padding:12px;border-radius:12px;color:#0b376f;background:rgba(255,255,255,.94);font-weight:900}.htp-u1-id-card{display:grid;gap:10px;padding:20px;border:2px dashed #c4d6e1;border-radius:18px}.htp-u1-id-card label{color:#0b376f;font-weight:800}.htp-u1-id-card input,.htp-u1-oral-grid textarea{width:100%;margin-top:5px;padding:11px;border:2px solid #b9cfdd;border-radius:10px;color:#17324f;background:#fff}.htp-u1-oral-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.htp-u1-oral-grid>div{padding:14px;border-radius:17px;background:#f5f9fc}.htp-u1-oral-grid .htp-teacher-audio{display:block;margin:0 0 12px}.htp-u1-oral-grid .htp-teacher-audio>div:first-child{margin-bottom:12px}
@media(max-width:900px){.htp-u1-order{grid-template-columns:repeat(3,1fr)}.htp-u1-number-grid{grid-template-columns:repeat(5,1fr)}.htp-u1-lucas,.htp-u1-oral-grid{grid-template-columns:1fr}.htp-u1-final-block .htp-teacher-audio,.htp-u1-final-practice .htp-teacher-audio{grid-template-columns:1fr}}
@media(max-width:640px){.htp-u1-final-tabs{top:8px}.htp-u1-final-tabs button{padding:10px 8px}.htp-u1-order{display:flex;overflow:auto}.htp-u1-order span{min-width:110px}.htp-u1-final-block{padding:22px 16px;border-radius:22px}.htp-u1-phrase-cards,.htp-u1-memory{grid-template-columns:1fr}.htp-u1-number-grid{grid-template-columns:repeat(3,1fr)}.htp-u1-four-steps>article{padding:17px}.htp-u1-writing-code{display:grid}.htp-u1-practice-part{padding:18px 14px}.htp-u1-live-question button{width:100%;margin:4px 0}}

/* 4.1.1 — transfert fidèle de la maquette, isolé du thème WordPress */
.htp-lesson-experience .htp-u1-maquette{--u1-navy:#0b376f;--u1-blue:#174f91;--u1-coral:#ef5b62;--u1-yellow:#ffd85b;--u1-ink:#17324f;--u1-muted:#536b83;color:var(--u1-ink);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
.htp-lesson-experience .htp-u1-maquette *{box-sizing:border-box}.htp-lesson-experience .htp-u1-maquette>.htp-learning-path--six{display:none!important}
.htp-lesson-experience .htp-u1-maquette>.htp-u1-hero{margin:0 0 26px;border-color:#d8e3e9;border-radius:30px;background:linear-gradient(120deg,#fff,#fff5d7);box-shadow:0 18px 52px rgba(14,50,83,.12)}
.htp-lesson-experience .htp-u1-maquette>.htp-u1-hero .htp-u1-hero__copy{padding:clamp(28px,4vw,52px)}.htp-lesson-experience .htp-u1-maquette>.htp-u1-hero h1{color:var(--u1-navy);font-size:clamp(2.35rem,4.8vw,4.6rem)}
.htp-u1-maquette-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;width:100%}.htp-u1-maquette-stage{min-width:0;width:100%;padding:0 0 8px;border:1px solid #dce6ea;border-radius:28px;background:#fff;box-shadow:0 18px 55px rgba(14,50,83,.12)}
.htp-u1-maquette-roadmap{display:none!important}
.htp-u1-maquette-stage>.htp-u1-final-tabs{top:76px;margin:0;padding:12px 18px;border:0;border-radius:27px 27px 0 0;background:var(--u1-navy);box-shadow:none}.htp-u1-maquette-stage>.htp-u1-final-tabs button{border-color:#6f8eaf;color:#e7f1fb;background:transparent}.htp-u1-maquette-stage>.htp-u1-final-tabs button small{color:#bdd2e6}.htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active{border-color:var(--u1-yellow);color:var(--u1-navy);background:var(--u1-yellow);box-shadow:0 5px 0 #d8ab22}.htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active small{color:#64551e}
.htp-u1-maquette-stage [data-u1-final-panel]{padding:0 24px}.htp-u1-maquette-stage .htp-u1-opening{margin-top:24px}.htp-u1-maquette-stage .htp-u1-final-block{padding:0;overflow:hidden;border-radius:24px}.htp-u1-maquette-stage .htp-u1-final-block>header{margin:0;padding:25px 28px 20px;background:linear-gradient(120deg,#fff,#fff8e8)}
.htp-u1-step-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px 14px;background:var(--u1-navy)}.htp-u1-step-tabs button{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;column-gap:8px;min-height:62px;padding:9px;border:1px solid #6383a5;border-radius:12px;color:#e7f1fb;background:transparent;text-align:left}.htp-u1-step-tabs button>span{grid-row:1/3;display:grid;place-items:center;width:27px;height:27px;border:2px solid #91abc5;border-radius:50%;font-weight:950}.htp-u1-step-tabs button>b,.htp-u1-step-tabs button>small{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.htp-u1-step-tabs button>b{font-size:.75rem}.htp-u1-step-tabs button>small{color:#b8cee3;font-size:.62rem}.htp-u1-step-tabs button.is-active{border-color:var(--u1-yellow);color:var(--u1-navy);background:var(--u1-yellow);box-shadow:0 4px 0 #d5a91f;transform:translateY(-2px)}.htp-u1-step-tabs button.is-active>span{border-color:var(--u1-coral);color:#fff;background:var(--u1-coral)}.htp-u1-step-tabs button.is-active>small{color:#675821}
.htp-u1-maquette-stage .htp-u1-four-steps{display:block;padding:24px 28px 28px}.htp-u1-maquette-stage .htp-u1-four-steps>article{min-height:360px;padding:24px;border-color:#d8e4eb;background:#f7fbfe}.htp-u1-maquette-stage .htp-u1-four-steps>article[hidden]{display:none!important}.htp-u1-maquette-stage .htp-u1-four-steps>article>b{font-size:1.16rem}.htp-u1-maquette-stage .htp-u1-four-steps>article>small{font-size:.86rem}
.htp-u1-maquette-stage .htp-teacher-audio{color:#fff!important;background:var(--u1-navy)!important}.htp-u1-maquette-stage .htp-teacher-audio,.htp-u1-maquette-stage .htp-teacher-audio *{text-shadow:none!important}.htp-u1-maquette-stage .htp-teacher-audio h3,.htp-u1-maquette-stage .htp-teacher-audio p,.htp-u1-maquette-stage .htp-teacher-audio summary,.htp-u1-maquette-stage .htp-teacher-audio details{color:#fff!important}.htp-u1-maquette-stage .htp-audio-label{color:var(--u1-yellow)!important}.htp-u1-maquette-stage .htp-audio-pending{color:#eef6ff!important;background:var(--u1-blue)!important}.htp-u1-maquette-stage .htp-audio-pending strong,.htp-u1-maquette-stage .htp-audio-pending span{color:#fff!important}
.htp-u1-writing-rule{margin-top:24px;padding:18px 20px;border:2px solid #e5c55a;border-radius:17px;color:#17324f;background:#fff7cf}.htp-u1-writing-rule>strong{display:block;color:#0b376f}.htp-u1-writing-rule>p{margin:6px 0;color:#36536d}.htp-u1-writing-rule .htp-u1-writing-code{margin-bottom:0}.htp-u1-copy-lines{max-height:none}.htp-u1-copy-lines .blue{overflow-wrap:anywhere}
@media(max-width:1050px){.htp-u1-maquette-layout{grid-template-columns:1fr}.htp-u1-maquette-roadmap{position:static;display:flex;overflow-x:auto;gap:7px}.htp-u1-maquette-roadmap>small{display:none}.htp-u1-maquette-roadmap a{flex:0 0 205px}.htp-u1-maquette-stage>.htp-u1-final-tabs{top:8px}}
@media(max-width:700px){.htp-lesson-experience .htp-u1-maquette>.htp-u1-hero{border-radius:22px}.htp-u1-maquette-stage{border-radius:20px}.htp-u1-maquette-stage>.htp-u1-final-tabs{grid-template-columns:1fr 1fr;border-radius:19px 19px 0 0;padding:9px}.htp-u1-maquette-stage [data-u1-final-panel]{padding:0 11px}.htp-u1-maquette-stage .htp-u1-final-block>header{padding:21px 17px}.htp-u1-step-tabs{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.htp-u1-maquette-stage .htp-u1-four-steps{padding:17px 12px 20px}.htp-u1-maquette-stage .htp-u1-four-steps>article{min-height:0;padding:17px}.htp-u1-maquette-roadmap a{flex-basis:185px}}

/* 4.2.1 — onglets plus sobres, sans modification du reste de la leçon */
.htp-u1-maquette-stage>.htp-u1-final-tabs{
	border-bottom:1px solid #e3d7ca;
	background:#f7f1e9;
}
.htp-u1-maquette-stage>.htp-u1-final-tabs button{
	border-color:#d8c9bb;
	color:#17324f;
	background:#fffdf9;
	box-shadow:none;
}
.htp-u1-maquette-stage>.htp-u1-final-tabs button small{color:#6d7b87}
.htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active{
	border-color:#dba6a3;
	color:#17324f;
	background:#f3d9d6;
	box-shadow:0 3px 0 #d8b3ae;
}
.htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active small{color:#655b5a}
.htp-u1-step-tabs{
	border-top:1px solid #e7ddd2;
	border-bottom:1px solid #e7ddd2;
	background:#f8f3ed;
}
.htp-u1-step-tabs button{
	border-color:#d8cfc6;
	color:#29445d;
	background:#fffdf9;
}
.htp-u1-step-tabs button>span{border-color:#b8c3cc;color:#536b7e;background:#f5f7f8}
.htp-u1-step-tabs button>small{color:#71808c}
.htp-u1-step-tabs button.is-active{
	border-color:#dba6a3;
	color:#17324f;
	background:#f3d9d6;
	box-shadow:0 3px 0 #d8b3ae;
}
.htp-u1-step-tabs button.is-active>span{border-color:#d86569;color:#fff;background:#d86569}
.htp-u1-step-tabs button.is-active>small{color:#655b5a}

/* 4.2.2 — modèle validé : rose poudré, ivoire et zéro jaune dans l’Unité 1 */
.htp-expedition-lesson--u1{--core-yellow:#c96368}
.htp-expedition-lesson--u1 .htp-u1-maquette{--u1-yellow:#d9a4a2}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs{
	border-bottom-color:#d8cbc4;
	background:#f6f1eb;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button{
	border-color:#d8d0c8;
	color:#17324f;
	background:#fffdf9;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active{
	border-color:#cfa4a2;
	color:#17324f;
	background:#ead6d2;
	box-shadow:0 3px 0 #cfa4a2;
}
.htp-expedition-lesson--u1 .htp-u1-step-tabs{border-color:#ddd3cb;background:#f6f1eb}
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active>span{border-color:#c96368;background:#c96368}
.htp-expedition-lesson--u1 .htp-u1-opening{background:linear-gradient(135deg,#f6efec,#fff)!important}
.htp-expedition-lesson--u1 .htp-u1-maquette>.htp-u1-hero{background:linear-gradient(120deg,#fff,#f7efec)}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage .htp-u1-final-block>header{background:linear-gradient(120deg,#fff,#f6efec)}
.htp-expedition-lesson--u1 .htp-u1-final-block>header>span{box-shadow:4px 5px 0 #d8c4c0}
.htp-expedition-lesson--u1 .htp-u1-big-phrase{background:#f2e2df}
.htp-expedition-lesson--u1 .htp-u1-final-dialogue p:nth-child(even){background:#f4e9e6}
.htp-expedition-lesson--u1 .htp-u1-final-block .htp-audio-label,
.htp-expedition-lesson--u1 .htp-u1-final-practice .htp-audio-label{color:#f0cbc8!important}
.htp-expedition-lesson--u1 .htp-u1-writing-rule{border-color:#d7b5b1;background:#f5e7e4}
.htp-expedition-lesson--u1 .htp-u1-practice-part blockquote{border-left-color:#c96368;background:#f7eeeb}
.htp-expedition-lesson--u1 .htp-check-feedback{background:#f0dfdc}
.htp-expedition-lesson--u1 .htp-mini-game,
.htp-expedition-lesson--u1 .htp-mini-game.is-completed{background:radial-gradient(circle at 100% 0,rgba(201,99,104,.12),transparent 27%),linear-gradient(145deg,#eef6f2,#fffdf9)}
.htp-expedition-lesson--u1 .htp-mini-xp{color:#fff;background:#c96368;box-shadow:0 8px 20px rgba(201,99,104,.18)}
.htp-expedition-lesson--u1 .htp-real-text{border-left-color:#c96368;background:#f7eeeb}
.htp-expedition-lesson--u1 .htp-rule-cards b,
.htp-expedition-lesson--u1 .htp-production .htp-kicker,
.htp-expedition-lesson--u1 .htp-success-check strong{color:#f0cbc8}
.htp-expedition-lesson--u1 .htp-module-nav a:hover{color:#17324f!important;background:#ead6d2}
.htp-expedition-lesson--u1 .htp-lesson-meta span,
.htp-expedition-lesson--u1 .htp-u1-final-tabs button,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif!important}
.htp-u1-active .htp-hud-home{color:#17324f;background:#ead6d2}
.htp-u1-active .htp-student-hud strong{color:#f0cbc8!important}
.htp-u1-active .htp-core-button:focus-visible,
.htp-u1-active .htp-quiz input:focus-visible+span{outline-color:rgba(201,99,104,.65)}
.htp-expedition-lesson--u1 [data-u1-final-panel="practice"]>.htp-mini-game,
.htp-expedition-lesson--u1 [data-u1-final-panel="practice"]>.htp-quiz{margin-right:0;margin-left:0}

/* 4.2.4 — onglets bleu clair selon la référence validée */
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs,
.htp-expedition-lesson--u1 .htp-u1-step-tabs{
	border-color:#c7d9e2;
	background:#eef5f8;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button{
	border-color:#c7d9e2;
	color:#17324f;
	background:#f8fbfc;
	box-shadow:none;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button small,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button small{color:#667d8e}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active{
	border-color:#9fc3d4;
	color:#0b376f;
	background:#dcecf4;
	box-shadow:0 3px 0 #b9d3df;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active small,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active small{color:#49697d}
.htp-expedition-lesson--u1 .htp-u1-step-tabs button>span{border-color:#aac5d2;color:#294f6e;background:#edf6fa}
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active>span{border-color:#6fa6bd;color:#fff;background:#6fa6bd}

/* 4.2.5 — cahier lisible : fond blanc et lignes adaptées au contenu */
.htp-expedition-lesson--u1 .htp-u1-copy-lines{
	padding:18px 22px;
	border-color:#d7e0e5;
	background:#fff;
	line-height:1.55;
}
.htp-expedition-lesson--u1 .htp-u1-copy-lines>p{
	min-height:0;
	margin:0;
	padding:10px 0 9px;
	border-bottom:1px solid #dbe4e9;
	line-height:1.55;
	white-space:normal;
}
.htp-expedition-lesson--u1 .htp-u1-copy-lines>p:last-child{border-bottom:0}

/* 4.2.6 — onglet actif foncé, onglet fermé clair */
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs,
.htp-expedition-lesson--u1 .htp-u1-step-tabs{border-color:#cad8e0;background:#f3f7f9}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button{
	border-color:#cbd8df;
	color:#17324f;
	background:#f7fafc;
	box-shadow:none;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button small,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button small{color:#607789}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active{
	border-color:#263f70;
	color:#fff;
	background:#263f70;
	box-shadow:none;
}
.htp-expedition-lesson--u1 .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active small,
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active small{color:#dce7f1}
.htp-expedition-lesson--u1 .htp-u1-step-tabs button.is-active>span{border-color:#fff;color:#263f70;background:#fff}
.htp-expedition-lesson--u1 .htp-u1-writing-rule--compact{
	margin:0 0 14px;
	padding:11px 14px;
	border:1px solid #d7e1e6;
	border-radius:10px;
	color:#40586d;
	background:#f7fafb;
	font-size:.78rem;
	line-height:1.4;
}
.htp-expedition-lesson--u1 .htp-u1-writing-rule--compact strong,
.htp-expedition-lesson--u1 .htp-u1-writing-rule--compact small{display:inline;color:#17324f}
.htp-expedition-lesson--u1 .htp-u1-writing-rule--compact small::before{content:" · "}
.htp-expedition-lesson--u1 .htp-u1-writing-rule--compact p{margin:4px 0 0;padding:0;border:0;color:#52697b;line-height:1.4}

/* 4.3.0 — système visuel commun aux six unités */
.htp-expedition-lesson{
	--core-yellow:#c96368;
	font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}
.htp-expedition-lesson .htp-u1-maquette{
	--u1-yellow:#263f70;
	--u1-navy:#263f70;
	--u1-blue:#31588b;
	font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}
.htp-expedition-lesson .htp-u1-maquette-stage>.htp-u1-final-tabs,
.htp-expedition-lesson .htp-u1-step-tabs{
	border-color:#cad8e0;
	background:#f3f7f9;
}
.htp-expedition-lesson .htp-u1-maquette-stage>.htp-u1-final-tabs button,
.htp-expedition-lesson .htp-u1-step-tabs button{
	border-color:#cbd8df;
	color:#17324f;
	background:#f7fafc;
	box-shadow:none;
	font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif!important;
}
.htp-expedition-lesson .htp-u1-maquette-stage>.htp-u1-final-tabs button small,
.htp-expedition-lesson .htp-u1-step-tabs button small{color:#607789}
.htp-expedition-lesson .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active,
.htp-expedition-lesson .htp-u1-step-tabs button.is-active{
	border-color:#263f70;
	color:#fff;
	background:#263f70;
	box-shadow:none;
}
.htp-expedition-lesson .htp-u1-maquette-stage>.htp-u1-final-tabs button.is-active small,
.htp-expedition-lesson .htp-u1-step-tabs button.is-active small{color:#dce7f1}
.htp-expedition-lesson .htp-u1-step-tabs button.is-active>span{border-color:#fff;color:#263f70;background:#fff}
.htp-expedition-lesson .htp-u1-maquette>.htp-u1-hero{
	border-color:#d8e3e9;
	background:linear-gradient(120deg,#fff,#f3f7f9);
}
.htp-expedition-lesson .htp-lesson-meta span{
	border-color:#cadbe4;
	color:#17324f;
	background:#f2f7fa;
	font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif!important;
}
.htp-course-standard .htp-standard-hero{margin-bottom:26px}
.htp-course-standard .htp-standard-hero .htp-u1-title-vi{margin-top:9px;color:#4d6579;font-size:1rem;line-height:1.55}
.htp-course-standard .htp-standard-hero figure{min-height:360px}
.htp-course-standard .htp-standard-hero figure img{height:100%;object-fit:cover}
.htp-course-standard .htp-standard-hero figcaption{color:#17324f;background:rgba(255,255,255,.94)}
.htp-course-standard .htp-u1-maquette-stage [data-u1-final-panel]{padding:24px}
.htp-course-standard #htp-comprendre>.htp-discovery{
	margin:0 0 28px;
	padding:clamp(22px,4vw,42px);
	border:1px solid #d8e3e9;
	border-radius:24px;
	color:#17324f;
	background:#fff;
	box-shadow:0 14px 38px rgba(14,50,83,.08);
}
.htp-course-standard #htp-comprendre>.htp-discovery>.htp-kicker,
.htp-course-standard #htp-comprendre>.htp-discovery>h2{display:none}
.htp-course-standard .htp-discovery h3{color:#263f70}
.htp-course-standard .htp-discovery p,
.htp-course-standard .htp-discovery li{color:#24394d;line-height:1.72}
.htp-course-standard .htp-objectives,
.htp-course-standard .htp-language-table,
.htp-course-standard .htp-conjugation-grid>div,
.htp-course-standard .htp-vocab-grid>div,
.htp-course-standard .htp-example{
	border-color:#d6e1e7;
	color:#17324f;
	background:#f8fbfc;
}
.htp-course-standard .htp-example{border-left-color:#c96368}
.htp-course-standard .htp-mission{border-color:#d7e2e8;color:#17324f;background:#f2f7fa}
.htp-course-standard .htp-mission strong{color:#a64149}
.htp-course-standard .htp-standard-practice{
	margin:0 0 24px;
	padding:24px 26px;
	border:1px solid #d8e3e9;
	border-radius:20px;
	color:#17324f;
	background:#fff;
}
.htp-course-standard .htp-standard-practice h2{margin:6px 0;color:#263f70}
.htp-course-standard .htp-standard-practice p{margin:0;color:#4d6579}
.htp-expedition-lesson .htp-example,
.htp-expedition-lesson .htp-pronunciation,
.htp-expedition-lesson .htp-error,
.htp-expedition-lesson .htp-real-text,
.htp-expedition-lesson .htp-u1-practice-part blockquote{border-left-color:#c96368;background:#fff}
.htp-expedition-lesson .htp-speak-button--slow,
.htp-expedition-lesson .htp-mission-help button,
.htp-expedition-lesson .htp-game-step,
.htp-expedition-lesson .htp-story-beat__prompts b{color:#17324f;background:#edf5f8}
.htp-expedition-lesson .htp-game-step__icon,
.htp-expedition-lesson .htp-game-reward>span{background:#c9dfe9}
.htp-expedition-lesson .htp-mini-xp{color:#fff;background:#c96368;box-shadow:0 8px 20px rgba(201,99,104,.18)}
.htp-expedition-lesson .htp-mission-progress i,
.htp-expedition-lesson .htp-progress-track span{background:linear-gradient(90deg,#c96368,#31588b)}
.htp-expedition-lesson .htp-game-score strong,
.htp-expedition-lesson .htp-mission strong,
.htp-expedition-lesson .htp-dialogue strong,
.htp-expedition-lesson .htp-story strong,
.htp-expedition-lesson .htp-memory h2,
.htp-expedition-lesson .htp-memory strong,
.htp-expedition-lesson .htp-recorder__status strong{color:#f0cbc8}
.htp-course-active .htp-hud-home{color:#17324f;background:#dcecf4}
.htp-course-active .htp-student-hud strong{color:#dcecf4!important}
@media(max-width:700px){
	.htp-course-standard .htp-standard-hero figure{min-height:240px}
	.htp-course-standard .htp-u1-maquette-stage [data-u1-final-panel]{padding:15px 11px}
	.htp-course-standard #htp-comprendre>.htp-discovery{padding:20px 16px;border-radius:18px}
	.htp-course-standard .htp-standard-practice{padding:20px 16px}
}

/* 4.4.0 — même maquette et mêmes cartes audio dans les 18 leçons */
.htp-course-standard .htp-standard-mini-block{margin:0}
.htp-course-standard .htp-standard-mini-block .htp-u1-four-steps>article{background:#f8fbfd}
.htp-course-standard .htp-standard-mini-block #htp-comprendre>.htp-discovery{box-shadow:none}
.htp-expedition-lesson .htp-pronunciation-lab--cards,
.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-lab{
	grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr);
	gap:34px;
	margin:18px 0 0;
	padding:clamp(24px,4vw,40px);
	border:2px solid #263f70;
	border-radius:28px;
	color:#17324f;
	background:#dceff4;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list,
.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list article,
.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list article{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	min-height:190px;
	padding:22px;
	border:1px solid #c5d6df;
	border-radius:20px;
	background:#fff;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list article>p,
.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list article>p{
	margin:0 0 20px;
	color:#17324f;
	font-size:1.08rem;
	font-weight:850;
	line-height:1.5;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list article>div,
.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list article>div{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	width:100%;
	margin-top:auto;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-speak-button,
.htp-expedition-lesson .htp-standard-mini-block .htp-speak-button{
	width:100%;
	min-height:48px;
	border:1px solid #263f70;
	border-radius:8px;
	color:#fff!important;
	background:#263f70;
}
.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-speak-button--slow,
.htp-expedition-lesson .htp-standard-mini-block .htp-speak-button--slow{
	color:#17324f!important;
	background:#edf5f8;
}
.htp-expedition-lesson .htp-speak-button:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}
.htp-expedition-lesson .htp-audio-awaiting{display:block;margin-top:10px;color:#61788a;font-size:.72rem;font-weight:700;text-align:center}
@media(max-width:900px){
	.htp-expedition-lesson .htp-pronunciation-lab--cards,
	.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-lab{grid-template-columns:1fr}
}
@media(max-width:640px){
	.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list,
	.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list{grid-template-columns:1fr}
	.htp-expedition-lesson .htp-pronunciation-lab--cards .htp-pronunciation-list article,
	.htp-expedition-lesson .htp-standard-mini-block .htp-pronunciation-list article{min-height:0;padding:17px}
}

/* 4.5.0 — l’Unité 2 reprend exactement le cahier blanc validé de l’Unité 1 */
.htp-expedition-lesson--u2 .htp-u1-copy-lines{
	padding:18px 22px;
	border-color:#d7e0e5;
	background:#fff;
	line-height:1.55;
}
.htp-expedition-lesson--u2 .htp-u1-copy-lines>p{
	min-height:0;
	margin:0;
	padding:10px 0 9px;
	border-bottom:1px solid #dbe4e9;
	line-height:1.55;
	white-space:normal;
}
.htp-expedition-lesson--u2 .htp-u1-copy-lines>p:last-child{border-bottom:0}
.htp-expedition-lesson--u2 .htp-u1-writing-rule--compact{
	margin:0 0 14px;
	padding:11px 14px;
	border:1px solid #d7e1e6;
	border-radius:10px;
	color:#40586d;
	background:#f7fafb;
	font-size:.78rem;
	line-height:1.4;
}
.htp-expedition-lesson--u2 .htp-u1-writing-rule--compact strong,
.htp-expedition-lesson--u2 .htp-u1-writing-rule--compact small{display:inline;color:#17324f}
.htp-expedition-lesson--u2 .htp-u1-writing-rule--compact small::before{content:" · "}
.htp-expedition-lesson--u2 .htp-u1-writing-rule--compact p{margin:4px 0 0;padding:0;border:0;color:#52697b;line-height:1.4}

/* 4.6.0 — explications pédagogiques expertes, lisibles en français puis en vietnamien */
.htp-expedition-lesson .htp-expert-explanation{
	margin:22px 0 0;
	padding:20px;
	border:1px solid #c8dce6;
	border-left:5px solid #31588b;
	border-radius:16px;
	color:#17324f;
	background:#f2f8fb;
}
.htp-expedition-lesson .htp-expert-explanation>header{margin:0 0 15px}
.htp-expedition-lesson .htp-expert-explanation>header small{
	display:block;
	margin-bottom:4px;
	color:#a64046;
	font-size:.72rem;
	font-weight:850;
	letter-spacing:.08em;
	text-transform:uppercase;
}
.htp-expedition-lesson .htp-expert-explanation>header strong{font-size:1.08rem}
.htp-expedition-lesson .htp-expert-explanation>header span{display:block;margin-top:3px;color:#52697b;font-size:.86rem}
.htp-expedition-lesson .htp-expert-explanation__grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
}
.htp-expedition-lesson .htp-expert-explanation__grid article{
	padding:15px;
	border:1px solid #d7e5eb;
	border-radius:12px;
	background:#fff;
}
.htp-expedition-lesson .htp-expert-explanation__grid b{display:block;margin-bottom:7px;color:#17324f}
.htp-expedition-lesson .htp-expert-explanation__grid p{margin:0;color:#244d73;line-height:1.55}
.htp-expedition-lesson .htp-expert-explanation__grid p+small{
	display:block;
	margin-top:7px;
	color:#26333d;
	font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
	font-size:.88rem;
	line-height:1.55;
}
@media(max-width:800px){
	.htp-expedition-lesson .htp-expert-explanation__grid{grid-template-columns:1fr}
}

/* Bài 1 exacte — composants strictement issus de la trame validée */
.htp-u1-bai-one-exact .htp-u1-definition,
.htp-u1-bai-one-exact .htp-u1-cultural-note,
.htp-u1-bai-one-exact .htp-u1-simple-rule{
	margin:16px 0;
	padding:17px 19px;
	border:1px solid #d6e2e8;
	border-radius:14px;
	color:#17324f;
	background:#fff;
}
.htp-u1-bai-one-exact .htp-u1-definition p,
.htp-u1-bai-one-exact .htp-u1-cultural-note p,
.htp-u1-bai-one-exact .htp-u1-simple-rule p{margin:6px 0;line-height:1.55}
.htp-u1-use-grid,
.htp-u1-contrast,
.htp-u1-alphabet-groups,
.htp-u1-review-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
	margin:18px 0;
}
.htp-u1-use-grid article,
.htp-u1-contrast article,
.htp-u1-alphabet-groups article,
.htp-u1-review-grid article{
	padding:16px;
	border:1px solid #d4e1e7;
	border-radius:14px;
	background:#fff;
}
.htp-u1-use-grid small,
.htp-u1-contrast small,
.htp-u1-review-grid small{display:block;margin:5px 0;color:#4f687b;line-height:1.45}
.htp-u1-departures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.htp-u1-departures p{margin:0;padding:14px;border:1px solid #d7e4ea;border-radius:12px;background:#fff}
.htp-u1-departures strong,.htp-u1-departures span{display:block}
.htp-u1-departures span{margin-top:5px;color:#435d71;font-size:.9rem}
.htp-u1-alphabet-groups{grid-template-columns:repeat(4,minmax(0,1fr))}
.htp-u1-alphabet-groups p{margin:7px 0 0;word-spacing:.35em}
.htp-u1-number-groups{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.htp-u1-number-groups span{padding:9px 14px;border:1px solid #cbdce4;border-radius:999px;color:#17324f;background:#f2f7fa;font-weight:800}
.htp-u1-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.htp-u1-exact-answer{display:block;margin:16px 0;padding:15px;border:1px solid #d6e2e8;border-radius:14px;background:#fff}
.htp-u1-exact-answer>b,.htp-u1-exact-answer>small{display:block}
.htp-u1-exact-answer>small{margin:4px 0 10px;color:#50697c}
.htp-u1-exact-answer>span{display:flex;gap:9px}
.htp-u1-exact-answer input{flex:1;min-width:0;padding:11px 12px;border:1px solid #b9cad4;border-radius:9px;color:#17324f;background:#fff}
.htp-u1-exact-answer button,
.htp-u1-exact-id button,
.htp-u1-dialogue-order>button{padding:11px 15px;border:0;border-radius:9px;color:#fff;background:#263f70;font-weight:800;cursor:pointer}
.htp-u1-exact-answer>strong,.htp-u1-exact-id>strong,.htp-u1-dialogue-order>strong{display:block;margin-top:10px;color:#17324f}
.htp-u1-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.htp-u1-answer-grid .htp-u1-exact-answer{margin:0}
.htp-u1-spelling-model{padding:20px;border:1px solid #cadbe3;border-radius:14px;text-align:center;background:#f4f8fa}
.htp-u1-spelling-model b{font-size:1.6rem;letter-spacing:.12em}.htp-u1-spelling-model p{margin:8px 0 0}
.htp-u1-exact-id{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.htp-u1-exact-id label{font-weight:800}.htp-u1-exact-id input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #b9cad4;border-radius:9px;background:#fff}
.htp-u1-exact-id button,.htp-u1-exact-id>strong{grid-column:1/-1}
.htp-u1-dialogue-order{padding:17px;border:1px solid #d5e1e7;border-radius:14px;background:#fff}
.htp-u1-dialogue-order>:first-child{display:flex;flex-wrap:wrap;gap:9px}
.htp-u1-dialogue-order>:first-child button{padding:10px 13px;border:1px solid #becfd8;border-radius:9px;color:#17324f;background:#f2f7fa;cursor:pointer}
.htp-u1-dialogue-order>:first-child button:disabled{opacity:.45}
.htp-u1-dialogue-order ol{min-height:70px;margin:16px 0;padding:13px 13px 13px 38px;border:1px dashed #aebfca;border-radius:10px;background:#f9fbfc}
.htp-u1-dialogue-order>button{margin-right:8px}

/* Unité 1 · Leçon 1 — cahier des charges FR/VI. */
.htp-u1-cdc{--cdc-navy:#123a6d;--cdc-ink:#17324f;--cdc-blue:#edf6fb;--cdc-line:#cbdbe4;--cdc-coral:#bd5359;--cdc-green:#e8f5ee;max-width:1320px;margin:0 auto;color:var(--cdc-ink);font-family:Inter,"Noto Sans",Arial,sans-serif}
.htp-u1-cdc [lang="vi"]{font-family:"Noto Sans",Inter,Arial,sans-serif}
.htp-u1-cdc-hero{padding:clamp(26px,5vw,58px);border:1px solid #d7e3e9;border-radius:30px;background:linear-gradient(130deg,#fff 0%,#f1f8fb 100%);box-shadow:0 18px 45px rgba(18,58,109,.1)}
.htp-u1-cdc-hero h1{margin:8px 0;color:var(--cdc-navy);font-size:clamp(2.8rem,7vw,6rem);line-height:.95}
.htp-u1-cdc-hero>p{margin:8px 0 24px;color:#526b7d;font-size:1.1rem}
.htp-u1-cdc .htp-lesson-meta{display:flex;flex-wrap:wrap;gap:10px}
.htp-u1-cdc .htp-lesson-meta span{padding:10px 15px;border:1px solid var(--cdc-line);border-radius:999px;color:var(--cdc-navy);background:#f4f9fc;font-weight:850}
.htp-u1-cdc>.htp-u1-final-tabs{position:sticky;top:76px;z-index:25;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0;padding:10px;border:1px solid var(--cdc-line);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(18,58,109,.12)}
.htp-u1-cdc>.htp-u1-final-tabs button{min-height:70px;border:2px solid var(--cdc-line);border-radius:15px;color:var(--cdc-navy);background:#f1f7fb;font:inherit;cursor:pointer}
.htp-u1-cdc>.htp-u1-final-tabs button b,.htp-u1-cdc>.htp-u1-final-tabs button small{display:block}
.htp-u1-cdc>.htp-u1-final-tabs button b{font-size:1.08rem}.htp-u1-cdc>.htp-u1-final-tabs button small{margin-top:4px;color:#667b8b}
.htp-u1-cdc>.htp-u1-final-tabs button.is-active{border-color:var(--cdc-navy);color:#fff;background:var(--cdc-navy)}
.htp-u1-cdc>.htp-u1-final-tabs button.is-active small{color:#d8e8f4}
.htp-u1-cdc-phases{position:sticky;top:166px;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;border:1px solid var(--cdc-line);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 8px 25px rgba(18,58,109,.08);backdrop-filter:blur(10px)}
.htp-u1-cdc-phases span{padding:11px 8px;border-radius:12px;color:#718391;text-align:center;font-weight:850}.htp-u1-cdc-phases small{display:block;margin-top:2px;font-weight:650}
.htp-u1-cdc-phases span.is-active{color:#fff;background:var(--cdc-navy)}.htp-u1-cdc-phases span.is-done{color:#26634a;background:var(--cdc-green)}
.htp-u1-cdc-progress{position:relative;height:9px;margin:16px 4px 28px;border-radius:999px;background:#e2edf2;overflow:visible}.htp-u1-cdc-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cdc-coral),#d87976);transition:width .3s ease}.htp-u1-cdc-progress span{position:absolute;right:0;top:15px;color:#647b8b;font-size:.82rem;font-weight:850}
.htp-u1-cdc-screen{border:1px solid var(--cdc-line);border-radius:28px;background:#fff;box-shadow:0 18px 42px rgba(18,58,109,.09);overflow:hidden}
.htp-u1-cdc-screen__header{display:flex;align-items:center;gap:18px;padding:24px clamp(20px,4vw,40px);border-bottom:1px solid var(--cdc-line);background:#f4f9fc}.htp-u1-cdc-screen__header>span{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:16px;color:#fff;background:var(--cdc-coral);font-weight:950}.htp-u1-cdc-screen__header h2{margin:0;color:var(--cdc-navy);font-size:clamp(1.55rem,3.5vw,2.4rem)}.htp-u1-cdc-screen__header p{margin:4px 0 0;color:#5b7486}
.htp-u1-cdc-screen__body{padding:clamp(22px,4vw,46px)}
.htp-u1-cdc-screen__nav{display:flex;justify-content:space-between;gap:14px;padding:18px clamp(20px,4vw,40px);border-top:1px solid var(--cdc-line);background:#f8fbfc}.htp-u1-cdc-screen__nav button{min-width:160px;padding:12px 18px;border:0;border-radius:13px;color:#fff;background:var(--cdc-navy);font:inherit;font-weight:850;cursor:pointer}.htp-u1-cdc-screen__nav button small{display:block;margin-top:2px;color:#d7e7f1}.htp-u1-cdc-screen__nav button:disabled{opacity:.35;cursor:not-allowed}
.htp-u1-cdc-welcome{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;align-items:center;gap:clamp(24px,5vw,60px)}.htp-u1-cdc-welcome figure{margin:0}.htp-u1-cdc-welcome img{display:block;width:100%;border-radius:22px}.htp-u1-cdc-welcome h3{margin:0;color:var(--cdc-navy);font-size:clamp(1.7rem,4vw,2.8rem)}.htp-u1-cdc-welcome>div>p{font-size:1.08rem;line-height:1.65}
.htp-u1-cdc-welcome__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.htp-u1-cdc-welcome__actions .htp-core-button{min-width:170px}.htp-u1-cdc-welcome__actions .htp-core-button small{display:block;margin-top:2px}.htp-u1-cdc-welcome__actions .htp-core-button--secondary{border:2px solid var(--cdc-navy);color:var(--cdc-navy);background:#fff}.htp-u1-cdc-welcome__actions button:disabled{opacity:.48;cursor:not-allowed}
.htp-u1-cdc-explanation{margin:0 0 26px;padding:22px 24px;border-left:5px solid var(--cdc-coral);border-radius:12px;background:#f7eeeb;line-height:1.7}.htp-u1-cdc-explanation>strong{display:block;margin-bottom:7px;color:#9e3f45;text-transform:uppercase;letter-spacing:.04em}
.htp-u1-cdc-language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}.htp-u1-cdc-language-grid article{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--cdc-line);border-radius:16px;background:#fff}.htp-u1-cdc-language-grid article>strong{color:var(--cdc-navy);font-size:1.35rem}.htp-u1-cdc-language-grid article>span{color:#253c4e}.htp-u1-cdc-language-grid article>small{display:flex;flex-direction:column;gap:2px;margin-top:5px;color:#607686}
.htp-u1-cdc-audio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.htp-u1-cdc-audio{display:flex;flex-direction:column;gap:10px;padding:17px;border:1px solid var(--cdc-line);border-radius:15px;background:#f7fbfd}.htp-u1-cdc-audio__id{color:var(--cdc-coral);font-size:.75rem;font-weight:950;letter-spacing:.06em}.htp-u1-cdc-audio__buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.htp-u1-cdc-audio .htp-speak-button{min-height:48px;padding:8px 10px;border:1px solid var(--cdc-navy);border-radius:10px;color:#fff;background:var(--cdc-navy);font:inherit;font-weight:850}.htp-u1-cdc-audio .htp-speak-button--slow{color:var(--cdc-navy);background:#fff}.htp-u1-cdc-audio .htp-speak-button small{display:block;margin-top:2px;font-weight:600}.htp-u1-cdc-audio .htp-speak-button:disabled{opacity:.48}.htp-u1-cdc-transcript{margin:0;color:var(--cdc-ink);font-weight:800}.htp-u1-cdc-reveal{align-self:flex-start;padding:6px 0;border:0;color:var(--cdc-navy);background:transparent;font-weight:800;text-decoration:underline;cursor:pointer}.htp-u1-cdc .htp-audio-awaiting{color:#7b6161}
.htp-u1-cdc-micro{margin-top:32px;padding:clamp(18px,3vw,30px);border:1px solid #b9d5c6;border-radius:20px;background:#f6fbf8}.htp-u1-cdc-micro>h3{margin:0 0 18px;color:var(--cdc-navy)}.htp-u1-cdc-micro>h3 small{display:block;margin-top:4px;color:#587263;font-size:.8rem}
.htp-u1-cdc-question{margin:12px 0;padding:18px;border:1px solid #d4e2e8;border-radius:15px;background:#fff}.htp-u1-cdc-question>p{margin:0 0 10px}.htp-u1-cdc-question>p span{display:block;margin-top:4px;color:#5b7181}.htp-u1-cdc-options{display:flex;flex-wrap:wrap;gap:8px}.htp-u1-cdc-options button{padding:10px 14px;border:2px solid #c6d6df;border-radius:10px;color:var(--cdc-navy);background:#fff;font:inherit;font-weight:800;cursor:pointer}.htp-u1-cdc-options button.is-correct{border-color:#62aa7e;color:#185a35;background:#e1f5e9}.htp-u1-cdc-options button.is-wrong{border-color:#d18686;color:#812b2b;background:#fde7e5}.htp-u1-cdc-question>strong{display:block;margin-top:10px;color:#3f596b}
.htp-u1-cdc-input{display:block;margin:12px 0;padding:18px;border:1px solid #d4e2e8;border-radius:15px;background:#fff}.htp-u1-cdc-input>b,.htp-u1-cdc-input>small{display:block}.htp-u1-cdc-input>small{margin-top:3px;color:#607686}.htp-u1-cdc-input>span{display:flex;gap:8px;margin-top:11px}.htp-u1-cdc-input input{flex:1;min-width:0;padding:11px;border:2px solid #c6d6df;border-radius:10px;font:inherit}.htp-u1-cdc-input button{padding:10px 15px;border:0;border-radius:10px;color:#fff;background:var(--cdc-navy);font:inherit;font-weight:800}.htp-u1-cdc-input>strong{display:block;margin-top:8px}
.htp-u1-cdc-bilan{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding:18px 20px;border-radius:15px;background:var(--cdc-blue)}.htp-u1-cdc-bilan span{color:var(--cdc-coral);font-weight:900}.htp-u1-cdc-bilan strong{color:var(--cdc-navy)}.htp-u1-cdc-bilan small{color:#556d7e}
.htp-u1-cdc-dialogue,.htp-u1-cdc-structures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.htp-u1-cdc-dialogue{align-items:center;padding:22px;border:1px solid var(--cdc-line);border-radius:18px;background:#f5f9fb}.htp-u1-cdc-dialogue>.htp-u1-cdc-audio{grid-column:1/-1}.htp-u1-cdc-structures article{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--cdc-line);border-radius:17px;background:#fff}.htp-u1-cdc-structures small{color:var(--cdc-coral);font-weight:900}.htp-u1-cdc-structures strong{color:var(--cdc-navy);font-size:1.4rem}.htp-u1-cdc-structures span{color:#253b4d}
.htp-u1-cdc-notion{border:1px solid var(--cdc-line);border-radius:20px;background:#fff;overflow:hidden}
.htp-u1-cdc-notion__tabs{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:8px;padding:9px;border-bottom:1px solid var(--cdc-line);background:#f7fafc;overflow-x:auto}
.htp-u1-cdc-notion__tabs button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;min-height:76px;padding:12px 14px;border:1px solid #cedce5;border-radius:14px;color:var(--cdc-navy);background:#f1f7fb;font:inherit;text-align:left;cursor:pointer}
.htp-u1-cdc-notion__tabs button>span{display:grid;grid-row:1/3;place-items:center;width:34px;height:34px;border:1px solid #b8cad6;border-radius:50%;font-weight:950}
.htp-u1-cdc-notion__tabs button>b{align-self:end;font-size:.92rem;line-height:1.2}.htp-u1-cdc-notion__tabs button>small{align-self:start;color:#607687;font-size:.76rem;line-height:1.2}
.htp-u1-cdc-notion__tabs button.is-active{border-color:var(--cdc-navy);color:#fff;background:var(--cdc-navy)}.htp-u1-cdc-notion__tabs button.is-active>span{border-color:#d9e7f1}.htp-u1-cdc-notion__tabs button.is-active>small{color:#d9e7f1}
.htp-u1-cdc-notion__panels{padding:clamp(18px,3vw,30px)}.htp-u1-cdc-notion__panels>[hidden]{display:none!important}
.htp-u1-cdc-notebook{border:1px solid #d5dde3;border-radius:16px;background:#fff;overflow:hidden}
.htp-u1-cdc-notebook>aside{padding:12px 18px;border-bottom:1px solid #e0e6ea;background:#f6f9fb}.htp-u1-cdc-notebook>aside strong,.htp-u1-cdc-notebook>aside small{display:block}.htp-u1-cdc-notebook>aside strong{color:#435a6c;font-size:.88rem}.htp-u1-cdc-notebook>aside small{margin-top:3px;color:#111;font-size:.8rem}
.htp-u1-cdc-notebook>h3{margin:0;padding:18px 20px 12px;color:#a43e43;font-size:1.25rem}.htp-u1-cdc-notebook>h3 small{display:block;margin-top:3px;color:#111;font-size:.76em;font-weight:600}
.htp-u1-cdc-notebook>p{display:grid;gap:4px;margin:0;padding:12px 20px;border-top:1px solid #dce4e9;background:#fff;line-height:1.45}.htp-u1-cdc-notebook>p strong{color:#255399}.htp-u1-cdc-notebook>p span{color:#111}
.htp-u1-cdc-training{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:24px 0;padding:0;counter-reset:training}.htp-u1-cdc-training li{list-style:none;padding:14px 16px;border-radius:12px;background:var(--cdc-blue)}
.htp-u1-cdc-number-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.htp-u1-cdc-number-grid>article{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:12px;border:1px solid var(--cdc-line);border-radius:14px;background:#fff}.htp-u1-cdc-number-grid>article>b{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#fff;background:var(--cdc-navy)}.htp-u1-cdc-number-grid>article>.htp-u1-cdc-audio{grid-column:1/-1;padding:10px}.htp-u1-cdc-number-grid .htp-u1-cdc-audio__buttons{grid-template-columns:1fr 1fr}.htp-u1-cdc-number-grid .htp-u1-cdc-transcript{display:none}
.htp-u1-cdc-alphabet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.htp-u1-cdc-alphabet>article{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:12px;border:1px solid var(--cdc-line);border-radius:14px}.htp-u1-cdc-alphabet>article>b{font-size:1.55rem;color:var(--cdc-navy)}.htp-u1-cdc-alphabet>article>.htp-u1-cdc-audio{grid-column:1/-1;padding:9px}.htp-u1-cdc-alphabet .htp-u1-cdc-audio__buttons{grid-template-columns:1fr 1fr}.htp-u1-cdc-alphabet .htp-u1-cdc-transcript{display:none}.htp-u1-cdc-note{padding:16px 18px;border-radius:12px;background:var(--cdc-blue)}
.htp-u1-cdc-recorder{margin-top:18px;padding:20px;border:1px solid var(--cdc-line);border-radius:16px;background:#fff}.htp-u1-cdc-recorder button{margin:4px;padding:11px 15px;border:0;border-radius:10px;color:#fff;background:var(--cdc-navy);font:inherit;font-weight:800}.htp-u1-cdc-recorder button:disabled{opacity:.4}.htp-u1-cdc-recorder audio{display:block;width:100%;margin-top:14px}
.htp-u1-cdc-listen-passes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.htp-u1-cdc-listen-passes button{padding:14px;border:2px solid var(--cdc-line);border-radius:13px;color:var(--cdc-navy);background:#fff;font:inherit;font-weight:850}.htp-u1-cdc-listen-passes button small{display:block;margin-top:3px}.htp-u1-cdc-listen-passes button.is-active{border-color:var(--cdc-navy);color:#fff;background:var(--cdc-navy)}
.htp-u1-cdc-master-dialogue{display:grid;gap:9px;margin:22px 0}.htp-u1-cdc-master-dialogue article{max-width:78%;padding:13px 16px;border-radius:14px 14px 14px 3px;background:var(--cdc-blue)}.htp-u1-cdc-master-dialogue article:nth-child(even){justify-self:end;border-radius:14px 14px 3px 14px;background:#f7eeeb}.htp-u1-cdc-master-dialogue b{color:var(--cdc-coral)}.htp-u1-cdc-master-dialogue p,.htp-u1-cdc-master-dialogue small{display:block;margin:3px 0}.htp-u1-cdc-master-dialogue small{color:#516a7b}
.htp-u1-cdc-mission{display:grid;gap:16px}.htp-u1-cdc-mission>header{padding:24px;border-radius:18px;color:#fff;background:var(--cdc-navy)}.htp-u1-cdc-mission>header span{color:#f1bfc0;font-weight:950;letter-spacing:.08em}.htp-u1-cdc-mission>header h3{margin:8px 0}.htp-u1-cdc-mission>header p{margin:0;color:#d9e7f2}.htp-u1-cdc-mission>ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;counter-reset:mission}.htp-u1-cdc-mission>ol li{list-style:none;padding:16px;border:1px solid var(--cdc-line);border-radius:12px;background:#f8fbfc}
.htp-u1-cdc-practice{padding:clamp(22px,4vw,42px);border:1px solid var(--cdc-line);border-radius:26px;background:#fff}.htp-u1-cdc-practice>header h2{margin:8px 0;color:var(--cdc-navy)}.htp-u1-cdc-practice-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.htp-u1-cdc-practice-links button{min-height:80px;padding:14px;border:2px solid var(--cdc-line);border-radius:15px;color:var(--cdc-navy);background:#f5f9fb;font:inherit;font-weight:900}.htp-u1-cdc-practice-links button small{display:block;margin-top:4px;color:#62798a}.htp-u1-cdc-final-status{margin-top:26px;padding:24px;border-radius:18px;background:var(--cdc-blue)}.htp-u1-cdc-final-status h2{margin:0;color:var(--cdc-navy)}.htp-u1-cdc-final-status ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0}.htp-u1-cdc-final-status li{list-style:none;padding:14px;border-radius:12px;background:#fff;font-weight:800}.htp-u1-cdc-final-status li small{display:block;margin-top:4px;color:#62798a;font-weight:600}
.htp-u1-cdc~.htp-quiz,.htp-u1-cdc~.htp-mini-game{max-width:1320px;margin:26px auto}.htp-quiz-production{display:block;padding:16px;border:1px solid #d5e1e8;border-radius:12px;background:#f7fbfd}.htp-quiz-production span{display:block;margin-bottom:8px;color:#123a6d;font-weight:850}.htp-quiz-production input{width:100%;padding:12px;border:2px solid #c5d7e0;border-radius:9px;font:inherit}
@media(max-width:900px){.htp-u1-cdc-phases{top:150px;overflow-x:auto;grid-template-columns:repeat(5,minmax(125px,1fr))}.htp-u1-cdc-welcome{grid-template-columns:1fr}.htp-u1-cdc-language-grid,.htp-u1-cdc-audio-grid,.htp-u1-cdc-dialogue,.htp-u1-cdc-structures{grid-template-columns:1fr}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(4,minmax(170px,1fr))}.htp-u1-cdc-number-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-u1-cdc-alphabet{grid-template-columns:repeat(3,minmax(0,1fr))}.htp-u1-cdc-practice-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.htp-u1-cdc>.htp-u1-final-tabs{top:8px}.htp-u1-cdc-phases{top:98px}.htp-u1-cdc-screen{border-radius:20px}.htp-u1-cdc-screen__header{align-items:flex-start;padding:18px 16px}.htp-u1-cdc-screen__header>span{flex-basis:42px;height:42px}.htp-u1-cdc-screen__body{padding:18px 14px}.htp-u1-cdc-screen__nav{padding:14px}.htp-u1-cdc-screen__nav button{min-width:0;flex:1;padding:11px 8px}.htp-u1-cdc-notion{border-radius:15px}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(4,minmax(155px,1fr));padding:7px}.htp-u1-cdc-notion__tabs button{min-height:68px;padding:9px}.htp-u1-cdc-notion__panels{padding:14px 10px}.htp-u1-cdc-notebook>p{padding:11px 14px}.htp-u1-cdc-audio__buttons{grid-template-columns:1fr}.htp-u1-cdc-options{display:grid}.htp-u1-cdc-options button{width:100%}.htp-u1-cdc-input>span{display:grid}.htp-u1-cdc-number-grid{grid-template-columns:1fr 1fr}.htp-u1-cdc-alphabet{grid-template-columns:1fr 1fr}.htp-u1-cdc-training,.htp-u1-cdc-mission>ol,.htp-u1-cdc-final-status ul{grid-template-columns:1fr}.htp-u1-cdc-listen-passes{grid-template-columns:1fr}.htp-u1-cdc-practice-links{grid-template-columns:1fr}.htp-u1-cdc-master-dialogue article{max-width:92%}}
@media(max-width:640px){.htp-u1-cdc-number-grid .htp-u1-cdc-audio__buttons,.htp-u1-cdc-alphabet .htp-u1-cdc-audio__buttons{grid-template-columns:1fr}.htp-u1-cdc-welcome__actions{display:grid}.htp-u1-cdc-welcome__actions .htp-core-button{width:100%}}

/* Unité 1 · Bài 1 V2 autonome — corrections ciblées de l’audit. */
.htp-u1-cdc{overflow:clip}
.htp-u1-cdc.is-started .htp-u1-cdc-hero{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:14px 20px;border-radius:18px}
.htp-u1-cdc.is-started .htp-u1-cdc-hero .htp-kicker{font-size:.72rem}.htp-u1-cdc.is-started .htp-u1-cdc-hero h1{margin:0;font-size:1.35rem;line-height:1.1}.htp-u1-cdc.is-started .htp-u1-cdc-hero>p{margin:0;font-size:.88rem}.htp-u1-cdc.is-started .htp-u1-cdc-hero .htp-lesson-meta{margin-left:auto}.htp-u1-cdc.is-started .htp-u1-cdc-hero .htp-lesson-meta span{padding:6px 10px;font-size:.75rem}
.htp-u1-cdc-howto{margin-top:20px;padding:18px;border:1px solid var(--cdc-line);border-radius:16px;background:#f5f9fb}.htp-u1-cdc-howto h4{margin:0 0 12px;color:var(--cdc-navy);font-size:1.15rem}.htp-u1-cdc-howto h4 small,.htp-u1-cdc-howto li small,.htp-u1-cdc-howto>p small{display:block;margin-top:2px;color:#526b7d}.htp-u1-cdc-howto ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0}.htp-u1-cdc-howto li{list-style:none;padding:10px;border-radius:10px;background:#fff}.htp-u1-cdc-howto>p{margin:14px 0 0}
.htp-u1-cdc-progress{margin-top:18px}.htp-u1-cdc-progress span{padding:2px 7px;border-radius:7px;background:#fff}
.htp-u1-cdc-note strong,.htp-u1-cdc-note span{display:block}.htp-u1-cdc-note span{margin-top:4px;color:#273e50}
.htp-u1-cdc-et-toi{margin-bottom:20px;padding:18px 20px;border-left:5px solid var(--cdc-coral);border-radius:13px;background:#f7eeeb}.htp-u1-cdc-et-toi>strong,.htp-u1-cdc-et-toi>span{display:block}.htp-u1-cdc-et-toi>strong{color:var(--cdc-navy);font-size:1.35rem}.htp-u1-cdc-et-toi>span{margin-top:2px;color:#273e50}.htp-u1-cdc-et-toi p{margin:8px 0 0}
.htp-u1-cdc-mission>header h3{color:#fff!important}.htp-u1-cdc-mission>header p{color:#dceaf4!important}.htp-u1-cdc-mission>ol li strong,.htp-u1-cdc-mission>ol li small{display:block}.htp-u1-cdc-mission>ol li strong{color:var(--cdc-navy)}.htp-u1-cdc-mission>ol li small{margin-top:5px;color:#425c70}.htp-u1-cdc-recorder button small,.htp-u1-cdc-quiz-link small{display:block;margin-top:2px}.htp-u1-cdc-quiz-link{justify-self:start;text-align:center;text-decoration:none}
.htp-u1-cdc-practice-set{display:grid;gap:18px;margin-top:24px}.htp-u1-cdc-practice-set>article{min-width:0;padding:clamp(18px,3vw,28px);border:1px solid var(--cdc-line);border-radius:20px;background:#f8fbfc}.htp-u1-cdc-practice-set>article>h3{margin:0 0 16px;color:var(--cdc-navy)}.htp-u1-cdc-practice-set>article>h3 small{display:block;margin-top:4px;color:#5d7384;font-size:.75em}.htp-u1-cdc-profile-name{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:14px;background:#fff}.htp-u1-cdc-profile-name strong{color:var(--cdc-navy);font-size:1.5rem}.htp-u1-cdc-profile-name span{color:#536a7b}
.htp-u1-cdc-practice-set .htp-u1-dialogue-order>div{display:flex;flex-wrap:wrap;gap:8px}.htp-u1-cdc-practice-set .htp-u1-dialogue-order button{margin:4px;padding:10px 13px;border:1px solid #b9cad5;border-radius:10px;color:var(--cdc-navy);background:#fff;font:inherit;font-weight:800}.htp-u1-cdc-practice-set .htp-u1-dialogue-order>[data-u1-dialogue-check]{color:#fff;background:var(--cdc-navy)}.htp-u1-cdc-practice-set [data-u1-dialogue-line]{min-height:58px;padding:12px 12px 12px 34px;border:1px dashed #a8bdca;border-radius:12px;background:#fff}.htp-u1-cdc-practice-set [data-u1-dialogue-line] li{margin:4px 0}
.htp-u1-cdc-input button small,.htp-u1-exact-id button small,.htp-u1-exact-id label small{display:block;margin-top:2px}.htp-u1-exact-id label small{color:#607686;font-weight:600}
.htp-u1-cdc-input>em{display:block;margin-top:8px;color:var(--cdc-navy);font-style:normal;font-weight:800}.htp-u1-cdc-language-grid article>i{font-size:1.6rem;font-style:normal;line-height:1}
@media(max-width:900px){.htp-u1-cdc-howto ol{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.htp-u1-cdc.is-started .htp-u1-cdc-hero .htp-lesson-meta{width:100%;margin-left:0}}
@media(max-width:640px){.htp-u1-cdc{width:100%;max-width:100%}.htp-u1-cdc>.htp-u1-final-tabs{position:relative;top:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:14px 0;padding:7px}.htp-u1-cdc>.htp-u1-final-tabs button{min-width:0;min-height:58px;padding:8px 5px}.htp-u1-cdc.is-started .htp-u1-cdc-hero{display:grid;padding:12px 14px}.htp-u1-cdc.is-started .htp-u1-cdc-hero .htp-lesson-meta{display:none}.htp-u1-cdc-howto ol{grid-template-columns:1fr}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}.htp-u1-cdc-notion__tabs button{grid-template-columns:28px minmax(0,1fr);min-width:0;min-height:64px;padding:8px 7px;column-gap:7px}.htp-u1-cdc-notion__tabs button>span{width:27px;height:27px}.htp-u1-cdc-notion__tabs button>b{font-size:.78rem;overflow-wrap:anywhere}.htp-u1-cdc-notion__tabs button>small{font-size:.68rem;overflow-wrap:anywhere}.htp-u1-cdc-screen__header>div{min-width:0}.htp-u1-cdc-screen__header h2{overflow-wrap:anywhere}.htp-u1-cdc-number-grid,.htp-u1-cdc-alphabet{grid-template-columns:1fr}.htp-u1-cdc-profile-name{align-items:flex-start;flex-direction:column}.htp-u1-cdc-practice{padding:16px 10px}.htp-u1-cdc-practice-set>article{padding:16px 10px}.htp-u1-cdc-mission>ol{grid-template-columns:1fr}}
.htp-u1-exact-mission{margin-top:30px;padding:clamp(22px,4vw,36px);border:2px solid #263f70;border-radius:24px;background:#eef5f8}
.htp-u1-inline-practice{
	margin:18px 0 34px;
	padding:clamp(18px,3vw,28px);
	border:1px solid #cbdce4;
	border-radius:20px;
	background:#f4f8fa;
}
.htp-u1-inline-practice>h2{margin:7px 0 18px;color:#17324f}
.htp-u1-evaluation{display:grid;gap:8px;margin-top:20px}
.htp-u1-evaluation label{padding:11px 13px;border:1px solid #d1dfe6;border-radius:10px;background:#fff;font-weight:750}
.htp-u1-evaluation small{display:block;margin:4px 0 0 24px;color:#4f6678;font-weight:500}
@media(max-width:760px){
	.htp-u1-use-grid,.htp-u1-contrast,.htp-u1-alphabet-groups,.htp-u1-review-grid,.htp-u1-answer-grid,.htp-u1-exact-id{grid-template-columns:1fr}
	.htp-u1-departures{grid-template-columns:1fr}
	.htp-u1-exact-answer>span{flex-direction:column}
}

/* Unité 1 · Bài 2 — même système visuel, audios volontairement compacts. */
.htp-u1b2-hero{display:grid;grid-template-columns:1.25fr minmax(260px,.75fr);align-items:center;gap:28px}
.htp-u1b2-hero h1{font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.02}
.htp-u1b2-hero>img{display:block;width:100%;max-height:330px;object-fit:cover;border-radius:22px}
.htp-u1b2-explanation{margin:18px 0;padding:18px 20px;border-left:5px solid var(--cdc-coral);border-radius:12px;background:#f7eeeb}
.htp-u1b2-explanation p{margin:5px 0;line-height:1.65}.htp-u1b2-explanation p[lang="fr"]{color:var(--cdc-navy);font-weight:750}.htp-u1b2-explanation p[lang="vi"]{color:#263b4c}
.htp-u1b2-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0}
.htp-u1b2-cards article{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--cdc-line);border-radius:14px;background:#fff}
.htp-u1b2-cards strong{color:var(--cdc-navy);font-size:1.16rem}.htp-u1b2-cards span{color:#253b4d}.htp-u1b2-cards small{color:#637887}
.htp-u1b2-audio-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.htp-u1b2-audio{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(120px,1fr);align-items:center;gap:8px;padding:8px 10px;border:1px solid #d4e1e7;border-radius:11px;background:#f8fbfc}
.htp-u1b2-audio>span{display:none}
.htp-u1b2-audio>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.htp-u1b2-audio>div>button{min-height:38px;padding:5px 8px;border:1px solid var(--cdc-navy);border-radius:8px;color:#fff;background:var(--cdc-navy);font:inherit;font-size:.78rem;font-weight:850;cursor:pointer}
.htp-u1b2-audio>div>button+button{color:var(--cdc-navy);background:#fff}.htp-u1b2-audio button small{display:block;font-size:.72em}.htp-u1b2-audio button:disabled{opacity:.42;cursor:not-allowed}
.htp-u1b2-audio>p{margin:0;color:var(--cdc-navy);font-weight:800}.htp-u1b2-audio>.htp-u1b2-reveal{grid-column:2;padding:5px 7px;border:0;color:var(--cdc-navy);background:transparent;font:inherit;font-size:.75rem;font-weight:800;text-decoration:underline}.htp-u1b2-reveal small{display:block}
.htp-u1b2-nationalities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0}.htp-u1b2-nationalities article{display:grid;gap:4px;padding:14px;border:1px solid var(--cdc-line);border-radius:12px;background:#fff}.htp-u1b2-nationalities b{color:var(--cdc-coral)}
.htp-u1b2-practices{display:grid;gap:15px}.htp-u1b2-practices>header{padding:25px;border:1px solid var(--cdc-line);border-radius:20px;background:#f3f8fb}.htp-u1b2-practices>header h2{margin:7px 0;color:var(--cdc-navy)}
.htp-u1b2-practices>article{padding:20px;border:1px solid var(--cdc-line);border-radius:17px;background:#fff}.htp-u1b2-practices>article>h3{margin:0 0 13px;color:var(--cdc-navy)}.htp-u1b2-practices>article>h3 small{display:block;margin-top:3px;color:#657b8a;font-size:.74em}
.htp-u1b2-profile,.htp-u1b2-mission-model{display:flex;flex-wrap:wrap;gap:8px;padding:15px;border-radius:12px;background:#edf6fb}.htp-u1b2-profile>*{padding:7px 10px;border-radius:8px;background:#fff}.htp-u1b2-mission-model{display:grid}.htp-u1b2-mission-model p{margin:0;padding:10px 12px;border-radius:9px;color:var(--cdc-navy);background:#fff;font-weight:750}
.htp-u1b2-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.htp-u1b2-checks span{padding:11px 13px;border:1px solid var(--cdc-line);border-radius:10px;color:var(--cdc-navy);background:#fff;font-weight:800}.htp-u1b2-checks small{display:block;margin-top:3px;color:#617787;font-weight:600}
@media(max-width:900px){.htp-u1b2-hero{grid-template-columns:1fr}.htp-u1b2-nationalities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.htp-u1b2-cards,.htp-u1b2-audio-list,.htp-u1b2-nationalities,.htp-u1b2-checks{grid-template-columns:1fr}.htp-u1b2-audio{grid-template-columns:1fr;padding:8px}.htp-u1b2-audio>div{grid-template-columns:1fr 1fr}.htp-u1b2-audio>p,.htp-u1b2-audio>.htp-u1b2-reveal{grid-column:auto}}

/* Bài 1 · finition bilingue et contraste WCAG. */
.htp-u1-cdc{--cdc-coral:#a64046;--cdc-ink:#17324f;color:#17324f}
.htp-u1-cdc [lang="vi"]{color:#4d6077}
.htp-u1-cdc .htp-u1-cdc-explanation{color:#17324f}.htp-u1-cdc .htp-u1-cdc-explanation>strong{color:#a64046}.htp-u1-cdc .htp-u1-cdc-explanation p[lang="fr"]{color:#17324f;font-weight:700}.htp-u1-cdc .htp-u1-cdc-explanation p[lang="vi"]{color:#4d6077}
.htp-u1-cdc .htp-u1-cdc-language-grid article>small,.htp-u1-cdc .htp-u1-cdc-language-grid article>small [lang="vi"],.htp-u1-cdc .htp-u1-cdc-screen__header p,.htp-u1-cdc .htp-u1-cdc-final-status li small{color:#4d6077}
.htp-u1-cdc .htp-u1-cdc-alphabet>article>small{color:#52657a;font-size:.76rem;line-height:1.2}.htp-u1-cdc .htp-u1-cdc-alphabet>article>b{font-size:1.8rem}
.htp-u1-cdc .htp-audio-awaiting,.htp-u1-cdc .htp-audio-awaiting span{display:block;color:#52657a}.htp-u1-cdc .htp-u1-cdc-reveal small{display:block;color:#52657a}
.htp-u1-cdc .htp-u1-final-tabs button.is-active,.htp-u1-cdc .htp-u1-final-tabs button.is-active b{color:#fff}.htp-u1-cdc .htp-u1-final-tabs button.is-active small{color:#cce2f6}
.htp-u1-cdc .htp-u1-cdc-notion__tabs button.is-active,.htp-u1-cdc .htp-u1-cdc-notion__tabs button.is-active b{color:#fff}.htp-u1-cdc .htp-u1-cdc-notion__tabs button.is-active small[lang="vi"]{color:#cce2f6}
.htp-u1-cdc .htp-u1-cdc-screen__nav button,.htp-u1-cdc .htp-u1-cdc-screen__nav button small,.htp-u1-cdc .htp-u1-cdc-mission>header,.htp-u1-cdc .htp-u1-cdc-mission>header h3{color:#fff}.htp-u1-cdc .htp-u1-cdc-screen__nav button small,.htp-u1-cdc .htp-u1-cdc-mission>header p[lang="vi"]{color:#cce2f6}
.htp-u1-cdc button,.htp-u1-cdc a{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.htp-u1-cdc button:focus-visible,.htp-u1-cdc a:focus-visible,.htp-u1-cdc input:focus-visible{outline:3px solid #0f3975;outline-offset:3px}.htp-u1-cdc button:not(:disabled):hover,.htp-u1-cdc a:hover{filter:brightness(.94)}
.htp-u1-cdc .htp-speak-button:disabled,.htp-u1-cdc button:disabled{border-color:#bdcbd5!important;color:#52657a!important;background:#e7edf1!important;opacity:1!important;cursor:not-allowed}.htp-u1-cdc .htp-speak-button:disabled small,.htp-u1-cdc button:disabled small{color:#52657a!important}
.htp-u1-cdc input.is-near{border-color:#9a6500!important;background:#fff8df!important}.htp-u1-cdc input.is-correct{border-color:#287147!important;background:#e8f5ee!important}.htp-u1-cdc input.is-wrong{border-color:#a64046!important;background:#fbecec!important}
.htp-u1-cdc .htp-u1-cdc-options button.is-correct{border-color:#287147;color:#185a35;background:#e8f5ee}.htp-u1-cdc .htp-u1-cdc-options button.is-wrong{border-color:#a64046;color:#762c32;background:#fbecec}
.htp-u1-cdc .htp-lesson-meta span{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px}.htp-u1-cdc .htp-lesson-meta span b{color:#123a6d}.htp-u1-cdc .htp-lesson-meta span small{color:#4d6077;font-weight:700}
@media(max-width:768px){.htp-u1-cdc{overflow-x:hidden}.htp-u1-cdc,.htp-u1-cdc *{box-sizing:border-box;max-width:100%}.htp-u1-cdc .htp-u1-cdc-screen__body,.htp-u1-cdc .htp-u1-cdc-notion__panels,.htp-u1-cdc .htp-u1-cdc-practice-set>article{min-width:0}.htp-u1-cdc .htp-u1-cdc-options,.htp-u1-cdc .htp-u1-cdc-input>span,.htp-u1-cdc .htp-u1-cdc-audio__buttons{width:100%}.htp-u1-cdc input,.htp-u1-cdc button,.htp-u1-cdc a{overflow-wrap:anywhere}.htp-u1-cdc .htp-u1-cdc-notion__tabs{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.htp-u1-cdc .htp-u1-exact-id{grid-template-columns:1fr}.htp-u1-cdc .htp-u1-exact-id button,.htp-u1-cdc .htp-u1-exact-id>strong{grid-column:1}}
@media(max-width:430px){.htp-u1-cdc-screen__body{padding:14px 9px}.htp-u1-cdc-notion__panels{padding:12px 7px}.htp-u1-cdc-notion__tabs button{grid-template-columns:24px minmax(0,1fr);padding:7px 5px}.htp-u1-cdc-notion__tabs button>span{width:24px;height:24px}.htp-u1-cdc-notion__tabs button>b{font-size:.74rem}.htp-u1-cdc-notion__tabs button>small{font-size:.65rem}.htp-u1-cdc-question,.htp-u1-cdc-input,.htp-u1-cdc-audio{padding:12px}.htp-u1-cdc-screen__nav{gap:7px;padding:10px}.htp-u1-cdc-screen__nav button{min-height:48px}}
@media(max-width:360px){.htp-u1-cdc-notion__tabs{grid-template-columns:1fr}.htp-u1-cdc>.htp-u1-final-tabs{grid-template-columns:1fr 1fr}.htp-u1-cdc>.htp-u1-final-tabs button b{font-size:.9rem}.htp-u1-cdc>.htp-u1-final-tabs button small{font-size:.7rem}.htp-u1-cdc-screen__header{gap:10px;padding:14px 10px}.htp-u1-cdc-screen__header>span{flex-basis:38px;height:38px}.htp-u1-cdc-screen__nav button{font-size:.82rem}}


/* Bài 1 · 4.9.2 — finition corrective sans refonte. */
.htp-u1-cdc .htp-speak-button:not(.htp-speak-button--slow) small[lang="vi"],
.htp-u1-cdc .htp-u1-cdc-listen-passes button.is-active small[lang="vi"],
.htp-u1-cdc .htp-u1-cdc-screen__nav button:not(:disabled) small,
.htp-u1-cdc .htp-u1-cdc-input button:not(:disabled) small,
.htp-u1-cdc .htp-u1-cdc-recorder button:not(:disabled) small,
.htp-u1-cdc .htp-u1-cdc-practice-set [data-u1-dialogue-check] small[lang="vi"]{color:#cce2f6!important}
.htp-u1-cdc .htp-speak-button:not(.htp-speak-button--slow):hover small[lang="vi"],
.htp-u1-cdc .htp-u1-cdc-listen-passes button.is-active:hover small[lang="vi"]{color:#fff!important}
.htp-u1-cdc .htp-u1-cdc-audio-choice{display:grid;gap:7px}.htp-u1-cdc .htp-u1-cdc-audio-choice>.htp-u1-cdc-audio{margin:0}
.htp-u1-cdc .htp-u1-cdc-audio-choice__label{display:block;color:#123a6d;font-weight:900}.htp-u1-cdc .htp-u1-cdc-audio-choice__label small{display:block;margin-top:2px;color:#4d6077;font-size:.78em}
.htp-expedition-lesson--u1 .htp-lesson-breadcrumb .htp-back-dashboard small{display:block;color:#cce2f6;font-size:.78em;font-weight:700}
.htp-expedition-lesson--u1 .htp-mobile-lesson-bar a small{display:block;color:#cce2f6;font-size:.86em;font-weight:700;line-height:1.15}
.htp-expedition-lesson--u1 .htp-mobile-lesson-bar a:hover small,.htp-expedition-lesson--u1 .htp-mobile-lesson-bar a:focus-visible small{color:#fff}
.htp-expedition-lesson--u1 .htp-quiz[data-bilingual="1"] .htp-core-button small,.htp-expedition-lesson--u1 .htp-mini-game--bilingual .htp-core-button small{display:block;margin-top:2px;color:#cce2f6}
.htp-expedition-lesson--u1 .htp-quiz[data-bilingual="1"] .htp-quiz-production span small{display:block;margin-top:3px;color:#4d6077;font-weight:700}
.htp-expedition-lesson--u1 .htp-mini-game--bilingual header .htp-mini-title-vi{margin:0 0 8px;color:#4d6077;font-weight:800}
.htp-expedition-lesson--u1 .htp-mini-game--bilingual header p[lang="fr"]{margin-top:0}.htp-expedition-lesson--u1 .htp-mini-game--bilingual header p[lang="vi"]{color:#4d6077}
@media(max-width:768px){#bai-1-contenu{scroll-margin-top:18px}.htp-expedition-lesson--u1 .htp-mobile-lesson-bar a{line-height:1.08}}

/* Unité 1 · Bài 1 — test UI/UX ciblé. Aucun autre cours n'est concerné. */
.htp-bai-one-experience{--b1-navy:#123a6d;--b1-ink:#17324f;--b1-blue:#edf6fb;--b1-line:#cbdde4;--b1-coral:#a64046;--b1-green:#e8f5ee;max-width:1320px;color:var(--b1-ink)}
.htp-bai-one-experience [hidden]{display:none!important}
.htp-bai-one-experience .htp-lesson-breadcrumb a small,.htp-bai-one-experience .htp-lesson-breadcrumb>span small{display:block;margin-top:2px;font-size:.78em;font-weight:700}
.htp-bai-one-experience .htp-lesson-breadcrumb .htp-back-dashboard small{color:#cce2f6}
.htp-bai-one-experience .htp-lesson-breadcrumb>div a+a small,.htp-bai-one-experience .htp-lesson-breadcrumb>span small{color:#52657a}
.htp-bai-one-experience .htp-mobile-lesson-bar{background:rgba(18,58,109,.97)}
.htp-bai-one-experience .htp-mobile-lesson-bar a,.htp-bai-one-experience .htp-mobile-lesson-bar a span{color:#fff}
.htp-bai-one-experience .htp-mobile-lesson-bar a small{color:#cce2f6}
.htp-bai-one-experience .htp-mini-game,.htp-bai-one-experience .htp-mini-game.is-completed{border-color:var(--b1-line);background:linear-gradient(145deg,var(--b1-blue),#fff)}
.htp-bai-one-experience .htp-mini-game header p[lang="vi"],.htp-bai-one-experience .htp-mini-game .htp-mini-title-vi{color:#4d6077}
.htp-bai-one-experience .htp-mini-game button:focus-visible,.htp-bai-one-experience .htp-quiz button:focus-visible,.htp-bai-one-experience .htp-quiz input:focus-visible,.htp-bai-one-experience .htp-remediation button:focus-visible,.htp-bai-one-experience .htp-remediation input:focus-visible{outline:3px solid #0f3975;outline-offset:3px}

.htp-bai-one-experience .htp-quiz[data-bilingual="1"]{max-width:980px;margin:44px auto 0;border:1px solid var(--b1-line);border-radius:28px;background:var(--b1-blue);box-shadow:0 16px 38px rgba(18,58,109,.1)}
.htp-bai-one-experience .htp-quiz[data-bilingual="1"]>h2{margin-bottom:4px;color:var(--b1-navy)}
.htp-bai-one-experience .htp-quiz[data-bilingual="1"]>p[lang="vi"]{margin-top:0;color:#4d6077}
.htp-bai-one-experience .htp-quiz-stepper{display:block;margin-top:26px}
.htp-bai-one-experience .htp-quiz-step-progress{margin-bottom:22px;padding:16px 18px;border:1px solid var(--b1-line);border-radius:16px;background:#fff}
.htp-bai-one-experience .htp-quiz-step-progress strong,.htp-bai-one-experience .htp-quiz-step-progress small{display:block}
.htp-bai-one-experience .htp-quiz-step-progress strong{color:var(--b1-navy);font-size:1.05rem}.htp-bai-one-experience .htp-quiz-step-progress small{margin-top:2px;color:#4d6077;font-weight:700}
.htp-bai-one-experience .htp-quiz-step-progress i{display:block;height:8px;margin-top:12px;overflow:hidden;border-radius:999px;background:#dfeaf0}.htp-bai-one-experience .htp-quiz-step-progress i span{display:block;height:100%;border-radius:inherit;background:var(--b1-coral);transition:width .25s ease}
.htp-bai-one-experience .htp-quiz-stepper .htp-quiz-step{min-height:390px;margin:0;padding:clamp(20px,4vw,34px);border:1px solid var(--b1-line);border-radius:20px;background:#fff}
.htp-bai-one-experience .htp-quiz-step legend{width:100%;padding:0 4px 14px;color:var(--b1-navy);font-size:1.12rem;line-height:1.45}.htp-bai-one-experience .htp-quiz-step legend span,.htp-bai-one-experience .htp-quiz-step legend small{display:block}.htp-bai-one-experience .htp-quiz-step legend small{margin-top:5px;color:#4d6077;font-size:.86em;font-weight:700}
.htp-bai-one-experience .htp-quiz-step>label:not(.htp-quiz-production){display:grid;grid-template-columns:26px 34px minmax(0,1fr);align-items:center;min-height:56px;margin:10px 0;padding:12px 14px;border:1px solid var(--b1-line);border-radius:13px;background:#fff}
.htp-bai-one-experience .htp-quiz-step>label:not(.htp-quiz-production):hover{border-color:#8eafbf;background:var(--b1-blue)}
.htp-bai-one-experience .htp-quiz-step>label:not(.htp-quiz-production):has(input:checked){border-color:var(--b1-navy);background:var(--b1-blue);box-shadow:inset 4px 0 0 var(--b1-navy)}
.htp-bai-one-experience .htp-quiz-letter{display:grid;width:30px;height:30px;place-items:center;border:1px solid var(--b1-line);border-radius:50%;color:var(--b1-navy);background:#fff}
.htp-bai-one-experience .htp-quiz-production{margin:12px 0;padding:18px;border-color:var(--b1-line);background:#fff}.htp-bai-one-experience .htp-quiz-production input{min-height:50px;color:var(--b1-ink);background:#fff}
.htp-bai-one-experience .htp-quiz-step-feedback{min-height:26px;margin:14px 0 10px;font-weight:800}.htp-bai-one-experience .htp-quiz-step-feedback.is-success{color:#185a35}.htp-bai-one-experience .htp-quiz-step-feedback.is-error{color:#7b282e}
.htp-bai-one-experience .htp-quiz-step>.htp-core-button{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:230px;min-height:52px;margin:16px 0 0 auto;background:var(--b1-navy)}
.htp-bai-one-experience .htp-quiz-step>.htp-core-button small{color:#cce2f6}
.htp-bai-one-experience .htp-quiz-step>.htp-core-button:disabled{border-color:#bdcbd5;color:#52657a;background:#e7edf1;opacity:1}

.htp-bai-one-experience .htp-remediation--bai-one{border:1px solid var(--b1-line);background:var(--b1-blue)}
.htp-bai-one-experience .htp-remediation--bai-one header h3{margin-bottom:2px;color:var(--b1-navy)}.htp-bai-one-experience .htp-remediation--bai-one header p[lang="vi"]{color:#4d6077}
.htp-bai-one-experience .htp-remediation--bai-one .htp-remediation-progress{background:#d9e6ec}.htp-bai-one-experience .htp-remediation--bai-one .htp-remediation-progress i{background:var(--b1-coral)}
.htp-bai-one-experience .htp-remediation-card{border-color:var(--b1-line)}.htp-bai-one-experience .htp-remediation-card h4 span,.htp-bai-one-experience .htp-remediation-card h4 small{display:block}.htp-bai-one-experience .htp-remediation-card h4 small{margin-top:4px;color:#4d6077;font-size:.82em}
.htp-bai-one-experience .htp-remediation-rule{padding:12px 14px;border-left:4px solid var(--b1-coral);border-radius:8px;background:#f7eef0}.htp-bai-one-experience .htp-remediation-rule span,.htp-bai-one-experience .htp-remediation-rule small{display:block}.htp-bai-one-experience .htp-remediation-rule small{margin-top:4px;color:#4d6077}
.htp-bai-one-experience .htp-remediation-production{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.htp-bai-one-experience .htp-remediation-production input{min-height:48px;padding:10px 12px;border:2px solid var(--b1-line);border-radius:10px;color:var(--b1-ink);background:#fff;font:inherit}.htp-bai-one-experience .htp-remediation-production input.is-wrong{border-color:var(--b1-coral);background:#fbecec}
.htp-bai-one-experience .htp-remediation-production button{min-width:140px;border:0;border-radius:10px;color:#fff;background:var(--b1-navy);font:inherit;font-weight:850}.htp-bai-one-experience .htp-remediation-production button small{display:block;color:#cce2f6}
.htp-bai-one-experience .htp-remediation-options button:disabled,.htp-bai-one-experience .htp-remediation-production button:disabled{border-color:#bdcbd5;color:#52657a;background:#e7edf1;opacity:1}

@media(max-width:768px){.htp-bai-one-experience{padding-right:14px;padding-left:26px;overflow-x:hidden}.htp-bai-one-experience,.htp-bai-one-experience *{box-sizing:border-box;max-width:100%}.htp-bai-one-experience .htp-quiz[data-bilingual="1"]{padding:22px 14px}.htp-bai-one-experience .htp-quiz-stepper .htp-quiz-step{min-height:0;padding:20px 13px}.htp-bai-one-experience .htp-quiz-step>.htp-core-button{width:100%;min-width:0}.htp-bai-one-experience .htp-remediation-production{grid-template-columns:1fr}.htp-bai-one-experience .htp-remediation-production button{min-height:48px}.htp-bai-one-experience .htp-remediation-card{padding-right:13px;padding-left:54px}.htp-bai-one-experience .htp-mobile-lesson-bar a{min-width:0;overflow-wrap:anywhere}}
@media(max-width:390px){.htp-bai-one-experience{padding-right:9px;padding-left:17px}.htp-bai-one-experience .htp-quiz-step>label:not(.htp-quiz-production){grid-template-columns:22px 30px minmax(0,1fr);padding:10px 8px}.htp-bai-one-experience .htp-quiz-letter{width:27px;height:27px}.htp-bai-one-experience .htp-quiz-step legend{font-size:1rem}}

/* Unité 1 · Bài 1 — application complète du dossier UI/UX fourni. */
.htp-bai-one-experience{padding:24px clamp(18px,4vw,52px) 90px;border-color:#cbdde4;border-radius:24px;background:#f8fbfc;font-family:Inter,"Noto Sans",Arial,sans-serif}
.htp-u1-cdc{--cdc-navy:#123a6d;--cdc-ink:#17324f;--cdc-blue:#edf6fb;--cdc-line:#cbdde4;--cdc-coral:#a64046;--cdc-green:#e8f5ee;color:#17324f}
.htp-u1-cdc-hero{padding:clamp(28px,5vw,54px);border:1px solid #cbdde4;border-radius:26px;background:#fff;box-shadow:0 14px 34px rgba(18,58,109,.08)}
.htp-u1-cdc-hero .htp-kicker{color:#a64046}.htp-u1-cdc-hero h1{max-width:820px;font-size:clamp(2.7rem,6vw,5.2rem);line-height:1}.htp-u1-cdc-hero>p{max-width:850px;line-height:1.55}.htp-u1-cdc-hero>p[lang="fr"]{color:#17324f;font-size:1.12rem;font-weight:750}.htp-u1-cdc-hero>p[lang="vi"]{color:#4d6077;font-size:1rem}
.htp-u1-cdc .htp-lesson-meta{margin-top:22px}.htp-u1-cdc .htp-lesson-meta span{padding:9px 13px;border-color:#cbdde4;color:#123a6d;background:#edf6fb;box-shadow:none}
.htp-u1-cdc>.htp-u1-final-tabs{position:relative;top:auto;z-index:2;gap:10px;margin:20px 0 10px;padding:8px;border-color:#cbdde4;border-radius:17px;background:#fff;box-shadow:none}.htp-u1-cdc>.htp-u1-final-tabs button{min-height:62px;border-color:#cbdde4;border-radius:12px;color:#123a6d;background:#f7fafc}.htp-u1-cdc>.htp-u1-final-tabs button.is-active{border-color:#123a6d;color:#fff;background:#123a6d}.htp-u1-cdc>.htp-u1-final-tabs button.is-active small{color:#cce2f6}
.htp-u1-cdc-phases{position:relative;top:auto;z-index:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px;padding:7px;border-color:#cbdde4;border-radius:15px;background:#fff;box-shadow:none;backdrop-filter:none}.htp-u1-cdc-phases span{min-width:0;padding:9px 8px;border:1px solid transparent;border-radius:10px;color:#52657a}.htp-u1-cdc-phases span b,.htp-u1-cdc-phases span small{display:block}.htp-u1-cdc-phases span small{color:#52657a}.htp-u1-cdc-phases span.is-active{border-color:#123a6d;color:#fff;background:#123a6d}.htp-u1-cdc-phases span.is-active small{color:#cce2f6}.htp-u1-cdc-phases span.is-done{border-color:#c6ddd0;color:#185a35;background:#e8f5ee}.htp-u1-cdc-phases span.is-done small{color:#285f47}
.htp-u1-cdc-progress{max-width:1080px;height:7px;margin:18px auto 30px;background:#dfeaf0}.htp-u1-cdc-progress i{background:#a64046}.htp-u1-cdc-progress span{color:#52657a;background:#f8fbfc}
.htp-u1-cdc-screen{max-width:1080px;margin:0 auto;border-color:#cbdde4;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(18,58,109,.07)}
.htp-u1-cdc-screen__header{padding:20px clamp(18px,3vw,30px);border-color:#cbdde4;background:#edf6fb}.htp-u1-cdc-screen__header>span{border-radius:12px;background:#a64046}.htp-u1-cdc-screen__header h2{color:#123a6d}.htp-u1-cdc-screen__header p{color:#4d6077}
.htp-u1-cdc-screen__body{padding:clamp(20px,4vw,38px)}.htp-u1-cdc-screen__nav{padding:16px clamp(18px,3vw,30px);border-color:#cbdde4;background:#f8fbfc}.htp-u1-cdc-screen__nav button{min-height:48px;border:1px solid #123a6d;border-radius:11px;background:#123a6d}.htp-u1-cdc-screen__nav button:first-child{color:#123a6d;background:#fff}.htp-u1-cdc-screen__nav button:first-child small{color:#52657a}.htp-u1-cdc-screen__nav button:not(:first-child) small{color:#cce2f6}.htp-u1-cdc-screen__nav button:disabled{border-color:#bdcbd5;color:#52657a;background:#e7edf1;opacity:1}.htp-u1-cdc-screen__nav button:disabled small{color:#52657a}
.htp-u1-cdc-welcome{grid-template-columns:minmax(280px,.95fr) minmax(0,1.05fr);gap:clamp(22px,4vw,42px)}.htp-u1-cdc-welcome figure{align-self:stretch;overflow:hidden;border:1px solid #cbdde4;border-radius:18px;background:#edf6fb}.htp-u1-cdc-welcome img{width:100%;height:100%;min-height:390px;border-radius:0;object-fit:cover}.htp-u1-cdc-welcome h3{color:#123a6d}.htp-u1-cdc-welcome>div>p[lang="fr"]{color:#17324f}.htp-u1-cdc-welcome>div>p[lang="vi"]{color:#4d6077}
.htp-u1-cdc-howto{margin-top:16px;padding:14px;border-color:#cbdde4;border-radius:13px;background:#edf6fb}.htp-u1-cdc-howto h4{margin-bottom:9px}.htp-u1-cdc-howto ol{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.htp-u1-cdc-howto li{padding:8px;border:1px solid #dce8ed;background:#fff}.htp-u1-cdc-howto li strong{color:#123a6d;font-size:.82rem}.htp-u1-cdc-howto li small{font-size:.74rem}.htp-u1-cdc-howto>p{margin-top:10px;font-size:.8rem}
.htp-u1-cdc-welcome__actions{align-items:stretch}.htp-u1-cdc-welcome__actions .htp-core-button{min-height:50px}.htp-u1-cdc-welcome__actions .htp-core-button:first-child{color:#fff;background:#123a6d}.htp-u1-cdc-welcome__actions .htp-core-button:first-child small{color:#cce2f6}.htp-u1-cdc-welcome__actions .htp-core-button--secondary{border-color:#123a6d;color:#123a6d;background:#fff}
.htp-u1-cdc-notion{border-color:#cbdde4;border-radius:17px;box-shadow:none}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:7px;border-color:#cbdde4;background:#edf6fb;overflow:visible}.htp-u1-cdc-notion__tabs button{grid-template-columns:32px minmax(0,1fr);min-width:0;min-height:68px;padding:10px;border-color:#cbdde4;border-radius:11px;color:#123a6d;background:#fff}.htp-u1-cdc-notion__tabs button>span{width:30px;height:30px}.htp-u1-cdc-notion__tabs button>small{color:#52657a}.htp-u1-cdc-notion__tabs button.is-active{border-color:#123a6d;color:#fff;background:#123a6d}.htp-u1-cdc-notion__tabs button.is-active small{color:#cce2f6}.htp-u1-cdc-notion__panels{padding:clamp(18px,3vw,28px)}
.htp-u1-cdc-explanation{margin-bottom:20px;padding:18px 20px;border-left-color:#a64046;background:#f8f1f2}.htp-u1-cdc-language-grid article,.htp-u1-cdc-structures article,.htp-u1-cdc-question,.htp-u1-cdc-input{border-color:#cbdde4;box-shadow:none}.htp-u1-cdc-micro{border-color:#c6ddd0;background:#f7fbf8}
.htp-u1-cdc-audio-grid{gap:10px}.htp-u1-cdc-audio{gap:7px;padding:12px;border-color:#cbdde4;border-radius:12px;background:#edf6fb}.htp-u1-cdc-audio__buttons{gap:6px}.htp-u1-cdc-audio .htp-speak-button{min-height:44px;border-color:#123a6d;border-radius:9px;background:#123a6d}.htp-u1-cdc-audio .htp-speak-button small{color:#cce2f6}.htp-u1-cdc-audio .htp-speak-button--slow{color:#123a6d;background:#fff}.htp-u1-cdc-audio .htp-speak-button--slow small{color:#52657a}.htp-u1-cdc-audio .htp-speak-button:disabled{border-color:#bdcbd5;color:#52657a;background:#e7edf1;opacity:1}.htp-u1-cdc-audio .htp-speak-button:disabled small{color:#52657a}
.htp-u1-cdc-mission-stage{max-width:1080px;margin:34px auto 0;padding:clamp(20px,4vw,34px);border:1px solid #cbdde4;border-radius:24px;background:#edf6fb}.htp-u1-cdc-mission-stage>header{margin-bottom:18px}.htp-u1-cdc-mission-stage>header h2{margin:5px 0;color:#123a6d}.htp-u1-cdc-mission-stage>header p{margin:0;color:#4d6077}
.htp-u1-cdc-mission{grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);align-items:start;gap:18px}.htp-u1-cdc-mission__visual{grid-row:1/3;margin:0;overflow:hidden;border:1px solid #cbdde4;border-radius:18px;background:#fff}.htp-u1-cdc-mission__visual img{display:block;width:100%;height:100%;min-height:430px;object-fit:cover}.htp-u1-cdc-mission>header{padding:20px;border-radius:15px;background:#123a6d}.htp-u1-cdc-mission>header span{color:#fff}.htp-u1-cdc-mission>header p[lang="vi"]{color:#cce2f6!important}.htp-u1-cdc-mission>ol{grid-column:2;grid-template-columns:1fr;margin:0}.htp-u1-cdc-mission>ol li{border-color:#cbdde4;background:#fff}.htp-u1-cdc-mission>.htp-u1-cdc-question,.htp-u1-cdc-mission>.htp-u1-cdc-input,.htp-u1-cdc-mission>.htp-u1-cdc-audio,.htp-u1-cdc-mission>.htp-u1-cdc-recorder,.htp-u1-cdc-mission>.htp-u1-cdc-quiz-link{grid-column:1/-1}
.htp-u1-cdc-practice{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,34px);border-color:#cbdde4;border-radius:22px;background:#fff}.htp-u1-cdc-practice-set{gap:16px}.htp-u1-cdc-practice-set>article{padding:clamp(18px,3vw,26px);border-color:#cbdde4;border-radius:16px;background:#fff;box-shadow:0 5px 16px rgba(18,58,109,.04)}.htp-u1-cdc-final-status{border:1px solid #cbdde4;background:#edf6fb}
.htp-bai-one-experience .htp-u1-practice-progress{margin:22px 0 16px;padding:14px 16px;border:1px solid #cbdde4;border-radius:13px;background:#edf6fb}.htp-bai-one-experience .htp-u1-practice-progress strong,.htp-bai-one-experience .htp-u1-practice-progress small{display:block}.htp-bai-one-experience .htp-u1-practice-progress strong{color:#123a6d}.htp-bai-one-experience .htp-u1-practice-progress small{margin-top:2px;color:#4d6077}.htp-bai-one-experience .htp-u1-practice-progress i{display:block;height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:#d7e5eb}.htp-bai-one-experience .htp-u1-practice-progress i span{display:block;width:12.5%;height:100%;border-radius:inherit;background:#a64046;transition:width .25s ease}
.htp-u1-cdc-practice-set>article[hidden]{display:none!important}.htp-bai-one-experience .htp-u1-practice-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid #cbdde4}.htp-bai-one-experience .htp-u1-practice-nav button{min-height:48px;padding:10px 13px;border:1px solid #123a6d;border-radius:10px;color:#fff;background:#123a6d;font:inherit;font-weight:850}.htp-bai-one-experience .htp-u1-practice-nav button small{display:block;margin-top:2px;color:#cce2f6}.htp-bai-one-experience .htp-u1-practice-nav button.is-secondary{color:#123a6d;background:#fff}.htp-bai-one-experience .htp-u1-practice-nav button.is-secondary small{color:#52657a}.htp-bai-one-experience .htp-u1-practice-nav button:disabled{border-color:#bdcbd5;color:#52657a;background:#e7edf1;opacity:1}.htp-bai-one-experience .htp-u1-practice-nav button:disabled small{color:#52657a}
.htp-bai-one-experience .htp-mini-game{max-width:1080px;margin:34px auto;padding:clamp(22px,4vw,36px);border:1px solid #cbdde4;border-radius:24px;background:#fff;box-shadow:0 10px 28px rgba(18,58,109,.07)}.htp-bai-one-experience .htp-mini-game.is-completed{background:#e8f5ee}.htp-bai-one-experience .htp-mini-game>header{gap:18px}.htp-bai-one-experience .htp-mini-xp{color:#123a6d;background:#edf6fb}.htp-bai-one-experience .htp-mini-game>footer{border-color:#cbdde4}
.htp-bai-one-experience .htp-quiz-step>label.is-correct{border-color:#287147!important;background:#e8f5ee!important;box-shadow:inset 4px 0 0 #287147!important}.htp-bai-one-experience .htp-quiz-step>label.is-wrong{border-color:#a64046!important;background:#fbecec!important;box-shadow:inset 4px 0 0 #a64046!important}.htp-bai-one-experience .htp-quiz-step>label.is-correct .htp-quiz-letter{border-color:#287147;color:#185a35}.htp-bai-one-experience .htp-quiz-step>label.is-wrong .htp-quiz-letter{border-color:#a64046;color:#762c32}
@media(max-width:900px){.htp-u1-cdc-welcome,.htp-u1-cdc-mission{grid-template-columns:1fr}.htp-u1-cdc-mission__visual{grid-row:auto}.htp-u1-cdc-mission>ol{grid-column:1}.htp-u1-cdc-mission__visual img{min-height:0;height:auto}.htp-u1-cdc-notion__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-u1-cdc-howto ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.htp-bai-one-experience{padding:12px 10px 92px;border-radius:16px}.htp-u1-cdc-hero{padding:24px 18px;border-radius:20px}.htp-u1-cdc-hero h1{font-size:2.75rem}.htp-u1-cdc>.htp-u1-final-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-u1-cdc-phases{grid-template-columns:repeat(2,minmax(0,1fr))}.htp-u1-cdc-welcome img{min-height:0;height:auto}.htp-u1-cdc-howto ol{grid-template-columns:1fr}.htp-u1-cdc-screen__nav,.htp-bai-one-experience .htp-u1-practice-nav{display:grid;grid-template-columns:1fr}.htp-u1-cdc-screen__nav button,.htp-bai-one-experience .htp-u1-practice-nav button{width:100%;min-width:0;padding:10px 7px}.htp-u1-cdc-notion__tabs{grid-template-columns:1fr}.htp-u1-cdc-audio-grid{grid-template-columns:1fr}.htp-u1-cdc-mission-stage,.htp-u1-cdc-practice{padding:16px 10px}.htp-bai-one-experience .htp-mini-game>header,.htp-bai-one-experience .htp-mini-game>footer{flex-direction:column}.htp-bai-one-experience .htp-quiz-stepper .htp-quiz-step{padding:18px 11px}}
@media(max-width:390px){.htp-u1-cdc-phases span{padding:8px 5px;font-size:.82rem}.htp-u1-cdc-screen__nav{gap:7px}.htp-u1-cdc-screen__nav button{font-size:.78rem}.htp-u1-cdc-screen__nav button small{font-size:.72rem}}