@charset "utf-8";
/* CSS Document */



		.buddy_p2-card {
			width: 370px;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* กำหนดความเข้มความสว่างของสีเลืองแสง */
			font-family: Arial, sans-serif;
			margin-top: 2%;       /* ระยะห่างด้านบน */
			/*margin-bottom: 2%;    /* ระยะห่างด้านล่าง */
			/*margin-left: 2%;      /* ระยะห่างด้านซ้าย */
			margin-right: 1%;     /* ระยะห่างด้านขวา */
			transition: transform 0.3s ease, box-shadow 0.3s ease; /* เพิ่ม transition */
		}

		/* เพิ่มส่วนเมื่อนำเมาส์ชี้ */
		.buddy_p2-card:hover {
			transform: scale(1.05); /* ขยายขนาดขึ้น 5% เมื่อ hover */
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อ hover */
		}

		.buddy_p2-card-center{
		  		  justify-content: center; /* จัดให้อยู่กลางในแนวนอน */
		}

		.buddy_p2-cover-image {
			width: 100%;
			height: 66px;
			object-fit: cover;
		}

		.buddy_p2-content-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
		}

		.buddy_p2-profile-section {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.buddy_p2-profile-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		.buddy_p2-text-section {
			flex: 1;
		}

		.buddy_p2-main-text {
			font-family: "Kanit", serif;
			font-weight: 500;
			font-style: normal;
			font-size: 1em;
			text-align: left;
			margin: 0;
		}

		.buddy_p2-sub-text {
			font-family: "Kanit", serif;
			font-size: 0.8em;
			color: #000000;
			margin: 0;
			display: inline-block;
			max-width: 200px; /* กำหนดความกว้างสูงสุด */
			white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
			overflow: hidden; /* ซ่อนส่วนที่เกินขอบเขต */
			text-overflow: ellipsis; /* เพิ่ม ... ถ้าข้อความเกิน */
			mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* ค่อย ๆ จางหายไปทางขวา */
			-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* สำหรับเบราว์เซอร์ WebKit */
		}

		/* แสดงข้อความเต็มเมื่อมีการ hover */
		.buddy_p2-sub-text:hover {
			mask-image: none; /* เอา mask-image ออกเมื่อ hover */
			-webkit-mask-image: none;
		}

		.buddy_p2-view-button {
			background-color: #6a49f2;
			color: white;
			border: none;
			padding: 5px 15px;
			border-radius: 5px;
			cursor: pointer;
			font-size: 0.9em;
			text-decoration: none; /* ลบเส้นใต้ */
		}

		.buddy_p2-options {
			position: relative;
		}

		.buddy_p2-options-button {
			background: none;
			border: none;
			font-size: 1.5em;
			cursor: pointer;
		}

		.buddy_p2-dropdown-menu {
			display: none;
			position: absolute;
			right: 0;
			top: 30px;
			background-color: white;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
			overflow: hidden;
			z-index: 1;
		}

		.buddy_p2-dropdown-menu a {
			display: block;
			padding: 10px;
			text-decoration: none;
			color: black;
			font-size: 0.9em;
		}

		.buddy_p2-dropdown-menu a:hover {
			background-color: #f0f0f0;
		}
		/* Container สำหรับ search box */
		.buddy_p3-search-container {
			display: flex;
			align-items: center;
			border: 2px solid #6a49f2;
			border-radius: 25px;
			padding: 5px;
			width: 450px; /* กำหนดความกว้างเป็น 450px */
			margin-top: 50px;       /* ระยะห่างด้านบน */
			margin-bottom: 2%;    /* ระยะห่างด้านล่าง */
			/*margin-left: 2%;      /* ระยะห่างด้านซ้าย */
			margin-right: 1%;     /* ระยะห่างด้านขวา */
			background-color: #f7f7f7;
			margin: 100 auto; /* จัดให้อยู่ตรงกลาง */
		}

		/* ช่อง input สำหรับค้นหา */
		.buddy_p3-search-input {
			border: none;
			outline: none;
			flex: 1;
			padding: 8px 12px;
			font-size: 16px;
			border-radius: 25px 0 0 25px;
			background-color: transparent;
			color: #888;
		}

		/* ปุ่ม search */
		.buddy_p3-search-button {
			background-color: #6a49f2;
			border: none;
			border-radius: 0 25px 25px 0;
			padding: 8px 15px;
			cursor: pointer;
		}

		.buddy_p3-search-button i {
			font-size: 16px;
			color: white;
		}


/*                   แสดงแนะนำร้านค้า แนะนำร้านทำแมพ แนะนำร้านขายสคริปต์                        */



.app-row {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;  /* กำหนดให้ใช้พื้นที่เต็ม */
    padding: 0 10px; /* ลดพื้นที่ขอบเพื่อให้เนื้อหาดูเต็มขึ้น */
}

.app-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll; /* เปิดการเลื่อนแนวนอน */
    scroll-behavior: smooth;
    gap: 10px;
    width: 100%; /* ใช้พื้นที่ทั้งหมดที่มี */
}

/* ซ่อน Scrollbar สำหรับเบราว์เซอร์ที่รองรับ Webkit เช่น Chrome และ Safari */
.app-container::-webkit-scrollbar {
    display: none;
}

/* ซ่อน Scrollbar ใน Firefox */
.app-container {
    scrollbar-width: none; /* ซ่อนสกอบาร์ใน Firefox */
}

/* ซ่อน Scrollbar สำหรับ Internet Explorer และ Edge */
.app-container {
    -ms-overflow-style: none; /* ซ่อนสกอบาร์ใน IE และ Edge */
}


.app-card {
    flex: 0 0 auto; /* ป้องกันการยืดหรือหดของการ์ด */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px;
    padding: 10px;
    border-radius: 15px;
    background-color: #ffffff; /* กำหนดสีพื้นหลังเพื่อให้เด่น */
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.app-card:hover {
    background-color: #e4ddff; /* เมื่อชี้ */
    opacity: 0.9; /* ลดความเข้มเล็กน้อยเพื่อสร้างเอฟเฟกต์ */
}

.app-card img {
    width: 125px;
    height: 125px;
    margin-bottom: 8px;
	border-radius: 30px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0);
}
.app-card a {
    color: #000; /* ตั้งค่าสีของข้อความเป็นสีดำ */
    text-decoration: none; /* ลบเส้นใต้ */
    font-weight: bold; /* ทำให้ข้อความดูโดดเด่นขึ้น (ไม่จำเป็น แต่ช่วยให้อ่านง่ายขึ้น) */
}

.app-card a:hover {
    text-decoration: none; /* ลบเส้นใต้ */
    color: #000; /* เปลี่ยนสีให้เข้มขึ้นเมื่อชี้ */
	font-weight: bold; /* ทำให้ข้อความดูโดดเด่นขึ้น (ไม่จำเป็น แต่ช่วยให้อ่านง่ายขึ้น) */
}

.scroll-btn {
    opacity: 0; /* เริ่มต้นที่โปร่งใส */
    display: none; /* ซ่อนปุ่มโดยค่าเริ่มต้น */
    background-color: #ffffff;
    border: 0px solid #000; /* เพิ่มเส้นขอบเพื่อให้เห็นชัดเจน */
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 50%; /* ตั้งค่าที่กึ่งกลางของคอนเทนเนอร์ในแนวตั้ง */
    transform: translateY(-50%); /* เลื่อนปุ่มให้อยู่กึ่งกลางในแนวตั้ง */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease; /* เพิ่ม transition สำหรับการเปลี่ยนแปลงความทึบ */
}

.scroll-btn:hover {
    background-color: #f5f5f5; /* เมื่อชี้ */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.scroll-btn:active {
    background-color: #c6c6c6; /* เมื่อคลิก */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.left-btn-1 {
    left: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดซ้าย */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}
.left-btn-2 {
    left: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดซ้าย */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}
.left-btn-3 {
    left: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดซ้าย */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}

.right-btn-1 {
    right: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดขวา */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}
.right-btn-2 {
    right: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดขวา */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}
.right-btn-3 {
    right: 10px; /* ตั้งค่าปุ่มให้อยู่ชิดขวา */
    z-index: 10; /* ป้องกันไม่ให้ปุ่มทับกัน */
}

/* Media Query สำหรับหน้าจอที่มีขนาดต่ำกว่า 600px */
@media (max-width: 600px) {
    .scroll-btn {
        top: 50%; /* ตั้งค่าที่กึ่งกลางของคอนเทนเนอร์ */
        transform: translateY(-50%); /* เลื่อนปุ่มให้อยู่กึ่งกลางในแนวตั้ง */
        width: 60px; /* ปรับขนาดปุ่มให้เล็กลง */
        height: 60px;
    }

    .left-btn-1 {
        left: 5px; /* ตั้งค่าปุ่มซ้ายให้เข้ามาใกล้ขอบมากขึ้น */
    }
	
	.left-btn-2 {
        left: -10px; /* ตั้งค่าปุ่มซ้ายให้เข้ามาใกล้ขอบมากขึ้น */
    }
	.left-btn-3 {
        left: -10px; /* ตั้งค่าปุ่มซ้ายให้เข้ามาใกล้ขอบมากขึ้น */
    }

    .right-btn-1 {
        right: 5px; /* ตั้งค่าปุ่มขวาให้เข้ามาใกล้ขอบมากขึ้น */
    }
	.right-btn-2 {
        right: -20px; /* ตั้งค่าปุ่มขวาให้เข้ามาใกล้ขอบมากขึ้น */
    }
	.right-btn-3 {
        right: -20px; /* ตั้งค่าปุ่มขวาให้เข้ามาใกล้ขอบมากขึ้น */
    }
}