.c-font {
	font-family: "Bodoni Moda", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body {
	font-family: "Noto Sans Thai", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body.locked {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

a {
	transition: 0.3s;
	text-decoration: none;
}

a:hover {
	transition: 0.3s;
	text-decoration: none;
}

button:focus {
	outline: none;
}

img {
	max-width: 100%;
}

header {
	position: fixed;
	width: 100%;
	z-index: 100;
	background-color: var(--header-bg);
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.header-container {
	max-width: 1280px;
	padding: 0 16px;
	margin: auto;
}

.logo {
	width: 100px;
	display: block;
}

.top-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.main-menu ul li {
	display: inline-block;
}

.main-menu ul li a {
	color: var(--header-link);
	padding: 0 8px;
}

.main-menu ul li a:hover {
	color: var(--header-link-active);
}

.main-menu ul li.header-button a {
	background-color: var(--blue-color);
	color: var(--btn-solid-text);
	border-radius: 32px;
	padding: 8px 24px;
}

.main-menu ul li.current-menu-item a {
	color: var(--header-link-active);
	font-weight: 700;
}

.main-menu ul li.header-button.current-menu-item a {
	font-weight: 400;
	color: #fff;
}

.main-title {
	text-align: center;
	font-family: "Bodoni Moda", "Noto Sans Thai";
	margin-bottom: 45px;
	color: var(--secondary-color);
}

.main-title h1 {
	font-size: 48px;
}

.main-title h2 {
	font-size: 42px;
	margin: 0;
	color: var(--secondary-color);
}

.main-title h3 {
	font-weight: 400;
	color: var(--secondary-color);
}

.main-title h4 {
	font-family: "Noto Sans Thai";
	color: var(--text-title);
	font-weight: 300;
}

.main-title.with-line {
	position: relative;
	z-index: 1;
	min-height: 60px;
}

.main-title.with-line h2 {
	background-color: #fff;
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 0 16px;
}

/* Line Before and After the Title */
.main-title.with-line:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--secondary-color);
}

.main-title.with-line::before {
  left: 0;
}

.section-content {
	padding: 60px 0;
}

/* Container for content and video */
.video-container {
  position: relative;
  width: 100%;
  height: 580px;
  overflow: hidden;
}

/* Background video */
.video-container video {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -1; /* Behind the content */
  object-fit: cover; /* Ensure it fills the container */
}

/* Overlay content */
.video-content {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(248, 142, 139, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-content h1 {
  font-size: 4rem;
  font-family: "Bodoni Moda", serif;
  margin: 0;
}

.video-content p {
  font-size: 1.5rem;
  margin-top: 10px;
}

.default-button {
	display: inline-block;
	padding: 6px 32px;
	border: 1px solid var(--btn-outline);
	border-radius: 30px;
	color: var(--btn-outline-text);
	text-decoration: none;
	font-weight: 500;
}

.default-button:hover {
	color: var(--btn-outline-text-hover);
	border-color: var(--btn-outline-text-hover);
	background-color: var(--btn-outline-hover);
}

.combo-box h4,
.combo-box h3,
.combo-box h2 {
	color: var(--secondary-color);
}

.section-image a {
	display: block;
}

.service-icon {
	display: block;
	text-align: center;
}

.service-icon img {
	border-radius: 16px;
	margin-bottom: 10px;
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
}

.service-icon h3 {
	margin: 0;
	font-size: 20px;
	color: var(--text-title);
}

/* Customize Pagination Dots */
.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5); /* เปลี่ยนสีของจุด */
  opacity: 1; /* ทำให้มองเห็นได้ชัด */
}

.swiper-pagination-bullet-active {
  background-color: #ff8987; /* สีเมื่อจุดถูกเลือก */
  transform: scale(1.2); /* ขยายจุดที่เลือก */
}

/* Customize Navigation Arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #ff8987; /* เปลี่ยนสีของลูกศร */
}

/* Optional: เพิ่ม hover effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #e07775; /* เปลี่ยนสีลูกศรเมื่อ hover */
}

.review-box {
	display: block;
	margin-bottom: 30px;
}

.review-box img {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--secondary-color);
}

.review-box p {
	color: var(--secondary-color);
	margin: 16px 0;
}

.footer {
	padding: 60px 0;
	background-color: var(--footer-bg);
	color: var(--footer-text);
}

.logo-footer {
	display: block;
	width: 200px;
}

.logo-footer img {
	width: 100%;
}

.footer-menu h4 {
	font-size: 20px;
}

.footer-menu p {
	font-weight: 300;
}

.footer-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.footer-menu ul li a {
	display: block;
	color: var(--footer-text);
	font-weight: 300;
}

.social-icon a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--footer-text);
	color: var(--footer-bg);
	border-radius: 6px;
	margin-right: 10px;
}

.section-blue-slogan {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 0;
	background-color: var(--blue-color);
	color: #fff;
	font-family: "Bodoni Moda", "Noto Sans Thai";
	font-size: 56px;
	letter-spacing: 4px;
	font-weight: 700;
}

.therapists-box {
	display: block;
	text-align: center;
	color: var(--secondary-color);
	margin-bottom: 32px;
}

.therapists-box p {
	max-width: 320px;
	margin: auto;
	font-weight: 300;
	font-size: 18px;
}

.therapists-box img {
	width: 200px;
	display: block;
	margin: auto;
	margin-bottom: 16px;
	border-radius: 16px;
}

.partner-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
}

.partner-box img {
	width: 20%;
}

.team-box {
	text-align: center;
}

.team-box img {
	display: block;
	border-radius: 16px;
	margin-bottom: 16px;
}

.team-box h3 {
	color: var(--secondary-color);
}

.button-box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.button-box a {
	width: 240px;
}

.online-contact-box {
	text-align: center;
	margin-top: 60px;
}

.online-contact-box h3 {
	color: var(--secondary-color);
	font-size: 30px;
	padding-block: 16px;
	margin-bottom: 16px;
}

.profile-box {
	color: var(--secondary-color);
	padding: 30px 0;
	border-bottom: 1px solid #bbb;
}

.profile-box img.profile-img {
	width: 100%;
	border-radius: 16px;
}

.profile-box h4 {
	font-size: 40px;
	margin-bottom: 30px;
}

.profile-box p {
	font-size: 18px;
}

.profile-box .timeline-box {
	padding-left: 16px;
	border-left: 1px solid #333;
}

.section-service {
	padding: 100px 0;
	background-color: var(--bg-secondary);
}

.section-service p {
	font-size: 18px;
}

.bg-gray {
	background-color: var(--bg-secondary);
}

.course-box {
	margin: 30px 0;
}

.course-box img {
	display: block;
	margin: auto;
}

.course-box h3 {
	text-align: center;
	margin-bottom: 10px;
}

.course-box .course-content {
	max-width: 480px;
	margin: auto;
	font-size: 18px;
	font-weight: 300;
}

.course-box .course-content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.course-box .course-content ul li {
	margin-bottom: 5px;
}

.course-box .course-content ul li:before {
	content: "\f00c";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	width: 32px;
	height: 32px;
	background-color: var(--primary-color);
	color: #fff;
	margin-right: 10px;
}

.section-pink-slogan {
	padding: 60px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: "Noto Sans Thai";
	font-size: 48px;
	font-weight: 700;
	background-color: var(--primary-color);
}

.accordion {
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.2rem;
  background-color: #f9f9f9;
}

.accordion-header:hover {
  background-color: #f0f0f0;
}

.accordion-header .icon {
  font-size: 1.5rem;
  color: #555;
  transition: transform 0.3s;
  width: 24px;
  margin-right: 10px;
  color: var(--primary-color);
}

.accordion-header.active .icon {
  transform: rotate(45deg); /* Change to minus icon */
}

.accordion-content {
  padding: 15px 20px;
  display: none;
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
}

.accordion-content.active {
  display: block;
}

.post-feature-img img {
	border-radius: 16px;
}

.breadcrumb a {
	color: var(--primary-color);
}

.post-title {
	margin: 0;
	margin-top: 30px;
}

.category-box a {
	color: var(--primary-color);
}

.page-category {
	text-align: center;
	margin-bottom: 30px;
}

.page-category a {
	font-size: 18px;
	color: var(--secondary-color);
	display: inline-block;
	margin: 0 10px;
	font-weight: 300;
}

.page-category a.active {
	border-bottom: 1px solid var(--secondary-color);
	font-weight: 400;
}

.inside-review-box {
	color: var(--secondary-color);
}

.inside-review-box img {
	transition: 0.3s;
	width: 100%;
	border-radius: 16px;
	aspect-ratio: 16/9;
	object-fit: cover;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 0px;
}

.inside-review-box:hover img {
	transition: 0.3s;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
}

.inside-review-box h3 {
	font-size: 24px;
	margin: 10px 0;
}

.inside-review-box p {
	margin-bottom: 10px;
}

.map-box {
	padding: 20px;
	border: 1px solid var(--secondary-color);
	margin-bottom: 30px;
	background-color: #fff;
	border-radius: 16px;
}

.the-banner-img {
	display: block;
}

.the-banner-img img {
	aspect-ratio: 16/8;
	object-fit: cover;
}

.news-info-row {
	display: flex;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #ccc;
}

.section-news-page {
	background-color: #f4f4f4;
}

.section-news-page p,
.section-news-page ul,
.section-news-page ul li {
	font-size: 18px;
}

.section-news-page a {
	color: var(--primary-color);
}

.contact-form-contact {
	max-width: 800px;
	margin: auto;
	border: 1px solid #ccc;
	padding: 24px;
	background-color: #fff;
	border-radius: 16px;
	margin-top: 32px;
}

/* Main Swiper */
.swiper-main {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.swiper-slide iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
}

/* Thumbnail Swiper */
.swiper-thumbs {
	width: 100%;
	height: 180px;
}

.swiper-thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

/* Active Thumbnail */
.swiper-thumbs .swiper-slide-thumb-active img {
	border: 2px solid #007aff;
}

.seciton-image,
.section-top{
	max-width: 1600px;
	margin: auto;
}

/*zzz*/
@media only screen and (max-width: 991px) {
  
	.m-order-1 {
		order: 1;
	}

	.m-order-2 {
		order: 2;
	}

	.combo-box h3 {
		margin: 16px 0;
	}

	.combo-box p {
		margin-bottom: 30px;
	}

	.section-blue-slogan {
		font-size: 24px;
		padding-left: 32px;
		padding-right: 32px;
	}

	.logo-footer {
		display: block;
		margin: auto;
		margin-bottom: 60px;
	}

	.main-title h2 {
		font-size: 24px;
	}

	.video-container {
		height: 300px;
	}

	.video-container video {
		width: 100%;
	}

	.page-category {
		display: flex;
  	overflow-x: auto; /* Enable horizontal scrolling */
	  white-space: nowrap; /* Prevent wrapping */
	  gap: 10px; /* Add spacing between links */
	  padding: 10px;
	  scroll-behavior: smooth; /* Smooth scrolling */
	  overflow-x: auto; /* Ensure horizontal scrolling on mobile */
	  scrollbar-width: none; /* Hide scrollbar for Firefox */
	  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer */
	}

	.page-category a {
		  white-space: nowrap; /* Prevent link text from wrapping */
	}

	.page-category::-webkit-scrollbar {
	  display: none; /* Hide scrollbar for Chrome, Safari, Edge */
	}

	.inside-review-box p {
		font-size: 12px;
		height: 72px;
		overflow: hidden;
	}

}