/* =========================================================
 *  Trang "Hệ thống phân phối" (templates/office.php)
 *  Logo đối tác: hiện tĩnh dạng grid 5 cột (không dùng slider).
 *  Lưu ý: web dùng 1rem = 20px
 * ========================================================= */

.office2 .office2_list {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1199px) {
    .office2 .office2_list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .office2 .office2_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.office2 .office2_item img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* ô logo */
.office2 .office2_item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0.6rem;
    background: #fff;
    border: 0.05rem solid #eef2f6;
    border-radius: 0.6rem;
}
.office2 .office2_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.office2 .office2_item img {
    max-width: 100%;
    height: auto;
    display: block;
}
section.crea {
    padding-top: 9rem;
    padding-bottom: 3.2rem;
}

section.crea nav#breadcrumbs ol {
    display: flex;
    justify-content: center;
}

.office1_wrap {
    justify-content: center;
}

.office1_item .number {
    font-size: 4.25rem;
    font-family: "Momo Trust Display";
    color: #09AEEA;
    line-height: 1;
    display: flex;
    gap: .2rem;
}

.office1_item .content {
    font-size: .9rem;
    color: #103E60;
}

.office1_items.left {
    display: flex;
    flex-direction: column;
    gap: 7.5rem;
    margin-right: -1rem;
}

.office1_items.right {
    display: flex;
    gap: 20.4rem;
    flex-direction: column;
    margin-left: -5rem;
}

.office1_item .don_vi {
    font-size: 2rem;
    line-height: normal;
}

.office1_item {
    width: 12rem;
    position: relative;
}

.office1_item:before {
    content: '';
    position: absolute;
    right: 3rem;
    transform: translateX(100%);
    height: 1px;
    width: 6rem;
    background: linear-gradient(-45deg, #09AEEA, transparent);
    top: 3rem;
}

.office1_items.left .office1_item:nth-child(2):before {
    width: 14rem;
}

.office1_items.left .office1_item:nth-child(3):before {
    width: 13.5rem;
}

.office1_items.right .office1_item:before {
    background: linear-gradient(45deg, #09AEEA, transparent);
    right: unset;
    left: 0;
    transform: translateX(-100%);
}

.office1_items.right .office1_item:nth-child(1):before {
    width: 11rem;
}

.office1_items.right .office1_item:nth-child(2):before {
    width: 3rem;
}

.office1_wrap {
    margin-left: 6rem;
    margin-top: 3rem;
}

.office1_img {
    position: relative;
}

.office1_img .icon svg {
    width: 1.2rem;
    height: auto;
    display: block;
}

.office1_img .icon {
    position: absolute;
    top: 18%;
    left: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.office1_img .dot {
    position: absolute;
    top: 14%;
    left: 32%;
    width: .8rem;
    height: .8rem;
    background: #FFD04D;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.office1_img .dot:before {
    content: '';
    border: .5px solid #FFD04D;
    width: 1rem;
    height: 1rem;
    animation: pulse-border2 1000ms ease-out infinite;
    position: absolute;
    border-radius: 100px;
    background: #FFD04D;
    top: 50%;
    left: 50%;
}

.office1_img .dot:nth-child(2) {
    top: 84%;
    left: 45%;
}

.office2 {
    padding-top: 7rem;
}

.office2_item {}

.office2 .office2_item {
    height: 4.5rem;
    background: transparent;
    border: none;
}

.page-template-office  section.home-7 {
    padding-top: 5rem;
}

.page-template-office section.home-7 .desc-sec {
    margin-bottom: 1rem;
}

.page-template-office .form-item textarea,.page-template-office .form-item input {
    background: #477897;
    color: #fff;
    border: none;
}

.page-template-office .form-item textarea::placeholder, .page-template-office .form-item input::placeholder {
    color: #fff;
}
.page-template-office .content-home-7 {
    padding-top: 5rem;
}
@media only screen and (max-width: 767px) {
    section.crea {
        padding-top: 6rem;
        padding-bottom: 1.2rem;
    }

    .office1_wrap {
        margin: 2rem 0 0;
    }

    .office1_item .number {
        font-size: 1.3rem;
    }

    .office1_item {
        width: 6rem;
    }

    .office1_items.left {
        gap: 2.5rem;
        margin-right: -2rem;
    }

    .office1_items.right {
        gap: 8.4rem;
        margin-left: -3rem;
    }

    .office1_item .don_vi {
        font-size: .6rem;
    }

    .office1_item .content {
        line-height: 1.4;
        font-size: .7rem;
        margin-top: .2rem;
    }



    .office1_img img {
        max-width: 14rem;
    }

    .office1_item:before {
        width: 3rem;
        top: 2.5rem;
        right: 2rem;
        display: none;
    }

    .office1_items.left .office1_item:nth-child(2):before {
        width: 5rem;
    }

    .office1_items.left .office1_item:nth-child(3):before {
        width: 3.5rem;
    }

    .office1_items.right .office1_item:nth-child(1):before {
        width: 4rem;
    }

    .office2 {
        padding-top: 3rem;
    }

    .office2 .office2_item {
        height: 2.5rem;
    }

    /* .page-template-office .content-home-7 { padding-top: 5rem } (trên,
       không có @media) để khoảng cách với graphic nền trên desktop — ở
       mobile không có graphic to như vậy nên để nguyên 5rem (100px) tạo
       khoảng trống rỗng phía trên "Đăng ký làm đại lý". */
    .page-template-office .content-home-7 {
        padding-top: 1.5rem;
    }

    .page-template-office section.home-7 .inner-home-7 {
        padding-top: 0;
    }
}