@font-face {
      font-family: "VNG Open Sans";
      src: url("../../assets/fonts/OpenSans-Regular.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "VNG Open Sans";
      src: url("../../assets/fonts/OpenSans-SemiBold.ttf") format("truetype");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "VNG Open Sans";
      src: url("../../assets/fonts/OpenSans-Bold.ttf") format("truetype");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --vng-bg: #f2f1f5;
      --vng-white: #ffffff;
      --vng-text: #2f2f3a;
      --vng-muted: #68637a;
      --vng-purple: #533087;
      --vng-purple-2: #6b49a7;
      --vng-purple-soft: #e8e2f3;
      --vng-purple-soft-2: #f1ecf8;
      --vng-teal: #2e8d90;
      --vng-teal-soft: #deedf0;
      --vng-line: #7d59bc;
      --vng-border: rgba(83, 48, 135, 0.16);
      --vng-shadow: 0 10px 28px rgba(44, 26, 78, 0.10);
      --vng-radius: 12px;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    }

    html {
      margin: 0;
      padding: 0;
    }

    body.page-evaluation {
      margin: 0;
      overflow-x: hidden;
    }

    .evaluation-main {
      padding-top: 28px;
      padding-bottom: 40px;
      background: var(--vng-bg);
      color: var(--vng-text);
      font-family: "VNG Open Sans", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .report-shell {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 22px;
    }

    .report-section {
      margin-bottom: 26px;
      background: var(--vng-white);
      border-radius: var(--vng-radius);
      border: 1px solid var(--vng-border);
      box-shadow: var(--vng-shadow);
      overflow: hidden;
    }

    .opening-hero {
      min-height: auto;
      display: block;
    }

    .opening-hero .section-inner {
      width: min(100%, 980px);
      margin: 0 auto;
      padding-top: 8px;
      padding-bottom: 10px;
    }

    .section-inner {
      padding: 26px 30px;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 4px;
      text-align: center;
    }

    .brand-lockup h1 {
      margin: 0;
      font-size: clamp(1.75rem, 3vw, 3.35rem);
      font-weight: 700;
      line-height: 1;
      color: #101014;
    }

    .brand-lockup .tm {
      font-size: 0.34em;
      vertical-align: top;
      margin-left: 2px;
    }

    .brand-mark {
      width: 800px;
      object-fit: contain;
      filter: drop-shadow(0 6px 12px rgba(67, 36, 110, 0.18));
    }

    .hero-band {
      background: transparent;
      color: #101014;
      text-align: center;
    }

    .hero-band-main {
      padding: 2px 4px 1px;
    }

    .hero-band-main h2 {
      margin: 0;
      font-size: clamp(1.65rem, 3vw, 2.45rem);
      font-weight: 700;
    }

    .hero-band-main p {
      margin: 2px 0 0;
      font-size: clamp(0.95rem, 1.65vw, 1.08rem);
      font-style: italic;
      color: #101014;
    }

    .hero-band-bottom {
      padding: 2px 4px 0;
      font-size: clamp(0.96rem, 1.45vw, 1.08rem);
      font-weight: 600;
      color: #101014;
    }

    .section-kicker {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.32em;
      color: var(--vng-purple);
      font-size: 1.18rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .kicker-line {
      margin-top: 8px;
      border-top: 3px solid rgba(125, 89, 188, 0.58);
    }

    .findings-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 2.2fr 1fr;
      gap: 16px;
      align-items: start;
    }

    .findings-note {
      color: var(--vng-purple);
      font-size: 1.06rem;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.26;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .metric-card {
      background: var(--vng-purple-soft-2);
      border: 1px solid rgba(83, 48, 135, 0.10);
      border-radius: 0;
      padding: 16px 14px 12px;
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      transition: transform 0.58s var(--ease-out), box-shadow 0.58s var(--ease-out);
    }

    .metric-card.wide {
      grid-column: span 3;
    }

    .metric-card.third {
      grid-column: span 2;
    }

    .metric-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(68, 42, 110, 0.12);
    }

    .metric-percent {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 2px;
      margin-bottom: 6px;
      color: var(--vng-purple);
      font-size: clamp(2.15rem, 2.8vw, 2.75rem);
      font-weight: 700;
      line-height: 1;
    }

    .metric-percent .percent-sign {
      font-size: 0.58em;
    }

    .metric-label {
      margin: 0;
      color: #4d4b5c;
      font-size: 0.96rem;
      line-height: 1.3;
    }

    .pd-box {
      background: var(--vng-teal-soft);
      border: 1px solid rgba(46, 141, 144, 0.22);
      border-radius: 0;
      padding: 16px 16px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 280px;
    }

    .pd-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: start;
    }

    .pd-title {
      margin: 0;
      color: var(--vng-teal);
      font-size: 1.06rem;
      font-weight: 700;
      line-height: 1.25;
    }

    .pd-box .metric-percent {
      color: var(--vng-teal);
      justify-content: center;
      font-size: clamp(2.2rem, 3vw, 2.9rem);
      margin-bottom: 8px;
    }

    .pd-detail {
      margin: 0;
      color: #4d6467;
      font-size: 0.96rem;
      line-height: 1.34;
      text-align: center;
    }

    .flow-wrap {
      margin-top: 16px;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: stretch;
      gap: 10px;
    }

    .flow-card {
      min-height: 112px;
      border-radius: 0;
      padding: 16px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      opacity: 0;
      transform: translateY(16px);
      transition: transform 1.3s var(--ease-out), opacity 1.3s var(--ease-out);
    }

    .flow-card.flow-purple {
      background: linear-gradient(180deg, #59358f 0%, #4b2c7d 100%);
    }

    .flow-card.flow-mid {
      background: linear-gradient(180deg, #6b49a7 0%, #5a3b90 100%);
    }

    .flow-card.flow-teal {
      background: linear-gradient(180deg, #2f8f93 0%, #247579 100%);
    }

    .flow-card h3 {
      margin: 0 0 8px;
      font-size: 1.36rem;
      font-weight: 700;
    }

    .flow-card p {
      margin: 0;
      font-size: 0.96rem;
      font-style: italic;
      line-height: 1.28;
      opacity: 0.97;
    }

    .flow-arrow {
      align-self: center;
      color: var(--vng-purple-2);
      font-size: 2.15rem;
      font-weight: 700;
      opacity: 0;
      transform: scale(0.84);
      transition: transform 1.12s var(--ease-out), opacity 1.12s var(--ease-out);
    }

    .flow-row.is-visible .flow-card,
    .flow-row.is-visible .flow-arrow {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .flow-row.is-visible .flow-card:nth-child(1) { transition-delay: 0.18s; }
    .flow-row.is-visible .flow-arrow:nth-child(2) { transition-delay: 0.42s; }
    .flow-row.is-visible .flow-card:nth-child(3) { transition-delay: 0.66s; }
    .flow-row.is-visible .flow-arrow:nth-child(4) { transition-delay: 0.90s; }
    .flow-row.is-visible .flow-card:nth-child(5) { transition-delay: 1.14s; }

    .pathway-note {
      margin: 14px 0 0;
      color: #6a667d;
      font-style: italic;
      font-size: 0.97rem;
      line-height: 1.38;
    }

    .impact-intro {
      margin-top: 14px;
      color: #4c4a5d;
      font-size: 1.04rem;
      line-height: 1.42;
    }

    .impact-board {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .comparison-legend {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }

    .legend-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(83, 48, 135, 0.12);
      font-weight: 700;
      font-size: 0.92rem;
      color: #5d5870;
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex: 0 0 12px;
    }

    .legend-dot.low {
      background: linear-gradient(90deg, #bcaadf 0%, #8b6bc2 100%);
    }

    .legend-dot.high {
      background: linear-gradient(90deg, #6ed5d8 0%, #2e8d90 100%);
    }

    .comparison-row {
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(83, 48, 135, 0.10);
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 10px 24px rgba(86, 52, 147, 0.08);
      opacity: 0;
      transform: translateY(16px);
      transition: transform 0.82s var(--ease-out), opacity 0.82s var(--ease-out), box-shadow 0.55s var(--ease-out);
    }

    .comparison-row:hover {
      box-shadow: 0 14px 26px rgba(86, 52, 147, 0.12);
    }

    .comparison-row.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .comparison-label {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--vng-purple);
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .comparison-track-wrap {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
    }

    .compare-side {
      background: linear-gradient(180deg, rgba(241,236,248,0.94), rgba(255,255,255,0.96));
      border-radius: 10px;
      padding: 14px;
      transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
    }

    .compare-side.low {
      opacity: 0;
      transform: translateX(-18px);
    }

    .compare-side.high {
      opacity: 0;
      transform: translateX(18px);
      background: linear-gradient(180deg, rgba(222,237,240,0.96), rgba(255,255,255,0.96));
    }

    .comparison-row.is-visible .compare-side.low,
    .comparison-row.is-visible .compare-side.high {
      opacity: 1;
      transform: translateX(0);
    }

    .compare-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .compare-title {
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #777089;
    }

    .compare-side.high .compare-title {
      color: #2d7f82;
    }

    .compare-value {
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1;
      color: var(--vng-purple);
    }

    .compare-side.high .compare-value {
      color: var(--vng-teal);
    }

    .compare-track {
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(83, 48, 135, 0.12);
    }

    .compare-side.high .compare-track {
      background: rgba(46, 141, 144, 0.16);
    }

    .bar-fill {
      height: 100%;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.7s var(--ease-out);
      border-radius: inherit;
    }

    .bar-fill.low {
      background: linear-gradient(90deg, #aa94cf 0%, #533087 100%);
    }

    .bar-fill.high {
      background: linear-gradient(90deg, #69d5d8 0%, #2e8d90 100%);
    }

    .comparison-row.is-visible .bar-fill {
      transform: scaleX(1);
    }

    .compare-arrow-col {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 52px;
      color: var(--vng-purple);
      font-size: 1.95rem;
      opacity: 0;
      transform: scale(0.86);
      transition: opacity 0.72s var(--ease-out) 0.22s, transform 0.72s var(--ease-out) 0.22s;
    }

    .comparison-row.is-visible .compare-arrow-col {
      opacity: 1;
      transform: scale(1);
    }

    .implementation-head {
      background: var(--vng-purple);
      color: #fff;
      text-align: center;
      padding: 13px 16px 11px;
    }

    .implementation-head h2 {
      margin: 0;
      font-size: clamp(1.35rem, 2.25vw, 1.92rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .implementation-head p {
      margin: 4px 0 0;
      font-size: 0.98rem;
      font-style: italic;
      color: #d8cbef;
    }

    .impl-grid {
      margin-top: 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .impl-box {
      border-radius: 0;
      background: #fff;
      border: 1px solid rgba(95, 63, 152, 0.24);
      padding: 16px 18px;
    }

    .impl-box.soft {
      background: var(--vng-purple-soft-2);
    }

    .impl-box h3 {
      margin: 0 0 10px;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--vng-purple);
    }

    .impl-box ul {
      margin: 0;
      padding-left: 22px;
      color: #4d4a5e;
      font-size: 1.02rem;
      line-height: 1.45;
    }

    .impl-note {
      margin-top: 12px;
      color: #6e6882;
      font-size: 0.97rem;
      font-style: italic;
      line-height: 1.38;
    }

    .quotes-grid {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 10px;
    }

    .quote-card {
      background: var(--vng-purple-soft-2);
      border-left: 4px solid #7e59bd;
      color: #57536a;
      font-style: italic;
      padding: 14px 16px;
      border-radius: 0;
      line-height: 1.36;
    }

    .quote-card p {
      margin: 0;
      font-size: 1rem;
    }

    .quote-card cite {
      margin-top: 7px;
      display: block;
      color: #6751a1;
      font-style: normal;
      font-weight: 700;
      font-size: 0.98rem;
    }

    .quote-card.half {
      grid-column: span 6;
    }

    .quote-card.full {
      grid-column: span 12;
    }

    .quote-card.teal {
      background: var(--vng-teal-soft);
      border-left-color: #4f99a1;
    }

    .district-intro {
      margin-top: 12px;
      color: #4f4d5f;
      font-size: 1.04rem;
      line-height: 1.45;
    }

    .district-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .district-box {
      background: #f5f0fb;
      border: 2px solid rgba(108, 75, 163, 0.72);
      border-radius: 0;
      padding: 16px 18px;
      min-height: 300px;
    }

    .district-box.teal {
      background: #edf5f5;
      border-color: rgba(46, 141, 144, 0.82);
    }

    .district-box h3 {
      margin: 0 0 10px;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--vng-purple);
    }

    .district-box.teal h3 {
      color: var(--vng-teal);
    }

    .district-box p,
    .district-box ul {
      margin: 0;
      color: #4f4d60;
      font-size: 1rem;
      line-height: 1.38;
    }

    .district-box ul {
      margin-top: 8px;
      padding-left: 22px;
    }

    .built-box {
      margin-top: 12px;
      background: #d9ebe9;
      border-radius: 0;
      padding: 14px 16px;
    }

    .built-box h3 {
      margin: 0 0 6px;
      color: var(--vng-teal);
      font-weight: 700;
      font-size: 1.45rem;
    }

    .built-box p {
      margin: 0;
      color: #4d6264;
      line-height: 1.35;
      font-size: 1rem;
    }

    .cta-box {
      margin-top: 12px;
      background: var(--vng-purple);
      color: #fff;
      text-align: center;
      padding: 20px 18px 18px;
      border-radius: 0;
    }

    .cta-box h3 {
      margin: 0 0 6px;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 700;
    }

    .cta-box p {
      margin: 0;
      font-size: 1.04rem;
      color: #e4d8f4;
    }

    .cta-actions {
      margin-top: 12px;
      width: min(100%, 760px);
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .cta-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 10px 20px;
      border: 1px solid rgba(255, 255, 255, 0.9);
      color: #ffffff;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
    }

    .cta-action:hover,
    .cta-action:focus-visible {
      background-color: #ffffff;
      color: var(--vng-purple);
      transform: translateY(-1px);
    }

    .reveal-up {
      opacity: 0;
      transform: translateY(18px);
      transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
      transition-delay: var(--reveal-delay, 0s);
    }

    .reveal-up.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 991px) {
      .report-shell {
        padding: 0 14px;
      }

      .section-inner {
        padding: 22px 18px;
      }

      .findings-grid,
      .impl-grid,
      .district-grid {
        grid-template-columns: 1fr;
      }

      .flow-wrap {
        grid-template-columns: 1fr;
      }

      .flow-arrow {
        transform: rotate(90deg) scale(0.8);
        justify-self: center;
      }

      .flow-row.is-visible .flow-arrow {
        transform: rotate(90deg) scale(1);
      }

      .comparison-track-wrap {
        grid-template-columns: 1fr;
      }

      .compare-arrow-col {
        min-width: 0;
        transform: rotate(90deg) scale(0.82);
      }

      .comparison-row.is-visible .compare-arrow-col {
        transform: rotate(90deg) scale(1);
      }

      .quote-card.half,
      .quote-card.full {
        grid-column: span 12;
      }
    }

    @media (max-width: 640px) {
      .report-shell {
        padding: 0 10px;
      }

      .brand-lockup {
        flex-direction: column;
        gap: 4px;
      }

      .brand-mark {
        width: 380px;
      }

      .opening-hero {
        min-height: auto;
      }

      .opening-hero .section-inner {
        padding-top: 6px;
        padding-bottom: 8px;
      }

      .section-kicker {
        font-size: 0.95rem;
        letter-spacing: 0.22em;
      }

      .metric-grid {
        grid-template-columns: 1fr;
      }

      .metric-card.wide,
      .metric-card.third {
        grid-column: span 1;
      }

      .metric-card,
      .pd-box {
        min-height: auto;
      }

      .compare-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .compare-value {
        font-size: 1.65rem;
      }

      .district-box {
        min-height: auto;
      }

      .cta-action {
        width: 100%;
        max-width: 320px;
        font-size: 0.98rem;
      }

      .cta-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }

      .reveal-up,
      .flow-card,
      .flow-arrow,
      .comparison-row,
      .compare-side,
      .compare-arrow-col {
        opacity: 1 !important;
        transform: none !important;
      }

      .bar-fill {
        transform: scaleX(1) !important;
      }
    }