@charset "utf-8";
.content {
	float: left;
	height: auto;
	width: 100%;
}
.box-aboutus {
	float: left;
	height: auto;
	width: 100%;
	background-image: url(../images/bg-content.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 3%;
	padding-bottom: 3%;
}
.picture-profile {
	float: left;
	height: auto;
	width: 48%;
}
.picture-profile img {
	height: auto;
	width: 100%;
}

.box-aboutus-in {
	float: right;
	height: auto;
	width: 48%;
}
.title-name-01 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #008d36;
	float: left;
	height: auto;
	width: 70%;
	margin-top: 3%;
	background-image: url(../images/icon-menu-g.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size:30px;
	padding-left: 40px;
}
.title-name-02 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFFFFF;
	float: left;
	height: auto;
	width: 70%;
	margin-top: 3%;
	background-image: url(../images/icon-menu-w.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 30px;
	padding-left: 40px;
}
.name-01 {
	font-family: serithairegular;
	font-size: 2rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.name-02 {
	font-family: serithairegular;
	font-size: 3rem;
	color: #FFF;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.name-03 {
	font-family: serithairegular;
	font-size: 2rem;
	color: #FFF;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.name-04 {
	font-family: serithairegular;
	font-size: 2rem;
	color: #111;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.text-about-home {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	line-height: 140%;
	color: #666;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 4%;
}
.check {
	background-image: url(../images/icon-check.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px;
	float: left;
	height: auto;
	width: 80%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 40px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	margin-bottom: 2%;
}
.box-about-small {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 2%;
}
.about-num {
	font-family: "Noto Sans Thai";
	font-size: 1.8rem;
	color: #2e3192;
	float: left;
	height: auto;
	width: 100%;
}
.about-text {
	font-family: serithairegular;
	font-size: 1rem;
	color: #999;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.more-01 a {
	font-family: "Noto Sans Thai", sans-serif;
	font-size: 1rem;
	color: #FFFFFF;
	background-color: #008d36; /* สีหลักของคุณ */
	float: left;
	width: auto; /* ปรับ padding ให้สมดุล */
	border-radius: 10px; /* มนแบบ Pill shape จะดูทันสมัยกว่า */
	cursor: pointer;
	text-align: center;
	transition: all 0.3s ease; /* ทำให้เอฟเฟกต์ลื่นไหล */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้นุ่มนวล */
	border: none;
	display: inline-block; /* ช่วยให้การจัดการพื้นที่แม่นยำขึ้น */
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-top: 5%;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	text-decoration: none;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ไปชี้ (Hover) */
.more-01 a:hover {
    background-color: #00a841; /* สีสว่างขึ้นเล็กน้อย */
    transform: translateY(-2px); /* ปุ่มลอยขึ้นเล็กน้อย */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* เงาเข้มขึ้น */
}

/* เอฟเฟกต์ตอนกด (Active) */
.more-01 a:active {
    transform: translateY(0px); /* ปุ่มยุบลงเมื่อกด */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.box-property {
	float: left;
	height: auto;
	width: 100%;
	padding-bottom: 8%;
}
.title-property {
	display: inline-flex; /* ใช้ inline-flex เพื่อให้กล่องกว้างเท่ากับเนื้อหาด้านใน */
	align-items: center;  /* จัดให้ไอคอนกับข้อความอยู่กึ่งกลางบรรทัดเดียวกัน */
	background-color: #c4d2ee;
	border-radius: 5px;   /* เพิ่มความมนเล็กน้อย (ใส่หรือไม่ก็ได้) */
	width: auto;          /* ความกว้างจะยืดตามข้อความ */
	float: left;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-top: 3%;
	margin-bottom: 2%;
}
.title-property-in {
	display: inline-flex; /* ใช้ inline-flex เพื่อให้กล่องกว้างเท่ากับเนื้อหาด้านใน */
	align-items: center;  /* จัดให้ไอคอนกับข้อความอยู่กึ่งกลางบรรทัดเดียวกัน */
	background-color: #c4d2ee;
	border-radius: 5px;   /* เพิ่มความมนเล็กน้อย (ใส่หรือไม่ก็ได้) */
	width: auto;          /* ความกว้างจะยืดตามข้อความ */
	float: left;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-top: 1%;
	margin-bottom: 1%;
}
.icon-property {
    flex-shrink: 0;       /* ป้องกันไม่ให้ไอคอนโดนบีบจนเบี้ยว */
    width: 25px;          /* กำหนดขนาดไอคอนที่แน่นอน */
    height: 25px;
    margin-right: 8px;    /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

.icon-property img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* ให้รูปไอคอนปรับขนาดพอดีในกรอบ */
    display: block;
}

.name-property {
    font-family: "serithairegular", sans-serif;
    font-size: 1rem;
    color: #2e3192;
    white-space: nowrap;  /* ป้องกันไม่ให้ข้อความขึ้นบรรทัดใหม่ */
    line-height: 1;       /* ปรับระยะบรรทัดให้พอดีกับไอคอน */
}
.box-property-main {
	float: left;
	height: auto;
	width: 100%;
		position: relative;
	z-index: 888;
}
.box-property-list {
		background-color: #FFF;
	border-radius: 15px;
	float: left;
	height: auto;
	width: 80%;
	padding: 5%;
	margin-left: 5%;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #d7d7d7;
	transition: box-shadow 0.5s ease;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.10);
	margin-bottom: 8%;

}
.box-property-all {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
}

.box-property-list-in {
	background-color: #FFF;
	border-radius: 15px;
	float: left;
	height: auto;
	width: 29%;
	padding: 2%;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #d7d7d7;
	transition: box-shadow 0.5s ease;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.10);
	margin-top: 1%;
	margin-right: 2%;
	margin-bottom: 1%;
	margin-left: 2%;
}
.picture-property {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	padding-bottom: 5px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #2e3192;
}
.picture-property img {
	height: auto;
	width: 100%;
}
.box-location {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	padding-bottom: 2%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.location {
	background-image: url(../images/icon-detail-01.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15px;
	float: left;
	height: auto;
	width: 80%;
	padding-left: 30px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #666;
}

.box-type {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	padding-bottom: 2%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.box-type-2 {
	float: left;
	height: auto;
	width: 50%;
	padding-bottom: 1%;
	clear: both;
}
.type-01 {
	background-image: url(../images/icon-detail-02.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15px;
	float: left;
	height: auto;
	width: 80%;
	padding-left: 30px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #666;
	margin-bottom: 2%;
}.type-02 {
	background-image: url(../images/icon-detail-03.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15px;
	float: left;
	height: auto;
	width: 80%;
	padding-left: 30px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #666;
	margin-bottom: 2%;
}
.box-price {
	float: left;
	height: auto;
	width: 100%;
	padding-bottom: 2%;
}
.box-price-in {
	float: left;
	height: auto;
	width: 20%;
	margin-top: 1.5%;
	margin-left: 5%;
}
.title-price {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	background-color: #F00;
	float: left;
	height: auto;
	width: auto;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-radius:10px;
}

.num-price {
	text-align: right;
	float: left;
	height: auto;
	width: 50%;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #F00;
	margin-top: 5px;
}

.price-last {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #666;
	float: right;
	height: auto;
	width: 20%;
	margin-top: 5px;
}
.more-02 a {
	display: inline-block;    /* ทำให้ div มีพฤติกรรมเหมือนปุ่ม */
	font-family: "Noto Sans Thai", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #ffffff;           /* สีตัวอักษรขาว */
	background-color: #008D36;       /* ระยะห่างภายในให้ดูเป็นแผ่นปุ่ม */
	border-radius: 10px;      /* ขอบมนแบบ Pill Shape ทันสมัย */
	cursor: pointer;          /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ */
	text-align: center;
	transition: all 0.3s ease; /* ทำให้เอฟเฟกต์การเปลี่ยนสีนุ่มนวล */
	border: none;
	box-shadow: 0 4px 6px rgba(46, 49, 146, 0.2); /* เพิ่มเงาสีน้ำเงินจางๆ */
	user-select: none;        /* ป้องกันการคลุมดำตัวหนังสือเมื่อกดรัวๆ */
	height: auto;
	width: 10%;
	padding-top: 12px;
	padding-bottom: 12px;
	float: left;
	margin-left: 45%;
	margin-right: 45%;
	text-decoration: none;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ไปชี้ (Hover) */
.more-02 a:hover {
	background-color: #00531F; /* เปลี่ยนสีให้สว่างขึ้นเล็กน้อย */
	transform: translateY(-2px); /* ปุ่มลอยขึ้นเล็กน้อย */
	box-shadow: 0 6px 12px rgba(46, 49, 146, 0.3); /* เงาเข้มขึ้นตามการลอย */
}

/* เอฟเฟกต์ตอนกด (Active) */
.more-02 a:active {
    transform: translateY(0);   /* ปุ่มยุบลงเมื่อกดจริง */
    box-shadow: 0 2px 4px rgba(46, 49, 146, 0.2);
    filter: brightness(0.9);    /* ทำให้ปุ่มมืดลงเล็กน้อยตอนกด */
}
/* คอนเทนเนอร์หลักให้สูงเต็มหน้าจอ */
.box-promote {
	position: relative;
	width: 100%;
	height: 100vh; /* ความสูงเต็มหน้าจอ (Viewport Height) */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center; /* จัดกึ่งกลางแนวตั้ง */
	align-items: center;    /* จัดกึ่งกลางแนวนอน */
	text-align: center;
	margin-top: 5%;
}
.box-promote-m {
	display: none;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
}
/* จัดการรูปภาพพื้นหลัง */
.picture-promote {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* ให้รูปอยู่ด้านหลังข้อความ */
}

.picture-promote img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ให้รูปครอบคลุมเต็มพื้นที่โดยไม่เสียสัดส่วน */
    filter: brightness(0.7); /* ลดความสว่างรูปลงเล็กน้อยเพื่อให้ข้อความอ่านง่ายขึ้น */
}

.text-promote {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    margin-bottom: 25px;
    padding: 0 20px;
    
    /* --- อนิเมชั่นตอนเริ่ม (Fade In) --- */
    /* และเพิ่มอนิเมชั่นขยับตลอดเวลา (Floating) --- */
    animation: 
        fadeInUp 1.2s ease-out forwards, 
        floating 3s ease-in-out 1.2s infinite; 
    
    opacity: 0;
    will-change: transform; /* ช่วยให้การเคลื่อนไหวนุ่มนวลขึ้น */
}

/* 1. อนิเมชั่นตอนโผล่ขึ้นมาครั้งแรก */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. อนิเมชั่นลอยขึ้น-ลง ตลอดเวลา (Floating) */
@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px); /* ลอยขึ้นเบาๆ 10px */
    }
    100% {
        transform: translateY(0px);
    }
}
/* จัดการปุ่มโทรออก */
.tel-promote a {
    display: inline-block;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    background-color: #008d36; /* สีเขียวเดิมที่คุณใช้ */
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	animation: pulse 2.5s infinite;
}
@keyframes pulse {
    0% {
        box-shadow: 0 4px 15px rgba(0, 141, 54, 0.2);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0, 141, 54, 0.5);
        transform: scale(1.02); /* ขยายปุ่มเล็กน้อยตามจังหวะ */
    }
    100% {
        box-shadow: 0 4px 15px rgba(0, 141, 54, 0.2);
    }
}

.tel-promote a:hover {
    background-color: #00a841;
    transform: scale(1.05); /* ปุ่มขยายใหญ่ขึ้นเล็กน้อยเมื่อชี้ */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.box-aboutus-main {
	background-color: #66CC00;
	float: left;
	height: auto;
	width: 100%;
	padding-bottom: 3%;
}
.box-all {
	background-color: #FFFFFF;
	float: left;
	height: auto;
	width: 100%;
	padding-bottom: 3%;
}

.picture-aboutus {
	float: left;
	height: auto;
	width: 48%;
}
.picture-aboutus img {
	height: auto;
	width: 100%;
}
.text-aboutus-detail {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	line-height: 130%;
	color: #000;
	float: right;
	height: auto;
	width: 50%;
}
.box-step {
	background-image: url(../images/bg-why.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 3%;
	padding-bottom: 5%;
}
.box-step-list {
	background-color: #008d36;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	border-radius: 10px;
}
.num-step {
	font-family: "Noto Sans Thai";
	font-size: 1.2rem;
	color: #FFF;
	float: left;
	height: auto;
	width: 1%;
	margin-right: 3%;
	margin-left: 5%;
}
.text-step {
	font-family: "Noto Sans Thai";
	font-size: 1.2rem;
	color: #FFF;
	float: left;
	height: auto;
	width: 80%;
}
.box-manager {
	float: left;
	height: auto;
	width: 100%;
	background-color: #ebebeb;
	padding-top: 3%;
	padding-bottom: 5%;
}
.box-manager-list-main {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;

}

.box-manager-list {
	background-color: #2e3192;
	border-radius: 15px;
	float: left;
	height: auto;
	width: 80%;
	padding: 5%;
	margin-left: 5%;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #d7d7d7;
	transition: box-shadow 0.5s ease;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.10);
	margin-bottom: 8%;
}
.picture-manager {
	float: left;
	height: auto;
	width: 100%;
}
.picture-manager img {
	height: auto;
	width: 100%;
}
.name-manager {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.position-manager {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
}
.box-pagination {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
}

/* Pagination links */
.pagination a {
	color: black;
	text-decoration: none;
	transition: background-color .3s;
	font-family: serithairegular;
	font-size: 1rem;
	margin-right: auto;
	margin-left: auto;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 16px;
}

/* Style the active/current link */
.pagination a.active {
	background-color: #008d36;
	color: #FFF;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}
.property-detail {
	float: left;
	height: auto;
	width: 100%;
	padding-top: 1%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	margin-bottom: 1%;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #666;
	line-height: 130%;
}
.box-gallery {
	float: left;
	height: auto;
	width: 100%;
}
.picture-map {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.picture-map img {
	height: auto;
	width: 100%;
}
.box-contact-01 {
	background-color: #2e3192;
	float: left;
	height: auto;
	width: 50%;
}
.box-contact-02 {
	background-color: #FFFFFF;
	float: left;
	height: auto;
	width: 50%;
}
.box-contact-in {
	float: left;
	width: 50%;
	margin-top: 3%;
	margin-bottom: 3%;
	margin-left: 20%;
	height: auto;
}
.contact-list {
	display: flex;          /* จัดให้ไอคอนและข้อความเรียงต่อกันในแนวนอน */
	align-items: center;    /* สำคัญ: จัดให้ทุกอย่างอยู่กึ่งกลางแนวตั้ง (Vertical Center) */
	gap: 12px;              /* กำหนดระยะห่างระหว่างไอคอนกับข้อความ */
	margin-bottom: 15px;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}

.icon-contact-list {
	flex-shrink: 0;         /* ป้องกันไม่ให้ไอคอนโดนบีบจนเบี้ยว */
	width: 50px;            /* กำหนดขนาดไอคอนที่เหมาะสมกับการแสดงผล */
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-contact-list img {
    width: 100%;            /* ให้รูปภาพกว้างเต็มขนาดของกล่องครอบ */
    height: auto;
    display: block;
}

.text-contact-list {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFFFFF;
	line-height: 120%;         /* ปรับระยะบรรทัดให้พอดีเพื่อช่วยในการจัดกลาง */
	height: auto;
	width: 50%;
}
.text-contact-list a {
	color: #FFF;
	text-decoration: none;
}

.text-contact-list-02 {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #F7941D;
	line-height: 1;         /* ปรับระยะบรรทัดให้พอดีเพื่อช่วยในการจัดกลาง */
	height: auto;
	width: 50%;
}
.text-contact-list-02 a {
	color: #F7941D;
	text-decoration: none;
}


.contact-list:hover .icon-contact-list {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
.map {
	float: left;
	height: auto;
	width: 100%;
}