/* ------------- Variables ------------- */
:root {
  --purple-main: #512e8b;
  /* สีม่วงหลัก */
  --purple-secondary: #6f37ad;
  /* สีม่วงอีกเฉด */
  --purple-light: #7625d9;
  --purple-hover: #6419c7;
  --purple-outline: #7851a9;
  --white: #ffffff;
  --dark: #333333;
  --light-bg: #f8f9fa;
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  --color-bg: #f3f3f3;
  /* สีพื้นหลังโทนเทาอ่อน */
  --color-white: #ffffff;
  /* สีขาว */
  --color-black: #000000;
  /* สีดำ */
  --c-primary: #7C6CF7;
  /* ม่วงหลัก */
  --c-primary-100: #F1EEFF;
  /* พื้น bubble */
  --c-line: #E6E0FF;
  /* เส้นแนวตั้งเมนูย่อย */
  --c-text: #222;
  /* สีข้อความทั่วไป */
}

/* ------------- Base Styles ------------- */
body {
  font-family: 'Sarabun', sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

main {
  background-color: #eee;
}

/* ------------- Navbar (Header) ------------- */
.navbar {
  background-color: var(--purple-secondary) !important;
  height: 90px;
}

.navbar-brand {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-position: center center;
  object-fit: cover;
}

.navbar-toggler {
  border-color: #ffffff;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%287,7,7, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

/* ปุ่มเข้าสู่ระบบบน Navbar */
.navbar .btn {
  background-color: rgb(205, 183, 248);
  height: 100%;
  width: 175px;
  border-radius: 10px;
  opacity: 1;
  font-size: 14px;
  color: #52238b;
  font-weight: 700;
  padding: 10px;
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
  color: var(--bs-form-invalid-color) !important;
}

/* ข้อมูลการขอใบแทน: radio ให้แสดงเป็น checkbox */
.reissue-reason-group .checkbox-custom label::before,
.reissue-reason-group .checkbox-custom label::after {
  display: none;
}

.reissue-reason-group .checkbox-custom input[type="radio"] {
  opacity: 1;
  position: static;
  margin: 0 6px 0 0;
  width: 18px;
  height: 18px;
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  cursor: pointer;
}

.reissue-reason-group .checkbox-custom input[type="radio"]:checked {
  background: #6a1b9a;
  border-color: #6a1b9a;
}

.reissue-reason-group .checkbox-custom input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin: 1px 0 0 6px;
}

.me-2 {
  margin-right: 1rem !important;
}

/* ------------- Sidebar ------------- */
.sidebar-container {
  background-color: #f3f3f3;
  min-height: 100vh;
  /* padding-left: 7px; */
  font-size: 12px;
  color: #8757FF;
  min-width: 200px;
  /* max-width: 200px; */
  /* margin-left: 10px; */
  /* padding-left: 20px !important;
  padding-right: 20px !important; */
}

/* สไตล์เมนูใน sidebar */
.sidebar-container .nav-link.text-dark {
  /* color: #8757FF !important; */
  font-size: 12px;
  width: 100%;
  /* height: 50px; */
  border-radius: 20px;
  vertical-align: middle;
  align-content: center;
}

.sidebar-container .nav-link.text-dark2 {
  /* background-color: var(--purple-main); */
  color: #8757FF !important;
  border: none;
  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 12px !important;
  height: 105px;
  width: 90px;
  align-content: center;
  text-align: center;
  padding: 5px;
  display: block;
}

.sidebar-container .nav-link:hover {
  background-color: #f0e5fa !important;
  /* ไฮไลต์เมนูเมื่อ hover */
}

a button {
  background-color: rgb(245, 245, 245) !important;
  border-radius: 10px !important;
  opacity: 1;
  align-content: center;
  align-items: center;
  display: inline-grid !important;
  flex-wrap: nowrap;
  height: 30px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 30px;
  margin-right: 10px;
}

.nav .active {
  background-color: rgb(228, 223, 240);
  border-radius: 20px;
  width: 100%;
  /* height: 50px; */
  color: #8757FF;
}

/* ปุ่มใน sidebar */
.btn-purple {
  background-color: var(--purple-light);
  color: var(--white);
  border: none;
  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 12px;
  height: 50px;
}

.btn-black {
  background-color: #000000;
  color: var(--white);
  border: none;
  border-radius: 10px;
  /* font-size: 12px; */
  height: 35px;
}

.btn-black:hover {
  background-color: #000000;
  color: var(--white);
  border: none;
  border-radius: 10px;
  /* font-size: 12px; */
  height: 35px;
}

.btn-success1 {
  background-color: #28a745;
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  height: 35px;
}

.btn-purple:hover {
  background-color: var(--purple-hover);
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

.btn-purple1 {
  background-color: var(--purple-main);
  color: var(--white);
  border: none;
  border-radius: 10px;
  /* font-size: 12px; */
  height: 35px;
}

.btn-purple1:hover {
  background-color: #432579;
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

.btn-purple2 {
  background-color: #875cb8;
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  height: 35px;
}

.btn-purple2:hover {
  background-color: #875cb8;
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

.btn-purple3 {
  background-color: #6d6dc7;
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  height: 35px;
}

.btn-purple3:hover {
  background-color: #6d6dc7;
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

.btn-purple4 {
  background-color: #845ffd;
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  height: 35px;
}

.btn-purple4:hover {
  background-color: #845ffd;
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

.btn-purple5 {
  background-color: var(--purple-main);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  height: 35px;
}

.btn-purple5:hover {
  background-color: #432579;
  color: var(--white);
  /* โทนม่วงเข้มขึ้นเมื่อ hover */
}

/* ------------- คอนเทนต์หลัก ------------- */
.main {
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
}

/* Pending list page */
.pending-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
  border: 1px solid #efe7ff;
  box-shadow: 0 8px 24px rgba(85, 37, 134, 0.08);
}

.pending-page .header-bar {
  /* background: linear-gradient(90deg, #552586 0%, #7a58c5 100%); */
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.2);
  letter-spacing: 0.2px;
}

.pending-page .search-form {
  background: #ffffff;
  border: 1px solid #efe7ff;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(85, 37, 134, 0.06);
}

.pending-page .search-form .form-select,
.pending-page .search-form .form-control {
  border-radius: 12px;
  border-color: #e2d7f4;
}

.pending-page .stats-section {
  background: #ffffff;
  border: 1px solid #ece4ff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(85, 37, 134, 0.08);
}

.pending-page .table-responsive {
  border: 1px solid #eee3ff;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(85, 37, 134, 0.06);
  background: #fff;
}

.pending-page .table-personal thead th {
  background-color: #f1e9ff;
  color: #4a226e;
  border-bottom: 1px solid #e6dbff;
}

.pending-page .table-personal tbody tr {
  border-bottom: 1px solid #f0e9fb;
}

.pending-page .table-personal tbody td {
  padding: 0.9rem;
}

.pending-page .detail-section {
  background: #ffffff;
  border: 1px solid #ede7f7;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 14px rgba(85, 37, 134, 0.06);
}

.pending-page .action-row {
  background-color: #f7f5fb;
  border: 1px dashed #e4d8f6;
  border-radius: 10px;
  padding: 8px 10px;
  flex-wrap: wrap;
}

.pending-page .picsquare {
  width: 90px;
  height: 100px;
  border-color: #b79cf2;
  background: #faf7ff;
}

@media (max-width: 768px) {
  .pending-page .detail-section {
    padding: 10px 12px;
  }

  .pending-page .table-personal tbody td {
    padding: 0.75rem;
  }

  .pending-page .picsquare {
    width: 72px;
    height: 72px;
  }
}

/* Business pending list page */
.business-pending-page {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid #e2ebf8;
  box-shadow: 0 8px 24px rgba(57, 90, 140, 0.1);
}

.business-pending-page .search-form {
  background: #ffffff;
  border: 1px solid #e2ebf8;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(57, 90, 140, 0.08);
}

.business-pending-page .stats-section {
  background: #ffffff;
  border: 1px solid #e2ebf8;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(57, 90, 140, 0.08);
}

.business-pending-page .table-responsive {
  border: 1px solid #e2ebf8;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(57, 90, 140, 0.06);
  background: #ffffff;
}

/* .business-pending-page .table-business thead th {
  background-color: #e6effc;
  color: #2f4b73;
  border-bottom: 1px solid #d4e1f6;
} */

.business-pending-page .table-business tbody tr {
  border-bottom: 1px solid #edf2fb;
}

.business-pending-page .table-business tbody td {
  padding: 0.9rem;
}

.business-pending-page .detail-section {
  background: #ffffff;
  border: 1px solid #e4ebf5;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 14px rgba(57, 90, 140, 0.06);
}

.business-pending-page .action-row {
  background-color: #f3f6fb;
  border: 1px dashed #dbe6f6;
  border-radius: 10px;
  padding: 8px 10px;
  flex-wrap: wrap;
}

.business-pending-page .check-row {
  background-color: #fff3f4;
  border: 1px dashed #f0d3da;
  border-radius: 10px;
  padding: 8px 10px;
}

.business-pending-page .picsquare {
  width: 90px;
  height: 90px;
  border-color: #9bb8e8;
  background: #f7faff;
}

@media (max-width: 768px) {
  .business-pending-page .detail-section {
    padding: 10px 12px;
  }

  .business-pending-page .table-business tbody td {
    padding: 0.75rem;
  }

  .business-pending-page .picsquare {
    width: 72px;
    height: 72px;
  }
}

/* Reports page */
.report-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%);
  border: 1px solid #ece9fb;
  box-shadow: 0 8px 22px rgba(85, 37, 134, 0.08);
}

.report-page .header-bar {
  background: linear-gradient(90deg, #552586 0%, #6a47a6 100%);
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.2);
}

.report-page #report-form {
  background: #ffffff;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(85, 37, 134, 0.08);
  margin-bottom: 16px;
}

.report-page .table-area {
  background: #ffffff;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(85, 37, 134, 0.08);
  padding: 10px;
}

.report-page .bg-light1 {
  background-color: #efe9ff !important;
  color: #4a226e !important;
}

.report-page .table thead th {
  vertical-align: middle;
}

.report-page .table tbody tr {
  border-bottom: 1px solid #f0ebfb;
}

.report-page .table tbody tr:nth-child(even) {
  background-color: #fbf9ff;
}

.report-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

.report-page .showing-entries {
  color: #6f6b7a;
}

@media (max-width: 768px) {
  .report-page #report-form {
    padding: 10px 12px;
  }

  .report-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Doctor sign page */
.doctor-sign-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  border: 1px solid #e4ebf6;
  box-shadow: 0 8px 22px rgba(53, 92, 140, 0.1);
}

.doctor-sign-page .header-bar {
  background: linear-gradient(90deg, #355c8c 0%, #4b78b6 100%);
  box-shadow: 0 6px 16px rgba(53, 92, 140, 0.2);
}

.doctor-sign-page .search-form,
.doctor-sign-page .stats-section {
  background: #ffffff;
  border: 1px solid #e4ebf6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(53, 92, 140, 0.08);
  padding: 12px 14px;
}

.doctor-sign-page .stats-section {
  padding: 16px;
}

.doctor-sign-page .table-responsive {
  border: 1px solid #e4ebf6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(53, 92, 140, 0.08);
  background: #ffffff;
}

.doctor-sign-page .table thead th {
  background-color: #e8f0fb;
  color: #355c8c;
  border-bottom: 1px solid #d6e3f7;
  vertical-align: middle;
}

.doctor-sign-page .table tbody tr {
  border-bottom: 1px solid #edf2fb;
}

.doctor-sign-page .table tbody tr:nth-child(even) {
  background-color: #f8fbff;
}

.doctor-sign-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .doctor-sign-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Profile page */
.profile-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
  border: 1px solid #ebe4f8;
  box-shadow: 0 10px 24px rgba(85, 37, 134, 0.08);
  padding: 16px 18px 24px;
}

.profile-page .header-bar {
  background: linear-gradient(90deg, #552586 0%, #6a47a6 100%);
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.2);
}

.profile-page .profile-card {
  background: #ffffff;
  border: 1px solid #ebe4f8;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.08);
}

.profile-page .secondary {
  background: #f2edff;
  color: #4a226e;
  border-radius: 12px;
}

.profile-page .form-label,
.profile-page .col-form-label {
  color: #2f2b3f;
  font-weight: 600;
}

.profile-page .form-control,
.profile-page .form-select {
  border-radius: 10px;
  border-color: #e1d8f4;
  box-shadow: none;
}

.profile-page .form-control:focus,
.profile-page .form-select:focus {
  border-color: #8f75d1;
  box-shadow: 0 0 0 0.2rem rgba(85, 37, 134, 0.12);
}

.profile-page .table-responsive {
  border: 1px solid #ece4fb;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.08);
  background: #ffffff;
}

@media (max-width: 768px) {
  .profile-page {
    padding: 12px 12px 20px;
  }

  .profile-page .profile-card {
    padding: 12px;
  }
}

/* Payment pending page */
.payment-pending-page {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border: 1px solid #e0ebf8;
  box-shadow: 0 8px 24px rgba(47, 75, 115, 0.1);
}

.payment-pending-page .header-bar {
  background: linear-gradient(90deg, #2f4b73 0%, #4b6fa3 100%);
  box-shadow: 0 6px 16px rgba(47, 75, 115, 0.2);
}

.payment-pending-page .search-form {
  background: #ffffff;
  border: 1px solid #e0ebf8;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(47, 75, 115, 0.08);
}

.payment-pending-page .stats-section {
  background: #ffffff;
  border: 1px solid #e0ebf8;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(47, 75, 115, 0.08);
}

.payment-pending-page .table-responsive {
  border: 1px solid #e0ebf8;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(47, 75, 115, 0.06);
  background: #ffffff;
}

.payment-pending-page .table thead th {
  background-color: #e6effc;
  color: #2f4b73;
  border-bottom: 1px solid #d4e1f6;
  vertical-align: middle;
}

.payment-pending-page .table tbody tr {
  border-bottom: 1px solid #edf2fb;
}

.payment-pending-page .table tbody tr:nth-child(even) {
  background-color: #f9fbff;
}

.payment-pending-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .payment-pending-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Payment pending (KTB) page */
.payment-ktb-page {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
  border: 1px solid #dee8fb;
  box-shadow: 0 8px 24px rgba(47, 75, 115, 0.1);
}

.payment-ktb-page .header-bar {
  background: linear-gradient(90deg, #1f4e8c 0%, #3a6fb4 100%);
  box-shadow: 0 6px 16px rgba(31, 78, 140, 0.2);
}

.payment-ktb-page .search-form {
  background: #ffffff;
  border: 1px solid #dee8fb;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(47, 75, 115, 0.08);
  padding: 12px 14px;
}

.payment-ktb-page .stats-section {
  padding: 16px;
}

.payment-ktb-page .table thead th {
  background-color: #e6f0ff;
  color: #1f4e8c;
  border-bottom: 1px solid #d2e0fa;
  vertical-align: middle;
}

.payment-ktb-page .table tbody tr {
  border-bottom: 1px solid #edf2fb;
}

.payment-ktb-page .table tbody tr:nth-child(even) {
  background-color: #f8fbff;
}

.payment-ktb-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .payment-ktb-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Payment yearly page */
.payment-yearly-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f3ff 100%);
  border: 1px solid #e8defc;
  box-shadow: 0 8px 24px rgba(95, 72, 166, 0.12);
}

.payment-yearly-page .header-bar {
  background: linear-gradient(90deg, #5f48a6 0%, #7c5fd1 100%);
  box-shadow: 0 6px 16px rgba(95, 72, 166, 0.2);
}

.payment-yearly-page .search-form,
.payment-yearly-page .stats-section {
  background: #ffffff;
  border: 1px solid #e8defc;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(95, 72, 166, 0.08);
  padding: 12px 14px;
}

.payment-yearly-page .stats-section {
  padding: 16px;
}

.payment-yearly-page .table thead th {
  background-color: #efe9ff;
  color: #5f48a6;
  border-bottom: 1px solid #dfd3fa;
  vertical-align: middle;
}

.payment-yearly-page .table tbody tr {
  border-bottom: 1px solid #f0ebfb;
}

.payment-yearly-page .table tbody tr:nth-child(even) {
  background-color: #fbf9ff;
}

.payment-yearly-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .payment-yearly-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Payment complete page */
.payment-complete-page {
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
  border: 1px solid #dcefe3;
  box-shadow: 0 8px 24px rgba(46, 120, 85, 0.12);
}

.payment-complete-page .header-bar {
  background: linear-gradient(90deg, #51238b 0%, #51238b 100%);
  box-shadow: 0 6px 16px rgba(46, 120, 85, 0.2);
}

.payment-complete-page .search-form,
.payment-complete-page .stats-section {
  background: #ffffff;
  border: 1px solid #dcefe3;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(46, 120, 85, 0.08);
  padding: 12px 14px;
}

.payment-complete-page .stats-section {
  padding: 16px;
}

.payment-complete-page .table thead th {
  background-color: #f1e8f6;
  color: #51238b;
  border-bottom: 1px solid #f1e8f6;
  vertical-align: middle;
}

.payment-complete-page .table tbody tr {
  border-bottom: 1px solid #f1e8f6;
}

.payment-complete-page .table tbody tr:nth-child(even) {
  background-color: #fcf9fc;
}

.payment-complete-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .payment-complete-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Approved business page */
.approved-business-page {
  background: linear-gradient(180deg, #ffffff 0%, #f3fbf6 100%);
  border: 1px solid #d6efdf;
  box-shadow: 0 8px 24px rgba(34, 135, 84, 0.12);
}

.approved-business-page .header-bar {
  background: linear-gradient(90deg, #1f8a4f 0%, #37b06f 100%);
  box-shadow: 0 6px 16px rgba(31, 138, 79, 0.2);
}

.approved-business-page .search-form {
  background: #ffffff;
  border: 1px solid #d6efdf;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(31, 138, 79, 0.08);
  padding: 12px 14px;
}

.approved-business-page .stats-section {
  padding: 16px;
}

.approved-business-page .table thead th {
  background-color: #e5f6ec;
  /* color: #1f8a4f; */
  border-bottom: 1px solid #cfead9;
  vertical-align: middle;
}

.approved-business-page .table tbody tr {
  border-bottom: 1px solid #eef7f1;
}

.approved-business-page .table tbody tr:nth-child(even) {
  background-color: #f8fcfa;
}

.approved-business-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .approved-business-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Rejected business page */
.rejected-business-page {
  background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
  border: 1px solid #f2d7d7;
  box-shadow: 0 8px 24px rgba(190, 60, 60, 0.12);
}

.rejected-business-page .header-bar {
  background: linear-gradient(90deg, #c0392b 0%, #e06666 100%);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.2);
}

.rejected-business-page .search-form,
.rejected-business-page .stats-section {
  background: #ffffff;
  border: 1px solid #f2d7d7;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(192, 57, 43, 0.08);
  padding: 12px 14px;
}

.rejected-business-page .stats-section {
  padding: 16px;
}

.rejected-business-page .table thead th {
  background-color: #fdeaea;
  color: #c0392b;
  border-bottom: 1px solid #f3cfcf;
  vertical-align: middle;
}

.rejected-business-page .table tbody tr {
  border-bottom: 1px solid #f7e5e5;
}

.rejected-business-page .table tbody tr:nth-child(even) {
  background-color: #fff7f7;
}

.rejected-business-page .table tbody td {
  padding: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .rejected-business-page .table tbody td {
    padding: 0.7rem;
  }
}

/* Certificate list page (match pending list) */
.certificate-page .certificate-actions {
  flex-wrap: wrap;
  gap: 8px;
}

/* Certificate list page color reset (original palette) */
.certificate-page.pending-page {
  background: #ffffff;
  border: 1px solid #efefef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.certificate-page.pending-page .search-form,
.certificate-page.pending-page .stats-section,
.certificate-page.pending-page .table-responsive {
  border-color: #e5e5ef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.certificate-page.pending-page .table-personal thead th {
  background-color: #cdb7f8;
  color: #552586;
  border-bottom: 1px solid #e6dbff;
}

.certificate-page.pending-page .detail-section {
  border-color: #e5e5ef;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.certificate-page.pending-page .action-row {
  background-color: #f8f9fa;
  border: 1px dashed #e5e5ef;
}

.certificate-page.pending-page .picsquare {
  border-color: #ab8ffa;
  background: #ffffff;
}


/* ------------- แถบหัวข้อใหญ่ (Bar ม่วง) ------------- */
.header-bar {
  background-color: var(--purple-main);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  height: 45px;
}

/* ------------- ส่วนค้นหา ------------- */
.search-label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.search-select,
.search-input {
  border-radius: 20px !important;
}

.search-button {
  background-color: var(--purple-main);
  color: var(--white);
  border-radius: 20px;
}

.text-right {
  text-align: right;
}

/* ------------- การ์ดตัวเลขสถิติ ------------- */
.stats-card {
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  text-align: left;
  /* padding: 1.5rem; */
  /* min-width: 330px; */
  height: 130px;
  padding-top: 20px;
  border: 1px solid #d6c1f19e;
}

.stats-card .counter {
  color: var(--color-black);
  margin-bottom: 0.25rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.stats-card .fw-normal {
  font-size: 12px;
  /* margin-top: 0.5rem; */
}

.stats-card .text-secondary {
  align-content: center;
  align-items: center;
  background-color: #8573bfb5;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
  color: #fff !important;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: 5px;
}

.stats-card1 {
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  /* text-align: left; */
  /* padding: 1.5rem; */
  /* min-width: 330px; */
  height: 168px;
  padding-top: 10px;
}

.stats-card1 .text-secondary1 {
  align-content: center;
  align-items: center;
  background-color: #855fff;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
  color: #fff !important;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-top: 5px;
}

.stats-card-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

/* ------------- การ์ด "คู่มือ" ------------- */
.manual-card {
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 2px #00000040, 0 2px 4px #00000040;
  text-align: center;
  padding: 1rem;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.manual-card .texthead {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.manual-card .textlabel {
  color: var(--color-black);
  font-size: 12px;
}

.manual-card-icon {
  width: 50px;
  height: 50px;
  gap: 10;
  margin-bottom: 1rem;
  /* border-radius: 50%; */
  object-fit: cover;
}

/* ------------- ภาพสปาแถวเล็ก ------------- */
.spa-thumb {
  min-width: 120px;
  height: 125px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 5px;
}

/* ------------- ภาพสปาใหญ่ (ขวาล่าง) ------------- */
.spa-big {
  min-width: 400px;
  /* height: 450px; */
  /* object-fit: cover; */
  border-radius: 20px;
  margin-top: 10px;
  display: block;
  object-fit: cover;
}

.spa-big1 {
  width: 100%;
  /* height: 450px; */
  object-fit: cover;
  border-radius: 15px;
}

/* ------------- Responsive ------------- */
@media (max-width: 768px) {

  /* ยืด sidebar ได้หรือซ่อนตามต้องการ */
  .sidebar-container {
    min-height: auto;
  }

  .spa-big {
    width: 100%;
    height: auto;
  }

  .box-shadow-login {
    width: 100% !important;
  }

  .spa-img-frame {
    aspect-ratio: 16 / 9;
    /* หรือจะคงเดิมก็ได้ */
  }
}

.spa-img-frame {
  width: 100%;
  /*aspect-ratio: 4 / 3;      /* ปรับสัดส่วนกรอบได้ เช่น 16/9, 1/1 */
  overflow: hidden;
  border-radius: 10px;
  place-items: anchor-center;
}

.form-select {
  border: var(--bs-border-width) solid #252525 !important;
  border-radius: 10px;
  /* height: 35px; */
}

.form-control {
  border: var(--bs-border-width) solid #252525 !important;
  border-radius: 10px;
  /* height: 35px; */
}

.box-shadow-login {
  align-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 2px #00000040;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  /* height: 600px; */
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  /* position: relative; */
  width: 70%;
  top: 10%;
  will-change: var(--framer-will-change-override, transform);
}

.page-content {
  padding: 16px 18px 24px;
  background-color: #fff;
  border-radius: 20px;
  min-height: 800px;
}

.headlogin {
  align-content: center;
  align-items: center;
  background-color: #51238b;
  color: white;
  font-size: 20px;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  height: 45px;
  justify-content: center;
  overflow: hidden;
  padding: 0 40px 0 10px;
  position: relative;
  width: 100%;
  will-change: var(--framer-will-change-override, transform);
}

.form-login {
  padding: 10px;
  height: 400px;
  align-content: center;
}

.textlogin {
  margin-top: 10px;
  margin-bottom: 10px;
  color: black;
  font-size: 16px;
}

.login {
  border-radius: 10px;
  width: 60%;
}

/* ✅ Sidebar */
.sidebar-container {
  width: 250px;
  background-color: #f8f9fa;
  position: absolute;
  height: 100%;
  overflow-y: auto;
  transition: all 0.3s;
  /* padding-top: 10px; */
  border-right: 1px solid #ddd;
}

/* ✅ ปรับเนื้อหา (Content) ให้อยู่ด้านขวา */
.main-content {
  margin-left: 250px;
  /* ดันขวาให้เท่ากับขนาด Sidebar */
  width: calc(100% - 250px);
  /* ทำให้เนื้อหาเต็มที่เหลือ */
  padding: 20px;
}

.nav {
  list-style: none;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
}

/* ✅ ซ่อน dropdown โดยค่าเริ่มต้น */
.dropdown-container {
  display: none;
  /* padding-left: 20px; */
}

/* .dropdown-container {
  max-height: 60vh;
  overflow: auto;
} */

/* ✅ ปุ่มเปิดเมนู (เฉพาะมือถือ) */
.menu-toggle {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #8573bfb5;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
}

/* ✅ Responsive - ซ่อน sidebar เมื่อจอเล็กกว่า 768px */
@media (max-width: 768px) {
  .sidebar-container {
    display: none;
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 1001;
    top: 13.5%;
  }

  .dropdown-container {
    display: block !important;
    padding-left: 20px;
  }

  .main-content {
    margin-left: 0;
    /* ให้เนื้อหากลับมาเต็มจอ */
    width: 100%;
    margin-top: 43px;
  }

  .menu-toggle {
    left: 0;
    top: 9%;
    display: block;
  }
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }

  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.dropdown {
  right: 100px;
  float: right;
  overflow: hidden;
}

.iconprofile {
  font-size: 30px;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  /* ซ่อนเมนูตอนเริ่มต้น */
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: -15px;
  border-radius: 10px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 10px;
  border-bottom-width: 1px;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  /* เพิ่มช่องว่างระหว่างไอคอนและชื่อ */
}

.header-login-nav {
  background-color: var(--purple-secondary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.header-login-nav .container-fluid {
  gap: 16px;
  padding-left: 24px;
  padding-right: 24px;
}

.header-login-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
}

.header-login-nav .dropdown {
  margin-left: auto;
  position: relative;
  right: auto;
  float: none;
  overflow: visible;
}

.header-login-nav .iconprofile {
  font-size: 22px;
  line-height: 1;
}

.header-login-nav .dropbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-login-nav .dropbtn:hover,
.header-login-nav .dropbtn:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.header-login-nav #nameprofile {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-login-caret {
  font-size: 12px;
  opacity: 0.9;
}

.header-login-nav .dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background-color: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  border-radius: 12px;
  padding: 6px;
}

.header-login-nav .dropdown-content a {
  color: #2a2a2a;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 8px;
}

.header-login-nav .dropdown-content a:hover {
  background-color: #f0f0f0;
}

.header-login-nav .dropdown:hover .dropdown-content,
.header-login-nav .dropdown:focus-within .dropdown-content {
  display: block;
}

.header-login-divider {
  margin: 4px 0;
  border-color: #e5e5e5;
}

@media (max-width: 576px) {
  .header-login-nav .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header-login-logo {
    height: 54px;
  }

  .header-login-nav #nameprofile {
    max-width: 120px;
  }
}

.line-header {
  place-content: center;
  align-items: center;
  background-color: rgb(205, 183, 248);
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
  gap: 10px;
  height: min-content;
  min-height: 25px;
  overflow: hidden;
  padding: 0px;
  width: 100%;
}

.form-container {
  /* margin: 20px auto; */
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Provider register page */
.provider-register-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
  border: 1px solid #e9e2f7;
  box-shadow: 0 10px 24px rgba(85, 37, 134, 0.08);
  padding: 18px 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.provider-register-page .section-title {
  background: linear-gradient(90deg, #512e8b 0%, #6a47a6 100%);
  border-radius: 12px;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.18);
}

.provider-register-page .row {
  row-gap: 10px;
}

.provider-register-page .form-label,
.provider-register-page .col-form-label {
  color: #2f2b3f;
  font-weight: 600;
}

.provider-register-page .form-control,
.provider-register-page .form-select {
  border-radius: 10px;
  border-color: #e1d8f4;
  box-shadow: none;
}

.provider-register-page .form-control:focus,
.provider-register-page .form-select:focus {
  border-color: #8f75d1;
  box-shadow: 0 0 0 0.2rem rgba(85, 37, 134, 0.12);
}

.provider-register-page .bg-light-purple {
  background: #f7f4ff;
  border: 1px solid #e5def7;
}

.provider-register-page .table-responsive {
  border: 1px solid #ece4fb;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(85, 37, 134, 0.08);
  background: #ffffff;
  padding: 6px;
}

.provider-register-page .table thead:not(.table-header-purple) th {
  background-color: #efe9ff;
  color: #4a226e;
  border-bottom: 1px solid #e2d6f7;
}

.provider-register-page .table tbody tr:nth-child(even) {
  background-color: #fbf9ff;
}

.provider-register-page .form-check {
  align-items: center;
}

@media (max-width: 768px) {
  .provider-register-page {
    padding: 14px 14px 20px;
  }

  .provider-register-page .section-title {
    font-size: 1rem;
  }
}

.section-title {
  background-color: #512e8b;
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.text-label {
  background-color: rgb(238, 238, 238);
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.table thead th {
  background-color: #512e8b;
  color: #fff;
}

.btn-save {
  background-color: #28a745;
  /* สีเขียวตามตัวอย่าง */
  color: #fff;
}

.bg-purple {
  background-color: #552586;
  /* border-radius: 8px; */
  color: white;
}

.bg-purple1 {
  background-color: #8758ff;
  /* border-radius: 8px; */
  color: white;
}

.bg-light-purple {
  background-color: #f0eef9;
  border-radius: 10px;
}

.section-title {
  font-weight: bold;
  font-size: 1.25rem;
}

.form-check-label.text-purple {
  color: #552586;
}

.form-check-label.text-white {
  color: #fff;
  font-size: 14px;
}

.form-check-label.text-green {
  color: #3b835a;
}

.table-header-purple {
  background-color: #7851a9 !important;
  color: white;
}

.modal-header-purple {
  background-color: #7851a9;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  justify-content: center;
}

.modal-header {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

.modal-sec {
  border-radius: 25px;
}

.btn-outline {
  color: var(--purple-outline)
}

.btn-outline:hover {
  color: var(--purple-outline);
  background-color: #f0eef9;
  /* border-color: #6c757d; */
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.card-title {
  font-size: 18px;
  color: #333;
}

.card-text {
  font-size: 14px;
  color: #555;
}

.btn-filter.active {
  background-color: #cbabd5;
  color: #fff;
}

.btn-filter1.active {
  background-color: #552586;
  color: #fff;
}

.btn-filter2.active {
  background-color: #67c5cd;
  color: #fff;
}

.btn-filter3.active {
  background-color: #03969e;
  color: #fff;
}

.btn-filter4.active {
  background-color: #75b82e;
  color: #fff;
}

.btn-filter5.active {
  background-color: #045d5b;
  color: #fff;
}

.btn-filter6.active {
  background-color: #0099ff;
  color: #fff;
}

.btn-filter7.active {
  background-color: #ff3030;
  color: #fff;
}

.btn-filter:hover {
  background-color: #552586;
  color: #fff;
}

.btn-filter1:hover {
  background-color: #552586;
  color: #fff;
}

.btn-filter2:hover {
  background-color: #67c5cd;
  color: #fff;
}

.btn-filter3:hover {
  background-color: #03969e;
  color: #fff;
}

.btn-filter4:hover {
  background-color: #75b82e;
  color: #fff;
}

.btn-filter5:hover {
  background-color: #045d5b;
  color: #fff;
}

.btn-filter6:hover {
  background-color: #0099ff;
  color: #fff;
}

.btn-filter7:hover {
  background-color: #ff3030;
  color: #fff;
}

.btn-filter1 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter2 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter3 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter4 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter5 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter6 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter7 {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-filter {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-hss-biz {
  background-color: #919191;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  border: none;
  transition: all 0.3s ease;
}

.btn-hss-biz.active {
  background-color: #cbabd5;
  color: #fff;
}

.btn-hss-biz:hover {
  background-color: #552586;
  color: #fff;
}

.table-personal thead th {
  background-color: #cdb7f8;
  color: #552586;
}

#perPage {
  font-size: 12px;
  border-radius: 10px;
  /* height: 25px; */
}

.text-filter {
  color: #552586;
  font-weight: 700;

}

/* ------------- Table Styles ------------- */
.table-personal {
  width: 100%;
  /* margin-bottom: 1rem; */
  margin-bottom: 0px !important;
}

.table-personal thead th {
  background-color: #cdb7f8;
  color: #552586;
  padding: 0.75rem;
  vertical-align: middle;
}

.table-personal tbody td {
  padding: 1rem;
  vertical-align: top;
}

/* Registration Status Styles */
.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.status-badge.pending {
  background-color: #ffeeba;
  color: #856404;
}

.status-badge.received {
  background-color: #d4edda;
  color: #155724;
}

/* Registration Form Layout */
.registration-form-section {
  margin-bottom: 2rem;
}

.registration-form-section .form-group {
  margin-bottom: 1rem;
}

/* Profile Image Container */
.profile-image-container {
  text-align: center;
  margin-bottom: 1rem;
}

.profile-image-container img {
  max-width: 150px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.action-buttons .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Status Radio Group */
.status-radio-group {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}

.status-radio-group .form-check {
  margin: 0;
}

/* Showing Records Text */
.showing-records {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Search Form Styles */
.search-form {
  margin-bottom: 1.5rem;
}

.search-form .form-group {
  margin-bottom: 1rem;
}

.search-form label {
  font-weight: 600;
  margin-right: 0.5rem;
}

.search-form select,
.search-form input {
  border-radius: 10px;
  border: 1px solid #252525;
}

/* Pagination Styles */
.pagination {
  margin-top: 1rem;
}

.pagination .page-link {
  color: #552586;
  border-color: #cdb7f8;
}

.pagination .page-item.active .page-link {
  background-color: #552586;
  border-color: #552586;
  color: white;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}

/* Profile and Image Styles */
.profile-section {
  width: 150px;
}

.profile-image-container {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.profile-image {
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  height: var(--framer-aspect-ratio-supported, 90px);
  /* opacity: 0.56; */
  /* overflow: visible; */
  border-radius: 10px;
  position: relative;
  width: 80px;
}

/* Button Styles */
.btn-purple {
  background-color: #7625d9;
  color: #fff;
}

.btn-purple:hover {
  background-color: #6419c7;
  color: #fff;
}

.btn-outline-purple {
  color: #6f42c1;
  border-color: #6f42c1;
}

.btn-outline-purple:hover {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

/* Status Styles */
.status-badge {
  padding: 0.25rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-checking {
  color: #7625d9;
}

.status-pending {
  color: #28a745;
}

/* Layout and Section Styles */
.detail-section {
  /* padding: 1rem; */
  background-color: #fff;
  border-radius: 4px;
}

.info-section {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.action-row .form-check-inline {
  margin-right: 2rem;
}

.action-row .btn {
  white-space: nowrap;
}

.action-buttons-vertical {
  width: 100%;
}

.action-buttons-vertical .btn {
  text-align: left;
  padding: 0.5rem 1rem;
}

/* Text Colors */
.text-purple {
  color: #7625d9;
}

/* Button Styles */
.btn-purple {
  background-color: #7625d9;
  color: #fff;
  border: none;
}

.btn-purple:hover {
  background-color: #6419c7;
  color: #fff;
}

.btn-purple1 {
  background-color: #512e8b;
  color: #fff;
  border: none;
}

.btn-purple1:hover {
  background-color: #432579;
  color: #fff;
}

.btn-purple2 {
  background-color: #845ffd;
  color: #fff;
  border: none;
}

.btn-purple2:hover {
  background-color: #845ffd;
  color: #fff;
}

.btn-outline {
  color: #7851a9;
  border: 1px solid #7851a9;
  background-color: transparent;
}

.btn-outline:hover {
  background-color: #f0eef9;
  color: #7851a9;
  border-color: #7851a9;
}

/* Status Colors */
.status-text {
  padding: 4px 12px;
  border-radius: 4px;
  /* font-size: 14px; */
  display: inline-block;
}

.status-new {
  color: red;
}

.status-received {
  color: #17a2b8;
}

/* Radio Button Colors */
.form-check-input:checked {
  background-color: #7625d9;
  border-color: #7625d9;
}

.form-check-input:focus {
  border-color: #7625d9;
  box-shadow: 0 0 0 0.25rem rgba(118, 37, 217, 0.25);
}

.form-check-input {
  border: 1px solid #000000 !important;
}

/* Action Buttons */
.action-buttons .btn {
  padding: 6px 16px;
  font-size: 14px;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* Text Colors */
.text-purple {
  color: #7625d9;
}

.text-danger {
  color: #dc3545;
}

/* Badge Colors */
.badge-purple {
  background-color: #7625d9;
  color: #fff;
}

.badge-outline-purple {
  color: #7625d9;
  border: 1px solid #7625d9;
  background-color: transparent;
}

/* Form Elements */
.form-check-label {
  color: #6f37ad;
  font-weight: 700;
}

.form-check-inline {
  margin-right: 1.5rem;
}

.service-inline-group {
  gap: 0.5rem 1rem;
}

.service-inline-group .form-check {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
}

.service-inline-group .form-check-input {
  margin-top: 0;
}

.service-inline-input {
  width: 300px !important;
  margin-bottom: 0 !important;
}

/* Action Row */
.action-row {
  background-color: #f8f9fa;
  /* padding: 1rem; */
  padding-left: 1rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.check-row {
  background-color: #f7dfdf;
  /* padding: 1rem; */
  padding-left: 1rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Button Sizes */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 10px;
}

/* Hover Effects */
.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(118, 37, 217, 0.25);
}

.picsquare {
  border-bottom-width: 2px;
  border-color: #ab8ffa;
  border-left-width: 2px;
  border-right-width: 2px;
  border-style: dashed;
  border-top-width: 2px;
  place-content: center;
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  flex-flow: row;
  gap: 10px;
  height: 100px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  width: 100px;
  will-change: var(--framer-will-change-override, transform);
}

.bg-light {
  background-color: #e9ecef !important;
}

.bg-light1 {
  background-color: #cdb7f8 !important;
  color: #6e37ae !important;
}

.bg-secodary {
  background-color: #000000;
  color: white;
}

.secondary {
  background-color: #ebe9f2;
  border-radius: 10px;
  padding-left: 10px;
}

.tableAppove thead th {
  background-color: #cdb7f8 !important;
  color: #6e37ae;
}

.tableReject thead th {
  background-color: #f7b7b7 !important;
  color: red;
}

.textSubmit-container {
  position: relative;
  height: 100%;
}

.textSubmit {
  position: absolute;
  bottom: -10px;
  right: 0;
  padding: 5px;
  color: #888888;
}

.btn-edit1 {
  position: absolute;
  top: 25px;
  right: 40px;
  z-index: 10;
}

.btn-delete {
  position: absolute;
  top: 25px;
  right: 5px;
  z-index: 10;
}

.btn-sms {
  font-size: 12px !important;
  border-radius: 10px !important;
  padding: 0.375rem 0.75rem !important;
  border: none;
  transition: all 0.3s ease;
}

.btn {
  border-radius: 10px !important;
}

:root {
  --pm-purple: #552586;
  --pm-purple-100: #534fc2;
  --pm-border: #e5e5ef;
}

/* .modal-sec{border:0;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);} */
.modal-header--purple {
  background: var(--pm-purple) !important;
  color: #fff;
}

/* Consistent modal action buttons */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-footer .btn+.btn {
  margin-left: 0;
}

.modal-footer .btn:not(.btn-sm) {
  min-width: 110px;
}

.modal-footer .btn-secondary,
.modal-footer .btn-outline-secondary,
.modal-footer .btn-outline,
.modal-footer .btn-light {
  order: 1;
}

.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer .btn-danger {
  order: 2;
}

.pm-section {
  border: 1px solid var(--pm-border);
  background: #9898f561;
  overflow: hidden;
}

.pm-section__title {
  background: var(--pm-purple-100);
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--pm-border);
  font-weight: 700;
  color: #fff
}

.pm-subtitle {
  font-weight: 700;
  margin: .4rem 0
}

.pm-box {
  border: 1px solid var(--pm-border);
  padding: .6rem .75rem
}

.pm-inline-note {
  font-size: .9rem;
  color: #6b6b6b;
  margin-top: .15rem
}

/* ตารางเอกสาร */
.pm-table__head {
  display: flex;
  background: #6b3aa6;
  color: #fff;
  font-weight: 700;
  padding: .5rem .75rem
}

.pm-table__row {
  display: flex;
  align-items: center;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--pm-border);
  gap: .5rem;
  margin: 0
}

/* .pm-table__row:nth-child(even){background:#9898f561} */
/* .pm-table__row:hover{background:#f3ecff} */
.pm-table .col-select {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center
}

.pm-table .col-name {
  flex: 1
}

.pm-table .col-amount {
  width: 170px;
  text-align: right;
  font-weight: 700
}

/* แถบรวม */
.pm-totalbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pm-purple);
  color: #fff;
  border-radius: 0px;
  padding: .6rem .9rem;
  margin-top: .5rem
}

.pm-totalbar__label {
  font-weight: 700
}

.pm-totalbar__value {
  font-weight: 800;
  font-size: 1.5rem
}

.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(85, 37, 134, .15)
}

/* Check (display only) */
.pm-display-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0
}

.pm-display-check .pm-check-icon {
  visibility: hidden
}

.pm-display-check.active .pm-check-icon {
  visibility: visible
}

/* === หัวข้อหลัก (ปุ่มทรงเม็ดยา) === */
.nav .nav-item .nav-heading {
  background: #ece7ff !important;
  border-radius: 18px !important;
  font-weight: 600 !important;
  color: #5b46c5 !important;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  border: 0 !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

/* ไอคอน 3×3 จุด (เวอร์ชันที่รองรับกว้าง) */
.dot-grid {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.dot-grid::before,
.dot-grid::after {
  content: "";
  position: absolute;
  inset: 0;
}

.dot-grid::before {
  background-image:
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px),
    radial-gradient(currentColor 2px, transparent 3px);
  background-position:
    0 0, 50% 0, 100% 0,
    0 50%, 50% 50%, 100% 50%,
    0 100%, 50% 100%, 100% 100%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  color: #5b46c5;
}

.nav-heading-text .slash {
  opacity: .6
}

/* เมนูย่อยให้เยื้องแบบในรูป */
/* .dropdown-container > a.nav-link { padding-left: 2rem !important; } */
.dropdown-container>a.head::before {
  content: "|";
  margin-right: .5rem;
}

.dropdown-container>a.sub::before {
  content: "•";
  margin-right: .5rem;
  padding-left: 10px !important;
}

/* สถานะ active */
.nav-link.active,
.nav-heading.active {
  color: #8757FF !important;
  font-weight: 700 !important;
}

.dropdown-toggle {
  white-space: normal !important;
}

.sidebar-container .nav>.nav-item>.nav-link img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* hover เมนูบนสุด */
.sidebar-container .nav>.nav-item>.nav-link:hover {
  background: var(--c-primary-100);
  color: var(--c-primary);
}

/* สถานะเปิด/กำลังใช้ (bubble เหมือนในภาพ) */
.sidebar-container .nav>.nav-item>.nav-link.active {
  background: var(--c-primary-100);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

/* ข้อความของลิงก์ย่อยที่เป็นหน้าปัจจุบัน */
.sidebar-container .dropdown-container .nav-link.active-page {
  color: var(--c-primary);
  font-weight: 600;
}

/* ===== กล่องเมนูย่อย (เส้นแนวตั้ง + ระยะเยื้อง) ===== */
.sidebar-container .head {
  margin-left: 20px;
  /* ระยะจากเมนูหลัก */
  padding-left: 11.5px;
  /* เว้นจากเส้นแนวตั้ง*/
  border-left: 3px solid var(--c-line);
}

.sidebar-container .sub {
  margin-left: 10px;
  /* ระยะจากเมนูหลัก */
  /* border-left:3px solid var(--c-line); */
}

/* ===== หัวข้อระดับย่อยที่ "มีลูก" (ตัวหนา สีม่วง + ขีดแนวตั้งสั้น ๆ) ===== */
.sidebar-container .dropdown-container>.nav-link.dropdown-toggle {
  color: var(--c-primary);
  font-weight: 600;
  /* padding:.35rem 0; */
  position: relative;
}

.sidebar-container .dropdown-container>.nav-link.dropdown-toggle:hover {
  color: var(--c-primary);
  text-decoration: none;
}

.sidebar-container .dropdown-container>.nav-link.dropdown-toggle::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--c-primary);
  /* ขีดสั้น ๆ ด้านซ้ายเหมือนในรูป */
}

/* ===== รายการลิงก์ภายใน (จุดกลมดำ) ===== */
.sidebar-container .dropdown-container .nav-link:not(.dropdown-toggle) {
  color: var(--c-text);
  display: block;
  /* position:relative;
  padding:.25rem 0 .25rem 0; */
  margin: .15rem 0;
}

.sidebar-container .dropdown-container .nav-link:not(.dropdown-toggle):hover {
  color: var(--c-primary);
  text-decoration: none;
}

.sidebar-container .dropdown-container .nav-link:not(.dropdown-toggle)::before {
  content: "•";
  position: relative;
  left: -12px;
  top: 0;
  line-height: 1.2;
  font-size: 1.05rem;
  color: var(--c-text);
}

/* ===== รายละเอียดเล็ก ๆ ให้ใช้งาน滑ลื่น ===== */
/* กันเมาส์หลุดช่วงรอยต่อระหว่างเมนูหลักกับกล่องย่อย */
.sidebar-container .nav>.nav-item>.nav-link.dropdown-toggle {
  position: relative;
}

/* .sidebar-container .nav > .nav-item > .nav-link.dropdown-toggle::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
} */
.sidebar-container .dropdown-container {
  position: relative;
  z-index: 1;
}

/* ปรับช่องว่างรวม ๆ ให้โปร่ง */
.sidebar-container nav .nav {
  row-gap: .1rem;
}

/* ====== layout & colors ====== */
/* ===== Base / Card ===== */
.status-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px 16px 14px;
  overflow: visible
}

.status-card .head {
  display: flex;
  gap: 12px;
  align-items: center
}

/* Menu login polish */
.sidebar-container {
  background: linear-gradient(180deg, #f8f9ff 0%, #f2f4ff 100%);
  border-right: 1px solid #e2e6f6;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
  /* font-size: 13px; */
}

.sidebar-container .nav>.nav-item>.nav-link {
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* .sidebar-container .nav-link.text-dark {
  color: #3f3557 !important;
} */

.sidebar-container .nav>.nav-item>.nav-link .btn {
  background: #f0eefb !important;
  border: 1px solid #e4e0f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-container .nav>.nav-item>.nav-link:hover {
  background: #ece9fb;
  color: #3a2c74;
}

.sidebar-container .nav>.nav-item>.nav-link.active {
  background: #e9e5fb;
  box-shadow: inset 0 0 0 1px #d8d1f4;
}

.sidebar-container .dropdown-container {
  margin: 6px 0 8px 8px;
  padding-left: 10px;
  border-left: 1px dashed #ddd8f0;
}

.sidebar-container .dropdown-container .nav-link {
  padding: 6px 10px;
  border-radius: 10px;
}

.menu-toggle {
  border-radius: 12px;
  background: #6a57c9;
  box-shadow: 0 6px 14px rgba(106, 87, 201, 0.25);
  padding: 8px 12px;
  font-size: 14px;
  /* font-weight: 600; */
  letter-spacing: 0.2px;
  line-height: 1.1;
}

/* .sidebar-container .nav-link.text-dark2.sidebar-card {
  width: 100%;
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
} */

/* .sidebar-card-label {
  margin: 0;
  line-height: 1.2;
  text-align: center;
  font-weight: 600;
} */

.sidebar-cta {
  /* height: auto; */
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  /* font-weight: 600; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
}

.status-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efe9ff;
  font-size: 26px;
  line-height: 1
}

.status-card .meta {
  font-size: .85rem;
  color: #666
}

/* ===== Banner ===== */
.banner {
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 700;
  color: #fff;
  margin: 20px 0
}

.banner--personal {
  background: #20b1e6
}

.banner--shop {
  background: #8e7df5
}

/* ===== Status text colors ===== */
.status-pending {
  color: #5a43a8
}

.status-success {
  color: #2e7d32
}

.status-reject {
  color: red
}

.status-warning {
  color: orange;
}

.step-connector.reject,
.step-dot.reject {
  background-color: red !important;
  border-color: red !important;
}

.step-connector.success,
.step-dot.success {
  background-color: green !important;
  border-color: green !important;
}

.step-connector.active,
.step-dot.active {
  background-color: #0d6efd !important;
  /* สีน้ำเงินหรือสีหลักของระบบ */
  border-color: #0d6efd !important;
}

/* ===== Action boxes & buttons ===== */
.action-box {
  background: #efe9ff;
  border-radius: 16px;
  padding: 12px 14px;
  text-align: center
}

.action-title {
  font-weight: 700
}

.btn-view {
  border-color: #5c4bff;
  color: #5c4bff;
  border-radius: 999px
}

.btn-view:hover {
  background: #5c4bff;
  color: #fff
}

.btn-remark {
  border-color: #212121;
  background: #212121;
  color: #fff
}

.btn-remark:hover {
  opacity: .9
}

/* ===== Empty text ===== */
.empty {
  color: #9aa0a6;
  padding: 18px 0
}

/* ===== Steps (final) ===== */
.step-grid {
  --gap: 0px;
  display: grid;
  gap: 0 var(--gap);
  align-items: start;
  margin-top: 10px
}

.step-cell {
  position: relative;
  text-align: center;
  overflow: visible
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto;
  border: 2px dashed #bdbdbd;
  background: #fff
}

.step-dot.active {
  background: #6A0DAD;
  border: 2px solid #6A0DAD
}

.step-connector {
  position: absolute;
  top: 9px;
  left: 50%;
  width: calc(100% + var(--gap));
  height: 0;
  border-top: 2px dashed #bdbdbd;
  z-index: 0;
  pointer-events: none
}

.step-connector.active {
  border-top-style: solid;
  border-top-color: #6A0DAD;
  border-width: 3px;
  top: 8px
}

.step-cell:last-child .step-connector {
  display: none
}

.step-text {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.25rem;
  min-height: 2.5rem;
  display: flex;
  align-items: start;
  justify-content: center;
  word-break: break-word
}

/* ===== Search bar (เฉพาะ p_super == 1) ===== */
.search-bar {
  background: #f6f7ff;
  border: 1px solid #ecebff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px
}

.search-bar .form-select,
.search-bar .form-control {
  height: 38px
}

.search-bar .btn {
  height: 38px
}

/* ===== Pagination ===== */
.paging {
  margin-top: 10px
}

.paging .pagination {
  margin-bottom: 0
}

.paging .page-link {
  cursor: pointer
}

.paging .page-size {
  width: auto;
  display: inline-block;
  margin-left: 8px
}

.paging .info {
  font-size: .85rem;
  color: #666;
  margin: 6px 0 0
}

/* ===== Tracking page refinements ===== */
.tracking-page {
  /* max-width: 1440px; */
  margin: 0 auto;
  padding: 16px 18px 24px;
  box-shadow: 0 8px 20px rgba(34, 27, 90, 0.06);
}

.tracking-page .header-bar {
  height: auto;
  padding: 10px 16px;
  border-radius: 12px;
  letter-spacing: 0.2px;
}

.tracking-page .section-title {
  border-radius: 12px;
  font-size: 1.05rem;
  padding: 10px 14px;
}

.tracking-page .search-bar {
  background: #f7f7ff;
  border-color: #e3e1ff;
  box-shadow: 0 8px 18px rgba(94, 80, 192, 0.08);
}

.tracking-page .mini-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #4f4f63;
  margin-bottom: 4px;
}

.tracking-page .status-card {
  border-color: #ececf5;
  box-shadow: 0 10px 22px rgba(34, 27, 90, 0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.tracking-page .status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(34, 27, 90, 0.12);
}

.tracking-page .status-card .meta {
  font-size: .8rem;
  color: #6b6b78;
}

.tracking-page .status-card .icon {
  background: linear-gradient(135deg, #efe9ff, #e3ddff);
}

.tracking-page .banner {
  margin: 14px 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .95rem;
}

.tracking-page .step-dot {
  width: 18px;
  height: 18px;
}

.tracking-page .step-connector {
  top: 8px;
}

.tracking-page .step-connector.active {
  border-width: 2px;
  top: 8px;
}

.tracking-page .step-text {
  font-size: 11px;
  min-height: 2.1rem;
}

.tracking-page .action-box {
  background: #f6f3ff;
  border: 1px solid #ece7ff;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.tracking-page .action-title {
  font-size: .9rem;
  color: #2c2c2c;
}

.tracking-page .btn-view,
.tracking-page .btn-remark {
  height: 34px;
  font-weight: 600;
}

.tracking-page .paging .page-link {
  border-radius: 8px;
}

.tracking-page .empty {
  font-size: .95rem;
}

@media (max-width: 576px) {
  .tracking-page {
    padding: 12px;
  }

  .tracking-page .status-card {
    padding: 14px;
  }

  .tracking-page .banner {
    font-size: .9rem;
  }

  .tracking-page .action-box {
    min-height: 76px;
  }
}

/* เฮดเดอร์ม่วง + ชื่อเรื่องกึ่งกลาง */
.modal-sec .modal-header {
  background: #a99af1;
  color: #fff;
  justify-content: center;
  position: relative;
}

.modal-sec .modal-header .btn-close {
  position: absolute;
  right: 12px;
  top: 12px;
  filter: invert(1);
  /* ทำไอคอนปิดเป็นสีขาว */
  opacity: .9;
}

/* เนื้อหาให้มีขอบนอกคล้ายภาพ */
.modal-sec .modal-body {
  padding: 18px 22px;
  background: #fff;
  border-radius: 25px;
}

/* แถบหัวข้อสีน้ำเงิน */
.section-bar {
  background: #2a9df4;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  border-radius: 4px;
  margin: 10px 0 16px;
}

/* กล่องแสดงข้อความประวัติ */
.timeline-card {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  min-height: 90px;
  padding: 14px 14px 32px;
  margin-bottom: 18px;
  background: #fff;
  position: relative;
}

.timeline-card .who {
  font-weight: 700;
  margin-right: 6px;
}

.timeline-card .timeline-date {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-weight: 600;
  color: #000;
}

/* โครงรายละเอียดบรรทัดต่อบรรทัด */
.kv-row {
  margin-bottom: 6px;
}

.kv-row strong {
  font-weight: 700;
}

/* แถวโหลด/แจ้ง error */
#biz-loading {
  margin: 6px 0 12px;
}

#biz-error {
  margin-top: 8px;
}

/* ปุ่มปิดแบบลิงก์กลางล่าง */
.modal-sec .modal-footer {
  justify-content: center;
  background: #fff;
  border-top: none;
  padding-top: 0;
}

.modal-sec .close-link {
  color: #7b69e6;
  font-weight: 600;
  text-decoration: none;
}

.modal-sec .close-link:hover {
  text-decoration: underline;
}

.modal-footer {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.ml-2 {
  margin-left: 20px;
}

.my-2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mr-2 {
  margin-right: 10px;
}

.mx-2 {
  margin-right: 10px;
  margin-left: 10px;
}

.py-2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* .px-2{
  padding-right: 10px;
  padding-left: 10px;
} */
.pb-2 {
  padding-bottom: 10px;
}

.pl-2 {
  padding-left: 10px;
}

.pr-2 {
  padding-right: 10px;
}

.pt-2 {
  padding-top: 10px;
}

.bgstatustranfer {
  background-color: #000000;
  color: white;
  border-radius: 10px;
}

.bgstatusrenew5y {
  background-color: #552586;
  color: white;
  border-radius: 10px;
}

.bgstatusrenew1y {
  background-color: #67c5cd;
  color: white;
  border-radius: 10px;
}

.register-box {
  max-width: 960px;
  max-height: calc(100vh - 4rem);
  /* สูงสุดเท่าหน้าจอ ลบเผื่อ margin นิดหน่อย */
  overflow-y: auto;
  /* ถ้า error เยอะ กล่องนี้จะมี scroll เอง */
  border-radius: 0.75rem;
  background-color: #ffffff;
}

/* กันเนื้อหาไปชิดขอบเกินไปเวลาเลื่อน */
.register-box .form-login {
  padding-bottom: 2.5rem;
}

/* ถ้า headlogin เป็นแถบสีด้านบน ให้โค้งขอบบน */
.headlogin {
  border-radius: 0.75rem 0.75rem 0 0;
}

.select2-container--default .select2-selection--single {
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  color: var(--bs-body-color);
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: .5rem;
}

/* โฟกัสเหมือน .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.manual-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.manual-card-link .manual-card {
  cursor: pointer;
}

.table-area .report-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .75);
  z-index: 10;
}

#courseInfoModal .course-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#courseInfoModal .course-section {
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

#courseInfoModal .course-section.new {
  background: #F3E9FF;
  color: #4a2a7a;
  border-left: 4px solid #6A0DAD;
}

#courseInfoModal .course-section.old {
  background: #F6F6F6;
  color: #444;
  border-left: 4px solid #9aa0a6;
}

#courseInfoModal .course-count {
  font-weight: 600;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
}

#courseInfoModal .course-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

#courseInfoModal .course-title {
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 6px;
  line-height: 1.35;
}

#courseInfoModal .course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: #555;
  font-size: .95rem;
}

#courseInfoModal .course-meta .meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 240px;
}

#courseInfoModal .course-empty {
  border: 1px dashed rgba(0, 0, 0, .18);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  color: #777;
  background: #fff;
}

.profile-page .content-page-container {
  /* max-width: 980px;
        margin: 20px auto 28px;
        padding: 22px 24px 26px; */
  background: linear-gradient(180deg, #f9f7ff 0%, #ffffff 55%);
  /* border-radius: 18px; */
}

.profile-page .headlogin {
  margin-bottom: 10px;
}

.profile-page .headlogin span {
  font-weight: 700;
  font-size: 1.35rem;
  /* color: #3b2a55; */
}

.profile-page .profile-card {
  border: 1px solid #e7e1f4;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(58, 35, 96, 0.08);
}

.profile-page .profile-card .card-body {
  padding: 20px 22px;
}

.profile-page .profile-title {
  background: #efe9fb;
  border: 1px solid #e1d7f4;
  border-radius: 10px;
  padding: 8px 12px;
}

.profile-page .profile-title h5 {
  margin: 0;
}

.profile-page .profile-list dt {
  font-weight: 600;
  color: #4b3a62;
}

.profile-page .profile-list dd {
  color: #2d233a;
}

.profile-page .profile-list dd h5 {
  margin: 0;
  font-size: 1.05rem;
}

.profile-page .alert {
  border-radius: 12px;
}

.profile-page .form-check {
  background: #faf9fc;
  /* border: 1px solid #ece6f6; */
  /* border-radius: 10px; */
  /* padding: 10px 12px; */
  margin-bottom: 10px;
}

.profile-page .profile-actions {
  display: grid;
  gap: 10px;
  /* padding-left: 20px;
    padding-right: 20px; */
     background: #faf9fc;
  border: 1px solid #ece6f6;
  border-radius: 10px;
  padding: 15px 20px;
}

.profile-page .profile-actions .form-check {
  margin-bottom: 0;
}

.profile-page .action-buttons .btn {
  min-width: 220px;
}

@media (max-width: 576px) {
  .profile-page .content-page-container {
    margin: 12px auto 20px;
    padding: 16px;
  }

  .profile-page .profile-card .card-body {
    padding: 16px;
  }
}

.spa-search-page {
  background: linear-gradient(180deg, #ffffff 0%, #f6faf4 100%);
  /* border: 1px solid #dfe8d9; */
  /* border-radius: 18px; */
  box-shadow: 0 10px 24px rgba(39, 74, 39, 0.08);
  /* padding: 14px;*/
}

/* .spa-search-page .header-bar {
  background: linear-gradient(90deg, #3f6f2f 0%, #5c8b3f 100%);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(39, 74, 39, 0.18);
  padding: 10px 16px;
  letter-spacing: 0.2px;
} */

.spa-search-page #search-form {
  background: #ffffff;
  border: 1px solid #e0e8db;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(39, 74, 39, 0.08);
}

.spa-search-page .spa-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.spa-search-page #search-form label {
  color: #2f4b26;
  font-weight: 600;
}

.spa-search-page #search-form .form-select,
.spa-search-page #search-form .form-control {
  border-radius: 12px;
  border-color: #d6e1d1;
  min-height: 40px;
}

.spa-search-page #search-form .form-select:focus,
.spa-search-page #search-form .form-control:focus {
  border-color: #6b984e;
  box-shadow: 0 0 0 0.2rem rgba(86, 126, 56, 0.15);
}

.spa-search-page #search-form #s_data {
  flex: 0 1 200px;
  min-width: 160px !important;
  width: auto !important;
}

.spa-search-page #search-form #q {
  flex: 1 1 320px;
  min-width: 220px !important;
  width: auto !important;
}

.spa-search-page #search-form .btn {
  height: 40px;
  width: 44px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(39, 74, 39, 0.18);
}

.spa-search-page #search-form .btn:hover {
  filter: brightness(0.96);
}

.spa-search-page .stats-section {
  background: #ffffff;
  border: 1px solid #e0e8db;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(39, 74, 39, 0.08);
}

.spa-search-page #search-results {
  background: #faf4f9;
  border: 1px dashed #e3d2e1;
  border-radius: 12px;
  padding: 10px 12px;
}

.spa-search-page #school-count {
  color: #2f4b26;
  font-weight: 600;
}

.spa-search-page #results-container .card {
  border: 1px solid #e0e8db;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(39, 74, 39, 0.08);
  overflow: hidden;
}

.spa-search-page #results-container .row {
  align-items: stretch;
}

.spa-search-page #results-container .col-md-3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spa-search-page #results-container p {
  margin-bottom: 6px;
}

.spa-search-page #results-container img {
  border-radius: 12px;
  object-fit: none;
  background: #f3f5f2;
}

.spa-search-page #results-container .btn {
  background: #f4f8f1;
  border: 1px solid #d6e1d1;
}

.spa-search-page #pagination-container .page-link {
  border-radius: 10px;
  margin-right: 2px;
  /* color: #3f6f2f; */
}

.spa-search-page #pagination-container .page-link:hover {
  /* color: #47264b; */
  background: #b873bfb5;
  border-color: #b873bfb5;
}

/* .spa-search-page #pagination-container .page-item.active .page-link {
  background: #3f6f2f;
  border-color: #3f6f2f;
  color: #ffffff;
} */

@media (max-width: 576px) {
  .spa-search-page {
    padding: 12px;
  }

  .spa-search-page .spa-search-row>* {
    flex: 1 1 100%;
  }

  .spa-search-page #search-form .btn {
    width: 100%;
  }
}

.index-page {
  background: linear-gradient(180deg, #ffffff 0%, #f6faf4 100%);
  border: 1px solid #dfe8d9;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(39, 74, 39, 0.08);
  padding: 14px;
}

.index-page #search-form {
  background: #ffffff;
  border: 1px solid #e0e8db;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(39, 74, 39, 0.08);
  margin-bottom: 15px;
}

/* ===== Remark Modal (scoped) ===== */
#remarkModal .modal-dialog {
  max-width: 920px;
  /* ใหญ่ขึ้นนิด อ่านสบาย */
}

#remarkModal .modal-content {
  border: 0;
  /* border-radius: 16px; */
  overflow: hidden;
  /* ให้ header โค้งสวย */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

#remarkModal .modal-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); */
}

#remarkModal .modal-title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

#remarkModal .btn-close {
  opacity: 0.7;
  transform: scale(1.05);
}

#remarkModal .btn-close:hover {
  opacity: 1;
}

#remarkModal .modal-body {
  padding: 18px;
  background: #fbfcfe;
}

/* ทำให้ body เลื่อนในตัวเอง เมื่อข้อความยาว */
#remarkModal .modal-body {
  /* max-height: min(72vh, 640px); */
  overflow: auto;
}

/* ===== Remarks container ===== */
#remarksContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* รองรับทั้ง <p> ที่คุณสร้างจาก JS */
#remarksContainer p {
  margin: 0;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  line-height: 1.55;
  word-break: break-word;
  position: relative;
}

/* เส้น accent ด้านซ้าย */
#remarksContainer p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 8px;
  background: #0d6efd;
  /* bootstrap primary */
  opacity: 0.9;
}

/* วันที่เวลา */
#remarksContainer p strong {
  display: inline-block;
  padding: 2px 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.10);
  color: #0b5ed7;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ถ้าอยากให้รายละเอียด remark ดูแยกจากวันที่ชัดขึ้น */
#remarksContainer p {
  color: #1f2937;
}

/* ===== เส้นคั่นใน modal ===== */
#remarkModal hr {
  margin: 16px 0;
  opacity: 0.08;
}

/* ===== กล่องข้อความเตือนสีแดงด้านล่าง ===== */
#remarkModal .text-danger.text-center.mt-3 {
  margin-top: 14px !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.08);
  /* bootstrap danger */
  border: 1px solid rgba(220, 53, 69, 0.18);
  font-weight: 700;
}

/* ===== Footer ===== */
#remarkModal .modal-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

#remarkModal .modal-footer .btn {
  border-radius: 12px;
  padding: 10px 16px;
}

.remarks-scroll {
  max-height: 52vh;
  overflow: auto;
  padding-right: 6px;
}

.remark-item {
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .02);
  border: 1px solid rgba(0, 0, 0, .06);
}

.remark-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.remark-date {
  font-size: .9rem;
  color: rgba(0, 0, 0, .6);
}

.remark-text {
  white-space: pre-wrap;
  margin: 0;
  color: rgba(0, 0, 0, .85);
}

#commentModal .modal-body {
  background: #fbfcfe;
}

#commentModal .remark-form {
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: #fff;
}

#commentModal #remarkDetail {
  border-radius: 10px;
  min-height: 120px;
}

#commentModal .badge.badge-secondary {
  background-color: #6c757d;
  color: #fff;
  font-size: 12px;
}

 .upload-header{
    background:#b7a7ff;
    color:#fff;
  }

  /* radio types */
  .file-types{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
  }
  .file-types .form-check{ min-width:210px; }

  /* รายการไฟล์ */
  #remarkModal .file-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid #eee;
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
    background:#fff;
  }
  #remarkModal .file-thumb{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #e6e6e6;
    flex:0 0 auto;
  }
  #remarkModal .file-thumb.pdf{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:#fafafa;
  }
  #remarkModal .file-info{ flex:1; min-width:0; }
  #remarkModal .file-name{
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #remarkModal .file-actions{
    display:flex;
    gap:8px;
    flex:0 0 auto;
  }
#uploadManagerFileModal .modal-dialog {
  max-width: 720px;
}
#uploadManagerFileModal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  /* ให้ header โค้งสวย */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.file-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid #eee;
  border-radius:10px;
  margin-bottom:10px;
}

.file-thumb{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#f8f9fa;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.file-thumb--pdf{ color:#dc3545; }
.file-thumb--file{ color:#6c757d; }
.file-thumb--placeholder{ color:#198754; }

.file-info{ flex:1 1 auto; min-width:0; }
.file-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-actions{ display:flex; gap:8px; }
.bgstatusmodify {
  background-color: #ff9800;
  color: white;
  border-radius: 10px;
}

.new-file-upload-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.new-file-upload-badge--edited {
  background: #198754;
}
/* .form-check-input{
  width: 18px;
  height: 18px;
  background-repeat: unset;
} */
.pdpa-note-card {
        margin-top: 4px;
        padding: 14px 16px;
        border: 1px solid #dcead1;
        border-radius: 12px;
        background: #f7fbf3;
    }

    .pdpa-trigger {
        border-color: #4f7f34;
        color: #426a2a;
        border-radius: 999px;
        padding: 6px 14px;
        font-weight: 600;
    }

    .pdpa-trigger:hover {
        background-color: #4f7f34;
        border-color: #4f7f34;
        color: #fff;
    }

    .pdpa-check {
        margin-top: 10px;
        padding: 12px 14px 12px 2rem;
        border: 1px solid #dde4ec;
        border-radius: 12px;
        background: #fff;
    }
      #register-form .btn-register-submit {
        min-width: 240px;
        min-height: 46px;
        border-radius: 12px;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(46, 110, 53, 0.24);
    }
     #register-form .textlogin {
        font-weight: 600;
        color: #23421f;
        margin-bottom: 6px !important;
    }
    #pdpaTermsModal .modal-body {
        padding: 1.2rem;
    }

    #pdpaTermsModal .pdpa-content {
        background: #f8fbff;
        border: 1px solid #dbe4f0;
        border-radius: 12px;
        padding: 14px 16px;
        color: #243447;
        line-height: 1.7;
    }

    #pdpaTermsModal .pdpa-intro {
        margin-bottom: 12px;
        text-align: justify;
    }

    #pdpaTermsModal .pdpa-block {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #ccd8ea;
    }

    #pdpaTermsModal .pdpa-block:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    #pdpaTermsModal .pdpa-title {
        margin-bottom: 6px;
        font-weight: 700;
        color: #3f2d78;
    }

    #pdpaTermsModal .pdpa-list {
        padding-left: 2rem;
        margin-bottom: 0;
    }

    #pdpaTermsModal .pdpa-list li {
        margin-bottom: 4px;
    }

    #pdpaTermsModal .pdpa-list li:last-child {
        margin-bottom: 0;
    }
.font-weight-bold {
  font-weight: 700 !important;
}
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}