body {
      font-family: 'Sarabun', sans-serif;
      background: linear-gradient(to bottom, #fffdf5, #fff8dc);
      color: #4a3b00;
    }

   .navbar {
  background: linear-gradient(135deg, #fff176, #ffd54f, #ffca28, #ffb300);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.navbar-brand, .nav-link {
  color: #3e2f00 !important;
  font-weight: 600;
}

  
    .btn-yellow {
      background: linear-gradient(to right, #fbc02d, #fdd835);
      border: none;
      color: #4a3800;
      font-weight: 600;
      border-radius: 30px;
      padding: 10px 25px;
      transition: 0.3s;
    }

    .btn-yellow:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(251, 192, 45, 0.35);
    }

    .section-title {
      font-weight: 700;
      color: #6b5200;
      margin-bottom: 30px;
    }

    .feature-card {
      border: none;
      border-radius: 20px;
      background: #fffbea;
      box-shadow: 0 8px 20px rgba(0,0,0,0.06);
      transition: 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.10);
    }

    .icon-box {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #ffe082, #ffd54f);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 15px;
      color: #6b5200;
    }

    .about-section {
      background: linear-gradient(to right, #fff8dc, #fff3cd);
      border-radius: 25px;
      padding: 60px 30px;
      margin-top: 50px;
    }

    .footer {
      background: linear-gradient(to right, #fdd835, #ffe082);
      color: #5c4300;
      padding: 20px 0;
      margin-top: 60px;
      text-align: center;
      font-weight: 500;
    }

    body {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.custom-carousel,
.side-banner {
  height: 450px;
}

.slide-img,
.side-banner img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  background: #000; /* กันช่องว่าง */
}

.carousel-inner {
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.side-banner {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.side-banner img {
  display: block;
  transition: transform 0.4s ease;
}

.side-banner img:hover {
  transform: scale(1.03);
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* responsive */
@media (max-width: 991.98px) {
  .custom-carousel,
  .side-banner {
    height: 300px;
  }
}
/* ===== โลโก้ด้านบน ===== */
.top-logo {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px;         /* 👈 ห่างซ้าย 10px */
  margin-top: 20px;   /* 👈 เพิ่มตรงนี้ */
}

.top-logo img {
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
}

/* ===== Navbar ลอย + เว้นขอบบน ===== */
.custom-navbar {
  position: sticky;
  top: 0px; /* 👈 เว้น 10px จากขอบบน */
  z-index: 999;

   margin: 10px 5px 0 5px;
  border-radius: 15px;

  background: linear-gradient(135deg, #fff176, #ffd54f, #ffca28, #ffb300);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
   backdrop-filter: blur(10px);
}
.dropdown-menu {
  border-radius: 10px;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  z-index: 1050;
}

.dropdown-item:hover {
  background: #ffe082;
  color: #3e2f00;
}

/* ===== TAB MENU ===== */
.custom-tabs .nav-link {
  border-radius: 30px;
  margin: 5px;
  padding: 10px 18px;
  font-weight: 600;
  color: #5c4300;
  background: linear-gradient(145deg, #fff8c6, #ffe082);
  transition: 0.3s;
}

/* hover */
.custom-tabs .nav-link:hover {
  background: linear-gradient(145deg, #ffe082, #ffca28);
}

/* active tab */
.custom-tabs .nav-link.active {
  background: linear-gradient(145deg, #ffd54f, #ffb300);
  color: #3e2f00;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* ===== CONTENT BOX ===== */
.custom-tab-content {
  border-radius: 20px;
  background: linear-gradient(145deg, #fffde7, #fff8c6);
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.1),
    inset 0 2px 8px rgba(255,255,255,0.5);
}
  /*footer*/
  .custom-footer {
  margin-top: 60px;
  padding: 40px 20px;

  background: linear-gradient(
    135deg,
    #fff176,
    #ffd54f,
    #ffca28,
    #ffb300
  );

  color: #3e2f00;

  box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
}

/* หัวข้อ */
.custom-footer h5 {
  font-weight: 700;
  margin-bottom: 15px;
}

/* ข้อความ */
.custom-footer p {
  margin-bottom: 6px;
  font-size: 15px;
}

/* ลิงก์ */
.custom-footer a {
  display: inline-block;
  color: #3e2f00;
  text-decoration: none;
  margin-bottom: 5px;
  transition: 0.3s;
}

/* hover */
.custom-footer a:hover {
  color: #000;
  transform: translateX(5px);
}

/* เส้นแบ่ง (optional) */
.custom-footer .col-md-6 {
  position: relative;
}

/* mobile spacing */
@media (max-width: 768px) {
  .custom-footer {
    text-align: center;
  }
}
/*cookie*/
.cookie-popup {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: none;
}

.cookie-content {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, #fff8c6, #ffe082, #ffd54f, #ffca28);
  color: #3e2f00;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.cookie-title {
  margin-bottom: 10px;
  font-weight: 700;
}

.cookie-content p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-cookie {
  border: none;
  border-radius: 30px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s ease;
}

.btn-cookie:hover {
  transform: translateY(-1px);
}

.btn-accept,
.btn-save {
  background: linear-gradient(135deg, #ffca28, #ffb300);
  color: #3e2f00;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.16);
}

.btn-setting,
.btn-back {
  background: #fffdf2;
  color: #5c4300;
  border: 1px solid #f0c94d;
}

.cookie-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.cookie-settings label {
  background: rgba(255, 255, 255, 0.45);
  padding: 10px 12px;
  border-radius: 12px;
}

.cookie-settings input[type="checkbox"] {
  margin-right: 8px;
}

@media (max-width: 768px) {
  .cookie-popup {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .cookie-content {
    padding: 18px;
  }

  .cookie-buttons {
    flex-direction: column;
  }

  .btn-cookie {
    width: 100%;
  }
}

/*img รูปภาพด้านล่าง*/
.img-box {
  width: 95%;          /* เต็ม col */

  object-fit: cover;    /* ครอปไม่ให้ภาพยืด */
  border-radius: 10px;  /* มุมโค้ง */
  transition: 0.3s;
}

/* hover effect */
.img-box:hover {
  transform: scale(1.05);
}

/*===== คณบดี =====*/
.side-card {
  height: 100%;
  border-radius: 20px;
  padding: 20px 15px;

  background: linear-gradient(145deg, #fff8c6, #ffe082, #ffd54f);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* รูปโปรไฟล์ */
.profile-img {
  width: 210px;
  height: 260px;
  object-fit: cover;
  border-radius: 50% / 65%; /* 👈 วงรี */
  border: 6px solid #fff; /* 👈 ขอบขาวหนา */
  display: block;
  margin: 0 auto 15px auto;  /* 👈 จัดกลาง */
  box-shadow: 0 1px 25px rgba(0,0,0,0.25);     /* 👈 เงา */
}

/* ปุ่มด้านล่าง */
.btn-img {
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  transition: 0.3s;
}

.btn-img:hover {
  transform: scale(1.03);
}

/* ชื่อ */
.team-style07 h6 {
  font-weight: 600;
  color: #3e2f00;
}

/* ตำแหน่ง */
.team-style07 p {
  font-size: 14px;
  color: #5c4300;
}
/*รูปล่าง nav*/
.img-full {
  max-width: 100%;   /* ไม่เกินหน้าจอ */
  height: auto;      /* ไม่ยืด */
}




a {
  text-decoration: none;
}
  /*การ์ดภาพสไลน์*/
  .info-row {
  display: flex;
  justify-content: flex-end; /* ชิดขวา */
  align-items: center;
  gap: 165px; /* 👈 ระยะห่างระหว่าง count กับ date */
}

.view-count {
  display: flex;
  align-items: center;
  gap: 5px; /* ระยะ icon กับตัวเลข */
  color: #D3D3D3;
}

.date-text {
  color: #D3D3D3;
}
.imgss {
  width: 18px;
  height: 18px;
  position: relative;
  top: 1px; /* ปรับขึ้น/ลง */
}

/* ===== Pagination Theme Yellow ===== */
.pagination .page-link {
  color: #5c4300;
  background: #fff8c6;
  border: none;
  margin: 0 4px;
  border-radius: 10px;
  transition: 0.3s;
}

/* hover */
.pagination .page-link:hover {
  background: linear-gradient(135deg, #ffe082, #ffca28);
  color: #3e2f00;
  transform: translateY(-2px);
}

/* active */
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  color: #3e2f00;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* focus (เอาขอบฟ้าออก) */
.pagination .page-link:focus {
  box-shadow: none;
}
.pagination {
  padding: 10px;
  background: linear-gradient(145deg, #fffde7, #fff8c6);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pagination-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.pagination-wrap::-webkit-scrollbar {
  height: 6px;
}

.pagination-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 179, 0, 0.35);
  border-radius: 10px;
}

.custom-pagination {
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  margin-bottom: 0;
}

.pagination .page-link {
  color: #5c4300;
  background: #fff8c6;
  border: none;
  margin: 0 4px;
  border-radius: 10px;
  transition: 0.3s;
  min-width: 42px;
  text-align: center;
}

.pagination .page-link:hover {
  background: linear-gradient(135deg, #ffe082, #ffca28);
  color: #3e2f00;
  transform: translateY(-2px);
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  color: #3e2f00;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.pagination .page-item.disabled .page-link {
  background: #f7edb0;
  color: #a68a2a;
  pointer-events: none;
  opacity: 0.75;
}

.pagination .page-link:focus {
  box-shadow: none;
}

.pagination .dots {
  background: transparent !important;
  color: #8a6d00;
}

@media (max-width: 768px) {
  .custom-pagination {
    justify-content: flex-start;
  }

  .pagination .page-link {
    padding: 8px 12px;
    font-size: 14px;
  }
}


/*หน้า slidnew */
/* ===== CARD THEME YELLOW ===== */
.custom-card {
  border: none;
  border-radius: 20px;
  background: #fffdf5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* header */
.custom-card-header {
  background: linear-gradient(135deg, #fff176, #ffd54f, #ffca28);
  color: #3e2f00;
  text-align: center;
  padding: 18px;
  font-weight: 700;
  font-size: 22px;
  border-bottom: none;
  position: relative;
}

/* เส้นตกแต่งใต้ header */
.custom-card-header::after {
  content: "";
  width: 60px;
  height: 4px;
  background: #fff;
  display: block;
  margin: 10px auto 0;
  border-radius: 5px;
  opacity: 0.7;
}

/* body */
.custom-card-body {
  padding: 30px;
}

/* title */
.custom-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #5c4300;
}

/* date */
.custom-date {
  font-size: 14px;
  color: #a68b00;
}

/* image */
.custom-card-body img {
  border-radius: 15px;
  margin-top: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}



/*nav ใหม่*/
/* ===== Navbar mobile/desktop improvement ===== */
.custom-navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  margin: 10px 5px 0 5px;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff176, #ffd54f, #ffca28, #ffb300);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
}

.custom-navbar .container {
  align-items: center;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3e2f00 !important;
  font-weight: 700;
  white-space: nowrap;
}

.navbar-brand img {
  border-radius: 8px;
}

.navbar-nav {
  align-items: center;
  gap: 4px;
}

.navbar-nav .nav-link {
  color: #3e2f00 !important;
  font-weight: 600;
  padding: 10px 14px !important;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.28);
}

.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, 0.35);
}

/* dropdown */
.dropdown-menu {
  border: none;
  border-radius: 14px;
  padding: 10px;
  margin-top: 10px;
  min-width: 240px;
  background: #fffdf5;
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  z-index: 1050;
}

.dropdown-item {
  border-radius: 10px;
  padding: 10px 14px;
  color: #3e2f00;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: linear-gradient(145deg, #ffe082, #ffca28);
  color: #3e2f00;
  transform: translateX(3px);
}


/*ข่าว news*/
.news-item {
  padding: 10px 0;
}

.news-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: #5c4300;
  line-height: 1.6;
  transition: 0.25s ease;
}

.news-link:hover {
  color: #000;
  transform: translateX(4px);
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 14px;
  color: #a68a2a;
}

.news-date,
.news-views {
  background: rgba(255, 224, 130, 0.28);
  padding: 4px 10px;
  border-radius: 20px;
}

.news-divider {
  border: 0;
  border-top: 1px solid #5c4300;
  margin: 14px 0;
}

.more-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  color: #3e2f00;
  font-weight: 600;
  transition: 0.25s ease;
}

.more-link:hover {
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/*หน้า newsmore.php*/
.news-page-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.banner-wrap {
  margin-bottom: 20px;
}

.news-page-card {
  background: linear-gradient(145deg, #fffdf0, #fff8d9);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  border: 1px solid rgba(255, 202, 40, 0.25);
}

.news-page-header {
  background: linear-gradient(135deg, #fff176, #ffd54f, #ffca28, #ffb300);
  color: #3e2f00;
  text-align: center;
  padding: 24px 20px 18px;
}

.news-page-title {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
}

.news-page-subtitle {
  margin-top: 8px;
  color: #5c4300;
  font-size: 15px;
}

.news-page-body {
  padding: 24px;
}

.news-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent;
}

.news-table thead th {
  background: linear-gradient(145deg, #ffe082, #ffd54f);
  color: #3e2f00;
  font-weight: 700;
  border: none !important;
  padding: 14px 16px !important;
  text-align: center;
}

.news-table thead th:first-child {
  border-radius: 12px 0 0 12px;
}

.news-table thead th:last-child {
  border-radius: 0 12px 12px 0;
}

.news-table tbody tr {
  background: #fffef8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.news-table tbody td {
  border: none !important;
  padding: 16px !important;
  vertical-align: middle;
  color: #4a3b00;
}

.news-table tbody td:first-child {
  border-radius: 14px 0 0 14px;
  text-align: center;
  font-weight: 600;
}

.news-table tbody td:last-child {
  border-radius: 0 14px 14px 0;
  text-align: center;
  font-weight: 600;
}

.news-id {
  color: #5c4300;
  font-weight: 700;
}

.news-table-link {
  color: #5c4300;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.6;
  transition: 0.25s ease;
}

.news-table-link:hover {
  color: #000;
  transform: translateX(3px);
}

.news-date-cell {
  color: #7a5b00;
  white-space: nowrap;
}

.news-view-cell {
  color: #8a6d00;
  font-weight: 700;
}

/* ===== DataTables theme ===== */
.dataTables_wrapper {
  color: #4a3b00;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 14px;
  color: #5c4300 !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #e0c24f;
  border-radius: 10px;
  background: #fffdf5;
  padding: 6px 10px;
  color: #4a3b00;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(255, 193, 7, 0.2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  background: #fff8c6 !important;
  color: #5c4300 !important;
  border-radius: 10px;
  margin: 0 4px;
  transition: 0.25s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #ffe082, #ffca28) !important;
  color: #3e2f00 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #ffd54f, #ffb300) !important;
  color: #3e2f00 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* responsive */
@media (max-width: 768px) {
  .news-page-header {
    padding: 20px 15px;
  }

  .news-page-title {
    font-size: 22px;
  }

  .news-page-body {
    padding: 16px;
  }

  .news-table thead th,
  .news-table tbody td {
    padding: 12px !important;
    font-size: 14px;
  }

  .news-date-cell {
    white-space: normal;
  }
}

/*qa หน้าแรก*/
.qa-item {
  padding: 10px 0;
}

.qa-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qa-title {
  flex: 1;
  line-height: 1.6;
}

.qa-badge {
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.08);
}

.qa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: rgba(255, 248, 198, 0.55);
  border-radius: 16px;
  border: 1px solid rgba(255, 202, 40, 0.25);
}

.qa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5c4300;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .qa-link {
    gap: 8px;
  }

  .qa-legend {
    flex-direction: column;
    gap: 10px;
  }
}

/*ภาพกิจกรรม*/
.activity-card {
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background: #fffbea;
}

.activity-image-link {
  display: block;
  overflow: hidden;
}

.activity-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.activity-card:hover .activity-img {
  transform: scale(1.04);
}

.activity-card .card-body {
  padding: 18px 16px 20px;
}

.activity-title {
  font-weight: 700;
  color: #5c4300;
  margin-bottom: 8px;
}

.activity-text {
  color: #7a6200;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .activity-img {
    height: 220px;
  }
}

@media (max-width: 767.98px) {
  .activity-img {
    height: 200px;
  }
}
/*วิวภาพกิจกรรม*/
.activity-view {
  margin-top: 8px;
  color: #a68a2a;
  font-size: 14px;
  font-weight: 600;
}
/*ในส่วนของตัวหนังสือภาพกิจกรรม*/
.activity-text-modern {
  font-size: 16px;
  line-height: 1.7;
  color: #4a3b00;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.activity-text-modern a:hover {
  color: #000;
  transform: translateX(2px);
}

/*หน้า ac_photo.php*/
.photo-detail-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.photo-detail-card {
  margin-top: 10px;
}

.photo-detail-title {
  display: block;
  font-size: 26px;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 24px;
  color: #5c4300;
}

.photo-detail-content {
  color: #4a3b00;
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 28px;
}

.photo-detail-content p {
  margin-bottom: 14px;
}

.photo-detail-image-wrap {
  margin-top: 10px;
}

.photo-detail-image {
  width: 100%;
  max-width: 700px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.photo-detail-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.photo-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 24px;
  background: rgba(255, 224, 130, 0.32);
  color: #7a5b00;
  font-size: 14px;
  font-weight: 500;
}

.photo-meta-badge .imgss {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .photo-detail-title {
    font-size: 20px;
  }

  .photo-detail-content {
    font-size: 15px;
    line-height: 1.8;
  }

  .photo-detail-image {
    max-width: 100%;
  }

  .photo-detail-meta {
    justify-content: flex-start;
  }
}

/*หน้า background.php*/
.about-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.about-card {
  margin-top: 10px;
}

.about-title {
  font-size: 28px;
  font-weight: 700;
  color: #5c4300;
  margin-bottom: 10px;
}

.about-intro {
  color: #7a5b00;
  margin-bottom: 25px;
}

.about-body {
  padding: 30px 26px;
}

.about-content {
  font-size: 16px;
  line-height: 1.9;
  color: #4a3b00;
}

.about-content p {
  margin-bottom: 16px;
  text-indent: 40px; /* ย่อหน้า */
}

.about-list {
  margin-left: 20px;
  margin-bottom: 16px;
}

.about-list li {
  margin-bottom: 6px;
}

/* mobile */
@media (max-width: 768px) {
  .about-title {
    font-size: 22px;
  }

  .about-body {
    padding: 20px 16px;
  }

  .about-content {
    font-size: 15px;
  }

  .about-content p {
    text-indent: 20px;
  }
}

/*หน้า philosophy.php*/
.mission-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.mission-card {
  margin-top: 10px;
}

.mission-body {
  padding: 30px 24px;
}

.mission-block {
  background: rgba(255, 248, 198, 0.35);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 6px rgba(255,255,255,0.4);
  border: 1px solid rgba(255, 202, 40, 0.18);
}

.mission-title {
  font-size: 24px;
  font-weight: 700;
  color: #5c4300;
  margin-bottom: 10px;
  position: relative;
  padding-left: 16px;
}

.mission-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffd54f, #ffb300);
}

.mission-text {
  font-size: 16px;
  line-height: 1.9;
  color: #4a3b00;
  margin-bottom: 0;
}

.mission-text p {
  margin-bottom: 10px;
}

.mission-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .mission-body {
    padding: 20px 16px;
  }

  .mission-block {
    padding: 16px 16px;
    margin-bottom: 14px;
  }

  .mission-title {
    font-size: 18px;
    padding-left: 14px;
  }

  .mission-title::before {
    height: 22px;
  }

  .mission-text {
    font-size: 15px;
    line-height: 1.8;
  }
}

/*  qa */
.qa-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.qa-card {
  margin-top: 10px;
}

.qa-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.qa-table thead th {
  background: linear-gradient(145deg, #ffe082, #ffd54f);
  color: #3e2f00;
  border: none !important;
  padding: 14px 16px !important;
  text-align: center;
  font-weight: 700;
}

.qa-table tbody tr {
  background: #fffef8;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.qa-table tbody td {
  border: none !important;
  padding: 15px 16px !important;
  color: #4a3b00;
}

.qa-id {
  text-align: center;
  font-weight: 700;
  color: #5c4300;
}

.qa-link {
  color: #5c4300;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.6;
}

.qa-link:hover {
  color: #000;
  text-decoration: underline;
}

.qa-type-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 16px;
  background: #efc2ef;
  color: #5c2a5c;
  font-size: 13px;
  font-style: italic;
  white-space: nowrap;
}

.qa-date,
.qa-view {
  text-align: center;
  color: #8a6d00;
  white-space: nowrap;
  font-weight: 500;
}

/* DataTables */
.dataTables_wrapper {
  color: #4a3b00;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #e0c24f;
  border-radius: 10px;
  background: #fffdf5;
  padding: 6px 10px;
  color: #4a3b00;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  background: #fff8c6 !important;
  color: #5c4300 !important;
  border-radius: 10px;
  margin: 0 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #ffd54f, #ffb300) !important;
  color: #3e2f00 !important;
}

@media (max-width: 768px) {
  .qa-table thead {
    display: none;
  }

  .qa-table tbody tr {
    display: block;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .qa-table tbody td {
    display: block;
    text-align: left !important;
    padding: 7px 0 !important;
  }

  .qa-type-badge {
    margin-left: 0;
    margin-top: 8px;
  }
}

/*qa new.php*/
.qa-detail-section {
  background: linear-gradient(to bottom, #fffdf5, #fff8dc);
}

.qa-detail-card {
  margin-top: 10px;
}

.qa-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #4a3b00;
  line-height: 1.7;
  margin-bottom: 15px;
}

.qa-type-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 18px;
  background: #efc2ef;
  color: #5c2a5c;
  font-size: 14px;
  font-style: italic;
}

.qa-download-btn {
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 600;
}

.qa-pdf-wrap {
  margin-top: 15px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.qa-pdf {
  width: 100%;
  height: 700px;
  border: none;
}

.qa-detail-date {
  font-size: 14px;
  color: #8a6d00;
}

/* รูปด้านบน */
.rounded-img {
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .qa-pdf {
    height: 500px;
  }

  .qa-detail-title {
    font-size: 18px;
  }
}
.qa-detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #8a6d00;
}
/* ===== รูปแบบปุ่มรับสมัครพื้นฐาน ===== */
.btn-register {
  border: none;
  border-radius: 30px; /* ขอบมน */
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  color: #3e2f00; /* สีตัวอักษรน้ำตาลเข้มให้เข้ากับธีมเว็บ */
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* เอฟเฟกต์ตอนชี้เมาส์ */
.btn-register:hover {
  transform: translateY(-3px);
  color: #000;
}

/* ===== 1. ปุ่มสีเหลืองไล่เขียว ===== */
.btn-grad-green {
  /* ไล่จากเหลืองสว่างไปเขียวธรรมชาติ */
  background: linear-gradient(135deg, #ffe082 0%, #ffeb3b 40%, #4caf50 100%);
}

.btn-grad-green:hover {
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35);
}

/* ===== 2. ปุ่มสีเหลืองไล่ฟ้า ===== */
.btn-grad-blue {
  /* ไล่จากเหลืองสว่างไปฟ้าสดใส (หลีกเลี่ยงสีเทาตรงกลาง) */
  background: linear-gradient(135deg, #ffe082 0%, #ffeb3b 40%, #29b6f6 100%);
}

.btn-grad-blue:hover {
  box-shadow: 0 8px 20px rgba(41, 182, 246, 0.35);
}