/* ---------- Trang chủ ---------- */
.hero {
  margin: clamp(14px, 2vw, 24px) var(--gutter) 0;
  height: clamp(220px, 49.8vw, 717px);
  overflow: hidden;
  background: linear-gradient(135deg, #d9efe7, #9fd3bf);
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand {
  margin: 0 var(--gutter);
  color: var(--green);
  font-size: clamp(40px, 8.9vw, 128px);
  line-height: 1.15;
  padding-top: 8px;
}

.cta {
  margin: clamp(24px, 3vw, 44px) var(--gutter) 60px;
  border-top: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  padding: clamp(14px, 1.8vw, 24px) 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(14px, 3.5vw, 50px);
  color: var(--green);
  font-size: clamp(22px, 3.3vw, 48px);
}

.cta .arrow {
  width: clamp(48px, 5.3vw, 76px);
  height: clamp(48px, 5.3vw, 76px);
  border-radius: 50%;
  background: #007650;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.cta:hover .arrow {
  transform: translateX(6px);
}

.cta .arrow svg {
  width: 55%;
  height: 55%;
}