:root {
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Base font size (ถ้าเล็กไป เปลี่ยนเป็น 17px หรือ 18px) */
  --fs-base: 17px;
  --lh-base: 1.7;

  /* Global font weight */
  --fw-body: 400;     /* Regular */
  --fw-subtitle: 500; /* Medium */
  --fw-heading: 600;  /* SemiBold */
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-body);
  color: #1f2937;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6,
.section-title, .page-title, .modal-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-heading) !important;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-top: 0.6em;
  margin-bottom: 0.35em;
}

/* ===== Paragraphs ===== */
p {
  margin-bottom: 1em;
}

/* ===== Card titles / subtitles ===== */
.card .card-title,
.card h5, .card h6 {
  font-weight: var(--fw-subtitle) !important;
}

/* ===== Utility classes ===== */
/* ใช้ได้ทุกที่ที่อยากเปลี่ยนน้ำหนัก */
.text-body     { font-weight: var(--fw-body) !important; }     /* Regular */
.text-subtitle { font-weight: var(--fw-subtitle) !important; } /* Medium */
.text-heading  { font-weight: var(--fw-heading) !important; }  /* SemiBold */

/* ===== Global Heading Color ===== */
h1, h2, h3, h4, h5, h6,
.section-title, .page-title, .card-title, .modal-title {
  color: #198754; /* Bootstrap's text-success green */
}


/* ===== VPHCAP Channel: ครอบรูปให้เต็ม + จัด title กลาง ===== */
#vphcap-channel .channel-item{
  display: block;
  border-radius: 18px;
  overflow: hidden;                 /* กันภาพล้น/ขอบดำ */
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* กรอบรูป (กำหนดอัตราส่วน + ครอบภาพให้เต็มจริง ๆ) */
#vphcap-channel .yt-thumb{
  position: relative;
  aspect-ratio: 16 / 9;             /* ปรับได้ */
  overflow: hidden;
}
#vphcap-channel .yt-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* ตัดภาพให้เต็มกรอบ */
  display: block;                    /* ตัดช่องว่าง/ขอบดำจาก inline img */
}

/* ชื่อวิดีโอให้อยู่กลางพอดี และเว้นระยะเท่ากัน */
#vphcap-channel .yt-title{
  min-height: 64px;                  /* ปรับตามความยาวชื่อได้ */
  padding: 12px 14px;
  display: flex;
  align-items: center;               /* กลางแนวตั้ง */
  justify-content: center;           /* กลางแนวนอน */
  text-align: center;
  font-weight: 500;                  /* น้ำหนักกลาง อ่านสบาย */
  line-height: 1.35;
  color: #111827;
  background: #fff;
  margin: 0;                         /* กัน margin ล้น */
}

/* เผื่อมี card ซ้อนหรือคลาสอื่น ๆ */
#vphcap-channel .card-body{ padding: 0; }


/* curriculum page */
.vph-content img { max-width: 100%; height: auto; }

.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:10px; 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 ul, .page-card ol{ padding-left:1.25rem; }

/* about page */
.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; }
}
.about-edit img { max-width: 100%; height: auto; }
.about-padding { padding-left: 1.2rem; }

:root{
  --heading-green: #198754; /* สีเดียวกับ Bootstrap text-success */
}

/* ตั้งค่าเริ่มต้น: หัวข้อทุกที่ = เขียว */
h1, h2, h3, h4, h5, h6,
.section-title, .page-title, .card-title, .modal-title {
  color: var(--heading-green) !important;
}

/* ยกเว้น: หัวข้อบน Hero/แถบหัวข้อที่เป็นพื้นรูป ใช้สีขาว */
.page-hero h1,
.page-header h1,
.box-header h1,
.page-about h1,
.text-white {            /* ถ้ามีคลาส text-white ติดอยู่ */
  color: #fff !important;
}

/* ===== Force white for hero video caption ===== */
.home-hero .carousel-caption .hero-title,
.home-hero .carousel-caption .hero-title a,
.home-hero .carousel-caption .delete-line-a,
.home-hero .carousel-caption .delete-line-a * {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}


/* ===== Publications polish ===== */

/* การ์ดและรูปไม่ให้ชนขอบ */
.pub-card { padding: 1rem 1rem 1.25rem; }
.pub-card .card-box-img{
  margin: .05rem;            /* กันขอบเพิ่มนิดนึง */
  border-radius: .8rem;
  overflow: hidden;          /* ครอบมุมโค้งให้รูป */
}
.pub-card .card-box-img img{
  display: block;
  width: 100%;
  height: auto;
}

/* หัวข้อให้อยู่กลาง + ไม่มีเส้นใต้ + รับสีจาก global */
.pub-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  margin: .75rem 0 .5rem;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000 !important;   /* ตั้งค่าสีดำ */
}

.pub-title a {
  color: #000 !important;   /* ลิงก์ใน title ให้เป็นดำเหมือนกัน */
  text-decoration: none;
}

.pub-title a:hover {
  text-decoration: none;  /* หรือจะตัด underline ทิ้งเลยก็ได้ */
}

.pub-title a:hover{ opacity: .9; }

/* กล่องรายละเอียดใต้หัวข้อ */
.pub-meta-block{ text-align: center; margin-bottom: .75rem; line-height: 1.3; }
.pub-journal{ font-size: .9rem; font-weight: 400; }
.pub-date{ font-size: .85rem; color: #6c757d; }

/* ปุ่มใหญ่ขึ้น */
.pub-card .btn-open{
  min-width: 180px;
  padding: .75rem 1.2rem;
  font-weight: 600;
  border-width: 2px;
  border-radius: .6rem;
}