/*map van phong*/
/* Style cho hotspot khi active */
.empire-map .hotspot-wrapper {
    width: 13px;
    height: 8%;
    z-index: 22;
    cursor: pointer;
    transform: translateX(-50%);
}
.empire-map .hotspot-wrapper div {
display:none    
}
.empire-map .hotspot-wrapper:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background: var(--fs-color-primary);
    bottom: 0;
    left: 6px;
}
.empire-map .hotspot-wrapper:after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    background: var(--fs-color-primary);
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
.empire-map .active-hotspot::before, 
.empire-map .active-hotspot::after, 
.empire-map .active-hotspot:hover::before, 
.empire-map .active-hotspot:hover::after {
    background: var(--fs-color-secondary);;
}
.empire-map .hotspot-wrapper.active-hotspot{
z-index:25;
}
.empire-map .office-hotspot-1 {
    top: 12%;
    left: 41.5%;
}
.empire-map .office-hotspot-2 {
    bottom: 22%;
    left: 49%;
}
.empire-map .office-hotspot-3 {
    bottom: 22%;
    right: 46%;
    height: 5%;
}
/* Style Office Info */
.office-info-wrapper {
    margin-top: 20px;
}
.office-detail {
    /* background: white; */
    padding: 35px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgb(90 164 177 / 37%);
}
.office-detail-inner {
    /* color: var(--fs-color-primary); */
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.office-detail h3 {
    font-size: 32px;
    font-weight: 700;
    /* color: #1e1e2f; */
    margin-bottom: 20px;
}
.office-add {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    /* color: #666; */
}
.office-add i {
    /* color: var(--fs-color-primary); */
}
/* Style cho indicator */
.office-indicators-wrapper{
    text-align: center;
    margin: 30px 0 20px;
}
.indicator-inner {
    display: inline-flex;
    gap: 15px;
    /* background: #f0f0f0; */
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* box-shadow: 0 8px 32px 0 rgb(90 164 177 / 37%); */
    box-shadow: 0 8px 32px 0 
color-mix(in srgb, var(--fs-color-primary, #2f1401) 37%, transparent);
}

.indicator-item {

    padding: 8px 20px;
    background: white;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    color: rgb(30, 30, 47);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;

    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}
.indicator-item i{
    color:var(--fs-color-primary);
    margin-right: 8px;
}
.indicator-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(255 152 0 / 20%) !important;
}

.indicator-item.active {
    background: var(--fs-color-primary)!important;
    color: white !important;
}

.indicator-item.active i {
    color: white !important;
}

/* Animation cho office detail */
.office-detail {
    animation: fadeSlide 0.4s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .office-indicators-wrapper > div:first-child {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px !important;
    }
    
    .indicator-item {
        font-size: 12px !important;
        padding: 6px 15px !important;
    }
    
    .office-detail {
        padding: 20px !important;
        min-height: 300px;
    }
    
    .office-detail [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}





.before-footer .section-bg.fill{
    background-color: 
color-mix(in srgb, var(--fs-color-primary, #2f1401) 50%, transparent);
}
.before-footer .section-bg img{
    mix-blend-mode: multiply;
}
.office-detail {
    /* background: white; */
    padding: 35px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* box-shadow: 0 8px 32px 0 rgb(90 164 177 / 37%); */
    box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--fs-color-primary, #2f1401) 37%, transparent);
}