/* Trang Tất cả bài viết (/bai-viet/) bản 2 · 13/10/2026. Chỉ dùng cho bai-viet.html, nạp sau topic-v3.bundle.css.
   Phần bài viết theo bố cục trang tin terra (terra-plat.vn/vi/tin-tuc): hàng nút lọc, lưới thẻ 3 cột (ảnh, nhãn nhóm và ngày, tên bài),
   nút Xem thêm bài viết và dòng Đang hiển thị. Màu, chữ, bo góc theo token BioGaia. */

/* Hero banner thương hiệu: nền Mint 100, Happy Gaia Mint 75 hiện trọn hình bên phải (không xoay, không cắt, không đặt trong hình tròn, không lặp),
   logo BioGaia đen kèm tên sản phẩm Prodentis, chữ đen. Khối Mint 100 duy nhất của trang */
.hb-brand { position: relative; overflow: hidden; background: var(--bg-mint-100); color: var(--bg-ink); }
.hb-brand-in { position: relative; z-index: 1; padding-block: var(--g-l) calc(var(--g-l) + 8px); }
.hb-brand .crumbs, .hb-brand .crumbs a, .hb-brand .crumbs span { color: var(--bg-ink); }
.bp-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: var(--g-m) 0 var(--g-m); }
.bp-logo img { height: 56px; width: auto; display: block; }
.bp-logo span { font-size: 30px; line-height: 1; font-weight: var(--fw-medium); letter-spacing: -.005em; padding-left: 3px; }
.hb-brand h1 { margin: 0 0 var(--g-s); }
.hb-brand .sub { margin: 0; font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.hb-gaia { position: absolute; top: 19%; bottom: 19%; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); pointer-events: none; }
.hb-gaia .gaia { height: 100%; width: auto; display: block; color: var(--bg-mint-75); }
@media (max-width: 960px) {
  .hb-brand-in { padding-bottom: 190px; }
  .hb-gaia { top: auto; bottom: 28px; height: 140px; right: var(--gutter); }
  .bp-logo img { height: 44px; }
  .bp-logo span { font-size: 24px; }
}

/* Khối cuối dẫn sang Hỏi đáp: nửa chữ đổi sang Mint 30 để banner đầu trang là khối Mint 100 duy nhất */
#hoi-dap .duo-txt { background: var(--bg-mint-30); }

/* Đầu section */
.news-head { max-width: 760px; }
.news-head .lead { margin-top: 8px; }
.news-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; }

/* Bộ lọc kiểu terra: nút bo tròn của E11, điện thoại cuộn ngang một hàng */
.filters--bv { gap: 8px; margin-bottom: var(--g-m); }
@media (max-width: 760px) {
  .filters--bv { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .filters--bv::-webkit-scrollbar { display: none; }
  .filters--bv button { flex: none; white-space: nowrap; }
}

/* Lưới thẻ: góc vuông theo phương án B của site (ảnh, thẻ góc vuông, nút bo 4px) */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; gap: 16px; } }
.nc { display: flex; flex-direction: column; background: #fff; border-radius: 0; overflow: hidden; box-shadow: var(--shadow-card); color: var(--bg-ink); text-decoration: none; }
.s--plain .nc { border: 1px solid var(--bg-mint-30); box-shadow: none; }
.nc[hidden] { display: none; }
.nc-img { aspect-ratio: 1200 / 628; background: var(--bg-mint-15); overflow: hidden; }
.nc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
a.nc:hover .nc-img img { transform: scale(1.04); }
.nc-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.nc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nc-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 4px; background: var(--bg-mint-30); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .02em; }
.nc-date { font-size: var(--t-small); color: var(--color-text-muted); }
.nc--soon .nc-date { font-weight: var(--fw-semibold); color: var(--bg-ink); }
.nc h3 { margin: 0; font-size: 1.125rem; line-height: 1.35; font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-more { margin-top: auto; font-size: var(--t-small); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 6px; }
.nc-more .arr { width: 16px; height: 16px; }

/* Cuối section: nút Xem thêm và dòng đếm */
.news-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--g-m); }
.news-more[hidden] { display: none; }
.news-count { margin: 0; font-size: var(--t-small); color: var(--color-text-muted); }