@charset "UTF-8";
/*
 * Merged CSS for VLEARN
 * Priority (highest -> lowest): vlearn_v2.css > plook.css > eduworld.css > vlearn.css
 * File order below is low -> high to preserve cascade overrides.
 */

/* ===== Source: assets/css/vlearn.css ===== */
:root,
[data-color-theme="light"] {
  --primary-temp: #0060d2;
  --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: var(--text-secondary);
  --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: BetterTogether-Regular;
  --font-sans-serif-semibold: BetterTogether-Medium;
  --font-monospace: BetterTogether-Light;
  --font-monospace-bold: BetterTogether-Regular;
  --font-monospace-extrabold: BetterTogether-Medium;
  --font-monospace-black: BetterTogether-Bold;
  --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: var(--text-secondary);
  --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);
}

.page-header {
  --page-header-padding-x: var(--page-padding-x);
}
.page-header.border-bottom {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #ffffff;
}

@media (max-width: 576px) {
  body.d-bottom-nav-none .page-header.border-bottom {
    top: 0;
  }
}
.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-regular);
  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);
}
.h5.modal-title,
h5.modal-titl {
  font-weight: 400;
}
.txt_form_888_18 {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.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 migration alias: match .txt_temp_24_m */
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0px;
}
.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: var(--text-sm-line);
}
.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: var(--text-sm-line);
}
.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: var(--text-sm-line);
}
.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 migration alias: match .txt_333_18_m */
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_333_18_bold {
  font-family: var(--font-monospace-bold);
  color: #333;
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.txt_888_28 {
  font-family: var(--font-monospace);
  color: var(--text-secondary);
  font-size: 28px;
  line-height: 34px;
}
.txt_888_20 {
  font-family: var(--font-monospace);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 26px;
}
.txt_888_18 {
  font-family: var(--font-monospace);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.txt_888_16 {
  font-family: var(--font-monospace);
  color: var(--text-secondary);
  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 migration alias: match .txt_333_18_r */
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_333_18 {
  font-family: var(--font-monospace);
  color: #333;
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.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: var(--text-sm-line);
}
.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: var(--text-sm-line);
}
.txt_red {
  color: #cc0000;
}
.txt_green {
  color: #93c47d;
}
.txt_red_18 {
  font-family: var(--font-monospace);
  color: #cc0000;
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.txt_red_error {
  color: #cc0000 !important;
}
.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-150 {
  min-width: 150px;
}
.wmin-160 {
  min-width: 160px;
}
.wmin-250 {
  min-width: 250px;
}
.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-150px {
  width: 150px;
}
.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);
}

.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);
}

.right-0 {
  right: 0px;
}
.gap_10 {
  display: flex;
  gap: 10px;
}
.nav-link {
  font-size: var(--nav-link-font-size);
}

.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: var(--text-secondary);
}

.btn_light_border.w_70 {
  min-width: 70px;
}
.btn-icon-ccc {
  color: var(--gray-ccc);
}
@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;
  font-family: var(--font-regular);
  border-radius: 5rem;
  font-size: var(--text-sm-size);
  color: var(--text-on-accent);
  background-color: var(--primary-temp);
  padding: 0.1375rem 1rem;
  border: 1px solid var(--primary-temp) !important;
  min-width: 120px;
  height: 40px;
}
.btn_light_border {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-md-line);
  color: var(--body-color);
  background-color: #fff;
  border-radius: 5rem;
  padding: 0rem 1rem;
  border: 1px solid var(--border-color) !important;
  min-width: 80px;
  min-height: 40px;
}

.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: var(--text-secondary);
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: var(--text-secondary);
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #fff;
  --btn-active-bg: #888888;
  --btn-active-border-color: var(--text-secondary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: var(--text-secondary);
}

@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-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;
  }
}

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

.ic_hover_gray_ccc {
  color: var(--gray-ccc);
  transition: color 0.2s ease, fill 0.2s ease;
}

.ic_hover_gray_ccc span {
  color: var(--gray-333);
}

.ic_hover_gray .txt_leavelesson {
  color: #333333;
}

.txt_header {
  font-family: var(--font-medium);
  font-size: var(--text-xl-size);
  line-height: var(--text-xl-line);
  font-weight: var(--text-md-weight);
  color: var(--primary-temp);
}
.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_profile_version {
  font-family: var(--font-monospace-bold);
  font-style: normal;
  color: var(--body-color-gray);
  font-size: 1rem;
}

.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;
}
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 a {
  font-family: var(--font-sans-serif);
  position: relative;
  display: block;
  height: 35px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: var(--text-secondary);
  line-height: 25px;
  padding: 1.167em 0;
} */

.tabs-link {
  padding: 0rem;
}

.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::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: "BetterTogether-Light";
  font-size: 18px;
  line-height: 25px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  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);
  }
}

.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: var(--text-secondary);
  --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-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);
}

.badge {
  font-family: var(--font-monospace);
}

.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_30p {
  padding-right: 30px !important;
  padding: 10px 30px 10px 15px !important;
}
.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: 16px;
}
.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-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-secondary);
}
.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: var(--text-secondary);
}
.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.active {
  color: var(--primary-temp);
  background-color: transparent;
  border-color: var(--border-color);
}
.form_mutiselect .btn-light {
  --btn-color: var(--text-secondary);
  --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;
}

.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 */

/* .form-select {
  --form-select-padding-y: 0.4585rem;
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 20px;
  --form-select-line-height: var(--text-sm-line);
  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;
  --form-select-border-radius: var(--border-sm-radius);
  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;
  border-radius: var(--border-sm-radius);
}

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

.left-0 {
  left: 0;
}
.txt_grey {
  color: var(--gray-ccc) !important;
}

.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;
}

.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(--text-secondary);
}
.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%);
}

.form-check-input {
  --form-check-input-border: calc(var(--border-width) * 1) solid var(--text-secondary);
}
@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;
}

.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.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-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-primary);
  margin-bottom: 0px;
  word-break: break-word;
  font-weight: var(--text-md-weight) !important;
}

.card-speaker {
  font-family: var(--font-light);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--text-secondary);
  font-weight: var(--text-xs-weight);
}
.card-price {
  font-family: var(--font-medium);
  font-size: var(--text-sm-size);
  color: var(--brand-600);
  font-weight: var(--text-md-weight) !important;
  line-height: var(--text-sm-line);
  font-weight: var(--text-md-weight) !important;
}
.card-full-price {
  color: var(--text-secondary) !important;
  font-family: var(--font-light);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  text-decoration: line-through;
}
.text-vote {
  font-family: var(--font-monospace);
  font-size: 16px;
  line-height: 17.6px;
  color: var(--text-secondary);
}
.card-footer {
  --card-cap-bg: transparent;
  border-top: 0px;
  padding-top: 0px;
}
.card-footer-gray {
  font-family: var(--font-monospace);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--text-secondary);
  font-weight: var(--text-xs-weight) !important;
}

.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;
}
.mh_50px {
  min-height: 50px;
}
.mh_40p {
  min-height: 40px;
}

.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;
}
@media (max-width: 576px) {
  .sidebar.course_page {
    --sidebar-section-padding-y: 0rem;
    --sidebar-section-padding-x: 1.25rem;
    --sidebar-width: 100%;
  }
}
.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: var(--gray-ccc);
}
.course_page .nav-sidebar {
  --nav-link-padding-y: 0.465rem;
  --nav-link-padding-x: 1.29rem;
}
.course_page .sidebar-section {
  min-height: 40px;
}
.course_page .sidebar-section .nav-sidebar .nav-link {
  padding-right: 40px;
  font-size: var(--text-sm-size);
  font-family: var(--font-medium);
  font-weight: var(--text-md-weight);
  /* color: var(--text-primary); */
  padding: 2px 15px;
  min-height: 35px;
}
.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 .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.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;
}
.icon_position_left {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.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 .progress-bar {
  border-radius: var(--border-radius);
}
.course_page .nav-sidebar .nav-link span {
  margin-left: 0px;
}
.pane_collapse {
  position: absolute;
  top: 3px;
  left: 15px;
  z-index: 1035; /*left menu : 1040*/
}
.pane_cross {
  position: absolute;
  top: 7px;
  right: 20px;
  z-index: 1035; /*left menu : 1040*/
}
.pane_cross .btn {
  border: 1px solid #ffffff;
}

.p_arr_back {
  padding: 7.438px 0px;
}
.temp-image {
  width: 146px;
  height: 82px;
  object-fit: cover;
  border-radius: 10px !important;
}

.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;
}

.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(--text-secondary);
}

.name-button {
  padding: 0 15px;
}

.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-ckeditor {
  width: 100%;
  border: 1px solid #ececec;
  padding: 10px;
  font-size: 20px;
  color: #333333;
  resize: vertical; /* สามารถปรับขนาดเฉพาะในแนวตั้ง */
  overflow: auto;
  border-radius: var(--border-sm-radius);
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar,
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar.ck-rounded-corners,
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar,
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar.ck-rounded-corners {
  border-top-left-radius: var(--border-sm-radius);
  border-top-right-radius: var(--border-sm-radius);
}

.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  border-bottom-left-radius: var(--border-sm-radius);
  border-bottom-right-radius: var(--border-sm-radius);
}

.ck-editor .ck-editor__editable {
  max-height: 450px;
  min-height: 150px;
  border-bottom-left-radius: var(--border-sm-radius);
  border-bottom-right-radius: var(--border-sm-radius);
}
.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;
}

.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-inner {
    padding-bottom: 3.75rem;
  }
}
/* .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-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 !important; /* ตั้งค่า background เพื่อให้เห็นชัดเจน */
  z-index: 1040; /* ให้อยู่ด้านบนขององค์ประกอบอื่น */
  padding: 10px 0; /* เผื่อพื้นที่ระหว่าง sticky */
}

/* /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-medium) !important;
  font-size: 24px !important;
}
.ck h2 {
  font-family: var(--font-medium) !important;
  font-size: 20px !important;
}
.ck h3 {
  font-family: var(--font-medium) !important;
  font-size: 18px !important;
}
.ck p {
  font-family: var(--font-regular) !important;
  font-size: 18px !important;
}
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input[checked]:before {
  background: var(--primary-temp);
  border-color: var(--primary-temp);
}
.ck {
  --ck-border-radius: var(--border-sm-radius);
}
/* .ck.ck-content .todo-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.ck.ck-content .todo-list li {
  margin-bottom: 0.75rem;
}

.ck.ck-content .todo-list .todo-list__label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: default;
}

.ck.ck-content .todo-list .todo-list__label > span[contenteditable="false"] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-top: 0.5rem;
}

.ck.ck-content .todo-list input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  pointer-events: none;
  cursor: default;
  accent-color: var(--primary-temp, #0060d2);
  display: block;
}

.ck.ck-content .todo-list .todo-list__label__description {
  flex: 1 1 auto;
} */
/* /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;

  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-secondary);
  width: 50%;
}

.table_task .score {
  text-align: left;

  font-family: var(--font-medium);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-primary);
}

/* ซ่อนเส้นกรอบ */
.table_task table,
.table_task td {
  border: none;
}
.card.disabled {
  color: var(--nav-link-disabled-color);
  cursor: default;
  opacity: 1; /*0.5*/
}

/* /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-light);
  line-height: var(--text-xs-line);
  color: var(--text-secondary);
  font-size: var(--text-xs-size);
  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(--text-secondary);
}

.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;
}

.course_info .nav-link {
  /* padding: var(--nav-link-padding-y) var(--nav-link-padding-x); */
  padding-left: 0px;
  background-color: transparent !important;
}

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: var(--gray-200);
}
/* ///////////////////////////////// */
/* 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; */
  display: flex;
  border-radius: var(--border-radius);
}

.banner-container img {
  width: 100%;
  height: auto;
}

.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;
  border-radius: 10px;
}
.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;
}

.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: 0px 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: var(--text-sm-line);
}
.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 .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: var(--text-sm-line);
  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: var(--gray-ccc);
    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-explore-interests .swiper-button-prev::after,
  .home_public .card_slider_container.swiper-explore-interests .swiper-button-next::after {
    display: none;
    font-size: 1.2vw;
  }
}

@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;
  }
}
.txt_title_ranking {
  color: #333333;
  font-size: 128px;
  line-height: 90px;
  font-family: var(--font-monospace-bold);
}
.bg_section_ranking {
  background-color: var(--gray-200);
}
/* /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;
  width: 50%;
}
.table-exam td:nth-child(2),
.table-exam td:nth-child(3) {
  width: 25%;
}
.table-exam td:last-child {
  padding-left: 0px;
  padding-right: 0px;
}
.table-responsive-exam {
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.table-responsive-exam::-webkit-scrollbar {
  display: none;
}

@media (max-width: 576px) {
  .table-responsive-exam .table-exam {
    display: table;
    overflow: visible;
    white-space: normal;
  }
}

/* เฉพาะในมือถือ */
@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 td:first-child {
  width: 50%;
}
.table-exam td:nth-child(2),
.table-exam td:nth-child(3) {
  width: 25%;
}

@media (max-width: 576px) {
  .table-exam td:first-child {
    width: 50%;
  }
  .table-exam td:nth-child(2),
  .table-exam td:nth-child(3) {
    width: 25%;
  }
}

.card-exam-result {
  position: relative;
}
.btn-exam-answer {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 80px;
  height: 30px;
  min-width: 80px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.exam-topic-accordion + .exam-topic-accordion {
  margin-top: 10px;
}
.exam-topic-accordion .accordion-item {
  border-radius: var(--border-sm-radius);
  overflow: hidden;
}

.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: var(--text-sm-line);
}
/* จัดให้คอลัมน์แรกกึ่งกลางซ้าย-ขวา */
.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: #fafafa;
    z-index: 1;
    width: 120px;
  }
  .table-exam-chart th,
  .table-exam-chart td {
    min-width: 120px;
    /* width: 160px; */
  }
}

.accordion-button:not(.collapsed) {
  color: var(--text-secondary);
  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-bettertogether-regular);
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  letter-spacing: 0;
  vertical-align: middle;
}
/* จัดให้คอลัมน์แรกกึ่งกลางซ้าย-ขวา */
.table-exam-topic th:first-child,
.table-exam-topic td:first-child {
  width: 50%;
}
.table-exam-topic th:not(:first-child),
.table-exam-topic td:not(:first-child) {
  width: 16.6667%;
}
.table-exam-topic td:first-child {
  text-align: left;
}
/* .table-exam-topic thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
} */
/* .table-exam-topic thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
} */
.table-exam-topic tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.table-exam-topic tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table-exam-topic th:first-child {
    position: sticky;
    left: 0;
    background-color: #fafafa;
    z-index: 1;
    width: 120px;
  }
  .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: var(--text-secondary);
  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_circle_task_30p {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background-color: #ececec;
  margin-right: 10px;
  margin-bottom: 10px;
}

.rounded_circle_task_30p.active {
  border: 1px solid #cc0000;
}
.rounded_circle_task_30p.task-circle-gray-border {
  border: 2px solid #888888;
}
.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-regular);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-primary);
  min-height: 40px;
}

.radio-input {
  display: none;
}
.radio-custom {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid var(--gray-ccc);
  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:has(input:disabled) {
  cursor: default;
}

.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 */

/* /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;
}

/* Radio-card_noradio */
.radio-card_noradio {
  border: 1px solid #ececec;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  letter-spacing: 0;
  vertical-align: middle;
  color: #333333;
  min-height: 40px;
}

.radio-card_noradio .card-body {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.radio-card_noradio .radio-custom {
  position: absolute;
  display: none;
}

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

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

.radio-card_noradio .radio-input:checked + .card-body {
  border-color: #ff0000;
}

.radio-card_noradio .radio-input:checked + .card-body {
  background-color: #fef9ec;
}

.radio-card_noradio .radio-input:checked + .card-body + .radio-custom {
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked:checked ~ .radio-custom {
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked ~ .radio-custom {
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked ~ .card-body,
.radio-card_noradio .radio-input:checked ~ .radio-custom {
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked ~ .card-body {
  background-color: #fef9ec;
}

.radio-card_noradio input[type="radio"]:checked ~ .card-body {
  background-color: #fef9ec;
}

.radio-card_noradio input[type="radio"]:checked ~ .radio-custom {
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked ~ .card-body {
  background-color: #fef9ec;
  border-color: #eec13f;
}

.radio-card_noradio .radio-input:checked ~ .radio-custom {
  border-color: #eec13f;
  background-image: url("../../assets/images/main/ic_check_warning.svg");
}
.radio-card_noradio:has(input:checked) {
  border-color: #eec13f;
  background-color: #fef9ec;
}
.radio-card_noradio-highlight {
  background: #eec13f1a;
  border: 1px solid #eec13f;
}

.task-exam-head,
.task-exam-head-start,
.task-exam-head-end {
  align-items: center;
}
.task-exam-head-icon,
.task-exam-head-time {
  display: inline-flex;
  align-items: center;
}
.task-exam-head-label {
  display: inline-flex;
  align-items: center;
}
.task-exam-head-icon svg {
  display: block;
}

/* /Radio-card_noradio */

.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: 0px; /* เพิ่มช่องว่างระหว่าง input และ radio */
  text-align: center;
}
.edit_exam_set .card-content {
  display: flex;
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
}
/* .auto-resize {
  overflow: hidden;
  resize: none;
  min-height: 30px;
  width: 100%;
  box-sizing: border-box;
} */
.auto-resize {
  width: 100%;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  box-sizing: border-box;
  padding: 0.5rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0px !important;
  /* 👇 เริ่มต้น 1 บรรทัดจริงๆ */
  height: 30px;
  min-height: 30px;
  max-height: none;
}

/* /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 var(--gray-ccc);
}
.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: var(--text-secondary);
  font-family: "BetterTogether-Regular";
  line-height: 12px;
  font-size: 10px;
  word-break: break-all;
  white-space: nowrap; /* บังคับให้แสดงผลในบรรทัดเดียว */
  overflow: hidden; /* ซ่อนส่วนเกิน */
}

/* Remove hover styles from the text element */

.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 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 */

.padding_outcard {
  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
}
/* /App More */
/* กล่อง tooltip ขาว */
.tooltip.tooltip-white .tooltip-inner {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-radius: 5px;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  position: relative; /* ต้องมีสำหรับ pseudo-element */
}

/* ซ่อนไม่ให้ Bootstrap สร้างหัวลูกศรเดิม */
.tooltip.tooltip-white .tooltip-arrow::before {
  display: none !important;
}

/* สร้างลูกศรใหม่ */
.tooltip.tooltip-white.bs-tooltip-top .tooltip-inner::after {
  content: "";
  position: absolute;
  bottom: -6px; /* ห่างจากกล่อง tooltip */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ffffff; /* หัวลูกศร */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.125); /* ขอบล่างของลูกศร */
  z-index: 1;
}

/* cms report */
.table_gray_border {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overscroll-behavior-x: contain; /* กันไม่ให้ดึง table หลุด */
}
.table_gray_border thead {
  background-color: #fafafa;
  height: 40px;
}
.table_gray_border th {
  height: 40px;
  padding: 5px 15px;
  text-align: center;
  font-family: var(--font-monospace-bold);
  font-size: 18px;
  line-height: var(--text-sm-line);
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
}
.table_gray_border th:last-child {
  border-right: 0px;
}
.table_gray_border tbody tr:last-child td {
  border-bottom: none;
}
.table_gray_border td {
  padding: 5px 15px;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  font-family: var(--font-monospace-bold);
  font-size: 18px;
  line-height: var(--text-sm-line);
}
.table_gray_border td:last-child {
  border-right: 0px;
}

/* เฉพาะในมือถือ */
@media (max-width: 576px) {
  .table_gray_border th:first-child {
    position: sticky;
    left: 0;
    background-color: #fafafa;
    z-index: 1;
    width: 190px;
  }
  .table_gray_border td:first-child {
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 1;
    width: 190px;
  }
  .table_gray_border th,
  .table_gray_border td {
    min-width: 120px;
    /* width: 160px; */
  }
}

.table_gray_border .txt_red {
  color: #cc0000;
}
.table_gray_border .txt_yellow {
  color: #eec13f;
}
.table_gray_border .txt_green {
  color: #93c47d;
}
/* /cms report */

/* ===== Source: assets/css/eduworld.css ===== */
/* EduWorld version 20260302 */
: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: var(--text-secondary);
  --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-bettertogether: BetterTogether-Light;
  --font-bettertogether-regular: BetterTogether-Regular;
  --font-bettertogether-medium: BetterTogether-Medium;
  --font-bettertogether-bold: BetterTogether-Bold;
  /* --font-true-regular: BetterTogether-Light; */
  --body-font-family: var(--font-bettertogether);
  --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: 16px;
  --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-bettertogether);
  --success: #93c47d;
  /* --border-radius: 8px;  */
  --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: var(--text-secondary);
  --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: calc(1875rem / 1000); */
  --modal-bg-gray: #494949;
  --topbar-h: 50px;
  --bottomnav-h: 50px;
  --hero-1: #0060d2;
  --hero-2: #4c53e8;
  --hero-3: #5f50ee;
  --nav-blue: #cc0000;
  --nav-h: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 10px !important);

  /* ✅ page-pad: Mobile 15 / Tablet 20 / Desktop 50 */
  --pad: 15px;
  --grad: linear-gradient(112.77deg, #fe0000 0%, #b32079 60.04%, #7060a9 80.05%, #00c7fe 100.06%);
  --border: #e4e4e4;
  --text: #333;
  --container-w: 450px;
  --container-w-600: 600px;
  /* --radius: var(--border-radius); */
  --blue: var(--primary-temp);
  --muted: #9a9a9a;
}
@media (min-width: 768px) {
  :root {
    --pad: 20px;
  }
}
@media (min-width: 992px) {
  :root {
    --pad: 50px;
  }
}

.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: var(--text-secondary);
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: var(--text-secondary);
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #333;
  --btn-active-bg: transparent;
  --btn-active-border-color: var(--text-secondary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: var(--text-secondary);
}

/* Top Nav + Topbar */

/* หัวข้อ dropdown ปลูกความรู้ - ไล่สีเฉพาะตัวอักษร */

/* =========================
   TOP NAV - Dropdown (Knowledge) : scoped only
========================= */

/* 1) เอาลูกศร (caret) ออกจากปุ่ม dropdown เฉพาะ "ปลูกความรู้" */

/* 2) กัน "ลูกศร/สามเหลี่ยม" ที่บางธีมใส่ให้ dropdown-menu (ถ้ามี) */

/* 3) กล่อง dropdown ให้เหมือนรูป */

/* 4) หัวข้อบรรทัดแรก: "ปลูกความรู้" (กดไม่ได้) + ไล่สีเฉพาะตัวอักษร */

/* 5) รายการเมนูใน dropdown */

/* =========================
   TOP NAV - Dropdown (Profile) : scoped only (ให้ UI ไปแนวเดียวกัน)
========================= */

/* เอา padding ที่ bootstrap ใส่ให้ dropdown-item ข้างในบางที */

/* /Top Nav + Topbar */
/* //////////////////////////////////////////////////////// Home 2026 ///////////////////////////////////////////////////////////////*/
/* =========================
   Base
========================= */
/* html,
body {
  overflow-x: hidden;
}

body {
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  background: #fff;
}
@media (min-width: 992px) {
  body {
    padding-bottom: 0;
  }
} */

/* =========================
   page-pad
========================= */

/* =========================
   edge-swiper (ใช้กับแถว swiper เท่านั้น)
========================= */

/* =========================
   Hero / Topbar
========================= */

/* ทำให้ปุ่ม Profile มีกรอบสูงเท่า toplink และจัดกลาง */

/* =========================
   Banner Swiper (บน Hero)
   - ไม่ล็อกความสูงแล้ว (เหมือน img-fluid)
   - รูปใช้ขนาดเดียวกันทั้งหมด
========================= */

/* picture/img ให้ไหลตามขนาดรูป */

/* =========================
   Banner Swiper S2 (full width)
========================= */

#bannerSwiperS2 {
  width: 100%;
}

/* =========================
   Banner Swiper S2 (Full Width – Fluid Height)
   - ไม่ล็อกความสูง
   - รูปเป็นตัวกำหนดสัดส่วนเอง
========================= */

#bannerSwiperS2 {
  width: 100%;
}

/* picture เป็น block ปกติ */

/* img แบบ img-fluid */

/* =========================
   Category (Hero)
========================= */

/* mobile/tablet left, desktop center */

/* =========================
   Section Head
========================= */

/* =========================
   Video cards
========================= */
/* .content-card {
  width: 195px !important;
} */
/* ใช้ 195px เฉพาะ POD/NEWS */

/* =========================
   VIDEO: size control (fix too big + show 2.5 cards on mobile via Swiper)
========================= */

/* กันรูปดันการ์ดให้สูง/ใหญ่เกิน */

/* POD + NEWS: Desktop >=1200 ให้ 6 ใบเต็มจอ (ไม่ใช้ width 195px) */

/* =========================
   Course band + card
========================= */

/* =========================
   COURSE: fix card too big + equal height
   (scope เฉพาะ #courseSection)
========================= */

/* 1) ให้ wrapper ยืดความสูงเท่ากันได้ */

/* 2) ให้แต่ละ slide ไม่ยืดเต็มความกว้าง และสูงตาม wrapper */
/* ========================= COURSE: Swiper width control fix ========================= */

/* การ์ดยืดสูงเท่ากัน + ปุ่มลงล่าง */

/* 3) ล็อกความกว้างการ์ด (กันชนกับ CSS อื่น) */

/* 4) ทำให้ปุ่มอยู่ล่างเสมอ + ความสูงเท่ากันทุกการ์ด */

/* ===== Course Rating ===== */

/* =========================
   Swiper arrows (desktop hover show)
========================= */

/* =========================
   iOS swipe smooth
========================= */

/* =========================
   Bottom Nav (Mobile only)
========================= */

/* =========================
   Library Category (Swiper)
========================= */

/* ✅ desktop only center */

/* =========================
   lib-section (middle cards) : Mobile layout
   - 1 big card on top
   - 3 remaining cards as row cards (thumb left, text right)
========================= */
@media (max-width: 767.98px) {
  /* 1) ทำให้การ์ด "กลาง" (media-card--mid) กลายเป็นการ์ดแบบแถวเหมือนรูป */

  /* 2) ทำให้การ์ดใน media-stack (media-card--row) เป็นแบบแถวบนมือถือด้วย */

  /* 3) กันข้อความดันเลย์เอาต์: ให้ตัดบรรทัดได้/ไม่ล้น */
}

/* =========================
   Media cards (Library + Podcast)
   - Zoom เฉพาะในกรอบ (ไม่ล้น)
   - มุมมนคงที่
========================= */

/* ✅ เฟรมครอบรูป: clip + radius */

/* title/meta */

/* =========================
   lib-section: fix overflow on Tablet
   (cards in .media-stack must not exceed container width)
========================= */

/* Tablet: วาง 2 ใบข้างกันแบบหารครึ่ง + ไม่ล้น */

/* Desktop (>=1024): กลับมา stack แนวตั้งเหมือนเดิม */

/* เพิ่มความปลอดภัย: กันข้อความ/การ์ดดันกว้างล้นใน flex */

/* =========================
   Podcast Section BG
========================= */

/* =========================
   Tool Section (Swiper cards)
========================= */

/* =========================
   TOOL: equal height cards (final fix)
========================= */

/* ให้ wrapper ยืดความสูงลูก */

/* slide ต้องเป็น flex และสูง 100% */

/* ตัวการ์ดต้องยืดเต็ม slide */

/* body ยืดพื้นที่ที่เหลือ */

/* ปุ่มดันลงล่างสุด */

/* =========================
   Tool Section: กันการ์ดขยายตามข้อความ + ให้ตัดบรรทัดได้
========================= */

/* TOOL: Mobile show 2.5 cards */

/* ========================= TOOL: keep slide fluid but cap card ========================= */

/* ✅ บังคับให้ข้อความยาวตัดบรรทัด ไม่ดันการ์ดให้กว้างขึ้น */

/* Footer Social */

/* =========================
   POD + NEWS: responsive card width for Swiper
   - <1200: swipe (auto width card)
   - >=1200: 6 cards full width (Swiper controls slide width)
========================= */

/* default (<1200): ใช้การ์ดกว้างคงที่ให้เลื่อนได้สวย */

/* Desktop >=1200: ยกเลิกความกว้างคงที่ ให้ Swiper คำนวณเองจาก slidesPerView:6 */
@media (min-width: 1200px) {
  /* กัน element ข้างในทำให้ slide พยายามขยาย */
}
/* POD + NEWS: mobile/tablet ให้เป็นการ์ดกว้างคงที่เพื่อเลื่อนได้ */

/* Desktop >=1200: ให้ Swiper คุมความกว้างเองตาม slidesPerView:6 */

/* Modal */

.modal-title {
  font-family: var(--font-bettertogether-medium);
}

/* /Modal */
/* Hover /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* hover zoom (เหมือน video/course: scale ที่ slide) */
@media (hover: hover) and (pointer: fine) {
  #toolSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
/* ========================
   Desktop-only hover effects
   - show arrows
   - hover states
   - video/course zoom (slide scale)
   - media thumb zoom-in (clip in frame)
========================= */
@media (hover: hover) and (pointer: fine) {
  /* show arrows on hover */

  /* toplinks hover */

  /* cat hover */

  /* see-all hover */

  /* course button hover */

  /* lib cat hover */

  /* ===== Video zoom (slide scale) ===== */
  #videoSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* ===== Course zoom (slide scale) ===== */
  #courseSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* ===== Media thumb zoom-in (ไม่ล้น) ===== */
  /* ทำเฟรมครอบรูป: ใช้ pseudo wrapper แบบไม่แก้ HTML */

  /* ซูมเฉพาะรูป + อยู่ในกรอบมุมมนเดิม */

  /* register login */

  /* /register login */

  /* hover แบบในรูป */

  /* (optional) active ไม่ต้องไฮไลท์สีฟ้าแบบ bootstrap */

  /* .dropdown-menu {
    --dropdown-zindex: 1000;
    --dropdown-min-width: 13.75rem;
    --dropdown-padding-x: 0;
    --dropdown-padding-y: 0.625rem;
    --dropdown-spacer: 0.125rem;
    --dropdown-font-size: var(--body-font-size);
    --dropdown-color: var(--body-color);
    --dropdown-bg: var(--white);
    --dropdown-border-color: var(--border-color-translucent);
    --dropdown-border-radius: var(--border-radius);
    --dropdown-border-width: var(--border-width);
    --dropdown-inner-border-radius: calc(var(--border-radius) - (var(--border-width)));
    --dropdown-divider-bg: var(--border-color);
    --dropdown-divider-margin-y: 0.625rem;
    --dropdown-box-shadow: var(--box-shadow-lg);
    --dropdown-link-color: var(--body-color);
    --dropdown-link-hover-color: var(--body-color);
    --dropdown-link-hover-bg: var(--gray-200);
    --dropdown-link-active-color: var(--gray-900);
    --dropdown-link-active-bg: var(--gray-300);
    --dropdown-link-disabled-color: var(--gray-500);
    --dropdown-item-padding-x: var(--spacer);
    --dropdown-item-padding-y: calc(var(--spacer) * 0.4);
    --dropdown-header-color: rgba(var(--body-color-rgb), 0.5);
    --dropdown-header-padding-x: var(--spacer);
    --dropdown-header-padding-y: 0.625rem;
    position: absolute;
    z-index: var(--dropdown-zindex);
    display: none;
    min-width: var(--dropdown-min-width);
    padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
    margin: 0;
    font-size: var(--dropdown-font-size);
    color: var(--dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--dropdown-bg);
    background-clip: padding-box;
    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-box-shadow);
  } */
}

/* =========================
   Touch devices (no hover tricks)
========================= */
@media (hover: none) and (pointer: coarse) {
  /* a:hover {
    color: inherit !important;
  } */
}
/* / Hover ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /Home 2026 */
/* Register - Login */

/* ===== Topnav (fixed + bottom border) ===== */

/* ===== Page Form Scope ===== */

/* ===== Container 450px ===== */

/* ===== Container 600px ===== */
.page_form .wrap-md {
  width: min(var(--container-w-600), calc(100% - 0px));
}
/* ===== Container 800px ===== */
.page_form .wrap-lg {
  width: min(var(--container-w-800), calc(100% - 0px));
}
/* ===== Container 1000px ===== */
.page_form .wrap-xl {
  width: min(var(--container-w-1000), calc(100% - 0px));
}

/* ===== Title (gradient text) ===== */

/* ===== Buttons / Inputs ===== */

/* ===== Input ===== */

/* password eye */

/* ล็อกสี placeholder ให้ชัด (iOS ต้องมี ::-webkit-input-placeholder) */

/* ถ้ามี autofill แล้ว placeholder/สีเพี้ยน */

/* Chrome / Edge */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Edge (Chromium) */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* Safari / Chrome */
input[type="password"]::-webkit-textfield-decoration-container {
  /* display: none; */
}
input[type="password"]::-ms-reveal {
  display: none !important;
}

/* ✅ สำคัญ: ล็อก checkbox ไม่ให้ shrink ใน flex */

/* ตอนติ๊ก */

/* วาดเครื่องหมายถูก */

/* link */

/* Responsive */

.btn-google {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  position: relative;
}

.btn-google .google-ico {
  flex: 0 0 auto;
  margin-left: 0; /* ชิดซ้าย */
}

.btn-google .google-text {
  flex: 1;
  text-align: center; /* ข้อความยังอยู่กลางปุ่ม */
  color: #333333;
  font-size: 16px;
}

/* /Register - Login */
/* DateTime Picker */
/* .tempus-dominus-widget {
  position: absolute !important;
  z-index: 9999 !important;
} */

/* ====== พื้นหลัง popup ====== */

/* ====== ตัวเลขชั่วโมง/นาที ====== */

/* ====== ปุ่มลูกศรขึ้น/ลง ====== */

/* ====== ปุ่ม ====== */

/* ====== Hover วัน/เดือน/ปี ====== */

/* ✅ ควบคุมตำแหน่ง popup */

/* ปิดวงกลมสีฟ้ารอบปุ่มทั้งหมดใน Tempus Dominus */

/* บาง browser ใช้ focus ring แบบ webkit */

/* /DateTime Picker */
/* กัน text ชนปุ่มตา */
.page_form .input {
  padding-right: 44px; /* เผื่อพื้นที่ให้ปุ่มตา */
}

/* จัดปุ่มตาให้อยู่กลางแบบนิ่ง */

/* Slide Left Menu ////////////////////////////////////////////////////////////////// */

.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;
}

[data-bs-toggle="tooltip"] {
  cursor: pointer;
}

/* :root {
  --rainbowStroke: url(#rainbowStroke);
} */

/* ให้ icon+text อยู่บรรทัดเดียวกัน */
/* .nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
} */

/* กัน style เดิมที่ใส่ margin-right ให้ svg */
/* .nav-sidebar .nav-link svg {
  margin-right: 0 !important;
  min-height: unset !important;
  display: block;
} */

/* ปกติ */
/* .nav-sidebar .nav-link {
  color: #6b7280;
} */

/* ✅ hover/active เปลี่ยนเฉพาะ stroke ของ element ที่มี attribute stroke */
/* .nav-sidebar .nav-link:hover svg [stroke],
.nav-sidebar .nav-link.active svg [stroke] {
  stroke: var(--rainbowStroke) !important;
}
.nav-sidebar .nav-link svg path {
  fill: #6b7280;
} */

/* ===== Hover Rainbow ===== */

/* .nav-sidebar .nav-link:hover svg path {
  fill: url(#rainbowStroke);
} */

/* ===== Active Rainbow ===== */

/* .nav-sidebar .nav-link.active svg path {
  fill: url(#rainbowStroke);
} */
/* /Slide Left Menu ////////////////////////////////////////////////////////////////// */
/* GSchool.css - Update */

/* /GSchool.css - Update */
/* User Profile */

/* /User Profile */

/* ===== Source: assets/css/plook.css ===== */
: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: var(--text-secondary);
  --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-bettertogether: BetterTogether-Light;
  --font-bettertogether-regular: BetterTogether-Regular;
  --font-bettertogether-medium: BetterTogether-Medium;
  --font-bettertogether-bold: BetterTogether-Bold;
  /* --font-true-regular: BetterTogether-Light; */
  --body-font-family: var(--font-bettertogether);
  --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: 16px;
  --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-bettertogether);
  --success: #93c47d;
  /* --border-radius: 8px; */
  --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: var(--text-secondary);
  --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: calc(1875rem / 1000); */
  --modal-bg-gray: #494949;
  --topbar-h: 50px;
  --bottomnav-h: 50px;
  --hero-1: #0060d2;
  --hero-2: #4c53e8;
  --hero-3: #5f50ee;
  --nav-blue: #cc0000;
  --nav-h: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 10px !important);

  /* ✅ page-pad: Mobile 15 / Tablet 20 / Desktop 50 */
  --pad: 15px;
  --grad: linear-gradient(112.77deg, #fe0000 0%, #b32079 60.04%, #7060a9 80.05%, #00c7fe 100.06%);
  --border: #e4e4e4;
  --text: #333;
  --container-w: 450px;
  --radius: var(--border-sm-radius);
  --blue: var(--primary-temp);
  --muted: #9a9a9a;
}
@media (min-width: 768px) {
  :root {
    --pad: 20px;
  }
}
@media (min-width: 992px) {
  :root {
    --pad: 50px;
  }
}

.btn-to-top-visible {
  visibility: visible;
  opacity: 0.75;
}
.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: var(--text-secondary);
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: var(--text-secondary);
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #333;
  --btn-active-bg: transparent;
  --btn-active-border-color: var(--text-secondary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: var(--text-secondary);
  min-width: 70px;
}
.g-15p,
.g_15p {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
  --gutter-x: 16px;
  --gutter-y: 16px;
}
.gap-15p,
.gap_15p {
  gap: 15px !important;
}
.row {
  --gutter-x: 16px;
}
.txt_888_14_l {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.txt_888_14_r {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.txt_888_16_r {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.txt_888_16_m {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.txt_333_18_r {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_333_16_r {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.txt_333_14_r {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.txt_333_32_m {
  color: #333333;
  font-family: var(--font-medium);
  font-weight: var(--fw-500);
  font-size: var(--text-xxl-size);
  line-height: var(--text-xxl-line);
  letter-spacing: 0px;
}
.txt_333_24_m {
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0px;
}
.txt_333_20_m {
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_333_18_m {
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_333_16_m {
  color: #333333;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}
.txt_000_24_m {
  color: #000000;
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0px;
}
.txt_red_18_r {
  color: #cc0000;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
.txt_red_14_r {
  color: #cc0000;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.txt_temp_16_r {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.ic_hover_gray {
  color: var(--text-secondary);
}
.txt_temp_24_m {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0px;
}
.txt_temp_16_m {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: var(--text-md-weight);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.h_40p {
  height: 40px;
}
/* Top Nav + Topbar */
.toplink::after {
  display: none !important;
}
.toplinks .dropdown-menu {
  border: 1px solid #e4e4e4;
}
/* หัวข้อ dropdown ปลูกความรู้ - ไล่สีเฉพาะตัวอักษร */
.dropdown-knowledge-header {
  background: linear-gradient(112.77deg, #fe0000 0%, #b32079 60.04%, #7060a9 80.05%, #00c7fe 100.06%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  padding: 12px 16px;
  cursor: default;
}

/* =========================
   TOP NAV - Dropdown (Knowledge) : scoped only
========================= */

/* 1) เอาลูกศร (caret) ออกจากปุ่ม dropdown เฉพาะ "ปลูกความรู้" */
.toplinks .dropdown > .toplink.dropdown-toggle::after {
  display: none !important;
}

/* 2) กัน "ลูกศร/สามเหลี่ยม" ที่บางธีมใส่ให้ dropdown-menu (ถ้ามี) */
.dropdown-menu-knowledge::before,
.dropdown-menu-knowledge::after,
.dropdown-menu-profile::before,
.dropdown-menu-profile::after {
  content: none !important;
  display: none !important;
}

/* 3) กล่อง dropdown ให้เหมือนรูป */
.dropdown-menu-knowledge {
  min-width: 240px;
  padding: 5px 0;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* ให้มุมมนไม่แตกตอน hover */
}

/* 4) หัวข้อบรรทัดแรก: "ปลูกความรู้" (กดไม่ได้) + ไล่สีเฉพาะตัวอักษร */
.dropdown-menu-knowledge .dropdown-knowledge-header {
  display: inline-block; /* สำคัญมาก */

  background-image: linear-gradient(90deg, #fe0000 0%, #b32079 50%, #7060a9 75%, #00c7fe 100%);

  background-size: 100% 100%; /* ไล่เต็มความกว้างข้อความ */
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  font-weight: 500;

  padding: 5px 15px;
  pointer-events: none;
}

/* 5) รายการเมนูใน dropdown */
.dropdown-menu-knowledge .dropdown-item {
  padding: 5px 15px;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: #333333;
  background: transparent;
  border-radius: 0;
}

/* =========================
   TOP NAV - Dropdown (Profile) : scoped only (ให้ UI ไปแนวเดียวกัน)
========================= */
.dropdown-menu-profile {
  width: 320px; /* ปรับได้ตามรูป */
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* เอา padding ที่ bootstrap ใส่ให้ dropdown-item ข้างในบางที */
.dropdown-menu-profile .dropdown-item {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: #333333;
}

.txt_profiledropdown_head {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}
.txt_profiledropdown_title {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--text-secondary);
}
.face-profile {
  border: 1px solid #ececec;
  border-radius: 40px;
  vertical-align: middle !important;
  width: 80px;
  height: 80px;
  display: inline-block;
  overflow: hidden;
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--dropdown-link-active-bg);
}
.dropdown-menu {
  /* --dropdown-zindex: 1000;
  --dropdown-min-width: 13.75rem;
  --dropdown-padding-x: 0;
  --dropdown-padding-y: 0.625rem;
  --dropdown-spacer: 0.125rem;
  --dropdown-font-size: var(--body-font-size);
  --dropdown-color: var(--body-color);
  --dropdown-bg: var(--white);
  --dropdown-border-color: var(--border-color-translucent);
  --dropdown-border-radius: var(--border-radius);
  --dropdown-border-width: var(--border-width);
  --dropdown-inner-border-radius: calc(var(--border-radius) - (var(--border-width)));
  --dropdown-divider-bg: var(--border-color);
  --dropdown-divider-margin-y: 0.625rem;
  --dropdown-box-shadow: var(--box-shadow-lg);
  --dropdown-link-color: var(--body-color);
  --dropdown-link-hover-color: var(--body-color);
  --dropdown-link-hover-bg: var(--gray-200); */
  --dropdown-link-active-color: inherit;
  --dropdown-link-active-bg: inherit;
  /* --dropdown-link-disabled-color: var(--gray-500);
  --dropdown-item-padding-x: var(--spacer);*/
  --dropdown-item-padding-y: calc(var(--spacer) * 0.3);
  /*--dropdown-header-color: rgba(var(--body-color-rgb), 0.5);
  --dropdown-header-padding-x: var(--spacer);
  --dropdown-header-padding-y: 0.625rem;
  position: absolute;
  z-index: var(--dropdown-zindex);
  display: none;
  min-width: var(--dropdown-min-width);
  padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
  margin: 0;
  font-size: var(--dropdown-font-size);
  color: var(--dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--dropdown-bg);
  background-clip: padding-box;
  border: var(--dropdown-border-width) solid var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
  box-shadow: var(--dropdown-box-shadow); */
}

/* /Top Nav + Topbar */
/* //////////////////////////////////////////////////////// Home 2026 ///////////////////////////////////////////////////////////////*/
/* =========================
   Base
========================= */
html,
body {
  overflow-x: hidden;
}

body {
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  background: #fff;
  font-size: var(--body-font-size);
  --body-font-size: var(--text-sm-size);
}
@media (min-width: 992px) {
  body {
    padding-bottom: 0;
  }
}

/* =========================
   page-pad
========================= */
.topbar .page-pad {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.page-pad {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .page-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (min-width: 992px) {
  .page-pad {
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
  }
}

/* =========================
   edge-swiper (ใช้กับแถว swiper เท่านั้น)
========================= */
.edge-swiper {
  overflow: hidden;
  padding-bottom: 20px;
  margin: 0 0;
}
.edge-swiper .swiper {
  overflow: visible;
}

/* =========================
   Hero / Topbar
========================= */
.hero-shell {
  background: #ffffff;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hero-shell.pb_header {
  padding-bottom: var(--topbar-h);
}
.topbar {
  height: var(--topbar-h);
  position: fixed;
  top: 0;
  z-index: 1041;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
  border-bottom: 1px solid #ececec;
}

.brand {
  text-decoration: none;
  white-space: nowrap;
}

.toplinks a {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
/* ทำให้ปุ่ม Profile มีกรอบสูงเท่า toplink และจัดกลาง */
.avatar-btn {
  display: inline-flex;
  align-items: center;
  height: 40px; /* หรือ 38px ให้เท่าที่อยากได้ */
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  /* border: 2px solid rgba(255, 255, 255, 0.35); */
}

.topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.topbar.is-scrolled .toplinks a {
  color: #111827;
}
.topbar.is-scrolled .icon-btn {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.06);
  color: #111827;
}
.topbar .topnav-profile {
  text-align: center !important;
  padding: 20px 0px;
}
.topbar .topnav-profile .dropdown-divider {
  margin: 0;
}
.topbar .topnav-profile .dropdown-divider .title {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  leading-trim: NONE;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--text-secondary);
}
.topnav-profile {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
@media (min-width: 992px) {
  .topnav-profile {
    max-height: calc(100vh - 70px);
  }
}
.topnav-profile .dropdown-item {
  padding: 5px 15px;
}
.topnav-profile .dropdown-item.title {
  color: var(--text-secondary);
}
.topnav-profile .txt_changelang {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-regular);
}
/* =========================
   Banner Swiper (บน Hero)
   - ไม่ล็อกความสูงแล้ว (เหมือน img-fluid)
   - รูปใช้ขนาดเดียวกันทั้งหมด
========================= */
.pt_bannerswiper {
  padding-bottom: 20px;
}

.banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* picture/img ให้ไหลตามขนาดรูป */
.banner-card picture {
  display: block;
}

.banner-card .banner-media {
  width: 100%;
  height: auto; /* ✅ สำคัญ: ไม่กำหนดสูง */
  display: block;
  max-width: 100%;
  object-fit: contain; /* จะไม่ crop และไม่ล้น ถ้ารูปสัดส่วนมาตรฐานอยู่แล้ว */
}

/* =========================
   Banner Swiper S2 (full width)
========================= */

#bannerSwiperS2 {
  width: 100%;
}

/* =========================
   Banner Swiper S2 (Full Width – Fluid Height)
   - ไม่ล็อกความสูง
   - รูปเป็นตัวกำหนดสัดส่วนเอง
========================= */
.bannerSwiperS2-section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#bannerSwiperS2 {
  width: 100%;
}
#bannerSwiperS2 .swiper-slide {
  width: 100%;
}

.banner-card-s2 {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* picture เป็น block ปกติ */
.banner-card-s2 picture {
  display: block;
  width: 100%;
}

/* img แบบ img-fluid */
.banner-media-s2 {
  width: 100%;
  height: auto; /* ✅ สำคัญ */
  max-width: 100%;
  display: block;
  object-fit: contain; /* ปลอดภัย แม้จริง ๆ ไม่จำเป็นถ้ารูปสัดส่วนเดียว */
}

/* =========================
   Category (Hero)
========================= */
.cat-item {
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
  width: 70px;
}
@media (min-width: 768px) {
  .cat-item {
    width: 70px;
  }
}
@media (min-width: 992px) {
  .cat-item {
    width: 80px;
  }
}
.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.cat-label {
  font-family: var(--font-bettertogether-regular);
  font-size: 12px;
  line-height: 1;
  opacity: 0.95;
  word-break: break-word;
  text-align: center;
}

/* mobile/tablet left, desktop center */
#catSwiper .swiper-wrapper {
  justify-content: flex-start;
}
@media (min-width: 992px) {
  #catSwiper .swiper-wrapper {
    justify-content: center;
  }
}

/* =========================
   Section Head
========================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 10px;
  align-items: end;
}

.section-head .see-all {
  flex: 0 0 auto; /* ห้ามยืด */
  white-space: nowrap; /* ห้ามขึ้นบรรทัดใหม่ */
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-decoration: none;
  padding-bottom: 2px; /* ขยับลงนิดให้บาลานซ์สายตา */
}

/* =========================
   Video cards
========================= */
/* .content-card {
  width: 195px !important;
} */
/* ใช้ 195px เฉพาะ POD/NEWS */

/* =========================
   VIDEO: size control (fix too big + show 2.5 cards on mobile via Swiper)
========================= */
#videoSection .swiper-slide {
  height: auto;
}

#videoSection .content-card {
  width: 100%; /* ให้การ์ดเต็มความกว้างของ slide ที่ Swiper คำนวณให้ */
  max-width: 100%;
}

/* กันรูปดันการ์ดให้สูง/ใหญ่เกิน */
#videoSection .content-thumb {
  width: 100%;
  height: auto;
  display: block;
}

/* POD + NEWS: Desktop >=1200 ให้ 6 ใบเต็มจอ (ไม่ใช้ width 195px) */
@media (min-width: 1200px) {
  #podSection .content-card,
  #newsSection .content-card {
    width: auto !important; /* ยอมให้ Swiper ใส่ inline width ได้ */
  }
}

.content-thumb {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
}
.content-title {
  margin-top: 10px;
  margin-bottom: 0;
  color: #333333;
  font-size: 16px;
  font-family: var(--font-bettertogether-regular);
  line-height: var(--text-sm-line);
}

/* =========================
   Course band + card
========================= */
.course-section {
  background-image: url("../../assets/images/main/home/vdo/bg_ventura.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  padding: 0 0 10px 0;
}
/* =========================
   COURSE: fix card too big + equal height
   (scope เฉพาะ #courseSection)
========================= */

/* 1) ให้ wrapper ยืดความสูงเท่ากันได้ */

/* 2) ให้แต่ละ slide ไม่ยืดเต็มความกว้าง และสูงตาม wrapper */
/* ========================= COURSE: Swiper width control fix ========================= */
#courseSection .swiper-wrapper {
  align-items: stretch;
}

#courseSection .swiper-slide {
  /* ✅ ห้ามกำหนด width ทับ Swiper */
  height: auto;
  display: flex;
  min-width: 0;
  align-self: stretch;
}

/* การ์ดยืดสูงเท่ากัน + ปุ่มลงล่าง */
#courseSection .course-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* 3) ล็อกความกว้างการ์ด (กันชนกับ CSS อื่น) */
#courseSection .course-card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* 4) ทำให้ปุ่มอยู่ล่างเสมอ + ความสูงเท่ากันทุกการ์ด */
#courseSection .course-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

#courseSection .course-body .btn {
  margin-top: auto !important; /* ดันปุ่มลงล่าง */
}
.course-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 0px 20px 0px #00000026;
}

.course-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}
.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-body {
  padding: 14px 16px 16px;
}

.course-body .fw-bold {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  color: #333333;
  font-weight: 400 !important;
  line-height: var(--text-sm-line);
  margin-bottom: 0;
}

.course-body .muted {
  font-family: var(--font-bettertogether);
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 300 !important;
  line-height: 20px;
}
.highlight_course .fw-bold {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  color: #333333;
  font-weight: 400 !important;
  line-height: var(--text-sm-line);
  margin-bottom: 0;
}
.highlight_course .muted {
  font-family: var(--font-bettertogether);
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 300 !important;
  line-height: 20px;
}

.highlight_course .price {
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  color: #0460d3;
  font-weight: 500 !important;
  line-height: var(--text-sm-line);
}
.highlight_course .text-muted {
  color: #b0b0b0 !important;
  font-family: var(--font-bettertogether);
  font-size: 14px;
  line-height: 20px;
}
/* ===== Course Rating ===== */
.course-rating {
  /* display: inline-flex; */
  align-items: center;
  gap: 10px;
  margin-top: 0px;
  margin-bottom: 15px;
  line-height: 1;
}

.course-rating .stars {
  display: inline-flex;
  gap: 3px;
}

.course-rating .stars i {
  font-size: 10px; /* 10x10px */
  width: 10px;
  height: 10px;
  line-height: 10px;
}

.course-rating .stars .is-on {
  color: #f2c94c; /* เหลือง */
}
.course-rating .stars .is-off {
  color: #ececec; /* เทา */
}

.course-rating .rating-num {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
  font-family: var(--font-bettertogether);
}

.course-body .price {
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  color: #0460d3;
  font-weight: 500 !important;
  line-height: var(--text-sm-line);
}

.course-body .text-muted {
  color: #b0b0b0 !important;
  font-family: var(--font-bettertogether);
  font-size: 14px;
  line-height: 20px;
}

.course-card .btn,
.course-card .btn-primary {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: #fff !important;
  background: linear-gradient(90deg, #0060d2 0%, #5f50ee 100%) !important;
  box-shadow: none !important;
}
#courseSection .fw-bold {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #courseSection .course-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================
   Swiper arrows (desktop hover show)
========================= */
.swiper-shell {
  position: relative;
}
.swiper-shell .swiper-button-prev,
.swiper-shell .swiper-button-next {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%) scale(0.98);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}
.swiper-shell .swiper-button-prev {
  left: 10px !important;
}
.swiper-shell .swiper-button-next {
  right: 10px !important;
}
@media (min-width: 992px) {
  .swiper-shell .swiper-button-prev {
    left: 30px !important;
  }
  .swiper-shell .swiper-button-next {
    right: 30px !important;
  }
}
.swiper-shell .swiper-button-prev::after,
.swiper-shell .swiper-button-next::after {
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: #fff;
}

/* =========================
   iOS swipe smooth
========================= */
.video-swiper .swiper-wrapper,
.course-swiper .swiper-wrapper,
.pod-swiper .swiper-wrapper,
#catSwiper .swiper-wrapper,
#libCatSwiper .swiper-wrapper {
  touch-action: pan-y;
}

/* =========================
   Bottom Nav (Mobile only)
========================= */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--safe-bottom);
  height: calc(var(--nav-h) + var(--safe-bottom));
  z-index: 1025; /*2147483647*/
  pointer-events: none;
  background: transparent !important;
  border: 0 !important;
}
.bottom-nav .bottom-nav-inner {
  pointer-events: auto;
  height: var(--nav-h);
  margin: 0 14px 12px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 50px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 0 10px;
}
.bottom-nav .row {
  height: 100%;
}
.bottom-nav a {
  text-decoration: none;
  color: var(--nav-blue) !important;
  font-weight: 700;
  font-size: 12px;
}
.bottom-nav .nav-ico {
  width: 30px;
  height: 25px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--nav-blue) !important;
  font-size: 18px;
  line-height: 28px;
}
.bottom-nav .nav-txt {
  font-size: 10px;
  font-family: var(--font-bettertogether-regular);
}
.bottom-nav a.inactive {
  opacity: 0.45;
}
.bottom-nav a.active {
  opacity: 1;
}
@media (min-width: 992px) {
  .bottom-nav {
    display: none !important;
  }
}

/* =========================
   Library Category (Swiper)
========================= */
.lib-section {
  padding-bottom: 20px;
}
.lib-cat-edge {
  padding-bottom: 20px;
}

.lib-cat-item {
  text-decoration: none;
  color: var(--blue);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .lib-cat-item {
    width: 70px;
  }
}
@media (min-width: 992px) {
  .lib-cat-item {
    width: 80px;
  }
}

.lib-cat-ico {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--blue);
  border: 1px solid rgba(0, 96, 210, 0.18);
  color: #ffffff;
  font-size: 16px;
  line-height: var(--text-sm-line);
}

.lib-cat-txt {
  margin-top: 6px;
  font-size: 12px;
  line-height: 14px;
  color: var(--blue);
  font-family: var(--font-bettertogether-regular);
  word-break: break-word;
  text-align: center;
}

/* ✅ desktop only center */
#libCatSwiper .swiper-wrapper {
  justify-content: flex-start; /* mobile/tablet */
}
@media (min-width: 992px) {
  #libCatSwiper .swiper-wrapper {
    justify-content: center;
  }
}
/* =========================
   lib-section (middle cards) : Mobile layout
   - 1 big card on top
   - 3 remaining cards as row cards (thumb left, text right)
========================= */
@media (max-width: 767.98px) {
  /* 1) ทำให้การ์ด "กลาง" (media-card--mid) กลายเป็นการ์ดแบบแถวเหมือนรูป */
  .lib-section .media-card--mid {
    display: grid;
    grid-template-columns: 140px 1fr; /* ปรับความกว้างรูปได้ */
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb title"
      "thumb meta";
    column-gap: 12px;
    align-items: center;
  }
  .lib-section .media-card--mid .media-thumb-frame {
    grid-area: thumb;
    width: 100%;
  }
  .lib-section .media-card--mid .media-title {
    grid-area: title;
    margin-top: 0;
    min-width: 0;
  }
  .lib-section .media-card--mid .media-meta {
    grid-area: meta;
    min-width: 0;
  }

  /* 2) ทำให้การ์ดใน media-stack (media-card--row) เป็นแบบแถวบนมือถือด้วย */
  .lib-section .media-card--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .lib-section .media-card--row .media-thumb-frame {
    width: 140px; /* ให้ใกล้เคียงกับการ์ด mid */
    flex: 0 0 140px;
  }
  .lib-section .media-card--row .media-row-body {
    min-width: 0;
    flex: 1 1 auto;
  }
  .lib-section .media-card--row .media-title {
    margin-top: 0;
  }

  /* 3) กันข้อความดันเลย์เอาต์: ให้ตัดบรรทัดได้/ไม่ล้น */
  .lib-section .media-card--mid .media-title,
  .lib-section .media-card--row .media-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* =========================
   Media cards (Library + Podcast)
   - Zoom เฉพาะในกรอบ (ไม่ล้น)
   - มุมมนคงที่
========================= */
.media-card {
  display: block;
  text-decoration: none;
  color: var(--text);
}
.media-thumb-frame {
  border-radius: 20px;
  overflow: hidden;
  /* background: #f3f4f6; */
}
.media-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0; /* ห้ามมี */
  transition: transform 0.35s ease;
}

/* ✅ เฟรมครอบรูป: clip + radius */
.media-card--big .media-thumb,
.media-card--mid .media-thumb,
.media-card--row .media-thumb,
.pod-section .media-thumb,
.news-section .media-thumb {
  border-radius: 20px;
}

/* title/meta */
.media-title {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text);
  line-height: var(--text-sm-line);
  font-family: var(--font-bettertogether-regular);
}
.media-meta {
  margin-top: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  font-family: var(--font-bettertogether);
}

/* =========================
   lib-section: fix overflow on Tablet
   (cards in .media-stack must not exceed container width)
========================= */
.media-stack {
  display: flex;
  flex-direction: column; /* mobile: ซ้อนลง */
  gap: 15px;
}

/* Tablet: วาง 2 ใบข้างกันแบบหารครึ่ง + ไม่ล้น */
@media (min-width: 768px) and (max-width: 991.98px) {
  .media-stack {
    flex-direction: row;
    flex-wrap: wrap; /* กันล้น */
  }
  .media-row-body {
    padding-right: 15px;
  }

  .media-stack > .media-card {
    flex: 1 1 calc(50% - 7.5px); /* 2 ใบ/แถว หักครึ่ง gap */
    max-width: calc(50% - 7.5px);
    min-width: 0; /* สำคัญ: ให้ยอม “หด” ตามกล่อง */
  }
}

/* Desktop (>=1024): กลับมา stack แนวตั้งเหมือนเดิม */
@media (min-width: 1024px) {
  .media-stack {
    flex-direction: column;
  }
  .media-row-body {
    padding-right: 15px;
  }
}

/* เพิ่มความปลอดภัย: กันข้อความ/การ์ดดันกว้างล้นใน flex */
.media-card,
.media-card--row,
.media-row-body {
  min-width: 0;
}

.media-title,
.media-meta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.media-card--row {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
}

.media-row-body {
  width: 100%;
}

@media (min-width: 768px) {
  .media-card--row {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
  }
  .media-card--row .media-thumb-frame {
    width: 50%;
    flex: 0 0 50%;
  }
  .media-card--row .media-row-body {
    width: 50%;
    flex: 0 0 50%;
    min-width: 0;
  }

  .media-card--row .media-title,
  .media-card--row .media-meta {
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .media-card--row .media-title {
    margin-top: 0;
  }
}

/* =========================
   Podcast Section BG
========================= */
.pod-section {
  background-color: #ffffff;
}
/* =========================
   Tool Section (Swiper cards)
========================= */
.bg_gray_f9 {
  background-color: #f9f9f9;
}
.tool-card {
  /* width: 320px; */
  width: 100%;
  display: block;
  text-decoration: none;
  color: #333;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
}

.tool-media {
  padding: 22px 22px 0;
  display: grid;
  place-items: center;
}
.tool-media img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

.tool-body {
  padding: 14px 18px 18px;
}
.tool-title {
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  margin-bottom: 8px;
}
.tool-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.tool-price {
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-size: 16px;
  line-height: var(--text-sm-line);
}
.tool-old {
  color: #b0b0b0;
  text-decoration: line-through;
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-bettertogether);
}
.tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: #5f50ee;
  color: #fff;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-weight: 400;
  width: fit-content;
}
/* =========================
   TOOL: equal height cards (final fix)
========================= */

/* ให้ wrapper ยืดความสูงลูก */

/* slide ต้องเป็น flex และสูง 100% */
#toolSection .swiper-slide {
  display: flex;
  height: auto; /* สำคัญ */
}

/* ตัวการ์ดต้องยืดเต็ม slide */
#toolSection .tool-card {
  /* width: 320px;
  max-width: 320px; */

  display: flex;
  flex-direction: column;
  height: 100%;
}

/* body ยืดพื้นที่ที่เหลือ */
#toolSection .tool-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ปุ่มดันลงล่างสุด */
#toolSection .tool-badge,
#toolSection .tool-body .btn {
  margin-top: auto;
}
/* =========================
   Tool Section: กันการ์ดขยายตามข้อความ + ให้ตัดบรรทัดได้
========================= */
.tool-card {
  /* width: 320px;
  max-width: 320px; */
}

.tool-body {
  min-width: 0; /* สำคัญ: ให้ข้อความยอมตัด/ellipsis ใน flex */
}
/* TOOL: Mobile show 2.5 cards */
@media (max-width: 767.98px) {
  #toolSection .tool-card {
    width: 100% !important; /* ให้เต็ม slide */
    max-width: none !important; /* ปลด 320px */
  }
}
#toolSection .swiper-slide,
#toolSection .tool-card,
#toolSection .tool-body {
  min-width: 0;
}
#toolSection .tool-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* เอาออกถ้าไม่อยาก clamp */
  overflow: hidden;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
/* ========================= TOOL: keep slide fluid but cap card ========================= */
#toolSection .swiper-wrapper {
  align-items: stretch;
}

#toolSection .swiper-slide {
  display: flex;
  height: auto;
  min-width: 0;
}

#toolSection .tool-card {
  width: 100%;
  max-width: 360px; /* ✅ ปรับได้: 320/340/360 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ✅ บังคับให้ข้อความยาวตัดบรรทัด ไม่ดันการ์ดให้กว้างขึ้น */
.tool-title {
  white-space: normal !important;
  overflow-wrap: anywhere; /* กันคำยาวๆ */
  word-break: break-word; /* fallback */
}

.tool-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tool-section .remark {
  color: var(--text);
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-weight: 400;
  font-family: var(--font-bettertogether-regular);
}
.site-footer {
  background-color: #f2f4f6;
  padding: 40px 0;
}
.footer-brand {
  margin-bottom: 10px;
}
.footer-copy {
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}
.footer-head {
  font-size: 16px;
  line-height: var(--text-sm-line);
  color: var(--primary-temp);
  font-family: var(--font-bettertogether-medium);
  font-weight: 500;
}
.footer-link {
  display: table;
  flex-direction: row;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  color: var(--text);
  font-size: 16px;
  line-height: var(--text-sm-line);
}
/* Footer Social */
.footer-social {
  display: flex;
  gap: 10px; /* วงกลมห่างกัน 10px */
  margin-top: 10px; /* ปรับได้ตามชอบ */
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary-temp);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #fff; /* ไอคอนสีขาว */
  transition: background 0s ease, transform 0s ease;
}

.footer-social a i {
  color: #fff;
  font-size: 18px; /* ปรับขนาดไอคอนให้บาลานซ์ในวง 40px */
  line-height: 28px;
}

/* =========================
   POD + NEWS: responsive card width for Swiper
   - <1200: swipe (auto width card)
   - >=1200: 6 cards full width (Swiper controls slide width)
========================= */

/* default (<1200): ใช้การ์ดกว้างคงที่ให้เลื่อนได้สวย */
#podSection .content-card,
#newsSection .content-card {
  width: 195px !important;
}

/* Desktop >=1200: ยกเลิกความกว้างคงที่ ให้ Swiper คำนวณเองจาก slidesPerView:6 */
@media (min-width: 1200px) {
  #podSection .content-card,
  #newsSection .content-card {
    width: unset !important; /* หรือ initial ก็ได้ */
    max-width: none !important;
  }

  /* กัน element ข้างในทำให้ slide พยายามขยาย */
  #podSection .media-card,
  #newsSection .media-card {
    width: 100%;
  }

  #podSection .media-thumb-frame,
  #newsSection .media-thumb-frame {
    width: 100%;
  }
}
/* POD + NEWS: mobile/tablet ให้เป็นการ์ดกว้างคงที่เพื่อเลื่อนได้ */
#podSection .pod-card,
#newsSection .news-card {
  width: 195px;
}

/* Desktop >=1200: ให้ Swiper คุมความกว้างเองตาม slidesPerView:6 */
@media (min-width: 1200px) {
  #podSection .pod-card,
  #newsSection .news-card {
    width: auto; /* ไม่ต้อง !important */
  }
}
/* Modal */
.modal {
  --modal-header-padding-x: 15px;
  --modal-header-padding-y: 10px;
  --modal-header-padding: 10px 15px 10px 15px;
  --modal-padding: 10px;
  --modal-header-border-width: 0px;
  --modal-footer-border-width: 0px;
  --modal-border-radius: 20px;
}
.modal-header {
  padding: var(--modal-header-padding);
  border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
}
.modal-title {
  font-family: var(--font-bettertogether-medium);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: var(--text-md-weight);
}
.modal-header .btn-close {
  padding: 0;
  margin: 0;
}
.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;
}
.txt_modal_title {
  margin: 0 0 10px;
  text-align: center;
  background: var(--grad);
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  line-height: 34px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  width: max-content;
}
.txt_modal_detail {
  font-family: var(--font-bettertogether-regular);
  font-size: 18px;
  line-height: 28px;
}
.btn-close {
  --btn-close-color: var(--text-secondary);
  --btn-close-width: 0.875em;
  --btn-close-height: 0.875em;
  --btn-close-opacity: 0.45;

  width: var(--btn-close-width);
  height: var(--btn-close-height);
  opacity: var(--btn-close-opacity);

  /* ✅ สีของปุ่ม (ควบคุมด้วยตัวแปรได้จริง) */
  background-color: var(--btn-close-color);

  /* ✅ ใช้ SVG เป็น mask (ให้สีมาจาก background-color) */
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20'%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/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20'%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/100% 100% no-repeat;

  /* กัน Bootstrap เดิม */
  background-image: none !important;
  filter: none !important;
}

@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);
}
#myModal-Language .nav-link {
  padding: 5px 15px 5px 15px;
}
.modal .nav-sidebar .nav-item:not(.nav-item-header):first-child {
  padding-top: 0px;
}
.modal .nav-sidebar .nav-item:not(.nav-item-header):last-child {
  padding-bottom: 0px;
}
/* /Modal */
/* Hover /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* hover zoom (เหมือน video/course: scale ที่ slide) */
@media (hover: hover) and (pointer: fine) {
  #toolSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #toolSection .swiper {
    overflow: visible !important;
  }
  #toolSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
}
/* ========================
   Desktop-only hover effects
   - show arrows
   - hover states
   - video/course zoom (slide scale)
   - media thumb zoom-in (clip in frame)
========================= */
@media (hover: hover) and (pointer: fine) {
  /* show arrows on hover */

  /* toplinks hover */

  /* cat hover */

  /* see-all hover */

  /* course button hover */

  /* lib cat hover */

  /* ===== Video zoom (slide scale) ===== */
  #videoSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #videoSection .swiper {
    overflow: visible !important;
  }
  #videoSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }

  /* ===== Course zoom (slide scale) ===== */
  #courseSection {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #courseSection .swiper {
    overflow: visible !important;
  }
  #courseSection .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }

  /* ===== Media thumb zoom-in (ไม่ล้น) ===== */
  /* ทำเฟรมครอบรูป: ใช้ pseudo wrapper แบบไม่แก้ HTML */
  .media-card--big,
  .media-card--mid,
  .media-card--row,
  .pod-section .media-card {
    position: relative;
  }

  /* ซูมเฉพาะรูป + อยู่ในกรอบมุมมนเดิม */
  .media-card--big .media-thumb,
  .media-card--mid .media-thumb,
  .media-card--row .media-thumb,
  .pod-section .media-thumb {
    transition: transform 0.35s ease;
    will-change: transform;
    transform: translateZ(0);
  }

  /* register login */

  /* /register login */

  .dropdown-menu-profile header.dropdown-item {
    margin-top: 10px;
  }
  /* hover แบบในรูป */

  /* (optional) active ไม่ต้องไฮไลท์สีฟ้าแบบ bootstrap */
  .dropdown-menu-knowledge .dropdown-item:active {
    background: #fafbfc;
    color: #333333;
  }
  .btn-check:checked + .btn,
  .btn.active,
  .btn.show,
  .btn:first-child:active,
  :not(.btn-check) + .btn:active {
    color: var(--btn-active-color);
    background: #fff;
  }
  :not(.btn-check) + .btn-primary:active {
    background: #ffffff;
    color: var(--primary-temp);
    border: 1px solid var(--primary-temp) !important;
  }
  :not(.btn-check) + .btn-secondary:active {
    background: var(--grad) !important;
    color: #fff;
    border: 0;
  }
  .btn-secondary:first-child:active {
    /* background: var(--grad) !important; */
    background: var(--primary-temp) !important;
    color: #fff;
  }
  /* .dropdown-menu {
    --dropdown-zindex: 1000;
    --dropdown-min-width: 13.75rem;
    --dropdown-padding-x: 0;
    --dropdown-padding-y: 0.625rem;
    --dropdown-spacer: 0.125rem;
    --dropdown-font-size: var(--body-font-size);
    --dropdown-color: var(--body-color);
    --dropdown-bg: var(--white);
    --dropdown-border-color: var(--border-color-translucent);
    --dropdown-border-radius: var(--border-radius);
    --dropdown-border-width: var(--border-width);
    --dropdown-inner-border-radius: calc(var(--border-radius) - (var(--border-width)));
    --dropdown-divider-bg: var(--border-color);
    --dropdown-divider-margin-y: 0.625rem;
    --dropdown-box-shadow: var(--box-shadow-lg);
    --dropdown-link-color: var(--body-color);
    --dropdown-link-hover-color: var(--body-color);
    --dropdown-link-hover-bg: var(--gray-200);
    --dropdown-link-active-color: var(--gray-900);
    --dropdown-link-active-bg: var(--gray-300);
    --dropdown-link-disabled-color: var(--gray-500);
    --dropdown-item-padding-x: var(--spacer);
    --dropdown-item-padding-y: calc(var(--spacer) * 0.4);
    --dropdown-header-color: rgba(var(--body-color-rgb), 0.5);
    --dropdown-header-padding-x: var(--spacer);
    --dropdown-header-padding-y: 0.625rem;
    position: absolute;
    z-index: var(--dropdown-zindex);
    display: none;
    min-width: var(--dropdown-min-width);
    padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
    margin: 0;
    font-size: var(--dropdown-font-size);
    color: var(--dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--dropdown-bg);
    background-clip: padding-box;
    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-box-shadow);
  } */

  #toggleEyeBtn.btn:active {
    border-color: transparent !important;
  }
}

/* =========================
   Touch devices (no hover tricks)
========================= */
@media (hover: none) and (pointer: coarse) {
  /* a:hover {
    color: inherit !important;
  } */
}
/* / Hover ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /Home 2026 */
/* Register - Login */

/* ===== Topnav (fixed + bottom border) ===== */
.topnav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 999;
}
.topnav-inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}
.brand img {
  height: 32px;
  width: auto;
  display: block;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-weight: 400;
}
.nav-links a {
  text-decoration: none;
  color: #333;
  padding: 8px 6px;
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #999;
  margin-left: 6px;
}

/* ===== Page Form Scope ===== */
.page_form {
  min-height: 100%;
  padding-top: calc(var(--nav-h) + -10px);
  padding-bottom: 60px;
  display: flex;
  justify-content: center;
}

/* ===== Container 450px ===== */
.page_form .wrap {
  width: min(var(--container-w), calc(100% - 0px));
}
/* ===== Container 600px ===== */
.page_form .wrap-md {
  width: min(620px, calc(100% - 0px));
}
/* ===== Container 800px ===== */
.page_form .wrap-lg {
  width: min(800px, calc(100% - 0px));
}
/* ===== Container 1000px ===== */
.page_form .wrap-xl {
  width: min(1000px, calc(100% - 0px));
}
.page_form .wrap-auto {
  width: 100%;
}

/* ===== Title (gradient text) ===== */
.page_form .title {
  margin: 0 0 20px;
  text-align: center;
  background: var(--grad);

  flex: 1 1 auto;
  min-width: 0;

  font-family: var(--font-bettertogether-medium);
  font-size: 32px;
  line-height: 40px;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  width: max-content;
}
@media (max-width: 528px) {
  .page_form .title {
    font-size: 28px;
    line-height: 38px;
  }
}

.content .title_24p {
  margin: 0 0 10px;
  text-align: center;
  background: var(--grad);

  flex: 1 1 auto;
  min-width: 0;

  font-family: var(--font-bettertogether-medium);
  font-size: 24px;
  line-height: 34px;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  width: max-content;
}
@media (max-width: 528px) {
  .content .title_24p {
    font-size: 24px;
    line-height: 34px;
  }
}

/* ===== Buttons / Inputs ===== */
.page_form .btn {
  width: fit-content;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-weight: 400;
  font-family: var(--font-bettertogether-regular);
}
.btn-primary {
  background: var(--primary-temp);
  color: #fff;
  --btn-border-radius: var(--border-radius);
}

.btn-secondary {
  background: #ffffff;
  color: #333333;
  border: 1px solid #ececec !important;
  --btn-border-radius: var(--border-radius);
}
.btn-secondary.logout,
.btn-secondary {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  height: 40px;
  border-radius: 999px;
}
.page_form .btn-ghost {
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 400;
  font-family: var(--font-bettertogether-regular);
  width: 100%;
}
.page_form .divider {
  margin: 20px 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}

.page_form .divider::before,
.page_form .divider::after {
  content: "";
  /* height: 1px; */
  flex: 1;
  background: rgba(0, 0, 0, 0.08);
}

.page_form .form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ===== Input ===== */
.page_form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* password eye */
.page_form .eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #999;
}
.page_form .field {
  position: relative;
}

.page_form .eye svg {
  width: 18px;
  height: 18px;
}
.page_form .hint {
  margin: 0px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #888;
  font-family: var(--font-bettertogether);
  font-weight: 300;
}
.page_form .note {
  margin: 0px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  text-align: center !important;
}
.page_form .note a {
  color: #333;
}
.page_form .p_check {
  padding: 0 20px; /* mobile */
}
.page_form input.input,
.page_form input.form-control {
  color: var(--text-secondary);
  -webkit-text-fill-color: var(--text-secondary); /* สำคัญสำหรับ iOS */
}

/* ล็อกสี placeholder ให้ชัด (iOS ต้องมี ::-webkit-input-placeholder) */
.page_form input.input::placeholder,
.page_form input.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.page_form input.input::-webkit-input-placeholder,
.page_form input.form-control::-webkit-input-placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

/* ถ้ามี autofill แล้ว placeholder/สีเพี้ยน */
.page_form input.input:-webkit-autofill,
.page_form input.form-control:-webkit-autofill {
  -webkit-text-fill-color: #888888 !important;
  transition: background-color 9999s ease-out 0s; /* กันเหลืองของ autofill */
}
.msg_fotgot,
.msg_register {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
  text-align: center;
}
/* Chrome / Edge */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Edge (Chromium) */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* Safari / Chrome */
input[type="password"]::-webkit-textfield-decoration-container {
  /* display: none; */
}
input[type="password"]::-ms-reveal {
  display: none !important;
}

@media (min-width: 768px) {
  .page_form .p_check {
    padding: 0 90px; /* desktop: เว้นข้างละ 100px */
  }
}

.page_form .check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0px;
  color: #333 !important;
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-family: var(--font-bettertogether-regular);
}

/* ✅ สำคัญ: ล็อก checkbox ไม่ให้ shrink ใน flex */
.page_form .check input[type="checkbox"] {
  width: 20px;
  height: 20px;

  flex: 0 0 20px; /* ✅ กันโดนบีบ */
  flex-shrink: 0; /* ✅ กันโดนบีบ */
  min-width: 20px; /* ✅ กันโดนบีบ */
  min-height: 20px;

  box-sizing: border-box;
  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 1px solid #888888;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

/* ตอนติ๊ก */
.page_form .check input[type="checkbox"]:checked {
  background: var(--primary-temp);
  border-color: var(--primary-temp);
}

/* วาดเครื่องหมายถูก */
.page_form .check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* link */
.page_form .check a {
  color: #333333;
  text-decoration: none;
}

.page_form .submit {
  margin-top: 10px;
  height: 40px;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-left: 30px;
  padding-right: 30px;
  min-width: 100px;
}

.btn_between .submit {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.page_form .foot {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  font-family: var(--font-bettertogether);
}

.page_form .alert_msg {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #cc0000;
  font-family: var(--font-bettertogether);
}

.page_form .input.is-invalid {
  border: 1px solid #cc0000;
}

/* Responsive */
@media (max-width: 991.98px) {
  .page_form {
    padding-top: calc(var(--nav-h) + -20px);
  }

  .page_form .wrap {
    width: min(var(--container-w), calc(100% - 0px));
  }
}
.btn-google,
.btn-social {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  position: relative;
}

.btn-google .google-ico,
.btn-social .social-ico {
  flex: 0 0 auto;
  margin-left: 0; /* ชิดซ้าย */
}

.btn-google .google-text,
.btn-social .social-text {
  flex: 1;
  text-align: center; /* ข้อความยังอยู่กลางปุ่ม */
  color: #333333;
  font-size: 16px;
}
.img_success {
  width: 100%;
  max-width: 300px;
  max-height: 300px;
}
/* /Register - Login */
/* DateTime Picker */
/* .tempus-dominus-widget {
  position: absolute !important;
  z-index: 9999 !important;
} */

/* ====== พื้นหลัง popup ====== */
.tempus-dominus-widget {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #ececec !important;
  font-family: var(--font-sans-serif-semibold, sans-serif);
  border-radius: 10px;
  z-index: 1050 !important; /* ให้ popup อยู่เหนือทุกอย่าง */
}

/* ====== ตัวเลขชั่วโมง/นาที ====== */
.tempus-dominus-widget .time-container-clock div[data-action] {
  color: #333333 !important;
  font-weight: 600;
}

/* ====== ปุ่มลูกศรขึ้น/ลง ====== */
.tempus-dominus-widget .increment,
.tempus-dominus-widget .decrement {
  color: #888888 !important;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* ====== ปุ่ม ====== */
.tempus-dominus-widget button {
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 6px !important;
  color: #333333 !important;
}

/* ====== Hover วัน/เดือน/ปี ====== */

/* ✅ ควบคุมตำแหน่ง popup */
.tempus-dominus-widget {
  position: absolute !important;
  /* right: 0 !important;
  left: auto !important; */
  z-index: 9999 !important;
}

.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight),
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active {
  background-color: var(--primary-temp) !important;
  color: var(--td-active-color);
  text-shadow: none;
}
.tempus-dominus-widget.light {
  font-family: var(--font-bettertogether);
  font-size: 16px;
}
.tempus-dominus-widget i {
  color: var(--primary-temp);
}

.tempus-dominus-widget {
  border-radius: 20px !important;
  box-shadow: var(--box-shadow) !important;
  padding: 10px 10px !important;
}
.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active.today:before,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active.today:before {
  border-bottom-color: var(--primary-temp) !important;
}

/* ปิดวงกลมสีฟ้ารอบปุ่มทั้งหมดใน Tempus Dominus */

/* บาง browser ใช้ focus ring แบบ webkit */
.tempus-dominus-widget *::-moz-focus-inner,
.datetimepicker *::-moz-focus-inner {
  border: 0 !important;
}

.tempus-dominus-widget *::-webkit-focus-ring-color,
.datetimepicker *::-webkit-focus-ring-color {
  outline: none !important;
}
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).today:before,
.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).today:before {
  border-bottom-color: var(--primary-temp) !important;
  border-top-color: var(--primary-temp) !important;
}
.tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-decades div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-months div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-years div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-clock div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-hour div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-minute div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
  /* border: solid transparent; */
  border-width: medium !important;
  bottom: 0px !important;
  content: "";
  /* display: inline-block; */
  position: absolute !important;
  right: 0px !important;
  align-items: center;
  border-radius: var(--td-border-radius);
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  border: 2px solid var(--primary-temp) !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 .form-control {
  border-right: var(--input-group-addon-border-width) solid #ffffff;
}

/* /DateTime Picker */
/* กัน text ชนปุ่มตา */
.page_form .input[type="password"] {
  padding-right: 44px; /* เผื่อพื้นที่ให้ปุ่มตา */
}

/* จัดปุ่มตาให้อยู่กลางแบบนิ่ง */
.page_form .eye {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto 0; /* ✅ กลางแนวตั้งแบบนิ่ง */
  transform: none; /* ✅ ไม่ใช้ translate */
  width: 30px;
  height: 30px;
}

/* Slide Left Menu ////////////////////////////////////////////////////////////////// */
.sidebar-content .nav-sidebar .nav-link {
  margin: 0 10px;
}
.course_page .sidebar-content .nav-sidebar .nav-link {
  margin: 0 0px;
}
.course_page .sidebar-content li.nav-item:first-child {
  margin-top: 0px;
}
.sidebar-content li.nav-item:first-child {
  margin-top: 10px;
}
.sidebar {
  --sidebar-section-padding-y: 0.313rem;
  --sidebar-section-padding-x: 0.938rem;
  --sidebar-width: 14.95rem;
}

.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); */
  margin-right: 0;
  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;
  font-family: var(--font-bettertogether);
}
.sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed).sidebar-main-unfold {
  z-index: 1040;
}
@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.nav-sidebar {
  margin: 0px;
}
[data-bs-toggle="tooltip"] {
  cursor: pointer;
}
.popover {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
}
.popover-body {
  padding: 5px 10px;
  font-family: var(--font-bettertogether-regular);
  font-size: 14px;
  line-height: 20px;
}

.popover.fade {
  transition: none !important;
}
/* :root {
  --rainbowStroke: url(#rainbowStroke);
} */

/* ให้ icon+text อยู่บรรทัดเดียวกัน */
/* .nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
} */

/* กัน style เดิมที่ใส่ margin-right ให้ svg */
/* .nav-sidebar .nav-link svg {
  margin-right: 0 !important;
  min-height: unset !important;
  display: block;
} */

/* ปกติ */
/* .nav-sidebar .nav-link {
  color: #6b7280;
} */

/* ✅ hover/active เปลี่ยนเฉพาะ stroke ของ element ที่มี attribute stroke */
/* .nav-sidebar .nav-link:hover svg [stroke],
.nav-sidebar .nav-link.active svg [stroke] {
  stroke: var(--rainbowStroke) !important;
}
.nav-sidebar .nav-link svg path {
  fill: #6b7280;
} */

/* ===== Hover Rainbow ===== */

/* .nav-sidebar .nav-link:hover svg path {
  fill: url(#rainbowStroke);
} */

/* ===== Active Rainbow ===== */

/* .nav-sidebar .nav-link.active svg path {
  fill: url(#rainbowStroke);
} */
/* /Slide Left Menu ////////////////////////////////////////////////////////////////// */
/* GSchool.css - Update */
.txt_title_form_888_16 {
  color: var(--text-secondary);
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--text-sm-line);
  letter-spacing: 0px;
}
.form_mutiselect .btn {
  height: auto;
}
.form_mutiselect .dropdown-item {
  font-size: 16px;
  line-height: var(--text-sm-line);
  font-weight: 400;
  font-family: var(--font-bettertogether-regular);
}
.dropdown-item {
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}
.hide-mobile .form_mutiselect .multiselect {
  padding-left: 0px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 0px;
  cursor: pointer;
}
.form_mutiselect .btn-icon.multiselect-clear-filter {
  border: 1px solid #e4e4e4;
  border-left: 0px;
  border-radius: var(--radius);
}
.txt_label_gray {
  font-family: var(--font-bettertogether-regular);
  color: #888 !important;
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 5px;
}
.form-select {
  --form-select-bg-size: 16px 45px;
  --form-select-font-size: 16px;
  --form-select-line-height: 30px;
  --form-select-border-radius: var(--border-sm-radius);
  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-bettertogether-regular);
  border-radius: var(--border-sm-radius);
}
.tempus-dominus-widget,
.tempus-dominus-widget * {
  z-index: 2000 !important;
}
.form_mutiselect .filter-groups-bullets {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  font-size: 10px;
  line-height: 18px;
  background-color: var(--primary-temp);
  color: #fff;
  font-family: var(--font-bettertogether-regular);
}
.mb-3 {
  margin-bottom: 16px !important;
}
/* /GSchool.css - Update */
/* User Profile */

.eye-btn {
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}
.face-profile.w_100p {
  width: 100px;
  height: 100px;
  border-radius: 999px;
}
/* /User Profile */

/* ===== Source: assets/css/vlearn_v2.css ===== */
:root,
[data-color-theme="light"] {
  /* --primary-temp: #0060d2;
  --primary-temp-rgb: 204, 0, 0; */
  /* =========================
       Font family
  ========================= */
  --font-light: BetterTogether-Light;
  --font-regular: BetterTogether-Regular;
  --font-medium: BetterTogether-Medium;
  --font-bold: BetterTogether-Bold;

  /* =========================
       Font Size
       (1rem = 16px)
  ========================= */
  --fs-14: 14px; /* 14px */
  --fs-16: 16px; /* 16px */
  --fs-18: 18px; /* 18px */
  --fs-24: 24px; /* 24px */
  --fs-28: 28px; /* 28px */
  --fs-32: 32px; /* 32px */

  /* =========================
       Line Height
  ========================= */
  --lh-20: 20px; /* 20px */
  --lh-24: 24px; /* 24px */
  --lh-28: 28px; /* 28px */
  --lh-30: 30px; /* 30px */
  --lh-34: 34px; /* 34px */
  --lh-38: 38px; /* 34px */
  --lh-40: 40px; /* 40px */

  /* =========================
       Font Weight
  ========================= */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  /* =========================
       Typography Pair
  ========================= */
  --text-xs-size: var(--fs-14); /* 14px */
  --text-xs-line: var(--lh-20);
  --text-xs-weight: var(--fw-300);

  --text-sm-size: var(--fs-16); /* 16px */
  --text-sm-line: var(--lh-24);
  --text-sm-weight: var(--fw-400);

  --text-md-size: var(--fs-18); /* 18px */
  --text-md-line: var(--lh-28);
  --text-md-weight: var(--fw-500);

  --text-lg-size: var(--fs-24); /* 24px */
  --text-lg-line: var(--lh-34);
  --text-lg-weight: var(--fw-600);

  --text-xl-size: var(--fs-28); /* 28px */
  --text-xl-line: var(--lh-38);
  --text-xl-weight: var(--fw-700);

  --text-xxl-size: var(--fs-32); /* 32px */
  --text-xxl-line: var(--lh-40);
  --text-xxl-weight: var(--fw-800);

  /* =========================
      Font color
  ========================= */
  /* Text */
  --text-primary: #333333;
  --text-secondary: #888888;
  --text-on-accent: #ffffff;

  /* Brand / Accent */
  --brand-600: #0060d2; /* เช่น ราคา, ลิงก์, ปุ่มหลัก */
  --brand-500: #5f50ee; /* ใช้เป็นปลาย gradient */
  --brand-400: #82b1ff; /* ใช้เป็นปลาย gradient */
  --nav-blue: var(--primary-temp);
  /* Gradient */
  --grad: linear-gradient(to bottom, var(--brand-400) 0%, var(--brand-600) 100%);
  --gradient-home--title: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-500) 100%);
  --gradient-home--category: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);

  --border-radius: 20px;
  --border-sm-radius: 10px;
}
/* =========================
        Main 
========================= */
.tt-body {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size); /* 16px */
  line-height: var(--text-sm-line);
}

.tt-title {
  font-size: var(--text-lg-size); /* 24px */
  line-height: var(--text-lg-line);
  font-weight: var(--text-lg-weight);
}

.tt-page-title {
  font-size: var(--text-xxl-size); /* 32px */
  line-height: var(--text-xxl-line);
  color: var(--text-on-accent);
  font-family: var(--font-medium);
}

.navbar-nav-link {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  line-height: var(--lh-30);
  color: var(--text-primary);
}

.banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border: 0px solid #ececec;
  color: var(--text-secondary);
}
.topbar {
  height: var(--topbar-h);
  position: fixed;
  top: 0;
  z-index: 1041;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;
  background-color: #ffffff;
}
.language-setting {
  position: relative;
}

.language-toggle {
  position: relative;
}

.language-popup {
  position: absolute;
  top: calc(100% + 0px);
  right: 0;
  left: auto;
  transform: none;
  min-width: 100px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  padding: 10px 0;
  display: none;
  z-index: 1080;
  overflow: hidden;
}

.language-popup.show {
  display: block;
}

.language-option {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-primary);
  display: block;
  padding: 5px 15px;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  text-align: left;
}
.language-option.active {
  color: var(--primary-temp);
}

.caret-small {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
}
.brand img {
  height: 24px;
  width: auto;
  display: block;
}
.pt_bannerswiper {
  padding-bottom: 0px;
}

.category--bg {
  background: var(--gradient-home--category);
  padding-top: 20px;
  padding-bottom: 30px;
}
.cat-label {
  font-size: var(--text-sm-size);
  font-weight: var(--fw-400);
  font-family: var(--font-regular);
  line-height: var(--text-sm-line);
  opacity: 1;
}
.cat-icon {
  width: auto;
  min-width: 100px;
  height: 40px;
  border-radius: 999px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 0px solid rgba(255, 255, 255, 0.18);
  padding: 0 20px;
}
.cat-item {
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
  width: auto;
}
@media (min-width: 768px) {
  .cat-item {
    width: auto;
  }
}
@media (min-width: 992px) {
  .cat-item {
    width: auto;
  }
}
.page_form .input,
input.form-control {
  width: 100%;
  height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--border); /*0*/
  border-radius: var(--radius);
  outline: none;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  background: #ffffff;
  color: #333333;
}
.ic_search,
.ic_cross {
  color: #cccccc;
}
.btn-icon-fff {
  color: #ececec;
}
.category--bg .btn-icon-fff {
  color: #ffffff;
}

.category--bg .page_form .input,
.category--bg input.form-control {
  width: 100%;
  height: 40px;
  border: 0px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  line-height: var(--text-sm-line);
  background: #ffffff1a;
  color: #ffffff;
}
.category--bg .ic_search,
.category--bg .ic_cross {
  color: #ffffff;
}

.category--bg .navbar-search {
  max-width: 360px;
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
}
.category--bg .form-control {
  --input-placeholder-color: #ffffff;
}
.category--bg .edge-swiper {
  overflow: hidden;
  padding-bottom: 30px;
  margin: 0 0;
}
.see-all {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-light);
}
.course-section {
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  padding: 0 0 10px 0;
}
.section-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-medium);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line) !important;
  background: var(--gradient-home--title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: var(--text-md-weight);
}
@media (min-width: 992px) {
  .section-head h3 {
    font-size: var(--text-lg-size);
    line-height: var(--text-lg-line) !important;
  }
}
.modal .nav-sidebar .nav-link span {
  margin-left: 0px;
}
.nav-link svg {
  margin-right: 0;
  min-height: 28.29px;
}
.edge-swiper .swiper-slide {
  height: auto;
  display: flex;
  min-width: 0;
  align-self: stretch;
}
.course-body .fw-bold {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  color: var(--text-primary);
  font-weight: var(--text-md-weight) !important;
  line-height: var(--text-sm-line);
  margin-bottom: 0;
}
.course-body .muted {
  font-family: var(--font-light);
  font-size: var(--text-xs-size);
  color: var(--text-secondary);
  font-weight: var(--text-xs-weight) !important;
  line-height: var(--text-xs-line);
}
.course-body .price {
  font-family: var(--font-medium);
  font-size: var(--text-sm-size);
  color: var(--brand-600);
  font-weight: var(--text-md-weight) !important;
  line-height: var(--text-sm-line);
}
.course-body .text-muted {
  color: var(--text-secondary) !important;
  font-family: var(--font-light);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
}
.footer-link {
  display: table;
  flex-direction: row;
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  color: var(--text-primary);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}
.footer-copy {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-secondary);
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
}
.section-head .see-all {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--text-secondary);
  text-decoration: none;
  padding-bottom: 7px;
}
.swiper-shell {
  margin: 15px 0 0 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 0px;
  align-items: end;
}
#CategorySection a.cat-item {
  color: #ffffff;
}

.bottom-nav a {
  text-decoration: none;
  color: var(--nav-blue) !important;
  font-weight: 400;
  font-size: 12px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: background 0s ease, transform 0s ease;
}
.txt_title_ranking {
  font-family: var(--font-regular);
  color: var(--text-primary);
  font-size: 128px;
  line-height: 90px;
}
.highlight-course-section .txt_title {
  font-family: var(--font-medium);
  font-weight: var(--text-md-weight);
  font-size: var(--text-xxl-size);
  line-height: 46px;
  color: var(--text-primary);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  text-overflow: ellipsis;
  vertical-align: unset;
}
@media (max-width: 576px) {
  .highlight-course-section .txt_title {
    font-size: var(--text-lg-size);
    line-height: 36px;
    -webkit-line-clamp: 3;
  }
}
.highlight-course-section .txt_detail {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  color: var(--text-primary);
  font-weight: var(--text-md-weight) !important;
  line-height: var(--text-sm-line);
  margin-bottom: 0;
}
.block_ellipsis_6 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-swiper,
.category-swiper,
.cat-swiper,
.libCat-swiper {
  cursor: grab;
}
.course-swiper:active,
.category-swiper:active,
.cat-swiper:active,
.libCat-swiper:active {
  cursor: grabbing;
}

.course-swiper,
.course-swiper *,
.category-swiper,
.category-swiper * {
  user-select: none;
  -webkit-user-drag: none;
}

/* 1) เฟรมของรูป: ต้อง clip */
.highlight-course-section .thumb-frame {
  overflow: hidden;
  border-radius: var(--border-radius);
}
/* 2) รูป: ทำให้ transform ทำงานชัวร์ */
.highlight-course-section .thumb-frame img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.35s ease;
  will-change: transform;
}
.btn-secondary.btn-icon {
  min-width: 0 !important;
}

@media (max-width: 991.98px) {
  .btn-to-top {
    bottom: 80px;
  }
}
/* ===== Category Swiper: center when not overflow ===== */
.category-swiper.is-centered .swiper-wrapper {
  justify-content: center;
}
/* กัน transform จาก swiper ตอนมันไม่ overflow (ทำให้กึ่งกลางนิ่ง) */
.category-swiper.is-centered .swiper-wrapper {
  transform: translate3d(0, 0, 0) !important;
}
.category--bg .form-control:focus {
  background-color: #ffffff1a;
}
.banner-container img {
  width: 100%;
  height: auto;
  border-radius: var(--border-sm-radius);
}
.rounded {
  border-radius: var(--border-sm-radius) !important;
}
/* /Main /////////////////////////////////////////////////////////////////////////////////////// */
/* Course Information */
.tt-course-title {
  font-family: var(--font-medium);
  color: var(--text-primary);
  font-size: 28px;
  line-height: 38px;
}
.tt-course-short-decription {
  font-family: var(--font-regular);
  color: var(--text-primary);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}
.btn_favourite,
.btn_cart {
  font-family: var(--font-light);
  color: var(--text-secondary);
  font-size: var(--text-xs-size);
  background-color: #ffffff;
  border: none;
  padding: 0;
}
.cd-tabs_navigation a {
  font-family: var(--font-regular);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: var(--text-sm-weight);
  color: var(--text-secondary);
  position: relative;
  display: block;
  height: 40px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding: 1.16em 0;
  text-align: center;
  max-height: 40px;
}

/* .tt_course_content_head {
  font-family: var(--font-medium);
  font-weight: var(--text-md-weight);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}
.tt_course_content_detail {
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}
.tt_course_content_subhead {
  font-family: var(--font-medium);
  font-weight: var(--text-md-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}
.tt_course_content_sm-detail {
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--text-secondary);
}*/
.table_course_detail .title {
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-secondary);
}
.table_course_detail .score {
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-primary);
}
.txt_review_score {
  font-family: var(--font-medium);
  font-weight: var(--text-md-weight);
  font-size: 96px;
  line-height: 96px;
  text-align: center;
}
.table_review .title {
  min-width: 260px;
  text-align: left;
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}
.table_review .score {
  font-family: var(--font-regular);
  font-weight: var(--text-sm-weight);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-primary);
  text-align: right;
  vertical-align: middle;
}

.ck.txt_333_18_r {
  color: #333333;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
}
/* a:hover {
  color: inherit;
} */
/* /Course Information */
/* My Course */
.dropdown-menu.p_order {
  padding: 5px 0;
}
.icon-reject {
  color: var(--primary-temp);
}
/* /My Course */
/* Default */
.nav-link:focus,
.nav-link:hover {
  color: #cccccc;
}
.pane_cross .btn:active,
.pane_cross .btn:focus {
  border: 1px solid #ffffff;
  color: #888888;
}
.pane_cross .btn:hover {
  color: #888888;
}
.btn:focus-visible,
.btn:hover {
  color: var(--text-primary);
}
/* /Default */
/* Task Summary */
@media (max-width: 576px) {
  body.d-bottom-nav-none .bottom-nav {
    display: none !important;
  }
  body.d-bottom-nav-none .btn-to-top {
    bottom: 20px;
  }
  body.d-bottom-nav-none .topbar {
    display: none !important;
  }
  body.d-bottom-nav-none .pb_header {
    padding-bottom: 0px;
  }
  body.d-bottom-nav-none .content-inner {
    padding-bottom: 0px;
  }
}
/* /Task Summary */
/* Hover /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (hover: hover) and (pointer: fine) {
  .category--bg .btn-check:checked + .btn,
  .category--bg .btn.active,
  .category--bg .btn.show,
  .category--bg .btn:first-child:active,
  .category--bg :not(.btn-check) + .btn:active {
    color: var(--btn-active-color);
    background: transparent !important;
  }

  .home-swiper .swiper-slide {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.25s ease, z-index 0.25s ease;
    will-change: transform;
  }
  .home-swiper {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .footer-social img {
    filter: brightness(1.1);
  }

  /* 3) Hover ที่ทั้งสไลด์ หรือที่ลิงก์ ก็ได้ */

  .highlight-course-section .hover-overlay::before,
  .highlight-course-section .hover-overlay::after {
    pointer-events: none;
  }
  .course_page .sidebar-section .nav-sidebar a.nav-link:hover .txt_333_16_r {
    color: var(--primary-temp);
  }
  .pane_cross .btn:active,
  .pane_cross .btn:focus {
    border: 1px solid #ffffff;
    color: var(--primary-temp);
  }
  .pane_cross .btn:hover {
    color: var(--primary-temp);
  }
}
/* /Hover /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Desktop-only interaction states: hover/focus */
@media (hover: hover) and (pointer: fine) {
  *:focus {
    outline: none;
    /* border-color: inherit; */
    -webkit-box-shadow: none;
    /* box-shadow: none; */
  }
  .card:focus {
    border: 1px solid var(--card-border-color);
    --card-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.075), var(--box-shadow);
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.075), var(--box-shadow);
  }

  .radio-card:has(input:disabled):focus,
  .radio-card:has(input:disabled):focus-visible {
    --card-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), var(--box-shadow);
    box-shadow: none;
    outline: none;
  }

  .radio-card.wrong:has(input:disabled):focus,
  .radio-card.wrong:has(input:disabled):focus-visible {
    border-color: #cc0000;
  }

  .radio-card.correct:has(input:disabled):focus,
  .radio-card.correct:has(input:disabled):focus-visible {
    border-color: #93c47d;
  }

  .radio-card.disabled:has(input:disabled):focus,
  .radio-card.disabled:has(input:disabled):focus-visible {
    border-color: #ececec;
  }
  .navbar-nav-link.bg-icon:focus,
  .navbar-nav-link.bg-icon:hover {
    color: var(--navbar-hover-color);
    background-color: var(--navbar-hover-bg-icon);
  }

  a:hover {
    color: var(--link-hover-color);
  }

  a:hover img {
    filter: brightness(1.1);
  }

  .nav-link:focus,
  .nav-link:hover {
    color: var(--primary-temp);
  }

  .btn:hover {
    color: var(--primary-temp);
    background-color: transparent;
    border-color: transparent;
  }

  .btn_dark_hover:hover,
  .btn_gray_hover:hover,
  .btn_w_red:hover,
  .btn_main_border:hover {
    background-color: var(--primary-temp);
    color: #ffffff !important;
    border: 1px solid var(--primary-temp);
  }

  .btn_light_border:hover,
  .btn_light_border:active {
    background: var(--primary-temp) !important;
    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);
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    color: var(--primary-temp);
    background-color: var(--dropdown-link-hover-bg);
  }

  .nav-link:hover img,
  .sidebar-main-toggle:hover img,
  .toggle-icon:hover {
    /* 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:hover {
    fill: var(--primary-temp);
  }

  .ic_hover_gray_ccc:hover {
    color: var(--primary-temp);
    fill: var(--primary-temp);
  }

  .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:hover .txt_leavelesson {
    color: var(--primary-temp);
  }

  .txt_termcond:hover {
    color: var(--primary-temp);
  }

  .nav-sidebar .nav-link:focus,
  .nav-sidebar .nav-link:hover {
    background-color: var(--nav-link-hover-bg);
  }

  .cd-tabs_navigation a:hover {
    color: var(--primary-temp);
  }

  a.tabs-link:hover {
    color: var(--primary-temp);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    opacity: 1;
    border-bottom: 3px solid;
  }

  .form-control[readonly]:focus {
    border-color: var(--border-color);
  }

  .nav-sidebar .nav-link:focus,
  .nav-sidebar .nav-link:hover {
    background-color: var(--gray-200);
  }

  .btn-link:hover {
    color: var(--btn-hover-color);
  }

  .ui_cropper .btn-light:hover {
    border-color: var(--border-color);
  }

  .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;
  }

  .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:focus {
    border-color: var(--border-color);
  }

  .form-check-input:focus {
    border-color: var(--text-secondary);
  }

  .btn_login_social:hover {
    background-color: #ffffff;
    color: var(--primary-temp);
    border: 1px solid var(--primary-temp);
  }

  .language_footer_div:hover img {
    filter: invert(10%) sepia(98%) saturate(4021%) hue-rotate(3deg) brightness(113%) contrast(125%);
  }

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

  .datepicker-cell.selected,
  .datepicker-cell.selected:hover {
    background-color: var(--dp-item-active-bg);
    color: var(--dp-item-active-color);
  }

  .card_hover:hover .card-title {
    color: var(--primary-temp);
  }

  .course_page .py-submenu:focus span,
  .course_page .py-submenu:hover span {
    color: var(--primary-temp);
  }

  .course_page .nav-sidebar .nav-link:focus,
  .course_page .nav-sidebar .nav-link:hover {
    background-color: transparent;
  }

  .course_page .nav-sidebar .nav-link:focus.bg_gray,
  .course_page .nav-sidebar .nav-link:hover.bg_gray {
    background-color: #fafafa;
  }

  .temp-image:hover {
    cursor: pointer;
  }

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

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

  .name-button:hover span {
    color: var(--primary-temp);
  }

  .custom-textarea:focus {
    outline: none;
    border-color: #ececec;
  }

  .custom-textarea-ckeditor:focus {
    outline: none;
    border-color: #ececec;
  }

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

  a:focus .nav-link,
  a:hover .nav-link {
    color: var(--primary-temp);
  }

  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: #fafbfc; /*transparent*/
    pointer-events: none;
  }

  a.task_disabled,
  a:hover.task_disabled img,
  a.task_disabled .card_hover {
    color: var(--nav-link-disabled-color);
    cursor: default;
    opacity: 0.1;
    filter: opacity(10%);
    filter: brightness(1) !important;
    background-color: transparent;
    pointer-events: none;
  }

  .radius-button:hover {
    background-color: #ececec;
    color: var(--primary-temp);
  }

  .btn_suk_main_temp:hover {
    background-color: #fff;
    color: var(--primary-temp) !important;
    border: 1px solid var(--primary-temp);
  }

  .course_info .nav-link:focus,
  .course_info .nav-link:hover {
    color: var(--nav-link-color);
    background-color: transparent;
  }

  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;
  }

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

  .home_public .btn_light_hover:hover {
    background-color: var(--primary-temp);
    color: #fff !important;
  }

  @media screen and (min-width: 1024px) {
    .home_public .card_slider_container .swiper-button-prev:hover::after,
    .home_public .card_slider_container .swiper-button-next:hover::after {
      transform: scale(1.25);
    }
  }

  @media screen and (min-width: 1024px) {
    .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);
    }
  }

  @media screen and (min-width: 1024px) {
    .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:hover::after,
    .home_public .card_slider_container.swiper-explore-interests .swiper-button-next:hover::after {
      transform: scale(1.2);
    }
  }

  @media screen and (min-width: 2048px) {
    .home_public .card_slider_container:hover .swiper-button-prev::after,
    .home_public .card_slider_container:hover .swiper-button-next::after {
      display: block;
    }
  }

  .accordion-button:focus {
    z-index: 3;
    border-color: var(--accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: var(--accordion-btn-focus-box-shadow);
  }

  a:hover .rounded_circle_task_30p {
    filter: brightness(95%);
    -webkit-filter: brightness(95%); /* Safari */
  }

  .radio-card:not(:has(input:disabled)):hover {
    border-color: var(--text-secondary);
  }

  .radio-card.disabled:hover {
    border-color: #ececec;
  }

  .radio-card input:disabled + .card-body:hover {
    /* border-color: #ddd;
    background-color: #f5f5f5; */
  }

  .radio-card_noradio:hover {
    background-color: var(--gray-200);
  }

  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);
  }

  .disabled .txt_bottomnav_mobile:hover {
    color: inherit;
  }

  .menu_bottomnav_mobile:hover,
  .menu_bottomnav_mobile:focus {
    /* filter: invert(13%) sepia(62%) saturate(5517%) hue-rotate(355deg)
       brightness(65%) contrast(118%); */
    color: var(--primary-temp);
  }

  .no-hover:hover {
    background-color: inherit;
    color: inherit;
  }

  .btn-google .google-text:hover {
    color: var(--primary-temp);
  }

  button.eye:focus:not(:focus-visible) {
    border: 1px solid transparent;
  }

  /* *:focus {
    outline: none;
    border-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  } */

  .ic_hover_gray:hover {
    fill: var(--primary-temp);
    color: var(--primary-temp);
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    color: inherit;
    background-color: inherit;
  }

  .footer-social a:hover {
    background: rgba(0, 96, 210, 0.8);
  }

  .btn-close:hover {
    --btn-close-color: var(--primary-temp); /* เช่น #cc0000 */
    opacity: 1;
  }

  #toolSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }

  a.dropdown-item:hover {
    color: var(--primary-temp);
  }

  .dropdown-menu-profile .dropdown-item:hover,
  .dropdown-menu-profile .dropdown-item:focus,
  .dropdown-menu-profile .dropdown-item:hover .txt_changelang,
  .dropdown-menu-profile .dropdown-item:focus .txt_changelang {
    background: #fafbfc;
    color: var(--primary-temp);
  }

  .dropdown-menu-profile header.dropdown-item:hover {
    color: var(--text-secondary);
  }

  .swiper-shell:hover .swiper-button-prev,
  .swiper-shell:hover .swiper-button-next {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .swiper-shell:hover .swiper-button-next.swiper-button-disabled,
  .swiper-shell:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: auto;
    pointer-events: none;
  }

  .toplinks a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--primary-temp);
  }

  .topbar.is-scrolled .toplinks a:hover {
    background: rgba(17, 24, 39, 0.06);
  }

  .cat-item:hover .cat-icon {
    background: rgba(255, 255, 255, 0.08);
  }

  .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  a:hover .avatar {
    filter: brightness(1.1);
  }

  .see-all:hover {
    color: var(--hero-1);
  }

  .course-card .btn:hover {
    filter: brightness(0.98);
  }

  .lib-cat-item:hover .lib-cat-ico {
    background: rgba(0, 96, 210, 0.8);
  }

  #videoSection .swiper-slide:hover {
    transform: scale(1.03);
    z-index: 50;
  }

  #courseSection .swiper-slide:hover {
    transform: scale(1.03);
    z-index: 50;
  }

  .media-card--big:hover .media-thumb,
  .media-card--mid:hover .media-thumb,
  .media-card--row:hover .media-thumb,
  .pod-section .media-card:hover .media-thumb,
  .news-section .media-card:hover .media-thumb {
    transform: scale(1.03);
  }

  .media-card:hover .media-thumb {
    transform: scale(1.03);
  }

  a.cat-item:hover {
    color: inherit;
  }

  a:hover .media-title {
    color: var(--primary-temp);
  }

  .content-card:hover .content-title,
  a:hover .content-title {
    color: var(--primary-temp);
  }

  #courseSection .course-card:hover .fw-bold,
  a:hover .fw-bold {
    color: var(--primary-temp);
  }

  a:hover .tool-title {
    color: var(--primary-temp);
  }

  .btn-primary:hover {
    background: #ffffff;
    color: var(--primary-temp);
    border: 1px solid var(--primary-temp) !important;
  }

  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:focus-visible {
    /* background: #ffffff;
        color: var(--primary-temp);
        border: 1px solid var(--primary-temp); */
    background: var(--primary-temp);
    color: #fff;
    border: 0;
  }

  .page_form .btn-ghost:hover {
    color: var(--primary-temp);
    border: 1px solid var(--primary-temp);
  }

  a.face-profile:hover {
    filter: brightness(1.1);
  }

  .dropdown-menu-profile .dropdown-item:hover.title,
  .dropdown-menu-profile .dropdown-item:focus.title {
    background: #ffffff;
  }

  .dropdown-menu-knowledge .dropdown-item:hover,
  .dropdown-menu-knowledge .dropdown-item:focus {
    background: #fafbfc;
    color: var(--primary-temp);
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    color: var(--dropdown-link-hover-color);
    background-color: var(--dropdown-link-hover-bg);
  }

  .btn-google .google-text:hover,
  .btn-social .social-text:hover {
    color: var(--primary-temp);
  }

  .card_hover:hover .txt_333_16_r {
    color: var(--primary-temp);
  }

  button.eye:focus:not(:focus-visible) {
    border: 0px solid transparent;
  }

  .eye-btn:focus {
    border: none;
    outline: none;
    box-shadow: none;
  }

  .btn:focus,
  .btn:focus-visible {
    border: 0px solid transparent;
  }
  .input-group-text:focus {
    /* border: 0px solid transparent; */
  }
  .input-group .form-control:focus {
    border-right: var(--input-group-addon-border-width) solid #ffffff;
  }

  #myModal-Language .nav-sidebar .nav-link:hover {
    background-color: var(--gray-200);
    border-radius: 0px;
  }

  .nav-links a:hover {
    opacity: 0.85;
  }

  .page_form .input:focus {
    border-color: var(--border);
  }

  .page_form .check a:hover {
    color: var(--primary-temp);
  }

  .tempus-dominus-widget .increment:hover,
  .tempus-dominus-widget .decrement:hover {
    color: #333333 !important;
  }

  .tempus-dominus-widget button:hover {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
    color: #333333 !important;
  }

  .tempus-dominus-widget .date-container-days div:hover,
  .tempus-dominus-widget .date-container-months div:hover,
  .tempus-dominus-widget .date-container-years div:hover,
  .tempus-dominus-widget .date-container-decades div:hover,
  .tempus-dominus-widget .time-container-clock div:hover,
  .tempus-dominus-widget .time-container-hour div:hover,
  .tempus-dominus-widget .time-container-minute div:hover {
    background-color: #ffffff !important;
  }

  .datetimepicker:hover .form-control {
    color: var(--primary-temp);
  }

  .tempus-dominus-widget.light .toolbar div:hover {
    background: var(--gray-400) !important;
  }

  .tempus-dominus-widget *:focus,
  .tempus-dominus-widget *:focus-visible,
  .datetimepicker *:focus,
  .datetimepicker *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .btn:focus,
  .btn:focus-visible,
  .input-group-text:focus {
    box-shadow: none !important;
    outline: none !important;
  }

  .form-control:focus {
    border-color: var(--border-color);
    /* border-right: var(--input-group-addon-border-width) solid #ffffff; */
  }

  .datetimepicker .form-control:focus,
  .form-control-feedback .form-control:focus {
    border-color: var(--border-color);
    border-right: var(--input-group-addon-border-width) solid #ffffff;
  }

  .nav-sidebar .nav-link:focus,
  .nav-sidebar .nav-link:hover {
    background-color: #f2f4f6;
    border-radius: 8px;
  }

  #CategorySection a:hover {
    color: #ffffff !important;
  }

  a:hover img {
    filter: brightness(1) !important;
  }

  .category--bg .form-control:focus {
    background-color: #ffffff1a;
  }

  a.banner-container:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: var(--border-sm-radius);
  }
  .datetimepicker .form-control:focus,
  .form-control-feedback .form-control:focus {
    border-color: #ececec;
    border-right: 1px solid #ececec;
    background: #ffffff;
  }
  .category--bg .datetimepicker .form-control:focus,
  .category--bg .form-control-feedback .form-control:focus {
    border-color: transparent;
    border-right: 0px;
    background: #ffffff1a;
  }

  .home-swiper .swiper-slide:hover {
    transform: scale(1.03);
    z-index: 50;
  }
  a:hover,
  #CategorySection a:hover {
    color: var(--primary-temp) !important;
  }

  a:hover img {
    filter: brightness(1) !important;
  }

  .footer-social a:hover {
    background: transparent;
  }

  .highlight-course-section a:hover .txt_title,
  .highlight-course-section a:hover .txt_title_ranking {
    color: var(--primary-temp);
  }

  .highlight-course-section .swiper-slide:hover .thumb-frame img,
  .highlight-course-section .swiper-slide a:hover .thumb-frame img {
    transform: scale(1.03);
  }
}

@media (max-width: 1024px) {
  a:hover,
  #CategorySection a:hover {
    color: inherit !important;
  }

  .ic_hover_gray:hover {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
  }

  .ic_hover_gray_ccc:hover {
    color: var(--gray-ccc) !important;
    fill: var(--gray-ccc) !important;
  }

  .ic_hover_gray_ccc:hover span {
    color: var(--gray-333) !important;
    fill: var(--gray-333) !important;
  }
}
/* Active states kept global (all devices) */
.nav-link.active img,
.nav-li.active {
  /* filter: var(--filter-leftmenu-icon-form-333-to-temp); */
  fill: var(--primary-temp);
}

.cd-tabs_navigation a.active {
  color: var(--primary-temp);
}

.menu_bottomnav_mobile.active {
  /* filter: invert(13%) sepia(62%) saturate(5517%) hue-rotate(355deg)
     brightness(65%) contrast(118%); */
  color: var(--primary-temp);
}

#myModal-Language .nav-sidebar .nav-link.active {
  background-color: var(--gray-200);
  border-radius: 0px;
}

.btn-secondary:active {
  /* background: #ffffff;
     color: var(--primary-temp);
     border: 1px solid var(--primary-temp); */
  background: var(--grad);
  color: #fff;
  border: 0;
}

.btn-to-top .btn.btn-secondary {
  background: var(--text-secondary);
  background-color: var(--text-secondary);
  color: #fff;
  border: 1px solid var(--text-secondary) !important;
  box-shadow: none;
  width: 37.14px;
  height: 37.14px;
  min-width: 37.14px;
  min-height: 37.14px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-to-top .btn.btn-secondary:hover,
.btn-to-top .btn.btn-secondary:focus,
.btn-to-top .btn.btn-secondary:focus-visible,
.btn-to-top .btn.btn-secondary:active {
  background: var(--text-secondary) !important;
  background-color: var(--text-secondary) !important;
  color: #fff !important;
  border: 1px solid var(--text-secondary) !important;
  box-shadow: none !important;
}

.eye-btn:active {
  border: none;
  outline: none;
  box-shadow: none;
}