/* input(152,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(220,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(245,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(258,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(263,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(285,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(289,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(326,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(330,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(334,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(335,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(341,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(367,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(378,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(389,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(428,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(432,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(440,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(446,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(451,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(456,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(460,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(464,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(475,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(484,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(488,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(499,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(503,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(507,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(511,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(516,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(522,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(526,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(530,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(534,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(548,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(552,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(556,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(707,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(727,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(798,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(1359,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply'
input(1363,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@apply' */
@import "./footer.css";
/* @import "./ELearning.css"; */
@import "./PDF_Viewer.css";
/* @import "./DSDOnlineTraining.css"; */
@import "./Top10Courses.css";

/* @import "@material-tailwind/html/theme/base";
@import "@material-tailwind/html/theme/components";
@import "@material-tailwind/html/theme/utilities"; */

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Regular.ttf?v=BR29jsXtn8NKNu-hihgAijDIxTU") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Light.ttf?v=amaL-TEgrdNOFabcHu2n8Y55TXo") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-ExtraLight.ttf?v=hxqVT-olYFWgg66Ib9RVujReVqE") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Medium.ttf?v=1k47VDXDjiCRHLxzjmpEUbUBcx4") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-SemiBold.ttf?v=0861nu87AqwwR27MsMsriu49Vt0") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Bold.ttf?v=n_CUUn1MrA6WoatH--lu_L-Cqoc") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-Regular.ttf?v=4FIfx1Vjq9W349j9aqxF_f958Hk") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-Light.ttf?v=6rJqcG2aOBqn4Isg-2FpJ1R3baI") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-ExtraLight.ttf?v=U1V4qjG7Fiev83xJVYvcrVtCSKU") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-Medium.ttf?v=jjTQO__rfhsiGfXRNom23xz-dlw") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-SemiBold.ttf?v=LVuUlhdJyfFukl5lHkUqN5YBz2Q") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Niramit";
  src: url("../fonts/Niramit/Niramit-Bold.ttf?v=LDlf0hmFS2uC1BOiOIRKHWiE0i0") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --transition-speed: 0.3s;
  --font-adjustment: 0px;
  --default-step-bg: #fbbf24;
  --default-step-fg: #fff;
  /* WCAG Level AA Compliant Colors (≥4.5:1 contrast on white) */
  --color-otn-primary: #736600; /* Was #817100, now 5.1:1 */
  --color-otn-primary-hover: #5c5200; /* Darker for hover */
  --color-otn-link: #5b1ed8; /* Consistent link color, 5.5:1 */
  --color-otn-link-hover: #4a0ec8; /* Darker for hover */
  --color-otn-button-text: #000000; /* Black text on yellow buttons for max contrast */
  /*--color-focus-ring: #5B1ED8;*/ /* Focus indicator color */
  --color-focus-ring: #594a16; /* Focus indicator color */
  --bubble-other-bg: #fef5db;
  --bubble-me-bg: #92d050;
}

/* =====================================================
   WCAG Level AA - Global Focus Styles
   All interactive elements must have visible focus
   ===================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Skip Link for Keyboard Navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 1rem 2rem;
  background: var(--color-otn-primary);
  color: white;
  font-weight: 500;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 1rem;
}

.dsd-card-header {
  @apply border-b border-white/50;
}

/* Override Tailwind classes */
.text-xs {
  font-size: calc(0.75rem + var(--font-adjustment)) !important;
}

.text-sm {
  font-size: calc(0.875rem + var(--font-adjustment)) !important;
}

.text-base {
  font-size: calc(18px + var(--font-adjustment)) !important;
}

.text-lg {
  font-size: calc(1.125rem + var(--font-adjustment)) !important;
}

.text-xl {
  font-size: calc(1.25rem + var(--font-adjustment)) !important;
}

.text-2xl {
  font-size: calc(1.5rem + var(--font-adjustment)) !important;
}

.text-3xl {
  font-size: calc(1.875rem + var(--font-adjustment)) !important;
}

/* Smooth transition */
* {
  transition: font-size 0.3s ease-out;
}

/* Cookie consent */
.cc-window,
.cc-message,
.cc-btn {
  font-family: "Kanit", sans-serif !important;
}

html {
  position: relative;
  /*    font-size: calc(18px + var(--font-adjustment));*/
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Fix สำหรับ iOS - จะถูกเพิ่มผ่าน JavaScript */
html.overlay-active,
body.overlay-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100svh !important;
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  background-color: #842cdd !important;
}

body {
  @apply min-h-dvh h-full w-full;
  font-family: "Kanit", sans-serif !important;
  /* background-image moved to ::before for performance */
  box-sizing: border-box;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
  background-image: url("../assets/DSDOnlineTraining/dsd-otn-webp.webp?v=EdZRp91MMK-Imsmi-1O11AKkWzQ");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  will-change: transform;
  /* Hint for compositor */
}

/* ซ่อน background เมื่อมี .learning-page */
body.no-bg {
  @apply bg-gray-50;
}

body.no-bg::before {
  display: none;
}

body,
body * {
  font-size: calc(18px + var(--font-adjustment));
}

body section .home-page {
  @apply h-full w-full relative bg-white;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  @apply px-3 text-base border rounded-lg h-[40px];
}

/*================== Custom CheckBox ===================*/
input[type="checkbox"]:not(.toggle) {
  accent-color: #8b52ff;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer;
}

/*================== Custom Radio ===================*/
input[type="radio"].radio {
  /*    width: 20px !important;
    height: 20px !important;*/
  accent-color: #8b52ff !important;
  color: #8b52ff !important;
  cursor: pointer;
}

input.form-control,
input::placeholder {
  @apply text-base font-light;
}

.stepper-list::before {
  @apply !h-px;
}

/* =====================================================
   Banner Aspect Ratios — non-overlapping breakpoints
   < 768px              → mobile (3/5)
   768-1279px portrait  → tablet portrait (3/2)
   768-1279px landscape → tablet landscape (16/6)
   ≥ 1280px             → desktop (16/6)
   ===================================================== */
.banner-landscape-fix {
  aspect-ratio: 3 / 5;
  height: auto !important;
  background-color: #fff !important;
}

@media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .banner-landscape-fix {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {
  .banner-landscape-fix {
    aspect-ratio: 16 / 6 !important;
  }
}

@media (min-width: 1280px) {
  .banner-landscape-fix {
    aspect-ratio: 16 / 6;
    height: auto !important;
  }
}

/* Owl Carousel Custom */
.owl-carousel:not(.Banner-carousel) .owl-stage-outer .owl-stage {
  @apply py-5;
}

.owl-carousel.Banner-carousel .owl-dots {
  @apply absolute md:bottom-5 bottom-3 left-1/2 -translate-x-1/2 flex gap-1;
}

.owl-carousel .owl-dots .owl-dot {
  @apply w-4 h-4 rounded-full bg-gray-200/50 shadow transition-[width] duration-300 ease-in-out;
  &:hover {
    @apply bg-gray-200;
  }
}

.owl-carousel .owl-dots .owl-dot.active {
  @apply bg-[#ebd300] shadow w-12 transition-[width] duration-300 ease-in-out;
}

.owl-carousel {
  will-change: transform;
}

/* Owl Stage ต้องเป็น flex */
.owl-stage {
  display: flex;
  align-items: stretch;
  /* สำคัญ! */

  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.owl-item {
  display: flex;
  height: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.owl-carousel:not(.Banner-carousel) .owl-item > div,
.owl-carousel:not(.Banner-carousel) .owl-item > a {
  @apply mx-1;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  /* สำคัญ! */
}

/* ส่วนเนื้อหา */
.owl-item .owl-item-content,
.course-item .owl-item-content {
  @apply flex flex-col gap-2 w-full h-full p-4 flex-1;
}

/* Daisy UI Custom CSS */
.drawer-toggle,
.swap.swap-rotate input[type="checkbox"] {
  pointer-events: none !important;
  display: none !important;
}

.tab span {
  @apply text-gray-600;
}

@media (max-width: 320px) {
  .drawer-side > div:first-of-type {
    width: 100%;
  }
}

/*.menu :where(li) > *:not(ul, .menu-title, details, .btn):active {
    @apply bg-[#8A50F2];
}*/

/* Scrollbar */
.couses-list::-webkit-scrollbar {
  width: 8px;
  /* ความกว้าง scrollbar */
}

.couses-list::-webkit-scrollbar-track {
  background: #fff;
  /* สีพื้นหลัง track */
}

.couses-list::-webkit-scrollbar-thumb {
  background-color: #999;
  /* สีตัวเลื่อน */
  border-radius: 10px;
  /* ทำให้กลม */
  border: 2px solid #fff;
  /* เว้นขอบ */
}

.couses-list::-webkit-scrollbar-thumb:hover {
  background-color: #888;
  /* hover สีเข้มขึ้น */
}

.bs-stepper-content .content {
  @apply flex flex-col gap-8;
}

.bs-stepper-content .content.step2 {
  @apply flex flex-col gap-4;
}

/* .bs-stepper-content .content.step2 p {
  @apply text-base;
} */

.bs-stepper-content .content .register-section p {
  @apply mb-5 text-lg;
}

button:not(:has(svg)),
a[class^="btn-dsd"],
select {
  @apply !rounded-lg;
}

.select,
.input {
  @apply text-base min-h-[40px] h-auto;
}

/* Custom Button */
.btn-dsd-otn-success {
  @apply min-h-10 bg-[#2d912d] hover:bg-[#3dc13c] text-white hover:shadow-md active:translate-y-px;
}

.btn-dsd-otn-primary {
  @apply text-base min-h-10 hover:border-[#D4BC00] bg-[#EBD300] hover:bg-[#D4BC00] text-black hover:shadow-md active:translate-y-px px-3 py-2 min-w-24;
}

.btn-dsd-otn-secondary {
  @apply text-base min-h-10 border-2 bg-white hover:text-white active:translate-y-px px-3 py-2;
  border-color: var(--color-otn-primary); /* WCAG compliant */
  color: var(--color-otn-primary); /* WCAG compliant */
}

.btn-dsd-otn-secondary:hover {
  background-color: var(--color-otn-primary-hover);
  border-color: var(--color-otn-primary-hover);
}

.btn-dsd-otn-soft {
  @apply text-base min-h-10 bg-[#FFFBEB] hover:bg-[#FEF3C7] hover:shadow-md active:translate-y-px px-3 py-2 min-w-24;
  color: var(--color-otn-primary); /* WCAG compliant */
}

.btn-dsd-otn-soft:hover {
  color: var(--color-otn-primary-hover);
}

.btn-dsd-otn-gray {
  @apply text-base min-h-10 text-white bg-gray-500 hover:bg-gray-600 hover:shadow-md flex justify-center items-center rounded-lg active:translate-y-px px-3 py-2 min-w-24;
}

.btn-dsd-otn-link {
  @apply text-base underline underline-offset-2 bg-transparent;
  color: var(--color-otn-link); /* WCAG compliant */
}

.btn-dsd-otn-link:hover {
  color: var(--color-otn-link-hover);
  text-decoration: none;
}

/* Daisy UI Custom */
.progress-primary {
  @apply text-[#EBD300];
}

.mask-star {
  @apply !bg-[#f7d801];
}

.btn {
  @apply font-normal h-auto text-base px-3 py-2;
}

.btn-primary {
  @apply px-3 py-2;
}

.tab input:checked ~ * {
  /*    @apply text-[#5020f7];*/
  @apply text-blue-600;
}

/* Virtual-Select Custom */
.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus .vscomp-toggle-button {
  @apply !shadow-none;
}

.vscomp-toggle-button {
  @apply !rounded-lg;
}

.vscomp-wrapper {
  @apply !h-[40px];
}

.vscomp-dropbox {
  @apply !border !overflow-hidden !rounded-lg;
}

.vscomp-wrapper * {
  font-family: "Kanit", sans-serif !important;
}

/* Virtual-Select Dropdown Container (when using dropboxWrapper: 'body') */
.vscomp-dropbox-container,
.vscomp-dropbox-wrapper {
  z-index: 99999 !important;
}

.pop-comp-wrapper {
  @apply !rounded-lg !shadow-lg !overflow-hidden;
}

.vscomp-option-text {
  @apply !whitespace-normal;
}

.vscomp-option {
  @apply !min-h-[40px] !h-full !py-1;
}

/*.vscomp-value {
  overflow: visible !important;
}*/

/*==================== Loading Custom =================*/
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #fff;
  top: 50%;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

@keyframes flip-3d {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.animate-flip-3d {
  animation: flip-3d 2.3s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes bounce-3d {
  0% {
    transform: translateY(0) rotateY(0deg);
  }

  25% {
    transform: translateY(-12px) rotateY(10deg);
  }

  50% {
    transform: translateY(0) rotateY(0deg);
  }

  75% {
    transform: translateY(-8px) rotateY(-10deg);
  }

  100% {
    transform: translateY(0) rotateY(0deg);
  }
}

.animate-bounce-3d {
  animation: bounce-3d 1.8s ease-in-out infinite;
  transform-style: preserve-3d;
}

/*==================== End Loading Custom =================*/

/* ใน CSS */
/*#preloader {
    animation: fadeIn 0.2s ease-in;
}

    #preloader.hidden {
        animation: fadeOut 0.3s ease-out;
        opacity: 0;
        pointer-events: none;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}*/

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*================ Step Number ==============*/
.steps .step::after {
  @apply text-lg;
}

.step-theme:before,
.steps .step-theme:after,
.steps .step-theme > .step-icon {
  --step-bg: var(--default-step-bg) !important;
  --step-fg: var(--default-step-fg);
}

/*====================== Theme =======================*/
.bw-theme {
  filter: grayscale(100%);
}

.bw-theme.settings-page {
  filter: grayscale(0) !important;
}

.theme-logo {
  @apply !hidden;
}

/* html[data-theme="light"] .theme-logo-default {
    @apply hidden xl:flex;
}

html[data-theme]:not([data-theme="light"]) .theme-logo-other {
    @apply hidden xl:flex;
} */

/* Theme Colors */
[data-theme="blue"] {
  --bg-primary: #dbeafe;
  --bg-secondary: #bfdbfe;
  --text-primary: #fff;
  --text-link: #00ffff;
  --text-secondary: #000000;
  --default-step-bg: #00ffff;
  --default-step-fg: #000000;
}

[data-theme="green"] {
  --bg-primary: #dcfce7;
  --bg-secondary: #bbf7d0;
  --text-primary: #fff;
  --text-link: #adff2f;
  --text-secondary: #000000;
  --default-step-bg: #adff2f;
  --default-step-fg: #000000;
}

[data-theme="yellow"] {
  --bg-primary: #dcfce7;
  --bg-secondary: #bbf7d0;
  --text-primary: #fff;
  --text-link: #ffff00;
  --text-secondary: #000000;
  --default-step-bg: #ffff00;
  --default-step-fg: #000000;
}

@layer utilities {
  html[data-theme]:not([data-theme="light"]) input:-webkit-autofill {
    @apply text-white;
    -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s;
  }
}

@layer components {
  html[data-theme]:not([data-theme="light"]) ::selection {
    background-color: var(--text-link);
    /* เหลืองเข้ม */
    color: #000;
    /* ตัวอักษรดำ */
  }

  html[data-theme="light"] .theme-logo-default {
    @apply hidden md:!flex;
  }

  html[data-theme]:not([data-theme="light"]) .theme-logo-other {
    @apply hidden md:!flex;
  }
}

html[data-theme]:not([data-theme="light"]) {
  scrollbar-color: #666660 #2b2b2b !important;
  &::-webkit-scrollbar {
    width: 10px !important;
  }

  &::-webkit-scrollbar-track {
    background: #2b2b2b !important;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #9e9e9e !important;
    border-radius: 999px !important;
  }

  & .ranking-home *:not(svg),
  & .course-item,
  & .tab,
  & .tab-content,
  & .tab-content ul li *:not(.standout) {
    @apply !text-white !bg-black;
    background-image: none !important;
  }

  & body {
    @apply !text-white !bg-black;
    background-image: none !important;
    & main [class*="bg-"],
    & #preloader,
    & #header-second:not(.select-theme),
    & .home-page {
      @apply !text-white !bg-black;
      background-image: none !important;
    }

    /* จัดการ header แยก - ยกเว้น .btn-profile, .aslt-mobile และ .category-menu-l1 */
    & header div:not(.btn-profile):not(.aslt-mobile):not(.category-menu-l1) {
      &:not(.btn-profile *):not(.aslt-mobile *):not(.category-menu-l1 *) {
        @apply !text-white !bg-black;
        background-image: none !important;
      }
    }

    & .nav-menu a {
      @apply !text-[var(--text-primary)];
    }

    & .nav-menu a.active {
      @apply !text-[var(--text-link)];
    }

    & .result-sum-search {
      border-color: var(--text-primary) !important;
    }

    & main .progress-of-lesson {
      @apply !bg-[var(--text-link)];
    }

    /*& .cw-menu-item-inner.sub-item {
    @apply hover:!text-[var(--text-link)] transition-colors;
}*/

    & a,
    & .progress-primary,
    & .progress-video {
      @apply !text-[var(--text-link)];
    }

    & .logout,
    & .btn-error,
    & .sidenav-icon-close {
      @apply !bg-[#FF0000] !text-white font-medium border-2 !border-white;
    }

    & input:not(.vscomp-search-input):not(.mask):not(.tab:checked),
    & textarea,
    & .vscomp-dropbox,
    & select:not(.aslt-mobile select),
    & select option:not(:disabled),
    &
      span:not(
        :is(
          button span,
          .start-learning span,
          .standout,
          .course-code,
          .cw-menu-btn-full span,
          .cw-menu-item-inner span,
          .fill-blank-item *
        )
      ),
    & label,
    & :is(h1, h2, h3, h4, h5),
    & :is(h1, h2, h3, h4, h5) *,
    & p,
    & .vscomp-toggle-button,
    & .modal-box,
    & .swal2-modal {
      @apply !bg-black !text-[var(--text-primary)];
      /* background-image: none !important; */
    }

    & .lesson-head,
    & .sidenav-head {
      @apply border-b border-white/30;
    }

    & .sidenav {
      @apply border-e border-white/30;
    }

    & .lesson-item.is-active {
      @apply !border-[var(--text-link)];
    }

    & .lesson-name-mb {
      @apply !border-white;
    }

    & .lesson-item {
      & .lesson-time {
        @apply !text-[var(--text-primary)];
      }
    }

    & .lesson-item.is-active .lesson-icon,
& .lesson-item.is-active .lesson-collapse,
& #nextLesson,
& .btn-dsd-otn-primary,
& .togglePassword,
& main .nav-part,
& #nextBtn,
/*    & .aslt-mobile,*/
& .cw-menu-btn-full,
& .cw-menu-item-inner,
& #start-lesson-btn,
& #start-questionnaire,
& .btn-dsd-otn-soft,
& .btn-primary,
& .aslt-mobile,
& label.btn,
& .start-learning,
& button.btn-nav-search {
      @apply !bg-[var(--text-link)] !text-black !border-none shadow-none;
      background-image: none !important;
    }

    & .nav-part #group-navigation .active {
      @apply !text-[var(--text-link)];
    }

    & .btn-dsd-otn-secondary,
    & #btnLeft,
    & .nav-btn,
    & .cw-menu-item-inner:not(.sub-item),
    & .selected-list,
    & button.btn-ghost,
    & button.btn-accent,
    & button.digital-login {
      @apply !text-[var(--text-link)] !border-[var(--text-link)] !bg-black !border-2;
      background-image: none !important;
    }

    & button {
      color: #fff;
      border: 2px solid var(--text-link);
      background-color: black;
    }

    & .breadcrumbs li {
      @apply !text-white;
    }

    & .breadcrumbs li::before {
      @apply !opacity-100;
    }

    & .btn-dsd-otn-gray,
    & div.validator,
    & .animate-spin,
    & .footer-bottom {
      @apply !bg-black !text-[var(--text-link)];
    }

    /*Paging JS*/
    & .paginationjs-page,
    & .paginationjs-ellipsis,
    & .paginationjs-prev,
    & .paginationjs-next {
      @apply !border-white;
    }

    & .paginationjs-ellipsis a {
      opacity: 1;
    }

    & .paginationjs-page a,
    & .paginationjs-ellipsis a {
      @apply !bg-black !text-[var(--text-link)];
    }

    & .paginationjs-page.active a,
    & .paginationjs-prev a,
    & .paginationjs-next a {
      @apply !bg-[var(--text-link)] !text-black;
    }

    & .dropdown-content,
    & button.owl-dot:not(.active),
    & .bg-base-100 {
      @apply !bg-black text-white;
    }

    & .drawer-side .menu {
      @apply !border-s !border-white;
    }

    & #header-second svg {
      @apply !fill-white;
    }

    & #header-second .btn-profile svg {
      @apply !fill-current;
    }

    & #header-second .btn-profile.btn-dsd-soft {
      @apply !bg-white !text-black;
    }

    & #btn-to-top svg,
    & .btn-nav-search svg,
    & #dsd-portal svg {
      @apply !fill-black group-hover:!stroke-none;
    }

    & .svg-fill {
      @apply !fill-white;
    }

    & .svg-stroke {
      @apply !stroke-white;
    }

    & .dropdown-content button {
      @apply text-white;
    }

    & .standout {
      @apply !text-[var(--text-link)];
      background-image: none !important;
      background-clip: none !important;
    }

    & input[type="checkbox"],
    & input[type="radio"] {
      accent-color: var(--text-link) !important;
    }

    & .course-svg-time {
      @apply !fill-[var(--text-link)] !text-[var(--text-link)];
    }

    & details summary {
      @apply hover:!bg-transparent;
      &:hover svg {
        @apply stroke-[var(--text-link)];
      }
    }

    & .course-card {
      @apply !bg-black !text-white !border-white;
      background-image: none !important;
      box-shadow: none !important;
      &:hover {
        @apply !border-[var(--text-link)];
      }

      & .course-title {
        @apply !text-[var(--text-link)];
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: initial !important;
      }

      & .course-description {
        @apply !text-[var(--text-primary)];
      }
    }

    & .path-info,
    & .progress-summary {
      @apply !bg-black !text-white !border-white;
      background-image: none !important;
      box-shadow: none !important;
      & strong,
      & h3 {
        @apply !text-[var(--text-link)];
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: initial !important;
      }
    }

    & .btn-provider {
      @apply !bg-black !border-[var(--text-link)];
      & div {
        @apply !bg-[var(--text-link)];
        & svg {
          @apply !fill-black;
        }
      }

      & p {
        @apply !text-[var(--text-link)];
      }
    }

    & .course-code {
      @apply !text-[var(--text-link)];
    }

    & .cw-panel {
      @apply !bg-[#18181b] border-2 border-[rgba(255,255,255,0.2)];
      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
    }

    & .cw-body {
      box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
    }

    & .cw-head {
      @apply !bg-[#18181b];
    }
    & .menu-content {
      @apply !bg-[#18181b] border-2 border-[rgba(255,255,255,0.2)];
      box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
    }

    & .cw-bottom-section,
    & .cw-menu-bar-content {
      @apply !bg-[#212121];
    }

    & .cw-row.other .cw-bubble {
      @apply !bg-[#18181b] border !border-[var(--text-primary)];
    }

    & .cw-row.other .cw-bubble *:not(a) {
      @apply !text-[var(--text-primary)];
    }

    & .cw-row.me .cw-bubble {
      @apply !bg-[var(--text-link)];
    }

    & .cw-row.me .cw-bubble::after {
      border-color: transparent transparent transparent var(--text-link) !important;
    }

    & .cw-row.other .cw-bubble :is(p, span),
    & .cw-ts {
      @apply !bg-transparent;
    }

    & .cw-row.other .cw-bubble::after {
      border-color: transparent #fff transparent transparent !important;
    }

    & .chat-ms-text,
    & .cw-ts {
      @apply !text-[var(--text-primary)];
    }
  }

  & .footer {
    @apply border-t border-white/30;
  }

  & footer,
  & .cc-window {
    @apply !text-white !bg-black;
    background-image: none !important;
  }

  & .ranking-modal-header {
    @apply !m-0;
  }

  & .tab:checked,
  & .tab input:checked ~ * {
    @apply !text-[var(--text-link)];
  }

  & .vscomp-option.focused,
  & .vscomp-option.selected {
    @apply hover:!bg-transparent !bg-transparent;
  }

  & .vscomp-option.selected span {
    @apply !text-[var(--text-link)];
  }

  & .vscomp-arrow::after {
    border-bottom-color: var(--text-primary) !important;
    border-right-color: var(--text-primary) !important;
  }

  & .cc-window .cc-btn,
  & #btn-to-top,
  & button.swal2-confirm,
  & #dsd-portal {
    @apply !bg-[var(--text-link)] !text-black !border-none shadow-none;
    background-image: none !important;
  }

  /* & #content-wrapper {
    @apply !bg-[#030712];
  } */

  & .answer-item[data-correct="true"] {
    @apply !border-[#00AA00] !border;
  }

  & .answer-item[data-correct="false"] {
    @apply !border-[#AA0000] !border;
  }

  & .solution-icon-correct {
    @apply !bg-[#00AA00];
  }

  & .solution-icon-incorrect {
    @apply !bg-[#AA0000];
  }

  & main button.btn-answer-all,
  & main button.btn-answer-correct,
  & main button.btn-answer-incorrect {
    @apply !text-black;
  }

  & main button.btn-answer-all {
    @apply !bg-white !border-none;
  }

  & main button.btn-answer-correct {
    @apply !bg-[#00AA00];
  }

  & main button.btn-answer-incorrect {
    @apply !bg-[#AA0000];
  }

  & main div.target-line {
    @apply !bg-white;
  }

  & .target-progress {
    @apply !bg-[var(--text-link)];
  }

  & .connecting-line {
    @apply !text-white;
  }

  & .answer-frame {
    @apply !border-none;
  }

  & .answer-frame-mb {
    @apply !border-white/60;
  }

  & .fill-blank-item span span {
    @apply !text-[var(--text-link)];
  }

  & .owl-dots button.owl-dot.active {
    @apply !bg-[var(--text-link)];
    border: 2px solid black !important;
  }

  & button.swal2-cancel {
    @apply !bg-black !text-[var(--text-link)];
  }

  & button,
  & a,
  & select:not(.aslt-mobile select),
  & input {
    @apply hover:outline outline-2 outline-offset-2 !outline-white;
    /* background-image: none !important; */
  }

  & select:not(.aslt-mobile select),
  & input:not(.mask),
  & body .vscomp-toggle-button,
  & body .modal-box,
  & .swal2-container .swal2-popup {
    border: 1px solid white !important;
  }

  & .divider::before,
  & .divider::after {
    @apply !bg-[var(--text-link)];
  }

  & .owl-prev svg,
  & .owl-next svg {
    @apply !fill-white;
  }

  & .owl-prev-mb svg,
  & .owl-next-mb svg {
    @apply !fill-black;
  }
}

@media screen and (min-width: 1536px) {
  .container {
    @apply px-10;
    max-width: 1536px;
  }
}

@media (max-width: 1536px) {
  .container {
    max-width: 1400px !important;
  }
}

@media (max-width: 768px) {
  .plyr__volume input[type="range"] {
    max-width: 60px !important;
  }
}

/* =====================================================
   Tablet Landscape - Hide desktop menu, show drawer
   Target: 1024px - 1279px width + landscape orientation
   ===================================================== */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  /* Hide navigation links, tools, profile, and auth */
  #header-second .nav-desktop-link,
  #header-second .header-profile-desktop,
  #header-second .header-tools-desktop {
    display: none !important;
  }

  /* Show drawer toggle */
  #header-second .header-mobile-toggle,
  #header-second .header-auth-desktop {
    display: flex !important;
  }
}

/* Video Player Custom */
#section-video .plyr--video {
  @apply w-full;
}

#video-container > div > div.plyr__video-wrapper.plyr__video-embed[style] {
  @apply h-auto;
}

/* =====================================================
   Assessment / Quiz - Checkbox & Tab Navigation
   Used by _AssessmentsContent.cshtml & _QuestionnaireContent.cshtml
   ===================================================== */
input[type="checkbox"].quiz-checkbox {
	accent-color: #2563eb !important;
}

/* =====================================================
   Assessment / Quiz - Tab Navigation & Scrollbar
   ===================================================== */
.assessment-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.assessment-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.assessment-nav-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: center;
}

.assessment-nav-tab--solid {
    color: white !important;
    font-size: 18px;
}

.assessment-nav-tab--soft {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.125rem;
}

.assessment-nav-tab:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.assessment-nav-tab.active {
    background: white;
    color: #1d4ed8 !important;
    font-weight: 600;
}