.midori-services-tab-section {
    padding: 50px 0 !important; /* Tăng đệm dọc trên dưới lên 100px thông thoáng, sang trọng */
    position: relative;
    z-index: 1;
    background-color: var(--midori-primary);
    background-image: linear-gradient(rgba(247, 248, 249, 0.92), rgba(247, 248, 249, 0.92)), url('https://midoridecor.esightstudio.vn/wp-content/uploads/2026/07/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.midori-services-tab-section .midori-heading {
    color: var(--text-title);
    margin-bottom: 5px;
}

.midori-services-tab-section .midori-subheading-serif {
    color: var(--text-dark);
    margin-top: -10px;
}

/* Khung chia cột chính (Desktop) */
.services-tab-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Sidebar cột bên trái */
.services-tab-sidebar {
    width: 320px;
    flex-shrink: 0;
}

.services-tab-sidebar .sidebar-title {
    color: var(--text-title);
    border-bottom: 1.5px solid var(--text-grey);
    padding-bottom: 12px;
    margin: 0 0 20px 0;
}

/* Ép loại bỏ hoàn toàn dấu chấm đầu dòng mặc định của ul */
.services-tab-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Ép loại bỏ hoàn toàn dấu chấm đầu dòng và ĐƯỜNG KẺ NGANG phân cách li */
.services-tab-item {
    list-style: none !important;
    padding: 10px 0;
    border-bottom: none !important; 
    cursor: pointer;
    transition: var(--transition-base);
}

.services-tab-item .tab-item-title {
    color: var(--text-dark) !important;
    /* Ép sát lề dưới bằng !important để không bị hệ thống Global phá */
    margin: 0 0 10px 0 !important; 
    /* Thu hẹp chiều cao dòng để triệt tiêu khoảng trắng thừa của font chữ */
    line-height: 1.2 !important; 
    transition: var(--transition-base);
}

/* Di chuột qua sẽ chuyển màu xanh rêu mềm mại */
.services-tab-item:hover .tab-item-title {
    color: var(--midori-accent) !important;
}

/* Mô tả phụ mặc định có màu đen (độ trong suốt 0.7 cho nhẹ nhàng tinh tế) */
.services-tab-item .tab-item-desc {
    color: var(--text-dark) !important;
    opacity: 0.7;
    /* Đảm bảo hoàn toàn không có lề trên đẩy xuống */
    margin-top: 0 !important; 
    /* Làm gọn chiều cao dòng của đoạn văn mô tả */
    line-height: 1.4 !important; 
    transition: var(--transition-base);
}

/* TRẠNG THÁI ACTIVE ĐƯỢC CHỌN CỦA TAB */
.services-tab-item.active .tab-item-title {
    color: var(--midori-accent) !important;
    font-weight: 700;
}

.services-tab-item.active .tab-item-desc {
    color: var(--text-dark) !important;
    opacity: 1 !important; 
}

/* Ẩn thanh điều hướng mobile mặc định trên máy tính */
.services-tab-nav-mobile {
    display: none;
}

/* Khung hiển thị các Tab Content bên phải */
.services-tab-content-wrapper {
    flex-grow: 1;
    min-width: 0;
}

.services-tab-content-panel {
    display: none;
    width: 100%;
}

/* Kích hoạt hiển thị Tab Content */
.services-tab-content-panel.active {
    display: block;
    animation: midoriFadeIn 0.5s ease;
}

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

/* Lưới 3 cột ảnh dịch vụ */
.services-tab-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.services-tab-cards-grid .service-card-overlay {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    aspect-ratio: 1 / 1; /* Tỷ lệ vuông 1:1 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.services-tab-cards-grid .service-card-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

.services-tab-cards-grid .service-card-overlay:hover img {
    transform: scale(1.04);
}

/* Căn giữa chữ trong ảnh tuyệt đối */
.services-tab-cards-grid .service-text-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.35); 
    display: flex;
    align-items: center; 
    justify-content: center; 
    padding: 20px;
    box-sizing: border-box;
    transition: var(--transition-base);
}

/* Tăng nhẹ độ tối khi di chuột */
.services-tab-cards-grid .service-card-overlay:hover .service-text-overlay {
    background-color: rgba(0, 0, 0, 0.45);
}

.services-tab-cards-grid .service-text-overlay span {
    color: var(--text-white) !important;
    text-align: center;
    font-weight: 300;
}


/* ==========================================================================
   TỐI ƯU HÓA DI ĐỘNG (MOBILE RESPONSIVE TỰ CO RÚT KHOẢNG CÁCH)
   ========================================================================== */
@media (max-width: 991px) {
    .midori-services-tab-section {
        padding: 50px 0 !important; /* Đệm dọc di động 50px cực kỳ gọn gàng */
    }

    /* Đổi hướng bọc lớn về chiều dọc trên di động */
    .services-tab-wrapper {
        flex-direction: column;
        gap: 25px;
        margin-top: 25px;
    }

    /* Ẩn Sidebar danh mục chữ của máy tính */
    .services-tab-sidebar {
        display: none !important;
    }

    /* HIỂN THỊ THANH CUỘN NGANG CHO MOBILE CÂN BẰNG THẲNG ĐỀU LỀ VỚI HỘP ẢNH BÊN DƯỚI */
    .services-tab-nav-mobile {
        display: block !important;
        width: 100%;
        padding: 0 15px; /* Thụt lề 15px trùng khớp lề .container của hộp ảnh */
        box-sizing: border-box;
        overflow: hidden;
    }

    .services-tab-nav-scroll {
        display: flex !important;
        gap: 20px; 
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
        -webkit-overflow-scrolling: touch;
    }

    .services-tab-nav-scroll::-webkit-scrollbar {
        display: none !important; /* Ẩn thanh cuộn trên Chrome/Safari */
    }

    /* Nút Tab ngang di động */
    .services-mobile-tab-btn {
        display: inline-block;
        background: transparent;
        border: none;
        padding: 8px 0; 
        color: var(--text-grey);
        font-weight: 500;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
    }

    /* Đường kẻ chân mỏng màu xanh rêu dưới Tab di động được kích hoạt */
    .services-mobile-tab-btn.active {
        color: var(--midori-accent) !important;
        font-weight: 700 !important;
    }

    .services-mobile-tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--midori-accent);
    }

    /* Bố trí các hộp ảnh dịch vụ xếp chồng đứng dọc */
    .services-tab-content-wrapper {
        padding: 0 15px !important; /* Đệm lề 15px bảo vệ hộp ảnh */
        box-sizing: border-box;
    }

    .services-tab-cards-grid {
        grid-template-columns: 1fr !important; /* Co về 1 cột dọc */
        gap: 20px !important;
    }

    .services-tab-cards-grid .service-card-overlay {
        aspect-ratio: 1 / 1 !important; /* Điện thoại giữ nguyên tỉ lệ 1:1 hình vuông */
    }
}