/* บังคับตำแหน่งให้ลอยทับก้อนสีขาว */
#breadcrumb {
    margin-top: 40px !important;
    z-index: 9999 !important;
    width: auto !important;  /* ไม่ให้มันขยายเต็มจอ */
    padding: 0 !important;
    background: none !important;
}

/* ตั้งค่าฟอนต์ Mali และขนาด */
.breadcrumb {
    background-color: transparent !important; /* เอาสีพื้นหลังเทาของ Bootstrap ออก */
    font-family: 'Mali', cursive !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.breadcrumb-item, 
.breadcrumb-item a {
    font-size: 15px !important; /* ขนาดใหญ่ใกล้เคียงก้อนขาว */
    font-weight: 700 !important;
    color: #0fb7eb !important;  /* เปลี่ยนสีตามชอบ (ตอนนี้ใส่ชมพูเข้ม) */
    text-decoration: none !important;
}

/* ปรับเครื่องหมาย >> */
.breadcrumb-item + .breadcrumb-item::before {
    content: "»" !important;
    font-size: 15px !important;
    color: #ff8da1 !important;
    padding: 0 10px !important;
}
/* =========================================================
   แก้ไข Breadcrumb มือถือ: แถวเดียว ตัดคำยาวใส่ ...
========================================================= */
@media (max-width: 768px) {
    .breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important; /* บังคับให้อยู่บรรทัดเดียว */
        overflow: hidden !important;  /* ปิดการเลื่อนซ้ายขวา */
        align-items: center;
        padding-bottom: 0 !important;
        font-size: 14px !important;
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    /* สั่งให้ตัวหนังสือตัดคำและใส่ ... ถ้ายาวเกินไป */
    .breadcrumb-item a, 
    .breadcrumb-item.active { /* ครอบคลุมทั้งตัวที่เป็นลิงก์และตัวข้อความธรรมดา */
        display: inline-block;
        max-width: 130px; /* 👈 จำกัดความกว้าง (ถ้าจอมือถือเล็กมากแล้วมันยังล้น ให้ลดเลขนี้ลง เช่น 100px) */
        overflow: hidden;
        text-overflow: ellipsis; /* พระเอกของเรา: ตัวใส่ ... */
        white-space: nowrap;
        vertical-align: bottom;
    }
}