/* =========================================================
   TÂN THÀNH AUTHOR BOX PRO
   VERSION 1.6
   ========================================================= */

.tt-author-box-pro {
    position: relative;
    clear: both;
    margin: 34px 0 28px;
    border: 1px solid #e2e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .055);
    overflow: hidden;

    /* Dùng font hệ thống để đồng bộ website, tránh font lạ */
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

.tt-author-box-pro__topbar {
    width: 100%;
    height: 4px;
    background: #d20b0b;
}

.tt-author-box-pro__body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px 23px;
}

.tt-author-box-pro__avatar-wrap {
    flex: 0 0 92px;
}

.tt-author-box-pro__avatar {
    width: 92px !important;
    height: 92px !important;
    display: block;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 1px #dfe4e8,
        0 5px 14px rgba(0, 0, 0, .10);
}

.tt-author-box-pro__main {
    flex: 1;
    min-width: 0;
}

.tt-author-box-pro__heading {
    margin-bottom: 3px;
    color: #d20b0b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
}

.tt-author-box-pro__name {
    margin-bottom: 2px;
    color: #1c252c;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.tt-author-box-pro__job {
    margin-bottom: 10px;
    color: #69747c;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.tt-author-box-pro__bio {
    max-width: 900px;
    color: #333;
    font-size: 16px;
    line-height: 1.78;

    text-align: justify;
    text-justify: inter-word;
}

.tt-author-box-pro__bio p {
    margin: 0 0 7px;
    text-align: justify;
    text-justify: inter-word;
}

.tt-author-box-pro__bio p:last-child {
    margin-bottom: 0;
}

.tt-author-box-pro__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}


.tt-author-box-pro__socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.tt-author-box-pro__social {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 7px;

    color: #fff !important;
    text-decoration: none !important;

    box-shadow: 0 2px 7px rgba(0, 0, 0, .10);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.tt-author-box-pro__social svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
}

/* FACEBOOK */
.tt-author-box-pro__social--facebook {
    background: #1877f2;
}

/* LINKEDIN */
.tt-author-box-pro__social--linkedin {
    background: #0a66c2;
}

/* YOUTUBE */
.tt-author-box-pro__social--youtube {
    background: #ff0000;
}

/* ZALO */
.tt-author-box-pro__social--zalo {
    background: #0068ff;
}

/* X */
.tt-author-box-pro__social--x {
    background: #111;
}

/* HOVER */
.tt-author-box-pro__social:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
    opacity: .92;
}

@media (max-width: 767px) {

    .tt-author-box-pro {
        margin: 26px 0 22px;
        border-radius: 9px;
    }

    .tt-author-box-pro__body {
        gap: 14px;
        padding: 18px 16px 19px;
    }

    .tt-author-box-pro__avatar-wrap {
        flex-basis: 72px;
    }

    .tt-author-box-pro__avatar {
        width: 72px !important;
        height: 72px !important;
    }

    .tt-author-box-pro__name {
        font-size: 18px;
    }

    .tt-author-box-pro__bio {
        font-size: 14px;
        line-height: 1.68;
    }

}

@media (max-width: 520px) {

    .tt-author-box-pro__body {
        display: block;
    }

    .tt-author-box-pro__avatar-wrap {
        margin-bottom: 12px;
    }

    .tt-author-box-pro__actions {
        align-items: flex-start;
    }

}