.residents-privileges {
    padding: 0;
}
.inner-residents {
    background-color: #FFFFFF;
    margin-top: 40px;
}
.residents-privileges .section-header {
    text-align: left !important;
    margin-bottom: 40px;
}
.residents-privileges .section-header .section-name.top-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 27px;
    padding-left: 38px;
    padding-top: 0;
}
.residents-privileges .section-header .section-name.top-icon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url('/wp-content/themes/Loplus/assets/images/brown-lotus.svg'), 
                      url('data:image/svg+xml;charset=utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.7219 10.9724C26.2804 14.2983 25.1258 17.2035 23.3655 19.0232L23.1809 19.2078C20.4659 21.8367 16.8123 21.6948 14.7893 21.7761C14.959 19.9264 15.3452 16.8045 18.0569 14.1658C19.0088 13.2402 20.4412 12.8132 22.136 12.3923C23.5889 12.0315 25.2151 11.6782 26.7219 10.9724Z" stroke="%23BF522A" stroke-width="0.75" stroke-linejoin="round"/><path d="M14.4354 22.0231C15.6372 20.7076 18.141 18.1184 18.141 14.0191C18.141 11.2307 16.5436 8.05322 13.9997 5.19995C11.4558 8.05322 9.8584 11.2353 9.8584 14.0191C9.8584 18.1184 12.3672 20.7076 13.564 22.0231" stroke="%23BF522A" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.27661 10.9724C2.78323 11.6786 4.40928 12.0314 5.86255 12.3923C7.45139 12.7869 8.81023 13.1865 9.76001 13.9978L9.94458 14.1658C12.6508 16.8046 13.04 19.9267 13.2102 21.7761C11.1895 21.6949 7.52689 21.8357 4.81372 19.2078C2.9544 17.4035 1.73318 14.4133 1.27661 10.9724Z" stroke="%23BF522A" stroke-width="0.75" stroke-linejoin="round"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.residents-privileges .section-header .title {
    font-size: 30px;
    font-weight: 400;
    line-height: 100%;
}
.residents-privileges .section-body {
    margin-top: 24px;
}
.residents-gallery {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    gap: 20px;
    position: relative;
    height: 300px;
}
.residents-privileges .subtitle {
    max-width: 580px;
    margin: 0 auto;
    letter-spacing: 0;
}
.residents-privileges .content-toggle {
    margin: 41px auto 0;
    max-width: 580px;
    letter-spacing: 0;
}
.residents-privileges .gallery-col {
    flex: 1;
    position: relative;
}
.residents-privileges .gallery-col .col-item {
    margin-bottom: 24px;
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 224px;
    right: 0;
    z-index: 1;
}
.residents-privileges .gallery-col .col-item.active {
    z-index: 2;
}
.residents-privileges .residents-right.gallery-col .col-item {
    left: 0;
}
.residents-gallery .image-box {
    position: relative;
    padding-bottom: 133%;
    display: block;
    max-width: 224px;
}
.residents-gallery .residents-left .col-item.active .image-box {
    margin-left: auto;
}
.residents-gallery .residents-right .col-item:not(.active) .image-box {
    margin-right: 0;
    margin-left: auto;
}
.residents-gallery .image-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}
.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: -20px;
}
.gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0.75px solid var(--color-primary);
    background-color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
}
.gallery-dot:hover {
    background-color: var(--color-primary);
}
.gallery-dot.active {
    background-color: var(--color-primary);
}
.residents-privileges .content-toggle table {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3-small);
    max-width: 500px;
    margin: 0 auto;
    border: none;
}
.residents-privileges .content-toggle table * {
    border: none;
}
@media (min-width: 640px) {
    .gallery-dots {
        margin-top: 42px;
    }
    .residents-privileges .section-header .title {
        font-size: 40px;
    }
    
}
.residents-gallery-mobile {
    display: none;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .residents-privileges .section-header .section-name.top-icon {
        font-size: 15px;
    }
    .desktop-gallery {
        display: none !important;
    }
    .gallery-dots {
        display: none !important; /* Hide gallery's pagination */
    }
    .residents-gallery-mobile {
        display: block !important;
    }
    .residents-gallery-mobile .swiper-slide {
        width: calc(50% - 10px) !important; /* 2 image per row */
    }
    .residents-gallery-mobile .image-box {
        position: relative;
        padding-bottom: 133%;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .residents-gallery-mobile .image-box img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .residents-gallery-mobile .swiper-pagination {
        margin-top: 20px;
        position: static !important; /* Đảm bảo pagination hiển thị đúng vị trí */
    }
    .residents-gallery-mobile .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0.75px solid var(--color-primary);
        background-color: var(--color-white);
        margin: 0 4px;
        opacity: 1;
    }
    .residents-gallery-mobile .swiper-pagination-bullet-active {
        background-color: var(--color-primary);
    }
}

@media (max-width: 460px){
    .residents-gallery{
        height: 250px;
    }
    .gallery-dots {
        margin-top: 25px;
    }
    .residents-privileges{
        margin-top: 70px;
    }
    .residents-privileges .section-header{
        margin-bottom: 30px;
    }
}