/* ================= ABOUT PAGE ================= */
.about-page {
  --moss2: #728A46;
  --dark: #121212;
  --cream2: #F4ECDD;
  --paper: #F3E8CC;
  --orange2: #F07A3C;
  --font-serif: "Fraunces", "Plus Jakarta Sans", serif;
  --font-round: "Baloo 2", "Quicksand", sans-serif;
}
.about-page .container.narrow { width: min(47.5rem, 100% - 2rem); }

/* ---------- shared patterns ---------- */
.grid-bg {
  background-color: var(--moss2);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.15) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, rgba(255,255,255,.15) 0.0625rem, transparent 0.0625rem);
  background-size: 2rem 2rem;
}
.paper-bg {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, rgba(0,0,0,.05) 0.0625rem, transparent 0.0625rem);
  background-size: 1.75rem 1.75rem;
}

.back-home {
  position: fixed; top: 1.125rem; left: 1.125rem; z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #1F5E3B; color: #fff; font-weight: 700; font-size: 0.9375rem;
  padding: 0.6875rem 1.25rem; border-radius: 62.4375rem; border: 0.125rem solid rgba(255,255,255,.25);
  box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,.2); transition: transform .2s;
}
.back-home:hover { transform: translateX(-0.1875rem); }
.lang-pill {
  position: fixed; top: 1.125rem; right: 1.125rem; z-index: 70;
  display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer;
  background: #fff; color: #121212; font: 700 0.875rem var(--font-body);
  padding: 0.625rem 1rem; border-radius: 62.4375rem; border: 0.125rem solid #121212; box-shadow: 0.1875rem 0.1875rem 0 #121212;
  transition: transform .15s;
}
.lang-pill:hover { transform: translate(-0.0625rem, -0.0625rem); }

/* tilted highlight label: "giàu chuyên môn" style */
.tilted-tag { display: inline-block; margin: 0; transform: rotate(-3deg); }
.tilted-tag > span {
  display: inline-block; background: #F2B33D; color: #fff;
  font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100;
  font-size: clamp(2.125rem, 5.5vw, 4.125rem); line-height: 1.1;
  padding: 0.25rem 1.375rem 0.625rem; border: 0.1875rem solid #1b1b1b; box-shadow: 0.375rem 0.375rem 0 #1b1b1b;
  -webkit-text-stroke: 0.125rem #1b1b1b; paint-order: stroke fill;
}
.tilted-tag.orange > span { background: var(--orange2); }
.tilted-tag.small > span { font-size: clamp(1.125rem, 2.4vw, 1.75rem); padding: 0.125rem 0.875rem 0.375rem; box-shadow: 0.25rem 0.25rem 0 #1b1b1b; }
.tilted-tag.big > span { font-family: var(--font-round); font-weight: 800; -webkit-text-stroke: 0; font-size: clamp(2.125rem, 5.4vw, 3.75rem); padding: 0 1.625rem; border-radius: 0.875rem; }
.tilted-tag.right { transform: rotate(2deg); margin-left: 1.5rem; }

.btn-orange {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--orange2); color: #fff; font-weight: 700; font-size: 1.125rem;
  padding: 1rem 2.125rem; border-radius: 62.4375rem; border: 0.1875rem solid #1b1b1b;
  box-shadow: 0.3125rem 0.3125rem 0 #1b1b1b; transition: transform .15s, box-shadow .15s;
}
.btn-orange:hover { transform: translate(-0.125rem, -0.125rem); box-shadow: 0.4375rem 0.4375rem 0 #1b1b1b; }
.btn-orange:active { transform: translate(0.1875rem, 0.1875rem); box-shadow: 0.0625rem 0.0625rem 0 #1b1b1b; }
.btn-orange.full { width: 100%; font-size: 1rem; padding: 0.9375rem 1.125rem; white-space: nowrap; }

/* smiley sun used in several places */
.mini-sun, .video-sun, .bottom-sun {
  position: relative; display: inline-block; border-radius: 50%;
  background: #F0A22E; border: 0.125rem solid #222;
}
.mini-sun { width: 2.5rem; height: 2.5rem; box-shadow: 0 0 0 0.1875rem #fff8e7, 0 0 0 0.3125rem #222; }
.mini-sun i, .video-sun i, .bottom-sun i { position: absolute; top: 36%; width: 9%; height: 13%; border-radius: 50%; background: #222; }
.mini-sun i:first-child, .video-sun i:first-child, .bottom-sun i:first-child { left: 34%; }
.mini-sun i:nth-child(2), .video-sun i:nth-child(2), .bottom-sun i:nth-child(2) { right: 34%; }
.mini-sun b, .video-sun b, .bottom-sun b {
  position: absolute; left: 36%; top: 55%; width: 28%; height: 14%;
  border: 0.125rem solid #222; border-top: 0; border-radius: 0 0 2.5rem 2.5rem;
}

/* ---------- 1. HERO ---------- */
.a-hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: visible;
  display: grid; place-items: center; text-align: center; padding: 6.875rem 1rem 5rem;
}
.a-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-badge { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.badge-pill { background: var(--orange2); color: #fff; font-size: 0.8125rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 62.4375rem; border: 0.125rem solid #1b1b1b; }
.outline-title {
  margin: 0; color: #fff; font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100;
  font-size: clamp(2.5rem, 7vw, 5.375rem); line-height: 1.05; letter-spacing: -.01em;
  -webkit-text-stroke: 0.1875rem #121212; paint-order: stroke fill;
  text-shadow: 0.3125rem 0.3125rem 0 #121212;
}
.a-hero .tilted-tag { margin: 0.375rem 0 2.5rem; }
.floating-words span {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r));
  font-family: var(--font-round); font-weight: 800; font-size: clamp(0.875rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,.55); border: 0.125rem dashed rgba(255,255,255,.4); border-radius: 62.4375rem; padding: 0.25rem 1rem;
  animation: drift 6s ease-in-out infinite alternate;
}
.floating-words span:nth-child(2n) { animation-delay: -3s; }
@keyframes drift { to { transform: rotate(var(--r)) translateY(-0.875rem); } }

/* ---------- 2. ABOUT (dark) ---------- */
.a-about { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
/* khoảng tối phía trên & dưới khung "TOEX English" (như trang mẫu: max(8em, 25vh)) */
.about-gap { position: relative; height: max(8rem, 25vh); display: flex; justify-content: center; }
.frame {
  position: relative; z-index: 2; background: var(--dark); margin-top: -0.0625rem; border: 0.0625rem solid #4f7dd6; padding: clamp(1.75rem, 5vw, 4rem);
  display: flex; flex-direction: column; align-items: center;
}
.frame-tab {
  position: absolute; top: -0.0625rem; left: -0.0625rem; transform: translateY(-100%);
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: #4f7dd6; color: #fff; font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem;
}
.serif-title {
  margin: 0 0 2.5rem; text-align: center; font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100;
  font-size: clamp(1.875rem, 4.4vw, 3.25rem); line-height: 1.15;
}
.serif-title mark {
  display: inline-block; background: #F2B33D; color: #fff; padding: 0 0.875rem 0.25rem; margin-top: 0.375rem;
  transform: rotate(-1.5deg);
}
.serif-title.dark { color: #121212; }
.serif-title.dark mark { background: var(--orange2); }
.feature-list { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: 1.75rem; width: min(40rem, 100%); }
.feature-list li { display: flex; align-items: center; gap: 1.375rem; }
.f-icon { flex: none; width: 4rem; height: 4rem; border-radius: 1rem; background: var(--c); display: grid; place-items: center; color: #fff; }
.f-icon svg { width: 1.875rem; height: 1.875rem; }
.feature-list h3 { margin: 0 0 0.25rem; font-size: 1.1875rem; }
.feature-list p { margin: 0; opacity: .7; font-size: 0.9375rem; }

.video-card {
  position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 16.25rem; overflow: hidden;
  border-radius: 0.75rem; border: 0.1875rem solid #F2B33D;
  background-color: #56682F;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.12) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, rgba(255,255,255,.12) 0.0625rem, transparent 0.0625rem);
  background-size: 1.625rem 1.625rem;
  display: flex; align-items: center; padding: 0 6%;
}
/* mặt trời cao theo thẻ (không theo bề ngang) để luôn nằm gọn bên phải, phần dưới bị cắt bởi mép thẻ */
.video-sun {
  position: absolute; right: 4%; top: 26%; height: 90%; width: auto; aspect-ratio: 1;
  border-width: 0.25rem; box-shadow: 0 0 0 0.75rem #fff8e7, 0 0 0 1rem #222; transition: transform .6s;
}
.video-sun b { border-width: 0.25rem; }
.video-card:hover .video-sun { transform: rotate(-8deg) translateY(-0.25rem); }
.video-text { position: relative; z-index: 2; max-width: 52%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.stroke-text {
  font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100; line-height: 1.05;
  font-size: clamp(1.5rem, 3.6vw, 2.875rem); color: #fff; -webkit-text-stroke: 0.125rem #121212; paint-order: stroke fill; text-shadow: 0.1875rem 0.1875rem 0 #121212;
}
.video-play {
  margin-top: 0.875rem; flex: none;
  width: 4.75rem; height: 4.75rem; border-radius: 50%; background: #F0A22E; color: #121212;
  display: grid; place-items: center; border: 0.1875rem solid #121212; box-shadow: 0 0 0 0.5rem rgba(255,255,255,.3);
  transition: transform .25s;
}
.video-card:hover .video-play { transform: scale(1.1); }


/* ---------- cầu vồng & dải chữ chạy (hiệu ứng khi kéo trang, như trang mẫu) ---------- */
/* nét cầu vồng được "vẽ" bằng stroke-dasharray trong about.js; mặc định ẩn để không nháy khi tải */
.rb-sides path, .rb-hang-svg path, .rb-floor-svg path { stroke-dasharray: 0 99999; }
/* cố định theo màn hình như trang mẫu; phần tối phía dưới (đứng sau trong trang) sẽ che lên khi kéo xuống */
.rb-sides { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rb-side { position: absolute; width: 20.0625rem; }
.rb-right { top: 0; right: -4.75rem; }
.rb-left { bottom: -10rem; left: -4.75rem; transform: scale(-1); }
.floating-words { z-index: 1; }
/* 9 dải rủ xuống: bắt đầu sau nút "Tư vấn", chạy dưới dải chữ, dừng ở mép trên khung */
.rb-hang { position: absolute; left: 50%; width: min(28.25rem, 100%); transform: translateX(-50%); z-index: 1; pointer-events: none; }
.rb-hang-svg, .rb-floor-svg { display: block; width: 100%; height: 100%; }
/* sàn cầu vồng: nghiêng 45° trong phối cảnh 3D */
.rb-floor-wrap { position: absolute; top: 0; left: 50%; width: min(28.25rem, 100%); height: 20rem; transform: translateX(-50%); perspective: 25rem; }
.rb-floor { position: relative; height: 20rem; transform-origin: center top; transform: rotateX(45deg); transform-style: preserve-3d; }
/* dải chữ chạy */
.logo-marquee {
  position: relative; z-index: 2; height: 6rem; overflow: hidden;
  background: var(--moss2); color: #FFFEFB;
  border-top: 0.125rem solid #121212; border-bottom: 0.125rem solid #121212;
  box-shadow: 0 0.5rem 0 rgba(0,0,0,.15);
}
.marquee { display: flex; height: 100%; }
.marquee-list { flex: none; display: flex; align-items: center; gap: 2.8125rem; padding-right: 2.8125rem; animation: marquee 30s linear infinite paused; }
.marquee-list span { font-family: var(--font-round); font-weight: 800; font-size: 1.875rem; line-height: 1; white-space: nowrap; }
.marquee-list i { flex: none; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #FFFEFB; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 767px) {
  .logo-marquee { height: 4.5rem; }
  .marquee-list span { font-size: 1.375rem; }
  .rb-side { width: 12.5rem; }
  .rb-right { right: -3.75rem; } .rb-left { left: -3.75rem; bottom: -6.875rem; }
  .rb-floor-wrap, .rb-floor { height: 22.5rem; }
  .rb-hang, .rb-floor-wrap { width: 66vw; }
}

/* ---------- 3. TEAM (bố cục + hiệu ứng theo trang mẫu) ---------- */
.a-team { padding: 6.875rem 0 12.5rem; }
/* 3 cột × 2 hàng; ô 1 & 4 lệch xuống 6.25rem, ô 3 & 6 lệch xuống 10rem */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.75rem; align-items: start; }
.t-cell.c1, .t-cell.c4 { transform: translateY(6.25rem); }
.t-cell.c3, .t-cell.c6 { transform: translateY(10rem); }
.t-cell.reveal.in { transform: none; }
.t-cell.c1.reveal.in, .t-cell.c4.reveal.in { transform: translateY(6.25rem); }
.t-cell.c3.reveal.in, .t-cell.c6.reveal.in { transform: translateY(10rem); }
.team-intro { color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 0 0.75rem; }
.kicker-serif { margin: 0; font-family: var(--font-serif); font-weight: 900; font-size: 1.875rem; -webkit-text-stroke: 0.0938rem #121212; paint-order: stroke fill; text-shadow: 0.125rem 0.125rem 0 #121212; }
.stack-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; margin: 0; }
.stack-title .tilted-tag > span { font-size: clamp(1.375rem, 2.5vw, 2.25rem); white-space: nowrap; padding: 0.125rem 1rem 0.4375rem; }
.team-intro .kicker-serif { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: none; }
.tilted-tag.yellow > span { background: #F3A20F; }
.team-intro p { margin: 0; line-height: 1.7; font-size: 1rem; max-width: 18em; }
.btn-pink { display: inline-block; background: #F28CA0; color: #121212; font-weight: 700; padding: 0.625rem 1.375rem; border-radius: 62.4375rem; border: 0.125rem solid #121212; box-shadow: 0.1875rem 0.1875rem 0 #121212; transition: transform .15s; }
.btn-pink:hover { transform: translate(-0.125rem, -0.125rem); }

.t-card { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.t-label {
  position: relative; z-index: 2; height: 2.75rem; margin-bottom: -1.375rem; padding: 0 1rem;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  background: #FFFEFB; color: #121212; font-weight: 700; font-size: 0.9375rem;
  border: 0.125rem solid #121212; border-radius: 0.5rem;
}
.t-frame { position: relative; width: 100%; }
.t-photo {
  position: relative; aspect-ratio: 1 / 1.125; overflow: hidden;
  background: var(--bg, #FFFEFB); border: 0.125rem solid #121212; box-shadow: 0.375rem 0.375rem 0 rgba(0,0,0,.15);
}
.t-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; user-select: none; }
/* ô giáo viên chưa có ảnh: hình người đơn giản trên nền màu của thẻ */
.t-photo-empty svg { position: absolute; left: 50%; bottom: 0; width: 72%; transform: translateX(-50%); }
.t-card .h {
  position: absolute; z-index: 1; width: 1.125rem; height: 1.125rem; pointer-events: none;
  background: #FFFEFB; border: 0.125rem solid #121212; transform: translate(-50%, -50%);
}
.h.tl { top: 0; left: 0; } .h.tr { top: 0; left: 100%; } .h.bl { top: 100%; left: 0; } .h.br { top: 100%; left: 100%; }
/* nhãn tên = "con trỏ Figma": chạy theo chuột khi rê lên thẻ */
.t-name-wrap { position: absolute; inset: 1rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; }
.t-name {
  position: absolute; z-index: 5; height: 2.25rem; padding: 0 0.75rem;
  display: flex; align-items: center; white-space: nowrap; user-select: none; pointer-events: none;
  background: #F97028; color: #fff; font-weight: 700; font-size: 1rem;
  border: 0.125rem solid #000; border-radius: 1.25rem;
  transition: transform .5s cubic-bezier(.165, .84, .44, 1);
  will-change: transform;
}
.t-arrow { position: absolute; top: 0; left: 0; width: 1.375rem; transform: translate(-75%, -75%); }
.t-caption {
  position: relative; width: calc(100% - 3rem); margin-top: -0.125rem; padding: 1.25rem 1rem;
  background: #FFFEFB; color: #3b3b3b; border: 0.125rem solid #121212;
  text-align: center; font-size: 0.9375rem; line-height: 1.5; text-wrap: balance;
}
.t-caption b { display: block; color: #121212; margin-bottom: 0.25rem; font-size: 1rem; }

/* ---- con trỏ chuột kiểu pixel (như trang mẫu) ---- */
body.px-cursor, body.px-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='38' viewBox='0 0 24 38'%3E%3Cg opacity='1'%3E%3Cpath d='M2 4h2v2h-2zM2 6h4v2h-4zM2 8h6v2h-6zM2 10h8v2h-8zM2 12h10v2h-10zM2 14h12v2h-12zM2 16h14v2h-14zM2 18h16v2h-16zM2 20h18v2h-18zM2 22h12v2h-12zM2 24h6v2h-6zM10 24h4v2h-4zM2 26h4v2h-4zM10 26h4v2h-4zM2 28h2v2h-2zM12 28h4v2h-4zM12 30h4v2h-4zM14 32h4v2h-4zM14 34h4v2h-4z' fill='%23FFFEFB'/%3E%3Cpath d='M0 0h2v2h-2zM0 2h4v2h-4zM0 4h2v2h-2zM4 4h2v2h-2zM0 6h2v2h-2zM6 6h2v2h-2zM0 8h2v2h-2zM8 8h2v2h-2zM0 10h2v2h-2zM10 10h2v2h-2zM0 12h2v2h-2zM12 12h2v2h-2zM0 14h2v2h-2zM14 14h2v2h-2zM0 16h2v2h-2zM16 16h2v2h-2zM0 18h2v2h-2zM18 18h2v2h-2zM0 20h2v2h-2zM20 20h2v2h-2zM0 22h2v2h-2zM14 22h10v2h-10zM0 24h2v2h-2zM8 24h2v2h-2zM14 24h2v2h-2zM0 26h2v2h-2zM6 26h4v2h-4zM14 26h2v2h-2zM0 28h2v2h-2zM4 28h2v2h-2zM10 28h2v2h-2zM16 28h2v2h-2zM0 30h4v2h-4zM10 30h2v2h-2zM16 30h2v2h-2zM0 32h2v2h-2zM12 32h2v2h-2zM18 32h2v2h-2zM12 34h2v2h-2zM18 34h2v2h-2zM14 36h4v2h-4z' fill='%23131313'/%3E%3C/g%3E%3C/svg%3E") 1 1, auto; }
body.px-cursor :is(p, li, h1, h2, h3, h4, h5, blockquote, q, [data-text]),
body.px-cursor :is(p, li, h1, h2, h3, h4, h5) *,
body.px-cursor :is(input[type="text"], input[type="email"], input[type="tel"], input:not([type]), textarea) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='38' viewBox='0 0 18 38'%3E%3Cg opacity='1'%3E%3Cpath d='M0 0h18v2h-18zM0 2h2v2h-2zM8 2h2v2h-2zM16 2h2v2h-2zM0 4h8v2h-8zM10 4h8v2h-8zM6 6h2v2h-2zM10 6h2v2h-2zM6 8h2v2h-2zM10 8h2v2h-2zM6 10h2v2h-2zM10 10h2v2h-2zM6 12h2v2h-2zM10 12h2v2h-2zM6 14h2v2h-2zM10 14h2v2h-2zM6 16h2v2h-2zM10 16h2v2h-2zM6 18h2v2h-2zM10 18h2v2h-2zM6 20h2v2h-2zM10 20h2v2h-2zM6 22h2v2h-2zM10 22h2v2h-2zM6 24h2v2h-2zM10 24h2v2h-2zM6 26h2v2h-2zM10 26h2v2h-2zM6 28h2v2h-2zM10 28h2v2h-2zM6 30h2v2h-2zM10 30h2v2h-2zM0 32h8v2h-8zM10 32h8v2h-8zM0 34h2v2h-2zM8 34h2v2h-2zM16 34h2v2h-2zM0 36h18v2h-18z' fill='%23FFFEFB'/%3E%3Cpath d='M2 2h6v2h-6zM10 2h6v2h-6zM8 4h2v2h-2zM8 6h2v2h-2zM8 8h2v2h-2zM8 10h2v2h-2zM8 12h2v2h-2zM8 14h2v2h-2zM8 16h2v2h-2zM8 18h2v2h-2zM8 20h2v2h-2zM8 22h2v2h-2zM8 24h2v2h-2zM8 26h2v2h-2zM8 28h2v2h-2zM8 30h2v2h-2zM8 32h2v2h-2zM2 34h6v2h-6zM10 34h6v2h-6z' fill='%23131313'/%3E%3C/g%3E%3C/svg%3E") 9 19, text; }
body.px-cursor :is(a, button, select, summary, label, [role="tab"], input[type="submit"], input[type="radio"], input[type="checkbox"]),
body.px-cursor :is(a, button, summary, label, [role="tab"]) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Cg opacity='1'%3E%3Cpath d='M10 2h4v2h-4zM10 4h4v2h-4zM10 6h4v2h-4zM10 8h4v2h-4zM10 10h4v2h-4zM16 10h4v2h-4zM10 12h4v2h-4zM16 12h4v2h-4zM22 12h2v2h-2zM10 14h4v2h-4zM16 14h4v2h-4zM22 14h4v2h-4zM2 16h4v2h-4zM10 16h4v2h-4zM16 16h4v2h-4zM22 16h4v2h-4zM28 16h2v2h-2zM2 18h6v2h-6zM10 18h16v2h-16zM28 18h2v2h-2zM4 20h4v2h-4zM10 20h20v2h-20zM6 22h24v2h-24zM6 24h22v2h-22zM8 26h20v2h-20zM8 28h18v2h-18zM10 30h16v2h-16zM10 32h16v2h-16z' fill='%23FFFEFB'/%3E%3Cpath d='M10 0h4v2h-4zM8 2h2v2h-2zM14 2h2v2h-2zM8 4h2v2h-2zM14 4h2v2h-2zM8 6h2v2h-2zM14 6h2v2h-2zM8 8h2v2h-2zM14 8h6v2h-6zM8 10h2v2h-2zM14 10h2v2h-2zM20 10h4v2h-4zM8 12h2v2h-2zM14 12h2v2h-2zM20 12h2v2h-2zM24 12h4v2h-4zM2 14h4v2h-4zM8 14h2v2h-2zM14 14h2v2h-2zM20 14h2v2h-2zM26 14h4v2h-4zM0 16h2v2h-2zM6 16h4v2h-4zM14 16h2v2h-2zM20 16h2v2h-2zM26 16h2v2h-2zM30 16h2v2h-2zM0 18h2v2h-2zM8 18h2v2h-2zM26 18h2v2h-2zM30 18h2v2h-2zM2 20h2v2h-2zM8 20h2v2h-2zM30 20h2v2h-2zM4 22h2v2h-2zM30 22h2v2h-2zM4 24h2v2h-2zM28 24h2v2h-2zM6 26h2v2h-2zM28 26h2v2h-2zM6 28h2v2h-2zM26 28h2v2h-2zM8 30h2v2h-2zM26 30h2v2h-2zM8 32h2v2h-2zM26 32h2v2h-2zM8 34h20v2h-20z' fill='%23131313'/%3E%3C/g%3E%3C/svg%3E") 11 1, pointer; }
/* trên thẻ giáo viên: con trỏ thật mờ đi, nhãn tên cam thay vai trò con trỏ */
body.px-cursor .t-card[data-sticky-cursor], body.px-cursor .t-card[data-sticky-cursor] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='38' viewBox='0 0 24 38'%3E%3Cg opacity='0.2'%3E%3Cpath d='M2 4h2v2h-2zM2 6h4v2h-4zM2 8h6v2h-6zM2 10h8v2h-8zM2 12h10v2h-10zM2 14h12v2h-12zM2 16h14v2h-14zM2 18h16v2h-16zM2 20h18v2h-18zM2 22h12v2h-12zM2 24h6v2h-6zM10 24h4v2h-4zM2 26h4v2h-4zM10 26h4v2h-4zM2 28h2v2h-2zM12 28h4v2h-4zM12 30h4v2h-4zM14 32h4v2h-4zM14 34h4v2h-4z' fill='%23FFFEFB'/%3E%3Cpath d='M0 0h2v2h-2zM0 2h4v2h-4zM0 4h2v2h-2zM4 4h2v2h-2zM0 6h2v2h-2zM6 6h2v2h-2zM0 8h2v2h-2zM8 8h2v2h-2zM0 10h2v2h-2zM10 10h2v2h-2zM0 12h2v2h-2zM12 12h2v2h-2zM0 14h2v2h-2zM14 14h2v2h-2zM0 16h2v2h-2zM16 16h2v2h-2zM0 18h2v2h-2zM18 18h2v2h-2zM0 20h2v2h-2zM20 20h2v2h-2zM0 22h2v2h-2zM14 22h10v2h-10zM0 24h2v2h-2zM8 24h2v2h-2zM14 24h2v2h-2zM0 26h2v2h-2zM6 26h4v2h-4zM14 26h2v2h-2zM0 28h2v2h-2zM4 28h2v2h-2zM10 28h2v2h-2zM16 28h2v2h-2zM0 30h4v2h-4zM10 30h2v2h-2zM16 30h2v2h-2zM0 32h2v2h-2zM12 32h2v2h-2zM18 32h2v2h-2zM12 34h2v2h-2zM18 34h2v2h-2zM14 36h4v2h-4z' fill='%23131313'/%3E%3C/g%3E%3C/svg%3E") 1 1, auto; }

/* ---------- 4. ROADMAP ---------- */
.a-roadmap { background: var(--cream2); padding: 6.875rem 0 5rem; }
.roadmap-head { text-align: center; }
.roadmap-head p { margin: -1.25rem 0 2.5rem; color: #7a6a55; font-weight: 600; }
.level-scroller {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.625rem 0.25rem 1.125rem;
  scrollbar-width: thin;
}
.level-tab {
  flex: 0 0 min(18.75rem, 78%); scroll-snap-align: start; text-align: left;
  background: var(--lc); color: #fff; border-radius: 0.875rem; padding: 1.25rem 1.375rem; border: 0.1875rem solid transparent;
  opacity: .72; transition: opacity .2s, transform .2s, border-color .2s;
}
.level-tab:hover { opacity: .95; }
.level-tab.active { opacity: 1; border-color: #fff; box-shadow: 0 0 0 0.1875rem var(--lc), 0 0.75rem 1.5rem rgba(0,0,0,.15); transform: translateY(-0.25rem); }
.level-tab small { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.level-tab strong { display: block; margin: 0.5rem 0 0.25rem; font-family: var(--font-display); font-size: 1.875rem; }
.level-tab strong em { font-style: normal; font-size: 1.125rem; opacity: .8; }
.level-tab span { font-weight: 700; }
.scroll-hint { text-align: center; margin: 0.25rem 0 1.625rem; padding: 0.75rem; background: #fff; border-radius: 62.4375rem; font-weight: 600; color: #7a6a55; font-size: 0.875rem; }

.level-panel {
  background: #FFFBF3; border-radius: 1rem; border-left: 0.375rem solid var(--lc, #C88B5E);
  padding: clamp(1.375rem, 4vw, 2.75rem); box-shadow: 0 0.625rem 2.5rem rgba(120,90,50,.08);
  animation: fadeUp .45s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(0.875rem); } }
.lp-top { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lp-top small { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; color: #8b7a63; }
.lp-top h3 { margin: 0.375rem 0 0.25rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.lp-top em { color: var(--lc); font-family: var(--font-serif); font-size: 1.125rem; }
.io-box { align-self: flex-start; display: flex; align-items: center; gap: 1rem; background: color-mix(in srgb, var(--lc) 15%, white); padding: 0.875rem 1.375rem; border-radius: 0.75rem; font-family: var(--font-display); }
.io-box div { text-align: center; }
.io-box small { display: block; font-size: 0.625rem; letter-spacing: .1em; }
.io-box b { font-size: 1.875rem; color: var(--lc); }
.lp-info { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; margin: 1.625rem 0 0.5rem; }
.lp-meta b { display: block; font-family: var(--font-display); font-size: 1.1875rem; margin-bottom: 0.375rem; }
.lp-meta span { display: block; color: #8b7a63; line-height: 1.7; }
.lp-meta strong { color: #3d352b; }
.lp-price { background: color-mix(in srgb, var(--lc) 12%, white); border: 0.125rem dashed var(--lc); border-radius: 0.875rem; padding: 0.875rem 1.125rem; }
.lp-price small { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; color: #8b7a63; }
.lp-price b { display: block; font-family: var(--font-display); font-size: clamp(1.1875rem, 2vw, 1.5rem); color: var(--lc); margin: 0.125rem 0 0.25rem; }
.lp-price span { font-size: 0.8125rem; color: #6b5a44; }
.lp-sub { margin: 1.625rem 0 0.625rem; font-size: 0.8125rem; letter-spacing: .12em; text-transform: uppercase; color: #8b7a63; }
.lp-classes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lp-classes li {
  display: grid; grid-template-columns: 1fr 1.6fr 1.1fr 1.4fr auto; gap: 0.75rem; align-items: center;
  background: #fff; border: 0.0938rem solid #eadfcd; border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem;
}
.lp-classes b { color: var(--lc); }
.lp-classes span { color: #5d5245; }
.lp-classes em { font-style: normal; font-weight: 700; font-size: 0.8125rem; }
.lp-classes a { background: var(--lc); color: #fff; font-weight: 700; font-size: 0.8125rem; padding: 0.375rem 0.875rem; border-radius: 62.4375rem; transition: transform .15s; }
.lp-classes a:hover { transform: translateY(-0.125rem); }
.lp-empty { color: #8b7a63; font-style: italic; }
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.625rem; }
.skill-box { border-top: 0.0625rem solid #eadfcd; padding-top: 1.125rem; }
.skill-box h4 { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.75rem; font-size: 1.0625rem; }
.skill-box h4 i { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; background: var(--lc); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; }
.skill-box h4 span { color: #8b7a63; font-weight: 500; }
.skill-box h5 { margin: 0.625rem 0 0.375rem; font-size: 0.6875rem; letter-spacing: .12em; color: #8b7a63; }
.skill-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3125rem; font-size: 0.875rem; }
.skill-box .before li { color: #a9998a; text-decoration: line-through; }
.skill-box .after li::before { content: "✓ "; color: #2f8a4a; font-weight: 800; }
.skill-box q { display: block; margin-top: 0.75rem; font-family: var(--font-serif); font-style: italic; color: var(--lc); font-size: 0.9375rem; }

/* ---- mô tả chi tiết khoá học (bấm "Xem chi tiết nội dung khoá học") ---- */
.lp-more { margin-top: 1.875rem; padding-top: 1.875rem; border-top: 0.0625rem solid #eadfcd; text-align: center; }
.lp-toggle {
  display: inline-flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 2.25rem; border-radius: 62.4375rem;
  border: 0.125rem solid color-mix(in srgb, var(--lc) 75%, white);
  color: color-mix(in srgb, var(--lc) 65%, #2a1a0c);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.lp-toggle:hover { transform: translateY(-0.125rem); background: color-mix(in srgb, var(--lc) 10%, white); }
.lp-toggle i { font-style: normal; font-size: 0.75rem; transition: transform .3s; }
.lp-toggle.open { background: var(--lc); border-color: var(--lc); color: #fff; }
.lp-toggle.open i { transform: rotate(180deg); }
.course-detail { max-width: 57.5rem; margin: 2.125rem auto 0.375rem; text-align: left; animation: cdIn .45s ease both; }
@keyframes cdIn { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.cd-title {
  margin: 0 0 1.25rem; font-family: var(--font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(1.5625rem, 2.8vw, 2.25rem); line-height: 1.25; color: #1d160f;
}
.course-detail p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.8; color: #3d352b; }
.course-detail p b { color: #1d160f; }
.course-detail h4 {
  margin: 2.25rem 0 0.875rem; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.1875rem, 2vw, 1.5rem); line-height: 1.3; color: color-mix(in srgb, var(--lc) 70%, #2a1a0c);
}
.cd-boxes { display: grid; gap: 1rem; }
.cd-box {
  background: color-mix(in srgb, var(--lc) 12%, #FFFBF3);
  border-left: 0.3125rem solid var(--lc); border-radius: 0.875rem; padding: 1.125rem 1.625rem;
}
.cd-box h5 { margin: 0 0 0.375rem; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: .01em; color: color-mix(in srgb, var(--lc) 70%, #2a1a0c); }
.course-detail .cd-box p { margin: 0; font-size: 1rem; line-height: 1.75; }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.cd-list li { position: relative; padding-left: 2.25rem; font-size: 1.0313rem; line-height: 1.7; color: #3d352b; }
.cd-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0.125rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lc) 18%, white); color: color-mix(in srgb, var(--lc) 70%, #2a1a0c);
  font-size: 0.8125rem; font-weight: 800;
}
.cd-list li b { color: #1d160f; }
.course-detail .cd-outro {
  margin: 2.25rem 0 1.375rem; padding-top: 1.625rem; border-top: 0.0625rem dashed #d9ccb3;
  font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.6;
  color: color-mix(in srgb, var(--lc) 75%, #2a1a0c);
}
.cd-cta {
  display: inline-flex; align-items: center; gap: 0.625rem;
  background: var(--lc); color: #fff; font-weight: 700; font-size: 0.9375rem;
  padding: 0.875rem 1.75rem; border-radius: 62.4375rem; box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--lc) 35%, transparent);
  transition: transform .2s;
}
.cd-cta::after { content: "➔"; }
.cd-cta:hover { transform: translateY(-0.125rem); }
@media (max-width: 600px) {
  .lp-toggle { padding: 0.75rem 1.375rem; font-size: 0.9063rem; gap: 0.625rem; }
  .course-detail p, .cd-list li { font-size: 0.9688rem; }
  .cd-box { padding: 1rem 1.125rem; }
}

/* ---------- 5. PERKS ---------- */
.a-perks { background: var(--cream2); padding: 1.25rem 0 6.875rem; }
.letter {
  background: #FFFDF7; border-radius: 0.375rem; padding: clamp(1.5rem, 5vw, 3.75rem);
  box-shadow: 0 0.0625rem 0 #e7dcc6, 0 1.25rem 3.125rem rgba(120,90,50,.1);
  line-height: 1.8; color: #3d352b;
}
.eyebrow-line { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .2em; color: #b0885a; }
.eyebrow-line.center { text-align: center; }
.serif-italic { margin: 0.375rem 0 1.25rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 4vw, 2.875rem); color: #121212; }
.letter mark, .perk mark { background: #FBE3B8; padding: 0 0.25rem; border-radius: 0.1875rem; font-weight: 700; }
.letter blockquote { margin: 1.625rem 0; padding-top: 1.375rem; border-top: 0.0625rem dashed #d9ccb3; font-family: var(--font-serif); font-style: italic; color: #6a4f86; }
.perk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.875rem; }
.perk { background: var(--bg); border-left: 0.3125rem solid var(--c); border-radius: 0.875rem; padding: 1.375rem 1.5rem; font-size: 0.9375rem; line-height: 1.7; }
.perk h3 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.625rem; font-size: 1.125rem; }
.perk h3 span { width: 2.125rem; height: 2.125rem; border-radius: 0.5rem; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.perk p { margin: 0; }
.eco { margin-top: 5rem; }
.eco h2 { text-align: center; font-family: var(--font-serif); font-size: clamp(1.625rem, 3.4vw, 2.5rem); margin: 0.625rem 0 2.25rem; }
.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.eco-item { background: #fff; border: 0.1875rem solid #121212; border-radius: 1.125rem; padding: 1.5rem 1.25rem; box-shadow: 0.3125rem 0.3125rem 0 #121212; transition: transform .2s; }
.eco-item:hover { transform: translateY(-0.375rem) rotate(-1deg); }
.eco-item > span { font-size: 2.125rem; }
.eco-item h3 { margin: 0.625rem 0 0.5rem; font-size: 1.125rem; }
.eco-item p { margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6; }
.eco-foot { text-align: center; margin-top: 2.25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; color: #6b5a44; }

/* ---------- 6. LESSONS ---------- */
.a-lessons { padding: 6.25rem 0; }
.round-title { margin: 0 0 2.5rem; text-align: center; font-family: var(--font-round); font-weight: 800; font-size: clamp(2.375rem, 5.4vw, 3.75rem); line-height: 1.1; color: #121212; }
.round-title .tilted-tag { margin-top: 0.375rem; }
.lesson-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.875rem; }
.lesson-tabs button {
  font-family: var(--font-round); font-weight: 800; font-size: 1.125rem; letter-spacing: .04em;
  padding: 0.5rem 1.5rem; border-radius: 62.4375rem; border: 0.1875rem solid #121212; background: #fff; box-shadow: 0.1875rem 0.1875rem 0 #121212;
  transition: transform .15s, background .15s;
}
.lesson-tabs button:hover { transform: translateY(-0.125rem); }
.lesson-tabs button.active { background: #121212; color: #fff; }
.board {
  border-radius: 1.25rem; overflow: hidden; border: 0.1875rem solid #121212; box-shadow: 0.5rem 0.5rem 0 #121212;
  background: linear-gradient(135deg, var(--b1), var(--b2)); padding: 1.125rem; min-height: 26.25rem;
  transition: background .4s;
}
.board-bar { display: flex; align-items: center; gap: 0.625rem; color: #fff; margin-bottom: 1rem; }
.board-bar b { font-size: 0.9375rem; }
.board-bar small { opacity: .8; }
.board-bar .dots { display: flex; gap: 0.375rem; margin-right: 0.375rem; }
.board-bar .dots i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: rgba(255,255,255,.6); }
.board-cols { display: grid; grid-template-columns: repeat(4, minmax(12.5rem, 1fr)); gap: 0.875rem; overflow-x: auto; padding-bottom: 0.375rem; }
.board-col h4 { margin: 0 0 0.625rem; color: #fff; font-size: 0.875rem; background: rgba(0,0,0,.25); padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.b-card { background: #fff; border-radius: 0.625rem; padding: 0.75rem 0.875rem; margin-bottom: 0.625rem; font-size: 0.8125rem; line-height: 1.5; box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,.12); animation: fadeUp .4s ease both; }
.b-card b { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }
.b-card .thumb { height: 4.375rem; border-radius: 0.375rem; margin: -0.125rem 0 0.5rem; background: var(--t); display: grid; place-items: center; font-size: 1.875rem; }
.b-card code { display: inline-block; background: #121212; color: #fff; font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; margin: 0.125rem 0; }

/* ---------- 7. STORIES ---------- */
.a-stories { padding: 6.25rem 0 0; }
.stories-box { border-radius: 3.75rem 3.75rem 0 0; padding: 6.25rem 0 6.875rem; color: #fff; }
.stories-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.75rem; align-items: center; }
.stories-head .serif-title { -webkit-text-stroke: 0; margin-bottom: 1.5rem; text-align: left; font-size: clamp(2.25rem, 4.6vw, 3.625rem); }
.stories-head p { line-height: 1.7; max-width: 28.75rem; margin: 0 0 1.625rem; }
.story-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.s-card {
  position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: 1.125rem;
  background: var(--bg); border: 0.125rem solid #121212; box-shadow: 0 0.125rem 0 #121212;
  display: flex; align-items: flex-end; justify-content: center; transition: transform .25s;
}
.s-card:hover { transform: translateY(-0.375rem) rotate(-1deg); }
.s-card img { position: absolute; inset: 6% 6% 0; width: 88%; height: 94%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 0 #fff) drop-shadow(0.1875rem 0 0 #fff) drop-shadow(-0.1875rem 0 0 #fff) drop-shadow(0 -0.1875rem 0 #fff); transition: transform .4s; }
.s-card:hover img { transform: scale(1.05); }
.s-initials {
  position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 18%;
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.25rem, 4.4vw, 3.75rem); color: #fff;
  -webkit-text-stroke: 0.125rem #121212; paint-order: stroke fill; text-shadow: 0.1875rem 0.1875rem 0 #121212;
}
.s-label {
  position: relative; z-index: 2; margin: 0 0.5rem 0.625rem; background: #fff; color: #121212; border: 0.0938rem solid #121212;
  border-radius: 62.4375rem; padding: 0.3125rem 0.75rem; font-size: 0.7813rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 1rem);
}

/* ---------- 8. FAQ + FORM ---------- */
.a-faq { padding: 6.25rem 0 3.75rem; overflow: hidden; }
.faq-title { margin: 0 0 2.5rem; text-align: center; font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.125rem, 4.4vw, 3rem); color: #121212; line-height: 1.1; }
.faq-title .tilted-tag > span { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.faq-list { display: grid; gap: 1rem; }
.folder { position: relative; background: #F0A22E; border: 0.125rem solid #121212; border-radius: 0 0.5rem 0.5rem 0.5rem; box-shadow: 0.25rem 0.25rem 0 #121212; margin-top: 0.875rem; }
.folder::before { content: ""; position: absolute; left: -0.125rem; top: -0.875rem; width: 36%; height: 0.875rem; background: #F0A22E; border: 0.125rem solid #121212; border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; }
.folder summary { list-style: none; cursor: pointer; padding: 1.125rem 3.5rem 1.125rem 1.375rem; font-weight: 700; font-size: 1rem; position: relative; }
.folder summary::-webkit-details-marker { display: none; }
.folder summary::after { content: "+"; position: absolute; right: 1.375rem; top: 50%; transform: translateY(-50%); font-size: 1.625rem; font-weight: 500; transition: transform .25s; }
.folder[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.folder p { margin: 0; padding: 1.125rem 1.375rem 1.25rem; background: #FFF8E7; border-top: 0.125rem solid #121212; border-radius: 0 0 0.5rem 0.5rem; line-height: 1.7; animation: fadeUp .3s ease; }

.cloud-title {
  margin: 5.625rem 0 0.625rem; text-align: center; font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100;
  font-size: clamp(2.375rem, 5.4vw, 3.75rem); color: #fff; -webkit-text-stroke: 0.1875rem #121212; paint-order: stroke fill; text-shadow: 0.25rem 0.25rem 0 #121212;
}
.faq-sub { text-align: center; color: #fff; margin: 0 0 1.875rem; }
.phone-form {
  width: min(26.25rem, 100%); margin: 0 auto; display: grid; gap: 1rem;
  background: #FFF8E7; border: 0.25rem solid #121212; border-radius: 2.25rem; padding: 2.125rem 1.75rem 1.875rem;
  box-shadow: 0.625rem 0.625rem 0 #121212;
}
.phone-form label { display: grid; gap: 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.phone-form input, .phone-form select {
  height: 3.125rem; padding: 0 1rem; border: 0.1563rem solid #121212; border-radius: 0.75rem; background: #fff;
  font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; outline: none;
}
.phone-form input:focus, .phone-form select:focus { box-shadow: 0.1875rem 0.1875rem 0 var(--orange2); }
.phone-form .invalid { border-color: #d62828; }
.phone-form .fine { margin: 0; text-align: center; font-size: 0.75rem; color: #777; }
.or { display: flex; align-items: center; gap: 0.75rem; color: #999; font-size: 0.75rem; font-weight: 700; letter-spacing: .15em; }
.or::before, .or::after { content: ""; flex: 1; height: 0.0625rem; background: #ccc; }
.btn-fb { display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: #1877F2; color: #fff; font-weight: 700; font-size: 1rem; padding: 1rem; border-radius: 62.4375rem; border: 0.1875rem solid #121212; box-shadow: 0.25rem 0.25rem 0 #121212; transition: transform .15s; }
.btn-fb:hover { transform: translate(-0.125rem, -0.125rem); }
.bottom-sun { display: block; width: 12.5rem; height: 12.5rem; margin: 5rem auto -6.875rem; border-width: 0.25rem; box-shadow: 0 0 0 0.625rem #fff8e7, 0 0 0 0.875rem #222; animation: bob 4s ease-in-out infinite; }
.bottom-sun b { border-width: 0.25rem; }

.messenger {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: linear-gradient(135deg, #00B2FF, #006AFF); display: grid; place-items: center;
  box-shadow: 0 0.5rem 1.5rem rgba(0,106,255,.4); transition: transform .2s;
}
.messenger:hover { transform: scale(1.08); }
.about-page .footer { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .stories-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .eco-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .skill-grid, .perk-grid, .lp-info { grid-template-columns: 1fr; }
  .lp-classes li { grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; }
  .lp-classes li > * { grid-column: 1; }
  .lp-classes li > a { grid-column: 2; grid-row: 1 / span 4; }
  .feature-list li { align-items: flex-start; }
  .f-icon { width: 3.25rem; height: 3.25rem; }
  .video-card { aspect-ratio: auto; min-height: 15.625rem; padding: 1.5rem 6%; }
  .video-text { max-width: 68%; }
  .video-sun { height: 64%; right: -16%; top: 46%; box-shadow: 0 0 0 0.5rem #fff8e7, 0 0 0 0.6875rem #222; }
  .video-play { width: 3.75rem; height: 3.75rem; margin-top: 0.5rem; }
  .floating-words { display: none; }
  .back-home { top: 0.75rem; left: 0.75rem; padding: 0.5625rem 1rem; font-size: 0.875rem; }
  .stories-box { border-radius: 2.25rem 2.25rem 0 0; }
  .tilted-tag.right { margin-left: 0; }
}
@media (max-width: 480px) {
  .eco-grid { grid-template-columns: 1fr; }
  .story-track { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .s-label { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
  .outline-title { -webkit-text-stroke: 0.125rem #121212; text-shadow: 0.1875rem 0.1875rem 0 #121212; }
}

/* team: 2 cột (≤ 61.9375rem) và 1 cột (≤ 47.9375rem) như trang mẫu */
@media (max-width: 991px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-cell.c1, .t-cell.c4, .t-cell.c1.reveal.in, .t-cell.c4.reveal.in, .t-cell.c3, .t-cell.c3.reveal.in, .t-cell.c6, .t-cell.c6.reveal.in { transform: none; }
  .t-cell:nth-child(even), .t-cell.reveal.in:nth-child(even) { transform: translateY(6.25rem); }
}
@media (max-width: 767px) {
  .a-team { padding-bottom: 6.875rem; }
  .team-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .t-cell:nth-child(even), .t-cell.reveal.in:nth-child(even) { transform: none; }
  .team-intro { align-items: center; text-align: center; }
  .stack-title { align-items: center; }
  .t-card { max-width: 25rem; margin: 0 auto; }
}

/* ================= CO GIÃN THEO MÀN HÌNH (như trang mẫu: 1rem = độ rộng màn hình / 90, trong khoảng 992–1920px) ================= */
html.fluid { font-size: calc(clamp(992px, 100vw, 1920px) / 90); }
@media (max-width: 767px) { html.fluid { font-size: 16px; } }
/* khung nội dung: chừa 4rem mỗi bên như trang mẫu thay vì giới hạn 1240px */
@media (min-width: 768px) { .about-page .container { width: calc(100% - 8rem); max-width: none; } }

/* ================= PHẦN ĐẦU TRANG (theo trang mẫu) ================= */
.a-hero { display: block; min-height: 101vh; padding: calc(max(3rem, 7.5vh) + 4.625rem + 4rem) 1rem 0; text-align: center; }
.floating-words { display: none; }
.a-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.sun-row { width: 100%; display: flex; justify-content: center; position: relative; z-index: 5; }
.sun-combo { display: flex; align-items: center; gap: .75rem; }
.sun { position: relative; flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; }
.sun svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sun .sun-face { transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.chat-cloud { position: relative; background: #F97028; color: #fff; border: .125rem solid #000; border-radius: .875rem; padding: .5rem .75rem; }
.chat-cloud::before { content: ""; position: absolute; left: -.55rem; bottom: .15rem; width: .9rem; height: .8rem; background: #F97028; border-left: .125rem solid #000; border-bottom: .125rem solid #000; border-radius: 0 0 0 .8rem; transform: skewX(20deg); }
.chat-cloud__p { display: block; font-weight: 700; font-size: 1rem; line-height: .9; letter-spacing: -.025em; white-space: nowrap; }
.hero-text { display: flex; flex-direction: column; align-items: center; max-width: 60rem; position: relative; z-index: 3; }
/* tiêu đề kiểu sticker: chữ đen, viền trắng + viền đen ngoài (bộ lọc #stickerOutline) */
.sticker-title {
  margin: 0; font-family: var(--font-serif); font-weight: 900; font-variation-settings: "SOFT" 100;
  font-size: 5rem; line-height: 1.08; letter-spacing: -.03em; color: #101010; white-space: nowrap;
  -webkit-text-stroke: .875rem #fff; paint-order: stroke fill; filter: url(#stickerOutline);
}
.h2-box-wrap { position: relative; margin-top: -.4rem; }
.h2-box { background: #F3A20F; border: .125rem solid #121212; border-radius: .375rem; transform: rotate(-3.5deg); box-shadow: 0 .5rem 0 rgba(0,0,0,.15); }
.h2-box-text { margin: .1rem .25rem 0; padding: 0 .25rem .9rem; font-family: var(--font-serif); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 4.25rem; line-height: .9; color: #fff; white-space: nowrap; }
.welcome-cta {
  display: inline-block; margin-top: 2rem; position: relative; z-index: 4;
  font-family: var(--font-round); font-weight: 800; font-size: 1.6rem; color: #fff; background: #F67232;
  padding: .9375rem 2.5rem; border: .1875rem solid #1a1a1a; border-radius: 3.125rem; box-shadow: .25rem .25rem 0 #1a1a1a;
  transition: transform .2s, box-shadow .2s; white-space: nowrap;
}
.welcome-cta:hover { transform: translate(-.125rem, -.125rem); box-shadow: .375rem .375rem 0 #1a1a1a; }
/* trạng thái trước khi chạy hiệu ứng mở màn */
.intro-pending .hero-anim { opacity: 0; transform: translateY(3rem); }
.hero-anim { transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.intro-pending .back-home, .intro-pending .lang-pill { transform: translateY(-160%); }
.back-home, .lang-pill { transition: transform .8s cubic-bezier(.16,1,.3,1); }
#heroSun { transition: transform .9s cubic-bezier(.65,0,.35,1); }

/* mặt trời bám góc trái dưới */
.sunny-fixed { position: fixed; left: 2rem; bottom: 2.5rem; z-index: 60; transform: translateX(-200%); transition: transform 1.2s cubic-bezier(.87,0,.13,1); }
.sunny-fixed.show { transform: none; }
.sunny-fixed .chat-cloud { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.sunny-fixed.talk .chat-cloud { opacity: 1; visibility: visible; }
.sunny-fixed .sun-combo { cursor: pointer; }

/* ================= KHUNG "TOEX ENGLISH" 2 CỘT (theo trang mẫu) ================= */
.frame { border: .125rem solid #3185F5; padding: 3rem 2.5rem; align-items: stretch; }
.frame-tab { background: #3185F5; font-size: .6875rem; font-weight: 500; padding: .3rem .5rem; gap: .25rem; }
.frame-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem 3rem; align-items: center; }
.frame-text { display: flex; flex-direction: column; gap: 2rem; }
.frame-text .serif-title { margin: 0; text-align: left; font-size: 2.16rem; line-height: 1.15; }
.frame-text .serif-title mark { font-size: 2.05rem; }
.frame-text .feature-list { margin: 0; gap: 1.5rem; width: 100%; }
.frame-text .feature-list li { gap: 1.25rem; }
.frame-text .feature-list h3 { font-size: 1.2rem; }
.frame-text .feature-list p { font-size: .95rem; }
.frame-split .video-card { aspect-ratio: 16 / 9; min-height: 0; padding: 0 6%; }
.frame-split .stroke-text { font-size: 2.2rem; }
.frame-split .video-play { width: 4rem; height: 4rem; }

@media (max-width: 991px) {
  .frame-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .a-hero { padding-top: 7.5rem; min-height: auto; padding-bottom: 5rem; }
  .sticker-title { font-size: clamp(1.6rem, 7.4vw, 2.4rem); -webkit-text-stroke: .44rem #fff; white-space: normal; }
  .h2-box-text { font-size: clamp(1.9rem, 8.4vw, 2.4rem); padding-bottom: .5rem; }
  .welcome-cta { font-size: 1.2rem; padding: .8rem 1.6rem; }
  .sun-combo { transform: scale(1.2); }
  .frame { padding: 2rem 1.25rem; }
  .frame-text .serif-title { font-size: 1.75rem; } .frame-text .serif-title mark { font-size: 1.65rem; }
  .sunny-fixed { left: 1rem; bottom: 1.25rem; }
}

/* ================= FAQ + FORM CẠNH NHAU (theo trang mẫu) ================= */
.faq-split { display: flex; align-items: flex-start; justify-content: center; gap: 2.25rem; }
.faq-split__faq { flex: 0 1 38.125rem; min-width: 0; }
.faq-split__consult { flex: 0 1 26rem; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.faq-split .faq-title { margin-bottom: 1.75rem; font-size: 3.125rem; line-height: .95; }
.faq-split .faq-title .tilted-tag > span { font-size: 2.75rem; }
.faq-split .faq-list { gap: 1rem; }
/* thẻ câu hỏi kiểu bìa hồ sơ: bìa sau xám nhạt ló phía trên, gáy cam bên trái */
.folder { background: #EFEEEC; border: 0; border-radius: .5rem; box-shadow: none; margin-top: 0; padding-top: .875rem; }
.folder::before { left: 0; top: 0; width: 38%; height: 1.4rem; border: .125rem solid #121212; border-bottom: 0; background: #FFAE1C; border-radius: .5rem .5rem 0 0; clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); z-index: 1; }
.folder summary { position: relative; z-index: 2; margin-top: -.3rem; background: #F3A20F; border: .125rem solid #121212; border-radius: .5rem; padding: 1rem 3.5rem 1rem 1.5rem; font-size: 1rem; line-height: 1.3; }
.folder summary::after { right: 1.25rem; font-size: 1.75rem; }
.folder p { margin: .5rem .25rem 0; padding: 1rem 1rem 1.25rem; background: #FFFEFB; border: .125rem solid #000; border-radius: 1rem; transform: rotate(-1deg); box-shadow: .375rem .375rem 0 rgba(0,0,0,.15); font-size: .875rem; }
.faq-split .cloud-title { margin: 0 0 .625rem; font-size: clamp(1.875rem, 3vw, 3.25rem); line-height: 1.1; color: #101010; text-shadow: none; -webkit-text-stroke: .5rem #fff; }
.faq-split .faq-sub { max-width: 22rem; color: #1b1b1b; font-weight: 500; line-height: 1.5; margin-bottom: 1.5rem; }
.faq-split .faq-sub b, .faq-split .faq-sub a { color: #121212; }
.faq-split .phone-form { width: 100%; }
@media (max-width: 1100px) {
  .faq-split { flex-direction: column; align-items: center; gap: 3rem; }
  .faq-split__faq, .faq-split__consult { flex: 0 0 auto; width: 100%; max-width: 38.125rem; }
}
@media (max-width: 767px) { .faq-split .faq-title { font-size: 2.4rem; } .faq-split .faq-title .tilted-tag > span { font-size: 2rem; } }
.frame-split .video-text { max-width: 62%; }
.frame-split .stroke-text { white-space: nowrap; font-size: 2rem; }
.faq-split .cloud-title { letter-spacing: -.01em; }
@media (max-width: 767px) { .frame-split .stroke-text { white-space: normal; font-size: 1.6rem; } }

/* ================= LỘ TRÌNH · QUYỀN LỢI · HỆ SINH THÁI (theo khối nhúng của trang mẫu: rộng cố định 1240px, Be Vietnam Pro + Lora) ================= */
.a-roadmap, .a-perks { --bv: "Be Vietnam Pro", "Quicksand", sans-serif; --lora: "Lora", "Fraunces", serif; background: #F4ECDD; font-family: var(--bv); }
.a-roadmap { padding: 64px 40px 20px; }
.a-roadmap .container, .a-perks .container { width: min(1240px, 100%); max-width: 1240px; }
.roadmap-head { max-width: 1000px; margin: 0 auto 46px; text-align: center; }
.lt-title { margin: 0; font-family: var(--bv); font-weight: 800; font-size: 62px; line-height: 1.08; letter-spacing: -.02em; color: #241C16; }
.lt-title mark { background: none; padding: 0; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.lt-title mark:first-of-type { color: #C8956A; }
.lt-title mark:last-of-type { color: #9AA86A; }
.roadmap-head p { margin: 18px 0 0; font-size: 17px; font-weight: 700; color: #7A6A54; }
.scroll-hint { display: none; }
/* bậc thang: thẻ cao dần từ trái sang phải */
.level-scroller { display: flex; align-items: flex-end; gap: 12px; overflow: visible; padding: 0 0 14px; margin: 0; scroll-snap-type: none; }
.level-tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; text-align: left;
  padding: 15px 14px; border: 0; border-radius: 14px 14px 5px 5px; background: var(--lc); color: #fff; opacity: 1;
  box-shadow: 0 5px 16px rgba(80,55,25,.16); transform: none; position: relative; transition: transform .2s, filter .2s;
  font-family: var(--bv);
}
.level-tab:nth-child(1) { height: 110px; } .level-tab:nth-child(2) { height: 160px; } .level-tab:nth-child(3) { height: 210px; }
.level-tab:nth-child(4) { height: 250px; } .level-tab:nth-child(5) { height: 290px; }
.level-tab:hover { transform: translateY(-3px); filter: brightness(1.04); }
.level-tab.active { transform: none; box-shadow: 0 0 0 3px #FFFDF8, 0 0 0 5px var(--lc), 0 8px 20px rgba(80,55,25,.2); }
.level-tab.active::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 0; height: 0; transform: translateX(-50%); border: 9px solid transparent; border-top: 10px solid var(--lc); border-bottom: 0; }
.level-tab small { font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .9; }
.level-tab strong { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 4px; font-family: "Space Grotesk", var(--bv); font-size: 28px; line-height: 1; }
.level-tab strong i, .level-tab strong em { font-style: normal; font-size: 14px; opacity: .8; }
.level-tab span { font-size: 12.5px; font-weight: 800; }
/* bảng nội dung khoá */
.level-panel { margin-top: 0; background: #FFFDF8; border-radius: 16px; padding: 28px 32px 32px; box-shadow: 0 4px 16px rgba(80,55,25,.09); border-left: 5px solid var(--lc); font-family: var(--bv); }
.lp-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid #EFE6D6; }
.lp-top small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #7A6A54; }
.lp-top h3 { margin: 6px 0 2px; font-family: var(--lora); font-style: italic; font-weight: 600; font-size: 30px; color: #241C16; }
.lp-top em { font-family: var(--lora); font-size: 16px; color: var(--lc); }
.io-box { justify-self: center; align-self: center; background: #F6ECE1; border-radius: 14px; padding: 8px 20px; gap: 16px; font-family: "Space Grotesk", var(--bv); }
.io-box small { font-family: var(--bv); font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #8B7A63; }
.io-box b { font-size: 28px; }
.io-box > span { color: var(--lc); font-size: 20px; }
.lp-dur { justify-self: end; text-align: right; }
.lp-dur b { display: block; font-size: 19px; font-weight: 700; color: #3D352B; }
.lp-dur span { font-size: 13.5px; font-weight: 600; color: #7A6A54; }
.lp-info { margin: 22px 0 6px; }
.lp-meta b { font-family: var(--bv); font-size: 16px; }
.lp-price b { font-family: var(--bv); font-size: 20px; }
.skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; margin-top: 24px; }
.skill-box { border-top: 0; padding-top: 0; }
.skill-box h4 { font-size: 14px; padding-bottom: 12px; border-bottom: 1px solid #EFE6D6; }
.skill-box h4 i { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.skill-box h5 { font-size: 10px; }
.skill-box ul { font-size: 12.5px; gap: 6px; }
.skill-box q { font-family: var(--lora); font-size: 13px; border-left: 2px solid #E6DCC7; padding-left: 10px; margin-top: 14px; color: #7A6A54; }
.lp-toggle { font-family: var(--bv); font-size: 13px; padding: 11px 24px; border-width: 1px; }
.cd-title { font-family: var(--lora); }

/* quyền lợi: 2 cột trong thẻ kem */
.a-perks { padding: 40px 40px 72px; }
.letter { display: grid; grid-template-columns: .82fr 1.18fr; column-gap: 40px; align-items: start; max-width: none; width: 100%; margin: 0; background: #FFFDF8; border: 1px solid #E6DCC7; border-radius: 18px; padding: 38px 40px 40px; box-shadow: 0 3px 12px rgba(80,55,25,.07); font-family: var(--bv); }
.letter > *:not(.perk-grid) { grid-column: 1; }
.letter .perk-grid { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; gap: 16px 22px; }
.letter .eyebrow-line { font-size: 10px; letter-spacing: .2em; color: #A9763F; }
.letter .serif-italic { font-family: var(--lora); font-weight: 600; font-size: 34px; margin: 6px 0 18px; }
.letter p { font-size: 14px; line-height: 1.75; color: #5C4D3C; }
.letter blockquote { font-family: var(--lora); font-size: 14px; line-height: 1.7; color: #7A6A54; }
.perk { border-left: 0; border: 1px solid color-mix(in srgb, var(--c) 30%, white); border-radius: 12px; padding: 18px 20px; font-size: 13px; line-height: 1.7; }
.perk:nth-child(3), .perk:nth-child(4) { margin-top: 30px; }
.perk h3 { font-size: 15px; font-weight: 800; }
.perk h3 span { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }

/* hệ sinh thái: thẻ kem, 4 hàng ảnh–chữ xen kẽ */
.eco { margin-top: 40px; background: #FFFDF8; border: 1px solid #E6DCC7; border-radius: 18px; padding: 34px 36px 38px; box-shadow: 0 3px 12px rgba(80,55,25,.07); }
.eco .eyebrow-line { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #A9763F; }
.eco h2 { max-width: 680px; margin: 12px auto 30px; font-family: var(--bv); font-weight: 800; font-size: 30px; line-height: 1.25; color: #241C16; }
.lt-rows { display: flex; flex-direction: column; gap: 16px; }
.lt-2col { display: grid; grid-template-columns: 480px 1fr; gap: 34px; align-items: center; padding: 18px; border-radius: 16px; background: var(--rb); }
.lt-2col.rev { grid-template-columns: 1fr 480px; }
.lt-2col.rev .lt-img { order: 2; }
.lt-txt h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 22px; font-weight: 800; color: #241C16; }
.lt-ic { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ic); font-size: 22px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.lt-txt p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #6B5A44; }
.eco-foot { font-family: var(--bv); font-style: normal; font-size: 12px; color: #9C8A72; margin-top: 26px; }
/* ảnh minh hoạ vẽ bằng CSS */
.mk { height: 300px; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,.14); font-family: var(--bv); }
.mk-vid { background: #1F2A1A; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-screen { flex: 1; border-radius: 8px; background: linear-gradient(135deg, #3E5A2A, #22331A); display: flex; align-items: center; justify-content: space-around; }
.mk-play { width: 56px; height: 56px; border-radius: 50%; background: #F3A20F; color: #1b1b1b; display: grid; place-items: center; font-size: 20px; border: 3px solid #1b1b1b; }
.mk-word { background: #FFFDF8; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: 4px 4px 0 #1b1b1b; }
.mk-word b { font-size: 24px; color: #241C16; } .mk-word i { color: #C8956A; font-size: 14px; } .mk-word small { color: #6B5A44; font-size: 12px; }
.mk-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); } .mk-bar i { display: block; height: 100%; border-radius: 3px; background: #F3A20F; }
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; } .mk-chips span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #E6ECD9; font-size: 11px; font-weight: 700; }
.mk-sch { background: #fff; padding: 18px; }
.mk-sch header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; }
.mk-sch header span { padding: 4px 10px; border-radius: 999px; background: #E9F1E8; color: #3E7A3E; font-size: 11px; font-weight: 800; }
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.mk-cal div { text-align: center; } .mk-cal small { display: block; font-size: 10px; font-weight: 700; color: #94A3B8; margin-bottom: 4px; }
.mk-cal i { display: grid; place-items: center; height: 38px; border-radius: 10px; background: #F1F5F9; font-style: normal; font-weight: 800; font-size: 13px; color: #64748B; }
.mk-cal i.ok { background: #6E9E6E; color: #fff; } .mk-cal i.now { background: #fff; border: 2px solid #6E9E6E; color: #3E7A3E; }
.mk-tasks p { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #F8FAFC; font-size: 12.5px; font-weight: 700; color: #475569; }
.mk-tasks p.ok { color: #3E7A3E; background: #EEF6EE; }
.mk-qz { background: linear-gradient(160deg, #F7C948, #F0A22E); display: grid; place-items: center; }
.mk-card { position: absolute; width: 58%; height: 58%; left: 21%; top: 12%; border-radius: 14px; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.mk-card.c3 { transform: rotate(-8deg) translate(-14px, 8px); background: #FFF3D6; } .mk-card.c2 { transform: rotate(5deg) translate(12px, 4px); background: #FFF8E7; }
.mk-card.c1 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mk-card.c1 small { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #A9763F; } .mk-card.c1 b { font-size: 30px; color: #241C16; } .mk-card.c1 i { color: #C8956A; } .mk-card.c1 span { margin-top: 8px; font-size: 11px; color: #94A3B8; }
.mk-qz-btn { position: absolute; bottom: 18px; display: flex; gap: 10px; } .mk-qz-btn span { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 12px; font-weight: 800; color: #6B5A44; } .mk-qz-btn span.on { background: #4D8C6F; color: #fff; }
.mk-dic { background: #16263A; padding: 22px; color: #E2E8F0; display: flex; flex-direction: column; gap: 20px; }
.mk-wave { height: 70px; display: flex; align-items: center; gap: 4px; } .mk-wave i { flex: 1; border-radius: 3px; background: linear-gradient(#5BA7E0, #2A6E9E); }
.mk-dic p { margin: 0; font-size: 17px; line-height: 1.8; } .mk-dic u { text-decoration-color: #5BA7E0; text-underline-offset: 4px; color: #fff; font-weight: 700; } .mk-dic u.blank { color: #5BA7E0; }
.mk-score { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12px; } .mk-score b { font-size: 20px; color: #7CD0A0; }

/* ================= BÀI HỌC TRỰC QUAN: CHỒNG THẺ DÍNH KHI LƯỚT (theo trang mẫu) ================= */
.lstack { position: relative; max-width: 72rem; margin: 3.5rem auto 0; padding-bottom: 6rem; }
.lcard { position: sticky; top: calc(5.5rem + var(--i) * .9rem); margin-bottom: 18vh; transform: rotate(var(--rot, 0deg)); transform-origin: 50% 0; }
.lcard:last-child { margin-bottom: 0; }
.lcard .board { margin: 0; border-radius: 1.25rem; box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.2); min-height: 28rem; }
.lsticker {
  position: absolute; z-index: 3; top: -1.4rem; right: -1.2rem; padding: .55rem 1.6rem; border-radius: 999px;
  background: #fff; border: .19rem solid #121212; box-shadow: .3rem .3rem 0 #121212;
  font-family: var(--font-round); font-weight: 800; font-size: 1.9rem; letter-spacing: .04em; color: #121212; transform: rotate(4deg);
}

@media (max-width: 991px) {
  .a-roadmap, .a-perks { padding-left: 16px; padding-right: 16px; }
  .lt-title { font-size: 40px; }
  .level-scroller { overflow-x: auto; }
  .level-tab { flex: 0 0 200px; }
  .lp-top { grid-template-columns: 1fr; } .io-box, .lp-dur { justify-self: start; text-align: left; }
  .skill-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .letter { grid-template-columns: 1fr; } .letter .perk-grid { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .lt-2col, .lt-2col.rev { grid-template-columns: 1fr; } .lt-2col.rev .lt-img { order: 0; }
}
@media (max-width: 600px) {
  .lt-title { font-size: 30px; }
  .skill-grid, .letter .perk-grid { grid-template-columns: 1fr; } .perk:nth-child(3), .perk:nth-child(4) { margin-top: 0; }
  .mk { height: 240px; } .eco { padding: 24px 16px; } .letter { padding: 26px 20px; }
  .lsticker { font-size: 1.2rem; right: -.4rem; }
}

/* ================= FAQ: bớt khoảng trống phía trên, tiêu đề 2 dòng như mẫu ================= */
.a-faq { padding-top: 3rem; }
.stories-box { padding-bottom: 4rem; }
.eco h2 { max-width: 520px; }
.a-lessons, .a-roadmap, .a-perks { overflow-x: clip; }