/*
 * Bù CSS cho các phần render bằng vòng lặp ACF.
 *
 * apmau.css lấy nguyên từ Bricks nên style từng card gắn vào ID riêng
 * (#brxe-jkievk, #brxe-erqxhw, #brxe-mzktqk, #brxe-hbnpxg ...). Khi đổi sang
 * foreach thì ID không còn khớp, và số lượng row cũng không cố định 4/5 như bản gốc.
 * Các rule dưới đây là bản class-based tương đương, chạy được với số row bất kỳ.
 */

/* ---- Marker: gốc là #brxe-ejixql, #brxe-tfwogy, #brxe-qymilr ... đều cùng một khai báo ---- */
.the-marker {
    position: absolute;
    min-width: 20px;
    min-height: 20px;
    right: 0;
    background-color: #ff875c;
}

/* ---- home_4: card nguyên tắc đầu tư (gốc #brxe-tvgkwg, #brxe-mmunpx, #brxe-ryqmca ...) ---- */
@media (max-width: 991px) {
    .home_4 .brxe-block.the-card {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .home_4 .brxe-block.the-card {
        height: auto;
        padding-right: 0;
        padding-bottom: 48px;
        padding-left: 0;
    }
}

/* Ảnh trong card chỉ dùng cho mobile (gốc #brxe-mtupte) */
.mobile_block:not(.tag),
.mobile_block img {
    object-fit: cover;
}

@media (max-width: 991px) {
    .mobile_block {
        display: block;
        margin-bottom: 24px;
    }

    .mobile_flex {
        display: flex;
    }
}

/* ---- home_5: card thành viên (gốc #brxe-jkievk, #brxe-erqxhw, #brxe-mzktqk, #brxe-hbnpxg) ---- */
.home_5 .brxe-block.the-card {
    padding-right: 4em;
    padding-left: 4em;
}

.home_5 .the-card .brxe-heading {
    max-width: 19.583rem;
    width: 100%;
    color: #ffffff;
    font-size: 1.667rem;
    line-height: 1;
    font-family: 'Forum';
    font-weight: 400;
}

.home_5 .the-card .brxe-text-basic {
    font-size: 0.729rem;
    color: #cecece;
    font-weight: 400;
    font-family: 'Poppins';
    margin-top: 0.417rem;
}

.home_5 .the-card .brxe-text {
    color: #ffffff;
    font-family: 'Poppins';
    margin-top: 16px;
}

.home_5 .the-card .brxe-text a {
    color: #ffffff;
    font-family: 'Poppins';
    font-size: inherit;
}

/* Ảnh cột trái xếp chồng lên nhau, đổi qua lại bằng interaction (gốc #team-1 ... #team-4) */
.home_5 .team-photo {
    position: absolute;
    max-width: 394px;
    width: 100%;
}

.home_5 .team-photo:not(.tag),
.home_5 .team-photo img {
    object-fit: cover;
}

/* Ảnh nằm trong card, chỉ hiện ở mobile (gốc #brxe-kopqhb) */
.home_5 .the-card .team-photo-mobile {
    position: absolute;
    max-width: 394px;
    width: 100%;
    display: none;
}

.home_5 .the-card .team-photo-mobile:not(.tag),
.home_5 .the-card .team-photo-mobile img {
    object-fit: cover;
}

@media (max-width: 991px) {
    .home_5 .brxe-block.the-card {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 80px;
        padding-left: 0;
        height: auto;
    }

    .home_5 .the-card .brxe-heading {
        margin-top: 40px;
    }

    .home_5 .the-card .team-photo-mobile {
        position: static;
        max-width: 336px;
        align-self: center;
        display: block;
    }
}

@media (max-width: 767px) {
    .home_5 .brxe-block.the-card {
        height: auto;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .home_5 .the-card .brxe-heading {
        font-size: 1.25rem;
    }

    .home_5 .the-card .brxe-text-basic {
        font-size: 0.625rem;
    }

    .home_5 .the-card .brxe-text,
    .home_5 .the-card .brxe-text a {
        font-size: 0.729rem;
    }

    .home_5 .team-photo,
    .home_5 .the-card .team-photo-mobile {
        height: 100%;
    }
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 3.5vw !important;
    }

    .grid-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .load_home_page svg {
        width: 240px;
    }

    #search-lightbox {
        margin-left: -20px;
        margin-right: -20px;
        max-width: calc(100% + 40px);
    }

    #search-lightbox .search-lightbox-title {
        margin-bottom: 20px;
        font-size: 20px;
    }

    #search-lightbox .search-keywords {
        margin-top: 20px;
    }

    #search-lightbox .search-keywords > a {
        font-size: 14px;
    }

    .search-tabs .search-grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5rem 1rem
    }

    .search-page {
        padding: 3rem 0;
    }

    .search-page h1 {
        margin-bottom: 2rem;
    }

    .search-tabs .search-tabs-title .search-tab-title {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    header #logo img, header .stuck #logo img {
        max-height: 35px !important;
    }
    #brxe-mkjuls {
        width: 100%;
        font-family: 'Poppins';
    }

    #brxe-ljwbbt {
        padding: 0 15px;
    }

    #brxe-rhbpyd {
        font-size: 3rem;
    }

    .home_1 {
        height: 26rem !important;
    }

    .home_2 #brxe-wksxjq {
        padding: 2rem 0;
    }

    .home_2 {
        padding: 0 15px !important;
    }

    #brxe-breqcu {
        padding: 0 !important;
    }

    #brxe-wlspzm {
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.5;
    }

    .home_2 div#brxe-zrmnzg {
        margin-top: 1rem;
    }

    #principles {
        padding: 0 15px;
    }

    #brxe-tinble {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .principle {
        font-size: 1.8rem !important;
    }

    .home_4 .brxe-block.the-card img {
        width: 100%;
    }

    .home_5 .brxe-block.the-card img {
        height: auto;
        width: 100%;
        margin: 0 auto;
    }

    .home_5 .the-card .brxe-heading {
        margin: 1rem 0 0;
        font-size: 1.7rem;
    }

    .home_5 .brxe-block.the-card {
        gap: .5rem;
    }

    .home_5 .the-card .brxe-text-basic {
        margin: 0;
        font-size: 1.2rem;
    }

    .home_5 .the-card .brxe-text, .home_5 .the-card .brxe-text a {
        margin: 0;
        font-size: 1.1rem;
    }
    h2 {
        font-size: 2.2rem;
    }

    .home_6 .row .col.large-4 {order: 3;}

    .blog_custom_wrap {
        flex-direction: column;
    }

    .blog_custom_wrap .item {
        width: 100% !important;
    }

    .blog_custom_wrap .item .detail {
        margin-top: 1rem;
    }

    .blog_custom_wrap .item .detail h3 {
        font-size: 1.3rem;
        font-family: 'Poppins regular';
    }

    .blog_custom_wrap .item .date {
        margin-top: 1rem;
    }

    .blog_custom .btn_wrap {
        justify-content: center;
    }

    .home_6 {
        padding: 2rem 0 0;
    }
}

/* ---- Ảnh sticky trong home_4 / home_5 ----
 * apmau.css chỉ khai báo #image-1..#image-5 và #team-1..#team-4 (bản Bricks gốc cố định
 * 5 và 4 card). Khi repeater có nhiều dòng hơn, các ảnh dư không được position:absolute
 * nên rơi vào flow của cột sticky, đẩy layout lệch và ảnh hiện ra không khớp card đang xem.
 * Hai rule class-based dưới đây phủ cho mọi số dòng.
 */
#brxe-mlmdyg > .the-image {
    height: 62vh;
    position: absolute;
}

#brxe-mlmdyg > .the-image:not(.tag),
#brxe-mlmdyg > .the-image img {
    object-fit: cover;
}

#brxe-dimbvr > .the-image {
    position: absolute;
    width: 100%;
    max-width: 394px;
}

#brxe-dimbvr > .the-image:not(.tag),
#brxe-dimbvr > .the-image img {
    object-fit: cover;
}

@media (max-width: 767px) {
    #brxe-mlmdyg > .the-image,
    #brxe-dimbvr > .the-image {
        height: 100%;
    }
}