/* ==========================================================================
   home.css — Các section riêng của trang chủ
   ========================================================================== */

/* ============================================================== HERO
   Type A — Continuous visual hero: ảnh nền chạy full-bleed liên tục,
   nội dung chữ nằm trong container chung.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f2f3ec;
}

/* Ảnh nền đi qua biến CSS để Tuỳ biến ghi đè được mà vẫn giữ nguyên
   khả năng đổi sang ảnh dành riêng cho điện thoại ở cuối tệp responsive.css. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-bg, url("../images/hero-main.webp"));
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Lớp chuyển tiếp mềm để chữ bên trái luôn đọc được, không tạo cạnh dọc cứng */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(250, 251, 246, 0.97) 0%,
    rgba(250, 251, 246, 0.94) 26%,
    rgba(250, 251, 246, 0.72) 40%,
    rgba(250, 251, 246, 0.22) 51%,
    rgba(250, 251, 246, 0) 60%
  );
}

.hero__inner {
  position: relative;
  min-height: clamp(420px, 29vw, 560px);
  padding-block: 44px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content {
  max-width: 660px;
}

.hero__eyebrow {
  margin: 0;
  font-size: var(--fs-hero-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-green-700);
}

.hero__title {
  margin-top: 12px;
  font-size: var(--fs-hero-1);
  font-weight: 700;
  line-height: 1.08;
  color: var(--c-green-800);
  letter-spacing: -0.01em;
}
.hero__title span {
  display: block;
  font-size: var(--fs-hero-2);
  line-height: 1.12;
}

.hero__lead {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: var(--fs-hero-lead);
  line-height: 1.5;
  color: var(--c-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

/* Hàng USP dưới hero */
.hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  max-width: 750px;
  margin-top: 28px;
}
.usp {
  display: flex;
  align-items: center;
  gap: 11px;
}
.usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  font-size: 18px;
  color: var(--c-green-800);
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid var(--c-green-700);
  border-radius: 50%;
}
.usp__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
}
.usp__sub {
  display: block;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.3;
}

/* ============================================================== BẠN ĐANG CẦN GÌ */
.needs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.need-card {
  display: grid;
  grid-template-columns: 46.5% minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--c-surface-soft);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.need-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.need-card--cream {
  background: var(--c-surface-cream);
}
.need-card--green {
  background: var(--c-surface-green);
}

.need-card__media {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  background: transparent;
}
.need-card:hover .need-card__media img {
  transform: scale(1.04);
}

.need-card__body {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 6px 0;
}
.need-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-green-800);
  line-height: 1.25;
}
.need-card__text {
  margin: 8px 0 0;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--c-body);
}
.need-card__cta {
  margin-top: auto;
  padding-top: 14px;
}

/* ============================================================== DANH MỤC */
/*
 * Số cột do tệp mẫu truyền vào qua biến --cat-cot, để 7 danh mục không bị lẻ
 * một ô ở hàng dưới. Chưa truyền gì thì giữ đúng 6 cột như bản thiết kế.
 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cot, 6), minmax(0, 1fr));
  gap: var(--gap-card-tight);
}

/* ============================================================== SẢN PHẨM NỔI BẬT */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ============================================================== OEM / ODM */
.oem {
  position: relative;
  overflow: hidden;
  background: var(--c-oem-bg);
  padding-block: 0;
}

.oem__media {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: clamp(280px, 33%, 500px);
  z-index: 0;
  pointer-events: none;
}
.oem__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}

.oem__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 35.8% minmax(0, 24.5%) minmax(0, 39.7%);
  align-items: center;
  gap: 0;
  min-height: 190px;
  padding-block: 20px;
}

.oem__content {
  padding-inline-end: 16px;
}
.oem__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-ink);
}
.oem__title {
  margin-top: 4px;
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-green-800);
  line-height: 1.2;
}
.oem__text {
  margin: 8px 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-body);
}
.oem__cta {
  margin-top: 16px;
}

.oem__aside {
  position: relative;
  display: flex;
  flex-direction: column;
}
.oem__script {
  align-self: flex-end;
  margin: 0 8px 14px 0;
  font-size: clamp(17px, 1.53vw, 22px);
  transform: rotate(-4deg);
  transform-origin: right bottom;
  white-space: nowrap;
  text-align: right;
  pointer-events: none;
}
.oem__script span {
  display: block;
}
.oem__script span:last-child {
  margin-inline-start: 26px;
}

/* Bảng 5 bước */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-lg);
  padding: 30px 6px 16px;
  margin-top: 34px;
}
.steps::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: 0;
  height: 1.5px;
  background: var(--c-line-gold);
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 8px 6px 2px;
}
.step + .step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 4px;
  width: 1px;
  background: var(--c-line-gold);
}
.step__num {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-image: var(--grad-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--c-oem-bg);
}
.step__icon {
  font-size: 24px;
  color: var(--c-green-800);
}
.step__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}

/* Biến thể dùng lại ở trang phụ: nền sáng, không nằm trong section OEM */
.steps--plain {
  background: var(--c-surface-soft);
  margin-top: 34px;
}

/* ============================================================== NĂNG LỰC + TIN TỨC */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  gap: 56px;
  align-items: start;
}
.split__head {
  margin-bottom: 18px;
}
.split__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card-tight);
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ============================================================== DẢI CTA */
/* Nền phẳng, khớp đúng màu nền đã đo trên ảnh tham chiếu (21, 70, 41).
   Lá trang trí là PNG đã tách nền nên hoà thẳng vào nền, không tạo khối. */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--c-cta-green);
}
.cta-band__leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 116px;
  z-index: 0;
  pointer-events: none;
}
.cta-band__leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  /* cạnh trong luôn tan dần vào nền, không để lộ đường cắt */
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.cta-band__leaf--left {
  left: 0;
}
.cta-band__leaf--right {
  right: 0;
  width: 92px;
  transform: scaleX(-1);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding-block: 10px;
  padding-inline: 62px 0;
}
.cta-band__text {
  flex: 0 1 386px;
  min-width: 0;
}
.cta-band__title {
  margin: 0;
  font-size: clamp(18px, 1.53vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.cta-band__sub {
  margin: 3px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--c-on-dark-soft);
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 19px;
  background: #fff;
  border-radius: var(--radius-sm);
  color: var(--c-ink);
}
.cta-pill:hover {
  background: #f1f6f0;
  color: var(--c-ink);
}
.cta-pill .icon {
  font-size: 22px;
}
.cta-pill b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
}
.cta-pill span {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.25;
}
.cta-pill--phone .icon {
  color: var(--c-green-800);
}
.cta-pill--zalo .icon {
  color: #0068ff;
}

.cta-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 27px;
  background-image: var(--grad-gold);
  border-radius: var(--radius-sm);
  color: #fff;
  box-shadow: var(--shadow-btn);
  transition: background var(--t-base);
}
.cta-band__btn:hover {
  background-image: var(--grad-gold-hover);
  color: #fff;
}
.cta-band__btn .icon {
  font-size: 20px;
}
.cta-band__btn b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.cta-band__btn span {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.86);
}

.cta-band__script {
  flex: none;
  margin-inline-start: auto;
  font-size: clamp(17px, 1.39vw, 20px);
  color: #eaf5e6;
  transform: rotate(-7deg);
  text-align: center;
  line-height: 1.2;
}
.cta-band__script span {
  display: block;
}
.cta-band__script span:last-child {
  margin-inline-start: 16px;
}