/* Yến Ngữ page CSS: the Chinese face, the hero, the section parts (the LMS mock-ups and the phone, the
   reasons, the HSK route, the class formats, the teacher tiles and their profile), the per-width section
   heights, and the entrance and scroll motion of v2 (html.anim only; at rest under reduced motion). */

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* ---------------------------------------------------------------- Chinese glyphs, logo, skip link */
.zh { font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif; font-weight: 500; letter-spacing: 0; }
.mark.mark--initial.zh { font-family: "Noto Sans SC", "PingFang SC", sans-serif; font-weight: 500; line-height: 1; }
.nav .nav__logo .mark--initial { width: 26px; height: 26px; font-size: 15px; margin-right: 6px; }
.footer__mark .mark.mark--initial { width: 40px; height: 40px; font-size: 22px; margin-right: 12px; vertical-align: 0; }
.footer__mark .zh:last-child { font-size: .6em; color: var(--muted); margin-left: .3em; }
.footer__lede .zh { font-size: .9em; }
.skip { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: 8px 12px; background: var(--bg); z-index: 20; }

/* ---------------------------------------------------------------- labels, numbers and split heads */
.sec-label { color: var(--accent); margin-bottom: var(--s-4); display: flex; align-items: center; }
.ground-inverse .sec-label { color: var(--muted); }
.reason__no { display: inline-block; font: 500 11px/1 var(--font-text); letter-spacing: .06em; color: var(--accent);
  border: 1px solid currentColor; border-radius: 4px; padding: 4px 5px 3px; margin-right: 12px; vertical-align: .3em; }
.sec-label .reason__no { vertical-align: 0; }
.ground-inverse .reason__no { color: var(--ink); }
.head-split { margin-bottom: var(--head-gap); row-gap: var(--s-5); }
.head-split h2 { max-width: 20ch; }
.head-split__text p { font-size: var(--t-body); line-height: 1.65; max-width: 60ch; }
.founder { display: flex; gap: var(--s-3); align-items: flex-start; }
.founder .mark--initial { width: 24px; height: 24px; font-size: 13px; margin-top: 2px; }
.card > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- hero */
.hero h1 { font-size: calc(var(--ly-scale, 1) * clamp(36px, 2.1vw + 22px, 54px)); line-height: 1.06; max-width: 22ch; }
/* 36.5em (621px at 17px): a ch measure here was sometimes taken from the fallback face before the web
   font arrived and kept (493 to 621px from one load to the next) */
.hero .hero__lead { font-size: 17px; line-height: 1.6; max-width: 36.5em; }
.hero__points { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.hero__points li { display: grid; gap: var(--s-2); align-content: start; font-size: 14px; line-height: 1.4; font-weight: 500; }
.hero__points .ic { color: var(--accent); }
.hero__media > img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); will-change: transform; }
.ly-float__title { display: flex; align-items: center; gap: var(--s-3); }
.float-zh { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #f6e9eb; color: var(--accent); font-size: 16px; }
.ly-float--tr { width: auto; min-width: 200px; }

/* ---------------------------------------------------------------- #cach-day: open cards with a flat panel */
.steps .panel { --p-h: clamp(150px, 100svh - 660px, 240px); }
.steps .card { gap: var(--s-2); }
.steps .card > p:not(.step-tag) { font-size: var(--t-body); line-height: 1.6; color: var(--ink); flex: 1 1 auto; }
.step-tag { color: var(--accent); margin-bottom: var(--s-1); }
.steps .panel { height: var(--p-h); min-height: 0; flex: none; margin-top: auto; padding-top: 0; }
.panel--flat { background: var(--surface) !important; position: relative; overflow: hidden; }
.panel--flat::before { display: none; }
.panel--photo > .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the LMS mock-ups: white app cards at true size, cut by the panel's bottom */
.mock {
  position: absolute; left: 24px; right: 24px; top: 24px;
  background: #fff; color: #231b1d; border: 1px solid rgb(35 27 29 / .1); border-radius: 12px;
  padding: 14px 16px; font: 400 13px/1.45 var(--font-text);
}
.mock__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; margin-bottom: 10px; }
.mock__chip { font-size: 12px; font-weight: 500; color: #7b1e2e; background: #f6e9eb; border-radius: 999px; padding: 2px 8px; }
.mock__chip--ok { color: #1f6b3a; background: #e6f3ea; }
.vocab { display: grid; gap: 6px; }
.vocab li { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 8px; padding: 6px 10px; background: #faf6f5; border-radius: 8px; }
.vocab__zh { font-size: 18px; line-height: 1.2; }
.vocab__py { color: #6a5f62; font-style: italic; }
.vocab__hv { font-weight: 500; color: #7b1e2e; }
.voice__line { font-size: 13px; margin-bottom: 10px; }
.voice__line .zh { font-size: 17px; }
.voice__py { color: #6a5f62; font-style: italic; margin-left: 4px; }
.voice__who { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.voice__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #7b1e2e; color: #fff; font-size: 13px; }
.voice__who b { font-weight: 500; }
.voice__wave { display: flex; align-items: center; gap: 10px; background: #f6e9eb; border-radius: 999px; padding: 6px 12px 6px 6px; }
.voice__play { width: 24px; height: 24px; border-radius: 999px; background: #7b1e2e; flex: none; position: relative; }
.voice__play::after { content: ""; position: absolute; left: 9px; top: 7px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.voice__bars { flex: 1; height: 18px; background: #c9939c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'%3E%3Cpath d='M0 7h3v4H0zM5 4h3v10H5zM10 6h3v6h-3zM15 2h3v14h-3zM20 5h3v8h-3zM25 7h3v4h-3zM30 3h3v12h-3zM35 6h3v6h-3zM40 1h3v16h-3zM45 5h3v8h-3zM50 7h3v4h-3zM55 3h3v12h-3zM60 6h3v6h-3zM65 4h3v10h-3zM70 7h3v4h-3zM75 2h3v14h-3zM80 6h3v6h-3zM85 4h3v10h-3zM90 7h3v4h-3zM95 5h3v8h-3z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'%3E%3Cpath d='M0 7h3v4H0zM5 4h3v10H5zM10 6h3v6h-3zM15 2h3v14h-3zM20 5h3v8h-3zM25 7h3v4h-3zM30 3h3v12h-3zM35 6h3v6h-3zM40 1h3v16h-3zM45 5h3v8h-3zM50 7h3v4h-3zM55 3h3v12h-3zM60 6h3v6h-3zM65 4h3v10h-3zM70 7h3v4h-3zM75 2h3v14h-3zM80 6h3v6h-3zM85 4h3v10h-3zM90 7h3v4h-3zM95 5h3v8h-3z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.voice__time { font-size: 12px; font-weight: 500; color: #7b1e2e; font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: right; }
/* the note plays: a real button, the bars fill wine red from the left (--vp), the triangle turns to two bars */
button.voice__play { border: 0; padding: 0; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
button.voice__play:hover { transform: scale(1.08); }
button.voice__play:focus-visible { outline: 2px solid #7b1e2e; outline-offset: 2px; }
.voice__wave.is-playing .voice__play { box-shadow: 0 0 0 4px rgb(123 30 46 / .16); }
.voice__wave.is-playing .voice__play::after { left: 8px; top: 7px; width: 8px; height: 10px; border: 0; border-left: 3px solid #fff; border-right: 3px solid #fff; box-sizing: border-box; }
.voice__bars { background: linear-gradient(90deg, #7b1e2e var(--vp, 0%), #c9939c 0); }
.anim .voice__wave.is-playing .voice__bars { animation: voice-pulse .9s ease-in-out infinite alternate; }
@keyframes voice-pulse { to { transform: scaleY(.82); } }

/* ---------------------------------------------------------------- #vi-sao: the dark band */
.why { height: 100%; align-items: stretch; }
.why__text { display: flex; flex-direction: column; }
.why__text h2 { margin-bottom: var(--s-5); }
.why__media { --ratio: 0px; height: 100%; min-height: 0; border: 0; }
.anim .why__media .frame__img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }
/* the figure takes the first of the column's six grid columns, so the words start on a page column line */
.reason { display: grid; grid-template-columns: calc((100% - 5 * var(--gutter)) / 6) minmax(0, 1fr); column-gap: var(--gutter); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.reason:last-child { padding-bottom: 0; }
.reason__fig { font-family: var(--font-display); font-size: clamp(28px, 2.4vw + 10px, 46px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reason__fig small { display: block; font: 500 13px/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-2); }
.reason__fig small:last-child { display: inline; font: inherit; font-size: .5em; color: inherit; vertical-align: .55em; margin-left: 2px; }
.reason h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -.005em; margin-bottom: var(--s-3); }
.reason h3 .reason__no { vertical-align: .15em; }
.reason p { color: var(--ink); opacity: .88; }

/* ---------------------------------------------------------------- #lms: the student app in a phone, on the band */
.lms-rows .rows__name { display: flex; align-items: center; gap: 16px; }
.lms-rows .ic { color: var(--accent); flex: none; }
.frame.lms-visual { background: none; border: 0; padding: 0; border-radius: 0; overflow: visible; isolation: auto; }
.lms-visual { position: relative; display: flex; justify-content: center; align-items: flex-start; }
/* the whole phone: four bezels, a camera pill over the status row and the home bar under the app */
.device {
  position: relative; z-index: 1; width: 300px; height: 620px; flex: none;
  border: 10px solid #231b1d; border-radius: 46px; background: #faf7f6; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgb(35 27 29 / .45);
}
.device::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #231b1d; }
.device::after { content: ""; position: absolute; z-index: 2; bottom: 8px; left: 50%; width: 108px; height: 4px; margin-left: -54px; border-radius: 999px; background: #231b1d; opacity: .85; }
.app { padding: 46px 14px 18px; font: 400 13px/1.4 var(--font-text); color: #231b1d; display: grid; gap: 10px; }
.app__bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 2px; }
.app__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; }
.app__brand .mark--initial { width: 22px; height: 22px; font-size: 12px; }
.app__bell { position: relative; color: #231b1d; display: inline-grid; }
.app__bell i { position: absolute; top: -6px; right: -7px; font: 500 10px/16px var(--font-text); font-style: normal; min-width: 16px; text-align: center; border-radius: 999px; background: #7b1e2e; color: #fff; }
.app__next { background: #7b1e2e; color: #fff; border-radius: 16px; padding: 14px 16px 16px; display: grid; gap: 2px; }
.app__hello { font-size: 13px; opacity: .9; }
.app__label { font-size: 12px; font-weight: 500; opacity: .85; margin-top: 6px; }
.app__time { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.app__meta { font-size: 13px; opacity: .9; }
.app__join { justify-self: start; margin-top: 10px; background: #fff; color: #7b1e2e; font-weight: 500; font-size: 13px; border-radius: 8px; padding: 6px 12px; }
.app__h { font-weight: 500; font-size: 14px; margin-top: 4px; }
.app__task { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid rgb(35 27 29 / .08); border-radius: 12px; padding: 10px; }
.app__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #f6e9eb; color: #7b1e2e; }
.app__tt { display: grid; gap: 1px; min-width: 0; }
.app__tt b { font-weight: 500; font-size: 13px; line-height: 1.3; }
.app__tt span { font-size: 12px; color: #6a5f62; }
.app__tt .is-due { color: #b42318; }
.app__btn { font-size: 12px; font-weight: 500; color: #fff; background: #7b1e2e; border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.app__chips { display: flex; flex-wrap: nowrap; gap: 6px; }
.app__chips > span { background: #f6e9eb; border-radius: 8px; padding: 4px 7px; font-size: 11.5px; white-space: nowrap; color: #6a5f62; font-style: italic; }
.app__chips .zh { font-style: normal; font-size: 14px; color: #231b1d; margin-right: 2px; }
/* the phone leans toward the pointer (page.js sets --rx and --ry) */
.anim .device { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
/* the phone comes alive once, as it rises: the next class, then the tasks in turn, the bell's count pops
   and the due date flashes once */
.anim .lms-visual .app > :not(.app__bar) { opacity: 0; }
.anim .lms-visual .app__bell i { transform: scale(0); }
.anim .lms-visual.is-in .app > :not(.app__bar) { animation: app-in .6s var(--ease) both; animation-delay: calc(.35s + var(--k, 0) * .12s); }
.anim .lms-visual.is-in .app > :nth-child(2) { --k: 0; }
.anim .lms-visual.is-in .app > :nth-child(3) { --k: 2; }
.anim .lms-visual.is-in .app > :nth-child(4) { --k: 3; }
.anim .lms-visual.is-in .app > :nth-child(5) { --k: 4; }
.anim .lms-visual.is-in .app > :nth-child(6) { --k: 5.5; }
.anim .lms-visual.is-in .app > :nth-child(7) { --k: 6.5; }
.anim .lms-visual.is-in .app > :nth-child(8) { --k: 7.5; }
.anim .lms-visual.is-in .app__bell i { animation: bell-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s both; }
.anim .lms-visual.is-in .app__bell svg { animation: bell-ring .7s ease-in-out 1.5s both; transform-origin: 50% 2px; }
.anim .lms-visual.is-in .app__tt .is-due { animation: due-flash 1.2s ease-in-out 2s both; border-radius: 4px; }
@keyframes app-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bell-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes due-flash { 0%, 100% { background: transparent; box-shadow: none; } 35%, 65% { background: #fde8e6; box-shadow: 0 0 0 3px #fde8e6; } }

/* ---------------------------------------------------------------- #khoa-hoc: the five stages on one drawn line */
.sub-h { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0 0 var(--s-6); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-3); }
.sub-h .reason__no { align-self: center; margin-right: 0; vertical-align: 0; }
.sub-h .muted { font-size: 15px; font-weight: 400; }
.route { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--line-strong); }
.route::after { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; border-radius: 3px; background: var(--accent);
  transform-origin: left center; transform: scaleX(var(--line-p, 1)); }
.lvl { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding-right: var(--s-2); }
.lvl__zh { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--s-3);
  background: var(--bg); border: 1.5px solid var(--line-strong); color: var(--muted); font-size: 20px;
  transition: border-color .5s var(--ease-out), color .5s var(--ease-out), background-color .5s var(--ease-out); }
.lvl.is-hit .lvl__zh { border-color: var(--accent); color: var(--accent); }
.lvl--top.is-hit .lvl__zh, :root:not(.anim) .lvl--top .lvl__zh { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:root:not(.anim) .lvl:not(.lvl--top) .lvl__zh { border-color: var(--accent); color: var(--accent); }
.lvl--soon .lvl__zh { border-style: dashed; }
.lvl__lv { font: 500 13px/1.4 var(--font-text); color: var(--accent); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.lvl__badge { display: inline-block; font: 500 12px/1 var(--font-text); padding: 4px 8px; border-radius: 99px; background: var(--surface); color: var(--accent); }
.lvl--top .lvl__badge { background: var(--accent); color: var(--accent-ink); }
.lvl h4 { font: 400 26px/1.15 var(--font-display); letter-spacing: -.02em; }
.lvl--soon h4, .lvl--soon .lvl__desc { color: var(--muted); }
.lvl__desc { font-size: 15px; line-height: 1.5; color: var(--ink); flex: 1 1 auto; }
.lvl__meta { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 6px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); font-size: 13px; }
.lvl__meta div { display: contents; }
.lvl__meta dt { color: var(--muted); }
.lvl__meta dt::after { content: ":"; }
.lvl__meta dd { margin: 0; font-weight: 500; }
.route__note { margin-top: var(--s-7); display: flex; align-items: center; gap: var(--s-3); font-size: 15px; color: var(--ink); }
.route__note .ic { flex: none; color: var(--accent-ink); background: var(--accent); border-radius: 50%; padding: 4px; width: 24px; height: 24px; box-sizing: border-box; }

/* ---------------------------------------------------------------- #hinh-thuc: the class formats */
.formats-h { margin-bottom: var(--head-gap); }
.formats { margin-bottom: var(--s-7); }
.format { position: relative; gap: var(--s-3); background: var(--bg); }
.format--pick { border: 1.5px solid var(--accent); }
.format__badge { position: absolute; top: var(--s-5); right: var(--s-5); font: 500 12px/1 var(--font-text); padding: 6px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.format > p { color: var(--ink); }
.format__checks { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-2); font-size: 15px; }
.format__checks li { display: flex; gap: var(--s-3); align-items: baseline; }
.format__checks li::before { content: ""; flex: none; width: 5px; height: 10px; margin: 0 3px 0 2px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.advice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-6) var(--s-7); border-radius: var(--r-lg); background: var(--surface); }
.advice__q { font: 400 clamp(24px, 1vw + 16px, 30px)/1.15 var(--font-display); letter-spacing: -.02em; margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- #giao-vien: three tiles that open a profile */
.team { row-gap: var(--s-7); }
.teacher { min-width: 0; }
.teacher__open { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: var(--s-2); cursor: pointer; border-radius: var(--r-lg); }
.teacher__open:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.teacher__open .tile__media { display: block; margin-bottom: var(--s-3); }
.teacher__open .tile__media > img { display: block; }
.teacher__nat { font-size: var(--t-label); font-weight: 500; color: var(--accent); }
.teacher__name { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.teacher__name .zh { font-size: .8em; color: var(--muted); margin-left: 4px; }
.teacher__role { font-size: var(--t-body); line-height: 1.5; color: var(--muted); }
.teacher__exp { font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.teacher__exp::before { content: "⏱ "; }
.teacher__more { justify-self: start; margin-top: var(--s-1); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.teacher__more::after { content: " \2192"; }
.teacher__open:hover .teacher__more { text-decoration-color: currentColor; }
/* under the three cards: the team grows, and the way to be matched with a teacher */
.team__more { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-7); flex-wrap: wrap; }
.team__more .founder { margin: 0; max-width: 46em; }
.team__cta { flex: none; font-weight: 500; color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.team__cta::after { content: " \2192"; }
.team__cta:hover { text-decoration-color: currentColor; }

.profile { border: 0; padding: 0; border-radius: var(--r-lg); width: min(920px, calc(100vw - 32px)); max-height: calc(100svh - 32px); background: var(--bg); color: var(--ink); overflow: auto; }
.profile::backdrop { background: rgb(35 27 29 / .55); backdrop-filter: blur(6px); }
.profile[open] { animation: profile-in .45s var(--ease-out); }
.profile[open]::backdrop { animation: fade-in .3s ease; }
@keyframes profile-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
.profile__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.profile__media { background: var(--surface); }
.profile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile__body { padding: var(--s-8) var(--s-7) var(--s-7); display: grid; gap: var(--s-3); align-content: start; }
.profile__body h3 { font-size: var(--t-h3); line-height: 1.15; }
.profile__body h3 .zh { font-size: .7em; color: var(--muted); margin-left: 6px; }
.profile__role { color: var(--muted); }
.profile__bio { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
/* the button rule html:not([data-motion="off"]) .btn sets position: relative, so the close needs the higher weight */
.profile .profile__close.btn { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1; }

/* in-page jumps: the form and the HSK stages land below the fixed bar, like a section's own top padding */
#dang-ky, .lvl[id] { scroll-margin-top: calc(var(--nav) + var(--head-gap)); }

/* the Khoá học panel closes once one of its links is clicked, and opens again on the next hover */
/* the section you are in: one wine-red line slides under its word in the bar (page.js places it) */
.nav__spy { position: absolute; left: 0; width: var(--w, 0); height: 2px; margin-top: 0; border-radius: 2px; background: var(--p-accent);
  transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s var(--ease); }
.nav__spy.is-on { opacity: 1; }
.nav__spy.no-move { transition: opacity .25s var(--ease); }
.nav__link[aria-current="location"] { color: var(--p-accent); }
@media (max-width: 1023px) { .nav__spy { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav__spy { transition: none; } }

/* Chinese words: the card with the pinyin and the meaning (page.js) */
[data-gloss] { cursor: help; }
:not(.mark, .lvl__zh, .float-zh)[data-gloss] { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lvl__zh[data-gloss], .mark[data-gloss], .float-zh[data-gloss] { transition: transform var(--dur) var(--ease); }
.lvl__zh[data-gloss]:hover, .mark[data-gloss]:hover, .float-zh[data-gloss]:hover { transform: scale(1.08); }
.gloss { position: fixed; left: 0; top: 0; z-index: 80; display: grid; gap: 2px; max-width: min(300px, calc(100vw - 16px)); padding: 8px 12px 9px;
  border-radius: 10px; background: #231b1d; color: #fbf6f5; box-shadow: 0 12px 32px -12px rgb(35 27 29 / .5);
  font: 400 13px/1.4 var(--font-text); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s .16s; }
.gloss.is-below { transform: translateY(-4px); }
.gloss.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s; }
.gloss__py { font-size: 15px; font-weight: 600; font-style: italic; color: #fff; }
.gloss__vi { color: #d9c9cc; }
.gloss__vi:empty { display: none; }
.gloss::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 6px); top: 100%; border: 6px solid transparent; border-top-color: #231b1d; }
.gloss.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #231b1d; }
@media (prefers-reduced-motion: reduce) { .gloss, .gloss.is-on { transition: none; } }

@media (min-width: 1024px) {
  .nav .nav__item.is-dismissed > .nav__menu { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: none; }
  .nav .nav__item.is-dismissed > .nav__link .chev { transform: none; }
}

/* ---------------------------------------------------------------- footer: screen 1 the sign-up (#dang-ky), screen 2 the links */
.signup .sec-label { color: var(--muted); }
.signup .signup-text h2 { max-width: 16ch; }
.form-panel { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
.footer .form .field { color: var(--ink); }
.form .field :is(input, select, textarea) { background: var(--bg); }
.form__thanks { font-weight: 500; color: var(--ink); }
.bigmark { display: flex; gap: .04em; margin: 0 0 var(--s-6); font-size: clamp(88px, 11vw, 168px); line-height: 1; color: color-mix(in oklab, var(--ink) 14%, var(--bg)); user-select: none; }
.bigmark span { display: inline-block; transform: translate3d(0, var(--bm, 0%), 0); opacity: var(--bmo, 1); }
.bigmark span:nth-child(2) { transform: translate3d(0, calc(var(--bm, 0%) * 1.6), 0); }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--p-accent); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* ---------------------------------------------------------------- motion (html.anim: script on, no reduced motion), as v2 */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .14em; margin-top: -.14em; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
.anim [data-split] .w > span { transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.anim [data-split].is-in .w > span { transform: none; }
.anim [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms + 120ms); }
.anim [data-rv].is-in { opacity: 1; transform: none; }
.anim .format[data-rv].is-in:hover { transform: translateY(-2px); transition-delay: 0s; }
.anim .hero__media { clip-path: inset(100% 0 0 0 round var(--r-lg)); transition: clip-path 1.3s var(--ease-out) .1s; }
.anim .hero__media > img { --ps: 1.18; transition: --ps 1.6s var(--ease-out) .1s; }
.anim .hero.is-loaded .hero__media { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.anim .hero.is-loaded .hero__media > img { --ps: 1.06; }
@property --ps { syntax: "<number>"; inherits: true; initial-value: 1; }
:root:not(.anim) .route { --line-p: 1; }
.anim .route { --line-p: 0; }
@media (prefers-reduced-motion: reduce) {
  .profile[open], .profile[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------------------- sections as tall as their content
   system.css makes every section one or two screens tall; on a tall screen (1920x1080 and up, a tablet,
   a phone) that left 250 to 900px of empty ground under the content. Here a section is its content
   and its padding (96 / 96 on a desktop, 80 on a tablet, 64 on a phone), the hero alone keeps the first
   screen. An in-page jump still lands with the label --head-gap under the fixed bar. */
:root { --padt: 96px; --padb: 96px; }
@media (min-width: 640px) and (max-width: 1023px) { :root { --padt: 80px; --padb: 80px; } }
@media (max-width: 639px) { :root { --padt: 64px; --padb: 64px; } }
main > :is(section, .section):not(.hero, .section--hero), footer.closing {
  height: auto; min-height: 0; display: block;
  scroll-margin-top: calc(var(--nav) + var(--head-gap) - var(--padt));
}
main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { height: auto; }
main > :is(section, .section):is(.g2, .g2m) > :is(.wrap, .container), footer.closing:is(.g2, .g2m) > .wrap { grid-template-rows: auto auto; row-gap: var(--s-9); }
@media (max-width: 639px) {
  main > :is(section, .section):is(.g2, .g2m) > :is(.wrap, .container), footer.closing:is(.g2, .g2m) > .wrap { row-gap: var(--s-8); }
}

/* ---------------------------------------------------------------- short screens (a 13" Mac under its bars:
   1440x789, 1280x689, 1152x609): the hero keeps at least the first screen and grows past it rather than
   run under the next section (at 1152x609 its buttons sat under #cach-day and could not be clicked) */
@media (min-width: 1024px) {
  main > .hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  main > .hero > .wrap { flex: 1 0 auto; height: auto; }
  /* the picture is still as tall as the screen less the hero's padding, and as tall as the words when they run longer */
  .hero--split .hero__media { height: auto; min-height: calc(100svh - var(--nav) - var(--hgap) - var(--hpadb) - var(--bar, 0px)); }
}
/* a short screen drops the lead's second part, as a phone does, so the buttons stay near the first screen */
@media (min-width: 1024px) and (max-height: 720px) {
  .hero .hero__lead .more { display: none; }
}
/* a short desktop screen: the phone a size smaller, so it fits under the bar whole */
@media (min-width: 1024px) and (max-height: 780px) {
  #lms .device { zoom: .84; }
}

/* ---------------------------------------------------------------- 1024 to 1279 */
@media (max-width: 1279px) {
  #cach-day, #khoa-hoc { --h: 2; }
  .reason { padding-block: var(--s-4); }
  .reason p { font-size: 15px; }
  .formats { margin-bottom: var(--s-6); }
  .formats-h { margin-bottom: var(--s-6); }
  .steps .panel { --p-h: 300px; }
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); }
  .route::before, .route::after { display: none; }
}

/* ---------------------------------------------------------------- tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .steps .panel { --p-h: 240px; }
  @media (min-height: 1100px) { .steps .panel { --p-h: 340px; } }
  .why { display: flex; flex-direction: column; gap: var(--s-6); }
  .why__media { height: auto; --ratio: 42%; flex: 1 1 auto; }
  .reason { grid-template-columns: calc((100% - 11 * var(--gutter)) / 12 * 2 + var(--gutter)) minmax(0, 1fr); }
  #khoa-hoc { --h: 1; }
  .route { row-gap: var(--s-5); }
  .formats { row-gap: var(--s-4); }
  .lvl__desc { display: none; }
  .formats > .card { grid-column: span 12; }
  .formats .format { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .formats .format > h3, .formats .format > p { grid-column: 1; }
  .formats .format > .format__checks { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0 0 0 var(--s-5); border-top: 0; border-left: 1px solid var(--line); }
  .team { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .team > .teacher { grid-column: span 4; }
  .team .tile__media { aspect-ratio: 4 / 5; }
  .teacher__role, .teacher__exp { font-size: var(--t-small); }
  #lms .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #lms .grid > .lms-text { grid-column: 1 / span 7; }
  #lms .grid > .lms-visual { grid-column: 8 / span 5; }
  .form-panel { padding: var(--s-6); }
  .footer .footer__col { grid-column: auto / span 4; }
  #contact .closing__links .grid > .span-6 { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .lms-visual { margin-top: var(--s-6); }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 639px) {
  :root { --t-h2: 26px; }
  .hero h1 { font-size: 29px; }
  .hero .hero__lead .more, .hero__points, .ly-float--tr { display: none; }
  .form-panel { padding: var(--s-5); }
  .mock { left: 16px; right: 16px; top: 20px; }
  #cach-day, #vi-sao, #khoa-hoc, #hinh-thuc, #giao-vien { --hm: 2; }
  .steps .panel { --p-h: 200px; }
  .steps .card:has(.mock--voice) > .panel { display: none; }
  .why__media { --ratio: 75%; height: auto; margin-top: var(--s-6); }
  .reason { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-5); }
  .route { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .lvl { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); }
  .lvl > :not(.lvl__zh) { grid-column: 2; }
  .lvl__zh { grid-row: 1 / span 4; margin: 0; }
  .lvl__desc { display: none; }
  .lvl h4 { font-size: 22px; }
  .advice { padding: var(--s-5); }
  .team .tile__media { aspect-ratio: 16 / 9; }
  .team__more { margin-top: var(--s-6); }
  .profile__in { grid-template-columns: minmax(0, 1fr); }
  .profile__media { aspect-ratio: 4 / 3; }
  .profile__body { padding: var(--s-6) var(--s-5) var(--s-5); }
  .bigmark { font-size: 72px; }
}
/* the tablet and the small desktop: the route and the formats a step tighter, so each holds its screen */
@media (max-width: 1279px) {
  #hinh-thuc .formats-h { margin-bottom: var(--s-5); }
  #hinh-thuc .advice { padding: var(--s-5) var(--s-6); }
  #hinh-thuc .format { padding: var(--s-5); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #khoa-hoc .sub-h { margin-bottom: var(--s-5); }
  #khoa-hoc .route__note { margin-top: var(--s-5); }
  #khoa-hoc .head-split { margin-bottom: var(--s-6); }
}
@media (min-width: 1024px) and (max-width: 1279px) { #hinh-thuc .formats { margin-bottom: var(--s-5); } }

/* the footer's second screen: the 燕语 mark large at the top, the links, the legal row at the foot */
footer.closing.g2 > .wrap > .closing__links { align-self: stretch; display: flex; flex-direction: column; }
footer.closing.g2 .footer__legal { margin-top: auto; }
footer.closing .bigmark { font-size: clamp(96px, 15vw, 232px); }
@media (max-width: 639px) { footer.closing .bigmark { font-size: 96px; } }