@charset "UTF-8";

:root,
[data-color-theme="light"] {
  --primary-temp: #14ae5c;
  --primary-temp-rgb: 20, 174, 92;
  --filter-leftmenu-icon-form-333-to-temp: invert(0%) sepia(20%) saturate(2878%) hue-rotate(317deg) brightness(155%) contrast(110%);
  --filter-icon-form-888-to-temp: invert(10%) sepia(69%) saturate(7450%) hue-rotate(7deg) brightness(75%) contrast(125%);
  --link-color: var(--primary-temp);
  --link-hover-color: var(--primary-temp);
  --nav-color: #888888;
  --nav-font-size: 1.125rem;
  --navbar-padding-y: 0.229rem;
  --nav-link-hover-bg: #fafbfc !important;
  --dropdown-link-hover-bg: #fafbfc !important;
  --gray-200: #fafbfc;
  --gray-400: #ececec;
  --gray-600: #888888;
  --spacer: 15px;
  --spacer-sm: 0.229rem;
  --spacer-15p: 0.938rem;
  --font-sans-serif: sukhumvittadmai-text;
  --font-sans-serif-semibold: sukhumvittadmai-semibold;
  --font-monospace: TrueTextOnline-Regular;
  --font-monospace-bold: TrueTextOnline-Bold;
  --font-monospace-extrabold: TrueTextOnline-ExtraBold;
  --font-monospace-black: TrueTextOnline-Black;
  --body-font-family: var(--font-sans-serif);
  --body-font-size: 1.125rem;
  --body-color: #333333;
  --body-color-gray: #888888;
  --body-color-rgb: 51, 51, 51;
  --body-secondary-color-bg: #f1f2f3;
  --body-third-color-bg: #fafbfc;
  --gray-333: #333333;
  --gray-ccc: #cccccc;
  --gray-f5: #f5f5f5;
  --gray-888: #888888;
  --primary-rgb: 250, 251, 252;
  --border-color: #ececec;
  --border-color-333: #333333;
  --page-header-gray: #f1f2f3;
  --body-bg: #ffffff;
  --form-label-gray: #888888;
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0);
  --icon-gray: var(--gray-ccc);
  --btn-font-size: 1.125rem;
  --btn-profile-font-size: 1.125rem;
  --btn-hover-color: var(--primary-temp);
  --component-active-bg: var(--primary-temp);
  --txt-profile-font-size: 1.25rem;
  --modal-title-color: #000000;
  --modal-header-padding: var(--spacer-1) var(--spacer);
  --modal-color: #333333;
  --modal-font-size: 1.25rem;
  --modal-font-family: var(--font-monospace);
  --success: #93c47d;
  --border-radius: 0.625rem;
  --border-radius-lg: 0.625rem;
  --border-color-translucent: rgba(236, 236, 236, 1);
  --nav-link-font-size: 1rem;
  --box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  --dropdown-link-active-bg: #ffffff;
  --input-disabled-color: #888888;
  --success-rgb: 147, 196, 125;
  --warning-rgb: 242, 201, 76;
  --danger-rgb: 204, 0, 0;
  --component-active-bg: var(--primary-temp);
  --page-padding-x: 20px;
  --page-header-padding-x: var(--page-padding-x);
  --accordion-btn-padding-x: 15px;
  /* --body-line-height-computed: 32px; */
  --modal-bg-gray: #494949;
  --table-group-separator-color: var(--gray-400) !important;
}

*:focus {
  outline: none;
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.page-header {
  --page-header-padding-x: var(--page-padding-x);
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --gutter-x: var(--page-header-padding-x);
}
.content {
  font-family: var(--font-monospace);
  padding: var(--spacer) var(--page-header-padding-x);
}
.content-header {
  font-family: var(--font-monospace);
  padding: 5px var(--page-header-padding-x);
}
.body_secondary_color_bg {
  background-color: var(--body-secondary-color-bg);
}
.body_third_color_bg {
  background-color: var(--body-third-color-bg);
}
.txt_form_888_18 {
  color: #888888;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_333_36_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 36px;
  line-height: 42px;
}
.txt_suk_333_32_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 32px;
  line-height: 38px;
}
.txt_suk_333_24_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 24px;
  line-height: 30px;
}
.txt_suk_333_20_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 20px;
  line-height: 26px;
}
.txt_suk_333_18_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_333_16_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 16px;
  line-height: 22px;
}
.txt_suk_333_14_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 14px;
  line-height: 20px;
}
.txt_suk_333_40 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 40px;
  line-height: 46px;
}
.txt_suk_333_24 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 24px;
  line-height: 30px;
}
.txt_suk_333_20 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 20px;
  line-height: 26px;
}
.txt_suk_333_18 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_333_16 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 16px !important;
  line-height: 22px;
}
.txt_suk_333_14 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 14px !important;
  line-height: 20px;
}
.txt_suk_333_10 {
  font-family: var(--font-sans-serif);
  color: #333;
  font-size: 10px !important;
  line-height: 16px;
}
.txt_suk_888_20 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 20px;
  line-height: 26px;
}
.txt_suk_888_18 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_888_16 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 16px;
  line-height: 22px;
}
.txt_suk_888_14 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 14px;
  line-height: 20px;
}
.txt_suk_888_12 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 12px;
  line-height: 18px;
}
.txt_suk_888_10 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 10px;
  line-height: 16px;
}
.txt_suk_555_14 {
  font-family: var(--font-sans-serif);
  color: #555555;
  font-size: 14px;
  line-height: 20px;
}

.txt_333_32_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 32px;
  line-height: 38px;
}
.txt_333_28_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 28px;
  line-height: 34px;
}
.txt_333_24_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 24px;
  line-height: 30px;
}
.txt_333_20_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 20px;
  line-height: 26px;
}
.txt_333_18_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 18px;
  line-height: 24px;
}
.txt_888_28 {
  font-family: var(--font-monospace);
  color: #888888;
  font-size: 28px;
  line-height: 34px;
}
.txt_888_20 {
  font-family: var(--font-monospace);
  color: #888888;
  font-size: 20px;
  line-height: 26px;
}
.txt_888_18 {
  font-family: var(--font-monospace);
  color: #888888;
  font-size: 18px;
  line-height: 24px;
}
.txt_888_16 {
  font-family: var(--font-monospace);
  color: #888888;
  font-size: 16px;
  line-height: 22px;
}
.txt_888_14 {
  font-family: var(--font-monospace);
  color: #888;
  font-size: 14px;
  line-height: 20px;
}
.txt_333_24 {
  font-family: var(--font-monospace);
  color: #333333;
  font-size: 24px;
  line-height: 30px;
}
.txt_333_20 {
  font-family: var(--font-monospace);
  color: #333;
  font-size: 20px;
  line-height: 26px;
}
.txt_333_18 {
  font-family: var(--font-monospace);
  color: #333;
  font-size: 18px;
  line-height: 24px;
}
.txt_333_14 {
  font-family: var(--font-monospace);
  color: #333;
  font-size: 14px;
  line-height: 20px;
}
.txt_suk_red_18 {
  font-family: var(--font-sans-serif);
  color: #cc0000;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_red_16 {
  font-family: var(--font-sans-serif);
  color: #cc0000;
  font-size: 16px;
  line-height: 22px;
}
.txt_suk_red_14 {
  font-family: var(--font-sans-serif);
  color: #cc0000;
  font-size: 14px;
  line-height: 20px;
}
.txt_suk_red_18_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #cc0000;
  font-size: 18px;
  line-height: 24px;
}
.txt_red {
  /* font-family: var(--font-monospace); */
  color: #cc0000;
}
.txt_yellow {
  font-family: var(--font-monospace);
  color: #eec13f;
}
.txt_red_18 {
  font-family: var(--font-monospace);
  color: #cc0000;
  font-size: 18px;
  line-height: 24px;
}
.txt_red_error {
  color: #cc0000;
}
.h5.txt_suk_temp_32_bold,
h5.txt_suk_temp_32_bold,
.h5.modal-title,
h5.modal-title,
.h5.txt_header_lv2,
h5.txt_header_lv2 {
  font-weight: 400;
}
.txt_suk_temp_32_bold {
  font-family: var(--font-sans-serif-semibold);
  color: var(--primary-temp);
  font-size: 32px;
  line-height: 38px;
}
.txt_suk_temp_24_bold {
  font-family: var(--font-sans-serif-semibold);
  color: var(--primary-temp);
  font-size: 24px;
  line-height: 30px;
}
.txt_suk_temp_20_bold {
  font-family: var(--font-sans-serif-semibold);
  color: var(--primary-temp);
  font-size: 20px;
  line-height: 26px;
}
.txt_temp_32 {
  font-family: var(--font-monospace);
  color: var(--primary-temp);
  font-size: 32px;
  line-height: 38px;
}
.txt_temp_20 {
  font-family: var(--font-monospace);
  color: var(--primary-temp);
  font-size: 20px;
  line-height: 26px;
}
.txt_temp_20.disabled,
.txt_temp_20:disabled {
  font-family: var(--font-monospace);
  color: var(--primary-temp);
  -webkit-text-fill-color: var(--primary-temp) !important;
  font-size: 20px;
  line-height: 26px;
}
.txt_temp_18 {
  font-family: var(--font-monospace);
  color: var(--primary-temp);
  font-size: 18px;
  line-height: 24px;
}
.txt_temp_18.disabled,
.txt_temp_18:disabled {
  font-family: var(--font-monospace);
  color: var(--primary-temp);
  -webkit-text-fill-color: var(--primary-temp) !important;
  font-size: 18px;
  line-height: 24px;
}
.txt_suk_temp_16 {
  font-family: var(--font-sans-serif);
  color: var(--primary-temp);
  font-size: 16px;
  line-height: 22px;
}
.txt_suk_temp_14 {
  font-family: var(--font-sans-serif);
  color: var(--primary-temp);
  font-size: 14px;
  line-height: 20px;
}
.text-white {
  color: #ffffff !important;
}
.text-white .btn-close {
  --btn-close-color: #ffffff;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/var(--btn-close-width) auto no-repeat;
}

.border-bottom-white {
  border-bottom: 1px solid var(--border-color) !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right;
}
.min-w-auto {
  min-width: auto;
}
.min-w-fitcontent {
  min-width: fit-content;
}
.wmin-85,
.min-w-85 {
  min-width: 85px;
}
.wmin-100,
.min-w-100 {
  min-width: 100px !important;
}
.wmin-120,
.min-w-120 {
  min-width: 120px;
}
.wmin-160,
.min-w-160 {
  min-width: 160px;
}
.wmin-200,
.min-w-200 {
  min-width: 200px;
}
.wmin-300,
.min-w-300 {
  min-width: 300px;
}
.min-w-max {
  min-width: max-content;
}
.hmin-60,
.min-h-60 {
  min-height: 60px;
}
.mw-870px,
.max-w-870 {
  max-width: 870px;
}
.mw-60px,
.max-w-60 {
  max-width: 60px;
}
.max-w-100 {
  max-width: 100px;
}
.w-20 {
  width: 20%;
}
.w-40 {
  width: 40%;
}
.w-60 {
  width: 60%;
}
.w-80 {
  width: 80%;
}
.w-20px {
  width: 20px;
}
.w-85px {
  width: 85px;
}
.w-100px {
  width: 100px;
}
.w-120px {
  width: 120px;
}
.w-160px {
  width: 160px;
}
.w-250px {
  width: 250px;
}
.w-300px {
  width: 300px;
}
.mt-2px {
  margin-top: 2px;
}
.navbar {
  padding: var(--navbar-padding-y) var(--navbar-padding-x);
  --navbar-color: var(--nav-color);
  --navbar-padding-y: var(--spacer-sm);
  --navbar-brand-padding-y: var(--spacer-sm);
  --navbar-brand-font-size: var(--nav-font-size);
}
.navbar {
  --navbar-bg: var(--white);
  --navbar-link-padding-y: 0.375rem;
  --navbar-hover-bg: var(--bg-transparent);
  --navbar-hover-bg-icon: var(--gray-f5);
  --navbar-hover-active-bg: var(--bg-transparent);
  --navbar-hover-active-color: var(--primary-temp);
  --navbar-active-bg: rgba(var(--bg-transparent), 0.1);
}
.navbar {
  --navbar-hover-color: var(--primary-temp);
  --navbar-active-color: var(--primary-temp);
  height: 50px;
}
.navbar-brand {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-right: var(--navbar-brand-margin-end);
  font-size: var(--navbar-brand-font-size);
  color: var(--navbar-brand-color);
  white-space: nowrap;
}
.navbar-brand img {
  height: 32px;
}
.navbar-nav-link.bg-icon:focus,
.navbar-nav-link.bg-icon:hover {
  color: var(--navbar-hover-color);
  background-color: var(--navbar-hover-bg-icon);
}
.bg-navbar-footer {
  background: #f3f3f3;
  padding-top: 20px;
}
.bg-navbar-footer a,
.bg-navbar-footer span {
  font-family: var(--font-monospace);
  font-size: 18px;
  color: #555555 !important;
}
.bg-primary {
  background-color: var(--primary-temp) !important;
}
.border_gray {
  border: var(--border-width) var(--border-style) var(--border-color);
}
.dropdown-menu {
  padding: 0px;
  --dropdown-border-color: var(--border-color-translucent);
  --dropdown-font-size: 1rem;
  overflow: auto;
  --dropdown-item-padding-y: calc(var(--spacer) * 0.3);
}
.navbar-nav-link i {
  margin-top: calc((var(--body-line-height-computed) - var(--icon-font-size)) * 0);
  margin-bottom: calc((var(--body-line-height-computed) - var(--icon-font-size)) * 0);
}

a {
  color: var(--body-color);
}

a:hover {
  color: var(--primary-temp) !important;
}

a:hover img {
  filter: brightness(1.1);
}
.right-0 {
  right: 0px;
}
.right-10p {
  right: 10px;
}
.right-15p {
  right: 15px;
}
.gap_10 {
  display: flex;
  gap: 10px;
}
.nav-link {
  font-size: var(--nav-link-font-size);
}
.nav-link:focus,
.nav-link:hover {
  color: var(--primary-temp);
}

.nav-link.nolink:focus,
.nav-link.nolink:hover {
  color: #333333;
  background-color: transparent !important;
}
.sidebar-content .nav-sidebar .nav-link {
  margin: 0 10px;
}
.sidebar-content li.nav-item:first-child {
  margin-top: 10px;
}
.nav-sidebar .nav-link.active {
  background-color: var(--gray-200);
  border-radius: 8px;
}
.nav-group-sub .nav-link {
  padding-left: var(--nav-link-padding-x);
}
.size_popup {
  /* min-height: 260px; */
  max-height: 50vh;
  overflow-y: scroll;
  min-width: 300px;
}
.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll::-webkit-scrollbar {
  display: none;
}
.line-height-1 {
  line-height: 1 !important;
}
.txt_profiledropdown_head {
  font-size: var(--txt-profile-font-size);
  padding: 0 10px;
  line-height: 26px !important;
}
.txt_profiledropdown_title {
  font-size: 1rem;
  font-family: var(--font-sans-serif);
  color: #888;
  padding: 0 10px;
  line-height: 22px !important;
}
.txt_profiledropdown_menu {
  font-size: 1rem;
  line-height: 1.35em !important;
}
.line-height-1-1 {
  line-height: 1.1 !important;
}
.btn {
  --btn-focus-box-shadow: 0 0 0 0rem rgba(var(--btn-focus-shadow-rgb), 0);
  --btn-color: #888888;
}
.btn:hover {
  color: var(--primary-temp);
  background-color: transparent;
  border-color: transparent;
}
.btn_light_border {
  color: var(--body-color);
  background-color: #fff;
  border-radius: 5rem;
  font-size: var(--btn-profile-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--border-color) !important;
  min-width: 120px;
  font-family: var(--font-sans-serif);
}
.btn_light_border.w_80 {
  min-width: 80px;
}
.btn_light_border.w_70 {
  min-width: 70px;
}
.btn_light_border_333 {
  color: var(--body-color);
  background-color: transparent;
  border-radius: 5rem;
  font-size: var(--btn-profile-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--border-color-333) !important;
  min-width: 120px;
  font-family: var(--font-sans-serif);
}
.btn_light_border_333:hover {
  background-color: var(--primary-temp);
  color: #ffffff;
  border: 1px solid var(--primary-temp) !important;
}
.btn_light_border.w_70 {
  min-width: 70px;
}
.btn_light_border_ccc {
  color: #888888;
  background-color: transparent;
  border-radius: 5rem;
  font-size: var(--btn-profile-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid #cccccc !important;
  min-width: 120px;
  font-family: var(--font-sans-serif);
}
.btn_light_border_ccc:hover {
  background-color: var(--primary-temp);
  color: #ffffff;
  border: 1px solid var(--primary-temp) !important;
}
.btn_light_border_333.w_70 {
  min-width: 70px;
}
.btn-icon-ccc {
  color: #cccccc;
}
@media (max-width: 576px) {
  #dropdownBirthdate .btn_light_border {
    min-width: 110px;
  }
}
.btn-primary {
  --btn-color: var(--primary-temp);
  --btn-bg: #fff;
  --btn-border-color: var(--primary-temp);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--primary-temp);
  --btn-hover-border-color: var(--primary-temp);
  --btn-focus-shadow-rgb: 48, 150, 255;
  --btn-active-color: #fff;
  --btn-active-bg: var(--primary-temp);
  --btn-active-border-color: #0a6fd9;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: var(--primary-temp);
  --btn-disabled-border-color: var(--primary-temp);
  border-radius: 5rem;
  font-size: var(--btn-font-size);
}
.btn_main_border {
  color: var(--primary-temp);
  background-color: #fff;
  border-radius: 5rem;
  font-size: var(--btn-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--primary-temp) !important;
  min-width: 100px;
}
.btn_main_temp {
  color: #fff;
  background-color: var(--primary-temp);
  border-radius: 5rem;
  font-size: var(--btn-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--primary-temp) !important;
  min-width: 140px;
  font-family: var(--font-sans-serif);
}
.btn_dark_hover:hover,
.btn_gray_hover:hover,
.btn_w_red:hover,
.btn_main_border:hover,
.btn_light_border:hover {
  background-color: var(--primary-temp);
  color: #ffffff !important;
  border: 1px solid var(--primary-temp);
}
.btn_main_temp:hover {
  background-color: #fff;
  color: var(--primary-temp) !important;
  border: 1px solid var(--primary-temp);
}
.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: #888888;
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: #888888;
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #fff;
  --btn-active-bg: #888888;
  --btn-active-border-color: #888888;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: #888888;
}
.btn-to-top-visible {
  visibility: visible;
  opacity: 0.75;
}
.dropdown-item {
  font-family: var(--font-sans-serif);
}
.dropdown-item.txt_suk_333_16_bold {
  font-family: var(--font-sans-serif-semibold);
}
.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--primary-temp);
  background-color: var(--dropdown-link-hover-bg);
}
.sidebar {
  --sidebar-section-padding-y: 0.313rem;
  --sidebar-section-padding-x: 0.938rem;
  --sidebar-width: 14.95rem;
}

@media (min-width: 992px) {
  .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) {
    --sidebar-width: calc(var(--spacer) * 2 + var(--icon-font-size));
    --sidebar-section-padding-x: 0.5rem; /*0.75*/
    overflow: hidden;
  }
}
.nav-sidebar .nav-item:not(.nav-item-header):first-child {
  /* padding-top: 0.625rem; */
  padding-top: 0rem;
}
.nav-sidebar .nav-item:not(.nav-item-header):last-child {
  padding-bottom: 0;
}
.nav-sidebar .nav-item:not(.nav-item-divider):not(:last-child) {
  margin-bottom: 0;
}
.nav-sidebar .nav-item-divider {
  background-color: var(--border-color);
  margin: 0;
}
.nav-sidebar {
  --nav-link-padding-y: 0.225rem;
  --nav-link-padding-x: 0.358rem; /*1.29 0.968 0.658*/
  margin: 5px 10px;
  padding-bottom: 10px;
}

@media (min-width: 992px) {
  .nav-sidebar {
    --nav-link-padding-y: 0.225rem; /*0.325rem*/
    --nav-link-padding-x: 0.358rem; /*1.29 0.968 0.658*/
    margin: 5px 10px;
  }
  .nav-group-sub {
    --nav-link-padding-y: 0.325rem;
  }
}

.nav-sidebar .nav-link img {
  margin-right: var(--nav-link-padding-x);
  /* min-height: 28.29px; */
}
.nav-sidebar .nav-link svg {
  margin-right: var(--nav-link-padding-x);
  min-height: 28.29px;
}
.nav-sidebar .nav-link span {
  margin-left: 5px;
}

/* .sidebar-section .nav-sidebar .nav-link img,
.sidebar-section .nav-sidebar .nav-link svg {
  margin-right: var(--nav-link-padding-x);
  min-height: 28.29px;
  margin-top: 0px;
} */

.sidebar-section-body {
  position: relative;
  padding: var(--sidebar-section-padding-y) var(--sidebar-section-padding-x);
}
.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed).sidebar-main-unfold {
  --sidebar-box-shadow: 0.25rem 0 1rem rgba(var(--black-rgb), 0.05);
}
#sidebar .nav-link span {
  line-height: 1.75;
}
.nav-link:hover img,
.sidebar-main-toggle:hover img,
.nav-link.active img,
.toggle-icon:hover,
.nav-li.active {
  /* filter: var(--filter-leftmenu-icon-form-333-to-temp); */
  fill: var(--primary-temp);
}
.ic_hover:hover {
  /* filter: var(--filter-icon-form-888-to-temp); */
  fill: var(--primary-temp);
}
.ic_hover_gray {
  color: var(--gray-888);
}
.ic_hover_gray:hover {
  fill: var(--primary-temp);
}
.ic_hover_gray_ccc {
  color: var(--gray-ccc);
  fill: var(--gray-ccc);
}
a.ic_hover_gray_ccc .card-icon-task,
.ic_hover_gray_ccc .card-icon-task {
  color: var(--gray-ccc);
}
a:hover.ic_hover_gray_ccc .card-icon-task,
.ic_hover_gray_ccc:hover .card-icon-task {
  color: var(--primary-temp);
}
.ic_hover_gray_ccc:hover {
  fill: var(--primary-temp);
}
.ic_hover_gray_333 {
  color: var(--gray-333);
  fill: var(--gray-333);
}
a.ic_hover_gray_333 .card-icon-task {
  color: var(--gray-333);
}
a:hover.ic_hover_gray_333 .card-icon-task {
  color: var(--primary-temp);
}
.ic_hover_gray_333:hover {
  fill: var(--primary-temp);
}

.ic_hover_gray_ccc span {
  color: var(--gray-333);
}
.ic_hover_gray_ccc:hover span,
.ic_hover_gray_ccc span:hover,
a:hover .ic_hover_gray_ccc span {
  fill: var(--primary-temp);
  color: var(--primary-temp);
}
.ic_hover_gray .txt_leavelesson {
  color: #333333;
}
.ic_hover_gray:hover .txt_leavelesson {
  color: var(--primary-temp);
}
.ic_template {
  color: var(--primary-temp);
}

.txt_header {
  /* font-family: var(--font-sans-serif-semibold);
  font-size: 2.25rem;
  color: var(--body-color);
  color: var(--primary-temp);
  font-style: var(); */
  font-family: var(--font-sans-serif-semibold);
  color: var(--primary-temp);
  font-size: 32px;
  line-height: 38px;
}
.txt_header_lv2 {
  font-family: var(--font-sans-serif-semibold);
  font-size: 1.5rem;
  color: var(--body-color);
}
.txt_label_gray {
  color: var(--form-label-gray);
  font-family: var(--font-sans-serif);
  font-size: var(--body-font-size);
}
.txt_body_grey,
.txt_body_gray {
  color: var(--body-color-gray);
  font-family: var(--font-monospace);
  font-size: var(--body-font-size);
}
.page-header-gray {
  background-color: var(--page-header-gray);
}
.txt_changelang {
  font-family: var(--font-sans-serif);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
  white-space: normal;
  word-break: break-word;
  text-align: left;
}
.txt_termcond {
  font-family: var(--font-sans-serif);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}
.txt_gray_sm {
  font-family: var(--font-monospace);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}
.txt_termcond:hover {
  color: var(--primary-temp);
}
.txt_profile_version {
  font-family: var(--font-sans-serif-semibold);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}
.nav-sidebar .nav-link:focus,
.nav-sidebar .nav-link:hover {
  background-color: var(--nav-link-hover-bg);
}
.nav-link.active span {
  color: var(--link-color) !important;
}

/* TAB */
.cd-tabs ol,
.cd-tabs ul,
.cd-tabs_navigation li {
  list-style: none;
}

a.tabs-link {
  color: #000;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  border-bottom: 0px solid transparent;
  border: 1px solid #ececec;
  border-radius: var(--border-radius-pill) !important;
}
.cd-tabs_navigation a {
  font-family: var(--font-sans-serif);
  position: relative;
  display: block;
  height: 35px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  /* width: 115px; */
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  line-height: 25px;
  padding: 1.167em 0;
}
.cd-tabs_navigation a:hover,
.cd-tabs_navigation a.active {
  color: var(--primary-temp);
}
.tabs-link {
  padding: 0rem;
}

a.tabs-link:hover,
a.tabs-link.active {
  color: #ffffff !important;
  text-decoration: none;
  background-color: var(--primary-temp);
  -webkit-text-decoration-skip: objects;
  opacity: 1;
  border-bottom: 0px solid;
  border-radius: var(--border-radius-pill) !important;
  border: 1px solid var(--primary-temp);
}
.cd-tabs_navigation li a {
  /* border-right: 0px solid #eee; */
  white-space: nowrap;
}

/* hide scrollbar */
.cd-tabs_navigation,
.hide_scrollbar {
  background-color: transparent;
  overflow-y: scroll;
}
.cd-tabs_navigation::-webkit-scrollbar,
.hide_scrollbar::-webkit-scrollbar {
  display: none;
}
.cd-tabs_navigation,
.hide_scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none !important;
}

/* /.hide scrollbar */

.cd-tabs_navigation {
  padding-left: 0rem;
}

/* /.TAB */
.form-control {
  font-size: 18px;
  line-height: 30px;
  border-radius: 8px;
  --input-border-color: var(--border-color);
  /* font-family: var(--font-monospace); */
  font-family: var(--font-sans-serif);
  --input-placeholder-color: var(--gray-600);
  --input-focus-bg: var(--white);
  color: #333333;
  height: auto;
  --input-padding-y: 0.35rem;
  padding: 6.35px 26px 2.35px 14px;
}
[class*=" icon-"],
[class^="icon-"] {
  top: 0px !important;
}
.form-control:focus {
  border-color: var(--border-color);
}
.form-control[readonly]:focus {
  border-color: var(--border-color);
}
/* .form-control::placeholder {
  font-size: 20px;
  line-height: 10 !important;
}
::placeholder {
  font-size: 20px;
  line-height: 10 !important;
} */
.input_search_grey,
.input_search_gray {
  height: 40px !important;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  border-radius: 20px;
  font-family: "TrueTextOnline-regular";
  font-size: 18px;
  line-height: 25px;
  display: flex;
  align-items: center;
  color: #888888;
  width: 100%;
}

textarea,
textarea.form-control,
input.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
[type="text"].form-control,
[type="password"].form-control,
[type="email"].form-control,
[type="tel"].form-control,
[contenteditable].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
.arr_none .dropdown-toggle::after,
.arr_none.dropdown-toggle::after {
  display: none !important;
}
.dropdown-toggle.arrow_none::after {
  display: none !important;
}
.form_mutiselect.arr_none .multiselect:after {
  display: none;
}
.form_mutiselect #multiselect-reset-form {
  line-height: 1;
}
.mw_auto {
  min-width: auto;
  max-width: auto;
}
.addtemp_color {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

@media (max-width: 991.98px) {
  .p-header-content {
    padding-left: 0px;
    padding-right: 0px;
  }

  .p-header-show {
    padding: 0 var(--page-header-padding-x);
  }

  .cd-tabs_navigation li:first-child {
    margin-left: 20px;
  }
  .cd-tabs_navigation li:last-child {
    margin-right: 20px;
  }
}
.nav-sidebar .nav-link:focus,
.nav-sidebar .nav-link:hover {
  background-color: var(--gray-200);
  border-radius: 8px;
}
.ic_search,
.ic_cross {
  color: var(--icon-gray);
}
.input-group-text-search-border {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.1375rem 0 0.1375rem 0.875rem;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5385;
  color: #000;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 0px solid #ddd;
  border-radius: 10px;
}
.nav-sidebar .input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5385;
  color: #000;
  text-align: center;
  white-space: nowrap;
  background-color: #ffffff;
  border: 0px solid #ddd;
  border-radius: 10px;
}
.modal-title {
  font-size: 20px;
  font-family: var(--font-sans-serif-semibold);
  color: var(--modal-title-color);
}
.modal-body.no-padding-bottom {
  padding-bottom: 5px !important;
}
.btn-close {
  --btn-close-color: #888888;
  --btn-close-width: 0.875em;
  --btn-close-height: 0.875em;
  --btn-close-opacity: 0.45;
  background: transparent
    url(
      data:image/svg + xml,
      %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="-2 -2 20 20"fill="%23000"%3e%3cpathd="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"/%3e%3c/svg%3e
    )
    center / var(--btn-close-width) auto no-repeat;
}
.btn-close:hover {
  color: var(--primary-temp);
  fill: var(--primary-temp);
  --btn-close-color: var(--primary-temp);
  color: var(--btn-close-color);
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='%2314ae5c'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/var(--btn-close-width) auto no-repeat;
}
.modal {
  --modal-header-padding-x: var(--spacer);
  --modal-header-padding-y: var(--spacer-1);
  --modal-header-padding: var(--spacer-1) var(--spacer);
  --modal-padding: var(--spacer);
  --modal-header-border-width: 0px;
  --modal-footer-border-width: 0px;
}
.modal-header {
  padding: var(--modal-header-padding);
  border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
}
.modal-footer {
  -ms-flex-pack: center;
  justify-content: center;
  padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5);
  border-top: var(--modal-footer-border-width) solid var(--modal-footer-border-color);
  padding-bottom: 15px;
}

@media (min-width: 768px) {
  .custom-scrollbars * {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-ccc) var(--gray-f5);
  }
}
.txt-modal-content {
  font-family: var(--modal-font-family);
  font-size: var(--modal-font-size);
  color: var(--modal-color);
}
.txt-modal-content-header {
  font-family: var(--font-sans-serif-semibold);
  font-size: var(--modal-font-size);
  color: var(--modal-color);
}
.badge {
  font-family: var(--font-monospace);
}
.btn-link:hover {
  color: var(--btn-hover-color);
}
.block_ellipsis_1 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block_ellipsis_2 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block_ellipsis_2_m3 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 576px) {
  .block_ellipsis_2_m3 {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.block_ellipsis_7 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card_incard {
  padding: 10px 15px !important;
  width: 100%;
  height: 100%;
}
.card_incar_y5 {
  padding: 5px 15px !important;
  width: 100%;
  height: 100%;
}
.card_incard.pe-5 {
  padding-right: 3.75rem !important;
}
.card_border {
  box-sizing: border-box;
  padding: 0px;
  margin-bottom: 0px;
  margin-bottom: 0px !important;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
  border-radius: 10px;
}
.card_shadow {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.border_grey_ec,
.border_gray_ec {
  border: 1px solid #ececec;
}

/* New Filter */
.txt_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 600px) {
  .hide-mobile {
    display: none;
  }
}
.text-muted {
  color: var(--icon-gray) !important;
}
.form_mutiselect .multiselect-container {
  min-width: 350px;
}
.form-check {
  font-size: 16px;
  line-height: 1.4;
}
.multiselect-all {
  font-weight: 400;
}
.form_mutiselect .filter-groups-bullets {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  font-size: 12px;
  line-height: 18px;
  background-color: var(--primary-temp);
  color: #fff;
}
.txt_title_form_888_18 {
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
  color: #888888;
}
.txt_title_form_888_16 {
  font-family: var(--font-sans-serif);
  font-size: 16px;
  line-height: 22px;
  color: #888888;
}
.hide-mobile .form_mutiselect .multiselect {
  padding-left: 0px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 0px;
  cursor: pointer;
}
.form_mutiselect .multiselect:after {
  right: 0px;
  color: #888888;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.25em;
  vertical-align: -0.125em;
  font-family: var(--icon-font-family);
  font-size: 0.7em;
  line-height: 1;
  content: "\f31a";
}
.form_mutiselect .multiselect .multiselect-selected-text {
  margin-left: 5px;
}
.multiselect-filter .form-control {
  padding-left: 2.5625rem;
}
.multiselect-filter {
  margin-bottom: 0px;
  padding-top: 20px;
}
.form_mutiselect .multiselect-container {
  max-height: 280px;
  overflow-y: auto;
  width: 100%;
}
.form_mutiselect .dropdown-menu {
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1010;
  padding-bottom: 10px;
}
.form_mutiselect .dropdown-menu::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.form_mutiselect .dropdown-menu::-webkit-scrollbar-button {
  display: none;
  background: #888;
}
.form_mutiselect .dropdown-menu::-webkit-scrollbar-track-piece {
  background: #ccc;
}
.form_mutiselect .dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
}
.form_mutiselect .multiselect-filter {
  position: sticky;
  padding: 15px 15px 15px 15px;
  margin-bottom: 0rem;
  width: 100%;
  z-index: 2009;
  top: 0;
  left: 0;
  background-color: #fff;
}
.ui_cropper .btn-light {
  --btn-active-color: var(--body-color-gray);
  --btn-bg: #ffffff;
  --btn-border-color: var(--border-color);
  border-color: var(--border-color);
}
.ui_cropper .btn-light:hover {
  border-color: var(--border-color);
}
.ui_cropper .btn-light.active {
  color: var(--primary-temp);
  background-color: transparent;
  border-color: var(--border-color);
}
.form_mutiselect .btn-light {
  --btn-color: #888888;
  --btn-bg: #ffffff;
  --btn-border-color: var(--border-color);
  --btn-hover-color: var(--primary-temp);
  --btn-hover-bg: #ffffff;
  --btn-hover-border-color: var(--gray-500);
  --btn-focus-shadow-rgb: 207, 207, 209;
  --btn-active-color: var(--body-color);
  --btn-active-bg: #ffffff;
  --btn-active-border-color: var(--border-color);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: var(--body-color);
  --btn-disabled-bg: #ffffff;
  --btn-disabled-border-color: var(--border-color);
  border-left: 2px solid #fff;
}
.form_mutiselect .btn:hover {
  color: var(--primary-temp) !important;
  background-color: transparent;
  border-color: var(--border-color);
  border-left: #fff;
}
.form_mutiselect .btn:focus-visible,
.form_mutiselect .btn:focus-within {
  color: var(--primary-temp) !important;
  background-color: transparent;
  border-color: var(--border-color);
  outline: 0;
  box-shadow: var(--btn-box-shadow), var(--btn-focus-box-shadow);
  border-left: #fff;
}
.multiselect-native-select {
  --multiselect-bg: transparent;
  background-color: transparent !important;
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--primary-temp);
  text-decoration: none;
  background-color: var(--dropdown-link-active-bg);
}
.dropdown-menu {
  --dropdown-link-active-bg: var(--gray-200);
}
.dropdown-menu.w-100 {
  max-width: 100%;
}
.form_mutiselect .btn-link {
  border: 0px;
  --btn-padding-y: 0rem;
}
.form_mutiselect .dropdown-item {
  white-space: inherit;
}
/* /New Filter */

.bg_transparent.card_hover:hover {
  background-color: #fafafa !important;
  filter: brightness(98%) !important;
  cursor: pointer;
}
.card_hover:hover {
  background-color: var(--gray-200);
  cursor: pointer;
}
/* .form-select {
  --form-select-padding-y: 0.4585rem;
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 20px;
  --form-select-line-height: 24px;
  background-image: url(../../assets/images/main/ic_arr_down.svg);
  font-size: var(--form-select-font-size);
  --form-select-bg-position: right 0.575rem center;
  --form-select-indicator-padding: 1.625rem;
  cursor: pointer;
} */
.form-select {
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 18px;
  --form-select-line-height: 30px;
  background-image: url(../../assets/images/main/ic_arr_down.svg);
  font-size: var(--form-select-font-size);
  --form-select-bg-position: right 0.575rem center;
  --form-select-indicator-padding: 1.625rem;
  cursor: pointer;
  padding: 6.35px 26px 2.35px 14px;
  font-family: var(--font-sans-serif);
}
.form-select:focus {
  border-color: var(--border-color);
}
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  --form-select-padding-y: 0.4585rem;
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 18px;
  --form-select-line-height: 24px;
  background-image: url(../../assets/images/main/ic_arr_down.svg);
  font-size: var(--form-select-font-size);
  --form-select-bg-position: right 0.575rem center;
  --form-select-indicator-padding: 1.625rem;
  cursor: pointer;
}
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  padding-right: 1.625rem;
}
.form-control {
  --input-disabled-bg: #f4f4f4;
  cursor: pointer;
}
.form-control:disabled {
  color: var(--input-disabled-color) !important;
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border-color);
  opacity: 1;
  cursor: default;
}
/* input.form-control:disabled {
  color: var(--input-disabled-color) !important;
  -webkit-text-fill-color: var(
    --input-disabled-color
  ) !important; 
  opacity: 1;
} */
.form-check-input:focus {
  border-color: var(--gray-888);
}
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label a {
  --form-validation-color: #cc0000;
  color: var(--form-validation-color);
}
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.25);
  --component-active-bg: #cc0000;
  border-color: var(--component-active-bg);
}
/* Login page */
.txt_login_head {
  font-family: var(--font-sans-serif-semibold);
  font-size: 32px;
  line-height: 38px;
  color: var(--primary-temp);
}
.btn_login_social {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-family: var(--font-monospace);
  font-size: 20px;
  line-height: 22.67px;
  color: #333333;
  /* height: 3rem; */
}
.btn_login_social:hover {
  background-color: #ffffff;
  color: var(--primary-temp);
  border: 1px solid var(--primary-temp);
}
.left-0 {
  left: 0;
}
.txt_grey,
.txt_gray {
  color: var(--gray-ccc) !important;
}
.input-group-text {
  background-color: #ffffff;
  border-left: var(--input-group-addon-border-width) solid #ffffff;
  border: var(--input-group-addon-border-width) solid var(--border-color);
}
.input-group-text.is-invalid,
label.is-invalid {
  background-color: #ffffff;
  border-left: var(--input-group-addon-border-width) solid #ffffff;
  border: var(--input-group-addon-border-width) solid #cc0000;
}
.input-group .form-control.is-invalid {
  border-right: 0 solid #ffffff;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none;
  padding-right: var(--input-padding-x) !important;
}
.input-group .input-group-text {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.input-group .form-control {
  border-right: var(--input-group-addon-border-width) solid #ffffff;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  --form-validation-border-color: #cc0000;
  --form-validation-focus-box-shadow: 0 0 0 0rem rgba(239, 68, 68, 0);
  border-color: var(--form-validation-border-color);
  padding-right: calc(calc(var(--input-line-height) * 1em) + calc(var(--input-padding-y) * 2));
  background-image: url(
    data:image/svg + xml,
    %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 12 12"width="12"height="12"fill="none"stroke="%23EF4444"%3e%3ccirclecx="6"cy="6"r="4.5"/%3e%3cpathstroke-linejoin="round"d="M5.8 3.6h.4L6 6.5z"/%3e%3ccirclecx="6"cy="8.2"r=".6"fill="%23EF4444"stroke="none"/%3e%3c/svg%3e
  );
  background-repeat: no-repeat;
  background-position: right calc(calc(var(--input-line-height) * 0.25em) + calc(var(--input-padding-y) * 0.5)) center;
  background-size: calc(calc(var(--input-line-height) * 0.5em) + var(--input-padding-y)) calc(calc(var(--input-line-height) * 0.5em) + var(--input-padding-y));
}
.form-control:read-only.is-invalid {
  border-color: #cc0000;
}
.txt_login_termcond {
  color: var(--gray-888);
  font-family: var(--font-sans-serif);
  font-size: 16px;
}
.card_login {
  --card-border-width: 0px;
  --box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
  border-radius: 20px;
  border: 0px solid var(--card-border-color);
  --card-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0), var(--box-shadow);
  height: fit-content !important;
}
.language_footer_div img {
  filter: invert(64%) sepia(1%) saturate(0%) hue-rotate(208deg) brightness(96%) contrast(85%);
}
.language_footer_div:hover img {
  filter: invert(30%) sepia(50%) saturate(2500%) hue-rotate(100deg) brightness(90%) contrast(95%);
}
.form-check-input {
  --form-check-input-border: calc(var(--border-width) * 1) solid var(--gray-888);
}
@media (min-width: 576px) {
  .confirm-form {
    width: 50rem;
  }
}
/* /Login page */

.profile-container {
  position: relative;
  display: inline-block;
}

.profile-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50% !important;
}

.hover-text {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(217, 217, 217, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 18px;
  text-align: center;
  font-family: var(--font-monospace);
  cursor: pointer;
}

.profile-container:hover .hover-text {
  opacity: 1;
  color: white;
}

.file-input {
  display: none; /* ซ่อน input file เพราะเราจะเปิดมันด้วย JavaScript */
}
/* Date Picker */
.datepicker-dropdown {
  z-index: 1060;
}
.datepicker {
  --dp-bg: var(--white);
  --dp-border-width: var(--border-width);
  --dp-border-color: var(--border-color-translucent);
  --dp-box-shadow: var(--box-shadow-lg);
  --dp-border-radius: var(--border-radius);
  --dp-item-border-radius: 50%;
  --dp-item-hover-bg: var(--primary-temp);
  --dp-item-hover-color: #ffffff;
  --dp-item-active-bg: var(--primary-temp);
  --dp-item-active-color: var(--white);
  --dp-item-weekday-color: var(--gray-600);
  --dp-item-focusout-color: var(--gray-500);
}
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  background-color: var(--dp-item-active-bg);
  color: var(--dp-item-active-color);
}
.datepicker-cell.focused:not(.selected) {
  background-color: var(--dp-item-hover-bg);
  color: var(--dp-item-hover-color);
}

/* /Date Picker */

/* Card */
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: var(--card-spacer-y) var(--card-spacer-x);
  color: var(--card-color);
  padding-bottom: 0px;
}
.card {
  --card-spacer-y: var(--spacer-2);
  --card-spacer-x: var(--spacer-15p);
  --card-cap-padding-y: calc(var(--spacer) * 0.75);
  --card-cap-padding-x: var(--spacer-15p);
  --card-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.075), var(--box-shadow);
  --card-border-color: #ececec;
  border: 1px solid var(--card-border-color);
  word-break: break-word;
}
.card-img-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  overflow: hidden;
  /* background-color: #cccccc; */ /* มีปัญหากับ home page*/
}
.card-img-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This will crop the image while preserving its aspect ratio */
}
.card-trash {
  position: relative;
}
.ic_trash_incard {
  display: flex;
}
.card-title {
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 22px;
  color: var(--gray-333);
  margin-bottom: 0px;
  word-break: break-word;
}
.card_hover:hover .card-title {
  color: var(--primary-temp);
}
.card-speaker {
  font-family: var(--font-monospace);
  font-size: 16px;
  line-height: 17.6px;
  color: var(--gray-888);
}
.card-price {
  font-family: var(--font-monospace-bold);
  font-size: 18px;
  line-height: 19.8px;
  color: var(--gray-333);
}
.card-full-price {
  font-family: var(--font-monospace);
  font-size: 14px;
  line-height: 15.4px;
  color: var(--gray-888);
  text-decoration: line-through;
}
.text-vote {
  font-family: var(--font-monospace);
  font-size: 16px;
  line-height: 17.6px;
  color: var(--gray-888);
}
.card-footer {
  --card-cap-bg: transparent;
  border-top: 0px;
  padding-top: 0px;
}
.card-footer-gray {
  font-family: var(--font-monospace);
  font-size: 14px;
  line-height: 15.4px;
  color: var(--gray-888);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1;
}

.card-footer {
  /* Ensure footer is at the bottom */
  margin-top: auto;
}
.card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none; /* Remove underline from the link */
  color: inherit; /* Ensure text color is inherited from parent */
}
.icon_size .fa,
.icon_size .fab,
.icon_size .fal,
.icon_size .far,
.icon_size .fas {
  font-size: 0.625rem;
}
.progress {
  --progress-bg: #f1f2f3;
}

.card_horizontal_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin-bottom: 0px;
}
.card_horizontal_card .card-body {
  padding: 10px 15px 15px 15px;
  flex: 1;
}
.card_horizontal_card .card-img-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card_horizontal_card .custom-circle {
  width: 100px;
  height: 100px;
}
.card_horizontal_card .custom-circle span {
  font-size: 60px !important;
}

.card.card_horizontal,
.card.card_horizontal_row {
  display: flex;
  flex-direction: row; /* แนวนอน */
  height: 100%;
  border-radius: 10px; /* ให้เป็นรูปแบบแคปซูล */
  overflow: hidden;
}

.card_horizontal .card-link,
.card_horizontal_row .card-link {
  display: flex;
  flex-direction: row; /* จัดเรียงในแนวนอน */
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.card_horizontal .card-img-container,
.card_horizontal_row .card-img-container {
  flex: 0 0 158px; /* กำหนดความกว้างที่ต้องการ 16:9 */
  /* height: 70px; กำหนดความสูงที่ต้องการ */
  overflow: hidden; /* ซ่อนส่วนที่เกินออกมา */
  position: relative;
  width: 100%;
  padding-top: 0%;
}

.h_74p.card_horizontal .card-img-container,
.h_74p.card_horizontal_row .card-img-container {
  flex: 0 0 132px; /* กำหนดความกว้างที่ต้องการ 16:9 */
  /* height: 70px; กำหนดความสูงที่ต้องการ */
  overflow: hidden; /* ซ่อนส่วนที่เกินออกมา */
  position: relative;
  width: 100%;
  padding-top: 0%;
}

.card_horizontal .card-vdo-container,
.card_horizontal_row .card-vdo-container {
  flex: 0 0 90px;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-top: 0%;
}

.mh_65px {
  min-height: 65px;
}
.mh_89px {
  min-height: 89px;
}

.card_horizontal .card-img-top,
.card_horizontal_row .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ครอบตัดภาพให้พอดี container */
  object-position: center; /* จัดตำแหน่งให้อยู่ตรงกลาง */
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.card_horizontal .card-body,
.card_horizontal_row .card-body {
  padding: 10px 15px 0 15px;
  flex: 1;
}

.card_horizontal .card-footer,
.card_horizontal_row .card-footer {
  margin-top: auto;
}

.card_horizontal .icon-container,
.card_horizontal_row .icon-container {
  position: absolute !important;
  right: 15px;
  top: 50% !important;
  transform: translateY(-50%);
}
.card_horizontal_row .card-icon-task {
  position: relative;
  width: 100%; /* ให้รูปขยายเต็มความกว้างของ container */
  padding-top: 56.25%;
  overflow: hidden;
  height: auto; /* ปรับอัตราส่วนตามเนื้อหา */
  background-color: #fafafa;
}
.card_horizontal_row .card-icon-task {
  flex: 0 0 90px;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-top: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon_task_size {
  width: 30px;
  height: 30px;
}

@media (max-width: 576px) {
  .card_h_auto .card.card_horizontal {
    display: flex;
    flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
    height: auto;
  }
  .card_h_auto .card_horizontal .card-body,
  .card_h_auto .card_horizontal_row .card-body {
    padding: 10px 15px 10px 15px;
    flex: 1;
  }
  .card_horizontal .card-link {
    display: flex;
    flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
    text-decoration: none;
    color: inherit;
  }
  .card_horizontal .card-img-container {
    position: relative;
    width: 100%; /* ให้รูปขยายเต็มความกว้างของ container */
    padding-top: 56.25%;
    overflow: hidden;
    height: auto; /* ปรับอัตราส่วนตามเนื้อหา */
  }
  .h_74p.card_horizontal .card-img-container {
    position: relative;
    width: 100%; /* ให้รูปขยายเต็มความกว้างของ container */
    padding-top: 56.25%;
    overflow: hidden;
    height: auto; /* ปรับอัตราส่วนตามเนื้อหา */
  }
  .card_horizontal .card-vdo-container {
    position: relative;
    width: 100%; /* ให้รูปขยายเต็มความกว้างของ container */
    padding-top: 56.25%;
    overflow: hidden;
    height: auto; /* ปรับอัตราส่วนตามเนื้อหา */
    background-color: #ececec;
  }
  .card_horizontal .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ยังคงครอบตัดรูปตามความจำเป็น */
  }
  .card_horizontal .card-body {
    flex: 1;
  }
  .card_horizontal .icon-container {
    position: absolute !important;
    right: 15px;
    top: 20px !important;
    transform: translateY(-50%);
  }
}
/* /Card */
/* Course */
.sidebar:not(.sidebar-collapsed).course_page {
  --sidebar-section-padding-y: 0rem;
  --sidebar-section-padding-x: 1.25rem;
  --sidebar-width: 22.5rem;
}
.nav-sidebar .nav-link.bg_gray {
  background-color: #fafafa;
}
.bg_gray {
  background-color: #fafafa;
}
.bg_gray_333 {
  background-color: #333333;
}
.bg_gray_ccc {
  background-color: #cccccc;
}
.bg_gray_f1f2f3 {
  background-color: #f1f2f3 !important;
}
.course_page .nav-sidebar {
  --nav-link-padding-y: 0.465rem;
  --nav-link-padding-x: 1.29rem;
}
.course_page .sidebar-section .nav-sidebar .nav-link {
  padding-right: 40px;
  font-size: 18px;
}
.course_page .sidebar-section .nav-sidebar .nav-link.p_progress {
  padding-right: var(--nav-link-padding-x);
  font-size: 18px;
}
.course_page .sidebar-section .nav-sidebar .nav-item-submenu .nav-link {
  padding-right: 60px;
}
.course_page .py-submenu {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.course_page .py-submenu:focus span,
.course_page .py-submenu:hover span {
  color: var(--primary-temp);
}
.course_page .nav-sidebar .nav-item-open > .nav-link:not(.disabled):not(:active),
.course_page .nav-sidebar > .nav-item-expanded > .nav-link:not(:active) {
  background-color: transparent;
}
.course_page .nav-sidebar .nav-link:focus,
.course_page .nav-sidebar .nav-link:hover {
  background-color: transparent;
}
.course_page .nav-sidebar .nav-link.active {
  background-color: transparent;
}
.course_page .sidebar-content {
  padding-bottom: 20px;
}
.course_page .nav-item .nav-link,
.course_page .nav-item .nav-link a {
  width: 100%;
}
.course_page .nav-link {
  display: flex;
  align-items: center;
}
.course_page .icon_position_left {
  margin-top: 0px;
}
.course_page .icon_position {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  margin: 0 var(--nav-link-padding-x);
  z-index: 100;
}
.course_page .icon_position_lv2 {
  position: absolute;
  top: 10px;
  right: 20px;
  margin: 0 var(--nav-link-padding-x);
}
.course_page .nav-sidebar .nav-link.bg_gray {
  background-color: #fafafa;
}
@media (min-width: 992px) {
  .course_page .nav-sidebar {
    --nav-link-padding-y: 0.465rem;
    --nav-link-padding-x: 1.29rem;
  }
  .course_page .nav-group-sub {
    --nav-link-padding-y: 0.465rem;
  }
}

@media (min-width: 992px) {
  .course_page.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) {
    --sidebar-width: 0px;
    --sidebar-section-padding-x: 0rem;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .course_page.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed) + * {
    margin-left: 0px;
  }
}
.course_page .sidebar-content .nav-sidebar .nav-link {
  margin: 0 0px;
}

.pane_collapse {
  position: absolute;
  top: 3px;
  left: 15px;
  z-index: 10; /*left menu : 1040*/
}
.p_arr_back {
  padding: 7.438px 0px;
}
.temp-image {
  width: 146px;
  height: 82px;
  object-fit: cover;
  border-radius: 10px !important;
}
.temp-image:hover {
  cursor: pointer;
}
.temp-hover-text {
  position: absolute;
  top: 50%; /* กำหนดให้ปุ่มอยู่ตรงกึ่งกลางแนวตั้ง */
  left: 50%; /* กำหนดให้ปุ่มอยู่ตรงกึ่งกลางแนวนอน */
  transform: translate(-50%, -50%); /* ปรับตำแหน่งให้ปุ่มอยู่ตรงกลางสมบูรณ์ */
  width: 50px;
  height: 50px;
  background-color: rgba(217, 217, 217, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 18px;
  text-align: center;
  font-family: var(--font-monospace);
  cursor: pointer;
}
.profile-container:hover .temp-hover-text {
  opacity: 1;
  color: white;
}

.button-container {
  display: flex;
  flex-wrap: wrap; /* ทำให้ปุ่มขึ้นบรรทัดใหม่หากเกินขนาดคอนเทนเนอร์ */
  gap: 10px; /* ระยะห่างระหว่างปุ่ม */
}

.plus-button,
.name-button {
  height: 40px;
  border: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0 10px; /* เผื่อพื้นที่ข้างในปุ่ม */
  border-radius: 20px;
  max-width: 100%;
}
.name-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plus-button {
  width: 40px; /* กำหนดขนาดปุ่มที่มีไอคอนบวก */
}

.plus-button img {
  width: 16px;
  height: 16px;
}

.plus-button,
.name-button {
  color: var(--gray-888);
}

.plus-button:hover,
.name-button:hover {
  background-color: #fafbfc;
  color: var(--primary-temp);
}

.name-button {
  padding: 0 20px;
}
.name-button:hover span {
  color: var(--primary-temp);
}
.custom-textarea {
  width: 100%;
  height: 80px;
  min-height: 80px;
  border: 1px solid #ececec;
  padding: 10px;
  font-size: 20px;
  color: #333333;
  resize: vertical; /* สามารถปรับขนาดเฉพาะในแนวตั้ง */
  overflow: auto;
  border-radius: 8px;
}
.custom-textarea:focus {
  outline: none;
  border-color: #ececec;
}
.custom-textarea-ckeditor {
  width: 100%;
  border: 1px solid #ececec;
  padding: 10px;
  font-size: 20px;
  color: #333333;
  resize: vertical; /* สามารถปรับขนาดเฉพาะในแนวตั้ง */
  overflow: auto;
  border-radius: 8px;
}
.custom-textarea-ckeditor:focus {
  outline: none;
  border-color: #ececec;
}
.ck-editor .ck-editor__editable {
  max-height: 450px;
  min-height: 150px;
}
.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  --ck-focus-ring: var(--border-width) solid var(--ck-color-base-border);
  --ck-focus-inner-shadow: var(--focus-ring-box-shadow);
}
.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px !important;
}
.banner-hover-text {
  position: absolute;
  top: 50%; /* กำหนดให้ปุ่มอยู่ตรงกึ่งกลางแนวตั้ง */
  left: 50%; /* กำหนดให้ปุ่มอยู่ตรงกึ่งกลางแนวนอน */
  transform: translate(-50%, -50%); /* ปรับตำแหน่งให้ปุ่มอยู่ตรงกลางสมบูรณ์ */
  width: 50px;
  height: 50px;
  background-color: rgba(217, 217, 217, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 18px;
  text-align: center;
  font-family: var(--font-monospace);
  cursor: pointer;
}
.profile-container:hover .banner-hover-text {
  opacity: 1;
  color: white;
}
.fix_widthscreen {
  max-width: 1000px !important;
  margin-left: auto;
  margin-right: auto;
}
.content {
  padding-bottom: 40px;
}
@media (max-width: 991.98px) {
  .app_pb .content,
  .app_pb.content {
    padding-bottom: 70px; /* ทำงานพร้อมกับ Bottom Nav bar */
  }
}

/* .content.fix_widthscreen img {
  border-radius: 10px;
} */
.scrollbar_me {
  overflow-x: hidden;
  position: relative;
  height: calc(100vh);
  border-radius: 0rem;
}
.maxheight_300 {
  max-height: 300px;
}
.modal_people .media-body {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.modal_people .media {
  padding-top: 5px;
  padding-bottom: 5px;
}
.m_icon {
  margin: var(--nav-link-padding-y) var(--nav-link-padding-x);
}
.nav-item-submenu {
  position: relative;
}
/* .icon_position_left {
  margin-top: 2px;
} */
/* .icon_position {
  position: absolute;
  top: 2px;
  right: 0px;
} */
/* .icon_position_lv2 {
  position: absolute;
  top: 2px;
  right: 20px;
} */
.dropdown-menu.dropdown-menu-end {
  right: 0px !important;
  left: auto !important;
}
.nav-item .dropdown-menu.dropdown-menu-end {
  right: 20px !important;
  left: auto !important;
}
.dropdown-menu-center {
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.dropdown-menu {
  white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
  word-wrap: break-word; /* แบ่งคำเมื่อคำยาวเกิน */
  max-width: 300px; /* จำกัดความกว้างสูงสุดให้ไม่เกินหน้าจอ */
  overflow-wrap: break-word; /* รองรับเบราว์เซอร์ที่ใช้ property นี้ */
}
a:focus .nav-link,
a:hover .nav-link {
  color: var(--primary-temp);
}
.nav-item-submenu > .nav-link:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.nav-item-submenu.nav-item-open > .nav-link:after {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
/* คลาสคอนเทนเนอร์ใหม่ */
.custom-container {
  width: 100%; /* กว้างสุดจอ */
  padding: 0; /* ไม่มีระยะขอบ */
  margin: 0;
  background-color: #333333;
}

/* สำหรับหน้าจอที่ต่ำกว่า 1366px จะเป็นอัตราส่วน 16:9 เสมอ */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
  height: 0;
  background-color: #000;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* สำหรับหน้าจอใหญ่กว่า 1366px */
@media (min-width: 1366px) {
  .video-container {
    max-width: 960px; /* ความกว้างสูงสุดของวิดีโอ */
    height: calc(960px * 9 / 16); /* คงอัตราส่วน 16:9 */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0; /* เอา padding-bottom ออกเพื่อใช้ height แทน */
  }
}

#sticky-title {
  position: -webkit-sticky; /* สำหรับ Safari */
  position: sticky;
  top: 0;
  background-color: white; /* ตั้งค่า background เพื่อให้เห็นชัดเจน */
  z-index: 1040; /* ให้อยู่ด้านบนขององค์ประกอบอื่น */
  padding: 10px 0; /* เผื่อพื้นที่ระหว่าง sticky */
  z-index: 1;
}
.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed).sidebar-main-unfold {
  z-index: 1040;
}
@media (max-width: 991.98px) {
  .sidebar-expand-lg {
    z-index: 1080;
  }
}
/* /Course */

/* Top Nav */
/* CSS สำหรับบังคับแสดง navbar-toggler */
.navbar-toggler {
  display: block !important;
}

/* ปิดการแสดงผลของเมนูปกติ (navbar-nav) ในหน้าจอขนาดใหญ่ */
@media (min-width: 992px) {
  .navbar-collapse {
    display: none !important;
  }
}
/* /Top Nav */
/* CK Editor */
.ck h1 {
  font-family: var(--font-sans-serif-semibold) !important;
  font-size: 24px !important;
}
.ck h2 {
  font-family: var(--font-sans-serif-semibold) !important;
  font-size: 20px !important;
}
.ck h3 {
  font-family: var(--font-monospace-bold) !important;
  font-size: 20px !important;
}
.ck p {
  font-family: var(--font-monospace) !important;
  font-size: 20px !important;
}
/* /CK Editor */
/* Task */
.max-width-100 {
  max-width: 100px;
  max-height: 100px;
}
table.table_task {
  width: 100%;
  border-collapse: collapse;
}

.table_task td {
  padding: 0px;
  vertical-align: baseline;
}

.table_task .title {
  min-width: 100px;
  text-align: left;
}

.table_task .score {
  text-align: left;
}

/* ซ่อนเส้นกรอบ */
.table_task table,
.table_task td {
  border: none;
}
.table_task .d-flex {
  display: flex;
  flex-wrap: wrap; /* ตัดบรรทัดใหม่เมื่อรูปเกินพื้นที่ */
}
.card.disabled {
  color: var(--nav-link-disabled-color);
  cursor: default;
  opacity: 1; /*0.5*/
}
a.disabled,
a:hover.disabled img,
a.disabled .card_hover {
  color: var(--nav-link-disabled-color);
  cursor: default;
  opacity: 1; /*0.5*/
  filter: brightness(1) !important;
  background-color: transparent;
  pointer-events: none;
}
/* /Task */
/* Course Info */
@media (min-width: 1366px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1300px;
  }
}
.txt_priceplan {
  color: #cc0000;
  font-size: 32px;
  line-height: 38px;
  font-family: var(--font-monospace-bold);
}
.btn_favourite,
.btn_cart {
  font-family: var(--font-sans-serif);
  color: #333333;
  font-size: 16px;
  background-color: #ffffff;
  border: none;
  padding: 0;
}
.btn_favourite:hover,
.btn_favourite:hover .radius-button,
.btn_cart:hover,
.btn_cart:hover .radius-button {
  color: var(--primary-temp);
}
.radius-button {
  width: 32px;
  height: 32px;
  border: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ececec;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0 5px;
  border-radius: 20px;
}
.radius-button img {
  width: 16px;
  height: 16px;
}
.radius-button {
  color: var(--gray-888);
}
.radius-button:hover {
  background-color: #ececec;
  color: var(--primary-temp);
}
.btn_suk_main_temp {
  font-family: var(--font-sans-serif);
  border-radius: 5rem;
  font-size: var(--btn-font-size);
  color: #fff;
  background-color: var(--primary-temp);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--primary-temp) !important;
  min-width: 100px;
}
.btn_suk_main_temp:hover {
  background-color: #fff;
  color: var(--primary-temp) !important;
  border: 1px solid var(--primary-temp);
}
.course_info .nav-link {
  /* padding: var(--nav-link-padding-y) var(--nav-link-padding-x); */
  padding-left: 0px;
  background-color: transparent !important;
}
.course_info .nav-link:focus,
.course_info .nav-link:hover {
  color: var(--nav-link-color);
  background-color: transparent;
}
table.table_course_detail {
  width: 100%;
  border-collapse: collapse;
}
.table_course_detail td {
  padding: 5px 0;
  vertical-align: top;
}
.table_course_detail .title {
  min-width: 160px;
  text-align: left;
  font-family: var(--font-sans-serif);
}
.table_course_detail .score {
  text-align: left;
  font-family: var(--font-monospace);
  font-size: 20px;
}
.table_course_detail table,
.table_course_detail td {
  border: none;
}
.txt_review_score {
  font-family: var(--font-monospace-bold);
  font-size: 96px;
  line-height: 70px;
}
table.table_review {
  width: 100% !important;
  border-collapse: collapse;
}
.table_review td {
  padding: 5px 0;
  vertical-align: top;
}
.table_review td:last-child {
  vertical-align: top;
  text-align: right;
}
.table_review .title {
  min-width: 260px;
  text-align: left;
  font-family: var(--font-sans-serif);
}
.table_review .score {
  text-align: left;
  font-family: var(--font-monospace);
  font-size: 20px;
}
.table_review table,
.table_review td {
  border: none;
}
.bg_course_carousel {
  background-color: #fafbfc;
}
/* ///////////////////////////////// */
/* Slick */
.slick-item .card {
  height: 100%; /* ทำให้การ์ดสูงเต็มที่ */
}
.slick-slider .card {
  margin-bottom: 0px;
}
.slick-item {
  padding: 5px 7.5px; /* ยังคง padding ระหว่างการ์ดอื่น ๆ */
}
.slick-slider {
  margin: 5px -7.5px; /* ลบผลรวม padding ซ้ายขวาออก */
}

.slick-item .card-footer {
  margin-top: 20px;
}
.slick-item .card-body {
  min-height: 92px; /* สามารถปรับเปลี่ยนค่าได้ตามความเหมาะสม */
  display: flex;
  flex-direction: column;
}
.slick-item .card-img-container {
  height: 150px; /* ปรับขนาดได้ตามความต้องการ */
  overflow: hidden;
}

.slick-item .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ปรับให้รูปภาพไม่บิดเบี้ยวและคงอัตราส่วน */
}
.slick-item .card-title {
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 22px;
  color: var(--gray-333);
  margin-bottom: 0px;
  word-break: break-word;

  /* สำหรับการตัดข้อความให้เหลือเพียง 2 บรรทัด */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* แสดงผลเพียง 2 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slick-track {
  margin-left: 0 !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
  margin-right: 0 !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
}

.p_slick_container {
  padding: 0 20px 30px 20px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .p_slick_container {
    padding: 0px 0px 30px 0px;
  }
  .slick-slider {
    margin: 5px 0px;
  }
}
@media (max-width: 576px) {
  .p_slick_container {
    padding: 0px 0px 30px 0px;
  }
}
/* เพิ่มระยะห่างระหว่างการ์ด */
@media (max-width: 768px) {
  .slick-track {
    margin-left: 15px !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
    margin-right: 15px !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
  }
}
@media (max-width: 567px) {
  .slick-track {
    margin-left: 10px !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
    margin-right: 10px !important; /* ป้องกันไม่ให้การ์ดแรกหายไปทางซ้าย */
  }
}
/* /Slick */
.banner-container {
  position: relative;
  display: inline-block;
}

.banner-container img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.banner-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
  z-index: 1;
}

.banner-container:hover::before {
  background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังดำขึ้น 50% */
  border-radius: var(--border-radius);
}
.banner-container:hover .svg-overlay {
  opacity: 1;
}

.svg-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px !important;
  height: 100px !important;
  z-index: 2; /* ทำให้ svg อยู่เหนือพื้นหลัง */
  opacity: 0.5;
}
/* /Course Info */
/* Start Swiper */
.swiper {
  width: 100%;
  height: 100%;
}
.txt-swiper-custom01 {
  font-family: "TrueTextBOnline-Bold";
  font-size: 20px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  padding-top: 10px;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

:root {
  --swiper-navigation-size: 30px !important;
  --swiper-theme-color: #888888 !important;
}
.hover_card_arrow .swiper-button-prev::after,
.hover_card_arrow .swiper-button-next::after {
  transition: transform 0.1s ease-out;
  display: none;
}
.hover_card_arrow:hover .swiper-button-prev::after,
.hover_card_arrow:hover .swiper-button-next::after {
  display: block;
}
.card_no_arrow .swiper-button-next,
.card_no_arrow .swiper-button-prev {
  display: none !important;
}

.my_slide .swiper-button-next {
  right: -15px !important;
  left: auto;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 99999;
}
.my_slide .swiper-button-prev {
  left: -15px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 99999;
}
.my_slide .swiper-arrow-custom02.swiper-button-next {
  right: -23px;
  left: auto;
  top: 179px;
}
.my_slide .swiper-arrow-custom02.swiper-button-prev {
  left: -23px;
  right: auto;
  top: 179px;
}
.bullet_w .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.2;
}
.bullet_w .swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-card-slider-trending-courses .swiper-pagination-outside .swiper-pagination-bullets {
  bottom: 2px;
  left: 0;
  width: 100%;
}
.swiper-pagination-outside .swiper-pagination-bullets {
  bottom: -30px;
  left: 0;
  width: 100%;
}
.swiper-pagination-outside .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 0px) !important;
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 0px) !important;
  left: auto;
}

.my_slide .card-footer {
  margin-top: 20px;
}
.my_slide .card-body {
  min-height: 95px; /* สามารถปรับเปลี่ยนค่าได้ตามความเหมาะสม */
  display: flex;
  flex-direction: column;
}
.my_slide .card-img-container {
  height: 150px; /* ปรับขนาดได้ตามความต้องการ */
  overflow: hidden;
}
.my_slide .card-title {
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 22px;
  color: var(--gray-333);
  margin-bottom: 0px;
  word-break: break-word;

  /* สำหรับการตัดข้อความให้เหลือเพียง 2 บรรทัด */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* แสดงผลเพียง 2 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* .swiper-button-next,
.swiper-button-prev {
  display: none !important;
} */
.p_slide_container {
  padding: 10px var(--page-padding-x) !important;
}
.my_slide {
  position: relative;
}
/* End Swiper */
/* Course Public */
.head_banner .banner {
  background-size: cover;
  background-position: center;
}
/* ตั้งรูปและความสูงสำหรับ Desktop และ Tablet view */
@media (min-width: 768px) {
  .head_banner .banner {
    height: 243px;
    background-image: url("../images/main/course/bnn_search_desktop.png"); /* ใส่ URL รูปสำหรับ Desktop */
  }
}
/* ตั้งรูปและความสูงสำหรับ Mobile view */
@media (max-width: 767.98px) {
  .head_banner .banner {
    height: 360px;
    background-image: url("../images/main/course/bnn_search_mobile.png"); /* ใส่ URL รูปสำหรับ Mobile */
  }
}
.head_banner .search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.head_banner .search-box {
  width: 100%;
  max-width: 500px;
  min-width: 300px;
}
/* /Course Public */

/* Home Public */
.home_public .custom_footer {
  padding: 20px 0px;
  font-family: var(--font-monospace);
  font-size: 18px;
  color: #555555;
}
.home_public .swiper-arrow-custom02.swiper-button-next,
.home_public .swiper-arrow-custom02.swiper-button-prev {
  top: 50% !important;
}
.home_public .card_bg_dark {
  background-color: #222222;
  color: #fff;
}
.home_public .card_bg_dark .card-sub-title {
  color: #888;
}
.home_public .card-title {
  line-height: 26px;
}
.home_public .card-sub-title {
  line-height: 24px;
}
.home_public .card_bg_dark .block_topimg_height {
  border-top-left-radius: 0.625rem !important;
  border-top-right-radius: 0.625rem !important;
  border-bottom-left-radius: 0.625rem !important;
  border-bottom-right-radius: 0.625rem !important;
}
.home_public .video-container {
  display: grid;
  justify-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home_public .video-container video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
}
.home_public .video-text {
  z-index: 2;
  color: #fff;
  text-align: center;
}
.home_public .txt-swiper-custom01 {
  font-family: "TrueTextBOnline-Regular";
  font-size: 18px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  padding-top: 10px;
}
.home_public .swiper_bgmenuslide .swiper-bg-right {
  z-index: 9;
  opacity: 1;
  background: rgb(34, 34, 34);
  background: linear-gradient(270deg, rgba(34, 34, 34) 0%, rgba(34, 34, 34) 70%, rgba(23, 23, 23, 0) 100%);
  position: absolute;
  top: 0px !important;
  right: -27px;
  height: 100%;
  width: 45px;
}
.home_public .swiper_bgmenuslide .swiper-bg-left {
  z-index: 9;
  opacity: 1;
  background: rgb(34, 34, 34);
  background: linear-gradient(90deg, rgba(34, 34, 34) 0%, rgba(34, 34, 34) 70%, rgba(23, 23, 23, 0) 100%);
  position: absolute;
  top: 0px !important;
  left: -27px;
  height: 100%;
  width: 45px;
}
.home_public .swiper_bgmenuslide_card .swiper_arrow_bg_left {
  z-index: 9;
  /* opacity: 0.8; */
  background: rgb(134, 134, 134);
  background: linear-gradient(270deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.65) 47%, rgba(34, 34, 34, 0.95) 70%);
  position: absolute;
  top: 15px !important;
  height: 100%;
  width: 145px;
}
.home_public .swiper_bgmenuslide_card .swiper_arrow_bg_right {
  z-index: 9;
  /* opacity: 0.8; */
  background: rgb(134, 134, 134);
  background: linear-gradient(90deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.65) 47%, rgba(34, 34, 34, 0.95) 70%);
  position: absolute;
  top: 15px !important;
  height: 100%;
  width: 145px;
}
.home_public .swiper_arrow_bg_left:after {
  margin-left: -48px;
}
.home_public .swiper_arrow_bg_right:after {
  margin-right: -48px;
}
.home_public .btn_light_hover {
  border-radius: 5rem;
  border: 1px solid #ececec;
  padding: 3.65px 20px;
}
.home_public .btn_light_hover:hover {
  background-color: var(--primary-temp);
  color: #fff !important;
}
.home_public .border_search_gray {
  border-radius: 5rem;
  border: 1px solid #ececec;
}
.home_public .swiper-explore-interests .txt_title_btn {
  color: #333333;
  font-family: var(--font-monospace);
  font-size: 20px;
}
.home_public .swiper_bgmenuslide .swiper-bg-left {
  z-index: 9;
  opacity: 1;
  background: rgb(34, 34, 34);
  background: linear-gradient(90deg, rgba(34, 34, 34) 0%, rgba(34, 34, 34) 70%, rgba(23, 23, 23, 0) 100%);
  position: absolute;
  top: -14px !important;
  left: -27px;
  height: 100%;
  width: 45px;
}
.home_public .swiper_bgmenuslide .swiper-bg-right {
  z-index: 9;
  opacity: 1;
  background: rgb(34, 34, 34);
  background: linear-gradient(270deg, rgba(34, 34, 34) 0%, rgba(34, 34, 34) 70%, rgba(23, 23, 23, 0) 100%);
  position: absolute;
  top: -14px !important;
  right: -27px;
  height: 100%;
  width: 45px;
}
.home_public .card-title {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 0;
}
.home_public .txt_title {
  font-size: 24px;
  line-height: 30px;
  color: #333333;
  font-family: var(--font-sans-serif-semibold);
  max-height: 60px;
}
.home_public .swiper-pagination {
  bottom: 0px !important;
}
.block_ellipsis_7.txt_333_20 {
  max-height: 181px;
}
/* @media (max-width: 768px) {
  .home_public .block_ellipsis_7.txt_333_20 {
    max-height: 183px;
  }
} */
@media (max-width: 576px) {
  .home_public .txt_title {
    max-height: 100px;
  }
  .home_public .txt_title {
    font-size: 24px;
    line-height: 32px;
  }
  /* .home_public .block_ellipsis_7.txt_333_20 {
    max-height: 181px;
  } */
}
.home_public .swiper-arrow-custom01.swiper-button-prev {
  left: -23px;
  right: auto;
  top: 50%;
}
.home_public .swiper-arrow-custom01.swiper-button-next {
  right: -23px;
  left: auto;
  top: 50%;
}
.home_public .swiper_menuslide .swiper-slide:first-child {
  margin-left: 0;
}
.home_public .swiper_menuslide .swiper-slide:last-child {
  margin-right: 0;
}
.card_slider_container .swiper-slide {
  margin-top: 8px; /* เพื่อให้เห็นเงาด้านบนของแต่ละการ์ด */
}

@media (max-width: 3840px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 3500px;
  }
}

@media (max-width: 2560px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 2100px;
  }
}

@media (max-width: 2048px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 1900px;
  }
}

@media (max-width: 1920px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 1700px;
  }
}

@media (max-width: 1366px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 1200px;
  }
}

@media (max-width: 1024px) {
  .home_public .container,
  .home_public .container-lg {
    max-width: 1004px;
  }
}

@media (max-width: 992px) {
  .home_public .container,
  .home_public .container-sm,
  .home_public .container-md,
  .home_public .container-lg {
    max-width: 960px;
  }
}

@media (max-width: 768px) {
  .home_public .txt_title {
    font-size: 28px;
    line-height: 32px;
  }
  .home_public .txt_seemore_home {
    line-height: 22px;
    min-width: 75px;
    text-align: right;
  }

  .home_public .txt-swiper-custom01 {
    font-size: 14px;
    line-height: 18px;
  }
}

@media screen and (max-width: 1024px) {
  .home_public .card_slider_container .swiper-button-prev::after,
  .home_public .card_slider_container .swiper-button-next::after {
    display: none;
  }
  .home_public .card_slider_container[class*=" swiper-card-slider"],
  .home_public .padding_content_container {
    padding: 0 20px;
  }
}

@media screen and (min-width: 1024px) {
  .home_public .swiper-trending-courses img {
    margin-left: 1px;
  }

  .home_public .padding_tophome_content_container {
    max-width: 100%;
    padding: 0 5.5% !important;
  }
  .home_public .card_slider_container[class*=" swiper-card-slider"],
  .home_public .padding_content_container {
    padding: 0 5.5%;
  }
  .home_public .card_slider_container .swiper-button-prev,
  .home_public .card_slider_container .swiper-button-next {
    height: 100%;
    width: 5.5%;
    width: calc(5.5% - 5px);
    top: 0;
    bottom: 0;
    margin: 0;
    background-color: rgba(250, 251, 252, 0.9); /*#FAFBFC*/
  }
  .home_public .card_slider_container.card_slider_container_invert .swiper-button-prev,
  .home_public .card_slider_container.card_slider_container_invert .swiper-button-next {
    background-color: rgba(255, 255, 255, 0.9); /*FFFFFF*/
  }

  .home_public .card_slider_container .swiper-button-prev {
    left: 0;
  }

  .home_public .card_slider_container .swiper-button-next {
    right: 0;
  }

  .home_public .card_slider_container .swiper-button-prev::after,
  .home_public .card_slider_container .swiper-button-next::after {
    color: #cccccc;
    font-size: 4vw;
    font-weight: bold;
    transition: transform 0.1s ease-out;
  }

  .home_public .card_slider_container.card_slider_container_invert .swiper-button-prev::after,
  .home_public .card_slider_container.card_slider_container_invert .swiper-button-next::after {
    color: #222;
  }

  .home_public .card_slider_container .swiper-button-prev::after,
  .home_public .card_slider_container .swiper-button-next::after {
    display: none;
    font-size: 2.4vw;
  }

  .home_public .card_slider_container .swiper-button-prev:hover::after,
  .home_public .card_slider_container .swiper-button-next:hover::after {
    transform: scale(1.25);
  }

  .home_public .card_slider_container.swiper-explore-interests .swiper-button-prev::after,
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-next::after {
    display: none;
    font-size: 1.2vw;
  }

  .home_public .card_slider_container.swiper-explore-interests .swiper-button-prev:hover::after,
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-next:hover::after {
    transform: scale(1.25);
  }

  .home_public .card_slider_container:hover .swiper-button-prev::after,
  .home_public .card_slider_container:hover .swiper-button-next::after {
    display: block;
  }
}

@media screen and (min-width: 2048px) {
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-prev::after,
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-next::after {
    display: none;
    font-size: 1vw;
  }

  .home_public .card_slider_container.swiper-explore-interests .swiper-button-prev:hover::after,
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-next:hover::after {
    transform: scale(1.2);
  }

  .home_public .card_slider_container:hover .swiper-button-prev::after,
  .home_public .card_slider_container:hover .swiper-button-next::after {
    display: block;
  }
}
.txt_title_ranking {
  color: #333333;
  font-size: 128px;
  line-height: 90px;
  font-family: var(--font-monospace-bold);
}
.bg_section_ranking {
  background-color: #fafbfc;
}
/* /Home Public */
/* Exam */
.table-exam {
  width: 100%; /* ทำให้ตารางกว้างสุดจอ */
  border-collapse: collapse; /* ทำให้ไม่มีขอบระหว่างเซลล์ */
  table-layout: fixed; /* ทำให้คอลัมน์มีความกว้างเท่า ๆ กัน */
}
.table-exam td {
  padding: 0 10px 0 10px;
  text-align: left;
}
.table-exam td:first-child {
  padding-left: 0px;
}
.table-exam td:last-child {
  padding-left: 0px;
  padding-right: 0px;
}

/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table-exam {
    width: 100%;
    border-collapse: collapse; /* ทำให้ไม่มีขอบระหว่างเซลล์ */
    overflow-x: auto; /* ทำให้ตารางเลื่อนซ้ายขวาได้ */
    display: block; /* ทำให้สามารถเลื่อนซ้ายขวาได้ */
    white-space: nowrap; /* ป้องกันไม่ให้ข้อความข้ามบรรทัด */
  }
  .table-exam {
    display: block; /* ทำให้สามารถเลื่อนซ้ายขวาได้ */
  }
  .table-exam td:first-child {
    position: sticky;
    left: 0;
    background-color: white; /* สีพื้นหลังเพื่อให้คอลัมน์ไม่ทับซ้อน */
    width: 100px; /* กำหนดความกว้างของคอลัมน์แรก */
    z-index: 1; /* ทำให้คอลัมน์แรกอยู่ข้างบน */
  }
  /* .table-exam td {
    min-width: 65px; 
  } */
}
/* เฉพาะใน Desktop และ Tablet */
@media (min-width: 576px) {
  .table-exam td {
    width: calc(100% / 3); /* กำหนดความกว้างให้ 3 คอลัมน์ เท่ากัน */
  }
}

.table-exam-chart {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.table-exam-chart td {
  padding: 5px 15px;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;
}
.table-exam-chart tbody tr:last-child td {
  border-bottom: none;
}
.table-exam-chart thead {
  background-color: #fafafa;
  height: 40px;
}
.table-exam-chart th {
  height: 40px;
  padding: 5px 15px;
  text-align: center;
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
}
/* จัดให้คอลัมน์แรกกึ่งกลางซ้าย-ขวา */
.table-exam-chart th:first-child,
.table-exam-chart td:first-child {
  text-align: center;
}

/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table-exam-chart th:first-child,
  .table-exam-chart td:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
    width: 120px;
  }
  .table-exam-chart th,
  .table-exam-chart td {
    min-width: 120px;
    /* width: 160px; */
  }
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--accordion-btn-focus-box-shadow);
}
.accordion-button:not(.collapsed) {
  color: #888888;
  background-color: var(--accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color);
}

.table-exam-topic {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.table-exam-topic td {
  padding: 5px 15px;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;
}
.table-exam-topic tbody tr:last-child td {
  border-bottom: none;
}
.table-exam-topic thead {
  background-color: #fafafa;
  height: 40px;
}
.table-exam-topic th {
  height: 40px;
  padding: 5px 15px;
  text-align: center;
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
}
/* จัดให้คอลัมน์แรกกึ่งกลางซ้าย-ขวา */
.table-exam-topic td:first-child {
  text-align: left;
}

/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table-exam-topic th:first-child,
  .table-exam-topic td:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
    width: 120px;
  }
  .table-exam-topic th,
  .table-exam-topic td {
    min-width: 100px;
    width: 100px;
  }
}
/* เฉพาะใน Desktop และ Tablet */
@media (min-width: 576px) {
  .table-exam-topic td {
  }
}
.accordion {
  --accordion-btn-padding-x: 15px;
  --accordion-btn-padding-y: 15px;
  --accordion-body-padding-x: 15px;
  --accordion-body-padding-y: 15px;
  --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cccccc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --accordion-btn-active-icon: url(
    data:image/svg + xml,
    %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 16 16"fill="%23cccccc"%3e%3cpathfill-rule="evenodd"d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3e%3c/svg%3e
  );
}
.accordion-button::after {
  background-image: var(--accordion-btn-icon) !important;
}
.accordion-collapse {
  box-shadow: inset 0 0 0 var(--accordion-border-color);
}
.accordion-button:not(.collapsed) {
  color: #888888;
  background-color: var(--accordion-active-bg);
  box-shadow: inset 0 calc(-1 * 0) 0 var(--accordion-border-color);
}
.rounded_circle_task {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background-color: #ececec;
  margin-right: 10px;
  margin-bottom: 10px;
}
.rounded-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
@media (min-width: 576px) {
  .rounded-md-left {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 0px !important;
  }
}
.bg_task_title {
  background-color: #6fa8dc;
}
.bg_task_doing {
  background-color: #eec13f;
}
.bg_task_correctly {
  background-color: #93c47d;
}
.bg_task_wrong {
  background-color: #cc0000;
}
.radio-card {
  border: 1px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s;
  font-family: var(--font-monospace);
  font-size: 20px;
  line-height: 26px;
  color: #333333;
  min-height: 40px;
}

.radio-card:hover {
  border-color: #cccccc !important;
}
.radio-input {
  display: none;
}
.radio-custom {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  transition: all 0.3s;
  --card-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0), var(--box-shadow);
}

.radio-input:checked + .card-body + .radio-custom {
  background-color: #ffffff;
  border-color: #ffffff;
  background-image: url("../../assets/images/main/ic_check_success.svg");
  background-size: contain; /* ทำให้ไอคอนขนาดพอดี */
  background-repeat: no-repeat;
  background-position: center; /* จัดให้อยู่ตรงกลาง */
}

.radio-card .card-body {
  display: flex;
  align-items: center; /* จัดกึ่งกลางแนวตั้ง */
  padding-right: 40px; /* เพิ่มระยะฝั่งขวาเพื่อเว้นที่สำหรับสัญลักษณ์ */
}
.radio-card .ic_hover_gray_ccc:hover span,
.radio-card .ic_hover_gray_ccc span:hover,
.radio-card a:hover .ic_hover_gray_ccc span {
  fill: #ffffff;
  color: #ffffff;
}

.radio-input:checked + .card-body {
  border-color: #ff0000;
}
/* disabled */
/* ปรับการ์ดที่ disable */
.radio-card.disabled {
  cursor: default;
}
.radio-card.disabled:hover {
  border-color: #ececec;
}
.radio-card input:disabled .radio-custom {
  cursor: default;
}

.radio-card input:disabled + .card-body {
  /* background-color: #ffffff;
  color: #999; */
  cursor: default !important; /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
  border: 0px solid #ddd;
}
.radio-card input:disabled + .card-body + .radio-custom {
  /* border-color: #ddd; */
}

/* ลบ hover effect บนการ์ดที่ disable */
.radio-card input:disabled + .card-body:hover {
  /* border-color: #ddd;
  background-color: #f5f5f5; */
}
/* /disabled */
/* สถานะตอบผิด */
.radio-card.wrong {
  border-color: #cc0000; /* เส้นขอบสีแดง */
  background-color: #fae6e6; /* พื้นหลังสีแดงอ่อน */
}
.radio-card.wrong .radio-custom {
  background-image: url("../../assets/images/main/ic_radio_wrong.svg"); /* ไอคอนกากบาท */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 0px solid #cc0000;
}
/* สถานะตอบถูก */
.radio-card.correct {
  border-color: #93c47d; /* เส้นขอบสีเขียว */
  background-color: #e6ffe6; /* พื้นหลังสีเขียวอ่อน */
}
.radio-card.correct .radio-custom {
  background-image: url("../../assets/images/main/ic_radio_correct.svg"); /* ไอคอนติ๊กถูกสีเขียว */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 0px solid #93c47d;
}
.exam.accordion,
.exam.accordion.border-0 {
  --accordion-border-width: 0px;
}
.exam .accordion-button::after {
  margin-left: 10px;
}
.exam .accordion-button {
  padding: 0px;
}
.exam .accordion-body {
  padding: 10px 0 0 0;
}
.bg_exam_title {
  background-color: #fafafa;
}
.box_part {
  width: 40px;
  height: 40px;
  border: 1px solid #ececec;
  background-color: #6fa8dc;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: var(--font-monospace-bold);
  border-radius: 8px;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.box_choice {
  min-width: 80px;
  height: 40px;
  border: 1px solid #ececec;
  background-color: #ffffff;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-family: var(--font-monospace-bold);
  border-radius: 8px;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.d-ruby {
  display: flex;
  flex-wrap: wrap;
}
.ic_check_success .radio-input:checked + .card-body + .radio-custom {
  background-color: #ffffff;
  border-color: #ffffff;
  background-image: url(../../assets/images/main/ic_check_success.svg);
}
.edit_exam_set .radio-card {
  border: 1px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0s;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* จัดกึ่งกลางในแนวตั้ง */
  align-items: center; /* จัดกึ่งกลางในแนวนอน */
}
.edit_exam_set .radio-custom {
  position: absolute;
  top: 50%;
  right: 35px; /* ขยับให้เหลือพื้นที่สำหรับ dropdown */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
/* จัดการ dropdown */
.edit_exam_set .dropdown {
  position: absolute;
  top: 50%;
  right: 10px; /* วางตำแหน่ง dropdown */
  transform: translateY(-50%);
}
.edit_exam_set .dropdown-toggle {
  padding: 5px 10px;
}
.edit_exam_set .radio-card .dropdown-menu {
  top: 100%; /* วาง dropdown ให้ต่ำลงจากปุ่ม */
}
.edit_exam_set .card {
  display: flex;
  flex-direction: row;
}
.edit_exam_set .input-text {
  width: 80px;
  height: 30px;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 5px;
  margin-right: 30px; /* เพิ่มช่องว่างระหว่าง input และ radio */
  text-align: center;
}
.edit_exam_set .card-content {
  display: flex;
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
}
/* /Exam */
/* Adminpanel */
.form-control-color {
  width: 40px;
  height: 40px;
  padding: 0rem;
  border: 0px solid #ececec;
  border-radius: 8px;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control-color::-moz-color-swatch {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ececec;
}

.form-control-color::-webkit-color-swatch {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ececec;
}
.pcr-app .pcr-interaction .pcr-save {
  background: var(--primary-temp) !important;
  border-radius: 8px;
}
.pickr input:focus,
.pickr input.pcr-active,
.pickr button:focus,
.pickr button.pcr-active,
.pcr-app input:focus,
.pcr-app input.pcr-active,
.pcr-app button:focus,
.pcr-app button.pcr-active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 0px var(--pcr-color) !important;
}
/* /Adminpanel */
/* CMS Task*/
.p_nav-link {
  padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
}

#pdf-viewer {
  width: 100%;
  border: 1px solid #cccccc;
}
.controls {
  margin: 10px 0;
  text-align: center;
}
.controls button {
  margin: 0 10px;
}
.pdf-page {
  margin-bottom: 20px;
  border: 1px solid black;
  width: 100%; /* ทำให้ canvas มีขนาดเต็มหน้าจอ */
}

#pdf-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* /CMS Task*/
/* Setting */
.form_set .radio-card {
  border: 0px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0s;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form_set .radio-custom {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.form_set .card-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form_set .radio-card .card-body {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.form_set .form-check {
  padding-left: 0px;
}
/* /Setting */
/* Contact us*/
.table-contact {
  /* width: 100%; */
  border-collapse: collapse; /* ทำให้ไม่มีขอบระหว่างเซลล์ */
  table-layout: fixed; /* ทำให้คอลัมน์มีความกว้างเท่า ๆ กัน */
}
.table-contact td {
  padding: 0 10px 0 10px;
  text-align: left;
}
.table-contact td:first-child {
  padding-left: 0px;
}
.table-contact td:last-child {
  padding-left: 0px;
  padding-right: 0px;
}

/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table-contact {
    /* width: 100%; */
    border-collapse: collapse; /* ทำให้ไม่มีขอบระหว่างเซลล์ */
    overflow-x: auto; /* ทำให้ตารางเลื่อนซ้ายขวาได้ */
    display: block; /* ทำให้สามารถเลื่อนซ้ายขวาได้ */
    white-space: nowrap; /* ป้องกันไม่ให้ข้อความข้ามบรรทัด */
  }
  .table-contact {
    display: block; /* ทำให้สามารถเลื่อนซ้ายขวาได้ */
  }
  .table-contact td:first-child {
    position: sticky;
    left: 0;
    background-color: white; /* สีพื้นหลังเพื่อให้คอลัมน์ไม่ทับซ้อน */
    width: 100px; /* กำหนดความกว้างของคอลัมน์แรก */
    z-index: 1; /* ทำให้คอลัมน์แรกอยู่ข้างบน */
  }
  /* .table-exam td {
    min-width: 65px; 
  } */
}
/* เฉพาะใน Desktop และ Tablet */
@media (min-width: 576px) {
  .table-contact td {
    /* width: calc(100% / 2); */
  }
}
/* /Contact us*/
/* Bottom Nav */
.bottomnav_mobile_wrapper {
  padding: 10px 0px;
  background-color: #ffffff;
}
.ic_bottomnav_mobile {
  height: 20px;
}
[class^="icon-"].ic_noti_menu_bottomnav {
  font-size: 22px;
  color: var(--primary-temp);
  position: absolute;
  right: 10px;
  top: -10px !important;
}
.txt_bottomnav_mobile {
  color: #888888;
  font-family: "sukhumvittadmai-text";
  line-height: 12px;
  font-size: 10px;
  word-break: break-all;
  white-space: nowrap; /* บังคับให้แสดงผลในบรรทัดเดียว */
  overflow: hidden; /* ซ่อนส่วนเกิน */
}

a.disabled:hover,
a.disabled:hover .txt_bottomnav_mobile,
.menu_single.disabled:hover .txt_bottomnav_mobile {
  color: var(--input-disabled-color) !important;
}

a:hover .txt_bottomnav_mobile,
a .txt_bottomnav_mobile:hover,
.menu_single .txt_bottomnav_mobile:hover {
  color: var(--primary-temp);
}
/* //////////////////////////// */

.txt_bottomnav_mobile {
  color: #888888;
  font-family: "sukhumvittadmai-text";
  line-height: 12px;
  font-size: 10px;
  word-break: break-all;
  white-space: nowrap; /* บังคับให้แสดงผลในบรรทัดเดียว */
  overflow: hidden; /* ซ่อนส่วนเกิน */
}

/* Remove hover styles from the text element */
.disabled .txt_bottomnav_mobile:hover {
  color: inherit;
}

.menu_bottomnav_mobile {
  position: relative;
  padding: 0 5px;
}

.menu_bottomnav_mobile img {
  /* filter: invert(53%) sepia(8%) saturate(14%) hue-rotate(48deg) brightness(98%)
     contrast(98%); */
}

.menu_bottomnav_mobile:hover,
.menu_bottomnav_mobile:focus,
.menu_bottomnav_mobile.active {
  color: var(--primary-temp);
}

.menu_bottomnav_mobile:hover a,
.menu_bottomnav_mobile:focus a,
.menu_bottomnav_mobile.active a,
.menu_bottomnav_mobile.active .txt_bottomnav_mobile {
  color: var(--primary-temp);
}

.menu_bottomnav_mobile a.disabled,
.menu_bottomnav_mobile a:disabled,
.menu_bottomnav_mobile .disabled {
  pointer-events: none;
  filter: opacity(50%);
  cursor: not-allowed;
  color: var(--input-disabled-color);
}

a[data-disabled="true"] {
  pointer-events: none;
  filter: opacity(50%);
  cursor: not-allowed;
  color: var(--input-disabled-color);
}

.menu_bottomnav_mobile a[data-disabled="true"] {
  pointer-events: none;
  filter: opacity(50%);
  cursor: not-allowed;
  color: var(--input-disabled-color);
}
/* /Bottom Nav */
/* App More */
.no-hover:hover {
  background-color: inherit;
  color: inherit;
}
.padding_outcard {
  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
}
/* /App More */
/* /////////////////////GSCHOOL/////////////////////*/

/* Home */
.bg_head_home {
  background-image: url("../../assets/images/main/home/bg_home.png"); /* ใส่ลิงก์หรือชื่อไฟล์รูปภาพที่ต้องการ */
  background-size: cover; /* ปรับรูปให้ครอบคลุมพื้นที่ */
  background-position: left;
  background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
  padding: 0px; /* เพิ่มระยะห่างในกล่อง */
  color: white; /* เปลี่ยนสีข้อความให้มองเห็นชัด */
}
.badge_position {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  -webkit-transform: translate(50%, -50%) !important;
  transform: translate(50%, -50%) !important;
  border-radius: var(--border-radius-pill) !important;
}
.bg_home {
  background-color: #fafbfc;
}
.border-box {
  width: 40px;
  height: 40px;
  border: 1px solid #ececec;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.border-box .date {
  font-family: var(--font-monospace-bold);
  font-size: 24px;
  line-height: 20px;
  color: #888888;
}

.border-box .month {
  font-family: var(--font-monospace-bold);
  font-size: 10px;
  line-height: 8px;
  color: #888888;
}
.mh_70px {
  min-height: 70px;
}
/* /Home*/

/* Timetable */
.custom-timetable-container {
  overflow-x: auto;
  border-radius: 10px; /* เพิ่มมุมมนให้ container */
  position: relative; /* ให้ sticky ทำงานภายใน container นี้ */
  background-color: white; /* กำหนดสีพื้นหลังเพื่อให้ครอบคลุมส่วนเกิน */
  border: 1px solid #ececec; /* เส้นกรอบรอบตาราง */
}

.custom-timetable {
  min-width: 800px; /* กำหนดความกว้างขั้นต่ำ */
  /* border-collapse: separate; */
  border-spacing: 0;
  /* border-radius: 10px; */
}

.custom-timetable td {
  border: 0px solid #ececec;
}
.custom-timetable th {
  border: 0px solid #ececec;
}

th.custom-sticky-col,
td.custom-sticky-col {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* สีพื้นหลังคอลัมน์ที่ล็อค */
  z-index: 2;
  font-family: var(--font-sans-serif-semibold);
  font-size: 18px;
  line-height: 24px;
  padding: 10px;
  min-width: 140px;
}

th.custom-sticky-col {
  z-index: 3; /* เพิ่มระดับ z-index สำหรับส่วนหัว */
}

td.custom-sticky-col {
  color: var(--primary-temp);
}
.custom-header-green {
  background-color: var(--primary-temp) !important;
  color: white;
  text-align: center;
}

/* แก้ปัญหามุมมนที่พื้นหลังโผล่ออกมา */
.custom-timetable-container::before,
.custom-timetable-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0px; /* ความกว้างเท่ากับ padding */
  background-color: white; /* สีเดียวกับพื้นหลัง */
  z-index: 10;
}

.custom-timetable-container::before {
  left: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}

.custom-timetable-container::after {
  right: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
  width: 0px;
}

.custom-timetable-container .bg_yellow {
  background-color: #f9fde7;
}
.custom-timetable-container .bg_orange {
  background-color: #feded2;
}
.custom-timetable-container .bg_blue {
  background-color: #e9f4ff;
}
.custom-timetable-container .bg_red {
  background-color: #fbd6e7;
}

.custom-timetable-container th,
.custom-timetable-container td {
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.custom-timetable-container th:last-child,
.custom-timetable-container td:last-child {
  border-right: 0px solid #ececec !important;
}
.custom-timetable-container thead tr {
  border-top: 0px;
}
.custom-timetable-container tbody tr {
  border-bottom: 0px;
}
.custom-timetable-container tbody tr:last-child td {
  border-bottom: 0px;
}

/* /Timetable */
/* Assignment */
.custom-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-circle {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.25); /* สีขาวและความโปร่งแสง */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-circle span {
  font-family: var(--font-sans-serif);
  color: #ffffff;
  font-size: 32px;
  opacity: 1; /* ความโปร่งใสของตัวอักษร */
}

@media (max-width: 576px) {
  .custom-circle {
    width: 100px;
    height: 100px;
  }
  .custom-circle span {
    font-size: 72px !important;
  }

  .card_horizontal_row .custom-circle {
    width: 50px;
    height: 50px;
  }
  .card_horizontal_row .custom-circle span {
    font-size: 32px !important;
  }
}

.bg_orange_dark {
  background-color: #f69884;
}
.bg_purple_dark {
  background-color: #996daf;
}
.bg_blue_dark {
  background-color: #72ccea;
}
.bg_yellow_dark {
  background-color: #fbe286;
}
.bg_green_dark {
  background-color: #dde67f;
}
.bg_temp {
  background-color: var(--primary-temp);
}
.btn_card_temp {
  /* font-family: var(--font-sans-serif); */
  /* font-size: var(--btn-font-size); */
  /* color: var(--primary-temp) !important; */
  border-radius: 10px;
  background-color: #fff;
  padding: 0;
  border: 1px solid #ececec !important;
  min-width: 100px;
}
.btn_card_temp:hover {
  background-color: var(--primary-temp);
  color: #fff !important;
  border: 1px solid var(--primary-temp);
}
/* /Assignment */
/* GBook */
/* กล่องพื้นหลังรวม */
.custom-toolbar-background {
  background-color: rgba(255, 255, 255, 0.6); /* พื้นหลังโปร่งใส */
  border-radius: 25px; /* ขอบโค้ง */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
  /* display: flex; ใช้ Flexbox
  align-items: center; จัดไอคอนให้อยู่ตรงกลางแนวตั้ง */
  padding: 10px 20px; /* เพิ่มพื้นที่รอบกล่อง */
  gap: 20px; /* ระยะห่างระหว่างไอคอน */
  min-height: 50px;
}
.custom-toolbar-background.rounded-circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  padding: 0px;
}

/* สไตล์สำหรับไอคอนแต่ละอัน */
.custom-toolbar-icon {
  /* width: 50px;
  height: 50px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-toolbar-icon i {
  font-size: 24px; /* ขนาดไอคอน */
  color: #333; /* สีของไอคอน */
}
@media (max-width: 1024px) {
  .custom-toolbar-icon .iconDropdownMenu {
    top: auto;
    bottom: auto !important;
  }
}

.gbook_position_middle_top {
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  z-index: 11;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .gbook_position_middle_top {
    /* left: auto !important;
    right: 0px; ชิดขวาของจอ
    -webkit-transform: translateX(0) !important;
    transform: translateX(0); ยกเลิกการเลื่อนกึ่งกลาง */
    bottom: 10px;
  }
}
/* ลูกศรทั่วไป (Desktop) */
.custom-arrow {
  position: fixed;
  bottom: 15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease; */
  z-index: 0;
}

a.custom-arrow.disabled {
  opacity: 0.2;
}

.custom-arrow i {
  font-size: 16px;
  color: #333;
}

/* ลูกศรซ้าย */
.custom-arrow-left {
  left: 15px;
}

/* ลูกศรขวา */
.custom-arrow-right {
  left: 60px;
}

/* สำหรับจอมือถือ (Media Query) */
@media (max-width: 1024px) {
  .custom-arrow {
    bottom: 75px; /* เลื่อนขึ้นจากขอบล่าง */
  }
  /* ลูกศรซ้าย */
  .custom-arrow-left {
    left: auto;
    right: 23px;
    bottom: 120px;
  }
  /* ลูกศรขวา */
  .custom-arrow-right {
    left: auto;
    right: 23px;
    bottom: 75px;
  }
}
/* /GBook */
/* Home Public */
.background-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  background-image: url("../images/main/home/bg_home_public_desktop.png");
  background-size: cover;
  background-position: center;
}

.text-overlay {
  position: absolute;
  top: 80px;
  left: 100px;
  text-align: left;
  color: #ffffff;
}

.text-overlay .txt_h1 {
  font-size: 96px;
  margin: 0;
  line-height: 0.8;
  font-family: var(--font-monospace-extrabold);
}

.text-overlay .txt_h2 {
  font-size: 36px;
  margin: 10px 0;
  line-height: 1;
  font-family: var(--font-monospace-bold);
}

.text-overlay .txt_h3 {
  font-size: 32px;
  margin: 10px 0;
  line-height: 1;
  font-family: var(--font-sans-serif);
}

.text-overlay .txt_h4 {
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1;
  font-family: var(--font-monospace);
}

.login-button {
  font-size: 18px;
  color: #ffffff;
  font-family: var(--font-sans-serif);
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 50rem;
  padding: 4px 20px;
  text-decoration: none;
  display: inline-block;
  min-width: 110px;
  text-align: center;
  min-height: 40px;
}
.login-button:hover {
  color: #ffffff !important;
  background-color: var(--primary-temp);
  border: 1px solid var(--primary-temp);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .background-container {
    background-image: url("../images/main/home/bg_home_public_tablet.png");
  }
}
@media (max-width: 576px) {
  .background-container {
    background-image: url("../images/main/home/bg_home_public_mobile.png");
  }
}
@media (max-width: 768px) {
  .text-overlay {
    position: absolute;
    top: 60px;
    left: 60px;
    text-align: left;
    color: #ffffff;
  }

  .text-overlay .txt_h1 {
    font-size: 68px;
  }

  .text-overlay .txt_h2 {
    font-size: 32px;
  }

  .text-overlay .txt_h3 {
    font-size: 26px;
  }

  .text-overlay .txt_h4 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .background-container {
    background-image: url("../images/main/home/bg_home_public_mobile.png");
  }

  .text-overlay {
    position: absolute;
    top: 40px;
    left: 40px;
    text-align: left;
    color: #ffffff;
  }

  .text-overlay .txt_h1 {
    font-size: 48px;
  }

  .text-overlay .txt_h2 {
    font-size: 24px;
    margin: 5px 0;
  }

  .text-overlay .txt_h3 {
    font-size: 18px;
    margin: 5px 0;
  }

  .text-overlay .txt_h4 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .login-button {
    min-width: 100px;
    min-height: 36px;
  }
}

.dropdown-toggle.noarrow::after {
  display: none;
}
.custom-hover-green-unique {
  color: #888888; /* สีเริ่มต้นของไอคอน */
}

.custom-hover-green-unique:hover {
  color: var(--primary-temp); /* สีเมื่อ hover */
}

/* เพิ่ม z-index ให้ dropdown อยู่ข้างหน้า */
/* .dropdown-menu {
  z-index: 1050 !important; 
  position: absolute;
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
  z-index: 1051; 
} */

.border-bottom-radius {
  border-bottom-left-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}
/* /Home Public */
/* Workspace */
.dropdown-item.active {
  color: var(--primary-temp);
  background-color: var(--dropdown-link-hover-bg);
}
.txt_teacher_name {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 32px; /* ขนาดสำหรับหน้าจอปกติ */
  line-height: 38px;
}

@media (max-width: 767.98px) {
  .txt_teacher_name {
    font-size: 26px; /* ขนาดตัวอักษรเล็กลงสำหรับ Mobile */
    line-height: 30px; /* ลด line-height ตาม */
  }
}

.img_teacher_profile {
  width: 100px; /* ขนาดเริ่มต้นสำหรับหน้าจอปกติ */
}

@media (max-width: 767.98px) {
  .img_teacher_profile {
    width: 100px; /* ลดขนาดรูปสำหรับ Mobile */
  }
}

/* /.Workspace */
/* GBook */
.position_group_topleft {
  position: fixed;
  top: 0;
  left: 0;
  margin-left: 15px;
  margin-top: 15px;
  gap: 15px;
  display: flex;
}
.position_group_topright {
  position: fixed;
  top: 0;
  right: 15px;
  margin-left: 15px;
  margin-top: 15px;
  gap: 15px;
  display: flex;
}
.position_group_bottomleft {
  position: fixed;
  bottom: 0;
  left: 0;
  margin-left: 15px;
  margin-bottom: 15px;
  gap: 10px;
  display: flex;
}
.custom-toolbar-undoredo.rounded-circle {
  width: 30px;
  height: 50px;
  border-radius: 25px;
  padding: 0px;
}
@media (max-width: 1024px) {
  .position_group_topleft {
    align-items: start; /*center*/
    flex-direction: column;
  }
  .custom-toolbar-undoredo.rounded-circle {
    width: 30px;
    height: 30px;
    margin-left: 7px;
  }
}
.dropdown-scrollbars {
  max-height: 50vh;
  overflow-y: scroll;
}
.modal_gray {
  --modal-bg: var(--modal-bg-gray);
  --modal-border-color: var(--modal-bg-gray);
}
.modal_gray .modal-title {
  color: #ffffff;
}
.modal_gray .btn-close {
  color: #ffffff;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/var(--btn-close-width) auto no-repeat;
}
@media (max-width: 1024px) {
  .iconDropdownMenu.zoomzoom {
    top: 45px;
    bottom: auto;
    height: fit-content;
  }
}
a .txt_suk_333_16 {
  color: #333333;
}
a .txt_suk_333_16:hover {
  color: var(--primary-temp);
}
.position_group_topleft .sidebar-content .nav-sidebar .nav-link {
  margin: 0 5px;
}
.position_group_topleft .form-control-feedback-start .form-control {
  padding: 0px 35px 0px 14px;
  font-size: 14px;
}

.custom-arrow {
  position: fixed;
  top: 35%; /* กึ่งกลางจอในแนวตั้ง (30% คือความสูงของพื้นที่กด) */
  width: 30px;
  height: 30%; /* ให้พื้นที่กดสูง 30% ของจอ */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  padding: 0;
  background: transparent;
}

.custom-arrow-left {
  left: 15px;
}

.custom-arrow-right {
  left: auto;
  right: 15px;
}

.custom-toolbox .dropdown-menu {
  --dropdown-min-width: fit-content !important;
}

.btn_numpage {
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-sans-serif);
  color: #888888;
  padding: 5px 15px;
  gap: 20px;
  min-height: 30px !important;
}

.nav-header {
  flex-shrink: 0; /* ล็อคหัวไม่ให้ถูกบีบ */
  background: #fff; /* กันเนื้อหาซ้อน */
  z-index: 10;
}
/* /GBook */
/* Swiper */
.custom-gallery-modal .custom-main-swiper {
  display: flex;
  justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
  align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  height: 400px; /* กำหนดความสูงสำหรับแสดงรูปใหญ่ */
}

.custom-gallery-modal .custom-main-swiper .custom-swiper-slide {
  display: flex;
  justify-content: center; /* จัดให้อยู่ตรงกลางใน slide */
  align-items: center;
}
.swiper_hover .custom-swiper-slide img:hover {
  filter: brightness(1.1);
  cursor: pointer;
}
.custom-gallery-modal .custom-main-swiper img {
  max-width: 100%; /* ป้องกันไม่ให้รูปเกินพื้นที่ */
  max-height: 100%; /* ปรับรูปให้พอดีกับ modal */
  border-radius: 10px;
}
.swiper-wrapper img {
  border-radius: 10px;
}

.custom-gallery-modal .custom-swiper-button-prev,
.custom-gallery-modal .custom-swiper-button-next {
  top: 50%; /* ให้ลูกศรอยู่กลางแนวตั้ง */
  transform: translateY(-50%);
}

.custom-gallery-modal .custom-thumbnail-swiper img {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
}

.custom-gallery-modal .custom-thumbnail-swiper img.custom-swiper-slide-thumb-active {
  border-color: #888888;
}

.swiper-button-bg {
  top: var(--swiper-navigation-top-offset, 0%) !important;
  background-color: var(--modal-bg) !important;
  height: 100% !important;
  margin-top: 0px !important;
  opacity: 1 !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  padding: 0 30px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  padding: 0 30px;
}

/* ปรับขนาดและพื้นหลังของลูกศร */
.swiper-button-next,
.swiper-button-prev {
  width: 60px; /* ความกว้างของพื้นที่ลูกศร */
  height: 100%; /* ความสูงเท่ากับ Swiper */
  background-color: #494949; /* พื้นหลังสีเทา */
  background-size: 30px 30px; /* ขนาดของไอคอน SVG */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8; /* ความโปร่งใสเล็กน้อย */
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* ลูกศรขวา */
.swiper-button-next {
  background-image: url("../../assets/images/main/gbook/ic_arr_right.svg");
  right: 0; /* ติดขอบขวา */
}

/* ลูกศรซ้าย */
.swiper-button-prev {
  background-image: url("../../assets/images/main/gbook/ic_arr_left.svg");
  left: 0; /* ติดขอบซ้าย */
}

/* เอฟเฟกต์เมื่อโฮเวอร์ */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: #606060; /* พื้นหลังเข้มขึ้นเมื่อโฮเวอร์ */
  opacity: 1; /* ทำให้ลูกศรเด่นชัด */
}

/* ลบไอคอนเริ่มต้นของ Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

.swiper-button-next,
.swiper-button-prev {
  width: 30px !important;
}
@media (max-width: 719.89px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 20px !important;
    /* height: 20px !important; */
    background-size: 15px 15px; /* ขนาดของไอคอน SVG */
  }
  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    padding: 0 15px;
  }
  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    padding: 0 15px;
  }
}
/* .custom-thumbnail-swiper2 .custom-swiper-slide.swiper-slide-active {
  border: 1px #ffffff solid;
  border-radius: 10px;
} */
/* New 20250715*/
.swiper_small .custom-swiper-slide {
  opacity: 0.4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ececec;
}
.swiper_small .swiper-slide-thumb-active {
  border: 1px solid var(--primary-temp);
  box-sizing: border-box; /* ขอบอยู่ในขนาดกล่อง */
  border-radius: 10px;
  opacity: 1;
  overflow: hidden;
}
.swiper_small img {
  border-radius: 0px;
}
.img-thumbnail-small {
  background-color: #ffffff !important;
}
.swiper-slide-active img {
  border: 1px solid #ececec;
}
/* /New 20250715*/
/* /Swiper */

/*Tab version line */
.tabs_line .cd-tabs ol,
.tabs_line .cd-tabs ul {
  list-style: none;
}

.tabs_line a.tabs-link {
  color: #000;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  border: 0px;
  border-bottom: 3px solid #fff;
  border-radius: 0px !important;
}
.tabs_line .cd-tabs_navigation a {
  font-family: var(--font-sans-serif);
  position: relative;
  display: block;
  height: 35px;
  padding-left: 30px !important;
  padding-right: 30px !important;
  /* width: 115px; */
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #888888;
  line-height: 25px;
  padding: 1.167em 0;
}
.tabs_line .cd-tabs_navigation a:hover,
.tabs_line .cd-tabs_navigation a.active {
  color: var(--primary-temp);
}
.tabs_line .tabs-link {
  padding: 0rem;
}

.tabs_line a.tabs-link:hover,
.tabs_line a.tabs-link.active {
  color: var(--primary-temp) !important;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  opacity: 1;
  border: 0px;
  border-bottom: 3px solid var(--primary-temp);
  border-radius: 0px !important;
}
.tabs_line .cd-tabs_navigation li a {
  border-right: 0px solid #eee;
  white-space: nowrap;
}
/* /Tab version line */
/* Admin : User Group */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.active {
  background-color: var(--primary-temp);
}

.status-dot.inactive {
  background-color: #cccccc;
}
.form-switch .form-check-input:focus {
  background-image: url(data:image/svg + xml, %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="-4 -4 8 8"%3e%3ccircler="3"fill="rgba(0, 0, 0, 0.2)"/%3e%3c/svg%3e);
}
.form-check-input-success {
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(var(--success-rgb), 0);
  --component-active-bg: var(--success);
}
.radio_std .radio-card {
  border: 0px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0s;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* จัดกึ่งกลางในแนวตั้ง */
  align-items: start; /* จัดกึ่งกลางในแนวนอน */
  min-height: 0px;
}
.radio_std .radio-custom {
  position: absolute;
  top: 50%;
  right: 20px; /* ขยับให้เหลือพื้นที่สำหรับ dropdown */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.radio_std .position_left .radio-custom {
  position: absolute;
  top: 50%;
  left: 0px; /* ขยับให้เหลือพื้นที่สำหรับ dropdown */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.radio_std .radio-card .position_left .card-body {
  display: flex;
  align-items: start;
  padding-left: 30px !important;
  padding-right: 20px !important;
  justify-content: start;
}
/* .radio_std .position_left .card-body {
  padding-left: 10px;
} */
.radio_std .card-text {
  padding-right: 30px;
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
}

.radio_set .radio-card {
  border: 1px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0s;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* จัดกึ่งกลางในแนวตั้ง */
  align-items: center; /* จัดกึ่งกลางในแนวนอน */
}
.radio_set .radio-custom {
  position: absolute;
  top: 50%;
  right: 20px; /* ขยับให้เหลือพื้นที่สำหรับ dropdown */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.radio_set .position_left .radio-custom {
  position: absolute;
  top: 50%;
  left: 20px; /* ขยับให้เหลือพื้นที่สำหรับ dropdown */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.radio_set .radio-card .position_left .card-body {
  display: flex;
  align-items: center;
  padding-left: 50px !important;
  padding-right: 20px !important;
  justify-content: start;
}
.radio_set .position_left .card-body {
  padding-left: 10px;
}
/* จัดการ dropdown */
.radio_set .dropdown {
  position: absolute;
  top: 50%;
  right: 10px; /* วางตำแหน่ง dropdown */
  transform: translateY(-50%);
}
.radio_set .dropdown-toggle {
  padding: 5px 10px;
}
.radio_set .radio-card .dropdown-menu {
  top: 100%; /* วาง dropdown ให้ต่ำลงจากปุ่ม */
}
.radio_set .card {
  display: flex;
  flex-direction: row;
}
.radio_set .input-text {
  width: 80px;
  height: 30px;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 5px;
  margin-right: 30px; /* เพิ่มช่องว่างระหว่าง input และ radio */
  text-align: center;
}
.radio_set .card-content {
  display: flex;
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  justify-content: start;
  width: 100%;
}
.radio_set .card-content:hover {
  background-color: #fafafa;
}
.radio_set .card-body {
  padding: 5px 20px;
}
.radio_set .card-text {
  padding-right: 30px;
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
}
.radio_set .card {
  border: 0px;
  border-radius: 0px;
  box-shadow: none;
  margin: 0px;
}
.radio_set .radio-card .card-body {
  display: flex;
  align-items: center;
  padding-right: 40px;
  justify-content: start;
}
.form-switch .form-check-input {
  --form-check-input-bg: #cccccc;
  --form-check-input-border: 0px !important;
}
.form-check-input {
  --form-check-input-border: calc(var(--border-width) * 1) solid var(--gray-888);
}
.form-check-input:focus {
  border-color: transparent !important;
}
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}
/* .form-switch .txt_suk_888_16 {
  line-height: 2;
} */
/* /Admin : User Group */

/* Learning Materials : Digital Book : Content Creation */
.popover {
  /* --popover-body-padding-x: 10px;
   --popover-body-padding-y: calc(var(--spacer-1) * 0.75); */
  --popover-body-padding-x: 15px;
  --popover-body-padding-y: 10px;
  --popover-font-size: 14px;
}
.txt_popover_head {
  font-family: var(--font-sans-serif-semibold);
  color: #333;
  font-size: 14px;
  line-height: 20px;
}
.course_page .sidebar-section .nav-sidebar .nav-link {
  padding-right: 40px;
  font-size: 18px;
}
.course_page .nav.nav-sidebar {
  --nav-link-padding-y: 0.265rem;
  --nav-link-padding-x: 1.29rem;
}
.nav.nav-sidebar {
  margin: 0px;
}
.pane_preview {
  position: absolute;
  top: 3px;
  right: 15px;
  z-index: 10; /*left menu : 1040*/
}
.toast {
  z-index: 10;
}
.bg_icon_image {
  background-repeat: no-repeat;
  /* background-image: url(../images/main/learning_materials/ic_images.svg); */
  background-position: center center;
}
.buttons_on_image {
  width: 100px;
  height: 100px;
  border-radius: 4px 0px 0px 0px;
  background-color: transparent;
  border: 1px solid var(--primary-temp);
  border-radius: 4px;
}
a .buttons_on_image:hover {
  border: 1px solid #cccccc;
}

.gallery-card {
  width: 154px;
  height: 85px;
  background-color: #fafafa;
  border: 1px solid #ececec;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 10px;
}
.gallery-card img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: auto;
}
.delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.gallery-card:hover .delete-btn {
  display: flex;
}
.small-card {
  width: 88px;
  height: 50px;
  background-color: #fafafa;
  border: 1px solid #ececec;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border-radius: 10px;
}
.small-card:hover {
  filter: brightness(1.1);
}
.small-card img.preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
  z-index: 1;
  position: relative;
}
.placeholder-content img {
  width: 24px;
  height: 20px;
}
.placeholder-text {
  color: #888888;
  font-family: "Sukhumvit Set", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}
.file-input {
  display: none;
}
a.ic_hover_gray_ccc.disabled {
  opacity: 0.1; /* ทำให้จางลง 50% */
  pointer-events: none; /* ป้องกันไม่ให้คลิกได้ */
  fill: currentColor; /* ใช้กรณีที่เป็น SVG หรือ icon ที่มีสี */
}
a.ic_hover_gray_ccc.disabled:disabled {
  opacity: 0.1;
  -webkit-transition: opacity 0.3s ease; /* ปรับให้ Safari smooth */
}
.custom-focus-border {
  border: none;
  outline: none;
  transition: none; /* ปิดเอฟเฟกต์เปลี่ยนแปลง */
}

.custom-focus-border:focus,
.custom-focus-border:focus-visible {
  border: 1px solid #ececec !important;
  outline: none;
  box-shadow: none !important; /* ปิดเอฟเฟกต์เงาของ Bootstrap */
  transition: none !important; /* ปิด transition เพื่อป้องกันกระพริบ */
}
.border-radius-left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
/* /Learning Materials : Digital Book : Content Creation */

/* Learning materials PDF */
#pdf-container {
  width: 100%;
  height: calc(100vh - 50px); /* สูงเท่ากับจอ ลบ 100px */
  overflow-y: auto;
  border: 0px;
  background: #f1f2f3;
  padding: 0px;
}
@media (max-width: 767.98px) {
  #pdf-container {
    height: calc(100vh - 50px); /* สูงเท่ากับจอ ลบ 100px */
  }
}

canvas {
  display: block;
  margin: auto;
}

.pdf_viewer .input_form_control {
  font-size: 18px;
  color: #333333;
  border: 1px solid #ececec;
  border-radius: 4px;
}

/* ซ่อนปุ่มลูกศรใน input type=number */
.pdf_viewer input[type="number"]::-webkit-outer-spin-button,
.pdf_viewer input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdf_viewer input[type="number"] {
  -moz-appearance: textfield; /* สำหรับ Firefox */
}

/* ซ่อนปุ่มลูกศรของ input number */
.pdf_viewer #page-num::-webkit-outer-spin-button,
.pdf_viewer #page-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdf_viewer #page-num {
  -moz-appearance: textfield; /* สำหรับ Firefox */
  text-align: center; /* จัดกึ่งกลางข้อความ */
}
.pdf_viewer .no_arrow::after {
  display: none;
}
.pdf_viewer #toolbar {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.pdf_viewer #toolbar .btn {
  padding: 0 0;
}
.pdf_viewer :not(.btn-check) + .btn:active {
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0;
}
.pdf_viewer *:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0;
}
/* / Learning materials PDF */
/* Admin panel : Apprearance */
.img-thumbnail-custom {
  width: 100%; /* ให้กว้างตาม col-12 หรือ col-md-6 */
  /* max-height: 150px; */
  object-fit: cover; /* ปรับให้ภาพเต็มพื้นที่โดยไม่เสียสัดส่วน */
}
/* /Admin panel : Apprearance */
/* Course List */
.status-dot-8p {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.course-box {
  width: 146px;
  height: 82px;
  background-color: #cccccc;
  border-radius: 10px; /* เพิ่มมุมมน */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.course-box:hover {
  filter: brightness(1.1);
}

.course-circle {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sukhumvit Set", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  color: white;
}

.center-center-course {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ทำให้วงกลมอยู่กึ่งกลาง */
}

.custom_threedot {
  position: absolute;
  right: 0px;
  top: 28% !important;
  transform: none !important;
}
/* .custom_threedot .dropdown-toggle {
  z-index: 2;
  position: relative;
}
.custom_threedot .dropdown-menu {
  z-index: 3;
  position: relative;
} */
@media (max-width: 576px) {
  .custom_threedot {
    top: 0px !important;
  }
}
.gallery_color_div {
  margin: 5px;
  width: 59px;
  height: 59px;
  border-radius: 50px;
  cursor: pointer;
}
.gallery_color_div:hover,
.gallery_color_div.active {
  filter: brightness(90%) !important;
}
.upload_wraper {
  position: relative;
  height: 190px;
  background: #ffffff;
  border: 1px dashed #ececec;
  border-radius: 10px;
}
.btn_uploader input[type="file"] {
  width: 100%;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  min-height: 2.25003rem;
  border: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}
.btn_uploader .filename {
  color: var(--body-color);
  background-color: #fff;
  border-radius: 5rem;
  font-size: var(--btn-profile-font-size);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--border-color) !important;
  min-width: 120px;
  font-family: var(--font-sans-serif);
}

.btn_uploader:hover .filename {
  color: #ffffff;
  background-color: var(--primary-temp);
  border: 1px solid var(--primary-temp) !important;
}
/* /Course List*/
/* Course Learning Material */
.modal_autoscroll {
  max-height: calc(100vh - 330px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.modal_autoscroll::-webkit-scrollbar {
  display: none;
}
/* /Course Learning Material */
/* Tabs Menu */

.c_dropdown {
  position: relative;
  display: inline-block;
  background: #fff;
  white-space: nowrap;
  color: #333333;
  background-color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-family: var(--font-sans-serif);
}
.c_dropdown:hover {
  color: var(--primary-temp);
  cursor: pointer;
}
.c_dropdown .tabs-link {
  border: 0px;
}
.c_dropdown_content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 130px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-radius: 8px;
  border: 1px solid #ededed;
  right: 0px;
  top: 40px;
}
.c_dropdown:hover .c_dropdown_content {
  display: block;
}
.c_dropdown ul,
.more_menu_outer {
  margin: 0px;
  padding: 0px;
}
.c_dropdown li {
  padding: 5px 10px;
}
.c_dropdown span {
  border: 0px solid transparent;
  font-size: 18px;
  line-height: 24px;
  font-family: var(--font-sans-serif);
  height: 40px;
  align-items: center;
  display: inline-grid;
  text-align: center;
  padding: 8px 0 10px 20px;
}
.c_dropdown.selected span {
  color: var(--primary-temp);
  border: 0px solid #e5e5e5;
}
.more_menu_outer li {
  list-style-type: none;
}
.c_dropdown_content li:hover {
  color: var(--primary-temp);
}
.c_dropdown_content li a {
  width: 100%;
  display: block;
}
.tablist_menu_wrapper {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.more_menu_outer_wrapper {
  width: 80px;
  padding-top: 0px;
  text-align: right;
  margin-right: 15px;
}
.tablist_menu_wrapper .cd-tabs_navigation a {
  height: 40px;
  min-height: 40px;
  line-height: 1;
  align-items: center;
  display: flex;
}
.more_menu_outer_wrapper a.tabs-link:hover,
.more_menu_outer_wrapper a.tabs-link.active {
  color: var(--primary-temp) !important;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  opacity: 1;
  border-bottom: 0px solid;
  border-radius: var(--border-radius-pill) !important;
  border: 0px;
}
.cd-tabs_navigation a {
  font-family: var(--font-sans-serif);
  position: relative;
  display: block;
  height: 40px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  color: #333333;
  line-height: 24px;
  padding: 10px 20px;
  font-family: var(--font-sans-serif);
}
.tablist_menu_wrapper li {
  padding-right: 10px;
}
.tablist_menu_wrapper li:last-child {
  padding-right: 0px;
}
.hide {
  display: none !important;
}
.cd-tabs_navigation a.h_30p {
  font-family: var(--font-sans-serif);
  position: relative;
  display: block;
  height: 30px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  line-height: 22px;
  padding: 10px 20px;
  font-family: var(--font-sans-serif);
}
.cd-tabs_navigation.nav-link {
  padding: var(--nav-link-padding-y) 0;
}
@media (max-width: 991.98px) {
  .cd-tabs_navigation.nav-link li:first-child {
    margin-left: 0px;
  }
  .cd-tabs_navigation.nav-link li:last-child {
    margin-right: 0px;
  }
}
/* /Tabs Menu */
/* Modal */
.px_15p {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.pb_15p {
  padding-bottom: 15px !important;
}
.modal-body .px-3 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
/* /Modal */
/* Modal myModal-Language */
#myModal-Language .nav-link {
  padding-left: 15px;
  padding-right: 10px;
}
#myModal-Language .nav-sidebar .nav-link span {
  margin-left: 0px;
}
/* /Modal myModal-Language */
/* Contact us */
.contactus .background-container {
  position: relative;
  width: 100%;
  height: 320px;
  background-image: url("../images/main/contactus/contact_hero_bnn_desktop.png");
  background-size: cover;
  background-position: center;
}
.contactus .txt_h1 {
  color: #ffffff;
  font-size: 64px;
  line-height: 1;
  font-family: var(--font-monospace-extrabold);
}

.contactus .txt_h2 {
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  font-family: var(--font-sans-serif);
}
@media (max-width: 1024px) {
  .contactus .background-container {
    background-image: url("../images/main/contactus/contact_hero_bnn_desktop.png");
  }
  .contactus .txt_h1 {
    font-size: 44px;
  }

  .contactus .txt_h2 {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .contactus .txt_h1 {
    font-size: 46px;
  }

  .contactus .txt_h2 {
    font-size: 30px;
  }
}
@media (max-width: 576px) {
  .contactus .background-container {
    background-image: url("../images/main/contactus/contact_hero_bnn_mobile.png");
  }
  .contactus .txt_h1 {
    font-size: 32px;
  }

  .contactus .txt_h2 {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .contactus .background-container {
    background-image: url("../images/main/contactus/contact_hero_bnn_mobile.png");
  }
}
.bg_footer_container {
  color: #555555;
  background-color: #f3f3f3;
}
.head_main_bnn {
  width: 100%;
  object-fit: cover;
  height: 320px;
  overflow: hidden;
}
@media (max-width: 576px) {
  .head_main_bnn {
    height: auto;
  }
}
.bg_img_cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #f3f3f3;
  text-align: center;
}
/* /Contact us */
/* Workspace*/
.custom-table-light-container {
  overflow-x: auto;
  border-radius: 10px; /* เพิ่มมุมมนให้ container */
  position: relative; /* ให้ sticky ทำงานภายใน container นี้ */
  background-color: white; /* กำหนดสีพื้นหลังเพื่อให้ครอบคลุมส่วนเกิน */
  border: 1px solid #ececec; /* เส้นกรอบรอบตาราง */
}

.custom-table-light {
  min-width: 800px; /* กำหนดความกว้างขั้นต่ำ */
  /* border-collapse: separate; */
  border-spacing: 0;
  /* border-radius: 10px; */
}

.custom-table-light td {
  border: 0px solid #ececec;
}
.custom-table-light th {
  border: 0px solid #ececec;
}

.custom-table-light.table > :not(caption) > * > * {
  padding: 8px 5px;
}

.custom-table-light th.custom-sticky-col {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* สีพื้นหลังคอลัมน์ที่ล็อค */
  z-index: 2;
  font-family: var(--font-sans-serif-semibold);
  font-size: 18px;
  line-height: 24px;
  padding: 5px;
  min-width: 200px;
}

.custom-table-light td.custom-sticky-col {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* สีพื้นหลังคอลัมน์ที่ล็อค */
  z-index: 2;
  font-family: var(--font-sans-serif);
  font-size: 18px;
  line-height: 24px;
  padding: 5px;
  min-width: 200px;
}

@media (max-width: 576px) {
  .custom-table-light th.custom-sticky-col,
  .custom-table-light td.custom-sticky-col {
    min-width: 140px;
  }
}

.custom-table-light th.custom-sticky-col {
  z-index: 3; /* เพิ่มระดับ z-index สำหรับส่วนหัว */
}

.custom-table-light td.custom-sticky-col {
  color: #333333;
}
.custom-header-light {
  background-color: #ffffff !important;
  color: #333333;
  text-align: center;
  font-family: var(--font-sans-serif-semibold);
  font-size: 18px;
  line-height: 24px;
}

/* แก้ปัญหามุมมนที่พื้นหลังโผล่ออกมา */
.custom-table-light-container::before,
.custom-table-light-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0px; /* ความกว้างเท่ากับ padding */
  background-color: white; /* สีเดียวกับพื้นหลัง */
  z-index: 10;
}

.custom-table-light-container::before {
  left: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}

.custom-table-light-container::after {
  right: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
  width: 0px;
}

.custom-table-light-container .bg_yellow {
  background-color: #f9fde7;
}
.custom-table-light-container .bg_orange {
  background-color: #feded2;
}
.custom-table-light-container .bg_blue {
  background-color: #e9f4ff;
}
.custom-table-light-container .bg_red {
  background-color: #fbd6e7;
}

.custom-table-light-container th,
.custom-table-light-container td {
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.custom-table-light-container th:last-child,
.custom-table-light-container td:last-child {
  border-right: 0px solid #ececec !important;
}
.custom-table-light-container thead tr {
  border-top: 0px;
}
.custom-table-light-container tbody tr {
  border-bottom: 0px;
}
.custom-table-light-container tbody tr:last-child td {
  border-bottom: 0px;
}

.custom-table-light thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
.custom-table-light thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}
.custom-table-light tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.custom-table-light tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
/* /Workspace */
/* Stopwatch */
.custom-stopwatch-table > thead > * > * {
  border-bottom: var(--table-border-width) solid #ececec;
}
/* /Stopwatch */