/* 1. จัดโครงสร้างคอนเทนเนอร์ภายในให้เรียงเป็นแนวตั้ง */
.custom-card-layout .mod-articles-item-content {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 2. สั่งดีดกล่องรูปภาพขึ้นไปอยู่อันดับบนสุด */
.custom-card-layout .article-intro-image {
    order: 1 !important;
    margin-bottom: 15px !important;
}

/* 3. เอาชื่อบทความมาไว้อันดับที่สอง (ใต้ภาพ) */
.custom-card-layout .mod-articles-title {
    order: 2 !important;
    margin-bottom: 8px !important;
}

/* 4. เอาปุ่ม Read more ไว้ท้ายสุด */
.custom-card-layout .readmore {
    order: 3 !important;
}

/* 5. เทคนิคพิเศษ: สั่งขยายพื้นที่ลิงก์ของชื่อบทความให้วิ่งขึ้นไปคลุมพื้นที่รูปภาพด้านบน เพื่อให้ภาพคลิกได้ */
.custom-card-layout .mod-articles-title a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 220px !important; /* ปรับเพิ่ม/ลด px ตามความสูงของภาพจริงหน้าบ้านได้ครับ */
    z-index: 2 !important;
}

/* 6. ล้างค่าโครงสร้างลิสต์ และซ่อนสัญลักษณ์หัวข้อ (Marker) ออกไปทั้งหมด */
.custom-card-layout ul.mod-articles-items.mod-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.custom-card-layout ul.mod-articles-items.mod-list li,
.custom-card-layout ul.mod-articles-items.mod-list li::marker {
    list-style: none !important;
    list-style-type: none !important;
    content: none !important;
    display: block !important; /* เปลี่ยนจาก list-item เป็น block เพื่อทำลายสถานะการมี marker */
}