/* ==========================================================================
   Hero trang chủ — Trại Giống Thu Hà
   Bố cục gọn: cột chữ bên trái, ảnh con giống bên phải.
   Chuyển động giữ ở mức tối thiểu: hiện dần khi vào trang, phản hồi khi rê chuột.
   Không có vật thể tự chuyển động, không cần JavaScript.
   Mọi selector nằm dưới .thh nên không va chạm CSS của site.
   ========================================================================== */

.thh{
  --g:#0d5c40;           /* xanh thương hiệu */
  --g-dark:#084530;
  --g-mid:#12866a;
  --gold:#e8a428;
  --gold-dark:#96680b;   /* vàng đủ đậm để đọc trên nền sáng (tỷ lệ 4,85) */
  --ink:#24332c;
  --ink-soft:#41564a;
  --line:#cfe2d7;
  --page:#f5f7f6;
  --ease:cubic-bezier(.22,.61,.36,1);

  position:relative;overflow:hidden;
  padding:clamp(22px,4vw,52px) 0 0;
  color:var(--ink);
  font-family:var(--tgh-font,'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);

  /* Nền sáng dựng bằng nhiều vùng màu chồng lên nhau: xanh ngọc rất nhạt ở góc trên
     phải (sau ảnh), ánh vàng nhạt ở dưới trái, nền chuyển dần từ trắng xuống xanh
     lá nhạt để đường lượn ở chân nổi rõ. */
  background-color:#e6f5ed;
  background-image:
    radial-gradient(1240px 580px at 92% 0%, rgba(23,163,152,.34), transparent 60%),
    radial-gradient(900px 540px at 0% 100%, rgba(232,164,40,.24), transparent 62%),
    radial-gradient(840px 560px at 34% 28%, rgba(255,255,255,.92), transparent 64%),
    linear-gradient(168deg,#ffffff 0%,#eefaf4 40%,#c9e7d8 100%);
}
/* Lớp hạt rất mảnh phủ lên nền, khử hiện tượng chuyển màu bị chia thành từng dải. */
.thh::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}
/* Đường lượn ở chân: ba lớp lệch pha nhau, đậm dần từ trong ra để nhìn rõ thành
   một dải sóng chứ không phải một nét mờ. Lớp ngoài cùng mang màu nền trang. */
.thh__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(58px,7.4vw,116px);display:block;pointer-events:none;z-index:1}
.thh__wave .thh__wave-back {fill:#8fcfb2}
.thh__wave .thh__wave-mid  {fill:#c8e8d8}
.thh__wave .thh__wave-front{fill:var(--page)}

/* ---------- Bố cục ---------- */
.thh__inner{
  position:relative;z-index:1;max-width:1170px;margin:0 auto;
  padding:0 clamp(12px,3.2vw,24px) clamp(66px,8.4vw,126px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,28%,330px);
  align-items:center;column-gap:clamp(16px,3.4vw,48px);
}
.thh__copy{grid-column:1}
.thh__figure{grid-column:2}

/* ---------- Tên thương hiệu ---------- */
.thh__brand{display:flex;align-items:center;gap:.7rem;margin:0 0 .55rem}
.thh__logo{width:clamp(38px,6vw,50px);height:auto;flex:0 0 auto}
.thh__title{margin:0;line-height:1.04;position:relative}
/* Gạch chân hai đoạn: đoạn vàng đậm ngắn rồi nhạt dần — dấu nhận diện thương hiệu.
   Tự vẽ ra một lần khi vào trang. */
.thh__title::after{
  content:"";display:block;height:5px;border-radius:3px;
  width:clamp(64px,11vw,132px);margin-top:.56rem;transform-origin:left center;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,rgba(232,164,40,.28) 62%,rgba(232,164,40,0) 100%);
}
.thh--anim .thh__title::after{animation:thh-bar .72s var(--ease) .34s both}

/* "TRẠI GIỐNG": chữ nhỏ, giãn rộng, kèm một vạch ngắn dẫn vào */
.thh__kicker{
  display:flex;align-items:center;gap:.5rem;
  font-size:clamp(.79rem,1.6vw,.86rem);font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:.3rem;
}
.thh__kicker::before{
  content:"";width:clamp(16px,2.4vw,26px);height:2px;border-radius:2px;flex:0 0 auto;
  background:var(--gold);
}

.thh__name{
  display:block;font-size:clamp(1.9rem,6.8vw,3.7rem);font-weight:800;
  letter-spacing:-.025em;color:var(--g);
}
/* Mặt chữ chuyển sắc trong dải xanh thương hiệu, có một vệt xanh ngọc sáng đi qua.
   Chỉ bật khi trình duyệt hỗ trợ; nếu không thì chữ xanh đặc như trên. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .thh__name{
    background:linear-gradient(96deg,
      #0d5c40 0%, #0d5c40 30%, #12866a 43%, #17a38c 50%, #12866a 57%, #0d5c40 70%, #0d5c40 100%);
    background-size:300% 100%;background-position:135% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
  /* vệt sáng đi qua chữ, phần lớn chu kỳ là đứng yên nên không gây rối mắt */
  .thh--anim .thh__name{animation:thh-sheen 9s ease-in-out 1.4s infinite}
}

.thh__tagline{
  margin:.15rem 0 0;font-size:clamp(.92rem,2vw,1.12rem);line-height:1.62;
  color:var(--ink-soft);max-width:46ch;
}

/* ---------- Bốn đối tượng nuôi ---------- */
.thh__species{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  margin:clamp(12px,1.8vw,18px) 0 0;padding:0;
}
.thh__sp{
  display:inline-flex;align-items:center;gap:.36rem;
  padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  font-size:clamp(.8rem,1.7vw,.9rem);font-weight:600;color:var(--g-dark);
}
.thh__sp svg{width:1.15em;height:1.15em;flex:0 0 auto;color:var(--g)}

/* ---------- Nút ---------- */
.thh__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin:clamp(14px,2.2vw,22px) 0 0}
.thh__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.55rem 1.1rem;border-radius:10px;
  font-size:clamp(.94rem,1.9vw,1rem);font-weight:700;text-decoration:none;line-height:1.2;
  transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.thh__btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
/* nút chính dùng xanh thương hiệu để nổi trên nền sáng */
.thh__btn--call{background:var(--g);color:#fff;box-shadow:0 8px 20px rgba(13,92,64,.26)}
.thh__btn--call:hover,.thh__btn--call:focus-visible{background:var(--g-dark);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(13,92,64,.32)}
.thh__btn--ghost{color:var(--g-dark);background:#fff;border:1px solid var(--line)}
.thh__btn--ghost:hover,.thh__btn--ghost:focus-visible{border-color:var(--g);transform:translateY(-2px)}
.thh__tel2{font-size:.9rem;font-weight:700;color:var(--ink-soft);text-decoration:none;
  padding:.4rem .1rem;display:inline-flex;align-items:center;min-height:44px}
.thh__tel2:hover{color:var(--g);text-decoration:underline}

/* ---------- Cam kết ---------- */
.thh__trust{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.15rem;
  margin:clamp(12px,2vw,20px) 0 0;padding:0}
.thh__trust li{display:flex;align-items:center;gap:.38rem;
  font-size:clamp(.8rem,1.7vw,.88rem);font-weight:600;color:var(--ink-soft)}
.thh__trust svg{width:1.05em;height:1.05em;flex:0 0 auto;color:var(--gold-dark)}

/* ---------- Ảnh con giống ---------- */
.thh__figure{position:relative;margin:0;justify-self:end;width:100%;max-width:330px;line-height:0}
/* khối vàng mờ lệch phía sau, tạo chiều sâu */
.thh__figure::before{
  content:"";position:absolute;left:8%;top:5%;right:-5%;bottom:-4%;
  border-radius:76px 20px 76px 20px;
  background:linear-gradient(150deg,rgba(13,92,64,.16),rgba(232,164,40,.22));
}
/* Giới hạn chiều cao để hero không bị kéo dài; phần dưới ảnh được cắt bớt. */
.thh__photo{
  position:relative;display:block;width:100%;
  height:clamp(230px,36vw,430px);object-fit:cover;object-position:50% 0;
  border-radius:76px 20px 76px 20px;
  box-shadow:0 14px 34px rgba(13,60,44,.2);
  transition:transform .45s var(--ease);
}
.thh__figure:hover .thh__photo{transform:translateY(-4px) scale(1.012)}

/* ---------- Hiện dần khi vào trang ----------
   Chỉ chạy khi có lớp .thh--anim (script một dòng ngay dưới khối).
   Không có lớp đó thì mọi thứ hiển thị đầy đủ ngay — chữ không phụ thuộc animation. */
.thh--anim .thh__brand,
.thh--anim .thh__tagline,
.thh--anim .thh__species,
.thh--anim .thh__cta,
.thh--anim .thh__trust,
.thh--anim .thh__figure{animation:thh-in .6s var(--ease) both}
.thh--anim .thh__tagline{animation-delay:.07s}
.thh--anim .thh__species{animation-delay:.13s}
.thh--anim .thh__cta{animation-delay:.19s}
.thh--anim .thh__trust{animation-delay:.25s}
.thh--anim .thh__figure{animation-delay:.1s}

@keyframes thh-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes thh-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes thh-sheen{0%,74%{background-position:135% 0}100%{background-position:-45% 0}}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .thh__inner{grid-template-columns:minmax(0,1fr) clamp(170px,34%,260px);gap:clamp(14px,3vw,28px)}
  .thh__tagline{max-width:40ch}
}

/* ---------- Điện thoại ----------
   Bỏ lưới hai cột. Ảnh cho chảy sang phải cạnh phần tên trại và mô tả;
   từ hàng chọn loài trở xuống dùng hết chiều rộng để nút bấm rộng rãi.
   Mục tiêu: hero chỉ chiếm khoảng nửa màn hình. */
@media (max-width:600px){
  .thh{padding-top:16px}
  .thh__inner{grid-template-columns:minmax(0,1fr) 37%;align-items:start;
    column-gap:14px;padding-bottom:72px}
  .thh__wave{height:52px}
  /* mở khối chữ ra thành từng hàng lưới: ảnh chỉ đứng cạnh tên trại và mô tả,
     từ hàng chọn loài trở xuống chiếm cả bề ngang */
  .thh__copy{display:contents}
  .thh__brand,.thh__tagline{grid-column:1}
  .thh__figure{grid-column:2;grid-row:1 / 3;max-width:150px;align-self:start}
  .thh__species,.thh__cta,.thh__trust{grid-column:1 / -1}
  .thh__figure::before{left:12%;right:-5%;top:6%;bottom:-3%;border-radius:44px 12px 44px 12px}
  .thh__photo{height:186px;border-radius:44px 12px 44px 12px;box-shadow:0 8px 20px rgba(0,0,0,.26)}
  .thh__brand{gap:.5rem;margin-bottom:.45rem}
  .thh__tagline{font-size:.9rem;line-height:1.5;max-width:none}
  .thh__species{gap:.34rem .4rem;margin-top:12px}
  .thh__sp{padding:.28rem .6rem;font-size:.8rem;gap:.3rem}
  .thh__cta{margin-top:12px;gap:.45rem}
  .thh__btn{flex:1 1 42%}
  .thh__tel2{flex:1 1 100%;justify-content:center;min-height:44px}
  .thh__trust{margin-top:10px;gap:.25rem .85rem}
}

/* ---------- Tôn trọng cài đặt giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  .thh *,.thh *::before,.thh *::after{animation:none !important;transition:none !important}
  /* dừng vệt sáng ở vị trí đẹp thay vì để lệch ra ngoài chữ */
  .thh__name{background-position:36% 0}
  .thh__title::after{transform:none}
}