@charset "UTF-8";

:root,
[data-color-theme="light"] {
  --primary-temp: #cc0000;
  --primary-temp-rgb: 204, 0, 0;
  --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-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;
  --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-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;
  --dark-rgb: 136, 136, 136;
  --component-active-bg: var(--primary-temp);
  --page-padding-x: 20px;
  --page-header-padding-x: var(--page-padding-x);
  --accordion-btn-padding-x: 15px;
  --popover-body-padding-x: var(--spacer-sm);
  --popover-body-padding-y: calc(var(--spacer-sm) * 0.75);
}

*: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);
}
.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_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_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_14 {
  font-family: var(--font-sans-serif);
  color: #888;
  font-size: 14px;
  line-height: 20px;
}
.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: 20px;
  line-height: 26px;
}
.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_18_bold {
  font-family: var(--font-sans-serif-semibold);
  color: #cc0000;
  font-size: 18px;
  line-height: 24px;
}
.txt_red,
.txt_red_18 {
  font-family: var(--font-monospace);
  color: #cc0000;
  font-size: 18px;
  line-height: 24px;
}
.txt_red_error {
  color: #cc0000;
}
.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;
}
.wmin-85 {
  min-width: 85px;
}
.wmin-100 {
  min-width: 100px !important;
}
.wmin-120 {
  min-width: 120px;
}
.wmin-160 {
  min-width: 160px;
}
.wmin-300 {
  min-width: 300px;
}
.mw-60px {
  max-width: 60px;
}
.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);
}
.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;
}
.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;
}
.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-sidebar .nav-link.active {
  background-color: var(--gray-200);
}
.nav-group-sub .nav-link {
  padding-left: var(--nav-link-padding-x);
}
.popover-body {
  padding: 5px 10px;
  color: var(--popover-body-color);
  font-size: 16px;
}
.size_popup {
  /* min-height: 260px; */
  max-height: 550px;
  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;
}
.txt_profiledropdown_head {
  font-size: var(--txt-profile-font-size);
  line-height: 1.35em !important;
}
.txt_profiledropdown_title {
  font-size: 1rem;
  font-family: var(--font-monospace);
}
.txt_profiledropdown_menu {
  font-size: 1rem;
  line-height: 1.35em !important;
}
.line-height-1 {
  line-height: 1 !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_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;
}
.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: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.75rem;
    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: 1.29rem;
}

@media (min-width: 992px) {
  .nav-sidebar {
    --nav-link-padding-y: 0.325rem;
    --nav-link-padding-x: 1.29rem;
  }
  .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;
}

/* .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);
}
.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);
}
.ic_hover_gray_ccc: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);
}

.txt_header {
  font-family: var(--font-sans-serif-semibold);
  font-size: 2.25rem;
  color: var(--body-color);
  font-style: var();
}
.txt_header_lv2 {
  font-family: var(--font-sans-serif);
  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 {
  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-monospace);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}
.txt_termcond {
  font-family: var(--font-monospace);
  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-monospace-bold);
  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 {
  list-style: none;
}

a.tabs-link {
  color: #000;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  border-bottom: 3px solid transparent;
}
.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;
}
.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: var(--primary-temp);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  opacity: 1;
  border-bottom: 3px solid;
}
.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: 20px;
  line-height: 30px;
  border-radius: 8px;
  --input-border-color: var(--border-color);
  font-family: var(--font-monospace);
  --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 {
  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;
}
.mw_auto {
  min-width: auto;
  max-width: auto;
}
.addtemp_color {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

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

  .p-header-show {
    padding: 0 var(--page-header-padding-x);
  }
}
.nav-sidebar .nav-link:focus,
.nav-sidebar .nav-link:hover {
  background-color: var(--gray-200);
}
.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;
}
.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);
}

@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_incard.pe-5 {
  padding-right: 3.75rem !important;
}
@media (min-width: 768px) {
  .card_incard.pe-md-0 {
    padding-right: 15px !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;
}
.border_grey_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: 20px;
}
.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: 14px;
  line-height: 20px;
  background-color: var(--primary-temp);
  color: #fff;
}
.txt_title_form_888_18 {
  font-family: var(--font-monospace);
  font-size: 18px;
  line-height: 24px;
  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;
}
.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);
}
.form_mutiselect .btn-link {
  border: 0px;
  --btn-padding-y: 0rem;
}
/* /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: 20px;
  --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;
}
.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: 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.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);
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border-color);
  opacity: 1;
  cursor: default;
}
.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: #333333;
}
.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 {
  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);
}
.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(10%) sepia(98%) saturate(4021%) hue-rotate(3deg)
    brightness(113%) contrast(125%);
}
.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.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 181px; /* กำหนดความกว้างที่ต้องการ 16:9 */
  min-height: 82px; /*กำหนดความสูงที่ต้องการ */
  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;
}

.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;
  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.card_horizontal {
    display: flex;
    flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
    height: 100%;
  }
  .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; /* ปรับอัตราส่วนตามเนื้อหา */
  }
  .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.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;
}
.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;
  }
}
.pane_collapse {
  position: absolute;
  top: 3px;
  left: 15px;
  z-index: 1035; /*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;
}

.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 15px;
}
.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;
}
.pb_40p {
  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: 20px !important;
  left: auto !important;
}
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;
}
/* /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: top;
}

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

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

/* ซ่อนเส้นกรอบ */
.table_task table,
.table_task td {
  border: none;
}
.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;
  line-height: 26px;
}
.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;
}

a.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: 101px; /* สามารถปรับเปลี่ยนค่าได้ตามความเหมาะสม */
  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-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: 18px;
  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;
}
.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: #888888;
}
.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_warning.svg");
}

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

.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: #cc0000 !important;
  border-radius: 8px;
}
/* /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;
}
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);
}
/* //////////////////////////// */
/* ปิดการทำงานของ Hover บนลิงก์ที่ปิดการใช้งาน */
/* .menu_bottomnav_mobile a.disabled:hover,
.menu_bottomnav_mobile a[data-disabled="true"]:hover,
.menu_bottomnav_mobile.disabled a:hover,
.menu_bottomnav_mobile .disabled:hover,
.menu_bottomnav_mobile [data-disabled="true"]:hover,
.menu_bottomnav_mobile.disabled:hover {
  color: inherit !important;
  background-color: transparent !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  filter: none !important;
  pointer-events: none !important;
} */

/* ปิดการทำงานของ Hover บนองค์ประกอบภายใน */
/* .menu_bottomnav_mobile a.disabled *,
.menu_bottomnav_mobile a[data-disabled="true"] *,
.menu_bottomnav_mobile .disabled *,
.menu_bottomnav_mobile [data-disabled="true"] * {
  pointer-events: none !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; /* ซ่อนส่วนเกิน */
}

/* 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 {
  /* filter: invert(13%) sepia(62%) saturate(5517%) hue-rotate(355deg)
     brightness(65%) contrast(118%); */
  color: var(--primary-temp);
}

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

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

.menu_bottomnav_mobile a[data-disabled="true"] {
  pointer-events: none;
  /* opacity: 0.5 !important;
  -webkit-opacity: 0.5 !important; */
  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 */