:root{
  --bg: #DAFAFA;
  --card: #ffffff;
  --text: #083344;
  --muted: #4b5563;

  --up: #ff7b7b;
  --down: #28c76f;
  --flat: #6c757d;
  --unk: #3da9fc;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.top{
  padding: 14px 18px;
  display:flex;
  gap: 16px;
  align-items:flex-end;
  justify-content:space-between;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

h1{ margin:0; font-size: 20px; }
.sub{ margin-top:4px; font-size: 12px; color: var(--muted); }

.filters{
  display:flex;
  gap: 12px;
  align-items:flex-end;
}
label{
  font-size: 12px;
  color: var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}
select{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: white;
  font-size: 13px;
}

.metrics{
  padding: 12px 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}
.metric{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
}
.metric .k{ font-size: 12px; color: var(--muted); }
.metric .v{ font-size: 18px; font-weight: 700; margin-top:2px; }

#content{ padding: 8px 18px 20px 18px; }

.region-title{
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
}

.card{
  background: var(--card);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}

.card h3{
  margin:0 0 8px 0;
  font-size: 14px;
  color: #035e7b;
}

.pest{
  margin-top: 8px;
}
.pest .name{
  font-weight: 700;
  font-size: 13px;
}
.pest .prov{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

.badge{
  display:inline-block;
  margin-left:6px;
  padding: 2px 10px;
  border-radius: 999px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.badge.up{ background: var(--up); }
.badge.down{ background: var(--down); }
.badge.flat{ background: var(--flat); }
.badge.unk{ background: var(--unk); }

@media (max-width: 1000px){
  .grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .metrics{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
  .filters{ flex-direction: column; align-items: flex-start; }
}

/* ===== Region section (alternate backgrounds) ===== */
.region-section{
  border-radius: 16px;
  padding: 12px 12px 16px;
  margin: 12px 0 16px;
  border: 1px solid rgba(0,0,0,.06);
}

/* สลับสี: ฟ้าอ่อนมาก (เดิม) vs ฟ้าเข้มขึ้นนิด ๆ */
.region-section.alt0{
  background: #DAFAFA;        /* light */
}
.region-section.alt1{
  background: #78A3D3;        /* darker (still soft) */
}

/* ให้หัวข้อภาคเด่นและมี spacing ดีขึ้น */
.region-section .region-title{
  margin: 4px 0 10px;
  padding-left: 4px;
}

.trend-note{
  margin: 6px 0 12px 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* ===== Top 10 nationwide ===== */
#top10Container{ padding: 8px 18px 20px 18px; }
.top10-header{ margin: 10px 0 10px; }
.top10-header h2{ margin:0; font-size: 16px; font-weight: 900; }
.top10-sub{ margin-top:4px; font-size: 12px; color: var(--muted); }
.top10-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
}
.top10-rank{
  min-width: 78px;
  font-weight: 900;
  color: #035e7b;
}
.top10-body{ font-size: 13px; }
.top10-body .line{ margin-top: 3px; }
.top10-body .area{ font-weight: 800; }