/* ============================================================
   ธรรมนูญสุขภาพพระสงฆ์แห่งชาติ — Global Stylesheet
   รวม CSS จากทั้ง 6 หน้า (dashboard, cluster, burden, priority, compare, prevalence)
   ============================================================ */

/* ===== CSS TOKENS ===== */
:root {
  --maroon-950: #33090D;
  --maroon-900: #4A0F15;
  --maroon-800: #6B1E23;
  --maroon-700: #8A2A2E;
  --saffron-600: #C97B1D;
  --saffron-500: #E8A23A;
  --saffron-300: #F4C878;
  --saffron-100: #FBE7C2;
  --parchment: #FBF3E3;
  --parchment-deep: #F3E6CC;
  --ink: #2A1F16;
  --ink-soft: #5B4C3C;
  --sage: #4F6B58;
  --sage-light: #7C9A85;
  --gold-line: #C9A15A;
  --card: #FFFDF8;
  --shadow: 0 10px 30px -12px rgba(51, 9, 13, .35);
}

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Sarabun', sans-serif;
  line-height: 1.7;
}
h1, h2, h3, h4, .display {
  font-family: 'Noto Serif Thai', serif;
  color: var(--maroon-900);
  margin: 0;
}
.eyebrow {
  font-family: 'Sarabun', sans-serif;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--saffron-600);
  text-transform: uppercase;
}
a { color: inherit; }

/* ===== NAV ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--maroon-950), var(--maroon-900) 85%);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4);
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--saffron-300);
  font-family: 'Noto Serif Thai', serif;
  font-weight: 700;
  font-size: .95rem;
}
.brand svg { width: 26px; height: 26px; flex: none; }
.navlinks { display: flex; gap: .3rem; flex-wrap: wrap; }
.navlinks button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--saffron-100);
  font-family: 'Sarabun', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
}
.navlinks button:hover {
  background: rgba(232, 162, 58, .12);
  border-color: rgba(232, 162, 58, .35);
}
.navlinks button.active {
  background: var(--saffron-500);
  color: var(--maroon-950);
  border-color: var(--saffron-500);
}

/* ===== HERO ===== */
header.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(232,162,58,.25), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(124,154,133,.18), transparent 45%),
    linear-gradient(160deg, var(--maroon-950) 0%, var(--maroon-900) 55%, var(--maroon-800) 100%);
  color: var(--parchment);
  padding: 4.2rem 1.25rem 3.6rem;
  overflow: hidden;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
}
.hero h1 {
  color: var(--parchment);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.25;
}
.hero h1 span { color: var(--saffron-500); }
.hero p {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--saffron-100);
  opacity: .92;
  max-width: 65ch;
  margin-inline: auto;
}
.hero .badge-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.3rem;
}
.hero .badge {
  background: rgba(251, 231, 194, .08);
  border: 1px solid rgba(232, 162, 58, .35);
  color: var(--saffron-300);
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
}

/* ===== SECTIONS ===== */
section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.6rem 1.25rem;
}
.sec-head {
  max-width: 780px;
  margin: 0 auto 2.2rem;
  text-align: center;
}
.sec-head h2 {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  margin-top: .4rem;
}
.sec-head p {
  color: var(--ink-soft);
  margin-top: .7rem;
  font-size: .96rem;
}
.divider {
  width: 60px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--saffron-500), var(--sage));
}

/* ===== SHARED COMPONENTS ===== */

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--parchment-deep);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}

/* Info callout */
.info-callout {
  background: #FFF7E8;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.info-callout .ic,
.info-callout .ic-badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--saffron-500);
  color: var(--maroon-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Noto Serif Thai', serif;
}
.info-callout p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.info-callout b { color: var(--maroon-800); }

/* Note */
.note { font-size: .78rem; color: var(--sage); margin-bottom: .9rem; }

/* Method note */
.method-note {
  background: var(--parchment-deep);
  border-radius: 10px;
  padding: .75rem .95rem;
  margin-top: .9rem;
  font-size: .76rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.method-note .row { margin-bottom: .3rem; }
.method-note .row:last-child { margin-bottom: 0; }
.method-note b { color: var(--maroon-800); }

/* Caveat note */
.caveat-note {
  background: #FCEDEA;
  border: 1px solid #E9BBAF;
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-top: .7rem;
  font-size: .75rem;
  color: #6b342a;
}
.caveat-note b { color: var(--maroon-800); }

/* Step list */
.step-list {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  counter-reset: stepnum;
}
.step-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .6rem;
  font-size: .86rem;
  color: var(--ink-soft);
}
.step-list li:last-child { margin-bottom: 0; }
.step-list li::before {
  counter-increment: stepnum;
  content: counter(stepnum);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--saffron-500);
  color: var(--maroon-950);
  font-weight: 800;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Worked example */
.worked-example {
  background: var(--card);
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.worked-example b { color: var(--maroon-800); }

/* Impl list */
.impl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.impl-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.impl-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--saffron-600);
  font-weight: 800;
}
.impl-list b { color: var(--maroon-800); }

/* Bar row */
.bar-row { margin-bottom: .7rem; }
.bar-row .lbl {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  margin-bottom: .3rem;
  color: var(--ink);
}
.bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--parchment-deep);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--saffron-600), var(--saffron-300));
  width: 0%;
  transition: width 1.1s cubic-bezier(.2, .8, .25, 1);
}

/* Data table */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
table.data-table th {
  text-align: left;
  color: var(--sage);
  font-weight: 700;
  padding: .5rem .4rem;
  border-bottom: 2px solid var(--parchment-deep);
  font-size: .72rem;
  text-transform: uppercase;
}
table.data-table td {
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--parchment-deep);
  color: var(--ink);
}
table.data-table td.num {
  text-align: right;
  font-weight: 700;
  color: var(--maroon-800);
}
table.data-table tr.highlight td { background: #FFF3DC; }

/* Two column grid */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-box {
  background: var(--maroon-950);
  border-radius: 14px;
  padding: 1.1rem;
  text-align: center;
  color: var(--parchment);
}
.stat-box .n {
  font-family: 'Noto Serif Thai', serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--saffron-500);
}
.stat-box .l {
  font-size: .74rem;
  color: var(--saffron-100);
  margin-top: .25rem;
}

/* Metric chip row */
.metric-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.metric-chip {
  border: 1px solid var(--gold-line);
  background: var(--parchment);
  color: var(--maroon-800);
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
}
.metric-chip.active {
  background: var(--maroon-800);
  color: var(--parchment-deep);
  border-color: var(--maroon-800);
}

/* Simple tip */
.simple-tip {
  font-size: .78rem;
  color: var(--sage);
  text-align: center;
  margin-top: .5rem;
}

/* Region grid */
.region-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .6rem;
}
@media (max-width: 900px) { .region-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
.region-card {
  background: var(--card);
  border: 1.5px solid var(--parchment-deep);
  border-radius: 12px;
  padding: .7rem .5rem;
  text-align: center;
  cursor: pointer;
  transition: .2s;
}
.region-card:hover { border-color: var(--saffron-500); }
.region-card.active { background: var(--maroon-950); border-color: var(--maroon-950); }
.region-card .rn {
  font-family: 'Noto Serif Thai', serif;
  font-weight: 800;
  color: var(--maroon-800);
  font-size: 1.05rem;
}
.region-card.active .rn { color: var(--saffron-500); }
.region-card .rl {
  font-size: .62rem;
  color: var(--ink-soft);
  margin-top: .15rem;
  line-height: 1.3;
}
.region-card.active .rl { color: var(--saffron-100); }
.region-card .rv {
  font-size: .68rem;
  color: var(--sage);
  margin-top: .2rem;
  font-weight: 700;
}
.region-card.active .rv { color: var(--saffron-300); }

/* Region detail */
.region-detail { margin-top: 1.4rem; }
.rd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .5rem;
}
.rd-head h4 { font-size: 1.05rem; color: var(--maroon-800); }
.rd-head .rd-n { font-size: .8rem; color: var(--sage); }

/* Prov bar list */
.prov-bar-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: .3rem;
  margin-top: 1rem;
}
.prov-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 55px;
  align-items: center;
  gap: .6rem;
}
.prov-bar-row .pname { font-size: .78rem; color: var(--ink); text-align: right; }
.prov-bar-row .ptrack {
  height: 12px;
  border-radius: 999px;
  background: var(--parchment-deep);
  overflow: hidden;
}
.prov-bar-row .pfill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--saffron-600), var(--saffron-300));
  width: 0%;
  transition: width .8s cubic-bezier(.2, .8, .25, 1);
}
.prov-bar-row .pval { font-size: .76rem; font-weight: 700; color: var(--maroon-800); }

/* Quadrant scatter */
.quadrant-wrap { position: relative; margin-top: 1rem; }
.quadrant-wrap svg { width: 100%; height: auto; display: block; }
.quad-dot { cursor: pointer; transition: r .15s; }
.quad-dot:hover { stroke: var(--maroon-950); stroke-width: 1.5; }
.quad-tag { font-size: 11px; font-family: 'Sarabun', sans-serif; fill: var(--ink-soft); font-weight: 600; }
.quad-endlabel { font-size: 10px; font-family: 'Sarabun', sans-serif; fill: var(--sage); font-weight: 700; }
.quad-label { font-size: 12.5px; font-family: 'Sarabun', sans-serif; font-weight: 700; }
.quad-name { font-size: 11.5px; font-family: 'Sarabun', sans-serif; font-weight: 700; fill: var(--maroon-900); }

.quad-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  margin-top: 1.4rem;
}
@media (max-width: 760px) { .quad-summary { grid-template-columns: 1fr; } }
.quad-summary-card { border-radius: 12px; padding: .9rem 1.1rem; }
.quad-summary-card h5 {
  font-family: 'Noto Serif Thai', serif;
  font-size: .92rem;
  margin-bottom: .15rem;
}
.quad-summary-card .cnt { font-size: .72rem; color: var(--sage); margin-bottom: .6rem; }
.quad-summary-card .plist { font-size: .78rem; color: var(--ink-soft); line-height: 1.7; }
.quad-summary-card .plist b { color: var(--maroon-800); }

/* Region cluster grid */
.region-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 760px) { .region-cluster-grid { grid-template-columns: 1fr; } }
.rc-card { border-radius: 14px; padding: 1rem 1.2rem; }
.rc-card h4 { font-size: 1rem; margin-bottom: .4rem; }
.rc-card .stat { font-size: .78rem; color: var(--ink-soft); margin-bottom: .6rem; }
.rc-card .provlist { font-size: .74rem; color: var(--ink-soft); line-height: 1.6; }

/* ===== FOOTER ===== */
footer {
  background: var(--maroon-950);
  color: var(--saffron-100);
  text-align: center;
  padding: 2.2rem 1.25rem;
  font-size: .78rem;
  opacity: .85;
}
footer b { color: var(--saffron-500); }

/* ===== ANIMATION ===== */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.in { opacity: 1; transform: none; }

/* ================================================================
   SECTION-SPECIFIC STYLES
   ================================================================ */

/* ---- Dashboard (ธรรมนูญ) ---- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--saffron-100);
  max-width: 46ch;
  opacity: .92;
}
.year-badge {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  margin-top: 1.1rem;
  background: var(--saffron-500);
  color: var(--maroon-950);
  font-weight: 800;
  font-size: .8rem;
  padding: .3rem .75rem;
  border-radius: 999px;
}
.goal-pill {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin-top: 1.1rem;
  background: rgba(251, 231, 194, .1);
  border: 1px solid rgba(232, 162, 58, .4);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--saffron-300);
}
@media (max-width: 920px) { .goal-pill, .year-badge { margin-inline: auto; } }
.wheel-wrap { display: flex; justify-content: center; align-items: center; position: relative; }
.wheel-caption {
  text-align: center;
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--saffron-100);
  opacity: .85;
}
#bhavana-panel {
  margin-top: 1rem;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(232, 162, 58, .3);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  min-height: 88px;
  transition: .25s;
}
#bhavana-panel .bp-title {
  color: var(--saffron-500);
  font-family: 'Noto Serif Thai', serif;
  font-weight: 700;
  margin-bottom: .35rem;
  font-size: 1.02rem;
}
#bhavana-panel .bp-body { font-size: .88rem; color: var(--saffron-100); opacity: .92; }

.why-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.2rem;
  align-items: start;
}
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; } }
.quote-block {
  background: var(--card);
  border-left: 5px solid var(--saffron-500);
  border-radius: 4px 16px 16px 4px;
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow);
}
.quote-block .pali {
  font-family: 'Noto Serif Thai', serif;
  color: var(--maroon-800);
  font-size: 1.15rem;
  font-weight: 600;
}
.quote-block .th { margin-top: .5rem; color: var(--ink-soft); font-size: .95rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.badge {
  background: var(--parchment-deep);
  border: 1px solid var(--gold-line);
  color: var(--maroon-800);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .85rem;
  border-radius: 999px;
}
.timeline { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 1rem; position: relative; padding-bottom: 1.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot-col { display: flex; flex-direction: column; align-items: center; }
.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--saffron-500);
  flex: none;
  margin-top: .3rem;
}
.tl-line { width: 2px; flex: 1; background: var(--gold-line); opacity: .5; }
.tl-content .yr { font-weight: 700; color: var(--maroon-800); font-family: 'Noto Serif Thai', serif; }
.tl-content .desc { font-size: .88rem; color: var(--ink-soft); margin-top: .15rem; }

.bhavana-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: 1.4rem;
}
.bl-item {
  background: var(--card);
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--parchment-deep);
}
.bl-item .t { font-weight: 700; color: var(--maroon-800); font-size: .92rem; }
.bl-item .d { font-size: .8rem; color: var(--ink-soft); margin-top: .2rem; }

.stats-hero-box {
  background: var(--maroon-950);
  border-radius: 28px;
  color: var(--parchment);
  padding: 3.2rem 1.5rem 3rem;
  margin-bottom: 2.6rem;
}
.stats-hero-box .sec-head h2 { color: var(--parchment); }
.stats-hero-box .sec-head p { color: var(--saffron-100); opacity: .88; }
.stats-hero-box .eyebrow { color: var(--saffron-500); }
.stats-hero-box .info-callout {
  background: rgba(251, 231, 194, .08);
  border-color: rgba(232, 162, 58, .35);
}
.stats-hero-box .info-callout p { color: var(--saffron-100); }
.stats-hero-box .info-callout b { color: var(--saffron-500); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: rgba(251, 231, 194, .06);
  border: 1px solid rgba(232, 162, 58, .28);
  border-radius: 16px;
  padding: 1.3rem 1.1rem;
  text-align: center;
}
.stat-num {
  font-family: 'Noto Serif Thai', serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--saffron-500);
}
.stat-label { font-size: .8rem; margin-top: .35rem; color: var(--saffron-100); opacity: .9; }
.stat-sub { font-size: .7rem; margin-top: .3rem; color: var(--sage-light); }

.hiso-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 880px) { .hiso-panels { grid-template-columns: 1fr; } }
.hiso-card {
  background: var(--card);
  border: 1px solid var(--parchment-deep);
  border-radius: 16px;
  padding: 1.4rem 1.4rem;
  box-shadow: var(--shadow);
}
.hiso-card h4 {
  font-size: .98rem;
  color: var(--maroon-900);
  font-family: 'Noto Serif Thai', serif;
  margin-bottom: .3rem;
}
.hiso-card .note { font-size: .78rem; color: var(--sage); margin-bottom: 1rem; }
.cause-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .87rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.cause-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-soft); }
.cause-list li::before { content: "◆"; color: var(--sage); font-size: .6rem; margin-top: .45rem; }

/* Gap bar */
.gap-row { margin-bottom: 1.1rem; }
.gap-row .gr-lbl { font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.gap-bar-pair { display: flex; flex-direction: column; gap: .35rem; }
.gap-bar-line { display: flex; align-items: center; gap: .6rem; }
.gap-bar-line .tag { flex: none; width: 78px; font-size: .72rem; color: var(--ink-soft); }
.gap-bar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--parchment-deep); overflow: hidden; }
.gap-bar-fill { height: 100%; border-radius: 999px; width: 0%; transition: width 1s cubic-bezier(.2, .8, .25, 1); }
.gap-bar-fill.screen { background: linear-gradient(90deg, #C97B1D, #F4C878); }
.gap-bar-fill.diag { background: linear-gradient(90deg, var(--sage), var(--sage-light)); }
.gap-bar-line .val { flex: none; width: 46px; text-align: right; font-size: .78rem; font-weight: 700; color: var(--maroon-800); }

/* Chip row / age chart */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.chip {
  border: 1px solid var(--gold-line);
  background: var(--parchment);
  color: var(--maroon-800);
  font-size: .76rem;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
}
.chip.active { background: var(--maroon-800); color: var(--parchment-deep); border-color: var(--maroon-800); }
.age-chart { display: flex; align-items: flex-end; gap: 1.4rem; height: 150px; padding: 0 .5rem; }
.age-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.age-bar {
  width: 46px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--saffron-300), var(--saffron-600));
  height: 0%;
  transition: height 1s cubic-bezier(.2, .8, .25, 1);
  position: relative;
}
.age-bar .age-val {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .78rem;
  font-weight: 700;
  color: var(--maroon-800);
  white-space: nowrap;
}
.age-col .age-band-lbl { margin-top: .55rem; font-size: .76rem; color: var(--ink-soft); font-weight: 600; }

.prov-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.prov-table th {
  text-align: left;
  color: var(--sage);
  font-weight: 700;
  padding: .4rem .3rem;
  border-bottom: 1px solid var(--parchment-deep);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.prov-table td { padding: .45rem .3rem; border-bottom: 1px solid var(--parchment-deep); color: var(--ink); }
.prov-table td.num { text-align: right; font-weight: 700; color: var(--maroon-800); }

.region-compare {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.rc-pill {
  background: var(--parchment-deep);
  border-radius: 10px;
  padding: .55rem .8rem;
  font-size: .76rem;
  flex: 1;
  min-width: 120px;
}
.rc-pill .k { color: var(--ink-soft); display: block; }
.rc-pill .v {
  color: var(--maroon-800);
  font-weight: 800;
  font-family: 'Noto Serif Thai', serif;
  font-size: 1rem;
}

.ordination-split { display: flex; gap: 1rem; }
.os-item {
  flex: 1;
  background: var(--parchment-deep);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.os-item .n {
  font-family: 'Noto Serif Thai', serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--maroon-800);
}
.os-item .l { font-size: .76rem; color: var(--ink-soft); margin-top: .25rem; }

.mortality-compare { display: flex; flex-direction: column; gap: .9rem; }
.mc-row .mc-lbl { font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.mc-legend { display: flex; gap: 1rem; font-size: .72rem; color: var(--ink-soft); margin-bottom: .8rem; }
.mc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.mc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

details.secondary-info {
  margin-top: 2.6rem;
  background: var(--card);
  border: 1px dashed var(--gold-line);
  border-radius: 16px;
  overflow: hidden;
}
details.secondary-info summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.3rem;
  font-weight: 700;
  color: var(--maroon-800);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
}
details.secondary-info summary::-webkit-details-marker { display: none; }
details.secondary-info summary::before { content: "▸"; color: var(--saffron-600); transition: transform .2s; }
details.secondary-info[open] summary::before { transform: rotate(90deg); }
.secondary-body { padding: 0 1.3rem 1.5rem; }
.secondary-body .sub-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-bottom: 1.6rem;
}

/* ---- Charter accordion ---- */
.charter-wrap{display:flex; flex-direction:column; gap:1rem;}
details.chapter{
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--parchment-deep); overflow:hidden;
}
details.chapter summary{
  list-style:none; cursor:pointer; padding:1.2rem 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
details.chapter summary::-webkit-details-marker{display:none;}
details.chapter summary::marker{display:none;}
details.chapter summary{list-style:none;}
.chapter-num{
  flex:none; width:52px; height:52px; border-radius:14px;
  background:linear-gradient(150deg,var(--maroon-800),var(--maroon-950));
  color:var(--saffron-500); font-family:'Noto Serif Thai',serif; font-weight:800; font-size:.82rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; text-align:center;
}
.chapter-num .big{font-size:1.15rem;}
.chapter-title-wrap{flex:1;}
.chapter-title-wrap h3{font-size:1.02rem; color:var(--maroon-900); line-height:1.4;}
.chapter-title-wrap .art-range{font-size:.75rem; color:var(--sage); font-weight:700; margin-top:.2rem;}
.chapter-chevron{flex:none; width:22px; height:22px; color:var(--maroon-800); transition:transform .25s;}
details[open] .chapter-chevron{transform:rotate(180deg);}
.chapter-body{padding:0 1.4rem 1.6rem 1.4rem;}
.chapter-intro{font-size:.87rem; color:var(--ink-soft); margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px dashed var(--parchment-deep);}
.article-list{display:flex; flex-direction:column; gap:.6rem;}
.article-item{display:flex; gap:.8rem; background:var(--parchment); border-radius:10px; padding:.75rem .95rem; border:1px solid var(--parchment-deep);}
.article-num{flex:none; font-family:'Noto Serif Thai',serif; font-weight:800; color:var(--saffron-600); font-size:.85rem; min-width:56px;}
.article-txt{font-size:.84rem; color:var(--ink-soft);}
.article-item.highlight{background:#FFF3DC; border-color:var(--gold-line);}
.article-item.highlight .article-txt b{color:var(--maroon-800);}

/* ---- DONE + FUNDING section ---- */
.subsection-head{margin-bottom:1.6rem;}
.subsection-head h3{font-size:1.15rem; color:var(--maroon-900);}
.subsection-head p{font-size:.86rem; color:var(--ink-soft); margin-top:.4rem; max-width:70ch;}

.capacity-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:1.6rem;}
@media (max-width:860px){ .capacity-grid{grid-template-columns:1fr;} }
.capacity-card{
  background:linear-gradient(150deg,var(--maroon-900),var(--maroon-950)); color:var(--parchment);
  border-radius:18px; padding:1.6rem 1.7rem;
}
.capacity-card .cc-top{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;}
.capacity-card .n{font-family:'Noto Serif Thai',serif; font-weight:800; font-size:2.1rem; color:var(--saffron-500);}
.capacity-card .l{font-size:.85rem; color:var(--saffron-100); margin-top:.3rem;}
.capacity-card .yr{font-size:.7rem; color:var(--sage-light); font-weight:700;}
.growth-mini{display:flex; align-items:flex-end; gap:.7rem; height:64px; margin-top:1.1rem;}
.growth-mini .gm-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.growth-mini .gm-bar{width:100%; max-width:34px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--saffron-300),var(--saffron-600)); height:0%; transition:height 1s cubic-bezier(.2,.8,.25,1);}
.growth-mini .gm-lbl{font-size:.66rem; color:var(--saffron-100); opacity:.8; margin-top:.35rem; text-align:center;}
.growth-mini .gm-val{font-size:.68rem; color:var(--saffron-500); font-weight:700; margin-top:.15rem;}

.ladder{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1.6rem 0 2.2rem;}
.ladder-step{
  flex:1; min-width:150px; background:var(--card); border:1px solid var(--parchment-deep); border-radius:14px;
  padding:1rem 1.1rem; text-align:center; box-shadow:var(--shadow);
}
.ladder-step .st{font-size:.68rem; color:var(--sage); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.ladder-step .tt{font-family:'Noto Serif Thai',serif; font-weight:700; color:var(--maroon-800); font-size:.95rem; margin-top:.3rem;}
.ladder-step .yr2{font-size:.72rem; color:var(--ink-soft); margin-top:.3rem;}
.ladder-arrow{flex:none; color:var(--saffron-600); font-size:1.3rem;}
@media (max-width:760px){ .ladder{flex-direction:column;} .ladder-arrow{transform:rotate(90deg);} }

.sector-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
@media (max-width:760px){ .sector-grid{grid-template-columns:repeat(2,1fr);} }
.sector-card{background:var(--card); border-radius:14px; padding:1.1rem; text-align:center; box-shadow:var(--shadow); border-top:4px solid var(--saffron-500);}
.sector-card:nth-child(2){border-top-color:var(--sage);}
.sector-card:nth-child(3){border-top-color:var(--maroon-700);}
.sector-card:nth-child(4){border-top-color:var(--gold-line);}
.sector-card .n{font-family:'Noto Serif Thai',serif; font-weight:800; font-size:1.9rem; color:var(--maroon-800);}
.sector-card .l{font-size:.78rem; color:var(--ink-soft); margin-top:.35rem;}

details.org-list{margin-top:1.4rem; background:var(--card); border:1px solid var(--parchment-deep); border-radius:14px; overflow:hidden;}
details.org-list summary{list-style:none; cursor:pointer; padding:.9rem 1.2rem; font-weight:700; color:var(--maroon-800); font-size:.86rem; display:flex; align-items:center; gap:.5rem;}
details.org-list summary::-webkit-details-marker{display:none;}
details.org-list summary::before{content:"▸"; color:var(--saffron-600); transition:transform .2s;}
details.org-list[open] summary::before{transform:rotate(90deg);}
.org-table-wrap{padding:0 1.2rem 1.2rem;}
.org-table{width:100%; border-collapse:collapse; font-size:.8rem;}
.org-table th{text-align:left; color:var(--sage); font-weight:700; padding:.5rem .4rem; border-bottom:1px solid var(--parchment-deep); font-size:.7rem; text-transform:uppercase;}
.org-table td{padding:.5rem .4rem; border-bottom:1px solid var(--parchment-deep); color:var(--ink-soft); vertical-align:top;}
.org-table td.sector-tag{white-space:nowrap; font-size:.72rem; font-weight:700; color:var(--maroon-800);}

.done-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.6rem;}
@media (max-width:960px){ .done-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .done-grid{grid-template-columns:1fr;} }
.done-card{
  background:var(--card); border-radius:16px; padding:1.4rem 1.3rem;
  box-shadow:var(--shadow); border-top:4px solid var(--sage);
  display:flex; flex-direction:column; gap:.5rem;
}
.done-card .icon{
  width:42px; height:42px; border-radius:11px; background:var(--sage); color:var(--parchment);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-family:'Noto Serif Thai',serif; font-weight:700;
}
.done-card h4{font-size:1rem; color:var(--maroon-900);}
.done-card p{font-size:.85rem; color:var(--ink-soft); margin:0;}
.done-card .tag{font-size:.7rem; font-weight:700; color:var(--sage); text-transform:uppercase; letter-spacing:.06em;}

/* ---- PLANS section ---- */
.plans-wrap{display:flex; flex-direction:column; gap:1.1rem;}
details.plan{
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--parchment-deep); overflow:hidden;
}
details.plan summary{
  list-style:none; cursor:pointer; padding:1.2rem 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
details.plan summary::-webkit-details-marker{display:none;}
.plan-num{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(150deg,var(--saffron-500),var(--saffron-600));
  color:var(--maroon-950); font-family:'Noto Serif Thai',serif; font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
}
.plan-title{flex:1;}
.plan-title h3{font-size:1.02rem; color:var(--maroon-900); line-height:1.4;}
.plan-chevron{flex:none; width:22px; height:22px; color:var(--maroon-800); transition:transform .25s;}
details[open] .plan-chevron{transform:rotate(180deg);}
.plan-body{padding:0 1.4rem 1.5rem 1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
@media (max-width:820px){ .plan-body{grid-template-columns:1fr;} }
.pain-box{
  background:#FCEDEA; border:1px solid #E9BBAF; border-radius:12px; padding:1rem 1.1rem;
}
.pain-box .ttl{font-weight:700; color:var(--maroon-800); font-size:.85rem; margin-bottom:.5rem; display:flex; gap:.4rem; align-items:center;}
.pain-box ul{margin:0; padding-left:1.1rem; font-size:.85rem; color:#6b342a;}
.pain-box li{margin-bottom:.4rem;}
.concept-box{
  background:#EFF3EF; border:1px solid #CBDACB; border-radius:12px; padding:1rem 1.1rem;
}
.concept-box .ttl{font-weight:700; color:var(--sage); font-size:.85rem; margin-bottom:.5rem; display:flex; gap:.4rem; align-items:center;}
.concept-box p{margin:0; font-size:.85rem; color:#3d5245;}

/* ---- Secondary info (screening) ---- */
details.secondary-info{
  margin-top:2.6rem; background:var(--card); border:1px dashed var(--gold-line); border-radius:16px; overflow:hidden;
}
details.secondary-info summary{
  list-style:none; cursor:pointer; padding:1rem 1.3rem; font-weight:700; color:var(--maroon-800);
  display:flex; align-items:center; gap:.6rem; font-size:.9rem;
}
details.secondary-info summary::-webkit-details-marker{display:none;}
details.secondary-info summary::before{content:"▸"; color:var(--saffron-600); transition:transform .2s;}
details.secondary-info[open] summary::before{transform:rotate(90deg);}
.secondary-body{padding:0 1.3rem 1.5rem;}
.secondary-body .sub-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1.6rem;}
@media (max-width:800px){ .secondary-body .sub-stat-grid{grid-template-columns:repeat(2,1fr);} }
.sub-stat{background:var(--parchment-deep); border-radius:12px; padding:.9rem; text-align:center;}
.sub-stat .n{font-family:'Noto Serif Thai',serif; font-weight:800; font-size:1.35rem; color:var(--maroon-800);}
.sub-stat .l{font-size:.72rem; color:var(--ink-soft); margin-top:.25rem;}

/* ---- Round 2: Age x Status grouped bars ---- */
.grp-bar-chart { display: flex; align-items: flex-end; gap: 1.6rem; height: 210px; padding: 0 .5rem; }
.grp-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.grp-bar-pair { display: flex; align-items: flex-end; gap: .35rem; height: 100%; }
.grp-bar {
  width: 26px;
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: height 1s cubic-bezier(.2, .8, .25, 1);
  height: 0%;
}
.grp-bar.novice { background: linear-gradient(180deg, var(--sage-light), var(--sage)); }
.grp-bar.monk { background: linear-gradient(180deg, var(--saffron-300), var(--saffron-600)); }
.grp-bar .v {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 700;
  color: var(--maroon-800);
  white-space: nowrap;
}
.grp-col .glbl { margin-top: .6rem; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.grp-legend { display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 1rem; font-size: .78rem; }
.grp-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.grp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.age-compare-chart { display: flex; align-items: flex-end; gap: 2rem; height: 180px; padding: 0 1rem; justify-content: center; }
.acc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 90px; }
.acc-bar {
  width: 44px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--saffron-300), var(--saffron-600));
  position: relative;
  height: 0%;
  transition: height 1s cubic-bezier(.2, .8, .25, 1);
}
.acc-bar .nat-mark {
  position: absolute;
  left: -8px;
  right: -8px;
  height: 2px;
  background: var(--maroon-800);
}
.acc-bar .v {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .78rem;
  font-weight: 700;
  color: var(--maroon-800);
  white-space: nowrap;
}
.acc-col .al { margin-top: .6rem; font-size: .78rem; color: var(--ink-soft); font-weight: 600; text-align: center; }
.acc-col .an { font-size: .65rem; color: var(--sage); }

/* ---- Round 3: Priority ranking ---- */
.rank-list { display: flex; flex-direction: column; gap: .55rem; }
.rank-row { display: grid; grid-template-columns: 28px 140px 1fr 56px; align-items: center; gap: .6rem; }
.rank-row .rnum {
  font-family: 'Noto Serif Thai', serif;
  font-weight: 800;
  color: var(--saffron-600);
  text-align: center;
}
.rank-row .rname { font-size: .82rem; color: var(--ink); }
.rank-row .rtrack { height: 14px; border-radius: 999px; background: var(--parchment-deep); overflow: hidden; }
.rank-row .rfill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--maroon-700), var(--saffron-500));
  width: 0%;
  transition: width .9s cubic-bezier(.2, .8, .25, 1);
}
.rank-row .rval { font-size: .78rem; font-weight: 700; color: var(--maroon-800); text-align: right; }
.rank-row.top3 .rname { font-weight: 700; color: var(--maroon-800); }

/* ---- Compare (เทียบพระสงฆ์กับคนทั่วไป) ---- */
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: 1.4rem; }
.filter-chip {
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--parchment);
  color: var(--maroon-800);
  cursor: pointer;
}
.filter-chip.active { background: var(--maroon-800); color: var(--parchment-deep); border-color: var(--maroon-800); }

.diverge-legend { display: flex; justify-content: center; gap: 1.5rem; font-size: .8rem; margin-bottom: 1rem; }
.diverge-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.diverge-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

.dv-row { display: grid; grid-template-columns: 200px 1fr 60px; align-items: center; gap: .7rem; margin-bottom: .5rem; cursor: pointer; }
.dv-row:hover .dv-name { color: var(--maroon-800); }
.dv-name { font-size: .8rem; color: var(--ink); text-align: right; transition: .15s; }
.dv-track { height: 20px; border-radius: 10px; background: var(--parchment-deep); position: relative; overflow: visible; }
.dv-center-line { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .22; border-radius: 1px; }
.dv-bar { height: 100%; border-radius: 10px; width: 0%; position: absolute; top: 0; transition: width .9s cubic-bezier(.2, .8, .25, 1); }
.dv-val { font-size: .8rem; font-weight: 700; text-align: left; }

.dv-detail { display: none; margin-top: 1.4rem; background: var(--card); border: 1px solid var(--parchment-deep); border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow); }
.dv-detail.show { display: block; }
.dv-detail h4 { font-size: 1rem; color: var(--maroon-900); margin-bottom: .7rem; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.detail-box { text-align: center; background: var(--parchment-deep); border-radius: 10px; padding: .7rem .5rem; }
.detail-box .dn { font-family: 'Noto Serif Thai', serif; font-weight: 800; font-size: 1.3rem; }
.detail-box .dl { font-size: .72rem; color: var(--ink-soft); margin-top: .2rem; }

.age-compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 800px) { .age-compare-grid { grid-template-columns: repeat(2, 1fr); } }
.asc-card { background: var(--card); border-radius: 12px; padding: 1rem; text-align: center; box-shadow: var(--shadow); }
.asc-card h5 { font-size: .9rem; color: var(--maroon-800); margin-bottom: .6rem; }
.asc-row { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: .3rem; }
.asc-row b { color: var(--maroon-800); }

/* ---- Prevalence (สำรวจความชุกโรค) ---- */
.disease-select-wrap { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
select#diseaseSelect {
  font-family: 'Sarabun', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--maroon-800);
  background: var(--card);
  border: 2px solid var(--gold-line);
  border-radius: 12px;
  padding: .6rem 1rem;
  max-width: 380px;
  cursor: pointer;
}
.selected-badge { background: var(--maroon-950); color: var(--saffron-500); font-weight: 700; font-size: .85rem; padding: .55rem 1rem; border-radius: 12px; }

.rank-bars { display: flex; flex-direction: column; gap: .45rem; max-height: 520px; overflow-y: auto; padding-right: .4rem; }
.rb-row { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: .6rem; }
.rb-row .rbname { font-size: .78rem; color: var(--ink); text-align: right; }
.rb-row.active .rbname { font-weight: 800; color: var(--maroon-800); }
.rb-track { height: 13px; border-radius: 999px; background: var(--parchment-deep); overflow: hidden; cursor: pointer; }
.rb-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sage-light), var(--sage)); width: 0%; transition: width .8s cubic-bezier(.2, .8, .25, 1); }
.rb-row.active .rb-fill { background: linear-gradient(90deg, var(--saffron-600), var(--maroon-700)); }
.rb-val { font-size: .76rem; font-weight: 700; color: var(--maroon-800); text-align: right; }

.map-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.6rem; }
@media (max-width: 820px) { .map-layout { grid-template-columns: 1fr; } }
.map-svg-wrap { display: flex; justify-content: center; }
.map-svg-wrap svg { width: 100%; max-width: 420px; height: auto; }
.map-province { cursor: pointer; transition: opacity .15s; stroke: #FBF3E3; stroke-width: 0.6; }
.map-province:hover { opacity: .75; stroke: var(--maroon-950); stroke-width: 1.3; }
.legend-scale { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; justify-content: center; }
.legend-bar { width: 160px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #F3E6CC, #E8A23A, #6B1E23); }
.legend-labels { display: flex; justify-content: space-between; width: 160px; font-size: .68rem; color: var(--sage); margin-top: .2rem; }
.map-detail-panel { background: var(--parchment-deep); border-radius: 12px; padding: 1rem 1.1rem; }
.map-detail-panel h5 { font-family: 'Noto Serif Thai', serif; font-size: 1rem; color: var(--maroon-800); margin-bottom: .4rem; }
.map-detail-panel .dv { font-family: 'Noto Serif Thai', serif; font-weight: 800; font-size: 1.6rem; color: var(--maroon-800); }
.map-detail-panel .dl { font-size: .76rem; color: var(--ink-soft); margin-top: .2rem; }
.map-top5 { margin-top: 1rem; font-size: .78rem; color: var(--ink-soft); }
.map-top5 li { margin-bottom: .3rem; }

.group-legend { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.group-chip { font-size: .72rem; padding: .3rem .7rem; border-radius: 999px; background: var(--parchment-deep); color: var(--ink-soft); }

/* ---- Cluster grid (รอบ1) ---- */
.cluster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; }
@media (max-width: 980px) { .cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cluster-grid { grid-template-columns: 1fr; } }
.cl-card { background: var(--card); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); border-top: 4px solid var(--saffron-500); }
.cl-card.high { border-top-color: var(--maroon-700); }
.cl-card.low { border-top-color: var(--sage); }
.cl-card .pct { font-family: 'Noto Serif Thai', serif; font-weight: 800; color: var(--maroon-800); font-size: 1.5rem; }
.cl-card .lbl { font-size: .82rem; font-weight: 700; color: var(--maroon-900); margin-top: .2rem; }
.cl-card .age { font-size: .72rem; color: var(--sage); margin-top: .3rem; }
.cl-card ul { margin: .6rem 0 0; padding-left: 1rem; font-size: .72rem; color: var(--ink-soft); }
.cl-card li { margin-bottom: .25rem; }