body{
    background:
      radial-gradient(1200px 700px at 15% -10%, rgba(103,176,69,.18), transparent 60%),
      radial-gradient(900px 600px at 90% 10%, rgba(24,226,153,.14), transparent 55%),
      linear-gradient(180deg, #05070c, #02030a 60%, #000 100%);
  }

  .sdg-ui .hero-title{
    /* background: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(10, 88, 60, 0.9)); */
    background: radial-gradient(1000px 520px at 12% 10%, rgba(33,197,142,.78), transparent 60%),
                  radial-gradient(1000px 520px at 88% 10%, rgba(59,130,246,.72), transparent 58%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: .8px;
  }

  /* ทำหัวเรื่องให้ดูแพง */
  .lbl_rmutk_title{
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(24,226,153,.90));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: .8px;
  }

  .rmutk_title{
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(24,226,153,.90));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: .8px;
  }

  /* SDG Cards ให้ดูเป็น premium */
   /* .card-sdg{
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 60px rgba(0,0,0,.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: .15s ease;
  } */
   /* 
  .card-sdg:hover{
    transform: translateY(-4px);
    box-shadow: 0 28px 80px rgba(0,0,0,.62);
  }

  .bg-black{
    background: rgba(0,0,0,.72) !important;
  }

  .card-sdg-pr{
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
  } */


  /* ===================================================================================== */

  .sdg-ui{
      --nav-h: 72px;
      --bg: #f6f7fb;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: rgba(15, 23, 42, .08);
      --shadow: 0 10px 30px rgba(2, 6, 23, .08);
      --shadow2: 0 16px 42px rgba(2, 6, 23, .12);
      --radius: 18px;
      --radius-lg: 24px;
      background: var(--bg);
      color: var(--text);
      padding-bottom: 40px;
    }
    .sdg-ui .container-xl{ max-width: 1200px; }
    .sdg-ui .section{ padding: 78px 0; }
    .sdg-ui .section-sm{ padding: 48px 0; }

    .sdg-ui .kicker{
      font-size: .95rem;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 800;
    }
    .sdg-ui .title{
      font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.4rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      margin: 6px 0 0;
    }
    .sdg-ui .subtitle{
      color: var(--muted);
      margin: 10px 0 0;
      max-width: 75ch;
      line-height: 1.75;
    }

    /* HERO */
    .sdg-ui .hero{ padding: 34px 0 10px; }
    .sdg-ui .hero-card{
      background: radial-gradient(1000px 520px at 12% 15%, rgba(33,197,142,.16), transparent 60%),
                  radial-gradient(1000px 520px at 88% 10%, rgba(59,130,246,.12), transparent 58%),
                  linear-gradient(180deg, #fff, #fbfbfe);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .sdg-ui .hero-inner{ padding: 34px; }
    .sdg-ui .hero-title{
      font-size: clamp(2rem, 2.3vw + 1.2rem, 3.3rem);
      font-weight: 950;
      letter-spacing: -0.04em;
      line-height: 1.06;
      margin: 0;
    }
    .sdg-ui .hero-lead{
      font-size: clamp(1rem, .55vw + .95rem, 1.2rem);
      color: var(--muted);
      line-height: 1.8;
      margin: 14px 0 0;
      max-width: 75ch;
    }
    .sdg-ui .hero-aside{
      height: 100%;
      display:flex; align-items:center; justify-content:center;
      padding: 26px;
    }
    .sdg-ui .hero-logo{
      width: min(260px, 60vw);
      filter: drop-shadow(0 16px 30px rgba(2,6,23,.14));
    }
    .sdg-ui .hero-glass{
      margin-top: 18px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: var(--radius);
      padding: 16px 18px;
      box-shadow: 0 10px 26px rgba(2,6,23,.06);
    }

    /* Sticky yearbar (ไม่ชน nav) */
    .sdg-ui .yearbar{
      /* position: sticky; */
      top: var(--nav-h);
      z-index: 55;
      backdrop-filter: blur(10px);
      background: rgba(246,247,251,.78);
      border-top: 1px solid rgba(2,6,23,.04);
      border-bottom: 1px solid rgba(2,6,23,.06);
    }
    .sdg-ui .yearbar-inner{ padding: 10px 0; }
    .sdg-ui .yearbar-row{ display:flex; align-items:center; gap: 14px; }
    .sdg-ui .yearbar-label{ font-weight: 900; white-space: nowrap; }
    .sdg-ui .chip-scroll{
      overflow-x:auto; -webkit-overflow-scrolling: touch;
      display:flex; gap: 10px; padding: 6px 2px;
      scrollbar-width: thin;
    }
    .sdg-ui .chip{
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      border: 1px solid rgba(2,6,23,.12);
      background: #fff;
      color: var(--text);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .sdg-ui .chip:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(2,6,23,.10); }
    .sdg-ui .chip.is-active{
      background: #198754;
      color: #fff;
      border-color: rgba(25,135,84,.32);
      box-shadow: 0 16px 34px rgba(25,135,84,.22);
    }

    /* SDG cards */
    .sdg-ui .sdg-card{
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.18);
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      height: 100%;
      position: relative;
    }
    .sdg-ui .sdg-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow2); }
    .sdg-ui .sdg-card::before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 260px at 12% 0%, rgba(255,255,255,.35), transparent 58%);
      pointer-events:none;
    }
    .sdg-ui .sdg-card-inner{ padding: 22px; position: relative; }
    .sdg-ui .sdg-img{
      width: 120px; height: 120px;
      object-fit: contain;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.18));
    }
    .sdg-ui .sdg-count{
      font-size: clamp(2rem, 3.2vw, 3rem);
      font-weight: 950;
      line-height: 1;
      color: #fff;
    }
    .sdg-ui .sdg-unit{ color: rgba(255,255,255,.92); font-weight: 800; }
    .sdg-ui .sdg-cta{
      margin-top: 14px;
      border-radius: 14px;
      font-weight: 950;
      padding: 12px 14px;
    }

    /* Report */
    .sdg-ui .report{
      background: radial-gradient(1000px 520px at 12% 10%, rgba(33,197,142,.18), transparent 60%),
                  radial-gradient(1000px 520px at 88% 10%, rgba(59,130,246,.12), transparent 58%),
                  linear-gradient(135deg, #0b1220, #0c1a2a);
      color:#fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .sdg-ui .report-card{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius-lg);
      padding: 28px;
    }
    .sdg-ui .report-title{
      font-size: clamp(1.7rem, 1vw + 1.2rem, 2.4rem);
      font-weight: 950;
      letter-spacing: -0.03em;
      margin: 0;
    }
    .sdg-ui .report-desc{ color: rgba(255,255,255,.75); line-height: 1.85; margin-top: 14px; }
    .sdg-ui .report-img{
      width: min(520px, 92%);
      border-radius: var(--radius-lg);
      box-shadow: 0 18px 44px rgba(0,0,0,.35);
    }

    /* Horizontal content */
    .sdg-ui .h-scroll{
      display:flex; gap: 14px;
      overflow-x:auto; -webkit-overflow-scrolling: touch;
      padding: 6px 2px 14px;
      /* scroll-snap-type: x mandatory; */
      scrollbar-width: thin;
    }
    .sdg-ui .h-card{
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: min(420px, 88vw);
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .sdg-ui .h-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow2); }
    .sdg-ui .h-thumb{ width:100%; height: 200px !important; object-fit: cover; }
    .sdg-ui .h-body{ padding: 18px; }

    .sdg-ui .h-body p{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;

      line-height: 1.75;
    }

    .sdg-ui .h-footer{ 
      margin-top: auto; 
      padding: 18px;
    }
    .sdg-ui .goal-pill{
      width: 30px; height: 30px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 10px;
      color:#fff; font-weight: 950;
      box-shadow: 0 10px 18px rgba(2,6,23,.12);
    }
    .sdg-ui .scroll-btn{
      position:absolute;
      top: 44%;
      transform: translateY(-50%);
      width: 46px; height: 46px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background:#fff;
      box-shadow: var(--shadow);
      display:none;
      align-items:center; justify-content:center;
      font-size: 22px; font-weight: 950;
      z-index: 5;
    }
    @media (min-width: 992px){ .sdg-ui .scroll-btn{ display:flex; } }
    .sdg-ui .scroll-btn.left{ left: -10px; }
    .sdg-ui .scroll-btn.right{ right: -10px; }

    /* News */
    .sdg-ui .news{
      background: linear-gradient(180deg, #0b1220, #070b12);
      color:#fff;
    }
    .sdg-ui .news-card{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius-lg);
      overflow:hidden;
      height: 100%;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .sdg-ui .news-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.30); }
    .sdg-ui .news-thumb{ width:100%; height: 200px; object-fit: cover; }
    .sdg-ui .news-body{ padding: 18px; }

    /* ===============================
   HOME NEWS SECTION (SDG UI)
================================ */

.news-home{
  background:
    radial-gradient(1000px 520px at 12% 10%, rgba(33,197,142,.18), transparent 60%),
    radial-gradient(1000px 520px at 88% 10%, rgba(59,130,246,.12), transparent 58%),
    linear-gradient(180deg, #0b1220, #070b12);
}

/* subtitle */
.news-subtitle{
  color: rgba(255,255,255,.75);
  max-width: 60ch;
}

/* view all */
.news-view-all{
  font-weight: 900;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255,255,255,.35);
  transition: color .15s ease, border-color .15s ease;
}

.news-view-all:hover{
  color: #fff;
  border-color: #20c997;
}

.sdg-view-all{
  font-weight: 900;
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.35);
  transition: color .15s ease, border-color .15s ease;
}

.sdg-view-all:hover{
  color: #000000;
  border-color: #20c997;
}

/* CARD */
.news-card-home{
  height: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}

.news-card-home:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* IMAGE */
.news-thumb-wrap{
  height: 220px;
  overflow: hidden;
}

.news-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.news-card-home:hover .news-thumb{
  transform: scale(1.06);
}

/* BODY */
.news-body{
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-title{
  font-weight: 900;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.news-desc{
  margin-top: 12px;
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}

.news-meta{
  margin-top: auto;
  margin-bottom: 14px;
  font-size: .85rem;
  color: rgba(255,255,255,.65);
}
.view-stats-home{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:18px;
}

.view-box{
  display:flex;
  flex-direction:column;
}

.view-number{
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 900;
  letter-spacing:-.02em;
}

.view-label{
  font-size:.85rem;
  color: var(--muted);
  font-weight:600;
}

.view-divider{
  width:1px;
  height:42px;
  background: rgba(15,23,42,.12);
}

/* =========================
   NEWS VIEW ALL BUTTON
========================= */

.news-view-all.btn-modern{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: all .25s ease;
  overflow: hidden;
}

.news-view-all.btn-modern:hover{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(34,197,94,.35);
  transform: translateY(-2px);
}

.news-view-all .arrow{
  font-size: 1rem;
  transition: transform .25s ease;
}

.news-view-all:hover .arrow{
  transform: translateX(5px);
}

/* subtle glow */
.news-view-all::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 60%);
  opacity:.6;
  pointer-events:none;
}