/* "Lớp học tại CLB" (STEM Maths) zone and the two-path chooser. Uses the book page tokens from styles.css. */
.paths-section { background:var(--paper-deep); }
.paths-section .section-intro { align-items:center; }
.paths-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:36px; }
.path-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:32px; background:white; border:1px solid var(--line); border-top:3px solid var(--brand-gold); min-width:0; }
.path-card.path-class { border-top-color:var(--brand-navy); }
.path-index { font:600 13px/1 var(--sans); letter-spacing:.08em; color:var(--ink-soft); }
.path-card h3 { font-size:clamp(22px,2.2vw,28px); line-height:1.25; letter-spacing:-.02em; margin:0; }
.path-card p { margin:0; color:var(--ink-soft); max-width:52ch; }
.path-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:auto; padding-top:10px; }

.class-zone { --navy:var(--brand-navy); --navy-deep:#20284f; --gold:var(--brand-gold); --muted:var(--ink-soft); --warm:var(--paper-deep); --gutter:24px; }
.class-zone [id] { scroll-margin-top:24px; }
.class-zone h2 { max-width:none; }
.class-zone .section-intro { align-items:center; }
.class-zone fieldset { border:0; margin:0; padding:0; min-width:0; }
.class-zone legend { width:100%; font-size:16px; font-weight:650; margin-bottom:18px; padding:0; }
.class-zone p { max-width:60ch; }
.class-zone h3, .class-zone h4 { margin:0; }
.class-zone .class-program, .class-zone .class-visit { background:white; }
.class-zone .class-pathway, .class-zone .class-enquiry { background:var(--warm); }

.program-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(32px,5vw,70px); margin-top:42px; align-items:stretch; }
.step-index { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:7px; border-radius:50%; background:var(--warm); color:var(--muted); font-size:11px; font-weight:600; vertical-align:middle; }
.grades { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.grades button { min-height:58px; min-width:44px; border:1px solid var(--line); background:white; color:var(--navy); font-size:22px; font-weight:600; transition:background-color .18s,border-color .18s,color .18s; }
.grades button:hover { border-color:var(--navy); }
.grades [aria-pressed=true] { background:var(--navy); color:white; border-color:var(--navy); }
.class-zone .levels { margin-top:32px; }
.level-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.levels label { display:flex; gap:11px; align-items:flex-start; min-height:100px; padding:17px 14px; border:1px solid var(--line); cursor:pointer; transition:background-color .18s,border-color .18s; }
.levels label:hover { border-color:#29315f88; }
.levels label:has(input:checked) { border-color:var(--navy); background:var(--warm); box-shadow:inset 0 0 0 1px var(--navy); }
.levels input { width:18px; height:18px; accent-color:var(--navy); margin:4px 0 0; flex-shrink:0; }
.levels strong { font-size:15px; font-weight:650; }
.levels small { display:block; color:var(--muted); font-size:12px; margin-top:3px; line-height:1.6; }
.specialist-choice { display:flex; align-items:center; gap:12px; min-height:44px; margin-top:20px; padding:12px 0; cursor:pointer; font-size:14px; }
.specialist-choice input { width:18px; height:18px; accent-color:var(--navy); flex-shrink:0; }
.specialist-choice small { display:block; color:var(--muted); font-size:12px; }
.program-result { display:flex; flex-direction:column; background:var(--navy); color:white; padding:30px 34px 32px; min-width:0; }
.program-result-top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid #ffffff30; margin-bottom:26px; }
.program-result-top > p { font-size:14px; color:#e1e4ef; margin:0; }
.program-class { display:flex; align-items:center; gap:10px; color:var(--gold); }
.program-class small { font-size:13px; }
.program-class strong { font-size:48px; font-weight:400; line-height:1; letter-spacing:-.05em; }
.program-grade { font-size:13px; color:#e1e4ef; margin:0; }
.program-result h3 { font-size:clamp(26px,2.6vw,36px); line-height:1.2; letter-spacing:-.035em; margin-top:12px; font-weight:600; }
#program-description { color:#e1e4ef; margin:20px 0 0; font-size:15px; line-height:1.8; }
.specialist-note { font-size:13px; border-left:2px solid var(--gold); padding-left:14px; margin:20px 0 0; color:#e1e4ef; }
.program-result-footer { margin-top:auto; padding-top:30px; }
.program-result-footer p { font-size:12px; color:#e1e4ef; margin:0 0 18px; }
.program-result .btn { width:100%; }
.program-result :focus-visible { outline-color:var(--gold); }
.btn[aria-disabled=true] { opacity:.6; }
#program-retry { background:white; border:0; padding:10px 16px; color:var(--navy); margin-top:12px; min-height:44px; }

.learning-stages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:36px; gap:24px; }
.learning-stage { padding:32px; background:white; border:1px solid var(--line); border-top:3px solid var(--gold); min-width:0; }
.secondary-stage { border-top-color:var(--navy); }
.stage-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.stage-heading > span, .stage-heading p { font-size:13px; margin:0; }
.stage-heading p { display:flex; align-items:center; gap:10px; }
.stage-heading strong { font-size:36px; font-weight:400; letter-spacing:-.05em; line-height:1; }
.stage-content h3 { font-size:27px; font-weight:600; line-height:1.25; margin-top:26px; }
.stage-content > p { font-size:15px; color:var(--muted); margin:16px 0 0; }
.stage-content > a { margin-top:20px; }
.placement-process { padding-top:44px; margin-top:44px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:36px; }
.placement-process > h3 { font-size:21px; line-height:1.35; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0; }
.steps li > span { display:block; font-size:12px; color:var(--muted); margin-bottom:12px; }
.steps h4 { font-size:16px; font-weight:650; margin-bottom:10px; letter-spacing:-.02em; }
.steps p { color:var(--muted); font-size:13px; margin:0; }

.specialist-section { background:var(--navy); color:white; padding:56px 0; }
.specialist-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.specialist-section .eyebrow { color:var(--gold); margin-bottom:16px; font-size:12px; }
.specialist-section h2 { font-size:clamp(26px,2.6vw,36px); }
.specialist-section p:not(.eyebrow) { color:#e1e4ef; max-width:57ch; font-size:14px; margin:20px 0 0; }
.specialist-section .btn { flex-shrink:0; }
.specialist-section :focus-visible { outline-color:var(--gold); }

.visit-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,90px); align-items:center; }
.visit-grid > div > p { color:var(--muted); margin:22px 0 0; font-size:15px; }
.visit-grid .text-link { margin-top:14px; }
.contact-block { padding:26px 0 26px 32px; border-left:3px solid var(--gold); display:flex; flex-direction:column; align-items:flex-start; }
.visit-grid .contact-block > p { margin:0; font-size:14px; color:var(--muted); }
.contact-block .phone { font-size:36px; letter-spacing:-.045em; line-height:1.4; margin:8px 0; font-weight:600; }
.contact-block > a:not(.phone):not(.text-link) { display:inline-flex; align-items:center; min-height:40px; font-size:16px; font-weight:500; }
.contact-block > a:not(.phone):not(.text-link):hover { text-decoration:underline; text-underline-offset:5px; }
.contact-block > .text-link { margin-top:12px; }

.class-videos { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; margin-top:40px; }
.class-video { min-width:0; }
.class-video-frame { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; overflow:hidden; background:var(--navy); color:white; cursor:pointer; }
.class-video-frame img, .class-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.class-video-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#20284fb3); }
.class-video-play { position:absolute; left:50%; top:50%; z-index:1; display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); transition:transform .18s; }
.class-video-play::before { content:""; margin-left:5px; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent var(--navy-deep); }
.class-video-frame:hover .class-video-play { transform:translate(-50%,-50%) scale(1.06); }
.class-video-frame.is-playing::after { display:none; }
.class-video h3 { margin-top:14px; font-size:18px; font-weight:600; }

.enquiry-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr); gap:clamp(32px,6vw,90px); align-items:start; }
.enquiry-copy { padding-top:24px; }
.enquiry-copy > p { color:var(--muted); margin:22px 0 0; }
.enquiry-copy > a { margin-top:24px; }
.enquiry-copy > .enquiry-footnote { font-size:12px; max-width:32ch; margin-top:42px; border-top:1px solid var(--line); padding-top:18px; }
.enquiry-form { background:white; border:1px solid var(--line); padding:30px; display:grid; gap:20px; min-width:0; }
.chosen-program { padding-bottom:20px; border-bottom:1px solid var(--line); }
.chosen-program span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.chosen-program strong { font-size:18px; line-height:1.4; display:block; }
.field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.enquiry-form label:not(.check-label):not(.trap) { display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; }
.enquiry-form input:not([type=checkbox]), .enquiry-form select, .enquiry-form textarea { width:100%; min-width:0; max-width:100%; border:1px solid #8a94ab; border-radius:0; background:white; color:var(--navy); min-height:48px; padding:10px 12px; font-size:16px; }
.enquiry-form textarea { resize:vertical; min-height:120px; }
.optional { font-weight:400; color:var(--muted); font-size:12px; }
.check-label { display:flex; align-items:flex-start; min-height:44px; padding-block:8px; gap:10px; font-size:13px; color:var(--muted); }
.check-label input { width:18px; height:18px; accent-color:var(--navy); flex-shrink:0; margin:3px 0 0; }
.enquiry-form .btn { justify-self:start; }
#enquiry-status { font-size:14px; overflow-wrap:anywhere; margin:0; }
#enquiry-status:empty { display:none; }
.trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.class-zone h2, .class-zone h3, .class-zone h4, .class-zone p, .chosen-program strong, .contact-block a, .check-label span, .levels label span { overflow-wrap:anywhere; }

@media (max-width:1199px) {
  .program-grid { gap:32px; }
  .program-result { padding:26px; }
  .learning-stage { padding:28px; }
  .placement-process { grid-template-columns:1fr; gap:28px; }
  .enquiry-form { padding:24px; }
}
@media (max-width:1023px) {
  .program-grid, .enquiry-grid { grid-template-columns:1fr; gap:32px; }
  .program-result { padding:30px; }
  .program-result .btn { width:auto; min-width:240px; }
  .learning-stages, .paths-grid { gap:18px; }
  .learning-stage { padding:24px; }
  .stage-heading { flex-direction:column; align-items:flex-start; gap:12px; }
  .specialist-inner { align-items:flex-start; flex-direction:column; gap:24px; }
  .specialist-section .btn { flex-shrink:1; }
  .visit-grid { gap:28px; }
  .contact-block { padding-left:24px; }
  .contact-block .phone { font-size:30px; }
  .enquiry-copy { padding-top:0; }
  .enquiry-copy > .enquiry-footnote { margin-top:24px; max-width:50ch; }
  .levels label { min-height:92px; }
}
@media (max-width:767px) {
  .paths-grid, .learning-stages, .visit-grid { grid-template-columns:1fr; gap:20px; }
  .path-card { padding:24px; }
  .program-grid { margin-top:30px; }
  .program-result { padding:26px; }
  .stage-heading { flex-direction:row; align-items:center; }
  .placement-process { margin-top:32px; padding-top:30px; gap:24px; }
  .steps { grid-template-columns:1fr; gap:22px; }
  .steps li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; }
  .steps li > span { padding-top:3px; margin:0; }
  .steps h4 { margin-bottom:6px; }
  .steps p { font-size:14px; }
  .specialist-section { padding:40px 0; }
  .contact-block { padding-block:12px; }
  .contact-block .phone { font-size:34px; }
  .class-videos { margin-top:28px; }
}
@media (max-width:639px) {
  .field-pair { grid-template-columns:1fr; gap:20px; }
  .enquiry-form { padding:24px 20px; }
}
@media (max-width:479px) {
  .grades { gap:7px; grid-template-columns:repeat(4,minmax(44px,1fr)); }
  .grades button { min-height:50px; font-size:20px; }
  .level-options { grid-template-columns:1fr; gap:10px; }
  .levels label { min-height:78px; padding:13px 16px; }
  .levels small { font-size:13px; }
  .program-result { padding:24px 20px; }
  .program-result h3 { font-size:28px; }
  .program-result .btn, .enquiry-form .btn { width:100%; min-width:0; }
  .program-result-top { gap:16px; }
  .stage-heading strong { font-size:32px; }
  .stage-content h3 { font-size:24px; }
  .enquiry-form { padding:22px 16px; }
  .path-actions .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .class-zone *, .class-zone *::before, .class-zone *::after { transition:none !important; }
  .class-video-frame:hover .class-video-play { transform:translate(-50%,-50%); }
}

/* The book purchase bar is irrelevant while reading about classes. */
body.in-class-zone .floating-order { display:none !important; }
.path-actions { align-self:stretch; }

/* Six navigation items no longer fit between 901px and 1100px: the intro link is the same as the logo. */
@media (min-width:901px) and (max-width:1100px) {
  .site-nav { gap:10px; }
  .site-nav > a[href="#gioi-thieu"] { display:none; }
}