/* ============================= */
/*        MAIN BRAND COLOR       */
/* ============================= */


:root {
  --brand-green: #1ABC9C;
  --brand-green-dark: #1ABC9C;
}
/* ====== FULL SCREEN DASHBOARD FIX ====== */

html, body {
  font-family: 'Sarabun', sans-serif !important;
  height: 100%;
  margin: 0;
  overflow-x: hidden; /* ปิดแนวนอน */
  overflow-y: auto; /* เปิดแนวตั้ง */
}

@font-face {
  font-family: 'PlaypenThai';
  src: url('/fonts/PlaypenSansThai-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'PlaypenThai';
  src: url('/fonts/PlaypenSansThai-Bold.ttf') format('truetype');
  font-weight: 700;
}

body,
.sidebar,
.nav-sidebar,
.main-header,
.content-wrapper,
.table,
.form-control,
.btn {
  font-family: 'PlaypenThai', sans-serif !important;
  font-size: 14px !important;
}



.content-wrapper {
  margin-bottom: 0 !important;
}
 
 

 .content-header {
    padding: 15px 15px !important;   /* ปกติจะ 15px */
}

.content-header .row {
    margin-bottom: 0 !important;
}
.main-header {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.icon-main {
  font-size: 48px;
  color: #1ABC9C;
}

.w-60-center {
  width: 60%;
  margin: 0 auto;
}


/* Sidebar เต็มจอ */
.main-sidebar {
  height: 100vh;
}

 
  /* ถ้ามี container-fluid ด้านใน */
  .content-wrapper > .container-fluid {
    min-height: 100%;
  }

.main-footer {
  display: none !important;
}


.main-header.navbar {
  background-color: #384859 !important;
}

.nav-signout:hover {
  color: #1ABC9C !important;
}

  .nav-signout:hover i {
    color: #1ABC9C !important;
  }


.txt-search-width {
  width: 150px;
}

.sidebar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.table.projects thead th {
  background-color: #f2f2f2; /* สีเทาอ่อน */
  color: #000000; /* สีดำ */
  font-weight: 500;
  vertical-align: middle;
}

.table.projects tbody tr {
  background-color: #ffffff; /* พื้นหลังสีขาว */
  color: #000000; /* ตัวอักษรสีดำ */
  font-size: 14px;
}

.projects tbody tr:hover {
  background-color: #F6FCFB !important;
  color: #000000;
}

.My-Tbl-Left {
  text-align: left;
  vertical-align: middle;
}

.My-Tbl-Right {
  text-align: right !important;
}
 

.My-Tbl-Center {
  text-align: center;
  vertical-align: middle;
}

 
.text-green-custom {
  color: #1ABC9C;
}

.label-brand {
  color: #1ABC9C;
  font-weight: 600;
}

.form-control:focus {
  background-color: #E8F8F5; /* พื้นหลังเขียว */
  border-color: #1ABC9C;
  color: #000000; /* ตัวอักษรสีขาว อ่านง่าย */
  box-shadow: none; /* เอาเงาออก (ถ้าไม่ต้องการ) */
}

.text-brand {
  color: #1ABC9C !important;
}

.btn-outline-green {
  color: #1ABC9C;
  border: 1px solid #1ABC9C;
}


  .btn-outline-green:hover {
    background-color: #1ABC9C;
    color: black;
  }


.text-custom-green {
  color: #1ABC9C !important;
}

.label-brand {
  color: #1ABC9C;
  font-weight: 600;
}
 

/* ====== TEXTBOX FOCUS GREEN ====== */

.form-control:focus {
  border-color: #1ABC9C;
  box-shadow: 0 0 0 0.0rem rgba(26, 188, 156, 0.25);
}

.form-select:focus {
  border-color: #1ABC9C;
  box-shadow: 0 0 0 0.0rem rgba(26, 188, 156, 0.25);
}


.form-control {
  height: calc(1.8125rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}


textarea.form-control:focus {
  border-color: #1ABC9C;
  box-shadow: 0 0 0 0.0rem rgba(26, 188, 156, 0.25);
}

.text-brand {
  color: #1ABC9C !important;
}

.toast-success {
  background-color: #1ABC9C !important;
  color: #ffffff !important;
}

  .toast-success .toast-progress {
    background: #1ABC9C !important;
  }



/* ============================= */
/*            BUTTONS            */
/* ============================= */

.btn-success {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #ffffff;
}

  .btn-success:hover,
  .btn-success:focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
    color: #ffffff;
  }

.btn-outline-success {
  color: var(--brand-green);
  border-color: var(--brand-green);
}

  .btn-outline-success:hover {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #ffffff;
  }

/* ============================= */
/*            NAVBAR             */
/* ============================= */

.navbar-custom {
  background-color: var(--brand-green);
}

  .navbar-custom .navbar-brand,
  .navbar-custom .nav-link {
    color: #ffffff;
  }

    .navbar-custom .nav-link:hover {
      color: #e8f8f5;
    }

  /* ============================= */
/*            TEXT               */
/* ============================= */

.text-brand {
  color: var(--brand-green) !important;
}

/* ============================= */
/*            BACKGROUND         */
/* ============================= */

.bg-brand {
  background-color: var(--brand-green) !important;
  color: #ffffff;
}

.badge-green-custom {
  background-color: #1ABC9C;
  color: #ffffff;
  padding: 4px 4px; /* บนล่าง 4px ซ้ายขวา 10px */
  border-radius: 5px; /* ทำให้โค้งมนสวย */
  display: inline-block;
}

.badge-red-custom {
  background-color: red;
  color: #ffffff;
  padding: 4px 4px; /* บนล่าง 4px ซ้ายขวา 10px */
  border-radius: 5px; /* ทำให้โค้งมนสวย */
  display: inline-block;
}

.icon-delete {
  font-size: 18px;
  color: #dc3545; /* สีแดง */
  cursor: pointer;
  font-size: 24px; /* กำหนดขนาด 32 */
}

  .icon-delete:hover {
    color: #dc3545; /* สีแดงตอน hover */
  }

.icon-edit {
  color: #1ABC9C;
  font-size: 18px;
  cursor: pointer;
  border: 1px;
  font-size: 24px; /* กำหนดขนาด 32 */
}

  .icon-edit:hover {
    color: #17a589;
  }

.icon-setting {
  color: #1ABC9C;
  font-size: 24px;
  cursor: pointer;
  transition: 0.2s;
}

  .icon-setting:hover {
    color: #dc3545;
  }
.icon-copy {
  color: #1ABC9C;
  font-size: 24px;
  cursor: pointer;
  transition: 0.2s;
}

  .icon-copy:hover {
    color: #dc3545;
  }

.icon-lock {
  color: #1ABC9C;
  font-size: 24px;
  cursor: pointer;
  transition: 0.2s;
}

  .icon-lock:hover {
    color: #dc3545;
  }

.icon-select {
  color: #1ABC9C;
  font-size: 32px;
  cursor: pointer;
  transition: 0.2s;
}

  .icon-select:hover {
    color: #dc3545;
  }
.page-link {
  color: #1ABC9C !important;
}

  .page-link:hover {
    color: #ffffff !important;
    background-color: #1ABC9C !important;
    border-color: #1ABC9C !important;
  }

.page-item.active .page-link {
  background-color: #1ABC9C !important;
  border-color: #1ABC9C !important;
  color: #ffffff !important;
}

.btn-page-black {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border-color: #6c757d !important;
}

  .btn-page-black:hover {
    background-color: #23272b !important;
    color: #ffffff !important;
    border-color: #23272b !important;
  }

.page-item.active .btn-page-black {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.card-outline-green {
  border-top: 6px solid #1ABC9C;

}

  .card-outline-green > .card-header {
    background-color: #ffffff;
    color: #1ABC9C;
    border-bottom: 3px solid #e9ecef;
  }

.card-outline-greenSmall {
  border-top: 3px solid #1ABC9C;
}


.bg-green-custom {
  background-color: #1ABC9C !important;
  color: #ffffff;
}
  .bg-green-custom:hover {
    background-color: #159a80 !important;
  }

.info-box-text {
  color: #000000 !important;
}

.icheck-primary {
  border: none !important;
  box-shadow: none !important;
}


  .icheck-primary input[type="checkbox"]:checked + label::before {
    background-color: #1ABC9C !important;
    border-color: #1ABC9C !important;
  }
.card.card-secondary .card-header {
  background-color: #E9ECEF;
  color: #000000;
}

.card.card-secondary {
  border-top: 3px solid #E9ECEF;
}
/* Tab ปกติ */
.nav-tabs .nav-link {
  color: #000000;
}


.nav-tabs .nav-link.active {
  color: #1ABC9C !important;
  font-weight: bold;
  border-bottom: 3px solid #1ABC9C !important;
}
  .nav-tabs .nav-link:hover {
    color: #1ABC9C;
  }

.bg-col-1 {
  background-color: #eafaf1;
}

.bg-col-2 {
  background-color: #f2f2f2;
}

.btnCalendar {
  height: 31px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-custom-green {
  background-color: #1ABC9C !important;
  border-color: #1ABC9C !important;
  color: #fff !important;
}

  .btn-custom-green:hover {
    background-color: #17a589 !important;
    border-color: #17a589 !important;
    color: #fff !important;
  }