.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #005807;
    background-color: #fff;
    border-color: #008116 #008d47 #ffffff;
}
.nav-tabs {
    border-bottom: 1px solid #008d47;
}
.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #005807;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-link:hover {
    display: block;
    padding: .5rem 1rem;
    color: #00b40f;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.tab-item ul {
    font-size: 20px;
}

.btn-check:active+.btn-success, .btn-check:checked+.btn-success, .btn-success.active, .btn-success:active, .show>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: #fff;
    border-color: #028090;
    box-shadow: 1px 1px 5px 5px #004741;
}

.btn-success {
    color: #fff;
    background: linear-gradient(0deg,#028090, #00a896,#02c39a );
    border-color: #028090;
}

.btn-success:hover {
    color: #028090;
    background: #fff;
    border-color: #028090;
    font-weight: 900;
}
.text-success {
    color: #028090 ;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #028090;
}

/* Footer บางลงและจัดวางสวย */
.slim-footer {
  padding-top: 4px;
  padding-bottom: 4px;
}

.slim-footer .icon-contact .sf-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background: rgba(255,255,255,.15); color:#fff; text-decoration:none;
  transition: .15s ease-in-out;
}

.slim-footer .icon-contact .sf-icon:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-1px);
}

.slim-footer .icon-contact i {
  font-size:16px;
}

.slim-footer .sf-logo {
  height:30px;
}

.slim-footer .sf-title {
  font-size:14px;
  line-height:1.2;
}

.slim-footer .sf-address {
  font-size:12px;
}

/* ซ่อนแถบเก่า (top-bar) ถ้ายังมี */
.top-bar { display:none !important; }

/* กัน navbar fixed-top บังหัวข้อ (ปรับตามความสูง navbar ของคุณ) */
.content-offset { padding-top: 84px; }        /* เดสก์ท็อป */
@media (max-width: 991.98px){
  .content-offset { padding-top: 64px; }      /* มือถือ/แท็บเล็ต */
}

/* รูป header เฉพาะหน้า Contact */
.page-contact{
  background-image: url('../images/header/contact-bg.jpg') !important; /* อิงจาก assets/css/.. */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* ถ้าหัวถูกชน navbar ในบางจอ ให้ดันลงเล็กน้อย */
  margin-top: 64px;              /* ปรับได้ 56–72 ตามความสูง navbar */
}

/* ถ้าหน้า About ไม่โดนชน ไม่ต้องยุ่ง; ถ้ายังโดน ให้เพิ่ม margin-top ให้ .page-about เช่นกัน */

/* Override header image for pages using .page-blog */
.page-blog{
  background-image:
    linear-gradient(rgba(0, 29, 35, 0), rgba(0, 29, 35, .8)),
    url('../images/header/page4.jpg') !important;
  background-position: center;     /* จัดกึ่งกลางรูป */
  background-repeat: no-repeat;
  background-size: cover;
}

/* ระยะห่างมาตรฐานของเพจเนื้อหา */
.page-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-top: 1.5rem;   /* ดันออกจากเฮดเดอร์ */
  margin-bottom: 3rem;  /* ดันออกห่างจากฟุตเตอร์ */
}
@media (min-width: 992px) {
  .page-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-top: 2rem;
  }
}

/* กล่องเนื้อหาเพจ (ขาว + โค้ง + เงา) */
.page-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 1.25rem;
}
@media (min-width: 992px){
  .page-card{ padding: 2.25rem 2.75rem; }
}

/* เก็บดีเทลให้สวย */
.page-card > :first-child{ margin-top: 0; }     /* หัวข้อแรกไม่ดันลงเกินไป */
.page-card img{ max-width: 100%; height: auto; border-radius: 12px; }
.page-card ul, .page-card ol{ padding-left: 1.25rem; }  /* ระยะอินเดนต์ bullet */


/* ขนาดโลโก้บนแถบเมนู */
.navbar .navbar-brand img {
  height: auto !important;
  max-height: 52px;      /* desktop */
}

/* tablet */
@media (max-width: 991.98px) {
  .navbar .navbar-brand img { max-height: 44px; }
}

/* mobile */
@media (max-width: 575.98px) {
  .navbar .navbar-brand img { max-height: 30px; }
}


/* ชดเชยความสูงของ navbar บนมือถือ เพื่อไม่ให้คอนเทนต์ตัวแรกถูกทับ */
@media (max-width: 575.98px) {
  body { padding-top: 78px; }            /* ปรับ 72–84px ตามความสูงจริงของ navbar ของคุณ */

  /* กรณีหน้าแรกใช้ carousel ที่ id นี้ ให้ดันลงอีกชั้น (ถ้ามี) */
  #header-carousel { margin-top: 0; }    /* กันกรณีมี margin ลบ/ค่าคงเดิม */

  /* ถ้ามี hero แบบ .page-hero (เช่น page.php) ให้เว้นพอดีกับมือถือ */
  .page-hero { padding-top: 9rem; }
}


/* ยกเลิกการครอปของสื่อภายใน ratio เฉพาะกล่องวิดีโอนี้ */
.home-hero-video > * { top: 0 !important; }

/* วิดีโอเต็มกรอบ */
.home-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* สัดส่วนปกติบนเดสก์ท็อป (16:9) */
.home-hero-video { --bs-aspect-ratio: 56.25%; }

/* tablet: สูงขึ้นเล็กน้อย */
@media (max-width: 991.98px) {
  .home-hero-video { --bs-aspect-ratio: 62.5%; }
}

/* mobile: สูงขึ้นชัดเจน */
@media (max-width: 575.98px) {
  .home-hero-video { --bs-aspect-ratio: 70%; }
}

/* ===== News & Updates (carousel cards) ===== */
.news-card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

.news-thumb{
  aspect-ratio: 16/9;
  background:#f5f5f5;
  flex-shrink:0;
}
.news-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.news-card .card-body{
  padding:10px 16px 14px;
  display:flex;
  flex-direction:column;
  min-height: 110px;   /* 👈 ปรับตามความเหมาะสม เช่น 110–130px */
}


/* News cards */
.news-card{border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:100%}
.news-thumb{aspect-ratio:16/9;background:#f5f5f5;flex-shrink:0}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.news-card .card-body{padding:10px 16px 14px;display:flex;flex-direction:column;min-height:120px}

.news-title{
  margin:0 0 6px;
  font-weight:600;
  font-size:0.9rem;
  line-height:1.35;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;   /* จำกัด 2 บรรทัด */
  overflow:hidden;
  text-overflow:ellipsis;

  /* เอา max-height ออก ไม่ต้องใช้ */
  white-space:normal;
  word-break:break-word;  /* กันคำยาวเกิน */
}

.news-meta{margin-top:auto;font-size:.85rem;color:#6b7280}

/* ไม่ขีดเส้นใต้ทั้งการ์ด */
.news-item,.news-item:hover,.news-item:focus{text-decoration:none}


/* Global font */
html, body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.65;
  font-weight: 400;
  color: #1f2937;
}

/* Headings ใช้ Medium 500 (อ่านสบาย ไม่หนาเกิน) */
h1, h2, h3, h4, h5, h6,
.section-title, .page-title, .card-title, .modal-title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500; /* ลอง Medium ก่อน */
  letter-spacing: -0.01em;
}

<!-- โหลดฟอนต์ DM Sans -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">

<style>
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;     /* ลอง 16 / 17 / 18 */
  line-height: 1.75;
  color: #1f2937;
}
h2, h3 {
  font-weight: 500; /* Heading ไม่หนาเกิน */
}
</style>

.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}