:root {
  --nlpf-navy: #25324b;
  --nlpf-coral: #eb7466;
  --nlpf-coral-dark: #d85f54;
  --nlpf-green: #4fac72;
  --nlpf-yellow: #efc34c;
  --nlpf-cream: #fffaf1;
  --nlpf-sand: #f5efe3;
  --nlpf-border: #e7ddce;
}

body {
  --fcom-primary-bg: #fffdf8 !important;
  --fcom-secondary-bg: #f7f2e9 !important;
  --el-color-white: #fffdf8 !important;
  --fcom-secondary-content-bg: #fff8ed !important;
  --fcom-active-bg: #ffede8 !important;
  --fcom-light-bg: #f2e8d8 !important;
  --fcom-deep-bg: var(--nlpf-navy) !important;
  --fcom-menu-text: #586274 !important;
  --fcom-primary-text: var(--nlpf-navy) !important;
  --el-color-primary: var(--nlpf-coral) !important;
  --fcom-secondary-text: #687184 !important;
  --fcom-primary-button: var(--nlpf-coral) !important;
  --fcom-primary-button-text: #ffffff !important;
  --fcom-primary-border: var(--nlpf-border) !important;
  --fcom-secondary-border: #cabda9 !important;
  --fcom-highlight-bg: #fff4c9 !important;
  --fcom-text-link: var(--nlpf-coral-dark) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(239, 195, 76, 0.12), transparent 24rem),
    var(--fcom-secondary-bg) !important;
  color: var(--nlpf-navy);
  font-family: "Noto Sans Thai", "Noto Sans", sans-serif !important;
}

body .fcom_top_menu,
body .spaces {
  --fcom-primary-bg: rgba(255, 253, 248, 0.96) !important;
  --fcom-primary-border: var(--nlpf-border) !important;
  --fcom-menu-text: #596376 !important;
  --fcom-menu-text-active: var(--nlpf-navy) !important;
  --fcom-menu-text-hover: var(--nlpf-navy) !important;
  --fcom-menu-bg-hover: #ffede8 !important;
  --fcom-active-bg: #ffede8 !important;
}

.fcom_top_menu {
  border-bottom: 1px solid var(--nlpf-border) !important;
  box-shadow: 0 8px 28px rgba(37, 50, 75, 0.06) !important;
  backdrop-filter: blur(18px);
}

.fcom_top_menu .nlpf-brand-mark {
  color: var(--nlpf-navy);
  flex: 0 0 34px;
  height: 34px;
  margin-left: 10px;
  width: 34px;
}

.fhr_logo a,
.fhr_logo span,
.fluent_com,
.fluent_com button,
.fluent_com input,
.fluent_com textarea {
  font-family: "Noto Sans Thai", "Noto Sans", sans-serif !important;
}

.fhr_logo span {
  color: var(--nlpf-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

.top_menu_items .fcom_menu_link,
.fcom_sidebar_wrap .fcom_menu_link {
  border-radius: 999px !important;
  font-weight: 600;
}

.nlpf-community-workshop-cta {
  align-items: center;
  background: var(--nlpf-coral);
  border: 1px solid var(--nlpf-coral);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(235, 116, 102, 0.2);
  color: #fff !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  margin-left: 14px;
  min-height: 38px;
  padding: 7px 16px;
  text-decoration: none !important;
}

.nlpf-community-workshop-cta:hover {
  background: var(--nlpf-coral-dark);
  border-color: var(--nlpf-coral-dark);
  transform: translateY(-1px);
}

.fhr_content,
.feed_layout {
  background: transparent !important;
}

.spaces,
.fcom_sidebar_wrap {
  border-color: var(--nlpf-border) !important;
}

.fcom_card,
.feed_card,
.fcom_welcome_box,
.fcom_course_card,
.course_card,
.el-card,
.fcom_boxed,
.fcom_course_details,
.fcom_course_sections {
  border-color: var(--nlpf-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(37, 50, 75, 0.07) !important;
}

.fcom_primary_button,
.el-button--primary,
.fcom_login_btn {
  background: var(--nlpf-coral) !important;
  border-color: var(--nlpf-coral) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.fcom_primary_button:hover,
.el-button--primary:hover,
.fcom_login_btn:hover {
  background: var(--nlpf-coral-dark) !important;
  border-color: var(--nlpf-coral-dark) !important;
}

.el-button,
.fcom_secondary_button,
input,
textarea,
.el-input__wrapper {
  border-radius: 12px !important;
}

.fcom_side_footer {
  border-top: 1px solid var(--nlpf-border);
  margin: 14px 12px 0;
  padding: 16px 8px;
}

.fcom_side_footer a {
  color: var(--nlpf-coral-dark) !important;
  font-weight: 700;
}

.fcom_course_header,
.fcom_course_banner,
.course_header {
  border-radius: 24px !important;
  overflow: hidden;
}

.fcom_course_header h1,
.course_header h1,
.fcom_course_details h1,
.fcom_course_details h2 {
  color: var(--nlpf-navy) !important;
  letter-spacing: -0.03em;
}

html.dark body {
  --fcom-primary-bg: #273149 !important;
  --fcom-secondary-bg: #1d2639 !important;
  --el-color-white: #273149 !important;
  --fcom-secondary-content-bg: #303b54 !important;
  --fcom-active-bg: #3a455e !important;
  --fcom-light-bg: #3a455e !important;
  --fcom-deep-bg: #fffaf1 !important;
  --fcom-primary-text: #fffaf1 !important;
  --el-color-primary: #f28b7f !important;
  --fcom-secondary-text: #c8cddd !important;
  --fcom-menu-text: #d9ddeb !important;
  --fcom-primary-border: #46516b !important;
  --fcom-secondary-border: #6a748b !important;
  --fcom-text-link: #f6a096 !important;
  background: #1d2639 !important;
}

html.dark body .fcom_top_menu,
html.dark body .spaces {
  --fcom-primary-bg: #273149 !important;
  --fcom-primary-border: #46516b !important;
  --fcom-menu-text: #d9ddeb !important;
  --fcom-menu-text-active: #fffaf1 !important;
  --fcom-menu-text-hover: #fffaf1 !important;
  --fcom-menu-bg-hover: #3a455e !important;
  --fcom-active-bg: #3a455e !important;
}

html.dark .fcom_top_menu .nlpf-brand-mark,
html.dark .fhr_logo span {
  color: #fffaf1 !important;
}

@media (max-width: 1024px) {
  .nlpf-community-workshop-cta {
    display: none;
  }
}

@media (max-width: 640px) {
  .fcom_top_menu .nlpf-brand-mark {
    height: 30px;
    margin-left: 4px;
    width: 30px;
  }

  .fhr_logo span {
    font-size: 15px !important;
  }

  .fcom_card,
  .feed_card,
  .fcom_welcome_box,
  .fcom_course_card,
  .course_card,
  .el-card,
  .fcom_boxed,
  .fcom_course_details,
  .fcom_course_sections {
    border-radius: 16px !important;
  }
}