.search-box {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;

	background: rgba(0, 0, 0, 0.5);
	/* ดำโปร่ง */
	border-radius: 6px 0 0 6px;
	padding: 0;
	backdrop-filter: blur(3px);
	/* ทำให้โปร่งแบบในภาพ */
	box-shadow: inset 1px 1px 3px rgba(255, 251, 178, 0.5);
}

.search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: white;
	font-size: 24px;
}

.search-input::placeholder {
	color: #dcdcdc;
}

.search-btn {
	background: #ffd700;
	/* เหลือง */
	border: none;
	border-radius: 0 6px 6px 0;
	width: 50px;
	height: 50px;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

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

.bg-banner {
	/* 1. ลองเพิ่มความสูงขั้นต่ำของส่วนนี้ เพื่อให้รูป Background ที่สูงๆ ไม่ถูกตัด */
	min-height: 800px;
	/* เพิ่มความสูงขั้นต่ำเป็น 800px (สามารถปรับได้ตามต้องการ) */

	background-color: #000000;
	/* โค้ดส่วนอื่นๆ ที่เกี่ยวกับ image, repeat, size ยังเหมือนเดิม */
	background-image:
		url('<?php echo base_url("assets/images/resource/tdcgg/bg/bgn1.png"); ?>'),
		url('<?php echo base_url("assets/images/resource/tdcgg/bg/bg9.png"); ?>'),
		url('<?php echo base_url("assets/images/resource/tdcgg/bg/bg10.png"); ?>');

	/* 2. แก้ background-position เพื่อดึงรูปขวาเข้ามาในจอ 100px */
	background-position:
		center center,
		/* รูปกลาง */ left center,
		/* รูปซ้าย: ชิดซ้าย */ right -300px;
	/* รูปขวา: ดันเข้ามา 100px จากขอบจอ */

	/* 3. ลองเพิ่มขนาดรูปภาพด้านข้างทั้งสองเล็กน้อย */
	background-size:
		auto,
		500px auto,
		/* เพิ่มจาก 600px */ 300px auto;
	/* เพิ่มจาก 600px */
}

.red-skin .theme-bg,
.red-skin .property-search-type label:hover,
.red-skin .property-search-type label.active,
.red-skin li.login-attri.theme-log a,
.red-skin .range-slider .ui-slider .ui-slider-handle,
.red-skin .range-slider .ui-widget-header,
.red-skin .pricing-bottom .btn-pricing:hover,
.red-skin
	.pricing-bottom
	.btn-pricing:focus
	.red-skin
	.select2-container--default
	.select2-results__option--highlighted[aria-selected],
.red-skin .pagination li:first-child a,
.red-skin .btn.btn-theme,
.red-skin .btn.btn-theme:hover,
.red-skin .btn.btn-theme:focus,
.red-skin .btn.search-btn,
.red-skin .btn-theme-2:hover,
.red-skin .btn-theme-2:focus,
.red-skin .btn-outline-theme:hover,
.red-skin .btn-outline-theme:focus,
.red-skin .btn.search-btn,
.red-skin .simple-search-wrap .pk-input-group .pk-subscribe-submit,
.red-skin .btn.search-btn-outline:hover,
.red-skin .btn.search-btn-outline:focus,
.red-skin .property-listing.property-1 .listing-detail-btn .more-btn,
.red-skin .home-slider-desc .read-more,
.red-skin .nav-tabs .nav-item.show .nav-link,
.red-skin .nav-tabs .nav-link.active,
.red-skin .checkbox-custom:checked + .checkbox-custom-label:before,
.red-skin .radio-custom:checked + .radio-custom-label:before,
.red-skin .btn.pop-login,
.red-skin .single-widgets.widget_search form button,
.red-skin .single-widgets.widget_tags ul li a:hover,
.red-skin .single-widgets.widget_tags ul li a:focus,
.red-skin .pagination > .active > a,
.red-skin .pagination > .active > a:focus,
.red-skin .pagination > .active > a:hover,
.red-skin .pagination > .active > span,
.red-skin .pagination > .active > span:focus,
.red-skin .pagination > .active > span:hover,
.red-skin .pagination > li > a:focus,
.red-skin .pagination > li > a:hover {
	background-color: #da0b4e;
	background: #f6b400;
}

.red-skin .btn-theme-2,
.red-skin .top-header,
.red-skin .pricing-bottom .btn-pricing,
.green-skin .btn-theme-2,
.green-skin .top-header,
.green-skin .pricing-bottom .btn-pricing,
.blue-skin .btn-theme-2,
.blue-skin .top-header,
.blue-skin .pricing-bottom .btn-pricing,
.yellow-skin .btn-theme-2,
.yellow-skin .top-header,
.yellow-skin .pricing-bottom .btn-pricing,
.darkblue-skin .btn-theme-2,
.darkblue-skin .top-header,
.darkblue-skin .pricing-bottom .btn-pricing,
.oceangreen-skin .btn-theme-2,
.oceangreen-skin .top-header,
.oceangreen-skin .pricing-bottom .btn-pricing,
.purple-skin .btn-theme-2,
.purple-skin .top-header,
.purple-skin .pricing-bottom .btn-pricing,
.goodred-skin .btn-theme-2,
.goodred-skin .top-header,
.goodred-skin .pricing-bottom .btn-pricing,
.goodgreen-skin .btn-theme-2,
.goodgreen-skin .top-header,
.goodgreen-skin .pricing-bottom .btn-pricing,
.blue2-skin .btn-theme-2,
.blue2-skin .top-header,
.blue2-skin .pricing-bottom .btn-pricing {
	background: #00000029;
	border-color: #1c1c1ca6;
}

.red-skin .theme-bg,
.red-skin .property-search-type label:hover,
.red-skin .property-search-type label.active,
.red-skin li.login-attri.theme-log a,
.red-skin .range-slider .ui-slider .ui-slider-handle,
.red-skin .range-slider .ui-widget-header,
.red-skin .pricing-bottom .btn-pricing:hover,
.red-skin
	.pricing-bottom
	.btn-pricing:focus
	.red-skin
	.select2-container--default
	.select2-results__option--highlighted[aria-selected],
.red-skin .pagination li:first-child a,
.red-skin .btn.btn-theme,
.red-skin .btn.btn-theme:hover,
.red-skin .btn.btn-theme:focus,
.red-skin .btn.search-btn,
.red-skin .btn-theme-2:hover,
.red-skin .btn-theme-2:focus,
.red-skin .btn-outline-theme:hover,
.red-skin .btn-outline-theme:focus,
.red-skin .btn.search-btn,
.red-skin .simple-search-wrap .pk-input-group .pk-subscribe-submit,
.red-skin .btn.search-btn-outline:hover,
.red-skin .btn.search-btn-outline:focus,
.red-skin .property-listing.property-1 .listing-detail-btn .more-btn,
.red-skin .home-slider-desc .read-more,
.red-skin .nav-tabs .nav-item.show .nav-link,
.red-skin .nav-tabs .nav-link.active,
.red-skin .checkbox-custom:checked + .checkbox-custom-label:before,
.red-skin .radio-custom:checked + .radio-custom-label:before,
.red-skin .btn.pop-login,
.red-skin .single-widgets.widget_search form button,
.red-skin .single-widgets.widget_tags ul li a:hover,
.red-skin .single-widgets.widget_tags ul li a:focus,
.red-skin .pagination > .active > a,
.red-skin .pagination > .active > a:focus,
.red-skin .pagination > .active > a:hover,
.red-skin .pagination > .active > span,
.red-skin .pagination > .active > span:focus,
.red-skin .pagination > .active > span:hover,
.red-skin .pagination > li > a:focus,
.red-skin .pagination > li > a:hover {
	background: #000000ed;
}

.red-skin .pagination > .active > a,
.red-skin .pagination > .active > a:focus,
.red-skin .pagination > .active > a:hover,
.red-skin .pagination > .active > span,
.red-skin .pagination > .active > span:focus,
.red-skin .pagination > .active > span:hover,
.red-skin .pagination > li > a:focus,
.red-skin .pagination > li > a:hover,
.red-skin .pagination li:first-child a,
.red-skin .range-slider .ui-slider .ui-slider-handle,
.red-skin .attributes li.submit-attri.theme-log a,
.red-skin .header-dark-transparent.header-fixed .attributes li.submit-attri a,
.red-skin .btn.btn-theme,
.red-skin .btn-theme-2:hover,
.red-skin .btn-theme-2:focus,
.red-skin .btn.btn-theme:hover,
.red-skin .btn.btn-theme:focus,
.red-skin .btn-outline-theme:hover,
.red-skin .btn-outline-theme:focus,
.red-skin .btn-outline-theme,
.red-skin .simple-search-wrap .pk-input-group .pk-subscribe-submit,
.red-skin .btn.search-btn-outline,
.red-skin .btn.search-btn-outline:hover,
.red-skin .btn.search-btn-outline:focus,
.red-skin .property-listing.property-1 .listing-detail-btn .more-btn,
.red-skin .nav-tabs .nav-item.show .nav-link,
.red-skin .nav-tabs .nav-link.active,
.red-skin .btn.pop-login,
.red-skin .single-widgets.widget_tags ul li a:hover,
.red-skin .single-widgets.widget_tags ul li a:focus {
	border-color: #ffffff73;
}

.limit-3-lines {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.limit-1-lines {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bg-card {
	background: linear-gradient(180deg, #ffffff03 0%, #a3a2a208 50%);
	box-shadow:
		inset 1.62px -1.62px 0.81px 0 rgba(255, 255, 255, 0.5),
		inset -0.81px 0.81px 0.81px 0 rgba(255, 255, 255, 0.35);
}