/* ========= Fonts ========= */
/* แก้ path ซ้ำ // ใน Poppins-Light */
@font-face {
  font-family: 'Poppins-Light';
  font-display: swap;
  src:
    local('Poppins-Light'),
    url('/assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* Poppins family */
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src:
    local('Poppins-Medium'),
    url('/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('/assets/fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Kanit (TH) */
@font-face {
  font-family: 'KanitLight';
  font-display: swap;
  src:
    local('KanitLight'),
    url('/assets/fonts/Kanit/KanitLight.eot') format('embedded-opentype'),
    url('/assets/fonts/Kanit/KanitLight.woff2') format('woff2'),
    url('/assets/fonts/Kanit/KanitLight.woff') format('woff'),
    url('/assets/fonts/Kanit/KanitLight.ttf') format('truetype'),
    url('/assets/fonts/Kanit/KanitLight.svg#KanitLight') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src:
    local('Kanit-Medium'),
    url('/assets/fonts/Kanit/Kanit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('/assets/fonts/Kanit/Kanit-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* IBM Plex Sans Thai */
@font-face {
  font-family: 'IBMPlexSansThai';
  font-display: swap;
  src:
    local('IBMPlexSansThai'),
    url('/assets/fonts/IBMPlexSansThai/IBMPlexSansThai-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'IBMPlexSansThai';
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSansThai/IBMPlexSansThai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'IBMPlexSansThai';
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSansThai/IBMPlexSansThai-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'IBMPlexSansThai';
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSansThai/IBMPlexSansThai-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'IBMPlexSansThai';
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSansThai/IBMPlexSansThai-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ========= Teal Premium Color Variables ========= */
:root {
  /* Brand core (คงคีย์เดิม แต่เป็นโทน Teal) */
  --tu-primary-700: #00312c; /* ลึก */
  --tu-primary-600: #01584f; /* เข้มรอง */
  --tu-primary-500: #016b61; /* หลัก */
  --tu-primary-450: #0f8378; /* สว่างขึ้นนิด */
  --tu-primary-400: #1b9a8e; /* hover/ลิงก์ */
  --tu-primary-350: #3ab1a6; /* ขั้นกลาง */
  --tu-primary-300: #63c4bb; /* กลาง */
  --tu-primary-250: #86d3cb; /* เนียน */
  --tu-primary-200: #a9e2db; /* อ่อน */
  --tu-primary-100: #cdefea; /* อ่อนมาก/ring */

  /* RGB helper */
  --tu-primary-500-rgb: 1, 107, 97;
  --tu-primary-400-rgb: 27, 154, 142;
  --tu-primary-300-rgb: 99, 196, 187;
  --tu-primary-200-rgb: 169, 226, 219;

  /* Text & bg */
  --tu-text: #0f1e1c; /* ดำอมเขียว อ่านง่าย */
  --tu-text-secondary: #1b9a8e; /* Teal รอง */
  --tu-text-on-dark: #e9fcfa;
  --tu-bg: #f4fbfa; /* เทาอมเขียวอ่อน */
  --tu-bg-section: #eaf8f6; /* section highlight */
  --tu-bg-dark: #013a34;

  /* Ant Design tokens (fallback สำหรับ CSS) */
  --ant-color-primary: var(--tu-primary-500);
  --ant-color-link: var(--tu-primary-400);
  --ant-color-link-hover: var(--tu-primary-300);

  --tu-border: #e2e8ea;
  --tu-success: #28c76f;
  --tu-danger: #ea5455;

  /* Glow & shadow */
  --tu-glow-outer: 0 12px 28px rgba(1, 107, 97, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  --tu-glow-soft: 0 8px 22px rgba(99, 196, 187, 0.28);
  --tu-ring: 0 0 0 4px rgba(99, 196, 187, 0.3);

  /* Gradients */
  --tu-grad-hero: linear-gradient(135deg, var(--tu-primary-700) 0%, var(--tu-primary-500) 45%, var(--tu-primary-350) 100%);
  --tu-grad-accent: linear-gradient(118deg, var(--tu-primary-450) 0%, var(--tu-primary-700) 100%);
  --tu-grad-soft: linear-gradient(180deg, rgba(var(--tu-primary-200-rgb), 0.25), rgba(var(--tu-primary-300-rgb), 0.22));
}

* {
  font-family:
    IBMPlexSansThai,
    Kanit,
    Poppins,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif !important;
}

body {
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  background-color: var(--tu-bg) !important;
  color: var(--tu-text);
}

/* Form / Editor helpers */
.ant-form-item-label > label {
  font-weight: 600;
}
.ck-editor__editable_inline {
  min-height: 300px;
}

.thumbnail {
  width: 200px !important;
  height: 200px !important;
  object-fit: contain;
  margin-bottom: 29px;
}

.style-for-logout-menu {
  position: absolute !important;
  bottom: 0 !important;
  background-color: #fff !important;
  height: 80px !important;
  margin: 0 !important;
}

.rc-anchor-normal-footer {
  display: inline-block;
  height: 74px;
  width: 70px;
  z-index: 1000 !important;
}
.grecaptcha-badge {
  visibility: hidden;
}
.ant-steps-item-title {
  line-height: 1.5em !important;
}
.custom-popover {
  z-index: 10;
}

.ant-modal-footer {
  display: flex !important;
  justify-content: end !important;
}

/* Ant Tree – ใช้สีแบรนด์ */
.ant-tree .ant-tree-node-content-wrapper {
  color: var(--tu-text) !important;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #fff !important;
  color: var(--tu-primary-400) !important;
  box-shadow: inset 0 0 0 1px var(--tu-primary-200);
}

/* ลิงก์ให้เป็นโทนแบรนด์ */
a {
  color: var(--tu-primary-400);
}
a:hover {
  color: var(--tu-primary-300);
}

/* ปุ่มสไตล์แบรนด์อย่างนิ่ม ๆ (ถ้าต้องการใช้ใน CSS ตรง ๆ) */
.button-primary {
  background: var(--tu-primary-500);
  color: #fff;
  border-color: var(--tu-primary-500);
}
.button-primary:hover {
  background: var(--tu-primary-400);
  border-color: var(--tu-primary-400);
}