/* ให้ภาพในการ์ดทุนแสดงเต็มใบ ไม่ตัดขอบ */
#sectionsRoot img {
  position: static !important;
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
/* กรอบที่ครอบภาพโดยตรง ต้องไม่ล็อกความสูง */
#sectionsRoot :has(> img) {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

/* =========================================================
   style.css  |  สไตล์ที่ "ใช้ร่วมกันทุกหน้า"
   - ตัวแปรสีกลาง
   - ตัวกันหน้าเว็บกว้างเกินจอ (มือถือ)
   - navbar หลัก (สีแดงเลือดหมู) + แถบสีฟ้า (ปัดซ้าย-ขวาได้)
   - หน้าต่างดูภาพใหญ่ (modal) และ footer

   สไตล์เฉพาะหน้า อยู่ในโฟลเดอร์ css/pages/
   ลำดับการเรียกในแต่ละหน้า:  font.css -> style.css -> pages/xxx.css
   ========================================================= */

/* ---------- ตัวแปรสีกลาง (แก้ที่นี่ที่เดียว) ---------- */
:root {
  --maroon: #800000;
  --gold: #ffd966;
  --blue: #1565c0;
  --navy: #0b2f63;
}

/* ---------- ตัวกันกว้างเกินจอ ---------- */
html, body { max-width: 100%; }
body { overflow-x: clip; }
img, iframe, video { max-width: 100%; }
main { overflow-wrap: break-word; }


/* =========================================================
   NAVBAR หลัก (สร้างโดย js/navbar.js)
   ========================================================= */

/* จุดเด่นของลิงก์ที่ active */
.navbar .nav-link { border-bottom: 3px solid transparent; transition: all .2s; }
.navbar .nav-link:hover { color: #ffd966; }
.navbar .nav-link.active {
  color: #ffd966 !important;
  font-weight: 600;
  border-bottom: 3px solid #ffd966;
}


/* =========================================================
   NAVBAR สีฟ้า (แถบทางลัด) : ปัดนิ้วบนมือถือ / ลากเมาส์บนคอม
   ========================================================= */
.sub-nav {
  position: relative;
  background: linear-gradient(to bottom, #1565c0, #0d47a1);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15);
}
.sub-nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1rem;
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: background .2s, border-color .2s;
}
.sub-nav a:hover { background: rgba(255, 255, 255, .15); border-bottom-color: #ffd966; color: #fff; }
.sub-nav a.active { background: rgba(255, 255, 255, .18); border-bottom-color: #ffd966; font-weight: 600; }

.sub-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  cursor: grab;
}
.sub-scroll::-webkit-scrollbar { display: none; }
.sub-scroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.sub-scroll.dragging a { pointer-events: none; }

/* รางเมนู: กว้างตามเนื้อหา อยู่กึ่งกลางเมื่อพอดีจอ และชิดซ้ายเมื่อล้น (เลื่อนถึงทุกเมนู) */
.sub-track { display: flex; flex-wrap: nowrap; width: max-content; margin-inline: auto; }
.sub-track a { flex: 0 0 auto; scroll-snap-align: start; }

/* เงาขอบซ้าย-ขวา บอกให้รู้ว่ายังเลื่อนต่อได้ */
.sub-nav::before, .sub-nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.sub-nav::before { left: 0;  background: linear-gradient(to right, #0d47a1, rgba(13, 71, 161, 0)); }
.sub-nav::after  { right: 0; background: linear-gradient(to left,  #0d47a1, rgba(13, 71, 161, 0)); }
.sub-nav.can-left::before  { opacity: 1; }
.sub-nav.can-right::after  { opacity: 1; }


/* =========================================================
   หน้าต่างดูภาพใหญ่ (สร้างโดย js/common.js)
   ========================================================= */
#viewerModal .carousel-item img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
}


/* =========================================================
   FOOTER (สร้างโดย js/footer.js)
   ========================================================= */
.site-footer { background: #5c0a0a; color: #f3dede; margin-top: 4rem; padding: 2rem 0 1.25rem; }
.site-footer a { color: #ffd966; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }


/* =========================================================
   แท็บเล็ตและมือถือ
   ========================================================= */
@media (max-width: 991.98px) {
  /* ชื่อวิทยาลัยใน navbar ต้องขึ้นบรรทัดใหม่ได้ (Bootstrap ตั้ง nowrap ไว้) */
  .navbar-brand { white-space: normal; flex: 1 1 0; min-width: 0; margin-right: .5rem; }
  .navbar-brand img { height: 40px; width: auto; flex: 0 0 auto; }
  .navbar-brand span { font-size: clamp(.8rem, 3.6vw, 1.1rem); line-height: 1.25; }
  .navbar-toggler { flex: 0 0 auto; }

  /* แถบสีฟ้า: เต็มความกว้างจอ เลื่อนได้จนสุดขอบ */
  .sub-nav .container { padding-left: 0; padding-right: 0; }
  .sub-track { margin-inline: 0; padding-inline: .5rem; }
  .sub-nav a { padding: .65rem .85rem; font-size: .9rem; }
}

@media (max-width: 575.98px) {
  .site-footer { margin-top: 2.5rem; text-align: center; }
  #viewerModal .modal-dialog { margin: .5rem; }
  #viewerModal .modal-title { font-size: 1rem !important; }
}