/* =========================================
   HERO TIN TỨC
   ========================================= */
.news-hero {
  position: relative; height: 500px; margin-top: 80px;
  background-color: var(--color-primary); display: flex; align-items: center; overflow: hidden;
}
.news-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.news-hero__img { width: 100%; height: 100%; object-fit: cover; }
.news-hero__shape {
  position: absolute; top: 0; left: 0; bottom: 0; width: 60%;
  background-color: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); z-index: 2;
}

.news-hero__inner { position: relative; z-index: 3; display: flex; width: 100%; height: 100%; }
.news-hero__left { width: 50%; color: var(--color-white); display: flex; flex-direction: column; justify-content: center; padding-right: 40px; }
.breadcrumb { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.8; }
.breadcrumb a { color: var(--color-white); text-decoration: none; transition: 0.2s; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb .icon { width: 12px; height: 12px; }

.news-hero__desc { font-size: 16px; line-height: 1.6; opacity: 0.9; margin: 24px 0; max-width: 90%; }
.news-hero__quote { position: relative; padding-left: 20px; font-size: 18px; line-height: 1.5; border-left: 3px solid #ED1C24; margin-top: 16px; }

.news-hero__right { width: 50%; display: flex; align-items: center; justify-content: flex-end; }
.news-hero__slogan { color: #FFF; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: 2px; text-shadow: 0 4px 12px rgba(0,0,0,0.5); text-align: right; }

.news-hero h1, h2 {color: #fff; padding-top: 20px;}

/* =========================================
   BỘ LỌC CHUYÊN MỤC
   ========================================= */
.news-filter { display: flex; gap: 32px; border-bottom: 1px solid var(--color-border); margin: 0 0 40px 0; overflow-x: auto; scrollbar-width: none; }
.news-filter::-webkit-scrollbar { display: none; }
.filter-btn { background: none; border: none; font-size: 16px; font-weight: 600; color: #666; padding: 16px 0; cursor: pointer; position: relative; white-space: nowrap; transition: 0.3s; font-family: inherit; }
.filter-btn:hover { color: var(--color-primary); }
.filter-btn.is-active { color: var(--color-primary); }
.filter-btn.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #ED1C24; }

/* =========================================
   FEATURED POST (Bài nổi bật)
   ========================================= */
.news-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-bottom: 60px; background: #F8F9FA; border-radius: 12px; overflow: hidden; }
.nf-img-wrap { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; }
.nf-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.nf-img-wrap:hover .nf-img { transform: scale(1.05); }

.nf-content { padding: 40px 40px 40px 0; display: flex; flex-direction: column; justify-content: center; }
.post-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 13px; }
.pill-cat { background: #E5E7EB; color: #4B5563; padding: 4px 12px; border-radius: 4px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Xóa gạch chân mặc định của thẻ link ở nhãn Category */
.post-meta .pill-cat {
    text-decoration: none !important;
}

/* Tiện tay thêm chút hiệu ứng khi di chuột vào cho xịn */
.post-meta .pill-cat:hover {
    opacity: 0.85;
    text-decoration: none;
}
.post-date { color: #666; }

.nf-title { font-size: 28px; font-weight: 700; color: var(--color-primary); margin-bottom: 16px; line-height: 1.3; text-decoration: none; display: block; }
.nf-title:hover { color: #ED1C24; }
.nf-excerpt { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn-readmore { display: inline-flex; align-items: center; gap: 8px; color: #ED1C24; font-weight: 700; font-size: 14px; text-decoration: none; transition: 0.2s; }
.btn-readmore:hover { gap: 12px; }
.btn-readmore .icon { width: 16px; height: 16px; }

/* =========================================
   LƯỚI BÀI VIẾT (News Grid)
   ========================================= */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.news-card { display: flex; flex-direction: column; }
.nc-img-wrap { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 8px; margin-bottom: 20px; }
.nc-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.nc-img-wrap:hover .nc-img { transform: scale(1.05); }

.nc-title { font-size: 20px; font-weight: 700; color: var(--color-primary); margin-bottom: 12px; line-height: 1.4; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-title:hover { color: #ED1C24; }
.nc-excerpt { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

.news-empty { text-align: center; padding: 60px 20px; color: #777; }
.news-empty .icon { width: 48px; height: 48px; color: #ccc; margin-bottom: 16px; }

/* =========================================
   PHÂN TRANG (Pagination)
   ========================================= */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.page-btn { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: #FFF; border-radius: 4px; font-weight: 600; color: var(--color-text); cursor: pointer; transition: 0.2s; }
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: #ED1C24; border-color: #ED1C24; color: #FFF; }
.page-dots { color: #999; }

/* =========================================
   NEWSLETTER (FIX CÂN ĐỐI FORM)
   ========================================= */
.newsletter-sec { 
  background: var(--color-primary); 
  padding: 20px 0; 
}
.newsletter-inner { 
  display: flex; 
  align-items: center; /* Ép 2 cột trái phải canh giữa trục dọc */
  justify-content: space-between; 
  gap: 40px; 
}
.nl-content { width: 50%; color: #FFF; }
.nl-content h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.nl-content p { font-size: 14px; opacity: 0.85; line-height: 1.5; margin: 0; }
.nl-form-box { width: 50%; }

/* Khối Form trắng bọc ngoài */
.nl-form { 
  display: flex; 
  align-items: center; /* Ép input và nút bấm nằm giữa thẳng hàng */
  background: #FFF; 
  padding: 6px 6px 6px 24px; /* Padding trái to hơn để chữ thụt vào trong */
  border-radius: 8px; 
}

/* Ô nhập liệu */
.nl-input { 
  flex: 1; 
  border: none; 
  padding: 0; 
  height: 46px; /* Ép cứng chiều cao */
  font-size: 15px; 
  outline: none; 
  background: transparent;
  color: var(--color-text);
}

/* Nút Đăng ký */
.nl-form .btn { 
  flex-shrink: 0; 
  margin: 0;
  height: 46px; /* Bằng đúng chiều cao input */
  display: flex;
  align-items: center;
  padding: 0 24px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1199px) {
  .news-hero__shape { width: 65%; }
  .news-hero__left { width: 60%; }
}
@media (max-width: 991px) {
  .news-hero { padding: 40px 0; height: auto; }
  .news-hero__shape { width: 100%; clip-path: none; background: linear-gradient(to right, rgba(17,27,87,1) 30%, rgba(17,27,87,0.5) 100%); }
  .news-hero__inner { flex-direction: column; }
  .news-hero__left { width: 100%; padding: 0; }
  .news-hero__right { display: none; } /* Giấu slogan trên mobile */
  
  .news-featured { grid-template-columns: 1fr; gap: 0; }
  .nf-img-wrap { aspect-ratio: 16/8; }
  .nf-content { padding: 24px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  
  .newsletter-inner { flex-direction: column; text-align: center; }
  .nl-content, .nl-form-box { width: 100%; }
}
@media (max-width: 767px) {
  .news-grid { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; background: none; padding: 0; gap: 12px; }
  .nl-input { padding: 14px; border-radius: 4px; }
  .nl-form .btn { width: 100%; justify-content: center; }
}

/* ====================================================
   FIX CSS CHO BỘ LỌC CHUYÊN MỤC (DÙNG THẺ A CHUẨN SEO)
   ==================================================== */
.news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nếu có theo thiết kế */
    margin-bottom: 3rem;
}

.news-filter .filter-btn {
    display: inline-block;
    padding: 10px 0;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text, #333);
    text-decoration: none !important; /* Xóa gạch chân mặc định của thẻ a */
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    box-shadow: none !important;
}

/* Hiệu ứng khi hover */
.news-filter .filter-btn:hover {
    color: var(--color-primary, #d32f2f);
}

/* Trạng thái Active (Sáng lên và có gạch chân đỏ như trong ảnh) */
.news-filter .filter-btn.is-active {
    color: var(--color-primary, #d32f2f);
}

/* Tạo thanh gạch chân màu đỏ cho mục đang active */
.news-filter .filter-btn.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Đè lên viền của container */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary, #d32f2f);
}