.iuh__nhansu {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.iuh__nhansu-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fafafa;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    padding: 20px;
    transition: box-shadow .3s
}

    .iuh__nhansu-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.1)
    }

.iuh__nhansu-photo {
    width: 100%;
    flex-shrink: 0
}

    .iuh__nhansu-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        display: block
    }

.iuh__nhansu-body {
    color: #374151;
    text-justify:inherit;
}

.iuh__nhansu-name {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    color: #0f2a5f;
    margin-bottom: 6px
}

.iuh__nhansu-line {
    font-size: .9375rem;
    margin: 3px 0;
    color: #374151
}

.iuh__nhansu-mail {
    color: #1d4ed8;
    text-decoration: none
}

    .iuh__nhansu-mail:hover {
        color: #ca8a04
    }

.iuh__nhansu-label {
    font-weight: 600;
    color: #b91c1c;
    margin: 14px 0 8px
}

.iuh__nhansu-roles {
    margin: 0;
    padding-left: 18px;
    font-size: .9375rem;
    line-height: 1.6;
    color: #374151
}

    .iuh__nhansu-roles li {
        margin: 3px 0
    }

@media (min-width:768px) {
    .iuh__nhansu-card {
        flex-direction: row;
        align-items: stretch;
        padding: 24px
    }

    .iuh__nhansu-photo {
        width: 32%;
        height: auto
    }

    .iuh__nhansu-body {
        width: 68%;
        padding-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: justify;
    }

    .iuh__nhansu-name {
        font-size: 1.375rem
    }

    .iuh__nhansu-line, .iuh__nhansu-roles {
        font-size: 1rem
    }
}

@media (max-width:767px) {
    .iuh__nhansu-card {
        padding: 16px
    }

    .iuh__nhansu-name {
        font-size: 1.125rem
    }

    .iuh__nhansu-line, .iuh__nhansu-roles {
        font-size: .9rem
    }
}

@media (prefers-color-scheme:dark) {
    .iuh__nhansu-card {
        background: #0d1320;
        box-shadow: 0 4px 16px rgba(0,0,0,.5)
    }

    .iuh__nhansu-body {
        color: #d1d5db
    }

    .iuh__nhansu-name {
        color: #c7d2fe
    }

    .iuh__nhansu-mail {
        color: #93c5fd
    }

        .iuh__nhansu-mail:hover {
            color: #fde68a
        }

    .iuh__nhansu-label {
        color: #f87171
    }

    .iuh__nhansu-roles {
        color: #cbd5e1
    }
}