#card-container {
    display: grid;
    gap: 15px; /* ระยะห่างระหว่างการ์ด */
    width: 98%; /* ให้ container กว้างเต็มหน้าจอ */
    box-sizing: border-box; /* รวม padding และ border ในการคำนวณความกว้าง */
}

/* 1 คอลัมน์สำหรับหน้าจอเล็กสุด */
@media (max-width: 269px) {
    #card-container {
        grid-template-columns: 1fr; /* 1 คอลัมน์ */
    }
}

/* 2 คอลัมน์สำหรับหน้าจอขนาดเล็ก */
@media (min-width: 270px) and (max-width: 433px) {
    #card-container {
        grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์ */
    }
}

/* 3 คอลัมน์สำหรับหน้าจอขนาดกลาง */
@media (min-width: 434px) and (max-width: 899px) {
    #card-container {
        grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ */
    }
}

/* 4 คอลัมน์สำหรับหน้าจอขนาดใหญ่ */
@media (min-width: 900px) {
    #card-container {
        grid-template-columns: repeat(4, 1fr); /* 4 คอลัมน์ */
    }
}





.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    position: relative;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 3px 15px rgba(225, 215, 215, 0.3);
}

.card img {
    width: 100%;
    height: 158px;
}

.card-name {
    text-align: left;
    margin: 0 5px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 88px;
    color: black;
}




    .card img {
	height:auto;
        min-height: 127px; /* ปรับความสูงของภาพเป็น 300px */
    }
}

.price {
    display: flex;
    justify-content: space-evenly;
	flex-direction: row;
    align-items: center;
    padding: 0 8px;
	height: 30px;
}

.old-price {
    color: black;
    font-size: 12px;
    text-decoration: line-through;
}

.new-price {
    color: red;
    font-weight: bold;
}

.discount-badge {
    position: absolute;
    top: -3px; /* ให้ป้ายล้นออกมาด้านบน */
    right: -3px; /* ให้ป้ายล้นออกมาด้านขวา */
    background-color: gold; /* พื้นหลังสีทองโปร่งแสง */
    color: red;
    padding: 3px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: rotate(-15deg); /* เอียงป้าย -15 องศา */
    z-index: 100; /* ทำให้ป้ายอยู่บนสุด */
}

.stars {
    color: gold; /* เปลี่ยนสีของดาวเป็นทอง */
    font-size: 25px; /* ขนาดของดาว */
    margin-top: 2px; /* ระยะห่างระหว่างราคากับดาว */
    text-align: center; /* จัดกลาง */
    display: flex; /* ใช้ flexbox เพื่อจัดเรียงดาว */
    justify-content: center; /* จัดกลางแนวนอน */
}
.load-more-button {
    background-color: #4CAF50; /* สีพื้นหลังเขียว */
    color: white; /* สีข้อความเป็นสีขาว */
    padding: 10px 20px; /* ขนาด padding ให้ปุ่มใหญ่ขึ้น */
    border: none; /* ไม่มีขอบ */
    border-radius: 8px; /* มุมปุ่มโค้งมน */
    font-size: 16px; /* ขนาดตัวอักษร */
    cursor: pointer; /* เมื่อเมาส์ชี้ เปลี่ยนเป็นมือ */
    text-align: center; /* จัดข้อความให้อยู่กลาง */
    display: block; /* ปุ่มแสดงเป็นบล็อก */
    margin: 20px auto; /* จัดให้ปุ่มอยู่กลางหน้าด้วย margin */
    transition: background-color 0.3s ease; /* ทำให้สีพื้นหลังเปลี่ยนอย่างนุ่มนวล */
}

/* เมื่อ hover ที่ปุ่ม */
.load-more-button:hover {
    background-color: #45a049; /* สีพื้นหลังเข้มขึ้นเมื่อเมาส์ชี้ */
}

/* เพิ่มเงาให้กับปุ่มเมื่อ hover */
.load-more-button:active {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ปุ่มเมื่อคลิก */
}



header {
    background-color: #fff; /* สีพื้นหลังของ header */
    padding: 10px; /* เพิ่ม padding ให้ header */
	
}


.search-background {
    position: fixed; /* ทำให้พื้นหลังอยู่ด้านหลัง */
    top: 0;
    left: 0;
    right: 0; /* ทำให้พื้นหลังขยายไปถึงขอบขวา */
    height: 60px; /* ปรับให้สูงตามความสูงของช่องค้นหา */
   // background-color: #b51200; /* สีพื้นหลังของช่องค้นหา */
    z-index: 500; /* ให้ต่ำกว่าช่องค้นหา */
//	border-bottom:10px solid gold ;
	//box-shadow: 0 0 8px rgba(0, 0, 0, 0.50);

}

.search-container {
    position: fixed; /* ตรึงช่องค้นหาที่ด้านบน */
    top: 0; /* ตำแหน่งที่ด้านบน */
    left: 0; /* เริ่มที่ขอบซ้าย */
    right: 0; /* ขอบขวาติดขอบจอ */
  //  background-color: #b51200; /* สีพื้นหลังของช่องค้นหา */
    display: flex;
    align-items: center; /* จัดแนวกลางแนวตั้ง */
    width: 60%; /* ความกว้างของช่องค้นหา */
    margin: 0 auto; /* จัดกลางในหน้าจอ */
    padding: 10px; /* เพิ่ม padding เพื่อความสวยงาม */
    z-index: 1000; /* ทำให้ช่องค้นหาติดอยู่เหนือส่วนอื่น */
}

#search-input {
    width: 100%; /* ทำให้ช่องค้นหามีความกว้างเต็ม */
    padding: 10px 40px 10px 20px; /* เพิ่มพื้นที่ให้ไอคอน */
    border: 1px solid #ccc;
    border-radius: 5px; /* มุมมน */
    font-size: 16px;
}

.search-icon {
    position: absolute;
    right: 15px; /* ระยะห่างจากขอบขวา */
    cursor: pointer;
    color: #999; /* สีไอคอน */
    font-size: 20px; /* ขนาดไอคอน */
    height: 100%; /* ให้สูงเท่ากับช่องค้นหา */
    display: flex; /* จัดให้ไอคอนอยู่กลาง */
    align-items: center; /* จัดกลางแนวตั้ง */
}

.search-result-message {
 display: none; /* ซ่อนข้อความเมื่อยังไม่มีการค้นหา */
    margin: 30px; /* ระยะห่างของข้อความแสดงจำนวนสินค้า */
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 70px; /* ปรับค่าตามความสูงของช่องค้นหา */
}

/* เพิ่มพื้นที่ด้านบนให้เนื้อหาเพื่อไม่ให้ทับกับช่องค้นหา */
.content {
    margin-top: 100px; /* ปรับค่าให้เหมาะสมกับความสูงของช่องค้นหา */
}

.back-button { display: none;
    background-color: rgb(225, 215, 0.5); /* ใช้สีขาวเพื่อให้ตัดกับพื้นหลังสีแดง */
    border: none;
    border-radius: 10px;
    padding: 8px 6px; /* ขนาดของปุ่ม */
    margin-right: 5px; /* ช่องว่างระหว่างปุ่มและช่องค้นหา */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ไปที่ปุ่ม */
	 white-space: nowrap;
    z-index: 600; /* ทำให้ปุ่มอยู่เหนือพื้นหลัง */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ดูลอย */
    transition: background-color 0.3s, transform 0.2s; /* เพิ่มการเปลี่ยนแปลงเมื่อ hover */
}

.back-button:hover {
    background-color: gold; /* สีพื้นหลังเมื่อ hover */
    transform: scale(1.05); /* ขยายขนาดเล็กน้อยเมื่อ hover */
	font-weight: bold;
}

/* อาจเพิ่มสไตล์เพิ่มเติมเมื่อกดปุ่ม */
.back-button:active {
    transform: scale(0.95); /* ขนาดเล็กลงเมื่อกด */
}

.more-details-button {
    display: inline-block;
    margin: 0 0 10px;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
	font-size: 14px;
	font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
	width: 70%;
}

.more-details-button:hover {
    background-color: #B51200;
}