:root {
      --blue-dark: #1a3c6e;
      --blue-mid: #1e6bbf;
      --blue-light: #b8d4f0;
      --blue-tag: #ddeaf8;
      --green: #2e8b3c;
      --orange: #e87722;
      --text: #1a1a1a;
      --text-muted: #444;
    }

    /* ── HEADER replication (self-contained, no Bootstrap dependency) ── */
    .esg-header {
      display: flex;
      align-items: center;
      padding: 0 40px;
      height: 58px;
      background: #e8eaf0;
      border-bottom: 1px solid #d0d4de;
      position: sticky;
      top: 0;
      z-index: 500;
      gap: 0;
    }
    .esg-header .h-logo { height: 34px; margin-right: 32px; }
    .esg-header .h-logo img { height: 34px; width: auto; }
    .esg-header nav { display: flex; align-items: center; gap: 0; flex: 1; }
    .esg-header nav > .h-link,
    .esg-header nav > .h-drop > .h-link {
      display: flex;
      align-items: center;
      height: 58px;
      padding: 0 18px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #222;
      text-decoration: none;
      white-space: nowrap;
      transition: color .15s;
    }
    .esg-header nav > .h-link:hover { color: var(--orange); }
    .esg-header nav > .h-link.active,
    .esg-header nav > .h-drop > .h-link.active {
      color: var(--orange);
      border-bottom: 3px solid var(--orange);
    }

    /* Dropdown */
    .h-drop { position: relative; height: 58px; display: flex; align-items: center; }
    .h-drop-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      min-width: 220px;
      box-shadow: 0 4px 20px rgba(0,0,0,.13);
      border-top: 3px solid var(--orange);
      z-index: 600;
      padding: 6px 0;
    }
    .h-drop:hover .h-drop-menu { display: block; }
    .h-drop-menu a {
      display: block;
      padding: 10px 20px;
      font-size: 13.5px;
      color: #222;
      text-decoration: none;
      border-bottom: 1px solid #f2f2f2;
      transition: background .12s;
    }
    .h-drop-menu a:last-child { border-bottom: none; }
    .h-drop-menu a:hover { background: #f5f8ff; color: var(--blue-mid); }
    .h-drop-menu a.dd-active {
      color: var(--orange); font-weight: 700;
      border-left: 3px solid var(--orange); padding-left: 17px;
    }

    /* Right side of header */
    .h-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
    .h-logo2 img { height: 28px; }
    .h-lang {
      display: flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700; color: #333;
    }
    .h-lang img { height: 18px; border-radius: 2px; }

    /* ── PAGE HERO (sub-page style, matches site's section headers) ── */
    .page-hero {
      background: linear-gradient(120deg, #0d2645 0%, #1a5225 100%);
      padding: 52px 0 44px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=1400&q=80') center/cover;
      opacity: .15;
    }
    .page-hero .container { position: relative; z-index: 1; }
    .page-hero-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px;
    }
    .page-hero h1 {
      font-size: 56px; font-weight: 900; font-style: italic;
      color: #fff; line-height: 1; margin-bottom: 12px;
    }
    .page-hero h1 span { color: #7ee89a; }
    .page-hero p { font-size: 15px; color: rgba(255,255,255,.8); font-weight: 500; }

    /* ── SỐ LIỆU MÔI TRƯỜNG (matches .gov-stat-grid format) ── */
    .env-stat-section { padding: 40px 0 8px; }

    .env-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 90px;
      row-gap: 36px;
      margin: 30px 0 20px;
    }
    .env-stat-item {
      padding-bottom: 22px;
      border-bottom: 1px solid #e3e3e3;
    }
    .env-stat-item .env-figure {
      font-size: 35px;
      font-weight: 800;
      color: var(--blue-mid);
      margin-bottom: 6px;
      line-height: 1.25;
    }
    .env-stat-item .env-desc {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .env-stat-source {
      text-align: right;
      font-size: 13px;
      color: #999;
      line-height: 1.7;
      margin-bottom: 8px;
    }

    @media (max-width: 700px) {
      .env-stat-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 24px; }
    }

    /* Doc links */
    .doc-group { margin-bottom: 28px; }
    .doc-group-label {
      font-size: 14px; font-weight: 700; color: var(--text);
      margin-bottom: 8px;
    }
    .doc-link-list { display: flex; flex-direction: column; gap: 2px; }
    .doc-link-list a {
      font-size: 13.5px; color: var(--blue-mid);
      text-decoration: underline; text-underline-offset: 2px;
      line-height: 1.8;
    }
    .doc-link-list a:hover { color: var(--blue-dark); }

    /* ── DIVIDER ── */
    .env-divider { border: none; border-top: 1px solid #e0e0e0; margin: 0; }

    /* ── FOOTER (replicating esg.html main-footer style self-contained) ── */
    .env-footer {
      background: #1e2d4f;
      color: #bfc8d8;
      padding: 48px 50px 32px;
      font-size: 13px;
      line-height: 1.7;
    }
    .env-footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr;
      gap: 48px;
      max-width: 1200px;
      margin: 0 auto 28px;
    }
    .env-footer-logo img { height: 40px; margin-bottom: 14px; filter: brightness(0) invert(1); }
    .env-footer-logo p { font-size: 12.5px; color: #8fa3be; line-height: 1.7; }
    .env-footer h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .06em; }
    .env-footer-links { list-style: none; }
    .env-footer-links li { margin-bottom: 7px; }
    .env-footer-links a { color: #8fa3be; text-decoration: none; font-size: 13px; }
    .env-footer-links a:hover { color: #fff; }
    .env-footer-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .contact-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; }
    .contact-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
    .contact-row i { color: var(--orange); margin-top: 3px; width: 16px; flex-shrink: 0; }
    .contact-row span { font-size: 12.5px; color: #8fa3be; }
    .env-footer-bottom {
      background: #14202e;
      text-align: center;
      padding: 14px 40px;
      font-size: 12px;
      color: #5a6a7e;
    }

    /* ── scroll-to-top button ── */
    .scroll-top-btn {
      position: fixed; bottom: 28px; right: 28px;
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--orange); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; text-decoration: none;
      box-shadow: 0 2px 10px rgba(0,0,0,.2);
      z-index: 900;
      transition: background .2s;
    }
    .scroll-top-btn:hover { background: var(--blue-dark); }