.header:not(.header-active) .navbar ul li a {
    color: #002e5f !important;
    font-weight: 500 !important;
}

/* Nút mobile menu lúc chưa cuộn cũng màu đen */
.header:not(.header-active) .fa-bars {
    color: #002e5f !important;
    
}

/* Logo lúc chưa cuộn: Thêm bóng đổ nhẹ để dễ nhìn nếu logo màu sáng */
.header:not(.header-active) .logo img {
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
}

/* 2. Trạng thái ĐÃ CUỘN (header-active): Nền trắng, chữ xanh */
.header.header-active {
    background: #ffffff !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.12);
}

.header.header-active .navbar ul li a {
    color: #002e5f !important;
}

.header.header-active .fa-bars {
    color: #002e5f !important;
}

/* Làm logo nổi bật hơn trên nền trắng (nếu cần) */
.header:not(.header-active) .logo img {
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
}   
.blog-hero { padding: 15rem 2rem 6rem; background: #f8f9fa; color: #002e5f; }
.blog-hero h1 { font-size: 4.5rem; font-weight: 700; }
.blog-hero p { font-size: 1.8rem; color: #666; max-width: 70rem; margin: 2rem auto 0; }


.cat-list { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; gap: 1rem; border-bottom: 1px solid #eee; padding-bottom: 2rem; }
.cat-list li { font-size: 1.4rem; padding: 0.8rem 2rem; border-radius: 5rem; cursor: pointer; color: #555; transition: 0.3s; border: 1px solid #ddd; }
.cat-list li:hover, .cat-list li.active { background: #00bfff; color: #fff; border-color: #00bfff; }


.featured-card { background: #fff; border-radius: 2rem; overflow: hidden; box-shadow: 0 2rem 4rem rgba(0,0,0,0.1); border: 1px solid #eee; }
.f-img img { width: 100%; height: 100%; object-fit: cover; min-height: 40rem; }
.f-content { padding: 4rem; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.badge-cat { font-size: 1.2rem; font-weight: 700; color: #00bfff; text-transform: uppercase; margin-bottom: 1.5rem; display: block; }
.f-content h2 { font-size: 3rem; color: #002e5f; margin-bottom: 2rem; line-height: 1.4; }
.f-content p { font-size: 1.6rem; color: #666; margin-bottom: 2.5rem; }
.meta { font-size: 1.3rem; color: #aaa; margin-bottom: 3rem; }
.btn-read { align-self: flex-start; padding: 1.2rem 3rem; background: #002e5f; color: #fff; font-size: 1.5rem; border-radius: 0.5rem; font-weight: 600; }


.blog-card { background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid #eee; transition: 0.3s; height: 100%; }
.blog-card:hover { transform: translateY(-1rem); box-shadow: 0 1rem 3rem rgba(0,0,0,0.1); }
.card-img img { width: 100%; height: 22rem; object-fit: cover; }
.card-body { padding: 2.5rem; }
.cat-tag { font-size: 1.1rem; font-weight: 700; color: #00bfff; text-transform: uppercase; margin-bottom: 1rem; display: block; }
.card-body h3 { font-size: 2rem; color: #002e5f; margin-bottom: 1.5rem; line-height: 1.5; height: 6rem; overflow: hidden; }
.card-body p { font-size: 1.4rem; color: #666; margin-bottom: 2rem; line-height: 1.6; }
.more-link { font-size: 1.4rem; color: #00bfff; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }


.pagination-custom { display: inline-flex; list-style: none; gap: 1rem; }
.pagination-custom li { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 0.5rem; font-size: 1.6rem; cursor: pointer; transition: 0.3s; }
.pagination-custom li.active, .pagination-custom li:hover { background: #002e5f; color: #fff; border-color: #002e5f; }