/* ===== v21 text overlap hotfix ===== */
html, body {
    font-family: "IBM Plex Sans Thai", sans-serif;
    line-height: 1.55;
}

body,
p,
span,
a,
li,
label,
small,
td,
th,
.card-text,
.form-text,
.btn,
.badge {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.card-title,
.project-title,
.member-name {
    line-height: 1.25;
}

.form-control,
.form-select,
textarea,
input,
select,
button {
    line-height: 1.4;
    min-height: 44px;
}

.nav-link,
.dropdown-item,
.btn,
.badge,
.chip,
.skill-chip {
    white-space: normal;
    word-break: break-word;
}

.card-title,
.project-title,
.member-name {
    overflow-wrap: break-word;
}

@media (max-width: 576px) {
    body {
        font-size: 16px;
        line-height: 1.55;
    }

    .card-title,
    .project-title,
    .page-title {
        line-height: 1.3;
    }
}