/* =========================================================================
   HIU Design System — override layer (โหลดหลังสุด · ไม่แก้ไฟล์ธีมเดิม)
   ลบ <link> ไฟล์นี้ออกจาก layout = คืนค่าเดิมทั้งหมดทันที
   A) quick wins (2026-08-07)  ·  B) design system (2026-08-07)
   ========================================================================= */

/* =====================================================================
   0) DESIGN TOKENS
   ===================================================================== */
:root{
  /* brand green scale */
  --g-50:#eef7f0; --g-100:#d5ecd9; --g-200:#aedcb6; --g-300:#7fc38d;
  --g-400:#52a869; --g-500:#3a954f; --g-600:#2f7a41; --g-700:#265f34;
  --g-800:#1f4d2b; --g-900:#14361f;
  --hiu-green:#3a954f; --hiu-green-hover:#2f7a41; --hiu-green-active:#265f34; --hiu-green-dark:#195828;
  /* accent + neutrals */
  --hiu-gold:#c8912a;
  --hiu-ink:#1f2220; --hiu-muted:#5b6660; --hiu-border:#e4e8e6; --hiu-surface-2:#f6f8f7;
  /* radius / shadow / motion */
  --hiu-r-sm:6px; --hiu-r:10px; --hiu-r-lg:16px;
  --hiu-sh-1:0 1px 2px rgba(16,32,24,.06); --hiu-sh-2:0 4px 16px rgba(16,32,24,.08); --hiu-sh-3:0 14px 34px rgba(16,32,24,.12);
  --hiu-t:.2s ease;

  /* ---- Bootstrap 5.3 theming → green ---- */
  --bs-primary:#3a954f;
  --bs-primary-rgb:58,149,79;
  --bs-primary-text-emphasis:#265f34;
  --bs-primary-bg-subtle:#eef7f0;
  --bs-primary-border-subtle:#aedcb6;
  --bs-link-color:#2f7a41;
  --bs-link-color-rgb:47,122,65;
  --bs-link-hover-color:#265f34;
  --bs-link-hover-color-rgb:38,95,52;
  --bs-focus-ring-color:rgba(58,149,79,.28);
}

/* =====================================================================
   1) TYPOGRAPHY — Thai-friendly line-height (เดิมแน่น ~1.0–1.14)
   ===================================================================== */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.card-title{ line-height:1.32 !important; }

/* =====================================================================
   2) BUTTONS — รวมเป็นเขียวชุดเดียว + focus ring เขียว
   ===================================================================== */
.btn-primary{
  --bs-btn-bg:var(--hiu-green); --bs-btn-border-color:var(--hiu-green);
  --bs-btn-hover-bg:var(--hiu-green-hover); --bs-btn-hover-border-color:var(--hiu-green-hover);
  --bs-btn-active-bg:var(--hiu-green-active); --bs-btn-active-border-color:var(--hiu-green-active);
  --bs-btn-disabled-bg:var(--hiu-green); --bs-btn-disabled-border-color:var(--hiu-green);
}
.btn-outline-primary{
  --bs-btn-color:var(--hiu-green-hover); --bs-btn-border-color:var(--hiu-green);
  --bs-btn-hover-bg:var(--hiu-green); --bs-btn-hover-border-color:var(--hiu-green);
  --bs-btn-active-bg:var(--hiu-green-hover); --bs-btn-active-border-color:var(--hiu-green-hover);
}
/* focus ring เขียวทุกปุ่ม/ฟอร์ม (เดิมฟ้า default) */
.btn:focus-visible, .btn:focus, .btn.focus{ box-shadow:0 0 0 .25rem rgba(58,149,79,.30) !important; }
.form-control:focus, .form-select:focus{
  border-color:var(--g-300) !important;
  box-shadow:0 0 0 .25rem rgba(58,149,79,.18) !important;
}

/* =====================================================================
   3) BADGE / PAGINATION — เขียว
   ===================================================================== */
.badge.bg-primary, .badge.text-bg-primary{ background-color:var(--hiu-green) !important; }
.pagination{
  --bs-pagination-color:var(--hiu-green-hover);
  --bs-pagination-hover-color:var(--hiu-green-active);
  --bs-pagination-hover-border-color:var(--g-300);
  --bs-pagination-focus-color:var(--hiu-green-active);
  --bs-pagination-focus-box-shadow:0 0 0 .25rem rgba(58,149,79,.25);
  --bs-pagination-active-bg:var(--hiu-green);
  --bs-pagination-active-border-color:var(--hiu-green);
}
.pagination-style-01 .page-item.active .page-link{
  background-color:var(--hiu-green) !important; border-color:var(--hiu-green) !important;
}

/* =====================================================================
   4) NAV — active/hover เป็นเขียว (เฉพาะสี ไม่แตะ layout)
   ===================================================================== */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color:var(--hiu-green-hover) !important; }

/* =====================================================================
   5) CARDS — hover ยกเบา ๆ ให้สม่ำเสมอ (เฉพาะการ์ดเนื้อหา)
   ===================================================================== */
.blog-post .card, .entrepreneur-item, .content-area .card{
  transition:transform var(--hiu-t), box-shadow var(--hiu-t);
}
.blog-post .card:hover, .content-area .card:hover{
  transform:translateY(-4px); box-shadow:var(--hiu-sh-3);
}

/* =====================================================================
   6) หน้า "รายชื่อผู้ประกอบการ" — รวมสีน้ำเงิน/ม่วง (hardcode inline) → เขียว
   ===================================================================== */
.page-header,
.company-header,
.company-info-header,
.companySwiper .swiper-slide,
.info-icon{
  background:linear-gradient(135deg,var(--hiu-green) 0%,var(--hiu-green-dark) 100%) !important;
}
.sidebar-title i               { color:var(--hiu-green) !important; }
.tree-link.active              { background-color:var(--hiu-green) !important; }
.tree-parent.active            { background-color:var(--hiu-green-dark) !important; }
.tree-count                    { background-color:rgba(58,149,79,.10) !important; color:var(--hiu-green) !important; }
.tree-child .tree-link:hover,
.tree-child .tree-link.active  { border-left-color:var(--hiu-green) !important; }
.companySwiper .swiper-pagination-bullet-active{ background:var(--hiu-green) !important; }

/* =====================================================================
   7) UTILITIES เสริม (opt-in) — สีทอง accent
   ===================================================================== */
.text-hiu-gold{ color:var(--hiu-gold) !important; }
.bg-hiu-gold{ background-color:var(--hiu-gold) !important; }
.badge-hiu-gold{ background:#f6ecd4; color:#8a6414; }

/* =====================================================================
   8) FONTS — ใช้ Noto Sans Thai จริง (เดิม stack ไม่มี → ไทยตกไปใช้ฟอนต์ระบบ)
      หัวข้อ = IBM Plex Sans Thai (มีคาแรกเตอร์ อ่านง่าย เหมาะงานสถาบัน)
   ===================================================================== */
:root{
  --primary-font:"Inter","Noto Sans Thai",sans-serif;
  --alt-font:"IBM Plex Sans Thai","Inter","Noto Sans Thai",sans-serif;
}
body, .primary-font,
input, textarea, select, button, .form-control{
  font-family:"Inter","Noto Sans Thai",sans-serif;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.alt-font,.card-title,.navbar-nav .nav-link{
  font-family:"IBM Plex Sans Thai","Inter","Noto Sans Thai",sans-serif !important;
}
/* ยกเลิก letter-spacing ติดลบ (ทำให้สระ/พยัญชนะไทยอัดกัน) */
.ls-minus-05px,.ls-minus-1px,.ls-minus-2px,.ls-minus-3px,
.ls-minus-4px,.ls-minus-5px,.ls-minus-6px{ letter-spacing:normal !important; }

/* =====================================================================
   9) CARDS — เก็บให้เนี้ยบ: มุมโค้งนุ่ม + เงาสะอาด + hover ยก
      (เฉพาะการ์ดเนื้อหาที่ใช้ box-shadow-quadruple-large)
   ===================================================================== */
.card.box-shadow-quadruple-large,
.card.box-shadow-quadruple-large-hover{
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:var(--hiu-sh-2) !important;
  transition:transform var(--hiu-t), box-shadow var(--hiu-t);
}
.card.box-shadow-quadruple-large-hover:hover,
.card.box-shadow-quadruple-large:hover{
  transform:translateY(-5px);
  box-shadow:var(--hiu-sh-3) !important;
}
.card .card-title{ letter-spacing:normal !important; }
/* badge หมวดหมู่บนการ์ดข่าว */
.blog-categories .categories-btn{
  border-radius:999px !important;
  box-shadow:var(--hiu-sh-1);
  padding:.3rem .8rem !important;
  letter-spacing:.02em !important;
  font-weight:700 !important;
}

/* =====================================================================
   10) HOMEPAGE — เก็บสีม่วง/หลุดแบรนด์ใน section "สถิติการค้าฮาลาลไทย" → เขียว
   ===================================================================== */
.trade-stats-section{
  background:linear-gradient(135deg,var(--hiu-green) 0%,var(--hiu-green-dark) 100%) !important;
}
/* ป้ายกำกับการ์ดข่าว = พื้นขาว + ตัวหนังสือเขียว (พิลล์) ตาม Design System ข้อ 08 */
.categories-btn,
.categories-btn:hover,
.blog-categories .categories-btn,
.blog-categories .categories-btn:hover{
  background:#fff !important;
  color:var(--hiu-green-active) !important;
  border-radius:999px !important;
}
/* ตัวเลขสถิติใหญ่ (เดิม gradient ม่วง) → เขียว */
.stat-value{
  background:linear-gradient(135deg,var(--hiu-green) 0%,var(--hiu-green-active) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
}
/* แท็บ — hover + active (เดิมพื้น lavender + ขีดใต้ม่วง) → เขียว */
.home-tab-button:hover{ background:rgba(58,149,79,.08) !important; }
.home-tab-button:hover i{ color:var(--hiu-green) !important; }
.home-tab-button.active{
  background:linear-gradient(135deg,rgba(58,149,79,.14) 0%,rgba(25,88,40,.12) 100%) !important;
  color:var(--hiu-green) !important;
  box-shadow:inset 0 2px 4px rgba(58,149,79,.10) !important;
}
.home-tab-button.active i{ color:var(--hiu-green) !important; }
.home-tab-button.active::after{
  background:linear-gradient(135deg,var(--hiu-green) 0%,var(--hiu-green-dark) 100%) !important;
  box-shadow:0 -2px 8px rgba(58,149,79,.35) !important;
}
/* ปุ่ม "นิยามตลาดฮาลาล" / "ดาวน์โหลด PDF" — ไอคอนม่วง → เขียว */
.halal-definition-trigger i{ color:var(--hiu-green) !important; }
/* ไอคอนสถิติ: export(ฟ้า)→ทอง · ดุลการค้า(ส้ม)→เขียวเข้ม ให้เข้าแบรนด์ */
.export-icon{ background:linear-gradient(135deg,var(--hiu-gold) 0%,#9a6c14 100%) !important; }
.balance-icon{ background:linear-gradient(135deg,var(--hiu-green-dark) 0%,#0f3d20 100%) !important; }

/* =====================================================================
   11) SWIPER — จุด pagination เขียว + การ์ดในสไลด์ให้ align บน/สูงเท่ากัน
   ===================================================================== */
:root{ --swiper-theme-color:var(--hiu-green); --swiper-pagination-color:var(--hiu-green); }
.swiper-pagination-bullet-active{ background:var(--hiu-green) !important; }
/* เดิม .swiper-slide{align-items:center} ทำการ์ดเนื้อหาสั้นลอยลงต่ำ
   → เจาะเฉพาะสไลด์ที่มีการ์ด ให้ align บน + สูงเท่ากัน (ไม่แตะ slider hero) */
.swiper-slide:has(> .card){ align-items:stretch !important; height:auto !important; }
.swiper-slide > .card{ width:100%; display:flex; flex-direction:column; }
.swiper-slide > .card .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
/* ดันวันที่ไปชิดล่างให้การ์ดเสมอกัน */
.swiper-slide > .card .card-body .author,
.swiper-slide > .card .card-body .blog-date{ margin-top:auto; }

/* =====================================================================
   12) งานวิจัย — การ์ดเด่นแนวนอน (แสดงเมื่อมี ≤ 2 ชิ้น แทนกริดที่โล่ง)
   ===================================================================== */
.research-feat-card{
  border-radius:16px !important; overflow:hidden;
  box-shadow:var(--hiu-sh-2) !important;
  transition:transform var(--hiu-t), box-shadow var(--hiu-t);
}
.research-feat-card:hover{ transform:translateY(-4px); box-shadow:var(--hiu-sh-3) !important; }
.research-feat-imgcol{ min-height:280px; }
.research-feat-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; min-height:280px; }
.research-feat-imgcol .blog-categories{ position:absolute; top:14px; left:14px; z-index:2; }
.research-feat-card .card-body{ padding:2rem 2.25rem; }
@media(max-width:991px){
  .research-feat-imgcol, .research-feat-img{ min-height:210px; }
  .research-feat-card .card-body{ padding:1.5rem; }
}

/* =====================================================================
   13) MENU / NAV — active indicator + dropdown เขียว + ปุ่มค้นหาเขียว
   ===================================================================== */
/* แบบ Design System ข้อ 10: active = พิลล์เขียวตัน+ตัวขาว · hover = พื้นเขียวอ่อน */
/* กันไม่ให้ nav-link ยืดเต็มความสูง header (ธีมตั้ง align-self:stretch)
   → override เป็น center ด้วย selector เดียวกัน พิลล์จะเตี้ยพอดี ~40px กลางแถบ */
header .navbar [class*=col-] .navbar-nav .nav-item{ align-self:center !important; }
header .navbar [class*=col-] .navbar-nav .nav-item a{ align-self:center !important; }
.navbar-nav .nav-link{
  border-radius:var(--hiu-r-sm); font-weight:600;
  transition:all var(--hiu-t);
}
.navbar-nav .nav-link:hover{
  background:var(--g-50) !important; color:var(--hiu-green-hover) !important;
}
.navbar-nav .nav-link.active{
  background:var(--hiu-green) !important; color:#fff !important; font-weight:700;
}
.navbar-nav .nav-link.active + .dropdown-toggle{ color:var(--hiu-green) !important; }
/* dropdown items hover → เขียว */
.dropdown-menu a:hover,
.dropdown-menu li:hover > a,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{ color:var(--hiu-green) !important; background:var(--g-50) !important; }
/* ปุ่มค้นหาใน header (เดิมเทา) → เขียว */
header form .btn-outline-secondary{
  --bs-btn-color:var(--hiu-green-hover); --bs-btn-border-color:var(--hiu-green);
  --bs-btn-hover-bg:var(--hiu-green); --bs-btn-hover-border-color:var(--hiu-green); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--hiu-green-hover); --bs-btn-active-border-color:var(--hiu-green-hover);
}