body, html {
    font-family: Arial, sans-serif;
    color: #fff;
}

/* ///////////////////////////////////////////////////////////////////////////// */

/* กำหนดคลาสฟอนต์ */
.font-primary {
    font-family: 'Roboto', sans-serif; /* ฟอนต์หลัก */
    font-size: 16px; /* ขนาดตัวอักษร */
    line-height: 1.6; /* ระยะห่างระหว่างบรรทัด */
    font-weight: 400; /* ความหนาของฟอนต์ */
    color: #333; /* สีตัวอักษร */
}

/* คลาสสำหรับฟอนต์ Sofia */
.font-sofia {
    font-family: 'Sofia', cursive;
    font-size: 96px; /* กำหนดขนาดตัวอักษร */
    line-height: 0.4; /* ระยะห่างระหว่างบรรทัด */
    font-weight: 400; /* ความหนาของตัวอักษร */
}

/* คลาสสำหรับฟอนต์ Sofia Sans */
.font-Solitreo {
    font-family: 'Solitreo', cursive;
    font-size: 40px; /* กำหนดขนาดตัวอักษร */
    line-height: 1.0; /* ระยะห่างระหว่างบรรทัด */
    font-weight: 400; /* ความหนาของตัวอักษร */
}

.font-Solitreo-small {
    font-family: 'Solitreo', cursive;
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
    line-height: 1.0; /* ระยะห่างระหว่างบรรทัด */
    font-weight: 400; /* ความหนาของตัวอักษร */
    text-align: center;
}

/* คลาสพื้นฐานสำหรับ <p> */
.p-dark {
    font-family: Arial, sans-serif; /* กำหนดฟอนต์ */
    font-size: 18px; /* ขนาดตัวอักษร */
    color: #333; /* สีข้อความ */
    line-height: 1.5; /* ระยะห่างระหว่างบรรทัด */
    text-align: justify; /* จัดข้อความชิดขอบทั้งสองด้าน */
    margin: 20px auto; /* ระยะห่างด้านบน-ล่าง และจัดตรงกลาง */
    max-width: 800px; /* จำกัดความกว้างของย่อหน้า */
}

p {
    font-family: Arial, sans-serif; /* กำหนดฟอนต์ */
    font-size: 18px; /* ขนาดตัวอักษร */
    line-height: 1.5; /* ระยะห่างระหว่างบรรทัด */
    text-align: justify; /* จัดข้อความชิดขอบทั้งสองด้าน */
    margin: 20px auto; /* ระยะห่างด้านบน-ล่าง และจัดตรงกลาง */
    max-width: 600px; /* จำกัดความกว้างของย่อหน้า */
}

.unjustify {
    text-align: center; /* จัดข้อความชิดขอบทั้งสองด้าน */
}

/* ปรับระยะระหว่างบรรทัดสำหรับหน้าจอเล็ก */
@media (max-width: 768px) {
    .font-primary, .p-dark, p {
        font-size: 14px; /* ลดขนาดตัวอักษร */
        line-height: 1.8; /* เพิ่มระยะห่างระหว่างบรรทัด */
        margin: 15px auto; /* ปรับระยะห่างบน-ล่าง */
    }

    .font-sofia {
        font-size: 48px; /* ลดขนาดตัวอักษร */
        line-height: 1; /* เพิ่มระยะห่างเล็กน้อย */
    }

    .font-sofia-sans {
        font-size: 24px; /* ลดขนาดตัวอักษร */
        line-height: 1.2; /* เพิ่มระยะห่าง */
    }
}

/* สำหรับหน้าจอที่เล็กมาก เช่น โทรศัพท์มือถือ */
@media (max-width: 480px) {
    .font-primary, .p-dark, p {
        font-size: 12px; /* ลดขนาดตัวอักษรเพิ่มเติม */
        line-height: 2; /* เพิ่มระยะห่างระหว่างบรรทัดอีก */
        margin: 10px auto; /* ปรับระยะห่างบน-ล่างให้เล็กลง */
        text-align: center;
    }

    .font-sofia {
        font-size: 36px; /* ลดขนาดตัวอักษรเพิ่มเติม */
        line-height: 1.2; /* เพิ่มความอ่านง่าย */
    }

    .font-sofia-sans {
        font-size: 20px; /* ลดขนาดตัวอักษร */
        line-height: 1.3; /* ปรับระยะห่าง */
    }
}