.case-hero, .detail-hero {
    padding: 15rem 2rem 8rem; background: linear-gradient(rgba(0,46,95,0.9), rgba(0,46,95,0.9)), url('../images/banner3.jpg');
    background-size: cover; color: #fff; text-align: center;
}
.case-hero h1, .detail-hero h1 { font-size: 4.5rem; margin-bottom: 1.5rem; }
.case-hero p {
    font-size: 2rem;
    max-width: 80rem;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}


.case-filter { padding: 3rem 0; background: #f4f7f6; }
.filter-wrapper { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.filter-select { padding: 1rem 2rem; font-size: 1.5rem; border: 1px solid #ddd; border-radius: 0.5rem; color: #002e5f; }
.filter-btn {
    border: 1px solid #00bfff;
    background: #00bfff;
    color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    transition: 0.2s ease;
}
.filter-btn:hover {
    background: #009ed1;
}
.filter-btn-ghost {
    background: #fff;
    color: #0f4a8a;
    border-color: #cbd5e1;
}
.filter-btn-ghost:hover {
    background: #eff6ff;
}

.case-grid-list { padding: 6rem 0; }
.project-card { background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0,0,0,0.08); transition: 0.3s; }
.project-card:hover { transform: translateY(-1rem); }
.project-img img { width: 100%; height: 22rem; object-fit: cover; }
.project-content { padding: 2.5rem; }
.badge-tech { color: #00bfff; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
.project-content h3 { font-size: 2.2rem; margin: 1rem 0; color: #002e5f; }
.client { font-size: 1.4rem; color: #666; font-style: italic; }
.brief-result { font-size: 1.45rem; color: #444; margin: 1.5rem 0; }
.view-more { color: #00bfff; font-weight: 700; font-size: 1.4rem; }


.detail-main { padding: 8rem 0; background: #fff; }
.detail-section { margin-bottom: 4rem; }
.detail-section h2 { font-size: 2.6rem; color: #002e5f; margin-bottom: 2rem; border-left: 5px solid #00bfff; padding-left: 1.5rem; }
.detail-section p { font-size: 1.6rem; color: #555; line-height: 1.8; }
.solution-box { background: #f0f9ff; padding: 3rem; border-radius: 1.5rem; }

.tech-tag { display: inline-block; padding: 0.8rem 1.5rem; background: #eee; border-radius: 2rem; margin: 0.5rem; font-size: 1.3rem; font-weight: 600; }

.result-sidebar { background: #002e5f; color: #fff; padding: 3rem; border-radius: 1.5rem; margin-bottom: 3rem; }
.result-item { margin-bottom: 2.5rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; }
.result-item h4 { font-size: 3.5rem; color: #00bfff; font-weight: 700; }
.result-item p { font-size: 1.4rem; }

.testimonial-sidebar { padding: 3rem; background: #f9f9f9; border-left: 5px solid #00bfff; border-radius: 0 1.5rem 1.5rem 0; }
.testimonial-sidebar i { font-size: 3rem; color: #00bfff; margin-bottom: 2rem; opacity: 0.3; }

.cta-detail { padding: 8rem 0; background: #f4f7f6; }
.btn-talk { display: inline-block; padding: 1.5rem 4rem; background: #00bfff; color: #fff; font-size: 1.8rem; border-radius: 5rem; font-weight: 700; margin-top: 2rem; transition: 0.3s; }
.btn-talk:hover { background: #002e5f; box-shadow: 0 1rem 2rem rgba(0,191,255,0.3); }

@media (max-width: 768px) {
    .filter-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select,
    .filter-btn {
        width: 100%;
    }
}