/* @import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200;300;400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: 'JS-Chawlewhieng';
  src: url('JS-Chawlewhieng.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: "Kanit", sans-serif !important;
    font-weight: 400;
    font-style: normal;
}

a , p , label , span , strong {
	font-size: 18px;
}

.js-chaw{
     font-family: 'JS-Chawlewhieng';
}

/* ===================== Header (Bootstrap-safe) ===================== */
.nav-bar-header {
	--brand-red: #d63a2e;
	--brand-red-dark: #bf2f24;
	--ink: #222;
}

/* ========== Topbar ========== */
.nav-bar-header .topbar {
	background: var(--brand-red);
	color: #fff;
	font-size: 14px;
}

.nav-bar-header .topbar .nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
}

.nav-bar-header .tb-left,
.nav-bar-header .tb-right {
	display: flex;
	align-items: center;
}

.nav-bar-header .tb-left {
	gap: 14px;
    position: relative;
    left: 180px;
}

.nav-bar-header .tb-right {
	gap: 8px;
}

.nav-bar-header .hours {
	opacity: 0.95;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========== Language dropdown ========== */
.nav-bar-header .lang {
	position: relative;
}

.nav-bar-header .lang-btn {
	outline: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 20px;
	color: #000;
    width: 116px;
	background: #fff;
	border: 1px solid #fff3;
	border-radius: 999px;
	cursor: pointer;
}

.nav-bar-header .lang-btn .chev {
	width: 14px;
	height: 14px;
	opacity: 0.9;
    color: red;
}

.nav-bar-header .lang-menu {
	position: absolute;
	left: 0;
	top: 110%;
	display: none;
	min-width: 140px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	color: var(--ink);
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
	z-index: 30;
}

.nav-bar-header .lang-menu a{
	color: #000 !important;
}


.lang {
  position: relative;
  display: inline-block;
}
.lang-btn {
  background: #e63946;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
}
.chev {
  width: 14px;
  height: 14px;
}
.lang-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 4px;
  list-style: none;
  padding: 5px 0;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.lang-menu li {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-menu li:hover {
  background: #f5f5f5;
}
.lang:hover .lang-menu {
  display: block;
}

       .topbar {
            background: #f8f9fa;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tb-left .lang-btn {
            background: white;
            border: 1px solid #ddd;
            padding: 5px 15px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 14px;
        }

        .flag {
            width: 20px;
            height: 15px;
            object-fit: cover;
            border-radius: 2px;
        }

        .tb-right {
            display: flex;
            gap: 10px;
        }

        .icon-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-btn img {
            width: 24px;
            height: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
        }

        .brand img {
            height: 60px;
        }

        .brand-text {
            font-size: 28px;
            font-weight: 700;
            color: #c41e3a;
        }

        /* Main Navigation - Desktop */
        .mainnav {
            background: #c41e3a;
            position: relative;
        }

        .hamburger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            flex-direction: column;
            gap: 5px;
        }

        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            background: white;
            transition: 0.3s;
        }

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

        .menu > ul {
            display: flex;
            list-style: none;
            gap: 30px;
            margin: 0;
        }

        .menu-item {
            position: relative;
        }

        .menu-item > a {
            color: white;
            text-decoration: none;
            padding: 20px 0;
            display: block;
            font-weight: 500;
        }

        .dropdown {
            display: none;
            position: absolute;
            background: white;
            min-width: 250px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            list-style: none;
            top: 100%;
            left: 0;
            z-index: 1000;
        }

        .menu-item:hover .dropdown {
            display: block;
        }

        .dropdown li a {
            color: #333;
            padding: 12px 20px;
            display: block;
            text-decoration: none;
            transition: 0.3s;
        }

        .cta.btn {
            background: white;
            color: #c41e3a;
            padding: 10px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }

        .cta.btn:hover {
            background: #f8f9fa;
        }

        /* Mobile Sidebar Menu */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 0;
            left: -100%;
            width: 280px;
            height: 100vh;
            background: white;
            z-index: 9999;
            transition: left 0.3s ease;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .mobile-menu.open {
            left: 0;
        }

        .mobile-menu-header {
            background: #c41e3a;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-menu-header h3 {
            font-size: 18px;
            margin: 0;
        }

        .close-menu {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            line-height: 1;
        }

        .mobile-menu-content {
            padding: 20px 0;
        }

        .mobile-menu-item {
            border-bottom: 1px solid #f0f0f0;
        }

        .mobile-menu-item > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }

        .mobile-menu-item > a:hover {
            background: #f8f9fa;
            color: #c41e3a;
        }

        .mobile-submenu {
            display: none;
            background: #f8f9fa;
            list-style: none;
        }

        .mobile-submenu.active {
            display: block;
        }

        .mobile-submenu li a {
            display: block;
            padding: 12px 20px 12px 40px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
        }

        .mobile-submenu li a:hover {
            background: #e9ecef;
            color: #c41e3a;
        }

        .mobile-cta {
            margin: 20px;
            display: block;
            text-align: center;
            background: #c41e3a;
            color: white;
            padding: 15px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
        }

        .menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
        }

        .menu-overlay.active {
            display: block;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            .menu {
                display: none !important;
            }

            .mobile-menu {
                display: block;
            }

            .brand-text {
                font-size: 22px;
            }

            .brand img {
                height: 50px;
            }
        }

.nav-bar-header .lang-menu li {
	padding: 8px 12px;
	cursor: pointer;
}

.nav-bar-header .lang-menu li:hover {
	background: #f3f4f6;
}

/* ========== Social icons ========== */
.nav-bar-header .icon-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: #fff;
	background: #fff1;
	border-radius: 999px;
}

.nav-bar-header .icon-btn:hover {
	background: #fff2;
}

/* ========== Brand (ใหญ่/กลาง/ซ้อน) ========== */
.nav-bar-header .brand-wrap {
	position: relative;
	height: 0;
	/* ไม่ดันเลย์เอาต์ */
}

.nav-bar-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    z-index: 50;
    margin-top: -7px;
}

.nav-bar-header .brand img {
    width: 160px;
    height: auto;
    object-fit: contain;
    margin-top: -21px;
}

.nav-bar-header .brand-text {
	display: none;
}

/* ========== Main nav ========== */
.nav-bar-header .mainnav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.nav-bar-header .mainnav .nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.nav-bar-header .menu {
	display: flex;
	align-items: center;
	gap: 22px;
	font-weight: 600;
}

.nav-bar-header .menu a {
	color: var(--ink);
	text-decoration: none;
	color: #D42A24;
	;
}

.nav-bar-header .menu a:hover {
	color: var(--brand-red);
}

.nav-bar-header .menu .cta {
	display: inline-block;
	padding: 10px 14px;
	margin-left: 6px;
	color: #fff;
	background: var(--brand-red);
	border-radius: 999px;
    min-width: 160px;
}

.nav-bar-header .menu .cta:hover {
	background: var(--brand-red-dark);
    color: #fff;
}

/* ========== Mobile ========== */
.nav-bar-header .hamburger {
	display: none;
	width: 42px;
	height: 42px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.nav-bar-header .hamburger span {
	width: 20px;
	height: 2px;
	background: #111;
	transition: 0.2s;
}

@media (max-width: 1024px) {
	.nav-bar-header .hours {
		display: none;
	}

	.nav-bar-header .hamburger {
		display: flex;
	}

	.nav-bar-header .menu {
		position: fixed;
		left: 0;
		right: 0;
		top: 72px;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 16px;
		background: #fff;
		border-top: 1px solid #eee;
		opacity: 0;
		transform: translateY(-8px);
		transition: 0.2s;
		pointer-events: none;
	}

	.nav-bar-header .menu.open {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}


/* ===================== Logo Position & Size ===================== */
.nav-bar-header {
	/* Variables (ปรับง่าย) */
	--topbar-h: 44px;
	/* ความสูงแถบแดงด้านบน */
	--nav-h: 72px;
	/* ความสูงเมนูหลัก */
	--container-max: 1140px;
	/* Bootstrap .container (lg) */
	--container-pad: 15px;
	/* padding ซ้าย/ขวาของ .container */

	--logo-w: 180px;
	/* ความกว้างโลโก้ */
	--logo-left-inset: -115px;
	/* ระยะจากขอบซ้าย container */
	--logo-top-overlap: 87px;
	/* ยื่นลงมาทับเส้นแบ่ง topbar */
}

/* Wrapper ไม่ดัน layout */
.nav-bar-header .brand-wrap {
	height: 0;
	position: relative;
}

/* ไม่โชว์ข้อความแบรนด์ */
.nav-bar-header .brand-text {
	display: none;
}

/* ===================== Responsive ===================== */
@media (max-width: 992px) {
	.nav-bar-header {
		--logo-w: 140px;
		--logo-left-inset: 16px;
		--logo-top-overlap: 18px;
		--container-max: 960px;
		/* Bootstrap md */
	}
}

@media (max-width: 576px) {
	.nav-bar-header {
		--logo-w: 120px;
		--container-max: 540px;
		/* Bootstrap sm */
	}
}


.banner-home {
	position: relative;
	width: 100%;
	height: 800px;
	/* สูงเต็มจอ */
	overflow: hidden;
}

.banner-home .banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ครอบพื้นที่โดยไม่เสียสัดส่วน */
}

.banner-home .banner-overlay {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
}

.banner-home .btn {
	font-size: 19px;
	display: inline-block;
	margin-top: 16px;
	background: #c62828;
	color: #fff;
	padding: 12px 75px;
	border-radius: 25px;
	text-decoration: none;
}

.banner-home p {
	color: #F9D577;
	font-size: 18px;
}

.banner-home h1 {
	font-size: 70px;
	font-weight: 600;
	    text-shadow: 0 0 5px #000;
}


.our-services {
	position: relative;
	background: url("/frontend/images/bg-servics.png");
	background-size: cover;
	padding-bottom: 150px;
	padding-top: 50px;
	text-align: center;
}

.services-container {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-top: 40px;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
}

.service-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	color: white;
	width: 500px;
	/* กำหนดความกว้าง */
	height: 300px;
	/* กำหนดความสูง */
}

.service-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ให้รูปเต็มโดยไม่บีบ */
	display: block;
}

.service-card span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 43px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    width: 100%;
    line-height: 1.3;
}

.our-services-text-hd {
	margin-bottom: 80px;
}

.our-services-text-hd h1 {
	font-size: 90px;
	color: #c62828;
}


.health-information {
	position: relative;
	padding: 60px 20px;
	text-align: center;
	background: url("/frontend/images/helt-bg.png") no-repeat center center;
	background-size: cover;
}

.health-information .section-title {
	font-size: 90px;
	color: #c62828;
	margin-bottom: 30px;
}

.health-card {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.health-card img {
	width: 100%;
	height: 320px;
	/* ปรับตามต้องการ */
	object-fit: cover;
	display: block;
}

.health-card .card-content {
	position: absolute;
	left: 50%;
	top: 50%;
	/* ตรงกลางพอดี */
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}

.health-card h3 {
	font-size: 44px;
	margin-bottom: 16px;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.health-card .btn {
	background: #c62828;
	color: #fff;

	border-radius: 25px;
	text-decoration: none;
	font-size: 18px;
	font-weight: 400;

	padding: 10px 35px;
	position: relative;
	top: 25px;
}


.about-us {
	padding: 70px 24px 80px;
	background: linear-gradient(#f9e6bf, #fff);
	text-align: center;
}

.about-title {
	font-size: 90px;
	color: #c62828;
	margin-bottom: 28px;
}

.about-grid {
	max-width: 1040px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.about-card {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
	transition: transform .35s ease;
}

.about-card img {
	width: 100%;
	height: 240px;
	/* ปรับสูง/ต่ำได้ */
	object-fit: cover;
	/* ครอบภาพไม่ให้บีบ */
	display: block;
}

.about-card:hover {
	transform: scale(1.02);
}


/* === Footer (สองคอลัมน์ + เส้นตรงกลาง) === */
.footer {
	/* ปรับค่าได้ตามต้องการ */
	--bg: #c62828;
	/* สีพื้นหลัง */
	--text: #ffffff;
	/* สีตัวอักษร */
	--max: 1100px;
	/* ความกว้างสูงสุดของคอนเทนต์ */
	--padY: 40px;
	/* ระยะบน/ล่างของ footer */
	--gap: 60px;
	/* ระยะห่างระหว่าง 2 คอลัมน์ */
	--title-size: 20px;
	/* ขนาดหัวข้อ */
	--body-size: 15px;
	/* ขนาดเนื้อความ */

	/* เส้นตรงกลาง (ปรับตำแหน่ง+ขนาดได้) */
	--divider-w: 1px;
	/* ความหนาเส้น */
	--divider-h: 140px;
	/* ความสูงเส้น */
	--divider-color: rgba(255, 255, 255, .9);
	--divider-offset-y: 0px;
	/* ขยับขึ้น(+)/ลง(-) จากกึ่งกลาง */

	background: var(--bg);
	color: var(--text);
	font-size: var(--body-size);
}

.footer-container {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	padding: var(--padY) 16px;
	position: relative;
}

/* เส้นตรงกลางแบบ absolute เพื่อจัดตรงกลางเป๊ะและขยับได้ */
.footer-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + var(--divider-offset-y));
	transform: translate(-50%, -50%);
	width: var(--divider-w);
	height: var(--divider-h);
	background: var(--divider-color);
}

.footer-box {
	flex: 1;
	line-height: 1.75;
	position: relative;
	left: 100px;
}

.footer-box h3 {
	margin: 0 0 8px;
	font-size: var(--title-size);
	font-weight: 600;
}

/* ถ้าต้องการให้ตัวเลขโทรศัพท์เด่นขึ้นนิดหน่อย */
.footer-box p {
	margin: 2px 0;
}

/* Responsive: มือถือเรียงลง, ซ่อนเส้นกลาง */
@media (max-width: 768px) {
	.footer-container {
		flex-direction: column;
		text-align: center;
		gap: 22px;
	}

	.footer-container::before {
		display: none;
	}
}


/* ===================== Clinic Banner ===================== */
.clinic-banner-home-all {
	position: relative;
	width: 100%;
	height: 520px;
	/* ความสูงหลัก */
	overflow: hidden;
}

/* พื้นหลัง */
.clinic-banner-home-all .banner-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.clinic-banner-home-all .banner-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay สำหรับข้อความ */
.clinic-banner-home-all .banner-overlay {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	/* มืดบาง ๆ ให้ตัวหนังสือชัด */
}

/* Title */
.clinic-banner-home-all .banner-title {
	position: relative;
	right: 220px;
	font-size: 48px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
}

/* Sub */
.clinic-banner-home-all .banner-sub {
	font-size: 20px;
	color: #fff;
	opacity: 0.9;
	margin-bottom: 28px;
}

/* ปุ่ม */
.clinic-banner-home-all .btn-banner {
	display: inline-block;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #d63a2e;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.3s;
}

.clinic-banner-home-all .btn-banner:hover {
	background: #bf2f24;
}

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
	.clinic-banner-home-all {
		height: 200px;
	}

	.clinic-banner-home-all .banner-title {
		font-size: 32px;
	}

	.clinic-banner-home-all .banner-sub {
		font-size: 16px;
	}
}


/* ===================== Clinic Group (2 รูปตามตัวอย่าง) ===================== */
.cilnic-group-1 {
	/* Background */
	background-image: url(../images/bg-cn-custom.png);
	/* Spacing */
	padding: 56px 0 72px;
}

.cilnic-group-1 .container {
	/* Layout */
	max-width: 1100px;
	/* แคบให้เหมือนตัวอย่าง */
}

/* ---------- Heading ---------- */
.cilnic-group-1 .clinic-heading h2 {
	/* Typography */
	font-size: 90px;
	color: #c8231f;

	/* Spacing */
	margin: 0 0 12px;
}

.cilnic-group-1 .clinic-heading h3 {
	/* Typography */
	font-size: 90px;
	color: #c8231f;
	margin: 20px 0 20px;
}

/* ---------- Rows (รูปซ้าย ข้อความขวา) ---------- */
.cilnic-group-1 .service-row {
	margin-top: 90px;
	/* Layout */
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: center;

	/* Spacing */
	column-gap: 28px;
	row-gap: 16px;
	margin-bottom: 44px;
}

.srv-img{
    width: 300px;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.cilnic-group-1 .srv-img img {
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cilnic-group-1 .srv-text h4 {
	/* Typography */
	font-size: 18px;
	font-weight: 500;
	color: #222;

	/* Spacing */
	margin: 4px 0 10px;
}

.cilnic-group-1 .srv-text h5 {
	/* Typography */
	font-size: 18px;
	font-weight: 500;

	/* Spacing */
	margin: 14px 0 8px;
}

.cilnic-group-1 .srv-text p {
	/* Typography */
	font-size: 18px;
	line-height: 1.7;
    font-weight: 300;
	color: #333;

	/* Spacing */
	margin: 0 0 10px;
}

.cilnic-group-1 .srv-text ul {
	/* Spacing */
	margin: 0 0 10px;
	padding-left: 18px;
    list-style: none;
    padding-left: 0;
	line-height: 1.7;
}

.cilnic-group-1 .srv-text ul li {
	font-size: 18px;
    font-weight: 300;
	line-height: 1.6;
	margin-bottom: 0;
}

/* Utility */
.cilnic-group-1 .mt-20 {
	margin-top: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.cilnic-group-1 .container {
		max-width: 100%;
	}

	.cilnic-group-1 .service-row {
		grid-template-columns: 1fr;
        margin-top: 30px;
	}

	.cilnic-group-1 .srv-img img {
		width: 100%;
	}

	.cilnic-group-1 .clinic-heading h2 {
		font-size: 28px;
	}

	.cilnic-group-1 .clinic-heading h3 {
		font-size: 22px;
	}

    .nav-bar-header .mainnav .nav-container {
        height: 50px;
    }

    .nav-bar-header .brand{
        margin-top: 0;
    }

    .nav-bar-header .brand img {
        position: relative;
        left: 0px;
        width: 100px;
        bottom: -37px;
        margin-top: 0;
    }

    .nav-bar-header .tb-left {
        gap: 14px;
        position: relative;
        left: 0px;
    }

    .banner-home {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

    .our-services {
        padding-top: 0;
        padding: 10px;
    }

    .our-services-text-hd {
        margin-bottom: 0;
    }

    .about-grid {
        display: block;
        padding: 10px;
    }

    .card-text {
        left: 31% !important;
        font-size: 30px !important;
    }


    .footer-box {
        line-height: 24px;
        left: 0 !important;
        width: 100% !important;
    }

    .footer-container {
        gap: 10 !important;
    }

    .footer-box p {
        font-size: 15px;
        text-align: center !important;
    }

    .footer-box h3 {
       font-size: 19px;
        font-weight: 500;
        text-align: center;
    }

    .clinic-group-2 {
        padding: 0 !important;
    }


    .cilnic-group-1 .clinic-heading h3 {
        font-size: 30PX;
        margin: 0;
    }

    .cilnic-group-1 {
        padding: 0;
    }

    .cilnic-group-1 .clinic-heading h2 {
        margin: 0;
    }

    .our-services-text-hd h1 {
        font-size: 50px;
    }

    .services-container {
        margin-top: 20px;
    }

    .health-information {
        padding: 20px 20px;
    }

    .health-information .section-title {
        font-size: 50px !important;
        font-weight: 500 !important;
    }

    .about-title {
        font-size: 50px;
        margin-bottom: 0;
    }

    .about-us {
        padding: 15px 0px 50px;
    }


    .service-card span {
        font-size: 30px;
    }

    .health-card h3 {
        font-size: 30px;
    }

    .health-card .btn {
        font-size: 15px;
    }

    .card-title {
        font-size: 30px !important;
    }


    .pg-card .pg-btn {
        font-size: 10px !important;
        padding: 3px 25px !important;
        top: 0 !important;
    }

    .product-group {
        padding: 0 !important;
    }

    .product-group .pg-heading h2 {
        font-size: 50px !important;
    }

    .pg-heading {
        margin-bottom: 0 !important;
    }

    .pg-card .pg-overlay h3 {
        padding: 10px 0px 10px 0px !important;
        font-size: 20px !important;
    }


    .clinic-banner-home-all .banner-title {
        right: 5px !important;
    }

    .srv-text {
        top: 0 !important;
    }

    .cilnic-group-1 .service-row {
        margin-bottom: -5px !important;
    }

    .cilnic-group-1 .srv-text p {
        font-size: 15px;
    }

    .cilnic-group-1 .srv-text ul li {
        font-size: 15px;
    }

    .clinic-group-2 .cg2-row {
        margin-top: 0 !important;
    }

    .clinic-group-2 .cg2-text p {
        font-size: 15px !important;
    }

    .clinic-group-3 {
        padding: 0 !important;
    }

    .clinic-group-3 .cg3-row {
        padding: 0 !important;
    }

    .clinic-group-3 .container {
        padding-bottom: 50px;
    }


    .article-group .ag-title {
        font-size: 50px !important;
    }

    .article-group {
        padding: 20px 16px 20px !important;
    }

    .vdo-title h2 {
        font-size: 50px !important;
        padding-bottom: 0 !important;
    }

    .about-us-group-1 .au-title {
        font-size: 50px !important;
    }

    .about-us-group-1 .au-sub {
        font-size: 50px !important;
        text-align: center !important;
    }

    .about-us-group-1 p {
        font-size: 15px !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    .about-us-group-1 {
        padding: 50px 0 0px !important;
    }

    .align-items-center {
        margin-bottom: 0 !important;
    }

    .about-us-group-2 .au2-hero {
        height: 0 !important;
    }

    .about-us-group-2 .au2-quote {
        font-size: 20px !important;
        line-height: 25px !important;
    }

    .about-us-group-1 .au-quote {
        line-height: 25px !important;
    }

    .mission-title {
        font-size: 30px !important;
    }

    .mission-hero {
        height: 280px !important;
    }

    .mission-quote {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    .mission-content {
        right: 40px !important;
        max-width: 100% !important;

    }

    .nilps-sub {
        font-size: 30px !important;
    }

    .nilps-wrap {
        padding: 0px 20px 0px !important;
    }

    .nilps-title {
        margin-bottom: 0 !important;
    }

    .nilps-ico img {
        width: 50px !important;
        height: 50px !important;
    }


    .dm-title {
        font-size: 50px !important;
    }

    .doctor-more {
        padding: 30px 15px 50px !important;
    }


    .profile-info .fullname {
        font-size: 8px !important;
    }

    .profile-info .nickname {
        font-size: 10px !important;
    }

    .profile-info {
        width: 94% !important;
    }

    .doctor-more-2 {
        padding-bottom: 70px !important;
        padding-top: 30px !important;
    }

    .oldman-group-1 {
        padding-top: 0 !important;
    }

    .intro {
        display: block !important;
        margin-bottom: 30px !important;
    }

    .intro-text {
        top: 0 !important;
        left: 0 !important;
    }


    .text-his-5 {
        left: 0 !important;
    }


    .triple {
        display: block !important;
    }

    .triple-1 {
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }

    .hs-text span {
        left: 0 !important;
    }

    .ppd-c {
        padding-bottom: 0 !important;
    }

    .contact-us-group-1 {
        padding: 0px 10px 0px !important;
    }

    .contact-us-group-1 .cu-heading {
        font-size: 50px !important;
    }

    .contact-us-group-1 .cu-two-cols {
        display: block !important;
        text-align: center !important;
    }

    .contact-us-group-1 .cu-box p {
        text-align: center !important;
    }

    .cu-box-2 p {
        text-align: center !important;
    }

    .cu-box-2 {
        left: 0 !important;
    }

    .contact-us-group-1 .cu-address {
        text-align: center !important;
    }

    .contact-us-group-2 {
        margin-top: 0px !important;
        display: block !important;
    }

    .map iframe {
        max-width: 100% !important;
    }

    .map-details .md-title {
        text-align: center !important;
    }

    .map-details {
        padding: 25px 16px 25px !important;
    }

    .contact-us-group-3 {
        max-width: 100% !important;
    }


    .contact-media img {
        width: 100% !important;
    }

    .contact-media {
        gap: 10px !important;
    }

    .media-text {
        margin-top: 0px !important;
    }

    .map-details {
        --md-card-pad: 5px 0px 0px 25px !important;
    }

    .media-text h4 {
        font-size: 25px !important;
    }

    .cg3-text li {
        font-size: 15px !important;
    }

    .cg3-steps {
        font-size: 15px !important;
    }

    .clinic-group-3 .cg3-text p {
        font-size: 15px !important;
    }

    .clinic-group-3 .cg3-steps span {
        font-size: 15px !important;
    }

    .hs-text p {
        text-align: left !important;
    }


    .text-his-4 span {
        left: 0 !important;
    }

    .text-his-5 span {
        left: 0 !important;
    }


    .srv-img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===================== Clinic Group 2 (แผนกหัตถการ) ===================== */
.clinic-group-2 {
	/* Background */
	background: linear-gradient(#fbf2e6, #f6e6cc);

	/* Spacing */
	padding: 56px 0 72px;
}
/* ---------- Heading ---------- */
.clinic-group-2 .cg2-heading h2 {
	/* Typography */
	font-size: 90px;
	color: #c8231f;
	margin: 0 0 28px;
}

/* ---------- Rows (รูปซ้าย – ข้อความขวา) ---------- */
.clinic-group-2 .cg2-row {
	/* Layout */
	margin-top: 100px;
	display: grid;
	grid-template-columns: 370px 1fr;
	/* สัดส่วนใกล้ตัวอย่าง */
	align-items: center;

	/* Spacing */
	column-gap: 30px;
	row-gap: 14px;
	margin-bottom: 44px;
}

.clinic-group-2 .cg2-img img {
	/* Box */
	width: 100%;
	height: auto;
	object-fit: cover;

	/* Effects */
	box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}

.clinic-group-2 .cg2-text h3 {
	/* Typography */
	font-size: 18px;
	font-weight: 800;
	color: #222;

	/* Spacing */
	margin: 0 0 10px;
}

.clinic-group-2 .cg2-text p {
	font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 14px;
    font-weight: 300;
	text-align: left;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
	.clinic-group-2 .container {
		max-width: 100%;
	}

	.clinic-group-2 .cg2-row {
		grid-template-columns: 1fr;
		margin-bottom: 36px;
	}

	.clinic-group-2 .cg2-img img {
		width: 100%;
	}

	.clinic-group-2 .cg2-heading h2 {
		font-size: 32px;
		margin-bottom: 20px;
	}
}


.cg2-text-2 strong {
    font-size: 18px;
    font-weight: 500;
}



.cg2-text-2 h3 {
	font-size: 18px;
	font-weight: 800;
	color: #222;
	margin: 0 0 10px;
}


.cg2-text strong {
    font-size: 18px;
    font-weight: 500;
}


.cg2-text-2 p {
    font-size: 18px;
    font-weight: 300;
}



/* ===================== Clinic Group 3 ===================== */
.clinic-group-3 {
	/* Background */
	background: linear-gradient(#fbf4e6, #f8edd4);

	/* Spacing */
	padding: 56px 0 72px;
}

.clinic-group-3 .container {
	/* Layout */
	max-width: 1100px;
	/* ใกล้เคียงสัดส่วนในภาพ */
}

/* ---------- Heading ---------- */
.clinic-group-3 .cg3-heading h2 {
	/* Typography */
	font-size: 90px;
	color: #c8231f;
	margin: 0 0 28px;
}

/* ---------- Row (ซ้าย: รูปสองภาพแนวตั้ง / ขวา: ข้อความ) ---------- */
.clinic-group-3 .cg3-row {
	/* Layout */
	padding-bottom: 60px;
	padding-top: 100px;
	display: grid;
	grid-template-columns: 420px 1fr;
	/* ซ้ายคงที่ ขวายืด */
	align-items: start;

	/* Spacing */
	column-gap: 36px;
	row-gap: 20px;
}

/* Gallery (ซ้าย) */
.clinic-group-3 .cg3-gallery {
	/* Layout */
	display: grid;
	grid-template-rows: auto auto;
	row-gap: 22px;
}

.clinic-group-3 .cg3-photo img {
	/* Box */
	width: 100%;
	height: auto;
	border-radius: 6px;
	object-fit: cover;

	/* Effects */
	box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}

/* Text (ขวา) */
.clinic-group-3 .cg3-text h3 {
	/* Typography */
	font-size: 18px;
	font-weight: 500;
	color: #222;

	/* Spacing */
	margin: 0 0 10px;
}


.cg3-steps li {
    font-size: 18px;
    font-weight: 300;
}



.clinic-group-3 .cg3-text p {
	/* Typography */
	font-size: 18px;
	line-height: 1.7;
	color: #333;
	margin: 0 0 16px;
    font-weight: 300;
	text-align: left;
}

/* Bullets และ Steps */
.clinic-group-3 .cg3-bullets {
	list-style: none;
	margin: 0 0 14px;
	padding-left: 0px;
	font-size: 18px;
    font-weight: 300;
	line-height: 1.7;
}

.clinic-group-3 .cg3-steps {
	/* Spacing */
	margin: 0 0 16px;
	padding-left: 0;
	list-style: none !important;
	/* Typography */
	font-size: 15px;
	line-height: 1.7;
}

.clinic-group-3 .cg3-steps span {
	/* Typography */
	font-weight: 400;
    font-size: 18px;
	color: #222;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
	.clinic-group-3 .container {
		max-width: 100%;
	}

	.clinic-group-3 .cg3-row {
		grid-template-columns: 1fr;
	}

	.clinic-group-3 .cg3-heading h2 {
		font-size: 32px;
		margin-bottom: 22px;
	}

	.clinic-group-3 .cg3-gallery {
		max-width: 520px;
	}
}


.cg3-text {
	position: relative;
	top: 40px;
}


/* ===================== Product Group ===================== */
.product-group {
	/* Background */
	background: linear-gradient(#fbf4e6, #f8edd4);

	/* Spacing */
	padding: 56px 0 72px;
}


.pg-heading {
	text-align: center;
	margin-bottom: 90px;
}


/* ---------- Heading ---------- */
.product-group .pg-heading h2 {
	font-size: 90px;
	color: #c8231f;
	margin: 0 0 28px;
}

/* ---------- Card ---------- */
/* การ์ด */
.pg-card {
	position: relative;
	display: block;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 50px;
	margin-top: 50px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
	transition: transform .2s;
}

.pg-card:hover {
	transform: scale(1.005);
}

/* รูป */
.pg-card .pg-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Overlay */
.pg-card .pg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;

}

.pg-card .pg-overlay h3 {
	color: #fff;
	font-size: 37px;
	font-weight: 600;
	margin: 0 0 12px;
	padding: 20px 0px 20px 0px;
	background: #030202;
	background: linear-gradient(90deg, rgba(3, 2, 2, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
	width: 100%;
}

/* ปุ่ม */
.pg-card .pg-btn {
	position: relative;
	top: 30px;
	display: inline-block;
	padding: 10px 50px;
	font-size: 18px;
	font-weight: 400;
	border-radius: 999px;
	background: #d63a2e;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	transition: background .2s;
}

.pg-card:hover .pg-btn {
	background: #bf2f24;
}

/* Responsive */


/* ===================== Herb Group ===================== */
.herb-group {
	/* Background */
	background-image: url(../images/herb-bg.png);

	/* Spacing */
	padding: 56px 0 72px;
}

.herb-group .container {
	/* Layout */
	max-width: 1100px;
}

/* ---------- Category Pills ---------- */
.herb-group .hg-cats {
	margin-bottom: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* ระยะห่างลูกศรกับ pills */
}

.hg-pills .slick-list {
	margin: 0 auto;
}


.hg-pills .slick-track {
	display: flex !important;
	justify-content: center;
	gap: 10px;
	/* ระยะห่าง pill */
}


.hg-pills .pill {
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
	color: #c23a2e;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}


.hg-pills .pill.is-active {
	background: #ffc861;
}

.product-desc {
    height: 164px;
    overflow: hidden;
	    font-weight: 300;
}

.product-desc p{
	margin-bottom: 0 !important;
	font-size: 18px !important;
	font-family: "Kanit" !important;
	line-height: 1.3;
}

.product-desc ul{
   line-height: 1.3 !important;
   margin-bottom: 0 !important;
   padding-top: 0 !important;
   	font-size: 18px !important;
	font-family: "Kanit" !important;
}

.herb-group .hg-arrow {
	/* Layout */
	display: inline-grid;
	place-items: center;

	/* Box */
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;

	/* Colors */
	background: #f0d9b6;
	color: #c23a2e;

	/* Effects */
	cursor: pointer;
}

.herb-group .hg-pills {
	/* Layout */
	align-items: center;
	justify-content: center;

	/* Spacing */
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	/* FF */
}

.herb-group .hg-pills::-webkit-scrollbar {
	display: none;
}

.herb-group .pill {
	text-align: center;
	/* Layout */
	display: inline-block;

	/* Box */
	border: 0;
	border-radius: 999px;

	/* Spacing */
	padding: 10px 18px;

	/* Typography */
	font-weight: 700;

	/* Colors */
	background: #fff;
	color: #c23a2e;

	/* Effects */
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	cursor: pointer;
	white-space: nowrap;
	min-width: 120px;
}





 .about-card {
  display: block;
  position: relative;
  overflow: hidden;
}

.card-image {
  position: relative;
}

.card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.card-text {
    width: 100%;
    position: absolute;
    bottom: 26px;
    left: 44%;
    transform: translateX(-50%);
    color: white;
    font-size: 33px;
    font-weight: 400;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    background: linear-gradient(90deg, rgba(3, 2, 2, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}









.about-card {
  display: block;
  position: relative;
  overflow: hidden;
}

.card-image {
  position: relative;
}

.card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.card-overlay {
 position: absolute;
    bottom: 19px;
    left: 0;
    width: 100%;
    padding: 4px 15px;
    background: linear-gradient(90deg, rgba(3, 2, 2, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    color: white;
    text-align: left;
}

.card-title {
  display: block;
    font-size: 34px;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

.card-subtitle {
  display: block;
    font-size: 16px;
    font-weight: 400;
}





























.herb-group .pill.is-active {
	background: #ffc861;
}

/* ---------- Product Grid ---------- */
.herb-group .hg-grid {
	/* Layout */
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	/* Spacing */
	gap: 22px 24px;
}

.herb-group .hg-card {
	/* Layout */
	display: flex;
	flex-direction: column;

	/* Box */
	border-radius: 10px;
	overflow: hidden;

	/* Colors */
	background: #fff;

	/* Effects */
	box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.hg-card ul{
	padding-left: 20px !important;
    line-height: 1.3 !important;
}

/* รูป + ป้ายราคา */
.herb-group .hg-thumb {
	position: relative;
}

.herb-group .hg-thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.herb-group .hg-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #ffc861;
	color: #3b1b00;
	font-weight: 800;
	font-size: 12px;
}

/* เนื้อหาการ์ด */
.herb-group .hg-body {
	padding: 12px 14px 14px;
}

.herb-group .hg-title {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 22px;
	color: #c23a2e;
}

.herb-group .hg-list {
	margin: 0 0 10px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

.herb-group .hg-meta {
	font-size: 12px;
	color: #777;
	text-align: right;
	position: relative;
	bottom: 25px;
}

/* ---------- Pagination ---------- */
.herb-group .hg-pagination {
	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Spacing */
	gap: 8px;
	margin-top: 100px;
	margin-bottom: 100px;
}


.pg-arrow {
	background: transparent;
	border: 0;
	outline: none !important;
	cursor: pointer;
}


.herb-group .pg-dot {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #c23a2e;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	outline: none !important;
}

.herb-group .pg-dot.is-active {
	background: #c23a2e;
	color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
	.herb-group .hg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.herb-group .hg-grid {
		grid-template-columns: 1fr;
	}
}


.about-us-group-1 {
	background: #b32024 url('frontend/images/bg-pattern.png') repeat;
	padding: 100px 0 80px;
}

.about-us-group-1 .au-title {
	font-size: 62px;
	color: #ffd966;
	margin-bottom: 12px;
    text-align: center;
    line-height: 65px;
}

.about-us-group-1 .au-sub {
	font-size: 62px;
	color: #ffd966;
	margin-bottom: 16px;
    line-height: 65px;
}

.about-us-group-1 p {
	font-size: 19px;
    font-weight: 500;
	line-height: 30px;
	color: #fff;
    text-align: center;
}


.cu-1 {
    font-size: 41px !important;
}

.about-us-group-1 .au-quote {
	font-size: 41px;
	line-height: 70px;
	margin-top: 40px;
	color: #ffd966;
}


.about-us-group-1 .au-quote strong {
    font-size: 70px;
    color: #ffd966;
}


/* ===================== About Us – Vision/Mission ===================== */
.about-us-group-2 {
	margin: 0;
	padding: 0;
}

/* แต่ละแผง */
.about-us-group-2 .au2-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
    background-image: url(../images/about-gb-1.png);
    height: 900px;
    background-size: cover;
    background-position: right;
}

/* รูปพื้นหลัง: เต็มจอแบบ cover (เหมือนภาพตัวอย่าง) */
.about-us-group-2 .au2-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* ✅ เต็มจอแบบภาพตัวอย่าง */
	object-position: center;
	z-index: 0;
}

/* ม่านทับ: ทำเป็นแถบดำโปร่งทั้งแผง */
.about-us-group-2 .au2-overlay {
	position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 2, 2, 0.51) 0%, rgba(0, 0, 0, 0) 100%);
}

/* เส้นคั่นบางๆ เหมือนภาพ */
.about-us-group-2 .au2-hero+.au2-hero {
	border-top: 2px solid rgba(0, 0, 0, .35);
}

/* กล่องข้อความ – จำกัดความกว้างและจัดชิด */
.about-us-group-2 .au2-content {
	position: absolute;
	z-index: 2;

	max-width: 1444px;
	/* ✅ คุมความกว้างรวมข้อความ */
	width: 100%;
	margin: 0 auto;
	/* จัดให้อยู่ในกรอบกลางจอ */

	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	/* อ่านชัด */
}







.mission-hero {
  position: relative;
  display: flex;
  align-items: center;       /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  justify-content: flex-end; /* จัดข้อความไปขวา */
  height: 900px;
  background-image: url(../images/about-gb-2.png);
  background-size: cover;
  background-position: center;
}

.mission-img {
  width: 100%;
  height: auto;
  display: block;
}

.mission-overlay {
  position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 2, 2, 0.51) 0%, rgba(0, 0, 0, 0) 100%);
}

.mission-content {
  position: absolute;
  right: 20%;
  color: #fff;
  text-align: center;
  max-width: 50%;
  z-index: 2;
}

.mission-title {
  font-size: 90px;

}

.mission-quote {
  font-size: 40px;
  line-height: 50px;
  text-align: center;
}











.about-us-group-2 .au2-right .au2-content {
	text-align: right;
}

/* ตัวอักษร */
.about-us-group-2 .au2-title {
	text-align: center;
    font-size: 90px;
	margin: 0 0 10px;
}

.about-us-group-2 .au2-quote {
	font-size: 40px;
    line-height: 50px;
	margin: 0 0 6px;
    text-align: center;
}

.about-us-group-2 .au2-sub {
	font-size: 16px;
	opacity: .95;
}

.au2-title-2 {
	position: relative;
	right: 77px;
	font-size: 55px;
	font-weight: 800;
	margin: 0 0 10px;
}

/* Responsive */
@media (max-width: 992px) {
	.about-us-group-2 .au2-hero {
		min-height: 320px;
	}

	.about-us-group-2 .au2-title {
		font-size: 30px;
	}

	.about-us-group-2 .au2-quote {
		font-size: 16px;
	}

	.about-us-group-2 .au2-sub {
		font-size: 14px;
	}
}

@media (max-width: 576px) {
	.about-us-group-2 .au2-hero {
		min-height: 280px;
	}

	.about-us-group-2 .au2-content {
		text-align: center !important;
	}
}


/* ===================== NILPS Section ===================== */
.about-us-group-2.nilps {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-image: url(../images/about-gb-3.png);
	padding-bottom: 50px;
	padding-top: 50px;

    background-size: cover;
    background-position: center;
}

/* พื้นหลัง + ม่าน */
.nilps-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nilps-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	background: #030202;
	background: linear-gradient(90deg, rgba(3, 2, 2, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
	z-index: 1;
}

/* เนื้อหากลาง */
.nilps-wrap {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	/* จำกัดกว้าง */
	margin: 0 auto;
	padding: 56px 16px 40px;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    background-image: url(../images/nilps-bg,png);
}

/* หัวข้อ */
.nilps-title {
    font-size: 90px;
	margin: 0 0 8px;
	margin-bottom: 35px;
}

.nilps-sub {
	margin: 0;
    font-size: 40px;
    opacity: .95;
    text-align: center;
    line-height: 50px;
}

.nilps-core {
	font-size: 90px;
	margin: 70px 0 35px;
}

/* การ์ด */
.nilps-cards {
	margin-top: 8px;
}

.nilps-card {
	height: 100%;

	padding: 50px 20px 50px 20px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	background: rgba(0, 0, 0, .18);
	backdrop-filter: blur(2px);
}

.nilps-card h4 {
	font-size: 18px;
	font-weight: 800;
	margin: 8px 0 6px;
}

.nilps-card p {
	margin: 0;
	font-size: 14px;
	line-height: 25px;
    font-weight: 600;
	opacity: .95;
	position: relative;
	top: 25px;
    text-align: center;

}

.nilps-ico {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 8px;
}

/* สโลแกน */
.nilps-tagline {
	margin: 70px 0 0px;
    font-size: 60px;
    text-align: center;
}

/* Responsive */
@media (max-width: 992px) {
	.about-us-group-2.nilps {
		min-height: auto;
	}

	.nilps-title {
		font-size: 36px;
	}

	.nilps-core {
		font-size: 32px;
	}
}

@media (max-width: 576px) {
	.nilps-title {
		font-size: 30px;
	}

	.nilps-core {
		font-size: 26px;
	}

	.nilps-tagline {
		font-size: 18px;
	}
}


.nilps-ico {
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.nilps-ico img {
	width: 80px;
	/* ปรับขนาดไอคอนได้ที่นี่ */
	height: 80px;
	object-fit: contain;
}







/* ====== Contact Us (เหมือนภาพตัวอย่าง) ====== */
.contact-us-group-1{
  /* ปรับแต่งหลัก ๆ ได้ที่ตัวแปรนี้ */
  --cu-max-w: 1450px;
  --cu-gap: 56px;               /* ระยะห่างสองคอลัมน์ */
  --cu-divider-color: #d9d9d9;  /* สีเส้นคั่นกลาง */
  --cu-divider-h: 180px;        /* ความสูงเส้นคั่นกลาง */
  --cu-red: #e24032;            /* สีหัวข้อแดงตามธีม */
  --cu-heading-size: clamp(28px, 3vw, 40px);

  /* พื้นหลังไล่เฉดครีมอ่อน -> ขาว เหมือนภาพ */
  background-image: url(../images/ct-bg-2.png);
  padding: 56px 16px 72px;
}

.contact-us-group-1 .cu-wrap{
  max-width: var(--cu-max-w);
  margin: 0 auto;
}

.contact-us-group-1 .cu-heading{
  font-size: 90px;
  line-height: 1.15;
  text-align: center;
  color: var(--cu-red);
  letter-spacing: .5px;
  margin: 10px 0 28px;
}

.contact-us-group-1 .cu-two-cols{
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 24px;
  padding: 14px 0 6px;
}

.contact-us-group-1 .cu-box h3{
  font-weight: 500;
  margin: 0 0 10px;
}

.contact-us-group-1 .cu-box p{
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}

/* เส้นแบ่งกลาง (จะแสดงเฉพาะหน้าจอกว้าง) */
.contact-us-group-1 .cu-divider{
  display: none;
}

@media (min-width: 900px){
  .contact-us-group-1 .cu-two-cols{
    grid-template-columns: 1fr auto 1fr;
    gap: var(--cu-gap);
  }
  .contact-us-group-1 .cu-divider{
    display: block;
    width: 1px;
    height: var(--cu-divider-h);
    background-color: #000;
    margin: 8px 0 0;
  }
}

.contact-us-group-1 .cu-address{
  margin-top: 26px;
  font-size: 18px;
}

/* ปรับระยะตัวอักษรและความคมเล็กน้อยให้คล้ายดีไซน์ */
.contact-us-group-1 .cu-box,
.contact-us-group-1 .cu-address{
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ===== Parking near shop (เหมือนภาพ) ===== */
.map-details{
  --md-bg: #faefd9;           /* สีพื้นหลังเหลืองอ่อน */
  --md-red: #e24032;          /* สีหัวข้อ */
  --md-link: #2b78ff;         /* สีลิงก์ Google map */
  --md-card-radius: 16px;
  --md-card-pad: 18px;
  padding: 0px 16px 22px;
}

.map-details .md-wrap{
  max-width: 420px;           /* ความกว้างบล็อก */
}

.map-details .md-title{
  margin: 0 0 10px;
  color: var(--md-red);
  font-weight: 500;
  font-size: 22px;
}

.map-details .md-card{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 0 rgba(0,0,0,.05) inset;
  padding: 8px 0;
}

.map-details .md-item{
  padding: var(--md-card-pad);
}

.map-details .md-item h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #1b1b1b;
}

.map-details .md-item p{
  margin: 0 0 10px;
  font-size: 14px;
  color: #333;
}

.map-details .md-gmap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--md-link);
}

.map-details .md-gmap:hover{ text-decoration: underline; }

/* ไอคอนกลมเลียนแบบโลโก้กูเกิลแบบเรียบง่าย */
.map-details .md-gicon{
  width: 18px; height: 18px; border-radius: 50%;
  background:
    radial-gradient(circle at 70% 30%, #34a853 36%, transparent 37%) top left/100% 100% no-repeat,
    conic-gradient(#4285f4 0 25%, #ea4335 0 50%, #fbbc05 0 75%, #34a853 0 100%);
  display: inline-block;
}

/* เส้นคั่นระหว่างรายการ */
.map-details .md-sep{
  height: 1px;
  background: #eee;
  margin: 0 14px;
}

/* ปรับแต่งเพิ่มเติมได้ง่ายด้วยตัวแปรด้านบน */



.map-details .md-gmap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--md-link, #2b78ff);
}

.map-details .md-gmap:hover {
  text-decoration: underline;
}

.map-details .md-gmap .md-gicon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
}




.contact-us-group-2 {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-bottom: 50px;
    margin-top: 7rem;
}

.map iframe {
    width: 950px;
}

.cu-box-2 {
    position: relative;
    left: 100px;
}

.cu-box-2 h3 {
    font-weight: 600;
}

.cu-box-2 p {
    font-size: 18px;
    font-weight: 400;
}

.cu-address span{
    font-weight: 500;
}

.cu-address {
    font-weight: 400;
}


.contact-us-group-3 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


.contact-media img {
    width: 100px;
}

.contact-media {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding-bottom: 50px;
}

.media-text {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 80px;
}

.media-text h4 {
    font-size: 29px;
    font-weight: 700;
    color: #c62828;
}






/* ===============================
   Article Grid (บทความ)
   =============================== */
.article-group {
  /* ตัวแปรปรับแต่ง */
  --ag-max-w: 1440px;      /* ความกว้างสูงสุดของ content */
  --ag-gap: 34px;          /* ระยะห่างระหว่างการ์ด */
  --ag-red: #e24032;       /* สีหลัก (หัวข้อ/หมวด) */
    background: #fff;
  padding: 40px 16px 70px;
}

.article-group .ag-wrap {
  max-width: var(--ag-max-w);
  margin: 0 auto;
}

.article-group .ag-title {
  text-align: center;
    margin-bottom: 50px;
  color: var(--ag-red);
  letter-spacing: 0.8px;
  font-size: 90px;
}

/* ===============================
   Layout: Grid
   =============================== */
.article-group .ag-grid {
  display: grid;
  gap: var(--ag-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .article-group .ag-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .article-group .ag-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===============================
   Card
   =============================== */
.ag-card {
  display: grid;
  gap: 10px;
}

/* Thumbnail */
.ag-thumb {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  background: #f2f2f2;
}

.ag-thumb img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.ag-thumb:hover img {
  transform: scale(1.03);
}

/* ===============================
   Meta (หมวดหมู่/ผู้เขียน)
   =============================== */
.ag-meta {
  font-size: 12px;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ag-cat {
  color: var(--ag-red);
  font-weight: 700;
  text-decoration: none;
}

.ag-author {
  color: #111;
  text-decoration: none;
}

/* ===============================
   Headline + Excerpt
   =============================== */
.ag-head {
  margin: 2px 0 4px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.ag-head a {
  color: #111;
  text-decoration: none !important;
}

.ag-head a:hover {
  text-decoration: underline;
}

.ag-excerpt {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: #333;
}



.hg-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.hg-pagination .pg-arrow {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.hg-pagination .pg-arrow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hg-pagination .pg-arrow[disabled] {
  opacity: .35;
  cursor: default;
}

.hg-pagination .pg-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e24032;
  color: #e24032;
  font-weight: 700;
  cursor: pointer;
  display: flex;
    align-items: center;
    justify-content: center;
}

.hg-pagination .pg-dot.is-active {
  background: #e24032;
  color: #fff;
  display: flex;
    align-items: center;
    justify-content: center;
}


.next-tap-custom {
    margin-top: 80px;
}






/* ====== Video Section ====== */
.article-group-2 {
  --ag2-red: #e24032;
  background-image: url(../images/vdo-bg.png);
  padding: 60px 16px;
  text-align: center;
}

.article-group-2 .ag2-wrap {
  max-width: 1000px;
  margin: 0 auto;
}


.article-group-2 .ag2-video {
  display: flex;
  justify-content: center;
}

.article-group-2 .ag2-frame {
  position: relative;
  width: 100%;
  max-width: 950px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.article-group-2 .ag2-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


.vdo-title h2 {
    font-size: 90px;
    color: #e24032;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 50px;
}

.vdo-title {
    background-color: #fff;
}















.article-group-3 {
background-image: url(../images/ct-bg-2.png);
  padding: 100px 16px 100px;
}

.ag3-wrap { max-width: 1100px; margin: 0 auto; }

.ag3-title {
  text-align: center;
  color: #e24032;
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 24px;
}

.ag3-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 800px) {
  .ag3-grid { grid-template-columns: repeat(3, 1fr); }
}

.ag3-card {
  width: 100%;
  max-width: 330px;
}



/* TikTok embed จะสร้าง iframe เอง */
.tiktok-embed {
  border-radius: 12px;
  overflow: hidden;
}

/* Pagination */
.ag3-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 50px;
}
.ag3-pagination .pg-arrow {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ag3-pagination .pg-arrow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.ag3-pagination .pg-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e24032;
  color: #e24032;
  font-weight: 700;
  cursor: pointer;
}
.ag3-pagination .pg-dot.is-active {
  background: #e24032;
  color: #fff;
}










.doctor-more {
  background-image: url(../images/ct-bg-2.png);
  padding: 60px 16px 100px;
}

.dm-wrap { max-width: 1100px; margin: 0 auto; }

.dm-title {
  text-align: center;
  color: #e24032;
  font-size: 90px;
  margin: 0 0 24px;
}

.dm-headrow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
      border-left: 7px solid #d63a2e;
    padding-left: 15px;
}
.dm-dept { margin: 0; color: #e24032; font-weight: 600; font-size: 24px; }


.dm-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2,1fr);
}
@media (min-width:900px) {
  .dm-grid { grid-template-columns: repeat(5,1fr); }
}

.dm-card {}
.dm-photo {
  aspect-ratio: 3/4;
  border-radius: 8px;
  display: grid;
  place-items: end center;
}


.doctor-more-2 {
    padding-bottom: 100px;
    padding-top: 100px;
    background-image: url(../images/ct-bg-2.png);
}

.doctor-group {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.doctor-name {
    position: relative;
    width: 30%;
}



.profile-card {
  width: 100%;
    text-align: center;
    background-size: cover;
}


.profile-image {
    position: relative;
    z-index: 2;
}


.profile-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.d-bg {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.profile-info {
  background: #fff;
    padding: 5px 10px 5px 10px;
    width: 93%;
    position: absolute;
    z-index: 2;
    transform: translate(-50% ,-50%);
    left: 50%;
    text-align: center;
}

.profile-info .nickname {
  color: #d62828; /* สีแดง */
  font-weight: 600;
  margin: 0;
  text-align: center;
  font-size: 20px;
}

.profile-info .fullname {
  color: #000;
  margin: 0;
  text-align: center;
}





.map {
    margin-top: 17px;
}









/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Sarabun', 'Tahoma', 'Arial', sans-serif;
    line-height: 1.6;
    background: linear-gradient(135deg, #f5f2e8 0%, #e8dcc0 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.oldman-group {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Hero Section */
.hero-section {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(45deg, rgba(218, 165, 32, 0.1), rgba(255, 215, 0, 0.1));
    border-radius: 10px;
}

.hero-image {
    flex-shrink: 0;
}

.hero-image img {
    width: 250px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #daa520;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-content {
    flex: 1;
    padding: 20px 0;
}

.hero-content h1 {
    font-size: 2.2em;
    font-weight: bold;
    color: #8b4513;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
}

.hero-content p {
    font-size: 1.1em;
    text-align: justify;
    color: #444;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border-left: 4px solid #daa520;
}

/* Timeline Section */
.timeline-section {
    margin-top: 30px;
}

.timeline-intro {
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 8px;
    border: 1px solid #daa520;
    color: #555;
}

/* Image Gallery */
.image-gallery {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.gallery-item {
    text-align: center;
    flex: 1;
    min-width: 180px;
}

.gallery-item img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: translateY(-5px);
}

.gallery-item p {
    margin-top: 10px;
    font-weight: bold;
    color: #8b4513;
    font-size: 1.1em;
}

/* Text Content */
.text-content {
    margin: 40px 0;
}

.text-content p {
    font-size: 1.05em;
    text-align: justify;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border-left: 3px solid #daa520;
    color: #444;
}

.text-content p.highlight {
    background: linear-gradient(45deg, rgba(218, 165, 32, 0.15), rgba(255, 215, 0, 0.15));
    border-left: 4px solid #ff6b35;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Bottom Gallery */
.bottom-gallery {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.bottom-image {
    flex: 1;
    min-width: 280px;
}

.bottom-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bottom-image img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Final Content */
.final-content {
    margin-top: 40px;
}

.final-content p {
    font-size: 1.05em;
    text-align: justify;
    margin-bottom: 20px;
    padding: 18px 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    border: 1px solid #daa520;
    color: #444;
    line-height: 1.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .oldman-group {
        padding: 20px;
    }

    .hero-section {
        flex-direction: column;
        text-align: center;
    }

    .hero-image img {
        width: 200px;
        height: 240px;
    }

    .hero-content h1 {
        font-size: 1.8em;
    }

    .image-gallery {
        flex-direction: column;
        align-items: center;
    }

    .bottom-gallery {
        flex-direction: column;
    }

    .gallery-item {
        margin-bottom: 20px;
    }

    .cu-1 {
        font-size: 19px !important;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.5em;
    }

    .hero-content p,
    .text-content p,
    .final-content p {
        font-size: 1em;
        padding: 12px 15px;
    }

    .timeline-intro {
        font-size: 1em;
        padding: 15px;
    }
}









.oldman-group-1 {
  background-image: url("../images/old-bg.png");
  background-size: cover;
  background-position: center;
  padding-top: 80px;
}

.intro-text p {
    margin: 0;
}

.history {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.intro {
  display: flex;
  gap: 20px;
  margin-bottom: 70px;
}

.intro-img img {
  width: 100%;
  border-radius: 8px;
}

.intro-text h3 {
  margin-top: 0;
  font-size: 37px;
    font-weight: 600;
}


.triple img {
  border-radius: 8px;

}


p {
  margin-bottom: 20px;
  text-align: justify;
}


.text-his-1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.text-his-2 {

}

.text-his-3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}


.text-his-1 p {
    font-size: 24px;
    font-weight: 500;
}

.text-his-3 p {
    font-size: 24px;
    font-weight: 500;
}

.text-his-4 span {
    position: relative;
    left: 19px;
    font-size: 20px;
}

.text-his-4 p {
    font-size: 20px;
    font-weight: 500;
}


.intro-text {
    position: relative;
    top: 120px;
    left: 30px;
}

.text-his-5 {
    position: relative;
    left: 50px;
    padding-bottom: 25px;
}

.text-his-5 span {
    position: relative;
    left: 20px;
    font-size: 19px;
    font-weight: 500;
}


.text-his-5 p {
    font-size: 20px;
    font-weight: 500;
}


.triple {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: fit-content;
	max-width: 1000px;
}


.triple-1 {
    position: relative;
}

.triple-1 p {
    font-size: 25px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    left: 50%;
    bottom: -6%;
    transform: translate(-50%,-50%);
	width: 100%;
}

.triple-1 img {
    width: 100%;
}

.triple-2 {
    position: relative;
}

.triple-2 img {
    width: 100%;
}

.triple-3 {

}

.triple-3 img {

}

.triple-3 p {
   font-size: 25px;
    color: #ffffff;
    position: relative;
    left: 55px;
    bottom: 60px;
}


.hs-text span {
    position: relative;
    left: 35px;
    font-size: 19px;
    font-weight: 500;
}

.hs-text p{
    font-size: 19px;
    font-weight: 500;
}


.double {
    padding-top: 50px;
    display: flex;
    gap: 50px;
    padding-bottom: 50px;
}


.ppd-c {
    padding-bottom: 100px;
}

.menu-item {
	min-width: 130px;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.menu ul li {
    position: relative;
}

.menu a {
    text-decoration: none;
    padding: 8px 12px;
    display: block;
}

.menu .dropdown {
    display: none;
    position: absolute;
    left: -61%;
    background: white;
    min-width: 280px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    top: 40px;
}

.menu .dropdown li{
	text-align: center;
}

.menu .dropdown li:hover{
	background: var(--brand-red) !important;
	color: #fff;
}

.menu .dropdown li:hover a{
	color: #fff;
}

.menu .dropdown li a {
    padding: 8px 12px;
    white-space: nowrap;
}

.menu li:hover > .dropdown {
    display: block;
}

@media (min-width: 1325px) and (max-width: 1388px) {

    .clinic-banner-home-all .banner-title {
        right: 0;
    }

    .nav-bar-header .lang {
        left: 200px;
    }

    .nav-bar-header {
        --topbar-h: 39px;
        --container-max: 750px;
    }

    .about-us-group-2 .au2-content {
        position: relative;
        right: 280px;
    }

    .about-us-group-2 .au2-img {
        object-fit: none;
    }

    .about-us-group-2 .au2-hero {
        height: 420px;
    }

    .mission-hero {
         height: 420px;
    }

    .about-us-group-1 {
        padding: 85px 0px 85px 0px;
    }

    .mission-content {
        right: 10%;
    }

    .about-us-group-2.nilps {
        padding: 25px 0px 25px 0px;
    }

    .intro  {
        margin-left: 70px;
    }

    .text-his-5 {
        margin-left: 70px;
    }

    .triple {
        margin-left: 70px;
    }

    .hs-text-group {
        margin-left: 70px;
    }

    .double {
        margin-left: 70px;
    }

    .hs-text {
        margin-left: 70px;
    }

    .cu-box-2 {
        left: 0;
    }

    .contact-us-group-2 {
        gap: 0;
    }

    .map {
        margin-top: 40px;
    }

    .contact-us-group-1 {
        --cu-gap: 130px;
    }

    .cu-box {
        margin-left: 130px;
    }

    .cu-address {
        margin-left: 130px;
    }

    .contact-us-group-1 {
        padding: 45px 0px 45px;
    }

    .map iframe {
        width: 680px;
        height: 425px;
    }
}

















.section-title {
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 3rem;
}

.article-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.article-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.article-image {
    position: relative;
    overflow: hidden;
    height: 500px;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.1);
}

.article-date {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
}

.article-date span:first-child {
    font-size: 1.2rem;
    display: block;
}

.article-date span:last-child {
    font-size: 0.8rem;
    color: #7f8c8d;
}

.article-content {
    padding: 2rem;
}

.article-category .badge {
    padding: 8px 15px;
    font-size: 0.75rem;
    border-radius: 20px;
}

.article-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1rem 0;
    line-height: 1.4;
}

.article-title a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-title a:hover {
    color: #3498db;
}

.article-excerpt {
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #ecf0f1;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #2c3e50;
}

.read-time {
    font-size: 0.8rem;
    color: #95a5a6;
    font-weight: 500;
}

.btn-outline-primary {
    border: 2px solid #3498db;
    color: #3498db;
    background: transparent;
    border-radius: 25px;
    padding: 8px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: #3498db;
    color: white;
    transform: translateY(-2px);
}

.pagination {
    margin-top: 3rem;
}

.page-link {
    border: none;
    color: #3498db;
    font-weight: 500;
    padding: 12px 20px;
    margin: 0 5px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.page-link:hover {
    background: #3498db;
    color: white;
    transform: translateY(-2px);
}

.page-item.active .page-link {
    background: #3498db;
    color: white;
}

@media (max-width: 768px) {
    .article-details-group {
        padding: 40px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .article-content {
        padding: 1.5rem;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .lang:hover .lang-menu {
        z-index: 50 !important;
    }

}


.article-content p {
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}







:root {
    --primary-color: #c1272d; /* แดงสด */
    --secondary-color: #fdf5e6; /* ครีม */
    --text-color: #333;
    --muted-color: #777;
}

/* Container & Typography */
.article-page {
    font-family: 'Noto Sans', sans-serif;
    color: var(--text-color);
}
.article-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.article-meta {
    font-size: 0.9rem;
    color: var(--muted-color);
}
.article-meta i {
    vertical-align: middle;
}
.article-image img {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.article-content {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

/* Buttons */
.article-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}
.btn-share, .btn-back {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}
.btn-share {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}
.btn-share:hover {
    background: var(--primary-color);
    color: #fff;
}
.btn-back {
    border: 1px solid #6c757d;
    color: #6c757d;
}
.btn-back:hover {
    background: #6c757d;
    color: #fff;
}

/* Related Articles */
.related-title {
    font-size: 1.5rem;
    font-weight: 600;
    border-left: 5px solid var(--primary-color);
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;
}
.card-related {
    background: var(--secondary-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.card-related img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.3s;
}
.card-related:hover img {
    transform: scale(1.05);
}
.card-related:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.card-related .card-body {
    padding: 1rem;
}
.card-related h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.btn-read {
    font-size: 0.85rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
}
.btn-read:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .article-title { font-size: 1.75rem; }
    .article-content { font-size: 1rem; }
    .card-related img { height: 180px; }
}










 .mobile-sidebar {
            display: none;
            position: fixed;
            top: 0;
            left: -100%;
            width: 280px;
            height: 100vh;
            background: white;
            z-index: 9999;
            transition: left 0.3s ease;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .mobile-sidebar.open {
            left: 0;
        }

        .mobile-sidebar-header {
            background: #c41e3a;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-sidebar-header h3 {
            font-size: 18px;
            margin: 0;
            font-weight: 600;
        }

        .close-sidebar {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            line-height: 1;
            padding: 0;
        }

        .mobile-sidebar-content {
            padding: 0;
        }

        .mobile-sidebar-item {
            border-bottom: 1px solid #f0f0f0;
        }

        .mobile-sidebar-item > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: 0.3s;
        }

        .mobile-sidebar-item > a:hover {
            background: #f8f9fa;
            color: #c41e3a;
        }

        .mobile-sidebar-item > a i {
            font-size: 12px;
            transition: transform 0.3s;
        }

        .mobile-sidebar-submenu {
            display: none;
            background: #f8f9fa;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .mobile-sidebar-submenu.active {
            display: block;
        }

        .mobile-sidebar-submenu li a {
            display: block;
            padding: 12px 20px 12px 40px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
        }

        .mobile-sidebar-submenu li a:hover {
            background: #e9ecef;
            color: #c41e3a;
        }

        .mobile-sidebar-cta {
            margin: 20px;
            display: block;
            text-align: center;
            background: #c41e3a;
            color: white;
            padding: 15px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
        }

        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
        }

        .sidebar-overlay.active {
            display: block;
        }

        /* Responsive */
@media (max-width: 768px) {
    .mobile-sidebar {
        display: block;
    }
    .text-his-4 p,.text-his-4 span, .text-his-5 p, .text-his-5 span{
        font-size: 18px;
    }
    .intro-text h3 {
        font-size: 30px;
    }
    .text-his-1 p {
        font-size: 18px;
    }
    .hs-text{
        font-size: 18px;
    }
    .hs-text p{
        font-size: 18px;
    }
}