/* Core Values 5T - Circular Layout */
/* Override all previous styles */

/* Reset any previous 5T styles */
.core-values .values-5t-container,
.core-values .values-professional-grid,
.core-values .value-professional-card,
.core-values .values-center-badge {
    display: none !important;
    visibility: hidden !important;
}

/* Core Values Section */
.core-values {
    padding: 80px 0 !important;
    background: #ffffff !important;
    text-align: center !important;
}

.core-values .section-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #2E5C8A !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.core-values .core-values-subtitle {
    font-size: 1rem !important;
    color: #666 !important;
    margin-bottom: 60px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Circle Container */
.values-circle-container {
    position: relative !important;
    width: 500px !important;
    height: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center Badge (5T) */
.center-badge {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 150px !important;
    height: 150px !important;
    background: linear-gradient(135deg, #2E5C8A 0%, #4A90C2 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 15px 30px rgba(46, 92, 138, 0.3) !important;
    z-index: 10 !important;
}

.center-badge .badge-5t {
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: white !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.center-badge .badge-subtitle {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.9) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
}

/* Value Circle Items */
.value-circle-item {
    position: absolute !important;
    width: 140px !important;
    height: 140px !important;
    background: #ffffff !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border: 2px solid #f0f0f0 !important;
    padding: 18px !important;
}

/* Positioning around circle - Perfect Pentagon */
.value-tam {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateY(-190px) !important;
}

.value-tam-vision {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(181px) translateY(-56px) !important;
}

.value-tai {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(112px) translateY(153px) !important;
}

.value-tri {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(-112px) translateY(153px) !important;
}

.value-tinh {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(-181px) translateY(-56px) !important;
}

/* Value Icons */
.value-icon {
    font-size: 2.5rem !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Value Titles */
.value-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2E5C8A !important;
    margin: 0 0 5px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Value Descriptions */
.value-desc {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Connecting Lines (Optional) */
.values-circle-container::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 350px !important;
    height: 350px !important;
    border: 2px dashed rgba(46, 92, 138, 0.2) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .values-circle-container {
        width: 350px !important;
        height: 350px !important;
    }
    
    .center-badge {
        width: 100px !important;
        height: 100px !important;
    }
    
    .center-badge .badge-5t {
        font-size: 2.2rem !important;
    }
    
    .center-badge .badge-subtitle {
        font-size: 0.65rem !important;
    }
    
    .value-circle-item {
        width: 105px !important;
        height: 105px !important;
        padding: 12px !important;
    }
    
    .value-icon {
        font-size: 1.8rem !important;
        margin-bottom: 5px !important;
    }
    
    .value-title {
        font-size: 0.8rem !important;
        margin-bottom: 3px !important;
    }
    
    .value-desc {
        font-size: 0.7rem !important;
    }
    
    .value-tam {
        transform: translate(-50%, -50%) translateY(-140px) !important;
    }
    
    .value-tam-vision {
        transform: translate(-50%, -50%) translateX(133px) translateY(-41px) !important;
    }
    
    .value-tai {
        transform: translate(-50%, -50%) translateX(82px) translateY(112px) !important;
    }
    
    .value-tri {
        transform: translate(-50%, -50%) translateX(-82px) translateY(112px) !important;
    }
    
    .value-tinh {
        transform: translate(-50%, -50%) translateX(-133px) translateY(-41px) !important;
    }
    
    .values-circle-container::before {
        width: 250px !important;
        height: 250px !important;
    }
}

@media (max-width: 480px) {
    .core-values {
        padding: 60px 0 !important;
    }
    
    .core-values .section-title {
        font-size: 2rem !important;
    }
    
    .values-circle-container {
        width: 300px !important;
        height: 300px !important;
    }
    
    .center-badge {
        width: 80px !important;
        height: 80px !important;
    }
    
    .center-badge .badge-5t {
        font-size: 1.8rem !important;
    }
    
    .center-badge .badge-subtitle {
        font-size: 0.55rem !important;
    }
    
    .value-circle-item {
        width: 85px !important;
        height: 85px !important;
        padding: 10px !important;
    }
    
    .value-icon {
        font-size: 1.4rem !important;
        margin-bottom: 3px !important;
    }
    
    .value-title {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
    }
    
    .value-desc {
        font-size: 0.6rem !important;
    }
    
    .value-tam {
        transform: translate(-50%, -50%) translateY(-110px) !important;
    }
    
    .value-tam-vision {
        transform: translate(-50%, -50%) translateX(105px) translateY(-32px) !important;
    }
    
    .value-tai {
        transform: translate(-50%, -50%) translateX(65px) translateY(89px) !important;
    }
    
    .value-tri {
        transform: translate(-50%, -50%) translateX(-65px) translateY(89px) !important;
    }
    
    .value-tinh {
        transform: translate(-50%, -50%) translateX(-105px) translateY(-32px) !important;
    }
    
    .values-circle-container::before {
        width: 200px !important;
        height: 200px !important;
    }
}