:root{
  --primary:#7E001D;
  --primary-600:#A72D33;
  --dark:#2A2C2F;
  --muted:#54585F;   /* darkened from #656A72 for WCAG AA on white + light tints */
  --border:#D9D7D8;
  --bg:#F6F7F9;
  --card:#FFFFFF;
  --success:#20C997;
  --warning:#FFC107;
  --danger:#FF4D4F;
  --y70-progress-h:40px;
  --rank-amt-bg: var(--card);
  --rank-amt-border: rgba(126, 0, 29, 0.28);
  --rank-amt-shadow: rgba(126, 0, 29, 0.12);
  --rank-1-start: #ffe6a6;
  --rank-1-end: #f8c846;
  --rank-1-border: #f0b323;
  --rank-1-text: #6a4300;
  --rank-2-start: #f2f4f8;
  --rank-2-end: #d5d9e2;
  --rank-2-border: #bcc3d1;
  --rank-2-text: #364054;
  --rank-3-start: #ffd7bf;
  --rank-3-end: #e7a77e;
  --rank-3-border: #cd7f4f;
  --rank-3-text: #5f3018;
  --logo-glow-shadow: rgba(255, 255, 255, 1);
  --logo-aura-start: rgba(167, 45, 51, 0.34);
  --logo-aura-mid: rgba(167, 45, 51, 0.14);
  --logo-aura-end: var(--bg);
  --orbit-link-color: rgba(126, 0, 29, 0.28);
  --gear-color-1: rgba(126, 0, 29, 0.18);
  --gear-color-2: rgba(167, 45, 51, 0.14);
  --gear-color-3: rgba(255, 255, 255, 0.28);
  --donate-surface: var(--card);
  --donate-soft-bg: color-mix(in srgb, var(--card) 82%, var(--bg) 18%);
  --donate-soft-border: color-mix(in srgb, var(--border) 78%, var(--dark) 22%);
  --donate-shadow: rgba(42, 44, 47, 0.16);
  --donate-gear-bg: rgba(126, 0, 29, 0.1);
  --donate-hero-fade: rgba(246, 247, 249, 0.9);
  --hero-center-core: rgba(255, 255, 255, 0.94);
  --hero-center-edge: rgba(255, 255, 255, 0.58);
  --hero-amount-shadow: rgba(42, 44, 47, 0.22);

  /* ฟอนต์ระบบ — ค่าเริ่มต้น; เปลี่ยนได้ที่ ปรับแต่ง (Customizer) → "ฟอนต์ระบบ".
     PHP (inc/typography.php) จะฉีดทับ :root ตามฟอนต์ที่เลือกโดยอัตโนมัติ */
  --y70-font-base:"Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--y70-font-base);
  color:var(--dark);
  background:var(--bg);
  line-height:1.55;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-600); }

.y70-container{
  width:min(1180px, 92vw);
  margin:0 auto;
}

/* Centered, static hint above the chart row — a real sibling element (not a
   pseudo-element glued to the scrollable wrap) so it never scrolls, drags,
   or shifts with the chart itself. bootChartWrapInteraction() toggles
   .is-visible to match whether the chart actually has more to drag to. */
.y70-chart-hint{
  display: none;
  width: fit-content;
  margin: 0 auto 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 86%, transparent 14%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  pointer-events: none;
}
.y70-chart-hint.is-visible{
  display: block;
}

/* Frozen y-axis: a narrow, non-scrolling axis-only chart sits to the left;
   only the bars/x-axis in .y70-chart-wrap scroll horizontally. Widths of
   the two canvases are independent, but they share identical height, font,
   and y min/max/ticks (set from JS) so their gridlines line up exactly. */
.y70-chart-row{
  display: flex;
  align-items: stretch;
}
.y70-chart-axis{
  flex: 0 0 auto;
  width: var(--chart-axis-w, 74px);
  height: 360px;
  position: relative;
  overflow: hidden;
}
.y70-chart-axis canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
@media (max-width: 700px){
  .y70-chart-axis{
    height: 330px;
  }
}

.y70-chart-row .y70-chart-wrap{
  flex: 1 1 auto;
  min-width: 0; /* let this scrollable flex item shrink below its content width */
}

.y70-chart-wrap{
  height: 360px;     /* ปรับได้ */
  max-height: 600px; /* ไม่เกิน 600 */
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  /* pan-y by default (not currently draggable — nothing to scroll, so a
     touch starting here should just pass through to the page's normal
     vertical scroll). Once .is-interactive (below), a real finger drag is
     rarely perfectly horizontal — with pan-y still active, the browser can
     decide mid-gesture that any vertical wobble means "the user wants to
     scroll the page" and yank the touch stream over to native scrolling,
     cancelling our pointer-driven drag outright (a pointercancel firing
     mid-drag). That's what "hard to drag" was — none stops the browser
     from ever taking it over: once a drag is possible, this element owns
     the whole gesture, no race. */
  touch-action: pan-y;
}
/* Chart.js measures its OWN internal raster resolution off the canvas's
   immediate parent — it must be a real, correctly-sized box, not the
   scroll-clipped .y70-chart-wrap (which stays clamped to the viewport).
   Forcing a wider CSS width straight onto <canvas> (old approach) fought
   Chart.js's own inline style: canvas.width/height (backing store) got set
   from .y70-chart-wrap's clamped size while the visual CSS width was forced
   much wider by !important, so the raster was stretched — bars smeared/
   oversized/cut off, worst on mobile where the gap is largest. */
.y70-chart-inner{
  width: max(100%, var(--chart-target-w, 920px));
  height: 100%;
  position: relative;
}
.y70-chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.y70-chart-wrap.is-interactive{
  cursor: grab;
  touch-action: none;
}

.y70-chart-wrap.is-dragging{
  cursor: grabbing;
}

@media (max-width: 700px){
  .y70-chart-wrap{
    height: 330px;
  }
}

/* Department bar chart (homepage "จำนวนเงินบริจาคแต่ละภาควิชา") — same visual
   language as the /statistics monthly-trend chart (.y70-stats-col over on
   stats.css): rounded gradient columns, compact value printed above each bar,
   no axis/gridlines. Own class names since this lives outside stats.css, but
   deliberately mirrors that pattern so the two read as one design system.
   Overflows horizontally on its own (no JS width calc needed, unlike the old
   canvas version this replaced). */
.y70-deptbar-plot{ position: relative; padding-top: 34px; }
.y70-deptbar-chart{
  display: flex; align-items: flex-end; gap: clamp(8px, 1.6vw, 22px);
  height: 300px; min-width: max-content;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.y70-deptbar-col{
  flex: 1 1 0; min-width: 44px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  text-align: center;
}
.y70-deptbar-col__val{ flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--primary); }
.y70-deptbar-col__bar{
  flex: 0 0 auto; width: clamp(22px, 3.2vw, 46px); min-height: 4px; max-height: calc(100% - 40px);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--primary-600), var(--primary));
  box-shadow: 0 6px 16px rgba(126,0,29,.22);
  transition: height .5s cubic-bezier(.2,.7,.2,1), filter .2s ease, transform .2s ease;
}
.y70-deptbar-col:hover .y70-deptbar-col__bar{ filter: brightness(1.12) saturate(1.05); transform: translateY(-2px); }
.y70-deptbar-col__label{
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px){
  .y70-deptbar-chart{ height: 250px; }
  .y70-deptbar-col:hover .y70-deptbar-col__bar{ transform: none; filter: none; }
}

/*.y70-header{*/
/*  background:var(--card);*/
/*  border-bottom:1px solid var(--border);*/
/*}*/


.y70-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}


.y70-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.y70-menu a{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--dark);
  font-weight:700;
  font-size:14px;
}
.y70-menu a:hover{
  border-color:var(--primary-600);
}

.y70-hero{
  padding:24px 0 6px;
}
.y70-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:14px;
}
@media (max-width: 980px){
  .y70-hero-grid{ grid-template-columns:1fr; }
}
.y70-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
}
.y70-card h1{
  margin:0 0 8px;
  font-size:28px;
}
.y70-card p{
  margin:0 0 12px;
  color:var(--muted);
}
.y70-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.y70-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--dark);
  font-weight:800;
}
.y70-btn.primary{
  border-color:var(--primary);
  background:var(--primary);
  color:var(--card);
}
.y70-btn.primary:hover{
  background:var(--primary-600);
  border-color:var(--primary-600);
  color:var(--card);
}

.y70-metric{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--bg);
}
.y70-metric .k{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.y70-metric .v{
  font-size:34px;
  font-weight:900;
  color:var(--dark);
}
.y70-section{
  padding:14px 0 26px;
}

body.home #after-hero{
  scroll-margin-top: clamp(92px, 11vh, 150px);
  padding-top: clamp(14px, 2.2vh, 30px);
}

.y70-after-hero-heading{
  margin: 0 0 14px;
  padding-top: clamp(14px, 2.6vh, 34px);
  text-align: center;
  font-size: clamp(25px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--dark);
}

.y70-purpose-split{
  margin: 0 0 18px;
  padding: clamp(8px, 1.2vw, 16px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.y70-purpose-split__title{
  margin: 0;
  text-align: center;
  font-size: clamp(21px, 2.5vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.y70-purpose-split__sub{
  margin: 8px 0 12px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 17px);
}

.y70-purpose-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.y70-purpose-card{
  position: relative;
  min-height: 250px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border) 78%);
  border-radius: 16px;
  overflow: visible;
  background: var(--card);
  box-shadow: 0 10px 20px rgba(42, 44, 47, 0.12);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  isolation: isolate;
  --purpose-side-icon: none;
}

.y70-purpose-split.is-visible .y70-purpose-card{
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 1) * 35ms);
}

.y70-purpose-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border) 56%);
  box-shadow: 0 14px 28px rgba(42, 44, 47, 0.2);
}

.y70-purpose-card__cap{
  position: absolute;
  top: -10px;
  left: 50%;
  width: 106px;
  height: 50px;
  transform: translateX(-50%);
  border-radius: 0;
  background: color-mix(in srgb, var(--primary) 88%, var(--primary-600) 12%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M8 38c2-16 16-30 42-30s40 14 42 30v4H8z' fill='%23000'/%3E%3Crect x='5' y='40' width='90' height='5' rx='2.5' fill='%23000'/%3E%3Crect x='42' y='13' width='5' height='14' rx='2' fill='%23000'/%3E%3Crect x='53' y='13' width='5' height='14' rx='2' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M8 38c2-16 16-30 42-30s40 14 42 30v4H8z' fill='%23000'/%3E%3Crect x='5' y='40' width='90' height='5' rx='2.5' fill='%23000'/%3E%3Crect x='42' y='13' width='5' height='14' rx='2' fill='%23000'/%3E%3Crect x='53' y='13' width='5' height='14' rx='2' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: 0 6px 10px rgba(126, 0, 29, 0.2);
  animation: y70-helmet-float 2.6s ease-in-out infinite;
  z-index: 6;
  pointer-events: none;
}

.y70-purpose-card__cap::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  background-image: var(--purpose-side-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .96;
}

.y70-purpose-card__cap::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 84px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(42,44,47,.3) 0%, rgba(42,44,47,0) 70%);
  z-index: -1;
}

.y70-purpose-card::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
  mask: url("../images/gear_hero.svg") no-repeat center / contain;
  background: color-mix(in srgb, var(--muted) 36%, var(--card) 64%);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

.y70-purpose-card__pct{
  position: relative;
  z-index: 1;
  margin-top: 40px;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.y70-purpose-card__amount{
  position: relative;
  z-index: 1;
  background: var(--primary);
  color: var(--card);
  text-align: center;
  padding: 8px 10px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.y70-purpose-card__amount .k{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}

.y70-purpose-card__amount strong{
  margin-top: 3px;
  font-size: clamp(14px, 1.45vw, 20px);
  line-height: 1.12;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.y70-purpose-card__name{
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--dark) 94%, var(--muted) 6%);
  color: var(--card);
  min-height: 70px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.y70-purpose-card.y70-purpose-card--o1{
  --purpose-side-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-4 10 4-10 4-10-4z'/%3E%3Cpath d='M6 11v4c0 3 12 3 12 0v-4'/%3E%3C/svg%3E");
}

.y70-purpose-card.y70-purpose-card--o2{
  --purpose-side-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l6-6'/%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M10 8l6 6'/%3E%3C/svg%3E");
}

.y70-purpose-card.y70-purpose-card--o3{
  --purpose-side-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V3'/%3E%3Cpath d='M7 4h11l-2 3 2 3H7z'/%3E%3C/svg%3E");
}

.y70-purpose-card.y70-purpose-card--o5{
  --purpose-side-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 115 0c0 2-2.5 2.2-2.5 4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.y70-purpose-card.y70-purpose-card--o4{
  --purpose-side-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6'/%3E%3Cpath d='M10 2v5L5 16a3 3 0 002.6 4h8.8A3 3 0 0019 16l-5-9V2'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E");
}

@media (max-width: 620px){
  .y70-purpose-card__cap::before{
    width: 20px;
    height: 20px;
  }
}

.y70-purpose-card:hover .y70-purpose-card__pct{
  transform: scale(1.05);
}

.y70-purpose-card__pct{
  transition: transform .24s ease;
}

.y70-purpose-card:hover .y70-purpose-card__cap{
  animation-duration: 1.2s;
}

@keyframes y70-helmet-float{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-3px); }
}

@media (max-width: 620px){
  .y70-purpose-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .y70-purpose-card{
    min-height: 132px;
    border-radius: 12px;
  }

  .y70-purpose-card__cap{
    width: 76px;
    height: 36px;
    top: -7px;
  }

  .y70-purpose-card__cap::before{
    width: 14px;
    height: 14px;
  }

  .y70-purpose-card__cap::after{
    width: 62px;
    height: 9px;
    bottom: -4px;
  }

  .y70-purpose-card__pct{
    margin-top: 24px;
    min-height: 52px;
    padding: 2px 6px;
    font-size: clamp(28px, 7vw, 44px);
  }

  .y70-purpose-card__amount{
    min-height: 46px;
    padding: 5px 6px;
  }

  .y70-purpose-card__amount .k{
    font-size: 10px;
  }

  .y70-purpose-card__amount strong{
    margin-top: 1px;
    font-size: clamp(11px, 2.9vw, 14px);
  }

  .y70-purpose-card__name{
    min-height: 38px;
    padding: 4px 7px;
    font-size: clamp(11px, 2.9vw, 14px);
    line-height: 1.15;
  }
}

@media (min-width: 621px) and (max-width: 860px){
  .y70-purpose-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 861px) and (max-width: 1199px){
  .y70-purpose-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .y70-purpose-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.y70-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.y70-col-6{ grid-column: span 6; }
.y70-col-12{ grid-column: span 12; }
@media (max-width: 980px){
  .y70-col-6{ grid-column: span 12; }
}

.y70-card-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.y70-card-title h2{
  margin:0;
  font-size:18px;
}
.y70-chip{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.y70-tablewrap{ overflow:auto; }
table.y70-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
table.y70-table th, table.y70-table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
table.y70-table th{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.y70-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg);
  font-size:12px;
  font-weight:900;
  color:var(--dark);
}
.y70-badge.success{ border-color:var(--success); }
.y70-badge.warning{ border-color:var(--warning); }
.y70-badge.danger{ border-color:var(--danger); }

.y70-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .y70-form{ grid-template-columns: 1fr; }
}
.y70-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.y70-field label{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}
.y70-field input, .y70-field select, .y70-field textarea{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--dark);
}
.y70-field textarea{ min-height:110px; resize:vertical; }

.y70-footer{
  padding:18px 0 28px;
  color:var(--muted);
}

/* Simple modal (optional public use) */
.y70-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}
.y70-modal[aria-hidden="false"]{ display:block; }
.y70-modal__backdrop{
  position:absolute;
  inset:0;
  background: var(--dark);
  opacity: 0.45;
}

.y70-modal__panel{
  position:relative;
  margin: 8vh auto;
  width: min(920px, 92vw);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow:hidden;
}
.y70-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.y70-modal__title{ font-weight:900; }
.y70-modal__close{
  width:34px; height:34px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--card);
  cursor:pointer;
}
.y70-modal__body{ padding: 14px; }

/* ===== Home Page Layout (match mockup) ===== */
.y70-topband{
  height: 15px;
  background: var(--primary);
}

.y70-hero-home{
  position: relative;
  overflow:hidden;
  background: linear-gradient(180deg, var(--primary-600), transparent);
}

.y70-hero-home::after{
  content:"";
  position:absolute;
  right:-140px;
  top: 110px;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  border: 44px solid var(--primary);
  opacity: 0.12;
  pointer-events:none;
}

.y70-hero-home .y70-container{
  padding: 18px 0 8px;
}

.y70-logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 6px 0 12px;
}

.y70-campaign-mark{
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--primary);
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size: 32px;
}

.y70-campaign-mark small{
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
}

.y70-total-wrap{
  text-align:center;
  padding: 6px 0 14px;
}

.y70-total-wrap .k{
  color: var(--dark);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}

.y70-total-wrap .v{
  font-size: clamp(34px, 4.2vw, 66px);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.02;
  padding: 0 6px;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-inline: auto;
  overflow: hidden;
  text-overflow: clip;
  text-shadow: 0 2px 0 var(--card), 0 10px 24px var(--hero-amount-shadow);
}

.y70-total-wrap .v .y70-total-main{
  display: inline-block;
}

.y70-total-wrap .v .y70-total-dec{
  display: inline-block;
  font-size: .5em;
  line-height: 1;
  vertical-align: baseline;
  margin-left: .08em;
}

.y70-progress-wrap{
  width: 100%;
  margin: 0;
}

.y70-progress-track{
  position: relative;
  height: var(--y70-progress-h);
  border-radius: 0;
  border: 0;
  background: linear-gradient(180deg, #ffffff, #f0f3f8);
  box-shadow: inset 0 2px 5px rgba(12, 18, 28, 0.08);
  overflow: hidden;
}

.y70-progress-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  box-shadow: 0 0 18px rgba(126, 0, 29, 0.35);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.y70-progress-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  animation: y70-progress-shine 2.6s ease-in-out infinite;
}

.y70-progress-label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1;
  user-select: none;
}

.y70-progress-label--current{
  position: static;
  transform: none;
  color: #fff;
}

.y70-progress-track.is-compact .y70-progress-label--current{
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--dark);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 6px;
}

.y70-progress-label--target{
  right: 12px;
  color: var(--dark);
}

/* Fill clamped near/at 100% (goal met or exceeded) — the current-total label
   (inside the fill, right-aligned) and this target label now sit in the same
   spot. The goal marker is redundant once it's visibly reached anyway. */
.y70-progress-track.is-full .y70-progress-label--target{
  display: none;
}

.y70-total-updated{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.y70-total-refresh{
  border: 1px solid var(--border);
  background: #fff;
  color: var(--dark);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}

.y70-total-refresh svg{
  width: 16px;
  height: 16px;
  display: block;
}

.y70-total-refresh:hover{
  transform: translateY(-1px);
  border-color: var(--primary);
}

.y70-total-refresh.is-loading{
  transform: none;
}

.y70-total-refresh.is-loading span{
  display: inline-block;
  animation: y70-refresh-spin .75s linear infinite;
}

@keyframes y70-progress-shine{
  0%, 25% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(110%); }
}

@keyframes y70-refresh-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 560px){
  .y70-total-wrap .v{
    font-size: clamp(34px, 11vw, 56px);
  }

  .y70-total-updated{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 8px;
    gap: 6px;
    font-size: 11px;
  }

  .y70-total-refresh{
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}

.y70-center{
  display:flex;
  justify-content:center;
}

.y70-divider-photo{
  margin-top: 12px;
  height: 140px;
  background: linear-gradient(180deg, transparent, var(--bg));
  border-top: 1px solid var(--border);
  position: relative;
  overflow:hidden;
}
.y70-divider-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--dark);
  opacity: 0.08;
}
.y70-divider-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, var(--card), transparent);
  opacity: 0.3;
}

.y70-block-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  text-align:center;
}
.y70-block-sub{
  color: var(--muted);
  font-size: 13px;
  text-align:center;
  margin: 0;
}

.y70-ranking{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.y70-rank-view{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.y70-rank-view .y70-chip{
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.y70-rank-view .y70-chip.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color: var(--card);
}

.y70-rank-detail{
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease, max-height .24s ease;
  /* Chart-bar click → scrollIntoView() (main.js bootDeptChart onClick) landed
     this row flush with the viewport top, right behind the site header —
     home is `position:fixed` (body.home .y70-header, z-index:999) so nothing
     pushes content down for it the way a sticky header does. scroll-margin-top
     is what scrollIntoView()/:target actually read to leave clearance above a
     target, so it has to live on the target itself, not the header.
     Same clamp() already tuned for this exact fixed-header home page at
     #v2-after-hero (home-v2.css) — reused rather than re-guessing a number,
     and vh-based so it scales across phone/tablet/desktop instead of one
     fixed px value. (.y70-header--inner on non-home pages is shorter, so this
     is a safe — if slightly generous — overestimate there.) */
  scroll-margin-top: clamp(70px, 10vh, 110px);
}
/* Extra clearance when the announcement bar is showing — it pushes the fixed
   header down by its own height first (announce-bar.css), so the row needs
   that much more room above it too or the bar reclaims the gap this just added. */
body.has-y70-bar .y70-rank-detail{
  scroll-margin-top: calc(clamp(70px, 10vh, 110px) + var(--y70-bar-h, 48px));
}

.y70-rank-detail[open]{
  box-shadow: 0 8px 20px rgba(42, 44, 47, 0.1);
}

.y70-rank-detail > summary{
  list-style: none;
}

.y70-rank-detail > summary::-webkit-details-marker{
  display: none;
}

.y70-rank-item{
  border: 0;
  background: transparent;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor: pointer;
  transition: background-color .22s ease;
}
.y70-rank-item .left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.y70-rank-badge{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--dark);
  flex: 0 0 auto;
}
.y70-rank-name{
  font-weight: 900;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 54vw;
}
.y70-rank-amt{
  color: var(--primary);
  font-weight: 900;
  font-size: 17px;
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
  min-width: clamp(150px, 20vw, 260px);
  background: var(--rank-amt-bg);
  border: 1px solid var(--rank-amt-border);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 3px 10px var(--rank-amt-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}

.y70-rank-detail:hover{
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border) 74%);
  box-shadow: 0 10px 24px rgba(42, 44, 47, 0.14);
  transform: translateY(-1px);
}

.y70-rank-detail:hover > .y70-rank-item{
  background: color-mix(in srgb, var(--card) 70%, var(--bg) 30%);
}

.y70-rank-detail:hover .y70-rank-amt{
  transform: translateX(-2px);
  box-shadow: 0 5px 14px var(--rank-amt-shadow);
}

.y70-rank-item-1 .y70-rank-badge{
  background: linear-gradient(180deg, var(--rank-1-start), var(--rank-1-end));
  border-color: var(--rank-1-border);
  color: var(--rank-1-text);
}

.y70-rank-item-2 .y70-rank-badge{
  background: linear-gradient(180deg, var(--rank-2-start), var(--rank-2-end));
  border-color: var(--rank-2-border);
  color: var(--rank-2-text);
}

.y70-rank-item-3 .y70-rank-badge{
  background: linear-gradient(180deg, var(--rank-3-start), var(--rank-3-end));
  border-color: var(--rank-3-border);
  color: var(--rank-3-text);
}
.y70-rank-chevron{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--primary);
  font-weight: 900;
  flex: 0 0 auto;
  transition: transform .24s ease;
}

.y70-rank-detail[open] .y70-rank-chevron{
  transform: rotate(180deg);
}

.y70-rank-detail.is-rank-extra{
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.y70-rank-detail.is-rank-extra.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  max-height: 1400px;
  pointer-events: auto;
}

.y70-rank-detail.y70-rank-item-1 > .y70-rank-item,
.y70-rank-detail.y70-rank-item-2 > .y70-rank-item,
.y70-rank-detail.y70-rank-item-3 > .y70-rank-item{
  padding-top: 14px;
  padding-bottom: 14px;
}

.y70-rank-detail.y70-rank-item-1 .y70-rank-name,
.y70-rank-detail.y70-rank-item-2 .y70-rank-name,
.y70-rank-detail.y70-rank-item-3 .y70-rank-name{
  font-size: 20px;
}

.y70-rank-detail.y70-rank-item-1 .y70-rank-amt,
.y70-rank-detail.y70-rank-item-2 .y70-rank-amt,
.y70-rank-detail.y70-rank-item-3 .y70-rank-amt{
  font-size: 19px;
  padding: 6px 12px;
}

.y70-rank-detail.y70-rank-item-1 .y70-rank-badge,
.y70-rank-detail.y70-rank-item-2 .y70-rank-badge,
.y70-rank-detail.y70-rank-item-3 .y70-rank-badge{
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.y70-rank-purpose-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
  overflow: hidden;
  transform-origin: top center;
}

.y70-rank-detail[open] .y70-rank-purpose-grid{
  animation: y70-rank-expand .34s cubic-bezier(.2,.8,.2,1);
}

.y70-rank-detail.is-closing .y70-rank-purpose-grid{
  animation: y70-rank-collapse .26s cubic-bezier(.4,0,1,1) forwards;
}

@keyframes y70-rank-expand{
  from{
    opacity: 0;
    transform: translateY(-8px) scaleY(.94);
    max-height: 0;
  }
  to{
    opacity: 1;
    transform: translateY(0) scaleY(1);
    max-height: 1200px;
  }
}

@keyframes y70-rank-collapse{
  from{
    opacity: 1;
    transform: translateY(0) scaleY(1);
    max-height: 1200px;
  }
  to{
    opacity: 0;
    transform: translateY(-6px) scaleY(.96);
    max-height: 0;
  }
}

.y70-rank-purpose-card{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  --purpose-top: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  --purpose-bottom: color-mix(in srgb, var(--muted) 14%, var(--card) 86%);
  --purpose-text: color-mix(in srgb, var(--dark) 92%, var(--primary) 8%);
  --purpose-icon: none;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border) 86%);
  box-shadow: 0 10px 20px rgba(42, 44, 47, 0.14);
  background: linear-gradient(180deg, var(--purpose-top) 0 44%, var(--purpose-bottom) 44% 100%);
  color: var(--purpose-text);
  text-align: center;
  padding: 10px;
  display: grid;
  grid-template-rows: 44% 56%;
  gap: 8px;
  min-height: 190px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.y70-rank-purpose-card > *{
  position: relative;
  z-index: 2;
}

.y70-rank-purpose-card::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  background-image: var(--purpose-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .24;
  z-index: 1;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.y70-rank-purpose-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 24px rgba(42, 44, 47, 0.2);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border) 72%);
}

.y70-rank-purpose-card:hover::before{
  opacity: .34;
  transform: translate(-50%, -50%) scale(1.06);
}

.y70-rank-purpose-card.y70-rank-purpose-card--o1{
  --purpose-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23656a72' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 24l26-10 26 10-26 10-26-10z'/%3E%3Cpath d='M16 30v10c0 7 32 7 32 0V30'/%3E%3Cpath d='M58 25v15'/%3E%3C/svg%3E");
}

.y70-rank-purpose-card.y70-rank-purpose-card--o2{
  --purpose-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23656a72' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 18l8 8-12 12-8-8z'/%3E%3Cpath d='M38 14l12 12'/%3E%3Cpath d='M34 30l16 16'/%3E%3C/svg%3E");
}

.y70-rank-purpose-card.y70-rank-purpose-card--o3{
  --purpose-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23656a72' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 54V12'/%3E%3Cpath d='M18 14h30l-6 9 6 9H18z'/%3E%3C/svg%3E");
}

.y70-rank-purpose-card.y70-rank-purpose-card--o5{
  --purpose-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23656a72' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Cpath d='M24 24a8 8 0 0116 0c0 5-8 6-8 12'/%3E%3Cpath d='M32 44h.01'/%3E%3C/svg%3E");
}

.y70-rank-purpose-card.y70-rank-purpose-card--o4{
  --purpose-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23656a72' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 8h16'/%3E%3Cpath d='M30 8v14L16 48a6 6 0 005 9h22a6 6 0 005-9L34 22V8'/%3E%3Cpath d='M22 40h20'/%3E%3C/svg%3E");
}

.y70-rank-purpose-card::after{
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--card) 85%, var(--primary) 15%);
  opacity: .4;
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
  mask: url("../images/gear_hero.svg") no-repeat center / contain;
}

.y70-rank-purpose-name{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.y70-rank-purpose-head{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 0;
}

.y70-rank-purpose-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0;
  min-height: 0;
  padding: 10px;
}

.y70-rank-purpose-cap{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 6px;
}

.y70-rank-purpose-amt{
  margin-top: 0;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: clip;
}

.y70-rank-purpose-unit{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 760px){
  .y70-rank-item{
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 6px;
    padding: 9px 10px;
  }

  .y70-rank-item .left{
    flex: 1 1 100%;
    min-width: 0;
    gap: 8px;
  }

  .y70-rank-name{
    font-size: 15px;
    font-weight: 800;
    white-space: normal;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
  }

  .y70-rank-amt{
    order: 2;
    flex: 1 1 auto;
    margin-left: 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    white-space: normal;
    border-radius: 10px;
    padding: 4px 8px;
  }

  .y70-rank-chevron{
    order: 3;
    margin-left: 6px;
  }

  .y70-rank-detail.y70-rank-item-1 .y70-rank-name,
  .y70-rank-detail.y70-rank-item-2 .y70-rank-name,
  .y70-rank-detail.y70-rank-item-3 .y70-rank-name{
    font-size: 17px;
  }

  .y70-rank-detail.y70-rank-item-1 .y70-rank-amt,
  .y70-rank-detail.y70-rank-item-2 .y70-rank-amt,
  .y70-rank-detail.y70-rank-item-3 .y70-rank-amt{
    font-size: 15px;
    padding: 5px 9px;
  }

  .y70-rank-purpose-card{
    min-height: 104px;
    grid-template-rows: 40% 60%;
    gap: 4px;
    padding: 6px;
  }

  .y70-rank-purpose-name{
    font-size: 14px;
    min-height: 0;
    line-height: 1.15;
  }

  .y70-rank-purpose-head{
    padding: 4px 6px;
  }

  .y70-rank-purpose-body{
    padding: 4px 6px;
  }

  .y70-rank-purpose-cap{
    font-size: 11px;
    margin-bottom: 2px;
  }

  .y70-rank-purpose-amt{
    font-size: 22px;
    line-height: 1;
  }

  .y70-rank-purpose-unit{
    margin-top: 3px;
    font-size: 13px;
  }

  .y70-rank-purpose-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 460px){
  .y70-rank-name{
    font-size: 14px;
  }

  .y70-rank-amt{
    font-size: 13px;
  }

  .y70-rank-badge{
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 12px;
  }

  .y70-rank-purpose-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   By-department board header — replaces the old duplicated band heading
   ("รวมพลังพิชิต 70 ล้าน…" now lives only in the History section).
   ========================================================================= */
.y70-deptboard-head{
  text-align: center;
  margin: clamp(20px, 3.4vh, 44px) 0 16px;
  padding-top: clamp(6px, 1.6vh, 18px);
}
.y70-deptboard-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-600);
}
.y70-deptboard-eyebrow::before,
.y70-deptboard-eyebrow::after{
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--primary-600) 65%, transparent);
}
.y70-deptboard-title{
  margin: .45rem 0 0;
  line-height: 1.12;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  color: var(--dark);
}
.y70-deptboard-sub{
  margin: 9px auto 0;
  max-width: 62ch;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 16px);
}

/* =========================================================================
   Ranking card cohesion + empty state
   ========================================================================= */
#y70_rank_section{ position: relative; overflow: hidden; }
#y70_rank_section::after{   /* faint gear watermark, ties into the section motif */
  content: "";
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 190px;
  height: 190px;
  z-index: 0;
  pointer-events: none;
  background: url("../images/gear_hero.svg") center / contain no-repeat;
  opacity: .05;
}
#y70_rank_section > *{ position: relative; z-index: 1; }

.y70-rank-empty{
  padding: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--bg);
}

/* =========================================================================
   PART 1 — Top-3 podium board (standalone leaderboard, NOT inside a card).
   Dark→light tonal maroon fills (no fade-to-white), metallic shields,
   unequal heights with bottoms aligned (#1 centre & tallest), slide-up entrance.
   ========================================================================= */
.y70-podium-board{ margin: 6px 0 18px; }
.y70-podium{
  list-style: none;
  margin: 0;
  padding: 6px 2px 2px;
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: end;                  /* unequal heights → bottoms aligned */
  gap: clamp(10px, 1.6vw, 20px);
}
.y70-podium-item{ min-width: 0; }
.y70-podium-item--2{ order: 1; }     /* left   */
.y70-podium-item--1{ order: 2; }     /* centre */
.y70-podium-item--3{ order: 3; }     /* right  */

.y70-podium-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  text-decoration: none;
  color: #fff;
  padding: 16px 14px;
  border-radius: 16px 16px 9px 9px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(42, 44, 47, .20);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* podium silhouette — #1 tallest; bottoms align via the grid's align-items:end */
.y70-podium-item--1 .y70-podium-card{ min-height: 244px; }
.y70-podium-item--2 .y70-podium-card{ min-height: 206px; }
.y70-podium-item--3 .y70-podium-card{ min-height: 184px; }
.y70-podium-name{ margin-top: auto; }   /* name + amount drop to the bottom (aligned) */

/* dark→light tonal maroon ladder (rank 1 darkest → rank 3 lightest); never white */
.y70-podium-item--1 .y70-podium-card{
  background: linear-gradient(168deg, color-mix(in srgb, var(--primary) 78%, #000) 0%, var(--primary) 100%);
}
.y70-podium-item--2 .y70-podium-card{
  background: linear-gradient(168deg, var(--primary) 0%, var(--primary-600) 100%);
}
.y70-podium-item--3 .y70-podium-card{
  background: linear-gradient(168deg, var(--primary-600) 0%, color-mix(in srgb, var(--primary-600) 80%, #fff) 100%);
}
.y70-podium-card::after{   /* faint on-theme gear watermark */
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 112px;
  height: 112px;
  background: url("../images/gear_hero.svg") center / contain no-repeat;
  opacity: .10;
  pointer-events: none;
}
.y70-podium-card > *{ position: relative; z-index: 1; }
.y70-podium-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 38px rgba(42, 44, 47, .30); }
.y70-podium-card:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }

/* Global keyboard focus ring — a visible outline for keyboard users on every
   interactive control (nav links, buttons, inputs, custom chips/segments).
   :focus-visible excludes mouse/touch, so it never adds rings on click/tap. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="radio"]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* crown above the champion shield */
.y70-podium-crown{
  width: 40px;
  height: 26px;
  margin-bottom: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath fill='%23f6cf57' stroke='%23b9831a' stroke-width='1.4' stroke-linejoin='round' d='M4 27 L8 12 L16 20 L24 7 L32 20 L40 12 L44 27 Z'/%3E%3Crect x='6' y='25' width='36' height='4' rx='2' fill='%23e0a521'/%3E%3Ccircle cx='8' cy='11' r='2.3' fill='%23fff0bf'/%3E%3Ccircle cx='24' cy='6' r='2.8' fill='%23fff6d8'/%3E%3Ccircle cx='40' cy='11' r='2.3' fill='%23fff0bf'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* metallic shield (โล่) emblem carrying the rank number */
.y70-podium-shield{
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .32));
}
.y70-podium-item--1 .y70-podium-shield{ width: 70px; height: 80px; background: linear-gradient(158deg, #fff3c4 0%, #f3c64a 46%, #b8860b 100%); }
.y70-podium-item--2 .y70-podium-shield{ background: linear-gradient(158deg, #ffffff 0%, #d4dae4 46%, #98a2b1 100%); }
.y70-podium-item--3 .y70-podium-shield{ background: linear-gradient(158deg, #ffd9b0 0%, #d3884a 48%, #8a4b1e 100%); }
.y70-podium-shield__num{
  font-size: 24px;
  font-weight: 900;
  color: rgba(60, 35, 5, .9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.y70-podium-item--1 .y70-podium-shield__num{ font-size: 30px; }
.y70-podium-item--2 .y70-podium-shield__num{ color: rgba(40, 50, 70, .92); }

/* tier chip + text */
.y70-podium-tier{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 2px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
}
.y70-podium-name{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y70-podium-item--1 .y70-podium-name{ font-size: 18px; }
.y70-podium-amt{
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.y70-podium-item--1 .y70-podium-amt{ font-size: 25px; }
.y70-podium-amt small{ font-size: .56em; font-weight: 700; opacity: .82; }
.y70-podium-hint{ margin-top: 2px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .82); }
.y70-podium-card:hover .y70-podium-hint{ color: #fff; }

/* slide-up entrance: rises from below, staggered 3 → 2 → 1 (champion last) */
@keyframes y70-podium-rise{
  from{ opacity: 0; transform: translateY(34px); }
  to{ opacity: 1; transform: none; }
}
.y70-podium-item{ animation: y70-podium-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.y70-podium-item--3{ animation-delay: .04s; }
.y70-podium-item--2{ animation-delay: .16s; }
.y70-podium-item--1{ animation-delay: .30s; }

@media (max-width: 720px){
  .y70-podium{ grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .y70-podium-item--1{ order: 1; }
  .y70-podium-item--2{ order: 2; }
  .y70-podium-item--3{ order: 3; }
  .y70-podium-item--1 .y70-podium-card,
  .y70-podium-item--2 .y70-podium-card,
  .y70-podium-item--3 .y70-podium-card{ min-height: 0; }
  .y70-podium-name{ margin-top: 4px; }
}

/* Homepage CTA → full stats page (sits under the ranking section, home only) */
.y70-stats-cta-wrap{ display: flex; justify-content: center; margin: 6px 0 22px; }
.y70-stats-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: 0 4px 12px rgba(126, 0, 29, .08);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.y70-stats-cta:hover{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(126, 0, 29, .22);
}
.y70-stats-cta__arrow{ transition: transform .2s ease; }
.y70-stats-cta:hover .y70-stats-cta__arrow{ transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .y70-stats-cta, .y70-stats-cta__arrow{ transition: none; }
  .y70-stats-cta:hover{ transform: none; }
}

/* =========================================================================
   PART 2 — Full ranking list, collapsible wrapper (<details class="y70-ranklist">)
   ========================================================================= */
.y70-ranklist > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* No flex-wrap (defaulted to nowrap) — on narrow screens the title (long
     text, no white-space:nowrap so it CAN wrap internally, but as a flex
     item its default min-width:auto still won't let it shrink below its
     content size) plus the "13 หน่วยงาน" badge and toggle text (both
     white-space:nowrap) together exceed the available width, and nowrap
     just lets them all overflow/crowd past the row's edge instead of
     reflowing — the squeezed, overlapping look in the bug report. wrap lets
     the badge+toggle drop to their own line under the title when they
     don't fit, instead of spilling out. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 2px 12px;
}
.y70-ranklist > summary::-webkit-details-marker{ display: none; }
.y70-ranklist__title{
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  margin-right: auto;
  /* Without this, the title (Thai text has no spaces, so the browser can
     shrink it token-by-token — effectively char-by-char) would rather
     squeeze itself down to 2+ internal lines than let .y70-ranklist__side
     wrap to a new flex line of its own — leaving the badge/toggle
     vertically centered against a lopsided, now-multi-line title instead
     of the row looking evenly centered. A floor stops that: once the row
     is too narrow for title-at-this-width + side, side wraps as a whole
     unit instead. */
  min-width: 160px;
}
/* Badge + toggle grouped as one flex item — see the markup comment in
   template-parts/ranking/list.php for why: keeps them moving to a new line
   TOGETHER, never splitting from each other or forcing the title to
   internally reflow into a lopsided multi-line block just to keep sharing
   a line with them. */
.y70-ranklist__side{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.y70-ranklist__meta{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.y70-ranklist__toggle{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}
.y70-ranklist__toggle-close{ display: none; }
.y70-ranklist[open] > summary .y70-ranklist__toggle-open{ display: none; }
.y70-ranklist[open] > summary .y70-ranklist__toggle-close{ display: inline; }
.y70-ranklist__chevron{ transition: transform .24s ease; }
.y70-ranklist[open] > summary .y70-ranklist__chevron{ transform: rotate(180deg); }
.y70-ranklist[open] > summary{ border-bottom: 1px solid var(--border); margin-bottom: 10px; }

/* brief highlight when a row is jumped-to from a podium tile */
@keyframes y70-rank-flash{
  0%, 100%{ box-shadow: 0 0 0 0 transparent; }
  18%{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 42%, transparent); }
}
.y70-rank-detail.is-jump-target{ animation: y70-rank-flash 1.6s ease; }

@media (prefers-reduced-motion: reduce){
  .y70-podium-item{ animation: none; }
  .y70-podium-card{ transition: none; }
  .y70-podium-card:hover{ transform: none; }
  .y70-rank-detail.is-jump-target{ animation: none; }
}

.y70-campaign{
  text-align:center;
  padding: 6px 0 4px;
}
.y70-campaign h2{
  margin:0 0 8px;
  font-size: 20px;
  font-weight: 900;
}
.y70-campaign p{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.y70-link-more{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  color: var(--primary);
  font-weight: 900;
}

.y70-carousel{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.y70-carousel::-webkit-scrollbar{ height: 8px; }
.y70-carousel::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 999px;
}
.y70-card-media{
  min-width: 250px;
  max-width: 250px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  overflow:hidden;
}
.y70-card-media.big{
  min-width: 290px;
  max-width: 290px;
}
.y70-card-media .img{
  height: 170px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.y70-card-media .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.y70-card-media .body{
  padding: 10px 12px;
}
.y70-card-media .title{
  font-weight: 900;
  color: var(--dark);
  margin: 0 0 6px;
  font-size: 14px;
}
.y70-card-media .meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

/* ===== Site footer (template-parts/site-footer.php) ===== */
.y70-foot{ margin-top: 40px; }

.y70-foot__main{
  position: relative;
  background:
    radial-gradient(880px 360px at 86% -30%, rgba(167,45,51,.30), transparent 60%),
    linear-gradient(180deg, #32353a, var(--dark));
  color: #fff;
  border-top: 4px solid var(--primary);
  padding: 52px 0 42px;
}
.y70-foot__grid{
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 40px 32px;
}

/* --- brand block --- */
.y70-foot__logo{ display:inline-flex; align-items:center; gap:12px; color:#fff; }
.y70-foot__logo img{ filter: brightness(0) invert(1); flex:0 0 auto; }
.y70-foot__logo-text{ display:flex; flex-direction:column; line-height:1.25; }
.y70-foot__logo-text strong{ font-size:18px; font-weight:800; }
.y70-foot__logo-text small{ font-size:11.5px; color:rgba(255,255,255,.62); letter-spacing:.02em; }
.y70-foot__tagline{ margin:16px 0 14px; color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.7; }
.y70-foot__tagline b{ color:#fff; font-weight:800; }
.y70-foot__addr{ margin:0; color:rgba(255,255,255,.58); font-size:13px; line-height:1.75; max-width:44ch; }

/* --- link columns --- */
.y70-foot__head{
  margin:0 0 16px; font-size:15px; font-weight:800; color:#fff;
  position:relative; padding-bottom:10px;
}
.y70-foot__head::after{
  content:""; position:absolute; left:0; bottom:0;
  width:30px; height:3px; border-radius:3px; background:var(--primary-600);
}
.y70-foot__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.y70-foot__link{
  color:rgba(255,255,255,.72); font-size:14px; display:inline-flex; align-items:center; gap:8px;
  transition: color .18s ease, transform .18s ease;
}
.y70-foot__link::before{ content:"\203A"; color:var(--primary-600); font-weight:900; transition: color .18s ease; }
.y70-foot__link:hover{ color:#fff; transform: translateX(3px); }
.y70-foot__link:hover::before{ color:#fff; }

/* --- contact column --- */
.y70-foot__contact{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:13px; }
.y70-foot__contact li{ display:flex; align-items:flex-start; gap:11px; }
.y70-foot__contact a{ color:rgba(255,255,255,.82); font-size:14px; line-height:1.55; transition: color .18s ease; }
.y70-foot__contact a:hover{ color:#fff; }
.y70-foot__sub{ margin-left:7px; font-size:12.5px; color:rgba(255,255,255,.5); }

/* --- donation channel block --- */
.y70-foot__bank{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:12px; padding:12px 14px; margin-bottom:12px;
}
.y70-foot__bank-name{ margin:0; font-size:13px; color:rgba(255,255,255,.7); }
.y70-foot__bank-acct{ margin:3px 0 4px; font-size:20px; font-weight:800; color:#fff; letter-spacing:.04em; }
.y70-foot__bank-sub{ margin:0; font-size:12.5px; color:rgba(255,255,255,.62); }
.y70-foot__bank-note{ margin:0 0 12px; font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.6; }
.y70-foot__ico{
  flex:0 0 32px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff;
}
.y70-foot__ico svg{ width:16px; height:16px; display:block; }

/* --- donate CTA --- */
.y70-foot__cta{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background:var(--primary); color:#fff; font-weight:800; font-size:14.5px;
  padding:11px 26px; border-radius:999px;
  box-shadow:0 8px 22px rgba(126,0,29,.4);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.y70-foot__cta:hover{
  background:var(--primary-600); color:#fff; transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(126,0,29,.5);
}

/* --- social --- */
.y70-foot__social{ display:flex; gap:10px; flex-wrap:wrap; }
.y70-foot__sbtn{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.y70-foot__sbtn svg{ width:20px; height:20px; display:block; }
.y70-foot__sbtn:hover{ background:var(--primary); border-color:var(--primary); color:#fff; transform: translateY(-3px); }

/* --- bottom bar (maroon) --- */
.y70-foot__bar{
  background:var(--primary); color:#fff; padding:14px 0;
  padding-bottom: calc(14px + var(--y70-progress-h) + env(safe-area-inset-bottom));
}
.y70-foot__bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.y70-foot__phone{ display:inline-flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:20px; letter-spacing:.02em; }
.y70-foot__phone-ico{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
}
.y70-foot__phone-ico svg{ width:20px; height:20px; }
.y70-foot__phone:hover{ color:#fff; }
.y70-foot__phone:hover .y70-foot__phone-ico{ background:rgba(255,255,255,.28); }
.y70-foot__phone--line .y70-foot__phone-ico{ background:#fff; border-color:#fff; color:var(--primary); }
.y70-foot__phone--line:hover .y70-foot__phone-ico{ background:rgba(255,255,255,.9); }
.y70-foot__copy{ margin:0; font-size:13px; color:rgba(255,255,255,.9); }

@media (max-width: 980px){
  .y70-foot__grid{ grid-template-columns: 1fr 1fr; }
  .y70-foot__brand{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .y70-foot__main{ padding:40px 0 32px; }
  .y70-foot__grid{ grid-template-columns: 1fr; gap:30px; }
  .y70-foot__bar-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .y70-foot__phone{ font-size:18px; }
}

/* ===== HERO background building + fade ===== */
body.home .y70-hero-home{
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

body.home .y70-hero-home .y70-hero-center{
   width: 100%;
  min-height: calc(100vh);  /* 🔥 เต็มจอแบบไม่โดน header ทับ */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 0 20px;
}



body.home .y70-total-wrap{
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

body.home .y70-orbit-center{
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.home .y70-logo-row{
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ให้เนื้อหาอยู่เหนือภาพพื้นหลัง */
body.home .y70-hero-home > *{
  position: relative;
  z-index: 1;
}

/* โลโก้รูป */
.y70-campaign-logo{
  max-width: 220px; /* ปรับได้ */
  width: min(320px, 72vw);
  height: auto;
  display:block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 34px var(--logo-glow-shadow));
}

.y70-logo-row{
  position: relative;
}

.y70-logo-row::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, 84vw);
  height: min(230px, 44vw);
  transform: translate(-50%, -50%);
  /* background: radial-gradient(ellipse at center, var(--logo-aura-start) 0%, var(--logo-aura-mid) 45%, var(--logo-aura-end) 75%); */
  filter: blur(10px);
  pointer-events: none;
  z-index: 1;
}


/* ===== Hero background only in y70-hero-center + fade after donate ===== */
body.home .y70-hero-center{
  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: calc(100vh - 72px); /* ถ้า header fixed 72px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* padding: 0 20px 40px; */

  /* กันข้อความอ่านยาก */
  background: var(--bg);
}

/* ภาพตึกอยู่เฉพาะใน hero-center */
body.home .y70-hero-center::before{
  content:"";
  position:absolute;
  background-image: url("../images/hero-banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.28;          /* ปรับความเข้มภาพตึก */
  inset:0;
  pointer-events:none;
}

/*
  เฟดเริ่ม "หลังปุ่มร่วมบริจาค" โดยอิงตำแหน่งของ .y70-total-wrap
  - ให้พื้นหลังชัดจนถึงก้นของ total-wrap
  - จากนั้นเฟดในช่วง 200px
  - สุดท้ายหายไป = กลืนกับ var(--bg)
*/


body.home .y70-hero-center::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* จุดเฟด = calc(100% - 200px) ไม่แม่นตามปุ่ม -> ใช้วิธี anchor จาก total-wrap ดีกว่า */
  background:
  linear-gradient(180deg,
    transparent 0%,
    transparent 60%,     /* ภาพชัดถึง 60% */
    var(--bg) 80%        /* เฟดจบก่อนถึงล่าง */
  );
}

/* White center strip on all breakpoints, tuned per screen size */
body.home .y70-hero-center::after{
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 10%,
      var(--hero-center-edge) 26%,
      var(--hero-center-core) 50%,
      var(--hero-center-edge) 74%,
      transparent 90%,
      transparent 100%
    ),
    linear-gradient(180deg,
      transparent 0%,
      transparent 60%,
      var(--bg) 80%
    );
}

@media (min-width: 576px){
  /* body.home .y70-hero-center::after{
    background:
      linear-gradient(90deg,
        transparent 0%,
        transparent 13%,
        var(--hero-center-edge) 29%,
        var(--hero-center-core) 50%,
        var(--hero-center-edge) 71%,
        transparent 87%,
        transparent 100%
      ),
      linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        var(--bg) 80%
      );
  } */
}

@media (min-width: 768px){
  body.home .y70-hero-center::after{
    background:
      linear-gradient(90deg,
        transparent 0%,
        transparent 16%,
        var(--hero-center-edge) 31%,
        var(--hero-center-core) 50%,
        var(--hero-center-edge) 69%,
        transparent 84%,
        transparent 100%
      ),
      linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        var(--bg) 80%
      );
  }
}

@media (min-width: 1024px){
  body.home .y70-hero-center::after{
    background:
      linear-gradient(90deg,
        transparent 0%,
        transparent 18%,
        var(--hero-center-edge) 33%,
        var(--hero-center-core) 50%,
        var(--hero-center-edge) 67%,
        transparent 82%,
        transparent 100%
      ),
      linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        var(--bg) 80%
      );
  }
}

@media (min-width: 1024px) and (orientation: landscape){
  body.home .y70-hero-center::after{
    background:
      linear-gradient(90deg,
        transparent 0%,
        transparent 20%,
        var(--hero-center-edge) 34%,
        var(--hero-center-core) 50%,
        var(--hero-center-edge) 66%,
        transparent 80%,
        transparent 100%
      ),
      linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        var(--bg) 80%
      );
  }
}

/* ทำให้ content อยู่เหนือภาพ */
body.home .y70-hero-center > *{
  position: relative;
  z-index: 1;
}

body.home .y70-hero-gears{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.home .y70-hero-gears .gear{
  position: absolute;
  background: var(--gear-color-1);
  -webkit-mask-image: url("../images/gear_hero.svg");
  mask-image: url("../images/gear_hero.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.5;
}

body.home .y70-hero-gears .gear.g1{
  width: 240px;
  height: 240px;
  left: 6%;
  top: 18%;
  animation: y70-gear-spin 72s linear infinite;
  background: var(--gear-color-1);
}

body.home .y70-hero-gears .gear.g2{
  width: 160px;
  height: 160px;
  right: 12%;
  top: 24%;
  animation: y70-gear-spin-rev 58s linear infinite;
  background: var(--gear-color-2);
}

body.home .y70-hero-gears .gear.g3{
  width: 310px;
  height: 310px;
  right: -4%;
  bottom: 14%;
  animation: y70-gear-spin 92s linear infinite;
  background: var(--gear-color-3);
}

@keyframes y70-gear-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes y70-gear-spin-rev{
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce){
  body.home .y70-hero-gears .gear{
    animation: none !important;
  }
}

body.home .y70-hero-progress-dock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0 0 env(safe-area-inset-bottom);
}

body.home .y70-total-wrap .y70-btn.primary{
  font-size: clamp(14px, 1vw, 20px);
  padding: clamp(9px, 0.7vw, 13px) clamp(16px, 1.1vw, 24px);
  border-radius: 16px;
}

/* ===== Scroll Down (อยู่หลังช่วงเฟด) ===== */
body.home .y70-hero-center .y70-scroll-down{
  position: absolute;
  left: 50%;
  bottom: calc(var(--y70-progress-h) + 120px + env(safe-area-inset-bottom));
  transform: translateX(-50%);

  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid var(--dark);
  color: var(--dark);        /* 🔥 สีดำ */
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;

  animation: y70-bounce 1.4s infinite;
  z-index: 3;                /* อยู่เหนือเฟด */
}

@keyframes y70-bounce{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ===== Header logo layout (fixed) ===== */
.kmutt-block-logo{
  display:flex;
  align-items:flex-end;      /* <-- ทั้งแถวชิดล่าง */
  gap:12px;
  text-decoration:none;
}

/* โลโก้ */
.kmutt-block-logo .kmutt-logo{
  display:block;
  width:52px;
  height:60px;
  margin:0;                  /* กัน margin เดิม */
}

/* เส้นคั่น: สูงตามตัวอักษร (ไม่ stretch เต็มบล็อก) */
.kmutt-block-logo .line-logo{
  width:1px;
  height:45px;               /* ปรับ 36-48px ตามที่ดูดี */
  background: var(--border);
  opacity:.9;
  margin-bottom:0px;         /* ให้ฐานเส้นอยู่ใกล้ baseline โลโก้ */
}

/* กล่องข้อความ */
.kmutt-block-logo .site-name{
  display:flex;
  flex-direction:column;
  justify-content:center;    /* จัดกลางภายในกล่อง */
  gap:3px;
  margin-bottom:2px;         /* <-- ดันข้อความขึ้นเล็กน้อยให้ดู “กึ่งกลาง” */
}

/* บรรทัดไทย/อังกฤษ */
.site-name-th{
  display:inline-block;
  font-weight:800;
  font-size:20px;
  line-height:1.15;
  width:100%;                /* ให้ไทยยาวเต็มกล่อง */
}

.site-name-en{
  display:block;
  font-weight:600;
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;        /* กันตัดบรรทัด */
}


/* ===== Header fixed + nav offset (HOME) ===== */
body.home .y70-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent;
}

/* nav ตอนเริ่ม: โปร่งใส + เลื่อนลง 70px */
body.home .y70-nav{
  background: transparent;
  transform: translateY(clamp(40px, 7vh, 80px)); /* 70px หรือสัดส่วนจอ */
  transition: transform .50s ease, background .50s ease, box-shadow .50s ease;
}


body.home .y70-header{
background: transparent;
  transition: transform 1.10s ease, background 1.10s ease, box-shadow 1.10s ease;
}
/* ===== When scrolled: pin top + primary ===== */
body.y70-scrolled  .y70-nav{
  transform: translateY(0);
  /*background: var(--primary);*/
  /*box-shadow: 0 8px 24px rgba(0,0,0,.12);*/
}

body.y70-scrolled  .y70-header{
  transform: translateY(0);
  background: var(--primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}



/* Transparent state: text black */
body .y70-menu a{ color: var(--dark); }
body .site-name,
body .site-name span{ color: var(--dark); }
body .line-logo{ background: var(--dark); }

/* โลโก้ (คุณใช้ <img> SVG สีขาวล้วน) ให้เป็นดำตอนอยู่บนสุด */
body.home .kmutt-logo{ filter: brightness(0); }

/* Fixed(primary) state: text white */
body.y70-scrolled .y70-menu a { background: transparent; color: var(--card); }
body.y70-scrolled .site-name,
body.y70-scrolled .site-name span{ color: var(--card); }
body.y70-scrolled .line-logo{ background: var(--card); }

/* โลโก้ขาวตอน scrolled */
body.y70-scrolled .kmutt-logo{ filter: brightness(0) invert(1); }

/* กัน header fixed ทับเนื้อหา */
body.home main{
  padding-top: 0px; /* ปรับตามความสูงจริง + offset */
  padding-bottom: calc(var(--y70-progress-h) + env(safe-area-inset-bottom));
}

/* ===== Inner pages: same 2-state header as the home page =====================
   Top state  → transparent bar, dark text/logo, with a thin bottom divider
                (kept in both states per design).
   Scrolled   → reuses the GLOBAL `body.y70-scrolled .y70-header` rules above
                (primary-green bar, white text/logo). Sticky — not fixed — so it
                pins to the top without overlapping content or needing padding
                hacks. Applies to every non-home page (news/results/singles/
                archives/shop/donation/blog) via variant "inner".
   ========================================================================== */
.y70-header--inner{
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--border);
  transition: background .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.y70-header--inner .y70-nav{ padding: 12px 0; }

/* Top (not-scrolled) state: dark logo + readable site name over the light page */
body:not(.y70-scrolled) .y70-header--inner .kmutt-logo{ filter: none; }
body:not(.y70-scrolled) .y70-header--inner .site-name-th{ color: var(--dark); }
body:not(.y70-scrolled) .y70-header--inner .site-name-en{ color: var(--muted); }
body:not(.y70-scrolled) .y70-header--inner .line-logo{ background: var(--border); }

/* Keep a subtle bottom divider even on the green scrolled bar */
body.y70-scrolled .y70-header--inner{ border-bottom-color: rgba(255,255,255,.18); }

/* ===== Empty state — full graphic "ไม่พบ…" block for zones with no content == */
.y70-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  width: 100%;
  padding: clamp(36px, 6vw, 72px) 20px;
}
.y70-empty__art{
  width: clamp(120px, 18vw, 168px);
  height: clamp(120px, 18vw, 168px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background:
    radial-gradient(120px 120px at 50% 34%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--primary) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 10%, transparent);
}
.y70-empty__art svg{ width: 58%; height: 58%; display: block; }
.y70-empty__title{
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--dark);
}
.y70-empty__text{
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
}
.y70-empty__cta{ margin-top: 6px; }
/* Compact variant for tighter cards (e.g. the ranking card) */
.y70-empty--compact{ padding: clamp(24px, 4vw, 40px) 16px; }
.y70-empty--compact .y70-empty__art{ width: 92px; height: 92px; }
.y70-empty--compact .y70-empty__title{ font-size: 1.1rem; }

@media (max-width: 980px){
  body.home .y70-hero-center{
    padding-bottom: 96px;
  }

  body.home .y70-total-wrap .y70-btn.primary{
    font-size: clamp(18px, 4.6vw, 30px);
    padding: 12px 24px;
  }

  body.home .y70-hero-center .y70-scroll-down{
    bottom: calc(var(--y70-progress-h) + 80px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 981px){
  .y70-total-wrap .v{
    font-size: clamp(48px, 5.6vw, 80px);
  }
}

@media (max-width: 560px), (max-height: 760px){
  body.home .y70-hero-center{
    padding-bottom: 60px;
  }

  body.home .y70-hero-progress-dock{
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.home .y70-hero-center .y70-scroll-down{
    bottom: calc(var(--y70-progress-h) + 70px + env(safe-area-inset-bottom));
  }
}


@media (max-width: 1250px){
  .y70-menu .y70-menu__link{ display:none; }
  .y70-menu .y70-menu__donate{ display:inline-flex; }
}


/* ===== Donate Landing (page-donate-form.php) ===== */
body.y70-donate-page{
  background: var(--bg);
}

.y70-donate-hero{
  position: relative;
  isolation: isolate;
  border-bottom: 4px solid var(--primary);
  background: var(--bg);
}

.y70-donate-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent, var(--donate-hero-fade)), var(--hero);
  background-size: cover;
  background-position: center;
  opacity: .95;
  z-index: -2;
}

.y70-donate-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, var(--bg) 98%);
  z-index: -1;
}

.y70-donate-hero__inner{
  min-height: 210px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 16px 0 0;
}

.y70-donate-hero__brand{
  justify-self: start;
}

.y70-donate-hero__center{
  justify-self: center;
  align-self: center;
}

.y70-donate-hero__center .y70-campaign-logo{
  width: clamp(120px, 16vw, 190px);
  max-width: none;
}

.y70-donate-hero__home{
  padding-bottom: 12px;
}

.y70-donate-home-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--primary);
  color: var(--card);
  font-weight: 800;
}

.y70-donate-main{
  position: relative;
  padding: 20px 0 34px;
}

.y70-donate-main::before,
.y70-donate-main::after{
  content: "";
  position: fixed;
  width: 360px;
  height: 360px;
  background: var(--donate-gear-bg);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
  mask: url("../images/gear_hero.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.y70-donate-main::before{
  left: -120px;
  bottom: 180px;
}

.y70-donate-main::after{
  right: -120px;
  top: 220px;
}

.y70-donate-total,
.y70-donate-rank{
  position: relative;
  z-index: 1;
}

.y70-donate-total{
  text-align: center;
}

.y70-donate-total h1{
  margin: 8px 0 6px;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 900;
}

.y70-donate-total .amount{
  font-size: clamp(46px, 8.5vw, 96px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.y70-donate-cta{
  min-width: min(420px, 90vw);
  font-size: clamp(22px, 3vw, 48px);
  padding: clamp(10px, 1.1vw, 18px) clamp(20px, 2.3vw, 40px);
  border-radius: 20px;
}

.y70-donate-sub{
  margin: 18px 0 12px;
  font-weight: 900;
  font-size: clamp(20px, 2.3vw, 36px);
}

.y70-split-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.y70-split-card{
  background: var(--donate-surface);
  border: 1px solid var(--donate-soft-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 16px var(--donate-shadow);
}

.y70-split-card .pct{
  font-size: clamp(36px, 4.5vw, 70px);
  font-weight: 900;
  line-height: 1;
  padding: 18px 10px 16px;
}

.y70-split-card .amt{
  background: var(--primary);
  color: var(--card);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 700;
  padding: 10px;
}

.y70-split-card .name{
  background: var(--dark);
  color: var(--card);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 600;
  padding: 10px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.y70-donate-rank{
  margin-top: 28px;
}

.y70-donate-rank h2{
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 900;
}

.y70-donate-rank-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(980px, 92vw);
  margin: 0 auto;
}

.y70-donate-rank-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--donate-soft-bg);
  border: 1px solid var(--donate-soft-border);
  border-radius: 14px;
  box-shadow: 0 7px 14px var(--donate-shadow);
}

.y70-donate-rank-item .left{
  font-size: clamp(18px, 1.65vw, 28px);
  font-weight: 900;
}

.y70-donate-rank-item .right{
  font-size: clamp(17px, 1.5vw, 24px);
  color: var(--dark);
  white-space: nowrap;
}

.y70-donate-rank-item .arrow{
  color: var(--primary);
  font-weight: 900;
}

@media (max-width: 980px){
  .y70-donate-hero__inner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 180px;
  }

  .y70-donate-hero__brand{
    justify-self: center;
  }

  .y70-split-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .y70-donate-rank-item{
    flex-direction: column;
    align-items: flex-start;
  }

  .y70-donate-rank-item .right{
    white-space: normal;
  }
}

@media (max-width: 560px){
  .y70-split-grid{
    grid-template-columns: 1fr;
  }

  .y70-donate-main::before,
  .y70-donate-main::after{
    width: 220px;
    height: 220px;
    opacity: .75;
  }

  .y70-donate-main::before{
    left: -80px;
    bottom: 140px;
  }

  .y70-donate-main::after{
    right: -85px;
    top: 280px;
  }
}

/* ===== Donate QR Page (page-donate-form.php) ===== */
.y70-qr-main{
  padding: 10px 0 calc(18px + var(--y70-progress-h));
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 96px - var(--y70-progress-h));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.y70-qr-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 84%, transparent 16%), color-mix(in srgb, var(--bg) 82%, transparent 18%)),
    var(--qr-hero);
  background-size: cover;
  background-position: center;
  opacity: .86;
  z-index: -1;
  pointer-events: none;
}

.y70-qr-main::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 48%, color-mix(in srgb, var(--bg) 86%, transparent 14%) 100%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 94%, transparent 6%) 100%);
  pointer-events: none;
  z-index: -1;
}

.y70-qr-shell{
  width: min(980px, 92vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.y70-qr-shell > *{
  opacity: 0;
  transform: translateY(12px);
  animation: y70-qr-enter .55s ease forwards;
}

.y70-qr-shell > *:nth-child(1){ animation-delay: .02s; }
.y70-qr-shell > *:nth-child(2){ animation-delay: .08s; }
.y70-qr-shell > *:nth-child(3){ animation-delay: .14s; }

.y70-qr-title{
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  transition: transform .34s ease, opacity .34s ease, filter .34s ease;
}

.y70-qr-select-wrap{
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto 12px;
  padding: 6px 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--muted) 20%);
  box-shadow: 0 8px 16px rgba(42,44,47,.08);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.y70-qr-select-wrap:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border) 68%);
  box-shadow: 0 12px 20px rgba(42,44,47,.14);
}

.y70-qr-select-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--primary);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
  mask: url("../images/gear_hero.svg") no-repeat center / contain;
  opacity: .95;
  pointer-events: none;
}

.y70-qr-select-wrap::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--dark) 84%, var(--muted) 16%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.y70-qr-select{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  color: var(--dark);
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  padding: 11px 44px 11px 52px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.y70-qr-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent 80%);
}

.y70-qr-panel{
  margin: 0 auto;
  width: min(720px, 100%);
  text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}

.y70-qr-panel.is-empty{
  opacity: .64;
}

.y70-qr-panel.is-switching{
  opacity: .92;
}

.y70-qr-panel.is-empty .y70-qr-card,
.y70-qr-panel.is-empty .y70-qr-note,
.y70-qr-panel.is-empty .y70-qr-download{
  display: none;
}

.y70-qr-panel-title{
  margin: 0 0 10px;
  font-size: clamp(20px, 2.25vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  transition: transform .34s ease, opacity .34s ease, filter .34s ease;
}

.y70-qr-card{
  position: relative;
  width: min(500px, 100%);
  margin: 0 auto 8px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border) 76%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--bg) 8%), color-mix(in srgb, var(--bg) 90%, var(--card) 10%));
  box-shadow: 0 18px 30px rgba(42, 44, 47, 0.14);
  padding: 16px 14px 10px;
  overflow: hidden;
  backdrop-filter: blur(2px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.y70-qr-card-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
  color: color-mix(in srgb, var(--dark) 78%, var(--primary) 22%);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.y70-qr-card-close:hover{
  transform: scale(1.06);
  background: var(--primary);
  border-color: var(--primary);
  color: var(--card);
}

.y70-qr-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  box-shadow: 0 22px 36px rgba(42, 44, 47, 0.2);
}

.y70-qr-card.is-flipping{
  animation: y70-qr-flip .72s cubic-bezier(.2,.7,.2,1);
}

.y70-qr-card.is-dropping{
  pointer-events: none;
  animation: y70-qr-drop .5s cubic-bezier(.22,.8,.3,1) forwards;
}

.y70-qr-card.is-lifting{
  animation: y70-qr-lift .46s cubic-bezier(.2,.8,.2,1);
}

.y70-qr-card.is-lifting-soft{
  animation: y70-qr-lift-soft .34s cubic-bezier(.2,.8,.2,1);
}

.y70-qr-card-top{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
}

.y70-qr-campaign-mark{
  width: clamp(112px, 20vw, 168px);
  max-width: 76%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(126,0,29,.2));
}

.y70-qr-card-frame{
  width: min(380px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--muted) 22%);
  background: var(--card);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card) 78%, var(--primary) 22%);
  transition: box-shadow .25s ease, border-color .25s ease;
}

.y70-qr-card:hover .y70-qr-card-frame{
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card) 70%, var(--primary) 30%), 0 8px 18px rgba(42,44,47,.12);
}

.y70-qr-image{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 96%, var(--bg) 4%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.y70-qr-missing{
  width: 100%;
  min-height: min(380px, 72vw);
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border) 66%);
  background: color-mix(in srgb, var(--card) 82%, var(--bg) 18%);
  color: var(--muted);
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  padding: 12px;
}

.y70-qr-missing[hidden]{
  display: none !important;
}

.y70-qr-missing strong{
  color: var(--primary);
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.1;
}

.y70-qr-missing span{
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 700;
}

.y70-qr-card.is-missing .y70-qr-image{
  display: none;
}

.y70-qr-card-bottom{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "dept dept"
    "uni ed";
  align-items: center;
  gap: 10px 12px;
}

.y70-qr-university{
  grid-area: uni;
  margin: 0;
  text-align: left;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.2;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.y70-qr-dept{
  grid-area: dept;
  margin: 0 0 2px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  color: var(--card);
  box-shadow: 0 8px 14px rgba(126, 0, 29, 0.22);
  text-align: center;
  font-size: clamp(17px, 1.9vw, 25px);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.y70-qr-edonation{
  grid-area: ed;
  margin: 0;
  text-align: right;
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 700;
  color: color-mix(in srgb, var(--dark) 82%, var(--muted) 18%);
  white-space: nowrap;
}

.y70-qr-card-gear{
  position: absolute;
  width: 120px;
  height: 120px;
  background: color-mix(in srgb, var(--primary) 20%, var(--bg) 80%);
  -webkit-mask: url("../images/gear_hero.svg") no-repeat center / contain;
  mask: url("../images/gear_hero.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.y70-qr-card-gear.g1{
  left: -30px;
  top: -22px;
}

.y70-qr-card-gear.g2{
  right: -34px;
  bottom: -28px;
}

.y70-qr-note{
  margin: 6px auto 10px;
  width: min(620px, 100%);
  color: var(--muted);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.35;
  text-align: center;
}

.y70-qr-altlink{
  margin: 2px auto 0;
  width: min(620px, 100%);
  color: var(--muted);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.4;
  text-align: center;
}
.y70-qr-altlink a{
  color: var(--primary-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.y70-qr-altlink a:hover{ color: var(--primary); }

/* Save-QR button + same-device pay tip (QR-only page) */
.y70-qr-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(620px, 100%);
  margin: 10px auto 0;
}
.y70-qr-save{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: clamp(14px, 1.4vw, 16px);
  transition: background .18s, transform .12s;
}
.y70-qr-save:hover{ background: var(--primary-600); color: #fff; }
.y70-qr-save:active{ transform: translateY(1px); }
.y70-qr-save svg{ flex: 0 0 auto; }
.y70-qr-save.is-capturing{ opacity: .7; pointer-events: none; }
.y70-qr-paytip{
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.45;
  text-align: center;
}
.y70-qr-paytip b{ color: var(--dark); }

.y70-qr-download{
  min-width: min(340px, 92vw);
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 18px;
}

.y70-qr-download:disabled{
  opacity: .56;
  cursor: not-allowed;
}

.y70-hero-progress-dock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0 0 env(safe-area-inset-bottom);
}

body.y70-qr-page .y70-donate-hero{
  background: var(--bg);
  border-bottom: 0;
}

body.y70-qr-page .y70-donate-hero::before,
body.y70-qr-page .y70-donate-hero::after{
  content: none;
}

body.y70-qr-page .y70-qr-select,
body.y70-qr-page .y70-qr-select option{
  font-family: var(--y70-font-base);
}

@media (max-width: 760px){
  .y70-qr-card-bottom{
    grid-template-columns: 1fr;
    grid-template-areas:
      "dept"
      "uni"
      "ed";
    align-items: center;
    justify-items: center;
    gap: 5px;
  }

  .y70-qr-university,
  .y70-qr-edonation{
    text-align: center;
  }
}

.y70-qr-shell.is-scroll-down .y70-qr-title{
  transform: translateY(-8px);
  opacity: .9;
  filter: saturate(.96);
}

.y70-qr-shell.is-scroll-down .y70-qr-select-wrap{
  transform: translateY(-4px);
}

.y70-qr-shell.is-scroll-down .y70-qr-panel-title{
  transform: translateY(8px);
  opacity: .86;
}

.y70-qr-shell.is-scroll-up .y70-qr-title{
  transform: translateY(-2px);
}

.y70-qr-shell.is-scroll-up .y70-qr-select-wrap{
  transform: translateY(0);
}

.y70-qr-shell.is-scroll-up .y70-qr-panel-title{
  transform: translateY(0);
  opacity: 1;
}

.y70-qr-shell:not(.is-card-open) .y70-qr-panel-title{
  opacity: .78;
  transform: translateY(4px);
}

@keyframes y70-qr-enter{
  from{
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes y70-qr-flip{
  0%{ transform: perspective(1100px) rotateY(0deg); }
  48%{ transform: perspective(1100px) rotateY(-90deg); }
  52%{ transform: perspective(1100px) rotateY(-90deg); }
  100%{ transform: perspective(1100px) rotateY(0deg); }
}

@keyframes y70-qr-drop{
  0%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100%{
    transform: translateY(36px) scale(.96);
    opacity: 0;
  }
}

@keyframes y70-qr-lift{
  0%{
    transform: translateY(26px) scale(.95);
    opacity: .2;
  }
  60%{
    transform: translateY(-4px) scale(1.01);
    opacity: 1;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes y70-qr-lift-soft{
  0%{ transform: translateY(8px) scale(.985); }
  100%{ transform: translateY(0) scale(1); }
}

@media (max-width: 560px){
  .y70-qr-card-close{
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .y70-qr-card{
    border-radius: 18px;
    padding: 18px 12px 10px;
  }

  .y70-qr-card-frame{
    padding: 9px;
  }

  .y70-qr-download{
    min-width: min(280px, 90vw);
  }
}

@media (prefers-reduced-motion: reduce){
  .y70-qr-shell > *,
  .y70-qr-card.is-flipping,
  .y70-qr-card.is-lifting,
  .y70-qr-card.is-lifting-soft,
  .y70-qr-card.is-dropping{
    animation: none !important;
  }

  .y70-qr-card,
  .y70-qr-select-wrap{
    transition: none !important;
  }
}

/* Page transition */
body.y70-page-anim{
  opacity: 0;
  transition: opacity .26s ease;
}

body.y70-page-anim.y70-page-ready{
  opacity: 1;
}

body.y70-page-anim.y70-page-leaving{
  opacity: 0;
}

.y70-page-transition{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 40%, color-mix(in srgb, var(--card) 72%, transparent 28%) 0%, color-mix(in srgb, var(--bg) 95%, transparent 5%) 100%);
  backdrop-filter: blur(2px);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.y70-page-transition__logo{
  width: clamp(96px, 16vw, 160px);
  height: auto;
  display: block;
  opacity: .88;
  transform: translateY(8px) scale(.96);
  filter: drop-shadow(0 12px 24px rgba(126, 0, 29, .2));
  transition: transform .34s ease, opacity .34s ease;
}

.y70-page-transition.is-visible{
  opacity: 1;
}

.y70-page-transition.is-visible .y70-page-transition__logo{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: y70-page-logo-float 1.1s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce){
  body.y70-page-anim{
    transition: none !important;
    opacity: 1 !important;
  }

  .y70-page-transition,
  .y70-page-transition__logo{
    transition: none !important;
    animation: none !important;
  }
}

@keyframes y70-page-logo-float{
  from{ transform: translateY(0) scale(1); }
  to{ transform: translateY(-6px) scale(1.02); }
}