/* =========================
   Global Styles (Sarabun)
   ========================= */
:root{
  --brand: #16a34a;          /* เขียวหลัก */
  --brand-2: #0ea5e9;        /* ฟ้าเสริม */
  --brand-3: #7c3aed;        /* ม่วงเสริม */
  --brand-amber: #f59e0b;    /* เหลืองส้ม */
  --text: #111827;
  --muted: #6b7280;
  --bg-soft: #f8fafc;
  --card-shadow: 0 8px 20px rgba(0,0,0,.06);
  --radius: 16px;
}

html, body{
  font-family: "Sarabun", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", sans-serif;
  color: var(--text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Containers & cards */
.hero{
  background: linear-gradient(135deg,#e9f8f1,#f3fff9);
  border-radius: calc(var(--radius) + 4px);
}

.card,
.stat-card,
.plot-card{
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background: #fff;
}

/* Chips / Badges */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  border-radius:999px;background:#f6f7f9;
  padding:.35rem .65rem;font-size:.85rem
}
.chip.badge-area{background:#fff7e8}
.chip.badge-age{background:#eefcee}
.chip.badge-yield{background:#f5f0ff}

.std-badge{
  background:#e6fff3;color:#0a7a49;border-radius:999px;
  padding:.25rem .6rem;font-size:.75rem;font-weight:600
}

/* Feature buttons (4 ปุ่มหลักในการ์ดแปลง) */
.feature-btn{
  border:1px solid #e9ecef;background:#fff;border-radius:14px;
  padding:.9rem 1rem;display:flex;align-items:center;gap:.6rem;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease
}
.feature-btn:hover{
  transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.08)
}
.feature-dot{width:.6rem;height:.6rem;border-radius:999px;display:inline-block}
.dot-prod{background:#1db954}
.dot-fin{background:#3478f6}
.dot-com{background:#ff9f1a}
.dot-mkt{background:#7a5af8}

/* Action button (ถ้ามีใช้ในหน้าอื่น) */
.action-button{
  border-radius:var(--radius); padding:1.1rem; min-height:112px;
  background:#fff; box-shadow:var(--card-shadow);
  transition:transform .15s ease, box-shadow .15s ease
}
.action-button:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12) }

.icon-wrap{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:#f0f6ff;margin-right:.75rem
}

/* Typography helpers */
.plot-title{font-weight:700}
.plot-sub{color:var(--muted)}
.text-muted-2{color:var(--muted)!important}

/* Buttons override (โทนสีหลัก) */
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{filter:brightness(.95)}
.btn-outline-brand{border-color:var(--brand);color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}

/* Utilities */
.rounded-2xl{border-radius:var(--radius)!important}
.shadow-soft{box-shadow:var(--card-shadow)!important}
.bg-soft{background:var(--bg-soft)!important}

/* Navbar / Footer (ถ้าต้องการโทนเดียวกัน) */
.navbar-light .navbar-nav .nav-link{font-weight:600}
footer a{text-decoration:none}