/* ==========================================================================
   List hero — tin tức & sản phẩm (Trại Giống Thu Hà)
   Text-first: không hình trang trí, không SVG minh hoạ. Một cột nên mô tả dài
   vẫn đọc được hết mà không đè lên tiêu đề, và không tranh LCP với ảnh thẻ đầu.
   ========================================================================== */
.list-hero{
  --lh-g:var(--tgh-green,#0d5c40);
  --lh-gd:var(--tgh-green-dark,#084530);
  --lh-gs:var(--tgh-green-soft,#e8f4ee);
  --lh-gold:var(--tgh-gold,#e8a428);
  --lh-goldd:var(--tgh-gold-dark,#96680b);
  --lh-ink2:#3d5145;
  --lh-ink3:#5a6f64;
  --lh-line:var(--tgh-border,#e3ebe6);
  --lh-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;
  overflow:hidden;
  margin:0 0 1.15rem;
  padding:clamp(16px,2.2vw,24px) clamp(16px,2.4vw,26px) clamp(16px,2.2vw,24px) clamp(19px,2.6vw,30px);
  border:1px solid var(--lh-line);
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdfc 0%,#fff 60%);
  box-shadow:0 1px 2px rgba(36,51,44,.045);
  color:var(--lh-ink2);
}
.list-hero *,.list-hero *::before,.list-hero *::after{box-sizing:border-box}
/* Vạch nhấn thay cho khối hình: giữ nhận diện thương hiệu mà không thêm request */
.list-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--lh-g),var(--lh-gold));
}

.list-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .4rem;
  color:var(--lh-goldd);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.list-hero__eyebrow::before{
  content:"";
  width:20px;
  height:2px;
  flex:0 0 auto;
  background:var(--lh-gold);
}
.list-hero h1{
  margin:0;
  font-size:clamp(1.35rem,2.9vw,1.85rem);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.012em;
  color:var(--lh-gd);
}
/* Mô tả hiển thị đầy đủ: không cắt ký tự, không giới hạn số dòng, trải hết chiều rộng */
.list-hero__lead{
  margin:.55rem 0 0;
  width:100%;
  max-width:none;
  font-size:1rem;
  line-height:1.72;
  color:var(--lh-ink2);
}
.list-hero__lead:empty{display:none}

/* ---------- Danh mục con ---------- */
.list-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.9rem 0 0;
  padding:.85rem 0 0;
  border-top:1px solid var(--lh-line);
}
.list-hero__chips a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.35rem .75rem;
  border:1px solid var(--lh-line);
  border-radius:999px;
  background:#fff;
  color:var(--lh-gd);
  font-size:.86rem;
  font-weight:650;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .16s var(--lh-ease),background .16s var(--lh-ease),color .16s var(--lh-ease);
  -webkit-tap-highlight-color:transparent;
}
.list-hero__chips a:hover,
.list-hero__chips a:focus-visible{
  border-color:var(--lh-g);
  background:var(--lh-gs);
  outline:none;
}
.list-hero__chips a.is-active{
  background:var(--lh-g);
  border-color:var(--lh-g);
  color:#fff;
  font-weight:750;
}

/* ---------- Bài giới thiệu danh mục (đặt cuối trang, hiển thị trọn nội dung) ---------- */
.list-intro{
  position:relative;
  overflow:hidden;
  margin:1.5rem 0 0;
  padding:clamp(16px,2.2vw,24px) clamp(16px,2.2vw,24px) clamp(16px,2.2vw,24px) clamp(19px,2.6vw,28px);
  border:1px solid var(--tgh-border,#e3ebe6);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(36,51,44,.045);
  color:#3d5145;
}
.list-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--tgh-green,#0d5c40),var(--tgh-gold,#e8a428));
}
.list-intro__title{
  margin:0 0 .7rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--tgh-border,#e3ebe6);
  font-size:clamp(1.04rem,2vw,1.2rem);
  font-weight:800;
  color:var(--tgh-green-dark,#084530);
}
.list-intro p{
  margin:0 0 .75rem;
  width:100%;
  max-width:none;
  font-size:.98rem;
  line-height:1.78;
}
.list-intro p:last-child{margin-bottom:0}

@media (max-width:760px){
  .list-hero{
    padding:14px 14px 14px 17px;
    margin-bottom:.95rem;
  }
  .list-intro{
    margin-top:1.15rem;
    padding:14px 14px 14px 17px;
    border-radius:10px;
  }
  .list-intro p{font-size:.95rem;line-height:1.72}
  .list-hero h1{font-size:clamp(1.24rem,5.4vw,1.55rem)}
  .list-hero__lead{font-size:.95rem;line-height:1.68}
  .list-hero__chips{margin-top:.75rem;padding-top:.7rem;gap:.35rem}
  .list-hero__chips a{
    min-height:40px;
    padding:.4rem .7rem;
    font-size:.85rem;
  }
}

@media (max-width:640px){
  .list-hero__eyebrow{font-size:.7rem;letter-spacing:.08em}
  /* Danh mục nhiều con: một hàng cuộn ngang gọn hơn nhiều so với 4-5 dòng wrap */
  .list-hero__chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    margin-right:-14px;
    padding-right:14px;
    padding-bottom:.15rem;
  }
  .list-hero__chips::-webkit-scrollbar{display:none}
  .list-hero__chips a{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .news-page .news-featured,
  .product-page .product-page__grid,
  .news-page .news-list{margin-top:.15rem}
  .news-page .news-readmore,
  .news-page .news-readmore--sm{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:.55rem .95rem;
  }
  .news-page .news-list__item{gap:.75rem}
  .news-page .c_pagingData.news-paging a,
  .product-page .c_pagingData.news-paging a{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .list-hero *,.list-hero *::before,.list-hero *::after{
    animation:none !important;
    transition:none !important;
  }
}

@media print{
  .list-hero__chips,.list-intro{display:none !important}
  .list-hero{
    background:#fff !important;
    border:0;
    box-shadow:none;
    padding:0 0 10px;
    margin:0 0 12px;
  }
  .list-hero::before{display:none}
}