.content{
	background: url('/wp-content/uploads/2026/04/happyage-bg-scaled.webp') center/cover no-repeat;
}

.service-detail-list{
	padding: 40px 0;
}
.service-detail-list .wp-block-columns {
	flex-wrap: wrap !important;
}

.service-detail-list .wp-block-column {
	min-width: 100px;
}

.service-detail-list .wp-block-column .wp-block-image {
	padding: 40px 0 20px;
}

.service-detail-list .wp-block-column p {
	font-size: 14px;
	font-weight: bold;
}

.section-about-happy-age{
	padding: 80px 10px 150px 10px;
	background-image: url('/wp-content/uploads/2026/04/happyage-about-bg.webp');
	background-size: cover;       /* ให้ภาพเต็ม container */
	background-position: center;  /* จัดตรงกลาง */
	background-repeat: no-repeat;
	
	position: relative;
	
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='m'%3E%3Crect width='1000' height='500' fill='white'/%3E%3Cg filter='url(%23blur)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3Cg transform='translate(0 500) scale(1 -1)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Crect width='1000' height='500' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='m'%3E%3Crect width='1000' height='500' fill='white'/%3E%3Cg filter='url(%23blur)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3Cg transform='translate(0 500) scale(1 -1)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Crect width='1000' height='500' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
            
            /* ตั้งค่าให้ Mask ยืดเต็มพื้นที่ (Fill) */
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.section-about-happy-age::before, .section-about-happy-age::after{
	content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 65px;
    background-image: 
		linear-gradient(to top, 
			rgba(255, 255, 255, 1) 0%, 
			rgba(255, 255, 255, .9) 20%, 
			rgba(255, 255, 255, 0) 100%), 
		url(/wp-content/themes/njtenjoytravel/assets/images/cloud.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

.section-about-happy-age::before{
	 top: 0;
	 transform: scaleY(-1);
}

.section-about-happy-age::after{
	bottom: 0;
	height: 100px;
}

.about-happy-age-content{
	margin: auto;
    max-width:700px;
}

.about-happy-age-content > .wp-block-group-is-layout-constrained{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.about-happy-age-card{
	width: 96%;
	max-width: 450px;
    background:#fff;
    padding:20px 80px 20px 40px;
    border-radius:20px;
	
    box-shadow: 
		/*outer shadow*/
		0 5px 10px rgba(0, 0, 0, .35),
		
		/*inner shadow ขอบขวาสว่าง*/
		 inset -3px 0 5px rgba(255, 255, 255, 0.7),
  
		  /*inner shadow*/
		  inset 3px -3px 3px rgba(0, 0, 0, 0.3)
}

.about-happy-age-card p:first-of-type{
	margin: 20px 0;
}

.about-happy-age-card p:nth-of-type(2){
	font-size: 14px;
}

.about-happy-age-card .wp-block-button{
	margin: 20px 0;
	padding: 10px 20px;
}

.about-happy-age-mascot{
	margin-left: -100px;
    margin-bottom: -150px;
    transform: translateY(50px);
    display: flex;
    align-items: flex-end;
}

.about-happy-age-mascot img{
	max-width: 350px;
}


.service-benefit{
	padding: 40px 0;
}

.service-benefit .text-title{
	margin-bottom: 10px;
}

.service-benefit .wp-block-columns {
	padding: 40px 0;
	flex-wrap: wrap !important;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.service-benefit .wp-block-column {
	background: #fff;
	border-radius: 15px;
	box-shadow:0 10px 30px rgba(0,0,0,0.15);
	overflow: hidden;
	
	display: flex;
    flex-direction: column;
}

.service-benefit .wp-block-column .wp-block-group {
	padding: 5px;
	font-size: 14px;
	
	display: flex;
	justify-content: center;
	flex: 1;
}

.section-ads-bottom{
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('/wp-content/uploads/2026/04/happyage-bottom-bg.webp') center/cover no-repeat;
	position: relative;
}

.ads-bottom-card{
	max-width: 640px;
	padding: 20px 28px;
	border-radius: 10px;

	/* สีพื้น 
	background: linear-gradient(180deg, #fff 95%, #efefef 100%), linear-gradient(90deg, #fff 95%, #efefef 100%);*/
	background: #fff;

	/* shadow ครบ: outer + inner */
	box-shadow: 
		/* outer shadow (ลอย) */
		10px 10px 20px rgba(0, 0, 0, 0.3),

		/* inner shadow (กดลงเบาๆ) */
		inset 3px -3px 6px rgba(0, 0, 0, 0.3)
}

.ads-bottom-card p {
	padding: 10px 0;
}

.ads-bottom-card p:first-of-type{
	font-weight: 500;
}

.ads-bottom-card .wp-block-button{
	margin: 20px 0;
	padding: 10px 20px;
}

.cloud-box{

	  overflow: hidden;
	  position: relative;

	  height: 300px;
	  background: linear-gradient(135deg, #4facfe, #00f2fe);
	
	/* การตั้งค่า Mask: เริ่มจากจาง (0%) -> ทึบ (กลางภาพ) -> จาง (100%) */
/* ปรับ SVG ให้ใช้ preserveAspectRatio='none' เพื่อให้ลายยืดตามความกว้างหน้าจอ 
               และใช้ stdDeviation เพื่อความฟุ้งของขอบเมฆ
            */
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='m'%3E%3Crect width='1000' height='500' fill='white'/%3E%3Cg filter='url(%23blur)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3Cg transform='translate(0 500) scale(1 -1)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Crect width='1000' height='500' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cmask id='m'%3E%3Crect width='1000' height='500' fill='white'/%3E%3Cg filter='url(%23blur)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3Cg transform='translate(0 500) scale(1 -1)'%3E%3Cpath d='M-50 70 C150 10 350 120 500 70 C650 20 850 120 1050 70 L1050 -50 L-50 -50 Z' fill='black'/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Crect width='1000' height='500' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
            
            
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/************ Responsive ************/
@media (max-width: 767px) {
	.section-about-happy-age{
		-webkit-mask-image: none;
		mask-image:none;
	}
	
	.about-happy-age-mascot {
		margin-left: 0;
	}
	
	.service-benefit .wp-block-column{
		flex-basis: 140px !important;
    	flex-grow: 0 !important;
	}
	.service-benefit .wp-block-column .wp-block-group{
		align-items: center;
	}
}