/* --- แบบที่ 4: เชื่อมโยงด้วยภาพพื้นหลัง --- */
body {
    font-family: 'Kanit', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;

    /* --- ส่วนของพื้นหลัง --- */
    /* ใส่ URL รูปภาพที่ต้องการ */
    background-image: 
        /* นี่คือ Overlay สีขาวโปร่งแสง */
        linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.9)),
        /* นี่คือ URL ของรูปภาพ */
        url('pic.jpg');
    
    background-size: cover; /* ทำให้ภาพเต็มจอ */
    background-position: center center; /* จัดภาพให้อยู่กลาง */
    background-attachment: fixed; /* ตรึงภาพพื้นหลังไว้ */
}

/* ... คัดลอกสไตล์ของ .card-link, .card-custom, .card-eq, .card-sdq, .display-5, .lead จากแบบที่ 2 มาวางต่อที่นี่ได้เลย ... */
/* หมายเหตุ: เพื่อความกระชับจึงไม่ได้ใส่ซ้ำ แต่ต้องมีสไตล์ของการ์ดและข้อความเหมือนเดิม */
.card-link{text-decoration:none;color:inherit}.card-custom{border:none;border-radius:10px;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;background-color:#fff}.card-custom:hover{transform:translateY(-5px);box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.card-eq{border-top:5px solid #dc3545}.card-eq .icon-wrapper i{color:#dc3545}.card-eq .card-title{color:#212529}.card-eq .card-text{color:#6c757d}.card-sdq{border-top:5px solid #198754}.card-sdq .icon-wrapper i{color:#198754}.card-sdq .card-title{color:#212529}.card-sdq .card-text{color:#6c757d}.display-5{color:#212529}.lead{color:#495057}