:root {
  --fb-blue: #1a73e8;       /* Google Blue */
  --fb-blue-hover: #1557b0;
  --fb-text-dark: #202124;
  --fb-text-gray: #5f6368;
  --fb-bg-light: #f8f9fa;
  --fb-border-radius: 12px;
}

.fb-blog-grid-wrapper {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 15px;
}

/* --- FILTERS --- */
.fb-blog-grid-wrapper .fb-blog-grid-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 40px;
}
.fb-blog-grid-wrapper .fb-filter-btn {
  margin-right: 4px;
  border-radius: 9px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: var(--fb-text-gray);
  padding: 2px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fb-blog-grid-wrapper .fb-filter-btn:hover {
  background: #f1f3f4;
  color: var(--fb-blue);
}
.fb-blog-grid-wrapper .fb-filter-btn.is-active {
  background: var(--fb-blue);
  color: #fff;
  border-color: var(--fb-blue);
  box-shadow: 0 2px 5px rgba(26, 115, 232, 0.3);
}

/* --- FEATURED SECTION --- */
.fb-featured-wrapper {
  margin-bottom: 50px;
}
.fb-featured-inner {
  display: flex; /* Flexbox cho layout trái/phải */
  background: var(--fb-blue);
  border-radius: var(--fb-border-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}
/* Cột Text (Trái) */
.fb-featured-body {
  flex: 1;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: relative;
  z-index: 2;
}
/* Cột Ảnh (Phải) */
.fb-featured-media {
  flex: 1;
  position: relative;
  min-height: 300px;
}
.fb-featured-thumb {
  display: block;
  width: 100%;
  height: 100%;
}
.fb-featured-thumb-img,
.fb-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Featured Elements */
.fb-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 15px;
}
.fb-badge-featured {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
}
.fb-badge-featured i { margin-right: 5px; }

.fb-featured-title {
  font-size: 30px;
  line-height: 1.3;
  margin: 0 0 15px;
  color: #fff;
  font-weight: 500;
}
.fb-featured-title a { color: inherit; text-decoration: none; }
.fb-featured-title a:hover { opacity: 0.9; }

.fb-featured-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 25px;
  max-width: 90%;
}

.fb-meta-row-light {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}
.fb-meta-row-light i { margin-right: 5px; }

/* Button Trắng cho Featured */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fb-btn-white {
  background: #fff;
  color: var(--fb-blue);
  width: fit-content;
}
.fb-btn-white:hover {
  background: #f1f3f4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- GRID CARDS --- */
.fb-blog-grid-list-wrap { margin-top: 10px; }
.fb-blog-grid-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  transition: opacity 0.2s ease;
}

.fb-post-card {
  background: #fff;
  border-radius: var(--fb-border-radius);
  /* Bóng nhẹ hơn style cũ */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fb-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.fb-post-card-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.fb-post-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category Text Blue */
.fb-post-card-topline { margin-bottom: 10px; }
.fb-cat-text {
  color: var(--fb-blue);
  font-size: 12px;
  font-weight: 500;
  text-transform: unset;
  letter-spacing: 0.5px;
}

.fb-post-title {
  font-size: 18px;
  margin: 0 0 10px;
  line-height: 1.4;
  color: var(--fb-text-dark);
  font-weight:500;
}
.fb-post-title a { color: inherit; text-decoration: none; }
.fb-post-title a:hover { color: var(--fb-blue); }

.fb-post-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fb-text-gray);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-meta-row--small {
  font-size: 12px;
  color: #9aa0a6;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fb-meta-row--small i { font-size: 12px; }

/* Link Read More (Thay vì Button Box) */
.fb-link-readmore {
  margin-top: auto;
  color: var(--fb-blue);
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}
.fb-link-readmore:hover {
  gap: 8px; /* Hiệu ứng mũi tên trượt */
}

/* --- LOAD MORE BUTTON --- */
.fb-blog-grid-loadmore-wrap {
  text-align: center;
  margin-top: 40px;
}
.fb-btn-outline-blue {
    background: transparent;
    border: 2px solid #1a73e8;
    color: var(--fb-blue);
    padding: 10px 40px;
    border-radius: 9px;
}
.fb-btn-outline-blue:hover {
  background: rgba(26, 115, 232, 0.04);
  border-color: var(--fb-blue);
}
.fb-btn-outline-blue.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/* --- LOADING SPINNER (Giữ nguyên logic cũ nhưng đổi màu) --- */
.fb-blog-grid-wrapper.fb-loading .fb-blog-grid-filters::after {
  border-top-color: var(--fb-blue);
}
.fb-blog-grid-wrapper.fb-loading .fb-blog-grid-list {
  opacity: 0.5;
  pointer-events: none;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }


/* =============================================
   RESPONSIVE (TABLET & MOBILE GỘP LÀM 1)
   ============================================= */

/* Áp dụng cho màn hình Tablet dọc/ngang và Mobile (Dưới 1024px) */
@media (max-width: 1024px) {
  
  /* 1. Grid bài viết: Chuyển thẳng về 1 cột */
  .fb-blog-grid-list {
    grid-template-columns: 1fr; /* Duy nhất 1 cột */
    gap: 20px; /* Giảm khoảng cách chút cho gọn */
  }

  /* 2. Bài nổi bật (Featured): Xếp chồng dọc */
  .fb-featured-inner {
    flex-direction: column-reverse; /* Đảo chiều: Text ở dưới, Ảnh ở trên */
    min-height: auto;
  }

  /* Căn chỉnh lại khu vực ảnh bài nổi bật */
  .fb-featured-media {
    min-height: 250px;
    height: 250px;
    /* Bo góc trên, bỏ bo góc dưới để khớp với phần text bên dưới */
    border-radius: var(--fb-border-radius) var(--fb-border-radius) 0 0;
  }

  /* Căn chỉnh lại padding nội dung bài nổi bật */
  .fb-featured-body {
    padding: 30px 20px;
    /* Bo góc dưới */
    border-radius: 0 0 var(--fb-border-radius) var(--fb-border-radius);
  }

  /* Giảm size chữ tiêu đề chút cho đỡ tràn */
  .fb-featured-title {
    font-size: 24px;
  }
}


/* =============================================
   1. KHÔI PHỤC SPINNER LOADING (KHI LỌC)
   ============================================= */

/* Đảm bảo vị trí tương đối để neo spinner */
.fb-blog-grid-wrapper.fb-loading .fb-blog-grid-filters {
  position: relative;
}

/* Tạo vòng quay spinner */
.fb-blog-grid-wrapper.fb-loading .fb-blog-grid-filters::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40px; /* Nằm ngay dưới hàng nút lọc */
  margin-left: -15px; /* Căn giữa (một nửa width) */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e1e4e8; /* Màu viền xám mờ */
  border-top-color: var(--fb-blue); /* Màu xanh chủ đạo */
  animation: fb-spin 0.8s linear infinite;
  z-index: 10;
  display: block;
}

/* Định nghĩa chuyển động xoay */
@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

/* Làm mờ danh sách khi đang tải để người dùng biết */
.fb-blog-grid-wrapper.fb-loading .fb-blog-grid-list {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s;
}


/* =============================================
   2. HIỆU ỨNG ZOOM ẢNH (HOVER EFFECT)
   ============================================= */

/* --- Cho bài nổi bật (Featured) --- */
/* Cần overflow hidden ở khung chứa để ảnh không zoom tràn ra ngoài */
.fb-featured-media {
  overflow: hidden;
  border-top-right-radius: var(--fb-border-radius);
  border-bottom-right-radius: var(--fb-border-radius);
}
/* Thiết lập transition mượt mà cho ảnh */
.fb-featured-thumb-img,
.fb-featured-thumb img {
  transition: transform 0.6s ease; /* Thời gian zoom 0.6s */
  transform-origin: center;
}
/* Khi di chuột vào khối cha thì zoom ảnh */
.fb-featured-inner:hover .fb-featured-thumb-img,
.fb-featured-inner:hover .fb-featured-thumb img {
  transform: scale(1.08); /* Zoom lên 108% */
}

/* --- Cho bài viết lưới (Grid Card) --- */
.fb-post-card-thumb {
  display: block;
  overflow: hidden; /* Cắt phần ảnh thừa khi zoom */
  /* Border radius phía trên nếu cần thiết, dù card cha đã có overflow hidden */
}
.fb-post-card-thumb img {
  transition: transform 0.6s ease;
  transform-origin: center;
  width: 100%;
  height: 200px; /* Đảm bảo chiều cao cố định để không bị giật layout */
  object-fit: cover;
}
/* Khi di chuột vào card thì zoom ảnh */
.fb-post-card:hover .fb-post-card-thumb img {
  transform: scale(1.08);
}

/* Reponsive fix: Mobile bo góc Featured khác Desktop */
@media (max-width: 900px) {
  .fb-featured-media {
    border-radius: var(--fb-border-radius) var(--fb-border-radius) 0 0;
  }
}