@charset "UTF-8";

:root,
[data-color-theme="light"] {
  --primary-temp: #0060d2;
  --primary-temp-rgb: 176, 232, 100;
  --filter-leftmenu-icon-form-333-to-temp: invert(0%) sepia(20%) saturate(2878%) hue-rotate(317deg) brightness(155%) contrast(110%);
  --filter-icon-form-888-to-temp: invert(10%) sepia(69%) saturate(7450%) hue-rotate(7deg) brightness(75%) contrast(125%);
  --link-color: var(--primary-temp);
  --link-hover-color: var(--primary-temp);
  --nav-color: #888888;
  --nav-font-size: 1.125rem;
  --navbar-padding-y: 0.229rem;
  --nav-link-hover-bg: #fafbfc !important;
  --dropdown-link-hover-bg: #fafbfc !important;
  --gray-200: #fafbfc;
  --gray-400: #ececec;
  --gray-600: #888888;
  --spacer-sm: 0.229rem;
  --spacer-15p: 0.938rem;
  --font-bettertogether: BetterTogether-Light;
  --font-bettertogether-regular: BetterTogether-Regular;
  --font-bettertogether-medium: BetterTogether-Medium;
  --font-bettertogether-bold: BetterTogether-Bold;
  /* --font-true-regular: TrueTextOnline-regular; */
  --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: 0.625rem;
  --border-color-translucent: rgba(236, 236, 236, 1);
  --nav-link-font-size: 1rem;
  --box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  --dropdown-link-active-bg: #ffffff;
  --input-disabled-color: #888888;
  --success-rgb: 147, 196, 125;
  --warning-rgb: 242, 201, 76;
  --danger-rgb: 204, 0, 0;
  --component-active-bg: var(--primary-temp);
  --page-padding-x: 15px;
  --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: 60px;
  --bottomnav-h: 50px;
  --hero-1: #0060d2;
  --hero-2: #4c53e8;
  --hero-3: #5f50ee;
  --nav-blue: #0060d2;
  --nav-h: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 10px !important);

  /* ✅ page-pad: Mobile 15 / Tablet 20 / Desktop 50 */
  --pad: 15px;
}
@media (min-width: 768px) {
  :root {
    --pad: 20px;
  }
}
@media (min-width: 992px) {
  :root {
    --pad: 50px;
  }
}

*:focus {
  outline: none;
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-to-top-visible {
  visibility: visible;
  opacity: 0.75;
}
.btn-secondary {
  --btn-color: #fff;
  --btn-bg: #888888;
  --btn-border-color: #888888;
  --btn-hover-color: #fff;
  --btn-hover-bg: #888888;
  --btn-hover-border-color: #888888;
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #fff;
  --btn-active-bg: #888888;
  --btn-active-border-color: #888888;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #888888;
  --btn-disabled-border-color: #888888;
}
.g-15p {
  --bs-gutter-x: 15px;
  --bs-gutter-y: 15px;
  --gutter-x: 15px;
  --gutter-y: 15px;
}
.row {
  --gutter-x: 15px;
}
/* //////////////////////////////////////////////////////// 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
========================= */
.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: linear-gradient(to right, var(--hero-1) 0%, var(--hero-2) 50%, var(--hero-3) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.topbar {
  height: var(--topbar-h);
  position: static;
  top: 0;
  z-index: 1050;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
}

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

.toplinks a {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-bettertogether-regular);
  font-size: 16px;
  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;
}
.avatar {
  width: 40px;
  height: 40px;
  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;
}

/* =========================
   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-section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#bannerSwiperS2 {
  width: 100%;
}
#bannerSwiperS2 .swiper-slide {
  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 h3 {
  flex: 1 1 auto; /* ให้หัวข้อยืดได้ */
  min-width: 0; /* สำคัญมาก ป้องกันล้น */
  margin: 0;

  font-family: var(--font-bettertogether-medium);
  font-size: 20px;
  line-height: 1.2;

  background: linear-gradient(90deg, #0060d2, #5f50ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
@media (min-width: 992px) {
  .section-head h3 {
    font-size: 24px;
  }
}
.section-head .see-all {
  flex: 0 0 auto; /* ห้ามยืด */
  white-space: nowrap; /* ห้ามขึ้นบรรทัดใหม่ */
  font-size: 14px;
  color: #888888;
  text-decoration: none;
  padding-bottom: 2px; /* ขยับลงนิดให้บาลานซ์สายตา */
}

/* =========================
   Video cards
========================= */
/* .content-card {
  width: 195px !important;
} */
/* ใช้ 195px เฉพาะ POD/NEWS */
#podSection .content-card,
#newsSection .content-card {
  width: 195px !important;
}
/* =========================
   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: 22px;
}

/* =========================
   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 ยืดความสูงเท่ากันได้ */
#courseSection .swiper-wrapper {
  align-items: stretch;
}

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

#courseSection .course-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

#courseSection .course-body .btn {
  margin-top: auto !important;
}

/* 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: 24px;
  margin-bottom: 0;
}

.course-body .muted {
  font-family: var(--font-bettertogether);
  font-size: 14px;
  color: #888888;
  font-weight: 300 !important;
  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: #888888;
  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: 22px;
}

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

.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;
  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: 8px;
}
.swiper-shell .swiper-button-next {
  right: 8px;
}
@media (min-width: 992px) {
  .swiper-shell .swiper-button-prev {
    left: 12px;
  }
  .swiper-shell .swiper-button-next {
    right: 12px;
  }
}
.swiper-shell .swiper-button-prev::after,
.swiper-shell .swiper-button-next::after {
  font-size: 16px;
  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: 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;
}
.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 + Podcast variables
========================= */
:root {
  --blue: var(--primary-temp);
  --text: #333333;
  --muted: #9a9a9a;
}

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

.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: 24px;
  font-family: var(--font-bettertogether-regular);
}
.media-meta {
  margin-top: 0;
  font-size: 14px;
  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: 22px;
  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;
}
.tool-old {
  color: #b0b0b0;
  text-decoration: line-through;
  font-size: 14px;
  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;
  font-weight: 400;
  width: fit-content;
}
/* =========================
   TOOL: equal height cards (final fix)
========================= */

/* ให้ wrapper ยืดความสูงลูก */
#toolSection .swiper-wrapper {
  align-items: stretch;
}

/* 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: 24px;
  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;
  color: #888888;
  font-family: var(--font-bettertogether-regular);
  font-weight: 400;
}
.footer-head {
  font-size: 16px;
  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;
}
/* 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: 1;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    background: rgba(0, 96, 210, 0.8);
  }
}

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

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 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;
  }
  #toolSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }
}
/* ========================
   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 */
  .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 hover */
  .toplinks a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .topbar.is-scrolled .toplinks a:hover {
    background: rgba(17, 24, 39, 0.06);
  }

  /* cat hover */
  .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 */
  .see-all:hover {
    color: var(--hero-1);
  }

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

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

  /* ===== 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;
  }
  #videoSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }

  /* ===== 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;
  }
  #courseSection .swiper-slide:hover {
    transform: scale(1.05);
    z-index: 50;
  }

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

  .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.05);
  }
  .media-card:hover .media-thumb {
    transform: scale(1.05);
  }
  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);
  }
}

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

/* =========================
   videoSection
   ========================= */

/* มือถือ 2.5 ใบ/แถว */
#videoSection .video-swiper:not(.swiper-initialized) .content-card {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
  flex: 0 0 auto;
}

/* 768px: 3.5 */
@media (min-width: 768px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 2) / 3.5);
    margin-right: 15px;
  }
}

/* 992px: 4.5 */
@media (min-width: 992px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 3) / 4.5);
    margin-right: 15px;
  }
}

/* 1200px: 6.5 */
@media (min-width: 1200px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 5) / 6.5);
    margin-right: 15px;
  }
}

/* 1600px: 7.5 */
@media (min-width: 1600px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 6) / 7.5);
    margin-right: 15px;
  }
}

/* 1920px: 8.5 */
@media (min-width: 1920px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 7) / 8.5);
    margin-right: 15px;
  }
}

/* 2560px: 11.5 */
@media (min-width: 2560px) {
  #videoSection .video-swiper:not(.swiper-initialized) .content-card {
    width: calc((100% - 15px * 10) / 11.5);
    margin-right: 15px;
  }
}

/* =========================
   courseSection (ถ้าโครงเหมือน video)
   เปลี่ยน class .course-swiper ให้ตรงของคุณ
   ========================= */

/* มือถือ slidesPerView = 1.2 */
#courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 0.2) / 1.2);
  margin-right: 15px;
}

/* 768px slidesPerView = 2.2 */
@media (min-width: 768px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 1.2) / 2.2);
    margin-right: 15px;
  }
}

/* 992px slidesPerView = 3 */
@media (min-width: 992px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 2) / 3);
    margin-right: 15px;
  }
}

/* 1200px slidesPerView = 4 */
@media (min-width: 1200px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 3) / 4);
    margin-right: 15px;
  }
}

/* 1600px slidesPerView = 5.5 */
@media (min-width: 1600px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.5) / 5.5);
    margin-right: 15px;
  }
}

/* 1920px slidesPerView = 6.5 */
@media (min-width: 1920px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5.5) / 6.5);
    margin-right: 15px;
  }
}

/* 2560px slidesPerView = 7.5 */
@media (min-width: 2560px) {
  #courseSection .course-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 6.5) / 7.5);
    margin-right: 15px;
  }
}

/* =========================
   Tool fallback ก่อน Swiper init
   ========================= */

/* มือถือ slidesPerView = 1.5 */
#toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 0.5) / 1.5);
  margin-right: 15px;
}

/* 768px slidesPerView = 2.4 */
@media (min-width: 768px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 1.4) / 2.4);
    margin-right: 15px;
  }
}

/* 992px slidesPerView = 3.5 */
@media (min-width: 992px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 2.5) / 3.5);
    margin-right: 15px;
  }
}

/* 1200px slidesPerView = 5.1 */
@media (min-width: 1200px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.1) / 5.1);
    margin-right: 15px;
  }
}

/* 1600px slidesPerView = 5.8 */
@media (min-width: 1600px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 4.8) / 5.8);
    margin-right: 15px;
  }
}

/* 1920px slidesPerView = 6.8 */
@media (min-width: 1920px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5.8) / 6.8);
    margin-right: 15px;
  }
}

/* 2560px slidesPerView = 8.8 */
@media (min-width: 2560px) {
  #toolSection .tool-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 7.8) / 8.8);
    margin-right: 15px;
  }
}

/* =========================
   Pod fallback ก่อน Swiper init
   ========================= */
/* =========================
   Default (<1200): ตั้งค่า fallback ที่ไม่บวม
   (เลือก 2.5 ใบ/แถว)
   ========================= */
#podSection .pod-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
}

/* =========================
   >=1200: ตาม JS (slidesPerView = 6, spaceBetween = 15)
   ========================= */
@media (min-width: 1200px) {
  #podSection .pod-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5) / 6);
    margin-right: 15px;
  }
}

/* =========================
   News fallback ก่อน Swiper init
   ========================= */
/* =========================
   Default (<1200): fallback กันบวม (2.5 ใบ/แถว)
   ========================= */
#newsSection .news-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 15px * 1) / 2.5);
  margin-right: 15px;
}

/* =========================
   >=1200: ตาม JS (slidesPerView = 6, spaceBetween = 15)
   ========================= */
@media (min-width: 1200px) {
  #newsSection .news-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px * 5) / 6);
    margin-right: 15px;
  }
}
/* /Home 2026 */