/* ===== Page: Blog – All Posts ===== */

.blog-index .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Hero */
.c-hero.-center { 
    text-align: center; 
    padding: 56px 0 28px; 
    background: #fff; 
}
.c-hero__title { 
    font-size: 2.5rem; 
    line-height: 1.2; 
    margin: 0 0 8px; 
    font-weight: 800; 
    letter-spacing: .5px; 
}
.c-hero__desc  { 
    color: var(--color-muted); 
    margin: 0; 
}
/* Tabs (category) */
.blog-filter { padding: 18px 0 6px; }
.blog-filter__tabs { 
    display:flex; 
    flex-wrap:wrap;
    gap:12px;
    align-items: center;
    width: 100%;
    margin: 6px 0 10px; }
/* Each tab takes equal space and centers its text */
.blog-filter__tabs .tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid var(--color-border); 
  transition: border-color .14s ease, box-shadow .14s ease, background-color .12s ease;
  border-radius: 4px; 
  background:none; 
  color: var(--color-text); 
  text-decoration:none; 
  font-weight:400;
  cursor: pointer;
}

.tab.is-active { 
  border-color: var(--color-primary); /* change color if needed */
  color: var(--color-primary);
  font-weight:600;
}
@media (max-width: 720px) {
  .blog-filter__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }
  .blog-filter__tabs .tab {
    flex: 0 0 auto; /* don't force equal width on tiny screens */
  }
}

/* Sort bar */
.blog-filter__sort { 
  display:flex; 
  align-items:center; 
  gap:10px; 
  margin-bottom: 10px; 
}
.blog-filter__sort label { font-size:14px; color:#666; }
.blog-filter__sort select { padding:8px 12px; border:1px solid #ddd; border-radius:8px; background:#fff; }

/* Make Sort by: newest/oldest/most popular sit inline */
.blog-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  margin-bottom: 16px;
}
.sort-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}
.sort-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* button styles for the sort tabs */
.sort-tab {
  font-size: 0.75rem;
  background: none;
  border: 0;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
}
.sort-tab.is-active {
  background: var(--color-bg-soft);
}

.sort-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  padding-right: 6px;
}

/* Grid */
.blog-grid { padding: 6px 0 50px; }
.blog-grid .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
@media (max-width: 992px){ .blog-grid .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid .grid { grid-template-columns:1fr; } }

/* Card */
.card { 
  background:#fff; 
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius:4px; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column;
  cursor: pointer;
  transition: all .3s ease;
}
.card:hover {
  transform: translateY(-2px);
  border: 1px solid var(--color-primary);

 }

.card__thumb img, .thumb-placeholder { 
  width:100%; 
  display:block; 
  aspect-ratio: 16/9; 
  object-fit:cover; 
  background:var(--color-bg-soft); }
.card__body { 
  padding:14px 14px 16px; 
}
.card__title { 
  font-size:1rem; 
  font-weight:700;
  line-height:1.45; 
  margin:0 0 6px; 
}
.card__title a { 
  color:#111; 
  text-decoration:none; }
.card__excerpt { 
  color:var(--color-muted); 
  font-size:0.875rem; 
  margin:0 0 10px; 
}
.card__meta { 
  font-size:0.75rem; 
  color: var(--color-muted);
  display:flex; gap:8px; flex-wrap:wrap; 
}
.card:hover .card__title a{ 
  color: var(--color-primary); 
}

/* Pagination */
.pagination { 
  margin: 26px 0 42px;
  text-align: center;
}

/* nếu vẫn dùng nút load more thì giữ lại */
.btn-loadmore { 
  display:inline-block; 
  padding:12px 20px; 
  border-radius:999px; 
  background:#111; 
  color:#fff; 
  font-weight:700; 
  border:none; 
  cursor:pointer; 
}
.btn-loadmore:hover { opacity:.9; }
#btnLoadMore.is-loading { opacity:.7; pointer-events:none; }

/* dãy số trang */
.pagination .numbers { 
  margin-top: 40px; 
}

.pagination .numbers ul { 
  list-style:none; 
  padding:0; 
  margin:0; 
  display:inline-flex; 
  gap:8px; 
}

/* từng ô số / dấu ... / mũi tên */
.pagination .numbers a,
.pagination .numbers span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 12px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  color:#374151;
  background:#fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* trang hiện tại */
.pagination .numbers .current {
  background: var(--color-primary, #0052cc);
  border-color: var(--color-primary, #0052cc);
  color:#fff;
}

/* hover cho các trang khác */
.pagination .numbers a:not(.current):hover {
  background:#f3f4f6;
  border-color:#d1d5db;
}


/* Ẩn chữ Previous & Next, giữ mũi tên */
.pagination .numbers .prev.page-numbers,
.pagination .numbers .next.page-numbers {
  font-size: 0; /* ẩn text */
  padding: 0;   /* reset padding */
  min-width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* thêm mũi tên lại bằng ::before */
.pagination .numbers .prev.page-numbers::before {
  content: "«";
  font-size: 16px;
  color: #374151;
}

.pagination .numbers .next.page-numbers::before {
  content: "»";
  font-size: 16px;
  color: #374151;
}

/* style chung */
.pagination .numbers .prev.page-numbers,
.pagination .numbers .next.page-numbers {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}
.pagination .numbers .prev.page-numbers:hover,
.pagination .numbers .next.page-numbers:hover {
  background:#f3f4f6;
  border-color:#d1d5db;
}

.blog-grid a{ 
  text-decoration:none; 
  color: var(--color-primary);
}

.blog-grid a:hover{ 
  text-decoration:underline; 
}