/* สร้าง Class สำหรับการ์ดโปร่งแสง */
.glass-info-card-footer-md {
    /* ความใส ตัวสุดท้าย ปรับยิ่งน้อย ยิ่งใส */
    background-color: rgba(34, 32, 50, 0.5) !important;
    /* ปรับความเบลอเป็น ยิ่งมากยิ่งเบลอ */
    backdrop-filter: blur(3px) !important;
    /* ปรับความเบลอเป็น ยิ่งมากยิ่งเบลอ */
    -webkit-backdrop-filter: blur(3px) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* เพิ่มขอบจางๆ ให้ดูมีมิติ */
}

/* แถม: บังคับให้ตัวหนังสือข้างในเป็นสีขาวทั้งหมด */
.glass-info-card h4,
.glass-info-card h5,
.glass-info-card h6,
.glass-info-card p,
.glass-info-card span {
    color: white !important;
}


.glass-info-card-footer-sm {
    /* ความใส ตัวสุดท้าย ปรับยิ่งน้อย ยิ่งใส */
    background-color: rgba(34, 32, 50, 0.5) !important;
    /* ปรับความเบลอเป็น ยิ่งมากยิ่งเบลอ */
    backdrop-filter: blur(3px) !important;
    /* ปรับความเบลอเป็น ยิ่งมากยิ่งเบลอ */
    -webkit-backdrop-filter: blur(3px) !important;
    padding: 10px !important;
    border-radius: 12px !important;

    /* --- จุดสำคัญที่ต้องแก้เพื่อให้อยู่ตรงกลาง --- */
    position: absolute !important;
    bottom: 10px !important;
    /* เว้นระยะจากขอบล่าง 10px */
    left: 50% !important;
    /* ย้ายจุดเริ่มไปไว้ตรงกลาง */
    transform: translateX(-50%) !important;
    /* ดันกลับมาครึ่งหนึ่งของตัวเองเพื่อให้กลางเป๊ะ */

    width: calc(100% - 20px) !important;
    /* กำหนดความกว้างให้เหลือขอบข้างละ 10px */

    /* ลบ margin เดิมออกเพื่อไม่ให้มันไปบวกซ้ำจนเบี้ยว */
    margin: 0 !important;

    color: white !important;
    display: flex;
    flex-direction: column;
    z-index: 10;
}