/* ==========================================================================
   home.css
   สไตล์ที่ทำให้หน้าแรก (index.php) ดูทันสมัยขึ้น โดยยังคงอัตลักษณ์เดิม: น้ำเงิน + ทอง
   ทุกกฎมีผลเฉพาะภายใน .home-modern (คลาสบน <body> ของ index.php) จึงไม่กระทบหน้าอื่นของเว็บ
   ไฟล์นี้โหลดหลัง Bootstrap เพื่อให้ปรับแต่งทับค่าเริ่มต้นของ Bootstrap ได้
   ========================================================================== */

.home-modern {
  /* สีหลัก: ปรับที่นี่ที่เดียว ทั้งหน้าเปลี่ยนตาม */
  --hp-navy: #0b2a5b;      /* น้ำเงินเข้ม: หัวข้อ, footer */
  --hp-blue: #0d6efd;      /* น้ำเงินหลักของเว็บเดิม: ลิงก์, ปุ่ม, แถบหัวเมนูข้าง */
  --hp-gold: #f4ce14;      /* ทองเดิมของโลโก้/ไอคอนวงกลม */
  --hp-soft: #f3f6fb;      /* พื้นหลังหน้า สีอ่อนมาก ให้การ์ดสีขาวเด่นขึ้น */
  --hp-line: #e6ecf5;      /* เส้นแบ่งบางๆ */
  --hp-radius: 16px;       /* มุมโค้งของการ์ดทั้งหน้า */
  --hp-shadow: 0 2px 14px rgba(11, 42, 91, 0.08);
  --hp-shadow-hover: 0 8px 26px rgba(11, 42, 91, 0.16);

  background-color: var(--hp-soft);
  color: #1f2a3d;
}

/* ---------- แถบเมนูบนสุด ---------- */
.home-modern .navbar {
  background-color: #fff !important;                 /* คลาส bg-light ของ Bootstrap ใช้ !important จึงต้องทับด้วย */
  border-bottom: 3px solid var(--hp-gold);
  box-shadow: 0 2px 12px rgba(11, 42, 91, 0.08);
}

.home-modern .navbar .logo p {
  color: var(--hp-navy);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.home-modern .navbar .nav-link {
  color: var(--hp-navy);
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}

/* เส้นทองใต้ลิงก์เมนูตอนเอาเมาส์ชี้: ขยายจากกลางออกไปสองข้าง
   ใช้ ::before เพราะ ::after ของ .dropdown-toggle เป็นลูกศรชี้ลงของ Bootstrap (ห้ามแย่งกัน ไม่งั้นลูกศรหลุดตำแหน่ง) */
.home-modern .navbar .nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--hp-gold);
  transition: width 0.25s ease, left 0.25s ease;
}
.home-modern .navbar .nav-link:hover,
.home-modern .navbar .nav-link:focus,
.home-modern .navbar .nav-link.show {
  color: var(--hp-blue);
}
.home-modern .navbar .nav-link:hover::before,
.home-modern .navbar .nav-link:focus::before,
.home-modern .navbar .nav-link.show::before {
  width: 70%;
  left: 15%;
}
/* วงโฟกัสของเมนู: แทนกรอบดำหนาของเบราว์เซอร์ด้วยวงสีทองบางๆ (ยังเห็นชัดเมื่อใช้คีย์บอร์ด) */
.home-modern .navbar .nav-link:focus {
  outline: none;
}
.home-modern .navbar .nav-link:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
/* ลูกศรของเมนูที่มี dropdown: ให้สีตามข้อความ และหมุนขึ้นเมื่อเปิดอยู่ */
.home-modern .navbar .dropdown-toggle::after {
  vertical-align: 0.15em;
  transition: transform 0.2s ease;
}
.home-modern .navbar .dropdown-toggle.show::after {
  transform: rotate(180deg);
}
.home-modern .navbar .fa-facebook {
  color: #1877f2;   /* สีประจำของ Facebook ให้ไอคอนรู้จักง่าย */
}

.home-modern .dropdown-menu {
  border: 0;
  border-top: 3px solid var(--hp-gold);   /* ขีดทองบนสุด เชื่อมสายตากับเส้นทองใต้แถบเมนู */
  border-radius: 0 0 14px 14px;
  box-shadow: var(--hp-shadow-hover);
  padding: 0.5rem;
  min-width: 16rem;
  margin-top: 0.4rem;
}
/* Bootstrap สั่งให้เมนูโผล่ทันที ตรงนี้ทำให้ค่อยๆ ลอยขึ้นมา (ใช้เฉพาะตอนเมนูเปิดอยู่ .show) */
.home-modern .dropdown-menu.show {
  animation: hp-dropdown-in 0.18s ease-out;
}
@keyframes hp-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-modern .dropdown-item {
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  color: var(--hp-navy);
  font-weight: 500;
  white-space: normal;                    /* ชื่อยาวขึ้นบรรทัดใหม่ได้ ไม่ล้นกรอบ */
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
/* เอาเมาส์ชี้/เลื่อนด้วยคีย์บอร์ด: พื้นฟ้าอ่อน + ขีดทองซ้าย + ขยับข้อความเข้ามาเล็กน้อย */
.home-modern .dropdown-item:hover,
.home-modern .dropdown-item:focus {
  background: #eaf1ff;
  color: var(--hp-navy);
  border-left-color: var(--hp-gold);
  padding-left: 1.1rem;
}
.home-modern .dropdown-item:active {
  background: var(--hp-navy);
  color: #fff;
}

/* รายการเมนูย่อย: ไอคอนในวงกลมสีทอง (เหมือนหัวข้อแต่ละส่วนของหน้าแรก) + ข้อความ */
.home-modern .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.home-modern .dropdown-item .menu-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hp-gold);
  color: #1f2a3d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}
.home-modern .dropdown-item:hover .menu-icon,
.home-modern .dropdown-item:focus .menu-icon {
  transform: scale(1.1);
}
/* ตอนกดค้าง (พื้นน้ำเงินเข้ม) วงกลมทองยังเด่นอยู่ ไม่ต้องเปลี่ยนสี */

/* ---------- สไลด์แบนเนอร์ ---------- */
.home-modern .slideshow-container1 {
  margin-top: 1.25rem;
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow-hover);
}

/* ---------- หัวข้อส่วนต่างๆ (ใช้ร่วมกันทั้งส่วนกิจกรรมและส่วนข่าว) ---------- */
.home-modern #activity-latest,
.home-modern #donation-latest {
  padding-top: 2rem !important;
  padding-bottom: 0.5rem !important;
}
.home-modern #activity-latest h4,
.home-modern #donation-latest h4 {
  color: var(--hp-navy);
  font-weight: 700;
  position: relative;
  padding-bottom: 0.5rem;
}
/* ขีดสีทองสั้นๆ ใต้หัวข้อ เป็นลายเซ็นของทั้งหน้า */
.home-modern #activity-latest h4::after,
.home-modern #donation-latest h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--hp-gold);
}
/* ข้อความรองใต้หัวข้อ (เช่น คำขอบคุณผู้บริจาค) */
.home-modern #activity-latest .activity-section-subtitle,
.home-modern #donation-latest .activity-section-subtitle {
  color: #5b6b85;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

/* ---------- การ์ดกิจกรรม ---------- */
.home-modern #activity-latest .card,
.home-modern #donation-latest .card {
  border: 0;
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-modern #activity-latest .card:hover,
.home-modern #donation-latest .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hp-shadow-hover);
}
.home-modern #activity-latest .btn-outline-primary,
.home-modern #donation-latest .btn-outline-primary {
  border-radius: 999px;
  padding-left: 1rem;
  padding-right: 1rem;
}
/* รูปปก + ป้ายวันที่ลอยทับมุมล่างซ้าย (แทนตัวหนังสือสีเทาเดิมที่อยู่เหนือหัวข้อ) */
.home-modern #activity-latest .activity-card-media,
.home-modern #donation-latest .activity-card-media {
  position: relative;
  display: block;
  overflow: hidden;
}
.home-modern #activity-latest .activity-card-media img,
.home-modern #donation-latest .activity-card-media img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.home-modern #activity-latest .activity-card:hover .activity-card-media img,
.home-modern #donation-latest .activity-card:hover .activity-card-media img {
  transform: scale(1.06);
}
.home-modern #activity-latest .activity-card-noimg,
.home-modern #donation-latest .activity-card-noimg {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #b7c3d6;
  background: linear-gradient(135deg, #eef2f9, #e4eaf5);
}
.home-modern #activity-latest .activity-card-date,
.home-modern #donation-latest .activity-card-date {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(11, 42, 91, 0.85);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
.home-modern #activity-latest .activity-card-date i,
.home-modern #donation-latest .activity-card-date i {
  color: var(--hp-gold);
}
/* ป้ายมุมบนซ้ายของรูป: บอกหมวดสั้นๆ (โทนทอง-กรมท่า ตามธีมเว็บ ไม่ใช้สีม่วง) */
.home-modern #activity-latest .activity-card-tag,
.home-modern #donation-latest .activity-card-tag {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--hp-gold);
  color: var(--hp-navy);
  font-size: 0.72rem;
  font-weight: 700;
}
/* แผงพื้นหลังไล่สีอ่อนๆ ห่อการ์ดทั้งแถว ให้ส่วนกิจกรรมดูเป็นบล็อกเดียวเด่นขึ้นจากพื้นหน้าเว็บ */
.home-modern #activity-latest .activity-panel,
.home-modern #donation-latest .activity-panel {
  background: linear-gradient(135deg, #eaf1ff 0%, #fbf6e6 100%);
  border-radius: 24px;
  padding: 1.75rem 1.25rem 0.25rem;
  box-shadow: inset 0 0 0 1px rgba(11, 42, 91, 0.06);
}
@media (max-width: 575.98px) {
  .home-modern #activity-latest .activity-panel,
  .home-modern #donation-latest .activity-panel {
    padding: 1.25rem 0.75rem 0.25rem;
    border-radius: 18px;
  }
}
/* เส้นทองสั้นๆ คั่นระหว่างหัวข้อกับเนื้อหาย่อ */
.home-modern #activity-latest .activity-card-divider,
.home-modern #donation-latest .activity-card-divider {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--hp-gold);
  margin: 0.2rem 0 0.6rem;
}
/* เส้นคั่นบางๆ เหนือลิงก์ "อ่านเพิ่มเติม" แยกเป็นแถบท้ายการ์ดชัดเจน */
.home-modern #activity-latest .activity-card-more,
.home-modern #donation-latest .activity-card-more {
  border-top: 1px solid var(--hp-line);
  padding-top: 0.65rem;
}
/* หัวข้อ: จำกัด 2 บรรทัด การ์ดที่ชื่อสั้น/ยาวสูงเท่ากัน */
.home-modern #activity-latest .card-title,
.home-modern #donation-latest .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 1.05rem;
}
.home-modern #activity-latest .card-title a:hover,
.home-modern #donation-latest .card-title a:hover {
  color: var(--hp-blue) !important;
}
.home-modern #activity-latest .card-text,
.home-modern #donation-latest .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #6b7a90;
}
.home-modern #activity-latest .activity-card-more,
.home-modern #donation-latest .activity-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  color: var(--hp-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.home-modern #activity-latest .activity-card-more i,
.home-modern #donation-latest .activity-card-more i {
  transition: transform 0.2s ease;
}
.home-modern #activity-latest .activity-card:hover .activity-card-more i,
.home-modern #donation-latest .activity-card:hover .activity-card-more i {
  transform: translateX(4px);
}

/* การ์ดใบสุดท้ายที่ตกค้างแถวเดียว (เช่นมี 4 โพสต์ แถวที่ 2 เหลือใบเดียว): ให้ขยายเต็มที่ว่างของแถวนั้น
   แทนที่จะแคบเท่าคอลัมน์ปกติ (33%/50%) แล้วเหลือช่องว่างข้างๆ ดูไม่เต็ม
   ทำโดยเปลี่ยนจากความกว้างตายตัวของ Bootstrap เป็น flex-grow: การ์ดที่อยู่แถวเดียวกันจะยืดแบ่งพื้นที่ว่างเท่าๆ กันเอง */
@media (min-width: 768px) {
  .home-modern #activity-latest .activity-grid-item {
    flex: 1 1 260px;
    width: auto;
  }
}

/* ---------- แถบเลื่อนผู้บริจาค (carousel) ---------- */
/* แผงของส่วนผู้บริจาคมีลูกศร+จุดนำทางอยู่ด้านล่าง ต้องเผื่อระยะมากกว่าแผงกิจกรรมที่เป็นตาราง */
.home-modern #donation-latest .activity-panel {
  padding-bottom: 1.5rem;
}
.home-modern .activity-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-modern .activity-carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.1rem 1rem;
  flex: 1 1 auto;
  /* ซ่อนแถบเลื่อนของเบราว์เซอร์ (ยังเลื่อนด้วยนิ้ว/แทร็คแพดได้ปกติ ควบคุมด้วยลูกศร/จุดนำทางแทน) */
  scrollbar-width: none;
}
.home-modern .activity-carousel-track::-webkit-scrollbar {
  display: none;
}
.home-modern .activity-carousel-item {
  flex: 0 0 auto;
  width: calc((100% - 2 * 1.25rem) / 3); /* เดสก์ท็อป: เห็น 3 ใบต่อหน้าจอ */
  scroll-snap-align: start;
}
@media (max-width: 991.98px) {
  .home-modern .activity-carousel-item {
    width: calc((100% - 1.25rem) / 2); /* แท็บเล็ต: เห็น 2 ใบ */
  }
}
@media (max-width: 575.98px) {
  .home-modern .activity-carousel-item {
    width: 86%; /* มือถือ: เห็นใบหลักเกือบเต็ม + เห็นขอบใบถัดไปนิดหน่อยเป็นคำใบ้ว่าเลื่อนได้ */
  }
}
/* ลูกศรก่อนหน้า/ถัดไป: วงกลมลอยสองข้างแถบเลื่อน โทนเดียวกับป้ายวันที่ (กรมท่า+ทอง) */
.home-modern .activity-carousel-arrow {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--hp-navy);
  box-shadow: var(--hp-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.home-modern .activity-carousel-arrow:hover,
.home-modern .activity-carousel-arrow:focus-visible {
  background: var(--hp-navy);
  color: #fff;
  transform: scale(1.06);
}
@media (max-width: 575.98px) {
  .home-modern .activity-carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}
/* จุดนำทาง: จุดปัจจุบันยืดเป็นแท่งสีทองยาวขึ้น ให้สังเกตง่ายกว่าจุดกลมล้วน */
.home-modern .activity-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: -0.5rem;
}
.home-modern .activity-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #c9d4e6;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.home-modern .activity-carousel-dot.is-active {
  width: 22px;
  background: var(--hp-gold);
}

/* ---------- ส่วนเนื้อหาหลัก ---------- */
.home-modern .container.mt-2 > hr {
  display: none;    /* เส้นคั่นเดิมบนสุดของเนื้อหา ไม่จำเป็นเมื่อแต่ละส่วนเป็นการ์ดแล้ว */
}
.home-modern .container.mt-2 {
  margin-top: 1.5rem !important;
}

/* ข่าว/เอกสารแต่ละหมวดเป็นการ์ดสีขาว แทนที่จะเป็นตารางลอยๆ คั่นด้วยเส้น */
.home-modern .col-lg-9 > .m-2 {
  background: #fff;
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  padding: 1rem 1.25rem 1.1rem;
  margin: 0 0 1.25rem 0 !important;
}
.home-modern .col-lg-9 > hr {
  display: none;
}

.home-modern .col-lg-9 h4 {
  color: var(--hp-navy);
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* วงกลมไอคอนสีทอง: ของเดิมกำหนดขนาดด้วย inline style (padding 15px + fs-1) ใหญ่และหนัก ต้องทับด้วย !important */
.home-modern .col-lg-9 h4 i {
  width: 46px;
  height: 46px;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem !important;
  box-shadow: 0 2px 8px rgba(244, 206, 20, 0.45);
  flex: none;
}
.home-modern .col-lg-9 .d-flex.justify-content-between {
  align-items: center;
  padding: 0 0 0.75rem 0 !important;
}

/* ปุ่ม "คลิกอ่านทั้งหมด..." เดิมสีแดงตัวเล็ก -> ปุ่มโค้งสีน้ำเงินให้เข้ากับทั้งหน้า */
.home-modern .col-lg-9 .btn-outline-danger {
  color: var(--hp-blue);
  border-color: var(--hp-blue);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
.home-modern .col-lg-9 .btn-outline-danger:hover {
  background: var(--hp-blue);
  color: #fff;
}

/* ตารางรายการ: ตัดเส้นตารางแนวตั้ง หัวตารางสีฟ้าอ่อน แถวมีเส้นบางๆ */
.home-modern .col-lg-9 .table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.home-modern .col-lg-9 .table thead th {
  background: #eaf1ff;
  color: var(--hp-navy);
  font-weight: 600;
  border: 0;
  padding: 0.6rem 0.75rem;
}
.home-modern .col-lg-9 .table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.home-modern .col-lg-9 .table thead th:last-child  { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.home-modern .col-lg-9 .table tbody td {
  border: 0;
  border-bottom: 1px solid var(--hp-line);
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
  background: transparent;
  box-shadow: none;
}
.home-modern .col-lg-9 .table tbody tr:hover td {
  background: #f7faff;
}
.home-modern .col-lg-9 .table tbody tr:last-child td {
  border-bottom: 0;
}
.home-modern .col-lg-9 .table .btn-success {
  border-radius: 999px;
  padding: 0.15rem 0.9rem;
  white-space: nowrap;      /* ไม่ให้คำว่า "เปิดดู" ตัดเป็น 2 บรรทัดบนจอแคบ */
}
/* หัวตารางเดิมกำหนดความกว้างเป็นเปอร์เซ็นต์ (5%/85%/10%) ทำให้คอลัมน์ท้ายแคบจนตัวหนังสือตัดบรรทัดบนมือถือ
   ให้เบราว์เซอร์คำนวณเอง: คอลัมน์ลำดับกว้างแค่พอดี คอลัมน์ท้าย (ปุ่ม) ไม่ตัดบรรทัด ที่เหลือเป็นชื่อเอกสาร */
.home-modern .col-lg-9 .table thead th[width] {
  width: auto;
}
.home-modern .col-lg-9 .table thead th:first-child {
  width: 3rem;
}
.home-modern .col-lg-9 .table thead th:last-child,
.home-modern .col-lg-9 .table tbody td:last-child {
  white-space: nowrap;
}
/* แถว "ยังไม่มีรายการ" แทนตารางที่ว่างเปล่า */
.home-modern .col-lg-9 .table td.empty-row {
  text-align: center;
  color: #8592a6;
  padding: 1.4rem 0.75rem;
}

/* ---------- แถบด้านข้าง: รูปผู้อำนวยการ + เมนูลิงก์ ---------- */
.home-modern .col-lg-3 > .text-center {
  background: #fff;
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  padding: 0.85rem;
  margin: 0.5rem 0.5rem 0.75rem;
}
.home-modern .col-lg-3 > .text-center img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}
.home-modern .director-card {
  border: 0 !important;         /* ของเดิมเป็นกรอบสีน้ำเงินบางๆ ใช้เงาแทน */
}
.home-modern .director-card p {
  color: var(--hp-navy);
}

.home-modern .list-group {
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow);
}
.home-modern .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--hp-line);
  padding: 0.7rem 1rem;
  color: #263650;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.home-modern .list-group-item:last-child {
  border-bottom: 0;
}
/* หัวข้อกลุ่มเมนู (แถบน้ำเงินเดิม) -> ไล่สีน้ำเงินเข้มไปน้ำเงินสด */
.home-modern .list-group-item.active {
  background: linear-gradient(90deg, var(--hp-navy), var(--hp-blue));
  border: 0;
  color: #fff;              /* กฎ .list-group-item ด้านบนตั้งสีตัวอักษรเป็นน้ำเงินเข้ม ต้องบังคับกลับเป็นขาวบนแถบไล่สี */
  font-weight: 600;
  letter-spacing: 0.2px;
}
.home-modern .list-group-item-action:not(.active):hover,
.home-modern .list-group-item-action:not(.active):focus {
  background: #eef4ff;
  color: var(--hp-blue);
  padding-left: 1.3rem;         /* ขยับข้อความเข้าไปเล็กน้อยตอนชี้ ให้รู้สึกว่ากดได้ */
}
.home-modern .list-group-item .fa-list-ul {
  color: var(--hp-gold);
}

/* ---------- ป๊อปอัพ ---------- */
.home-modern .modal-content {
  border: 0;
  border-radius: var(--hp-radius);
  overflow: hidden;
}
.home-modern .modal-header {
  border-bottom: 0;
  padding: 0.5rem 0.75rem 0;
}
.home-modern .modal-footer {
  border-top: 0;
}

/* ---------- ท้ายหน้า ---------- */
.home-modern .home-footer {
  margin-top: 2rem;
  background: var(--hp-navy);
  border-top: 4px solid var(--hp-gold);
  color: #dfe8f7;
  padding: 1.4rem 0;
  font-size: 0.95rem;
}
.home-modern .home-footer .footer-name {
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}
.home-modern .home-footer a {
  color: var(--hp-gold);
  text-decoration: none;
}
.home-modern .home-footer a:hover {
  text-decoration: underline;
}

/* ---------- จอเล็ก (มือถือ/แท็บเล็ต) ---------- */
@media (max-width: 991.98px) {
  .home-modern .col-lg-9 > .m-2 {
    padding: 0.85rem 0.9rem;
  }
  .home-modern .col-lg-9 h4 {
    font-size: 1.05rem;
  }
  .home-modern .col-lg-9 h4 i {
    width: 38px;
    height: 38px;
    font-size: 1rem !important;
  }
  .home-modern .navbar .nav-link::before {
    display: none;    /* จอเล็กเมนูซ้อนเป็นแนวตั้ง ไม่ต้องมีเส้นทองใต้ลิงก์ */
  }
  /* จอเล็ก: dropdown ไม่ลอย แต่แผ่ออกในแถบเมนู (Bootstrap ทำให้อยู่แล้ว) ตัดเงา/ระยะห่างที่ไม่จำเป็นออก */
  .home-modern .dropdown-menu {
    min-width: 0;         /* ไม่บังคับความกว้างขั้นต่ำ ให้พอดีจอแคบ (เช่น 320px) */
    box-shadow: none;
    animation: none;      /* มือถือไม่ต้องเฟด: เมนูแผ่ออกในแถบอยู่แล้ว */
    margin-top: 0;
    background: #f7f9fd;
    border-radius: 10px;
  }
  .home-modern .navbar .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}
@media (max-width: 575.98px) {
  .home-modern .col-lg-9 .table thead th,
  .home-modern .col-lg-9 .table tbody td {
    padding: 0.5rem 0.4rem;
    font-size: 0.92rem;
  }
}

/* ผู้ใช้ที่ตั้งค่าเครื่องให้ลดการเคลื่อนไหว: ปิดแอนิเมชันของการ์ดและเมนู */
@media (prefers-reduced-motion: reduce) {
  .home-modern * {
    transition: none !important;
  }
}