/* =========================================================
   EDUCAM GLOBAL CSS — SINGLE SOURCE OF TRUTH
   Include once for homepage, category/course pages and future pages.
========================================================= */

:where(
  .educam-page,
  .educam-program-modal,
  .educam-rtb-tooltip,
  .educam-rtb-backdrop,
  .educam-proof-modal
) {
  --educam-navy: #202744;
  --educam-blue: #0171dc;
  --educam-blue-hover: #005fbd;
  --educam-gold: #cda666;
  --educam-gold-dark: #a97f43;
  --educam-gold-soft: #f4ebdd;
  --educam-white: #ffffff;
  --educam-cream: #fbf8f2;
  --educam-ink: #111111;
  --educam-muted: #667085;
  --educam-soft: #f5f6f7;
  --educam-soft-hover: #f1f3f5;
  --educam-focus: rgba(1, 113, 220, 0.34);
  --educam-red: #e84d2f;
  --educam-red-soft: #fff1ed;
  --educam-green: #2f9657;
  --educam-green-soft: #edf8f1;
  --educam-panel: #f7f9fc;
  --educam-panel-blue: #f5f9ff;
  --educam-pathway-gold-dark: #9d743c;
  --educam-pathway-ink: #151821;
  --educam-course-text: #171a24;
  --educam-course-muted: #6b7280;
  --educam-course-line: rgba(32, 39, 68, 0.11);
  --educam-text-body: #41485e;
  --educam-text-secondary: #646b7f;
  --educam-text-soft: #6f778b;
  --educam-line: #e7e3db;
  --educam-container: 1180px;
  --educam-container-wide: 1340px;
  --educam-gutter: 24px;
  --educam-section-gap: 88px;
  --educam-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.educam-page {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--educam-white);
  color: var(--educam-navy);
  font: 400 16px/1.6 var(--educam-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.educam-page--course { overflow: clip; }

.educam-page,
.educam-page *,
.educam-page *::before,
.educam-page *::after,
.educam-program-modal,
.educam-program-modal *,
.educam-program-modal *::before,
.educam-program-modal *::after,
.educam-rtb-tooltip,
.educam-rtb-tooltip *,
.educam-rtb-tooltip *::before,
.educam-rtb-tooltip *::after,
.educam-rtb-backdrop,
.educam-proof-modal,
.educam-proof-modal *,
.educam-proof-modal *::before,
.educam-proof-modal *::after {
  box-sizing: border-box;
}

.educam-page :where(button, input, textarea, select),
.educam-program-modal :where(button, input, textarea, select),
.educam-rtb-tooltip :where(button, input, textarea, select),
.educam-proof-modal :where(button, input, textarea, select) {
  font: inherit;
}

.educam-page :where(a) {
  color: inherit;
  text-decoration: none;
}

.educam-page :where(button),
.educam-program-modal :where(button),
.educam-rtb-tooltip :where(button),
.educam-proof-modal :where(button) {
  border: 0;
}

.educam-page :where(img) {
  display: block;
  max-width: 100%;
}

.educam-page :where(svg) { max-width: 100%; }
.educam-page > section { min-width: 0; }
.educam-page--home > section:not(:first-of-type) { padding-top: var(--educam-section-gap); }

/* Reusable layout primitives for future sections. */
.educam-container {
  width: min(100%, var(--educam-container));
  margin-inline: auto;
}

.educam-container--wide { width: min(100%, var(--educam-container-wide)); }

.educam-section {
  width: 100%;
  min-width: 0;
  padding-inline: clamp(16px, 3vw, var(--educam-gutter));
}

.educam-copy,
[data-educam-copy],
.educam-page--home :where(
  .ec-hero-title,
  .ec-hero-desc,
  .educam-program-heading,
  .educam-program-description,
  .educam-program-card__title,
  .educam-program-card__summary,
  .educam-program-detail__title,
  .educam-program-detail__lead,
  .educam-program-block__text,
  .educam-program-results__item,
  .educam-why__stage-title,
  .educam-why-card__title,
  .educam-why-card__desc,
  .educam-why__footer-copy,
  .educam-proof__title,
  .educam-proof__lead,
  .educam-proof-info__title,
  .educam-proof-info__text,
  .educam-proof-video__title,
  .educam-proof-video__text,
  .educam-proof-cta__title,
  .educam-proof-cta__text,
  .educam-school-proof__title,
  .educam-school-proof__lead,
  .educam-final-cta__title,
  .educam-final-cta__summary > p,
  .educam-final-cta__step h3,
  .educam-final-cta__step p
) {
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: wrap;
}

/* Eyebrow primitive plus compatibility selectors. */
.educam-eyebrow,
.educam-page--home :where(
  .educam-program-eyebrow,
  .educam-proof__eyebrow,
  .educam-school-proof__eyebrow,
  .educam-final-cta__eyebrow
) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  color: var(--educam-gold-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.educam-eyebrow::before,
.educam-page--home :where(
  .educam-program-eyebrow,
  .educam-proof__eyebrow,
  .educam-school-proof__eyebrow,
  .educam-final-cta__eyebrow
)::before {
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--educam-gold);
  content: "";
}

/* Horizontal track primitive plus compatibility selectors. */
.educam-scroll-track,
.educam-page--home :where(
  .educam-program-track,
  .educam-why__track,
  .educam-school-proof__logos
) {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.educam-scroll-track::-webkit-scrollbar,
.educam-page--home :where(
  .educam-program-track,
  .educam-why__track,
  .educam-school-proof__logos
)::-webkit-scrollbar {
  display: none;
}

/* Circular navigation button primitive. */
.educam-icon-button,
.educam-page--home :where(
  .educam-program-nav,
  .educam-why__nav,
  .educam-school-proof__school-nav
) {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.educam-icon-button svg,
.educam-page--home :where(
  .educam-program-nav,
  .educam-why__nav,
  .educam-school-proof__school-nav
) svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.educam-icon-button:focus-visible,
.educam-page--home :where(
  .educam-program-nav,
  .educam-why__nav,
  .educam-school-proof__school-nav
):focus-visible {
  outline: 2px solid var(--educam-gold);
  outline-offset: 3px;
}

.educam-icon-button:disabled,
.educam-page--home :where(
  .educam-program-nav,
  .educam-why__nav,
  .educam-school-proof__school-nav
):disabled {
  cursor: default;
  opacity: 0.28;
}

/* Button primitive. Component CSS only controls color, size and spacing. */
.educam-button,
.educam-page--home :where(
  .ec-hero-btn,
  .educam-why__cta,
  .educam-proof__load-more,
  .educam-proof-cta__button,
  .educam-program-register-button,
  .educam-final-cta__button
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Generic reveal primitive for new sections. Existing JS remains compatible. */
[data-educam-reveal-ready="true"] [data-educam-reveal].educam-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1);
}

[data-educam-reveal-ready="true"].is-visible [data-educam-reveal].educam-reveal,
[data-educam-reveal-ready="true"].is-revealed [data-educam-reveal].educam-reveal {
  opacity: 1;
  transform: none;
}

/* =========================================================
   SHARED COMPONENT: PROOF WALL
   This is the only complete component currently shared by both pages.
========================================================= */
.educam-proof {
  width: 100%;
  min-height: 1px;
  overflow: visible;
  background: var(--educam-white);
  color: var(--educam-navy);
  font-family: var(--educam-font);
}

.educam-proof--home {
  max-width: var(--educam-container);
  margin: 0 auto;
  padding: 0;
}

.educam-proof--course {
  max-width: none;
  margin: 0;
  padding: clamp(48px, 6vw, 76px) clamp(16px, 3vw, 24px) clamp(54px, 7vw, 84px);
}

.educam-proof--course > .educam-proof__masonry,
.educam-proof--course > .educam-proof__load-more-wrap {
  width: min(100%, var(--educam-container));
  margin-inline: auto;
}

.educam-proof--course .educam-proof__title {
  font-size: clamp(24px, 2.55vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.024em;
}

.educam-proof--course .educam-proof-cta__title {
  font-size: clamp(23px, 2.55vw, 30px);
}

/* =========================================================
   EDUCAM HOMEPAGE — GLOBAL CSS
   Một bộ token, reset và component dùng chung cho toà n trang.
========================================================= */

/* Text wrap dùng chung, tránh Elementor ép ngắt dòng sai. */

/* Eyebrow dùng chung. */

/* Track ngang dùng chung. */

/* Nút điều hướng tròn dùng chung. */

/* CTA hình pill dùng chung. */

/* =========================================================
   01. HERO
========================================================= */

/* =========================================================
   02. PROGRAM EXPLORER + MODAL
========================================================= */

/* Program reveal */

/* Program modal */

/* =========================================================
   03. WHY EDUCAM
========================================================= */

/* =========================================================
   04. PROOF WALL
========================================================= */

.educam-proof .educam-proof__masonry {
--educam-proof-columns: 4;
  --educam-proof-gap: 18px;
  --educam-proof-row: 8px;

  display: grid;
  grid-template-columns: repeat(var(--educam-proof-columns), minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: var(--educam-proof-row);
  gap: var(--educam-proof-gap);
  align-items: start;
}

.educam-proof .educam-proof-pin {
position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--educam-white);
  box-shadow: 0 10px 28px rgba(32, 39, 68, .07);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 180ms ease;
}

.educam-proof .educam-proof-pin.is-visible {
opacity: 1;
  transform: none;
}

.educam-proof .educam-proof-pin:hover {
transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(32, 39, 68, .11);
}

.educam-proof .educam-proof-pin[hidden] {
display: none;
}

.educam-proof .educam-proof-pin[data-column-span="2"] {
grid-column: span 2;
}

.educam-proof .educam-proof-intro {
min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px clamp(26px, 4vw, 54px) 14px 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.educam-proof .educam-proof-intro:hover {
transform: none;
  box-shadow: none;
}

.educam-proof .educam-proof__title {
width: 100%;
  margin: 0;
  color: var(--educam-navy);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.55px;
}

.educam-proof .educam-proof__lead {
width: 100%;
  margin: 13px 0 0;
  color: var(--educam-text-secondary);
  font-size: 15.5px;
  line-height: 1.6;
}

.educam-proof .educam-proof-image {
width: 100%;
  margin: 0;
  background: #f1f2f4;
}

.educam-proof .educam-proof-image__button,
.educam-proof .educam-proof-video__button {
width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.educam-proof .educam-proof-image__button {
background: transparent;
  cursor: zoom-in;
}

.educam-proof :where(.educam-proof-image__button, .educam-proof-video__button):focus-visible {
outline: 2px solid var(--educam-gold);
  outline-offset: -3px;
}

.educam-proof .educam-proof-image img {
width: 100%;
  height: auto;
  background: #f1f2f4;
  transition: transform 260ms ease;
}

.educam-proof .educam-proof-image:hover img {
transform: scale(1.015);
}

.educam-proof .educam-proof-info {
padding: clamp(22px, 2.6vw, 30px);
}

.educam-proof .educam-proof-info--navy {
background: var(--educam-navy); color: var(--educam-white);
}

.educam-proof .educam-proof-info--soft {
background: #f5f6f8;
}

.educam-proof .educam-proof-info--cream {
background: var(--educam-cream);
}

.educam-proof .educam-proof-info--gold-soft {
background: var(--educam-gold-soft);
}

.educam-proof .educam-proof-info__eyebrow {
display: block;
  margin: 0 0 12px;
  color: var(--educam-gold-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.educam-proof .educam-proof-info--navy .educam-proof-info__eyebrow {
color: var(--educam-gold);
}

.educam-proof .educam-proof-info__value {
display: block;
  margin: 0 0 16px;
  color: var(--educam-gold);
  font-size: clamp(45px, 4.5vw, 66px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -1.6px;
}

.educam-proof .educam-proof-info__title {
margin: 0;
  color: var(--educam-navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.3px;
}

.educam-proof .educam-proof-info--navy .educam-proof-info__title {
color: var(--educam-white);
}

.educam-proof .educam-proof-info__text {
margin: 11px 0 0;
  color: var(--educam-text-secondary);
  font-size: 14px;
  line-height: 1.58;
}

.educam-proof .educam-proof-info--navy .educam-proof-info__text {
color: rgba(255, 255, 255, .8);
}

.educam-proof .educam-proof-info__icon {
width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(205, 166, 102, .17);
  color: var(--educam-gold-dark);
}

.educam-proof .educam-proof-info--navy .educam-proof-info__icon {
background: rgba(255, 255, 255, .11);
  color: var(--educam-gold);
}

.educam-proof .educam-proof-info__icon svg {
width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.educam-proof .educam-proof-list {
display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.educam-proof .educam-proof-list li {
display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  color: var(--educam-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.educam-proof .educam-proof-list__number {
width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--educam-navy);
  color: var(--educam-white);
  font-size: 10px;
  font-weight: 600;
}

.educam-proof .educam-proof-quote__mark {
display: block;
  height: 32px;
  margin-bottom: 12px;
  color: var(--educam-gold);
  font-size: 56px;
  font-weight: 600;
  line-height: .85;
}

.educam-proof .educam-proof-quote__text {
margin: 0;
  color: var(--educam-white);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.35px;
}

.educam-proof .educam-proof-quote__foot {
margin: 20px 0 0;
  color: rgba(255, 255, 255, .73);
  font-size: 13px;
  line-height: 1.5;
}

.educam-proof .educam-proof-video {
background: var(--educam-navy);
}

.educam-proof .educam-proof-video__button {
position: relative;
  overflow: hidden;
  background: var(--educam-navy);
  color: var(--educam-white);
  text-align: left;
  cursor: pointer;
}

.educam-proof .educam-proof-video__thumb {
position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9ebef;
}

.educam-proof .educam-proof-video__thumb img {
width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.educam-proof .educam-proof-video:hover .educam-proof-video__thumb img {
transform: scale(1.025);
}

.educam-proof .educam-proof-video__play {
position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(32, 39, 68, .92);
  color: var(--educam-white);
  box-shadow: 0 12px 30px rgba(10, 15, 30, .22);
  transform: translate(-50%, -50%);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.educam-proof .educam-proof-video:hover .educam-proof-video__play {
background: var(--educam-gold);
  color: var(--educam-navy);
  transform: translate(-50%, -50%) scale(1.06);
}

.educam-proof .educam-proof-video__play svg {
width: 20px;
  height: 20px;
  margin-left: 2px;
  fill: currentColor;
}

.educam-proof .educam-proof-video__content {
padding: 18px 19px 20px;
}

.educam-proof .educam-proof-video__meta {
display: block;
  margin-bottom: 6px;
  color: var(--educam-gold);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.educam-proof .educam-proof-video__title {
margin: 0;
  color: var(--educam-white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
}

.educam-proof .educam-proof-video__text {
margin: 7px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  line-height: 1.55;
}

.educam-proof .educam-proof__load-more-wrap {
display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 42px);
}

.educam-proof .educam-proof__load-more {
min-height: 48px;
  gap: 10px;
  margin: 0;
  padding: 0 26px;
  background: var(--educam-navy);
  color: var(--educam-white);
  box-shadow: 0 10px 24px rgba(32, 39, 68, .14);
  font-size: 14px;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.educam-proof .educam-proof__load-more:hover,
.educam-proof .educam-proof__load-more:focus-visible {
background: var(--educam-gold);
  color: var(--educam-navy);
  box-shadow: 0 12px 28px rgba(169, 127, 67, .22);
  transform: translateY(-1px);
}

.educam-proof .educam-proof__load-more:focus-visible {
outline: 2px solid var(--educam-gold-dark);
  outline-offset: 3px;
}

.educam-proof .educam-proof__load-more[hidden] {
display: none;
}

.educam-proof .educam-proof__load-more svg,
.educam-proof .educam-proof-cta__button svg {
width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.educam-proof .educam-proof-cta {
min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 38px);
  background: var(--educam-navy);
}

.educam-proof .educam-proof-cta__title {
margin: 0;
  color: var(--educam-white);
  font-size: clamp(23px, 2.7vw, 32px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.5px;
}

.educam-proof .educam-proof-cta__text {
margin: 13px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  line-height: 1.62;
}

.educam-proof .educam-proof-cta__button {
width: fit-content;
  min-height: 46px;
  gap: 9px;
  margin-top: 22px;
  padding: 0 22px;
  background: var(--educam-gold);
  color: var(--educam-navy);
  font-size: 14px;
  line-height: 1;
  transition: background-color 180ms ease, transform 180ms ease;
}

.educam-proof .educam-proof-cta__button:hover,
.educam-proof .educam-proof-cta__button:focus-visible {
background: var(--educam-white);
  color: var(--educam-navy);
  transform: translateY(-1px);
}

.educam-proof .educam-proof-cta__button:focus-visible {
outline: 2px solid var(--educam-gold);
  outline-offset: 3px;
}

/* Proof modal */

.educam-proof .educam-proof-modal {
position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  visibility: hidden;
  place-items: center;
  padding: 24px;
  background: rgba(12, 16, 28, .84);
  opacity: 0;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.educam-proof .educam-proof-modal.is-open {
visibility: visible;
  opacity: 1;
}

.educam-proof .educam-proof-modal__dialog {
position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 20px;
  background: #11151f;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
  transform: translateY(12px);
  transition: transform 180ms ease;
}

.educam-proof .educam-proof-modal.is-open .educam-proof-modal__dialog {
transform: none;
}

.educam-proof .educam-proof-modal__media {
width: 100%;
  max-height: 90vh;
  display: grid;
  place-items: center;
  overflow: auto;
}

.educam-proof .educam-proof-modal__media img {
width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
}

.educam-proof .educam-proof-modal__video {
width: 100%;
  aspect-ratio: 16 / 9;
}

.educam-proof .educam-proof-modal__video iframe {
width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.educam-proof .educam-proof-modal__close {
position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #111;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.educam-proof .educam-proof-modal__close:hover {
background: var(--educam-gold);
  color: var(--educam-navy);
}

.educam-proof .educam-proof-modal__close:focus-visible {
outline: 2px solid var(--educam-gold);
  outline-offset: 3px;
}

.educam-proof .educam-proof-modal__close svg {
width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

body.educam-proof-modal-open {
overflow: hidden;
}

/* =========================================================
   05. SCHOOL SOCIAL PROOF
========================================================= */

/* =========================================================
   06. FINAL CTA
========================================================= */

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) and (max-width: 1180px) {
  .educam-proof .educam-proof__masonry {
--educam-proof-columns: 3; --educam-proof-gap: 16px;
  }

  .educam-proof .educam-proof__title {
font-size: 28px; line-height: 1.2; letter-spacing: -.45px;
  }
}

@media (max-width: 767px) {
  .educam-proof .educam-proof__masonry {
--educam-proof-columns: 2; --educam-proof-gap: 12px; --educam-proof-row: 6px;
  }

  .educam-proof .educam-proof-pin {
border-radius: 15px;
  }

  .educam-proof .educam-proof-intro {
grid-column: 1 / -1; min-height: 0; padding: 0 0 16px;
  }

  .educam-proof .educam-proof__title {
font-size: 26px; line-height: 1.32; letter-spacing: -.4px;
  }

  .educam-proof .educam-proof__lead {
margin-top: 10px; font-size: 15.5px; line-height: 1.58;
  }

  .educam-proof .educam-proof-info {
padding: 18px;
  }

  .educam-proof .educam-proof-info__value {
font-size: 42px;
  }

  .educam-proof .educam-proof-info__title {
font-size: 18px; line-height: 1.34;
  }

  .educam-proof .educam-proof-info__text {
font-size: 13.5px; line-height: 1.56;
  }

  .educam-proof .educam-proof-quote__text {
font-size: 17px;
  }

  .educam-proof .educam-proof-video__content {
padding: 14px;
  }

  .educam-proof .educam-proof-video__title {
font-size: 15px;
  }

  .educam-proof .educam-proof-video__text {
display: none;
  }

  .educam-proof .educam-proof-video__play {
width: 44px; height: 44px;
  }

  .educam-proof .educam-proof-cta {
grid-column: 1 / -1; min-height: 0;
  }

  .educam-proof .educam-proof__load-more-wrap {
margin-top: 28px;
  }

  .educam-proof .educam-proof__load-more {
width: 100%;
  }

  .educam-proof .educam-proof-modal {
padding: 12px;
  }
}

@media (max-width: 390px) {
  .educam-proof .educam-proof__masonry {
--educam-proof-gap: 10px;
  }

  .educam-proof .educam-proof-info {
padding: 15px;
  }

  .educam-proof .educam-proof-info__value {
font-size: 37px;
  }

  .educam-proof .educam-proof-info__title {
font-size: 16px;
  }

  .educam-proof .educam-proof__title {
font-size: 24px; line-height: 1.3;
  }

  .educam-proof .educam-proof__lead {
font-size: 15px;
  }
}


@media (min-width: 768px) and (max-width: 1180px) {
  .educam-proof--home {
    width: calc(100% - (var(--educam-gutter) * 2));
    max-width: none;
    padding-bottom: clamp(28px, 3vw, 36px);
  }
}

@media (max-width: 767px) {
  .educam-page--home {
    --educam-gutter: 16px;
    --educam-section-gap: 52px;
  }

  .educam-proof--home {
    width: calc(100% - (var(--educam-gutter) * 2));
    max-width: none;
  }

  .educam-proof--course {
    padding: 44px 16px 62px;
  }
}

@media (max-width: 390px) {
  .educam-page--home {
    --educam-gutter: 14px;
    --educam-section-gap: 44px;
  }

  .educam-proof--course { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .educam-page *,
  .educam-page *::before,
  .educam-page *::after {
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   EDUCAM CATEGORY PAGE TEMPLATE — APPENDED TO GLOBAL CSS
========================================================= */

/* =========================================================
   EDUCAM — CATEGORY PAGE TEMPLATE
   - Đổi nội dung, hình ảnh và đường dẫn; không cần đổi class.
   - Toàn bộ màu thương hiệu và container được quản lý tại đây.
========================================================= */
.educam-category-page,
.educam-rtb-tooltip,
.educam-rtb-backdrop {
  --educam-navy: #202744;
  --educam-blue: #0171dc;
  --educam-blue-hover: #005fbd;
  --educam-ink: #111111;
  --educam-muted: #667085;
  --educam-white: #ffffff;
  --educam-soft: #f5f6f7;
  --educam-soft-hover: #f1f3f5;
  --educam-focus: rgba(1, 113, 220, 0.34);
  --educam-gold: #cda666;
  --educam-gold-dark: #a97f43;
  --educam-gold-soft: #f4ebdd;
  --educam-cream: #fbf8f2;
  --educam-red: #e84d2f;
  --educam-red-soft: #fff1ed;
  --educam-green: #2f9657;
  --educam-green-soft: #edf8f1;
  --educam-panel: #f7f9fc;
  --educam-panel-blue: #f5f9ff;
  --educam-pathway-gold-dark: #9d743c;
  --educam-pathway-ink: #151821;
  --educam-course-text: #171a24;
  --educam-course-muted: #6b7280;
  --educam-course-line: rgba(32, 39, 68, 0.11);
  --educam-text-body: #41485e;
  --educam-text-secondary: #646b7f;
  --educam-text-soft: #6f778b;
  --educam-container: 1180px;
  --educam-container-wide: 1340px;
  --educam-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.educam-category-page {
  width: 100%;
  margin: 0;
  overflow: clip;
  color: var(--educam-navy);
  font-family: var(--educam-font);
}

.educam-category-page,
.educam-category-page *,
.educam-category-page *::before,
.educam-category-page *::after,
.educam-rtb-tooltip,
.educam-rtb-tooltip *,
.educam-rtb-tooltip *::before,
.educam-rtb-tooltip *::after,
.educam-rtb-backdrop {
  box-sizing: border-box;
}

.educam-category-page :where(button, input, textarea, select, a),
.educam-rtb-tooltip button {
  font-family: inherit;
}

.educam-category-overview {
      --ec-ease: 180ms ease;
      --ec-copy: 16px;
      --ec-mobile-content: 380px;

      width: 100%;
      margin: 0;
      padding: 8px clamp(16px, 3vw, 24px) 30px;
      overflow-x: clip;
      background: var(--educam-white);
      color: var(--educam-navy);
      font-family: var(--educam-font);
    }


    .educam-category-overview button,
    .educam-category-overview a,
    .educam-rtb-tooltip button {
      font-family: inherit;
    }

    .educam-category-overview__heading,
    .educam-category-overview__description,
    .educam-rtb-text,
    .educam-rtb-card__content > h3,
    .educam-rtb-card__content > p {
      max-width: none;
      white-space: normal;
      text-wrap: auto;
      word-break: normal;
      overflow-wrap: normal;
      hyphens: none;
    }


    /* Reveal animation: chỉ ẩn sau khi JavaScript đã sẵn sàng,
       tránh mất nội dung nếu JS bị chặn. */
    .educam-category-overview[data-ec-reveal-ready="true"] [data-ec-reveal] {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition:
        opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(var(--ec-reveal-order, 0) * 70ms);
      will-change: opacity, transform;
    }

    .educam-category-overview[data-ec-reveal-ready="true"]
      [data-ec-reveal="media"] {
      transform: translate3d(0, 14px, 0) scale(0.985);
    }

    .educam-category-overview[data-ec-reveal-ready="true"].is-revealed
      [data-ec-reveal] {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* Main layout */
    .educam-category-overview__inner {
      width: 100%;
      max-width: var(--educam-container-wide);
      margin-inline: auto;
    }

    .educam-category-overview__layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: clamp(24px, 2.4vw, 32px);
    }

    .educam-category-overview__media {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border-radius: 16px;
      background: #dceff0;
      aspect-ratio: 1.62 / 1;
    }

    .educam-category-overview__image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .educam-category-overview__content {
      min-width: 0;
      padding-top: 2px;
    }

    .educam-category-overview__heading {
      margin: 0;
      color: var(--educam-navy);
      font-size: clamp(27px, 2.25vw, 30px);
      font-weight: 600;
      line-height: 1.32;
      letter-spacing: -0.028em;
    }

    .educam-category-overview__description {
      margin: 12px 0 0;
      color: var(--educam-ink);
      font-size: var(--ec-copy);
      font-weight: 400;
      line-height: 1.68;
      letter-spacing: -0.006em;
    }

    /* Bullet list */
    .educam-rtb-section {
      position: relative;
      width: 100%;
      margin-top: 13px;
      color: var(--educam-navy);
    }

    .educam-rtb-list {
      display: grid;
      gap: 4px;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .educam-category-overview button.educam-rtb-item {
      appearance: none;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      width: 100%;
      margin: 0;
      padding: 2px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--educam-navy);
      text-align: left;
      cursor: pointer;
      transition: background-color var(--ec-ease);
    }

    .educam-category-overview button.educam-rtb-item:hover,
    .educam-category-overview button.educam-rtb-item:focus-visible,
    .educam-category-overview button.educam-rtb-item[aria-expanded="true"] {
      background: transparent;
      color: var(--educam-navy);
    }

    .educam-category-overview button.educam-rtb-item:focus-visible,
    .educam-rtb-tooltip button.educam-rtb-close:focus-visible {
      outline: 2px solid var(--educam-focus);
      outline-offset: 3px;
    }

    .educam-rtb-icon {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: currentColor;
    }

    .educam-rtb-icon svg {
      display: block;
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.55;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .educam-rtb-text {
      min-width: 0;
      color: currentColor;
      font-size: 16.5px;
      font-weight: 400;
      line-height: 1.68;
    }

    /* Tooltip / mobile card */
    .educam-rtb-tooltip,
    .educam-rtb-backdrop {
      --ec-ease: 180ms ease;
      font-family: var(--educam-font);
    }

    .educam-rtb-tooltip {
      position: fixed;
      z-index: 9999;
      width: min(380px, calc(100vw - 32px));
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px) scale(0.98);
      transition: opacity var(--ec-ease), transform var(--ec-ease), visibility var(--ec-ease);
    }

    .educam-rtb-tooltip.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .educam-rtb-card {
      position: relative;
      padding: 13px;
      border-radius: 16px;
      background: var(--educam-white);
      box-shadow: 0 22px 50px rgba(32, 39, 68, 0.14), 0 2px 9px rgba(32, 39, 68, 0.08);
    }

    .educam-rtb-card::after {
      content: "";
      position: absolute;
      top: var(--ec-arrow-top, 44%);
      right: -7px;
      width: 14px;
      height: 14px;
      background: var(--educam-white);
      transform: rotate(45deg);
    }

    /* Tooltip nằm bên phải trigger thì mũi tên chuyển sang cạnh trái. */
    .educam-rtb-tooltip.is-placement-right .educam-rtb-card::after {
      right: auto;
      left: -7px;
    }

    .educam-rtb-tooltip.is-placement-left .educam-rtb-card::after {
      right: -7px;
      left: auto;
    }

    .educam-rtb-card__content {
      width: 100%;
      min-width: 0;
    }

    .educam-rtb-tooltip button.educam-rtb-close {
      appearance: none;
      position: absolute;
      z-index: 3;
      top: 11px;
      right: 11px;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.96);
      color: var(--educam-navy);
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(32, 39, 68, 0.12);
      transition: color var(--ec-ease), background-color var(--ec-ease);
    }

    .educam-rtb-tooltip button.educam-rtb-close:hover {
      color: var(--educam-blue);
    }

    .educam-rtb-close svg {
      width: 17px;
      height: 17px;
    }

    /* Ảnh luôn cùng kích thước 16:9; wrapper không có background. */
    .educam-rtb-visual {
      width: 100%;
      margin: 0 0 13px;
      aspect-ratio: 16 / 9;
      background: transparent;
    }

    .educam-rtb-visual__image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      object-fit: cover;
      object-position: center;
    }

    .educam-rtb-card__content > h3 {
      margin: 0 0 7px;
      color: var(--educam-navy);
      font-size: 17.5px;
      font-weight: 600;
      line-height: 1.48;
      letter-spacing: -0.012em;
    }

    .educam-rtb-card__content > p {
      margin: 0;
      color: var(--educam-muted);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.62;
    }

    .educam-rtb-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(17, 24, 39, 0.36);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--ec-ease), visibility var(--ec-ease);
    }

    .educam-rtb-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    html.educam-rtb-lock,
    html.educam-rtb-lock body {
      overflow: hidden;
    }

    /* CTA + rating */
    .educam-category-overview__footer {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-top: 16px;
    }

    .educam-category-overview a.educam-category-overview__cta {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      padding: 10px 18px;
      border: 1px solid var(--educam-blue);
      border-radius: 8px;
      background: var(--educam-blue);
      color: var(--educam-white);
      font-size: var(--ec-copy);
      font-weight: 500;
      line-height: 1.25;
      text-decoration: none;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .educam-category-overview a.educam-category-overview__cta > span:first-child {
      font-weight: 500;
    }

    .educam-category-overview a.educam-category-overview__cta:hover {
      border-color: var(--educam-blue-hover);
      background: var(--educam-blue-hover);
      color: var(--educam-white);
      transform: translateY(-1px);
    }

    .educam-category-overview a.educam-category-overview__cta:focus-visible {
      outline: 3px solid rgba(1, 113, 220, 0.2);
      outline-offset: 3px;
    }

    .educam-category-overview__cta-arrow {
      width: 21px;
      height: 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      transition: transform 160ms ease;
    }

    .educam-category-overview__cta-arrow svg {
      width: 21px;
      height: 21px;
    }

    .educam-category-overview a.educam-category-overview__cta:hover .educam-category-overview__cta-arrow {
      transform: translateX(3px);
    }

    .educam-category-overview__rating {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 690px;
    }

    .educam-category-overview__stars {
      display: flex;
      gap: 2px;
      flex: 0 0 auto;
    }

    .educam-category-overview__star {
      position: relative;
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #dfe5ec;
      color: var(--educam-white);
      font-size: 15px;
      line-height: 1;
    }

    .educam-category-overview__star::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--educam-blue);
    }

    .educam-category-overview__star--partial::before {
      right: 10%;
    }

    .educam-category-overview__star-icon {
      position: relative;
      z-index: 1;
      transform: translateY(-1px);
    }

    .educam-category-overview__rating-text {
      margin: 0;
      color: var(--educam-navy);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.45;
    }

    .educam-category-overview__rating-text strong {
      font-weight: 600;
    }

    /* Responsive */
    @media (min-width: 768px) {
      .educam-rtb-text {
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: rgba(32, 39, 68, 0.5);
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
        text-decoration-skip-ink: none;
      }
    }

    /* Desktop: luôn giữ bố cục hai cột.
       Tooltip tự đóng khi rời hover nên không cần nút đóng. */
    @media (min-width: 1025px) {
      .educam-category-overview__inner {
        width: 100%;
        max-width: var(--educam-container-wide);
      }

      .educam-category-overview__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 2.4vw, 32px);
      }

      .educam-category-overview__media,
      .educam-category-overview__content {
        width: 100%;
        max-width: none;
        margin-inline: 0;
      }

      .educam-rtb-tooltip button.educam-rtb-close {
        display: none;
      }
    }

    /* Tablet mới chuyển sang một cột và dùng trọn chiều rộng container. */
    @media (max-width: 1024px) {
      .educam-category-overview {
        padding: 8px clamp(16px, 2.4vw, 24px) 20px;
      }

      .educam-category-overview__inner {
        width: 100%;
        max-width: none;
      }

      .educam-category-overview__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
      }

      .educam-category-overview__media,
      .educam-category-overview__content {
        width: 100%;
        max-width: none;
        margin-inline: 0;
      }
    }

    /* Tablet dùng thao tác nhấn như mobile, nhưng dialog được giữ gọn
       để không kéo rộng theo toàn bộ màn hình. */
    @media (min-width: 768px) and (max-width: 1024px) {
      body > .educam-rtb-tooltip {
        left: 50%;
        right: auto;
        top: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
        width: min(520px, calc(100vw - 40px));
        max-width: none;
        transform: translate(-50%, 18px) scale(0.985);
      }

      body > .educam-rtb-tooltip.is-open {
        transform: translate(-50%, 0) scale(1);
      }

      .educam-rtb-card {
        width: 100%;
        height: auto;
        max-height: calc(
          100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
        );
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 48px 18px 22px;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(32, 39, 68, 0.18);
      }

      .educam-rtb-card::after {
        display: none;
      }

      .educam-rtb-card__content {
        width: min(100%, 420px);
        max-width: 420px;
        margin-inline: auto;
      }

      .educam-rtb-visual {
        margin-bottom: 16px;
      }

      .educam-rtb-visual__image {
        border-radius: 14px;
      }

      .educam-rtb-tooltip button.educam-rtb-close {
        top: 12px;
        right: 12px;
        background: transparent;
        box-shadow: none;
      }
    }

    @media (max-width: 767px) {
      .educam-category-overview {
        --ec-copy: 15px;
        padding: 8px 16px 18px;
      }

      .educam-category-overview__inner {
        width: 100%;
        max-width: none;
      }

      .educam-category-overview__layout {
        gap: 18px;
      }

      .educam-category-overview__media {
        border-radius: 12px;
        aspect-ratio: 1.58 / 1;
      }

      .educam-category-overview__heading {
        font-size: clamp(24px, 6vw, 26px);
        line-height: 1.32;
        letter-spacing: -0.024em;
      }

      .educam-category-overview__description {
        margin-top: 10px;
        line-height: 1.65;
      }

      .educam-rtb-section {
        margin-top: 10px;
      }

      .educam-rtb-list {
        gap: 10px;
      }

      .educam-category-overview button.educam-rtb-item {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;
        min-height: 64px;
        padding: 12px 14px;
        border-radius: 13px;
        background: var(--educam-soft);
      }

      .educam-category-overview button.educam-rtb-item:hover,
      .educam-category-overview button.educam-rtb-item:focus-visible,
      .educam-category-overview button.educam-rtb-item[aria-expanded="true"] {
        background: var(--educam-soft-hover);
      }

      .educam-rtb-icon {
        width: 28px;
        height: 28px;
      }

      .educam-rtb-icon svg {
        width: 24px;
        height: 24px;
      }

      .educam-rtb-text {
        font-size: 16px;
        line-height: 1.68;
        text-decoration: none;
      }

      /* Card tự co theo nội dung, không còn phủ cao toàn màn hình. */
      body > .educam-rtb-tooltip {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        transform: translateY(18px);
      }

      body > .educam-rtb-tooltip.is-open {
        transform: translateY(0);
      }

      .educam-rtb-card {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 48px 16px 22px;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(32, 39, 68, 0.18);
      }

      .educam-rtb-card::after {
        display: none;
      }

      .educam-rtb-card__content {
        width: min(100%, var(--ec-mobile-content));
        max-width: var(--ec-mobile-content);
        margin-inline: auto;
      }

      .educam-rtb-visual {
        margin-bottom: 16px;
      }

      .educam-rtb-visual__image {
        border-radius: 14px;
      }

      .educam-rtb-card__content > h3 {
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 1.48;
      }

      .educam-rtb-card__content > p {
        font-size: 13.8px;
        line-height: 1.6;
      }

      .educam-rtb-tooltip button.educam-rtb-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        background: transparent;
        box-shadow: none;
      }

      .educam-category-overview__footer {
        gap: 10px;
        margin-top: 14px;
      }

      .educam-category-overview a.educam-category-overview__cta {
        min-height: 45px;
        padding: 10px 17px;
      }
    }

    @media (max-width: 520px) {
      .educam-category-overview__rating {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
      }
    }

    @media (max-width: 420px) {
      .educam-category-overview button.educam-rtb-item {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 11px;
        min-height: 60px;
        padding: 11px 13px;
        border-radius: 12px;
      }

      .educam-rtb-icon {
        width: 27px;
        height: 27px;
      }

      .educam-rtb-icon svg {
        width: 23px;
        height: 23px;
      }

      .educam-category-overview a.educam-category-overview__cta {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-rtb-item,
      .educam-rtb-tooltip,
      .educam-rtb-backdrop,
      .educam-rtb-close,
      .educam-category-overview__cta,
      .educam-category-overview__cta-arrow,
      .educam-category-overview[data-ec-reveal-ready="true"] [data-ec-reveal] {
        transition: none;
      }

      .educam-category-overview[data-ec-reveal-ready="true"] [data-ec-reveal] {
        opacity: 1;
        transform: none;
      }
    }


    .educam-problem-solution {
      --eps-shadow: 0 16px 38px rgba(32, 39, 68, 0.08);

      width: 100%;
      margin: 0;
      padding: clamp(48px, 6vw, 78px) clamp(16px, 3vw, 24px);
      overflow: hidden;
      background: var(--educam-white);
      color: var(--educam-navy);
      font-family: var(--educam-font);
    }

    .educam-problem-solution__inner {
      width: min(100%, var(--educam-container));
      margin: 0 auto;
    }

    /* GROUP */
    .educam-problem-solution__group {
      width: 100%;
      padding: clamp(24px, 3vw, 38px);
      border-radius: 26px;
      background: var(--educam-panel);
    }

    .educam-problem-solution__group--solution {
      background: var(--educam-panel-blue);
    }

    .educam-problem-solution__heading {
      max-width: 850px;
      margin: 0 auto clamp(22px, 2.8vw, 30px);
      color: var(--educam-navy);
      font-size: clamp(24px, 2.55vw, 30px);
      font-weight: 600;
      line-height: 1.34;
      letter-spacing: -0.024em;
      text-align: center;
    }

    .educam-problem-solution__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(272px, 300px) minmax(0, 1fr);
      grid-template-areas: "left visual right";
      align-items: stretch;
      gap: clamp(18px, 2.5vw, 30px);
    }

    .educam-problem-solution__column {
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      min-width: 0;
      gap: 14px;
    }

    .educam-problem-solution__column--left { grid-area: left; }
    .educam-problem-solution__column--right { grid-area: right; }

    /* CONTENT CARD */
    .educam-problem-solution__card {
      min-width: 0;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-content: start;
      gap: 12px;
      padding: clamp(17px, 1.7vw, 20px);
      border: 0;
      border-radius: 16px;
      background: var(--educam-white);
      box-shadow: 0 7px 20px rgba(32, 39, 68, 0.052);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .educam-problem-solution__card:hover {
        transform: translateY(-2px);
        box-shadow: 0 13px 28px rgba(32, 39, 68, 0.085);
      }
    }

    .educam-problem-solution__icon {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      border-radius: 8px;
      color: var(--educam-white);
    }

    .educam-problem-solution__icon--problem { background: var(--educam-red); }
    .educam-problem-solution__icon--solution { background: var(--educam-green); }

    .educam-problem-solution__icon svg {
      display: block;
      width: 16px;
      height: 16px;
    }

    .educam-problem-solution__card-content { min-width: 0; }

    .educam-problem-solution__card-title {
      margin: 0;
      color: var(--educam-navy);
      font-size: 16px;
      font-weight: 600;
      line-height: 1.44;
      letter-spacing: -0.012em;
    }

    .educam-problem-solution__card-description {
      margin: 6px 0 0;
      color: var(--educam-muted);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.56;
      letter-spacing: 0;
    }

    /* VISUAL — mọi kích thước bên trong bám theo chiều rộng mockup */
    .educam-problem-solution__visual {
      grid-area: visual;
      align-self: center;
      width: min(100%, 300px);
      margin: 0 auto;
      container-type: inline-size;
    }

    .educam-problem-solution__visual-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 0.84;
      overflow: hidden;
      border-radius: 22px;
      background: var(--educam-white);
      box-shadow: var(--eps-shadow);
      isolation: isolate;
    }

    .educam-problem-solution__visual-frame--problem { background: #fff8f5; }
    .educam-problem-solution__visual-frame--solution { background: #f3f8fe; }

    .educam-problem-solution__visual-badge {
      position: absolute;
      top: 4.2cqi;
      left: 50%;
      z-index: 5;
      max-width: calc(100% - 10cqi);
      padding: 2.2cqi 3.5cqi;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.96);
      color: var(--educam-navy);
      font-size: clamp(9px, 3.65cqi, 11px);
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      transform: translateX(-50%);
      box-shadow: 0 6px 16px rgba(32, 39, 68, 0.075);
    }

    .educam-problem-solution__mockup {
      position: absolute;
      inset: 0;
      min-width: 0;
      min-height: 0;
      padding: 17.5cqi 5.2cqi 5.2cqi;
    }

    .educam-problem-solution__visual-frame--problem .educam-problem-solution__mockup {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 3.7cqi;
    }

    .educam-problem-solution__visual-frame--solution .educam-problem-solution__mockup {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 3.1cqi;
    }

    .educam-problem-solution__mockup-topbar {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2.6cqi;
    }

    .educam-problem-solution__mockup-brand {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 2.3cqi;
      color: var(--educam-navy);
      font-size: clamp(8px, 3.35cqi, 10px);
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
    }

    .educam-problem-solution__mockup-logo {
      width: 8.2cqi;
      aspect-ratio: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 2.3cqi;
      background: var(--educam-navy);
      color: var(--educam-white);
      font-size: clamp(8px, 3.4cqi, 10px);
      font-weight: 600;
    }

    .educam-problem-solution__mockup-status {
      flex: 0 0 auto;
      padding: 1.75cqi 2.75cqi;
      border-radius: 999px;
      font-size: clamp(7px, 2.9cqi, 9px);
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
    }

    .educam-problem-solution__mockup-status--danger {
      background: var(--educam-red-soft);
      color: var(--educam-red);
    }

    .educam-problem-solution__mockup-status--success {
      background: var(--educam-green-soft);
      color: var(--educam-green);
    }

    /* PROBLEM MOCKUP */
    .educam-problem-solution__chaos-area {
      position: relative;
      min-width: 0;
      min-height: 0;
    }

    .educam-problem-solution__paper {
      position: absolute;
      width: 48%;
      min-height: 39%;
      padding: 3.2cqi;
      border-radius: 3.8cqi;
      background: var(--educam-white);
      box-shadow: 0 8px 20px rgba(32, 39, 68, 0.085);
      transform: rotate(var(--paper-rotation, 0deg));
      transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .educam-problem-solution__paper--vin {
      top: 1%;
      left: 0;
      --paper-rotation: -5deg;
      transition-delay: 130ms;
    }

    .educam-problem-solution__paper--bo {
      top: 9%;
      right: 0;
      --paper-rotation: 5deg;
      transition-delay: 210ms;
    }

    .educam-problem-solution__paper--test {
      right: 21%;
      bottom: 1%;
      --paper-rotation: -2deg;
      transition-delay: 290ms;
    }

    .educam-problem-solution__paper-head {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.8cqi;
      margin-bottom: 2.6cqi;
      color: var(--educam-navy);
      font-size: clamp(7px, 3.05cqi, 9px);
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
    }

    .educam-problem-solution__paper-dot {
      width: 2.4cqi;
      aspect-ratio: 1;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--educam-red);
    }

    .educam-problem-solution__paper-lines {
      display: grid;
      gap: 1.7cqi;
    }

    .educam-problem-solution__paper-line {
      width: 100%;
      height: 1.7cqi;
      min-height: 3px;
      border-radius: 999px;
      background: #edf0f4;
    }

    .educam-problem-solution__paper-line--medium { width: 78%; }
    .educam-problem-solution__paper-line--short { width: 58%; }

    .educam-problem-solution__paper-score {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.6cqi;
      margin-top: 2.5cqi;
      color: var(--educam-muted);
      font-size: clamp(6px, 2.6cqi, 8px);
      font-weight: 500;
      line-height: 1.2;
    }

    .educam-problem-solution__paper-score strong {
      color: var(--educam-red);
      font-size: clamp(9px, 3.8cqi, 11px);
      font-weight: 600;
    }

    .educam-problem-solution__disconnect {
      position: absolute;
      top: 39%;
      left: 50%;
      z-index: 4;
      width: 16cqi;
      aspect-ratio: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--educam-red);
      color: var(--educam-white);
      transform: translate(-50%, -50%);
      box-shadow: 0 7px 17px rgba(232, 77, 47, 0.22);
      transition: opacity 450ms ease 360ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 360ms;
    }

    .educam-problem-solution__disconnect svg {
      width: 43%;
      height: 43%;
    }

    .educam-problem-solution__mockup-message {
      min-height: 13cqi;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2.7cqi 3.1cqi;
      border-radius: 3.3cqi;
      background: var(--educam-red-soft);
      color: #a63c27;
      font-size: clamp(7px, 3cqi, 9px);
      font-weight: 600;
      line-height: 1.38;
      text-align: center;
      transition: opacity 480ms ease 410ms, transform 520ms ease 410ms;
    }

    /* SOLUTION MOCKUP */
    .educam-problem-solution__progress {
      min-width: 0;
      padding: 3.2cqi 3.5cqi;
      border-radius: 3.7cqi;
      background: var(--educam-white);
      box-shadow: 0 7px 18px rgba(32, 39, 68, 0.055);
    }

    .educam-problem-solution__progress-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2cqi;
      margin-bottom: 2.4cqi;
      color: var(--educam-muted);
      font-size: clamp(7px, 2.9cqi, 9px);
      font-weight: 500;
      line-height: 1.2;
    }

    .educam-problem-solution__progress-head strong {
      color: var(--educam-blue);
      font-size: clamp(9px, 3.55cqi, 11px);
      font-weight: 600;
    }

    .educam-problem-solution__progress-track {
      height: 2.4cqi;
      min-height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: #e7edf4;
    }

    .educam-problem-solution__progress-fill {
      width: 72%;
      height: 100%;
      border-radius: inherit;
      background: var(--educam-blue);
      transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1) 230ms;
    }

    .educam-problem-solution__roadmap {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 2.3cqi;
    }

    .educam-problem-solution__roadmap::before {
      content: "";
      position: absolute;
      top: 12%;
      bottom: 12%;
      left: 5.8cqi;
      width: 2px;
      border-radius: 999px;
      background: #d8e7f5;
    }

    .educam-problem-solution__step {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: 11.5cqi minmax(0, 1fr);
      align-items: center;
      gap: 2.7cqi;
      padding: 2.1cqi 3cqi 2.1cqi 2.1cqi;
      border-radius: 3.5cqi;
      background: var(--educam-white);
      box-shadow: 0 6px 15px rgba(32, 39, 68, 0.05);
      transition: opacity 480ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .educam-problem-solution__step:nth-child(1) { transition-delay: 180ms; }
    .educam-problem-solution__step:nth-child(2) { transition-delay: 280ms; }
    .educam-problem-solution__step:nth-child(3) { transition-delay: 380ms; }

    .educam-problem-solution__step-number {
      width: 100%;
      aspect-ratio: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 2.8cqi;
      background: #eaf4ff;
      color: var(--educam-blue);
      font-size: clamp(7px, 3.05cqi, 9px);
      font-weight: 600;
    }

    .educam-problem-solution__step.is-complete .educam-problem-solution__step-number {
      background: var(--educam-green-soft);
      color: var(--educam-green);
    }

    .educam-problem-solution__step-copy { min-width: 0; }

    .educam-problem-solution__step-title {
      display: block;
      color: var(--educam-navy);
      font-size: clamp(7px, 3.05cqi, 9px);
      font-weight: 600;
      line-height: 1.28;
    }

    .educam-problem-solution__step-text {
      display: block;
      margin-top: 0.7cqi;
      color: var(--educam-muted);
      font-size: clamp(6px, 2.55cqi, 8px);
      font-weight: 400;
      line-height: 1.3;
    }

    .educam-problem-solution__result {
      min-width: 0;
      display: grid;
      grid-template-columns: 10.5cqi minmax(0, 1fr);
      align-items: center;
      gap: 2.7cqi;
      padding: 2.6cqi 3.1cqi;
      border-radius: 3.5cqi;
      background: var(--educam-green-soft);
      transition: opacity 480ms ease 450ms, transform 560ms ease 450ms;
    }

    .educam-problem-solution__result-icon {
      width: 100%;
      aspect-ratio: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 2.8cqi;
      background: var(--educam-green);
      color: var(--educam-white);
    }

    .educam-problem-solution__result-icon svg {
      width: 52%;
      height: 52%;
    }

    .educam-problem-solution__result strong {
      display: block;
      color: #17693a;
      font-size: clamp(7px, 3cqi, 9px);
      font-weight: 600;
      line-height: 1.28;
    }

    .educam-problem-solution__result > span > span {
      display: block;
      margin-top: 0.7cqi;
      color: #47745a;
      font-size: clamp(6px, 2.55cqi, 8px);
      line-height: 1.3;
    }

    /* TRANSITION */
    .educam-problem-solution__transition {
      width: 48px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 18px auto;
      color: #afbac8;
    }

    .educam-problem-solution__transition svg {
      display: block;
      width: 36px;
      height: 52px;
    }

    .educam-problem-solution__transition-path { stroke-dasharray: 6 7; }

    /* CTA */
    .educam-problem-solution__footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      margin-top: 26px;
      text-align: center;
    }

    .educam-problem-solution__cta {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 11px 19px;
      border: 0;
      border-radius: 8px;
      background: var(--educam-blue);
      color: var(--educam-white);
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.3;
      text-decoration: none;
      box-shadow: 0 9px 20px rgba(1, 113, 220, 0.18);
      transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .educam-problem-solution__cta:hover {
      background: var(--educam-blue-hover);
      color: var(--educam-white);
      box-shadow: 0 12px 24px rgba(1, 113, 220, 0.23);
      transform: translateY(-1px);
    }

    .educam-problem-solution__cta:focus-visible {
      outline: 3px solid rgba(1, 113, 220, 0.2);
      outline-offset: 3px;
    }

    .educam-problem-solution__cta svg {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
      transition: transform 160ms ease;
    }

    .educam-problem-solution__cta:hover svg { transform: translateX(3px); }

    .educam-problem-solution__note {
      margin: 0;
      color: var(--educam-muted);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
    }

    /* REVEAL */
    .educam-problem-solution.is-reveal-ready [data-eps-reveal] {
      opacity: 0;
      transition: opacity 620ms ease var(--eps-delay, 0ms), transform 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--eps-delay, 0ms);
    }

    .educam-problem-solution.is-reveal-ready [data-eps-reveal="up"] { transform: translateY(22px); }
    .educam-problem-solution.is-reveal-ready [data-eps-reveal="left"] { transform: translateX(-24px); }
    .educam-problem-solution.is-reveal-ready [data-eps-reveal="right"] { transform: translateX(24px); }
    .educam-problem-solution.is-reveal-ready [data-eps-reveal="scale"] { transform: translateY(12px) scale(0.96); }

    .educam-problem-solution.is-reveal-ready [data-eps-reveal].is-visible {
      opacity: 1;
      transform: none;
    }

    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__paper {
      opacity: 0;
      transform: translateY(16px) rotate(0);
    }

    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__disconnect {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.68);
    }

    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__mockup-message,
    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__result {
      opacity: 0;
      transform: translateY(9px);
    }

    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__progress-fill { width: 0; }

    .educam-problem-solution.is-reveal-ready .educam-problem-solution__visual:not(.is-visible) .educam-problem-solution__step {
      opacity: 0;
      transform: translateX(12px);
    }

    .educam-problem-solution__transition.is-visible .educam-problem-solution__transition-path {
      animation: educamProblemPath 1.5s linear infinite;
    }

    @keyframes educamProblemPath {
      to { stroke-dashoffset: -26; }
    }

    /* TABLET */
    @media (max-width: 1040px) {
      .educam-problem-solution {
        padding: 42px 18px;
      }

      .educam-problem-solution__group {
        padding: 22px;
        border-radius: 22px;
      }

      .educam-problem-solution__heading {
        max-width: 760px;
        margin-bottom: 20px;
        font-size: 24px;
      }

      .educam-problem-solution__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "visual visual"
          "left right";
        gap: 14px;
      }

      .educam-problem-solution__visual {
        width: min(100%, 272px);
        margin-bottom: 2px;
      }

      .educam-problem-solution__column {
        gap: 12px;
      }

      .educam-problem-solution__card {
        min-height: 118px;
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 10px;
        padding: 15px 16px;
        border-radius: 14px;
      }

      .educam-problem-solution__icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
      }

      .educam-problem-solution__icon svg {
        width: 15px;
        height: 15px;
      }

      .educam-problem-solution__card-title { font-size: 15px; }
      .educam-problem-solution__card-description {
        margin-top: 4px;
        font-size: 14px;
        line-height: 1.52;
      }

      .educam-problem-solution__transition {
        width: 40px;
        height: 46px;
        margin: 14px auto;
      }

      .educam-problem-solution__transition svg {
        width: 31px;
        height: 44px;
      }

      .educam-problem-solution__footer { margin-top: 22px; }
    }

    /* MOBILE */
    @media (max-width: 640px) {
      .educam-problem-solution {
        padding: 32px 12px;
        overflow: hidden;
      }

      .educam-problem-solution__group {
        padding: 16px 12px;
        border-radius: 18px;
      }

      .educam-problem-solution__heading {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: 20px;
        line-height: 1.38;
        letter-spacing: -0.018em;
        text-align: left;
      }

      .educam-problem-solution__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "visual"
          "left"
          "right";
        gap: 10px;
      }

      .educam-problem-solution__column {
        grid-template-rows: none;
        gap: 10px;
      }

      .educam-problem-solution__visual {
        width: min(100%, 276px);
        margin-bottom: 2px;
      }

      .educam-problem-solution__visual-frame {
        border-radius: 19px;
        box-shadow: 0 11px 27px rgba(32, 39, 68, 0.07);
      }

      .educam-problem-solution__card {
        min-height: 0;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(32, 39, 68, 0.045);
      }

      .educam-problem-solution__icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
      }

      .educam-problem-solution__icon svg {
        width: 14px;
        height: 14px;
      }

      .educam-problem-solution__card-title {
        font-size: 15px;
        line-height: 1.42;
      }

      .educam-problem-solution__card-description {
        margin-top: 3px;
        font-size: 14px;
        line-height: 1.48;
      }

      .educam-problem-solution__transition {
        width: 34px;
        height: 39px;
        margin: 10px auto;
      }

      .educam-problem-solution__transition svg {
        width: 27px;
        height: 38px;
      }

      .educam-problem-solution__footer {
        align-items: stretch;
        gap: 8px;
        margin-top: 17px;
      }

      .educam-problem-solution__cta {
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
      }

      .educam-problem-solution__note {
        font-size: 13px;
        line-height: 1.45;
      }
    }

    @media (max-width: 370px) {
      .educam-problem-solution {
        padding-right: 10px;
        padding-left: 10px;
      }

      .educam-problem-solution__group {
        padding-right: 10px;
        padding-left: 10px;
      }

      .educam-problem-solution__visual {
        width: min(100%, 248px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-problem-solution *,
      .educam-problem-solution *::before,
      .educam-problem-solution *::after {
        animation: none !important;
        transition: none !important;
      }
    }


    .educam-category-pathway {
      width: 100%;
      margin: 0;
      padding: clamp(46px, 6vw, 76px) clamp(16px, 3vw, 24px);
      overflow: hidden;
      background: var(--educam-cream);
      color: var(--educam-navy);
      font-family: var(--educam-font);
    }

    .educam-category-pathway__inner {
      width: min(100%, var(--educam-container));
      margin: 0 auto;
    }

    .educam-category-pathway__header {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(320px, .72fr);
      align-items: end;
      gap: clamp(24px, 5vw, 70px);
      margin-bottom: clamp(24px, 3.2vw, 36px);
    }

    .educam-category-pathway__eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 9px;
      color: var(--educam-pathway-gold-dark);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: .065em;
      text-transform: uppercase;
    }

    .educam-category-pathway__eyebrow::before {
      width: 24px;
      height: 1px;
      flex: 0 0 auto;
      background: var(--educam-gold);
      content: "";
    }

    .educam-category-pathway__heading {
      max-width: 700px;
      margin: 0;
      color: var(--educam-navy);
      font-size: clamp(24px, 2.55vw, 30px);
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -.025em;
    }

    .educam-category-pathway__lead {
      margin: 0;
      color: var(--educam-muted);
      font-size: 15.5px;
      font-weight: 400;
      line-height: 1.66;
    }

    .educam-category-pathway__flow {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .educam-category-pathway__flow::before {
      position: absolute;
      top: 43px;
      right: 16.667%;
      left: 16.667%;
      height: 1px;
      background: rgba(32, 39, 68, .16);
      content: "";
    }

    .educam-category-pathway__item {
      position: relative;
      z-index: 1;
      min-width: 0;
      padding: clamp(20px, 2.3vw, 28px);
      border-radius: 20px;
      background: var(--educam-white);
      box-shadow: 0 13px 34px rgba(32, 39, 68, .065);
      transition: transform 190ms ease, box-shadow 190ms ease;
    }

    .educam-category-pathway__item:nth-child(2) {
      background: var(--educam-navy);
      color: var(--educam-white);
      box-shadow: 0 18px 42px rgba(32, 39, 68, .17);
    }

    @media (hover: hover) and (pointer: fine) {
      .educam-category-pathway__item:hover {
        transform: translateY(-3px);
        box-shadow: 0 19px 42px rgba(32, 39, 68, .105);
      }
      .educam-category-pathway__item:nth-child(2):hover {
        box-shadow: 0 23px 50px rgba(32, 39, 68, .22);
      }
    }

    .educam-category-pathway__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 21px;
    }

    .educam-category-pathway__number {
      width: 46px;
      height: 46px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 46px;
      border-radius: 50%;
      background: #f1ede5;
      color: var(--educam-pathway-gold-dark);
      font-size: 13px;
      font-weight: 600;
    }

    .educam-category-pathway__item:nth-child(2) .educam-category-pathway__number {
      background: rgba(255, 255, 255, .11);
      color: var(--educam-gold);
    }

    .educam-category-pathway__arrow {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(32, 39, 68, .42);
    }

    .educam-category-pathway__item:nth-child(2) .educam-category-pathway__arrow {
      color: rgba(255, 255, 255, .55);
    }

    .educam-category-pathway__arrow svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .educam-category-pathway__title {
      margin: 0;
      color: var(--educam-pathway-ink);
      font-size: 19px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -.015em;
    }

    .educam-category-pathway__item:nth-child(2) .educam-category-pathway__title {
      color: var(--educam-white);
    }

    .educam-category-pathway__text {
      margin: 8px 0 0;
      color: var(--educam-muted);
      font-size: 14.5px;
      line-height: 1.58;
    }

    .educam-category-pathway__item:nth-child(2) .educam-category-pathway__text {
      color: rgba(255, 255, 255, .73);
    }

    .educam-category-pathway__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 18px;
    }

    .educam-category-pathway__tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      background: #f4f5f7;
      color: var(--educam-navy);
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.2;
    }

    .educam-category-pathway__item:nth-child(2) .educam-category-pathway__tag {
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .9);
    }

    .educam-category-pathway[data-educam-reveal-ready="true"] [data-educam-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 620ms ease var(--educam-reveal-delay, 0ms), transform 680ms cubic-bezier(.22, 1, .36, 1) var(--educam-reveal-delay, 0ms);
    }

    .educam-category-pathway[data-educam-reveal-ready="true"].is-visible [data-educam-reveal] {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 820px) {
      .educam-category-pathway { padding: 42px 18px; }
      .educam-category-pathway__header { grid-template-columns: 1fr; gap: 11px; }
      .educam-category-pathway__flow { grid-template-columns: 1fr; gap: 12px; }
      .educam-category-pathway__flow::before { display: none; }
      .educam-category-pathway__item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 19px; }
      .educam-category-pathway__top { display: block; margin: 0; }
      .educam-category-pathway__arrow { display: none; }
      .educam-category-pathway__body { min-width: 0; }
      .educam-category-pathway__tags { margin-top: 13px; }
    }

    @media (max-width: 560px) {
      .educam-category-pathway { padding: 34px 14px; }
      .educam-category-pathway__heading { font-size: 21px; line-height: 1.4; }
      .educam-category-pathway__lead { font-size: 14px; line-height: 1.58; }
      .educam-category-pathway__item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 17px; border-radius: 16px; }
      .educam-category-pathway__number { width: 40px; height: 40px; flex-basis: 40px; }
      .educam-category-pathway__title { font-size: 17px; }
      .educam-category-pathway__text { font-size: 13.5px; }
      .educam-category-pathway__tag { min-height: 26px; font-size: 10.8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-category-pathway *, .educam-category-pathway *::before, .educam-category-pathway *::after { transition: none !important; animation: none !important; }
      .educam-category-pathway [data-educam-reveal] { opacity: 1 !important; transform: none !important; }
    }


    .educam-course-slider {

      width: 100%;
      margin: 0;
      padding: clamp(44px, 5.5vw, 70px) clamp(12px, 3vw, 24px);
      overflow: hidden;
      background: var(--educam-white);
      color: var(--educam-course-text);
      font-family: var(--educam-font);
    }

    .educam-course-slider__inner {
      width: min(100%, var(--educam-container));
      margin: 0 auto;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .educam-course-slider__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 22px;
    }

    .educam-course-slider__intro {
      min-width: 0;
      max-width: 720px;
    }

    .educam-course-slider__eyebrow {
      margin: 0 0 7px;
      color: var(--educam-blue);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .educam-course-slider__heading {
      margin: 0;
      color: var(--educam-navy);
      font-size: clamp(23px, 2.5vw, 30px);
      font-weight: 600;
      line-height: 1.34;
      letter-spacing: -0.022em;
    }

    .educam-course-slider__description {
      max-width: 680px;
      margin: 9px 0 0;
      color: var(--educam-course-muted);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.58;
    }

    /* =========================================================
       CONTROLS
    ========================================================= */

    .educam-course-slider__controls {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .educam-course-slider__control {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--educam-course-line);
      border-radius: 50%;
      background: var(--educam-white);
      color: var(--educam-navy);
      cursor: pointer;
      transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        opacity 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .educam-course-slider__control:hover {
      border-color: rgba(1, 113, 220, 0.28);
      background: #f7faff;
      color: var(--educam-blue);
    }

    .educam-course-slider__control:focus-visible {
      outline: 3px solid rgba(1, 113, 220, 0.16);
      outline-offset: 2px;
    }

    .educam-course-slider__control:disabled {
      opacity: 0.28;
      cursor: default;
    }

    .educam-course-slider__control svg {
      width: 17px;
      height: 17px;
      display: block;
    }

    /* =========================================================
       SLIDER
    ========================================================= */

    .educam-course-slider__viewport {
      position: relative;
      width: 100%;
    }

    .educam-course-slider__track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 176px;
      gap: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 8px;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 0;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
      touch-action: pan-x;
    }

    .educam-course-slider__track::-webkit-scrollbar {
      display: none;
    }

    .educam-course-slider__slide {
      min-width: 0;
      scroll-snap-align: start;
    }

    /* =========================================================
       CARD
    ========================================================= */

    .educam-course-slider__card {
      min-width: 0;
      display: block;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    .educam-course-slider__visual {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 14px;
      transition:
        transform 180ms ease,
        filter 180ms ease;
    }

    .educam-course-slider__visual svg {
      width: 88%;
      height: 88%;
      display: block;
      overflow: visible;
    }

    @media (hover: hover) and (pointer: fine) {
      .educam-course-slider__card:hover
      .educam-course-slider__visual {
        transform: translateY(-3px);
        filter: saturate(1.035);
      }
    }

    .educam-course-slider__card:focus-visible {
      outline: none;
    }

    .educam-course-slider__card:focus-visible
    .educam-course-slider__visual {
      outline: 3px solid rgba(1, 113, 220, 0.18);
      outline-offset: 3px;
    }

    /* =========================================================
       NUMBER LINE ART
    ========================================================= */

    .educam-course-slider__art {
      fill: none;
      stroke: rgba(32, 39, 68, 0.36);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .educam-course-slider__art--soft {
      stroke: rgba(32, 39, 68, 0.16);
    }

    .educam-course-slider__art--fine {
      stroke-width: 3;
    }

    .educam-course-slider__art--dash {
      stroke-dasharray: 16 10;
    }

    /* =========================================================
       PREMIUM PASTEL COLORS
    ========================================================= */

    .educam-course-slider__visual--mist {
      background: #c8dce6;
    }

    .educam-course-slider__visual--clay {
      background: #e4c7c0;
    }

    .educam-course-slider__visual--periwinkle {
      background: #c8cde0;
    }

    .educam-course-slider__visual--rose {
      background: #e4c7d2;
    }

    .educam-course-slider__visual--sand {
      background: #e5d2ae;
    }

    .educam-course-slider__visual--sage {
      background: #c3d4cb;
    }

    .educam-course-slider__visual--lilac {
      background: #d1cadc;
    }

    /* =========================================================
       IGCSE TAG
    ========================================================= */

    .educam-course-slider__visual-tag {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 2;
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      color: rgba(32, 39, 68, 0.76);
      font-size: 9px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.045em;
      text-transform: uppercase;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    /* =========================================================
       CARD CONTENT
    ========================================================= */

    .educam-course-slider__content {
      min-width: 0;
      padding-top: 10px;
    }

    .educam-course-slider__name {
      margin: 0;
      color: var(--educam-course-text);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.42;
      letter-spacing: -0.008em;
    }

    .educam-course-slider__summary {
      margin: 3px 0 0;
      color: var(--educam-course-muted);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.48;
    }

    /* =========================================================
       REVEAL ANIMATION
    ========================================================= */

    .educam-course-slider.is-reveal-ready
    .educam-course-slider__header {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 620ms ease,
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .educam-course-slider.is-reveal-ready
    .educam-course-slider__header.is-visible {
      opacity: 1;
      transform: none;
    }

    .educam-course-slider.is-reveal-ready
    .educam-course-slider__slide {
      opacity: 0;
      transform: translateY(22px) scale(0.975);
      transition:
        opacity 580ms ease var(--ecs-item-delay, 0ms),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1)
        var(--ecs-item-delay, 0ms);
    }

    .educam-course-slider.is-reveal-ready
    .educam-course-slider__slide.is-visible {
      opacity: 1;
      transform: none;
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1024px) {
      .educam-course-slider {
        padding: 40px 18px;
      }

      .educam-course-slider__track {
        grid-auto-columns: 166px;
        gap: 13px;
      }

      .educam-course-slider__visual {
        border-radius: 13px;
      }
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 640px) {
      .educam-course-slider {
        padding: 32px 12px;
      }

      .educam-course-slider__header {
        display: block;
        margin-bottom: 18px;
      }

      .educam-course-slider__eyebrow {
        margin-bottom: 5px;
        font-size: 12px;
      }

      .educam-course-slider__heading {
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: -0.018em;
      }

      .educam-course-slider__description {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.52;
      }

      .educam-course-slider__controls {
        display: none;
      }

      .educam-course-slider__track {
        grid-auto-columns: min(42vw, 158px);
        gap: 12px;
        margin-right: -12px;
        padding-right: 12px;
      }

      .educam-course-slider__visual {
        border-radius: 12px;
      }

      .educam-course-slider__content {
        padding-top: 8px;
      }

      .educam-course-slider__name {
        font-size: 14.5px;
        line-height: 1.42;
      }

      .educam-course-slider__summary {
        margin-top: 2px;
        font-size: 12.5px;
        line-height: 1.44;
      }

      .educam-course-slider__visual-tag {
        right: 8px;
        bottom: 8px;
        min-height: 20px;
        padding: 4px 7px;
        font-size: 8px;
      }

      .educam-course-slider.is-reveal-ready
      .educam-course-slider__slide {
        transform: translateY(16px) scale(0.985);
      }
    }

    @media (max-width: 370px) {
      .educam-course-slider__track {
        grid-auto-columns: 45vw;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-course-slider *,
      .educam-course-slider *::before,
      .educam-course-slider *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }

      .educam-course-slider__header,
      .educam-course-slider__slide {
        opacity: 1 !important;
        transform: none !important;
      }
    }


    .educam-category-study-modes {
      width: 100%;
      margin: 0;
      padding: clamp(46px, 6vw, 76px) clamp(16px, 3vw, 24px);
      overflow: hidden;
      background: var(--educam-white);
      color: var(--educam-navy);
      font-family: var(--educam-font);
    }

    .educam-category-study-modes__stage {
      width: min(100%, var(--educam-container));
      margin: 0 auto;
      padding: clamp(25px, 3.2vw, 38px);
      border-radius: 26px;
      background: var(--educam-navy);
    }

    .educam-category-study-modes__header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 24px;
    }

    .educam-category-study-modes__copy { min-width: 0; max-width: 720px; }

    .educam-category-study-modes__eyebrow {
      margin: 0 0 7px;
      color: var(--educam-gold);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .educam-category-study-modes__heading {
      margin: 0;
      color: var(--educam-white);
      font-size: clamp(23px, 2.5vw, 30px);
      font-weight: 600;
      line-height: 1.32;
      letter-spacing: -.024em;
    }

    .educam-category-study-modes__note {
      max-width: 330px;
      margin: 0;
      color: rgba(255, 255, 255, .65);
      font-size: 13.5px;
      line-height: 1.55;
      text-align: right;
    }

    .educam-category-study-modes__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .educam-category-study-modes__card {
      min-width: 0;
      min-height: 188px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-radius: 17px;
      background: var(--educam-white);
      color: var(--educam-navy);
      transition: transform 190ms ease, box-shadow 190ms ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .educam-category-study-modes__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px rgba(7, 11, 26, .18);
      }
    }

    .educam-category-study-modes__icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      border-radius: 11px;
      background: #f3f1ec;
      color: #9d743c;
    }

    .educam-category-study-modes__icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .educam-category-study-modes__title {
      margin: 0;
      color: var(--educam-navy);
      font-size: 17px;
      font-weight: 600;
      line-height: 1.38;
    }

    .educam-category-study-modes__text {
      margin: 7px 0 0;
      color: var(--educam-muted);
      font-size: 13.5px;
      line-height: 1.55;
    }

    .educam-category-study-modes__meta {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: auto;
      padding-top: 17px;
      color: var(--educam-blue);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.3;
    }

    .educam-category-study-modes__meta::before {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: currentColor;
      content: "";
    }

    .educam-category-study-modes[data-educam-reveal-ready="true"] [data-educam-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 600ms ease var(--educam-reveal-delay, 0ms), transform 660ms cubic-bezier(.22, 1, .36, 1) var(--educam-reveal-delay, 0ms);
    }

    .educam-category-study-modes[data-educam-reveal-ready="true"].is-visible [data-educam-reveal] {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 960px) {
      .educam-category-study-modes { padding: 42px 18px; }
      .educam-category-study-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .educam-category-study-modes__card { min-height: 174px; }
    }

    @media (max-width: 620px) {
      .educam-category-study-modes { padding: 34px 12px; }
      .educam-category-study-modes__stage { padding: 22px 14px 14px; border-radius: 21px; }
      .educam-category-study-modes__header { display: block; margin-bottom: 18px; padding-inline: 3px; }
      .educam-category-study-modes__heading { font-size: 21px; line-height: 1.4; }
      .educam-category-study-modes__note { max-width: none; margin-top: 8px; font-size: 13px; text-align: left; }
      .educam-category-study-modes__grid {
        grid-auto-flow: column;
        grid-auto-columns: min(76vw, 276px);
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        margin-right: -14px;
        padding: 1px 14px 8px 1px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      .educam-category-study-modes__grid::-webkit-scrollbar { display: none; }
      .educam-category-study-modes__card { min-height: 176px; padding: 18px; scroll-snap-align: start; }
      .educam-category-study-modes__icon { margin-bottom: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-category-study-modes *, .educam-category-study-modes *::before, .educam-category-study-modes *::after { transition: none !important; animation: none !important; }
      .educam-category-study-modes [data-educam-reveal] { opacity: 1 !important; transform: none !important; }
    }

/* =========================================================
   EDUCAM — VINH DANH HỌC VIÊN (STANDALONE)
   Chuẩn hoá từ section nguồn, giữ bố cục masonry và hành vi gốc.
========================================================= */


#educam-proof-wall {

  width: 100%;
  max-width: none;
  min-height: 1px;
  margin: 0;
  padding: clamp(48px, 6vw, 76px) clamp(16px, 3vw, 24px) clamp(54px, 7vw, 84px);
  overflow: visible;
  background: #ffffff;
  color: var(--educam-navy);
  font-family: var(--educam-font);
}

#educam-proof-wall > .educam-proof__masonry,
#educam-proof-wall > .educam-proof__load-more-wrap {
  width: min(100%, var(--educam-container));
  margin-inline: auto;
}

#educam-proof-wall :where(button, a) {
  font: inherit;
}

#educam-proof-wall :where(button) {
  border: 0;
}

#educam-proof-wall :where(img) {
  display: block;
  max-width: 100%;
}

#educam-proof-wall .educam-proof__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  color: var(--educam-gold-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#educam-proof-wall .educam-proof__eyebrow::before {
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--educam-gold);
  content: "";
}

#educam-proof-wall :where(.educam-proof__load-more, .educam-proof-cta__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#educam-proof-wall :where(
  .educam-proof__title,
  .educam-proof__lead,
  .educam-proof-info__title,
  .educam-proof-info__text,
  .educam-proof-video__title,
  .educam-proof-video__text,
  .educam-proof-cta__title,
  .educam-proof-cta__text
) {
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: auto;
}

/* =========================================================
   04. PROOF WALL
========================================================= */
#educam-proof-wall .educam-proof__masonry {
  --educam-proof-columns: 4;
  --educam-proof-gap: 18px;
  --educam-proof-row: 8px;

  display: grid;
  grid-template-columns: repeat(var(--educam-proof-columns), minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: var(--educam-proof-row);
  gap: var(--educam-proof-gap);
  align-items: start;
}

#educam-proof-wall .educam-proof-pin {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--educam-white);
  box-shadow: 0 10px 28px rgba(32, 39, 68, .07);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 180ms ease;
}

#educam-proof-wall .educam-proof-pin.is-visible {
  opacity: 1;
  transform: none;
}

#educam-proof-wall .educam-proof__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 42px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease 160ms, transform 520ms cubic-bezier(.22, 1, .36, 1) 160ms;
}

#educam-proof-wall.is-revealed .educam-proof__load-more-wrap {
  opacity: 1;
  transform: none;
}

#educam-proof-wall .educam-proof-pin:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(32, 39, 68, .11);
}

#educam-proof-wall .educam-proof-pin[hidden] { display: none; }
#educam-proof-wall .educam-proof-pin[data-column-span="2"] { grid-column: span 2; }

#educam-proof-wall .educam-proof-intro {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px clamp(26px, 4vw, 54px) 14px 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#educam-proof-wall .educam-proof-intro:hover {
  transform: none;
  box-shadow: none;
}

#educam-proof-wall .educam-proof__title {
  width: 100%;
  margin: 0;
  color: var(--educam-navy);
  font-size: clamp(24px, 2.55vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.024em;
}

#educam-proof-wall .educam-proof__lead {
  width: 100%;
  margin: 13px 0 0;
  color: var(--educam-text-secondary);
  font-size: 15.5px;
  line-height: 1.6;
}

#educam-proof-wall .educam-proof-image {
  width: 100%;
  margin: 0;
  background: #f1f2f4;
}

#educam-proof-wall .educam-proof-image__button,
#educam-proof-wall .educam-proof-video__button {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

#educam-proof-wall .educam-proof-image__button {
  background: transparent;
  cursor: zoom-in;
}

#educam-proof-wall :where(.educam-proof-image__button, .educam-proof-video__button):focus-visible {
  outline: 2px solid var(--educam-gold);
  outline-offset: -3px;
}

#educam-proof-wall .educam-proof-image img {
  width: 100%;
  height: auto;
  background: #f1f2f4;
  transition: transform 260ms ease;
}

#educam-proof-wall .educam-proof-image:hover img { transform: scale(1.015); }

#educam-proof-wall .educam-proof-info {
  padding: clamp(22px, 2.6vw, 30px);
}

#educam-proof-wall .educam-proof-info--navy { background: var(--educam-navy); color: var(--educam-white); }
#educam-proof-wall .educam-proof-info--soft { background: #f5f6f8; }
#educam-proof-wall .educam-proof-info--cream { background: var(--educam-cream); }
#educam-proof-wall .educam-proof-info--gold-soft { background: var(--educam-gold-soft); }

#educam-proof-wall .educam-proof-info__eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--educam-gold-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#educam-proof-wall .educam-proof-info--navy .educam-proof-info__eyebrow { color: var(--educam-gold); }

#educam-proof-wall .educam-proof-info__value {
  display: block;
  margin: 0 0 16px;
  color: var(--educam-gold);
  font-size: clamp(45px, 4.5vw, 66px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -1.6px;
}

#educam-proof-wall .educam-proof-info__title {
  margin: 0;
  color: var(--educam-navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.3px;
}

#educam-proof-wall .educam-proof-info--navy .educam-proof-info__title { color: var(--educam-white); }

#educam-proof-wall .educam-proof-info__text {
  margin: 11px 0 0;
  color: var(--educam-text-secondary);
  font-size: 14px;
  line-height: 1.58;
}

#educam-proof-wall .educam-proof-info--navy .educam-proof-info__text { color: rgba(255, 255, 255, .8); }

#educam-proof-wall .educam-proof-info__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(205, 166, 102, .17);
  color: var(--educam-gold-dark);
}

#educam-proof-wall .educam-proof-info--navy .educam-proof-info__icon {
  background: rgba(255, 255, 255, .11);
  color: var(--educam-gold);
}

#educam-proof-wall .educam-proof-info__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#educam-proof-wall .educam-proof-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

#educam-proof-wall .educam-proof-list li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  color: var(--educam-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

#educam-proof-wall .educam-proof-list__number {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--educam-navy);
  color: var(--educam-white);
  font-size: 10px;
  font-weight: 600;
}

#educam-proof-wall .educam-proof-quote__mark {
  display: block;
  height: 32px;
  margin-bottom: 12px;
  color: var(--educam-gold);
  font-size: 56px;
  font-weight: 600;
  line-height: .85;
}

#educam-proof-wall .educam-proof-quote__text {
  margin: 0;
  color: var(--educam-white);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.35px;
}

#educam-proof-wall .educam-proof-quote__foot {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .73);
  font-size: 13px;
  line-height: 1.5;
}

#educam-proof-wall .educam-proof-video { background: var(--educam-navy); }

#educam-proof-wall .educam-proof-video__button {
  position: relative;
  overflow: hidden;
  background: var(--educam-navy);
  color: var(--educam-white);
  text-align: left;
  cursor: pointer;
}

#educam-proof-wall .educam-proof-video__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9ebef;
}

#educam-proof-wall .educam-proof-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

#educam-proof-wall .educam-proof-video:hover .educam-proof-video__thumb img { transform: scale(1.025); }

#educam-proof-wall .educam-proof-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(32, 39, 68, .92);
  color: var(--educam-white);
  box-shadow: 0 12px 30px rgba(10, 15, 30, .22);
  transform: translate(-50%, -50%);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

#educam-proof-wall .educam-proof-video:hover .educam-proof-video__play {
  background: var(--educam-gold);
  color: var(--educam-navy);
  transform: translate(-50%, -50%) scale(1.06);
}

#educam-proof-wall .educam-proof-video__play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  fill: currentColor;
}

#educam-proof-wall .educam-proof-video__content { padding: 18px 19px 20px; }

#educam-proof-wall .educam-proof-video__meta {
  display: block;
  margin-bottom: 6px;
  color: var(--educam-gold);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#educam-proof-wall .educam-proof-video__title {
  margin: 0;
  color: var(--educam-white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
}

#educam-proof-wall .educam-proof-video__text {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  line-height: 1.55;
}

#educam-proof-wall .educam-proof__load-more {
  min-height: 48px;
  gap: 10px;
  margin: 0;
  padding: 0 26px;
  background: var(--educam-navy);
  color: var(--educam-white);
  box-shadow: 0 10px 24px rgba(32, 39, 68, .14);
  font-size: 14px;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#educam-proof-wall .educam-proof__load-more:hover,
#educam-proof-wall .educam-proof__load-more:focus-visible {
  background: var(--educam-gold);
  color: var(--educam-navy);
  box-shadow: 0 12px 28px rgba(169, 127, 67, .22);
  transform: translateY(-1px);
}

#educam-proof-wall .educam-proof__load-more:focus-visible {
  outline: 2px solid var(--educam-gold-dark);
  outline-offset: 3px;
}

#educam-proof-wall .educam-proof__load-more[hidden] { display: none; }

#educam-proof-wall .educam-proof__load-more svg,
#educam-proof-wall .educam-proof-cta__button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#educam-proof-wall .educam-proof-cta {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 38px);
  background: var(--educam-navy);
}

#educam-proof-wall .educam-proof-cta__title {
  margin: 0;
  color: var(--educam-white);
  font-size: clamp(23px, 2.55vw, 30px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.5px;
}

#educam-proof-wall .educam-proof-cta__text {
  margin: 13px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  line-height: 1.62;
}

#educam-proof-wall .educam-proof-cta__button {
  width: fit-content;
  min-height: 46px;
  gap: 9px;
  margin-top: 22px;
  padding: 0 22px;
  background: var(--educam-gold);
  color: var(--educam-navy);
  font-size: 14px;
  line-height: 1;
  transition: background-color 180ms ease, transform 180ms ease;
}

#educam-proof-wall .educam-proof-cta__button:hover,
#educam-proof-wall .educam-proof-cta__button:focus-visible {
  background: var(--educam-white);
  color: var(--educam-navy);
  transform: translateY(-1px);
}

#educam-proof-wall .educam-proof-cta__button:focus-visible {
  outline: 2px solid var(--educam-gold);
  outline-offset: 3px;
}

/* Proof modal */
#educam-proof-wall .educam-proof-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  visibility: hidden;
  place-items: center;
  padding: 24px;
  background: rgba(12, 16, 28, .84);
  opacity: 0;
  transition: opacity 180ms ease, visibility 180ms ease;
}

#educam-proof-wall .educam-proof-modal.is-open {
  visibility: visible;
  opacity: 1;
}

#educam-proof-wall .educam-proof-modal__dialog {
  position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 20px;
  background: #11151f;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
  transform: translateY(12px);
  transition: transform 180ms ease;
}

#educam-proof-wall .educam-proof-modal.is-open .educam-proof-modal__dialog { transform: none; }

#educam-proof-wall .educam-proof-modal__media {
  width: 100%;
  max-height: 90vh;
  display: grid;
  place-items: center;
  overflow: auto;
}

#educam-proof-wall .educam-proof-modal__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
}

#educam-proof-wall .educam-proof-modal__video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

#educam-proof-wall .educam-proof-modal__video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

#educam-proof-wall .educam-proof-modal__close {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #111;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

#educam-proof-wall .educam-proof-modal__close:hover {
  background: var(--educam-gold);
  color: var(--educam-navy);
}

#educam-proof-wall .educam-proof-modal__close:focus-visible {
  outline: 2px solid var(--educam-gold);
  outline-offset: 3px;
}

#educam-proof-wall .educam-proof-modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

body.educam-proof-modal-open { overflow: hidden; }

/* Responsive riêng cho section Vinh danh */
@media (min-width: 768px) and (max-width: 1180px) {
  #educam-proof-wall > .educam-proof__masonry,
  #educam-proof-wall > .educam-proof__load-more-wrap {
    width: 100%;
  }

  #educam-proof-wall .educam-proof__masonry {
    --educam-proof-columns: 3;
    --educam-proof-gap: 16px;
  }

  #educam-proof-wall .educam-proof__title {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.45px;
  }
}

@media (max-width: 767px) {
  #educam-proof-wall {
    padding: 44px 16px 62px;
  }

  #educam-proof-wall .educam-proof__masonry {
    --educam-proof-columns: 2;
    --educam-proof-gap: 12px;
    --educam-proof-row: 6px;
  }

  #educam-proof-wall .educam-proof-pin {
    border-radius: 15px;
  }

  #educam-proof-wall .educam-proof-intro {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0 0 16px;
  }

  #educam-proof-wall .educam-proof__title {
    font-size: 26px;
    line-height: 1.32;
    letter-spacing: -.4px;
  }

  #educam-proof-wall .educam-proof__lead {
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.58;
  }

  #educam-proof-wall .educam-proof-info {
    padding: 18px;
  }

  #educam-proof-wall .educam-proof-info__value {
    font-size: 42px;
  }

  #educam-proof-wall .educam-proof-info__title {
    font-size: 18px;
    line-height: 1.34;
  }

  #educam-proof-wall .educam-proof-info__text {
    font-size: 13.5px;
    line-height: 1.56;
  }

  #educam-proof-wall .educam-proof-quote__text {
    font-size: 17px;
  }

  #educam-proof-wall .educam-proof-video__content {
    padding: 14px;
  }

  #educam-proof-wall .educam-proof-video__title {
    font-size: 15px;
  }

  #educam-proof-wall .educam-proof-video__text {
    display: none;
  }

  #educam-proof-wall .educam-proof-video__play {
    width: 44px;
    height: 44px;
  }

  #educam-proof-wall .educam-proof-cta {
    grid-column: 1 / -1;
    min-height: 0;
  }

  #educam-proof-wall .educam-proof__load-more-wrap {
    margin-top: 28px;
  }

  #educam-proof-wall .educam-proof__load-more {
    width: 100%;
  }

  #educam-proof-wall .educam-proof-modal {
    padding: 12px;
  }
}

@media (max-width: 390px) {
  #educam-proof-wall {
    padding-inline: 14px;
  }

  #educam-proof-wall .educam-proof__masonry {
    --educam-proof-gap: 10px;
  }

  #educam-proof-wall .educam-proof-info {
    padding: 15px;
  }

  #educam-proof-wall .educam-proof-info__value {
    font-size: 37px;
  }

  #educam-proof-wall .educam-proof-info__title {
    font-size: 16px;
  }

  #educam-proof-wall .educam-proof__title {
    font-size: 24px;
    line-height: 1.3;
  }

  #educam-proof-wall .educam-proof__lead {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #educam-proof-wall *,
  #educam-proof-wall *::before,
  #educam-proof-wall *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  #educam-proof-wall .educam-proof__load-more-wrap {
    opacity: 1 !important;
    transform: none !important;
  }
}


    .educam-category-final-cta {
      width: 100%;
      margin: 0;
      padding: clamp(34px, 5vw, 58px) clamp(16px, 3vw, 24px) clamp(50px, 7vw, 82px);
      background: #ffffff;
      color: var(--educam-navy);
      font-family: var(--educam-font);
    }

    .educam-category-final-cta__box {
      position: relative;
      width: min(100%, var(--educam-container));
      min-height: 250px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(28px, 5vw, 76px);
      margin: 0 auto;
      padding: clamp(30px, 4.5vw, 54px);
      overflow: hidden;
      border-radius: 26px;
      background: var(--educam-navy);
      isolation: isolate;
    }

    .educam-category-final-cta__box::after {
      position: absolute;
      z-index: -1;
      top: -150px;
      right: -100px;
      width: 340px;
      height: 340px;
      border: 1px solid rgba(205, 166, 102, .24);
      border-radius: 50%;
      content: "";
    }

    .educam-category-final-cta__copy { min-width: 0; max-width: 700px; }

    .educam-category-final-cta__eyebrow {
      margin: 0 0 8px;
      color: var(--educam-gold);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .educam-category-final-cta__heading {
      margin: 0;
      color: var(--educam-white);
      font-size: clamp(24px, 2.55vw, 30px);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -.03em;
    }

    .educam-category-final-cta__text {
      max-width: 620px;
      margin: 12px 0 0;
      color: rgba(255, 255, 255, .72);
      font-size: 15px;
      line-height: 1.62;
    }

    .educam-category-final-cta__actions {
      min-width: 235px;
      display: grid;
      gap: 10px;
    }

    .educam-category-final-cta__button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 22px;
      border: 1px solid transparent;
      border-radius: 9px;
      font-size: 14.5px;
      font-weight: 500;
      line-height: 1.25;
      text-align: center;
      text-decoration: none;
      transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease, transform 170ms ease;
    }

    .educam-category-final-cta__button--primary {
      background: var(--educam-blue);
      color: var(--educam-white);
    }

    .educam-category-final-cta__button--primary:hover,
    .educam-category-final-cta__button--primary:focus-visible {
      background: var(--educam-blue-hover);
      color: var(--educam-white);
      transform: translateY(-1px);
    }

    .educam-category-final-cta__button--secondary {
      border-color: rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .06);
      color: var(--educam-white);
    }

    .educam-category-final-cta__button--secondary:hover,
    .educam-category-final-cta__button--secondary:focus-visible {
      border-color: rgba(255, 255, 255, .45);
      background: rgba(255, 255, 255, .11);
      color: var(--educam-white);
    }

    .educam-category-final-cta__button:focus-visible {
      outline: 3px solid rgba(205, 166, 102, .34);
      outline-offset: 3px;
    }

    .educam-category-final-cta__button svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .educam-category-final-cta__reassurance {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin: -10px 0 0;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .11);
      color: rgba(255, 255, 255, .62);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .educam-category-final-cta__reassurance span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .educam-category-final-cta__reassurance span::before {
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--educam-gold);
      content: "";
    }

    .educam-category-final-cta[data-educam-reveal-ready="true"] [data-educam-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 620ms ease, transform 680ms cubic-bezier(.22, 1, .36, 1);
    }

    .educam-category-final-cta[data-educam-reveal-ready="true"].is-visible [data-educam-reveal] {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 760px) {
      .educam-category-final-cta { padding: 32px 14px 54px; }
      .educam-category-final-cta__box { grid-template-columns: 1fr; gap: 23px; min-height: 0; padding: 28px 22px; border-radius: 21px; }
      .educam-category-final-cta__actions { min-width: 0; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .educam-category-final-cta__reassurance { margin-top: 0; }
    }

    @media (max-width: 500px) {
      .educam-category-final-cta__heading { font-size: 22px; line-height: 1.36; }
      .educam-category-final-cta__text { font-size: 14px; }
      .educam-category-final-cta__actions { grid-template-columns: 1fr; }
      .educam-category-final-cta__button { width: 100%; }
      .educam-category-final-cta__reassurance { display: grid; gap: 8px; font-size: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .educam-category-final-cta *, .educam-category-final-cta *::before, .educam-category-final-cta *::after { transition: none !important; animation: none !important; }
      .educam-category-final-cta [data-educam-reveal] { opacity: 1 !important; transform: none !important; }
    }