/* =====================================================
   Flatsome Custom Elements – Icon Tab
   ===================================================== */

/* Tab nav item chứa icon */
.fce-icon-tabs .nav li.fce-has-icon > a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon nằm trên label */
.fce-icon-tabs.fce-icon-pos-top .nav li.fce-has-icon > a {
    flex-direction: column;
    text-align: center;
}

/* Icon bên phải label */
.fce-icon-tabs.fce-icon-pos-right .nav li.fce-has-icon > a {
    flex-direction: row-reverse;
}

/* Bọc icon */
.fce-tab-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Ảnh icon */
.fce-tab-icon {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.2s ease;
}

/* Giảm opacity khi tab không active (tùy chọn UX) */
.fce-icon-tabs .nav li.fce-has-icon > a .fce-tab-icon {
    opacity: 0.6;
}
.fce-icon-tabs .nav li.fce-has-icon.active > a .fce-tab-icon,
.fce-icon-tabs .nav li.fce-has-icon > a:hover .fce-tab-icon {
    opacity: 1;
}

/* Label */
.fce-tab-label {
    display: block;
}