:root {
  scroll-behavior: smooth !important;
  --brown-main: #916846;
  --brown-dark: #4b311d;
  --brown-light: #f3eee9;
  --brown-pale: #e3dacd;
  --brown-highlight: #ae825f;
}

/* --- กลุ่ม Background โทนน้ำตาลและชมพู --- */
.bg-knmbw {
  background-color: #995e26 !important;
}

.bg-knmbw-bw {
  background-color: #ffd7b3 !important;
}

.bg-hotpink {
  background-color: hotpink !important;
}

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

/* --- โทนน้ำตาลหลากหลายเฉด --- */
.bg-brown {
  background-color: #8B5C2A !important;
}

.bg-brown-dark {
  background-color: #995e26 !important;
}

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

.bg-brown-soft {
  background-color: #f6e7d6 !important;
}

.bg-brown-mocha {
  background-color: #b08663 !important;
}

.bg-brown-coffee {
  background-color: #6f4e37 !important;
}

.bg-brown-caramel {
  background-color: #b4733a !important;
}

.bg-brown-beige {
  background-color: #f5f5dc !important;
}

.bg-brown-tan {
  background-color: #d2b48c !important;
}

.bg-brown-walnut {
  background-color: #704214 !important;
}

.bg-brown-wood {
  background-color: #c19a6b !important;
}

.bg-brown-bronze {
  background-color: #b08d57 !important;
}

.bg-brown-choco {
  background-color: #381819 !important;
}

.bg-brown-sand {
  background-color: #e6d2b5 !important;
}

.bg-brown-cafe {
  background-color: #ad8762 !important;
}

.bg-brown-milk {
  background-color: #e5c298 !important;
}

.bg-brown-cream {
  background-color: #f4ecdf !important;
}

/* --- กลุ่ม Text โทนน้ำตาลและชมพู --- */
.text-knmbw {
  color: #995e26 !important;
}

.text-knmbw-bw {
  color: #ffd7b3 !important;
}

.text-hotpink {
  color: hotpink !important;
}

.text-pink-light {
  color: #ffd1dc !important;
}

/* --- โทนน้ำตาลหลากหลายเฉด (ข้อความ) --- */
.text-default {
  color: #ffffff !important;
}

.text-brown {
  color: #8B5C2A !important;
}

.text-brown-dark {
  color: #995e26 !important;
}

.text-brown-light {
  color: #b08663 !important;
}

.text-brown-soft {
  color: #a68a6d !important;
}

.text-brown-mocha {
  color: #b08663 !important;
}

.text-brown-coffee {
  color: #6f4e37 !important;
}

.text-brown-caramel {
  color: #b4733a !important;
}

.text-brown-beige {
  color: #a89c8a !important;
}

.text-brown-tan {
  color: #a0815c !important;
}

.text-brown-walnut {
  color: #704214 !important;
}

.text-brown-wood {
  color: #c19a6b !important;
}

.text-brown-bronze {
  color: #b08d57 !important;
}

.text-brown-choco {
  color: #381819 !important;
}

.text-brown-sand {
  color: #e6d2b5 !important;
}

.text-brown-cafe {
  color: #ad8762 !important;
}

.text-brown-milk {
  color: #e5c298 !important;
}

.text-brown-cream {
  color: #f4ecdf !important;
}

/* Minimal & Neutral Tone Colors */
.bg-minimal-white {
  background-color: #ffffff !important;
}

.bg-minimal-grey {
  background-color: #f5f5f5 !important;
}

.bg-minimal-grey2 {
  background-color: #ececec !important;
}

.bg-minimal-ivory {
  background-color: #f9f6f2 !important;
}

.bg-minimal-beige {
  background-color: #f4ecdf !important;
}

.bg-minimal-sand {
  background-color: #ede7de !important;
}

.bg-minimal-cream {
  background-color: #faf3e3 !important;
}

.bg-minimal-milk {
  background-color: #f8f5f0 !important;
}

.bg-minimal-stone {
  background-color: #d8cbc4 !important;
}

.bg-minimal-taupe {
  background-color: #b8a99a !important;
}

.bg-minimal-brownsoft {
  background-color: #d6bfa7 !important;
}

.bg-minimal-mocha {
  background-color: #cfc3b0 !important;
}

/* สำหรับข้อความ */
.text-minimal-white {
  color: #ffffff !important;
}

.text-minimal-grey {
  color: #f5f5f5 !important;
}

.text-minimal-grey2 {
  color: #ececec !important;
}

.text-minimal-ivory {
  color: #f9f6f2 !important;
}

.text-minimal-beige {
  color: #f4ecdf !important;
}

.text-minimal-sand {
  color: #ede7de !important;
}

.text-minimal-cream {
  color: #faf3e3 !important;
}

.text-minimal-milk {
  color: #f8f5f0 !important;
}

.text-minimal-stone {
  color: #d8cbc4 !important;
}

.text-minimal-taupe {
  color: #b8a99a !important;
}

.text-minimal-brownsoft {
  color: #d6bfa7 !important;
}

.text-minimal-mocha {
  color: #cfc3b0 !important;
}


html,
body {
  scroll-behavior: smooth !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.7s;
}

.login-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transition: opacity 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn .18s;
}

input[type="checkbox"].rounded-md {
  border-radius: 100% !important;
}


.toggle-switch {
  box-shadow: 0 2px 6px #0002;
}

.toggle-switch span {
  box-shadow: 0 1px 4px #0002;
}



.btn-outline-brown {
  color: var(--brown-main);
  border: 2px solid var(--brown-main);
  background: #fff;
  transition: background .18s, color .18s;
}

.btn-outline-brown:hover,
.btn-outline-brown:focus {
  color: #fff;
  background: linear-gradient(90deg, var(--brown-main) 60%, var(--brown-highlight) 100%);
  border-color: var(--brown-main);
}

.text-brown-main {
  color: var(--brown-main) !important;
}

.text-brown-highlight {
  color: var(--brown-highlight) !important;
}

.bg-brown-main {
  background-color: var(--brown-main) !important;
}

.bg-brown-pale {
  background-color: var(--brown-pale) !important;
}

.bg-brown-light {
  background-color: var(--brown-light) !important;
}

@media (max-width: 520px) {
  .modal-content {
    border-radius: 1.1rem !important;
  }

  .service-card {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .4rem !important;
  }

  .service-card img,
  .service-card .bg-brown-pale {
    width: 48px !important;
    height: 48px !important;
  }

  .modal-title .service-cat-name {
    margin-left: 0 !important;
    font-size: 1.08em;
    margin-top: .25em;
    display: block;
    color: var(--brown-light, #ffffff);
    font-weight: 600;
  }

  .modal-title {
    font-size: 1.02em !important;
    align-items: flex-start !important;
  }

  .modal-title span {
    width: 100%;
  }
}


.text-brown-900 {
  color: #42210b;
}

.text-brown-600 {
  color: #8d5524;
}

.bg-brown-100 {
  background: #f3e8df;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.7s cubic-bezier(.24, .86, .44, 1.01) forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bg-brown-50 {
  background: #f8f6f3 !important;
}

.text-brown {
  color: #a35d29 !important;
}

.border-brown {
  border-color: #b45309 !important;
}

.form-control:focus {
  border-color: #b45309;
  box-shadow: 0 0 0 .05rem #b4530955;
}

.btn-outline-danger {
  border-color: #dc3545 !important;
}

.btn-success {
  background: linear-gradient(90deg, #b45309, #e3a66e 120%);
  border: none;
}

.btn-success:hover {
  background: linear-gradient(90deg, #d97706, #f59e42 100%);
}

@media (max-width: 600px) {

  th,
  td {
    font-size: 0.96em;
  }

  .form-control-sm {
    font-size: 0.98em;
  }

  .table {
    min-width: 340px;
  }
}



/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 10px;
  bottom: 45px;
  z-index: 99999;
  background: #df8743ef;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #662e01;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}


/* <!-- Minimal Switch Styling (ถ้ายังไม่มี) --> */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .3s; border-radius: 20px; }
.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px;
    background-color: white; transition: .3s; border-radius: 50%;
}
input:checked + .slider { background-color: #6f4e37; }
input:checked + .slider:before { transform: translateX(16px); }


.bounce-enter-active, .bounce-leave-active {
  transition: all .33s cubic-bezier(.68,-0.55,.27,1.55);
}
.bounce-enter-from, .bounce-leave-to {
  transform: scale(0.8);
  opacity: 0.3;
}
.bounce-enter-to, .bounce-leave-from {
  transform: scale(1.08);
  opacity: 1;
}