/* สไตล์การ์ดปักหมุด (สีหลักสีส้ม)*/ 
.pinned-card {
    position: relative; /* เพื่อวางตำแหน่งริบบิ้น */
    background: linear-gradient(135deg, #ffefba, #ffffff); /* ไล่ระดับสีพื้นหลัง */
    border: 2px solid #ffa726; /* กรอบ */
    border-radius: 12px; /* มุมโค้งที่ใหญ่ขึ้น */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    overflow: hidden; /* ซ่อนส่วนเกิน */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 
}

.pinned-card:hover {
    transform: scale(1.07); /* ขยายเพิ่มเมื่อ hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อ hover */
}


.pinned-card:before {
    content: '🏆'; /* ข้อความในริบบิ้น */
    position: absolute;
    top: 0; /* ตำแหน่งบน */
    right: 0; /* ตำแหน่งขวา */
    background: linear-gradient(135deg, #ffa726, #f1f0f0); /* ไล่ระดับสีพื้นหลังของริบบิ้น */
    color: #131313; /* สีตัวอักษร */
    padding: 8px 25px; /* เพิ่มระยะห่างภายในริบบิ้น */
    font-size: 1rem; /* ขนาดฟอนต์ */
    font-weight: bold; /* ความหนาฟอนต์ */
    border: 0.5px solid #ffa726; /* กรอบ */
    border-bottom-left-radius: 15px; /* มุมโค้งที่มุมล่างซ้าย */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงาของริบบิ้น */
}


/* โหมดมืด */
body.dark-mode .pinned-card {
    background: linear-gradient(135deg, #242322, #2c2a27); /* ไล่ระดับสีเข้มสำหรับโหมดมืด */
    border: 1px solid #ffa726; /* กรอบ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* เงาที่เข้มขึ้น */
}

body.dark-mode .pinned-card::before {
    background: linear-gradient(135deg, #3d1e17, #7a6c5d); /* ไล่ระดับสีพื้นหลังของริบบิ้น */
    color: #ffffff; /* สีตัวอักษรที่จางลง */
}


/* ไล่ระดับสีเขียว */
.pinned-card.green {
    position: relative; /* เพื่อวางตำแหน่งริบบิ้น */
    background: linear-gradient(135deg, #b5f7eb, #ffffff); /* ไล่ระดับสีพื้นหลัง */
    color: #000000; /* สีตัวอักษร */
    border: 2px solid #00B595; /* กรอบ */
    border-radius: 12px; /* มุมโค้งที่ใหญ่ขึ้น */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    overflow: hidden; /* ซ่อนส่วนเกิน */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 
}

.pinned-card.green:hover {
    transform: scale(1.07); /* ขยายเพิ่มเมื่อ hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อ hover */
}

/* ริบบิ้นที่มุมบนซ้าย */
.pinned-card.green:before {
    content: 'Recommend 🏆'; /* ข้อความในริบบิ้น */
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #00B595, #fafafa); /* ไล่ระดับสีพื้นหลังของริบบิ้น */
    color: #131313; /* สีตัวอักษร */
    padding: 8px 25px; /* เพิ่มระยะห่างภายในริบบิ้น */
    font-size: 1rem; /* ขนาดฟอนต์ใหญ่ขึ้น */
    font-weight: bold; /* ความหนาฟอนต์ */
    border: 0.5px solid #00B595; /* กรอบ */
    border-bottom-right-radius: 15px; /* มุมโค้งที่มุมล่างขวาใหญ่ขึ้น */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงาของริบบิ้น */
    z-index: 20; /* วางริบบิ้นไว้ด้านบนสุด */
}

/* ไล่ระดับสีชมพู */
.pinned-card.pink {
    position: relative; /* เพื่อวางตำแหน่งริบบิ้น */
    background: linear-gradient(135deg, #f8b6c5, #ffffff); /* ไล่ระดับสีพื้นหลัง */
    border: 2px solid #ff6f91; /* กรอบ */
    border-radius: 12px; /* มุมโค้งที่ใหญ่ขึ้น */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    overflow: hidden; /* ซ่อนส่วนเกิน */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 
}

.pinned-card.pink:hover {
    transform: scale(1.07); /* ขยายเพิ่มเมื่อ hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อ hover */
}

/* ริบบิ้นที่มุมบนซ้าย */
.pinned-card.pink:before {
    content: 'Recommend 🏆'; /* ข้อความในริบบิ้น */
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #ff6f91, #fafafa); /* ไล่ระดับสีพื้นหลังของริบบิ้น */
    color: #131313; /* สีตัวอักษร */
    padding: 8px 25px; /* เพิ่มระยะห่างภายในริบบิ้น */
    font-size: 1rem; /* ขนาดฟอนต์ใหญ่ขึ้น */
    font-weight: bold; /* ความหนาฟอนต์ */
    border: 0.5px solid #ff6f91; /* กรอบ */
    border-bottom-right-radius: 15px; /* มุมโค้งที่มุมล่างขวาใหญ่ขึ้น */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงาของริบบิ้น */
    z-index: 20; /* วางริบบิ้นไว้ด้านบนสุด */
}

/* ไล่ระดับสีเหลือง */
.pinned-card.yellow {
    position: relative; /* เพื่อวางตำแหน่งริบบิ้น */
    background: linear-gradient(135deg, #e7e2a4, #ffffff); /* ไล่ระดับสีพื้นหลัง */
    border: 2px solid #afa220; /* กรอบ */
    border-radius: 12px; /* มุมโค้งที่ใหญ่ขึ้น */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    overflow: hidden; /* ซ่อนส่วนเกิน */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 
}

.pinned-card.yellow:hover {
    transform: scale(1.07); /* ขยายเพิ่มเมื่อ hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อ hover */
}

/* ริบบิ้นที่มุมบนซ้าย */
.pinned-card.yellow:before {
    content: 'Recommend 🏆'; /* ข้อความในริบบิ้น */
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #afa220, #fafafa); /* ไล่ระดับสีพื้นหลังของริบบิ้น */
    color: #131313; /* สีตัวอักษร */
    padding: 8px 25px; /* เพิ่มระยะห่างภายในริบบิ้น */
    font-size: 1rem; /* ขนาดฟอนต์ใหญ่ขึ้น */
    font-weight: bold; /* ความหนาฟอนต์ */
    border: 0.5px solid #afa220; /* กรอบ */
    border-bottom-right-radius: 15px; /* มุมโค้งที่มุมล่างขวาใหญ่ขึ้น */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงาของริบบิ้น */
    z-index: 20; /* วางริบบิ้นไว้ด้านบนสุด */
}