#list-member {
    background: #ffffff;
    color: #272e4e;
    padding-top: 152px;
}

    #list-member .container {
        /*max-width: 1230px;*/
    }

.container.member {
    /*padding-top: 60px;
    padding-bottom: 60px;*/
}

.container.chairman {
    padding-bottom: 100px;
}
.back-button{
    /*margin-left: 100px;*/
}
.back-button a {
    color: #272e4e;
    font-weight: 700;
    margin-bottom: 30px;
}

.back-button .arrow-btn {
    display: inline-block;
    transform: rotate(45deg);
}

.member-view-block {
    /*max-width: 1200px;
    margin: 0 auto;*/
    padding-bottom: 100px;
}

.title {
    margin-top: 40px;
    margin-bottom: 80px;
    /*font-size: 56px;*/
}

/* Có thể sử dụng grid-templates */
/* .members {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 58px;
    column-gap: 90px;
    justify-items: center;
} */

.name-member {
    flex-grow: 1;
    font-size: 20px;
    padding: 10px;
    background-image: linear-gradient(90deg, rgba(122, 228, 149, 1) 0%, rgba(255, 219, 75, 1) 100%);
    position: relative;
    z-index: 1000;
}

.members .row {
    justify-content: space-between;
    row-gap: 55px;
}
.chairman .members .row:first-child {
    justify-content: space-between;
}

.chairman .members .row:not(:first-child) {
    justify-content: space-evenly;
}
.member {
    /*padding-inline: 40px;*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.shape-bg {
    bottom: -60px;
}

.member-image {
    position: relative;
    z-index: 999;
}
.member-image1 {
    position: relative;
    z-index: 999;
    aspect-ratio: 1;
    cursor: pointer;
    /*height: 330px;*/
}
.member-image2 {
    position: relative;
    z-index: 999;
    height: 420px;
}

.image-member:hover {
    /*background: #efefee;*/
}
    .image-member:hover .member-image1 {
        transform: scale(1.05); 
        transition: transform 0.3s ease; 
    }

.member-image1 {
    transition: transform 0.3s ease;
}
    /*.modal-content-member{
    height: max-content;
}*/
    /* Modal CSS */
.modal {
    background-color: rgba(239, 239, 238, 0.6);
}
    .modal-dialog {
        max-width: 1110px;
        min-height: calc(100%);
    }

.modal-content {
    padding: 0 !important;
}

.modal-content {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 120px;
}

.modal-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;/*
    justify-content: center;
    overflow-y: scroll;*/
    max-height: 588px;
}

    .modal-body .row {
        padding: 80px;
        max-width: 1110px;
    }
.modal-scrollable1 {
    overflow-y: scroll;
    /*scrollbar-width: none;*/ /* Firefox */
    /*-ms-overflow-style: none;*/ /* IE, Edge cũ */
    flex-grow: 1;
    max-height: 300px;
    /*padding-right: 8px; */
}
.modal-scrollable {
    overflow-y: scroll;
    /*scrollbar-width: none;*/ /* Firefox */
    /*-ms-overflow-style: none;*/ /* IE, Edge cũ */
    flex-grow: 1;
    max-height: 300px; /* phần text được phép cuộn riêng */
    padding-right: 8px; /* tránh thanh cuộn đè chữ */
}
    /*.modal-scrollable::-webkit-scrollbar {
        display: none;*/ /* Chrome, Safari, Edge mới */
    /*}*/

    /* Chrome, Edge, Safari */
    .modal-scrollable::-webkit-scrollbar {
        width: 8px;
    }

    .modal-scrollable::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1); /* màu nền rãnh */
        border-radius: 4px;
    }

    .modal-scrollable::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5); /* màu thanh kéo */
        border-radius: 4px;
    }

        .modal-scrollable::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.7); /* sáng hơn khi hover */
        }
.close {
    position: absolute;
    z-index: 10000;
    top: 39px;
    right: 34px;
    opacity: 1;
}

.member-image-modal {
    display: flex;
    align-self: flex-start;
    padding: 0;
    /* background-image: url('Chèn URL vào đây'); */
}

.divider {
    border: 1px solid #272e4e;
    margin-bottom: 20px;
}

.member-position {
}

.member-name {
    font-size: 20px;
}

.member-speech {
    font-size: 20px;
    font-weight: 700;
}

.btn-close {
    right: 0;
    top: -20px;
    color: #272e4e;
}

.modal-dialog .modal-content .close {
    background: transparent !important;
}

.modal-body {
    /*padding-left: 30px;*/
}

.member-modal-body{
    overflow-y: hidden;
    padding: 0;
}
.member-modal-body .row {
    display: flex;
    width: 100%;
    gap: 80px;
    margin-left: 0;
}
.members .member-row .col-sm-4{
    padding: 0;
}
.member-modal-body .col-info-type-1 {
    flex: 1;
    /*overflow-y: auto;
    max-height: 500px;*/
    padding: 0;
}
.col-info-type-2 {
    padding: 80px;
    /*background: linear-gradient(90deg, rgba(12, 94, 218, 1) 0%, rgba(2, 194, 255, 1) 100%);*/
    /*height: max-content;*/
}
.modal-type-3{
    padding-right: 0 !important;
}
.modal-type-1 {
    padding-right: 0 !important;
}
.modal-type-3 .modal-body {
    padding: 0;
}

.col-info-type-3 {
    /*padding: 55px 32px 72px 55px;*/
    background: linear-gradient(90deg, rgba(2, 194, 255, 1) 0%, rgba(10, 195, 209, 1) 50%);
}

.header-title-ft {
    display: flex;
    /*height: 8.2%;
    min-height: 118px;*/
    background: linear-gradient(to right, #2772fa, #020483);
    margin-bottom: 80px;
}

    .header-title-ft img {
        margin-left: 20px;
        height: 100px;
        padding: 20px 10px;
    }

    .header-title-ft h1 {
        margin: auto 0;
        text-align: justify;
        font-weight: 700;
        color: #ffffff;
    }
.position {
    margin: 0;
    min-height: 48px;
}

@media (max-width: 767px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1rem;
    }

    p, li {
        font-size: 0.875rem;
    }
    .members{
        padding: 0 80px;
    }
        .members .member {
            padding: 0;
        }
    .chairman .members .row .member:nth-child(3) {
        order: -1; 
    }

    .header-title-ft {
        margin-bottom: 40px;
    }
    #list-member {
        padding-top: 70px;
    }
    h2 {
        /*font-size: 18px;*/
    }
    .position {
        font-size: 13px;
    }
    .back-button {
        margin-top: 20px;
    }
    .header-title-ft > img {
        max-height: 70px !important;
        margin: auto 0;
    }

    .header-title-ft h1 {
        /*font-size: 24px;*/
        /*margin-bottom: 20px;*/
    }
    .title {
        font-size: 24px;
        margin: 20px 0 40px;
    }
    .member-view-block {
        padding-bottom: 50px;
    }
    .member-modal-body {
        overflow-y: scroll;
    }
        .member-modal-body .col-info-type-1 {
            flex: 1;
            overflow-y: hidden;
            max-height: 100%;
            /*padding-right: 10px;*/
        }
    .modal-body {
        padding: 0;
        overflow-y: auto;
    }
    .member-modal-body .member-row {
        margin-left: 0;
    }
    .container.chairman {
        padding-bottom: 50px;
    }
    .members .row {
        row-gap: 0;
    }
    .members .modal .row {
        padding: 40px 20px;
    }
    .modal-scrollable {
        overflow: visible;
        max-height: none;
    }
    .modal-scrollable1 {
        overflow: visible;
        max-height: none;
    }
    .col-info-type-2 {
        padding: 40px 20px;
    }
    .modal .text-uppercase {
        margin-bottom: 20px;
    }
    .member-speech {
        margin-bottom: 40px;
    }
    .member-image-modal-mobile{
        margin-bottom: 40px;
    }
}
@media (min-width: 576px) {
    .member-image-modal img {
        min-width: 200px;
    }
}