/*
  Seriously Scientific Tutor: Direction A, Paper.
  The stylesheet for the tutor pages in the theme's tutor/ folder:
  page-tutor.php (/tutor/) and page-tutor-vi.php (/tutor/vi/). They load
  this file in place of the main
  site's stylesheets. Every class starts with "tu-".
  Copied on 8 November 2026 from the tutor repo's pages/tutor.css (the
  mock-up stylesheet); this copy is the one the live pages use.
*/

:root {
  /* Brand colours (main site) */
  --ss-deep-space: #1A0C08;      /* headings */
  --ss-deep-space-2: #3D2318;    /* body text */
  --ss-supernova: #CD5A24;       /* large numbers and decoration only */
  --ss-highlight: #FADB67;       /* fills only, never text on light */

  /* Accessible shades for light pages */
  --ss-supernova-text: #A8461A;  /* primary buttons, small labels */
  --ss-turquoise-text: #1F6E9E;  /* links */
  --ss-turquoise-deep: #185A84;  /* link hover */
  --ss-muted: #6B5146;           /* secondary text */

  /* Direction A grounds and lines */
  --tu-page: #FBF7F2;
  --tu-card: #FFFFFF;
  --tu-footer: #F2EDE6;
  --tu-tint: #F6E4D8;            /* icon circles, light diagram fills */
  --tu-line: #E6DCD2;
  --tu-line-strong: #D9CCC0;
  --tu-placeholder: #A8968A;

  /* Type and sizes */
  --ss-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ss-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ss-touch-target: 44px;
  --tu-gutter: 32px;
  --tu-radius: 8px;
  --tu-header-h: 81px;    /* 82px with its border, like the main site's header */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--tu-page);
  color: var(--ss-deep-space-2);
  font-family: var(--ss-font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }

a { color: var(--ss-turquoise-text); }
a:hover { color: var(--ss-turquoise-deep); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ss-turquoise-text);
  outline-offset: 2px;
}

/* Custom templates don't inherit the site's heading rule, so set it here */
.tu-display {
  font-family: var(--ss-font-display);
  font-weight: 700;
  color: var(--ss-deep-space);
  line-height: 1.1;
}

.tu-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--tu-gutter);
}

.tu-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Buttons ---------- */

.tu-btn {
  min-height: var(--ss-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tu-btn--primary { background: var(--ss-supernova-text); color: #FFFFFF; }
.tu-btn--primary:hover { background: #8F3B16; color: #FFFFFF; }
.tu-btn--outline { border: 1.5px solid var(--ss-deep-space); background: #FFFFFF; color: var(--ss-deep-space); }
.tu-btn--outline:hover { background: var(--tu-footer); color: var(--ss-deep-space); }
.tu-btn--large { min-height: 52px; padding: 0 22px; }

.tu-arrow-link {
  min-height: var(--ss-touch-target);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Header ---------- */

.tu-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tu-card);
  border-bottom: 1px solid var(--tu-line);
}
/* Logged in to WordPress: the admin bar covers the top 32px (46px on
   narrow screens), so the header sticks just below it. Below 600px the
   admin bar scrolls away with the page, so the header goes back to 0. */
.admin-bar .tu-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tu-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .tu-header { top: 0; } }
.tu-header__inner {
  max-width: 1600px;      /* the main site's header width, so the logo sits in the same place */
  margin: 0 auto;
  padding: 0 var(--tu-gutter);
  min-height: var(--tu-header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}
.tu-brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
/* The tutor logo: 40px tall here, 30px on phones. The img's width and height
   attributes (1000 by 219) reserve its space before the file arrives. */
.tu-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.tu-logo img { display: block; width: auto; height: 40px; }

/* In the header the logo matches the main site's, measured by the lettering:
   the main logo's letters are 66% of its 64px height, ours are 72% of 58px.
   Like the main site's, it may give up a little width so the menu fits. */
.tu-header .tu-logo { flex-shrink: 1; min-width: 0; }
.tu-header .tu-logo img { height: 58px; min-width: 0; max-width: 100%; object-fit: contain; object-position: left center; }
.tu-brand__section {
  padding-left: 12px;
  border-left: 1px solid var(--tu-line);
  line-height: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.tu-header__cta { flex-shrink: 0; }

.tu-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.tu-nav a {
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ss-deep-space-2);
  text-decoration: none;
  white-space: nowrap;
}
.tu-nav a:hover { color: var(--ss-supernova-text); }
.tu-header__spacer { flex: 1; display: none; }

/* Language switch: a pill with the UK and Vietnamese flags */
.tu-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--tu-line-strong);
  border-radius: 999px;
  background: #FFFFFF;
  flex-shrink: 0;
}
.tu-lang a {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ss-deep-space-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.tu-lang a[aria-current="page"] {
  background: var(--ss-highlight);
  box-shadow: inset 0 0 0 1px var(--ss-deep-space);
  color: var(--ss-deep-space);
  font-weight: 700;
}
.tu-flag {
  display: inline-flex;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26, 12, 8, 0.18);
  flex-shrink: 0;
}

.tu-menu-btn {
  height: var(--ss-touch-target);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--tu-line-strong);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ss-deep-space);
  font: 600 14px var(--ss-font-body);
  cursor: pointer;
}
.tu-menu-btn[aria-expanded="true"] {
  background: var(--ss-highlight);
  border-color: var(--ss-deep-space);
}
.tu-menu-btn .tu-icon-close { display: none; }
.tu-menu-btn[aria-expanded="true"] .tu-icon-open { display: none; }
.tu-menu-btn[aria-expanded="true"] .tu-icon-close { display: block; }

/* Phone menu panel, opened by the Menu button */
.tu-menu {
  position: fixed;
  top: var(--tu-header-h);
  display: none;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  overflow-y: auto;
  background: #FFFFFF;
  padding: 8px 20px 120px;
}
.tu-menu__nav { display: flex; flex-direction: column; }
.tu-menu__nav a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tu-line);
  font-size: 18px;
  font-weight: 600;
  color: var(--ss-deep-space);
  text-decoration: none;
}
.tu-menu__nav svg { color: var(--ss-supernova-text); }
.tu-menu__label { padding-top: 24px; font-size: 13px; font-weight: 600; color: var(--ss-muted); }
.tu-menu__lang { display: flex; gap: 8px; padding-top: 10px; }
.tu-menu__lang a {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--tu-line-strong);
  border-radius: 8px;
  color: var(--ss-deep-space);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.tu-menu__lang a[aria-current="page"] {
  background: var(--ss-highlight);
  border-color: var(--ss-deep-space);
  font-weight: 700;
}
.tu-menu__back { margin-top: 10px; font-size: 15px; }

/* ---------- Sections ---------- */

.tu-section { padding: 88px 0; }
.tu-section--white {
  background: var(--tu-card);
  border-top: 1px solid var(--tu-line);
  border-bottom: 1px solid var(--tu-line);
}
.tu-section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.tu-section__title { display: flex; align-items: baseline; gap: 20px; }
.tu-section__num {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ss-supernova-text);
}
.tu-section__title h2 { font-size: 42px; }
.tu-lede { max-width: 660px; font-size: 18px; color: var(--ss-muted); }

/* ---------- Hero ---------- */

.tu-hero { padding: 72px 0 88px; }
.tu-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 64px;
  align-items: center;
}
.tu-hero__text { display: flex; flex-direction: column; gap: 24px; }
.tu-kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-supernova-text);
}
.tu-hero h1 {
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tu-mark {
  background: linear-gradient(transparent 60%, var(--ss-highlight) 60%);
  padding: 0 4px;
}
.tu-hero__intro { max-width: 560px; font-size: 19px; }
.tu-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tu-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 8px; }
.tu-facts li { display: flex; align-items: center; gap: 8px; }
.tu-facts svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ss-supernova-text); }

.tu-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1.5px dashed var(--tu-placeholder);
  border-radius: var(--tu-radius);
  background: var(--tu-footer);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-muted);
}
.tu-hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 50% 40%; border-radius: var(--tu-radius); }

/* ---------- Courses ---------- */

.tu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 24px;
}
.tu-course {
  padding: 28px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  background: var(--tu-page);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tu-course__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--tu-tint);
  color: var(--ss-supernova-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tu-course__icon svg { width: 22px; height: 22px; }
.tu-course h3 { font-size: 24px; }
.tu-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tu-footer);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ss-deep-space-2);
}
.tu-course .tu-arrow-link { margin-top: auto; }
/* Under the course cards: other courses can be built to order (10 November 2026) */
.tu-more { margin-top: 28px; max-width: 760px; font-size: 18px; color: var(--ss-muted); }
.tu-more strong { color: var(--ss-deep-space); }

/* ---------- How a session works: a 60 minute bar drawn to scale ---------- */

.tu-timebar { margin-bottom: 40px; }
.tu-timebar__scale {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-muted);
  margin-bottom: 8px;
}
/* Each column's fr value is its length in minutes: 5 + 5 + 20 + 20 + 10 = 60 */
.tu-timebar__bar {
  display: grid;
  grid-template-columns: 5fr 5fr 20fr 20fr 10fr;
  height: 56px;
  border: 1.5px solid var(--ss-deep-space);
  border-radius: 6px;
  overflow: hidden;
}
.tu-timebar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  border-left: 1.5px solid var(--ss-deep-space);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ss-deep-space);
}
.tu-timebar__seg:first-child { border-left: 0; }
.tu-timebar__seg span {
  font-family: var(--ss-font-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.tu-seg--review { background: var(--tu-tint); }
.tu-seg--teach { background: var(--ss-highlight); }
.tu-seg--practise { background: #F3C9AE; }
.tu-seg--wrap { background: var(--tu-card); }
.tu-timebar__caption { padding-top: 10px; font-size: 14px; color: var(--ss-muted); }

.tu-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 32px;
}
.tu-step {
  border-top: 2px solid var(--ss-deep-space);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tu-step__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tu-step__num { font-size: 44px; line-height: 1; color: var(--ss-supernova); }
.tu-step__time { font-size: 20px; color: var(--ss-deep-space); white-space: nowrap; }
.tu-step__time small { font-family: var(--ss-font-body); font-size: 14px; font-weight: 600; color: var(--ss-muted); }
.tu-step h3 { font-size: 20px; font-weight: 700; color: var(--ss-deep-space); }

/* ---------- Packages ---------- */

.tu-packages { border-bottom: 1px solid var(--tu-line); }
.tu-package {
  border-top: 1px solid var(--tu-line);
  padding: 28px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 16px 32px;
  align-items: center;
}
.tu-package h3 { font-size: 26px; }
.tu-package__for {
  display: block;
  padding-top: 6px;
  font-family: var(--ss-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-supernova-text);
}
.tu-package__meta { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ss-muted); }
.tu-package__meta .tu-strong { font-weight: 600; color: var(--ss-deep-space); }
.tu-package .tu-arrow-link { justify-self: end; }

/* ---------- Tailored plan ---------- */

.tu-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}
.tu-plan__left { display: flex; flex-direction: column; gap: 32px; }
.tu-plan__left .tu-section__head { margin-bottom: 0; }
.tu-plan__sub { font-size: 20px; }

/* "What happens next": numbered nodes joined by a line, like a flow diagram */
.tu-flow { position: relative; display: flex; flex-direction: column; gap: 22px; margin-top: 20px; }
.tu-flow::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--ss-deep-space);
}
.tu-flow li { position: relative; display: flex; align-items: center; gap: 18px; min-height: 44px; }
.tu-flow__node {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 2px solid var(--ss-deep-space);
  border-radius: 999px;
  background: var(--tu-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.tu-flow li:last-child .tu-flow__node { background: var(--ss-highlight); }

.tu-brief {
  padding: 32px;
  border: 2px solid var(--ss-deep-space);
  border-radius: 12px;
  background: var(--tu-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tu-brief h3 { font-size: 24px; }
.tu-checklist { display: flex; flex-direction: column; gap: 12px; }
.tu-checklist li { display: flex; align-items: flex-start; gap: 12px; }
.tu-checklist svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  padding: 3px;
  border-radius: 999px;
  background: var(--tu-tint);
  color: var(--ss-supernova-text);
}

/* The example message, drawn as a chat bubble */
.tu-example { display: flex; flex-direction: column; gap: 8px; }
.tu-example__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.tu-bubble {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--tu-line);
  border-radius: 14px 14px 14px 4px;
  background: var(--tu-page);
  font-size: 16px;
}
.tu-brief .tu-btn-row .tu-btn { flex: 1; }

/* ---------- See how I teach ---------- */

.tu-sample {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  overflow: hidden;
  background: var(--tu-card);
  text-decoration: none;
}
.tu-sample:hover { border-color: var(--ss-deep-space); }
.tu-sample__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--tu-line); }
.tu-sample__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.tu-sample__type {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-supernova-text);
}
.tu-sample__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ss-deep-space); }
.tu-sample__site { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ss-muted); }

/* ---------- Contact ---------- */

.tu-contact {
  padding: 48px;
  border: 2px solid var(--ss-deep-space);
  border-radius: 12px;
  background: var(--tu-page);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.tu-contact__text { display: flex; flex-direction: column; gap: 18px; }
.tu-contact__text p { font-size: 19px; }
.tu-contact__list { display: flex; flex-direction: column; gap: 10px; }
.tu-contact__list li { display: flex; align-items: center; gap: 10px; }
.tu-contact__list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ss-supernova-text); }
.tu-contact__buttons { display: flex; flex-direction: column; gap: 16px; }
.tu-bigbtn {
  padding: 20px 24px;
  border-radius: var(--tu-radius);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.tu-bigbtn > svg:first-child { width: 28px; height: 28px; }
/* min-width: 0 lets the words wrap instead of pushing the arrow off a small phone */
.tu-bigbtn__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tu-bigbtn__text strong { font-size: 20px; }
.tu-bigbtn--primary { background: var(--ss-supernova-text); color: #FFFFFF; }
.tu-bigbtn--primary:hover { background: #8F3B16; color: #FFFFFF; }
.tu-bigbtn--outline { border: 1.5px solid var(--ss-deep-space); background: #FFFFFF; color: var(--ss-deep-space); }
.tu-bigbtn--outline:hover { color: var(--ss-deep-space); background: var(--tu-footer); }

/* ---------- Footer ---------- */

.tu-footer { background: var(--tu-footer); border-top: 1px solid #E0D5CA; }
.tu-footer__inner { padding-top: 48px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 36px; }
.tu-footer__cols { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; }
.tu-footer__about { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.tu-footer__col { display: flex; flex-direction: column; gap: 14px; }
.tu-footer__heading { font-size: 14px; font-weight: 700; color: var(--ss-deep-space); }
.tu-footer__base { padding-top: 20px; border-top: 1px solid #E0D5CA; font-size: 14px; color: var(--ss-muted); }

/* Zalo and WhatsApp bar fixed to the bottom of the screen on phones */
.tu-stickybar { display: none; }

/* ---------- Laptop: swap the menu links for a Menu button ---------- */
/* 1340px: below it the Menu button takes over. Above it the logo gives up a little
   width if the menu needs it (7 November 2026) */

@media (max-width: 1340px) {
  .tu-nav { display: none; }
  .tu-header__spacer { display: block; }
  .tu-menu-btn { display: flex; }
  .tu-menu:not([hidden]) { display: block; }
}


/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .tu-package { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .tu-package .tu-arrow-link { justify-self: start; }
  .tu-plan { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .tu-header__cta { display: none; }   /* the hero buttons are just below */
}

/* Below 1024px the main site's header is 66px tall and its logo is at most
   256px wide, shrinking with the screen (100vw minus 168px). Ours follows the
   same curve, 81% as wide because our letters fill more of the picture. */
@media (max-width: 1023px) {
  :root { --tu-header-h: 65px; }
  .tu-header .tu-logo img { height: auto; width: min(207px, calc(81vw - 136px)); }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  :root { --tu-gutter: 20px; }
  html { scroll-padding-top: 72px; }

  .tu-header__inner { padding: 0 12px 0 16px; gap: 8px; }
  .tu-brand__section, .tu-header__cta { display: none; }
  .tu-logo img { height: 30px; }
  .tu-lang { padding: 2px; }
  .tu-lang a { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .tu-lang__code { display: none; }

  .tu-section { padding: 56px 0; }
  .tu-section__head { margin-bottom: 28px; }
  .tu-section__title { gap: 14px; }
  .tu-section__num { font-size: 18px; }
  .tu-section__title h2 { font-size: 30px; }
  .tu-lede { font-size: 17px; }

  .tu-hero { padding: 28px 0 48px; }
  .tu-hero__grid { gap: 28px; }
  .tu-hero__text { gap: 16px; }
  .tu-kicker { font-size: 13px; }
  .tu-hero h1 { font-size: 38px; line-height: 1.08; }
  .tu-hero__intro { font-size: 17px; }
  .tu-hero .tu-btn-row { display: none; }   /* the sticky bar does this job on phones */
  .tu-facts { flex-direction: column; gap: 10px; padding-top: 0; }
  .tu-hero__photo { aspect-ratio: 4 / 3; }

  .tu-course { padding: 22px; }

  .tu-sample { flex-direction: row; }
  .tu-sample__thumb { width: 112px; flex-shrink: 0; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--tu-line); }
  .tu-sample__body { padding: 16px; }
  .tu-sample__title { font-size: 17px; }

  .tu-timebar__bar { height: 48px; }
  .tu-timebar__seg { font-size: 17px; }
  .tu-timebar__seg span { display: none; }
  .tu-steps { gap: 20px; }
  .tu-step { padding-top: 14px; }
  .tu-step__num { font-size: 36px; }

  .tu-package { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .tu-package h3 { font-size: 22px; }

  .tu-plan__sub { font-size: 18px; }
  .tu-brief { padding: 22px; }
  .tu-brief h3 { font-size: 21px; }
  .tu-brief .tu-btn-row { display: none; }   /* the sticky bar does this job on phones */

  .tu-contact { padding: 24px; gap: 28px; }
  .tu-contact__text p { font-size: 17px; }
  .tu-bigbtn { padding: 16px 18px; }
  .tu-bigbtn__text strong { font-size: 18px; }

  .tu-footer__inner { padding-bottom: 24px; }

  .tu-stickybar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: 12px 16px 20px;
    background: #FFFFFF;
    border-top: 1px solid var(--tu-line);
    display: flex;
    gap: 10px;
  }
  .tu-stickybar .tu-btn { flex: 1; min-height: 52px; border-radius: 8px; }
}

/* Phones: the Menu button shows only its icon, like the main site's, so the
   logo has room. The word stays in the page for screen readers, out of sight. */
@media (max-width: 640px) {
  .tu-menu-btn { width: var(--ss-touch-target); padding: 0; justify-content: center; }
  .tu-menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 320px phones: a little less padding and gap in the header */
@media (max-width: 340px) {
  .tu-header__inner { padding: 0 8px 0 12px; gap: 4px; }
}

/* ==========================================================================
   Course pages (tutor/page-tutor-course.php). Deyne chose layout c, the path
   with stage tabs, on 8 November. The a (list) and b (cards) rules below
   are only used by the mock-up in the tutor repo now.
   ========================================================================== */

.tu-cp-head { padding-bottom: 56px; }
/* "All courses": back to the landing page's course cards, above the course name (10 November 2026) */
.tu-cp-back { margin: -12px 0 12px; font-size: 15px; }
.tu-cp-head h1 { font-size: 56px; line-height: 1.1; margin: 10px 0 16px; }
.tu-cp-head .tu-lede { max-width: 760px; }
.tu-cp-path { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 28px 0 0; padding: 0; }
.tu-cp-path li {
  position: relative;
  padding: 8px 16px;
  border: 1px solid var(--tu-line-strong);
  border-radius: 999px;
  background: var(--tu-card);
  font-size: 15px;
  font-weight: 600;
}
.tu-cp-path li.is-here { background: var(--ss-highlight); border-color: transparent; color: var(--ss-deep-space); }
.tu-cp-path li + li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 14px;
  border-top: 2px solid var(--tu-line-strong);
}

.tu-stage + .tu-stage { margin-top: 56px; }
.tu-units.is-tabbed .tu-stage + .tu-stage { margin-top: 0; }   /* tabs on: one panel shows at a time */
.tu-stage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.tu-stage__head h3 { font-size: 30px; }
.tu-stage__meta, .tu-stage__note, .tu-stage__next { color: var(--ss-muted); font-size: 16px; }
.tu-stage__next { margin-top: 8px; font-weight: 600; }

.tu-utitle { font-size: 18px; font-weight: 700; color: var(--ss-deep-space); line-height: 1.35; }
.tu-utopics { margin-top: 4px; color: var(--ss-muted); font-size: 15px; line-height: 1.5; }
.tu-unum {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ss-supernova-text);
}
.tu-ulinks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 600; }
.tu-ulinks a { color: var(--ss-turquoise-text); text-underline-offset: 3px; }
.tu-ulinks a:hover { color: var(--ss-turquoise-deep); }
.tu-ulinks a.is-tutor { font-weight: 500; }

/* a: list */
.tu-ulist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tu-line); }
.tu-ulist li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(0, 300px);
  gap: 8px 24px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--tu-line);
}
.tu-ulist .tu-ulinks { padding-top: 2px; }

/* b: cards */
.tu-ucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.tu-ucard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius);
  background: var(--tu-page);
}
.tu-ucard .tu-kicker { font-size: 13px; }
.tu-ucard .tu-ulinks { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tu-line); }

/* c: path, one stage at a time */
.tu-stagetabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tu-stagetabs[hidden] { display: none; }   /* display: flex would otherwise beat the hidden attribute */
.tu-stagetabs button {
  min-height: var(--ss-touch-target);
  padding: 0 20px;
  border: 1px solid var(--tu-line-strong);
  border-radius: 999px;
  background: var(--tu-card);
  color: var(--ss-deep-space);
  font: 600 16px var(--ss-font-body);
  cursor: pointer;
}
.tu-stagetabs button[aria-selected="true"] { background: var(--ss-deep-space); border-color: var(--ss-deep-space); color: #FFFFFF; }
.tu-upath { list-style: none; margin: 0; padding: 0; }
.tu-upath li { position: relative; padding: 0 0 30px 68px; }
.tu-upath li::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  border-left: 2px solid var(--tu-line-strong);
}
.tu-upath li:last-child { padding-bottom: 8px; }
.tu-upath li:last-child::before { display: none; }
.tu-upath .tu-unum {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tu-tint);
  font-size: 20px;
}
.tu-upath .tu-ulinks { margin-top: 8px; }

/* Landing page: four course cards, with Lower Secondary in its own card, and the four
   sample lessons below them (Deyne, 10 November 2026).
   Four in a row, two by two, or one by one, so no card sits alone on a row */
#courses .tu-cards, #examples .tu-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { #courses .tu-cards, #examples .tu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #courses .tu-cards, #examples .tu-cards { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
  .tu-ulist li { grid-template-columns: 40px minmax(0, 1fr); }
  .tu-ulist .tu-ulinks { grid-column: 2; }
}

@media (max-width: 640px) {
  .tu-cp-head h1 { font-size: 40px; }
  .tu-stage__head h3 { font-size: 26px; }
  .tu-upath li { padding-left: 60px; }
}

/* ---------- QR pop-ups (Zalo and WhatsApp) ---------- */
/* A <dialog> opened by the script in each template. The box inside holds the
   padding, so a click that lands on the dialog itself is always outside the
   box, on the dark backdrop, and closes it. */
.tu-qr {
  width: min(360px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--tu-line);
  border-radius: 12px;
  background: var(--tu-card);
  color: var(--ss-deep-space-2);
  box-shadow: 0 20px 60px rgba(26, 12, 8, 0.25);
}
.tu-qr::backdrop { background: rgba(26, 12, 8, 0.6); }
.tu-qr__box {
  position: relative;
  padding: 32px 24px 24px;
  text-align: center;
}
.tu-qr h2 { font-size: 24px; margin: 0 32px 8px; }
.tu-qr p { font-size: 15px; color: var(--ss-muted); }
.tu-qr__code {
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
}
.tu-qr__phone { margin-bottom: 8px; }
.tu-qr .tu-btn { width: 100%; }
.tu-qr__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: var(--ss-touch-target);
  height: var(--ss-touch-target);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ss-muted);
  cursor: pointer;
}
.tu-qr__close:hover { background: var(--tu-page); color: var(--ss-deep-space); }
.tu-qr__close .tu-icon { width: 22px; height: 22px; }